/* ============================================================
   landing.css — the public page at kolmenapp.com
   Copied VERBATIM from Carolain's styles/landing.css and not edited.

   Keeps her :root: the landing loads nothing else of ours, so her palette
   has to travel with the file.

   Anything our data forces lives in the ADDITIONS block at the end.
   Never edit her rules in place.

   TYPE FLOOR (Kolmena, applied mechanically): every font-size below 11px
   was raised to 11px and nothing else was touched.
   ============================================================ */

/* ============================================================
   Kolmena · landing
   Misma paleta que la plataforma: papel crema, tinta cálida y
   ámbar como único acento. El producto real es la imagen.
   ============================================================ */
:root{
  --ink:#171916;
  --ink-2:#3c413b;
  --muted:#747873;
  --line:#e8e4dc;
  --line-soft:#f2efe9;
  --paper:#faf8f4;
  --cream:#fff8eb;
  --amber:#efa000;
  --amber-2:#ffb719;
  --amber-ink:#8a5c00;
  --dark:#1a1713;      /* banda oscura cálida, no azul */
  --green:#1c7a41;
  --shadow-sm:0 8px 24px rgba(37,32,22,.06);
  --shadow:0 18px 46px rgba(37,32,22,.09);
  --shadow-lg:0 40px 90px rgba(37,32,22,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
button,input{font:inherit}
button,a{cursor:pointer}
/* con los atributos width/height del HTML, sin esto la imagen se estira a 880px */
img{max-width:100%;height:auto;display:block}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.07}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
.wrap{width:min(1160px,calc(100% - 44px));margin:0 auto}

/* el acento: subrayado de miel, no texto arcoíris */
/* subrayado de miel con tope abajo: no invade los descendentes ni la línea siguiente */
.mark{white-space:nowrap;background:linear-gradient(180deg,transparent 63%,rgba(255,183,25,.45) 63%,rgba(255,183,25,.45) 92%,transparent 92%)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 26px;border:1px solid transparent;border-radius:14px;font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn.sm{height:42px;padding:0 18px;border-radius:12px;font-size:13px}
.btn svg{width:17px;height:17px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-honey{background:linear-gradient(140deg,var(--amber),var(--amber-2));color:#231a06;box-shadow:0 12px 28px rgba(226,150,0,.28)}
.btn-honey:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(226,150,0,.38)}
.btn-line{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-line:hover{border-color:var(--amber);color:var(--amber-ink);transform:translateY(-2px)}

/* ---------- cabecera ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:100;height:78px;display:flex;align-items:center;gap:26px;padding:0 clamp(20px,4vw,44px);transition:.26s}
.nav:before{content:"";position:absolute;inset:0;background:rgba(250,248,244,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);opacity:0;transition:opacity .26s}
.nav.stuck:before{opacity:1}
.nav.stuck{height:66px}
.nav>*{position:relative}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.brand b{font-size:21px;letter-spacing:-.045em}
.brand-mark{display:flex;align-items:center;flex:0 0 auto}
/* Ámbar literal y tamaño en px: la marca no depende de la cascada ni de tokens. */
.brand-mark .kolmena-logo{width:31px;height:35px;display:block;overflow:visible;fill:none;stroke:#efa000;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:butt}
.nav-links{flex:1;display:flex;justify-content:center;gap:30px}
.nav-links a{position:relative;color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;transition:color .18s}
.nav-links a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:var(--amber);transition:right .25s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover:after{right:0}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-login{color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}
.nav-login:hover{color:var(--amber-ink)}
.nav-burger{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:#fff}
.nav-burger span{height:2px;border-radius:2px;background:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;padding:150px 0 clamp(70px,9vw,120px);background:var(--paper);overflow:hidden}
/* el resplandor de miel viene de arriba a la derecha, donde está el producto */
.hero-wash{position:absolute;right:-10%;top:-30%;width:1100px;height:1100px;background:radial-gradient(circle,rgba(255,183,25,.3),rgba(255,183,25,.07) 45%,transparent 68%);filter:blur(10px);animation:drift 18s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,36px)}}
.hero-comb{position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='84' viewBox='0 0 48 84'%3E%3Cpath d='M24 0 48 14v28L24 56 0 42V14Z' fill='none' stroke='%23e0d8c8' stroke-width='1'/%3E%3Cpath d='M24 56 48 70v28L24 112 0 98V70Z' fill='none' stroke='%23e0d8c8' stroke-width='1'/%3E%3C/svg%3E");mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 70%)}
.hero-in{position:relative;width:min(1320px,calc(100% - 44px));margin:0 auto;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:clamp(30px,4vw,64px)}

.eyebrow{display:inline-block;padding:7px 14px;border:1px solid #efe4cd;border-radius:999px;background:var(--cream);color:var(--amber-ink);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.hero h1{margin-top:22px;font-size:clamp(42px,4.6vw,68px)}
.hero-copy>p{margin-top:22px;max-width:46ch;color:var(--ink-2);font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.65}
.hero-copy>p b{color:var(--ink)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-foot{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}
.hero-foot li{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px}
.hero-foot svg{width:15px;height:15px;color:var(--green)}

/* marco de navegador: el producto, no un dibujo */
.hero-art{position:relative;perspective:1600px}
.frame{position:relative;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-lg);overflow:hidden;transform:rotateY(-6deg) rotateX(2deg);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.hero-art:hover .frame{transform:rotateY(-2deg) rotateX(0)}
.frame-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-bottom:1px solid var(--line-soft);background:#f7f5f1}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#dfdbd3}
.frame-bar i:first-child{background:#f0b8b2}
.frame-bar i:nth-child(2){background:#f2ddb0}
.frame-bar i:nth-child(3){background:#bfe0c9}
.frame-bar em{margin-left:12px;padding:3px 12px;border-radius:999px;background:#fff;color:var(--muted);font-size:11px;font-style:normal}
.frame img{width:100%;height:auto}

/* el motor de coincidencias, flotando sobre el producto */
.demo{position:absolute;left:-38px;bottom:-42px;width:min(340px,84%);padding:17px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.93);box-shadow:var(--shadow-lg);backdrop-filter:blur(14px);animation:hover 7s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag{padding:5px 11px;border-radius:999px;background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#231a06;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.demo-replay{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);font-size:12px;transition:.18s}
.demo-replay:hover{border-color:var(--amber);color:var(--amber-ink);transform:rotate(180deg)}
.demo-ask{margin-top:13px;font-size:13.5px;line-height:1.5;letter-spacing:-.01em}
.demo-ask b{color:var(--amber-ink)}
.demo-by{display:block;margin-top:6px;color:var(--muted);font-size:11px}
.demo-status{display:flex;align-items:center;gap:8px;margin-top:13px;color:var(--green);font-size:11.5px;font-weight:700}
.demo-status i{width:7px;height:7px;border-radius:50%;background:#2fa35c;box-shadow:0 0 0 0 rgba(47,163,92,.5);animation:pulse 1.9s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(47,163,92,0)}100%{box-shadow:0 0 0 0 rgba(47,163,92,0)}}
.demo-list{display:grid;gap:7px;margin-top:11px}
.demo-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px;border:1px solid var(--line-soft);border-radius:12px;background:#fff;opacity:0;transform:translateY(8px);transition:.45s cubic-bezier(.2,.8,.3,1)}
.demo-list li.in{opacity:1;transform:none}
.av{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--cream);color:var(--amber-ink);font-size:11px;font-weight:700}
.demo-list span:nth-child(2){display:grid;min-width:0}
.demo-list b{font-size:12px}
.demo-list small{margin-top:1px;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-list em{padding:5px 9px;border-radius:999px;background:#eaf7ef;color:var(--green);font-size:11px;font-style:normal;font-weight:700;white-space:nowrap}
.demo-list em.soft{background:#f4f2ee;color:var(--muted)}

/* ---------- secciones ---------- */
.section{padding:clamp(76px,8.5vw,128px) 0}
.head{max-width:760px}
.kicker{display:block;margin-bottom:14px;color:var(--amber-ink);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.section h2{font-size:clamp(30px,3.6vw,50px)}
.lead{max-width:62ch;margin-top:20px;color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.68}

/* ---------- problema: banda oscura cálida ---------- */
.problem{background:var(--dark);color:#fff}
.problem .kicker{color:var(--amber-2)}
.problem-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:clamp(26px,4vw,60px)}
.problem h2{font-size:clamp(30px,3.5vw,48px)}
.problem .lead{margin-top:0;color:rgba(255,255,255,.62)}
/* la tachadura se dibuja como fondo: sigue al texto aunque cambie de línea */
.strike-8{white-space:nowrap;background-image:linear-gradient(90deg,var(--amber),var(--amber-2));background-repeat:no-repeat;background-position:0 64%;background-size:0 5px;transition:background-size .8s cubic-bezier(.2,.8,.3,1) .2s}
.problem.on .strike-8{background-size:100% 5px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.chips li{padding:10px 15px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:rgba(255,255,255,.62);font-size:13px;font-weight:600;transition:.45s}
.problem.on .chips li:not(.chip-win){color:rgba(255,255,255,.3);text-decoration:line-through;text-decoration-color:rgba(240,160,0,.9);text-decoration-thickness:2px}
.chip-win{display:inline-flex;align-items:center;gap:7px;border-color:transparent!important;background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#231a06!important;box-shadow:0 12px 30px rgba(226,150,0,.3)}
.chip-win svg{width:14px;height:14px;stroke-width:2.2}

/* ---------- cómo funciona ---------- */
.how{background:#fff}
.how-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center;gap:clamp(30px,4vw,64px);margin-top:52px}
.steps{display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--paper);transition:transform .25s,box-shadow .25s,background .25s}
.steps li:hover{transform:translateY(-3px);background:#fff;box-shadow:var(--shadow)}
.step-no{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:var(--cream);color:var(--amber-ink);font-size:16px;font-weight:700}
.steps h3{font-size:18px}
.steps p{margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.6}
.quote{margin-top:14px;padding:12px 14px;border-left:3px solid var(--amber);border-radius:0 11px 11px 0;background:#fff;color:var(--ink-2);font-size:12.5px;line-height:1.55}
.steps li:hover .quote{background:var(--cream)}
.quote b{color:var(--ink)}
.how .frame{transform:rotateY(5deg) rotateX(2deg);transform-origin:right center}
.how .frame:hover{transform:rotateY(1deg)}

/* ---------- el puente ---------- */
.bridge{background:linear-gradient(180deg,var(--paper),#fff)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:52px}
.card{padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e0d8c8}
/* las dos tarjetas anchas rompen el ritmo y muestran producto */
.card.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(22px,3vw,44px);padding:32px}
.card.accent{background:linear-gradient(150deg,var(--cream),#fff 58%);border-color:#f2e4c8}
.card.flip>div{order:2}
.card.flip .shot{order:1}
.shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);transition:transform .3s}
.card.wide:hover .shot{transform:scale(1.02)}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--cream);color:var(--amber-ink);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.card.accent .badge{background:linear-gradient(135deg,var(--amber),var(--amber-2));color:#231a06}
.card h3{margin-top:16px;font-size:20px;line-height:1.24}
.card>p,.card>div>p{margin-top:11px;color:var(--muted);font-size:13.5px;line-height:1.62}
.card ul{display:grid;gap:10px;margin-top:18px}
.card li{position:relative;padding-left:22px;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.card li:before{content:"";position:absolute;left:0;top:6px;width:9px;height:9px;background:var(--amber);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bridge-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:44px;text-align:center}
.bridge-foot small{color:var(--muted);font-size:12.5px}

/* ---------- módulos ---------- */
.modules{position:relative;background:var(--paper);overflow:hidden}
.modules:before{content:"";position:absolute;left:50%;top:34%;width:900px;height:900px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,183,25,.2),transparent 66%)}
.modules .wrap{position:relative}
.modules .head{margin:0 auto;text-align:center}
.modules .lead{margin-left:auto;margin-right:auto}

.hive{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,172px));justify-content:center;gap:10px 14px;margin-top:54px}
/* onda que sale del núcleo cada ciclo */
.hive:after{content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;border:1px solid rgba(239,160,0,.4);opacity:0;pointer-events:none}
.hive.pulsing:after{animation:ripple 4.6s ease-out infinite}
@keyframes ripple{0%{transform:scale(.5);opacity:.65}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}

.cell{position:relative;display:grid;align-content:center;justify-items:center;gap:5px;min-height:154px;padding:18px 15px;border:0;background:#fff;color:var(--muted);text-align:center;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:0 10px 26px rgba(37,32,22,.07);transition:background .45s,color .45s,transform .3s,box-shadow .45s;animation:bob 7s ease-in-out infinite}
.cell:nth-child(3n+2){transform:translateY(32px)}
/* cada celda respira con su propio retraso: la colmena nunca se ve quieta */
.cell:nth-child(2n){animation-delay:-1.4s}
.cell:nth-child(3n){animation-delay:-2.8s}
.cell:nth-child(5n){animation-delay:-4.2s}
/* se anima la propiedad translate, no el margen: no recalcula el layout en cada cuadro */
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* al acercar el mouse la colmena se queda quieta: apuntar a algo que flota molesta */
.hive:hover .cell{animation-play-state:paused}
.cell>*{position:relative;z-index:1}
.cell svg{width:22px;height:22px;color:var(--amber-ink)}
.cell b{font-size:12.5px;color:var(--ink);letter-spacing:-.01em}
.cell small{font-size:11px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase}
.cell:not(.core):hover{background:var(--cream);transform:scale(1.05);box-shadow:0 16px 34px rgba(37,32,22,.12)}
.cell:nth-child(3n+2):not(.core):hover{transform:translateY(32px) scale(1.05)}

/* encendida: degradado de miel + destello que la recorre */
.cell.on{background:linear-gradient(155deg,var(--amber),var(--amber-2));color:#231a06;box-shadow:0 18px 42px rgba(226,150,0,.42)}
.cell.on svg,.cell.on b{color:#231a06}
.cell:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-120%);opacity:0}
.cell.on:before{animation:sheen .9s ease-out}
@keyframes sheen{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}

/* núcleo: siempre encendido, con halo que late */
.core{position:relative;background:var(--dark);color:rgba(255,255,255,.7);box-shadow:0 20px 46px rgba(26,23,19,.34);animation:bob 7s ease-in-out infinite,glow 3.4s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 20px 46px rgba(26,23,19,.34)}50%{box-shadow:0 20px 46px rgba(26,23,19,.34),0 0 0 10px rgba(239,160,0,.12),0 0 60px rgba(239,160,0,.35)}}
.core svg{color:var(--amber-2)}
.core b{font-size:13.5px;color:#fff}
.hive-foot{max-width:60ch;margin:46px auto 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.65}
.hive-count{color:var(--amber-ink)}

/* ---------- cifras ---------- */
.stats{padding:clamp(52px,6vw,76px) 0;background:linear-gradient(130deg,var(--amber),var(--amber-2));color:#231a06}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;text-align:center}
.stats b{display:block;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.045em}
.stats small{display:block;margin-top:10px;color:rgba(35,26,6,.7);font-size:12.5px;line-height:1.55}

/* ---------- piloto ---------- */
.pilot{background:#fff}
.pilot-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch;border:1px solid var(--line);border-radius:26px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
/* la foto llena la altura que marque el texto, no al revés */
.pilot-photo{position:relative;min-height:360px}
.pilot-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pilot-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(226,150,0,.32),rgba(23,25,22,.24))}
.pilot-copy{padding:clamp(30px,4vw,54px)}
.pilot-copy h2{font-size:clamp(28px,3.2vw,42px)}
.pilot-copy>p{max-width:52ch;margin-top:18px;color:var(--muted);font-size:15px;line-height:1.65}
.pilot-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pilot-form input{flex:1;min-width:230px;height:54px;padding:0 20px;border:1px solid var(--line);border-radius:14px;background:#fff;outline:0;font-size:14.5px}
.pilot-form input:focus{border-color:var(--amber);box-shadow:0 0 0 4px rgba(239,160,0,.16)}
.pilot-note{display:block;margin-top:14px;color:var(--muted);font-size:12px}
.pilot-done{display:grid;gap:6px;margin-top:28px;padding:22px;border-radius:16px;background:var(--cream)}
.pilot-done b{font-size:16px;color:var(--amber-ink)}
.pilot-done small{color:var(--muted);font-size:13px}

/* ---------- pie ---------- */
.foot{padding:56px 0 30px;background:var(--dark);color:#fff}
.foot .brand{color:#fff}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-links,.foot-legal nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a{color:rgba(255,255,255,.68);font-size:13.5px;text-decoration:none;transition:color .18s}
.foot a:hover{color:var(--amber-2)}
.foot .brand b{font-size:19px}
.foot-legal{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px}
.foot-legal small{color:rgba(255,255,255,.42);font-size:12.5px}

/* ---------- aviso ---------- */
.toast{position:fixed;left:50%;bottom:26px;z-index:400;padding:13px 20px;border-radius:14px;background:var(--ink);color:#fff;font-size:13.5px;box-shadow:var(--shadow);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:.24s}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ---------- aparición al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .frame{transform:none!important}
}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .hero-in,.how-in,.problem-in{grid-template-columns:1fr}
  .hero-in{gap:70px}
  .problem-in{align-items:start;gap:26px}
  .demo{left:auto;right:0;bottom:-30px;width:min(320px,90%)}
  .frame,.how .frame{transform:none}
  .cards{grid-template-columns:1fr}
  .card.wide{grid-template-columns:1fr}
  .card.flip>div{order:0}
  .card.flip .shot{order:0}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pilot-in{grid-template-columns:1fr}
  .pilot-photo{height:220px}
}
@media(max-width:820px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:0;padding:8px;background:rgba(250,248,244,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav.open .nav-links{display:flex}
  .nav.open .nav-links a{width:100%;padding:14px 16px}
  .nav-burger{display:flex}
  .nav-right .btn{display:none}
  .hive{grid-template-columns:repeat(2,minmax(0,168px))}
  .cell:nth-child(3n+2){transform:none}
  .cell:nth-child(3n+2):not(.core):hover{transform:scale(1.05)}
  .cell:nth-child(2n){transform:translateY(32px)}
  .foot-in,.foot-legal{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .demo{position:static;width:100%;margin-top:16px;animation:none}
  .stats-grid{grid-template-columns:1fr}
  .hive{grid-template-columns:minmax(0,190px)}
  .cell:nth-child(2n){transform:none}
}