/* =========================================================
   GUERRA GOLADA — Maquinaria Agrícola
   Hoja de estilos principal
   Construida sobre Bootstrap 5 (variables de color sobrescritas)
   ========================================================= */

/* ---------- Tokens de marca ---------- */
:root{
  /* Verdes de marca (extraídos del logotipo) */
  --gg-verde-950:#0f2e18;
  --gg-verde-800:#184f28;
  --gg-verde-700:#215c31;
  --gg-verde-600:#2d723d;
  --gg-verde-500:#457d36;
  --gg-verde-100:#e6efe2;

  /* Ámbar/ocre — color de trabajo, cercano a la maquinaria y el trigo */
  --gg-ambar-700:#96650f;
  --gg-ambar-600:#b9770a;
  --gg-ambar-500:#d18f1f;
  --gg-ambar-100:#faf0dc;

  /* Neutros */
  --gg-fondo:#f7f7f4;
  --gg-superficie:#ffffff;
  --gg-borde:#e0e2d9;
  --gg-texto:#20241c;
  --gg-texto-muted:#565c4e;

  /* Tipografía */
  --gg-font-heading:'Oswald', 'Arial Narrow', sans-serif;
  --gg-font-body:'Source Sans 3','Source Sans Pro', system-ui, -apple-system, sans-serif;

  /* Bootstrap overrides */
  --bs-primary:var(--gg-verde-800);
  --bs-primary-rgb:24,79,40;
  --bs-body-font-family:var(--gg-font-body);
  --bs-body-color:var(--gg-texto);
  --bs-body-bg:var(--gg-fondo);
  --bs-link-color:var(--gg-verde-800);
  --bs-link-color-rgb:24,79,40;
  --bs-link-hover-color:var(--gg-verde-600);
  --bs-link-hover-color-rgb:45,114,61;
  --bs-border-radius:.25rem;
  --bs-border-radius-lg:.35rem;
}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  font-family:var(--gg-font-body);
  color:var(--gg-texto);
  background:var(--gg-fondo);
  font-size:1.02rem;
  line-height:1.6;
}

/* Corta el scroll horizontal que provocan las filas .row.g-4/.g-5: su
   gutter (2-3rem) es mayor que el padding lateral por defecto de
   .container de Bootstrap (1.5rem), así que su margen negativo se sale
   un poco del contenedor — apenas se nota en escritorio, pero en móvil
   genera scroll horizontal.
   Se aplica sección a sección (.gg-clip-x) y NO en <main> entero: un
   overflow distinto de "visible" desactiva position:sticky en TODOS los
   descendientes, y <main> también contiene el panel de filtros sticky
   de la tienda. Tampoco se pone en <body> por la misma razón (rompería
   además la cabecera sticky). .gg-footer no tiene contenido sticky, así
   que ahí sí se protege entero. */
.gg-footer{overflow-x:hidden;}
.gg-clip-x{overflow-x:hidden;}

h1,h2,h3,h4,h5,.gg-heading{
  font-family:var(--gg-font-heading);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--gg-verde-950);
  line-height:1.15;
}

h1{font-weight:700;}

p{max-width:62ch;}
.gg-lead{font-size:1.15rem;color:var(--gg-texto-muted);max-width:52ch;}

a{text-decoration:none;}
a.gg-link-underline{text-decoration:underline;text-underline-offset:3px;}

/* ---------- Accesibilidad: foco visible ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--gg-ambar-600);
  outline-offset:2px;
  border-radius:2px;
}

/* Enlace "saltar al contenido" */
.gg-skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  background:var(--gg-verde-950);
  color:#fff;
  padding:.75rem 1.25rem;
  z-index:2000;
  border-radius:0 0 .35rem 0;
}
.gg-skip-link:focus{
  left:0;
  top:0;
}

/* ---------- Iconos SVG en línea (data-gg-icon, rellenados por JS) ----------
   El span que los envuelve fija el tamaño con width/height en línea, pero
   un <span> es inline por defecto y no respeta width/height propios: sin
   esto el SVG que inyecta ggPintarIconos() no hereda ese tamaño y queda
   descentrado respecto al texto vecino (p. ej. iconos de contacto del pie). */
[data-gg-icon]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:0;
}
[data-gg-icon] svg{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- Utilidades ---------- */
.gg-bg-verde{background:var(--gg-verde-800);}
.gg-bg-verde-950{background:var(--gg-verde-950);}
.gg-bg-verde-100{background:var(--gg-verde-100);}
.gg-bg-ambar-100{background:var(--gg-ambar-100);}
.text-gg-verde{color:var(--gg-verde-800) !important;}
.text-gg-ambar{color:var(--gg-ambar-600) !important;}
.text-gg-muted{color:var(--gg-texto-muted) !important;}
/* padding-top/bottom (nunca el shorthand "Xrem 0"): estas clases también
   se usan directamente sobre .container en varias plantillas (hero,
   archive-product, index, page, search, 404) — el shorthand ponía el
   padding lateral a 0, pisando el de .container de Bootstrap y
   desalineando el contenido respecto al resto de la página (visible
   sobre todo en móvil, cuando una fila con gutter negativo se salía del
   viewport y creaba scroll horizontal). */
.gg-section{padding-top:4.5rem;padding-bottom:4.5rem;}
@media (max-width:767.98px){.gg-section{padding-top:3rem;padding-bottom:3rem;}}
.gg-section-sm{padding-top:2.75rem;padding-bottom:2.75rem;}
.gg-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--gg-font-heading);
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--gg-ambar-700);
  margin-bottom:.5rem;
}
.gg-eyebrow::before{
  content:"";
  width:22px;height:3px;background:var(--gg-ambar-600);display:inline-block;border-radius:2px;
}
.gg-max-w{max-width:640px;}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--gg-font-heading);
  font-weight:500;
  letter-spacing:.02em;
  padding:.65rem 1.4rem;
  border-radius:.3rem;
  border-width:2px;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-lg{padding:.8rem 1.75rem;font-size:1.05rem;}

.btn-gg-primario{
  background:var(--gg-verde-800);
  border-color:var(--gg-verde-800);
  color:#fff;
}
.btn-gg-primario:hover,.btn-gg-primario:focus{
  background:var(--gg-verde-950);
  border-color:var(--gg-verde-950);
  color:#fff;
  box-shadow:0 10px 18px -8px rgba(15,46,24,.45);
}
.btn-gg-ambar{
  background:var(--gg-ambar-500);
  border-color:var(--gg-ambar-500);
  color:var(--gg-verde-950);
}
.btn-gg-ambar:hover,.btn-gg-ambar:focus{
  background:var(--gg-ambar-600);
  border-color:var(--gg-ambar-600);
  color:var(--gg-verde-950);
  box-shadow:0 10px 18px -8px rgba(150,101,15,.4);
}
.btn-gg-outline{
  background:transparent;
  border-color:var(--gg-verde-800);
  color:var(--gg-verde-800);
}
.btn-gg-outline:hover,.btn-gg-outline:focus{
  background:var(--gg-verde-800);
  color:#fff;
  box-shadow:0 10px 18px -8px rgba(15,46,24,.3);
}
.btn-gg-outline-light{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:#fff;
}
.btn-gg-outline-light:hover,.btn-gg-outline-light:focus{
  background:#fff;
  border-color:#fff;
  color:var(--gg-verde-950);
}

/* ---------- Cabecera fija (sticky) al hacer scroll ----------
   Solo la barra de navegación queda fija; la franja superior de aviso
   se desplaza con la página. Sombra añadida por JS (ggPintarCabeceraSticky
   en main.js) solo cuando hay scroll, para no dejarla "flotando" en el
   tope de la página. */
header{
  position:sticky;
  top:0;
  z-index:1030;
}
/* Deja hueco a la barra de administración de WordPress (fija arriba del
   todo) cuando se navega el sitio con sesión iniciada, para que no tape
   la cabecera sticky. */
body.admin-bar header{
  top:var(--wp-admin--admin-bar--height, 32px);
}
.gg-navbar{
  transition:box-shadow .2s ease;
}
header.gg-header-stuck .gg-navbar{
  box-shadow:0 2px 12px rgba(15,46,24,.12);
}

/* ---------- Navbar ---------- */
.gg-navbar{
  background:var(--gg-superficie);
  border-bottom:1px solid var(--gg-borde);
  padding-top:.6rem;
  padding-bottom:.6rem;
}
/* .navbar-brand y .navbar-brand-text SIN scope a .gg-navbar: el pie
   (.gg-footer) reutiliza las mismas clases para su propio logotipo y
   necesita la misma tipografía/alineación base; antes solo heredaba el
   color blanco y se veía sin ningún estilo tipográfico. */
.navbar-brand{display:flex;align-items:center;gap:.65rem;}
.gg-navbar .navbar-brand img{height:44px;width:auto;}
.navbar-brand-text{
  font-family:var(--gg-font-heading);
  font-size:1.25rem;
  font-weight:700;
  color:var(--gg-verde-950);
  line-height:1.05;
}
.navbar-brand-text small{
  display:block;
  font-family:var(--gg-font-body);
  font-weight:400;
  font-size:.68rem;
  color:var(--gg-texto-muted);
  letter-spacing:.03em;
}
.gg-navbar .nav-link{
  font-family:var(--gg-font-heading);
  font-weight:500;
  color:var(--gg-texto);
  padding:.5rem .9rem !important;
  border-bottom:3px solid transparent;
}
.gg-navbar .nav-link:hover{color:var(--gg-verde-800);}
.gg-navbar .nav-link.active{
  color:var(--gg-verde-800);
  border-bottom-color:var(--gg-ambar-600);
}
.gg-navbar .btn-gg-whatsapp{
  background:var(--gg-verde-800);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--gg-font-heading);
  font-weight:500;
  padding:.55rem 1.1rem;
  border-radius:.3rem;
}
.gg-navbar .btn-gg-whatsapp:hover{background:var(--gg-verde-950);}

/* Etiqueta junto al icono de lupa/carrito, solo visible en el desplegable
   móvil (d-lg-none en el propio HTML) — en escritorio son solo iconos. */
.gg-navbar-utilidades-texto{
  font-size:.7rem;
  font-weight:500;
  color:var(--gg-texto);
}

/* ---------- Menú desplegable móvil (navbar-expand-lg colapsado) ----------
   Bootstrap por sí solo solo apila los elementos con las utilidades mt-3
   ya puestas en el HTML: sin nada más de estilo cada icono queda como un
   bloque suelto con mucho aire alrededor (ver captura del cliente). Aquí
   se le da estructura de panel: enlaces con separador y área de toque
   más generosa, iconos de utilidades en una fila con etiqueta, y el
   WhatsApp como CTA final a todo el ancho. */
@media (max-width:991.98px){
  .gg-navbar .navbar-collapse{
    margin-top:.75rem;
    padding-top:.25rem;
    border-top:1px solid var(--gg-borde);
  }
  .gg-navbar .navbar-nav{margin-bottom:.25rem;}
  .gg-navbar .navbar-nav .nav-item{border-bottom:1px solid var(--gg-borde);}
  .gg-navbar .navbar-nav .nav-item:last-child{border-bottom:none;}
  .gg-navbar .nav-link{padding:.85rem .25rem !important;}

  .gg-navbar-utilidades{
    width:100%;
    justify-content:center;
    gap:3rem !important;
    padding:.85rem .25rem;
    margin-left:0 !important;
    margin-right:0 !important;
    border-bottom:1px solid var(--gg-borde);
  }
  .gg-navbar-utilidades .gg-nav-icon-link{
    width:auto;
    height:auto;
    flex-direction:column;
    gap:.25rem;
    border-radius:.3rem;
    padding:.25rem .5rem;
  }
  .gg-navbar-utilidades .gg-nav-icon-link:hover,
  .gg-navbar-utilidades .gg-nav-icon-link:focus-visible{background:var(--gg-verde-100);}
  .gg-navbar-utilidades .gg-cart-count{top:-2px;right:2px;}

  .gg-navbar .btn-gg-whatsapp{
    width:100%;
    justify-content:center;
    padding:.8rem 1.1rem;
  }
}

/* ---------- Barra de aviso superior ---------- */
.gg-topbar{
  background:var(--gg-verde-950);
  color:#dfeadd;
  font-size:.85rem;
}
.gg-topbar a{color:#fff;}

/* ---------- Hero ---------- */
.gg-hero{
  background:var(--gg-verde-100);
  overflow:hidden;
  position:relative;
  border-bottom:1px solid var(--gg-borde);
}
/* El botón outline es transparente por diseño (ver .btn-gg-outline): sin
   esto, donde se solapa con el acento decorativo de la esquina se le
   transparentaría un tinte verde que no lleva en ningún otro sitio del
   sitio. Mismo verde que el fondo del hero, así se ve igual que antes de
   añadir la decoración.
   La regla de :hover/:focus de abajo es necesaria aparte: tiene la misma
   especificidad que .btn-gg-outline:hover de más arriba y, al ir después
   en el archivo, se la comía — el botón se quedaba con el fondo verde
   claro (en vez de pasar a verde oscuro) pero el texto sí cambiaba a
   blanco, e ilegible. */
.gg-hero .btn-gg-outline{background:var(--gg-verde-100);}
.gg-hero .btn-gg-outline:hover,.gg-hero .btn-gg-outline:focus{background:var(--gg-verde-800);color:#fff;}
.gg-hero-figure{
  position:relative;
  line-height: .95rem;
}
/* Hueco de la portada mientras no se configura una imagen real (Apariencia
   → Personalizar → Inicio): imagen por defecto de marca (gg_imagen_por_
   defecto(), igual que los productos sin foto). El aviso de configuración
   (solo para administradores) va en la esquina superior para no chocar
   con la insignia "+40" (inferior). */
.gg-hero-placeholder{
  aspect-ratio:900/650;
  border-radius:.35rem;
  overflow:hidden;
  background:linear-gradient(180deg,var(--gg-verde-100) 0%, #eef3ea 100%);
  border:1px solid var(--gg-borde);
  box-shadow:0 16px 32px -12px rgba(15,46,24,.35);
}
.gg-hero-placeholder-aviso{
  position:absolute;
  top:.75rem;
  right:.75rem;
  z-index:1;
  max-width:min(78%,320px);
  margin:0;
  padding:.5rem .75rem;
  font-size:.72rem;
  line-height:1.3;
  color:#fff;
  background:rgba(15,46,24,.55);
  border-radius:.3rem;
  backdrop-filter:blur(2px);
}
.gg-hero-badge{
  position:absolute;
  left:-1rem;
  bottom:-1rem;
  z-index:1;
  background:var(--gg-ambar-500);
  color:var(--gg-verde-950);
  padding:1rem 1.4rem;
  border-radius:.35rem;
  box-shadow:0 2px 0 var(--gg-ambar-700),0 20px 34px -16px rgba(150,101,15,.55);
  font-family:var(--gg-font-heading);
  max-width:210px;
}
.gg-hero-badge strong{display:block;font-size:1.9rem;line-height:1;}
.gg-hero-badge span{display:block;font-size:.85rem;line-height:.95rem;margin-top:5px;font-weight:400;font-family:var(--gg-font-body);}
@media (max-width:575.98px){
  /* position:relative (no static) + z-index: en móvil se superpone al
     borde inferior de la imagen/ilustración a propósito (margin-top
     negativo) y debe quedar siempre por encima de ella. */
  .gg-hero-badge{position:relative;margin-top:-2.5rem;margin-left:1rem;box-shadow:0 2px 0 var(--gg-ambar-700),0 14px 26px -14px rgba(150,101,15,.55);}
}

/* Buscador de catálogo: formulario de WooCommerce (get_product_search_form)
   reutilizado en 3 sitios (widget de filtros, hero y desplegable de la
   cabecera) con la misma base .gg-buscador-catalogo. */
.gg-buscador-catalogo .woocommerce-product-search{display:flex;gap:.5rem;}
.gg-buscador-catalogo .woocommerce-product-search .search-field{
  flex:1;
  min-width:0;
  border:1px solid var(--gg-borde);
  border-radius:.3rem;
  padding:.6rem .8rem;
  font-family:var(--gg-font-body);
  color:var(--gg-texto);
  background:var(--gg-superficie);
}
.gg-buscador-catalogo .woocommerce-product-search .search-field:focus{
  outline:none;
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
.gg-buscador-catalogo .woocommerce-product-search button[type="submit"]{
  font-family:var(--gg-font-heading);
  font-weight:500;
  letter-spacing:.02em;
  padding:.6rem 1.1rem;
  border-radius:.3rem;
  border:2px solid var(--gg-verde-800);
  background:var(--gg-verde-800);
  color:#fff;
  cursor:pointer;
}
.gg-buscador-catalogo .woocommerce-product-search button[type="submit"]:hover{
  background:var(--gg-verde-950);
  border-color:var(--gg-verde-950);
}
.gg-hero-buscador{max-width:420px;}
.gg-hero-buscador-titulo{
  font-family:var(--gg-font-heading);
  font-weight:500;
  font-size:.9rem;
  color:var(--gg-texto-muted);
  margin-bottom:.5rem;
}

/* ---------- Acentos decorativos de esquina (facetas verdes en capas) ----------
   Mismo grafismo de marca usado en las tarjetas de visita 2026 (esquina
   con capas de verde y sombra suave, dejando el resto de la superficie
   despejado para el contenido). Requiere que el contenedor que lo aloja
   tenga position:relative + overflow:hidden (.gg-seccion-decorada). El
   z-index negativo lo mete DETRÁS del contenido en flujo normal de esa
   misma sección sin salirse de ella (contenido dentro de un contexto de
   apilamiento no puede quedar por debajo del fondo de sus antepasados). */
/* isolation:isolate crea contexto de apilamiento propio: sin esto,
   position:relative no basta y el z-index:-1 del acento decorativo se
   escapa por debajo del fondo opaco de la sección (visible solo por
   casualidad en secciones sin color de fondo propio). */
.gg-seccion-decorada{position:relative;overflow:hidden;isolation:isolate;}
/* top:0 + bottom:0 estira el elemento a todo el alto real de la sección.
   width:auto + aspect-ratio calcula el ancho a partir de ese alto (hasta
   max-width). height:100% + background-size:cover + rotate(180deg) en
   los modificadores rellena el hueco por completo con la pieza (girada
   para que el ángulo de las facetas quede igual de natural puesto del
   revés) en vez de dejar aire vacío por debajo, como pasaba con
   background-size:contain. */
.gg-decor-esquina{
  position:absolute;
  top:0;
  bottom:0;
  width:auto;
  max-width:380px;
  aspect-ratio:960/1075;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:-1;
  opacity:.1;
}
.gg-decor-esquina--izq{
  left:0;
  background-image:url('../img/decor-facetas-izquierda.png');
  background-position:center;
  background-size:cover;
  transform:rotate(180deg);
  height:100%;
  max-width: inherit;
}
.gg-decor-esquina--der{
  right:0;
  background-image:url('../img/decor-facetas-derecha.png');
  background-position:center;
  background-size:cover;
  transform:rotate(180deg);
  height:100%;
  max-width: inherit;
}
@media (max-width:767.98px){
  .gg-decor-esquina{max-width:150px;}
}
.deco {
    position: relative;
}
.deco:before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: url('../img/decor-facetas-izquierda.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
    opacity:.05;
    left: 0px;
    right: 0px;
    top: 0px;
    border: 0px;
}
/* Desplegable de búsqueda de la cabecera (toggle con la lupa) */
.gg-header-buscador{
  border-top:1px solid var(--gg-borde);
  background:var(--gg-superficie);
}
.gg-header-buscador .gg-buscador-catalogo{
  max-width:520px;
  margin:0 auto;
  padding:1rem 0;
}
.gg-header-buscador .search-field{
  padding-top:.7rem;
  padding-bottom:.7rem;
}

/* Motivo geométrico (eco del isotipo poligonal del logo) */
.gg-lowpoly-divider{
  display:block;
  width:100%;
  height:auto;
  line-height:0;
}
.gg-lowpoly-divider svg{display:block;width:100%;height:48px;}
@media (max-width:575.98px){.gg-lowpoly-divider svg{height:28px;}}

/* ---------- Franja de confianza ---------- */
.gg-trust{
  background:var(--gg-verde-950);
  color:#fff;
}
.gg-trust-item{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.gg-trust-item svg{flex:0 0 auto;color:var(--gg-ambar-500);}
.gg-trust-item strong{display:block;font-family:var(--gg-font-heading);font-size:1rem;}
.gg-trust-item span{color:#cfe0cc;font-size:.85rem;}

/* ---------- Tarjetas de categoría ---------- */
.gg-cat-card{
  display:block;
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:1.5rem 1.25rem;
  height:100%;
  color:var(--gg-texto);
  box-shadow:0 1px 2px rgba(15,46,24,.04);
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gg-cat-card:hover,.gg-cat-card:focus-visible{
  border-color:var(--gg-verde-600);
  background:var(--gg-verde-100);
  color:var(--gg-texto);
  box-shadow:0 10px 24px -8px rgba(15,46,24,.18);
  transform:translateY(-3px);
}
.gg-cat-card .gg-cat-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gg-verde-100);
  border-radius:.4rem;
  color:var(--gg-verde-800);
  margin-bottom:1rem;
  transition:background-color .2s ease, transform .2s ease;
}
.gg-cat-card:hover .gg-cat-icon{background:#fff;transform:scale(1.06);}
.gg-cat-card h3{font-size:1.1rem;margin-bottom:.35rem;}
.gg-cat-card p{font-size:.9rem;color:var(--gg-texto-muted);margin-bottom:0;}

/* ---------- Tarjetas de "Por qué elegirnos" ----------
   Antes era texto suelto con un check encima: mismo lenguaje visual que
   .gg-cat-card (tarjeta + icono en caja redondeada) para que no se
   sienta como una lista aparte del resto de la página. */
.gg-razon-card{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:1.35rem 1.25rem;
  box-shadow:0 1px 2px rgba(15,46,24,.04);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gg-razon-card:hover{
  border-color:var(--gg-verde-600);
  box-shadow:0 10px 24px -8px rgba(15,46,24,.18);
  transform:translateY(-3px);
}
.gg-razon-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gg-verde-800);
  border-radius:50%;
  color:#fff;
  margin-bottom:.9rem;
  box-shadow:0 4px 10px -3px rgba(15,46,24,.45);
  transition:background-color .2s ease, transform .2s ease;
}
.gg-razon-card:hover .gg-razon-icon{background:var(--gg-verde-950);transform:scale(1.06);}
.gg-razon-icon svg{width:21px;height:21px;}
.gg-razon-card h3{font-size:1.05rem;}

/* ---------- Tarjetas de contacto (página Contacto) ---------- */
.gg-contacto-card{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:1.85rem 1.25rem;
  box-shadow:0 1px 2px rgba(15,46,24,.04);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gg-contacto-card:hover{
  border-color:var(--gg-verde-600);
  box-shadow:0 14px 28px -10px rgba(15,46,24,.18);
  transform:translateY(-3px);
}
.gg-contacto-icon{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
  border-radius:50%;
  background:linear-gradient(150deg,var(--gg-verde-700) 0%,var(--gg-verde-950) 100%);
  color:#fff;
  box-shadow:0 8px 18px -6px rgba(15,46,24,.4);
  transition:transform .2s ease;
}
.gg-contacto-card:hover .gg-contacto-icon{transform:scale(1.08);}
.gg-contacto-icon svg{width:28px;height:28px;}
.gg-contacto-card h2{font-size:1rem;margin-bottom:.35rem;}

/* ---------- Placeholder de imagen de producto (estilo low-poly de marca) ---------- */
.gg-img-placeholder{
  aspect-ratio:4/3;
  width:100%;
  border-radius:.35rem .35rem 0 0;
  overflow:hidden;
  position:relative;
  background:linear-gradient(180deg,var(--gg-verde-100) 0%, #eef3ea 100%);
  border:1px solid var(--gg-borde);
  border-bottom:none;
}
.gg-img-placeholder img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gg-img-placeholder svg{width:100%;height:auto;display:block;}
.gg-img-placeholder .gg-img-tag{
  position:absolute;
  top:.6rem;
  left:.6rem;
  background:rgba(15,46,24,.85);
  color:#fff;
  font-size:.7rem;
  padding:.2rem .55rem;
  border-radius:.25rem;
  font-family:var(--gg-font-heading);
  letter-spacing:.02em;
}
/* Ficha/tarjeta de producto sin foto todavía (ver woocommerce/content-
   product.php) y resto de imágenes por defecto (gg_imagen_por_defecto()
   en inc/template-tags.php): icono propio sobre el degradado de marca, en
   vez del icono gris genérico que pone WooCommerce por defecto. */
.gg-img-sinfoto{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  width:100%;
  height:100%;
  color:var(--gg-texto-muted);
}
.gg-img-sinfoto svg{
  width:56px;height:56px;
  padding:14px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  color:var(--gg-verde-600);
}
.gg-img-sinfoto span{
  font-size:.75rem;
  font-family:var(--gg-font-heading);
  letter-spacing:.03em;
}
.gg-img-sinfoto-aviso{
  max-width:80%;
  text-align:center;
  font-size:.75rem;
}

/* ---------- Tarjetas de producto ---------- */
.gg-card{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.35rem;
  height:100%;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 2px rgba(15,46,24,.04);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.gg-card:hover{
  box-shadow:0 14px 28px -10px rgba(15,46,24,.16);
  transform:translateY(-3px);
  border-color:var(--gg-verde-600);
}
.gg-card:hover h3 a{color:var(--gg-verde-800);}
.gg-card-body{
  padding:1.1rem 1.15rem 1.25rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.gg-card-cat{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--gg-texto-muted);
  margin-bottom:.25rem;
}
.gg-card h3{font-size:1.05rem;margin-bottom:.4rem;}
.gg-card h3 a{color:var(--gg-texto);}
.gg-card h3 a:hover{color:var(--gg-verde-800);}
.gg-card .gg-price{
  font-family:var(--gg-font-heading);
  font-size:1.15rem;
  color:var(--gg-verde-800);
  margin:.35rem 0 .75rem;
}
.gg-card .gg-price small{font-family:var(--gg-font-body);color:var(--gg-texto-muted);font-size:.8rem;}
.gg-card .gg-card-actions{margin-top:auto;display:flex;gap:.5rem;}

.badge.gg-badge-nuevo{background:var(--gg-verde-700);color:#fff;font-weight:500;}
.badge.gg-badge-usado{background:#7a6a3f;color:#fff;font-weight:500;}
.badge.gg-badge-alquiler{background:var(--gg-ambar-500);color:var(--gg-verde-950);font-weight:600;}

/* ---------- Filtros de catálogo ---------- */
.gg-filtros{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:1.25rem;
}
.gg-filtros legend{
  font-family:var(--gg-font-heading);
  font-size:.95rem;
  color:var(--gg-verde-950);
  margin-bottom:.5rem;
  padding-top:.5rem;
  border-top:1px solid var(--gg-borde);
}
.gg-filtros legend:first-of-type{border-top:none;padding-top:0;}
.form-check-input:checked{background-color:var(--gg-verde-800);border-color:var(--gg-verde-800);}
.form-check-input:focus{border-color:var(--gg-verde-600);box-shadow:0 0 0 .2rem rgba(24,79,40,.2);}

/* ---------- Instagram (portada) ----------
   Mosaico cuadrado con icono superpuesto al pasar el ratón, igual de
   sencillo tanto para las fotos reales (API de Instagram, ver
   inc/instagram.php) como para el mosaico de marca que se ve mientras no
   hay token configurado (misma idea que la imagen de portada del hero). */
.gg-instagram-item{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  border-radius:.4rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,46,24,.04);
}
.gg-instagram-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.gg-instagram-item-icono{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin:auto;
  color:#fff;
  background:rgba(15,46,24,0);
  opacity:0;
  transition:opacity .2s ease, background-color .2s ease;
}
a.gg-instagram-item:hover img{transform:scale(1.06);}
a.gg-instagram-item:hover .gg-instagram-item-icono,
a.gg-instagram-item:focus-visible .gg-instagram-item-icono{
  opacity:1;
  background:rgba(15,46,24,.45);
}
.gg-instagram-item--muestra{
  background:linear-gradient(180deg,var(--gg-verde-100) 0%, #eef3ea 100%);
  border:1px solid var(--gg-borde);
}
.gg-instagram-item--muestra .gg-instagram-item-icono{
  width:56px;
  height:56px;
  padding:14px;
  border-radius:50%;
  opacity:1;
  color:var(--gg-verde-600);
  background:rgba(255,255,255,.6);
}
span.gg-instagram-item--muestra{cursor:default;}
a.gg-instagram-item--muestra:hover .gg-instagram-item-icono,
a.gg-instagram-item--muestra:focus-visible .gg-instagram-item-icono{
  color:#fff;
  background:var(--gg-verde-600);
}

/* Mismo padding/proporción que .btn-gg-whatsapp de la cabecera (más
   compacto que el padding por defecto de .btn), pero conservando el
   estilo de borde de .btn-gg-outline en vez del fondo relleno. */
.gg-btn-instagram{padding:.55rem 1.1rem;}

/* ---------- Sección oscura / CTA ---------- */
.gg-cta{
  background:var(--gg-verde-950);
  color:#fff;
  border-radius:.4rem;
}
.gg-cta h2{color:#fff;}
.gg-cta p{color:#cfe0cc;}

/* ---------- Pasos (proceso de alquiler) ---------- */
.gg-paso{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.gg-paso-num{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--gg-verde-800);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--gg-font-heading);
  font-weight:600;
}

/* ---------- Footer ---------- */
.gg-footer{
  background:var(--gg-verde-950);
  color:#cfe0cc;
}
.gg-footer h2,.gg-footer h3{color:#fff;font-size:1rem;}
.gg-footer a{color:#cfe0cc;}
.gg-footer a:hover{color:#fff;}
.gg-footer hr{border-color:rgba(255,255,255,.15);}
.gg-footer .navbar-brand-text{color:#fff;}
/* a.gg-social (no solo .gg-social) por el mismo motivo que el :hover de
   abajo: .gg-footer a ya fija color:#cfe0cc con la misma especificidad
   más la etiqueta "a", así que sin esto el icono salía en ese verde
   clarito en vez del blanco previsto. */
a.gg-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#fff;
}
/* a.gg-social (no solo .gg-social) para igualar la especificidad de
   .gg-footer a:hover y ganarle por orden de aparición: si no, ese color
   blanco genérico de los enlaces del pie al pasar el ratón se imponía
   aquí y el icono se quedaba blanco sobre el fondo blanco del círculo. */
a.gg-social:hover{background:#fff;color:var(--gg-verde-950);}

/* ---------- Botón flotante de WhatsApp ---------- */
.gg-whatsapp-float{
  position:fixed;
  right:1.1rem;
  bottom:1.1rem;
  z-index:1050;
  background:#25913f;
  color:#fff;
  width:58px;height:58px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.gg-whatsapp-float:hover{background:#1c7a32;color:#fff;}

/* ---------- Formularios ---------- */
.form-label{font-weight:600;font-size:.92rem;}
.form-control:focus,.form-select:focus{
  border-color:var(--gg-verde-600);
  box-shadow:0 0 0 .2rem rgba(24,79,40,.15);
}
.gg-form-card{
  background:var(--gg-superficie);
  border:1px solid var(--gg-borde);
  border-radius:.4rem;
  padding:2rem;
}

/* ---------- Migas de pan ---------- */
.gg-breadcrumb-bar{background:var(--gg-verde-100);border-bottom:1px solid var(--gg-borde);}
.breadcrumb-item + .breadcrumb-item::before{color:var(--gg-texto-muted);}

/* ---------- Tabla de especificaciones ---------- */
.gg-specs th{
  width:40%;
  font-family:var(--gg-font-heading);
  font-weight:500;
  color:var(--gg-verde-950);
  background:var(--gg-verde-100);
}
.gg-specs td,.gg-specs th{padding:.6rem .8rem;border-color:var(--gg-borde);}

/* ---------- Accordion (alquiler / FAQ) ---------- */
.accordion-button{
  font-family:var(--gg-font-heading);
  font-weight:500;
  color:var(--gg-verde-950);
}
.accordion-button:not(.collapsed){
  background:var(--gg-verde-100);
  color:var(--gg-verde-950);
  box-shadow:none;
}
.accordion-button:focus{box-shadow:0 0 0 .2rem rgba(24,79,40,.15);}

/* ---------- Miniaturas galería producto ---------- */
.gg-thumb{
  border:2px solid transparent;
  border-radius:.3rem;
  overflow:hidden;
  cursor:pointer;
  background:none;
  padding:0;
}
.gg-thumb.active{border-color:var(--gg-ambar-600);}
.gg-thumb:hover{border-color:var(--gg-verde-600);}

/* ---------- Sección "quiénes somos" imagen ---------- */
.gg-imgblock{
  border-radius:.4rem;
  overflow:hidden;
  border:1px solid var(--gg-borde);
}

/* Line clamp para descripciones cortas */
.gg-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Visualmente oculto pero accesible */
.visually-hidden-focusable:not(:focus):not(:focus-within){
  clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;
}