/* ══════════════════════════════════════════════════════════════════ CLÍNICA ODONTHOS · Puerto Varas — demo CristalWeb ------------------------------------------------------------------ DIRECCIÓN: «LOS SESENTA MINUTOS». Nieve casi blanca, mucho aire y un solo azul petróleo profundo que sólo aparece en los MINUTOS y en lo interactivo. La página compite contra una plantilla, así que la velocidad y el silencio son parte del argumento: nada decorativo, ninguna capa de más. Deslinde escrito con las once dentales del registro: 48 (sin acento), 53 (porcelana y acero), 75 (menta), 84 (jade), 67 (noche y turquesa), 51 (verde quirúrgico), 57 (granate), 61 (ciruela), 78 (rosa viejo), 45 (grafito y coral) y la pmv-09 (nude y bronce). Ninguna usa petróleo, y la de la 67 —la única azul— es OSCURA y su turquesa es vivo; acá el azul es profundo, mate, y vive sobre un fondo casi blanco. Con la pmv-09, que es la otra dental de Puerto Varas, el deslinde es total: aquélla cálida-arena con serif clásica; ésta fría-nieve con serif contemporánea, y la pieza firma es otra (allá el tratamiento largo, acá la primera hora). TRÍO Display · Manuale — serif contemporánea con peso, nueva en el registro. Cuerpo · Manrope — cuarta aparición. Silenciosa y muy legible. Dato · Anonymous Pro — cuarta aparición. Lleva los minutos. ESCENA: una aguja que da UNA vuelta y se queda en las doce. Sin reposo a propósito — es la única demo de la tanda sin bucle. SUBIDA A PREMIUM (08-09-2026): dos clips de fondo (portada y banda de cita) sobre su fotograma como base, banda de cifras con la herida adentro, mitades «qué traer», el equipo invertido a banda oscura y el botón flotante de WhatsApp al número de la clínica. La identidad no se tocó: mismas fuentes, mismos cuatro colores, mismo tono. REVISIÓN (09-09-2026). Lo que estaba puesto pero no funcionaba: los dos clips y el botón flotante estaban escritos en el HTML y con su CSS, pero a main.js le faltaban los dos bloques que los encienden, así que la página nunca pedía un solo byte de video. El contador de cifras estaba enganchado a la sección equivocada y no contaba nunca. Y dos listas —.cifras__lista y .reloj-l— pisaban con `margin: 0` el `margin-inline: auto` de .ancho y salían pegadas al borde izquierdo, desalineadas con el resto de la página. Lo que se cambió mirando: el mosaico pasó de tres a cuatro columnas (con tres, la última fila dejaba un hueco blanco), el telón bajó de .22 a .13, el velo del tajo se corrigió por contraste medido y cinco fotos se reemplazaron porque tres escenas ocupaban cinco huecos. La identidad siguió sin tocarse. SEGUNDA REVISIÓN (09-09-2026, adversarial). Tres cosas: · mit-01 se cambió ENTERA. La anterior conservaba la marca del equipo (SIGER) legible en la base, a mitad del cuadro: el recorte de 170 px por arriba se había llevado una de las DOS apariciones del logotipo. La nueva —bata gris, guantes azules, babero verde pálido— no tiene ninguna marca y entra en la paleta fría sin traer un color nuevo. · La lista de especialidades pasó de cuatro columnas a tres: con cuatro, las seis fichas quedaban 4+2 y dejaban dos huecos blancos. · El encuadre de .mit__foto pasó de 12 % a 70 %: la foto nueva tiene la escena abajo y la pared blanca arriba. Los colores, las fuentes y el tono siguen sin tocarse. ══════════════════════════════════════════════════════════════════ */ :root { --nieve: #FBFBFA; --nieve-2: #F0F0EE; --tinta: #16181A; --medio: #4E5356; /* 7,3:1 sobre nieve · 6,8:1 sobre nieve-2 */ --claro-o: #B4B8BA; /* secundario SOBRE tinta — 9,2:1 */ --hora: #10516B; /* único acento — 7,8:1 sobre nieve */ --hora-o: #0B3E52; /* hover */ --hora-l: #7FC0DC; /* sobre tinta — 9,2:1 */ --linea: rgba(22,24,26,.14); --linea-o: rgba(251,251,250,.16); /* filetes sobre banda oscura */ --display: 'Manuale', Georgia, serif; --cuerpo: 'Manrope', 'Segoe UI', system-ui, sans-serif; --mono: 'Anonymous Pro', '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.1rem, 1.55rem + 2.5vw, 3.7rem); --aire: clamp(4rem, 2.4rem + 5.5vw, 7.5rem); --ancho: min(100% - 2.5rem, 1120px); --salida: cubic-bezier(.16, 1, .3, 1); --sale-2: cubic-bezier(.2, 0, 0, 1); /* objetos grandes y giros */ } *, *::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(--nieve); color: var(--tinta); font-family: var(--cuerpo); font-size: var(--p-0); line-height: 1.68; } img, svg, video { max-width: 100%; } img { height: auto; } p { text-wrap: pretty; } a { color: var(--hora); } :focus-visible { outline: 3px solid var(--hora); outline-offset: 2px; } .ancho { width: var(--ancho); margin-inline: auto; } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0; } .mono { font-family: var(--mono); } .rotulo { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .14em; text-transform: uppercase; color: var(--hora); margin: 0 0 .8rem; } .rotulo--claro { color: var(--hora-l); } .titulo { font-size: var(--p-3); max-width: 24ch; margin-bottom: 1rem; } .titulo--claro { color: var(--nieve); } .entradilla { max-width: 58ch; color: var(--medio); font-size: var(--p-1); margin: 0 0 2rem; } .entradilla b { color: var(--tinta); font-weight: 700; } .nota { margin-top: 1.6rem; font-size: var(--p--1); color: var(--medio); max-width: 66ch; } .sobre { font-family: var(--mono); font-size: var(--p--1); letter-spacing: .12em; text-transform: uppercase; color: var(--hora); margin: 0 0 1rem; } /* ── Dato de ejemplo ───────────────────────────────────────────────── La etiqueta dice QUÉ falta y DE QUIÉN depende. Cada sección con otro fondo reescribe su background: si se salta uno, la etiqueta sale con el color equivocado (ver .espec, .ficha, .datos y .equipo). */ .ej { position: relative; border: 1px dashed rgba(16,81,107,.45); 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(--hora); background: var(--nieve); padding: 0 .35rem; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; } /* ── Botones ───────────────────────────────────────────────────── */ .boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.6rem; border: 1px solid var(--hora); border-radius: 4px; background: var(--hora); color: #FFFFFF; font-family: var(--cuerpo); font-size: var(--p-0); font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .16s ease-out, background-color .16s, box-shadow .16s; } .boton:hover { background: var(--hora-o); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(16,81,107,.9); } .boton:active { transform: translateY(0); } .boton--linea { background: transparent; color: var(--hora); } .boton--linea:hover { background: rgba(16,81,107,.08); box-shadow: none; } .boton--chico { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--p--1); } /* ── Propuesta ─────────────────────────────────────────────────── */ .propuesta { background: var(--tinta); color: var(--nieve); padding: .85rem clamp(1.2rem, 5vw, 3rem); border-bottom: 3px solid var(--hora); } .propuesta__que { margin: 0 0 .3rem; font-size: var(--p--1); font-family: var(--mono); } .propuesta__que b { color: var(--hora-l); } .propuesta__gancho { margin: 0; font-size: var(--p--1); color: var(--claro-o); max-width: 96ch; line-height: 1.5; } /* ── Cabecera ──────────────────────────────────────────────────── */ .cab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .75rem clamp(1rem, 4vw, 2.4rem); background: rgba(251,251,250,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); transition: box-shadow .2s, background-color .2s; } .cab--flota { box-shadow: 0 6px 22px -16px rgba(22,24,26,.7); background: rgba(251,251,250,.99); } .cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinta); } /* El reloj: un círculo y una aguja. Cero bytes de imagen. */ .reloj { width: 20px; height: 20px; flex: none; border: 2px solid var(--hora); border-radius: 50%; position: relative; } .reloj i { position: absolute; left: 50%; top: 3px; width: 2px; height: 7px; background: var(--hora); transform-origin: bottom center; } .reloj::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 2px; background: var(--hora); } .cab__nombre { font-family: var(--display); font-size: var(--p-1); line-height: 1; } .cab__sub { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hora); margin-top: .3rem; } .cab__nav { display: flex; gap: 1.2rem; margin-left: auto; overflow-x: auto; } /* 44 px de alto también acá: en escritorio no se toca, pero un portátil con pantalla táctil sí, y medido daba 38. El alto lo pone el inline-flex, no un padding que movería el filete del hover. */ .cab__nav a { color: var(--medio); text-decoration: none; font-size: var(--p--1); white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; } .cab__nav a:hover { color: var(--hora); border-bottom-color: var(--hora); } .cab__cta { margin-left: .4rem; } @media (max-width: 1000px) { .cab__nav { display: none; } .cab__cta { margin-left: auto; } } /* ── Portada ─────────────────────────────────────────────────────── Dos capas y cada una hace algo distinto: la MÁSCARA borra la foto (alfa real) en la franja del texto, y el VELO pinta encima el color de la portada para cerrar lo que la máscara dejó a medias. El velo va entero en rgba() literal —con var() perdería el alfa y taparía la foto de punta a punta— y TERMINA EN 0, para que el borde derecho quede a foco completo con el clip corriendo. Peor caso medido: donde alcanza el titular el velo ya vale .86, así que aunque debajo pase un fotograma NEGRO el fondo efectivo es #D8D8D7 y la tinta da 12,5:1. En la bajada (texto chico, gris medio) el velo vale .88 o más: 5,7:1. Los dos pasan AA pase lo que pase con el video. */ .portada { position: relative; isolation: isolate; min-height: min(84vh, 720px); display: flex; flex-direction: column; justify-content: center; padding: var(--aire) 0; overflow: hidden; } .portada__foto { position: absolute; inset: 0; z-index: -1; } /* el clip comparte el selector de la foto: misma máscara, mismo object-fit y mismo object-position, escritos UNA vez */ .portada__foto img, .portada__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% 46%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,.2) 44%, rgba(0,0,0,.7) 62%, #000 78%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0,0,0,.2) 44%, rgba(0,0,0,.7) 62%, #000 78%, #000 100%); } .portada__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,251,250,1) 0%, rgba(251,251,250,1) 34%, rgba(251,251,250,.86) 48%, rgba(251,251,250,.42) 66%, rgba(251,251,250,.1) 84%, rgba(251,251,250,0) 97%); } .portada__texto { width: var(--ancho); margin-inline: auto; } .portada__titulo { font-size: var(--p-4); max-width: 18ch; font-weight: 700; } .portada__titulo span { display: block; } .portada__bajada { max-width: 42ch; color: var(--medio); font-size: var(--p-1); margin: 1.4rem 0 2rem; } .acciones { display: flex; flex-wrap: wrap; gap: .8rem; } /* ── Escena de portada · la aguja que da la vuelta ───────────────── movimiento-web, ficha «Dental» variante primera cita, escalón 1. La aguja hace UNA vuelta y se queda en las doce: los sesenta minutos que dan nombre a la pieza firma, contados una sola vez. SIN REPOSO a propósito. Un reloj que sigue girando después de contar la hora dice lo contrario de lo que dice la página. */ .escena { position: absolute; z-index: -1; pointer-events: none; } .escena--reloj { top: 22%; right: 9%; width: min(30%, 320px); } .escena__svg { display: block; width: 100%; height: auto; } /* Respaldo radial: el reloj cae sobre la zona NÍTIDA del clip, donde pasa el sillón. Doce palabras de CSS que sólo se descubren mirando el video corriendo. Peor caso (fotograma negro debajo): el fondo bajo el centro queda en #B5B5B4 y el petróleo del trazo da 4,0:1 — de sobra para un objeto gráfico, que pide 3:1. */ .escena::before { content: ""; position: absolute; inset: -18% -24%; z-index: -1; background: radial-gradient(closest-side, rgba(251,251,250,.78), rgba(251,251,250,0)); } .escena__esfera { fill: none; stroke: var(--hora); stroke-width: 1.5; } .escena__marcas line { stroke: var(--hora); stroke-width: 1.5; opacity: .55; } .escena__aguja { stroke: var(--hora); stroke-width: 2.5; stroke-linecap: round; } .escena__eje { fill: var(--hora); } /* La esfera se enciende primero; la aguja recién después. */ @keyframes reloj-aparece { from { opacity: 0; } to { opacity: 1; } } .js .escena__esfera, .js .escena__marcas, .js .escena__eje { animation: reloj-aparece .3s ease-out .15s both; } /* La vuelta. El origen va al centro de la esfera en coordenadas del viewBox: sin transform-box la aguja giraría sobre el origen del SVG y saldría del cuadro. */ .escena__aguja { transform-box: view-box; transform-origin: 100px 100px; } @keyframes aguja-vuelta { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .js .escena__aguja { animation: aguja-vuelta 1.6s var(--sale-2) .3s both; } /* A 760 px el texto deja de estar AL LADO de la foto y pasa a estar ENCIMA: la máscara y el velo rotan a vertical, la foto se ve entera sólo en el tercio de abajo y el reloj baja a esa franja. */ @media (max-width: 760px) { .portada { min-height: min(92vh, 700px); padding-top: 1.5rem; } .portada__foto img, .portada__video { object-position: 50% 46%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(0,0,0,.4) 56%, #000 76%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(0,0,0,.4) 56%, #000 76%, #000 100%); } .portada__foto::after { background: linear-gradient(180deg, rgba(251,251,250,1) 0%, rgba(251,251,250,1) 52%, rgba(251,251,250,.82) 68%, rgba(251,251,250,.3) 88%, rgba(251,251,250,0) 100%); } .portada__texto { margin-bottom: auto; } .escena--reloj { top: auto; bottom: 3%; right: 4%; width: 38%; } } /* ── Cifras ──────────────────────────────────────────────────────── Cuatro números en la misma fila y con el mismo formato: la prueba social, la hora, los tramos y la herida. La cuarta lleva el filete petróleo a un solo lado — el destaque es una línea, no un color nuevo. Sólo cuenta la primera, que es la que costó verificar. */ .cifras { background: var(--tinta); color: var(--nieve); padding: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem) 0; } /* `margin: 0` a secas pisaba el `margin-inline: auto` de .ancho —viene más abajo en el archivo y tienen la misma especificidad— y la banda quedaba pegada al borde izquierdo, desalineada con todo el resto de la página. El `auto` va escrito acá para que no vuelva a pasar. */ .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__lista b { display: block; font-family: var(--display); font-size: var(--p-3); line-height: 1; color: var(--nieve); font-variant-numeric: tabular-nums; /* El pellizco del conteo lo anima main.js con la Web Animations API; acá sólo se fija desde dónde crece, para que no se corra de sitio. */ transform-origin: 0% 60%; } .cifras__lista span { display: block; font-size: var(--p--1); color: var(--claro-o); margin-top: .4rem; max-width: 28ch; } .cifras__lista li:last-child { border-left: 3px solid var(--hora-l); padding-left: 1rem; } .cifras__lista li:last-child b { color: var(--hora-l); } /* ── PIEZA FIRMA · los sesenta minutos ─────────────────────────── */ .cita-s { padding: var(--aire) 0; } /* Mismo caso que .cifras__lista: el margen lateral va en `auto` o la regla de minutos se despega del resto de la columna. */ .reloj-l { list-style: none; margin: 2.5rem auto 0; padding: 0; display: grid; gap: 0; } .tramo { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.4rem; padding: 1.5rem 0; border-top: 1px solid var(--linea); } .tramo:last-child { border-bottom: 1px solid var(--linea); } /* Los minutos son el eje de la pieza: mono, grandes y en el único color de la página. */ .tramo__t { margin: 0; font-family: var(--mono); font-size: var(--p--1); color: var(--medio); white-space: nowrap; padding-top: .3rem; font-variant-numeric: tabular-nums; } .tramo__t span { font-size: var(--p-2); color: var(--hora); } .tramo h3 { font-size: var(--p-1); margin-bottom: .4rem; } .tramo p { margin: 0; font-size: var(--p--1); color: var(--medio); max-width: 62ch; } .tramo p b { color: var(--tinta); } /* Los dos tramos que deciden la venta llevan un filete: el destaque es una línea, no un color nuevo. */ .tramo--clave { border-left: 3px solid var(--hora); padding-left: 1.2rem; background: var(--nieve-2); } @media (max-width: 620px) { .tramo { grid-template-columns: 1fr; gap: .5rem; } .tramo--clave { padding-left: 1rem; } } /* ── Tajo ────────────────────────────────────────────────────────── Velo que SUBE desde abajo y arranca en alfa 0: los dos tercios de arriba de la foto quedan a foco completo y sin teñir. PEOR CASO MEDIDO (el auditor da falso negativo acá porque lee el fondo de la sección y no el ::after): en el borde superior del titular el velo vale .78, así que aunque debajo hubiera un cuadro BLANCO puro el fondo efectivo queda en #444547 y la nieve da 9,3:1. El párrafo gris #C4C7C9 cae más abajo, con el velo entre .92 y .95: 7,5:1. Medido además sobre los píxeles de la captura, que es lo que vale. */ .tajo { position: relative; margin: 0; isolation: isolate; min-height: min(50vh, 400px); 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%; } /* Los porcentajes no son de gusto: el titular ocupa del 37 % al 55 % de la banda contando desde abajo, así que ahí el velo tiene que valer .78 o más. Con los valores anteriores (.78 al 34 % y .32 al 62 %) el borde de arriba del titular caía sobre .43 y medido daba 3,06:1 en el píxel más claro: pasaba raspando. Ahora .78 llega hasta el 58 %. Escrito en rgba() literal, nunca con var(): sin alfa el degradado taparía la foto de punta a punta. */ .tajo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(22,24,26,.95) 0%, rgba(22,24,26,.92) 40%, rgba(22,24,26,.78) 58%, rgba(22,24,26,.3) 78%, rgba(22,24,26,0) 96%); } .tajo__txt { width: var(--ancho); margin-inline: auto; padding: 2.5rem 0; } .tajo__txt h2 { font-size: var(--p-3); max-width: 20ch; color: var(--nieve); } .tajo__txt p { max-width: 48ch; color: #C4C7C9; margin: .9rem 0 0; } /* ── Especialidades ────────────────────────────────────────────── */ .espec { padding: var(--aire) 0; background: var(--nieve-2); } /* minmax de 300 y no de 230: con 230 entraban CUATRO columnas y las seis especialidades quedaban 4+2, con dos huecos blancos abiertos en la fila de abajo. Con 300 son tres columnas y cierra exacto en 3+3, igual que el mosaico. Bajo 760 px pasa a dos, que también cierra. */ .esp { list-style: none; margin: 0; padding: 1.6rem; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .esp::after { background: var(--nieve-2); } .esp h3 { font-size: var(--p-1); margin-bottom: .3rem; color: var(--hora); } .esp p { margin: 0; font-size: var(--p--1); color: var(--medio); } /* ── Mitades · qué traer ─────────────────────────────────────────── Media pantalla de foto y media de texto. Es el contrapeso humano de una página que por lo demás es instrumental y sala vacía: alguien EXPLICANDO y alguien ESCUCHANDO, que es de lo que habla la sección. Fría por dentro —bata gris, guantes azules, babero verde pálido—, así que entra en la paleta sin traer un color nuevo. */ .mit { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .mit__foto { position: relative; overflow: hidden; min-height: 320px; } /* La foto es vertical y casi de la misma relación que la columna, así que en escritorio se ve entera y el object-position casi no interviene. En teléfono, en cambio, la franja mide 240 px de alto y sólo cabe un tercio del archivo: el 70 % baja el encuadre a donde está la escena —la tableta, las manos y la paciente— en vez de dejar la pared blanca de arriba. */ .mit__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; } .mit__txt { padding: var(--aire) clamp(1.25rem, 4vw, 3.5rem); align-self: center; max-width: 640px; } .mit__txt .entradilla { margin-bottom: 1.8rem; } /* El bullet dibujado: un rombo de 7 px en vez del punto por defecto. */ .traer { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .traer li { position: relative; padding-left: 1.6rem; font-size: var(--p--1); color: var(--medio); } .traer li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 7px; height: 7px; background: var(--hora); transform: rotate(45deg); } .traer b { color: var(--tinta); font-weight: 700; } @media (max-width: 860px) { .mit { grid-template-columns: 1fr; } .mit__foto { min-height: 0; } .mit__foto img { height: clamp(220px, 48vw, 340px); } .mit__txt { padding: var(--aire) 1.25rem; max-width: none; } } /* ── El equipo · banda OSCURA con telón ──────────────────────────── Es la única sección de luminancia invertida de la página, y por eso lleva TODOS sus overrides escritos uno por uno: rótulo, título, párrafos, fichas, el borde del .ej, el fondo de su etiqueta y el hueco de foto. Los grises de la paleta clara no valen acá: sobre tinta, var(--medio) daría 1,1:1. */ .equipo { padding: var(--aire) 0; background: var(--tinta); color: var(--nieve); } .con-telon { position: relative; isolation: isolate; overflow: hidden; } .telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* Foto NÍTIDA al 13 %: telón, no aura. Cero desenfoque. El número se calibra MIRANDO, no se copia: la foto de ahora es un plano cenital muy contrastado (sillón oscuro sobre piso claro) y al .22 competía con las tres fichas del equipo. Con foto plana o en gris habría que subirlo. */ .telon img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; opacity: .13; -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%); } .equipo__cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 74ch; margin-bottom: 2.5rem; } .equipo__cols p { margin: 0; color: var(--claro-o); } .equipo__cols b { color: var(--nieve); } .fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .ficha { padding: 1.2rem; background: rgba(251,251,250,.05); border-radius: 6px; } .ficha h3 { font-size: var(--p-1); margin: 0 0 .4rem; color: var(--nieve); } .ficha p { margin: 0; font-size: var(--p--1); color: var(--claro-o); } .equipo .ej { border-color: rgba(127,192,220,.45); } .equipo .ej::after { color: var(--hora-l); background: var(--tinta); } .ficha__hueco { aspect-ratio: 3 / 4; margin-bottom: .9rem; display: grid; place-items: center; border: 1px dashed var(--linea-o); border-radius: 6px; color: var(--claro-o); font-family: var(--mono); font-size: var(--p--1); letter-spacing: .14em; text-transform: uppercase; background: repeating-linear-gradient(135deg, rgba(251,251,250,.04) 0 8px, transparent 8px 16px); } /* ── Por qué una página propia ─────────────────────────────────── */ .propia { padding: var(--aire) 0; } .specs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--linea); padding-top: 1.6rem; } .specs b { display: block; font-family: var(--display); font-size: var(--p-3); line-height: 1; color: var(--hora); font-variant-numeric: tabular-nums; } .specs span { display: block; font-size: var(--p--1); color: var(--medio); margin-top: .35rem; max-width: 26ch; } /* ── Cita ────────────────────────────────────────────────────────── Texto CENTRADO, así que el velo va PLANO y no lateral: con un degradado de lado, media frase quedaría sobre .9 y la otra media sobre .3. El plano al .78 garantiza el peor caso (fotograma blanco debajo): nieve sobre #4C4E4F da 7,3:1. */ .cita { position: relative; margin: 0; isolation: isolate; min-height: min(48vh, 380px); display: grid; place-items: center; overflow: hidden; } .cita img, .cita__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; } .cita::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(22,24,26,.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(--nieve); max-width: 24ch; margin: 0 auto; text-align: center; line-height: 1.28; } /* ── Mosaico ───────────────────────────────────────────────────── */ .mos { padding: var(--aire) 0; } /* CUATRO columnas, no tres. Las celdas 1 y 6 valen por dos, así que en una retícula de tres quedaban 8 huecos en 9: la última fila salía con un vacío blanco al costado y las filas con alturas distintas. Con cuatro cierra exacto —fila 1: 2+1+1 · fila 2: 1+1+2— y las dos filas miden lo mismo, que es lo que hace que se lea como una pieza y no como una grilla a la que le falta una foto. */ .mos__grilla { display: grid; gap: 4px; grid-template-columns: repeat(4, 1fr); width: var(--ancho); margin: 2rem auto 0; border-radius: 6px; overflow: hidden; } .mos__p { margin: 0; overflow: hidden; } .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; } .mos__p img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.92); transition: transform .5s var(--salida), filter .5s ease; } .mos__p:hover img { transform: scale(1.05); filter: saturate(1); } /* Bajo 980 px las celdas de cuatro columnas quedan del tamaño de un sello: se pasa a dos, donde 1 y 6 ocupan fila entera y tampoco sobra ningún hueco. */ @media (max-width: 980px) { .mos__grilla { grid-template-columns: repeat(2, 1fr); } } /* ── Agendar ───────────────────────────────────────────────────── */ .agenda { padding: var(--aire) 0; background: var(--nieve-2); } .agenda__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: 9rem 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(--medio); } .datos dd { margin: 0; } .datos .ej::after { background: var(--nieve-2); } @media (max-width: 480px) { .datos > div { grid-template-columns: 1fr; } } .pedir { background: var(--nieve); border: 1px solid var(--linea); border-radius: 8px; padding: clamp(1.2rem, 3vw, 2rem); } .pedir__t { font-size: var(--p-2); margin-bottom: .6rem; } .pedir__ayuda { margin: 0 0 1.2rem; font-size: var(--p--1); color: var(--medio); } .form { display: grid; gap: .9rem; } .form label { display: grid; gap: .3rem; font-family: var(--mono); font-size: var(--p--1); letter-spacing: .04em; text-transform: uppercase; color: var(--medio); } .form input, .form select { font-family: var(--cuerpo); font-size: var(--p-0); padding: .7rem .8rem; min-height: 46px; border: 1px solid rgba(22,24,26,.22); border-radius: 5px; background: #FFFFFF; color: var(--tinta); text-transform: none; } .form input:focus-visible, .form select:focus-visible { border-color: var(--hora); } .form__salida { font-family: var(--mono); font-size: var(--p--1); background: var(--nieve-2); border-left: 3px solid var(--hora); border-radius: 0 5px 5px 0; padding: .7rem .8rem; margin: .2rem 0 0; white-space: pre-wrap; word-break: break-word; color: var(--medio); } .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(--medio); } /* ── Para el dueño ─────────────────────────────────────────────── */ .dueno { padding: var(--aire) 0; background: var(--tinta); color: var(--nieve); } .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(--hora-l); margin-bottom: .5rem; } .dueno__cols p { margin: 0; color: var(--claro-o); font-size: var(--p--1); } .dueno__cols b { color: var(--nieve); } .dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 2.5rem 0 0; } .flecha { color: var(--hora-l); text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(127,192,220,.4); padding-bottom: .15rem; } .flecha:hover { border-bottom-color: var(--hora-l); } .flecha span { display: inline-block; transition: transform .2s var(--salida); } .flecha:hover span { transform: translateX(4px); } /* ── Pie ─────────────────────────────────────────────────────────── El padding de abajo deja pasar el botón flotante de WhatsApp sin que tape la última línea. */ .pie { background: #111315; color: #85898C; padding: 2rem clamp(1.2rem, 5vw, 3rem) 5.5rem; } .pie p { margin: 0; font-size: var(--p--1); max-width: 92ch; } /* ══════════════════════════════════════════════════════════════════ VIDEO DE FONDO La foto sigue siendo la base y el clip 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: portada 1,4 MB · banda 1,0 MB · 720p, sin 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; } /* ── WHATSAPP FLOTANTE ────────────────────────────────────────────── Botón fijo abajo a la derecha. 56 px de alto: por encima de los 44 del mínimo táctil. Verde de WhatsApp a propósito — se reconoce sin leerlo, y eso es lo que hace que se toque. El número es el de la CLÍNICA, el mismo del tel: de la ficha. La dirección del truco importa: el botón se ve SIEMPRE por defecto y el JS sólo lo esconde mientras el visitante está en la portada, para no tapar el titular. Si el script no arranca, o si rescate.js quita la clase .js, el botón queda visible, que es el estado que vende. */ .wapp { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: .55rem; height: 56px; padding: 0 1.15rem 0 1rem; border-radius: 999px; background: #25D366; color: #07310F; text-decoration: none; font-family: var(--cuerpo); font-size: .95rem; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2); transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease; } .wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; } .wapp:hover, .wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.34); } /* mientras se está arriba del todo, el botón se aparta */ .js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; } @media (max-width: 520px) { .wapp { width: 56px; padding: 0; justify-content: center; } /* el rótulo se va, el icono queda: en un teléfono el círculo verde ya dice qué es */ .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ══ 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; } } /* ── Cascada de hijos ────────────────────────────────────────────── El CONTENEDOR se neutraliza y animan los hijos: si no se neutraliza, contenedor e hijos bajan a la vez y el grupo entero se desplaza. 60 ms por hijo — seis hijos son 300 ms, dentro del compás de medio segundo. */ .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 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; } /* ── Los seis tramos ─────────────────────────────────────────────── El tramo entra 100 ms DESPUÉS de su línea: primero se traza la regla, después llega el texto. */ .js .reloj-l.rev.ok > * { transition-delay: calc(var(--i, 0) * 60ms + 100ms); } /* La línea que une los tramos se dibuja. No se toca el border-top que ya existe: encima corre un filete petróleo que crece desde la izquierda y se disuelve al llegar. Así la regla queda como estaba y el trazo se lee igual. */ .js .reloj-l.rev > .tramo { position: relative; } .js .reloj-l.rev > .tramo::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--hora); transform: scaleX(0); transform-origin: 0 50%; } @keyframes linea-dibuja { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } .js .reloj-l.rev.ok > .tramo::before { animation: linea-dibuja 1.1s var(--salida) both; animation-delay: calc(var(--i, 0) * 60ms); } /* Los minutos en mono llegan 120 ms después de su tramo, sólo con opacidad: son el dato, no un objeto que entra. */ .js .reloj-l.rev > .tramo .tramo__t span { opacity: 0; } .js .reloj-l.rev.ok > .tramo .tramo__t span { opacity: 1; transition: opacity .3s ease-out; transition-delay: calc(var(--i, 0) * 60ms + 220ms); } /* ── El difuminado al scroll ─────────────────────────────────────── La única excepción temporal al no-blur, y corre en el compositor: la portada se disuelve hacia el blanco que hay debajo mientras se sube, y la banda de cita entra enfocándose. El filter va en el CONTENEDOR (.portada__foto), nunca en el