/* LA WEB PÚBLICA DE BILDEIT (portada, páginas legales y 404).

   Es la propuesta aprobada (docs/web-propuesta/bildeit-web-ligera.html) pasada a su archivo, con
   todos los colores, tamaños de letra, espacios y radios como tokens de assets/css/tokens.css
   (sección «LA WEB PÚBLICA», --w-…), porque tests/diseno.test.js no deja escribirlos a mano aquí.
   Cambios sobre la propuesta: la entrada va solo con CSS (si el JS no carga, la página se ve),
   «aparecer al bajar» solo se activa cuando portada.js vigila, el día del calendario va en el
   acento (contraste AA), y no hay estilos en línea (la política de seguridad de _headers los
   bloquea). El panel NO carga este archivo. */

html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--w-e-76) + var(--seguro-arriba))}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--w-papel);color:var(--w-tinta);font-family:var(--w-sans);font-size:var(--w-t-17);font-weight:350;letter-spacing:-.01em;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--marca-naranja);outline-offset:3px;border-radius:var(--w-r-4)}
.envoltura{max-width:var(--w-ancho);margin:0 auto;padding:0 var(--w-e-28)}
.cifra{font-variant-numeric:tabular-nums}

/* ---------- Cabecera (como Plentia: suelta arriba, cápsula al bajar) ---------- */
.cabecera{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(var(--seguro-arriba) + var(--w-e-12)) var(--w-e-12) 0;pointer-events:none}
/* ---------- La cabecera (encargo del 08/10/2026, bloque 4): como la de Plentia, en cristal blanco ----------
   Cápsula siempre de cristal (blanco al 84 %, desenfoque fuerte), filo fino, reflejo arriba y sombra
   suave; los desplegables, del mismo cristal con un punto cálido. Enlaces de 36 px y 15 px; la sección
   en la que estás, como una tecla. Ningún hijo fijo dentro de la cápsula (el desenfoque lo rompería). */
.cab-barra{pointer-events:auto;position:relative;z-index:0;max-width:calc(var(--w-ancho) + 24px);margin:0 auto;display:flex;align-items:center;gap:var(--w-e-20);height:var(--cab-alto);padding:0 var(--w-e-10) 0 var(--w-e-20);border-radius:var(--w-r-18);transition:max-width var(--w-dur) var(--w-curva)}
/* el cristal va en una capa aparte: si lo llevara la propia cápsula, sus desplegables solo podrían
   difuminar lo que hay dentro de ella (no la página) y se leería el texto de detrás */
.cab-barra::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cab-cristal);-webkit-backdrop-filter:var(--cab-desenfoque);backdrop-filter:var(--cab-desenfoque);box-shadow:inset 0 0 0 1px var(--cab-filo),inset 0 1px 0 var(--cab-reflejo),var(--cab-sombra);transition:box-shadow var(--w-dur) var(--w-curva)}
.cabecera.flotante .cab-barra{max-width:1080px}
.cabecera.flotante .cab-barra::before{box-shadow:inset 0 0 0 1px var(--cab-filo),inset 0 1px 0 var(--cab-reflejo),var(--cab-sombra-baja)}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav > a,.desplegar{font:inherit;font-size:var(--menu-letra);font-weight:500;letter-spacing:-.01em;color:var(--w-tinta-2);background:none;border:0;height:36px;padding:0 var(--w-e-12);border-radius:var(--boton-radio);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:var(--w-e-6);transition:background-color var(--w-dur-corta) var(--w-curva),color var(--w-dur-corta) var(--w-curva)}
@media (hover:hover){.nav > a:hover,.desplegar:hover{color:var(--w-tinta);background:var(--w-hover-nav)}}
.desplegar[aria-expanded="true"]{color:var(--w-tinta);background:var(--w-hover-nav)}
.nav > a.activa,.nav > a[aria-current],.nav .desplegar.activa{color:var(--w-tinta);background:var(--cab-tecla);box-shadow:inset 0 0 0 1px var(--cab-filo),inset 0 1px 0 var(--cab-reflejo),0 1px 2px var(--cab-tecla-sombra)}
.desplegar svg{width:12px;height:12px;transition:transform var(--w-dur-corta) var(--w-curva)}
.desplegar[aria-expanded="true"] svg{transform:rotate(180deg)}
.grupo{position:relative}
.menu{position:absolute;top:calc(100% + 12px);left:0;min-width:300px;background:var(--cab-cristal-calido);-webkit-backdrop-filter:var(--cab-desenfoque);backdrop-filter:var(--cab-desenfoque);border-radius:var(--w-r-14);box-shadow:inset 0 0 0 1px var(--cab-filo),inset 0 1px 0 var(--cab-reflejo),var(--cab-sombra-menu);padding:var(--w-e-6);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity var(--w-dur-corta) var(--w-curva),transform var(--w-dur-corta) var(--w-curva),visibility var(--w-dur-corta)}
.menu.abierto{opacity:1;visibility:visible;transform:none}
.menu a{display:block;padding:var(--w-e-10) var(--w-e-12);border-radius:var(--w-r-10);text-decoration:none;color:var(--w-tinta);font-size:var(--menu-letra)}
@media (hover:hover){.menu a:hover{background:var(--w-hover-nav)}}
.menu a:focus-visible{background:var(--w-hover-nav)}
.menu a.activa,.menu a[aria-current="true"],.menu a[aria-current="page"]{background:var(--w-hover-nav)}
.menu a strong{display:block;font-size:var(--menu-letra);font-weight:500;color:var(--w-tinta)}
.menu a span{display:block;font-size:var(--w-t-13-5);color:var(--w-tinta-3);line-height:1.4;margin-top:2px}
.menu .nota-menu{font-size:var(--w-t-13);color:var(--w-tinta-3);padding:var(--w-e-6) var(--w-e-12) var(--w-e-4);margin:0}
.menu-idioma{left:auto;right:0;min-width:180px;transform-origin:top right}
.menu-idioma a[aria-current]{font-weight:600}
.acciones{display:flex;align-items:center;gap:var(--w-e-4);margin-left:auto}
.icono-cab{width:var(--boton-alto-cabecera);height:var(--boton-alto-cabecera);padding:0;justify-content:center;color:var(--w-tinta-2);display:inline-flex;align-items:center;border-radius:var(--boton-radio);background:none;border:0;cursor:pointer}
.icono-cab svg{width:20px;height:20px}
@media (hover:hover){.icono-cab:hover{color:var(--w-tinta);background:var(--w-hover-nav)}}
.acciones .boton{margin-left:var(--w-e-6)}
.hamburguesa{display:none;flex:none;background:var(--w-tinta);border:0;border-radius:var(--boton-radio);width:var(--boton-alto-cabecera);height:var(--boton-alto-cabecera);cursor:pointer;align-items:center;justify-content:center}
.hamburguesa span{display:block;width:16px;height:2px;background:var(--w-blanco);position:relative;border-radius:2px}
.hamburguesa span::before,.hamburguesa span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--w-blanco);border-radius:2px;transition:transform var(--w-dur-corta) var(--w-curva)}
.hamburguesa span::before{top:-5px}.hamburguesa span::after{top:5px}
.hamburguesa[aria-expanded="true"] span{background:transparent}
.hamburguesa[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
.solo-movil{display:none}
.movil{display:none}
.marca{display:inline-flex;align-items:center;color:var(--w-tinta);text-decoration:none;flex:none}
.marca svg{height:22px;width:auto;display:block}
.menu.idioma{left:auto;right:0;min-width:220px}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
/* ---------- Los dos botones (encargo del 08/10/2026, bloque 3): UNA regla para toda la web ----------
   Medidas de la web de Plentia: normal 44 px y 15 px; grande 48 px y 16 px; en la cabecera 38 px y 14 px.
   Principal: naranja con brillo; al pasar o pulsar, blanco con texto y borde naranja.
   Secundario: blanco, borde gris, texto negro; al pasar o pulsar, naranja con texto blanco. */
.boton{font:inherit;font-size:var(--boton-letra);font-weight:var(--boton-peso);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--w-e-8);height:var(--boton-alto);padding:var(--boton-relleno);border-radius:var(--boton-radio);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform var(--w-dur-corta) var(--w-curva),box-shadow var(--w-dur-corta) var(--w-curva),background-color var(--w-dur-corta) var(--w-curva),color var(--w-dur-corta) var(--w-curva),border-color var(--w-dur-corta) var(--w-curva)}
.boton.grande{height:var(--boton-alto-grande);font-size:var(--boton-letra-grande);padding:var(--boton-relleno)}
.boton.principal{color:var(--w-blanco);border-color:var(--boton-hondo);background-color:var(--boton-abajo);background-image:radial-gradient(var(--boton-puntos) var(--boton-punto),transparent var(--boton-punto-fin)),linear-gradient(180deg,var(--boton-arriba),var(--boton-abajo));background-size:var(--boton-trama) var(--boton-trama),100% 100%;box-shadow:inset 0 1px 0 var(--boton-reflejo),inset 0 -1px 0 var(--boton-canto),0 0 0 1px var(--boton-borde),var(--boton-halo-cerca) var(--boton-halo),var(--boton-halo-lejos) var(--boton-halo)}
.boton.secundario,.boton.oscuro{color:var(--boton-sec-texto);background:var(--boton-sec-fondo);border-color:var(--boton-sec-borde)}
@media (hover:hover){
  .boton.principal:hover{background-color:var(--w-blanco);background-image:none;color:var(--w-marca);border-color:var(--w-marca);box-shadow:none}
  .boton.secundario:hover,.boton.oscuro:hover{background:var(--w-marca);color:var(--w-blanco);border-color:var(--w-marca)}
}
.boton.principal:active{background-color:var(--w-blanco);background-image:none;color:var(--w-marca);border-color:var(--w-marca);box-shadow:none;transform:translateY(1px)}
.boton.secundario:active,.boton.oscuro:active{background:var(--w-marca);color:var(--w-blanco);border-color:var(--w-marca);transform:translateY(1px)}
.cabecera .boton{height:var(--boton-alto-cabecera);font-size:var(--boton-letra-cabecera);padding:var(--boton-relleno-estrecho)}
@media (prefers-reduced-motion:reduce){.boton{transition:none}}
/* El botón principal, igual en la web y en el panel (07/10/2026, punto 6.2): al pasar el ratón, fondo
   blanco con el texto y el borde en el naranja de la marca; en el móvil, lo mismo mientras se pulsa. */
.boton.texto{background:none;color:var(--w-tinta-2);padding:0 var(--w-e-10)}
.boton.texto:hover{color:var(--w-tinta)}

@media (max-width: 920px){
  /* en el móvil: la palabra, «Pide una demo» y el menú, todo a 38 px */
  .nav,.acciones{display:none}
  .cab-barra{gap:var(--w-e-8);padding:0 var(--w-e-8) 0 var(--w-e-16);height:var(--cab-alto-movil)}
  .solo-movil{display:inline-flex;margin-left:auto}
  .hamburguesa{display:inline-flex}
  /* el menú: el mismo cristal cálido, agrupado, con textos de 15 px; se cierra al tocar fuera */
  .movil{display:block;position:fixed;left:12px;right:12px;top:calc(var(--seguro-arriba) + var(--cab-alto-movil) + 22px);z-index:49;background:var(--cab-cristal-calido);-webkit-backdrop-filter:var(--cab-desenfoque);backdrop-filter:var(--cab-desenfoque);border-radius:var(--w-r-18);box-shadow:inset 0 0 0 1px var(--cab-filo),inset 0 1px 0 var(--cab-reflejo),var(--cab-sombra-menu);padding:var(--w-e-8) var(--w-e-8) var(--w-e-12);max-height:calc(100% - 110px - var(--seguro-arriba) - var(--seguro-abajo));overflow:auto;transform:translateY(-8px) scale(.98);transform-origin:top center;opacity:0;visibility:hidden;transition:opacity var(--w-dur-corta) var(--w-curva),transform var(--w-dur-corta) var(--w-curva),visibility var(--w-dur-corta)}
  .movil.abierto{transform:none;opacity:1;visibility:visible}
  .movil .movil-titulo{font-size:var(--w-t-13);color:var(--w-tinta-3);font-weight:500;margin:var(--w-e-8) var(--w-e-12) var(--w-e-4)}
  .movil > a{display:flex;align-items:center;min-height:44px;padding:0 var(--w-e-12);border-radius:var(--w-r-10);text-decoration:none;font-size:var(--menu-letra);font-weight:500;color:var(--w-tinta)}
  .movil > a:active,.movil > a.activa,.movil > a[aria-current]{background:var(--w-hover-nav)}
  .movil .movil-separa{height:1px;background:var(--cab-filo);margin:var(--w-e-6) var(--w-e-12)}
  .movil .movil-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--w-e-10);margin:var(--w-e-10) var(--w-e-4) 0;padding-top:var(--w-e-12);border-top:1px solid var(--cab-filo)}
  .movil .idiomas{display:flex;gap:2px;padding:3px;border-radius:var(--boton-radio);background:var(--w-hover-nav)}
  .movil .idiomas a{border-radius:var(--w-r-9);padding:var(--w-e-6) var(--w-e-12);font-size:var(--menu-letra);text-decoration:none;color:var(--w-tinta-2)}
  .movil .idiomas a[aria-current]{background:var(--w-blanco);color:var(--w-tinta);font-weight:600;box-shadow:inset 0 0 0 1px var(--cab-filo)}
}

/* ---------- Entrada (como Opereit), solo con CSS: el logo letra a letra y el titular palabra a
   palabra, en menos de un segundo. La primera vez por sesión sale la cortina con el logo
   (sitio-arranque.js pone .sin-intro las demás veces). Si el JS no carga, todo se ve igual. ---------- */
:root{--inicio:.46s}
.sin-intro{--inicio:.06s}
.intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:radial-gradient(90% 60% at 50% 40%,var(--w-intro-brillo) 0%,var(--w-blanco) 70%);pointer-events:none;animation:intro-fuera var(--w-dur-corta) var(--w-curva) .4s forwards}
.sin-intro .intro{display:none}
.intro svg{width:min(260px,58vw);height:auto;color:var(--w-tinta);overflow:visible}
.intro .letra{transform-box:fill-box;opacity:0;transform:translateY(260px);filter:blur(10px);animation:letra .3s var(--w-curva) forwards;animation-delay:calc(var(--i) * 25ms)}
.intro .l1{--i:1}.intro .l2{--i:2}.intro .l3{--i:3}.intro .l4{--i:4}.intro .l5{--i:5}.intro .l6{--i:6}.intro .l0{--i:0}
@keyframes letra{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-fuera{to{opacity:0;visibility:hidden}}
@keyframes subir{from{opacity:0;filter:blur(12px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes subir-suave{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes subir-demo{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
/* «backwards» y no «both»: una animación que se queda aplicada convierte la cabecera en la raíz del
   desenfoque y sus desplegables ya no difuminarían la página */
.con-intro .cabecera{animation:aparecer var(--w-dur) var(--w-curva) var(--inicio) backwards}
.con-intro .palabra-h{display:inline-block;animation:subir var(--w-dur) var(--w-curva) both;animation-delay:calc(var(--inicio) + var(--d,0) * 30ms)}
.palabra-h.p1{--d:1}.palabra-h.p2{--d:2}.palabra-h.p3{--d:3}.palabra-h.p4{--d:4}.palabra-h.p5{--d:5}.palabra-h.p6{--d:6}.palabra-h.p7{--d:7}.palabra-h.p8{--d:8}
.con-intro .aparece{animation:subir-suave var(--w-dur) var(--w-curva) both;animation-delay:var(--inicio)}
.con-intro .aparece.d1{animation-delay:calc(var(--inicio) + 120ms)}
.con-intro .aparece.d2{animation-delay:calc(var(--inicio) + 160ms)}
.con-intro .aparece.d3{animation-delay:calc(var(--inicio) + 200ms)}
.con-intro .escaparate{animation:subir-demo var(--w-dur-larga) var(--w-curva) both;animation-delay:calc(var(--inicio) + 200ms)}
@media (prefers-reduced-motion: reduce){
  .intro{display:none}
  .con-intro .cabecera,.con-intro .palabra-h,.con-intro .aparece,.con-intro .escaparate{animation:none}
}
/* ---------- Secciones ---------- */
section{padding:var(--w-e-112) 0;position:relative}
section.gris{background:var(--w-hormigon)}
.cab-seccion{max-width:760px;margin-bottom:var(--w-e-56)}
.cab-seccion.centro{margin-left:auto;margin-right:auto;text-align:center}
.antetitulo{display:inline-flex;align-items:center;gap:var(--w-e-8);font-size:var(--w-t-14);font-weight:500;color:var(--w-naranja-oscuro);margin:0 0 var(--w-e-14)}
.antetitulo::before{content:"";width:6px;height:6px;border-radius:var(--w-r-circulo);background:var(--marca-naranja)}
h2.titulo{font-size:var(--w-t-h2);line-height:1.2;letter-spacing:-.05em;font-weight:400;margin:0 0 16px;text-wrap:balance}
.cab-seccion > p{font-size:var(--w-t-18-5);color:var(--w-tinta-2);margin:0;text-wrap:pretty}

/* widget base */
.widget{background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-18);box-shadow:0 1px 2px var(--w-sombra-widget-1),0 24px 48px -32px var(--w-sombra-widget-2);overflow:hidden}
.widget-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--w-e-12);padding:var(--w-e-14) var(--w-e-18);border-bottom:1px solid var(--w-linea);font-size:var(--w-t-13-5)}
.widget-cab strong{font-weight:600;font-size:var(--w-t-14)}
.widget-cab .gris-t{color:var(--w-tinta-3)}
.widget-cuerpo{padding:var(--w-e-18)}
.chip{display:inline-flex;align-items:center;gap:var(--w-e-6);font-size:var(--w-t-12-5);font-weight:500;padding:3px var(--w-e-9);border-radius:var(--w-r-999);border:1px solid var(--w-linea-fuerte);color:var(--w-tinta-2);background:var(--w-papel);white-space:nowrap}
.chip.vivo{color:var(--w-verde);border-color:var(--w-verde-borde);background:var(--w-verde-suave)}
.chip.vivo::before{content:"";width:6px;height:6px;border-radius:var(--w-r-circulo);background:var(--w-verde);box-shadow:0 0 0 3px var(--w-halo-verde)}
.chip.naranja{color:var(--w-naranja-oscuro);border-color:var(--w-naranja-borde);background:var(--w-naranja-suave)}
.chip.punto::before{content:"";width:6px;height:6px;border-radius:var(--w-r-circulo);background:currentColor}
.mono{font-family:var(--w-mono);font-variant-numeric:tabular-nums}
/* Aparecer al bajar: solo si portada.js está vigilando (si el JS no carga, todo se ve igual). */
.vigila .revela{opacity:0;transform:translateY(16px);transition:opacity var(--w-dur-larga) var(--w-curva),transform var(--w-dur-larga) var(--w-curva)}
.vigila .revela.visto{opacity:1;transform:none}
.revela.d90{transition-delay:90ms}
.revela.d180{transition-delay:180ms}
.fuente{font-size:var(--w-t-13);color:var(--w-tinta-3)}
.fuente a{color:var(--w-tinta-3)}
.marcas{list-style:none;margin:0;padding:0;display:grid;gap:var(--w-e-12)}
.marcas li{display:flex;gap:var(--w-e-12);font-size:16px;color:var(--w-tinta)}
.marcas li::before{content:"";flex:none;width:20px;height:20px;border-radius:var(--w-r-6);margin-top:2px;background:var(--w-naranja-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23B8401D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.tabla{width:100%;border-collapse:collapse;font-size:var(--w-t-14)}
.tabla th{text-align:left;font-weight:500;color:var(--w-tinta-3);font-size:var(--w-t-12-5);padding:var(--w-e-10) var(--w-e-14);background:var(--w-hormigon);border-bottom:1px solid var(--w-linea)}
.tabla td{padding:var(--w-e-11) var(--w-e-14);border-bottom:1px solid var(--w-linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla .der{text-align:right;font-family:var(--w-mono);font-size:var(--w-t-13-5);white-space:nowrap}
.tabla tfoot td{font-weight:600;background:var(--w-gris-claro);border-top:1px solid var(--w-linea)}
.si,.no,.parte{display:inline-flex;width:24px;height:24px;border-radius:var(--w-r-7);align-items:center;justify-content:center}
.si{background:var(--w-verde-suave);color:var(--w-verde)}
.no{background:var(--w-hormigon);color:var(--w-tinta-3)}
.parte{background:var(--w-naranja-suave);color:var(--w-naranja-oscuro);width:auto;padding:0 var(--w-e-8);font-size:var(--w-t-12);font-weight:500}
.si svg,.no svg{width:13px;height:13px}
.ver-tabla{margin-top:var(--w-e-18)}
/* preguntas */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--w-e-72);align-items:start}
.faq .cab-seccion{position:sticky;top:110px;margin:0}

/* contacto */
.contacto{background:var(--w-tinta);color:var(--w-blanco);overflow:hidden}
.contacto::before{content:"";position:absolute;width:720px;height:720px;right:-220px;top:-260px;background:radial-gradient(circle,var(--w-resplandor) 0%,var(--w-resplandor-0) 62%);pointer-events:none}
.contacto .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:var(--w-e-72);align-items:center;position:relative}
/* ---------- Preguntas y «Ver la comparación completa» (encargo del 08/10/2026, punto 6) ----------
   Un acordeón propio, no <details>: el botón dice si está abierto (aria-expanded) y la región anima su
   altura con grid-template-rows de 0fr a 1fr, que Safari mueve igual de suave que Chromium. El radio y el
   overflow oculto van en la caja de fuera, así que las esquinas no se pierden nunca, ni a mitad del
   movimiento. Sin JavaScript, todo abierto. Con «reducir movimiento», sin animación. */
.acordeon-titulo{margin:0;font:inherit}
.acordeon-boton{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--w-e-16);width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.acordeon-boton:focus-visible{outline:2px solid var(--marca-naranja);outline-offset:2px;border-radius:var(--w-r-12)}
.acordeon-panel{display:grid;grid-template-rows:1fr}
.acordeon-dentro{min-height:0;overflow:hidden}
.js .acordeon-panel{grid-template-rows:0fr;transition:grid-template-rows var(--w-dur) var(--w-curva)}
.js .acordeon-dentro{visibility:hidden;transition:visibility 0s linear var(--w-dur)}
.js .acordeon.abierta .acordeon-panel{grid-template-rows:1fr}
.js .acordeon.abierta .acordeon-dentro{visibility:visible;transition-delay:0s}
.pregunta{border-radius:var(--w-r-16);background:var(--w-hormigon);overflow:hidden;margin-bottom:var(--w-e-10);isolation:isolate}
.pregunta .acordeon-boton{padding:var(--w-e-20) var(--w-e-20) var(--w-e-20) var(--w-e-22);font-size:var(--w-t-17);font-weight:500;line-height:1.35;color:var(--w-tinta)}
.pregunta .mas{flex:none;width:26px;height:26px;border-radius:var(--w-r-8);background:var(--w-papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' fill='none' stroke='%23151515' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform var(--w-dur) var(--w-curva)}
.pregunta.abierta .mas{transform:rotate(45deg)}
.pregunta .respuesta p{margin:0;padding:0 var(--w-e-22) var(--w-e-20);color:var(--w-tinta-2);font-size:var(--w-t-16);max-width:62ch}
.ver-tabla .acordeon-boton{display:inline-flex;width:auto;justify-content:flex-start;gap:var(--w-e-8);font-weight:600;font-size:var(--w-t-15);padding:var(--w-e-10) 0}
.ver-tabla .mas{width:8px;height:8px;border-right:2px solid var(--w-tinta);border-bottom:2px solid var(--w-tinta);transform:rotate(45deg) translateY(-2px);transition:transform var(--w-dur) var(--w-curva)}
.ver-tabla.abierta .mas{transform:rotate(-135deg)}
@media (prefers-reduced-motion: reduce){.js .acordeon-panel,.js .acordeon-dentro,.pregunta .mas,.ver-tabla .mas{transition:none}}
.contacto h2{font-size:var(--w-t-clamp-5);line-height:1.04;letter-spacing:-.04em;font-weight:500;margin:0 0 16px}
.contacto .entr{color:var(--w-tinta-sobre-oscuro);font-size:var(--w-t-18);margin:0 0 var(--w-e-26);max-width:28em}
.contacto .marcas li{color:var(--w-blanco)}
.contacto .marcas li::before{background-color:var(--w-blanco-10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FF9D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.formulario{background:var(--w-papel);color:var(--w-tinta);border-radius:var(--w-r-22);padding:var(--w-e-28);display:grid;gap:var(--w-e-14);box-shadow:0 40px 80px -40px var(--w-sombra-formulario)}
.formulario h3{margin:0 0 2px;font-size:var(--w-t-20);font-weight:600;letter-spacing:-.02em}
.formulario .doble{display:grid;grid-template-columns:1fr 1fr;gap:var(--w-e-12)}
.formulario label{display:grid;gap:var(--w-e-6);font-size:var(--w-t-13-5);font-weight:500;color:var(--w-tinta-2)}
.formulario input,.formulario select,.formulario textarea{font:inherit;font-size:var(--w-t-15);color:var(--w-tinta);border:1px solid var(--w-linea-fuerte);border-radius:var(--w-r-11);padding:var(--w-e-11) var(--w-e-12);background:var(--w-blanco);width:100%}
.formulario textarea{min-height:84px;resize:vertical}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:2px solid var(--marca-naranja);outline-offset:1px;border-color:transparent}
.formulario .legal{font-size:var(--w-t-12-5);color:var(--w-tinta-3);margin:0}
.formulario .ok{display:none;font-size:var(--w-t-14);color:var(--w-verde);background:var(--w-verde-suave);border:1px solid var(--w-verde-borde);border-radius:var(--w-r-10);padding:var(--w-e-10) var(--w-e-12)}
.formulario.enviado .ok{display:block}

/* pie */
.pie{padding:var(--w-e-72) 0 0;font-size:var(--w-t-15);overflow:hidden}
.pie-arriba{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--w-e-36)}
.pie-arriba .pie-titulo{font-size:var(--w-t-13-5);color:var(--w-tinta-3);font-weight:500;margin:0 0 var(--w-e-14)}
.pie-arriba a{display:block;text-decoration:none;color:var(--w-tinta-2);padding:var(--w-e-5) 0}
.pie-arriba a:hover{color:var(--w-tinta)}
.pie-arriba a[aria-current],.pie-arriba a.activa{color:var(--w-tinta);font-weight:500}
.pie-arriba a[aria-current]::before,.pie-arriba a.activa::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--w-r-circulo);background:var(--marca-naranja);margin-right:var(--w-e-8);vertical-align:middle}
.pie-marca svg{height:22px;width:auto;color:var(--w-tinta)}
.pie-marca p{color:var(--w-tinta-2);font-size:var(--w-t-15);max-width:26ch;margin:16px 0 var(--w-e-20)}
.pie-legal{margin-top:var(--w-e-56);padding:var(--w-e-22) 0;border-top:1px solid var(--w-linea);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--w-tinta-3);font-size:var(--w-t-13-5)}
.pie-gigante{color:var(--w-pie-gigante);margin:var(--w-e-12) auto var(--w-e-menos-2-2pc);line-height:0;max-width:var(--w-ancho);padding:0 var(--w-e-28)}
.pie-gigante svg{width:100%;height:auto;display:block}
/* ---------- Añadidos a la propuesta (07/10/2026) ---------- */
.saltar{position:absolute;left:var(--w-e-12);top:var(--w-e-menos-80);z-index:200;background:var(--w-tinta);color:var(--w-blanco);padding:var(--w-e-10) var(--w-e-14);border-radius:var(--w-r-10);text-decoration:none}
.saltar:focus{top:var(--w-e-12)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono,.cifra{font-family:var(--w-mono);font-variant-numeric:tabular-nums}
h1 .palabra-h{white-space:nowrap}
.pie-legal a{color:inherit}
/* el formulario */
.formulario .trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formulario .acepto{display:flex;gap:var(--w-e-10);align-items:flex-start;font-weight:400}
.formulario .acepto input{width:auto;margin-top:var(--w-e-4);accent-color:var(--marca)}
.formulario .acepto a{color:var(--w-tinta)}
.formulario [aria-invalid="true"]{border-color:var(--marca)}
.formulario .aviso-form{margin:0;font-size:var(--w-t-14)}
.formulario .aviso-form:empty{display:none}
.formulario .aviso-form.ok{color:var(--w-verde);background:var(--w-verde-suave);border:1px solid var(--w-verde-borde);border-radius:var(--w-r-10);padding:var(--w-e-10) var(--w-e-12)}
.formulario .aviso-form.mal{color:var(--w-naranja-oscuro);background:var(--w-naranja-suave);border:1px solid var(--w-naranja-borde);border-radius:var(--w-r-10);padding:var(--w-e-10) var(--w-e-12)}
.formulario.enviado .boton{opacity:.6;pointer-events:none}
.formulario button[disabled]{opacity:.6;cursor:progress}
/* las páginas legales y la 404 */
.pagina-legal,.no-encontrada{padding:calc(var(--seguro-arriba) + var(--w-e-120)) 0 var(--w-e-80)}
.estrecha{max-width:820px}
.pagina-legal h1,.no-encontrada h1{font-size:var(--w-t-clamp-3);margin:0 0 var(--w-e-12);max-width:none;text-align:left}
.pagina-legal .borrador{display:inline-block;font-size:var(--w-t-13-5);font-weight:600;color:var(--w-naranja-oscuro);background:var(--w-naranja-suave);border:1px solid var(--w-naranja-borde);border-radius:var(--w-r-999);padding:var(--w-e-4) var(--w-e-12);margin:0 0 var(--w-e-14)}
.pagina-legal .actualizada{color:var(--w-tinta-3);font-size:var(--w-t-14);margin:0 0 var(--w-e-28)}
.pagina-legal h2{font-size:var(--w-t-22);letter-spacing:-.02em;font-weight:600;margin:var(--w-e-36) 0 var(--w-e-10)}
.pagina-legal h3{font-size:var(--w-t-17);font-weight:600;margin:var(--w-e-22) 0 var(--w-e-8)}
.pagina-legal p,.pagina-legal li{color:var(--w-tinta-2)}
.pagina-legal a{color:var(--w-naranja-oscuro)}
.pagina-legal ul{padding-left:var(--w-e-22)}
.pagina-legal li{margin-bottom:var(--w-e-6)}
.pagina-legal .pendiente{background:var(--w-naranja-suave);color:var(--w-tinta);padding:0 var(--w-e-4);border-radius:var(--w-r-4)}
.pagina-legal table{width:100%;border-collapse:collapse;font-size:var(--w-t-15);margin:var(--w-e-12) 0}
.pagina-legal th{text-align:left;font-weight:600;color:var(--w-tinta);border-bottom:1px solid var(--w-linea-fuerte);padding:var(--w-e-8) var(--w-e-10)}
.pagina-legal td{border-bottom:1px solid var(--w-linea);padding:var(--w-e-8) var(--w-e-10);vertical-align:top;color:var(--w-tinta-2)}
.pagina-legal code{font-family:var(--w-mono);font-size:var(--w-t-14)}
.pagina-legal .tabla-legal{overflow-x:auto}
.no-encontrada p{color:var(--w-tinta-2)}

.sin-scroll{overflow:hidden}
.no-encontrada .botones{margin:var(--w-e-28) 0}
.casilla{min-width:0;overflow-wrap:anywhere}
.casillas{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 760px){.casillas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.si,.no{position:relative}


/* =====================================================================================
   PORTADA (encargo del 07/10/2026): el panel de verdad (la demo a 1280 px y fotos de sus
   pantallas), rótulos en minúscula, una curva y dos duraciones para todo el movimiento.
   Medidas de las referencias en docs/web-referencias.md.
   ===================================================================================== */
section{padding:var(--w-e-120) 0}
.envoltura{padding:0 var(--w-e-40)}
.envoltura.ancha{max-width:var(--w-ancho-guia)}
.cab-seccion{margin-bottom:var(--w-e-64)}
.cab-seccion > p{font-size:var(--w-t-18);line-height:1.45;letter-spacing:-.01em;max-width:34em}
.cab-seccion.centro > p{margin-left:auto;margin-right:auto}
/* Los rótulos de sección: la letra de la web, en minúscula normal y sin separar letras (punto 2.2) */
.antetitulo{font-family:var(--w-sans);font-size:var(--w-t-15);font-weight:500;text-transform:none;letter-spacing:-.01em;color:var(--w-naranja-oscuro)}

/* ---------- Portada: blanco con luz difusa del naranja de la marca ---------- */
.portada{padding:calc(var(--seguro-arriba) + var(--hero-arriba)) 0 0;position:relative;overflow:hidden;text-align:center;background:
  radial-gradient(60% 46% at 22% 8%,var(--w-luz-1) 0%,var(--w-luz-0) 100%),
  radial-gradient(54% 42% at 82% 18%,var(--w-luz-2) 0%,var(--w-luz-0) 100%),
  radial-gradient(70% 50% at 50% 70%,var(--w-luz-2) 0%,var(--w-luz-0) 100%),
  var(--w-blanco)}
.portada .texto-portada{max-width:960px;margin:0 auto;padding:0 var(--w-e-24)}
.para-quien{font-size:var(--w-t-14-5);color:var(--w-tinta-2);margin:0 0 var(--w-e-28);display:inline-flex;align-items:center;gap:var(--w-e-10);background:var(--w-cristal-2);border:1px solid var(--w-linea);border-radius:var(--w-r-999);padding:var(--w-e-7) 16px var(--w-e-7) var(--w-e-12)}
.para-quien::before{content:"";width:8px;height:8px;border-radius:var(--w-r-circulo);background:var(--marca-naranja);box-shadow:0 0 0 4px var(--w-halo-naranja)}
h1{font-size:var(--w-t-h1);line-height:1.1;letter-spacing:-.05em;font-weight:300;margin:0 auto var(--w-e-24);max-width:14ch;text-wrap:balance}
.entradilla{font-size:var(--w-t-clamp-2);line-height:1.45;letter-spacing:-.01em;color:var(--w-tinta-2);max-width:34em;margin:0 auto var(--w-e-36);text-wrap:pretty}
.botones{display:flex;flex-wrap:wrap;gap:var(--w-e-12);align-items:center}
.portada .botones{justify-content:center;flex-wrap:nowrap}
@media (max-width:420px){.portada .botones{gap:var(--w-e-8)}.portada .botones .boton{padding:var(--boton-relleno-estrecho)}}
.letra-pequena{font-size:var(--w-t-14);color:var(--w-tinta-3);margin:16px 0 0}

/* El escaparate: el panel pintado a 1280 × 800 y escalado al ancho del marco (portada.js) */
.escaparate{max-width:1240px;margin:var(--hero-hueco) auto 0;padding:0 var(--w-e-24) var(--w-e-80);position:relative}
.marco-envoltura{position:relative}
/* Inclinado sobre su borde de abajo; portada.js lleva --p de 0 a 1 al bajar (y pone .recto al final) */
@media (prefers-reduced-motion:no-preference){
  .js .marco{--p:0;transform-origin:50% 0;transform:perspective(var(--w-incl-perspectiva)) rotateX(calc(var(--w-incl-giro) * (1 - var(--p)))) translateY(calc(var(--w-incl-baja) * (1 - var(--p)))) scale(calc(var(--w-incl-escala) + (1 - var(--w-incl-escala)) * var(--p)))}
  .js .marco.recto{transform:none}
}
.marco{background:linear-gradient(180deg,var(--w-blanco) 0%,var(--w-marco-fondo) 100%);border:1px solid var(--w-linea-fuerte);border-radius:var(--w-r-22);padding:var(--w-e-12);box-shadow:0 -1px 0 var(--w-blanco) inset,0 40px 80px -40px var(--w-sombra-marco);text-align:left;will-change:transform}
.marco-barra{display:flex;align-items:center;gap:var(--w-e-7);padding:var(--w-e-4) var(--w-e-6) var(--w-e-12)}
.marco-barra i{width:10px;height:10px;border-radius:var(--w-r-circulo);background:var(--w-punto-ventana)}
.marco-barra span{margin-left:var(--w-e-12);font-size:var(--w-t-12-5);color:var(--w-tinta-3);font-family:var(--w-mono)}
.pantalla-panel{position:relative;aspect-ratio:1280/800;border-radius:var(--w-r-14);overflow:hidden;border:1px solid var(--w-linea);background:var(--w-gris-claro);cursor:pointer}
.pantalla-panel.cargada{cursor:auto}
.pantalla-panel .demo-foto{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.pantalla-panel iframe{position:absolute;left:0;top:0;width:1280px;height:800px;border:0;transform-origin:0 0;opacity:0;transition:opacity var(--w-dur) var(--w-curva);background:var(--w-gris-claro)}
.pantalla-panel.cargada iframe{opacity:1}
.demo-estado{position:absolute;left:50%;bottom:var(--w-e-24);transform:translateX(-50%);margin:0;font-size:var(--w-t-14);color:var(--w-tinta-2);background:var(--w-cristal);border:1px solid var(--w-linea);border-radius:var(--w-r-999);padding:var(--w-e-8) var(--w-e-14)}
.demo-estado:empty{display:none}
/* En el móvil el panel es una vista previa: una pastilla pequeña dentro del marco abre la demo entera */
.abrir-tactil{display:none}
.demo-enlace{margin:var(--w-e-24) 0 0;text-align:center;font-size:var(--w-t-15)}
.demo-enlace a{color:var(--w-tinta-2);text-decoration:none;border-bottom:1px solid var(--w-linea-fuerte);padding-bottom:2px;transition:color var(--w-dur-corta) var(--w-curva),border-color var(--w-dur-corta) var(--w-curva)}
.demo-enlace a:hover{color:var(--w-marca);border-color:var(--w-marca)}
.demo-pantalla{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--w-papel);padding-top:var(--seguro-arriba)}
.demo-pantalla .salir-demo{display:flex;justify-content:space-between;align-items:center;gap:var(--w-e-12);padding:var(--w-e-8) var(--w-e-12);border-bottom:1px solid var(--w-linea)}
.demo-pantalla .salir-demo span{font-size:var(--w-t-14);color:var(--w-tinta-3)}
.demo-pantalla .salir-demo .boton{height:var(--boton-alto-cabecera);font-size:var(--boton-letra-cabecera);padding:var(--boton-relleno-estrecho)}
.demo-pantalla iframe{flex:1;width:100%;border:0}

/* ---------- Barra de abajo en el móvil ---------- */
.barra-cta{display:none}
@media (max-width: 760px){
  .barra-cta{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--w-e-8);align-items:center;position:fixed;left:var(--w-e-12);right:var(--w-e-12);bottom:calc(var(--w-e-12) + env(safe-area-inset-bottom, 0px));z-index:45;background:var(--w-cristal);-webkit-backdrop-filter:saturate(170%) blur(14px);backdrop-filter:saturate(170%) blur(14px);border:1px solid var(--w-linea);border-radius:var(--w-r-18);padding:var(--w-e-8);box-shadow:0 18px 40px -18px var(--w-sombra-cta);transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;transition:transform var(--w-dur) var(--w-curva),opacity var(--w-dur) var(--w-curva),visibility var(--w-dur)}
  .barra-cta.ver{transform:none;opacity:1;visibility:visible}
  .barra-cta .boton{padding:var(--boton-relleno-estrecho)}
  .cerrar-cta{width:44px;height:44px;border:0;border-radius:var(--w-r-12);background:none;color:var(--w-tinta-2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .cerrar-cta svg{width:16px;height:16px}
  body.con-barra .pie{padding-bottom:var(--w-e-80)}
}

/* ---------- Para quién es, en oscuro ---------- */
section.oscura{background:var(--w-noche);color:var(--w-blanco);padding:var(--w-e-140) 0}
.oscura .antetitulo{color:var(--w-noche-cifra)}
.oscura .frase{font-size:var(--w-t-frase);line-height:1.08;letter-spacing:-.05em;font-weight:300;margin:0 0 var(--w-e-96);max-width:18ch;text-wrap:balance}
.cifra-heroe{display:grid;justify-content:start;grid-template-columns:auto minmax(0,30em);gap:var(--w-e-40);align-items:end;padding-bottom:var(--w-e-56);border-bottom:1px solid var(--w-noche-linea)}
.cifra-heroe .numero{font-size:var(--w-t-numero);line-height:.82;letter-spacing:-.06em;font-weight:300;color:var(--w-noche-cifra);font-variant-numeric:tabular-nums}
.cifra-heroe p{margin:0 0 var(--w-e-12);font-size:var(--w-t-18);line-height:1.45;color:var(--w-blanco)}
.cifra-heroe .fuente,.cifra-heroe .fuente a{color:var(--w-noche-texto);font-size:var(--w-t-14);line-height:1.5}
.hechos{list-style:none;margin:0;padding:var(--w-e-48) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-e-40)}
.hechos strong{display:block;font-size:var(--w-t-20);font-weight:400;letter-spacing:-.02em;margin-bottom:var(--w-e-8)}
.hechos span{display:block;color:var(--w-noche-texto);font-size:var(--w-t-15-5);line-height:1.5}

/* ---------- Fotos del panel con sus marcas (posiciones en fotos-panel.css) ---------- */
.foto-panel{position:relative;margin:0;overflow:hidden;border-radius:var(--w-r-12);background:var(--w-gris-claro)}
.foto-panel img{display:block;width:100%;height:auto}
.foto-panel .marca{position:absolute;border:2px solid var(--marca-naranja);border-radius:var(--w-r-8);box-shadow:0 0 0 4px var(--w-halo-naranja);pointer-events:none}
.foto-panel .pildora{position:absolute;right:var(--w-e-menos-6);top:0;transform:translateY(-60%);white-space:nowrap;background:var(--w-marca);color:var(--w-blanco);font-size:var(--w-t-12-5);font-weight:600;line-height:1.2;padding:var(--w-e-5) var(--w-e-10);border-radius:var(--w-r-999);box-shadow:0 6px 16px -6px var(--w-marca-sombra)}
.foto-panel .marca.izq .pildora{right:calc(100% + 10px);top:50%;transform:translateY(-50%)}

/* ---------- «Así va una certificación» ---------- */
/* «Así va una certificación» (encargo del 08/10/2026, punto 3): UN panel de verdad fijo mientras se baja
   (portada.js lo carga al acercarse y guia.js lo lleva paso a paso); las fotos, solo de reserva.
   Ordenador: los pasos a la izquierda y el panel a la derecha. Móvil: el panel arriba, a su tamaño
   real, y los pasos debajo, todos de la misma altura; la sección acaba en el último. */
.guia{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--w-e-56);align-items:start}
.guia .pasos{grid-column:1;grid-row:1}
.guia .guia-pantalla{grid-column:2;grid-row:1}
.pasos{list-style:none;margin:0;padding:0}
.paso{min-height:52vh;display:flex;flex-direction:column;justify-content:center;padding:var(--w-e-24) 0 var(--w-e-24) var(--w-e-24);border-left:2px solid var(--w-linea);transition:border-color var(--w-dur) var(--w-curva),opacity var(--w-dur) var(--w-curva)}
/* los pasos que no se leen, apagados con color y no con transparencia: siguen pasando el contraste AA */
.guia.guiada .paso h3{color:var(--w-tinta-3);transition:color var(--w-dur) var(--w-curva)}
.guia.guiada .paso.activo{border-left-color:var(--marca-naranja)}
.guia.guiada .paso.activo h3{color:var(--w-tinta)}
.paso .num{font-family:var(--w-mono);font-size:var(--w-t-13);color:var(--w-naranja-oscuro);margin-bottom:var(--w-e-10)}
.paso h3{font-size:var(--w-t-h3);line-height:1.2;letter-spacing:-.02em;font-weight:400;margin:0 0 var(--w-e-10)}
.paso p{margin:0;color:var(--w-tinta-2);font-size:var(--w-t-16);line-height:1.5}
.guia-pantalla{position:sticky;top:calc(var(--seguro-arriba) + 96px)}
.guia-marco{position:relative;overflow:hidden;aspect-ratio:1280/1024;width:min(100%,calc((100vh - 170px) * 1.25));margin-left:auto;border-radius:var(--w-r-22);border:1px solid var(--w-linea-fuerte);background:linear-gradient(180deg,var(--w-blanco) 0%,var(--w-marco-fondo) 100%);box-shadow:0 40px 80px -48px var(--w-sombra-guia)}
.guia-marco .foto-panel{position:absolute;inset:0;border-radius:0;opacity:0;transition:opacity var(--w-dur) var(--w-curva)}
.guia-marco .foto-panel.activa{opacity:1}
.guia-marco .foto-panel .marca{opacity:0;transform:scale(.98);transition:opacity var(--w-dur) var(--w-curva),transform var(--w-dur) var(--w-curva)}
.guia-marco .foto-panel.activa .marca{opacity:1;transform:none;transition-delay:var(--w-dur-corta)}
.guia-marco .foto-panel.activa .marca.m2{transition-delay:var(--w-dur)}
.guia-marco .v-movil{display:none}
/* el panel de verdad, encima de las fotos: se ve en cuanto está listo; sin tocarlo (se baja la página, no el panel) */
.guia-marco iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity var(--w-dur) var(--w-curva);background:var(--w-blanco)}
.guia-marco.vivo iframe{opacity:1}
.guia-marco.vivo.cambiando iframe{opacity:.55}
.guia-marco.vivo .foto-panel{opacity:0;transition-delay:var(--w-dur)}
.guia-marco.vivo.foto-paso iframe{opacity:0}
.guia-marco.vivo.foto-paso .foto-panel.activa{opacity:1;transition-delay:0s}
.guia-probar{margin:var(--w-e-12) 0 0;text-align:right;font-size:var(--w-t-14)}
.guia-probar a{color:var(--w-tinta-2);text-decoration:none}
@media (hover:hover){.guia-probar a:hover{color:var(--w-tinta);text-decoration:underline}}

/* ---------- Qué hace: bento con fotos del panel ---------- */
.bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--w-e-20)}
.caja-b{grid-column:span 2;background:var(--w-papel);border-radius:var(--w-r-16);overflow:hidden;display:flex;flex-direction:column}
.caja-b.ancha{grid-column:span 3}
.pieza{height:300px;background:var(--w-hormigon);margin:var(--w-e-8) var(--w-e-8) 0;border-radius:var(--w-r-12);padding:var(--w-e-20) var(--w-e-20) 0;overflow:hidden}
.pieza picture,.pieza img{display:block;width:100%}
.pieza img{border-radius:var(--w-r-8) var(--w-r-8) 0 0;box-shadow:0 1px 2px var(--w-sombra-widget-1),0 16px 32px -24px var(--w-sombra-widget-2);transform:translateY(var(--w-e-8));transition:transform var(--w-dur-larga) var(--w-curva)}
.vigila .caja-b.revela.visto .pieza img{transform:none}
.caja-texto{padding:var(--w-e-24) var(--w-e-28) var(--w-e-28)}
.caja-texto h3{font-size:var(--w-t-h3);line-height:1.2;letter-spacing:-.02em;font-weight:400;margin:0 0 var(--w-e-8)}
.caja-texto p{margin:0;color:var(--w-tinta-2);font-size:var(--w-t-16);line-height:1.45;max-width:34em}


/* ---------- Verifactu ---------- */
.vf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--w-e-20)}
.tarjeta{border:0;border-radius:var(--w-r-16);padding:var(--w-e-32);background:var(--w-papel)}
.tarjeta h3{font-size:var(--w-t-h3);margin:0 0 var(--w-e-12);letter-spacing:-.02em;font-weight:400}
.tarjeta p{color:var(--w-tinta-2);margin:0 0 var(--w-e-12);font-size:var(--w-t-16)}
.fechas{list-style:none;padding:0;margin:0 0 var(--w-e-14)}
.fechas li{display:flex;gap:16px;padding:var(--w-e-12) 0;border-bottom:1px solid var(--w-linea);font-size:var(--w-t-16)}
.fechas li strong{font-family:var(--w-mono);font-weight:500;min-width:7.2em}
.cadena{grid-column:1/-1;background:var(--w-papel);border-radius:var(--w-r-16);padding:var(--w-e-32)}
.cadena-cab{display:flex;flex-wrap:wrap;gap:var(--w-e-6) var(--w-e-20);align-items:baseline;margin-bottom:var(--w-e-28)}
.cadena-cab strong{font-weight:400;font-size:var(--w-t-20);letter-spacing:-.02em}
.cadena-cab span{color:var(--w-tinta-2);font-size:var(--w-t-15)}
/* Bloque 7.2: tres facturas selladas y unidas; «Prueba a cambiar un importe» rompe el sello de la A-2 y
   el enlace con la A-3, en rojo. Sin hablar de huellas: lo que se ve es que la cadena deja de cuadrar. */
.eslabones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-e-48)}
.eslabon{border:1px solid var(--w-linea);border-radius:var(--w-r-14);padding:var(--w-e-16);font-size:var(--w-t-13-5);position:relative;background:var(--w-gris-claro);transition:border-color var(--w-dur) var(--w-curva),background-color var(--w-dur) var(--w-curva)}
.eslabon + .eslabon::before{content:"";position:absolute;left:-49px;top:50%;width:48px;height:2px;background:var(--marca-naranja);transform-origin:0 50%;transition:background-color var(--w-dur) var(--w-curva)}
.eslabon strong{display:block;font-size:var(--w-t-16);font-weight:500;margin-bottom:var(--w-e-8)}
.eslabon .importe{display:block;font-family:var(--w-mono);font-size:var(--w-t-15);font-variant-numeric:tabular-nums}
.importe .despues{display:none}
.sello-vf{float:right;font-size:var(--w-t-12);font-weight:500;color:var(--w-verde);background:var(--w-verde-suave);border:1px solid var(--w-verde-borde);border-radius:var(--w-r-999);padding:0 var(--w-e-8)}
.cadena .no-sello{display:none}
.cadena-pie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--w-e-12) var(--w-e-20);margin-top:var(--w-e-24)}
.aviso-cadena{margin:0;font-weight:600;font-size:var(--w-t-16);color:var(--w-rojo)}
.cadena.rota .cambia .si-sello,.cadena.rota .tras .si-sello,.cadena.rota .cadena-pie .si-sello{display:none}
.cadena.rota .no-sello{display:inline}
.cadena.rota .cambia,.cadena.rota .tras{border-color:var(--w-rojo-borde);background:var(--w-rojo-suave)}
.cadena.rota .cambia .sello-vf,.cadena.rota .tras .sello-vf{color:var(--w-rojo);background:var(--w-blanco);border-color:var(--w-rojo-borde)}
.cadena.rota .importe .antes{text-decoration:line-through;color:var(--w-tinta-3);margin-right:var(--w-e-8)}
.cadena.rota .importe .despues{display:inline;color:var(--w-rojo);font-weight:600}
/* el enlace roto: rojo y partido por la mitad */
.cadena.rota .tras::before{background:repeating-linear-gradient(90deg,var(--w-rojo) 0 14px,transparent 14px 34px)}
.vigila .cadena.revela .eslabon{opacity:0;transform:translateY(8px);transition:opacity var(--w-dur) var(--w-curva),transform var(--w-dur) var(--w-curva)}
.vigila .cadena.revela .eslabon + .eslabon::before{transform:scaleX(0);transition:transform var(--w-dur) var(--w-curva)}
.vigila .cadena.revela.visto .eslabon{opacity:1;transform:none}
.vigila .cadena.revela.visto .eslabon + .eslabon::before{transform:none}
.cadena.visto .eslabon:nth-child(2){transition-delay:100ms}.cadena.visto .eslabon:nth-child(2)::before{transition-delay:50ms}
.cadena.visto .eslabon:nth-child(3){transition-delay:200ms}.cadena.visto .eslabon:nth-child(3)::before{transition-delay:150ms}
.cadena.tocada .eslabon,.cadena.tocada .eslabon::before{transition-delay:0ms}

/* ---------- Comparativas: tabla con aire, cabecera fija y la columna de bildeit en tinta ---------- */
.comparativa,.tabla-planes{background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-16)}
.comparativa table,.tabla-planes table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--w-t-15)}
.comparativa thead th,.tabla-planes thead th{position:sticky;top:calc(var(--seguro-arriba) + 84px);z-index:2;background:var(--w-papel);font-size:var(--w-t-14);font-weight:500;color:var(--w-tinta-3);text-align:center;padding:var(--w-e-22) var(--w-e-16);border-bottom:1px solid var(--w-linea);vertical-align:bottom}
.comparativa thead th:first-child,.tabla-planes thead th:first-child{text-align:left;padding-left:var(--w-e-28);border-top-left-radius:var(--w-r-16)}
.comparativa thead th:last-child,.tabla-planes thead th:last-child{border-top-right-radius:var(--w-r-16)}
.comparativa tbody th,.tabla-planes tbody th{text-align:left;font-weight:500;padding:var(--w-e-22) var(--w-e-16) var(--w-e-22) var(--w-e-28)}
.comparativa td,.tabla-planes td{padding:var(--w-e-22) var(--w-e-16);text-align:center}
.comparativa tbody tr + tr > *,.tabla-planes tbody tr + tr > *{border-top:1px solid var(--w-linea)}
.comparativa .nuestro{background:var(--w-tinta);color:var(--w-blanco)}
.comparativa thead th.nuestro{background:var(--w-tinta);color:var(--w-blanco);font-weight:600;font-size:var(--w-t-15)}
.logo-col{display:block}.logo-col svg{display:block;height:19px;width:auto;margin:0 auto}
.comparativa tbody tr + tr > td.nuestro{border-top-color:var(--w-noche-linea)}
.comparativa tbody tr:last-child td.nuestro{border-bottom-right-radius:var(--w-r-16)}
.comparativa .nuestro .si,.comparativa .nuestro .parte{background:var(--w-noche-2);color:var(--w-noche-cifra)}
/* La comparación completa de los planes (bloque 8), al nivel de la de Plentia: cabecera fija con nombre y
   precio, el plan Empresa destacado en toda su columna y las filas agrupadas. En el móvil, pestañas. */
.tabla-planes thead td{position:sticky;top:calc(var(--seguro-arriba) + 84px);z-index:2;background:var(--w-papel);border-bottom:1px solid var(--w-linea);border-top-left-radius:var(--w-r-16)}
.tabla-planes thead th{color:var(--w-tinta);padding:var(--w-e-18) var(--w-e-16)}
.tabla-planes thead th.hi{background:var(--w-tinta);color:var(--w-blanco)}
.pc-nombre{display:block;font-size:var(--w-t-17);font-weight:600;letter-spacing:-.01em}
.pc-precio{display:block;font-size:var(--w-t-13-5);font-weight:400;color:var(--w-tinta-3);margin-top:var(--w-e-4);font-variant-numeric:tabular-nums}
.tabla-planes thead th.hi .pc-precio{color:var(--w-noche-texto)}
.tabla-planes td{color:var(--w-tinta-2);padding:var(--w-e-14) var(--w-e-16);width:17%}
.tabla-planes tbody th{padding:var(--w-e-14) var(--w-e-16) var(--w-e-14) var(--w-e-28);font-weight:400;color:var(--w-tinta)}
.tabla-planes td.hi{background:var(--w-naranja-suave)}
.tabla-planes .pc-grupo th{padding:var(--w-e-28) var(--w-e-16) var(--w-e-10) var(--w-e-28);font-size:var(--w-t-13);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--w-tinta-3);background:var(--w-papel)}
.tabla-planes tbody:first-of-type .pc-grupo th{padding-top:var(--w-e-20)}
.tabla-planes .valor{font-size:var(--w-t-14);color:var(--w-tinta)}
.tabla-planes tbody:last-child tr:last-child td.hi{border-bottom-right-radius:var(--w-r-16)}
.ver-tabla .cerrar-t,.ver-tabla.abierta .abrir-t{display:none}
.ver-tabla.abierta .cerrar-t{display:inline}
/* con la tabla abierta, el recorte del acordeón se quita para que la cabecera pueda quedarse fija */
.js .ver-tabla.quieta .acordeon-dentro{overflow:visible}
.pc-movil{display:none}
.plan .precio strong .desde{font-size:var(--w-t-16);letter-spacing:0;color:var(--w-tinta-3);margin-right:var(--w-e-4)}
.plan.destacado .precio strong .desde{color:var(--w-noche-texto)}
.lanzamiento{margin-top:var(--w-e-8);font-size:var(--w-t-15);font-weight:500;color:var(--w-naranja-oscuro)}
.col-m{display:none}

/* ---------- Precios de lanzamiento (web/precios.json) ---------- */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-e-20);align-items:stretch}
.plan{border-radius:var(--w-r-16);padding:var(--w-e-32);display:flex;flex-direction:column;background:var(--w-papel);position:relative}
.plan.destacado{background:var(--w-tinta);color:var(--w-blanco)}
.plan .insignia{position:absolute;top:var(--w-e-28);right:var(--w-e-28);background:var(--w-noche-2);color:var(--w-noche-cifra);font-size:var(--w-t-12-5);font-weight:500;padding:var(--w-e-4) var(--w-e-10);border-radius:var(--w-r-999)}
.plan h3{font-size:var(--w-t-h3);margin:0;font-weight:400;letter-spacing:-.02em}
.plan .para{color:var(--w-tinta-3);font-size:var(--w-t-15);margin:var(--w-e-6) 0 var(--w-e-28);min-height:2.9em}
.plan.destacado .para,.plan.destacado .precio span{color:var(--w-noche-texto)}
.plan .precio{display:flex;flex-direction:column;gap:var(--w-e-4);margin:0}
.plan .precio strong{font-size:var(--w-t-30);font-weight:400;letter-spacing:-.03em;line-height:1.1}
.plan .precio span{font-size:var(--w-t-15);color:var(--w-tinta-3)}
.plan .limites{list-style:none;margin:var(--w-e-24) 0;padding:var(--w-e-16) 0;border-top:1px solid var(--w-linea);border-bottom:1px solid var(--w-linea);display:grid;gap:var(--w-e-8);font-size:var(--w-t-15);color:var(--w-tinta)}
.plan.destacado .limites{border-color:var(--w-noche-linea);color:var(--w-blanco)}
.plan .boton{width:100%}
.plan .incluye{list-style:none;padding:0;margin:var(--w-e-24) 0 0;display:grid;gap:var(--w-e-11);font-size:var(--w-t-15)}
.plan li{position:relative}
.plan .incluye li{padding-left:var(--w-e-28)}
.plan .incluye li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:var(--w-r-6);background:var(--w-hormigon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23151515' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.plan.destacado .incluye li::before{background-color:var(--w-noche-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FF9D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.incluido{margin-top:var(--w-e-20);border-radius:var(--w-r-16);padding:var(--w-e-28) var(--w-e-32);background:var(--w-papel)}
.incluido h3{margin:0 0 var(--w-e-16);font-size:var(--w-t-16);font-weight:500}
.incluido ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-e-12) var(--w-e-24);font-size:var(--w-t-15);color:var(--w-tinta-2)}
.incluido li{display:flex;gap:var(--w-e-10);align-items:flex-start}
.incluido li svg{flex:none;width:18px;height:18px;padding:2px;border-radius:var(--w-r-6);background:var(--w-naranja-suave);color:var(--w-naranja-oscuro);margin-top:2px}
.puesta{margin-top:var(--w-e-20);display:flex;justify-content:space-between;align-items:center;gap:var(--w-e-28);border:1px dashed var(--w-linea-fuerte);border-radius:var(--w-r-16);padding:var(--w-e-28) var(--w-e-32)}
.puesta h3{margin:0 0 var(--w-e-6);font-size:var(--w-t-20);font-weight:400;letter-spacing:-.02em}
.puesta p{margin:0;color:var(--w-tinta-2);font-size:var(--w-t-15);max-width:44em}
.ver-tabla{margin-top:var(--w-e-24)}
.ver-tabla .tabla-planes{margin-top:var(--w-e-12)}
.ambito{margin:var(--w-e-28) auto 0;max-width:52em;text-align:center;font-size:var(--w-t-15);color:var(--w-tinta-2)}
.ambito strong{color:var(--w-tinta);font-weight:500}

.contacto h2{font-size:var(--w-t-h2);line-height:1.15;letter-spacing:-.05em;font-weight:300}
.formulario{border-radius:var(--w-r-16)}
.formulario h3{font-weight:500}

/* ---------- El idioma: selector en el pie y aviso si el navegador prefiere el otro ---------- */
.idioma-pie{display:inline-flex;gap:var(--w-e-4);background:var(--w-hormigon);border-radius:var(--w-r-999);padding:3px}
.idioma-pie a{display:inline-flex;gap:var(--w-e-6);align-items:center;text-decoration:none;color:var(--w-tinta-2);font-size:var(--w-t-13-5);font-weight:600;padding:var(--w-e-5) var(--w-e-12);border-radius:var(--w-r-999);transition:background-color var(--w-dur-corta) var(--w-curva),color var(--w-dur-corta) var(--w-curva)}
.idioma-pie a span{font-weight:400}
.idioma-pie a[aria-current="true"]{background:var(--w-papel);color:var(--w-tinta);box-shadow:0 1px 2px var(--w-sombra-segmento)}
.aviso-idioma{position:fixed;left:var(--w-e-16);bottom:var(--w-e-16);z-index:60;display:flex;align-items:center;gap:var(--w-e-8);background:var(--w-tinta);color:var(--w-blanco);border-radius:var(--w-r-14);padding:var(--w-e-8) var(--w-e-8) var(--w-e-8) var(--w-e-14);font-size:var(--w-t-14);box-shadow:0 18px 40px -18px var(--w-sombra-cta);transition:opacity var(--w-dur) var(--w-curva),transform var(--w-dur) var(--w-curva)}
.aviso-idioma[hidden]{display:none}
.aviso-idioma a{color:var(--w-blanco);font-weight:600}
.aviso-idioma button{width:32px;height:32px;border:0;border-radius:var(--w-r-9);background:var(--w-noche-2);color:var(--w-blanco);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.aviso-idioma button svg{width:14px;height:14px}

/* ---------- Un difuminado naranja muy suave (menos que el del hero) en algunas secciones, no en todas,
   para dar ritmo (encargo del 08/10/2026, 5.3) ---------- */
.con-luz{position:relative;isolation:isolate}
.con-luz::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(48% 36% at 84% 6%,var(--w-luz-suave) 0%,var(--w-luz-0) 100%),radial-gradient(40% 30% at 10% 92%,var(--w-luz-suave-2) 0%,var(--w-luz-0) 100%)}
.con-luz.luz-izq::before{background:radial-gradient(48% 36% at 12% 8%,var(--w-luz-suave) 0%,var(--w-luz-0) 100%)}

/* ---------- Lo que entra y lo que sale (bloque 7.1): una línea al pie de «Qué hace» ---------- */
.trae-linea{display:flex;align-items:center;justify-content:center;gap:var(--w-e-20);margin:var(--w-e-32) 0 0;padding:var(--w-e-20) var(--w-e-24);border:1px solid var(--w-linea);border-radius:var(--w-r-16);background:var(--w-blanco);font-size:var(--w-t-15);color:var(--w-tinta-2);line-height:1.45}
.trae-linea b{font-weight:600;color:var(--w-tinta);margin-right:var(--w-e-6)}
.trae-palabra{flex:none;display:flex;align-items:center;gap:var(--w-e-12);color:var(--w-tinta)}
.trae-palabra svg{height:20px;width:auto}
.trae-palabra::before,.trae-palabra::after{content:"";width:var(--w-e-28);height:2px;border-radius:var(--w-r-999);background:linear-gradient(90deg,var(--w-linea-fuerte),var(--marca-naranja))}
.trae-palabra::after{background:linear-gradient(90deg,var(--marca-naranja),var(--w-linea-fuerte))}
@media (max-width: 760px){
  /* en el móvil, la palabra arriba y debajo dos columnas: entra y sale */
  .trae-linea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"p p" "e s";gap:var(--w-e-12) var(--w-e-16);padding:var(--w-e-16);font-size:var(--w-t-14);text-align:left}
  .trae-palabra{grid-area:p;justify-self:center}
  .trae-lado:first-child{grid-area:e}.trae-lado:last-child{grid-area:s}
  .trae-linea b{display:block;margin:0 0 var(--w-e-4)}
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .hechos{grid-template-columns:1fr;gap:var(--w-e-24)}
  .cifra-heroe{grid-template-columns:1fr;gap:var(--w-e-20)}
  .bento{grid-template-columns:1fr}
  .caja-b,.caja-b.ancha{grid-column:auto}
  .vf{grid-template-columns:1fr}
  .planes{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .incluido ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq,.contacto .envoltura{grid-template-columns:1fr;gap:var(--w-e-44)}
  .faq .cab-seccion{position:static}
  .pie-arriba{grid-template-columns:repeat(2,1fr)}
  .pie-marca{grid-column:1/-1}
}
@media (max-width: 1100px){
  /* En el móvil y la tableta: el panel arriba, fijo y a su tamaño real (el panel del móvil, que se lee sin
     zoom), y debajo los pasos, todos de la misma altura y con dos líneas de texto como mucho */
  .guia{display:block}
  /* fijo bajo la cabecera, con blanco por encima para que no asome el texto que pasa por detrás. El
     margen de abajo hace que se suelte una altura de paso antes del final (si no, taparía el último
     paso), y el margen negativo de .pasos lo compensa: el primer paso sigue justo debajo del panel */
  .guia .guia-pantalla{position:sticky;top:calc(var(--seguro-arriba) + 60px);z-index:2;padding:var(--w-e-12) 0;margin-bottom:var(--w-alto-paso);background:linear-gradient(180deg,var(--w-blanco) 88%,var(--w-blanco-0) 100%)}
  .guia .pasos{margin-top:var(--w-alto-paso-menos)}
  /* todo el ancho; el panel se pinta a 390 px (su diseño de móvil) y se encoge lo justo para caber.
     La foto de reserva conserva su forma, pegada arriba (sus marcas van en % de la foto) */
  .guia-marco{aspect-ratio:auto;width:100%;height:var(--w-alto-guia-movil);margin:0;border-radius:var(--w-r-18)}
  .guia-marco .foto-panel{inset:0 0 auto 0;aspect-ratio:390/560}
  .guia-marco .v-escritorio{display:none}
  .guia-marco .v-movil{display:block}
  .guia-probar{display:none}
  .paso{min-height:0;height:var(--w-alto-paso);justify-content:flex-start;padding:var(--w-e-16) var(--w-e-4) var(--w-e-16) var(--w-e-16)}
  .paso:last-child{height:auto;padding-bottom:0}
  .paso h3{font-size:var(--w-t-20);margin-bottom:var(--w-e-6)}
  .paso p{font-size:var(--w-t-15);line-height:1.45}
}
@media (max-width: 760px){
  body{font-size:var(--w-t-16)}
  .envoltura{padding:0 var(--w-e-20)}
  section{padding:var(--w-e-60) 0}
  section.oscura{padding:var(--w-e-80) 0}
  .cab-seccion{margin-bottom:var(--w-e-40)}
  .cab-seccion > p{font-size:var(--w-t-17)}
  .portada{padding-top:calc(var(--seguro-arriba) + var(--hero-arriba-movil))}
  .escaparate{padding:0 var(--w-e-12) var(--w-e-56);margin-top:var(--hero-hueco-movil)}
  .marco{padding:var(--w-e-6);border-radius:var(--w-r-18)}
  .marco-barra{display:none}
  .pantalla-panel{border-radius:var(--w-r-12)}
  .abrir-tactil{display:inline-flex;position:absolute;right:var(--w-e-10);bottom:var(--w-e-10);z-index:2;font:inherit;font-size:var(--w-t-13-5);font-weight:600;color:var(--w-blanco);background:var(--w-tinta);border:0;border-radius:var(--w-r-999);padding:var(--w-e-8) var(--w-e-14);box-shadow:0 8px 20px -8px var(--w-sombra-cta)}
  .demo-enlace{display:none}
  .para-quien{font-size:var(--w-t-13);white-space:nowrap;padding:var(--w-e-6) var(--w-e-14) var(--w-e-6) var(--w-e-10)}
  .oscura .frase{margin-bottom:var(--w-e-56)}
  .pieza{height:auto;max-height:360px;padding:var(--w-e-12) var(--w-e-12) 0}
  .caja-texto{padding:var(--w-e-20)}
  .tarjeta,.cadena{padding:var(--w-e-22)}
  .eslabones{grid-template-columns:1fr;gap:var(--w-e-28)}
  .eslabon + .eslabon::before{left:50%;top:-29px;width:2px;height:28px;transform-origin:50% 0}
  .cadena.rota .tras::before{background:repeating-linear-gradient(180deg,var(--w-rojo) 0 8px,transparent 8px 20px)}
  .vigila .cadena.revela .eslabon + .eslabon::before{transform:scaleY(0)}
  .cadena-pie .boton{width:100%}
  /* las comparativas, en fichas: una por fila, con la columna de bildeit destacada */
  .comparativa{background:none;border:0;border-radius:0}
  .comparativa thead{display:none}
  .comparativa table,.comparativa tbody,.comparativa tr,.comparativa td,.comparativa tbody th{display:block;width:auto}
  .comparativa tr{background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-16);margin-bottom:var(--w-e-12);overflow:hidden}
  .comparativa tbody tr + tr > *{border-top:0}
  .comparativa tbody th{padding:var(--w-e-16) var(--w-e-16) var(--w-e-10);font-size:var(--w-t-16)}
  /* la comparación de planes: una pestaña por plan */
  .tabla-planes{display:none}
  .pc-movil{display:block;margin-top:var(--w-e-12)}
  .pc-pestanas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-e-4);padding:var(--w-e-4);background:var(--w-hormigon);border-radius:var(--w-r-12);position:sticky;top:calc(var(--seguro-arriba) + var(--cab-alto-movil) + 20px);z-index:2}
  .pc-pestanas[hidden]{display:none}
  .pc-pestanas button{all:unset;box-sizing:border-box;text-align:center;padding:var(--w-e-10) var(--w-e-6);border-radius:var(--w-r-9);font-size:var(--w-t-15);font-weight:500;color:var(--w-tinta-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pc-pestanas button[aria-selected="true"]{background:var(--w-papel);color:var(--w-tinta);font-weight:600;box-shadow:0 1px 3px var(--w-sombra-suave)}
  .pc-pestanas button:focus-visible{outline:2px solid var(--marca-naranja);outline-offset:1px}
  .pc-plan{background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-16);padding:var(--w-e-20);margin-top:var(--w-e-12)}
  .pc-plan.hi{border-color:var(--w-tinta)}
  .pc-plan:focus-visible{outline:2px solid var(--marca-naranja);outline-offset:2px}
  .pc-titulo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--w-e-12);margin:0;font-size:var(--w-t-20);font-weight:600}
  .pc-titulo span{font-size:var(--w-t-14);font-weight:400;color:var(--w-tinta-3)}
  .pc-grupo-m{margin:var(--w-e-20) 0 var(--w-e-8);font-size:var(--w-t-12-5);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--w-tinta-3)}
  .pc-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--w-e-10)}
  .pc-plan li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--w-e-10);align-items:start;font-size:var(--w-t-15);line-height:1.4;color:var(--w-tinta)}
  .pc-plan li.no-incluye{color:var(--w-tinta-3)}
  .pc-plan li b{display:block;font-weight:600;color:var(--w-naranja-oscuro)}
  .comparativa td{display:flex;justify-content:space-between;align-items:center;gap:var(--w-e-12);text-align:right;padding:var(--w-e-10) var(--w-e-16);border-top:1px solid var(--w-linea)}
  .comparativa td.nuestro{border-top-color:var(--w-tinta)}
  .comparativa tbody tr:last-child td.nuestro{border-radius:0}
  .col-m{display:inline;color:var(--w-tinta-3);font-size:var(--w-t-14);text-align:left}
  .comparativa td.nuestro .col-m{color:var(--w-blanco);font-weight:600}
  .plan,.incluido,.puesta{padding:var(--w-e-24)}
  .incluido ul{grid-template-columns:1fr}
  .puesta{flex-direction:column;align-items:flex-start}
  .ambito{text-align:left}
  .formulario .doble{grid-template-columns:1fr}
  .tabla td,.tabla th{padding:var(--w-e-10)}
  .tabla td:first-child{white-space:normal}
  .aviso-idioma{left:var(--w-e-12);right:var(--w-e-12);bottom:auto;top:calc(var(--seguro-arriba) + 84px)}
}
@media (prefers-reduced-motion: reduce){
  .guia-marco .foto-panel .marca{opacity:1;transform:none}
}

/* ---------- Páginas legales: BORRADOR bien visible, cada [PENDIENTE: dato] resaltado y la norma de
   cada apartado debajo, en pequeño ---------- */
.pagina-legal .borrador{display:block;font-size:var(--w-t-14);font-weight:600;color:var(--w-tinta);background:var(--w-naranja-suave);border:1px solid var(--w-naranja-borde);border-left:4px solid var(--w-marca);border-radius:var(--w-r-8);padding:var(--w-e-10) var(--w-e-14);margin:0 0 var(--w-e-20)}
.pagina-legal .pendiente{background:var(--w-naranja-suave);color:var(--w-naranja-oscuro);font-weight:600;padding:0 var(--w-e-4);border-radius:var(--w-r-4);outline:1px dashed var(--w-naranja-borde)}
.pagina-legal .norma{font-size:var(--w-t-14);color:var(--w-tinta-3);border-left:2px solid var(--w-linea);padding-left:var(--w-e-12);margin-top:var(--w-e-12)}
.pagina-legal .norma a{color:var(--w-tinta-2)}
.formulario .legal a{color:var(--w-tinta-2)}

/* ---------- El blog (encargo «cerrar la web», bloque 12) ---------- */
.pagina-blog{padding:calc(var(--seguro-arriba) + var(--w-e-120)) 0 var(--w-e-80)}
.blog-cab{padding-bottom:var(--w-e-40)}
.blog-cab .titulo{max-width:18em}
.blog-cab p{color:var(--w-tinta-2);font-size:var(--w-t-17);max-width:40em;margin:var(--w-e-14) 0}
.rss{font-size:var(--w-t-15);font-weight:500;color:var(--w-naranja-oscuro)}
.blog-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-e-20)}
.ficha-blog{display:flex;flex-direction:column;gap:var(--w-e-10);padding:var(--w-e-24);background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-16);text-decoration:none;color:var(--w-tinta);transition:border-color var(--w-dur-corta) var(--w-curva),transform var(--w-dur-corta) var(--w-curva)}
@media (hover: hover){.ficha-blog:hover{border-color:var(--w-linea-fuerte);transform:translateY(-2px)}}
.ficha-blog:focus-visible{outline:2px solid var(--marca-naranja);outline-offset:2px}
.ficha-tema{align-self:flex-start;font-size:var(--w-t-12-5);font-weight:600;color:var(--w-naranja-oscuro);background:var(--w-naranja-suave);border-radius:var(--w-r-999);padding:var(--w-e-2) var(--w-e-10)}
.ficha-blog strong{font-size:var(--w-t-19);font-weight:600;line-height:1.3;letter-spacing:-.015em}
.ficha-texto{color:var(--w-tinta-2);font-size:var(--w-t-15);line-height:1.5;flex:1}
.ficha-meta{color:var(--w-tinta-3);font-size:var(--w-t-13-5)}
.articulo h1{font-size:var(--w-t-clamp-3);line-height:1.12;letter-spacing:-.03em;margin:var(--w-e-14) 0 var(--w-e-14)}
.migas{display:flex;gap:var(--w-e-8);font-size:var(--w-t-14);color:var(--w-tinta-3)}
.migas a{color:var(--w-naranja-oscuro)}
.entradilla{font-size:var(--w-t-19);line-height:1.5;color:var(--w-tinta-2);margin:0 0 var(--w-e-16)}
.articulo-meta{display:flex;flex-wrap:wrap;gap:var(--w-e-6) var(--w-e-16);font-size:var(--w-t-14);color:var(--w-tinta-3);margin:0 0 var(--w-e-28);padding-bottom:var(--w-e-20);border-bottom:1px solid var(--w-linea)}
.indice{background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-14);padding:var(--w-e-18) var(--w-e-22);margin:0 0 var(--w-e-32)}
.indice p{margin:0 0 var(--w-e-8);font-size:var(--w-t-13);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--w-tinta-3)}
.indice ol{margin:0;padding-left:var(--w-e-20);display:grid;gap:var(--w-e-6);font-size:var(--w-t-15)}
.indice a{color:var(--w-tinta);text-decoration:none}
@media (hover: hover){.indice a:hover{text-decoration:underline}}
.articulo-cuerpo{font-size:var(--w-t-17);line-height:1.65;color:var(--w-tinta-2)}
.articulo-cuerpo h2{font-size:var(--w-t-24);line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--w-tinta);margin:var(--w-e-44) 0 var(--w-e-12);scroll-margin-top:calc(var(--seguro-arriba) + var(--w-e-96))}
.articulo-cuerpo p,.articulo-cuerpo ul,.articulo-cuerpo ol{margin:0 0 var(--w-e-16)}
.articulo-cuerpo li{margin-bottom:var(--w-e-8)}
.articulo-cuerpo strong{color:var(--w-tinta);font-weight:600}
.articulo-cuerpo a{color:var(--w-naranja-oscuro)}
.articulo-cuerpo blockquote{margin:0 0 var(--w-e-16);padding:var(--w-e-4) 0 var(--w-e-4) var(--w-e-18);border-left:3px solid var(--marca-naranja);color:var(--w-tinta)}
.articulo-cuerpo blockquote p{margin:0}
.articulo-cuerpo .formula{background:var(--w-papel);border:1px solid var(--w-linea);border-radius:var(--w-r-12);padding:var(--w-e-14) var(--w-e-18);font-size:var(--w-t-17);text-align:center}
.articulo-cuerpo .aviso-articulo{background:var(--w-naranja-suave);border:1px solid var(--w-naranja-borde);border-radius:var(--w-r-12);padding:var(--w-e-14) var(--w-e-18);color:var(--w-tinta)}
.articulo-cuerpo .tabla-legal{overflow-x:auto;margin:0 0 var(--w-e-16)}
.articulo-cuerpo table{width:100%;border-collapse:collapse;font-size:var(--w-t-15)}
.articulo-cuerpo th{text-align:left;font-weight:600;color:var(--w-tinta);border-bottom:1px solid var(--w-linea-fuerte);padding:var(--w-e-8) var(--w-e-10)}
.articulo-cuerpo td{border-bottom:1px solid var(--w-linea);padding:var(--w-e-8) var(--w-e-10);vertical-align:top;font-variant-numeric:tabular-nums}
.fuentes-articulo{padding-left:var(--w-e-20)}
.articulo-cuerpo .fuente{font-size:var(--w-t-14);color:var(--w-tinta-3)}
.articulo-cta{margin:var(--w-e-44) 0;padding:var(--w-e-28);background:var(--w-tinta);color:var(--w-blanco);border-radius:var(--w-r-18)}
.articulo-cta h2{margin:0 0 var(--w-e-8);font-size:var(--w-t-24);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.articulo-cta p{margin:0 0 var(--w-e-20);color:var(--w-noche-texto);font-size:var(--w-t-16)}
.cta-botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--w-e-12) var(--w-e-20)}
.enlace-cta{color:var(--w-blanco);font-weight:500;font-size:var(--w-t-15)}
.relacionados h2{font-size:var(--w-t-22);font-weight:600;letter-spacing:-.02em;margin:0 0 var(--w-e-16)}
.relacionados .blog-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){
  .blog-lista,.relacionados .blog-lista{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .pagina-blog{padding-top:calc(var(--seguro-arriba) + var(--w-e-96))}
  .articulo-cuerpo{font-size:var(--w-t-16)}
  .entradilla{font-size:var(--w-t-17)}
  .articulo-cta{padding:var(--w-e-22)}
  .cta-botones .boton{width:100%}
}