/* =========================================================
   VALARTE — Instrumentos de escritura
   Single landing page
   ---------------------------------------------------------
   Palette from Spanish pigments: grana (cochineal carmine)
   and azafrán (saffron) on papel (bone paper), with tinta
   (warm ink black) for text.
   Type: Ibarra Real Nova only — revival of the face cut for
   Joaquín Ibarra's 1780 Don Quijote, printed in Madrid.
   Small labels are set in tracked capitals of the same face,
   the way old stationers and printers did it.
   ========================================================= */

:root {
  --papel:   #F4EEE4;   /* page background */
  --papel-2: #ECE3D4;   /* alternate sections */
  --lino:    #E3D8C5;   /* image placeholders */
  --tinta:   #1D1815;   /* text, footer */
  --tinta-2: #4B413B;   /* body copy */
  --gris:    #685C54;   /* small meta text (AA on all light backgrounds) */
  --grana:   #7A1C1F;   /* signature carmine */
  --azafran: #C99430;   /* saffron — rules and ornaments only */
  --azafran-texto: #9C6E1C; /* saffron dark enough for large text */
  --azafran-claro: #E4BC6A; /* saffron on dark backgrounds */
  --linea:   rgba(29, 24, 21, .14);

  --serif: "Ibarra Real Nova", "Iowan Old Style", Georgia, serif;
  --sans:  var(--serif); /* labels use the same face, in tracked caps */

  --ancho: 1360px;
  --margen: clamp(16px, 4vw, 56px);
  --bloque: clamp(80px, 11vw, 160px);
  --cabecera-alto: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: var(--cabecera-alto); }
html.menu-abierto, html.menu-abierto body { overflow: hidden; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
address { font-style: normal; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--grana); color: var(--papel); }

/* Faint paper grain over the whole page, so flat colour reads as paper, not screen */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16;
}
[hidden] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: 12px 16px;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.skip:focus { top: 16px; }
:focus-visible { outline: 1px solid var(--grana); outline-offset: 4px; }

/* ---------- Type ---------- */
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(48px, 6.4vw, 100px); line-height: 1; }
h2 { font-size: clamp(38px, 4.4vw, 66px); line-height: 1.05; }
h3 { font-size: 26px; line-height: 1.2; }
h1 em { font-style: italic; color: var(--grana); }
.parrafo { color: var(--tinta-2); text-wrap: pretty; }

/* Printer's ornament: hairline · diamond · hairline */
.ornamento {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px auto 0; color: var(--azafran);
}
.ornamento::before, .ornamento::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .7; }
.ornamento i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.ornamento--claro { color: var(--azafran-claro); max-width: calc(var(--ancho) - 2 * var(--margen)); margin-top: clamp(56px, 7vw, 96px); }
.ornamento--claro + .pie__base { margin-top: 32px; border-top: 0; padding-top: 0; }

/* Plate captions under editorial photographs, as in old catalogues */
.lamina { margin-top: 14px; font-style: italic; font-size: 15px; line-height: 1.4; color: var(--gris); text-wrap: balance; }
.lamina span {
  font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grana); margin-right: 10px;
}

/* ---------- Buttons ---------- */
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 32px;
  font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--tinta); border-radius: 0;
  cursor: pointer; white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn--lleno { background: var(--tinta); color: var(--papel); }
.btn:active { transform: translateY(1px); }
.btn--lleno:hover { background: var(--grana); border-color: var(--grana); }
.btn--linea { background: transparent; color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: var(--papel); }
.enlace {
  font: 500 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid currentColor;
  transition: color .25s ease;
}
.enlace:hover { color: var(--grana); }
.enlace, .pie__base a, .carta__legal a { position: relative; }
.enlace::before, .pie__base a::before { content: ""; position: absolute; inset: -12px -8px; }

/* ---------- Image placeholders ----------
   Save a file at the data-src path and main.js swaps it in.
   ------------------------------------------------------- */
.ph {
  position: relative;
  aspect-ratio: var(--ar, 3 / 4);
  background-color: var(--lino);
  background-image: repeating-linear-gradient(135deg, transparent 0 13px, rgba(29,24,21,.045) 13px 14px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(29, 24, 21, .16);
  pointer-events: none;
}
.ph__etiqueta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 34ch; padding: 32px; text-align: center;
}
.ph__id {
  font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--grana);
}
.ph__desc { font-style: italic; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.ph img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.js .ph img { opacity: 0; transition: opacity .6s ease; }
.js .ph img.cargada { opacity: 1; }

/* =========================================================
   HEADER
   ========================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 238, 228, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.cabecera.con-scroll { border-bottom-color: var(--linea); }
.cabecera.oculta { transform: translateY(-100%); }
.cabecera__in {
  max-width: var(--ancho); margin: 0 auto;
  height: var(--cabecera-alto);
  padding: 0 var(--margen);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.nav { display: flex; gap: 36px; font: 500 13.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.nav--der { justify-content: flex-end; }
.nav a { position: relative; padding: 8px 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--grana); transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.nav a:hover::after { transform: scaleX(1); }

.logo { display: flex; flex-direction: column; align-items: center; gap: 7px; line-height: 1; }
.logo__palabra {
  font: 400 30px/1 var(--serif);
  letter-spacing: .3em; margin-right: -.3em; /* keep tracked caps optically centred */
}
.logo__sub {
  display: flex; align-items: center; gap: 10px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .34em;
  text-transform: uppercase; color: var(--gris);
}
.logo__sub::before, .logo__sub::after {
  content: ""; width: 16px; height: 1px; background: currentColor; opacity: .55;
}
.logo__sub::after { margin-left: -.34em; } /* cancel trailing tracking so the rules sit symmetric */

.menu-btn {
  display: none; width: 44px; height: 44px; padding: 0 0 0 2px; margin-left: -2px;
  border: 0; background: none; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 7px;
}
.menu-btn span { display: block; width: 24px; height: 1px; background: var(--tinta); transition: transform .3s ease; }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Full-screen menu: sits under the header, covers the page */
.cajon {
  position: fixed; inset: var(--cabecera-alto) 0 0; z-index: 45;
  background: var(--papel);
  border-top: 1px solid var(--linea);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--margen) calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  animation: aparecer .35s cubic-bezier(.2,.7,.2,1);
}
.cajon[hidden] { display: none; }
.cajon__nav { display: flex; flex-direction: column; }
.cajon__nav a { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.cajon__contacto { display: flex; flex-direction: column; gap: 2px; font-size: 18px; color: var(--tinta-2); }
.cajon__contacto a { align-self: flex-start; padding: 8px 0; }
.cajon__titulo {
  font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--azafran-texto); margin-bottom: 8px;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(16px, 2.5vw, 36px) var(--margen) 0;
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 104px);
  align-items: center;
}
.hero h1 { max-width: 9ch; margin-bottom: 36px; animation: subir 1.1s .1s cubic-bezier(.2,.7,.2,1) both; }
.hero__lead { animation: subir 1.1s .3s cubic-bezier(.2,.7,.2,1) both; max-width: 34ch; color: var(--tinta-2); font-size: 21px; line-height: 1.5; margin-bottom: 44px; text-wrap: pretty; }
/* Keep a true 3:4 frame: on short screens the photo narrows instead of being cropped */
.hero__media { width: 100%; max-width: calc((100svh - var(--cabecera-alto) - 96px) * .75); justify-self: end; }
.hero__img { --ar: 3 / 4; width: 100%; }

/* =========================================================
   SECTIONS
   ========================================================= */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: var(--bloque) var(--margen); }
.titular { margin-bottom: clamp(48px, 6vw, 88px); }
.titular--centro { text-align: center; }
.titular--centro .parrafo { margin: 18px auto 0; max-width: 40ch; }

/* ---------- Collection ---------- */
.carrusel-progreso { display: none; }
.categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 36px); }
.categoria .ph { margin-bottom: 28px; }
.categoria__pie { display: grid; grid-template-columns: 44px 1fr; gap: 4px; }
.romano { font: italic 400 26px/1.15 var(--serif); color: var(--azafran-texto); }
.categoria h3 { font-size: 30px; margin-bottom: 8px; }
.categoria p { color: var(--tinta-2); font-size: 17px; max-width: 30ch; }

/* ---------- Quote band with azulejo border ---------- */
.manifiesto {
  --cenefa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23E4BC6A' stroke-width='1'%3E%3Cpath d='M24 4 29 19 44 24 29 29 24 44 19 29 4 24 19 19Z'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3Cpath d='M0 0h8L0 8Z M48 0h-8l8 8Z M0 48h8l-8-8Z M48 48h-8l8-8Z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  background: var(--grana); color: var(--papel);
  padding: calc(var(--bloque) + 40px) var(--margen);
  text-align: center;
}
.manifiesto::before, .manifiesto::after {
  content: ""; position: absolute; left: 0; right: 0; height: 48px;
  background-image: var(--cenefa); background-repeat: repeat-x; background-position: center;
  opacity: .4;
}
.manifiesto::before { top: 0; border-bottom: 1px solid rgba(228,188,106,.35); }
.manifiesto::after  { bottom: 0; border-top: 1px solid rgba(228,188,106,.35); }
.manifiesto__in { max-width: 960px; margin: 0 auto; }
.manifiesto__in p { font: italic 400 clamp(30px, 3.8vw, 54px)/1.22 var(--serif); text-wrap: balance; }
.manifiesto__in footer {
  margin-top: 36px;
  font: 500 12.5px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--azafran-claro);
}

/* ---------- La paleta de España ---------- */
.paleta { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.paleta__intro { position: sticky; top: calc(var(--cabecera-alto) + 32px); }
.paleta__intro h2 { margin-bottom: 24px; max-width: 9ch; }
.paleta__intro .parrafo { margin-bottom: 40px; max-width: 38ch; }
.paleta__intro .ph { --ar: 3 / 4; max-height: 56vh; }

.muestras { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 3.5vw, 56px); }
.muestra { padding: 32px 0 36px; border-top: 1px solid var(--linea); }
.muestra svg { width: 100%; max-width: 280px; height: auto; margin: 0 0 22px -8px; overflow: visible; }
.muestra svg use { fill: var(--c); filter: url(#grano); }
.muestra:nth-child(odd) svg { transform: rotate(-1.2deg); }
.muestra:nth-child(even) svg { transform: rotate(.9deg); }
.muestra__n { font: 500 12px/1 var(--sans); letter-spacing: .2em; color: var(--gris); }
.muestra h3 { font-size: 28px; margin: 10px 0 4px; }
.muestra p { font: 500 12.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }

/* ---------- Craft ---------- */
.oficio { background: var(--papel-2); display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.oficio__img { --ar: 3 / 4; max-height: min(100svh, 960px); width: 100%; }
.oficio__texto { padding: var(--bloque) clamp(24px, 7vw, 120px); max-width: 700px; }
.oficio__texto h2 { margin-bottom: 40px; }
.oficio__texto p { color: var(--tinta-2); text-wrap: pretty; max-width: 60ch; }
.oficio__texto p + p { margin-top: 1.1em; }
.capitular::first-letter {
  float: left;
  font-size: 5.1em; line-height: .78;
  padding: .06em .09em 0 0;
  color: var(--grana);
}

/* ---------- Gifting ---------- */
.regalo { position: relative; }
.regalo__img { --ar: 21 / 9; width: 100%; }
.regalo__img .ph__etiqueta { margin-right: 40%; }
.regalo__panel {
  position: absolute; right: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))); top: 0; bottom: 0;
  height: fit-content; margin: auto 0;
  width: min(460px, 38%);
  background: var(--papel);
  padding: clamp(32px, 4vw, 56px);
}
.regalo__panel h2 { font-size: clamp(32px, 3.2vw, 46px); margin-bottom: 20px; }
.regalo__panel p { color: var(--tinta-2); margin-bottom: 32px; text-wrap: pretty; }

/* ---------- Newsletter ---------- */
.carta { padding: var(--bloque) var(--margen); text-align: center; }
.carta__in { max-width: 760px; margin: 0 auto; }
.carta h2 { margin-bottom: 18px; }
.carta__in > p:first-of-type { color: var(--tinta-2); margin-bottom: 40px; }
.carta__form { display: flex; max-width: 540px; margin: 0 auto 18px; }
.carta__form input {
  flex: 1; min-width: 0; height: 54px; padding: 0 18px;
  background: transparent; border: 1px solid var(--tinta); border-right: 0; border-radius: 0;
  font-size: 17px;
  -webkit-appearance: none; appearance: none;
}
.carta__form input::placeholder { color: var(--gris); font-style: italic; opacity: 1; }
.carta__form input:focus { outline: none; background: #FBF8F2; }
.carta__ok { font-style: italic; color: var(--grana); margin-bottom: 18px; }
.carta__legal { font: italic 400 14px/1.5 var(--serif); color: var(--gris); }
.carta__legal a { border-bottom: 1px solid currentColor; }

/* =========================================================
   FOOTER / CONTACT
   ========================================================= */
.pie { background: var(--tinta); color: var(--papel); padding: clamp(72px, 9vw, 128px) var(--margen) calc(32px + env(safe-area-inset-bottom)); }
.pie__rejilla {
  max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 48px;
}
/* Footer: the lock-up sits left in its column, but BARCELONA stays centred under the wordmark */
.logo--claro { display: inline-flex; align-items: center; margin-bottom: 24px; }
.logo--claro .logo__sub { color: rgba(244,238,228,.6); }
.pie__marca p { color: rgba(244,238,228,.72); font-size: 17px; max-width: 26ch; }
.pie__col { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.pie__titulo {
  font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--azafran-claro); margin: 6px 0 12px;
}
.pie__col a, .pie__col span { color: rgba(244,238,228,.85); }
.pie__col a { align-self: flex-start; transition: color .25s ease; }
.pie__col a:hover { color: var(--azafran-claro); }
.pie__grande { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; padding: 6px 0; color: var(--papel) !important; }
.pie__grande:hover { color: var(--azafran-claro) !important; }
/* Ibarra's @ is cap-height and drops below the baseline; scale it to sit with the lowercase */
.arroba { font-size: .74em; position: relative; top: -.08em; margin: 0 .04em; }

.pie__base {
  max-width: calc(var(--ancho) - 2 * var(--margen));
  margin: clamp(64px, 8vw, 112px) auto 0; padding-top: 24px;
  border-top: 1px solid rgba(244,238,228,.16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  font: 400 14px/1.5 var(--serif); letter-spacing: .02em; color: rgba(244,238,228,.6);
}
.pie__base nav { display: flex; flex-wrap: wrap; gap: 24px; }
.pie__base a:hover { color: var(--papel); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet & small laptop */
@media (max-width: 1080px) {
  .nav { gap: 24px; font-size: 12.5px; letter-spacing: .14em; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .pie__marca { grid-column: 1 / -1; }
  .regalo__panel { width: min(440px, 46%); }
}

/* Below 1000px the five menu links crowd the logo: switch to the menu icon */
@media (max-width: 1000px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .cabecera__in { grid-template-columns: 44px 1fr 44px; gap: 8px; }
}

/* Tablet portrait & phones: hamburger, single column */
@media (max-width: 900px) {
  :root { --cabecera-alto: 68px; }
  body { font-size: 18px; }

  .nav { display: none; }
  .menu-btn { display: flex; }
  .cabecera__in { grid-template-columns: 44px 1fr 44px; gap: 8px; }
  .logo__palabra { font-size: 24px; }
  .logo__sub { font-size: 10px; letter-spacing: .3em; }

  /* Opening screen: full-width photo with the headline set on it */
  .hero { grid-template-columns: 1fr; padding: 0; gap: 0; align-items: stretch; }
  .hero__texto { display: contents; }
  .hero__media { grid-row: 1; grid-column: 1; max-width: none; }
  .hero__media .lamina { display: none; }
  .hero__img { --ar: 4 / 5; }
  .hero__img::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(24,19,16,0), rgba(24,19,16,.5) 55%, rgba(24,19,16,.74));
  }
  .hero h1 {
    grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2;
    max-width: 13ch; margin: 0; padding: 0 var(--margen) clamp(26px, 7vw, 48px);
    font-size: clamp(42px, 11.5vw, 72px); color: var(--papel);
    text-shadow: 0 1px 28px rgba(0,0,0,.22);
  }
  .hero h1 em { color: var(--azafran-claro); }
  .hero__lead { grid-row: 2; padding: 30px var(--margen) 0; margin-bottom: 28px; font-size: 19px; max-width: 40ch; }
  .botones { grid-row: 3; padding: 0 var(--margen); }

  .categorias { grid-template-columns: 1fr; row-gap: 64px; max-width: 560px; margin: 0 auto; }

  .paleta { grid-template-columns: 1fr; }
  .paleta__intro { position: static; }
  .paleta__intro .ph { max-height: none; }

  .oficio { grid-template-columns: 1fr; }
  .oficio__texto { padding: var(--bloque) var(--margen); max-width: none; }

  .regalo__img { --ar: 1 / 1; }
  .regalo__img img { object-position: 22% 50%; } /* the gift sits in the left half of the wide shot */
  .regalo__img .ph__etiqueta { margin: 0 0 22%; }
  .regalo__panel {
    position: relative; right: auto; top: auto; bottom: auto;
    width: auto; margin: -80px var(--margen) 0;
    box-shadow: 0 0 0 1px var(--linea);
  }
}

/* Tablet portrait: keep photos from becoming taller than the screen */
@media (min-width: 561px) and (max-width: 900px) {
  .hero__img { --ar: 5 / 4; }
  .categorias { grid-template-columns: repeat(3, 1fr); column-gap: 16px; max-width: none; }
  .categoria .ph { margin-bottom: 20px; }
  .categoria__pie { grid-template-columns: 1fr; }
  .romano { font-size: 20px; margin-bottom: 4px; }
  .categoria h3 { font-size: 22px; }
  .categoria p { font-size: 15.5px; }
  .ph__desc { font-size: 13.5px; }
  .categoria .ph__etiqueta { padding: 20px 16px; }
  .paleta__intro .ph { --ar: 16 / 10; }
  .oficio__img { --ar: 4 / 3; }
  .regalo__img { --ar: 16 / 10; }
}

/* Phones */
@media (max-width: 560px) {
  .botones .btn { flex: 1 1 100%; }
  .botones .enlace { margin: 4px auto 0; }
  .regalo__panel .btn { width: 100%; padding: 0 16px; letter-spacing: .16em; }

  /* Collection: swipe sideways, next card peeking in */
  .categorias {
    display: flex; gap: 14px; max-width: none;
    margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .categorias::-webkit-scrollbar { display: none; }
  .categoria { flex: 0 0 80%; scroll-snap-align: start; }
  .categoria .ph { margin-bottom: 18px; }
  .categoria__pie { grid-template-columns: 30px 1fr; }
  .romano { font-size: 21px; }
  .categoria h3 { font-size: 24px; margin-bottom: 4px; }
  .categoria p { font-size: 15.5px; }
  .carrusel-progreso { display: block; position: relative; overflow: hidden; height: 1px; max-width: 120px; margin: 30px auto 0; background: var(--linea); }
  .carrusel-progreso span { position: absolute; top: 0; left: 0; height: 1px; width: 33%; background: var(--tinta); }

  /* Palette: compact 2-column card */
  .muestras { column-gap: 18px; }
  .muestra { padding: 16px 0 18px; }
  .muestra svg { margin: 0 0 10px -4px; }
  .muestra__n { font-size: 11px; }
  .muestra h3 { font-size: 21px; margin: 4px 0 2px; }
  .muestra p { font-size: 11.5px; letter-spacing: .08em; }
  .ph__etiqueta { padding: 28px 22px; gap: 8px; }
  .ph__desc { font-size: 14px; }
  .capitular::first-letter { font-size: 4.4em; }
  .carta__form { flex-direction: column; gap: 10px; }
  .carta__form input { flex: none; width: 100%; border-right: 1px solid var(--tinta); }
  .pie__rejilla { grid-template-columns: 1fr; gap: 40px; }
  .pie__base { flex-direction: column; }
}