/*
Theme Name: GEE-Renovables (Hello Elementor Child)
Theme URI: https://gee-renovables.com
Description: Tema hijo de Hello Elementor para GEE-Renovables SAS. Contiene el sistema de diseño completo de la maqueta (colores, tipografía, radios, sombras, botones, chips/badges y animaciones de hover) para que todo el sitio use exactamente los mismos valores sin depender de "CSS adicional" ni de plugins de terceros. Elementor sigue siendo la herramienta de edición para todas las páginas.
Author: Claude (para Diseño GEE)
Template: hello-elementor
Version: 1.76.2
Text Domain: gee-renovables-child
*/

/* ============================================================
   SISTEMA DE DISEÑO — tomado 1:1 de la maqueta aprobada
   (mockup.html, sección "DESIGN TOKENS"). No inventar valores
   nuevos aquí: si algo falta, se agrega revisando la maqueta.
   ============================================================ */

:root{
  /* Colores fijos de marca — nunca cambian entre claro/oscuro */
  --carbon:#17130F;       /* casi negro cálido — bandas oscuras / texto principal */
  --carbon-soft:#241C15;  /* superficie sobre banda oscura */
  --arena:#FBF7F1;        /* fondo cálido tipo papel */
  --arena-dim:#F2EAE0;    /* superficie de tarjeta sobre banda clara */
  --bruma:#E4D9C9;        /* línea/borde sutil sobre fondo claro */
  --tierra:#6E5D4C;       /* texto secundario sobre fondo claro */
  --tierra-dark:#C9BCAA;  /* texto secundario sobre fondo oscuro */
  --sol:#FF6A1A;          /* acento naranja — sol/calculadora/fondo oscuro */
  --sol-ink:var(--verde); /* acento de texto en modo claro = verde de marca */
  --amanecer:#FFB627;     /* amarillo dorado — fondos oscuros, calificaciones, avisos */
  --ember:#C8460A;        /* hover/presionado del naranja */
  --exito:#3F7D4E;        /* verde semántico (éxito/ahorro), desaturado */
  --verde:#0B7A34;        /* acento de marca principal — verde del ícono del logo */
  --verde-light:#44A72E;  /* verde claro del logo, para gradientes */
  --verde-2:#085C28;      /* hover/presionado del verde */

  /* Radios, ancho máximo y sombras */
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:28px;
  --maxw:1180px;
  --shadow-1:0 1px 2px rgba(23,19,15,.06), 0 8px 24px -12px rgba(23,19,15,.18);
  --shadow-2:0 24px 48px -20px rgba(23,19,15,.35);

  /* Colores "de rol" — modo claro (por defecto) */
  --page-bg:var(--arena);
  --page-ink:var(--carbon);
  --page-ink-muted:var(--tierra);
  --surface:var(--arena-dim);
  --surface-border:var(--bruma);
  --input-bg:var(--arena);
}

/* Modo oscuro — el toggle de la Fase 5 pone data-site-theme="dark" en <html> */
:root[data-site-theme="dark"]{
  --page-bg:var(--carbon);
  --page-ink:var(--arena);
  --page-ink-muted:var(--tierra-dark);
  --surface:var(--carbon-soft);
  --surface-border:rgba(251,247,241,.14);
  --input-bg:var(--carbon-soft);
  --sol-ink:var(--amanecer);
}

/* ============================================================
   BASE — tipografía y reglas globales
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
/* Sin esto, cualquier <button> del sitio que no fije su propio
   "color" (como .option-card de la Calculadora, Bloque 8) usa el
   color de texto por defecto del navegador para controles de
   formulario, que no seguía el modo oscuro del sitio y se quedaba en
   negro sobre fondo oscuro — encontrado en vivo con las tarjetas de
   ciudad/tipo de predio de la Calculadora en modo oscuro. Corregido
   de raíz para cualquier botón del sitio, no solo ahí: cualquier
   regla más específica que ya fije su propio color (.btn, .chip,
   .toggle-row button...) sigue ganando igual, esto solo cubre los
   botones que no dicen nada. */
button{ font:inherit; color:inherit; }
/* El tema padre (Hello Elementor) traía su propio reset.css que,
   entre otras cosas, quitaba el marcador de viñeta de cualquier
   <li> de interfaz aunque no estuviera dentro de un <ul>/<ol> — el
   menú principal (header.php) imprime cada ítem como <li> directo
   dentro de un contenedor flex (".navlinks"), sin envoltorio <ul>.
   Sin ese reset del padre, cada enlace del menú mostraba un punto de
   viñeta real del navegador pegado al texto. Se limita a los menús
   de interfaz (no a listas dentro de artículos/páginas editadas en
   WordPress, que sí deben poder mostrar viñetas reales si el
   contenido las usa). */
.navlinks li,
#siteFooter li{ list-style:none; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  background:var(--page-bg);
  color:var(--page-ink);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* SIN transition en background/color: ver nota de la Fase 3 más abajo
     (bug real de navegador con CSS custom properties encadenadas +
     transition al cambiar por un atributo en un ancestro). */
}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--page-ink);
}

h1{ font-size:clamp(2.4rem, 1.6rem + 3.2vw, 4rem); }

.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; }

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sol-ink);
  display:inline-flex;align-items:center;gap:.5em;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--verde); flex:none; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

/* ============================================================
   BOTONES — 4 variantes de la maqueta
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.85em 1.5em;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.96rem;cursor:pointer;white-space:nowrap;
  text-decoration:none;font-style:normal;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-block{ width:100%; }
.btn-sm{ padding:.6em 1.1em; font-size:.86rem; }

/* Primario — verde de marca */
.btn-primary{ background:var(--verde); color:var(--arena); box-shadow:0 10px 24px -10px rgba(11,122,52,.5); }
.btn-primary:hover{ background:var(--verde-2); }

/* Primario sobre fondo oscuro — pasa a naranja para contrastar con el carbón */
.on-dark .btn-primary{ background:var(--sol); color:#1A0D03; box-shadow:0 10px 24px -10px rgba(255,106,26,.65); }
.on-dark .btn-primary:hover{ background:var(--ember); }

/* Ghost — sobre fondo oscuro */
.btn-ghost-dark{ background:transparent; border-color:rgba(251,247,241,.28); color:var(--arena); }
.btn-ghost-dark:hover{ border-color:var(--amanecer); color:var(--amanecer); }

/* Ghost — sobre fondo claro */
.btn-ghost-light{ background:transparent; border-color:var(--surface-border); color:var(--page-ink); }
.btn-ghost-light:hover{ border-color:var(--verde); color:var(--sol-ink); }

/* Alerta — producto agotado / "Consulta por este producto" */
.btn-stock-alert{ background:var(--sol); color:#1A0D03; box-shadow:0 10px 24px -10px rgba(255,106,26,.55); }
.btn-stock-alert:hover{ background:var(--ember); color:var(--arena); }

/* ============================================================
   CHIPS Y BADGES — atributos técnicos, marca, categoría, agotado
   ============================================================ */

.chip{
  display:inline-flex;align-items:center;gap:.4em;
  border:1px solid var(--surface-border);border-radius:999px;
  padding:.45em .95em;font-size:.82rem;font-weight:600;
  color:var(--page-ink-muted);background:var(--page-bg);
  cursor:pointer;text-decoration:none;font-style:normal;transition:border-color .15s;
}
.chip:hover{ border-color:var(--verde); }
.chip[aria-pressed="true"]{ background:var(--page-ink); border-color:var(--page-ink); color:var(--page-bg); }

.badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.04em;
  padding:.35em .7em;border-radius:6px;
  background:rgba(11,122,52,.12);color:var(--sol-ink);font-weight:600;
}
.badge-dark{ background:rgba(23,19,15,.72); color:var(--amanecer); backdrop-filter:blur(2px); }
.badge-stock{ background:rgba(255,106,26,.14); color:var(--ember); } /* "Agotado" */

/* ============================================================
   TARJETAS — hover de elevación, usado en producto/blog/proyecto
   ============================================================ */

.card{
  background:var(--surface);border:1px solid var(--surface-border);
  border-radius:var(--radius-m);padding:22px;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-1); border-color:var(--verde); }

.card-dark{ background:var(--carbon-soft); border:1px solid rgba(251,247,241,.1); border-radius:var(--radius-m); padding:22px; }

.product-card{
  border:1px solid var(--surface-border);border-radius:var(--radius-m);
  background:var(--page-bg);overflow:clip;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;font-style:normal;
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
/* a.product-card.reveal:hover (no solo .product-card:hover): bug real
   encontrado al verificar el Bloque 4 — la animación de aparición al
   scroll (".reveal", ver más abajo) fija "transform:none" en la
   tarjeta ya revelada con MÁS especificidad CSS que ".product-card:hover"
   sola, así que el levantamiento al pasar el cursor quedaba anulado
   en cualquier tarjeta que ya hubiera aparecido en pantalla. Se
   corrige igualando la especificidad (mismo criterio que el botón
   "Añadir al carrito" con WooCommerce), sin usar !important. Mismo
   bug y mismo fix en .project-card, .news-card y .post-card. */
a.product-card.reveal:hover{ box-shadow:var(--shadow-1); border-color:var(--verde); transform:translateY(-4px); }

/* ============================================================
   BANDA OSCURA — helper para secciones tipo header/footer/hero
   ============================================================ */

.on-dark{ background:var(--carbon); position:relative; overflow:clip; }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark p,.on-dark li,.on-dark span,.on-dark b,.on-dark strong{ color:var(--arena); }
.on-dark p{ color:var(--tierra-dark); }
.on-dark .eyebrow{ color:var(--verde-light); }
.on-dark .eyebrow::before{ background:var(--verde-light); }

/* ============================================================
   Utilidades de espaciado por si algún widget de Elementor
   necesita referenciarlas directamente vía clase CSS personalizada
   ============================================================ */
.radius-s{ border-radius:var(--radius-s); }
.radius-m{ border-radius:var(--radius-m); }
.radius-l{ border-radius:var(--radius-l); }
.shadow-1{ box-shadow:var(--shadow-1); }
.shadow-2{ box-shadow:var(--shadow-2); }

/* ============================================================
   ENCABEZADO (topbar) — tomado 1:1 de la maqueta (mockup.html
   líneas 142-163). Vive en header.php de este tema; si más
   adelante se asigna una plantilla de Elementor en Personalizar →
   "GEE — Encabezado y pie", esta franja deja de usarse pero las
   reglas se quedan aquí sin causar ningún problema.
   ============================================================ */
.topbar{ position:sticky; top:0; z-index:50; background:rgba(23,19,15,.86); backdrop-filter:blur(14px); border-bottom:1px solid rgba(251,247,241,.08); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:10px 28px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; flex:none; color:var(--arena); text-decoration:none; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:700; }
.brand:hover{ color:var(--arena); }
.brand--full{ gap:0; }
/* .topbar/#siteFooter delante a propósito: WooCommerce trae su propia
   hoja (woocommerce-layout.css) con la regla global
   ".woocommerce img,.woocommerce-page img{height:auto;max-width:100%}"
   — se activa en CUALQUIER página de la tienda (el body ahí siempre
   lleva la clase "woocommerce-page", no solo el contenido de Woo) y,
   por pura especificidad CSS (dos selectores contra uno), le ganaba a
   ".brand-logo" y le borraba la altura fija: el logo del encabezado
   se veía enorme y deforme en /tienda/, categorías y ficha de
   producto (cualquier página con esa clase en el body), aunque en el
   resto del sitio se viera bien. Anteponer el selector del contenedor
   sube la especificidad lo suficiente para ganar siempre, sin
   necesidad de !important. */
.topbar .brand-logo,
#siteFooter .brand-logo{ height:56px; width:auto; object-fit:contain; display:block; }
#siteFooter .brand-logo--footer{ height:72px; }
.navlinks{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.navlinks a{ padding:9px 10px; border-radius:999px; font-size:.92rem; color:var(--tierra-dark); font-weight:500; font-style:normal; text-decoration:none; transition:background .15s,color .15s; }
.navlinks a:hover{ color:var(--arena); background:rgba(251,247,241,.08); }
.navlinks a[aria-current="page"],
.navlinks .current-menu-item > a,
.navlinks .current_page_item > a{ color:var(--arena); background:var(--verde); }
.topbar-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.cart-btn{ position:relative; display:inline-flex; align-items:center; gap:.5em; color:var(--arena); border:1px solid rgba(251,247,241,.28); border-radius:999px; padding:.6em 1em; font-size:.86rem; background:transparent; cursor:pointer; text-decoration:none; }
.cart-btn:hover{ border-color:var(--amanecer); }
.cart-count{ background:var(--sol); color:#1A0D03; border-radius:999px; min-width:18px; height:18px; font-size:.68rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; padding:0 4px; }
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; color:var(--arena); border:1px solid rgba(251,247,241,.28); border-radius:50%; background:transparent; cursor:pointer; transition:border-color .15s,color .15s; }
.theme-toggle:hover{ border-color:var(--amanecer); color:var(--amanecer); }
.theme-toggle svg{ width:17px; height:17px; flex:none; min-width:17px; }
.navtoggle{ display:none; background:transparent; border:1px solid rgba(251,247,241,.28); color:var(--arena); border-radius:10px; padding:8px 10px; }
@media (max-width:900px){
  .navlinks{ position:fixed; top:78px; left:0; right:0; height:calc(100vh - 78px); background:var(--carbon); flex-direction:column; align-items:stretch; padding:14px; gap:4px; transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s,transform .18s,visibility 0s linear .18s; overflow:auto; z-index:49; }
  .navlinks.open{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition:opacity .18s,transform .18s; }
  .navlinks a{ padding:14px 16px; font-size:1.02rem; }
  .navtoggle{ display:inline-flex; }
}
/* Encabezado en teléfonos angostos (≤480px, QA Fase 8): con el logo
   real de imagen (más ancho que el logo de texto que reemplazó —
   proporción ~3.16:1) a los 56px de alto de siempre, el encabezado ya
   no cabía junto al carrito y el botón de menú en un teléfono normal
   (~375-390px): el botón de menú terminaba parcialmente fuera de la
   pantalla, sin poder abrir el menú. Verificado en vivo con el
   inspector (scrollWidth > clientWidth) antes y después del arreglo,
   probado hasta 320px de ancho. El "top"/"height" del panel del menú
   móvil se ajustan junto con la altura real del encabezado, que
   también baja en este rango. */
@media (max-width:480px){
  .topbar-inner{ padding:10px 14px; gap:10px; }
  .topbar .brand-logo{ height:34px; }
  .navlinks{ top:60px; height:calc(100vh - 60px); }
}

/* Bloque 69 (v1.69.5) — Menú móvil más limpio (pedido de Federico
   30/09): antes los enlaces eran "inline", su relleno no sumaba altura
   y la píldora verde del activo tapaba al vecino. Ahora cada opción es
   una fila completa de 58px (toque cómodo), letra más grande, líneas
   separadoras, flecha a la derecha y el activo con fondo verde suave y
   barra lateral, sin solaparse. Se bloquea el scroll de fondo. */
@media (max-width:900px){
  .navlinks{ padding:12px 16px 32px; gap:0; }
  .navlinks li{ display:block; width:100%; border-bottom:1px solid rgba(251,247,241,.08); }
  .navlinks li:last-child{ border-bottom:0; }
  .navlinks a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; margin:4px 0; padding:0 16px; border-radius:14px; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.22rem; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--arena); }
  .navlinks a::after{ content:""; flex:none; width:8px; height:8px; margin-right:4px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); opacity:.35; transition:opacity .15s,transform .15s; }
  .navlinks a:hover{ background:rgba(251,247,241,.06); color:var(--arena); }
  .navlinks a:active{ background:rgba(251,247,241,.1); }
  .navlinks a[aria-current="page"],
  .navlinks .current-menu-item > a,
  .navlinks .current_page_item > a{ background:rgba(68,167,46,.14); color:#fff; box-shadow:inset 3px 0 0 var(--verde-light); }
  .navlinks a[aria-current="page"]::after,
  .navlinks .current-menu-item > a::after{ opacity:1; border-color:var(--verde-light); }
  .navlinks.open li{ animation:geeMenuIn .28s ease both; }
  .navlinks.open li:nth-child(2){ animation-delay:.02s } .navlinks.open li:nth-child(3){ animation-delay:.04s }
  .navlinks.open li:nth-child(4){ animation-delay:.06s } .navlinks.open li:nth-child(5){ animation-delay:.08s }
  .navlinks.open li:nth-child(6){ animation-delay:.10s } .navlinks.open li:nth-child(7){ animation-delay:.12s }
  .navlinks.open li:nth-child(8){ animation-delay:.14s } .navlinks.open li:nth-child(9){ animation-delay:.16s }
  body.gee-nav-abierto{ overflow:hidden; }
}
@keyframes geeMenuIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ============================================================
   PIE DE PÁGINA — tomado 1:1 de la maqueta (líneas 203-225)
   ============================================================ */
#siteFooter{ background:var(--carbon); padding:56px 0 28px; }
#siteFooter .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:780px){ #siteFooter .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ #siteFooter .foot-grid{ grid-template-columns:1fr; } }
#siteFooter .foot-grid h4{ color:var(--amanecer); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; font-weight:600; }
#siteFooter .foot-grid a{ color:var(--tierra-dark); font-size:.92rem; display:block; padding:6px 0; text-decoration:none; }
#siteFooter .foot-grid a:hover{ color:var(--amanecer); }
#siteFooter .foot-grid p{ margin:0; }
#siteFooter .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:48px; padding-top:24px; border-top:1px solid rgba(251,247,241,.1); color:var(--tierra-dark); font-size:.82rem; }

/* Bloque 38 (v1.60.0) — iconos de redes sociales (footer, bajo la
   dirección, y recuadro nuevo de Contacto). Reutilizables en los 2
   lugares vía gee_pintar_redes_sociales() en functions.php.
   OJO: dentro del footer, "#siteFooter .foot-grid a" (arriba) es más
   específica que ".gee-social-row a" sola (lleva el ID #siteFooter) y
   le ganaría su "display:block; padding:6px 0" — con
   box-sizing:border-box y overflow:hidden, ese padding heredado
   comprimiría el alto real del círculo y el icono se recortaría
   arriba/abajo. Por eso el selector de abajo repite el contexto del
   footer para igualar esa especificidad y anula el padding a mano. */
.gee-social-row{ display:flex; align-items:center; gap:10px; }
.gee-social-row a,
#siteFooter .foot-grid .gee-social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; aspect-ratio:1/1; padding:0; margin:0;
  border-radius:50%; overflow:hidden; flex:none;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
}
.gee-social-row a:hover{ transform:translateY(-2px) scale(1.06); }
.gee-social-row img{ width:100%; height:100%; display:block; object-fit:contain; }
#siteFooter .foot-social{ margin-top:14px; }

/* ============================================================
   BOTONES FLOTANTES — WhatsApp (funcional) y Calculadora (por
   ahora solo visual — aria-disabled, sin acción al hacer clic;
   se conecta cuando exista esa funcionalidad).
   ============================================================ */
.fab-stack{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.fab{ position:relative; display:inline-flex; align-items:center; gap:.6em; color:#08210F; border-radius:999px; padding:14px 20px 14px 16px; font-weight:700; box-shadow:0 14px 30px -10px rgba(0,0,0,.45); border:none; cursor:pointer; font-size:.92rem; transition:transform .18s ease,box-shadow .18s ease; text-decoration:none; }
.fab:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(0,0,0,.5); }
@media (max-width:640px){ .fab span.fab-label{ display:none; } .fab{ padding:14px; border-radius:50%; } }
.fab-wa-wrap{ position:relative; }
.fab-wa{ background:#25D366; width:54px; height:54px; padding:0; border-radius:50%; justify-content:center; }
.fab-wa-icon{ width:30px; height:30px; object-fit:contain; display:block; }

/* Nube de pensamiento del FAB de WhatsApp — misma pieza que trae la
   maqueta (aparece sola una vez al cargar la página, y de nuevo al
   pasar el cursor o el foco por el botón). */
.wa-thought{ position:absolute; right:calc(100% + 12px); top:50%; display:flex; align-items:center; gap:6px; opacity:0; transform:translateY(-50%) translateX(6px) scale(.9); transform-origin:right center; pointer-events:none; transition:opacity .32s ease,transform .32s ease; }
.wa-thought.show{ opacity:1; transform:translateY(-50%) translateX(0) scale(1); }
.wa-thought-bubble{ background:var(--arena); color:var(--carbon); font-family:"Figtree",system-ui,sans-serif; font-weight:700; font-size:.86rem; padding:9px 16px; border-radius:20px; white-space:nowrap; box-shadow:0 14px 28px -10px rgba(0,0,0,.45); }
.wa-thought-dot{ background:var(--arena); border-radius:50%; box-shadow:0 8px 16px -8px rgba(0,0,0,.4); flex:none; }
.wa-thought-dot.d1{ width:12px; height:12px; }
.wa-thought-dot.d2{ width:7px; height:7px; }

/* Bloque 24 (v1.44.0) — popup del mini-formulario del botón de
   WhatsApp: misma idea de "nube" que .wa-thought de arriba (aparece a
   la izquierda del botón), pero con espacio para un formulario corto.
   Ancla en bottom:0 (no centrado verticalmente como la nube de texto)
   para que, estando el botón pegado a la esquina inferior derecha de
   la pantalla (.fab-stack), el popup crezca hacia arriba y nunca
   quede cortado por el borde inferior de la ventana. */
.gee-wa-form-popup{ position:absolute; right:calc(100% + 14px); bottom:0; width:296px; max-width:calc(100vw - 96px); max-height:min(92vh,620px); overflow-y:auto; background:var(--arena); color:var(--carbon); border-radius:var(--radius-s); padding:16px 16px 10px; box-shadow:0 26px 54px -14px rgba(0,0,0,.5); z-index:70; }
.gee-wa-form-popup[hidden]{ display:none; }
.gee-wa-form-close{ position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; border:1px solid rgba(23,19,15,.16); background:transparent; color:var(--carbon); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; }
.gee-wa-form-close:hover{ background:rgba(23,19,15,.08); }
.gee-wa-form-intro{ font-family:"Figtree",system-ui,sans-serif; font-weight:700; font-size:.86rem; line-height:1.25; margin:0 26px 8px 0; }
/* Bloque 24 (v1.44.0), ajuste de diseño — igual espíritu que la
   referencia que pasó el usuario (campos pegados uno tras otro, sin
   aire de más), pero con nuestra propia paleta: gap más chico entre
   campos. Nombre/Correo/Celular ya no traen una <label> aparte (el
   placeholder de cada input ya dice qué es) — se quitó directamente
   del formulario en functions.php, no se oculta por CSS, para no
   dejar una etiqueta invisible pero presente para lectores de
   pantalla. El select "¿Eres cliente...?" SÍ conserva su <label>,
   porque un <select> no tiene placeholder y sin la pregunta visible
   nadie sabría qué está eligiendo.

   v1.46.0 — la causa real del scroll no era el "gap" entre campos
   (ya estaba en 8px): cada label/input, al no fijar su propio
   interlineado, heredaba el interlineado de párrafo del sitio
   (1.6, pensado para texto largo), y eso se sumaba fila por fila
   hasta forzar el scroll. Con interlineado propio y compacto en
   cada pieza (label, input, botón) el popup completo entra sin
   scroll en cualquier pantalla normal; el "max-height" de arriba
   queda solo como red de seguridad para un celular en horizontal. */
.gee-wa-form-body .form-grid{ gap:6px; }
.gee-wa-form-body .form-grid label{ font-size:.78rem; line-height:1.15; margin-bottom:2px; display:block; }
.gee-wa-form-body input:not([type="checkbox"]),.gee-wa-form-body select,.gee-wa-form-body textarea{ margin-top:0; font-size:.88rem; line-height:1.15; padding:.5em .75em; }
.gee-wa-form-body .gee-acceptance{ font-size:.74rem; line-height:1.3; color:var(--carbon); margin-top:0; }
.gee-wa-form-body .gee-acceptance a{ color:var(--verde-2); }
.gee-wa-form-body input[type="submit"]{ width:100%; margin-top:2px; margin-bottom:0; padding:.62em 1.2em; font-size:.9rem; }
@media (max-width:480px){ .gee-wa-form-popup{ right:0; bottom:calc(100% + 14px); width:min(88vw,300px); max-height:min(75vh,520px); } }

.fab-calc{ background:linear-gradient(135deg,#FFB627,#FF6A1A); color:#1A0D03; cursor:default; }
.fab-calc[aria-disabled="true"]{ pointer-events:none; }
.fab-calc::after{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(255,182,39,.55); animation:gee-fab-pulse 2.6s ease-out infinite; pointer-events:none; }
.fab-calc svg{ animation:gee-calc-spin 12s linear infinite; }
@keyframes gee-fab-pulse{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(1.18); } }
@keyframes gee-calc-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .fab-calc::after{ animation:none; } .fab-calc svg{ animation:none; } }

/* ============================================================
   UTILIDADES DE LAYOUT — el mismo sistema grid/section/espaciado
   de la maqueta, para que las secciones nuevas (portada, Nosotros,
   Contacto, archivos) se compongan igual que allá.
   ============================================================ */
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
@media (max-width:780px){ .section{ padding:64px 0; } .section--tight{ padding:40px 0; } }

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-40{ margin-top:40px; }
.center{ text-align:center; }
.muted{ color:var(--page-ink-muted); }
.on-dark .muted{ color:var(--tierra-dark); }
.maxw-60{ max-width:60ch; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.gap-8{ gap:8px; }
.eyebrow-brand{ color:var(--verde-light); }
.on-dark .eyebrow-brand::before{ background:var(--verde-light); }
.eyebrow-on-teaser{ color:rgba(251,247,241,.85); }
.eyebrow-on-teaser::before{ background:var(--arena); }

/* ============================================================
   PÁGINAS DE ARCHIVO — franja de título (Servicios, Proyectos,
   Testimonios, Equipo, Newsletter, Blog).
   ============================================================ */
.page-hero{ background:var(--carbon); padding:64px 0 48px; }
.page-hero .eyebrow{ color:var(--verde-light); margin-bottom:10px; }
.page-hero h1{ color:var(--arena); margin:0; }
.page-hero p{ color:var(--tierra-dark); max-width:60ch; margin:14px 0 0; font-size:1.05rem; }

.gee-section{ padding:56px 0; }
.gee-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .gee-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .gee-grid{ grid-template-columns:1fr; } }
.gee-grid--2col{ grid-template-columns:repeat(2,1fr); }
@media (max-width:700px){ .gee-grid--2col{ grid-template-columns:1fr; } }

.gee-empty{ color:var(--page-ink-muted); padding:48px 0; text-align:center; font-size:1rem; }
.gee-card-meta{ display:flex; flex-wrap:wrap; gap:8px; }

/* ============================================================
   FRANJA DE MARCAS (portada) — maqueta: sección .brandstrip con
   un carrusel infinito (.marquee-track) de los nombres de marca.
   ============================================================ */
.brandstrip{ background:var(--surface); border-top:1px solid var(--surface-border); border-bottom:1px solid var(--surface-border); padding:20px 0; overflow:hidden; }
.marquee-track{ display:flex; align-items:center; gap:44px; width:max-content; animation:gee-marquee 26s linear infinite; }
.brandstrip:hover .marquee-track{ animation-play-state:paused; }
@keyframes gee-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.brandlogo{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:700; font-size:1.05rem; color:var(--page-ink-muted); flex:none; white-space:nowrap; opacity:.85; transition:opacity .2s; }
.brandlogo:hover{ opacity:1; color:var(--sol-ink); }
/* Fase 9.5 (Bloque 9), ajuste (16 sept 2026) — logos reales de
   marca: gris por defecto, a color al pasar el cursor (mismo
   comportamiento de la web anterior). Los 7 PNG originales venían en
   un lienzo cuadrado de 600×600 con el logo real ocupando solo una
   franja angosta en el centro (algunos, como Leader, menos del 10%
   del alto del lienzo) — con una caja cuadrada, object-fit:contain
   encogía según el lienzo completo (vacío incluido), no según el
   logo real, así que se veía diminuto sin importar cuánto creciera
   la caja. Se recortaron los 7 archivos a su contenido real (ver
   front-page.php, ahora usa getimagesize() para el width/height real
   de cada uno) y aquí se fija solo el ALTO — el ancho es automático,
   proporcional a la relación real de cada logo recortado. También se
   quitó la regla ".brandstrip span" (usada solo por el rótulo
   "Marcas representadas" ya eliminado a pedido del usuario) porque
   le ganaba por especificidad CSS a ".brandlogo", dejando los
   nombres de ciudad de la Fase 9.4 en gris diminuto en vez de su
   estilo real. */
/* Bloque 28 (v1.57.0) — antes era "height:40px; width:auto", así que
   el ancho de cada logo dependía por completo de la proporción real
   de la imagen: un logo tipo "wordmark" muy ancho y bajo (ej. Leader,
   488×83px — proporción 5.9:1) terminaba ocupando 5 veces más espacio
   horizontal que uno más cuadrado (ej. Artsign, 507×319px — proporción
   1.6:1), aunque ambos midieran 40px de alto. Esa es la causa real de
   que unos logos se vean enormes y otros diminutos en la franja — no
   depende de si subiste el logo "del tamaño correcto", depende de la
   proporción ancho/alto de cada imagen. Ahora cada logo se dibuja
   dentro de una CAJA fija de 150×40px ("object-fit:contain" encoge la
   imagen para que quepa entera ahí, sin deformarla ni recortarla) —
   los logos compactos (la mayoría) se ven exactamente igual que antes
   porque ya cabían de sobra en esa caja; solo los muy anchos se
   encogen para respetar el mismo tamaño máximo que los demás. */
.brandlogo-img{ height:40px; width:150px; object-fit:contain; object-position:center; flex:none; filter:grayscale(100%); opacity:.85; transition:filter .25s ease, opacity .25s ease; }
.brandlogo-img:hover{ filter:grayscale(0%); opacity:1; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ============================================================
   BLOQUE "CALCULADORA" (calc-teaser) — mismo componente en
   portada, /servicios/ y /proyectos/. El CTA queda "muy pronto"
   igual que el botón flotante, hasta que exista la herramienta.
   ============================================================ */
.calc-teaser{ background:linear-gradient(120deg,var(--verde) 0%,var(--verde-2) 45%,var(--verde) 100%); background-size:220% 220%; animation:gee-calc-gradient 9s ease-in-out infinite; border-radius:var(--radius-l); padding:52px; position:relative; overflow:clip; color:var(--arena); transition:transform .25s ease,box-shadow .25s ease; }
.calc-teaser:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.calc-teaser h2{ color:var(--arena); font-size:clamp(1.8rem,3.4vw,2.5rem); }
.calc-teaser p{ color:rgba(251,247,241,.82); max-width:52ch; }
.calc-teaser .btn-primary{ background:var(--carbon); color:var(--arena); }
.calc-teaser .btn-primary:hover{ background:#000; }
.calc-teaser .btn[aria-disabled="true"]{ opacity:.75; cursor:default; pointer-events:none; }
@keyframes gee-calc-gradient{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce){ .calc-teaser{ animation:none; } }

/* Ítem 5 — imagen agregada a la franja de la calculadora por pedido
   explícito de SEO (usuario aprobó "diseno-fotovoltaico.jpg" entre 3
   opciones revisadas en vivo en la Media Library). Se mezcla con el
   degradado verde animado de fondo (mix-blend-mode) en vez de pegarse
   encima como una foto suelta, y queda detrás del bloque de texto. */
.calc-teaser-media{ position:absolute; inset:0; z-index:0; overflow:clip; border-radius:inherit; pointer-events:none; }
.calc-teaser-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:78% 32%; mix-blend-mode:luminosity; opacity:.34; }
.calc-teaser-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,var(--verde) 0%,var(--verde) 28%,rgba(11,122,52,.55) 50%,transparent 76%); }

/* ============================================================
   APARICIÓN AL HACER SCROLL — ".reveal" (Fase 4). Antes existía
   la clase ".reveal" en la fila de Servicio pero SIN ningún CSS/JS
   que la implementara (quedaba inerte); ahora es un sistema real y
   se aplicó por igual a las 5 tarjetas de contenido (Servicios,
   Proyectos, Testimonios, Equipo, Newsletter) para que el
   movimiento sea consistente en todo el sitio, no solo en un lugar.
   El estado oculto SOLO se activa si ".js-reveal-ready" está
   presente en <html> (la agrega un script mínimo en <head> apenas
   confirma que el JS está corriendo) — si el JS fallara por
   cualquier motivo, el contenido ".reveal" queda visible de
   una vez, nunca oculto a medias.

   IMPORTANTE — probando en vivo, con scroll real, encontré que
   CUALQUIER animación con línea de tiempo propia en este punto (ya
   sea "transition" de CSS, o incluso la Web Animations API de
   JavaScript, que también probé) puede quedarse pegada a medio
   camino para siempre bajo ciertas condiciones — la tarjeta nunca
   llega a verse. Como ver el contenido es más importante que un
   efecto bonito, la aparición es un cambio de estado directo (ver
   functions.php): sin transición ni animación de ningún tipo, para
   que sea 100% confiable siempre, aunque se vea de golpe en vez de
   con un desvanecido suave. */
.js-reveal-ready .reveal{ opacity:0; transform:translateY(24px); }
.js-reveal-ready .reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   PROCESO / SERVICIOS — ".steps" (rail de 4 pasos, portada) y
   ".service-row" (fila completa por servicio, /servicios/).
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:rgba(251,247,241,.1); border-radius:var(--radius-m); overflow:clip; }
@media (max-width:780px){ .steps{ grid-template-columns:1fr 1fr; } }
.steps > div{ background:var(--carbon-soft); padding:28px 24px; }
.steps .num{ font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--verde-light); font-size:.8rem; }

.service-row{ display:grid; grid-template-columns:.6fr 1.4fr; gap:40px; padding:44px 0; border-bottom:1px solid var(--surface-border); }
@media (max-width:780px){ .service-row{ grid-template-columns:1fr; gap:18px; } }
.service-row:last-child{ border-bottom:none; }
.service-num{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:3rem; color:var(--surface-border); line-height:1; }
.service-photo{ margin-top:20px; border-radius:var(--radius-m); overflow:clip; aspect-ratio:16/9; background:var(--surface); }
.service-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-row ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.service-row ul li{ display:flex; align-items:center; gap:8px; }
.service-row ul li svg{ color:var(--verde); flex:none; width:18px; height:18px; }

/* ============================================================
   TARJETA DE PROYECTO — ".project-card" (portada, /proyectos/)
   ============================================================ */
.project-card{ border-radius:var(--radius-m); overflow:clip; display:flex; flex-direction:column; text-decoration:none; background:var(--carbon-soft); box-shadow:0 18px 36px -24px rgba(23,19,15,.4); transition:box-shadow .25s ease,transform .25s ease; }
a.project-card.reveal:hover{ box-shadow:0 26px 48px -20px rgba(23,19,15,.5); transform:translateY(-2px); }
.project-card-photo{ position:relative; aspect-ratio:4/3; overflow:clip; background:var(--carbon); }
.project-card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.project-card:hover .project-card-photo img{ transform:scale(1.06); }
.project-card-photo .badge{ position:absolute; top:14px; left:14px; }
.project-card-photo .project-card-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--carbon-soft),var(--carbon)); color:rgba(251,247,241,.3); }
.project-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:6px; }
.project-card-body h3{ color:var(--arena); font-size:1.1rem; margin:0; }
.project-card-body p{ color:var(--tierra-dark); margin:0; font-size:.88rem; }
.project-card-body p.quote{ color:var(--arena); margin-top:8px; }
.project-card-body hr.rule{ border:none; border-top:1px solid rgba(251,247,241,.12); margin:8px 0 0; }

/* ============================================================
   TARJETA DE TESTIMONIO — ".quote-card" (modificador de .card)
   ============================================================ */
.quote-card{ gap:16px; }
.quote-card .stars{ color:var(--sol-ink); letter-spacing:2px; font-size:.9rem; }
.quote-card p{ font-size:1.02rem; color:var(--page-ink); margin:0; }
.quote-card footer{ display:flex; align-items:center; gap:10px; }
.quote-card footer img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.quote-card b{ font-family:'Bricolage Grotesque',system-ui,sans-serif; display:block; }
.quote-card .role{ font-size:.85rem; }

/* ============================================================
   TARJETA DE EQUIPO — ".team-card"
   ============================================================ */
.team-card{ text-align:center; }
/* "height:auto" explícito, no solo "aspect-ratio:1": WordPress agrega
   los atributos HTML width/height reales de la foto a cualquier
   <img> de the_post_thumbnail() — sin un "height" propio en el CSS,
   el navegador usa esa altura real en vez de calcularla a partir de
   "aspect-ratio", así que una foto no cuadrada (la mayoría de fotos
   de personas reales) salía ovalada en vez de circular. Con
   "height:auto" el navegador sí calcula la altura desde
   "aspect-ratio", quedando siempre un círculo perfecto sin importar
   las proporciones reales de la foto que suba el usuario. */
.team-card img,.team-card .team-card-placeholder{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; display:block; box-shadow:0 12px 24px -12px rgba(23,19,15,.3); }
.team-card .team-card-placeholder{ display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--page-ink-muted); font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.8rem; font-weight:700; }
.team-card b{ display:block; margin-top:14px; font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:1rem; }
.team-card span.role{ display:block; color:var(--sol-ink); font-size:.86rem; font-weight:600; margin-top:2px; }

/* ============================================================
   TARJETA DE NEWSLETTER — ".news-card" (toda la card es un link
   externo a la fuente completa del boletín)
   ============================================================ */
.news-card{ display:flex; flex-direction:column; height:100%; border:1px solid var(--surface-border); border-radius:var(--radius-m); background:var(--page-bg); padding:22px; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; text-decoration:none; }
a.news-card.reveal:hover{ border-color:var(--verde); box-shadow:var(--shadow-1); transform:translateY(-2px); }
.news-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.news-card h3{ font-size:1.05rem; line-height:1.35; color:var(--page-ink); margin:10px 0 0; }
.news-card:hover h3{ color:var(--sol-ink); }
.news-card p{ font-size:.88rem; flex:1; color:var(--page-ink-muted); margin:8px 0 0; }
.news-card-source{ display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; color:var(--sol-ink); padding-top:14px; margin-top:14px; border-top:1px solid var(--surface-border); }
.news-card-source svg{ flex:none; transition:transform .2s ease; }
.news-card:hover .news-card-source svg{ transform:translate(2px,-2px); }

/* ============================================================
   NEWSLETTER — Bloque 5 (v1.14.1): filas del "Archivo". (Sin
   formulario de suscripción a pedido explícito del usuario.)
   ============================================================ */
.mono-badge{ width:auto; min-width:44px; height:32px; padding:0 8px; border-radius:7px; background:var(--verde-2); color:var(--arena); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.8rem; flex:none; }
.archive-row{ display:flex; align-items:center; gap:16px; padding:16px 18px; border:1px solid var(--surface-border); border-radius:var(--radius-s); background:var(--surface); transition:border-color .2s ease,box-shadow .2s ease; text-decoration:none; }
a.archive-row.reveal:hover{ border-color:var(--verde); box-shadow:var(--shadow-1); }
.archive-row-body{ flex:1; min-width:0; }
.archive-row-body b{ display:block; font-size:.92rem; color:var(--page-ink); font-weight:600; }
.archive-row-body span{ display:block; font-size:.78rem; color:var(--page-ink-muted); margin-top:2px; }
@media (max-width:560px){ .archive-row{ flex-wrap:wrap; } }

/* ============================================================
   BLOG — ".post-card" (archivo y portada) y ".post-thumb/-body"
   ============================================================ */
.post-card{ border:1px solid var(--surface-border); border-radius:var(--radius-m); background:var(--page-bg); overflow:clip; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:box-shadow .2s,border-color .2s,transform .2s; }
a.post-card.reveal:hover{ box-shadow:var(--shadow-1); border-color:var(--verde); transform:translateY(-4px); }
.post-thumb{ aspect-ratio:16/10; position:relative; overflow:clip; background:linear-gradient(135deg,var(--sol),var(--amanecer)); }
.post-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* v1.75.3: absoluto para que fotos 3:2 y 16:9 no estiren la tarjeta (todas quedan 16:10) */
.post-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-meta{ display:flex; gap:10px; align-items:center; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; color:var(--page-ink-muted); text-transform:uppercase; letter-spacing:.05em; }
.post-title{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.12rem; font-weight:600; line-height:1.25; margin:0; }
.post-excerpt{ color:var(--page-ink-muted); font-size:.9rem; margin:0; }

/* Entrada individual del blog — ".article" (single.php) */
hr.rule{ border:none; border-top:1px solid var(--surface-border); margin:0; }
.on-dark hr.rule{ border-top:1px solid rgba(251,247,241,.12); }
.article{ max-width:70ch; margin:0 auto; }
.lead{ font-size:1.12rem; color:var(--page-ink-muted); line-height:1.6; }
.article .post-meta{ margin-top:16px; }
.article h1{ margin-top:16px; }
.article .lead{ margin-top:16px; }
.callout{ background:linear-gradient(135deg,rgba(255,106,26,.1),rgba(255,182,39,.1)); border:1px solid rgba(255,106,26,.3); border-radius:var(--radius-m); padding:22px 24px; margin-top:2em; }
.callout p{ margin:0; }

/* ============================================================
   NOSOTROS / CONTACTO — componentes propios de esas dos páginas
   ============================================================ */
.value-card{ border-top:3px solid var(--verde); padding-top:16px; }
/* Ajuste (21 sept 2026) — pedido explícito del usuario: la foto de
   "Nuestra historia" (Nosotros) se veía demasiado grande frente al
   texto. Antes no tenía tope de tamaño propio: en el grid de 2
   columnas ocupaba todo el ancho de su columna (~534px en escritorio)
   con relación de aspecto 4:5 (vertical), dando una foto de hasta
   ~667px de alto — mucho más alta que el bloque de texto de al lado.
   Ahora el contenedor tiene un tope fijo de 550×400px (relación de
   aspecto horizontal, no vertical) y se centra dentro de su columna
   del grid si esta llega a ser más angosta que 550px — así nunca se
   ve más grande que ese máximo, en ninguna pantalla. */
.about-photo{ border-radius:var(--radius-l); overflow:clip; width:100%; max-width:550px; max-height:400px; aspect-ratio:550/400; margin-inline:auto; box-shadow:0 24px 48px -20px rgba(23,19,15,.35); background:var(--surface); }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-grid .full{ grid-column:1/-1; }
/* v1.46.0 — "line-height" de párrafo (1.6, heredado de <body>) no
   estaba pensado para una etiqueta ni para el texto de un campo de
   formulario: en un campo de una sola línea, ese interlineado se
   convierte en aire vacío arriba y abajo del texto (no solo entre
   líneas), y como cada fila del formulario es "label + input" apilados
   dentro de su propia casilla del grid, ese aire se sumaba dos veces
   por fila. Fijar un interlineado propio para ambos, más chico y
   pensado para una sola línea, es la corrección de raíz (no un
   recorte de "gap" o "padding", que ya estaban correctos) — reduce la
   altura real de cada fila sin tocar el tamaño de letra ni el
   espaciado entre campos. */
.form-grid label{ display:block; font-size:.82rem; line-height:1.25; margin-bottom:4px; }
.form-grid input:not([type="checkbox"]):not([type="radio"]),.form-grid textarea,.form-grid select{ width:100%; margin-top:0; padding:.6em .85em; line-height:1.3; border-radius:var(--radius-s); border:1px solid var(--surface-border); background:var(--input-bg); color:var(--page-ink); font-family:inherit; font-size:.95rem; }
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{ outline:2px solid var(--verde); outline-offset:1px; }

/* Bloque 24 (v1.44.0), corrección — el checkbox de "Acepto la
   Política de tratamiento de datos personales" (Contacto, PQRSF,
   popup de WhatsApp) heredaba el `width:100%` de la regla de arriba,
   así que el navegador lo estiraba a todo el ancho de la fila y el
   texto se iba a la línea de abajo, centrado — casilla "sobre" el
   texto en vez de al lado. Con la exclusión de arriba y esto, la
   casilla queda a la izquierda, del tamaño normal, y el texto al
   lado — en la misma línea si cabe, o alineado arriba si el texto
   pasa a una segunda línea. */
.form-grid .gee-acceptance .wpcf7-list-item{ margin:0; }
.form-grid .gee-acceptance label{ display:flex; align-items:flex-start; gap:8px; margin:0; text-align:left; cursor:pointer; }
.form-grid .gee-acceptance input[type="checkbox"]{ width:16px; height:16px; min-width:16px; margin:.15em 0 0; flex:none; accent-color:var(--verde); }
.form-grid .gee-acceptance .wpcf7-list-item-label{ text-align:left; }

/* Bloque 41 (v1.61.0) — formulario de PQRSF completo (15 preguntas,
   ver claude/bloque-40-inventario-preguntas-formulario-pqrsf.md),
   repartido en 2 pasos cortos para que no se vuelva un formulario
   interminable — mockup aprobado antes de construirlo. Mismas clases
   tanto si el formulario lo pinta Contact Form 7
   (gee_renovables_child_provisionar_formularios_cf7()) como el
   respaldo estático de page-pqrsf.php; la navegación entre pasos la
   pone gee_renovables_child_enqueue_pqrsf_script() en functions.php.
   ".gee-pqrsf-form" es solo un contenedor estructural (sin tarjeta
   propia: el formulario sigue sin caja, igual que en Contacto) —
   existe para que el script tenga un ancestro común del que colgar
   el indicador de pasos y los 2 paneles. */
.gee-form-steps{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 24px; }
.gee-form-step{ display:flex; align-items:center; gap:8px; min-width:0; opacity:.45; padding-bottom:12px; border-bottom:2px solid var(--surface-border); transition:opacity .2s ease,border-color .2s ease; }
.gee-form-step.is-active,.gee-form-step.is-done{ opacity:1; border-bottom-color:var(--verde); }
.gee-form-step-num{ width:24px; height:24px; border-radius:50%; border:1.5px solid var(--surface-border); display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; font-weight:600; color:var(--tierra); flex:none; background:var(--page-bg); transition:background .18s ease,border-color .18s ease,color .18s ease; }
.gee-form-step.is-active .gee-form-step-num,
.gee-form-step.is-done .gee-form-step-num{ background:var(--verde); border-color:var(--verde); color:var(--arena); }
.gee-form-step-label{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; letter-spacing:.03em; text-transform:uppercase; color:var(--tierra); line-height:1.3; min-width:0; }
.gee-form-step.is-active .gee-form-step-label{ color:var(--page-ink); }
@media (max-width:480px){ .gee-form-step-label{ font-size:.62rem; } .gee-form-step-num{ width:22px; height:22px; font-size:.68rem; } }

.gee-form-panel{ display:none; }
.gee-form-panel.is-active{ display:block; }
.gee-step-actions{ display:flex; gap:12px; margin-top:24px; }
.gee-step-actions .btn{ flex:1; }

/* Fase 9.1 (Bloque 9) — formulario real de Contact Form 7
   (.gee-cf7-form). El formulario se provisiona reutilizando las
   mismas clases .form-grid/.mono del formulario estático (ver
   gee_renovables_child_provisionar_formularios_cf7() en
   functions.php), así que hereda su estilo solo con ajustar lo que
   el propio wrapper de CF7 agrega y el formulario estático no tenía. */
.wpcf7-form-control-wrap{ display:block; line-height:1; }
.wpcf7-not-valid-tip{ display:block; margin-top:4px; font-size:.78rem; line-height:1.3; color:#D64545; }
.wpcf7-response-output{ margin:18px 0 0; padding:12px 16px; border-radius:var(--radius-s); border:1px solid var(--surface-border); font-size:.88rem; }
.wpcf7-mail-sent-ok{ border-color:var(--verde); color:var(--verde); }
.wpcf7-validation-errors,.wpcf7-mail-sent-ng{ border-color:#D64545; color:#D64545; }
.wpcf7-spinner{ margin-left:10px; }

.map-plate{ display:block; border-radius:var(--radius-m); overflow:clip; position:relative; aspect-ratio:16/10; background:#EDEAE1; border:1px solid var(--bruma); box-shadow:0 18px 36px -24px rgba(23,19,15,.3); text-decoration:none; }
.map-plate-badge{ position:absolute; top:14px; left:14px; background:var(--carbon); color:var(--arena); font-size:.78rem; padding:6px 12px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; }
.map-plate-cta{ position:absolute; bottom:14px; left:14px; background:var(--arena); color:var(--carbon); font-size:.82rem; padding:10px 16px; border-radius:999px; box-shadow:0 10px 22px -8px rgba(23,19,15,.4); transition:transform .18s ease; display:inline-flex; align-items:center; gap:6px; }
.map-plate:hover .map-plate-cta{ transform:translateY(-2px); }

.contact-tile{ display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--surface-border); }
.contact-tile:last-child{ border-bottom:none; }
.contact-tile .ic{ width:22px; height:22px; flex:none; margin-top:2px; color:var(--verde); }
.contact-tile b{ display:block; }
.contact-tile p{ margin:2px 0 0; color:var(--page-ink-muted); }

/* Bloque 18 (v1.36.0) — franja de datos de contacto en horizontal
   (Contacto): mismo .contact-tile de siempre, pero como tarjeta
   propia dentro de una fila en vez de renglón de una lista vertical
   — no se toca .contact-tile en sí (PQRSF lo sigue usando en su
   forma original, vertical, sin cambios). */
.gee-contact-info-row .contact-tile,
.gee-contact-info-row .contact-tile:last-child{
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-m); padding:18px 20px;
}

/* Mapa más grande (Contacto): mismo .map-plate de siempre, con una
   proporción más alta en vez de la 16/10 estándar. */
.map-plate--tall{ aspect-ratio:4/3; }
@media (max-width:640px){ .map-plate--tall{ aspect-ratio:16/10; } }

/* Bloque 38 (v1.60.0) — recuadro de redes sociales debajo del mapa
   (Contacto). ".contact-col" envuelve el mapa + enlace + este
   recuadro en una columna flex; el recuadro tiene flex:1 para que
   ocupe siempre el resto del alto disponible. Junto con
   "align-items:stretch" en el grid de 2 columnas de page-contacto.php,
   el borde inferior de este recuadro queda siempre a la misma altura
   que el borde inferior del formulario — sin importar cuál de los dos
   sea más alto en cada momento (ver también nota en page-contacto.php). */
.contact-col{ display:flex; flex-direction:column; }
.contact-col .map-plate{ flex:none; }
.contact-social-plate{ margin-top:16px; background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-m); padding:24px; display:flex; flex-direction:column; justify-content:center; gap:14px; flex:1; min-height:96px; }
/* Bloque 39 (v1.60.1) — título con ícono, mismo lenguaje visual que
   ".contact-tile" (Teléfono/Correo/Oficina/Horario más abajo): ícono
   22px del mismo verde + texto en negrita del mismo tamaño que el
   resto del sitio (antes era una etiqueta chica en mayúsculas, mono,
   que no se leía como título). El espaciado entre título, párrafo e
   íconos ya no depende de márgenes sueltos (que se sentían "pegados")
   sino de un solo "gap" en el contenedor — más parejo y sin dejar
   tanto vacío arriba/abajo cuando el recuadro se estira para igualar
   la altura del mapa. */
.contact-social-plate-head{ display:flex; align-items:center; gap:12px; }
.contact-social-plate-head .ic{ width:22px; height:22px; flex:none; color:var(--verde); }
.contact-social-plate h4{ font-family:"Figtree",system-ui,sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:normal; text-transform:none; color:var(--page-ink); margin:0; }
.contact-social-plate p{ margin:0; color:var(--page-ink-muted); font-size:.88rem; max-width:42ch; line-height:1.55; }

/* Galería de fotos (ficha de proyecto) */
.gee-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; }
@media (max-width:700px){ .gee-gallery{ grid-template-columns:repeat(2,1fr); } }
/* "height:auto" explícito — mismo bug y mismo fix que ".team-card
   img" arriba: sin él, una foto de galería no cuadrada salía ovalada
   en vez de cuadrada, porque el navegador usaba el alto real de la
   imagen (atributo HTML que agrega wp_get_attachment_image()) en vez
   de calcularlo con "aspect-ratio". */
.gee-gallery img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-s); }

/* ============================================================
   Bloque 48 (v1.62.0) — página "Sistema Integrado de Gestión"
   (page-sig.php), construida 1:1 a partir del mockup aprobado.
   Reglas con prefijo ".sig-" porque son específicas de esa página;
   todo lo demás (.hero, .on-dark, .eyebrow, .card, .grid...) ya
   existía y se reutiliza sin cambios.
   ============================================================ */
.sig-hero-photo{ position:relative; width:100%; max-width:420px; aspect-ratio:4/5; border-radius:var(--radius-l); overflow:clip; box-shadow:var(--shadow-2); flex:none; margin-inline:auto; }
.sig-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.sig-hero-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,19,15,0) 50%, rgba(23,19,15,.62) 100%); }
.sig-hero-photo .sig-hero-photo-pie{ position:absolute; left:18px; bottom:16px; right:18px; display:flex; align-items:center; gap:9px; z-index:1; }
.sig-hero-photo .sig-hero-photo-pie span{ color:var(--arena); font-size:.68rem; letter-spacing:.02em; line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.5); }

.sig-photo-banner{ width:100%; border-radius:var(--radius-l); overflow:clip; position:relative; height:260px; }
.sig-photo-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.sig-photo-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(23,19,15,.6) 0%, rgba(23,19,15,0) 55%); }
.sig-photo-banner .sig-photo-banner-pie{ position:absolute; left:22px; bottom:16px; color:var(--arena); font-size:.68rem; letter-spacing:.03em; text-shadow:0 2px 6px rgba(0,0,0,.5); z-index:1; }

.sig-disclaimer-chip{ display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--surface-border); color:var(--page-ink-muted); font-size:.72rem; letter-spacing:.02em; padding:10px 14px; border-radius:8px; }
.sig-disclaimer-chip svg{ flex:none; width:14px; height:14px; }

.sig-indicadores{ background-color:var(--carbon-soft); background-image:radial-gradient(rgba(251,247,241,.08) 1.5px, transparent 1.5px); background-size:24px 24px; }
.sig-stat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:rgba(251,247,241,.12); border-radius:var(--radius-m); overflow:clip; }
.sig-stat-grid > div{ background:var(--carbon-soft); padding:28px 22px; display:flex; flex-direction:column; gap:8px; }
.sig-stat-value{ font-family:'Bricolage Grotesque',system-ui,sans-serif; font-size:2.2rem; color:var(--amanecer); font-variant-numeric:tabular-nums; }
.sig-stat-label{ font-size:.72rem; color:var(--tierra-dark); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:780px){ .sig-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.sig-cta-band{ background-size:cover; background-position:center; }

/* Contenido de página simple y entrada de blog */
.gee-content{ padding:48px 0 64px; }
.gee-content .gee-content-body{ max-width:74ch; font-size:1.02rem; line-height:1.75; }
.gee-content .gee-content-body img{ max-width:100%; height:auto; border-radius:var(--radius-m); }
.gee-content .gee-content-body h2{ margin-top:2em; }
.gee-breadcrumb{ font-size:.84rem; color:var(--page-ink-muted); padding:18px 0 0; }
.gee-breadcrumb a{ color:inherit; }

/* ============================================================
   TIENDA (Fase 5) — tomado de la maqueta, sección "STORE", con dos
   tipos de ajuste sobre el original:

   1) Se quitaron 3 transitions/animations que en la maqueta reaccionan
      a un cambio de clase por JavaScript (no a :hover): el subrayado
      de la pestaña activa, la aparición de un panel de pestaña, y el
      giro del "+" del acordeón de preguntas frecuentes (este último
      reacciona al atributo nativo [open] de <details>, que se agrega
      igual de golpe que una clase por JS). Es la misma categoría de
      bug ya encontrada y corregida en la Fase 3 (modo oscuro) y la
      Fase 4 (aparición al hacer scroll): una propiedad con transition/
      animation puede quedar pegada para siempre cuando el cambio de
      valor lo dispara una mutación del DOM en vivo en lugar de
      :hover. El resto de transitions de esta sección SÍ son solo de
      :hover (igual que en el resto del tema) y se dejaron intactas.
   2) Se agregaron reglas nuevas que la maqueta no necesitaba porque
      mostraba una lista plana de 17 productos: el catálogo real tiene
      141 productos en categorías con subcategorías, así que hacen
      falta tarjetas de subcategoría y paginación.
   ============================================================ */

.filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }

.product-thumb{ aspect-ratio:4/3; background:linear-gradient(150deg,#fff 0%,var(--arena-dim) 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.product-thumb img{ width:100%; height:100%; object-fit:contain; transition:transform .35s ease; }
.product-card:hover .product-thumb img{ transform:scale(1.07) rotate(-2deg); }
.product-thumb.is-agotado img{ opacity:.75; filter:grayscale(.35); }
.product-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-cat{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sol-ink); }
.product-name{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:600; font-size:1.02rem; }
.product-price{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:600; font-size:1.05rem; margin-top:auto; }
.product-price del{ color:var(--page-ink-muted); text-decoration:line-through; font-weight:400; font-size:.82rem; margin-right:6px; }
.product-price ins{ text-decoration:none; }

/* Tarjeta de subcategoría — mismo lenguaje visual que .product-card,
   necesaria porque el catálogo real tiene un nivel de subcategorías
   que la maqueta (lista plana) no modelaba. */
.category-tile{ text-decoration:none; color:inherit; }
.category-tile b{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.02rem; }
/* Fase 9.2 (Bloque 9) — ícono ilustrado de la maqueta (ver
   productScene() en mockup.html): mismo micro-hover que ahí,
   ".catgrid a:hover .icon svg{transform:scale(1.08) rotate(-2deg)}". */
.category-tile-icon svg{ transition:transform .3s ease; }
.category-tile:hover .category-tile-icon svg{ transform:scale(1.08) rotate(-2deg); }

.spec-table{ width:100%; border-collapse:collapse; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86rem; }
.spec-table tr{ border-bottom:1px solid var(--surface-border); }
.spec-table tr:hover{ background:var(--surface); transition:background .15s ease; }
.spec-table td{ padding:11px 4px; }
.spec-table td:first-child{ color:var(--page-ink-muted); width:46%; }
.spec-table td:last-child{ font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
/* La ficha técnica de cada producto viene como una tabla normal dentro
   de la descripción (no hay atributos estructurados en el catálogo
   real) — se le aplica el mismo look de .spec-table automáticamente. */
.pdp-long-desc table{ width:100%; border-collapse:collapse; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86rem; margin:20px 0; }
.pdp-long-desc table tr{ border-bottom:1px solid var(--surface-border); }
.pdp-long-desc table tr:hover{ background:var(--surface); transition:background .15s ease; }
.pdp-long-desc table td,.pdp-long-desc table th{ padding:11px 4px; text-align:left; }

/* Bloque 12 (v1.30.0) — botón "Te puede interesar leer" al final de la
   pestaña Descripción, cuando el producto tiene una entrada de blog
   relacionada elegida en "Contenido GEE". */
.related-post-link{ display:block; text-decoration:none; margin-top:24px; }
.pdp-tab-eyebrow{ display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--page-ink-muted); margin-bottom:10px; }
.related-post-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--surface-border); border-radius:var(--radius-s); padding:14px 16px; background:var(--surface); transition:border-color .2s ease,box-shadow .2s ease; }
.related-post-card:hover{ border-color:var(--verde); box-shadow:var(--shadow-1); }
.related-post-card b{ font-size:.88rem; font-weight:600; color:var(--page-ink); }
.related-post-card svg{ color:var(--verde); flex:none; transition:transform .2s ease; }
.related-post-card:hover svg{ transform:translateX(4px); }

.pdp-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; }
@media (max-width:920px){ .pdp-grid{ grid-template-columns:1fr; } }
.gallery-main{ aspect-ratio:1; border-radius:var(--radius-m); background:linear-gradient(150deg,#fff,var(--arena-dim)); display:flex; align-items:center; justify-content:center; border:1px solid var(--bruma); overflow:hidden; }
.gallery-main img{ width:100%; height:100%; object-fit:contain; }
.pdp-info{ display:flex; flex-direction:column; }

.pdp-trust{ display:flex; flex-wrap:wrap; gap:28px; margin-top:28px; padding-top:24px; border-top:1px solid var(--surface-border); }
.pdp-trust-group{ min-width:160px; }
.pdp-trust-group h3{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--page-ink-muted); font-weight:600; margin-bottom:10px; }
/* Solo el logo (sin nombre al lado, a pedido del usuario — el nombre de
   la marca ya se ve en el badge junto al título) y grande para que se
   note, en vez del tratamiento "chip" chico de antes. */
.brand-tile{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--surface-border); border-radius:var(--radius-s); padding:14px 18px; background:var(--surface); }
.brand-tile-logo{ height:44px; width:auto; max-width:150px; object-fit:contain; }
.brand-tile .mono-badge-lg{ width:52px; height:52px; border-radius:9px; background:var(--verde); color:var(--arena); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.1rem; flex:none; }
.cert-row{ display:flex; flex-wrap:wrap; gap:8px; }
.cert-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--surface-border); border-radius:999px; padding:7px 13px; background:var(--surface); font-size:.74rem; font-weight:600; color:var(--page-ink-muted); white-space:nowrap; }
.cert-chip svg{ color:var(--verde); }
/* Sello "Certificado RETIE", mostrado encima de las etiquetas .cert-chip
   existentes — no las reemplaza, ver single-product.php. Chico a
   propósito (ajuste a pedido del usuario: antes se veía muy
   grande/invasivo frente a las etiquetas de norma). */
/* Bloque 52 (v1.63.2) — el sello TÜV SÜD conserva exactamente su
   tamaño original (20% del ancho del grupo "Certificaciones", como
   desde el Bloque 13) y el de RETIE se pone a su derecha con la MISMA
   ALTURA. Como las dos imágenes tienen proporciones distintas, la
   altura se iguala por ancho: TÜV es cuadrado (alto = 20% del ancho del
   grupo) y RETIE recortado mide 939×427, así que a la misma altura su
   ancho es 20% × 939/427 ≈ 43.98%. En v1.63.1 se había fijado una
   altura de 64 px para los dos, lo que achicaba el TÜV (corregido). */
.cert-logos{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.cert-logo{ display:block; flex:none; width:20%; height:auto; }
.cert-logo.cert-logo--retie{ width:43.98%; }
/* Bloque 20 (v1.38.0) — el usuario dio 2 variantes del sello (texto
   negro para modo claro, texto blanco para modo oscuro): se imprimen
   ambas siempre (ver single-product.php) y CSS decide cuál se ve,
   igual que el resto del sitio usa [data-site-theme="dark"] (no
   prefers-color-scheme — el sitio no sigue el SO, solo el toggle
   #themeToggle, ver gee_renovables_child_enqueue_header_script()). */
.cert-logo--oscuro{ display:none; }
:root[data-site-theme="dark"] .cert-logo--claro{ display:none; }
:root[data-site-theme="dark"] .cert-logo--oscuro{ display:block; }

.pdp-shortdesc{ color:var(--page-ink-muted); font-size:.95rem; line-height:1.65; }

/* ---- pestañas de producto ---- */
.pdp-tab-list{ display:flex; gap:4px; border-bottom:1.5px solid var(--surface-border); overflow-x:auto; scrollbar-width:none; }
.pdp-tab-list::-webkit-scrollbar{ display:none; }
.pdp-tab-btn{ position:relative; flex:none; padding:14px 20px; font-weight:600; font-size:.86rem; font-family:inherit; color:var(--page-ink-muted); background:none; border:none; cursor:pointer; white-space:nowrap; transition:color .2s ease; }
.pdp-tab-btn::after{ content:""; position:absolute; left:20px; right:20px; bottom:-1.5px; height:2.5px; border-radius:2px; background:var(--verde); transform:scaleX(0); transform-origin:center; }
.pdp-tab-btn:hover{ color:var(--page-ink); }
.pdp-tab-btn.active{ color:var(--verde); }
.pdp-tab-btn.active::after{ transform:scaleX(1); }
/* Sin transition en ::after a propósito: el cambio de pestaña activa
   lo dispara un classList.toggle() por JS (ver el script en
   functions.php), y una transition ahí es justo el patrón que ya se
   quedó pegado en otras dos fases de este proyecto. El subrayado
   aparece/desaparece de una vez — sin animación, pero 100% confiable. */
.pdp-tab-panel{ display:none; padding:32px 0 8px; max-width:78ch; }
.pdp-tab-panel.active{ display:block; }
.pdp-tab-panel[data-tab="specs"],.pdp-tab-panel[data-tab="gallery"]{ max-width:none; }

.pdp-bullet-list{ list-style:none; display:grid; gap:10px; padding:0; margin:0; }
.pdp-bullet-list li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--page-ink); padding:6px 8px; margin:0 -8px; border-radius:8px; transition:background .15s ease,transform .15s ease; }
.pdp-bullet-list li:hover{ background:var(--surface); transform:translateX(3px); }
.pdp-bullet-list li svg{ color:var(--verde); flex:none; margin-top:2px; }

.gallery-tab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
/* .gallery-tab-tile es un <button> (antes era un <div>) para que cada
   miniatura se pueda ampliar — reseteo de estilos nativos de botón +
   cursor de "se puede hacer clic", a pedido del usuario. */
.gallery-tab-tile{ aspect-ratio:4/3; border-radius:var(--radius-s); overflow:hidden; background:linear-gradient(150deg,#fff,var(--arena-dim)); border:1px solid var(--bruma); display:flex; align-items:center; justify-content:center; transition:border-color .2s ease,box-shadow .2s ease; padding:0; margin:0; cursor:zoom-in; font:inherit; }
.gallery-tab-tile:hover,.gallery-tab-tile:focus-visible{ border-color:var(--verde); box-shadow:var(--shadow-1); }
.gallery-tab-tile img{ width:100%; height:100%; object-fit:contain; transition:transform .35s ease; pointer-events:none; }
.gallery-tab-tile:hover img{ transform:scale(1.06); }

/* Visor de imagen ampliada — se abre al hacer clic en una miniatura de
   la Galería (gee-renovables-child-pdp, ver functions.php). Sin
   librerías externas, igual que el resto del sitio. */
.pdp-lightbox{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:32px; background:rgba(23,19,15,.92); }
.pdp-lightbox[hidden]{ display:none; }
.pdp-lightbox img{ max-width:100%; max-height:100%; border-radius:var(--radius-s); box-shadow:0 24px 64px -16px rgba(0,0,0,.6); }
.pdp-lightbox-close{ position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(251,247,241,.3); background:rgba(23,19,15,.5); color:var(--arena); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.pdp-lightbox-close:hover{ background:rgba(23,19,15,.8); border-color:var(--arena); }

.faq-list{ display:flex; flex-direction:column; gap:2px; }
.faq-item{ border-bottom:1px solid var(--surface-border); padding:14px 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:.92rem; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--page-ink); transition:color .15s ease; }
.faq-item summary:hover{ color:var(--verde); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.2rem; color:var(--verde); flex:none; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
/* Igual que el subrayado de las pestañas: [open] lo agrega el
   navegador de golpe al hacer clic, así que el giro del "+" es
   instantáneo — sin transition. */
.faq-item p{ color:var(--page-ink-muted); font-size:.88rem; margin-top:10px; line-height:1.6; }

/* Bloque 13 (v1.31.0) — pestaña "Reseñas" con reseñas cargadas a mano
   por producto (campo gee_resenas). ".stars" ya existía pero solo
   dentro de ".quote-card" (Testimonios) — se agrega una regla base
   para que también se vea bien aquí, sin tocar la de Testimonios. */
.stars{ color:var(--sol-ink); letter-spacing:2px; font-size:.9rem; }
.reviews-summary{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Bloque 27 (v1.56.0) — a pedido del usuario, el número del ponderado
   general usa la misma fuente y tamaño que el mockup ("Bricolage
   Grotesque", 2rem) en vez de la mono de 1.6rem que tenía antes. */
.reviews-avg{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:2rem; font-weight:700; color:var(--page-ink); }
.reviews-list{ display:flex; flex-direction:column; gap:14px; }
/* Bloque 27 (v1.56.0) — se agrega el mismo movimiento al pasar el
   cursor que tienen las tarjetas de reseña en el mockup (.review-card
   ahí mismo): se levantan un poco y toman sombra + borde verde. */
.review-card{ border:1px solid var(--surface-border); border-radius:var(--radius-s); padding:16px 18px; background:var(--surface); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.review-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-1); border-color:var(--verde); }
.review-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.review-card-head b{ font-size:.92rem; color:var(--page-ink); }
.review-card p{ color:var(--page-ink-muted); font-size:.88rem; margin:0; line-height:1.6; }

/* ---- Reseñas: contenido nativo de WooCommerce, restyled con el
   mismo sistema de diseño (las reseñas están apagadas en Ajustes de
   WooCommerce por ahora — esto solo entra en juego cuando se activen) ---- */
.pdp-tab-panel .star-rating{ color:var(--amanecer); }
.pdp-tab-panel #reviews .comment-text{ background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-s); padding:16px; }
.pdp-tab-panel #reviews .comment_container{ display:flex; gap:12px; margin-bottom:14px; }
.pdp-tab-panel #reviews .avatar{ border-radius:50%; }
.pdp-tab-panel #review_form textarea,.pdp-tab-panel #review_form input[type="text"],.pdp-tab-panel #review_form input[type="email"]{ width:100%; margin-top:6px; padding:.7em 1em; border-radius:var(--radius-s); border:1px solid var(--surface-border); background:var(--input-bg); color:var(--page-ink); font-family:inherit; }
.pdp-tab-panel #review_form .form-submit input{ margin-top:12px; }

/* ---- Formulario de compra nativo de WooCommerce (cantidad + botón) ----
   Rediseño a pedido del usuario: el contador de cantidad no existía
   como componente propio (quedó con el input suelto de WooCommerce) y
   el botón "Añadir al carrito" no tenía el mismo tratamiento visual
   que el resto de botones del sitio (.btn). Producto de referencia
   usado para revisar el diseño: Panel Solar 715W Bifacial TIPO N —
   Canadian Solar CON RETIE (id 910), el único de los dos ejemplos
   que está en productivo. Este bloque es genérico (apunta a las
   clases que WooCommerce siempre
   genera), así que aplica igual en cualquier producto, no solo en el
   de referencia. Los botones +/- del contador los agrega
   gee-renovables-child-pdp (ver functions.php) sin tocar el input real
   de WooCommerce — solo lo envuelve y dispara 'change' sobre él. */
.pdp-info form.cart{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.pdp-info .quantity{
  display:inline-flex; align-items:center; margin:0;
  border:1.5px solid var(--surface-border); border-radius:999px;
  background:var(--page-bg); overflow:clip; flex:none;
}
.pdp-info .quantity .qty{
  width:40px; text-align:center; border:none; background:transparent;
  color:var(--page-ink); font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:600; font-size:.92rem; padding:.78em 0;
  -moz-appearance:textfield; appearance:textfield;
}
.pdp-info .quantity .qty::-webkit-inner-spin-button,
.pdp-info .quantity .qty::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.pdp-info .quantity .qty:focus{ outline:none; }
.pdp-info .qty-step{
  width:38px; height:38px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--page-ink-muted); font-family:inherit;
  font-size:1.05rem; font-weight:600; line-height:1; cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.pdp-info .qty-step:hover{ background:var(--surface); color:var(--verde); }
.pdp-info .qty-step:disabled{ opacity:.35; cursor:not-allowed; background:transparent; color:var(--page-ink-muted); }
/* .single_add_to_cart_button.button.alt — se repiten las 2 clases que
   WooCommerce ya trae en el botón (ver el HTML real que genera
   woocommerce_template_single_add_to_cart()) para que esta regla gane
   por especificidad frente al morado por defecto de WooCommerce
   (".woocommerce ... button.button.alt"), sin usar !important. */
.pdp-info .single_add_to_cart_button.button.alt{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.85em 1.5em; border-radius:999px; border:1px solid transparent;
  font-weight:600; font-size:.96rem; font-family:inherit; cursor:pointer; white-space:nowrap;
  background:var(--verde); color:var(--arena); box-shadow:0 10px 24px -10px rgba(11,122,52,.5);
  transition:transform .15s ease,background .15s ease;
}
/* Ícono de check antes del texto, igual que en la maqueta (ic('check')
   + "Añadir al carrito") — WooCommerce genera el texto del botón por su
   cuenta, así que el ícono se agrega por CSS con una máscara (funciona
   con cualquier color de texto/fondo que tenga el botón, sin depender
   de una imagen aparte). */
.pdp-info .single_add_to_cart_button.button.alt::before{
  content:""; width:15px; height:15px; flex:none; background:currentColor;
  -webkit-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwIDYgOSAxN2wtNS01Ii8+PC9zdmc+') center/contain no-repeat;
  mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwIDYgOSAxN2wtNS01Ii8+PC9zdmc+') center/contain no-repeat;
}
.pdp-info .single_add_to_cart_button.button.alt:hover{ background:var(--verde-2); }
.pdp-info .single_add_to_cart_button.button.alt:active{ transform:scale(.97); }
.pdp-info .single_add_to_cart_button.button.alt.disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* Avisos nativos de WooCommerce (agregado al carrito, errores del
   formulario, etc.) */
.woocommerce-message,.woocommerce-error,.woocommerce-info{
  list-style:none; margin:0 0 20px; padding:14px 18px;
  border-radius:var(--radius-s); border:1px solid var(--surface-border);
  background:var(--surface); font-size:.92rem;
}
.woocommerce-message{ border-color:var(--verde); }
.woocommerce-error{ border-color:var(--ember); color:var(--ember); }

/* Paginación de la tienda (the_posts_pagination) — el catálogo real
   tiene categorías de hasta 65 productos, así que sí hace falta. */
.pagination{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px; border-radius:var(--radius-s);
  border:1px solid var(--surface-border); color:var(--page-ink-muted);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.85rem; text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.pagination .page-numbers:hover{ border-color:var(--verde); color:var(--sol-ink); }
.pagination .page-numbers.current{ background:var(--verde); border-color:var(--verde); color:var(--arena); }
.pagination .page-numbers.dots{ border-color:transparent; }

/* Selector nativo de WooCommerce "Ordenar por..." en la tienda */
.woocommerce-ordering select.orderby{
  padding:.6em 2.2em .6em 1em; border-radius:var(--radius-s);
  border:1px solid var(--surface-border); background:var(--input-bg);
  color:var(--page-ink); font-family:inherit; font-size:.85rem;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E5D4C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6em center; background-size:16px;
}

/* ============================================================
   CALCULADORA SOLAR (v1.17.0, función real desde v1.18.0) —
   page-calculadora.php. Bloque 8: wizard de 3 pasos + resultado,
   con las mismas clases y valores que usa la propia maqueta
   (`.wizard`, `.wz-step`, `.option-card`, `.city-grid`,
   `.toggle-row`, `.result-hero`...), no una adaptación con nombres
   propios — así el diseño es 1:1, tanto en la interacción como en
   el resultado. Desde v1.18.0 las fórmulas y el dataset de 22
   ciudades ya no son "de referencia": se tomaron de la calculadora
   real en producción de gee-renovables.com (investigación de solo
   lectura, ver functions.php para el detalle de cada constante).
   ============================================================ */
.wizard{ max-width:760px; margin:0 auto; }
.wizard-rail{ display:flex; align-items:center; gap:8px; margin-bottom:40px; }
.wizard-rail .dot{ flex:1; height:5px; border-radius:99px; background:var(--surface-border); }
.wizard-rail .dot.done{ background:var(--verde); }
.wizard-rail .dot.active{ background:linear-gradient(90deg,var(--verde),var(--verde-light)); }
.wz-step{ display:none; }
.wz-step.active{ display:block; animation:gee-wz-fadein .25s ease; }
@keyframes gee-wz-fadein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .wz-step.active{ animation:none; } }
.wz-head{ margin-bottom:26px; }
.option-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:640px){ .option-grid{ grid-template-columns:1fr; } }
.option-card{
  border:1.5px solid var(--surface-border); border-radius:var(--radius-m); padding:18px;
  text-align:left; cursor:pointer; background:var(--page-bg); font-family:inherit;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
  display:flex; flex-direction:column; gap:6px;
}
.option-card:hover{ border-color:var(--verde); }
.option-card[aria-pressed="true"]{ border-color:var(--verde); background:rgba(11,122,52,.06); box-shadow:0 0 0 3px rgba(11,122,52,.12); }
.option-card b{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.02rem; }
.option-card span{ color:var(--page-ink-muted); font-size:.82rem; }
.city-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-height:340px; overflow:auto; padding-right:4px; }
@media (max-width:640px){ .city-grid{ grid-template-columns:repeat(2,1fr); } }
.field{ margin-top:22px; }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:8px; color:var(--page-ink-muted); }
.field input[type="number"]{
  width:100%; border:1.5px solid var(--surface-border); border-radius:var(--radius-s);
  padding:13px 14px; font:inherit; font-size:1rem; background:var(--input-bg); color:var(--page-ink);
}
.field input:focus{ outline:none; border-color:var(--verde); }
.toggle-row{ display:flex; gap:8px; background:var(--surface); border-radius:999px; padding:4px; width:max-content; }
.toggle-row button{ border:none; background:transparent; padding:8px 16px; border-radius:999px; font-weight:600; font-size:.86rem; color:var(--page-ink-muted); cursor:pointer; font-family:inherit; }
.toggle-row button[aria-pressed="true"]{ background:var(--page-ink); color:var(--page-bg); }
.wz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:34px; }

.result-hero{ background:var(--carbon); border-radius:var(--radius-l); padding:40px; color:var(--arena); position:relative; overflow:clip; }
.result-hero h2{ color:var(--arena); max-width:34ch; }
.result-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px; }
@media (max-width:780px){ .result-grid{ grid-template-columns:repeat(2,1fr); } }
.result-tile{ background:var(--carbon-soft); border-radius:var(--radius-m); padding:20px; border:1px solid rgba(251,247,241,.1); }
.result-tile b{ display:block; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-size:1.9rem; color:var(--amanecer); }
.result-tile span{ color:var(--tierra-dark); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; font-family:"IBM Plex Mono",ui-monospace,monospace; }
.disclaimer{ font-size:.8rem; color:var(--page-ink-muted); border-left:3px solid var(--amanecer); padding:10px 16px; background:var(--surface); border-radius:0 8px 8px 0; margin-top:24px; }

@media print{
  .site-header,.site-footer,.fab,.wizard-rail,.wz-nav{ display:none !important; }
  .wz-step{ display:none !important; }
  .wz-step.active{ display:block !important; }
}

/* ============================================================
   FASE 8 (v1.9.5) — estilo mínimo para el contenido heredado que
   ahora se reconstruye desde shortcodes viejos (ver functions.php):
   acordeón real con <details>/<summary> y el bloque de llamado a
   la acción. Solo lo justo para que se vea integrado con el resto
   del sitio (tipografía, color, radios) — no es una plantilla nueva,
   es "que se lea bien" mientras se decide si ese contenido se
   reescribe a mano más adelante.
   ============================================================ */
.gee-legacy-accordion{ display:flex; flex-direction:column; gap:10px; margin:24px 0; }
.gee-legacy-accordion-item{
  border:1px solid var(--surface-border); border-radius:var(--radius-s);
  padding:16px 20px; background:var(--surface);
}
.gee-legacy-accordion-item summary{
  cursor:pointer; font-weight:600; font-size:1rem; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.gee-legacy-accordion-item summary::-webkit-details-marker{ display:none; }
.gee-legacy-accordion-item summary::after{ content:"+"; font-size:1.2rem; color:var(--verde); flex:none; }
.gee-legacy-accordion-item[open] summary::after{ content:"–"; }
.gee-legacy-accordion-body{ margin-top:12px; color:var(--page-ink-muted); font-size:.95rem; line-height:1.6; }
.gee-legacy-cta{ text-align:center; padding:32px 0; }
.gee-legacy-cta-title{ font-size:1.3rem; font-family:"Bricolage Grotesque",system-ui,sans-serif; margin-bottom:16px; max-width:40ch; margin-left:auto; margin-right:auto; }

/* ============================================================
   FASE 9 (v1.10.0) — Bloque 1 del informe "Ajustes de diseño web":
   ícono dentro de un eyebrow (rayo/check/sol, según la sección),
   botón primario forzado a verde en el hero de portada (el hero es
   `.on-dark`, que por defecto pone `.btn-primary` en naranja/sol —
   aquí se necesita el verde de marca en su lugar), y el anillo
   concéntrico decorativo reutilizable para heroes oscuros (mismo
   patrón visual que la maqueta usa en Calculadora, Nosotros y
   Newsletter — se deja como utilidad para no repetirlo).
   ============================================================ */
.eyebrow-icon{ width:13px; height:13px; flex:none; }

.hero-ctas .btn-primary{ background:var(--verde); color:var(--arena); box-shadow:0 10px 24px -10px rgba(11,122,52,.5); }
.hero-ctas .btn-primary:hover{ background:var(--ember); }

.hero-rings{ position:absolute; top:50%; right:-100px; transform:translateY(-50%); width:420px; height:420px; pointer-events:none; z-index:0; }
.hero-rings span{ position:absolute; inset:0; border:1px solid rgba(255,106,26,.16); border-radius:50%; }
.hero-rings span:nth-child(2){ inset:64px; }
.hero-rings span:nth-child(3){ inset:136px; }
@media (max-width:760px){ .hero-rings{ display:none; } }

/* Motivo de sol (misma firma decorativa de la maqueta) para tarjetas
   oscuras más chicas que el hero completo — ej. .result-hero de la
   Calculadora. */
.sun-motif{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.sun-motif svg{ position:absolute; }

/* Corrección encontrada al verificar el Bloque 1 en vivo con el sitio
   en modo oscuro: fuera de una franja `.on-dark`/`.page-hero` (que ya
   quedaron fijas en verde), un eyebrow normal seguía usando
   `--sol-ink`, que el interruptor de modo oscuro pone en ámbar — se
   veía bien en modo claro pero volvía a ponerse ámbar en modo oscuro
   (ej. "Catálogo", "Instalaciones reales", "Del blog"). Se excluye
   `.eyebrow-on-teaser` a propósito: ese sí debe seguir casi blanco
   sobre el fondo verde de la franja de calculadora, en cualquier modo. */
:root[data-site-theme="dark"] .eyebrow:not(.eyebrow-on-teaser){ color:var(--verde-light); }
:root[data-site-theme="dark"] .eyebrow:not(.eyebrow-on-teaser)::before{ background:var(--verde-light); }

/* Ajuste puntual (a pedido del usuario) — el eyebrow del hero
   principal de portada ("Ingeniería fotovoltaica premium · Colombia")
   es un caso especial dentro del propio sistema: a diferencia del
   resto de eyebrows sobre fondo oscuro (que ahora son siempre verdes),
   este debe seguir el interruptor de modo — ámbar en modo claro,
   verde en modo oscuro. `.eyebrow-adaptive` marca ese único caso sin
   afectar a los demás eyebrows de `.on-dark` (Cómo trabajamos,
   Calculadora). */
.on-dark .eyebrow.eyebrow-adaptive{ color:var(--amanecer); }
.on-dark .eyebrow.eyebrow-adaptive::before{ background:var(--amanecer); }
:root[data-site-theme="dark"] .on-dark .eyebrow.eyebrow-adaptive{ color:var(--verde-light); }
:root[data-site-theme="dark"] .on-dark .eyebrow.eyebrow-adaptive::before{ background:var(--verde-light); }

/* ============================================================
   BLOQUE 2 — Ítem 2: ilustración animada del hero de portada
   (v1.11.0). Casa + panel + sol + nubes + anillos, sustituye el
   sol suelto que había hasta v1.10.x. El movimiento (rotación de
   rayos + deriva de nubes) solo se activa si el sistema del
   usuario no pide reducir el movimiento — patrón ya usado en las
   Fases 3/4: la animación es "opt-in" dentro de la media query,
   nunca "opt-out" con animation:none fuera de ella.
   ============================================================ */
/* Bloque 14 (v1.32.0) — grilla del hero de portada, antes un estilo en
   línea de 2 columnas fijas sin ningún punto de quiebre (ver la nota
   en front-page.php). Con el punto de quiebre nuevo, la ilustración
   pasa a una sola columna, debajo del texto, tan pronto la grilla de
   2 columnas empieza a apretar demasiado — ≤900px cubre tanto un
   celular como una tablet en cualquier orientación. */
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:900px){
	.hero-grid{ grid-template-columns:1fr; gap:8px; }
}

.hero-illus-wrap{ display:flex; justify-content:center; }
.hero-illus{ width:100%; max-width:420px; height:auto; }
@media (max-width:900px){
	/* Más chica y corrida a la izquierda en pantallas angostas: a
	   tamaño completo (420px) y centrada, la ilustración quedaba
	   encima de los botones flotantes de Calculadora/WhatsApp (fijos
	   en la esquina inferior derecha, ver .fab-stack). El padding a
	   la derecha del contenedor empuja el centrado hacia la izquierda,
	   dejando ese rincón libre para los botones en vez de solo achicar
	   el dibujo y confiar en que alcance por poco. */
	.hero-illus-wrap{ padding-right:90px; }
	.hero-illus{ max-width:220px; margin:12px 0 -8px; }
}

.hero-illus-sun,.hero-illus-rays,.hero-illus-cloud{ transform-box:fill-box; transform-origin:50% 50%; }

@media (prefers-reduced-motion: no-preference){
  .hero-illus-rays{ animation:gee-hero-spin 44s linear infinite; }
  .hero-illus-sun{ animation:gee-hero-pulse 6s ease-in-out infinite; }
  .hero-illus-cloud-1{ animation:gee-hero-drift 15s ease-in-out infinite; }
  .hero-illus-cloud-2{ animation:gee-hero-drift 19s ease-in-out infinite -4s; }
}
@keyframes gee-hero-spin{ to{ transform:rotate(360deg); } }
@keyframes gee-hero-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes gee-hero-drift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(16px); } }

/* Bloque 22 (v1.40.0) — aviso emergente (pop-up) sitewide, elegido a
   mano en "Contenido GEE" → Pop-up. Deliberadamente más grande que un
   modal típico (a pedido del usuario, sobre el ejemplo que envió). */
.gee-popup-overlay{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(23,19,15,.88); }
.gee-popup-overlay[hidden]{ display:none; }
.gee-popup-box{ position:relative; width:100%; max-width:760px; }
.gee-popup-box img{ display:block; width:100%; height:auto; border-radius:var(--radius-s); box-shadow:0 30px 70px -18px rgba(0,0,0,.65); }
.gee-popup-link{ display:block; }
.gee-popup-close{ position:absolute; top:-16px; right:-16px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(251,247,241,.3); background:var(--carbon); color:var(--arena); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 24px -8px rgba(0,0,0,.55); transition:background .15s ease; }
.gee-popup-close:hover{ background:var(--carbon-soft); }
@media (max-width:600px){
  .gee-popup-overlay{ padding:18px; }
  .gee-popup-close{ top:-14px; right:0; }
}

/* Bloque 29 (v1.58.0) — banner promocional editable (página
   Newsletter, entre la portada y "Por qué suscribirte"). A pedido
   del usuario, va dentro del mismo ancho de contenido que el resto
   de las secciones (.container), no de borde a borde — se ve como
   "una sección más" en vez de una franja publicitaria aparte. La
   imagen se muestra COMPLETA, a su propia proporción (nunca se
   recorta ni se deforma): solo se limita el ancho al del contenedor,
   el alto se ajusta solo. ".banner-promo-wrap" es <a> cuando el
   banner tiene enlace, o <div> cuando no — en los dos casos recorta
   las esquinas redondeadas y sirve de base para el leve zoom al
   pasar el cursor (misma idea que ".project-card-photo img:hover"),
   que no se ve raro aunque no sea clicable. */
.banner-promo-wrap{ display:block; overflow:hidden; border-radius:var(--radius-m); }
.banner-promo-img{ display:block; width:100%; height:auto; transition:transform .3s ease; }
.banner-promo-wrap:hover .banner-promo-img{ transform:scale(1.02); }

/* ============================================================
   Bloque 33.2 (v1.59.2) — panel de filtros real de la tienda
   (Categoría, Marca, Atributos técnicos, Precio, Stock, Búsqueda),
   reescrito para seguir la maqueta aprobada al detalle: una sola
   flecha (no "+"/"–" de texto) en cada acordeón, los mismos
   encabezados en la fuente de despliegue del tema (Bricolage
   Grotesque) en vez de heredar la fuente de párrafo, "Limpiar todo"
   siempre visible junto al título del panel, Categoría como un grupo
   más (ya no una fila de chips aparte arriba) y Precio con el mismo
   control de dos manijas sobre una barra. Solo usa tokens que ya
   existen en :root de arriba, así que hereda modo claro/oscuro sin
   overrides nuevos.

   Bloque 33.4 (v1.59.4) — la v1.59.2 había envuelto TODO el panel en
   un <details> propio con título "Filtros" para colapsarlo entero en
   celular (buscador incluido) — eso no existe en la maqueta real y
   fue lo que el cliente señaló como "el buscador sigue atrapado
   dentro de Filtros". El panel ahora es un bloque normal, siempre
   visible en desktop (buscador y "Filtrar productos" arriba, sin
   título "Filtros" ni acordeón exterior); en celular se convierte en
   un cajón lateral que abre/cierra un botón "Filtros" propio arriba
   del listado de resultados (ver archive-product.php y
   gee_shop_enqueue_filtro_script() en functions.php) — overlay
   oscuro detrás incluido, igual que la maqueta.
   ============================================================ */
.gee-shop-layout{ display:grid; grid-template-columns:272px 1fr; gap:32px; align-items:start; }
@media (max-width:899px){ .gee-shop-layout{ grid-template-columns:1fr; } }

.gee-shop-filtros{
	background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-m);
	padding:20px; position:sticky; top:20px;
}
.gee-ff-badge{
	background:var(--verde); color:var(--arena); font-size:.72rem; font-weight:700; line-height:1;
	padding:4px 8px; border-radius:999px;
}
.gee-ff-chevron{ width:14px; height:14px; flex:none; color:var(--page-ink-muted); transition:transform .18s ease; }
.gee-ff-form{ display:flex; flex-direction:column; gap:0; padding-bottom:4px; }

/* ---------- Botón "Filtros" (solo en celular, arriba del listado de
   resultados) y overlay/cajón lateral que abre ---------- */
.gee-shop-filtros-btn{
	display:none; align-items:center; gap:8px; font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:700; font-size:.88rem;
	color:var(--page-ink); background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-s);
	padding:.65em 1.1em; margin-bottom:16px; cursor:pointer;
}
.gee-ff-btn-icon{ width:16px; height:16px; flex:none; color:var(--page-ink-muted); }
@media (max-width:899px){ .gee-shop-filtros-btn{ display:inline-flex; } }

.filters-overlay{ display:none; }
@media (max-width:899px){
	.filters-overlay{
		display:block; position:fixed; inset:0; background:rgba(23,19,15,.5); opacity:0; pointer-events:none;
		transition:opacity .2s ease; z-index:60;
	}
	.filters-overlay.is-open{ opacity:1; pointer-events:auto; }
	.gee-shop-filtros{
		position:fixed; top:0; right:0; bottom:0; left:auto; width:min(340px,86vw); max-width:340px; height:100%;
		border-radius:0; border-top:none; border-right:none; border-bottom:none;
		box-shadow:-12px 0 32px rgba(23,19,15,.18); transform:translateX(100%); transition:transform .25s ease;
		z-index:61; overflow-y:auto;
	}
	.gee-shop-filtros.is-open{ transform:translateX(0); }
}
.gee-ff-close{
	display:none; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
	border:none; border-radius:50%; background:var(--surface-border); color:var(--page-ink); font-size:.72rem; cursor:pointer; line-height:1;
}
.gee-ff-close:hover{ background:var(--tierra-dark); }
@media (max-width:899px){ .gee-ff-close{ display:inline-flex; } }

/* ---------- Buscar (siempre visible, arriba de todo — igual que la maqueta) ---------- */
.gee-ff-search{ position:relative; margin-bottom:16px; }
.gee-ff-search-icon{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--page-ink-muted); pointer-events:none; }
.gee-ff-search input[type="search"]{
	width:100%; padding:.7em 2.4em .7em 2.5em; border-radius:var(--radius-s); border:1px solid var(--surface-border);
	background:var(--page-bg); color:var(--page-ink); font-family:inherit; font-size:.86rem;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.gee-ff-search input[type="search"]::-webkit-search-cancel-button{ display:none; }
.gee-ff-search input[type="search"]::placeholder{ color:var(--page-ink-muted); }
.gee-ff-search input[type="search"]:focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(11,122,52,.12); }
.gee-ff-search-clear{
	position:absolute; right:8px; top:50%; transform:translateY(-50%); width:22px; height:22px; border-radius:50%;
	border:none; background:var(--surface-border); color:var(--page-ink); cursor:pointer; font-size:.72rem;
	line-height:1; display:flex; align-items:center; justify-content:center;
}
.gee-ff-search-clear:hover{ background:var(--tierra-dark); }
.gee-ff-search-clear[hidden]{ display:none; }

/* ---------- "Filtrar productos" + "Limpiar todo" (siempre visibles) ---------- */
.gee-ff-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.gee-ff-head h2{ font-size:1rem; margin:0; }
.gee-ff-head-actions{ display:flex; align-items:center; gap:14px; flex:none; }
.gee-ff-clear-all{ font-size:.78rem; font-weight:600; color:var(--ember); text-decoration:none; flex:none; }
.gee-ff-clear-all:hover{ text-decoration:underline; }

/* ---------- grupos con acordeón (Categoría/Marca/Atributos técnicos/Precio) ---------- */
.gee-ff-accordion{ border-top:1px solid var(--surface-border); padding:14px 0; }
.gee-ff-accordion > summary{
	list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
	font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:700; font-size:.92rem; color:var(--page-ink);
}
.gee-ff-accordion > summary::-webkit-details-marker{ display:none; }
.gee-ff-accordion:not([open]) > summary .gee-ff-chevron{ transform:rotate(-90deg); }
.gee-ff-body{ display:flex; flex-direction:column; gap:2px; margin-top:12px; }
.gee-ff-body--attrs{ gap:16px; }
.gee-ff-attr-label{ font-size:.78rem; font-weight:700; color:var(--page-ink-muted); text-transform:uppercase; letter-spacing:.03em; margin:0 0 6px; }

/* ---------- Categoría: enlaces reales (no casillas de formulario),
   para conservar las URLs limpias por categoría — pero con el mismo
   lenguaje visual de recuadro que Marca (Bloque 33.4, v1.59.4:
   reemplaza el resaltado verde de fondo que el cliente pidió quitar).
   Las subcategorías de la raíz activa aparecen indentadas debajo, y
   desaparecen solas al cambiar de categoría. ---------- */
.gee-ff-option--link{ text-decoration:none; }
.gee-ff-option--link::before{
	content:""; width:16px; height:16px; flex:none; border-radius:4px;
	border:1.5px solid var(--surface-border); background-color:var(--input-bg);
	background-repeat:no-repeat; background-position:center; background-size:10px;
	transition:background-color .15s ease, border-color .15s ease;
}
/* Bloque 33.5 (v1.59.5) — la v1.59.4 dibujaba el visto con un ::after
   posicionado "a mano" (left/top absolutos) sobre el recuadro del
   ::before, y quedaba descuadrado porque esa posición no tenía en
   cuenta el padding real del enlace. Un solo pseudo-elemento es más
   simple y siempre queda centrado solo: el visto es la imagen de
   fondo del propio recuadro (mismo color fijo de marca --arena
   escrito literal porque una imagen de fondo en CSS no puede leer
   variables), con background-position:center haciendo el trabajo. */
.gee-ff-option--link.is-active::before{
	background-color:var(--verde); border-color:var(--verde);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7F1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.gee-ff-sub{ padding-left:22px; display:flex; flex-direction:column; gap:2px; margin:2px 0 4px; }
.gee-ff-option--sub{ font-size:.83rem; }

.gee-ff-option{
	display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--page-ink);
	padding:6px 4px; border-radius:8px; cursor:pointer; transition:background .15s ease;
}
.gee-ff-option:hover{ background:var(--page-bg); }
.gee-ff-option input[type="checkbox"]{ width:16px; height:16px; flex:none; accent-color:var(--verde); margin:0; }
.gee-ff-name{ flex:1; }
.gee-ff-option em{ font-style:normal; font-family:"IBM Plex Mono",ui-monospace,monospace; color:var(--page-ink-muted); font-size:.72rem; }
.gee-ff-stock{ border-top:1px solid var(--surface-border); padding-top:14px; margin-top:14px; }

/* ---------- Precio: control de dos manijas sobre una barra (igual
   que la maqueta), con los dos números debajo siempre editables a
   mano como respaldo — el rango de la barra ya viene acotado a lo
   que combina con el resto de filtros activos (ver
   gee_shop_precio_bounds() en functions.php). ---------- */
.gee-ff-body--precio{ margin-top:16px; }
.gee-ff-range-track{ position:relative; height:4px; background:var(--surface-border); border-radius:2px; margin:14px 7px 22px; }
.gee-ff-range-fill{ position:absolute; left:0; right:0; top:0; bottom:0; background:var(--verde); border-radius:2px; }
.gee-ff-range-track i{
	position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--verde);
	border:2px solid var(--arena); box-shadow:0 1px 3px rgba(0,0,0,.3); transform:translate(-50%,-50%); cursor:grab; touch-action:none;
}
.gee-ff-range-track i:active{ cursor:grabbing; }
.gee-ff-price-row{ display:flex; align-items:center; gap:8px; }
.gee-ff-price-row label{ flex:1; font-size:.72rem; font-weight:600; color:var(--page-ink-muted); }
.gee-ff-price-row span{ color:var(--page-ink-muted); font-size:.8rem; flex:none; margin-top:14px; }
.gee-ff-price-row input{
	display:block; width:100%; margin-top:4px; padding:.5em .6em; border-radius:var(--radius-s);
	border:1px solid var(--surface-border); background:var(--input-bg); color:var(--page-ink); font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.82rem;
}
.gee-ff-hint{ font-size:.82rem; color:var(--page-ink-muted); border-top:1px solid var(--surface-border); padding-top:14px; margin:0; }
.gee-ff-submit{ margin-top:18px; }

.gee-shop-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.gee-shop-pill{
	display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--page-ink);
	background:var(--surface); border:1px solid var(--surface-border); border-radius:999px; padding:6px 12px 6px 14px;
	text-decoration:none; transition:border-color .15s ease,color .15s ease;
}
.gee-shop-pill:hover{ border-color:var(--verde); color:var(--verde); }
.gee-shop-pill span{ font-size:1rem; line-height:1; opacity:.7; }

/* ---------- "Ordenar por…" propio (Bloque 33.4, v1.59.4) —
   WooCommerce nunca llegó a dibujar su selector nativo en esta
   plantilla (ver gee_shop_orderby_opciones() en functions.php); este
   reemplazo reutiliza el mismo patrón <details>/<summary> + flecha
   que el resto del panel, con un menú flotante en vez de un
   acordeón. ---------- */
.gee-orderby{ position:relative; }
.gee-orderby-btn{
	list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
	font-family:inherit; font-size:.84rem; font-weight:600; color:var(--page-ink);
	background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-s);
	padding:.55em 1em;
}
.gee-orderby-btn::-webkit-details-marker{ display:none; }
.gee-orderby[open] .gee-orderby-btn .gee-ff-chevron{ transform:rotate(180deg); }
.gee-orderby-menu{
	position:absolute; right:0; left:auto; top:calc(100% + 6px); min-width:210px; max-width:calc(100vw - 32px); z-index:20;
	background:var(--surface); border:1px solid var(--surface-border); border-radius:var(--radius-s);
	box-shadow:0 12px 28px rgba(23,19,15,.16); padding:6px; display:flex; flex-direction:column; gap:1px;
}
.gee-orderby-opt{
	display:block; padding:.55em .7em; border-radius:8px; font-size:.84rem; color:var(--page-ink);
	text-decoration:none; transition:background .15s ease;
}
.gee-orderby-opt:hover{ background:var(--page-bg); }
.gee-orderby-opt.is-active{ background:rgba(11,122,52,.09); color:var(--verde); font-weight:700; }


/* ============================================================
   Bloque 51 (v1.63.0) — Selector de variantes (productos variables)
   Los <select> nativos de WooCommerce se reemplazan visualmente por
   chips con el lenguaje del sitio (mismo borde, radio 999px y fuente
   mono del contador de cantidad). El <select> sigue en el DOM, oculto,
   porque es el que usa WooCommerce. Sin transiciones de fondo (ver la
   nota del modo oscuro): solo cambian borde y color de texto.
   ============================================================ */
.pdp-info form.variations_form{ display:block; flex:1 1 100%; }
.pdp-info table.variations{ width:100%; margin:0 0 6px; border:0; border-collapse:collapse; background:none; }
.pdp-info table.variations tbody,
.pdp-info table.variations tr{ display:block; background:none; }
.pdp-info table.variations tr{ margin:0 0 18px; }
.pdp-info table.variations th,
.pdp-info table.variations td{ display:block; padding:0; border:0; background:none; text-align:left; }
.pdp-info table.variations th.label label{
  display:block; margin:0 0 9px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--page-ink-muted);
}
.gee-var-field{ position:relative; }
.gee-var-field select{
  position:absolute !important; width:1px; height:1px; margin:0; padding:0;
  opacity:0; pointer-events:none; clip:rect(0 0 0 0); overflow:hidden; border:0;
}
.gee-var-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.gee-var-chip{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:.58em 1.1em; border-radius:999px; border:1.5px solid var(--surface-border);
  background:var(--page-bg); color:var(--page-ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86rem; font-weight:600; line-height:1.2;
  transition:border-color .15s ease,color .15s ease;
}
.gee-var-chip:hover{ border-color:var(--verde); color:var(--sol-ink); }
.gee-var-chip:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }
.gee-var-chip[aria-pressed="true"]{ background:var(--verde); border-color:var(--verde); color:var(--arena); }
.gee-var-chip.is-unavailable{ opacity:.42; text-decoration:line-through; }
.gee-var-chip.is-unavailable[aria-pressed="true"]{ opacity:1; text-decoration:none; }
.pdp-info a.reset_variations{
  display:inline-block; margin-top:10px; font-size:.8rem; color:var(--page-ink-muted); text-decoration:underline;
}
.pdp-info a.reset_variations:hover{ color:var(--sol-ink); }
.pdp-info .single_variation_wrap{ margin-top:4px; }
/* v1.63.3 — el recuadro solo se dibuja si trae contenido (precio,
   stock o descripción de la variante); WooCommerce siempre imprime los
   3 contenedores internos, aunque estén vacíos, así que :empty no
   bastaba. */
.pdp-info .woocommerce-variation:has(.price, .stock, .woocommerce-variation-description > *){
  margin:0 0 16px; padding:12px 16px; border:1px solid var(--surface-border);
  border-radius:var(--radius-s); background:var(--surface);
}
.pdp-info .woocommerce-variation-price .price{
  display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:1.2rem; font-weight:600; color:var(--page-ink);
}
.pdp-info .woocommerce-variation-availability p.stock{ margin:.35em 0 0; font-size:.84rem; color:var(--page-ink-muted); }
.pdp-info .woocommerce-variation-availability p.stock.in-stock{ color:var(--exito); }
.pdp-info .woocommerce-variation-add-to-cart{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
/* El botón deshabilitado (aún sin variante elegida) tomaba el morado de
   WooCommerce (".woocommerce button.button.alt.disabled" gana en
   especificidad a la regla base del botón): se fija aquí el verde. */
.pdp-info .single_add_to_cart_button.button.alt.disabled,
.pdp-info .single_add_to_cart_button.button.alt.disabled:hover{ background:var(--verde); color:var(--arena); }


/* ============================================================
   Bloque 54 (v1.64.0) — Plan de ajustes de QA, Versión A
   ============================================================ */
/* TIE-2 — Aviso de preventa (ficha y recuadro de la variante). */
.gee-preventa-aviso{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  padding:7px 13px; border-radius:999px; border:1px solid var(--amanecer);
  background:rgba(255,182,39,.14); color:var(--page-ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.8rem; font-weight:600;
}
.gee-preventa-aviso::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--amanecer); flex:none; }
.pdp-info .woocommerce-variation-availability .gee-preventa-aviso{ margin-top:8px; }
/* SEG-5 — Campo trampa anti-spam de CF7: fuera de la vista y del tabulador. */
.gee-hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
/* CAL-1 — Error de validación del consumo en la calculadora. */
.gee-calc-error{ margin:8px 0 0; color:#C0392B; font-size:.86rem; font-weight:600; }
:root[data-site-theme="dark"] .gee-calc-error{ color:#FF8A7A; }
.field input[aria-invalid="true"]{ border-color:#C0392B !important; }
/* TIE-1 — Wompi en el checkout de bloques. Desde la v1.65.0 el nombre
   "Wompi" lo pinta el propio plugin (el tema le publica los datos con la
   clave que su script espera, ver functions.php, Bloque 56). Aquí solo
   queda la segunda línea con los medios de pago y el texto del recuadro. */
#radio-control-wc-payment-method-options-wompi + .wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label-group::after{
  content:"Tarjeta, PSE, Nequi o Bancolombia"; display:block; font-size:.85em; font-weight:400; opacity:.75;
}
#radio-control-wc-payment-method-options-wompi + .wc-block-components-radio-control__option-layout .wc-block-components-radio-control__label-group{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
}
#radio-control-wc-payment-method-options-wompi__content .wc-block-payment-method__description{ font-size:0 !important; }
#radio-control-wc-payment-method-options-wompi__content .wc-block-payment-method__description::before{
  content:"Pago seguro a través de"; font-size:.92rem; font-weight:600;
}

/* FOR-1 (v1.65.2) — botón de respaldo "Abrir WhatsApp" tras enviar el formulario. */
.gee-wa-respaldo{ margin-top:12px; padding:12px; border:1px solid var(--surface-border); border-radius:var(--radius-s); background:var(--surface); text-align:center; }
.gee-wa-respaldo p{ margin:0 0 10px; font-size:.9rem; color:var(--page-ink); }
.gee-wa-respaldo__btn{ display:inline-flex; align-items:center; justify-content:center; padding:.7em 1.4em; border-radius:999px; background:#25D366; color:#fff !important; font-weight:700; text-decoration:none !important; }
.gee-wa-respaldo__btn:hover,.gee-wa-respaldo__btn:focus-visible{ background:#1ebe5b; outline:2px solid #1ebe5b; outline-offset:2px; }

/* =========================================================================
   Bloque 61 (v1.68.0) — EQUIPO POR GRUPOS (Nosotros)
   Filtro lateral en computador, selector en celular, bandas en movimiento
   en «Todos» y grupo quieto al elegirlo.
   ========================================================================= */
.gee-eq{ --gee-eq-av:88px; }
.gee-eq-sub{ margin:8px 0 32px; max-width:60ch; }
.gee-eq-grid{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:40px; align-items:start; }
.gee-eq-grid > *,.gee-eq-stage,.gee-eq-panel{ min-width:0; }
.gee-eq{ overflow-x:clip; }
.gee-eq-tabs{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--surface-border); position:sticky; top:110px; }
.gee-eq-tabs-t,.gee-eq-sel label{ font:500 .66rem "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--page-ink-muted); }
.gee-eq-tabs-t{ margin:0 0 10px 16px; }
.gee-eq-tab{ display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; border:0; border-left:3px solid transparent; margin-left:-2px; background:transparent; color:var(--page-ink); padding:9px 12px 9px 15px; border-radius:0 10px 10px 0; font:500 .92rem/1.3 "Figtree",system-ui,sans-serif; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }
.gee-eq-tab span{ font:500 .72rem "IBM Plex Mono",ui-monospace,monospace; color:var(--page-ink-muted); background:var(--surface); border-radius:999px; padding:2px 8px; flex:0 0 auto; }
.gee-eq-tab:focus{ background:transparent; color:var(--page-ink); border-color:transparent; }
.gee-eq-tab:hover{ background:var(--surface); color:var(--page-ink); }
.gee-eq-tab[aria-selected="true"],.gee-eq-tab[aria-selected="true"]:focus,.gee-eq-tab[aria-selected="true"]:hover{ border-left-color:var(--verde); background:var(--surface); color:var(--verde); font-weight:600; }
.gee-eq-tab[aria-selected="true"] span{ background:var(--verde); color:#fff; }
.gee-eq-tab:focus-visible,.gee-eq-row:focus-visible{ outline:2px solid var(--verde); outline-offset:-2px; }
.gee-eq-sel{ display:none; position:relative; }
.gee-eq-sel label{ display:block; margin-bottom:6px; }
.gee-eq-sel select{ width:100%; -webkit-appearance:none; appearance:none; background:var(--surface); border:1px solid var(--surface-border); border-radius:12px; padding:12px 40px 12px 14px; font:600 1rem "Figtree",system-ui,sans-serif; color:var(--page-ink); }
.gee-eq-sel::after{ content:""; position:absolute; right:16px; bottom:19px; width:8px; height:8px; border-right:2px solid var(--verde); border-bottom:2px solid var(--verde); transform:rotate(45deg); pointer-events:none; }

.gee-eq-stage{ min-height:calc(var(--gee-eq-av) + 150px); }
.gee-eq-panel[hidden]{ display:none; }
.gee-eq-row{ overflow:hidden; padding:6px 0; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.gee-eq-row + .gee-eq-row{ margin-top:18px; }
.gee-eq-track{ display:flex; width:max-content; }
.gee-eq-track.is-on{ animation:gee-eq-correr var(--gee-eq-dur,60s) linear infinite; }
.gee-eq-row.is-rev .gee-eq-track.is-on{ animation-direction:reverse; }
.gee-eq-row:hover .gee-eq-track,.gee-eq-row.is-paused .gee-eq-track{ animation-play-state:paused; }
@keyframes gee-eq-correr{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.gee-eq-p{ width:calc(var(--gee-eq-av) + 76px); flex:0 0 auto; text-align:center; padding:0 4px; }
.gee-eq-av{ width:var(--gee-eq-av); height:var(--gee-eq-av); border-radius:50%; margin:0 auto 10px; background:var(--surface); display:grid; place-items:center; overflow:hidden; font:600 calc(var(--gee-eq-av) * .32) "Bricolage Grotesque",system-ui,sans-serif; color:var(--page-ink-muted); box-shadow:0 6px 16px -10px rgba(23,19,15,.35); transition:transform .25s; }
.gee-eq-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.gee-eq-p:hover .gee-eq-av{ transform:translateY(-3px); }
.gee-eq-n{ font-weight:600; font-size:.88rem; line-height:1.25; color:var(--page-ink); }
.gee-eq-c{ color:var(--verde); font-size:.76rem; line-height:1.3; margin-top:2px; }
.gee-eq-g{ font:500 .64rem "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--page-ink-muted); margin-top:4px; overflow-wrap:anywhere; }
.gee-eq-desc{ color:var(--page-ink-muted); font-size:.92rem; margin:0 0 22px; }
.gee-eq-static{ display:flex; flex-wrap:wrap; gap:22px 8px; padding:6px 0; }
.gee-eq-static .gee-eq-p{ animation:gee-eq-entrar .35s ease both; }
@keyframes gee-eq-entrar{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:860px){
	.gee-eq-grid{ grid-template-columns:minmax(0,1fr); gap:18px; }
	.gee-eq-tabs{ display:none; }
	.gee-eq-sel{ display:block; }
	.gee-eq-static{ justify-content:center; }
	.gee-eq-desc{ text-align:center; }
}
@media (max-width:640px){ .gee-eq{ --gee-eq-av:72px; } }
@media (prefers-reduced-motion:reduce){
	.gee-eq-track.is-on{ animation:none; }
	.gee-eq-row{ overflow-x:auto; -webkit-mask:none; mask:none; }
	.gee-eq-static .gee-eq-p{ animation:none; }
}

/* =========================================================================
   Bloque 64 (v1.69.0) — Cierre para el 7-oct (QA responsive 30/09)
   ========================================================================= */

/* D1 — Cifras de la portada en una sola fila. */
.gee-hero-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:40px; max-width:620px; }
.gee-hero-stats b{ font-size:1.4rem; }
@media (max-width:480px){ .gee-hero-stats{ gap:14px; } .gee-hero-stats b{ font-size:1.2rem !important; } .gee-hero-stats span{ font-size:.78rem !important; } }

/* R4 — «Estás pagando como invitado» del checkout de bloques: la tienda
   solo vende como invitado (TIE-7), el aviso sobra. */
.wc-block-checkout__guest-checkout-notice{ display:none !important; }

/* R2 — Menú ☰ por encima de los botones flotantes. */
body.gee-nav-abierto .fab-stack,
body:has(.navlinks.open) .fab-stack{ opacity:0; visibility:hidden; pointer-events:none; }
.topbar:has(.navlinks.open){ z-index:80; }

/* R5 / M8 — Áreas de toque de al menos 44 px en el celular. */
@media (max-width:900px){
	.navtoggle,.theme-toggle,.cart-btn{ min-width:44px; min-height:44px; }
	.navtoggle{ align-items:center; justify-content:center; }
	.theme-toggle{ width:44px; height:44px; }
	.gee-social-row a{ min-width:44px; min-height:44px; }
	.page-numbers,.woocommerce-pagination a,.woocommerce-pagination span{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
	.pdp-tab-btn,.gee-eq-tab,.chip{ min-height:44px; }
	.gee-shop-filtros label{ min-height:44px; display:flex; align-items:center; }
	.gee-shop-filtros-btn{ min-height:44px; }
}

/* M1 — Ficha en el celular: imagen → título → precio → variantes →
   botón; la marca y las certificaciones pasan debajo. */
@media (max-width:920px){
	.pdp-grid{ gap:20px; }
	.pdp-grid > div:first-child{ display:contents; }
	.pdp-grid .gallery-main{ order:1; aspect-ratio:4/3; }
	.pdp-grid .pdp-info{ order:2; }
	.pdp-grid .pdp-trust{ order:3; margin-top:8px; }
}

/* M2 — Botones flotantes en el celular: solo WhatsApp, sin la nube de
   texto, con espacio al final de la página; en la ficha se esconden
   mientras se ve el botón de compra. */
@media (max-width:640px){
	.fab-calc,#calcFab{ display:none !important; }
	.wa-thought{ display:none !important; }
	body{ padding-bottom:84px; }
	body.gee-compra-visible .fab-stack{ opacity:0; visibility:hidden; pointer-events:none; }
}
.fab-stack{ transition:opacity .2s ease, visibility .2s ease; }

/* M4 — Tienda en 2 columnas en el celular, tarjetas compactas. */
@media (max-width:640px){
	#productGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
	#productGrid .product-body{ padding:10px 12px 12px; }
	#productGrid .product-name{ font-size:.86rem; line-height:1.3; }
	#productGrid .product-cat{ font-size:.66rem; }
	#productGrid .product-price{ font-size:.9rem; }
}

/* M5 — Portada: categorías del catálogo en 2 columnas compactas. */
@media (max-width:640px){
	.section .grid-4:has(.category-tile){ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
	.category-tile{ padding:14px; }
	.category-tile .category-tile-icon svg{ width:40px !important; height:40px !important; }
	.category-tile b{ font-size:.92rem; }
	.category-tile .muted{ font-size:.74rem !important; }
}

/* =========================================================================
   Bloque 65 (v1.69.1) — Enlaces legales del pie, N5 y N6 (QA 30/09)
   ========================================================================= */
#siteFooter .foot-legal{ display:flex; flex-wrap:wrap; gap:4px 18px; }
#siteFooter .foot-legal a{ color:var(--tierra-dark); text-decoration:none; }
#siteFooter .foot-legal a:hover{ color:var(--amanecer); }
#siteFooter .foot-legal-tit{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amanecer); font-weight:600; display:inline-flex; align-items:center; }
.gee-legal-pago{ font-size:.85rem; line-height:1.5; margin:10px 0 0; color:var(--page-ink-muted); }
.gee-legal-pago a{ color:var(--sol-ink); }
@media (max-width:900px){
	#siteFooter .foot-grid > div > a{ display:flex; align-items:center; min-height:44px; padding:0; }
	#siteFooter .foot-legal a{ display:inline-flex; align-items:center; min-height:44px; }
	.pdp-tab-list{ -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); padding-right:28px; }
}

/* Bloque 74 (v1.70.0) — botones de fichas técnicas en PDF. */
.gee-fichas-pdf{display:flex;flex-wrap:wrap;gap:10px}
.gee-fichas-pdf .btn{max-width:100%;white-space:normal;text-align:left}

/* Bloque 77 (v1.73.0) — con el formulario de WhatsApp abierto (desde
   cualquier botón de la página), los flotantes se muestran siempre,
   aunque estén ocultos por el menú o por el botón de compra en el
   celular: el formulario vive dentro de ellos. */
body.gee-wa-abierto .fab-stack{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }

/* Bloque 78 (v1.74.0) — «Datos principales» en la ficha de proyecto. */
.gee-proy-datos{list-style:none;padding:0;margin:16px 0 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 24px}
.gee-proy-datos li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.45}
.gee-proy-datos li span{flex:none;width:18px;height:18px;margin-top:2px;color:var(--verde)}
.gee-proy-datos li svg{width:100%;height:100%}

/* ============================================================
   Bloque 79 (v1.75.0) — Ajustes del blog
   Todos los colores salen de las variables de rol, así que el modo
   oscuro (data-site-theme="dark") queda cubierto sin reglas aparte.
   ============================================================ */

/* Foco visible por teclado en todo el sitio (2 px verde). */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.chip:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--verde); outline-offset:2px; }
:root[data-site-theme="dark"] a:focus-visible,:root[data-site-theme="dark"] button:focus-visible,:root[data-site-theme="dark"] input:focus-visible,:root[data-site-theme="dark"] summary:focus-visible{ outline-color:var(--verde-light); }
.gee-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.gee-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Listado: buscador y títulos H2 con el mismo tamaño que tenían en H3. */
.gee-blog-buscar{ display:flex; gap:10px; margin-bottom:20px; max-width:560px; }
.gee-blog-buscar input{ flex:1; min-width:0; padding:12px 16px; border-radius:999px; border:1.5px solid var(--surface-border); background:var(--input-bg); color:var(--page-ink); font:inherit; }
h2.post-title{ font-size:1.12rem; line-height:1.35; margin:0; }

/* Banner del aviso en el blog (va dentro del encabezado fijo). */
.gee-banner-aviso{ display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--amanecer); color:var(--carbon); font-size:.88rem; font-weight:600; }
.gee-banner-aviso img{ width:36px; height:36px; border-radius:6px; object-fit:cover; flex:none; }
.gee-banner-aviso p{ margin:0; flex:1; min-width:0; }
.gee-banner-aviso a{ color:var(--carbon); text-decoration:underline; white-space:nowrap; }
.gee-banner-aviso button{ background:none; border:0; padding:4px; cursor:pointer; color:var(--carbon); display:inline-flex; }
.gee-banner-aviso svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }

/* Barra de progreso de lectura. */
.gee-progreso{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none; }
.gee-progreso span{ display:block; height:100%; background:var(--verde); transform:scaleX(0); transform-origin:0 50%; }

/* Migas de pan. */
.gee-migas ol{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0 0 4px; font-size:.84rem; color:var(--page-ink-muted); }
.gee-migas li+li::before{ content:"›"; margin-right:6px; }
.gee-migas a{ color:var(--page-ink-muted); }
.gee-migas [aria-current]{ color:var(--page-ink); }

/* Diseño del artículo: columna lateral (contenido + compartir) en escritorio. */
.gee-art-aside{ display:none; }
@media (min-width:1100px){
  .gee-art-wrap{ display:grid; grid-template-columns:220px minmax(0,70ch); gap:56px; justify-content:center; }
  .gee-art-wrap .article{ margin:0; }
  .gee-art-aside{ display:flex; flex-direction:column; gap:28px; position:sticky; top:110px; align-self:start; max-height:calc(100vh - 140px); overflow:auto; }
  .gee-toc--movil,.gee-share--final{ display:none; }
}

/* Tabla de contenidos. */
.gee-toc__titulo,.gee-share__titulo{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--page-ink-muted); margin:0 0 10px; }
.gee-toc__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--surface-border); }
.gee-toc__lista a{ display:block; padding:6px 0 6px 12px; margin-left:-2px; border-left:2px solid transparent; font-size:.86rem; line-height:1.35; color:var(--page-ink-muted); text-decoration:none; }
.gee-toc__lista a:hover,.gee-toc__lista a[aria-current]{ color:var(--verde); border-left-color:var(--verde); }
:root[data-site-theme="dark"] .gee-toc__lista a:hover,:root[data-site-theme="dark"] .gee-toc__lista a[aria-current]{ color:var(--verde-light); border-left-color:var(--verde-light); }
.gee-toc--movil{ margin-top:24px; border:1px solid var(--surface-border); border-radius:var(--radius-s); background:var(--surface); }
.gee-toc--movil summary{ padding:12px 16px; font-weight:600; cursor:pointer; }
.gee-toc--movil .gee-toc__lista{ margin:0 16px 14px; }

/* Botones de compartir. */
.gee-share__btns{ display:flex; gap:8px; flex-wrap:wrap; }
.gee-share__btn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--surface-border); background:var(--page-bg); color:var(--page-ink); cursor:pointer; padding:0; }
.gee-share__btn:hover{ border-color:var(--verde); color:var(--verde); }
.gee-share__btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gee-share__ok{ display:block; min-height:1.2em; font-size:.8rem; color:var(--verde); margin-top:6px; }
.gee-share--final{ margin-top:36px; padding-top:20px; border-top:1px solid var(--surface-border); }
.gee-share--final .gee-share__btns{ gap:12px; }

/* Lead magnet, boletín y aviso de salida. */
.gee-magnet{ margin:36px 0; padding:24px; border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--surface-border); }
.gee-magnet__eyebrow{ margin:0; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sol-ink); }
.gee-magnet__titulo{ margin:6px 0 0; font-size:1.2rem; font-weight:700; line-height:1.3; color:var(--page-ink); }
.gee-magnet__texto{ margin:8px 0 0; color:var(--page-ink-muted); }
.gee-lead-form{ margin-top:16px; }
.gee-lead-form__campos{ display:flex; flex-wrap:wrap; gap:10px; }
.gee-lead-form__campos input{ flex:1 1 180px; min-width:0; padding:12px 14px; border-radius:var(--radius-s); border:1.5px solid var(--surface-border); background:var(--input-bg); color:var(--page-ink); font:inherit; }
.gee-lead-form__acepto{ display:flex; gap:8px; align-items:flex-start; margin-top:10px; font-size:.82rem; color:var(--page-ink-muted); }
.gee-lead-form__acepto a{ color:inherit; text-decoration:underline; }
.gee-lead-form__msg{ margin:10px 0 0; font-size:.9rem; color:var(--page-ink); min-height:1.2em; }
.gee-lead-form--ok .gee-lead-form__campos,.gee-lead-form--ok .gee-lead-form__acepto{ display:none; }
.gee-boletin{ margin-top:40px; padding:28px; border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--surface-border); }
.gee-boletin h2{ margin:0; font-size:1.3rem; }
.gee-boletin p{ margin:8px 0 0; color:var(--page-ink-muted); }
.gee-salida{ position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(23,19,15,.72); }
.gee-salida[hidden]{ display:none; }
.gee-salida__caja{ position:relative; width:min(520px,100%); padding:32px 28px 24px; border-radius:var(--radius-m); background:var(--page-bg); color:var(--page-ink); box-shadow:var(--shadow-2); }
.gee-salida__x,.gee-sticky-cta__x{ position:absolute; top:10px; right:10px; background:none; border:0; padding:6px; cursor:pointer; color:var(--page-ink-muted); display:inline-flex; }
.gee-salida__x svg,.gee-sticky-cta__x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }

/* Fuentes y CTA final por categoría. */
.gee-fuentes{ margin-top:40px; padding-top:20px; border-top:1px solid var(--surface-border); }
.gee-fuentes h2{ font-size:1.15rem; margin:0 0 10px; }
.gee-fuentes ul{ margin:0; padding-left:1.2em; display:grid; gap:6px; font-size:.92rem; }
.gee-art-cta{ margin-top:40px; padding:28px; border-radius:var(--radius-m); background:var(--carbon); color:var(--arena); }
.gee-art-cta h2{ margin:0; font-size:1.35rem; color:var(--arena); }
.gee-art-cta p{ margin:8px 0 0; color:var(--tierra-dark); }
.gee-art-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
:root[data-site-theme="dark"] .gee-art-cta{ background:var(--carbon-soft); border:1px solid var(--surface-border); }

/* Barra inferior «Agenda 15 min con un ingeniero». */
.gee-sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 56px 10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:var(--carbon); color:var(--arena); box-shadow:0 -8px 24px -12px rgba(0,0,0,.4); }
.gee-sticky-cta[hidden]{ display:none; }
.gee-sticky-cta p{ margin:0; font-weight:600; font-size:.92rem; }
.gee-sticky-cta .btn{ padding:10px 18px; font-size:.88rem; }
.gee-sticky-cta__x{ top:50%; transform:translateY(-50%); color:var(--tierra-dark); }
body.gee-sticky-cta-on .fab-stack{ bottom:84px; }
body.gee-sticky-cta-on{ padding-bottom:64px; }
@media (max-width:600px){ .gee-sticky-cta p{ display:none; } }
.gee-fuentes a{ color:var(--sol-ink); }
.gee-art-cta .btn-ghost-light{ color:var(--arena); border-color:rgba(251,247,241,.35); background:transparent; }
.gee-art-cta .btn-ghost-light:hover{ border-color:var(--arena); }
.gee-banner-aviso__link{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; color:var(--carbon); text-decoration:none!important; }
.gee-banner-aviso__link strong{ text-decoration:underline; white-space:nowrap; }
.gee-banner-aviso{ white-space:normal; }
.gee-banner-aviso__link span{ min-width:0; flex:1 1 220px; overflow-wrap:anywhere; }
@media (max-width:600px){ .gee-banner-aviso{ font-size:.8rem; padding:8px 12px; } }
.gee-banner-aviso__link,.gee-banner-aviso__link span{ white-space:normal!important; }

/* Bloque 81 (v1.75.4) — ajustes de QA */
/* A4: carrito y checkout usan todo el ancho (antes 74ch de lectura) y el total no repite el nombre del envío. */
.woocommerce-cart .gee-content .gee-content-body,.woocommerce-checkout .gee-content .gee-content-body,.woocommerce-account .gee-content .gee-content-body{ max-width:none; }
.wc-block-components-totals-shipping .wc-block-components-totals-shipping__via{ display:none; }
/* A6: la línea de categoría · fecha · minutos se acomoda en celular. */
.post-meta{ flex-wrap:wrap; row-gap:4px; }
/* A3: aviso al añadir al carrito en la ficha. */
.gee-avisos-wc{ margin:16px 0 0; }
.gee-avisos-wc:empty{ display:none; }
.gee-avisos-wc .woocommerce-message{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.gee-avisos-wc .woocommerce-message .button{ order:2; }

/* =========================================================================
   v1.76.0 — Lista de QA del 7-oct
   ========================================================================= */

/* P4: el ícono de WooCommerce ya no tapa la primera letra del aviso. */
.woocommerce-message,.woocommerce-error,.woocommerce-info{ position:relative; padding-left:3em; }
.woocommerce-message::before,.woocommerce-error::before,.woocommerce-info::before{ left:1em; top:14px; }
.woocommerce-error li{ list-style:none; }

/* P18: barra de cookies. */
.gee-cookies{
  position:fixed; z-index:9990; left:16px; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  max-width:760px; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  padding:16px 18px; border-radius:var(--radius-s, 10px);
  background:var(--surface, #fff); color:inherit;
  border:1px solid var(--surface-border, rgba(0,0,0,.12));
  box-shadow:0 10px 30px rgba(0,0,0,.18); font-size:.9rem;
}
.gee-cookies[hidden]{ display:none; }
.gee-cookies p{ margin:0; flex:1 1 320px; min-width:0; }
.gee-cookies__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.gee-cookies__btns .btn{ white-space:nowrap; }
@media (max-width:520px){ .gee-cookies__btns{ width:100%; } .gee-cookies__btns .btn{ flex:1 1 0; justify-content:center; } }
.foot-legal button.foot-legal-link{ background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.gee-cookies a{ color:var(--verde); text-underline-offset:2px; }