/* ==========================================================================
   CalRenove — Design System  ·  MOBILE FIRST
   Base = móvil. Los puntos de ruptura amplían, nunca reducen.
   Identidad del logo real (#F30046 + negro) reinterpretada en la paleta
   «A · Cobre y piedra» de PROPUESTA-ESTILOS.md.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* Marca — propuesta «A · Cobre y piedra».
     El rosa neón muestreado del logotipo (#F30046) se leía como una app móvil,
     no como una empresa de calefacción. Este rojo teja conserva la familia
     cálida del cuadro rojo del logo —así no hace falta tocar la identidad— y
     baja el grito sin perder contraste sobre el blanco.
     Toda la paleta vive en este bloque: cambiar de propuesta es sustituirlo. */
  --marca:#B4532A;
  --marca-700:#8F3F1F;
  --marca-900:#6B2E16;
  --marca-050:#FBF1EC;
  --marca-100:#F5DFD4;

  /* Acento claro para fondos oscuros (panel interno del proyecto, avisos).
     El rojo teja no tiene contraste suficiente sobre negro, así que se aclara
     manteniendo el mismo tono: es la versión legible de --marca sobre oscuro. */
  --marca-300:#E8A98C;

  /* Neutros */
  --tinta:#0A0B0F;
  --tinta-2:#2A2F3A;
  --gris:#656C7C;
  /* #68717F da 4,93:1 sobre blanco y 4,64:1 sobre --fondo-2: pasa AA para texto
     pequeño, que es donde se usa (migas, notas al pie, etiquetas h4). El valor
     anterior (#98A0AF) daba 2,63:1 y fallaba. */
  --gris-claro:#68717F;
  --linea:#E8EAF0;
  --linea-fuerte:#D2D7E1;
  --fondo:#FFFFFF;
  --fondo-2:#F7F8FB;
  --fondo-3:#EFF1F6;
  /* Fondo de las fotos de producto. Tiene que ser EXACTAMENTE el mismo gris
     con el que se preparan las fotos (build/... y el criterio de COMO-ACTUALIZAR):
     así la foto se funde con la tarjeta en vez de verse como un rectángulo
     pegado encima. Si se cambia aquí, hay que cambiar también el de las fotos. */
  /* Fondo del panel de las fotos de producto.
     Las fotos van recortadas con transparencia, así que este color ES el fondo
     que se ve detrás de cada caldera: cambiarlo aquí lo cambia en las 70 a la
     vez, sin reprocesar ninguna imagen.
     Criterio: el blanco de las calderas está en luminancia 250-255. Para que se
     aprecie, el fondo tiene que quedar claramente por debajo. Con #D8DEE5 (221)
     la diferencia era de solo 30; con este gris (205 en el centro) es de 45-50,
     que se nota sin que el panel llegue a verse pesado ni oscuro. */
  /* Fondo ÚNICO de todas las fotos de producto del sitio: lo comparten las
     tarjetas del catálogo, el hero de marca y municipio y el hero de la portada,
     para que una caldera se vea igual en cualquier punto de la web.

     Criterio de contraste: la caldera es blanca (luminancia ~229) y las fotos
     van recortadas con transparencia, así que este color ES el fondo que se ve
     detrás de cada aparato. La silueta se aprecia a partir de ~30 puntos de
     diferencia (COMO-ACTUALIZAR.md). Este degradado va de 199 a 187, es decir
     30-42 puntos, y cumple el umbral en todo su recorrido.

     El tono es cálido, derivado del rojo teja de la marca (--marca #B4532A), y
     no un gris azulado neutro: así acompaña al degradado de los heroes, que es
     de la misma familia, en vez de competir con él. */
  --panel-producto:linear-gradient(170deg,#D6C6B8 0%,#D2C1B3 55%,#CDBAAB 100%);

  /* Estados */
  --ok:#0E9F6E;
  --ok-050:#E7F8F1;
  --wsp:#25D366;
  --wsp-oscuro:#128C7E;
  --tech:#2B5CE6;
  --tech-050:#EEF2FF;
  --aviso:#B45309;
  --aviso-050:#FFF7ED;

  /* Formas */
  --radio-s:10px;
  --radio:16px;
  --radio-l:24px;
  --radio-xl:32px;

  /* Sombras */
  --sombra-s:0 1px 2px rgba(10,11,15,.05), 0 1px 3px rgba(10,11,15,.04);
  --sombra:0 4px 14px rgba(10,11,15,.06), 0 14px 40px rgba(10,11,15,.05);
  --sombra-l:0 24px 60px rgba(10,11,15,.14);

  /* Layout */
  --ancho:1200px;
  --relleno:20px;
  --barra-preview:0px; /* en previsualización, body.preview la sube a 44px */
  --alto-movil:76px;    /* barra CTA fija inferior */

  --trans:.22s cubic-bezier(.4,0,.2,1);
  --trans-lenta:.4s cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Solo modo claro. Los navegadores con tema oscuro respetan esta declaración
     y no fuerzan inversión de colores ni pintan los controles nativos (checkbox,
     autofill, barras de scroll) en oscuro sobre el blanco del diseño. */
  color-scheme:light;
  /* Fondo OPACO en html, además del body. La cabecera es translúcida con blur
     porque está pensada para que se vea el contenido pasar debajo; si el fondo
     lo pinta solo el body y el navegador muestra por encima el color del tema
     oscuro (overscroll, iOS), esa zona traslúcida sale negra y el logo blanco y
     la hamburguesa oscura dejan de verse. Con esto siempre hay blanco detrás. */
  background-color:var(--fondo);
}
body{
  margin:0;
  font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.65;
  color:var(--tinta-2);
  background-color:var(--fondo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* Reserva el hueco de la barra de acción fija inferior. */
  padding-bottom:calc(var(--alto-movil) + env(safe-area-inset-bottom));
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--marca);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--marca-700)}
/* Titulares con la MISMA tipografía que el cuerpo. Antes eran Manrope, que daba un
   aire geométrico pero obligaba a descargar dos familias. Inter se sirve como fuente
   web, así que se ve idéntica en Windows, Android, Linux y Mac: no depende del
   sistema del visitante. El peso alto y el interletrado negativo marcan la jerarquía. */
h1,h2,h3,h4,.titular{
  font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta);
  margin:0 0 .5em;
  line-height:1.14;
  letter-spacing:-.024em;
  font-weight:800;
  text-wrap:balance;
}
h1{font-size:clamp(1.85rem,1.15rem + 3.4vw,3.6rem)}
h2{font-size:clamp(1.4rem,1.05rem + 1.9vw,2.4rem)}
h3{font-size:clamp(1.08rem,.98rem + .6vw,1.42rem);letter-spacing:-.018em}
h4{font-size:1.04rem;font-weight:750;letter-spacing:-.01em}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.15rem}
li{margin:.32rem 0}
strong{color:var(--tinta);font-weight:650}
small{font-size:.86em}
code{
  font-family:ui-monospace,SFMono-Regular,'Cascadia Code',Consolas,monospace;
  font-size:.85em;background:var(--fondo-3);padding:.14em .42em;border-radius:6px;color:var(--tinta);
  word-break:break-word;
}
address{font-style:normal}
:focus-visible{outline:3px solid var(--tech);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:calc(var(--barra-preview) + 76px)}

/* Con movimiento reducido se acortan las animaciones y transiciones decorativas.
   OJO: esta regla global usa !important y anula CUALQUIER animación, incluida la
   del móvil del hero. Por eso el hero quedaba estático en equipos con la
   preferencia activada. La excepción se declara justo después. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  /* Excepción: la animación del hero se mantiene, en su versión atenuada. */
  .hero__movil{animation-duration:1.1s !important;animation-delay:.2s !important}
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--relleno)}
.envoltura-estrecha{max-width:860px}
.seccion{padding:clamp(2.6rem,6vw,5.5rem) 0}
.seccion--gris{background:var(--fondo-2)}
.seccion--tinta{background:var(--tinta);color:#C9CEDA}
.seccion--tinta h2,.seccion--tinta h3{color:#fff}
.centrado{text-align:center}
.cabecera-seccion{max-width:740px;margin-bottom:clamp(1.6rem,3vw,2.8rem)}
.cabecera-seccion.centrado{margin-left:auto;margin-right:auto}
.antetitulo{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--marca);margin-bottom:.7rem;
}
.antetitulo svg{width:15px;height:15px}
.entradilla{font-size:1.05rem;color:var(--gris);margin:0}
.centrado .entradilla{margin-left:auto;margin-right:auto}

/* Rejillas: se resuelven solas con auto-fit, sin media queries */
.rejilla{display:grid;gap:16px}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
/* auto-fit reparte el espacio entre las columnas que caben. En pantallas anchas
   y con pocas tarjetas, una columna puede quedar enorme: con 2 modelos, cada
   tarjeta llegaba a 560 px y la caldera del catálogo se veía MÁS GRANDE que en
   el hero de la marca, que es su propia ficha. El tope de ancho evita que una
   tarjeta crezca por encima de su tamaño natural. */
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.rejilla--4 > .tarjeta-producto{max-width:340px;justify-self:center;width:100%}

/* ==========================================================================
   4. BARRA DE PREVISUALIZACIÓN (no forma parte del sitio final)

   La barra y las notas técnicas solo se emiten con PUBLICAR=0 (modo previsualización),
   y el <body> lleva entonces la clase .preview. El hueco superior que la barra
   fija necesita —cabecera pegada debajo de ella y desplazamiento al saltar a
   anclas— vive aquí, condicionado a .preview: en modo publicación --barra-preview
   es 0 y la cabecera queda pegada arriba del todo, sin espacio vacío.
   ========================================================================== */
body.preview{--barra-preview:44px}
.barra-preview{
  position:fixed;top:0;left:0;right:0;height:var(--barra-preview);z-index:120;
  background:#0E1015;color:#B4BAC6;display:flex;align-items:center;gap:12px;
  padding:0 14px;font-size:.78rem;border-bottom:1px solid #22252E;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.barra-preview::-webkit-scrollbar{display:none}
.barra-preview__marca{display:flex;align-items:center;gap:8px;font-weight:750;color:#fff;white-space:nowrap;flex:none}
.barra-preview__punto{width:8px;height:8px;border-radius:50%;background:var(--marca);box-shadow:0 0 0 3px rgba(180,83,42,.25);flex:none}
.barra-preview__etiqueta{
  background:#2A2E38;color:#E7E9EE;padding:.24em .62em;border-radius:6px;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:750;white-space:nowrap;flex:none;
}
.barra-preview__nav{display:none;gap:2px;align-items:center}
.barra-preview__nav a{color:#B4BAC6;padding:.34em .62em;border-radius:7px;white-space:nowrap;transition:var(--trans)}
.barra-preview__nav a:hover{background:#22252D;color:#fff}
.barra-preview__nav a[aria-current="page"]{background:var(--marca);color:#fff;font-weight:650}
.barra-preview__acciones{margin-left:auto;display:flex;gap:10px;align-items:center;white-space:nowrap;flex:none}
.barra-preview__toggle{
  display:inline-flex;align-items:center;gap:7px;background:#22252D;border:1px solid #333843;color:#DDE1E8;
  padding:.36em .75em;border-radius:8px;cursor:pointer;font-size:.75rem;font-family:inherit;font-weight:650;transition:var(--trans);
}
.barra-preview__toggle:hover{border-color:var(--tech);color:#fff}
.barra-preview__toggle[aria-pressed="true"]{background:var(--tech);border-color:var(--tech);color:#fff}
.barra-preview__toggle .punto{width:7px;height:7px;border-radius:50%;background:#4A5060;transition:var(--trans)}
.barra-preview__toggle[aria-pressed="true"] .punto{background:#7CFFB2;box-shadow:0 0 8px #7CFFB2}

/* ==========================================================================
   5. CABECERA
   ========================================================================== */
.cabecera{
  position:sticky;top:var(--barra-preview);z-index:100;
  /* Casi opaca: con .92 el blur dejaba traslucir lo que hay detrás — y en
     navegadores con tema oscuro eso podía ser negro. A .96 se sigue notando
     el paso del contenido bajo la cabecera pero el logo nunca compite con un
     fondo oscuro. */
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--linea);
}
.cabecera__interior{display:flex;align-items:center;gap:12px;height:60px}
.cabecera__logo{display:flex;align-items:center;flex:none}
.cabecera__logo img{height:26px;width:auto}
/* El logotipo se muestra en DOS versiones superpuestas (dos <img> reales: Safari iOS no
   aplica content:url() sobre imágenes). La normal va ENCIMA; la NEGATIVA (palabras blancas
   + cuadro teja claro) debajo. Por qué: Chrome Android tiene una opción «Tema oscuro» que
   INVIERTE los colores de las webs que no declaran soportar el modo oscuro — y la nuestra es
   solo-clara a propósito. Al invertir, el blanco de la cabecera se vuelve negro y las
   palabras NEGRAS del logo desaparecen al invertirse sobre su propio fondo negro. Lo mismo
   le pasa a la hamburguesa negra. Cómo funciona sin JavaScript ni consultas de medio:
     · navegador SIN invertir → se ve la capa de arriba (normal): perfecto;
     · navegador QUE INVERTE → invierte también el orden de apilado y trae al frente la capa
       inferior, la NEGATIVA: sus palabras blancas se convierten en negras sobre el blanco
       recuperado. Legible en los dos estados.
   visibility:hidden no vale: algunos motores lo tratan distinto al invertir. Con
   position:relative + z-index en la capa frontal basta, sin dependencias externas. */
.logo-cabecera{position:relative;display:inline-flex}
.logo-cabecera .negativo{position:absolute;inset:0;display:none}
.logo-cabecera > img:first-child{position:relative;z-index:1}
.nav{display:none}
.cabecera__acciones{margin-left:auto;display:flex;align-items:center;gap:10px}
.cabecera__tel{display:none;flex-direction:column;line-height:1.15;text-align:right}
.cabecera__tel small{font-size:.66rem;color:var(--gris-claro);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.cabecera__tel b{font-family:'Manrope',sans-serif;font-size:1.02rem;color:var(--tinta);letter-spacing:-.015em}
.cabecera__acciones .boton{display:none}
.hamburguesa{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  color:var(--tinta);background:#fff;border:1px solid var(--linea);border-radius:11px;padding:11px 10px;cursor:pointer;
}
.hamburguesa span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;transition:var(--trans)}

/* ==========================================================================
   6. MENÚ MÓVIL (hoja a pantalla completa)
   ========================================================================== */
.movil{position:fixed;inset:0;z-index:140;display:none;background:#fff;overflow-y:auto;overscroll-behavior:contain}
.movil.abierto{display:block;animation:entrarHoja .26s cubic-bezier(.22,1,.36,1)}
@keyframes entrarHoja{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.movil__cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px var(--relleno);border-bottom:1px solid var(--linea);
  position:sticky;top:0;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);z-index:2;
}
.movil__cab img{height:26px;width:auto}
.movil__cerrar{background:#fff;border:1px solid var(--linea);border-radius:11px;width:42px;height:42px;font-size:1.4rem;cursor:pointer;color:var(--tinta);line-height:1}
.movil__cuerpo{padding:1.2rem var(--relleno) .5rem}
.movil__grupo{margin-bottom:1.6rem}
.movil__grupo-tit{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gris-claro);margin:0 0 .5rem;font-weight:750}
.movil__grupo a{
  display:flex;align-items:center;gap:12px;padding:.85em .3em;border-radius:12px;
  color:var(--tinta);font-weight:600;border-bottom:1px solid var(--linea);
}
.movil__grupo a:last-child{border-bottom:none}
.movil__grupo a:active{background:var(--fondo-2)}
.movil__grupo img{width:26px;height:26px;object-fit:contain;flex:none}
.movil__acciones{display:grid;gap:10px;padding:.6rem var(--relleno) 2rem}

/* ==========================================================================
   7. BOTONES
   ========================================================================== */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:.88em 1.5em;border-radius:999px;min-height:48px;
  font-family:'Inter',sans-serif;font-weight:750;font-size:.97rem;
  border:1.5px solid transparent;cursor:pointer;transition:var(--trans);
  text-align:center;line-height:1.2;
  /* La etiqueta de un botón es una unidad: «Llamar 676 844 996» no puede partirse
     en dos líneas. En móviles estrechos (≤360 px) el texto saltaba de línea y el
     botón quedaba descompensado. Se mantiene en una sola línea; si no cabe, el
     navegador reduce el padding por las reglas de abajo, no rompe el texto. */
  white-space:nowrap;
  max-width:100%;
}
.boton > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* En pantallas muy estrechas se aprieta el botón en vez de partir el texto.
   El icono también se reduce para dejar sitio a la etiqueta. */
@media (max-width:400px){
  .boton{padding:.82em 1.05em;gap:7px;font-size:.92rem}
  .boton .icono{width:17px;height:17px;flex:none}
}
.boton--primario{
  background:linear-gradient(180deg,#C9612F 0%,var(--marca) 55%,var(--marca-700) 100%);
  color:#fff;box-shadow:0 6px 20px rgba(180,83,42,.26);
}
.boton--primario:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(180,83,42,.32)}
.boton--primario:active{transform:translateY(0)}
.boton--secundario{background:#fff;color:var(--tinta);border-color:var(--linea-fuerte)}
.boton--secundario:hover{border-color:var(--tinta);color:var(--tinta);transform:translateY(-2px)}
.boton--wsp{background:linear-gradient(180deg,#2BE07A 0%,var(--wsp) 60%,#1EBB5B 100%);color:#053A1E;box-shadow:0 6px 20px rgba(37,211,102,.26)}
.boton--wsp:hover{color:#053A1E;transform:translateY(-2px)}
.boton--claro{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.boton--claro:hover{background:rgba(255,255,255,.2);color:#fff}
.boton--bloque{width:100%}
.boton--g{font-size:1.03rem;padding:1em 1.9em}
.boton--sutil{background:var(--fondo-2);color:var(--tinta);border-color:transparent}
.boton--sutil:hover{background:var(--fondo-3);color:var(--tinta)}
.icono{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(1.8rem,5vw,4.5rem) 0 clamp(2rem,5vw,4rem);
  background:linear-gradient(170deg,#fff 0%,var(--marca-050) 55%,#fff 100%);
}
.hero::before{
  content:"";position:absolute;top:-180px;right:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,83,42,.16),transparent 68%);pointer-events:none;
}
.hero__rejilla{position:relative;display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center}
.hero__insignia{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linea);
  border-radius:999px;padding:.42em 1em;font-size:.76rem;font-weight:650;color:var(--tinta-2);
  box-shadow:var(--sombra-s);margin-bottom:1rem;
}
.hero__insignia .pulso{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(14,159,110,.18);flex:none;animation:latido 2.4s infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 3px rgba(14,159,110,.18)}50%{box-shadow:0 0 0 6px rgba(14,159,110,.06)}}
.hero h1{margin-bottom:.6rem}
.hero h1 em{
  font-style:normal;color:var(--marca);
  background-image:linear-gradient(180deg,transparent 68%,var(--marca-100) 68%);
  border-radius:3px;padding:0 .06em;
}
.hero__sub{font-size:1.05rem;color:var(--gris);max-width:32em;margin-bottom:1.4rem}
.hero__acciones{display:flex;flex-direction:column;gap:10px;margin-bottom:1.6rem}
.hero__acciones .boton{width:100%}
.hero__datos{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding-top:1.3rem;border-top:1px solid var(--linea)}
.hero__dato b{display:block;font-family:'Manrope',sans-serif;font-size:1.5rem;color:var(--marca);letter-spacing:-.035em;line-height:1}
.hero__dato span{font-size:.79rem;color:var(--gris)}
.hero__visual{position:relative;display:flex;justify-content:center;align-items:center;order:-1}
/* Sin sombra proyectada: el cliente no la quiere en las calderas. Además, desde
   que las fotos son recortes con transparencia, un drop-shadow aquí seguiría la
   silueta del aparato, así que quitar la sombra de dentro de la foto no bastaba:
   había que quitarla también de aquí. */
.hero__visual img{max-height:290px;width:auto}

/* Hero de las paginas de localidad.
   Usa la misma animacion del movil que la portada. La diferencia es que aqui el
   hero no lleva panel beige: la caldera se apoya directamente sobre el degradado
   claro de la seccion, asi que el contenedor solo necesita reservar sitio para
   que el movil no se salga de la caja en pantallas estrechas. */
.hero__visual--movil{padding:0 1.2rem}
/* Sin panel de fondo, la caldera blanca se apoya sobre el degradado claro de la
   seccion: la sombra perimetral es lo que la separa y le da volumen. */
.hero__visual--movil img{filter:drop-shadow(0 4px 10px rgba(15,23,42,.22)) drop-shadow(0 14px 34px rgba(15,23,42,.30))}

/* Hero de las páginas de marca y de municipio.
   Las calderas son blancas y el hero tenía un fondo casi blanco, así que el
   aparato se fundía con él y no se distinguía. Usa el mismo panel que las
   tarjetas de producto (--panel-producto), de modo que el contraste y el tono
   son idénticos en toda la web. */
.hero__visual--producto{
  background:none;padding:1.4rem;
}
/* La caldera del hero tiene que verse IGUAL o MAYOR que en las tarjetas del
   catálogo: es la pieza principal de la página, y si sale más pequeña que en
   su propia ficha el visitante percibe que el aparato "encoge" al abrir el
   modelo. El relleno del panel le resta sitio a la imagen, así que se reduce
   y se deja crecer hasta 520 px de alto. */
.hero__visual--producto{padding:1rem}
.hero__visual--producto img{max-height:520px;height:auto;width:auto}

/* Panel del hero de la PORTADA.
   Usa la MISMA variable que el resto de fotos del sitio (--panel-producto): un
   panel distinto por sección hacía que la misma caldera se viera sobre un fondo
   u otro según dónde estuviera. Lo único propio de este caso es el radio y el
   relleno, algo mayores porque es una pieza grande y centrada. */
.hero__visual--panel{
  background:none;padding:1.5rem;
}
/* Al quitar el panel beige, la caldera blanca de la portada quedaba sobre un
   fondo casi blanco y se fundia con el. La sombra perimetral es la que ahora
   la separa del fondo, siguiendo su propia silueta. */
.hero__visual--panel img{filter:drop-shadow(0 4px 10px rgba(15,23,42,.22)) drop-shadow(0 14px 34px rgba(15,23,42,.30))}

/* --------------------------------------------------------------------------
   Móvil con la app MiGo Link, junto a la caldera del hero.
   La imagen entra desde la derecha, se acerca al aparato y se queda apoyada:
   cuenta "esta caldera se controla desde el móvil" sin añadir texto.
   La animación se reproduce UNA vez al cargar, no en bucle, para no competir
   con la lectura, y termina en el estado final (el que se ve el resto del tiempo).
   -------------------------------------------------------------------------- */
.hero__movil{
  position:absolute;z-index:2;pointer-events:none;
  right:4%;top:50%;width:clamp(76px,17vw,120px);
  transform:translateY(-50%);
  filter:drop-shadow(0 16px 30px rgba(15,23,42,.22));
}
.hero__movil img{width:100%;height:auto;display:block}

/* Los @keyframes van SIEMPRE a nivel superior: anidados dentro de una media
   query el navegador los descarta y la animación no se ejecutaría. */
@keyframes movilEntraDerecha{
  0%   { transform:translateY(-50%) translateX(118%) scale(.92); opacity:0 }
  62%  { transform:translateY(-50%) translateX(-3%)  scale(1.02); opacity:1 }
  100% { transform:translateY(-50%) translateX(0)    scale(1);    opacity:1 }
}
@keyframes movilEntraDerechaAbajo{
  0%   { transform:translateX(118%) scale(.92); opacity:0 }
  62%  { transform:translateX(-3%)  scale(1.02); opacity:1 }
  100% { transform:translateX(0)    scale(1);    opacity:1 }
}

/* La animación se aplica siempre: era la causa de que en algunos equipos no se
   viera nada. Antes vivía dentro de prefers-reduced-motion:no-preference, y en
   un Chrome de escritorio con el movimiento reducido activado (Windows:
   «Mostrar animaciones en Windows» desactivado) el hero quedaba completamente
   estático. Ahora se anima en todos los casos; lo que cambia con la preferencia
   es la INTENSIDAD (ver más abajo), no la existencia. */
.hero__movil{animation:movilEntraDerecha 1.5s cubic-bezier(.22,1,.36,1) .35s both}

/* Keyframes atenuados: recorrido lateral corto y escala moderada. Es el punto
   medio entre el desplazamiento amplio de la versión completa y un simple
   fundido: se percibe con claridad sin resultar invasivo. */
@keyframes movilAparece{
  0%   { transform:translateY(-50%) translateX(26%) scale(.94); opacity:0 }
  55%  { opacity:1 }
  100% { transform:translateY(-50%) translateX(0)   scale(1);   opacity:1 }
}
@keyframes movilApareceAbajo{
  0%   { transform:translateX(26%) scale(.94); opacity:0 }
  55%  { opacity:1 }
  100% { transform:translateX(0)   scale(1);   opacity:1 }
}
/* Versión atenuada para quien pide movimiento reducido: sin recorrido lateral y
   más corta, pero con un fundido perceptible. Los @media no se anidan (el
   navegador descarta las reglas internas), así que van por separado. */
@media (prefers-reduced-motion:reduce){
  .hero__movil{animation:movilAparece 1.1s cubic-bezier(.22,1,.36,1) .2s both}
}

/* En móvil el hero es más estrecho: el móvil baja a la esquina inferior y usa
   una animación equivalente sin el desplazamiento vertical. */
@media (max-width:600px){
  .hero__movil{width:clamp(64px,20vw,92px);right:2%;top:auto;bottom:6%;transform:none}
  .hero__movil{animation:movilEntraDerechaAbajo 1.5s cubic-bezier(.22,1,.36,1) .35s both}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .hero__movil{animation:movilApareceAbajo 1.1s cubic-bezier(.22,1,.36,1) .2s both}
}

/* ==========================================================================
   9. COMPONENTES
   ========================================================================== */
.tarjeta{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-l);padding:1.35rem;
  transition:var(--trans);display:flex;flex-direction:column;height:100%;
}
.tarjeta:hover{border-color:var(--linea-fuerte);box-shadow:var(--sombra);transform:translateY(-3px)}
.tarjeta h3{margin-bottom:.4rem}
.tarjeta p{color:var(--gris);font-size:.94rem;margin-bottom:1rem}
.tarjeta__pie{margin-top:auto;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:6px;color:var(--marca)}
.tarjeta__pie .icono{width:15px;height:15px}
.tarjeta__icono{
  width:46px;height:46px;border-radius:14px;background:var(--marca-050);color:var(--marca);
  display:grid;place-items:center;margin-bottom:.9rem;flex:none;
}
.tarjeta__icono svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.tarjeta-marca{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-l);overflow:hidden;
  transition:var(--trans);display:flex;flex-direction:column;height:100%;
}
.tarjeta-marca:hover{box-shadow:var(--sombra);transform:translateY(-3px);border-color:var(--linea-fuerte)}
.tarjeta-marca__caja{
  height:126px;display:grid;place-items:center;padding:1.1rem;
  background:linear-gradient(160deg,var(--fondo-2),#fff);border-bottom:1px solid var(--linea);
}
/* Los 14 logos tienen proporciones muy distintas: de 2,31 (Saunier Duval, casi
   cuadrado) a 7,81 (Immergas, una firma muy apaisada). Escalarlos todos al mismo
   ancho —que es lo que pasaba— hacía que el más cuadrado (Hermann) pareciera
   enorme y los apaisados diminutos: 3,3 veces más área de tinta en el peor caso.
   Ahora se reparte el tamaño por franjas de proporción con clamp(), de forma que
   los cuadrados se limitan por altura y los apaisados conservan una altura mínima
   legible. El resultado es una presencia visual mucho más parecida entre marcas. */
.tarjeta-marca__caja img{
  width:auto;height:auto;object-fit:contain;
  max-width:88%;
  /* cuadrados (ratio ~2,3) → 54px; apaisados (ratio ~7,8) → mínimo 30px */
  height:clamp(30px,14vw,54px);
}
.tarjeta-marca__cuerpo{padding:1.2rem;display:flex;flex-direction:column;flex:1}
.tarjeta-marca__cuerpo p{color:var(--gris);font-size:.92rem;margin-bottom:1rem}
.tarjeta-marca__cuerpo .tarjeta__pie{margin-top:auto}
.tarjeta-marca__cuerpo h3{font-size:1.08rem}

.tarjeta-producto{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  transition:var(--trans);height:100%;display:flex;flex-direction:column;
}
.tarjeta-producto:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
/* Caja de la foto de producto.
   Las fotos van RECORTADAS con el fondo transparente (build/normalizar-fotos.js),
   así que aquí no hay ningún rectángulo: la caldera se apoya directamente sobre
   el fondo de la tarjeta y su propia sombra se funde con él.
   La caja usa la MISMA proporción que el lienzo de las fotos (4:5). Es importante:
   antes tenía un alto fijo y quedaba más ancha que la imagen, así que object-fit
   dejaba franjas grises a los lados y la caldera se veía más pequeña todavía.
   Coincidiendo las dos proporciones, la imagen llena la caja entera. */
.tarjeta-producto__img{
  aspect-ratio:4/5;padding:0;overflow:hidden;
  background:var(--panel-producto);
}
/* Sombra PERIMETRAL uniforme.
   Sobre un recorte transparente, drop-shadow sigue automáticamente la silueta del
   aparato, así que con UNA sola regla las 70 calderas quedan con la misma sombra
   alrededor. Es distinto de lo que se quitó antes: aquellas eran sombras metidas
   dentro de cada foto, cada una en un lado y con distinta intensidad. Esta la pone
   la web, es igual para todas y por eso el catálogo se ve coherente. */
.tarjeta-producto__img img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 8px 24px rgba(15,23,42,.18));
}
.hero__visual--producto img{filter:drop-shadow(0 4px 10px rgba(15,23,42,.22)) drop-shadow(0 14px 34px rgba(15,23,42,.30))}
.tarjeta-producto__cuerpo{padding:1.1rem;display:flex;flex-direction:column;flex:1}
.tarjeta-producto__cuerpo h3,.tarjeta-producto__cuerpo h4{margin-bottom:.28rem;font-size:1rem}
.tarjeta-producto__cuerpo p{font-size:.87rem;color:var(--gris);margin-bottom:.8rem}
.etiqueta{
  display:inline-block;background:var(--marca-050);color:var(--marca-700);
  font-size:.71rem;font-weight:750;padding:.3em .62em;border-radius:7px;letter-spacing:.03em;margin-bottom:.55rem;
}
.etiqueta--ok{background:var(--ok-050);color:#0A7A54}

.lista-check{list-style:none;padding:0;margin:0}
.lista-check li{position:relative;padding-left:1.85rem;margin:.6rem 0;color:var(--tinta-2)}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.32em;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--ok-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F6E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/62% no-repeat;
}

/* Respuesta directa: bloque citable por IA */
.respuesta{
  background:#fff;border:1px solid var(--linea);border-left:4px solid var(--marca);
  border-radius:var(--radio);padding:1.2rem 1.25rem;box-shadow:var(--sombra-s);
}
.respuesta p:last-child{margin-bottom:0}
.respuesta__etiqueta{
  display:inline-flex;align-items:center;gap:7px;font-size:.69rem;font-weight:750;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-bottom:.6rem;
}
.respuesta__etiqueta svg{width:14px;height:14px}

/* Tira de marcas. Antes era una sola imagen-collage, que a 150 px de alto dejaba
   cada logo en unos 30 px e ilegible. Ahora son los 14 logos reales, cada uno
   enlazando a su marca: se ven nítidos a cualquier resolución, se adaptan al
   ancho y no hay que regenerar ningún collage al añadir una marca.
   En gris con opacidad para que la tira se lea como un conjunto, y a color al
   pasar por encima. */
.banda-confianza{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.1rem 2rem;padding:1.6rem 0}
.banda-confianza__marca{
  display:flex;align-items:center;justify-content:center;height:42px;
  opacity:.62;filter:grayscale(1);transition:var(--trans);
}
.banda-confianza__marca:hover,.banda-confianza__marca:focus-visible{opacity:1;filter:none}
.banda-confianza__marca img{height:100%;width:auto;max-width:150px;object-fit:contain}
.banda-confianza__marca span{font-family:'Manrope',sans-serif;font-weight:750;color:var(--tinta-2);font-size:1rem}
.banda-confianza__texto{font-size:.84rem;color:var(--gris);font-weight:650;text-align:center;width:100%;margin-bottom:.2rem}

.pasos{display:grid;gap:16px;grid-template-columns:1fr}
.paso h3{margin-bottom:.3rem}
.paso p{color:var(--gris);font-size:.93rem;margin:0}
.paso__num{
  width:44px;height:44px;border-radius:14px;background:var(--tinta);color:#fff;
  display:grid;place-items:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:1.08rem;margin-bottom:.9rem;
}

/* Tablas */
.tabla-envoltura{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linea);border-radius:var(--radio);background:#fff;
  box-shadow:var(--sombra-s);
}
table.tabla{width:100%;border-collapse:collapse;font-size:.92rem;min-width:480px}
table.tabla th,table.tabla td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
table.tabla thead th{
  background:var(--fondo-2);font-family:'Manrope',sans-serif;font-weight:750;color:var(--tinta);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
table.tabla tbody tr:last-child td{border-bottom:none}
table.tabla tbody tr:hover{background:var(--marca-050)}
table.tabla td:first-child{font-weight:600;color:var(--tinta)}
table.tabla .precio{font-family:'Manrope',sans-serif;font-weight:800;color:var(--marca);white-space:nowrap}
.nota-tabla{font-size:.81rem;color:var(--gris-claro);margin-top:.7rem}

/* FAQ */
.faq{border:1px solid var(--linea);border-radius:var(--radio);background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:last-child{border-bottom:none}
.faq summary{
  list-style:none;cursor:pointer;padding:1.05rem 1.2rem;
  font-family:'Inter',sans-serif;font-weight:750;color:var(--tinta);font-size:1rem;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;transition:var(--trans);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--fondo-2)}
.faq summary::after{
  content:"";width:9px;height:9px;border-right:2px solid var(--marca);border-bottom:2px solid var(--marca);
  transform:rotate(45deg);transition:var(--trans);flex:none;margin-top:.45em;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:.7em}
.faq .faq__cuerpo{padding:0 1.2rem 1.2rem;color:var(--gris)}
.faq .faq__cuerpo p:last-child{margin-bottom:0}

/* Migas de pan */
.migas{padding:1.2rem 0 .2rem;font-size:.82rem;color:var(--gris-claro)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;align-items:center}
.migas li{display:flex;align-items:center;gap:7px;margin:0}
.migas li:not(:last-child)::after{content:"/";color:var(--linea-fuerte)}
.migas a{color:var(--gris)}
.migas a:hover{color:var(--marca)}
.migas [aria-current]{color:var(--tinta);font-weight:650}
.hero .migas{padding-top:0;padding-bottom:.8rem}

/* CTA final.
   Es el último bloque de casi todas las páginas y debajo flota la barra de acción
   fija. Se le añade el hueco al propio bloque para que el botón de llamar quede
   siempre por encima y el tap acierte en el botón. */
.cta-final{
  margin-bottom:var(--alto-movil);
  background:linear-gradient(140deg,var(--tinta) 0%,#1A1E28 52%,var(--marca-900) 100%);
  color:#C9CEDA;border-radius:var(--radio-l);padding:clamp(1.6rem,5vw,3.4rem);
  display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;position:relative;overflow:hidden;
}
.cta-final::after{
  content:"";position:absolute;right:-110px;bottom:-140px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,83,42,.32),transparent 66%);pointer-events:none;
}
.cta-final h2{color:#fff;margin-bottom:.5rem}
.cta-final p{margin:0;color:#A6ADBC}
.cta-final__acciones{display:flex;flex-direction:column;gap:10px;position:relative}
.cta-final__acciones .boton{width:100%}

/* Pie */
.pie{background:var(--tinta);color:#98A0AF;padding:clamp(2.2rem,5vw,4rem) 0 0;font-size:.91rem}
.pie__rejilla{display:grid;grid-template-columns:1fr;gap:1.8rem;padding-bottom:2rem}
.pie h4,.pie__tit{color:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .9rem;font-weight:750}
.pie a{color:#98A0AF;display:block;padding:.26em 0;transition:var(--trans)}
.pie a:hover{color:#fff}
.pie__logo{height:26px;width:auto;filter:brightness(0) invert(1);margin-bottom:1rem}
.pie__marca p{max-width:34ch;font-size:.88rem;line-height:1.6}
.pie__nap{line-height:1.8}
.pie__nap strong{color:#fff;display:block;font-weight:650}
.pie__base{
  border-top:1px solid #1E212A;padding:1.2rem 0;
  display:flex;flex-direction:column;gap:.8rem;font-size:.8rem;color:#6E7686;
}
.pie__base nav{display:flex;gap:1rem;flex-wrap:wrap}
.pie__base nav a{display:inline}
.pie__aviso{
  background:#15171D;border:1px solid #262A34;border-radius:var(--radio);padding:.9rem 1.1rem;
  font-size:.81rem;color:#8A92A2;margin:0 0 1.8rem;display:flex;gap:.7rem;align-items:flex-start;
}
.pie__aviso b{color:#D6DAE3}
.pie__aviso svg{flex:none;margin-top:.15rem;color:var(--marca-300)}

.cta-movil{
  display:flex;position:fixed;bottom:0;left:0;right:0;z-index:110;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  gap:9px;box-shadow:0 -8px 24px rgba(10,11,15,.09);
}
.cta-movil .boton{flex:1;padding:.7em 1em;font-size:.9rem;min-height:46px}

/* ==========================================================================
   10. CAPA TÉCNICA SEO/IA
   ========================================================================== */
.solo-tecnica{display:none}
body.capa-tecnica .solo-tecnica{display:block}
.nota-tec{
  background:var(--tech-050);border:1px solid #C7D2FE;border-left:4px solid var(--tech);border-radius:12px;
  padding:.85rem 1rem;margin:1rem 0;font-size:.84rem;color:#1E3A8A;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.6;
}
.nota-tec b{display:block;font-family:'Inter',sans-serif;font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tech);margin-bottom:.35rem}
.nota-tec code{background:#fff;border:1px solid #C7D2FE;color:#1E3A8A}
.nota-tec--ok{background:var(--ok-050);border-color:#A7E8CE;border-left-color:var(--ok);color:#065F46}
.nota-tec--ok b{color:#0A7A54}
.nota-tec--ok code{background:#fff;border-color:#A7E8CE;color:#065F46}
.nota-tec--aviso{background:var(--aviso-050);border-color:#FCD9A8;border-left-color:var(--aviso);color:#7C2D12}
.nota-tec--aviso b{color:var(--aviso)}
.nota-tec--aviso code{background:#fff;border-color:#FCD9A8;color:#7C2D12}
.leyenda-tec{
  position:fixed;left:12px;right:12px;bottom:calc(var(--alto-movil) + 12px);z-index:115;
  background:#0A0B0F;color:#C9CEDA;border-radius:var(--radio);padding:.95rem 1.05rem;font-size:.79rem;
  box-shadow:var(--sombra-l);border:1px solid #262A34;
  /* Oculto salvo que se active la capa técnica: no aporta nada al usuario ni al crawler. */
  visibility:hidden;pointer-events:none;
}
body.capa-tecnica .leyenda-tec{visibility:visible;pointer-events:auto}
.leyenda-tec__tit{margin:0 0 .55rem;color:#fff;font-family:'Manrope',sans-serif;font-size:.81rem;font-weight:750}
.leyenda-tec ul{list-style:none;padding:0;margin:0}
.leyenda-tec li{display:flex;gap:.55rem;align-items:flex-start;margin:.4rem 0;line-height:1.45}
.leyenda-tec .m{width:9px;height:9px;border-radius:3px;flex:none;margin-top:.36rem}

/* Aviso de borrador */
.borrador{
  display:flex;gap:.7rem;align-items:flex-start;background:var(--aviso-050);border:1px solid #FCD9A8;
  border-left:4px solid var(--aviso);border-radius:12px;padding:.85rem 1rem;font-size:.85rem;
  color:#7C2D12;margin:0 0 1.2rem;line-height:1.6;
}
.borrador svg{flex:none;margin-top:.15rem;color:var(--aviso)}
.borrador b{color:#7C2D12}
.borrador a{color:#7C2D12;text-decoration:underline;font-weight:650}

/* ==========================================================================
   12. FORMULARIO POR WHATSAPP
   ========================================================================== */
.wa{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-l);overflow:hidden;box-shadow:var(--sombra-s)}
.wa__cab{background:linear-gradient(140deg,#0E1B14,#128C7E);color:#fff;padding:1.1rem 1.2rem;display:flex;align-items:center;gap:11px}
.wa__cab svg{width:26px;height:26px;fill:#fff;flex:none}
.wa__cab b{display:block;font-family:'Manrope',sans-serif;font-size:1.02rem;line-height:1.25}
.wa__cab span{font-size:.8rem;color:#BFE9DA}
.wa__cuerpo{padding:1.2rem}
.wa__campos{display:grid;gap:14px;margin-bottom:1.2rem}
.wa__campo label{display:block;font-size:.85rem;font-weight:650;color:var(--tinta);margin-bottom:.4rem}
.wa__campo .ayuda{font-weight:400;color:var(--gris-claro);font-size:.78rem}
.wa__campo input,.wa__campo select,.wa__campo textarea{
  width:100%;padding:.8em .95em;border:1.5px solid var(--linea-fuerte);border-radius:12px;
  font:inherit;font-size:.95rem;color:var(--tinta);background:#fff;transition:var(--trans);
}
.wa__campo input:focus,.wa__campo select:focus,.wa__campo textarea:focus{outline:none;border-color:var(--wsp);box-shadow:0 0 0 4px rgba(37,211,102,.13)}
.wa__opciones{display:flex;flex-wrap:wrap;gap:8px}
.wa__opcion{
  background:var(--fondo-2);border:1.5px solid var(--linea);border-radius:999px;
  padding:.5em .95em;font-size:.85rem;font-family:inherit;font-weight:600;cursor:pointer;
  color:var(--tinta-2);transition:var(--trans);
}
.wa__opcion:hover{border-color:var(--linea-fuerte)}
.wa__opcion[aria-pressed="true"]{background:var(--wsp);border-color:var(--wsp);color:#053A1E;font-weight:750}
.wa__previa{
  background:#0E1B14;border-radius:var(--radio);padding:1rem 1.1rem;margin-bottom:1.1rem;
  font-size:.86rem;color:#D6F5E7;line-height:1.6;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  max-height:190px;overflow-y:auto;
}
.wa__previa b{color:#7CFFB2;display:block;font-family:'Inter',sans-serif;font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45rem}
.wa__acciones{display:grid;gap:10px}
.wa__nota{font-size:.78rem;color:var(--gris);margin:.9rem 0 0;display:flex;gap:.5rem;align-items:flex-start}
.wa__nota svg{flex:none;margin-top:.15rem;width:15px;height:15px;stroke:var(--gris)}

/* ==========================================================================
   13. PÁGINA: PANEL DEL PROYECTO
   ========================================================================== */
.panel-hero{background:linear-gradient(150deg,#0A0B0F,#1A1D26 58%,#2A0A18);color:#A6ADBC;padding:clamp(2.2rem,5vw,4.5rem) 0}
.panel-hero h1{color:#fff;margin-bottom:.7rem}
.panel-hero p{max-width:62ch;font-size:1.02rem}
.panel-hero .antetitulo{color:var(--marca-300)}

.kpi-rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,165px),1fr));margin-top:1.8rem}
.kpi{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:var(--radio);padding:1.1rem}
.kpi b{display:block;font-family:'Manrope',sans-serif;font-size:1.9rem;color:#fff;letter-spacing:-.04em;line-height:1}
.kpi span{font-size:.79rem;color:#8A92A2}
.kpi--alerta b{color:var(--marca-300)}

.bloque{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-l);padding:clamp(1.15rem,3vw,2rem);margin-bottom:18px}
.bloque__cab{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem;flex-wrap:wrap}
.bloque__num{
  width:34px;height:34px;border-radius:11px;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-family:'Manrope',sans-serif;font-weight:800;flex:none;font-size:.94rem;
}
.bloque__cab h2{margin:0;font-size:clamp(1.1rem,1rem + .5vw,1.3rem)}
.bloque__cab .etiqueta{margin:0 0 0 auto}

.arbol{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem;line-height:1.9;
  color:var(--gris);background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.1rem;overflow-x:auto;white-space:pre;
}
.arbol .raiz{color:var(--marca);font-weight:700}
.arbol .carpeta{color:var(--tinta);font-weight:650}
.arbol .nuevo{background:var(--ok-050);color:#0A7A54;padding:.05em .4em;border-radius:5px;font-weight:650}
.arbol .fuera{color:var(--gris-claro);text-decoration:line-through}
.arbol .com{color:var(--gris-claro)}

.flujo{display:grid;grid-template-columns:1fr;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:#fff}
.flujo__paso{padding:1.15rem;border-bottom:1px solid var(--linea)}
.flujo__paso:last-child{border-bottom:none}
.flujo__paso b{display:block;font-family:'Manrope',sans-serif;font-size:1.75rem;color:var(--marca);letter-spacing:-.04em;line-height:1}
.flujo__paso span{font-size:.85rem;color:var(--gris);display:block;margin-top:.3rem}
.flujo__paso .mini{font-size:.75rem;color:var(--gris-claro);margin-top:.5rem;display:block}

.barras{display:flex;flex-direction:column;gap:12px}
.barra{margin:0}
.barra__cab{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:.32rem;color:var(--tinta-2);gap:1rem}
.barra__cab b{font-family:'Manrope',sans-serif;color:var(--tinta);flex:none}
.barra__pista{height:9px;background:var(--fondo-3);border-radius:99px;overflow:hidden}
.barra__relleno{height:100%;border-radius:99px;background:var(--marca);transition:width var(--trans-lenta)}
.barra__relleno--ok{background:var(--ok)}
.barra__relleno--tech{background:var(--tech)}

.antes-despues{display:grid;grid-template-columns:1fr;gap:16px}
.lado{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.lado__cab{padding:.7rem 1rem;font-size:.75rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.lado--antes .lado__cab{background:#FEF2F2;color:#B91C1C;border-bottom:1px solid #FECACA}
.lado--despues .lado__cab{background:var(--ok-050);color:#0A7A54;border-bottom:1px solid #A7E8CE}
.lado__cuerpo{padding:1.05rem;font-size:.87rem}
.lado__cuerpo ul{list-style:none;padding:0;margin:0}
.lado__cuerpo li{padding-left:1.35rem;position:relative;margin:.5rem 0;line-height:1.5}
.lado--antes .lado__cuerpo li::before{content:"✕";position:absolute;left:0;color:#DC2626;font-weight:700;font-size:.8rem}
.lado--despues .lado__cuerpo li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800;font-size:.85rem}

.codigo{
  background:#0A0B0F;color:#C9CEDA;border-radius:var(--radio);padding:1.1rem;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem;line-height:1.75;
  overflow-x:auto;white-space:pre;margin:0;
}
.codigo .c{color:#5F6879}
.codigo .k{color:var(--marca-300)}
.codigo .s{color:#7CFFB2}
.codigo .v{color:#8AB4FF}

.mini-tabla{width:100%;border-collapse:collapse;font-size:.86rem;min-width:520px}
.mini-tabla th,.mini-tabla td{padding:.62rem .75rem;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
.mini-tabla thead th{background:var(--fondo-2);font-size:.73rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta);white-space:nowrap}
.mini-tabla tbody tr:last-child td{border-bottom:none}
.pastilla{display:inline-block;font-size:.72rem;font-weight:750;padding:.26em .6em;border-radius:6px;white-space:nowrap}
.pastilla--rojo{background:#FEF2F2;color:#B91C1C}
.pastilla--ambar{background:var(--aviso-050);color:#92400E}
.pastilla--verde{background:var(--ok-050);color:#0A7A54}
.pastilla--azul{background:var(--tech-050);color:#1E3A8A}

.paleta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:12px}
.color-muestra{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.color-muestra__capa{height:72px}
.color-muestra__dato{padding:.6rem .75rem;font-size:.76rem;font-family:ui-monospace,monospace;color:var(--gris)}
.color-muestra__dato b{display:block;font-family:'Inter',sans-serif;color:var(--tinta);font-size:.82rem;margin-bottom:.15rem}

.tipografia-muestra{border:1px solid var(--linea);border-radius:var(--radio);padding:1.2rem}
.tipografia-muestra .fila{padding:.65rem 0;border-bottom:1px solid var(--linea);display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.tipografia-muestra .fila:last-child{border-bottom:none}
.tipografia-muestra .meta{font-size:.73rem;color:var(--gris-claro);font-family:ui-monospace,monospace;margin-left:auto}

/* ==========================================================================
   14. AMPLIACIONES (mobile first → min-width)
   ========================================================================== */
@media (min-width:601px){
  :root{--relleno:26px}
  body{font-size:17px}
  .cabecera__interior{height:66px}
  .cabecera__logo img{height:29px}
  .hero__acciones{flex-direction:row;flex-wrap:wrap}
  .hero__acciones .boton{width:auto}
  .hero__datos{grid-template-columns:repeat(4,1fr);gap:.9rem}
  .hero__visual img{max-height:340px}
  .cta-final__acciones{flex-direction:row;flex-wrap:wrap}
  .cta-final__acciones .boton{width:auto}
  .pasos{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .pie__base{flex-direction:row;justify-content:space-between;align-items:center}
  .flujo{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .flujo__paso{border-bottom:none;border-right:1px solid var(--linea)}
  .flujo__paso:last-child{border-right:none}
  .antes-despues{grid-template-columns:1fr 1fr}
  .wa__acciones{grid-template-columns:1fr}
  .banda-confianza__marca{height:48px}
}

@media (min-width:861px){
  :root{--alto-movil:0px}
  body{padding-bottom:0}
  .cta-final{margin-bottom:0}
  .nav{display:flex;gap:2px;align-items:center;margin-left:4px}
  .nav__item{position:relative}
  .nav__enlace{
    display:flex;align-items:center;gap:5px;padding:.58em .82em;border-radius:10px;
    color:var(--tinta-2);font-weight:600;font-size:.93rem;transition:var(--trans);white-space:nowrap;
  }
  .nav__enlace:hover{background:var(--fondo-2);color:var(--tinta)}
  .nav__enlace::after{
    content:"";width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.45;
  }
  .nav__item--simple .nav__enlace::after{display:none}
  .nav__panel{
    position:absolute;top:calc(100% + 12px);left:50%;min-width:260px;background:#fff;
    border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-l);padding:8px;
    /* El panel se centra bajo su pestaña en vez de crecer hacia la derecha, que
       es lo que hacía que se saliera de la pantalla en resoluciones estrechas. */
    /* Y se le pone tope de alto con desplazamiento: si la lista crece (marcas,
       servicios...), la última entrada sigue siendo alcanzable en cualquier
       altura de ventana. Antes no tenía ni tope ni scroll. */
    max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:var(--trans);z-index:5;
  }
  .nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
  /* El panel de marcas lleva 14 entradas: en dos columnas entra sin salirse de
     la pantalla ni siquiera en un portátil de 1025 px de ancho. */
  .nav__panel--marcas{
    display:grid;grid-template-columns:1fr 1fr;gap:2px;
    width:min(540px, calc(100vw - 32px));min-width:0;
  }
  .nav__panel a{
    display:flex;align-items:center;gap:11px;padding:.58em .72em;border-radius:10px;
    color:var(--tinta-2);font-size:.91rem;transition:var(--trans);
  }
  .nav__panel a:hover{background:var(--marca-050);color:var(--marca-700)}
  .nav__panel img{width:26px;height:26px;object-fit:contain;flex:none}
  .cabecera__tel{display:flex}
  .cabecera__acciones .boton{display:inline-flex}
  .hamburguesa{display:none}
  .cta-movil{display:none}
  /* La columna del texto cede algo de ancho a la de la imagen: la caldera es
     la pieza que vende la página y necesita sitio para verse a buen tamaño. */
  .hero__rejilla{grid-template-columns:1fr 1.08fr;gap:clamp(1.5rem,3.5vw,3.4rem)}
  .hero__visual{order:0}
  .hero__visual img{max-height:420px}
  .hero__visual--producto img{max-height:520px}
  .hero__flotante{
    display:flex;position:absolute;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
    padding:.7em .95em;box-shadow:var(--sombra);align-items:center;gap:10px;
    font-size:.82rem;font-weight:650;color:var(--tinta);
  }
    .hero__flotante--2{top:8%;right:-1%}
  .hero__flotante img{width:30px;height:30px;object-fit:contain}
    .pie__rejilla{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.2rem}
  .leyenda-tec{left:auto;right:20px;bottom:20px;max-width:300px}
  .cta-final{grid-template-columns:1.15fr auto;gap:2rem}
  .banda-confianza__marca{height:54px}
  .tarjeta-marca__caja{height:146px}
  .tarjeta-marca__caja img{height:clamp(34px,3.4vw,58px);max-width:88%}
  .seccion{padding:clamp(3rem,5vw,5.5rem) 0}
}

@media (min-width:1025px){
  :root{--relleno:30px}
  .hero{padding-bottom:clamp(3rem,5vw,4.5rem)}
  .hero__visual img{max-height:470px}
  .hero__visual--producto img{max-height:560px}
  .hero__dato b{font-size:1.7rem}
  .tarjeta{padding:1.55rem}
}

/* Móvil muy estrecho */
@media (max-width:359px){
  .hero__datos{grid-template-columns:1fr 1fr;gap:.7rem}
  .hero__dato b{font-size:1.3rem}
}

/* Impresión */
@media print{
  .barra-preview,.cabecera,.cta-movil,.leyenda-tec,.pie,.cta-final{display:none !important}
  body{padding:0;color:#000}
  .hero{background:none}
}

/* ==========================================================================
   Buscador de marcas
   ==========================================================================
   Con 14 marcas la lista del menú es larga y cuesta encontrar la que buscas. El
   buscador filtra lo que ya está en la página mientras se escribe; no consulta
   nada a ningún servidor. Lo maneja build/sitio.js. */

/* Los enlaces de marca del menú llevan display:flex, y eso gana al display:none
   que el navegador aplica al atributo hidden. Sin esta regla, filtrar no
   ocultaría nada. */
[hidden]{display:none !important}

.buscador{margin-bottom:.5rem;padding:2px 2px .7rem;border-bottom:1px solid var(--linea)}
/* Dentro del desplegable de escritorio, que va en dos columnas, ocupa las dos */
.nav__panel--marcas .buscador{grid-column:1/-1}
.buscador__etiqueta{
  display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gris-claro);font-weight:750;margin-bottom:.4rem;
}
.buscador__caja{
  display:flex;align-items:center;gap:8px;background:var(--fondo-2);
  border:1px solid var(--linea);border-radius:10px;padding:.5em .7em;transition:var(--trans);
}
.buscador__caja svg{width:17px;height:17px;flex:none;color:var(--gris);stroke:currentColor;fill:none;stroke-width:2}
.buscador__caja input{
  flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:.92rem;
  color:var(--tinta);outline:none;
}
.buscador__caja input::placeholder{color:var(--gris-claro)}
.buscador__caja:focus-within{border-color:var(--marca-700);box-shadow:0 0 0 3px var(--marca-050)}
/* Quita la cruz nativa del input type=search, que descoloca el icono */
.buscador__caja input::-webkit-search-cancel-button{-webkit-appearance:none}
.buscador__vacio{margin:.55rem 0 0;font-size:.83rem;color:var(--gris);line-height:1.45}
.buscador__vacio a{color:var(--marca-700);font-weight:600;text-decoration:underline}