/* ════════════════════════════════════════════════════════════════════════
   FABISITO-WEB · Estilos inspirados en Rare Beauty · paleta cálida minimal
   ════════════════════════════════════════════════════════════════════════

   PALETA DE COLORES (los 2 colores que usamos en TODO el sitio):
   #fdfbf8 = blanco crema (el "blanco" del fondo general de la web)
   #fdf6f0 = beige durazno (el "beige" que usamos en secciones/cajones)
   #fdfbf8 = fondo principal del body
   #7f2549 = rojo baya (el acento, botones, hover)
   #000914 = tinta oscura (texto principal)
   #6b5b4f = gris marrón (texto secundario)

   TIPOGRAFÍAS (3):
   Hanken Grotesk  = cuerpo/UI (equivale a Neue Haas Unica de Rare Beauty)
   Newsreader      = títulos serif (equivale a Ogg de Rare Beauty)
   Dancing Script  = títulos script cursiva (equivale a Rare Script)
   ════════════════════════════════════════════════════════════════════════ */

/* ── RESET GLOBAL ────────────────────────────────────────────────────────
   Las 3 líneas de abajo son el "reset": limpian los estilos por defecto
   que trae el navegador para que todo se vea igual en cualquier dispositivo. */
*, *::before, *::after { box-sizing: border-box; }
/* box-sizing:border-box = el padding/borde se incluyen DENTRO del ancho.
   ::before y ::after = los pseudo-elementos (como las flechas fantasma del
   carrusel) también respetan esta regla. */

html { scroll-behavior: smooth; scroll-padding-top: 60px; }
/* scroll-behavior:smooth = al hacer clic en un enlace #seccion baja suave.
   scroll-padding-top:60px = deja 60px de espacio arriba al hacer scroll
   para que el menú fijo no tape el título de la sección. */

body {
  margin: 0;
  /* margin:0 = quita el borde blanco que el navegador pone alrededor. */
  font-family: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* La tipografía principal de TODO el texto. Si Hanken no carga, usa las de respaldo. */
  background: #fdfbf8;
  /* ← CAMBIO CLAVE: este es el "blanco" general de la web. */
  color: #000914;
  /* Color del texto normal. */
  font-size: 16px;
  line-height: 1.5;
  /* line-height = altura de cada línea de texto. 1.5 = 50% más alto que la letra. */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Las 2 de arriba hacen que las letras se vean más nítidas en pantalla. */
}

/* Elementos multimedia: que la imagen/video nunca sea más ancho que su caja. */
img, video { display: block; max-width: 100%; }

/* Enlaces: heredan el color del texto y sin subrayado. */
a { color: inherit; text-decoration: none; }

/* Listas: sin viñetas ni márgenes. */
ul, ol { list-style: none; margin: 0; padding: 0; }

/* Encabezados y párrafos: sin margen (lo controlamos nosotros). */
h1, h2, h3, p { margin: 0; }

/* Botones: heredan la letra, sin borde ni fondo (lo ponemos después). */
button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; }

/* A11y: cuando navegas con teclado, un borde rojo baya marca el elemento. */
:focus-visible { outline: 2px solid #7f2549; outline-offset: 3px; }

/* ── UTILIDADES ─────────────────────────────────────────────────────────
   .eyebrow = la etiqueta pequeña en MAYÚSCULAS arriba de un título
   (ej: "ABOUT", "CONTACT"). Mismo estilo que usa Rare Beauty. */
.eyebrow {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  /* letter-spacing = espacio entre letras. .16em = letras separadas (look elegante). */
  color: #6b5b4f; margin-bottom: .6rem;
}

/* Clase auxiliar: pinta cualquier elemento de beige durazno. */
.bg-peach { background: #fdf6f0; }


/* ── NAV (menú superior fijo) ──────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  /* position:fixed = el menú queda "pegado" arriba y no baja al hacer scroll.
     inset: 0 0 auto = top:0, right:0, left:0 (ocupa todo el ancho). */
  border-bottom: 1px solid rgba(0,0,0,.06);
  /* Línea sutil abajo del menú. */
  background: rgba(253, 251, 248, .92);
  /* Fondo casi blanco con 92% de opacidad (se transparenta un poco). */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* ← CAMBIO iOS: el prefijo -webkit hace que el blur funcione en Safari/iOS
     (sin él, en iOS antiguo el menú se ve plano). */
  padding-top: env(safe-area-inset-top);
  /* ← CAMBIO iOS: deja espacio debajo del notch/Dynamic Island para que el
     logo y los links no queden tapados por la cámara. */
  transition: background .3s;
}
.nav-inner {
  width: min(100%, 1320px); margin: 0 auto; padding: 1rem 2rem;
  padding-left: max(2rem, env(safe-area-inset-left));
  padding-right: max(2rem, env(safe-area-inset-right));
  /* ← CAMBIO iOS: en horizontal el carrito no queda bajo el home indicator. */
  /* min(100%,1320px) = como máximo 1320px, centrado, con aire a los lados. */
  display: flex; align-items: center; justify-content: space-between;
  /* Flex en fila: logo a la izquierda, links al centro, carrito a la derecha. */
}
.nav-logo {
  font-family: "Newsreader", "Georgia", serif;
  font-size: 1.25rem; font-weight: 500; font-style: italic;
  /* El "@fabisit0" en serif cursiva. */
  letter-spacing: -0.01em;
  color: #000914;
}
.nav-links { display: flex; gap: 2rem; }
/* gap = espacio de 2rem entre cada link del menú. */
.nav-links a {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #6b5b4f; transition: color .2s;
}
.nav-links a:hover { color: #000914; }
/* hover = cuando pasas el mouse, el link se oscurece. */

.nav-actions { display: flex; align-items: center; }
.cart-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
  /* Botón redondo del carrito. border-radius:50% = círculo perfecto. */
  color: #6b5b4f; transition: color .2s, border-color .2s;
  position: relative;
  /* position:relative = para que el contador rojo se posicione dentro. */
}
.cart-toggle:hover { color: #000914; border-color: rgba(0,0,0,.2); }
.cart-toggle svg { width: 16px; height: 16px; }
/* El ícono del bolso (SVG dibujado a mano). */

.cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  /* El contador rojo con el número de productos, encima del botón. */
  display: none; align-items: center; justify-content: center;
  /* display:none = oculto por defecto. Solo aparece con .is-visible (abajo). */
  background: #7f2549; color: #fff;
  font-size: .6rem; font-weight: 700; border-radius: 99px; line-height: 1;
}
.cart-count.is-visible { display: inline-flex; }
/* ← CAMBIO: cuando el JS agrega la clase is-visible, el contador se muestra. */

/* ── HERO · VIDEO PURO ─────────────────────────────────────────────────── */
.hero-video {
  width: 100%;
  overflow: hidden;
  /* overflow:hidden = el video no se sale de la sección. */
  background: #fdf6f0;
}
.hero-video__wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  /* ← CAMBIO iOS: primero 100vh (fallback para iOS < 15.4), luego 100svh
     (lo "small viewport height", evita que la barra del navegador corte).
     Sin el fallback, en iOS antiguo el hero se colapsaba y solo se veía
     el botón. */
  display: flex;
  align-items: flex-end; justify-content: center;
  /* El botón se coloca abajo al centro. */
}
.hero-video__media {
  position: absolute; inset: 0;
  /* absolute = el contenedor del video cubre toda la sección. */
  width: 100%; height: 100%;
}
.hero-video__media video {
  width: 100%; height: 100%; object-fit: cover;
  /* object-fit:cover = el video se recorta para llenar todo sin deformarse. */
  filter: saturate(.85) contrast(1.02);
  /* ← CAMBIO: ajuste de color del video (85% saturación, +2% contraste). */
}
.hero-video__cta {
  position: relative; z-index: 2;
  /* z-index:2 = el botón queda por encima del video. */
  margin-bottom: 3.2rem;
  display: inline-block;
  background: #7f2549; color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .95rem 2.6rem;
  border-radius: 999px;
  /* border-radius:999px = botón píldora (bordes totalmente redondos). */
  transition: transform .2s, box-shadow .2s, background .2s;
}
.hero-video__cta:hover {
  transform: translateY(-2px);
  /* hover = el botón sube 2px y se le dibuja una sombra. */
  box-shadow: 0 8px 28px rgba(127, 37, 73, .35);
  background: #6d1f3f;
  /* Y se oscurece el rojo baya. */
}

/* ── FLECHAS DEL CARRUSEL (agregadas para ver más productos) ───────────── */
/* ← CAMBIO CLAVE: estos botones < y > flotan sobre el carrusel para
   desplazarlo sin necesidad de arrastrar. */
.carousel-arrow {
  position: absolute;
  /* absolute = se posicionan sobre el viewport del carrusel. */
  top: 50%;
  transform: translateY(-50%);
  /* Centrados verticalmente. translateY(-50%) = compensa la mitad de su altura. */
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #000914;
  border: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.carousel-arrow:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transform: translateY(-50%) scale(1.06);
  /* hover = la flecha se agranda un 6%. */
}
.carousel-arrow svg { width: 18px; height: 18px; }
/* El chevron (la punta de flecha) dibujada en SVG. */
.carousel-arrow--prev { left: clamp(8px, 1.5vw, 20px); }
.carousel-arrow--next { right: clamp(8px, 1.5vw, 20px); }
/* clamp(mín, preferido, máx) = posición flexible según el tamaño de pantalla. */

/* ── PRODUCT CAROUSEL (horizontal + fade) ──────────────────────────────── */
.product-carousel {
  background: #fdf6f0;
  /* ← CAMBIO: toda la sección de la tienda va en beige durazno. */
  padding: 4.5rem 0 5rem;
  position: relative;
}
.product-carousel__inner {
  max-width: 1320px; margin: 0 auto;
  padding: 0 2rem;
  /* Contiene el título "La tienda" y el enlace "Ver todo". */
}
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.2rem;
  /* Título a la izquierda, link a la derecha, ambos alineados por la línea base. */
}
.section-header__heading {
  font-family: "Newsreader", "Georgia", serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  /* clamp = tamaño fluido: mínimo 1.6rem, crece con la pantalla, máx 2.4rem. */
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #000914;
}
.section-header__cta {
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #7f2549;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  white-space: nowrap;
  /* white-space:nowrap = el texto no se parte en dos líneas. */
  padding-bottom: 2px;
}
.section-header__cta:hover { border-bottom-color: #7f2549; }
/* hover = aparece una línea roja debajo de "Ver todo". */

/* Viewport: enmarca el scroller y lleva el difuminado en los bordes */
.product-carousel__viewport {
  position: relative;
  overflow: hidden;
  /* overflow:hidden = es el "marco" del carrusel: los productos que se
     salen por los lados quedan ocultos (por eso parece infinito). */
}
/* Scroller con padding lateral grande: el carrusel NO empieza pegado al
   borde de la página. Productos empiezan bien hacia adentro. */
.product-carousel__scroller {
  display: flex;
  /* flex = los productos se ponen en fila horizontal. */
  gap: 1.2rem;
  /* Espacio entre producto y producto. */
  overflow-x: auto;
  /* ← CAMBIO CLAVE: overflow-x:auto = aquí es donde se hace el scroll
     horizontal con el dedo o el mouse. */
  scroll-snap-type: x mandatory;
  /* ← CAMBIO: cada producto "encaja" en su posición al hacer scroll. */
  -webkit-overflow-scrolling: touch;
  /* Suaviza el scroll en iPhone/iPad. */
  scrollbar-width: none;
  /* Oculta la barra de scroll (Firefox). */
  padding: 1.2rem clamp(3rem, 11vw, 8rem) 1.5rem;
  /* ← CAMBIO CLAVE: este padding ES la separación del borde. Los productos
     arrancan a 3rem–8rem del borde de la página (el usuario pidió que no
     empezara pegado al borde). */
}
.product-carousel__scroller::-webkit-scrollbar { display: none; }
/* Oculta la barra de scroll (Chrome/Safari). */

/* Difuminado en los bordes (fade mask). Se mantiene suave para que el
   producto que queda a los lados se difumine sutilmente sin esconderse. */
.product-carousel__viewport::before,
.product-carousel__viewport::after {
  /* ::before y ::after = dos capas "fantasma" que se dibujan SIN HTML.
     Son los degradados que difuminan los bordes del carrusel. */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(28px, 5vw, 72px);
  z-index: 2;
  pointer-events: none;
  /* pointer-events:none = los degradados no bloquean los clics. */
}
.product-carousel__viewport::before {
  left: 0;
  /* Degradado del borde IZQUIERDO: empieza beige sólido y se vuelve transparente. */
  background: linear-gradient(to right, #fdf6f0 0%, rgba(253, 246, 240, 0) 100%);
}
.product-carousel__viewport::after {
  right: 0;
  /* Degradado del borde DERECHO (espejo del izquierdo). */
  background: linear-gradient(to left, #fdf6f0 0%, rgba(253, 246, 240, 0) 100%);
}

/* Product tile (una tarjeta de producto) */
.product-tile {
  flex: 0 0 auto;
  /* flex:0 0 auto = la tarjeta NO se encoge ni se estira: ancho fijo. */
  width: clamp(220px, 22vw, 280px);
  /* Ancho del producto: 220px en móvil, hasta 280px en pantalla grande. */
  scroll-snap-align: start;
  /* ← CAMBIO: con esto el scroll "encaja" al inicio de cada tarjeta. */
  background: transparent;
  text-align: left;
}
.product-tile__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f1e7;
  /* Mientras la foto carga, se ve un fondo beige claro. */
  margin-bottom: .7rem;
}
.product-tile__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  /* aspect-ratio:3/4 = la foto siempre es vertical (proporción 3:4),
     como las de Rare Beauty. */
  transition: transform .6s;
}
.product-tile:hover .product-tile__media img { transform: scale(1.04); }
/* hover = la foto se acerca un 4% (efecto zoom suave). */

.product-tile__badge {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  /* La etiqueta "Nuevo"/"Favorito" en la esquina superior izquierda. */
  background: #fff; color: #7f2549;
  font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 999px;
}
.product-tile__name {
  font-family: "Newsreader", "Georgia", serif;
  font-size: 1rem; font-weight: 500; line-height: 1.25;
  color: #000914;
  min-height: 2.5em;
  /* min-height:2.5em = reserva 2 líneas y media para que los nombres
     de distinta longitud no desalineen los precios. */
}
.product-tile__row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .5rem;
  /* Fila con el precio a la izquierda y el botón "Agregar" a la derecha. */
}
.product-tile__price {
  font-size: .9rem; font-weight: 600; color: #000914;
  font-family: "Hanken Grotesk", sans-serif;
}
.btn-add {
  background: #7f2549; color: #fff;
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: 999px;
  transition: background .2s, transform .2s; white-space: nowrap;
}
.btn-add:hover { background: #6d1f3f; }
.btn-add:active { transform: scale(.96); }
/* :active = cuando mantienes presionado, el botón se encoge un 4%. */
.btn-add.is-added { background: #000914; }
/* ← CAMBIO: si el JS agrega is-added, el botón se pone negro. */

/* ── SEPARADOR CIRCULAR + DATOS · FABIÁN ───────────────────────────────── */
/* Foto circular GRANDE de Fabián con sus datos al costado, entre el
   carrusel y la sección de categorías. La web se mantiene blanca. */
.photo-divider {
  position: relative;
  z-index: 5;
  background: #fdfbf8;
  /* ← CAMBIO: fondo BLANCO (el usuario pidió deshacer el beige). */
  margin-top: -64px;
  /* ← CAMBIO CLAVE: margen negativo = la sección se monta 64px ARRIBA,
     así la foto circular "rompe" el borde inferior beige del carrusel. */
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 2rem;
}
.photo-divider__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 5vw, 4rem);
  /* ← CAMBIO: flex en fila = la foto circular a la izquierda y los
     datos de Fabián a la derecha (el usuario lo pidió). */
}
.photo-divider__photo { flex: 0 0 auto; }
/* flex:0 0 auto = la foto no se encoge ni se estira. */
.photo-divider__photo img {
  width: clamp(170px, 22vw, 260px);
  height: clamp(170px, 22vw, 260px);
  /* ← CAMBIO: la foto circular es GRANDE (170px–260px). */
  border-radius: 50%;
  /* border-radius:50% = hace que la foto sea un círculo perfecto. */
  object-fit: cover;
  border: 10px solid #fff;
  /* Borde blanco alrededor de la foto (look editorial). */
  box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
}
.photo-divider__info {
  max-width: 60ch;
  /* ch = ancho en caracteres. 60ch ≈ 60 letras por línea (legible). */
}
.photo-divider__name {
  font-family: "Newsreader", "Georgia", serif;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #000914;
}
.photo-divider__role {
  font-family: "Dancing Script", "Comic Sans MS", cursive;
  /* La línea "Video Editor · Content Creator · Storyteller" en script. */
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 500;
  color: #7f2549;
  margin: .3rem 0 .9rem;
}
.photo-divider__bio {
  color: #6b5b4f;
  font-size: 1.05rem;
  line-height: 1.55;
}
.photo-divider__meta {
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap:wrap = si no caben, las etiquetas bajan a otra línea. */
  gap: .7rem;
  margin-top: 1.2rem;
}
.photo-divider__meta span {
  background: #fdf6f0;
  /* Las etiquetas "Lima, Perú" y "Trabajo remoto" en beige. */
  color: #000914;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border-radius: 999px;
}

/* ── SHOP BY CATEGORY · MOSAICO ───────────────────────────────────────── */
.shop-by { padding: 1rem clamp(1.5rem, 5vw, 4rem) 4.5rem; background: #fdfbf8; }
/* ← CAMBIO: la sección de categorías en blanco. */
.shop-by__inner { max-width: 1320px; margin: 0 auto; }

/* ← CAMBIO CLAVE: aquí está el MOSAICO. En vez de 4 columnas iguales,
   usamos una grilla de 12 columnas donde cada cajón ocupa un tamaño distinto
   (el usuario pidió "cuadrados de distintos tamaños que encajen"). */
.shop-by__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* 12 columnas de ancho igual (1fr cada una). */
  grid-auto-rows: auto;
  /* ← CAMBIO: la altura la define cada cajón con aspect-ratio, así las
     imágenes se recortan con proporción correcta y NO se deforman. */
  gap: .9rem;
}

.shop-by__tile {
  position: relative; overflow: hidden; border-radius: 12px;
  display: flex; align-items: flex-end;
  /* El texto de la categoría se pega abajo. */
  background-color: #f6f1e7;
  background-size: cover;
  background-position: center;
  /* ← CAMBIO CLAVE: la foto va como fondo (cover) en vez de <img>.
     Así se recorta siempre a la proporción del cajón y NUNCA se deforma,
     ni en iOS ni en ningún navegador. */
  transition: transform .3s;
}
.shop-by__tile:hover { transform: translateY(-3px); }
.shop-by__tile::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.18);
  /* Un velo sutil para que la etiqueta blanca se lea bien. */
  transition: background .3s;
}
.shop-by__tile:hover::before { background: rgba(0,0,0,.05); }
.shop-by__tile--polos     { background-image: url("../assets/products/polo.jpg"); }
.shop-by__tile--bolsas    { background-image: url("../assets/products/bolso.jpg"); }
.shop-by__tile--tazas     { background-image: url("../assets/products/taza.jpg"); }
.shop-by__tile--editorial { background-image: url("../assets/products/libreta.jpg"); }
.shop-by__label {
  position: relative; z-index: 2; width: 100%;
  background: rgba(255,255,255,.9); backdrop-filter: blur(3px);
  /* La etiqueta con fondo blanco translúcido y blur. */
  padding: .75rem; text-align: center;
  font-family: "Newsreader", "Georgia", serif;
  font-size: 1.1rem; font-weight: 500; color: #000914;
}

/* Tamaños distintos que encajan como mosaico */
/* ← CAMBIO CLAVE: cada cajón ocupa un número distinto de columnas y filas.
   La suma en cada "bloque" da 12 columnas, por eso encajan.
   Usamos aspect-ratio para que la altura sea proporcional al ancho
   (antes las filas tenían alto fijo y las fotos se estiraban). */
.shop-by__tile--polos     { grid-column: span 5; grid-row: span 2; aspect-ratio: 5 / 4; }
/* Polos = ancho de 5 columnas y alto de 2 filas (el grande). */
.shop-by__tile--bolsas    { grid-column: span 4; grid-row: span 1; aspect-ratio: 4 / 2.4; }
/* Bolsas = 4 columnas, 1 fila. */
.shop-by__tile--tazas     { grid-column: span 3; grid-row: span 1; aspect-ratio: 3 / 2.4; }
/* Tazas = 3 columnas, 1 fila. */
.shop-by__tile--editorial { grid-column: span 7; grid-row: span 1; aspect-ratio: 7 / 2.4; }
/* Editorial = 7 columnas, 1 fila. (7+5=12 ✓ llena el hueco de abajo) */

/* ── ABOUT · CAJONES CON FOTOS E INFO ──────────────────────────────────── */
.about { padding: 5rem 2rem 6rem; background: #fdfbf8; }
/* ← CAMBIO: la sección About en BLANCO (el usuario deshizo el beige). */
.about__inner { max-width: 1320px; margin: 0 auto; }
.about-eyebrow { color: #7f2549; text-align: center; }
.about-title {
  font-family: "Newsreader", "Georgia", serif;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 500; line-height: 1.08; text-align: center;
  max-width: 22ch; margin: 0 auto 3rem;
  /* max-width:22ch = el título centrado ocupa como máximo 22 letras por línea. */
}

/* Bio en panel */
.about-bio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* ← CAMBIO: dos columnas: foto a la izquierda, texto a la derecha. */
  gap: 3rem;
  align-items: center;
  background: #fdf6f0;
  /* ← CAMBIO: TODO el panel de la bio en beige (así se lee bien). */
  border-radius: 14px;
  padding: 2rem;
  margin-bottom: 4rem;
}
.about-bio__media { border-radius: 10px; overflow: hidden; }
.about-bio__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.about-bio__copy p { color: #6b5b4f; font-size: 1.05rem; max-width: 46ch; }
.about-bio__copy p + p { margin-top: 1rem; }
/* p + p = todo párrafo que viene DESPUÉS de otro párrafo recibe margen arriba. */
.about-bio__note {
  padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 1.4rem; color: #000914 !important;
  /* !important = fuerza este color aunque otra regla lo intente cambiar. */
}
.about-bio__tag {
  display: inline-block;
  margin-top: 1.4rem;
  background: #7f2549; color: #fff !important;
  /* La etiqueta "Lima, Perú · Trabajo remoto" en rojo baya. */
  font-size: .66rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .55rem 1.1rem; border-radius: 999px;
}

/* Grupos (los subtítulos "Trabajo seleccionado", "El proceso", "Servicios") */
.about-group { margin: 0 0 1.6rem; text-align: center; }
.about-group__title {
  font-family: "Dancing Script", "Comic Sans MS", cursive;
  /* Los subtítulos en script cursiva rojo baya. */
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600; color: #7f2549; line-height: 1.1;
}

/* Grilla de cajones (las fotos) */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 columnas de cajones por defecto. */
  gap: 1rem;
  margin-bottom: 3.5rem;
}
.about-panel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f6f1e7;
  aspect-ratio: 4 / 5;
  /* ← CAMBIO: cada cajón es vertical (4:5). */
  display: flex; align-items: flex-end;
}
.about-panel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s;
}
.about-panel:hover img { transform: scale(1.04); }
.about-panel--wide { aspect-ratio: 16 / 10; grid-column: span 1; }
/* ← CAMBIO: los cajones "wide" (Client work, Personal work) son más anchos. */
.about-panel__caption {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%);
  /* Degradado oscuro de abajo hacia arriba para que el texto blanco se lea. */
  color: #fff;
}
.about-panel__caption strong {
  font-family: "Newsreader", "Georgia", serif;
  font-size: 1.15rem; font-weight: 600; line-height: 1.1;
}
.about-panel__caption span {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
/* Cajón solo texto (proceso · pensar) */
.about-panel--quote {
  align-items: flex-start; justify-content: center;
  aspect-ratio: 4 / 5;
  background: #7f2549; color: #fff;
  /* ← CAMBIO: el cajón "02 · Pensar" es rojo baya con texto blanco. */
  padding: 1.6rem;
  flex-direction: column;
}
.about-panel--quote p {
  font-family: "Newsreader", "Georgia", serif;
  font-size: 1.5rem; line-height: 1.2; font-weight: 500;
}
.about-panel--quote strong {
  margin-top: 1.2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  opacity: .9;
}

/* ── CONTACT ───────────────────────────────────────────────────────────── */
.contact { padding: 6rem 2rem; text-align: center; background: #fdf6f0; }
/* La sección de contacto va en beige. */
.contact .eyebrow { color: #7f2549; }
.contact-title {
  font-family: "Newsreader", "Georgia", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500; line-height: 1.05;
  margin-bottom: 1.5rem;
}
.contact-email {
  display: inline-block;
  font-family: "Newsreader", "Georgia", serif;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-style: italic; font-weight: 500;
  color: #000914; border-bottom: 1px solid #7f2549;
  transition: color .2s;
}
.contact-email:hover { color: #7f2549; }
.contact-channels { margin-top: 2rem; display: flex; justify-content: center; gap: 2rem; }
.contact-channels a {
  color: #6b5b4f; text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; font-weight: 600; transition: color .2s;
}
.contact-channels a:hover { color: #000914; }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 1.5rem 2rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  /* ← CAMBIO iOS: margen extra al final para el home indicator. */
}
.footer-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.footer-meta { color: #b0a89e; font-size: .82rem; }

/* ── CART DRAWER (panel lateral del carrito) ───────────────────────────── */
.cart-overlay {
  position: fixed; inset: 0; z-index: 200;
  /* Capa oscura que cubre toda la pantalla cuando el carrito está abierto. */
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .35s;
  /* opacity:0 = invisible por defecto. */
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
/* ← CAMBIO: con la clase is-open, la capa se ve y acepta clics. */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  /* Panel que sale desde la DERECHA, de arriba a abajo. */
  width: min(94vw, 410px);
  background: #fff; border-left: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column;
  transform: translateX(102%);
  /* ← CAMBIO: 102% = está totalmente fuera de pantalla a la derecha. */
  transition: transform .35s;
}
.cart-drawer.is-open { transform: translateX(0); }
/* ← CAMBIO: con is-open se desliza a su lugar (translateX 0). */
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.3rem; border-bottom: 1px solid rgba(0,0,0,.06);
}
.cart-drawer-title {
  font-family: "Newsreader", "Georgia", serif;
  font-size: 1.3rem; font-weight: 600; font-style: italic;
}
.cart-close {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
  color: #6b5b4f; font-size: 1rem; transition: color .2s, border-color .2s;
}
.cart-close:hover { color: #000914; }
.cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.3rem; }
/* flex:1 = esta zona crece para ocupar todo el alto disponible y scrollea. */
.cart-empty { margin: 3rem 0; text-align: center; color: #b0a89e; }
.cart-empty p { font-family: "Newsreader", "Georgia", serif; font-size: 1.1rem; color: #6b5b4f; }

.cart-item {
  display: grid; grid-template-columns: 68px 1fr auto; gap: .8rem;
  /* 3 columnas: miniatura (68px) | info | precio+botón. */
  align-items: center; padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cart-item__thumb {
  width: 68px; height: 68px; overflow: hidden; border-radius: 8px;
  background: #f6f1e7; border: 1px solid rgba(0,0,0,.06);
}
.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name {
  font-family: "Newsreader", "Georgia", serif;
  font-size: .95rem; font-weight: 600; line-height: 1.1;
}
.cart-item__controls { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.qty-btn {
  width: 24px; height: 24px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #6b5b4f; transition: color .2s, border-color .2s;
}
/* Los botones − y + para cambiar la cantidad. */
.qty-btn:hover { color: #000914; }
.qty-value { min-width: 1.3rem; text-align: center; font-size: .85rem; font-weight: 600; }
.cart-item__right { text-align: right; }
.cart-item__line {
  font-family: "Newsreader", "Georgia", serif;
  font-style: italic; font-size: 1rem; font-weight: 600;
}
.cart-item__remove {
  color: #b0a89e; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  margin-top: .3rem; display: block; transition: color .2s;
}
.cart-item__remove:hover { color: #7f2549; }
.cart-footer {
  border-top: 1px solid rgba(0,0,0,.06); padding: 1rem 1.3rem 1.2rem;
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
  /* ← CAMBIO iOS: el botón "Pedir por WhatsApp" no queda pegado al borde. */
}
.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.cart-subtotal-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #6b5b4f; }
.cart-subtotal-value { font-family: "Newsreader", "Georgia", serif; font-size: 1.4rem; font-weight: 600; }
.btn-checkout {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: #7f2549; color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .95rem; border-radius: 999px; transition: all .2s;
}
.btn-checkout:hover { background: #6d1f3f; transform: translateY(-2px); }
.btn-checkout:disabled { opacity: .4; cursor: not-allowed; transform: none; }
/* :disabled = si el carrito está vacío, el botón se ve apagado y no hace nada. */

/* ← CAMBIO: botón "Vaciar carrito" */
.btn-clear {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  background: transparent; color: #6b5b4f;
  font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .6rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08);
  transition: color .2s, border-color .2s; margin-bottom: .6rem;
}
.btn-clear:hover { color: #7f2549; border-color: #7f2549; }
.btn-clear:disabled { opacity: .3; cursor: not-allowed; border-color: rgba(0,0,0,.06); }
.btn-clear svg { width: 15px; height: 15px; }

/* ── TOAST (notificación pequeña) ──────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom)); z-index: 300;
  /* bottom con safe-area = el toast no queda bajo el home indicator de iOS. */
  transform: translate(-50%, 140%);
  /* 140% = está escondido debajo de la pantalla. */
  background: #000914; color: #fff; border: 1px solid rgba(255,255,255,.12);
  padding: .75rem 1.2rem; font-size: .85rem;
  border-radius: 8px; transition: transform .35s; max-width: 92vw;
}
.toast.is-visible { transform: translate(-50%, 0); }
/* ← CAMBIO: con is-visible sube a su lugar y se ve. */
.toast strong { color: #c05b33; }

/* ── MINI CARRUSEL ("Más productos") ──────────────────────────────────── */
/* ← CAMBIO: segundo carrusel con tarjetas más chicas para ver más productos. */
.product-carousel--mini {
  background: #fffdf8;
  /* Fondo un poco más claro que el carrusel principal para diferenciarlo. */
  padding: 1.5rem 0 3rem;
}
.product-carousel--mini .section-header { margin-bottom: 1.4rem; }
.product-carousel--mini .section-header__heading {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: #7f2549;
}
.product-tile--mini { width: clamp(130px, 15vw, 180px); }
.product-tile--mini .product-tile__media img { aspect-ratio: 1 / 1; }
/* ← CAMBIO: en el mini carrusel las fotos son cuadradas y más chicas. */
.product-tile--mini .product-tile__name { font-size: .85rem; min-height: 2em; }
.product-tile--mini .product-tile__price { font-size: .8rem; }
.product-tile--mini .btn-add { font-size: .55rem; padding: .45rem .7rem; }

/* ── PRODUCT DETAIL MODAL ─────────────────────────────────────────────── */
/* ← CAMBIO: modal que se abre al hacer clic en una tarjeta de producto. */
.product-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  visibility: hidden; opacity: 0;
  transition: opacity .3s, visibility .3s;
}
.product-modal.is-open { visibility: visible; opacity: 1; }
.product-modal__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px);
}
.product-modal__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: 90vh; overflow: auto;
  background: #fffdf8;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
  display: grid; grid-template-columns: 1fr 1fr;
  transform: translateY(14px); transition: transform .3s;
}
.product-modal.is-open .product-modal__dialog { transform: translateY(0); }
.product-modal__close {
  position: absolute; top: .6rem; right: .8rem; z-index: 2;
  background: #fff; color: #000914;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background .2s, color .2s;
}
.product-modal__close:hover { background: #7f2549; color: #fff; }
.product-modal__media { background: #f6f1e7; }
.product-modal__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.product-modal__body { padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: .9rem; }
.product-modal__name {
  font-family: "Newsreader", "Georgia", serif;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 600; line-height: 1.15; color: #000914;
}
.product-modal__price { font-size: 1.15rem; font-weight: 700; color: #7f2549; }
.product-modal__desc { font-size: .95rem; line-height: 1.6; color: #33241c; }
.product-modal__features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.product-modal__features li {
  position: relative; padding-left: 1.1rem;
  font-size: .85rem; color: #6b5b4f;
}
.product-modal__features li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #7f2549; font-weight: 700;
}
.product-modal__add { align-self: flex-start; font-size: .72rem; padding: .7rem 1.3rem; }

/* ── RESPONSIVE (adaptación a pantallas) ───────────────────────────────── */
@media (max-width: 1024px) {
  /* Pantallas medianas-grandes (laptops pequeñas): */
  .photo-divider__inner { gap: 2rem; }
  .photo-divider__photo img { width: clamp(150px, 20vw, 210px); height: clamp(150px, 20vw, 210px); }
}

@media (max-width: 960px) {
  /* Pantallas medianas (tablets): */
  .about-bio { grid-template-columns: 1fr; gap: 2rem; padding: 1.6rem; }
  /* La bio pasa a 1 columna: foto arriba, texto abajo. */
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  /* Los cajones pasan de 3 a 2 columnas. */
  .about-panel--wide { aspect-ratio: 4 / 5; }
  /* Los cajones anchos pasan a verticales para que encajen en 2 columnas. */
}

@media (max-width: 620px) {
  /* ← CAMBIO CLAVE: pantallas pequeñas (móviles). */
  .nav-inner { padding: .85rem 1.2rem; gap: .6rem; }
  .nav-links { gap: 1.1rem; }
  .hero-video__cta { margin-bottom: 2rem; padding: .85rem 2rem; font-size: .62rem; }
  .product-carousel { padding: 3rem 0 3.5rem; }
  .product-carousel__inner { padding: 0 1.2rem; }
  .product-carousel__scroller { padding: 1rem 2rem 1.2rem; }
  /* ← CAMBIO: en móvil la separación del borde se reduce a 2rem. */
  .product-carousel__scroller { gap: .9rem; }
  /* Menos espacio entre productos en pantallas chicas. */
  .product-tile { width: 190px; }
  /* Los productos son más angostos en móvil (caben más a la vista). */
  .photo-divider { margin-top: -48px; padding: 2.4rem 1.2rem 1.5rem; }
  .photo-divider__inner { flex-direction: column; text-align: center; gap: 1.2rem; }
  /* ← CAMBIO: en móvil la foto y los datos se apilan en columna centrada. */
  .photo-divider__photo img { width: clamp(140px, 40vw, 180px); height: clamp(140px, 40vw, 180px); border-width: 8px; }
  .photo-divider__meta { justify-content: center; }
  .shop-by { padding: .5rem 1.2rem 3rem; }
  .shop-by__grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  /* ← CAMBIO: en móvil el mosaico pasa a 2 columnas iguales:
     2 categorías arriba y 2 abajo, todas del mismo tamaño. */
  .shop-by__tile--polos     { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; }
  .shop-by__tile--bolsas    { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; }
  .shop-by__tile--tazas     { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; }
  .shop-by__tile--editorial { grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; }
  .product-carousel--mini { padding: 1rem 0 2.2rem; }
  .product-carousel--mini .product-carousel__scroller { padding: .8rem 2rem 1rem; }
  .product-tile--mini { width: 150px; }
  /* ← CAMBIO: el modal pasa a 1 columna en móvil (foto arriba, datos abajo). */
  .product-modal__dialog { grid-template-columns: 1fr; max-height: 85vh; }
  .product-modal__media img { aspect-ratio: 4 / 3; }
  .product-modal__body { padding: 1.4rem 1.25rem; }
  .about { padding: 3rem 1.2rem; }
  .about-grid { grid-template-columns: 1fr; gap: .9rem; }
  /* Los cajones pasan a 1 columna (apilados). */
  .about-panel--wide { aspect-ratio: 4 / 5; }
  .about-bio { padding: 1.2rem; }
  .contact { padding: 4rem 1.2rem; }
  .contact-channels { flex-direction: column; gap: .8rem; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 400px) {
  /* Pantallas MUY chicas (iPhone SE / 360px): */
  .nav-logo { font-size: 1.05rem; }
  .nav-links a { font-size: .62rem; letter-spacing: .1em; }
  .hero-video__cta { padding: .8rem 1.6rem; font-size: .58rem; margin-bottom: 1.5rem; }
  .product-tile { width: 165px; }
  .section-header__heading { font-size: 1.4rem; }
  .about-title { font-size: 1.6rem; }
  .photo-divider { margin-top: -36px; }
  .photo-divider__photo img { width: 130px; height: 130px; border-width: 6px; }
  .about-bio__copy p { font-size: .95rem; }
  .cart-drawer { width: 100vw; }
  /* El carrito ocupa todo el ancho en pantallas muy chicas. */
}