/* ==========================================================================
Coro Solidario Tito Schipa — landing
Sistema de diseño calcado de la referencia (v0 gigi), con paleta del folleto:
azul marino profundo + dorado + crema.
========================================================================== */
:root{
--ink: #0A1A3C; /* azul marino base (equivale al near-black de la ref) */
--ink-deep: #061027; /* azul aún más profundo, para degradés */
--card: #10254E; /* superficie de tarjeta sobre fondo oscuro */
--gold: #D4A537; /* acento principal */
--gold-soft: #F0CE7A;
/* Sobre fondo claro el dorado base rinde 2.1:1: no alcanza para leer.
Estas dos variantes son para texto sobre crema/papel. */
--gold-deep: #7A5C16; /* texto chico — 5.7:1 sobre crema */
--gold-strong: #A87F1E; /* titulares — 3.4:1 sobre crema */
--ink-soft: #3A4560; /* gris secundario — 8.8:1 sobre crema */
--cream: #FAF5E9; /* "blanco" de las secciones claras */
--paper: #FFFDF7;
--radius-pill: 999px;
/* altos de las dos barras fijas: la nav de arriba y el renglón "deslizá"
de abajo. El hero mobile los descuenta para entrar en una sola pantalla. */
--nav-h: 76px;
--band-h: 46px;
--footer-h: clamp(230px,24vw,360px); /* alto del pie fijo del fondo */
/* canto redondeado con el que la landing se apoya sobre el pie */
--sheet-radius: clamp(18px,2.6vw,34px);
/* aire VISIBLE arriba del contacto, ya descontado lo que tapa el canto */
--footer-pad-top: clamp(56px,7vw,84px);
--font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "Cascadia Mono", monospace;
--font-script: "Playfair Display", Georgia, "Times New Roman", serif;
}
*,*::before,*::after{ box-sizing:border-box; }
/* Lenis maneja el desplazamiento suave desde JS: el smooth nativo le pelearia
el control, asi que queda en auto. El scroll-padding sigue valiendo para el
fallback sin JS y para el foco por teclado (nav fija de 88px). */
html{ scroll-behavior:auto; scroll-padding-top:88px; }
body{
margin:0;
font-family:var(--font-sans);
background:var(--paper);
color:var(--ink);
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:1024px; margin:0 auto; padding:0 24px; }
/* --- tipografía utilitaria ------------------------------------------------ */
.mono{ font-family:var(--font-mono); }
/* Texto solo para lectores de pantalla: se saca de la vista sin usar
display:none ni visibility:hidden, que lo esconderían también de ellos. */
.sr-only{
position:absolute; width:1px; height:1px;
padding:0; margin:-1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; border:0;
}
.eyebrow{
font-family:var(--font-mono);
font-size:11px;
letter-spacing:.28em;
text-transform:uppercase;
}
.display{
font-weight:900;
letter-spacing:-.045em;
line-height:.92;
margin:0;
}
/* --- grano (retirado) ----------------------------------------------------
La textura usaba un SVG que no llegaba a tilear: se veía como un cuadrado
desplazándose sobre el fondo azul. La clase .noise queda sin efecto.
-------------------------------------------------------------------------- */
/* --- botones -------------------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; gap:8px;
padding:14px 26px;
border-radius:var(--radius-pill);
border:0;
font-weight:700; font-size:14px; letter-spacing:.02em;
position:relative; overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--ink); box-shadow:0 8px 24px rgba(212,165,55,.28); }
.btn-gold:hover{ box-shadow:0 12px 32px rgba(212,165,55,.42); }
.btn-outline{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }
.btn-outline-light{ background:transparent; color:var(--cream); border:2px solid rgba(250,245,233,.35); }
.btn-outline-light:hover{ background:var(--cream); color:var(--ink); }
.btn > *{ position:relative; z-index:2; }
/* barrido de brillo, como en la referencia */
.btn::after{
content:"";
position:absolute; inset:0; z-index:1;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
transform:translateX(-110%);
}
.btn:hover::after{ animation:sheen .8s ease; }
@keyframes sheen{ to{ transform:translateX(110%) } }
.btn svg{ width:16px; height:16px; }
/* --- navegación ----------------------------------------------------------- */
.nav{
position:fixed; top:0; left:0; right:0; z-index:50;
transition:background-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease;
background:transparent;
}
.nav.is-stuck{
background:rgba(250,245,233,.88);
backdrop-filter:blur(14px);
box-shadow:0 1px 0 rgba(10,26,60,.10), 0 12px 32px rgba(10,26,60,.06);
}
.nav-inner{
max-width:1280px; margin:0 auto; padding:16px 24px;
display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; }
/* emblema oficial: el PNG ya trae su propio aro dorado y fondo transparente */
.emblem{
--s:44px;
width:var(--s); height:var(--s);
border-radius:50%;
flex:none;
background-image:url("assets/logo-128.webp");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
filter:drop-shadow(0 3px 10px rgba(10,26,60,.28));
}
.brand-name{ line-height:1; }
.brand-name .b1{
display:block; font-family:var(--font-mono);
font-size:9px; letter-spacing:.32em; color:var(--ink-soft);
}
.brand-name .b2{
display:block; font-weight:900; font-size:19px; letter-spacing:-.035em;
margin-top:4px;
}
.brand-name .b2 span{ color:var(--gold); }
.nav-links{ display:none; align-items:center; gap:32px; }
.nav-links a{
position:relative;
font-size:16.5px; font-weight:500; letter-spacing:.01em;
color:var(--ink-soft);
transition:color .2s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
content:""; position:absolute; left:0; bottom:-5px;
width:100%; height:2px; background:var(--gold);
transform:scaleX(0); transform-origin:left;
transition:transform .3s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); }
/* mientras la nav está sobre el hero es transparente, y el hero ahora es oscuro:
el texto navy no se leía. Al hacer scroll toma fondo crema y vuelve a navy. */
.nav:not(.is-stuck) .nav-links a{ color:rgba(250,245,233,.82); }
.nav:not(.is-stuck) .nav-links a:hover{ color:var(--cream); }
.nav:not(.is-stuck) .brand-name .b1{ color:rgba(250,245,233,.62); }
.nav:not(.is-stuck) .brand-name .b2{ color:var(--cream); }
.nav:not(.is-stuck) .nav-burger{ color:var(--cream); }
.nav-burger{
display:inline-flex; padding:8px; background:transparent; border:0;
}
.nav-burger svg{ width:24px; height:24px; }
/* menú móvil */
.nav-mobile{
display:none;
padding:8px 24px 24px;
background:rgba(250,245,233,.97);
backdrop-filter:blur(14px);
border-top:1px solid rgba(10,26,60,.08);
}
.nav-mobile.open{ display:block; }
.nav-mobile a{
display:block; padding:12px 0;
font-weight:600; font-size:15px;
border-bottom:1px solid rgba(10,26,60,.07);
}
.nav-mobile .btn{ margin-top:16px; width:100%; justify-content:center; }
@media(min-width:900px){
.nav-links{ display:flex; }
.nav-burger{ display:none; }
.nav-mobile{ display:none !important; }
}
/* --- hero ----------------------------------------------------------------- */
.hero{
position:relative;
/* pantalla completa: con 92vh asomaba una franja de la seccion siguiente
abajo del renglon "deslizá", y la convocatoria tiene que aparecer recien
al scrollear. svh = la altura visible con la barra del navegador puesta. */
min-height:100vh;
min-height:100svh;
display:flex; align-items:center;
overflow:hidden;
background:var(--ink-deep); /* mismo tono que el scrim: no parpadea al cargar */
color:var(--cream);
}
/* cielorraso y boca de escenario. La foto va LIMPIA: sin blur, sin scale y sin
filtros de color. El blur la ablandaba, el scale la reescalaba y los filtros
la aplanaban; los tres se leen como pérdida de calidad.
Para cambiarla, reemplazar la url (teatro-hero.jpg). */
.hero-photo{
position:absolute; inset:0;
/* Por defecto va la version de 1400px (173KB): es la que baja un celular, que
es de donde llega casi toda la gente, porque el link se comparte por
WhatsApp. La de 1920px (371KB) se pide solo en pantallas que la aprovechan.
Para cambiar la foto hay que reemplazar las dos. */
background:url("assets/teatro-hero-1400.webp") center 46% / cover no-repeat;
}
@media (min-width:1200px){
.hero-photo{ background-image:url("assets/teatro-hero-1920.webp"); }
}
/* scrim azul, no velo crema. Sobre una foto oscura el crema la lava y la deja
gris; el azul la oscurece conservando su propio contraste. Sólo tiene cuerpo
detrás del texto y se abre hacia la derecha, donde la foto queda casi limpia. */
.hero-wash{
position:absolute; inset:0;
background:
linear-gradient(to bottom,
rgba(6,16,39,.55) 0%,
rgba(6,16,39,0) 26%),
linear-gradient(100deg,
rgba(6,16,39,.72) 0%,
rgba(6,16,39,.62) 30%,
rgba(6,16,39,.36) 56%,
rgba(6,16,39,.10) 82%,
rgba(6,16,39,0) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding:112px 0 84px; }
.hero-grid{ display:grid; gap:40px; align-items:center; }
@media(min-width:1000px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:48px; } }
/* El chip "CONVOCATORIA ABIERTA" se retiró del hero: el titular arranca solo.
Con él se fueron .badge, .dot y su animación de pulso, que no se usan en
ninguna otra parte de la página. */
.hero h1{
font-size:clamp(2.6rem,7.2vw,4.7rem);
margin:0;
color:var(--cream); /* el titular pasó a crema al quedar el hero sobre la foto */
}
.hero h1 .line{ display:block; }
/* el botón secundario era navy sobre crema; acá va sobre la foto */
.hero .btn-outline{ color:var(--cream); border-color:rgba(250,245,233,.45); }
.hero .btn-outline:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.hero .script{
display:block;
font-family:var(--font-script);
font-style:italic; font-weight:700;
letter-spacing:-.01em;
color:var(--gold);
font-size:clamp(2.1rem,5.6vw,3.7rem);
line-height:1.12;
margin-top:6px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
/* dos textos para el mismo botón: el largo manda salvo en pantallas angostas */
.solo-angosto{ display:none; }
@media(max-width:999px){
.solo-ancho{ display:none; }
.solo-angosto{ display:inline; }
}
.hero-art{ position:relative; display:flex; justify-content:center; }
.hero-art::before{
content:""; position:absolute; inset:8%;
background:rgba(212,165,55,.18); filter:blur(80px); border-radius:50%;
}
.hero-art img{
position:relative; z-index:2;
/* alto y ancho automáticos: los atributos width/height del no deben
imponer la altura, o la imagen se estira */
width:auto; height:auto;
max-width:min(100%,400px);
max-height:74vh;
border-radius:20px;
/* sombra negra y filo claro: sobre el hero oscuro una sombra navy no se ve */
box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(250,245,233,.12);
animation:float 7s ease-in-out infinite;
/* levemente translúcido: deja respirar la foto del hero por detrás */
opacity:.7;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
/* renglón azul inferior del hero: invita a bajar */
.scroll-band{
/* fijo al borde inferior de la pantalla: el hero es más alto que el viewport,
así que anclado al hero quedaba abajo del pliegue y no se veía al entrar */
position:fixed; left:0; right:0; bottom:0; z-index:40;
display:flex; align-items:center; justify-content:center; gap:14px;
padding:15px 18px calc(15px + env(safe-area-inset-bottom,0px));
background:var(--card); color:var(--cream);
border-top:1px solid rgba(212,165,55,.35);
font-family:var(--font-mono);
font-size:12px; letter-spacing:.22em; text-transform:uppercase;
text-align:center;
box-shadow:0 -10px 30px rgba(10,26,60,.18);
transition:background .3s ease, opacity .4s ease, transform .4s ease;
}
.scroll-band:hover{ background:var(--ink); }
/* al empezar a bajar ya cumplió su función: se retira */
.scroll-band.is-gone{ opacity:0; transform:translateY(100%); pointer-events:none; }
.scroll-band span{ line-height:1.2; }
.scroll-band-arrow{
width:17px; height:17px; flex:none;
color:var(--gold);
animation:nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:translateY(-3px); opacity:.55 } 50%{ transform:translateY(4px); opacity:1 } }
@media(max-width:520px){
.scroll-band{ gap:10px; padding:13px 14px calc(13px + env(safe-area-inset-bottom,0px)); font-size:10.5px; letter-spacing:.16em; }
.scroll-band-arrow{ width:15px; height:15px; }
}
/* --- el hero entra en una pantalla (mobile / tablet) ----------------------
En el celular el hero medía ~1100px contra un viewport de ~840: el folleto
quedaba cortado por el pliegue y había que scrollear para terminar de verlo.
Acá el hero se ata a la altura visible -svh, la altura chica: la que queda
cuando la barra del navegador está a la vista- y el folleto ocupa el hueco
que sobra en vez de empujar hacia abajo. Así al entrar se ve el hero entero
y la convocatoria recién aparece al scrollear.
-------------------------------------------------------------------------- */
@media(max-width:999px){
.hero{
min-height:100vh; /* respaldo para navegadores sin svh */
min-height:100svh;
align-items:stretch;
}
.hero-inner{
display:flex; flex-direction:column;
min-height:100vh;
min-height:100svh;
/* descuenta las dos barras fijas: nav arriba, renglón "deslizá" abajo */
padding:calc(var(--nav-h) + 14px) 0
calc(var(--band-h) + env(safe-area-inset-bottom,0px) + 16px);
}
.hero-grid{
display:flex; flex-direction:column; justify-content:center;
/* el grid de escritorio centra en el eje transversal; en columna eso
encoge los bloques al ancho de su contenido, así que vuelve a stretch */
align-items:stretch;
flex:1 1 auto; min-height:0;
gap:clamp(14px,2.4vh,26px);
}
.hero-grid > .reveal{ flex:0 0 auto; }
.hero h1{ font-size:clamp(2.1rem,8.2vw,3.1rem); margin-top:0; }
.hero .script{ font-size:clamp(1.7rem,6.4vw,2.5rem); }
/* los dos botones van en la misma línea, mitad y mitad del ancho, y cada
texto en un solo renglón: por eso el de la derecha usa su versión corta */
.hero-actions{
margin-top:clamp(16px,2.8vh,28px); gap:10px;
flex-wrap:nowrap;
}
.hero-actions .btn{
flex:1 1 0; min-width:0;
justify-content:center; text-align:center;
font-size:clamp(12px,3.1vw,15px);
padding:14px 8px;
white-space:nowrap;
}
/* el folleto se acomoda al hueco libre: se centra y nunca lo desborda.
Va absoluto porque un img en flujo no puede achicarse contra el alto
del padre; así queda limitado por max-width/max-height y punto. */
/* `> .hero-art` y no `.hero-art` a secas: el bloque comparte la clase
.reveal con el texto, y esa regla de arriba le ganaba en especificidad. */
.hero-grid > .hero-art{ display:block; flex:1 1 auto; min-height:0; }
.hero-art img{
position:absolute; inset:0; margin:auto;
width:auto; height:auto;
max-width:100%; max-height:100%;
object-fit:contain;
}
}
/* pantallas bajas (celulares chicos, o el teclado/barra comiendo alto): el
folleto ya no entraría sin achicar el titular, así que se retira y queda
el mensaje + los botones, que es lo que importa arriba del pliegue. */
@media(max-width:999px) and (max-height:700px){
.hero-grid > .hero-art{ display:none; }
}
/* --- encabezados de sección ---------------------------------------------- */
.section{ position:relative; padding:104px 0; overflow:hidden; }
.section-light{ background:var(--cream); }
.sec-head{ text-align:center; margin-bottom:52px; }
.sec-head h2{
font-size:clamp(2.15rem,5vw,3.5rem);
font-weight:900; letter-spacing:-.04em; line-height:1;
/* los 10px de arriba separaban del renglón chico que iba encima; sin ese
renglón, el título ahora abre la sección y no lleva nada delante */
margin:0;
}
.sec-head h2 .accent{ color:var(--gold-strong); }
/* --- voces: carrusel de tarjetas con ficha -------------------------------- */
.sec-intro{
max-width:56rem; margin:22px auto 0;
font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.7;
color:var(--ink-soft);
}
.sec-intro strong{ color:var(--ink); font-weight:800; }
/* La convocatoria es la seccion mas alta de la pagina -intro larga + tarjeta
grande-, asi que va mas comprimida en vertical que el resto. */
#voces{ padding:74px 0; }
#voces .sec-head{ margin-bottom:34px; }
/* La intro son tres oraciones, cada una en su .frase. El ancho sube para que
la primera entre completa en un renglon en pantallas grandes. */
#voces .sec-intro{ margin-top:16px; max-width:74rem; }
#voces .sec-intro .frase{
display:block;
/* evita que la ultima linea quede con una sola palabra colgando; donde no
este soportado simplemente corta como siempre. */
text-wrap:pretty;
}
/* Debajo de 900px las oraciones ya no entran en un renglon y se parten en dos
o tres. Sin aire entre ellas el parrafo se lee como un bloque unico y no se
distingue donde termina una idea y empieza la otra. */
@media(max-width:899px){
#voces .sec-intro .frase + .frase{ margin-top:.85em; }
}
/* En pantallas angostas el problema es el centrado: con renglones de ~40
caracteres los dos bordes quedan dentados y el ojo pierde el arranque de
cada linea. Se alinea a la izquierda, que da un margen fijo del que
engancharse. Justificado no: a este ancho abre huecos enormes entre
palabras. El volanta y el titulo siguen centrados, que anclan la seccion. */
@media(max-width:559px){
#voces .sec-intro{
text-align:left;
/* el texto ya no se apoya en el centro: se le da su propio respiro */
margin-top:22px;
line-height:1.62;
}
#voces .sec-intro .frase + .frase{ margin-top:1em; }
/* "cuatro voces" en su propio renglon: si no, el corte cae donde lo deje el
ancho y a veces suelta "voces" solo. Mismo recurso que usa .cta h2. */
#voces .sec-head h2 .accent{ display:block; }
#voces .sec-head h2{ line-height:1.06; }
#voces .sec-head{ margin-bottom:42px; }
}
/* el carrusel: una tarjeta por vez, flechas y puntos alrededor.
En angosto los controles van abajo; desde 1080px las flechas flanquean. */
.voices-carousel{ max-width:1000px; margin:28px auto 0; }
.vc-stage{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:
"view view view"
"prev dots next";
align-items:center;
row-gap:18px;
}
.vc-viewport{
grid-area:view;
overflow:hidden;
/* Aire de sobra arriba y abajo: la sombra de la tarjeta -y el hover, que la
levanta- caen dentro de la caja en vez de quedar cortados. */
padding:30px 0 54px;
margin:-30px 0 -54px;
/* A los costados no se corta con filo: las tarjetas de al lado se desvanecen,
asi el recorte del carrusel no se lee como una sombra cropeada. El fondido
va en pixeles -no en %- para que nunca alcance a morder la tarjeta activa. */
--vc-fade:10px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--vc-fade),#000 calc(100% - var(--vc-fade)),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 var(--vc-fade),#000 calc(100% - var(--vc-fade)),transparent 100%);
}
.vc-track{
position:relative; /* las slides miden su offsetLeft contra el track */
display:flex;
align-items:stretch;
gap:12px;
transition:transform .55s cubic-bezier(.22,.75,.25,1);
will-change:transform;
}
/* La tarjeta no ocupa todo el ancho: lo que sobra es el asomo de la anterior
y la siguiente, esperando turno. */
.vc-track > .voice-card{
flex:0 0 76%;
transition:transform .55s cubic-bezier(.22,.75,.25,1), opacity .45s ease,
box-shadow .3s ease, border-color .3s ease;
}
@media(min-width:760px){
.vc-track{ gap:22px; }
.vc-track > .voice-card{ flex-basis:64%; }
.vc-viewport{ --vc-fade:44px; }
}
/* las que esperan: mas chicas, apagadas y clickeables para traerlas al centro */
.vc-track > .voice-card:not(.is-active){
transform:scale(.93);
opacity:.55;
cursor:pointer;
box-shadow:0 14px 34px rgba(10,26,60,.07);
}
.vc-track > .voice-card:not(.is-active):hover{
transform:scale(.95);
opacity:.75;
border-color:rgba(10,26,60,.10);
}
.vc-arrow{
width:52px; height:52px; padding:0;
border-radius:50%;
border:2px solid rgba(10,26,60,.14);
background:var(--paper); color:var(--ink);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:transform .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.vc-arrow:first-of-type{ grid-area:prev; }
.vc-arrow:last-of-type{ grid-area:next; }
.vc-arrow svg{ width:22px; height:22px; }
.vc-arrow:hover{
border-color:rgba(212,165,55,.7); color:var(--gold-deep);
transform:translateY(-2px);
box-shadow:0 12px 26px rgba(10,26,60,.13);
}
.vc-dots{ grid-area:dots; display:flex; justify-content:center; align-items:center; gap:10px; }
.vc-dot{
width:10px; height:10px; padding:0;
border:0; border-radius:999px;
background:rgba(10,26,60,.22);
cursor:pointer;
transition:width .3s ease, background .3s ease;
}
.vc-dot:hover{ background:rgba(10,26,60,.4); }
.vc-dot.is-on{ width:30px; background:var(--gold-strong); }
@media(min-width:1080px){
.vc-stage{
grid-template-areas:
"prev view next"
". dots .";
column-gap:24px;
}
}
/* el salto mudo entre copia y tarjeta real: nada se anima en ese instante */
.vc-track.no-anim,
.vc-track.no-anim > .voice-card{ transition:none !important; }
@media(prefers-reduced-motion:reduce){
.vc-track, .vc-track > .voice-card{ transition:none; }
}
.voice-card{
display:flex; flex-direction:column;
background:var(--paper);
border:2px solid rgba(10,26,60,.10);
border-radius:26px;
padding:28px;
box-shadow:0 20px 50px rgba(10,26,60,.09);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.voice-card:hover{
transform:translateY(-4px);
border-color:rgba(212,165,55,.55);
box-shadow:0 28px 60px rgba(10,26,60,.14);
}
@media(min-width:860px){ .voice-card{ padding:34px; } }
.voice-head{ display:flex; align-items:center; gap:18px; }
.voice-ico{
width:74px; height:74px; flex:none;
border-radius:20px;
background:linear-gradient(160deg,var(--ink),var(--ink-deep));
color:var(--gold);
display:flex; align-items:flex-end; justify-content:center;
overflow:hidden;
position:relative;
}
.voice-ico::after{
content:""; position:absolute; inset:-30%;
background:radial-gradient(circle at 50% 35%, rgba(212,165,55,.32), transparent 62%);
}
/* El dibujo es el del folleto, recortado de ahi: viene de cabeza a hombros y
apoya en el piso del emblema, como en el original. */
.voice-ico img{
width:88%; height:88%; object-fit:contain; object-position:bottom;
position:relative; z-index:2; display:block;
}
.voice-head h3{
font-size:clamp(1.5rem,2.6vw,1.95rem);
font-weight:900; letter-spacing:-.04em; margin:0;
}
/* la etiqueta -"la mas aguda"- cuelga del titulo, sin numero de voz */
.voice-tag{
display:inline-block; margin-top:9px;
padding:4px 11px; border-radius:999px;
background:rgba(212,165,55,.16);
font-family:var(--font-mono); font-weight:400;
font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
color:var(--gold-deep);
}
/* la tablita de caracteristicas */
.voice-specs{
width:100%; border-collapse:collapse;
margin:20px 0 0;
}
/* El rotulo viene partido en dos con un espacio real entre ellos: en
escritorio cada mitad es un bloque -dos renglones parejos en las cuatro
tarjetas- y en el celular vuelven a ser uno solo, ya con su espacio. */
.voice-specs th span{ display:block; }
/* Etiqueta y dato van centrados entre si: la etiqueta es corta y el dato ocupa
dos renglones, y colgados de arriba quedaban desparejos. */
/* La columna del rotulo se achica hasta el ancho del renglon mas largo -de ahi
el width chico + nowrap-: con un porcentaje fijo quedaba un blancazo entre el
rotulo y su descripcion. Los cortes de linea los pone el del HTML. */
.voice-specs th{
width:1px; white-space:nowrap;
text-align:left; vertical-align:middle;
font-family:var(--font-mono); font-weight:400;
font-size:12px; line-height:1.5; letter-spacing:.1em; text-transform:uppercase;
color:var(--gold-deep);
padding:15px 26px 15px 0;
border-top:1px solid rgba(10,26,60,.11);
}
.voice-specs td{
vertical-align:middle;
font-size:15.5px; line-height:1.6; color:var(--ink-soft);
padding:15px 0;
border-top:1px solid rgba(10,26,60,.11);
}
.voice-specs tr:first-child th,
.voice-specs tr:first-child td{ border-top:0; padding-top:0; }
.voice-specs td strong{ color:var(--ink); font-weight:800; }
.voice-specs .mono{ font-size:14px; color:var(--ink); letter-spacing:.02em; }
/* En pantallas angostas la etiqueta de la voz -"la mas aguda"- no entra al lado
del emblema sin partirse en dos, asi que la cabecera pasa a grilla: emblema y
titulo arriba, y la etiqueta sola abajo, con el ancho entero de la tarjeta.
El div que las envuelve se hace transparente al layout con display:contents. */
@media(max-width:479px){
.voice-head{
display:grid; grid-template-columns:auto 1fr;
column-gap:14px; align-items:center;
}
.voice-head > div{ display:contents; }
.voice-ico{ width:60px; height:60px; border-radius:16px; }
.voice-tag{
grid-column:1 / -1; justify-self:start;
margin-top:12px; font-size:9.5px; letter-spacing:.07em; padding:3px 9px;
}
}
/* en pantallas angostas la etiqueta va arriba del dato */
@media(max-width:479px){
.voice-specs, .voice-specs tbody, .voice-specs tr, .voice-specs th, .voice-specs td{ display:block; width:auto; }
.voice-specs tr{ padding:13px 0; border-top:1px solid rgba(10,26,60,.11); }
.voice-specs tr:first-child{ border-top:0; padding-top:0; }
.voice-specs th, .voice-specs td{ border-top:0; padding:0; }
/* Acá el rótulo ya no comparte renglón con la respuesta: va centrado arriba y
de una sola línea, así que se anula el que lo parte en el escritorio. */
.voice-specs th{
margin-bottom:7px; text-align:center;
font-size:11px; letter-spacing:.08em;
}
.voice-specs th span{ display:inline; }
/* el botón ocupa el ancho de la tarjeta y su texto nunca se parte en dos */
.voice-card .btn{
width:100%; justify-content:center;
white-space:nowrap;
font-size:clamp(10.5px,3.1vw,13.5px);
padding:13px 10px;
}
}
/* el boton queda pegado al piso de la tarjeta, parejo entre las cuatro */
.voice-card .btn{ margin-top:auto; align-self:flex-start; }
.voice-card .voice-specs + .btn{ margin-top:22px; }
.voices-note{
text-align:center; max-width:56rem; margin:26px auto 0;
font-size:15px; line-height:1.65; color:var(--ink-soft);
}
.voices-note a{ color:var(--gold-deep); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* en pantalla angosta, una frase por renglón: tres renglones parejos */
.voices-note .vn-linea{ display:block; }
/* Para que sean tres y no cinco, cada frase tiene que entrar entera. La más
larga -"Nadie queda afuera por no saber su registro."- mide 318px a 15px, y
con el gutter de 24px del .wrap no entra por debajo de 366px de ancho. Acá
el bloque se estira a un gutter de 16px y, si aún así no alcanza, el cuerpo
baja lo justo para que ninguna se parta: el factor sale de 15/322, con 322
en vez de 318 como margen por si la fuente cae distinta. */
@media(max-width:559px){
.voices-note{
margin-inline:-8px;
font-size:min(15px, calc((100vw - 32px) * 0.0465));
}
}
/* desde acá las dos primeras entran juntas y el bloque vuelve a dos renglones */
@media(min-width:560px){
.voices-note .vn-linea:nth-child(1),
.voices-note .vn-linea:nth-child(2){ display:inline; }
}
/* --- CTA final + formulario ---------------------------------------------- */
.cta{ text-align:center; position:relative; z-index:2; }
.cta h2{
font-size:clamp(2.1rem,6vw,3.7rem);
font-weight:900; letter-spacing:-.045em; line-height:.94; margin:0;
}
.cta h2 .accent{ display:block; color:var(--gold); }
.cta form{
display:flex; flex-direction:column; gap:12px;
max-width:44rem; margin:36px auto 0;
}
/* En una sola fila usamos grid, no flex: con flex los dos campos terminaban de
distinto ancho aun teniendo el mismo flex-grow, y "Tu voz (opcional)" se
cortaba a la mitad. Con 1fr 1fr las dos columnas miden exactamente igual y
el desplegable queda del mismo tamaño que el campo de nombre. */
@media(min-width:640px){
.cta form{ display:grid; grid-template-columns:1fr 1fr auto; align-items:stretch; }
}
.cta input,
.cta select{
flex:1; width:100%; min-width:0;
background:rgba(250,245,233,.06);
border:2px solid rgba(250,245,233,.2);
border-radius:14px;
padding:14px 16px;
color:var(--cream);
font-family:var(--font-mono); font-size:14px;
transition:border-color .3s ease, background-color .3s ease;
}
.cta input::placeholder{ color:rgba(250,245,233,.4); }
.cta input:focus,
.cta select:focus{ outline:none; border-color:var(--gold); background:rgba(250,245,233,.1); }
.cta form .btn{ border-radius:14px; justify-content:center; white-space:nowrap; }
/* --- el desplegable de la voz --------------------------------------------- */
/* El wrapper existe para poder poner la flecha encima: appearance:none borra
la nativa, y no hay forma de dibujarla dentro del propio