/* ─────────────────────────────────────────────────────────────────────────────
   Hogar Seguro · prelanding de alarmas
   Mismo lenguaje visual que la landing de destino de Movistar Prosegur Alarmas
   (fondo blanco, bandas gris oscuro en degradado, titulares en amarillo, Poppins)
   para que el salto al formulario no se note. Contrastes comprobados para AA.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --blanco:#ffffff;
  --gris-0:#f4f4f4;       /* fondo del campo de teléfono del destino */
  --gris-1:#e6e6e6;
  --gris-2:#d3d4d3;
  --grafito:#3a3c3f;      /* pie y bandas del destino */
  --grafito-claro:#7d808a;
  --tinta:#1f2124;        /* 16:1 sobre blanco */
  --texto:#3a3c3f;        /* 11:1 */
  --suave:#6d6d73;        /* 5,3:1 */
  --amarillo:#ffd102;     /* sobre #3a3c3f: 9:1 */
  --amarillo-osc:#ebbd00;
  --azul:#0a6fb8;         /* enlaces: 5,2:1 */
  --verde:#1d7a4c;
  --radio:.75rem;
  --max:68rem;
  --fuente:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  --degradado:linear-gradient(120deg,#7d808a 0%,#55585f 45%,#3a3c3f 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--blanco);color:var(--texto);font:400 1rem/1.6 var(--fuente);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3{color:var(--tinta);line-height:1.15;margin:0;letter-spacing:-.01em}
img{max-width:100%;height:auto;display:block}
a{color:var(--azul)}
sup{font-size:.6em;line-height:0}
.envoltura,.contenedor{max-width:var(--max);margin-inline:auto;padding-inline:max(1.25rem,env(safe-area-inset-left)) max(1.25rem,env(safe-area-inset-right))}
.centrado{text-align:center}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Llamada a nota «*»: zona táctil ampliada sin mover el diseño */
.nota-ref{color:inherit;text-decoration:none;font-weight:700;padding:.5rem .3rem;margin:-.5rem -.3rem -.5rem -.1rem}

/* ── Aviso legal superior ─────────────────────────────────────────────────── */
.aviso{margin:0;padding:.5rem 1.25rem;background:var(--gris-0);color:var(--texto);font-size:.75rem;line-height:1.45;text-align:center;border-bottom:1px solid var(--gris-1)}
.aviso strong{color:var(--tinta)}

/* ── Cabecera (blanca, como la del destino) ───────────────────────────────── */
.cabecera{position:sticky;top:0;z-index:30;background:rgb(255 255 255 / .94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--gris-1)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tinta)}
.cabecera .logo{min-height:44px}
.logo__marca{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--grafito);display:grid;place-items:center;flex-shrink:0}
.logo__texto{display:flex;flex-direction:column;line-height:1.05}
.logo__nombre{font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.logo__acento{color:var(--suave)}
.logo__editor{font-size:.6875rem;font-weight:500;color:var(--suave);margin-top:.2rem}
.etiqueta{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);border:1px solid var(--gris-1);padding:.25rem .55rem;border-radius:.4rem}
.boton.cabecera__cta{display:none}
.cabecera .etiqueta{margin-left:auto}

/* ── Botones: amarillo con texto oscuro, como el «Contratar» del destino ──── */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--amarillo);color:var(--tinta);text-decoration:none;
  font:700 1.0625rem/1 var(--fuente);padding:1rem 1.6rem;border-radius:.6rem;
  box-shadow:0 10px 22px -12px rgb(31 33 36 / .55);transition:background .15s,transform .15s;
}
@media (hover:hover){.boton:hover{background:var(--amarillo-osc);transform:translateY(-1px)}}
.boton:active{transform:translateY(1px)}
.boton:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.banda .boton:focus-visible,.alarma .boton:focus-visible{outline-color:#fff}
.boton svg{width:1.15em;height:1.15em;flex-shrink:0}
.boton--ancho{width:100%}

/* ── Bandas grafito en degradado (hero y llamada final) ───────────────────── */
.banda{background:var(--degradado);color:#eef0f2}
.banda h1,.banda h2{color:var(--amarillo)}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{padding-block:2.25rem 2.75rem;overflow-x:hidden;overflow-x:clip}  /* la pegatina y el chip sobresalen a propósito; que no generen scroll lateral */
.hero__rejilla{display:grid;gap:2rem;align-items:center}
.hero__eyebrow{margin:0 0 .8rem;font-size:.8125rem;font-weight:600;color:#fff}
.hero__eyebrow b{color:var(--amarillo)}
.hero__titulo{font-size:2.1rem;font-weight:800;margin-bottom:.9rem;text-wrap:balance}
.hero__lead{font-size:1rem;margin:0 0 1.25rem;color:#fff;max-width:34rem;text-wrap:pretty}
.precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .55rem;margin:0 0 1.4rem;color:#fff}
.precio__desde{font-size:.9375rem;font-weight:500}
.precio__cifra{font-weight:800;font-size:2.4rem;line-height:1;color:#fff;letter-spacing:-.02em}
.precio__cifra small{font-size:.42em;font-weight:600;margin-left:.1em}
.precio__nota{flex-basis:100%;font-size:.8125rem;color:#e3e5e8}
.hero__micro{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.35rem;font-size:.875rem;color:#fff}
.hero__micro li{display:flex;gap:.55rem;align-items:flex-start}
.hero__micro li::before{content:"";flex-shrink:0;margin-top:.4rem;width:.85rem;height:.45rem;border-left:2.5px solid var(--amarillo);border-bottom:2.5px solid var(--amarillo);transform:rotate(-45deg)}

/* ── Franja de valoraciones (como la del destino) ─────────────────────────── */
.valoraciones{background:linear-gradient(90deg,var(--gris-1),var(--gris-2));}
.valoraciones__fila{display:grid;gap:.7rem;padding-block:1rem}
.valoracion,.sello-oficial{margin:0}
.valoracion{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.8125rem;color:var(--texto)}
.valoracion__nota{font-weight:700;font-size:1rem;color:var(--tinta)}
.estrellas{display:inline-flex;gap:2px}
.estrellas i{width:.9rem;height:.9rem;background:var(--c,#00b67a);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.estrellas--google i{--c:#f5b301}
.estrellas i.media{background:linear-gradient(90deg,var(--c,#f5b301) 60%,#c9c9c9 60%)}
.valoracion__fuente{font-weight:600;color:var(--tinta)}
.valoraciones__nota{font-size:.6875rem;color:var(--suave);margin:0;padding-bottom:.9rem}
.sello-oficial{display:flex;align-items:center;gap:.55rem;font-size:.8125rem;color:var(--texto)}
.sello-oficial strong{color:var(--tinta)}

/* ── Secciones genéricas ──────────────────────────────────────────────────── */
.seccion{padding-block:3.25rem}
.seccion--gris{background:var(--gris-0)}
.seccion__eyebrow{margin:0 0 .5rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--suave)}
.seccion__titulo{font-size:1.75rem;font-weight:800;margin-bottom:.7rem;text-wrap:balance}
.seccion__intro{margin:0 0 1.9rem;max-width:36rem}
.centrado .seccion__intro{margin-inline:auto}

/* ── Cómo funciona ────────────────────────────────────────────────────────── */
.pasos{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem}
.paso{background:#fff;border:1px solid var(--gris-1);border-radius:var(--radio);padding:1.3rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:start;align-content:start}
.paso__numero{grid-row:span 2;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--grafito);color:var(--amarillo);display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.paso h3{font-size:1.0625rem;font-weight:700;align-self:center}
@media (min-width:640px){.paso h3{align-self:start}}
.paso p{margin:0;font-size:.9375rem}
.paso--destino{border:2px solid var(--amarillo);box-shadow:0 10px 26px -16px rgb(31 33 36 / .45)}
.paso__muestra{grid-column:1/-1;margin-top:.8rem;border-radius:.6rem;overflow:hidden;font-size:.8125rem;pointer-events:none;user-select:none}
.paso__muestra-cab{background:var(--degradado);color:var(--amarillo);font-weight:800;text-align:center;padding:.55rem .5rem .1rem;font-size:.95rem}
.paso__muestra-cab small{display:block;color:#fff;font-weight:500;font-size:.75rem;padding-bottom:.4rem}
.paso__muestra-campo{display:flex;background:var(--grafito);padding:.5rem}
.paso__muestra-campo span{flex:1;background:var(--gris-0);color:#8b8d92;border-radius:.4rem 0 0 .4rem;padding:.45rem .6rem}
.paso__muestra-campo b{background:var(--amarillo);color:var(--tinta);border-radius:0 .4rem .4rem 0;padding:.45rem .7rem}
.paso__leyenda{grid-column:1/-1;margin:.45rem 0 0;font-size:.75rem;color:var(--suave)}

/* ── Si salta la alarma (grafito) ─────────────────────────────────────────── */
.alarma{background:var(--grafito);color:#dfe1e4;padding-block:3.25rem}
.alarma .seccion__eyebrow{color:#c3c6cb}
.alarma .seccion__titulo{color:var(--amarillo)}
.alarma .seccion__intro{color:#dfe1e4}
.alarma__rejilla{display:grid;gap:2.25rem}
.linea{list-style:none;margin:0;padding:0;position:relative}
.linea::before{content:"";position:absolute;left:1.1rem;top:.6rem;bottom:.6rem;width:2px;background:linear-gradient(var(--amarillo),rgb(255 209 2 / .15))}
.linea__paso{position:relative;padding:0 0 1.5rem 3.3rem}
.linea__paso:last-child{padding-bottom:0}
.linea__marca{position:absolute;z-index:1;left:0;top:0;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--amarillo);color:var(--tinta);display:grid;place-items:center;font-weight:800;font-size:.75rem}
.linea__tiempo{display:block;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amarillo);margin-bottom:.2rem}
.linea h3{color:#fff;font-size:1.0625rem;font-weight:700;margin-bottom:.25rem}
.linea p{margin:0;font-size:.9375rem;color:#dfe1e4}

/* ── Garantías ────────────────────────────────────────────────────────────── */
.garantias{display:grid;gap:1rem}
.garantia{background:#fff;border:1px solid var(--gris-1);border-radius:var(--radio);padding:1.5rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;align-items:start}
.garantia__sello{width:4rem;height:4rem;grid-row:span 3}
.garantia__cifra{font-variant-numeric:tabular-nums;font-weight:800;font-size:2rem;line-height:1;color:var(--tinta);margin:0}
.garantia h3{font-size:1.0625rem;font-weight:700}
.garantia ul{margin:.55rem 0 0;padding-left:1.1rem;font-size:.9375rem}
.garantia li{margin-bottom:.15rem}

/* ── Recomendador + comparativa ───────────────────────────────────────────── */
.recomendador{background:#fff;border:1px solid var(--gris-1);border-radius:var(--radio);padding:1.3rem;margin-bottom:1.4rem}
.recomendador__pregunta{font-weight:700;font-size:1.0625rem;color:var(--tinta);margin:0 0 .85rem}
.recomendador__opciones{display:grid;gap:.6rem}
.opcion{
  display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;cursor:pointer;
  font:600 .9375rem/1.3 var(--fuente);color:var(--tinta);background:var(--gris-0);
  border:2px solid var(--gris-1);border-radius:.6rem;padding:.8rem 1rem;transition:border-color .15s,background .15s;
}
@media (hover:hover){.opcion:hover{border-color:var(--grafito)}}
.opcion:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.opcion[aria-pressed="true"]{border-color:var(--tinta);background:var(--amarillo)}
.opcion svg{width:1.4rem;height:1.4rem;flex-shrink:0}
.recomendador__resultado{margin:1rem 0 0;padding:.85rem 1rem;border-radius:.6rem;background:var(--gris-0);font-size:.9375rem;color:var(--tinta)}

.comparativa{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radio);overflow:hidden;border:1px solid var(--gris-1);font-size:.875rem}
.comparativa th,.comparativa td{padding:.8rem .6rem;border-bottom:1px solid var(--gris-1);text-align:center;vertical-align:middle}
.comparativa thead th{font-weight:700;font-size:.875rem;color:var(--tinta);vertical-align:bottom;line-height:1.25}
.comparativa thead small{display:block;font-weight:400;font-size:.75rem;color:var(--suave);margin-top:.2rem}
.comparativa tbody th{text-align:left;font-weight:500;color:var(--tinta)}
.comparativa .si{color:var(--verde);font-weight:800;font-size:1.05rem}
.comparativa .no{color:#a7a9ad}
.comparativa tr:last-child th,.comparativa tr:last-child td{border-bottom:0}
.comparativa__precio td{font-weight:800;font-size:1.3rem;line-height:1;color:var(--tinta)}
.comparativa__precio small{display:block;font-weight:500;font-size:.6875rem;color:var(--suave);margin-top:.25rem}
.destacada{display:inline-block;background:var(--amarillo);color:var(--tinta);font-weight:700;font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .45rem;border-radius:.3rem;margin-bottom:.35rem}
.comparativa[data-recomendado="base"] .col-base,
.comparativa[data-recomendado="video"] .col-video,
.comparativa[data-recomendado="exterior"] .col-exterior{background:#fff7cc}
.packs__nota{font-size:.8125rem;color:var(--suave);margin:.9rem 0 1.6rem}
@media (max-width:639px){
  .comparativa thead tr,.comparativa tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .comparativa thead th{overflow-wrap:anywhere;hyphens:auto;padding-inline:.35rem}
  .comparativa thead td{display:none}
  .comparativa tbody th{grid-column:1/-1;border-bottom:0;padding-bottom:.1rem}
  .comparativa tbody td{padding-top:.35rem}
}

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--gris-1)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.05rem 0;font-weight:600;font-size:1rem;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.6rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:.3rem}
.faq p{margin:0 0 1.15rem;font-size:.9375rem}

/* ── Llamada final: anticipa la banda del formulario del destino ──────────── */
.final{padding-block:2.75rem;text-align:center}
.final h2{font-size:1.9rem;font-weight:800;margin-bottom:.25rem}
.final__sub{margin:0 0 .6rem;color:#fff;font-weight:500}
.final__24h{margin:0 0 1.4rem;color:#eef0f2;font-size:.9375rem}
.final__nota{margin:1rem auto 0;max-width:30rem;font-size:.8125rem;color:#e3e5e8}

/* ── Pie (grafito, como el del destino) ───────────────────────────────────── */
.pie{background:var(--grafito);color:#dfe1e4;padding-block:2.25rem calc(7rem + env(safe-area-inset-bottom));font-size:.8125rem}
.pie p{margin:0 0 .8rem;line-height:1.6;overflow-wrap:break-word}
.pie strong{color:#fff}
.pie a{color:#fff}
.pie .logo{color:#fff}
.pie .logo__acento,.pie .logo__editor{color:#c3c6cb}
.pie .logo__marca{background:#25272a}
.logo--pie{margin-bottom:1.1rem}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:.2rem 1rem;margin-top:1.1rem}
.pie__enlaces a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}
.pie--simple{padding-bottom:2.25rem}

/* ── Botón flotante en móvil ──────────────────────────────────────────────── */
.cta-fija{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:40;transform:translateX(-50%);transition:transform .25s,opacity .25s,visibility .25s;width:max-content;max-width:calc(100% - 2rem)}
.cta-fija .boton{box-shadow:0 18px 30px -10px rgb(31 33 36 / .6)}
.cta-fija--oculta{transform:translate(-50%,160%);opacity:0;visibility:hidden}

/* ── Promoción caducada (clase puesta en <head> según oferta.fin_iso) ─────── */
.terminada{padding-block:4rem;text-align:center}
.terminada__etiqueta{display:inline-block;margin:0 0 1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--amarillo)}
.terminada__titulo{font-size:1.9rem;font-weight:800;margin:0 auto .9rem;max-width:32rem;text-wrap:balance}
.terminada__texto{margin:0 auto 1.75rem;max-width:32rem;color:#eef0f2}
.oferta-terminada .terminada{display:block}
.oferta-terminada main > :not(.terminada),
.oferta-terminada .solo-oferta,
.oferta-terminada .cta-fija,
.oferta-terminada .boton.cabecera__cta{display:none}

/* ── Páginas legales ──────────────────────────────────────────────────────── */
.legal{max-width:46rem;padding-block:2rem 3rem;overflow-wrap:break-word}
.legal__volver{display:inline-block;margin-bottom:1.25rem;font-size:.9375rem;font-weight:600}
.legal h1{font-size:2rem;font-weight:800;margin:0 0 .4rem}
.legal__meta{font-size:.8125rem;color:var(--suave);margin:0 0 1.75rem}
.legal h2{font-size:1.2rem;font-weight:700;margin:2rem 0 .6rem}
.legal h3{font-size:1rem;font-weight:700;margin:1.25rem 0 .4rem}
.legal p,.legal li{font-size:.9375rem;line-height:1.7}
.legal p{margin:0 0 .85rem}
.legal ul{padding-left:1.25rem;margin:0 0 .85rem}
.legal li{margin-bottom:.35rem}


/* ── Escena del hero: móvil con la app de la alarma, animado ──────────────── */
.escena{position:relative;margin:.5rem auto 1.5rem;width:min(100%,21rem);display:grid;place-items:center}
.escena__brillo{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,rgb(255 209 2 / .4),rgb(255 209 2 / .12) 55%,transparent);animation:respirar 6s ease-in-out infinite}
@keyframes respirar{50%{transform:scale(1.08);opacity:.7}}
.movil{position:relative;width:min(15.5rem,calc(100vw - 4.5rem));border-radius:2.4rem;background:#111214;padding:.6rem;box-shadow:0 30px 60px -25px rgb(0 0 0 / .8),inset 0 0 0 2px #2a2c30;z-index:1}
.movil::before{content:"";position:absolute;top:.95rem;left:50%;transform:translateX(-50%);width:4.2rem;height:1.05rem;border-radius:1rem;background:#111214;z-index:2}
.movil__pantalla{background:#f4f5f7;border-radius:1.9rem;padding:2.2rem .75rem .9rem;overflow:hidden;min-height:28.5rem}
.app__cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.app__cab small{display:block;font-size:.625rem;color:var(--suave)}
.app__cab strong{font-size:.875rem;color:var(--tinta)}
.app__estado{display:flex;align-items:center;gap:.3rem;font-size:.625rem;font-weight:700;color:var(--verde);background:#e3f3ea;padding:.25rem .5rem;border-radius:999px}
.app__estado i{width:.4rem;height:.4rem;border-radius:50%;background:var(--verde);animation:parpadeo 1.6s infinite}
@keyframes parpadeo{50%{opacity:.25}}
.app__camara{position:relative;border-radius:.8rem;overflow:hidden;margin-bottom:.7rem;box-shadow:0 6px 16px -10px rgb(0 0 0 / .5)}
.app__camara svg{display:block;width:100%;height:auto}
.app__directo{position:absolute;top:.45rem;left:.45rem;display:flex;align-items:center;gap:.25rem;font-size:.5625rem;font-weight:700;color:#fff;background:rgb(0 0 0 / .55);padding:.15rem .4rem;border-radius:.3rem}
.app__directo i{width:.35rem;height:.35rem;border-radius:50%;background:#e5484d;animation:parpadeo 1s infinite}
.app__lugar{position:absolute;bottom:.4rem;left:.45rem;font-size:.5625rem;font-weight:600;color:#fff;background:rgb(0 0 0 / .45);padding:.1rem .35rem;border-radius:.3rem}
.deteccion{animation:deteccion 9s infinite}
.intruso{animation:intruso 9s infinite}
@keyframes deteccion{0%,9%{opacity:0}11%,13%{opacity:1}12%{opacity:.3}14%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes intruso{0%,6%{opacity:0;transform:translateX(14px)}10%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.notifs{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.notif{display:flex;gap:.5rem;align-items:center;background:#fff;border-radius:.75rem;padding:.5rem .6rem;box-shadow:0 6px 14px -10px rgb(0 0 0 / .45);font-size:.625rem;line-height:1.3;color:var(--suave);opacity:0}
.notif b{display:block;font-size:.6875rem;color:var(--tinta)}
.notif__icono{width:1.5rem;height:1.5rem;border-radius:.45rem;background:var(--amarillo);color:var(--tinta);display:grid;place-items:center;font-weight:800;font-size:.75rem;flex-shrink:0}
.notif__icono--azul{background:#dbeafe;color:#1d4ed8}
.notif__icono--verde{background:#dcfce7;color:#15803d}
.notif--1{animation:notif1 9s infinite}
.notif--2{animation:notif2 9s infinite}
.notif--3{animation:notif3 9s infinite}
@keyframes notif1{0%,10%{opacity:0;transform:translateY(-8px) scale(.97)}14%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes notif2{0%,28%{opacity:0;transform:translateY(-8px) scale(.97)}32%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes notif3{0%,46%{opacity:0;transform:translateY(-8px) scale(.97)}50%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-4px)}}
.flotante{position:absolute;z-index:2;font-size:.75rem;font-weight:700;color:var(--tinta);background:#fff;padding:.45rem .75rem;border-radius:999px;box-shadow:0 12px 24px -12px rgb(0 0 0 / .55);animation:flotar 6s ease-in-out infinite;white-space:nowrap}
.flotante::before{content:"✓ ";color:var(--verde)}
.flotante--a{right:-.6rem;bottom:2.6rem}
@keyframes flotar{50%{transform:translateY(-7px)}}
.pegatina{
  position:absolute;bottom:-1.4rem;left:-.4rem;z-index:3;width:5.6rem;height:5.6rem;border-radius:50%;
  background:var(--amarillo);color:var(--tinta);display:grid;place-items:center;text-align:center;margin:0;
  transform:rotate(-12deg);font-weight:800;font-size:.8125rem;line-height:1.1;text-transform:uppercase;
  box-shadow:0 12px 24px -10px rgb(0 0 0 / .6);animation:pegatina 4s ease-in-out infinite;
}
.pegatina span{display:block;font-size:1.1rem}
@keyframes pegatina{50%{transform:rotate(-6deg) scale(1.04)}}

.escena{contain:layout paint}
.escena.pausada *,.escena.pausada{animation-play-state:paused!important}

/* ── Casa ilustrada: se enciende al hacer scroll por la línea de tiempo ───── */
.casa{margin:0 auto 1.75rem;width:min(100%,20rem);order:-1}  /* en móvil, encima del texto */
.casa svg{display:block;width:100%;height:auto;font-family:var(--fuente)}
.punto{opacity:.22;transition:opacity .5s}
.punto .onda{opacity:0;transform-box:fill-box;transform-origin:center}
.senal{opacity:0;transition:opacity .5s}
.casa[data-paso="1"] .punto--1,
.casa[data-paso="2"] :is(.punto--1,.punto--2),
.casa[data-paso="3"] :is(.punto--1,.punto--2,.punto--3),
.casa[data-paso="4"] .punto{opacity:1}
.casa[data-paso="1"] .punto--1 .onda,.casa[data-paso="2"] .punto--2 .onda,
.casa[data-paso="3"] .punto--3 .onda,.casa[data-paso="4"] .punto--4 .onda{animation:onda 1.6s ease-out infinite}
@keyframes onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.casa:is([data-paso="2"],[data-paso="3"],[data-paso="4"]) .senal{opacity:1;animation:senal 1.2s linear infinite}
@keyframes senal{to{stroke-dashoffset:-24}}
/* Línea de tiempo: se rellena hasta el paso activo */
.linea::after{content:"";position:absolute;left:1.1rem;top:.6rem;width:2px;height:calc(100% - 1.2rem);background:var(--amarillo);transform-origin:top;transform:scaleY(var(--progreso,1));transition:transform .5s ease}
.linea::before{background:rgb(255 209 2 / .18)}
.linea__paso .linea__marca{transition:transform .3s,box-shadow .3s}
.linea__paso.activo .linea__marca{transform:scale(1.12);box-shadow:0 0 0 .35rem rgb(255 209 2 / .2)}
.js .linea__paso:not(.alcanzado) .linea__marca{background:#5a5d63;color:#c3c6cb}
.js .linea__paso:not(.alcanzado) :is(h3,p,.linea__tiempo){opacity:.45}
.linea__paso :is(h3,p,.linea__tiempo){transition:opacity .4s}

/* ── Aparición al hacer scroll (solo si hay JS; sin JS se ve todo) ────────── */
.js [data-revelar]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js [data-revelar].visto{opacity:1;transform:none}
.js .pasos[data-revelar] .paso{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .pasos[data-revelar].visto .paso{opacity:1;transform:none}
.js .pasos[data-revelar].visto .paso:nth-child(2){transition-delay:.12s}
.js .pasos[data-revelar].visto .paso:nth-child(3){transition-delay:.24s}

/* ── Destello periódico en los botones principales ────────────────────────── */
.boton--brillo{position:relative;overflow:hidden;isolation:isolate}
.boton--brillo::after{content:"";position:absolute;inset:-50% auto -50% -60%;width:40%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .65),transparent);transform:skewX(-20deg);animation:brillo 4.5s ease-in-out infinite;z-index:-1}
@keyframes brillo{0%,62%{left:-60%}82%,100%{left:130%}}

/* ── Pantallas muy estrechas (Galaxy Fold cerrado, móviles de 320 px) ────── */
@media (max-width:359px){
  .cabecera .etiqueta{display:none}            /* la franja superior ya dice «Publicidad» */
  .hero{padding-block:1.6rem 2.25rem}
  .hero__titulo{font-size:1.8rem}
  .hero__lead{font-size:.9375rem;margin-bottom:1rem}
  .precio{margin-bottom:1.1rem}
  .precio__cifra{font-size:2.1rem}
  .boton{padding-inline:1.1rem;font-size:1rem}
  .comparativa{font-size:.8125rem}
  .comparativa__precio td{font-size:1.1rem}
}

/* ── Escritorio ───────────────────────────────────────────────────────────── */
@media (min-width:640px){
  .hero__titulo{font-size:2.75rem}
  .valoraciones__fila{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.75rem}
  .sello-oficial{margin-left:auto;min-width:0;flex:1 1 18rem;justify-content:flex-end}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .paso{grid-template-columns:1fr}
  .paso__numero{grid-row:auto;margin-bottom:.6rem}
  .garantias{grid-template-columns:1fr 1fr}
  .recomendador__opciones{grid-template-columns:repeat(3,1fr)}
  .seccion__titulo{font-size:2.2rem}
  .comparativa{font-size:.9375rem}
  .comparativa th,.comparativa td{padding:.95rem 1rem}
  .comparativa tbody th{width:40%}
  .final h2{font-size:2.6rem}
}
@media (min-width:860px){
  .hero{padding-block:3.25rem 4rem}
  .hero__rejilla{grid-template-columns:1.1fr .9fr;gap:3.25rem}
  .hero__titulo{font-size:3.25rem}
  .boton.cabecera__cta{display:inline-flex;padding:.7rem 1.15rem;font-size:.9375rem;min-height:44px}
  .alarma__rejilla{grid-template-columns:1.1fr .9fr;gap:3.25rem;align-items:start}
  .casa{position:sticky;top:6rem;order:2;width:100%;margin:0}
  .escena{width:100%;max-width:24rem}
  .movil{width:17rem}
}
/* Pantalla ancha y alta: sin botón flotante. En móvil horizontal (poca altura) se queda. */
@media (min-width:860px) and (min-height:501px){
  .cta-fija{display:none}
  .pie{padding-bottom:2.25rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .notif,.deteccion,.intruso{opacity:1!important;transform:none!important}
  .js [data-revelar],.js .pasos[data-revelar] .paso{opacity:1;transform:none}
  .boton--brillo::after{display:none}
}