/* Optinex — hoja de estilos única Dos temas: azul (por defecto) y rosa (belleza y bienestar). Animaciones: todo lo que parte oculto depende de la clase "js" en , que pone js/inicio.js. Sin JavaScript, o si la persona pidió menos movimiento en su sistema, el contenido se ve completo y quieto. Solo se animan transform, translate, scale, rotate, opacity y clip-path. */ :root { --fondo: #061a4d; --fondo-2: #0a2a78; --panel: rgba(255, 255, 255, .06); --panel-borde: rgba(126, 210, 255, .2); --texto: #ffffff; --texto-2: #c8d8f6; --acento: #19d3f3; --acento-2: #6aa8ff; --acento-tinta: #04204f; --titulo: #ffffff; --raya: #19d3f3; --sombra: 0 24px 60px rgba(2, 10, 40, .45); --radio: 24px; --f-titulo: "Montserrat", "Segoe UI", Arial, sans-serif; --f-texto: "Fira Sans", "Segoe UI", Arial, sans-serif; /* Paleta juguetona: los colores de las cápsulas */ --tono-1: #19d3f3; --tono-2: #ff7d6b; --tono-3: #ffc83d; --tono-4: #a58bff; --tono-5: #3fe0a8; --tono-6: #4f8bff; /* Cápsulas fotorrealistas (renders con fondo transparente) */ --capsula-1: url("../img/capsula-cian.webp"); --capsula-2: url("../img/capsula-coral.webp"); --capsula-3: url("../img/capsula-amarillo.webp"); --capsula-4: url("../img/capsula-violeta.webp"); --capsula-5: url("../img/capsula-menta.webp"); --capsula-6: url("../img/capsula-azul.webp"); --rebote: cubic-bezier(.34, 1.56, .64, 1); --suave: cubic-bezier(.2, .7, .2, 1); --telon: cubic-bezier(.7, 0, .3, 1); } .tema-rosa { --fondo: #fbe6ea; --fondo-2: #f4c3cf; --panel: rgba(255, 255, 255, .62); --panel-borde: rgba(201, 162, 75, .45); --texto: #5d0f2d; --texto-2: #7d2a47; --acento: #a8234c; --acento-2: #d6467a; --acento-tinta: #ffffff; --titulo: #8a0f3c; --raya: #c9a24b; --sombra: 0 24px 60px rgba(138, 15, 60, .18); --tono-1: #a8234c; --tono-2: #9a6b1f; --tono-3: #c4376b; --tono-4: #8a0f3c; --tono-5: #b0507a; --tono-6: #7d5a12; --capsula-1: url("../img/capsula-rosa.webp"); --capsula-2: url("../img/capsula-dorado.webp"); --capsula-3: url("../img/capsula-rosa-palido.webp"); --capsula-4: url("../img/capsula-rosa.webp"); --capsula-5: url("../img/capsula-dorado.webp"); --capsula-6: url("../img/capsula-rosa-palido.webp"); } *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; overflow-x: hidden; background: var(--fondo); } html:has(.tema-rosa) { background: #fbe6ea; } body { margin: 0; font-family: var(--f-texto); font-size: 17px; line-height: 1.55; color: var(--texto); background: var(--fondo); } /* Manchas de luz que derivan lento detrás de todo */ body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; border-radius: 50%; } body::before { top: -30vmax; right: -25vmax; background: radial-gradient(circle, color-mix(in srgb, var(--fondo-2) 100%, transparent) 0%, transparent 62%); } body::after { bottom: -35vmax; left: -30vmax; background: radial-gradient(circle, color-mix(in srgb, var(--tono-1) 20%, transparent) 0%, transparent 62%); } img, svg { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { font-family: var(--f-titulo); color: var(--titulo); margin: 0; line-height: 1.08; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } .ancho { width: min(1160px, 100% - 40px); margin-inline: auto; } .ancho-angosto { width: min(820px, 100% - 40px); } .saltar { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--acento); color: var(--acento-tinta); padding: 10px 16px; border-radius: 10px; font-weight: 600; } .saltar:focus { top: 12px; } :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; } .icono { width: 1.25em; height: 1.25em; flex: none; } .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Cápsula dibujada con CSS: separador, decoración y chispas */ .pildora { display: inline-block; flex: none; width: 2.5em; height: 1.1em; background: var(--capsula-1) center / contain no-repeat; } .pildora-2 { background-image: var(--capsula-2); } .pildora-3 { background-image: var(--capsula-3); } .pildora-4 { background-image: var(--capsula-4); } .pildora-5 { background-image: var(--capsula-5); } .pildora-6 { background-image: var(--capsula-6); } /* ===================================================================== Pantalla de carga (primera visita) y telón entre páginas ===================================================================== */ .intro { display: none; } html.con-intro .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--fondo); clip-path: circle(150% at 50% 50%); } html:has(.tema-rosa).con-intro .intro { background: #fbe6ea; } .intro-centro { display: grid; justify-items: center; gap: 28px; } .intro .logo-icono { width: 104px; height: 104px; overflow: visible; } .intro .logo-arcos { transform-origin: 32px 34px; animation: girar 1.5s cubic-bezier(.6, .1, .4, .9) infinite; } .intro .logo-punto { transform-box: fill-box; transform-origin: center; animation: late 1.5s ease-in-out infinite; } .intro .logo-punto:nth-of-type(2) { animation-delay: .2s; } .intro .logo-punto:nth-of-type(3) { animation-delay: .4s; } .intro-barra { display: block; width: 150px; height: 5px; border-radius: 3px; background: var(--panel-borde); overflow: hidden; } .intro-barra span { display: block; height: 100%; border-radius: 3px; transform-origin: left; background: linear-gradient(90deg, var(--tono-1), var(--tono-5), var(--tono-3), var(--tono-2)); animation: llena 1s var(--suave) both; } html.con-intro.intro-fuera .intro { pointer-events: none; animation: intro-cierra .75s var(--telon) both; } .telon { position: fixed; inset: 0; z-index: 190; pointer-events: none; visibility: hidden; background: linear-gradient(135deg, var(--tono-1), var(--tono-6) 55%, var(--tono-4)); } html.saliendo .telon { visibility: visible; animation: telon-cubre .45s var(--telon) both; } html.entrando .telon { visibility: visible; animation: telon-abre .65s .05s var(--telon) both; } @keyframes girar { to { transform: rotate(360deg); } } @keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } } @keyframes llena { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-cierra { to { clip-path: circle(0% at 50% 50%); } } @keyframes telon-cubre { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } } @keyframes telon-abre { from { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); } to { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); } } /* Transición nativa entre páginas: la nueva se abre en círculo desde el clic, y el frasco y la barra viajan de una página a la otra. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: none; } ::view-transition-new(root) { animation: telon-cubre .8s var(--telon) both; } .barra { view-transition-name: barra; } .hero-visual { view-transition-name: visual; } ::view-transition-group(visual) { animation-duration: .7s; animation-timing-function: var(--suave); } ::view-transition-group(barra) { z-index: 10; } } /* ===================================================================== Barra superior ===================================================================== */ .barra { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--panel-borde); transition: box-shadow .3s ease; } .barra.compacta { box-shadow: 0 10px 30px rgba(2, 10, 40, .35); } .tema-rosa .barra.compacta { box-shadow: 0 10px 30px rgba(138, 15, 60, .12); } .barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; transition: min-height .3s var(--suave); } .barra.compacta .barra-fila { min-height: 62px; } .progreso { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; transform: scaleX(var(--avance, 0)); transform-origin: left; background: linear-gradient(90deg, var(--tono-1), var(--tono-5), var(--tono-3), var(--tono-2)); } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-icono { width: 44px; height: 44px; overflow: visible; transition: rotate .6s var(--rebote); } .logo:hover .logo-icono { rotate: 120deg; } .logo img { width: 168px; height: auto; } .menu { display: flex; align-items: center; gap: 4px; } .menu-enlace { font: 500 16px/1 var(--f-texto); color: var(--texto); text-decoration: none; border: 0; padding: 14px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap; background: linear-gradient(var(--acento), var(--acento)) no-repeat 14px calc(100% - 6px) / 0 2px; transition: color .2s ease, background-size .35s var(--suave); } .menu-enlace:hover, .menu-enlace.activo { color: var(--acento); background-size: calc(100% - 28px) 2px; } .menu-desplegable::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--rebote); } .menu-desplegable[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); } .menu-grupo { position: relative; } .menu-panel { position: absolute; left: 0; top: calc(100% + 8px); min-width: 280px; background: var(--fondo); border: 1px solid var(--panel-borde); border-radius: 18px; padding: 8px; box-shadow: var(--sombra); visibility: hidden; opacity: 0; transform: translateY(-10px) scale(.95); transform-origin: top left; transition: opacity .2s ease, transform .3s var(--rebote), visibility 0s .3s; } .tema-rosa .menu-panel { background: #fff; } .menu-grupo.abierto .menu-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .menu-panel a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 500; transition: background .2s ease, color .2s ease, translate .2s ease; } .menu-panel a:nth-child(6n+1) { --tono: var(--tono-1); --i: 0; } .menu-panel a:nth-child(6n+2) { --tono: var(--tono-2); --i: 1; } .menu-panel a:nth-child(6n+3) { --tono: var(--tono-3); --i: 2; } .menu-panel a:nth-child(6n+4) { --tono: var(--tono-4); --i: 3; } .menu-panel a:nth-child(6n+5) { --tono: var(--tono-5); --i: 4; } .menu-panel a:nth-child(6n+6) { --tono: var(--tono-6); --i: 5; } .menu-panel a:hover, .menu-panel a[aria-current] { background: var(--panel); color: var(--tono); translate: 4px 0; } .menu-panel .icono { color: var(--tono); } .menu-grupo.abierto .menu-panel a { animation: aparece .4s var(--suave) both; animation-delay: calc(var(--i) * 45ms); } .menu-boton { display: none; background: none; border: 0; padding: 12px; cursor: pointer; } .menu-boton span { display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--texto); margin: 5px 0; transition: transform .35s var(--rebote), opacity .2s ease; } .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ===================================================================== Botones ===================================================================== */ .boton { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 17px/1 var(--f-titulo); text-decoration: none; cursor: pointer; color: var(--acento-tinta); background: var(--acento); border: 2px solid var(--acento); border-radius: 999px; padding: 17px 28px; transition: transform .25s var(--rebote), box-shadow .25s ease, border-color .2s ease, color .2s ease; } .boton::before { content: ""; position: absolute; inset: 0; z-index: -1; translate: -130% 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); } .boton:hover::before { animation: destello .75s ease; } .boton:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 30px color-mix(in srgb, var(--acento) 40%, transparent); } .boton:active { transform: scale(.96); } .boton .icono { transition: translate .3s var(--rebote); } .boton:hover .icono { translate: 6px 0; } .boton-linea { background: transparent; color: var(--texto); border-color: var(--panel-borde); } .boton-linea:hover { border-color: var(--acento); color: var(--acento); box-shadow: none; } .boton-chico { font-size: 15px; padding: 12px 20px; margin-left: 8px; white-space: nowrap; } .boton-ancho { width: 100%; } @keyframes destello { to { translate: 130% 0; } } /* ===================================================================== Hero ===================================================================== */ .hero { padding: 48px 0 40px; position: relative; } .hero-grilla { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; } .sobre { font: 700 15px/1.3 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-bottom: 16px; } .tema-rosa .sobre { color: var(--titulo); } h1 { font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.02em; } .hero-segmento h1 { text-transform: uppercase; font-size: clamp(2.3rem, 5.6vw, 4.4rem); } h1 .linea, h1 .sobre { display: block; } .acento { color: var(--acento); } h1 .acento, h2 .acento { background: linear-gradient(90deg, var(--acento), var(--acento-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .bajada { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--texto-2); max-width: 34em; margin-top: 20px; } .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero-visual { position: relative; --px: 0; --py: 0; } .visual-svg { width: 100%; max-width: 540px; margin-inline: auto; overflow: visible; } .visual-svg .frasco-entra { cursor: pointer; } .ejemplo { text-align: center; margin-top: 4px; font-size: 13px; color: var(--texto-2); } /* Sello que gira junto al frasco */ .sello-gira { position: absolute; left: max(0px, calc(50% - 300px)); top: -2%; width: clamp(78px, 10vw, 120px); height: auto; overflow: visible; color: var(--titulo); } .sello-gira .sello-texto { transform-origin: 60px 60px; animation: girar 18s linear infinite; } .sello-gira text { font: 700 10px var(--f-titulo); fill: currentColor; } .sello-gira circle { fill: var(--acento); } .sello-gira path { stroke: var(--acento-tinta); } /* Capas del visual: se mueven distinto según el puntero, para dar profundidad */ .capa-1, .capa-2, .capa-3, .flota-a, .flota-b, .pop { transform-box: fill-box; transform-origin: center; } /* El frasco se mece desde su base, apoyado en el podio */ .frasco-entra { transform-box: fill-box; transform-origin: 50% 100%; } .capa-1 { translate: calc(var(--px) * -9px) calc(var(--py) * -9px); } .capa-2 { translate: calc(var(--px) * 7px) calc(var(--py) * 7px); } .capa-3 { translate: calc(var(--px) * 20px) calc(var(--py) * 20px); } .capa-1, .capa-2, .capa-3 { transition: translate .6s var(--suave); } .flota-a { animation: flotar 7s ease-in-out infinite; } .flota-b { animation: flotar 9s ease-in-out -3s infinite reverse; } .frasco-entra { animation: mece 6s ease-in-out infinite; } .aura { transform-box: fill-box; transform-origin: center; animation: respira 5s ease-in-out infinite; } @keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes mece { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } } @keyframes respira { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } } /* Entrada del hero. Con pantalla de carga es una coreografía completa; al llegar desde otra página solo entra el texto (el frasco viene viajando). */ html.js:not(.listo) .hero h1 > span, html.js:not(.listo) .hero-texto > :not(h1), html.js.con-intro:not(.listo) :is(.pop, .frasco-entra, .trazo, .halo, .sello-gira, .ejemplo) { opacity: 0; } html.js.listo .hero h1 > span { animation: linea-sube .85s var(--suave) both; } html.js.listo .hero h1 > span:nth-child(1) { animation-delay: .05s; } html.js.listo .hero h1 > span:nth-child(2) { animation-delay: .17s; } html.js.listo .hero h1 > span:nth-child(3) { animation-delay: .29s; } html.js.listo .hero h1 > span:nth-child(4) { animation-delay: .41s; } html.js.listo .hero-texto > :not(h1) { animation: aparece .8s var(--suave) both; } html.js.listo .hero-texto > .sobre { animation-delay: 0s; } html.js.listo .hero-texto > .bajada { animation-delay: .45s; } html.js.listo .hero-texto > .acciones { animation-delay: .6s; } html.js.listo:not(.navega) .frasco-entra { animation: frasco-cae 1s var(--rebote) .15s both, mece 6s ease-in-out 1.2s infinite; } html.js.listo:not(.navega) .trazo { animation: dibuja 1.2s cubic-bezier(.6, 0, .2, 1) .25s backwards; } html.js.listo:not(.navega) .trazo-2 { animation-delay: .55s; } html.js.listo:not(.navega) .halo { animation: aparece-halo 1.2s ease .6s backwards; } html.js.listo:not(.navega) .pop { animation: pop-entra .7s var(--rebote) both; animation-delay: .7s; } html.js.listo:not(.navega) .flota-a.pop { animation: flotar 7s ease-in-out infinite, pop-entra .7s var(--rebote) .7s both; } html.js.listo:not(.navega) .flota-b.pop { animation: flotar 9s ease-in-out -3s infinite reverse, pop-entra .7s var(--rebote) .7s both; } html.js.listo:not(.navega) .pop-1 { animation-delay: 0s, .55s; } html.js.listo:not(.navega) .pop-2 { animation-delay: -3s, .63s; } html.js.listo:not(.navega) .pop-3 { animation-delay: -3s, .71s; } html.js.listo:not(.navega) .pop-4 { animation-delay: 0s, .79s; } html.js.listo:not(.navega) .pop-5 { animation-delay: 0s, .87s; } html.js.listo:not(.navega) .pop-6 { animation-delay: .95s; } html.js.listo:not(.navega) .flota-a.pop-6 { animation-delay: 0s, .95s; } html.js.listo:not(.navega) .pop-7 { animation-delay: 1.03s; } html.js.listo:not(.navega) .pop-8 { animation-delay: 1.11s; } html.js.listo:not(.navega) .flota-b.pop-8 { animation-delay: -3s, 1.11s; } html.js.listo:not(.navega) :is(.sello-gira, .ejemplo) { animation: pop-entra .7s var(--rebote) 1.2s both; } @keyframes linea-sube { from { opacity: 0; translate: 0 70%; clip-path: inset(0 -5% 100% -5%); } to { opacity: 1; translate: 0 0; clip-path: inset(-15% -5% -15% -5%); } } @keyframes aparece { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } } @keyframes aparece-halo { from { opacity: 0; } } @keyframes pop-entra { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } } @keyframes dibuja { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } @keyframes frasco-cae { from { opacity: 0; transform: translateY(-90px) rotate(-16deg) scale(.78); } to { opacity: 1; transform: none; } } /* Chispas: cápsulas que saltan al tocar el frasco o al enviar el formulario */ .chispa { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; width: 46px; height: 20px; background: var(--capsula-1) center / contain no-repeat; } .chispa-2 { background-image: var(--capsula-2); } .chispa-3 { background-image: var(--capsula-3); } .chispa-4 { background-image: var(--capsula-4); } .chispa-5 { background-image: var(--capsula-5); } .chispa-6 { background-image: var(--capsula-6); } /* ===================================================================== Cinta de palabras ===================================================================== */ .cinta-texto { overflow: hidden; padding: 18px 0; margin: 6px -3vw 0; rotate: -1.2deg; background: var(--panel); border-block: 1px solid var(--panel-borde); } .cinta-pista { display: flex; width: max-content; animation: corre 32s linear infinite; } .cinta-texto:hover .cinta-pista { animation-play-state: paused; } .cinta-item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; font: 800 clamp(1.15rem, 2.2vw, 1.8rem)/1 var(--f-titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--titulo); } .cinta-item .pildora { font-size: .95em; rotate: -18deg; } @keyframes corre { to { transform: translateX(-50%); } } /* ===================================================================== Franja de respaldo ===================================================================== */ .franja { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); } .franja li { display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px; border-left: 1px solid var(--panel-borde); } .franja li:first-child { border-left: 0; } .franja li:nth-child(1) { --tono: var(--tono-1); } .franja li:nth-child(2) { --tono: var(--tono-5); } .franja li:nth-child(3) { --tono: var(--tono-3); } .franja li:nth-child(4) { --tono: var(--tono-2); } .franja .icono { width: 30px; height: 30px; color: var(--tono); transition: rotate .5s var(--rebote), scale .5s var(--rebote); } .franja li:hover .icono { rotate: -10deg; scale: 1.2; } .franja span { font-size: 14.5px; line-height: 1.35; color: var(--texto-2); } .franja i { font-style: normal; } .franja b { display: block; font: 800 15px/1.2 var(--f-titulo); color: var(--titulo); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; } /* ===================================================================== Secciones y aparición al hacer scroll ===================================================================== */ .seccion { padding: clamp(56px, 8vw, 104px) 0; position: relative; } .seccion-panel { background: linear-gradient(180deg, transparent, var(--panel) 18%, var(--panel) 82%, transparent); } .seccion h2 { font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.015em; max-width: 18em; } .seccion h3 { font-weight: 700; font-size: 1.2rem; } /* Cápsulas decorativas en el margen de algunas secciones */ #publicos::before, #proceso::before, .hablemos::before, .idea::after, #casos::before { content: ""; position: absolute; pointer-events: none; width: 132px; height: 58px; background: var(--c) center / contain no-repeat; animation: flotar 8s ease-in-out infinite; } #publicos::before { --c: var(--capsula-2); top: 70px; right: 5%; rotate: -24deg; } #proceso::before { --c: var(--capsula-3); top: 64px; right: 9%; rotate: 18deg; animation-delay: -2s; } .hablemos::before { --c: var(--capsula-5); top: 40px; left: 46%; rotate: -14deg; animation-delay: -4s; } .idea::after { --c: var(--capsula-4); bottom: 40px; left: 3%; rotate: 28deg; scale: .7; animation-delay: -5s; } #casos::before { --c: var(--capsula-6); top: 70px; right: 7%; rotate: 32deg; scale: .8; animation-delay: -1s; } .tarjetas { display: grid; gap: 20px; margin-top: 40px; } /* Cada tarjeta toma un color de la paleta según su posición */ :is(.tarjetas, .ciclo, .etapas) > :nth-child(6n+1) { --tono: var(--tono-1); } :is(.tarjetas, .ciclo, .etapas) > :nth-child(6n+2) { --tono: var(--tono-2); } :is(.tarjetas, .ciclo, .etapas) > :nth-child(6n+3) { --tono: var(--tono-3); } :is(.tarjetas, .ciclo, .etapas) > :nth-child(6n+4) { --tono: var(--tono-4); } :is(.tarjetas, .ciclo, .etapas) > :nth-child(6n+5) { --tono: var(--tono-5); } :is(.tarjetas, .ciclo, .etapas) > :nth-child(6n+6) { --tono: var(--tono-6); } .numero { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 800 18px/1 var(--f-titulo); color: var(--acento-tinta); background: var(--tono, var(--acento)); transition: rotate .5s var(--rebote), scale .5s var(--rebote); } :is(.punto, .ciclo > li, .etapas > li):hover .numero { rotate: -12deg; scale: 1.15; } /* Estado oculto antes de entrar en pantalla */ html.js :is( .seccion .sobre, .seccion h2:not(.oculto), .seccion .bajada, .tarjetas > *, .ciclo > li, .etapas > li, .cifras > li, .versus-col, .seccion blockquote, .lista-check li, .planta-fotos .marco, .idea-foto, .faq details, .formulario, .hablemos-texto > *, .franja li, .otros a, .nota, .respaldo, .seccion-texto p, .seccion-texto h1, .pie-fila > * ):not(.visible) { opacity: 0; } html.js .visible { animation: aparece .75s var(--suave) both; animation-delay: var(--retardo, 0ms); } html.js :is(.seccion h2, .lista-check li, .seccion blockquote).visible { animation-name: desliza; } html.js :is(.tarjetas > *, .ciclo > li, .etapas > li, .versus-col, .cifras > li, .franja li, .otros a, .formulario).visible { animation-name: salta; animation-duration: .8s; animation-timing-function: var(--rebote); } html.js :is(.planta-fotos .marco, .idea-foto).visible { animation-name: destapa; animation-duration: 1s; animation-timing-function: var(--telon); } @keyframes desliza { from { opacity: 0; translate: -34px 0; } to { opacity: 1; translate: 0 0; } } @keyframes salta { from { opacity: 0; translate: 0 48px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes destapa { from { opacity: 1; clip-path: inset(0 100% 0 0 round 24px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 24px); } } /* Brillo que sigue al puntero dentro de las tarjetas */ .publico, .punto, .ciclo > li, .formato, .caso, .versus-si { position: relative; overflow: hidden; } :is(.publico, .punto, .ciclo > li, .formato, .caso, .versus-si)::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--tono, var(--acento)) 24%, transparent), transparent 70%); } :is(.publico, .punto, .ciclo > li, .formato, .caso, .versus-si):hover::after { opacity: 1; } /* Marco de imagen: brilla mientras carga y después la imagen se asienta */ .marco { display: block; position: relative; overflow: hidden; background: var(--panel); } html.js .marco::before { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .22) 50%, transparent 75%); animation: barrido 1.3s linear infinite; } html.js .marco.lista::before { animation: none; opacity: 0; } html.js .marco img { opacity: 0; scale: 1.1; transition: opacity .6s ease, scale 1.2s var(--suave), transform .7s var(--suave); } html.js .marco.lista img { opacity: 1; scale: 1; } @keyframes barrido { to { translate: 100% 0; } } /* La idea central */ .idea-grilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .idea-foto { margin: 0; border-radius: var(--radio); box-shadow: var(--sombra); rotate: -2deg; transition: rotate .5s var(--rebote); } .idea-foto:hover { rotate: 0deg; } .idea-foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; } .versus-col { border-radius: var(--radio); padding: 24px; border: 1px solid var(--panel-borde); } .versus-col h3 { font-size: 1.05rem; margin-bottom: 14px; } .versus-col h3 span { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; background: var(--acento); color: var(--acento-tinta); border-radius: 999px; padding: 4px 10px; margin-left: 6px; vertical-align: middle; } .versus-col li { display: flex; gap: 10px; padding: 7px 0; font-size: 16px; } .versus-no { color: var(--texto-2); border-style: dashed; } .versus-no h3 { color: var(--texto-2); } .versus-no li::before { content: "–"; flex: none; width: 20px; } .versus-si { background: var(--panel); border-color: var(--acento); transition: transform .3s var(--rebote); } .versus-si:hover { transform: translateY(-4px) rotate(.6deg); } .versus-si .icono { color: var(--acento); margin-top: 2px; } blockquote { margin: 30px 0 0; padding-left: 20px; border-left: 4px solid var(--raya); font: 700 clamp(1.15rem, 2vw, 1.45rem)/1.3 var(--f-titulo); color: var(--titulo); } /* Públicos */ .tarjetas-publico { grid-template-columns: repeat(3, 1fr); } .publico { display: flex; flex-direction: column; gap: 10px; text-decoration: none; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 28px 26px; transition: transform .3s var(--suave), border-color .25s ease, box-shadow .3s ease; } .publico:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); border-color: var(--tono); box-shadow: 0 22px 44px color-mix(in srgb, var(--tono) 24%, transparent); } .publico-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: color-mix(in srgb, var(--tono) 18%, transparent); color: var(--tono); margin-bottom: 6px; transition: rotate .5s var(--rebote), scale .5s var(--rebote), border-radius .4s ease; } .publico:hover .publico-icono { rotate: -8deg; scale: 1.12; border-radius: 50%; } .publico-icono .icono { width: 28px; height: 28px; } .publico p { color: var(--texto-2); font-size: 16px; flex: 1; } .publico-ir { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--f-titulo); color: var(--tono); margin-top: 8px; } .publico-ir .icono { transition: translate .3s var(--rebote); } .publico:hover .publico-ir .icono { translate: 7px 0; } .publico.publico-rosa { --tono: #a8234c; background: linear-gradient(135deg, #fbe6ea, #f4c3cf); border-color: #e9c98a; } .publico-rosa h3 { color: #8a0f3c; } .publico-rosa p { color: #7d2a47; } /* Ciclo */ .ciclo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .ciclo > li { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 26px 24px; transition: transform .3s var(--rebote), border-color .25s ease; } .ciclo > li:hover { transform: translateY(-6px); border-color: var(--tono); } .ciclo h3 { margin: 16px 0 8px; } .ciclo > li > p { color: var(--texto-2); font-size: 16px; min-height: 3.1em; } .ciclo ul { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--panel-borde); } .ciclo ul li { display: flex; gap: 10px; font-size: 15px; padding: 5px 0; } .ciclo ul .icono { color: var(--tono); margin-top: 2px; } .cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } .cifras li { display: flex; align-items: center; gap: 18px; } .cifras li:nth-child(1) { --tono: var(--tono-1); } .cifras li:nth-child(2) { --tono: var(--tono-3); } .cifras li:nth-child(3) { --tono: var(--tono-5); } .cifras b { font: 900 clamp(2.8rem, 5.4vw, 4.4rem)/1 var(--f-titulo); color: var(--tono); font-variant-numeric: tabular-nums; } .cifras span { color: var(--texto-2); font-size: 15.5px; max-width: 15em; } /* Formatos */ .tarjetas-formato { grid-template-columns: repeat(3, 1fr); } .formato { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); transition: transform .3s var(--rebote), border-color .25s ease, box-shadow .3s ease; } .formato:hover { transform: translateY(-8px); border-color: var(--tono); box-shadow: 0 22px 44px color-mix(in srgb, var(--tono) 20%, transparent); } .formato img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .formato:hover img { transform: scale(1.07); } .formato-texto { padding: 22px 24px 26px; } .formato-texto p { color: var(--texto-2); font-size: 15.5px; margin-top: 8px; } .formato-texto .ideal { color: var(--texto); } .ideal span { font: 700 12px/1 var(--f-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--tono); display: block; margin-bottom: 4px; } /* Etapas: la línea de cada paso se dibuja al aparecer */ .etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; margin-top: 40px; } .etapas li { position: relative; padding: 28px 4px 8px; } .etapas li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: var(--tono); transform-origin: left; } html.js .etapas li:not(.visible)::before { transform: scaleX(0); } html.js .etapas li.visible::before { animation: llena .9s var(--telon) both; animation-delay: calc(var(--retardo, 0ms) + 250ms); } .etapas h3 { margin: 14px 0 8px; } .etapas p { color: var(--texto-2); font-size: 16px; } /* Planta */ .planta-grilla { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .lista-check { margin-top: 26px; } .lista-check li { display: flex; gap: 12px; padding: 9px 0; font-size: 17px; border-bottom: 1px solid var(--panel-borde); transition: translate .25s ease; } .lista-check li:hover { translate: 6px 0; } .lista-check .icono { color: var(--acento); margin-top: 3px; } .lista-doble { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } .planta-fotos { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 14px; } .planta-fotos .marco { border-radius: var(--radio); } .planta-fotos img { width: 100%; height: 100%; object-fit: cover; } .planta-fotos .marco:hover img { transform: scale(1.06); } .foto-a { grid-column: 1 / 3; aspect-ratio: 16 / 8; } .foto-b, .foto-c { aspect-ratio: 4 / 3; } /* Casos */ .tarjetas-caso { grid-template-columns: repeat(2, 1fr); } .caso { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 16px; transition: transform .3s var(--rebote), border-color .25s ease; } .caso:hover { transform: translateY(-5px); border-color: var(--tono); } .caso .marco { width: 150px; height: 150px; border-radius: 18px; } .caso img { width: 100%; height: 100%; object-fit: cover; } .caso:hover img { transform: scale(1.1) rotate(2deg); } .caso p { color: var(--texto-2); font-size: 15.5px; margin-top: 6px; } .caso .etiqueta { display: inline-block; font: 700 11.5px/1.2 var(--f-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--tono); background: color-mix(in srgb, var(--tono) 15%, transparent); border-radius: 999px; padding: 5px 11px; margin: 0 0 8px; } .nota { display: flex; gap: 10px; align-items: center; margin-top: 24px; color: var(--texto-2); font-size: 15px; } .nota .icono { color: var(--acento); } /* Landings por público */ .tarjetas-punto { grid-template-columns: repeat(3, 1fr); margin-top: 0; } .punto { background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 30px 28px; transition: transform .3s var(--rebote), border-color .25s ease; } .punto:hover { transform: translateY(-6px); border-color: var(--tono); } .punto h3 { font-size: 1.35rem; font-weight: 800; margin: 18px 0 10px; } .punto p { color: var(--texto-2); font-size: 16.5px; } .incluye-grilla { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .cita-grande { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); } .otros { display: flex; flex-wrap: wrap; gap: 12px; } .otros a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; border: 1px solid var(--panel-borde); border-radius: 999px; padding: 12px 20px; transition: transform .3s var(--rebote), border-color .2s ease, color .2s ease, background .2s ease; } .otros a:nth-child(5n+1) { --tono: var(--tono-1); } .otros a:nth-child(5n+2) { --tono: var(--tono-2); } .otros a:nth-child(5n+3) { --tono: var(--tono-3); } .otros a:nth-child(5n+4) { --tono: var(--tono-4); } .otros a:nth-child(5n+5) { --tono: var(--tono-5); } .otros a:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--tono); color: var(--tono); background: color-mix(in srgb, var(--tono) 10%, transparent); } .otros .icono { color: var(--tono); } .seccion-otros { padding-top: 0; } /* Preguntas frecuentes */ .faq { margin-top: 32px; display: grid; gap: 12px; } .faq details { border: 1px solid var(--panel-borde); border-radius: 20px; padding: 0 24px; background: var(--panel); transition: border-color .3s ease; } .faq details:hover, .faq details[open] { border-color: var(--acento); } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; font: 700 1.1rem/1.3 var(--f-titulo); color: var(--titulo); padding: 20px 0; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--acento); background: color-mix(in srgb, var(--acento) 16%, transparent); transition: rotate .45s var(--rebote), background .3s ease, color .3s ease; } .faq details[open] summary::after { rotate: 135deg; background: var(--acento); color: var(--acento-tinta); } .faq details p { color: var(--texto-2); padding: 0 40px 24px 0; } @supports (interpolate-size: allow-keywords) { .faq details { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--suave), content-visibility .45s allow-discrete; } .faq details[open]::details-content { block-size: auto; } } /* ===================================================================== Hablemos ===================================================================== */ .hablemos { padding-bottom: clamp(48px, 6vw, 80px); } .hablemos-grilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .seccion .hablemos-titulo { font-weight: 900; max-width: none; font-size: clamp(3rem, 7vw, 5.4rem); letter-spacing: -.02em; } .hablemos-titulo small { display: block; font-size: .42em; font-weight: 800; letter-spacing: -.01em; margin-top: 6px; } .correo-grande { display: inline-block; margin-top: 22px; text-decoration: none; overflow-wrap: anywhere; font: 800 clamp(1.5rem, 3.2vw, 2.4rem)/1.1 var(--f-titulo); color: var(--acento); background: linear-gradient(var(--acento), var(--acento)) no-repeat 0 100% / 0 3px; transition: background-size .45s var(--suave); padding-bottom: 6px; } .correo-grande:hover { background-size: 100% 3px; } .lista-dato { margin-top: 28px; } .lista-dato li { display: flex; gap: 12px; align-items: center; padding: 6px 0; color: var(--texto-2); font-size: 16px; } .lista-dato .icono { color: var(--acento); } .formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: 28px; padding: clamp(20px, 3vw, 32px); } .campo-ancho { grid-column: 1 / -1; } .campo label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 7px; color: var(--texto); } .opcional { font-weight: 400; color: var(--texto-2); } .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select, .campo textarea { width: 100%; font: 400 16px/1.3 var(--f-texto); color: #0b1f4d; background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 14px 14px; transition: border-color .2s ease, box-shadow .25s ease, translate .25s var(--rebote); } .campo textarea { resize: vertical; min-height: 96px; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); translate: 0 -2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 28%, transparent); } .tema-rosa .campo input, .tema-rosa .campo select, .tema-rosa .campo textarea { border-color: #ecc6cf; color: #5d0f2d; } .formulario .campo .mal { border-color: #ff6b5e; animation: sacude .4s ease; } .error-campo { color: #ffb4ac; font-size: 14px; margin-top: 6px; animation: aparece .3s ease both; } .tema-rosa .error-campo { color: #b3261e; } .acepta { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .acepta .error-campo { flex-basis: 100%; margin-top: 0; } .acepta input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--acento); } .acepta label { flex: 1; font-weight: 400; font-size: 15px; color: var(--texto-2); margin: 0; } .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @keyframes sacude { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } } .cargador { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(4, 32, 79, .25); border-top-color: var(--acento-tinta); animation: girar .8s linear infinite; } .enviando .cargador { display: inline-block; } .enviando { pointer-events: none; opacity: .85; } .form-estado { margin-top: 14px; font-weight: 500; min-height: 1.5em; } .form-estado.ok { color: #7ff0c0; animation: salta .6s var(--rebote) both; } .form-estado.falla { color: #ffb4ac; } .tema-rosa .form-estado.ok { color: #1b7a4b; } .tema-rosa .form-estado.falla { color: #b3261e; } /* ===================================================================== Pie ===================================================================== */ .pie { border-top: 2px solid var(--raya); padding: 36px 0 28px; } .respaldo { display: flex; align-items: center; gap: 22px; background: var(--panel); border: 1px solid var(--panel-borde); border-radius: var(--radio); padding: 22px 26px; } .respaldo-icono { color: var(--acento); padding-right: 22px; border-right: 1px solid var(--panel-borde); } .respaldo-icono .icono { width: 54px; height: 54px; } .respaldo p { font-size: 17px; color: var(--texto-2); line-height: 1.4; } .respaldo strong { display: block; font: 800 1.35rem/1.2 var(--f-titulo); color: var(--titulo); text-transform: uppercase; letter-spacing: .02em; } .respaldo b { display: block; color: var(--texto); font-size: 18px; } .pie-fila { display: grid; grid-template-columns: 1.2fr 1.4fr auto; gap: 28px; align-items: start; margin-top: 28px; } .pie-dato { display: flex; gap: 12px; color: var(--texto-2); font-size: 15.5px; } .pie-dato .icono { color: var(--acento); width: 24px; height: 24px; } .pie-dato strong { color: var(--texto); } .pie-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; } .pie-nav a { text-decoration: none; color: var(--texto-2); font-size: 15.5px; padding: 4px 0; transition: color .2s ease, translate .25s var(--rebote); } .pie-nav a:hover { color: var(--acento); translate: 0 -3px; } .pie-sitio { font: 800 1.5rem/1 var(--f-titulo); color: var(--acento); text-decoration: none; } .pie-legal { margin-top: 26px; color: var(--texto-2); font-size: 14px; } /* Página de texto */ .seccion-texto h2 { font-size: 1.3rem; margin: 34px 0 10px; } .seccion-texto p { color: var(--texto-2); } .seccion-texto a { color: var(--acento); } .titulo-chico { font-size: clamp(2.2rem, 5vw, 3.4rem); } /* ===================================================================== Pantallas medianas y chicas ===================================================================== */ @media (max-width: 1000px) { .menu-boton { display: block; } .menu { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--fondo); border-bottom: 1px solid var(--panel-borde); padding: 10px 20px 22px; max-height: calc(100vh - 72px); overflow-y: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--telon), visibility 0s .45s; } .menu.abierto { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; } .menu.abierto > * { animation: aparece .5s var(--suave) both; } .menu.abierto > :nth-child(1) { animation-delay: .08s; } .menu.abierto > :nth-child(2) { animation-delay: .14s; } .menu.abierto > :nth-child(3) { animation-delay: .2s; } .menu.abierto > :nth-child(4) { animation-delay: .26s; } .menu.abierto > :nth-child(5) { animation-delay: .32s; } .menu.abierto > :nth-child(6) { animation-delay: .38s; } .menu-enlace { text-align: left; padding: 16px 4px; font-size: 18px; background-position: 4px calc(100% - 8px); } .menu-enlace:hover, .menu-enlace.activo { background-size: 40px 2px; } .menu-panel { position: static; display: none; box-shadow: none; border: 0; padding: 0 0 8px 8px; min-width: 0; background: none; visibility: visible; opacity: 1; transform: none; transition: none; } .tema-rosa .menu-panel { background: none; } .menu-grupo.abierto .menu-panel { display: block; } .boton-chico { margin: 12px 0 0; font-size: 17px; padding: 16px 24px; } .hero-grilla, .idea-grilla, .planta-grilla, .hablemos-grilla, .incluye-grilla { grid-template-columns: 1fr; } .hero-visual { margin-top: 8px; } .visual-svg { max-width: 380px; } .franja { grid-template-columns: 1fr 1fr; } .franja li:nth-child(3) { border-left: 0; } .franja li:nth-child(n+3) { border-top: 1px solid var(--panel-borde); } .ciclo { grid-template-columns: 1fr 1fr; } .tarjetas-publico, .tarjetas-formato, .etapas, .tarjetas-punto { grid-template-columns: 1fr 1fr; } .tarjetas-caso { grid-template-columns: 1fr; } .pie-fila { grid-template-columns: 1fr; } .hablemos::before { left: auto; right: 6%; } } @media (max-width: 640px) { /* Teléfono: todo pensado para ahorrar alto. Menos aire entre secciones, listas compactas en vez de tarjetas altas, y carruseles que se deslizan de lado donde hay muchas tarjetas con foto. */ body { font-size: 16px; } .ancho, .ancho-angosto { width: calc(100% - 32px); } .logo img { width: 132px; } .logo-icono { width: 36px; height: 36px; } .barra-fila { min-height: 62px; } .barra.compacta .barra-fila { min-height: 54px; } .seccion { padding: 38px 0; } .seccion h2 { font-size: 1.65rem; } .sobre { font-size: 12.5px; margin-bottom: 10px; } .bajada { font-size: 1.02rem; margin-top: 12px; } .tarjetas, .ciclo, .etapas { margin-top: 22px; gap: 12px; } blockquote { margin-top: 20px; font-size: 1.05rem; } /* Hero */ .hero { padding: 18px 0 22px; } h1 { font-size: 2.3rem; } .hero-segmento h1 { font-size: 2.05rem; } .acciones { flex-wrap: nowrap; gap: 10px; margin-top: 20px; } .acciones .boton { flex: 1 1 0; min-width: 0; font-size: 15px; padding: 15px 12px; white-space: nowrap; } .acciones .boton .icono { display: none; } .hero-visual { margin-top: 4px; } .visual-svg { max-width: 232px; } .sello-gira { width: 70px; left: max(0px, calc(50% - 168px)); top: 2%; } .ejemplo { font-size: 12px; margin-top: 0; } /* Respaldo: cuatro datos en dos filas, sin las frases largas */ .franja { grid-template-columns: 1fr 1fr; margin-top: 18px; border-radius: 18px; } .franja li { padding: 12px 12px; gap: 10px; align-items: center; border-top: 0; border-left: 0; } .franja li:nth-child(even) { border-left: 1px solid var(--panel-borde); } .franja li:nth-child(n+3) { border-top: 1px solid var(--panel-borde); } .franja .icono { width: 24px; height: 24px; } .franja b { font-size: 12.5px; margin-bottom: 1px; } .franja span { font-size: 12.5px; } .detalle-largo { display: none; } .cinta-texto { padding: 12px 0; margin-top: 0; } .cinta-item { font-size: 1rem; gap: 14px; padding-right: 14px; } /* La idea central */ .idea-grilla { gap: 20px; } .idea-foto img { aspect-ratio: 16 / 8; } .versus { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .versus-col { padding: 14px 12px; border-radius: 18px; } .versus-col h3 { font-size: .9rem; margin-bottom: 8px; } .versus-col h3 span { display: block; width: max-content; margin: 6px 0 0; font-size: 10.5px; } .versus-col li { font-size: 13.5px; padding: 4px 0; gap: 6px; line-height: 1.3; } .versus-no li::before { width: 10px; } .versus-col .icono { width: 1em; height: 1em; } /* Públicos: filas compactas, todas a la vista */ .tarjetas-publico { grid-template-columns: 1fr; gap: 10px; } .publico { display: grid; grid-template-columns: 44px 1fr 20px; grid-template-areas: "icono titulo ir" "icono texto ir"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 14px; border-radius: 18px; } .publico-icono { grid-area: icono; width: 44px; height: 44px; border-radius: 14px; margin: 0; } .publico-icono .icono { width: 22px; height: 22px; } .publico h3 { grid-area: titulo; font-size: 1.02rem; align-self: end; } .publico p { grid-area: texto; font-size: 13.5px; line-height: 1.3; align-self: start; } .publico-ir { grid-area: ir; margin: 0; font-size: 0; gap: 0; } .publico-ir .icono { width: 20px; height: 20px; } /* Carruseles: se deslizan de lado y dejan asomar la tarjeta siguiente */ .ciclo, .tarjetas-formato, .tarjetas-caso { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; } :is(.ciclo, .tarjetas-formato, .tarjetas-caso)::-webkit-scrollbar { display: none; } .ciclo > li, .tarjetas-formato > *, .tarjetas-caso > * { flex: 0 0 78%; scroll-snap-align: start; } .tarjetas-caso > * { flex-basis: 86%; } .ciclo > li { padding: 18px 18px; } .ciclo h3 { margin: 10px 0 4px; } .ciclo > li > p { min-height: 0; font-size: 14.5px; } .ciclo ul { margin-top: 10px; padding-top: 10px; } .ciclo ul li { font-size: 14px; padding: 3px 0; } .numero { width: 36px; height: 36px; font-size: 15px; } .formato img { aspect-ratio: 16 / 10; } .formato-texto { padding: 14px 16px 16px; } .formato-texto p { font-size: 14px; margin-top: 5px; } .caso { grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; align-items: start; } .caso .marco { width: 84px; height: 84px; border-radius: 14px; } .caso p { font-size: 13.5px; line-height: 1.35; margin-top: 4px; } .caso h3 { font-size: 1rem; } .nota { margin-top: 12px; font-size: 13px; } /* Cifras: las tres en una fila */ .cifras { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; } .cifras li { flex-direction: column; align-items: flex-start; gap: 4px; } .cifras b { font-size: 2.1rem; } .cifras span { font-size: 12.5px; line-height: 1.3; } /* Etapas y puntos: número a la izquierda, texto a la derecha */ .etapas, .tarjetas-punto { grid-template-columns: 1fr; gap: 10px; } .etapas li, .punto { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; } .etapas li { padding: 14px 0 2px; } .etapas li::before { height: 3px; } .punto { padding: 16px 16px; border-radius: 18px; } .etapas .numero, .punto .numero { grid-row: 1 / 3; } .etapas h3, .punto h3 { margin: 0; font-size: 1.02rem; align-self: center; } .etapas p, .punto p { grid-column: 2; font-size: 14px; line-height: 1.4; } /* Planta */ .planta-grilla, .incluye-grilla { gap: 20px; } .lista-check { margin-top: 14px; } .lista-check li { font-size: 15px; padding: 6px 0; } .lista-doble { grid-template-columns: 1fr; } .planta-fotos { grid-template-columns: 1fr 1fr; gap: 8px; } .foto-a { aspect-ratio: 16 / 7; } .foto-b, .foto-c { aspect-ratio: 4 / 3; } .cita-grande { font-size: 1.15rem; } .otros { gap: 8px; } .otros a { padding: 9px 14px; font-size: 14.5px; } /* Preguntas */ .faq { margin-top: 18px; gap: 8px; } .faq details { padding: 0 16px; border-radius: 16px; } .faq summary { font-size: 1rem; padding: 14px 0; gap: 12px; } .faq summary::after { width: 30px; height: 30px; font-size: 1.35rem; } .faq details p { padding: 0 0 16px; font-size: 14.5px; } /* Hablemos */ .hablemos-grilla { gap: 20px; } .seccion .hablemos-titulo { font-size: 2.7rem; } .correo-grande { margin-top: 12px; font-size: 1.35rem; } .lista-dato { margin-top: 12px; } .lista-dato li { font-size: 14px; padding: 3px 0; } .formulario { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 22px; } .formulario .campo { grid-column: 1 / -1; } .formulario .campo:has(select) { grid-column: auto; } .campo label { font-size: 13.5px; margin-bottom: 4px; } .campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select, .campo textarea { padding: 12px 12px; border-radius: 12px; } .campo textarea { min-height: 70px; } .acepta label { font-size: 13.5px; } /* Pie */ .pie { padding: 24px 0 20px; } .respaldo { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; } .respaldo-icono { padding-right: 14px; } .respaldo-icono .icono { width: 38px; height: 38px; } .respaldo p { font-size: 14px; } .respaldo strong { font-size: 1.05rem; } .respaldo b { font-size: 14.5px; } .pie-fila { gap: 16px; margin-top: 18px; } .pie-dato, .pie-nav a { font-size: 14px; } .pie-nav { gap: 4px 16px; } .pie-legal { margin-top: 16px; font-size: 12.5px; } #publicos::before, #proceso::before, .hablemos::before, .idea::after, #casos::before { width: 58px; height: 26px; top: 12px; right: 4%; opacity: .85; } .idea::after { top: auto; bottom: 8px; left: auto; } .hablemos::before { left: auto; } } /* ===================================================================== Movimiento: deriva del fondo y respeto por quien pide menos animación ===================================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } body::before { animation: deriva 24s ease-in-out infinite alternate; } body::after { animation: deriva 30s ease-in-out infinite alternate-reverse; } @keyframes deriva { to { transform: translate(-9vw, 12vh) scale(1.2); } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .cargador { animation: girar .8s linear infinite !important; } .cinta-texto { rotate: none; } }