/* ============================================================================
   SOLAR Y PUNTO · CIMAGRE, S.L. — estilos.css
   Web estática de instalaciones fotovoltaicas (solarypunto.es)
   Sistema de diseño según brief 09/09/2026. Un único archivo CSS.
   Los ocho colores de la marca viven SOLO aquí, como variables en :root.
   ============================================================================ */

/* ---------- Fuentes locales (descargadas; nunca CDN en producción) --------- */
/* latin-ext primero cubre acentos extendidos; el navegador solo baja lo que usa */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Archivo-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sustitutos métricos: mientras la fuente propia carga, el navegador usa estas.
   Están calibradas midiendo el ancho real del texto, de modo que el cambio de
   fuente solo cambia los glifos y no reparte el texto en otro número de líneas.
   Sin esto, el navegador usaba un sustituto un 18 % más ancho y el hero daba un
   salto de más de 100 px al llegar Archivo/Inter (CLS 0,18 medido en móvil). */
@font-face {
  font-family: 'Archivo-alt';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 89.8%;
  ascent-override: 97.8%;
  descent-override: 23.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter-alt';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 106.7%;
  ascent-override: 90.8%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

/* ------------------------------- Tokens ----------------------------------- */
:root {
  /* Los colores de la marca SOLAR Y PUNTO, según GUIA-DE-MARCA.txt del
     paquete de identidad. Ni uno más (salvo los semánticos de estado). */
  --sy-deep:  #216F2C;   /* verde oscuro: botón principal, bandas, cifras, antetítulos */
  --sy-green: #498420;   /* verde principal: solo logotipo y rellenos de forma */
  --sy-sun:   #98BC21;   /* lima de marca: solo fondo/forma o texto sobre CARBÓN */
  --sy-ink:   #132427;   /* carbón: texto principal, bandas oscuras, pie */
  --sy-bg:    #F6F7F3;   /* fondo general y cabecera */
  --sy-mint:  #E8F2E9;   /* secciones alternas, cuadros de icono, columna destacada */
  --sy-muted: #5A6A63;   /* texto secundario y pies */
  --sy-line:  #DDE5DD;   /* bordes de 1 px y separadores */

  /* ESTADOS Y SEMÁNTICOS fuera de la paleta (permitidos por el brief) */
  --sy-deep-hover: #1A5A23;   /* hover del botón principal */
  --sy-cruz:       #A85B22;   /* cruz «no incluido». Solo en la tabla comparativa */
  --sy-blanco-62:  rgba(255,255,255,.62);
  --sy-blanco-72:  rgba(255,255,255,.72);
  --sy-blanco-78:  rgba(255,255,255,.78);
  --sy-blanco-55:  rgba(255,255,255,.55);
  --sy-blanco-40:  rgba(255,255,255,.4);

  /* Corchete pendiente (dato que aporta Alberto) */
  --ph-bg:    #FFF3CE;
  --ph-borde: #E9CE72;
  --ph-tinta: #6E5405;

  /* Tipografías */
  --f-display: 'Archivo', 'Archivo-alt', 'Helvetica Neue', Arial, sans-serif;
  --f-texto:   'Inter', 'Inter-alt', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Sombras: solo una, la de la ficha del pack */
  --sombra-pack: 0 18px 46px rgba(22,36,28,.07);
  --sombra-wa:   0 6px 20px rgba(22,36,28,.18);

  /* Radios (sección 2.6) */
  --r-tarjeta-g: 22px;   /* tarjetas grandes, ficha del pack */
  --r-tarjeta:   18px;   /* tarjetas normales */
  --r-boton:     12px;   /* botones */
  --r-icono:     12px;   /* cuadrados de icono (11-14) */
  --r-foto:      20px;
}

/* ------------------------------- Reset ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sy-bg);
  color: var(--sy-ink);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
table { border-collapse: collapse; }

/* Foco visible: contorno ámbar 3 px con 2 px de separación */
:focus-visible { outline: 3px solid var(--sy-sun); outline-offset: 2px; border-radius: 4px; }

/* El atributo hidden manda siempre (p. ej. campos condicionales del formulario) */
[hidden] { display: none !important; }

/* Campos que solo aparecen al elegir «Empresa o nave» en el formulario */
.campo-empresa { background: #fff; border: 1px dashed var(--sy-line); border-radius: 12px; padding: 14px 16px; }

/* Accesibilidad: respetar la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------ Rejilla ----------------------------------- */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px)  { .wrap { padding-left: 48px;  padding-right: 48px; } }
@media (min-width: 1024px) { .wrap { padding-left: 48px;  padding-right: 48px; } }
@media (min-width: 1440px) { .wrap { padding-left: 96px;  padding-right: 96px; } }

/* Bandas a sangre: el contenedor interno vuelve a meter el ancho de contenido */
.banda { width: 100%; }
.banda .wrap { max-width: 1440px; }

/* --------------------------- Tipografía base ------------------------------ */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.02;
}
h3 { font-weight: 700; }

.eyebrow {
  font-family: var(--f-texto);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sy-deep);
}
@media (min-width: 768px) { .eyebrow { font-size: 12.5px; } }
.eyebrow--oscuro { color: rgba(255,255,255,.95); }

.lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--sy-muted);
}
@media (min-width: 768px) { .lead { font-size: 19px; } }

/* Corchete pendiente: dato que falta y que aporta Alberto. Nunca se borra,
   nunca se rellena con un valor inventado. */
.ph {
  background: var(--ph-bg);
  border: 1px solid var(--ph-borde);
  border-radius: 5px;
  padding: 0 6px;
  font-weight: 600;
  color: var(--ph-tinta);
  white-space: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.ph--linea {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14.5px;
  background: var(--ph-bg);
  border: 1px dashed var(--ph-borde);
  color: var(--ph-tinta);
}

/* Viñeta ámbar (círculo) */
.punto-sol {
  display: inline-block;
  width: .52em;
  height: .52em;
  border-radius: 50%;
  background: var(--sy-sun);
  vertical-align: .06em;
  flex: none;
}

/* ------------------------------- Botones ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 17px 30px;
  border-radius: var(--r-boton);
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  text-align: center;
}
.btn--peq { padding: 13px 22px; font-size: 15px; }
.btn--lg  { padding: 17px 30px; font-size: 17px; }

/* Principal: sobre fondo claro */
.btn--primario { background: var(--sy-deep); color: #fff; border-color: var(--sy-deep); }
.btn--primario:hover { background: var(--sy-deep-hover); border-color: var(--sy-deep-hover); }

/* Ámbar: la acción principal cuando el fondo es verde oscuro o tinta */
.btn--ambar { background: var(--sy-sun); color: var(--sy-ink); border-color: var(--sy-sun); }
.btn--ambar:hover { background: #E0B20F; border-color: #E0B20F; }

/* Secundario sobre fondo claro */
.btn--secundario { background: transparent; color: var(--sy-ink); border-color: var(--sy-line); }
.btn--secundario:hover { border-color: #C4CFC6; background: rgba(22,36,28,.03); }

/* Secundario sobre fondo oscuro */
.btn--secundario-oscuro { background: transparent; color: #fff; border-color: var(--sy-blanco-40); }
.btn--secundario-oscuro:hover { border-color: rgba(255,255,255,.75); }

/* Blanco: sobre verde oscuro cuando el ámbar ya se usa cerca */
.btn--blanco { background: #fff; color: var(--sy-ink); border-color: #fff; }
.btn--blanco:hover { background: #EAF0EA; border-color: #EAF0EA; }

/* ------------------------------- Cabecera --------------------------------- */
/* Nota de construcción: el logotipo real (sin claim) tiene una proporción muy
   ancha (1470×170 ≈ 8,6:1): a 44 px de alto ocupa ~380 px. Por eso el menú
   completo se muestra desde 1280 px (antes, hamburguesa) y el teléfono con
   número desde 1536 px (antes, icono de teléfono). El resultado a 1440 px es
   equivalente al de la maqueta: logotipo + menú + botón, sin desbordes. */
.cab {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sy-bg);
  border-bottom: 1px solid var(--sy-line);
}
.cab__interior {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 1280px) { .cab__interior { height: 100px; } }

.cab__logo { display: flex; align-items: center; flex: none; }
/* Logotipo horizontal de SOLAR Y PUNTO (imagen 769x186 ~ 4,14:1). Es el PNG
   del arte aprobado: los SVG del kit son un CALCO del original y a estos
   tamaños sacan las letras irregulares, por eso la cabecera usa el PNG.
   En 360 px cabe junto al boton de menú; se mantiene el horizontal —nunca el
   isotipo ni deformado— porque es el que da lectura a la marca.
   Tamaños: 40 px (movil estrecho), 46 px, 56 px y 72 px (escritorio).
   Subidos un 16% el 17-09-2026 a peticion de Alberto ("un pelin mas grande").
   El ALTO manda y el ancho se calcula solo (width: auto + aspect-ratio), asi
   que la imagen nunca se deforma.
   Toda la barra no cambia: 76 px de alto en movil y 100 px en escritorio.
   El logotipo vectorial oficial (logo-horizontal-principal.svg) sigue en el
   proyecto y se usa en los datos estructurados. */
.cab__logo img { height: 40px; width: auto; aspect-ratio: 769 / 186; display: block; }
@media (min-width: 380px) { .cab__logo img { height: 46px; } }
@media (min-width: 768px) { .cab__logo img { height: 56px; } }
@media (min-width: 1280px) { .cab__logo img { height: 72px; } }

.cab__nav {
  display: none;
  position: absolute;
  top: 76px;
  left: 0;
  right: 0;
  background: var(--sy-bg);
  border-bottom: 1px solid var(--sy-line);
  padding: 10px 24px 18px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 30px rgba(22,36,28,.06);
}
.cab__nav.abierto { display: flex; }
.cab__nav a {
  font-weight: 500;
  font-size: 16px;
  color: var(--sy-ink);
  padding: 11px 4px;
  border-bottom: 3px solid transparent;
  display: block;
}
.cab__nav a.activo { font-weight: 700; border-bottom-color: var(--sy-sun); }
.cab__nav a:hover { color: var(--sy-deep); }
@media (min-width: 1280px) {
  .cab__nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 1.6vw, 30px);
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  .cab__nav a { font-size: 15px; padding: 5px 0; }
}
@media (min-width: 1536px) { .cab__nav { gap: 30px; } }

.cab__acciones { display: flex; align-items: center; gap: 10px; flex: none; }
.cab__tel {
  display: none;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 16px;
  color: var(--sy-ink);
}
.cab__tel svg { color: var(--sy-deep); }
.cab__tel:hover { color: var(--sy-deep); }
@media (min-width: 1536px) { .cab__tel { display: inline-flex; } }
.cab__tel--movil {
  display: none;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--sy-line);
  border-radius: var(--r-boton);
  align-items: center;
  justify-content: center;
  color: var(--sy-deep);
}
/* Entre 768 y 1535 px la cabecera va con menú completo y se mantiene el icono
   de teléfono (el número con texto aparece desde 1536 px). En móvil (<768) el
   icono sobra: la barra inferior fija ya tiene el botón «Llamar». */
@media (min-width: 768px) { .cab__tel--movil { display: inline-flex; } }
@media (min-width: 1536px) { .cab__tel--movil { display: none; } }

.cab__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--sy-line);
  border-radius: var(--r-boton);
  background: #fff;
  padding: 0 10px;
}
.cab__burger span { height: 2px; background: var(--sy-ink); border-radius: 2px; display: block; transition: transform .18s, opacity .18s; }
.cab__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1280px) { .cab__burger { display: none; } }
.cab .btn { display: none; }
@media (min-width: 1280px) { .cab .btn { display: inline-flex; } }

/* ------------------------------ Hero home ---------------------------------- */
/* Aire del primer bloque. Se rebajó a propósito (11-09-2026): con 14vh arriba
   quedaba un hueco muy grande entre la cabecera y el titular de la izquierda.
   Ahora el bloque arranca pegado a la cabecera y el aire se reserva abajo. */
.hero-home { padding: 30px 0 46px; }
@media (min-width: 768px) { .hero-home { padding: clamp(36px, 4.2vh, 60px) 0 clamp(40px, 5vh, 72px); } }
.hero-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-home__grid { grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: start; }
}
.hero-home h1 {
  font-size: clamp(40px, 2.857vw + 28.86px, 70px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 18px;
  font-weight: 800;
}
.hero-home .accento-precio { color: var(--sy-deep); white-space: nowrap; }
.hero-home__lead { margin-top: 20px; max-width: 33ch; }
.hero-home__botones { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 28px; }
.hero-home__micro {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 8px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--sy-muted);
  align-items: center;
}
.hero-home__micro span { display: inline-flex; align-items: center; gap: 7px; }
.hero-home__micro svg { color: var(--sy-muted); flex: none; }
@media (min-width: 1024px) { .hero-home__micro { font-size: 14.5px; margin-top: 26px; } }

/* ---------------------------------------------------------------------------
   Portada con foto a sangre (estilo Jarama Solar, adaptado a la marca).
   La foto va en /img/portada-tejado.jpg (o .webp). Mientras no exista, el
   hero muestra la banda verde con el símbolo de marca en marca de agua y el
   titular en blanco/ámbar: la web no depende de ninguna foto de banco.
   [foto real de una instalación propia] — dato pendiente de Alberto.
--------------------------------------------------------------------------- */
.hero-home { position: relative; display: flex; align-items: center; }
.hero-home__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--sy-ink);
  z-index: 0;
}
.hero-home__media::before {
  /* Símbolo de marca en marca de agua mientras no haya foto */
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/isotipo.svg') no-repeat 82% 50% / auto 70%;
  opacity: .07;
}
.hero-home__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-home__media::after {
  /* Velo para que el titular se lea encima de cualquier foto */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22,36,28,.55);
}
.hero-home .wrap { position: relative; z-index: 1; }

/* Texto del hero en modo oscuro (foto o banda verde).
   OJO: solo afecta al texto del hero, nunca a la tarjeta blanca del pack
   (por eso se marcan los elementos con clases propias y no con descendencia). */
.hero-home { background-color: var(--sy-ink); } /* fondo declarado: contraste verificable */
.hero-home h1 { color: #fff; }
.hero-home .accento-precio { color: var(--sy-sun); }
.hero-home .lead { color: rgba(255,255,255,.85); }
.hero-home__micro { color: rgba(255,255,255,.82); }
.hero-home__micro svg { color: var(--sy-sun); }
.hero-home .eyebrow--oscuro { color: rgba(255,255,255,.95); }

/* Ficha del pack (HTML, nunca una imagen) */
.ficha-pack {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: var(--r-tarjeta-g);
  padding: 24px 22px;
  box-shadow: var(--sombra-pack);
}
@media (min-width: 768px) { .ficha-pack { padding: 26px 30px; } }
.ficha-pack__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ficha-pack__etiqueta {
  background: var(--sy-sun);
  color: var(--sy-ink);
  font-weight: 800;
  font-size: 11.5px;
  padding: 6px 11px;
  border-radius: 8px;
  letter-spacing: .04em;
  white-space: nowrap;
  flex: none;
}
.ficha-pack__precio {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(38px, 3.4vw, 46px);
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 10px;
}
.ficha-pack__bajo-precio { font-size: 14px; color: var(--sy-muted); margin-top: 6px; }
.ficha-pack__lista { margin-top: 14px; }
.ficha-pack__fila {
  display: flex;
  gap: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--sy-line);
  align-items: flex-start;
}
.ficha-pack__check { color: var(--sy-deep); font-weight: 800; font-size: 17px; line-height: 1.3; flex: none; }
.ficha-pack__titulo-fila { font-weight: 700; font-size: 15.5px; }
.ficha-pack__detalle-fila { font-size: 13.5px; color: var(--sy-muted); margin-top: 2px; }
.ficha-pack__accion { margin-top: 20px; }

/* Bloque del pack en la página de precios. La maqueta aprobada tenía tres
   tarjetas en fila (3, 5 y 8 kWp) dentro de #seccion-packs. Mientras los packs
   de 3 y 8 kWp no tengan precio solo se publica la de 5 kWp y, centrada y sola,
   dejaba un hueco vacío a la izquierda y parecía desplazada a la derecha. Ahora
   va en dos columnas: la tarjeta a la izquierda, alineada con el titular como el
   resto de la página, y la nota de qué puede cambiar el precio a su lado. */
.precios-pack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px 44px;
  align-items: start;
}
@media (min-width: 1024px) {
  .precios-pack { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: center; }
}
/* La nota ya no va debajo de la tarjeta: fuera el margen superior de .calc-pie */
.precios-pack .calc-pie { margin-top: 0; }
.precios-pack__nota { max-width: 60ch; }

/* -------------------------- Banda de confianza ----------------------------- */
.banda-confianza { background: var(--sy-deep); }
.banda-confianza__grid {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 768px) {
  .banda-confianza__grid { grid-template-columns: 1fr 1fr; gap: 26px 34px; }
}
@media (min-width: 1024px) { .banda-confianza__grid { grid-template-columns: repeat(4, 1fr); padding: 26px 0; } }
.banda-confianza__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}
.banda-confianza__titulo .punto-sol { font-size: 16px; }
.banda-confianza__detalle {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  margin-top: 5px;
  line-height: 1.45;
}
@media (min-width: 1024px) {
  .banda-confianza__titulo { font-size: 16px; }
  .banda-confianza__detalle { font-size: 13.5px; padding-left: 26px; }
}

/* ------------------- Sección «¿Quién sube a tu tejado?» -------------------- */
.quien-sube { background: var(--sy-ink); }
.quien-sube__interior { padding: 34px 0; }
@media (min-width: 768px) { .quien-sube__interior { padding: 78px 0; } }
.quien-sube__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}
@media (min-width: 1024px) { .quien-sube__grid { grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: start; } }
.quien-sube h2 {
  font-size: clamp(32px, 3vw + 4px, 50px);
  color: #fff;
  margin-top: 16px;
}
.quien-sube__texto { color: var(--sy-blanco-78); font-size: 17px; line-height: 1.6; margin-top: 18px; max-width: 46ch; }
.quien-sube__datos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 24px;
}
.quien-sube__dato {
  background: rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 18px;
}
@media (min-width: 768px) { .quien-sube__dato { padding: 18px 20px; } }
.quien-sube__cifra {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--sy-sun);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.quien-sube__def { font-size: 13.5px; color: rgba(255,255,255,.85); margin-top: 6px; line-height: 1.45; }
@media (min-width: 1024px) { .quien-sube__def { font-size: 14px; } }
.quien-sube__accion { margin-top: 26px; }

/* Hueco reservado para la foto real del equipo (nunca banco de imágenes) */
.foto-ph {
  background: rgba(255,255,255,.07);
  border: 1px dashed rgba(255,255,255,.32);
  border-radius: var(--r-foto);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.9);
  font-size: 15px;
  text-align: center;
  padding: 24px;
}
@media (min-width: 768px) { .foto-ph { min-height: 330px; } }
/* El color del texto del hueco lo fija el contenedor: oscuro sobre la banda
   verde, gris sobre la versión clara de las páginas de contenido. */
.foto-ph small { font-size: 13px; }
.foto-ph img, .foto-ph picture { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-foto); }

/* Foto real ya colocada (cuando Alberto aporte las fotos) */
.foto-real { border: 0; padding: 0; background: transparent; display: block; }
.foto-real img { width: 100%; object-fit: cover; border-radius: var(--r-foto); }

/* Sin foto todavía: ya no se usa (los datos ocupan esa columna desde el
   11-09-2026), pero se deja por si algún día vuelve el hueco de la foto. */
.quien-sube__grid--sin-foto { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .quien-sube__grid--sin-foto > div:last-child { max-width: 62ch; }
}

/* ---------------------------------------------------------------------------
   DATOS DE CONFIANZA DENTRO DEL HERO (acoplados desde la banda verde).
   Cuatro datos cortos en dos columnas, con una línea de separación arriba.
--------------------------------------------------------------------------- */
.hero-home__confianza {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.22);
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 26px;
  list-style: none;
}
@media (min-width: 560px) { .hero-home__confianza { grid-template-columns: 1fr 1fr; } }
.hero-home__confianza li { font-size: 13.5px; line-height: 1.4; }
.hero-home__confianza strong {
  display: flex;
  align-items: center;
  gap: .55em;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.hero-home__confianza .punto-sol { font-size: 14px; }
.hero-home__confianza span { color: rgba(255,255,255,.74); }

/* --------------------------- Hero interior -------------------------------- */
.hero-int { padding: 34px 0 34px; border-bottom: 1px solid var(--sy-line); background: var(--sy-bg); }
@media (min-width: 768px) { .hero-int { padding: 60px 0 52px; } }
.hero-int h1 {
  font-size: clamp(36px, 1.905vw + 28.57px, 56px);
  margin-top: 16px;
  max-width: 24ch;
}
.hero-int .accento-precio { color: var(--sy-deep); white-space: nowrap; }
.hero-int__lead { margin-top: 18px; max-width: 64ch; }
.hero-int__botones { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 26px; }
.pastillas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pastilla { max-width: 100%; overflow-wrap: anywhere; }
.pastilla {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sy-ink);
}
@media (min-width: 768px) { .pastilla { padding: 9px 17px; font-size: 14px; } }

/* --------------------------- Secciones base -------------------------------- */
.seccion { padding: 34px 0; }
@media (min-width: 768px) { .seccion { padding: 72px 0; } }
.seccion--mint { background: var(--sy-mint); }
.seccion--tinta { background: var(--sy-ink); }
.seccion--sin-pad-top { padding-top: 0; }

.h2-seccion {
  font-size: clamp(30px, 2.6vw + 6px, 46px);
  margin-top: 14px;
  max-width: 22ch;
}
.h2-bloque { font-size: clamp(30px, 2.4vw + 6px, 42px); }
.enunciado-seccion { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.enunciado-seccion__nota { font-size: 15px; color: var(--sy-muted); max-width: 36ch; text-align: left; }
@media (min-width: 1024px) { .enunciado-seccion__nota { text-align: right; } }

/* ------------------------------- Calculadora ------------------------------- */
.calculadora { background: var(--sy-mint); }
.calculadora__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 28px;
  align-items: start;
}
@media (min-width: 1024px) {
  .calculadora__grid { grid-template-columns: 1fr 1fr 1fr .95fr; gap: 34px; margin-top: 38px; }
}
.calc-pregunta__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
}
.calc-pregunta__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sy-sun);
  color: var(--sy-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex: none;
}
.calc-pregunta__opciones { margin-top: 12px; }
.opcion-calc {
  display: inline-block;
  border: 1.5px solid var(--sy-line);
  background: #fff;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  margin: 0 7px 7px 0;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.opcion-calc:hover { border-color: var(--sy-deep); }
.opcion-calc.seleccionada {
  background: var(--sy-deep);
  border-color: var(--sy-deep);
  color: #fff;
  font-weight: 600;
}
.opcion-calc[aria-disabled="true"] { opacity: .55; cursor: default; }
.opcion-calc[aria-disabled="true"]:hover { border-color: var(--sy-line); }
.calc-resultado {
  background: var(--sy-ink);
  border-radius: var(--r-tarjeta-g);
  padding: 26px 26px;
  color: #fff;
}
@media (min-width: 768px) { .calc-resultado { padding: 28px 30px; } }
.calc-resultado__etiqueta {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}
.calc-resultado__cifra {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 3vw, 40px);
  color: var(--sy-sun);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: 12px;
}
.calc-resultado__unidad { font-size: 18px; color: rgba(255,255,255,.85); font-weight: 400; }
.calc-resultado__nota { font-size: 14px; color: rgba(255,255,255,.88); margin-top: 4px; }
.calc-resultado__cifra--blanca { color: #fff; margin-top: 16px; }
.calc-resultado__accion { margin-top: 20px; }
.calc-resultado__aviso { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 16px; line-height: 1.5; }
.calc-hipotesis {
  margin-top: 20px;
  border: 1px solid var(--sy-line);
  border-radius: 14px;
  background: #fff;
  padding: 18px 22px;
  font-size: 14px;
  color: var(--sy-muted);
  line-height: 1.6;
}
.calc-hipotesis ul { margin-top: 10px; display: grid; gap: 8px; }
.calc-hipotesis li { display: flex; gap: 8px; }
.calc-hipotesis b { color: var(--sy-ink); }
.calc-pie {
  font-size: 13px;
  color: var(--sy-muted);
  margin-top: 24px;
  max-width: 96ch;
  line-height: 1.55;
}
@media (min-width: 1024px) { .calc-pie { margin-top: 26px; } }

/* ---------------------------- Tabla comparativa ---------------------------- */
.tabla-scroll { overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch; }
.tabla-scroll::-webkit-scrollbar { height: 8px; }
.tabla-scroll::-webkit-scrollbar-thumb { background: var(--sy-line); border-radius: 8px; }
.tabla-comparativa {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: var(--r-tarjeta-g);
  overflow: hidden;
}
.tabla-comparativa th, .tabla-comparativa td { padding: 14px 16px; text-align: left; }
.tabla-comparativa thead th {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tabla-comparativa th:first-child { background: #fff; color: var(--sy-muted); font-weight: 600; }
.tabla-comparativa th.col-tav {
  background: var(--sy-mint);
  color: var(--sy-deep);
  font-weight: 700;
  text-align: center;
  width: 20%;
}
.tabla-comparativa th.col-barato { color: var(--sy-muted); font-weight: 600; }
.tabla-comparativa tbody td { border-top: 1px solid var(--sy-line); font-size: 14.5px; vertical-align: middle; }
.tabla-comparativa tbody td:first-child, .tabla-comparativa tbody th[scope="row"] { font-size: 15px; font-weight: 500; color: var(--sy-ink); text-align: left; }
.tabla-comparativa td.col-tav {
  background: var(--sy-mint);
  text-align: center;
  color: var(--sy-deep);
  font-weight: 800;
  font-size: 18px;
}
.tabla-comparativa td.col-barato { color: var(--sy-muted); font-size: 14px; }
.tabla-comparativa td.col-barato .cruz { color: var(--sy-cruz); font-weight: 800; margin-right: 8px; }
.tabla-comparativa .col-syp-blanco { width: 44%; }
@media (min-width: 1024px) {
  .tabla-comparativa th, .tabla-comparativa td { padding: 16px 20px; }
}
.tabla-cabecera { margin-top: 0; }

/* ------------------------------ Tres segmentos ------------------------------ */
.segmentos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 768px) { .segmentos__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .segmentos__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; } }
.tarjeta-segmento {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: var(--r-tarjeta-g);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .18s ease;
}
.tarjeta-segmento:hover { border-color: #B9C8BC; }
@media (min-width: 768px) { .tarjeta-segmento { padding: 30px 30px 26px; } }
.tarjeta-segmento__icono {
  width: 44px;
  height: 44px;
  border-radius: var(--r-icono);
  background: var(--sy-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
@media (min-width: 768px) { .tarjeta-segmento__icono { width: 46px; height: 46px; } }
.tarjeta-segmento h3 { font-size: 21px; margin-top: 4px; }
@media (min-width: 768px) { .tarjeta-segmento h3 { font-size: 25px; } }
.tarjeta-segmento p { font-size: 15px; color: var(--sy-muted); line-height: 1.5; }
.tarjeta-segmento__pie {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--sy-line);
  font-weight: 700;
  font-size: 15px;
  color: var(--sy-deep);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ------------------------------ Cómo trabajamos ---------------------------- */
.como-trabajamos .h2-seccion, .como-trabajamos h2 { color: #fff; }
.como-trabajamos__pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-top: 30px;
  color: #fff;
}
@media (min-width: 768px) {
  .como-trabajamos__pasos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .como-trabajamos__pasos { grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 40px; }
}
.paso__num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sy-sun);
  color: var(--sy-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  font-family: var(--f-display);
}
.paso h3 {
  font-size: 21px;
  margin-top: 14px;
  color: #fff;
}
@media (min-width: 768px) { .paso h3 { font-size: 22px; } }
.paso p { font-size: 15px; color: var(--sy-blanco-72); margin-top: 8px; line-height: 1.5; max-width: 30ch; }

/* ------------------------------- Ayudas ------------------------------------ */
.ayudas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: center;
}
@media (min-width: 1024px) { .ayudas__grid { grid-template-columns: .9fr 1.1fr; gap: 52px; } }
.ayudas__num-list { display: grid; gap: 14px; }
.tarjeta-num {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: var(--r-tarjeta);
  padding: 22px 24px;
}
.tarjeta-num__cifra {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(28px, 2.4vw, 34px);
  letter-spacing: -.02em;
  color: var(--sy-deep);
  line-height: 1.05;
}
.tarjeta-num p { font-size: 15px; color: var(--sy-muted); margin-top: 8px; line-height: 1.5; }

/* --------------------------------- Reseñas --------------------------------- */
.resenas__cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.caja-nota {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: 16px;
  padding: 16px 22px;
}
.caja-nota__media { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; }
.caja-nota small { font-size: 12.5px; color: var(--sy-muted); }
.caja-nota__estrellas { color: var(--sy-sun); font-size: 17px; letter-spacing: 2px; }
.resenas__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 768px) { .resenas__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .resenas__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; } }
.tarjeta-resena {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: var(--r-tarjeta);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
}
.tarjeta-resena__estrellas { color: var(--sy-sun); font-size: 16px; letter-spacing: 2px; }
.tarjeta-resena p { font-size: 15px; line-height: 1.55; margin-top: 12px; }
.tarjeta-resena__autor {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sy-line);
}
.tarjeta-resena__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sy-mint); flex: none;
}
.tarjeta-resena__nombre { font-weight: 700; font-size: 14.5px; }
.tarjeta-resena__detalle { font-size: 13px; color: var(--sy-muted); }

/* -------------------------------- Plan Amigo ------------------------------- */
.plan-amigo { background: var(--sy-deep); }
.plan-amigo__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding: 34px 0;
}
@media (min-width: 768px) {
  .plan-amigo__interior { grid-template-columns: auto 1fr auto; gap: 30px; padding: 48px 0; }
}
@media (min-width: 1024px) { .plan-amigo__interior { gap: 52px; padding: 66px 0; } }
.plan-amigo__circulo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--sy-sun);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}
@media (min-width: 768px) { .plan-amigo__circulo { width: 170px; height: 170px; margin: 0; } }
.plan-amigo__cifra {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(42px, 3.4vw, 52px);
  color: var(--sy-ink);
  line-height: 1;
  letter-spacing: -.02em;
}
.plan-amigo__bajo { font-size: 13px; font-weight: 700; color: var(--sy-ink); margin-top: 2px; }
.plan-amigo h2 { color: #fff; font-size: clamp(28px, 2.4vw + 6px, 42px); }
.plan-amigo__texto { color: rgba(255,255,255,.85); font-size: 17px; margin-top: 14px; max-width: 62ch; }

/* ---------------------------- Preguntas frecuentes ------------------------- */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}
@media (min-width: 1024px) { .faq__grid { grid-template-columns: .62fr 1.38fr; gap: 56px; } }
.faq__intro p { font-size: 15px; color: var(--sy-muted); margin-top: 16px; max-width: 34ch; }
.faq__item { border-bottom: 1px solid var(--sy-line); }
.faq__pregunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--sy-ink);
}
.faq__icono { color: var(--sy-deep); font-size: 22px; font-weight: 800; flex: none; transition: transform .2s; line-height: 1; }
.faq__item[data-abierta="true"] .faq__icono { transform: rotate(45deg); }
.faq__respuesta {
  display: none;
  padding: 0 0 20px;
  font-size: 15.5px;
  color: var(--sy-muted);
  line-height: 1.6;
  max-width: 70ch;
}
.faq__item[data-abierta="true"] .faq__respuesta { display: block; }

/* ------------------------------ Llamada final ------------------------------ */
.cta-final { background: var(--sy-ink); }
.cta-final__interior {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 34px 0;
}
@media (min-width: 768px) {
  .cta-final__interior {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding: 72px 0;
  }
}
.cta-final h2 {
  color: #fff;
  font-size: clamp(32px, 3vw + 6px, 48px);
  max-width: 20ch;
}
.cta-final__texto { color: var(--sy-blanco-72); font-size: 17px; margin-top: 14px; }
.cta-final__botones { display: flex; flex-wrap: wrap; gap: 14px; flex: none; }

/* --------------------------------- Pie ------------------------------------- */
.pie { background: var(--sy-ink); color: #fff; padding: 40px 0 26px; border-top: 1px solid rgba(255,255,255,.1); }
@media (min-width: 768px) { .pie { padding: 56px 0 34px; } }
.pie__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}
@media (min-width: 768px) { .pie__grid { grid-template-columns: 1.25fr repeat(3, 1fr); gap: 44px; } }
.pie__logo img { height: 44px; width: auto; aspect-ratio: 1866 / 376; display: block; }
.pie__claim { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--sy-sun); margin-top: 14px; }
.pie__datos { font-size: 14px; color: var(--sy-blanco-72); margin-top: 16px; line-height: 1.6; max-width: 34ch; }
.pie__datos strong { color: #fff; }
.pie__tel { font-size: 15px; font-weight: 700; margin-top: 14px; display: inline-block; }
.pie__tel:hover { color: var(--sy-sun); }
.pie__email { font-size: 14px; color: var(--sy-blanco-72); margin-top: 2px; word-break: break-all; }
.pie .pie__titulo {
  font-family: var(--f-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sy-sun);
  margin-bottom: 16px;
}
.pie__columna li { margin-bottom: 9px; }
.pie__columna a { font-size: 14.5px; color: var(--sy-blanco-72); display: inline-block; padding: 4px 0; min-height: 24px; }
.pie__columna a:hover { color: #fff; text-decoration: underline; }
.pie__legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--sy-blanco-55);
}
@media (min-width: 768px) {
  .pie__legal { flex-direction: row; justify-content: space-between; align-items: center; }
}
.pie__legal a:hover { color: #fff; text-decoration: underline; }

/* --------------------------- WhatsApp flotante ----------------------------- */
/* Escritorio: círculo fijo abajo a la derecha (solo ≥768 px).
   Móvil: barra fija inferior con WhatsApp + Llamar.
   En /contacto/ y /gracias/ no aparece ninguna de las dos (body.sin-flotantes). */
.wa-float {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 35;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sy-deep);
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-wa);
  transition: background-color .18s;
}
.wa-float:hover { background: var(--sy-deep-hover); }
.wa-float svg { width: 26px; height: 26px; }
.barra-movil {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 34;
  height: 74px;
  background: #fff;
  border-top: 1px solid var(--sy-line);
  padding: 10px 16px;
  gap: 10px;
  align-items: stretch;
}
.barra-movil .btn { flex: 1; padding: 0 14px; height: 54px; font-size: 15px; }
@media (min-width: 768px) {
  .wa-float { display: inline-flex; }
  .barra-movil { display: none; }
}
body.con-flotantes-movil { padding-bottom: 74px; }
@media (min-width: 768px) { body.con-flotantes-movil { padding-bottom: 0; } }
/* Páginas sin botones flotantes (contacto, gracias): se ocultan del todo */
body.sin-flotantes .wa-float,
body.sin-flotantes .barra-movil { display: none !important; }
body.sin-flotantes { padding-bottom: 0 !important; }

/* ------------------------------ Página legal ------------------------------- */
.legal__contenido { max-width: 780px; }
.legal__contenido h2 {
  font-size: clamp(24px, 2vw, 30px);
  margin: 34px 0 12px;
  font-weight: 700;
}
.legal__contenido h2:first-child { margin-top: 0; }
.legal__contenido p, .legal__contenido li { font-size: 16px; line-height: 1.65; color: #333F38; }
.legal__contenido ul { list-style: disc; padding-left: 22px; margin: 10px 0; }
.legal__contenido li { margin-bottom: 6px; }
.legal__contenido a { color: var(--sy-deep); text-decoration: underline; }
.legal__contenido p { margin-bottom: 14px; }
.legal__contenido p:last-child { margin-bottom: 0; }
.fecha-nota { font-size: 13px; color: var(--sy-muted); margin-bottom: 20px; }

/* ------------------------------ Formulario --------------------------------- */
/* minmax(0,1fr) y no 1fr: sin esto, un control con contenido ancho (el campo
   de archivos nativo, un select con opciones largas) estira su columna y en
   móvil desborda la página. Con minmax(0,·) la columna siempre puede encoger. */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 28px;
}
@media (min-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea, .subida input { width: 100%; max-width: 100%; min-width: 0; }
.subida, .subida__texto, .consentimiento { min-width: 0; }
.campo label { font-size: 13.5px; font-weight: 600; color: var(--sy-muted); margin-bottom: 7px; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="email"],
.campo input[type="number"], .campo select, .campo textarea {
  width: 100%;
  height: 52px;
  border: 1.5px solid var(--sy-line);
  border-radius: var(--r-boton);
  background: #fff;
  padding: 0 16px;
  font-family: var(--f-texto);
  font-size: 15.5px;
  color: var(--sy-ink);
  appearance: none;
  -webkit-appearance: none;
}
.campo textarea { height: 110px; padding: 14px 16px; resize: vertical; }
.campo select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6A63' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 3px solid var(--sy-sun);
  outline-offset: 0;
  border-color: var(--sy-deep);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: #B3261E;
}
.campo .error-msg { font-size: 12.5px; color: #B3261E; margin-top: 5px; display: none; }
.error-msg { font-size: 13px; color: #B3261E; margin-top: 8px; display: none; }
.error-msg.visible { display: block; }
.campo .error-msg.visible { display: block; }
.campo__ayuda { font-size: 12.5px; color: var(--sy-muted); margin-top: 5px; }
.hp-campo { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Subida de fotos */
.subida {
  background: var(--sy-mint);
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.subida__texto { font-size: 14px; color: var(--sy-muted); line-height: 1.5; }
.subida__texto strong { color: var(--sy-ink); }
.subida__lista { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.archivo-chip {
  background: #fff;
  border: 1px solid var(--sy-line);
  border-radius: 999px;
  font-size: 12.5px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.archivo-chip button {
  background: none; border: 0; color: var(--sy-muted);
  font-size: 15px; line-height: 1; padding: 0;
}
.archivo-chip button:hover { color: #B3261E; }

/* Consentimiento */
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--sy-muted); margin-top: 18px; line-height: 1.5; }
.consentimiento input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sy-deep); flex: none; }
.consentimiento a { color: var(--sy-deep); text-decoration: underline; }
.form-pie-aviso { font-size: 13px; color: var(--sy-muted); margin-top: 16px; }

/* ------------------------- Columna de contacto ----------------------------- */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}
@media (min-width: 1024px) { .contacto__grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.contacto-rail { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 1024px) { .contacto-rail { margin-top: 0; } }
.tarjeta-rail { background: #fff; border: 1px solid var(--sy-line); border-radius: var(--r-tarjeta); padding: 24px 26px; }
.tarjeta-rail--deep { background: var(--sy-deep); border-color: var(--sy-deep); color: #fff; }
.tarjeta-rail h2, .tarjeta-rail h3 { font-size: 21px; }
.tarjeta-rail--deep h3 { color: #fff; }
.tarjeta-rail__tel {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 2vw, 30px);
  letter-spacing: -.02em;
  margin-top: 12px;
  color: #fff;
  display: inline-block;
}
.tarjeta-rail__tel:hover { color: var(--sy-sun); }
.tarjeta-rail__horario { font-size: 14px; color: rgba(255,255,255,.85); margin-top: 6px; }
.tarjeta-rail__botones { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.tarjeta-rail p, .tarjeta-rail .dir { font-size: 15px; line-height: 1.6; }
.tarjeta-rail .dir { margin-top: 8px; }
.tarjeta-rail .zona-lista { margin-top: 12px; display: grid; gap: 10px; }
.tarjeta-rail .zona-lista div { padding-left: 18px; position: relative; }
.tarjeta-rail .zona-lista div::before {
  content: "";
  position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sy-sun);
}
/* Mapa: no se carga hasta aceptar cookies */
.mapa-hueco {
  border: 1.5px dashed var(--sy-line);
  border-radius: var(--r-tarjeta);
  background: var(--sy-bg);
  color: var(--sy-muted);
  font-size: 14px;
  text-align: center;
  padding: 44px 20px;
  margin-top: 18px;
}
.mapa-hueco iframe { border: 0; width: 100%; height: 300px; border-radius: var(--r-tarjeta); display: block; }

/* --------------------------- Página gracias -------------------------------- */
.gracias__contenido { max-width: 640px; }
.gracias__pasos { display: grid; gap: 14px; margin-top: 30px; }
.gracias__paso { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--sy-line); border-radius: var(--r-tarjeta); padding: 18px 22px; }
.gracias__paso b { font-family: var(--f-display); color: var(--sy-deep); font-size: 20px; }
.gracias__paso span { font-size: 15px; line-height: 1.5; }

/* ------------------------------ Banner cookies ----------------------------- */
.cookies-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 60;
  background: var(--sy-ink);
  color: #fff;
  border-radius: var(--r-tarjeta-g);
  padding: 24px 24px 20px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
  display: none;
}
.cookies-banner.visible { display: block; }
@media (min-width: 768px) { .cookies-banner { left: 24px; right: auto; bottom: 24px; margin: 0; } }
.cookies-banner p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.85); }
.cookies-banner a { color: var(--sy-sun); text-decoration: underline; }
.cookies-banner__botones { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cookies-banner .btn { font-size: 14.5px; padding: 12px 18px; }
.cookies-banner .btn--texto {
  background: none; border: 0; color: rgba(255,255,255,.7);
  padding: 12px 10px; text-decoration: underline;
}
.cookies-banner .btn--texto:hover { color: #fff; }

/* ------------------------------- Utilidades -------------------------------- */
.texto-centro { text-align: center; }
.margen-sup-16 { margin-top: 16px; }
.margen-sup-24 { margin-top: 24px; }
.margen-sup-30 { margin-top: 30px; }
/* Campo de archivo oculto (§ formulario). OJO: la regla `.subida input` de arriba
   (width:100%) tiene más especificidad que `.oculto-voz` y ganaba, así que el
   input de archivos quedaba con el ancho del contenedor y, al ser position:absolute,
   se salía de la ventana y provocaba scroll horizontal en /contacto/ a todos los
   anchos. Por eso aquí se sube la especificidad y se fija el tamaño a 1×1. */
.subida input.oculto-voz,
.oculto-voz {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.saltos-movil br { display: none; }
@media (max-width: 767px) { .saltos-movil br { display: inline; } }

/* Transición suave al abrir el menú móvil */
.cab__nav { transition: none; }

/* Ninguna página puede provocar scroll horizontal. Comprobado a 360, 390, 768,
   1024, 1440 y 1920 px. Se usa clip (no hidden) para no crear un contenedor de
   scroll: así el menú y los elementos fijos siguen funcionando igual.
   Motivo: con la barra de scroll clásica, un desfase de 3 px en móvil generaba
   una barra horizontal que no aportaba nada. */
html { overflow-x: clip; }

/* ---------------------- Migas de pan (breadcrumbs) ------------------------- */
/* Franja pequeña encima del hero. Gris del sistema sobre fondo claro: cumple
   contraste AA (5,3:1). El último nivel va en tinta y sin enlace. */
.migas { font-size: 13.5px; color: var(--sy-muted); padding: 16px 0 0; }
.migas ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: 2px;
}
/* OJO: el <ol> de las migas lleva también la clase .wrap, pero el reset de
   arriba tiene más especificidad que .wrap y le anulaba el «margin: 0 auto» y
   el padding lateral. Efecto: la ruta de la página salía pegada al borde
   izquierdo y desalineada del titular (24 px en móvil y hasta ~660 px en
   pantallas anchas, porque además perdía el centrado). Se le devuelve la misma
   rejilla que a .wrap. Si algún día se cambian los valores de .wrap, hay que
   cambiarlos también aquí. */
.migas ol.wrap {
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 768px)  { .migas ol.wrap { padding-left: 48px;  padding-right: 48px; } }
@media (min-width: 1440px) { .migas ol.wrap { padding-left: 96px; padding-right: 96px; } }
/* En las páginas legales el texto va en una columna de 780 px (.legal__contenido):
   la ruta se alinea con esa columna y no con la reja general. Se usa el atributo
   data-pagina que ya llevan esas páginas, sin tocar el HTML. */
body[data-pagina="legal"] .migas ol.wrap { max-width: 780px; }
.migas li { display: inline-flex; align-items: center; }
.migas li + li::before {
  content: '›'; color: var(--sy-muted); margin: 0 8px; font-weight: 600;
}
.migas a { color: var(--sy-muted); text-decoration: none; }
.migas a:hover, .migas a:focus-visible { color: var(--sy-deep); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--sy-ink); font-weight: 600; }
@media (min-width: 768px) { .migas { font-size: 14px; padding-top: 20px; } }

/* ------------------- Saltar al contenido (solo con teclado) ---------------- */
.saltar-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sy-deep); color: #fff;
  padding: 12px 18px; font-weight: 600; border-radius: 0 0 8px 0;
}
.saltar-contenido:focus { left: 0; outline: 3px solid var(--sy-sun); outline-offset: 2px; }

/* Los botones nunca pueden ser más anchos que su columna: si el texto no cabe,
   se parte en dos líneas en vez de empujar la página. */
.btn { max-width: 100%; }
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; } }

/* ------------------- Formulario: que nunca ensanche la columna -------------- */
/* Un input o un select con texto largo no debe poder estirar su columna: en
   móvil (360 y 390 px) desbordaba la página. min-width:0 desactiva el mínimo
   automático de las rejillas; no cambia nada en escritorio. */
.formulario, .form-grid, .form-grid > *, .campo { min-width: 0; }
.campo input, .campo select, .campo textarea { min-width: 0; max-width: 100%; }

/* --------------- Lista de lo que incluye el precio ------------------------- */
/* Sustituye a la antigua tabla comparativa contra «el presupuesto más barato».
   Marca con un check cada punto incluido; en escritorio va a dos columnas. */
.lista-incluye {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr; gap: 12px 30px; margin-top: 24px;
}
.lista-incluye li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.lista-incluye li span { color: var(--sy-deep); font-weight: 800; flex: none; }
@media (min-width: 768px) { .lista-incluye { grid-template-columns: 1fr 1fr; } }

/* Nota bajo el botón de la ficha del pack */
.ficha-pack__nota-cta { font-size: 13px; line-height: 1.5; margin-top: 12px; color: var(--sy-muted); }

/* ---------------------------------------------------------------------------
   BLOQUE INSTITUCIONAL DE MARCA (Quiénes somos).
   Logotipo horizontal CON CLAIM, sin deformar: se fija la altura y el ancho
   sale solo de la proporción real del archivo (2050×500).
--------------------------------------------------------------------------- */
.banda-marca { background: var(--sy-bg); border-bottom: 1px solid var(--sy-line); }
.banda-marca__interior { display: flex; justify-content: center; padding: 30px 0; }
.banda-marca img { height: 74px; width: auto; aspect-ratio: 2050 / 500; display: block; }
@media (min-width: 768px) { .banda-marca__interior { padding: 42px 0; } .banda-marca img { height: 108px; } }

/* ---------------------------------------------------------------------------
   ANIMACIÓN DE LA PORTADA · «La factura que da gusto abrir» (pack de 10 kWh)
   Añadido el 08-10-2026. Va al FINAL de estilos.css.

   · Usa los tokens de marca de :root (--sy-*, --f-*, --r-*). No trae fuentes
     ni colores nuevos: los tintes de la ilustración salen de mezclar los
     colores de marca entre sí o con blanco/negro, y solo viven aquí dentro.
   · Todo va con prefijo syp-anim / syp- para no chocar con el resto de la web.
   · El SVG ocupa una caja 4:5 con la altura reservada desde el primer pintado
     (sin saltos de maquetación, CLS 0).
--------------------------------------------------------------------------- */

/* Estructura del hero con animación: texto, animación y datos de confianza.
   Móvil: texto → animación → confianza. Escritorio (≥1024): texto y confianza
   a la izquierda, animación a la derecha ocupando las dos filas. */
.hero-home__grid--anim { grid-template-areas: "texto" "anim" "confianza"; row-gap: 0; }
.hero-home__grid--anim > .hero-home__texto { grid-area: texto; min-width: 0; }
.hero-home__grid--anim > .hero-home__anim { grid-area: anim; min-width: 0; margin-top: 36px; }
.hero-home__grid--anim > .hero-home__confianza { grid-area: confianza; }
@media (min-width: 1024px) {
  .hero-home__grid--anim {
    grid-template-areas: "texto anim" "confianza anim" ". anim";
    grid-template-rows: auto auto 1fr;
    row-gap: 0;
  }
  .hero-home__grid--anim > .hero-home__anim { margin-top: 0; }
}

/* Componente */
.syp-anim {
  --syp-ink:   var(--sy-ink, #132427);
  --syp-deep:  var(--sy-deep, #216F2C);
  --syp-deep-hover: var(--sy-deep-hover, #1A5A23);
  --syp-green: var(--sy-green, #498420);
  --syp-sun:   var(--sy-sun, #98BC21);
  --syp-bg:    var(--sy-bg, #F6F7F3);
  --syp-mint:  var(--sy-mint, #E8F2E9);
  --syp-muted: var(--sy-muted, #5A6A63);
  --syp-line:  var(--sy-line, #DDE5DD);
  /* Tintes de ilustración (mezclas de los colores de marca, solo para el dibujo) */
  --syp-sky-a: #D0E2D2;     /* menta + 12 % verde oscuro */
  --syp-sky-b: #F1F7F2;     /* menta + 40 % blanco */
  --syp-ground: #D0E2CB;    /* menta + 15 % verde principal */
  --syp-ground-line: #C0D6B7;
  --syp-night-a: #0E1B1D;   /* carbón + 25 % negro */
  --syp-night-b: #163328;   /* carbón + 20 % verde oscuro */
  --syp-ink-2: #213134;     /* carbón + 6 % blanco */
  --syp-ink-3: #2F3E41;     /* carbón + 12 % blanco */
  --syp-ink-4: #3E4B4E;     /* carbón + 18 % blanco */
  --syp-light: #E0EBBC;     /* luz de ventana: lima + 70 % blanco */
  --syp-sun-a: #B7D064;     /* brillo del sol: lima + 30 % blanco */
  --syp-water: #BFD9C4;     /* agua de la lavadora: menta + 20 % verde oscuro */
  --syp-amber: #E0B20F;     /* el ámbar del hover de .btn--ambar (horno encendido) */
  --syp-smoke: #A1A7A9;     /* humo de la central: carbón + 60 % blanco */
  --syp-f-display: var(--f-display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  --syp-f-texto: var(--f-texto, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif);
  --syp-radio: var(--r-tarjeta-g, 22px);
  --syp-radio-boton: var(--r-boton, 12px);

  margin: 0 auto;
  width: 100%;
  max-width: 540px;
  display: grid;
  gap: 12px;
}
.syp-anim__card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--syp-radio);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--syp-line);
  box-shadow: var(--sombra-pack, 0 18px 46px rgba(22,36,28,.07));
  container-type: inline-size;
}
.syp-anim .syp-anim__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}
.syp-anim__svg text { font-variant-numeric: tabular-nums; }
.syp-anim__svg .d { font-family: var(--syp-f-display); font-weight: 800; letter-spacing: -0.015em; word-spacing: .06em; }
.syp-anim__svg .t { font-family: var(--syp-f-texto); }

/* Rellenos (fill) por clase: así el dibujo sigue a los tokens de marca */
.syp-anim .f-ink   { fill: var(--syp-ink); }
.syp-anim .f-deep  { fill: var(--syp-deep); }
.syp-anim .f-green { fill: var(--syp-green); }
.syp-anim .f-sun   { fill: var(--syp-sun); }
.syp-anim .f-bg    { fill: var(--syp-bg); }
.syp-anim .f-mint  { fill: var(--syp-mint); }
.syp-anim .f-muted { fill: var(--syp-muted); }
.syp-anim .f-line  { fill: var(--syp-line); }
.syp-anim .f-white { fill: #fff; }
.syp-anim .f-ground { fill: var(--syp-ground); }
.syp-anim .f-ground-line { fill: var(--syp-ground-line); }
.syp-anim .f-night { fill: var(--syp-night-a); }
.syp-anim .f-ink2  { fill: var(--syp-ink-2); }
.syp-anim .f-ink3  { fill: var(--syp-ink-3); }
.syp-anim .f-ink4  { fill: var(--syp-ink-4); }
.syp-anim .f-light { fill: var(--syp-light); }
.syp-anim .f-water { fill: var(--syp-water); }
.syp-anim .f-amber { fill: var(--syp-amber); }
.syp-anim .f-smoke { fill: var(--syp-smoke); }
.syp-anim .f-none  { fill: none; }
/* Trazos (stroke) */
.syp-anim .k-ink   { stroke: var(--syp-ink); }
.syp-anim .k-deep  { stroke: var(--syp-deep); }
.syp-anim .k-sun   { stroke: var(--syp-sun); }
.syp-anim .k-muted { stroke: var(--syp-muted); }
.syp-anim .k-line  { stroke: var(--syp-line); }
.syp-anim .k-white { stroke: #fff; }
.syp-anim .k-ground-line { stroke: var(--syp-ground-line); }
.syp-anim .k-amber { stroke: var(--syp-amber); }
.syp-anim .k-ink3  { stroke: var(--syp-ink-3); }
/* Paradas de degradado */
.syp-anim .g-sky-a   { stop-color: var(--syp-sky-a); }
.syp-anim .g-sky-b   { stop-color: var(--syp-sky-b); }
.syp-anim .g-night-a { stop-color: var(--syp-night-a); }
.syp-anim .g-night-b { stop-color: var(--syp-night-b); }
.syp-anim .g-sun-a   { stop-color: var(--syp-sun-a); }
.syp-anim .g-sun     { stop-color: var(--syp-sun); }
.syp-anim .g-green   { stop-color: var(--syp-green); }
.syp-anim .g-deep    { stop-color: var(--syp-deep); }
.syp-anim .g-mint    { stop-color: var(--syp-mint); }
.syp-anim .g-white   { stop-color: #fff; }
.syp-anim .g-light   { stop-color: var(--syp-light); }

/* Botón final «¡Lo quiero!»: mismo aspecto que .btn--primario */
.syp-anim .syp-anim__cta {
  position: absolute;
  left: 50%;
  top: 72.4%;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 1em 1.75em;
  border: 2px solid var(--syp-deep);
  border-radius: var(--syp-radio-boton);
  background: var(--syp-deep);
  color: #fff;
  font-family: var(--syp-f-texto);
  font-weight: 700;
  font-size: 17px;
  font-size: clamp(15px, 4.2cqw, 19px);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0) scale(.9);
  transition: background-color .18s ease, border-color .18s ease;
}
.syp-anim .syp-anim__cta:hover { background: var(--syp-deep-hover); border-color: var(--syp-deep-hover); }
.syp-anim .syp-anim__cta svg { width: 1.05em; height: 1.05em; display: block; flex: none; }

/* «Ver otra vez» */
.syp-anim .syp-anim__replay {
  position: absolute;
  left: 50%;
  top: 85.6%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin: 0;
  padding: .5em .9em;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--syp-muted);
  font-family: var(--syp-f-texto);
  font-weight: 600;
  font-size: 13.5px;
  font-size: clamp(12.5px, 3.3cqw, 14.5px);
  line-height: 1.2;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.syp-anim .syp-anim__replay:hover { background: var(--syp-mint); color: var(--syp-ink); }
.syp-anim .syp-anim__replay svg { width: 1.05em; height: 1.05em; display: block; flex: none; }

/* «Ver el cálculo»: las hipótesis siempre a mano, bajo la animación */
.syp-anim__calculo {
  font-family: var(--syp-f-texto);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sy-blanco-72, rgba(255,255,255,.72));
}
.syp-anim__calculo summary {
  cursor: pointer;
  width: max-content;
  max-width: 100%;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.syp-anim__calculo summary:hover { color: #fff; }
.syp-anim__calculo p { margin: 8px 0 0; max-width: 62ch; font-size: 13px; }
/* Variante para fondo claro (si algún día se usa fuera del hero oscuro) */
.syp-anim--claro .syp-anim__calculo { color: var(--syp-muted); }
.syp-anim--claro .syp-anim__calculo summary:hover { color: var(--syp-ink); }

/* ------------------- Banner de cookies más discreto (10-10-2026) ------------
   El banner tapaba buena parte de la primera pantalla del móvil. Se recorta el
   relleno y el cuerpo de letra y se quita la línea del título. La información y
   los dos botones (Aceptar / Rechazar) se quedan igual: mismo texto, mismas
   opciones y el enlace a la política de cookies intacto.
   Para deshacerlo: borrar este bloque del final del fichero y subirlo. */
.cookies-banner { padding: 15px 16px 13px; }
.cookies-banner #cookies-titulo { display: none; }
.cookies-banner p { font-size: 12.5px; line-height: 1.4; }
.cookies-banner__botones { margin-top: 10px; gap: 8px; }
.cookies-banner .btn,
.cookies-banner .btn--texto { font-size: 13px; padding: 8px 14px; }
@media (max-width: 520px) {
  .cookies-banner { left: 10px; right: 10px; bottom: 10px; border-radius: 12px; }
}

/* =========================================================================
   MENU DE CABECERA: rotulos en una sola linea y huecos iguales
   Arreglado el 14-10-2026 (peticion de Alberto: "Packs y precios tiene mas
   espacio con la siguiente palabra que el resto").
   Causa: a 1900 px el menu tenia 657 px y necesitaba 659 -> los rotulos largos
   se partian en dos lineas y dejaban un hueco de ~89 px en lugar de 30.
   Aqui: una sola linea + separacion fluida menor (todos los huecos iguales).
   Medido antes/despues en 8 anchos (1280-1920 px). Solo escritorio (>=1280 px);
   el menu de movil (hamburguesa) no se toca.
   ========================================================================= */
@media (min-width: 1280px) {
  .cab__nav { gap: clamp(12px, 1.1vw, 24px); }
  .cab__nav a { white-space: nowrap; flex: none; }
}

/* ---------- 07-11-2026 · pie: zona en dos columnas · textos largos legibles ---------- */
@media (min-width: 768px) { .pie__grid { grid-template-columns: 1.15fr .9fr .9fr 2.4fr; } }
.pie__zonas { columns: 2; column-gap: 26px; }
.pie__zonas li { break-inside: avoid; }
@media (min-width: 768px) {
  .pie__zonas li { margin-bottom: 1px; }
  .pie__zonas a { padding: 2px 0; min-height: 20px; }
}
.texto-largo { max-width: 70ch; }
.texto-largo p { line-height: 1.65; }
.texto-largo p + p { margin-top: 14px; }
.h2-seccion { margin-bottom: 16px; }
.texto-largo h3 { font-size: 21px; margin: 18px 0 12px; }
@media (min-width: 768px) { .seccion { padding: 44px 0; } }
@media (max-width: 767px) { .seccion { padding: 30px 0; } }