/**
 * Lautaro Diesel - Sistema de diseño
 * Según especificaciones de la diseñadora (Anatomía Gral.)
 */

/* ========== COLORES ========== */
:root {
  --color-dark: #1D1D1B;
  --color-dark-alt: #282525;
  --color-red: #E62D2B;
  --color-gray: #9A9999;
  --color-gray-light: #F2F2F2;
  --color-gray-carousel: #C9C9C9; /* tono más oscuro para la franja del carrusel */
  --color-white: #FFFFFF;
  /* WhatsApp (botón contacto): inactivo verde claro, activo verde más oscuro + borde verde claro */
  --color-whatsapp: #26CC58;
  --color-whatsapp-hover: #1EB84E;
  --color-whatsapp-border: rgba(38, 204, 88, 0.8);
}

/* ========== TIPOGRAFÍA - Archivo ========== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root {
  --font-archivo: 'Archivo', sans-serif;

  /* Títulos */
  --text-titulo-1: 60pt;   /* Archivo Bold Italic 60pt */
  --text-titulo-2: 40pt;   /* Archivo Bold Italic 40pt */
  --text-titulo-3: 42pt;   /* Archivo Regular 42pt */

  /* Subtítulos */
  --text-subtitulo-1: 30pt;  /* Archivo Bold 30pt */
  --text-subtitulo-2: 22pt;  /* Archivo Medium 22pt */

  /* Texto */
  --text-1: 26pt;  /* Archivo Medium 26pt - Siempre mayúscula en botones/links */
  --text-2: 24pt;  /* Archivo Regular 24pt */

  /* Navegación */
  --text-nav: 30pt;  /* Archivo Regular 30pt */
  --nav-gap: 30px;
}

/* Conversión pt → rem (1pt ≈ 1.333px, 16px base → 1pt ≈ 0.083rem aprox; uso 1pt ≈ 1.33px → 26pt ≈ 2.17rem) */
:root {
  --fs-titulo-1: clamp(2.5rem, 5vw, 4rem);
  --fs-titulo-2: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-titulo-3: clamp(1.75rem, 3.5vw, 2.85rem);
  --fs-subtitulo-1: clamp(1.25rem, 2.2vw, 2rem);
  --fs-subtitulo-2: clamp(1rem, 1.5vw, 1.4rem);
  --fs-text-1: clamp(1rem, 1.4vw, 1.45rem);
  --fs-text-2: clamp(0.95rem, 1.2vw, 1.35rem);
  /* Navegación: Archivo Regular, header compacto */
  --fs-nav: clamp(0.61rem, 1.28vw, 19pt);
}

/* ========== ESPACIADOS (responsive: rem para zoom, clamp para viewport) ========== */
:root {
  --space-section-title-top: clamp(3.50rem, 10vw, 8.5rem);   /* separación entre cajas negras y título Novedades */
  --space-section-title-bottom: clamp(1.25rem, 3vw, 2.5rem);  /* más separado entre título Novedades y tarjetas */
  --space-novedades-bottom: clamp(1.5rem, 3vw, 2.75rem);
  --space-carousel-top: clamp(0.9rem, 2.4vw, 2.25rem);    /* 40% menos: arriba del carrusel */
  --space-carousel-bottom: clamp(1.2rem, 3.6vw, 3.375rem); /* 40% menos: abajo del carrusel */
  --space-sobre-top: 0;                                 /* el 180px ya lo da carousel-bottom */
  --space-products-grid-gap: clamp(1.25rem, 3vw, 2.8125rem); /* 45px entre tarjetas (diseño) */
  --space-sobre-bottom: clamp(3rem, 8vw, 8.75rem);
  --space-productos-gap: clamp(2.5rem, 6vw, 6.25rem);
  --space-ver-to-link: clamp(2.5rem, 6vw, 6.25rem);
  --space-contact-top: clamp(4rem, 12vw, 11rem);
  --space-contact-form-width: min(810px, 95vw);
  --space-footer-bottom: clamp(4rem, 12vw, 11rem);
  --space-empresa-margin: clamp(2.5rem, 6vw, 6.25rem);
  --space-empresa-gallery: clamp(2rem, 5vw, 5rem);
  --space-empresa-gallery-2: clamp(2.5rem, 6vw, 6.25rem);
  --space-empresa-to-footer: clamp(5rem, 12vw, 12.5rem);

  /* Botones: escalan con rem */
  --btn-whatsapp-margin: clamp(0.5rem, 1.5vw, 1.125rem);
  --btn-action-margin: clamp(1rem, 2.5vw, 2.5rem);
  --btn-ver-height: clamp(2.5rem, 4vw, 3.625rem);
  --btn-ver-min-width: clamp(10rem, 18vw, 13.875rem);
  --btn-whatsapp-width: clamp(5.5rem, 10vw, 7.5rem);
  --btn-whatsapp-height: clamp(2.1rem, 3.5vw, 3.0625rem);
}

/* ========== COMPONENTES (responsive) ========== */
:root {
  /* Tarjeta producto: 64% del diseño original (243×352px, imagen 170px) */
  --card-product-width: 243px;
  --card-product-height: 352px;
  --card-product-image-height: 170px;
  --card-product-body-padding-top: 15px;
  --card-product-body-padding-bottom: 26px;
  --card-product-body-padding-x: 19px;
  --card-product-radius: 6px;
  --card-product-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* Tarjeta característica: 30% menos (280×196px aprox), borde blanco, contenido centrado */
  --card-feature-width: 100%;
  --card-feature-max-width: 280px;
  --card-feature-height: clamp(140px, 18vw, 196px);
  --card-feature-min-height: 126px;
  --card-feature-inner-padding: clamp(0.7rem, 1.75vw, 20px);
  --card-feature-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4), 1px 1px 4px rgba(0, 0, 0, 0.25);

  /* Contenedor contenido */
  --content-max-width: min(1200px, 96vw);
  --form-max-width: min(810px, 95vw);
}