:root{
--ground:#fafafb;
--surface:#ffffff;
--sunk:#f1f1f3;
--ink:#2b2d30;
--soft:#616365;
--faint:#8b8d90;
--line:#e3e3e5;
--line-hard:#c7c8cb;
--odm:#0018a8;
--odm-deep:#00126f;
--brand:var(--odm);
--on-brand:#ffffff;
--f-disp:'Marcellus',Georgia,'Times New Roman',serif;
--f-ui:'Mulish',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
--w:1180px;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#131418;--surface:#1b1c21;--sunk:#0f1013;--ink:#e8e9ec;--soft:#a1a3a8;
--faint:#7b7d82;--line:#2a2b31;--line-hard:#44464d;--odm:#8f9de8;--odm-deep:#b3bdf0;
--on-brand:#0b0d18;
}
}
:root[data-theme="dark"]{
--ground:#131418;--surface:#1b1c21;--sunk:#0f1013;--ink:#e8e9ec;--soft:#a1a3a8;
--faint:#7b7d82;--line:#2a2b31;--line-hard:#44464d;--odm:#8f9de8;--odm-deep:#b3bdf0;
--on-brand:#0b0d18;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--ground);color:var(--ink);
font-family:var(--f-ui);font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.eyebrow{
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
font-weight:600;color:var(--brand);margin:0 0 14px
}
h1,h2,h3{font-family:var(--f-disp);font-weight:400;letter-spacing:-.012em;text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px}
/* ============ HEADER ============ */
header.site{
position:sticky;top:0;z-index:60;background:var(--ground);
border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;gap:26px;height:106px}
.mark{--logo-h:68px;display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;flex:none}
.mark img{height:var(--logo-h);width:auto;display:block}
/* Área Autónoma Mínima de la norma: ningún elemento ajeno más cerca de 1/4 del
rectángulo del isotipo. Con el isotipo a 40px, ese cuarto son 10px — se usan 12. */
.mark .since{
/* Alineado al inicio de DERMAMED: el logo mide 3,5x su alto y la palabra
arranca al 33,29% de ese ancho, o sea alto x 1,165. Si cambia --logo-h,
la sangría se recalcula sola. Y el cuerpo va atado a la misma variable,
para que no se quede chico cuando el logotipo crece. */
margin-left:calc(var(--logo-h) * 1.165);
/* El cuerpo va atado a --logo-h, pero con PISO. Medido en el sitio publicado:
con el logotipo a 50px en un teléfono, «DESDE 2013» caía a 6,25px y dejaba
de leerse — a ese tamaño, y con .3em de espaciado entre letras, no es una
fecha, es una textura gris bajo el logo. El piso de 9,5px es el mínimo al
que una versalita espaciada sigue siendo una palabra. En escritorio la
fórmula sigue mandando (68px x .125 = 8,5px), así que también sube ahí. */
margin-top:12px;font-size:max(9.5px, calc(var(--logo-h) * .125));
letter-spacing:.28em;text-transform:uppercase;
color:var(--soft);font-weight:600;line-height:1
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark img{filter:brightness(0) invert(1)}}
:root[data-theme="dark"] .mark img{filter:brightness(0) invert(1)}
:root[data-theme="light"] .mark img{filter:none}
nav.main{display:flex;gap:24px;margin-left:auto;align-items:center}
nav.main a{
text-decoration:none;font-size:14px;color:var(--soft);padding:6px 0;
border-bottom:1.5px solid transparent;transition:color .16s,border-color .16s
}
nav.main a:hover,nav.main a.on{color:var(--ink);border-bottom-color:var(--brand)}
/* el CTA del menú es un botón, no un enlace de navegación: gana al color heredado del nav */
nav.main a.btn-p,nav.main a.btn-p:hover{color:var(--on-brand);border-bottom-color:var(--brand)}
nav.main a.btn-s,nav.main a.btn-s:hover{color:var(--ink)}
.hbtn{
display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-hard);
background:none;padding:8px 13px;border-radius:2px;cursor:pointer;font-size:13.5px;
color:var(--soft);transition:border-color .16s,color .16s
}
.hbtn:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none}
/* ============ BUTTONS ============ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:13px 24px;border-radius:2px;text-decoration:none;font-size:14px;
font-weight:500;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
transition:background .16s,border-color .16s,color .16s
}
.btn-p{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn-p:hover{filter:brightness(.92)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--line-hard)}
.btn-s:hover{border-color:var(--brand);color:var(--brand)}
.btn-sm{padding:9px 16px;font-size:13px}
/* El icono de WhatsApp dentro de un boton. `.btn` ya es inline-flex con
gap:9px, asi que no hace falta nada mas que darle tamano. `flex:0 0` para
que no se comprima cuando el texto del boton es largo. */
.btn svg{width:17px;height:17px;flex:0 0 17px;display:block}
.btn-sm svg{width:15px;height:15px;flex:0 0 15px}
/* ============ HERO ============ */
.hero{padding:76px 0 60px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.04;max-width:15ch;margin-bottom:22px;font-weight:400}
.hero .sub{font-size:18.5px;color:var(--soft);max-width:56ch;margin:0 0 34px;font-weight:400}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:44px}
/* ============ SEARCH ============ */
.search-shell{position:relative;max-width:720px}
.search-box{
display:flex;align-items:center;gap:12px;background:var(--surface);
border:1px solid var(--line-hard);border-radius:2px;padding:0 18px;
transition:border-color .16s,box-shadow .16s
}
.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.search-box svg{flex:none;color:var(--faint)}
.search-box input{
flex:1;border:0;background:none;padding:17px 0;font:inherit;font-size:16px;
color:var(--ink);outline:none;min-width:0
}
.search-box input::placeholder{color:var(--faint)}
.search-clear{border:0;background:none;cursor:pointer;color:var(--faint);padding:6px;font-size:18px;line-height:1;display:none}
.search-clear.show{display:block}
.search-hint{font-size:12.5px;color:var(--faint);margin:11px 0 0}
.results{
position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);
border:1px solid var(--line-hard);border-radius:2px;max-height:420px;overflow-y:auto;
z-index:50;display:none;box-shadow:0 14px 40px rgba(0,0,0,.13)
}
.results.show{display:block}
.res{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
padding:13px 18px;border-bottom:1px solid var(--line);cursor:pointer;
text-align:left;width:100%;background:none;border-left:0;border-right:0;border-top:0
}
.res:last-child{border-bottom:0}
.res:hover,.res:focus-visible{background:var(--sunk)}
.res b{display:block;font-size:14.5px;font-weight:500}
.res small{display:block;font-size:12.5px;color:var(--soft);margin-top:2px}
.res .tagb{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.res-empty{padding:20px 18px;font-size:14px;color:var(--soft)}
/* ============ SECTIONS ============ */
section.blk{padding:72px 0;border-bottom:1px solid var(--line)}
.sec-head{margin-bottom:34px;max-width:62ch}
.sec-head h2{font-size:clamp(26px,3.4vw,36px);line-height:1.12;margin-bottom:12px}
/* `.sec-head p` (0,1,1) le ganaba a `.eyebrow` (0,1,0), así que TODOS los
antetítulos de sección salían a 16px en gris en vez de 10,5px en azul de
marca: competían con el título en vez de acompañarlo. Corregido el
2026-08-31 excluyendo el antetítulo de la regla del párrafo, en vez de
subirle la especificidad a `.eyebrow`. Es la diferencia entre arreglar la
causa y taparla: si mañana alguien añade otro tipo de párrafo aquí, la regla
sigue aplicándole sin sorpresas. */
.sec-head p:not(.eyebrow){color:var(--soft);margin:0;font-size:16px}
/* ============ CATEGORY GRID ============ */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--line)}
.cat{
background:var(--surface);padding:28px 26px 26px;text-decoration:none;
display:flex;flex-direction:column;gap:12px;position:relative;
transition:background .18s
}
.cat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--c)}
.cat:hover{background:var(--sunk)}
.cat .n{font-family:var(--f-disp);font-size:24px;line-height:1.1;
display:flex;align-items:center;min-height:28px}
/* Cuando la marca tiene logotipo, la tarjeta lo usa en vez del nombre en
texto. El renglón mide lo mismo en las seis tarjetas —28px, fijados arriba
en `.cat .n`— para que la rejilla no se descuadre entre las que tienen
logotipo y las que todavía no.
Los dos logotipos van a la MISMA altura de caja, por decisión de Dirección
(2026-08-29). Antes iban a alturas distintas para que pesaran igual —FUSION
son versales finas y a igual altura se ve más pequeña que «ekseption», que
es de caja alta y trazo grueso—, pero se prefiere que las marcas ocupen lo
mismo. */
.cat .n.logo svg{display:block;width:auto;height:28px;color:var(--ink)}
.cat .k{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--c);font-weight:600}
.cat .d{font-size:14px;color:var(--soft);line-height:1.55;flex:1}
.cat .m{display:flex;gap:14px;font-size:12px;color:var(--faint);padding-top:12px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.cat .go{font-size:13px;color:var(--c);font-weight:500}
/* ============ ELIGIBILITY STRIP ============ */
.elig{
background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--brand);
padding:18px 20px;margin:0
}
.elig h4{margin:0 0 8px;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--brand);font-weight:600}
.elig p{margin:0;font-size:14px;color:var(--soft);max-width:78ch}
.elig .who{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.elig .who span{font-size:12px;border:1px solid var(--line-hard);border-radius:2px;padding:3px 9px;color:var(--ink);background:var(--surface)}
/* ============ BRAND PAGE ============ */
.bhead{padding:56px 0 44px;border-bottom:1px solid var(--line)}
.bhead h1{font-size:clamp(34px,5.2vw,52px);line-height:1.05;font-weight:400;margin-bottom:16px}
/* Texto solo para lectores de pantalla: el logotipo es una imagen, y el nombre
de la marca tiene que seguir estando en el documento. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Titular compuesto con el logotipo oficial de la marca. El SVG hereda el
color del tema (`fill:currentColor`): en claro sale casi charcoal —#2b2d30
contra el #303030 del manual— y en oscuro casi blanco, que es justo lo que
el manual pide para fondos oscuros. */
/* Marca SIN logotipo disponible pero CON tipografía web declarada en su manual.
Neauvia no nos ha dado el vectorial institucional, así que su nombre va en
texto; pero su manual define fuentes para web (págs. 44-45) y la secundaria
—Libre Bodoni— es la misma familia didona de las letras del logotipo
NEAUVIA. Es lo más cerca del logotipo que se puede llegar sin reproducirlo,
que es justo lo que el manual prohíbe. Se retira en cuanto llegue el SVG. */
.marca-nv,.bhead h1.marca-nv,.cat .n.marca-nv{
font-family:"Libre Bodoni",var(--f-disp);font-weight:400;letter-spacing:-.005em
}
h1.logomarca{line-height:1;margin-bottom:22px}
h1.logomarca svg{display:block;width:auto;height:clamp(38px,5.7vw,60px);color:var(--ink)}
/* Claim oficial de la marca, cuando su manual lo define y lo dirige también a
distribuidores. Neauvia fija «Rethinking Medical Aesthetics» —sustituye a
«Empower your inner youth»— y es de los pocos manuales con tipografía
declarada PARA WEB: Poppins como institucional. Va en su idioma original,
como cualquier claim de marca. */
.bhead .claim{
font-family:"Poppins",var(--f-ui);font-size:11.5px;font-weight:300;
letter-spacing:.24em;text-transform:uppercase;color:var(--soft);
margin:-4px 0 22px
}
.bhead .lede{font-size:17.5px;color:var(--soft);max-width:64ch;margin:0 0 28px}
/* Página de Formación: bajada de Dirección. El titular va bajo el h1, no en su
lugar —«Formación continua» es el nombre de la página y el del menú—, así que
se distingue por tamaño y tinta, no por jerarquía de encabezado.
Los tres párrafos usan `.bhead .lede`, que ya fija ancho y color; aquí solo
se aprieta el margen entre ellos, que a 28px separaba demasiado. */
.bh-t{
font-size:clamp(20px,2.4vw,23px);line-height:1.25;color:var(--ink);
max-width:26ch;margin:0 0 20px;text-wrap:balance
}
.bhead .lede + .lede{margin-top:-14px}
.bh-c{
font-size:16.5px;color:var(--ink);max-width:64ch;
margin:0 0 28px;padding-top:16px;border-top:1px solid var(--line)
}
/* El bloque móvil va DESPUÉS de las tres reglas de arriba, no antes.
Una media query no suma especificidad: `.bh-c` dentro de la consulta y
`.bh-c` fuera valen lo mismo, así que gana la que esté más abajo. Escrito
arriba, la regla de escritorio pisaba la del teléfono y no pasaba nada.
Es el mismo tropiezo que ya costó el sello FDA hace un rato.
Qué hace: suelta el ancho del titular. `max-width:26ch` existe para que en
escritorio no cruce toda la pantalla; en una columna de 390px esa misma
regla lo encierra en unos 250px y lo parte en cinco o seis líneas cortas.
La caja del móvil ya es angosta: no hace falta angostarla más. */
@media (max-width:700px){
.bh-t{max-width:none;font-size:20px;margin-bottom:16px}
.bh-c{font-size:15.5px}
}
/* Cuatro conceptos de marca. Se leen como un friso, no como etiquetas
pinchables: sin fondo ni borde de botón, separados por un punto medio, para
que nadie intente hacer clic. En móvil se apilan de a dos. */
.conceptos{
display:flex;flex-wrap:wrap;align-items:center;gap:0;
list-style:none;margin:0 0 30px;padding:0
}
.conceptos li{
font-size:13.5px;letter-spacing:.03em;color:var(--soft);
padding:0 14px 0 0;margin-right:14px;position:relative
}
.conceptos li:not(:last-child)::after{
content:"·";position:absolute;right:-3px;color:var(--faint)
}
@media (max-width:560px){
.conceptos li{font-size:12.5px;padding-right:10px;margin-right:10px}
}
/* ---- Página legal ---- */
.aviso{
border:1px solid var(--line-hard);border-left-width:3px;background:var(--surface);
padding:16px 18px;margin:0 0 34px;font-size:14.5px;line-height:1.6;color:var(--soft);max-width:70ch
}
.aviso strong,.aviso b{color:var(--ink);font-weight:600}
/* El aviso de la política es texto de lectura y va a 70ch. El de formación
encabeza una rejilla de paneles a ancho completo, y a 70ch queda descolgado. */
.aviso.ancho{max-width:none}
.legal{list-style:none;counter-reset:l;margin:0;padding:0;max-width:70ch}
.legal li{counter-increment:l;padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--line)}
.legal li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.legal h2{
font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--brand);margin:0 0 10px
}
.legal h2::before{content:counter(l) " · ";color:var(--faint);font-weight:400}
.legal p{margin:0;font-size:16px;line-height:1.7;color:var(--soft)}
/* Campo que el borrador dejó abierto. Se marca en vez de rellenarse: un dato
inventado en una política de privacidad es peor que un hueco visible. */
.pend{
display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;
color:var(--on-brand);background:var(--faint);border-radius:2px;padding:1px 7px;
vertical-align:1px
}
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);margin-bottom:28px}
.facts div{padding:14px 26px 0 0;margin-right:26px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts dt{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.facts dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.tech{background:var(--surface);border:1px solid var(--line);padding:26px 28px;margin:0 0 8px}
.tech h3{font-size:20px;margin-bottom:12px}
.tech p{margin:0 0 12px;color:var(--soft);font-size:15px;max-width:72ch}
.tech p:last-child{margin-bottom:0}
.tech ul{margin:0;padding-left:20px;color:var(--soft);font-size:14.5px;max-width:72ch}
/* El cierre del bloque técnico: dos frases cortas que rematan la enumeración.
Se separan con una línea y se les da un punto más de cuerpo y color de tinta
—no el gris del cuerpo— porque no son una explicación más: son la conclusión,
y en la lectura tienen que sonar distinto de lo que acaban de leer. */
.tech-cierre{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.tech-cierre p{color:var(--ink);font-size:15.5px;margin:0 0 4px;max-width:60ch}
.tech-cierre p:last-child{margin-bottom:0}
.tech li{margin-bottom:5px}
/* ============ FILTER CHIPS ============ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{
border:1px solid var(--line-hard);background:var(--surface);border-radius:2px;
padding:7px 14px;font-size:13px;cursor:pointer;color:var(--soft);
transition:border-color .16s,color .16s,background .16s
}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* ============ PRODUCT GRID ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
/* Corte de fila entre familias: ocupa la fila completa y sin alto, así el grupo
siguiente arranca en una fila nueva y el resto de la anterior queda vacío. */
.pgrid .corte{grid-column:1/-1;height:0;background:var(--surface)}
.pcard{
background:var(--surface);padding:22px 20px;text-align:left;border:0;cursor:pointer;
display:flex;flex-direction:column;gap:9px;transition:background .16s
}
.pcard:hover{background:var(--sunk)}
.pcard .pk{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);font-weight:600}
.pcard .pn{font-family:var(--f-disp);font-size:19px;line-height:1.18}
.pcard .pi{font-size:13.5px;color:var(--soft);line-height:1.5;flex:1}
.pcard .pt{font-size:12px;color:var(--faint);padding-top:10px;border-top:1px solid var(--line)}
.count{font-size:13px;color:var(--faint);margin:0 0 16px;font-variant-numeric:tabular-nums}
/* Cabecera de campaña de marca. Va a sangre completa, con un degradado al pie
para que el titular que viene abajo no compita con la fotografía. */
.bhero{position:relative;line-height:0;background:var(--sunk)}
.bhero img,.bhero video{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;display:block;background:var(--sunk)}
.bhero::after{
content:"";position:absolute;inset:auto 0 0 0;height:16%;
background:linear-gradient(to bottom,transparent,var(--ground) 92%)
}
/* ---- Cabecera con material vertical ----
La banda normal es muy apaisada (hasta 1400x420). Un film vertical ahí se
recorta al 24% de su alto, así que para estas marcas la banda crece y el
video se muestra ENTERO. El hueco de los lados lo cubre el propio video
ampliado y desenfocado: su fondo pasa de blanco a gris según el plano y un
relleno de color fijo dejaría el borde del video marcado. */
.bhero.bhero-alto{overflow:hidden}
.bhero.bhero-alto video.pri{
position:relative;z-index:1;
height:clamp(300px,44vw,560px);object-fit:contain;background:transparent;
box-shadow:0 0 70px rgba(0,0,0,.07)
}
.bhero.bhero-alto video.tras{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1.4);filter:blur(52px) saturate(.95);opacity:1;
pointer-events:none
}
/* Fila de familias: primer nivel, visualmente por encima de las categorías. */
.chips-fam{margin-bottom:14px}
.chips-fam .chip{font-size:14px;padding:9px 16px;font-weight:500}
.chips-fam .chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
/* Indicaciones oficiales del fabricante, como lista — igual que en su ficha. */
ul.indic{margin:0;padding:0;list-style:none}
ul.indic li{position:relative;padding-left:15px;margin:0 0 4px}
ul.indic li:last-child{margin:0}
ul.indic li::before{content:"–";position:absolute;left:0;color:var(--faint)}
/* Ficha: presentación bajo el titular y sello de distribuidor, siguiendo el
orden de lectura del sitio oficial del fabricante. */
.pres-lead{
font-size:14px;color:var(--faint);margin:12px 0 0;
letter-spacing:.02em;font-variant-numeric:tabular-nums
}
.pdet .pl{margin-top:22px}
.pacc{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.certif{
display:flex;flex-direction:column;gap:5px;margin:34px 0 30px;
padding:16px 18px;background:var(--sunk);border-left:2px solid var(--brand);border-radius:2px
}
.certif .ck{font-size:10px;letter-spacing:.15em;text-transform:uppercase;
color:var(--soft);font-weight:600}
.certif .cs{font-size:14px;color:var(--ink);line-height:1.55;max-width:72ch}
.dl .needbar{margin:0}
/* Segunda fila de filtros: tipo de piel. Va visualmente subordinada a la de
categorías, con un rótulo delante, para que se lea como un refinamiento y no
como otra taxonomía en competencia. */
.chips-2{margin-top:-6px;align-items:center}
.chiplabel{
font-size:10px;letter-spacing:.15em;text-transform:uppercase;
color:var(--faint);font-weight:600;margin-right:4px;align-self:center
}
.chips-2 .chip{font-size:12.5px;padding:7px 12px}
/* Estado de landing de campaña. No se enlaza a ninguna: ninguna está publicada
todavía (ver los archivos _Copy.md en las carpetas 04_Landing de 00_Marketing).
Mostrar el estado real es más útil que un enlace muerto, y le dice a Dirección
qué falta aprobar. */
.landing{
display:flex;flex-direction:column;gap:4px;margin:26px 0 0;
padding:14px 16px;background:var(--sunk);border-left:2px solid var(--line-hard);border-radius:2px
}
.landing.land-aprobada{border-left-color:var(--odm)}
.landing .lk{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--soft);font-weight:600}
.landing .ls{font-size:13.5px;color:var(--ink);line-height:1.5}
.landing.land-viva{border-left-color:var(--brand)}
.landing .lls{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px}
.landing .ll{
display:inline-flex;flex-direction:column;gap:1px;text-decoration:none;
padding:8px 13px;border:1px solid var(--line-hard);border-radius:2px;
font-size:13.5px;color:var(--ink);background:var(--ground);line-height:1.35
}
.landing .ll:hover{border-color:var(--brand);color:var(--brand)}
.landing .ll.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.landing .ll.on:hover{opacity:.88;color:var(--on-brand)}
.landing .lh{font-size:10.5px;letter-spacing:.04em;color:var(--faint);font-weight:400}
.landing .ll.on .lh{color:var(--on-brand);opacity:.72}
/* ---- Packshots de producto ----
La imagen es un realce, no la
estructura: la tarjeta sin foto conserva su ancho completo y no queda un
hueco reservado en las fichas que todavía no tienen material. */
.pcard{position:relative;overflow:hidden}
.pcard.hasimg{padding-right:92px}
/* El hueco reservado a la derecha de la tarjeta mide 92px. Un vial estrecho cabe
sobrado, pero un packshot ancho —Plasma IQ, 716x931— se salía y quedaba
cortado por el `overflow:hidden` de la tarjeta. Se acota la caja a 80px y se
deja que `contain` reduzca la imagen dentro en vez de recortarla: los viales
no cambian (a 132px de alto miden ~50px de ancho, muy por debajo del tope) y
los packshots anchos entran completos. */
.pcard .pv{
position:absolute;right:12px;bottom:14px;height:132px;width:auto;max-width:80px;
object-fit:contain;object-position:bottom right;
pointer-events:none;transition:transform .22s ease
}
.pcard.hasimg:hover .pv{transform:translateY(-3px)}
.pcard.hasimg .pt{padding-right:0}
/* Encabezado de ficha: el vial acompaña al titular en escritorio y pasa
arriba, centrado y más chico, cuando no hay ancho para dos columnas. */
.phead.hasimg{display:flex;gap:44px;align-items:flex-start;margin-bottom:20px}
.phead-txt{flex:1;min-width:0}
.phead-img{flex:0 0 auto;order:2;padding-top:6px}
.phead-img img{height:272px;width:auto;display:block}
@media (max-width:760px){
.phead.hasimg{flex-direction:column;gap:22px}
.phead-img{order:0;align-self:center;padding-top:0}
.phead-img img{height:210px}
.pcard.hasimg{padding-right:76px}
.pcard .pv{height:104px;right:8px}
}
@media (prefers-reduced-motion:reduce){.pcard.hasimg:hover .pv{transform:none}}
/* Placa blanca. Los packshots Neauvia se extrajeron de la landing en PDF y
traen fondo blanco opaco — no se puede recortar el fondo sin destruir el
estuche de Hydro Deluxe, que es blanco. En modo claro la placa es invisible;
en oscuro convierte lo que sería un rectángulo blanco suelto en una placa de
producto, que es cómo se fotografía un packshot. */
.pcard .pv.placa{background:#fff;border-radius:2px}
.phead-img.placa{background:#fff;border-radius:2px;padding:10px}
/* Packshot apaisado (composiciones con estuche: Acurhyal, y más adelante las
jeringas Neauvia y los hilos Tesslift). No cabe en la columna estrecha de la
derecha, así que ocupa el ancho del texto arriba de todo — el ya es el
primer hijo del botón, sólo hay que sacarlo del posicionamiento absoluto. */
.pcard.ancha{padding-right:20px}
/* La imagen encabeza la tarjeta. Se acota por ALTO y no por ancho: si se fija
`width:100%`, un producto alto y angosto —un tubo de 30 ml— se estira a 212px
de ancho y 342 de alto, y desborda la tarjeta. Con tope de alto, un cuadrado
sale 200x200, un tubo 124x200 y una composición apaisada 212x162: todos con
presencia parecida y ninguno desbordado. */
.pcard.ancha .pv{
position:static;width:auto;height:auto;max-width:100%;max-height:200px;
margin:0 auto 2px;align-self:center
}
.phead.hasimg.wide{flex-direction:column;gap:24px}
.phead.hasimg.wide .phead-img{order:0;padding-top:0}
/* Tope por ALTO ademas de por ancho. Sin el, un packshot recortado en vertical
—un serum de 30 ml, 308x622— se estira a 430 de ancho y 869 de alto y empuja
toda la ficha fuera de pantalla. */
.phead.hasimg.wide .phead-img img{height:auto;width:auto;max-width:430px;max-height:400px}
@media (max-width:760px){
.pcard.ancha{padding-right:20px}
.pcard.ancha .pv{max-width:180px}
.phead.hasimg.wide .phead-img img{max-width:100%;max-height:300px}
}
/* ============ PRODUCT DETAIL ============ */
/* Figura técnica del fabricante en la ficha (TESS). Va sobre placa blanca
porque el original viene sobre blanco y en tema oscuro se perdería. */
.esq{margin:34px 0 0;padding:0;border:1px solid var(--line);background:#fff;border-radius:2px}
.esq img{display:block;width:100%;height:auto}
.esq figcaption{
font-size:12px;color:var(--faint);padding:10px 14px 12px;
border-top:1px solid var(--line);background:var(--surface)
}
.pdet{padding:52px 0 0}
.pdet h1{font-size:clamp(30px,4.6vw,44px);line-height:1.06;font-weight:400;margin-bottom:14px}
.pdet .pl{font-size:17px;color:var(--soft);max-width:62ch;margin:0 0 30px}
/* Lede extendido de ficha (hoy solo Plasma IQ). Va DESPUÉS de `.pdet .pl` de
la línea 488 —que fija tamaño, color y ancho— para poder ajustar solo el
margen entre párrafos sin repetir lo demás. El titular usa la tinta
principal, no la suave: es un titular, no cuerpo. */
/* Sello «FDA CLEARED» del fabricante. El logo manda; la línea «510(k)» debajo
es la precisión regulatoria que el badge no trae —ver el comentario de
selloFDA()—. Se lee como un pie del logo, no como una segunda etiqueta. */
.fda{
display:inline-flex;flex-direction:column;align-items:center;gap:1px;
margin:18px 0 0;cursor:help
}
/* CUIDADO CON LA ESPECIFICIDAD. Este ancho hay que escribirlo con el selector
largo, no con `.fda img`.
Los packshots anchos —los cuatro equipos lo son— los gobierna
`.phead.hasimg.wide .phead-img img{width:auto;max-width:430px}`, que tiene
cuatro clases y le gana a `.fda img`, que tiene una. Con la regla corta el
sello se dibujaba a su tamaño natural, 220px: tan ancho como el equipo.
Pasó el 2026-08-31 y se vio en el sitio publicado, no aquí.
Por eso se anulan también max-width y max-height: los hereda de esa misma
regla. */
.phead.hasimg .phead-img .fda img,
.phead.hasimg.wide .phead-img .fda img,
.fda img{
width:34px;height:auto;max-width:none;max-height:none;
display:block;opacity:.9
}
.fda i{
font-style:normal;font-size:7.5px;letter-spacing:.14em;
color:var(--faint) /* sin text-transform: en versal quedaba «510(K)», y la
«k» de 510(k) es minúscula en el término regulatorio */
}
.fda + .plede,.fda + .pl{margin-top:22px}
/* Sobre la foto del equipo, abajo a la derecha. `.phead-img` ya es
position:relative —lo puso el bloque de sellos de premio— así que la caja de
referencia es exactamente la imagen. */
.phead-img .fda{position:absolute;right:14px;bottom:12px;margin:0;z-index:2}
@media (max-width:760px){
/* Mismo criterio que los sellos de premio: en móvil el packshot baja mucho y
el sello le come el equipo. Pasa a línea propia bajo la imagen. */
.phead-img .fda{position:static;margin:12px auto 0}
.phead-img{text-align:center}
.phead.hasimg .phead-img .fda img,
.phead.hasimg.wide .phead-img .fda img,
.fda img{width:30px}
}
.plede{max-width:62ch;margin:0 0 30px}
.plede-t{
font-size:19px;line-height:1.3;color:var(--ink);font-weight:400;
margin:0 0 14px;text-wrap:balance
}
.pdet .plede .pl{margin:0 0 14px}
.pdet .plede .pl:last-of-type{margin-bottom:0}
.plede-c{
font-size:16px;color:var(--ink);margin:16px 0 0;
padding-top:14px;border-top:1px solid var(--line)
}
/* Cierre de dos líneas (Zaffiro): el filete separa el bloque entero, no cada
línea, así que solo lo lleva la primera. */
.plede-c + .plede-c{border-top:0;padding-top:0;margin-top:5px;color:var(--soft)}
.dl{border-top:1px solid var(--line-hard);margin:0}
.dl .row{
display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;
padding:16px 0;border-bottom:1px solid var(--line)
}
.dl dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;padding-top:3px}
.dl dd{margin:0;font-size:15px;line-height:1.6}
.dl dd.na{color:var(--faint);font-style:italic}
.dl dd ul{margin:0;padding-left:18px}
.dl dd li{margin-bottom:4px}
/* ============ CTA BAND ============ */
.cta{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta .inner{padding:60px 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start}
.cta h2{font-size:clamp(26px,3.4vw,34px);line-height:1.12;margin-bottom:14px}
.cta p{color:var(--soft);margin:0 0 20px;font-size:15.5px;max-width:52ch}
.demo-tag{
display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
border:1px solid var(--line-hard);color:var(--faint);padding:3px 9px;border-radius:2px;margin-bottom:16px
}
form.lead{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);padding:24px}
form.lead .f{display:grid;gap:6px}
form.lead label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
form.lead input,form.lead select{
border:1px solid var(--line-hard);background:var(--ground);border-radius:2px;
padding:11px 12px;font:inherit;font-size:14.5px;color:var(--ink);outline:none;width:100%
}
form.lead input:focus,form.lead select:focus{border-color:var(--brand)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req{color:var(--brand)}
form.lead .note{font-size:12px;color:var(--faint);margin:2px 0 0;line-height:1.5}
/* ============ CONTACT / FOOTER ============ */
footer.site{background:var(--ground);padding:56px 0 34px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:34px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.fgrid h5{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:0 0 14px}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fgrid a{font-size:14px;color:var(--soft);text-decoration:none}
.fgrid a:hover{color:var(--brand)}
.fabout p{font-size:14px;color:var(--soft);margin:0 0 18px;max-width:40ch}
.social{display:flex;gap:10px}
.social a{
width:38px;height:38px;border:1px solid var(--line-hard);border-radius:2px;
display:grid;place-items:center;color:var(--soft);transition:border-color .16s,color .16s
}
.social a:hover{border-color:var(--brand);color:var(--brand)}
.fbot{padding-top:22px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:12.5px;color:var(--faint)}
.fbot p{margin:0;max-width:70ch}
/* ============ MOBILE ============ */
@media (max-width:900px){
.cta .inner{grid-template-columns:minmax(0,1fr);gap:34px}
.fgrid{grid-template-columns:1fr 1fr;gap:30px}
.dl .row{grid-template-columns:minmax(0,1fr);gap:5px}
.dl dt{padding-top:0}
}
@media (max-width:760px){
.wrap{padding:0 20px}
nav.main{
position:fixed;inset:72px 0 auto;background:var(--ground);border-bottom:1px solid var(--line);
flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;display:none
}
nav.main.open{display:flex}
nav.main a{padding:13px 0;border-bottom:1px solid var(--line)}
.burger{display:inline-flex;margin-left:auto}
.hbtn.desk{display:none}
.hero{padding:52px 0 44px}
section.blk{padding:52px 0}
.facts div{border-right:0;padding-right:0;margin-right:0;flex:1 1 45%}
.two{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* ---------- necesidades ---------- */
.needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.need{
background:var(--surface);padding:24px 22px 22px;text-decoration:none;
display:flex;flex-direction:column;gap:9px;transition:background .16s
}
.need:hover{background:var(--sunk)}
.need .nn{font-family:var(--f-disp);font-size:20px;line-height:1.16;color:var(--ink)}
.need .nd{font-size:13.5px;color:var(--soft);line-height:1.5;flex:1}
.need .nc{
font-size:11.5px;color:var(--brand);font-weight:600;letter-spacing:.06em;
padding-top:11px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums
}
.needbar{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.needbar a{
font-size:12.5px;text-decoration:none;border:1px solid var(--line-hard);
border-radius:2px;padding:5px 11px;color:var(--soft);background:var(--surface);
transition:border-color .16s,color .16s
}
.needbar a:hover{border-color:var(--brand);color:var(--brand)}
.bybrand{display:flex;flex-direction:column;gap:34px;margin-top:8px}
.bybrand h3{margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.bybrand h3 .bn{font-family:var(--f-disp);font-size:21px;font-weight:400}
.bybrand h3 .bc{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.bybrand h3::before{content:"";width:3px;height:17px;background:var(--bc);flex:none;align-self:center}
/* ---------- acceso profesional ---------- */
.gate{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:24px 0 8px}
.gate div{background:var(--surface);padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.gate .lv{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--brand);font-weight:600}
.gate h4{font-family:var(--f-disp);font-size:19px;font-weight:400;margin:0}
.gate p{font-size:13.5px;color:var(--soft);margin:0;line-height:1.55}
.gate ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--soft)}
.gate li{margin-bottom:5px}
/* ---------- hero en dos columnas ---------- */
.hero-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:start;margin-bottom:42px}
.hero-side{border-left:1px solid var(--line);padding-left:30px}
.hero-side h3{
font-family:var(--f-ui);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
color:var(--faint);font-weight:600;margin:5px 0 12px
}
.hero-side ul{list-style:none;margin:0;padding:0}
.hero-side li{border-bottom:1px solid var(--line)}
.hero-side li:first-child{border-top:1px solid var(--line)}
.hero-side a{
display:flex;justify-content:space-between;gap:16px;padding:11px 0;
text-decoration:none;color:var(--ink);font-size:14.5px;transition:color .16s
}
.hero-side a:hover{color:var(--brand)}
.hero-side a em{font-style:normal;color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:900px){
.hero-top{grid-template-columns:minmax(0,1fr);gap:32px}
/* La lista de trayectoria pasa a dos columnas en movil. Apilada eran
cinco filas y 278 px de alto, que empujaban la huincha fuera de
pantalla. */
.hero-side ul{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.hero-side ul li:nth-child(5){grid-column:1 / -1}
.hero-side{border-left:0;padding-left:0}
}
.hero-side a span{color:var(--soft);font-size:14px}
.hero-side a em{font-style:normal;color:var(--ink);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-note{
font-size:13px;color:var(--faint);line-height:1.6;max-width:80ch;
margin:0 0 30px;padding-left:14px;border-left:2px solid var(--line-hard)
}
.quicklinks{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:20px 0 0}
.quicklinks span{font-size:12.5px;color:var(--faint)}
.quicklinks a{
font-size:12.5px;text-decoration:none;border:1px solid var(--line-hard);
border-radius:2px;padding:5px 11px;color:var(--soft);background:var(--surface);
transition:border-color .16s,color .16s
}
.quicklinks a:hover{border-color:var(--brand);color:var(--brand)}
/* ---------- noticias ---------- */
/* Video en la tarjeta de noticia. Los dos son verticales (9:16), así que el
marco se limita por ALTO y se centra: a ancho completo un 9:16 ocuparía media
pantalla. Hasta que alguien pulsa solo hay un webp de 30 KB. */
.nw.convideo{display:flex;flex-direction:column}
/* Noticia con foto de producto en vez de video: sin botón de play y sobre placa
blanca, porque los packshots vienen sobre blanco y en tema oscuro se perderían. */
.nvid.nfoto{background:#fff;cursor:default;padding:10px}
/* min-width: sin esto la caja se colapsaba a 0 y se producia un bloqueo
circular. `.nvid` toma el ancho de su imagen (`width:auto` mas
`align-self:flex-start`); si la imagen aun no cargo, ese ancho es 0; y con
la caja en 0 el navegador nunca la considera visible, asi que la carga
diferida no se dispara nunca. Resultado: tres noticias con video salian
EN BLANCO en celular. En escritorio no se veia porque entraban en pantalla
al cargar la pagina y el observador se disparaba igual.
Se arregla por los dos lados: aca, dando a la caja un ancho minimo para que
exista antes que la imagen; y en newsMedia(), quitando `loading="lazy"` de
estos posters —son cuatro y pesan 20-35 KB, no habia nada que diferir. */
.nvid{
position:relative;align-self:flex-start;margin:0 0 16px;min-width:150px;
background:var(--sunk);border-radius:2px;overflow:hidden;cursor:pointer;line-height:0
}
.nvid img,.nvid video{display:block;height:300px;width:auto;max-width:100%}
.nvid video{cursor:auto}
.nvid .play{
position:absolute;inset:0;margin:auto;width:52px;height:52px;border:0;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--ink);font-size:17px;line-height:52px;
cursor:pointer;padding:0;box-shadow:0 2px 14px rgba(0,0,0,.22);transition:transform .16s ease
}
.nvid:hover .play{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.nvid:hover .play{transform:none}}
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.nw{background:var(--surface);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.nw .meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.nw .kind{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--brand)}
.nw .date{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.nw h3{font-family:var(--f-disp);font-size:19px;font-weight:400;line-height:1.2;margin:0}
.nw p{font-size:13.5px;color:var(--soft);line-height:1.55;margin:0;flex:1}
.nw .src{font-size:11.5px;color:var(--faint);padding-top:11px;border-top:1px solid var(--line)}
.hero-lead{
font-size:21px;line-height:1.42;color:var(--ink);max-width:24ch;
margin:0 0 18px;font-weight:400
}
@media (max-width:760px){.hero-lead{font-size:19px}}
/* ---------- contacto con iconos ---------- */
.fgrid ul.contact{gap:13px}
.fgrid ul.contact a{display:grid;grid-template-columns:17px minmax(0,1fr);gap:11px;align-items:start}
.fgrid ul.contact svg{width:17px;height:17px;color:var(--faint);margin-top:2px;transition:color .16s}
.fgrid ul.contact a:hover svg{color:var(--brand)}
.fgrid ul.contact span{line-height:1.45}
/* ---------- huincha de destacados, en movimiento ---------- */
.stripwrap{padding:26px 0;border-bottom:1px solid var(--line);background:var(--sunk)}
/* Franja de enlaces rapidos, ahora debajo de la huincha. */
.qlwrap{padding:20px 0;border-bottom:1px solid var(--line)}
.qlwrap .quicklinks{margin:0}
.striphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin:0 0 18px}
/* En el resto del sitio la .eyebrow es un antetitulo: va encima de un h2 y por
eso mide 10,5px. Aca no hay h2 — la huincha entra directo — asi que ese
renglon ES el titulo de la seccion y a 10,5px se leia como un pie de foto.
El interletrado baja de .18em a .14em: a mayor cuerpo, menos separacion
hace falta para que las versales respiren. */
.striphead .eyebrow{font-size:18px;letter-spacing:.13em}
/* El choque de especificidad que hacía salir los antetítulos a 16px en gris se
corrigió el 2026-08-31, arriba, en la propia regla de `.sec-head p`. Fue el
cuarto caso del mismo patrón —la casilla del formulario, el ® de Neauvia, el
panel de cookies y este—: una regla de componente pisando en silencio a otra
más general. Cuando algo se ve distinto de como está escrito, el primer
sospechoso es la especificidad, no el navegador. */
/* Los bordes se desvanecen en vez de cortarse en seco: la huincha se siente
continua y no como una caja con contenido recortado. */
.marquee{
overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)
}
.mtrack{
display:flex;gap:1px;background:var(--line);width:max-content;
animation:desliza 72s linear infinite;will-change:transform
}
/* Se detiene al pasar el mouse o al tabular hacia una tarjeta: nadie tiene que
perseguir un botón en movimiento. */
.marquee:hover .mtrack,
.marquee:focus-within .mtrack{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scard{
flex:0 0 216px;background:var(--surface);border:0;border-top:3px solid var(--c);
padding:16px 18px 15px;cursor:pointer;text-align:left;
display:flex;flex-direction:column;gap:12px;transition:background .16s
}
.scard:hover{background:var(--sunk)}
/* El packshot vive en una placa de altura fija y se contiene dentro: un vial de
5 ml y una caja apaisada caben igual sin recortarse ni deformarse. El texto va
anclado abajo en todas las tarjetas, así que las dos que aún no tienen foto no
quedan descuadradas respecto al resto. */
.scard .sv{
display:flex;align-items:flex-end;justify-content:center;
height:104px;border-radius:2px;overflow:hidden
}
/* UN solo tope de altura para todas. Antes había tres —104px normal, 88 con
`ancha`, 92 con placa— y eso hacía que el mismo producto se viera más grande
o más chico según qué banderas llevara su ficha, no según su tamaño real.
Dirección pidió que la huincha se vea proporcionada (2026-08-29). */
.scard .sv img{max-height:104px;max-width:100%;width:auto;height:auto;object-fit:contain;
display:block;transition:transform .3s ease}
.scard .sv.placa{background:#fff;align-items:center}
/* ---- Armonía de la huincha ----
Un vial estrecho y un frasco tumbado a la MISMA altura no pesan lo mismo: lo
que el ojo compara es la superficie, no el alto. Con un tope único la raíz de
(ancho x alto) iba de 64 a 129 —los viales parecían raquíticos al lado de
Acurhyal—.
Cada altura está medida, no estimada: se toma la caja de contenido real de
cada packshot con `bbox.pl` y se resuelve la altura que iguala la superficie
del PRODUCTO, no la del archivo. Por eso ECTOIN va más alto que el resto:
su recorte comparte escala con los otros nueve sérums Mixlab y solo llena el
81% de alto y el 55% de ancho.
Si entra un destacado nuevo: medirlo y añadir su línea. Sin línea, hereda el
tope general y se verá desparejo. */
.scard .sv{height:134px}
.scard .sv img{max-height:134px}
.scard .sv[data-k="f-xbc"] img,
.scard .sv[data-k="f-perfect-lips"] img {max-height:127px}
.scard .sv[data-k="hyaluronic-ectoin"] img{max-height:134px}
.scard .sv[data-k="stimulate"] img {max-height:105px}
.scard .sv[data-k="hydro-deluxe"] img {max-height:104px}
.scard .sv[data-k="pure-glow-peel"] img {max-height:87px}
.scard .sv[data-k="acurhyal-lift"] img {max-height:63px}
.scard:hover .sv img{transform:translateY(-3px) scale(1.04)}
.scard .stxt{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.scard .sr{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c);font-weight:600}
.scard .sn{font-family:var(--f-disp);font-size:18px;line-height:1.15;color:var(--ink)}
.scard .sb{font-size:11.5px;color:var(--faint)}
@media (prefers-reduced-motion:reduce){.scard:hover .sv img{transform:none}}
@media (max-width:760px){.scard{flex:0 0 190px}.mtrack{animation-duration:52s}}
/* Sin movimiento para quien lo pidió: la huincha vuelve a ser scroll manual. */
@media (prefers-reduced-motion:reduce){
.mtrack{animation:none;width:auto}
.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:760px){.scard{flex:0 0 190px}}
/* Una sola columna desde que se retiraron las dos imagenes de la sede. */
.sede{border:1px solid var(--line);background:var(--surface);margin-top:8px}
.sede-t{padding:28px 30px}
.sede-t h3{font-size:24px;margin:0 0 12px}
.sede-t>p{margin:0 0 18px;max-width:52ch}
.sede address{font-style:normal;display:flex;flex-direction:column;gap:2px;margin:0 0 20px;
padding-left:13px;border-left:2px solid var(--brand)}
.sede address span{font-size:14.5px;color:var(--soft)}
.sede address .s-l{font-size:16px;color:var(--ink);font-weight:600}
.sede-c{display:flex;flex-wrap:wrap;gap:0;margin:0 0 22px}
.sede-c div{padding-right:22px;margin-right:22px;border-right:1px solid var(--line)}
.sede-c div:last-child{border-right:0;margin-right:0;padding-right:0}
.sede-c dt{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.sede-c dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.sede-c a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-hard)}
.sede-c a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.sede-m{background:var(--sunk);border-left:1px solid var(--line);display:flex;padding:0}
/* La costa al atardecer, con la sede marcada encima. La foto es la misma en
claro y en oscuro, así que la placa del rótulo lleva colores literales: si
tomara los tokens de tema quedaría texto claro sobre placa clara en uno de
los dos modos. */
.costa{margin:0;flex:1;display:flex;flex-direction:column;min-height:340px}
.costa-im{position:relative;flex:1;min-height:0;display:flex}
.costa-im img{width:100%;height:100%;object-fit:cover;display:block}
.costa-pin{position:absolute;left:18px;bottom:18px;max-width:calc(100% - 36px);display:flex;gap:11px;
align-items:flex-start;background:rgba(255,255,255,.93);padding:12px 15px}
@supports(backdrop-filter:blur(6px)){.costa-pin{background:rgba(255,255,255,.82);backdrop-filter:blur(7px)}}
.cp-d{width:11px;height:11px;border-radius:50%;background:var(--brand);flex:none;margin-top:4px;
box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 18%,transparent)}
.cp-t{display:flex;flex-direction:column;gap:1px;line-height:1.34;min-width:0}
.cp-t b{font-size:14px;color:#2b2d30;font-weight:600}
.cp-t span{font-size:12.5px;color:#616365}
.costa figcaption{padding:10px 16px;font-size:11.5px;color:var(--faint);line-height:1.45;
border-top:1px solid var(--line);background:var(--surface)}
.mapa{width:100%;height:auto;max-height:400px;display:block}
.mapa .m-mar{fill:color-mix(in srgb,var(--brand) 9%,var(--sunk))}
.mapa .m-costa{stroke:none}
.mapa .m-orilla{fill:none;stroke:color-mix(in srgb,var(--brand) 42%,transparent);stroke-width:1.4}
.mapa .m-via{fill:none;stroke:var(--line-hard);stroke-width:2.4;stroke-linecap:round}
.mapa .m-halo{fill:color-mix(in srgb,var(--brand) 20%,transparent)}
.mapa .m-pin{fill:var(--brand)}
.mapa .m-guia{stroke:var(--line-hard);stroke-width:1;stroke-dasharray:2 3}
.mapa text{font-family:var(--f-ui)}
.mapa .m-aqui{font-size:11.5px;font-weight:700;fill:var(--ink)}
.mapa .m-sub{font-size:9.5px;fill:var(--soft)}
.mapa .m-mar-t{font-size:9px;letter-spacing:.16em;fill:color-mix(in srgb,var(--brand) 55%,var(--faint));font-weight:600}
.mapa .m-hito{font-size:10px;letter-spacing:.06em;fill:var(--faint)}
.mapa .m-via-t{font-size:9px;letter-spacing:.1em;text-transform:uppercase;fill:var(--faint)}
/* Banda de la oficina. La imagen es una recreación, no una fotografía del lugar:
el pie lo dice en la propia página, no solo en la documentación. */
/* margin lateral en 0: trae 40px por defecto del navegador y nunca se
habian anulado. En escritorio pasaba desapercibido —la figura quedaba 80px
mas angosta que la tarjeta de arriba— pero a 360px son 240 de 320, un cuarto
del ancho perdido y visiblemente descuadrado. */
.oficina{margin:8px 0 0;border:1px solid var(--line);background:var(--surface)}
.oficina img{width:100%;height:clamp(200px,26vw,340px);object-fit:cover;display:block}
.oficina figcaption{padding:12px 18px;font-size:12px;color:var(--faint);line-height:1.5;
border-top:1px solid var(--line);display:flex;gap:8px;align-items:baseline}
.oficina figcaption b{color:var(--soft);font-weight:600;white-space:nowrap;font-size:10px;
letter-spacing:.13em;text-transform:uppercase}
@media(max-width:560px){
/* La placa con la direccion va superpuesta sobre la foto del edificio. En
escritorio ocupa un rincon; a 360px la direccion se parte en cuatro lineas
y la placa cubre un tercio del alto, tapando justo el edificio que la foto
existe para mostrar. Debajo de 560px deja de superponerse y pasa a ser una
franja bajo la imagen: dice lo mismo y devuelve la fotografia entera. */
/* Franja al pie de la imagen, de borde a borde. Se probo primero sacarla del
flujo absoluto (`position:static`) y fue peor: `.costa-im` es un flex, asi
que la placa se puso AL LADO de la foto y saco scroll horizontal. */
.costa-pin{left:0;right:0;bottom:0;max-width:none;padding:11px 14px;gap:9px}
.cp-t b{font-size:13px}
.cp-t span{font-size:11.5px}
.cp-d{width:9px;height:9px;margin-top:3px}
}
@media(max-width:860px){
}
/* ---- Nosotros: misión, visión, propósito ---- */
.decl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--surface)}
.dc{padding:28px 28px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.dc:last-child{border-right:0}
.dk{margin:0;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);font-weight:600}
.dt{margin:0;font-family:var(--f-disp);font-size:19.5px;line-height:1.32;color:var(--ink);text-wrap:balance}
.dn{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line);
font-size:13px;line-height:1.5;color:var(--faint);font-style:italic}
/* ---- Nuestra promesa ---- */
.prom{border:1px solid var(--line);background:var(--surface);padding:28px 32px;max-width:74ch}
.prom h3{font-size:22px;margin:0 0 16px}
/* Las cuatro frases empiezan todas con "No": el guion largo colgado lo subraya
en vez de esconderlo tras una viñeta redonda cualquiera. */
.nos{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.nos li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.45;color:var(--ink)}
.nos li::before{content:"—";position:absolute;left:0;top:0;color:var(--brand);font-weight:600}
.prom-f{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--soft)}
@media(max-width:860px){
.decl{grid-template-columns:1fr}
.dc{border-right:0;border-bottom:1px solid var(--line)}
.dc:last-child{border-bottom:0}
}
/* ---- Nuestra historia (carta firmada) ---- */
.hist{border:1px solid var(--line);background:var(--surface);padding:34px 38px 36px;max-width:74ch}
.hist>p{margin:0 0 16px;font-size:16.5px;line-height:1.7}
/* El claim cierra el relato: no es un párrafo más, así que sale del cuerpo de
texto y toma la tipografía de despliegue. */
.hist-claim{
margin:28px 0 0 !important;padding:22px 0 0;border-top:1px solid var(--line);
font-family:var(--f-disp);font-size:21px;line-height:1.35;color:var(--brand);letter-spacing:-.005em
}
/* Firma de Dirección — lockup vectorial, no un bitmap.
Las versales van con interletrado amplio y el nombre manuscrito monta
ligeramente sobre ellas, como en la firma original. */
/* Fila: retrato a la izquierda, firma a la derecha. */
.firma{display:flex;align-items:center;gap:20px;margin:26px 0 0;line-height:1}
.firma .fr{
width:92px;height:123px;flex:0 0 92px;display:block;object-fit:cover;
border:1px solid var(--line-hard);background:var(--sunk)
}
.firma .ft{display:flex;flex-direction:column;min-width:0}
.firma .fm{
font-family:"Allura",cursive;font-size:41px;line-height:1;color:var(--ink);
margin-left:-2px;margin-bottom:9px
}
.firma .fn{
font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);
font-weight:300;margin-bottom:5px
}
.firma .fn b{font-weight:600;color:var(--ink)}
.firma .fc{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
@media(max-width:520px){
.firma{gap:15px}
.firma .fr{width:74px;height:99px;flex:0 0 74px}
.firma .fm{font-size:34px;margin-bottom:7px}
.firma .fn{font-size:10px;letter-spacing:.18em}
.firma .fc{font-size:9px;letter-spacing:.18em}
}
@media(max-width:860px){
.hist{padding:26px 22px 28px}
.hist>p{font-size:16px}
}
/* Consentimiento de comunicación comercial. Va desmarcado y con la baja
anunciada en la misma frase: un opt-in premarcado no es consentimiento. */
form.lead label.opt,.opt{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;cursor:pointer;
text-transform:none;letter-spacing:normal;font-weight:400;font-size:inherit;color:inherit}
/* `form.lead input` tiene especificidad (0,1,2) y `.opt input` (0,1,1), así que
el `width:100%` del campo de texto le ganaba a la casilla: el checkbox se
estiraba a toda la fila y dejaba el en 0 px de ancho — el texto salía
partido en 104 líneas de una letra, en todos los anchos, no solo en móvil.
Estuvo publicado así. El selector de abajo (0,2,3) lo corrige, y de paso
devuelve la apariencia nativa que el mismo bloque le había pisado. */
form.lead .opt input[type="checkbox"],.opt input[type="checkbox"]{
-webkit-appearance:checkbox;appearance:auto;
width:15px;height:15px;min-width:15px;flex:0 0 auto;
margin:2px 0 0;padding:0;border:0;border-radius:0;background:initial;
accent-color:var(--brand)
}
/* min-width:0 — sin esto el texto es un item flex que no baja de su ancho
minimo y saca 47px de scroll horizontal a TODO el sitio en movil. */
form.lead .opt span,.opt span{min-width:0;overflow-wrap:anywhere;font-size:12.5px;line-height:1.5;color:var(--soft);
text-transform:none;letter-spacing:normal;font-weight:400}
.opt:hover span{color:var(--ink)}
/* Respuesta del envío. Tres estados y ninguno decorativo: el neutro mientras
viaja, el verde cuando el CRM confirmó recepción, y el rojo —con la salida
por WhatsApp o correo— cuando no. */
/* El widget de Google mide 304x78 y no se puede reestilar por dentro: se le da
sitio y se deja respirar. */
form.lead .cap{margin:16px 0 4px;min-height:78px}
form.lead .cap-pend{margin:14px 0 4px;padding:9px 12px;background:var(--sunk);
font-size:11.5px;color:var(--faint);border-left:2px solid var(--line-hard)}
form.lead .fmsg{margin:12px 0 0;padding:12px 14px;font-size:13px;line-height:1.55;
border-left:3px solid var(--line-hard);background:var(--sunk);color:var(--soft)}
form.lead .fmsg b{color:var(--ink)}
form.lead .fmsg a{color:var(--brand)}
form.lead .fmsg.ok{border-left-color:#2e7d52;background:color-mix(in srgb,#2e7d52 8%,var(--surface))}
form.lead .fmsg.error{border-left-color:#b3261e;background:color-mix(in srgb,#b3261e 7%,var(--surface))}
form.lead .fmsg.aviso{border-left-color:var(--brand)}
/* ---- Rejilla visual de categorías ---- */
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);margin:0 0 22px}
.catcard{
background:var(--surface);border:0;padding:0 0 14px;cursor:pointer;text-align:left;
display:flex;flex-direction:column;gap:0;transition:background .16s
}
.catcard:hover{background:var(--sunk)}
.catcard .cgi{display:block;overflow:hidden;line-height:0;background:#fff}
.catcard .cgi img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
transition:transform .4s ease}
.catcard:hover .cgi img{transform:scale(1.045)}
.catcard .cgn{font-family:var(--f-disp);font-size:15px;line-height:1.2;color:var(--ink);
padding:13px 14px 0}
.catcard .cgc{font-size:11px;color:var(--faint);padding:4px 14px 0;font-variant-numeric:tabular-nums}
/* La seleccionada se marca con la barra de color de la marca, igual que un chip
activo, para que se entienda que las dos filas controlan el mismo filtro. */
.catcard.on{background:var(--sunk)}
.catcard.on .cgi{box-shadow:inset 0 -3px 0 var(--brand)}
.catcard.on .cgn{color:var(--brand)}
@media (prefers-reduced-motion:reduce){.catcard:hover .cgi img{transform:none}}
@media(max-width:1000px){.catgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.catgrid{grid-template-columns:repeat(2,1fr)}
.catcard .cgn{font-size:14px}}
/* ® en tipografía de despliegue: pequeño y elevado, como en el logo oficial.
`vertical-align` en em para que suba en proporción al cuerpo del texto y no
se descoloque entre un titular de 44px y una tarjeta de 15px. */
sup.reg{font-size:.44em;vertical-align:.62em;line-height:0;margin-left:.06em;
font-weight:inherit;letter-spacing:0}
/* En pantalla angosta el logo a 56px se come el ancho y empuja el botón de menú
contra el borde. La sangría del «DESDE 2013» se recalcula sola desde esta
variable, así que basta con cambiarla. */
@media (max-width:760px){
.mark{--logo-h:50px}
/* La cabecera es pegajosa: sus 106px estaban ahí TODO el rato, y en un
teléfono de 640px de alto útil eso es una sexta parte de la pantalla
ocupada permanentemente por el logo. A 88px el bloque de marca (50 del
logotipo + 12 + la fecha) sigue respirando y se devuelven 18px de lectura
en cada scroll. */
.hbar{height:88px;gap:14px}
/* El botón «Menú» medía 62x39: se ve grande porque tiene borde, pero el alto
real quedaba bajo los 44px que necesita el pulgar. */
.hbar .btn-menu,.hbar button{min-height:44px}
}
/* ============ CONSENTIMIENTO DE COOKIES ============
Una franja anclada abajo, no un velo que tape la página. Quien llega a leer
una ficha no debería tener que despachar un cartel antes de ver nada: el
sitio se puede leer con la franja puesta, y eso quita la prisa por aceptar
sin mirar.
Los dos botones de decisión son GEMELOS: mismo alto, mismo cuerpo, mismo
peso. Cambia el color —uno lleno, otro con borde—, que es jerarquía visual
normal, no un empujón. Hacer el rechazo más chico o más gris es la forma
habitual de simular consentimiento, y bajo la Ley 21.719 debe ser libre. */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:200;
background:var(--surface);border-top:1px solid var(--line);
box-shadow:0 -14px 40px rgba(20,22,30,.10);
transform:translateY(102%);transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.ck.abierto{transform:none}
.ck-in{max-width:1160px;margin:0 auto;padding:24px 28px 22px;
display:grid;grid-template-columns:1fr auto;gap:14px 40px;align-items:start}
.ck-txt{max-width:66ch}
.ck-txt h2{font-family:var(--f-disp);font-size:20px;font-weight:400;
letter-spacing:.01em;margin:0 0 7px;color:var(--ink)}
.ck-txt p{margin:0;font-size:14px;line-height:1.62;color:var(--soft)}
.ck-txt a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.ck-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-self:end}
.ck-btns .btn{min-height:44px;padding:0 20px;display:inline-flex;align-items:center;
font-size:13.5px;white-space:nowrap}
/* «Configurar» sí es un tercer nivel: no decide nada, solo abre el detalle. */
.ck-ver{background:none;border:0;padding:0 6px;min-height:44px;cursor:pointer;
font:inherit;font-size:13.5px;color:var(--soft);text-decoration:underline;
text-underline-offset:3px;text-decoration-color:var(--line-hard)}
.ck-ver:hover{color:var(--ink)}
.ck-cfg{grid-column:1/-1;border-top:1px solid var(--line);margin-top:4px;
padding-top:16px;display:grid;gap:2px}
/* `display:grid` vence al `display:none` que trae el atributo `hidden`, así que
el panel de categorías salía abierto desde el primer momento. Hay que
devolverle el `none` explícitamente. Es la misma trampa de siempre: una regla
de componente pisando una del navegador. */
.ck-cfg[hidden]{display:none}
.ck-fila{display:flex;gap:13px;align-items:flex-start;padding:13px 2px;cursor:pointer;
border-bottom:1px solid var(--line)}
.ck-fila:last-child{border-bottom:0}
.ck-fila.fija{cursor:default;opacity:.72}
/* Las casillas del sitio están reestilizadas para el formulario; aquí se
devuelven a su apariencia nativa, que es la que la gente reconoce como
«esto se puede marcar». */
.ck-fila input[type="checkbox"]{-webkit-appearance:checkbox;appearance:auto;
width:16px;height:16px;min-width:16px;flex:0 0 auto;margin:3px 0 0;padding:0;
border:0;border-radius:0;background:initial;accent-color:var(--brand)}
.ck-fila b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.ck-fila em{font-style:normal;font-size:11px;letter-spacing:.09em;
text-transform:uppercase;color:var(--faint)}
.ck-fila small{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;
color:var(--soft);max-width:78ch}
.ck-guardar{grid-column:1/-1;display:none;padding-top:2px}
.ck-in:has(#ckcfg:not([hidden])) .ck-guardar{display:block}
.ck-guardar .btn{min-height:44px}
@media(max-width:760px){
/* Apilado: los dos botones de decisión ocupan el ancho completo y quedan
exactamente iguales entre sí, que es lo que importa. */
/* AVISO MAS BAJO EN MOVIL. Medido el 2026-09-02: ocupaba 377 px, el 47%
de la pantalla de un telefono, y tapaba justo la franja de best
sellers. Lo que se toco es SOLO la caja: relleno, interlineado y los
dos botones, que pasan de apilados a lado a lado.
NO SE TOCO NI UNA PALABRA DEL TEXTO. Ese parrafo dice quien trata los
datos, para que, que la decision se puede cambiar y donde esta la
politica: es lo que la Ley 21.719 exige informar antes de pedir
consentimiento. Acortarlo para ganar pixeles es rebajar la
informacion previa, y eso no es una decision de maquetacion.
Y LOS DOS BOTONES SIGUEN SIENDO GEMELOS: lado a lado, mismo ancho,
mismo alto, mismo cuerpo. Hacer el de rechazo mas chico es la forma
habitual de simular consentimiento libre. */
.ck-in{grid-template-columns:1fr;padding:14px 18px 12px;gap:11px}
.ck-btns{justify-self:stretch;gap:8px}
.ck-btns .btn{flex:1 1 0;justify-content:center;min-height:42px;padding:0 10px;font-size:13px}
.ck-ver{width:100%;text-align:center;min-height:34px}
.ck-txt h2{font-size:16px;margin-bottom:4px}
.ck-txt p{font-size:13px;line-height:1.48}
.ck{max-height:70vh;overflow-y:auto}
}
/* ---- Volver ----
La flecha es el objetivo tactil, no un adorno: a 13px no se acertaba en
movil. Va como ::before para poder darle tamano propio, y el enlace tiene
40px de alto real. El margen negativo compensa el padding para que el
texto quede alineado con el contenido de abajo. */
.bhead .back,.pdet .back{
display:inline-flex;align-items:center;gap:9px;
min-height:40px;padding:8px 16px 8px 12px;margin:0 0 18px -12px;
border-radius:999px;line-height:1;
font-size:15px;font-weight:500;letter-spacing:-.005em;
color:var(--soft);text-decoration:none;
transition:color .16s ease,background-color .16s ease
}
.bhead .back::before,.pdet .back::before{
content:"\2190";font-size:20px;line-height:1;transform:translateY(-1px);
transition:transform .16s ease
}
.bhead .back:hover,.pdet .back:hover,
.bhead .back:focus-visible,.pdet .back:focus-visible{color:var(--brand);background:var(--surface)}
.bhead .back:hover::before,.pdet .back:hover::before{transform:translate(-3px,-1px)}
@media (prefers-reduced-motion:reduce){
.bhead .back,.pdet .back,.bhead .back::before,.pdet .back::before{transition:none}
.bhead .back:hover::before,.pdet .back:hover::before{transform:translateY(-1px)}
}
/* ---- Formación: una marca por panel, cada una con su calendario 2026 ----
Cada panel lleva su color de marca en --c, resuelto en el render por
accent(): el router se vuelve a ejecutar al cambiar el esquema del sistema,
así que el tinte oscuro entra solo. Se usa nativo — abre y cierra
sin JavaScript, es navegable por teclado y el lector de pantalla lo anuncia
como lo que es. */
.facad{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.fpanel{border:1px solid var(--line);background:var(--surface)}
.fpanel[open]{border-color:color-mix(in srgb,var(--c) 34%,var(--line))}
.fsum{display:flex;align-items:center;gap:18px;padding:20px 24px;cursor:pointer;
list-style:none;position:relative}
.fsum::-webkit-details-marker{display:none}
.fsum:hover{background:var(--sunk)}
.fsum:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
/* Filete de marca a la izquierda: es lo único que separa visualmente una marca
de otra cuando todas están cerradas. */
.fsum::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.fsum .fh{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.fsum .n{font-family:var(--f-disp);font-size:21px;color:var(--ink);line-height:1.1}
.fsum .n.logo{display:flex;align-items:center;min-height:24px;color:var(--ink)}
.fsum .n.logo svg{height:24px;width:auto;display:block}
.fsum .n.marca-nv{font-family:"Libre Bodoni",var(--f-disp);letter-spacing:.01em}
.fsum .k{font-size:13px;color:var(--soft)}
.fbadge{flex:none;font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:999px;
background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c);font-weight:600;
font-variant-numeric:tabular-nums}
.fbadge.vacio{background:var(--sunk);color:var(--faint);font-weight:400}
.fsum .fchev{flex:none;width:11px;height:11px;border-right:1.6px solid var(--faint);
border-bottom:1.6px solid var(--faint);transform:rotate(45deg);margin:-4px 4px 0 0;
transition:transform .18s ease}
.fpanel[open] .fsum .fchev{transform:rotate(-135deg);margin-top:3px;border-color:var(--c)}
.fbody{padding:4px 24px 24px;border-top:1px solid var(--line)}
/* El calendario: doce casillas, una por mes. El mes con sesiones muestra el
día; el mes sin nada queda en gris y sin peso, para que el ojo caiga solo
donde hay algo que leer. */
.fcal{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin:20px 0 0}
.fmes{border:1px solid var(--line);padding:9px 6px 8px;text-align:center;min-height:64px;
display:flex;flex-direction:column;gap:6px;align-items:center;background:var(--ground)}
.fmes .fm{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.fmes.hay{background:var(--surface);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.fmes.hay .fm{color:var(--c);font-weight:700}
.fdias{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.fdias b{font-size:12px;font-weight:600;line-height:1;padding:4px 5px;border-radius:3px;
background:var(--c);color:#fff;font-variant-numeric:tabular-nums}
.fnota{margin:14px 0 0;font-size:12.5px;color:var(--faint);line-height:1.5}
.flist{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column}
.flist li{display:flex;gap:18px;padding:15px 0;border-top:1px solid var(--line)}
.flist li:first-child{border-top:0;padding-top:4px}
.ffecha{flex:none;width:52px;text-align:center;border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.ffecha b{display:block;font-size:20px;line-height:1;padding:7px 0 5px;color:var(--ink);
font-variant-numeric:tabular-nums}
.ffecha span{display:block;font-size:9px;letter-spacing:.1em;padding:3px 0 4px;
background:var(--c);color:#fff}
.flist h4{margin:0 0 4px;font-size:15.5px;color:var(--ink)}
.flist p{margin:0;font-size:13px;color:var(--soft)}
/* ---- Expositores de la marca, en el panel de Formación ----
El retrato se guarda CUADRADO; acá se recorta en círculo y se le pone el aro.
Va así y no quemado en la imagen porque el aro tiene que cambiar de color
entre tema claro y oscuro: quemado, en modo oscuro quedaría un anillo gris
claro flotando sobre fondo negro.
El aro además resuelve un problema real de este set: dos de los siete
retratos vienen sobre fondo blanco, y sin borde se leían como cabezas
recortadas flotando en la página en vez de medallones. */
.spk{margin:0 0 20px}
.spk-t{
font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--faint);margin:0 0 12px
}
.spk-l{
display:flex;flex-wrap:wrap;gap:20px 26px;
list-style:none;margin:0;padding:0
}
.spk-l li{
display:flex;flex-direction:column;align-items:center;gap:8px;
width:176px;text-align:center
}
.spk-l img{
width:150px;height:150px;border-radius:50%;display:block;
object-fit:cover;border:1px solid var(--line-hard);background:var(--sunk)
}
.spk-l span{
font-size:13.5px;line-height:1.3;color:var(--soft);text-wrap:balance
}
/* Titulo profesional bajo el nombre. Va DENTRO del del nombre y no
como tercer hijo del