/* ---------- hero ---------- */
  /* sin overflow:hidden — al 200% de zoom recortaba el h1 y los párrafos sin
     dejar scrollbar, o sea el texto quedaba inalcanzable (WCAG 1.4.4) */
  .hero{position:relative; padding:4.5rem 1.4rem 4.5rem; background:
    radial-gradient(60rem 30rem at 110% -10%, var(--sage-soft), transparent 60%),
    radial-gradient(50rem 26rem at -20% 110%, var(--coral-soft), transparent 55%),
    var(--paper);}
  .hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:2.5rem; align-items:center; position:relative}
  /* un ítem de grid no se encoge bajo su contenido mínimo: sin esto una palabra
     larga del h1 estiraba la columna en vez de partirse */
  .hero .wrap > *{min-width:0}
  @media (max-width:760px){ .hero .wrap{grid-template-columns:1fr} }
  .onair{
    display:inline-flex; align-items:center; gap:.5em;
    /* ponytail: #C9564A + texto blanco da 4.27:1, bajo el mínimo AA (4.5:1) a este
       tamaño de texto. 5% más oscuro para pasar sin tocar el rojo de marca. */
    background:color-mix(in srgb, var(--onair) 95%, black 5%); color:#fff;
    font-weight:700; font-size:.8rem; letter-spacing:.14em; padding:.35em 1em; border-radius:8px;
    transform:rotate(-2deg); box-shadow:0 4px 14px color-mix(in srgb, var(--onair) 35%, transparent);
  }
  .onair .dot{width:.55em;height:.55em;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){ .onair .dot,.eq span{animation:none !important} }
  .hero h1 em{font-style:italic; color:var(--coral)}
  .hero .sub{font-size:1.12rem; color:var(--ink-soft)}
  .avatar-ring{
    justify-self:center; width:min(300px,70vw); aspect-ratio:1; border-radius:50%;
    padding:10px; background:conic-gradient(from 20deg, var(--peach), var(--rose), var(--sage), var(--peach));
  }
  .avatar-ring img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:#fff}
  .cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem}
  .btn{
    display:inline-block; text-decoration:none; font-weight:600; border-radius:999px;
    padding:.65em 1.5em; border:2px solid var(--coral); transition:transform .15s ease;
    cursor:pointer; font-family:inherit; font-size:1rem; background:none; color:var(--coral);
    max-width:100%; /* etiquetas largas envuelven en vez de desbordar la pantalla */
  }
  .btn:hover{transform:translateY(-2px)}
  .btn.primary{background:var(--coral); color:#fff}
  .btn.small{font-size:.85rem; padding:.4em 1.1em}
  .btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
  .hero .credo{margin-top:2rem; font-family:Georgia,serif; font-style:italic; color:var(--ink-soft); border-left:3px solid var(--sage); padding-left:1em}

  /* ---------- cards / grids ---------- */
  /* Sobre --paper-2 (12% más oscuro que --paper) los tres tokens de texto caían
     bajo AA: coral 4.09, sage-ink 4.21, ink-soft 4.38. Se redefinen en el scope
     de .alt en vez de aclarar el fondo — aclararlo lo suficiente lo dejaba
     igual a --paper y la alternancia de secciones desaparecía. */
  .alt{
    background:var(--paper-2);
    --coral:#8A4829; --sage-ink:#4B5D3E; --ink-soft:#685343;
  }
  /* min(220px,100%): el mínimo fijo generaba scroll horizontal a 320px */
  .grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); margin-top:1.5rem}
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.4rem 1.3rem; position:relative;
    display:flex; flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .card:hover{
    transform:translateY(-4px); border-color:var(--peach);
    box-shadow:0 10px 24px color-mix(in srgb, var(--ink) 12%, transparent);
  }
  @media (prefers-reduced-motion:reduce){ .card, .card:hover{transform:none; transition:none} }
  .card .flower{font-size:1.6rem; line-height:1; margin-bottom:.5rem}
  .card h3{margin-bottom:.3em}
  .card p{font-size:.93rem; color:var(--ink-soft); margin-bottom:0; flex:1}
  /* el párrafo absorbe el sobrante (flex:1 arriba) y empuja el botón al fondo:
     así dos tarjetas hermanas con textos de distinto largo alinean sus botones */
  .card .btn{margin-top:1.1rem; align-self:flex-start}

  /* lista de formas de colaborar (colaborar.html) — prosa, no tarjetas: no son
     opciones que se elijan, son ejemplos que se leen */
  .formas{list-style:none; padding:0; margin:1.4rem 0 1.6rem; max-width:62ch}
  .formas li{padding:0 0 0 1.4rem; margin-bottom:1rem; position:relative; color:var(--ink-soft)}
  .formas li::before{content:"—"; position:absolute; left:0; color:var(--coral)}
  .formas strong{color:var(--ink)}

  /* ---------- testimonios ---------- */
  /* techo en px: las estrellas van en nowrap (partirlas se leería como nota
     menor) y al 200% desbordaban. Decorativas: el "5,0" va al lado y sí escala */
  .rating{color:var(--coral); font-size:min(1.7rem,40px); letter-spacing:.1em; line-height:1; white-space:nowrap}
  .testi{font-family:Georgia,serif; font-style:italic; font-size:1.02rem; line-height:1.5}
  .testi-quien{font-size:.82rem; color:var(--ink-soft); margin-top:.9rem}

  /* ---------- botiquín ---------- */
  .chips{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0}
  .chip{
    border:1.5px solid var(--line); background:var(--card); color:var(--ink);
    border-radius:999px; padding:.5em 1.2em; font-size:.95rem; cursor:pointer;
    font-family:inherit; transition:all .15s ease;
  }
  .chip:hover{border-color:var(--sage); transform:translateY(-1px)}
  .chip[aria-pressed="true"]{background:var(--sage-ink); border-color:var(--sage-ink); color:#fff}
  .chip:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
  .receta{
    margin-top:1rem; background:var(--card); border:1px dashed var(--sage); border-radius:var(--radius);
    padding:1.5rem 1.6rem;
  }
  .receta[hidden]{display:none}
  .receta .esencia{font-family:Georgia,serif; font-size:1.5rem; color:var(--coral); margin:0 0 .15em}
  .receta .sistema{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-ink); font-weight:700}
  .receta p{margin:.6em 0 0}
  .receta .nota{font-size:.85rem; color:var(--ink-soft); font-style:italic}
  .receta #r-img{width:100%; max-width:220px; height:auto; border-radius:var(--radius); display:block}

  /* ---------- podcast / radioteca ---------- */
  .eq{display:flex; align-items:flex-end; gap:5px; height:64px}
  .eq span{width:9px; background:var(--peach); border-radius:4px 4px 0 0; animation:eq 1.1s ease-in-out infinite}
  .eq span:nth-child(2){animation-delay:.15s; background:var(--rose)}
  .eq span:nth-child(3){animation-delay:.3s; background:var(--sage)}
  .eq span:nth-child(4){animation-delay:.45s; background:var(--peach)}
  .eq span:nth-child(5){animation-delay:.6s; background:var(--rose)}
  .eq span:nth-child(6){animation-delay:.75s; background:var(--sage)}
  @keyframes eq{0%,100%{height:18%}50%{height:100%}}
  .panel{
    display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:center;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem;
  }
  @media (max-width:640px){ .panel{grid-template-columns:1fr} }
  .stat-row{display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:1rem}
  .stat b{font-family:Georgia,serif; font-size:1.7rem; color:var(--coral); font-variant-numeric:tabular-nums}
  .stat span{display:block; font-size:.83rem; color:var(--ink-soft)}
  .dial-card{display:block; text-decoration:none; color:var(--ink)}
  .dial-card .freq{
    font-family:Consolas,monospace; font-size:.8rem; color:var(--coral); letter-spacing:.1em;
    border:1px solid var(--line); border-radius:6px; padding:.15em .6em; display:inline-block; margin-bottom:.6rem;
    background:var(--paper);
  }
  .dial-card:hover{border-color:var(--coral)}
  .dial-card .dur{font-size:.8rem; color:var(--ink-soft)}
  .dial-line{height:6px; border-radius:3px; margin-top:.9rem;
    background:repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 12px);
    position:relative}
  .dial-line i{position:absolute; top:-4px; width:3px; height:14px; background:var(--coral); border-radius:2px}

  /* ---------- talleres ---------- */
  .taller-card{display:flex; flex-direction:column; gap:.4rem}
  .taller-card .tag{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:700}
  .taller-card .meta{display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.88rem; color:var(--ink-soft); margin:.4rem 0 .8rem}
  .taller-card .meta b{color:var(--ink)}
  /* ponytail: .precio global — lo comparten talleres y las tarjetas de aporte */
  .precio{font-family:Georgia,serif; font-size:1.25rem; color:var(--coral)}
  /* el precio iba más grande que el nombre del plan (1.25 vs 1.15rem) y la
     sección se leía como tarifario en vez de invitación: acá manda el nombre */
  .precio.aporte{font-size:.98rem; color:var(--ink-soft); font-family:inherit}
  .cupos{display:inline-block; font-size:.78rem; background:var(--sage-soft); color:var(--ink); border-radius:999px; padding:.2em .9em; font-weight:600}
  .cupos.pocos{background:var(--coral-soft)}
  /* Sección sin contenido todavía: no es un error, así que se ve tranquila. */
  .aviso-vacio{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:1.2rem 1.4rem; color:var(--ink-soft); max-width:38rem}

  /* ---------- agendar ---------- */
  /* .nota-agenda: aparte, en itálica. .nota-pie: letra chica factual (fuentes, condiciones) */
  .nota-agenda,.nota-pie{font-size:.92rem; color:var(--ink-soft); font-style:italic; margin-top:1.4rem; max-width:38rem}
  .nota-pie{font-style:normal; max-width:60ch}

  /* ---------- página legal ---------- */
  .legal h3{margin-top:2.2rem; color:var(--sage-ink)}
  .legal ul{max-width:62ch; padding-left:1.2rem}
  .legal li{margin-bottom:.6em}

  /* ---------- línea de tiempo (sobre-mi.html) ---------- */
  /* ponytail: <ol> con un riel de borde y puntos en ::before. Sin librería,
     sin JS: son ~5 hitos estáticos. */
  .timeline{list-style:none; margin:2rem 0 0; padding:0 0 0 1.8rem; max-width:62ch;
    border-left:2px solid var(--line)}
  .timeline li{position:relative; padding-bottom:2rem}
  .timeline li:last-child{padding-bottom:0}
  .timeline li::before{
    content:""; position:absolute; left:calc(-1.8rem - 7px); top:.45em;
    width:12px; height:12px; border-radius:50%;
    background:var(--coral); border:2px solid var(--paper);
  }
  .timeline .cuando{
    display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--sage-ink); font-weight:700; margin-bottom:.2em;
  }
  .timeline .hito{font-family:Georgia,serif; font-size:1.15rem; color:var(--ink); margin:0 0 .3em}
  .timeline p{margin:0; font-size:.95rem; color:var(--ink-soft)}
  @media (max-width:640px){
    .timeline{padding-left:1.3rem}
    .timeline li::before{left:calc(-1.3rem - 7px)}
  }

  #petals{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}