@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=Montserrat:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap');

/* ==========================================================================
   Granja Las Lomas — hoja de estilos del sitio
   Tokens y patrones tomados del Sistema de Diseño de Granja Las Lomas.
   Verde Loma es el color principal; Naranja Granja es el acento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colores de marca */
  --naranja-granja: #d47a1a;
  --verde-loma: #2d5a27;
  --cafe-tierra: #3d2b1a;
  --rojo-gallo: #c0392b;
  --beige-campo: #f2e8d5;
  --cafe-madera: #7a5c3a;

  /* Escala Naranja Granja */
  --naranja-50: #fcf1e2;
  --naranja-100: #f7ddbe;
  --naranja-200: #efbe85;
  --naranja-300: #e59e51;
  --naranja-400: #d47a1a;
  --naranja-500: #bc6a12;
  --naranja-600: #9c570d;
  --naranja-700: #7a4309;

  /* Escala Verde Loma */
  --verde-50: #ecf1eb;
  --verde-100: #cedbc9;
  --verde-200: #9cb795;
  --verde-300: #5e8554;
  --verde-400: #3e7535;
  --verde-500: #2d5a27;
  --verde-600: #20451c;
  --verde-700: #163212;

  /* Escala neutra cálida */
  --cafe-50: #f4efe9;
  --cafe-100: #e4d8c9;
  --cafe-200: #c4ae90;
  --cafe-300: #9a7c52;
  --cafe-400: #7a5c3a;
  --cafe-500: #5c4228;
  --cafe-600: #3d2b1a;
  --cafe-700: #2a1d11;

  /* Escala Beige Campo */
  --beige-50: #fbf7ef;
  --beige-100: #f7f0e2;
  --beige-200: #f2e8d5;
  --beige-300: #e8d9be;
  --beige-400: #dbc7a2;

  --blanco-calido: #fffdf9;

  /* Lienzo — más neutro que el beige de marca para que el color
     de las fotos y los acentos resalte en pantalla. */
  --canvas: #f6f4f0;
  --canvas-alt: #f1eee8;

  /* Alias semánticos */
  --color-primary: var(--verde-500);
  --color-primary-hover: var(--verde-600);
  --color-primary-active: var(--verde-700);
  --color-primary-soft: var(--verde-50);
  --color-accent: var(--naranja-400);
  --color-accent-hover: var(--naranja-500);
  --color-accent-soft: var(--naranja-50);

  --text-strong: var(--cafe-600);
  --text-body: var(--cafe-500);
  --text-muted: var(--cafe-400);
  --text-on-dark: var(--beige-200);
  --text-on-dark-strong: var(--blanco-calido);

  --surface-card: var(--blanco-calido);
  /* Superficie del pie: greige cálido — un paso más denso que el lienzo, para
     que el pie cierre la página sin recurrir a un bloque oscuro saturado. */
  --surface-footer: #e9e4da;
  --border-footer: rgba(61, 43, 26, 0.12);

  --border-subtle: #e7e2d9;
  --border-hairline: rgba(61, 43, 26, 0.07);
  --border-on-dark: rgba(242, 232, 213, 0.22);
  --focus-ring: rgba(45, 90, 39, 0.34);

  /* Luz ambiental — halos radiales en vez de campos de color planos */
  --wash-green: radial-gradient(60% 50% at 12% 0%, rgba(45, 90, 39, 0.055), transparent 70%);
  --wash-accent: radial-gradient(50% 45% at 92% 8%, rgba(212, 122, 26, 0.06), transparent 70%);

  /* Tipografía */
  --font-display: 'Playfair Display', 'Lora', Georgia, 'Times New Roman', serif;
  --font-label: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Nunito Sans', 'Open Sans', system-ui, -apple-system, sans-serif;

  --fs-display-lg: clamp(2.1rem, 4vw, 3.5rem);
  --fs-display-md: clamp(1.9rem, 3.2vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 2vw, 1.75rem);
  --fs-h3: 1.375rem;
  --fs-body-lg: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-body-sm: 0.9375rem;
  --fs-label: 0.8125rem;

  /* Ritmo y forma */
  --container-max: 1200px;
  --section-pad: clamp(3.5rem, 7.5vw, 6.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --grid-gap: 18px;

  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-pill: 999px;

  /* Sombras cálidas de tono café, difusas y de radio negativo */
  --shadow-xs: 0 1px 2px rgba(61, 43, 26, 0.06);
  --shadow-soft: 0 1px 2px rgba(61, 43, 26, 0.025), 0 10px 30px -8px rgba(61, 43, 26, 0.055);
  --shadow-float: 0 2px 6px rgba(61, 43, 26, 0.03), 0 28px 60px -16px rgba(61, 43, 26, 0.1);
  --shadow-nav: 0 1px 3px rgba(61, 43, 26, 0.04), 0 14px 38px -10px rgba(61, 43, 26, 0.1);
  --shadow-lift: 0 4px 10px rgba(61, 43, 26, 0.04), 0 34px 70px -18px rgba(61, 43, 26, 0.13);

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-base: 220ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

/* `picture` es solo un envoltorio de selección de formato: que no forme caja,
   así el <img> hereda directamente el alto del marco que lo contiene. */
picture { display: contents; }

a { color: var(--color-primary); }

button { font: inherit; color: inherit; }

h1, h2, h3, p { margin: 0; }

/* `figure` y `blockquote` traen margen lateral por defecto (1em 40px):
   se resetea para que las tarjetas ocupen su celda completa. */
figure, blockquote { margin: 0; }

.gll-icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gll-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;
}

.gll-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-label);
  font-weight: 600;
}
.gll-skip:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.gll-section {
  padding: var(--section-pad) var(--gutter);
  background: var(--canvas);
}
.gll-section--soft { background: var(--canvas-alt); }
.gll-section--wash-green { background: var(--wash-green), var(--canvas); }
.gll-section--soft.gll-section--wash-green { background: var(--wash-green), var(--canvas-alt); }
.gll-section--wash-accent { background: var(--wash-accent), var(--canvas); }

.gll-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   4. Tipografía de marca
   -------------------------------------------------------------------------- */
.gll-eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.gll-eyebrow--on-dark { color: var(--naranja-300); }

.gll-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-md);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-wrap: balance;
}

/* Palabra o frase de énfasis en itálica — patrón central de la marca */
.gll-emph {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
}

.gll-lead {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text-body);
  margin-top: 18px;
  max-width: 580px;
}

.gll-heading--center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.gll-heading--center .gll-lead { margin-inline: auto; }

.gll-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */
.gll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base), transform var(--dur-base);
}
.gll-btn .gll-icon { width: 1.05em; height: 1.05em; }
.gll-btn:hover { transform: translateY(-1px); }
.gll-btn:active { transform: translateY(1px); }

.gll-btn--sm { padding: 9px 17px; font-size: 13px; }
.gll-btn--lg { padding: 15px 30px; font-size: 16px; }

.gll-btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 3px 12px -3px rgba(45, 90, 39, 0.32);
}
.gll-btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 8px 22px -4px rgba(45, 90, 39, 0.42);
}
.gll-btn--primary:active { background: var(--color-primary-active); }

.gll-btn--accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 3px 12px -3px rgba(212, 122, 26, 0.34);
}
.gll-btn--accent:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 8px 22px -4px rgba(212, 122, 26, 0.44);
}

.gll-btn--outline {
  background: var(--surface-card);
  color: var(--color-primary);
  border-color: var(--border-subtle);
}
.gll-btn--outline:hover { background: var(--color-primary-soft); }

/* Botón de ícono circular */
.gll-icon-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base);
}
.gll-icon-btn .gll-icon { width: 18px; height: 18px; }
.gll-icon-btn:hover { background: var(--canvas-alt); }

.gll-icon-btn--on-dark {
  width: 38px;
  height: 38px;
  background: rgba(242, 232, 213, 0.1);
  color: var(--beige-200);
  border-color: var(--border-on-dark);
  backdrop-filter: blur(6px);
}
.gll-icon-btn--on-dark:hover { background: rgba(242, 232, 213, 0.2); }

/* --------------------------------------------------------------------------
   6. Píldoras: badge y chip
   -------------------------------------------------------------------------- */
.gll-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  border: 1px solid transparent;
}
.gll-badge .gll-icon { width: 13px; height: 13px; }
.gll-badge--green {
  background: var(--verde-50);
  color: var(--verde-600);
  border-color: rgba(45, 90, 39, 0.16);
}
.gll-badge--orange {
  background: var(--naranja-50);
  color: var(--naranja-600);
  border-color: rgba(212, 122, 26, 0.18);
}

.gll-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-pill);
  padding: 9px 17px;
  cursor: pointer;
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-base), color var(--dur-base),
              border-color var(--dur-base), box-shadow var(--dur-base);
}
.gll-chip:hover { background: var(--canvas-alt); }
.gll-chip[aria-pressed='true'] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px -2px rgba(45, 90, 39, 0.3);
}
.gll-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Píldora estática de zona */
.gll-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-label);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 9px 17px;
  box-shadow: var(--shadow-xs);
}
.gll-pill .gll-icon { width: 14px; height: 14px; color: var(--color-primary); }

/* --------------------------------------------------------------------------
   7. Superficies flotantes (bento)
   -------------------------------------------------------------------------- */
.gll-bento {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-2xl);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.gll-bento--tint { background: var(--canvas-alt); }
.gll-bento--float { box-shadow: var(--shadow-float); }
.gll-bento--flush { padding: 0; overflow: hidden; }

/* Círculo de ícono — así entra el color: en dosis pequeñas */
.gll-icon-dot {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-50);
  color: var(--color-primary);
}
.gll-icon-dot .gll-icon { width: 47%; height: 47%; }
.gll-icon-dot--accent { background: var(--naranja-50); color: var(--color-accent); }
.gll-icon-dot--sm { width: 34px; height: 34px; }

/* Marco de foto */
.gll-photo {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  position: relative;
  background: var(--canvas-alt);
}
.gll-photo--lift { box-shadow: var(--shadow-lift); }
/* La foto se posiciona en absoluto dentro de su marco: así el alto lo define
   siempre el marco (aspect-ratio o fila de rejilla), nunca el alto intrínseco
   del archivo. Evita que una foto vertical estire la composición. */
.gll-photo img,
.gll-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* --------------------------------------------------------------------------
   8. Navegación flotante
   -------------------------------------------------------------------------- */
.gll-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px var(--gutter) 0;
  pointer-events: none;
}

.gll-nav {
  max-width: var(--container-max);
  margin: 0 auto;
  pointer-events: auto;
  background: rgba(252, 251, 248, 0.75);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: 10px 12px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: box-shadow 0.3s, background 0.3s;
}
.gll-nav[data-scrolled='true'] {
  box-shadow: var(--shadow-nav);
  background: rgba(252, 251, 248, 0.9);
}

.gll-nav__logo { display: flex; align-items: center; flex: none; }
.gll-nav__logo img { height: 50px; width: auto; }

.gll-nav__links { display: flex; align-items: center; gap: 4px; }
.gll-nav__links a {
  font-family: var(--font-label);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  transition: background var(--dur-base), color var(--dur-base);
  white-space: nowrap;
}
.gll-nav__links a:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.gll-nav__links a[aria-current='true'] { color: var(--color-primary); background: var(--color-primary-soft); }

.gll-nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.gll-nav__toggle { display: none; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.gll-hero {
  background: var(--wash-green), var(--wash-accent), var(--canvas);
  padding: clamp(1.75rem, 4vw, 3rem) var(--gutter) clamp(2.25rem, 4.5vw, 3.5rem);
}

.gll-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}

.gll-hero__copy {
  padding: clamp(2rem, 3.4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gll-hero__copy .gll-badge { align-self: flex-start; margin-bottom: 22px; }

.gll-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 3.75rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin-bottom: 20px;
  text-wrap: balance;
}

.gll-hero__lead {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 30px;
  max-width: 460px;
}

.gll-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.gll-hero__media {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--grid-gap);
  align-content: start;
}
.gll-hero__media-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}
.gll-hero__feature { aspect-ratio: 16 / 11; }
.gll-hero__media-sub .gll-photo { aspect-ratio: 4 / 3; }

/* Velo de protección: el texto sobre foto siempre lleva gradiente */
.gll-photo__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(61, 43, 26, 0.72));
}
.gll-photo__caption {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.gll-photo__caption-eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--naranja-300);
}
.gll-photo__caption-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--beige-200);
  margin-top: 3px;
}

/* Fila de mini-tarjetas de dato */
.gll-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin-top: var(--grid-gap);
}
.gll-stat { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.gll-stat__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gll-stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--text-strong);
  white-space: nowrap;
}
.gll-stat__label { font-size: 13px; line-height: 1.35; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   10. Historia
   -------------------------------------------------------------------------- */
.gll-historia {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.25rem, 4.5vw, 4.5rem);
  align-items: center;
}
.gll-historia__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}
.gll-historia__media > .gll-photo { grid-column: span 2; aspect-ratio: 16 / 11; }

.gll-figure { padding: 20px; }
.gll-figure__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gll-figure__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--text-strong);
}
.gll-figure__label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gll-prose p { margin-top: 22px; line-height: 1.7; }

.gll-quote { margin-top: 24px; padding: 24px; }
.gll-quote .gll-icon { width: 22px; height: 22px; color: var(--color-accent); }
.gll-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--text-strong);
  margin-top: 10px;
}

.gll-badge-row { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   11. Por qué nos eligen
   -------------------------------------------------------------------------- */
.gll-porque {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--grid-gap);
  margin-top: 48px;
}
.gll-porque__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--grid-gap);
}

.gll-feature { display: flex; flex-direction: column; }
.gll-feature__media { position: relative; aspect-ratio: 16 / 9; }
.gll-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.gll-feature__num {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--cafe-tierra);
  background: rgba(252, 251, 248, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  padding: 7px 15px;
}
.gll-feature__body { padding: 26px; }
.gll-feature__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--text-strong);
  margin-bottom: 12px;
}
.gll-feature__body p { line-height: 1.6; margin-bottom: 18px; }

.gll-reason {
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.gll-reason__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gll-reason__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--color-accent);
}
.gll-reason h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-strong);
  margin-bottom: 10px;
}
.gll-reason p {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  margin-bottom: 16px;
}
.gll-reason .gll-badge,
.gll-feature__body .gll-badge { align-self: flex-start; }

/* --------------------------------------------------------------------------
   12. Clientes
   -------------------------------------------------------------------------- */
.gll-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--grid-gap);
  margin-top: 40px;
}
.gll-cliente {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gll-cliente__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.gll-cliente__logo {
  width: 100%;
  max-width: 132px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}
.gll-cliente__zone {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--canvas-alt);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  flex: none;
}
/* El nombre se ancla abajo para que las tarjetas cuadren aunque un
   nombre ocupe dos líneas. */
.gll-cliente > div:last-child { margin-top: auto; }
.gll-cliente__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-strong);
  line-height: 1.25;
}
.gll-cliente__place {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 6px;
}
.gll-cliente__place .gll-icon { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   13. Galería
   -------------------------------------------------------------------------- */
.gll-galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--grid-gap);
  margin-top: 40px;
}
.gll-galeria__item { min-height: 0; }
.gll-galeria__item--wide { grid-column: span 2; grid-row: span 2; }

/* Elementos ocultos por el filtro de categoría */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   14. Cobertura y contacto
   -------------------------------------------------------------------------- */
.gll-cobertura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.gll-cobertura__prose p { margin-top: 18px; line-height: 1.7; max-width: 520px; }
.gll-zonas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }


/* Panel de contacto — mismo peso visual que el formulario del kit,
   pero la acción es llamar. */
.gll-contacto {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius-3xl);
  text-align: center;
}
.gll-contacto .gll-eyebrow { display: block; margin-bottom: 0; }
.gll-contacto__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--text-strong);
  text-decoration: none;
  margin: 18px 0 10px;
}
.gll-contacto__tel .gll-icon {
  width: 0.72em;
  height: 0.72em;
  color: var(--color-accent);
}
.gll-contacto__tel:hover { color: var(--color-primary); }
.gll-contacto__hours {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-bottom: 26px;
}
.gll-contacto .gll-btn { width: 100%; }
.gll-contacto__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.gll-contacto__note .gll-icon { width: 14px; height: 14px; color: var(--color-primary); }

/* --------------------------------------------------------------------------
   15. Footer — superficie greige que cierra el lienzo claro
   -------------------------------------------------------------------------- */
.gll-footer-wrap {
  background: var(--canvas);
  padding: 0 var(--gutter) clamp(1.25rem, 3vw, 2rem);
}
.gll-footer {
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--surface-footer);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-3xl);
  padding: clamp(2.5rem, 4.5vw, 3.5rem) clamp(1.75rem, 3.5vw, 3rem) 1.75rem;
  box-shadow: var(--shadow-lift);
}
.gll-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-footer);
}
.gll-footer__logo { display: inline-block; }
.gll-footer__logo img { height: 72px; width: auto; }
.gll-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--text-strong);
  margin-top: 20px;
  max-width: 320px;
}
.gll-footer__label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--naranja-600);
  margin-bottom: 16px;
}
.gll-footer__tel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.gll-footer__tel .gll-icon { width: 20px; height: 20px; color: var(--color-accent); }
.gll-footer__tel:hover { color: var(--color-primary); }
.gll-footer__meta {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
  margin-top: 14px;
}
.gll-footer__meta .gll-icon {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  margin-top: 4px;
}
.gll-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   16. Animación de entrada
   -------------------------------------------------------------------------- */
.gll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.gll-reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .gll-nav__links a { padding: 9px 11px; font-size: 13px; }
  .gll-nav__logo img { height: 40px; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 92px; }

  .gll-nav { padding: 10px 12px; }
  .gll-nav__toggle { display: inline-flex; }
  /* Solo se oculta el acceso directo a Cobertura, no el botón de menú
     (ambos son .gll-icon-btn, así que el selector debe ser específico). */
  .gll-nav__actions > a.gll-icon-btn { display: none; }

  /* Menú desplegable en móvil */
  .gll-nav__links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(252, 251, 248, 0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-nav);
    padding: 10px;
  }
  .gll-nav { position: relative; }
  .gll-nav__links[data-open='false'] { display: none; }
  .gll-nav__links a { padding: 12px 16px; font-size: 14.5px; border-radius: var(--radius-md); }

  .gll-hero__grid { grid-template-columns: 1fr; }
  .gll-hero__media { grid-template-rows: auto auto; }
  .gll-hero__feature { min-height: 320px; }
  .gll-stats { grid-template-columns: repeat(2, 1fr); }

  .gll-historia { grid-template-columns: 1fr; }
  .gll-historia__media { order: 2; }

  .gll-porque { grid-template-columns: 1fr; }
  .gll-porque__stack { grid-template-rows: auto auto; }

  .gll-cobertura { grid-template-columns: 1fr; }
  .gll-cobertura__prose p { max-width: none; }

  .gll-galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }

  .gll-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 88px; }

  .gll-nav-wrap { padding-top: 12px; }
  .gll-nav__logo img { height: 36px; }
  .gll-nav .gll-btn--sm { padding: 8px 14px; font-size: 12.5px; }

  .gll-hero__copy { padding: 24px 20px; }
  .gll-hero__media-sub { grid-template-columns: 1fr 1fr; }
  .gll-hero__feature { min-height: 240px; }
  .gll-hero__actions .gll-btn { width: 100%; }
  .gll-stats { grid-template-columns: 1fr 1fr; }
  .gll-stat__value { font-size: 26px; }

  .gll-bento { padding: 22px; border-radius: 26px; }
  .gll-feature__body { padding: 22px; }

  .gll-galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gll-galeria__item--wide { grid-column: span 2; grid-row: span 2; }

  .gll-section-head { align-items: flex-start; }

  .gll-footer { border-radius: 28px; }
  .gll-footer__bottom { flex-direction: column; gap: 6px; }
}

@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;
  }
  .gll-reveal { opacity: 1; transform: none; }
}