/*
Theme Name: KANTAURI Collage Editorial
Theme URI: https://kantauri.wine/
Author: KANTAURI
Description: Vista previa independiente de la cabecera editorial KANTAURI inspirada en el díptico y el lenguaje gráfico de Saul Bass.
Version: 1.19.2
Text Domain: kantauri
*/

:root {
  --ink: #032c51;
  --ink-deep: #02233f;
  --cream: #fffaf0;
  --paper: #f7f1e6;
  --sand: #d9ae45;
  --earth: #986a49;
  --vine: #50684d;
  --mist: #dbe3de;
  --line: rgba(16, 45, 66, .18);
  --white: #fff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --wrap: min(1180px, calc(100% - 40px));
}

*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { max-width: 100%; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wrap { width: var(--wrap); margin-inline: auto; }
.eyebrow { margin: 0 0 16px; font-size: .75rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.display { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: .98; }
.section-title { max-width: 780px; font-size: clamp(2.5rem, 6vw, 5.4rem); }
.lede { max-width: 680px; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }

.site-header { position: absolute; z-index: 20; top: 20px; left: 0; width: 100%; color: var(--ink); }
.site-header__inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-inline: 28px; background: rgba(255,250,240,.96); border: 1px solid rgba(3,44,81,.12); border-radius: 22px; box-shadow: 0 12px 30px rgba(3,44,81,.08); }
.brand { display: inline-flex; align-items: center; }
.brand a { display: block; line-height: 0; }
.brand img { width: clamp(190px, 17vw, 244px); max-height: 58px; object-fit: contain; object-position: left center; }
.brand__text { font-size: 1.5rem; font-weight: 760; letter-spacing: .22em; }
.menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 650; }
.menu a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.menu a:hover, .menu a:focus-visible { border-color: currentColor; }
.header-cta { padding: 11px 18px; color: var(--white); background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; }
.menu-toggle { display: none; width: 46px; height: 46px; padding: 0; color: inherit; background: transparent; border: 1px solid var(--ink); border-radius: 50%; }

.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding-top: 108px; color: var(--ink); background: #aebfc7; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .26; background-image: radial-gradient(rgba(3,44,81,.28) .7px, transparent .7px); background-size: 7px 7px; }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(360px, .78fr) minmax(0, 1.22fr); gap: 0; padding-block: 24px 28px; }
.hero__copy { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(34px, 4.2vw, 58px); background: var(--cream); border-radius: 28px 0 0 28px; }
.hero h1 { max-width: 650px; font-size: clamp(3.4rem, 5.6vw, 6rem); line-height: .91; letter-spacing: -.047em; text-wrap: balance; }
.hero__intro { max-width: 560px; margin: 20px 0 0; font-size: clamp(.98rem, 1.25vw, 1.14rem); line-height: 1.48; }
.professional-offer { width: fit-content; max-width: 590px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 20px; padding: 8px 13px 8px 8px; color: var(--cream); background: var(--ink); border: 1px solid var(--ink); border-radius: 15px; box-shadow: 0 12px 26px rgba(3,44,81,.16); transition: transform .2s ease, box-shadow .2s ease; }
.professional-offer:hover, .professional-offer:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(3,44,81,.22); }
.professional-offer__discount { min-width: 68px; min-height: 50px; display: grid; place-items: center; padding: 7px 9px; color: var(--ink); background: var(--sand); border-radius: 9px; font-family: var(--serif); font-size: 1.55rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.professional-offer__copy { display: grid; gap: 2px; }
.professional-offer__copy strong { font-size: .9rem; letter-spacing: .035em; text-transform: uppercase; }
.professional-offer__copy small { color: rgba(255,250,240,.72); font-size: .67rem; line-height: 1.35; }
.professional-offer__arrow { color: var(--sand); font-size: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: .82rem; font-weight: 760; letter-spacing: .04em; transition: transform .2s ease, color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--light { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.button--ghost { color: var(--white); border-color: rgba(255,255,255,.72); }
.button--outline { color: var(--ink); background: transparent; border-color: var(--ink); }
.button--ink { color: var(--white); background: var(--ink); }
.hero__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .64rem; font-weight: 750; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }
.hero__meta b { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--serif); font-size: 1.42rem; font-weight: 400; letter-spacing: 0; }
.hero__visual { position: relative; min-height: 0; overflow: hidden; border-radius: 0 28px 28px 0; }

/* Cabecera editorial inspirada en el díptico KANTAURI y el lenguaje de Saul Bass. */
.bass-collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 7px;
  padding: 18px;
  background-color: #eee6d5;
  background-image: radial-gradient(rgba(34,31,24,.13) .75px, transparent .8px), linear-gradient(105deg, rgba(255,255,255,.38), transparent 38%);
  background-size: 6px 6px, 100% 100%;
  isolation: isolate;
  container-type: inline-size;
}
.bass-collage::before { content: ""; position: absolute; z-index: 0; inset: 18px 18px auto; height: 14px; opacity: .72; background: repeating-linear-gradient(100deg, #171815 0 8px, transparent 8px 16px); transform: translateY(-42%); }
.bass-piece { --bass-rotate: 0deg; --bass-from-x: 0%; --bass-from-y: -120%; position: relative; z-index: 2; min-width: 0; display: flex; align-items: center; justify-content: center; padding: clamp(7px, 1.1cqw, 13px); overflow: hidden; color: #141b1b; background-color: #e8dfcb; background-image: radial-gradient(rgba(0,0,0,.1) .55px, transparent .65px); background-size: 5px 5px; box-shadow: 0 3px 0 rgba(37,32,24,.09); clip-path: polygon(2% 4%, 98% 0, 100% 94%, 3% 100%); font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-size: clamp(.72rem, 2.1cqw, 1.05rem); font-weight: 800; letter-spacing: .025em; line-height: .93; text-align: center; text-transform: uppercase; transform: rotate(var(--bass-rotate)); transform-origin: center; }
.bass-piece small { display: block; font: inherit; font-size: .48em; font-weight: 750; letter-spacing: .08em; line-height: 1.05; }
.bass-piece--txakoli { --bass-rotate: -1.2deg; --bass-from-x: -125%; --bass-from-y: -18%; grid-column: 1 / 7; grid-row: 1 / 4; color: #101817; background-color: #7fa7a3; font-size: clamp(2rem, 8.4cqw, 4.4rem); font-weight: 900; letter-spacing: -.045em; }
.bass-piece--rias { --bass-rotate: .8deg; --bass-from-x: 0%; --bass-from-y: -145%; grid-column: 7 / 9; grid-row: 1 / 5; color: #fff8e9; background-color: #d95c49; font-size: clamp(1.05rem, 4cqw, 2rem); font-weight: 900; letter-spacing: -.025em; }
.bass-piece--ribera { --bass-rotate: -1.1deg; --bass-from-x: 15%; --bass-from-y: -145%; grid-column: 9 / 11; grid-row: 2 / 6; flex-direction: column; background-color: #dfa014; font-size: clamp(.92rem, 3.4cqw, 1.7rem); font-weight: 900; letter-spacing: -.015em; }
.bass-piece--costa { --bass-rotate: 1.3deg; --bass-from-x: 135%; --bass-from-y: -25%; grid-column: 11 / 13; grid-row: 1 / 4; align-items: flex-start; color: #fff9e9; background-color: #536d76; font-style: italic; font-size: clamp(.72rem, 2.5cqw, 1.28rem); font-weight: 800; letter-spacing: .04em; }
.bass-piece--rioja { --bass-rotate: 1deg; --bass-from-x: -145%; --bass-from-y: 0%; grid-column: 1 / 6; grid-row: 5 / 9; color: #fff8e9; background-color: #c93a27; font-size: clamp(2rem, 8.2cqw, 4.25rem); font-weight: 900; letter-spacing: -.04em; }
.bass-piece--eco { --bass-rotate: -.7deg; --bass-from-x: -130%; --bass-from-y: 120%; grid-column: 1 / 4; grid-row: 10 / 12; color: #17332e; background-color: #91a833; }
.bass-piece--salinidad { --bass-rotate: .6deg; --bass-from-x: -35%; --bass-from-y: 145%; grid-column: 4 / 6; grid-row: 9 / 11; color: #fff8e8; background-color: #257487; }
.bass-piece--vegano { --bass-rotate: -.9deg; --bass-from-x: 0%; --bass-from-y: 150%; grid-column: 6 / 8; grid-row: 10 / 12; color: #fff8e8; background-color: #91443f; }
.bass-piece--sulfitos { --bass-rotate: .7deg; --bass-from-x: 35%; --bass-from-y: 145%; grid-column: 8 / 11; grid-row: 10 / 12; color: #2b2921; background-color: #df715f; }
.bass-piece--glou { --bass-rotate: -1.1deg; --bass-from-x: 145%; --bass-from-y: 30%; grid-column: 11 / 13; grid-row: 9 / 12; flex-direction: column; color: #12677a; background-color: #f2e9d8; font-size: clamp(1rem, 3.8cqw, 1.9rem); font-weight: 900; letter-spacing: -.015em; text-shadow: 1.5px 1.5px 0 #e46250; }
.bass-piece--glou small { color: #161b1a; font-family: Georgia, serif; font-size: .4em; font-style: italic; font-weight: 700; letter-spacing: .03em; text-shadow: none; transform: rotate(-3deg); }
.bass-landscape { position: relative; z-index: 1; grid-column: 6 / 13; grid-row: 5 / 10; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #b3c3bd; clip-path: polygon(0 5%, 100% 0, 99% 96%, 1% 100%); }
.bass-landscape::before { content: ""; position: absolute; z-index: 2; top: 13%; left: 31%; width: clamp(34px, 5vw, 66px); aspect-ratio: 1; background: #e97552; border-radius: 50%; mix-blend-mode: multiply; opacity: .82; }
.bass-landscape::after { content: "⌁  ⌁"; position: absolute; z-index: 3; top: 9%; left: 49%; color: #17363c; font-size: clamp(1rem, 2vw, 2rem); letter-spacing: .3em; }
.bass-landscape img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.78) contrast(1.06) sepia(.08); }

@media (prefers-reduced-motion: no-preference) {
  .bass-piece { opacity: 0; transform: translate3d(var(--bass-from-x), var(--bass-from-y), 0) rotate(-8deg) scale(.9); animation: bass-place .82s cubic-bezier(.16,.84,.25,1.08) forwards; will-change: transform, opacity; }
  .bass-landscape { opacity: 0; clip-path: polygon(0 5%, 0 4%, 0 98%, 0 100%); animation: bass-landscape-in 1s cubic-bezier(.2,.75,.2,1) .7s forwards; }
  .bass-piece--txakoli { animation-delay: .12s; }
  .bass-piece--rias { animation-delay: .25s; }
  .bass-piece--ribera { animation-delay: .36s; }
  .bass-piece--costa { animation-delay: .48s; }
  .bass-piece--rioja { animation-delay: .58s; }
  .bass-piece--eco { animation-delay: .76s; }
  .bass-piece--salinidad { animation-delay: .86s; }
  .bass-piece--vegano { animation-delay: .96s; }
  .bass-piece--sulfitos { animation-delay: 1.06s; }
  .bass-piece--glou { animation-delay: 1.16s; }
  @keyframes bass-place { 0% { opacity: 0; transform: translate3d(var(--bass-from-x), var(--bass-from-y), 0) rotate(-8deg) scale(.9); } 72% { opacity: 1; } 100% { opacity: 1; transform: translate3d(0,0,0) rotate(var(--bass-rotate)) scale(1); } }
  @keyframes bass-landscape-in { to { opacity: 1; clip-path: polygon(0 5%, 100% 0, 99% 96%, 1% 100%); } }
}

.ticker { overflow: hidden; color: var(--cream); background: var(--ink); border-block: 1px solid rgba(255,255,255,.18); }
.ticker__track { width: max-content; display: flex; gap: 36px; padding: 17px 0; animation: drift 28s linear infinite; }
.ticker span { display: inline-flex; align-items: center; gap: 36px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ticker span::after { content: "✦"; color: var(--sand); }
@keyframes drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ticker__track, .bass-piece, .bass-landscape { animation: none; } }

/* En escritorio, toda la cabecera se compone dentro del primer viewport. */
@media (min-width: 881px) {
  .hero { height: 100svh; min-height: 650px; }
  .hero__inner { height: 100%; min-height: 0; }
  .hero__copy, .hero__visual { height: 100%; }
}

/* Portátiles con poca altura: se conserva la jerarquía sin cortar la composición. */
@media (min-width: 881px) and (max-height: 760px) {
  .site-header { top: 12px; }
  .site-header__inner { min-height: 68px; }
  .brand img { width: 172px; max-height: 46px; }
  .hero { min-height: 620px; padding-top: 88px; }
  .hero__inner { padding-block: 16px 20px; }
  .hero__copy { padding: clamp(28px, 3.5vw, 44px); }
  .hero h1 { font-size: clamp(3.1rem, 5vw, 5rem); }
  .hero__intro { margin-top: 15px; font-size: clamp(.9rem, 1.08vw, 1.03rem); line-height: 1.42; }
  .professional-offer { margin-top: 15px; }
  .actions { margin-top: 16px; }
  .button { min-height: 44px; padding-block: 9px; }
  .hero__meta { margin-top: 18px; padding-top: 12px; }
  .hero__meta b { font-size: 1.25rem; }
  .bass-collage { padding: 15px; gap: 6px; }
  .bass-collage::before { inset-inline: 15px; }
}

/* Apariciones progresivas: se activan por JS y nunca ocultan contenido si JS falla. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .72s cubic-bezier(.2,.75,.2,1), transform .72s cubic-bezier(.2,.75,.2,1); transition-delay: var(--reveal-delay, 0ms); }
  .motion-ready .motion-reveal[data-motion="left"] { transform: translate3d(-32px, 0, 0); }
  .motion-ready .motion-reveal[data-motion="right"] { transform: translate3d(32px, 0, 0); }
  .motion-ready .motion-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
}

.manifesto { padding: clamp(68px, 7.2vw, 92px) 0; background: var(--cream); }
.manifesto__grid { position: relative; display: grid; grid-template-columns: minmax(190px, .52fr) minmax(0, 1.48fr); gap: clamp(48px, 7vw, 104px); align-items: center; padding: clamp(42px, 5vw, 68px); background: rgba(255,255,255,.3); border: 1px solid var(--line); border-left: 7px solid var(--sand); border-radius: 30px; overflow: hidden; }
.manifesto__grid::after { content: "01"; position: absolute; top: -28px; right: 24px; color: rgba(3,44,81,.055); font-family: var(--serif); font-size: clamp(8rem, 16vw, 14rem); line-height: 1; pointer-events: none; }
.manifesto__grid > div { position: relative; z-index: 1; }
.manifesto__grid > div:first-child { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding-right: 28px; border-right: 1px solid var(--line); }
.manifesto__grid > div:first-child > p:last-child { margin: 34px 0 0; font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.12; }
.manifesto blockquote { max-width: 940px; margin: 0; font-family: var(--serif); font-size: clamp(2.8rem, 4.55vw, 4.9rem); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.manifesto__note { max-width: 470px; margin: 28px 0 0 auto; padding-left: 22px; border-left: 3px solid var(--sand); line-height: 1.5; }

.selection-lenses { padding: clamp(68px, 7vw, 94px) 0 clamp(78px, 8vw, 108px); background: var(--paper); }
.selection-lenses__head { position: relative; display: grid; grid-template-columns: minmax(190px, .5fr) minmax(0, 1.5fr); gap: clamp(48px, 7vw, 104px); align-items: center; margin-bottom: 38px; padding: 18px 0 32px; border-bottom: 1px solid var(--line); }
.selection-lenses__head::before { content: "02"; position: absolute; right: 0; bottom: 18px; color: rgba(3,44,81,.12); font-family: var(--serif); font-size: clamp(3.8rem, 7vw, 7rem); line-height: 1; }
.selection-lenses__head .eyebrow { max-width: 180px; align-self: center; }
.selection-lenses__head .section-title { position: relative; z-index: 1; max-width: 880px; }
.selection-lenses__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.lens-card { position: relative; min-height: 480px; padding: clamp(34px, 4vw, 54px); color: var(--cream); border-radius: 30px; overflow: hidden; isolation: isolate; }
.lens-card--atlantic { background: linear-gradient(135deg, #063c68, #032c51); }
.lens-card--classic { background: linear-gradient(135deg, #bd6848, #98604a); }
.lens-card--story { grid-column: 1 / -1; min-height: 390px; background: linear-gradient(135deg, #087b85, #07626d); }
.lens-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px); background-size: 34px 34px; }
.lens-card__content { position: relative; z-index: 20; max-width: 72%; }
.lens-card__content h3 { margin: 0; color: var(--cream); font-size: clamp(2.8rem, 5vw, 5.2rem); font-weight: 850; letter-spacing: -.055em; line-height: .88; text-transform: uppercase; }
.lens-card__content p { max-width: 620px; margin: 24px 0 0; color: rgba(255,250,240,.9); font-weight: 620; }
.lens-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.lens-card__tags li { padding: 8px 13px; border: 1px solid rgba(255,250,240,.62); border-radius: 999px; font-size: .7rem; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.lens-card__media { position: absolute; z-index: 10 !important; right: -6%; bottom: -23%; width: min(48%, 360px); aspect-ratio: 1 / 1; margin: 0; overflow: hidden; background-color: rgba(255,255,255,.12); background-position: center; background-repeat: no-repeat; background-size: cover; border: 10px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 20px 50px rgba(0,0,0,.2); transition: transform .55s ease; }
.lens-card__media > img { position: absolute !important; inset: 0 !important; z-index: 11 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; }
.lens-card--classic .lens-card__media { right: -10%; width: min(58%, 360px); }
.lens-card--story .lens-card__media { right: 4%; bottom: -34%; width: min(38%, 410px); }
.lens-card:hover .lens-card__media { transform: scale(1.035); }

.territories { padding: 110px 0; }
.territories__head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 52px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.territories__head > p { max-width: 430px; margin-bottom: 7px; padding-left: 20px; border-left: 3px solid var(--sand); }
.territory-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr; grid-template-rows: 320px 320px; gap: 14px; }
.territory-card { position: relative; min-height: 300px; overflow: hidden; background: var(--ink); }
.territory-card:first-child { grid-row: 1 / 3; }
.territory-card:nth-child(4) { grid-column: 2 / 4; }
.territory-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.territory-card:hover img { transform: scale(1.035); }
.territory-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,24,37,.78), transparent 62%); }
.territory-card__label { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; color: white; }
.territory-card__label small { display: block; margin-bottom: 5px; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.territory-card__label strong { font-family: var(--serif); font-size: clamp(1.55rem, 2.6vw, 2.55rem); font-weight: 400; }

.makers { padding: 120px 0; color: var(--cream); background: var(--ink-deep); }
.makers__head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: end; }
.makers__head p { max-width: 480px; margin: 0 0 8px auto; color: rgba(255,255,255,.77); }
.maker-list { margin-top: 60px; border-top: 1px solid rgba(255,255,255,.22); }
.maker { display: grid; grid-template-columns: 90px 1fr 1fr minmax(126px,.46fr); align-items: center; gap: 24px; padding: 20px 8px; border-bottom: 1px solid rgba(255,255,255,.22); transition: padding .22s ease, background .22s ease; }
.maker:hover, .maker:focus-visible { padding-inline: 18px; background: rgba(255,255,255,.05); }
.maker img { width: 74px; height: 74px; object-fit: cover; border-radius: 50%; filter: saturate(.82); }
.maker h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.9rem); font-weight: 400; }
.maker p { margin: 0; color: rgba(255,255,255,.72); font-size: .9rem; }
.maker__link { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px 0; border-top: 1px solid rgba(255,250,240,.52); font-size: .66rem; font-weight: 750; letter-spacing: .13em; line-height: 1; text-transform: uppercase; }
.maker__link i { font-family: var(--sans); font-size: 1.45rem; font-style: normal; font-weight: 300; line-height: .7; transition: transform .22s ease; }
.maker:hover .maker__link i, .maker:focus-visible .maker__link i { transform: translateX(5px); }

.professional { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 760px; background: #dfe5dd; }
.professional__visual { position: relative; min-height: 560px; overflow: hidden; background: var(--cream); }
.professional__visual img:first-child { width: 100%; height: 100%; object-fit: cover; }
.professional__bottle { position: absolute; right: 3%; bottom: -8%; width: min(28%, 230px); filter: drop-shadow(0 28px 20px rgba(0,0,0,.24)); }
.professional__copy { display: flex; flex-direction: column; justify-content: center; padding: 90px clamp(34px, 7vw, 110px); }
.professional__copy h2 { font-size: clamp(3rem, 6vw, 6rem); }
.benefits { display: grid; gap: 0; margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.benefits li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.benefits span { color: var(--earth); font-weight: 800; }

.catalogue { padding: 125px 0; background: var(--cream); }
.catalogue__card { position: relative; display: grid; grid-template-columns: 1fr .7fr; gap: 80px; align-items: center; padding: clamp(36px, 7vw, 90px); color: var(--white); background: var(--ink); overflow: hidden; }
.catalogue__card::after { content: "K"; position: absolute; right: -30px; bottom: -120px; color: rgba(255,255,255,.055); font-family: var(--serif); font-size: 34rem; line-height: 1; }
.catalogue__copy { position: relative; z-index: 1; }
.catalogue h2 { font-size: clamp(3rem, 6.2vw, 6.4rem); }
.catalogue p { max-width: 580px; color: rgba(255,255,255,.76); }
.catalogue__stamp { position: relative; z-index: 1; aspect-ratio: 1; display: grid; place-items: center; padding: 18%; text-align: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-family: var(--serif); font-size: clamp(1.5rem, 3.2vw, 3rem); transform: rotate(5deg); }

.contact { padding: 120px 0; background: #dfe5dd; }
.contact__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(48px, 7vw, 100px); align-items: start; }
.contact__intro { position: sticky; top: 38px; }
.contact h2 { max-width: 650px; font-size: clamp(3.3rem, 6.6vw, 6.8rem); }
.contact__intro .lede { margin-top: 30px; }
.contact__details { display: grid; gap: 0; margin-top: 44px; border-top: 1px solid var(--line); }
.contact__details a { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 760; }
.contact__form-card { padding: clamp(28px, 4vw, 52px); background: var(--cream); border: 1px solid rgba(3,44,81,.12); border-radius: 30px; box-shadow: 0 22px 55px rgba(3,44,81,.09); }
.contact__form-head { display: grid; grid-template-columns: 1fr auto; column-gap: 30px; align-items: end; margin-bottom: 32px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.contact__form-head .eyebrow { grid-column: 1 / -1; }
.contact__form-head h3 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 400; line-height: 1; }
.contact__form-head p { max-width: 250px; margin: 0; font-size: .88rem; }
.professional-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.form-field { display: grid; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--ink); background: #fff; border: 1px solid rgba(3,44,81,.24); border-radius: 10px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(3,44,81,.1); }
.professional-form.was-validated input:invalid, .professional-form.was-validated select:invalid, .professional-form.was-validated textarea:invalid { border-color: #9b372f; }
.form-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .78rem; line-height: 1.45; cursor: pointer; }
.form-check + .form-check { margin-top: -10px; }
.form-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.form-check a { text-decoration: underline; text-underline-offset: 2px; }
.form-submit { display: flex; align-items: center; gap: 18px; margin-top: 5px; }
.form-submit .button { min-width: 180px; cursor: pointer; }
.form-submit .button[disabled] { cursor: wait; opacity: .7; }
.form-submit small { color: rgba(3,44,81,.7); }
.form-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-notice { margin: 0 0 26px; padding: 15px 17px; border-radius: 10px; font-weight: 700; }
.form-notice--success { color: #173f29; background: #e2f1e5; border: 1px solid #8eb29a; }
.form-notice--error { color: #70251f; background: #f8e6e3; border: 1px solid #c88e88; }

.site-footer { padding: 0 0 30px; color: rgba(255,255,255,.78); background: var(--ink-deep); }
.footer-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 70px; }
.footer-story { position: relative; min-height: 250px; display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 30px; color: white; overflow: hidden; border: 1px solid rgba(255,255,255,.17); }
.footer-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(2,35,63,.9), rgba(2,35,63,.12)); }
.footer-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.footer-story:hover img { transform: scale(1.035); }
.footer-story span, .footer-story b { position: relative; z-index: 1; }
.footer-story small { display: block; margin-bottom: 5px; font-size: .66rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.footer-story strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 400; }
.footer-story b { display: grid; width: 50px; height: 50px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: .9rem; }
.footer-main { display: grid; grid-template-columns: 1.5fr .7fr .8fr 1fr; gap: clamp(32px, 5vw, 70px); margin-top: 72px; }
.footer-brand a { display: block; width: min(285px, 100%); line-height: 0; }
.footer-brand img { width: 100%; height: auto; max-height: 84px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.footer-brand > p { max-width: 320px; margin: 20px 0 0; }
.footer-brand .footer-responsibility { max-width: 370px; color: rgba(255,255,255,.5); font-size: .68rem; line-height: 1.55; }
.footer-links { align-content: start; display: grid; gap: 9px; font-size: .84rem; }
.footer-links strong { margin-bottom: 10px; color: white; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.footer-links a, .footer-cookie-button { width: fit-content; color: rgba(255,255,255,.73); border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.footer-links a:hover, .footer-links a:focus-visible, .footer-cookie-button:hover, .footer-cookie-button:focus-visible { color: white; border-color: currentColor; }
.footer-cookie-button { padding: 0; font: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
.footer-contact span { color: rgba(255,255,255,.58); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-top: 58px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.footer-bottom > div:first-child { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.social-links { display: flex; gap: 8px; }
.social-links a { width: 38px; height: 38px; display: grid; place-items: center; color: white; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transition: color .2s ease, background .2s ease, transform .2s ease; }
.social-links a:hover, .social-links a:focus-visible { color: var(--ink); background: var(--cream); transform: translateY(-2px); }
.social-links svg { width: 19px; height: 19px; fill: currentColor; }

/* Plantillas interiores y contenido procedente de WordPress */
.content-hero { padding: 190px 0 76px; color: var(--cream); background: var(--ink); }
.content-hero h1 { max-width: 980px; font-size: clamp(3rem, 7vw, 7rem); }
.content-shell { width: var(--wrap); margin-inline: auto; padding-block: 82px 110px; }
.entry-content { max-width: 850px; font-size: 1.06rem; }
.entry-content > * + * { margin-top: 1.35em; }
.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: 1.8em; font-family: var(--serif); line-height: 1.12; }
.entry-content h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.entry-content h3 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.entry-content a { color: #0a5d8f; text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: 18px; }
.entry-content .wp-block-button__link { color: white; background: var(--ink); border-radius: 999px; text-decoration: none; }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.archive-card { padding: 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 22px; }
.archive-card h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.pagination { margin-top: 42px; }
.not-found { min-height: 72vh; display: grid; place-items: center; text-align: center; }

@media (max-width: 880px) { .archive-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .content-hero { padding-top: 140px; } .content-shell { padding-block: 60px 82px; } .archive-grid { grid-template-columns: 1fr; } }

@media (max-width: 880px) {
  :root { --wrap: min(100% - 30px, 720px); }
  .menu-toggle { display: inline-grid; place-items: center; }
  .primary-nav { position: absolute; top: 92px; left: 0; width: 100%; display: none; padding: 24px 20px; color: var(--ink); background: var(--paper); }
  .primary-nav.is-open { display: block; }
  .menu { align-items: stretch; flex-direction: column; gap: 18px; }
  .header-cta { border-color: var(--ink); text-align: center; }
  .site-header { top: 12px; }
  .site-header__inner { padding-inline: 18px; }
  .hero { min-height: 720px; padding-top: 96px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { min-height: auto; border-radius: 28px 28px 0 0; }
  .hero__visual { min-height: 500px; border-radius: 0 0 28px 28px; }
  .hero__meta { grid-template-columns: 1fr; gap: 9px; }
  .manifesto { padding: 64px 0; }
  .manifesto__grid { grid-template-columns: .55fr 1.45fr; gap: 34px; padding: 36px; border-left-width: 6px; border-radius: 24px; }
  .manifesto__grid > div:first-child { padding-right: 22px; }
  .manifesto__grid::after { top: -12px; right: 20px; font-size: 7.5rem; }
  .manifesto blockquote { position: relative; z-index: 1; font-size: clamp(2.2rem, 5.4vw, 3.1rem); text-wrap: balance; }
  .manifesto__note { max-width: 100%; margin: 26px 0 0; }
  .selection-lenses { padding: 64px 0 76px; }
  .selection-lenses__head { grid-template-columns: 168px 1fr; gap: 30px; align-items: start; margin-bottom: 38px; padding-top: 24px; border-top: 1px solid var(--line); }
  .selection-lenses__head .section-title { font-size: clamp(2.35rem, 6vw, 3.35rem); line-height: 1.02; text-wrap: balance; }
  .makers__head, .contact__grid, .catalogue__card { grid-template-columns: 1fr; gap: 40px; }
  .selection-lenses__grid { grid-template-columns: 1fr; }
  .lens-card, .lens-card--story { grid-column: auto; min-height: 430px; }
  .lens-card__content { max-width: 76%; }
  .lens-card__media, .lens-card--classic .lens-card__media, .lens-card--story .lens-card__media { right: -7%; bottom: -20%; width: min(45%, 310px); }
  .territories { padding: 76px 0; }
  .territories__head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: end; margin-bottom: 38px; padding-bottom: 28px; }
  .territories__head .section-title { font-size: clamp(2.4rem, 6.2vw, 3.4rem); line-height: 1; text-wrap: balance; }
  .territories__head > p { margin: 0 0 2px; font-size: .92rem; }
  .territory-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 430px 280px 280px; }
  .territory-card:first-child { grid-column: 1 / 3; grid-row: auto; }
  .territory-card:nth-child(4) { grid-column: 1 / 3; }
  .professional { grid-template-columns: 1fr; }
  .professional__copy { padding-block: 70px; }
  .catalogue__stamp { width: min(330px, 80%); margin: auto; }
  .contact__intro { position: static; }
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  .brand img { width: 155px; }
  .site-header__inner { min-height: 68px; }
  .primary-nav { top: 78px; }
  .hero__inner { padding: 20px 0 50px; }
  .hero__copy { padding: 34px 24px; }
  .hero__visual { min-height: 390px; }
  .hero__visual.bass-collage { min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: 105px 94px 58px 112px 190px 82px 82px 104px; gap: 5px; padding: 8px; border-radius: 0 0 22px 22px; }
  .bass-collage::before { inset-inline: 8px; height: 14px; }
  .bass-piece { padding: 9px; font-size: 1rem; }
  .bass-piece--txakoli { grid-column: 1 / 3; grid-row: 1; font-size: clamp(3.4rem, 17vw, 5rem); }
  .bass-piece--rias { grid-column: 1; grid-row: 2; font-size: clamp(1.85rem, 9vw, 2.7rem); }
  .bass-piece--ribera { grid-column: 2; grid-row: 2; font-size: clamp(1.65rem, 8vw, 2.4rem); }
  .bass-piece--costa { grid-column: 1 / 3; grid-row: 3; align-items: center; font-size: 1.2rem; }
  .bass-piece--rioja { grid-column: 1 / 3; grid-row: 4; font-size: clamp(3.8rem, 19vw, 5.4rem); }
  .bass-landscape { grid-column: 1 / 3; grid-row: 5; }
  .bass-piece--eco { grid-column: 1; grid-row: 6; font-size: .95rem; }
  .bass-piece--salinidad { grid-column: 2; grid-row: 6; font-size: 1.08rem; }
  .bass-piece--vegano { grid-column: 1; grid-row: 7; font-size: .88rem; }
  .bass-piece--sulfitos { grid-column: 2; grid-row: 7; font-size: .82rem; }
  .bass-piece--glou { grid-column: 1 / 3; grid-row: 8; font-size: 2rem; }
  .hero h1 { font-size: clamp(3.25rem, 16vw, 5.3rem); }
  .professional-offer { width: 100%; grid-template-columns: auto 1fr; padding-right: 12px; }
  .professional-offer__discount { min-width: 68px; font-size: 1.55rem; }
  .professional-offer__arrow { display: none; }
  .actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .manifesto, .selection-lenses, .territories, .makers, .catalogue, .contact { padding-block: 58px; }
  .manifesto__grid { grid-template-columns: 1fr; gap: 22px; padding: 27px 23px; border-left-width: 4px; border-radius: 18px; }
  .manifesto__grid > div:first-child { display: block; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .manifesto__grid > div:first-child > p:last-child { margin-top: 18px; }
  .manifesto__grid::after { top: 13px; right: 15px; font-size: 2.8rem; }
  .manifesto blockquote { font-size: clamp(2rem, 10vw, 2.7rem); line-height: 1.02; }
  .manifesto__note { margin-top: 20px; font-size: .94rem; }
  .selection-lenses__head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; padding: 0 52px 22px 0; border-top: 0; }
  .selection-lenses__head::before { right: 0; bottom: 18px; font-size: 3.8rem; }
  .selection-lenses__head .eyebrow { margin-bottom: 7px; }
  .selection-lenses__head .section-title { font-size: clamp(2.25rem, 11vw, 3rem); }
  .territories__head { display: flex; align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 30px; padding-bottom: 25px; }
  .territories__head .section-title { font-size: clamp(2.25rem, 11vw, 3rem); }
  .territories__head > p { max-width: 100%; padding-left: 15px; }
  .lens-card, .lens-card--story { min-height: 500px; padding: 32px 24px; }
  .lens-card__content { max-width: 100%; }
  .lens-card__content h3 { font-size: clamp(2.65rem, 14vw, 4.2rem); }
  .lens-card__content p { max-width: 94%; }
  .lens-card__media, .lens-card--classic .lens-card__media, .lens-card--story .lens-card__media { right: -12%; bottom: -15%; width: min(62%, 300px); opacity: .92; }
  .territory-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 360px); }
  .territory-card:first-child, .territory-card:nth-child(4) { grid-column: auto; }
  .maker { grid-template-columns: 60px minmax(0,1fr); gap: 10px 14px; padding-block: 18px; }
  .maker img { width: 54px; height: 54px; }
  .maker p { display: none; }
  .maker__link { grid-column: 2; width: 100%; margin-top: 4px; padding-top: 9px; }
  .professional__visual { min-height: 460px; }
  .catalogue__card { width: 100%; min-width: 0; gap: 30px; padding: 32px 22px; }
  .catalogue__copy, .catalogue__copy > * { min-width: 0; max-width: 100%; }
  .catalogue h2 { max-width: 100%; font-size: clamp(2.35rem, 12vw, 3rem); line-height: .96; overflow-wrap: anywhere; text-wrap: balance; }
  .catalogue p { font-size: .96rem; overflow-wrap: break-word; }
  .catalogue__stamp { width: min(245px, 90%); font-size: 1.65rem; }
  .professional__copy, .contact__intro, .contact__form-card, .lens-card__content, .maker, .maker h3 { min-width: 0; }
  .professional__copy h2, .contact h2 { max-width: 100%; font-size: clamp(2.65rem, 13vw, 3.6rem); overflow-wrap: anywhere; text-wrap: balance; }
  .maker h3 { overflow-wrap: anywhere; }
  .contact__form-card { padding: 27px 21px; border-radius: 22px; }
  .contact__form-head, .professional-form { grid-template-columns: 1fr; }
  .contact__form-head p { max-width: none; margin-top: 12px; }
  .form-field--full { grid-column: auto; }
  .form-submit { align-items: stretch; flex-direction: column; }
  .form-submit .button { width: 100%; }
  .footer-stories, .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-story { min-height: 220px; padding: 24px; }
  .footer-main { margin-top: 54px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   PORTADA 1.9 · RECONSTRUCCIÓN FIEL DEL COLLAGE ORIGINAL
   Proporciones tomadas de la pieza impresa, con capas independientes.
   -------------------------------------------------------------------------- */
@media (min-width: 581px) {
  .collage-stage .bass-collage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    grid-template-rows: repeat(14, minmax(0, 1fr));
    gap: clamp(3px, .42vw, 7px);
    padding: clamp(12px, 1.45vw, 20px);
  }
  .collage-stage .bass-piece {
    padding: clamp(7px, 1vw, 14px);
    filter: drop-shadow(0 3px 0 rgba(56,42,24,.11));
  }
  .collage-stage .bass-piece--txakoli {
    grid-column: 1 / 11;
    grid-row: 1 / 7;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5%;
    color: #111b1a;
    background-color: #86aaa2;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(3.5rem, 8.3cqw, 7.2rem);
    font-weight: 900;
    letter-spacing: .005em;
    line-height: .8;
    clip-path: polygon(1% 10%, 97% 0, 100% 91%, 4% 100%);
  }
  .collage-stage .bass-piece--rias {
    grid-column: 11 / 15;
    grid-row: 1 / 6;
    color: #fff7e7;
    background-color: #e46550;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1.65rem, 4.5cqw, 3.9rem);
    font-weight: 900;
    letter-spacing: .01em;
    line-height: .83;
    clip-path: polygon(5% 2%, 94% 0, 100% 94%, 0 100%);
  }
  .collage-stage .bass-piece--ribera {
    grid-column: 15 / 20;
    grid-row: 1 / 5;
    align-items: flex-start;
    padding-top: 8%;
    color: #151c1b;
    background-color: #e5a013;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1.65rem, 4.2cqw, 3.65rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: .78;
    clip-path: polygon(2% 0, 98% 4%, 100% 93%, 0 100%);
  }
  .collage-stage .bass-piece--ribera small { margin-top: .12em; font-size: .46em; letter-spacing: .01em; }
  .collage-stage .bass-piece--costa {
    grid-column: 20 / 25;
    grid-row: 1 / 5;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10%;
    color: #fff9ea;
    background-color: #536f79;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: clamp(1rem, 2.35cqw, 2.05rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: .025em;
    clip-path: polygon(3% 9%, 98% 0, 100% 86%, 0 100%);
  }
  .collage-stage .bass-piece--rioja {
    grid-column: 2 / 13;
    grid-row: 6 / 12;
    justify-content: flex-start;
    padding-left: 10%;
    color: #fff7e5;
    background-color: #c93624;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(4.2rem, 10.7cqw, 9rem);
    font-weight: 900;
    letter-spacing: .01em;
    line-height: .78;
    clip-path: polygon(3% 5%, 100% 0, 94% 95%, 0 100%);
  }
  .collage-stage .bass-landscape {
    z-index: 1;
    grid-column: 10 / 25;
    grid-row: 4 / 12;
    clip-path: polygon(0 7%, 100% 0, 100% 94%, 1% 100%);
  }
  .collage-stage .bass-landscape::before {
    top: 12%;
    left: 47%;
    width: clamp(38px, 5.2cqw, 76px);
    background: #ea7a57;
    opacity: .72;
  }
  .collage-stage .bass-landscape::after { top: 6%; left: 42%; font-size: clamp(1rem, 2.3cqw, 2rem); }
  .collage-stage .bass-landscape img { object-position: center 43%; filter: saturate(.86) contrast(1.02) sepia(.08); }
  .collage-stage .bass-piece--eco {
    grid-column: 1 / 7;
    grid-row: 12 / 15;
    justify-content: flex-start;
    padding-left: 7%;
    color: #29442f;
    background-color: #a2b43d;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1rem, 2.6cqw, 2.2rem);
    font-weight: 900;
    letter-spacing: .035em;
    line-height: .91;
    clip-path: polygon(0 5%, 99% 0, 96% 100%, 3% 94%);
  }
  .collage-stage .bass-piece--eco::after {
    content: "● ●\A ● ● ●\A  ● ●";
    margin-left: 9%;
    white-space: pre;
    color: #244f38;
    font-size: .44em;
    letter-spacing: .13em;
    line-height: .78;
  }
  .collage-stage .bass-piece--salinidad {
    grid-column: 7 / 11;
    grid-row: 12 / 15;
    color: #fff7e9;
    background-color: #257489;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(1rem, 2.4cqw, 2.05rem);
    letter-spacing: .025em;
    clip-path: polygon(3% 0, 98% 5%, 100% 94%, 0 100%);
  }
  .collage-stage .bass-piece--vegano {
    grid-column: 11 / 15;
    grid-row: 12 / 15;
    color: #fff7e9;
    background-color: #93453f;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(.9rem, 1.95cqw, 1.7rem);
    font-weight: 900;
    letter-spacing: .015em;
    clip-path: polygon(1% 5%, 100% 0, 96% 100%, 4% 94%);
  }
  .collage-stage .bass-piece--vegano::after { content: "◯"; margin-left: 7%; font-size: .85em; }
  .collage-stage .bass-piece--sulfitos {
    grid-column: 15 / 19;
    grid-row: 10 / 15;
    color: #251f1c;
    background-color: #e37b67;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(.9rem, 2.1cqw, 1.8rem);
    font-weight: 900;
    letter-spacing: .02em;
    line-height: .9;
    clip-path: polygon(5% 0, 96% 5%, 100% 94%, 0 100%);
  }
  .collage-stage .bass-piece--glou {
    grid-column: 19 / 25;
    grid-row: 8 / 15;
    align-items: center;
    justify-content: center;
    color: #126d7d;
    background-color: #f5edda;
    font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
    font-size: clamp(2rem, 5.4cqw, 4.7rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .73;
    text-shadow: 3px 3px 0 #e45f4e;
    clip-path: polygon(2% 3%, 100% 0, 96% 100%, 0 95%);
  }
  .collage-stage .bass-piece--glou small {
    margin-bottom: .23em;
    color: #171b19;
    font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
    font-size: .31em;
    font-style: italic;
    letter-spacing: .02em;
    text-shadow: none;
    transform: rotate(-4deg);
  }
}

.bass-decoration {
  position: absolute;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(43,39,25,.12));
}
.bass-decoration path { fill: #667142; stroke: #3f4c33; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bass-decoration path:first-child { fill: none; }
.bass-decoration circle { fill: #8a963c; stroke: #465331; stroke-width: 1.5; }
.bass-decoration--vine { top: 20%; left: -.8%; width: clamp(62px, 8.5vw, 116px); transform: rotate(-8deg); }
.bass-decoration--leaves { right: 22%; bottom: -2%; width: clamp(100px, 14vw, 190px); transform: rotate(8deg); }

@media (prefers-reduced-motion: no-preference) {
  .bass-decoration--vine { opacity: 0; animation: bass-vine-in .9s cubic-bezier(.16,.84,.25,1.08) .98s forwards; }
  .bass-decoration--leaves { opacity: 0; animation: bass-leaves-in .9s cubic-bezier(.16,.84,.25,1.08) 1.12s forwards; }
  @keyframes bass-vine-in { from { opacity: 0; transform: translate(-45px,18px) rotate(-22deg); } to { opacity: 1; transform: translate(0,0) rotate(-8deg); } }
  @keyframes bass-leaves-in { from { opacity: 0; transform: translate(30px,35px) rotate(20deg); } to { opacity: 1; transform: translate(0,0) rotate(8deg); } }
}

@media (max-width: 580px) {
  .bass-decoration--vine { top: 8%; left: -5%; width: 74px; }
  .bass-decoration--leaves { right: -4%; bottom: 7%; width: 118px; }
}

/* --------------------------------------------------------------------------
   PORTADA 1.8 · SECUENCIA EDITORIAL
   Primer impacto: collage animado. Segundo impacto: relato comercial.
   -------------------------------------------------------------------------- */
.collage-stage {
  position: relative;
  min-height: 100svh;
  padding: 116px 0 28px;
  overflow: hidden;
  background-color: #aebfc7;
  background-image:
    radial-gradient(rgba(3,44,81,.24) .65px, transparent .75px),
    linear-gradient(128deg, rgba(255,255,255,.16), transparent 45%);
  background-size: 7px 7px, 100% 100%;
}
.collage-stage__frame { height: calc(100svh - 144px); min-height: 560px; }
.collage-stage .hero__visual.bass-collage {
  width: 100%;
  height: 100%;
  min-height: 560px;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(3,44,81,.16);
}
.collage-stage .bass-collage {
  gap: clamp(6px, .7vw, 10px);
  padding: clamp(16px, 2vw, 26px);
  background-image:
    radial-gradient(rgba(34,31,24,.14) .75px, transparent .85px),
    linear-gradient(105deg, rgba(255,255,255,.42), transparent 38%),
    repeating-linear-gradient(4deg, rgba(74,55,34,.025) 0 1px, transparent 1px 5px);
}
.collage-stage .bass-collage::before { inset: 20px 22px auto; height: 17px; }
.bass-signature {
  z-index: 4;
  grid-column: 4 / 10;
  grid-row: 12 / 13;
  align-self: end;
  justify-self: center;
  width: min(230px, 78%);
  padding: 6px 18px 5px;
  background: rgba(255,250,240,.92);
  box-shadow: 0 4px 0 rgba(37,32,24,.08);
  clip-path: polygon(1% 5%, 99% 0, 98% 96%, 2% 100%);
}
.bass-signature img { width: 100%; height: auto; }

.hero--story {
  height: auto;
  min-height: 0;
  padding: clamp(82px, 10vw, 138px) 0;
  background: var(--cream);
}
.hero--story::before { opacity: .08; }
.hero--story .hero__inner {
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(58px, 8vw, 112px);
  align-items: start;
  padding: 0;
}
.hero--story .hero__copy {
  height: auto;
  min-height: 0;
  display: block;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.hero--story h1 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(4rem, 7.2vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.hero__details { min-width: 0; padding-top: 8px; }
.hero--story .hero__intro { margin-top: 0; font-size: clamp(1.05rem, 1.55vw, 1.28rem); line-height: 1.55; }
.hero--story .professional-offer { margin-top: 28px; }
.hero--story .actions { margin-top: 26px; }
.hero--story .hero__meta { margin-top: 44px; }

@media (prefers-reduced-motion: no-preference) {
  .bass-signature { opacity: 0; animation: bass-signature-in .75s cubic-bezier(.2,.75,.2,1) 1.32s forwards; }
  @keyframes bass-signature-in {
    from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); }
    to { opacity: 1; transform: translateY(0) rotate(-.35deg); }
  }
}

@media (max-width: 880px) {
  .collage-stage { min-height: 0; padding: 96px 0 24px; }
  .collage-stage__frame { height: auto; min-height: 590px; }
  .collage-stage .hero__visual.bass-collage { height: 590px; min-height: 590px; border-radius: 26px; }
  .hero--story { min-height: 0; padding: 78px 0; }
  .hero--story .hero__inner { height: auto; grid-template-columns: 1fr; gap: 38px; }
  .hero--story .hero__copy { padding: 0; border-radius: 0; }
  .hero--story h1 { font-size: clamp(4rem, 12vw, 6.2rem); }
  .hero__details { max-width: 650px; padding-top: 0; }
}

@media (max-width: 580px) {
  .collage-stage { padding: 88px 0 18px; }
  .collage-stage__frame { min-height: 0; }
  .collage-stage .hero__visual.bass-collage {
    height: auto;
    min-height: 0;
    grid-template-rows: 105px 94px 58px 112px 190px 82px 82px 104px 72px;
    border-radius: 20px;
  }
  .bass-signature { grid-column: 1 / 3; grid-row: 9; width: min(190px, 68%); padding: 6px 16px; }
  .hero--story { padding: 66px 0 72px; }
  .hero--story .hero__inner { gap: 30px; padding: 0; }
  .hero--story h1 { font-size: clamp(3.55rem, 16vw, 5rem); }
  .hero--story .hero__intro { font-size: 1rem; }
  .hero--story .professional-offer { margin-top: 22px; }
  .hero--story .hero__meta { margin-top: 32px; }
}