/* ══════════════════════════════════════════════════════════════════ ASEVET · Clínica veterinaria, Puerto Varas — demo CristalWeb ------------------------------------------------------------------ DIRECCIÓN: «TABLERO DE LA SEMANA». La página está construida sobre siete columnas —los siete días que la clínica atiende— y ése es a la vez el motivo gráfico y el argumento de venta. Fondo de tablero de zarpes: casi negro, con un solo naranjo de aviso. Deslinde escrito: · 45-urgencia-dental es lo más parecido del registro (grafito `#1A1D23` + hueso + coral `#E0654A`): allá el color es ALARMA de una urgencia dental y tira a rojo. Acá el fondo es más cálido y el naranjo es SEÑALÉTICA DE HORARIO, no alarma — vive en los días y en las horas, no en el peligro. · 46-integravet ya tomó el ámbar de guardia sobre página oscura: por eso acá NO se usa ámbar. · De las dieciséis veterinarias del registro, ninguna se organiza por la semana ni usa naranjo. Turquesa, verde, teja, violeta, índigo, malva, oliva, ámbar, orquídea, granate, rojo, mostaza y rosa ya están tomados. TRÍO Display · Red Hat Display — nueva en el registro (existen Red Hat Text y Red Hat Mono, que son familias distintas en Google Fonts). Cuerpo · Sen — segunda aparición (53-aridos-las-camelias). Dato · Share Tech Mono — cuarta aparición, a propósito: es la que mejor imita el tablero de horarios, y acá la página ES un tablero. ESCENA: las siete barras del emblema, en grande, sobre el lado sin texto de la portada. Suben en cascada de 60 ms y el domingo entra 200 ms después y se enciende con un destello. Desde el 08-09-2026 la portada lleva clip de fondo, así que la escena YA NO TIENE REPOSO propio: el bucle de la página es el video y el halo quedó quieto. PÁGINA OSCURA — una sola sección clara, obligatoria. Va a media página («La primera consulta») con tres niveles de claridad: hueso #EFF1F0 de fondo, fichas en blanco puro y la destacada en crema. Sus grises no son los de la paleta oscura: van reescritos abajo con el ratio medido al lado, porque --sal-2 sobre hueso da 1,2:1. ══════════════════════════════════════════════════════════════════ */ :root { --noche: #121417; --noche-2: #1A1E22; --noche-3: #232830; --sal: #EFF1F0; --sal-2: #A5ADB2; /* 7,4:1 sobre noche */ --aviso: #F0873E; /* 6,3:1 sobre noche */ --aviso-f: #B65718; /* relleno de botón; BLANCO encima 4,83:1 — medido pixel a pixel sobre el PNG renderizado. Estaba en #C25F1E y daba 4,24:1 (el comentario decía 5,1 y era falso): el rótulo del botón mide 17,6 px en negrita y NO cuenta como texto grande —hacen falta 18,66 px—, así que el mínimo es 4,5:1 y no pasaba. Mismo tono (24°), un escalón más oscuro. */ --linea: rgba(239,241,240,.14); /* Segundo juego, sólo para la sección clara invertida. El acento que da 6,3:1 sobre la noche da 2,3:1 sobre el hueso: no se reutiliza. */ --tinta: #232830; /* texto sobre hueso 13,1:1 */ --tinta-2: #4A5560; /* secundario sobre hueso 6,7:1 */ --aviso-t: #8A4413; /* acento sobre hueso 6,0:1 */ --linea-cl: #D4DAD9; --display: 'Red Hat Display', 'Segoe UI', sans-serif; --cuerpo: 'Sen', 'Segoe UI', system-ui, sans-serif; --mono: 'Share Tech Mono', 'Consolas', ui-monospace, monospace; --p--1: clamp(.8rem, .77rem + .12vw, .88rem); --p-0: clamp(1rem, .96rem + .2vw, 1.1rem); --p-1: clamp(1.15rem, 1.08rem + .3vw, 1.35rem); --p-2: clamp(1.4rem, 1.25rem + .7vw, 1.9rem); --p-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem); --p-4: clamp(2.2rem, 1.6rem + 2.7vw, 4rem); --aire: clamp(3.5rem, 2.2rem + 5vw, 7rem); --ancho: min(100% - 2.5rem, 1160px); --salida: cubic-bezier(.16, 1, .3, 1); --suave: ease-in-out; /* reposo y bucles lentos (movimiento-web) */ } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--noche); color: var(--sal); font-family: var(--cuerpo); font-size: var(--p-0); line-height: 1.62; } img { max-width: 100%; height: auto; } a { color: var(--aviso); } :focus-visible { outline: 3px solid var(--aviso); outline-offset: 2px; } .ancho { width: var(--ancho); margin-inline: auto; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.14; margin: 0; } .rotulo { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .14em; text-transform: uppercase; color: var(--aviso); margin: 0 0 .8rem; } .rotulo--claro { color: var(--aviso); } .titulo { font-size: var(--p-3); max-width: 24ch; margin-bottom: 1rem; } .titulo--claro { color: var(--sal); } .entradilla { max-width: 60ch; color: var(--sal-2); font-size: var(--p-1); margin: 0 0 2rem; } .entradilla b { color: var(--sal); font-weight: 700; } .nota { margin-top: 1.6rem; font-size: var(--p--1); color: var(--sal-2); max-width: 66ch; } /* Una .nota que ADEMÁS es .ancho —la del tablero y la del deslinde de la primera consulta— salía centrada y flotando: .ancho pone margin-inline:auto, el max-width de 66ch la encoge a la mitad y el auto reparte la diferencia a los dos lados. Se ancla el borde izquierdo donde empieza .ancho y el sobrante se va todo a la derecha. */ .nota.ancho { margin-inline: max(1.25rem, calc((100% - var(--ancho)) / 2)) auto; } .nota--fuerte { border-left: 3px solid var(--aviso-f); padding-left: 1rem; } .nota b { color: var(--sal); } .sobre { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .12em; text-transform: uppercase; color: var(--aviso); margin: 0 0 1rem; } /* ── Dato de ejemplo ───────────────────────────────────────────── */ .ej { position: relative; border: 1px dashed rgba(240,135,62,.5); border-radius: 3px; } .ej::after { content: attr(data-ejemplo); position: absolute; top: -.62rem; right: .6rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aviso); background: var(--noche); padding: 0 .35rem; } /* ── Botones ───────────────────────────────────────────────────── */ .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.5rem; border: 1px solid var(--aviso-f); border-radius: 3px; background: var(--aviso-f); color: #FFFFFF; font-family: var(--cuerpo); font-size: var(--p-0); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .16s ease-out, background-color .16s; } .boton:hover { background: #A85018; transform: translateY(-2px); } .boton:active { transform: translateY(0); } .boton--linea { background: transparent; color: var(--aviso); border-color: rgba(240,135,62,.5); } .boton--linea:hover { background: rgba(240,135,62,.12); } .boton--chico { min-height: 40px; padding: .5rem 1rem; font-size: var(--p--1); } /* ── Propuesta ─────────────────────────────────────────────────── */ .propuesta { background: var(--noche-2); color: var(--sal); padding: .85rem clamp(1.2rem, 5vw, 3rem); border-bottom: 3px solid var(--aviso-f); } .propuesta__que { margin: 0 0 .3rem; font-size: var(--p--1); font-family: var(--mono); } .propuesta__que b { color: var(--aviso); } .propuesta__gancho { margin: 0; font-size: var(--p--1); color: var(--sal-2); max-width: 96ch; line-height: 1.5; } /* ── Cabecera ──────────────────────────────────────────────────── */ .cab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .7rem clamp(1rem, 4vw, 2.4rem); background: rgba(18,20,23,.92); border-bottom: 1px solid var(--linea); transition: box-shadow .2s, background-color .2s; } .cab--flota { box-shadow: 0 8px 26px -18px #000; background: rgba(18,20,23,.99); } .cab__marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sal); } /* Siete barras: el emblema ES la semana. La séptima —el domingo— va en naranjo, que es todo el argumento del negocio. Cero bytes. */ .siete { display: flex; gap: 2px; align-items: flex-end; height: 20px; flex: none; } .siete i { width: 3px; height: 12px; background: var(--sal-2); display: block; } .siete i:last-child { height: 20px; background: var(--aviso); } .cab__nombre { font-family: var(--display); font-size: var(--p-1); line-height: 1; } .cab__sub { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aviso); margin-top: .25rem; font-weight: 400; } .cab__nav { display: flex; gap: 1.1rem; margin-left: auto; overflow-x: auto; } .cab__nav a { color: var(--sal-2); text-decoration: none; font-size: var(--p--1); white-space: nowrap; padding: .4rem 0; border-bottom: 2px solid transparent; } .cab__nav a:hover { color: var(--aviso); border-bottom-color: var(--aviso); } .cab__cta { margin-left: .4rem; } @media (max-width: 1000px) { .cab__nav { display: none; } .cab__cta { margin-left: auto; } } /* ── Portada ───────────────────────────────────────────────────── */ .portada { position: relative; isolation: isolate; min-height: min(86vh, 760px); display: flex; flex-direction: column; justify-content: center; padding: var(--aire) 0; overflow: hidden; } .portada__foto { position: absolute; inset: 0; z-index: -1; } /* La foto y el clip comparten selector: una sola máscara, un solo object-position. Escritos por separado se descuadran al primer ajuste. */ .portada__foto img, .portada__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.7) 60%, #000 76%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 26%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.7) 60%, #000 76%, #000 100%); } /* Velo entero en rgba y terminando en alfa 0. */ .portada__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,20,23,1) 0%, rgba(18,20,23,1) 30%, rgba(18,20,23,.76) 46%, rgba(18,20,23,.34) 64%, rgba(18,20,23,.1) 82%, rgba(18,20,23,0) 96%); } .portada__texto { width: var(--ancho); margin-inline: auto; } .portada__titulo { font-size: var(--p-4); max-width: 14ch; font-weight: 900; } .portada__titulo span { display: block; } .portada__bajada { max-width: 46ch; color: var(--sal-2); font-size: var(--p-1); margin: 1.3rem 0 2rem; } .acciones { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Escena de portada · las siete barras ────────────────────────── movimiento-web, ficha «Veterinaria» idea A, escalón 1 y CSS puro. Es el emblema de la cabecera en grande: mismo motivo, misma idea, y el mismo que ordena el tablero de la semana. Vive en el lado sin texto. z-index -1 y después de la foto en el HTML: pinta sobre la foto y su velo, y siempre por debajo del texto. */ .escena { position: absolute; z-index: -1; pointer-events: none; } .escena--siete { top: 24%; right: 9%; width: min(34%, 340px); height: 38%; display: grid; place-items: center; } /* Halo escrito ENTERO en rgba: un var() dentro de un gradiente pinta de punta a punta (bug ya cometido en la casa). */ .escena__halo { position: absolute; inset: -22%; background: radial-gradient(circle at 50% 50%, rgba(240,135,62,.12), rgba(240,135,62,0) 70%); opacity: .45; } .escena__barras { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 100%; width: 100%; justify-content: center; } .escena__barras i { display: block; width: 14px; height: 62%; background: var(--sal-2); border-radius: 2px; transform-origin: 50% 100%; } /* El domingo: más alto y en el naranjo de la casa. */ .escena__barras i:last-child { height: 100%; background: var(--aviso); } /* Respaldo del color DE la portada, en rgba: el clip trae al perro y la camilla clara justo debajo de las barras, y sin esto las de la izquierda se perdían contra el blanco de la mesa. Doce palabras de CSS que sólo se descubren mirando el video corriendo. */ .escena--siete::before { content: ""; position: absolute; inset: -18% -26%; z-index: -1; background: radial-gradient(closest-side, rgba(18,20,23,.72), rgba(18,20,23,0)); } /* Entrada en cascada de abajo hacia arriba: scaleY 0 → 1 con el origen en la base. Stagger 60 ms; seis barras son 300 ms, dentro del compás de medio segundo que fija la regla 4. */ @keyframes barra-sube { from { transform: scaleY(0); } to { transform: scaleY(1); } } .js .escena__barras i { animation: barra-sube .5s var(--salida) both; animation-delay: calc(.35s + var(--i, 0) * 60ms); } .escena__barras i:nth-child(1) { --i: 0; } .escena__barras i:nth-child(2) { --i: 1; } .escena__barras i:nth-child(3) { --i: 2; } .escena__barras i:nth-child(4) { --i: 3; } .escena__barras i:nth-child(5) { --i: 4; } .escena__barras i:nth-child(6) { --i: 5; } /* El domingo entra 200 ms DESPUÉS de la sexta y se enciende: sube, y al 55 % del recorrido da un destello de 1,2. Todas las etapas escriben la misma lista de funciones para que el navegador interpole limpio y no caiga a matrices. */ @keyframes domingo-enciende { 0% { transform: scaleY(0) scale(1); } 55% { transform: scaleY(1) scale(1); } 75% { transform: scaleY(1) scale(1.2); } 100% { transform: scaleY(1) scale(1); } } .js .escena__barras i:nth-child(7) { animation: domingo-enciende .95s var(--salida) .85s both; } /* El halo ya no respira: con clip de fondo, el único bucle infinito de la página es el video. Dos cosas latiendo a la vez se leen como plantilla con efectos. */ /* En teléfono el emblema se va a la franja de foto que queda ARRIBA del rótulo, y hay que separarlos por ALTURA, no por ancho. El alto iba en 7% de la portada y la separación se confiaba al hueco horizontal: a 500 px sobraba, pero el rótulo mide 230 px fijos (es mono con letra espaciada, no se encoge) y las barras arrancan en el 66% del ancho — o sea en 247 px a 375, en 237 a 360 y en 211 a 320. Desde 375 para abajo se montaban sobre «· PUERTO VARAS», y a 320 lo tapaban entero. Ahora las barras miden 46 px fijos arriba del todo y la portada abre con 4,6 rem de aire, así que el rótulo empieza en 74 px y no hay ancho de pantalla en que se crucen. */ @media (max-width: 760px) { .escena--siete { top: .4rem; right: 4%; width: min(34%, 132px); height: 46px; } .escena__barras { gap: 6px; } .escena__barras i { width: 9px; } .escena--siete::before { display: none; } /* En teléfono el texto pasó de estar AL LADO de la foto a estar ENCIMA, así que la máscara y el velo rotan a vertical: el titular queda sobre color casi puro y el perro del clip se ve entero en la franja de abajo, que es donde no hay ni una letra. */ .portada { min-height: min(90vh, 700px); justify-content: flex-start; padding: 4.6rem 0 0; } .portada__texto { padding-bottom: 30vh; } .portada__foto img, .portada__video { object-position: 52% 46%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,.3) 38%, #000 72%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,.3) 38%, #000 72%, #000 100%); } .portada__foto::after { background: linear-gradient(180deg, rgba(18,20,23,1) 0%, rgba(18,20,23,.97) 30%, rgba(18,20,23,.78) 52%, rgba(18,20,23,.34) 76%, rgba(18,20,23,0) 100%); } } /* ── Cifras ──────────────────────────────────────────────────────── Banda propia, ya no cuelga de la portada: es el bloque que el dueño lee en el segundo diez. Dos de los cuatro números son fallas suyas, y por eso el 404 rompe el patrón —filete de aviso y blanco en vez de naranjo— para que la vista caiga ahí. */ .cifras { background: var(--noche-2); padding: 2.8rem 0; border-block: 1px solid var(--linea); } .cifras__lista { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .cifras b { display: block; font-family: var(--display); font-size: var(--p-3); line-height: 1; color: var(--aviso); font-variant-numeric: tabular-nums; } .cifras span { display: block; font-size: var(--p--1); color: var(--sal-2); margin-top: .4rem; max-width: 26ch; } .cifras__herida { border-left: 3px solid var(--aviso-f); padding-left: 1rem; } .cifras__herida b { color: var(--sal); } /* ── PIEZA FIRMA · el tablero de la semana ─────────────────────── */ .semana { padding: var(--aire) 0; } .tablero { list-style: none; margin: .5rem 0 0; padding: 1rem; display: grid; gap: 2px; grid-template-columns: repeat(7, 1fr); background: var(--noche-2); } .tablero::after { background: var(--noche); } .dia { background: var(--noche-3); padding: 1rem .8rem; display: flex; flex-direction: column; gap: .5rem; } .dia__n { margin: 0; font-family: var(--mono); font-size: var(--p-1); letter-spacing: .1em; text-transform: uppercase; color: var(--sal); } /* La hora es el dato que se lee de reojo: mono, grande y en color. */ .dia__h { margin: 0; font-family: var(--mono); font-size: var(--p--1); color: var(--aviso); line-height: 1.4; } .dia__h span { display: block; opacity: .5; } .dia__q { margin: 0; font-size: .78rem; color: var(--sal-2); line-height: 1.45; } .dia--destaca { background: #2E2118; border-top: 3px solid var(--aviso); } .dia--destaca .dia__n { color: var(--aviso); } @media (max-width: 900px) { .tablero { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .tablero { grid-template-columns: 1fr; } } /* ── Tajo ──────────────────────────────────────────────────────── */ .tajo { position: relative; margin: 0; isolation: isolate; min-height: min(52vh, 420px); display: flex; align-items: flex-end; overflow: hidden; } .tajo img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; } .tajo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18,20,23,.95) 0%, rgba(18,20,23,.8) 34%, rgba(18,20,23,.34) 62%, rgba(18,20,23,0) 92%); } .tajo__txt { width: var(--ancho); margin-inline: auto; padding: 2.5rem 0; } .tajo__txt h2 { font-size: var(--p-3); max-width: 22ch; color: var(--sal); } .tajo__txt p { max-width: 48ch; color: var(--sal-2); margin: .8rem 0 0; } /* ── Urgencias ─────────────────────────────────────────────────── */ .urgencia { padding: var(--aire) 0; background: var(--noche-2); } .urg { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .urg__c { background: var(--noche-3); padding: 1.3rem; border-top: 3px solid var(--linea); } .urg__c--ya { border-top-color: var(--aviso); background: #2E2118; } .urg__r { margin: 0 0 .8rem; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .12em; text-transform: uppercase; color: var(--aviso); } .urg__c ul { margin: 0; padding-left: 1.1rem; } .urg__c li { font-size: var(--p--1); color: var(--sal-2); margin-bottom: .45rem; } .urg__c--ya li { color: var(--sal); } /* ── La primera consulta · ÚNICA SECCIÓN CLARA ───────────────────── Regla de página oscura: una sola inversión de luminancia a media página, o el scroll se hace un túnel. Y tres niveles de claridad, no dos: hueso de fondo, ficha en blanco puro, destacada en crema. Todos los overrides van escritos uno por uno —rótulo, entradilla, nota, filete y fondo de la etiqueta del .ej— porque ninguno de los grises de la paleta oscura sirve acá. */ .primera { background: var(--sal); color: var(--tinta); padding: var(--aire) 0; } .primera .rotulo { color: var(--aviso-t); } /* 6,0:1 */ .primera .titulo { color: var(--tinta); } /* 13,1:1 */ .primera .entradilla { color: var(--tinta-2); } /* 6,7:1 */ .primera .entradilla b { color: var(--tinta); } .primera .nota { color: var(--tinta-2); } .primera .ej { border-color: rgba(138,68,19,.45); } .primera .ej::after { color: var(--aviso-t); background: var(--sal); } .primera a { color: var(--aviso-t); } .primera :focus-visible { outline-color: var(--aviso-t); } .momentos { list-style: none; margin: 2.2rem auto 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .mom { background: #FFFFFF; border: 1px solid var(--linea-cl); border-radius: 3px; border-top: 3px solid var(--linea-cl); padding: 1.3rem 1.2rem 1.4rem; } /* El número hueco: relleno del fondo de la ficha y contorno del acento. Se lee como grabado, y si el navegador no soporta -webkit-text-stroke queda un número blanco sobre blanco — por eso el relleno es el gris de la línea y no el blanco: en el peor caso se ve gris claro, nunca invisible. La destacada rompe el patrón con relleno sólido. */ /* OJO CON EL SELECTOR: los tres van escritos `.mom p.xxx` y no `.mom__xxx`. `.mom p` de más abajo pesa (0,1,1) y una clase suelta pesa (0,1,0), así que ganaba SIEMPRE y sin avisar: el número quedaba en 13,6 px con un contorno de 1,5 px encima —una mancha— en vez de los 38 px grabados, y el dato mono perdía el naranjo y salía gris como el párrafo. Con el tipo delante los tres pesan (0,2,1) y mandan ellos. */ .mom p.mom__n { margin: 0 0 .5rem; font-family: var(--display); font-weight: 900; font-size: 2.4rem; line-height: 1; color: var(--linea-cl); -webkit-text-stroke: 1.5px rgba(138,68,19,.65); font-variant-numeric: tabular-nums; } .mom h3 { font-size: var(--p-1); color: var(--tinta); margin-bottom: .2rem; } .mom p.mom__t { margin: 0 0 .6rem; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .08em; text-transform: uppercase; color: var(--aviso-t); } .mom p { margin: 0; font-size: var(--p--1); color: var(--tinta-2); } .mom--destaca { background: #FDF4EC; border-top-color: var(--aviso-f); } /* Mismo peso que `.mom p.mom__n` (0,2,1) y va después: gana por orden. */ .mom--destaca p.mom__n { color: var(--aviso-f); -webkit-text-stroke: 0; } .nota--deslinde { border-left: 3px solid var(--aviso-t); padding-left: 1rem; margin-top: 2rem; } /* ── Mitades · qué traer ─────────────────────────────────────────── La foto ocupa media pantalla de verdad; en teléfono pasa a franja de 200 px arriba, que es lo que aguanta sin comerse el texto. */ .mit { background: var(--noche-2); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .mit__foto { position: relative; min-height: 100%; overflow: hidden; } .mit__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; } /* Velo lateral en rgba literal y terminando en alfa 0: cierra el borde contra el panel de texto y deja el otro lado a foco completo. */ .mit__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,30,34,0) 62%, rgba(26,30,34,.55) 86%, rgba(26,30,34,.9) 100%); } .mit__txt { padding: var(--aire) clamp(1.25rem, 4vw, 3.2rem); display: flex; flex-direction: column; justify-content: center; } .traer { margin: .4rem 0 0; padding: 0; list-style: none; } .traer li { position: relative; padding-left: 1.5rem; margin-bottom: .8rem; color: var(--sal-2); font-size: var(--p--1); } /* Bullet dibujado: la marca de una casilla de ficha clínica, no el punto por defecto. */ .traer li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border: 2px solid var(--aviso); } .traer b { color: var(--sal); } @media (max-width: 860px) { .mit { grid-template-columns: 1fr; } .mit__foto { height: 220px; min-height: 0; } .mit__foto::after { background: linear-gradient(180deg, rgba(26,30,34,0) 50%, rgba(26,30,34,.55) 82%, rgba(26,30,34,.95) 100%); } } /* ── La consulta, con telón ────────────────────────────────────── */ .consulta { padding: var(--aire) 0; } .con-telon { position: relative; isolation: isolate; overflow: hidden; } .telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* Foto NÍTIDA al 15%: telón, no aura. Cero desenfoque. */ .telon img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; opacity: .15; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 74%, transparent 100%); } /* minmax de 300 y no de 230: con 230 la grilla se abría a cuatro columnas y los seis servicios quedaban 4 + 2, con dos huecos a la derecha de la segunda fila justo encima del telón. Con 300 caben tres y las dos filas cierran enteras. Y el 300 va envuelto en min(300px, 100%), no pelado: esta lista lleva 1,6 rem de relleno propio, así que a 375 px su caja interior mide 284 px y una pista fija de 300 px se salía 16 px. Como la sección tiene overflow:hidden por el telón, eso no habría sacado barra horizontal: se habría COMIDO el borde derecho del texto sin avisar, que es peor. */ .servicios { list-style: none; margin: 0; padding: 1.6rem; display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .servicios h3 { font-size: var(--p-1); margin-bottom: .3rem; color: var(--aviso); } .servicios p { margin: 0; font-size: var(--p--1); color: var(--sal-2); } /* ── Cita ──────────────────────────────────────────────────────── */ .cita { position: relative; margin: 0; isolation: isolate; min-height: min(50vh, 400px); display: grid; place-items: center; overflow: hidden; } .cita img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18,20,23,.78); } .cita__txt { margin: 0; width: var(--ancho); padding: 3rem 0; } .cita__txt p { font-family: var(--display); font-size: var(--p-3); color: var(--sal); max-width: 24ch; margin: 0 auto; text-align: center; line-height: 1.24; } /* ── Mosaico ───────────────────────────────────────────────────── */ .mos { padding: var(--aire) 0; } .mos__grilla { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); width: var(--ancho); margin: 2rem auto 0; } .mos__p { margin: 0; overflow: hidden; } /* Siete piezas y no seis, a propósito: con seis y dos celdas a `span 2` la retícula suma ocho unidades y deja un hueco negro al final de la tercera fila. Con la primera y la SÉPTIMA anchas suma nueve y las tres filas cierran enteras — 2+1 · 1+1+1 · 1+2. */ .mos__p:nth-child(1), .mos__p:nth-child(7) { grid-column: span 2; } .mos__p img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s var(--salida); } .mos__p:hover img { transform: scale(1.05); } /* A dos columnas la séptima vuelve a medir una: con `span 2` no cabría en el hueco que deja la sexta y abriría el mismo agujero que se acaba de cerrar. Siete piezas en dos columnas: 2+1+1+1+1+1+1 = 8, cuatro filas justas. */ @media (max-width: 640px) { .mos__grilla { grid-template-columns: repeat(2, 1fr); } .mos__p:nth-child(7) { grid-column: auto; } } /* ── Dónde ─────────────────────────────────────────────────────── */ .donde { padding: var(--aire) 0; background: var(--noche-2); } .donde__cols { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } .datos { margin: 0; display: grid; } .datos > div { display: grid; grid-template-columns: 10rem 1fr; gap: .6rem; padding: .75rem .6rem; border-bottom: 1px solid var(--linea); } .datos dt { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .06em; text-transform: uppercase; color: var(--sal-2); } .datos dd { margin: 0; } .datos .ej::after { background: var(--noche-2); } @media (max-width: 480px) { .datos > div { grid-template-columns: 1fr; } } .pedir { background: var(--noche-3); border: 1px solid var(--linea); border-radius: 3px; padding: clamp(1.2rem, 3vw, 2rem); } .pedir__t { font-size: var(--p-2); margin-bottom: .5rem; } .pedir__p { margin: 0 0 1.4rem; color: var(--sal-2); font-size: var(--p--1); } .form { display: grid; gap: .9rem; } .form label { display: grid; gap: .3rem; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .05em; text-transform: uppercase; color: var(--sal-2); } .form input { font-family: var(--cuerpo); font-size: var(--p-0); padding: .7rem .8rem; min-height: 46px; border: 1px solid rgba(239,241,240,.22); border-radius: 3px; background: #14171B; color: var(--sal); text-transform: none; } .form input:focus-visible { border-color: var(--aviso); } /* El placeholder que pone el navegador por su cuenta salía #757575 sobre el #14171B del campo: 3,90:1 medido sobre el PNG, bajo el 4,5 de AA y con texto de 17,6 px. Se declara uno propio —6,05:1— y opacity 1, que Firefox baja por su cuenta y volvería a hundir el contraste. */ .form input::placeholder { color: #8F979C; opacity: 1; } /* overflow-wrap: anywhere además de pre-wrap. El texto de la salida lo escribe el visitante: si pega una palabra larga sin espacios, pre-wrap sola no la parte, la caja crece y —como ni .pedir ni .donde recortan— se lleva el ancho de la página entera. Con los maxlength del HTML son las dos mitades del mismo cierre. */ .form__salida { font-family: var(--mono); font-size: var(--p--1); background: var(--noche); border-left: 3px solid var(--aviso-f); padding: .7rem .8rem; margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--sal-2); } .form__salida:empty { display: none; } .form__acciones { display: flex; flex-wrap: wrap; gap: .7rem; } .form__sinjs { margin: 1rem 0 0; font-size: var(--p--1); color: var(--sal-2); } /* ── Para el dueño ─────────────────────────────────────────────── */ .dueno { padding: var(--aire) 0; background: var(--noche); border-top: 1px solid var(--linea); } .dueno__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; } .dueno__cols h3 { font-size: var(--p-1); color: var(--aviso); margin-bottom: .5rem; } .dueno__cols p { margin: 0; color: var(--sal-2); font-size: var(--p--1); } .dueno__cols b { color: var(--sal); } .dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 2.5rem 0 0; } /* El subrayado va por text-decoration y no por border-bottom: más abajo la flecha recibe min-height 44px para que se pueda tocar, y un borde inferior se pega al filo de esa caja de 44 px, o sea a 20 px del texto — se veía como una raya suelta. El subrayado sigue la línea base pase lo que pase. */ .flecha { color: var(--aviso); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(240,135,62,.45); text-decoration-thickness: 1px; text-underline-offset: .28em; } .flecha:hover { text-decoration-color: var(--aviso); } /* ── Pie ───────────────────────────────────────────────────────── */ .pie { background: #0D0F11; color: #8B9297; padding: 2rem clamp(1.2rem, 5vw, 3rem); } .pie p { margin: 0; font-size: var(--p--1); max-width: 92ch; } /* ══ Animación ═════════════════════════════════════════════════ Números de movimiento-web (reglas atómicas): la OPACIDAD salta corta —0,3 s— y es el TRANSFORM el que dura, 0,6 s con la curva de salida. */ .js .rev { opacity: 0; transform: translateY(22px); } .js .rev.ok { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .6s var(--salida); } .js .portada__texto > * { animation: entra .8s var(--salida) both; } .js .sobre { animation-delay: .05s; } .js .portada__titulo { animation-delay: .14s; } .js .portada__bajada { animation-delay: .26s; } .js .acciones { animation-delay: .36s; } @keyframes entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* ── Cascadas (regla 4) ──────────────────────────────────────────── Los siete días del tablero y las seis fotos del mosaico entran escalonados por CONTENEDOR. Stagger 60 ms: siete días son 360 ms, dentro del compás de medio segundo. A 375 px el tablero ya colapsa a una columna y la cascada se lee en vertical, que es lo mismo. */ .js .cascada.rev { opacity: 1; transform: none; transition: none; } .js .cascada.rev > * { opacity: 0; transform: translateY(28px); } .js .cascada.rev.ok > * { opacity: 1; transform: none; transition: opacity .3s ease-out, transform .6s var(--salida); transition-delay: calc(var(--i, 0) * 60ms); } /* El domingo del tablero recibe el mismo destello que el de la portada, una sola vez: entra con los demás y al llegar da el 1,2. */ .js .cascada.rev.ok > .dia--destaca { /* forwards y NO both: con both el estado inicial del destello (scale(1)) pisa el translateY de la cascada durante el retardo y el domingo entraba sin deslizarse. Con forwards la animación no toca nada hasta que arranca. */ animation: dia-destella .45s var(--salida) calc(var(--i, 0) * 60ms + .3s) forwards; } @keyframes dia-destella { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } } /* El retardo por índice va acá y no en un style="" del HTML: la CSP lo bloquea sin decir una palabra. */ .cascada > :nth-child(1) { --i: 0; } .cascada > :nth-child(2) { --i: 1; } .cascada > :nth-child(3) { --i: 2; } .cascada > :nth-child(4) { --i: 3; } .cascada > :nth-child(5) { --i: 4; } .cascada > :nth-child(6) { --i: 5; } .cascada > :nth-child(7) { --i: 6; } .cascada > :nth-child(8) { --i: 7; } @media (prefers-reduced-motion: reduce) { .js .portada__texto > * { animation: none; opacity: 1; transform: none; } .mos__p:hover img { transform: none; } .boton:hover { transform: none; } /* Los reveals NO se desplazan, pero SÍ siguen fundiendo: un fundido no es movimiento, un salto de 22 px sí. */ .js .rev, .js .cascada.rev > * { transform: none; } .js .cascada.rev.ok > .dia--destaca { animation: none; } /* Las siete barras puestas y el domingo encendido, quietas y en su estado final: apagar sólo `animation` las dejaría invisibles para siempre, porque el estado oculto vive en .js. */ .js .escena__barras i, .js .escena__barras i:nth-child(7) { animation: none; transform: none; } .wapp:hover, .wapp:focus-visible { transform: none; } .js .wapp--arriba { transform: none; } } /* ══════════════════════════════════════════════════════════════════ VIDEO DE FONDO La foto sigue siendo la base y el video se funde encima cuando puede reproducirse. Si el visitante pidió menos movimiento o ahorra datos, main.js no lo pide y no se descarga ni un byte. Presupuesto medido: portada 1,78 MB · cita 1,06 MB, 9 s, 720p sin pista de audio. ══════════════════════════════════════════════════════════════════ */ .portada__video, .cita__video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; } .portada__video.video--ver, .cita__video.video--ver { opacity: 1; } /* El difuminado al scroll. Lo que una demo corriente resuelve con GSAP + ScrollTrigger y 70 KB de librería que la CSP bloquearía. Página oscura: blur alto y brightness, SIN opacity — bajar la opacidad sobre casi-negro no hace nada visible. El scale acompaña siempre, o el desenfoque deja ver el filo transparente de la caja. El filter va en el CONTENEDOR, nunca en el