/* Brilo Studio site base: a reset, the skip link, focus outlines, .visually-hidden and no smooth scroll under reduced motion. */
/* It decides nothing about the look and hides nothing at rest. The site's own styles follow it in site.css. */
/* From Brilo Studio plugins/studio/templates/site/site.css; scaffold.mjs copies it and never overwrites it. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

img, picture, video, canvas {
  display: block;
  max-width: 100%;
}

/* An SVG stays inline (icons in text); when narrowed, it keeps its proportions. */
svg {
  max-width: 100%;
}

img, video, svg {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

/* Off screen until focused, then shown at the top left above everything. */
.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: Canvas;
  color: CanvasText;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* For screen readers only: clipped to nothing, never faded. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: no smooth scrolling, whatever the site's own CSS says. Nothing else is cut here: each scene's
   reduced branch and the site's CSS remove movement and keep the fades and state changes that carry meaning. */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}

/* Rigged motion graphics (rig.js, rig.mjs): every node is the rig's box, turned about its pivot. */
.rig { position: relative; }
.rig-node, .rig-flutter { position: absolute; inset: 0; pointer-events: none; }
.rig-img { position: absolute; display: block; }
.rig-img img { display: block; width: 100%; height: auto; }
/* A living thing drawn larger than its cut (bend.js, --bend-grow, the rig marked data-bend="wait") shows once its canvas
   draws it at its grown size: its cut at its own size would jump, and scaled as pictures it shows its seams. */
@media (prefers-reduced-motion: no-preference) { [data-bend="wait"] > [data-rig-part] { visibility: hidden; } }


/* ————————————————————————————————————————————————————————————————————————————————————————————————————
   Hesstora: Hesperia al anochecer. The brand manual's palette and type (EB Garamond, Inter), the night of the
   Mediterranean as the ground, limestone as the light band, one bronze hairline as the only accent.
   ———————————————————————————————————————————————————————————————————————————————————————————————————— */

@font-face { font-family: "EB Garamond"; src: url("fonts/ebgaramond-latin-wght.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+2122, U+2192; }
@font-face { font-family: "EB Garamond"; src: url("fonts/ebgaramond-latin-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+2122, U+2192; }
@font-face { font-family: "EB Garamond"; src: url("fonts/ebgaramond-latin-ext-wght.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+2122, U+2192; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-ext-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The latin faces are subset to the characters Spanish and English pages use (lab/fonts-full keeps the full files;
   the italic is EB Garamond pinned at 400, the only weight the quotes use), 91 KB in all. Fallbacks sized to the web faces, so nothing jumps when they arrive. */
@font-face { font-family: "Garamond Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 92%; ascent-override: 102%; descent-override: 32%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  /* the manual's palette, by its own names */
  --noche: #102131;          /* Noche Hesperia */
  --noche-deep: #0b1826;     /* the night deeper, for the footer and photo shades */
  --noche-line: #26394c;     /* a navy hairline on navy */
  --caliza: #f3efe7;         /* Piedra Caliza */
  --caliza-deep: #e7e0d3;    /* limestone in shade */
  --plata: #b8bec4;          /* Plata Estoica: lines and quiet text on navy only */
  --oliva: #6a7259;          /* Oliva Antigua */
  --terracota: #a45d44;      /* Terracota Mediterránea */
  --bronce: #9a7b50;         /* Bronce Legado: the one accent */
  --bronce-luz: #c4a477;     /* bronze for small text on navy (contrast 7.4:1) */
  --bronce-tinta: #7a5f3b;   /* bronze for small text on limestone (contrast 5.3:1) */
  --rosa: #e9ddd7;           /* Palo Rosa Editorial */
  --lola-rojo: #b5121b;      /* El Pecado de Lola: its label's red, on its own page only */
  --lola-crema: #f6eee3;

  --font-display: "EB Garamond", "Garamond Fallback", Georgia, serif;
  --font-text: "Inter", "Inter Fallback", Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.875rem);
  --step-3: clamp(1.9rem, 1.45rem + 2vw, 3rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);
  --step-5: clamp(2.9rem, 1.6rem + 5.6vw, 6rem);

  --gutter: max(clamp(1.25rem, 4.5vw, 4.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: 82rem;
  --space-s: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-m: clamp(2rem, 1.4rem + 3vw, 4rem);
  --space-l: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --bar-h: 4.75rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hair: 1px;
}

html { background: var(--noche); scroll-padding-top: calc(var(--bar-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--font-text); font-size: var(--step-0); line-height: 1.62; color: var(--caliza); background: var(--noche); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: var(--bronce); color: var(--caliza); }
a { color: inherit; text-decoration-thickness: var(--hair); text-underline-offset: 0.22em; }
:focus-visible { outline: 2px solid var(--bronce-luz); outline-offset: 4px; border-radius: 2px; }
.band-stone :focus-visible, .band-rose :focus-visible { outline-color: var(--noche); }
.skip-link { background: var(--caliza); color: var(--noche); font-weight: 600; border-radius: 2px; }
b, strong { font-weight: 600; }
small { font-size: 0.82em; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 46rem; }
.band-night { background: var(--noche); color: var(--caliza); }
.band-stone { background: var(--caliza); color: var(--noche); }
.band-rose { background: var(--rosa); color: var(--noche); }
section { position: relative; }
main > section:not(.hero):not(.phero):not(.lola-hero):not(.pd) { padding-block: var(--space-l); }
/* Sections carry their own side inset (the gutter) and the column inside fills it, up to the measure. */
main > section:is(.band-stone, .band-night, .band-rose, .pd, .lola-facts, .lola-story, .cta-band):not(.maker, .bridge) { padding-inline: var(--gutter); }
main > section:is(.band-stone, .band-night, .band-rose, .pd, .lola-facts, .lola-story, .cta-band):not(.maker, .bridge) .wrap { width: min(100%, var(--wrap)); }

/* Type */
.h1, .h2, .h3, .h4, .h-xl, .hero-h, .quote p, .lead-serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; }
.h-xl { font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.025em; }
.h1 { font-size: var(--step-5); line-height: 1; letter-spacing: -0.022em; }
.h2 { font-size: var(--step-4); line-height: 1.04; margin-bottom: 0.45em; }
.h3 { font-size: var(--step-3); line-height: 1.08; margin-bottom: 0.4em; }
.h4 { font-size: var(--step-2); line-height: 1.15; margin: 1.6em 0 0.45em; }
.lead { font-size: var(--step-1); line-height: 1.55; max-width: 40rem; text-wrap: pretty; }
p + p { margin-top: 1em; }
.lead + p { margin-top: 1.1em; }
p { max-width: 42rem; text-wrap: pretty; }
.label { font-family: var(--font-text); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronce-luz); margin: 2.2em 0 1em; }
.band-stone .label, .band-rose .label { color: var(--bronce-tinta); }
.note { font-size: var(--step--1); color: color-mix(in srgb, currentColor 72%, transparent); margin-top: 1.2em; }
.quote-s { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; margin-top: 1.2em; }
.sec-head { margin-bottom: var(--space-m); }
.sec-head .lead { margin-top: 0.4em; }

/* Links and buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 3rem; padding: 0.85em 1.6em; border-radius: 999px; font: 500 var(--step-0)/1 var(--font-text); letter-spacing: 0.01em; text-decoration: none; border: var(--hair) solid transparent; transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out); cursor: pointer; }
.btn-solid { background: var(--caliza); color: var(--noche); }
.btn-ink { background: var(--noche); color: var(--caliza); }
.btn-line { border-color: color-mix(in srgb, currentColor 55%, transparent); color: inherit; min-height: 2.6rem; padding: 0.7em 1.3em; font-size: var(--step--1); }
.btn-lola { background: var(--lola-rojo); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: #fff; }
  .btn-ink:hover { background: var(--noche-deep); }
  .btn-line:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
  .btn-lola:hover { background: #8f0d15; }
}
.btn:active { transform: translateY(1px); }
.link-arrow { display: inline-flex; align-items: baseline; gap: 0.5em; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); padding-block: 0.6em; }
.link-arrow span { transition: transform 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover { text-decoration-color: currentColor; } .link-arrow:hover span { transform: translateX(0.3em); } }
.btn-text { background: none; border: 0; padding: 0.5em 0; font: 500 var(--step--1)/1.2 var(--font-text); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; color: inherit; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; max-width: none; }
.badge-line { display: inline-block; font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronce-luz); border-top: var(--hair) solid currentColor; padding-top: 0.7em; margin-top: 1.4em; }
.band-stone .badge-line { color: var(--bronce-tinta); }

/* The arch hairline (the logo's crescent) */
.arch-line, .phero-arch { display: block; overflow: visible; }
.arch-line path, .phero-arch path, .pil-line path { fill: none; stroke: var(--bronce); stroke-width: 1px; }

/* ———————————————— Header and menu */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--caliza); transition: background-color 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s; padding-top: env(safe-area-inset-top); }
.bar-in { width: min(100% - 2 * var(--gutter), 96rem); margin-inline: auto; height: var(--bar-h); display: flex; align-items: center; gap: 2rem; }
.bar:not(.bar-over), .bar.is-solid { background: color-mix(in srgb, var(--noche) 94%, transparent); border-bottom: 1px solid var(--noche-line); }
@supports (backdrop-filter: blur(10px)) { .bar:not(.bar-over), .bar.is-solid { background: color-mix(in srgb, var(--noche) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); } }
html.bar-away .bar { transform: translateY(-100%); }
.bar-logo { display: block; margin-right: auto; color: var(--caliza); }
.bar-logo .logo { height: 2.65rem; width: auto; }
.bar-nav { display: none; gap: 2.2rem; font-size: var(--step--1); letter-spacing: 0.04em; }
.bar-nav a { text-decoration: none; padding-block: 0.6em; position: relative; }
.bar-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.25em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.bar-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--bronce-luz); }
@media (hover: hover) and (pointer: fine) { .bar-nav a:hover::after { transform: scaleX(1); } }
.bar-cta { display: none; }
.bar-menu { display: inline-flex; align-items: center; gap: 0.7rem; background: none; border: 0; padding: 0.7rem 0; cursor: pointer; font: 500 var(--step--1)/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; }
.bar-menu-i { display: grid; gap: 6px; width: 24px; }
.bar-menu-i i { display: block; height: 1px; background: currentColor; transition: transform 0.4s var(--ease-out); }
.bar-menu[aria-expanded="true"] .bar-menu-i i:first-child { transform: translateY(3.5px) rotate(45deg); }
.bar-menu[aria-expanded="true"] .bar-menu-i i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 960px) {
  .bar-nav { display: flex; }
  .bar-cta { display: inline-flex; }
  .bar-menu { display: none; }
}
.menu { position: fixed; inset: 0; z-index: 40; background: var(--noche); color: var(--caliza); padding: calc(var(--bar-h) + env(safe-area-inset-top) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu-in { max-width: 40rem; margin-inline: auto; display: grid; gap: 2.5rem; }
.menu ul { list-style: none; padding: 0; }
.menu li { border-bottom: var(--hair) solid var(--noche-line); }
.menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.05rem 0; text-decoration: none; }
.m-label { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; }
.m-sub { font-size: var(--step--1); color: var(--plata); text-align: right; }
.menu a[aria-current="page"] .m-label { color: var(--bronce-luz); }
.menu-note { color: var(--plata); font-size: var(--step--1); }
html.menu-open { overflow: hidden; }
html.menu-open .bar { background: var(--noche); box-shadow: none; transform: none; }

/* ———————————————— Home: hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; color: var(--caliza); background: var(--noche); }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-cam { position: absolute; inset: -3%; will-change: transform; }
.hero-pic, .hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-pic img { object-fit: cover; object-position: 50% 50%; }
.hero-arch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero-arch path { fill: none; stroke: var(--bronce-luz); stroke-width: 1.25px; vector-effect: non-scaling-stroke; opacity: 0.85; }
.hero-arch-t { display: none; }
@media (orientation: portrait) and (max-width: 1023px) {
  .hero-arch-w { display: none; }
  .hero-arch-t { display: block; }
}
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 24 38 / 0.55) 0%, rgb(11 24 38 / 0) 22%, rgb(11 24 38 / 0) 48%, rgb(11 24 38 / 0.18) 100%); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 60rem); margin: 0 auto; text-align: center; padding: calc(var(--bar-h) + 2rem) 0 clamp(4.5rem, 14svh, 9rem); }
.hero-h { font-size: clamp(3.1rem, 1.4rem + 6.4vw, 6rem); line-height: 0.98; letter-spacing: -0.025em; text-shadow: 0 2px 30px rgb(11 24 38 / 0.45); }
.hero-desc { margin: 1.4rem auto 0; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronce-luz); max-width: none; }
.hero-dist { margin: 0.55rem auto 0; font-size: var(--step-1); max-width: none; text-shadow: 0 1px 16px rgb(11 24 38 / 0.6); }
.hero .hero-actions { justify-content: center; }
.mask { display: inline-block; overflow: clip; overflow-clip-margin: 0.25em; vertical-align: top; padding-bottom: 0.06em; }
.mask > span { display: inline-block; }
@media (orientation: portrait) and (max-width: 1023px) {
  .hero { align-items: center; }
  .hero-copy { padding-top: calc(var(--bar-h) + 6svh); padding-bottom: 40svh; }
}
@media (max-width: 520px) {
  .hero-desc { letter-spacing: 0.16em; font-size: 0.75rem; }
  .hero-dist { font-size: var(--step-0); }
}

/* ———————————————— Story: the name */
.story-in { display: grid; gap: var(--space-m); align-items: center; }
.story-mark { position: relative; width: min(70vw, 26rem); justify-self: center; color: var(--caliza); }
.story-mark .logo { width: 100%; height: auto; opacity: 0.94; }
.story-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-arc path { fill: none; stroke: var(--bronce-luz); stroke-width: 1.5px; vector-effect: non-scaling-stroke; transform: translateY(-7%); }
.syll { display: grid; gap: 1.4rem; margin: 2.2rem 0 1.6rem; }
.syll div { border-top: var(--hair) solid var(--noche-line); padding-top: 1rem; }
.syll dt { font-family: var(--font-display); font-size: var(--step-2); }
.syll dt b { font-family: var(--font-text); font-weight: 500; font-size: max(0.75rem, 0.6em); letter-spacing: 0.22em; color: var(--bronce-luz); margin-right: 0.6em; vertical-align: 0.18em; }
.syll dd { margin: 0.35rem 0 0; color: color-mix(in srgb, var(--caliza) 84%, var(--noche)); }
.story-close { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; margin-bottom: 0.6rem; }
@media (min-width: 900px) {
  .story-in { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 9rem); }
  .story-mark { justify-self: stretch; width: 100%; max-width: 30rem; }
  .syll { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ———————————————— Pillars band */
.pillars-in { text-align: center; }
.quote { margin: 0 auto; max-width: 62rem; }
.quote p { font-size: var(--step-4); line-height: 1.06; max-width: none; margin-inline: auto; }
.pillars-list { margin: 2rem auto 0; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronce-tinta); max-width: none; }

/* ———————————————— The bridge (signature): two pillars, the H's arch between them */
.bridge { padding-block: 0 !important; --g: clamp(1rem, 3vw, 4rem); }
.bridge > .verbs { padding-bottom: var(--space-l); margin-top: 0; }
.bridge-stage { padding-block: var(--space-l); }
.bridge-frame { width: min(100% - 2 * var(--gutter), 88rem); margin-inline: auto; }
.bridge-top { position: relative; height: clamp(5.5rem, 13vw, 11rem); margin-inline: calc((100% - var(--g)) / 4); }
.bridge-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bridge-arc path { fill: none; stroke: var(--bronce); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.bridge-words { position: absolute; left: 0; right: 0; top: 52%; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin: 0 auto; max-width: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronce-luz); }
.bridge-seal { position: absolute; left: 50%; top: -0.6rem; width: clamp(2.8rem, 5vw, 4.2rem); translate: -50% -100%; color: var(--caliza); }
.bridge-seal .logo { width: 100%; height: auto; display: block; }
.bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem var(--g); }
.pillar { position: relative; display: flex; flex-direction: column; }
.pillar .win { aspect-ratio: 5 / 7; }
.pillar-cap { margin-top: 0.9rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--plata); text-align: center; max-width: none; }
.pillar-l { grid-column: 1; grid-row: 1; } .pillar-r { grid-column: 2; grid-row: 1; }
.bridge-mid { grid-column: 1 / -1; grid-row: 2; text-align: center; padding-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bridge-mid .h2 { margin-bottom: 0.35em; }
.bridge-text { margin: 0 auto; max-width: 32rem; color: color-mix(in srgb, var(--caliza) 86%, var(--noche)); }
.bridge-tins { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; margin: 1.8rem auto 0.4rem; height: clamp(7rem, 12vw, 9rem); }
.tin-stand { display: block; height: 100%; filter: drop-shadow(0 16px 16px rgb(0 0 0 / 0.35)); }
.tin-stand picture, .tin-stand img { height: 100%; width: auto; }
.verbs { list-style: none; padding: 0; width: min(100% - 2 * var(--gutter), 72rem); margin: var(--space-m) auto 0; display: grid; gap: 1.4rem; }
.verbs li { border-top: var(--hair) solid var(--noche-line); padding-top: 1rem; color: color-mix(in srgb, var(--caliza) 84%, var(--noche)); font-size: var(--step--1); }
.verbs b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); color: var(--caliza); margin-bottom: 0.25rem; }
@media (max-width: 899px) { .bridge-words { display: none; } }
@media (min-width: 900px) {
  .bridge-top { margin-inline: calc((100% - 2 * var(--g)) / 3.4 / 2); }
  .bridge-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
  .bridge-mid { grid-column: 2; grid-row: 1; padding: 1rem 0 2.4rem; }
  .pillar-r { grid-column: 3; }
  .pillar .win { aspect-ratio: auto; flex: 1 1 auto; min-height: 22rem; }
  .verbs { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 720px) {
  .bridge-scroll { height: 230svh; }
  .bridge-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; align-content: center; padding-block: calc(var(--bar-h) + 6.5svh) 4svh; }
  .bridge-frame { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
  .bridge-grid { min-height: 0; }
  .bridge .pillar .win { flex: 0 0 auto; min-height: 0; height: max(17rem, calc(100svh - var(--bar-h) - 10.5svh - clamp(5.5rem, 13vw, 11rem) - 4.5rem)); }
  .bridge-stage { grid-template-rows: 1fr; }
  .bridge .verbs { margin-top: 0; padding-bottom: var(--space-l); }
}

/* Arched photo windows: the brand's own frame (the H's arch), with one bronze hairline */
.win { position: relative; margin: 0; container-type: inline-size; border-radius: 999px 999px 0 0; border-radius: 50cqw 50cqw 0 0; overflow: hidden; isolation: isolate; background: var(--noche-deep); }
.win picture, .win img { width: 100%; height: 100%; }
.win img { object-fit: cover; }
.win::after { content: ""; position: absolute; inset: 0.6rem; border: var(--hair) solid color-mix(in srgb, var(--caliza) 55%, transparent); border-radius: inherit; border-bottom: 0; pointer-events: none; }
.win-tall { aspect-ratio: 3 / 4; }

/* ———————————————— Brands */
.brand-pair { display: grid; gap: var(--space-l); }
.brand-card { display: grid; gap: 2rem; align-items: center; }
.brand-media { position: relative; display: block; text-decoration: none; }
.brand-ep .win { aspect-ratio: 4 / 5; }
.brand-ep .win img { object-position: 30% 50%; }
.brand-tin { position: absolute; right: -0.5rem; bottom: -1.5rem; width: clamp(5.5rem, 12vw, 7.5rem); filter: drop-shadow(0 14px 16px rgb(16 33 49 / 0.35)); }
.brand-lola .win { aspect-ratio: 4 / 5; }
.lola-clip { position: absolute; left: -1rem; bottom: -2rem; width: clamp(7rem, 16vw, 10rem); aspect-ratio: 576 / 872; background: var(--lola-crema); border-radius: 2px; overflow: hidden; box-shadow: 0 18px 40px rgb(0 0 0 / 0.22); }
.lola-clip img, .lola-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lola-clip video { opacity: 0; transition: opacity 0.3s; }
.lola-clip video.on { opacity: 1; }
.lola-clip video::-webkit-media-controls, .lola-clip video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.brand-copy .h3 a { text-decoration: none; }
.brand-line { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; margin-bottom: 0.8rem; }
.brand-ep .brand-line { color: var(--bronce-tinta); }
.brand-lola .brand-line { color: var(--lola-rojo); }
.brand-maker { font-size: var(--step--1); letter-spacing: 0.01em; color: color-mix(in srgb, var(--noche) 68%, var(--caliza)); }
@media (min-width: 900px) {
  .brand-pair { grid-template-columns: 1.15fr 1fr; gap: clamp(3rem, 7vw, 8rem); align-items: start; }
  .brand-lola { margin-top: clamp(6rem, 14vw, 13rem); }
}

/* ———————————————— Maker */
.maker { overflow: clip; }
.maker-pic { position: relative; height: 60svh; min-height: 22rem; margin: calc(-1 * var(--space-l)) 0 var(--space-m); }
.maker-pic picture, .maker-pic img { width: 100%; height: 100%; }
.maker-pic img { object-fit: cover; object-position: 50% 60%; }
.maker-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--noche) 100%); }
.pull { margin: 2rem 0; padding-left: 1.4rem; border-left: var(--hair) solid var(--bronce); }
.pull p { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; }
.pull footer { margin-top: 0.5rem; font-size: var(--step--1); color: var(--plata); letter-spacing: 0.12em; text-transform: uppercase; }
.pull-ink footer { color: var(--bronce-tinta); }
.figs { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 2rem 0 0; }
.figs div { display: flex; flex-direction: column-reverse; }
.figs dd { margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; }
.figs dt { font-size: var(--step--1); color: var(--plata); margin-top: 0.35rem; max-width: 14rem; }
.seals { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.seal { position: relative; display: grid; gap: 0.2rem; padding: 1.15rem 1.15rem 1.15rem 4.4rem; min-height: 5.2rem; border: var(--hair) solid var(--noche-line); border-radius: 999px; }
.band-stone .seal { border-color: var(--caliza-deep); }
.seal-ring { position: absolute; left: 0.9rem; top: 50%; width: 2.6rem; height: 2.6rem; translate: 0 -50%; border-radius: 50%; border: var(--hair) dashed var(--bronce); box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--bronce) 60%, transparent); }
.seal-name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.1; }
.seal-note { font-size: 0.8rem; line-height: 1.35; color: color-mix(in srgb, currentColor 75%, transparent); }
.seal-reg { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--bronce-luz); }
.band-stone .seal-reg { color: var(--bronce-tinta); }
@media (min-width: 900px) {
  .maker { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .maker-pic { grid-column: 2; grid-row: 1; height: auto; min-height: 100%; margin: calc(-1 * var(--space-l)) 0; }
  .maker-pic::after { background: linear-gradient(90deg, var(--noche) 0%, transparent 35%); }
  .maker-in { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right: clamp(2rem, 4vw, 5rem); }
}

/* ———————————————— Catalogue preview: the round window and its turning ring */
.catsec-in { display: grid; gap: var(--space-m); align-items: center; }
.catsec-show { position: relative; width: min(78vw, 30rem); aspect-ratio: 1; justify-self: center; }
.ring-win { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: var(--noche); }
.ring-pic { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.ring-pic.on { opacity: 1; }
.ring-pic picture, .ring-pic img { width: 100%; height: 100%; }
.ring-pic img { object-fit: cover; transform: scale(1.35); }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring circle { fill: none; stroke: var(--bronce); stroke-width: 0.6; }
.ring-dots circle { stroke-width: 1.6; stroke-dasharray: 0.01 1; stroke-linecap: round; }
.fam-index { list-style: none; padding: 0; margin: 2rem 0 2.4rem; border-top: var(--hair) solid var(--caliza-deep); }
.fam-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.95rem 0.2rem; border-bottom: var(--hair) solid var(--caliza-deep); text-decoration: none; transition: padding 0.45s var(--ease-out), color 0.3s; }
.fi-name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.fi-n { font-size: var(--step--1); color: var(--bronce-tinta); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .fam-index a:hover, .fam-index a:focus-visible { padding-left: 0.8rem; } }
@media (min-width: 900px) { .catsec-in { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 9rem); } .catsec-show { width: 100%; max-width: 34rem; } }

/* ———————————————— Formats */
.formats-in { display: grid; gap: var(--space-m); align-items: center; }
.tins-draw { width: 100%; max-width: 34rem; height: auto; overflow: visible; }
.tins-draw .body { fill: color-mix(in srgb, currentColor 6%, transparent); stroke: currentColor; stroke-width: 1.2; }
.tins-draw .rib, .tins-draw .lid { fill: none; stroke: currentColor; stroke-width: 0.7; opacity: 0.55; }
.tins-draw .lid { opacity: 0.9; stroke-width: 1.1; }
.tins-draw .dim { stroke: var(--bronce); stroke-width: 1; }
.tins-draw .dimt { fill: currentColor; font: 400 20px var(--font-text); letter-spacing: 0.06em; opacity: 0.85; }
.tins-draw .kg { fill: currentColor; font: 400 30px var(--font-display); }
.facts { width: 100%; margin-top: 1.8rem; font-size: var(--step--1); }
.facts th, .facts td { text-align: left; padding: 0.72rem 0.9rem 0.72rem 0; border-bottom: var(--hair) solid var(--noche-line); vertical-align: top; }
.band-stone .facts th, .band-stone .facts td { border-color: var(--caliza-deep); }
.facts thead th { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; color: var(--bronce-luz); }
.band-stone .facts thead th { color: var(--bronce-tinta); }
.facts tbody th { font-weight: 400; color: color-mix(in srgb, currentColor 72%, transparent); }
.facts td { font-weight: 500; }
.facts small { font-size: 1em; font-weight: 400; opacity: 0.8; }
@media (min-width: 900px) { .formats-in { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 8rem); } }
@media (max-width: 520px) { .facts th, .facts td { padding-right: 0.5rem; } .facts { font-size: 0.8rem; } }
.care { padding-left: 1.1rem; display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.care li::marker { color: var(--bronce); }

/* ———————————————— Producers band, with the pen that traces an empty pillar */
.producers-in { display: grid; gap: var(--space-m); align-items: center; }
.trace { width: clamp(7rem, 16vw, 11rem); height: auto; overflow: visible; justify-self: center; }
.trace path { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.trace-base { stroke: color-mix(in srgb, var(--noche) 18%, transparent); }
.trace-pen { stroke: var(--bronce-tinta); }
@media (min-width: 900px) { .producers-in { grid-template-columns: auto 1fr; gap: clamp(3rem, 8vw, 9rem); } }

/* ———————————————— Closing */
.closing-in { display: grid; gap: var(--space-m); align-items: center; }
.closing-copy .lead { margin: 1.4rem 0 0.4rem; }
.closing .win { width: min(100%, 30rem); justify-self: center; }
@media (min-width: 900px) { .closing-in { grid-template-columns: 7fr 5fr; } .closing .win { justify-self: end; } }

/* ———————————————— The thread: one bronze line down the margin, the evening star at its tip */
.thread { position: absolute; left: max(0.7rem, calc((100vw - var(--wrap)) / 2 - 2.6rem)); top: 100svh; width: 1px; pointer-events: none; z-index: 3; display: none; }
.thread-line { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bronce) 0%, var(--bronce) 100%); transform-origin: 50% 0; transform: scaleY(0); opacity: 0.55; }
.thread-star { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; opacity: 0; border-radius: 50%; background: var(--bronce-luz); box-shadow: 0 0 0 3px rgb(196 164 119 / 0.18); }
@media (prefers-reduced-motion: no-preference) { .is-home .thread.on { display: block; } }
@media (max-width: 899px) { .thread { left: 0.55rem; } .thread-line { opacity: 0.4; } }
main { position: relative; }

/* ———————————————— Inner page heroes */
.phero { position: relative; color: var(--caliza); background: var(--noche); overflow: clip; }
.phero-media { position: absolute; inset: 0; overflow: hidden; }
.phero-cam { position: absolute; inset: -3%; will-change: transform; }
.phero-cam picture, .phero-cam img { width: 100%; height: 100%; }
.phero-cam img { object-fit: cover; }
.phero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 24 38 / 0.86) 0%, rgb(11 24 38 / 0.55) 45%, rgb(11 24 38 / 0.05) 80%), linear-gradient(180deg, rgb(11 24 38 / 0.5) 0%, transparent 30%); }
.phero-copy { position: relative; z-index: 2; padding: calc(var(--bar-h) + clamp(3rem, 12svh, 8rem)) 0 clamp(4rem, 14svh, 8rem); min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; }
.phero-copy .h1 { max-width: 15ch; }
.phero-copy .lead { margin-top: 1.2rem; }
.phero-kicker { font-size: var(--step--1); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronce-luz); margin-bottom: 1rem; }
.phero-arch { width: min(28rem, 70%); height: 3.4rem; margin-top: 2.4rem; }
.phero-plain { background: var(--noche); }
.phero-plain .phero-copy { min-height: 0; padding-bottom: clamp(3rem, 9svh, 6rem); padding-top: calc(var(--bar-h) + clamp(3rem, 10svh, 7rem)); }
.phero-plain .h1 { max-width: 20ch; }
@media (max-width: 899px) {
  .phero-shade { background: linear-gradient(180deg, rgb(11 24 38 / 0.6) 0%, rgb(11 24 38 / 0.25) 40%, rgb(11 24 38 / 0.9) 100%); }
  .phero-copy { min-height: 82svh; }
}
.phero-ep .phero-cam img { object-position: 30% 50%; }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; font-size: 0.8rem; letter-spacing: 0.01em; color: var(--plata); margin-bottom: 2rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.6rem; opacity: 0.6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.band-stone .crumbs ol, .pd .crumbs ol { color: color-mix(in srgb, var(--noche) 65%, var(--caliza)); }

/* ———————————————— Generic two columns */
.two-col { display: grid; gap: 1.5rem var(--space-m); }
@media (min-width: 900px) { .two-col { grid-template-columns: 5fr 7fr; align-items: start; } .two-col-pic { grid-template-columns: 5fr 6fr; align-items: center; } }
.two-col-pic .win { aspect-ratio: 4 / 5; }

/* ———————————————— About */
.syll-long { margin-top: 1rem; }
.pillar-row { list-style: none; padding: 0; display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: var(--space-m); }
.pil { position: relative; padding-top: 4.5rem; }
.pil-arch { position: absolute; top: 0; left: 0; width: 7rem; height: 3.4rem; }
.pil-arch svg { width: 100%; height: 100%; }
.pil-n { position: absolute; top: 1.15rem; left: 0; width: 7rem; text-align: center; font-family: var(--font-display); font-size: var(--step-1); color: var(--bronce-tinta); }
.pil .h4 { margin-top: 0; }
.mvp { display: grid; gap: 2.5rem; }
.mvp article { border-top: var(--hair) solid var(--caliza-deep); padding-top: 1.2rem; }
.mvp .label { margin-top: 0; }
.quote-m { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.3; max-width: 30ch; }
@media (min-width: 900px) { .mvp { grid-template-columns: 1fr 1fr; } .mvp-purpose { grid-column: 1 / -1; } }
.values { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: val; }
.values li { counter-increment: val; display: grid; gap: 0.4rem 2rem; padding: 1.6rem 0; border-top: var(--hair) solid var(--noche-line); }
.values .h4 { margin: 0; }
.values .h4::before { content: counter(val, upper-roman) "\2002"; font-size: 0.55em; letter-spacing: 0.12em; color: var(--bronce-luz); vertical-align: 0.25em; }
.values p { color: color-mix(in srgb, var(--caliza) 84%, var(--noche)); }
@media (min-width: 900px) { .values { grid-template-columns: 1fr 1fr; column-gap: 4rem; } .values li { grid-template-columns: 1fr; } }
.principles { padding: 0; list-style: none; counter-reset: pr; display: grid; }
.principles li { counter-increment: pr; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; padding: 0.9rem 0 0.9rem 3rem; border-bottom: var(--hair) solid var(--caliza-deep); position: relative; }
.principles li::before { content: counter(pr, decimal-leading-zero); position: absolute; left: 0; top: 1.35rem; font: 500 0.75rem/1 var(--font-text); letter-spacing: 0.12em; color: var(--bronce-tinta); }
.conduct { padding-left: 1.2rem; display: grid; gap: 0.8rem; }
.conduct li::marker { color: var(--bronce-tinta); }
.manifesto p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; max-width: none; }
.manifesto p + p { margin-top: 0.6em; }
.manifesto .m-close { font-style: italic; color: var(--bronce-luz); margin-top: 1.4em; }

/* ———————————————— Brand directory */
.maker-row { display: grid; gap: var(--space-m); }
.maker-head .label { margin-top: 0; }
.maker-head .h2 a { text-decoration: none; }
.dir-brands { list-style: none; padding: 0; display: grid; gap: 3rem; }
.dir-brand a { display: grid; gap: 0.45rem; text-decoration: none; position: relative; }
.dir-brand .win { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
.dir-brand .win img { transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .dir-brand a:hover .win img { transform: scale(1.03); } }
.dir-tin { position: absolute; right: 1rem; top: calc(min(100vw, 40rem) * 0.75 - 7rem); width: 5rem; filter: drop-shadow(0 12px 14px rgb(0 0 0 / 0.3)); }
.dir-name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; }
.dir-line { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--bronce-tinta); }
.band-night .dir-line { color: var(--bronce-luz); }
.dir-sum { max-width: 34rem; }
.dir-n { font-size: var(--step--1); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; margin-top: 0.4rem; }
.dir-el-pecado-de-lola .dir-line { color: var(--lola-rojo); }
.band-night .dir-el-pecado-de-lola .dir-line { color: #e4888c; }
@media (min-width: 900px) {
  .maker-row { grid-template-columns: 4fr 8fr; align-items: start; }
  .maker-head { position: sticky; top: calc(var(--bar-h) + 2rem); }
  .dir-brands { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .dir-tin { top: auto; bottom: calc(100% - (100% * 0) ); }
}
.dir-brand a { --tin-top: 0; }
@media (min-width: 900px) { .dir-tin { top: clamp(9rem, 17vw, 16rem); } }
.producers-s { padding-block: var(--space-m) !important; }

/* ———————————————— El Pastor page */
.ep-line { overflow: clip; min-height: 70svh; display: grid; align-items: center; }
.ep-branch { position: absolute; inset: 0 0 0 auto; width: min(100%, 60rem); opacity: 0.85; }
.ep-branch picture, .ep-branch img { width: 100%; height: 100%; }
.ep-branch img { object-fit: cover; object-position: 70% 30%; mask-image: linear-gradient(90deg, transparent 0%, #000 40%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
.ep-line-in { position: relative; z-index: 1; }
.ep-line-in .h2 { max-width: 14ch; }
@media (max-width: 899px) { .ep-branch { opacity: 0.4; } }
.fam { padding-block: 2.6rem; border-top: var(--hair) solid var(--noche-line); display: grid; gap: 1.6rem; }
.fam-head { display: flex; gap: 1.5rem; align-items: center; }
.round { margin: 0; border-radius: 50%; overflow: hidden; aspect-ratio: 1; flex: 0 0 auto; width: clamp(6rem, 14vw, 9.5rem); outline: var(--hair) solid var(--bronce); outline-offset: 5px; }
.round picture, .round img { width: 100%; height: 100%; }
.round img { object-fit: cover; transform: scale(1.3); }
.fam-head .h3 { margin-bottom: 0.2rem; }
.fam-head p { color: color-mix(in srgb, var(--caliza) 84%, var(--noche)); }
.fam-list { list-style: none; padding: 0; display: grid; gap: 0; }
.fam-list a { display: grid; gap: 0.2rem; padding: 1rem 0; border-bottom: var(--hair) solid var(--noche-line); text-decoration: none; }
.fl-name { font-family: var(--font-display); font-size: var(--step-1); }
.fl-desc { color: color-mix(in srgb, var(--caliza) 84%, var(--noche)); font-size: var(--step--1); }
.fl-meta { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--bronce-luz); }
@media (hover: hover) and (pointer: fine) { .fam-list a:hover .fl-name { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } }
@media (min-width: 900px) { .fam { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; } .fam-list a { grid-template-columns: 1fr auto; column-gap: 2rem; } .fl-desc { grid-column: 1; } .fl-meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; } }
.ep-tins { display: flex; align-items: flex-end; justify-content: center; gap: 1.6rem; }
.ep-tins picture:first-child { width: 36%; } .ep-tins picture:last-child { width: 48%; }
.ep-tins img { filter: drop-shadow(0 22px 22px rgb(16 33 49 / 0.25)); }
.serve { list-style: none; padding: 0; display: grid; gap: 0; }
.serve li { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; padding: 1rem 0; border-bottom: var(--hair) solid var(--noche-line); }
.made { margin-top: 3rem; font-size: var(--step--1); color: var(--plata); }

/* ———————————————— Lola page: the brand's own world inside Hesstora's frame */
.is-lola main { background: var(--lola-crema); color: #1a1a1a; }
.lola-hero { background: var(--lola-crema); color: #111; overflow: clip; }
.lola-hero-in { display: grid; gap: 2rem; padding-top: calc(var(--bar-h) + 2rem); min-height: 100svh; align-items: center; }
.lola-hero .crumbs ol { color: #555; }
.lola-kicker { font-size: var(--step--1); letter-spacing: 0.22em; text-transform: uppercase; color: var(--lola-rojo); font-weight: 500; }
.lola-title { margin: 0.8rem 0 0; font-family: var(--font-text); font-weight: 800; letter-spacing: -0.02em; line-height: 0.86; text-transform: uppercase; }
.lola-pre { display: block; font-weight: 500; letter-spacing: 0.24em; font-size: var(--step-1); }
.lola-name { display: block; font-size: clamp(5.5rem, 3rem + 13vw, 13rem); letter-spacing: -0.04em; }
.lola-product { margin-top: 1.2rem; font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.lola-tag { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); }
.lola-hero-media { position: relative; justify-self: center; }
.lola-clip-xl { position: relative; inset: auto; left: auto; bottom: auto; width: min(64vw, 23rem); box-shadow: none; background: var(--lola-crema); display: block; }
@media (min-width: 900px) { .lola-hero-in { grid-template-columns: 7fr 5fr; } .lola-hero-media { justify-self: end; align-self: start; margin-top: -2rem; } .lola-clip-xl { width: min(30vw, 26rem); } }
.lola-story { padding-block: var(--space-l); background: var(--lola-crema); color: #1a1a1a; }
.lola-grid { display: grid; gap: 2rem; align-items: start; }
.lola-grid + .lola-grid { margin-top: var(--space-m); }
.lola-pic { margin: 0; }
.lola-pic picture { display: block; overflow: hidden; border-radius: 2px; }
.lola-pic img { width: 100%; height: auto; border-radius: 2px; }
.lola-pic figcaption { margin-top: 0.6rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lola-rojo); }
.lola-txt p { max-width: 36rem; }
.lola-big { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; }
.lola-quote { margin: 1.6rem 0; }
.lola-quote p { font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: 1.1; color: var(--lola-rojo); }
.lola-ing { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 2rem; margin-block: var(--space-m) !important; }
.lola-ing li { border-top: 2px solid var(--lola-rojo); padding-top: 0.8rem; }
.ing-a { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.ing-b { font-size: var(--step--1); letter-spacing: 0.02em; }
.lola-end { margin-top: var(--space-m) !important; text-align: center; font-family: var(--font-text); font-weight: 800; text-transform: uppercase; font-size: var(--step-3); letter-spacing: -0.01em; max-width: none; }
.lola-end em { display: block; font-family: var(--font-display); font-weight: 400; text-transform: none; font-size: var(--step-2); letter-spacing: 0; }
.lola-story .note { text-align: center; max-width: none; color: #555; }
@media (min-width: 900px) {
  .lola-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem 1.5rem; }
  .lp-1 { grid-column: 1 / 6; } .lt-1 { grid-column: 7 / 12; align-self: center; }
  .lp-2 { grid-column: 8 / 12; margin-top: -4rem; } .lt-2 { grid-column: 2 / 7; grid-row: 2; align-self: center; }
  .lp-3 { grid-column: 1 / 5; } .lp-4 { grid-column: 6 / 10; margin-top: 5rem; }
  .lp-5 { grid-column: 1 / 5; } .lt-3 { grid-column: 6 / 12; } .lp-6 { grid-column: 3 / 11; }
}
.lola-facts { background: #fff; color: #111; padding-block: var(--space-l); }
.lola-facts-in { display: grid; gap: var(--space-m); align-items: center; }
.lola-tin { justify-self: center; width: min(50vw, 14rem); }
.lola-tin img { filter: drop-shadow(0 24px 22px rgb(0 0 0 / 0.18)); }
.lola-labelart { margin: 2rem 0 0; width: min(100%, 22rem); }
@media (min-width: 900px) { .lola-facts-in { grid-template-columns: 4fr 8fr; } }
.is-lola .cta-band { background: #111; }
.is-lola .cta-band .btn-solid { background: var(--lola-rojo); color: #fff; }

/* ———————————————— Spec lists */
.spec { display: grid; gap: 0; margin: 1.6rem 0 0; }
.spec div { display: grid; grid-template-columns: minmax(8rem, 2fr) 5fr; gap: 1rem; padding: 0.8rem 0; border-bottom: var(--hair) solid var(--caliza-deep); }
.band-night .spec div { border-color: var(--noche-line); }
.spec dt { font-size: var(--step--1); color: color-mix(in srgb, currentColor 66%, transparent); }
.spec dd { margin: 0; font-weight: 500; }
.lola-facts .spec div { border-color: #e6e0d6; }
.pending { font-weight: 400; font-style: italic; color: #87432f; }

/* ———————————————— Catalogue */
.cat-in { display: grid; gap: 2.5rem; }
.filters { display: grid; gap: 1.4rem; align-content: start; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters legend { width: 100%; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronce-tinta); margin-bottom: 0.6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.45rem 1rem; border: var(--hair) solid color-mix(in srgb, var(--noche) 28%, transparent); border-radius: 999px; font-size: var(--step--1); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.chip input:checked + span { background: var(--noche); color: var(--caliza); border-color: var(--noche); }
.chip input:focus-visible + span { outline: 2px solid var(--noche); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip:hover span { border-color: var(--noche); } }
.filters-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: var(--hair) solid var(--caliza-deep); padding-top: 1rem; max-width: none; }
.count { font-size: var(--step--1); font-weight: 500; }
.prods { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 3rem 1.8rem; }
.prod a { display: grid; gap: 0.35rem; text-decoration: none; }
.prod-pic { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin-bottom: 1rem; background: var(--noche); outline: var(--hair) solid var(--bronce); outline-offset: 5px; transition: outline-offset 0.5s var(--ease-out); }
.prod-pic picture, .prod-pic img { width: 100%; height: 100%; }
.prod-pic img { object-fit: cover; transform: scale(1.32); transition: transform 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .prod a:hover .prod-pic { outline-offset: 9px; } .prod a:hover .prod-pic img { transform: scale(1.4); } .prod a:hover .prod-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } }
.prod-brand { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronce-tinta); }
.band-night .prod-brand { color: var(--bronce-luz); }
.prod-name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; }
.prod-desc { font-size: var(--step--1); color: color-mix(in srgb, currentColor 78%, transparent); }
.prod-meta { font-size: 0.8rem; letter-spacing: 0.01em; color: color-mix(in srgb, currentColor 62%, transparent); }
.prod[hidden] { display: none; }
.cat-none { padding: 2rem 0; }
@media (min-width: 1000px) { .cat-in { grid-template-columns: 17rem 1fr; gap: 4rem; } .filters { position: sticky; top: calc(var(--bar-h) + 1.5rem); } }
.prods-row { margin-top: 2rem; }

/* ———————————————— Product page */
.pd { padding: calc(var(--bar-h) + 2.5rem) 0 var(--space-l); }
.pd-grid { display: grid; gap: var(--space-m); align-items: center; }
.pd-media { position: relative; width: min(84vw, 32rem, 100%); aspect-ratio: 1; justify-self: center; }
.round-xl { position: absolute; inset: 8%; width: auto; outline-offset: 7px; }
.pd-media .ring { inset: 0; }
.pd-brand { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronce-tinta); margin-bottom: 1rem; }
.pd-brand a { text-decoration: none; }
.pd-name { font-size: var(--step-4); max-width: 18ch; }
.pd-copy .lead { margin-top: 1rem; }
.pd-price { margin-top: 1.6rem; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronce-tinta); }
@media (min-width: 900px) { .pd-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.facts-v td:first-child { font-weight: 400; }

/* ———————————————— CTA band */
.cta-band { text-align: center; }
.cta-in .h2 { margin-inline: auto; max-width: 20ch; }
.cta-in .lead { margin: 0 auto 1.8rem; }

/* ———————————————— Contact */
.contact-in { display: grid; gap: var(--space-m); }
.cf { display: grid; gap: 1.3rem; }
.cf-row { display: grid; gap: 1.3rem; }
@media (min-width: 700px) { .cf-row { grid-template-columns: 1fr 1fr; } }
.cf-field { display: grid; gap: 0.4rem; align-content: start; }
.cf-field > label { font-size: var(--step--1); font-weight: 500; }
.opt { font-weight: 400; color: color-mix(in srgb, var(--noche) 76%, var(--caliza)); }
.cf-hint { font-size: 0.8rem; color: color-mix(in srgb, var(--noche) 78%, var(--caliza)); margin: -0.1rem 0 0.1rem; }
.cf input[type="text"], .cf input[type="email"], .cf input[type="tel"], .cf select, .cf textarea { width: 100%; min-height: 3.1rem; padding: 0.75rem 0.95rem; border: var(--hair) solid color-mix(in srgb, var(--noche) 30%, transparent); border-radius: 3px; background: #fbf9f5; color: var(--noche); font-size: 1rem; transition: border-color 0.25s, box-shadow 0.25s; }
.cf textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.cf select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23102131' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--noche); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronce) 35%, transparent); }
.cf [aria-invalid="true"] { border-color: var(--terracota); box-shadow: 0 0 0 1px var(--terracota); }
.cf-err { font-size: 0.8rem; color: #8c3a24; min-height: 0; }
.cf-err:empty { display: none; }
.check { display: flex; gap: 0.8rem; align-items: flex-start; font-size: var(--step--1); line-height: 1.5; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--noche); flex: 0 0 auto; }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.cf-send[disabled] { opacity: 0.6; cursor: progress; }
.cf-info { font-size: 0.8rem; color: color-mix(in srgb, var(--noche) 78%, var(--caliza)); }
.cf-status { font-weight: 500; }
.cf-status:empty { display: none; }
.cf[data-state="sent"] .cf-status { color: #2f5131; padding: 1rem 1.2rem; background: #e6ebdc; border-radius: 3px; }
.cf[data-state="failed"] .cf-status { color: #7a2f1d; padding: 1rem 1.2rem; background: #f3e1da; border-radius: 3px; }
.contact-aside { display: grid; gap: 1.2rem; align-content: start; }
.contact-aside .h4 { margin-top: 0; }
.after { padding-left: 1.2rem; display: grid; gap: 0.7rem; }
.after li::marker { color: var(--bronce-tinta); font-family: var(--font-display); }
.direct { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.direct span { display: block; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronce-tinta); }
.contact-seal { width: 5rem; color: var(--noche); opacity: 0.9; margin-top: 1rem; }
@media (min-width: 1000px) { .contact-in { grid-template-columns: 7fr 4fr; gap: 6rem; } .contact-aside { position: sticky; top: calc(var(--bar-h) + 2rem); } }

/* ———————————————— Legal */
.is-legal .phero-plain .lead { max-width: 46rem; }
.legal h2 { margin-top: 2.2em; }
.spec-legal { margin-bottom: 1rem; }

/* ———————————————— Footer */
.foot { background: var(--noche-deep); color: var(--caliza); padding: var(--space-l) 0 calc(2rem + env(safe-area-inset-bottom)); }
.foot-in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; display: grid; gap: 3rem; }
.foot-logo { display: inline-block; color: var(--caliza); }
.foot-logo .logo { width: 11rem; height: auto; }
.foot-line { margin-top: 1.4rem; color: var(--plata); font-size: var(--step--1); max-width: 24rem; }
.foot-phrase { margin-top: 1rem; font-family: var(--font-display); font-style: italic; font-size: var(--step-1); max-width: 22rem; }
.foot-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; }
.foot-nav ul { list-style: none; padding: 0; display: grid; gap: 0.2rem; align-content: start; }
.foot-nav a { display: inline-block; padding: 0.45rem 0; text-decoration: none; font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover { text-decoration: underline; } }
.foot-base { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 3.5rem auto 0; padding-top: 1.4rem; border-top: var(--hair) solid var(--noche-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; font-size: 0.78rem; color: var(--plata); }
.foot-base p { max-width: none; margin: 0; }
@media (min-width: 900px) { .foot-in { grid-template-columns: 5fr 7fr; } }

/* ———————————————— Motion at rest: reduced motion shows every composed frame; nothing is hidden at rest. */
@media (prefers-reduced-motion: reduce) {
  .hero-cam, .phero-cam { inset: 0; }
  .lola-clip video { display: none; }
}

/* ———————————————— Section life pieces */
.glide-wrap { position: relative; padding-left: 1.4rem; }
.glide { position: absolute; left: 0; top: 0; width: 1px; height: 3.2rem; background: var(--bronce); }
/* The marker carries a soft wash across the line it passes, so the eye reads the principle it has reached. */
.glide::before { content: ""; position: absolute; left: 0; top: 0; width: min(38rem, 82vw); height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--bronce) 16%, transparent), transparent 85%); pointer-events: none; }
.glide::after { content: ""; position: absolute; left: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--bronce); }
.ing-rule { display: block; height: 2px; margin: -0.8rem 0 calc(0.8rem - 2px); background: var(--noche); }
.lead-row { margin-bottom: 1.6rem; }
.lead-rule { width: min(22rem, 70%); height: 3px; margin: 0; background: var(--lola-rojo); }
.lola-ing li { position: relative; }
.mvp-arch, .mf-arch, .cta-arch, .as-arch { width: min(18rem, 60%); height: 2.6rem; margin-bottom: 1.4rem; }
.cta-arch { margin-inline: auto; }
.win-arc { position: relative; }
.win-arch { position: absolute; left: -6%; right: -6%; top: -1.4rem; width: 112%; height: 30%; z-index: 1; pointer-events: none; }
.ep-tins { position: relative; }
.ring-behind { position: absolute; inset: auto; left: 50%; top: 50%; width: 92%; height: auto; aspect-ratio: 1; translate: -50% -50%; z-index: 0; }
.ep-tins picture { position: relative; z-index: 1; }
.sec-arch { width: min(16rem, 50%); height: 2.4rem; margin-bottom: 1.2rem; }

/* ———————————————— Language switch: ES · EN, each in its own script, to the same page in the other language */
.langs { display: flex; align-items: center; gap: 0.15rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; }
.langs a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2.2rem; padding: 0 0.35rem; text-decoration: none; opacity: 0.62; border-radius: 2px; }
.langs a + a::before { content: "·"; position: relative; left: -0.55rem; opacity: 0.6; }
.langs a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .langs a:hover { opacity: 1; } }
.bar-langs { display: none; }
@media (min-width: 960px) { .bar-langs { display: flex; margin-left: 0.4rem; } }
.menu-langs { font-size: 0.95rem; }
.menu-langs a { min-width: 2.8rem; min-height: 2.8rem; }
.foot-langs { color: var(--plata); }
/* The language's name for screen readers wraps inside the link's own box, so it never reaches past the screen's edge. */
.langs .visually-hidden { left: 0; top: 0; white-space: normal; }
.pd-more h2.h3:not(:first-child) { margin-top: 2.4rem; }
.langs a { opacity: 0.78; }
/* The cookie bar (consent.js, only when company.json names a Google Analytics ID): fixed at the foot, so it never
   moves the page; "Reject" and "Accept" the same size and weight, side by side (AEPD guide). */
.consent { position: fixed; z-index: 60; left: var(--gutter); right: var(--gutter); bottom: max(1rem, env(safe-area-inset-bottom)); margin-inline: auto; max-width: 46rem; display: grid; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; background: var(--caliza); color: var(--noche); border: var(--hair) solid var(--caliza-deep); border-radius: 4px; box-shadow: 0 18px 48px -24px rgb(16 33 49 / 0.45); font-size: var(--step--1); line-height: 1.5; }
.consent[hidden] { display: none; }
.consent p { max-width: none; margin: 0; }
.consent a { text-underline-offset: 0.2em; }
.consent-act { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.consent-act .btn { min-height: 2.75rem; justify-content: center; }
@media (min-width: 700px) { .consent { grid-template-columns: 1fr auto; } .consent-act { grid-template-columns: auto auto; } }
.foot-consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .foot-consent:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.cookie-scroll { overflow-x: auto; }
.cookie-table code { font-size: 0.85em; }
/* The two tins (tinsDraw): photographs at one height, a bronze dimension line under each, the height beside them. */
.tins-fig { --tf-h: clamp(11rem, 6rem + 15vw, 21rem); position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(1.4rem, 4vw, 3rem); margin: 0 auto; width: fit-content; max-width: 100%; }
.tf-tin { display: grid; justify-items: center; }
.tf-tin picture, .tf-tin img { display: block; height: var(--tf-h); width: auto; }
/* widths true to 16 : 22 (the photographs' own proportions differ by the lid's perspective) */
.tf-5 img { height: calc(var(--tf-h) * 0.873); }
.tf-dim { position: relative; width: 100%; margin-top: 0.9rem; padding-top: 0.5rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.06em; }
.tf-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bronce); }
.tf-line-v { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.tf-dim::before, .tf-dim::after { content: ""; position: absolute; top: -6px; width: 1px; height: 11px; background: var(--bronce); }
.tf-dim::before { left: 0; } .tf-dim::after { right: 0; }
.tf-kg { margin-top: 0.3rem; font-family: var(--font-display); font-size: var(--step-2); }
.tf-h { position: absolute; right: 0; top: 0; height: var(--tf-h); width: 4.4rem; }
.tf-h::before, .tf-h::after { content: ""; position: absolute; left: -6px; width: 11px; height: 1px; background: var(--bronce); }
.tf-h::before { top: 0; } .tf-h::after { bottom: 0; }
.tf-h .tf-hl { position: absolute; left: 0.5rem; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: 0.8rem; letter-spacing: 0.06em; }
.foot-mail { margin-top: 0.8rem; font-size: var(--step--1); }
.foot-mail a { text-underline-offset: 0.2em; }
/* Centred blocks: every paragraph inside them is centred too. `p` carries a reading measure (max-width 42rem); in a
   centred block that box must sit in the middle, or a lone button inside it lands at the left (Fredd, 2 Nov 2026). */
:is(.cta-band, .hero-copy, .pillars-in, .lola-end, .dial-stage) p, .cta-in > * { margin-inline: auto; }

/* ————————————————————————————————————————————————————————————————————————————————————————————————————
   Direction B, "Piedra y hora": limestone under the midday sun as the ground, navy carved capitals, terracotta as
   the rare accent, one deep navy band. The core stylesheet's night bands turn to stone here by swapping the
   tokens inside them, so every inner page follows without a second layout.
   ———————————————————————————————————————————————————————————————————————————————————————————————————— */
html, body { background: var(--caliza); color: var(--noche); }
.band-night, .phero, .phero-plain, .pd-more, .pd-rel {
  --noche: #e9e2d5; --noche-deep: #e2dacb; --noche-line: #d3c9b7;
  --caliza: #102131; --plata: #4b5661; --bronce-luz: #7a5f3b; --bronce: #8d6f45;
  background: var(--noche); color: var(--caliza);
}
.band-deep { background: #102131; color: #f3efe7; --noche: #102131; --caliza: #f3efe7; }
.band-night .btn-solid, .phero .btn-solid { background: #102131; color: #f3efe7; }
.cta-band { background: #102131 !important; color: #f3efe7 !important; --noche: #102131; --caliza: #f3efe7; --plata: #b8bec4; --bronce-luz: #c4a477; --noche-line: #26394c; }
.cta-band .btn-solid { background: #f3efe7; color: #102131; }
.label, .pillars-list, .badge-line, .hero-desc { color: #87432f; }
.band-night .label, .band-night .badge-line { color: #87432f; }

/* Carved capitals: the inscription voice */
.carved, .h1 { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 400; line-height: 1.08; }
.h2.carved { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); }
.phero .h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.8rem); max-width: 16ch; }
.lola-hero .h1 { letter-spacing: normal; }

/* Header: stone bar, navy type */
.bar, .bar.bar-over { color: #102131; }
.bar:not(.bar-over), .bar.is-solid { background: color-mix(in srgb, #f3efe7 92%, transparent); border-bottom-color: #ddd4c4; }
.bar-logo, .bar-nav a { color: #102131; }
.menu { background: #f3efe7; color: #102131; --noche-line: #ddd4c4; --plata: #4b5661; --bronce-luz: #87432f; }
html.menu-open .bar { background: #f3efe7; }
.phero .bar, .phero-shade { }
.phero-shade { background: linear-gradient(90deg, rgb(243 239 231 / 0.92) 0%, rgb(243 239 231 / 0.7) 42%, rgb(243 239 231 / 0) 78%); }
@media (max-width: 899px) { .phero-shade { background: linear-gradient(180deg, rgb(243 239 231 / 0.7) 0%, rgb(243 239 231 / 0.35) 40%, rgb(243 239 231 / 0.94) 100%); } }
.phero .crumbs ol { color: #4b5661; }
.phero-kicker { color: #87432f; }
.phero-arch path, .arch-line path { stroke: var(--terracota); }

/* Hero: the stone column and the courtyard */
.hero-b { display: grid; min-height: 100svh; background: #f3efe7; color: #102131; align-items: stretch; grid-template-rows: auto 1fr; }
.hb-copy { position: relative; z-index: 2; padding: calc(var(--bar-h) + 1.6rem) var(--gutter) 1.4rem; display: flex; flex-direction: column; justify-content: center; }
.hb-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 1.2rem + 2.9vw, 3.9rem); line-height: 1.04; letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; }
.hb-desc { margin-top: 1.8rem; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #87432f; }
.hb-dist { margin-top: 0.6rem; font-size: var(--step-1); }
/* On a phone the photograph is a tall arched window under the copy, filling the rest of the first screen (MOTION.md). */
.hb-media { position: relative; min-height: 22rem; overflow: hidden; margin: 0 var(--gutter) var(--gutter); border-radius: 50vw 50vw 3px 3px / 34vw 34vw 3px 3px; }
.hb-media .hero-cam { position: absolute; inset: 0; container-type: size; }
/* The opening starts a step closer (scenes-b/hero.js settles it to the comp); set here so nothing jumps when it mounts. */
@media (prefers-reduced-motion: no-preference) { .hb-media .hero-cam { transform: scale(1.06); transform-origin: 60% 70%; } }
/* The set: the comp's square frame, laid out once and covering the media box centred, as the comp is cropped (what
   object-fit did for one picture, done for the plate and the tree's rig together so they never part). */
.hb-set { --s: max(100cqw, 100cqh); position: absolute; width: var(--s); height: var(--s); left: calc((100cqw - var(--s)) * 0.5); top: calc((100cqh - var(--s)) * 0.5); }
.hb-set picture, .hb-set img { display: block; width: 100%; height: 100%; }
.hb-plate { position: absolute; inset: 0; }
.hb-rig { position: absolute; inset: 0; }
.hb-part { position: absolute; inset: 0; transform-origin: 58.6% 40.7%; }
@media (min-width: 900px) {
  .hero-b { grid-template-columns: 38fr 62fr; grid-template-rows: 1fr; }
  .hb-copy { padding: calc(var(--bar-h) + 3rem) 3rem 3rem max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
  /* The picture starts under the solid stone bar, so the whole comp shows, none of it behind the bar. */
  .hb-media { min-height: calc(100svh - var(--bar-h)); margin: var(--bar-h) 0 0; border-radius: 0; }
}

/* The name: three syllables carved, a terracotta rule walking under them */
.syl3 { position: relative; display: grid; gap: 1.6rem; margin: 2.6rem 0 2rem; }
.syl3 dt { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4vw, 5.5rem); letter-spacing: 0.14em; line-height: 1; }
.syl3 dd { margin: 0.6rem 0 0; max-width: 22rem; }
.syl3 dd b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); }
.syl3-rule { display: none; }
.syl3 dt { position: relative; display: inline-block; padding-bottom: 0.18em; }
.syl-u { position: absolute; left: 0; right: 0.14em; bottom: 0; height: 2px; background: var(--terracota); }
@media (min-width: 640px) { .syl3 { grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 3rem); } }

/* Two doors */
.doors { display: grid; gap: 3rem; margin-top: var(--space-m); }
.door .win { aspect-ratio: 4 / 5; margin-bottom: 1.4rem; }
.door .h3 { margin-bottom: 0.5rem; }
@media (min-width: 900px) { .doors { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); } .door:last-child { margin-top: 6rem; } }

/* The sundial (signature) */
.sundial { padding-block: 0 !important; padding-inline: 0 !important; background: #ebe4d6; }
.dial-stage { position: relative; isolation: isolate; padding: var(--space-l) var(--gutter); text-align: center; display: grid; justify-items: center; gap: 1.4rem; }
/* The dial is carved into the portico's sunlit limestone wall (lab/directions/b/comps/04-sundial.png, its plate by Codex). */
.dial-wall { position: absolute; inset: 0; z-index: -1; }
.dial-wall picture, .dial-wall img { width: 100%; height: 100%; }
.dial-wall img { object-fit: cover; object-position: 50% 40%; }
.dial-face { width: min(100%, 64rem); }
.dial { width: 100%; height: auto; overflow: visible; }
.dial .hour { stroke: #6f5634; stroke-width: 1.1; opacity: 0.75; filter: drop-shadow(0 1px 0 rgb(255 251 240 / 0.7)); }
.dial .pin { fill: #102131; }
.dial .carve { font: 400 24px var(--font-display); letter-spacing: 0.1em; fill: #102131; transition: fill 0.4s; text-shadow: 0 1px 0 rgb(255 251 240 / 0.75), 0 -1px 0 rgb(60 40 20 / 0.18); }
.dial .carve.on { fill: #a45d44; }
/* The gnomon's soft shadow: a pre-blurred picture turned about the pin by the compositor (a live blur filter cost a
   GPU task of 130 to 260 ms per scroll frame). */
.dial-face { position: relative; }
.gnomon-shade { position: absolute; left: 50%; top: 91.49%; width: 12.4%; height: auto; translate: -50% -94.74%; transform-origin: 50% 94.74%; transform: rotate(-80deg); will-change: transform; pointer-events: none; }
.dial-text { list-style: none; padding: 0; display: grid; max-width: 40rem; }
.dial-text li { grid-area: 1 / 1; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.dial-text li.on { opacity: 1; }
.dial-text b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); text-transform: uppercase; letter-spacing: 0.12em; color: #87432f; margin-bottom: 0.4rem; }
/* On a phone the eight carved words would be 10 px and touch: the dial keeps its hour lines and its shadow, full width,
   and the value the shadow reaches is the large carved name beneath it. */
@media (min-width: 700px) and (max-width: 1199px) { .dial-face { width: 84%; } }
@media (max-width: 699px) { .dial { overflow: visible; } .dial-face { width: 116%; margin: 0.6rem -8%; } .dial-stage { overflow-x: clip; } .dial .carve { display: none; } .dial .hour { stroke-width: 1.6; } }
@media (prefers-reduced-motion: no-preference) and (min-height: 600px) {
  .dial-scroll { height: 320svh; }
  .dial-stage { position: sticky; top: 0; min-height: 100svh; align-content: center; padding-block: calc(var(--bar-h) + 1rem) 2rem; }
}
@media (prefers-reduced-motion: reduce) { .dial-text li { position: static; opacity: 1; grid-area: auto; margin-bottom: 1rem; } .dial-text { display: block; text-align: left; } }

/* Brands, maker, formats on stone */
.sb-brands { background: #f3efe7; }
.brand-ep .brand-line { color: #7a5f3b; }
.sb-formats .tins-draw { color: #102131; }
.maker.band-deep .seal { border-color: #26394c; }
.band-night .tins-draw, .band-stone .tins-draw { color: #102131; }

/* Closing: the courtyard and the stone panel */
.closing-b { padding: 0 !important; display: grid; }
.cb-pic { min-height: 60svh; position: relative; }
.cb-pic picture, .cb-pic img { width: 100%; height: 100%; }
.cb-pic img { object-fit: cover; position: absolute; inset: 0; }
.cb-panel { background: #f3efe7; padding: var(--space-m) var(--gutter); }
.cb-panel .lead { margin: 1rem 0 1.6rem; }
@media (min-width: 900px) {
  .closing-b { grid-template-columns: 1fr 1fr; min-height: 90svh; }
  .cb-pic { grid-column: 1 / -1; grid-row: 1; }
  .cb-panel { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 var(--space-m) max(var(--gutter), calc((100vw - var(--wrap)) / 2)); max-width: 36rem; position: relative; z-index: 1; }
}

/* Footer stays the one deep band at the end */
.foot { background: #102131; }
.is-lola .lola-hero { background: var(--lola-crema); }
.band-deep .label, .band-deep .seal-reg { color: #c4a477; }

/* ———————————————— B round-1 fixes (own look) */
/* The bar is always the stone bar: never transparent over a dark photograph */
.bar.bar-over { background: color-mix(in srgb, #f3efe7 92%, transparent); border-bottom: 1px solid #ddd4c4; }
/* Page titles in carved capitals never break inside a word */
.phero .h1, .h1 { font-size: clamp(2.1rem, 1.1rem + 3.3vw, 4.2rem); overflow-wrap: normal; word-break: normal; hyphens: none; max-width: 18ch; }
/* The branch photograph sits in its own arched window, beside the words, never under them */
.band-night .ep-branch { inset: 10% max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 10% auto; width: min(30%, 24rem); opacity: 1; container-type: inline-size; border-radius: 999px 999px 0 0; border-radius: 50cqw 50cqw 0 0; overflow: hidden; }
.band-night .ep-branch img { mask-image: none; -webkit-mask-image: none; object-position: 60% 40%; }
@media (min-width: 900px) { .ep-line .ep-line-in, .as-origin .two-col { padding-right: min(36%, 28rem); } .as-origin .two-col { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .band-night .ep-branch { display: none; } }
.ep-line { min-height: 0; }
.band-night .dir-el-pecado-de-lola .dir-line { color: var(--lola-rojo); }
/* A product's name sits in the narrower column beside its picture: one step smaller, so the longest single word
   (GAZPACHA, CHUPADEDOS) holds inside the column from 900 px up. */
.pd-name.h1 { font-size: clamp(2rem, 0.9rem + 2.6vw, 3.4rem); }
/* The olive tree's bend at phone and tablet sizes: the drawing is smaller, so its tips sway further to travel as far
   to the eye (bend.js --bend-sway, degrees at a tip). */
/* the breeze: a fraction of a degree at the crown's edge; a little more on a phone, where the tree is drawn smaller */
.hb-rig { --bend-sway: 2.1; }
@media (max-width: 899px) { .hb-rig { --bend-sway: 2.6; } }
/* B's hero copy is set flush left: its actions start on the same line as the headline (A's centred hero does not apply). */
.hero-b .hero-actions { justify-content: flex-start; }
/* Inner first screens (round-2 judge): the photograph is never a veil under the words. Laptop: the copy stands on clear
   limestone at the left and the picture fills the right; phone and tablet: the copy first, then the picture as a tall
   arched window, like the home page. Their life is the picture's breath (phero.js); the drawn arc stays on the plain
   first screens only. */
.phero:not(.phero-plain) .phero-arch { display: none; }
@media (max-width: 899px) {
  .phero:not(.phero-plain) { display: flex; flex-direction: column; }
  .phero:not(.phero-plain) .phero-media { position: relative; order: 2; inset: auto; aspect-ratio: 4 / 5; margin: 0 var(--gutter) var(--gutter); border-radius: 50vw 50vw 3px 3px / 34vw 34vw 3px 3px; }
  .phero:not(.phero-plain) .phero-shade { display: none; }
  .phero:not(.phero-plain) .phero-copy { min-height: 0; padding-bottom: 1.8rem; justify-content: flex-start; }
}
@media (min-width: 900px) {
  .phero:not(.phero-plain) .phero-media { left: 48%; top: var(--bar-h); }
  .phero:not(.phero-plain) .phero-shade { display: none; }
  .phero:not(.phero-plain) .phero-copy > * { max-width: min(36rem, 40vw); }
  .phero-ep .phero-cam img { object-position: 22% 50%; }
}
/* B's windows are arches, never rings (round-2 judge: the ring of dots is El Pastor's idiom, not this direction's). */
.ring, .ring-dots { display: none; }
.ring-win { inset: 0; border-radius: 50% 50% 3px 3px / 42% 42% 3px 3px; outline: 1px solid var(--terracota); outline-offset: 7px; }
.round { border-radius: 50% 50% 3px 3px / 42% 42% 3px 3px; outline-color: var(--terracota); }
/* Section 05 has one living thing, Lola's own clip, shown at a size that reads; the title's arc stays out. */
.sb-brands .sec-head .arch-line { display: none; }
@media (min-width: 900px) { .sb-brands .lola-clip { width: clamp(9rem, 14vw, 13rem); } }
.prod-pic { border-radius: 50% 50% 3px 3px / 42% 42% 3px 3px; aspect-ratio: 4 / 5; outline-color: var(--terracota); }
.prod-pic img { transform: scale(1.06); object-position: 62% 60%; }
@media (hover: hover) and (pointer: fine) { .prod a:hover .prod-pic img { transform: scale(1.12); } }
/* The sun's bar of light on an arched window (scenes-b/sunarc.js), on the window's inner hairline. */
.sun-arc { position: absolute; inset: 0.6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); overflow: visible; pointer-events: none; z-index: 2; }
.sun-arc path { fill: none; stroke: #f6dfb0; stroke-width: 3; stroke-linecap: round; }
/* Every B window is the same arch: a semicircle over straight sides (the brand mark's arch). */
.ring-win, .round, .prod-pic, .pd-media .round, .phero:not(.phero-plain) .phero-media { border-radius: 999px 999px 3px 3px !important; }
/* Brand manual (CONTENT.md): the full logo is never under 140 px wide on screen. */
.bar-logo { display: flex; align-items: center; }
.bar-logo .logo { display: block; height: auto; width: 140px; }
/* B's bar holds the full logo at its manual size. */
:root { --bar-h: 5.5rem; }
/* A product page on a phone: name, line and the ask in the first screen; the picture a little smaller. */
.pd-quick { display: none; margin-top: 1rem; }
@media (max-width: 899px) {
  .pd-quick { display: block; }
  .pd-grid { display: flex; flex-direction: column; gap: 0; text-align: left; }
  .pd-grid > *, .pd-copy > * { align-self: stretch; text-align: left; }
  .pd-copy > .pd-name { margin-top: 0.4rem; }
  .pd-media { order: 2; width: min(72vw, 22rem); }
  .pd-copy { display: contents; }
  .pd-copy > * { order: 1; }
  .pd-grid > .pd-media { margin-block: 1.8rem 0.6rem; align-self: center; }
  .pd-copy > .spec, .pd-copy > .pd-price, .pd-copy > .hero-actions { order: 3; }
}
/* The sundial's held stage fits one laptop screen: the dial gives way to the words on short screens. */
@media (min-width: 900px) { .dial-face { width: min(86%, 64rem, calc((100svh - 27rem) / 0.47)); } }
/* The thread (MOTION.md): a bronze line down the left margin with the scroll, the hour moving; bronze reads on the
   light stone and on the night bands alike (Fredd, 2 Nov 2026). */
.thread { right: auto; left: max(0.6rem, calc((100vw - var(--wrap)) / 2 - 2.6rem)); }
.thread-line { background: #a8875a; opacity: 0.85; }
/* its tip: the sun on the dial, a bronze point in a fine ring, the same bronze on the light stone and on the night bands */
.thread-star { left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #b08a55; outline: 1px solid #b08a55; outline-offset: 3px; box-shadow: none; }
@media (max-width: 899px) { .thread { right: auto; left: 0.45rem; } }
@media (max-width: 899px) { .phero.phero-short .phero-media { aspect-ratio: 16 / 10; } }
/* The tins drawing (El Pastor's, chosen by Fredd): black tins, gold lid, rim and emblem, bronze measuring lines. */
.tins-dark { width: 100%; max-width: 36rem; height: auto; overflow: visible; color: #102131; }
.tins-dark .body { fill: #0d0b08; stroke: none; }
.tins-dark .lid { fill: #1d1912; stroke: #b08a3e; stroke-width: 1.2; opacity: 1; }
.tins-dark .rim { fill: none; stroke: #b08a3e; stroke-width: 1.2; opacity: 1; }
.tins-dark .rib { fill: none; stroke: rgb(255 255 255 / 0.08); stroke-width: 1; opacity: 1; }
.tins-dark .emblem ellipse { fill: none; stroke: #b08a3e; stroke-width: 3; }
.tins-dark .emblem .leaf { fill: #b08a3e; }
.tins-dark .dim { stroke: #6c6150; stroke-width: 1; }
.tins-dark .dimt { font: 500 15px var(--font-text); fill: #6c6150; letter-spacing: 0.04em; opacity: 1; }
.tins-dark .kg { font: 400 30px var(--font-display); fill: #1b1711; }
/* The language switch: the dot between ES and EN is a quiet separator, never part of a link's underline. */
.langs-sep { opacity: 0.55; padding-inline: 0.1rem; }
/* B's brand cards show the brand's own photograph; the small tin cut-outs beside them are left out (Fredd, 2 Nov). */
.dir-tin, .tin-stand { display: none; }
/* El Pecado de Lola's clip (Fredd, 2 Nov 2026): its skirt is cut by the film's right and top edges, so the clip stands
   flush with the screen's right edge and, on a laptop, right under the bar: the cut edges are the page's own edges.
   The film's ground is the page's ground (#f5eee1 sits between what Chrome's AV1 and Safari's HEVC decode, 1 to 2
   levels each way), and its free edges fade into the page, so no decoder can draw a box round it. */
:root { --lola-crema: #f5eee1; }
.lola-clip-xl { background: transparent; }
.lola-clip-xl img, .lola-clip-xl video { display: block; }
@media (min-width: 900px) {
  .lola-hero { position: relative; }
  .lola-hero-in { grid-template-columns: minmax(0, 1fr); }
  .lola-hero-copy { max-width: min(46rem, 56vw); }
  .lola-hero-media { position: absolute; right: 0; top: var(--bar-h); margin: 0; }
  .lola-clip-xl { width: min(42vw, (100svh - var(--bar-h)) * 0.659); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%), linear-gradient(to top, transparent, #000 8%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 10%), linear-gradient(to top, transparent, #000 8%); mask-composite: intersect; }
}
@media (max-width: 899px) {
  /* On a phone the clip comes first, flush under the bar and the screen's right edge, as on a laptop; the title and
     its action follow in the same first screen. */
  .lola-hero-in { padding-top: var(--bar-h); min-height: 0; gap: 0.4rem; align-items: start; padding-bottom: 2.4rem; }
  .lola-hero-media { order: -1; justify-self: end; margin-right: calc(-1 * var(--gutter)); }
  .lola-clip-xl { width: min(56vw, 20rem); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to top, transparent, #000 10%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to top, transparent, #000 10%); mask-composite: intersect; }
  .lola-hero-copy { margin-top: -3.2rem; position: relative; z-index: 1; }
}
/* The page's closing call and the footer share the night: one space between them, not two, and a hairline where the
   footer begins (fresh eyes, 2 Nov: 300 px of empty navy between the button and the footer's logo). */
main:has(> .cta-band:last-child) + .foot { padding-top: 0; }
main:has(> .cta-band:last-child) + .foot .foot-in { padding-top: var(--space-m); border-top: var(--hair) solid var(--noche-line); }
main > .cta-band:last-child { padding-bottom: var(--space-m) !important; }
/* The footer's last row: the copyright, the languages and the credit on one centre line; the languages in the middle of
   the page, their last letter on the rule's right end on a phone. */
.foot-base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.foot-base .foot-langs { justify-self: center; }
.foot-base .foot-credit { justify-self: end; text-align: right; }
@media (max-width: 699px) {
  .foot-base { grid-template-columns: 1fr auto; }
  .foot-base .foot-langs { justify-self: end; margin-inline-end: -0.35rem; }
  .foot-base .foot-credit { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
/* About: the purpose closes the three statements, centred on the page, never a half row (fresh eyes: an empty right half
   beside it read as a missing block). */
.mvp-purpose { text-align: center; }
.mvp-purpose .mvp-arch { margin-inline: auto; display: block; }
.mvp-purpose .quote-m { margin-inline: auto; max-width: 46rem; }
/* The eight values: each text starts under its own name, whatever its neighbour's height, and the names start in one
   column whatever the width of their numeral. */
.values li { align-content: start; }
.values .h4::before { display: inline-block; min-width: 3.6em; }
/* A line set in a .wrap (the maker's line under El Pastor's serving notes) starts on the page's left edge like every
   block above it, not centred in a 42 rem box (fresh eyes: it started at x384, aligned with nothing). */
p.wrap { max-width: none; }
/* One hairline between two families on a phone, never two with a strip between them. */
.fam-list li:last-child a { border-bottom: 0; }
/* The consent box stands on the fields' left edge (the browser's default margin moved it 4 px in). */
.check input { margin-inline: 0; }
/* Legal pages: the text column starts on the same left edge as the page's title above it (fresh eyes: a column centred
   at x352 under a title at the margin shared no edge), and each line keeps a reading length. */
.legal > .wrap.narrow { max-width: var(--wrap); }
.legal > .wrap.narrow > * { max-width: 46rem; }
.spec div { align-items: baseline; }
/* The catalogue's filters stay beside the list while it scrolls: the column holds its own height (a grid item stretched
   to the list's height cannot stick). */
.filters { align-self: start; }
.filters-foot [hidden] { display: none; }
/* "From the same family": however many cards (one to five), they stand centred under a centred title, never two
   cards and an empty half row. */
.pd-rel h2 { text-align: center; }
.prods-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 22rem)); justify-content: center; }
/* "You are here" is one mark everywhere: the bronze line under the page's entry and under the page's language; on the
   contact page the bar's own call carries it, filled. */
.langs a[aria-current="true"] { text-decoration-color: var(--bronce-luz); text-decoration-thickness: 1px; }
.bar-cta[aria-current="page"] { background: #102131; border-color: #102131; color: #f3efe7; }
/* A product sold in one tin shows that tin alone, centred in its column. */
.formats-draw:has(.tins-one) { display: grid; justify-items: center; }
/* On a phone the thread keeps to the outer edge of the margin and its star is smaller, so it never reads as a bullet
   beside the text (fresh eyes, 2 Nov). */
@media (max-width: 599px) {
  .thread { left: 0.3rem; }
  .thread-star { left: -2px; top: -2px; width: 5px; height: 5px; outline-offset: 2px; }
}
/* The producers band's empty pillar: on a phone a small mark at the text's left edge, not a tall empty arch centred
   above left-aligned words. */
@media (max-width: 899px) { .producers .trace { justify-self: start; width: 4.2rem; } }
/* The maker's certifications: three entries under one hairline each, like the values, with no empty badge (fresh eyes:
   dashed rings with nothing in them read as placeholders for logos). Each entry's lines start at its top. */
.seals { gap: 1.6rem 2.4rem; }
.seal { border: 0; border-top: var(--hair) solid var(--noche-line); border-radius: 0; padding: 1rem 0 0; min-height: 0; align-content: start; }
.band-stone .seal { border-color: var(--caliza-deep); }
.seal-ring { display: none; }
/* The value's words on the carved stone: a soft halo of the stone's own light keeps every letter clear of the
   texture beneath it. */
.dial-text li { text-shadow: 0 0 10px rgb(240 231 214 / 0.95), 0 0 2px rgb(240 231 214 / 0.9); }
/* The family index's names and counts stand on the page's edges at rest (the hover still slides a row in). */
.fam-index a { padding-inline: 0; }
/* On a phone and a tablet the two tins come after their title and words, as everywhere else on the site: a band never
   opens on a drawing with its title one screen below it. */
@media (max-width: 899px) { .formats-in .formats-copy { order: -1; } }
/* Home: the two tins follow the catalogue on the same stone; one band's space between them, not two. */
.sb-formats { padding-top: var(--space-m) !important; }
/* Lola's "In the tin": on the same cream as the rest of her page, the tin photograph's white ground melts into it
   (multiply), so no white box and no grey frame stand round the tin; the flat label, which only repeated the tin, is
   left out in B. */
.lola-facts { background: var(--lola-crema, #f5eee1); }
.lola-facts .lola-tin img { mix-blend-mode: multiply; }

/* The whole tree under the crown's wedges hides the hairline seams between them until the WebGL tree draws (a pale
   line crossed the trunk for up to 1.5 s on a slow phone). */
.hb-whole { position: absolute; inset: 0; }
/* Once the WebGL tree draws, the whole tree stays under it below the fork only (the trunk never moves, so nothing
   doubles there) and fills the hairline the wedges leave across the trunk (seen full screen, 2 Nov). */
.hb-rig:has(> canvas[style*="visibility: visible"]) > .hb-whole { -webkit-mask-image: linear-gradient(to bottom, transparent 39%, #000 42%); mask-image: linear-gradient(to bottom, transparent 39%, #000 42%); }

/* Hero, Impeccable round (2 Nov, Fredd: the split hero was clearer; no picture under the bar, no text or cream fog on
   the photograph). The header is solid stone with one bronze hairline. The stone column holds every word; the
   courtyard stands in its own window, shaped as the doorway of Hesstora's H (its arch is the H's arch), with stone
   margins round it. The opening below grows that doorway into this window. */
.bar, .bar.bar-over, .bar:not(.bar-over), .bar.is-solid { background: #f3efe7; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgb(154 123 80 / 0.4); }
.hb-media { --door: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 204' preserveAspectRatio='none'><path d='M0 204V27.5Q134 -27.5 268 27.5V204Z'/></svg>");
  border-radius: 0; -webkit-mask: var(--door) 0 0 / 100% 100% no-repeat; mask: var(--door) 0 0 / 100% 100% no-repeat; }
@media (max-width: 899px) { .hb-media { min-height: 0; flex: 1; margin: 0.4rem var(--gutter) var(--gutter); } .hero-b { grid-template-rows: auto minmax(20rem, 1fr); } .hb-copy { padding-bottom: 0.6rem; } }
@media (min-width: 900px) { .hb-media { min-height: 0; margin: calc(var(--bar-h) + 1.4rem) max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 1.4rem 0; } }
.hb-h { letter-spacing: 0.08em; }
.hb-h .ht-line { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.04em; }
.hb-h .ht-line > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hb-h .ht-line > span { animation: ht-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
  .hb-h .ht-line + .ht-line > span { animation-delay: 0.2s; }
  .hb-copy > :not(.hb-h) { animation: ht-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hb-copy > :nth-child(2) { animation-delay: 0.35s; } .hb-copy > :nth-child(3) { animation-delay: 0.45s; } .hb-copy > :nth-child(4) { animation-delay: 0.55s; }
}
@keyframes ht-rise { from { transform: translateY(108%); } }
@keyframes ht-up { from { opacity: 0; transform: translateY(0.8rem); } }

/* The opening, on every load (Fredd, 2 Nov: never land on the hero). On one uniform stone,
   Hesstora's H builds itself (the pillars rise, the arch spreads, the crescent crosses, the name rises letter by
   letter); then its doorway opens and grows into the hero's window while the mark flies to its place in the header,
   and the words arrive. CSS from the first paint, so the photograph paints at once (LCP) and nothing waits for a
   script; the geometry (window, header logo) is measured by a few lines of inline script right after the hero. */
.intro { display: none; }
.has-intro .intro { --lw: min(60vw, 26rem); --lh: calc(var(--lw) * 650 / 1260); --lx: calc(50vw - var(--lw) / 2); --ly: calc(44svh - var(--lh) / 2);
  --k: calc(var(--lw) / 1260);
  --dx: calc(var(--lx) + 495 * var(--k)); --dy: calc(var(--ly) + 241 * var(--k)); --dw: calc(268 * var(--k)); --dh: calc(204 * var(--k));
  display: block; position: fixed; inset: 0; z-index: 200; animation: iv-gone 0.28s linear 2.05s both; }
@media (max-width: 899px) { .has-intro .intro { --ly: calc(62svh - var(--lh) / 2); } }
.iv-veil { position: absolute; inset: 0; background: #f3efe7;
  --door: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 204' preserveAspectRatio='none'><path d='M0 204V27.5Q134 -27.5 268 27.5V204Z'/></svg>");
  -webkit-mask: linear-gradient(#000 0 0), var(--door) no-repeat; mask: linear-gradient(#000 0 0), var(--door) no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude;
  -webkit-mask-size: 100% 100%, 0 0; mask-size: 100% 100%, 0 0;
  -webkit-mask-position: 0 0, var(--dx) var(--dy); mask-position: 0 0, var(--dx) var(--dy);
  animation: iv-open 0.85s cubic-bezier(0.7, 0, 0.2, 1) 1.2s forwards; }
/* closed (one uniform stone) while the mark builds, Fredd 2 Nov; at 1.2 s the doorway opens and grows into the window */
@keyframes iv-open { from { -webkit-mask-size: 100% 100%, var(--dw) var(--dh); mask-size: 100% 100%, var(--dw) var(--dh); -webkit-mask-position: 0 0, var(--dx) var(--dy); mask-position: 0 0, var(--dx) var(--dy); } to { -webkit-mask-size: 100% 100%, var(--wW, 62vw) var(--wH, 80svh); mask-size: 100% 100%, var(--wW, 62vw) var(--wH, 80svh);
  -webkit-mask-position: 0 0, var(--wX, 38vw) var(--wY, 12svh); mask-position: 0 0, var(--wX, 38vw) var(--wY, 12svh); } }
.iv-logo { position: absolute; left: var(--lx); top: var(--ly); width: var(--lw); color: #102131; transform-origin: 0 0;
  animation: iv-fly 0.85s cubic-bezier(0.7, 0, 0.2, 1) 1.2s both; }
.iv-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes iv-fly { to { transform: translate(var(--fx, 0px), var(--fy, -40svh)) scale(var(--fs, 0.3)); } }
.iv-stem { transform-box: fill-box; transform-origin: 50% 100%; animation: iv-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both; }
.iv-stem + .iv-stem { animation-delay: 0.16s; }
.iv-band { animation: iv-spread 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both; }
.iv-line { animation: iv-cross 0.5s cubic-bezier(0.45, 0, 0.2, 1) 0.58s both; }
.iv-l { transform-box: fill-box; animation: iv-letter 0.45s cubic-bezier(0.16, 1, 0.3, 1) calc(0.72s + var(--i) * 0.035s) both; }
@keyframes iv-rise { from { transform: scaleY(0); } }
@keyframes iv-spread { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes iv-cross { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes iv-letter { from { opacity: 0; transform: translateY(40%); } }
@keyframes iv-gone { to { opacity: 0; visibility: hidden; } }
.has-intro .intro.iv-skip { animation: iv-gone 0.25s linear both; }
/* under the opening, the words wait for the window to open */
.has-intro .hb-h .ht-line > span { animation-delay: 1.85s; } .has-intro .hb-h .ht-line + .ht-line > span { animation-delay: 1.95s; }
.has-intro .hb-copy > :nth-child(2) { animation-delay: 2.15s; } .has-intro .hb-copy > :nth-child(3) { animation-delay: 2.25s; } .has-intro .hb-copy > :nth-child(4) { animation-delay: 2.35s; }
/* skipped: the words come in at once */
.iv-skipped .hb-h .ht-line > span, .iv-skipped .hb-copy > * { animation-delay: 0s !important; }
/* A summer breeze (Fredd, 2 Nov): a few soft clouds drift from left to right across the sky the arch frames, behind the
   tree, slowly (two minutes to cross). The sky's own shape masks them (brand/sky-mask, made from the plate), so they
   never cross the stone. Their pictures are fetched once the hero's scene runs, after the page has loaded. */
.hb-sky { position: absolute; inset: 0; pointer-events: none; visibility: hidden;
  -webkit-mask: url("brand/sky-mask.webp") 0 0 / 100% 100% no-repeat; mask: url("brand/sky-mask.webp") 0 0 / 100% 100% no-repeat; }
.hb-sky.on { visibility: visible; }
.hb-clouds { position: absolute; left: 0; top: 2%; width: 200%; height: 21%; opacity: 0.92; }
.hb-sky.on .hb-clouds { background: url("brand/clouds.webp") 0 50% / 50% auto repeat-x; }
@media (prefers-reduced-motion: no-preference) { .hb-sky.on .hb-clouds { animation: clouds 130s linear infinite, dapple-in 2s ease-out both; } }
@keyframes clouds { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes dapple-in { from { opacity: 0; } }