/* ==========================================================================
   Ayudarte · Estilo del sitio
   Crema + azul marino + verde azulado, titulares en Super Waffles, tarjetas
   pastel, ilustraciones, iconos y notas a mano en WebP (ver assets/img).
   Todo está en rem: base.css escala la raíz según la pantalla.
   ========================================================================== */
@layer reset, tokens, base, parts, template, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Color · roles */
    --bg:          light-dark(#FBF7F0, #0F1A22);
    --header-bg:   light-dark(#FFFDF9, #0F1A22);
    --surface:     light-dark(#FFFFFF, #172531);
    --tint:        light-dark(#F2EDE4, #1C2C39);
    --ink:         light-dark(#14284B, #E9EFF6);
    --ink-2:       light-dark(#4A5A75, #AEBBCC);
    --line:        light-dark(#E8E0D3, #29394A);
    --line-strong: light-dark(#7B879A, #6B7B8E);
    --brand:       light-dark(#1E7A76, #5CC2B8);
    --brand-hover: light-dark(#176561, #86D6CD);
    --on-brand:    light-dark(#FFFFFF, #06201E);
    --badge:       light-dark(#4C74B0, #7FA9E0);
    --on-badge:    light-dark(#FFFFFF, #0A1626);

    /* Pasteles: fondo de tarjeta (cambia con el tema) y trazo del texto destacado */
    --p-mint:   light-dark(#D9EFE8, #1B3A37);  --i-mint:   light-dark(#1B6F6A, #8EDCD0);
    --p-sky:    light-dark(#DDEAF6, #1B3248);  --i-sky:    light-dark(#27598F, #9CC6F2);
    --p-lilac:  light-dark(#E6E0F4, #2A2748);  --i-lilac:  light-dark(#5A4A98, #BDB2F0);
    --p-peach:  light-dark(#FCE7D8, #3E2B25);  --i-peach:  light-dark(#9C4726, #F4B08F);
    --p-butter: light-dark(#FBF0CC, #3A3520);
    --p-rose:   light-dark(#F9DDDD, #3F2729);
    --band:     light-dark(#DCEAF6, #162A3A);

    /* Círculos tras los iconos: se quedan claros en modo oscuro, así los iconos (de
       colores medios) siguen leyéndose. Es el mismo criterio que una pegatina. */
    --c-mint: #BCE2D6;  --c-sky: #C1D8EE;  --c-lilac: #D1C7EB;  --c-peach: #F7D0B6;
    --disc: #FFFFFF;

    /* Tipografía */
    --font-display: "Super Waffles", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
    --font-text: "Atkinson Hyperlegible Next Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fw-display: 400; /* Super Waffles solo tiene un peso, ya se ve en negrita */
    --tracking-display: 0;
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-sm: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
    --text-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
    --h1: clamp(2rem, 1.1rem + 2.4vw, 2.75rem);
    --h2: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
    --h3: clamp(1.3rem, 1.2rem + 0.4vw, 1.55rem);
    --h3-sm: 1.25rem;

    /* Forma */
    --r-btn: 999px;
    --r-chip: 999px;
    --r-card: 22px;
    --r-panel: 30px;
    --shadow-ink: light-dark(rgb(20 40 75 / 0.1), rgb(0 0 0 / 0.4));
    --shadow-card: 0 1px 2px var(--shadow-ink), 0 10px 22px -12px var(--shadow-ink);

    /* Layout */
    --max: 76rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --header-h: 4.5rem;
    --section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  /* Respaldo para navegadores sin light-dark() (Safari < 17.5, Chrome < 123): mismos
     colores, elegidos con el tema del sistema o con data-theme. Donde light-dark()
     existe, este bloque no se aplica. */
  @supports not (color: light-dark(#000, #fff)) {
    :root {
      --bg: #FBF7F0;
      --header-bg: #FFFDF9;
      --surface: #FFFFFF;
      --tint: #F2EDE4;
      --ink: #14284B;
      --ink-2: #4A5A75;
      --line: #E8E0D3;
      --line-strong: #7B879A;
      --brand: #1E7A76;
      --brand-hover: #176561;
      --on-brand: #FFFFFF;
      --badge: #4C74B0;
      --on-badge: #FFFFFF;
      --p-mint: #D9EFE8;
      --i-mint: #1B6F6A;
      --p-sky: #DDEAF6;
      --i-sky: #27598F;
      --p-lilac: #E6E0F4;
      --i-lilac: #5A4A98;
      --p-peach: #FCE7D8;
      --i-peach: #9C4726;
      --p-butter: #FBF0CC;
      --p-rose: #F9DDDD;
      --band: #DCEAF6;
      --shadow-ink: rgb(20 40 75 / 0.1);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --bg: #0F1A22;
        --header-bg: #0F1A22;
        --surface: #172531;
        --tint: #1C2C39;
        --ink: #E9EFF6;
        --ink-2: #AEBBCC;
        --line: #29394A;
        --line-strong: #6B7B8E;
        --brand: #5CC2B8;
        --brand-hover: #86D6CD;
        --on-brand: #06201E;
        --badge: #7FA9E0;
        --on-badge: #0A1626;
        --p-mint: #1B3A37;
        --i-mint: #8EDCD0;
        --p-sky: #1B3248;
        --i-sky: #9CC6F2;
        --p-lilac: #2A2748;
        --i-lilac: #BDB2F0;
        --p-peach: #3E2B25;
        --i-peach: #F4B08F;
        --p-butter: #3A3520;
        --p-rose: #3F2729;
        --band: #162A3A;
        --shadow-ink: rgb(0 0 0 / 0.4);
      }
    }
    :root[data-theme="dark"] {
      --bg: #0F1A22;
      --header-bg: #0F1A22;
      --surface: #172531;
      --tint: #1C2C39;
      --ink: #E9EFF6;
      --ink-2: #AEBBCC;
      --line: #29394A;
      --line-strong: #6B7B8E;
      --brand: #5CC2B8;
      --brand-hover: #86D6CD;
      --on-brand: #06201E;
      --badge: #7FA9E0;
      --on-badge: #0A1626;
      --p-mint: #1B3A37;
      --i-mint: #8EDCD0;
      --p-sky: #1B3248;
      --i-sky: #9CC6F2;
      --p-lilac: #2A2748;
      --i-lilac: #BDB2F0;
      --p-peach: #3E2B25;
      --i-peach: #F4B08F;
      --p-butter: #3A3520;
      --p-rose: #3F2729;
      --band: #162A3A;
      --shadow-ink: rgb(0 0 0 / 0.4);
    }
  }
}

@layer template {

  /* ---------- Hero -------------------------------------------------------- */
  .hero { position: relative; overflow: hidden; }
  .hero__grid { display: grid; gap: 1rem; align-items: end; padding-top: clamp(1.5rem, 4vw, 3rem); }
  .hero__copy { position: relative; z-index: 1; padding-bottom: 1rem; }
  .hero h1 { color: var(--ink); }
  .hero .lead { margin-top: 1.25rem; max-width: 36rem; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

  /* Primera pantalla (hero + SOS): en monitores altos el bloque se centra en vertical entre el
     header y el borde de abajo, con el mismo aire arriba y abajo. En pantallas bajas no cambia nada. */
  .first-screen { display: flex; flex-direction: column; justify-content: center; }
  .first-screen > * { flex: none; }
  @media (min-width: 56rem) {
    .first-screen {
      padding-block: clamp(0.75rem, 2vh, 1.75rem);
      min-height: calc(100vh - var(--header-h) - 1px);
      min-height: min(calc(100svh - var(--header-h) - 1px), 60rem);
    }
  }

  /* Página 404: el mismo bloque de texto del hero, sin ilustración, con aire alrededor */
  .not-found { display: grid; align-items: center; min-height: calc(100dvh - var(--header-h)); padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem); }

  /* Nota a mano bajo los botones: texto (Stay With Me en imagen) + corazón y subrayado
     dibujados a mano. Todo se pinta con el color del tema (ver .hand / .doodle). */
  .hero__note {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 0.4rem;
    width: fit-content;
    margin-top: 1.25rem;
    color: var(--ink-2);
    transform: rotate(-2deg);
  }
  .hero__note .doodle--heart { color: var(--ink); }
  .hero__note .doodle--swoosh { grid-column: 1 / -1; color: var(--ink); margin-top: -0.2rem; }

  .hero__art { position: relative; align-self: end; }
  .hero__notes { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem; }
  .hero__notes p { margin: 0; color: var(--ink); }
  .hero__quote {
    padding: 1rem 1.3rem;
    border-radius: 46% 54% 50% 50% / 56% 50% 50% 44%;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    transform: rotate(-3deg);
  }
  .hero__ask { transform: rotate(-3deg); }
  .hero__img {
    display: block;
    width: 134%;
    max-width: none;
    margin-left: -17%;
    height: auto;
    /* bordes difuminados: el recorte se funde con la página */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
  }

  /* Dibujos a mano: imágenes que solo aportan su silueta; el color lo pone el texto
     (currentColor), por eso se invierten solas en modo oscuro. Se ocultan si el navegador
     no soporta máscaras (son decoración). */
  .hand, .doodle { display: none; }
  @supports (mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg")) {
    .hand, .doodle {
      display: block;
      background-color: currentColor;
      forced-color-adjust: none;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    /* "No estás solo/a." (Stay With Me, imagen) */
    .hand--note   { width: 10.5rem; aspect-ratio: 4.36 / 1;  -webkit-mask-image: url("../img/nota-no-estas-solo.svg"); mask-image: url("../img/nota-no-estas-solo.svg"); }
    /* Notas a mano de la hoja de recursos */
    .hand--step   { width: 8.5rem;  aspect-ratio: 295 / 180; -webkit-mask-image: url("../img/nota-pequeno-paso.webp");  mask-image: url("../img/nota-pequeno-paso.webp"); }
    .hand--ask    { width: 9.5rem;  aspect-ratio: 386 / 116; -webkit-mask-image: url("../img/nota-esta-bien.webp");     mask-image: url("../img/nota-esta-bien.webp"); }
    .hand--care   { width: 17rem;   aspect-ratio: 523 / 147; -webkit-mask-image: url("../img/nota-tu-bienestar.webp");  mask-image: url("../img/nota-tu-bienestar.webp"); }
    .hand--world  { width: 17rem;   aspect-ratio: 404 / 82;  -webkit-mask-image: url("../img/nota-un-mundo.webp");      mask-image: url("../img/nota-un-mundo.webp"); }
    .doodle--heart {
      width: 2.4rem;
      aspect-ratio: 111 / 128;
      -webkit-mask-image: url("../img/garabato-corazon.webp");
      mask-image: url("../img/garabato-corazon.webp");
    }
    .doodle--swoosh {
      width: 9.5rem;
      aspect-ratio: 431 / 73;
      -webkit-mask-image: url("../img/subrayado.webp");
      mask-image: url("../img/subrayado.webp");
    }
  }

  @media (max-width: 39.99rem) {
    /* Las dos notas caben lado a lado sobre la escena */
    .hero__quote { padding: 0.8rem 1rem; }
    .hand--step { width: 7.2rem; }
    .hand--ask  { width: 8.4rem; }
  }
  @media (min-width: 56rem) {
    .hero__grid { grid-template-columns: minmax(0, 12fr) minmax(0, 13fr); gap: 1.5rem; padding-top: 0; }
    .hero__copy { padding-block: 2.25rem; align-self: center; }
    .hero__art { margin-right: calc(-1 * var(--gutter)); padding-top: 7.5rem; }
    .hero__img { width: 100%; margin-left: 0; }
    /* Las notas ocupan el hueco sobre la escena, sin tapar a la chica */
    .hero__notes { position: absolute; top: 0; left: 0; right: 0; display: block; }
    .hero__quote { position: absolute; top: 0.25rem; left: 2%; padding: 1rem 1.4rem; }
    .hero__ask { position: absolute; top: 2.5rem; right: 6%; }
    .hand--step { width: 10rem; }
    .hand--ask  { width: 13rem; }
  }

  /* ---------- SOS (durazno) ---------------------------------------------- */
  .sos-wrap { padding-block: clamp(1.25rem, 3vw, 2rem) 0; }
  .sos {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3.4vw, 2.5rem);
    border-radius: var(--r-panel);
    background: var(--p-peach);
  }
  .sos__lead { display: flex; align-items: center; gap: 1.1rem; }
  .sos__heart { width: 4.25rem; height: auto; flex: none; }
  .sos h2 { font-size: var(--h3); }
  .sos__note { margin-top: 0.3rem; color: var(--ink-2); font-size: var(--text-lg); }
  .sos__item {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: var(--ink);
    text-decoration: none;
  }
  .sos__item:hover { color: var(--ink); }
  .sos__item:hover .sos__num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
  .sos__icon { flex: none; width: 4rem; height: 4rem; border-radius: 50%; object-fit: contain; }
  .sos__label { display: block; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.3; }
  .sos__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem);
    font-weight: var(--fw-display);
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .sos__sub { font-size: var(--text-sm); color: var(--ink-2); }
  @media (min-width: 56rem) {
    .sos { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0; }
    .sos__item { padding-left: 2rem; margin-left: 2rem; border-left: 1px solid var(--line); border-left: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
  }

  /* ---------- Primeros auxilios: tarjetas pastel ------------------------- */
  .aid-cards { display: grid; gap: 1.1rem; }
  .aid-card {
    --tone-bg: var(--p-mint); --tone-circle: var(--c-mint); --tone-ink: var(--i-mint);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.1rem;
    align-items: start;
    align-content: start;
    padding: 1.5rem;
    border-radius: var(--r-card);
    background: var(--tone-bg);
  }
  .aid-card[data-tone="sky"]   { --tone-bg: var(--p-sky);   --tone-circle: var(--c-sky);   --tone-ink: var(--i-sky); }
  .aid-card[data-tone="lilac"] { --tone-bg: var(--p-lilac); --tone-circle: var(--c-lilac); --tone-ink: var(--i-lilac); }
  .aid-card[data-tone="peach"] { --tone-bg: var(--p-peach); --tone-circle: var(--c-peach); --tone-ink: var(--i-peach); }
  .aid-card__icon {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--tone-circle);
  }
  .aid-card__icon img { width: 68%; height: 68%; object-fit: contain; }
  /* El icono que ya trae su propio círculo no lleva otro encima */
  .aid-card__icon--bare { background: none; }
  .aid-card__icon--bare img { width: 100%; height: 100%; }
  .aid-card h3 { font-size: 1.45rem; }
  .aid-card p { margin-top: 0.45rem; font-size: var(--text-base); color: var(--ink-2); }
  .aid-card .num { color: var(--tone-ink); font-family: var(--font-display); font-size: 1.15em; }
  @media (min-width: 40rem) { .aid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) {
    .aid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .aid-card { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem; }
  }

  /* ---------- Entiende / Terapias --------------------------------------- */
  .section--soft { background: var(--surface); background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
  .therapy p { font-size: var(--text-base); }

  /* ---------- Cómo empezar (franja azul: título arriba, pasos grandes abajo) ---- */
  .steps-band { background: var(--band); padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem); }
  .steps-band__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  .steps-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .steps-band .section-head { margin-bottom: 0; max-width: 46rem; }
  .steps-band .section-head h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.25rem); }
  .steps-band .section-head .lead { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }
  .steps-band .hand--care { margin-top: 1.5rem; color: var(--ink); }

  .steps { list-style: none; padding: 0; display: grid; gap: 2rem; counter-reset: step; }
  .step { position: relative; counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
  .step__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--disc);
    box-shadow: var(--shadow-card);
  }
  .step__icon img { width: 60%; height: 60%; object-fit: contain; }
  .step__icon::after {
    content: counter(step);
    position: absolute;
    top: -0.4rem;
    left: -0.4rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--badge);
    color: var(--on-badge);
    font-size: 1rem;
    font-weight: 700;
  }
  .step h3 { font-size: 1.5rem; }
  .step p { margin-top: 0.4rem; font-size: 1.1rem; line-height: 1.5; color: var(--ink-2); }
  .step__arrow { display: none; }
  @media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 72rem) {
    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
    .step { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.1rem; }
    .step__icon { width: 6.25rem; height: 6.25rem; }
    .step__icon::after { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
    .step__arrow {
      display: block;
      position: absolute;
      top: 2.1rem;
      left: calc(100% + 0.25rem);
      width: 2.5rem;
      height: 2.5rem;
      color: var(--ink-2);
    }
    .step:last-child .step__arrow { display: none; }
  }

  /* ---------- Adornos (plantas y paisaje): solo en pantallas anchas ------ */
  .deco { display: none; pointer-events: none; user-select: none; }
  .deco-host { position: relative; }
  @media (min-width: 56rem) {
    .deco { display: block; height: auto; }
    .section-head .deco--hojas { width: 9.5rem; margin-top: 2rem; }
    .deco--flores { position: absolute; top: -0.5rem; right: 0; width: 10rem; }
    .deco--paisaje { width: 17rem; flex: none; }
  }
  @media (max-width: 55.99rem) {
    .steps-band__head { display: block; }
  }
}