/* ============================================================================
   Agente Energético — hoja de estilos
   ============================================================================

   QUE CUBRE: exactamente las clases que genera `core/web/plantillas.js`. No hay
   ninguna regla para una clase que no exista, ni ninguna clase del HTML sin estilo:
   hay una verificacion automatica (`web/verificar_css.js`) que comprueba las dos
   cosas en las 26 paginas.

   DECISIONES DE DISENO:

   1. UN SOLO FICHERO, sin dependencias. Se sirve en una peticion y no hay que
      construir nada. Para una web de 26 paginas no hace falta mas.

   2. PALETA: verde profundo como color de marca. Es un sector tecnico-industrial
      (instalaciones, legalizaciones) y el verde transmite energia sin ser un verde
      "ecologico" de ONG. Los grises son frios para que el verde destaque.

   3. CONTRASTE: todo el texto cumple el minimo AA de accesibilidad (4,5:1) sobre su
      fondo. Se ha comprobado el gris secundario con el fondo claro, que es donde es
      facil fallar.

   4. TIPOGRAFIA: escala fluida con `clamp()`. Se lee bien en movil y en pantalla
      grande sin escribir media queries para el tamano del texto.

   5. SIN `!important` y sin `float`. La especificidad se mantiene baja a proposito,
      para que se pueda ajustar sin pelearse con la hoja.
   ============================================================================ */

/* --- Variables ------------------------------------------------------------ */
:root {
  /* Marca */
  --verde-900: #0b3d2c;
  --verde-800: #12583f;
  --verde-700: #176b4d;
  --verde-600: #1e8a63;
  --verde-100: #e3f3ec;
  --verde-50: #f2faf6;

  /* Acento para llamadas a la accion */
  --acento: #d97706;
  --acento-oscuro: #b45309;

  /* Grises frios: el verde destaca mas sobre ellos */
  --tinta: #14211c;
  --tinta-suave: #4a5a54;   /* 4,9:1 sobre --fondo. Cumple AA */
  --borde: #d9e2dd;
  --fondo: #ffffff;
  --fondo-alt: #f7faf8;

  /* Sistema */
  --radio: 10px;
  --radio-grande: 16px;
  --sombra: 0 1px 3px rgb(20 33 28 / 8%), 0 4px 12px rgb(20 33 28 / 4%);
  --sombra-alta: 0 4px 8px rgb(20 33 28 / 10%), 0 12px 28px rgb(20 33 28 / 8%);
  --ancho: 68rem;
  --transicion: 160ms ease;
}

/* --- Base ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* El desplazamiento suave hace que el enlace "saltar al contenido" no maree */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  /* Evita el salto horizontal si algo se sale, sin cortar el foco visible */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--verde-900);
  /* `text-wrap: balance` reparte las lineas del titulo. Donde no existe, no pasa nada */
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.6rem); margin: 0 0 0.6em; }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem); margin: 2em 0 0.6em; }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); margin: 1.6em 0 0.4em; }
h4 { font-size: 1.05rem; margin: 1.4em 0 0.3em; }

p { margin: 0 0 1em; max-width: 72ch; }

a {
  color: var(--verde-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--verde-900); }

/* Foco visible SIEMPRE. Quitarlo es un problema de accesibilidad real: quien navega
   con teclado no sabe donde esta. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

/* --- Enlace de salto: oculto hasta que recibe el foco --------------------- */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--verde-800);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 0 0 var(--radio) 0;
}
.saltar:focus {
  left: 0;
  color: #fff;
}

/* --- Cabecera ------------------------------------------------------------- */
header {
  border-bottom: 1px solid var(--borde);
  background: var(--fondo);
  padding: 1rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
}

.marca {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.marca a {
  color: var(--verde-900);
  text-decoration: none;
}

header nav { flex: 1 1 auto; }
header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
}
header nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.94rem;
  padding: 0.3em 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
header nav a:hover {
  color: var(--verde-800);
  border-bottom-color: var(--verde-600);
}

.idiomas {
  margin: 0;
  display: flex;
  gap: 0.8rem;
  font-size: 0.9rem;
}
.idiomas a {
  color: var(--tinta-suave);
  text-decoration: none;
}
.idiomas a:hover { color: var(--verde-800); text-decoration: underline; }

/* --- Contenido ------------------------------------------------------------ */
main {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) 3rem;
}

.entradilla {
  font-size: 1.15em;
  color: var(--tinta-suave);
  max-width: 62ch;
  margin-bottom: 1.8em;
}

/* Los textos heredados traen listas y titulos; se separan para que respiren */
main > h2:first-child,
main > h1 + h2 { margin-top: 0.8em; }

/* --- Servicios ------------------------------------------------------------ */
.servicios { margin-top: 2.5rem; }

.lista-servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  /* `auto-fit` con `minmax` da columnas sin media queries: una en movil, las que
     quepan en pantalla grande. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.servicio {
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 1.4rem;
  background: var(--fondo);
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transicion), border-color var(--transicion),
              transform var(--transicion);
}
.servicio:hover {
  border-color: var(--verde-600);
  box-shadow: var(--sombra-alta);
  transform: translateY(-2px);
}
.servicio h3 {
  margin-top: 0;
  color: var(--verde-800);
}
.servicio > p { font-size: 0.95rem; }

.precio {
  margin: auto 0 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  font-size: 1.5rem;
  color: var(--verde-800);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.precio .etiqueta {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  font-weight: 600;
}
.precio strong { font-size: 1.6rem; }
.precio small {
  font-size: 0.78rem;
  color: var(--tinta-suave);
  flex-basis: 100%;
  line-height: 1.4;
}

.plazo {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: 0 0 0.8rem;
}

/* --- Llamada a la accion -------------------------------------------------- */
.cta {
  display: inline-block;
  background: var(--verde-700);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.65em 1.2em;
  border-radius: var(--radio);
  transition: background var(--transicion);
}
.cta:hover {
  background: var(--verde-800);
  color: #fff;
}

/* --- Preguntas frecuentes ------------------------------------------------- */
/* Se renderizan como <h3> + <p> reales, no como <div>. Es lo que permite que un
   lector de pantalla las anuncie y que Google genere los desplegables. */
.faq { margin-top: 3rem; }

.faq-item {
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde-600);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.8rem;
  background: var(--fondo-alt);
}
.faq-item h3 {
  margin: 0 0 0.4em;
  font-size: 1.05rem;
  color: var(--verde-800);
}
.faq-item p { margin: 0; font-size: 0.95rem; }

/* --- Blog ----------------------------------------------------------------- */
.articulos {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.2rem;
}
.articulos li {
  border-bottom: 1px solid var(--borde);
  padding-bottom: 1.2rem;
}
.articulos h2 {
  margin: 0 0 0.3em;
  font-size: 1.25rem;
}
.articulos .fecha {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: 0 0 0.5em;
}

/* --- Un articulo del blog -------------------------------------------------- */
/* El cuerpo del articulo SE LEE: se limita la anchura de linea a ~70 caracteres, que es
   lo que hace legible un texto largo. Sin esto, en pantalla ancha la linea se estira y
   cuesta seguirla. */
.articulo {
  max-width: 70ch;
}
.articulo h2 {
  margin: 2em 0 0.5em;
  font-size: 1.4rem;
}
.articulo h3 {
  margin: 1.6em 0 0.4em;
  font-size: 1.15rem;
}
.articulo p {
  margin: 0 0 1em;
}
.articulo .fecha {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: 0 0 1.8em;
}

/* Enlace de vuelta. Se usa en el articulo y en el panel, asi que va con su propio estilo:
   nunca como un enlace de texto normal, para que se reconozca como navegacion. */
.volver {
  display: inline-block;
  margin: 0.5em 0 1.5em;
  color: var(--verde-700);
  font-size: 0.9rem;
  text-decoration: none;
}
.volver:hover {
  text-decoration: underline;
}

/* --- Formulario de captacion ------------------------------------------------- */
/* Es el UNICO sitio de la web donde el visitante escribe: se cuida el tamano de los
   campos, porque en movil se rellenan con el pulgar. */
.bloque-captacion {
  margin: 3rem 0 0;
}
.captacion {
  max-width: 44rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: clamp(1.2rem, 4vw, 2rem);
}
.captacion h2 {
  margin: 0 0 0.4em;
  font-size: 1.5rem;
}
.captacion .intro {
  color: var(--tinta-suave);
  margin: 0 0 1.6rem;
}
.campo {
  margin: 0 0 1.1rem;
}
.campo label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35em;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.65em 0.75em;
  border: 1px solid var(--borde);
  border-radius: 5px;
  font: inherit;
  font-size: 1rem;
  background: var(--fondo);
  color: var(--tinta);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--verde-600);
  outline-offset: 1px;
  border-color: var(--verde-600);
}
.campo textarea {
  min-height: 5em;
  resize: vertical;
}
.obligatorio {
  color: var(--acento-oscuro);
}
.error {
  color: #a4232a;
  font-size: 0.87rem;
  margin: 0.3em 0 0;
}
.privacidad {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin: 1.2rem 0;
}
.privacidad a {
  color: var(--verde-700);
}

/* ---------------------------------------------------------------------------
   CASILLA DE CONSENTIMIENTO PARA COMUNICACIONES (recordatorios de renovacion)

   Va DESPUES del boton de enviar. Se le da aire propio y un borde suave a la
   izquierda para que se lea como «una cosa mas que puedes pedir» y no como un
   obstaculo antes de enviar el formulario.

   Y se marca visualmente que es OPCIONAL: la nota va en gris y mas pequena.
   Si parece obligatoria, el visitante la rellena por inercia o se va, y en
   ninguno de los dos casos el consentimiento vale.
   --------------------------------------------------------------------------- */
.consentimiento {
  margin: 1.4rem 0 0.4rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--verde-200, #cfe3d4);
  background: var(--fondo-suave, #f6f8f6);
  border-radius: 0 4px 4px 0;
}
.consentimiento label {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.92rem;
  line-height: 1.45;
}
.consentimiento input[type="checkbox"] {
  /* El navegador no encoge la casilla en un flex: se fija para que quede alineada
     con la primera linea de texto y no estirada. */
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--verde-600);
}
.consentimiento .nota {
  margin: 0.45rem 0 0 1.65rem; /* alineada con el texto, no con la casilla */
  font-size: 0.78rem;
  color: var(--tinta-suave);
}
.captacion button {
  background: var(--verde-600);
  color: #fff;
  border: 0;
  padding: 0.85em 1.8em;
  border-radius: 5px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.captacion button:hover:not(:disabled) {
  background: var(--verde-700);
}
.captacion button:disabled {
  opacity: 0.65;
  cursor: progress;
}
.confirmacion {
  background: var(--verde-50);
  border-left: 4px solid var(--verde-600);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
}
.confirmacion .ok-titulo {
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.4em;
}
.confirmacion .ok-detalle {
  color: var(--tinta-suave);
  font-size: 0.92rem;
  margin: 0.6em 0 0;
}
.confirmacion strong {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* --- Pie ------------------------------------------------------------------ */
footer {
  border-top: 1px solid var(--borde);
  background: var(--fondo-alt);
  padding: 2.5rem clamp(1rem, 4vw, 2rem) 1.5rem;
  margin-top: 3rem;
  font-size: 0.92rem;
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  max-width: var(--ancho);
  margin-left: auto;
  margin-right: auto;
}
footer h2 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin: 0 0 0.7em;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 0.4em; }
footer a { color: var(--verde-700); }
footer p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-size: 0.85rem;
}

/* --- Impresion ------------------------------------------------------------ */
/* Muchos clientes imprimen las condiciones. Sin esto salen el menu y el pie en
   cada hoja y el contenido queda ilegible. */
@media print {
  header nav, .idiomas, .saltar, .cta, footer { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  main { max-width: none; padding: 0; }
  h1, h2, h3 { color: #000; }
  .servicio, .faq-item { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
  /* Se imprime la direccion del enlace: en papel no se puede pulsar */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --- Preferencias del sistema --------------------------------------------- */
/* Quien ha pedido menos movimiento en su sistema no debe recibir animaciones. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  .servicio:hover { transform: none; }
}

/* Modo oscuro: se respeta si el sistema lo pide. */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8efeb;
    --tinta-suave: #a8b8b1;
    --borde: #2a3d35;
    --fondo: #0f1a16;
    --fondo-alt: #16241e;
    --verde-50: #16241e;
    --verde-100: #1c3529;
  }
  h1, h2, h3, h4 { color: #d5ebe0; }
  .marca a { color: #d5ebe0; }
  .servicio { background: var(--fondo); }
  .precio { color: #9fd9bf; }
  .cta { background: var(--verde-600); }
  .cta:hover { background: var(--verde-700); }
  footer a { color: #9fd9bf; }
}

/* ============================================================================
   TABLAS DE CONTENIDO
   ============================================================================

   HALLAZGO de la Fase 8: el proyecto NO tenia ni un estilo de tabla, porque hasta ahora
   ningun contenido usaba tablas. El conversor de markdown tampoco las entendia, asi que
   una tabla se imprimia con las barras verticales a la vista.

   Una tabla comparativa es lo que se LEE en un articulo que enfrenta cuatro figuras, y es
   lo que Google usa para el fragmento destacado. Sin estilos, en el movil se desborda y no
   hay quien la lea.

   DOS DECISIONES:
     - El envoltorio `.tabla-scroll` deja que la tabla se desplace en horizontal en pantallas
       estrechas, en vez de aplastar las columnas o romper el diseno de la pagina.
     - La primera columna NO se parte: es la que identifica la fila (la figura, el nombre).
*/
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4em;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 34rem;
}

th,
td {
  text-align: left;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--borde, #d8e0dc);
  vertical-align: top;
}

th {
  font-weight: 600;
  border-bottom-width: 2px;
}

th:first-child,
td:first-child {
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  th,
  td {
    border-bottom-color: #2a3f34;
  }
}


/* ==========================================================================
   AVISO DE COOKIES
   ==========================================================================
   Se muestra solo cuando hay identificador de medicion configurado (ver la
   funcion avisoDeCookies en plantillas.js). Sin GA4 no hay nada que consentir
   y no se pinta.

   Va abajo y fijo, sin tapar el contenido: en movil ocupa poco y los botones
   quedan siempre a la vista.
   ========================================================================== */

.aviso-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #0b3d2c;
  color: #ffffff;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.aviso-cookies[hidden] {
  display: none;
}

.aviso-cookies p {
  margin: 0;
  flex: 1 1 20rem;
}

.aviso-cookies a {
  color: #7fd4b8;
  text-decoration: underline;
}

.aviso-cookies-botones {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.aviso-cookies button {
  font: inherit;
  cursor: pointer;
  border-radius: 6px;
  padding: 0.5rem 1.1rem;
  border: 1px solid transparent;
}

.aviso-cookies-si {
  background: #176b4d;
  color: #ffffff;
  border-color: #7fd4b8;
}

.aviso-cookies-si:hover {
  background: #1e8a63;
}

.aviso-cookies-no {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.aviso-cookies-no:hover {
  border-color: #ffffff;
}

@media (max-width: 34rem) {
  .aviso-cookies {
    flex-direction: column;
    align-items: stretch;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
  }

  /* EL FALLO QUE ARREGLA ESTO:
     .aviso-cookies p tiene lex: 1 1 20rem. En una fila, los 20rem son el
     ANCHO, y esta bien: el parrafo ocupa el espacio que sobra. Pero en columna,
     lex-basis pasa a ser la ALTURA: el parrafo se estiraba a 320 px y el aviso
     se comia un tercio de la pantalla del movil, con un hueco verde vacio enorme.
     Aqui se anula ese minimo. */
  .aviso-cookies p {
    flex: 0 1 auto;
    margin: 0 0 0.7rem;
  }

  .aviso-cookies-botones {
    justify-content: flex-end;
  }

  .aviso-cookies button {
    padding: 0.45rem 1rem;
  }
}

/* ============================================================================
   REDISENO DE PORTADA (09/11/2026)
   ============================================================================
   POR QUE:
   La portada salia con todo el contenido como hermanos sueltos: un h1, un
   parrafo, un boton y luego titulos y parrafos. Los servicios y las ventajas
   eran una lista de texto. Se leia bien, pero no se veia nada: sin jerarquia,
   sin profundidad y sin una llamada a la accion al final.

   QUE HACE:
   1. HERO con degradado, sobre el que el titular y la entradilla destacan.
   2. TARJETAS en rejilla automatica (se adapta sola de 1 a 3 columnas).
   3. CIERRE como banda de color con su boton.

   Se usan las variables que ya existian (--verde-700, --sombra, --radio...),
   asi que el modo oscuro sale gratis: las tarjetas usan --fondo y --borde, que
   el bloque de modo oscuro ya redefine.

   MOVIMIENTO: la elevacion de las tarjetas es una transicion corta (180 ms).
   Con `prefers-reduced-motion` se desactiva, que ya se respeta mas arriba en la
   hoja con la misma regla.
   ============================================================================ */

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(1.9rem, 5.5vw, 3.6rem) clamp(1.25rem, 4.5vw, 3rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radio-grande);
  background: linear-gradient(135deg, var(--verde-900) 0%, var(--verde-800) 52%, var(--verde-700) 100%);
  box-shadow: var(--sombra-alta);
}

/* Halo decorativo. Es puro adorno: `pointer-events: none` para que no estorbe
   a los clics, y detras del texto. */
.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -75%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(30 138 99 / 45%) 0%, rgb(30 138 99 / 0%) 68%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  margin: 0;
  color: #ffffff;
  /* El titular va por encima del halo */
  text-wrap: balance;
}

.hero .entradilla {
  position: relative;
  max-width: 44rem;
  margin: 0.85rem 0 0;
  color: rgb(255 255 255 / 90%);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
}

.hero-acciones {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}

.cta-secundario {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--radio);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion);
}

.cta-secundario:hover {
  background-color: rgb(255 255 255 / 12%);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* --- Tarjetas ------------------------------------------------------------- */
.tarjetas {
  display: grid;
  /* `auto-fit` con minimo de 15rem: una columna en movil, tres en pantalla
     grande, sin una sola media query. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 clamp(2rem, 4vw, 2.75rem);
}

.tarjeta {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--fondo);
  box-shadow: var(--sombra);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.tarjeta:hover {
  transform: translateY(-3px);
  border-color: var(--verde-600);
  box-shadow: var(--sombra-alta);
}

.tarjeta h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--verde-800);
}

.tarjeta p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta-suave);
  line-height: 1.55;
}

/* --- Cierre --------------------------------------------------------------- */
.cierre {
  padding: clamp(1.5rem, 4vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-grande);
  background: linear-gradient(120deg, var(--verde-50) 0%, var(--verde-100) 100%);
}

.cierre h2 {
  margin-top: 0;
  color: var(--verde-900);
}

.cierre p {
  margin-bottom: 0;
}

.cierre-acciones {
  margin: 1.35rem 0 0;
}

/* --- El boton principal tambien responde ---------------------------------- */
.cta {
  transition: background-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra);
}

/* --- Sin movimiento si el sistema lo pide --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tarjeta,
  .tarjeta:hover,
  .cta,
  .cta:hover,
  .cta-secundario,
  .cta-secundario:hover {
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   CATALOGO DE PRECIOS — clases que estaban sin estilo
   ============================================================================
   Son de /es/servicios/ y /ca/serveis/. Faltaban desde antes del rediseno de
   portada; se descubrieron al ejecutar verificar_css.js.

   Las dos secciones grandes (.precios-catalogo y .packs) solo necesitan aire y
   una separacion clara: el contenido de dentro ya estaba estilizado
   (.lista-servicios, .servicio, .precio).
   ============================================================================ */

.precios-catalogo,
.packs {
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.precios-catalogo > h2,
.packs > h2 {
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--verde-100);
}

/* Las condiciones son letra pequena: importan, pero no deben competir con el
   precio. Contraste suficiente para leerse (--tinta-suave cumple AA). */
.condiciones {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

/* Lo que incluye un pack: lista con marca propia, mas compacta que el texto
   normal porque va dentro de una tarjeta. */
.incluye {
  padding-left: 1.15rem;
  margin: 0.75rem 0 0;
  font-size: 0.925rem;
  color: var(--tinta-suave);
}

.incluye li {
  margin-bottom: 0.3rem;
}

.incluye li::marker {
  color: var(--verde-600);
}

/* Icono de las tarjetas de la portada. Va en linea (SVG), hereda el color con
   currentColor y se tine con el verde de marca. */
.tarjeta-icono {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--verde-600);
  transition: color var(--transicion);
}

.tarjeta:hover .tarjeta-icono {
  color: var(--verde-700);
}

/* ============================================================================
   ACABADOS (09/11/2026)
   ============================================================================
   1. CABECERA FIJA: al bajar por una pagina larga (el catalogo tiene 19
      servicios) el menu desaparecia. Fija arriba ahorra al visitante volver a
      subir para cambiar de seccion.

   2. TARJETAS EN TRES COLUMNAS en pantalla grande: con rejilla automatica
      salian 4 columnas y la quinta tarjeta quedaba sola en una fila. En tres
      quedan 3 + 2, que se lee mejor.

   3. PIE OSCURO: el pie era una caja gris clara flotando. En verde profundo
      cierra la pagina y hace juego con el hero.
   ============================================================================ */

/* --- 1. Cabecera fija ----------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 0 var(--borde);
}

/* --- 2. Tres columnas en pantalla grande ---------------------------------- */
@media (min-width: 62rem) {
  .tarjetas {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 3. Pie oscuro -------------------------------------------------------- */
footer {
  border-top: none;
  background: var(--verde-900);
  color: rgb(255 255 255 / 84%);
  /* El pie ocupaba el ancho del contenido y quedaba como una caja gris
     centrada. Para que la banda oscura llegue a los bordes, se quita el ancho
     maximo y se mete como relleno lateral. */
  max-width: none;
  padding: clamp(2rem, 4vw, 3rem) max(1rem, calc((100% - var(--ancho)) / 2)) 1.5rem;
}

footer h2 {
  color: #ffffff;
}

footer a {
  color: #8fd9bd;
}

footer a:hover {
  color: #ffffff;
}

/* El parrafo del copyright tenia color --tinta-suave (#4a5a54), que sobre el verde
   profundo del pie da 1,3:1 de contraste: practicamente ilegible. Se aclara a
   blanco al 78 %, que da unos 9:1 y cumple AA de sobra. */
footer p {
  color: rgb(255 255 255 / 78%);
  border-top-color: rgb(255 255 255 / 18%);
}

/* ============================================================================
   BOTON FLOTANTE DE WHATSAPP
   ============================================================================
   Va fijo abajo a la derecha en las 40 paginas. Es el canal que mas usa el
   cliente en movil: no interrumpe y permite mandar una foto de la instalacion.

   z-index 1100: por encima del aviso de cookies (1000). El script del aviso lo
   sube mientras el aviso esta visible para que no tape los botones de aceptar y
   rechazar, y lo baja al cerrarlo.
   ============================================================================ */

.whatsapp-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 25%);
  transition: transform 180ms ease, box-shadow 180ms ease, bottom 200ms ease;
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgb(0 0 0 / 32%);
}

.whatsapp-flotante svg {
  width: 1.9rem;
  height: 1.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-flotante,
  .whatsapp-flotante:hover,
  .whatsapp-flotante:focus-visible {
    transform: none;
    transition: none;
  }
}