, que trae 56px arriba y 96px abajo pensados para un documento largo sobre crema. Sin cancelarlos, quedaba una franja de crema vacía entre la barra y la sección — el aviso "flotaba" en vez de ocupar la pantalla. */ .doc .en-preparacion{ margin: -56px 0 -96px; } /* En términos/privacidad/arrepentimiento, ".doc a" (pensado para el texto legal sobre crema) le gana al color heredado y pintaba "Volver al inicio" en navy sobre navy — prácticamente invisible. Acá gana esta, por ser más específica que esa. */ .en-preparacion .link{ color: var(--tinta); } .en-preparacion h1{ font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin: 14px 0 16px; } .en-preparacion p{ color: var(--tinta-2); margin: 0 0 30px; max-width: 48ch; } .en-preparacion-acciones{ display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } /* Índice lateral */ .doc-indice{ background: var(--crema-2); border-radius: var(--r-panel); padding: 24px 28px; margin-bottom: 44px; } .doc-indice h2{ font-family: var(--texto); font-size: 1rem; font-weight: 700; margin: 0 0 12px; border: 0; padding: 0; } .doc-indice ol{ margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: .9375rem; } @media (max-width: 620px){ .doc-indice ol{ columns: 1; } } /* Aviso de arrepentimiento — obligatorio en la home por Res. SCI 424/2020 */ .arrepentimiento{ display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; } /* Formulario del botón de arrepentimiento */ .form-arrep{ margin: 8px 0 40px; max-width: 520px; } .form-arrep label{ display:block; font-weight:700; font-size:.9375rem; margin: 18px 0 6px; } .form-arrep input, .form-arrep textarea{ width:100%; font-family: var(--texto); font-size:1rem; padding: 13px 15px; border: 1.5px solid var(--linea-cla); border-radius: var(--r-chico); background:#fff; color: var(--navy); } .form-arrep input:focus, .form-arrep textarea:focus{ border-color: var(--navy); } .form-arrep input:focus:not(:focus-visible), .form-arrep textarea:focus:not(:focus-visible){ outline: none; } .form-arrep textarea{ min-height:110px; resize:vertical; } .form-arrep .btn{ width:100%; justify-content:center; margin-top:24px; } /* ============================================================================ 9. EL CORTE — transición entre Pantalla 1 y Pantalla 2 ============================================================================ Corte seco, no degradado. Es el mismo recurso que usa la página de referencia: un cambio brusco de oscuro a claro funciona como un corte de montaje en cine. Marca que empezó otra cosa. ============================================================================ */ .corte{ background: var(--crema); height: clamp(90px, 14vh, 170px); } /* ============================================================================ 10. PANTALLA 2 — LA LISTA QUE SE TILDA ============================================================================ El gesto central del sitio: a medida que bajás, cada pendiente recibe su tilde naranja dibujándose y aparece qué hacemos nosotros con eso. No es decoración. El tilde es el logo, y "tildar lo pendiente" es literalmente lo que vende la marca. Es el método contado sin explicarlo. ============================================================================ */ .p2{ background: var(--crema); padding: 0 0 clamp(70px, 12vh, 130px); position: relative; } .p2-intro{ max-width: 30ch; margin-bottom: clamp(44px, 7vh, 76px); } .p2-intro .eyebrow{ color: var(--navy); } .p2-intro .eyebrow .tilde{ border-color: var(--naranja); } .p2-intro p{ font-size: var(--t-1); color: rgba(5,25,72,.72); max-width: 46ch; } /* --- Cada fila de la lista --- */ .pendiente{ display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: clamp(16px, 2.5vw, 28px); align-items: start; padding: clamp(26px, 4vh, 40px) 0; border-top: 1px solid var(--linea-cla); } .pendiente:last-child{ border-bottom: 1px solid var(--linea-cla); } /* La caja del tilde */ .casilla{ width: 46px; height: 46px; border: 1.5px solid rgba(5,25,72,.22); border-radius: var(--r-chico); display: grid; place-items: center; background: #fff; transition: border-color 400ms var(--ease-out), background-color 400ms var(--ease-out); } .casilla svg{ width: 26px; height: 26px; display: block; overflow: visible; } /* El trazo. pathLength="1" normaliza el largo real del path a 1, así el cálculo del dibujado no depende de la geometría. */ .casilla svg path{ fill: none; stroke: var(--naranja); stroke-width: 3.2; stroke-linecap: butt; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; /* sin dibujar */ } /* El texto del pendiente */ .pendiente-txt{ position: relative; display: inline-block; } .pendiente h3{ font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.9rem); line-height: 1.2; margin: 0; color: var(--navy); transition: color 500ms var(--ease-out); } /* La línea que tacha: se dibuja de izquierda a derecha */ .pendiente-txt::after{ content: ""; position: absolute; left: 0; top: 54%; height: 2px; width: 0; background: var(--naranja); pointer-events: none; } /* Lo que hacemos: aparece cuando el pendiente ya está tildado */ .solucion{ margin: 14px 0 0; max-width: 54ch; color: rgba(5,25,72,.68); opacity: 0; transform: translateY(10px); } .solucion strong{ color: var(--navy); font-weight: 700; } /* -------------------------------------------------------------------------- ANIMACIÓN ATADA AL SCROLL (CSS puro, corre en la placa de video) El estado por defecto de arriba es "sin tildar"; estas reglas lo animan. Firefox todavía no soporta animation-timeline, así que ahí entra el respaldo por JavaScript de más abajo. -------------------------------------------------------------------------- */ @keyframes dibujar-tilde{ to{ stroke-dashoffset: 0; } } @keyframes tachar{ to{ width: 100%; } } @keyframes revelar{ to{ opacity: 1; transform: none; } } @keyframes marcar-casilla{ to{ border-color: rgba(255,102,51,.55); background-color: #FFF3ED; } } @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ /* TODO ANCLADO A LA FILA, NO A CADA PEDACITO. Antes cada sub-elemento usaba `view()`, o sea su PROPIO recorrido por la pantalla. Pero la casilla mide 46px y el bloque de la solución mide tres veces eso: el mismo "52%" significaba un momento distinto para cada uno, y la cascada salía despareja según el tamaño del texto. Con una línea de tiempo con nombre puesta en la fila, los cuatro miden contra la misma referencia y el escalonado es el que uno escribe. */ .pendiente{ view-timeline-name: --fila; view-timeline-axis: block; } /* POR QUÉ ESTOS NÚMEROS Y NO OTROS. Medido en Chrome, escritorio y móvil: con el rango anterior el tilde llegaba al 100% cuando la fila estaba al 55% de la pantalla, o sea apenas cruzaba el centro. Toda la animación ocurría en la mitad de abajo, que es justo donde nadie está mirando todavía — el visitante llegaba y ya estaba todo tildado. Es el gesto que vende la marca y no se veía nunca. Estos rangos corren la animación a la franja donde el ojo sí está: arranca con la fila al 78% de la pantalla y termina cerca del 38%, pasando por el centro. Los valores convergen en escritorio y móvil porque la referencia ahora es la fila y no cada elemento suelto. */ .casilla{ animation: marcar-casilla linear both; animation-timeline: --fila; animation-range: cover 27% cover 52%; } .casilla svg path{ animation: dibujar-tilde linear both; animation-timeline: --fila; animation-range: cover 30% cover 56%; } .pendiente-txt::after{ animation: tachar linear both; animation-timeline: --fila; animation-range: cover 36% cover 62%; } .solucion{ animation: revelar linear both; animation-timeline: --fila; animation-range: cover 42% cover 68%; } } } /* Sin soporte de scroll por CSS: JavaScript agrega .tildado */ .p2-js .casilla svg path{ transition: stroke-dashoffset 620ms var(--ease-out); } .p2-js .pendiente-txt::after{ transition: width 520ms var(--ease-out) 180ms; } .p2-js .solucion{ transition: opacity 520ms var(--ease-out) 260ms, transform 520ms var(--ease-out) 260ms; } .p2-js .pendiente.tildado .casilla{ border-color: rgba(255,102,51,.55); background: #FFF3ED; } .p2-js .pendiente.tildado .casilla svg path{ stroke-dashoffset: 0; } .p2-js .pendiente.tildado .pendiente-txt::after{ width: 100%; } .p2-js .pendiente.tildado .solucion{ opacity: 1; transform: none; } /* Si el sistema pide menos movimiento, se muestra todo tildado y listo */ @media (prefers-reduced-motion: reduce){ .casilla svg path{ stroke-dashoffset: 0; } .pendiente-txt::after{ width: 100%; } .solucion{ opacity: 1; transform: none; } } /* ============================================================================ 11. LA RUEDA — indicador de progreso lateral ============================================================================ */ .rueda{ position: fixed; right: clamp(14px, 2.2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transition: opacity 350ms var(--ease-out), visibility 0s linear 350ms; } .rueda.visible{ opacity: 1; visibility: visible; transition: opacity 350ms var(--ease-out), visibility 0s; } .rueda button{ --punto: rgba(5,25,72,.24); position: relative; width: 26px; height: 14px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; } .rueda button::before{ content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--punto); transition: background-color 260ms var(--ease-out), transform 260ms var(--ease-out); } .rueda button:hover{ --punto: rgba(5,25,72,.5); } .rueda button[aria-current="true"]{ --punto: var(--naranja); } .rueda button[aria-current="true"]::before{ transform: scale(1.5); } /* Etiqueta al pasar el mouse */ .rueda button span{ position: absolute; right: calc(100% + 10px); white-space: nowrap; font-size: .8125rem; font-weight: 500; color: var(--navy); background: #fff; border: 1px solid var(--linea-cla); border-radius: var(--r-chico); padding: 5px 10px; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .rueda button:hover span, .rueda button:focus-visible span{ opacity: 1; transform: none; } @media (max-width: 900px){ .rueda{ display: none; } } @media (max-width: 620px){ .pendiente{ grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; } .casilla{ width: 38px; height: 38px; } .casilla svg{ width: 21px; height: 21px; } } /* ============================================================================ 12. DOS TRATAMIENTOS DE FOTO PARA EL HERO ============================================================================ La foto no se elige y después se acomoda: el tratamiento se elige SEGÚN la foto. Medido sobre la zona donde va el titular: Foto B (oficina, oscura) brillo 74/255 → aguanta fondo completo Foto A (pizarra + ciudad) brillo 143/255 → NO aguanta fondo completo Una foto clara detrás de texto blanco obliga a un velo tan denso que la foto desaparece. Eso es lo que se ve como "pegoteado": una imagen que está pero no se entiende para qué. Por eso la A va en panel, sin velo, entera. Se cambia agregando una clase al : class="v-fondo" → foto B ocupando todo el fondo class="v-panel" → foto A en un panel a la derecha ============================================================================ */ /* --- VARIANTE 1: foto de fondo completo (B, la oscura) --- */ body.v-fondo .hero-media{ display: block; } body.v-fondo .hero-panel{ display: none; } /* --- VARIANTE 2: foto en panel (A, la de la pizarra) --- */ body.v-panel .hero-media{ display: none; } body.v-panel .hero-velo{ background: radial-gradient(64rem 48rem at 84% 26%, rgba(102,153,255,.18), transparent 62%), linear-gradient(165deg, var(--navy-900) 0%, var(--navy-800) 56%, var(--navy-900) 100%); } /* La columna derecha: la foto arriba y los síntomas apoyados sobre su parte baja. Una sola pieza, no dos cosas puestas al lado. */ .hero-col{ position: relative; } .hero-panel{ display: none; position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--r-panel) var(--r-panel) 0 0; overflow: hidden; border: 1px solid rgba(245,245,245,.14); border-bottom: 0; box-shadow: 0 26px 60px -22px rgba(0,0,0,.65); } body.v-panel .hero-panel{ display: block; } .hero-panel::before{ content: ""; position: absolute; inset: 0; background-image: image-set( url("assets/hero-panel-800.webp") type("image/webp") 1x, url("assets/hero-panel-1600.webp") type("image/webp") 2x, url("assets/hero-panel-800.jpg") type("image/jpeg") 1x, url("assets/hero-panel-1600.jpg") type("image/jpeg") 2x); background-size: cover; /* La foto es 4:3, igual que el panel: entra entera, sin recorte que desplace la pizarra. El Método se dibuja justo encima del vidrio. */ background-position: center; /* Apenas desaturada: conversa con la paleta sin apagarse */ filter: saturate(.8) contrast(1.05); } /* El azul de marca entra como luz sobre la foto, y el navy sube desde abajo para que los síntomas apoyen sobre algo oscuro sin necesitar una caja. */ .hero-panel::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(205deg, rgba(102,153,255,.30) 0%, transparent 44%), linear-gradient(to top, var(--navy-900) 0%, rgba(3,15,44,.55) 22%, transparent 52%); } /* En modo panel, los síntomas quedan pegados a la base de la foto */ body.v-panel .sintomas{ position: relative; margin-top: -1px; padding: 4px 22px 20px; background: var(--navy-900); border: 1px solid rgba(245,245,245,.14); border-top: 0; border-radius: 0 0 var(--r-panel) var(--r-panel); } body.v-panel .sintomas li{ font-size: clamp(1rem, .92rem + .35vw, 1.15rem); } @media (max-width: 1000px){ .hero-panel{ aspect-ratio: 16 / 9; } } /* ============================================================================ 13. EL MÉTODO ESCRITO SOBRE LA PIZARRA ============================================================================ Se lee apenas de lejos —parece parte de lo escrito en el vidrio— pero quien se acerca lee las tres fases reales del método. Es texto de verdad, no está quemado en la foto: se edita, lo lee un lector de pantalla y no se pixela en ninguna pantalla. ============================================================================ */ .panel-metodo{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: .0; animation: aparecer-metodo 900ms var(--ease-out) 700ms forwards; /* Sombra: mantiene el trazo legible tanto sobre las zonas claras de la foto como sobre las oscuras, sin tener que tapar la imagen con un velo. */ filter: drop-shadow(0 1px 2px rgba(3,15,44,.95)) drop-shadow(0 0 6px rgba(3,15,44,.6)); } @keyframes aparecer-metodo{ to{ opacity: 1; } } .pm-trazo{ fill: none; stroke: rgba(245,245,245,.42); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .pm-trazo rect{ stroke: rgba(255,204,153,.55); } .pm-txt text{ font-family: var(--texto); font-size: 11px; font-weight: 700; letter-spacing: .08em; fill: rgba(245,245,245,.62); } .pm-txt text:nth-child(n+4){ font-weight: 400; font-size: 10px; letter-spacing: .01em; fill: rgba(255,204,153,.5); } /* Al pasar el mouse sobre el panel, el método se vuelve legible del todo. Premia al que se acerca a mirar, que es exactamente el tipo de visitante que buscamos. */ .hero-panel:hover .pm-trazo{ stroke: rgba(245,245,245,.7); } .hero-panel:hover .pm-trazo rect{ stroke: var(--durazno); } .hero-panel:hover .pm-txt text{ fill: rgba(245,245,245,.95); } .hero-panel:hover .pm-txt text:nth-child(n+4){ fill: var(--durazno); } .pm-trazo, .pm-trazo rect, .pm-txt text{ transition: stroke 360ms var(--ease-out), fill 360ms var(--ease-out); } /* En la variante de fondo completo el método va sobre la foto, más grande */ body.v-fondo .panel-metodo{ display: none; } @media (max-width: 700px){ .panel-metodo{ display: none; } } /* ============================================================================ 14. CIERRE DE LA PANTALLA 2 — salidas hacia el resto del sitio ============================================================================ */ .p2-salidas{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 6vh, 64px); } .salida{ display: block; padding: 24px 26px; background: #fff; border: 1px solid var(--linea-cla); border-radius: var(--r-panel); text-decoration: none; color: var(--navy); transition: border-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .salida:hover{ border-color: var(--naranja); } .salida:active{ transform: scale(.99); } .salida h3{ font-family: var(--texto); font-size: 1.0625rem; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 9px; } .salida h3 .tilde{ border-color: var(--naranja); } .salida p{ margin: 0; font-size: .9375rem; color: rgba(5,25,72,.66); } @media (max-width: 860px){ .p2-salidas{ grid-template-columns: 1fr; } } /* ============================================================================ PUENTE — la banda con foto entre la Pantalla 2 y la 3 ============================================================================ Dos secciones crema seguidas se leen como un solo bloque interminable. Esta banda oscura corta. Es la misma idea de la página de referencia: el color de fondo cambia de golpe, sin transición, y eso solo ya marca que empezó otra cosa. ============================================================================ */ .puente{ position: relative; isolation: isolate; /* contiene la mezcla de las capas */ overflow: hidden; min-height: clamp(340px, 52vh, 560px); display: grid; align-items: end; /* El puente respiraba 81px contra los 108 de las secciones vecinas: un 25% menos. Existe para que las dos cremas no se lean como un bloque interminable, pero si respira distinto el corte se siente apretado en vez de deliberado. */ padding: clamp(56px, 10vh, 104px) 0; background: var(--navy-900); /* si la foto no carga, igual corta */ } .puente-foto{ position: absolute; inset: 0; background-image: image-set( url("assets/banda-caos-1200.webp") type("image/webp") 1x, url("assets/banda-caos-2200.webp") type("image/webp") 2x, url("assets/banda-caos-1200.jpg") type("image/jpeg") 1x, url("assets/banda-caos-2200.jpg") type("image/jpeg") 2x); background-size: cover; background-position: 42% 40%; /* Bajada de saturación para que converse con la paleta en vez de gritar con sus propios verdes y rosas fluorescentes. */ filter: saturate(.42) contrast(1.04) brightness(.72); transform: scale(1.04); /* evita bordes vacíos al desplazarse */ } /* El navy entra como color, no como mancha: `color` conserva la luminosidad de la foto —las luces, las sombras, el volumen— y solo reemplaza el tono. Es lo mismo que se hace en el hero; que sea el mismo tratamiento es lo que hace que las dos fotos parezcan de la misma campaña y no dos stocks. */ .puente-velo{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,15,44,.92) 0%, rgba(3,15,44,.35) 55%, rgba(3,15,44,.55) 100%), linear-gradient(90deg, rgba(5,25,72,.55) 0%, transparent 60%); } .puente .container{ position: relative; z-index: 1; } .puente-txt{ margin: 0; max-width: 20ch; font-family: var(--display); font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.06; letter-spacing: -.02em; color: var(--tinta); text-shadow: 0 2px 18px rgba(3,15,44,.75); } .puente-giro{ color: var(--naranja); } /* ============================================================================ PANTALLA 3 — DECLARADO VS. VERIFICADO ============================================================================ */ .p3{ background: var(--crema); padding: clamp(70px, 12vh, 130px) 0 clamp(60px, 10vh, 110px); } .p3-intro{ max-width: 34ch; margin-bottom: clamp(38px, 6vh, 64px); } .p3-intro h2{ margin: 0 0 14px; } .p3-intro p{ margin: 0; color: rgba(5,25,72,.68); max-width: 46ch; } .giros{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; /* Seis columnas para poder repartir CINCO tarjetas sin que sobre ninguna. Las tres primeras ocupan dos columnas cada una y las dos últimas tres: 3 arriba, 2 abajo, las dos filas completas. Con columnas iguales, la quinta quedaba sola al final como si se hubiera caído de la fila. */ grid-template-columns: repeat(6, 1fr); /* El punto de fuga vive acá, en la lista, no en cada tarjeta: así todas giran hacia el mismo lugar, como si fueran fichas sobre una misma mesa. Si cada una tuviera el suyo, cada una miraría a su propio horizonte y el conjunto se vería torcido. */ perspective: 1600px; } .giro{ position: relative; grid-column: span 2; } .giros > li:nth-child(4), .giros > li:nth-child(5){ grid-column: span 3; } @media (max-width: 980px){ .giros{ grid-template-columns: repeat(2, 1fr); } .giro, .giros > li:nth-child(4), .giros > li:nth-child(5){ grid-column: span 1; } /* Con dos columnas la quinta vuelve a quedar sola: se le da el ancho entero a propósito, así se lee como cierre y no como sobrante. */ .giros > li:nth-child(5){ grid-column: 1 / -1; } } @media (max-width: 640px){ .giros{ grid-template-columns: 1fr; } } .giro-cara{ position: relative; display: grid; /* las dos caras ocupan la misma celda, */ transform-style: preserve-3d; /* así la altura la manda la más alta */ transition: transform var(--t-panel) var(--ease-out); } .giro-lado{ grid-area: 1 / 1; /* LAS DOS CARAS, LA MISMA GRILLA. Antes cada una se armaba a su manera y el texto no cuadraba al dar vuelta la tarjeta: el rótulo saltaba de lugar y la frase arrancaba a otra altura. Con tres filas iguales —rótulo arriba, contenido en el medio que se estira, pie abajo— el giro se ve como una tarjeta que rota, y no como dos tarjetas distintas. */ display: grid; grid-template-rows: auto 1fr auto; align-content: start; min-height: 232px; padding: 24px; border-radius: var(--r-panel); /* Sin esto se ve la cara de atrás espejada a través de la de adelante */ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .giro-frente{ background: var(--crema-2); border: 1px solid rgba(5,25,72,.12); color: rgba(5,25,72,.78); } .giro-dorso{ background: var(--navy-800); border: 1px solid rgba(5,25,72,.9); color: var(--tinta-2); transform: rotateY(180deg); box-shadow: 0 18px 40px -20px rgba(3,15,44,.5); } .giro-rotulo{ display: inline-block; justify-self: start; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-chico); background: rgba(5,25,72,.08); color: rgba(5,25,72,.68); /* .6 daba 4.05:1 sobre su propio fondo */ margin-bottom: 16px; } /* El naranja sobre navy da 5.8:1 y pasa. Sobre el crema daría 2.6:1, por eso el rótulo de la cara de adelante es navy apagado y no naranja. */ .giro-rotulo-era{ background: rgba(255,102,51,.16); color: var(--naranja); } .giro-dato{ margin: 0 0 8px; font-family: var(--display); font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.15rem); line-height: 1; letter-spacing: -.02em; color: var(--durazno); /* 11.6:1 sobre navy: el más legible */ } /* La unidad va con el número pero en otro tono y otro tamaño: "6 de cada 10 consultas sin contestar" es un solo dato, no un número suelto seguido de una frase que arrancaba en minúscula y quedaba coja. */ .giro-unidad{ display: block; margin-top: 4px; font-family: var(--texto); font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--tinta-2); } .giro-frase{ margin: 0; font-size: .9375rem; line-height: 1.5; } .giro-dorso .giro-frase{ align-self: start; } /* --------------------------------------------------------------------------- "CHEKEÁ QUÉ PASABA" --------------------------------------------------------------------------- Nada le decía al visitante que las tarjetas se dan vuelta: quedaban ahí esperando un gesto que nadie le había anunciado. Este pie lo dice — y el verbo ES el nombre de la empresa. La marca deja de ser un sustantivo en el logo y pasa a ser lo que el visitante hace con la mano. Va en la fila de abajo de la grilla, así cae siempre a la misma altura en las cinco tarjetas. --------------------------------------------------------------------------- */ .giro-accion{ display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 18px; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; color: var(--naranja-texto); transition: gap var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out); } .giro:hover .giro-accion, .giro:focus-within .giro-accion{ gap: 12px; } .giro-frente .giro-frase{ font-family: var(--display); font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); line-height: 1.28; color: var(--navy); } .p3-nota{ /* Es la línea más honesta de la página —confiesa que todavía no hay clientes— y estaba tirada como un renglón gris cualquiera. La bastardilla y la línea de arriba la separan del contenido y la marcan como lo que es: una aclaración del autor, no una frase más. */ margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--linea-cla); font-style: italic; font-size: .8125rem; /* .45 daba 2.85:1 y el minimo es 4.5:1. Medido, no estimado: una nota al pie sigue siendo texto que alguien tiene que poder leer. */ color: rgba(5,25,72,.62); } /* --- El giro --------------------------------------------------------------- Atado al scroll: la tarjeta se da vuelta a medida que sube por la pantalla, y si volvés para arriba se desgira. No es un "aparecer": es un movimiento que el visitante maneja con la rueda del mouse. El rango de cada una está corrido unos puntos respecto de la anterior. Ese corrimiento es el que arma la cascada: `animation-delay` NO sirve con las líneas de tiempo de scroll, porque acá no hay tiempo, hay posición. --------------------------------------------------------------------------- */ @keyframes dar-vuelta{ to{ transform: rotateY(180deg); } } @media (prefers-reduced-motion: no-preference){ /* Giro por hover para que el usuario pueda leer primero la creencia */ .giro:hover .giro-cara, .giro:focus-within .giro-cara, .giro:active .giro-cara, .giro.hover-simulado .giro-cara { transform: rotateY(180deg); } } /* Respaldo para Firefox, que todavía no soporta líneas de tiempo de scroll. Lo activa el JavaScript agregando esta clase, y solo en ese caso. */ body.p3-js .giro-cara{ transition: transform 620ms var(--ease-out); } body.p3-js .giro.dado-vuelta .giro-cara{ transform: rotateY(180deg); } /* Con movimiento reducido no hay giro: se muestran las dos caras, una arriba de la otra. La información es la misma; lo que se saca es el espectáculo. */ @media (prefers-reduced-motion: reduce){ .giro-cara{ display: block; transform: none; } .giro-lado{ backface-visibility: visible; transform: none; min-height: 0; } .giro-frente{ border-radius: var(--r-panel) var(--r-panel) 0 0; } .giro-dorso{ border-radius: 0 0 var(--r-panel) var(--r-panel); border-top: 0; } } /* ============================================================================ PANTALLA 4 — LAS CUATRO ÁREAS COMO BLOQUES-BOTÓN ============================================================================ */ .p4{ background: var(--crema); padding: 0 0 clamp(80px, 13vh, 140px); } .p4-intro{ max-width: 30ch; margin-bottom: clamp(30px, 5vh, 52px); } .p4-intro h2{ margin: 0; } .bloques{ display: grid; gap: 16px; /* CUATRO EN UNA FILA, NO TRES. Son cuatro áreas y una grilla de 3 columnas deja a la cuarta sola en una segunda fila, con un hueco vacío al lado del tamaño de dos tarjetas — es lo que Tomás vio como "no me cierra". Con 4 columnas no sobra ningún lugar. De paso, en el ancho del contenedor (1240px) cada tarjeta queda en ~298x250: mucho más cerca de un cuadrado real que las 374x250 de la versión de tres columnas. */ grid-template-columns: repeat(4, 1fr); } /* LOS CUATRO IGUALES, a pedido de Tomás y con razón: si el primero ocupa el doble, el visitante lee que "Vender mejor" es el importante y que los otros tres son secundarios. No lo son — cuál importa depende de qué le está frenando a cada uno, que es justamente lo que el sitio dice que no se puede saber de antemano. Dar jerarquía visual acá contradecía el argumento. La grilla de cuatro iguales suele ser señal de página hecha con IA, sí. Se compensa por otro lado: cada bloque tiene su foto distinta, su número y su propia bajada, y ninguna de las cuatro fotos se parece a las otras. */ .bloque{ position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 250px; padding: 24px; border-radius: var(--r-panel); text-decoration: none; color: var(--tinta); background: var(--navy-900); transition: box-shadow var(--t-hover) var(--ease-out); } .bloque-foto{ position: absolute; inset: 0; z-index: -2; overflow: hidden; filter: saturate(.55) contrast(1.05) brightness(.7); /* Arranca apenas agrandada para poder achicarse al pasar el cursor sin que aparezcan bordes vacíos. */ transform: scale(1.06); transition: transform 600ms var(--ease-out), filter var(--t-hover) var(--ease-out); } /* El navy sube desde abajo para que el texto apoye sobre algo oscuro sin necesitar una caja atrás. */ .bloque::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(3,15,44,.94) 0%, rgba(3,15,44,.62) 42%, rgba(3,15,44,.18) 78%, transparent 100%); } .bloque-txt{ display: block; position: relative; } .bloque-num{ display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; /* mismo rótulo que .sv-num y .fase-num */ color: var(--turquesa); /* 8.9:1 sobre navy */ margin-bottom: 8px; } .bloque-tit{ display: block; font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; transition: transform var(--t-hover) var(--ease-out); } .bloque-baj{ display: block; max-width: 42ch; font-size: .9375rem; line-height: 1.5; color: var(--tinta-2); } /* La invitación a entrar está siempre en el DOM —hace falta para quien navega con teclado o lector de pantalla— pero se corre y se desvanece hasta que hay interés. Nunca aparece desde la nada: se mueve 8px, no 40. */ .bloque-ir{ display: block; /* Estaba pegado a la bajada: al aparecer con el cursor encima se leía como una línea más del párrafo en vez de como la invitación a entrar. */ margin-top: 22px; font-size: .875rem; font-weight: 600; color: var(--durazno); opacity: 0; transform: translateY(8px); transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out); } .bloque-ir .tilde{ border-color: var(--naranja); } /* CARGA DIFERIDA (17/9/2026). Las fotos eran fondos CSS: el navegador las baja todas al abrir la página aunque estén dos pantallas más abajo (612 KB en el celular). Ahora son con srcset: se bajan cuando se acercan al viewport y en el tamaño que corresponde al ancho real. */ .bloque-foto img{ display: block; width: 100%; height: 100%; object-fit: cover; } .bloque:hover .bloque-foto, .bloque:focus-visible .bloque-foto{ transform: scale(1); filter: saturate(.7) contrast(1.05) brightness(.78); } .bloque:hover .bloque-tit, .bloque:focus-visible .bloque-tit{ transform: translateY(-4px); } .bloque:hover .bloque-ir, .bloque:focus-visible .bloque-ir{ opacity: 1; transform: translateY(0); } .bloque:hover{ box-shadow: 0 24px 54px -26px rgba(3,15,44,.6); } .bloque:active{ transform: scale(.995); } @media (max-width: 900px){ .bloques{ grid-template-columns: 1fr 1fr; } .bloque{ min-height: 220px; } } @media (max-width: 620px){ .bloques{ grid-template-columns: 1fr; } .puente-txt{ max-width: 16ch; } } /* ===================== MINI-DIAGNÓSTICO ===================== */ .diagnostico{ background-color: var(--navy-900); background-image: url('assets/hero-fondo-1600.webp'); background-size: cover; background-position: center; background-blend-mode: overlay; padding: clamp(80px, 12vh, 140px) 0; position: relative; overflow: hidden; } .diagnostico::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(3,15,44,0.7) 0%, rgba(3,15,44,0.95) 100%); pointer-events: none; } /* El z-index sube por encima del velo radial de arriba. Los colores del texto NO van acá: estaban puestos antes de las reglas que corregían, y en CSS gana la última. El h2 terminaba navy sobre fondo oscuro, o sea invisible. Ahora cada color vive en su propia regla, más abajo. */ .diag-container{ z-index: 2; } .diag-container{ max-width: 680px; margin: 0 auto; position: relative; min-height: 400px; } .diag-step{ position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transform: translateX(20px) scale(0.98); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); } .diag-step.is-active{ opacity: 1; pointer-events: auto; transform: translateX(0) scale(1); position: relative; } .diag-step.is-exiting{ opacity: 0; transform: translateX(-20px) scale(0.98); transition: opacity 150ms ease, transform 150ms ease; position: absolute; } .diag-eyebrow{ display: block; font-weight: 700; font-size: .875rem; color: var(--turquesa); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; } .diag-step h2{ font-size: var(--t-2); margin: 0 0 32px; max-width: 25ch; /* La sección es oscura: acá el texto va claro. Antes decía navy y lo tapaba un intento de corrección que estaba más arriba y perdía. */ color: var(--tinta); line-height: 1.1; } .diag-options{ display: flex; flex-direction: column; gap: 12px; } .diag-btn{ text-align: left; background: #fff; border: 1px solid var(--linea-cla); border-radius: var(--r-chico); padding: 18px 24px; font-family: var(--texto); font-size: 1.0625rem; font-weight: 500; color: var(--navy); cursor: pointer; min-height: 56px; transition: transform 160ms var(--ease-out), border-color 200ms ease, box-shadow 200ms ease; opacity: 0; transform: translateY(12px); animation: diagFadeIn 250ms var(--ease-out) forwards; } .diag-btn:nth-child(1){ animation-delay: 40ms; } .diag-btn:nth-child(2){ animation-delay: 80ms; } .diag-btn:nth-child(3){ animation-delay: 120ms; } @keyframes diagFadeIn{ to{ opacity: 1; transform: translateY(0); } } @media(hover: hover) and (pointer: fine){ .diag-btn:hover{ border-color: rgba(5,25,72,.25); box-shadow: 0 6px 20px -8px rgba(5,25,72,.1); transform: translateY(-2px); } } .diag-btn:active{ transform: scale(0.97); } /* RESULTADO */ .diag-res{ background: #fff; border-radius: var(--r-panel); border: 1px solid var(--linea-cla); overflow: hidden; box-shadow: 0 20px 50px -15px rgba(5,25,72,.08); } .diag-res-foto{ height: 180px; background-size: cover; background-position: center; position: relative; } .diag-res-foto::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,25,72,.4) 100%); mix-blend-mode: multiply; } .diag-res-cuerpo{ padding: clamp(24px, 4vw, 40px); } .diag-res-ico{ width: 48px; height: 48px; border-radius: 50%; /* era 24px: la mitad del tamaño de HOY. Si mañana el ícono mide 56 deja de ser un círculo. */ background: var(--crema-2); display: flex; align-items: center; justify-content: center; color: var(--naranja-texto) /* el naranja pleno daba 2.38:1 */; margin-bottom: 24px; } .diag-res h3{ font-size: var(--t-1); margin: 0 0 16px; color: var(--navy); } .diag-res p{ font-size: 1.0625rem; line-height: 1.6; color: rgba(5,25,72,.75); margin: 0 0 32px; max-width: 55ch; } .diag-res .btn{ width: 100%; justify-content: center; font-size: 1rem; } @media(min-width: 600px){ .diag-res .btn{ width: auto; } } /* ===================== FOOTER GLOBAL ===================== */ /* ============================================================================ FOOTER ============================================================================ Estaba definido DOS VECES: un bloque original y otro agregado después sin sacar el primero. Se pisaban entre sí, y el resultado era que a partir de 768px el .footer-container pasaba a fila y ponía el mapa del sitio y el copyright uno al lado del otro en vez de apilados. Ahora es un solo bloque. Arriba el mapa, una línea fina, y abajo el copyright a la izquierda con las redes a la derecha. ============================================================================ */ .footer{ background: var(--navy-900); color: var(--tinta); padding: clamp(52px, 8vh, 72px) 0 clamp(28px, 4vh, 36px); position: relative; z-index: 10; } .footer-container{ width: 100%; /* Mas angosta que el contenido: un pie que llega a los mismos bordes pesa igual que el contenido, y es un pie. */ max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } /* --- Arriba: la marca y el mapa del sitio --- */ .footer-top{ display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vh, 48px); padding-bottom: clamp(30px, 5vh, 44px); border-bottom: 1px solid rgba(245,245,245,.12); } .footer-brand{ display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } /* El logotipo de verdad, no la palabra escrita en serif. El ® va al lado y arriba, como corresponde, y en un tono más bajo: acompaña, no compite. */ .footer-logo{ display: inline-flex; align-items: flex-start; gap: 4px; text-decoration: none; } .footer-logo img{ height: 28px; width: auto; display: block; } .footer-r{ font-size: .6875rem; line-height: 1; margin-top: 2px; color: rgba(245,245,245,.55); } .footer-loc{ font-size: .9375rem; color: rgba(245,245,245,.72); } .footer-nav{ display: flex; gap: clamp(28px, 6vw, 64px); flex-wrap: wrap; } .footer-col{ display: flex; flex-direction: column; gap: 11px; min-width: 150px; } .footer-col strong{ font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--durazno); /* 11.6:1 sobre navy, medido */ } .footer-col a{ color: rgba(245,245,245,.78); text-decoration: none; font-size: .9375rem; transition: color var(--t-hover) var(--ease-out); } .footer-col a:hover{ color: var(--tinta); } /* --- Abajo: el copyright a la izquierda, las redes a la derecha --- */ .footer-bottom{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: clamp(22px, 3vh, 30px); } .footer-copy{ font-size: .875rem; color: rgba(245,245,245,.55); /* 5.76:1 sobre navy-900, medido */ } .footer-social{ display: flex; gap: 12px; } .footer-social a{ width: 42px; height: 42px; border-radius: 50%; background: rgba(245,245,245,.08); color: var(--tinta); display: grid; place-items: center; transition: background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .footer-social a:hover{ background: rgba(245,245,245,.16); } .footer-social a:active{ transform: scale(.95); } .footer-social svg{ width: 19px; height: 19px; } @media (min-width: 820px){ .footer-top{ grid-template-columns: auto 1fr; align-items: start; } .footer-nav{ justify-content: flex-end; } } @media (max-width: 520px){ /* En celular el copyright va debajo de las redes, pero sigue a la izquierda: es el pie de la página, no un cartel centrado. */ .footer-bottom{ flex-direction: column-reverse; align-items: flex-start; } } /* Chat input */ .ct-chat-input-box{ padding: 12px 16px; background: #fff; border-top: 1px solid var(--linea-cla); display: flex; gap: 8px; } .ct-chat-input-box input{ flex: 1; border: 1px solid var(--linea-cla); border-radius: 999px; /* es una pastilla, no un rectángulo redondeado */ padding: 10px 16px; font-family: var(--texto); font-size: .9375rem; transition: border-color 150ms ease; } /* Igual que en el formulario de contacto: el anillo se saca solo con clic. Acá el `outline: none` estaba en la regla base, que con especificidad (0,1,1) le gana al :where() global — que tiene especificidad cero a propósito, para que cualquiera pueda ajustarlo. El resultado era que el chat no mostraba foco en ninguna de las 9 páginas. */ .ct-chat-input-box input:focus:not(:focus-visible){ outline: none; } .ct-chat-input-box input:focus{ border-color: var(--navy); } .ct-chat-input-box button{ background: var(--naranja); color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 150ms ease, opacity 150ms ease; } .ct-chat-input-box button:active{ transform: scale(0.95); } .ct-chat-input-box button:disabled{ opacity: 0.5; cursor: not-allowed; } .ct-chat{ position: fixed; bottom: clamp(20px, 4vh, 32px); right: clamp(20px, 4vw, 32px); z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; } .ct-chat-fab{ width: 60px; height: 60px; border-radius: 50%; background: var(--naranja); color: var(--navy); border: none; box-shadow: 0 8px 24px -6px rgba(255,102,51,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) var(--ease-out); } .ct-chat-fab:hover{ background: #FF7F52; } .ct-chat-fab:active{ transform: scale(.94); } .ct-chat-fab-abrir, .ct-chat-fab-cerrar{ position: absolute; width: 28px; height: 28px; transition: opacity 200ms ease, transform 300ms var(--ease-out); } .ct-chat-fab-cerrar{ opacity: 0; transform: rotate(-90deg) scale(0.5); } .ct-chat-fab[aria-expanded="true"] .ct-chat-fab-abrir{ opacity: 0; transform: rotate(90deg) scale(0.5); } .ct-chat-fab[aria-expanded="true"] .ct-chat-fab-cerrar{ opacity: 1; transform: rotate(0deg) scale(1); } .ct-chat-panel{ position: absolute; bottom: 80px; right: 0; width: 360px; max-width: calc(100vw - 40px); background: #fff; border-radius: var(--r-panel); box-shadow: 0 12px 40px -10px rgba(5,25,72,.15), 0 0 0 1px var(--linea-cla); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(20px) scale(0.95); pointer-events: none; transition: opacity 250ms ease, transform 300ms var(--ease-out); transform-origin: bottom right; } .ct-chat-fab[aria-expanded="true"] + .ct-chat-panel{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ct-chat-head{ background: var(--navy-900); color: var(--tinta); padding: 16px 20px; display: flex; align-items: center; gap: 12px; } .ct-chat-head strong{ font-size: 1.0625rem; font-weight: 700; flex: 1; } .ct-chat-estado{ font-size: .8125rem; color: var(--turquesa); font-weight: 500; } .ct-chat-cuerpo{ padding: 20px; background: var(--crema); height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .ct-chat-burbuja{ max-width: 85%; padding: 12px 16px; /* 16px era un tercer radio que se coló. El sistema tiene dos y nada en el medio; una burbuja de chat es un panel chico. */ border-radius: var(--r-panel); font-size: .9375rem; line-height: 1.4; animation: burbujaEntra 300ms var(--ease-out) both; } .ct-chat-burbuja p{ margin: 0; } @keyframes burbujaEntra{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } } .ct-chat-auto{ background: #fff; color: var(--navy); border: 1px solid var(--linea-cla); border-bottom-left-radius: 4px; align-self: flex-start; } .ct-chat-user{ background: var(--navy-800); color: var(--tinta); border-bottom-right-radius: 4px; align-self: flex-end; } .ct-chat-preguntas{ padding: 16px 20px; background: #fff; border-top: 1px solid var(--linea-cla); display: flex; flex-direction: column; gap: 8px; max-height: 160px; overflow-y: auto; } .ct-chat-preguntas button{ text-align: left; background: transparent; border: 1px solid var(--linea-cla); padding: 10px 14px; border-radius: var(--r-chico); font-family: var(--texto); font-size: .875rem; color: var(--navy); cursor: pointer; transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); } .ct-chat-preguntas button:hover{ background: var(--crema-2); border-color: rgba(5,25,72,.2); } .ct-chat-pie{ padding: 14px 20px; background: var(--crema-2); border-top: 1px solid var(--linea-cla); text-align: center; } .ct-chat-pie a{ display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 600; font-size: .875rem; text-decoration: none; } .ct-chat-pie a:hover{ text-decoration: underline; } } /* ============================================================================ ESTADOS DE LO QUE SE PUEDE TOCAR ============================================================================ Regla de la casa: TODO lo clickeable responde al cursor y responde al dedo. Son dos respuestas distintas y las dos hacen falta. hover = "esto se puede tocar" (antes de tocar) active = "te escuché" (en el momento exacto del clic) El estado de presionado importa más de lo que parece: es el único que confirma que el clic registró ANTES de que pase nada. Sin él, en una conexión lenta el visitante hace clic, no ve nada, y vuelve a hacer clic. Los botones ya tenían .btn:active. Estos son los que faltaban. ============================================================================ */ /* El logotipo de la barra y el del pie: son enlaces a la home y nadie lo sospecha porque no reaccionan a nada. */ .nav-logo, .footer-logo{ /* El display de .footer-logo ya está en su regla del pie; acá solo el movimiento. Repetirlo hacía que dos reglas declararan lo mismo. */ transition: opacity var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .nav-logo{ display: inline-flex; } .nav-logo:hover, .footer-logo:hover{ opacity: .78; } .nav-logo:active, .footer-logo:active{ transform: scale(.97); } /* El botón del menú en celular. Es el control más importante de la página en un teléfono y no tenía ninguna respuesta. */ .nav-toggle{ transition: background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out); } .nav-toggle:hover{ background: rgba(245,245,245,.10); } .nav-toggle:active{ transform: scale(.94); } /* Los enlaces de texto tenían el subrayado que se dibuja, pero nada al presionar. La transición vive en la regla original de .link, más arriba; acá va solo el estado. */ .link:active{ opacity: .7; } /* Los enlaces del pie. Las salidas de la Pantalla 2 NO van acá: ya tenían su transición y su estado de presionado desde el principio, y volver a declararlos solo agregaba una regla que pisa a otra sin cambiar nada. */ .footer-col a{ display: inline-block; } .footer-col a:active{ opacity: .7; } /* Con movimiento reducido se sacan las escalas pero NO la respuesta: el cambio de opacidad sigue confirmando el clic. Quitar el movimiento no puede significar quitar la información. */ @media (prefers-reduced-motion: reduce){ .btn:active, .nav-logo:active, .footer-logo:active, .nav-toggle:active, .salida:active, .bloque:active{ transform: none; } .btn:active{ opacity: .8; } } /* ============================================================================ FEEDBACK AL NAVEGAR ENTRE PÁGINAS ============================================================================ El pedido era "una pantalla de cargando entre páginas, para darle control al visitante". El problema que señala es real: al hacer clic no pasa nada visible hasta que la página nueva pinta, y en una conexión lenta ese momento muerto se siente como que el clic no registró. Pero una pantalla de carga en un sitio estático de 50 KB AGREGA una espera que no existía. Es teatro: hace el sitio más lento para simular que trabaja. Se resuelve distinto, en dos capas: 1. TRANSICIÓN ENTRE DOCUMENTOS (abajo). El navegador funde la página que se va con la que llega. La navegación deja de ser un parpadeo blanco y pasa a sentirse continua. Cuesta cuatro líneas y CERO milisegundos de espera. Donde el navegador no lo soporta, navega como siempre. 2. BARRA DE PROGRESO (en app.js). Aparece SOLO si la navegación tarda más de 180ms. En una conexión buena nunca se ve; en una mala aparece exactamente cuando hace falta. Es la diferencia entre informar y simular. ============================================================================ */ @view-transition{ navigation: auto; } @media (prefers-reduced-motion: no-preference){ ::view-transition-old(root){ animation: 90ms cubic-bezier(.4,0,1,1) both desvanecer-salida; } ::view-transition-new(root){ animation: 210ms var(--ease-out) both desvanecer-entrada; } } @keyframes desvanecer-salida{ to{ opacity: 0; } } @keyframes desvanecer-entrada{ from{ opacity: 0; } } /* La barra de progreso. Vive fija arriba de todo y solo existe cuando el JS la enciende. */ .cargando{ --avance: 0%; /* lo mueve el JS; declararla acá evita que parezca un olvido */ position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 999; background: transparent; pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease-out); } .cargando.visible{ opacity: 1; } .cargando::after{ content: ""; display: block; height: 100%; width: var(--avance, 0%); background: var(--naranja); border-radius: 0 3px 3px 0; box-shadow: 0 0 12px rgba(255,102,51,.55); transition: width 220ms var(--ease-out); } /* --- Respuesta de base al presionar ----------------------------------------- Quedaban sin estado de presionado los enlaces y botones sueltos: los del menú, los del mini-diagnóstico, los del chat, los del índice de servicios. Cada uno tenía su hover pero ninguno confirmaba el clic. Va con :where() a propósito: eso le da especificidad CERO, así que cualquier regla propia le gana sin necesidad de !important. Es un piso, no una imposición — y como solo toca la opacidad, se suma a las escalas que ya tienen los botones en vez de pelearse con ellas. 60ms y no 120: al presionar la respuesta tiene que sentirse simultánea al dedo. Lo que se anima despacio es la vuelta, no la ida. --------------------------------------------------------------------------- */ :where(main a, main button, .nav a, .nav button, .footer a, .saltar):active{ opacity: .72; transition-duration: 60ms; } /* ============================================================================ ÁREAS TÁCTILES EN CELULAR ============================================================================ Donde más nos van a ver es en celular, así que esto no es un detalle de accesibilidad: es la experiencia principal. MEDIDO en un viewport de 390px, antes de esta corrección: enlaces del pie ......... 150x24 ← el peor: 24px de alto botón del chat .......... 38x38 preguntas del chat ...... 295x38 redes del pie ........... 42x42 botón del menú .......... 44x40 botones de cookies ...... 150x42 El mínimo cómodo es 44x44: es el ancho promedio de la yema de un dedo adulto. Por debajo de eso no es que "cuesta un poco" — es que se le erra, y el visitante culpa al sitio aunque no sepa por qué. Se agranda el ÁREA, no el dibujo: el ícono y la tipografía quedan igual, crece la zona que responde. Nada se ve más grande, todo se toca mejor. ============================================================================ */ @media (max-width: 900px){ /* Los enlaces del mapa del sitio. Eran 24px de alto: la mitad de lo necesario, y están apilados, así que errarle a uno es tocar el de al lado. */ .footer-col a{ display: flex; align-items: center; min-height: 44px; } .footer-col{ gap: 0; } /* Las redes: 42x42 no está lejos, pero son íconos sin texto y no perdonan. */ .footer-social a{ width: 46px; height: 46px; } /* El control más importante de la página en un teléfono. */ .nav-toggle{ min-width: 46px; min-height: 46px; } /* Los dos botones del aviso de cookies: es lo primero que se toca al entrar, y aceptar o rechazar no puede ser una apuesta. */ #aviso .btn{ min-height: 46px; } /* El logotipo del pie: es un enlace a la home aunque no lo parezca. */ .footer-logo{ padding: 8px 0; } } /* El chat flota sobre todo y se toca con el pulgar, muchas veces con el teléfono en una mano. 38px era chico hasta con el mouse. */ .ct-chat-fab{ min-width: 52px; min-height: 52px; } @media (max-width: 900px){ .ct-chat-fab{ min-width: 56px; min-height: 56px; } /* Las preguntas frecuentes del chat: filas apiladas de 38px. */ .ct-chat-preguntas button{ min-height: 46px; } } /* Los enlaces dentro del texto del aviso de cookies —términos, privacidad— median 20px de alto y hay que tocarlos para leer lo que estás aceptando. Se les da aire vertical sin romper el renglón. */ .aviso-txt a, #aviso a{ display: inline-block; padding-block: 6px; } /* ============================================================================ EL AVISO EN CELULAR ============================================================================ Medido en 375x812: el aviso ocupaba 271px de alto —un tercio de la pantalla— y tapaba entero el botón principal del hero. En la pantalla por la que entra todo el mundo, la acción que justifica el sitio quedaba debajo de un cartel. Se corrige por dos lados: en app.js el aviso espera al primer scroll, y acá se lo achica para que ocupe lo que tiene que ocupar y no más. ============================================================================ */ @media (max-width: 620px){ .aviso{ padding: 16px 18px 18px; gap: 14px; border-radius: var(--r-panel) var(--r-panel) 0 0; /* Pegado al borde: gana ancho útil y se lee como una barra del sistema, que es lo que es, en vez de una tarjeta flotando. */ bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; } .aviso h2{ font-size: 1rem; margin-bottom: 6px; } .aviso p{ font-size: .8125rem; line-height: 1.45; margin: 0; } .aviso-btns{ gap: 10px; } .aviso-btns .btn{ padding: 12px 16px; min-height: 46px; } } /* El chat flotante y el aviso se pisaban: el botón naranja del chat quedaba encima del "Aceptar". Dos controles naranjas superpuestos, y se toca uno creyendo tocar el otro. Mientras el aviso está en pantalla, el chat se va — no compite con una decisión que hay que tomar primero. */ body.con-aviso .ct-chat-fab{ opacity: 0; pointer-events: none; transform: scale(.8); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } /* Las direcciones web largas de las páginas legales no se cortaban y empujaban la página: `arrepentimiento.html` daba 411px de ancho en un viewport de 375. Era la única de las nueve con scroll horizontal. */ .doc a, .doc p{ overflow-wrap: anywhere; } /* ============================================================================ EL CHAT NO APARECE HASTA QUE SE SCROLLEA ============================================================================ Medido en 390x844: al cargar, el botón flotante caía encima del texto en las cinco páginas. En la home tapaba la palabra "no" de "los resultados no cambiaron"; en Contacto se montaba sobre el campo "Nombre". Es un elemento fijo al que nadie le miró qué queda debajo en la primera pantalla de cada página. Y en un sitio que se vende como prueba de rigor, un botón tapando texto en lo primero que se ve es de las cosas que un cliente nota en cinco segundos. Mismo criterio que el aviso de cookies y que la rueda: entra cuando el visitante ya empezó a recorrer la página. Nadie busca ayuda antes de haber leído nada. ============================================================================ */ .ct-chat{ opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out); } .ct-chat.visible{ opacity: 1; transform: translateY(0); pointer-events: auto; } /* Si el chat está abierto se queda, aunque se vuelva arriba de todo. */ .ct-chat.abierto{ opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce){ .ct-chat{ transform: none; } } /* ============================================================================ "PEDIR PRESUPUESTO" ============================================================================ Acá los dos informes se contradicen. El de conversión dice que está bien que sea un enlace y no un botón, para que no le dispute jerarquía al "Agendar reunión" primario. El de diseño dice que en reposo es indistinguible de un párrafo en negrita. Los dos tienen razón en su mitad. La salida no es convertirlo en botón —eso le rompe la jerarquía al primario, y son 31 de estos en la página— sino que se vea claramente tocable SIN subir de rango: subrayado siempre visible en vez de solo al pasar el cursor, y una flecha que se mueve. ============================================================================ */ .svc-cuerpo > .link, .sva-der > .link{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--naranja-texto); /* El subrayado deja de aparecer solo en hover: existe desde el principio, y en hover se ensancha. Se ve que es un enlace sin que haya que descubrirlo pasando el mouse por encima. */ background-size: 100% 1.5px; /* Alto táctil: medía 29px y el mínimo cómodo es 44. */ padding-block: 10px; } .svc-cuerpo > .link::after, .sva-der > .link::after{ content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--t-hover) var(--ease-out); } .svc-cuerpo > .link:hover::after, .sva-der > .link:hover::after{ transform: rotate(45deg) translate(2px, -2px); } /* --------------------------------------------------------------------------- CIERRE DE LA HOME — último bloque antes del pie (17/9/2026) Mismo gesto que .sv-cierre en servicios.css: título, una línea, el botón. --------------------------------------------------------------------------- */ .cierre{ background: var(--navy-800); /* un tono más claro que el pie, para que no se fundan */ color: var(--tinta); padding: clamp(56px, 9vh, 88px) 0; } .cierre .container{ display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } @media (min-width: 900px){ .cierre .container{ grid-template-columns: minmax(0, 1.35fr) auto; } } .cierre h2{ color: var(--tinta); max-width: 22ch; margin: 0 0 12px; } .cierre p{ max-width: 52ch; color: var(--tinta-2); margin: 0; } .cierre-lado{ display: flex; flex-direction: column; align-items: flex-start; } .cierre-acciones{ display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .cierre .link{ color: var(--tinta); } .cierre-nota{ margin: 18px 0 0; font-size: .875rem; color: rgba(245,245,245,.55); }