/* ══════════════════════════════════════════════════════════════════════════════════════════ Alameda · clon de estudio de healthcare-institution-128.webflow.io/home-2 LA PALETA ES LA DEL ORIGINAL, Y ESO ES LO CORRECTO EN MODO CLON. Las cuatro variables salen de la hoja de la referencia tal cual las declara: --primary-dark #160828 tinta --primary #e0ecde verde menta, la superficie que ordena la página --paragraph-green #425f66 apoyo --yellow #fcff70 acento: SOLO aparece cuando algo responde El acento medido por extract_design fue #0055d4, y no es de la página: es el botón «Try Now!» del rótulo promocional que Webflow inyecta en sus dominios .webflow.io. Va fijo en la esquina inferior izquierda, así que sale en las 32 tomas y acumula superficie como si fuera un color de diseño. Corregido a mano en ref/inventario.json con su motivo escrito. Rejilla: 1170 px de contenido (1200 de caja menos 15 de aire a cada lado), medida sobre el original. Ritmo: 4/12/16/20/40/132. Radios: 0/4/6/50. Borde: 1px solid #e0ecde. ══════════════════════════════════════════════════════════════════════════════════════════ */ :root{ --tinta:#160828; --menta:#e0ecde; --pizarra:#425f66; --amarillo:#fcff70; --blanco:#fff; --gris:#6f6f6f; --display:"Noto Sans Bengali",sans-serif; --cuerpo:"Inter",sans-serif; } *,*::before,*::after{box-sizing:border-box} /* `overflow-x:clip` en el documento y no solo en el cuerpo. Con `body{overflow-x:hidden}` el elemento que sigue pudiendo desplazarse en horizontal es , y bajo el navegador de captura la pagina aparecia corrida a la derecha con la barra fija en su sitio, que es la firma exacta de un scroll horizontal del documento. `clip` lo impide sin convertir a en contenedor de desplazamiento. */ html{scroll-behavior:auto;overflow-x:clip} body{ margin:0; background:var(--blanco); color:var(--tinta); font-family:var(--cuerpo); font-size:18px; font-weight:500; line-height:1.5em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ── Escala tipográfica ──────────────────────────────────────────────────────────────── Ocho escalones y una razón de 3,5 entre el mayor y el menor, que es lo que midió el inventario. Los tamaños son los del original a 1280: h1 62, h2 42, h3 35, h4 28, h5 20, cuerpo 18, dato 16/14/12, y el titular de portada a 80. Lo único que NO se copia es `text-transform: capitalize`. En inglés la referencia ya trae los títulos en Title Case y la regla no hace daño; aplicada a un texto en español pone mayúscula en «De», «La» y «Y», que es una falta, no un estilo. Queda anotado en el expediente como el compromiso que es. */ h1,h2,h3,h4,h5,h6{font-family:var(--display);color:var(--tinta);line-height:1.1em;margin:10px 0} h1{font-size:62px;font-weight:700} h2{font-size:42px;font-weight:700} h3{font-size:35px;font-weight:700} h4{font-size:28px;font-weight:700} h5{font-size:20px;font-weight:600;line-height:1.3em} h6{font-size:18px;font-weight:600;line-height:1.5em} p{margin:10px 0;font-family:var(--cuerpo);font-size:18px;font-weight:400;line-height:1.5em;color:var(--tinta)} a{font-family:var(--cuerpo);font-size:18px;font-weight:500;line-height:1.5em;color:var(--pizarra);text-decoration:none;transition:color .5s;display:inline-flex;align-items:center} a:hover{color:var(--tinta)} img{display:block;max-width:100%} button{font:inherit;border:0;background:none;cursor:pointer;color:inherit} .container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px;position:relative} .container-rel{z-index:60} .seccion{padding:130px 0;position:relative} .sin-margen{margin-top:0;margin-bottom:0} .sin-margen-top{margin-top:0} .txt-white{color:var(--blanco)} /* ── El revelado ─────────────────────────────────────────────────────────────────────── Un solo gesto para toda la página, igual que en la referencia: opacidad más una subida corta, y DISPARA UNA VEZ. No hay scrub, no hay parallax, no hay pin. Va corto y con suelo de opacidad a propósito. La ventana de captura del Cloner son 120 ms: un revelado de 500 ms sale a medias en los pares y los jueces lo leen como un defecto de diseño de la página, no como un fotograma mal tomado. 280 ms y nunca por debajo de 0,75 de opacidad. El estado de reposo lo declara el CSS; la animación es sólo un desplazamiento que se deshace. */ .reveal{opacity:.75;transform:translateY(14px);transition:opacity .28s ease-out,transform .28s ease-out} .reveal.visto{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} } /* Las cortinas: el original monta un panel sólido sobre cada foto y lo retira de izquierda a derecha (.white-left-preloader, .green-preloader, .white-preloader). Va rápido, 220 ms, por la misma razón que el revelado. */ .cortina{position:absolute;inset:0 auto 0 0;width:0;background:var(--blanco);z-index:100;pointer-events:none} .cortina-verde{background:var(--menta)} .cortina-arriba{inset:0 0 auto 0;width:100%;height:0} /* ══════════════════════════ NAVEGACIÓN ══════════════════════════ */ .nav{position:fixed;inset:0 0 auto;z-index:300;background:transparent;transition:background-color .1s linear} .nav-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;align-items:center;min-height:88px} .brand{display:flex;align-items:center;gap:14px;color:var(--blanco);font-size:20px;font-weight:500;line-height:1.2em;transition:color .1s linear} .brand-mark{width:40px;height:34px;flex:none} .brand-heart{fill:var(--blanco);transition:fill .1s linear} .brand-pulse{stroke:var(--tinta);transition:stroke .1s linear} .brand-name{font-family:var(--cuerpo);font-size:20px;font-weight:400;line-height:1.15em} .nav-menu{display:flex;align-items:center} .nav-link,.nav-dd-toggle{ color:var(--blanco);font-family:var(--cuerpo);font-size:18px;font-weight:500;line-height:1.5em; padding:20px;display:flex;align-items:center;gap:10px;transition:opacity .5s,color .1s linear; } .nav-link{padding:20px} .nav-link:hover,.nav-dd-toggle:hover{opacity:.7;color:var(--blanco)} .nav-caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);flex:none} .nav-dd{position:relative} .nav-dd-list{ position:absolute;top:100%;left:0;min-width:200px;background:#fff;border:1px solid #e9e9e9; padding:15px 20px;display:flex;flex-direction:column; opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s; } .nav-dd:hover .nav-dd-list,.nav-dd:focus-within .nav-dd-list{opacity:1;visibility:visible;transform:translateY(0)} .nav-dd-list a{width:100%;padding:5px 8px 5px 0;font-weight:500;color:var(--tinta);transition:all .3s;display:flex;align-items:center} .nav-dd-list a::before{content:"";width:16px;height:2px;margin-right:15px;background:var(--pizarra);opacity:.7;flex:none} .nav-dd-list a:hover,.nav-dd-list a.is-current{color:var(--pizarra)} .nav-dd-mega{display:grid;grid-template-columns:repeat(3,minmax(190px,1fr));gap:0 40px;left:auto;right:0} .nav-dd-mega .nav-dd-col{display:flex;flex-direction:column} .nav-right{display:flex;align-items:center;gap:30px} .btn-pill{ border:1px solid var(--menta);background:var(--menta);color:var(--tinta); border-radius:50px;padding:11px 40px;text-align:center;transition:all .5s;flex:none; } .btn-pill:hover{border-color:var(--amarillo);background:var(--amarillo);color:var(--tinta)} .nav-burger{display:none;width:34px;height:40px;flex-direction:column;justify-content:center;gap:6px} .nav-burger span{display:block;height:2px;background:var(--blanco)} /* Estado blanco: el original lo enciende en cuanto el documento se mueve. */ .nav.solida{background:var(--blanco)} /* Sin filete inferior: el original no lo lleva. */ .nav.solida .brand{color:var(--tinta)} .nav.solida .brand-heart{fill:var(--pizarra)} .nav.solida .brand-pulse{stroke:var(--tinta)} .nav.solida .nav-link,.nav.solida .nav-dd-toggle{color:var(--tinta)} .nav.solida .nav-link:hover,.nav.solida .nav-dd-toggle:hover{color:var(--tinta)} .nav.solida .nav-burger span{background:var(--tinta)} /* ══════════════════════════ BOTONES ══════════════════════════ El mecanismo del original: un círculo de 10 px anclado abajo a la izquierda que crece hasta llenar el botón. El texto va por encima con z-index 50. */ .btn-white,.btn-borde,.btn-icono,.btn-oscuro{ position:relative;overflow:hidden;border-radius:50px;padding:12px 40px; display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--cuerpo);font-size:18px;font-weight:500;line-height:1.5em; } .btn-white{background:var(--blanco);color:var(--tinta)} .btn-borde{border:1px solid var(--menta);color:var(--tinta);background:transparent} .btn-icono{background:var(--blanco);color:var(--tinta)} .btn-white span,.btn-borde span,.btn-icono span,.btn-white svg,.btn-icono svg{position:relative;z-index:50} .btn-icono svg{width:24px;height:25px;flex:none} .btn-ov{ position:absolute;left:-5%;bottom:-5%;width:10px;height:10px;border-radius:100%; background:var(--menta);transform:scale(1);transform-origin:center;transition:transform .5s ease;z-index:1; } .btn-ov-amarillo{background:var(--amarillo)} .btn-white:hover .btn-ov,.btn-borde:hover .btn-ov,.btn-icono:hover .btn-ov,.btn-circle:hover .btn-ov{transform:scale(60)} .btn-white:hover,.btn-borde:hover,.btn-icono:hover{color:var(--tinta)} .btn-circle{ position:relative;overflow:hidden;border:1px solid var(--amarillo);border-radius:100%; width:51px;height:51px;display:flex;align-items:center;justify-content:center;color:var(--blanco);flex:none; } .btn-circle svg{width:24px;height:25px;position:relative;z-index:50} .btn-circle:hover{color:var(--tinta)} .btn-oscuro{background:var(--tinta);color:var(--amarillo);padding:11px 40px;transition:all .5s;border-radius:50px} .btn-oscuro:hover{background:var(--amarillo);color:var(--tinta)} .enlace-linea{color:var(--tinta);transition:color .5s} .enlace-linea:hover{color:var(--pizarra)} .enlace-blanco{color:var(--blanco)} .enlace-blanco:hover{color:var(--amarillo)} .enlace-amarillo{color:var(--amarillo)} .enlace-amarillo:hover{color:var(--blanco)} .enlace-negro{color:var(--tinta);transition:all .3s;display:flex} .enlace-negro:hover{opacity:.7;color:var(--tinta)} /* ══════════════════════════ 1 · PORTADA ══════════════════════════ */ .hero{width:100%;height:100vh;position:relative;overflow:hidden} .hero-media{position:absolute;inset:0} .hero-media img{ width:100%;height:100%;object-fit:cover;object-position:64% 50%; transform-origin:50% 50%;animation:respira 16s ease-in-out infinite;will-change:transform; } @keyframes respira{ 0%{transform:scale(1.10) translate(-1.8%,.9%)} 50%{transform:scale(1.21) translate(1.8%,-.9%)} 100%{transform:scale(1.10) translate(-1.8%,.9%)} } @media (prefers-reduced-motion:reduce){.hero-media img{animation:none}} /* Los dos degradados de la referencia, copiados: uno diagonal a 103 grados que apaga la izquierda para que entre el titular, y otro vertical que ancla el pie. */ .hero-veil{position:absolute;inset:0;background:linear-gradient(103deg,rgba(0,0,0,.6),rgba(255,255,255,0)),linear-gradient(0deg,rgba(0,0,0,.8),rgba(66,95,102,.3))} .hero-inner{height:100%;display:flex;align-items:center;padding-top:111px} .hero-content{z-index:100;width:50%;margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;position:relative} .hero-title{color:var(--blanco);font-size:80px;margin:10px 0} .hero-desc{width:80%;margin-top:20px;margin-bottom:40px} .hero-desc p{margin:0} .hero-buttons{display:flex;flex-direction:row;align-items:center;gap:30px} /* ══════════════════════════ 2 · CIFRAS ══════════════════════════ */ .cifras{background:var(--menta);padding:80px 0;position:relative} .cifras-row{width:100%;display:flex;justify-content:space-around} .cifra{width:20%;display:flex;flex-direction:column;align-items:center;position:relative} .cifra-num{color:var(--tinta);font-size:62px;margin-top:0;margin-bottom:10px} .cifra-pie{margin:0;font-weight:400} /* ══════════════════════════ 3 · ESPECIALIDADES ══════════════════════════ */ .titulo-wrap{width:100%;margin:0 auto 60px} .titulo-centro{text-align:center;width:50%;margin:0 auto} .h2-titulo{margin-bottom:20px} .desc-centro{max-width:550px;margin:10px auto 0} .servicios{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:60px;row-gap:40px;width:100%} .servicio{display:flex;flex-direction:column;align-items:center;text-align:center;row-gap:10px;width:100%} /* Trazo de 3,2 y no de 2: el original lleva los seis glifos MACIZOS y los mios salian capilares, sin peso sobre su titulo. Con el trazo grueso y los seis dibujados dentro de la misma caja optica (contenido de 8 a 40 sobre un lienzo de 48) la fila ancla igual sin dejar de ser una sola familia. */ .servicio-icono{width:60px;height:60px;color:var(--tinta);fill:currentColor;stroke:none} .servicio-txt{display:flex;flex-direction:column;align-items:center} .servicio-desc{width:100%;margin-bottom:0;font-size:16px} /* ══════════════════════════ 4 · TRABAJA CON NOSOTROS ══════════════════════════ */ .cta-equipo{padding:130px 0;overflow:hidden} .cta-fondo{position:absolute;inset:0;overflow:hidden;z-index:0} .cta-fondo img{width:100%;height:100%;object-fit:cover} .sombra{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.5) 49%,rgba(255,255,255,0))} .cta-contenido{z-index:50;position:relative;display:flex;flex-direction:column;align-items:flex-start;row-gap:40px;width:100%} .cta-titulo{color:var(--blanco);margin-bottom:20px;max-width:620px} .cta-desc{width:100%;max-width:550px;margin:0} .cta-boton{flex:none;display:flex;align-items:center;justify-content:center} /* ══════════════════════════ 5 · EQUIPO ══════════════════════════ */ .equipo{padding:130px 0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center} .titulo-wrap-centro{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;row-gap:40px} .equipo-banda{position:absolute;inset:auto 0 0;height:40%;background:var(--menta);z-index:5} .equipo-tira-wrap{width:100%;overflow:hidden;position:relative;z-index:20} .equipo-tira{display:flex;gap:60px;justify-content:center;align-items:stretch;width:100%;overflow:hidden} .ficha{width:33.33%;min-width:33.33vw;color:var(--blanco);display:block} .ficha-marco{width:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center} .ficha-foto{width:100%;height:600px;background-size:cover;background-position:50% 0;background-repeat:no-repeat;transition:transform .6s ease} .ficha:hover .ficha-foto{transform:scale(1.05)} /* En reposo la ficha es foto limpia, sin una sola letra encima: el panel verde espera fuera del marco y sube al pasar el puntero. Es la lectura del CSS de la referencia, donde .team-member-info es un panel --primary anclado abajo y el nombre nace en translateY(80px). */ .ficha-info{ position:absolute;inset:auto auto -8px;width:100%;background:var(--menta);text-align:center; padding:0 20px 10px;z-index:100;transform:translateY(101%);transition:transform .45s ease; } .ficha:hover .ficha-info,.ficha:focus-within .ficha-info{transform:translateY(0)} .ficha-nombre{font-size:35px;margin-top:20px;margin-bottom:0;color:var(--tinta)} .ficha-cargo{color:var(--tinta);margin-top:5px;margin-bottom:0;font-size:16px} .ficha-social{display:flex;justify-content:center;gap:30px;margin-top:10px} .ficha-social span{width:23px;height:23px;color:var(--pizarra);display:flex} .ficha-social svg{width:23px;height:23px;fill:currentColor} /* ══════════════════════════ 6 · GALERÍA ══════════════════════════ */ .galeria{position:relative;padding-bottom:25px} .galeria-banda{position:absolute;inset:0 0 auto;width:100%;height:400px;background:var(--menta)} .titulo-wrap-flex{display:flex;justify-content:space-between;align-items:flex-end;column-gap:60px} .titulo-izq{width:55%;display:flex;flex-direction:column;align-items:flex-start} .galeria .titulo-wrap-flex{column-gap:80px;align-items:center} .galeria .titulo-izq{width:55%} .galeria-titulo{color:var(--tinta);width:80%} .galeria-texto{color:var(--tinta);width:40%} .galeria-arriba{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;width:100%} .galeria-mini{grid-column:1;grid-row:1;display:grid;grid-template-rows:1fr 1fr;row-gap:25px;height:500px} .galeria-grande{grid-column:2 / span 3;grid-row:1;position:relative;overflow:hidden;height:500px} .galeria-grande-img{width:100%;height:100%;background-size:cover;background-position:100% 100%;background-repeat:no-repeat} .galeria-ficha{ position:absolute;inset:auto 40px 40px auto;width:50%;padding:40px;background:rgba(224,236,222,.9); display:flex;flex-direction:column;align-items:flex-start;justify-content:center; } .galeria-ficha-p{margin:20px 0} .galeria-abajo{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;width:100%;margin-top:25px} .galeria-abajo .foto{height:250px} .foto{position:relative;overflow:hidden;width:100%;height:100%;display:block} .foto-img{width:100%;height:100%;background-size:cover;background-position:50%;transition:transform .6s ease} .foto:hover .foto-img{transform:scale(1.05)} .foto-ov{ position:absolute;inset:0;background:rgba(13,13,13,.5);display:flex; justify-content:flex-end;align-items:flex-end;opacity:0;transition:opacity .35s ease; } .foto:hover .foto-ov{opacity:1} .foto-ojo{width:60px;height:60px;background:var(--menta);display:flex;align-items:center;justify-content:center;color:var(--tinta)} .foto-ojo svg{width:20px;height:20px} /* ══════════════════════════ 7 · CONTACTO ══════════════════════════ El margen de -275 px es literal del original: la tarjeta se mete dentro de la banda verde de los testimonios, que empieza antes de que la imagen termine. */ .contacto{padding-top:130px;margin-bottom:-275px;position:relative;z-index:1} .contacto-tarjeta{position:relative;overflow:hidden;width:100%;height:550px;display:flex;align-items:flex-end;z-index:1} .contacto-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .contacto-info{z-index:4;position:relative;padding:0 60px 60px} .contacto-texto{display:flex;flex-direction:column;row-gap:20px;width:400px;margin-bottom:40px} .contacto-desc{margin:0;max-width:300px} .contacto-tel{display:flex;align-items:center;gap:10px;color:var(--blanco)} .contacto-tel svg{width:24px;height:24px;flex:none} /* ══════════════════════════ 8 · TESTIMONIOS ══════════════════════════ */ .testimonios{background:var(--menta);padding-top:405px;padding-bottom:130px} .testi-carrusel{position:relative;width:100%;padding-bottom:0} .testi-pista{display:flex;overflow:hidden} .testi{min-width:100%;display:flex;justify-content:space-between;column-gap:100px} .testi-foto{flex:none;width:480px;height:480px;background-size:cover;background-position:50%;position:relative;overflow:hidden} .testi-texto{flex:1;min-width:0} .testi-kicker{color:var(--pizarra);letter-spacing:.1em;text-transform:uppercase;margin:0 0 20px;font-weight:400} .testi-cita{font-family:var(--cuerpo);font-size:38px;font-weight:700;line-height:1.3em;color:var(--tinta)} .testi-firma{margin-top:40px} .testi-nombre{color:var(--tinta);margin:10px 0} .testi-estrellas{display:flex;align-items:center;gap:6px} .testi-estrellas svg{width:20px;height:20px;fill:#f5b301} .testi-flecha{ position:absolute;bottom:0;width:51px;height:51px;border-radius:100%;border:1px solid transparent; background:rgba(111,111,111,.1);display:flex;align-items:center;justify-content:center; color:var(--tinta);transition:all .3s; } .testi-flecha svg{width:24px;height:24px} .testi-flecha:hover{background:var(--amarillo)} .testi-flecha-der{right:0} .testi-flecha-izq{right:66px} .testi-flecha-izq svg{transform:rotateY(180deg)} /* ══════════════════════════ 9 · NOTICIAS ══════════════════════════ */ .noticias-cab{display:flex;align-items:center;gap:20px} .noticias-desc{max-width:550px;margin-bottom:0} .noticias{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px} .nota{ border:1px solid rgba(111,111,111,.4);min-height:450px;overflow:hidden;position:relative; display:flex;flex-direction:column;justify-content:flex-end; } .nota-img{position:absolute;inset:0;background-size:cover;background-position:50%;transition:transform .6s ease} .nota:hover .nota-img{transform:scale(1.05)} .nota .sombra{opacity:0} .nota-caja{z-index:50;position:relative;background:var(--blanco);width:calc(100% + 10px);margin:0 -5px -5px;padding:20px 25px 25px} .nota-titulo{margin-top:0;transition:opacity .35s} .nota-caja a:hover .nota-titulo{opacity:.7} .nota-desc{margin-bottom:20px;font-size:16px;color:var(--gris)} .nota-pie{display:flex;justify-content:space-between;align-items:flex-end} .nota-fecha{margin:0;font-size:16px;color:var(--tinta)} /* La del centro es la variante oscura del original: la caja se vuelve transparente y el texto pasa a blanco sobre la propia foto. */ .nota-oscura .nota-caja{background:transparent} .nota-oscura .sombra{opacity:1;background:linear-gradient(0deg,rgba(0,0,0,.78) 55%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.1))} .nota-oscura .nota-titulo,.nota-oscura .nota-desc,.nota-oscura .nota-fecha,.nota-oscura .enlace-negro{color:var(--blanco)} /* ══════════════════════════ 10 · PIE ══════════════════════════ */ .pie{position:relative} .boletin{margin-bottom:-50px;position:relative;z-index:5} .boletin-caja{background:var(--menta);display:flex;justify-content:space-between;width:100%} .boletin-info{flex:1;width:51%;display:flex;flex-direction:column;align-items:flex-start;padding:50px 100px} .boletin-icono{width:32px;height:26px;color:var(--tinta)} .boletin-titulo{color:var(--tinta);text-align:left;width:100%;margin-bottom:30px} .boletin-form{display:flex;flex-direction:column;align-items:flex-start;row-gap:30px} .boletin-campo{ width:300px;min-height:50px;padding:12px 20px;margin:0;background:transparent; border:0;border-bottom:1px solid var(--tinta);color:var(--tinta); font-family:var(--cuerpo);font-size:18px;font-weight:400; } .boletin-campo::placeholder{color:var(--tinta)} .boletin-campo:focus{outline:2px solid var(--amarillo);outline-offset:4px} .boletin-img{width:49%;background-size:cover;background-position:50%;position:relative;overflow:hidden} .pie-top{background:var(--tinta);padding-top:130px;padding-bottom:50px;text-align:left} .pie-superior{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;row-gap:50px;width:100%} .pie-logo-fila{display:flex;justify-content:space-between;align-items:center;width:100%} .brand-pie .brand-heart{fill:var(--blanco)} .brand-pie .brand-pulse{stroke:var(--tinta)} .brand-pie{color:var(--blanco)} .pie-contactos{display:flex;justify-content:space-around;align-items:flex-start;gap:40px;width:100%} .pie-contacto{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:20px;text-align:left} .pie-icono{width:32px;height:32px;flex:none;color:var(--amarillo)} .pie-direccion{color:var(--blanco);margin:0;font-size:16px;max-width:230px} .pie-telefonos{display:flex;flex-direction:column} .pie-enlace{color:var(--blanco);margin:0;font-size:16px;text-transform:none} .pie-enlace:hover{color:var(--amarillo)} .pie-bottom{background:var(--tinta);padding-top:50px;padding-bottom:80px;position:relative;text-align:center} .pie-linea{position:absolute;inset:0 0 auto;width:100vw;height:1px;background:rgba(255,255,255,.2)} .pie-inferior{display:flex;flex-direction:column;justify-content:space-between;align-items:center;row-gap:50px;width:100%} .pie-links{display:flex;gap:50px;flex-wrap:wrap;justify-content:center} .pie-derechos{display:flex;flex-direction:column;align-items:center;flex-wrap:wrap} .pie-copy{color:var(--blanco);margin:0;font-size:18px} .pie-copy-menor{font-size:14px;color:#c9c2d4;margin-top:6px} .pie-copy-enlace{color:var(--blanco);font-size:18px} .pie-copy-enlace:hover{color:var(--amarillo)} /* ══════════════════════════════════════════════════════════════════════════════════════ PUNTOS DE RUPTURA Los mismos tres del original (991, 767, 479) y con los mismos valores medidos en su hoja, no inventados: el móvil de la referencia apila el equipo en fichas de 90vw con scroll horizontal, funde la galería a una columna y pone el pie a la izquierda. ══════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:991px){ h1{font-size:55px} h2{font-size:40px} h3{font-size:30px} h4{font-size:25px} .nav-inner{min-height:80px;padding:0 15px} .nav-menu{ position:fixed;inset:80px 0 auto;background:#fff;flex-direction:column;align-items:stretch; padding:20px 15px 30px;max-height:calc(100vh - 80px);overflow:auto; transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s; } .nav-menu.abierto{opacity:1;visibility:visible;transform:translateY(0)} .nav-link,.nav-dd-toggle{color:var(--tinta);width:100%;justify-content:space-between;padding:12px 0;margin:6px 0} .nav-dd{width:100%} .nav-dd-list{ position:static;opacity:1;visibility:visible;transform:none;border:0;padding:0 0 0 10px; display:none;width:100%; } .nav-dd.abierto .nav-dd-list{display:flex} .nav-dd:hover .nav-dd-list{display:none} .nav-dd.abierto:hover .nav-dd-list{display:flex} .nav-dd-mega{grid-template-columns:1fr;gap:0} .nav-dd-list a::before{display:none} .nav-right{display:none} .nav-burger{display:flex} .hero-inner{padding-top:100px} .hero-title{font-size:65px} .hero-content{width:65%} .hero-desc{width:80%;margin-top:10px} .cifra{width:30%;align-items:flex-start} .cifras-row{flex-wrap:wrap;gap:60px;justify-content:flex-start} .cifra-num{font-size:55px} .titulo-centro{width:80%;display:flex;flex-direction:column;justify-content:center;align-items:center} .titulo-izq{width:70%} .servicios{grid-template-columns:1fr 1fr;width:100%} .titulo-wrap-flex{flex-direction:column;align-items:flex-end;row-gap:40px} .galeria .titulo-wrap-flex{align-items:flex-start} .galeria .titulo-izq,.galeria-texto{width:100%} .cta-equipo{padding:80px 0} .cta-contenido{row-gap:40px} /* El aire del equipo vuelve a los 80 de la regla base: los 130 son sólo de 1280 para arriba, y medido en el original a 768 son 80. */ .equipo{padding:80px 0} .equipo-tira{gap:25px;justify-content:flex-start;overflow:auto;padding-bottom:20px} .ficha{min-width:48vw} .ficha-foto{height:650px} .galeria-banda{height:550px} .galeria-arriba{grid-template-columns:1fr} .galeria-mini{grid-template-columns:1fr 1fr;grid-template-rows:auto;column-gap:25px;height:auto} .galeria-mini .foto{height:250px} /* La tarjeta deja de flotar sobre la foto y se pone debajo, en blanco y con borde: es lo que hace el original en cuanto la rejilla de cuatro se apila. */ /* Al apilarse, los dos bloques dejan de compartir fila: en escritorio la foto grande ocupa las columnas 2 a 4 de la misma fila que las miniaturas, y aqui van uno debajo del otro. Sin soltar el `grid-row` se superponian y la seccion perdia 520 px. */ .galeria-grande{grid-column:auto;grid-row:auto;height:auto;overflow:visible;display:flex;flex-direction:column} .galeria-mini{grid-column:auto;grid-row:auto} .galeria-grande-img{height:500px;flex:none} .galeria-ficha{position:static;width:100%;background:var(--blanco);border:1px solid rgba(111,111,111,.4);padding:30px} .galeria-abajo{grid-template-columns:1fr 1fr} .contacto{padding-top:60px} .contacto-tarjeta{height:500px} .contacto-info{padding:0 50px 50px;width:100%} .testimonios{padding-top:335px;padding-bottom:60px} .testi{flex-direction:column;row-gap:40px} .testi-foto{width:100%;height:450px} .testi-cita{font-size:36px} .testi-carrusel{padding-bottom:80px} .testi-flecha{bottom:20px} .noticias{grid-template-columns:1fr} .our-news,.boletin-caja{flex-direction:column-reverse} .boletin-info{width:100%;align-items:center;padding:60px 15px;text-align:center} .boletin-titulo{text-align:center} .boletin-form{align-items:center} .boletin-img{width:100%;height:400px} .pie-top{padding-top:110px} .pie-contactos{flex-direction:column;gap:15px} .pie-contacto{width:100%} .pie-links{width:100%;gap:10px 35px;justify-content:center} .pie-bottom{padding-bottom:60px} /* SIN PUNTERO NO HAY HOVER, Y EL ORIGINAL LO SABE. Por debajo de 991 la ficha del equipo ensena el nombre y el cargo en reposo, y el velo de la galeria se queda a media tinta con su icono a la vista: medido en la referencia a 390 y a 768. Dejarlos escondidos detras de un :hover que en tactil no existe seria perder dos estados enteros en la mitad de los visitantes. */ .ficha-info{transform:none} .foto-ov{opacity:.5} } @media (max-width:767px){ .equipo{padding:60px 0} .titulo-izq{width:100%} .titulo-wrap{margin-bottom:40px} .cifras-row{gap:40px} .contacto-info{flex-direction:column;padding:0 50px 50px} .testi-foto{height:400px} .galeria-mini{grid-template-columns:1fr} .boletin-img{height:300px} .pie-links{justify-content:space-between} } @media (max-width:479px){ h1{font-size:45px} h2{font-size:32px} .hero-title{font-size:50px} .hero-content{width:100%;text-align:center;align-items:center;justify-content:center} .hero-desc{width:100%} .hero-buttons{justify-content:center} .cifras{padding:60px 0} .cifra{width:80%} .cifra-num{font-size:45px} .titulo-centro{width:100%} .servicios{grid-template-columns:1fr} .servicio-desc{width:100%} .seccion{padding:60px 0} .cta-equipo{padding:60px 0} .equipo{padding:48px 0} .equipo-tira{gap:20px} .ficha{min-width:90vw} .ficha-foto{height:430px} .ficha-nombre{font-size:28px} .cta-contenido{text-align:center;align-items:center} .galeria-grande-img{height:400px} .galeria-ficha{padding:20px} .galeria-abajo{grid-template-columns:1fr} .contacto-tarjeta{height:auto;padding:60px 0;justify-content:center;align-items:center} .contacto-info{align-items:center;text-align:center;padding:0 15px} .contacto-texto{width:100%;align-items:center;text-align:center} .testi-foto{height:350px} .testi-cita{font-size:28px} .pie-bottom{text-align:left} } /* ══════════════════════════════════════════════════════════════════════════════════════ EL MOVIMIENTO DE MOVIL NO ES EL DE ESCRITORIO, Y ESTO COSTO UNA RONDA ENTERA A 1280 la referencia revela tan rapido que la ventana de captura de 120 ms nunca la coge a medias, y por eso el clon iba con 280 ms y suelo de opacidad alto. A 390 NO: el original se deja fotografiar a medio revelar en 7 de las 13 posiciones de la pasada de vuelta —la sexta tarjeta de servicios no existe al bajar y esta puesta al subir, las fotos de galeria salen a opacidad intermedia, las de noticias entran con cortinilla— y su propio inventario a este ancho mide desplazamientos de 0 a 480 px. Un clon que ahi no se deje coger nunca no se lee como discreto: se lee como una pagina sin movimiento. Asi que por debajo de 991 el revelado se alarga y se escalona, que es lo que hace el original. Sigue disparando UNA VEZ: al subir se queda puesto, no rebobina. ══════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:991px){ /* El suelo de opacidad importa mas que la duracion. A 0,28 un fotograma cogido a medio camino no se lee como "entrando": se lee como una caja vacia, y eso es peor que no tener movimiento. El original, cogido a medias, sale DESVAIDO, no en blanco. */ .reveal{opacity:.52;transform:translateY(28px);transition:opacity .5s ease-out,transform .5s cubic-bezier(.22,.7,.28,1)} .servicios>.servicio, .galeria-abajo>.foto, .galeria-arriba .galeria-mini>.foto, .noticias>.nota, .equipo-tira>.ficha{ opacity:.5;transform:translateY(26px); transition:opacity .48s ease-out,transform .48s cubic-bezier(.22,.7,.28,1); } .servicios.visto>.servicio, .galeria-abajo.visto>.foto, .galeria-arriba.visto .galeria-mini>.foto, .noticias.visto>.nota, .equipo-tira.visto>.ficha{opacity:1;transform:none} .servicios.visto>.servicio:nth-child(2),.galeria-abajo.visto>.foto:nth-child(2), .noticias.visto>.nota:nth-child(2),.equipo-tira.visto>.ficha:nth-child(2), .galeria-arriba.visto .galeria-mini>.foto:nth-child(2){transition-delay:.07s} .servicios.visto>.servicio:nth-child(3),.galeria-abajo.visto>.foto:nth-child(3), .noticias.visto>.nota:nth-child(3),.equipo-tira.visto>.ficha:nth-child(3){transition-delay:.14s} .servicios.visto>.servicio:nth-child(4),.galeria-abajo.visto>.foto:nth-child(4), .equipo-tira.visto>.ficha:nth-child(4){transition-delay:.21s} .servicios.visto>.servicio:nth-child(5),.equipo-tira.visto>.ficha:nth-child(5){transition-delay:.28s} .servicios.visto>.servicio:nth-child(6),.equipo-tira.visto>.ficha:nth-child(6){transition-delay:.35s} /* Las cifras van CENTRADAS. La hoja del original dice `align-items:flex-start`, pero lo que se pinta a 390 no es eso: el numero cae en 143..247 sobre un viewport de 390, o sea centrado. Manda el pixel, no la regla. */ .cifra{align-items:center;text-align:center;width:80%} .cifras-row{justify-content:center} /* El salto titular→cuerpo del original son 20 px en TODAS las secciones, galeria incluida; aqui se iban casi noventa por el row-gap de la fila. */ .galeria .titulo-wrap-flex{row-gap:0} .galeria-titulo{margin-bottom:10px} /* El pie apila el logotipo y el boton, con el boton a todo el ancho de la caja. */ .pie-logo-fila{flex-direction:column;align-items:flex-start;row-gap:40px} .pie-logo-fila .btn-icono{width:100%} /* Los velos de las dos bandas con texto blanco sobre foto: a 390 la banda es mucho mas corta y el titular cae sobre batas blancas y cristaleras a contraluz. */ .cta-equipo .sombra{background:linear-gradient(0deg,rgba(0,0,0,.72) 40%,rgba(0,0,0,.45) 100%)} .cta-fondo img{object-position:50% 62%} .contacto-tarjeta .sombra{background:linear-gradient(0deg,rgba(0,0,0,.7) 45%,rgba(0,0,0,.35) 100%)} } @media (max-width:991px) and (prefers-reduced-motion:reduce){ .reveal,.servicios>.servicio,.galeria-abajo>.foto,.galeria-arriba .galeria-mini>.foto, .noticias>.nota,.equipo-tira>.ficha{opacity:1;transform:none;transition:none} } @media (max-width:479px){ /* El bloque de creditos va centrado, como el del original. */ .pie-bottom{text-align:center} } /* El campo del boletin mide 330 px en el original a 390, no los ~250 que tenia el clon. */ @media (max-width:991px){ .boletin-campo{width:330px;max-width:100%} } /* ── Distintivo de Clínicas: el camino de vuelta al portafolio ──────────────── Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe: el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */ .ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em; padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff; font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease} .ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none} .ct-firma b{font-weight:700} @media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}} @media (prefers-reduced-motion:reduce){.ct-firma{transition:none}} @media print{.ct-firma{display:none}}