/* ==========================================================================
   MAIN.CSS — Base del sitio
   ==========================================================================
   Orden interno:
     1. Variables CSS (colores, tipografías, tamaños, espaciados…)
     2. Reset / normalización
     3. Tipografía base
     4. Layout y utilidades (container, grid, section)
     5. Accesibilidad (focus, visually-hidden)

   Regla de oro: NUNCA definir colores/tamaños "a mano" en las hojas de
   componentes. Todo se lee de las variables definidas aquí.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CSS
   --------------------------------------------------------------------------
   Paleta inspirada en el logo real de la empresa (verde + azul,
   dorado solo como acento). Cambiar aquí afecta a TODO el sitio.
   ========================================================================== */
:root {
  /* ---------- Colores ---------- */
  /* Paleta extraída del logo real (assets/images/logo/logo.avif):
     verde #4B7048 + azul oscuro #323675, dorado solo como acento y
     blanco/gris muy claro como fondos. */
  --color-primary: #4b7048;         /* Verde principal (marca/logo)       */
  --color-secondary: #323675;       /* Azul oscuro (logo) títulos/nav     */
  --color-secondary-dark: #26295a;  /* Azul profundo (degradados)         */
  --color-primary-light: #6b976f;   /* Verde claro (resaltados)           */
  --color-accent: #c8a24b;          /* Dorado (solo acento)               */
  --color-accent-light: #e8d8a6;    /* Dorado suave (detalles)            */
  --color-text: #34383e;            /* Texto (gris oscuro, NO negro)      */
  --color-text-muted: #6b7075;      /* Texto secundario                   */
  --color-background: #ffffff;      /* Fondo principal (blanco)           */
  --color-surface: #f3f5f6;         /* Gris muy claro (fondos alternos)   */
  --color-border: #e3e7ea;          /* Bordes suaves                      */
  --color-white: #ffffff;
  --color-whatsapp: #25d366;        /* WhatsApp (CTA flotante y contacto) */
  --color-whatsapp-dark: #1da851;   /* WhatsApp hover                     */
  --color-facebook: #1877f2;        /* Facebook (redes sociales)          */
  --color-facebook-dark: #145fbf;   /* Facebook hover                     */

  /* ---------- Tipografías ----------
     Se cargan Montserrat (títulos) y Poppins (texto) desde Google Fonts
     con <link> en cada página (ver index.html). Si no hay conexión, se
     usan las pilas del sistema indicadas como respaldo.
     Cuando se disponga de las fuentes de marca, colocarlas en
     assets/fonts/ y descomentar el bloque @font-face al final. */
  --font-heading: "Montserrat", "Georgia", "Times New Roman", serif;
  --font-body: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.5rem;      /* 24px */
  --font-size-xl: 2rem;        /* 32px */
  --font-size-xxl: 2.75rem;    /* 44px */
  --font-size-display: 3.25rem;/* 52px (hero / estadísticas)             */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra: 800;

  /* ---------- Espaciados ---------- */
  --spacing-xs: 0.5rem;    /*  8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 2rem;      /* 32px */
  --spacing-lg: 4rem;      /* 64px */
  --spacing-xl: 6rem;      /* 96px */

  /* ---------- Bordes y radios ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;         /* Botones y píldoras redondeadas         */
  --border-width: 1px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ---------- Transiciones ---------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ---------- Layout ---------- */
  --container-width: 1200px;
  --header-height: 72px;

  /* ---------- Hero ----------
     Altura base del hero/carrusel (valor móvil). Se escala por breakpoint
     en responsive.css: 560px (<400px), 720px (>=768px) y 890px (>=1024px).
     Presencia media: no ocupa toda la pantalla pero se aprecia el banner. */
  --hero-height: 600px;
}

/* ==========================================================================
   2. RESET / NORMALIZACIÓN
   --------------------------------------------------------------------------
   Base mínima compatible con todos los navegadores modernos.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
}

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

ul,
ol {
  list-style: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

address {
  font-style: normal;
}

/* ==========================================================================
   3. TIPOGRAFÍA BASE
   --------------------------------------------------------------------------
   Jerarquía de encabezados: un solo <h1> por página.
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--font-size-xxl); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-bold); }
h3 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-medium); }

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

/* ==========================================================================
   4. LAYOUT Y UTILIDADES
   ========================================================================== */

/* Contenedor central: limita el ancho del contenido */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--spacing-sm);
}

/* Sección estándar de contenido */
.section {
  padding-block: var(--spacing-lg);
}

/* Variante de sección con fondo alterno */
.section--alt {
  background-color: var(--color-surface);
}

/* Título de sección (con barra decorativa dorada) */
.section__title {
  position: relative;
  text-align: center;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: var(--spacing-md);
}

.section__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: var(--spacing-sm) auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

/* Texto introductorio debajo de un título de sección */
.section__lead {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

/* ---------- Sistema de rejilla (grid) ----------
   Uso: <div class="grid grid--2"> ... </div>
   - grid--2: 2 columnas en pantallas medianas/grandes
   - grid--3: 3 columnas
   - grid--4: 4 columnas (footer)
   El número de columnas en móvil se controla en responsive.css */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   5. ACCESIBILIDAD
   ========================================================================== */

/* Anillo de enfoque visible para navegación con teclado */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Clase para ocultar contenido visualmente sin ocultarlo
   de lectores de pantalla (estándar de accesibilidad). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   FUENTES PERSONALIZADAS (opcional)
   --------------------------------------------------------------------------
   Cuando se tengan las fuentes de la marca en assets/fonts/:
     1. Quitar el comentario del bloque @font-face.
     2. Reemplazar "FuenteMarca" por el nombre real.
     3. Cambiar --font-heading/--font-body arriba por "FuenteMarca".
   Formatos recomendados: woff2 (prioridad) y woff.
   ========================================================================== */
/*
@font-face {
  font-family: "FuenteMarca";
  src: url("../fonts/fuente-marca.woff2") format("woff2"),
       url("../fonts/fuente-marca.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
*/