/* ValorStock · hoja única.
   Paleta extraída del CSS real de stocklear.es el 08/08/2026. Ojo: los valores
   del documento de referencia que circula (turquesas #00A6C7 / #00C7A5) NO
   aparecen en esa web. Estos sí, comprobados en su HTML y sus hojas:
     #2969ff  azul, el acento    ·  #fbbf24  ámbar, el destacado
     #101828  texto              ·  #f9f9f9 · #eff6ff  fondos
     #e1e3e5 · #eaecf0  bordes   ·  #667085 · #98a2b3  texto secundario

   Contrastes sobre blanco:
     tinta #101828 · 17,4:1    azul #2969FF · 5,3:1    ámbar #FBBF24 · 1,7:1
   El ámbar NUNCA es texto. Superficie y marcas, y encima de él va tinta. */

:root{
  --papel:      #FFFFFF;
  --papel-rgb:  255,255,255;
  --hueso:      #F9F9F9;
  --hueso-rgb:  249,249,249;
  --hueso-2:    #EFF6FF;          /* azul muy tenue, para secciones alternas */
  --hueso-2-rgb:239,246,255;
  --tinta:      #101828;
  --tinta-rgb:  16,24,40;
  --tinta-2:    #475467;          /* texto secundario  · 8,6:1 */
  --tinta-3:    #667085;          /* metadatos         · 5,6:1 */
  --azul:       #2969FF;
  --azul-2:     #1D4ED8;
  --azul-rgb:   41,105,255;
  --azul-suave: #E5EDFF;
  --ambar:      #FBBF24;
  --sobre-ambar:#101828;
  --verde-wa:   #25D366;
  --verde-wa-2: #0E7A3E;          /* el #25D366 de marca da 1,98:1: no vale ni como
                                     texto (4,5) ni como gráfico (3). Este da 5,42:1 */
  --linea:      #E1E3E5;
  --linea-2:    #C9CFD6;
  --tinta-alta: #1B2A47;          /* degradado del panel oscuro */
  --opaco:      #000;

  --fuente: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --paso-1:.5rem; --paso-2:1rem; --paso-3:1.5rem; --paso-4:2.5rem; --paso-5:4rem; --paso-6:6rem;
  --ancho: 74rem;
  --radio: 12px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--hueso); color:var(--tinta);
  font-family:var(--fuente); font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ margin:0; font-weight:800; line-height:1.04; letter-spacing:-.03em; text-wrap:balance }
h1{ font-size:clamp(2.4rem,1.4rem + 4.4vw,5rem) }
h2{ font-size:clamp(1.8rem,1.2rem + 2.6vw,3.1rem) }
h3{ font-size:1.14rem; font-weight:700; letter-spacing:-.015em; line-height:1.22 }
p{ margin:0 }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem) }
.contenedor--estrecho{ max-width:48rem }

.saltar{ position:absolute; left:-999px; top:0; z-index:100;
  background:var(--azul); color:var(--papel); padding:.7rem 1.1rem; font-weight:700 }
.saltar:focus{ left:0 }
:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--tinta); outline-offset:3px; border-radius:2px }

/* El ámbar no puede ser texto: aquí es un cuadrado que marca la etiqueta. */
.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:var(--paso-2);
}
.eyebrow::before{ content:''; width:.55rem; height:.55rem; background:var(--ambar); flex:none }

/* ── Botones ─────────────────────────────────────────────── */
.boton{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--azul); color:var(--papel); font-weight:700; font-size:1rem;
  padding:.9rem 1.6rem; border-radius:var(--radio); text-decoration:none;
  box-shadow:0 2px 0 rgba(var(--tinta-rgb),.16);
  transition:background .18s ease, box-shadow .2s ease, transform .18s ease }
.boton:hover{ background:var(--azul-2); box-shadow:0 6px 18px rgba(var(--tinta-rgb),.2) }
.boton:active{ transform:translateY(1px) }
.boton--grande{ font-size:1.12rem; padding:1.1rem 2.1rem }
.boton--sm{ font-size:.86rem; padding:.55rem 1.1rem }
.ico-wa{ width:1.25em; height:1.25em; flex:none }
/* will-change es una promesa cara: reserva memoria de GPU aunque no se anime
   nada. El efecto imán solo lo aplica app.js con ratón fino y sin movimiento
   reducido, así que fuera de esas dos condiciones no se promete nada. */
@media (hover:hover) and (pointer:fine){
  @media (prefers-reduced-motion:no-preference){ .magnetico{ will-change:transform } }
}

/* ── Cabecera ────────────────────────────────────────────── */
.cabecera{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  gap:var(--paso-3); padding:.9rem clamp(1.1rem,4vw,2.5rem);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease }
/* Sin backdrop-filter. Sobre un fondo al 97 % de opacidad el desenfoque no se
   distingue, y obliga al compositor a capturar y desenfocar el fondo de la
   página en cada fotograma de scroll. Aviso honesto: medido en Chrome 151 con
   GPU real y hasta 6x de estrangulamiento de CPU, quitarlo no cambia el tiempo
   de fotograma (16,7 ms de mediana con y sin él). Se quita porque no aporta
   nada visible, no porque esté demostrado que costara. */
.cabecera.pegada{ background:var(--hueso);
  border-bottom-color:var(--linea) }
.marca{ display:flex; align-items:center; gap:.6rem; text-decoration:none;
        color:var(--tinta); margin-inline-end:auto }
.marca-iso{ width:2rem; height:2rem; flex:none }
.marca-texto{ font-weight:800; letter-spacing:-.025em; font-size:1.05rem }
.nav{ display:none; gap:var(--paso-3) }
.nav a{ text-decoration:none; color:var(--tinta-2); font-size:.92rem; font-weight:600;
        position:relative; padding-block:.2rem }
.nav a::after{ content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--azul); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1) }
.nav a:hover::after{ transform:scaleX(1) }
@media (min-width:56rem){ .nav{ display:flex } }

/* ── Menú de móvil ───────────────────────────────────────────
   Por debajo de 56rem la navegación estaba en display:none y no había nada que
   la sustituyera: siete secciones y la única forma de llegar a "Preguntas" era
   scrollear la página entera. Se resuelve con <details>, que abre y cierra sin
   una sola línea de JavaScript: si app.js no carga, el menú sigue funcionando.
   app.js solo añade el detalle de cerrarlo al pulsar un enlace. */
.menu{ position:relative; margin-inline-start:auto }
.menu > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem;
  min-height:44px; padding:0 .85rem; border-radius:10px;
  border:1px solid var(--tinta-3); background:var(--papel); color:var(--tinta);
  font-weight:700; font-size:.92rem }
.menu > summary::-webkit-details-marker{ display:none }
.menu > summary svg{ width:1.15rem; height:1.15rem; flex:none }
.menu[open] > summary .ico-abrir,
.menu:not([open]) > summary .ico-cerrar{ display:none }

.menu-panel{ position:absolute; right:0; top:calc(100% + .55rem); z-index:2;
  /* 17rem para que "Escribir por WhatsApp" quepa en una línea: partido en dos
     el icono quedaba centrado contra dos renglones y se leía descuidado. */
  min-width:17rem; display:grid; gap:.1rem; padding:.45rem;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:0 18px 44px rgba(var(--tinta-rgb),.18) }
/* 44 px de alto: muy por encima del mínimo de 24 de WCAG 2.5.8, porque esto se
   usa con el pulgar y a menudo con prisa. */
.menu-panel a{ display:flex; align-items:center; min-height:44px; padding:0 .8rem;
  border-radius:8px; text-decoration:none; color:var(--tinta); font-weight:600 }
.menu-panel a:hover{ background:var(--hueso-2) }
.menu-panel .menu-wa{ color:var(--verde-wa-2); font-weight:800; gap:.55rem }
.menu-panel .menu-wa svg{ width:1.15em; height:1.15em; flex:none }
.menu-sep{ height:1px; background:var(--linea); margin:.35rem .3rem }

/* En pantalla grande manda .nav y el botón de contacto de siempre. */
@media (min-width:56rem){ .menu{ display:none } }
/* Solo se pliega el botón donde HAY menú que lo recoja. La regla anterior
   apuntaba a .cabecera a secas y dejaba a contacto.html y privacidad.html sin
   su "← Volver" en móvil: sin menú y sin botón, la única salida era el botón
   atrás del navegador. */
@media (max-width:55.99rem){ .cabecera--con-menu > .boton--sm{ display:none } }

/* ── Portada ─────────────────────────────────────────────── */
.portada{ position:relative; display:flex; align-items:center; min-height:100svh;
  padding-block:clamp(6rem,14vh,9rem) clamp(4rem,10vh,6rem); overflow:hidden }
.portada-fondo{ position:absolute; inset:0; background:var(--hueso) }
.portada-fondo img,
.portada-fondo video{ width:100%; height:100%; object-fit:cover;
  object-position:70% center; transform:translateZ(0) }
.portada-fondo::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(var(--papel-rgb),.98) 0%, rgba(var(--papel-rgb),.94) 32%, rgba(var(--papel-rgb),.58) 56%, rgba(var(--papel-rgb),.22) 100%),
    linear-gradient(to bottom, rgba(var(--papel-rgb),.5) 0%, transparent 24%, rgba(var(--papel-rgb),.4) 100%);
}
/* El cartel es lo que se ve por defecto, siempre. El vídeo solo lo sustituye
   cuando de verdad ha llegado a cargar: el script de index.html añade la clase
   .con-video en el evento loadeddata. Así, si el vídeo no llega —conexión
   lenta, ahorro de datos, autoplay bloqueado— no queda un hueco negro, queda
   el cartel, que es exactamente lo que había antes. */
.portada-video{ display:none }
.portada-fondo.con-video .portada-video{ display:block }
.portada-fondo.con-video .portada-cartel{ display:none }
/* El archivo de móvil ya viene recortado en vertical desde el original, así que
   aquí no hay que descentrarlo: se encuadra solo. */
@media (max-width:55.99rem){
  .portada-fondo.con-video .portada-video{ object-position:center }
}
.portada-texto{ position:relative; z-index:2; width:100%; max-width:var(--ancho);
  margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.5rem) }
.portada .entradilla{ margin-top:var(--paso-3); max-width:33ch;
  font-size:clamp(1.05rem,1rem + .55vw,1.3rem); color:var(--tinta-2) }
.portada-acciones{ margin-top:var(--paso-4); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--paso-2) var(--paso-3) }
/* margin-top: sin él, el texto de apoyo quedaba pegado al botón secundario
   cuando los dos botones se apilan en móvil. Se ve en la captura a 390. */
.apoyo{ margin-top:var(--paso-2); font-size:.95rem; color:var(--tinta-3); max-width:26ch }
.baja{ position:absolute; z-index:2; left:clamp(1.1rem,4vw,2.5rem); bottom:1.6rem;
  width:1px; height:3.2rem; background:var(--linea); overflow:hidden }
.baja span{ display:block; width:100%; height:1.1rem; background:var(--azul) }

/* Grano: sobre fondo claro va muy sutil, solo para quitar el acabado liso. */
.portada.grano::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.malla{ position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; opacity:.75;
  background:
    radial-gradient(42rem 32rem at 16% 24%, rgba(var(--azul-rgb),.13), transparent 68%),
    radial-gradient(38rem 34rem at 84% 76%, rgba(251,191,36,.12), transparent 70%) }
@media (prefers-reduced-motion:no-preference){
  /* El will-change entra aquí, junto a la animación que lo justifica. Estaba
     fuera: con movimiento reducido la animación no existía y la promesa sí,
     en dos .malla de 2304x1512 que no se mueven. */
  .malla{ will-change:transform; animation:respiraMalla 26s ease-in-out infinite alternate }
  @keyframes respiraMalla{ from{ transform:translate3d(-2%,-1%,0) scale(1) }
                           to{ transform:translate3d(3%,2%,0) scale(1.12) } }
  .portada-fondo img{ animation:respirar 34s ease-in-out infinite alternate }
  @keyframes respirar{ from{ transform:scale(1) } to{ transform:scale(1.06) } }
  .baja span{ animation:caer 2.4s cubic-bezier(.6,0,.4,1) infinite }
  @keyframes caer{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(300%) } }
}

/* ── Barra de progreso ───────────────────────────────────── */
.progreso{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60 }
.progreso span{ display:block; height:100%; width:100%; background:var(--azul);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform }

/* ── Cinta ───────────────────────────────────────────────── */
.cinta{ overflow:hidden; background:var(--papel); color:var(--tinta-2);
  padding-block:.9rem; border-block:1px solid var(--linea);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--opaco) 6%,var(--opaco) 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,var(--opaco) 6%,var(--opaco) 94%,transparent) }
.cinta-pista{ display:flex; gap:1.4rem; width:max-content; white-space:nowrap;
  font-size:clamp(.95rem,.9rem + .5vw,1.35rem); font-weight:700; letter-spacing:-.02em }
.cinta-pista i{ color:var(--azul); font-style:normal }
@keyframes desfilar{ to{ transform:translateX(-50%) } }
/* DECISIÓN DEL OPERADOR (09/08/2026): la cinta desfila SIEMPRE, también con
   "reducir movimiento" activado. No es un descuido y no hay que "arreglarlo".

   Lo que se acepta a cambio, escrito para que conste: WCAG 2.2.2 pide que todo
   movimiento automático que dure más de cinco segundos se pueda pausar, y esta
   cinta no se puede. Es la única excepción del sitio; el resto de animaciones
   —portada, revelados, giro de tarjetas, latido del mapa— sí respetan la
   preferencia.

   El will-change se queda porque aquí sí hay una animación de transform
   permanente que lo justifica, en los dos modos. */
.cinta-pista{ will-change:transform; animation:desfilar 46s linear infinite }

/* ── Secciones ───────────────────────────────────────────── */
.seccion{ padding-block:clamp(3.5rem,9vw,var(--paso-6)); contain:paint }
.seccion--textura{ background:var(--hueso-2) }
.seccion-cab{ max-width:46rem; margin-bottom:clamp(2rem,5vw,var(--paso-5)) }
.seccion-cab .intro{ margin-top:var(--paso-2); color:var(--tinta-2); max-width:52ch }

/* El bloque "Dos caminos" (.caminos-sec, .camino, .camino--vender,
   .camino-lista…) vivía aquí: 18 reglas para una sección que no existe en
   ninguna de las tres páginas. Eliminado. Está en el historial de git si
   alguna vez se recupera esa sección. */

/* ── Rejilla de categorías ───────────────────────────────────
   Fuera las fotos de almacén: puestas en pequeño y en rejilla se veían sucias
   y pegadas. Tarjetas limpias sobre fondo claro, con un icono de trazo. El
   hueco del icono es el que ocuparán los recortes PNG cuando existan. */
.rejilla-cat{ list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(.7rem,1.8vw,1.1rem); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) }
.cat{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start;
  padding:clamp(1.3rem,2.6vw,1.7rem); background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio);
  transition:border-color .28s ease, transform .28s ease, box-shadow .28s ease }
.cat-ico{ display:grid; place-items:center; width:3rem; height:3rem; flex:none;
  border-radius:10px; background:var(--azul-suave); color:var(--azul); margin-bottom:.25rem }
.cat-ico svg{ width:1.6rem; height:1.6rem }
.cat h3{ font-size:1.05rem }
.cat p{ color:var(--tinta-3); font-size:.88rem; line-height:1.5 }
.cat--otros{ background:var(--azul-suave); border-color:rgba(var(--azul-rgb),.3) }
/* Sobre el azul suave, --tinta-3 se queda en 4,24:1. --tinta-2 da 6,55:1. */
.cat--otros p{ color:var(--tinta-2) }
.cat--otros .cat-ico{ background:rgba(var(--azul-rgb),.14) }
@media (hover:hover){
  .cat:hover{ transform:translateY(-3px); border-color:rgba(var(--azul-rgb),.4);
              box-shadow:0 14px 34px rgba(var(--tinta-rgb),.10) }
}

.procedencias{ margin-top:clamp(2rem,4vw,2.8rem); padding-top:var(--paso-3);
  border-top:1px solid var(--linea); color:var(--tinta-3); font-size:.92rem }
.procedencias strong{ color:var(--tinta-2); font-weight:700 }

/* ── Botón secundario ────────────────────────────────────── */
/* El borde estaba en var(--linea-2), que sobre el fondo da 1,49:1, muy por
   debajo del 3:1 que exige WCAG 1.4.11 para el límite de un control. "Comprar
   lotes" es una de las dos puertas de entrada del negocio y sobre la portada
   llegaba a desaparecer. Con var(--tinta-3) el borde queda en 4,8:1. */
.boton--linea{ background:transparent; color:var(--tinta); border:1.5px solid var(--tinta-3);
  box-shadow:none }
.boton--linea:hover{ background:var(--papel); border-color:var(--azul); color:var(--azul);
  box-shadow:0 6px 18px rgba(var(--tinta-rgb),.1) }

/* ── Pasos ───────────────────────────────────────────────── */
.pasos{ list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(1rem,2.5vw,1.4rem); grid-template-columns:1fr }
@media (min-width:44rem){ .pasos{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:64rem){ .pasos{ grid-template-columns:repeat(4,1fr) } }
.pasos li{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.55rem;
  padding:1.5rem 1.35rem 1.7rem; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); transform-style:preserve-3d;
  transition:border-color .3s ease, box-shadow .3s ease }
.pasos li::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--azul) }
.pasos li::after{ content:''; position:absolute; width:16rem; height:16rem; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--azul-rgb),.10), transparent 66%);
  left:var(--mx,50%); top:var(--my,50%); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .35s ease; pointer-events:none }
@media (hover:hover){
  .pasos li:hover{ border-color:var(--linea-2); box-shadow:0 16px 40px rgba(var(--tinta-rgb),.12) }
  .pasos li:hover::after{ opacity:1 }
}
.paso-n{ font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--tinta-3); font-variant-numeric:tabular-nums }
.pasos p{ color:var(--tinta-2); font-size:.97rem }

/* ── Split ───────────────────────────────────────────────── */
.split{ display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center }
@media (min-width:60rem){ .split{ grid-template-columns:.9fr 1.1fr } }
/* ── La foto de "Rápido, en efectivo…" ────────────────────────
   Llevaba una mask-image que difuminaba SOLO el borde derecho. Eso dejaba tres
   bordes duros y uno blando, que no se lee como foto integrada sino como foto
   rota por un lado. Y como la máscara baja el alfa, se veía la página a través
   de la foto: los montantes de las estanterías quedaban fantasmales al 30 %
   en toda la franja de transición.

   El desajuste de fondo no es de temperatura, como suponía la auditoría: la
   foto no es cálida, es fría y gris verdosa. Es de LUMINOSIDAD. La foto es
   mucho más oscura que el #EFF6FF de la sección y se leía como un agujero
   recortado en la página. Por eso se aclara y se le baja el contraste en vez
   de intentar "enfriarla". */
.split-foto{ position:relative; overflow:hidden; border-radius:var(--radio) }
.split-foto img{ width:100%; aspect-ratio:3/2; object-fit:cover;
  filter:saturate(.7) contrast(.92) brightness(1.12) }
/* Un solo velo, en el eje vertical, que es el único que tiene sentido en el
   apilado de móvil. Por debajo de 60rem la foto va arriba y el texto debajo:
   difuminar hacia la derecha apuntaba a un sitio donde no hay nada. */
.split-foto::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(var(--azul-rgb),.12), transparent 46%) }

@media (min-width:60rem){
  /* La foto pasa a ser un panel a sangre: se estira a la altura completa de la
     fila, así sus bordes superior e inferior COINCIDEN con los de la sección y
     dejan de ser cortes flotando en mitad del azul pálido. Cuatro bordes
     coherentes: dos a sangre y dos que son el límite de la sección. */
  .seccion--porque .split{ align-items:stretch }
  .seccion--porque .split-foto{ border-radius:0 }
  .seccion--porque .split-foto img{ aspect-ratio:auto; height:100%;
    /* El pasillo tiene un punto de fuga y es lo único que da profundidad a esta
       foto. Con el recorte centrado caía justo donde empieza el difuminado.
       Se desplaza el encuadre para que quede en el tercio izquierdo, lejos del
       borde que se funde. */
    object-position:65% center }
  /* Difuminado de COLOR, no de alfa: se pinta encima con el color exacto del
     fondo y a partir del 95 % ya es opaco puro. Al no haber mezcla parcial
     prolongada no aparece la banda de barro que dejaba la máscara. */
  /* El difuminado horizontal va PRIMERO: en background, la primera capa
     listada es la que queda encima. Con el velo azul delante, el borde
     derecho salía en (224,236,254) en vez de (239,246,255) y la foto no
     terminaba de fundirse con la sección. */
  .seccion--porque .split-foto::after{
    background:
      linear-gradient(90deg,
        rgba(var(--hueso-2-rgb),0)    0%,
        rgba(var(--hueso-2-rgb),.05) 52%,
        rgba(var(--hueso-2-rgb),.30) 72%,
        rgba(var(--hueso-2-rgb),.70) 86%,
        rgba(var(--hueso-2-rgb),.95) 93%,
        /* opaco puro ya en el 97 %, no en el 100 %: si la rampa termina justo
           en el último píxel, ese píxel se queda en alfa 0,985 y deja una
           costura de un punto por canal contra la sección. */
        rgba(var(--hueso-2-rgb),1)   97%),
      linear-gradient(to top, rgba(var(--azul-rgb),.10), transparent 42%) }
}
.seccion--porque{ background:var(--hueso-2); padding-block:0; overflow:hidden }
@media (min-width:60rem){
  .seccion--porque .contenedor{ max-width:none; padding-inline:0 }
  /* align-items va en stretch, no en center: es lo que hace que la foto llegue
     al borde de la sección por arriba y por abajo. Estaba duplicado aquí en
     center y pisaba la regla de arriba. */
  .seccion--porque .split{ grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem) }
  .seccion--porque .split-texto{ padding-block:clamp(3rem,7vw,5rem);
    padding-inline-end:clamp(1.1rem,4vw,2.5rem); max-width:36rem;
    align-self:center }
}
@media (max-width:59.99rem){
  .seccion--porque{ padding-block:clamp(3.5rem,9vw,var(--paso-6)) }
}
.ventajas{ list-style:none; margin:0; padding:0; display:grid; gap:1.05rem }
.ventajas li{ padding-left:1.1rem; border-left:2px solid var(--linea-2);
  color:var(--tinta-2); font-size:.99rem }
.ventajas strong{ display:block; color:var(--tinta); font-weight:800; letter-spacing:-.015em }

/* ── Preguntas ───────────────────────────────────────────── */
.faq{ display:grid; border-top:1px solid var(--linea) }
.faq details{ border-bottom:1px solid var(--linea) }
.faq summary{ cursor:pointer; list-style:none; padding:1.2rem 2.5rem 1.2rem 0;
  position:relative; font-weight:700; font-size:1.05rem; letter-spacing:-.015em }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:''; position:absolute; right:.35rem; top:50%;
  width:.7rem; height:.7rem; border-right:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease }
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg) }
.faq p{ padding:0 0 1.35rem; color:var(--tinta-2); max-width:60ch }

/* ── Cierre ──────────────────────────────────────────────── */
.cierre{ position:relative; overflow:hidden; background:var(--tinta); color:var(--papel);
  padding-block:clamp(4rem,10vw,var(--paso-6)); text-align:center }
/* El anillo de foco global es var(--tinta), y esta sección tiene fondo
   var(--tinta): el anillo quedaba tinta sobre tinta, contraste 1:1, sobre el
   botón de WhatsApp que es el CTA principal del sitio. Quien navega con
   teclado no tenía forma de saber dónde estaba. */
.cierre :focus-visible{ outline-color:var(--papel) }
.cierre > .contenedor{ position:relative; z-index:2 }
.cierre .malla{ opacity:.5;
  background:radial-gradient(36rem 26rem at 50% 30%, rgba(var(--azul-rgb),.35), transparent 64%) }
.cierre-intro{ margin:var(--paso-2) auto var(--paso-4); color:rgba(var(--papel-rgb),.78); max-width:44ch }
.datos{ margin:var(--paso-4) 0 0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--paso-2) var(--paso-4) }
.datos div{ display:flex; flex-direction:column; gap:.15rem }
.datos dt{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(var(--papel-rgb),.55) }
.datos dd{ margin:0; font-size:1rem }
/* 24 px de alto: el correo del bloque de cierre daba 178x18. */
.datos a{ text-decoration:none; border-bottom:1px solid rgba(var(--papel-rgb),.3);
  display:inline-flex; align-items:center; min-height:24px }
.datos a:hover{ border-bottom-color:var(--azul) }

/* ── Pie ─────────────────────────────────────────────────── */
.pie{ background:var(--papel); border-top:1px solid var(--linea); padding-block:var(--paso-4) }
.pie-fila{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--paso-2) }
.marca--pie .marca-iso{ width:1.6rem; height:1.6rem }
.marca--pie .marca-texto{ font-size:.92rem }
.pie-legal{ display:flex; flex-wrap:wrap; gap:.5rem; font-size:.88rem; color:var(--tinta-3) }
/* min-height de 24 px: WCAG 2.5.8. Estos enlaces daban 18 px de alto, y para
   un público de 45 a 70 años en móvil eso no es un tecnicismo. */
.pie-legal a{ color:var(--tinta-3); text-decoration:none; border-bottom:1px solid transparent;
  display:inline-flex; align-items:center; min-height:24px }
.pie-legal a:hover{ color:var(--tinta); border-bottom-color:var(--linea-2) }

/* ── Entradas ────────────────────────────────────────────── */
/* El ocultado va FUERA del media query, a propósito. Lo que cambia con
   movimiento reducido es la duración y el desplazamiento —eso lo decide
   app.js—, nunca el estado inicial. Cuando el ocultado vivía dentro de
   @media (no-preference), con "reducir movimiento" el bloque llegaba visible
   y el fromTo de GSAP lo bajaba a 0 para volver a subirlo: 41 bloques
   encendiéndose y apagándose al bajar. Medido: 41 de 41 antes, 0 de 41 después. */
.palabra{ display:inline-block }
.js [data-entrada]{ opacity:0 }
.js [data-revelar]{ opacity:0 }
@media (prefers-reduced-motion:no-preference){
  .js h1 .palabra, .js h2 .palabra{ opacity:0; transform:translateY(.5em) rotate(1.5deg) }
  /* Solo aquí: con movimiento reducido las palabras únicamente cambian de
     opacidad, y eso no necesita una capa reservada por palabra. */
  .palabra{ will-change:transform,opacity }
}
@media (prefers-reduced-motion:reduce){
  /* Ni desplazamiento ni giro: solo la opacidad, que es lo único que anima
     el JS en este modo. Si aquí se dejara el transform, quedaría puesto
     para siempre en los titulares que GSAP no llegue a tocar. */
  .js h1 .palabra, .js h2 .palabra{ opacity:0 }
}


/* ── Cobertura ───────────────────────────────────────────── */
.cobertura{ background:var(--papel) }
.cobertura-fila{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center }
@media (min-width:60rem){ .cobertura-fila{ grid-template-columns:1.05fr .95fr } }
.cobertura-txt .intro{ margin-top:var(--paso-2); color:var(--tinta-2); max-width:50ch }
.cobertura-lista{ list-style:none; margin:var(--paso-3) 0 var(--paso-4); padding:0; display:grid; gap:.85rem }
.cobertura-lista li{ padding-left:1.6rem; position:relative; color:var(--tinta-2); font-size:.96rem }
.cobertura-lista li::before{ content:''; position:absolute; left:0; top:.42em; width:.8rem; height:.8rem;
  border-radius:3px; background:var(--azul-suave); border:1.5px solid var(--azul) }
.cobertura-lista strong{ display:block; color:var(--tinta); font-weight:800; letter-spacing:-.015em }
.cobertura-acciones{ display:flex; flex-wrap:wrap; gap:.75rem }

.cobertura-mapa{ position:relative; justify-self:center; width:100%; max-width:34rem }
.cobertura-mapa svg{ width:100%; height:auto; color:var(--azul-suave); display:block }
.cobertura-mapa svg path{ stroke:var(--azul); stroke-width:2; stroke-linejoin:round;
  vector-effect:non-scaling-stroke; paint-order:stroke fill }
.punto{ position:absolute; width:.6rem; height:.6rem; border-radius:50%; background:var(--azul) }
.punto::before{ content:''; position:absolute; inset:-.35rem; border-radius:50%;
  background:rgba(var(--azul-rgb),.28); opacity:0 }
.punto--1{ left:30%; top:22% } .punto--2{ left:66%; top:31% } .punto--3{ left:47%; top:47% }
.punto--4{ left:26%; top:73% } .punto--5{ left:78%; top:56% }
.punto::after{ content:''; position:absolute; inset:-.35rem; border-radius:50%;
  border:1.5px solid rgba(var(--azul-rgb),.45) }
@media (prefers-reduced-motion:no-preference){
  /* Cinco pseudoelementos: el will-change va donde está el latido. */
  .punto::before{ will-change:transform,opacity; animation:latir 3.4s ease-out infinite }
  .punto--2::before{ animation-delay:.6s } .punto--3::before{ animation-delay:1.2s }
  .punto--4::before{ animation-delay:1.8s } .punto--5::before{ animation-delay:2.4s }
  @keyframes latir{
    0%{ transform:scale(.5); opacity:.9 }
    70%,100%{ transform:scale(2.6); opacity:0 } }
}

/* ── Burbuja de chat ─────────────────────────────────────── */
.chat{ position:fixed; z-index:45; right:1.1rem; bottom:1.1rem; display:flex; align-items:center; gap:.6rem }
.chat-boton{ display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%;
  background:var(--verde-wa-2); color:var(--papel); text-decoration:none; flex:none;
  box-shadow:0 8px 26px rgba(var(--tinta-rgb),.3); transition:transform .25s cubic-bezier(.2,.7,.3,1) }
.chat-boton svg{ width:1.9rem; height:1.9rem }
.chat-boton:hover{ transform:scale(1.07) }
.chat-globo{ background:var(--papel); color:var(--tinta); border:1px solid var(--linea);
  border-radius:100px; padding:.6rem 1rem; font-size:.9rem; font-weight:600; white-space:nowrap;
  box-shadow:0 8px 24px rgba(var(--tinta-rgb),.14);
  opacity:0; transform:translateX(.6rem) scale(.96); transform-origin:right center;
  pointer-events:none; transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1) }
.chat:hover .chat-globo, .chat:focus-within .chat-globo, .chat.abierto .chat-globo{
  opacity:1; transform:none }
@media (max-width:32rem){ .chat-globo{ display:none } }

/* ── Página de contacto ──────────────────────────────────── */
.canales{ padding-block:clamp(6rem,13vw,8rem) clamp(3.5rem,9vw,6rem) }
.canales h1{ font-size:clamp(1.9rem,1.4rem + 2.6vw,3rem); margin-bottom:var(--paso-2) }
.canales-intro{ color:var(--tinta-2); max-width:46ch; margin-bottom:var(--paso-4) }
.canal-lista{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem }
.canal a{ display:flex; align-items:center; gap:1.1rem; text-decoration:none;
  padding:clamp(1.1rem,2.6vw,1.5rem); background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease }
.canal a:hover{ border-color:rgba(var(--azul-rgb),.5); transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(var(--tinta-rgb),.1) }
.canal-ico{ display:grid; place-items:center; width:3rem; height:3rem; flex:none;
  border-radius:10px; background:var(--azul-suave); color:var(--azul) }
.canal-ico svg{ width:1.6rem; height:1.6rem }
.canal--wa .canal-ico{ background:rgba(37,211,102,.14); color:var(--verde-wa-2) }
.canal-txt{ display:flex; flex-direction:column; gap:.1rem; flex:1 }
.canal-txt strong{ font-size:1.08rem; letter-spacing:-.015em }
.canal-dato{ color:var(--azul); font-weight:600; font-size:.95rem }
.canal--wa .canal-dato{ color:var(--verde-wa-2) }
.canal-nota{ color:var(--tinta-3); font-size:.88rem; margin-top:.15rem }
.canal-flecha{ color:var(--tinta-3); font-size:1.2rem; flex:none }
.canales-pie{ margin-top:var(--paso-4); padding-top:var(--paso-3);
  border-top:1px solid var(--linea); color:var(--tinta-3); font-size:.93rem }
.canales-pie strong{ color:var(--tinta-2) }

/* ── Página de privacidad ────────────────────────────────────
   Rediseñada el 09/08/2026. Antes era un h1 seguido de texto corrido: correcto
   pero indistinguible de un documento pegado. Una política de privacidad es de
   las pocas páginas a las que el visitante llega desconfiando —quiere saber qué
   se hace con su teléfono antes de darlo—, así que tiene que leerse como algo
   cuidado. Índice fijo al lado, apartados en tarjetas numeradas y tablas con
   contenedor propio. Ningún color nuevo: todo sale de :root. */

.legal{ background:var(--hueso); padding-bottom:clamp(3.5rem,9vw,6rem) }

/* Cabecera de la página */
.legal-cab{ position:relative; overflow:hidden; background:var(--hueso-2);
  border-bottom:1px solid var(--linea);
  padding-block:clamp(6rem,13vw,8.5rem) clamp(2.2rem,5vw,3.2rem) }
/* Filete inferior: el ámbar como superficie, nunca como texto. */
.legal-cab::after{ content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--ambar) 0 16%, var(--azul) 16% 100%) }
.legal-cab h1{ font-size:clamp(2rem,1.4rem + 2.8vw,3.2rem); margin-bottom:var(--paso-2) }
.legal-entradilla{ color:var(--tinta-2); max-width:48ch;
  font-size:clamp(1.02rem,.98rem + .3vw,1.15rem) }
.legal-meta{ list-style:none; margin:var(--paso-3) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem }
.legal-meta li{ display:flex; align-items:center; font-size:.84rem; color:var(--tinta-2);
  background:var(--papel); border:1px solid var(--linea); border-radius:100px;
  padding:.35rem .9rem; min-height:24px }
.legal-meta strong{ color:var(--tinta); font-weight:800 }
.legal-meta--ok::before{ content:'✓'; color:var(--verde-wa-2); font-weight:800;
  margin-inline-end:.4rem }

/* Cuerpo: índice a un lado, apartados al otro */
.legal-cuerpo{ display:grid; gap:clamp(1.4rem,4vw,2.2rem);
  padding-top:clamp(1.8rem,5vw,2.8rem); align-items:start }
/* min-width:0 obligatorio. Los hijos de una rejilla llevan min-width:auto, que
   les impide encoger por debajo de su contenido: el índice se plantaba en 529 px
   dentro de una ventana de 375 y desbordaba la página. Lo tapaba el
   overflow-x:hidden del body, así que solo se veía midiendo scrollWidth. */
.legal-cuerpo > *{ min-width:0 }
.indice a{ min-width:0 }
.indice a > span:not(.indice-n),
.indice a{ overflow-wrap:anywhere }
@media (min-width:64rem){
  .legal-cuerpo{ grid-template-columns:17rem minmax(0,1fr); gap:clamp(2rem,4vw,3rem) }
}

.indice-caja{ background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:1.1rem 1rem }
/* Fijo mientras se lee: doce apartados son muchos para tener que volver arriba. */
@media (min-width:64rem){ .indice-caja{ position:sticky; top:5.5rem } }
.indice-t{ font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:.65rem }
.indice{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
/* flex-start y no center: en los apartados que ocupan dos o tres líneas, el
   número quedaba centrado a media altura en vez de alineado con la primera. */
.indice a{ display:flex; align-items:flex-start; gap:.6rem; min-height:36px;
  padding:.35rem .5rem; border-radius:8px; text-decoration:none;
  color:var(--tinta-2); font-size:.92rem; line-height:1.35 }
.indice a:hover{ background:var(--hueso-2); color:var(--tinta) }
.indice-n{ display:grid; place-items:center; width:1.5rem; height:1.5rem; flex:none;
  border-radius:6px; background:var(--hueso-2); color:var(--azul-2);
  font-size:.72rem; font-weight:800; font-variant-numeric:tabular-nums }
.indice a:hover .indice-n{ background:var(--azul-suave) }

/* Resumen destacado */
.resumen{ position:relative; overflow:hidden; background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.4rem,3vw,2.1rem);
  box-shadow:0 14px 34px rgba(var(--tinta-rgb),.07) }
.resumen::before{ content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--ambar) }
.resumen h2{ font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:.9rem; line-height:1.4 }
.resumen ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem }
.resumen li{ position:relative; padding-left:1.6rem; color:var(--tinta-2); font-size:.97rem }
.resumen li::before{ content:''; position:absolute; left:.1rem; top:.55em;
  width:.55rem; height:.55rem; border-radius:2px; background:var(--ambar) }
.resumen strong{ color:var(--tinta); font-weight:800 }

/* Cada apartado, una tarjeta numerada */
.bloque{ margin-top:clamp(1.1rem,2.6vw,1.7rem); background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.3rem,3vw,2rem) clamp(1.4rem,3vw,2.2rem);
  /* para que el ancla no quede debajo de la cabecera fija */
  scroll-margin-top:6rem }
.bloque-cab{ display:flex; align-items:center; gap:.85rem;
  padding-bottom:.9rem; margin-bottom:var(--paso-2); border-bottom:1px solid var(--linea) }
.bloque-n{ display:grid; place-items:center; width:2.1rem; height:2.1rem; flex:none;
  border-radius:9px; background:var(--azul-suave); color:var(--azul-2);
  font-weight:800; font-size:.95rem; font-variant-numeric:tabular-nums }
.bloque h2{ font-size:clamp(1.1rem,1rem + .6vw,1.4rem); letter-spacing:-.02em; line-height:1.2 }
.bloque h3{ font-size:.98rem; font-weight:800; color:var(--tinta);
  margin-top:var(--paso-3); margin-bottom:.35rem }
.bloque p{ color:var(--tinta-2); max-width:68ch }
.bloque p + p{ margin-top:.85rem }
.bloque ul{ list-style:none; margin:.75rem 0 0; padding:0; display:grid; gap:.6rem }
.bloque ul li{ position:relative; padding-left:1.35rem; color:var(--tinta-2); max-width:68ch }
.bloque ul li::before{ content:''; position:absolute; left:.15rem; top:.6em;
  width:.4rem; height:.4rem; border-radius:50%; background:var(--azul) }
.bloque strong{ color:var(--tinta); font-weight:700 }
.bloque a{ color:var(--azul-2); text-decoration:none;
  border-bottom:1px solid rgba(var(--azul-rgb),.35) }
.bloque a:hover{ border-bottom-color:var(--azul-2) }

/* Tablas */
.tabla-envoltura{ overflow-x:auto; margin-top:var(--paso-3);
  border:1px solid var(--linea); border-radius:10px }
.legal table{ border-collapse:collapse; width:100%; min-width:30rem; font-size:.92rem }
.legal thead th{ background:var(--hueso); color:var(--tinta); font-weight:800;
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap }
.legal th, .legal td{ text-align:left; padding:.75rem .95rem; vertical-align:top;
  border-bottom:1px solid var(--linea); color:var(--tinta-2) }
.legal tbody th{ color:var(--tinta); font-weight:700; white-space:nowrap }
.legal tbody tr:nth-child(even) th,
.legal tbody tr:nth-child(even) td{ background:rgba(var(--hueso-2-rgb),.6) }
.legal tbody tr:last-child th,
.legal tbody tr:last-child td{ border-bottom:0 }
/* Los enlaces de una celda son su único contenido: no les aplica la excepción
   de enlace dentro de texto de WCAG 2.5.8 y necesitan 24 px. */
.legal td a{ display:inline-flex; align-items:center; min-height:24px;
  color:var(--azul-2); text-decoration:none; border-bottom:1px solid rgba(var(--azul-rgb),.35) }

/* Cierre de la página */
.legal-pie{ margin-top:clamp(1.6rem,4vw,2.4rem); padding-top:var(--paso-3);
  border-top:1px solid var(--linea); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:var(--paso-2) var(--paso-3) }
.legal-pie p{ color:var(--tinta-3); font-size:.92rem }
.legal-pie a:not(.boton){ display:inline-flex; align-items:center; min-height:24px;
  color:var(--azul-2); text-decoration:none; border-bottom:1px solid rgba(var(--azul-rgb),.35) }