/* ==========================================================================
   Calvo Glass — capa base
   Diseño v8. Los valores vienen de DESIGN-SYSTEM.md; si no está ahí, no va acá.
   Orden: fuentes → tokens → reset → tipografía → controles → formularios.
   ========================================================================== */

/* --- fuentes ------------------------------------------------------------ */
/* Ambas son variables, un archivo por familia. El rango de peso va declarado
   o el navegador sintetiza la negrita y el trazo sale sucio. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ------------------------------------------------------------- */
:root {
  /* superficie y tinta */
  --cream:    #FBF6EC;
  --tile:     #F2EADC;
  --paper:    #FFFFFF;
  --ink:      #1B1A17;
  --ash:      #66625A;
  --on-dark:  #FBF6EC;
  --on-brick: #FFF4EA;

  /* marca */
  --brick:  #B44827;
  --forest: #2E6B4F;
  --border: #8F836E;   /* bordes de controles — 1.4.11 */
  --rule:   #E6DDCB;   /* separadores decorativos, nunca un control */

  /* láminas del catálogo — solo la grilla, v8 */
  --t-sand:  #E1CFAD;
  --t-sage:  #C4D2BF;
  --t-blush: #E5C8B8;
  --t-sky:   #C3D1E0;
  --t-lilac: #CDC1DB;
  --t-rose:  #E5BFB6;
  --t-ice:   #B8CDE0;
  --t-olive: #DED7B3;

  /* estado */
  --ok:   #2E6B4F;
  --warn: #B44827;
  --err:  #9A2B20;

  /* estrellas de reseñas — literal a propósito, ver DESIGN-SYSTEM §1 */
  --star: #A8710F;

  /* espacio */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s14: 56px; --s18: 72px; --s24: 96px;

  --m:       clamp(16px, 4.2vw, 56px);
  --gap:     clamp(10px, 1.6vw, 26px);
  --section: clamp(44px, 5.6vw, 80px);

  /* radio — superficies rectas, controles redondos */
  --r-flat:  0;
  --r-pill:  999px;
  --r-field: 2px;
  --r-card:  18px;   /* solo el carrusel de reseñas */

  /* curvas */
  --e-standard: cubic-bezier(.22, 1, .36, 1);
  --e-warm:     cubic-bezier(.34, 1.4, .5, 1);
  --e-settle:   cubic-bezier(.22, 1.15, .36, 1);

  /* duraciones */
  --d-micro:   180ms;
  --d-control: 240ms;
  --d-card:    320ms;
  --d-image:   450ms;
  --d-reveal:  650ms;
  --d-enter:   900ms;

  /* familias, con respaldo real en cada declaración */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-text:    'Schibsted Grotesk', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El `display` del navegador para [hidden] es una regla de tipo, así que
   cualquier `.algo{display:…}` propio la gana y el elemento sigue en
   pantalla con el atributo puesto. Pasó con la puerta de edad: el script la
   marcaba oculta, guardaba la confirmación, y `.gate{display:grid}` la
   dejaba visible igual. Vale para todo componente que se muestre y se
   esconda, no solo para ese. */
[hidden] { display: none !important; }

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

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

a { color: inherit; text-decoration: none; }

/* Visible en todo lo que reciba foco — no negociable. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --- tipografía --------------------------------------------------------- */
/* El display se raciona: banner, titular editorial, encabezados de sección,
   etiquetas de la marquesina y el wordmark. En ningún otro lado. */
.display-xl,
.display-l,
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  margin: 0;
}
.display-xl, h1 { font-size: clamp(38px, 5.8vw, 70px); }
.display-l,  h2 { font-size: clamp(32px, 4.6vw, 58px); letter-spacing: -.03em; }

/* Los encabezados de sección se quedan en 22px. Agrandarlos es la señal más
   ruidosa de plantilla y fue la corrección principal entre v2 y v3. */
h3, .heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 var(--s4); }

.body-s   { font-size: 13.5px; font-weight: 500; }
.caption  { font-size: 12.5px; color: var(--ash); }
.micro    { font-size: 11px; font-weight: 600; letter-spacing: .17em;
            text-transform: uppercase; }

.wrap { padding-inline: var(--m); }

/* --- botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 11px var(--s6);
  /* Sin borde en la base: un `1px solid transparent` le sumaba 2px de alto y
     de ancho a cada botón, y el del banner salía 48px donde v8 tiene 46.
     Las variantes que necesitan borde lo declaran. */
  border: 0;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--d-control) var(--e-warm),
              color      var(--d-control) var(--e-warm),
              border-color var(--d-control) var(--e-warm);
}
.btn-primary   { background: var(--ink);  color: var(--on-dark); }
.btn-primary:hover:not(:disabled)   { background: #2C2A25; }
.btn-secondary { background: none; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover:not(:disabled) { background: var(--ink); color: var(--on-dark); }
/* solo sobre banner o franja */
.btn-on-colour { background: var(--cream); color: var(--ink); }
.btn:disabled  { opacity: .4; cursor: default; }

/* --- chips -------------------------------------------------------------- */
/* Medidas tomadas de v8, no aproximadas: 12.5px, relleno 6/15, hueco 7. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--d-micro), color var(--d-micro), border-color var(--d-micro);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}

/* --- iconos ------------------------------------------------------------- */
/* Se miden en em y heredan el color, así que un icono se escala cambiando el
   font-size del contenedor y se invierte solo cuando su chip se activa. Nada
   de fuentes de iconos: el sitio actual arrastra 880 KB en cuatro. */
.ic {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip .ic { font-size: 17px; }

/* --- formularios -------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s4); }
.field > span { display: block; font-size: 12.5px; color: var(--ash); margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--s3);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  transition: border-color var(--d-micro);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink); }

/* Nada se comunica solo con color: el error lleva mensaje. */
.field.is-error input,
.field.is-error select,
.field.is-error textarea { border-color: var(--err); }
.field .msg { display: block; margin-top: 6px; font-size: 12.5px; color: var(--err); }

/* --- separadores -------------------------------------------------------- */
hr, .rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s8) 0; }

/* --- accesibilidad ------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 12px var(--s5);
  background: var(--ink);
  color: var(--on-dark);
}
.skip-link:focus { left: var(--m); top: var(--s3); }

/* --- teléfono ----------------------------------------------------------- */
@media (max-width: 760px) {
  /* iOS Safari hace zoom a toda la página si el campo enfocado baja de 16px.
     En el checkout ese salto llega en el peor momento posible. */
  input:not([type="checkbox"]):not([type="radio"]),
  select:not([multiple]),
  textarea { font-size: 16px; }
}

/* --- movimiento reducido ------------------------------------------------ */
/* Nada puede depender de una animación para volverse visible o alcanzable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- el salto entre páginas -------------------------------------------- */
/* La foto viaja de la grilla a la ficha en vez de que la página parpadee.
   Copiado de v8. Los navegadores que no lo soportan simplemente navegan: no
   hay nada que degradar porque la navegación normal ya es el respaldo. */
@view-transition { navigation: auto; }

@keyframes vt-out { to { opacity: 0 } }
@keyframes vt-in  { from { opacity: 0 } }

::view-transition-group(pieza) {
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(pieza),
::view-transition-new(pieza) {
  /* que escale en vez de fundirse: es el mismo objeto */
  animation-duration: .62s;
  mix-blend-mode: normal;
  height: 100%;
  object-fit: contain;
}
::view-transition-old(root) { animation: vt-out .3s ease both; }
::view-transition-new(root) { animation: vt-in .42s ease .06s both; }

/* La foto principal de la ficha es siempre el destino del salto. */
.stage img.on { view-transition-name: pieza; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: .01ms !important; }
}