/* EnModoAsia: interruptor del Turismo educativo (todo lo que lleva data-turismo).

   Hoy, para la demo con el inversor, el turismo se ve.
   Para ocultarlo cuando se publiquen los servicios: borra los dos signos de comentario
   de la regla de abajo (la barra con asterisco del inicio y el asterisco con barra del final).
   La carpeta turismo-educativo/ se puede dejar fuera del despliegue en ese momento. */

/* [data-turismo] { display: none !important; } */


/* ---- acabado común de las dos páginas ---- */

/* paneles uva "Chispa SPARK" (portada y cierre): color uva, un brillo rosa y destellos de 4 puntas como la chispa
   del logo. Sin rayos: un abanico de rayos sobre "Asia" recuerda la bandera del sol naciente, que ofende en
   Filipinas, Corea y China. Para cambiar el color: --uva (base) y --uva-2 (la esquina más clara). */
:root {
  --uva: #3a0a40; --uva-2: #5c1466;
  --tinte: color-mix(in oklab, var(--uva) 8%, #fbf7ef);
  --star-y: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFE14D' d='M12 0C12.8 7 17 11.2 24 12C17 12.8 12.8 17 12 24C11.2 17 7 12.8 0 12C7 11.2 11.2 7 12 0Z'/%3E%3C/svg%3E");
  --star-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF2E93' d='M12 0C12.8 7 17 11.2 24 12C17 12.8 12.8 17 12 24C11.2 17 7 12.8 0 12C7 11.2 11.2 7 12 0Z'/%3E%3C/svg%3E");
}

/* estilo app: después de la portada, cada sección es un cuadro blanco con el mismo ancho y esquinas que el panel
   uva, apilados como tarjetas con --stack entre ellos. Cada cuadro mide lo que su contenido (sin pantallas vacías). */
:root { --stack: clamp(16px, 2.5vw, 32px); --card-in: clamp(22px, 4.5vw, 64px); }
main > section.section:not(.hero) {
  height: auto; min-height: 0; padding: 0 0 var(--stack);
  scroll-margin-top: calc(var(--nav) + var(--stack));
}
main > section.section:not(.hero) > .wrap {
  height: auto; padding: var(--card-in); border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 1px 2px rgb(28 15 92 / .06), 0 18px 40px -24px rgb(28 15 92 / .28);
}
/* en el celular, el texto de cada fila usa todo el ancho del cuadro (no solo la columna del nombre) */
@media (max-width: 639px) { .rows > li > p { grid-column: 1 / -1; } }
/* la portada deja el mismo espacio que hay entre cuadros */
main > .hero { padding-bottom: var(--stack); }
/* el pie sigue la pila: el panel uva del cierre y debajo los enlaces, sin pantalla extra */
footer.closing { height: auto; min-height: 0; padding-top: 0; }
footer.closing > .wrap { height: auto; }

/* el cierre: el mismo panel uva de la portada, para que la página abra y cierre igual */
.closing__cta.close--type {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 5vw, 72px); border-radius: var(--r-lg);
  color: var(--p-inv-ink); --bg: var(--uva); --ink: var(--p-inv-ink); --muted: color-mix(in oklab, var(--p-inv-ink) 78%, var(--uva));
  --line: color-mix(in oklab, var(--p-inv-ink) 14%, transparent);
  background: radial-gradient(ellipse 50% 90% at 100% 100%, rgb(255 46 147 / .42), transparent 70%),
              radial-gradient(ellipse 60% 70% at 0% 0%, var(--uva-2), transparent 70%), var(--uva);
}
.closing__cta.close--type::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--star-y) no-repeat 94% 14% / 30px, var(--star-p) no-repeat 82% 30% / 16px, var(--star-y) no-repeat 62% 12% / 14px;
}
.closing__cta.close--type h2, .closing__cta.close--type p { color: var(--p-inv-ink); }
.closing__cta.close--type > .btn--xl { flex-shrink: 0; }
@media (max-width: 639px) {
  .closing__cta.close--type { padding: 28px 22px; }
  .closing__cta.close--type::before { background: var(--star-y) no-repeat 92% 10% / 22px, var(--star-p) no-repeat 78% 22% / 12px; }
  .closing__cta.close--type > .btn--xl { font-size: 17px; white-space: nowrap; }
}

/* ---- estilo app (PWA) ---- */
/* cada cuadro abre con su ícono, como las tarjetas de una app: dice de un vistazo qué es cada sección */
.app-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; justify-self: start; }
.app-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-ico--uva { background: var(--uva); color: #FFE14D; }
.app-ico--rosa { background: var(--p-accent); color: #fff; }
.app-ico--amarillo { background: #FFE14D; color: var(--uva); }
#frase .app-ico { margin-bottom: var(--s-5); }

/* barra de pestañas del celular, flotante como en una app, con WhatsApp en el centro */
.tabbar { display: none; }
@media (max-width: 639px) {
  /* las tarjetas casi de borde a borde, como en una app */
  main, footer.closing { --gut: 12px; }
  main > section.section:not(.hero) > .wrap { --card-in: 20px; }
  .app-ico { width: 40px; height: 40px; border-radius: 12px; }
  .app-ico svg { width: 22px; height: 22px; }

  .tabbar {
    position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
    height: 64px; padding: 0 4px 9px; border-radius: 22px; background: #fff;
    box-shadow: 0 0 0 1px rgb(28 15 92 / .06), 0 12px 28px -10px rgb(28 15 92 / .4);
  }
  .tabbar a { display: grid; justify-items: center; gap: 4px; font: 600 11px/1 var(--font-text); letter-spacing: 0; color: var(--p-muted); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar__item { min-height: 52px; align-content: end; }
  .tabbar__item .tabbar__icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background-color .2s ease; }
  .tabbar__item[aria-current="true"] { color: var(--uva); }
  .tabbar__item[aria-current="true"] .tabbar__icon { background: var(--tinte); color: var(--p-accent); }
  .tabbar__cta { color: var(--p-ink); align-self: end; }
  .tabbar__fab { display: grid; place-items: center; width: 56px; height: 56px; margin-top: -22px; border-radius: 50%; background: var(--p-accent); color: #fff;
    border: 4px solid #fff; box-shadow: 0 8px 16px -6px rgb(255 46 147 / .6); }
  .tabbar__fab svg { width: 26px; height: 26px; }
  .tabbar a:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; border-radius: 12px; }
  /* la barra reemplaza el menú y el botón de arriba: arriba queda solo el logo, como la barra de título de una app */
  :root:has(> body > .tabbar) .nav .nav__toggle, :root:has(> body > .tabbar) .nav .nav__actions { display: none !important; }
  /* el final de la página no queda debajo de la barra */
  :root:has(> body > .tabbar) body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---- precarga: pantalla de inicio como la de una app (solo la primera vez en la visita) ---- */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgb(255 46 147 / .35), transparent 45%), var(--uva);
  transition: opacity .5s ease, scale .5s ease, visibility 0s .5s;
  /* sin JavaScript se va sola: nunca deja la página tapada */
  animation: splash-out .4s ease 2.4s forwards;
}
.splash.is-done { opacity: 0; scale: 1.06; visibility: hidden; pointer-events: none; }
.splash__in { position: relative; display: grid; justify-items: center; gap: 22px; }
.splash__icon { width: 104px; height: 104px; border-radius: 28px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); animation: splash-pop .7s cubic-bezier(.2, .9, .25, 1.25) both; }
.splash__star { position: absolute; top: -14px; right: -16px; width: 30px; height: 30px; background: var(--star-y) no-repeat center / contain; animation: splash-twinkle 1.2s ease-in-out .3s infinite both; }
.splash__bar { width: 128px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .16); overflow: hidden; }
.splash__bar::after { content: ""; display: block; width: 40%; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--p-accent), #FFE14D); animation: splash-load 1s ease-in-out infinite; }
@keyframes splash-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes splash-twinkle { 0%, 100% { scale: .6; rotate: 0deg; opacity: .7; } 50% { scale: 1.1; rotate: 45deg; opacity: 1; } }
@keyframes splash-load { from { translate: -100% 0; } to { translate: 260% 0; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }

/* ---- aparecer al bajar: cada cuadro sube suave y su contenido entra en cascada ----
   html.rv-js lo pone la cabecera antes de pintar; app.js agrega .is-in cuando el cuadro entra en pantalla.
   Si app.js no corre, html.rv-safe (a los 2,5 s) lo muestra todo. */
html.rv-js:not(.rv-safe) .rv { opacity: 0; translate: 0 32px; scale: .985; }
html.rv-js:not(.rv-safe) .rv-kid { opacity: 0; translate: 0 18px; }
html.rv-js:not(.rv-safe) .rv-kid.app-ico { translate: none; scale: .5; }
html.rv-js .rv, html.rv-js .rv-kid {
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1), scale .7s cubic-bezier(.22, 1, .36, 1);
}
html.rv-js .rv-kid { transition-delay: calc(120ms + var(--i, 0) * 70ms); }
html.rv-js .rv-kid.app-ico { transition-timing-function: cubic-bezier(.2, .9, .25, 1.35); }
html.rv-js .rv.is-in, html.rv-js .is-in .rv-kid { opacity: 1; translate: none; scale: 1; }
html.rv-js .is-in .rv-kid.app-ico { scale: 1; }

/* la barra de pestañas sube al abrir, como en una app */
@media (max-width: 639px) {
  .tabbar { animation: tabbar-in .6s cubic-bezier(.22, 1, .36, 1) .25s both; }
}
@keyframes tabbar-in { from { translate: 0 140%; } to { translate: none; } }

/* quien pidió menos movimiento en su teléfono ve todo quieto y al instante */
@media (prefers-reduced-motion: reduce) {
  .splash__icon, .splash__star, .splash__bar::after, .tabbar { animation: none; }
  html.rv-js .rv, html.rv-js .rv-kid { opacity: 1 !important; translate: none !important; scale: 1 !important; transition: none !important; }
}

/* lo que dibuja el navegador también lleva la marca */
html { scrollbar-color: color-mix(in oklab, var(--p-ink) 40%, transparent) transparent; }
::selection { background: #FFE14D; color: var(--p-ink); }