/* ============================================================================
Dr. Cristóbal Varela — Radiólogo intervencionista
Tema propio de WordPress · hoja de estilo única.
Portada del boceto aprobado (varela-boceto/css/varela.css) con tres
diferencias, todas deliberadas:
· Las tipografías se cargan locales desde assets/fonts, no de Google Fonts.
· El tema "Claridad" está aplanado sobre :root. El sitio ya no conmuta de
tema; la variante "Precisión" quedó archivada en el boceto.
· Se quitó todo lo que era andamiaje de boceto: la barra de aviso y las
etiquetas "IMAGEN DE PRUEBA".
ORDEN DEL ARCHIVO
1. Tipografías locales + tokens de marca
2. Base / reset
3. Layout — contenedor, secciones, utilidades tipográficas
4. Header — SIEMPRE sólido azul petróleo (decisión de diseño 1)
5. Hero partido — texto + slider de 3 fotografías
6. Componentes — pill, botón, cards, beneficios, video, banda CTA…
7. Secciones de página (procedimientos, pasos, FAQ, formulario, mapa…)
8. Footer
9. Botón flotante de WhatsApp
10. Íconos
11. Motion
12. Responsive
13. Mega menú, hub, acordeones, reseñas, landings
14. Bloques propios de WordPress (barra de admin, formularios, editor)
============================================================================ */
/* ============================================================================
1. TOKENS — valores de marca, copiados verbatim del brand deck
============================================================================ */
/* --- Tipografías locales ---------------------------------------------------
Inter (neutra) y Nunito (redondeada) viven en assets/fonts como fuentes
variables woff2, subconjuntos latin y latin-ext. No hay pedido a Google:
el sitio no depende de un tercero para renderizar su texto. El stack de
respaldo mantiene todo legible si una cara no carga. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url("../fonts/nunito-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 700 800;
font-display: swap;
src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* --- Paleta base — Brand Guidelines, hex verbatim --- */
--cv-azul: #445766; /* Azul petróleo — dominante */
--cv-celeste: #bccfd3; /* Celeste */
--cv-grafito: #231f20; /* Grafito */
--cv-gris: #e3e4e2; /* Gris claro */
--cv-blanco: #ffffff; /* Blanco */
--cv-amarillo:#e4ff01; /* Amarillo lima — solo Tema Claridad */
/* Tintes derivados — solo para overlays y hover. Nunca un color nuevo. */
--cv-azul-90: rgb(68 87 102 / .90);
--cv-azul-70: rgb(68 87 102 / .70);
--cv-azul-55: rgb(68 87 102 / .55);
--cv-azul-12: rgb(68 87 102 / .12);
--cv-grafito-70: rgb(35 31 32 / .70);
--cv-grafito-55: rgb(35 31 32 / .55);
--cv-blanco-70: rgb(255 255 255 / .70);
--cv-blanco-24: rgb(255 255 255 / .24);
--cv-azul-hover: #3a4b58;
--cv-amarillo-hover: #d2eb00;
/* Aliases semánticos por defecto (Tema Precisión; los temas los sobrescriben) */
--text-muted: rgb(35 31 32 / .68);
/* Overlays de foto — los únicos gradientes permitidos en el sistema */
--overlay-photo: linear-gradient(to top, rgb(35 31 32 / .82) 0%, rgb(35 31 32 / .55) 45%, rgb(35 31 32 / .12) 100%);
--overlay-photo-azul: linear-gradient(to top, rgb(68 87 102 / .86) 0%, rgb(68 87 102 / .58) 45%, rgb(68 87 102 / .10) 100%);
/* --- Tipografía --- */
--font-neutral: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-rounded: "Nunito", "Urbane Rounded", -apple-system, sans-serif;
--font-title: var(--font-neutral);
--font-body: var(--font-neutral);
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-rounded: 800; /* Demi/Extra bold de la familia redondeada */
/* Escala desktop */
--fs-h1: 56px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 22px;
--fs-body: 18px; --fs-caption: 14px;
/* Escala mobile */
--fs-h1-m: 34px; --fs-h2-m: 28px; --fs-h3-m: 22px; --fs-h4-m: 19px;
--fs-body-m: 16px; --fs-caption-m: 13px;
--lh-display: 1.06;
--lh-heading: 1.18;
--lh-body: 1.7;
--ls-display: -0.02em;
--ls-heading: -0.01em;
--ls-caption: 0.06em;
--measure: 68ch;
/* --- Espaciado --- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
--sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 140px;
--section-py: 140px; /* ritmo vertical desktop — mucho aire */
--section-py-m: 72px;
--container: 1200px;
--gutter: 24px;
--gutter-m: 20px;
--grid-gap: 32px;
/* --- Efectos --- */
--r-pill: 999px;
--r-card: 14px;
--r-media: 12px;
--r-input: 8px;
--r-none: 0px;
--shadow-card: 0 1px 2px rgb(35 31 32 / .05);
--shadow-lift: 0 14px 34px rgb(35 31 32 / .13);
--ring-focus: 0 0 0 3px rgb(68 87 102 / .28);
--ring-focus-amarillo: 0 0 0 3px rgb(228 255 1 / .5);
--bw-hairline: 1px;
--bw-icon: 1.5px; /* trazo de ícono — nunca relleno, nunca multicolor */
--bw-checkbox: 2px;
--ease-out: cubic-bezier(.22, .61, .36, 1);
--dur-fast: 140ms;
--dur-base: 220ms;
--dur-enter: 520ms;
--enter-shift: 18px;
}
/* Escala tipográfica en mobile */
@media (max-width: 860px) {
:root {
--fs-h1: var(--fs-h1-m); --fs-h2: var(--fs-h2-m); --fs-h3: var(--fs-h3-m);
--fs-h4: var(--fs-h4-m); --fs-body: var(--fs-body-m); --fs-caption: var(--fs-caption-m);
--section-py: var(--section-py-m); --gutter: var(--gutter-m); --grid-gap: 20px;
}
}
/* --- Tema "Claridad" — el que eligió el cliente ------------------------------
Blanco y gris claro dominantes, azul petróleo para títulos y bandas CTA.
El amarillo lima ES el sistema de acento: botones, subrayado del H1, íconos
activos, indicador de paso, hover, estrellas. Siempre con texto grafito
encima, nunca blanco.
En el boceto estos tokens vivían bajo [data-cv-theme="claridad"] porque el
sitio conmutaba entre dos pieles. El cliente eligió, así que acá van sobre
:root. La variante "Precisión" queda archivada en varela-boceto/css. */
:root {
--accent: var(--cv-amarillo);
--accent-ink: var(--cv-grafito);
--cta-bg: var(--cv-amarillo);
--cta-fg: var(--cv-grafito);
--cta-bg-hover: var(--cv-amarillo-hover);
/* Sobre fondo claro en Claridad el amarillo lima ya contrasta: se mantiene */
--cta-light-bg: var(--cv-amarillo);
--cta-light-fg: var(--cv-grafito);
--cta-light-bg-hover: var(--cv-amarillo-hover);
--band-bg: var(--cv-azul);
--band-fg: var(--cv-blanco);
--pill-bg: var(--cv-blanco);
--pill-fg: var(--cv-azul);
--chip-border: rgb(35 31 32 / .22);
--chip-fg: var(--cv-grafito);
--check-fill: var(--cv-amarillo);
--check-ink: var(--cv-grafito);
--focus-ring: var(--ring-focus-amarillo);
--tp-hero-bg: var(--cv-blanco); --tp-hero-fg: var(--cv-grafito); --tp-hero-line: var(--cv-azul);
--tp-hero-overlay: var(--overlay-photo);
--tp-benef-bg: var(--cv-gris);
--tp-video-bg: var(--cv-gris); --tp-video-fg: var(--cv-grafito);--tp-video-muted: var(--text-muted);
--tp-sobre-bg: var(--cv-blanco);
--tp-medios-bg: var(--cv-azul);
--tp-band-bg: var(--cv-azul);
--tp-hairline: rgb(35 31 32 / .14);
--tp-blog-hero-bg: var(--cv-gris); --tp-blog-hero-fg: var(--cv-grafito);
}
/* ============================================================================
3. BASE / RESET
============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cv-blanco);
color: var(--cv-grafito);
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: var(--cv-azul); }
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--r-input);
}
/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
html { scroll-behavior: auto; }
}
/* ============================================================================
4. LAYOUT — contenedor, secciones, utilidades tipográficas
============================================================================ */
.wrap { max-width: var(--container); margin: 0 auto; }
/* Sección estándar: ritmo vertical + gutter lateral. El fondo lo da un
modificador .s-* (color fijo) o .st-* (color dependiente de tema). */
.section { padding: var(--section-py) var(--gutter); }
/* Fondos fijos (rotación de marca: azul → celeste → grafito → blanco) */
.s-blanco { background: var(--cv-blanco); color: var(--cv-grafito); }
.s-gris { background: var(--cv-gris); color: var(--cv-grafito); }
.s-celeste { background: var(--cv-celeste); color: var(--cv-grafito); }
.s-azul { background: var(--cv-azul); color: var(--cv-blanco); }
.s-grafito { background: var(--cv-grafito); color: var(--cv-blanco); }
/* Fondos dependientes de tema */
.st-benef { background: var(--tp-benef-bg); color: var(--cv-grafito); }
.st-video { background: var(--tp-video-bg); color: var(--tp-video-fg); }
.st-sobre { background: var(--tp-sobre-bg); color: var(--cv-grafito); }
.st-medios { background: var(--tp-medios-bg); color: var(--cv-blanco); }
/* --- Utilidades tipográficas --- */
/* Eyebrow / caption: mayúsculas, tracking, azul petróleo */
.eyebrow {
margin: 0 0 var(--sp-5);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--cv-azul);
}
.eyebrow--on-dark { color: var(--cv-blanco-70); }
/* Título de sección — familia neutra (registro descriptivo) */
.title {
margin: 0;
font-family: var(--font-neutral);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-wrap: pretty;
}
.title--on-dark { color: var(--cv-blanco); }
/* Título afirmativo/emocional — familia redondeada */
.title-rounded {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-wrap: pretty;
}
/* Palabra/frase en la familia redondeada dentro de un bloque neutro
(nunca dentro de una misma línea de texto corrido) */
.rounded {
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
}
/* Párrafo cuerpo */
.body {
margin: var(--sp-6) 0 0;
max-width: var(--measure);
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
text-wrap: pretty;
}
.body--on-dark { color: var(--cv-blanco-70); }
.body:first-child, .body.body--flush { margin-top: 0; }
/* ============================================================================
5. HEADER — DECISIÓN DE DISEÑO 1: siempre sólido en azul petróleo.
Sin estado transparente, sin scrim. Ningún hero pasa por detrás; todos
empiezan justo debajo. La hairline inferior es permanente.
============================================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 40;
height: 140px;
background: var(--cv-azul); /* opaco desde el inicio */
border-bottom: var(--bw-hairline) solid var(--cv-blanco-24); /* hairline permanente */
}
.site-header__inner {
max-width: var(--container);
margin: 0 auto;
height: 100%;
padding: 0 var(--gutter);
display: flex;
align-items: center;
gap: var(--sp-8);
}
/* Logo por ANCHO (regla de layout): 312px desktop, 240 mid, 210 mobile */
.site-header__logo { flex: none; display: block; }
.site-header__logo img { display: block; width: 312px; height: auto; }
.site-nav {
display: flex;
gap: var(--sp-7);
margin-left: auto;
align-items: center;
white-space: nowrap;
}
/* Sólo los links de texto (no el botón CTA) toman el color blanco del header */
.site-nav a:not(.btn) {
font-family: var(--font-neutral);
font-size: 16px;
font-weight: 400;
color: var(--cv-blanco);
text-decoration: none;
padding-bottom: 3px;
border-bottom: 2px solid transparent;
transition: border-color var(--dur-base) var(--ease-out);
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--cv-blanco-24); }
.site-nav a[aria-current="page"]:not(.btn) {
font-weight: 600;
border-bottom-color: var(--accent, var(--cv-blanco));
}
/* Menú mobile — componentes nuevos, ocultos por defecto. Todo su estilo y
comportamiento vive dentro de @media (max-width: 767px) al final del archivo,
así el desktop no se ve afectado. */
.nav-toggle { display: none; }
.nav-panel { display: none; }
/* ============================================================================
6. HERO PARTIDO — texto sobre color sólido + slider de retratos
DECISIÓN 2: la landing usa este mismo patrón (no el hero a sangre).
DECISIÓN 3: la mitad de la foto es un slider de 3 imágenes con fundido.
============================================================================ */
.hero {
display: grid;
grid-template-columns: 52fr 48fr; /* texto | foto */
min-height: 475px;
}
/* Variante invertida (Sobre el Dr.): foto a la izquierda, texto a la derecha */
.hero--reverse { grid-template-columns: 45fr 55fr; }
/* Columna de texto */
.hero__text {
background: var(--tp-hero-bg);
color: var(--tp-hero-fg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
/* 110px vertical; a la izquierda alinea con el borde del contenedor */
padding: 110px var(--sp-9) 110px max(var(--gutter), calc((100vw - var(--container)) / 2));
}
/* En la variante invertida el texto vive a la derecha. Conserva el fondo de tema
(--tp-hero-bg: azul en A / blanco en B), igual que el resto del sitio. */
.hero--reverse .hero__text {
padding: 110px max(var(--gutter), calc((100vw - var(--container)) / 2)) 110px var(--sp-9);
}
/* Hero con más aire (Sobre el Dr.): 120px vertical en desktop */
.hero--airy .hero__text { padding-top: 120px; padding-bottom: 120px; }
.hero__title {
margin: var(--sp-4) 0 0;
max-width: 26ch;
font-family: var(--font-neutral);
font-weight: 400;
font-size: 44px;
line-height: var(--lh-heading);
letter-spacing: var(--ls-display);
text-wrap: pretty;
}
.hero__lead {
margin: var(--sp-3) 0 0;
max-width: 44ch;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: var(--lh-heading);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
/* Hero de banda de las páginas internas (Tratamientos, Contacto) — color
sólido, SIN mitad fotográfica y por eso sin slider. Fondo dependiente de
tema: azul en Precisión, gris en Claridad. */
.blog-hero {
background: var(--tp-blog-hero-bg);
color: var(--tp-blog-hero-fg);
min-height: 325px;
display: flex;
align-items: center;
padding: 70px 0;
}
.blog-hero__inner {
width: 100%;
padding: 0 var(--gutter);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-4);
}
/* --- Slider del hero (mitad fotográfica) ---
Tres retratos apilados en absoluto; el activo se funde a opacidad 1.
Vanilla JS cambia .is-active cada 6 s. El programador lo reemplaza por el
widget de slider nativo de Elementor (ver ELEMENTOR.md). */
.hero__media {
position: relative;
overflow: hidden;
min-height: 300px;
}
.hero__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%; /* encuadre común: cara en el tercio superior */
opacity: 0;
transition: opacity 1200ms var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
/* Slider clínico (home / landing): encuadre común center 20% */
.hero__media--clinico .hero__slide { object-position: center 20%; }
/* Indicadores de punto */
.hero__dots {
position: absolute;
left: 0; right: 0; bottom: var(--sp-6);
display: flex;
justify-content: center;
gap: 10px;
z-index: 2;
}
.hero__dot {
width: 10px; height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--cv-blanco-70);
box-shadow: 0 1px 3px rgb(35 31 32 / .35);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hero__dot.is-active { background: var(--cv-blanco); transform: scale(1.25); }
/* ============================================================================
7. COMPONENTES
============================================================================ */
/* --- CategoryPill — pill blanca, texto azul, totalmente redonda --- */
.pill {
display: inline-block;
padding: 12px 28px;
border-radius: var(--r-pill);
background: var(--pill-bg);
color: var(--pill-fg);
font-family: var(--font-neutral);
font-weight: 600;
font-size: 15px;
line-height: 1;
white-space: nowrap;
}
/* --- Button --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: var(--bw-hairline) solid transparent;
border-radius: var(--r-pill);
cursor: pointer;
text-decoration: none;
line-height: 1;
font-family: var(--font-neutral);
font-weight: 600;
padding: 15px 32px; /* size md por defecto */
font-size: 17px;
transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 11px 22px; font-size: 15px; }
.btn--lg { padding: 19px 40px; font-size: 18px; }
/* Primario para fondos OSCUROS (azul petróleo, grafito, overlay de foto).
En Precisión: relleno blanco + texto azul. En Claridad: amarillo + grafito. */
.btn--primary { background: var(--cta-bg); color: var(--cta-fg); }
.btn--primary:hover { background: var(--cta-bg-hover); }
/* Primario para fondos CLAROS (blanco, gris claro, celeste). Necesario porque el
primario normal es blanco en Precisión y no se ve sobre un fondo claro.
En Precisión: relleno azul petróleo + texto blanco. En Claridad: amarillo + grafito. */
.btn--primary-light { background: var(--cta-light-bg); color: var(--cta-light-fg); }
.btn--primary-light:hover { background: var(--cta-light-bg-hover); }
/* Secundario — azul petróleo sólido */
.btn--secondary { background: var(--cv-azul); color: var(--cv-blanco); }
.btn--secondary:hover { background: var(--cv-azul-hover); }
/* Outline — sobre claro */
.btn--outline { background: transparent; color: var(--cv-azul); border-color: var(--cv-azul); }
.btn--outline:hover { background: var(--cv-azul-12); }
/* Outline sobre oscuro (bandas azul/grafito fijas) */
.btn--outline-on-dark { background: transparent; color: var(--cv-blanco); border-color: var(--cv-blanco-24); }
.btn--outline-on-dark:hover { background: var(--cv-blanco-24); }
/* Outline del hero — se adapta al tema: hereda color y borde de la columna de
texto (--tp-hero-fg / --tp-hero-line), así funciona sobre azul (Precisión)
y sobre blanco (Claridad). */
.btn--hero-outline { background: transparent; color: var(--tp-hero-fg); border-color: var(--tp-hero-line); }
.btn--hero-outline:hover { background: rgb(128 128 128 / .12); }
/* --- BenefitBlock — ícono lineal + título redondeado + una línea --- */
.benefit { max-width: 34ch; }
.benefit__icon { color: var(--cv-azul); margin-bottom: var(--sp-5); }
.benefit__title {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: 1.3;
color: var(--cv-grafito);
}
.benefit__text {
margin: var(--sp-3) 0 0;
font-family: var(--font-neutral);
font-size: 16px;
line-height: var(--lh-body);
color: var(--text-muted);
text-wrap: pretty;
}
/* --- TreatmentCard — foto 16:9, título, bajada, flecha. Plana hasta hover --- */
.card {
display: block;
text-decoration: none;
background: var(--cv-blanco);
border: var(--bw-hairline) solid var(--cv-gris);
border-radius: var(--r-card);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card__media { aspect-ratio: 16 / 9; background: var(--cv-celeste); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: var(--sp-7) var(--sp-7) var(--sp-6); }
.card__title {
margin: 0;
font-family: var(--font-neutral);
font-weight: 400;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--cv-grafito);
}
.card__deck {
margin: var(--sp-3) 0 0;
font-family: var(--font-neutral);
font-size: 16px;
line-height: var(--lh-body);
color: var(--text-muted);
text-wrap: pretty;
}
.card__more {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: var(--sp-6);
color: var(--cv-azul);
font-family: var(--font-neutral);
font-weight: 600;
font-size: 15px;
}
.card:hover .card__more .ic { transform: translateX(4px); }
.card__more .ic { transition: transform var(--dur-base) var(--ease-out); }
/* Enlace de texto con flecha (Sobre / Ver trayectoria / Siguiente) */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--cv-azul);
font-family: var(--font-neutral);
font-weight: 600;
font-size: 16px;
text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 5px; }
/* --- VideoBlock — miniatura + overlay + botón play. Sin autoplay --- */
.video {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--r-media);
overflow: hidden;
background: var(--cv-grafito);
}
.video button.video__poster {
position: absolute; inset: 0;
width: 100%; height: 100%;
padding: 0; border: 0; background: none; cursor: pointer;
}
.video__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__scrim { position: absolute; inset: 0; background: var(--overlay-photo); }
.video__play {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 84px; height: 84px;
border-radius: 50%;
background: var(--cta-bg);
display: grid; place-items: center;
transition: transform var(--dur-base) var(--ease-out);
}
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.06); }
.video__play .ic { color: var(--cta-fg); margin-left: 4px; }
/* --- CtaBand — banda full-width, un CTA cerca del final --- */
.cta-band {
background: var(--band-bg);
color: var(--band-fg);
padding: var(--section-py) var(--gutter);
}
.cta-band__inner {
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-8);
}
.cta-band__title {
margin: 0;
max-width: 22ch;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-wrap: pretty;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
/* Imagen full-bleed de transición entre secciones */
.fullbleed {
display: block;
width: 100%;
height: 320px;
object-fit: cover;
object-position: center 42%;
}
/* ============================================================================
8. SECCIONES DE PÁGINA
============================================================================ */
/* --- Grilla home: "qué es" 40/60, "sobre" 40/60, dos columnas video --- */
.split-40-60 { display: grid; grid-template-columns: 40fr 60fr; gap: var(--sp-11); align-items: start; }
.split-58-42 { display: grid; grid-template-columns: 58fr 42fr; gap: var(--sp-11); align-items: start; }
.split-45-55 { display: grid; grid-template-columns: 45fr 55fr; gap: var(--sp-11); align-items: center; }
.split-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-11); align-items: center; }
/* --- "Sobre el especialista" de la home ---
Pone una columna de texto al lado de un retrato 4:5. Con el texto centrado
quedaba flotando en el medio de la franja, así que las dos columnas arrancan
arriba, al nivel del borde superior de la fotografía.
El aire vertical baja un 25% respecto del ritmo estándar. Se escribe como
una fracción del token y no como un número fijo para que siga valiendo en
mobile, donde --section-py cambia. */
.st-sobre .split-40-60 { align-items: start; }
.st-sobre { padding-block: calc(var(--section-py) * 0.75); }
/* --- Bloque de video de la home: apilado ------------------------------------
Con un Short vertical las dos columnas no funcionan: el reproductor mide unos
700px de alto contra 300 de la columna de texto, y sobran 400px de hueco se
ponga el texto donde se ponga. Apilado, ese hueco no existe.
El bloque se angosta a 720px y se centra en la página; el texto va arriba,
alineado a la izquierda dentro de ese ancho, y el reproductor abajo,
centrado. El aire vertical de la sección vuelve al ritmo estándar.
El tope de 360px es sólo para el reproductor vertical. Un video apaisado
ocupa los 720px del bloque, que es lo que le corresponde. Como es un máximo
y no un ancho fijo, en mobile los dos ocupan la columna sin ninguna regla
extra. */
.video-stack { max-width: 720px; margin-inline: auto; }
.video-stack > .video { margin-top: var(--sp-10); }
.video-stack > .video--vertical { max-width: 360px; }
/* La bajada se corta antes que el bloque. El título ocupa los 720px, pero un
párrafo no: la regla del sistema es 68 caracteres por línea y a 720px se van
a 82. El token --measure no sirve acá porque está en `ch` y en Inter el
carácter de referencia es ancho: 68ch da 772px, más que el bloque entero, así
que nunca llega a cortar. En la columna de 552px del layout anterior la
diferencia no se veía; acá sí. */
.video-stack p.body { max-width: 580px; }
/* Grillas de tarjetas */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
/* Seis beneficios en 3×2. Alineados arriba, sin estirar: el segundo es sólo
título y su tarjeta tiene que quedar pareja de arriba con las otras dos de
su fila, no centrada ni estirada al alto de la fila. */
.benef-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
column-gap: var(--grid-gap);
row-gap: var(--sp-10);
margin-top: var(--sp-10);
}
/* Grilla de tratamientos (6 columnas; las 5 cards se centran) */
.trat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--grid-gap); margin-top: var(--sp-10); }
.trat-grid > .card:nth-child(1) { grid-column: span 2; }
.trat-grid > .card:nth-child(2) { grid-column: span 2; }
.trat-grid > .card:nth-child(3) { grid-column: span 2; }
.trat-grid > .card:nth-child(4) { grid-column: 2 / span 2; }
.trat-grid > .card:nth-child(5) { grid-column: 4 / span 2; }
/* Retrato lateral (sobre en home).
`height: auto` no es decorativo: WordPress imprime width y height como
atributos del ![]()
y, con las dos medidas definidas, el navegador ignora
aspect-ratio. Sin esta línea el retrato salía a su alto real —1000px— en vez
de a 4:5, y le imponía a la sección casi el doble de alto que el bloque de
video de arriba.
El tope de 580px es la red de seguridad para pantallas anchas, donde la
columna del 40% crecería más allá de lo que el bloque de video mide. El
encuadre al 12% es el mínimo del sistema (punto 17.1): deja la cabeza
completa y se lleva el recorte a la parte baja de la foto. */
.portrait-media {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
max-height: 580px;
object-fit: cover;
object-position: center 12%;
border-radius: var(--r-media);
display: block;
}
/* Rol del doctor bajo el título (home / sobre) */
.role-line {
margin: var(--sp-3) 0 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: 1.3;
color: var(--cv-azul);
}
/* --- Landing: lista de procedimientos (dos columnas, número grande) --- */
.proc-list {
list-style: none;
margin: var(--sp-10) 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--sp-11);
}
.proc-list > li {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-6);
padding: var(--sp-9) 0;
border-top: var(--bw-hairline) solid var(--tp-hairline);
}
.proc-list > li:nth-child(1),
.proc-list > li:nth-child(2) { border-top: none; }
.proc-list__n {
font-family: var(--font-neutral);
font-size: 40px;
line-height: 1;
opacity: .22;
font-variant-numeric: tabular-nums;
}
.proc-list__term {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-wrap: pretty;
min-height: 2.4em;
}
.proc-list__desc {
margin: var(--sp-4) 0 0;
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--cv-grafito-70);
}
/* --- Sobre el Dr.: línea de tiempo de formación --- */
.timeline { list-style: none; margin: var(--sp-10) 0 0; padding: 0; max-width: 760px; }
.timeline > li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-7); padding-bottom: var(--sp-9); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline__rail { display: grid; justify-items: center; grid-template-rows: auto 1fr; }
.timeline__dot {
width: 14px; height: 14px;
border-radius: 50%;
border: 2px solid var(--cv-azul);
background: transparent;
margin-top: 8px;
}
.timeline__line { width: 1px; height: 100%; background: var(--tp-hairline); margin-top: 8px; }
.timeline > li:last-child .timeline__line { display: none; }
.timeline__title {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
text-wrap: pretty;
}
.timeline__meta {
margin: var(--sp-3) 0 0;
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--cv-grafito-70);
}
/* --- Cita del doctor --- */
.quote {
display: flex;
gap: var(--sp-8);
align-items: center;
margin: 0 auto;
max-width: 980px;
}
.quote img {
flex: none;
width: 168px; height: 168px;
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
}
.quote blockquote {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h3);
line-height: 1.35;
letter-spacing: var(--ls-heading);
color: var(--cv-grafito);
text-wrap: pretty;
}
.quote figcaption {
margin-top: var(--sp-6);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--cv-azul);
}
/* --- Sobre el Dr.: mapa/sede --- */
.map-frame {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--r-media);
overflow: hidden;
background: var(--cv-gris);
}
.map-frame svg { display: block; width: 100%; height: 100%; }
/* Mapa en caja (Sobre el Dr. → "Dónde atiende"): imagen real en escala de grises
con tinte azul petróleo, radio de media, alto 300px. Mismo tratamiento que la
franja de mapa de Contacto. */
.map-box {
position: relative;
height: 300px;
border-radius: var(--r-media);
overflow: hidden;
background: var(--cv-gris);
}
.map-box img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
filter: grayscale(1);
display: block;
}
.map-box::after {
content: "";
position: absolute; inset: 0;
background: var(--cv-azul);
mix-blend-mode: multiply;
opacity: .42;
pointer-events: none;
}
/* Sección compacta (menos aire vertical que el ritmo de 140px) */
.section--compact { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 860px) { .section--compact { padding-top: 64px; padding-bottom: 64px; } }
/* Placeholder neutro de mapa (queda como respaldo; ya no se usa en el sitio). */
.map-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-4);
background: var(--cv-gris);
color: var(--cv-azul);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
}
.map-placeholder svg { width: 32px; height: 32px; }
.sede-name {
margin: var(--sp-7) 0 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: 1.4;
color: var(--cv-grafito);
}
.sede-addr {
margin: var(--sp-3) 0 0;
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
}
/* --- Contacto: formulario + aside --- */
.form-card {
background: var(--cv-blanco);
border: var(--bw-hairline) solid var(--cv-gris);
border-radius: var(--r-card);
padding: 40px;
box-shadow: var(--shadow-card);
}
.form-card h3, .aside h3 {
margin: 0;
/* Color explícito: la tarjeta es blanca y puede vivir dentro de una sección
oscura (el CTA de las landings), donde heredaría texto blanco. */
color: var(--cv-grafito);
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}
.form-grid { display: grid; gap: var(--sp-6); margin-top: var(--sp-8); }
.field { display: block; }
.field > span {
display: block;
margin-bottom: var(--sp-2);
font-family: var(--font-neutral);
font-size: 15px;
font-weight: 500;
color: var(--cv-grafito);
}
.field input, .field select, .field textarea {
width: 100%;
padding: 14px 16px;
border-radius: var(--r-input);
border: var(--bw-hairline) solid var(--cv-gris);
background: var(--cv-blanco);
font-family: var(--font-neutral);
font-size: 16px;
line-height: 1.5;
color: var(--cv-grafito);
}
.field textarea { resize: vertical; }
.consent { display: flex; gap: var(--sp-4); align-items: flex-start; }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--cv-azul); flex: none; }
.consent span { font-family: var(--font-neutral); font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.aside__list { margin-top: var(--sp-8); display: grid; gap: var(--sp-7); }
.aside__label {
margin: 0;
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--cv-azul);
}
.aside__value {
margin: var(--sp-3) 0 0;
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: 1.7;
color: var(--cv-grafito);
text-decoration: none;
}
.aside__value .muted { color: var(--text-muted); }
a.aside__value:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Franja de mapa (contacto) — imagen real de Google Maps en escala de grises con
tinte azul petróleo, y un pin de marca centrado encima. */
.map-strip { position: relative; height: 420px; overflow: hidden; background: var(--cv-gris); }
.map-photo { position: absolute; inset: 0; }
.map-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
filter: grayscale(1);
display: block;
}
/* Tinte azul petróleo para integrar el mapa a la paleta */
.map-photo::after {
content: "";
position: absolute; inset: 0;
background: var(--cv-azul);
mix-blend-mode: multiply;
opacity: .42;
pointer-events: none;
}
.map-pin {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
pointer-events: none;
}
.map-pin__label {
background: var(--cv-blanco);
color: var(--cv-grafito);
font-family: var(--font-neutral);
font-weight: 600;
font-size: 15px;
line-height: 1;
padding: 9px 18px;
border-radius: var(--r-pill);
box-shadow: 0 6px 18px rgb(35 31 32 / .28);
}
/* ============================================================================
9. FOOTER — siempre grafito
============================================================================ */
.site-footer {
background: var(--cv-grafito);
color: var(--cv-blanco);
padding: var(--sp-11) var(--gutter) var(--sp-7);
}
.site-footer__grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(200px, 1fr) 1fr 1fr minmax(220px, 1fr);
gap: var(--sp-9);
}
.site-footer__logo { display: block; width: 240px; height: auto; }
.site-footer h4 {
margin: 0 0 var(--sp-5);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--cv-blanco-70);
font-weight: 500;
}
.site-footer__col { display: flex; flex-direction: column; }
.site-footer a {
font-family: var(--font-neutral);
font-size: 16px;
line-height: 2;
color: var(--cv-blanco);
text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__contact { text-align: right; }
.site-footer__contact p {
margin: 0;
font-family: var(--font-neutral);
font-size: 16px;
line-height: 1.7;
color: var(--cv-blanco);
}
.site-footer__contact .muted { color: var(--cv-blanco-70); }
.site-footer__socials { display: flex; gap: 16px; margin-top: var(--sp-6); justify-content: flex-end; }
.site-footer__socials a { display: inline-flex; color: var(--cv-blanco); }
.site-footer__legal {
max-width: var(--container);
margin: var(--sp-9) auto 0;
padding-top: var(--sp-6);
border-top: var(--bw-hairline) solid var(--cv-blanco-24);
display: flex;
align-items: center;
gap: var(--sp-5);
}
.site-footer__legal img { width: 26px; height: auto; }
.site-footer__legal p {
margin: 0;
font-family: var(--font-neutral);
font-size: var(--fs-caption);
line-height: 1.6;
color: var(--cv-blanco-70);
max-width: var(--measure);
}
/* ============================================================================
10. BOTÓN FLOTANTE DE WHATSAPP
(Acá vivía el toggle de tema Precisión / Claridad. Se eliminó cuando el
cliente eligió "Claridad": el sitio ya no conmuta.)
============================================================================ */
/* Botón flotante de WhatsApp — azul petróleo, se expande en hover. Nunca amarillo. */
.wa {
position: fixed;
right: var(--sp-6);
bottom: var(--sp-6);
z-index: 60;
display: inline-flex;
align-items: center;
gap: 12px;
height: 60px;
padding: 0 18px;
border-radius: var(--r-pill);
background: var(--cv-azul);
color: var(--cv-blanco);
text-decoration: none;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: 16px;
box-shadow: var(--shadow-lift);
transition: padding var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.wa__label { display: none; white-space: nowrap; }
.wa:hover { background: var(--cv-azul-hover); padding: 0 26px 0 18px; }
.wa:hover .wa__label { display: inline; }
/* ============================================================================
11. ÍCONOS — SVG lineal inline (trazo 1.5px, terminales redondeadas,
monocromo). Se dibujan con .
============================================================================ */
.ic {
display: inline-block;
vertical-align: middle;
width: 24px; height: 24px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: var(--bw-icon);
stroke-linecap: round;
stroke-linejoin: round;
}
.ic--18 { width: 18px; height: 18px; }
.ic--20 { width: 20px; height: 20px; }
.ic--22 { width: 22px; height: 22px; }
.ic--30 { width: 30px; height: 30px; }
.ic--32 { width: 32px; height: 32px; }
/* Íconos que se leen mejor rellenos (play) */
.ic--solid { fill: currentColor; stroke: currentColor; }
/* ============================================================================
12. MOTION — fade-in + slide-up al entrar en viewport
============================================================================ */
.reveal {
opacity: 0;
transform: translateY(var(--enter-shift));
transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* ============================================================================
13. RESPONSIVE
============================================================================ */
/* Header: logo y alto por breakpoint (regla de layout) */
@media (max-width: 1180px) {
.site-header, .site-header__inner { height: 112px; }
.site-header__logo img { width: 240px; }
}
@media (max-width: 1100px) {
.hero__title { font-size: 36px; }
}
@media (max-width: 980px) {
.benef-grid, .grid-3 { grid-template-columns: repeat(2, 1fr); }
.proc-list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
/* Header compacto: se ocultan los links de texto, quedan logo + CTA.
El build de Elementor usará el menú hamburguesa nativo. */
.site-header, .site-header__inner { height: 96px; }
.site-header__logo img { width: 210px; }
.site-nav a:not(.site-nav__cta) { display: none; }
/* Heros a una columna, foto/slider arriba */
.hero, .hero--reverse { grid-template-columns: 1fr; }
.hero__media { order: -1; min-height: 320px; }
.hero--reverse .hero__media { order: -1; }
.hero__text, .hero--reverse .hero__text { padding: 70px var(--gutter); }
/* Grillas a una columna */
.split-40-60, .split-58-42, .split-45-55, .split-2col,
.benef-grid, .grid-3, .grid-2, .proc-list { grid-template-columns: 1fr; }
.trat-grid { grid-template-columns: 1fr; }
.trat-grid > .card { grid-column: 1 / -1 !important; }
/* Footer a una columna, todo alineado a la izquierda */
.site-footer__grid { grid-template-columns: 1fr; }
.site-footer__contact { text-align: left; }
.site-footer__socials { justify-content: flex-start; }
/* Cita del doctor apila */
.quote { flex-direction: column; align-items: flex-start; }
}
/* ============================================================================
14. MOBILE (≤767px) — todos los ajustes de mobile viven acá dentro.
No modifica el CSS de desktop. Cubre: header compacto, menú hamburguesa a
pantalla completa y espaciado vertical más ajustado.
============================================================================ */
@media (max-width: 767px) {
/* --- 2 · Header compacto: logo 56px de alto, header 84px, padding 20px.
Con 84px de alto entran logo (56px) y hamburguesa (24px) sin apretarse;
ambos centrados verticalmente por el align-items:center del header. --- */
.site-header, .site-header__inner { height: 84px; }
.site-header__inner { padding: 0 20px; }
.site-header__logo img { height: 56px; width: auto; }
/* --- 1 · Menú mobile --- */
/* Ocultar la navegación de escritorio (links + botón CTA) */
.site-nav { display: none; }
/* Botón hamburguesa: ícono lineal blanco 24px, alineado a la derecha */
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-left: auto;
padding: 0;
background: none;
border: 0;
color: var(--cv-blanco);
cursor: pointer;
}
.nav-toggle .ic { width: 24px; height: 24px; }
/* Panel a pantalla completa, fondo azul petróleo */
.nav-panel {
position: fixed;
inset: 0;
z-index: 100;
background: var(--cv-azul);
padding: 14px 20px 40px;
flex-direction: column;
}
.nav-panel.is-open { display: flex; }
.nav-panel__close { align-self: flex-end; margin-left: 0; }
/* Links apilados en 22px, separados 28px */
.nav-panel__links {
display: flex;
flex-direction: column;
align-items: flex-start; /* cada link al ancho de su texto (para el subrayado) */
gap: 28px;
margin-top: 40px;
}
.nav-panel__links a {
color: var(--cv-blanco);
text-decoration: none;
font-family: var(--font-neutral);
font-size: 22px;
line-height: 1;
padding-bottom: 4px;
border-bottom: 2px solid transparent;
}
/* Ítem activo: mismo subrayado que los links del header */
.nav-panel__links a[aria-current="page"] {
font-weight: 600;
border-bottom-color: var(--accent, var(--cv-blanco));
}
/* Botón "Reservar hora" debajo, separado, ancho completo */
.nav-panel__cta { margin-top: 40px; width: 100%; }
/* --- 3 · Espaciado vertical más ajustado --- */
/* Padding vertical de sección: 72px → 48px (afecta .section y .cta-band) */
:root { --section-py: 48px; }
/* Separación entre ítems de lista/grid: --sp-10 → --sp-6 */
.benef-grid { row-gap: var(--sp-6); }
/* Beneficios: mismo criterio de compactar el bloque */
.benefit__icon { margin-bottom: var(--sp-2); } /* ícono → título: 8px */
}
/* ============================================================================
15. ACCESIBILIDAD DE PATOLOGÍAS — pedido del cliente.
Todo lo que sigue se agregó después del primer boceto:
15.1 Anclas de sección bajo el header sticky
15.2 Mega menú de Tratamientos (desktop) y acordeón (mobile)
15.3 Índice de patologías de la home (.st-patol)
15.4 Página hub de tratamientos (.hub-*)
15.5 Accesos directos WhatsApp + Instagram (.directos)
Nada de esto rompe el sistema: usa los mismos tokens, las mismas dos
familias tipográficas y los mismos fondos dependientes de tema.
============================================================================ */
/* --- 15.1 · Anclas de sección bajo el header sticky -------------------------
--header-h es el espejo del alto real del header en cada breakpoint. El
scroll-margin-top deja el bloque 24px por debajo del header. */
:root { --header-h: 140px; }
@media (max-width: 1180px) { :root { --header-h: 112px; } }
@media (max-width: 860px) { :root { --header-h: 96px; } }
@media (max-width: 767px) { :root { --header-h: 84px; } }
main [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
/* --- 15.2 · Mega menú de Tratamientos ---------------------------------------
Desktop: abre por hover y por foco de teclado — sin JS, para que Elementor lo
pueda reproducir con el widget de menú nativo.
Mobile: no existe; el panel usa acordeón (más abajo). */
.nav-mega { display: inline-flex; align-items: center; }
.nav-mega__trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav-mega__trigger .ic { transition: transform var(--dur-base) var(--ease-out); }
.nav-mega:hover .nav-mega__trigger .ic,
.nav-mega:focus-within .nav-mega__trigger .ic { transform: rotate(180deg); }
/* El panel se posiciona contra el header (sticky = bloque contenedor) */
.nav-mega__panel {
position: absolute;
top: 100%;
left: 0; right: 0;
background: var(--cv-blanco);
color: var(--cv-grafito);
white-space: normal; /* .site-nav impone nowrap: acá el texto vuelve a fluir */
border-bottom: var(--bw-hairline) solid var(--cv-gris);
box-shadow: var(--shadow-lift);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
visibility var(--dur-base) var(--ease-out);
}
.nav-mega:hover .nav-mega__panel,
.nav-mega:focus-within .nav-mega__panel { opacity: 1; visibility: visible; transform: none; }
.nav-mega__inner {
max-width: var(--container);
margin: 0 auto;
padding: var(--sp-8) var(--gutter) var(--sp-7);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sp-7);
align-items: start;
}
/* Título de vertical — registro descriptivo, caption en azul petróleo */
.nav-mega__panel a.nav-mega__group {
display: block;
padding-bottom: 0;
border-bottom: 0;
margin-bottom: var(--sp-5);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
line-height: 1.4;
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--cv-azul);
text-decoration: none;
}
.nav-mega__panel a.nav-mega__group:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Patologías — listas, o sea familia redondeada */
.nav-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.nav-mega__panel .nav-mega__list a {
padding-bottom: 0;
border-bottom: 0;
font-family: var(--font-rounded);
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--cv-grafito);
text-decoration: none;
transition: color var(--dur-base) var(--ease-out);
}
.nav-mega__panel .nav-mega__list a:hover { color: var(--cv-azul); text-decoration: underline; text-underline-offset: 4px; }
.nav-mega__foot {
border-top: var(--bw-hairline) solid var(--cv-gris);
}
.nav-mega__panel a.link-arrow { color: var(--cv-azul); font-size: 16px; }
.nav-mega__foot > div {
max-width: var(--container);
margin: 0 auto;
padding: var(--sp-5) var(--gutter);
}
/* Hasta 1025px entran las cinco columnas apretando el gap; más abajo, tres. */
@media (max-width: 1280px) {
.nav-mega__inner { gap: var(--sp-6); }
.nav-mega__panel .nav-mega__list a { font-size: 14px; }
}
@media (max-width: 1024px) {
.nav-mega__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--sp-8); }
}
/* De 860 para abajo la navegación de texto ya no se muestra */
@media (max-width: 860px) { .nav-mega { display: none; } }
/* --- 15.3 · Índice de patologías de la home ---------------------------------
Misma grilla numerada que "Procedimientos" de la landing, pero enlazada.
Fondo dependiente de tema: celeste en A, azul petróleo en B — en las dos
opciones respeta la rotación (nunca dos secciones seguidas del mismo color). */
:root {
--tp-patol-bg: var(--cv-azul);
--tp-patol-fg: var(--cv-blanco);
--tp-patol-muted: var(--cv-blanco-70);
--tp-patol-line: var(--cv-blanco-24);
--tp-patol-eyebrow: var(--cv-blanco-70);
}
.st-patol { background: var(--tp-patol-bg); color: var(--tp-patol-fg); }
.st-patol .title,
.st-patol .title-rounded { color: var(--tp-patol-fg); }
.st-patol .eyebrow { color: var(--tp-patol-eyebrow); }
.st-patol .body { color: var(--tp-patol-muted); }
/* Bajada del bloque de video. Estaba como atributo style en la plantilla; se
trajo acá cuando la bajada pasó a poder tener más de un párrafo. */
.st-video .body { color: var(--tp-video-muted); }
.st-patol .link-arrow { color: var(--tp-patol-fg); }
.st-patol .proc-list > li { border-top-color: var(--tp-patol-line); }
.st-patol .proc-list__desc { color: var(--tp-patol-muted); }
.st-patol .proc-list__n { opacity: .34; }
/* Variante enlazada de la lista de procedimientos */
.proc-list--link > li { padding: var(--sp-8) 0; }
.proc-list__link {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-6);
text-decoration: none;
color: inherit;
}
.proc-list__link .proc-list__term { transition: color var(--dur-base) var(--ease-out); }
.proc-list__link:hover .proc-list__term { text-decoration: underline; text-underline-offset: 5px; }
/* En la home los títulos son cortos: no hace falta reservar dos líneas */
.proc-list--link .proc-list__term { min-height: 0; }
.patol-head { display: grid; gap: 0; }
.patol-foot { margin-top: var(--sp-9); }
/* --- 15.4 · Hub de tratamientos (tratamientos.html) ------------------------- */
.hub-bloque {
display: grid;
grid-template-columns: 40fr 60fr;
align-items: start;
gap: var(--sp-11);
padding: var(--sp-10) 0;
border-top: var(--bw-hairline) solid var(--cv-gris);
}
.hub-bloque:first-of-type { border-top: 0; padding-top: 0; }
.hub-bloque:last-of-type { padding-bottom: 0; }
.hub-bloque__titulo {
margin: 0;
font-family: var(--font-neutral);
font-weight: 400;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--cv-grafito);
text-wrap: pretty;
}
.hub-bloque__n {
margin: 0 0 var(--sp-3);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
color: var(--cv-azul);
font-variant-numeric: tabular-nums;
}
/* Columna única: una fila por procedimiento. En dos columnas el ojo tiene que
decidir si sigue hacia abajo o hacia el costado, y al abrir un acordeón la
fila vecina se desplaza. Con una sola columna la lista se lee de corrido y
cada panel empuja únicamente lo que viene después. La regla va arriba de
cada fila —border-top en la lista más border-bottom en cada ítem— así que
la primera también abre con línea. */
.hub-links {
list-style: none;
margin: 0;
padding: 0;
border-top: var(--bw-hairline) solid var(--cv-gris);
}
.hub-links > li { border-bottom: var(--bw-hairline) solid var(--cv-gris); }
/* --- Acordeón de procedimientos --------------------------------------------
Cada patología abre su propia descripción. No enlazan a ningún lado: ya
están dentro del bloque de su vertical, que es el destino de todo el menú.
El disparador es la fila entera —no sólo el ícono— y mide 44px de alto como
mínimo, que es el área táctil chica aceptable en mobile. */
.proc__q {
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: 14px 0;
background: none;
border: 0;
cursor: pointer;
text-align: left;
color: var(--cv-grafito);
font-family: var(--font-rounded);
font-weight: 700;
font-size: 17px;
line-height: 1.35;
transition: color var(--dur-base) var(--ease-out);
}
.proc__q:hover { color: var(--cv-azul); }
/* El ícono está siempre visible, sin hover: es lo que anuncia que la fila
abre. Al abrirse gira 45° y el + se lee como ×. */
.proc__q .ic { color: var(--cv-azul); flex: none; transition: transform var(--dur-base) var(--ease-out); }
.proc__q[aria-expanded="true"] .ic { transform: rotate(45deg); }
/* La altura se anima con grid-template-rows de 0fr a 1fr: da la altura real
del contenido sin fijar un máximo a mano. El panel además lleva el atributo
hidden, que el JS saca antes de abrir y repone al terminar de cerrar. */
.proc__a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 240ms var(--ease-out);
}
.proc__a[hidden] { display: none; }
.proc__a.is-open { grid-template-rows: 1fr; }
.proc__a-int { overflow: hidden; }
.proc__texto {
margin: 0;
padding: 0 var(--sp-8) var(--sp-6) 0;
font-family: var(--font-neutral);
font-weight: 400;
font-size: 16px;
line-height: var(--lh-body);
color: var(--text-muted);
text-wrap: pretty;
}
/* --- 15.5 · Accesos directos: WhatsApp + Instagram --------------------------
Los dos al mismo nivel visual, uno debajo del otro y a todo el ancho de su
columna. En contacto y en el footer de las cinco páginas. */
.directos { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.directos .btn { width: 100%; }
.directos--footer { margin-top: var(--sp-5); max-width: 320px; }
.site-footer__contact .directos { margin-left: auto; }
/* .site-footer a gana por especificidad: hay que devolverle medida y color al botón */
.site-footer .directos .btn { font-size: 15px; line-height: 1; padding: 14px 16px; text-align: center; }
.site-footer .directos .btn--primary { color: var(--cta-fg); }
.site-footer .directos .btn--primary:hover { text-decoration: none; }
@media (max-width: 860px) { .site-footer__contact .directos { margin-left: 0; } }
/* Las redes que quedan (Facebook, LinkedIn, YouTube) siguen como íconos */
.site-footer__socials { margin-top: var(--sp-5); }
/* --- 15.7 · Mobile: acordeón de Tratamientos dentro del panel --------------- */
@media (max-width: 767px) {
.nav-panel.is-open { overflow-y: auto; }
.nav-acc { width: 100%; }
.nav-acc__head { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }
.nav-acc__head > a {
color: var(--cv-blanco);
text-decoration: none;
font-family: var(--font-neutral);
font-size: 22px;
line-height: 1;
padding-bottom: 4px;
border-bottom: 2px solid transparent;
}
.nav-acc__head > a[aria-current="page"] {
font-weight: 600;
border-bottom-color: var(--accent, var(--cv-blanco));
}
.nav-acc__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
margin-left: auto;
padding: 0;
background: none;
border: 0;
border-radius: var(--r-pill);
color: var(--cv-blanco);
cursor: pointer;
}
.nav-acc__toggle .ic { transition: transform var(--dur-base) var(--ease-out); }
.nav-acc__toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
.nav-acc__panel { padding: var(--sp-5) 0 var(--sp-2); display: grid; gap: var(--sp-5); }
.nav-acc__panel[hidden] { display: none; }
.nav-acc__grupo { border-top: var(--bw-hairline) solid var(--cv-blanco-24); padding-top: var(--sp-4); }
.nav-acc__grupo .nav-acc__head > a {
font-family: var(--font-neutral);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--cv-blanco);
line-height: 1.4;
border-bottom: 0;
padding-bottom: 0;
}
.nav-acc__toggle--chico { width: 32px; height: 32px; }
.nav-acc__toggle--chico .ic { width: 18px; height: 18px; }
.nav-acc__lista { list-style: none; margin: 0; padding: var(--sp-4) 0 var(--sp-2); display: grid; gap: var(--sp-4); }
.nav-acc__lista[hidden] { display: none; }
.nav-acc__lista a {
font-family: var(--font-rounded);
font-weight: 700;
font-size: 17px;
line-height: 1.25;
color: var(--cv-blanco);
text-decoration: none;
border-bottom: 0;
padding-bottom: 0;
}
.nav-acc__todos {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-neutral);
font-weight: 600;
font-size: 16px;
color: var(--cv-blanco);
text-decoration: underline;
text-underline-offset: 5px;
border-bottom: 0;
padding-bottom: 0;
}
}
/* --- 15.8 · Responsive de los bloques nuevos -------------------------------- */
@media (max-width: 860px) {
.hub-bloque { grid-template-columns: 1fr; gap: var(--sp-7); padding: var(--sp-9) 0; }
.proc-list--link > li { padding: var(--sp-7) 0; }
}
/* ============================================================================
16. BLOQUES NUEVOS — reseñas, reserva, currículum y landings de campaña
16.1 Reseñas de Google (home y landings)
16.3 Sobre el Dr.: redes + descarga de currículum
16.4 Contacto: tarjetas de reserva presencial / online
16.5 Landings de campaña: afirmaciones, chips, pasos, formulario corto
Mismos tokens, mismas dos familias tipográficas, mismos fondos de marca.
============================================================================ */
/* --- 16.1 · Reseñas y comentarios de pacientes ------------------------------
El boceto dibujó seis tarjetas en 3×2. En el sitio real la cantidad la pone
el cliente, así que la grilla se acomoda a lo que haya: nunca deja un hueco
al final de la fila ni estira una tarjeta a media página. La regla es una
sola —tres columnas como máximo, ancho de tarjeta acotado, resto centrado— y
se escribe caso por caso porque son cinco casos posibles y ninguna función
de CSS los resuelve todos junta.
Tarjeta estándar del sistema: blanca, hairline gris, radio 14px, sombra
plana y elevación de 4px en hover. Las estrellas son el único lugar donde el
amarillo lima aparece como relleno de ícono. */
.resenas-head { max-width: 62ch; margin-bottom: var(--sp-10); }
.resenas-head .body { margin-bottom: 0; }
.resenas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap);
}
/* Una sola: no tiene sentido una columna de 1200px de ancho. */
.resenas-grid--1 {
grid-template-columns: minmax(0, 520px);
justify-content: center;
}
/* Dos y cuatro: dos columnas centradas —2×1 y 2×2—, sin fila incompleta. */
.resenas-grid--2,
.resenas-grid--4 {
grid-template-columns: repeat(2, minmax(0, 460px));
justify-content: center;
}
/* Cinco: tres arriba y dos centradas abajo. Seis medias columnas y cada
tarjeta ocupa dos; la cuarta arranca corrida media columna y con eso la
segunda fila queda centrada en vez de dejar el hueco a la derecha. */
.resenas-grid--5 { grid-template-columns: repeat(6, 1fr); }
.resenas-grid--5 > .resena { grid-column: span 2; }
.resenas-grid--5 > .resena:nth-child(4) { grid-column: 2 / span 2; }
.resena {
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-7);
background: var(--cv-blanco);
border: var(--bw-hairline) solid var(--cv-gris);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.resena:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
/* Cinco estrellas rellenas en amarillo lima */
.estrellas { display: inline-flex; gap: 3px; color: var(--cv-amarillo); }
.estrellas .ic { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1; }
.resena__texto {
margin: 0;
font-family: var(--font-neutral);
font-size: 16px;
line-height: var(--lh-body);
color: var(--text-muted);
}
/* Pie: nombre en la familia neutra, el resto en caption azul petróleo */
.resena__pie {
margin: auto 0 0;
padding-top: var(--sp-4);
border-top: var(--bw-hairline) solid var(--cv-gris);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
line-height: 1.5;
color: var(--text-muted);
}
.resena__nombre { font-weight: 600; color: var(--cv-grafito); }
.resenas-foot { margin-top: var(--sp-10); }
/* En pantallas chicas manda el ancho, no la cantidad: las variantes vuelven
todas a dos columnas y después a una. */
@media (max-width: 980px) {
.resenas-grid, .resenas-grid--5 { grid-template-columns: repeat(2, 1fr); }
.resenas-grid--1 { grid-template-columns: minmax(0, 520px); }
.resenas-grid--5 > .resena,
.resenas-grid--5 > .resena:nth-child(4) { grid-column: auto; }
}
@media (max-width: 860px) {
.resenas-grid, .resenas-grid--1, .resenas-grid--2,
.resenas-grid--4, .resenas-grid--5 { grid-template-columns: minmax(0, 1fr); }
}
/* Píldora sobre un hero claro. En "Claridad" la píldora es blanca y la columna
de texto del hero también: sin hairline el contorno no se lee. El borde usa
el mismo token de línea del tema, así que sobre fondos oscuros desaparece. */
.hero__text .pill { border: var(--bw-hairline) solid var(--tp-hairline); }
/* Píldora sobre una sección blanca, fuera del hero. Ahí no lleva hairline y el
fondo es el mismo de la sección, así que la forma no se ve: sólo se veía el
relleno horizontal, que corría el texto 28px a la derecha del título. Se le
quita el relleno lateral y el fondo, y el texto queda alineado al borde
izquierdo del bloque. Pedido del cliente sobre "Sobre el especialista" de
la home; la regla vale para cualquier píldora que quede en esa situación. */
.st-sobre .pill,
.s-blanco .pill {
padding-inline: 0;
background: transparent;
}
/* --- 16.3 · Sobre el Dr.: redes + descarga de currículum -------------------- */
.perfil-acciones {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-top: var(--sp-10);
}
/* --- 16.4 · Contacto: reserva presencial y online ---------------------------
Dos tarjetas equivalentes: mismo fondo, mismo borde, mismo botón. Ninguna
destacada — la elección es del paciente, no una recomendación del sitio. */
.reserva-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
.reserva {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-8);
background: var(--cv-blanco);
border: var(--bw-hairline) solid var(--cv-gris);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.reserva:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.reserva__icono { color: var(--cv-azul); }
.reserva__titulo {
margin: 0;
font-family: var(--font-neutral);
font-weight: var(--fw-semibold);
font-size: var(--fs-h4);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--cv-grafito);
}
.reserva__donde {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: 16px;
line-height: 1.4;
color: var(--cv-azul);
}
.reserva__texto { margin: 0; font-family: var(--font-neutral); font-size: 16px; line-height: var(--lh-body); color: var(--text-muted); }
.reserva .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 860px) { .reserva-grid { grid-template-columns: 1fr; } }
/* --- 16.5 · Landings de campaña --------------------------------------------
Páginas de aterrizaje de paid, una por patología. No van en el menú: se
llega desde el aviso, desde el mega menú y desde el índice de la home. */
/* C · ¿Eres candidata / candidato? — lista afirmativa, no un checklist.
El ícono va dentro de un disco amarillo lima con la flecha en grafito: sobre
celeste el trazo amarillo suelto no tendría contraste suficiente. */
.afirmaciones { list-style: none; margin: var(--sp-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--grid-gap); }
.afirmaciones > li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: start; }
.afirmacion__icono {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: var(--r-pill);
background: var(--cv-amarillo);
color: var(--cv-grafito);
}
.afirmacion__texto {
margin: 0;
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: 1.35;
color: var(--cv-grafito);
}
.candidato-foot { margin-top: var(--sp-10); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.candidato-foot .body { margin: 0; max-width: 52ch; }
/* D · Chips de beneficio — pill con outline, sin relleno */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-9); padding: 0; list-style: none; }
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 9px 18px;
border: var(--bw-hairline) solid var(--chip-border);
border-radius: var(--r-pill);
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: 15px;
line-height: 1;
color: var(--chip-fg);
}
/* Sobre grafito o azul el hairline oscuro desaparece: se invierte */
.s-grafito .chip, .s-azul .chip { border-color: var(--cv-blanco-24); color: var(--cv-blanco); }
/* E · Cuatro pasos numerados en fila */
.pasos { list-style: none; margin: var(--sp-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.paso__n {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
margin-bottom: var(--sp-5);
border-radius: var(--r-pill);
background: var(--cv-amarillo);
color: var(--cv-grafito);
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: 18px;
line-height: 1;
}
.paso__titulo {
margin: 0 0 var(--sp-3);
font-family: var(--font-neutral);
font-weight: var(--fw-semibold);
font-size: var(--fs-h4);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--cv-grafito);
}
.paso__texto { margin: 0; font-family: var(--font-neutral); font-size: 16px; line-height: var(--lh-body); color: var(--text-muted); }
/* H · CTA final con formulario corto sobre azul petróleo */
.cta-form { display: grid; grid-template-columns: 45fr 55fr; gap: var(--sp-11); align-items: start; }
.cta-form .title { color: var(--cv-blanco); }
.cta-form .body { color: var(--cv-blanco-70); }
.cta-form__directo { margin-top: var(--sp-8); }
@media (max-width: 980px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
.afirmaciones, .pasos, .cta-form { grid-template-columns: 1fr; }
.cta-form { gap: var(--sp-9); }
}
/* ============================================================================
17. BLOQUES PROPIOS DE WORDPRESS
17.1 Encuadre de fotografía (.enc-alto)
17.2 Accesibilidad: salto al contenido y texto sólo para lectores
17.3 Barra de administración
17.4 Formularios nativos: mensajes de resultado y honeypot
17.5 Página genérica y 404
============================================================================ */
/* --- 17.1 · Encuadre de fotografía ------------------------------------------
Regla del sistema: una fotografía vertical nunca va en un contenedor 16:9.
Cuando no queda otra —una vertical dentro de un contenedor apaisado, como el
media del hero o la tarjeta 16:9 de un tratamiento— se le pone .enc-alto,
que prioriza el tercio superior de la foto en vez de su centro geométrico.
El valor se ajusta por imagen con la variable --enc, entre 12% y 20%:
12% para un plano muy cerrado, donde la cara está bien arriba; 20% para un
plano general, donde bajar el encuadre deja aire de más. Fuera de ese rango
el recorte se lee mal: por debajo de 12% corta la frente, por encima de 20%
el sujeto queda a media altura y la foto pierde el gesto.
Se usa así, desde el Personalizador o desde la plantilla:
![]()
Las fotografías apaisadas no la necesitan: object-position: center les
funciona. */
.enc-alto {
object-fit: cover;
object-position: center clamp(12%, var(--enc, 15%), 20%);
}
/* --- 17.2 · Accesibilidad ---------------------------------------------------
Salto al contenido: primer elemento enfocable de la página, invisible hasta
que recibe foco de teclado. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 14px 24px;
background: var(--cv-amarillo);
color: var(--cv-grafito);
font-family: var(--font-neutral);
font-weight: 600;
font-size: 16px;
text-decoration: none;
border-radius: 0 0 var(--r-input) 0;
}
.skip-link:focus {
left: 0;
box-shadow: var(--shadow-lift);
}
/* Texto disponible para lectores de pantalla y oculto a la vista. Mismo
recorte que usa el core de WordPress. */
.screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.screen-reader-text:focus {
clip-path: none;
height: auto;
width: auto;
margin: 0;
padding: 14px 24px;
background: var(--cv-amarillo);
color: var(--cv-grafito);
z-index: 200;
}
/* Imágenes de columna en las grillas partidas: arriba, aunque la grilla
centre el resto (en el boceto lo hacía el envoltorio .ph). */
.split-40-60 > img, .split-45-55 > img, .split-58-42 > img { align-self: start; }
/* --- 17.3 · Barra de administración -----------------------------------------
Con la barra visible el header sticky arranca 32px más abajo (46px en la
franja angosta de WordPress) y las anclas tienen que compensarlo. */
.admin-bar .site-header { top: 32px; }
.admin-bar main [id] { scroll-margin-top: calc(var(--header-h) + 32px + 24px); }
@media (max-width: 782px) {
.admin-bar .site-header { top: 46px; }
.admin-bar main [id] { scroll-margin-top: calc(var(--header-h) + 46px + 24px); }
}
@media (max-width: 600px) {
/* Por debajo de 600px la barra de admin deja de ser fija */
.admin-bar .site-header { top: 0; }
}
.admin-bar .nav-panel { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav-panel { top: 46px; } }
/* --- 17.4 · Formularios nativos ---------------------------------------------
Contacto y las dos landings. El mensaje de resultado se imprime arriba del
formulario y recibe el foco al cargar la página, para que quien navega por
teclado o con lector de pantalla se entere de que pasó algo. */
.form-msg {
margin: 0 0 var(--sp-6);
padding: var(--sp-5) var(--sp-6);
border-radius: var(--r-input);
border-left: 4px solid var(--cv-azul);
background: var(--cv-gris);
color: var(--cv-grafito);
font-family: var(--font-neutral);
font-size: 16px;
line-height: var(--lh-body);
}
.form-msg--ok { border-left-color: var(--cv-azul); background: var(--cv-celeste); }
.form-msg--error { border-left-color: #a3231f; background: rgb(163 35 31 / .08); }
.form-msg ul { margin: var(--sp-3) 0 0; padding-left: var(--sp-6); }
.form-msg:focus-visible { box-shadow: var(--focus-ring); }
/* Campo con error: hairline más marcada + mensaje bajo la etiqueta */
.field--error input, .field--error select, .field--error textarea { border-color: #a3231f; }
.field__error {
display: block;
margin-top: var(--sp-2);
font-family: var(--font-neutral);
font-size: var(--fs-caption);
line-height: 1.5;
color: #a3231f;
}
/* Honeypot: campo señuelo para robots de spam. Se saca de la vista sin
display:none —que muchos robots detectan— y se excluye del tabulado y de los
lectores de pantalla. */
.hp-field {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- 17.5 · Página genérica y 404 -------------------------------------------
page.php es el respaldo para cualquier página que el cliente cree sin elegir
plantilla. Le da el mismo ritmo tipográfico que el resto del sitio al HTML
que salga del editor de bloques. */
.entry-content { max-width: var(--measure); }
.entry-content > * { margin-top: var(--sp-6); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content p,
.entry-content li {
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
}
.entry-content h2 {
font-family: var(--font-neutral);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--cv-grafito);
margin-top: var(--sp-10);
}
.entry-content h3 {
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--cv-grafito);
margin-top: var(--sp-9);
}
.entry-content h4 {
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: 1.4;
color: var(--cv-grafito);
margin-top: var(--sp-8);
}
.entry-content a { color: var(--cv-azul); text-underline-offset: 4px; }
.entry-content img { border-radius: var(--r-media); height: auto; }
.entry-content blockquote {
margin: var(--sp-8) 0;
padding-left: var(--sp-7);
border-left: 3px solid var(--cv-celeste);
font-family: var(--font-rounded);
font-weight: var(--fw-rounded);
font-size: var(--fs-h4);
line-height: 1.5;
color: var(--cv-grafito);
}
.entry-content ul, .entry-content ol { padding-left: var(--sp-7); }
.entry-content li { margin-top: var(--sp-2); }
/* Error 404 — misma banda que las páginas internas, con las salidas a mano */
.error-404 { display: grid; gap: var(--sp-6); max-width: 62ch; }
.error-404__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
/* --- 17.6 · Texto con marcado limitado --------------------------------------
Los bloques que el cliente escribe en el Personalizador llegan como párrafos
sin clase. .texto-rico les da el mismo tratamiento que tiene .body en el
resto del sitio, incluido el primer párrafo sin margen superior. */
.texto-rico p {
margin: var(--sp-6) 0 0;
max-width: var(--measure);
font-family: var(--font-neutral);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-muted);
text-wrap: pretty;
}
.texto-rico p:first-child { margin-top: 0; }
.texto-rico .rounded { font-family: var(--font-rounded); font-weight: var(--fw-rounded); }
/* Sobre fondo oscuro el texto corrido va en blanco al 70%, igual que .body--on-dark */
.s-azul .texto-rico p, .s-grafito .texto-rico p, .st-medios .texto-rico p { color: var(--cv-blanco-70); }
/* Enlace a la landing dentro de un panel del acordeón del hub */
.proc__mas { margin: 0; padding: 0 var(--sp-8) var(--sp-6) 0; }
/* --- 17.7 · En los medios ---------------------------------------------------
Cada aparición lleva su pie —título de la nota, medio y fecha— y arriba, o
bien el reproductor diferido de YouTube, o bien una tarjeta que abre el
original en Instagram o Facebook.
Meta no deja embeber sin token de aplicación, así que esas dos no tienen
reproductor: la tarjeta es la miniatura que sube el cliente con el ícono de
la plataforma encima. Se usa el mismo círculo amarillo del botón de play,
para que las dos cosas se lean como la misma familia. */
.medio__enlace {
position: relative;
display: block;
aspect-ratio: 16 / 9;
border-radius: var(--r-media);
overflow: hidden;
background: var(--cv-grafito);
}
.medio__enlace img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medio__scrim { position: absolute; inset: 0; background: var(--overlay-photo); }
.medio__marca {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 84px; height: 84px;
border-radius: 50%;
background: var(--cta-bg);
display: grid; place-items: center;
transition: transform var(--dur-base) var(--ease-out);
}
.medio__enlace:hover .medio__marca { transform: translate(-50%, -50%) scale(1.06); }
.medio__marca .ic { color: var(--cta-fg); }
.medio__pie {
margin: var(--sp-4) 0 0;
font-family: var(--font-neutral);
font-size: var(--fs-caption);
line-height: 1.6;
color: var(--cv-blanco-70);
}
.medio__titulo { font-family: var(--font-rounded); font-weight: 700; font-size: 16px; color: var(--cv-blanco); }
/* --- 17.8 · Video vertical --------------------------------------------------
Un Short de YouTube es 9:16. Dentro del contenedor de 16:9 del bloque de
video quedaría con dos franjas negras a los costados y el reproductor
ocupando un tercio del alto disponible, así que el bloque toma la proporción
del video y se angosta.
400px es el tope: más ancho que eso, un vertical empieza a empujar la altura
de la sección más allá de una pantalla. Como es un máximo y no un ancho
fijo, en mobile la tarjeta ocupa toda su columna sin ninguna regla extra. */
.video--vertical {
aspect-ratio: 9 / 16;
width: 100%;
max-width: 400px;
margin-inline: auto;
}
/* ============================================================================
18 · FONDOS CORREGIDOS POR ALTERNANCIA
============================================================================
Cada sección se puede ocultar desde el admin sin borrar su contenido. Si al
ocultar una quedan dos seguidas del mismo tono, varela_fondo() (en
inc/consultas.php) le agrega a la segunda una de estas clases, que la pasa
al tono siguiente de la rotación de marca. El texto no cambia de color
porque los tres tonos claros llevan grafito; el único caso oscuro es la
banda de cierre después de una sección azul, que pasa a celeste con texto y
botón de contorno en grafito. */
.section.fondo-alt-gris { background: var(--cv-gris); color: var(--cv-grafito); }
.section.fondo-alt-blanco { background: var(--cv-blanco); color: var(--cv-grafito); }
.section.fondo-alt-celeste { background: var(--cv-celeste); color: var(--cv-grafito); }
.section.fondo-alt-azul { background: var(--cv-azul); color: var(--cv-blanco); }
.cta-band.fondo-alt-celeste {
--band-bg: var(--cv-celeste);
--band-fg: var(--cv-grafito);
}
.cta-band.fondo-alt-celeste .btn--outline-on-dark {
color: var(--cv-grafito);
border-color: var(--cv-grafito);
}
.cta-band.fondo-alt-celeste .btn--outline-on-dark:hover { background: rgb(35 31 32 / .08); }