` se veía en el sitio público. */ .por-confirmar, .nota-interna, body:not(.dev) .por-confirmar, body:not(.dev) .nota-interna { display: none; } .dev .nota-interna { display: block; } .dev .por-confirmar { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem; border: 1px dashed #d9a441; border-radius: var(--r-sm); background: var(--alerta-tinte); color: var(--alerta); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } /* --- Header -------------------------------------------------------------- */ /* Masthead que se compacta, no app bar. En reposo respira y el logo manda; al scrollear baja a barra de servicio. Sin backdrop-filter en reposo: sobre página blanca no se ve y cuesta una capa de composición por frame. */ .header { --header-alto: 4.5rem; position: sticky; top: 0; z-index: 100; background: var(--papel); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background-color var(--dur-media) var(--ease); } .header.esta-fijo { border-bottom-color: var(--linea); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(12px); } .header__barra { display: flex; align-items: center; gap: var(--e5); min-height: var(--header-alto); transition: min-height 260ms var(--ease); } .header__logo { display: block; flex: none; text-decoration: none; } .header__logo img { width: 148px; height: auto; transition: width 260ms var(--ease); } @media (min-width: 1001px) { .header { --header-alto: 5.5rem; } .header__logo img { width: 176px; } .header.esta-fijo { --header-alto: 3.9rem; } .header.esta-fijo .header__logo img { width: 134px; } } .header__nav { margin-left: auto; } .header__lista { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.4rem); list-style: none; margin: 0; padding: 0; } .header__lista li + li { margin-top: 0; } .header__link { display: inline-block; padding: 0.5rem 0.35rem; font-size: var(--t-sm); font-weight: 500; color: var(--tinta-2); text-decoration: none; position: relative; } .header__link:hover { color: var(--tinta); } .header__link[aria-current="page"] { color: var(--tinta); font-weight: 600; } .header__link[aria-current="page"]::after { content: ""; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.1rem; height: 2px; background: var(--verde); border-radius: 2px; } .header__acciones { display: flex; align-items: center; gap: var(--e3); flex: none; } .header__toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--linea); border-radius: var(--r-sm); background: transparent; cursor: pointer; } .header__toggle span, .header__toggle span::before, .header__toggle span::after { display: block; width: 18px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .header__toggle span::before, .header__toggle span::after { content: ""; position: absolute; } .header__toggle span::before { transform: translateY(-6px); } .header__toggle span::after { transform: translateY(6px); } .header__toggle[aria-expanded="true"] span { background: transparent; } .header__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); } .header__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); } @media (max-width: 1000px) { .header__toggle { display: inline-flex; position: relative; } .header__nav { position: fixed; inset: var(--header-alto) 0 auto 0; background: var(--papel); border-bottom: 1px solid var(--linea); padding: var(--e5) var(--gutter) var(--e6); box-shadow: var(--sombra-media); display: none; } .header__nav.esta-abierto { display: block; } .header__lista { flex-direction: column; align-items: stretch; gap: 0; } .header__link { display: block; padding: 0.9rem 0; font-size: 1.125rem; border-bottom: 1px solid var(--linea); } .header__link[aria-current="page"]::after { display: none; } .header__cta-escritorio { display: none; } .header__cta-movil { display: inline-flex; margin-top: var(--e5); width: 100%; } /* El nav sale del flujo: las acciones pasan a empujar hacia la derecha. */ .header__acciones { margin-left: auto; } } @media (min-width: 1001px) { .header__cta-movil { display: none; } } /* --- Migas de pan -------------------------------------------------------- */ .migas { padding-block: var(--e5) 0; font-size: var(--t-xs); color: var(--tinta-3); } .migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; list-style: none; padding: 0; margin: 0; } .migas li { margin: 0; display: flex; align-items: center; gap: 0.45rem; } .migas li + li::before { content: "/"; color: var(--linea-fuerte); } .migas a { color: var(--tinta-3); text-decoration: none; } .migas a:hover { color: var(--verde-press); } .migas [aria-current="page"] { color: var(--tinta); font-weight: 500; } /* --- Tarjetas ------------------------------------------------------------ */ .tarjeta { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .tarjeta__cuerpo { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); flex: 1; } .tarjeta--enlazable:hover { border-color: var(--linea-fuerte); transform: translateY(-3px); box-shadow: var(--sombra-sutil); } .tarjeta__titulo { font-size: var(--t-h3); } .tarjeta__titulo a { text-decoration: none; } .tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; } .tarjeta--enlazable { position: relative; } .tarjeta__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: var(--e3); padding-left: 0; list-style: none; } .tarjeta__meta li { margin: 0; } /* --- Recorridos (selector de las 3 áreas) -------------------------------- */ .recorrido { position: relative; display: flex; flex-direction: column; gap: var(--e4); padding: var(--e6) var(--e5) var(--e5); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-lg); text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .recorrido::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--verde); border-radius: var(--r-lg) var(--r-lg) 0 0; transform: scaleX(0.18); transform-origin: left; transition: transform 320ms var(--ease); } .recorrido:hover { border-color: var(--linea-fuerte); transform: translateY(-4px); box-shadow: var(--sombra-sutil); } .recorrido:hover::before, .recorrido:focus-visible::before { transform: scaleX(1); } .recorrido__numero { font-family: var(--fuente-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--verde-texto); } .recorrido__titulo { font-size: var(--t-h3); } .recorrido__texto { color: var(--tinta-2); font-size: var(--t-sm); flex: 1; } /* Acá vivía `.rail`, la primera versión del motivo de recorrido. La reemplazó `.ruta`, que numera los hitos y funciona igual en vertical y en horizontal. Ninguna página la usa: se borra para no dejar dos componentes que hacen lo mismo. */ /* --- Acordeón ------------------------------------------------------------ */ .acordeon { border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; background: var(--papel); } .acordeon + .acordeon { margin-top: var(--e3); } .acordeon__cabecera { margin: 0; } .acordeon__btn { display: flex; align-items: flex-start; gap: var(--e4); width: 100%; padding: var(--e4) var(--e5); background: transparent; border: 0; text-align: left; cursor: pointer; font-family: var(--fuente-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.32; letter-spacing: -0.015em; color: var(--tinta); transition: background-color var(--dur) var(--ease); } .acordeon__btn:hover { background: var(--papel-2); } .acordeon__btn:focus-visible { outline-offset: -3px; } .acordeon__indice { flex: none; font-size: var(--t-xs); font-weight: 600; color: var(--verde-texto); padding-top: 0.22rem; min-width: 2.25rem; letter-spacing: 0.06em; } .acordeon__texto { flex: 1; } .acordeon__sub { display: block; font-family: var(--fuente-texto); font-size: var(--t-xs); font-weight: 400; color: var(--tinta-3); margin-top: 0.25rem; letter-spacing: 0; } .acordeon__icono { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; position: relative; } .acordeon__icono::before, .acordeon__icono::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--verde-press); border-radius: 2px; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .acordeon__icono::after { transform: translate(-50%, -50%) rotate(90deg); } .acordeon__btn[aria-expanded="true"] .acordeon__icono::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .acordeon__panel { padding: 0 var(--e5) var(--e5); border-top: 1px solid var(--linea); padding-top: var(--e4); } .acordeon__panel[hidden] { display: none; } .acordeon__panel > * + * { margin-top: var(--e4); } .acordeon__panel p, .acordeon__panel li { color: var(--tinta-2); font-size: var(--t-base); max-width: var(--medida-prosa); } .acordeon__panel h4 { color: var(--tinta); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* Lista de contenidos en columnas para módulos extensos */ .lista-contenidos { columns: 1; column-gap: var(--e6); padding-left: 1.1em; } @media (min-width: 720px) { .lista-contenidos { columns: 2; } } .lista-contenidos li { break-inside: avoid; margin-top: 0.25em; } /* Lista con tildes */ .lista-check { list-style: none; padding: 0; display: grid; gap: 0.6rem; } .lista-check li { position: relative; padding-left: 1.75rem; margin: 0; color: var(--tinta-2); font-size: var(--t-sm); } .lista-check li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); } /* Listas largas de ítems cortos (objetivos, criterios de evaluación): dos columnas en vez de una tira de doce renglones que se lee como relleno. */ @media (min-width: 700px) { .lista-check--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); } } /* --- Ficha de precio ----------------------------------------------------- */ .precio { border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--papel); padding: var(--e5); } .precio__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); padding-block: 0.7rem; } .precio__fila + .precio__fila { border-top: 1px solid var(--linea); } .precio__etiqueta { font-size: var(--t-sm); color: var(--tinta-2); } .precio__valor { font-family: var(--fuente-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; } .precio__valor--destacado { color: var(--verde-press); font-size: 1.6rem; } .precio__total { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px dashed var(--linea-fuerte); } /* --- Plan (acompañamiento) ----------------------------------------------- */ .plan { position: relative; display: flex; flex-direction: column; gap: var(--e4); padding: var(--e6) var(--e5) var(--e5); border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--papel); } .plan--recomendado { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra-sutil); } .plan__insignia { position: absolute; top: -0.7rem; left: var(--e5); } .plan__nombre { font-size: var(--t-h3); } .plan__resumen { color: var(--tinta-2); font-size: var(--t-sm); } .plan__precio { font-family: var(--fuente-display); font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .plan__periodo { font-family: var(--fuente-texto); font-size: var(--t-sm); font-weight: 400; color: var(--tinta-3); letter-spacing: 0; } .plan__lista { flex: 1; } /* --- Testimonios --------------------------------------------------------- */ .cita { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e5); border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--papel); height: 100%; } /* Comillas angulares reales, las mismas que usa el cuerpo del sitio, con la de apertura colgando fuera de la caja. Antes había una comilla inglesa suelta de adorno y ninguna de cierre: dos convenciones para la misma función. */ .cita blockquote { margin: 0; quotes: "«" "»"; text-indent: -0.42em; hanging-punctuation: first last; font-family: var(--fuente-display); font-size: var(--t-lead); font-weight: 500; line-height: 1.42; letter-spacing: -0.015em; } .cita blockquote::before { content: open-quote; color: var(--verde); } .cita blockquote::after { content: close-quote; color: var(--verde); } /* Testimonio de una línea: se agranda en vez de quedar flotando en una caja medio vacía al lado de uno largo. */ .cita--breve blockquote { font-size: var(--t-h3); line-height: 1.24; letter-spacing: var(--track-h3); } .cita figcaption { margin-top: auto; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); } .seccion--oscura .cita figcaption { color: var(--tinta-inv-3); } /* Bloque de testimonios asimétrico: uno manda, el resto acompaña. */ @media (min-width: 1000px) { .citas { display: grid; grid-template-columns: 1.45fr 0.55fr; gap: clamp(2rem, 3vw, 3.5rem); align-items: start; } } .citas__secundarias { display: grid; gap: var(--e4); } .citas__secundarias .cita { padding: var(--e4) var(--e5); } .citas__secundarias .cita blockquote { font-family: var(--fuente-texto); font-size: var(--t-base); font-weight: 400; line-height: 1.5; letter-spacing: 0; } /* Acá vivía `.datos`, la banda de dato+etiqueta de las fichas de curso. La reemplazó `.ficha-datos`, que además funciona sobre navy. */ /* Acá vivía `.datos`, la banda de dato + etiqueta de las fichas de curso. La reemplazó `.ficha-datos`, que además funciona sobre navy. */ /* --- Aviso --------------------------------------------------------------- */ .aviso { display: flex; gap: var(--e4); padding: var(--e4) var(--e5); border: 1px solid var(--linea); border-left: 3px solid var(--verde); border-radius: var(--r-md); background: var(--papel-2); font-size: var(--t-sm); color: var(--tinta-2); } .aviso strong { color: var(--tinta); } /* --- Footer -------------------------------------------------------------- */ .footer { background: var(--navy); color: var(--tinta-inv-2); padding-block: clamp(3rem, 2.5rem + 3vw, 5rem) var(--e6); font-size: var(--t-sm); } .footer a { color: var(--tinta-inv-2); text-decoration: none; } .footer a:hover { color: #fff; } .footer__grid { display: grid; gap: var(--e6); } @media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer__logo img { width: 158px; height: auto; } .footer__claim { margin-top: var(--e4); font-family: var(--fuente-display); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; color: #fff; letter-spacing: var(--track-h3); max-width: 14ch; } .footer__titulo { font-family: var(--fuente-texto); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: var(--e4); } .footer__lista { list-style: none; padding: 0; display: grid; gap: 0.55rem; } .footer__lista li { margin: 0; } .footer__base { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: var(--e5); border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between; align-items: center; font-size: var(--t-xs); color: rgba(255, 255, 255, 0.55); } .footer__redes { display: flex; gap: var(--e3); list-style: none; padding: 0; } .footer__redes li { margin: 0; } .footer__redes a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-full); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .footer__redes a:hover { border-color: var(--verde); background: rgba(0, 193, 106, 0.14); } /* --- Botón flotante de WhatsApp ------------------------------------------ */ .wsp-flotante { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: var(--r-full); background: var(--verde); color: #04231a; box-shadow: var(--sombra-media); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); } .wsp-flotante:hover { transform: scale(1.06); background: var(--verde-hover); } /* ========================================================================== Trayecta · Lenguaje de recorrido El nombre de la marca es el sistema gráfico: punto de partida, hitos numerados, líneas que conectan, objetivo. Todo lo que sigue son variaciones de esa misma idea, para no repetir cuatro cajas blancas por sección. ========================================================================== */ /* --- Ruta: hitos conectados por una línea -------------------------------- Vertical en mobile (espina a la izquierda), horizontal en desktop. El contenedor declara --hitos con la cantidad de pasos. */ .ruta { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .ruta__hito { position: relative; margin: 0; padding: 0 0 var(--e6) 2.25rem; border-left: 1px solid var(--linea); } .ruta__hito:last-child { border-left-color: transparent; padding-bottom: 0; } .ruta__hito::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 11px; height: 11px; margin-left: -6px; border-radius: var(--r-full); background: var(--verde); } .ruta__num { display: block; font-family: var(--fuente-display); font-size: var(--t-h3); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--linea-fuerte); } .ruta__titulo { font-size: var(--t-h4); margin-top: 0.3rem; } .ruta__texto { margin-top: 0.45rem; font-size: var(--t-sm); color: var(--tinta-2); max-width: var(--medida-corta); } @media (min-width: 900px) { .ruta { grid-template-columns: repeat(var(--hitos, 4), minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-top: 2.75rem; } /* La línea es continua y cambia de color hacia el final: recorrido hecho a la izquierda, objetivo todavía por delante a la derecha. */ .ruta::before { content: ""; position: absolute; left: 0; right: 0; top: 0.5rem; height: 1px; background: linear-gradient(90deg, var(--verde) 0%, var(--verde) 62%, var(--linea-fuerte) 100%); } .ruta__hito { padding: 0 clamp(0.75rem, 1.5vw, 1.5rem) 0 0; border-left: 0; } .ruta__hito::before { top: 0.5rem; margin-left: 0; transform: translateY(-50%); } .ruta__num { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.5rem); } } .seccion--oscura .ruta__hito { border-left-color: rgba(255, 255, 255, 0.16); } .seccion--oscura .ruta__num { color: var(--navy-3); } .seccion--oscura .ruta::before { background: linear-gradient( 90deg, var(--verde) 0%, var(--verde) 62%, rgba(255, 255, 255, 0.22) 100% ); } /* La línea se dibuja al entrar en vista y los nodos aparecen detrás. Es el único gesto de marca que se repite en todo el sitio. */ @media (prefers-reduced-motion: no-preference) { .mov .ruta[data-revelar-grupo] > .ruta__hito::before { opacity: 0; transform: scale(0.2); transition: opacity 300ms var(--ease-nodo), transform 300ms var(--ease-nodo); transition-delay: calc(var(--rev-retraso, 0ms) + 240ms); } .mov .ruta[data-revelar-grupo] > .es-visible::before { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: no-preference) and (min-width: 900px) { .mov .ruta[data-revelar-grupo]::before { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-trazo) var(--ease-trazo); } .mov .ruta[data-revelar-grupo].en-marcha::before { transform: scaleX(1); } .mov .ruta[data-revelar-grupo] > .ruta__hito::before { transform: translateY(-50%) scale(0.2); } .mov .ruta[data-revelar-grupo] > .es-visible::before { transform: translateY(-50%) scale(1); } } /* --- Selector por necesidad ---------------------------------------------- Reemplaza a las tres tarjetas iguales: filas tipográficas que ordenan la decisión desde lo que le pasa al visitante, no desde el organigrama. */ .necesidades { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); } .necesidades li { margin: 0; } .necesidad { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 2.75rem); padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) 0; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding-left var(--dur-media) var(--ease); } /* El filete verde crece de izquierda a derecha: el hover también es un avance. */ .necesidad::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-trazo); } .necesidad:hover, .necesidad:focus-visible { padding-left: clamp(0.5rem, 1.5vw, 1.25rem); } .necesidad:hover::after, .necesidad:focus-visible::after { transform: scaleX(1); } .necesidad__num { align-self: start; padding-top: 0.6em; font-family: var(--fuente-display); font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--linea-fuerte); } .necesidad__quiero { display: block; font-family: var(--fuente-display); font-size: clamp(1.5rem, 1rem + 2.3vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: var(--track-h2); color: var(--tinta); text-wrap: balance; } .necesidad__area { display: block; margin-top: 0.6rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--verde-texto); } .necesidad__texto { display: block; margin-top: 0.5rem; font-size: var(--t-sm); color: var(--tinta-2); max-width: 46ch; } .necesidad__flecha { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--r-full); color: var(--tinta); font-size: 1.05rem; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .necesidad:hover .necesidad__flecha, .necesidad:focus-visible .necesidad__flecha { background: var(--verde); border-color: var(--verde); color: #04231a; transform: translateX(4px); } @media (max-width: 599px) { .necesidad { grid-template-columns: auto 1fr; row-gap: var(--e4); } .necesidad__flecha { grid-column: 2; justify-self: start; width: 2.4rem; height: 2.4rem; } } /* --- Cifra --------------------------------------------------------------- Un dato real a tamaño de titular. Nunca cuenta hacia arriba al aparecer: un número que se anima solo es publicidad, y acá se juega la confianza. */ .cifras { display: grid; gap: var(--e6); list-style: none; padding: 0; margin: 0; } @media (min-width: 620px) { .cifras { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } } .cifras li { margin: 0; padding-top: var(--e4); border-top: 1px solid var(--linea); } .cifras__valor { display: block; font-family: var(--fuente-display); font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; color: var(--navy); } .cifras__etq { display: block; margin-top: 0.65rem; font-size: var(--t-sm); color: var(--tinta-2); max-width: 24ch; } .seccion--oscura .cifras li { border-top-color: rgba(255, 255, 255, 0.18); } .seccion--oscura .cifras__valor { color: #fff; } .seccion--oscura .cifras__etq { color: var(--tinta-inv-2); } /* --- Franja a sangre: fotografía con una frase encima --------------------- El degradado no es decoración, es lo que sostiene la legibilidad del texto sobre la foto. Sin él esto no pasa contraste y no se publica. */ .franja { position: relative; isolation: isolate; color: #fff; background: var(--navy); } .franja img { width: 100%; height: clamp(24rem, 15rem + 30vw, 38rem); object-fit: cover; } .franja::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 100deg, rgba(10, 19, 48, 0.93) 0%, rgba(10, 19, 48, 0.82) 40%, rgba(10, 19, 48, 0.24) 84% ); } .franja__contenido { position: absolute; inset: 0; z-index: 2; width: min(100%, var(--ancho)); margin-inline: auto; padding-inline: var(--gutter); display: grid; align-content: center; } .franja__cita { margin: 0; max-width: 17ch; font-family: var(--fuente-display); font-size: var(--t-h1); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-h1); color: #fff; } .franja__pie { margin-top: var(--e5); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--tinta-inv-2); } /* --- Video vertical ------------------------------------------------------- El reel es material de Instagram: 9:16. Se le pone tope de ancho para que en desktop no ocupe media pantalla de alto, y fondo navy para que la franja negra del reproductor antes de cargar sea parte de la marca. */ .video-reel { width: 100%; max-width: 24rem; justify-self: end; border-radius: var(--r-xl); background: var(--navy); } @media (max-width: 899px) { .video-reel { justify-self: start; } } /* --- Mosaico de fotos a sangre ------------------------------------------- Para cuando las fotos SON el contenido (STEAM). Tamaños distintos a propósito: ocho miniaturas iguales convierten el trabajo real en catálogo. */ .mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; } .mosaico li { margin: 0; overflow: hidden; background: var(--papel-3); aspect-ratio: 1 / 1; } .mosaico figure { margin: 0; height: 100%; } .mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); } .mosaico li:hover img { transform: scale(1.045); } @media (min-width: 760px) { .mosaico { grid-template-columns: repeat(6, 1fr); } .mosaico li { grid-column: span 2; } .mosaico__ancho { grid-column: span 4; aspect-ratio: 2 / 1; } .mosaico__alto { grid-row: span 2; aspect-ratio: 1 / 2; } } /* --- Cabecera tipográfica de tarjeta ------------------------------------- Para las formaciones en salud, que no tienen material fotográfico propio. Antes llevaban fotos de otra área haciendo de ilustración: ese es exactamente el mecanismo del banco de imágenes. */ .tarjeta__cabecera { background: var(--navy); color: #fff; padding: var(--e6) var(--e5) var(--e5); display: grid; gap: var(--e5); align-content: space-between; } .tarjeta__cifra { font-family: var(--fuente-display); font-weight: 700; font-size: clamp(3rem, 2rem + 4vw, 4.25rem); line-height: 0.85; letter-spacing: -0.05em; color: #fff; } .tarjeta__cifra span { display: block; margin-top: 0.5em; font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--tinta-inv-2); } /* --- Trazo de marca: dibujo del recorrido -------------------------------- El estado base es el trazo YA dibujado y la animación sólo aporta el "desde" (backwards). Así se ve bien sin JS y queda quieto con prefers-reduced-motion, sin dejar líneas invisibles. */ .hero__trazo path, .cta-final__trazo path { stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; } @keyframes trazo-dibujo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes nodo-aparece { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .hero__trazo path { animation: trazo-dibujo var(--dur-trazo) var(--ease-trazo) 220ms backwards; } .hero__trazo path + path { animation-duration: 1500ms; animation-delay: 420ms; } .hero__trazo circle { transform-box: fill-box; transform-origin: center; animation: nodo-aparece 320ms var(--ease-nodo) backwards; } .hero__trazo circle:nth-of-type(1) { animation-delay: 900ms; } .hero__trazo circle:nth-of-type(2) { animation-delay: 1180ms; } .hero__trazo circle:nth-of-type(3) { animation-delay: 1440ms; } /* El CTA final está siempre bajo el pliegue: se dispara con el observador. */ .mov .cta-final[data-revelar] .cta-final__trazo path { stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms var(--ease-trazo) 160ms; } .mov .cta-final[data-revelar] .cta-final__trazo path + path { transition-delay: 340ms; } .mov .cta-final[data-revelar].es-visible .cta-final__trazo path { stroke-dashoffset: 0; } }