/* Capa tipo app de todo el sitio (M9). Se carga despues de site.css en todas las paginas. */
.app{--a-night:#0E0230;--a-pink:#FF3797;--a-blue:#2226F7;--a-violet:#5140FF;--a-soft:#CFC9E8;--tab-h:64px;--hdr:84px;
  --a-grad:linear-gradient(135deg,#2226F7,#5140ff 52%,#FF3797 145%);
  --a-glow:radial-gradient(90vw 60vh at 88% 0%,rgba(255,55,151,.24),transparent 62%),radial-gradient(90vw 70vh at 0% 80%,rgba(34,38,247,.34),transparent 64%)}

/* Cabecera noche translucida */
.app .announce{background:#07011c;color:var(--a-soft)}
.app .header{background:rgba(14,2,48,.84);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08);transition:background .25s}
.app-scrolled .app .header{background:rgba(14,2,48,.94)}
.app .header .nav a{color:#fff}
.app .header .nav a:hover,.app .header .nav a[aria-current=page]{background:rgba(255,255,255,.12);color:#fff}
.app .header .lang,.app .header .menu-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.app .header .menu-btn span,.app .header .menu-btn span::before,.app .header .menu-btn span::after{background:#fff}
.app .header .menu-btn[aria-expanded=true] span{background:transparent}

/* Botones */
.app .btn{border-radius:999px;transition:transform .14s ease,filter .2s,background-color .18s,color .18s,border-color .18s;-webkit-tap-highlight-color:transparent}
.app .btn-pink,.app .btn-blue,.app .btn-pink:hover,.app .btn-blue:hover{background:var(--a-grad);border-color:transparent;color:#fff}
.app .btn-pink:hover,.app .btn-blue:hover{filter:brightness(1.1)}
.app .btn:active{transform:scale(.97)}
.app .band .btn-pink,.app .band .btn-blue,.app .band .btn-pink:hover,.app .band .btn-blue:hover{background:#fff;color:var(--a-night)}

/* Encabezado de pagina sobre fondo noche */
.app .page-hero{background-color:var(--a-night);background-image:var(--a-glow);color:#fff;border-bottom:0}
.app .page-hero h1{color:#fff}
.app .page-hero .lead,.app .page-hero p{color:var(--a-soft)}
.app .page-hero .kicker{color:var(--a-pink)}
.app .page-hero .kicker::before{background:var(--a-pink)}
.app .page-hero .crumbs,.app .page-hero .crumbs a{color:rgba(255,255,255,.72)}
.app .page-hero .mark{background:none;color:var(--a-pink);padding:0;transform:none}
.app .page-hero .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.app .page-hero .btn-line:hover{background:#fff;border-color:#fff;color:var(--a-night)}
.app .band{background:linear-gradient(120deg,#230F88,#2226F7 52%,#6a2bd6)}

/* Portadas de pagina (.hero) con el mismo fondo noche; las tarjetas de ejemplo conservan su fondo claro */
.app .hero{background-color:var(--a-night);background-image:var(--a-glow);border-bottom:0}
.app .hero h1{color:#fff}
.app .hero .mark{background:none;color:var(--a-pink);padding:0;transform:none}
.app .hero .hero-in>div:first-child>.lead,.app .hero .hero-in>div:first-child>p:not(.kicker){color:var(--a-soft)}
.app .hero .kicker{color:var(--a-pink)}
.app .hero .kicker::before{background:var(--a-pink)}
.app .hero .hero-facts{border-color:rgba(255,255,255,.16)}
.app .hero .hero-facts div{color:var(--a-soft);border-color:rgba(255,255,255,.16)}
.app .hero .hero-facts strong{color:#fff}
.app .hero .hero-cta .btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.app .hero .hero-cta .btn-line:hover{background:#fff;border-color:#fff;color:var(--a-night)}

/* Lo que queda debajo de la primera pantalla se calcula recien cuando se acerca (medido: primera imagen mas rapida en celular) */
.app main>*:nth-child(n+3),.app .footer{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* Carruseles armados desde el generador */
.rail:not(.grid){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rail-dots{display:none}
.tabbar{display:none}

@media(max-width:1020px){
  .app .header .nav{background:#0E0230;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:24px;box-shadow:0 24px 40px rgba(7,1,28,.5)}
  .app .header .nav a{min-height:50px;font-size:1rem}
}

@media(max-width:780px){
  .app{--hdr:72px;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom))}
  .app .header .btn{display:none}
  .app .wa-float{display:none!important}
  .app .privacy-banner{bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom))}
  /* Tarjetas en fila con arrastre: tres o mas tarjetas dejan de apilarse */
  .rail:not(.grid),.app .grid.g3:has(>.card:nth-child(3)),.app .grid.g4:has(>.card:nth-child(3)){display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);padding-bottom:6px}
  .rail:not(.grid)::-webkit-scrollbar,.app .grid.g3::-webkit-scrollbar,.app .grid.g4::-webkit-scrollbar{display:none}
  .rail:not(.grid)>*,.app .grid.g3:has(>.card:nth-child(3))>*,.app .grid.g4:has(>.card:nth-child(3))>*{flex:0 0 82%;scroll-snap-align:start}
  .rail-dots{display:flex;justify-content:center;gap:7px;margin-top:16px;color:var(--a-blue)}
  .rail-dots i{width:7px;height:7px;border-radius:7px;background:currentColor;opacity:.25;transition:width .25s,opacity .25s}
  .rail-dots i.on{width:22px;opacity:1}
  /* Barra inferior */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);background:rgba(14,2,48,.92);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid rgba(255,255,255,.1)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:var(--tab-h);font:700 .66rem/1 var(--body);color:rgba(255,255,255,.68);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .2s,transform .12s}
  .tabbar a:active{transform:scale(.92)}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tabbar a[aria-current=page]{color:#fff}
  .tabbar a[aria-current=page] svg{stroke:var(--a-pink)}
  .tabbar .tab-main{color:#fff}
  .tabbar .tab-main span.ico{display:grid;place-items:center;width:52px;height:52px;margin-top:-22px;border-radius:50%;background:var(--a-grad);box-shadow:0 10px 26px rgba(255,55,151,.45),0 0 0 5px rgba(14,2,48,.92)}
  .tabbar .tab-main svg{width:25px;height:25px;stroke-width:2}
}

/* Movimiento: paso entre paginas y entrada de titulos, solo si la persona no pidio movimiento reducido */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .14s ease both}
  ::view-transition-new(root){animation:vt-in .26s cubic-bezier(.2,.7,.2,1) both}
  .app .header{view-transition-name:site-header}
  .app .tabbar{view-transition-name:site-tabbar}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
  @supports (animation-timeline:view()){
    .app .section .head{animation:head-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes head-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  }
}
@media(prefers-reduced-motion:reduce){.app .btn{transition:none}}
@media print{.tabbar{display:none}.app .page-hero{background:#fff;color:#000}}