/* ============================================================================
   DISEÑO DE LA PORTADA (la pestaña Inicio)
   ============================================================================
   Acá NO hay textos: están en 0-contenido/inicio.js.
   La portada resume todo el proyecto. Tiene, en orden:
      1. .hero        el video a pantalla completa, el título y el buscador
      2. .p-album     el álbum nuevo, con el fondo teñido por su carátula
      3. .p-quienes   quiénes somos, los tres pilares y los objetivos
      4. (.p-hacemos  las seis instancias: hoy solo en la página Nosotros)
      5. .p-musica    la cinta de carátulas, las cifras y las plataformas
      6. .p-material  el buscador de canciones, explicado y a mano
      7. .p-fotos     el mosaico de fotos que se desliza, sobre azul noche
      8. .p-agenda    lo que viene (solo si hay eventos con fecha)
      9. .p-parte     las cuatro puertas para sumarse, cada una con su foto
     10. .p-cierre    la invitación a cantar con nosotros
   FONDOS: crema y crema oscuro alternados, con DOS franjas azul noche (la
   música y las fotos, separadas por Material) y la foto del cierre al final. Nunca dos seguidos
   iguales: si hay agenda, "Sé parte" pasa al crema oscuro (clase
   .sin-agenda, la pone 9-codigo/novedades.js).
   ESPACIOS: siempre de la misma escala (8, 16, 24, 32, 48, 64, 96 px).
   LETRA: las secciones nuevas usan los mismos títulos, antetítulos y
   tamaños del resto del sitio (.h2, .eyebrow, .lede). No se definen otros.
   ========================================================================== */
/* (en :root y no solo en la portada: las otras pestañas reutilizan piezas
   de acá, como las tarjetas-foto y el cierre) */
:root{--e1:8px;--e2:16px;--e3:24px;--e4:32px;--e5:48px;--e6:64px;--e7:96px;
      --borde:clamp(20px,4vw,44px)}
.p-album,.p-quienes,.p-hacemos,.p-musica,.p-material,.p-fotos,.p-agenda,.p-parte,.p-cierre{padding:var(--e6) 0}
/* en pantallas anchas, más aire entre una sección y la siguiente */
@media(min-width:760px){
  .p-album,.p-quienes,.p-hacemos,.p-musica,.p-material,.p-fotos,.p-agenda,.p-parte{padding:var(--e7) 0}
}
#inicio .h2{max-width:20ch}

/* ================= 1. VIDEO + BUSCADOR ================= */
/* Mientras el video no arranca se ve su imagen fija (el primer cuadro), como
   fondo: la vertical en el teléfono y la horizontal en pantallas anchas. */
.hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;
      height:100vh;height:100svh;min-height:540px;color:#fff;
      background:#0f0b28 url(../4-video/inicio-poster.jpg) center/cover no-repeat}
@media (orientation:portrait){
  .hero{background-image:url(../4-video/inicio-vertical-poster.jpg)}
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
            opacity:0;transition:opacity .6s ease}
/* aparece encima de su imagen fija recién cuando ya está andando */
.hero-video.andando{opacity:1}
/* Velo SOLO donde hay texto (abajo), para que las caras de arriba se vean.
   Arriba, una sombra muy leve para que se lea el logo de la barra. */
.hero-veil{position:absolute;inset:0;pointer-events:none;
           background:
             linear-gradient(to top,rgba(10,8,30,.9) 0%,rgba(10,8,30,.66) 30%,rgba(10,8,30,.2) 52%,rgba(10,8,30,0) 64%),
             linear-gradient(to bottom,rgba(10,8,30,.4) 0,rgba(10,8,30,0) 130px)}
.hero-inner{position:relative;width:100%;
            padding-bottom:calc(var(--e5) + env(safe-area-inset-bottom,0px))}
/* TÍTULO: tamaños, espaciado e interlineado originales (no cambiarlos).
   Va en dos líneas: la blanca y la roja. */
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,7vw,80px);line-height:1.02;
         letter-spacing:.016em;color:#fff;margin:0;text-shadow:0 2px 34px rgba(15,11,40,.5)}
.hero h1 .r{color:#f0897b;display:block}
/* TELÉFONO: el lema ocupa TODO el ancho, como titular (antes medía 33 px y
   se leía como un texto más). La línea más larga ("Y enciende corazones!")
   mide 6,6 veces el tamaño de la letra, así que el tamaño es el ancho útil
   de la pantalla dividido por ~6,9: llena la pantalla sin cortarse. Queda
   abajo, sobre el velo oscuro, y las caras de arriba siguen despejadas.
   Si se cambia el texto del lema, revisar que siga cabiendo. */
@media(max-width:600px){
  .hero h1{font-size:min(calc((100vw - 40px) * .145),64px);line-height:1;
           text-shadow:0 2px 18px rgba(10,8,30,.45)}
  .hero h1>span{white-space:nowrap}
  .hero-bajada{margin-top:12px}
}
.hero-bajada{font-family:var(--sans);font-size:17px;line-height:1.45;font-weight:400;
             color:rgba(255,255,255,.86);margin:var(--e2) 0 0;max-width:34ch}

/* el buscador: la acción principal para quien ya nos conoce */
.hero-buscar{display:flex;align-items:center;height:52px;max-width:480px;margin-top:var(--e3);
             border-radius:16px;background:rgba(255,255,255,.96);color:#1a1940;
             box-shadow:0 12px 32px -12px rgba(0,0,0,.55);
             transition:box-shadow var(--t-base) var(--ease)}
.hero-buscar:focus-within{box-shadow:0 0 0 3px rgba(240,137,123,.6),0 12px 32px -12px rgba(0,0,0,.55)}
.hb-lupa{display:grid;place-items:center;width:44px;flex:none;margin-left:6px;color:#6b6885}
.hb-lupa svg{width:21px;height:21px}
.hero-buscar input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:0;
                   font-family:var(--sans);font-size:16px;color:#1a1940;padding:0 var(--e1) 0 0;
                   -webkit-appearance:none;appearance:none}
.hero-buscar input::placeholder{color:#6b6885;opacity:1}
.hero-buscar input::-webkit-search-cancel-button{display:none}
.hb-ir{display:grid;place-items:center;width:44px;height:44px;flex:none;margin-right:4px;
       border:0;border-radius:12px;background:var(--red);color:#fff;cursor:pointer;
       transition:background-color var(--t-base) var(--ease),transform var(--t-press) var(--ease)}
.hb-ir:hover{background:var(--red-deep)}
.hb-ir:active{transform:scale(.92)}
.hb-ir svg{width:20px;height:20px}

/* dos enlaces livianos, sin borde */
.hero-enlaces{display:flex;flex-wrap:wrap;gap:0 var(--e3);margin-top:var(--e1)}
.hero-enlaces a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);
                font-size:15px;font-weight:600;color:rgba(255,255,255,.9);text-decoration:none;cursor:pointer}
.hero-enlaces a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}

/* ENTRADA: el texto se ve DE INMEDIATO (no espera a la fuente) y sube un
   poquito, escalonado. Solo la primera vez: después se apaga. */
html:not(.hero-hecho) .hero-inner>*{animation:heroIn .5s var(--ease) both}
html:not(.hero-hecho) .hero-inner>:nth-child(2){animation-delay:60ms}
html:not(.hero-hecho) .hero-inner>:nth-child(3){animation-delay:120ms}
html:not(.hero-hecho) .hero-inner>:nth-child(4){animation-delay:180ms}
@keyframes heroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ================= 2. ÁLBUM NUEVO =================
   Sobre el crema hondo del sitio. A un lado EL DISCO: la carátula con un
   vinilo asomándose detrás (se asoma un poco más al pasar el mouse) y un halo
   suave con los colores de la carátula (inicio.js > album > colores; los pone
   9-codigo/pintar-contenido.js en --h1..--s5). Al otro, el título, los
   botones y LAS CANCIONES, impresas como en la contraportada: número rojo,
   nombre y una línea fina; cada una abre su letra con acordes en Material.
   Teléfono: todo centrado y, de la lista, las cuatro primeras + "Ver las 11". */
.p-album{
  --h1:38;--s1:42%;--h2:208;--s2:30%;--h3:79;--s3:28%;--h4:355;--s4:26%;--h5:155;--s5:24%;
  --lg:76%;--ag:1;
  overflow:hidden;background-color:var(--paper-2);
  background-image:
    radial-gradient(70% 90% at 8% 20%,hsl(var(--h1) var(--s1) 86% / .9),transparent 70%),
    radial-gradient(60% 80% at 100% 100%,hsl(var(--h2) var(--s2) 88% / .8),transparent 70%)}
.pa-in{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--e5)}

/* el disco */
.pa-disco{position:relative;isolation:isolate;width:min(50vw,210px);margin-right:18%}
/* el halo va DETRÁS de todo (si lo llevaba la carátula, se pintaba sobre el vinilo) */
.pa-disco::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:8px;
  /* pegado al disco: ni hacia abajo ni hacia el texto, para no enturbiar el antetítulo */
  box-shadow:-34px -26px 80px 0 hsl(var(--h1) var(--s1) var(--lg) / var(--ag)),
            30px -34px 80px -6px hsl(var(--h2) var(--s2) var(--lg) / calc(var(--ag) * .8))}
.pa-cover{position:relative;z-index:1;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--navy-deep);
          box-shadow:0 2px 6px rgba(15,11,40,.16),0 30px 60px -26px rgba(15,11,40,.6)}
.pa-cover img{width:100%;height:100%;object-fit:cover}
.pa-vinilo{position:absolute;z-index:0;top:3%;left:3%;width:94%;aspect-ratio:1/1;border-radius:50%;
  transform:translateX(40%) rotate(0deg);transition:transform .7s var(--ease);
  box-shadow:0 14px 30px -12px rgba(15,11,40,.55);
  background:
    radial-gradient(circle,#f4efe5 0 2.2%,var(--red) 2.6% 16%,#8f2219 16.4% 17%,transparent 17.4%),
    repeating-radial-gradient(circle,#17161c 0 1.1px,#24232b 1.6px 2.6px),
    #17161c}
.pa-vinilo::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0 8%,rgba(255,255,255,.13) 14%,transparent 22% 58%,rgba(255,255,255,.08) 64%,transparent 72%)}
@media (hover:hover){ .p-album:hover .pa-vinilo{transform:translateX(50%) rotate(40deg)} }
@media (prefers-reduced-motion:reduce){ .pa-vinilo{transition:none} .p-album:hover .pa-vinilo{transform:translateX(40%)} }

/* el texto */
.pa-txt{display:flex;flex-direction:column;align-items:center;width:100%}
.pa-k{margin:0 0 var(--e1);font-family:var(--sans);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
      font-weight:700;color:var(--red-deep)}
.p-album .h2{margin-bottom:var(--e2)}
.pa-texto{margin:0;font-size:1rem;line-height:1.5;color:var(--ink);opacity:.82;max-width:40ch}
.pa-botones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--e3)}
.pa-botones .btn svg{width:18px;height:18px}

/* las canciones, como la contraportada */
.al-temas{width:100%;text-align:left}
.al-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.al-cab b{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.al-cab span{font-size:.8125rem;color:var(--ink-soft)}
.al-lista{list-style:none;margin:0;padding:0}
/* cada canción: el número grande (en la letra de los títulos), el nombre y una
   línea de puntos que lleva hasta "Acordes →", como en una contraportada */
.al-tema{display:flex;align-items:baseline;gap:12px;width:100%;min-height:46px;padding:9px 10px;border:0;
  background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer;border-radius:10px;
  transition:background-color .2s ease}
.al-n{flex:0 0 26px;font-family:var(--display);font-size:1.375rem;line-height:1;color:var(--red);font-variant-numeric:tabular-nums;
  transform:translateY(2px)}
.al-n::before{content:"0"}
.al-lista li:nth-child(n+10) .al-n::before{content:none}
.al-t{flex:0 1 auto;min-width:0;font-size:.9375rem;font-weight:500;line-height:1.3}
.al-ir{flex:1 0 auto;display:flex;align-items:baseline;gap:8px;min-width:76px;font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.al-ir::before{content:"";flex:1;min-width:14px;border-bottom:2px dotted color-mix(in srgb,var(--ink) 28%,transparent);
  transform:translateY(-3px);transition:border-color .2s ease}
.al-ir::after{content:"→";font-size:.875rem;letter-spacing:0;transition:transform .25s var(--ease)}
.al-tema:hover,.al-tema:focus-visible{background:color-mix(in srgb,var(--card) 70%,transparent)}
.al-tema:hover .al-ir::before,.al-tema:focus-visible .al-ir::before{border-bottom-color:var(--red)}
.al-tema:hover .al-ir::after{transform:translateX(3px)}
.al-tema:active{background:var(--card)}
.al-mas{display:none}

/* TELÉFONO: cuatro canciones a la vista; el botón despliega el resto */
@media(max-width:759px){
  .al-lista li:nth-child(n+5){display:none}
  .al-temas.abierta .al-lista li{display:block}
  .al-mas{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;margin-top:12px;
    border:1px solid var(--line-2,var(--line));border-radius:var(--r-pill);background:transparent;font:inherit;
    font-size:.9375rem;font-weight:600;color:var(--ink);cursor:pointer}
  .al-mas::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg)}
  .al-temas.abierta .al-mas{display:none}
}

/* COMPUTADOR: el disco a la izquierda; a la derecha el texto y, debajo,
   las canciones en dos columnas */
@media(min-width:760px){
  .pa-in{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:var(--e5) clamp(120px,14vw,180px);align-items:start}
  .pa-disco{width:clamp(200px,23vw,280px);margin:var(--e2) 0 0}
  .pa-txt{align-items:flex-start;align-self:center}
  .pa-botones{justify-content:flex-start}
  /* las canciones van abajo, a todo el ancho (bajo el disco y el título) */
  .al-temas{grid-column:1 / -1;margin-top:0}
}
@media(min-width:1000px){
  .al-lista{columns:2;column-gap:48px}
  .al-lista li{break-inside:avoid}
}

/* ================= 3. QUIÉNES SOMOS =================
   ARRIBA: el texto con sus botones a un lado y, al otro, dos fotos: una
   grande y una chica montada sobre su esquina, con un borde del color del
   fondo (como dos fotos sobre una mesa).
   AL MEDIO: los tres pilares, cada uno con una foto redonda con un anillo
   rojo. Computador: tres en fila, centrados. Teléfono: uno debajo de otro,
   con la foto al costado.
   ABAJO: los objetivos, tres baldosas de color del mismo tamaño.
   Unos pocos dibujos de fondo (ac-quienes, en estilos.css). */
.p-quienes{background:var(--paper)}
.p-quienes .lede{max-width:46ch}
.pq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e5)}
.pq-fotos{position:relative;width:100%;max-width:440px;margin:0 auto;padding:0 0 var(--e4) var(--e4)}
.pq-foto{margin:0;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);
         box-shadow:0 2px 6px rgba(15,11,40,.1),0 28px 54px -26px rgba(15,11,40,.5)}
.pq-foto img{width:100%;height:100%;object-fit:cover;object-position:56% 64%}
.pq-foto2{position:absolute;left:0;bottom:0;width:52%;margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
          background:var(--paper-2);border:5px solid var(--paper);transform:rotate(-3deg);
          box-shadow:0 18px 34px -16px rgba(15,11,40,.55)}
.pq-foto2 img{width:100%;height:100%;object-fit:cover}
@media(min-width:860px){
  .pq-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:var(--e6);align-items:center}
  .pq-fotos{margin:0 0 0 auto}
}

/* DECORACIÓN de esta sección (además de los dibujos de fondo, que acá van
   un poco más marcados):
   · detrás de las dos fotos de arriba, un MARCO ROJO de línea, corrido y
     ladeado, y un destello rojo en la esquina;
   · una FRANJA INCLINADA crema oscuro, de borde a borde y con filetes
     rojos, que UNE los pilares con los objetivos: las fotos de los pilares
     se montan sobre su borde de arriba y las baldosas de los objetivos
     sobre su borde de abajo (antes era un rectángulo suelto detrás de las
     fotos, que no llevaba a ninguna parte);
   · cada foto de pilar va "pegada" con un trozo de CINTA roja. */
.p-quienes.deco{--deco-op:.085;--ac-op:.095}
.pq-fotos{isolation:isolate}
.pq-fotos::before{content:"";position:absolute;z-index:-1;inset:-14px -16px 18px 18px;border:2px solid var(--red);
                  border-radius:calc(var(--r-lg) + 6px);transform:rotate(3deg);opacity:.75}
.pq-fotos::after{content:"";position:absolute;z-index:-1;right:-34px;top:-30px;width:44px;height:48px;
                 background:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/estrella-roja.svg) center / contain no-repeat}
/* en el teléfono el marco y el destello se acercan, para no salirse de la pantalla */
@media(max-width:859px){
  .pq-fotos::before{inset:-10px -8px 20px 22px}
  .pq-fotos::after{right:-14px;top:-26px}
}
.pq-banda{position:relative}
.pq-banda::before{content:"";position:absolute;z-index:-1;left:50%;width:110vw;
                  top:clamp(150px,22vw,250px);bottom:clamp(120px,16vw,190px);
                  transform:translateX(-50%) skewY(-2.2deg);
                  /* de fondo, tres fotos del coro fundidas entre sí (las arma
                     hacer-fotos-web.py), bajo un velo del color de la franja:
                     se entiende que son fotos, pero no compiten con lo de encima.
                     --velo = cuánto tapa el velo (más = fotos más tenues).
                     --fotos = la imagen: apaisada, o vertical en el teléfono. */
                  --velo:74%;--tinta:var(--paper-2);
                  --fotos:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/franja-fotos.webp);
                  background:linear-gradient(color-mix(in srgb,var(--tinta) var(--velo),transparent),
                                             color-mix(in srgb,var(--tinta) var(--velo),transparent)),
                             var(--tinta) var(--fotos) center / cover no-repeat;
                  border-top:2px solid rgba(200,55,43,.7);border-bottom:2px solid rgba(200,55,43,.7)}
/* TELÉFONO: ahí los pilares y los objetivos van apilados y la franja es muy
   alta. Usa la versión vertical de las fotos (una sobre otra) y un velo un
   poco más cargado, porque detrás quedan más textos chicos. */
@media(max-width:759px){
  .pq-banda::before{--velo:80%;top:150px;bottom:130px;
    --fotos:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/franja-fotos-vertical.webp)}
  .pq-banda::after{top:159px;bottom:139px}
}
/* PANTALLA GRANDE: una versión con más resolución y casi sin suavizar */
@media(min-width:1200px){
  .pq-banda::before{--fotos:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/franja-fotos-grande.webp)}
}
/* un segundo filete, fino, corrido unos píxeles: como dos líneas de pauta */
.pq-banda::after{content:"";position:absolute;z-index:-1;left:50%;width:110vw;
                 top:calc(clamp(150px,22vw,250px) + 9px);bottom:calc(clamp(120px,16vw,190px) + 9px);
                 transform:translateX(-50%) skewY(-2.2deg);pointer-events:none;
                 border-top:1px solid rgba(200,55,43,.35);border-bottom:1px solid rgba(200,55,43,.35)}
.pq-pilares{position:relative;margin-top:var(--e6);padding-top:var(--e2)}
.pq-pilares .pilares{margin-top:var(--e3)}
.pilar::before{content:"";position:absolute;z-index:2;left:50%;top:-11px;width:84px;height:24px;margin-left:-42px;
               background:rgba(200,55,43,.86);transform:rotate(-4deg);border-radius:2px;
               box-shadow:0 2px 5px rgba(15,11,40,.18)}
.pilar:nth-child(2)::before{transform:rotate(3deg);background:rgba(23,22,64,.82)}
.pilar:nth-child(3)::before{transform:rotate(-2deg)}
@media(min-width:760px){ .pq-pilares{margin-top:var(--e7)} .pq-pilares .pilares{margin-top:var(--e4)} }

/* LOS TRES PILARES: tres FOTOS DE PAPEL, como las de la mesa de arriba:
   un marco claro, la foto y, dentro del mismo marco, el nombre del pilar y
   su frase. Cada una va un poco ladeada (y se endereza al pasar el mouse).
   SE DAN VUELTA al tocarlas (clase "vuelta", la pone 9-codigo/portada.js):
   por detrás, el reverso de la foto, con más detalle y un enlace. El giro
   dura medio segundo; con "reducir movimiento", cambia de cara sin girar.
   Computador: tres en fila. Teléfono: una bajo otra. */
.pilares{list-style:none;padding:0;margin:var(--e6) 0 0;display:grid;grid-template-columns:1fr;gap:var(--e4)}
.pilar{position:relative;perspective:1400px;cursor:pointer;
       transform:rotate(-1.6deg);transition:transform var(--t-slow) var(--ease)}
.pilar:nth-child(2){transform:rotate(1.4deg)}
.pilar:nth-child(3){transform:rotate(-.8deg)}
.pilar--fija{cursor:default}
.pilar-giro{position:relative;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
            transition:transform .5s ease-in-out}
.pilar.vuelta .pilar-giro{transform:rotateY(180deg)}
/* Qué cara se ve NO se le deja al navegador ("backface-visibility" falla en
   Safari y la cara de atrás aparecía al revés encima de la foto): cada cara
   se esconde y aparece justo a mitad del giro (a los 0,25 s, cuando la foto
   está de canto). Por eso el giro va parejo, con ease-in-out. */
.pilar-frente,.pilar-dorso{transition:visibility 0s linear .25s}
.pilar-dorso{visibility:hidden}
.pilar.vuelta .pilar-dorso{visibility:visible}
.pilar.vuelta .pilar-frente{visibility:hidden}
.pilar-cara{display:flex;flex-direction:column;padding:12px 12px var(--e3);border-radius:var(--r);background:var(--card);
            box-shadow:0 2px 5px rgba(15,11,40,.1),0 26px 44px -24px rgba(15,11,40,.55);
            backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pilar-frente{height:100%}
/* el reverso: el mismo papel, liso */
.pilar-dorso{position:absolute;inset:0;transform:rotateY(180deg);justify-content:center;gap:var(--e1);
             padding:var(--e4) var(--e3);background:var(--card)}
.pilar-dorso h3{padding-bottom:var(--e1);border-bottom:3px solid var(--red);align-self:flex-start}
.pilar-dorso p{color:var(--ink)}
.pl-foto{display:block;aspect-ratio:16/11;overflow:hidden;border-radius:var(--r-sm);background:var(--paper-2)}
.pl-foto img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.pilar-frente>div{padding:var(--e2) var(--e1) 0;display:flex;flex-direction:column;flex:1}
.pilar h3{margin:0 0 4px;font-family:var(--sans);font-weight:600;font-size:clamp(19px,2.4vw,24px);line-height:1.18;color:var(--navy)}
.pilar p{margin:0;font-size:.9375rem;line-height:1.45;color:var(--ink-soft)}
/* el botoncito para girar: abajo a la derecha de cada cara */
.pilar-mas{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;margin-top:auto;padding:var(--e2) 0 0;
           border:0;background:none;cursor:pointer;font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--red)}
.pilar-mas svg{width:16px;height:16px;transition:transform var(--t-slow) var(--ease)}
.pilar-dorso .pilar-mas{color:var(--ink-soft)}
.pilar--fija .pilar-mas{display:none}
@media(min-width:760px){
  .pilares{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:var(--e7);align-items:stretch}
  .pilar:nth-child(2){margin-top:var(--e4)}
  .pl-foto{aspect-ratio:1/1}
}
@media (hover:hover){
  .pilar:hover{transform:rotate(0) translateY(-4px)}
  .pilar:hover .pilar-mas svg{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  .pilar:hover{transform:rotate(-1.6deg)}
  .pilar-giro,.pilar-frente,.pilar-dorso{transition:none}
}
/* LAS MISMAS TARJETAS QUE GIRAN, en "Cómo vivimos la misión" (Nosotros):
   derechas (sin ladear ni cinta), en una grilla pareja, con la foto
   apaisada y la etiqueta de color sobre ella. */
.giros{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.pilar.pilar--tarjeta:nth-child(n){transform:none;margin-top:0}
.pilar--tarjeta::before{content:none}
.pilar--tarjeta .pilar-cara{padding:0 0 var(--e3);overflow:hidden;box-shadow:var(--sh-1)}
.pilar--tarjeta .pl-foto{position:relative;aspect-ratio:16/10;border-radius:0}
.pilar--tarjeta .pilar-frente>div{padding:var(--e3) var(--e3) 0}
.pilar--tarjeta .pilar-dorso{padding:var(--e4) var(--e3)}
.pilar--tarjeta h3{font-size:1.125rem}
.pilar--tarjeta .badge2{position:absolute;z-index:2;top:12px;left:12px;font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;
        font-weight:700;line-height:1.5;padding:5px 11px;border-radius:var(--r-pill);
        background:rgba(246,242,234,.95);color:#171640;box-shadow:0 1px 6px rgba(15,11,40,.22)}
.pilar--tarjeta .badge2.open{background:var(--red);color:#fff}
.pilar--tarjeta .badge2.mem{background:#171640;color:#f4efe5}
.pilar--tarjeta .badge2.see{color:#c8372b}
/* DE A DOS (las cuatro de "¿No eres del coro?", en Únete) */
@media(min-width:760px){ .giros--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* EN ZIGZAG (computador): tarjetas de distinto tamaño. En cada fila una va
   ANCHA (la foto al costado y el texto al lado, con un filete rojo entre
   ambos) y la otra normal, alternando de lado: ancha-normal, normal-ancha,
   ancha-normal. Por detrás, la ancha es una sola hoja con el detalle.
   Bajo 1080 px vuelven a la grilla pareja. */
@media(min-width:1080px){
  .giros--zigzag{grid-template-columns:repeat(3,minmax(0,1fr))}
  .giros--zigzag .pilar:nth-child(4n+1),.giros--zigzag .pilar:nth-child(4n){grid-column:span 2}
  .giros--zigzag .pilar:nth-child(4n+1) .pilar-frente,.giros--zigzag .pilar:nth-child(4n) .pilar-frente{flex-direction:row;padding:0;min-height:290px}
  .giros--zigzag .pilar:nth-child(4n) .pilar-frente{flex-direction:row-reverse}
  .giros--zigzag .pilar:nth-child(4n+1) .pl-foto,.giros--zigzag .pilar:nth-child(4n) .pl-foto{flex:0 0 58%;aspect-ratio:auto}
  .giros--zigzag .pilar:nth-child(4n+1) .pl-foto img,.giros--zigzag .pilar:nth-child(4n) .pl-foto img{position:absolute;inset:0}
  .giros--zigzag .pilar:nth-child(4n+1) .pilar-frente>div,.giros--zigzag .pilar:nth-child(4n) .pilar-frente>div{
      justify-content:center;padding:var(--e4);border-left:3px solid var(--red)}
  .giros--zigzag .pilar:nth-child(4n) .pilar-frente>div{border-left:0;border-right:3px solid var(--red)}
  .giros--zigzag .pilar:nth-child(4n+1) .pilar-frente .pilar-mas,.giros--zigzag .pilar:nth-child(4n) .pilar-frente .pilar-mas{margin-top:var(--e2);align-self:flex-start}
  .giros--zigzag .pilar:nth-child(4n+1) .pilar-dorso,.giros--zigzag .pilar:nth-child(4n) .pilar-dorso{padding:var(--e5)}
  .giros--zigzag .pilar:nth-child(4n+1) .pilar-dorso p,.giros--zigzag .pilar:nth-child(4n) .pilar-dorso p{max-width:56ch;font-size:1rem}
  /* si la última queda sola en su fila (7 tarjetas, 11...), va ancha a todo el ancho */
  .giros--zigzag .pilar:nth-child(4n+3):last-child{grid-column:1 / -1}
  .giros--zigzag .pilar:nth-child(4n+3):last-child .pilar-frente{flex-direction:row;padding:0;min-height:260px}
  .giros--zigzag .pilar:nth-child(4n+3):last-child .pl-foto{flex:0 0 46%;aspect-ratio:auto}
  .giros--zigzag .pilar:nth-child(4n+3):last-child .pl-foto img{position:absolute;inset:0}
  .giros--zigzag .pilar:nth-child(4n+3):last-child .pilar-frente>div{justify-content:center;padding:var(--e4);border-left:3px solid var(--red)}
  .giros--zigzag .pilar:nth-child(4n+3):last-child .pilar-frente .pilar-mas{margin-top:var(--e2);align-self:flex-start}
  .giros--zigzag .pilar:nth-child(4n+3):last-child .pilar-dorso{padding:var(--e5)}
}
/* TELÉFONO: tarjetas compactas, con la foto al costado. (Con la foto
   arriba, las seis sumaban más de seis pantallas de alto.) Tienen el alto
   justo para que por detrás quepa la explicación. */
@media(max-width:699px){
  .giros{gap:12px}
  .pilar--tarjeta .pilar-frente{flex-direction:row;padding:0;min-height:232px}
  .pilar--tarjeta .pl-foto{flex:0 0 112px;aspect-ratio:auto}
  .pilar--tarjeta .pl-foto img{position:absolute;inset:0}
  .pilar--tarjeta .pilar-frente>div{padding:16px 16px 12px;justify-content:center}
  .pilar--tarjeta h3{font-size:1.0625rem}
  .pilar--tarjeta p{font-size:.875rem}
  .pilar--tarjeta .pilar-dorso{padding:16px 18px 12px;gap:4px}
  .pilar--tarjeta .pilar-dorso h3{padding-bottom:6px}
  .pilar--tarjeta .pilar-dorso p{font-size:.8125rem;line-height:1.4}
  .pilar--tarjeta .pilar-dorso .pilar-mas{padding-top:6px}
  /* la etiqueta va chica y en dos líneas, sobre la foto angosta */
  .pilar--tarjeta .badge2{top:8px;left:8px;max-width:96px;padding:4px 8px;font-size:.5rem;line-height:1.35;border-radius:8px}
}
@media (hover:hover){ .pilar.pilar--tarjeta:nth-child(n):hover{transform:translateY(-3px)} }
@media (prefers-reduced-motion:reduce){ .pilar.pilar--tarjeta:nth-child(n):hover{transform:none} }

/* el recuadro de ícono (lo usa la lista de Material) */
.pl-ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;
       background:rgba(200,55,43,.1);color:var(--red)}
.pl-ic svg{width:22px;height:22px}

/* LOS OBJETIVOS: tres BALDOSAS DE COLOR (rojo, azul noche y crema), las
   tres DEL MISMO TAMAÑO: son tres objetivos de igual peso, ninguno manda
   sobre los otros. Cada una lleva la idea del objetivo en la letra grande de
   los títulos (lo que va entre **asteriscos** en nosotros.js) y nada más:
   SIN dibujo en la esquina (repetía los dibujos de fondo del sitio y
   ensuciaba). Computador: tres en fila. Tablet angosta y teléfono: una bajo
   otra, a todo el ancho. */
.pq-obj{position:relative;margin-top:var(--e6)}
.pq-obj .eyebrow{margin-bottom:var(--e3)}
.objetivos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--e2)}
.pq-obj .objetivos li{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
      padding:var(--e4) var(--e3);border-radius:var(--r-lg);
      font-size:1.0625rem;line-height:1.45;color:rgba(255,255,255,.9);background:#c8372b;
      box-shadow:var(--sh-2)}
.pq-obj .objetivos li:nth-child(2){background:#171640}
/* la tercera va en el crema del coro, con la idea en rojo (los tres colores
   son los de la marca: rojo, azul noche y crema) */
.pq-obj .objetivos li:nth-child(3){background:#fffefb;color:#4a4868}   /* más claro que la franja de atrás, que es crema oscuro */
.pq-obj .objetivos li:nth-child(3) b{color:#c8372b}
.pq-obj .objetivos b{display:block;margin:6px 0;font-family:var(--display);font-weight:400;
      font-size:clamp(30px,4.4vw,44px);line-height:1.04;letter-spacing:.02em;color:#fff;text-wrap:balance}
/* TRES EN FILA, parejas (la fila les da el mismo alto a las tres) */
@media(min-width:900px){
  .pq-obj .objetivos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3)}
  .pq-obj .objetivos li{min-height:280px;padding:var(--e4)}
}
/* (en la franja azul de Nosotros los objetivos van como lista simple) */
.objetivos li{padding:var(--e2) 0;border-top:1px solid var(--line);font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.objetivos li:first-child{border-top:0}
.objetivos b{font-weight:600;color:var(--ink)}
.pq-obj .objetivos li{border-top:0}
.p-quienes .cta-row{margin-top:var(--e4)}

/* ================= 4. QUÉ HACEMOS =================
   Las tarjetas con foto del resto del sitio (.act2, en estilos.css).
   Computador: tres por fila. Teléfono: una fila que se desliza con el dedo
   y deja asomada la tarjeta siguiente (seis apiladas eran dos pantallas y
   media de scroll). */
.p-hacemos{background:var(--paper-2)}
.hacemos-tira{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
              max-width:1080px;margin:var(--e4) auto 0;padding:0 var(--borde)}
.hacemos-tira:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.p-hacemos .cta-row{margin-top:var(--e4)}
@media(max-width:999px){ .hacemos-tira{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* TELÉFONO: una LISTA compacta, las seis a la vista de una vez: la foto
   chica a la izquierda y, al lado, la etiqueta, el nombre y la frase.
   (Antes era una fila que se deslizaba hacia el costado y solo se veía una
   tarjeta y media: había que adivinar que seguía.) */
@media(max-width:699px){
  .hacemos-tira{grid-template-columns:1fr;gap:10px}
  .hacemos-tira .act2{position:relative;flex-direction:row;align-items:stretch;min-height:112px}
  .hacemos-tira .act2 .ph{position:static;flex:0 0 104px;aspect-ratio:auto}
  .hacemos-tira .act2 .ph::before{display:none}
  .hacemos-tira .act2 .ph img{display:block}
  .hacemos-tira .act2 .badge2{top:12px;left:118px;box-shadow:none;font-size:.5625rem;padding:3px 9px}
  .hacemos-tira .act2 .badge2:not(.open):not(.mem){box-shadow:inset 0 0 0 1px var(--line)}
  .hacemos-tira .act2 .b2{padding:40px 14px 14px;gap:3px;justify-content:center}
  .hacemos-tira .act2 h3{font-size:1rem}
  .hacemos-tira .act2 p{font-size:.8125rem;line-height:1.4}
  .p-hacemos .cta-row{margin-top:var(--e3)}
}
/* en la portada las tarjetas son el resumen: el "Saber más" va en Nosotros */
.p-hacemos .act-mas{display:none}

/* ================= JUNTURAS =================
   Un dibujo rojo montado sobre el borde entre dos secciones, SOLO donde el
   fondo cambia fuerte (de crema a azul noche o al revés), para que el paso
   no sea tan seco. En index.html es una caja sin alto entre las dos
   secciones:  <div class="juntura juntura--pentagrama"></div>
   El dibujo es su ::before, centrado justo sobre el borde: mitad cae arriba
   y mitad abajo. Va como fondo que se repite hacia la derecha (cada dibujo
   mide 1200 px y empalma consigo mismo), así sirve en cualquier ancho. No se
   puede tocar ni seleccionar: es un adorno.
   HAY CUATRO, para ir variando (los archivos están en
   2-iconos-y-compartir/dibujos-de-fondo/principales/juntura-*.svg):
     --pentagrama  cinco líneas con notas. La CLAVE DE SOL es otro archivo y
                   va UNA sola vez, al comienzo, como en una partitura
     --estrellas   una estela con estrellas de cinco puntas dibujadas a mano
                   (de un solo trazo) y notas musicales
     --cuerdas     las seis cuerdas de una guitarra (ondulan suave, todas
                   parejas: sin cuerdas que se abran al vibrar) y una uña
     --onda        una onda de sonido: barritas verticales, como la forma
                   de onda de una canción */
.juntura{position:relative;z-index:3;height:0;pointer-events:none;--j-ancho:1200px;--j-alto:110px}
.juntura::before{content:"";position:absolute;left:0;right:0;top:calc(var(--j-alto) / -2);height:var(--j-alto);
  background:var(--j) left top / var(--j-ancho) var(--j-alto) repeat-x}
/* EL BORDE DE COLOR SIGUE LA CURVA DEL DIBUJO: 9-codigo/junturas.js pone
   dentro de cada juntura una capa (.j-onda) que pinta, entre la línea recta
   y la curva, el color de la sección de arriba o el de la de abajo. Así el
   cambio de color pasa justo por el centro del dibujo. Va DEBAJO del dibujo.
   En el teléfono se achica igual que el dibujo (a dos tercios). */
.juntura::before{z-index:1}
.j-onda{position:absolute;left:0;top:calc(var(--j-alto) / -2);width:100%;height:var(--j-alto);
        display:block;overflow:hidden;pointer-events:none}
.j-onda .j-arriba{fill:var(--j-arriba,transparent)}
.j-onda .j-abajo{fill:var(--j-abajo,transparent)}
@media(max-width:699px){ .j-onda g{transform:scale(.655)} }
.juntura--pentagrama::before{
  background:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/juntura-clave.svg) left top / var(--j-ancho) var(--j-alto) no-repeat,
             url(../2-iconos-y-compartir/dibujos-de-fondo/principales/juntura-pentagrama.svg) left top / var(--j-ancho) var(--j-alto) repeat-x}
.juntura--estrellas{--j:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/juntura-estrellas.svg)}
.juntura--cuerdas{--j:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/juntura-cuerdas.svg)}
.juntura--onda{--j:url(../2-iconos-y-compartir/dibujos-de-fondo/principales/juntura-onda.svg)}
/* en el teléfono, todo a dos tercios del tamaño */
@media(max-width:699px){ .juntura{--j-ancho:786px;--j-alto:72px} }

/* ================= 5. NUESTRA MÚSICA =================
   Franja azul noche. Arriba, el texto y las cifras;
   al medio, la cinta de carátulas, de borde a borde; abajo, las plataformas. */
.p-musica{position:relative;overflow:hidden;background:var(--navy);color:#fff}
/* los dibujos de fondo (clase deco, en estilos.css) quedan DETRÁS de todo */
.p-musica>*,.p-fotos>*{position:relative;z-index:1}
.p-musica .eyebrow{color:rgba(246,242,234,.92)}
.p-musica .eyebrow::before{background:var(--rose)}
.p-musica .h2{color:#fff}
.p-musica .lede{color:rgba(246,242,234,.82);max-width:44ch}
.pm-cab{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e4)}
@media(min-width:900px){
  .pm-cab{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:var(--e6);align-items:center}
}
/* las cuatro cifras, de a dos: las líneas divisorias son el fondo que se ve
   por la separación de 1px entre las celdas */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border-radius:var(--r);overflow:hidden;
        background:var(--line-lt);box-shadow:0 0 0 1px var(--line-lt)}
.cifra{padding:var(--e3) var(--e1);text-align:center;background:color-mix(in srgb,var(--navy) 95%,#fff)}
.cifra:last-child:nth-child(odd){grid-column:span 2}
.cifra .n{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,4.4vw,44px);
          line-height:1;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.cifra .l{display:block;margin-top:var(--e1);font-size:.875rem;line-height:1.3;color:rgba(246,242,234,.72)}
.cifras-paises{margin:var(--e2) 0 0;text-align:center;font-size:.9375rem;line-height:1.5;color:rgba(246,242,234,.82)}
.cifras-paises b{font-weight:600;color:#fff}
.cifras-fuente{margin:var(--e1) 0 0;text-align:center;font-size:.875rem;color:rgba(246,242,234,.6)}

/* LA CINTA DE CARÁTULAS: pasa sola, lento, de derecha a izquierda. Las
   carátulas van dos veces seguidas, y la cinta avanza justo una vuelta
   (la mitad de su ancho más media separación) antes de volver a empezar,
   así que no se nota el empalme. Solo se mueve mientras se ve (clase
   .andando, la pone 9-codigo/portada.js). NO se detiene con el mouse
   encima: es decorativa, y que se frenara se sentía como una falla. */
.discos{position:relative;overflow:hidden;margin:var(--e5) 0 var(--e4)}
.discos::before,.discos::after{content:"";position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;
                               width:clamp(24px,9vw,140px)}
.discos::before{left:0;background:linear-gradient(90deg,var(--navy),color-mix(in srgb,var(--navy) 0%,transparent))}
.discos::after{right:0;background:linear-gradient(270deg,var(--navy),color-mix(in srgb,var(--navy) 0%,transparent))}
.discos-pista{display:flex;gap:14px;width:max-content;padding:var(--e1) 0 var(--e3);
              animation:discos 125s linear infinite;animation-play-state:paused}
.discos.andando .discos-pista{animation-play-state:running}
.discos img{width:clamp(128px,15vw,176px);height:auto;aspect-ratio:1/1;object-fit:cover;flex:none;
            border-radius:var(--r-sm);background:var(--navy-2);box-shadow:0 16px 28px -18px rgba(0,0,0,.75)}
@keyframes discos{to{transform:translateX(calc(-50% - 7px))}}
/* las tres plataformas ocupan el ancho completo, en una fila */
@media(min-width:700px){ .p-musica .plats{grid-template-columns:repeat(3,minmax(0,1fr))} }
.p-musica .cta-row{margin-top:var(--e4)}

/* ================= 6. MATERIAL =================
   Texto, buscador y lo que trae la app a la izquierda; a la derecha, tres
   carátulas en abanico (en el teléfono van debajo, más chicas). */
.p-material{background:var(--paper)}
.mat-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e5)}
@media(min-width:900px){
  .mat-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:var(--e6);align-items:center}
}
.p-material .lede{max-width:44ch}
/* el mismo buscador del video, sobre fondo claro: un borde fino lo recorta */
.p-material .hero-buscar{box-shadow:0 0 0 1px var(--line),var(--sh-2)}
.p-material .hero-buscar:focus-within{box-shadow:0 0 0 3px rgba(200,55,43,.4),var(--sh-2)}
.mat-lista{list-style:none;padding:0;margin:var(--e4) 0 0;display:grid;grid-template-columns:1fr;gap:var(--e2)}
.mat-lista li{display:flex;gap:var(--e2);align-items:center;font-size:.9375rem;line-height:1.4;color:var(--ink)}
@media(min-width:560px){ .mat-lista{grid-template-columns:1fr 1fr;gap:var(--e2) var(--e3)} }
.p-material .cta-row{margin-top:var(--e4)}
.mat-fan{position:relative;width:100%;max-width:400px;aspect-ratio:10/9;margin:0 auto}
.mat-fan img{position:absolute;width:56%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
             background:var(--paper-2);box-shadow:0 2px 6px rgba(15,11,40,.14),0 24px 44px -22px rgba(15,11,40,.5)}
.mat-fan img:nth-child(1){left:0;top:6%;transform:rotate(-9deg)}
.mat-fan img:nth-child(2){right:0;top:0;transform:rotate(7deg)}
.mat-fan img:nth-child(3){left:22%;bottom:0;transform:rotate(-2deg)}
@media(max-width:899px){ .mat-fan{max-width:300px} }

/* ================= 7. FOTOS =================
   Un MOSAICO que se desliza hacia el costado, sobre azul noche para que las
   fotos resalten: una foto grande, dos chicas una sobre otra, otra grande...
   (lo arma 9-codigo/carrusel.js). --alto es el alto del mosaico: de ahí
   salen todos los tamaños. En computador se mueve con las flechas; en el
   teléfono, con el dedo. Los bordes calzan con el margen de la página. */
.p-fotos{--pad:calc(max(0px,(100vw - 1080px) / 2) + clamp(20px,4vw,44px));
         --alto:clamp(264px,72vw,340px);--sep:10px;
         background:var(--navy);color:#fff}
@media(min-width:700px){ .p-fotos{--alto:clamp(340px,40vw,500px);--sep:12px} }
.p-fotos .eyebrow{color:rgba(246,242,234,.92)}
.p-fotos .eyebrow::before{background:var(--rose)}
.p-fotos .h2{color:#fff;margin-bottom:0}
.pf-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e3);margin-bottom:var(--e4)}
/* las flechas: solo donde hay mouse (con el dedo no hacen falta) */
.pf-flechas{display:none;gap:var(--e1);flex:none}
@media (hover:hover) and (min-width:700px){ .pf-flechas{display:flex} }
.pf-fl{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;
       border:1.5px solid rgba(246,242,234,.4);background:transparent;color:#fff;
       transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
                  opacity var(--t-base) var(--ease),transform var(--t-press) var(--ease)}
.pf-fl svg{width:22px;height:22px}
.pf-ant svg{transform:rotate(180deg)}
.pf-fl:hover{background:rgba(246,242,234,.14);border-color:#fff}
.pf-fl:active{transform:scale(.9)}
.pf-fl:disabled{opacity:.3;cursor:default;background:transparent;border-color:rgba(246,242,234,.4)}
.tira{display:flex;gap:var(--sep);height:var(--alto);box-sizing:content-box;
      overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
      scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
      padding:0 var(--pad) var(--e1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tira::-webkit-scrollbar{display:none}
.tira:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* la grande ocupa todo el alto; el par, dos fotos apiladas */
.tira .grande,.tira .par{flex:none;scroll-snap-align:start;height:100%}
.tira .grande{width:min(calc(var(--alto) * 1.5),86vw)}
.tira .par{display:grid;grid-template-rows:1fr 1fr;gap:var(--sep);width:calc((var(--alto) - var(--sep)) * .75)}
.tira figure{margin:0;min-height:0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.07)}
.tira img{width:100%;height:100%;object-fit:cover;display:block;
          opacity:0;transition:opacity .4s ease}
.tira img.lista{opacity:1}

/* ---- FOTOS EN GRANDE (9-codigo/visor-fotos.js) ----
   Al tocar una foto del mosaico se abre a pantalla completa sobre azul
   noche. Es otra tira que se desliza, con UNA foto por pantalla. Encima,
   lo justo: cuál foto es, la ✕, las flechas (solo con mouse) y − / +.
   Entra y sale con el mismo movimiento corto del resto del sitio. */
.tira--ampliable img{cursor:zoom-in}
.vf{position:fixed;inset:0;z-index:90;color:#fff;overflow:hidden;
    background-color:rgba(15,11,40,var(--vf-fondo,1));
    opacity:0;transition:opacity .2s ease;
    -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.vf[hidden]{display:none}
.vf.vf-on{opacity:1}
.vf-pista{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-behavior:auto;overscroll-behavior:contain;
    scrollbar-width:none;touch-action:pan-x;
    transform:scale(.97);transition:transform var(--t-view) var(--ease)}
.vf-pista::-webkit-scrollbar{display:none}
.vf-on .vf-pista{transform:none}
/* ampliada: la tira se queda quieta y el dedo mueve la foto */
.vf-ampliada .vf-pista{overflow-x:hidden;touch-action:none;cursor:grab}
.vf-lamina{flex:none;width:100%;height:100%;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden;
    scroll-snap-align:center;scroll-snap-stop:always;box-sizing:border-box;
    padding:calc(env(safe-area-inset-top,0px) + 60px) env(safe-area-inset-right,0px)
            calc(env(safe-area-inset-bottom,0px) + 60px) env(safe-area-inset-left,0px)}
.vf-lamina img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
    border-radius:var(--r-xs);will-change:transform;cursor:zoom-in}
.vf-ampliada .vf-lamina img{cursor:inherit}
.vf-lamina img.vf-suave{transition:transform var(--t-view) var(--ease)}
/* el teléfono acostado: poco alto, la foto usa casi todo */
@media(max-height:520px){ .vf-lamina{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} }
@media (hover:hover) and (min-width:700px){ .vf-lamina{padding-left:84px;padding-right:84px} }
.vf-cuenta{position:absolute;z-index:2;margin:0;pointer-events:none;
    top:calc(env(safe-area-inset-top,0px) + 20px);left:calc(env(safe-area-inset-left,0px) + 20px);
    padding:6px 12px;border-radius:var(--r-pill);background:rgba(15,11,40,.6);
    font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.08em;line-height:1.4;
    font-variant-numeric:tabular-nums;color:rgba(246,242,234,.9)}
.vf-b{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid rgba(246,242,234,.28);background:rgba(15,11,40,.6);color:#fff;
    transition:background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
               opacity var(--t-base) var(--ease),transform var(--t-press) var(--ease)}
.vf-b svg{width:22px;height:22px}
.vf-b:hover{background:rgba(246,242,234,.16);border-color:rgba(246,242,234,.7)}
.vf-b:active{transform:scale(.9)}
.vf-b:focus-visible,.vf-zoom button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vf-cerrar{top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 12px)}
/* las flechas: solo donde hay mouse (con el dedo se desliza) */
.vf-fl{display:none;top:50%;margin-top:-24px;width:48px;height:48px}
@media (hover:hover) and (min-width:700px){ .vf-fl{display:grid} }
.vf-ant{left:18px}.vf-sig{right:18px}
.vf-ant svg{transform:rotate(180deg)}
.vf-fl:disabled{opacity:0;pointer-events:none}
/* − y +, la misma pastilla del visor de canciones */
.vf-zoom{position:absolute;z-index:2;display:flex;overflow:hidden;border-radius:var(--r-pill);
    right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
    border:1px solid rgba(246,242,234,.28);background:rgba(15,11,40,.6)}
.vf-zoom button{display:grid;place-items:center;width:48px;height:42px;padding:0;border:0;background:none;color:#fff;cursor:pointer;
    transition:background-color var(--t-base) var(--ease),opacity var(--t-base) var(--ease)}
.vf-zoom button svg{width:20px;height:20px}
.vf-zoom button:hover{background:rgba(246,242,234,.16)}
.vf-zoom button:disabled{opacity:.35;cursor:default;background:none}
.vf-zoom button + button{border-left:1px solid rgba(246,242,234,.28)}
@media (prefers-reduced-motion:reduce){ .vf,.vf-pista,.vf-lamina img.vf-suave{transition:none} .vf-pista{transform:none} }
.p-fotos .cta-row{margin-top:var(--e4)}
.p-fotos .btn.outline{color:#fff;border-color:rgba(246,242,234,.5)}
.p-fotos .btn.outline:hover{background:rgba(246,242,234,.12);border-color:#fff}

/* ================= 8. AGENDA ================= */
.p-agenda{background:var(--paper)}
.agenda-lista{display:grid;grid-template-columns:1fr;gap:var(--e2);margin-top:var(--e3)}
@media(min-width:760px){ .agenda-lista{grid-template-columns:repeat(3,1fr);gap:var(--e3)} }

/* ================= 9. SÉ PARTE =================
   Cuatro tarjetas-foto que son enlaces enteros: la foto de fondo y un velo
   azul que carga abajo, donde va el texto.
   Computador: dos filas trabadas (ancha + angosta, angosta + ancha), para
   que no sean cuatro cajas iguales. Teléfono: una debajo de otra. */
.p-parte{background:var(--paper)}
/* CON agenda (que es crema): pasa al crema oscuro, para no repetir fondo */
#inicio:not(.sin-agenda) .p-parte{background:var(--paper-2)}
.puertas{display:grid;grid-template-columns:1fr;gap:var(--e2);margin-top:var(--e4)}
.puerta{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
        gap:var(--e4);min-height:330px;padding:var(--e3);border-radius:var(--r-lg);
        background:var(--navy-deep);color:#fff;text-decoration:none;cursor:pointer;box-shadow:var(--sh-2);
        transition:transform var(--t-press) var(--ease),box-shadow var(--t-base) var(--ease)}
.pu-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
         transition:transform .6s var(--ease)}
.pu-velo{position:absolute;inset:0;pointer-events:none;
         background:linear-gradient(to top,rgba(15,11,40,.95) 0%,rgba(15,11,40,.82) 30%,rgba(15,11,40,.22) 62%,rgba(15,11,40,.08) 100%)}
.pu-txt{position:relative;display:flex;flex-direction:column;gap:6px;max-width:44ch}
.puerta h3{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(19px,2.4vw,24px);line-height:1.18;
           color:#fff;text-shadow:0 1px 14px rgba(15,11,40,.5)}
.puerta p{margin:0;font-size:.9375rem;line-height:1.45;color:rgba(246,242,234,.88)}
.puerta .nov-mas{margin-top:0;padding-top:var(--e1);color:#f5a397}
@media (hover:hover){
  .puerta:hover{box-shadow:var(--sh-3);transform:translateY(-2px)}
  .puerta:hover .pu-foto{transform:scale(1.04)}
}
.puerta:active{transform:scale(.985)}
@media(min-width:760px){
  .puertas{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--e3)}
  .puerta{min-height:380px;padding:var(--e4)}
  .puerta:nth-child(1),.puerta:nth-child(4){grid-column:span 7}
  .puerta:nth-child(2),.puerta:nth-child(3){grid-column:span 5}
}

/* VARIANTES que usan las otras pestañas (Nosotros, Dona):
   --quieta  no es un enlace: no se levanta ni cambia el cursor
   --3       tres iguales en una fila
   --bajas   más bajas, para las que solo llevan título */
.puerta--quieta{cursor:default}
.puerta--quieta:hover,.puerta--quieta:active{transform:none;box-shadow:var(--sh-2)}
@media(min-width:760px){
  .puertas--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .puertas--3 .puerta:nth-child(n){grid-column:auto}
}
.puertas--bajas .puerta{min-height:230px}
@media(min-width:760px){ .puertas--bajas .puerta{min-height:270px} }

/* ================= 10. CIERRE =================
   Sobre la foto grupal del coro (3-fotos/del-sitio/enterate.jpg), con un
   velo azul que deja ver las caras y carga un poco más al medio, donde
   va el texto. */
.p-cierre{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;text-align:center;
          padding:clamp(88px,14vw,140px) 0}
.pc-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.pc-velo{position:absolute;inset:0;pointer-events:none;
         background:radial-gradient(70% 55% at 50% 50%,rgba(15,11,40,.72) 0%,rgba(15,11,40,.5) 100%),
                    linear-gradient(180deg,rgba(15,11,40,.2) 0%,rgba(15,11,40,0) 40%,rgba(15,11,40,.45) 100%)}
.p-cierre>.container{position:relative;z-index:1}
.p-cierre .h2{text-shadow:0 2px 24px rgba(15,11,40,.6)}
.p-cierre .h2{color:#fff;margin-left:auto;margin-right:auto}
.p-cierre .lede{color:rgba(246,242,234,.82);margin:0 auto;max-width:40ch}
.p-cierre .cta-row{justify-content:center;margin-top:var(--e4)}
.p-cierre .btn.outline{color:#fff;border-color:rgba(246,242,234,.5)}
.p-cierre .btn.outline:hover{background:rgba(246,242,234,.12);border-color:#fff}

/* ================= MODO OSCURO ================= */
@media (prefers-color-scheme:dark){
  /* la franja inclinada: en oscuro el crema oscuro casi no se nota */
  .pq-banda::before{--velo:80%;--tinta:var(--navy-2)}
  /* en oscuro los tonos de la carátula van como un velo MUY suave sobre el
     azul noche: con más fuerza, los ocres y verdes se volvían un fondo
     verde azulado que no es de la marca */
  /* de noche: el azul del coro (no el casi negro) con brillos cálidos de la carátula */
  .p-album{--lg:42%;--ag:.55;background-color:var(--navy);
    background-image:
      radial-gradient(60% 80% at 10% 25%,hsl(var(--h1) var(--s1) 40% / .45),transparent 70%),
      radial-gradient(55% 75% at 100% 100%,hsl(var(--h2) var(--s2) 38% / .4),transparent 70%)}
  .pa-k{color:#f0897b}
  .pa-texto{color:#f0ede2;opacity:.85}
  .al-cab{border-bottom-color:rgba(240,237,226,.7)}
  .al-tema{color:#f0ede2}
  .al-tema:hover,.al-tema:focus-visible,.al-tema:active{background:rgba(240,237,226,.07)}
  .al-ir::before{border-bottom-color:rgba(240,237,226,.3)}
  .al-cab span{color:rgba(240,237,226,.7)}
  .al-mas{color:#f0ede2;border-color:rgba(240,237,226,.3)}
  .pa-vinilo{box-shadow:0 0 0 1px rgba(240,237,226,.12),0 14px 30px -12px rgba(0,0,0,.6)}
  .al-n,.al-ir{color:#f0897b}
  .p-album .h2{color:#fff}
  .pilar h3{color:var(--ink)}
  .pl-ic{background:rgba(224,88,74,.16)}
  /* en oscuro el "crema" ya es azul oscuro: la franja de la música va en el
     azul un poco más claro, para que siga leyéndose como una franja aparte */
  .p-musica,.p-fotos{background:var(--navy-2)}
  .cifra{background:color-mix(in srgb,var(--navy-2) 95%,#fff)}
  .discos::before{background:linear-gradient(90deg,var(--navy-2),color-mix(in srgb,var(--navy-2) 0%,transparent))}
  .discos::after{background:linear-gradient(270deg,var(--navy-2),color-mix(in srgb,var(--navy-2) 0%,transparent))}
  .discos img{background:var(--navy)}
}

/* ================= MOVIMIENTO REDUCIDO ================= */
@media (prefers-reduced-motion:reduce){
  html:not(.hero-hecho) .hero-inner>*{animation-name:fundido!important;animation-duration:.2s!important}
  /* la cinta de carátulas queda quieta y se desliza con el dedo */
  .discos{overflow-x:auto;scrollbar-width:none;padding:0 var(--borde)}
  .discos::-webkit-scrollbar{display:none}
  .discos::before,.discos::after{display:none}
  .discos-pista{animation:none}
  .puerta:hover,.puerta:active,.puerta:hover .pu-foto{transform:none}
}

/* ================= TELÉFONO: TARJETAS DE DISTINTOS TAMAÑOS =================
   Donde hay muchas tarjetas seguidas (Cómo vivimos la misión, ¿No eres del
   coro?, los pilares, Hay un lugar para ti y Dona), en el teléfono se mezclan
   dos tamaños, todas derechas: una ANCHA (foto al costado y texto al lado) y,
   debajo, dos MEDIANAS de a dos por fila (foto arriba). El ritmo se repite:
   ancha, mediana, mediana, ancha... Así entran varias por pantalla sin que
   parezca una grilla pareja. Los tamaños de letra no cambian. */
@media(max-width:699px){
  .giros{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .giros .pilar.pilar--tarjeta:nth-child(n){transform:none}
  .pilar--tarjeta .pilar-frente{flex-direction:column;min-height:0}
  .pilar--tarjeta .pl-foto{flex:0 0 auto;aspect-ratio:4/3}
  .pilar--tarjeta .pilar-frente>div{padding:12px 12px 10px;justify-content:flex-start}
  .pilar--tarjeta .pilar-dorso{padding:14px 12px 10px;overflow-y:auto;justify-content:flex-start}
  .pilar--tarjeta .badge2{max-width:calc(100% - 16px)}
  /* la ancha */
  .giros .pilar--tarjeta:nth-child(3n+1){grid-column:1 / -1}
  .giros .pilar--tarjeta:nth-child(3n+1) .pilar-frente{flex-direction:row;min-height:190px}
  .giros .pilar--tarjeta:nth-child(3n+1) .pl-foto{flex:0 0 44%;aspect-ratio:auto}
  .giros .pilar--tarjeta:nth-child(3n+1) .pilar-frente>div{padding:14px 14px 10px;justify-content:center}
  .giros .pilar--tarjeta:nth-child(3n+1) .pilar-dorso{padding:16px 16px 10px}
  /* si al final queda una mediana sola, va al centro */
  .giros .pilar--tarjeta:nth-child(3n+2):last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 5px)}
}
@media(max-width:759px){
  /* los pilares: derechos, el primero ancho y los otros dos de a par */
  .pilares{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .pilar:nth-child(n){transform:none}
  .pilar-cara{padding:8px 8px 10px}
  .pilar-frente>div{padding:10px 4px 0}
  .pilar-dorso{padding:14px 10px 10px;overflow-y:auto;justify-content:flex-start}
  .pilar::before{width:60px;margin-left:-30px;height:20px;top:-9px}
  .pilar:first-child{grid-column:1 / -1}
  .pilar:first-child .pilar-frente{flex-direction:row;gap:12px}
  .pilar:first-child .pl-foto{flex:0 0 46%;aspect-ratio:4/3}
  .pilar:first-child .pilar-frente>div{padding:6px 4px 0 0;justify-content:center}

  /* Dona: dos medianas y una ancha */
  .puertas--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .puertas--3 .puerta{min-height:150px;padding:14px 12px;border-radius:var(--r)}
  .puertas--3 .puerta:nth-child(3){grid-column:1 / -1}
  .puertas--bajas .pu-velo{background:linear-gradient(to top,rgba(15,11,40,.95) 0%,rgba(15,11,40,.6) 50%,rgba(15,11,40,.15) 100%)}

  /* HAY UN LUGAR PARA TI: cuatro filas compactas sobre tarjeta. La foto a la
     izquierda, limpia (sin velo); al lado el título y una frase corta
     (inicio.js > parte > corto); a la derecha, una flecha. */
  .p-parte .puertas{grid-template-columns:1fr;gap:10px}
  .p-parte .puerta{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:0;
    padding:10px 14px 10px 10px;border-radius:var(--r);background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
  .p-parte .pu-foto{position:relative;inset:auto;flex:0 0 84px;width:84px;height:84px;border-radius:10px;object-position:center 30%}
  .p-parte .pu-velo,.p-parte .puerta .nov-mas,.p-parte .pu-txt p:not(.pu-corto){display:none}
  .p-parte .pu-txt{flex:1;min-width:0;gap:3px}
  .p-parte .puerta h3{color:var(--ink);text-shadow:none}
  .p-parte .puerta .pu-corto{display:block;color:var(--ink-soft);line-height:1.35}
  .p-parte .puerta::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg)}
}
.pu-corto{display:none}

/* ================= MODO NOCHE: LO AZUL QUE SE PERDÍA EN EL FONDO =================
   Las cintas azules (Los primeros años y los pilares) pasan a blanco, la
   baldosa azul de los objetivos y la etiqueta "Solo voluntarios" llevan un
   borde claro, y las tarjetas que se dan vuelta, un filete suave para que
   se despeguen del fondo, que es casi del mismo azul. */
@media (prefers-color-scheme:dark){
  .hist-tira .papel:nth-child(even)::before,
  .pilar:nth-child(2)::before{background:rgba(240,237,226,.88)}
  .pq-obj .objetivos li:nth-child(2){background:#23224f;box-shadow:inset 0 0 0 1px rgba(240,237,226,.22)}
  .pilar--tarjeta .badge2.mem{box-shadow:0 0 0 1px rgba(240,237,226,.6),0 1px 6px rgba(0,0,0,.4)}
  .pilar--tarjeta .pilar-cara,.member{box-shadow:inset 0 0 0 1px rgba(240,237,226,.1),0 2px 8px -2px rgba(0,0,0,.45)}
}