/* ============================================================================
   TOCA MADERA — style.css
   ============================================================================
   Todos los estilos del sitio. Se carga desde index.html con:
     <link rel="stylesheet" href="css/style.css">

   ORGANIZACIÓN (usá Ctrl+F para saltar a cada sección):
   1. VARIABLES GLOBALES (colores, tipografías, medidas)
   2. RESET Y BODY (estilos base)
   3. NAVBAR Y MENÚ MOBILE
   4. HERO (primera sección)
   5. MARQUEE (tira animada)
   6. CATEGORÍAS (grilla de 8 ambientes)
   7. PRODUCTOS (destacados)
   8. MEDIDA (formulario de cotización)
   9. TALLER
   10. CONTACTO
   11. FOOTER Y BOTÓN WHATSAPP FLOTANTE
   12. RESPONSIVE (media queries para mobile)

   RUTAS DE IMÁGENES:
   Como este archivo está en /css/ y las imágenes en /img/, todas las
   rutas son relativas con "../img/". Ejemplo:
     background-image: url('../img/hero-mueble.jpg');
============================================================================ */

/* ============================================================================
   VARIABLES GLOBALES (la "paleta" del sitio)
   ============================================================================
   Cambiar acá cualquier color afecta TODO el sitio de una vez.
   Por ejemplo, si querés que el "nogal" (color de acento principal) sea
   más rojizo, cambiás --walnut: #5C3D1F por #6B3D1F y ya. */
:root {
  /* Colores de fondo */
  --cream:       #F4EDE0;   /* fondo principal del sitio (crema cálido) */
  --cream-deep:  #EDE3D2;   /* fondo de secciones alternadas */
  --paper:       #FAF6EC;   /* fondo de tarjetas (más claro que el cream) */

  /* Colores de madera (para acentos) */
  --oak:         #B8945F;   /* roble medio (color cálido suave) */
  --oak-deep:    #8B6B3D;   /* roble profundo */
  --walnut:      #5C3D1F;   /* nogal oscuro - el COLOR DE ACENTO PRINCIPAL */

  /* Colores de texto */
  --ink:         #1C1814;   /* texto principal (negro cálido) */
  --graphite:    #3E3933;   /* texto secundario */
  --mist:        #7A7268;   /* texto suave / hints */
  --hairline:    #DDD2BD;   /* bordes finos / divisores */

  /* Tipografías (referencias a las cargadas arriba) */
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans:  'Outfit', system-ui, sans-serif;

  /* Curvas de animación (para que todo se sienta "natural") */
  --ease:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Espacio vertical estándar entre secciones (responsivo: 5rem en mobile, 9rem en desktop) */
  --section-y: clamp(5rem, 10vw, 9rem);

  /* Ancho máximo del contenedor de contenido y márgenes laterales */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--walnut); color: var(--cream); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--walnut);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--walnut);
}

/* NAVBAR */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 60px;
  background: rgba(244, 237, 224, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav.scrolled { border-color: var(--hairline); background: rgba(244, 237, 224, 0.97); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow: visible;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  /* Permite que el logo sobresalga del navbar sin agrandarlo */
  position: relative;
  z-index: 1;
  /* Empuja el logo hacia abajo para que sobresalga solo por abajo, no por arriba */
  transform: translateY(30px);
  /* Achique fluido: se anima con transform (lo procesa la placa de video),
     no con height, que obliga al navegador a recalcular toda la página. */
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Al scrollear (clase .scrolled que agrega main.js), el logo se achica al 40%
   y queda DENTRO de la barra. Para que quede más grande/chico, cambiá el 0.4. */
.nav.scrolled .logo { transform: translateY(0) scale(0.4); }

.logo-img { 
  /* CAMBIÁ ESTE NÚMERO PARA AGRANDAR/ACHICAR EL LOGO DEL NAVBAR.
     La barra del navbar mantiene su altura fija (82px), el logo solo
     sobresalde si supera ese tamaño. */
  height: 120px; 
  width: auto; 
  display: block; 
  transition: transform 0.3s var(--ease);
}
.logo:hover .logo-img { transform: rotate(-5deg); }

/* LOGO DEL FOOTER: anula el corrimiento hacia abajo que usa el del navbar
   (ese translateY es solo para que sobresalga de la barra de arriba) */
footer .logo { transform: none; margin-bottom: 1.5rem; }
footer .logo-img { height: 84px; }

.logo-placeholder {
  width: 48px;
  height: 48px;
  position: relative;
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}
.logo-text small {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 0.25rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--graphite);
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  background: var(--ink);
  color: var(--cream) !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: 999px;
  font-weight: 500 !important;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--walnut); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 200;
}
.nav-toggle span {
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), top 0.4s var(--ease), opacity 0.3s var(--ease);
  transform-origin: center;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 23px; }

/* Cuando está abierto: forma una X */
body.menu-open .nav-toggle span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}
body.menu-open .nav-toggle span:nth-child(2) {
  top: 19px;
  transform: rotate(-45deg);
}

/* MENÚ MOBILE OVERLAY */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--cream);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
  padding: 6rem 2rem 3rem;
}
body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
}
body.menu-open { overflow: hidden; }

.mobile-menu a {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 0.5rem 0;
  position: relative;
  transform: translateY(20px);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.2s var(--ease);
}
.mobile-menu a:hover { color: var(--walnut); font-style: italic; }

body.menu-open .mobile-menu a {
  opacity: 1;
  transform: translateY(0);
}
body.menu-open .mobile-menu a:nth-child(1) { transition-delay: 0.15s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.22s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.29s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.36s; }
body.menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.43s; }

.mobile-menu .mobile-cta {
  margin-top: 2rem;
  font-size: 0.95rem;
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal !important;
  background: var(--ink);
  color: var(--cream);
  padding: 1rem 2rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.mobile-menu .mobile-cta:hover {
  background: var(--walnut);
  color: var(--cream);
}

.mobile-menu-footer {
  position: absolute;
  bottom: 2rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--mist);
  font-family: var(--sans);
}

/* HERO */
.hero {
  /* padding-top: deja lugar al logo que sobresale del navbar (termina a ~120px).
     Si agrandás/achicás el logo (.logo-img), ajustá este 160px. */
  padding: 160px 0 var(--section-y);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  min-height: 75vh;
}

.hero-content { animation: fadeUp 1.1s var(--ease-out) 0.2s both; }
.hero h1 {
  font-size: clamp(2.75rem, 7vw, 5.8rem);
  margin: 1.5rem 0 1.75rem;
  letter-spacing: -0.025em;
}
.hero h1 .italic {
  font-style: italic;
  font-weight: 300;
  color: var(--walnut);
}

.hero-lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--graphite);
  max-width: 480px;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  border: 1px solid transparent;
}

.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover {
  background: var(--walnut);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(92, 61, 31, 0.5);
}
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

.arrow { transition: transform 0.3s var(--ease); }

.hero-visual {
  position: relative;
  height: 75vh;
  min-height: 500px;
  animation: fadeUp 1.1s var(--ease-out) 0.4s both;
}
.hero-image {
  position: absolute;
  inset: 0;
  background:
    /* Si la imagen no existe, queda solo el degradé fallback */
    linear-gradient(135deg, transparent 30%, rgba(92, 61, 31, 0.12) 100%),
    linear-gradient(180deg, #c9a876 0%, #8b6b3d 100%);
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  overflow: hidden;
}
/* Cuando exista hero-mueble.jpg, se aplica esta capa encima */
.hero-image.has-photo {
  background-image: url('../img/hero-mueble.jpg');
  background-size: cover;
  background-position: center;
}
.hero-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(92deg, rgba(40, 25, 15, 0.08) 0px, transparent 1px, transparent 4px, rgba(40, 25, 15, 0.06) 6px, transparent 8px, transparent 18px),
    radial-gradient(ellipse at 30% 40%, rgba(40, 25, 15, 0.18), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(40, 25, 15, 0.12), transparent 60%);
  mix-blend-mode: multiply;
}
/* Cuando hay foto real, escondemos las vetas decorativas */
.hero-image.has-photo::before { display: none; }
.hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.2) 100%);
}

.hero-emblem {
  /* Emblema circular que gira sobre la esquina superior derecha de la foto.
     TAMAÑO: cambiá width/height (van siempre iguales).
     POSICIÓN: top/right negativos lo hacen "salir" de la foto. */
  position: absolute;
  top: -5%;
  right: -4%;
  width: 260px;
  height: 260px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.3));
  animation: rotate 60s linear infinite;
  z-index: 2;
}
.hero-emblem img { width: 100%; height: 100%; object-fit: contain; }

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: var(--paper);
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  max-width: 240px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.25);
  animation: fadeUp 1s var(--ease-out) 0.9s both;
  z-index: 3;
}
.hero-badge-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--walnut);
  line-height: 1;
}
.hero-badge-text {
  font-size: 0.78rem;
  color: var(--graphite);
  margin-top: 0.5rem;
  line-height: 1.4;
}

.marquee {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1.5rem 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--cream);
}
.marquee-track {
  display: inline-flex;
  gap: 3rem;
  animation: scroll 40s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--mist);
}
.marquee-track span { display: inline-flex; align-items: center; gap: 3rem; }
.marquee-track span::after {
  content: '✦';
  color: var(--oak);
  font-style: normal;
  font-size: 0.8rem;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

section { padding: var(--section-y) 0; position: relative; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
}
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.section-head h2 .it {
  font-style: italic;
  font-weight: 300;
  color: var(--walnut);
}
.section-head-meta {
  font-size: 1rem;
  color: var(--graphite);
  max-width: 380px;
  justify-self: end;
}

/* CATEGORÍAS */
.categorias { background: var(--cream-deep); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.cat-card {
  background: var(--cream);
  padding: 2rem;
  cursor: pointer;
  transition: background 0.4s var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  overflow: hidden;
  isolation: isolate;
}
/* Cada categoría tiene su imagen de fondo opcional. La aplicamos en el ::before de abajo para poder hacer zoom sutil. */

.cat-card[class*="cat-"] {
  /* Quitamos el background-image directo, lo vamos a poner en un pseudo-element para poder hacer scale */
  background-image: none !important;
  background-color: var(--cream-deep);
  padding: 1.25rem;
  position: relative;
}
/* La foto va en un pseudo-element ::before que SÍ puede escalar con transform */
.cat-card[class*="cat-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  transition: transform 0.8s var(--ease-out);
  transform-origin: center;
}
/* Cada categoría apunta su imagen al ::before */
.cat-card.cat-living::before    { background-image: url('../img/categorias/cat-living.jpg'); }
.cat-card.cat-comedor::before   { background-image: url('../img/categorias/cat-comedor.jpg'); }
.cat-card.cat-dormitorio::before{ background-image: url('../img/categorias/cat-dormitorio.jpg'); }
.cat-card.cat-cocina::before    { background-image: url('../img/categorias/cat-cocina.jpg'); }
.cat-card.cat-oficina::before   { background-image: url('../img/categorias/cat-oficina.jpg'); }
.cat-card.cat-infantil::before  { background-image: url('../img/categorias/cat-infantil.jpg'); }
.cat-card.cat-auxiliares::before{ background-image: url('../img/categorias/cat-auxiliares.jpg'); }
.cat-card.cat-exterior::before  { background-image: url('../img/categorias/cat-exterior.jpg'); }

/* Hover: la foto hace un zoom muy sutil (+4%) */
.cat-card[class*="cat-"]:hover::before {
  transform: scale(1.04);
}
/* Sin velo general — la foto se ve limpia */
.cat-card[class*="cat-"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: -1;
  transition: background 0.5s var(--ease);
  pointer-events: none;
}
/* Hover: foto se oscurece muy sutilmente */
.cat-card[class*="cat-"]:hover::after {
  background: rgba(28, 24, 20, 0.2);
}

/* Número arriba a la izquierda, sutil sobre la foto */
.cat-card[class*="cat-"] .cat-num {
  color: var(--cream);
  border-color: rgba(244, 237, 224, 0.7);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow: none;
  font-size: 0.78rem;
  width: 28px;
  height: 28px;
}

/* LABEL editorial: angosta, fondo crema, pegada al borde izquierdo abajo */
.cat-card[class*="cat-"] .cat-name {
  background: var(--cream);
  border-radius: 0;
  padding: 0.65rem 0.9rem 0.65rem 1rem;
  /* Pegada al borde izquierdo de la card (sale del padding) */
  margin-left: -1.25rem;
  margin-top: auto;
  width: fit-content;
  max-width: calc(100% + 0.75rem);
  min-height: auto;
  gap: 0.15rem;
  /* Sombra sutil para despegarla de la foto */
  box-shadow: 2px 4px 14px -6px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.5s var(--ease-out),
    background 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
  transform-origin: left center;
  position: relative;
}

/* Tipografía dentro de la label */
.cat-card[class*="cat-"] .cat-name .cat-title {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.05;
}
.cat-card[class*="cat-"] .cat-name .it {
  color: var(--walnut);
  font-size: 0.68rem;
  line-height: 1.25;
}

/* Animación hover: la label se desliza un poco hacia la derecha */
.cat-card[class*="cat-"]:hover .cat-name {
  transform: translateX(6px);
  background: var(--ink);
  box-shadow: 2px 6px 18px -6px rgba(0, 0, 0, 0.45);
}
.cat-card[class*="cat-"]:hover .cat-name .cat-title { color: var(--cream); }
.cat-card[class*="cat-"]:hover .cat-name .it { color: var(--oak); }

.cat-card:hover { background-color: var(--ink); }
/* Para las cards SIN foto (fallback), aplica el hover normal */
.cat-card:not([class*="cat-"]):hover .cat-num,
.cat-card:not([class*="cat-"]):hover .cat-name,
.cat-card:not([class*="cat-"]):hover .cat-name .cat-title,
.cat-card:not([class*="cat-"]):hover .cat-name .it { color: var(--cream) !important; }
.cat-card:not([class*="cat-"]):hover .cat-num { border-color: var(--cream); }

.cat-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mist);
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
  flex-shrink: 0;
  align-self: flex-start;
}
/* Espaciador flexible entre el número (arriba) y el nombre (abajo) para que el nombre quede alineado siempre en el mismo punto */
.cat-card::before {
  content: '';
  flex: 1;
}
.cat-name {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--ink);
  /* Altura fija de 2 líneas para que todos los textos se alineen igual */
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 3.2em;
  justify-content: flex-end;
}
.cat-name .cat-title {
  font-weight: 500;
  display: block;
}
.cat-name .it {
  font-style: italic;
  font-weight: 300;
  color: var(--walnut);
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
}

/* PRODUCTOS */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.product { cursor: pointer; transition: transform 0.5s var(--ease); }
.product:hover { transform: translateY(-6px); }

.product-image {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-bottom: 1.25rem;
  background: var(--cream-deep);
}

.product-image.p1 { 
  background: radial-gradient(ellipse at 50% 60%, #b8956a 0%, #8a6c4d 70%, #5a4530 100%);
  background-image: url('../img/productos/producto-1.jpg'), radial-gradient(ellipse at 50% 60%, #b8956a 0%, #8a6c4d 70%, #5a4530 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.product-image.p2 { 
  background: radial-gradient(ellipse at 50% 60%, #d8c4a3 0%, #a89171 70%, #6e5c47 100%);
  background-image: url('../img/productos/producto-2.jpg'), radial-gradient(ellipse at 50% 60%, #d8c4a3 0%, #a89171 70%, #6e5c47 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.product-image.p3 { 
  background: radial-gradient(ellipse at 50% 60%, #e8dcc8 0%, #c4b39a 70%, #8a7860 100%);
  background-image: url('../img/productos/producto-3.jpg'), radial-gradient(ellipse at 50% 60%, #e8dcc8 0%, #c4b39a 70%, #8a7860 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.product-image.p4 { 
  background: radial-gradient(ellipse at 50% 60%, #a8845c 0%, #7a5e3f 70%, #4a3825 100%);
  background-image: url('../img/productos/producto-4.jpg'), radial-gradient(ellipse at 50% 60%, #a8845c 0%, #7a5e3f 70%, #4a3825 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.product-image.p5 { 
  background: radial-gradient(ellipse at 50% 60%, #d4b896 0%, #a08862 70%, #6c5840 100%);
  background-image: url('../img/productos/producto-5.jpg'), radial-gradient(ellipse at 50% 60%, #d4b896 0%, #a08862 70%, #6c5840 100%);
  background-size: cover, cover;
  background-position: center, center;
}
.product-image.p6 { 
  background: radial-gradient(ellipse at 50% 60%, #e0d2b8 0%, #b09980 70%, #786348 100%);
  background-image: url('../img/productos/producto-6.jpg'), radial-gradient(ellipse at 50% 60%, #e0d2b8 0%, #b09980 70%, #786348 100%);
  background-size: cover, cover;
  background-position: center, center;
}

.product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(40, 25, 15, 0.07) 0px, transparent 1px, transparent 5px, rgba(40, 25, 15, 0.06) 7px, transparent 9px, transparent 22px);
  mix-blend-mode: multiply;
}
/* Cuando la card tiene foto real, escondemos las vetas decorativas */
.product-image.has-photo::before { display: none; }

.product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.15) 100%);
  transition: opacity 0.4s var(--ease);
}
.product:hover .product-image::after { opacity: 0.5; }

.product-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--paper);
  color: var(--ink);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}
.product-tag.maciza { background: var(--ink); color: var(--cream); }

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.product-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.product-meta { font-size: 0.82rem; color: var(--mist); }
.product-price {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  white-space: nowrap;
}

.section-cta { text-align: center; margin-top: 4rem; }

/* MEDIDA */
.medida {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.medida h2 { color: var(--cream); }
.medida .eyebrow { color: var(--oak); }
.medida .eyebrow::before { background: var(--oak); }

.medida-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}

.medida-content h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  margin: 1.5rem 0 1.5rem;
}
.medida-content h2 .it {
  font-style: italic;
  font-weight: 300;
  color: var(--oak);
}
.medida-lede {
  font-size: 1.05rem;
  color: rgba(244, 237, 224, 0.7);
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.steps { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(244, 237, 224, 0.1);
}
.step:last-child { border-bottom: none; }
.step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--oak);
  width: 36px;
  flex-shrink: 0;
}
.step-text strong {
  display: block;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--cream);
}
.step-text span {
  font-size: 0.9rem;
  color: rgba(244, 237, 224, 0.6);
  line-height: 1.5;
}

.form-card {
  background: var(--paper);
  color: var(--ink);
  padding: 2.5rem;
  border-radius: 6px;
  position: relative;
}
.form-card h3 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.form-card p.hint {
  font-size: 0.85rem;
  color: var(--mist);
  margin-bottom: 2rem;
}

.form-row { margin-bottom: 1.25rem; }
.form-row.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.form-row label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--graphite);
  margin-bottom: 0.5rem;
}
.form-row label .req { color: var(--walnut); }

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--cream);
}
.form-row textarea { resize: vertical; min-height: 110px; font-family: var(--sans); }

.form-submit { width: 100%; margin-top: 0.5rem; justify-content: center; }

.form-success {
  display: none;
  background: var(--cream-deep);
  border: 1px solid var(--oak);
  border-radius: 4px;
  padding: 1.25rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--ink);
}
.form-success.visible { display: block; }

/* === DIVISOR "O" ENTRE EL FORM Y EL BOTÓN DE WHATSAPP =====================
   Línea horizontal con la palabra "o" en el medio, para separar visualmente
   las dos opciones (formulario formal vs. mensaje rápido por WhatsApp). */
.form-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 1.25rem;
  color: var(--mist);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
}
.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* === BOTÓN ALTERNATIVO DE WHATSAPP =========================================
   Botón verde con el ícono oficial de WhatsApp. Sirve como "puerta secundaria"
   para los clientes que prefieren conversar antes que llenar un formulario.
   El número está en el href del HTML (buscar "5491151326688"). */
.btn-whatsapp-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: #25D366;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 1rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.btn-whatsapp-alt:hover {
  background: #1ea952;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.5);
  color: white;
}
.btn-whatsapp-alt svg {
  flex-shrink: 0;
}

/* TALLER */
.taller-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.taller-img {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #c4a37a 0%, #5c3d1f 100%);
  background-image: url('../img/taller.jpg'), linear-gradient(135deg, #c4a37a 0%, #5c3d1f 100%);
  background-size: cover, cover;
  background-position: center, center;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.taller-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(87deg, rgba(40, 25, 15, 0.1) 0px, transparent 1px, transparent 6px, rgba(40, 25, 15, 0.08) 8px, transparent 10px, transparent 24px),
    radial-gradient(ellipse at 40% 30%, rgba(40,25,15,0.25), transparent 50%);
  mix-blend-mode: multiply;
}
/* Cuando hay foto real, escondemos las vetas decorativas */
.taller-img.has-photo::before { display: none; }

.taller-content h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 1.5rem 0;
}
.taller-content h2 .it {
  font-style: italic;
  font-weight: 300;
  color: var(--walnut);
}
.taller-content p {
  color: var(--graphite);
  margin-bottom: 1.25rem;
  font-size: 1.02rem;
  line-height: 1.75;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
}
.stat-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--walnut);
  line-height: 1;
}
.stat-label {
  font-size: 0.74rem;
  color: var(--mist);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

/* CONTACTO */
.contacto {
  background: var(--cream-deep);
  text-align: center;
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
}

.contacto::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  pointer-events: none;
}
.contacto::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.5;
}

.contacto h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 900px;
  margin: 1.5rem auto 2.5rem;
}
.contacto h2 .it {
  font-style: italic;
  font-weight: 300;
  color: var(--walnut);
}

.contacto-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.contacto-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.contacto-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--graphite);
  text-decoration: none;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}

.contacto-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease);
  z-index: 0;
}

.contacto-card:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.2);
}
.contacto-card:hover::before { transform: translateY(0); }
.contacto-card:hover * { color: var(--cream); position: relative; z-index: 1; }
.contacto-card:hover .contacto-icon { border-color: var(--cream); }

.contacto-card > * { position: relative; z-index: 1; }

.contacto-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transition: border-color 0.4s var(--ease);
  flex-shrink: 0;
}
.contacto-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contacto-card strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.contacto-card-body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--graphite);
}
.contacto-card-body span { display: block; }
.contacto-card-body .small {
  font-size: 0.78rem;
  color: var(--mist);
  margin-top: 0.4rem;
}

/* FOOTER */
footer {
  background: var(--ink);
  color: var(--cream);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand .logo-text { color: var(--cream); }
.footer-brand .logo-text small { color: var(--oak); }
.footer-brand p {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: rgba(244, 237, 224, 0.6);
  max-width: 280px;
  line-height: 1.6;
}
.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.25rem;
  color: var(--oak);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
  font-size: 0.9rem;
  color: rgba(244, 237, 224, 0.7);
  transition: color 0.2s var(--ease);
}
.footer-col a:hover { color: var(--oak); }

.footer-bottom {
  border-top: 1px solid rgba(244, 237, 224, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(244, 237, 224, 0.5);
  flex-wrap: wrap;
  gap: 1rem;
}

/* WHATSAPP */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 99;
  box-shadow: 0 8px 24px -8px rgba(37, 211, 102, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  animation: wa-pulse 2.5s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, 0.8);
}
.whatsapp-float svg { width: 28px; height: 28px; fill: white; }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(37, 211, 102, 0.6), 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 8px 24px -8px rgba(37, 211, 102, 0.6), 0 0 0 14px rgba(37, 211, 102, 0); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { height: 60vh; min-height: 400px; }
  .hero-emblem { width: 140px; height: 140px; right: -3%; top: -4%; }
  .section-head { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-head-meta { justify-self: start; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .productos-grid { grid-template-columns: 1fr 1fr; }
  .medida-grid, .taller-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .contacto::before { width: 400px; height: 400px; }
  .contacto::after { width: 550px; height: 550px; }
}

@media (max-width: 700px) {
  .contacto-info { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 560px) {
  .productos-grid { grid-template-columns: 1fr; }
  .form-row.split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .logo-img { height: 80px; }
  footer .logo-img { height: 64px; }
  .hero { padding-top: 130px; }
  .nav.scrolled .logo { transform: translateY(0) scale(0.55); }
}