/* ================== PERF (pinta diferida) ==================
   Evita que el navegador calcule/repinte secciones off-screen.
   Subirá FCP/LCP en móvil. Safari ignora content-visibility.
=============================================================*/
/* PATCH: usa contain-intrinsic-size con dos valores (auto ALTURA)
   para evitar “ancho fantasma”; no lo apliques al primer bloque */
.blk-section,
.showcase,
.gemini-wrap,
.promo-wrap,
.study-wrap{
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}
@media (max-width: 768px){
  .blk-section,
  .showcase,
  .gemini-wrap,
  .promo-wrap,
  .study-wrap{
    contain-intrinsic-size: auto 1200px;
  }
}
/* PATCH: asegura que el primer bloque (héroe/LCP) pinte de inmediato */
.blk-section:first-of-type{
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/* Si el navegador NO soporta backdrop-filter, usa fondo opaco
   (reduce trabajo de pintura y evita parpadeos). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .site-header{ background: rgba(0,0,0,.55); }
  .btn-play,.rail-prev,.rail-next{ background: rgba(0,0,0,.35); }
}

/* Reducir animaciones costosas cuando el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .flare{ animation: none !important; }
  .gemini-blob{ animation: none !important; }
  .card-video,.card-video.is-active{ transition: none !important; transform: none !important; }
}



/* ========================================================================== */
/* [INICIO] Tipografías y variables globales                                  */
/* ========================================================================== */
:root{
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Altura del header para posicionar el panel móvil */
  --header-h: 64px;

  /* margen interior para mantener auroras lejos de bordes (todas las secciones) */
  --aurora-safe: clamp(36px, 6vw, 96px);
  /* tamaño del desvanecido negro en bordes de sección */
  --edge-fade: clamp(18px, 3.6vw, 46px);
}
@media (min-width:768px){ :root{ --header-h: 72px; } }

body{ font-family: var(--font-sans); }
h1,h2,h3,.mega-title{ font-family: var(--font-display); letter-spacing:-0.02em }

/* ⚠️ Importante: Eliminamos el fallback que rompía el lg:flex de Tailwind */
/* .hidden{ display:none !important; } */
/* [CIERRE] Tipografías y variables globales                                   */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Header + navegación (sticky con blur)                              */
/* ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 900;                 /* sobre scrim y contenido */
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);

  /* PATCH: fallback + color-mix moderno */
  background: rgba(0,0,0,.20);
  background: color-mix(in oklab, black 20%, transparent);

  border-bottom:1px solid rgba(255,255,255,.08);
  transition: transform .25s ease;
}
/* Cuando el menú móvil está abierto, fijamos el header (sin blur) */
.is-menu-open .site-header{
  position: fixed; inset: 0 auto auto 0; width: 100%;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:#080b12;
  /* PATCH: quita will-change permanente */
}

/* Marca */
.brand{ display:inline-flex; align-items:center; gap:.6rem }
.brand img{ display:block; height:auto }

/* Links de navegación */
.nav-link{ color:rgba(255,255,255,.86); font-weight:600 }
.nav-link:hover{ color:#fff }

/* Mega menú (desktop) */
.mega-title{
  font-weight:800; font-size:14px; color:#cde0ff;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.5rem
}
.mega-list{ display:grid; gap:.35rem }
.mega-item{
  display:block; padding:.5rem .6rem; border-radius:.75rem;
  color:#e5edff; background:transparent; border:1px solid transparent
}
.mega-item:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08) }

/* Sombreado del panel mega */
#svc-mega{ box-shadow: 0 30px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset; }

/* Auto-ocultar (opcional) al hacer scroll ↓ */
.site-header.head-hidden{ transform: translateY(-110%); }
/* [CIERRE] Header + navegación                                                */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Menú móvil como overlay (scrim, sin blur)                          */
/* ========================================================================== */
/* Cortina (acepta id o clase) */
#nav-scrim,.scrim{
  position: fixed; inset: 0; z-index: 1999;               /* debajo del panel (2000) */
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
#nav-scrim.open,.scrim.open{ opacity: 1; pointer-events: auto; }

/* Panel móvil fijo bajo el header (acepta id o clase) */
#mobile-panel,.mobile-panel{
  position: fixed; z-index: 2000; left: 0; right: 0;
  top: var(--header-h);

  /* PATCH: fallback + preferido */
  height: calc(100vh - var(--header-h));     /* fallback */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* fondo opaco SIN blur */
  background: rgba(5,8,16,.98);
  -webkit-backdrop-filter: none; backdrop-filter: none;

  transform: translateY(-8px);
  opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  border-top: 1px solid rgba(255,255,255,.08);
}
@supports (height: 100dvh){
  #mobile-panel,.mobile-panel{
    height: calc(100dvh - var(--header-h));  /* preferido */
  }
}
#mobile-panel.open,.mobile-panel.open{ transform:none; opacity:1; pointer-events:auto; }

/* Evita scroll del body cuando el menú esté abierto (por si el JS falla) */
.is-menu-open body{ overflow:hidden; }

/* Items móvil */
.mobile-item{ display:block; padding:.6rem .2rem; color:#e8efff; font-weight:600 }
.mobile-subtitle{ margin:.3rem 0 .1rem; font-size:12px; color:#a8c2ff; text-transform:uppercase; letter-spacing:.06em }
.mobile-subitem{ display:block; color:#dfe8ff; padding:.25rem 0; opacity:.9 }
.mobile-subitem:hover{ opacity:1 }
/* [CIERRE] Menú móvil como overlay                                            */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Utilidades de UI (botones, chips, etc.)                            */
/* ========================================================================== */
.card-ring{box-shadow:0 0 0 1px rgba(59,130,246,.25), 0 30px 60px rgba(0,0,0,.45)}
.dot{width:.375rem;height:.375rem;border-radius:9999px;background:rgb(96 165 250);display:inline-block}
.dot-cyan{background:rgb(34 211 238)}
.btn-white{padding:.5rem 1rem;border-radius:9999px;background:#fff;color:#000;font-weight:600;transition:.2s}
.btn-white:hover{background:#e5e5e5}
.btn-blue{padding:.5rem 1rem;border-radius:9999px;background:rgb(37 99 235);color:#fff;font-weight:600;transition:.2s}
.btn-blue:hover{background:rgb(59 130 246)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.15);
  border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;color:rgba(226,232,240,.9);transition:.2s
}
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
.link-soft{color:rgb(147 197 253)}
.link-soft:hover{color:rgb(191 219 254)}
.badge-new{
  display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;color:rgb(147 197 253);
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:9999px;padding:.25rem .625rem
}
.chip{padding:.375rem .75rem;border-radius:9999px;font-size:.75rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}

@media (prefers-reduced-motion:no-preference){
  .fade-in{animation:fade .6s ease both}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
/* [CIERRE] Utilidades de UI                                                   */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Hero                                                               */
/* ========================================================================== */
.hero-wrap{min-height:68vh}
.radial-glow{
  background: radial-gradient(1200px 500px at 50% 10%, rgba(37,99,235,.22), rgba(2,6,23,0) 60%)
}
/* [CIERRE] Hero                                                               */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Carrusel tipo “Google One”                                         */
/* ========================================================================== */
.showcase{ position:relative; margin-inline:auto; isolation:isolate; }
.rail{
  display:grid; grid-auto-flow:column; gap:1.25rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:12px; padding:12px;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:9999px}
.rail::-webkit-scrollbar-track{background:transparent}

.card-video{
  scroll-snap-align:center; position:relative; width:78vw; max-width:860px;
  border-radius:1.5rem; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, opacity .35s ease;
  opacity:.6;
}
.card-video.is-active{
  transform:scale(1.03); opacity:1; border-color:rgba(59,130,246,.22);
  box-shadow: 0 0 0 1px rgba(59,130,246,.20), 0 40px 100px rgba(56,189,248,.35);
}
@media (min-width:1024px){ .card-video{ width:46vw; } }

.card-figure{ position:relative; overflow:hidden; border-radius:1.3rem }
.card-figure img{
  /* PATCH: quitar content-visibility en <img> */
  width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; filter:brightness(.92);
}
.card-caption{
  position:absolute; left:1rem; right:1rem; bottom:.75rem;
  font-size:11px; color:rgba(255,255,255,.85); text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.btn-play{
  position:absolute; right:.75rem; top:.75rem; width:2.25rem; height:2.25rem; display:grid; place-items:center;
  border-radius:9999px; background:rgba(0,0,0,.45); color:#fff; font-weight:700;
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.btn-play:hover{ background:rgba(0,0,0,.6); transform:scale(1.05) }

/* Máscara de desvanecido en los bordes */
.rail-mask::before, .rail-mask::after{
  content:""; position:absolute; top:0; bottom:0; width:9%; pointer-events:none; z-index:2;
}
.rail-mask::before{ left:0; background:linear-gradient(90deg, #0b0f19 0%, transparent 100%); }
.rail-mask::after{ right:0; background:linear-gradient(270deg, #0b0f19 0%, transparent 100%); }

/* Controles */
.rail-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none }
.rail-prev,.rail-next{
  pointer-events:auto; width:2.25rem; height:2.25rem; border-radius:9999px;
  background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.15);
  display:grid; place-items:center; margin-inline:.25rem; transition:background .2s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.rail-prev:hover,.rail-next:hover{ background:rgba(255,255,255,.12) }

@media (prefers-reduced-motion:reduce){
  .card-video,.card-video.is-active{ transition:none; transform:none }
}

/* Luces animadas detrás del carrusel */
.lights-canvas{
  position:absolute; inset:-10% -6% -10% -6%; width:112%; height:120%;
  z-index:0; display:block; pointer-events:none; filter: blur(.2px);
}
@media (prefers-reduced-motion: reduce){ .lights-canvas{ display:none; } }
/* [CIERRE] Carrusel tipo “Google One”                                         */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Gemini apps (paneles y auroras CSS-only)                           */
/* ========================================================================== */
.gemini-wrap{
  --panel: rgba(0,0,0,.72);
  --panelStroke: rgba(255,255,255,.10);
  --txt:#EAF0FF; --txtDim:#B9C6E3; --accent:#4EA2FF;
  --blue:#168BFF; --cyan:#22D3EE; --violet:#8B5CF6;
  --blob-size: 54vmax; --blur: 60px;
  position:relative; overflow:hidden; isolation:isolate; color:var(--txt);
}
.gemini-aurora{ position:absolute; inset:var(--aurora-safe) !important; z-index:0; filter:saturate(120%); pointer-events:none; }
.gemini-blob{ position:absolute; width:var(--blob-size); height:var(--blob-size); border-radius:9999px; filter:blur(var(--blur)); opacity:.28; mix-blend-mode:screen; will-change:transform; }
.g-b1{ background: radial-gradient(closest-side, #0e7bff 55%, transparent 70%); animation: g-corner-1 18s ease-in-out infinite; }
.g-b2{ background: radial-gradient(closest-side, #1ac0ff 55%, transparent 70%); animation: g-corner-2 22s ease-in-out infinite; }
.g-b3{ background: radial-gradient(closest-side, #6b5cff 55%, transparent 70%); animation: g-corner-3 26s ease-in-out infinite; opacity:.24; }
@keyframes g-corner-1{
  0%{transform:translate(-8%,-8%) scale(1)} 25%{transform:translate(72%,-10%) scale(1.05)}
  50%{transform:translate(70%,64%) scale(1.1)} 75%{transform:translate(-6%,66%) scale(1.06)}
  100%{transform:translate(-8%,-8%) scale(1)}
}
@keyframes g-corner-2{
  0%{transform:translate(64%,-12%) scale(1.05)} 25%{transform:translate(72%,70%) scale(1.02)}
  50%{transform:translate(-6%,62%) scale(1.08)} 75%{transform:translate(-10%,-10%) scale(1.02)}
  100%{transform:translate(64%,-12%) scale(1.05)}
}
@keyframes g-corner-3{
  0%{transform:translate(-12%,72%) scale(1.04)} 25%{transform:translate(-10%,-8%) scale(1.06)}
  50%{transform:translate(70%,-10%) scale(1.03)} 75%{transform:translate(70%,68%) scale(1.07)}
  100%{transform:translate(-12%,72%) scale(1.04)}
}
.gemini-head h2{
  margin:0 0 22px 0; font-size: clamp(26px, 5.2vw, 56px);
  line-height:1.08; letter-spacing:-.02em; font-weight:800;
  text-shadow:0 2px 24px rgba(0,0,0,.35); text-align:left;
}
.gemini-grad{ background: linear-gradient(90deg, #DCE8FF, #7BB1FF 45%, #6f96ff 60%); -webkit-background-clip: text; background-clip:text; color:transparent; }
.gemini-grid{ display:grid; grid-template-columns:1.35fr .9fr; gap: clamp(18px, 2.5vw, 28px); }
.gemini-col-left{ display:grid; grid-template-rows:1fr 1fr; gap: clamp(18px, 2.5vw, 28px); }
.gemini-card{
  position:relative; overflow:hidden; border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--panelStroke);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset;
  display:grid; grid-template-columns:1.15fr 1fr; min-height:220px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gemini-card:hover{
  border-color: rgba(59,130,246,.22); transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(59,130,246,.18), 0 30px 80px rgba(56,189,248,.28);
}
.gemini-card.gemini-tall{ grid-template-columns:1fr; min-height:520px; }
.gemini-body{ padding: clamp(18px, 2.3vw, 28px); display:flex; align-items:flex-start; }
.gemini-body h3{ margin:0; font-size: clamp(18px, 2.1vw, 26px); line-height:1.25; font-weight:700; color:var(--txt); }
.gemini-body .accent{ color:#7fb4ff; }
.gemini-media{ position:relative; background:#0D1222; border-right:1px solid rgba(255,255,255,.06); }
.gemini-tall .gemini-media{ border-right:none; border-bottom:1px solid rgba(255,255,255,.06); min-height:300px; }
.gemini-fab{
  position:absolute; right:16px; bottom:16px; width:44px; height:44px; border-radius:9999px; border:none; cursor:pointer;
  background: radial-gradient(120% 120% at 40% 10%, #9ec9ff, #3a7bff); color:#fff; font-size:22px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.gemini-fab:hover{ filter:brightness(1.06); }
.mock::before{
  content:""; position:absolute; inset:12px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
}
.mock.mail::after{
  content:""; position:absolute; inset:auto 24px 24px 24px; height:8px; border-radius:8px;
  background: linear-gradient(90deg, #b6c8ff 20%, #87a6ff 60%, #4b7dff); opacity:.8;
}
.mock.slides::after{
  content:""; position:absolute; inset:auto 24px 24px 24px; height:52px; border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="52"><rect x="6" y="10" width="80" height="32" rx="6" fill="%23a5b7ff" opacity=".35"/><rect x="94" y="10" width="60" height="32" rx="6" fill="%2393aaff" opacity=".35"/><rect x="160" y="10" width="70" height="32" rx="6" fill="%2388a2ff" opacity=".35"/></svg>') center/contain no-repeat;
  border:1px solid rgba(255,255,255,.06);
}
.mock.meet::after{
  content:""; position:absolute; inset:18px 18px auto 18px; height:46%; border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="840" height="460"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="%239ab6ff"/><stop offset="1" stop-color="%23607bff"/></linearGradient></defs><rect width="100%" height="100%" fill="url(%23g)"/></svg>') center/cover no-repeat;
  border:1px solid rgba(255,255,255,.06);
}
.video-bar{ position:absolute; inset:auto 24px 18px 24px; display:flex; gap:10px; justify-content:center; }
.video-bar span{ width:10px; height:10px; border-radius:9999px; background:#8aa5ff; opacity:.7; }

@media (max-width:1024px){
  .gemini-grid{ grid-template-columns:1fr; }
  .gemini-card{ grid-template-columns:1fr; }
  .gemini-tall .gemini-media{ min-height:240px; }
}
@media (prefers-reduced-motion: reduce){ .gemini-blob{ animation:none !important; } }
/* [CIERRE] Gemini apps                                                        */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] “Aprovecha Google One al máximo” (fondo cálido)                    */
/* ========================================================================== */
.promo-wrap{ position:relative; isolation:isolate; overflow:hidden; }
.promo-aurora{ position:absolute; inset:var(--aurora-safe) !important; z-index:0; pointer-events:none; filter:saturate(115%); }
.flare{
  position:absolute; width:60vmax; height:60vmax; border-radius:9999px;
  filter: blur(60px); mix-blend-mode: screen; opacity:.35; will-change: transform;
}
.flare.f1{
  left:8%; top:-10%;
  background: radial-gradient(closest-side,#b91c1c 40%, rgba(244,63,94,.75) 60%, rgba(249,115,22,.55) 75%, transparent 82%);
  animation: flare-move-1 20s ease-in-out infinite;
}
.flare.f2{
  right:6%; bottom:-8%; opacity:.22;
  background: radial-gradient(closest-side,#fb7185 38%, rgba(124,58,237,.35) 62%, transparent 78%);
  animation: flare-move-2 24s ease-in-out infinite;
}
@keyframes flare-move-1{ 0%{ transform: translate(-6%,0) scale(1) } 50%{ transform: translate(16%,8%) scale(1.08) } 100%{ transform: translate(-6%,0) scale(1) } }
@keyframes flare-move-2{ 0%{ transform: translate(6%,0) scale(1.02) } 50%{ transform: translate(-12%,-10%) scale(1.06) } 100%{ transform: translate(6%,0) scale(1.02) } }

.promo-card{
  position:relative; display:grid; grid-template-columns:1.05fr 1fr;
  gap: clamp(16px, 2.2vw, 28px); background:#060708;
  border:1px solid rgba(255,255,255,.08); border-radius: 26px;
  padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 30px 120px rgba(0,0,0,.60);
}
.promo-body h3{
  margin:0 0 10px 0; font-size: clamp(22px, 3.2vw, 36px);
  line-height:1.15; font-weight:800; color:#fff; letter-spacing:-.01em;
}
.promo-body p{ margin:0; color: rgba(226,232,240,.92); max-width: 42ch; font-size: 14.5px; line-height:1.4; }
.btn-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:10px 14px; border-radius:9999px;
  background:#1d4ed8; color:#fff; font-weight:700; font-size:14px; border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 14px 34px rgba(37,99,235,.25); transition: filter .2s ease, transform .2s ease;
}
.btn-cta:hover{ filter:brightness(1.06); transform: translateY(-1px); }

.promo-media{ position:relative; border-radius:16px; overflow:hidden; background:#0c0c0c; }
.promo-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 16 / 9; }
.speech{ position:absolute; padding:8px 12px; border-radius:9999px; background:#fff; color:#0b0f19; font-size:12px; font-weight:600; box-shadow:0 10px 28px rgba(0,0,0,.35); }
.speech.s1{ left:8%; top:8%; }
.speech.s2{ left:6%; bottom:18%; }
.yt{ position:absolute; right:6%; bottom:10%; width:38%; aspect-ratio: 16 / 9; border-radius:12px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.yt img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.95); }
.yt .play{
  position:absolute; inset:auto auto 50% 50%; transform:translate(-50%,50%); width:52px; height:52px; border-radius:9999px; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.yt .play::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  width:0; height:0; border-left:14px solid #ff0000; border-top:10px solid transparent; border-bottom:10px solid transparent;
}

@media (max-width:1024px){
  .promo-card{ grid-template-columns:1fr; }
  .speech.s1{ left:6%; top:6%; }
  .speech.s2{ left:5%; bottom:12%; }
}
@media (prefers-reduced-motion: reduce){ .flare{ animation: none !important; } }
/* [CIERRE] Sección Google One                                                 */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Estudia de manera más eficiente (glow verde)                       */
/* ========================================================================== */
.study-wrap{ position:relative; isolation:isolate; overflow:hidden; }
.study-heading{
  font-weight: 900; letter-spacing: -.02em; margin-bottom: 22px;
  font-size: clamp(28px,5.2vw,44px);
  background: linear-gradient(90deg, #22d3ee 0%, #34d399 40%, #22d3ee 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.study-aurora{ position:absolute; inset:var(--aurora-safe) !important; z-index:0; pointer-events:none; filter:saturate(115%); }
.s-blob{
  position:absolute; width:56vmax; height:56vmax; border-radius:9999px;
  filter: blur(70px); opacity:.26; mix-blend-mode:screen; will-change:transform;
  background: radial-gradient(closest-side, #10b981 55%, transparent 72%);
}
.s-blob.s1{ left:-8%; top:-6%; animation: s-sweep-x 18s ease-in-out infinite; }
.s-blob.s2{ right:-10%; bottom:-8%; opacity:.22; background:radial-gradient(closest-side,#22d3ee 55%,transparent 72%); animation: s-sweep-y 23s ease-in-out infinite; }
.s-blob.s3{ left:32%; top:42%; opacity:.18; background:radial-gradient(closest-side,#0ea5e9 55%,transparent 72%); animation: s-sweep-d 27s ease-in-out infinite; }
@keyframes s-sweep-x{ 0%{transform:translateX(-6%) translateY(0) scale(1.02)} 50%{transform:translateX(38%) translateY(6%) scale(1.07)} 100%{transform:translateX(-6%) translateY(0) scale(1.02)} }
@keyframes s-sweep-y{ 0%{transform:translateY(0) translateX(6%) scale(1.03)} 50%{transform:translateY(-34%) translateX(-8%) scale(1.06)} 100%{transform:translateY(0) translateX(6%) scale(1.03)} }
@keyframes s-sweep-d{ 0%{transform:translate(-6%,-6%) scale(1.02)} 50%{transform:translate(16%,18%) scale(1.05)} 100%{transform:translate(-6%,-6%) scale(1.02)} }

.study-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.2vw,28px); }
.study-wide{ grid-column: 1 / -1; }
.study-card{
  position:relative; background:#07090d; border:1px solid rgba(255,255,255,.08);
  border-radius: 22px; overflow:hidden; box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
.study-card-inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(14px,2vw,24px); padding: clamp(18px,2.3vw,26px); }
.study-card:hover{ border-color: rgba(59,130,246,.22); }
.study-info h3{ margin:.25rem 0 0 0; font-weight:800; letter-spacing:-.01em; color:#fff; font-size: clamp(20px,2.3vw,28px); line-height:1.2; }
.study-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.02em; color:#e5edff;
  padding:.25rem .5rem; border-radius:9999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.accent{ background:linear-gradient(90deg,#22d3ee,#86efac); -webkit-background-clip:text; background-clip:text; color:transparent; }
.accent-blue{ color:#6fb3ff; }

.study-art.stack{ position:relative; height: clamp(110px, 16vw, 140px); }
.stack-card{
  position:absolute; height:44px; width: clamp(200px, 80%, 320px); padding: 0 .9rem; border-radius:9999px;
  display:flex; align-items:center; gap:.55rem; background: linear-gradient(180deg, #151a2f, #0f1326);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  color:#dbe7ff; font-size:12px; font-weight:600;
}
.stack-card em{ font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9; }
.stack-card .dot{ width:8px; height:8px; border-radius:9999px; background:#34d399; box-shadow:0 0 12px #22d3ee99; }
.stack-card .play{ margin-left:auto; width:26px; height:26px; border-radius:9999px; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.35); position:relative; }
.stack-card .play::before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); width:0; height:0; border-left:8px solid #0b0f19; border-top:6px solid transparent; border-bottom:6px solid transparent; }

.stack-card.c1{ left:4%;  top:28%; }
.stack-card.c2{ left:34%; top:33%; }
.stack-card.c3{ left:64%; top:38%; }
.stack-card.c4{ left:84%; top:43%; transform:translateX(-60%); }

.study-art.burst{ position:relative; min-height:220px; display:grid; place-items:center; overflow:hidden; border-radius:16px; }
.study-art.burst::before{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 50% 50%, rgba(130,200,255,.35), transparent 55%),
    conic-gradient(from 0turn, rgba(130,200,255,.12), rgba(130,200,255,0) 12%, rgba(130,200,255,.12) 24%, rgba(130,200,255,0) 36%, rgba(130,200,255,.12) 48%, rgba(130,200,255,0) 60%, rgba(130,200,255,.12) 72%, rgba(130,200,255,0) 84%, rgba(130,200,255,.12));
  filter: blur(6px);
}
.burst-core{ position:relative; z-index:1; }

.study-art.media{ position:relative; border-radius:16px; overflow:hidden; }
.study-art.media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16 / 9; display:block; filter:brightness(.95); }
.mini-card{
  position:absolute; right:12px; bottom:12px; background:#0f1324; color:#e8efff;
  font-size:11px; line-height:1.2; border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:.45rem .55rem; box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.study-fab{
  position:absolute; right:12px; bottom:12px; width:38px; height:38px;
  border-radius:9999px; border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(120% 120% at 40% 10%, #9ec9ff, #3a7bff);
  color:#fff; font-size:20px; font-weight:800; cursor:pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

@media (max-width: 1024px){
  .study-card-inner{ grid-template-columns:1fr; }
  .study-art.stack{ height:auto; padding-top:10px; padding-bottom:6px; }
  .stack-card{ position:relative; left:auto; top:auto; transform:none; width:100%; margin:.35rem 0; }
}
/* [CIERRE] Estudia de manera más eficiente                                     */
/* ========================================================================== */


/* ========================================================================== */
/* [INICIO] Contenedor de secciones negras + viñetas de borde                  */
/* ========================================================================== */
.blk-section{
  position: relative; isolation: isolate; background: #000; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 -1px 0 rgba(255,255,255,.02);
  padding-block: clamp(56px, 7vw, 112px);
}
.blk-section + .blk-section{ margin-top: clamp(56px, 8vw, 128px); }
@media (max-width: 640px){ .blk-section + .blk-section{ margin-top: clamp(44px, 12vw, 80px); } }

.blk-section::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(to bottom, #000 0%, transparent 100%) top/100% var(--edge-fade) no-repeat,
    linear-gradient(to top,    #000 0%, transparent 100%) bottom/100% var(--edge-fade) no-repeat,
    linear-gradient(to right,  #000 0%, transparent 100%) left/var(--edge-fade) 100% no-repeat,
    linear-gradient(to left,   #000 0%, transparent 100%) right/var(--edge-fade) 100% no-repeat;
}
/* [CIERRE] Contenedor de secciones negras                                      */
/* ========================================================================== */


/* =========================================================
   REFUERZO — Mostrar componentes con `lg:flex` en desktop
   (si alguna clase .hidden queda aplicada)
   ========================================================= */
/* PATCH: evita forzar TODO .lg:flex; limita a nav + CTA */
@media (min-width:1024px){
  #main-nav{ display:flex !important; }   /* sobreescribe hidden del nav */
  header .ml-6{ display:flex !important; }/* CTA vecino del nav */
}

/* CTA del menú (desktop) */
.btn-nav-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1rem; border-radius:9999px;
  background:#2563eb; color:#fff; font-weight:700; font-size:14px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 28px rgba(37,99,235,.25);
  transition:filter .2s ease, transform .2s ease;
}
.btn-nav-cta:hover{ filter:brightness(1.06); transform:translateY(-1px); }

/* Cambiar hamburguesa -> X */
#nav-toggle .icon-close{ display:none; }
#nav-toggle[aria-expanded="true"] .icon-hamb{ display:none; }
#nav-toggle[aria-expanded="true"] .icon-close{ display:block; }