/* ========================================================================== JNG — Estilos Medidas y colores tomados del diseño (Diseño-web-JNG-HOME, artboard 1920px). ========================================================================== */ /* ---- Fuentes ---- */ @font-face { font-family: 'Futura Std'; src: url('../fonts/FuturaStd-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Futura Std'; src: url('../fonts/FuturaStd-Book.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Futura Std'; src: url('../fonts/FuturaStd-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Jost'; src: url('../fonts/Jost-VariableFont_wght.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* ---- Tokens (muestreados del PDF) ---- */ :root { --c-red: #a50001; /* rojo corporativo (bloques) */ --c-red-dark: #7e0001; --c-accent: #fa3402; /* rojo-naranja de etiquetas, títulos y mapa */ --c-dark: #211316; /* marrón casi negro */ --c-cream: #f0e0d1; /* crema */ --c-green: #5c5e27; /* verde oliva sostenibilidad */ --c-orange: #ec5411; /* naranja de la página de contacto */ --c-wine: #531017; /* granate de las fichas de especificaciones */ --c-white: #ffffff; --f-display: 'Futura Std', 'Jost', sans-serif; --f-body: 'Jost', sans-serif; --header-h: 78px; /* barra blanca del diseño */ --gutter: clamp(1.25rem, 4.4vw, 5.3rem); /* 85px a 1920 */ --gutter-lg: clamp(2rem, 7.8vw, 9.4rem); /* 150px a 1920 */ --section-y: clamp(4rem, 7.3vw, 8.75rem); /* 140px a 1920 */ --fs-hero: clamp(2.6rem, 4.567vw, 5.5rem); /* 87.7px a 1920 (altura de caja = 64px del diseño) */ --fs-claim: clamp(2.4rem, 4.7vw, 5.6rem); /* ~90px */ --fs-h2: clamp(2rem, 3.75vw, 4.5rem); /* ~72px */ --fs-stat: clamp(2rem, 3.18vw, 3.9rem); /* 61px a 1920 */ --fs-body: clamp(0.95rem, 0.99vw, 1.19rem); /* ~19px */ --hairline-light: 1px solid rgb(240 224 209 / 38%); --hairline-dark: 1px solid rgb(33 19 22 / 18%); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 1.1s; } /* ---- Reset mínimo ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; font-family: var(--f-body); font-weight: 300; font-size: var(--fs-body); color: var(--c-dark); background: var(--c-white); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } p { margin: 0 0 1em; } h1, h2, h3 { font-family: var(--f-display); font-weight: 300; line-height: 1.08; margin: 0 0 0.5em; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Líneas de título con pesos mezclados («Better source,» media / resto fina) */ .title-line { display: block; } .title-line--strong { font-weight: 500; } .title-line--thin { font-weight: 300; } /* ---- Utilidades ---- */ .section--dark { background: var(--c-dark); color: var(--c-white); } .section--red { background: var(--c-red); color: var(--c-cream); } .section--cream { background: var(--c-cream); color: var(--c-dark); } .section--green { background: var(--c-green); color: var(--c-cream); } .section--orange { background: var(--c-orange); color: var(--c-white); } .section--white { background: var(--c-white); color: var(--c-dark); } /* Flecha larga y fina del diseño */ .arrow { display: inline-block; width: 3.4em; height: 1px; background: currentColor; position: relative; vertical-align: middle; } .arrow::after { content: ''; position: absolute; right: 0; top: 50%; width: 0.55em; height: 0.55em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg) scaleY(0.9); } .arrow--left { transform: rotate(180deg); } /* Botones */ /* Medidas del diseño: caja de 284×60 con texto de 15px y flecha larga de 3.3em. */ .btn { display: inline-flex; align-items: center; gap: 1.14em; font-family: var(--f-body); font-size: clamp(0.8rem, 0.776vw, 1rem); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; line-height: 1.2; padding: 1.36em 1.95em; border: 1px solid currentColor; background: transparent; transition: background 0.3s, color 0.3s, border-color 0.3s; } /* Flecha del diseño: línea fina larga con punta en ángulo. */ .btn--arrow { position: relative; } .btn--arrow::after { content: ''; width: 3.3em; height: 1px; background: currentColor; } .btn--arrow::before { content: ''; position: absolute; right: 1.95em; top: 50%; width: 0.42em; height: 0.42em; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translate(1px, -50%) rotate(45deg); } .btn--red { background: var(--c-red); border-color: var(--c-red); color: var(--c-white); } .btn--red:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); } .btn--dark { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-cream); } .btn--dark:hover { background: transparent; color: var(--c-dark); } .btn--cream { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-dark); } .btn--cream:hover { background: transparent; color: var(--c-cream); } .btn--outline-light:hover { background: var(--c-cream); color: var(--c-dark); } .btn--outline-dark:hover { background: var(--c-dark); color: var(--c-cream); } /* ========================================================================== Preloader — la foto del hero a pantalla completa con el logo encima; al terminar, la foto se encoge hasta su hueco de la retícula (ref. godaylight) ========================================================================== */ .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--c-dark); transition: background-color 0.7s var(--ease), opacity 0.45s var(--ease); } /* El marco que viaja: empieza a pantalla completa y acaba en la celda del hero. La imagen va con object-fit:cover, así que se recorta sola al encogerse. (FRA-279: se probó a animar solo `transform` para bajar el CLS -0,32 medido-, pero dos intentos distintos dieron una regresión visual real sobre el elemento real -no reproducida en pruebas sobre un div nuevo, ver el comentario en main.js- y el segundo intento encima medía un CLS peor -~1,0- con un layout-shift instantáneo. Se mantiene el resize real, que es el que se ve suave; el CLS del morph queda fuera de alcance.) */ .preloader__media { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; transition: top 0.95s var(--ease), right 0.95s var(--ease), bottom 0.95s var(--ease), left 0.95s var(--ease); } /* Misma geometría que .parallax > img: la foto del hero es más alta que su celda para poder moverse, y si el marco que aterriza no la recortara igual habría un salto justo al acabar el viaje. */ .preloader__media-img { position: absolute; top: 50%; left: 0; width: 100%; height: calc(100% + 2 * var(--parallax-holgura, 0px)); object-fit: cover; transform: translate3d(0, calc(-50% + var(--parallax, 0px)), 0); } .preloader__veil { position: absolute; inset: 0; background: rgb(20 14 14 / 28%); transition: opacity 0.6s var(--ease); } .preloader__logo { position: relative; z-index: 2; opacity: 0; transform: translateY(12px); animation: preloader-logo 0.9s var(--ease) 0.15s forwards; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .preloader__img { width: clamp(200px, 26vw, 460px); } @keyframes preloader-logo { to { opacity: 1; transform: none; } } /* Se va el logo y el fondo oscuro; queda solo la foto viajando. */ .preloader.is-opening { background-color: transparent; } .preloader.is-opening .preloader__logo { opacity: 0; transform: translateY(-10px); animation: none; } .preloader.is-opening .preloader__veil { opacity: 0; } .preloader.is-done { opacity: 0; pointer-events: none; } /* Sin foto (páginas sin hero) se mantiene el barrido de siempre. */ .preloader:not(.preloader--media) { transition: clip-path 1s var(--ease), opacity 0.45s var(--ease); } .preloader:not(.preloader--media).is-done { clip-path: inset(0 0 100% 0); } body.is-loading { overflow: hidden; } /* ---- Reveals ---- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* ---- Máscara: el texto sube desde detrás de su propia caja ---------------- Para los titulares grandes, donde el fade genérico se queda corto. El elemento recorta y el de dentro es el que viaja. Sirve tanto si la máscara es el propio .reveal como si el .reveal es un ancestro (una palabra sobre una foto, por ejemplo). El padding compensado deja sitio a las colas de las letras sin mover nada. */ .mask { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; } .mask > span { display: block; transform: translateY(110%); transition: transform 1.05s var(--ease); } .mask.is-visible > span, .is-visible .mask > span { transform: none; } /* Un titular partido en líneas las va soltando de arriba abajo (--i lo pone jng_title_lines). */ .mask > span { transition-delay: calc(var(--i, 0) * 0.1s); } /* La máscara ya esconde el texto: sin fade ni desplazamiento encima. */ .reveal.mask, .reveal:has(> .mask) { opacity: 1; transform: none; } /* ---- Carruseles: arrastre con el ratón ------------------------------------ Los tres carriles (productos, entradas y el bloque slider) se pueden llevar con el ratón. Mientras dura el arrastre no hay snap ni scroll suave, o cada uno tiraría para su lado. */ .productos__track, .blog__track, .slider__track { cursor: grab; } .productos__track.is-dragging, .blog__track.is-dragging, .slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } /* Sin esto el navegador arrastra la propia foto en vez del carril. */ .productos__track img, .blog__track img, .slider__track img { -webkit-user-drag: none; user-select: none; } @media (prefers-reduced-motion: reduce) { .reveal, .preloader, .preloader__media, .preloader__logo { transition: none; animation: none; } .reveal { opacity: 1; transform: none; } .mask { overflow: visible; } .mask > span { transform: none; transition: none; } /* La barra se muestra llena, sin recorrido. */ .hero__meter-fill { width: 100%; animation: none; } .hero__meter-fill::after { display: none; } /* El mapa aparece entero, sin barrido. */ .cifras__map, .cifras__map.is-visible { animation: none; -webkit-mask-image: none; mask-image: none; } /* Con «reducir movimiento» se apaga el vídeo de fondo del hero y se queda la imagen de debajo (misma foto, puesta como portada/respaldo). */ .hero__bg-video { display: none; } } /* ========================================================================== Header — barra blanca fija, logo oscuro (como el diseño) ========================================================================== */ .site-header { /* El alto sale de estas dos: lo necesitan el desplegable, que cuelga del borde de abajo de la barra, y el menú móvil, que arranca debajo. */ --header-pad-y: 19px; --header-logo: clamp(30px, 2.08vw, 40px); --header-h: calc(2 * var(--header-pad-y) + var(--header-logo)); position: sticky; top: 0; left: 0; right: 0; z-index: 100; background: var(--c-white); color: var(--c-dark); } /* Diseño: 78px de alto, logo de 40px, márgenes de 60px y nav a la derecha. */ .site-header__inner { padding: var(--header-pad-y) clamp(1.25rem, 3.13vw, 3.75rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .site-logo, .site-header__brand img { height: var(--header-logo); width: auto; } /* El nav se estira a toda la barra para que el desplegable pueda colgar de su borde inferior y no de la mitad del texto. */ .site-nav { align-self: stretch; display: flex; align-items: center; } .site-nav__list { display: flex; align-items: stretch; height: 100%; gap: clamp(1.4rem, 2.6vw, 3.2rem); list-style: none; margin: 0; padding: 0; } .site-nav__list > li { display: flex; align-items: center; } .site-nav__list a { font-size: clamp(0.75rem, 0.75vw, 0.95rem); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .site-nav__list a:hover, .site-nav__list .current-menu-item > a, .site-nav__list .current_page_item > a { color: var(--c-red); } .site-nav__pie { display: none; } /* ---- Selector de idioma (Polylang): ES · EN · FR --------------------- */ .site-lang { display: flex; gap: 0.9rem; list-style: none; margin: 0 0 0 clamp(1.4rem, 2.6vw, 3.2rem); padding: 0; } .site-lang a { font-size: clamp(0.75rem, 0.75vw, 0.95rem); letter-spacing: 0.06em; text-decoration: none; opacity: 0.55; } .site-lang a:hover, .site-lang a[aria-current] { opacity: 1; } .site-lang a[aria-current] { color: var(--c-red); } /* Con el overlay abierto el fondo seguía haciendo scroll por debajo. */ body.nav-abierto { overflow: hidden; } /* ---- El desplegable de «Productos» ------------------------------------- Panel blanco colgado del elemento, con la misma hairline que el resto del sitio. Se abre al pasar el ratón, al enfocar con el teclado y al pulsar la flechita: los tres caminos acaban en el mismo estado. */ .site-nav__list > .menu-item-has-children { position: relative; gap: 0.4em; } /* Entre el enlace y el panel queda el padding de la barra: sin este puente el ratón sale del `li` a mitad de camino y el desplegable se cierra solo. Va por debajo del enlace, así que no le roba el clic. */ .site-nav__list > .menu-item-has-children::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: var(--header-pad-y); } .site-nav__toggle { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; width: 0.6em; height: 0.6em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.18em) rotate(45deg); transition: transform 0.3s var(--ease), color 0.3s var(--ease); } .site-nav__list > .menu-item-has-children:hover > .site-nav__toggle, .site-nav__list > .menu-item-has-children.is-open > .site-nav__toggle { color: var(--c-red); } .site-nav__sub { position: absolute; /* Cuelga del borde de abajo de la barra, no del texto: el `li` llega hasta el final del content box y falta justo el padding de la cabecera. */ top: calc(100% + var(--header-pad-y)); left: calc(-1 * clamp(1rem, 1.4vw, 1.6rem)); margin: 0; padding: clamp(0.9rem, 1.1vw, 1.3rem) 0; list-style: none; min-width: max(220px, 100%); background: var(--c-white); border: 1px solid rgb(33 19 22 / 12%); box-shadow: 0 18px 40px rgb(33 19 22 / 8%); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } .site-nav__list > .menu-item-has-children:hover > .site-nav__sub, .site-nav__list > .menu-item-has-children:focus-within > .site-nav__sub, .site-nav__list > .menu-item-has-children.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } .site-nav__sub a { display: block; padding: 0.5rem clamp(1rem, 1.4vw, 1.6rem); letter-spacing: 0.08em; white-space: nowrap; transition: color 0.2s var(--ease); } .site-nav__sub-item--todos { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid rgb(33 19 22 / 12%); } .site-nav__sub-item--todos a { color: var(--c-red); } .site-header__toggle { display: none; } @media (max-width: 900px) { /* ---- Menú móvil: pantalla completa, tipos grandes y el submenú a la vista. En táctil no hay hover, así que el desplegable de productos es un acordeón y los objetivos miden 44px de alto como mínimo. ---- */ .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: stretch; /* el nav de escritorio los centra */ background: var(--c-white); padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(var(--gutter) + 1rem); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .site-header.is-open .site-nav { opacity: 1; visibility: visible; } /* El logo y el botón se mantienen por encima del overlay. */ .site-header__brand { position: relative; z-index: 12; } .site-nav__list { flex-direction: column; gap: 0; } .site-lang { margin: 1.5rem 0 0; gap: 0.25rem; } .site-lang a { display: block; padding: 0.7rem 0.9rem 0.7rem 0; font-size: 1rem; } .site-nav__list > li { display: block; /* en escritorio son flex para centrarse en la barra */ border-bottom: 1px solid rgb(33 19 22 / 12%); /* Entran escalonadas detrás del overlay, como los reveals del sitio. */ opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .site-header.is-open .site-nav__list > li { opacity: 1; transform: none; } .site-header.is-open .site-nav__list > li:nth-child(1) { transition-delay: 0.08s; } .site-header.is-open .site-nav__list > li:nth-child(2) { transition-delay: 0.13s; } .site-header.is-open .site-nav__list > li:nth-child(3) { transition-delay: 0.18s; } .site-header.is-open .site-nav__list > li:nth-child(4) { transition-delay: 0.23s; } .site-header.is-open .site-nav__list > li:nth-child(5) { transition-delay: 0.28s; } .site-header.is-open .site-nav__list > li:nth-child(6) { transition-delay: 0.33s; } .site-nav__list > li > a { display: block; padding: 0.85rem 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.35rem, 6.4vw, 1.9rem); letter-spacing: 0.02em; } /* El elemento con hijos deja de ser flex en línea: el enlace ocupa el ancho, la flecha se va al extremo con 44px de lado propios y el submenú cae en una segunda fila que se abre de 0fr a 1fr. Esa es la fila que se anima: `auto` no transiciona y un `max-height` obligaría a adivinar cuánto mide el submenú. */ .site-nav__list > .menu-item-has-children { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 0fr; align-items: center; gap: 0; transition: grid-template-rows 0.35s var(--ease); } .site-nav__list > .menu-item-has-children.is-open { grid-template-rows: auto 1fr; } /* El puente del hover no pinta nada pero taparía el elemento siguiente. */ .site-nav__list > .menu-item-has-children::after { display: none; } .site-nav__toggle { width: 44px; height: 44px; border: 0; transform: none; display: grid; place-content: center; justify-self: end; } .site-nav__toggle::after { content: ''; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease); } .menu-item-has-children.is-open > .site-nav__toggle::after { transform: translateY(2px) rotate(225deg); } .site-nav__sub { grid-column: 1 / -1; align-self: stretch; /* que mida lo que la fila, para poder recortar */ position: static; display: block; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; } .site-nav__sub a { padding: 0.6rem 0 0.6rem 1.1rem; white-space: normal; border-left: 1px solid rgb(33 19 22 / 14%); font-size: 0.9rem; } .site-nav__sub-item:first-child a { padding-top: 0; } .site-nav__sub-item:last-child a { padding-bottom: 1.1rem; } .site-nav__sub-item--todos { margin-top: 0; padding-top: 0; border-top: 0; } /* Contacto al pie del panel: en móvil es el atajo más útil del menú. */ .site-nav__pie { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: auto; padding-top: 2.5rem; font-size: 0.85rem; letter-spacing: 0.06em; } .site-nav__pie a { text-decoration: none; } .site-nav__contacto { color: var(--c-red); } .site-nav__social { opacity: 0.65; text-transform: uppercase; } /* 44px de lado: es el objetivo táctil mínimo cómodo, y este botón es el único acceso a la navegación en móvil. El padding lo agranda sin tocar el dibujo de las dos rayas. */ .site-header__toggle { display: grid; place-content: center; background: none; border: 0; z-index: 10; cursor: pointer; color: inherit; min-width: 44px; min-height: 44px; margin-right: -0.5rem; } .site-header__burger { display: grid; gap: 6px; } .site-header__bar { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform 0.35s var(--ease); } /* 6px de hueco + 1.5px de barra = 7,5px entre ejes: cada una recorre la mitad para cruzarse en el centro exacto. */ .site-header.is-open .site-header__bar:first-child { transform: translateY(3.75px) rotate(45deg); } .site-header.is-open .site-header__bar:last-child { transform: translateY(-3.75px) rotate(-45deg); } } @media (prefers-reduced-motion: reduce) { .site-nav, .site-nav__list > li, .site-nav__sub, .site-header__bar, .site-nav__list > .menu-item-has-children { transition: none; } .site-nav__list > li { opacity: 1; transform: none; } } /* ========================================================================== 1 · Hero -------------------------------------------------------------------------- Retícula calcada del diseño (artboard 1920×1080, cabecera de 78px): columnas → main 67.19% | rail 18.18% (líneas en x=1290 y x=1639) | links 14.64% filas → 24.65% | 43.5% | 31.85% (líneas a 243px y 672px del top del hero) ========================================================================== */ .hero { --hero-line: rgb(240 224 209 / 85%); /* las líneas del diseño son crema casi opacas */ /* Encima de 1180px las hairlines las pinta .hero__lines, que sí se puede animar; los bordes de las celdas se quedan en transparente para no duplicarlas sin tocar la caja. Por debajo vuelven a ser los bordes. */ --hero-grid-line: var(--hero-line); --hero-rail-pad: clamp(0.75rem, 1.04vw, 1.4rem); /* 20px @1920 */ --hero-links-pad: clamp(0.9rem, 1.3vw, 1.7rem); /* 25px @1920 */ position: relative; min-height: calc(100svh - var(--header-h)); display: grid; color: var(--c-white); overflow: hidden; } .hero__bg { position: absolute; inset: 0; } .hero__bg img, .hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* El horizonte cae al 29.5% del alto del hero, como en el diseño. */ object-position: center 36%; /* El diseño usa la foto muy apagada: cielo gris azulado y campo oscuro. */ filter: brightness(0.5) saturate(0.92); } /* El vídeo va encima de la imagen (que se queda de portada/respaldo detrás). */ .hero__bg-video { z-index: 1; } .hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 14 14 / 16%) 0%, rgb(20 14 14 / 0%) 28%, rgb(20 14 14 / 0%) 62%, rgb(20 14 14 / 32%) 100%); } .hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 18.18% 14.64%; /* FRA-617: la fila del titular+texto (43.5fr) se quedaba corta cuando el contenido del panel era largo (p. ej. Sostenibilidad, "Transición a la Agricultura Regenerativa"): el texto desbordaba `.hero__cell--main` y chocaba con la hairline inferior. `minmax(min-content, 43.5fr)` deja el reparto proporcional intacto mientras el contenido quepa (es el mismo valor calculado, sin cambio visible) y solo fuerza la fila a crecer cuando no quepa. */ grid-template-rows: 24.65fr minmax(min-content, 43.5fr) 31.85fr; } .hero__cell { min-width: 0; } /* Hairlines de la retícula: bordes de las propias celdas. */ .hero__cell--kicker, .hero__cell--meter, .hero__cell--void-top { border-bottom: 1px solid var(--hero-grid-line); } .hero__cell--cta, .hero__cell--since, .hero__cell--void-bottom { border-top: 1px solid var(--hero-grid-line); } .hero__cell--meter, .hero__cell--media, .hero__cell--since { border-left: 1px solid var(--hero-grid-line); border-right: 1px solid var(--hero-grid-line); } /* ---- Las hairlines, dibujándose al entrar ---------------------------------- Mismas posiciones que los bordes de arriba, pero en una capa aparte para poder escalarlas: las verticales caen de arriba abajo y las horizontales se trazan de izquierda a derecha, antes de que entre el contenido. Los porcentajes salen de la propia retícula (columnas 1fr/18.18%/14.64%, filas 24.65/43.5/31.85): si se toca grid-template hay que tocarlos aquí. */ .hero__lines { display: none; } @media (min-width: 1181px) { .hero { --hero-grid-line: transparent; } .hero__lines { display: block; position: absolute; inset: 0; pointer-events: none; /* Es un .reveal solo para engancharse a la cascada: no se desvanece. */ opacity: 1; transform: none; } .hero__line { position: absolute; background: var(--hero-line); transition: transform 1s var(--ease); } .hero__line--v1, .hero__line--v2 { top: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: top; } .hero__line--v1 { left: 67.18%; } /* 100 − 18.18 − 14.64 */ .hero__line--v2 { right: 14.64%; } /* último píxel del raíl */ .hero__line--h1, .hero__line--h2 { left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left; } .hero__line--h1 { top: 24.65%; margin-top: -1px; } /* borde inferior de la fila 1 */ .hero__line--h2 { top: 68.15%; } /* 24.65 + 43.5 */ .hero__lines.is-visible .hero__line { transform: none; } .hero__lines.is-visible .hero__line--v1 { transition-delay: 0.12s; } .hero__lines.is-visible .hero__line--v2 { transition-delay: 0.2s; } .hero__lines.is-visible .hero__line--h2 { transition-delay: 0.3s; } } @media (prefers-reduced-motion: reduce) { .hero__line, .hero__lines.is-visible .hero__line { transition: none; transform: none; } } /* Fila 1 — claim y medidor, alineados abajo contra la línea */ .hero__cell--kicker { display: flex; align-items: flex-end; padding: 0 0 clamp(0.8rem, 1.3vw, 1.7rem) var(--gutter-lg); } .hero__kicker { margin: 0; font-size: clamp(0.82rem, 0.94vw, 1.15rem); /* 18px @1920 */ letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; } .hero__cell--meter { display: flex; align-items: flex-end; padding: 0 var(--hero-rail-pad) clamp(0.65rem, 0.95vw, 1.25rem); } .hero__meter { width: 100%; } .hero__meter-bar { display: block; width: clamp(96px, 7.92vw, 200px); height: clamp(9px, 0.63vw, 15px); border: 1px solid var(--hero-line); margin-bottom: clamp(0.4rem, 0.5vw, 0.7rem); overflow: hidden; } /* Se rellena hasta el 100% al entrar el hero, con un brillo que recorre la barra. */ .hero__meter-fill { display: block; width: 0; height: 100%; background: var(--c-cream); position: relative; } .hero__meter-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 85%) 50%, transparent 100%); transform: translateX(-100%); } /* Antes arrancaba con `.reveal.is-visible` + un animation-delay fijo (1,2s): ese `.is-visible` lo pone el IntersectionObserver casi al cargar la página (el medidor está en el primer pliegue), muy por delante del preloader — así que con cualquier retraso fijo la barra se rellenaba entera tapada por él, y solo se veía ya llena al apartarse (medido con `elementFromPoint` sobre el hueco de la barra: seguía tapada al 98% del relleno). Ahora la arranca `main.js` con la clase `.is-filling` en cuanto sabe de verdad que el hueco vuelve a verse -en páginas con preloader, encadenado a que termine (`finish()`); si no hay preloader, en cuanto el propio medidor entra en pantalla-, así que el relleno siempre corre con la barra ya visible (FRA-280). */ .hero__meter-fill.is-filling { animation: meter-fill 1.7s var(--ease) forwards; } .hero__meter-fill.is-filling::after { animation: meter-shine 1.7s var(--ease) forwards; } @keyframes meter-fill { from { width: 0; } to { width: 100%; } } @keyframes meter-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .hero__meter-label { margin: 0; font-size: clamp(0.75rem, 0.79vw, 0.98rem); /* 15px @1920 */ line-height: 1.2; } /* Fila 2 — titular, foto de pimientos y enlaces */ .hero__cell--main { /* FRA-617: sin hueco a la derecha, un titular+texto largo (p. ej. Sostenibilidad) llega a tocar la hairline vertical de la columna de al lado -reportado por Fran contra la captura de producción. `--gutter` (no `--gutter-lg`, que es el margen de página, más grande) porque este es un borde interno de la retícula, no el borde de la ventana. Abajo, un poco de aire también: `minmax(min-content, …)` en `.hero__grid` hace que la fila crezca justo lo que hace falta, ni un px más, así que sin este padding el texto tocaría la hairline inferior aunque ya no la desborde. */ padding: clamp(1.6rem, 3.4vw, 4.4rem) var(--gutter) clamp(0.8rem, 1.6vw, 2rem) var(--gutter-lg); } .hero__title { font-size: var(--fs-hero); line-height: 1.072; /* 94px de interlínea sobre 87.7px de cuerpo */ margin: 0 0 0.18em; } /* La segunda línea del diseño va algo más estrecha que nuestro corte Light. */ .hero__title .title-line--thin { letter-spacing: -0.026em; } .hero__text { font-size: clamp(1rem, 1.084vw, 1.35rem); /* 21px @1920 */ line-height: 1.2; margin: 0; } .hero__cell--media { display: grid; } .hero__media { display: block; height: 100%; } .hero__media-img { width: 100%; height: 100%; object-fit: cover; } .hero__cell--words { padding: clamp(0.8rem, 1.2vw, 1.6rem) 0 0 var(--hero-links-pad); } /* No son enlaces: solo las palabras que definen cada hero. */ .hero__words { list-style: none; margin: 0; padding: 0; font-size: clamp(0.7rem, 0.74vw, 0.92rem); line-height: 1.55; letter-spacing: 0.05em; text-transform: uppercase; } .hero__words li { white-space: nowrap; } /* Fila 3 — CTA y «Since» */ .hero__cell--cta { padding: clamp(1rem, 1.77vw, 2.3rem) 0 0 var(--gutter-lg); } .hero__cta { display: inline-flex; align-items: stretch; min-height: clamp(46px, 3.02vw, 72px); background: var(--c-white); color: var(--c-dark); } .hero__cta-label { display: flex; align-items: center; padding-left: clamp(0.9rem, 1.25vw, 1.6rem); padding-right: clamp(1.2rem, 2.55vw, 3.2rem); font-size: clamp(0.85rem, 0.89vw, 1.1rem); /* 17px @1920 */ line-height: 1.2; } .hero__cta-btn { border: 0; padding: 0 clamp(0.8rem, 0.83vw, 1.1rem); font-size: clamp(0.8rem, 0.95vw, 1.15rem); /* 18px @1920 */ letter-spacing: 0.1em; justify-content: center; } .hero__cell--since { padding: clamp(0.75rem, 1vw, 1.3rem) var(--hero-rail-pad) 0; } .hero__since { margin: 0; font-size: clamp(0.7rem, 0.7vw, 0.88rem); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; } /* ========================================================================== 2 · Intro + Cifras -------------------------------------------------------------------------- Medidas del artboard 1920: divisoria a 960, bloques de cifra de 270px de alto, columna izquierda con 85px de margen y el mapa a 721×361. ========================================================================== */ .cifras { border-top: var(--hairline-light); } .cifras__inner { display: grid; grid-template-columns: 1fr 1fr; } .cifras__intro { padding: clamp(2.5rem, 3.55vw, 4.5rem) var(--gutter) clamp(3rem, 5vw, 6.2rem); border-right: var(--hairline-light); display: flex; flex-direction: column; align-items: flex-start; /* Título arriba, botón abajo (con el mapamundi y el texto en medio), como reparte la columna el diseño. */ justify-content: space-between; gap: clamp(1.5rem, 2.8vw, 3.6rem); } .cifras__title { font-size: clamp(1.35rem, 1.786vw, 2.2rem); /* 34.3px @1920 */ line-height: 1.207; /* 41.4px de interlínea */ font-weight: 400; margin: 0; max-width: 21em; } .cifras__title-red { display: block; color: var(--c-accent); } /* Mapamundi: reserva su hueco aunque aún no esté el SVG. */ .cifras__map { width: 91.3%; /* 721px sobre los 790 de columna útil @1920 */ aspect-ratio: 721 / 361; margin: 0; } .cifras__map svg, .cifras__map-img { width: 100%; height: 100%; display: block; } /* El SVG entregado trae los puntos en fill="currentColor" (se le quitó la clase .cls-1 del exportador, demasiado genérica para insertarla en la página), así que el color se pone aquí. Es el naranja del diseño, no el rojo de marca. */ .cifras__map { color: #fa3402; } .cifras__map svg { overflow: visible; } /* Respaldo: si faltara el SVG del tema y tampoco hubiera imagen en el panel, la caja enseña una trama de puntos en su hueco exacto. */ .cifras__map--pendiente { background-image: radial-gradient(circle, rgb(250 52 2 / 55%) 1.1px, transparent 1.2px); background-size: 9px 9px; } /* Barrido de izquierda a derecha al entrar en pantalla: los puntos van apareciendo. Funciona con cualquier SVG, sin depender de su estructura. */ .cifras__map { -webkit-mask-image: linear-gradient(90deg, #000 0 55%, transparent 88%); mask-image: linear-gradient(90deg, #000 0 55%, transparent 88%); -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; } .cifras__map.is-visible { animation: map-sweep 2.2s var(--ease) 0.2s forwards; } @keyframes map-sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } } .cifras__text { max-width: 36.5em; margin: 0; font-size: clamp(1rem, 1.042vw, 1.3rem); line-height: 1.3; } .cifras__text p { margin: 0 0 1.3em; } .cifras__text p:last-child { margin-bottom: 0; } .cifras__cta { margin: 0; } .cifras__list { list-style: none; margin: 0; padding: 0; display: grid; } .cifras__item { display: grid; align-content: center; gap: clamp(0.5rem, 0.85vw, 1.1rem); min-height: clamp(170px, 14.06vw, 300px); /* 270px @1920 */ padding: 2rem var(--gutter) 2rem clamp(2rem, 6.5vw, 7.8rem); border-top: var(--hairline-light); transition: background-color 0.35s var(--ease); } .cifras__item:first-child { border-top: 0; } /* Los bloques rojos del diseño son el hover; en reposo van en oscuro. */ .cifras__item:hover { background: var(--c-red); } .cifras__label { font-size: clamp(1.15rem, 1.55vw, 1.9rem); /* 30px @1920 */ color: var(--c-accent); transition: color 0.35s var(--ease); } .cifras__item:hover .cifras__label { color: var(--c-white); } .cifras__value { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-stat); line-height: 1.05; color: var(--c-white); } .cifras__unit { font-size: 0.42em; } /* ========================================================================== 3 · Productos ========================================================================== */ /* Artboard 1920×968: nombre centrado a 138px del top, subrayado y con flechas en círculo rojo de 54px a ±178px; debajo la línea de sectores y una plomada que baja hasta un punto sobre el montón de pimentón. */ .productos { padding: clamp(3.2rem, 5.781vw, 6.94rem) var(--gutter) clamp(1.5rem, 2.292vw, 2.75rem); text-align: center; } /* Grid con la columna central de ancho fijo (no "auto"): así el nombre del producto crece o encoge SIN mover las flechas, que quedan ancladas a los bordes de las columnas laterales (1fr) en vez de pegadas al texto. El ancho de esa columna central cubre con margen el nombre más largo del catálogo actual ("Oleoresina Capsicum", ~330px a 1920); si un nombre no cupiera ahí, envuelve a una 2ª línea en vez de empujar nada (FRA-293). */ .productos__head { display: grid; grid-template-columns: 1fr clamp(9rem, 18.75vw, 22.5rem) 1fr; align-items: center; gap: clamp(0.6rem, 2.031vw, 2.44rem); /* 39px a 1920, del círculo al subrayado */ } .productos__name { justify-self: center; max-width: 100%; font-size: clamp(1.2rem, 1.46vw, 1.75rem); /* 28px a 1920 */ font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; padding-bottom: 0.22em; border-bottom: 1px solid currentColor; /* el subrayado del diseño */ white-space: normal; overflow-wrap: break-word; text-align: center; } .productos__arrow--prev { justify-self: end; } .productos__arrow--next { justify-self: start; } .productos__arrow { width: clamp(38px, 2.81vw, 54px); /* 54px a 1920 */ aspect-ratio: 1; display: grid; place-items: center; padding: 0; background: none; border: 1px solid var(--c-red); border-radius: 50%; color: var(--c-red); cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease); } .productos__arrow:hover { background: var(--c-red); color: var(--c-cream); } /* Dentro del círculo la flecha es corta, no la larga de los botones. */ .productos__arrow .arrow { width: 1.5em; font-size: clamp(0.7rem, 0.73vw, 0.88rem); } /* La línea de sectores la reescribe el JS al cambiar de producto, así que es un solo nodo de texto, no una lista. */ .productos__sectores { margin: clamp(1.6rem, 3.021vw, 3.63rem) 0 0; /* 58px a 1920 */ min-height: 1.4em; /* no salta si un producto no tiene */ font-size: clamp(0.95rem, 1.15vw, 1.38rem); /* 22px a 1920 */ line-height: 1.4; font-weight: 400; } .productos__pointer { display: block; width: 1px; height: clamp(60px, 6.51vw, 125px); /* 125px a 1920 */ margin: clamp(1rem, 1.927vw, 2.31rem) auto 0; /* 37px a 1920 */ background: rgb(33 19 22 / 55%); position: relative; } .productos__pointer::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--c-dark); transform: translateX(-50%); } .productos__track { list-style: none; /* El montón sube por detrás de la plomada: el punto queda apoyado en él. Ojo con el orden del clamp: en negativo el mínimo es el valor más grande en magnitud (-74px a 1920), no al revés. */ margin: clamp(-4.63rem, -3.854vw, -1rem) 0 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .productos__track::-webkit-scrollbar { display: none; } .productos__slide { flex: 0 0 100%; scroll-snap-align: center; } .productos__slide a { display: block; text-decoration: none; } .productos__img { width: min(100%, 1151px); /* el montón mide 1151×497 en el diseño */ aspect-ratio: 1151 / 497; object-fit: contain; margin: 0 auto; mix-blend-mode: multiply; /* integra el producto sobre el fondo crema */ } .productos__cta { margin-top: clamp(0.8rem, 1.354vw, 1.63rem); text-align: center; } /* ========================================================================== 4 · Sostenibilidad -------------------------------------------------------------------------- Artboard 1920 × 940: foto y panel a mitades, regla vertical de la foto en x=861, línea de la lista en x=1045 y círculos de 53px a partir de x=1086. ========================================================================== */ .sostenibilidad { --sost-dot: clamp(38px, 2.76vw, 60px); /* 53px @1920 */ --sost-tick: clamp(24px, 2.14vw, 46px); /* 41px: línea → círculo */ --sost-line: rgb(240 224 209 / 65%); display: grid; grid-template-columns: 1fr 1fr; position: relative; font-weight: 400; } .sostenibilidad__media { position: relative; overflow: hidden; min-height: 640px; } .sostenibilidad__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* En el diseño la foto va bastante más apagada que el original. */ filter: brightness(0.68) saturate(1.1); } /* Elipse de trazo discontinuo que señala la abeja. */ .sostenibilidad__spot { position: absolute; z-index: 2; left: 50.7%; top: 52.9%; width: 24.1%; aspect-ratio: 231 / 125; transform: translate(-50%, -50%); border: 1px dashed var(--c-cream); border-radius: 50%; } /* Regla vertical con el año arriba y el claim girado en el centro. */ .sostenibilidad__rule { position: absolute; z-index: 2; left: 89.7%; top: 9.6%; bottom: 7.7%; width: 1px; background: var(--c-cream); color: var(--c-cream); } .sostenibilidad__year { position: absolute; top: 0; right: clamp(0.8rem, 1.46vw, 1.9rem); font-size: clamp(0.75rem, 0.94vw, 1.15rem); line-height: 1; white-space: nowrap; } .sostenibilidad__caption { position: absolute; top: 50%; right: clamp(0.8rem, 1.46vw, 1.9rem); transform: translateY(-50%); writing-mode: vertical-rl; font-size: clamp(0.7rem, 0.75vw, 0.95rem); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .sostenibilidad__title { position: absolute; z-index: 2; left: clamp(1.25rem, 3.65vw, 4.4rem); bottom: 5.3%; margin: 0; color: var(--c-cream); font-size: clamp(2.2rem, 4.06vw, 5rem); /* 78px @1920 */ line-height: 1; font-weight: 300; } .sostenibilidad__panel { padding: clamp(2.5rem, 4.06vw, 5.2rem) var(--gutter) clamp(2.5rem, 3.75vw, 4.8rem); position: relative; z-index: 1; } .sostenibilidad__subtitle { font-size: clamp(1.5rem, 2.08vw, 2.55rem); /* 40px @1920 */ font-weight: 300; line-height: 1.15; margin: 0 0 clamp(0.5rem, 0.9vw, 1.2rem); } .sostenibilidad__text { max-width: 40.5em; font-size: clamp(0.95rem, 1.02vw, 1.28rem); line-height: 1.25; margin: 0 0 clamp(2.5rem, 4.06vw, 5.2rem); } /* Lista numerada: línea vertical de centro a centro y guiones hasta cada círculo. */ .sostenibilidad__list { counter-reset: sost; list-style: none; position: relative; margin: 0 0 clamp(3rem, 5.3vw, 6.8rem); padding: 0 0 0 var(--sost-tick); display: grid; gap: calc(1.27vw); } .sostenibilidad__list::before { content: ''; position: absolute; left: 0; top: calc(var(--sost-dot) / 2); bottom: calc(var(--sost-dot) / 2); width: 1px; background: var(--sost-line); } .sostenibilidad__list li { counter-increment: sost; display: flex; align-items: center; gap: clamp(0.8rem, 1.1vw, 1.5rem); font-size: clamp(0.75rem, 0.825vw, 1rem); letter-spacing: 0.085em; text-transform: uppercase; position: relative; } /* Guion desde la línea vertical hasta el borde del círculo. */ .sostenibilidad__list li::after { content: ''; position: absolute; left: calc(-1 * var(--sost-tick)); top: 50%; width: var(--sost-tick); height: 1px; background: var(--sost-line); } /* El punto 4 se prolonga por encima de la foto hasta la regla vertical. */ .sostenibilidad__list li:nth-child(4)::after { left: -11.72vw; width: 11.72vw; background: var(--c-cream); } .sostenibilidad__list li::before { content: counter(sost); display: grid; place-items: center; width: var(--sost-dot); height: var(--sost-dot); flex: 0 0 auto; border-radius: 50%; background: var(--badge, var(--c-red)); color: var(--c-cream); font-size: clamp(0.75rem, 0.83vw, 1rem); z-index: 1; } /* Degradado de color de los badges, muestreado del diseño */ .sostenibilidad__list li:nth-child(1) { --badge: #211316; } .sostenibilidad__list li:nth-child(2) { --badge: #a60001; } .sostenibilidad__list li:nth-child(3) { --badge: #e80008; } .sostenibilidad__list li:nth-child(4) { --badge: #f62200; } .sostenibilidad__list li:nth-child(5) { --badge: #fa3402; } .sostenibilidad__list li:nth-child(6) { --badge: #ec5411; } .sostenibilidad__list li:nth-child(n+7) { --badge: #ec5411; } /* ========================================================================== 5 · Vídeo ========================================================================== */ .video { background: var(--c-dark); } /* El diseño lo da a 1920×1076, o sea 16:9 clavado. `display: block` y no un `line-height: 0` en la sección: el hueco bajo el vídeo es el de una caja inline, y matarlo desde el padre se lo comía también a los párrafos de la portada, que se apilaban unos encima de otros. */ .video__player, .video__embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ========================================================================== Bloque: retícula del claim (Oleoresina y pre-footer, y las interiores) Medido sobre el artboard de 1920 (docs/diseno/home.pdf): columnas 183 | 348 | 856 | 349 | 184 → hairlines en x=183, 531, 1387, 1735 filas 523 | 434 → hairline horizontal en y=523 Las hairlines se pintan como bordes de las celdas, no como elementos aparte. ========================================================================== */ .claim { --claim-linea: rgb(240 224 209 / 55%); position: relative; } /* El rótulo va DENTRO de la retícula, arriba de la columna central, no encima del bloque: en el diseño las hairlines arrancan en el borde de la sección. */ .claim__kicker { grid-area: 1 / 3; align-self: start; text-align: center; font-family: var(--f-display); font-size: clamp(1.3rem, 1.77vw, 2.13rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin: 0; padding-top: clamp(2rem, 6.35vw, 7.6rem); /* 122px a 1920 */ } .claim__grid { position: relative; display: grid; grid-template-columns: 9.531% 18.125% 44.583% 18.177% 9.583%; grid-template-rows: 54.65% 45.35%; min-height: clamp(560px, 49.84vw, 1000px); } /* * La hairline horizontal del diseño cruza TODO el ancho, incluido el título * central — por eso va aparte, no como border-bottom de las celdas: el * título no es una `.claim__cell` (ocupa las dos filas y se centra sobre la * línea) y un border por celda dejaba el tramo central sin dibujar. */ .claim__grid::before { content: ""; position: absolute; left: 0; right: 0; top: 54.65%; border-top: 1px solid var(--claim-linea); } /* Las celdas centrales llevan además las hairlines verticales del diseño. */ .claim__cell--foto-1 { grid-area: 1 / 2; border-left: 1px solid var(--claim-linea); border-right: 1px solid var(--claim-linea); display: flex; align-items: flex-end; /* la foto se pega al hairline horizontal */ } .claim__cell--texto-2 { grid-area: 1 / 4; border-left: 1px solid var(--claim-linea); border-right: 1px solid var(--claim-linea); display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 clamp(1rem, 1.8vw, 2.2rem) clamp(1.2rem, 2vw, 2.2rem); } /* Sin hairlines verticales: en el diseño solo bordean la foto de encima (columna 2, fila 1); bajo el hairline horizontal la columna izquierda queda sin marcar. La columna derecha sí las lleva en las dos filas. */ .claim__cell--texto-1 { grid-area: 2 / 2; padding: clamp(1.6rem, 2.9vw, 3.4rem) clamp(1rem, 1.8vw, 2.2rem) 0; } .claim__cell--foto-2 { grid-area: 2 / 4; border-left: 1px solid var(--claim-linea); border-right: 1px solid var(--claim-linea); border-bottom: 0; display: flex; align-items: flex-start; /* la foto arranca en el hairline horizontal */ } /* El claim ocupa la columna central entera y lo parte el hairline: la 1ª línea queda justo encima y la 2ª justo debajo. Ambas van centradas. */ .claim__title { grid-area: 1 / 3 / 3 / 4; align-self: center; margin: 0; text-align: center; font-size: var(--fs-claim); line-height: 1.16; color: var(--c-cream); } .claim__title .title-line { display: block; } .claim__title .title-line--strong { font-weight: 500; } /* Con un line-height tan ajustado (1.16) el bloque de dos líneas no se centra exactamente sobre la hairline horizontal y la 2ª línea la cruzaba por encima de sus letras. Un margen fijo entre líneas la separa del hairline pase lo que pase con el centrado. */ .claim__title .title-line--thin { margin-top: clamp(1.2rem, 3vw, 3.6rem); } .claim__media { width: 100%; } .claim__img { width: 100%; aspect-ratio: 348 / 433; object-fit: cover; } .claim__text { margin: 0; font-size: clamp(0.85rem, 0.93vw, 1.32rem); font-weight: 400; line-height: 1.42; } /* Artboard 1920×921: título a 30px del top, tarjetas de 428×540 a partir de y=255 (rótulo) / y=303 (foto) y bullets centrados a y=875. */ .blog { padding: clamp(1.5rem, 1.56vw, 1.88rem) 0 clamp(1.5rem, 2.19vw, 2.63rem); } .blog__head { padding: 0 var(--gutter); } .blog__title { font-size: clamp(1.6rem, 2.29vw, 2.75rem); /* 44px a 1920 */ font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; padding-bottom: 0.06em; /* fit-content en vez de inline-block: el subrayado queda igual de ajustado pero sin el interlineado que mete la línea base de un inline. */ display: block; width: fit-content; line-height: 1.05; border-bottom: 1px solid currentColor; /* «BLOG» va subrayado */ color: var(--c-cream); } .blog__subtitle { font-family: var(--f-display); font-size: clamp(1.3rem, 1.875vw, 2.25rem); /* 36px a 1920 */ line-height: 1.1; margin: 0.22em 0 0; color: var(--c-cream); } .blog__intro { margin: clamp(0.8rem, 1.25vw, 1.5rem) 0 0; /* 24px a 1920 */ /* Los saltos del panel ya parten el texto en dos líneas: el ancho solo tiene que dejarles sitio (790px la más larga del diseño). */ max-width: min(100%, 830px); line-height: 1.35; font-size: clamp(0.9rem, 0.99vw, 1.19rem); } .blog__slider { margin-top: clamp(1.4rem, 2.71vw, 3.25rem); } /* 52px a 1920 */ .blog__track { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: clamp(0.5rem, 0.73vw, 0.88rem); /* 14px a 1920 */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; } .blog__track::-webkit-scrollbar { display: none; } .blog__card { flex: 0 0 clamp(220px, 22.29vw, 428px); /* 428px a 1920 */ scroll-snap-align: start; } .blog__card a { text-decoration: none; display: block; } /* Altura fija de dos líneas: los titulares reales tienen largos distintos y, sin esto, cada foto arrancaría a una altura y la fila quedaría escalonada. */ .blog__card-head { display: flex; align-items: flex-start; gap: 1.6rem; min-height: 2.6em; margin-bottom: clamp(0.7rem, 1.15vw, 1.38rem); /* 22px a 1920 */ font-size: clamp(0.85rem, 0.94vw, 1.13rem); /* 18px a 1920 */ line-height: 1.3; } .blog__card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .blog__card-head .arrow { margin-top: 0.55em; } .blog__card-head .arrow { flex: 0 0 auto; transition: transform 0.3s var(--ease); } .blog__card a:hover .arrow { transform: translateX(6px); } .blog__img { width: 100%; aspect-ratio: 428 / 540; object-fit: cover; } .blog__bullets { display: flex; justify-content: center; gap: 0.62rem; margin-top: clamp(1rem, 1.67vw, 2rem); } .blog__bullet { width: 8px; aspect-ratio: 1; padding: 0; border: 1px solid var(--c-cream); border-radius: 50%; background: transparent; opacity: 0.6; cursor: pointer; transition: background 0.3s var(--ease), opacity 0.3s var(--ease); } .blog__bullet.is-current { background: var(--c-cream); opacity: 1; } /* ========================================================================== 8 · Origen ========================================================================== */ .origen { position: relative; min-height: 92svh; display: grid; place-items: center; text-align: center; color: var(--c-cream); overflow: hidden; } .origen__bg, .origen__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .origen__bg::after { content: ''; position: absolute; inset: 0; background: rgb(33 19 22 / 45%); } .origen__bg img { filter: grayscale(1); } .origen__inner { position: relative; z-index: 2; max-width: 72ch; padding: var(--section-y) var(--gutter); } .origen__title { font-size: clamp(2.2rem, 3.9vw, 4.6rem); /* ~74px a 1920, escala de .calidad__title */ line-height: 1.06; text-transform: uppercase; font-weight: 300; letter-spacing: 0.02em; margin-bottom: 0.5em; } .origen__text { max-width: 66ch; margin: 0 auto 2.8em; } /* ========================================================================== 9 · Calidad certificada ========================================================================== */ .calidad__inner { display: grid; grid-template-columns: 1fr 1fr; /* el corte cae en x=960 */ min-height: clamp(600px, 49.375vw, 1000px); /* 948px a 1920 */ } .calidad__content { padding: clamp(3rem, 7.55vw, 9.06rem) var(--gutter) clamp(3rem, 7vw, 8.4rem); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } .calidad__title { font-size: clamp(2.2rem, 3.85vw, 4.6rem); margin: 0 0 0.62em; } /* 74px a 1920 */ .calidad__title .title-word--strong { font-weight: 500; } .calidad__title .title-word--thin { font-weight: 300; } /* Interlineado del diseño: 24px sobre 19px de cuerpo, más apretado que el del resto del sitio; el ancho lo marca la línea más larga (557px). */ .calidad__text { line-height: 1.28; margin: 0 0 clamp(2.5rem, 4.7vw, 5.6rem); font-weight: 400; } .calidad__sellos { list-style: none; margin: 0 0 clamp(3rem, 5.3vw, 6.4rem); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.2rem, 2.08vw, 2.5rem) clamp(1rem, 1.56vw, 1.88rem); max-width: 540px; /* el diseño mete 5 sellos en la primera fila */ } /* Los sellos van en blanco y negro y recuperan el color al pasar por encima. Se acotan por alto Y por ancho: los hay muy apaisados (el de la iniciativa de especias sostenibles es 5:1) y a alto fijo se comerían la fila entera. */ .calidad__sello { height: clamp(28px, 2.4vw, 46px); width: auto; max-width: clamp(64px, 5.42vw, 104px); object-fit: contain; filter: grayscale(1); transition: filter 0.35s var(--ease); } /* La página de Calidad reutiliza el mismo marcado de sellos (misma clase .calidad__sello) dentro de su propia lista .cal-sellos, así que el filtro se aplicaba pero nunca se quitaba al pasar por encima — la regla de hover solo miraba dentro de .calidad__sellos (la de la home). */ .calidad__sellos li:hover .calidad__sello, .cal-sellos li:hover .calidad__sello { filter: none; } .calidad__cta { margin-top: auto; } .calidad__media { position: relative; overflow: hidden; } .calidad__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Retícula sobre la foto: verticales a 32.85% y 69.24%, horizontales a 28.59% y 74.16% del alto (x=1276/1625, y=271/703 sobre el artboard). */ .calidad__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; --l: rgb(255 255 255 / 55%); background-image: linear-gradient(to right, var(--l), var(--l)), linear-gradient(to right, var(--l), var(--l)), linear-gradient(to bottom, var(--l), var(--l)), linear-gradient(to bottom, var(--l), var(--l)); background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px; background-position: 32.85% 0, 69.24% 0, 0 28.59%, 0 74.16%; background-repeat: no-repeat; } /* La foto pequeña ocupa exactamente la celda central: 349×432. */ .calidad__inset { position: absolute; z-index: 2; left: 32.85%; top: 28.59%; width: 36.39%; height: 45.57%; } .calidad__img-inset { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--c-dark); color: var(--c-cream); padding: clamp(4rem, 8vw, 9rem) var(--gutter) 2.5rem; } /* * Tres columnas lado a lado en el comp (contrastado contra home.pdf Y * sostenibilidad.pdf, misma retícula en las dos): marca (izq.) | sellos + * texto de ayudas (centro, alineados a la izquierda) | navegación + legal + * copyright (dcha., arranca ~74,5vw en ambos PDFs). Grid con la 1ª y 3ª * columna de ancho fijo y la del medio a `1fr`: si la columna del medio * fuera de ancho automático (como con flex + margin-right), su ancho real * dependería de cuánto ocupe el texto de ayudas, que varía con el contenido, * y la columna de navegación se desplazaría a la izquierda con él — pasaba * exactamente eso (arrancaba al 63vw en vez del 74,5vw del diseño). * Las dos primeras se anclan abajo (align-self: end); la tercera reparte su * contenido de arriba abajo (nav arriba, copyright al fondo). */ .site-footer__inner { display: grid; /* Columna 2 es un hueco vacío (el gap entre marca y ayudas): con `column-gap` uniforme, ensanchar ese hueco también desplazaría el arranque de la columna de navegación, que tiene que quedar fijo. */ grid-template-columns: clamp(200px, 18.2vw, 362px) clamp(1rem, 13.5vw, 14.4rem) 1fr clamp(220px, 25.1vw, 538px); align-items: stretch; } .site-footer__brand { /* El diseño no lleva claim aparte: el propio SVG del logo ya trae "Quality begins at origin". Si el campo ACF se rellena con algo, va debajo del logo, no al lado — al lado no cabe (la columna solo mide lo que mide el logo) y el texto se partía palabra a palabra. */ grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; align-self: end; gap: 0.6rem; } .site-footer__logo { width: 100%; height: auto; } .site-footer__claim { margin: 0; font-size: clamp(0.8rem, 0.95vw, 1rem); line-height: 1.3; opacity: 0.7; } .site-footer__ayudas { grid-column: 3; display: flex; flex-direction: column; align-items: flex-start; align-self: end; gap: clamp(1rem, 1.8vw, 2.2rem); max-width: clamp(280px, 30.3vw, 581px); text-align: left; } .site-footer__ayudas-sellos { display: flex; align-items: center; gap: clamp(1.2rem, 2.45vw, 2.9rem); flex-wrap: wrap; justify-content: flex-start; } .site-footer__sello { display: block; height: clamp(2rem, 2.5vw, 3rem); width: auto; } .site-footer__sello svg { display: block; height: 100%; width: auto; } .site-footer__ayudas-texto { margin: 0; font-size: 0.8rem; line-height: 1.5; opacity: 0.85; } /* * gap fijo en vez de justify-content:space-between: con contenido real esta * columna (nav+legal+copy) es la más alta de las tres, así que su propia * altura de contenido YA determina la de la fila entera — no queda "espacio * sobrante" que space-between pueda repartir y el copyright se pegaba justo * debajo del menú legal. El hueco del comp entre uno y otro (~80px a 1920) * se fija directamente aquí. */ .site-footer__col { grid-column: 4; display: flex; flex-direction: column; gap: clamp(2.5rem, 4.2vw, 5rem); text-align: left; } .site-footer__col > .site-footer__copy { margin-top: auto; } /* * gap + line-height explícitos: heredaban el line-height: 1.55 del body * (pensado para párrafos largos) y la columna de navegación salía casi el * doble de alta que en el comp — eso es lo que dejaba a `.site-footer__col` * sin espacio de sobra y pegaba el copyright justo debajo del menú legal en * vez de al fondo de la columna. */ .site-footer__nav-group { display: grid; gap: clamp(1.2rem, 1.8vw, 2rem); } /* * font-size/line-height puestos en el