/* ============================================================
     AZAHAR — capa editorial
     Se carga después de style.css y solo añade/sobrescribe.
     Dos públicos, dos partes: el público (conciertos, sus fotos) y
     quien contrata (la banda, formatos, testimonios, presupuesto).
     Las animaciones de scroll las pone static/js/motion.js (GSAP);
     sin GSAP o con reduced-motion, todo se ve completo y estático.
     ============================================================ */

  :root{
    /* Escala de texto funcional: nada interactivo por debajo de 12px */
    --fs-xs:0.78rem;
    --fs-sm:0.875rem;
    --fs-md:1rem;
    --fs-lg:1.125rem;
    --display:'Gloock', Georgia, serif;
    --shadow-cta:0 14px 30px -14px rgba(232,90,43,0.7), 0 2px 6px rgba(0,0,0,0.35);
  }

  /* Gloock tiene un único peso: nunca se sintetiza negrita */
  html{ font-synthesis-weight:none; }

  /* ScrollTrigger mide mal las posiciones si el scroll es "smooth" al
     recalcular con la página ya bajada: con GSAP activo, scroll normal. */
  html.has-gsap{ scroll-behavior:auto; }

  /* <main> no crea contexto de apilamiento: los modales (z-index 200)
     deben quedar por encima de la nav fija (z-index 50). */
  main{ position:static; z-index:auto; }

  .hx, .manifesto, .agenda-split, .fans, .big-marquee, .band, .booking, .cta-final, .hire{
    position:relative;
    z-index:1;
  }

  input, textarea{ caret-color:var(--pink); }
  a{ text-underline-offset:0.18em; }

  .skip-link{
    position:fixed;
    top:0.8rem; left:0.8rem;
    z-index:300;
    padding:0.7rem 1rem;
    border-radius:var(--radius-sm);
    background:var(--text);
    color:var(--bg);
    font-weight:700;
    font-size:var(--fs-sm);
    text-decoration:none;
    transform:translateY(-200%);
    transition:transform var(--dur-press) var(--ease-out);
  }
  .skip-link:focus{ transform:none; }

  /* ------------------------------------------------------------
     TITULARES, BOTONES, INSIGNIAS
     ------------------------------------------------------------ */
  .display{ letter-spacing:-0.012em; }
  .hx-accent{ color:var(--pink); }

  .btn{ font-size:0.95rem; }
  .btn-lg{ padding:1.05rem 2rem; font-size:1rem; }
  .btn svg{ flex:none; }
  @media (hover: hover) and (pointer: fine){
    .btn-primary:hover{ box-shadow:var(--bezel-highlight), var(--shadow-cta); transform:translateY(-2px); }
    .btn-secondary:hover{ border-color:var(--blue); background:var(--surface-glass-strong); box-shadow:none; }
  }
  .tab-btn.active{ box-shadow:none; }

  .type-badge{ font-size:0.75rem; letter-spacing:0.04em; padding:0.32rem 0.72rem; }

  /* Imagen en píldora dentro de un titular: mide en em para escalar
     con el texto que la rodea. */
  .inline-pic{
    display:inline-block;
    width:1.9em;
    height:0.82em;
    border-radius:999px;
    vertical-align:-0.04em;
    margin:0 0.06em;
    background-size:cover;
    background-position:center 30%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), 0 10px 24px -12px rgba(0,0,0,0.8);
  }

  /* Botón fijo en la zona del pulgar (solo móvil) */
  .mobile-cta{ display:none; }
  @media (max-width: 760px){
    .mobile-cta{
      display:flex;
      align-items:center;
      justify-content:center;
      position:fixed;
      left:50%;
      bottom:calc(1rem + env(safe-area-inset-bottom));
      z-index:45;
      min-height:52px;
      padding:0 1.8rem;
      border-radius:var(--radius-pill);
      background:linear-gradient(135deg, var(--pink), var(--blue));
      color:#140803;
      font-weight:800;
      font-size:1rem;
      text-decoration:none;
      box-shadow:0 16px 30px -12px rgba(0,0,0,0.8), 0 4px 10px rgba(232,90,43,0.35);
      transform:translate(-50%, 160%);
      transition:transform 420ms var(--ease-out);
    }
    .mobile-cta.is-visible{ transform:translate(-50%, 0); }
    .mobile-cta:active{ transform:translate(-50%, 0) scale(0.97); }
  }

  /* ------------------------------------------------------------
     HERO — centrado, a sangre, lavado oscuro
     ------------------------------------------------------------ */
  .hx{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    isolation:isolate;
  }
  .hx-media{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--bg); }
  .hx-media img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 30%;
    display:block;
    transform-origin:50% 40%;
    filter:saturate(0.9) contrast(1.05) brightness(0.82);
  }
  .hx-wash{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 75% 62% at 50% 52%, rgba(11,7,5,0.5) 0%, rgba(11,7,5,0.84) 72%, var(--bg) 100%),
      linear-gradient(180deg, rgba(11,7,5,0.4) 0%, transparent 28%, rgba(11,7,5,0.92) 100%);
  }
  .hx-inner{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:9rem clamp(1.2rem, 5vw, 3rem) 0;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex:1;
    justify-content:center;
  }
  .hx-title{
    max-width:15ch;           /* dos líneas: "Azahar huele a" / "[foto] directo." */
    font-size:clamp(3.1rem, 7.6vw, 6rem);
    line-height:1;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }
  .hx-sub{
    max-width:46ch;
    margin-top:1.6rem;
    font-size:clamp(1.02rem, 1.5vw, 1.2rem);
    line-height:1.6;
    color:#E4D3C2;
  }
  .hx-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.8rem;
    margin-top:2.4rem;
  }
  .hx-ticker{ margin-top:5rem; }
  .ticker{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:var(--fs-sm); letter-spacing:0.01em; }

  /* Oculto hasta que motion.js lo anime (ver script inline de base.html) */
  .js-motion .hx [data-hx]{ opacity:0; }

  @media (max-width: 560px){
    .hx-actions{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; }
    .hx-actions .btn{ justify-content:center; }
  }

  /* ------------------------------------------------------------
     MANIFIESTO — palabras que se encienden con el scroll
     ------------------------------------------------------------ */
  .manifesto{ padding:clamp(7rem, 14vw, 11rem) clamp(1.2rem, 6vw, 5rem); }
  .manifesto-text{
    max-width:1060px;
    margin:0 auto;
    font-size:clamp(1.75rem, 3.8vw, 3.2rem);
    line-height:1.18;
    letter-spacing:-0.012em;
    text-wrap:pretty;
  }
  .manifesto-text .w{ display:inline; opacity:1; }
  .has-gsap .manifesto-text .w{ opacity:0.14; }

  /* ------------------------------------------------------------
     AGENDA DE LA PORTADA — título fijado a la izquierda
     ------------------------------------------------------------ */
  .agenda-split{
    max-width:1240px;
    margin:0 auto;
    padding:0 clamp(1.2rem, 6vw, 5rem) clamp(7rem, 12vw, 10rem);
    display:grid;
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:clamp(2rem, 5vw, 5rem);
    align-items:start;
  }
  .agenda-split-sticky{ position:sticky; top:8rem; }
  .has-gsap .agenda-split-sticky{ position:relative; top:auto; }
  .agenda-split-title{
    font-size:clamp(2.4rem, 5vw, 4.2rem);
    line-height:1.02;
  }
  .agenda-split-copy{ color:var(--muted); margin:1.2rem 0 2rem; max-width:32ch; line-height:1.6; }
  .agenda-split-right{ display:flex; flex-direction:column; gap:0.8rem; }
  .agenda-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1.4rem;
    padding:1.3rem 1.5rem;
    border-radius:var(--radius-md);
    border:1px solid var(--border-soft);
    background:var(--surface-glass);
    text-decoration:none;
    color:var(--text);
    transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-press) var(--ease-out);
  }
  .agenda-row:active{ transform:scale(0.985); }
  .agenda-row.is-cancelado{ opacity:0.5; }
  @media (hover: hover) and (pointer: fine){
    .agenda-row:hover{ border-color:rgba(232,90,43,0.6); background:var(--surface-glass-strong); }
  }
  .agenda-row-date{
    font-size:2.7rem; line-height:0.9; color:var(--pink);
    min-width:3.2rem; text-align:center;
    font-variant-numeric:lining-nums tabular-nums;
  }
  .agenda-row-date small{
    display:block;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:var(--fs-xs); font-weight:800; letter-spacing:0.14em;
    color:var(--muted); margin-top:0.35rem;
  }
  .agenda-row-info{ display:flex; flex-direction:column; gap:0.3rem; min-width:0; }
  .agenda-row-name{ font-weight:700; font-size:1.1rem; }
  .agenda-row-place{ color:var(--muted); font-size:var(--fs-sm); }
  .agenda-empty{
    padding:2rem;
    border-radius:var(--radius-md);
    border:1px dashed var(--border-strong);
    color:var(--muted);
    line-height:1.6;
  }
  .agenda-empty-title{ color:var(--text); font-size:1.6rem; line-height:1.15; margin-bottom:0.6rem; }
  .agenda-empty a{ color:var(--pink); font-weight:700; }
  @media (max-width: 860px){
    .agenda-split{ grid-template-columns:1fr; }
    .agenda-split-sticky{ position:relative; top:auto; }
  }
  @media (max-width: 520px){
    .agenda-row{ grid-template-columns:auto 1fr; padding:1.1rem 1.2rem; gap:1rem; }
    .agenda-row .type-badge{ grid-column:2; justify-self:start; }
  }

  /* ------------------------------------------------------------
     FOTOS DEL PÚBLICO
     ------------------------------------------------------------ */
  .fans{
    max-width:1240px;
    margin:0 auto;
    padding:0 clamp(1.2rem, 6vw, 5rem) clamp(7rem, 12vw, 10rem);
    display:grid;
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    gap:clamp(2rem, 5vw, 4.5rem);
    align-items:center;
  }
  .fans-media{
    border-radius:var(--radius-lg);
    overflow:hidden;
    aspect-ratio:4 / 3;
    background:var(--bg-elevated);
  }
  .fans-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; }
  .fans-title{ font-size:clamp(2.2rem, 4.4vw, 3.6rem); line-height:1.02; }
  .fans-copy{ color:var(--muted); margin:1.2rem 0 1.8rem; line-height:1.65; max-width:40ch; }
  .fans-steps{ list-style:none; display:flex; flex-direction:column; gap:0.9rem; margin-bottom:2.2rem; }
  .fans-steps li{ display:flex; align-items:center; gap:1rem; line-height:1.45; }
  .fans-steps strong{ color:var(--text); }
  .fans-steps li > span:last-child{ color:var(--muted); }
  .fans-step-n{
    flex:none;
    width:2.4rem; height:2.4rem;
    border-radius:50%;
    display:grid; place-items:center;
    border:1px solid rgba(232,185,74,0.45);
    color:var(--blue);
    font-size:1.1rem;
  }
  .fans-actions{ display:flex; flex-wrap:wrap; gap:0.8rem; }
  @media (max-width: 860px){
    .fans{ grid-template-columns:1fr; }
  }

  /* ------------------------------------------------------------
     MARQUESINA TIPOGRÁFICA (separa las dos partes de la portada)
     ------------------------------------------------------------ */
  .big-marquee{
    overflow:hidden;
    padding:2rem 0;
    border-top:1px solid var(--border-soft);
    border-bottom:1px solid var(--border-soft);
    background:var(--bg-soft);
  }
  .big-marquee-track{
    display:inline-flex;
    align-items:center;
    gap:2.4rem;
    white-space:nowrap;
    animation:scroll 42s linear infinite;
    padding-left:2.4rem;
  }
  .big-marquee-track span{
    font-family:var(--display);
    font-size:clamp(2.6rem, 6.4vw, 5.6rem);
    letter-spacing:-0.01em;
    line-height:1.1;
  }
  .big-marquee-track span.outline{
    color:transparent;
    -webkit-text-stroke:1.2px var(--blue);
  }
  .big-marquee-track img{ width:clamp(34px, 4vw, 52px); height:auto; flex:none; }
  @media (prefers-reduced-motion: reduce){ .big-marquee-track{ animation:none; } }

  /* ------------------------------------------------------------
     BANDA — acordeón horizontal
     ------------------------------------------------------------ */
  .band{ padding:clamp(7rem, 12vw, 10rem) clamp(1.2rem, 6vw, 5rem); }
  .band-head{
    max-width:1240px;
    margin:0 auto 3rem;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:2rem;
    flex-wrap:wrap;
  }
  .band-title{ font-size:clamp(2.4rem, 5.2vw, 4.4rem); line-height:1.02; max-width:14ch; }
  .accordion{
    max-width:1240px;
    margin:0 auto;
    height:clamp(420px, 62vh, 600px);
    display:flex;
    gap:0.8rem;
  }
  .acc-slice{
    position:relative;
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-soft);
    background:var(--bg-elevated);
    text-decoration:none;
    color:var(--text);
    transition:flex-grow 700ms var(--ease-spring), border-color var(--dur-base) var(--ease-out);
  }
  .acc-slice img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:50% 20%;
    filter:grayscale(1) sepia(0.2) contrast(1.08) brightness(0.72);
    transform:scale(1.08);
    transition:filter 700ms var(--ease-out), transform 900ms var(--ease-out);
  }
  .acc-shade{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(11,7,5,0.9) 100%); }
  .acc-info{
    position:absolute;
    left:1.3rem; right:1.3rem; bottom:1.3rem;
    display:flex; flex-direction:column; gap:0.4rem;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 450ms var(--ease-out), transform 550ms var(--ease-out);
  }
  .acc-role{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); white-space:nowrap; }
  .acc-name{ font-size:clamp(1.5rem, 2.4vw, 2.2rem); line-height:1; white-space:nowrap; }
  .accordion:not(:hover):not(:focus-within) .acc-slice:first-child,
  .acc-slice:hover, .acc-slice:focus-visible{ flex-grow:3.2; border-color:var(--border-strong); }
  .accordion:not(:hover):not(:focus-within) .acc-slice:first-child img,
  .acc-slice:hover img, .acc-slice:focus-visible img{ filter:none; transform:scale(1); }
  /* Solo la franja abierta enseña texto: en las cerradas no cabe y se cortaría */
  .accordion:not(:hover):not(:focus-within) .acc-slice:first-child .acc-info,
  .acc-slice:hover .acc-info, .acc-slice:focus-visible .acc-info{ opacity:1; transform:none; transition-delay:180ms; }
  /* Móvil y pantallas táctiles (tablets): sin ratón no se puede "abrir"
     una franja, así que se ven los cuatro a la vez en una rejilla. */
  @media (max-width: 760px), (hover: none){
    .accordion{ height:auto; display:grid; grid-template-columns:1fr 1fr; }
    .acc-slice, .accordion:not(:hover):not(:focus-within) .acc-slice:first-child{ aspect-ratio:3/4; flex-grow:1; }
    .acc-slice img, .accordion:not(:hover):not(:focus-within) .acc-slice:first-child img{ filter:saturate(0.9) brightness(0.85); transform:none; }
    .acc-info{ opacity:1; transform:none; left:0.9rem; right:0.9rem; bottom:0.9rem; }
    .acc-name{ white-space:normal; font-size:1.25rem; }
    .acc-role{ white-space:normal; font-size:var(--fs-xs); }
  }
  @media (min-width: 761px) and (hover: none){
    .accordion{ grid-template-columns:repeat(4, 1fr); }
  }

  /* ------------------------------------------------------------
     PARA TU BODA O EVENTO — formatos, datos, testimonios
     ------------------------------------------------------------ */
  .booking{
    max-width:1240px;
    margin:0 auto;
    padding:0 clamp(1.2rem, 6vw, 5rem) clamp(5rem, 9vw, 7rem);
  }
  .booking-head{
    display:grid;
    grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
    gap:clamp(1.5rem, 4vw, 4rem);
    align-items:end;
    margin-bottom:clamp(2.5rem, 5vw, 4rem);
  }
  .booking-title{ font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:1.02; }
  .booking-lead{ color:var(--muted); line-height:1.65; max-width:42ch; }
  .formats{ list-style:none; border-top:1px solid var(--border-strong); }
  .format{
    display:grid;
    grid-template-columns:9rem minmax(0, 1fr) auto;
    gap:clamp(1rem, 3vw, 3rem);
    align-items:baseline;
    padding:clamp(1.6rem, 3vw, 2.2rem) 0;
    border-bottom:1px solid var(--border-soft);
  }
  .format-time{
    font-weight:800;
    font-size:var(--fs-sm);
    color:var(--blue);
    font-variant-numeric:tabular-nums;
  }
  .format-name{ font-size:clamp(1.8rem, 3.2vw, 2.6rem); line-height:1; margin-bottom:0.6rem; }
  .format-body p{ color:var(--muted); line-height:1.6; max-width:52ch; }
  .format-link{
    align-self:center;
    white-space:nowrap;
    font-weight:700;
    font-size:var(--fs-sm);
    color:var(--text);
    text-decoration:none;
    padding:0.7rem 1.1rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-strong);
    transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  .format-link span{ display:inline-block; transition:transform var(--dur-base) var(--ease-out); }
  @media (hover: hover) and (pointer: fine){
    .format-link:hover{ border-color:var(--pink); color:var(--pink); }
    .format-link:hover span{ transform:translateX(3px); }
  }
  .facts{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:1.4rem;
    margin:clamp(2.5rem, 5vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
  }
  .facts li{ display:flex; align-items:flex-start; gap:0.8rem; line-height:1.4; font-weight:600; font-size:0.95rem; }
  .facts svg{ width:22px; height:22px; flex:none; color:var(--blue); margin-top:0.05rem; }
  .quotes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 4rem); }
  .quote blockquote{
    font-size:clamp(1.4rem, 2.4vw, 1.95rem);
    line-height:1.25;
    text-wrap:pretty;
  }
  .quote figcaption{ margin-top:1.2rem; color:var(--muted); font-size:var(--fs-sm); }
  .quote figcaption strong{ color:var(--text); }
  @media (max-width: 900px){
    .booking-head{ grid-template-columns:1fr; }
    .format{ grid-template-columns:1fr; gap:0.6rem; }
    .format-link{ justify-self:start; margin-top:0.6rem; }
    .facts{ grid-template-columns:1fr 1fr; }
    .quotes{ grid-template-columns:1fr; }
  }
  @media (max-width: 480px){
    .facts{ grid-template-columns:1fr; }
  }

  /* ------------------------------------------------------------
     CTA FINAL (todas las páginas salvo Contratar y legales)
     ------------------------------------------------------------ */
  .cta-final{
    overflow:hidden;
    margin:clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem) 0;
    padding:clamp(6rem, 12vw, 9.5rem) clamp(1.2rem, 5vw, 4rem);
    border-radius:calc(var(--radius-lg) + 8px);
    border:1px solid var(--border-soft);
    background:var(--bg-soft);
    text-align:center;
    isolation:isolate;
  }
  .cta-final-media{ position:absolute; inset:0; z-index:-1; }
  .cta-final-media img{
    width:100%; height:100%;
    object-fit:cover; object-position:50% 30%;
    display:block;
    filter:grayscale(1) sepia(0.35) brightness(0.6) contrast(1.1);
  }
  .cta-final-media::after{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(11,7,5,0.55), rgba(11,7,5,0.82)),
      linear-gradient(135deg, rgba(232,90,43,0.28), rgba(232,185,74,0.12));
  }
  .cta-final-title{
    max-width:15ch;
    margin:0 auto;
    font-size:clamp(2.6rem, 6.4vw, 5.6rem);
    line-height:1;
    letter-spacing:-0.02em;
    text-wrap:balance;
  }
  .cta-final-sub{ max-width:44ch; margin:1.4rem auto 0; color:#E4D3C2; line-height:1.6; }
  .cta-final-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.8rem; margin-top:2.4rem; }

  /* ------------------------------------------------------------
     PIE
     ------------------------------------------------------------ */
  footer.site-footer{
    display:block;
    margin-top:clamp(3rem, 6vw, 5rem);
    padding-top:clamp(3rem, 6vw, 4rem);
  }
  .footer-top{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:2.5rem 3rem;
    padding-bottom:2.5rem;
    border-bottom:1px solid var(--border-soft);
  }
  .footer-mark{ display:inline-flex; align-items:center; gap:0.7rem; text-decoration:none; color:var(--text); align-self:flex-start; }
  .footer-mark img{ width:34px; height:34px; }
  .footer-mark span{ font-size:1.6rem; }
  .footer-cols{ display:grid; grid-template-columns:repeat(3, minmax(0, auto)); gap:2rem clamp(2rem, 5vw, 4.5rem); }
  .footer-col{ display:flex; flex-direction:column; gap:0.1rem; font-size:var(--fs-sm); }
  .footer-col-title{ color:var(--text); font-weight:800; margin-bottom:0.2rem; }
  .footer-col a{ color:var(--muted); text-decoration:none; padding:0.5rem 0; transition:color var(--dur-base) var(--ease-out); }
  .footer-col a:hover{ color:var(--pink); }
  .footer-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:1rem 2rem;
    padding-top:1.6rem;
  }
  .footer-legal a{ display:inline-block; padding:0.55rem 0; }
  @media (max-width: 760px){
    .footer-cols{ grid-template-columns:1fr; }
    /* Hueco para que el botón fijo de móvil no tape los enlaces legales */
    body:not(.page-pagina_contacto) footer.site-footer{ padding-bottom:6rem; }
  }

  /* ------------------------------------------------------------
     CABECERAS DE PÁGINA INTERIOR — cálidas y compactas
     ------------------------------------------------------------ */
  .section-head-row{
    min-height:clamp(340px, 50vh, 540px);
    align-items:flex-end;
    margin-bottom:clamp(2.5rem, 5vw, 4rem);
  }
  .section-head-row.section-head-compact{ min-height:clamp(300px, 42vh, 460px); }
  .section-head-row .section-head{ padding:2.2rem clamp(1.2rem, 4vw, 3rem); max-width:min(52ch, 60%); }
  .section-head-row .section-title{
    font-size:clamp(2.6rem, 6vw, 5rem);
    line-height:1;
    letter-spacing:-0.02em;
  }
  .section-lead{
    margin-top:1rem;
    max-width:44ch;
    color:#E4D3C2;
    line-height:1.6;
    font-size:var(--fs-md);
  }
  .section-portrait{ overflow:hidden; }
  .section-portrait img{
    transform-origin:50% 40%;
    filter:grayscale(1) sepia(0.3) contrast(1.08) brightness(0.8);
  }
  /* Tinte cálido de marca sobre la foto (terracota → oro) */
  .section-portrait::before{
    background:linear-gradient(135deg, rgba(232,90,43,0.9) 0%, rgba(232,185,74,0.5) 100%);
    mix-blend-mode:color;
    opacity:0.4;
  }
  .section-portrait::after{
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(11,7,5,0.78) 26%, transparent 62%),
      linear-gradient(0deg, rgba(11,7,5,0.72) 0%, transparent 45%);
  }
  @media (max-width: 760px){
    .section-head-row, .section-head-row.section-head-compact{ min-height:0; margin-bottom:2rem; }
    .section-head-row .section-head{ max-width:100%; padding:1.2rem 1.2rem 0.4rem; }
    .section-portrait{ height:clamp(180px, 30vh, 240px); }
    .section-portrait::after{ background:linear-gradient(180deg, transparent 40%, var(--bg) 100%); }
  }

  /* ------------------------------------------------------------
     CONCIERTOS — agenda en formato cartel
     ------------------------------------------------------------ */
  .cartel{ list-style:none; max-width:1100px; border-top:1px solid var(--border-strong); }
  .cartel-row{
    width:100%;
    display:grid;
    grid-template-columns:5.5rem minmax(0, 1fr) 150px;
    gap:clamp(1rem, 3vw, 2.4rem);
    align-items:center;
    padding:1.4rem clamp(0.6rem, 2vw, 1.4rem);
    background:transparent;
    border:0;
    border-bottom:1px solid var(--border-soft);
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:background var(--dur-base) var(--ease-out);
  }
  .cartel-row:active{ background:var(--surface-glass-strong); }
  .cartel-row.is-cancelado{ opacity:0.5; }
  .cartel-row.is-cancelado .cartel-thumb img{ filter:grayscale(1); }
  @media (hover: hover) and (pointer: fine){
    .cartel-row:hover{ background:var(--surface-glass); }
    .cartel-row:hover .cartel-thumb img{ transform:scale(1.05); }
    .cartel-row:hover .cartel-city{ color:var(--pink); }
  }
  .cartel-date{ display:flex; flex-direction:column; align-items:center; }
  .cartel-day{ font-size:3.4rem; line-height:0.9; color:var(--pink); font-variant-numeric:lining-nums; }
  .cartel-month{ margin-top:0.4rem; font-weight:800; font-size:var(--fs-xs); letter-spacing:0.14em; color:var(--muted); }
  .cartel-info{ display:flex; flex-direction:column; gap:0.35rem; min-width:0; }
  .cartel-city{ font-size:clamp(1.6rem, 3vw, 2.3rem); line-height:1.05; transition:color var(--dur-base) var(--ease-out); }
  .cartel-name{ color:var(--muted); font-size:var(--fs-md); }
  .cartel-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem; margin-top:0.35rem; }
  .cartel-detail{ display:inline-flex; align-items:center; gap:0.4rem; font-size:var(--fs-sm); color:var(--text); }
  .cartel-detail svg{ width:15px; height:15px; color:var(--blue); }
  .cartel-detail.is-muted{ color:var(--muted); font-style:italic; }
  .cartel-thumb{ display:block; aspect-ratio:4 / 3; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-elevated); }
  .cartel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 700ms var(--ease-out); }
  .cartel-empty{ padding:2.5rem 0; color:var(--muted); line-height:1.65; max-width:60ch; }
  .cartel-empty-title{ color:var(--text); font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.15; margin-bottom:0.8rem; }
  .cartel-empty a{ color:var(--pink); font-weight:700; }
  @media (max-width: 640px){
    .cartel-row{ grid-template-columns:4rem minmax(0, 1fr) 76px; padding:1.2rem 0.2rem; gap:0.9rem; }
    .cartel-day{ font-size:2.6rem; }
  }

  .bolo-modal-cover{ max-height:46vh; }
  .bolo-modal-cover img{ height:100%; max-height:46vh; object-fit:cover; }
  .bolo-modal-close svg{ width:18px; height:18px; }
  .bolo-modal-title{ font-weight:400; font-size:2rem; line-height:1.05; }
  .bolo-modal-actions{ display:flex; flex-wrap:wrap; gap:0.7rem; }
  .bolo-modal-actions .hidden{ display:none; }

  /* ------------------------------------------------------------
     CONTRATAR — propuesta + formulario de presupuesto
     ------------------------------------------------------------ */
  .hire{
    max-width:1240px;
    margin:0 auto;
    padding:8.5rem clamp(1.2rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem);
    display:grid;
    grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
    gap:clamp(2rem, 5vw, 5rem);
    align-items:start;
  }
  .hire-title{ font-size:clamp(2.8rem, 6vw, 5rem); line-height:1; letter-spacing:-0.02em; }
  .hire-lead{ margin-top:1.2rem; color:#E4D3C2; line-height:1.65; max-width:42ch; font-size:var(--fs-lg); }
  .hire-photo{ margin:2.2rem 0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3 / 2; }
  .hire-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
  .hire-facts{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
  .hire-facts li{ display:flex; flex-direction:column; gap:0.2rem; padding-left:1.1rem; position:relative; line-height:1.5; }
  .hire-facts li::before{
    content:'';
    position:absolute; left:0; top:0.55em;
    width:6px; height:6px; border-radius:50%;
    background:var(--blue);
  }
  .hire-facts span{ color:var(--muted); font-size:var(--fs-sm); }
  .hire-direct{ margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:0.1rem; }
  .hire-direct-title{ font-weight:800; }
  .contact-line{ display:inline-flex; align-items:center; gap:0.7rem; min-height:44px; font-weight:600; font-size:0.95rem; color:var(--text); text-decoration:none; overflow-wrap:anywhere; }
  .contact-line svg{ width:20px; height:20px; flex:none; color:var(--blue); }
  .contact-line:hover{ color:var(--pink); }

  .hire-form{
    position:sticky;
    top:7rem;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    padding:clamp(1.4rem, 3vw, 2.4rem);
    border-radius:var(--radius-lg);
    background:var(--bg-elevated);
    border:1px solid var(--border-soft);
    box-shadow:var(--bezel-highlight), var(--shadow-soft);
  }
  .hire-form-title{ font-size:clamp(1.8rem, 3vw, 2.4rem); line-height:1; margin-bottom:0.2rem; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .field{ display:flex; flex-direction:column; gap:0.45rem; min-width:0; border:0; }
  .field-label{ font-size:var(--fs-sm); font-weight:700; color:var(--text); padding:0; }
  .req{ color:var(--pink); }
  .field-hint{ font-size:var(--fs-xs); color:var(--muted); }
  .field input, .field select, .field textarea{
    width:100%;
    min-height:48px;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:1rem;
    color:var(--text);
    background:var(--bg);
    border:1.5px solid var(--border-soft);
    border-radius:var(--radius-sm);
    padding:0.75rem 0.9rem;
    transition:border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
    color-scheme:dark;
  }
  .field textarea{ resize:vertical; min-height:120px; line-height:1.5; }
  .field input::placeholder, .field textarea::placeholder{ color:#9C8573; }
  .field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--border-strong); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
    outline:none;
    border-color:var(--blue);
    background:#0F0A07;
  }
  .choice-chips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
  .choice-chip{ position:relative; cursor:pointer; }
  .choice-chip input{ position:absolute; opacity:0; pointer-events:none; }
  .choice-chip span{
    display:inline-flex;
    align-items:center;
    min-height:42px;
    padding:0 1rem;
    border-radius:var(--radius-pill);
    border:1.5px solid var(--border-strong);
    font-size:var(--fs-sm);
    font-weight:600;
    color:var(--text);
    transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .choice-chip:hover span{ border-color:var(--blue); }
  .choice-chip input:checked + span{ background:var(--blue); border-color:var(--blue); color:#140803; }
  .choice-chip input:focus-visible + span{ outline:2px solid var(--pink); outline-offset:2px; }
  .hire-form .consent-check{ font-size:var(--fs-sm); }
  .hire-submit{ justify-content:center; width:100%; }
  .hire-submit:disabled{ opacity:0.6; cursor:progress; transform:none; }
  .hire-note{ font-size:var(--fs-xs); color:var(--muted); text-align:center; margin-top:-0.4rem; }
  .form-error{
    padding:0.8rem 1rem;
    border-radius:var(--radius-sm);
    background:rgba(255,77,77,0.1);
    border:1px solid rgba(255,77,77,0.35);
    color:#FFB4A8;
    font-size:var(--fs-sm);
    font-weight:600;
  }
  .form-success{ padding:1rem 0 0.4rem; outline:none; }
  .form-success-title{ font-size:2.4rem; color:var(--blue); margin-bottom:0.6rem; }
  .form-success p:last-child{ color:var(--muted); line-height:1.6; }
  /* Enviado: se queda solo el mensaje de confirmación */
  .hire-form.is-sent > :not(.form-success){ display:none; }

  @media (max-width: 900px){
    .hire{ display:flex; flex-direction:column; padding-top:8.5rem; }
    .hire-pitch{ display:contents; }
    .hire-title{ order:1; }
    .hire-lead{ order:2; margin-top:-0.8rem; }
    .hire-form{ order:3; position:relative; top:auto; }
    .hire-photo{ order:4; margin:0; }
    .hire-facts{ order:5; }
    .hire-direct{ order:6; margin-top:0; }
  }
  @media (max-width: 520px){
    .field-row{ grid-template-columns:1fr; }
  }

  /* ------------------------------------------------------------
     GALERÍA, MULTIMEDIA, REDES
     ------------------------------------------------------------ */
  .gallery-empty{
    max-width:720px;
    padding:clamp(1.8rem, 4vw, 2.6rem);
    border-radius:var(--radius-lg);
    border:1px dashed var(--border-strong);
    color:var(--muted);
    line-height:1.65;
  }
  .gallery-empty-title{ color:var(--text); font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.12; margin-bottom:0.8rem; }
  .gallery-empty-actions{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.6rem; }
  .media-mosaic .gallery-empty{ break-inside:avoid; column-span:all; }
  .panel-hint{ font-weight:700; color:var(--text); font-size:var(--fs-sm); margin:1.6rem 0 0.8rem; }
  .gallery-tabs + .tab-panel .panel-hint:first-child{ margin-top:0.4rem; }
  .dropzone svg{ width:34px; height:34px; color:var(--blue); }
  .dropzone:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
  .gallery-note{ margin:0.4rem 0 1rem; }
  .lightbox-close svg, .lightbox-nav svg{ width:22px; height:22px; }

  /* Redes: rejilla de 2 x 2, sin huérfanos */
  .social-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:900px; }
  .social-grid a:first-child,
  .social-grid a:nth-child(2),
  .social-grid a:nth-child(3),
  .social-grid a:nth-child(4){ grid-column:auto; flex-direction:row; align-items:center; }
  @media (max-width: 560px){ .social-grid{ grid-template-columns:1fr; } }

  @media (prefers-reduced-motion: reduce){
    .acc-slice, .acc-slice img, .acc-info, .cartel-thumb img, .mobile-cta{ transition:none; }
  }

  /* ============================================================
     MENÚ — barra de cartel a todo el ancho
     Transparente sobre la foto de la portada; al bajar se vuelve
     espresso con una línea fina en oro. Se esconde al bajar y vuelve
     al subir. La flor marca la página actual y gira hacia el enlace
     al pasar el ratón. Por debajo de 980px: botón "Menú" que abre un
     panel a pantalla completa.
     ============================================================ */
  .topbar{
    position:fixed;
    top:0; left:0; right:0;
    z-index:70;
    color:var(--text);
    transition:transform 480ms var(--ease-out), background-color 320ms var(--ease-out), border-color 320ms var(--ease-out);
    border-bottom:1px solid transparent;
  }
  /* Degradado de legibilidad sobre fotos (sin pintar la barra entera) */
  .topbar::before{
    content:'';
    position:absolute; inset:0 0 -40px 0;
    z-index:-1;
    background:linear-gradient(180deg, rgba(11,7,5,0.72) 0%, rgba(11,7,5,0) 100%);
    pointer-events:none;
    transition:opacity 320ms var(--ease-out);
  }
  .topbar.is-solid{
    background-color:rgba(11,7,5,0.9);
    border-bottom-color:rgba(232,185,74,0.28);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    backdrop-filter:blur(14px) saturate(140%);
  }
  .topbar.is-solid::before{ opacity:0; }
  .topbar.is-hidden{ transform:translateY(-101%); }

  .topbar-inner{
    max-width:1360px;
    margin:0 auto;
    height:76px;
    padding:0 clamp(1rem, 4vw, 2.6rem);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:1.5rem;
  }
  .topbar-brand{
    justify-self:start;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    gap:0.65rem;
    color:var(--text);
    text-decoration:none;
  }
  .topbar-brand img{ width:30px; height:30px; transition:transform 700ms var(--ease-spring); }
  .topbar-brand span{ font-size:1.65rem; line-height:1; }
  @media (hover: hover) and (pointer: fine){
    .topbar-brand:hover img{ transform:rotate(72deg); }
  }

  .topbar-nav ul{ display:flex; gap:clamp(1.4rem, 2.6vw, 2.6rem); list-style:none; }
  .topbar-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    padding:0.6rem 0;
    color:#E4D3C2;
    text-decoration:none;
    font-weight:700;
    font-size:0.95rem;
    letter-spacing:0.01em;
    transition:color 220ms var(--ease-out);
  }
  /* La flor: aparece girando a la izquierda del enlace, sin mover el texto */
  .topbar-nav .flor{
    position:absolute;
    left:-1.15rem;
    top:50%;
    width:0.8rem; height:0.8rem;
    margin-top:-0.4rem;
    color:var(--pink);
    opacity:0;
    transform:rotate(-120deg) scale(0.4);
    transition:opacity 260ms var(--ease-out), transform 520ms var(--ease-spring);
  }
  .topbar-nav a.is-current{ color:var(--text); }
  .topbar-nav a.is-current .flor{ opacity:1; transform:none; }
  @media (hover: hover) and (pointer: fine){
    .topbar-nav a:hover{ color:var(--text); }
    .topbar-nav a:hover .flor{ opacity:1; transform:none; }
  }
  .topbar-nav a:focus-visible .flor{ opacity:1; transform:none; }

  .topbar-actions{ justify-self:end; display:flex; align-items:center; gap:0.6rem; }
  .topbar-cta{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 1.25rem;
    border-radius:var(--radius-pill);
    background:var(--pink);
    color:#140803;
    font-weight:800;
    font-size:var(--fs-sm);
    text-decoration:none;
    transition:background 220ms var(--ease-out), transform var(--dur-press) var(--ease-out);
  }
  .topbar-cta:active{ transform:scale(0.97); }
  .topbar-cta.is-current{ background:var(--blue); }
  @media (hover: hover) and (pointer: fine){
    .topbar-cta:hover{ background:#F26B3C; }
  }

  .topbar-menu{
    display:none;
    align-items:center;
    gap:0.7rem;
    min-height:44px;
    padding:0 0.4rem 0 0.9rem;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-pill);
    background:rgba(11,7,5,0.35);
    color:var(--text);
    font:700 var(--fs-sm) 'Plus Jakarta Sans', sans-serif;
    cursor:pointer;
    transition:border-color 220ms var(--ease-out), transform var(--dur-press) var(--ease-out);
  }
  .topbar-menu:active{ transform:scale(0.97); }
  .topbar-menu-icon{ position:relative; width:34px; height:34px; border-radius:50%; background:var(--text); }
  .topbar-menu-icon span{
    position:absolute; left:50%; top:50%;
    width:14px; height:1.8px; border-radius:2px;
    background:var(--bg);
    transform:translate(-50%, -50%) translateY(-3px);
    transition:transform 380ms var(--ease-spring);
  }
  .topbar-menu-icon span + span{ transform:translate(-50%, -50%) translateY(3px); }
  .topbar-menu[aria-expanded="true"] .topbar-menu-icon span{ transform:translate(-50%, -50%) rotate(45deg); }
  .topbar-menu[aria-expanded="true"] .topbar-menu-icon span + span{ transform:translate(-50%, -50%) rotate(-45deg); }

  @media (max-width: 980px){
    .topbar-inner{ grid-template-columns:1fr auto; height:68px; }
    .topbar-nav{ display:none; }
    .topbar-menu{ display:inline-flex; }
  }
  @media (max-width: 420px){
    .topbar-cta{ padding:0 1rem; }
    .topbar-menu-label{ display:none; }
    .topbar-menu{ padding:0 0.3rem; }
  }
  /* Con el panel abierto, la barra se queda visible y limpia encima */
  .menu-open .topbar{ transform:none; background-color:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .menu-open .topbar::before{ opacity:0; }
  .menu-open{ overflow:hidden; }

  /* Panel a pantalla completa */
  .menu-panel{
    position:fixed;
    inset:0;
    z-index:60;
    display:grid;
    grid-template-rows:1fr auto;
    padding:6.5rem clamp(1.4rem, 6vw, 3rem) calc(2rem + env(safe-area-inset-bottom));
    background:var(--bg);
    clip-path:inset(0 0 100% 0);
    transition:clip-path 560ms var(--ease-out);
    overflow-y:auto;
  }
  .menu-panel[hidden]{ display:none; }
  .menu-panel.is-open{ clip-path:inset(0 0 0 0); }
  .menu-panel-photos{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .menu-panel-photos img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    filter:grayscale(1) sepia(0.35) brightness(0.45) contrast(1.1);
    opacity:0;
    transform:scale(1.06);
    transition:opacity 500ms var(--ease-out), transform 1200ms var(--ease-out);
  }
  .menu-panel-photos img.is-shown{ opacity:0.55; transform:none; }
  .menu-panel-photos::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(11,7,5,0.6) 0%, rgba(11,7,5,0.35) 45%, rgba(11,7,5,0.92) 100%);
  }
  .menu-panel-nav{ position:relative; z-index:1; align-self:center; }
  .menu-panel-nav ul{ list-style:none; display:flex; flex-direction:column; gap:0.2rem; }
  .menu-panel-nav a{
    display:inline-block;
    padding:0.25rem 0;
    font-family:var(--display);
    font-size:clamp(2.6rem, 11vw, 4.6rem);
    line-height:1.05;
    color:var(--text);
    text-decoration:none;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 420ms var(--ease-out), transform 620ms var(--ease-out), color 220ms var(--ease-out);
  }
  .menu-panel.is-open .menu-panel-nav a{ opacity:1; transform:none; }
  .menu-panel.is-open li:nth-child(2) a{ transition-delay:50ms; }
  .menu-panel.is-open li:nth-child(3) a{ transition-delay:100ms; }
  .menu-panel.is-open li:nth-child(4) a{ transition-delay:150ms; }
  .menu-panel.is-open li:nth-child(5) a{ transition-delay:200ms; }
  .menu-panel.is-open li:nth-child(6) a{ transition-delay:250ms; }
  .menu-panel-nav a[aria-current="page"]{ color:var(--blue); }
  .menu-panel-nav a.menu-panel-cta{ color:var(--pink); }
  .menu-panel-foot{
    position:relative; z-index:1;
    display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem;
    padding-top:1.6rem;
    border-top:1px solid rgba(232,185,74,0.28);
    font-size:var(--fs-sm);
  }
  .menu-panel-foot a{ color:#E4D3C2; text-decoration:none; padding:0.45rem 0; overflow-wrap:anywhere; }

  /* ============================================================
     LA BANDA (/integrantes) — cada integrante recortado, sin fondo,
     con su nombre gigante en contorno detrás y los datos al lado.
     Filas alternas: persona a la izquierda, luego a la derecha…
     ============================================================ */
  .crew{
    max-width:1240px;
    margin:0 auto;
    padding:8.5rem clamp(1.2rem, 6vw, 5rem) 2rem;
  }
  .crew-head{ max-width:760px; margin-bottom:clamp(1rem, 3vw, 2.5rem); }
  .crew-title{ font-size:clamp(3.2rem, 9vw, 7rem); line-height:0.95; letter-spacing:-0.025em; }
  .crew-lead{ margin-top:1.2rem; max-width:46ch; color:#E4D3C2; font-size:var(--fs-lg); line-height:1.6; }

  .crew-member{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 11fr) minmax(0, 10fr);
    align-items:center;
    gap:clamp(2rem, 5vw, 5rem);
    padding:clamp(3rem, 7vw, 6rem) 0 0;
    scroll-margin-top:6rem;
  }
  .crew-member + .crew-member{ border-top:1px solid var(--border-soft); }
  .crew-member.is-flipped .crew-figure{ order:2; }

  .crew-figure{
    position:relative;
    height:clamp(420px, 72vh, 700px);
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  /* Nombre de pila enorme, en contorno oro, detrás de la persona */
  .crew-backname{
    position:absolute;
    left:-50%; right:-50%;
    top:38%;
    margin-top:-0.4em;
    z-index:0;
    text-align:center;
    font-size:clamp(6rem, 17vw, 14rem);
    line-height:0.8;
    white-space:nowrap;
    color:transparent;
    -webkit-text-stroke:1.4px rgba(232,185,74,0.4);
    user-select:none;
    pointer-events:none;
  }
  .crew-cutout, .crew-photo{
    position:relative;
    z-index:1;
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
  }
  .crew-cutout{
    object-fit:contain;
    filter:drop-shadow(0 28px 36px rgba(0,0,0,0.55));
    /* Las fotos cortan a la persona por abajo: fundido para que no haya canto */
    -webkit-mask-image:linear-gradient(180deg, #000 80%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 80%, transparent 100%);
  }
  /* Sin recorte disponible: la foto normal, fundida por los bordes */
  .crew-photo{
    align-self:center;
    border-radius:var(--radius-lg);
    object-fit:cover;
    aspect-ratio:4 / 5;
    height:90%;
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%, #000 60%, transparent 100%);
    mask-image:radial-gradient(ellipse 75% 70% at 50% 45%, #000 60%, transparent 100%);
  }

  .crew-info{ position:relative; z-index:2; padding-bottom:clamp(2rem, 6vw, 5rem); }
  .crew-name{ font-size:clamp(2.6rem, 5vw, 4.4rem); line-height:1; letter-spacing:-0.02em; }
  .crew-role{ margin-top:0.8rem; color:var(--blue); font-weight:800; font-size:var(--fs-md); }
  .crew-bio{ margin-top:1.4rem; max-width:46ch; color:#E4D3C2; font-size:1.05rem; line-height:1.7; }
  .crew-social{ list-style:none; display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem; }
  .crew-social a{
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    min-height:44px;
    padding:0 1.1rem;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-strong);
    color:var(--text);
    text-decoration:none;
    font-weight:700;
    font-size:var(--fs-sm);
    transition:border-color 220ms var(--ease-out), color 220ms var(--ease-out), transform var(--dur-press) var(--ease-out);
  }
  .crew-social a:active{ transform:scale(0.97); }
  .crew-social svg{ width:17px; height:17px; color:var(--blue); }
  @media (hover: hover) and (pointer: fine){
    .crew-social a:hover{ border-color:var(--pink); color:var(--pink); }
  }

  @media (max-width: 860px){
    .crew-member{ grid-template-columns:1fr; gap:1.4rem; padding-top:3rem; }
    .crew-member.is-flipped .crew-figure{ order:0; }
    .crew-figure{ height:clamp(340px, 62vh, 500px); }
    .crew-backname{ font-size:clamp(5rem, 30vw, 9rem); top:34%; }
    .crew-info{ padding-bottom:3rem; }
  }

  @media (prefers-reduced-motion: reduce){
    .topbar, .topbar-nav .flor, .topbar-brand img, .menu-panel, .menu-panel-photos img, .menu-panel-nav a{ transition:none; }
  }

  .menu-open .mobile-cta{ display:none; }
  .crew{ overflow-x:clip; }
  /* Recortes anchos (sentados con el instrumento): pueden crecer un poco
     más allá de su columna para igualar la altura visual del resto */
  .crew-cutout{ max-width:125%; }
  @media (max-width: 860px){ .crew-cutout{ max-width:100%; } }

  /* ============================================================
     AVISO DE WEB DE DEMOSTRACIÓN (MODO_DEMO en app.py)
     ============================================================ */
  .demo-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.8rem;
    padding:0.45rem 3rem 0.45rem 1rem;
    position:relative;
    background:var(--blue);
    color:#1B0F08;
    font-size:var(--fs-xs);
    line-height:1.4;
    text-align:center;
  }
  .demo-bar[hidden]{ display:none; }
  .demo-bar a{ color:#1B0F08; font-weight:800; }
  .demo-bar-close{
    position:absolute;
    right:0.4rem; top:50%;
    transform:translateY(-50%);
    width:36px; height:36px;
    display:grid; place-items:center;
    border:0; border-radius:50%;
    background:transparent;
    color:#1B0F08;
    cursor:pointer;
  }
  .demo-bar-close:hover{ background:rgba(27,15,8,0.12); }
  .demo-bar-close svg{ width:16px; height:16px; }
  .demo-bar-short{ display:none; }
  @media (max-width: 640px){
    .demo-bar-long{ display:none; }
    .demo-bar-short{ display:inline; }
  }

  .form-demo-note{
    margin-top:1rem;
    padding:0.8rem 1rem;
    border-radius:var(--radius-sm);
    background:rgba(232,185,74,0.12);
    color:var(--blue) !important;
    font-size:var(--fs-sm);
  }

  /* ============================================================
     TEXTOS LEGALES — lectura cómoda con índice lateral
     ============================================================ */
  .legal{
    max-width:1180px;
    margin:0 auto;
    padding:8.5rem clamp(1.2rem, 6vw, 5rem) 2rem;
  }
  .legal-head{ max-width:760px; margin-bottom:clamp(2rem, 5vw, 3.5rem); }
  .legal-title{ font-size:clamp(2.8rem, 7vw, 5.2rem); line-height:1; letter-spacing:-0.02em; }
  .legal-updated{ margin-top:1rem; color:var(--muted); font-size:var(--fs-sm); }
  .legal-demo{
    display:flex;
    gap:0.9rem;
    align-items:flex-start;
    margin-top:1.8rem;
    padding:1.1rem 1.3rem;
    border-radius:var(--radius-md);
    border:1px solid rgba(232,185,74,0.4);
    background:rgba(232,185,74,0.08);
    line-height:1.6;
    font-size:0.95rem;
    color:#E4D3C2;
  }
  .legal-demo svg{ width:22px; height:22px; flex:none; color:var(--blue); margin-top:0.1rem; }
  .legal-demo strong{ color:var(--blue); }

  .legal-layout{
    display:grid;
    grid-template-columns:240px minmax(0, 1fr);
    gap:clamp(2rem, 5vw, 5rem);
    align-items:start;
  }
  .legal-aside{ position:sticky; top:7.5rem; display:flex; flex-direction:column; gap:2rem; }
  .legal-aside-title{ font-weight:800; font-size:var(--fs-sm); margin-bottom:0.7rem; }
  .legal-toc ol, .legal-docs ul{ list-style:none; display:flex; flex-direction:column; gap:0.1rem; border-left:1px solid var(--border-soft); }
  .legal-toc a, .legal-docs a{
    display:block;
    padding:0.4rem 0 0.4rem 1rem;
    margin-left:-1px;
    border-left:1px solid transparent;
    color:var(--muted);
    text-decoration:none;
    font-size:var(--fs-sm);
    line-height:1.4;
    transition:color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  }
  .legal-toc a:hover, .legal-docs a:hover{ color:var(--text); }
  .legal-toc a.is-active{ color:var(--text); border-left-color:var(--pink); }
  .legal-docs a[aria-current="page"]{ color:var(--blue); border-left-color:var(--blue); }
  .legal-toc:has(ol:empty){ display:none; }

  .legal-body{ max-width:70ch; color:#E4D3C2; font-size:1.02rem; line-height:1.75; }
  .legal-body > * + *{ margin-top:1rem; }
  .legal-body h2{
    margin-top:3rem;
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(1.6rem, 2.6vw, 2.1rem);
    line-height:1.15;
    color:var(--text);
    scroll-margin-top:7rem;
  }
  .legal-body h2:first-child{ margin-top:0; }
  .legal-body h3{ margin-top:1.8rem; font-size:1.05rem; font-weight:800; color:var(--text); }
  .legal-body ul{ padding-left:1.2rem; }
  .legal-body li + li{ margin-top:0.45rem; }
  .legal-body li::marker{ color:var(--blue); }
  .legal-body a{ color:var(--text); text-decoration:underline; text-decoration-color:rgba(232,90,43,0.6); }
  .legal-body a:hover{ color:var(--pink); }
  .legal-body strong{ color:var(--text); }
  .legal-intro{ font-size:var(--fs-lg); color:var(--text); }
  .legal-callout{
    padding:1rem 1.2rem;
    border-radius:var(--radius-md);
    background:var(--surface-glass-strong);
    border:1px solid var(--border-soft);
  }

  /* Pares dato / valor (titular, plazos, créditos…) */
  .legal-body .legal-data{ list-style:none; padding:0; border-top:1px solid var(--border-soft); }
  .legal-body .legal-data li{
    display:grid;
    grid-template-columns:minmax(9rem, 14rem) minmax(0, 1fr);
    gap:0.4rem 1.5rem;
    margin:0;
    padding:0.75rem 0;
    border-bottom:1px solid var(--border-soft);
  }
  .legal-body .legal-data span{ color:var(--text); font-weight:700; font-size:0.95rem; }
  .legal-body .legal-data em{ color:var(--blue); font-style:normal; font-size:var(--fs-sm); }

  .legal-table-wrap{ overflow-x:auto; border:1px solid var(--border-soft); border-radius:var(--radius-md); }
  .legal-table{ width:100%; border-collapse:collapse; font-size:0.95rem; line-height:1.55; }
  .legal-table th{ text-align:left; padding:0.8rem 1rem; color:var(--text); background:var(--surface-glass-strong); font-weight:800; font-size:var(--fs-sm); }
  .legal-table td{ padding:0.85rem 1rem; border-top:1px solid var(--border-soft); vertical-align:top; }
  .legal-table code{ font-size:0.88rem; color:var(--blue); }

  .legal-body{ min-width:0; }
  @media (max-width: 900px){
    .legal-layout{ grid-template-columns:minmax(0, 1fr); }
    .legal-aside{ position:static; display:none; }
    .legal-body .legal-data li{ grid-template-columns:1fr; gap:0.15rem; }
  }

  /* Primera capa de información de protección de datos (RGPD) en formularios */
  .info-basica{
    border:1px solid var(--border-soft);
    border-radius:var(--radius-sm);
    font-size:var(--fs-sm);
    color:var(--muted);
  }
  .info-basica summary{
    cursor:pointer;
    padding:0.75rem 1rem;
    font-weight:700;
    color:#E4D3C2;
    list-style-position:inside;
  }
  .info-basica summary:hover{ color:var(--text); }
  .info-basica dl{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:0.4rem 1rem;
    padding:0 1rem 1rem;
    line-height:1.5;
  }
  .info-basica dt{ color:var(--text); font-weight:700; }
  .info-basica a{ color:var(--text); }
  .gallery-section .info-basica{ max-width:720px; margin:1rem 0; }
  @media (max-width: 480px){
    .info-basica dl{ grid-template-columns:1fr; gap:0.1rem; }
    .info-basica dd{ margin-bottom:0.5rem; }
  }

  .footer-legal{ flex-wrap:wrap; gap:0.2rem 1.4rem; }

  /* Campo trampa anti-robots del formulario: fuera de la vista */
  .campo-trampa{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

  /* La banda en móvil: todos los integrantes a la MISMA altura. Antes cada
     recorte se encajaba en el ancho de la pantalla, así que uno ancho (Rafa,
     sentado con la guitarra en horizontal) salía a la mitad de alto que uno
     estrecho (Marta, de pie). Ahora manda la altura; la figura ocupa todo el
     ancho de la pantalla, la persona se centra por el centro de su silueta
     (--cx, calculado en el servidor) y lo que sobresale (el mástil de la
     guitarra) se funde con los bordes. */
  @media (max-width: 860px){
    .crew-figure{
      height:clamp(360px, 58vh, 460px);
      margin-inline:calc(-1 * clamp(1.2rem, 6vw, 5rem));
      overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
      mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .crew-cutout{
      flex:none;
      height:100%;
      width:auto;
      max-width:none;
      max-height:none;
      transform:translateX(calc((0.5 - var(--cx, 0.5)) * 100%));
    }
  }