/*
TheraCare — sistema de diseño del sitio público.
Implementa el handoff de rediseño: violetas de la marca sobre un lienzo
lila (nunca blanco puro), Gantari para titulares —siempre en peso ligero,
nunca bold— y Nunito Sans para el cuerpo. El movimiento es lento y
respirado: nada rebota ni gira.
El panel de administración NO usa esta hoja (tiene admin/base.css), así
que aquí se puede cambiar todo sin tocarlo.
Fuentes: se cargan con en el de cada página (no con @import
— el link deja que el navegador las descubra y descargue en paralelo con
esta hoja en vez de esperar a leerla).
*/
/* ---------- Tokens ---------- */
:root {
/* Paleta base — tomada del logo de TheraCare */
--color-plum-ink: #3f3565; /* violeta del logotipo — texto principal */
--color-purple: #6f61ad; /* mitad oscura del corazón — acción primaria */
--text-emphasis: var(--color-purple);
--color-purple-deep: #574a92;
--color-script: #8b7fc7; /* violeta de la firma — acentos y enlaces */
--color-lilac: #c9c0e8; /* mitad clara del corazón */
--color-lilac-soft: #e9e4f7;
--color-orchid: #be66ab; /* acento cálido, con moderación */
/* Neutros — templados en violeta, nunca gris frío */
--color-canvas: #f8f6fc;
--color-canvas-rgb: 248, 246, 252;
--color-paper: #ffffff;
--color-border: #e5e0f0;
--color-text: #3f3565;
/* El handoff propone #6f6a80. Va más oscuro porque el degradado de la
página va fijo a la ventana: su lila más intenso queda siempre en la
franja baja de la pantalla y ahí pasa texto secundario al hacer scroll.
Con el valor del handoff quedaba en 3:1; con este, en 4.8:1. */
--color-text-muted: #514c63;
--color-text-faint: #9b95ad;
--color-success: #5f9a80;
--color-warning: #c08f3f;
--color-danger: #bd6a6a;
/* El verde del handoff sirve de relleno, pero como texto sobre tarjeta
blanca se queda en 3.3:1. Esta es su versión legible. */
--text-success: #457358;
/* Aliases semánticos: el modo oscuro solo redefine la paleta base de
arriba y todo esto se recalcula solo. */
--surface-page: var(--color-canvas);
--surface-card: var(--color-paper);
--surface-wash: var(--color-lilac-soft);
--surface-ink: var(--color-plum-ink);
--text-body: var(--color-text);
--text-muted: var(--color-text-muted);
--text-faint: var(--color-text-faint);
--text-on-ink: #f4f1fb;
--action-primary: var(--color-purple);
--action-primary-hover: var(--color-purple-deep);
/* Color de la luz que recorre el borde del botón primario. */
--btn-luz: rgba(255, 255, 255, 0.95);
/* Texto encima del relleno de acción. En claro el violeta es oscuro y va
blanco; en oscuro el violeta se aclara y el blanco cae a 3.5:1, así que
ahí el botón lleva tinta oscura. */
--text-on-action: #ffffff;
/* El violeta de la firma (#8b7fc7) es el color del handoff para enlaces y
antetítulos, pero en texto pequeño se queda en 3.3:1 sobre el lienzo y
en 2.2:1 sobre el lila del fondo. Aquí queda solo para lo decorativo —la
línea del antetítulo, el cursor del titular— y el texto usa este violeta,
que se lee sobre cualquier punto del degradado. */
--link: #4f4285;
--text-eyebrow: var(--link);
--border-hairline: var(--color-border);
--focus-ring: 0 0 0 3px rgba(139, 127, 199, 0.35);
/* El violeta de acción sobre las bandas de tinta da 2.09:1, por debajo del
3:1 que pide un indicador de foco. Ahí el anillo se aclara. */
--focus-ring-color: var(--action-primary);
/* Vidrio de la cabecera y fondo de la página */
--nav-glass: rgba(248, 246, 252, 0.6);
--nav-hairline: rgba(201, 192, 232, 0.45);
/* Fondo de la página: el 'silk blend' del gradient builder, con el
recorrido de tonos intacto —azul 220°, lila 276°, rosa 347°— pero cada
parada aclarada sobre el lienzo. Los colores literales del recipe dejan
el texto secundario en 1.60:1 sobre el azul; estos lo dejan en 5.01:1.
Las tres mezclas son desiguales (32%, 45%, 55% del original) porque el
azul es el tono más oscuro de los tres: diluido igual que el rosa se
vería el doble de pesado. Desigual en número, parejo en la pantalla.
Va fijo a la ventana, no al documento. Atado al documento, una página
de ocho pantallas mostraría una franja casi lisa por pantalla —justo lo
plano que este degradado viene a arreglar—. Fijo, cada pantalla recibe
el recorrido completo. El hero lo tapa con su lienzo a propósito y se
disuelve en él por abajo. */
--page-gradient: linear-gradient(170deg,
#c1cae5 0%,
#d9c8e7 53%,
#f6d1dc 100%);
--page-vignette: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.016) 100%);
/* El grano es lo que separa un degradado de una tela: rompe las bandas
que salen en pantallas de 8 bits y le da tacto. Una sola capa, no las
dos del recipe: el modo de fusión se recalcula en cada repintado y el
fondo ya va fijo, que en móvil es caro de sobra. */
--page-grain: url("data:image/svg+xml,");
/* Vidrio de las tarjetas apiladas. La superficie es casi opaca a
propósito: el componente original no dibuja texto, nosotros sí, y con
cinco capas translúcidas el texto de la tarjeta de abajo se transparenta
y ninguna se lee. El vidrio lo venden el desenfoque del fondo y el
brillo del borde, no la transparencia. */
--glass-surface: rgba(255, 255, 255, 0.86);
--glass-hairline: rgba(255, 255, 255, 0.85);
--glass-sheen: rgba(255, 255, 255, 0.9);
--glass-edge: rgba(201, 192, 232, 0.55);
--glass-shadow: 0 18px 50px rgba(63, 53, 101, 0.16), 0 2px 8px rgba(63, 53, 101, 0.08);
/* Tipografía */
--font-display: 'Gantari', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
--weight-display: 380;
--weight-display-strong: 460;
--weight-medium: 550;
--weight-bold: 700;
--text-caption: 12px;
--text-body-sm: 14px;
--text-lead: 19px;
--text-subheading: 24px;
--tracking-label: 0.08em;
/* Espaciado y forma — base de 4px */
/* El handoff propone 1160px. Se ensanchó porque en pantallas grandes
dejaba demasiado margen muerto a los lados; el largo de línea sigue
acotado por los max-width en ch de cada párrafo. */
--page-max-width: 1320px;
--space-1: 8px;
--space-2: 12px;
--space-3: 20px;
--space-4: 32px;
--space-5: 48px;
--space-6: 96px;
--space-7: 120px;
--radius-sm: 10px; /* inputs */
--radius-md: 16px; /* mosaicos, pestañas */
--radius-lg: 24px; /* tarjetas */
--radius-xl: 36px; /* medios, bandas */
--radius-pill: 999px;
/* Sombras — teñidas de lila, apenas presentes */
--shadow-soft: 0 1px 2px rgba(63, 53, 101, 0.05), 0 8px 24px rgba(63, 53, 101, 0.06);
--shadow-lift: 0 2px 6px rgba(63, 53, 101, 0.07), 0 16px 40px rgba(63, 53, 101, 0.1);
/* Movimiento — lento, respirado, nunca elástico */
--ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
--ease-drift: cubic-bezier(0.45, 0, 0.15, 1);
--duration-fast: 250ms;
--duration-base: 500ms;
--duration-slow: 900ms;
--duration-breathe: 6s;
/* Nombres heredados: los usan las secciones que todavía no se rediseñan
(hero, servicios, enfoque, contacto). Se eliminan cuando cada una pase
al sistema nuevo. */
--bg: var(--surface-page);
--bg-soft: var(--surface-wash);
--surface: var(--surface-card);
--text: var(--text-body);
--border: var(--border-hairline);
--tint: var(--surface-wash);
--tint-2: var(--surface-wash);
--ink: var(--color-plum-ink);
--accent: var(--action-primary);
--accent-hover: var(--action-primary-hover);
--accent-deep: var(--color-plum-ink);
--accent-pale: var(--color-lilac);
--pill-bg: var(--surface-wash);
--card-shadow: rgba(63, 53, 101, 0.08);
--shadow-sm: var(--shadow-soft);
--shadow-md: var(--shadow-soft);
--shadow-lg: var(--shadow-lift);
color-scheme: light;
}
:root[data-theme='dark'] {
--color-plum-ink: #f4f1fb;
--color-purple: #8b7fc7;
/* En oscuro el violeta de la firma cae a 2.4:1 sobre el fondo: se lee
como decoración, no como palabra. El lila lo sube a 4.9:1 y es lo
que ya usa la banda de enfoque para lo mismo. */
--text-emphasis: var(--color-lilac);
--color-purple-deep: #a79ddb;
--color-lilac-soft: #413764;
--color-canvas: #2b2447;
--color-canvas-rgb: 43, 36, 71;
--color-paper: #372e5c;
--color-border: #4b4079;
--color-text: #f4f1fb;
--color-text-muted: #c3bcd9;
--color-text-faint: #9b94b8;
--surface-ink: #231d3b;
--link: var(--color-lilac);
--text-eyebrow: var(--color-lilac);
--text-success: #8ccbaf;
--text-on-action: #1e1830;
--nav-glass: rgba(43, 36, 71, 0.55);
--nav-hairline: rgba(139, 127, 199, 0.32);
--page-gradient: linear-gradient(170deg,
#2a3358 0%,
#423a73 53%,
#66415e 100%);
--glass-surface: rgba(60, 51, 100, 0.88);
--glass-hairline: rgba(201, 192, 232, 0.20);
--glass-sheen: rgba(255, 255, 255, 0.16);
--glass-edge: rgba(139, 127, 199, 0.55);
--glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.24);
/* Color de la luz que recorre el borde del botón primario. */
--btn-luz: rgba(255, 255, 255, 0.98);
--card-shadow: rgba(0, 0, 0, 0.35);
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22);
--shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.24), 0 16px 40px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) {
--color-plum-ink: #f4f1fb;
--color-purple: #8b7fc7;
/* En oscuro el violeta de la firma cae a 2.4:1 sobre el fondo: se lee
como decoración, no como palabra. El lila lo sube a 4.9:1 y es lo
que ya usa la banda de enfoque para lo mismo. */
--text-emphasis: var(--color-lilac);
--color-purple-deep: #a79ddb;
--color-lilac-soft: #413764;
--color-canvas: #2b2447;
--color-canvas-rgb: 43, 36, 71;
--color-paper: #372e5c;
--color-border: #4b4079;
--color-text: #f4f1fb;
--color-text-muted: #c3bcd9;
--color-text-faint: #9b94b8;
--surface-ink: #231d3b;
--link: var(--color-lilac);
--text-eyebrow: var(--color-lilac);
--text-success: #8ccbaf;
--text-on-action: #1e1830;
--nav-glass: rgba(43, 36, 71, 0.55);
--nav-hairline: rgba(139, 127, 199, 0.32);
--page-gradient: linear-gradient(170deg,
#2a3358 0%,
#423a73 53%,
#66415e 100%);
--glass-surface: rgba(60, 51, 100, 0.88);
--glass-hairline: rgba(201, 192, 232, 0.20);
--glass-sheen: rgba(255, 255, 255, 0.16);
--glass-edge: rgba(139, 127, 199, 0.55);
--glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.24);
/* Color de la luz que recorre el borde del botón primario. */
--btn-luz: rgba(255, 255, 255, 0.98);
--card-shadow: rgba(0, 0, 0, 0.35);
--shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22);
--shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.24), 0 16px 40px rgba(0, 0, 0, 0.3);
color-scheme: dark;
}
}
/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
:focus-visible {
outline: 2px solid var(--focus-ring-color, var(--action-primary));
outline-offset: 3px;
border-radius: 4px;
}
body {
margin: 0;
background-color: var(--color-canvas);
background-image: var(--page-grain), var(--page-vignette), var(--page-gradient);
background-repeat: repeat, no-repeat, no-repeat;
background-size: 120px 120px, auto, auto;
background-blend-mode: overlay, normal, normal;
background-attachment: fixed;
color: var(--text-body);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: color 0.4s ease;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; transition: color var(--duration-fast) var(--ease-calm); }
a:hover { color: var(--color-purple-deep); }
::selection { background: var(--color-lilac); color: var(--color-plum-ink); }
.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--space-4); }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--weight-display);
color: var(--text-body);
margin: 0;
letter-spacing: -0.02em;
line-height: 1.08;
}
/* Los titulares llevan una palabra en itálica violeta — el único énfasis
tipográfico del sistema. */
h1 em, h2 em, h3 em { font-style: italic; color: var(--text-emphasis); }
.kicker {
color: var(--text-eyebrow);
font-weight: var(--weight-bold);
font-size: 13px;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin-bottom: var(--space-2);
}
/* ---------- Movimiento ---------- */
@keyframes tc-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes tc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-pop { from { opacity: 0; transform: scale(0.86) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tc-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes tc-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, -16px); } }
@keyframes tc-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes tc-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes tc-aurora { from { background-position: 50% 50%, 50% 50%; } to { background-position: 350% 50%, 350% 50%; } }
@keyframes tc-recorrido { to { offset-distance: 100%; } }
@keyframes tc-mark-entrada {
0% { opacity: 0; transform: scale(0.92); }
13% { opacity: 0.95; transform: scale(1.03); }
27% { opacity: 0.9; transform: scale(1.07); }
40% { opacity: 0.86; transform: scale(1.005); }
52% { opacity: 0.92; transform: scale(1.045); }
64% { opacity: 0.84; transform: scale(1); }
100% { opacity: 0.14; transform: scale(1); }
}
@keyframes tc-heartbeat {
0% { transform: scale(1); opacity: 0.14; }
8% { transform: scale(1.035); opacity: 0.2; }
16% { transform: scale(1); opacity: 0.155; }
24% { transform: scale(1.022); opacity: 0.18; }
34%, 100% { transform: scale(1); opacity: 0.14; }
}
/* Todo lo que lleve data-reveal entra al asomarse: sube 28px y aparece en
900ms. El valor del atributo es el retardo en milisegundos, que es como
se escalona un grupo (main.js lo aplica). */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--duration-slow) var(--ease-calm), transform var(--duration-slow) var(--ease-calm);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-reveal] { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* ---------- Botones ---------- */
/* Botón primario. Vuelve al relleno liso de siempre; encima le corre una luz
por el borde.
La luz es un elemento pequeño que viaja por el perímetro con offset-path,
no un degradado girando: así sigue la curva real de la píldora en vez de
aproximarla. El recorrido es un rect() con las esquinas redondeadas al
mismo radio que el botón, y offset-rotate (que por defecto es `auto`) gira
la estela para que apunte en la dirección de la marcha.
El aro se forma tapando el interior: ::before lleva la luz y ::after es el
relleno metido 2px, que deja a la vista solo ese borde. `overflow: hidden`
recorta lo que se sale. */
.stamp-btn {
--btn-radio: 22px;
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 11px 24px;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--text-on-action);
text-decoration: none;
white-space: nowrap;
background: var(--action-primary);
border: none;
border-radius: var(--radius-pill);
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: background var(--duration-fast) var(--ease-calm),
transform var(--duration-fast) var(--ease-calm),
box-shadow var(--duration-fast) var(--ease-calm);
}
.stamp-btn::after {
content: '';
position: absolute;
inset: 2px;
z-index: -1;
border-radius: inherit;
background: var(--action-primary);
transition: background var(--duration-fast) var(--ease-calm);
pointer-events: none;
}
/* offset-path con rect() es reciente. Donde no exista, el botón se queda liso
en vez de mostrar un cuadro de degradado suelto en una esquina. */
@supports (offset-path: rect(0 auto auto 0 round 22px)) {
.stamp-btn::before {
content: '';
position: absolute;
z-index: -2;
width: 42px;
aspect-ratio: 1;
background: linear-gradient(90deg, transparent 0%, var(--btn-luz) 100%);
/* Un desenfoque corto convierte el canto duro del cuadro en una luz. */
filter: blur(2px);
offset-path: rect(0 auto auto 0 round var(--btn-radio));
offset-distance: 0%;
animation: tc-recorrido 4.5s linear infinite;
pointer-events: none;
}
}
.stamp-btn svg { width: 18px; height: 18px; flex: none; }
.stamp-btn:hover { background: var(--action-primary-hover); color: var(--text-on-action); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.stamp-btn:hover::after { background: var(--action-primary-hover); }
.stamp-btn:active { transform: scale(0.98); }
.stamp-btn.lg { --btn-radio: 24px; min-height: 48px; padding: 13px 28px; font-size: 16px; }
/* El secundario se queda quieto: dos botones lado a lado, los dos con una luz
dando vueltas, compiten y ninguno gana. */
.stamp-btn.ghost {
background: var(--surface-card);
color: var(--color-plum-ink);
border: 1px solid var(--border-hairline);
box-shadow: none;
overflow: visible;
isolation: auto;
}
.stamp-btn.ghost::before,
.stamp-btn.ghost::after { display: none; }
.stamp-btn.ghost:hover {
background: var(--surface-wash);
color: var(--color-plum-ink);
border-color: var(--color-lilac);
box-shadow: var(--shadow-soft);
}
/* Usa el violeta de enlace, no el de acción: va sobre el fondo de la página,
donde el violeta claro se queda corto de contraste. */
.link-underline {
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--link);
display: inline-flex;
align-items: center;
/* Va junto a un botón: si el botón se puede tocar y el enlace no, la
alternativa se vuelve la opción difícil. */
min-height: 44px;
gap: 8px;
}
.link-underline svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-calm); }
.link-underline:hover { color: var(--color-purple); }
.link-underline:hover svg { transform: translateX(3px); }
/* ---------- Cabecera ---------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: var(--nav-glass);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border-bottom: 1px solid var(--nav-hairline);
transition: box-shadow 220ms var(--ease-calm);
}
.site-header.scrolled { box-shadow: 0 2px 20px var(--card-shadow); }
.site-header .bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-3);
min-height: 72px;
padding: 8px var(--space-4);
}
.brand { display: flex; align-items: center; justify-self: start; }
.brand img { height: 50px; width: auto; flex-shrink: 0; object-fit: contain; display: block; animation: tc-fade 1.6s var(--ease-calm) both; }
/* El logotipo tiene dos versiones; se muestra la que corresponde al tema. */
.brand .logo-dark { display: none; }
:root[data-theme='dark'] .brand .logo-light { display: none; }
:root[data-theme='dark'] .brand .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) .brand .logo-light { display: none; }
:root:not([data-theme='light']):not([data-theme='dark']) .brand .logo-dark { display: block; }
}
.nav-links {
display: none;
align-items: center;
justify-content: center;
justify-self: center;
gap: var(--space-4);
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.nav-links a {
font-size: 15px;
font-weight: var(--weight-medium);
color: var(--color-plum-ink);
text-decoration: none;
padding: 3px 0;
transition: color var(--duration-fast) var(--ease-calm);
}
.nav-links a:hover { color: var(--link); }
.header-actions { display: none; align-items: center; justify-self: end; gap: var(--space-1); }
/* Un solo botón en vez del par ES/EN: el globo dice que es el idioma y el
código dice en cuál estás. La etiqueta accesible dice a cuál te lleva,
que es lo que el código por sí solo no puede comunicar. */
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 44px;
min-height: 44px;
padding: 0 12px;
border: none;
background: transparent;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: inherit;
font-weight: var(--weight-medium);
font-size: 13px;
color: var(--text-muted);
transition: background var(--duration-fast) var(--ease-calm), color var(--duration-fast) var(--ease-calm);
}
.lang-toggle svg { width: 17px; height: 17px; flex: none; }
.lang-toggle:hover { background: var(--surface-wash); color: var(--color-plum-ink); }
.theme-toggle,
.icon-cta-btn,
.menu-btn,
.pwa-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--action-primary);
cursor: pointer;
flex: none;
transition: background var(--duration-fast) var(--ease-calm), color var(--duration-fast) var(--ease-calm);
}
/* flex: none — el ícono es contenido, no espacio negociable: sin esto un
relleno de más en el contenedor lo encoge en silencio. */
.theme-toggle svg, .icon-cta-btn svg, .pwa-nav-btn svg { width: 20px; height: 20px; flex: none; }
.theme-toggle:hover, .icon-cta-btn:hover, .menu-btn:hover, .pwa-nav-btn:hover { background: var(--surface-wash); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) .theme-toggle .icon-moon { display: none; }
:root:not([data-theme='light']):not([data-theme='dark']) .theme-toggle .icon-sun { display: block; }
}
.menu-btn { color: var(--color-plum-ink); }
.menu-btn svg { width: 22px; height: 22px; }
.mobile-actions { display: flex; align-items: center; justify-self: end; grid-column: 3; gap: 6px; }
/* Menú móvil: tarjeta flotante bajo la cabecera, no una banda desplegable. */
.mobile-nav { display: none; }
.mobile-nav.open {
display: flex;
flex-direction: column;
gap: 4px;
position: fixed;
top: 80px;
right: 16px;
left: auto;
width: min(280px, calc(100% - 32px));
max-width: none;
z-index: 60;
margin: 0;
padding: 12px;
background: var(--surface-card);
border: 1px solid var(--border-hairline);
border-radius: 20px;
box-shadow: var(--shadow-lift);
animation: tc-rise 320ms var(--ease-calm) both;
}
.mobile-nav a {
font-size: 16px;
font-weight: var(--weight-medium);
color: var(--color-plum-ink);
text-decoration: none;
min-height: 46px;
display: flex;
align-items: center;
padding: 0 14px;
border-radius: 12px;
transition: background var(--duration-fast) var(--ease-calm);
}
.mobile-nav a:hover { background: var(--surface-wash); }
/* .mobile-nav a está hecha para los enlaces de texto del menú y les da
padding lateral. Al botón de ícono de WhatsApp le comía la caja: 40px de
ancho menos 28 de relleno dejaban 12px, y el glifo se aplastaba a eso.
Los botones de ícono recuperan su caja cuadrada. */
.mobile-nav a.icon-cta-btn { padding: 0; min-height: 40px; }
.mobile-nav-row {
display: flex;
align-items: center;
gap: var(--space-1);
padding: 4px 6px 8px;
border-bottom: 1px solid var(--border-hairline);
margin-bottom: 4px;
}
.mobile-nav .stamp-btn { margin-top: 8px; width: 100%; }
@media (min-width: 820px) {
.nav-links { display: flex; }
.header-actions { display: flex; }
.mobile-actions, .mobile-nav, .mobile-nav.open { display: none; }
}
@media (max-width: 819px) {
.site-header .bar { padding: 8px 18px; gap: var(--space-2); }
}
/* ---------- Pastilla flotante de WhatsApp ---------- */
.wa-float {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 45;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
background: var(--action-primary);
color: var(--text-on-action);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-lift);
font-weight: var(--weight-medium);
font-size: 15px;
animation: tc-pop 800ms var(--ease-calm) 1.8s both;
transition: background var(--duration-fast) var(--ease-calm), transform var(--duration-fast) var(--ease-calm);
}
.wa-float svg { width: 20px; height: 20px; flex: none; }
.wa-float:hover { background: var(--action-primary-hover); color: var(--text-on-action); transform: translateY(-2px); }
/* En móvil se reduce a un círculo: es el acceso permanente a WhatsApp y
flota sobre botones que ocupan todo el ancho, así que estorba menos sin
la etiqueta. */
@media (max-width: 819px) {
.wa-float {
right: 16px;
bottom: 16px;
width: 52px;
height: 52px;
padding: 0;
justify-content: center;
}
.wa-float span { display: none; }
.wa-float svg { width: 24px; height: 24px; }
}
/* ---------- Hero ---------- */
/* El hero tapa el degradado de la página con su lienzo plano, a propósito:
encima van tres capas de luz —la aurora, un halo que respira y el isotipo
de la marca latiendo— y ninguna se leería sobre un fondo ya teñido. */
.hero {
position: relative;
padding: 148px var(--space-4) var(--space-6);
overflow: hidden;
/* El hero se queda fuera del degradado, pero no puede cortarlo en seco:
el fondo va fijo a la ventana, así que un borde duro cambiaría de color
mientras uno baja y se notaría como un error. Se desvanece en los
últimos 220px.
Las paradas son irregulares a propósito: una rampa lineal termina en
esquina y esa esquina se ve como una raya (banda de Mach). Curvarla la
borra. */
background-image: linear-gradient(
to bottom,
var(--color-canvas) 0%,
var(--color-canvas) calc(100% - 220px),
rgba(var(--color-canvas-rgb), 0.86) calc(100% - 176px),
rgba(var(--color-canvas-rgb), 0.64) calc(100% - 130px),
rgba(var(--color-canvas-rgb), 0.40) calc(100% - 90px),
rgba(var(--color-canvas-rgb), 0.20) calc(100% - 54px),
rgba(var(--color-canvas-rgb), 0.07) calc(100% - 24px),
rgba(var(--color-canvas-rgb), 0) 100%);
}
.hero-aurora {
position: absolute;
inset: -10px;
pointer-events: none;
opacity: 0.42;
filter: blur(28px);
background-image:
repeating-linear-gradient(100deg, #f8f6fc 0%, #f8f6fc 7%, transparent 10%, transparent 12%, #f8f6fc 16%),
repeating-linear-gradient(100deg, #8b7fc7 10%, #c9c0e8 15%, #e9e4f7 20%, #be66ab 25%, #6f61ad 30%);
background-size: 300% 200%, 200% 100%;
background-position: 50% 50%, 50% 50%;
-webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 12%, transparent 72%);
mask-image: radial-gradient(ellipse at 100% 0%, #000 12%, transparent 72%);
animation: tc-aurora 60s linear infinite;
will-change: background-position;
}
.hero-blob {
position: absolute;
bottom: -160px;
left: -180px;
width: 520px;
height: 520px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, #efeaf9 0%, transparent 65%);
animation: tc-breathe var(--duration-breathe) var(--ease-drift) infinite 2s;
}
/* El isotipo va centrado en el alto del hero, no colgado de la esquina. La
marca de agua se centra con este envoltorio y no con transform, porque el
transform del hijo lo ocupa el latido. */
.hero-mark-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 6%;
pointer-events: none;
}
.hero-mark {
width: 400px;
max-width: 34vw;
/* Al cargar late una vez a plena opacidad y recién ahí se retira a marca
de agua; el texto entra encima de esa retirada. Las dos animaciones
conviven: la infinita arranca con retardo justo cuando la de entrada
termina, y como va después en la lista, es la que manda a partir de ahí. */
animation:
tc-mark-entrada 950ms var(--ease-calm) both,
tc-heartbeat 4.5s var(--ease-calm) infinite 950ms;
}
/* En oscuro la aurora se mezcla como luz y el halo se esconde: su color
claro fijo se leería como una mancha blanca sobre el fondo ciruela. */
:root[data-theme='dark'] .hero-aurora { opacity: 0.55; mix-blend-mode: screen; }
:root[data-theme='dark'] .hero-blob { display: none; }
:root[data-theme='dark'] .hero-mark { filter: brightness(1.9); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) .hero-aurora { opacity: 0.55; mix-blend-mode: screen; }
:root:not([data-theme='light']):not([data-theme='dark']) .hero-blob { display: none; }
:root:not([data-theme='light']):not([data-theme='dark']) .hero-mark { filter: brightness(1.9); }
}
.hero .wrap { position: relative; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; animation: tc-fade var(--duration-slow) var(--ease-calm) 820ms both; }
.hero-eyebrow::before {
content: '';
display: inline-block;
width: 48px;
height: 2px;
flex: none;
background: var(--color-script);
transform-origin: left;
animation: tc-grow var(--duration-slow) var(--ease-calm) 1020ms both;
}
.hero-eyebrow span {
font-size: 13px;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-eyebrow);
}
.hero-title {
font-size: clamp(52px, 9vw, 112px);
line-height: 1;
letter-spacing: -0.03em;
margin: 26px 0 0;
min-height: 1em;
}
/* El cursor que acompaña a la escritura del titular. */
.tc-caret {
display: inline-block;
width: 0.05em;
height: 0.82em;
margin-left: 0.06em;
vertical-align: baseline;
background: var(--color-script);
animation: tc-caret 1s steps(1, end) infinite;
}
.hero-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
gap: 56px;
align-items: center;
margin-top: var(--space-4);
}
.hero-body {
font-size: var(--text-lead);
color: var(--text-muted);
line-height: 1.55;
max-width: 44ch;
margin: 0 0 36px;
animation: tc-rise var(--duration-slow) var(--ease-calm) 1400ms both;
}
.hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
animation: tc-rise var(--duration-slow) var(--ease-calm) 1600ms both;
}
.hero-card {
justify-self: start;
display: flex;
gap: 14px;
align-items: center;
padding: 18px 22px;
background: color-mix(in srgb, var(--surface-card) 85%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid color-mix(in srgb, var(--border-hairline) 60%, transparent);
border-radius: var(--radius-md);
animation: tc-drift 9s var(--ease-drift) infinite;
}
.hero-card-icon {
width: 44px;
height: 44px;
border-radius: 50%;
flex: none;
display: grid;
place-items: center;
background: var(--surface-wash);
color: var(--action-primary);
}
.hero-card-icon svg { width: 22px; height: 22px; }
.hero-card strong,
.hero-card span:not(.hero-card-icon) {
transition: opacity 320ms var(--ease-calm);
}
/* El ícono cambia con la frase, así que cruza con ella. La tarjeta en sí
no parpadea: solo su contenido. */
.hero-card .hero-card-icon { transition: opacity 320ms var(--ease-calm); }
.hero-card.is-cambiando strong,
.hero-card.is-cambiando span { opacity: 0; }
.hero-card strong { display: block; font-size: 15px; font-weight: var(--weight-bold); }
.hero-card span { font-size: 13px; color: var(--text-muted); }
@media (max-width: 899px) {
.hero { padding: 116px var(--space-4) var(--space-5); }
/* En móvil el texto ocupa todo el ancho, así que el isotipo se centra en
los dos ejes y queda detrás, como marca de agua. */
.hero-mark-wrap { align-items: center; justify-content: center; padding: 0; }
.hero-mark { width: 300px; max-width: 68vw; }
/* En oscuro el isotipo va aclarado y aquí le queda texto encima: sin
atenuarlo, donde la marca es más clara el párrafo bajaba a 4.2:1. La
opacidad va en el envoltorio porque la del isotipo la mueve el latido. */
:root[data-theme='dark'] .hero-mark-wrap { opacity: 0.6; }
.hero-grid { gap: var(--space-4); margin-top: var(--space-3); }
.hero-ctas { flex-direction: column; align-items: stretch; }
.hero-ctas .stamp-btn { width: 100%; }
.hero-card { justify-self: stretch; }
}
@media (max-width: 899px) and (prefers-color-scheme: dark) {
:root:not([data-theme='light']):not([data-theme='dark']) .hero-mark-wrap { opacity: 0.6; }
}
/* ---------- Servicios ---------- */
.services { padding: var(--space-6) 0 0; }
.section-head { max-width: 620px; margin-bottom: var(--space-4); }
.section-head h2 { font-size: clamp(38px, 4.6vw, 58px); }
.section-head p { color: var(--text-muted); margin-top: var(--space-3); font-size: var(--text-lead); line-height: 1.55; }
/* Cinco servicios que se apilan al bajar. Cada ranura se pega bajo la
cabecera y la siguiente tarjeta sube por encima, dejando asomar el canto
de las anteriores como una baraja.
El apilado es puro `position: sticky` — sin librería de scroll. Lo único
que hace JS es la escala de las tarjetas ya enterradas, que es lo que da
la profundidad; sin JS quedan apiladas y planas, que se sigue leyendo. */
.service-stack {
max-width: 860px;
margin: 0 auto;
/* flow-root para que el margen del separador no se escape por colapso. El
padding del contenedor no sirve para esto: el rango de sticky se mide
contra la caja de contenido y el relleno queda fuera. Comprobado en el
navegador. */
display: flow-root;
}
.service-slot {
position: sticky;
/* Bajo la cabecera pegajosa, y cada una un pelo más abajo que la anterior
para que el canto de la de atrás quede a la vista. */
top: calc(112px + var(--i) * 16px);
/* El respiro entre tarjeta y tarjeta: lo que se baja antes de que llegue
la siguiente. Menos que esto y se atropellan. */
margin-bottom: 14vh;
}
.service-slot:nth-child(1) { --i: 0; }
.service-slot:nth-child(2) { --i: 1; }
.service-slot:nth-child(3) { --i: 2; }
.service-slot:nth-child(4) { --i: 3; }
.service-slot:nth-child(5) { --i: 4; }
/* El espacio que sostiene el montón armado va DESPUÉS de la última ranura, no
como margen suyo. Una ranura pegajosa solo puede desplazarse dentro de lo
que le sobra a su contenedor por debajo de su propia caja de margen; si el
hueco es su propio margen, no le sobra nada y nunca llega a pegarse: la
última tarjeta subía de largo y dejaba la baraja al descubierto. */
.service-stack::after {
content: '';
display: block;
height: 30vh;
}
/* La tarjeta enfocada con el teclado sale al frente de la baraja. Sin esto,
tabular hasta una tarjeta ya enterrada deja el anillo de foco debajo de
las siguientes: está enfocada y no se ve dónde. Levantarla es además lo
que uno haría con una carta de verdad. */
.service-slot.tiene-foco { z-index: 3; }
.service-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
min-height: 208px;
padding: 30px 34px;
border-radius: var(--radius-lg);
background: var(--glass-surface);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid var(--glass-hairline);
box-shadow: var(--glass-shadow);
color: var(--text-body);
text-decoration: none;
overflow: hidden;
/* La escala la escribe JS y el hover el CSS: separadas en dos variables
no se pisan, que es lo que pasaría con dos reglas de transform. */
transform: scale(var(--escala, 1)) translateY(var(--alza, 0px));
transform-origin: center top;
transition: box-shadow var(--duration-fast) var(--ease-calm),
border-color var(--duration-fast) var(--ease-calm),
transform var(--duration-fast) var(--ease-calm);
}
.service-card:hover { --alza: -3px; border-color: var(--glass-edge); box-shadow: var(--shadow-lift); color: var(--text-body); }
/* Mientras JS mueve la escala, la transición sobra: llegaría tarde. */
.service-card.is-stacking { transition: box-shadow var(--duration-fast) var(--ease-calm), border-color var(--duration-fast) var(--ease-calm); }
/* El brillo que recorre el canto superior — lo que hace que una superficie
parezca vidrio y no papel. */
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--glass-sheen), transparent);
pointer-events: none;
}
/* Reflejo suave en la esquina de entrada. */
.service-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(145deg, var(--glass-sheen) 0%, transparent 42%);
opacity: 0.5;
pointer-events: none;
}
.service-card > * { position: relative; z-index: 1; }
.service-card.featured { border-color: var(--glass-edge); }
.service-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-md);
background: var(--surface-wash);
display: grid;
place-items: center;
color: var(--action-primary);
flex: none;
}
.service-icon svg { width: 30px; height: 30px; stroke: currentColor; }
.service-body { display: flex; flex-direction: column; align-items: flex-start; }
.service-badge {
display: block;
color: var(--text-eyebrow);
font-weight: var(--weight-bold);
font-size: 12px;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
margin-bottom: 8px;
}
.service-card h3 { font-size: 26px; font-weight: var(--weight-display-strong); margin-bottom: 10px; }
.service-card p { font-size: 16px; color: var(--text-muted); line-height: 1.55; margin: 0; max-width: 46ch; }
.service-go {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
white-space: nowrap;
font-weight: var(--weight-medium);
color: var(--link);
}
.service-go svg { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-calm); }
.service-card:hover .service-go svg { transform: translateX(3px); }
@media (max-width: 720px) {
.service-slot { top: calc(88px + var(--i) * 12px); margin-bottom: 10vh; }
.service-card { grid-template-columns: auto 1fr; align-items: start; min-height: 0; padding: 24px; }
/* En pantalla angosta el CTA no cabe en su columna: pasa debajo, cruzando
el ancho completo de la tarjeta. */
.service-go { grid-column: 1 / -1; white-space: normal; }
.service-icon { width: 56px; height: 56px; }
.service-icon svg { width: 24px; height: 24px; }
.service-body { min-height: 0; }
.service-card h3 { font-size: 22px; }
.service-card p { font-size: 15px; }
}
/* Sin movimiento: la baraja se deshace en una lista normal. Apilar depende
de recorrer, y quien pidió no moverse no debería tener que recorrer. */
@media (prefers-reduced-motion: reduce) {
/* El destello se retira entero. La regla general solo le pone duración
cero, y eso lo dejaría congelado en una posición: un arco brillante
quieto en el borde se lee como un error de dibujo, no como una luz. */
.stamp-btn::before { display: none; }
.service-slot { position: static; margin-bottom: var(--space-3); }
.service-slot:last-child { margin-bottom: 0; }
/* Sin baraja no hay nada que sostener: el separador dejaría un hueco. */
.service-stack::after { display: none; }
.service-card { transform: none; }
}
/* ---------- Enfoque (pendiente de rediseño) ---------- */
.approach {
padding: var(--space-6) 0;
margin-top: var(--space-6);
background: var(--surface-ink);
--focus-ring-color: var(--color-lilac);
}
.approach h2, .approach h3 { color: var(--text-on-ink); }
.approach h2 { font-size: clamp(38px, 4.6vw, 58px); max-width: 24ch; }
.approach h2 em { color: var(--color-lilac); }
.approach > .wrap > div:first-child p { color: var(--color-lilac); margin-top: var(--space-3); font-size: var(--text-lead); }
.approach .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); align-items: center; }
/* Los cuatro pasos no son cuatro tarjetas: son estaciones de un camino. Una
línea las une y se va llenando conforme el lector baja, que es la misma
idea que la sección cuenta —la recuperación avanza por etapas— dicha con
la forma en vez de con palabras. El scroll-spy de main.js marca hasta
dónde llegó. */
.approach-steps { display: flex; flex-direction: column; gap: 28px; }
.approach-step {
position: relative;
display: grid;
grid-template-columns: 56px 1fr;
gap: 22px;
align-items: start;
}
/* Tramo de camino hacia la estación siguiente: la vía apagada y encima el
avance, que crece de 0 a 1 al alcanzarla. */
.approach-step::before,
.approach-step::after {
content: '';
position: absolute;
left: 27px;
top: 56px;
bottom: -28px;
width: 2px;
border-radius: 1px;
}
.approach-step::before { background: rgba(201, 192, 232, 0.16); }
.approach-step::after {
background: var(--color-lilac);
transform: scaleY(0);
transform-origin: top;
transition: transform 420ms var(--ease-calm);
}
.approach-step.is-linked::after { transform: scaleY(1); }
/* La última estación no tiene camino por delante. */
.approach-steps > *:last-child .approach-step::before,
.approach-steps > *:last-child .approach-step::after { display: none; }
.approach-step .step-icon {
position: relative;
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(201, 192, 232, 0.22);
color: rgba(201, 192, 232, 0.45);
transform: scale(var(--crecer, 1));
transition: color 350ms var(--ease-calm), background 350ms var(--ease-calm),
border-color 350ms var(--ease-calm);
}
.approach-step .step-icon svg { width: 24px; height: 24px; }
.approach-step.is-reached .step-icon { color: var(--color-lilac); border-color: rgba(201, 192, 232, 0.45); }
/* "Estás aquí": la estación por la que va pasando la lectura. */
.approach-step.is-active .step-icon {
background: rgba(201, 192, 232, 0.16);
border-color: transparent;
color: var(--text-on-ink);
}
/* El texto crece con el ícono: si solo se enciende la bolita, la estación se
marca pero la frase que la explica sigue pesando lo mismo que el resto.
Crece por transform y no por font-size — cambiar el tamaño de letra rehace
la caja y el camino entero daría un salto. Y se apoya en su borde
izquierdo para no despegarse del ícono al agrandarse.
El valor lo escribe main.js en cada cuadro de scroll, de forma continua:
las cuatro estaciones caben en 335px, así que una clase que se enciende y
se apaga daría un parpadeo en vez de un crecimiento. Sin transición a
propósito, porque ya viene animado por el propio scroll. Los valores por
defecto son los llenos: sin JS no se ve nada apagado. */
.approach-step > div:last-child {
transform: scale(var(--crecer-texto, 1));
transform-origin: left center;
opacity: var(--brillo, 1);
}
.approach-step h3 { font-size: 20px; font-weight: var(--weight-display-strong); margin-bottom: 6px; padding-top: 12px; }
/* Sin opacidad propia: se multiplicaba con la del envoltorio (--brillo) y el
resultado caía a 2.94:1 en la banda clara. La atenuación la lleva una sola
capa, con piso legible. */
.approach-step p { font-size: 15px; color: var(--color-lilac); line-height: 1.55; margin: 0; }
@media (max-width: 899px) {
.approach .wrap { grid-template-columns: 1fr; }
}
/* ---------- Contacto y horario (pendiente de rediseño) ---------- */
.location { padding: var(--space-6) 0; }
.location .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: start; }
.location h2 { font-size: clamp(38px, 4.6vw, 58px); }
.location > .wrap > div:first-child > p { color: var(--text-muted); max-width: 46ch; margin: var(--space-3) 0 28px; }
.location-facts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 var(--space-4); }
/* Área de toque cómoda: son enlaces reales y alguien los busca con el pulgar. */
.location-facts a {
display: flex;
gap: 12px;
align-items: center;
min-height: 44px;
padding: 4px 0;
font-size: 16px;
color: var(--text-body);
text-decoration: none;
}
.location-facts a:hover { color: var(--link); }
.location-facts a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.location-facts svg { width: 20px; height: 20px; flex: none; stroke: var(--action-primary); }
.location-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hours-card {
background: var(--surface-card);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-soft);
}
.hours-card .kicker { margin-bottom: 14px; }
/* Responde la pregunta que trae quien mira el horario —"¿puedo llamar
ahora?"— en vez de dejarle hacer la cuenta. Lo calcula main.js con la
hora de Costa Rica, y si no puede, no se muestra nada. */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 14px 0; border-bottom: 1px solid var(--border-hairline); font-size: 15px; }
.hours-table tr:last-child td { border-bottom: none; }
/* La hora no se parte: si falta ancho, que envuelva el nombre del día. Sin
esto, en móvil quedaba un "m." solo en la segunda línea. */
.hours-table td:last-child { text-align: right; font-weight: var(--weight-bold); white-space: nowrap; }
/* Se resalta la fila del día de hoy (hora de Costa Rica), no una fila fija:
así el color dice cuál horario aplica ahora mismo. Lo marca main.js. */
.hours-table tr.is-today td { color: var(--link); font-weight: var(--weight-bold); }
/* No hereda el violeta de la fila: sobre el lila del distintivo se quedaría
en 4.2:1, y es texto pequeño. */
.hours-today-tag {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--surface-wash);
color: var(--link);
font-size: 11px;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
vertical-align: 1px;
}
/* ---------- Pie de página ---------- */
.site-footer { background: var(--surface-ink); color: var(--color-lilac); --focus-ring-color: var(--color-lilac); }
.footer-top { padding: var(--space-5) 0 var(--space-4); border-bottom: 1px solid rgba(201, 192, 232, 0.15); }
.footer-top .wrap {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-4);
align-items: start;
}
.footer-brand img { height: 34px; width: auto; object-fit: contain; margin-bottom: var(--space-2); }
.footer-brand p { font-size: 14px; line-height: 1.7; color: var(--color-lilac); max-width: 34ch; margin: 0 0 10px; }
.footer-verse { font-size: 13px; color: var(--color-lilac); opacity: 0.6; font-style: italic; }
.footer-col h3 {
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--text-on-ink);
margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* El alto del enlace lo da el área táctil, no el texto: 19px de alto se
falla con el pulgar. El relleno reemplaza al gap de la lista para no
sumar el espacio dos veces. */
.footer-col a {
display: flex;
align-items: center;
min-height: 44px;
font-size: 14px;
color: var(--color-lilac);
}
.footer-col a:hover { color: var(--text-on-ink); }
/* .footer-bottom también lleva la clase .wrap, así que el ancho máximo y el
margen lateral ya vienen de ahí; aquí solo el aire de arriba y abajo. */
.footer-bottom { padding-top: var(--space-3); padding-bottom: var(--space-3); font-size: 13px; color: var(--color-lilac); opacity: 0.6; }
@media (max-width: 819px) {
.footer-top .wrap { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
/* ---------- Instalar la app (botón + modal) ---------- */
.pwa-modal-overlay {
position: fixed;
inset: 0;
z-index: 70;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-3);
background: rgba(43, 36, 71, 0.5);
}
.pwa-modal-overlay.is-open { display: flex; }
body.pwa-modal-lock { overflow: hidden; }
.pwa-modal {
position: relative;
width: 100%;
max-width: 420px;
background: var(--surface-card);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-4) var(--space-4);
box-shadow: var(--shadow-lift);
animation: tc-rise 320ms var(--ease-calm) both;
}
.pwa-modal h3 { font-size: 22px; font-weight: var(--weight-display-strong); margin-bottom: var(--space-3); padding-right: var(--space-4); }
.pwa-modal-close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--surface-wash);
border: none;
border-radius: 50%;
color: var(--text-body);
cursor: pointer;
}
.pwa-modal-close svg { width: 15px; height: 15px; }
.pwa-modal-note {
font-size: 13.5px;
line-height: 1.5;
color: var(--text-body);
background: var(--surface-wash);
border-radius: var(--radius-sm);
padding: var(--space-2);
margin: 0 0 var(--space-3);
}
.pwa-modal #pwaModalBody > p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.pwa-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pwa-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.pwa-steps svg { width: 20px; height: 20px; flex: none; color: var(--action-primary); margin-top: 1px; }
#pwaAndroidInstallBtn { margin-top: var(--space-2); width: 100%; }
/* ---------- Página de agendar ---------- */
.booking { padding: 112px var(--space-4) var(--space-6); }
.booking-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 56px;
align-items: start;
padding: 0;
}
.booking-intro { min-width: 0; animation: tc-rise var(--duration-slow) var(--ease-calm) both; }
.booking-intro h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.025em; }
.booking-lead { font-size: var(--text-lead); color: var(--text-muted); max-width: 44ch; line-height: 1.55; margin: 24px 0 32px; }
.booking-facts { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.booking-facts div { display: flex; align-items: center; gap: 12px; }
.booking-facts svg { width: 20px; height: 20px; flex: none; stroke: var(--action-primary); }
/* Aclara que la atención es presencial, antes de que elija horario. */
.booking-note {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 44ch;
margin: var(--space-4) 0 0;
padding: 16px 18px;
border-radius: var(--radius-md);
background: var(--surface-wash);
color: var(--text-muted);
font-size: 14px;
line-height: 1.45;
}
.booking-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; stroke: var(--action-primary); }
.form-sheet {
min-width: 0;
background: var(--surface-card);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-soft);
animation: tc-rise var(--duration-slow) var(--ease-calm) 150ms both;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: var(--weight-medium);
color: var(--text-muted);
text-decoration: none;
margin-bottom: var(--space-3);
}
.back-link:hover { color: var(--action-primary); }
@media (max-width: 819px) {
.booking { padding: 96px var(--space-4) var(--space-5); }
.booking-grid { gap: var(--space-5); }
}
@media (max-width: 640px) {
.form-sheet { padding: 18px; }
}