/* ================================================
   ROVIR — style.css
   Tipografía (según Rovir_Brand Book.pdf): Zilla Slab (títulos/logo)
   + Archivo (cuerpo/nav — reemplazo libre de Akzidenz Grotesk BQ Extended,
   que es una fuente paga sin licencia web disponible; si en algún momento
   se consigue el archivo con licencia, reemplazar el @import y --font-body).
   Paleta (Brand Book): verde Pantone 349 #005A2F, dorado Pantone 871C #978460
   (uso acotado, solo detalles/acentos — el brand book lo reserva para casos
   excepcionales de impresión), navbar #f0f0f3 / texto #1a1a1a / footer #444
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Zilla+Slab:wght@400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --font-heading: 'Zilla Slab', serif;
  --font-body:    'Archivo', sans-serif;

  --color-bg:          #ffffff;
  --color-nav:         #f0f0f3;
  --color-text:        #1a1a1a;
  --color-text-muted:  #444444;
  --color-border:      #e0e0e0;
  --color-green:       #005a2f;
  --color-gold:        #978460;
  --color-footer:      #444444;
  --color-btn:         #1a1a1a;
  --color-btn-hover:   #333333;

  --max-width: 1280px;
  --section-pad: 80px;
  --nav-height: 64px;
}

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

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  background-color: #e8e8e8; /* placeholder cuando la imagen no carga */
}

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

ul { list-style: none; }

/* ── Tipografía base ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 1.15;
}

p {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ── Layout container ── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* ════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════ */
#site-header {
  background: var(--color-nav);
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-nav);
  border-bottom: 1px solid var(--color-border);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.navbar-logo a {
  display: block;
  line-height: 0;
}

.navbar-logo img {
  height: 56px;
  width: auto;
  background: transparent;
}

/* ── Nav links ── */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar-links > li {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text);
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.nav-link:hover,
.nav-item--dropdown.open > .nav-link {
  background: rgba(0, 0, 0, 0.06);
}

.nav-link .arrow {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.2s ease;
  display: inline-block;
}

.nav-item--dropdown.open > .nav-link .arrow {
  transform: rotate(180deg);
}

/* ── Dropdown menu ── */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: rgba(240, 240, 243, 0.97);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
}

.nav-item--dropdown.open > .dropdown-menu {
  display: flex;
}

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
  border-radius: 5px;
  transition: background 0.12s ease;
}

.dropdown-menu a:hover {
  background: rgba(0, 0, 0, 0.07);
}

/* Dropdown de Productos: muchas categorías, dos columnas */
.dropdown-menu--wide {
  grid-template-columns: repeat(2, 1fr);
  min-width: 420px;
}

.nav-item--dropdown.open > .dropdown-menu--wide {
  display: grid;
}

.dropdown-menu--wide a:first-child {
  grid-column: 1 / -1;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  border-radius: 5px 5px 0 0;
  margin-bottom: 4px;
}

/* ── Franja de 3 fotos (debajo del navbar) ── */
.header-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  height: 140px;
  overflow: hidden;
}

.header-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #d0d0d0;
}

/* ════════════════════════════════════════════
   SECCIÓN: COMPONENTES
════════════════════════════════════════════ */
.section-componentes {
  padding: var(--section-pad) 0;
  background-color: var(--color-bg)
}

.componentes-intro {
  max-width: var(--max-width);
  margin: 0 auto 56px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.componentes-intro__heading {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.componentes-intro__body {
  width: 100%;
  text-align: left;
}

.componentes-intro__subtitle {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 16px;
}

.componentes-intro__text {
  font-size: 16px;
  line-height: 1.8;
  max-width: none;
}

.componentes-intro__text + .componentes-intro__text {
  margin-top: 16px;
}

/* ── Título "Clientes Calzado Seguridad" ── */
.componentes-interactivo-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  margin-bottom: 64px;
}

.componentes-interactivo-header h3 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
}

/* ── Diagrama del zapato: tarjetas fijas a los costados + líneas ── */
.componentes-interactivo {
  display: flex;
  justify-content: center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.componentes-interactivo__diagrama {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  width: 100%;
  margin: 0 auto;
}

.componentes-interactivo__fila-superior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.componentes-interactivo__lineas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.componentes-interactivo__lineas line {
  stroke: var(--color-green);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.componentes-interactivo__lineas line.is-activa {
  opacity: 1;
}

.componentes-interactivo__zapato {
  position: relative;
  flex: 1 1 auto;
  max-width: 640px;
  min-width: 0;
  z-index: 2;
  background-color: var(--color-bg);
}

.componentes-interactivo__zapato-img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--color-bg);
}

/* ── Columnas de tarjetas a los costados del zapato ── */
.pieza-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 100px;
  flex: 0 0 300px;
  z-index: 2;
}

.pieza-cards--izquierda { align-items: flex-end; }
.pieza-cards--derecha   { align-items: flex-start; }

/* Grifa y Logo lengua (primera tarjeta de cada columna) se corren hacia
   arriba y hacia adentro, quedando parcialmente por encima del zapato
   en vez de tan al costado. */
.pieza-cards--izquierda .pieza-card:first-child,
.pieza-cards--derecha   .pieza-card:first-child {
  z-index: 4;
}

.pieza-cards--izquierda .pieza-card:first-child { transform: translate(24px, -50px); }
.pieza-cards--derecha   .pieza-card:first-child { transform: translate(-24px, -50px); }

/* Fila de piezas debajo del zapato (Cambrillón, Pasacordón) */
.pieza-cards--abajo {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  flex: none;
  width: 100%;
  margin-bottom: 160px;
}

.pieza-cards--abajo .pieza-card__img-wrap {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.pieza-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 20px 20px 50px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pieza-card:hover,
.pieza-card:focus-visible,
.pieza-card.is-activa {
  border-color: var(--color-green);
  background-color: #f0f7f3;
  outline: none;
}

.pieza-card__img-wrap {
  position: absolute;
  bottom: -149px;
  width: 175px;
  height: 175px;
  overflow: hidden;
  z-index: 3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pieza-cards--izquierda .pieza-card__img-wrap { left: 16px; }
.pieza-cards--derecha   .pieza-card__img-wrap { right: 16px; }

/* La Talonera se ve más grande que el resto de los componentes,
   y su imagen (no la tarjeta) se corre más abajo y a la izquierda */
.pieza-card[data-pieza="talonera"] .pieza-card__img-wrap {
  width: 250px;
  height: 250px;
  bottom: -235px;
  left: -30px;
}


.pieza-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  background: var(--color-bg);
}

.pieza-card:hover .pieza-card__img-wrap,
.pieza-card:focus-visible .pieza-card__img-wrap,
.pieza-card.is-activa .pieza-card__img-wrap {
  border-color: var(--color-green);
  box-shadow: 0 4px 14px rgba(0, 90, 47, 0.28);
}

.pieza-card__nombre {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.pieza-card__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .componentes-interactivo__lineas { display: none; }
  .componentes-interactivo__diagrama {
    flex-direction: column;
    gap: 0;
  }
  .componentes-interactivo__fila-superior {
    flex-direction: column;
  }
  .componentes-interactivo__zapato {
    order: -1;
    max-width: 420px;
  }
  .pieza-cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 190px;
    column-gap: 24px;
    flex: none;
    width: 100%;
  }
  .pieza-cards--izquierda .pieza-card:first-child,
  .pieza-cards--derecha   .pieza-card:first-child {
    transform: none;
    z-index: auto;
  }
  .pieza-cards--izquierda,
  .pieza-cards--derecha {
    align-items: stretch;
  }
  /* Espacio extra debajo de la primera columna para que el círculo que
     cuelga de su última tarjeta no se pise con la primera de la segunda.
     La Talonera cuelga más que el resto (250px, ver regla de escritorio
     más abajo), por eso esta columna necesita más margen que "abajo". */
  .pieza-cards--izquierda {
    margin-bottom: 260px;
  }
  .pieza-cards--abajo {
    margin-bottom: 170px;
  }
  .pieza-card { max-width: none; flex: 1 1 240px; text-align: center; align-items: center; padding-bottom: 50px; }
  .pieza-cards--izquierda .pieza-card__img-wrap,
  .pieza-cards--derecha   .pieza-card__img-wrap {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  /* La Talonera tiene posición/tamaño especiales en escritorio (ver arriba);
     en responsive se re-centra igual que el resto para que no se corra
     hacia la izquierda ni se pise con la fila siguiente. */
  .pieza-card[data-pieza="talonera"] .pieza-card__img-wrap {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ════════════════════════════════════════════
   SECCIÓN: CLIENTES MODA
════════════════════════════════════════════ */
.section-moda {
  background: var(--color-bg);
}

.moda-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.moda-header {
  margin-bottom: 40px;
}

.moda-header h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  margin-bottom: 12px;
}

.moda-header p {
  font-size: 14px;
}

.moda-columnas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: stretch;
}

.moda-lineas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.moda-lineas path {
  fill: none;
  stroke: var(--color-green);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.moda-lineas path.is-activa {
  opacity: 1;
}

/* Columna izquierda: 5 círculos del mismo tamaño en zigzag, apilados
   sin comprometer el ancho de la columna de la imagen */
.moda-redondas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.moda-redonda {
  position: relative;
  width: clamp(90px, 11vw, 220px);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
}

.moda-redonda:hover,
.moda-redonda.is-activa {
  box-shadow: 0 4px 14px rgba(0, 90, 47, 0.28);
}

/* Zigzag: alterna izquierda/derecha y se superponen un poco entre sí
   verticalmente para que las 5 entren sin agrandar la columna */
.moda-redonda:nth-child(odd)  { align-self: flex-start; }
.moda-redonda:nth-child(even) { align-self: flex-end; }
.moda-redonda:not(:first-child) { margin-top: -14%; }

.moda-redonda img {
  width: 100%;
  height: 100%;
  object-fit:contain;
  background-color: #ffffff;
}

/* Columna derecha: una única imagen, ajustada a la altura de la izquierda */
.moda-destacada {
  position: relative;
  z-index: 2;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #e4e4e4;
}

.moda-destacada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ════════════════════════════════════════════
   SECCIÓN: GALERÍA DEL PROCESO (marquee)
════════════════════════════════════════════ */
.section-galeria {
  padding: var(--section-pad) 0;
  overflow: hidden;
}

.galeria-heading {
  max-width: var(--max-width);
  margin: 0 auto 40px;
  padding: 0 40px;
}

.galeria-heading h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
}

/* Track wrapper: scroll horizontal manual (sin animación automática) */
.galeria-track-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  cursor: default;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.galeria-track-wrapper::-webkit-scrollbar {
  display: none;
}

.galeria-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 4px 0 16px; /* espacio para sombras */
}

/* Tarjeta de la galería: solo la imagen, sin título ni descripción */
.galeria-card {
  flex: 0 0 300px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.galeria-card__img {
  display: block;
  width: 300px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #f4f4f4;
}

/* Carrusel manual: flechas a los costados del track */
.categoria-carrusel {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.categoria-carrusel .galeria-track-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.categoria-carrusel__btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.categoria-carrusel__btn:hover {
  background: #f0f0f3;
}

/* ── Proceso (home): tarjetas fijas apiladas verticalmente ── */
.proceso-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.proceso-card {
  display: grid;
  grid-template-columns: 600px 1fr;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  width: 100%;
}

/* Tarjetas pares: imagen a la derecha (zigzag) */
.proceso-card:nth-child(even) {
  grid-template-columns: 1fr 600px;
  padding-right: 100px;
}

.proceso-card:nth-child(even) .proceso-card__img {
  order: 2;
}

.proceso-card:nth-child(even) .proceso-card__body {
  order: 1;
}

.proceso-card__img {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-width: none;
  object-fit: cover;
  background-color: #ffffff;
  padding-left: 100px;
}

.proceso-card__body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 460px;
  width: 100%;
}

/* Impares (imagen a la izquierda): el texto se acomoda a la derecha, lejos de la imagen */
.proceso-card:nth-child(odd) .proceso-card__body {
  margin-left: auto;
  margin-right: 0;
  padding-right: 100px;
  text-align: right;
  align-items: flex-end;
}

/* Pares (imagen a la derecha): el texto se acomoda a la izquierda, lejos de la imagen */
.proceso-card:nth-child(even) .proceso-card__body {
  margin-right: auto;
  margin-left: 0;
  padding-left: 100px;
  text-align: left;
  align-items: flex-start;
}

/* Forzar layout "impar" (imagen a la izquierda) en una tarjeta específica,
   aunque su posición en la lista sea par */
.proceso-card.proceso-card--forzar-impar {
  grid-template-columns: 600px 1fr;
  padding-right: 0;
}

.proceso-card.proceso-card--forzar-impar .proceso-card__img {
  order: 1;
  padding-left: 0;
}

.proceso-card.proceso-card--forzar-impar .proceso-card__body {
  order: 2;
  margin-left: auto;
  margin-right: 0;
  padding-right: 100px;
  padding-left: 24px;
  text-align: right;
  align-items: flex-end;
}


.proceso-card__step {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-green);
}

.proceso-card__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  color: var(--color-text);
}

.proceso-card__caption {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ════════════════════════════════════════════
   SECCIÓN: CONTACTO
════════════════════════════════════════════ */
.section-contacto {
  padding: var(--section-pad) 0;
  background: #fafafa;
  border-top: 1px solid var(--color-border);
}

.contacto-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}

.contacto-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.contacto-logo {
  width: 160px;
  height: auto;
  background: transparent;
}

.contacto-tagline {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}

/* ── Links de Instagram / Google Maps ── */
.contacto-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contacto-social__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contacto-social__link:hover {
  background-color: rgba(0, 90, 47, 0.06);
  border-color: var(--color-green);
  color: var(--color-green);
}

.contacto-social__link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Formulario ── */
.contacto-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.15s ease;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-text);
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23444' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-group textarea {
  min-height: 120px;
}

/* ── Multi-select de intereses ── */
.interes-dropdown {
  position: relative;
}

.interes-dropdown__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  text-align: left;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
}

.interes-dropdown__btn .arrow {
  font-size: 11px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.interes-dropdown.open .interes-dropdown__btn .arrow {
  transform: rotate(180deg);
}

.interes-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 100;
}

.interes-dropdown.open .interes-dropdown__menu {
  display: flex;
}

.interes-dropdown__menu label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 13.5px;
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
}

.interes-dropdown__menu label:hover {
  background: rgba(0, 0, 0, 0.05);
}

.interes-dropdown__menu input[type="checkbox"] {
  width: auto;
  accent-color: var(--color-green);
}

/* ── Leyendas de color y cantidad por categoría seleccionada ── */
.interes-legends {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.interes-legend {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 16px 18px;
  background: #fafafa;
}

.interes-legend__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.interes-legend__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 14px;
}

.interes-legend__opciones label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
}

.interes-legend__opciones input {
  width: auto;
  accent-color: var(--color-green);
}

.interes-legend__opciones small {
  color: var(--color-text-muted);
}

.interes-legend__cantidad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 220px;
}

.interes-legend__cantidad label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.interes-legend__cantidad input {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  outline: none;
}

.form-error {
  font-size: 12px;
  color: #c0392b;
  min-height: 18px;
}

.btn-submit {
  width: 100%;
  padding: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: white;
  background: var(--color-btn);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.btn-submit:hover:not(:disabled) {
  background: var(--color-btn-hover);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-submit.success {
  background: var(--color-green);
  opacity: 1;
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */

.footer-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  height: 180px;
  overflow: hidden;
}

.footer-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #c8c8c8;
}

.footer-bar {
  background: var(--color-footer);
  color: #bbb;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--font-body);
  letter-spacing: 0.5px;
}

.footer-bar p {
  color: #bbb;
  line-height: 1;
}

.footer-bar a {
  color: #999;
  transition: color 0.15s;
}

.footer-bar a:hover {
  color: #ddd;
}

/* ════════════════════════════════════════════
   PÁGINAS INTERNAS — encabezado de sección
════════════════════════════════════════════ */
.page-header {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-border);
}

.page-header .container h1 {
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.page-header .container p {
  margin-top: 12px;
  font-size: 15px;
  max-width: 600px;
}

/* ════════════════════════════════════════════
   GRID DE PRODUCTOS (tipología / cualidades / materialización)
════════════════════════════════════════════ */
.productos-section {
  padding: 60px 0 80px;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.producto-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  background-color: #ffffff;
}

.producto-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.producto-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #dcdcdc;
  border-bottom: 1px solid var(--color-border);
  background-color: #ffffff;
}

.producto-card__name {
  padding: 12px 14px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-text);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════
   PLANTILLA: CATEGORÍA (categoria.html)
════════════════════════════════════════════ */
.categoria-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-border);
}

.categoria-hero h1 {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -1px;
  text-transform: uppercase;
}

/* 1. Descripción del producto */
.categoria-descripcion {
  padding: 48px 0;
  border-bottom: 1px solid var(--color-border);
}

.categoria-descripcion__texto {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  max-width: 720px;
}

/* 2. Carrusel de ejemplos en uso — reutiliza .section-galeria / .galeria-* */
.categoria-ejemplos {
  border-bottom: 1px solid var(--color-border);
}

/* 3. Plantilla paso a paso de requisitos */
.categoria-requisitos {
  padding: 60px 0 72px;
  border-bottom: 1px solid var(--color-border);
}

.categoria-subseccion__titulo {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  margin-bottom: 10px;
}

.categoria-subseccion__desc {
  font-size: 14px;
  max-width: 560px;
  margin-bottom: 40px;
}

.requisitos-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.requisitos-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.requisitos-step__num {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-green);
  flex: 0 0 auto;
}

.requisitos-step h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.requisitos-step p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 560px;
}

/* Dos columnas: pasos a la izquierda, tarjeta del manual a la derecha */
.categoria-requisitos-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: stretch;
}

.categoria-requisitos-col--manual {
  display: flex;
  align-items: center;
  height: 100%;
}

.manual-card {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px 28px;
  background: #f7f7f7;
  text-align: center;
}

.manual-card__titulo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.manual-card__texto {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.manual-card__btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 4px;
  background: var(--color-green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Pie de navegación de categoría */
.categoria-footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  border-top: 1px solid var(--color-border);
  background: var(--color-nav);
  flex-wrap: wrap;
  gap: 16px;
}

.cat-nav-logo {
  height: 32px;
  width: auto;
  background: transparent;
}

.cat-nav-dropdown {
  position: relative;
}

.cat-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--color-btn);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.cat-nav-btn:hover {
  background: var(--color-btn-hover);
}

.cat-nav-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.10);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
}

.cat-nav-dropdown.open .cat-nav-dropdown-menu {
  display: flex;
}

.cat-nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-text);
  border-radius: 4px;
  transition: background 0.12s;
}

.cat-nav-dropdown-menu a:hover {
  background: #f0f0f0;
}

.cat-nav-dropdown-menu a.current {
  font-weight: 700;
  color: var(--color-green);
}

/* ════════════════════════════════════════════
   PÁGINAS PLACEHOLDER
════════════════════════════════════════════ */
.placeholder-section {
  padding: 60px 0;
  border-bottom: 1px solid var(--color-border);
}

.placeholder-section h2 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.placeholder-inner {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  border-radius: 8px;
  background: #fafafa;
  margin-top: 24px;
}

.placeholder-inner p {
  color: #bbb;
  font-size: 13px;
}

/* ════════════════════════════════════════════
   UTILIDADES
════════════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Activo en nav */
.nav-link.active {
  color: var(--color-green);
}

/* ════════════════════════════════════════════
   RESPONSIVE (básico)
════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --section-pad: 60px; }

  .container { padding: 0 24px; }
  .navbar-inner { padding: 0 24px; }
  .footer-bar { padding: 16px 24px; }

  .contacto-inner { grid-template-columns: 1fr; gap: 40px; }
  .categoria-requisitos-grid { grid-template-columns: 1fr; gap: 32px; }
  .moda-columnas { gap: 20px; }
  .proceso-card { grid-template-columns: 380px 1fr; }
  .proceso-card:nth-child(even) { grid-template-columns: 1fr 380px; }
  .proceso-card.proceso-card--forzar-impar { grid-template-columns: 380px 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 48px; }

  .navbar-links { gap: 0; }
  .nav-link { padding: 8px 10px; font-size: 11px; letter-spacing: 0.8px; }
  /* Productos ya no abre desplegable en mobile (va directo a la página de
     categorías), así que la flechita ya no aplica. */
  .nav-item--dropdown .arrow { display: none; }

  .header-photos { height: 100px; }
  .footer-photos { height: 120px; }

  /* Los círculos se mantienen en columna (zigzag vertical); la imagen
     no se recorta: se ve entera aunque no llene todo el alto. */
  .moda-columnas { grid-template-columns: 1fr; }
  .moda-lineas { display: none; }
  .moda-destacada { aspect-ratio: auto; background: var(--color-bg); }
  .moda-destacada img { height: auto; object-fit: contain; }

  /* El zigzag de escritorio (align-self alternado + margin-top negativo en %)
     usa el ancho de la columna angosta para superponerse apenas. En una sola
     columna a todo el ancho, ese mismo % se vuelve enorme y los círculos
     terminan tapando el texto de arriba. En mobile van simplemente en fila,
     centrados, sin superposición. */
  .moda-redondas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
  }
  .moda-redondas .moda-redonda:nth-child(odd),
  .moda-redondas .moda-redonda:nth-child(even) {
    align-self: center;
  }
  .moda-redondas .moda-redonda:not(:first-child) {
    margin-top: 0;
  }

  .form-row { grid-template-columns: 1fr; }

  /* "El Proceso": en escritorio alternan imagen izq/der con texto justificado
     hacia el lado contrario (zigzag). En mobile/tablet se simplifica a
     tarjetas apiladas: imagen arriba, texto abajo, siempre alineado a la
     izquierda — sin importar si la tarjeta es impar/par/forzar-impar. */
  .proceso-card,
  .proceso-card:nth-child(even),
  .proceso-card.proceso-card--forzar-impar {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .proceso-card:nth-child(even) .proceso-card__img,
  .proceso-card:nth-child(even) .proceso-card__body,
  .proceso-card.proceso-card--forzar-impar .proceso-card__img,
  .proceso-card.proceso-card--forzar-impar .proceso-card__body { order: initial; }
  .proceso-card__img,
  .proceso-card:nth-child(even) .proceso-card__img,
  .proceso-card.proceso-card--forzar-impar .proceso-card__img {
    min-height: 0;
    max-height: none;
    min-width: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    background-color: #ffffff;
    padding: 0;
  }
  .proceso-card__body,
  .proceso-card:nth-child(odd) .proceso-card__body,
  .proceso-card:nth-child(even) .proceso-card__body,
  .proceso-card.proceso-card--forzar-impar .proceso-card__body {
    padding: 20px 22px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    align-items: flex-start;
  }

  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

  .categoria-footer-nav { padding: 16px 20px; }

  .dropdown-menu--wide {
    grid-template-columns: 1fr;
    min-width: 220px;
    right: auto;
    left: 0;
  }
}

@media (max-width: 480px) {
  /* Solo 3 botones (Inicio, Productos, Contacto): entran en una fila
     angosta sin necesidad de menú hamburguesa. */
  .navbar-inner { padding: 0 14px; }
  .navbar-logo img { height: 40px; }
  .navbar-links { gap: 0; }
  .nav-link { padding: 6px 8px; font-size: 10px; letter-spacing: 0.4px; }

  .galeria-card { flex: 0 0 280px; }
  .galeria-card__img { width: 280px; }
}