/* ==========================================================================
   PLANTOPIA — Estilos
   --------------------------------------------------------------------------
   1. Tipografías
   2. Variables (colores y medidas)
   3. Base y reset
   4. Layout
   5. Header y navegación
   6. Hero (imagen de portada)
   7. Encabezado de página
   8. Catálogo de productos
   9. Botones
   10. Franja de ventajas
   11. Banner
   12. Migas de pan
   13. Ficha de producto
   14. Carrusel
   15. Texto editorial (Sobre / Contacto)
   16. Contacto y formulario
   17. Footer
   18. Responsive
   ========================================================================== */


/* ==========================================================================
   1. TIPOGRAFÍAS
   --------------------------------------------------------------------------
   LEMON MILK (marca)  → títulos, menú, botones, nombres, precios y etiquetas
     Bold (700)    → títulos
     Regular (400) → subtítulos, nombres de producto, precios
     Light (300)   → disponible por si hace falta

   Tipografía del sistema → párrafos y todo lo que se lee seguido.
     Es la que el navegador ya tiene cargada (Segoe UI en Windows), así que
     no pesa nada y se lee mucho mejor en textos largos.
   ========================================================================== */
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lemon Milk";
  src: url("../fonts/LEMONMILK-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. VARIABLES
   --------------------------------------------------------------------------
   Cambiando estos valores cambiás la marca entera.
   ========================================================================== */
:root {
  /* Colores */
  --crema:       #faf8f3;  /* Fondo general */
  --foto:        #f1f0ec;  /* Fondo detrás de las fotos */
  --tinta:       #23262a;  /* Texto principal */
  --tinta-suave: #6c7168;  /* Texto secundario */
  --oliva:       #5f6b4e;  /* Acento: botones, links */
  --tierra:      #b08968;  /* Acento cálido */
  --linea:       #e3ded1;  /* Separadores */
  --gris:        #3a3d3c;  /* Gris de la pared de la foto de portada */

  /* Resplandor rosado de los bordes (ver "Viñeta") */
  --vineta-color:  214, 158, 148;
  --vineta-fuerza:  0.55;  /* opacidad contra el borde; 0 lo apaga */
  --vineta-ancho:   clamp(16px, 1.8vw, 30px);
  --vineta-quiebre: 38%;   /* dónde cae de golpe: más bajo = más concentrado */

  /* Tipografía
     --fuente       → LEMON MILK: títulos, menú, botones, nombres y precios
     --fuente-texto → la del sistema: párrafos y todo lo que se lee seguido
                      (en Windows es Segoe UI, en Mac San Francisco) */
  --fuente: "Lemon Milk", "Century Gothic", "Futura", -apple-system,
            BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fuente-texto: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --ancho:  1180px;
  --margen: clamp(1.25rem, 5vw, 3rem);
}


/* ==========================================================================
   3. BASE Y RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: 1.0625rem;   /* tamaño base del texto */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2 {
  font-family: var(--fuente);
  font-weight: 700;          /* Bold para los títulos */
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-family: var(--fuente);
  font-weight: 400;          /* Regular para los subtítulos */
  line-height: 1.3;
  margin: 0;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--oliva);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 40;   /* por encima de la viñeta */
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--crema);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 1rem; }


/* --------------------------------------------------------------------------
   Viñeta: resplandor rosado suave en los cuatro bordes de la pantalla.
   Queda fijo al hacer scroll y no interfiere con los clics.

   El color es más intenso contra el filo y cae rápido hacia adentro, en una
   banda angosta.

   Para ajustarlo, cambiá --vineta-fuerza (0 lo apaga) o --vineta-color.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(var(--vineta-color), var(--vineta-fuerza)) 0%,
      rgba(var(--vineta-color), calc(var(--vineta-fuerza) * 0.26)) var(--vineta-quiebre),
      rgba(var(--vineta-color), 0) 100%) top    / 100% var(--vineta-ancho) no-repeat,
    linear-gradient(to top,
      rgba(var(--vineta-color), var(--vineta-fuerza)) 0%,
      rgba(var(--vineta-color), calc(var(--vineta-fuerza) * 0.26)) var(--vineta-quiebre),
      rgba(var(--vineta-color), 0) 100%) bottom / 100% var(--vineta-ancho) no-repeat,
    linear-gradient(to right,
      rgba(var(--vineta-color), var(--vineta-fuerza)) 0%,
      rgba(var(--vineta-color), calc(var(--vineta-fuerza) * 0.26)) var(--vineta-quiebre),
      rgba(var(--vineta-color), 0) 100%) left   / var(--vineta-ancho) 100% no-repeat,
    linear-gradient(to left,
      rgba(var(--vineta-color), var(--vineta-fuerza)) 0%,
      rgba(var(--vineta-color), calc(var(--vineta-fuerza) * 0.26)) var(--vineta-quiebre),
      rgba(var(--vineta-color), 0) 100%) right  / var(--vineta-ancho) 100% no-repeat;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}


/* ==========================================================================
   5. HEADER Y NAVEGACIÓN
   ========================================================================== */
.header { border-bottom: 1px solid var(--linea); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
}

.logo {
  display: block;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.logo img { height: 28px; width: auto; }
.logo:hover { opacity: 0.65; }

.nav ul {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  font-family: var(--fuente);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover { color: var(--oliva); border-bottom-color: var(--oliva); }

.nav a[aria-current="page"] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

.menu-btn {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  cursor: pointer;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
}


/* ==========================================================================
   6. HERO (imagen de portada)
   ========================================================================== */
.hero {
  position: relative;
  background: #3a3d3c;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  aspect-ratio: 1920 / 380;   /* Más bajo que la foto original: se recorta arriba y abajo */
  max-height: 350px;
  object-fit: cover;
  object-position: 70% center;
}

/* Oscurece el lado del texto para que se lea siempre */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(24, 26, 25, 0.78) 0%,
    rgba(24, 26, 25, 0.55) 40%,
    rgba(24, 26, 25, 0) 72%
  );
}

.hero__texto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* El bloque arranca en el mismo margen que el resto del contenido */
.hero__caja {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  max-width: 46rem;   /* que el título entre en dos líneas */
}

.hero h1 {
  color: #fff;
  font-size: clamp(1.4rem, 3.1vw, 2.5rem);
}

.hero p {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  max-width: 40ch;
}


/* ==========================================================================
   7. ENCABEZADO DE PÁGINA
   ========================================================================== */
.page-head {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem);
  max-width: 46ch;
}

.page-head h1 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); }

.page-head p {
  margin-top: 1rem;
  color: var(--tinta-suave);
  max-width: 50ch;
}

/* Variante con la bajada en negro en vez de gris */
.page-head--oscuro p { color: var(--tinta); }


/* ==========================================================================
   8. CATÁLOGO DE PRODUCTOS
   ========================================================================== */
.catalogo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* Con pocos productos la grilla no se estira de más */
.catalogo:has(.product:nth-child(2):last-child),
.catalogo:has(.product:only-child) { grid-template-columns: repeat(2, 1fr); }

.product__link { display: block; text-decoration: none; }

.product__media {
  position: relative;
  background: var(--foto);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Única interacción del catálogo: un acercamiento apenas perceptible */
.product:hover .product__media img { transform: scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  .product__media img,
  .carrusel__foto { transition: none; }
  .product:hover .product__media img { transform: none; }
}

.product__flag {
  font-family: var(--fuente);
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--crema);
  color: var(--tinta-suave);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}

.product__info { padding-top: 1.1rem; }

.product__name { font-size: 0.9375rem; }

.product__desc {
  margin-top: 0.35rem;
  color: var(--tinta-suave);
  font-size: 0.9375rem;
}

.product__price {
  font-family: var(--fuente);
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 400;
}

.product .btn,
.product .btn--off { margin-top: 1rem; }

/* Aviso debajo del catálogo */
.catalogo:has(+ .aviso-modelos) { padding-bottom: 1.75rem; }

.aviso-modelos {
  font-style: italic;
  color: var(--oliva);
  padding-top: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* Personaje de la marca, al lado de las macetas.
   Toma la misma altura que la foto del producto (4/3) y se alinea arriba,
   así queda centrado con la foto y no con la tarjeta entera. */
.catalogo__logo {
  order: 1;                  /* va después de los productos */
  align-self: start;
  aspect-ratio: 4 / 3;
  padding-bottom: clamp(7rem, 15vw, 12rem);   /* lo empuja hacia arriba */
  display: grid;
  place-items: center end;   /* centrado vertical, pegado a la derecha */
}

/* En pantallas anchas se corre fuera del margen y sube por encima de la foto */
@media (min-width: 901px) {
  .catalogo__logo {
    margin-right: clamp(-3.5rem, -2.5vw, 0rem);
    margin-top: clamp(-2.25rem, -1.75vw, 0rem);
  }
}
.catalogo__logo img { width: min(72%, 290px); }


/* ==========================================================================
   9. BOTONES
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border: 1px solid var(--oliva);
  background: transparent;
  color: var(--oliva);
  font-family: var(--fuente);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--oliva); color: var(--crema); }

.btn--off {
  border-color: var(--linea);
  color: var(--tinta-suave);
  cursor: default;
}
.btn--off:hover { background: transparent; color: var(--tinta-suave); }

.btn--solid { background: var(--oliva); color: var(--crema); }
.btn--solid:hover { background: var(--tinta); border-color: var(--tinta); }


/* ==========================================================================
   10. FRANJA DE VENTAJAS (envíos / pagos / costos)
   --------------------------------------------------------------------------
   Ocupa el ancho completo de la pantalla; el contenido queda centrado.
   ========================================================================== */
.ventajas {
  background: var(--gris);
  color: #fff;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.ventajas__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  margin-block: 0;             /* el centrado horizontal lo pone .wrap */
  padding-block: 0;
  list-style: none;
}

.ventaja {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
}

/* Los iconos vienen en negro: sobre el fondo gris se invierten a blanco */
.ventaja img {
  width: clamp(52px, 5.5vw, 76px);
  height: auto;
  filter: invert(1);
}

.ventaja p {
  font-family: var(--fuente);
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
  line-height: 1.4;
  max-width: 26ch;   /* que los tres entren en una sola línea */
}


/* ==========================================================================
   11. BANNER
   ========================================================================== */
.banner {
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.banner img { width: 100%; }


/* ==========================================================================
   11b. POPUP DEL TICKET DORADO
   --------------------------------------------------------------------------
   Aparece al bajar un poco en el inicio. Ver initPopup() en app.js.
   ========================================================================== */
.popup {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--margen);
}
.popup[hidden] { display: none; }

.popup__fondo {
  position: absolute;
  inset: 0;
  background: rgba(24, 26, 25, 0.55);
  animation: popup-fondo 0.25s ease both;
}

.popup__caja {
  position: relative;
  width: min(900px, 100%);
  animation: popup-caja 0.28s ease both;
}

.popup__caja img { width: 100%; }

.popup__x {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease;
}
.popup__x:hover { background: var(--crema); }

@keyframes popup-fondo { from { opacity: 0 } to { opacity: 1 } }
@keyframes popup-caja {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  .popup__fondo, .popup__caja { animation: none; }
}

@media (max-width: 560px) {
  .popup__x { top: -12px; right: -8px; }
}


/* ==========================================================================
   12. MIGAS DE PAN
   ========================================================================== */
.migas { padding-top: 1.75rem; }

.migas ol {
  font-family: var(--fuente);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.migas li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--linea);
}

.migas a { text-decoration: none; }
.migas a:hover { color: var(--tinta); }


/* ==========================================================================
   13. FICHA DE PRODUCTO
   ========================================================================== */
.ficha {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem);
}

.ficha__info h1 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }

.ficha__precio {
  font-family: var(--fuente);
  margin-top: 0.9rem;
  font-size: 1.25rem;
  font-weight: 400;
}

.ficha__info p + p { margin-top: 1.25rem; }

.ficha__info > p:not(.ficha__precio) {
  color: var(--tinta-suave);
  max-width: 42ch;
}

.ficha__datos {
  margin: 1.75rem 0;
  padding-block: 1.25rem;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
}

.ficha__datos dt {
  font-family: var(--fuente);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  align-self: center;
}

.ficha__datos dd { margin: 0; }

.ficha__info .btn { margin-top: 0.5rem; }

.ficha__otros {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
}
.ficha__otros a {
  color: var(--oliva);
  text-underline-offset: 3px;
}


/* ==========================================================================
   14. CARRUSEL
   ========================================================================== */
.carrusel:focus-visible { outline-offset: 6px; }

/* Cuadrado: es el que mejor acomoda fotos horizontales y verticales juntas */
.carrusel__ventana {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--foto);
  overflow: hidden;
}

.carrusel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.carrusel__foto.is-active { opacity: 1; }

.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.carrusel__flecha:hover { background: #fff; }
.carrusel__flecha--izq { left: 0.75rem; }
.carrusel__flecha--der { right: 0.75rem; }

.carrusel__contador {
  font-family: var(--fuente);
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.55rem;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

.carrusel__minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.carrusel__mini {
  padding: 0;
  border: 1px solid transparent;
  background: var(--foto);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.carrusel__mini img { width: 100%; height: 100%; object-fit: cover; }
.carrusel__mini:hover { opacity: 0.85; }
.carrusel__mini.is-active { opacity: 1; border-color: var(--tinta); }


/* ==========================================================================
   15. TEXTO EDITORIAL (Sobre / Contacto)
   ========================================================================== */
.prose {
  max-width: 58ch;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.prose p + p { margin-top: 1.4rem; }

.prose h2 {
  font-size: 1.125rem;
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}

.prose a {
  color: var(--oliva);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.figura {
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  background: var(--foto);
}
.figura > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.figura figcaption {
  padding-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}

/* Video de la página de detalles */
.video {
  max-width: 560px;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  background: var(--foto);
}
.video video {
  display: block;
  width: 100%;
  height: auto;
}

/* Cuando la figura lleva un carrusel adentro, el fondo lo pone el carrusel */
.figura--galeria {
  max-width: 560px;
  background: none;
}

/* Los planos son líneas muy claras: necesitan un fondo con algo más de cuerpo
   y aire alrededor para no quedar pegados a los bordes */
.figura--galeria .carrusel__ventana { background: #e7e4dc; }
.figura--galeria .carrusel__foto { padding: 9%; }
.figura--galeria .carrusel__mini { background: #e7e4dc; }
.figura--galeria .carrusel__mini img { object-fit: contain; padding: 12%; }
.figura--galeria .carrusel__minis { grid-template-columns: repeat(6, 1fr); }

/* La leyenda va en un recuadro, centrada y en negro */
.figura--galeria figcaption {
  margin-top: 0.9rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--linea);
  color: var(--tinta);
  text-align: center;
  text-wrap: balance;
}


/* ==========================================================================
   16. CONTACTO Y FORMULARIO
   ========================================================================== */
.contacto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.canales {
  margin: 0;
  display: grid;
  gap: 1.5rem;
}

.canales dt {
  font-family: var(--fuente);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.canales dd {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
}

.canales a {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.canales a:hover { color: var(--oliva); border-bottom-color: var(--oliva); }

.form { display: grid; gap: 1.25rem; }

.campo { display: grid; gap: 0.4rem; }

.campo label {
  font-family: var(--fuente);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--linea);
  border-radius: 0;
  background: #fff;
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.5;
  transition: border-color 0.2s ease;
}
.campo input:focus,
.campo textarea:focus { border-color: var(--oliva); }

.campo textarea { resize: vertical; min-height: 9rem; }

.form .btn { justify-self: start; }

.form__aviso { font-size: 0.9375rem; color: var(--tinta-suave); }


/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--linea);
  padding-block: 2.25rem 2.75rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer a:hover { color: var(--oliva); }


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 900px) {
  .catalogo { grid-template-columns: repeat(2, 1fr); }
  .contacto { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr; }
  .ficha__fotos { max-width: 620px; }
}

/* --- Celular: menú hamburguesa ------------------------------------------- */
@media (max-width: 700px) {
  .header__inner { padding-block: 1.1rem; flex-wrap: wrap; }

  .logo img { height: 24px; }

  .menu-btn { display: block; }

  .nav {
    display: none;
    order: 3;
    width: 100%;
    border-top: 1px solid var(--linea);
  }
  .nav.is-open { display: block; }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0.5rem;
  }

  .nav li + li { border-top: 1px solid var(--linea); }

  .nav a {
    display: block;
    padding-block: 0.9rem;
    font-size: 0.8125rem;
    border-bottom: 0;
  }
  .nav a[aria-current="page"] { border-bottom: 0; color: var(--oliva); }

  /* La foto de portada se hace más alta y el texto se apoya abajo */
  .hero__img { aspect-ratio: 4 / 3; max-height: none; object-position: 62% center; }

  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(24, 26, 25, 0.15) 0%,
      rgba(24, 26, 25, 0.35) 45%,
      rgba(24, 26, 25, 0.85) 100%
    );
  }

  .hero__texto { justify-content: flex-end; padding-bottom: 2rem; }
  .hero__caja { max-width: none; }
  .hero h1 { font-size: 1.35rem; }
}

/* --- Celular chico ------------------------------------------------------- */
@media (max-width: 560px) {
  /* Las tres ventajas se apilan, con el icono al costado del texto */
  .ventajas__lista { grid-template-columns: 1fr; gap: 1.75rem; }
  .ventaja { flex-direction: row; align-items: center; text-align: left; gap: 1.1rem; }
  .ventaja img { width: 46px; }
  .ventaja p { max-width: none; }
  .catalogo,
  .catalogo:has(.product:nth-child(2):last-child) { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .carrusel__flecha { width: 2.25rem; height: 2.25rem; }
}