/* ========================================================================== LA ESPAÑOLA — Charcutería Sistema de diseño · CSS único Orden: tokens · base · tipografía · layout · componentes · páginas · media Convenciones de accesibilidad aplicadas en todo el archivo: · Área táctil mínima 44×44 px (--tap) en todo lo que se pueda pulsar. · Los efectos :hover van dentro de @media (hover: hover) para que no se queden pegados al tocar en móvil. El feedback táctil va en :active. · Contraste mínimo 4.5:1 sobre los tres fondos (papel, hueso, tinta). ========================================================================== */ /* -------------------------------------------------------------------------- 01 · RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* El recorte horizontal va AQUÍ, nunca en . En Safari de iOS, overflow-x en el body recorta los descendientes position:fixed y position:sticky contra la caja del body en vez de contra la pantalla: el preloader y el encabezado dejan de cubrir la franja del reloj. Es la causa del fallo que se veía en iPhone. */ overflow-x: clip; /* El encabezado es sticky y se ancla bajo el área segura: sin sumar el inset aquí, los enlaces #ancla quedarían tapados en iPhone. */ scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem); } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* Elimina el retardo de 300 ms al pulsar en móvil */ button, a, summary, label, input, select, textarea { touch-action: manipulation; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Los destinos de ancla también necesitan margen bajo el encabezado */ [id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem); } /* -------------------------------------------------------------------------- 02 · TOKENS -------------------------------------------------------------------------- */ :root { /* Color — paleta de charcutería española: tinta, oxblood, oro viejo, hueso */ --ink: #17120F; --ink-soft: #2A211B; --oxblood: #6E1A22; --oxblood-dk: #4A1017; --oxblood-lt: #8E2A31; --gold: #B79055; --gold-lt: #D8BE8A; --gold-dk: #7A5C2E; /* 5.2:1 sobre hueso · 5.8:1 sobre papel */ --bone: #F2EBDD; --paper: #FBF7F0; --stone: #6F675F; /* 5.2:1 sobre papel */ --stone-lt: #C3B9AC; /* solo decorativo, nunca texto sobre claro */ --white: #FFFFFF; /* Semántica */ --bg: var(--paper); --bg-alt: var(--bone); --bg-dark: var(--ink); --text: var(--ink-soft); --text-muted: var(--stone); --heading: var(--ink); --line: rgba(23, 18, 15, 0.12); --line-strong: rgba(23, 18, 15, 0.22); --line-gold: rgba(183, 144, 85, 0.45); /* Tipografía */ --font-display: 'Cormorant Garamond', 'Hoefler Text', Garamond, 'Times New Roman', serif; --font-body: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif; --fs-eyebrow: 0.6875rem; /* 11px · versalitas con tracking amplio */ --fs-micro: 0.6875rem; /* etiquetas menores; nunca por debajo de 11px */ --fs-small: 0.875rem; /* 14px · texto de apoyo */ --fs-body: 1.0625rem; /* 17px */ --fs-lead: 1.25rem; --fs-h4: clamp(1.15rem, 1.6vw, 1.4rem); --fs-h3: clamp(1.5rem, 2.6vw, 2.1rem); --fs-h2: clamp(2.1rem, 5vw, 3.75rem); --fs-h1: clamp(2.75rem, 9vw, 8.5rem); --tracking-wide: 0.24em; --tracking-mid: 0.14em; --tracking-tight: -0.015em; /* Espacio */ --gutter: clamp(1.25rem, 5vw, 4rem); --section-y: clamp(4rem, 12vh, 9.5rem); --max: 1440px; --max-narrow: 780px; /* Área táctil mínima recomendada */ --tap: 44px; /* Movimiento */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.6s; --header-h: 92px; } /* -------------------------------------------------------------------------- 03 · BASE -------------------------------------------------------------------------- */ body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.75; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* El bloqueo de scroll también se aplica al , no al , por el mismo motivo: con overflow:hidden en el body, iOS recorta el panel del menú y el visor de galería, que son fixed. */ html:has(body.is-locked) { overflow: hidden; } /* Grano de papel — textura sutil sobre todo el documento */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"); } ::selection { background: var(--oxblood); color: var(--bone); } /* Salto al contenido — primer elemento tabulable de cada página */ .skip { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 10000; padding: 0.9rem 1.75rem; background: var(--ink); color: var(--bone); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: transform 0.3s var(--ease); } .skip:focus { transform: translate(-50%, 0); } /* -------------------------------------------------------------------------- 04 · TIPOGRAFÍA -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); font-weight: 300; line-height: 1.04; letter-spacing: var(--tracking-tight); /* Titulares muy grandes en pantallas estrechas: evita el desbordamiento */ overflow-wrap: break-word; } .display { font-size: var(--fs-h1); line-height: 0.92; } h2, .h2 { font-size: var(--fs-h2); line-height: 1.02; } h3, .h3 { font-size: var(--fs-h3); line-height: 1.12; } h4, .h4 { font-size: var(--fs-h4); line-height: 1.25; } .italic { font-style: italic; } /* Eyebrow — etiqueta versalita con filete */ .eyebrow { display: inline-flex; align-items: center; gap: 0.85em; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-dk); line-height: 1; } .eyebrow::before { content: ''; width: 2.5rem; height: 1px; background: currentColor; opacity: 0.6; } .eyebrow--center::after { content: ''; width: 2.5rem; height: 1px; background: currentColor; opacity: 0.6; } .eyebrow--plain::before, .eyebrow--plain::after { display: none; } /* Número de sección */ .sec-num { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); color: var(--text-muted); } .lead { font-size: var(--fs-lead); line-height: 1.65; font-weight: 300; color: var(--text); } .muted { color: var(--text-muted); } .small { font-size: var(--fs-small); letter-spacing: 0.02em; } .caps { text-transform: uppercase; letter-spacing: var(--tracking-mid); font-size: var(--fs-small); } /* Capitular */ .dropcap::first-letter { float: left; font-family: var(--font-display); font-size: 4.2em; line-height: 0.78; padding: 0.06em 0.12em 0 0; color: var(--oxblood); font-weight: 400; } /* Ornamento divisorio */ .ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); } .ornament::before, .ornament::after { content: ''; height: 1px; width: clamp(3rem, 12vw, 9rem); background: linear-gradient(90deg, transparent, var(--line-gold), transparent); } /* -------------------------------------------------------------------------- 05 · LAYOUT -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; /* En apaisado la muesca invade el lateral: el margen nunca baja del inset */ padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); } .wrap--narrow { max-width: calc(var(--max-narrow) + var(--gutter) * 2); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(3rem, 8vh, 6rem); } .section--alt { background: var(--bg-alt); } .section--dark { background: var(--bg-dark); color: var(--bone); --heading: var(--bone); --text: rgba(242, 235, 221, 0.78); --text-muted: rgba(242, 235, 221, 0.62); /* 6.1:1 sobre tinta */ --line: rgba(242, 235, 221, 0.14); --line-strong: rgba(242, 235, 221, 0.28); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--bone); } .section--dark .eyebrow { color: var(--gold-lt); } .section--dark .sec-num { color: rgba(242, 235, 221, 0.62); } /* Cabecera de sección: número · título · texto */ .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 6vw, 5rem); } /* Ojo: los anchos van en rem, no en ch. La unidad ch se mide con la fuente del propio elemento (la sans) y estrangularía los titulares en serif. */ .sec-head__title { max-width: 34rem; } .sec-head .eyebrow { margin-bottom: 1.4rem; } .sec-head__aside { padding-bottom: 0.4rem; } .sec-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sec-head--center .sec-head__title { max-width: 44rem; } .sec-head--center .sec-head__aside { max-width: 56ch; padding-top: 1.5rem; } .rule { height: 1px; background: var(--line); border: 0; } /* -------------------------------------------------------------------------- 06 · BOTONES -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--oxblood); --btn-fg: var(--bone); --btn-bd: var(--oxblood); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.85em; min-height: var(--tap); padding: 1.05em 2.4em; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: 0; font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1.1; text-align: center; cursor: pointer; overflow: hidden; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.12s var(--ease); } .btn > * { position: relative; z-index: 1; } .btn::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease-out-expo); } /* Feedback táctil: funciona igual con ratón y con dedo */ .btn:active { transform: scale(0.98); } @media (hover: hover) { .btn:hover::before { transform: scaleY(1); } .btn:hover { color: var(--bone); border-color: var(--ink); } } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--heading); --btn-bd: var(--line-strong); } .btn--ghost::before { background: var(--oxblood); } .btn--light { --btn-bg: transparent; --btn-fg: var(--bone); --btn-bd: rgba(242, 235, 221, 0.55); } .btn--light::before { background: var(--bone); } @media (hover: hover) { .btn--light:hover { color: var(--ink); border-color: var(--bone); } } .btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); } /* Enlace subrayado animado — con área táctil completa */ .link-u { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0.35em; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--heading); } .link-u::after { content: ''; position: absolute; left: 0; bottom: calc(50% - 0.9em); width: 100%; height: 1px; background: currentColor; transform-origin: right; transition: transform 0.5s var(--ease-out-expo); } @media (hover: hover) { .link-u:hover::after { transform: scaleX(0); } } .link-u:active { opacity: 0.6; } /* -------------------------------------------------------------------------- 07 · MEDIA / IMÁGENES -------------------------------------------------------------------------- */ .media { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(23,18,15,0.06), rgba(23,18,15,0.14)), var(--bone); } .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-expo), opacity 0.8s var(--ease); } @media (hover: hover) { .media--zoom:hover img { transform: scale(1.05); } } .media--tall { aspect-ratio: 4 / 5; } .media--port { aspect-ratio: 3 / 4; } .media--sq { aspect-ratio: 1 / 1; } .media--land { aspect-ratio: 3 / 2; } .media--wide { aspect-ratio: 16 / 9; } .media--pano { aspect-ratio: 21 / 9; } /* Filete dorado interior */ .media--framed::after { content: ''; position: absolute; inset: 0.75rem; border: 1px solid rgba(242, 235, 221, 0.28); pointer-events: none; } .figcap { margin-top: 0.9rem; font-size: var(--fs-small); letter-spacing: 0.06em; color: var(--text-muted); } /* -------------------------------------------------------------------------- 08 · HEADER -------------------------------------------------------------------------- */ .topbar { background: var(--ink); color: rgba(242, 235, 221, 0.78); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; } .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--tap); padding-block: 0.35rem; } .topbar a { display: inline-flex; align-items: center; min-height: var(--tap); } @media (hover: hover) { .topbar a:hover { color: var(--gold-lt); } } .topbar__sep { color: rgba(242, 235, 221, 0.45); margin-inline: 0.85rem; } .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease); } /* ── Área segura del iPhone (muesca / isla dinámica) ─────────────────── Con viewport-fit=cover la página ocupa la pantalla entera, incluida la franja del reloj y la batería. El encabezado se queda pegado en top:0 y absorbe esa franja como relleno propio. Así su fondo llega hasta el borde de la pantalla por construcción: no hay banda aparte que pueda desalinearse ni hueco posible entre ambos. El logotipo queda empujado por debajo del reloj. En móvil la barra superior se oculta (ver el bloque responsive), de modo que el encabezado es SIEMPRE el elemento que toca el borde. */ .site-header { padding-top: env(safe-area-inset-top, 0px); } /* En escritorio la que toca el borde es la barra superior. Ahí el inset vale 0 en la práctica, pero se deja por corrección. */ .topbar { padding-top: env(safe-area-inset-top, 0px); } .site-header.is-stuck { box-shadow: 0 12px 40px -28px rgba(23, 18, 15, 0.55); } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: var(--header-h); } .nav__list { display: flex; align-items: center; gap: clamp(0.85rem, 2.2vw, 2.1rem); } .nav__list--right { justify-content: flex-end; } .nav__link { position: relative; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mid); text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; transition: color 0.35s var(--ease); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: calc(50% - 0.95em); width: 100%; height: 1px; background: var(--oxblood); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out-expo); } @media (hover: hover) { .nav__link:hover { color: var(--oxblood); } .nav__link:hover::after { transform: scaleX(1); } } .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--oxblood); } /* Marca */ .brand { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; } .brand__mark { width: 34px; height: auto; color: var(--oxblood); } .brand__mark text { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.06em; } /* Imagen aún no generada: se oculta en vez de mostrar el icono roto */ img.is-missing { opacity: 0 !important; } .brand__word { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; color: var(--ink); padding-left: 0.2em; } .brand__sub { font-size: 0.5625rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-dk); padding-left: 0.34em; line-height: 1; } /* Botón menú móvil */ .burger { display: none; width: var(--tap); height: var(--tap); align-items: center; justify-content: center; background: none; border: 1px solid var(--line-strong); cursor: pointer; transition: background 0.3s var(--ease); } .burger:active { background: var(--line); } .burger span { display: block; width: 20px; height: 1px; background: var(--ink); position: relative; transition: background 0.3s var(--ease); } .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: var(--ink); transition: transform 0.4s var(--ease-out-expo); } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* Panel móvil */ .drawer { position: fixed; inset: 0; z-index: 99; background: var(--ink); color: var(--bone); padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.5rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-1.5rem); /* visibility con retardo: al cerrar espera al fundido, al abrir cambia ya. Si se interpolara como las demás, el panel seguiría oculto en el instante en que el JS mueve el foco y este se perdería en el . */ transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out-expo), visibility 0s linear 0.5s; } .drawer.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out-expo), visibility 0s linear 0s; } .drawer__list { display: flex; flex-direction: column; gap: 0.25rem; } .drawer__link { display: flex; align-items: baseline; gap: 1rem; min-height: var(--tap); padding-block: 0.7rem; border-bottom: 1px solid rgba(242, 235, 221, 0.12); font-family: var(--font-display); font-size: clamp(1.8rem, 7.5vw, 2.75rem); font-weight: 300; line-height: 1; color: var(--bone); transition: color 0.3s var(--ease); } .drawer__link:active { color: var(--gold-lt); } .drawer__link i { font-family: var(--font-body); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.2em; color: var(--gold); } .drawer__foot { font-size: var(--fs-small); letter-spacing: 0.08em; color: rgba(242, 235, 221, 0.7); } .drawer__foot a { display: inline-flex; align-items: center; min-height: var(--tap); } /* -------------------------------------------------------------------------- 09 · HERO -------------------------------------------------------------------------- */ .hero { position: relative; /* Con viewport-fit=cover, 100svh incluye la franja del reloj: hay que descontarla además del encabezado o el hero sobresale. */ min-height: clamp(560px, calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)), 980px); display: flex; align-items: flex-end; color: var(--bone); overflow: hidden; background: var(--ink); } .hero__slides { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); } .hero__slide.is-active { opacity: 1; } .hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; } .hero__slide.is-active img { transform: scale(1); } .hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,18,15,0.55) 0%, rgba(23,18,15,0.1) 32%, rgba(23,18,15,0.85) 100%), linear-gradient(90deg, rgba(23,18,15,0.55) 0%, transparent 60%); } .hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 9vh, 6.5rem); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(2rem, 6vw, 5rem); } .hero .eyebrow { color: var(--gold-lt); margin-bottom: 1.75rem; } .hero__title { color: var(--bone); font-size: var(--fs-h1); line-height: 0.9; margin-bottom: 1.6rem; } .hero__title em { display: block; font-style: italic; color: var(--gold-lt); } .hero__text { max-width: 46ch; color: rgba(242, 235, 221, 0.88); font-size: var(--fs-lead); margin-bottom: 2.5rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; } /* Paginación del hero */ .hero__dots { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; } .hero__dot { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; min-height: var(--tap); min-width: var(--tap); background: none; border: 0; padding: 0 0.25rem; cursor: pointer; font-size: 0.6875rem; letter-spacing: 0.18em; color: rgba(242, 235, 221, 0.68); transition: color 0.4s var(--ease); } .hero__dot i { display: block; width: 34px; height: 1px; background: rgba(242, 235, 221, 0.45); position: relative; overflow: hidden; } .hero__dot i::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; } .hero__dot.is-active { color: var(--bone); } .hero__dot.is-active i::after { transform: scaleX(1); transition: transform 6s linear; } .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3; font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(242, 235, 221, 0.7); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; pointer-events: none; } .hero__scroll::after { content: ''; width: 1px; height: 42px; background: linear-gradient(180deg, var(--gold), transparent); animation: drop 2.4s var(--ease) infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* Cabecera interior */ .page-hero { position: relative; min-height: clamp(340px, 56vh, 620px); display: flex; align-items: flex-end; background: var(--ink); color: var(--bone); overflow: hidden; } .page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,18,15,0.5), rgba(23,18,15,0.88)); } .page-hero__in { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 7vh, 5rem); } .page-hero .eyebrow { color: var(--gold-lt); margin-bottom: 1.4rem; } .page-hero h1 { color: var(--bone); font-size: clamp(2.4rem, 7vw, 5.5rem); } .page-hero p { max-width: 52ch; color: rgba(242, 235, 221, 0.86); margin-top: 1.4rem; } /* Migas */ .crumbs { font-size: 0.6875rem; letter-spacing: var(--tracking-mid); text-transform: uppercase; color: rgba(242, 235, 221, 0.75); margin-bottom: 1.5rem; } .crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); } @media (hover: hover) { .crumbs a:hover { color: var(--gold-lt); } } .crumbs span { margin-inline: 0.5rem; } /* -------------------------------------------------------------------------- 10 · FRANJA DE SELLOS -------------------------------------------------------------------------- */ .pledges { background: var(--ink); color: var(--bone); border-block: 1px solid rgba(242, 235, 221, 0.1); } .pledges__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .pledge { padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.5vw, 2.5rem); border-left: 1px solid rgba(242, 235, 221, 0.1); display: flex; flex-direction: column; gap: 0.75rem; } .pledge:first-child { border-left: 0; } .pledge svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: 0.4rem; } .pledge h4 { color: var(--bone); font-size: 1.25rem; letter-spacing: 0.01em; } .pledge p { font-size: var(--fs-small); line-height: 1.65; color: rgba(242, 235, 221, 0.68); } /* -------------------------------------------------------------------------- 11 · SPLIT (imagen + texto) -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .split__media { grid-column: 1 / span 6; } .split__body { grid-column: 8 / span 5; } .split--flip .split__media { grid-column: 7 / span 6; grid-row: 1; } .split--flip .split__body { grid-column: 1 / span 5; grid-row: 1; } .split__body .eyebrow { margin-bottom: 1.5rem; } .split__body h2 { margin-bottom: 1.5rem; } .split__body p + p { margin-top: 1.1rem; } .split__body .btn, .split__body .link-u { margin-top: 2rem; } /* Par de imágenes desfasadas */ .stack { position: relative; grid-column: 1 / span 6; } .stack__b { position: absolute; right: -8%; bottom: -14%; width: 46%; border: 8px solid var(--paper); } .section--alt .stack__b { border-color: var(--bone); } .section--dark .stack__b { border-color: var(--ink); } /* Cifras */ .figures { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid var(--line); } .figure__n { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--oxblood); font-weight: 300; } .section--dark .figure__n { color: var(--gold); } .figure__l { font-size: var(--fs-micro); letter-spacing: var(--tracking-mid); text-transform: uppercase; color: var(--text-muted); margin-top: 0.6rem; max-width: 16ch; } /* -------------------------------------------------------------------------- 12 · PRODUCTOS -------------------------------------------------------------------------- */ .prod-grid { display: grid; /* min() evita que la columna mínima desborde en pantallas de 320 px */ grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .prod { position: relative; display: flex; flex-direction: column; background: var(--bg); padding: clamp(1.25rem, 2vw, 1.75rem); transition: background 0.5s var(--ease); } .section--alt .prod { background: var(--bg-alt); } .section--dark .prod { background: var(--ink); } @media (hover: hover) { .prod:hover { background: var(--white); } .section--dark .prod:hover { background: var(--ink-soft); } } .prod__media { aspect-ratio: 1 / 1; margin-bottom: 1.35rem; } .prod__tag { position: absolute; top: clamp(1.25rem, 2vw, 1.75rem); left: clamp(1.25rem, 2vw, 1.75rem); z-index: 2; background: var(--oxblood); color: var(--bone); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.5em 0.9em; line-height: 1; } .prod__origin { font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 0.55rem; } .prod__name { font-size: 1.45rem; margin-bottom: 0.6rem; } .prod__desc { font-size: var(--fs-small); line-height: 1.7; color: var(--text-muted); margin-bottom: 1.5rem; flex: 1; } .prod__foot { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .prod__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--heading); } .prod__unit { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } /* Filtros */ .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); } .filter { display: inline-flex; align-items: center; min-height: var(--tap); background: none; border: 1px solid var(--line-strong); padding: 0.75em 1.5em; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mid); text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } @media (hover: hover) { .filter:hover { color: var(--heading); border-color: var(--ink); } } .filter:active { background: var(--line); } .filter.is-active, .filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); } .prod.is-hidden { display: none; } /* -------------------------------------------------------------------------- 13 · BANDA CON CITA -------------------------------------------------------------------------- */ .band { position: relative; padding-block: clamp(4.5rem, 18vh, 12rem); color: var(--bone); overflow: hidden; background: var(--ink); } .band__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; } .band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,18,15,0.74), rgba(23,18,15,0.88)); } .band__in { position: relative; z-index: 2; text-align: center; max-width: 48rem; margin-inline: auto; } .band blockquote { font-family: var(--font-display); font-size: clamp(1.55rem, 3.8vw, 3rem); font-weight: 300; font-style: italic; line-height: 1.22; color: var(--bone); margin-block: 2rem; } .band figcaption { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-lt); } /* -------------------------------------------------------------------------- 14 · TABLAS / SERVICIOS -------------------------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } .card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); transition: transform 0.6s var(--ease-out-expo), border-color 0.5s var(--ease); } .section--alt .card { background: var(--paper); } @media (hover: hover) { .card:hover { transform: translateY(-6px); border-color: var(--line-gold); } } .card__media { aspect-ratio: 3 / 2; } .card__body { padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; flex: 1; gap: 0.9rem; } .card__body h3 { font-size: 1.65rem; } .card__body p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.7; } .card__list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem; flex: 1; } .card__list li { display: flex; gap: 0.7rem; font-size: var(--fs-small); color: var(--text); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); } .card__list li::before { content: '·'; color: var(--gold); font-size: 1.4em; line-height: 1; } .card__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; } /* -------------------------------------------------------------------------- 15 · PROCESO / CURACIÓN -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: step; } .step { position: relative; padding-top: 2.5rem; border-top: 1px solid var(--line-strong); counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: 1.1rem; left: 0; font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--gold); } .step h4 { margin-bottom: 0.85rem; font-size: 1.45rem; } .step p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.7; } .step__time { display: block; margin-top: 1rem; font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); } /* -------------------------------------------------------------------------- 16 · TESTIMONIOS -------------------------------------------------------------------------- */ .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .quote { background: var(--bg); padding: clamp(2rem, 3.5vw, 3rem); display: flex; flex-direction: column; gap: 1.5rem; } .section--alt .quote { background: var(--bg-alt); } .section--dark .quote { background: var(--ink); } .quote__stars { color: var(--gold); letter-spacing: 0.35em; font-size: 0.8rem; } .quote p { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; line-height: 1.4; color: var(--heading); flex: 1; } .quote__who { font-size: var(--fs-micro); letter-spacing: var(--tracking-mid); text-transform: uppercase; color: var(--text-muted); padding-top: 1.25rem; border-top: 1px solid var(--line); } /* -------------------------------------------------------------------------- 17 · GALERÍA + LIGHTBOX -------------------------------------------------------------------------- */ /* El mosaico usa aspect-ratio en el contenedor en vez de filas en vw: así mantiene la proporción sin deformarse en pantallas muy anchas. */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 4 / 3; gap: clamp(0.5rem, 1vw, 1rem); } .gallery a { position: relative; overflow: hidden; background: var(--bone); } .gallery a img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out-expo); } .gallery a::after { content: ''; position: absolute; inset: 0; background: rgba(23, 18, 15, 0.32); opacity: 0; transition: opacity 0.5s var(--ease); } @media (hover: hover) { .gallery a:hover img { transform: scale(1.06); } .gallery a:hover::after { opacity: 1; } } .gallery a:active::after { opacity: 1; } /* Reparto que rellena la retícula 4×3 sin dejar huecos */ .gallery a:nth-child(1) { grid-column: span 2; grid-row: span 2; } .gallery a:nth-child(4) { grid-row: span 2; } .gallery a:nth-child(5) { grid-row: span 2; } .gallery a:nth-child(6) { grid-column: span 2; } .lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(4.5rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem); background: rgba(12, 9, 7, 0.94); overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s; } .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s linear 0s; } .lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; } .lightbox__cap { position: absolute; bottom: clamp(1rem, 4vw, 3rem); left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); text-align: center; font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 235, 221, 0.8); } .lightbox__btn { position: absolute; background: rgba(23, 18, 15, 0.5); border: 1px solid rgba(242, 235, 221, 0.35); color: var(--bone); width: 52px; height: 52px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background 0.3s var(--ease); } .lightbox__btn:active { background: rgba(242, 235, 221, 0.22); } @media (hover: hover) { .lightbox__btn:hover { background: rgba(242, 235, 221, 0.16); } } .lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); } .lightbox__prev { left: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); } .lightbox__next { right: clamp(0.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); } /* -------------------------------------------------------------------------- 18 · VISÍTANOS -------------------------------------------------------------------------- */ .visit { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; } .visit__map { grid-column: 1 / span 7; } .visit__map .media { aspect-ratio: 4 / 3; border: 1px solid var(--line); } .visit__info { grid-column: 9 / span 4; } .info-block { padding-block: 1.5rem; border-bottom: 1px solid var(--line); } .info-block:first-of-type { padding-top: 0; } .info-block h4 { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold-dk); margin-bottom: 0.85rem; } .info-block p, .info-block li { font-size: 1rem; line-height: 1.7; } .info-block a { display: inline-flex; align-items: center; min-height: var(--tap); } .info-block .btn { min-height: var(--tap); } @media (hover: hover) { .info-block a:hover { color: var(--oxblood); } } .hours { display: flex; flex-direction: column; gap: 0.4rem; } .hours li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: var(--fs-small); } .hours li span:last-child { color: var(--text-muted); white-space: nowrap; } .hours li.is-closed span:last-child { color: var(--oxblood); font-weight: 400; } /* -------------------------------------------------------------------------- 18b · PREGUNTAS FRECUENTES -------------------------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); padding-block: 1.1rem; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--tap); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; line-height: 1.3; color: var(--heading); transition: color 0.35s var(--ease); } .faq summary::-webkit-details-marker { display: none; } @media (hover: hover) { .faq summary:hover { color: var(--oxblood); } } .faq summary::after { content: '+'; flex: none; font-family: var(--font-body); font-size: 1.15rem; font-weight: 200; color: var(--gold-dk); transition: transform 0.4s var(--ease-out-expo); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin-top: 0.75rem; padding-right: 2.5rem; font-size: var(--fs-small); line-height: 1.75; color: var(--text-muted); } /* -------------------------------------------------------------------------- 19 · FORMULARIOS -------------------------------------------------------------------------- */ .form { display: grid; gap: 1.75rem; } .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } .field { display: flex; flex-direction: column; gap: 0.6rem; } .field label { font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mid); text-transform: uppercase; color: var(--text-muted); } .field input, .field select, .field textarea { width: 100%; min-height: var(--tap); background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); padding: 0.75rem 0; /* 16px exactos: por debajo, iOS hace zoom automático al enfocar */ font-size: 1rem; font-weight: 300; color: var(--heading); transition: border-color 0.4s var(--ease); border-radius: 0; } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--oxblood); border-bottom-width: 2px; } .field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; } .field input:user-invalid, .field textarea:user-invalid { border-color: var(--oxblood); } .field select { appearance: none; cursor: pointer; } .field--select { position: relative; } .field--select::after { content: ''; position: absolute; right: 4px; bottom: 1.35rem; width: 7px; height: 7px; border-right: 1px solid var(--stone); border-bottom: 1px solid var(--stone); transform: rotate(45deg); pointer-events: none; } .form__note { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.65; } .form__msg { padding: 1rem 1.25rem; border: 1px solid var(--line-gold); background: rgba(183, 144, 85, 0.1); font-size: var(--fs-small); line-height: 1.6; display: none; } .form__msg.is-visible { display: block; } .check { display: flex; align-items: flex-start; gap: 0.85rem; min-height: var(--tap); padding-block: 0.5rem; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; cursor: pointer; } .check input { flex: none; width: 22px; height: 22px; margin-top: 0.1rem; accent-color: var(--oxblood); cursor: pointer; } /* -------------------------------------------------------------------------- 20 · CTA FINAL -------------------------------------------------------------------------- */ .cta-final { position: relative; text-align: center; overflow: hidden; background: var(--oxblood-dk); color: var(--bone); padding-block: clamp(4rem, 12vh, 8rem); } .cta-final::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(183,144,85,0.22), transparent 60%), linear-gradient(180deg, transparent, rgba(23,18,15,0.4)); } .cta-final__in { position: relative; z-index: 2; max-width: 46rem; margin-inline: auto; } .cta-final h2 { color: var(--bone); margin-block: 1.5rem; } .cta-final p { color: rgba(242, 235, 221, 0.88); margin-bottom: 2.5rem; } .cta-final .eyebrow { color: var(--gold-lt); } .cta-final__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* -------------------------------------------------------------------------- 21 · FOOTER -------------------------------------------------------------------------- */ .site-footer { background: var(--ink); color: rgba(242, 235, 221, 0.72); padding-top: clamp(4rem, 9vh, 6.5rem); font-size: var(--fs-small); } .footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(3rem, 6vh, 4.5rem); } .footer__brand .brand { align-items: flex-start; text-align: left; } .footer__brand .brand__word { color: var(--bone); } .footer__brand .brand__mark { color: var(--gold); } .footer__brand p { margin-top: 1.5rem; max-width: 34ch; line-height: 1.75; } .footer h5 { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; } .footer__list { display: flex; flex-direction: column; } .footer__list li { display: flex; } .footer__list a { display: inline-flex; align-items: center; min-height: var(--tap); transition: color 0.35s var(--ease); } .footer__list li:not(:has(a)) { padding-block: 0.5rem; } @media (hover: hover) { .footer__list a:hover { color: var(--bone); } } .footer__social { display: flex; gap: 0.6rem; margin-top: 1.5rem; } .footer__social a { width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(242, 235, 221, 0.28); transition: all 0.4s var(--ease); } .footer__social a:active { background: var(--gold); color: var(--ink); } @media (hover: hover) { .footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } } .footer__social svg { width: 17px; height: 17px; } .footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 1.25rem; /* Deja hueco para el botón flotante de WhatsApp en móvil */ padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(242, 235, 221, 0.12); font-size: 0.8125rem; letter-spacing: 0.06em; } .footer__bar nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .footer__bar a { display: inline-flex; align-items: center; min-height: var(--tap); } @media (hover: hover) { .footer__bar a:hover { color: var(--bone); } } /* WhatsApp flotante */ .wa { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom, 0px)); z-index: 90; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bone); border: 1px solid var(--gold); box-shadow: 0 18px 45px -18px rgba(23, 18, 15, 0.6); transition: all 0.45s var(--ease-out-expo); } .wa:active { background: var(--gold); color: var(--ink); } @media (hover: hover) { .wa:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); } } .wa svg { width: 24px; height: 24px; } /* -------------------------------------------------------------------------- 22 · REVELADO AL SCROLL -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 1s var(--ease-out-expo); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: 0.1s; } [data-reveal][data-delay="2"] { transition-delay: 0.2s; } [data-reveal][data-delay="3"] { transition-delay: 0.3s; } [data-reveal][data-delay="4"] { transition-delay: 0.4s; } /* Preloader */ .preloader { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: var(--ink); color: var(--bone); transition: opacity 0.8s var(--ease), visibility 0.8s; /* Red de seguridad: si el JS falla, la portada no se queda en negro */ animation: preloader-failsafe 0.6s var(--ease) 3s forwards; } @keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader .brand__word { color: var(--bone); font-size: 2rem; } .preloader .brand__mark { color: var(--gold); width: 44px; } .preloader__bar { width: 140px; height: 1px; background: rgba(242, 235, 221, 0.2); overflow: hidden; } .preloader__bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; animation: load 1.4s var(--ease-out-expo) forwards; } @keyframes load { to { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 23 · RESPONSIVE Puntos de corte: 1280 · 1100 · 960 · 768 · 640 · 480 · 380 -------------------------------------------------------------------------- */ /* Portátiles pequeños: la navegación de 6 enlaces empieza a apretarse */ @media (max-width: 1280px) { .nav__list { gap: clamp(0.7rem, 1.6vw, 1.4rem); } .brand__word { font-size: 1.45rem; letter-spacing: 0.16em; } } @media (max-width: 1100px) { .pledges__grid { grid-template-columns: repeat(2, 1fr); } .pledge:nth-child(3) { border-left: 0; } .pledge:nth-child(n+3) { border-top: 1px solid rgba(242, 235, 221, 0.1); } .footer__grid { grid-template-columns: 1fr 1fr; } } /* Tablet y móvil: menú hamburguesa */ @media (max-width: 960px) { :root { --header-h: 64px; } /* La barra superior fuera en móvil. Tres motivos: 1. Deja al encabezado como único elemento pegado al borde superior, que es lo que hace que el relleno del área segura sea infalible. 2. Solo mostraba el teléfono, que ya está en el menú, en el pie, en Contacto y en el botón flotante de WhatsApp. 3. Recupera más de 100 px de alto en pantallas pequeñas. */ .topbar { display: none; } .nav__list { display: none; } .nav { grid-template-columns: auto 1fr auto; } .nav__brand { justify-self: start; } .burger { display: flex; justify-self: end; grid-column: 3; } /* ── Marca en horizontal ─────────────────────────────────────────── Apilada en vertical medía 82 px y hacía que el encabezado real (83 px) no coincidiera con --header-h. Eso descuadraba el scroll-padding de las anclas, el relleno del menú y el alto del hero. El escudo pasa al lado del nombre: el bloque baja a ~34 px. */ .brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-items: start; column-gap: 0.55rem; row-gap: 0; text-align: left; } .brand__mark { grid-column: 1; grid-row: 1 / 3; width: 30px; } .brand__word { grid-column: 2; grid-row: 1; align-self: end; font-size: 1.25rem; letter-spacing: 0.16em; padding-left: 0; } .brand__sub { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.5rem; letter-spacing: 0.3em; padding-left: 0.1em; margin-top: 0.2rem; } .split, .visit { grid-template-columns: 1fr; } /* Gana al style="grid-column:..." en línea de tablas.html y contacto.html */ .split__media, .split__body, .stack, .visit__map, .visit__info { grid-column: 1 / -1 !important; } .split--flip .split__media { grid-row: auto; } .stack__b { position: static; width: 100%; border: 0; margin-top: 1rem; } .sec-head { grid-template-columns: 1fr; align-items: start; } .sec-head__aside { padding-bottom: 0; } .hero__grid { grid-template-columns: 1fr; } /* En una sola columna los puntos pasan a fila y ocupan todo el ancho. El indicador "Desliza" está centrado en absoluto y se les monta encima, así que aquí sobra: en móvil ya se ve que la página continúa. */ .hero__scroll { display: none; } .hero__dots { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.5rem; } .hero__dot { justify-content: center; } .hero__dot i { width: 24px; } /* Recorta el alto del hero para que asome la sección siguiente */ .hero { min-height: min(82svh, 680px); } .hero .eyebrow { margin-bottom: 1.1rem; } .hero__title { margin-bottom: 1.1rem; } .hero__text { margin-bottom: 1.75rem; } .page-hero { min-height: clamp(300px, 42svh, 420px); } /* Retratos a lo ancho ocupaban pantalla y media. En horizontal cunden más. */ .split .media--tall, .split .media--port { aspect-ratio: 3 / 2; } /* Mosaico a 2 columnas × 4 filas, sin huecos */ .gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 2 / 4; } .gallery a:nth-child(1) { grid-column: span 2; grid-row: auto; } .gallery a:nth-child(4) { grid-row: auto; } .gallery a:nth-child(5) { grid-row: auto; } .gallery a:nth-child(6) { grid-column: span 2; } } /* Tablet vertical */ @media (max-width: 768px) { :root { --fs-lead: 1.15rem; } .band blockquote { margin-block: 1.5rem; } .figures { gap: 1.5rem 2rem; } .faq details p { padding-right: 0; } .lightbox__prev { left: 0.5rem; } .lightbox__next { right: 0.5rem; } } /* Móvil */ @media (max-width: 640px) { /* El texto de apoyo sube a 15px para lectura cómoda en mano */ :root { --fs-small: 0.9375rem; --fs-micro: 0.75rem; --section-y: clamp(3rem, 8vh, 4.5rem); } .topbar__in { justify-content: center; } .topbar__hide { display: none; } .pledges__grid { grid-template-columns: 1fr; } .pledge { border-left: 0; padding: 1.5rem clamp(1.25rem, 5vw, 2rem); } .pledge:not(:first-child) { border-top: 1px solid rgba(242, 235, 221, 0.1); } .form__row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .footer__bar { flex-direction: column; align-items: flex-start; } /* Los CTA se apilan a ancho completo: nada de dos botones estrujados */ .btn { width: 100%; } .cta-final__btns, .hero__cta { flex-direction: column; align-items: stretch; } .quote p { font-size: 1.25rem; } .quote { gap: 1rem; } /* Tres tarjetas apiladas eran la sección más larga de la portada */ .card__body h3 { font-size: 1.5rem; } .card__media { aspect-ratio: 16 / 9; } .card__body { padding: 1.25rem; gap: 0.65rem; } .card__list { gap: 0.35rem; } .card__list li { padding-bottom: 0.35rem; } .card__foot { margin-top: 0.4rem; } /* La segunda imagen del par desfasado duplicaba el alto de la sección. El bloque ya se entiende con la principal. */ .stack__b { display: none; } .sec-head { margin-bottom: 2rem; } .figures { margin-top: 2rem; padding-top: 1.75rem; } .step { padding-top: 2rem; } /* ── Catálogo a dos columnas ─────────────────────────────────────── A una sola columna, 19 fichas eran más de 9.000 px de scroll. A dos, la retícula se recorre de un vistazo y se parte por la mitad. */ .prod-grid { grid-template-columns: repeat(2, 1fr); } .prod { padding: 0.85rem; } .prod__media { margin-bottom: 0.85rem; } .prod__origin { font-size: 0.625rem; letter-spacing: 0.12em; margin-bottom: 0.4rem; } .prod__name { font-size: 1.15rem; line-height: 1.15; margin-bottom: 0.45rem; } .prod__desc { font-size: 0.875rem; line-height: 1.55; margin-bottom: 0.9rem; /* Tres líneas y corta: iguala el alto de las fichas sin recortar sentido */ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .prod__foot { padding-top: 0.75rem; } .prod__price { font-size: 1.05rem; } .prod__tag { top: 0.85rem; left: 0.85rem; font-size: 0.5rem; padding: 0.4em 0.65em; letter-spacing: 0.12em; } /* En Contacto las fichas no llevan imagen: ahí el texto va entero */ .prod:not(:has(.prod__media)) .prod__desc { display: block; overflow: visible; } .filters { gap: 0.4rem; margin-bottom: 2rem; padding-bottom: 1.25rem; } .filter { padding: 0.7em 1.1em; } } /* Móviles estrechos */ @media (max-width: 480px) { /* A una columna el mosaico medía 2.100 px (2,5 pantallas). Con dos columnas y sin celdas que se expandan, seis fotos caben en 3 filas: unos 585 px. */ .gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 2 / 3; } .gallery a:nth-child(1), .gallery a:nth-child(6) { grid-column: auto; grid-row: auto; } .band__in .ornament::before, .band__in .ornament::after { width: 2.5rem; } .footer__brand p { max-width: none; } .band { padding-block: clamp(3.5rem, 12vh, 5rem); } .cta-final { padding-block: clamp(3rem, 10vh, 5rem); } } /* iPhone SE y similares */ @media (max-width: 380px) { :root { --gutter: 1rem; } .brand__word { font-size: 1.3rem; } .brand__sub { letter-spacing: 0.24em; } .drawer__link { font-size: 1.6rem; } .wa { width: 50px; height: 50px; } .wa svg { width: 21px; height: 21px; } } /* Pantallas muy anchas: el mosaico no debe estirarse sin fin */ @media (min-width: 1600px) { .gallery { max-height: 780px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .hero__slide img { transform: none; } .band__bg { transform: none !important; } } @media print { .site-header, .topbar, .wa, .preloader, .drawer, .hero__scroll, .skip, .lightbox { display: none !important; } body::after { display: none; } body { color: #000; background: #fff; } .section--dark, .cta-final, .band, .pledges { background: #fff !important; color: #000 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; } }