/* ==========================================================================
COMPONENTES
========================================================================== */
/* --------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------- */
.sitio-header {
background: var(--fondo-oscuro);
color: var(--texto-sobre-oscuro);
}
.sitio-header a {
color: inherit;
}
/* LAS DOS FILAS DEL HEADER COMPARTEN ANCHO.
El núcleo tiene width: fit-content, y el menú es la fila más ancha, así que
es él quien fija ese ancho. La fila de arriba lo ocupa entero.
Con eso, el ícono de Instagram queda alineado con la I de «Inicio» y el
extremo derecho del selector de idioma con la g de «Blog», que es lo pedido.
El logo va en la columna del medio y queda centrado respecto del menú. */
.header-nucleo {
width: fit-content;
max-width: calc(100% - var(--e-6));
margin-inline: auto;
position: relative;
}
.header-barra {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--e-4);
padding-block: var(--e-4);
}
.header-barra .marca {
justify-self: center;
}
.header-instagram {
display: inline-flex;
padding: var(--e-2);
color: rgba(255, 255, 255, 0.75);
transition: color var(--transicion);
}
.header-instagram:hover,
.header-instagram:focus-visible {
color: var(--papel);
}
/* ---- El fade al hacer scroll ---------------------------------------------
Lo enciende assets/js/header.js, que es lo único que necesita JavaScript en
todo el sitio junto con el parallax. Sin JS, esta clase nunca se aplica y el
header queda visible: no se pierde navegación. */
/* El header FLOTA sobre el carrusel, no ocupa espacio propio: así, cuando hace
fade, no deja una franja del color de fondo donde antes estaba la barra. El
carrusel arranca en el borde superior de la página y el header queda encima.
En las páginas interiores sí empuja el contenido, con el padding de abajo. */
.sitio-header {
position: fixed;
inset-inline: 0;
top: 0;
z-index: 50;
/* Transparencia reducida un 40%: de 0,28 y 0,58 de aire a 0,17 y 0,35. */
background: linear-gradient(rgb(0 0 0 / 0.83), rgb(0 0 0 / 0.65) 70%, rgb(0 0 0 / 0.25));
transition: opacity 0.35s ease, translate 0.35s ease;
}
/* EN LAS PÁGINAS INTERIORES EL HEADER OCUPA SU LUGAR, NO FLOTA.
Antes iba fijo también acá, y a main se le daba un padding-top de 8,5 rem
calculado a ojo para dejarle el hueco. En el teléfono el header mide más que
eso, así que el título de la página quedaba tapado por el menú: se veía en
primera consulta, en contacto y en blog. Con position: sticky el hueco lo
reserva el navegador con la altura real, y el header se sigue quedando
pegado arriba al hacer scroll, que era lo que se quería.
No hay número que mantener, así que no puede volver a desincronizarse
cuando cambie el tamaño del logo, el cuerpo del menú o la traducción de una
etiqueta. La portada sigue con el header flotando sobre el carrusel. */
body:not(.con-hero) .sitio-header {
position: sticky;
}
body:not(.con-hero) main {
padding-top: var(--e-5);
}
/* Una página interior que abre con una franja oscura a todo el ancho
(/oralmapp, con heroPropio: true en su front matter) no deja ese aire: la
franja arranca pegada al header, que es del mismo color, y se leen como una
sola pieza. El header sigue sticky y opaco como en el resto del interior. */
body.con-hero-propio main {
padding-top: 0;
}
/* EN LAS PÁGINAS INTERIORES EL HEADER ES OPACO.
El degradado existe para la portada, donde el header flota sobre el carrusel
y tiene que dejar ver la foto. En contacto, primera consulta y las demás no
hay imagen detrás: el degradado sólo dejaba asomar el fondo de la página por
encima del contenido, y se leía como una franja translúcida sin motivo.
Acá va el color plano, sin transparencia. */
body:not(.con-hero) .sitio-header {
background: var(--fondo-oscuro);
}
/* El nav vive dentro del núcleo, que es angosto, pero la línea de separación
tiene que cruzar toda la pantalla como en el sitio viejo. Se dibuja con un
pseudo-elemento que se estira más allá del núcleo. */
.nav-principal {
position: relative;
}
.nav-principal::before {
content: "";
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
width: 100vw;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sitio-header--oculto {
opacity: 0;
translate: 0 -100%;
pointer-events: none;
}
/* Si alguien llega con el teclado a un enlace del header escondido, vuelve. */
.sitio-header:focus-within {
opacity: 1;
translate: 0;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.sitio-header {
transition: none;
}
}
.marca {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.marca__logo {
width: auto;
height: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
}
.header-acciones {
display: flex;
align-items: center;
gap: var(--e-5);
}
/* El header es sticky, así que el ancla #nosotros no puede quedar debajo. */
:target {
scroll-margin-top: 7rem;
}
/* Navegación principal ----------------------------------------------------- */
.nav-lista {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--e-2) var(--e-6);
margin: 0;
padding: var(--e-3) 0;
list-style: none;
}
.nav-lista a {
display: inline-block;
padding-block: var(--e-2);
font-size: var(--tam-chico);
letter-spacing: 0.04em;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--transicion), color var(--transicion);
}
.nav-lista a:hover {
color: var(--arena);
border-bottom-color: var(--arena);
}
.nav-lista a[aria-current="page"] {
color: var(--arena);
border-bottom-color: var(--arena);
}
/* Selector de idioma ------------------------------------------------------- */
/* Sin JavaScript: tres enlaces. El vigente se marca con aria-current. */
.selector-idioma {
display: flex;
align-items: center;
gap: var(--e-1);
}
.selector-idioma__opcion {
padding: var(--e-1) var(--e-2);
font-size: var(--tam-micro);
font-weight: 500;
letter-spacing: 0.08em;
text-decoration: none;
color: rgba(255, 255, 255, 0.62);
border-radius: var(--radio);
transition: color var(--transicion), background-color var(--transicion);
}
.selector-idioma__opcion:hover {
color: var(--papel);
background: rgba(255, 255, 255, 0.1);
}
/* El idioma vigente lleva el mismo estilo que el botón AGENDA ONLINE del
hero: fondo oscuro translúcido, borde claro y texto blanco. Antes era un
chip arena, que no se parecía a nada más del sitio. */
.selector-idioma__opcion[aria-current="true"] {
color: var(--papel);
background: rgb(0 0 0 / 0.55);
border: 1px solid rgb(255 255 255 / 0.75);
border-radius: 2rem;
padding: var(--e-1) var(--e-4);
backdrop-filter: blur(2px);
}
.selector-idioma__separador {
color: rgba(255, 255, 255, 0.28);
font-size: var(--tam-micro);
}
/* ESTE BLOQUE VA AL FINAL, DESPUES DE .marca__logo, .nav-lista y del
selector de idioma. Con la misma especificidad gana la ultima regla
declarada: puesto antes, el alto del logo y el cuerpo del menu los
seguian fijando las reglas base y esto no hacia nada. Mismo tropiezo
que tuvo .boton--hero contra .boton. */
/* EN PANTALLA ANGOSTA, TODO EN UNA FILA.
Antes el logo se iba a una fila propia y los dos íconos quedaban debajo. Con
el menú en dos líneas, el header ocupaba unos 190 px: en un teléfono de 915
px de alto es más de la quinta parte de la pantalla, sólo para el encabezado.
Acá va la misma estructura que en escritorio —Instagram, logo, idiomas— pero
apretada: el núcleo ocupa el ancho completo en vez de ajustarse al menú, el
logo baja a 2 rem y el aire se reduce. */
@media (max-width: 34rem) {
.header-nucleo {
width: 100%;
max-width: 100%;
padding-inline: var(--e-4);
}
.header-barra {
grid-template-columns: auto 1fr auto;
gap: var(--e-2);
padding-block: var(--e-3);
}
.header-instagram {
padding: var(--e-1);
}
.marca__logo {
height: 2rem;
}
/* EL MENU EN DOS FILAS, A PROPOSITO: CUATRO Y TRES.
Los destinos no entran en una línea de teléfono sin bajar el cuerpo a
13 px, y ahí los enlaces quedan con menos de 30 px de alto: incómodos de
tocar. Con flex-wrap, además, el corte lo decidía el ancho de cada
pantalla: a 412 px quedaba «Blog» solo en la segunda fila, como un error.
Con grid el reparto es siempre el mismo, en cualquier ancho y en los tres
idiomas. Se lee como una decisión y no como un desborde.
Eran seis destinos en 3 y 3. El 11 de octubre de 2026 entró el séptimo,
OralmAPP, y con tres columnas quedaba 3, 3 y uno solo abajo: eso sí se
lee como un desborde. Con cuatro columnas queda 4 y 3. La primera fila es
la más larga en los tres idiomas —«Inicio · Nosotros · Servicios ·
OralmAPP»— y entra en 360 px con el cuerpo de 14 px; «Primera consulta»,
el destino más largo, va en la segunda, que tiene más aire.
Descartado el botón de hamburguesa: son siete destinos, entran a la vista,
y esconderlos agrega un toque para llegar a cualquier lado y JavaScript
que hoy no hace falta. Descartado también el desplazamiento lateral, que
deja «Blog» fuera de la pantalla sin avisar. */
.nav-lista {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center;
gap: 0 var(--e-4);
padding: var(--e-1) 0 var(--e-2);
}
.nav-lista li {
text-align: center;
}
.nav-lista a {
font-size: 0.875rem;
letter-spacing: 0.02em;
padding-block: var(--e-1);
}
}
/* --------------------------------------------------------------------------
SECCIONES
-------------------------------------------------------------------------- */
.seccion {
padding-block: var(--ritmo-seccion);
}
.seccion--tibia {
background: var(--fondo-seccion);
}
.seccion--gris {
background: var(--gris);
}
.seccion--oscura {
background: var(--fondo-oscuro);
color: var(--texto-sobre-oscuro);
}
/* Los enlaces sueltos de una sección oscura van en arena, pero NO los botones:
un .boton--acento tiene fondo arena, y si además se le pinta el texto de
arena queda invisible. El :not() evita toda esa familia de errores. */
.seccion--oscura a:not(.boton) {
color: var(--arena);
}
.seccion__kicker {
display: block;
margin-bottom: var(--e-3);
font-family: var(--fuente-cuerpo);
font-size: var(--tam-micro);
font-weight: 600;
letter-spacing: var(--tracking-etiqueta);
text-transform: uppercase;
color: var(--texto-acento);
}
/* Sobre fondo oscuro el acento va en --arena, no en --arena-texto: el token
oscurecido existe para leerse sobre claro, y acá haría lo contrario. */
.seccion--oscura .seccion__kicker,
.hero .seccion__kicker {
color: var(--arena);
}
/* El sitio viejo pone los títulos de sección en color arena, no en tinta:
rgb(192,178,160), que es --marca-arena exacto, a 40px.
Acá se usa --arena-texto (#76634c) y NO el #C0B2A0 del viejo. Ese tono sobre
los fondos claros da 1.87:1, y WCAG AA pide 3:1 para texto grande. Es el
mismo criterio con el que se resolvió el botón de acento: se copia la
intención de la marca, no el incumplimiento. Ver la excepción documentada en
tokens.css. */
/* Centrados y en versalitas, como el sitio viejo. El punto decorativo que
llevaban debajo se quitó por decisión del cliente. */
/* El más oscuro de la paleta de marca: --marca-carbon (#4c4843). Sobre los
fondos claros da 8,2:1, muy por encima del 3:1 que WCAG AA pide para texto
grande. Antes era --arena-texto, que es un marrón derivado. */
.seccion__titulo {
margin-bottom: var(--e-6);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--marca-carbon);
}
/* El kicker acompaña al título, así que también va centrado. */
.seccion__kicker {
text-align: center;
}
/* ---- Nosotros en dos columnas -------------------------------------------- */
.nosotros__columnas {
columns: 2;
column-gap: var(--e-9);
column-rule: 1px solid var(--borde);
margin-top: var(--e-6);
}
.nosotros__columnas p {
margin: 0 0 var(--e-5);
/* Sin esto un párrafo se puede partir dejando una línea sola arriba de la
otra columna. */
break-inside: avoid;
}
/* En pantalla angosta, una sola columna: dos columnas de 3 líneas cada una no
se leen. */
@media (max-width: 52rem) {
.nosotros__columnas {
columns: 1;
}
}
/* ---- La cita de cierre ---------------------------------------------------
Centrada y en itálica, fuera de las columnas, como el sitio viejo. No lleva
el borde lateral del blockquote general. */
.cita-cierre {
max-width: 46rem;
margin: var(--e-8) auto 0;
padding: 0;
border: 0;
text-align: center;
font-style: italic;
color: var(--texto-secundario);
}
/* Sobre fondo oscuro, blanco. El carbón de la paleta no se leería, y el arena
quedaba apagado contra la foto y el fondo oscuro. */
.seccion--oscura .seccion__titulo {
color: var(--papel);
}
.seccion__intro {
max-width: var(--ancho-lectura);
color: var(--texto-secundario);
}
/* --------------------------------------------------------------------------
HERO — carrusel de 7, sin JavaScript
La pista es un contenedor con scroll horizontal y scroll-snap. Cada slide
ocupa el 100% del ancho y lleva sus propias flechas, que son anclas al slide
anterior y al siguiente; el primero y el último cierran el círculo.
Sin JS: no hay autoplay ni puntos de posición. Con el teclado, las flechas
son enlaces y entran en el orden de tabulación como cualquier otro.
-------------------------------------------------------------------------- */
.hero {
position: relative;
background: var(--fondo-oscuro);
overflow: hidden;
/* Sin margen arriba: el carrusel arranca en el borde de la página y el
header flota encima. */
margin-top: 0;
}
.hero__pista {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Sin barra visible: la navegación son las flechas. Se sigue pudiendo
arrastrar con el dedo, que es como se usa en teléfono. */
scrollbar-width: none;
}
.hero__pista::-webkit-scrollbar {
display: none;
}
.hero__slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: center;
/* Sin esto, el ancla del navegador desplaza también la página vertical. */
scroll-margin: 0;
}
.hero__imagen {
width: 100%;
/* ALTO COMPLETO DE LA VENTANA, a propósito.
Antes era min(78vh, 40rem): en una ventana de 735 px daba 573, y los 162
px que sobraban dejaban ver el blanco de la sección siguiente debajo del
carrusel. Con el header flotando encima, ese blanco aparecía y desaparecía
al hacer scroll junto con el fade, que es la franja reportada.
Con el alto completo, el carrusel llega hasta el borde inferior de la
ventana y el header queda encima de la imagen en todo momento.
svh y no vh: en el teléfono, vh mide la ventana SIN la barra del navegador,
así que el hero queda más alto que lo visible y empuja el contenido. svh es
el alto chico, el que de verdad se ve. El vh de arriba es el respaldo para
los navegadores que no entienden svh. */
height: 100vh;
height: 100svh;
object-fit: cover;
object-position: 50% 40%;
display: block;
}
/* Quien pidió menos movimiento no recibe el desplazamiento suave. */
@media (prefers-reduced-motion: reduce) {
.hero__pista {
scroll-behavior: auto;
}
}
/* ---- Las flechas ---------------------------------------------------------- */
.hero__flecha {
position: absolute;
top: 50%;
translate: 0 -50%;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
font-size: 2.5rem;
line-height: 1;
text-decoration: none;
color: var(--papel);
/* Sombra en vez de fondo: sobre una foto clara el blanco puro desaparece,
y un fondo sólido taparía la imagen, que es lo que se quiere mostrar. */
text-shadow: 0 1px 6px rgb(0 0 0 / 0.55);
opacity: 0.85;
transition: opacity var(--transicion);
}
.hero__flecha:hover,
.hero__flecha:focus-visible {
opacity: 1;
}
.hero__flecha--ant {
left: var(--e-3);
}
.hero__flecha--sig {
right: var(--e-3);
}
/* En pantallas angostas el botón ocupa el ancho y las flechas se achican, para
no comerse la foto. */
@media (max-width: 40rem) {
/* EN PANTALLA ANGOSTA sube por encima del botón del chat, que abajo ocupa
todo el ancho útil. Ancho completo menos los márgenes, como estaba, pero
despegado del piso: el chat mide unos 3 rem más su separación. */
.boton--hero {
left: var(--e-4);
right: var(--e-4);
transform: none;
bottom: calc(var(--e-4) + 4.25rem);
}
.hero__flecha {
width: 2.25rem;
height: 2.25rem;
font-size: 2rem;
}
}
/* --------------------------------------------------------------------------
BOTONES
-------------------------------------------------------------------------- */
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
padding: var(--e-3) var(--e-6);
min-height: 2.875rem;
font-family: var(--fuente-cuerpo);
font-size: var(--tam-chico);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
border: 1px solid transparent;
border-radius: var(--radio);
transition: background-color var(--transicion), color var(--transicion),
border-color var(--transicion);
}
/* Acento sobre oscuro: 6.09:1. */
.boton--acento {
background: var(--arena);
color: var(--tinta);
}
.boton--acento:hover {
background: var(--papel);
color: var(--tinta);
}
.boton--primario {
background: var(--tinta);
color: var(--papel);
}
.boton--primario:hover {
background: var(--arena-texto);
color: var(--papel);
}
.boton--contorno {
background: transparent;
border-color: currentColor;
color: inherit;
}
.boton--contorno:hover {
background: rgba(255, 255, 255, 0.1);
color: inherit;
}
/* ---- El botón sobre la imagen del hero -----------------------------------
Vive fuera de la pista del carrusel, así que queda quieto mientras los
slides pasan por detrás.
CENTRADO, Y NO ABAJO A LA DERECHA COMO EL SITIO VIEJO. Ahí es donde vive el
botón del chat, que es fijo y flota por encima de todo: los dos se pisaban, y
el globo de saludo tapaba el botón entero. El sitio viejo no tenía chat.
VA ACÁ, DESPUÉS DE .boton, y no en la sección del hero. Estaba antes y la
regla general lo pisaba: misma especificidad, gana la que va después en el
archivo. Por eso salía con esquinas rectas y fondo sólido en vez de la
píldora con borde fino del original. */
.boton--hero {
position: absolute;
/* El translate y no `margin: auto` con left/right en 0: así el ancho lo sigue
dando el contenido y el botón no se estira a todo el hero. */
left: 50%;
transform: translateX(-50%);
bottom: clamp(var(--e-5), 6vh, var(--e-8));
z-index: 2;
background: rgb(0 0 0 / 0.55);
color: var(--papel);
border-color: rgb(255 255 255 / 0.75);
backdrop-filter: blur(2px);
border-radius: 2rem;
padding-inline: var(--e-7);
}
.boton--hero:hover,
.boton--hero:focus-visible {
background: var(--papel);
color: var(--tinta);
border-color: var(--papel);
}
.boton--bloque {
width: 100%;
}
/* --------------------------------------------------------------------------
GRILLAS Y TARJETAS
-------------------------------------------------------------------------- */
.grilla {
display: grid;
gap: var(--e-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.tarjeta {
display: flex;
flex-direction: column;
gap: var(--e-3);
padding: var(--e-6);
background: var(--papel);
border: var(--borde-acento);
border-radius: var(--radio-grande);
transition: all 0.4s ease-in-out;
}
/* La sombra y la duración salen medidas de las tarjetas de servicio del sitio
viejo. Ver docs/relevamiento-visual.md §6. */
.tarjeta:hover {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* --------------------------------------------------------------------------
SECCIÓN CON FOTO DE FONDO, Y TARJETAS DE VIDRIO ENCIMA
Réplica del sitio viejo. El fondo es un ![]()
recortado por el contenedor,
no un background-image: ver partials/fondo-parallax.njk.
-------------------------------------------------------------------------- */
.seccion--foto {
position: relative;
overflow: hidden;
isolation: isolate;
background: var(--fondo-oscuro);
}
.fondo-foto {
position: absolute;
inset: 0;
z-index: -1;
}
/* EL TIENE QUE TENER ALTO DEFINIDO.
Acá estaba el bug del parallax. El ![]()
llevaba height: 160%, pero su
contenedor es el , que tenía alto automático. Un porcentaje contra
un alto indefinido se resuelve como 'auto', así que la imagen quedaba en su
alto natural, sin ningún margen para desplazarse: el parallax movía la
imagen exactamente lo mismo que se movía la sección y no se percibía nada.
Con el picture en absoluto e inset: 0, el alto queda definido y el 120% del
img se resuelve de verdad. */
.fondo-foto picture {
position: absolute;
inset: 0;
display: block;
}
.fondo-foto__img {
position: absolute;
left: 0;
width: 100%;
/* 120% con -10% arriba: la imagen sobresale un 10% por arriba y otro 10% por
abajo, y ése es todo el margen que el parallax necesita para desplazarse.
No más que eso a propósito: la caja de la franja tiene la proporción de la
foto para que se vea entera, y cada punto de sobreancho vuelve a recortarla.
120% es el equilibrio entre que el efecto se note y que la cara se vea
completa. */
top: -10%;
height: 120%;
object-fit: cover;
will-change: transform;
}
/* Un velo oscuro entre la foto y el contenido. Sin esto el texto blanco choca
con las zonas claras de la foto y deja de leerse. */
.seccion--foto::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(0 0 0 / 0.62);
}
.seccion__sobre-foto,
.seccion--foto .seccion__titulo,
.seccion--foto .seccion__kicker,
.seccion--foto .seccion__intro {
color: var(--texto-sobre-oscuro);
}
.seccion--foto .seccion__titulo,
.seccion--foto .seccion__kicker {
color: var(--papel);
}
/* Dos columnas, como el viejo, no tres. */
.grilla--dos {
grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
/* ---- La tarjeta de vidrio ------------------------------------------------ */
.tarjeta--vidrio {
position: relative;
background: rgb(20 18 16 / 0.34);
border: 1px solid rgb(255 255 255 / 0.28);
backdrop-filter: blur(3px);
color: var(--texto-sobre-oscuro);
}
.tarjeta--vidrio .tarjeta__titulo,
.tarjeta--vidrio .tarjeta__texto {
color: var(--papel);
transition: transform 0.4s ease-in-out, color 0.4s ease-in-out,
left 0.4s ease-in-out;
}
/* EL TÍTULO SE CENTRA CON UNA TRANSICIÓN, y eso no se puede hacer con
text-align: esa propiedad no interpola, salta de golpe.
Se mueve con POSICIÓN RELATIVA, no con margen. Es la diferencia entre que la
página se recomponga o no:
· con margin-left: 50%, al título le queda la mitad del ancho disponible, y
uno largo como «Medicina Estética – No quirúrgica» pasa a dos líneas. Eso
cambia el alto de la tarjeta, el de la fila y el de la sección, y el
parallax recalcula contra esa altura nueva. Se veía como un salto de zoom
en la foto de fondo al pasar de una tarjeta a la de al lado.
· left es un desplazamiento de posición relativa: no toca el ancho usado ni
el flujo, así que el texto envuelve igual en reposo y en hover. El alto no
se mueve, y la foto tampoco.
left y transform interpolan las dos, así que la animación se conserva. */
.tarjeta--vidrio .tarjeta__titulo {
position: relative;
width: fit-content;
left: 0;
}
/* SIN @media (hover: hover), Y A PROPÓSITO.
Estas reglas estaban dentro de esa media query para evitar el hover pegajoso
en táctil. El problema es que un equipo de escritorio con pantalla táctil
—un portátil común hoy— puede reportar hover: none, y entonces el efecto no
aparece en ningún lado. Pasó: en el equipo del cliente sólo se veía la
sombra genérica, que es la única regla que quedaba fuera.
El intercambio es claro: el hover pegajoso al tocar en un teléfono es un
detalle cosmético que se corrige tocando otro lado; que el efecto no exista
en el escritorio del cliente no. Va sin condición. */
.tarjeta--vidrio:hover {
background: rgb(242 242 242 / 0.97);
border-color: rgb(242 242 242 / 0.97);
}
/* El título se va al centro de la tarjeta, y en el mismo movimiento pasa de
blanco a tinta junto con el cuerpo. */
.tarjeta--vidrio:hover .tarjeta__titulo {
color: var(--tinta);
left: 50%;
transform: translateX(-50%) translateY(-2px);
}
.tarjeta--vidrio:hover .tarjeta__texto {
color: var(--tinta);
transform: translateY(-6px);
}
/* En táctil el botón no se puede revelar con hover, y como no lleva a ningún
lado tampoco hace falta: la tarjeta se ve completa desde el principio. */
@media (prefers-reduced-motion: reduce) {
.tarjeta--vidrio,
.tarjeta--vidrio .tarjeta__titulo,
.tarjeta--vidrio .tarjeta__texto {
transition: none;
}
.fondo-foto__img {
transform: none !important;
}
}
/* Quien pidió menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce) {
.tarjeta {
transition: none;
}
}
.seccion--tibia .tarjeta {
background: var(--papel);
}
.tarjeta__titulo {
margin: 0;
font-size: var(--tam-h3);
}
.tarjeta__texto {
margin: 0;
color: var(--texto-secundario);
font-size: var(--tam-chico);
}
/* Ficha de persona --------------------------------------------------------- */
/* --------------------------------------------------------------------------
FICHAS DEL EQUIPO
Réplica del sitio viejo, medida en docs/relevamiento-visual.md §2:
foto 372×368 sin radio, y debajo un panel oscuro con el texto en blanco.
El panel es una capa aparte (.ficha__panel), no el contenedor del texto. En
el hover se escala verticalmente, y si el texto viviera dentro se estiraría
con él un 30%. En el sitio viejo son hermanos por el mismo motivo.
-------------------------------------------------------------------------- */
/* LAS TRES FICHAS, DEL MISMO ALTO.
La grilla ya las estira a la altura de la mas alta, pero eso solo movia el
borde de la caja: el panel oscuro seguia terminando donde terminaba su texto,
asi que los tres cerraban a distinta altura. Betzabeth es la mas larga porque
su cargo ocupa dos lineas y su bio es mayor.
Con height: 100% en la ficha y flex: 1 en el bloque de texto, el panel toma
el alto sobrante y los tres cierran en la misma linea. */
.ficha {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
/* El panel crece hacia arriba sobre la foto: sin esto se sale de la ficha. */
overflow: hidden;
}
.ficha__retrato {
aspect-ratio: 372 / 368;
width: 100%;
object-fit: cover;
border-radius: 0;
background: var(--gris);
display: block;
}
.ficha__texto {
position: relative;
/* Toma todo el alto que sobre, para que las tres fichas cierren parejas. */
flex: 1;
/* Ajustado contra las capturas del sitio viejo (MIGRACION WEB/153253): el
panel arranca pegado a la foto, con el nombre cerca del borde superior, y
deja más aire abajo. Ese aire de abajo es además el margen que el texto
necesita para subir en el hover sin salirse. */
padding: var(--e-4) var(--e-5) var(--e-7);
}
.ficha__panel {
position: absolute;
inset: 0;
z-index: 0;
background: var(--tinta);
/* Origen abajo, no al centro: así el scaleY crece SÓLO hacia arriba, sobre la
foto, y el borde inferior de la ficha no se mueve. Ver la nota del hover. */
transform-origin: bottom;
}
.ficha__nombre,
.ficha__rol,
.ficha__bio {
position: relative;
z-index: 1;
margin: 0;
color: var(--texto-sobre-oscuro);
}
/* Los tres tamaños salen medidos del sitio viejo, en px y no en tokens: son
los valores exactos de la ficha, no los de la escala tipográfica del sitio. */
.ficha__nombre {
font-size: 23px;
line-height: 1.2;
}
/* En las capturas el rol va pegado al nombre, casi sin aire, y la bio sí
arranca separada. */
.ficha__rol {
margin-top: var(--e-1);
font-size: 15px;
line-height: 1.3;
}
.ficha__bio {
margin-top: var(--e-3);
font-size: 14px;
line-height: 19.6px;
}
/* ---- El hover -------------------------------------------------------------
Los valores salen medidos del sitio viejo, con UNA corrección necesaria.
El sitio viejo aplica al panel scaleY(1.3) MÁS translateY(+26px), con origen
al centro. Copiado literal, eso no funciona acá: con origen centro el panel
crece 0,15 × su altura hacia arriba y el +26px se la come casi entera. Con el
panel de 206 px que dan nuestras bios, el borde superior sube 4,9 px mientras
el nombre sube 38: el nombre se escapa del panel y queda en blanco sobre la
foto. Probado y visto.
El motivo de la diferencia es que en Wix hay DOS paneles: sus reglas traen
"opacity: 1; visibility: visible" en el hover, o sea que el que se escala
está oculto en reposo y aparece encima del otro. Nuestro marcado tiene uno
solo, y la altura la define el texto, no un valor fijo.
La corrección conserva el 1.3 medido y descarta el translateY, que sólo
existía para compensar el origen al centro: con transform-origin: bottom el
panel crece 0,3 × su altura hacia arriba, entre 57 y 62 px según la ficha, y
contiene con margen la subida más grande, que es la de la bio (53 px).
Sólo se aplica donde el hover existe de verdad: en táctil, :hover queda
pegado después de tocar, y con un panel que crece 30% eso se lee como un
defecto, no como un efecto.
En móvil no se pierde nada: el hover no revela contenido. En reposo ya se
ven el nombre, el rol y la bio; el movimiento es decorativo.
-------------------------------------------------------------------------- */
/* Mismo criterio que las tarjetas de servicio: sin media query, porque un
escritorio con pantalla táctil puede reportar hover: none y quedarse sin el
efecto. Ver la nota de .tarjeta--vidrio:hover. */
.ficha__panel,
.ficha__nombre,
.ficha__rol,
.ficha__bio {
transition: all 0.4s ease-in-out;
}
/* scaleY(1.3) con origen abajo hace crecer el panel 0,3 × su altura hacia
arriba: entre 57 y 62 px con las tres bios actuales. Alcanza para contener
la subida más grande, que es la de la bio (53 px). */
.ficha:hover .ficha__panel {
transform: scaleY(1.3);
}
.ficha:hover .ficha__nombre {
transform: translateY(-38px);
}
.ficha:hover .ficha__rol {
transform: translateY(-41px);
}
.ficha:hover .ficha__bio {
transform: translateY(-53px);
}
/* Quien pidió menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce) {
.ficha__panel,
.ficha__nombre,
.ficha__rol,
.ficha__bio {
transition: none;
}
.ficha:hover .ficha__panel,
.ficha:hover .ficha__nombre,
.ficha:hover .ficha__rol,
.ficha:hover .ficha__bio {
transform: none;
}
}
/* Marcador de imagen todavía no cargada. */
.marcador-imagen {
display: grid;
place-items: center;
aspect-ratio: 1 / 1;
background: repeating-linear-gradient(
45deg,
var(--gris),
var(--gris) 10px,
var(--papel-tibio) 10px,
var(--papel-tibio) 20px
);
border: 1px dashed var(--linea);
border-radius: var(--radio-grande);
color: var(--texto-secundario);
font-size: var(--tam-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
RESUMEN DE LA CONSULTA — versión corta de la home
Precio, una línea, y el botón al detalle. Sin formas de pago.
-------------------------------------------------------------------------- */
.consulta-resumen {
max-width: var(--ancho-lectura);
margin-top: var(--e-6);
padding: var(--e-6) var(--e-7);
background: var(--papel);
border: 2px solid var(--arena);
border-radius: var(--radio-grande);
}
.consulta-resumen__precio {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--e-3);
margin-bottom: var(--e-4);
}
.consulta-resumen__monto {
font-family: var(--fuente-titulo);
font-size: var(--tam-h1);
line-height: 1;
}
.consulta-resumen__duracion {
font-size: var(--tam-chico);
letter-spacing: var(--tracking-etiqueta);
text-transform: uppercase;
color: var(--texto-secundario);
}
.consulta-resumen__incluye {
margin-bottom: var(--e-5);
color: var(--texto-secundario);
}
.consulta-resumen__accion {
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
BLOQUE DE PAGO DE LA PRIMERA CONSULTA — sólo en /primera-consulta
Diseño pedido por el cliente el 5 de septiembre de 2026 sobre su captura:
dos tarjetas iguales lado a lado y, debajo, una franja aparte con la
coordinación del horario.
Sin colores nuevos. Todo sale de tokens.css: el papel de las tarjetas, la
línea de los bordes, el arena-texto de las etiquetas, la tinta de los
títulos y los importes, y el papel-tibio de la franja de abajo.
-------------------------------------------------------------------------- */
.bloque-pago__kicker {
margin: 0 0 var(--e-3);
font-size: var(--tam-micro);
font-weight: 600;
letter-spacing: var(--tracking-etiqueta);
text-transform: uppercase;
color: var(--texto-acento);
}
.bloque-pago__titulo {
margin: 0 0 var(--e-4);
font-size: var(--tam-h2);
}
.bloque-pago__intro {
max-width: var(--ancho-lectura);
margin: 0 0 var(--e-7);
}
/* --- Las dos tarjetas ----------------------------------------------------- */
.pagos {
display: grid;
gap: var(--e-5);
}
@media (min-width: 52rem) {
.pagos {
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
}
.pago {
display: flex;
flex-direction: column;
padding: var(--e-6);
background: var(--papel);
border: var(--borde-fino);
}
/* La recomendada se distingue por una sola cosa: el filete de arriba. Ni un
fondo distinto ni un color nuevo, que competirían con el importe. */
.pago--recomendada {
border-top: 3px solid var(--arena-texto);
}
.pago__etiqueta {
margin: 0 0 var(--e-3);
font-size: var(--tam-micro);
font-weight: 600;
letter-spacing: var(--tracking-etiqueta);
text-transform: uppercase;
color: var(--texto-acento);
}
.pago--alternativa .pago__etiqueta {
color: var(--texto-secundario);
}
.pago__titulo {
margin: 0 0 var(--e-3);
font-size: var(--tam-h3);
font-weight: 400;
}
.pago__monto {
margin: 0 0 var(--e-5);
font-family: var(--fuente-titulo);
font-size: var(--tam-h2);
line-height: 1;
}
/* El dato de cada opción —el alias en una, los medios en la otra— separado por
una línea, para que las dos tarjetas se lean a la misma altura. */
.pago__dato {
padding-top: var(--e-4);
border-top: var(--borde-fino);
}
.pago__dato-etiqueta {
margin: 0 0 var(--e-2);
font-size: var(--tam-micro);
font-weight: 600;
letter-spacing: var(--tracking-etiqueta);
text-transform: uppercase;
color: var(--texto-secundario);
}
.pago__dato-valor {
margin: 0;
}
/* El alias en monoespaciada y seleccionable de un clic: así se copia sin un
botón que dependa de JavaScript. */
.pago__dato-valor--alias {
font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
font-size: 1.0625rem;
letter-spacing: 0.01em;
user-select: all;
}
/* El botón se pega abajo: con textos de distinto largo, las dos tarjetas
terminan igual. */
.pago__accion {
margin-top: auto;
padding-top: var(--e-3);
}
.pago .pago__accion {
margin-top: auto;
}
.pago__dato + .pago__accion {
margin-top: var(--e-6);
}
/* El de contorno hereda el color del texto, y acá el fondo es claro. */
.pago--alternativa .pago__accion {
color: var(--tinta);
}
/* --- La franja del horario ------------------------------------------------ */
.agenda {
display: grid;
gap: var(--e-5);
margin-top: var(--e-6);
padding: var(--e-6);
background: var(--fondo-seccion);
}
@media (min-width: 52rem) {
.agenda {
grid-template-columns: 1fr auto;
align-items: center;
}
}
.agenda__titulo {
margin: 0 0 var(--e-2);
font-size: var(--tam-h3);
font-weight: 400;
}
.agenda__bajada {
margin: 0;
color: var(--texto-secundario);
}
.agenda__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e-3);
}
.agenda__acciones .boton {
color: var(--tinta);
}
/* --------------------------------------------------------------------------
AVISO DE IDIOMA EN LAS PÁGINAS LEGALES
-------------------------------------------------------------------------- */
.aviso-idioma {
max-width: var(--ancho-lectura);
margin-bottom: var(--e-7);
padding: var(--e-5) var(--e-6);
background: var(--papel-tibio);
border-left: 3px solid var(--arena-texto);
border-radius: 0 var(--radio-grande) var(--radio-grande) 0;
}
.aviso-idioma__titulo {
margin-bottom: var(--e-3);
font-size: var(--tam-h3);
}
.aviso-idioma p {
margin-bottom: var(--e-4);
font-size: var(--tam-chico);
color: var(--texto-secundario);
}
.aviso-idioma p:last-child {
margin-bottom: 0;
}
.aviso-idioma__enlace {
font-size: var(--tam-chico);
font-weight: 500;
color: var(--texto-acento);
}
/* --------------------------------------------------------------------------
PROSA · páginas legales y artículos
-------------------------------------------------------------------------- */
.prosa {
max-width: var(--ancho-lectura);
}
.prosa > * + * {
margin-top: var(--e-4);
}
/* La linea de cada h2 separa una seccion de la anterior. En el PRIMERO no hay
nada antes que separar: justo arriba esta el borde del encabezado de la
pagina, asi que quedaban dos lineas seguidas con un hueco vacio entre ellas.
El primero va sin linea y sin el aire de separacion. */
.prosa > h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.prosa h2 {
margin-top: var(--e-7);
padding-top: var(--e-5);
border-top: var(--borde-fino);
font-size: var(--tam-h3);
}
.prosa h3 {
margin-top: var(--e-6);
font-size: var(--tam-base);
font-weight: 500;
}
.prosa ul,
.prosa ol {
padding-left: var(--e-5);
}
.prosa li + li {
margin-top: var(--e-2);
}
.prosa table {
width: 100%;
border-collapse: collapse;
font-size: var(--tam-chico);
}
.prosa th,
.prosa td {
padding: var(--e-3);
text-align: left;
border-bottom: var(--borde-fino);
}
.prosa th {
font-weight: 600;
color: var(--texto-secundario);
}
/* Cualquier tabla ancha scrollea sola, sin empujar la página. */
.tabla-scroll {
overflow-x: auto;
}
.fecha-documento {
margin-bottom: var(--e-6);
font-size: var(--tam-chico);
color: var(--texto-secundario);
}
/* --------------------------------------------------------------------------
ENCABEZADO DE PÁGINA INTERIOR
-------------------------------------------------------------------------- */
.encabezado-pagina {
padding-block: var(--e-8) var(--e-6);
border-bottom: var(--borde-fino);
}
.encabezado-pagina__titulo {
margin-bottom: 0;
}
.encabezado-pagina__bajada {
max-width: var(--ancho-lectura);
margin-top: var(--e-4);
margin-bottom: 0;
color: var(--texto-secundario);
}
/* --------------------------------------------------------------------------
FOOTER
Sin H2 sueltos: los rótulos de columna son