/* ============================================================
   SANDBOX & HEALTH — PORTADA DE DECISIÓN (portada.css)
   Móvil primero: dos tarjetas grandes apiladas.
   En PC: las dos opciones lado a lado ocupando la pantalla.
   Paleta de marca: eggshell / tan / sandy-clay / camel / olive.
   ============================================================ */

:root{
  --eggshell:    #F4EEDC;
  --tan:         #D6BE9C;
  --sandy-clay:  #D9A972;
  --camel:       #B78A63;
  --dusty-olive: #756F49;

  --olive-deep:  #56512F;
  --olive-night: #615B3A;
  --camel-deep:  #8A5B36;
  --terracotta:  #B7522E;   /* acento juguetón solo del lado infantil */
  --ink:         #1F1D12;
  --ink-soft:    #3A362A;
  --line:        rgba(31, 29, 18, .18);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible',
             'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius: 26px;
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --btn-shadow:       0 4px 0 rgba(31, 29, 18, .28), 0 10px 22px -10px rgba(31, 29, 18, .35);
  --btn-shadow-press: 0 1px 0 rgba(31, 29, 18, .28), 0 4px 10px -6px rgba(31, 29, 18, .3);
}

*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html{ -webkit-text-size-adjust: 100%; font-size: 20px; }

body{
  font-family: var(--body);
  background:
    radial-gradient(700px 420px at 90% -5%, rgba(217, 169, 114, .35), transparent 60%),
    radial-gradient(620px 480px at 0% 105%, rgba(117, 111, 73, .16), transparent 65%),
    var(--eggshell);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

/* Foco visible con doble anillo: se ve sobre fondos claros y oscuros */
:focus-visible{
  outline: 4px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--eggshell), 0 0 0 10px var(--eggshell);
  border-radius: 10px;
}

.skip-link{
  position: absolute; left: 16px; top: -100px; z-index: 99;
  background: var(--ink); color: var(--eggshell);
  padding: 14px 22px; border-radius: 12px;
  font-weight: 700; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus{ top: 16px; }

/* ============================================================
   ESTRUCTURA — la página completa cabe en una vista en PC
   ============================================================ */
.page{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px);
  gap: clamp(20px, 3vw, 32px);
}

/* ============================================================
   ENCABEZADO
   ============================================================ */
.top{ text-align: center; }
.top__logo{
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.01em;
}
.top__amp{ font-style: italic; color: var(--camel-deep); }
.top__title{
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 380;
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 40, "opsz" 144;
}
.top__title .ital{
  font-style: italic;
  font-weight: 320;
  color: var(--olive-deep);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.top__sub{
  margin-top: 10px;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ============================================================
   LAS DOS TARJETAS
   ============================================================ */
.choices{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;       /* móvil: apiladas */
  gap: clamp(18px, 3vw, 28px);
}
@media (min-width: 760px){
  .choices{ grid-template-columns: 1fr 1fr; }  /* PC: lado a lado */
}

.panel{
  position: relative;
  display: flex;
  border-radius: var(--radius);
  border: 3px solid var(--ink);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  min-height: 380px;
  box-shadow: 0 14px 36px -18px rgba(31, 29, 18, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.panel:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 52px -22px rgba(31, 29, 18, .45);
}
.panel:active{ transform: translateY(0); }

/* Fondos propios de cada audiencia */
.panel--kids{
  background:
    radial-gradient(420px 300px at 85% 12%, rgba(217, 169, 114, .55), transparent 65%),
    radial-gradient(360px 300px at 8% 95%, rgba(183, 82, 46, .18), transparent 60%),
    #F8E9CF;
}
.panel--elders{
  background:
    radial-gradient(440px 320px at 12% 8%, rgba(217, 169, 114, .25), transparent 60%),
    radial-gradient(420px 340px at 92% 96%, rgba(31, 29, 18, .35), transparent 65%),
    var(--olive-night);
  color: var(--eggshell);
}

/* Decoración SVG detrás del contenido */
.panel__decor{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Contenido */
.panel__body{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  width: 100%;
  padding: clamp(34px, 6vw, 56px) clamp(24px, 5vw, 48px);
}
.panel__emoji{ font-size: 2.6rem; line-height: 1; }
.panel__tag{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--camel-deep);
}
.panel--elders .panel__tag{ color: var(--sandy-clay); }
.panel__name{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 40, "opsz" 144;
}
.panel__name em{
  font-style: italic;
  font-weight: 320;
  color: var(--terracotta);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.panel--elders .panel__name em{ color: var(--sandy-clay); }
.panel__desc{
  max-width: 380px;
  font-size: .95rem;
  color: var(--ink-soft);
}
.panel--elders .panel__desc{ color: rgba(244, 238, 220, .92); }

/* "Botón" interno: grande, con borde y sombra de presionable.
   (Es un span: toda la tarjeta es el enlace, un solo destino claro.) */
.panel__btn{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 16px 26px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--eggshell);
  color: var(--ink);
  font-weight: 800;
  font-size: .95rem;
  box-shadow: var(--btn-shadow);
  transition: background .2s var(--ease), color .2s var(--ease),
              transform .15s var(--ease), box-shadow .15s var(--ease);
}
.panel--kids .panel__btn{ background: var(--terracotta); border-color: var(--ink); color: var(--eggshell); }
.panel--elders .panel__btn{ background: var(--olive-deep); border-color: var(--eggshell); color: var(--eggshell); }

/* Estados DRÁSTICOS: al pasar o enfocar, el botón interno se invierte */
.panel:hover .panel__btn,
.panel:focus-visible .panel__btn{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--eggshell);
}
.panel--elders:hover .panel__btn,
.panel--elders:focus-visible .panel__btn{
  background: var(--eggshell);
  border-color: var(--eggshell);
  color: var(--ink);
}
.panel:active .panel__btn{ transform: translateY(3px); box-shadow: var(--btn-shadow-press); }

.panel__arrow{
  font-size: 1.15em;
  transition: transform .3s var(--ease);
}
.panel:hover .panel__arrow{ transform: translateX(5px); }

/* ============================================================
   PIE
   ============================================================ */
.bottom{
  text-align: center;
  font-size: .85rem;
  color: var(--ink-soft);
  padding-bottom: 6px;
}
.bottom a{
  color: var(--olive-deep);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* objetivo táctil amplio */
  display: inline-block;
  padding: 8px 4px;
}
.bottom a:hover{ color: var(--ink); }

/* ============================================================
   ENTRADA SUAVE (solo CSS: funciona aunque anime.js no cargue)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .top, .panel, .bottom{
    opacity: 0;
    transform: translateY(18px);
    animation: entrar .7s var(--ease) forwards;
  }
  .panel--kids{ animation-delay: .12s; }
  .panel--elders{ animation-delay: .24s; }
  .bottom{ animation-delay: .36s; }
}
@keyframes entrar{
  to{ opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOVIMIENTO REDUCIDO — todo queda estático
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation: none !important;
    transition-duration: .01ms !important;
  }
}