nativo: abre y cierra sin JavaScript. El JS solo agrega cerrar
al tocar afuera o con Escape, y recordar la eleccion. */
.nav-right { display: flex; align-items: center; gap: .85rem; }
.lang-menu { position: relative; font-size: .86rem; }
.lang-menu summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
padding: .42rem .62rem; border: 1px solid var(--line-2); border-radius: 999px;
color: var(--ink-2); font-weight: 600; letter-spacing: .04em; user-select: none;
transition: border-color .18s ease, color .18s ease;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--ink); border-color: var(--ink-3); }
.lang-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-menu summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang-menu ul {
position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; margin: 0; padding: .35rem;
list-style: none; min-width: 19rem; background: var(--paper-2);
/* 17 idiomas: dos columnas, y scroll propio si la pantalla es baja */
columns: 2; column-gap: .15rem; max-height: 76vh; overflow-y: auto;
border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md);
}
.lang-menu li { margin: 0; break-inside: avoid; }
.lang-menu a {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .55rem .7rem; border-radius: 9px; color: var(--ink-2); text-decoration: none;
}
.lang-menu a:hover { background: var(--paper); color: var(--ink); }
.lang-menu a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang-menu a[aria-current="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* ---------- tipografia por idioma ----------
MEDIDO el 2026-09-19: Site Sans y Site Serif cubren ingles, espanol,
portugues, aleman, frances, italiano, holandes y los nordicos. NO tienen las
letras de polaco, checo, hungaro ni rumano (l con barra, ogoneks, carones,
s y t con coma), ni ningun caracter japones o coreano.
Europa del Este: si se deja la fuente de marca, las letras que faltan caen a
la de respaldo EN MEDIO de cada palabra y el texto queda con dos fuentes
mezcladas. Por eso ahi se usa la fuente del sistema para TODO el texto. El
dia que se sumen las variantes extendidas de las fuentes (es una descarga:
la autoriza el owner), borrar este bloque y listo.
Japones y coreano: la fuente de marca va PRIMERO para que las letras latinas
(Modennial, EN-US, los precios) sigan viendose como en el resto del sitio, y
lo demas cae a la fuente del sistema del visitante: cero descarga (una
tipografia japonesa pesa 5-15 MB) y se ve nativo. */
html:lang(pl), html:lang(cs), html:lang(hu), html:lang(ro),
html:lang(sk), html:lang(hr), html:lang(lt), html:lang(lv), html:lang(et),
html:lang(tr), /* g y s turcas, i con y sin punto */
html:lang(ru), html:lang(uk), html:lang(bg) { /* los tres ultimos: cirilico */
--serif: ui-serif, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--mono: ui-monospace, Consolas, "Courier New", monospace;
}
/* el logotipo es latino puro: conserva la tipografia de la marca */
html:lang(pl) .logo, html:lang(cs) .logo, html:lang(hu) .logo, html:lang(ro) .logo,
html:lang(sk) .logo, html:lang(hr) .logo, html:lang(lt) .logo, html:lang(lv) .logo,
html:lang(et) .logo, html:lang(ru) .logo, html:lang(uk) .logo, html:lang(bg) .logo,
html:lang(tr) .logo {
font-family: "Site Serif", ui-serif, Georgia, serif;
}
html:lang(ja) {
--serif: "Site Serif", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
--sans: "Site Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
--mono: "Site Mono", "Hiragino Sans", "Yu Gothic UI", Meiryo, monospace;
}
html:lang(ko) {
--serif: "Site Serif", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
--sans: "Site Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
--mono: "Site Mono", "Apple SD Gothic Neo", "Malgun Gothic", monospace;
}
/* el interlineado y el tracking apretados de los titulos estan pensados para
letras latinas: con ideogramas se enciman. Tampoco existe la cursiva. */
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3,
html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3 { letter-spacing: 0; line-height: 1.32; }
html:lang(ja) em, html:lang(ja) i, html:lang(ko) em, html:lang(ko) i { font-style: normal; }
html:lang(ja) body { line-break: strict; }
html:lang(ko) body { word-break: keep-all; } /* el coreano corta por palabra, no por silaba */
html:lang(ja) h1, html:lang(ko) h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
/* chino: :lang(zh) alcanza a las dos variantes; cada una pide SU fuente, porque
simplificado y tradicional dibujan distinto muchos de los mismos ideogramas */
html:lang(zh) {
--serif: "Site Serif", "Songti SC", "SimSun", "Noto Serif SC", serif;
--sans: "Site Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
--mono: "Site Mono", "PingFang SC", "Microsoft YaHei", monospace;
}
html:lang(zh-Hant) {
--serif: "Site Serif", "Songti TC", "PMingLiU", "Noto Serif TC", serif;
--sans: "Site Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
--mono: "Site Mono", "PingFang TC", "Microsoft JhengHei", monospace;
}
html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3 { letter-spacing: 0; line-height: 1.32; }
html:lang(zh) em, html:lang(zh) i { font-style: normal; }
html:lang(zh) body { line-break: strict; }
html:lang(zh) h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
/* ---------- arabe: derecha a izquierda ----------
build.py pone dir="rtl" en el . Con eso el navegador ya invierte el
orden de flex y grid, la alineacion del texto y el sentido de las listas.
Aca va solo lo que NO se invierte solo. PENDIENTE (decision del owner del
2026-09-19: "suma arabe, despues vemos como lo arreglamos tecnicamente"):
repasar a mano margenes y posiciones escritos como left/right.
- letter-spacing en 0 SIEMPRE: el arabe es cursivo y el tracking le corta
las uniones entre letras (las palabras quedan rotas).
- sin cursiva ni mayusculas: no existen.
- el player, las ondas y los tiempos siguen de izquierda a derecha: una
linea de tiempo de audio se lee asi tambien en arabe. */
html:lang(ar) {
--serif: "Site Serif", "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", serif;
--sans: "Site Sans", "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", sans-serif;
--mono: "Site Mono", "Segoe UI", Tahoma, "Geeza Pro", monospace;
}
html:lang(ar) * { letter-spacing: 0 !important; }
html:lang(ar) em, html:lang(ar) i { font-style: normal; }
html:lang(ar) .kicker, html:lang(ar) .demo-tag { text-transform: none; }
html:lang(ar) h1, html:lang(ar) h2, html:lang(ar) h3 { line-height: 1.45; }
html:lang(ar) body { line-height: 1.85; }
html:lang(ar) .float-player, html:lang(ar) .mini-player, html:lang(ar) .marquee,
html:lang(ar) .scorecard, html:lang(ar) .logo { direction: ltr; }
html:lang(ar) .lang-menu ul { right: auto; left: 0; }
/* ---------- hero ---------- */
.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.hero::before {
content: ""; position: absolute; inset: -20% 0 auto 0; height: 80vh; z-index: -1; pointer-events: none;
background:
radial-gradient(56% 46% at 82% 18%, rgba(232,93,61,.14), transparent 70%),
radial-gradient(50% 40% at 8% 0%, rgba(198,160,120,.16), transparent 72%);
}
.hero-grid { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.02fr .98fr; } }
.hero h1 em { font-style: normal; color: var(--accent-dk); }
.hero-photo { aspect-ratio: 4 / 3.4; box-shadow: var(--shadow-lg); }
@media (min-width: 1000px) { .hero-photo { aspect-ratio: 4 / 4.1; } }
/* el player creció (doble onda + compare): subir el ARTE para que los
auriculares queden en la franja visible arriba del bloque blanco.
El translate va en el svg interno porque .art tiene el ken-burns animado. */
.hero-photo .art svg { transform: translateY(-16%); }
/* player flotante sobre la foto */
.float-player {
position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
width: calc(100% - 2rem); z-index: 5;
background: rgba(255,255,255,.92); backdrop-filter: blur(18px) saturate(1.5);
border: 1px solid rgba(255,255,255,.6); border-radius: 14px;
padding: .9rem 1rem; box-shadow: var(--shadow-md); color: #14161a;
}
.player-top { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.player-title { font-size: .7rem; color: #767c85; font-family: var(--mono); letter-spacing: .08em; }
.langs { display: flex; gap: .3rem; flex-wrap: wrap; }
/* Con 5 idiomas (EN·ES·PT·DE·FR) el header del player deja de entrar en
pantallas angostas: a 320px los botones piden 212px y sólo hay 217 contando
el título, y DE/FR se salían del player. Bajo 400px el título toma su propia
línea y los botones quedan abajo, con su ancho completo. Verificado a 320,
360 y 375. Si algún día se agrega un 6º idioma, el wrap ya lo absorbe. */
@media (max-width: 560px) {
.player-top { flex-wrap: wrap; gap: .45rem; }
.player-title { width: 100%; }
}
.lang {
border: 1px solid rgba(20,22,26,.18); background: transparent; color: #4a5058;
border-radius: 999px; padding: .26rem .68rem; font-size: .73rem; font-weight: 700;
cursor: pointer; font-family: var(--mono); letter-spacing: .05em; transition: all .18s ease;
}
.lang:hover { border-color: #14161a; color: #14161a; }
.lang[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.player-body { display: flex; align-items: center; gap: .8rem; }
.play {
width: 42px; height: 42px; flex: none; border-radius: 50%;
border: 1px solid rgba(20,22,26,.16); background: #14161a; color: #fff;
display: grid; place-items: center; cursor: pointer; transition: transform .18s ease, background .18s ease;
}
.play:hover { transform: scale(1.07); background: var(--accent); border-color: var(--accent); }
.wave { flex: 1; height: 40px; }
.wave rect { fill: #9aa0a8; transition: fill .3s ease; }
.wave.playing rect { fill: var(--accent); animation: pulse 1.05s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.time { font-family: var(--mono); font-size: .74rem; color: #767c85; flex: none; }
.player-note { margin: .7rem 0 0; font-size: .71rem; color: #767c85; line-height: 1.45; border-top: 1px solid rgba(20,22,26,.09); padding-top: .6rem; }
.player-note b { color: var(--accent-dk); }
/* ---------- hero: doble onda alineada + compare mode ---------- */
.wave-rows { flex: 1; min-width: 0; display: grid; gap: .4rem; }
.wave-row { display: grid; grid-template-columns: minmax(92px, auto) 1fr; align-items: center; gap: .55rem; min-width: 0; }
.wave-lab {
font-family: var(--mono); font-size: .58rem; letter-spacing: .07em;
text-transform: uppercase; color: #767c85; white-space: nowrap;
}
.float-player .wave { height: 22px; }
.float-player .wave-dub rect { fill: #c9836e; }
.float-player .wave-dub.playing rect { fill: var(--accent); }
.float-player.mono .wave-row-dub { display: none; }
.player-foot { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; flex-wrap: wrap; }
.cmp {
border: 1px solid rgba(20,22,26,.18); background: transparent; color: #14161a;
font-family: var(--mono); font-size: .62rem; letter-spacing: .05em;
padding: .34rem .7rem; border-radius: 999px; cursor: pointer;
transition: all .18s ease; white-space: nowrap;
}
.cmp:hover:not(:disabled) { border-color: #14161a; }
.cmp[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.cmp:disabled { opacity: .38; cursor: default; }
.cmp-hint { font-size: .8rem; color: #4d525b; line-height: 1.45; }
@media (max-width: 560px) {
.wave-row { grid-template-columns: 1fr; gap: .15rem; }
.float-player .wave { height: 18px; }
}
/* ---------- marquee de idiomas ---------- */
.marquee { overflow: hidden; padding-block: 1.1rem; margin-bottom: clamp(1.2rem, 2.5vw, 2rem); border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee span {
font-family: var(--serif); font-size: 1.12rem; color: var(--ink-3);
display: flex; align-items: center; gap: 2.6rem; white-space: nowrap;
}
.marquee span::after { content: "·"; color: var(--accent); }
/* ---------- trust bar ---------- */
.trust { display: grid; gap: 1.75rem 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.stat .n { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1; display: block; margin-bottom: .45rem; letter-spacing: -.03em; }
.stat .l { font-size: .85rem; color: var(--ink-3); line-height: 1.45; display: block; }
.badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.5rem; }
.badge {
display: inline-flex; align-items: center; gap: .5rem;
border: 1px solid var(--line); background: var(--paper-2); border-radius: 999px;
padding: .45rem .95rem; font-size: .8rem; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.badge svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
/* ---------- cards ---------- */
.cards { display: grid; gap: 1.15rem; }
@media (min-width: 820px) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } .cards.c2 { grid-template-columns: repeat(2, 1fr); } }
.card {
background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
padding: 1.6rem; box-shadow: var(--shadow-sm);
transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.card .num { font-family: var(--mono); font-size: .74rem; color: var(--accent-dk); letter-spacing: .16em; display: block; margin-bottom: .9rem; }
.card .step-photo { aspect-ratio: 16/9; margin: -1.6rem -1.6rem 1.4rem; border-radius: var(--r) var(--r) 0 0; }
.two-col { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 940px) { .two-col { grid-template-columns: 1fr 1fr; align-items: center; } }
.vs { display: grid; gap: 1.15rem; }
@media (min-width: 800px) { .vs { grid-template-columns: repeat(3, 1fr); } }
.vs-item { padding: 1.5rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper-2); box-shadow: var(--shadow-sm); }
.vs-item.us { border-color: rgba(232,93,61,.4); background: linear-gradient(180deg, rgba(232,93,61,.07), var(--paper-2) 60%); box-shadow: var(--shadow-md); transform: translateY(-6px); }
.vs-item h3 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }
.vs-item.us h3 { color: var(--accent-dk); }
.vs-item p { font-size: .96rem; color: var(--ink-2); margin: 0; }
/* ---------- demos ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.75rem; }
.chip {
border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
border-radius: 999px; padding: .45rem 1.05rem; font-size: .85rem; cursor: pointer; font-family: inherit;
transition: all .18s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.demo-grid { display: grid; gap: 1.15rem; }
@media (min-width: 720px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } }
.demo {
border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper-2);
transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.demo:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.demo .photo { border-radius: 0; aspect-ratio: 16/9; }
.demo-meta { padding: 1.15rem 1.25rem 1.3rem; }
.demo-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-dk); }
.demo h3 { font-size: 1.06rem; margin: .4rem 0 .85rem; }
.ab { display: flex; gap: .4rem; margin-bottom: .85rem; }
.ab button {
flex: 1; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
padding: .42rem; border-radius: 8px; font-size: .78rem; cursor: pointer; font-family: var(--mono); transition: all .18s ease;
}
.ab button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.mini-player { display: flex; align-items: center; gap: .6rem; }
.mini-player .play { width: 34px; height: 34px; }
.mini-player .wave { height: 30px; }
.dark .mini-player .play { background: var(--paper-3); color: var(--ink); border-color: var(--line-2); }
.dark .wave rect { fill: #656c78; }
/* ---------- scorecard ---------- */
.scorecard { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.sc-head { padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sc-head .t { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.sc-head .v { font-family: var(--serif); font-size: 1.7rem; }
.sc-rows { padding: .6rem 1.35rem 1.3rem; }
.sc-row { display: grid; grid-template-columns: 1fr 100px 46px; align-items: center; gap: .8rem; padding: .62rem 0; border-bottom: 1px dashed var(--line); font-size: .89rem; }
.sc-row:last-child { border-bottom: 0; }
.meter { height: 6px; border-radius: 3px; background: rgba(20,22,26,.09); overflow: hidden; }
.dark .meter { background: rgba(255,255,255,.12); }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width 1.1s cubic-bezier(.2,.8,.3,1); }
.sc-row .sv { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); text-align: right; }
.sc-foot { padding: .95rem 1.35rem; border-top: 1px solid var(--line); font-size: .77rem; color: var(--ink-3); background: var(--paper-3); }
.dialects { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.dialect { border: 1px solid var(--line-2); border-radius: 9px; padding: .48rem .85rem; font-size: .83rem; color: var(--ink-2); background: var(--paper-2); }
.dialect b { color: var(--ink); font-weight: 600; }
.dialect.on { border-color: rgba(232,93,61,.5); background: var(--accent-sf); color: var(--accent-dk); }
.dialect.on b { color: var(--accent-dk); }
.qa-photo { aspect-ratio: 3/4; margin-bottom: 1.5rem; box-shadow: var(--shadow-md); }
@media (min-width: 940px) { .qa-photo { aspect-ratio: 4/5; margin-bottom: 0; } }
/* ---------- tiers ---------- */
.tiers { display: grid; gap: 1.15rem; align-items: start; }
@media (min-width: 940px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
padding: 1.75rem; position: relative; box-shadow: var(--shadow-sm);
transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tier.feat { border-color: rgba(232,93,61,.45); box-shadow: var(--shadow-md); }
@media (min-width: 940px) { .tier.feat { transform: scale(1.035); } .tier.feat:hover { transform: scale(1.035) translateY(-5px); } }
.tier .flag {
position: absolute; top: -12px; left: 1.75rem;
background: var(--accent); color: #fff; font-size: .67rem; font-weight: 700;
letter-spacing: .11em; text-transform: uppercase; padding: .28rem .75rem; border-radius: 999px;
box-shadow: 0 4px 12px -4px rgba(232,93,61,.6);
}
.tier .who { font-size: .88rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.tier ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .65rem; }
.tier li { display: flex; gap: .6rem; font-size: .93rem; color: var(--ink-2); line-height: 1.45; }
.tier li svg { width: 15px; height: 15px; flex: none; margin-top: .3rem; color: var(--accent); }
.price { border-top: 1px solid var(--line); padding-top: 1.2rem; margin-bottom: 1.2rem; }
.price .amt { font-family: var(--serif); font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; }
.price .unit { font-size: .82rem; color: var(--ink-3); display: block; margin-top: .4rem; }
.tier .btn { width: 100%; justify-content: center; }
.includes { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem; background: var(--paper-3); }
.inc-grid { display: grid; gap: .8rem; margin-top: 1.1rem; }
@media (min-width: 720px) { .inc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .inc-grid { grid-template-columns: repeat(4, 1fr); } }
.inc { font-size: .89rem; color: var(--ink-2); display: flex; gap: .55rem; }
.inc svg { width: 15px; height: 15px; flex: none; margin-top: .28rem; color: var(--accent); }
.addons { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.75rem; }
.addon { border: 1px solid var(--line); border-radius: 999px; padding: .48rem 1rem; font-size: .85rem; color: var(--ink-2); background: var(--paper-2); }
.addon b { color: var(--ink); font-weight: 600; }
.note { margin-top: 1.75rem; border-left: 2px solid var(--accent); padding: .4rem 0 .4rem 1.15rem; color: var(--ink-2); font-size: .97rem; }
/* ---------- tablas ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .91rem; }
th, td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: var(--paper-3); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { color: var(--ink-3); font-weight: 500; font-size: .88rem; }
td { color: var(--ink-2); }
.col-us { background: rgba(232,93,61,.06); color: var(--ink); }
thead .col-us { color: var(--accent-dk); background: rgba(232,93,61,.11); }
/* ---------- tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.9rem; }
.tab {
border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
padding: .6rem 1.15rem; border-radius: 999px; font-size: .89rem; cursor: pointer; font-family: inherit;
transition: all .18s ease;
}
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.panel { display: none; }
.panel.on { display: block; animation: fadeUp .5s cubic-bezier(.16,.8,.3,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel-grid { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 880px) { .panel-grid { grid-template-columns: 1fr .9fr; } }
.case-photo { aspect-ratio: 16/10; box-shadow: var(--shadow-md); }
/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 1.3rem 2.4rem 1.3rem 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(1.08rem, 2.1vw, 1.3rem); position: relative; transition: color .2s ease; }
.faq summary:hover { color: var(--accent-dk); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.65rem; width: 13px; height: 13px; background: linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat, linear-gradient(var(--accent),var(--accent)) center/1.5px 100% no-repeat; transition: transform .28s cubic-bezier(.2,.8,.3,1); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .a { padding: 0 0 1.5rem; color: var(--ink-2); max-width: 72ch; }
.faq .a p:last-child { margin-bottom: 0; }
/* ---------- calculadora ---------- */
.calc { display: grid; gap: 1.25rem; }
@media (min-width: 940px) { .calc { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.calc-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.75rem; box-shadow: var(--shadow-sm); }
/* Las reglas .field de la calculadora se eliminaron el 2026-09-17 junto con el
bloque (la calculadora se saco el 09-07 y su CSS quedo huerfano). El
`margin-bottom: 1.6rem` desalineaba el formulario de contacto: dentro de cada
.field-row el segundo campo es :last-child, se quedaba sin ese margen y el
grid lo estiraba 1.6rem de mas, que repartia entre label y control -> los
campos de la derecha bajaban ~13px. Lo que el formulario necesitaba de ellas
vive ahora en su propio bloque, mas abajo. */
input[type="range"] { width: 100%; accent-color: var(--accent); height: 24px; cursor: pointer; }
.seg { display: flex; gap: .45rem; flex-wrap: wrap; }
.seg button {
flex: 1 1 auto; min-width: 96px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
padding: .65rem .7rem; border-radius: 10px; cursor: pointer; font-size: .86rem; font-family: inherit; transition: all .18s ease;
}
.seg button:hover { border-color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.result { background: var(--paper-2); border: 1px solid rgba(232,93,61,.35); border-radius: var(--r); padding: 1.75rem; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.result::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--accent), #f0a072); }
.result .est { font-family: var(--serif); font-size: clamp(2.1rem, 5.5vw, 3rem); line-height: 1.05; margin: .35rem 0 .25rem; letter-spacing: -.025em; }
.result .sub { font-size: .86rem; color: var(--ink-2); }
.result dl { display: grid; gap: .55rem; margin: 1.35rem 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .88rem; }
.result dl > div { display: flex; justify-content: space-between; gap: 1rem; }
.result dt { color: var(--ink-3); }
.result dd { margin: 0; font-family: var(--mono); text-align: right; }
.disclaimer { font-size: .77rem; color: var(--ink-3); margin-top: 1rem; line-height: 1.5; }
/* ---------- CTA final ---------- */
.final { overflow: hidden; }
.final::before {
content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
background: radial-gradient(60% 60% at 22% 30%, rgba(232,93,61,.30), transparent 70%),
radial-gradient(50% 50% at 82% 70%, rgba(120,90,220,.16), transparent 70%);
}
.final .wrap { position: relative; z-index: 1; }
.final-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .final-grid { grid-template-columns: 1fr .85fr; } }
.pilot-card { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); padding: clamp(1.6rem, 4vw, 2.4rem); }
.pilot-card .amt { font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.pilot-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; font-size: .93rem; color: var(--ink-2); }
.pilot-list li { display: flex; gap: .65rem; }
.pilot-list svg { width: 15px; height: 15px; flex: none; margin-top: .3rem; color: var(--accent-dk); }
.final-photo { aspect-ratio: 4/3; box-shadow: var(--shadow-lg); }
/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); background: var(--paper-3); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot-grid { display: grid; gap: 2.25rem; }
@media (min-width: 840px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot-grid h4 { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 1rem; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.foot-grid a { color: var(--ink-2); text-decoration: none; transition: color .18s ease; }
.foot-grid a:hover { color: var(--accent-dk); }
.lang-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.lang-pill { font-size: .78rem; border: 1px solid var(--line); border-radius: 7px; padding: .32rem .65rem; color: var(--ink-3); background: var(--paper-2); }
.lang-pill.rev { border-color: rgba(232,93,61,.4); color: var(--accent-dk); background: var(--accent-sf); }
.legal { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; }
/* ==========================================================================
SERVICIOS AMPLIADOS dentro de #services — 2026-08-14
Ejecuta plan/instructivo-servicios-web-v1.md. Va al final y no modifica
ninguna regla existente: sólo usa variables ya definidas en :root.
========================================================================== */
/* ---------- Standalone QA (bloque A de #services) ---------- */
.qa-solo {
margin-top: 1.75rem; border: 1px solid rgba(232,93,61,.35); border-radius: var(--r);
background: var(--paper-2); box-shadow: var(--shadow-sm);
padding: clamp(1.5rem, 3.5vw, 2.25rem);
display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
}
@media (min-width: 940px) { .qa-solo { grid-template-columns: 1.55fr 1fr; } }
/* El titular del bloque crece por pedido del owner (2026-08-26): en h3 base
competia con el parrafo y la jerarquia quedaba debil. El kicker NO se toca:
es etiqueta de sistema, mismo tamano en toda la pagina. */
.qa-solo h3 { margin-bottom: .9rem; font-size: clamp(1.45rem, 2.8vw, 1.95rem); }
.qa-solo-list { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .65rem; }
.qa-solo-list li { display: flex; gap: .6rem; font-size: .93rem; color: var(--ink-2); line-height: 1.45; }
.qa-solo-list li svg { width: 15px; height: 15px; flex: none; margin-top: .3rem; color: var(--accent); }
.qa-solo-side .price { border-top: 0; padding-top: 0; }
.qa-solo-side .btn { width: 100%; justify-content: center; }
.qa-solo-honest {
margin: 1.2rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--ink-3);
border-left: 2px solid var(--accent); padding-left: .95rem;
}
/* ---------- Beyond the audio (bloque B de #services) ---------- */
.beyond { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.beyond-head { max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.1rem); }
.beyond-grid { display: grid; gap: 1.15rem; }
@media (min-width: 720px) { .beyond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .beyond-grid { grid-template-columns: repeat(4, 1fr); } }
.beyond-item {
border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
padding: 1.4rem; display: flex; flex-direction: column;
transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.beyond-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.beyond-item h4 { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; line-height: 1.2; margin: 0 0 .7rem; letter-spacing: -.015em; }
.beyond-item p { font-size: .89rem; color: var(--ink-2); line-height: 1.5; margin: 0 0 1.1rem; }
.beyond-price { margin-top: auto; font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.beyond-close {
margin: 1.6rem 0 0; font-size: 1.02rem; color: var(--ink);
border-left: 2px solid var(--accent); padding: .35rem 0 .35rem 1.15rem;
}
/* ---------- aviso de mock ---------- */
.mockbar {
background: var(--ink); color: var(--paper); font-size: .78rem; font-weight: 500;
text-align: center; padding: .55rem var(--pad); line-height: 1.45;
}
.mockbar b { color: #ff9575; }
/* Nombre de marca: "Modennial" — CERRADO por el owner 2026-08-10 (FICHA.md),
sin calificador. Tipografía Montserrat — decidida 2026-08-13. Se muestra
al 150% del texto que la rodea, en TODAS sus apariciones (logo nav, "the
gap", header del comparador, footer). Es relativo (em) así cada contexto
escala desde su propio tamaño; para ajustar el salto, tocar --brand-scale.
VECTORIZADO 2026-08-14: ya no depende de tener Montserrat instalada. El
logotipo es `assets/brand-modennial.svg` (contornos reales de Montserrat
Regular, shaping con HarfBuzz -> el kerning es el mismo que dibujaba el
navegador acá). Se pinta como mascara con `currentColor`, asi hereda el
color de cada contexto (claro, oscuro, coral) igual que antes.
El texto "Modennial" SIGUE en el HTML: se corre fuera de la caja con
text-indent, no se borra -> lectores de pantalla, SEO y copiar/pegar
intactos. Si un navegador no soporta mask, el @supports de abajo deja el
texto visible: nunca queda un hueco.
Medidas del SVG: caja de tinta 5174 x 767 unidades sobre upem 1000.
-> alto = .767em del font-size ; ancho = alto * 6.7458
La baseline cae 8/1000 em por debajo del borde inferior (overshoot de la
"o"), de ahi el vertical-align. */
.brand-name {
white-space: nowrap;
font-size: calc(1em * var(--brand-scale, 1.5));
letter-spacing: -.008em;
line-height: 1;
}
@supports (mask-image: url(#a)) or (-webkit-mask-image: url(#a)) {
.brand-name {
display: inline-block;
height: .767em;
width: 5.1740em; /* .767em * 6.7458 */
vertical-align: -.008em;
background-color: currentColor;
-webkit-mask: url(brand-modennial.svg) no-repeat center / 100% 100%;
mask: url(brand-modennial.svg) no-repeat center / 100% 100%;
text-indent: -200em;
overflow: hidden;
letter-spacing: normal;
}
}
/* donde la marca ES el título del bloque, que el contenedor la acompañe */
.vs-item.us h3 { line-height: 1.5; }
/* ---------- audio real del hero (2026-08-21) ---------- */
/* Un idioma sin pista no se disfraza de funcional: se atenúa y avisa al tocarlo. */
.lang.sin-audio { opacity: .45; }
.lang.sin-audio:hover { border-color: rgba(20,22,26,.18); color: #4a5058; }
.audio-aviso {
margin: .55rem 0 0; font-family: var(--mono); font-size: .72rem;
letter-spacing: .04em; color: var(--accent-dk);
}
/* ==========================================================================
ACENTOS COMO VALOR PRIMARIO + LIP-SYNC / VOICEOVER AL FRENTE — 2026-08-26
Pedido del owner: la variedad de acentos se vende como diferenciador, el
lip-sync y la produccion completa de voiceover suben de add-on a bloque
propio. Solo clases nuevas; no se toca ninguna regla existente.
========================================================================== */
/* --- pestañas del explorador de acentos (#qa). Clase PROPIA a proposito:
.tab ya esta cableada globalmente por app.js para los casos de uso, y
reutilizarla cruzaria los dos grupos de pestañas. --- */
.acc-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.6rem 0 1.2rem; }
.acc-tab {
border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
border-radius: 999px; padding: .45rem 1.05rem; font-size: .85rem; cursor: pointer;
font-family: inherit; transition: all .18s ease;
}
.acc-tab:hover { border-color: var(--ink); color: var(--ink); }
.acc-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.acc-sub {
font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-3); margin: 1.1rem 0 .55rem;
}
.acc-panel > .dialects { margin-top: .4rem; }
/* --- lip-sync + voiceover original (#services) --- */
.feat-duo {
margin-top: 1.75rem; display: grid; gap: 1.15rem;
}
@media (min-width: 880px) { .feat-duo { grid-template-columns: 1fr 1fr; } }
.feat {
border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper-2);
box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3.5vw, 2.1rem);
display: flex; flex-direction: column;
}
.feat h3 { margin-bottom: .8rem; }
/* :not([class]) NO es cosmetico (2026-08-27): `.feat > p` tiene especificidad
0-1-1 y le ganaba a .kicker / .feat-price / .feat-addon / .feat-honest, todas
0-1-0 -> las cuatro se renderizaban a .93rem y el bloque salia tipograficamente
plano desde que se creo (26-08). Acotar la regla a parrafos SIN clase devuelve
la jerarquia que el diseno ya tenia escrita. Si se agrega un con clase aca
dentro, su font-size ahora manda. */
.feat > p:not([class]) { font-size: .93rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 1rem; }
.feat-price {
margin-top: auto; font-family: var(--serif); font-size: 1.65rem; letter-spacing: -.02em;
color: var(--ink);
}
.feat-price span { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-3); margin-left: .35rem; }
/* --- Add-on de lectura expresiva (2026-08-27, instructivo servicio-expresivo-v1).
NO reusa .feat-price: a 1.65rem serif competiria con el precio de entrada y
un opcional no puede pesar lo mismo que el precio base. Escala intermedia,
cifra en coral para que se lea como add-on y no como segundo tier. --- */
.feat-addon { margin: .5rem 0 0; font-size: .92rem; color: var(--ink-2); }
.feat-addon b { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; color: var(--accent-dk); }
.feat-addon span { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--ink-3); margin-left: .3rem; }
/* --- Dos niveles de voiceover (2026-09-07). Filas, no dos .feat-price: dos precios
a 1.65rem competirian entre si y el visitante no sabria cual es el producto.
El activo (.on) lleva el coral; Express queda legible pero secundario. --- */
.vo-tiers { margin-top: auto; display: flex; flex-direction: column; gap: .55rem; }
.vo-tier { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
padding: .6rem .75rem; border: 1px solid var(--line-2); border-radius: 9px; }
.vo-tier > b { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.vo-tier .vo-num { font-family: var(--serif); font-size: 1.45rem; letter-spacing: -.02em; color: var(--ink); }
.vo-tier .vo-note { font-size: .78rem; line-height: 1.45; color: var(--ink-3); flex: 1 1 100%; }
.vo-tier.on { border-color: rgba(232,93,61,.5); background: var(--accent-sf); }
.vo-tier.on > b, .vo-tier.on .vo-num { color: var(--accent-dk); }
.feat-honest {
margin: .9rem 0 0; font-size: .85rem; line-height: 1.55; color: var(--ink-3);
border-left: 2px solid var(--accent); padding-left: .95rem;
}
/* --- tile catch-all del explorador de acentos (2026-08-26): la promesa
test-first hecha CTA — borde punteado, coral, clickea al piloto pago.
Es , no boton: la accion real es llegar al formulario del piloto. --- */
.dialect.any {
border-style: dashed; border-color: rgba(232,93,61,.55);
color: var(--accent-dk); background: transparent;
text-decoration: none; transition: all .18s ease;
}
.dialect.any:hover { background: var(--accent-sf); border-color: var(--accent); transform: translateY(-1px); }
/* ==========================================================================
BANDA VOICE CLONING — 2026-08-26 (entre Demos y Native QA)
Solo clases nuevas; usa variables existentes. Centrada, serif grande:
destaca saliendo del bloque oscuro de Demos sin sumar un tercer dark.
========================================================================== */
.clone-wrap { max-width: 880px; text-align: center; }
.clone-wrap .kicker { justify-content: center; }
.clone-wrap .lede { margin-inline: auto; }
.clone-points {
display: grid; gap: 1.15rem; margin-top: clamp(1.8rem, 4vw, 2.6rem);
text-align: left;
}
@media (min-width: 760px) { .clone-points { grid-template-columns: repeat(3, 1fr); } }
.clone-point {
border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2);
padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm);
}
.clone-point b { display: block; font-weight: 600; margin-bottom: .45rem; }
.clone-point p { margin: 0; font-size: .89rem; color: var(--ink-2); line-height: 1.5; }
.clone-honest {
margin: clamp(1.6rem, 3.5vw, 2.2rem) auto 0; max-width: 62ch;
font-size: .92rem; line-height: 1.6; color: var(--ink-2);
border-left: 2px solid var(--accent); padding-left: 1rem; text-align: left;
}
.clone-cta { justify-content: center; margin-top: 1.8rem; }
/* --- pill catch-all del footer (2026-08-26, "todos los idiomas"): mismo
lenguaje visual que .dialect.any del explorador de acentos. --- */
.lang-pill.any { border-style: dashed; border-color: rgba(232,93,61,.5); color: var(--accent-dk); }
/* --- naming de tiers cerrado (owner 2026-08-26): Express · Select · Signature.
El nombre manda; el descriptor tecnico queda como subtitulo chico. --- */
.tier h3 .tier-sub {
display: block; font-family: var(--mono); font-size: .66rem; font-weight: 400;
letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
margin-top: .45rem;
}
/* --- trust bar comprimida a FRANJA (2026-08-26): sin las stats [N], la altura
de sección completa era real estate desperdiciado. Al volver las métricas
reales, quitar esta clase del y recupera su tamaño. --- */
.trust-strip { padding-block: clamp(2.1rem, 4vw, 2.9rem); }
.trust-strip h2 { margin-bottom: 1.1rem; }
.trust-strip .badges { margin-top: 0; }
.trust-strip .disclaimer { margin-top: .9rem; }
/* --- respiro post-franja (2026-08-26): la sección siguiente a la franja de
confianza conserva el padding de sección completa (hasta 7.5rem) y el
hueco se leía enorme. Solo se recorta EL TOP de esa sección vecina; el
ritmo vertical del resto de la página no se toca. --- */
.trust-strip + section { padding-top: clamp(3.5rem, 7.5vw, 6rem); }
/* --- unidades de los precios de Beyond (2026-08-26): la cifra manda, la
unidad acompana en chico. Cada servicio cotiza por su driver de costo
real (minuto / video / palabra) — decision del owner. --- */
.beyond-unit { font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; }
/* ===================================================================
MOBILE — tres correcciones sobre el sitio ya publicado (2026-09-09)
Reportadas por el owner en un Android real y reproducidas midiendo el
DOM a 360 y 412 px antes de tocar nada.
=================================================================== */
/* --- 1. El player se cortaba: la ventana de samples quedaba tajeada -----
`.float-player` es absolute con `bottom`, dentro de `.photo`, que tiene
`overflow: hidden` y una `aspect-ratio` fija. Con 5 idiomas + doble onda +
compare + la nota, el player mide MAS que la foto y se salia por ARRIBA:
medido 320px de player contra 275px de foto a 360px de ancho -> 63px
recortados, justo el header con HERO_CLIP y los botones de idioma.
En mobile el player deja de flotar y pasa al flujo: la foto crece con su
contenido y ya no puede cortarlo, sin importar cuanto crezca el texto.
El `::before` reserva la franja de arte visible arriba (los auriculares);
`.art` es absolute inset:0, asi que acompana la altura nueva sola. */
@media (max-width: 760px) {
.hero-photo { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-end; }
/* El arte pasa al FLUJO con su propia caja (2026-09-09, 2.ª pasada).
Antes reservaba el hueco con un `::before` y dejaba `.art` en
`absolute; inset: 0`: el dibujo se encuadraba contra la ALTURA COMPLETA de
la foto (~520px) y no contra la franja visible (~230px), asi que los
auriculares caian detras del player y arriba solo asomaban dos curvas
sueltas. Con el arte en flujo y `aspect-ratio` propio, el SVG se encuadra
exactamente en la franja que se ve y la ilustracion entra completa. */
.hero-photo .art {
position: relative; inset: auto; flex: none;
aspect-ratio: 4 / 2.35; width: 100%;
}
.hero-photo .art svg { transform: none; } /* el -16% de escritorio compensaba el recorte que ya no existe */
.float-player {
position: static; transform: none; width: auto;
margin: .55rem .7rem .7rem; z-index: 5;
}
}
/* --- 2. Los 5 codigos de idioma, SIEMPRE en una sola linea --------------
Pedido explicito del owner: ninguno cae a la linea de abajo. El wrap era
la valvula de escape del diseno viejo; ahora la linea se garantiza
achicando el boton, que es lo que el owner quiere ver. */
.langs { flex-wrap: nowrap; }
@media (max-width: 560px) {
.lang { padding: .26rem .52rem; font-size: .7rem; letter-spacing: .03em; }
.langs { gap: .26rem; }
}
@media (max-width: 360px) {
.lang { padding: .24rem .42rem; font-size: .67rem; letter-spacing: .01em; }
}
/* --- 3. La marquesina de idiomas no se movia en el telefono -------------
El track mide 7.672 px (48 spans). Muchos GPU de mobile no componen una
capa de mas de ~4.096 px y Chrome puede terminar no animandola. En mobile
se muestran 10 idiomas por mitad en vez de 24: el track baja a ~3.580 px y
entra en el limite. Se ocultan los MISMOS indices en las dos mitades
(11-24 y 35-48) para que sigan siendo identicas — de eso depende que el
`translateX(-50%)` haga un loop sin salto.
OJO: si el telefono tiene "reducir movimiento" / "quitar animaciones"
activado, la marquesina queda quieta A PROPOSITO (regla de accesibilidad
de la linea 218). Eso NO es este bug y no se toca. */
@media (max-width: 760px) {
.marquee span:nth-child(n+11):nth-child(-n+24),
.marquee span:nth-child(n+35) { display: none; }
/* capa propia en el compositor: sin esto algunos Chrome de Android
rasterizan el track en cada frame y la animacion se cae sola */
.marquee-track { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
/* el mask-image del contenedor obliga a rasterizar lo de adentro en varios
navegadores mobile, y ahi la animacion deja de componerse. En pantallas
chicas se cambia por un degradado de fondo, que no toca la composicion. */
.marquee { mask-image: none; -webkit-mask-image: none; }
}
/* Si el visitante pide MENOS MOVIMIENTO, la marquesina no se anima — es
correcto y no se toca (regla de accesibilidad de la linea 218: un scroll
horizontal continuo es justo lo que molesta a quien tiene trastorno
vestibular). Pero sin animacion el track quedaba clavado en el frame 0,
mostrando idiomas cortados contra el borde: parecia roto en vez de quieto.
Asi se ve como lo que es, una lista de idiomas, centrada y completa. */
@media (prefers-reduced-motion: reduce) {
.marquee-track {
width: auto; flex-wrap: wrap; justify-content: center;
gap: .5rem 1.6rem; padding-inline: var(--pad);
}
.marquee span:nth-child(n+25) { display: none; } /* la 2.a mitad es copia: solo servia para el loop */
.marquee { mask-image: none; -webkit-mask-image: none; }
}
/* =========================== FORMULARIO DE CONTACTO ==========================
Agregado 2026-09-17 (owner): reemplaza los CTA mailto:. Usa los mismos tokens
que el resto (--paper-2 / --ink / --line), asi que si el bloque alguna vez se
mete adentro de una seccion .dark, se invierte solo. */
#contact { background: var(--paper-3); }
.form-grid {
display: grid; gap: clamp(2rem, 5vw, 3.5rem);
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
align-items: start;
}
.form-points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .85rem; }
.form-points li {
display: flex; gap: .7rem; align-items: flex-start;
color: var(--ink-2); font-size: .95rem; line-height: 1.5;
}
.form-points svg { width: 19px; height: 19px; flex: none; color: var(--accent); margin-top: .12rem; }
.form-card {
background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: clamp(1.4rem, 3.5vw, 2.3rem); box-shadow: var(--shadow-md);
/* el gap es la UNICA separacion entre campos: ningun .field lleva margin.
Con margin volveria el desalineado, porque el segundo de cada fila es
:last-child y el grid le estira la diferencia. */
display: grid; gap: 1.5rem;
}
.field { display: grid; gap: .42rem; min-width: 0; }
.field-row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; align-items: start; }
.field label {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
font-size: .85rem; font-weight: 600; color: var(--ink); letter-spacing: .01em;
margin-bottom: .28rem;
}
.field .req { color: var(--accent-dk); }
.field .opt { font-weight: 400; color: var(--ink-3); font-size: .78rem; }
.field input, .field select, .field textarea {
width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
background: var(--paper); border: 1px solid var(--line-2); border-radius: 11px;
padding: .7rem .85rem; transition: border-color .18s ease, box-shadow .18s ease;
-webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.field select {
/* la flecha va como fondo: un select nativo no se puede estilar por dentro */
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23767c85'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .6rem center; background-size: 20px;
padding-right: 2.2rem;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c4442a; }
/* trampa para robots: fuera de pantalla, nunca oculta con display:none — hay
bots que ignoran justamente los campos con display:none. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* En una pagina de derecha a izquierda lo que se va hacia la IZQUIERDA si genera
scroll horizontal (en una normal, no): el campo trampa le agregaba 9.905 px de
scroll a la version arabe. Ahi se esconde hacia el otro lado. */
html[dir="rtl"] .hp { left: auto; right: -9999px; }
.form-actions { margin-top: .3rem; justify-content: space-between; }
.form-fallback { font-size: .85rem; color: var(--ink-3); margin: 0; }
.form-fallback a { color: var(--ink-2); }
.form-note { font-size: .8rem; color: var(--ink-3); line-height: 1.5; margin: 0; }
.form-status {
margin: 0; font-size: .92rem; line-height: 1.5; padding: .8rem 1rem;
border-radius: 11px; border: 1px solid var(--line-2);
}
.form-status.ok { border-color: rgba(46,125,74,.4); background: rgba(46,125,74,.09); color: #2e7d4a; }
.form-status.err { border-color: rgba(196,68,42,.45); background: var(--accent-sf); color: var(--accent-dk); }
.form-card.enviando { opacity: .6; pointer-events: none; }
@media (max-width: 900px) {
.form-grid { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.form-actions { justify-content: flex-start; }
}