entero por un
![]()
, sin tocar el CSS.
Pulse sobre surface-2 da 3.96:1 — por debajo de 4.5, pero el monograma pasa
los 40px y es decorativo: el nombre real está en el
de abajo. */
.member__photo--mono {
align-content: center;
justify-items: center;
background-image: repeating-linear-gradient(
135deg,
rgba(77, 118, 233, 0.09) 0 2px,
transparent 2px 12px
);
}
.member__photo--mono span {
font-size: clamp(2.25rem, 8vw, 3.5rem);
font-weight: 700;
letter-spacing: var(--tr-head);
line-height: 1;
color: var(--pulse);
}
.member__name { font-size: var(--fs-h4); }
.member__role {
font-size: var(--fs-eyebrow);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--pulse-bright);
font-weight: 600;
}
.member__note { font-size: var(--fs-small); color: var(--text-dim); }
/* Áreas de trabajo. Todavía no las tenemos, así que en el HTML el bloque va
comentado con el molde exacto; esto existe para que el día que lleguen se
descomente y se escriban las palabras, sin tocar una línea de CSS.
Dos o tres líneas cortas, no una bio. Es el mismo recurso del índice de
prestaciones —el cuadrado de acento con el corte del logo— a escala de
ficha: nada nuevo, y así la sección de equipo habla el idioma de las
landings en vez de inventarse un componente propio. */
.member__areas {
display: grid;
gap: 0.45rem;
list-style: none;
margin-top: var(--sp-1);
}
.member__areas li {
display: flex;
align-items: baseline;
gap: 0.6rem;
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.35;
}
.member__areas li::before {
content: "";
flex: none;
width: 6px;
height: 6px;
background: var(--pulse-bright);
border-radius: 1px 3px 1px 1px;
translate: 0 -0.15em;
}
/* =============================================================================
14. BOB
-----------------------------------------------------------------------------
Bob aporta calidez frente a la dureza geométrica del logotipo. Aparece como
apoyo (primera visita, FAQ, contacto, 404), nunca como protagonista.
============================================================================= */
.bob-block {
display: grid;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: center;
padding: clamp(1.75rem, 4vw, 3.5rem);
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-sm) var(--cut) var(--r-sm) var(--r-sm);
position: relative;
overflow: hidden;
}
@media (min-width: 820px) {
.bob-block { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.bob-block--wide { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
/* Bob acompaña, no protagoniza: se le pone techo para que nunca sea el
elemento más grande de su bloque, sobre todo en móvil. */
.bob-block__figure {
position: relative;
justify-self: center;
width: min(180px, 42vw);
}
.bob-block__figure img { width: 100%; height: auto; }
/* Disco azul detrás de Bob, como en los avatares del manual. */
.bob-block__figure::before {
content: "";
position: absolute;
left: 50%; bottom: 6%;
translate: -50% 0;
width: 100%;
aspect-ratio: 1;
background: radial-gradient(circle, var(--pulse-tint) 0%, transparent 70%);
z-index: -1;
}
.bob-block__copy { display: grid; gap: var(--sp-4); align-content: start; }
/* El bloque de Bob es apoyo dentro de una sección, nunca su encabezado: el
h2 se mantiene por semántica pero baja de escala tipográfica. */
.bob-block__copy > h2 { font-size: var(--fs-h3); }
/* Globo de diálogo. */
.bob-says {
position: relative;
padding: var(--sp-4) var(--sp-5);
background: var(--surface-3);
border: 1px solid var(--line);
border-radius: var(--r-sm) var(--cut-sm) var(--r-sm) var(--r-sm);
font-size: var(--fs-small);
color: var(--text-muted);
}
.bob-says::before {
content: "";
position: absolute;
left: var(--sp-5); top: -7px;
width: 12px; height: 12px;
background: var(--surface-3);
border-left: 1px solid var(--line);
border-top: 1px solid var(--line);
rotate: 45deg;
}
/* =============================================================================
15. FAQ
============================================================================= */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
width: 100%;
padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
font-size: var(--fs-h4);
font-weight: 600;
letter-spacing: var(--tr-head);
text-align: left;
cursor: pointer;
list-style: none;
transition: color var(--dur-1) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--pulse-bright); }
.faq__sign {
position: relative;
flex: none;
width: 22px; height: 22px;
}
.faq__sign::before, .faq__sign::after {
content: "";
position: absolute;
inset: 50% 0 auto 0;
height: 2px;
background: var(--pulse);
translate: 0 -50%;
transition: transform var(--dur-2) var(--ease);
}
.faq__sign::after { rotate: 90deg; }
.faq__item[open] .faq__sign::after { transform: scaleX(0); }
.faq__a {
padding-bottom: var(--sp-5);
padding-right: clamp(0rem, 6vw, 3.5rem);
color: var(--text-muted);
font-size: var(--fs-small);
max-width: var(--measure);
}
/* =============================================================================
16. CTA Y FORMULARIO
============================================================================= */
.cta-band {
position: relative;
overflow: hidden;
background: var(--pulse);
color: #fff;
border-radius: var(--r-sm) var(--cut) var(--r-sm) var(--r-sm);
padding: clamp(2rem, 6vw, 4.5rem);
}
.cta-band__inner { position: relative; display: grid; gap: var(--sp-6); z-index: 1; }
@media (min-width: 900px) {
.cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-8); }
}
.cta-band h2 { text-transform: uppercase; }
/* Sobre Pulse Blue sólo va tipografía grande: 1.5rem (=18pt) entra en el
umbral de "texto grande" de WCAG, donde con 3:1 alcanza (acá 4.13:1). */
.cta-band p {
max-width: 40ch;
font-size: clamp(1.5rem, 2vw, 1.75rem);
line-height: 1.35;
letter-spacing: -0.015em;
color: rgba(255, 255, 255, 0.94);
}
.cta-band .btn--solid { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--pulse-ink); }
/* Marca de agua del isotipo. */
.cta-band__mark {
position: absolute;
right: -4%; bottom: -28%;
width: min(46%, 420px);
color: #fff;
opacity: 0.1;
pointer-events: none;
}
/* --- Bloque de Instagram -------------------------------------------------- */
/* No es un feed y no puede serlo todavía: traer publicaciones reales necesita
un token de la API y un backend, y maquetar una grilla de fotos que todavía
no existen sería inventar contenido — posteos falsos, con epígrafes y likes
falsos, en el sitio de un centro de salud.
Lo que sí es real y se puede mostrar hoy es la identidad de la cuenta: el
usuario como pieza tipográfica y la ficha de marca del manual —logotipo
sobre carbón con el trazo cruzándolo—, que es exactamente lo que va a ver
quien entre al perfil. Ni un dato fabricado.
Va después de Ubicación, como cierre. En un centro que abre en octubre,
"seguinos" es la segunda acción más útil del sitio: quien no está listo para
pedir turno hoy igual se puede quedar cerca. */
.ig {
display: grid;
gap: clamp(1.5rem, 4vw, 2rem);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-sm) var(--cut) var(--r-sm) var(--r-sm);
padding: clamp(1.5rem, 5vw, 3.5rem);
}
.ig__copy { display: grid; gap: var(--sp-4); align-content: center; }
/* La ficha cambia de proporción, no de escala: cuadrada en escritorio —el
formato del perfil— y apaisada arriba de todo en móvil, donde un cuadrado a
ancho completo se comería 320px de alto antes de que se lea una palabra.
Es el mismo objeto en el formato que le sirve a cada pantalla.
Va con order y no reordenada en el HTML porque en el DOM tiene que ir
después del texto: es decorativa (aria-hidden) y no puede encabezar la
lectura de quien usa lector de pantalla. */
.ig__tile {
order: -1;
position: relative;
overflow: hidden;
display: grid;
align-items: center;
/* En la tira apaisada el logotipo va contra la derecha y el trazo entra por
la izquierda: son los dos únicos elementos que hay y centrar el logotipo
los superpone. Sobre el logotipo no puede pasar nada — es regla de marca,
no gusto. En el cuadrado sobra alto y vuelve al centro. */
justify-items: end;
padding-inline: clamp(1rem, 4vw, 2rem);
/* Tope de alto para la tira: en tablet el 16/7 sobre 612px de ancho daba
268px y el trazo, que se mide por alto, crecía hasta comerse media ficha.
El width:100% es necesario junto al tope — sin él el navegador resuelve el
ancho desde la proporción y la tira se encoge a 402px dentro de la
tarjeta, como si estuviera mal alineada. */
width: 100%;
aspect-ratio: 16 / 7;
max-height: 11rem;
background: var(--surface-0);
border: 1px solid var(--line);
border-radius: var(--r-xs) var(--cut-sm) var(--r-xs) var(--r-xs);
}
@media (min-width: 900px) {
.ig {
grid-template-columns: minmax(0, 1fr) clamp(13rem, 26vw, 23rem);
align-items: center;
column-gap: var(--sp-8);
}
.ig__tile { order: 0; aspect-ratio: 1; max-height: none; justify-items: center; padding-inline: 0; }
}
.ig__mark {
position: relative;
z-index: 1;
width: min(42%, 9rem);
color: var(--text);
fill: currentColor;
}
/* En el cuadrado el logotipo sube y el trazo se queda con la mitad de abajo.
Centrado quedaban uno encima del otro; corrido, la ficha se compone como las
piezas del manual: marca arriba, trazo cruzando abajo. */
@media (min-width: 900px) {
.ig__mark { width: 58%; align-self: start; margin-top: 20%; }
}
/* Dentro de la ficha el trazo es dibujo, no marca de agua: por eso va a 0.6 y
no a la opacidad de fondo del resto del sitio. Se ancla al borde izquierdo y
lo recorta el overflow de la ficha, igual que en las piezas del manual.
En la tira apaisada se mide por alto —cruza de arriba a abajo— y en el
cuadrado por ancho; con una sola medida se deformaría en una de las dos. */
.ig__trace {
left: -10%;
bottom: -30%;
height: 130%;
width: auto;
opacity: 0.6;
}
@media (min-width: 900px) {
.ig__trace { left: -15%; bottom: -20%; height: auto; width: 72%; }
}
/* El usuario es el elemento más grande del bloque, no un enlace al pie de un
párrafo: es lo único que hay para copiar, buscar o tocar. */
.ig__handle {
display: inline-flex;
align-items: center;
gap: 0.55em;
width: fit-content;
max-width: 100%;
font-size: clamp(1.5rem, 4.5vw, 3.25rem);
font-weight: 700;
letter-spacing: var(--tr-head);
line-height: 1.1;
/* Es largo y en pantallas de 390px no entra: que corte por el punto antes
que desbordar la caja. */
overflow-wrap: anywhere;
color: var(--text);
transition: color var(--dur-1) var(--ease);
}
.ig__handle:hover { color: var(--pulse-bright); }
.ig__glyph {
flex: none;
width: 1em;
height: 1em;
fill: currentColor;
color: var(--pulse);
transition: color var(--dur-1) var(--ease);
}
.ig__handle:hover .ig__glyph { color: var(--pulse-bright); }
.ig__note { max-width: 52ch; color: var(--text-muted); font-size: var(--fs-small); }
/* --- Formulario ---------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 680px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.field label .req { color: var(--pulse-bright); }
.field input, .field select, .field textarea {
width: 100%;
padding: 0.9rem 1rem;
background: var(--surface-2);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm) var(--cut-sm) var(--r-sm) var(--r-sm);
color: var(--text);
font-size: var(--fs-small);
transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(226, 225, 225, 0.3); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--pulse);
background: var(--surface-3);
box-shadow: 0 0 0 3px var(--pulse-tint);
}
/* Select con cheurón propio. */
.field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23E2E1E1' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 12px;
padding-right: 2.5rem;
}
.field select option { background: var(--surface-2); color: var(--text); }
.field__hint { font-size: 0.8125rem; color: var(--text-dim); }
.field__error {
font-size: 0.8125rem;
color: #FF8A8A;
display: none;
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #FF8A8A; }
.field.is-invalid .field__error { display: block; }
.form__note { font-size: 0.8125rem; color: var(--text-dim); }
/* Confirmación tras enviar. */
.form__done {
display: none;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-5);
background: var(--surface-2);
border: 1px solid var(--pulse);
border-radius: var(--r-sm) var(--cut-sm) var(--r-sm) var(--r-sm);
}
.form__done.is-visible { display: flex; }
.form__done img { width: 64px; height: auto; flex: none; }
/* =============================================================================
17. UBICACIÓN
============================================================================= */
.location { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
.location { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.info-list { display: grid; }
.info-list div {
display: grid;
gap: 0.35rem;
padding-block: var(--sp-4);
border-top: 1px solid var(--line);
}
.info-list div:last-child { border-bottom: 1px solid var(--line); }
.info-list dt {
font-size: var(--fs-eyebrow);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
}
.info-list dd { font-size: var(--fs-small); }
.map {
position: relative;
aspect-ratio: 16 / 11;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-sm) var(--cut) var(--r-sm) var(--r-sm);
overflow: hidden;
display: grid;
place-items: center;
text-align: center;
padding: var(--sp-5);
}
/* Con el embed adentro el contenedor deja de ser una tarjeta con un mensaje
centrado y pasa a ser un marco: el mapa va a sangre, sin relleno. El corte
de la esquina se mantiene porque lo aplica overflow:hidden del padre. */
.map--embed { padding: 0; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Google pinta el mapa en claro y el sitio es oscuro: un rectángulo blanco a
pleno rompe la página. Un filtro suave lo integra sin volverlo ilegible —
no se invierte, sólo se baja el brillo y se sube el contraste. Al pasar
por encima vuelve a su color real, que es cuando alguien lo va a leer. */
.map--embed iframe {
filter: brightness(0.92) saturate(0.9) contrast(1.05);
transition: filter var(--dur-3) var(--ease);
}
.map--embed:hover iframe,
.map--embed:focus-within iframe { filter: none; }
.map__placeholder { display: grid; gap: var(--sp-3); justify-items: center; color: var(--text-dim); }
.map__placeholder svg { color: var(--pulse); }
/* =============================================================================
18. FOOTER
============================================================================= */
.site-footer {
background: #101110;
border-top: 1px solid var(--line);
padding-top: clamp(3rem, 7vw, 5rem);
}
.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1060px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand { display: grid; gap: var(--sp-4); align-content: start; }
.footer__brand svg { width: 108px; color: var(--ash); fill: currentColor; }
.footer__brand p { font-size: var(--fs-small); color: var(--text-dim); max-width: 34ch; }
.footer__col h2 {
font-size: var(--fs-eyebrow);
letter-spacing: var(--tr-eyebrow);
text-transform: uppercase;
color: var(--text-faint);
font-weight: 600;
margin-bottom: var(--sp-4);
}
.footer__col li + li { margin-top: 0.7rem; }
/* Las entradas que todavía no son enlace (dirección, horarios) igualan la
escala de las que sí lo son. */
.footer__col li > .dim { font-size: var(--fs-small); }
.footer__col a {
font-size: var(--fs-small);
color: var(--text-muted);
transition: color var(--dur-1) var(--ease);
}
.footer__col a:hover { color: var(--pulse-bright); }
/* El padding de abajo no es aire de diseño: es el hueco del CTA flotante. Sin
él la cápsula queda apoyada sobre la línea de matrículas —en 1440 la corta
por la mitad— y ésa es justamente la línea que identifica al profesional
responsable. Se calcula con los tokens del FAB, no a ojo. */
.footer__bottom {
margin-top: clamp(2.5rem, 6vw, 4rem);
padding-block: var(--sp-5) calc(var(--sp-5) + var(--fab-inset) + var(--fab-h));
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
align-items: center;
justify-content: space-between;
font-size: 0.8125rem;
color: var(--text-faint);
}
/* El gap va en clamp por una franja de 17px de ancho: entre 760 y 776 el pie
pasa a tres columnas y la del logo queda en 242-248px, contra los 248,4 que
piden cinco iconos de 42 más cuatro huecos de 9,6. El quinto —WhatsApp— caía
solo a una segunda fila, y 768 es el iPad en vertical, o sea justo en el
medio de la franja. Achicando el hueco en esos anchos entran los cinco.
De 1010 para arriba 0.95vw ya supera el tope, así que el pie de escritorio
queda exactamente igual que antes. */
.social { display: flex; flex-wrap: wrap; gap: clamp(0.4rem, 0.95vw, 0.6rem); }
/* Glifos oficiales, de relleno sólido. Los anteriores eran contornos a 1,7px
que a 18px se empastaban y, sobre todo, no eran los logos reales de cada
red: se leían como iconos genéricos de librería. Un logo de marca ajena se
usa como la marca lo publica o no se usa.
Tamaño óptico, no matemático: Instagram y LinkedIn ocupan su caja entera,
TikTok y WhatsApp respiran más, así que van un punto más grandes para que
los cinco pesen igual en la fila. */
.social svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
/* Seleccionados por el icono y no por posición: si mañana se borra una red
porque RBT no la usa, el resto no se descoloca. Sin soporte de :has() la
regla se ignora entera y los cinco quedan a 17px, que es aceptable. */
.social a:has(use[href="#i-tiktok"]) svg,
.social a:has(use[href="#i-whatsapp"]) svg { width: 18px; height: 18px; }
.social a {
display: grid;
place-items: center;
width: 42px; height: 42px;
background: var(--surface-1);
border: 1px solid var(--line);
border-radius: var(--r-sm) var(--cut-sm) var(--r-sm) var(--r-sm);
color: var(--text-dim);
transition: color var(--dur-1) var(--ease),
border-color var(--dur-1) var(--ease),
background var(--dur-1) var(--ease),
transform var(--dur-1) var(--ease);
}
.social a:hover {
color: #fff;
background: var(--pulse);
border-color: var(--pulse);
transform: translateY(-2px);
}
/* --- Bob flotante -----------------------------------------------------------
Reemplaza al botón de WhatsApp suelto: es el mismo enlace, pero con Bob
apoyado encima y desbordando la cápsula por arriba. La imagen no está
recortada ni retocada, sólo escalada dentro de su caja.
Sin JS es un enlace normal a contacto.html; con JS abre el asistente. Por
eso el nombre accesible sale del visible y no de un aria-label: en
móvil el texto se oculta a la vista pero sigue en el árbol de accesibilidad.
-------------------------------------------------------------------------- */
.bob-fab {
position: fixed;
right: var(--fab-inset);
bottom: var(--fab-inset);
z-index: 90;
display: inline-flex;
align-items: center;
min-height: var(--fab-h);
padding: 0 1.15rem 0 3.6rem;
background: var(--pulse-deep); /* texto chico en blanco → 5.58:1 */
color: #fff;
font-size: var(--fs-small);
font-weight: 600;
border-radius: var(--r-sm) var(--cut-sm) var(--r-sm) var(--r-sm);
box-shadow: var(--shadow-2);
transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.bob-fab:hover { background: var(--pulse-ink); transform: translateY(-3px); }
.bob-fab__bob {
position: absolute;
left: 0.45rem;
bottom: 0.3rem;
width: 46px;
height: auto;
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
transform-origin: 50% 100%;
transition: transform var(--dur-2) var(--ease);
}
.bob-fab:hover .bob-fab__bob { transform: rotate(-6deg); }
.bob-fab.is-open .bob-fab__bob { transform: rotate(4deg) scale(0.94); }
@media (max-width: 599px) {
/* El texto sale de la vista pero no del árbol de accesibilidad: sigue
siendo el nombre del botón. */
.bob-fab { padding-right: 0.8rem; padding-left: 3.35rem; }
.bob-fab__label {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
}
/* --- Asistente de Bob -------------------------------------------------------
El panel lo construye js/main.js, no los siete HTML: no es contenido, es
una herramienta, y duplicarlo en cada página sólo daría siete lugares donde
equivocarse. Todo lo que Bob "dice" vive en el array PASOS del script.
-------------------------------------------------------------------------- */
/* --teclado lo escribe js/main.js con lo que mide el viewport visual: cuánto
del alto de la ventana se está comiendo el teclado del teléfono. Sin esto el
panel queda fijo al viewport de layout, que no se entera de que el teclado
está abierto, y el campo del nombre termina debajo de las teclas (medido en
390x844: el input llegaba a 684px y el teclado empieza cerca de 508px).
Vale 0 en escritorio y mientras no haya nada enfocado. */
.bob-chat {
position: fixed;
right: var(--fab-inset);
bottom: calc(var(--fab-inset) + var(--fab-h) + 0.85rem + var(--teclado, 0px));
z-index: 95;
display: flex;
flex-direction: column;
width: min(360px, calc(100vw - 2 * var(--fab-inset)));
max-height: min(560px, calc(100vh - 9rem - var(--teclado, 0px)));
transition: bottom var(--dur-2) var(--ease);
background: var(--surface-2);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm) var(--cut-sm) var(--r-sm) var(--r-sm);
box-shadow: var(--shadow-3);
overflow: hidden;
animation: bob-in var(--dur-2) var(--ease) both;
}
.bob-chat[hidden] { display: none; }
@keyframes bob-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
}
.bob-chat__head {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--surface-3);
border-bottom: 1px solid var(--line);
}
.bob-chat__avatar {
flex: none;
width: 38px; height: 38px;
border-radius: 50%;
/* Encuadre en la cabeza: la imagen es de cuerpo entero. */
object-fit: cover;
object-position: 50% 4%;
background: var(--pulse-deep);
}
.bob-chat__who { display: grid; line-height: 1.3; }
.bob-chat__who b { font-size: var(--fs-small); font-weight: 600; }
.bob-chat__who small { font-size: 0.75rem; color: var(--text-dim); }
.bob-chat__close {
margin-left: auto;
display: grid; place-items: center;
width: 32px; height: 32px;
border: 1px solid var(--line-strong);
border-radius: var(--r-xs);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.bob-chat__close:hover { color: var(--text); border-color: var(--text-muted); }
.bob-chat__log {
flex: 1 1 auto;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-4);
font-size: var(--fs-small);
line-height: 1.55;
}
.bob-msg {
max-width: 88%;
padding: 0.55rem 0.8rem;
border-radius: var(--r-sm);
animation: bob-in var(--dur-1) var(--ease) both;
}
.bob-msg--bob { /* Soft Ash sobre surface-3 → 11:1 */
align-self: flex-start;
background: var(--surface-3);
border-bottom-left-radius: 2px;
}
.bob-msg--yo { /* blanco sobre pulse-deep → 5.58:1 */
align-self: flex-end;
background: var(--pulse-deep);
color: #fff;
border-bottom-right-radius: 2px;
}
.bob-msg--nota {
/* La previsualización del mensaje: se lee como un borrador, no como Bob. */
align-self: stretch;
max-width: none;
white-space: pre-line;
background: transparent;
border: 1px dashed var(--line-strong);
color: var(--text-muted);
font-size: 0.8125rem;
}
.bob-chat__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
padding: 0 var(--sp-4) var(--sp-4);
}
.bob-chat__actions:empty { display: none; }
.bob-opt {
padding: 0.5rem 0.9rem;
border: 1px solid var(--pulse-bright);
border-radius: var(--r-pill);
background: transparent;
color: var(--pulse-bright); /* 6.2:1 sobre el carbón */
font: inherit;
font-size: var(--fs-small);
font-weight: 500;
cursor: pointer;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.bob-opt:hover { background: var(--pulse-bright); color: var(--carbon); }
.bob-opt--go {
flex: 1 1 auto;
text-align: center;
background: var(--pulse-deep);
border-color: var(--pulse-deep);
color: #fff;
font-weight: 600;
}
.bob-opt--go:hover { background: var(--pulse-ink); border-color: var(--pulse-ink); color: #fff; }
.bob-opt--ghost { border-color: var(--line-strong); color: var(--text-dim); }
.bob-opt--ghost:hover { background: transparent; border-color: var(--text-muted); color: var(--text); }
.bob-form { display: flex; gap: var(--sp-2); width: 100%; }
.bob-form input {
flex: 1 1 auto;
min-width: 0;
padding: 0.5rem 0.8rem;
background: var(--surface-0);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
color: var(--text);
font: inherit;
font-size: var(--fs-small);
}
.bob-form input::placeholder { color: var(--text-faint); }
.bob-form input:focus-visible { border-color: var(--pulse-bright); outline: none; }
.bob-chat__foot {
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--line);
background: var(--surface-1);
color: var(--text-dim); /* 5.9:1 — texto chico, hace falta */
font-size: 0.75rem;
line-height: 1.5;
}
/* Sin nowrap el enlace se parte entre "Prefiero" y "escribir yo", que se lee
como dos cosas distintas. */
.bob-chat__foot a { color: var(--pulse-bright); text-decoration: underline; white-space: nowrap; }
@media (max-width: 480px) {
/* En pantalla chica el panel ocupa el ancho útil: media columna flotando
en un teléfono no se lee. */
.bob-chat {
left: var(--fab-inset);
width: auto;
max-height: calc(100dvh - 10rem - var(--teclado, 0px));
}
}
/* =============================================================================
19. PÁGINAS INTERNAS
============================================================================= */
.page-head {
position: relative;
padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 4.5rem));
padding-bottom: clamp(2.5rem, 6vw, 4rem);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.page-head::before {
content: "";
position: absolute;
top: -40%; right: -5%;
width: min(60vw, 620px);
aspect-ratio: 1;
background: radial-gradient(circle, var(--pulse-glow) 0%, transparent 70%);
opacity: 0.4;
pointer-events: none;
}
.page-head__inner { position: relative; display: grid; gap: var(--sp-5); }
.page-head h1 { text-transform: uppercase; letter-spacing: var(--tr-display); }
.breadcrumbs { font-size: 0.8125rem; color: var(--text-faint); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--text-faint); }
.breadcrumbs a { color: var(--text-dim); transition: color var(--dur-1) var(--ease); }
.breadcrumbs a:hover { color: var(--pulse-bright); }
.breadcrumbs [aria-current="page"] { color: var(--text-muted); }
/* --- 404 ------------------------------------------------------------------ */
.error-page {
min-height: calc(100svh - var(--header-h));
display: grid;
align-items: center;
padding-block: clamp(3rem, 10vw, 7rem) var(--sp-9);
padding-top: calc(var(--header-h) + 3rem);
}
.error-page__grid { display: grid; gap: clamp(2rem, 6vw, 4rem); align-items: center; }
@media (min-width: 820px) {
.error-page__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); }
}
.error-page__code {
font-size: var(--fs-display);
line-height: 0.85;
letter-spacing: var(--tr-display);
font-weight: 700;
color: var(--pulse);
}
/* 46vw y no 70vw: en 390px Bob se comía tres cuartos del ancho y pasaba a ser
el protagonista de la página en vez del mensaje de error. */
.error-page__figure { justify-self: center; width: min(320px, 46vw); position: relative; }
.error-page__figure::before {
content: "";
position: absolute;
inset: 10% 0 0 0;
background: radial-gradient(circle, var(--pulse-tint) 0%, transparent 68%);
z-index: -1;
}
/* =============================================================================
20. ANIMACIÓN Y SCROLL REVEAL
============================================================================= */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* Sin JS no debe quedar contenido invisible. */
.no-js [data-reveal] { opacity: 1; transform: none; }
/* Respeto estricto por prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
/* Sin el animation:none el barrido sigue corriendo: no se ve, porque ya no
hay degradado que mover, pero el compositor lo anima igual. */
.hero__fill {
background: none; -webkit-background-clip: initial; background-clip: initial;
color: var(--pulse); animation: none;
}
.btn:hover, .pillar:hover, .bob-fab:hover, .social a:hover { transform: none; }
.bob-fab:hover .bob-fab__bob, .bob-fab.is-open .bob-fab__bob { transform: none; }
.bob-chat, .bob-msg { animation: none; }
/* El vídeo se reemplaza por su último fotograma: se ve el logotipo completo
y la composición no cambia, pero nada se mueve. js/main.js además evita
que se descargue. */
.fill-band__video { display: none; }
.fill-band {
aspect-ratio: 16 / 5;
background: url("../assets/video/rbt-fill-poster.webp") center / 100% auto no-repeat;
}
}
/* =============================================================================
21. UTILIDADES
============================================================================= */
.u-center { text-align: center; }
.u-mt-auto { margin-top: auto; }
.u-max-measure { max-width: var(--measure); }
.u-relative { position: relative; }
@media print {
.site-header, .nav-drawer, .bob-chat, .bob-fab, .squiggle { display: none !important; }
body { background: #fff; color: #000; }
}