/* Movi · trymovi.app
   Lenguaje Apple (iOS 26) en modo oscuro: colores semánticos, escala tipográfica de iOS,
   cápsulas y squircles concéntricos, Liquid Glass solo en la capa funcional, springs.
   Acento de marca: dorado Movi (solo acción primaria, palabra clave e indicadores). */
:root{
  /* Semánticos iOS (dark) */
  --label:#fff;
  --label-2:rgb(235 235 245 / .60);
  --label-3:rgb(235 235 245 / .30);
  --bg:#000;                      /* systemBackground / systemGroupedBackground */
  --bg-2:#1c1c1e;                 /* secondarySystemGroupedBackground (celdas, tarjetas) */
  --bg-3:#2c2c2e;                 /* tertiarySystemGroupedBackground */
  --separator:rgb(84 84 88 / .60);
  --fill-1:rgb(120 120 128 / .36);
  --fill-2:rgb(120 120 128 / .32);
  --fill-3:rgb(118 118 128 / .24);
  --fill-4:rgb(118 118 128 / .18);
  /* Sistema (dark) */
  --green:#30d158;--orange:#ff9230;--blue:#0091ff;--indigo:#6d7cff;--pink:#ff375f;--purple:#db34f2;
  /* Marca */
  --accent:#ffd08a;
  --on-accent:#1a1204;
  --ig-in:#262626;
  --ig-out:linear-gradient(160deg,#8b3dff 0%,#3b6cf6 100%);

  /* Liquid Glass (regular, dark) */
  --glass-tint:28 28 30;
  --glass-fill:58%;
  --glass-blur:28px;
  --glass-sat:1.8;
  --glass-highlight:rgb(255 255 255 / .22);
  --glass-rim:rgb(255 255 255 / .12);
  --glass-shadow:0 8px 32px -8px rgb(0 0 0 / .5),0 2px 6px -2px rgb(0 0 0 / .3);

  /* Tipografía: sistema en Apple, Inter fuera */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --font-rounded:ui-rounded,"SF Pro Rounded",-apple-system,"Inter",system-ui,sans-serif;

  /* Radios (iOS 26) */
  --r-icon:8px;--r-field:12px;--r-cell:26px;--r-card:28px;--r-sheet:40px;--r-pill:999px;
  /* Motion */
  --ease-ios:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring-smooth:linear(0,.157 6.6%,.488 15.6%,.75 24.5%,.904 33.4%,.976 43.7%,.998 56.6%,1.003 72%,1);
  --spring-snappy:linear(0,.236 7.2%,.637 17.3%,.886 27.6%,.995 38%,1.022 46.9%,1.017 58.1%,1.002 77%,1);
  --dur-press:100ms;--dur-fast:200ms;--dur-base:350ms;--dur-slow:500ms;

  --max:1080px;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--label);
  font:400 1.0625rem/1.294 var(--font);letter-spacing:-.026em;   /* Body 17/22 */
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto;overscroll-behavior-y:none;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a,[role="button"],label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
::selection{background:rgb(255 208 138 / .35)}
.ui-chrome{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wrap{max-width:var(--max);margin:0 auto}
.accent{color:var(--accent)}

/* Curva continua (squircle) donde el navegador la soporta */
@supports (corner-shape:squircle){
  .card,.list-inset,.contact,.device,.screen,.banner,.app-icon,.row-icon,.legal .box,.legal .tbl{corner-shape:squircle}
}

/* ---------- Escala tipográfica iOS (Large) ---------- */
.t-hero{font:700 clamp(2.75rem,6vw,4.5rem)/1.02 var(--font-display);letter-spacing:-.035em}
.t-display{font:700 clamp(2.125rem,4.6vw,3.5rem)/1.06 var(--font-display);letter-spacing:-.03em}
.t-large-title{font:700 2.125rem/1.206 var(--font-display);letter-spacing:-.022em}   /* 34/41 */
.t-title2{font:700 1.375rem/1.273 var(--font-display);letter-spacing:-.012em}       /* 22/28 */
.t-title3{font:600 1.25rem/1.25 var(--font-display);letter-spacing:-.023em}         /* 20/25 */
.t-headline{font:600 1.0625rem/1.294 var(--font);letter-spacing:-.026em}            /* 17/22 */
.t-callout{font:400 1rem/1.3125 var(--font);letter-spacing:-.02em}                  /* 16/21 */
.t-subhead{font:400 .9375rem/1.333 var(--font);letter-spacing:-.016em}              /* 15/20 */
.t-footnote{font:400 .8125rem/1.385 var(--font);letter-spacing:-.006em}             /* 13/18 */
.secondary{color:var(--label-2)}
.tertiary{color:var(--label-3)}

/* ---------- Fondo (capa de contenido) ---------- */
.aurora{position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.5;will-change:transform}
.aurora i:nth-child(1){left:-10vmax;top:-14vmax;background:radial-gradient(closest-side,rgb(109 124 255 / .32),transparent);animation:drift1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-14vmax;top:12vmax;background:radial-gradient(closest-side,rgb(255 208 138 / .18),transparent);animation:drift2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:20vmax;bottom:-30vmax;background:radial-gradient(closest-side,rgb(219 52 242 / .14),transparent);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vmax,10vmax) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vmax,14vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(-12vmax,-16vmax) scale(1.2)}}

/* ---------- Liquid Glass (solo capa funcional) ---------- */
.glass{position:relative;isolation:isolate;
  background:color-mix(in srgb,rgb(var(--glass-tint)) var(--glass-fill),transparent);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.04);
  box-shadow:inset 0 1px 0 0 var(--glass-highlight),inset 0 -1px 0 0 color-mix(in srgb,var(--glass-highlight) 25%,transparent),inset 0 0 0 .5px var(--glass-rim),var(--glass-shadow)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 80% at var(--mx,20%) var(--my,0%),color-mix(in srgb,var(--glass-highlight) 60%,transparent),transparent 55%);mix-blend-mode:soft-light}
/* Glass prominente: acción primaria tintada (1 por vista) */
.glass--prominent{--glass-tint:255 208 138;--glass-fill:90%;--glass-highlight:rgb(255 255 255 / .55);color:var(--on-accent)}
.glass--interactive{transition:transform var(--dur-base) var(--spring-snappy),filter var(--dur-fast) var(--ease-out)}
.glass--interactive:active{transform:scale(1.06);filter:brightness(1.08);transition-duration:var(--dur-press)}

/* Scroll edge effect bajo la barra */
.scroll-edge-top{position:fixed;inset:0 0 auto;height:calc(env(safe-area-inset-top,0px) + 96px);z-index:40;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--bg) 70%,transparent),transparent);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.scrolled .scroll-edge-top{opacity:1}

/* ---------- Barra de navegación (toolbar flotante) ---------- */
.nav{position:fixed;z-index:50;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  display:flex;align-items:center;gap:4px;height:52px;padding:4px;border-radius:var(--r-pill);width:max-content;max-width:calc(100vw - 32px);
  transform:translateX(-50%);animation:materialize var(--dur-slow) var(--spring-smooth) both .1s}
@keyframes materialize{from{opacity:0;transform:translateX(-50%) scale(.96);filter:blur(8px)}}
.nav .brand{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 10px;border-radius:var(--r-pill);font:700 1.0625rem/1 var(--font-display);letter-spacing:-.03em}
.nav .brand img{width:26px;height:26px}
.nav .brand .dot{color:var(--accent)}
.nav .item{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:var(--r-pill);font:500 .9375rem/1 var(--font);letter-spacing:-.016em;color:var(--label-2);transition:color var(--dur-fast),background var(--dur-fast)}
.nav .cta{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r-pill);font:600 .9375rem/1 var(--font);letter-spacing:-.016em}
@media (hover:hover) and (pointer:fine){.nav .item:hover{color:var(--label);background:var(--fill-4)}}

/* ---------- Botones (capa de contenido) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:var(--r-pill);
  font:600 1.0625rem/1 var(--font);letter-spacing:-.026em;white-space:nowrap;
  transition:transform var(--dur-base) var(--spring-smooth),opacity var(--dur-fast),background var(--dur-fast)}
.btn:active{transform:scale(.97);opacity:.85;transition-duration:var(--dur-press)}
.btn--filled{background:var(--accent);color:var(--on-accent)}
.btn--bordered{background:var(--fill-3);color:var(--accent)}
.btn--gray{background:var(--fill-2);color:var(--label)}
.btn svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.btn--filled:hover{filter:brightness(1.05)}.btn--bordered:hover,.btn--gray:hover{background:var(--fill-1)}}

/* Etiqueta/chip */
.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--fill-3);color:var(--label-2)}
.chip .dot-live{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(48 209 88 / .5)}70%,100%{box-shadow:0 0 0 7px rgb(48 209 88 / 0)}}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;gap:56px;padding-block:136px 72px;min-height:min(100svh,900px)}
.hero h1{margin:20px 0 20px;text-wrap:balance}
.hero h1 .w{display:inline-block}
.hero .lead{max-width:30ch;margin:0 0 32px;text-wrap:pretty;font-size:1.25rem;line-height:1.4;letter-spacing:-.023em}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.checks{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px}
.checks li{display:inline-flex;align-items:center;gap:6px}
.checks svg{width:17px;height:17px;color:var(--green)}

/* ---------- Escenario del iPhone ---------- */
.stage{position:relative;display:grid;justify-items:center;gap:20px}
.stage .halo{position:absolute;top:-6%;width:min(120%,100vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgb(109 124 255 / .28),rgb(255 208 138 / .06) 55%,transparent);z-index:-1;pointer-events:none}
.device{position:relative;width:100%;height:auto;aspect-ratio:71.9/150;border-radius:56px;padding:10px;background:#0b0b0d;
  box-shadow:0 0 0 1.5px #2c2c2e,0 0 0 4px #121214,0 60px 120px -40px rgb(0 0 0 / .9)}
.scene3d{animation:deviceIn 1.1s var(--spring-smooth) both .3s}
@keyframes deviceIn{from{opacity:0;transform:translateY(48px) scale(.94);filter:blur(12px)}}
.screen{position:relative;height:100%;border-radius:46px;overflow:hidden;background:#000;display:flex;flex-direction:column}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:100px;height:30px;border-radius:var(--r-pill);background:#000;z-index:6}
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 0 30px;font:600 .875rem/1 var(--font);letter-spacing:-.02em}
.statusbar .icons{display:flex;gap:5px;align-items:center}
.statusbar svg{height:11px}
.dm-head{display:flex;align-items:center;gap:10px;padding:18px 14px 10px;border-bottom:.5px solid var(--separator)}
.dm-head .chev{width:10px;height:18px;flex:none}
.dm-head .avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--indigo));font:700 .875rem/1 var(--font-rounded);color:#fff}
.dm-head b{display:block;font:600 .875rem/1.2 var(--font);letter-spacing:-.015em}
.dm-head small{display:block;font-size:.6875rem;line-height:1.3;color:var(--label-2)}
.thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 12px 8px;overflow:hidden}
.msg{max-width:80%;padding:8px 12px 9px;border-radius:20px;font:400 .8125rem/1.35 var(--font);letter-spacing:-.01em;
  opacity:0;transform:translateY(8px) scale(.94);filter:blur(4px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--spring-snappy),filter var(--dur-base) var(--ease-out)}
.msg.in{align-self:flex-start;background:var(--ig-in);transform-origin:left bottom}
.msg.out{align-self:flex-end;background:var(--ig-out);transform-origin:right bottom}
.msg.show{opacity:1;transform:none;filter:none}
.msg .link-card{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:var(--r-field);background:var(--fill-3)}
.msg .link-card .ic{flex:none;width:28px;height:28px;border-radius:var(--r-icon);display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.msg .link-card .ic svg{width:15px;height:15px}
.msg .link-card b{display:block;font:600 .75rem/1.25 var(--font)}
.msg .link-card span{display:block;font-size:.6875rem;color:var(--label-2)}
.typing{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;border-radius:20px;background:var(--ig-in);opacity:0;transform:scale(.9);transform-origin:left bottom;transition:opacity var(--dur-fast),transform var(--dur-base) var(--spring-smooth)}
.typing.show{opacity:1;transform:none}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--label-2);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.composer{display:flex;align-items:center;gap:8px;margin:4px 10px 22px;min-height:40px;padding:5px 8px 5px 5px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--label-3);font-size:.8125rem}
.composer .cam{width:30px;height:30px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.composer .cam svg{width:15px;color:#fff}
.home-ind{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:4px;border-radius:2px;background:rgb(255 255 255 / .6)}

/* Notificación de iOS para la sala (capa funcional → glass) */
.banner{position:absolute;z-index:7;top:52px;left:10px;right:10px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center;
  padding:11px 14px 12px 11px;border-radius:24px;transform:translateY(-140%) scale(.96);opacity:0;
  transition:transform var(--dur-slow) var(--spring-snappy),opacity var(--dur-base) var(--ease-out)}
.banner.show{transform:none;opacity:1}
.banner .app{width:38px;height:38px;border-radius:9px;background:#000;display:grid;place-items:center;box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .18)}
.banner .app img{width:30px;height:30px}
.banner .meta{display:flex;justify-content:space-between;gap:8px;font:400 .6875rem/1.2 var(--font);color:var(--label-2);letter-spacing:.01em}
.banner b{display:block;font:600 .8125rem/1.3 var(--font);letter-spacing:-.01em;margin-top:1px}
.banner .body{display:block;font:400 .8125rem/1.3 var(--font);letter-spacing:-.01em}

/* Segmented control (cambia el ejemplo) */
.segmented{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(330px,80vw);height:36px;padding:3px;border-radius:var(--r-pill);background:var(--fill-3)}
.segmented button{position:relative;z-index:1;border-radius:var(--r-pill);font:500 .875rem/1 var(--font);letter-spacing:-.011em;color:var(--label-2);transition:color var(--dur-fast) var(--ease-out)}
.segmented button[aria-selected="true"]{color:var(--label);font-weight:600}
.segmented .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:var(--r-pill);background:var(--bg-3);
  box-shadow:0 3px 8px rgb(0 0 0 / .25),0 0 0 .5px rgb(255 255 255 / .06);transition:transform var(--dur-base) var(--spring-snappy)}
/* Escena 3D: el iPhone y la mascota giran con el cursor */
.scene3d{position:relative;perspective:1400px;transform-style:preserve-3d;width:min(330px,80vw)}
.scene3d .tilt{transform-style:preserve-3d}
.device,.mascot,.glare{will-change:transform}
.glare{position:absolute;inset:0;border-radius:56px;pointer-events:none;z-index:9;mix-blend-mode:screen;opacity:var(--glare-o,0);
  background:radial-gradient(60% 45% at var(--gx,50%) var(--gy,30%),rgb(255 255 255 / .16),transparent 70%)}
.mascot{position:absolute;z-index:8;left:-40%;bottom:6%;width:52%;pointer-events:none}
.mascot > *{animation:float 6s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .5))}
[data-mascot] img,[data-mascot] svg{display:block;width:100%;height:auto;aspect-ratio:540/640}

.lids{transform-box:fill-box;transform-origin:50% 50%;animation:blinkEyes 5.5s infinite}
@keyframes blinkEyes{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes float{50%{transform:translateY(-10px) rotate(-3deg)}}

/* ---------- Secciones ---------- */
section.block{padding-block:clamp(72px,10vw,128px)}
.eyebrow{display:block;margin:0 0 10px;color:var(--accent)}
.section-head h2{margin:0 0 14px;max-width:20ch;text-wrap:balance}
.section-head p{margin:0;max-width:54ch;text-wrap:pretty;font-size:1.1875rem;line-height:1.42;letter-spacing:-.022em}

/* Preguntas del público (chips en cinta) */
.asks{padding-block:36px 8px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.asks .label{margin:0 0 14px;text-align:center}
.marquee{display:flex;gap:8px;width:max-content;animation:marquee 44s linear infinite}
@media (hover:hover){.asks:hover .marquee{animation-play-state:paused}}
.marquee .chip{color:var(--label);font:400 .9375rem/1 var(--font);letter-spacing:-.016em;min-height:36px;padding:0 14px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Frase que se ilumina con el scroll */
.statement{margin:0;max-width:19ch;text-wrap:balance}
.statement .w{color:rgb(255 255 255 / .16);transition:color var(--dur-fast) var(--ease-out)}
.statement .w.lit{color:var(--label)}
.statement .w.lit.accent{color:var(--accent)}

/* Tarjetas (contenido: nunca glass) */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.card{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:24px;border-radius:var(--r-card);background:var(--bg-2)}
.card .app-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:#fff;margin-bottom:14px}
.card .app-icon svg{width:24px;height:24px}
.card h3,.card p{margin:0}
.card .metric{margin-top:auto;padding-top:24px;display:flex;align-items:baseline;gap:6px}
.card .metric b{font:700 2.125rem/1 var(--font-rounded);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Lista agrupada insetada (pasos) */
.list-header{margin:48px 18px 8px}
.list-inset{list-style:none;margin:0;padding:0;background:var(--bg-2);border-radius:var(--r-cell);overflow:hidden}
.row{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:60px;padding:14px 18px}
.row + .row::before{content:"";position:absolute;top:0;right:0;left:62px;height:.5px;background:var(--separator)}
.row .row-icon{width:30px;height:30px;border-radius:var(--r-icon);display:grid;place-items:center;color:#fff}
.row .row-icon svg{width:18px;height:18px}
.row .title{min-width:0}
.row .title b{display:block}
.row .title span{display:block;margin-top:2px}
.row .time{color:var(--label-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.list-footer{margin:8px 18px 0}

/* Contacto */
.contact{position:relative;overflow:hidden;text-align:center;padding:clamp(48px,7vw,80px) clamp(20px,5vw,56px);border-radius:var(--r-sheet);
  background:radial-gradient(90% 120% at 50% 115%,rgb(255 208 138 / .16),transparent 60%),var(--bg-2)}
.mascot-big{width:170px;margin:0 auto 16px;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .45))}
.contact h2{margin:0 auto 12px;max-width:16ch;text-wrap:balance}
.contact p{margin:0 auto 28px;max-width:46ch}
.mail-field{display:flex;align-items:center;gap:4px;width:min(420px,100%);margin:0 auto;padding:4px 4px 4px 18px;border-radius:var(--r-pill);background:var(--fill-3)}
.mail-field .addr{flex:1;min-width:0;text-align:left;font:600 1.0625rem/1 var(--font);letter-spacing:-.026em;user-select:all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-field .btn{min-height:42px;padding:0 18px;font-size:.9375rem;letter-spacing:-.016em}
.copied{display:block;min-height:20px;margin-top:10px;color:var(--green);opacity:0;transition:opacity var(--dur-base)}
.copied.show{opacity:1}

/* Pie */
footer{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;margin-top:72px;padding-block:28px calc(32px + env(safe-area-inset-bottom,0px));border-top:.5px solid var(--separator)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
@media (hover:hover){footer a:hover{color:var(--label)}}

/* ---------- Entradas (blur-in, materializar) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(24px) scale(.98);filter:blur(10px);
  transition:opacity .7s var(--ease-out),transform .9s var(--spring-smooth),filter .7s var(--ease-out);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
.js .hero h1 .w{opacity:0;filter:blur(14px);transform:translateY(22px);
  transition:opacity .75s var(--ease-out),filter .75s var(--ease-out),transform .9s var(--spring-smooth);transition-delay:var(--d,0s)}
.js .hero h1.in .w{opacity:1;filter:none;transform:none}

/* ---------- Páginas legales ---------- */
.legal{max-width:680px;margin:0 auto;padding-block:120px 24px}
.legal h1{margin:0 0 6px}
.legal .updated{margin:0 0 32px}
.legal h2{margin:40px 0 10px}
.legal p,.legal li{color:rgb(235 235 245 / .85);line-height:1.5}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal .box{background:var(--bg-2);border-radius:var(--r-cell);padding:18px 20px;margin:24px 0}
.legal .box p{margin:0}
.legal .tbl{overflow-x:auto;margin:14px 0;background:var(--bg-2);border-radius:var(--r-cell)}
.legal table{border-collapse:collapse;width:100%}
.legal th,.legal td{text-align:left;padding:12px 16px;vertical-align:top}
.legal tr + tr td,.legal tbody tr:first-child td{border-top:.5px solid var(--separator)}
.legal th{color:var(--label-2);font-weight:400;font-size:.8125rem}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:48px;padding-block:112px 40px;min-height:0}
  .cards{grid-template-columns:minmax(0,1fr)}
  .mascot{left:auto;right:-6%;bottom:auto;top:-12%;width:30%}
}
@media (max-width:600px){
  .nav .item{display:none}
  .hero .lead{font-size:1.125rem}
  .actions .btn{flex:1 1 100%}
  .row .time{display:none}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js .hero h1 .w{opacity:1;transform:none;filter:none}
  .marquee{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}
@media (prefers-reduced-transparency:reduce){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg-2)}
  .glass--prominent{background:var(--accent)}
  .glass::before{display:none}
  .scroll-edge-top{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--label-2:rgb(235 235 245 / .85);--label-3:rgb(235 235 245 / .6);--separator:rgb(84 84 88 / 1)}
  .glass{background:var(--bg-2);box-shadow:0 0 0 1px var(--label)}
  .glass--prominent{background:var(--accent)}
}