/* Kreamos — hoja de estilos principal. Portada del diseño en /front (estilos inline → clases). */ /* Fuentes servidas desde el propio dominio (variables: un archivo cubre todos los grosores; subconjunto latino, incluye á é í ó ú ñ ü ¿ ¡). Se precargan en el . Licencia SIL Open Font License. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto en dos tramos (400–500 y 700–800), igual que los grosores que se cargaban de Google Fonts: así un 600 (título del formulario) se sigue viendo en 700 como en el diseño aprobado. Es el mismo archivo: se descarga una vez. */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/roboto-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(/assets/fonts/roboto-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Arial ajustada a las medidas de cada fuente (calculado de los archivos reales): mientras cargan las fuentes el texto ocupa casi lo mismo, así el cambio no mueve el diseño (CLS). */ @font-face { font-family: 'Roboto Fallback'; src: local('Arial'); size-adjust: 99.74%; ascent-override: 93.02%; descent-override: 24.48%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 105.97%; ascent-override: 91.42%; descent-override: 22.79%; line-gap-override: 0%; } :root { --o: #F29100; /* naranja marca */ --o2: #d98200; /* naranja hover / texto sobre blanco */ --o3: #a35f00; /* naranja oscuro */ --ink: #4d4d4d; /* titulares */ --tx: #444; /* texto corrido */ --mute: #8c8c8c; --bg2: #f5f5f5; --dk: #1a1a1a; --line: #e2e2e2; --r: 20px; --ease: cubic-bezier(.2, .7, .2, 1); --pad-x: max(24px, calc((100vw - 1200px) / 2 + 24px)); --hdr: 72px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 8px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: #fff; color: #555; font-family: Inter, 'Inter Fallback', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } a { color: var(--o2); } a:hover { color: var(--o3); } :focus-visible { outline: 2px solid var(--o2); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--dk); color: #fff; padding: 12px 18px; border-radius: 999px; font: 600 14px Inter, 'Inter Fallback', sans-serif; text-decoration: none; transition: top .2s; } .skip:focus { top: 12px; color: #fff; } /* ---------- Tipografía ---------- */ /* Bloque de título del hero: el

lleva sólo el titular (y el antetítulo con la keyword); el subtítulo es un

*/ .h1 { margin: 0; display: flex; flex-direction: column; gap: 20px; } .h1__main, .h1__sub { margin: 0; } .h1__kicker { display: block; margin-bottom: 14px; font: 600 14px/1.3 Inter, 'Inter Fallback', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--o3); } .h1__main { font: 700 var(--h1, clamp(38px, 4.4vw, 60px))/var(--h1lh, 1.02) Roboto, 'Roboto Fallback', sans-serif; text-transform: uppercase; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; } .h1__sub { font: 400 clamp(18px, 1.6vw, 22px)/1.35 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); } .h2 { margin: 0; font: 700 clamp(34px, 4vw, 52px)/1.04 Roboto, 'Roboto Fallback', sans-serif; text-transform: uppercase; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; } .lead { margin: 0; font: 400 clamp(20px, 2vw, 26px)/1.35 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); text-wrap: balance; } .p { margin: 0; font: 300 16px/1.75 Inter, 'Inter Fallback', sans-serif; color: var(--tx); text-wrap: pretty; } .p--lg { font-size: 17px; } .p--strong { font-weight: 500; color: var(--ink); } .hl { margin: 0; font: 500 17px/1.6 Inter, 'Inter Fallback', sans-serif; color: var(--o2); text-wrap: pretty; } /* Enlaces internos dentro del copy (enlazado interno, diapositiva 5 de la propuesta) */ .tlink { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-color: var(--o); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; } .tlink:hover { color: var(--o3); text-decoration-color: var(--o3); } .kicker { margin: 0; padding-top: 22px; background: linear-gradient(var(--o), var(--o)) 0 0/48px 3px no-repeat; font: 500 19px/1.45 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); text-wrap: pretty; } .bar { width: 48px; height: 3px; background: var(--o); } .mw-520 { max-width: 520px; } .mw-560 { max-width: 560px; } .mw-720 { max-width: 720px; } .mw-760 { max-width: 760px; } .mw-780 { max-width: 780px; } .mw-820 { max-width: 820px; } /* ---------- Layout ---------- */ .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .stack { display: flex; flex-direction: column; gap: var(--gap, 20px); } .sec { position: relative; padding: clamp(80px, 9vw, 120px) 0; } .sec--gray { background: var(--bg2); } .sec--orange { background: var(--o); } .sec--clip { overflow: hidden; } .sec--nt { padding-top: 0; } .sec--sb { padding-bottom: 56px; } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: start; } .split--end { align-items: end; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr)); gap: var(--gap, 16px); } .row { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 80px); align-items: center; } .row--rev { flex-direction: row-reverse; } /* 1.º en el HTML (texto) queda a la derecha en escritorio y arriba en móvil */ .col { flex: 1 1 var(--basis, 520px); min-width: 0; } /* ---------- Botones ---------- */ .btns { display: flex; flex-wrap: wrap; gap: 12px; } .btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 Inter, 'Inter Fallback', sans-serif; padding: 15.5px 26.5px; border-radius: 999px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease), box-shadow .3s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--o); color: #fff; } .btn--primary:hover { background: var(--o2); color: #fff; box-shadow: 0 12px 24px -12px rgba(242, 145, 0, .8); } .btn--outline { background: #fff; color: var(--ink); border-color: var(--o); } .btn--outline:hover { background: #fff6e8; color: var(--ink); } .btn--dark { background: var(--dk); color: #fff; padding: 14.5px 22.5px; } .btn--dark:hover { background: #000; color: #fff; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .7); } .btn--sm { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 11.5px 20.5px; } .btn .arr { display: inline-block; transition: transform .3s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .as { align-self: flex-start; } /* ---------- Tarjetas ---------- */ .card { background: var(--bg2); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .35); } .card--white { background: #fff; } .card--orange { background: var(--o); } .card--tight { gap: 10px; } .card--xl { padding: clamp(28px, 3vw, 40px); gap: 14px; } .card h3 { margin: 0; font: 700 20px/1.25 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); } .card p { margin: 0; font: 300 15px/1.65 Inter, 'Inter Fallback', sans-serif; color: var(--tx); } .card--tight p { line-height: 1.6; } .card--orange h3 { color: #fff; } .card--orange p { font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--dk); } .card .h3-o { color: var(--o2); } .card .h3-cap { font: 700 16px/1.2 Inter, 'Inter Fallback', sans-serif; letter-spacing: .1em; color: var(--o2); } .card h4 { margin: 0; font: 700 26px/1.1 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); } .card .step { font: 400 15px/1.55 Inter, 'Inter Fallback', sans-serif; color: var(--ink); } .num { font: 700 48px/1 Roboto, 'Roboto Fallback', sans-serif; color: transparent; -webkit-text-stroke: 1.2px var(--o); letter-spacing: -.02em; } .card--orange .num { -webkit-text-stroke-color: #fff; } .card--line { background: #fff; border: 1.5px solid var(--o); } /* Tarjetas de servicio (Home) */ .svc { background: var(--o); border-radius: var(--r); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .svc:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(163, 95, 0, .8); } .svc h3 { margin: 0; font: 700 26px/1.2 Roboto, 'Roboto Fallback', sans-serif; color: #fff; } .svc__claim { margin: 0; font: 600 16px/1.45 Inter, 'Inter Fallback', sans-serif; color: var(--dk); } .svc p { margin: 0; font: 400 15px/1.65 Inter, 'Inter Fallback', sans-serif; color: var(--dk); } .svc .btn { margin-top: auto; align-self: flex-start; } /* ---------- Placeholders de medios ---------- */ .ph { background: repeating-linear-gradient(135deg, #d6d6d6 0 12px, #e4e4e4 12px 24px); display: flex; align-items: center; justify-content: center; } .ph > span { font: 500 12px ui-monospace, Menlo, monospace; color: #555; background: #fff; padding: 6px 10px; border-radius: 4px; } .ph--dark { background: repeating-linear-gradient(135deg, #565656 0 12px, #626262 12px 24px); } .ph--dark > span { color: #eee; background: #333; } .ph--thumb { height: 160px; border-radius: 12px; background: repeating-linear-gradient(135deg, #dcdcdc 0 10px, #e8e8e8 10px 20px); overflow: hidden; } .ph--thumb > span { background: none; font-size: 11px; padding: 0; } .ph img, .ph video { width: 100%; height: 100%; object-fit: cover; } /* El diseño pide fotos y videos en blanco y negro: se aplica aquí, así pueden entregarse a color */ .ph--bn img, .ph--bn video { filter: grayscale(1); } /* Logos (assets/media): los de clientes se ven blancos sobre la franja naranja (requiere PNG con fondo transparente) */ .logo-ph:has(img) { border-color: transparent; } .logo-ph img { width: auto; height: auto; max-width: 80%; max-height: 44px; object-fit: contain; filter: brightness(0) invert(1); } .tool__logo:has(img) { border: 0; } .tool__logo img { width: 100%; height: 100%; object-fit: contain; } /* Plecas (diagonales naranja de marca). Son rectángulos inclinados con skewX: el ángulo y el grosor quedan fijos en cualquier ancho y todas las plecas son paralelas. (Con un clip-path en porcentajes, la inclinación variaba de 14° a 41° según la forma de la caja.) transform-origin = el borde al que está anclada la pleca, así ese borde nunca se mueve. Las animaciones de entrada usan la propiedad `translate`, que no pisa este `transform`. */ :root { --pleca-ang: 20deg; } .slash { position: absolute; background: var(--o); transform: skewX(var(--pleca-ang)); transform-origin: 0 0; } .deco { position: absolute; width: 90px; height: 60px; background: var(--o); clip-path: polygon(0 0, 45% 0, 100% 100%, 55% 100%); } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: #fff; } .hero__in { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 620px; } .hero__copy { flex: 1 1 580px; padding: clamp(56px, 7vw, 96px) 24px clamp(56px, 7vw, 96px) var(--pad-x); display: flex; flex-direction: column; justify-content: center; gap: 32px; } .hero__copy .p { line-height: 1.7; } .hero__media { flex: 1 1 600px; position: relative; min-height: 600px; } .hero__img { position: absolute; inset: 0; clip-path: polygon(42% 0, 100% 0, 100% 100%, 42% 100%, 0 50%); padding-left: 20%; } .hero__img:has(img, video) { padding-left: 0; } .hero .slash { width: clamp(34px, 9%, 64px); } .slash--a { top: 0; left: 30%; height: 40%; } /* anclada arriba: la base se corre a la derecha */ .slash--b { bottom: 0; left: 55%; height: 30%; transform-origin: 0 100%; } /* anclada abajo: la parte alta se corre a la izquierda */ /* ---------- Home: bandas y bloques ---------- */ .clients { background: var(--o); padding: 44px 0; } .clients .grid { --min: 160px; gap: 20px; } .logo-ph { height: 64px; border: 1px dashed rgba(255, 255, 255, .8); border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 500 12px ui-monospace, Menlo, monospace; color: #fff; transition: background-color .3s; } .logo-ph:hover { background: rgba(255, 255, 255, .12); } .what { position: relative; padding: 0 0 clamp(80px, 9vw, 120px); overflow: hidden; } .what__row { display: flex; flex-wrap: wrap; align-items: stretch; } .what__copy { flex: 1 1 480px; padding: 80px 24px clamp(80px, (100% - 920px) * 999, 200px) var(--pad-x); display: flex; flex-direction: column; gap: 20px; justify-content: center; } .what__media { flex: 1 1 440px; position: relative; min-height: 460px; background: #3b3b3b; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); } .what__media .ph { position: absolute; } .what__cards { position: relative; max-width: 1000px; margin: -120px auto 0; padding: 0 24px; --min: 340px; } .media-sq { flex: 1 1 var(--basis, 380px); position: relative; aspect-ratio: 1/1; max-width: var(--max, 480px); width: 100%; } .media-sq .ph { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; } .media-sq .slash { left: -4%; bottom: 6%; width: clamp(28px, 8%, 44px); height: 32%; } .media-cut { flex: 1 1 360px; position: relative; min-height: 520px; } .media-cut .ph { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%, 0 55%); } .media-cut .slash { left: 0; bottom: -20px; width: clamp(30px, 9%, 48px); height: 42%; } /* Listas “¿Kreamos es para ti?” */ .ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .ticks li { display: flex; gap: 12px; font: 300 15px/1.6 Inter, 'Inter Fallback', sans-serif; color: var(--tx); } .ticks strong { font-weight: 600; color: var(--ink); } .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--o); color: #fff; font: 700 12px/22px Inter, 'Inter Fallback', sans-serif; text-align: center; } .tick--no { background: none; border: 1px solid var(--mute); color: var(--mute); font: 500 12px/20px Inter, 'Inter Fallback', sans-serif; } .fit h3 { font-size: 20px; line-height: 1.3; } .fit { gap: 18px; padding: clamp(28px, 3vw, 40px); } /* FAQ */ .faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; gap: 16px; align-items: center; padding: 22px 4px; font: 500 17px/1.4 Inter, 'Inter Fallback', sans-serif; color: var(--ink); list-style: none; cursor: pointer; transition: color .2s; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--o3); } .faq__i { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--o); color: var(--o); display: flex; align-items: center; justify-content: center; font: 400 18px/1 Inter, 'Inter Fallback', sans-serif; transition: transform .35s var(--ease), background-color .25s, color .25s; } .faq details[open]:not(.is-closing) .faq__i { transform: rotate(45deg); background: var(--o); color: #fff; } .faq__a { overflow: hidden; } .faq__a p { margin: 0; padding: 0 4px 24px 48px; font: 300 15px/1.7 Inter, 'Inter Fallback', sans-serif; color: var(--tx); max-width: 820px; } /* Estadísticas */ .stat { position: relative; padding-top: 24px; display: flex; flex-direction: column; gap: 8px; } .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--ink); transform-origin: left; } .stat__n { font: 700 clamp(48px, 5vw, 64px)/1 Roboto, 'Roboto Fallback', sans-serif; color: var(--o); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat__u { font: 700 20px/1.2 Roboto, 'Roboto Fallback', sans-serif; color: var(--o2); } .stat__d { font: 300 15px/1.55 Inter, 'Inter Fallback', sans-serif; color: var(--tx); } .stats { --min: 220px; gap: 40px 32px; } /* Producción: modalidades apiladas (sticky) */ .mods { display: flex; flex-direction: column; gap: 24px; } .mod { position: sticky; top: var(--top, 96px); border-radius: var(--r); padding: clamp(28px, 4vw, 56px); min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transform-origin: 50% 0; will-change: scale; } .mod--light { background: #ededed; } .mod--dark { background: #2b2b2b; box-shadow: 0 -12px 32px rgba(0, 0, 0, .10); } .mod--orange { background: var(--o); box-shadow: 0 -12px 32px rgba(0, 0, 0, .12); } .mod__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .mod__tag { font: 600 12px/1 Inter, 'Inter Fallback', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1px solid currentColor; border-radius: 999px; padding: 9px 14px; } .mod__n { font: 700 clamp(88px, 11vw, 150px)/.8 Roboto, 'Roboto Fallback', sans-serif; color: transparent; -webkit-text-stroke: 1.5px var(--o); letter-spacing: -.03em; } .mod__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 64px; align-items: end; } .mod h3 { margin: 0; font: 700 clamp(32px, 4vw, 52px)/1.02 Roboto, 'Roboto Fallback', sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; } .mod p { margin: 0; font: 300 17px/1.7 Inter, 'Inter Fallback', sans-serif; color: var(--tx); text-wrap: pretty; } .mod--dark .mod__tag { color: var(--o); } .mod--dark h3 { color: #fff; } .mod--dark p { color: #d6d6d6; } .mod--orange .mod__tag, .mod--orange h3 { color: var(--dk); } .mod--orange .mod__n { -webkit-text-stroke-color: #fff; } .mod--orange p { font-weight: 400; color: var(--dk); } /* Cursos: herramientas */ .tool { flex-direction: row; gap: 20px; align-items: flex-start; } .tool__logo { flex: none; width: 88px; height: 56px; border: 1px dashed #9a9a9a; border-radius: 10px; display: flex; align-items: center; justify-content: center; font: 500 10px ui-monospace, Menlo, monospace; color: #777; } .tool h3 { font-size: 18px; line-height: 1.2; } .tool p { font-size: 14px; line-height: 1.6; } .tool > div:last-child { display: flex; flex-direction: column; gap: 6px; } /* Dos columnas temáticas que se llenan de arriba hacia abajo (izquierda: producir y publicar cursos; derecha: video, diseño, voz e IA). Con 5 filas fijas, el orden visual es el mismo que el del HTML. */ .tools { display: grid; gap: 16px; } @media (min-width: 900px) { .tools { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; } } /* Nosotros: pilares */ .pillar { position: relative; display: flex; flex-direction: column; gap: 14px; padding-top: 24px; } .pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--dk); transform-origin: left; } .pillar h3 { margin: 0; font: 800 clamp(30px, 3vw, 40px)/1 Roboto, 'Roboto Fallback', sans-serif; color: var(--dk); letter-spacing: -.01em; } .pillar p { margin: 0; font: 400 16px/1.65 Inter, 'Inter Fallback', sans-serif; color: var(--dk); } .h2--w { color: #fff; } /* ---------- Header ---------- */ .progress { position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 3px; background: var(--o); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } .hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(0, 0, 0, .06); transition: box-shadow .3s; } .hdr.is-scrolled { box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .35); } .hdr__in { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; flex-direction: column; text-decoration: none; line-height: 1; } .logo__w { font: 800 30px/1 Roboto, 'Roboto Fallback', sans-serif; letter-spacing: -.02em; color: #6b6b6b; } .logo__w b { font-weight: inherit; color: var(--o); } .logo__t { align-self: flex-end; font: 500 8px/1 Inter, 'Inter Fallback', sans-serif; letter-spacing: .12em; color: #6b6b6b; margin-top: 3px; } .logo__t b { font-weight: inherit; color: var(--o); } .nav { display: flex; gap: 26px; align-items: center; } .nav a { position: relative; font: 400 13px/1 Inter, 'Inter Fallback', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #666; text-decoration: none; padding: 10px 2px 8px; white-space: nowrap; transition: color .2s; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--o); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .nav a:hover { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav a[aria-current="page"] { color: var(--o2); } .burger { display: none; width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 10px; background: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; } .burger span { width: 20px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; } .burger span:nth-child(2) { background: var(--o); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mnav { display: none; } .hdr__desk { display: flex; align-items: center; gap: 26px; } @media (max-width: 1079.98px) { .hdr__desk { display: none; } .burger { display: flex; } .mnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .mnav.is-open { grid-template-rows: 1fr; } .mnav > div { overflow: hidden; } .mnav nav { display: flex; flex-direction: column; padding: 8px 24px 24px; gap: 4px; border-top: 1px solid #f0f0f0; } .mnav a:not(.btn) { font: 500 15px/1 Inter, 'Inter Fallback', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #666; text-decoration: none; padding: 14px 0; border-bottom: 1px solid #f0f0f0; } .mnav a[aria-current="page"] { color: var(--o2); } .mnav .btn { margin-top: 12px; padding: 16px; font-size: 13px; } } /* ---------- Contacto ---------- */ .contact .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: start; } .contact__p { margin: 0; font: 300 17px/1.7 Inter, 'Inter Fallback', sans-serif; color: var(--tx); max-width: 480px; text-wrap: pretty; } .contact__tag { margin: 0; font: 500 24px/1.3 Roboto, 'Roboto Fallback', sans-serif; color: var(--o2); max-width: 460px; text-wrap: balance; } .contact__links { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding-top: 24px; border-top: 1px solid #cfcfcf; } .contact__links a { font: 400 16px Inter, 'Inter Fallback', sans-serif; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color .2s; } .contact__links a:hover { color: var(--o3); } .contact__links svg { width: 18px; height: 18px; flex: none; color: var(--o); } .form { position: relative; background: #fff; border-radius: var(--r); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } .form h3 { margin: 0; font: 600 26px/1.2 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); } .form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; } .field { display: flex; flex-direction: column; gap: 8px; font: 500 14px Inter, 'Inter Fallback', sans-serif; color: var(--o3); } .input { font: 400 15px Inter, 'Inter Fallback', sans-serif; color: #333; border: 1px solid #8a8a8a; border-radius: 999px; padding: 13px 18px; outline: none; background: #fff; width: 100%; transition: border-color .2s, box-shadow .2s; } .input::placeholder { color: #8a8a8a; } .input:focus { border-color: var(--o); box-shadow: 0 0 0 4px rgba(242, 145, 0, .15); } .input:user-invalid { border-color: #b3261e; } textarea.input { border-radius: 18px; padding: 14px 18px; line-height: 1.5; resize: vertical; min-height: 120px; } .chips-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .chips-set legend { padding: 0; margin-bottom: 10px; font: 500 14px Inter, 'Inter Fallback', sans-serif; color: var(--o3); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; pointer-events: none; } .chip span { display: inline-block; font: 500 14px/1 Inter, 'Inter Fallback', sans-serif; padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--o); background: #fff; color: var(--o3); cursor: pointer; transition: background-color .2s, color .2s, transform .2s var(--ease); user-select: none; } .chip span:hover { background: #fff6e8; } .chip input:checked + span { background: var(--o); color: #fff; } .chip input:focus-visible + span { outline: 2px solid var(--o2); outline-offset: 3px; } .chip input:checked + span { animation: pop .3s var(--ease); } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .form__legal { margin: 0; font: 400 13px/1.5 Inter, 'Inter Fallback', sans-serif; color: #666; } .form__legal a { color: var(--o3); } .form__err { margin: 0; font: 400 14px/1.5 Inter, 'Inter Fallback', sans-serif; color: #b3261e; } .form__err[hidden] { display: none; } /* Regreso sin JS desde enviar.php con #envio-error: el aviso se muestra aunque tenga [hidden] */ .form__err:target { display: block !important; } .form .btn[type="submit"] { align-self: flex-start; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 14.5px 30.5px; min-width: 140px; } .form .btn[disabled] { opacity: .75; cursor: progress; transform: none; } .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; display: none; } .is-sending .spin { display: inline-block; } .ok { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 28px; border-radius: 14px; background: #fff6e8; border: 1px solid var(--o); font: 400 16px/1.6 Inter, 'Inter Fallback', sans-serif; color: var(--ink); animation: rise .6s var(--ease); } .ok[hidden] { display: none; } .ok svg { width: 48px; height: 48px; } .ok circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease) forwards; } .ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .45s var(--ease) forwards; } .ok p { margin: 0; } /* ---------- Footer ---------- */ .ftr { background: var(--o); color: var(--dk); padding: 72px 0 28px; } .ftr__grid { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 48px; } .ftr__brand { display: flex; flex-direction: column; gap: 16px; grid-column: span 2; max-width: 460px; } @media (max-width: 560px) { .ftr__brand { grid-column: auto; } } .ftr .logo { align-self: flex-start; } .ftr .logo__w { font-size: 32px; color: #111; } .ftr .logo__t { color: #111; } .ftr__claim { margin: 0; font: 700 20px/1.3 Roboto, 'Roboto Fallback', sans-serif; color: #111; } .ftr p { margin: 0; font: 400 15px/1.6 Inter, 'Inter Fallback', sans-serif; color: var(--dk); } .ftr__nav { display: flex; flex-direction: column; gap: 12px; } .ftr__nav a { font: 500 15px Inter, 'Inter Fallback', sans-serif; color: #111; text-decoration: none; background: linear-gradient(#111, #111) 0 100%/0 1.5px no-repeat; transition: background-size .35s var(--ease); align-self: flex-start; padding-bottom: 2px; } .ftr__nav a:hover { background-size: 100% 1.5px; color: #111; } .ftr__col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .ftr__h { font: 600 13px Inter, 'Inter Fallback', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #111; } .socials { display: flex; gap: 10px; flex-wrap: wrap; } .socials a { font: 500 13px/1 Inter, 'Inter Fallback', sans-serif; color: #111; text-decoration: none; border: 1px solid #111; border-radius: 999px; padding: 9px 14px; transition: background-color .2s, color .2s; } .socials a:hover { background: #111; color: var(--o); } .ftr__col .btn { margin-top: 8px; } .ftr__bottom { max-width: 1200px; margin: 56px auto 0; padding: 20px 24px 0; border-top: 1px solid rgba(0, 0, 0, .25); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font: 400 13px/1.4 Inter, 'Inter Fallback', sans-serif; color: var(--dk); } .ftr__bottom div { display: flex; gap: 24px; flex-wrap: wrap; } .ftr__bottom a { color: #111; text-decoration: none; } .ftr__bottom a:hover { text-decoration: underline; color: #111; } /* WhatsApp flotante */ .wa { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; background: #25D366; color: #0b3d1f; font: 600 15px/1 Inter, 'Inter Fallback', sans-serif; padding: 12px 20px 12px 14px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: transform .45s var(--ease), opacity .3s, background-color .2s; } .wa svg { width: 26px; height: 26px; flex: none; } .wa:hover { background: #1fbe5a; color: #0b3d1f; } .js .wa { transform: translateY(140%); opacity: 0; } .js .wa.is-visible { transform: none; opacity: 1; } .js .wa.is-visible:hover { transform: translateY(-3px); } @media (max-width: 520px) { .wa { padding: 14px; } .wa__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* ---------- Páginas simples (404 / gracias / legal) ---------- */ .simple { min-height: 60vh; display: flex; align-items: center; } .big-404 { font: 800 clamp(120px, 22vw, 260px)/.8 Roboto, 'Roboto Fallback', sans-serif; color: transparent; -webkit-text-stroke: 2px var(--o); letter-spacing: -.04em; } .legal h2 { margin: 32px 0 8px; font: 700 22px/1.3 Roboto, 'Roboto Fallback', sans-serif; color: var(--ink); } .legal p, .legal li { font: 300 16px/1.75 Inter, 'Inter Fallback', sans-serif; color: var(--tx); } .legal .todo { background: #fff6e8; border: 1px dashed var(--o); padding: 2px 6px; border-radius: 4px; font-weight: 500; } /* ====================================================================== ANIMACIONES — sólo se activan si JS carga (.js) y el usuario no pidió movimiento reducido. Sin JS todo el contenido es visible. ====================================================================== */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes rise { from { opacity: 0; transform: translateY(12px); } } @keyframes pop { 50% { transform: scale(1.06); } } @keyframes cortina { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes wipe4 { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } } @keyframes wipeCut { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%, 0 55%); } } @keyframes dropIn { from { translate: 0 -110%; } } /* translate, no transform: conserva la inclinación de la pleca */ @keyframes riseIn { from { translate: 0 110%; } } @media (prefers-reduced-motion: no-preference) { .js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js .rv.is-in { opacity: 1; transform: none; } .js .rv--fade { transform: none; } .js .rv--left { transform: translateX(-32px); } /* Barras decorativas que crecen */ .js .kicker.rv { background-size: 0 3px; transition: opacity .9s var(--ease), transform .9s var(--ease), background-size 1s .35s var(--ease); } .js .kicker.rv.is-in { background-size: 48px 3px; } .js .bar.rv { transform: scaleX(0); transform-origin: left; } .js .bar.rv.is-in { transform: scaleX(1); } .js .stat.rv::before, .js .pillar.rv::before { transform: scaleX(0); transition: transform 1.1s .2s var(--ease); } .js .stat.rv.is-in::before, .js .pillar.rv.is-in::before { transform: scaleX(1); } /* Hero: entrada al cargar */ .js .hero__img::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; animation: cortina 1.2s .15s var(--ease) both; pointer-events: none; } .js .hero .slash--a { animation: dropIn 1s .5s var(--ease) both; } .js .hero .slash--b { animation: riseIn 1s .65s var(--ease) both; } /* Medios que se revelan al entrar en pantalla */ .js .what__media.rv, .js .media-sq.rv, .js .media-cut.rv { opacity: 1; transform: none; } /* Cortina en un pseudo-elemento: recortar el propio elemento observado impediría que IntersectionObserver lo detecte */ .js .what__media.rv::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transition: transform 1.2s var(--ease); } .js .what__media.rv.is-in::after { transform: scaleX(0); } .js .media-sq.rv .ph { transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); clip-path: inset(0 0 100% 0 round 24px); transform: scale(1.04); } .js .media-sq.rv.is-in .ph { clip-path: inset(0 0 0 0 round 24px); transform: none; } .js .media-cut.rv .ph { transition: clip-path 1.3s var(--ease); } .js .media-cut.rv:not(.is-in) .ph { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%, 0 55%); } .js .media-sq.rv .slash, .js .media-cut.rv .slash, .js .deco.rv { transition: translate 1s .5s var(--ease), opacity .6s .5s; } .js .media-sq.rv:not(.is-in) .slash, .js .media-cut.rv:not(.is-in) .slash, .js .deco.rv:not(.is-in) { translate: -40% 40%; opacity: 0; } /* Tarjetas de modalidad que se apilan */ .js .mod { transition: scale .1s linear, filter .1s linear; } /* Palpitar sutil del botón de WhatsApp */ .js .wa.is-visible::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); animation: ping 2.6s 1.2s var(--ease) infinite; pointer-events: none; } } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .card:hover, .svc:hover, .btn:hover { transform: none; } } @media print { .hdr, .wa, .progress, .ftr, .form { display: none !important; } .rv { opacity: 1 !important; transform: none !important; } }