/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --terracotta:   #BF8363;   /* color exacto del fondo del logo (medido en sRGB) */
  --terra-light:  #DEBA9E;   /* derivado claro */
  --terra-pale:   #F2E8DF;   /* derivado muy claro */
  --navy:         #1D3456;
  --navy-dark:    #122039;
  --navy-mid:     #2E4A6E;

  --warm-white:   #FDFAF7;
  --cream:        #F7EDE3;
  --sand:         #EDD5C3;
  --warm-mid:     #9C7B68;

  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:  'Jost', 'Helvetica Neue', sans-serif;

  --header-height: 76px; /* 56px de logo + ~10px de aire arriba/abajo */
  --max-width: 1320px;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 7rem;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: var(--warm-white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
}

.label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* ─── HEADER ───────────────────────────────────────────────── */
/* El fondo terracota hace que el logo se integre sin caja     */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--terracotta);
  transition: box-shadow 0.3s;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* Logo en SVG con fondo transparente y viewBox recortado al propio
   trazo del texto: el height del <img> ya es el tamaño real del
   texto, sin relleno invisible que compensar. */
.nav__logo {
  display: flex;
  align-items: center;
  height: var(--header-height);
  margin-right: 0.75rem;
}

.nav__logo img {
  height: 56px;
  width: auto;
  display: block;
}

.nav__links {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.nav__links a {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.2s;
}

.nav__links a:hover { color: rgba(255,255,255,0.70); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.nav__actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  transition: color 0.2s;
}

.nav__actions button:hover { color: rgba(255,255,255,0.70); }

/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 32px;
  cursor: pointer;
  border: none;
  transition: all 0.25s;
}

.btn--primary {
  background: var(--navy);
  color: var(--warm-white);
}

.btn--primary:hover { background: var(--navy-mid); }

.btn--outline {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}

.btn--outline:hover {
  background: var(--navy);
  color: var(--warm-white);
}

.btn--ghost {
  background: transparent;
  color: var(--warm-mid);
  padding: 0;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--terra-light);
  border-radius: 0;
}

.btn--ghost:hover {
  color: var(--navy);
  border-color: var(--navy);
}

/* ─── HERO ─────────────────────────────────────────────────── */
.hero {
  padding-top: var(--header-height);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
}

.hero__image {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.hero__image img { transition: transform 7s ease; }
.hero__image:hover img { transform: scale(1.04); }

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-lg) var(--spacing-lg);
  background: var(--cream);
}

.hero__eyebrow { margin-bottom: var(--spacing-sm); }

/* El separador "·" acumula el letter-spacing del .label con el espacio
   real que ya lo rodea, haciendo que el hueco se vea más ancho que el
   resto de la frase. Se anula el tracking justo ahí para que se perciba
   uniforme en toda la línea. */
/* Punto dibujado en CSS en vez del carácter "·": así el tamaño y el
   centrado vertical no dependen de cómo la fuente renderice ese glifo. */
.eyebrow__sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 0.1em;
  border-radius: 50%;
  background: currentColor;
  /* vertical-align:middle centra respecto a la x-height (minúsculas),
     no a la altura de las mayúsculas — con texto en uppercase queda
     bajo. Se ajusta con un valor fijo en vez de la palabra clave. */
  vertical-align: 0.2em;
}

.hero__title {
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  color: var(--navy);
  margin-bottom: var(--spacing-md);
}

.hero__title em {
  font-style: italic;
  color: var(--terracotta);
}

.hero__body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--warm-mid);
  max-width: 40ch;
  margin-bottom: var(--spacing-lg);
}

.hero__actions { display: flex; gap: var(--spacing-sm); align-items: center; }

/* ─── SECTION HEADER ───────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.section-header__title { font-size: clamp(2rem, 3.5vw, 3.2rem); }

/* ─── PRODUCTS ─────────────────────────────────────────────── */
.products {
  padding: var(--spacing-xl) 0;
  background: var(--warm-white);
}

.catalog__group {
  border-bottom: 1px solid rgba(29, 52, 86, 0.1);
}

.catalog__parent,
.catalog__standalone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: left;
  transition: color 0.2s;
}

.catalog__parent:hover,
.catalog__standalone:hover { color: var(--terracotta); }

.catalog__standalone.active { color: var(--terracotta); font-weight: 400; }

/* Flecha tipo chevron dibujada en CSS */
.catalog__arrow {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.catalog__parent[aria-expanded="true"] .catalog__arrow {
  transform: rotate(225deg);
}

/* Lista de subcategorías: animada con max-height */
.catalog__children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding-left: 0.5rem;
  list-style: none;
}

.catalog__children.open {
  max-height: 400px;
}

.catalog__sub {
  display: block;
  width: 100%;
  padding: 0.45rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--warm-mid);
  text-align: left;
  transition: color 0.2s;
}

.catalog__sub:hover { color: var(--navy); }

.catalog__sub.active {
  color: var(--terracotta);
  font-weight: 400;
}

/* Flexbox en vez de grid: cuando el filtro muestra pocas tarjetas,
   flex+justify-content:center las centra en vez de dejarlas pegadas
   a la izquierda con hueco muerto. */
.products__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

/* Placeholder para <img onerror="imgFallback(this)">: hereda las clases
   de la imagen original (product-img, active, etc.) para no romper
   carruseles ni grids que dependen de esas clases por JS/CSS. */
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terra-pale);
  color: var(--warm-mid);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.product-card {
  cursor: pointer;
  flex: 0 1 calc(33.333% - 1rem);
}

.product-card__image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 1rem;
}

.product-card__image .product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.6s ease;
}

.product-card__image .product-img.active { opacity: 1; }

.product-card:hover .product-card__image .product-img.active {
  transform: scale(1.04);
}

.product-card__dots {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 2;
  display: flex;
  gap: 5px;
  align-items: center;
}

.product-card__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(253, 250, 247, 0.55);
  transition: all 0.25s;
}

.product-card__dot.active {
  background: var(--terracotta);
  width: 14px;
  border-radius: 3px;
}

.product-card__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: 0.3rem;
  color: var(--navy);
}

.product-card__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; }
.product-card__price { font-size: 0.85rem; color: var(--warm-mid); letter-spacing: 0.04em; }
.product-card__tag   { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra-light); }

.product-card__buy {
  display: block;
  width: 100%;
  background: var(--navy);
  color: var(--warm-white);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 0;
  transition: background 0.25s;
}

.product-card__buy:hover { background: var(--navy-mid); }

.product-card__note {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--warm-mid);
  text-align: center;
  margin-top: 0.45rem;
}

/* Botón "‹ Volver a categorías" encima del grid filtrado */
.products__back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-mid);
  padding: 0;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.products__back-btn:hover { color: var(--navy); }

/* ─── ABOUT ─────────────────────────────────────────────────── */
.about {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about__image {
  overflow: hidden;
  background: var(--sand);
  min-height: 600px;
}

.about__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-xl);
}

.about__title { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: var(--spacing-md); }

.about__body {
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--warm-mid);
  margin-bottom: var(--spacing-md);
}

.about__values {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.about__value {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--warm-mid);
}

.about__value::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* ─── CUSTOM ORDER ──────────────────────────────────────────── */
.custom {
  background: var(--navy-dark);
  color: var(--cream);
  padding: var(--spacing-xl) 0;
  text-align: center;
}

.custom .label { color: var(--terracotta); margin-bottom: var(--spacing-sm); display: block; }

.custom__title {
  font-size: clamp(2.2rem, 4vw, 4rem);
  color: var(--cream);
  margin-bottom: var(--spacing-md);
}

.custom__body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--terra-light);
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: var(--spacing-lg);
}

.custom .btn--outline {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

.custom .btn--outline:hover {
  background: var(--terracotta);
  color: var(--warm-white);
}

/* Formulario de contacto, integrado dentro de la sección oscura
   "Bordado a tu medida" (.custom). El texto de alrededor está
   centrado, pero los campos se leen mejor alineados a la izquierda,
   así que se recentra el bloque como conjunto y se corrige la
   alineación interna. */
.contact__form {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  text-align: left;
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  width: 100%;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.contact__field label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* --warm-mid da solo 4.22:1 sobre --navy-dark (insuficiente para
     texto pequeño); --terracotta da 5.14:1 y ya es el color de
     "label" en el resto de esta sección oscura. */
  color: var(--terracotta);
}

.contact__field input,
.contact__field textarea {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--navy);
  background: var(--warm-white);
  border: 1px solid rgba(29, 52, 86, 0.15);
  padding: 12px 14px;
  transition: border-color 0.2s;
  resize: vertical;
  width: 100%;
}

.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--terracotta);
}

/* El botón de envío reutiliza .btn--outline en vez de .btn--primary:
   el navy sólido de .btn--primary da solo 1.3:1 de contraste contra
   el fondo --navy-dark de esta sección y se volvía casi invisible. */
.contact__form .btn {
  align-self: flex-start;
}

/* Honeypot anti-spam: oculto visualmente (fuera de pantalla,
   no display:none) para que los bots que sí lo detecten lo rellenen
   igualmente y Netlify pueda descartar el envío */
.contact__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── HOW IT WORKS ──────────────────────────────────────────── */
.process {
  padding: var(--spacing-xl) 0;
  background: var(--warm-white);
}

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.process__step {
  text-align: center;
  padding: var(--spacing-md);
}

.process__number {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  color: var(--terra-pale);
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.process__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.process__desc {
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--warm-mid);
}

/* ─── INSTAGRAM ─────────────────────────────────────────────── */
.instagram {
  padding: var(--spacing-xl) 0;
  background: var(--cream);
}

.instagram__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: var(--spacing-lg);
}

.instagram__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sand);
  position: relative;
  cursor: pointer;
}

.instagram__item img { transition: transform 0.5s ease; }
.instagram__item:hover img { transform: scale(1.06); }

.instagram__overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 32, 57, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.instagram__item:hover .instagram__overlay { opacity: 1; }

.instagram__icon {
  color: white;
  font-size: 1.4rem;
  letter-spacing: 0;
}

/* ─── TESTIMONIALS ──────────────────────────────────────────── */
.testimonials {
  padding: var(--spacing-xl) 0;
  background: var(--navy-dark);
  color: var(--cream);
}

.testimonials .label { color: var(--terracotta); }
.testimonials .section-header__title { color: var(--cream); }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.testimonial {
  padding: var(--spacing-md);
  border: 1px solid rgba(201, 122, 82, 0.2);
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--cream);
  margin-bottom: var(--spacing-md);
}

.testimonial__quote::before { content: '\201C'; color: var(--terracotta); }
.testimonial__quote::after  { content: '\201D'; color: var(--terracotta); }

.testimonial__author {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra-light);
}

.testimonial__stars {
  color: var(--terracotta);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

/* ─── FOOTER ───────────────────────────────────────────────── */
footer {
  background: var(--terracotta);
  color: var(--warm-white);
  padding: 2.5rem 0 1.5rem;
}

.footer__grid {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer__logo img {
  height: 80px;
  width: auto;
  margin-bottom: 0.5rem;
}

.footer__brand-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(253, 250, 247, 0.80);
  max-width: 24ch;
  margin-bottom: 0;
}

.footer__social { display: flex; gap: var(--spacing-sm); }

.footer__social a {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253, 250, 247, 0.75);
  border: 1px solid rgba(253, 250, 247, 0.3);
  padding: 6px 12px;
  transition: all 0.25s;
}

.footer__social a:hover {
  color: var(--warm-white);
  border-color: var(--warm-white);
}

.footer__col-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-white);
  margin-bottom: var(--spacing-md);
}

.footer__links { display: flex; flex-direction: column; gap: 10px; }

.footer__links a {
  font-size: 0.82rem;
  color: rgba(253, 250, 247, 0.70);
  transition: color 0.2s;
}

.footer__links a:hover { color: var(--warm-white); }

.footer__bottom {
  border-top: 1px solid rgba(253, 250, 247, 0.2);
  padding-top: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__copy {
  font-size: 0.72rem;
  color: rgba(253, 250, 247, 0.60);
  letter-spacing: 0.06em;
}

/* ─── HAMBURGER BUTTON ─────────────────────────────────────── */
/* Visible siempre, en cualquier ancho de pantalla              */
.nav__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 201;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
}

.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── NAV PANEL ────────────────────────────────────────────── */
/* Panel que se abre desde la hamburguesa, anclado a la izquierda,
   tanto en desktop como en móvil. Reemplaza el antiguo mobile-menu. */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  visibility: hidden;
}

.nav-panel.open {
  pointer-events: all;
  visibility: visible;
}

.nav-panel__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 32, 57, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nav-panel.open .nav-panel__backdrop { opacity: 1; }

.nav-panel__drawer {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  width: min(460px, calc(100vw - 2rem));
  height: 100%;
  background: var(--warm-white);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.nav-panel.open .nav-panel__drawer { transform: translateX(0); }

/* Logo en cabecera del panel */
.nav-panel__brand {
  flex-shrink: 0;
  height: var(--header-height);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(29, 52, 86, 0.08);
}

/* Botón × para cerrar el panel */
.nav-panel__close {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(29, 52, 86, 0.4);
  font-size: 1.5rem;
  line-height: 1;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.nav-panel__close:hover { color: var(--navy); }

.nav-panel__brand a {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-panel__brand img {
  height: 48px;
  width: auto;
}

/* Contenido desplazable */
.nav-panel__content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2.5rem 3rem;
}

.nav-panel__content::-webkit-scrollbar { display: none; }

/* Nosotros y Contacto al pie del panel */
.nav-panel__footer-nav {
  margin-top: 2rem;
  padding-top: 0;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.nav-panel__footer-nav a {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-mid);
  transition: color 0.2s;
}

.nav-panel__footer-nav a:hover { color: var(--navy); }

/* Social al pie del panel */
.nav-panel__social {
  padding-top: 0;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.nav-panel__social a {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(29, 52, 86, 0.35);
  transition: color 0.2s;
}

.nav-panel__social a:hover { color: var(--warm-mid); }

/* ─── RESPONSIVE — TABLET ──────────────────────────────────── */
@media (max-width: 1024px) {
  .product-card       { flex-basis: calc(50% - 0.75rem); }
  .process__grid     { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid{ grid-template-columns: repeat(2, 1fr); }
  /* .footer__grid is now flexbox — no grid-template override needed */
}

/* ─── RESPONSIVE — MÓVIL ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Espaciados reducidos en móvil */
  :root {
    --spacing-xl: 3.5rem;
    --spacing-lg: 2.2rem;
    --spacing-md: 1.2rem;
    --spacing-sm: 0.85rem;
  }

  .container { padding-inline: 1.1rem; }

  /* ── Nav ── (hamburguesa siempre visible, nav__links eliminado del HTML) */

  /* ── Hero ── */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__image { aspect-ratio: 4 / 3; min-height: 260px; }
  .hero__content {
    padding: 2.2rem 1.1rem 2.5rem;
    order: 2;
  }
  .hero__image { order: 1; }
  .hero__title {
    font-size: clamp(2rem, 9vw, 2.8rem);
    margin-bottom: 1rem;
  }
  .hero__body {
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
    max-width: 100%;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero__actions .btn--primary {
    text-align: center;
    justify-content: center;
  }
  .hero__actions .btn--ghost {
    text-align: center;
    justify-content: center;
    padding-block: 0.5rem;
  }

  /* ── Section header ── */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  /* ── Productos: 2 columnas en móvil ── */
  .products__grid { gap: 0.75rem; }
  .product-card { flex-basis: calc(50% - 0.375rem); }
  .product-card__name { font-size: 1rem; }
  .product-card__price { font-size: 0.78rem; }
  .product-card__tag { display: none; }

  /* ── About ── */
  .about { grid-template-columns: 1fr; }
  .about__image { min-height: 280px; aspect-ratio: 4 / 3; }
  .about__content { padding: 2.2rem 1.1rem; }
  .about__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }

  /* ── Process ── */
  .process__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .process__step { padding: 1.1rem 0.75rem; }
  .process__number { font-size: 2.4rem; }
  .process__desc { font-size: 0.78rem; }

  /* ── Custom ── */
  .custom__title { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .custom__body  { font-size: 0.88rem; }
  .custom .btn--outline {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  /* ── Contact ── */
  .contact__row { grid-template-columns: 1fr; }
  .contact__form .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Testimonios: 1 columna ── */
  .testimonials__grid { grid-template-columns: 1fr; }
  .testimonial { padding: 1.2rem; }
  .testimonial__quote { font-size: 1rem; }

  /* ── Footer ── */
  .footer__grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer__logo img { height: 64px; }
  .footer__brand-desc { max-width: 100%; font-size: 0.8rem; }
  .footer__bottom {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }

  /* ── Botones táctiles: área mínima 44px ── */
  .btn { min-height: 44px; }
  .nav__actions button { min-height: 44px; min-width: 44px; }
}

/* ─── PRODUCT DETAIL PAGE ──────────────────────────────────── */
.detail-page {
  padding-top: var(--header-height);
}

/* Migas de pan */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-mid);
  padding: 1.5rem 0 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: '/';
  padding: 0 0.5rem;
  color: var(--terra-light);
}

.breadcrumb a { color: var(--warm-mid); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb [aria-current="page"] { color: var(--navy); }

/* Layout de dos columnas: galería + info */
.detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) 0 var(--spacing-xl);
}

/* Imagen principal */
.detail__main-img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--sand);
}

.detail__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Flechas de navegación entre fotos, superpuestas sobre la imagen principal */
.detail__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: rgba(253, 250, 247, 0.7);
  backdrop-filter: blur(2px);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  z-index: 2;
}

.detail__nav:hover { background: rgba(253, 250, 247, 0.92); }

.detail__nav svg { width: 18px; height: 18px; display: block; }

.detail__nav--prev { left: 0.75rem; }
.detail__nav--next { right: 0.75rem; }

/* Miniaturas */
.detail__thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.detail__thumb {
  flex: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sand);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s;
}

.detail__thumb.active,
.detail__thumb:hover { opacity: 1; }

.detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Columna de información */
.detail__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1rem;
}

.detail__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin-top: 0.5rem;
  margin-bottom: var(--spacing-md);
}

.detail__desc {
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 44ch;
  margin-bottom: var(--spacing-md);
}

.detail__price-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--spacing-md);
}

.detail__price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
}

/* El CTA no debe estirarse al ancho de .detail__info (que por defecto
   hace stretch en cross-axis); así queda del mismo tamaño que los
   botones .btn del resto del sitio (p. ej. hero__actions). */
.detail__info .btn {
  align-self: flex-start;
  justify-content: center;
}

.detail__note {
  font-size: 0.78rem;
  color: var(--warm-mid);
  margin-top: 0.75rem;
}

/* Cursor indicativo en tarjetas de producto con detalle propio */
.product-card[data-detail-href] { cursor: pointer; }

/* Placeholder cuando no hay foto real en la página de detalle */
.detail__main-img .img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--sand);
  color: var(--warm-mid);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .detail {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding-top: 0.5rem;
    padding-bottom: var(--spacing-lg);
  }

  .detail__info { padding-top: 0; }

  .detail__desc { max-width: 100%; }
}