/* ========================================================================== APROECO — styles.css (Propuesta A · Raíz — Editorial orgánica) Orden: 1 tokens · 2 @font-face · 3 reset · 4 base · 5 layout · 6 componentes 7 secciones (header, hero, nosotros, proceso, compromisos, cafés, equipo, clientes, contacto, footer, páginas auxiliares) · 8 utilidades 9 animaciones (+ prefers-reduced-motion) CSP estricta: sin estilos en línea. Valores por elemento → custom properties escritas desde JS con el.style.setProperty('--x', …). Mejora progresiva: los estados iniciales animados y el modo "con JS" (header fijo, menú móvil, ruta fijada, carruseles) solo se aplican bajo html.js. Esa clase la pone un script mínimo EN LÍNEA en (autorizado por hash en la CSP del .htaccess: sin petición extra, no bloquea el LCP) y la RETIRA si main.js no arranca (error de carga o 8 s sin señal): la página vuelve al modo sin JS, con todo el contenido visible. Sin JS (o con el script en línea bloqueado) nunca hay .js → versión estática completa. Selectores: `.js X` / `:where(.js) X` y `html:not(.js) X` / `:where(html:not(.js)) X` (misma especificidad que antes). ========================================================================== */ /* ---------- 1. TOKENS (CLAUDE.md §3) ---------- */ :root { --verde-bosque: #00351B; --verde-noche: #002C1B; --verde-hoja: #1F5C3A; --rojo-grano: #A21911; --carbon: #363435; --crema: #FBF7EC; --crema-2: #F3ECDC; --cafe-tierra: #6E4A30; --oro-suave: #C9A45C; /* Grano de café (separadores decorativos) */ --grano-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-18 -14 36 28'%3E%3Cellipse rx='17' ry='12.5' fill='%23A21911'/%3E%3Cpath d='M-13.5 2.2C-9 -5.2-3.8 -4.6 0 0S9.4 5.2 13.5 -2.2' fill='none' stroke='%23FBF7EC' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Alto reservado del header (sin CLS) y alto visual compacto tras el scroll */ --header-h: 4.5rem; --header-hc: 4rem; --pad-x: clamp(1rem, 4vw, 2.5rem); --section-y: clamp(4rem, 10vw, 8rem); --radio-s: 12px; --radio: 20px; --radio-l: 28px; --sombra-suave: 0 1px 0 color-mix(in srgb, var(--carbon) 8%, transparent), 0 10px 30px -18px color-mix(in srgb, var(--verde-noche) 55%, transparent); --sombra-foto: 0 30px 60px -30px color-mix(in srgb, var(--verde-noche) 55%, transparent), 0 8px 18px -12px color-mix(in srgb, var(--verde-noche) 35%, transparent); --foco: var(--rojo-grano); color-scheme: light; } @media (min-width: 1024px) { :root { --header-h: 5.5rem; --header-hc: 4.25rem; } } /* ---------- 2. @FONT-FACE (autoalojadas, OFL; ver tools/subset_fonts.py) ---------- Fraunces roman: wght 500–700, opsz 9–144, SOFT=100, WONK=0 (instanciada). Fraunces italic: 400, opsz 9–144, SOFT=100, WONK=0. Figtree: wght 300–900. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/fraunces-var-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: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/fraunces-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-italic-var-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: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-italic-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-var-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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- 3. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } /* ---------- 4. BASE ---------- */ html { background: var(--crema); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100vh; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--carbon); background: var(--crema); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } html.menu-abierto { overflow: hidden; } main:focus { outline: none; } section[id] { scroll-margin-top: var(--header-hc); } section[tabindex="-1"]:focus { outline: none; } :focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--verde-hoja); color: var(--crema); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Tipografía común */ .titulo-seccion { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(2rem, 2.6vw + 1.2rem, 3.5rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--verde-bosque); } .eyebrow { display: inline-flex; align-items: center; gap: .75rem; font: 700 .75rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--cafe-tierra); } .eyebrow::before, .eyebrow--centro::after { content: ""; flex: none; width: 36px; height: 2px; background: var(--rojo-grano); } .eyebrow--centro::before { transform-origin: 100% 50%; } .eyebrow--centro::after { transform-origin: 0 50%; } .acento { font-family: var(--font-display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 36; color: var(--cafe-tierra); } /* ---------- 5. LAYOUT ---------- */ .container { width: 100%; max-width: calc(80rem + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); } .encabezado { display: grid; gap: 1rem; max-width: 50rem; } .encabezado--centro { justify-items: center; margin-inline: auto; text-align: center; } .encabezado__bajada { max-width: 44rem; font-size: clamp(1rem, .4vw + .95rem, 1.1875rem); color: color-mix(in srgb, var(--carbon) 88%, var(--cafe-tierra)); text-wrap: pretty; } /* ---------- 6. COMPONENTES ---------- */ /* Salto al contenido */ .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: .5rem; background: var(--verde-bosque); color: var(--crema); font-weight: 600; text-decoration: none; --foco: var(--oro-suave); } .skip-link:focus { top: 1rem; } /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem; padding: .8125rem 1.625rem; border: 1.5px solid transparent; border-radius: 999px; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .btn__icono { flex: none; width: 1.25rem; height: 1.25rem; } .btn__flecha { transition: transform .35s var(--ease-out); } .btn:hover .btn__flecha, .btn:focus-visible .btn__flecha { transform: translateX(4px); } .btn:active { transform: scale(.98); } .btn--verde { background: var(--verde-bosque); color: var(--crema); } .btn--verde:hover { background: var(--verde-hoja); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--verde-noche) 80%, transparent); } .btn--crema { background: var(--crema); color: var(--verde-bosque); --foco: var(--oro-suave); } .btn--crema:hover { background: var(--crema-2); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--verde-noche) 90%, transparent); } /* Enlace con flecha y subrayado que crece */ .enlace { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; text-decoration: none; } .enlace span { position: relative; } .enlace span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1.5px; background: var(--oro-suave); transform-origin: 0 50%; transition: transform .45s var(--ease-out); } .enlace:hover span::after { transform: scaleX(.35); transform-origin: 100% 50%; } .enlace__flecha { width: 1.125rem; height: 1.125rem; transition: transform .35s var(--ease-out); } .enlace:hover .enlace__flecha, .enlace:focus-visible .enlace__flecha { transform: translateX(4px); } .enlace--claro { color: var(--crema); --foco: var(--oro-suave); } /* Ramas de café a línea (SVG propio, decorativo) */ .rama { position: absolute; z-index: 0; width: clamp(160px, 22vw, 340px); aspect-ratio: 1; color: color-mix(in srgb, var(--cafe-tierra) 42%, transparent); stroke-width: 1.5; pointer-events: none; } /* Onda (separador SVG) */ .onda { display: block; width: 100%; height: clamp(48px, 7vw, 110px); } /* Flotantes: WhatsApp + volver arriba */ .flotantes { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; display: grid; justify-items: end; gap: .75rem; pointer-events: none; } .flotante { position: relative; display: grid; place-items: center; border-radius: 50%; text-decoration: none; pointer-events: auto; transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear 0s, background-color .3s var(--ease-out); } .flotante__icono { width: 1.5rem; height: 1.5rem; } .flotante--whatsapp { width: 3.5rem; height: 3.5rem; background: var(--verde-bosque); color: var(--crema); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crema) 70%, transparent), 0 14px 30px -12px color-mix(in srgb, var(--verde-noche) 90%, transparent); --foco: var(--rojo-grano); } .flotante--whatsapp .flotante__icono { width: 1.625rem; height: 1.625rem; } .flotante--whatsapp:hover { background: var(--verde-hoja); } .flotante__txt { position: absolute; right: calc(100% + .75rem); top: 50%; padding: .5rem .875rem; border-radius: 999px; background: var(--verde-bosque); color: var(--crema); font-size: .875rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(8px, -50%); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); pointer-events: none; clip-path: inset(0 round 999px); } .flotante--whatsapp:hover .flotante__txt, .flotante--whatsapp:focus-visible .flotante__txt { opacity: 1; transform: translate(0, -50%); } @media (hover: none) { .flotante__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .flotante--arriba { width: 2.75rem; height: 2.75rem; background: var(--crema); color: var(--verde-bosque); box-shadow: 0 0 0 1px color-mix(in srgb, var(--verde-bosque) 18%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--verde-noche) 70%, transparent); } .flotante--arriba:hover { background: var(--crema-2); } .flotante--arriba .flotante__icono { width: 1.25rem; height: 1.25rem; } /* Con JS: aparecen tras el hero */ .js .flotante:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s; } html.menu-abierto .flotantes { visibility: hidden; } /* ========================================================================== 7. SECCIONES ========================================================================== */ /* ---------- 7.1 HEADER ---------- */ .site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); color: var(--crema); pointer-events: none; /* solo la barra y el panel reciben eventos */ --foco: var(--oro-suave); } .site-header__fondo { position: absolute; inset: 0 0 auto; height: var(--header-hc); background: color-mix(in srgb, var(--crema) 94%, transparent); box-shadow: var(--sombra-suave); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); opacity: 0; transform: translateY(-8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); } .site-header::before { /* velo superior sobre la foto para legibilidad */ content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--header-h) + 2rem); background: linear-gradient(to bottom, color-mix(in srgb, var(--verde-noche) 55%, transparent), transparent); transition: opacity .4s var(--ease-out); } .site-header__barra { position: relative; z-index: 2; display: flex; align-items: center; gap: 1rem; height: var(--header-h); transition: transform .45s var(--ease-out); } .site-header__barra > * { pointer-events: auto; } .marca { display: flex; align-items: center; gap: .875rem; min-height: 44px; margin-right: auto; color: var(--crema); text-decoration: none; transform-origin: 0 50%; transition: transform .45s var(--ease-out), color .35s var(--ease-out); } .marca__logo { width: auto; height: 2.75rem; aspect-ratio: 1004 / 470.2; } .marca__bajada { display: none; padding-left: .875rem; border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent); line-height: 1.25; } .marca__coop { display: block; font: 700 .6875rem/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; } .marca__lema { display: block; font-family: var(--font-display); font-style: italic; font-size: .875rem; color: var(--oro-suave); transition: color .35s var(--ease-out); } .nav { display: none; } .nav__lista { display: flex; gap: clamp(.25rem, 1.2vw, 1.25rem); } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: .375rem; font-size: .9375rem; font-weight: 500; text-decoration: none; color: inherit; transition: color .3s var(--ease-out); } .nav__link::after { /* subrayado rojo animado (scaleX) */ content: ""; position: absolute; left: .375rem; right: .375rem; bottom: .55rem; height: 2px; border-radius: 2px; background: var(--rojo-grano); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease-out); } .nav__link:hover::after { transform: scaleX(.4); transform-origin: 0 50%; } .nav__link.is-active::after { transform: scaleX(1); transform-origin: 0 50%; } .site-header:not(.is-scrolled) .nav__link.is-active::after { background: var(--crema); } .site-header__acciones { display: flex; align-items: center; gap: .5rem; } .btn--header { display: none; min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .9375rem; color: var(--crema); border-color: color-mix(in srgb, var(--crema) 70%, transparent); } .btn--header:hover { background: var(--crema); color: var(--verde-bosque); border-color: var(--crema); } /* Selector de idioma ES / EN (bandera + código; el actual, marcado con aria-current) */ .idioma { display: flex; align-items: center; gap: .125rem; padding: .1875rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; } .idioma__op { display: inline-flex; align-items: center; gap: .3125rem; min-height: 2.25rem; padding: .25rem .5rem; border-radius: 999px; color: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; opacity: .78; transition: background-color .25s var(--ease-out), opacity .25s var(--ease-out); } .idioma__op:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); } .idioma__op[aria-current="page"] { opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent); } .idioma__bandera { width: 1.125rem; height: .75rem; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--carbon) 25%, transparent); } @media (max-width: 359.98px) { /* 320 px: solo banderas (el nombre sigue en visually-hidden) */ .idioma__op > span[aria-hidden] { display: none; } .idioma__op { padding-inline: .4375rem; } } /* Hamburguesa → X */ .hamburguesa { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 50%; background: transparent; color: inherit; transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out); } .hamburguesa__lineas { position: relative; width: 18px; height: 12px; } .hamburguesa__lineas span { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease-out), opacity .2s var(--ease-out); } .hamburguesa__lineas span:nth-child(1) { top: 0; } .hamburguesa__lineas span:nth-child(2) { top: 5px; } .hamburguesa__lineas span:nth-child(3) { top: 10px; } .hamburguesa[aria-expanded="true"] .hamburguesa__lineas span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .hamburguesa[aria-expanded="true"] .hamburguesa__lineas span:nth-child(2) { opacity: 0; transform: scaleX(.2); } .hamburguesa[aria-expanded="true"] .hamburguesa__lineas span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Estado compacto (tras el scroll): fondo crema, texto carbón, barra centrada en el alto compacto. El alto reservado (--header-h) no cambia: la compactación es solo visual (transform). */ .site-header.is-scrolled { color: var(--carbon); --foco: var(--rojo-grano); } .site-header.is-scrolled .site-header__fondo { opacity: 1; transform: none; } .site-header.is-scrolled::before { opacity: 0; } .site-header.is-scrolled .site-header__barra { transform: translateY(calc((var(--header-hc) - var(--header-h)) / 2)); } .site-header.is-scrolled .marca { color: var(--carbon); transform: scale(.86); } .site-header.is-scrolled .marca__lema { color: var(--cafe-tierra); } .site-header.is-scrolled .btn--header { color: var(--verde-bosque); border-color: var(--verde-bosque); } .site-header.is-scrolled .btn--header:hover { background: var(--verde-bosque); color: var(--crema); } .site-header.is-scrolled .nav__link:hover { color: var(--verde-hoja); } /* Menú abierto: la barra queda sobre el panel verde */ .site-header.is-menu { color: var(--crema); --foco: var(--oro-suave); } .site-header.is-menu .site-header__fondo { opacity: 0; } .site-header.is-menu::before { opacity: 0; } .site-header.is-menu .marca { color: var(--crema); } .site-header.is-menu .btn--header { color: var(--crema); border-color: color-mix(in srgb, var(--crema) 70%, transparent); } /* Panel del menú móvil (solo con JS) */ .menu-movil { display: none; } .js .menu-movil { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: calc(var(--header-h) + 1.5rem) var(--pad-x) max(2rem, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--verde-bosque); color: var(--crema); pointer-events: auto; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease-in-out), visibility 0s linear .55s; } .js .menu-movil.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .55s var(--ease-in-out), visibility 0s; } .menu-movil__rama { position: absolute; right: -3rem; bottom: 6rem; width: 260px; height: 260px; color: color-mix(in srgb, var(--crema) 12%, transparent); stroke-width: 1.4; transform: scaleX(-1) rotate(-8deg); pointer-events: none; } .menu-movil__lista { display: grid; gap: .25rem; counter-reset: none; } .menu-movil__link { display: flex; align-items: baseline; gap: 1rem; min-height: 3.5rem; padding-block: .375rem; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.1; letter-spacing: -.02em; text-decoration: none; color: var(--crema); } .menu-movil__num { font: 700 .75rem/1 var(--font-body); letter-spacing: .2em; color: var(--oro-suave); } .menu-movil__link.is-active { color: var(--oro-suave); } .menu-movil__pie { position: relative; display: grid; gap: 1.25rem; justify-items: start; } .menu-movil__datos { display: grid; gap: .25rem; font-size: .9375rem; } .menu-movil__datos a { display: inline-flex; align-items: center; min-height: 44px; color: color-mix(in srgb, var(--crema) 85%, transparent); text-decoration-color: color-mix(in srgb, var(--crema) 35%, transparent); text-underline-offset: .25em; } @media (min-width: 640px) { .btn--header { display: inline-flex; } } @media (min-width: 1024px) { .nav { display: block; } .hamburguesa { display: none; } .js .menu-movil { display: none; } .marca__logo { height: 3.25rem; } .site-header__acciones { margin-left: clamp(.5rem, 1.5vw, 1.5rem); } } @media (min-width: 1280px) { .marca__bajada { display: block; } } /* Sin JS: el header no es fijo (no hay estado "compacto" crema que garantice contraste) */ html:not(.js) .site-header { position: absolute; } /* Sin JS en móvil: la navegación es una fila desplazable */ @media (max-width: 1023.98px) { html:not(.js) .site-header { position: absolute; height: auto; } html:not(.js) .site-header__barra { flex-wrap: wrap; height: auto; padding-block: .75rem; } html:not(.js) .hamburguesa { display: none; } html:not(.js) .nav { display: block; order: 3; width: 100%; overflow-x: auto; } html:not(.js) .nav__lista { gap: .25rem; } html:not(.js) .nav__link { white-space: nowrap; } } /* ---------- 7.2 HERO · #inicio ---------- */ .hero { position: relative; background: var(--verde-noche); color: var(--crema); --foco: var(--oro-suave); } .hero__escena { position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(36rem, 100svh); overflow: hidden; } .hero__media { position: absolute; inset: -10vw 0 auto; /* móvil: foto 4:5 arriba; margen superior para el parallax */ height: calc(min(125vw, 82svh) + 10vw); -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 99%); mask-image: linear-gradient(to bottom, black 62%, transparent 99%); z-index: -2; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; } .hero__picture, .hero__img { width: 100%; height: 100%; } .hero__img { object-fit: cover; object-position: 60% 20%; } .hero__velo { position: absolute; inset: 0 0 auto; height: min(125vw, 82svh); z-index: -1; background: linear-gradient(to top, var(--verde-noche) 0%, color-mix(in srgb, var(--verde-noche) 80%, transparent) 22%, color-mix(in srgb, var(--verde-noche) 25%, transparent) 50%, transparent 68%); } .rama--hero-a { left: -4.5rem; bottom: 22%; width: clamp(200px, 26vw, 360px); color: color-mix(in srgb, var(--crema) 26%, transparent); stroke-width: 1.3; transform: rotate(12deg); } .rama--hero-b { right: -5rem; bottom: -4rem; width: clamp(200px, 24vw, 340px); color: color-mix(in srgb, var(--crema) 20%, transparent); stroke-width: 1.3; transform: scaleX(-1) rotate(-14deg); } .hero__contenido { position: relative; z-index: 1; display: grid; gap: 1.5rem; padding-top: calc(min(125vw, 82svh) - 11rem); padding-bottom: clamp(1.75rem, 5vh, 3rem); } .hero__texto-bloque { display: grid; gap: 1rem; max-width: 40rem; } .hero__acento { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, .6vw + .9rem, 1.25rem); font-variation-settings: "opsz" 36; color: var(--oro-suave); /* En móvil cae sobre la camiseta roja de la foto: halo verde noche para mantener ≥ 4,5:1 */ text-shadow: 0 1px 2px var(--verde-noche), 0 0 10px color-mix(in srgb, var(--verde-noche) 85%, transparent), 0 0 22px color-mix(in srgb, var(--verde-noche) 70%, transparent); } .hero__titulo { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(2.5rem, 4.6vw + 1rem, 5rem); line-height: 1.02; letter-spacing: -.025em; text-wrap: balance; color: var(--crema); } .linea { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; } .linea__in { display: inline-block; } .hero__texto { max-width: 34rem; font-size: clamp(1.0625rem, .35vw + 1rem, 1.25rem); line-height: 1.55; color: color-mix(in srgb, var(--crema) 90%, transparent); text-wrap: pretty; } .hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-top: .5rem; } .hero__ubicacion { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; color: color-mix(in srgb, var(--crema) 88%, transparent); } .hero__pin { width: 1.125rem; height: 1.125rem; color: var(--oro-suave); } /* Sello "27 años" */ .sello { position: absolute; top: calc(var(--header-h) + .75rem); left: var(--pad-x); z-index: 1; width: clamp(5.75rem, 9vw + 2rem, 9.5rem); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--verde-bosque) 90%, transparent); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--verde-noche) 90%, transparent); } .sello__aro { position: absolute; inset: 0; width: 100%; height: 100%; } .sello__texto { font: 700 7.4px/1 var(--font-body); letter-spacing: .18em; fill: var(--oro-suave); } .sello__centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; } .sello__num { min-width: var(--w, 2ch); text-align: center; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(1.9rem, 3vw + .9rem, 3.1rem); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.03em; color: var(--oro-suave); } .sello__anos { margin-top: .15rem; font: 700 clamp(.5625rem, .3vw + .5rem, .75rem)/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--crema); } /* Franja inferior: destinos | certificaciones */ .hero__franja { position: relative; background: var(--verde-noche); border-top: 1px solid color-mix(in srgb, var(--crema) 10%, transparent); } .franja { display: grid; gap: 1.25rem; padding-block: 1.25rem 1.5rem; } .franja__grupo { position: relative; display: grid; gap: .75rem; } .franja__titulo { font: 700 .6875rem/1.2 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-suave); } .destinos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; } .destino { display: grid; justify-items: center; gap: .375rem; font-size: .75rem; font-weight: 500; line-height: 1.2; text-align: center; color: color-mix(in srgb, var(--crema) 85%, transparent); } .bandera { width: 1.875rem; height: 1.25rem; clip-path: inset(0 round 3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crema) 20%, transparent); transition: transform .35s var(--ease-out); } .destino:hover .bandera { transform: translateY(-2px) rotate(-3deg); } .certs { display: flex; flex-wrap: wrap; gap: .5rem 1rem; } .cert { position: static; } .cert__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .25rem 0 0; border: 0; border-radius: 999px; background: none; color: var(--crema); font-size: .8125rem; font-weight: 600; line-height: 1.15; text-align: left; cursor: help; } .cert__sello { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; padding: .4rem; border-radius: 50%; background: var(--crema); box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro-suave) 0%, transparent); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } .cert__sello img { width: 100%; height: 100%; object-fit: contain; } .cert__sello--rect { padding: .75rem .45rem; } .cert__btn:hover .cert__sello, .cert__btn:focus-visible .cert__sello, .cert.is-open .cert__sello { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--oro-suave); } .cert__nombre { max-width: 6.5rem; } /* Tooltip accesible (hover, foco y toque; Esc lo cierra) */ .tip { position: absolute; left: 0; right: 0; bottom: calc(100% + .5rem); z-index: 5; padding: .625rem .875rem; border-radius: var(--radio-s); background: var(--crema); color: var(--verde-bosque); font-size: .8125rem; font-weight: 500; line-height: 1.4; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--verde-noche) 90%, transparent); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s; pointer-events: none; } .tip::after { /* puente invisible sobre el hueco botón ↔ tooltip */ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; } /* WCAG 1.4.13: visible, el tooltip acepta el puntero; como está dentro de .cert, pasar el cursor del sello al texto mantiene .cert:hover y no se cierra. */ .cert:hover .tip, .cert__btn:focus-visible + .tip, .cert.is-open .tip { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-out), transform .25s var(--ease-out), visibility 0s; pointer-events: auto; } .cert.is-closed .tip { opacity: 0; visibility: hidden; pointer-events: none; } @media (min-width: 480px) { .destinos { display: flex; flex-wrap: wrap; gap: .5rem 1rem; } .destino { grid-auto-flow: column; align-items: center; gap: .5rem; font-size: .8125rem; } } @media (min-width: 768px) { .hero__escena { min-height: clamp(38rem, calc(100svh - 7rem), 62rem); align-items: center; } .hero__media { inset: -8% 0 0; height: auto; -webkit-mask-image: none; mask-image: none; } /* a sangre; ≤ 8 % de margen para el parallax */ .hero__img { object-position: 70% 30%; } .hero__velo { inset: 0; height: auto; background: linear-gradient(90deg, color-mix(in srgb, var(--verde-noche) 92%, transparent) 0%, color-mix(in srgb, var(--verde-noche) 72%, transparent) 30%, color-mix(in srgb, var(--verde-noche) 20%, transparent) 55%, transparent 68%), linear-gradient(to top, color-mix(in srgb, var(--verde-noche) 70%, transparent), transparent 22%); } .hero__contenido { align-self: stretch; grid-template-rows: 1fr auto; padding-top: calc(var(--header-h) + 2.5rem); } .hero__texto-bloque { align-self: center; gap: 1.25rem; } .sello { left: auto; right: var(--pad-x); top: calc(var(--header-h) + 1.25rem); } .rama--hero-a { bottom: 6%; } .franja__grupo { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1.25rem; } .franja__grupo--certs { position: relative; } } @media (min-width: 1280px) { .franja { grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 2rem; padding-block: 1.125rem; } .franja__grupo--certs { padding-left: 2rem; border-left: 1px solid color-mix(in srgb, var(--crema) 16%, transparent); } .certs { flex-wrap: nowrap; gap: 1rem; } .cert { position: relative; } .tip { left: 50%; right: auto; width: max-content; max-width: 17rem; transform: translate(-50%, 4px); } .cert:hover .tip, .cert__btn:focus-visible + .tip, .cert.is-open .tip { transform: translate(-50%, 0); } .cert:last-child .tip { left: auto; right: 0; transform: translateY(4px); } .cert:last-child:hover .tip, .cert:last-child .cert__btn:focus-visible + .tip, .cert.is-open:last-child .tip { transform: none; } } /* ---------- 7.3 NOSOTROS · #nosotros ---------- */ .nosotros { position: relative; padding-top: var(--section-y); background: var(--crema); overflow-x: clip; } .rama--nos-a { top: 1rem; right: -4rem; transform: scaleX(-1) rotate(-10deg); } .rama--nos-b { left: -5rem; bottom: 22%; transform: rotate(4deg); width: clamp(140px, 16vw, 240px); } .nosotros__grid { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 6vw, 4rem); } .nosotros__texto { display: grid; gap: 1.25rem; justify-items: start; } .nosotros__bajada { max-width: 36rem; font-size: clamp(1rem, .4vw + .95rem, 1.1875rem); text-wrap: pretty; } .cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; max-width: 36rem; margin-block: .5rem .75rem; } .cifra { display: flex; align-items: center; gap: .875rem; padding: 1rem; border-radius: 16px; background: var(--crema-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 10%, transparent); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .cifra:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 18%, transparent), 0 16px 30px -22px color-mix(in srgb, var(--verde-noche) 60%, transparent); } .cifra__icono { display: none; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--cafe-tierra) 12%, var(--crema)); color: var(--cafe-tierra); } .cifra__icono svg { width: 1.5rem; height: 1.5rem; } .cifra__dato { display: grid; gap: .25rem; min-width: 0; } .cifra__valor { position: relative; display: inline-flex; align-items: baseline; width: max-content; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(1.875rem, 1.6vw + 1.3rem, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--rojo-grano); } .cifra__num { display: inline-block; min-width: var(--w, auto); font-variant-numeric: tabular-nums lining-nums; } .cifra__grano { position: absolute; top: -.35rem; right: -1.1rem; width: .875rem; height: .6875rem; transform: rotate(-24deg); } .cifra__txt { font-size: .875rem; line-height: 1.3; color: var(--carbon); } .cifra__nota { display: block; font-size: .75rem; color: var(--cafe-tierra); } .nosotros__foto { position: relative; margin: 0; } .nosotros__marco { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden; background: var(--crema-2); box-shadow: var(--sombra-foto); } .nosotros__parallax { position: absolute; inset: -6% 0; transform: translate3d(0, var(--py, 0px), 0); } .nosotros__parallax picture, .nosotros__parallax img { width: 100%; height: 100%; } .nosotros__parallax img { object-fit: cover; object-position: 50% 55%; } .nosotros__leyenda { position: absolute; left: clamp(.75rem, 3vw, 1.75rem); bottom: -1.125rem; z-index: 2; padding: .625rem 1.125rem; border-radius: 999px; background: var(--crema); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--verde-noche) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--oro-suave) 45%, transparent); font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 36; font-size: clamp(.9375rem, .4vw + .875rem, 1.125rem); color: var(--cafe-tierra); } .banda { position: relative; z-index: 1; display: grid; gap: 1.75rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.75rem); border-radius: 24px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--verde-hoja) 55%, transparent), transparent 60%), var(--verde-bosque); color: var(--crema); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--verde-noche) 90%, transparent); --foco: var(--oro-suave); } .banda__bloque { display: flex; align-items: flex-start; gap: 1rem; } .banda__icono { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--crema) 45%, transparent); color: var(--crema); transition: transform .5s var(--ease-out), background-color .4s var(--ease-out); } .banda__icono svg { width: 1.625rem; height: 1.625rem; } .banda__bloque:hover .banda__icono { transform: rotate(-8deg) scale(1.05); background: color-mix(in srgb, var(--crema) 8%, transparent); } .banda__titulo { margin-bottom: .5rem; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: clamp(1.3rem, 1vw + 1rem, 1.625rem); line-height: 1.15; letter-spacing: -.01em; } .banda__lista { display: grid; gap: .125rem; font-size: .9375rem; color: color-mix(in srgb, var(--crema) 88%, transparent); } .banda__lista li { display: inline-flex; align-items: center; gap: .75rem; } .banda__lista:not(.banda__lista--enlaces) li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--oro-suave); } .banda__lista--enlaces { gap: 0; } .banda__lista a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crema) 30%, transparent); text-underline-offset: .3em; transition: text-decoration-color .3s var(--ease-out), color .3s var(--ease-out); } .banda__lista a:hover { color: var(--crema); text-decoration-color: var(--oro-suave); } .banda__lista a svg { flex: none; width: 1rem; height: 1rem; color: var(--oro-suave); } .onda--nosotros { margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: -2px; } @media (min-width: 400px) { .cifra__icono { display: grid; } } @media (min-width: 1024px) { .banda__lista { display: flex; flex-wrap: wrap; gap: .25rem 1rem; } .banda__lista:not(.banda__lista--enlaces) li:first-child::before { display: none; } .banda__lista--enlaces { column-gap: 1.25rem; } } @media (min-width: 768px) { .banda { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 2.5rem; } .banda__bloque--contacto { padding-left: 2.5rem; border-left: 1px solid color-mix(in srgb, var(--crema) 18%, transparent); } } @media (min-width: 1024px) { .nosotros__grid { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); align-items: center; column-gap: clamp(3rem, 5vw, 5.5rem); } .nosotros__foto { margin-top: 3rem; } .banda__icono { width: 4rem; height: 4rem; } } /* ========================================================================== 7.4 PROCESO · #proceso — La ruta del café (prototipo aprobado tests/ruta-demo.*) Modos (en .ruta[data-modo]): · lista → sin JS o con prefers-reduced-motion (base, sin gating) · fijo → JS + ≥1024 px + movimiento permitido (scrollytelling sticky) · carrusel → JS + <1024 px + movimiento permitido (scroll-snap horizontal) ========================================================================== */ /* ---------- 1. Base de la sección (modo lista: sin JS / reduced-motion) ---------- */ .ruta { --ruta-radio: 28px; --ruta-banda: clamp(5rem, 12.5vh, 7.75rem); --ruta-texto-suave: color-mix(in srgb, var(--crema) 80%, transparent); --ruta-linea: color-mix(in srgb, var(--crema) 22%, transparent); position: relative; isolation: isolate; overflow-x: clip; /* no crea contenedor de scroll: el sticky sigue funcionando */ background: var(--verde-bosque); color: var(--crema); scroll-margin-top: var(--header-hc); --foco: var(--oro-suave); } /* Rendimiento (LCP móvil): la ruta no se maqueta ni pide sus fotos hasta acercarse a la pantalla (en móvil lento el lazy nativo de Chrome las pedía ya en el primer pintado). contain-intrinsic-size ≈ alto real medido (lista sin JS / carrusel / escenario fijo 480vh); con `auto` el navegador recuerda el alto real tras el primer pintado. .ruta ya recorta con overflow-x: clip y sus ramas no sobresalen: la contención de pintado no cambia nada. */ .ruta { content-visibility: auto; contain-intrinsic-size: auto 2800px; } @media (prefers-reduced-motion: no-preference) { :where(.js) .ruta { contain-intrinsic-size: auto 1250px; } } @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { :where(.js) .ruta { contain-intrinsic-size: auto calc(480vh + 42rem); } } .ruta .eyebrow { color: var(--oro-suave); } /* Ramas a línea (crema ~12 %) */ .ruta-rama { position: absolute; z-index: -1; width: clamp(170px, 24vw, 360px); aspect-ratio: 1; color: color-mix(in srgb, var(--crema) 12%, transparent); stroke-width: 1.4; pointer-events: none; } .ruta-rama--head-a { top: -1.5rem; left: -3rem; transform: rotate(8deg); } .ruta-rama--head-b { top: -2rem; right: -3.5rem; transform: scaleX(-1) rotate(4deg); } .ruta-rama--stage-a { display: none; } .ruta-rama--stage-b { display: none; } /* Encabezado */ .ruta-head { position: relative; display: grid; justify-items: center; gap: 1.25rem; padding-block: var(--section-y) clamp(2.5rem, 6vw, 4.5rem); text-align: center; } .ruta-head__titulo { max-width: 17ch; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(2.1rem, 3.4vw + 1rem, 4.25rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; color: var(--crema); } .ruta-acento { font-family: var(--font-display); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); line-height: 1.35; color: var(--oro-suave); text-wrap: balance; } .ruta-acento--b { display: none; } @media (min-width: 1024px) { .ruta-head { padding-inline: clamp(9rem, 16vw, 15rem); } .ruta-acento { position: absolute; top: calc(var(--section-y) + 3.5rem); display: block; width: 8.75rem; /* ancho fijo: el cambio de fuente (swap) no desplaza la caja */ text-align: left; } .ruta-acento::after { content: ""; display: block; width: 1.75rem; height: 1px; margin-top: .75rem; background: var(--oro-suave); } .ruta-acento--a { left: var(--pad-x); } .ruta-acento--b { right: var(--pad-x); width: 7.5rem; } } @media (min-width: 1360px) { .ruta-acento--a { left: calc(50% - 40rem); } .ruta-acento--b { right: calc(50% - 40rem); } } /* Escenario (en modo lista es un contenedor normal) */ .ruta-track { position: relative; } .ruta-stage { position: relative; } .ruta-camino, .ruta-hitos, .ruta-grano, .ruta-nav { display: none; } /* Paradas: lista vertical con camino punteado ya dibujado */ .ruta-paradas { position: relative; display: grid; gap: clamp(3rem, 7vw, 5.5rem); margin: 0; padding: 0 0 0 2.25rem; list-style: none; } .ruta-paradas::before { /* camino ya dibujado (vertical) */ content: ""; position: absolute; top: .75rem; bottom: 1rem; left: .5rem; width: 3px; background: radial-gradient(circle, var(--crema) 1.2px, transparent 1.7px) 50% 0 / 3px 11px repeat-y; opacity: .55; } .ruta-parada { position: relative; display: grid; gap: 1.25rem; } .ruta-parada::before { /* hito del camino */ content: ""; position: absolute; top: .5rem; left: calc(-2.25rem + .5rem + 1.5px); width: 13px; height: 13px; translate: -50% 0; border-radius: 50%; background: var(--verde-bosque); box-shadow: 0 0 0 2px var(--crema); } .ruta-parada--mundo::before { /* destino: grano rojo */ width: 18px; height: 14px; background: var(--rojo-grano); box-shadow: 0 0 0 2px var(--crema); border-radius: 50% / 55%; rotate: -20deg; } .ruta-parada__texto { display: grid; align-content: start; } .ruta-parada__num { display: block; font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(3.5rem, 7vw + 1rem, 7.5rem); line-height: .9; letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--oro-suave); } .ruta-parada__lugar { margin-top: 1rem; font: 700 .75rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-suave); } .ruta-parada__titulo { margin: .625rem 0 .875rem; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(1.75rem, 2vw + 1rem, 3rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--crema); } .ruta-parada--mundo .ruta-parada__titulo { font-size: clamp(1.6rem, 1.5vw + 1rem, 2.5rem); max-width: 18ch; } .ruta-parada__desc { max-width: 36ch; font-size: clamp(1rem, .3vw + .95rem, 1.1875rem); line-height: 1.6; color: var(--ruta-texto-suave); text-wrap: pretty; } /* Marco de foto */ .ruta-parada__media { position: relative; order: -1; margin: 0; aspect-ratio: 4 / 3; border-radius: calc(var(--ruta-radio) * .75); overflow: hidden; background: var(--verde-noche); } .ruta-parada__media::after { /* filete interior del marco */ content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crema) 16%, transparent); pointer-events: none; } .ruta-foto, .ruta-foto img { width: 100%; height: 100%; } .ruta-foto img { object-fit: cover; } .ruta-foto--campo img { object-position: 50% 35%; } .ruta-foto--catacion img { object-position: 45% 60%; } .ruta-foto--contenedor img { object-position: 60% 40%; } .ruta-foto--transito { display: none; } /* secado: solo como transición en modo fijo */ @media (min-width: 768px) { .ruta-paradas { padding-left: 3rem; } .ruta-paradas::before { left: .75rem; } .ruta-parada::before { left: calc(-3rem + .75rem + 1.5px); } .ruta-parada { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: center; } .ruta-parada__media { order: 0; border-radius: var(--ruta-radio); } } /* ---------- 2. Mapa de destinos (parada 04) ---------- */ .ruta-parada__media--mapa { aspect-ratio: auto; display: grid; background: var(--verde-noche); } .ruta-mapa { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: radial-gradient(120% 90% at 32% 70%, color-mix(in srgb, var(--verde-hoja) 45%, transparent), transparent 70%); } @media (max-width: 1023.98px) { /* Recorte del lienzo 900×675: x 35…815, y 10…498 (Américas + Atlántico + Europa occidental) */ .ruta-mapa__lienzo { left: -4.487%; top: -2.049%; width: 115.385%; transform: none; } .ruta-mapa__puntos { opacity: .34; } } .ruta-mapa__lienzo { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 900 / 675; transform: translateY(-50%); } .ruta-mapa__puntos, .ruta-mapa__rutas { position: absolute; inset: 0; width: 100%; height: 100%; } .ruta-mapa__puntos { opacity: .2; object-fit: contain; } .ruta-arco { stroke-dashoffset: 0; opacity: .8; transition: opacity .25s var(--ease-out), stroke .25s var(--ease-out), stroke-width .25s var(--ease-out); } .ruta-fin { transition: opacity .25s var(--ease-out); } .ruta-mapa.tiene-foco .ruta-arco:not(.is-on), .ruta-mapa.tiene-foco .ruta-fin:not(.is-on) { opacity: .22; } .ruta-arco.is-on { opacity: 1; stroke: var(--oro-suave); stroke-width: 2.8; } .ruta-fin.is-on { fill: var(--oro-suave); } .ruta-pin__pulso { transform-box: fill-box; transform-origin: center; opacity: 0; } .ruta-mapa__origen { position: absolute; left: 34.2%; top: 62%; font: 600 clamp(.625rem, .3vw + .55rem, .8125rem)/1.2 var(--font-body); letter-spacing: .04em; color: var(--crema); white-space: nowrap; } .ruta-destino { --tx: -50%; position: absolute; left: var(--x); top: var(--y); z-index: 2; padding: .3rem .6rem; border-radius: 999px; background: var(--crema); color: var(--verde-bosque); font: 600 .75rem/1.2 var(--font-body); white-space: nowrap; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--verde-noche) 80%, transparent); opacity: 0; transform: translate(var(--tx), calc(-100% - 6px)); transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); pointer-events: none; } .ruta-destino.is-on { opacity: 1; transform: translate(var(--tx), calc(-100% - 12px)); } .ruta-destino--de { --x: 80.78%; --y: 17.63%; --tx: -72%; } .ruta-destino--fr { --x: 76.33%; --y: 21.04%; --tx: -60%; } .ruta-destino--se { --x: 83.89%; --y: 9.26%; --tx: -80%; } .ruta-destino--ca { --x: 21.67%; --y: 14.07%; --tx: -30%; } .ruta-destino--us { --x: 20.56%; --y: 26.67%; --tx: -25%; } .ruta-destino--mx { --x: 18.33%; --y: 38.15%; --tx: -20%; } .ruta-mapa__pie { padding: .75rem .75rem 1rem; } .ruta-contador { /* <1024: fila propia sobre los chips (no tapa el mapa) */ display: flex; align-items: baseline; gap: .625rem; padding: .25rem .25rem .875rem; } .ruta-contador__num { min-width: 2ch; font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(2.25rem, 2vw + 1.5rem, 3.25rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--oro-suave); } .ruta-contador__txt { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--ruta-texto-suave); } .ruta-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; } .ruta-chip { width: 100%; min-height: 44px; padding: .5rem .625rem; border: 1px solid color-mix(in srgb, var(--crema) 32%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--verde-noche) 70%, transparent); color: var(--crema); font-size: .8125rem; font-weight: 600; line-height: 1.15; cursor: pointer; transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out); } .ruta-chip:hover, .ruta-chip:focus-visible, .ruta-chip[aria-pressed="true"] { background: var(--crema); border-color: var(--crema); color: var(--verde-bosque); } .ruta-chip:active { transform: scale(.97); } @media (min-width: 1024px) { .ruta-parada__media--mapa { aspect-ratio: 6 / 5; display: block; } .ruta-mapa { position: absolute; inset: 0; aspect-ratio: auto; } .ruta-mapa__pie { position: absolute; inset: auto 0 0; display: grid; z-index: 2; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 1.5rem; padding: 3rem 1.25rem 1.25rem; background: linear-gradient(to top, color-mix(in srgb, var(--verde-noche) 92%, transparent) 35%, transparent); } .ruta-contador { flex-direction: column; gap: .25rem; padding: 0; } .ruta-chips { max-width: 25rem; justify-self: end; } .ruta-chip { font-size: .75rem; } } /* ---------- 3. Cierre: cinta + CTA ---------- */ .ruta-cierre { display: grid; justify-items: center; gap: 1.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) var(--section-y); text-align: center; } .ruta-cinta { display: flex; align-items: center; gap: 1rem; max-width: 62rem; padding: 1rem 1.5rem; border: 1px solid color-mix(in srgb, var(--oro-suave) 55%, transparent); border-radius: 1.5rem; font-size: clamp(.95rem, .3vw + .9rem, 1.125rem); line-height: 1.45; text-align: left; color: var(--crema); } .ruta-cinta__icono { flex: none; width: 1.75rem; height: 1.75rem; padding-right: 1rem; box-sizing: content-box; border-right: 1px solid color-mix(in srgb, var(--oro-suave) 55%, transparent); color: var(--oro-suave); } .ruta-cta { display: inline-flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .875rem 1.75rem; border: 1.5px solid var(--crema); border-radius: 999px; color: var(--crema); font-weight: 600; text-decoration: none; transition: background-color .25s var(--ease-out), color .25s var(--ease-out); } .ruta-cta__flecha { transition: transform .25s var(--ease-out); } .ruta-cta:hover, .ruta-cta:focus-visible { background: var(--crema); color: var(--verde-bosque); } .ruta-cta:hover .ruta-cta__flecha, .ruta-cta:focus-visible .ruta-cta__flecha { transform: translateX(4px); } @media (min-width: 768px) { .ruta-cinta { border-radius: 999px; padding: 1rem 2rem; } } /* ---------- 4. Navegación de paradas (común a fijo y carrusel) ---------- */ .ruta-nav__lista { margin: 0; padding: 0; list-style: none; } .ruta-nav__btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; } .ruta-nav__btn::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--verde-bosque); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--crema) 55%, transparent); transition: transform .35s var(--ease-out), background-color .35s var(--ease-out), box-shadow .35s var(--ease-out); } .ruta-nav__btn:hover::before { transform: scale(1.25); box-shadow: 0 0 0 1.5px var(--crema); } .ruta-nav__btn.is-pasado::before { background: var(--crema); box-shadow: 0 0 0 1.5px var(--crema); } .ruta-nav__btn[aria-current="step"]::before { background: var(--rojo-grano); box-shadow: 0 0 0 2.5px var(--crema), 0 0 0 7px color-mix(in srgb, var(--crema) 14%, transparent); transform: scale(1.15); } .ruta-nav__linea { position: absolute; pointer-events: none; } .ruta-nav__relleno { position: absolute; inset: 0; background: var(--crema); } .ruta-nav__grano { position: absolute; display: none; } /* ========================================================================== 5. MODO FIJO · escritorio ≥1024 px (scrollytelling) ========================================================================== */ @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .js .ruta-head { padding-bottom: clamp(1rem, 3vw, 2.5rem); } .js .ruta-track { height: 480vh; } /* 380 vh de recorrido: 95 vh por parada ≥ paso de AvPág/Espacio (87,5–90 %) */ .js .ruta-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; padding-top: var(--header-hc); padding-bottom: var(--ruta-banda); overflow: hidden; } .js .ruta-rama--stage-a, .js .ruta-rama--stage-b { display: block; } .js .ruta-rama--stage-a { right: -4rem; top: calc(var(--header-hc) - 2rem); transform: scaleX(-1) rotate(-6deg); width: clamp(220px, 20vw, 320px); } .js .ruta-rama--stage-b { left: -3.5rem; bottom: -4.5rem; transform: rotate(-4deg) scaleY(-1); width: clamp(200px, 18vw, 300px); } /* Capa del camino */ .js .ruta-camino { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; } .ruta-camino__guia { opacity: .22; } .ruta-camino__revela { stroke-dashoffset: calc(1 - var(--g, 0)); } .ruta-camino__medida { display: none; } /* Hitos del camino */ .js .ruta-hitos { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .ruta-hito { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--verde-bosque); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--crema) 45%, transparent); transform: translate(calc(var(--x, -99) * 1px), calc(var(--y, -99) * 1px)); transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out); } .ruta-hito.is-pasado { background: var(--crema); box-shadow: 0 0 0 1.5px var(--crema); } .ruta-hito__txt { position: absolute; left: 50%; top: calc(100% + 1.4rem); translate: -50% 0; font: 700 .6875rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--crema) 55%, transparent); transition: color .4s var(--ease-out); } .ruta-hito.is-pasado .ruta-hito__txt { color: var(--oro-suave); } .ruta-hito--arriba .ruta-hito__txt { top: auto; bottom: calc(100% + .75rem); } .ruta-hito--final .ruta-hito__txt { left: auto; right: calc(100% + 1.5rem); top: 1.1rem; translate: 0 0; } /* Grano viajero: offset-path = camino (px del escenario), gira con la tangente */ .js .ruta-grano { display: block; position: absolute; left: 0; top: 0; z-index: 4; width: 40px; height: 33px; offset-path: var(--ruta-d, none); offset-distance: calc(var(--g, 0) * 100%); offset-rotate: auto; offset-anchor: 50% 50%; will-change: transform; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--verde-noche) 70%, transparent)); } .ruta-grano svg { width: 100%; height: 100%; } /* Rejilla: riel 1 col | paradas 5/12 · 7/12 */ .js .ruta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; height: 100%; max-height: 46rem; } /* Riel vertical de progreso con puntos-botón */ .js .ruta-nav { display: block; position: relative; align-self: center; height: min(20rem, 42vh); } .js .ruta-nav__lista { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .js .ruta-nav__linea { top: 22px; bottom: 22px; left: 21px; width: 2px; background: var(--ruta-linea); } .js .ruta-nav__relleno { transform-origin: 50% 0; transform: scaleY(var(--p, 0)); } .js .ruta-paradas { display: grid; padding: 0; height: 100%; align-items: center; } .js .ruta-paradas::before { display: none; } .js .ruta-parada { grid-area: 1 / 1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4.5vw, 5rem); align-items: center; height: 100%; } .js .ruta-parada::before { display: none; } .js .ruta-parada__texto { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); } .js .ruta-parada.is-active .ruta-parada__texto { opacity: 1; transform: none; transition-duration: .55s, .65s; transition-delay: .15s; } .js .ruta-parada__num { font-size: clamp(5rem, 7.5vw, 7.5rem); } /* Marco: crossfade + zoom 1.06 → 1 (el entrante encima; el saliente se retira al terminar) */ .js .ruta-parada__media { justify-self: end; width: min(100%, calc((100vh - var(--header-hc) - var(--ruta-banda) - 2.5rem) * 6 / 5)); aspect-ratio: 6 / 5; z-index: 1; opacity: 0; transition: opacity 0s linear .7s; } .js .ruta-parada.is-active .ruta-parada__media { z-index: 2; opacity: 1; transition: opacity .7s var(--ease-out); } .js .ruta-foto img, .js .ruta-mapa { transform: scale(1.06); transition: transform .7s var(--ease-out) .05s; } .js .ruta-parada.is-active .ruta-foto img, .js .ruta-parada.is-active .ruta-mapa { transform: none; } .js .ruta-foto--transito { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); } .js .ruta.en-transito .ruta-foto--transito { opacity: 1; } .js .ruta.en-transito .ruta-foto--transito img { transform: none; } /* Arcos escalonados 120 ms al entrar en la parada 04 */ .js .ruta-arco { stroke-dashoffset: 1; } .js .ruta-fin { opacity: 0; } .js .ruta-parada.is-active .ruta-arco { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) calc(.35s + var(--i, 0) * 120ms), opacity .25s var(--ease-out), stroke .25s var(--ease-out), stroke-width .25s var(--ease-out); } .js .ruta-parada.is-active .ruta-fin { opacity: 1; transition: opacity .3s var(--ease-out) calc(1.05s + var(--i, 0) * 120ms); } .js .ruta-parada.is-active .ruta-mapa.tiene-foco .ruta-fin:not(.is-on) { opacity: .22; transition-delay: 0s; } .js .ruta-parada.is-active .ruta-pin__pulso { animation: ruta-pulso 2.4s var(--ease-out) .3s infinite; } } /* Orden del escalonado (sin atributos style) */ .ruta-arco:nth-child(2), .ruta-fin:nth-child(2) { --i: 1; } .ruta-arco:nth-child(3), .ruta-fin:nth-child(3) { --i: 2; } .ruta-arco:nth-child(4), .ruta-fin:nth-child(4) { --i: 3; } .ruta-arco:nth-child(5), .ruta-fin:nth-child(5) { --i: 4; } .ruta-arco:nth-child(6), .ruta-fin:nth-child(6) { --i: 5; } /* ========================================================================== 6. MODO CARRUSEL · <1024 px (scroll-snap horizontal guiado) ========================================================================== */ @media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) { .js .ruta-inner { padding-inline: 0; } /* Línea de ruta horizontal con grano */ .js .ruta-nav { display: block; position: relative; width: min(100% - 2 * var(--pad-x), 30rem); margin: 0 auto 1rem; } .js .ruta-nav__lista { position: relative; display: flex; justify-content: space-between; } .js .ruta-nav__linea { left: 22px; right: 22px; top: 21px; height: 2px; background: radial-gradient(circle, color-mix(in srgb, var(--crema) 45%, transparent) 1px, transparent 1.5px) 0 50% / 9px 2px repeat-x; } .js .ruta-nav__relleno { transform-origin: 0 50%; transform: scaleX(var(--pc, 0)); transition: transform .6s var(--ease-out); } .js .ruta-nav__grano { display: block; left: 0; top: 50%; z-index: 2; width: 30px; height: 25px; margin: -12.5px 0 0 -15px; transform: translateX(calc(var(--gx, 0) * 1px)) rotate(calc(var(--gr, 0) * 1deg)); transition: transform .6s var(--ease-out); filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--verde-noche) 70%, transparent)); } .js .ruta-nav__grano svg { width: 100%; height: 100%; } .js .ruta-nav__btn[aria-current="step"]::before { background: var(--verde-bosque); box-shadow: 0 0 0 2px var(--crema); transform: scale(1.4); } /* Carril */ .js .ruta-paradas { display: flex; gap: 1rem; margin: 0; padding: .5rem var(--pad-x) 1.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: none; } .js .ruta-paradas::-webkit-scrollbar { display: none; } .js .ruta-paradas::before { display: none; } .js .ruta-paradas:focus-visible { outline-offset: -4px; border-radius: 1.5rem; } /* Tarjeta: foto arriba, texto abajo (crema como en la lámina 3) */ .js .ruta-parada { flex: 0 0 min(86%, 26rem); display: flex; flex-direction: column; gap: 0; padding: .625rem .625rem 1.5rem; border-radius: 1.5rem; background: var(--crema); color: var(--carbon); align-self: flex-start; scroll-snap-align: start; scroll-snap-stop: always; } .js .ruta-parada::before { display: none; } .js .ruta-parada__media { order: -1; border-radius: 1.125rem; } .js .ruta-parada__texto { position: static; padding: 1.25rem .75rem 0; } .js .ruta-parada__num { /* sello numerado sobre la foto, como la lámina 3 */ position: absolute; top: 1.25rem; left: 1.25rem; z-index: 4; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--verde-bosque); box-shadow: 0 0 0 2px var(--oro-suave); font-size: 1.375rem; letter-spacing: -.02em; line-height: 1; } .js .ruta-parada--mundo { container-type: inline-size; } .js .ruta-parada--mundo .ruta-parada__num { left: auto; right: 1.125rem; top: calc(.625rem + (100cqw - 1.25rem) * 5 / 8 - 3.25rem - .625rem); background: color-mix(in srgb, var(--verde-bosque) 88%, transparent); } .js .ruta-parada { --foco: var(--rojo-grano); } .js .ruta-parada__media--mapa { --foco: var(--oro-suave); } .js .ruta-parada__lugar { margin-top: 0; color: var(--cafe-tierra); } .js .ruta-parada__titulo { color: var(--verde-bosque); font-size: clamp(1.5rem, 2.5vw + 1rem, 2rem); } .js .ruta-parada--mundo .ruta-parada__titulo { font-size: clamp(1.3rem, 2vw + .9rem, 1.75rem); } .js .ruta-parada__desc { color: var(--carbon); } .js .ruta-parada--mundo .ruta-parada__desc { /* redundante con contador + chips: solo para lectores de pantalla */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Mapa compacto: arcos se dibujan al llegar a la tarjeta */ .js .ruta-arco { stroke-dashoffset: 1; } .js .ruta-fin { opacity: 0; } .js .ruta-parada.is-active .ruta-arco { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease-out) calc(.2s + var(--i, 0) * 120ms), opacity .25s var(--ease-out), stroke .25s var(--ease-out); } .js .ruta-parada.is-active .ruta-fin { opacity: 1; transition: opacity .3s var(--ease-out) calc(.8s + var(--i, 0) * 120ms); } .js .ruta-parada.is-active .ruta-mapa.tiene-foco .ruta-fin:not(.is-on) { opacity: .22; transition-delay: 0s; } .js .ruta-parada.is-active .ruta-pin__pulso { animation: ruta-pulso 2.4s var(--ease-out) .3s infinite; } } @keyframes ruta-pulso { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(3.2); opacity: 0; } } /* ========================================================================== 7. SCROLL-DRIVEN ANIMATIONS (si hay soporte; .sda la pone main.js con la misma condición) Las mismas curvas que el respaldo JS: reposo en cada hito y viaje con ease-in-out. ========================================================================== */ /* Se exige también animation-range: Firefox (con la preferencia activada) acepta animation-timeline pero no animation-range, y el grano quedaría al final del camino. */ @supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) { @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) { .js.sda .ruta-track { view-timeline: --ruta block; } .js.sda .ruta-grano { animation: ruta-g-grano linear both; animation-timeline: --ruta; animation-range: contain 0% contain 100%; } .js.sda .ruta-camino__revela { animation: ruta-g-trazo linear both; animation-timeline: --ruta; animation-range: contain 0% contain 100%; } .js.sda .ruta-nav__relleno { animation: ruta-g-riel linear both; animation-timeline: --ruta; animation-range: contain 0% contain 100%; } /* Encabezado: entra al aparecer en pantalla */ .js.sda .ruta-head > :not(.ruta-rama) { animation: ruta-sube linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; } } @media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) { /* Tarjetas laterales: se reducen un poco y solo se atenúa la FOTO (el texto conserva su contraste AA; la opacidad sobre la tarjeta entera bajaba los números a ~2,7:1) */ .js.sda .ruta-parada { animation: ruta-foco-tarjeta linear both; animation-timeline: view(inline); } .js.sda .ruta-foto img, .js.sda .ruta-mapa__puntos, .js.sda .ruta-mapa__rutas { animation: ruta-foco-media linear both; animation-timeline: view(inline); } } } @keyframes ruta-g-grano { 0%, 10% { offset-distance: calc(var(--w0) * 100%); animation-timing-function: ease-in-out; } 25%, 35% { offset-distance: calc(var(--w1) * 100%); animation-timing-function: ease-in-out; } 50%, 60% { offset-distance: calc(var(--w2) * 100%); animation-timing-function: ease-in-out; } 75%, 100% { offset-distance: calc(var(--w3) * 100%); } } @keyframes ruta-g-trazo { 0%, 10% { stroke-dashoffset: calc(1 - var(--w0)); animation-timing-function: ease-in-out; } 25%, 35% { stroke-dashoffset: calc(1 - var(--w1)); animation-timing-function: ease-in-out; } 50%, 60% { stroke-dashoffset: calc(1 - var(--w2)); animation-timing-function: ease-in-out; } 75%, 100% { stroke-dashoffset: calc(1 - var(--w3)); } } @keyframes ruta-g-riel { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes ruta-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes ruta-foco-tarjeta { 0% { transform: scale(.94); } 35%, 65% { transform: none; } 100% { transform: scale(.94); } } @keyframes ruta-foco-media { 0% { opacity: .5; } 35%, 65% { opacity: 1; } 100% { opacity: .5; } } /* ---------- 7.5 COMPROMISOS · #compromisos ---------- */ .compromisos { position: relative; padding-top: var(--section-y); background: var(--crema); overflow-x: clip; } .rama--comp-a { top: -1rem; left: -4rem; transform: rotate(10deg); } .rama--comp-b { right: -4.5rem; bottom: 9rem; transform: scaleX(-1) rotate(12deg); width: clamp(150px, 18vw, 280px); } .compromisos .container { position: relative; z-index: 1; } .compromisos__lista { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .compromiso__card { position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: color-mix(in srgb, var(--crema-2) 55%, var(--crema)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 12%, transparent), 0 24px 44px -34px color-mix(in srgb, var(--verde-noche) 70%, transparent); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .compromiso__card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-hoja) 30%, transparent), 0 30px 50px -30px color-mix(in srgb, var(--verde-noche) 70%, transparent); } .compromiso__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--crema-2); } .compromiso__foto picture, .compromiso__foto img { width: 100%; height: 100%; } .compromiso__foto img { object-fit: cover; transition: transform .9s var(--ease-out); } .compromiso__card:hover .compromiso__foto img { transform: scale(1.05); } .compromiso:nth-child(1) .compromiso__foto img { object-position: 55% 45%; } .compromiso:nth-child(2) .compromiso__foto img { object-position: 40% 40%; } .compromiso:nth-child(3) .compromiso__foto img { object-position: 45% 30%; } .compromiso__cuerpo { position: relative; display: grid; justify-items: center; gap: .875rem; padding: 0 clamp(1.25rem, 3vw, 1.75rem) 1.75rem; text-align: center; } .compromiso__titulo { margin-top: -1.5rem; /* píldora verde montada sobre la foto (lámina 4) */ z-index: 1; padding: .75rem 1.5rem; border-radius: 999px; background: var(--verde-bosque); color: var(--crema); font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 48; font-size: clamp(1.125rem, .5vw + 1rem, 1.3125rem); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--verde-noche) 85%, transparent); } .compromiso__cuerpo::after { /* filete corto rojo entre título y texto */ content: ""; order: 1; width: 28px; height: 2px; background: var(--rojo-grano); transition: width .5s var(--ease-out); } .compromiso__texto { order: 2; max-width: 30ch; color: var(--carbon); text-wrap: pretty; } .compromiso__card:hover .compromiso__cuerpo::after { width: 56px; } .compromisos__cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); } /* Pie: onda + cinta de valores (marquee lento; estático con reduced-motion) */ .valores { position: relative; margin-top: clamp(3.5rem, 7vw, 5.5rem); } .onda--valores { height: clamp(40px, 6vw, 90px); margin-bottom: -2px; } .valores__banda { background: var(--verde-bosque); color: var(--crema); padding-block: .5rem 1.75rem; } .valores__marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); } .valores__pista { display: flex; flex: none; align-items: center; } .valores__pista li { display: inline-flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); font-family: var(--font-display); font-weight: 500; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: clamp(1.0625rem, .8vw + .9rem, 1.5rem); letter-spacing: .08em; white-space: nowrap; } .valores__pista li::after { content: ""; width: 1.125rem; height: .875rem; background: var(--grano-svg) center / contain no-repeat; transform: rotate(-24deg); } @media (min-width: 768px) { .compromisos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 2vw, 1.75rem); } .compromiso:nth-child(2) .compromiso__card { margin-top: 2.5rem; } /* ritmo editorial escalonado */ } /* ---------- 7.6 CAFÉS · #cafes (tarjetas con reverso) ---------- Sin JS: las dos caras se ven una debajo de la otra. Con JS (.cafe.is-montada): caras apiladas en la misma celda (la tarjeta mide lo que la cara más alta) y giro 3D; con reduced-motion, fundido. Estados: .is-girada (fijada o hover), gestionados por cafes.js. */ .cafes { position: relative; padding-block: var(--section-y); background: linear-gradient(to bottom, var(--crema-2), var(--crema) 85%); overflow-x: clip; } .rama--cafes-a { top: -1.5rem; right: -4rem; transform: scaleX(-1) rotate(-6deg); } .rama--cafes-b { left: -5rem; bottom: 3rem; width: clamp(140px, 16vw, 240px); transform: rotate(8deg); } .cafes .container { position: relative; z-index: 1; } .cafes__cabecera { display: grid; gap: 1.25rem; } .cafes__nota { display: none; } .js .cafes__nota { display: inline-flex; align-items: flex-end; gap: .5rem; justify-self: start; font-family: var(--font-display); font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: clamp(1.0625rem, .4vw + .95rem, 1.25rem); line-height: 1.2; color: var(--cafe-tierra); } .cafes__nota-flecha { flex: none; width: 3.25rem; height: 2rem; transform: translateY(.9rem); color: var(--rojo-grano); } .cafes__lista { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); } .cafe { display: grid; --alt-min: 800; --alt-max: 2000; } .cafe--kuntu { --alt-min: 1200; --alt-max: 1900; } .cafe--flor { --alt-min: 900; --alt-max: 1900; } .cafe--aurora { --alt-min: 1000; --alt-max: 1500; } .cafe__card { position: relative; display: grid; border-radius: var(--radio); transform: perspective(1400px) translate3d(0, var(--lift, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); } .cafe__card::before { /* sombra de elevación (solo opacidad) */ content: ""; position: absolute; inset: 6% 4% -2%; z-index: -1; border-radius: inherit; box-shadow: 0 40px 60px -30px color-mix(in srgb, var(--verde-noche) 70%, transparent); opacity: 0; transition: opacity .5s var(--ease-out); } .cafe__card:hover { --lift: -6px; } .cafe__card:hover::before { opacity: 1; } .cafe__giro { position: relative; display: grid; gap: .75rem; transform-style: preserve-3d; } .cafe.is-montada .cafe__giro { gap: 0; } .cafe.is-montada .cafe__cara { grid-area: 1 / 1; } .cafe__cara { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radio); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cafe__cara--frente { background: var(--crema); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 12%, transparent), 0 24px 44px -34px color-mix(in srgb, var(--verde-noche) 70%, transparent); } .cafe__cara--reverso { background: var(--verde-bosque); color: var(--crema); --foco: var(--oro-suave); } /* Frente */ .cafe__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--crema-2); } .cafe__foto .cafe__picture, .cafe__foto img { width: 100%; height: 100%; } .cafe__foto img { object-fit: cover; transition: transform 1s var(--ease-out); } .cafe--kuntu .cafe__foto img { object-position: 60% 40%; } .cafe--flor .cafe__foto img { object-position: 50% 45%; } .cafe--aurora .cafe__foto img { object-position: 50% 30%; } .cafe__card:hover .cafe__foto img { transform: scale(1.05); } .cafe__num { position: absolute; top: .875rem; left: .875rem; padding: .25rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--verde-noche) 62%, transparent); color: var(--crema); font: 600 .875rem/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; letter-spacing: .06em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .cafe__cuerpo { position: relative; flex: 1; display: grid; align-content: start; gap: .75rem; padding: 1.5rem 1.5rem 5rem; } .cafe__titulo { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: clamp(1.5rem, .9vw + 1.15rem, 1.875rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; color: var(--verde-bosque); } .cafe__titulo::after { /* filete rojo que crece en hover */ content: ""; display: block; width: 28px; height: 2px; margin-top: .75rem; background: var(--rojo-grano); transform-origin: 0 50%; transition: transform .5s var(--ease-out); } .cafe__card:hover .cafe__titulo::after { transform: scaleX(2); } .cafe__desc { font-size: clamp(.9375rem, .2vw + .9rem, 1rem); color: var(--carbon); text-wrap: pretty; } .cafe__altura { position: absolute; left: 1.5rem; bottom: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .875rem; font-weight: 600; color: var(--cafe-tierra); } .cafe__altura-icono { flex: none; width: 1.25rem; height: 1.25rem; } /* Reverso: ficha técnica */ .cafe__fondo { position: absolute; inset: 0; } .cafe__fondo .cafe__picture, .cafe__fondo img { width: 100%; height: 100%; } .cafe__fondo img { object-fit: cover; opacity: .42; filter: grayscale(.3); } .cafe__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(175deg, color-mix(in srgb, var(--verde-bosque) 92%, transparent) 0%, color-mix(in srgb, var(--verde-bosque) 80%, transparent) 45%, var(--verde-noche) 88%); } .cafe__ficha { position: relative; flex: 1; display: flex; flex-direction: column; gap: 1.125rem; padding: 1.5rem 1.5rem 1.25rem; } .cafe__ficha-eyebrow { display: flex; align-items: center; gap: .625rem; font: 700 .6875rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-suave); } .cafe__ficha-eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--oro-suave); } .cafe__ficha-titulo { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: clamp(1.5rem, .9vw + 1.15rem, 1.875rem); line-height: 1.1; letter-spacing: -.02em; color: var(--crema); } .cafe__datos { display: grid; gap: 1.125rem; margin: 0; } .cafe__dato dt { margin-bottom: .375rem; font: 700 .6875rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--crema) 72%, transparent); } .cafe__dato dd { margin: 0; } .cafe__dato--linea dd { font-family: var(--font-display); font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 24; font-size: .9375rem; line-height: 1.45; color: color-mix(in srgb, var(--crema) 88%, transparent); text-wrap: pretty; } .cafe__dato-valor { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 48; font-size: 1.1875rem; color: var(--crema); } .cafe__escala { position: relative; display: block; height: 6px; margin-top: .625rem; border-radius: 3px; background: color-mix(in srgb, var(--crema) 16%, transparent); } .cafe__rango { position: absolute; top: 0; bottom: 0; left: calc((var(--alt-min) - 800) / 1200 * 100%); width: calc((var(--alt-max) - var(--alt-min)) / 1200 * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--oro-suave), var(--crema)); transform-origin: 0 50%; } .cafe__escala-marcas { display: flex; justify-content: space-between; margin-top: .375rem; font-size: .6875rem; font-weight: 500; color: color-mix(in srgb, var(--crema) 62%, transparent); } .cafe__tags { display: flex; flex-wrap: wrap; gap: .375rem; } .cafe__tags li { padding: .3rem .7rem; border: 1px solid color-mix(in srgb, var(--crema) 32%, transparent); border-radius: 999px; font-size: .8125rem; font-weight: 500; line-height: 1.25; } .cafe__cta { align-self: flex-start; margin-top: auto; min-height: 2.75rem; padding: .5625rem 1.0625rem; font-size: .9375rem; } /* Botón "Ver ficha" (fuera de las caras: no gira; solo con JS) */ .cafe__girar { display: none; } .js .cafe__girar { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: .5rem 1rem .5rem .8125rem; border: 1.5px solid color-mix(in srgb, var(--verde-bosque) 28%, transparent); border-radius: 999px; background: var(--crema); color: var(--verde-bosque); font-size: .875rem; font-weight: 600; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out); } .js .cafe__girar:hover { background: var(--verde-bosque); border-color: var(--verde-bosque); color: var(--crema); } .js .cafe__girar:active { transform: scale(.96); } .cafe__girar-icono { flex: none; width: 1.125rem; height: 1.125rem; transition: transform .6s var(--ease-out); } .cafe__girar:hover .cafe__girar-icono { transform: rotate(180deg); } .js .cafe.is-girada .cafe__girar { width: 44px; padding: 0; border-color: color-mix(in srgb, var(--crema) 50%, transparent); background: transparent; color: var(--crema); --foco: var(--oro-suave); } .js .cafe.is-girada .cafe__girar:hover { background: var(--crema); border-color: var(--crema); color: var(--verde-bosque); } .cafe.is-girada .cafe__girar-txt { /* en el reverso: solo ícono (el nombre accesible se conserva) */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Giro: 3D con movimiento permitido, fundido con movimiento reducido */ @media (prefers-reduced-motion: no-preference) { .cafe__giro { transition: transform .9s cubic-bezier(.65, 0, .25, 1); } .cafe.is-montada .cafe__cara--reverso { transform: rotateY(180deg); } .cafe.is-girada .cafe__giro { transform: rotateY(180deg); } } @media (prefers-reduced-motion: reduce) { .cafe.is-montada .cafe__cara { transition: opacity .3s linear; } .cafe.is-montada .cafe__cara--reverso { opacity: 0; } .cafe.is-girada .cafe__cara--reverso { opacity: 1; } .cafe.is-girada .cafe__cara--frente { opacity: 0; } .cafe__card { transform: none; } } .cafes__cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 640px) and (max-width: 1023.98px) { /* Tableta: tarjeta horizontal (foto | texto) */ .cafes__lista { gap: 1.75rem; } .cafe__cara--frente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 19rem; } .cafe__foto { aspect-ratio: auto; } .cafe__foto .cafe__picture { position: absolute; inset: 0; } .cafe__ficha { padding: 1.75rem 2rem 1.5rem; } .cafe__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; } } @media (min-width: 1024px) { .cafes__cabecera { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; } .js .cafes__nota { justify-self: end; margin-bottom: .5rem; } .cafes__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); } } @media (max-width: 359.98px) { .cafe__cuerpo, .cafe__ficha { padding-inline: 1.125rem; } .cafe__altura { left: 1.125rem; } .js .cafe__girar { right: 1rem; } .cafe__cta { padding-inline: .875rem; font-size: .875rem; } } /* ---------- 7.7 EQUIPO · #equipo ---------- */ .equipo { position: relative; padding-block: var(--section-y); background: var(--crema); overflow-x: clip; } .rama--equipo-a { top: -1rem; left: -4.5rem; transform: rotate(10deg); } .rama--equipo-b { right: -4.5rem; bottom: 2rem; width: clamp(150px, 18vw, 280px); transform: scaleX(-1) rotate(10deg); } .equipo .container { position: relative; z-index: 1; } .equipo__carrusel { margin-top: clamp(2.5rem, 5vw, 3.5rem); } /* Móvil: carril horizontal con scroll-snap (sin JS también funciona) */ .equipo__lista { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 20rem); gap: 1rem; margin-inline: calc(-1 * var(--pad-x)); padding: .5rem var(--pad-x) 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: none; } .equipo__lista::-webkit-scrollbar { display: none; } html:not(.js) .equipo__lista { scrollbar-width: thin; } .persona { display: grid; scroll-snap-align: start; } .persona__card { position: relative; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: color-mix(in srgb, var(--crema-2) 55%, var(--crema)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 12%, transparent), 0 24px 44px -34px color-mix(in srgb, var(--verde-noche) 70%, transparent); transition: transform .5s var(--ease-out); } .persona__card:hover { transform: translateY(-4px); } .persona__card:focus-visible { outline-offset: 4px; border-radius: var(--radio); } .persona__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--crema-2); } .persona__foto picture, .persona__foto img { width: 100%; height: 100%; } .persona__foto img { object-fit: cover; object-position: 50% 24%; transition: transform 1.1s var(--ease-out); } .persona--gover .persona__foto img { object-position: 45% 20%; } .persona__card:hover .persona__foto img, .persona__card:focus-visible .persona__foto img { transform: scale(1.06); } .persona__cuerpo { position: relative; display: grid; align-content: start; gap: .375rem; padding: 1.25rem 1.25rem 1.5rem; } .persona__nombre { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 48; font-size: clamp(1.1875rem, .5vw + 1rem, 1.4375rem); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; color: var(--verde-bosque); } .persona__nombre::after { content: ""; display: block; width: 28px; height: 2px; margin-top: .625rem; background: var(--rojo-grano); transform-origin: 0 50%; transition: transform .5s var(--ease-out); } .persona__card:hover .persona__nombre::after, .persona__card:focus-visible .persona__nombre::after { transform: scaleX(2); } .persona__cargo { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--cafe-tierra); } .persona__frase { margin-top: .375rem; font-size: .9375rem; line-height: 1.5; color: var(--carbon); text-wrap: pretty; } /* Puntero fino + JS: la frase vive sobre la foto y se revela con máscara en hover / foco */ @media (hover: hover) and (pointer: fine) { .js .persona__frase { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0; padding: 4rem 1.25rem 1.125rem; background: linear-gradient(to top, color-mix(in srgb, var(--verde-noche) 94%, transparent) 35%, transparent); color: var(--crema); clip-path: inset(100% 0 0 0); transition: clip-path .6s var(--ease-out); } .js .persona__frase span { display: block; opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); } .js .persona__card:hover .persona__frase, .js .persona__card:focus-visible .persona__frase { clip-path: inset(0 0 0 0); } .js .persona__card:hover .persona__frase span, .js .persona__card:focus-visible .persona__frase span { opacity: 1; transform: none; transition-delay: .12s; } } /* Controles del carrusel (solo con JS y <768 px) */ .equipo__controles { display: none; } .js .equipo__carrusel.is-carrusel .equipo__controles { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .25rem; } .equipo__flecha { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1.5px solid color-mix(in srgb, var(--verde-bosque) 30%, transparent); border-radius: 50%; background: var(--crema); color: var(--verde-bosque); transition: background-color .25s var(--ease-out), color .25s var(--ease-out), opacity .25s var(--ease-out), transform .25s var(--ease-out); } .equipo__flecha svg { width: 1.125rem; height: 1.125rem; } .equipo__flecha--prev svg { transform: scaleX(-1); } .equipo__flecha:hover { background: var(--verde-bosque); color: var(--crema); } .equipo__flecha:active { transform: scale(.94); } .equipo__flecha[aria-disabled="true"] { opacity: .35; cursor: default; } .equipo__flecha[aria-disabled="true"]:hover { background: var(--crema); color: var(--verde-bosque); } .equipo__progreso { display: grid; justify-items: center; gap: .5rem; min-width: 7.5rem; } .equipo__contador { font: 600 .9375rem/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .06em; color: var(--verde-bosque); } .equipo__barra { position: relative; display: block; width: 7.5rem; height: 2px; overflow: hidden; background: color-mix(in srgb, var(--cafe-tierra) 22%, transparent); } .equipo__barra-in { position: absolute; inset: 0 auto 0 0; width: calc(100% / 6); background: var(--rojo-grano); transform: translateX(calc(var(--activo, 0) * 100%)); transition: transform .45s var(--ease-out); } @media (min-width: 768px) { .equipo__lista { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; } .persona:nth-child(3n + 2) { margin-top: 2.5rem; margin-bottom: -2.5rem; } /* ritmo escalonado */ .equipo__carrusel { padding-bottom: 2.5rem; } } @media (min-width: 1024px) { .equipo__lista { max-width: 68rem; margin-inline: auto; } } /* ---------- 7.8 CLIENTES · #clientes ---------- */ .clientes { position: relative; padding-block: var(--section-y); background: linear-gradient(to bottom, var(--crema), var(--crema-2) 45%, var(--crema) 100%); overflow-x: clip; } .rama--clientes-a { top: -1rem; right: -4rem; transform: scaleX(-1) rotate(-8deg); } .rama--clientes-b { left: -5rem; bottom: 6rem; width: clamp(140px, 16vw, 240px); transform: rotate(6deg); } .clientes .container { position: relative; z-index: 1; } .subtitulo-filete { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 48; font-size: clamp(1.1875rem, .6vw + 1rem, 1.5rem); letter-spacing: -.01em; color: var(--verde-bosque); text-align: center; } .subtitulo-filete::before, .subtitulo-filete::after { content: ""; flex: 0 1 clamp(2rem, 8vw, 7rem); height: 1px; background: color-mix(in srgb, var(--cafe-tierra) 40%, transparent); } /* Marquee de logos (mono → color en hover) */ .logos { position: relative; z-index: 1; margin-top: 1.25rem; --logo-h: clamp(38px, 2.4vw + 26px, 60px); } .logos__marquee { display: flex; overflow: hidden; padding-block: .75rem; -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); } .logos__pista { display: flex; flex: none; align-items: center; } .logo { position: relative; display: grid; place-items: center; flex: none; height: calc(var(--logo-h) * 1.3); padding-inline: clamp(1.5rem, 3vw, 2.75rem); --escala: 1; } .logo img { width: auto; height: calc(var(--logo-h) * var(--escala)); max-width: none; } .logo__mono { opacity: .7; transition: opacity .4s var(--ease-out); } .logo__color { position: absolute; top: 50%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); } .logo:hover .logo__mono { opacity: 0; } .logo:hover .logo__color { opacity: 1; transform: translate(-50%, -50%); } /* Escala óptica (src/assets/logos/clientes.json → escala_sugerida) */ .logo--mokuska { --escala: .68; } .logo--cumpa { --escala: .89; } .logo--sustainable-harvest { --escala: .6; } .logo--kaffee-korrekte { --escala: 1.2; } .logo--eins-alles { --escala: 1; } .logo--kaffeemanufaktur-wurzburg { --escala: 1; } .logo--berghaus-schwefelberg { --escala: .6; } .logo--nfc-farmland-coffee { --escala: 1.2; } .logo--suedhang { --escala: 1.1; } .logos__pie { display: flex; align-items: center; justify-content: center; gap: .75rem 1rem; margin-top: .5rem; } .logos__pausa { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--verde-bosque) 28%, transparent); border-radius: 50%; background: transparent; color: var(--verde-bosque); transition: background-color .25s var(--ease-out), color .25s var(--ease-out); } .logos__pausa:hover { background: var(--verde-bosque); color: var(--crema); } .logos__pausa--claro { border-color: color-mix(in srgb, var(--crema) 45%, transparent); color: var(--crema); } .logos__pausa--claro:hover { background: var(--crema); color: var(--verde-bosque); } .valores__pie { display: flex; justify-content: flex-end; margin-top: .75rem; } .logos__pausa-icono { grid-area: 1 / 1; width: 1rem; height: 1rem; } .logos__pausa-icono--play, .logos__pausa[aria-pressed="true"] .logos__pausa-icono--pausa { display: none; } .logos__pausa[aria-pressed="true"] .logos__pausa-icono--play { display: block; } html:not(.js) .logos__pausa { display: none; } /* Bloque de destinos: chips + mapa editorial */ .destinos-bloque { display: grid; gap: 2rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); } .destinos-bloque__titulo { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 72; font-size: clamp(1.625rem, 1.3vw + 1.1rem, 2.25rem); line-height: 1.1; letter-spacing: -.02em; color: var(--verde-bosque); } .destinos-bloque__intro { margin-top: .625rem; color: var(--carbon); } html:not(.js) .destinos-bloque__intro { display: none; } .destinos-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; margin-top: 1.5rem; } .destinos-grupo__region { margin-bottom: .625rem; font: 700 .6875rem/1.2 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--cafe-tierra); } .destinos-grupo__chips { display: grid; gap: .5rem; } .destino-chip { display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 44px; padding: .5rem .875rem .5rem .625rem; border: 1px solid color-mix(in srgb, var(--verde-bosque) 18%, transparent); border-radius: 999px; background: var(--crema); color: var(--verde-bosque); font-size: .9375rem; font-weight: 600; line-height: 1.15; text-align: left; transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); } .destino-chip .bandera { flex: none; width: 1.625rem; height: 1.0833rem; box-shadow: 0 0 0 1px color-mix(in srgb, var(--carbon) 14%, transparent); } .destino-chip__pais { min-width: 0; } .destino-chip::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: color-mix(in srgb, var(--verde-hoja) 45%, transparent); transition: transform .3s var(--ease-out), background-color .3s var(--ease-out); } .destino-chip:hover, .destino-chip.is-on { border-color: var(--verde-hoja); } .destino-chip:hover .bandera, .destino-chip.is-on .bandera { transform: translateY(-2px) rotate(-3deg); } .destino-chip[aria-pressed="true"] { background: var(--verde-bosque); border-color: var(--verde-bosque); color: var(--crema); --foco: var(--rojo-grano); } .destino-chip.is-on::after, .destino-chip[aria-pressed="true"]::after { background: var(--rojo-grano); transform: scale(1.3); } .destino-chip[aria-pressed="true"]::after { box-shadow: 0 0 0 2px var(--crema); } .destino-chip:active { transform: scale(.97); } .dm { margin: 0; } .dm__marco { position: relative; aspect-ratio: 770 / 480; /* recorte x 60…830, y 20…500 del lienzo 900×675 */ overflow: hidden; border-radius: var(--radio-l); background: radial-gradient(70% 90% at 32% 72%, color-mix(in srgb, var(--verde-hoja) 9%, var(--crema)), transparent 70%), var(--crema); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 14%, transparent), 0 40px 70px -50px color-mix(in srgb, var(--verde-noche) 70%, transparent); } .dm__lienzo { position: absolute; left: -7.792%; top: -4.1667%; width: 116.883%; aspect-ratio: 900 / 675; } .dm__puntos { position: absolute; inset: 0; background: var(--cafe-tierra); opacity: .3; -webkit-mask: url("../img/mapa-puntos.svg") center / 100% 100% no-repeat; mask: url("../img/mapa-puntos.svg") center / 100% 100% no-repeat; } .dm__rutas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dm-arco { stroke-dashoffset: 0; opacity: .75; transition: opacity .3s var(--ease-out), stroke .3s var(--ease-out), stroke-width .3s var(--ease-out); } .dm.tiene-foco .dm-arco:not(.is-on) { opacity: .16; } .dm-arco.is-on { stroke: var(--rojo-grano); stroke-width: 3; opacity: 1; } .dm-flujo { opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none; } .dm-flujo.is-on { opacity: .9; } .dm-fin { cursor: pointer; transition: opacity .3s var(--ease-out); } .dm.tiene-foco .dm-fin:not(.is-on) { opacity: .4; } .dm-fin__punto { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease-out); } .dm-fin.is-on .dm-fin__punto { fill: var(--rojo-grano); transform: scale(1.25); } .dm-fin__halo { opacity: 0; transform-box: fill-box; transform-origin: center; } .dm-origen__pulso { opacity: 0; transform-box: fill-box; transform-origin: center; } .dm-origen__etiqueta { position: absolute; left: calc(32.222% + 16px); top: 60%; padding: .25rem .625rem; border-radius: 999px; background: var(--crema); color: var(--verde-bosque); font: 700 clamp(.625rem, .3vw + .55rem, .8125rem)/1.2 var(--font-body); letter-spacing: .04em; white-space: nowrap; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--verde-noche) 55%, transparent); transform: translateY(-50%); } .dm-destino { --tx: -50%; position: absolute; left: var(--x); top: var(--y); z-index: 2; padding: .3rem .65rem; border-radius: 999px; background: var(--verde-bosque); color: var(--crema); font: 600 clamp(.6875rem, .2vw + .62rem, .8125rem)/1.2 var(--font-body); white-space: nowrap; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--verde-noche) 70%, transparent); opacity: 0; transform: translate(var(--tx), calc(-100% - 8px)); transition: opacity .2s var(--ease-out), transform .3s var(--ease-out); pointer-events: none; } .dm-destino.is-on { opacity: 1; transform: translate(var(--tx), calc(-100% - 14px)); } .dm-destino--de { --x: 80.78%; --y: 17.63%; --tx: -70%; } .dm-destino--fr { --x: 76.33%; --y: 21.04%; --tx: -60%; } .dm-destino--se { --x: 83.89%; --y: 9.26%; --tx: -80%; } .dm-destino--ca { --x: 21.67%; --y: 14.07%; --tx: -30%; } .dm-destino--us { --x: 20.56%; --y: 26.67%; --tx: -25%; } .dm-destino--mx { --x: 18.33%; --y: 38.15%; --tx: -20%; } /* Suecia y Canadá quedan cerca del borde superior del recorte: etiqueta debajo del punto */ .dm-destino--se, .dm-destino--ca { transform: translate(var(--tx), 8px); } .dm-destino--se.is-on, .dm-destino--ca.is-on { transform: translate(var(--tx), 14px); } .dm__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; padding-inline: .25rem; font-size: .8125rem; color: color-mix(in srgb, var(--carbon) 88%, var(--cafe-tierra)); } .dm__ley { display: inline-flex; align-items: center; gap: .5rem; } .dm__ley::before { content: ""; flex: none; } .dm__ley--origen::before { width: 12px; height: 12px; border-radius: 50%; background: var(--rojo-grano); box-shadow: 0 0 0 2px var(--crema), 0 0 0 3px color-mix(in srgb, var(--rojo-grano) 40%, transparent); } .dm__ley--destino::before { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-hoja); box-shadow: 0 0 0 2px var(--crema); } .dm__ley--ruta::before { width: 22px; height: 2px; border-radius: 2px; background: var(--verde-hoja); } .clientes__cta { display: flex; justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 1024px) { .destinos-bloque { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; column-gap: clamp(2rem, 4vw, 4rem); } .destinos-grupos { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 22rem; } } @media (max-width: 479.98px) { .clientes__cta .btn { white-space: normal; text-align: center; } .destino-chip { font-size: .875rem; padding-inline: .5rem .625rem; gap: .5rem; } } /* ---------- 7.9 CONTACTO · #contacto ---------- */ .contacto { position: relative; padding-block: var(--section-y) clamp(3.5rem, 7vw, 5.5rem); background: var(--crema); overflow-x: clip; } .rama--contacto-a { top: -1rem; left: -4.5rem; transform: rotate(10deg); } .rama--contacto-b { right: -4.5rem; bottom: 8rem; width: clamp(150px, 18vw, 280px); transform: scaleX(-1) rotate(12deg); } .contacto .container { position: relative; z-index: 1; } .canales { display: grid; gap: 4.25rem; margin-top: clamp(5rem, 8vw, 6rem); } .canales > li { display: grid; grid-template-columns: minmax(0, 1fr); } /* la tarjeta no desborda su columna */ @media (min-width: 768px) { /* en fila: tres tarjetas lado a lado, misma altura */ .canales { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } .canal { grid-template-rows: auto auto auto 1fr auto; padding-inline: clamp(1rem, 2vw, 1.5rem); } /* acción alineada abajo */ } .canal { position: relative; display: grid; justify-items: center; align-content: start; gap: .875rem; padding: 0 1.5rem 1.75rem; border-radius: var(--radio); background: color-mix(in srgb, var(--crema-2) 60%, var(--crema)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cafe-tierra) 12%, transparent), 0 24px 44px -34px color-mix(in srgb, var(--verde-noche) 70%, transparent); color: var(--carbon); text-align: center; text-decoration: none; transition: transform .5s var(--ease-out); } .canal::after { /* borde verde-hoja en hover / foco (solo opacidad) */ content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--verde-hoja); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; } .canal:hover { transform: translateY(-4px); } .canal:hover::after, .canal:focus-visible::after { opacity: 1; } .canal:focus-visible { outline-offset: 4px; border-radius: var(--radio); } .canal__icono { display: grid; place-items: center; width: clamp(96px, 5vw + 72px, 112px); aspect-ratio: 1; margin-top: calc(clamp(96px, 5vw + 72px, 112px) / -2); margin-bottom: .25rem; border-radius: 50%; background: var(--verde-bosque); color: var(--crema); box-shadow: 0 0 0 6px var(--crema), 0 18px 34px -16px color-mix(in srgb, var(--verde-noche) 80%, transparent); transition: transform .5s var(--ease-out); } .canal:hover .canal__icono, .canal:focus-visible .canal__icono { transform: translateY(-6px); } .canal__svg { width: 46px; height: 46px; overflow: visible; } .canal__svg g, .canal__svg path, .canal__svg rect, .canal__svg ellipse { transform-box: fill-box; } .canal__titulo { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 48; font-size: clamp(1.25rem, .6vw + 1.05rem, 1.5rem); line-height: 1.15; letter-spacing: -.01em; color: var(--verde-bosque); } .canal__filete { width: 28px; height: 2px; background: var(--rojo-grano); transition: transform .5s var(--ease-out); } .canal:hover .canal__filete, .canal:focus-visible .canal__filete { transform: scaleX(2); } .canal__dato { max-width: 26ch; font-size: 1rem; line-height: 1.45; text-wrap: balance; overflow-wrap: anywhere; } .canal__accion { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; font-size: .875rem; font-weight: 600; color: var(--verde-hoja); } .canal__accion svg { width: 1rem; height: 1rem; transition: transform .35s var(--ease-out); } .canal:hover .canal__accion svg, .canal:focus-visible .canal__accion svg { transform: translateX(4px); } /* Partes animables de los íconos */ .ap-izq { transform-origin: 0% 15%; } .ap-der { transform-origin: 100% 15%; } .so-tapa { transform-origin: 50% 0%; transition: transform .45s var(--ease-in-out); } .so-carta { opacity: 0; transform: translate3d(0, 4px, 0); transition: opacity .3s var(--ease-out), transform .5s var(--ease-out); } .so-carta__hoja, .so-bolsillo { fill: var(--verde-bosque); } .so-bolsillo { stroke: none; } .pin-cuerpo { transform-origin: 50% 100%; } .pin-sombra { transform-origin: 50% 50%; opacity: .55; } .redes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.75rem; margin-top: clamp(2rem, 4vw, 2.75rem); } .redes__enlace { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; color: var(--carbon); text-decoration: none; } .redes__enlace strong { color: var(--verde-bosque); font-weight: 700; } .redes__icono { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--verde-bosque); color: var(--crema); transition: transform .45s var(--ease-out); } .redes__icono svg { width: 1.25rem; height: 1.25rem; } .redes__enlace:hover .redes__icono, .redes__enlace:focus-visible .redes__icono { transform: rotate(-8deg) scale(1.06); } .redes__enlace:hover span:last-child { text-decoration: underline; text-decoration-color: var(--oro-suave); text-underline-offset: .3em; } .redes__sep { display: none; width: 1px; height: 1.75rem; background: color-mix(in srgb, var(--cafe-tierra) 30%, transparent); } @media (min-width: 640px) { .redes__sep { display: block; } } /* ---------- 7.10 FOOTER ---------- */ .pie { position: relative; color: var(--crema); --foco: var(--oro-suave); } .onda--pie { height: clamp(48px, 7vw, 110px); margin-bottom: -2px; background: var(--crema); } .pie__cuerpo { position: relative; padding-block: clamp(2rem, 5vw, 3.5rem) 1.25rem; overflow: hidden; background: var(--verde-noche); } .pie__rama { position: absolute; right: -4rem; top: -3rem; width: clamp(220px, 26vw, 360px); aspect-ratio: 1; color: color-mix(in srgb, var(--crema) 7%, transparent); stroke-width: 1.3; transform: scaleX(-1) rotate(8deg); pointer-events: none; } .pie__grid { position: relative; display: grid; gap: 2.25rem; } .pie__logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--crema); } .pie__logo svg { width: auto; height: 3.5rem; aspect-ratio: 1004 / 470.2; } .pie__lema { margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 1.125rem; line-height: 1.35; color: var(--oro-suave); } .pie__lema-marca { font-style: normal; font-weight: 600; letter-spacing: .08em; color: var(--crema); } .pie__coop { margin-top: .375rem; font-size: .8125rem; letter-spacing: .04em; color: color-mix(in srgb, var(--crema) 72%, transparent); } .pie__titulo { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; font: 700 .6875rem/1.2 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-suave); } .pie__titulo::before { content: ""; width: 20px; height: 1.5px; background: var(--oro-suave); } .pie__lista { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 2rem; } .pie__lista a, .pie__contacto a, .pie__dir { display: inline-flex; align-items: center; gap: .625rem; min-height: 44px; font-size: .9375rem; color: color-mix(in srgb, var(--crema) 86%, transparent); text-decoration: none; transition: color .25s var(--ease-out); } .pie__lista a span, .pie__lista a { position: relative; } .pie__lista a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .6rem; height: 1px; background: var(--oro-suave); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease-out); } .pie__lista a:hover, .pie__contacto a:hover { color: var(--crema); } .pie__lista a:hover::after { transform: scaleX(1); } .pie__contacto { display: grid; font-style: normal; } .pie__contacto svg { flex: none; width: 1rem; height: 1rem; color: var(--oro-suave); } .pie__dir { align-items: flex-start; padding-top: .7rem; line-height: 1.45; } .pie__dir svg { margin-top: .15rem; } .pie__certs { display: flex; flex-wrap: wrap; gap: .5rem; } .pie__cert { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: .35rem; border-radius: 50%; background: var(--crema); transition: transform .35s var(--ease-out); } .pie__cert--rect { padding: .65rem .35rem; } .pie__cert img { width: 100%; height: 100%; object-fit: contain; } .pie__certs li:hover .pie__cert { transform: translateY(-3px); } .pie__base { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--crema) 12%, transparent); font-size: .8125rem; color: color-mix(in srgb, var(--crema) 72%, transparent); } .pie__arriba { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: color-mix(in srgb, var(--crema) 86%, transparent); text-decoration: none; } .pie__arriba svg { width: 1rem; height: 1rem; transition: transform .35s var(--ease-out); } .pie__arriba:hover { color: var(--crema); } .pie__arriba:hover svg { transform: translateY(-3px); } @media (min-width: 640px) { .pie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .pie__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.05fr); gap: 2.5rem; } } /* ---------- 7.11 PÁGINAS AUXILIARES (404.html) ---------- */ body.aux { display: flex; flex-direction: column; min-height: 100svh; } .aux__header { border-bottom: 1px solid color-mix(in srgb, var(--cafe-tierra) 14%, transparent); } .aux__barra { display: flex; align-items: center; min-height: 4.5rem; } .marca--oscura { color: var(--carbon); } .marca--oscura .marca__lema { color: var(--cafe-tierra); } .aux__main { position: relative; flex: 1; display: grid; place-items: center; padding: clamp(2.5rem, 7vw, 5rem) var(--pad-x); overflow: hidden; } .aux-bloque { position: relative; display: grid; justify-items: center; gap: 1.25rem; max-width: 40rem; text-align: center; } .aux__rama { width: clamp(180px, 24vw, 320px); } .aux__rama--a { top: -6rem; left: -24rem; transform: rotate(8deg); } .aux__rama--b { right: -24rem; bottom: -7rem; transform: scaleX(-1) rotate(10deg); } @media (max-width: 1023.98px) { .aux__rama { opacity: .5; } } .aux-ilustra { position: relative; width: min(320px, 84vw); aspect-ratio: 320 / 120; margin-bottom: .5rem; } .aux-ilustra__svg { width: 100%; height: 100%; overflow: visible; } .aux-ilustra__revela { stroke: var(--crema); stroke-dashoffset: -1; } .aux-ilustra__grano { position: absolute; left: var(--gx, 91.875%); top: var(--gy, 40%); width: 2.5rem; height: 2rem; transform: translate(-50%, -50%) rotate(-24deg); } .aux-ilustra__grano use { transform-box: fill-box; transform-origin: center; } .aux-ilustra--404 .aux-ilustra__grano { --gx: 65%; --gy: 66.7%; } .aux-ilustra__num { font-family: var(--font-display); font-weight: 600; font-size: 44px; font-variation-settings: "SOFT" 100, "opsz" 144; letter-spacing: -.02em; fill: var(--cafe-tierra); } .aux-ilustra__check { position: absolute; left: 91.875%; top: 40%; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--verde-bosque); color: var(--crema); box-shadow: 0 0 0 3px var(--crema); transform: translate(-10%, -115%); } .aux-ilustra__check svg { width: 1.125rem; height: 1.125rem; } .aux__titulo { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144; font-size: clamp(2rem, 3vw + 1.2rem, 3.25rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--verde-bosque); } .aux__texto { max-width: 34rem; font-size: clamp(1rem, .3vw + .95rem, 1.125rem); text-wrap: pretty; } .aux__enlace { color: var(--verde-hoja); font-weight: 600; text-underline-offset: .2em; } .aux__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.75rem; margin-top: .5rem; } .aux__pie { padding-block: 1.25rem 1.5rem; border-top: 1px solid color-mix(in srgb, var(--cafe-tierra) 14%, transparent); font-size: .8125rem; text-align: center; color: color-mix(in srgb, var(--carbon) 80%, var(--cafe-tierra)); } @media (min-width: 640px) { .marca--oscura .marca__bajada { display: block; } } /* ========================================================================== 8. UTILIDADES ========================================================================== */ [hidden] { display: none !important; } .nw { white-space: nowrap; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ========================================================================== 9. ANIMACIONES Solo transform / opacity / clip-path / stroke-dashoffset. Todo el bloque está condicionado a (prefers-reduced-motion: no-preference) y los estados iniciales ocultos, además, a (scripting: enabled). ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* --- Revelado al scroll (reveal.js añade .is-visible una sola vez) --- */ .js [data-reveal=""], .js [data-reveal="fade-up"] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); } .js [data-reveal=""].is-visible, .js [data-reveal="fade-up"].is-visible { opacity: 1; transform: none; } .js [data-reveal="stagger"] > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + var(--d, 0s)); } .js [data-reveal="stagger"] > .is-visible { opacity: 1; transform: none; } /* Máscara que abre la foto + contra-escala de la imagen */ .js [data-reveal="mask"] { clip-path: inset(10% 8% 10% 8% round var(--radio)); transition: clip-path 1.1s var(--ease-out); } .js [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0 round var(--radio)); } .js [data-reveal="mask"] picture { transform: scale(1.14); transition: transform 1.4s var(--ease-out); } .js [data-reveal="mask"].is-visible picture { transform: none; } /* Eyebrow con filete que crece */ .js [data-reveal="filete"] { opacity: 0; transition: opacity .6s var(--ease-out); } .js [data-reveal="filete"]::before, .js [data-reveal="filete"]::after { transform: scaleX(0); transition: transform .8s var(--ease-out) .15s; } .js [data-reveal="filete"].is-visible { opacity: 1; } .js [data-reveal="filete"].is-visible::before, .js [data-reveal="filete"].is-visible::after { transform: none; } /* Compromisos: la foto se "abre" de abajo arriba, escalonada por tarjeta */ .js .compromisos__lista[data-reveal="stagger"] > * { transform: translate3d(0, 32px, 0); } .js .compromisos__lista .compromiso__foto { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 140ms + .1s); } .js .compromisos__lista .compromiso__foto picture { transform: scale(1.22); transition: transform 1.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .1s); } .js .compromisos__lista > .is-visible .compromiso__foto { clip-path: inset(0 0 0 0); } .js .compromisos__lista > .is-visible .compromiso__foto picture { transform: none; } .js .compromisos__lista .compromiso__titulo { transform: scale(.85); opacity: 0; transition: transform .6s var(--ease-out), opacity .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .7s); } .js .compromisos__lista > .is-visible .compromiso__titulo { transform: none; opacity: 1; } /* Nosotros: leyenda entra tras la foto */ .js .nosotros__leyenda[data-reveal] { --d: .5s; } /* --- Ramas que se dibujan (branches.js añade .is-drawn) --- */ .js .rama[data-draw] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease-in-out) var(--d, .2s); } .js .rama[data-draw].is-drawn { stroke-dashoffset: 0; } /* --- Hero: entrada por líneas con máscara, Ken Burns, sello --- */ .js .hero__img { animation: ken-burns 8s var(--ease-out) both; } .js .hero__titulo .linea__in { animation: linea-sube .9s var(--ease-out) both; animation-delay: calc(.25s + var(--i, 0) * 120ms); } .js .hero__titulo .linea:nth-child(2) .linea__in { --i: 1; } .js .hero__titulo .linea:nth-child(3) .linea__in { --i: 2; } .js .hero__acento { animation: sube .7s var(--ease-out) .1s both; } .js .hero__texto { animation: sube .7s var(--ease-out) .7s both; } .js .hero__acciones { animation: sube .7s var(--ease-out) .85s both; } .js .hero__ubicacion { animation: aparece .7s var(--ease-out) 1.05s both; } .js .sello { animation: sello-entra .8s var(--ease-out) .9s both; } .js .sello__aro { animation: gira 40s linear infinite; } .js .rama--hero-a { --d: .6s; } .js .rama--hero-b { --d: 1s; } .js .hero__franja .franja__grupo { animation: sube .7s var(--ease-out) 1.1s both; } .js .hero__franja .franja__grupo + .franja__grupo { animation-delay: 1.25s; } /* --- Contadores: grano rojo que "cae" junto al número al terminar --- */ .js .cifra:not(.is-counted) .cifra__grano { opacity: 0; transform: translate(0, -18px) rotate(-70deg); } .js .cifra.is-counted .cifra__grano { animation: grano-cae .7s cubic-bezier(.3, 1.4, .5, 1) both; } /* --- Cinta de valores --- */ .valores__pista { animation: marquee 48s linear infinite; } .valores__marquee:hover .valores__pista, .valores__banda:focus-within .valores__pista, .valores__banda.is-pausado .valores__pista { animation-play-state: paused; } /* --- Menú móvil: enlaces escalonados --- */ .js .menu-movil__lista li, .js .menu-movil__pie { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); } .js .menu-movil.is-open .menu-movil__lista li, .js .menu-movil.is-open .menu-movil__pie { opacity: 1; transform: none; transition: opacity .55s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(.18s + var(--i, 0) * 60ms); } .js .menu-movil__lista li:nth-child(2) { --i: 1; } .js .menu-movil__lista li:nth-child(3) { --i: 2; } .js .menu-movil__lista li:nth-child(4) { --i: 3; } .js .menu-movil__lista li:nth-child(5) { --i: 4; } .js .menu-movil__lista li:nth-child(6) { --i: 5; } .js .menu-movil__pie { --i: 7; } } /* --- 9b. ANIMACIONES · tanda 3b (cafés, equipo, clientes, contacto, footer, auxiliares) --- Mismo contrato que el bloque anterior: solo transform / opacity / clip-path / stroke-dashoffset, estados ocultos solo bajo (scripting: enabled), todo dentro de (prefers-reduced-motion: no-preference). */ @media (prefers-reduced-motion: no-preference) { /* Cafés: la foto se abre de arriba abajo con contra-escala; la nota dibuja su flecha; la primera tarjeta "se asoma" una vez para enseñar que gira. */ .js .cafes__lista[data-reveal="stagger"] > * { transform: translate3d(0, 32px, 0); } .js .cafes__lista .cafe__foto { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 140ms + .1s); } .js .cafes__lista .cafe__foto .cafe__picture { transform: scale(1.2); transition: transform 1.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .1s); } .js .cafes__lista > .is-visible .cafe__foto { clip-path: inset(0 0 0 0); } .js .cafes__lista > .is-visible .cafe__foto .cafe__picture { transform: none; } .js .cafes__lista .cafe__num { opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + .8s); } .js .cafes__lista > .is-visible .cafe__num { opacity: 1; transform: none; } .js .cafes__nota path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-in-out) .5s; } .js .cafes__nota.is-visible path { stroke-dashoffset: 0; } .js .cafes__lista > .cafe.is-visible:first-child:not(.is-girada) .cafe__giro { animation: cafe-asoma 1.4s var(--ease-in-out) 1.3s; } /* Reverso: la barra de altitud crece y las etiquetas entran escalonadas al girar */ .js .cafe.is-montada:not(.is-girada) .cafe__rango { transform: scaleX(0); } .js .cafe.is-girada .cafe__rango { transform: none; transition: transform .9s var(--ease-out) .45s; } .js .cafe.is-montada:not(.is-girada) .cafe__tags li, .js .cafe.is-montada:not(.is-girada) .cafe__cta { opacity: 0; transform: translate3d(0, 8px, 0); } .js .cafe.is-girada .cafe__tags li, .js .cafe.is-girada .cafe__cta { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .5s var(--ease-out); transition-delay: .55s; } .js .cafe.is-girada .cafe__tags li:nth-child(2) { transition-delay: .62s; } .js .cafe.is-girada .cafe__tags li:nth-child(3) { transition-delay: .69s; } .js .cafe.is-girada .cafe__cta { transition-delay: .78s; } /* Equipo: retrato revelado por máscara + nombre que sube; filete que crece */ .js .equipo__lista[data-reveal="stagger"] > * { transform: translate3d(0, 28px, 0); } .js .equipo__lista .persona__foto { clip-path: inset(12% 10% 12% 10% round var(--radio)); transition: clip-path 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); } .js .equipo__lista .persona__foto picture { transform: scale(1.16); transition: transform 1.4s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); } .js .equipo__lista > .is-visible .persona__foto { clip-path: inset(0 0 0 0 round 0); } .js .equipo__lista > .is-visible .persona__foto picture { transform: none; } .js .equipo__lista .persona__nombre::after { transform: scaleX(0); transition: transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + .6s); } .js .equipo__lista > .is-visible .persona__nombre::after { transform: none; } .js .equipo__lista > .is-visible .persona__card:hover .persona__nombre::after, .js .equipo__lista > .is-visible .persona__card:focus-visible .persona__nombre::after { transform: scaleX(2); transition-delay: 0s; } /* Clientes: marquee, arcos que se dibujan, puntos que aparecen, flujo en la ruta activa */ .logos__pista { animation: marquee 64s linear infinite; } .logos:hover .logos__pista, .logos:focus-within .logos__pista, .logos.is-pausado .logos__pista { animation-play-state: paused; } .js .subtitulo-filete::before, .js .subtitulo-filete::after { transform: scaleX(0); transition: transform .9s var(--ease-out) .2s; } .js .subtitulo-filete::before { transform-origin: 100% 50%; } .js .subtitulo-filete::after { transform-origin: 0 50%; } .js .subtitulo-filete.is-visible::before, .js .subtitulo-filete.is-visible::after { transform: none; } .js .dm:not(.is-drawn) .dm-arco { stroke-dashoffset: 1; } .js .dm-arco { transition: stroke-dashoffset 1.5s var(--ease-in-out), opacity .3s var(--ease-out), stroke .3s var(--ease-out), stroke-width .3s var(--ease-out); } .js .dm.is-drawn .dm-arco { transition-delay: calc(var(--i, 0) * 110ms + .15s), 0s, 0s, 0s; } .dm-arco:nth-child(2), .dm-fin:nth-child(2) { --i: 1; } .dm-arco:nth-child(3), .dm-fin:nth-child(3) { --i: 2; } .dm-arco:nth-child(4), .dm-fin:nth-child(4) { --i: 3; } .dm-arco:nth-child(5), .dm-fin:nth-child(5) { --i: 4; } .dm-arco:nth-child(6), .dm-fin:nth-child(6) { --i: 5; } .js .dm:not(.is-drawn) .dm-fin__punto { transform: scale(0); } .js .dm.is-drawn .dm-fin__punto { animation: punto-pop .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i, 0) * 110ms + 1.25s) backwards; } .js .dm:not(.is-drawn) .dm-origen__etiqueta { opacity: 0; transform: translate3d(-6px, -50%, 0); } .js .dm-origen__etiqueta { transition: opacity .5s var(--ease-out) .3s, transform .6s var(--ease-out) .3s; } .dm-origen__pulso { animation: ruta-pulso 2.6s var(--ease-out) infinite; } .dm-flujo.is-on { animation: dm-flujo 1.4s linear infinite; } .dm-fin.is-on .dm-fin__halo { animation: ruta-pulso 1.8s var(--ease-out) infinite; } /* Contacto: micro-animaciones de los íconos (hover / foco) */ .canal--comercial:is(:hover, :focus-visible) .ap-izq { animation: ap-izq .9s var(--ease-in-out); } .canal--comercial:is(:hover, :focus-visible) .ap-der { animation: ap-der .9s var(--ease-in-out); } .canal--correo:is(:hover, :focus-visible) .so-tapa { transform: scaleY(-1); } .canal--correo:is(:hover, :focus-visible) .so-carta { opacity: 1; transform: translate3d(0, -3.4px, 0); transition-delay: .18s; } .canal--visita:is(:hover, :focus-visible) .pin-cuerpo { animation: pin-rebota .95s cubic-bezier(.3, .7, .4, 1); } .canal--visita:is(:hover, :focus-visible) .pin-sombra { animation: pin-sombra .95s cubic-bezier(.3, .7, .4, 1); } .js .canales[data-reveal="stagger"] > * { transform: translate3d(0, 28px, 0); } .js .canales .canal__icono { transform: scale(.6); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + .25s); } .js .canales > .is-visible .canal__icono { transform: none; opacity: 1; } .js .canales > .is-visible .canal:is(:hover, :focus-visible) .canal__icono { transform: translateY(-6px); transition-delay: 0s; } /* Footer: columnas escalonadas (stagger común, recorrido corto) */ .js .pie__grid[data-reveal="stagger"] > * { transform: translate3d(0, 16px, 0); } /* Páginas auxiliares (sin JS: animaciones CSS que siempre terminan visibles) */ .aux-ilustra__revela { animation: revela-camino 1.5s var(--ease-in-out) .3s both; } .aux-ilustra__grano { animation: grano-llega .9s cubic-bezier(.3, 1.3, .5, 1) 1.5s both; } .aux-ilustra__grano use { animation: flota 3.6s var(--ease-in-out) 2.6s infinite; } .aux-ilustra__check { animation: check-pop .6s cubic-bezier(.3, 1.5, .5, 1) 2.1s both; } .aux-ilustra__num { animation: aparece .8s var(--ease-out) 1.3s both; } .aux-bloque > .eyebrow { animation: sube .7s var(--ease-out) .15s both; } .aux__titulo { animation: sube .7s var(--ease-out) .25s both; } .aux__texto { animation: sube .7s var(--ease-out) .4s both; } .aux__acciones { animation: sube .7s var(--ease-out) .55s both; } .aux__rama { stroke-dasharray: 1 1; animation: dibuja 2.6s var(--ease-in-out) .2s both; } } @keyframes cafe-asoma { 0%, 100% { transform: none; } 40% { transform: rotateY(-16deg); } 70% { transform: rotateY(4deg); } } @keyframes punto-pop { from { transform: scale(0); } to { transform: none; } } @keyframes dm-flujo { to { stroke-dashoffset: -.04; } } @keyframes ap-izq { 0%, 100% { transform: none; } 30% { transform: translate(1.4px, -.3px) rotate(6deg); } 55% { transform: translate(.4px, 0) rotate(1deg); } 75% { transform: translate(1px, -.2px) rotate(4deg); } } @keyframes ap-der { 0%, 100% { transform: none; } 30% { transform: translate(-1.4px, .3px) rotate(-6deg); } 55% { transform: translate(-.4px, 0) rotate(-1deg); } 75% { transform: translate(-1px, .2px) rotate(-4deg); } } @keyframes pin-rebota { 0%, 100% { transform: none; } 30% { transform: translateY(-4.5px); } 55% { transform: translateY(0); } 72% { transform: translateY(-1.6px); } 86% { transform: translateY(0); } } @keyframes pin-sombra { 0%, 100% { transform: none; opacity: .55; } 30% { transform: scaleX(.55); opacity: .25; } 55% { transform: scaleX(1.08); opacity: .6; } 72% { transform: scaleX(.85); opacity: .45; } } @keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes revela-camino { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } } @keyframes grano-llega { from { opacity: 0; transform: translate(-50%, -50%) translate(-28px, -26px) rotate(-120deg); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-24deg); } } @keyframes flota { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px) rotate(4deg); } } @keyframes check-pop { from { opacity: 0; transform: translate(-10%, -115%) scale(.3); } to { opacity: 1; transform: translate(-10%, -115%); } } /* Movimiento reducido (tanda 3b): sin marquee (rejilla), sin tilt, sin flujo */ @media (prefers-reduced-motion: reduce) { .logos__pista--eco { display: none; } .logos__pista { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: .5rem; } .logos__marquee { -webkit-mask-image: none; mask-image: none; } .logos__pausa, .valores__pie { display: none; } .persona__card, .canal, .cafe__card:hover { transform: none; } .js .persona__frase, .js .persona__frase span { transition: none; } } @keyframes ken-burns { from { transform: scale(1.08); } to { transform: scale(1); } } @keyframes linea-sube { from { transform: translate3d(0, 110%, 0); } to { transform: none; } } @keyframes sube { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } } @keyframes aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes sello-entra { from { opacity: 0; transform: scale(.82) rotate(-20deg); } to { opacity: 1; transform: none; } } @keyframes gira { to { transform: rotate(360deg); } } @keyframes marquee { to { transform: translate3d(-100%, 0, 0); } } @keyframes grano-cae { 0% { opacity: 0; transform: translate(0, -18px) rotate(-70deg); } 60% { opacity: 1; transform: translate(0, 2px) rotate(-18deg); } 100% { opacity: 1; transform: rotate(-24deg); } } /* Sin JS no hay botón de pausa: los marquees quedan estáticos, en rejilla (WCAG 2.2.2) */ :where(html:not(.js)) .valores__pista, :where(html:not(.js)) .logos__pista { animation: none; } :where(html:not(.js)) .valores__pista + .valores__pista, :where(html:not(.js)) .logos__pista--eco { display: none; } :where(html:not(.js)) .valores__pista, :where(html:not(.js)) .logos__pista { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: .5rem; } :where(html:not(.js)) .valores__pista li:nth-child(n + 5) { display: none; } :where(html:not(.js)) .valores__pista li:nth-child(4) { padding-right: 0; } :where(html:not(.js)) .valores__pista li:nth-child(4)::after { display: none; } :where(html:not(.js)) .valores__marquee, :where(html:not(.js)) .logos__marquee { -webkit-mask-image: none; mask-image: none; } :where(html:not(.js)) .valores__pie { display: none; } /* Movimiento reducido: todo estático y visible (el JS tampoco anima) */ @media (prefers-reduced-motion: reduce) { .hero__media, .nosotros__parallax { transform: none; } .valores__pista + .valores__pista { display: none; } .valores__pista { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: .5rem; } .valores__pista li:nth-child(n + 5) { display: none; } .valores__pista li:nth-child(4) { padding-right: 0; } .valores__pista li:nth-child(4)::after { display: none; } .valores__marquee { -webkit-mask-image: none; mask-image: none; } }