/* Bianca & Lucas. Hoja de estilo única.
   La marca ya existe en Instagram: celeste, garabatos, mascotas recortadas sobre color,
   naranja del gato del logo. Esta página estira ese sistema, no inventa otro.
   Todo lo blanco de las fotos de producto desaparece con mix-blend-mode: multiply,
   así los animales quedan sobre el celeste igual que en el feed. */

/* Tipografias del manual de marca de Bianca & Lucas:
   titulares en Futura Std, subtitulos en Vollkorn. Futura es de pago, asi que
   los titulares van en Jost, la geometrica libre disenada como sustituto de Futura.
   Vollkorn si es la del manual, tal cual. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('../fonts/jost-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url('../fonts/jost-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Vollkorn';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('../fonts/vollkorn-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('../fonts/vollkorn-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Vollkorn';
  font-style: italic;
  font-weight: 400 600;
  font-display: block;
  src: url('../fonts/vollkorn-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400 600;
  font-display: block;
  src: url('../fonts/vollkorn-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sky:       oklch(0.973 0.013 232);
  --sky-2:     oklch(0.872 0.045 232);
  --sky-3:     #93bad3;
  --paper:     oklch(0.995 0.003 230);
  --ink:       oklch(0.312 0.049 250);
  --ink-2:     oklch(0.468 0.036 248);
  --ink-3:     oklch(0.592 0.028 248);
  --tangerine: #e86a22;
  --tangerine-hi: #f07d3a;
  --indigo:    #3c509b;
  --indigo-hi: #4a61b8;
  --coral:     oklch(0.742 0.104 26);
  --navy:      oklch(0.322 0.058 249);
  --line:      oklch(0.312 0.049 250 / 0.14);
  --line-soft: oklch(0.312 0.049 250 / 0.075);

  --display: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --sans: 'Jost', system-ui, -apple-system, sans-serif;
  --hand: 'Vollkorn', Georgia, serif;

  --doodle-w: url('../assets/doodles-blanco.svg');
  --doodle-i: url('../assets/doodles-tinta.svg');

  --out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.42, 0.64, 1);

  --r-lg: 30px;
  --r-md: 18px;
  --r-sm: 11px;

  --gutter: clamp(20px, 5vw, 64px);
  --wide: 1180px;
}

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--sky);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.64;
  letter-spacing: -0.002em;
}

img { display: block; max-width: 100%; height: auto; }

/* ── tipografía ────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.0;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: clamp(41px, 6.3vw, 74px); }
h1 em { font-style: normal; color: var(--tangerine); }
h2 { font-size: clamp(30px, 4.1vw, 50px); }
h3 { font-size: clamp(19px, 1.9vw, 22px); font-weight: 700; letter-spacing: -0.02em; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tangerine); margin-bottom: 15px;
}
.lede {
  font-size: clamp(17.5px, 1.9vw, 21px); line-height: 1.5; color: var(--ink);
  max-width: 30ch; margin-top: 20px; text-wrap: pretty;
}
.sub { font-size: clamp(16px, 1.3vw, 17.5px); color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
.hand {
  font-family: var(--hand); font-weight: 700; font-size: clamp(23px, 2.6vw, 31px);
  color: var(--tangerine); line-height: 1.1;
}

/* ── botones y chips ───────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--indigo); color: #fff;
  font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: 0.002em;
  padding: 14px 26px; border: 2px solid var(--indigo); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.3s var(--out-quint), transform 0.35s var(--spring), box-shadow 0.3s var(--out-quint);
  box-shadow: 0 6px 0 -2px oklch(0.42 0.13 268 / 0.28);
}
.btn:hover { background: var(--indigo-hi); border-color: var(--indigo-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: 0 3px 0 -2px oklch(0.42 0.13 268 / 0.28); }
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--sm { font-size: 14.5px; padding: 10px 18px; box-shadow: none; }
.btn--block { width: 100%; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--indigo); outline-offset: 3px;
}

/* ── navegación ────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  transition: background-color 0.4s var(--out-quint), box-shadow 0.4s var(--out-quint), padding 0.4s var(--out-quint);
}
.nav.is-stuck {
  background: oklch(0.973 0.013 232 / 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: 10px; padding-bottom: 10px;
}
.nav__mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--indigo); }
.nav__mark span {
  font-family: var(--hand); font-weight: 700; font-size: 32px; line-height: 0.9;
  color: var(--ink); letter-spacing: 0;
}
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav__links a:hover { color: var(--indigo); }
.nav__cta {
  color: #fff !important; background: var(--indigo);
  padding: 9px 18px; border-radius: 999px;
}
.nav__cta:hover { background: var(--indigo-hi); color: #fff !important; }
@media (max-width: 660px) { .nav__links a:not(.nav__cta) { display: none; } }

/* ── paneles de foto ───────────────────────────────────────── */
/* --cut: fotos de producto con fondo blanco. El multiply borra el blanco y el
   animal queda apoyado sobre el celeste, como en el feed.
   --full: fotos con fondo propio, recortadas a la caja. */

.shot { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--sky-2); }
.shot--doodle { background-image: var(--doodle-w); background-size: 160px; }
.shot--cut img { mix-blend-mode: multiply; object-fit: contain; padding: 4% 6% 0; }
.shot--full img { object-fit: cover; }
.shot img { width: 100%; height: 100%; }

/* ── hero ──────────────────────────────────────────────────── */

.hero {
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(96px, 14vh, 148px) var(--gutter) clamp(34px, 5vh, 56px);
  display: grid; grid-template-columns: 1fr 1.02fr;
  gap: clamp(26px, 4.5vw, 64px); align-items: center;
}
.hero__type { min-width: 0; }
.hero h1 { margin-top: 2px; }
.hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .shot { aspect-ratio: 5 / 4; }
.hero__tag {
  position: absolute; bottom: 16px; left: 16px;
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700;
  padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 2px 10px oklch(0.312 0.049 250 / 0.12);
}
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: clamp(84px, 12vh, 118px); }
  .hero .shot { order: -1; aspect-ratio: 4 / 3; }
  .lede { max-width: 34ch; }
}

/* franja de promesas */
.strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; gap: 2px 32px; align-items: center;
}
.strip span, .strip a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); padding: 14px 0; text-decoration: none;
}
.strip a:hover { color: var(--ink); }
.strip .strip__last { color: var(--tangerine); margin-left: auto; }
@media (max-width: 760px) { .strip .strip__last { margin-left: 0; } }

/* ── selector por personalidad ─────────────────────────────── */

.pick { max-width: var(--wide); margin: 0 auto; padding: clamp(60px, 10vh, 110px) var(--gutter) 0; }
.pick__head { max-width: 46ch; }
.pick__head h2 { margin-bottom: 14px; }
.chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(26px, 4vh, 38px);
}
.chip {
  font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line);
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  transition: border-color 0.25s var(--out-quint), background-color 0.25s var(--out-quint), transform 0.3s var(--spring);
}
.chip:hover { border-color: var(--sky-3); transform: translateY(-2px); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.pick__answer {
  margin-top: 22px; min-height: 2.9em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.pick__answer .hand { max-width: 34ch; }
.pick__count {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}

/* ── catálogo ──────────────────────────────────────────────── */

.shelf { max-width: var(--wide); margin: 0 auto; padding: clamp(20px, 3vh, 30px) var(--gutter) clamp(60px, 10vh, 104px); }
.shelf__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 900px) { .shelf__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .shelf__grid { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border-radius: var(--r-lg);
  padding: 14px 14px 18px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px oklch(0.312 0.049 250 / 0.05), 0 10px 26px -18px oklch(0.312 0.049 250 / 0.5);
  transition: opacity 0.45s var(--out-quint), filter 0.45s var(--out-quint), transform 0.45s var(--out-quint);
}
.card.is-off { opacity: 0.3; filter: saturate(0.3); }
/* Los que calzan se van al frente de la grilla. Sin esto, eliges una
   personalidad y sus accesorios quedan abajo, fuera de pantalla. */
.card.is-on { order: -1; }
.card .shot { aspect-ratio: 1 / 1; border-radius: var(--r-md); }
.card__body { padding: 15px 6px 0; display: flex; flex-direction: column; flex: 1; }
.card__tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tangerine); margin-bottom: 7px;
}
.card h3 { margin-bottom: 5px; }
/* flex: 1 en la nota es lo que alinea precios y botones entre tarjetas aunque
   los textos tengan distinto largo. Sin esto la fila se ve chueca. */
.card__note { font-size: 15px; color: var(--ink-3); line-height: 1.45; flex: 1; }
.card__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft);
}
.card__price {
  font-family: var(--display); font-weight: 800; font-size: 25px; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.card__sizes {
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}
.card .btn { margin-top: 14px; }

/* ── el muro de los peludos ────────────────────────────────── */
/* Carrete que se arrastra con el dedo, con flechas y puntos. Una marca que
   vive en Instagram tiene esto: fotos de clientes. Es la sección que más se
   parece a su feed y la que hace que la página no se sienta vacía. */

.wall { max-width: var(--wide); margin: 0 auto; padding: clamp(20px, 3vh, 34px) var(--gutter) clamp(56px, 9vh, 96px); }
.wall__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(22px, 3.5vh, 34px);
}
.wall__head h2 { margin-top: 12px; }
.wall__nav { display: flex; gap: 9px; flex: none; }
.wall__btn {
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line); color: var(--ink);
  display: grid; place-items: center;
  transition: background-color 0.25s var(--out-quint), border-color 0.25s var(--out-quint), transform 0.3s var(--spring);
}
.wall__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
.wall__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.wall__track {
  list-style: none; display: flex; gap: clamp(12px, 1.8vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* el respiro lateral evita que la primera y la última queden pegadas al borde */
  padding-bottom: 4px;
}
.wall__track::-webkit-scrollbar { display: none; }
.wall__track:focus-visible { outline: 3px solid var(--indigo); outline-offset: 5px; border-radius: var(--r-md); }
.wall__track li {
  scroll-snap-align: center; flex: 0 0 clamp(240px, 32%, 360px);
}
.wall__track img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-md); background: var(--sky-2);
}
.wall__track span {
  display: block; margin-top: 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.wall__dots { display: flex; justify-content: center; gap: 7px; margin-top: clamp(20px, 3vh, 28px); }
.wall__dot {
  width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--sky-3); transition: transform 0.3s var(--spring), background-color 0.3s var(--out-quint);
}
.wall__dot[aria-selected="true"] { background: var(--indigo); transform: scale(1.55); }
@media (max-width: 620px) {
  .wall__head { flex-direction: column; align-items: flex-start; }
  .wall__track li { flex: 0 0 78%; }
}

/* ── el medidor de cuello ──────────────────────────────────── */

.fit {
  background: var(--sky-2); background-image: var(--doodle-w); background-size: 160px;
  padding: clamp(64px, 11vh, 116px) var(--gutter);
}
.fit__in {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .fit__in { grid-template-columns: 1fr; } }
.fit__left h2 { margin-bottom: 14px; }
.fit__left .sub { color: var(--ink); }
.fit__steps { list-style: none; margin-top: 22px; display: grid; gap: 12px; }
.fit__steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  font-size: 16px; color: var(--ink);
}
.fit__steps b {
  font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--tangerine);
  background: var(--paper); border-radius: 999px; width: 26px; height: 26px;
  display: grid; place-items: center; line-height: 1;
}
.fit__photo { margin-top: 26px; border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.fit__photo img { mix-blend-mode: multiply; }

.gauge {
  background: var(--paper); border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 34px);
  box-shadow: 0 20px 40px -30px oklch(0.312 0.049 250 / 0.65);
}
.gauge__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.gauge__label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
}
.gauge__cm {
  font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5vw, 54px);
  color: var(--ink); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.gauge__cm small { font-size: 0.42em; font-weight: 700; color: var(--ink-3); letter-spacing: -0.01em; }
.gauge__size {
  font-family: var(--display); font-weight: 800; font-size: clamp(46px, 6.6vw, 76px);
  color: var(--tangerine); line-height: 0.86; letter-spacing: -0.05em;
}
.gauge input[type="range"] {
  width: 100%; margin: 22px 0 6px; height: 30px;
  accent-color: var(--indigo); cursor: grab;
}
.gauge__ticks {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.gauge__verdict {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  font-size: 16.5px; color: var(--ink); min-height: 3.2em;
}
.gauge__verdict strong { color: var(--ink); font-weight: 700; }
.gauge .btn { margin-top: 16px; }
.gauge__fallback { font-size: 15px; color: var(--ink-2); }
html.js .gauge__fallback { display: none; }
html:not(.js) .gauge__live { display: none; }

.sizes { margin-top: 22px; width: 100%; border-collapse: collapse; font-size: 15px; }
.sizes th, .sizes td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line-soft); }
.sizes th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
.sizes td:first-child { font-family: var(--display); font-weight: 800; color: var(--ink); }
.sizes td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sizes tr.is-on td { color: var(--indigo); }
.sizes tr.is-on td:first-child { color: var(--indigo); }

/* ── Bianca y Lucas ────────────────────────────────────────── */

.crew { max-width: var(--wide); margin: 0 auto; padding: clamp(64px, 11vh, 116px) var(--gutter) 0; }
.crew__head { max-width: 44ch; margin-bottom: clamp(28px, 4.5vh, 44px); }
.crew__head h2 { margin-bottom: 12px; }
.crew__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 34px); }
@media (max-width: 780px) { .crew__grid { grid-template-columns: 1fr; } }
.who {
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  box-shadow: 0 1px 2px oklch(0.312 0.049 250 / 0.05), 0 10px 26px -18px oklch(0.312 0.049 250 / 0.5);
}
.who .shot { border-radius: 0; aspect-ratio: 3 / 4; }
/* Lucas está abajo y a la izquierda del cuadro original: sin corrimiento, el
   recorte vertical se queda con puro cielo. */
.who .shot--lucas img { object-position: 34% 62%; }
.who__body { padding: clamp(18px, 2.4vw, 26px); }
.who__role {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tangerine); margin-bottom: 8px;
}
.who__name { font-family: var(--hand); font-size: clamp(34px, 4vw, 46px); color: var(--ink); line-height: 0.9; }
.who ul { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.who li {
  font-size: 15.5px; color: var(--ink-2); padding-left: 20px; position: relative; line-height: 1.4;
}
.who li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--sky-3);
}
@media (max-width: 460px) {
  .who { grid-template-columns: 1fr; }
  .who .shot { aspect-ratio: 4 / 3; }
}

/* ── la tira de datos ──────────────────────────────────────── */
/* Tres cifras en tipografía, sin tarjetas ni barras. Es el guiño de que atrás
   hay alguien que trabaja con datos, no un tablero metido a la fuerza. */

@media (max-width: 700px) {
}

/* ── lo que dicen ──────────────────────────────────────────── */

.says {
  padding: clamp(56px, 9vh, 92px) 0 clamp(64px, 11vh, 108px);
}
.says blockquote {
  background: var(--paper); border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 30px);
  box-shadow: 0 10px 26px -20px oklch(0.312 0.049 250 / 0.5);
}
.says p {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.022em;
  font-size: clamp(18px, 1.9vw, 21px); line-height: 1.22; color: var(--ink); text-wrap: pretty;
}
.says cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

/* ── pedir ─────────────────────────────────────────────────── */

.order {
  position: relative; isolation: isolate;
  background: var(--navy);
  color: oklch(0.86 0.02 235);
  padding: clamp(70px, 12vh, 128px) var(--gutter);
}
/* Sobre el azul oscuro los garabatos en blanco al 42% quedaban gritando y le
   peleaban al texto. Van en una capa aparte con opacidad baja. */
.order::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--doodle-w); background-size: 150px;
  opacity: 0.17;
}
.order__in {
  max-width: var(--wide); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 84px);
}
@media (max-width: 880px) { .order__in { grid-template-columns: 1fr; gap: 40px; } }
.order h2 { color: var(--paper); margin-bottom: 14px; }
.order .eyebrow { color: oklch(0.79 0.13 55); }
.order .sub { color: oklch(0.84 0.02 235); }
.order .hand { color: oklch(0.83 0.11 60); margin-top: 24px; }
.how { border-top: 1px solid oklch(0.97 0.01 232 / 0.2); }
.how > div {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid oklch(0.97 0.01 232 / 0.1);
}
.how dt { font-size: 14.5px; color: oklch(0.82 0.02 235); }
.how dd { font-size: 14.5px; font-weight: 700; color: var(--paper); text-align: right; }
.order__social { margin-top: 26px; display: flex; gap: 10px 22px; flex-wrap: wrap; }
.order__social a {
  color: oklch(0.86 0.02 235); font-size: 14.5px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.order__social a:hover { color: var(--paper); }

/* ── pie ───────────────────────────────────────────────────── */

.foot {
  background: var(--paper); border-top: 1px solid var(--line);
  padding: clamp(52px, 9vh, 84px) var(--gutter) 52px;
}
.foot__in { max-width: 820px; margin: 0 auto; }
.foot__real { font-size: 16px; color: var(--ink-2); max-width: 64ch; }
.foot__real strong { color: var(--ink); font-weight: 700; }
.foot__real + .foot__real { margin-top: 12px; }
.foot__cta {
  margin-top: 22px; font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.05; color: var(--tangerine); text-wrap: balance;
}
.foot__meta {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}
kbd {
  font-family: var(--sans); font-size: 11px; border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; color: var(--ink-2);
}

/* ── barra fija de WhatsApp, solo en celular ───────────────── */

.wabar { display: none; }
@media (max-width: 660px) {
  .wabar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--indigo); color: #fff;
    padding: 15px; text-decoration: none; font-size: 16px; font-weight: 700;
    box-shadow: 0 -1px 0 oklch(0.312 0.049 250 / 0.16);
  }
  .foot { padding-bottom: 92px; }
}

/* ── guías para grabar ─────────────────────────────────────── */

.guides { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: none; }
body.show-guides .guides { display: block; }
.guides__frame {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: calc(100vh * 9 / 16); max-width: 100vw;
  border-left: 1px dashed var(--indigo); border-right: 1px dashed var(--indigo);
  background: oklch(0.655 0.163 45 / 0.05);
}
.guides__frame span {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--tangerine);
}
body.hide-ui .nav, body.hide-ui .foot__keys, body.hide-ui .wabar { opacity: 0; pointer-events: none; }

/* ── revelado ──────────────────────────────────────────────── */

html.js .r, html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .r.in, html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 0.85s var(--out-quint), transform 0.95s var(--out-expo);
  transition-delay: calc(var(--d, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  html.js .r, html.js .reveal { opacity: 1 !important; transform: none !important; }
  .card, .chip, .btn { transition: none; }
}

/* ── Ilustraciones de Bianca y Lucas ───────────────────────────
   Los personajes del manual asomandose por la pagina. Decorativos:
   se esconden en pantallas chicas para no robarle sitio al contenido. */
.pick, .fit__type, .order__right { position: relative; }
.ilu { position: absolute; pointer-events: none; user-select: none; }
.ilu--bianca {
  width: clamp(78px, 8vw, 116px); height: auto;
  top: -14px; right: 2%;
  transform: rotate(-6deg);
}
.ilu--lucas {
  width: clamp(92px, 9vw, 132px); height: auto;
  bottom: -8px; right: -6px;
  opacity: 0.95;
}
.ilu--duo {
  position: static; display: block;
  width: min(300px, 78%); height: auto;
  margin: 0 0 22px;
}
@media (max-width: 860px) {
  .ilu--bianca, .ilu--lucas { display: none; }
  .ilu--duo { width: 74%; margin-inline: auto; }
}

/* ── Contacto y resenas ────────────────────────────────────── */
/* Este bloque vive sobre el azul oscuro de .order: todo va en claro. */
.order__title {
  font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.79 0.13 55); margin-bottom: 16px;
}
.order__social { display: grid; gap: 14px; margin-top: 0; }
.order__social a {
  display: inline-flex; align-items: center; gap: 11px;
  color: oklch(0.90 0.02 235); text-decoration: none; font-size: 15.5px;
  transition: color 0.2s var(--out-quint);
}
.order__social a:hover { color: var(--paper); }
.order__social svg { flex: none; color: var(--sky-3); }

.says__head { max-width: var(--wide); margin: 0 auto clamp(1.4rem, 3vh, 2rem); padding: 0 var(--gutter); }
.says__grid {
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.says__card {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 26px 24px; margin: 0;
}
.says__card p { font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.says__card cite {
  display: block; margin-top: 14px; font-style: normal;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.says__card.is-empty { border-style: dashed; text-align: center; }
.says__card.is-empty p { color: var(--ink-3); }

/* ── Coleccion CHROMA ──────────────────────────────────────
   La historia de la coleccion, del documento de la marca. Va sobre celeste
   para separarla del catalogo que viene despues. */
.chroma { background: var(--sky); padding: clamp(58px, 9vh, 96px) 0; }
.chroma__in {
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.chroma__type h2 { margin-bottom: 18px; }
.chroma__type .sub + .sub { margin-top: 14px; }
.chroma__type em { font-family: var(--hand); font-style: italic; }
.chroma__type strong { color: var(--ink); font-weight: 600; }
.chroma__facts { list-style: none; display: grid; gap: 2px; }
.chroma__facts li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 0; border-top: 1px solid var(--line-soft);
}
.chroma__facts li:last-child { border-bottom: 1px solid var(--line-soft); }
.chroma__facts span {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; color: var(--indigo); flex: none;
}
.chroma__facts p { font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 860px) {
  .chroma__in { grid-template-columns: 1fr; gap: 26px; }
}
.says__cta {
  max-width: var(--wide); margin: 26px auto 0; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.says__cta p { font-size: 16px; color: var(--ink-2); }

/* ── Formulario de resenas ─────────────────────────────────
   Lo que se envia entra como pendiente: nada aparece en la pagina hasta que
   la marca lo aprueba desde /admin. */
.form {
  max-width: var(--wide); margin: clamp(30px, 5vh, 48px) auto 0;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
.form__intro h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 10px; }
.form__intro p { color: var(--ink-2); font-size: 15.5px; }
.form form {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: clamp(20px, 2.6vw, 30px);
  display: grid; gap: 14px;
}
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label {
  display: grid; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.form label span { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.75; }
.form input[type="text"], .form textarea {
  font: inherit; font-size: 15.5px; color: var(--ink);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; width: 100%; text-transform: none; letter-spacing: 0;
}
.form textarea { resize: vertical; min-height: 92px; }
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--indigo); outline-offset: 1px; border-color: transparent;
}
.form input[type="file"] {
  font-size: 14px; color: var(--ink-2); text-transform: none;
  letter-spacing: 0; font-weight: 400;
}
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn { justify-self: start; }
.form__aviso { font-size: 14.5px; color: var(--ink-2); min-height: 1.2em; }
.form__aviso.is-mal { color: #a3402f; }
.form__aviso.is-bien { color: #1f7a52; }
.form__nota { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.says__card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-sm); margin-bottom: 16px;
}
@media (max-width: 860px) {
  .form { grid-template-columns: 1fr; }
  .form__fila { grid-template-columns: 1fr; }
}