/*
 * La calculadora de Grupo Constructia.
 *
 * POR QUE TODOS LOS SELECTORES LLEVAN .gcc DELANTE, Y NO ES MANIA
 * ---------------------------------------------------------------
 * El tema de gcsabadell estiliza el contenido con reglas del tipo `.the-content h2`, que en
 * especificidad es (0,1,1). Una clase sola como `.gcc-h2` es (0,1,0) y PIERDE, por mucho que esta
 * hoja cargue despues. Eso paso el 2026-09-26: la calculadora salia con el H2 negro y grande, el
 * claim como texto normal y todo alineado a la izquierda, porque ni un solo estilo de aqui se
 * aplicaba. Con `.gcc .gcc-h2` subimos a (0,2,0) y ganamos sin tener que llenar esto de !important.
 * Solo se usa !important donde el tema lo usa tambien (los margenes de h2).
 *
 * COLORES: los del tema, sacados de sus propias variables (--wp--preset--color--*): blauc #3294e7
 * es el azul de la marca y taronja #ff7124 el de los botones.
 *
 * FONDO BLANCO a proposito: el hero lleva foto y el blanco corta limpio.
 * PESOS: 500 como maximo, en TODO. Eduard, 2026-09-26: "eres demasiado duro con las tipos (...)
 * no seas tan duro y poco elegante". El H2 va en 400, o sea normal del todo. Nada de 600 ni 700:
 * el tema pone los titulares en grueso y hay que bajarlo a mano con !important donde haga falta.
 * ANCHOS: el claim mas estrecho que el resto para que caiga en dos lineas; la calculadora en 560px.
 * TIPOGRAFIA: la que herede del tema. No se carga ninguna fuente nueva.
 */

section.gcc {
  --gcc-azul: #3294e7;
  --gcc-azul-hondo: #10456f;
  --gcc-azul-claro: #eaf6fe;
  --gcc-azul-borde: #b5ddff;
  --gcc-naranja: #ff7124;
  --gcc-texto: #222;
  --gcc-suave: #5b6570;
  --gcc-linea: #e3e8ee;

  display: block;
  background: #fff;
  padding: 96px 20px 32px;    /* abajo poco: la pagina ya pone 30+15px de espaciadores y 40px de margen del H2 siguiente (medido 2026-09-26) */
  margin: 0;
  color: var(--gcc-texto);
  text-align: center;          /* TODA la seccion centrada: titulos, preguntas y textos */
}

.gcc .gcc-caja { max-width: 720px; margin: 0 auto; }

/* --- cabecera, centrada --- */
.gcc .gcc-cabecera { text-align: center; }

.gcc .gcc-h2 {
  margin: 0 0 12px !important;     /* el tema pone margin-top de 2.5rem con !important */
  padding: 0;
  font-size: 12.5px;
  font-weight: 400 !important;     /* normal, no negrita: el tema pone los h2 en grueso */
  letter-spacing: 0.1em;
  line-height: 1.45;
  color: var(--gcc-azul);
  text-transform: uppercase;
  text-align: center;
}
.gcc .gcc-h2:before { display: none; }   /* el tema le cuelga un ancla de scroll de 70px */

.gcc .gcc-claim {
  max-width: 26ch;                  /* dos lineas, y siempre mas estrecho que la tarjeta */
  margin: 0 auto 38px;
  font-size: clamp(26px, 3.4vw, 35px);
  font-weight: 500 !important;      /* negrita normal. El tema pone los titulares en 800 */
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--gcc-texto);
  text-align: center;
  text-wrap: balance;
}

/* --- barra de avance (solo con JavaScript) --- */
.gcc .gcc-avance { margin: 0 0 34px; }
/* La barra va arriba y el rotulo debajo: el tema aplasta los margenes de los <p> y, con el texto
   encima, los dos acababan pegados. Asi el orden no depende de que el margen sobreviva. */
.gcc .gcc-avance-txt { margin: 8px 0 0 !important; font-size: 11.5px; letter-spacing: 0.03em; line-height: 1.4; color: var(--gcc-suave); }
.gcc .gcc-barra { height: 3px; max-width: 200px; margin: 0 auto; background: var(--gcc-linea); border-radius: 999px; overflow: hidden; }
.gcc .gcc-barra span { display: block; height: 100%; background: var(--gcc-azul); border-radius: 999px; transition: width 0.32s ease; }

/* --- los pasos --- */
/* --- LA TARJETA DEL FORMULARIO ---
   Suelto sobre el blanco se veia enclenque. La tarjeta le da cuerpo, lo agrupa y lo separa del
   panel del precio. Sombra suave y borde fino, en la linea de lo que ya usa el tema. */
.gcc .gcc-tarjeta {
  /* La caja siempre mas ancha que el titular que lleva encima: si el texto sobresale de la
     tarjeta, la tarjeta parece pequena y todo el bloque se descompensa (Eduard, 2026-09-26). */
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 48px 42px;
  background: #fff;
  border: 1px solid var(--gcc-linea);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 69, 111, 0.04), 0 8px 28px rgba(16, 69, 111, 0.07);
}
.gcc .gcc-form { margin: 0; }
.gcc .gcc-paso { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
/* Sin JavaScript los cuatro se ven seguidos y necesitan aire. Con JavaScript solo hay uno. */
.gcc .gcc-paso + .gcc-paso { margin-top: 30px; }
.gcc.gcc-con-js .gcc-paso + .gcc-paso { margin-top: 0; }
.gcc.gcc-con-js .gcc-form { min-height: 214px; }

.gcc .gcc-preg {
  padding: 0; margin: 0 0 24px;
  font-size: clamp(18px, 2.2vw, 20px);
  font-weight: 500; line-height: 1.3; color: var(--gcc-texto);
}
.gcc .gcc-pista { margin: 16px auto 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--gcc-suave); }

/* --- año --- */
.gcc .gcc-anyo-caja {
  display: flex;
  justify-content: center;
  margin: 0;
}
.gcc .gcc-anyo {
  /* Va en type=text con teclado numerico, no en type=number: el number reserva sitio para las
     flechitas aunque las escondas, y por eso el numero no quedaba centrado. Con text, el
     text-align y el line-height mandan de verdad.
     Alto fijo y line-height igual al alto: asi el numero queda clavado en el centro vertical. */
  /* Mas ancho que su propia pregunta: un campo mas estrecho que el titulo que lleva encima hace
     que el bloque parezca roto (Eduard, 2026-09-26). "De que ano es el edificio?" a 20px ocupa
     unos 300px, asi que el campo va a 360. */
  display: block;
  width: 360px !important;
  max-width: 100% !important;
  height: 92px;
  padding: 0 !important;
  margin: 0 auto;
  font: inherit;
  font-size: 42px !important;
  font-weight: 500;
  line-height: 92px !important;
  letter-spacing: 0.04em;
  text-align: center !important;
  color: var(--gcc-azul-hondo) !important;
  background: #f5fafe !important;
  border: 2px solid var(--gcc-azul-borde) !important;
  border-radius: 16px;
  box-shadow: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
/* El texto de ejemplo, del MISMO tamano que el numero que se escribira encima: si es mas
   pequeno, el campo da la sensacion de estar apagado y el salto al escribir es feo. */
.gcc .gcc-anyo::placeholder { color: #a8c5de; font-weight: 500; font-size: 42px; line-height: 92px; opacity: 1; }
.gcc .gcc-anyo::-webkit-outer-spin-button,
.gcc .gcc-anyo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gcc .gcc-anyo:hover { border-color: var(--gcc-azul) !important; }
.gcc .gcc-anyo:focus,
.gcc .gcc-anyo:focus-visible {
  outline: none;
  background: #fff !important;
  border-color: var(--gcc-azul) !important;
  box-shadow: 0 0 0 4px rgba(50, 148, 231, 0.16);
}
.gcc .gcc-anyo:focus-visible { outline: 2px solid var(--gcc-azul); outline-offset: 1px; border-color: var(--gcc-azul); }

/* --- opciones --- */
.gcc .gcc-ops { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.gcc .gcc-op { position: relative; margin: 0; }
/* El radio de verdad sigue ahi, encima de su etiqueta pero invisible: asi funciona el teclado y
   los lectores de pantalla. Lo unico que se cambia es como se ve. */
.gcc .gcc-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gcc .gcc-op span {
  display: block; padding: 13px 19px; min-height: 22px;
  font-size: 14.5px; line-height: 1.2; color: var(--gcc-texto);
  background: #fff; border: 1px solid var(--gcc-linea); border-radius: 999px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.gcc .gcc-op input:hover + span { border-color: var(--gcc-azul-borde); }
.gcc .gcc-op input:checked + span {
  background: var(--gcc-azul-claro); border-color: var(--gcc-azul);
  color: var(--gcc-azul-hondo); font-weight: 500;
}
.gcc .gcc-op input:focus-visible + span { outline: 2px solid var(--gcc-azul); outline-offset: 2px; }

/* --- metros --- */
.gcc .gcc-m2 { margin: 0 0 18px; font-size: 25px; font-weight: 500; color: var(--gcc-texto); }
.gcc .gcc-m2-n { color: var(--gcc-azul); }
.gcc .gcc-rango {
  display: block; width: 100%; max-width: 380px;
  margin: 0 auto; padding: 0; height: 22px;
  accent-color: var(--gcc-azul); cursor: pointer;
}
.gcc .gcc-rango:focus-visible { outline: 2px solid var(--gcc-azul); outline-offset: 4px; }
.gcc .gcc-extremos { display: flex; justify-content: space-between; max-width: 380px; margin: 8px auto 0; font-size: 12px; color: var(--gcc-suave); }

/* --- botones de navegar --- */
.gcc .gcc-botonera {
  /* Sin linea divisoria: con tan poco contenido en un paso, abria un hueco muerto en medio de la
     tarjeta. El boton es el centro de gravedad, asi que va centrado, y Atras se queda a su lado
     como texto, sin pelearle el sitio. */
  position: relative;
  display: flex; justify-content: center; align-items: center;
  margin-top: 36px;
}
.gcc .gcc-atras { position: absolute; left: 0; }
.gcc .gcc-atras[hidden] { display: none; }
.gcc .gcc-atras, .gcc .gcc-seguir { font: inherit; cursor: pointer; border-radius: 999px; transition: opacity 0.15s, background 0.15s; }
.gcc .gcc-atras { padding: 14px 14px; font-size: 14.5px; color: var(--gcc-suave); background: none; border: 0; }
.gcc .gcc-atras:disabled { opacity: 0.32; cursor: default; }
.gcc .gcc-seguir { padding: 13px 32px; font-size: 15px; font-weight: 500; color: #fff; background: var(--gcc-azul); border: 0; }
.gcc .gcc-seguir:hover { background: #2a82cd; }
.gcc .gcc-atras:focus-visible, .gcc .gcc-seguir:focus-visible { outline: 2px solid var(--gcc-azul); outline-offset: 2px; }

/* --- el resultado --- */
.gcc .gcc-res { margin-top: 30px; text-align: center; }
/* Mientras quedan pasos, el resultado no se ensena. Se atenua pero NO se saca del arbol, para que
   el aria-live siga anunciando el cambio cuando llegue.
   Lleva las dos clases en el selector a proposito: la regla del panel de mas abajo (.gcc .gcc-res, con
   su margen de 24px y su relleno de 38/34px) pesa lo mismo que .gcc .gcc-res-esperando y va despues, asi
   que ganaba: el panel escondido seguia ocupando 96px de blanco entre la tarjeta y la seccion siguiente
   (medido 2026-09-26). Con las dos clases, esta regla pesa mas y el panel escondido mide cero. */
.gcc .gcc-res.gcc-res-esperando {
  opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0;
  overflow: hidden; pointer-events: none;
  transition: opacity 0.3s, max-height 0.35s, margin 0.3s, padding 0.3s;
}


.gcc .gcc-cifra {
  margin: 0 0 3px; font-weight: 500; line-height: 1.1;
  color: var(--gcc-azul-hondo); font-variant-numeric: tabular-nums;
}

.gcc .gcc-sin-cifra { max-width: 44ch; margin: 0 auto; font-size: 14.5px; line-height: 1.55; color: var(--gcc-azul-hondo); }


.gcc .gcc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin: 26px 0 0; padding: 15px 30px;
  font-size: 15.5px; font-weight: 500; color: #fff; text-decoration: none;
  background: var(--gcc-naranja); border-radius: 999px; transition: background 0.15s;
}
.gcc .gcc-btn:hover, .gcc .gcc-btn:focus { color: #fff; background: #e8600f; }
.gcc .gcc-btn-icono { flex: none; }
.gcc .gcc-btn:focus-visible { outline: 2px solid var(--gcc-azul-hondo); outline-offset: 2px; }
.gcc .gcc-nota-wa { margin: 8px auto 0; max-width: 42ch; font-size: 12.5px; line-height: 1.5; color: var(--gcc-suave); }
.gcc .gcc-otra { color: var(--gcc-suave); text-decoration: underline; }

/* el cierre: aqui es donde se dice de que depende el precio de verdad */
.gcc .gcc-legal { max-width: 46ch; margin: 12px auto 0; font-size: 11.5px; line-height: 1.5; color: #8a939c; }

@media (max-width: 600px) {
  section.gcc { padding: 54px 16px 60px; }
  .gcc .gcc-claim { max-width: 20ch; }
  .gcc .gcc-seguir { padding: 12px 24px; }
  .gcc .gcc-anyo {
    width: 100% !important; max-width: 300px !important;
    height: 82px; font-size: 38px !important; line-height: 82px !important;
  }
  .gcc .gcc-anyo::placeholder { font-size: 38px; line-height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .gcc .gcc-barra span, .gcc .gcc-res-esperando, .gcc .gcc-op span, .gcc .gcc-btn, .gcc .gcc-seguir { transition: none; }
}


/* --- EL PANEL DEL RESULTADO ---
   Calcado a reformas-castelldefels: rotulo, cifra, el aviso si el ano lo dispara, el boton, la
   nota de quien contesta, las otras puertas y la letra legal. Y se acaba ahi: nada de parrafos
   debajo (Eduard, 2026-09-26). */
.gcc .gcc-res {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 38px 40px 34px;
  background: var(--gcc-azul-claro);
  border-radius: 16px;
  text-align: center;
}
.gcc .gcc-res-rotulo {
  margin: 0 0 14px;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.09em; line-height: 1.5;
  color: var(--gcc-azul-hondo); text-transform: uppercase;
}
.gcc .gcc-cifra {
  margin: 0;
  font-size: clamp(29px, 5vw, 43px); font-weight: 500; line-height: 1.12;
  color: var(--gcc-azul-hondo); font-variant-numeric: tabular-nums;
}
.gcc .gcc-sin-cifra { max-width: 44ch; margin: 0 auto; font-size: 14.5px; line-height: 1.55; color: var(--gcc-azul-hondo); }

/* el aviso: caja blanca con la banda de color a la izquierda, como en Castelldefels */
.gcc .gcc-ite {
  margin: 24px 0 0; padding: 15px 18px; text-align: center;
  background: #fff; border-left: 4px solid #9c2f2f; border-radius: 0 10px 10px 0;
}
.gcc .gcc-ite-titulo { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: #9c2f2f; }
.gcc .gcc-ite-texto { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gcc-suave); }

.gcc .gcc-quien {
  max-width: 44ch; margin: 16px auto 0;
  font-size: 13.5px; line-height: 1.6; color: var(--gcc-azul-hondo);
}
.gcc .gcc-otras { margin: 9px auto 0; font-size: 13px; line-height: 1.6; color: var(--gcc-suave); }
.gcc .gcc-otras a { color: var(--gcc-suave); text-decoration: underline; }
.gcc .gcc-otras span { margin: 0 7px; opacity: 0.5; }

/* la vara de la cifra: a que tamano se refiere el precio. Debajo del numero y en voz baja, porque
   informa pero no es el protagonista. Con las dos clases en el selector para que gane al tema. */
.gcc .gcc-medida {
  max-width: 42ch; margin: 10px auto 0;
  font-size: 13px; line-height: 1.55; color: var(--gcc-suave);
}

/* --- EL CAMBIO DE PASO ---
   Sin esto la pantalla parpadea: un paso desaparece y otro salta en su sitio. Con un fundido corto
   y un desplazamiento pequeno, en el sentido del que viene, se entiende que es el mismo formulario
   que avanza. 220 ms: se nota, no se espera. */
@keyframes gcc-entra      { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes gcc-entra-atras{ from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.gcc .gcc-entra       { animation: gcc-entra 0.22s ease-out both; }
.gcc .gcc-entra-atras { animation: gcc-entra-atras 0.22s ease-out both; }

/* --- EL FOCO DEL TECLADO NO ES LO MISMO QUE LO ELEGIDO ---
   Antes los dos se veian parecidos y, navegando con el teclado, parecia haber dos opciones
   marcadas. Lo elegido se rellena de color; el foco solo se rodea, y por fuera. */
.gcc .gcc-op input:focus-visible + span {
  outline: 2px solid var(--gcc-azul-hondo);
  outline-offset: 3px;
}

/* --- EL DESLIZADOR ---
   El pulgar de serie es pequeno y gris en algunos navegadores. Aqui es un circulo del azul de la
   marca, con un borde blanco que lo despega de la pista. Y 22px, que es lo que pide un dedo. */
.gcc .gcc-rango { -webkit-appearance: none; appearance: none; background: transparent; }
.gcc .gcc-rango::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(var(--gcc-azul-borde), var(--gcc-azul-borde));
}
.gcc .gcc-rango::-moz-range-track { height: 6px; border-radius: 999px; background: var(--gcc-azul-borde); }
.gcc .gcc-rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  background: var(--gcc-azul); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 69, 111, 0.28);
  transition: transform 0.15s;
}
.gcc .gcc-rango::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--gcc-azul); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(16, 69, 111, 0.28);
}
.gcc .gcc-rango:active::-webkit-slider-thumb { transform: scale(1.12); }

/* --- EL AVISO, INTEGRADO ---
   El granate era el unico color suelto de toda la seccion y cantaba. Se queda en el titular, que
   es donde tiene que avisar, y la caja pasa a ser blanca con su banda: destaca sin gritar. */
.gcc .gcc-ite { box-shadow: 0 1px 3px rgba(16, 69, 111, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .gcc .gcc-entra, .gcc .gcc-entra-atras { animation: none; }
  .gcc .gcc-rango::-webkit-slider-thumb { transition: none; }
}

/* El aviso cuando sale dentro del paso del año: un poco más contenido que el del panel, porque
   ahí compite con el propio campo. */
/* Dentro del paso, la tarjeta ya es blanca: una caja blanca sobre blanco no se ve. Aquí el aviso
   lleva su propio fondo, un rosado muy suave que lo despega sin gritar. En el panel del precio, que
   es azul, el blanco sí funciona y se queda como está. */
.gcc .gcc-ite-paso {
  max-width: 440px;
  margin: 26px auto 0;
  padding: 16px 20px;
  background: #fdf5f3;
  border-left: 4px solid #9c2f2f;
  border-radius: 0 12px 12px 0;
  box-shadow: none;
}

@media (max-width: 600px) {
  .gcc .gcc-tarjeta { padding: 30px 20px 26px; }
  .gcc .gcc-res { padding: 30px 20px 26px; }
}