/* ===========================================================
   Verisure Alarmas — Sistema visual premium
   Inspiración: web.dev (radios, sombras, tipografía) + paleta Verisure
   =========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&family=Google+Sans:wght@400;500;700;800&display=swap");

:root{
  /* Marca */
  --vs-red:#DC143C;
  --vs-red-dark:#B30E30;
  --vs-red-darker:#8a0a24;
  --vs-red-50:#fef7f8;
  --vs-red-100:#fce4e9;
  --vs-red-200:#f9b8c3;
  --vs-red-500:#DC143C;

  /* Neutro */
  --ink-900:#202124;
  --ink-800:#3c4043;
  --ink-700:#5f6368;
  --ink-500:#80868b;
  --ink-300:#bdc1c6;
  --ink-200:#dadce0;
  --ink-100:#e8eaed;
  --ink-50:#f1f3f4;
  --bg-0:#ffffff;
  --bg-1:#f8f9fa;
  --bg-2:#f1f3f4;

  /* Elevation Material */
  --elev-1:0 1px 2px 0 rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --elev-2:0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
  --elev-3:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
  --elev-4:0 8px 16px 4px rgba(60,64,67,.16),0 2px 4px rgba(60,64,67,.3);

  /* Radios */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:28px;
  --r-pill:999px;

  /* Tipografía base */
  --font-display:"Google Sans",Roboto,Arial,Helvetica,sans-serif;
  --font-body:"Google Sans Text","Google Sans",Roboto,Arial,Helvetica,sans-serif;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;line-height:1.6;
  color:var(--ink-900);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--vs-red);text-decoration:none;transition:color .15s}
a:hover{color:var(--vs-red-dark);text-decoration:underline}

/* Tipografía */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-900);line-height:1.18;margin:0 0 16px;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.1rem,5vw,3.3rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.018em}
h3{font-size:1.22rem;font-weight:600;letter-spacing:-.005em}
h4{font-size:1rem;font-weight:600;letter-spacing:0}
p{margin:0 0 14px}
.lead{font-size:1.13rem;color:var(--ink-700);line-height:1.65;max-width:60ch}
ul{padding-left:1.1rem;margin:0 0 14px}
li{margin:.3rem 0}
small{font-size:.85rem;color:var(--ink-700)}

/* Layout */
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.content-wrap{max-width:760px;margin:0 auto}
.muted{color:var(--ink-700)}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}

/* ==================== Header premium ==================== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(218,220,224,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 16px -10px rgba(15,30,55,.08);
  transition:box-shadow .25s ease, background .25s ease;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px;position:relative}
/* Línea sutil con gradiente debajo del header */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent 0%, rgba(220,20,60,.18) 40%, rgba(220,20,60,.18) 60%, transparent 100%);
  opacity:.6;
}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:700;color:var(--ink-900);font-size:1.1rem;letter-spacing:-.01em;font-family:var(--font-display);text-decoration:none}
.logo:hover{text-decoration:none}
.logo-mark{
  width:38px;height:38px;
  border-radius:50%;
  display:inline-grid;place-items:center;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-.04em;
  color:#fff;
  position:relative;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.30), transparent 55%),
    linear-gradient(140deg, #F0204A 0%, #DC143C 45%, #A50E2C 100%);
  box-shadow:
    0 2px 6px -1px rgba(220,20,60,.35),
    0 10px 22px -8px rgba(220,20,60,.45),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 6px rgba(0,0,0,.18);
  transition:transform .28s cubic-bezier(.2,.7,.3,1.2),box-shadow .25s ease;
  overflow:hidden;
  isolation:isolate;
}
.logo-mark > *{position:relative;z-index:1}
.logo-mark::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 48%);
  pointer-events:none;
}
.logo-mark::after{
  content:"";position:absolute;inset:1px;border-radius:50%;
  border:1px solid rgba(255,255,255,.20);
  pointer-events:none;
}
.logo:hover .logo-mark,
.logo:focus-visible .logo-mark{
  transform:translateY(-1px) rotate(-8deg) scale(1.06);
  box-shadow:
    0 4px 10px -2px rgba(220,20,60,.5),
    0 14px 30px -8px rgba(220,20,60,.45),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -2px 6px rgba(0,0,0,.18);
}
/* Logo en footer: tamaño contenido */
.site-footer .logo-mark,
.footer-brand .logo-mark{
  width:38px;height:38px;
  font-size:1.2rem;
}
.nav{display:flex;gap:32px;flex:1;justify-content:center}
.nav a{color:var(--ink-900);font-weight:500;font-size:.93rem;padding:6px 0;position:relative;transition:color .2s ease;letter-spacing:.005em}
.nav a:hover{color:var(--vs-red);text-decoration:none}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:linear-gradient(90deg,var(--vs-red) 0%,var(--vs-red-dark) 100%);
  border-radius:var(--r-pill);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1.1);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--vs-red);font-weight:600}
.menu-toggle{display:none;border:0;background:transparent;cursor:pointer;color:var(--ink-900);padding:0;width:36px;height:36px;position:relative;font-size:0;border-radius:var(--r-sm);transition:background .15s}
.menu-toggle:hover{background:var(--bg-1)}
.menu-toggle::before,
.menu-toggle::after{
  content:"";position:absolute;left:50%;top:50%;
  width:22px;height:2.5px;
  margin-left:-11px;margin-top:-1.25px;
  background:currentColor;border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.7,.3,1.1),box-shadow .15s,opacity .15s;
}
.menu-toggle::before{transform:translateY(-7px);box-shadow:0 7px 0 currentColor}
.menu-toggle::after{transform:translateY(7px)}
.site-header.is-open .menu-toggle::before{transform:translateY(0) rotate(45deg);box-shadow:none}
.site-header.is-open .menu-toggle::after{transform:translateY(0) rotate(-45deg)}
.header-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--vs-red) 0%,var(--vs-red-dark) 100%);
  color:#fff;font-weight:600;padding:9px 18px;
  border-radius:var(--r-pill);
  font-size:.88rem;letter-spacing:.01em;
  box-shadow:0 2px 6px -1px rgba(220,20,60,.35), inset 0 1px 0 rgba(255,255,255,.2);
  transition:background .2s,box-shadow .25s,transform .15s;
  position:relative;
}
.header-cta:hover{
  text-decoration:none;color:#fff;
  box-shadow:0 4px 10px -2px rgba(220,20,60,.5),0 10px 20px -8px rgba(220,20,60,.45),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-1px);
}
.header-cta svg{width:13px;height:13px;transition:transform .25s ease}
.header-cta:hover svg{transform:translateX(2px)}
@media (max-width:920px){
  .nav,.header-cta{display:none}
  .menu-toggle{display:block}
  /* Logo y botón hamburguesa siempre en la primera fila */
  .site-header .header-inner{align-items:center}
  .site-header .logo{order:1}
  .site-header .menu-toggle{order:2;margin-left:auto;align-self:center}
  .site-header .nav{order:3}
  .site-header .header-cta{order:4}
  /* Cuando el menú está abierto, el header crece en columna y agrupa nav + CTA */
  .site-header.is-open .header-inner{flex-wrap:wrap;height:auto;align-items:center;padding-bottom:16px;row-gap:0}
  .site-header.is-open .nav{
    display:flex;
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    gap:0;
    margin:10px 0 0;
    padding:6px 0 0;
    border-top:1px solid var(--ink-100);
    background:transparent;
  }
  .site-header.is-open .nav a{padding:14px 4px;border-bottom:1px solid var(--ink-100);width:100%}
  .site-header.is-open .nav a:last-child{border-bottom:0}
  /* CTA en su propia fila, manteniendo fondo rojo y texto blanco */
  .site-header.is-open .header-cta{
    display:inline-flex;
    flex-basis:100%;
    width:max-content;
    margin:14px 0 4px;
    padding:13px 24px;
    background:var(--vs-red);
    color:#fff;
    align-self:flex-start;
    box-shadow:0 6px 16px -8px rgba(220,20,60,.45);
  }
}

/* ==================== Hero ==================== */
.hero{padding:88px 0 72px;background:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:1000px;height:1000px;background:radial-gradient(circle at center,var(--vs-red-50) 0%,transparent 60%);top:-460px;right:-340px;z-index:0;pointer-events:none}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{margin-bottom:18px}
.hero-sub{font-size:1.15rem;color:var(--ink-700);margin-bottom:28px;max-width:560px;line-height:1.65}
.hero ul{list-style:none;padding:0;margin:22px 0 28px}
.hero ul li{padding:10px 0 10px 38px;position:relative;color:var(--ink-900);font-weight:500;font-size:.98rem}
.hero ul li::before{content:"";position:absolute;left:0;top:13px;width:22px;height:22px;border-radius:var(--r-pill);background:var(--vs-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
@media (max-width:980px){.hero .container{grid-template-columns:1fr;gap:40px}.hero{padding:48px 0 40px}}

.price-badge{display:inline-flex;align-items:center;gap:10px;background:var(--vs-red-50);color:var(--vs-red-dark);font-weight:500;font-size:.85rem;padding:8px 18px;border-radius:var(--r-pill);margin-bottom:22px;border:1px solid var(--vs-red-100)}
.price-badge::before{content:"";width:8px;height:8px;background:var(--vs-red);border-radius:50%}

.price-highlight{margin-top:22px;padding:24px 28px;border-radius:var(--r-lg);background:var(--ink-900);color:#fff;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;box-shadow:var(--elev-2);position:relative;overflow:hidden}
.price-highlight::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(220,20,60,.35) 0%,transparent 70%);right:-60px;top:-60px}
.price-highlight strong{font-family:var(--font-display);font-size:2.15rem;font-weight:700;color:#fff;letter-spacing:-.02em;position:relative;z-index:1}
.price-highlight .pm{color:#ffc7d1;font-weight:500;font-size:.95rem;position:relative;z-index:1}
.price-disclaimer{font-size:.8rem;color:var(--ink-700);margin-top:12px;line-height:1.55}

.awards{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.award{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-700);background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-pill);padding:8px 16px;font-weight:500}
.award svg{width:15px;height:15px;color:var(--vs-red);flex-shrink:0}

/* ==================== Lead form ==================== */
.lead-form{background:#fff;border-radius:var(--r-lg);padding:34px;box-shadow:var(--elev-3);border:1px solid var(--ink-200);position:relative}
.lead-form::before{content:"";position:absolute;top:0;left:24px;right:24px;height:4px;background:linear-gradient(90deg,var(--vs-red) 0%,var(--vs-red-dark) 100%);border-radius:var(--r-pill)}
.lead-form h2{font-size:1.45rem;margin-bottom:8px;color:var(--ink-900);font-weight:700;letter-spacing:-.01em}
.form-tagline{font-size:.95rem;color:var(--ink-700);margin-bottom:24px}
.form-row{margin-bottom:16px;position:relative}
.form-row label{display:block;font-size:.82rem;color:var(--ink-900);font-weight:500;margin-bottom:8px;letter-spacing:.005em}
.form-row input,.form-row select,.form-row textarea{width:100%;border:1px solid var(--ink-200);border-radius:var(--r-xs);padding:14px 16px;font-size:1rem;font-family:inherit;color:var(--ink-900);transition:border-color .2s,box-shadow .2s;background:#fff}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:0;border-color:var(--vs-red);box-shadow:0 0 0 3px rgba(220,20,60,.15)}
.form-row input::placeholder{color:var(--ink-500)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-check{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--ink-700);margin:10px 0 18px;line-height:1.55}
.form-check input{margin-top:2px;accent-color:var(--vs-red);width:16px;height:16px;flex-shrink:0}
.form-trust{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.form-trust span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--ink-700);font-weight:500}
.form-trust svg{width:14px;height:14px;color:#1e8e3e}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--vs-red);color:#fff;border:0;border-radius:var(--r-pill);padding:15px 30px;font-size:1rem;font-weight:500;cursor:pointer;width:100%;transition:background .2s,box-shadow .2s,transform .15s;letter-spacing:.005em;font-family:var(--font-body);text-align:center;line-height:1.2}
.btn:hover{background:var(--vs-red-dark);text-decoration:none;color:#fff;box-shadow:var(--elev-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--elev-1)}
.btn-outline{background:transparent;color:var(--vs-red);border:1.5px solid var(--vs-red);box-shadow:none}
.btn-outline:hover{background:var(--vs-red);color:#fff}
.btn-light{background:#fff;color:var(--vs-red)}
.btn-light:hover{background:#fff;color:var(--vs-red-dark)}
.btn-inline{width:auto;padding:12px 24px;font-size:.93rem}
.form-disclaimer{text-align:center;font-size:.78rem;color:var(--ink-700);margin:14px 0 0;line-height:1.55}

/* ==================== Sections base ==================== */
section{padding:84px 0}
@media (max-width:780px){section{padding:52px 0}}
.section-light{background:var(--bg-1)}
.section-soft{background:linear-gradient(180deg,var(--bg-1) 0%,#fff 100%)}
.section-dark{background:var(--ink-900);color:var(--ink-200)}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:var(--ink-300)}
.section-title{text-align:center;max-width:780px;margin:0 auto 52px}
.section-title h2{margin-bottom:14px}
.section-title p{color:var(--ink-700);font-size:1.08rem;line-height:1.65}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:600;color:var(--vs-red);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}

/* Grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:56px;align-items:center}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;gap:18px}.grid-2{grid-template-columns:1fr;gap:36px}}
@media (max-width:640px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* ==================== Cards ==================== */
.card{background:#fff;border-radius:var(--r-lg);padding:32px 28px;border:1px solid var(--ink-200);transition:box-shadow .25s,transform .25s,border-color .2s}
.card:hover{box-shadow:var(--elev-2);transform:translateY(-3px);border-color:transparent}
.card-icon{width:56px;height:56px;border-radius:var(--r-md);background:var(--vs-red-50);color:var(--vs-red);display:grid;place-items:center;margin-bottom:18px}
.card-icon svg{width:28px;height:28px}
.card h3{color:var(--ink-900);margin-bottom:12px;font-size:1.18rem}
.card p{color:var(--ink-700);margin:0;font-size:.95rem;line-height:1.65}

/* Trust strip */
.trust{padding:36px 0;background:#fff;border-top:1px solid var(--ink-200);border-bottom:1px solid var(--ink-200)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:780px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
.trust-item{display:flex;align-items:center;gap:14px;padding:6px}
.trust-icon{width:48px;height:48px;color:var(--vs-red);flex-shrink:0;background:var(--vs-red-50);border-radius:var(--r-pill);display:grid;place-items:center}
.trust-icon svg{width:24px;height:24px}
.trust-item strong{color:var(--ink-900);font-size:.95rem;display:block;margin-bottom:2px;font-weight:600}
.trust-item span{color:var(--ink-700);font-size:.82rem;line-height:1.4}

/* ==================== Stats / métricas ==================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
@media (max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:24px 16px;border-radius:var(--r-md);background:#fff;border:1px solid var(--ink-200)}
.stat-num{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--vs-red);letter-spacing:-.02em;line-height:1}
.stat-label{font-size:.85rem;color:var(--ink-700);margin-top:8px;line-height:1.4}

/* ==================== Steps ==================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:30px 24px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--ink-200);counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;top:-14px;left:24px;background:var(--vs-red);color:#fff;font-weight:700;font-size:.85rem;width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;font-family:var(--font-display);box-shadow:var(--elev-1)}
.step h3{margin-top:14px;margin-bottom:8px;font-size:1.1rem}
.step p{color:var(--ink-700);font-size:.92rem;line-height:1.6;margin:0}

/* ==================== Split feature ==================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:980px){.split{grid-template-columns:1fr;gap:36px}.split.reverse{direction:ltr}.split.reverse>:first-child{order:2}}
.split img{border-radius:var(--r-lg);box-shadow:var(--elev-2);width:100%}
.split h2{margin-bottom:14px}
.split ul{list-style:none;padding:0;margin:18px 0 0}
.split ul li{padding:8px 0 8px 32px;position:relative;color:var(--ink-900);font-size:.97rem}
.split ul li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;background:var(--vs-red-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC143C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;border-radius:var(--r-pill)}

/* ==================== Packs ==================== */
.grid-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media (max-width:980px){.grid-packs{grid-template-columns:1fr;gap:18px;max-width:480px;margin:0 auto}}
.pack{background:#fff;border-radius:var(--r-lg);padding:38px 28px 30px;border:1px solid var(--ink-200);position:relative;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.pack:hover{box-shadow:var(--elev-2);transform:translateY(-3px)}
.pack.pack-featured{border-color:var(--vs-red);box-shadow:var(--elev-3);transform:translateY(-6px)}
.pack.pack-featured:hover{transform:translateY(-9px)}
.pack-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--ink-900);color:#fff;font-size:.72rem;font-weight:500;padding:6px 16px;border-radius:var(--r-pill);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pack.pack-featured .pack-tag{background:var(--vs-red);box-shadow:var(--elev-1)}
.pack h3{margin-top:10px;font-size:1.22rem;text-align:center;font-weight:700}
.pack-desc{text-align:center;color:var(--ink-700);font-size:.9rem;margin:0 0 16px}
.pack ul{list-style:none;padding:0;margin:18px 0 24px;font-size:.94rem;flex:1}
.pack ul li{padding:7px 0 7px 28px;position:relative;color:var(--ink-900)}
.pack ul li::before{content:"";position:absolute;left:0;top:9px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC143C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}
.pack-price{border-top:1px solid var(--ink-200);padding-top:18px;text-align:center;margin-bottom:18px}
.pack-price .num{font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--ink-900);line-height:1.1;letter-spacing:-.02em}
.pack-price .num small{font-size:.85rem;font-weight:500;color:var(--ink-700);letter-spacing:0}
.pack-price .extra{color:var(--vs-red);font-size:.82rem;font-weight:500;margin-top:8px}

/* ==================== Comparativa ==================== */
.compare{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--ink-200);background:#fff;box-shadow:var(--elev-1)}
.compare table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px}
.compare th,.compare td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--ink-100)}
.compare th{background:var(--bg-1);color:var(--ink-900);font-weight:600;font-family:var(--font-display);font-size:.92rem;text-transform:uppercase;letter-spacing:.04em}
.compare td:first-child{font-weight:500;color:var(--ink-900)}
.compare tr:last-child td{border-bottom:0}
.compare .yes{color:#1e8e3e;font-weight:600}
.compare .no{color:var(--ink-500)}
.compare .yes::before{content:"✓ "}
.compare .no::before{content:"— "}

/* ==================== Opinions ==================== */
.opinion{background:#fff;border-radius:var(--r-lg);padding:28px;border:1px solid var(--ink-200);transition:box-shadow .2s,transform .2s}
.opinion:hover{box-shadow:var(--elev-1);transform:translateY(-2px)}
.stars{color:#f5a623;font-size:1.05rem;letter-spacing:2px;margin-bottom:12px}
.opinion-text{color:var(--ink-900);margin-bottom:16px;font-size:.97rem;line-height:1.65}
.opinion-author{font-size:.85rem;color:var(--ink-700);font-weight:500;padding-top:14px;border-top:1px solid var(--ink-100);display:flex;align-items:center;gap:10px}
.opinion-author::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vs-red)}

.rating-score{display:flex;align-items:center;gap:24px;background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:28px;box-shadow:var(--elev-1);max-width:680px;margin:0 auto 48px;flex-wrap:wrap;justify-content:center}
.rating-num{font-family:var(--font-display);font-size:3.4rem;font-weight:700;color:var(--ink-900);letter-spacing:-.02em;line-height:1}
.rating-details{flex:1;min-width:200px}
.rating-stars{color:#f5a623;font-size:1.3rem;letter-spacing:3px;margin-bottom:6px}
.rating-label{color:var(--ink-700);font-size:.92rem}

/* ==================== FAQ ==================== */
.faq{max-width:820px;margin:0 auto}
.faq details{border:1px solid var(--ink-200);border-radius:var(--r-md);margin-bottom:12px;background:#fff;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.faq details:hover{border-color:var(--ink-300)}
.faq details[open]{box-shadow:var(--elev-1)}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:600;color:var(--ink-900);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:1.02rem;font-family:var(--font-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:24px;height:24px;border-radius:var(--r-pill);background:var(--vs-red-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC143C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s,background .2s;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--vs-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/14px no-repeat}
.faq details[open] summary{border-bottom:1px solid var(--ink-100)}
.faq details p{padding:18px 24px 22px;margin:0;color:var(--ink-700);font-size:.96rem;line-height:1.7}
.faq details ul{padding:0 24px 22px 44px;color:var(--ink-700);font-size:.94rem}

/* ==================== Form section ==================== */
.form-section{background:linear-gradient(180deg,var(--bg-1) 0%,#fff 100%);padding:84px 0}
.form-section .lead-form{max-width:620px;margin:0 auto}

/* ==================== Breadcrumb ==================== */
.breadcrumb{font-size:.85rem;color:var(--ink-700);margin-bottom:24px;font-weight:500}
.breadcrumb a{color:var(--ink-700)}
.breadcrumb a:hover{color:var(--vs-red);text-decoration:none}
.breadcrumb span{margin:0 8px;color:var(--ink-300)}

/* Breadcrumb inferior, debajo del footer, centrado */
.breadcrumb-bottom{background:#161616;border-top:1px solid #3c4043;padding:18px 24px;text-align:center}
.breadcrumb-bottom ol{list-style:none;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:0;margin:0;font-size:.85rem;color:#9aa0a6;font-family:var(--font-body)}
.breadcrumb-bottom li{margin:0;display:inline-flex;align-items:center;gap:10px}
.breadcrumb-bottom li::after{content:"›";color:#5f6368}
.breadcrumb-bottom li:last-child::after{display:none}
.breadcrumb-bottom a{color:#bdc1c6;transition:color .15s}
.breadcrumb-bottom a:hover{color:#fff;text-decoration:none}
.breadcrumb-bottom [aria-current="page"]{color:#fff;font-weight:500}

/* ==================== CTA banner ==================== */
.cta-banner{background:linear-gradient(135deg,var(--ink-900) 0%,#3c4043 100%);color:#fff;border-radius:var(--r-xl);padding:54px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(220,20,60,.25) 0%,transparent 70%);right:-100px;top:-100px}
.cta-banner > *{position:relative;z-index:1}
.cta-banner h2{color:#fff;margin-bottom:8px}
.cta-banner p{color:#bdc1c6;margin:0;font-size:1.05rem}
.cta-banner .btn{width:auto;padding:15px 32px;white-space:nowrap}
@media (max-width:780px){.cta-banner{padding:36px 28px;text-align:center;flex-direction:column;align-items:flex-start}.cta-banner .btn{width:100%}}

/* ==================== Imágenes responsivas ==================== */
.framed{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ink-200);box-shadow:var(--elev-1)}
.rounded{border-radius:var(--r-lg);overflow:hidden}
.rounded-xl{border-radius:var(--r-xl);overflow:hidden}

/* ==================== Footer ==================== */
.site-footer{background:#1f1f1f;color:#9aa0a6;padding:72px 0 28px}
.site-footer h3{color:#fff;font-size:.92rem;margin-bottom:18px;letter-spacing:.04em;font-weight:600;font-family:var(--font-display);text-transform:uppercase}
.site-footer a{color:#bdc1c6;font-size:.93rem;transition:color .15s}
.site-footer a:hover{color:#fff;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:10px 0}
.footer-brand p{color:#9aa0a6;font-size:.92rem;line-height:1.65;margin:14px 0 16px;max-width:36ch}
.footer-bottom{border-top:1px solid #3c4043;padding-top:28px;font-size:.82rem;color:#80868b;text-align:center;line-height:1.7}
.footer-certs{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;justify-content:center;align-items:center}
.footer-cert{font-size:.7rem;color:#9aa0a6;background:rgba(255,255,255,.03);padding:6px 14px;border-radius:var(--r-pill);border:1px solid #3c4043;letter-spacing:.06em;text-transform:uppercase;font-weight:500}

/* ==================== Hero centrado (mapa, gracias, 404) ==================== */
.hero-center{padding:72px 0 36px;background:#fff;position:relative;overflow:hidden;text-align:center}
.hero-center::before{content:"";position:absolute;width:900px;height:900px;background:radial-gradient(circle at center,var(--vs-red-50) 0%,transparent 60%);top:-460px;left:50%;transform:translateX(-50%);z-index:0;pointer-events:none}
.hero-center .container{position:relative;z-index:1}
.hero-center .price-badge{margin:0 auto 22px}
.hero-center h1{margin:0 auto 18px;max-width:18ch}
.hero-center .lead{margin:0 auto 24px}
@media (max-width:780px){.hero-center{padding:42px 0 28px}}

/* ==================== Equipo / Galería ==================== */
.equipment{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1000px){.equipment{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.equipment{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:440px){.equipment{grid-template-columns:1fr}}

.equip{background:#fff;border-radius:var(--r-lg);border:1px solid var(--ink-200);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s,border-color .2s;padding:12px 12px 0}
.equip:hover{box-shadow:var(--elev-2);transform:translateY(-3px);border-color:transparent}
.equip-media{aspect-ratio:1/1;background:#f1f3f4;position:relative;overflow:hidden;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center}
.equip-media img{width:100%;height:100%;display:block;transition:transform .4s ease}
.equip:hover .equip-media img{transform:scale(1.04)}
/* Foto real con fondo propio: rellena marco */
.equip-media[data-fit="cover"] img{object-fit:cover;object-position:center}
/* Producto sobre fondo blanco: centrado con padding */
.equip-media[data-fit="contain"]{background:linear-gradient(180deg,#f6f8fb 0%,#ffffff 60%,#f6f8fb 100%)}
.equip-media[data-fit="contain"] img{object-fit:contain;object-position:center;padding:14px}
.equip-tag{position:absolute;top:14px;left:14px;font-size:.68rem;font-weight:600;color:#fff;background:rgba(32,33,36,.82);backdrop-filter:blur(6px);padding:5px 12px;border-radius:var(--r-pill);letter-spacing:.05em;text-transform:uppercase;z-index:2}
.equip-media[data-fit="contain"] .equip-tag{color:var(--vs-red);background:#fff;border:1px solid var(--vs-red-100)}
.equip-body{padding:18px 14px 18px;display:flex;flex-direction:column;flex:1}
.equip-body h3{font-size:1.02rem;margin-bottom:8px;color:var(--ink-900);line-height:1.3}
.equip-body p{font-size:.88rem;color:var(--ink-700);line-height:1.6;margin:0 0 12px}
.equip-benefit{margin-top:auto;display:flex;gap:8px;align-items:flex-start;font-size:.78rem;color:#1e8e3e;font-weight:500;line-height:1.4}
.equip-benefit::before{content:"";flex-shrink:0;width:16px;height:16px;background:#e6f4ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e8e3e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;border-radius:var(--r-pill);margin-top:2px}

/* Galería de planos / protección */
.gallery-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:920px){.gallery-3{grid-template-columns:1fr;gap:20px}}
.gallery-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--ink-200);overflow:hidden;transition:box-shadow .25s,transform .25s}
.gallery-card:hover{box-shadow:var(--elev-2);transform:translateY(-2px)}
.gallery-media{aspect-ratio:16/11;background:var(--bg-1);overflow:hidden}
.gallery-media img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-body{padding:20px 22px 22px}
.gallery-body h3{font-size:1.05rem;margin-bottom:6px}
.gallery-body p{font-size:.9rem;color:var(--ink-700);margin:0;line-height:1.6}

/* Figure con caption */
figure.media{margin:0 0 24px;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-1);border:1px solid var(--ink-200);box-shadow:var(--elev-1)}
figure.media img{display:block;width:100%;height:auto}
figure.media figcaption{padding:14px 18px;font-size:.85rem;color:var(--ink-700);background:#fff;border-top:1px solid var(--ink-100);line-height:1.55}

/* Bodegón / hero secundario */
.lineup{background:var(--bg-1);border-radius:var(--r-xl);padding:36px;display:grid;grid-template-columns:1fr 1.4fr;gap:36px;align-items:center;border:1px solid var(--ink-200);overflow:hidden}
@media (max-width:920px){.lineup{grid-template-columns:1fr;padding:28px;gap:24px}}
.lineup img{width:100%;height:auto;border-radius:var(--r-lg)}
.lineup h2{margin-bottom:14px}
.lineup p{color:var(--ink-700)}

/* Polaroid / split con sombra y borde */
.framed-shadow{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--elev-3);border:1px solid var(--ink-200);background:#fff}
.framed-shadow img{width:100%;height:auto;display:block}

/* ==================== Página de éxito (/gracias/) ==================== */
.success-section{padding:64px 0 56px;background:linear-gradient(180deg,#fff 0%,var(--bg-1) 100%);position:relative;overflow:hidden}
.success-section::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(30,142,62,.06),transparent 60%);top:-460px;left:50%;transform:translateX(-50%);pointer-events:none}
.success-card{max-width:600px;margin:0 auto;text-align:center;padding:52px 36px;background:#fff;border-radius:var(--r-xl);box-shadow:var(--elev-3);border:1px solid var(--ink-200);position:relative;z-index:1}
.success-icon{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.35),transparent 55%),linear-gradient(135deg,#34a853 0%,#1e8e3e 70%,#0d652d 100%);display:grid;place-items:center;margin:0 auto 28px;box-shadow:0 14px 32px -8px rgba(30,142,62,.5),inset 0 1px 0 rgba(255,255,255,.3);animation:successPop .55s cubic-bezier(.2,.7,.3,1.45)}
@keyframes successPop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.success-icon svg{width:48px;height:48px;color:#fff;stroke-dasharray:48;stroke-dashoffset:48;animation:successDraw .55s .35s ease forwards}
@keyframes successDraw{to{stroke-dashoffset:0}}
.success-card h1{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:14px;line-height:1.2}
.success-card .lead{color:var(--ink-700);margin:0 auto 28px;max-width:50ch;font-size:1.05rem}
.success-meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.success-meta span{display:inline-flex;align-items:center;gap:8px;background:var(--bg-1);padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--ink-200);font-weight:500;font-size:.85rem;color:var(--ink-700)}
.success-meta svg{width:15px;height:15px;color:#1e8e3e;flex-shrink:0}
.success-card .eyebrow{margin-bottom:14px}

.next-steps-mini{counter-reset:n;list-style:none;padding:0;margin:0 auto 36px;max-width:480px;text-align:left}
.next-steps-mini li{counter-increment:n;display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--ink-100);align-items:flex-start}
.next-steps-mini li:last-child{border-bottom:0}
.next-steps-mini li::before{content:counter(n);flex-shrink:0;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#F0204A 0%,#DC143C 50%,#A50E2C 100%);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.95rem;font-family:var(--font-display);box-shadow:0 2px 6px -1px rgba(220,20,60,.35)}
.next-steps-mini li strong{display:block;color:var(--ink-900);font-size:.97rem;margin-bottom:3px}
.next-steps-mini li p{color:var(--ink-700);font-size:.88rem;line-height:1.55;margin:0}

/* Quick links / explore más */
.quick-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:680px;margin:0 auto}
@media (max-width:640px){.quick-links{grid-template-columns:1fr}}
.quick-link{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px;background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);text-decoration:none;color:var(--ink-900);transition:border-color .2s,box-shadow .2s,transform .2s;text-align:center}
.quick-link:hover{border-color:var(--vs-red);box-shadow:var(--elev-1);transform:translateY(-2px);text-decoration:none;color:var(--ink-900)}
.quick-link-icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--vs-red-50),var(--vs-red-100));color:var(--vs-red);display:grid;place-items:center}
.quick-link-icon svg{width:22px;height:22px}
.quick-link strong{font-size:.96rem;font-weight:600;font-family:var(--font-display);color:var(--ink-900)}
.quick-link small{font-size:.78rem;color:var(--ink-700);line-height:1.5}

.explore-more{max-width:680px;margin:48px auto 0;text-align:center}
.explore-more h2{font-size:.82rem;color:var(--ink-700);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;font-family:var(--font-display)}

/* ==================== Página 404 ==================== */
.error-section{padding:48px 0 56px;background:linear-gradient(180deg,#fff,var(--bg-1));position:relative;overflow:hidden;min-height:calc(100vh - 80px - 200px);display:flex;align-items:center}
.error-section::before{content:"";position:absolute;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,var(--vs-red-50),transparent 60%);top:-560px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0}
.error-card{max-width:700px;margin:0 auto;text-align:center;position:relative;z-index:1}
.error-display{font-family:var(--font-display);font-size:clamp(7rem,18vw,12.5rem);font-weight:800;line-height:.95;letter-spacing:-.06em;background:linear-gradient(135deg,#F0204A 0%,#DC143C 35%,#A50E2C 65%,#3c4043 100%);background-clip:text;-webkit-background-clip:text;color:transparent;display:inline-block;margin:0 0 20px;position:relative;animation:errorFloat 4s ease-in-out infinite}
@keyframes errorFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.error-card h1{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:14px}
.error-card .lead{color:var(--ink-700);margin:0 auto 28px;max-width:48ch;font-size:1.05rem}

.tip{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--r-md);padding:14px 20px;display:flex;align-items:flex-start;gap:12px;text-align:left;max-width:520px;margin:0 auto 36px;font-size:.88rem;color:#78350f;line-height:1.55}
.tip svg{flex-shrink:0;width:20px;height:20px;color:#d97706;margin-top:2px}
.tip a{color:#92400e;font-weight:600;text-decoration:underline}
.tip a:hover{color:#78350f}

/* ==================== Cookie bar (sutil, flotante) ==================== */
.cookie-bar{
  position:fixed;
  bottom:22px;
  left:22px;
  max-width:420px;
  background:#fff;
  border-radius:20px;
  padding:20px 22px 18px;
  box-shadow:0 22px 50px -16px rgba(15,30,55,.28),0 6px 16px -4px rgba(15,30,55,.10);
  border:1px solid var(--ink-200);
  z-index:80;
  font-family:var(--font-body);
  transform:translateY(140%);
  opacity:0;
  pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.7,.3,1.1),opacity .35s ease;
}
.cookie-bar.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.cookie-bar-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.cookie-bar-icon{
  width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 55%),linear-gradient(135deg,var(--vs-red-50),var(--vs-red-100));
  display:grid;place-items:center;flex-shrink:0;color:var(--vs-red);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.cookie-bar-icon svg{width:22px;height:22px}
.cookie-bar h3{font-size:1rem;font-weight:700;margin:0;color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.01em}
.cookie-bar p{font-size:.84rem;color:var(--ink-700);line-height:1.6;margin:0 0 14px}
.cookie-bar p a{color:var(--vs-red);font-weight:500}
.cookie-bar-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-bar-actions .btn{width:auto;flex:1;padding:11px 16px;font-size:.88rem;min-width:0;letter-spacing:0}
.cookie-bar .btn-ghost{background:transparent;color:var(--ink-700);border:1px solid var(--ink-200);box-shadow:none}
.cookie-bar .btn-ghost:hover{background:var(--bg-1);color:var(--ink-900);border-color:var(--ink-300);box-shadow:none;transform:none}
.cookie-bar-close{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border-radius:50%;
  border:0;background:transparent;color:var(--ink-500);cursor:pointer;
  display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.cookie-bar-close:hover{background:var(--bg-1);color:var(--ink-900)}
.cookie-bar-close svg{width:14px;height:14px}
@media (max-width:520px){
  .cookie-bar{left:12px;right:12px;bottom:12px;max-width:none;padding:18px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .cookie-bar{transition:opacity .2s ease}
  .cookie-bar.is-open{transform:none}
}

/* ==================== A11y ==================== */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:10px;top:10px;background:#fff;padding:10px 18px;border-radius:var(--r-xs);z-index:100;box-shadow:var(--elev-2);color:var(--vs-red);font-weight:600}
:focus-visible{outline:3px solid var(--vs-red-200);outline-offset:2px;border-radius:var(--r-xs)}

/* ==================== Anchors offset (sticky header) ==================== */
[id]{scroll-margin-top:78px}

/* ==================== Animations ==================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);animation:rise .6s ease forwards}
  @keyframes rise{to{opacity:1;transform:none}}
}