/* ===========================================================
   Gira Gira by Speed Queen — design tokens
   Fuente: Brandbook Gira Gira + maquetas "Web Gira Gira - *.dc.html"
   No inventar valores nuevos: todo lo que se use en la web sale de aquí.
   =========================================================== */

:root {
  /* --- Color de marca --- */
  --gg-naranja:        #E8481F;  /* acento principal, CTAs, cifras */
  --gg-naranja-hover:  #C93B14;  /* hover de enlaces y botones */
  --gg-naranja-claro:  #FF7A52;  /* acento SOBRE fondo oscuro: sobre tinta el #E8481F no contrasta */
  --gg-tinta:          #1A1A1A;  /* texto principal */
  --gg-tinta-2:        #1F1D1B;  /* tarjeta oscura del bento "carga y paga" */
  --gg-grafito:        #57534C;  /* texto secundario / párrafos largos */
  --gg-gris:           #6B665E;  /* texto de apoyo en tarjetas */
  --gg-gris-claro:     #7C766D;  /* direcciones, metadatos */
  --gg-gris-suave:     #8E887E;  /* pie de página, microcopy */
  --gg-placeholder:    #A9A49B;

  /* --- Fondos --- */
  --gg-crema:          #FBF8F3;  /* fondo base de la página */
  --gg-crema-2:        #F6F2EB;  /* franjas alternas (localizador, lavanderías) */
  --gg-arena:          #EDE7DC;  /* placeholder de imagen */
  --gg-blanco:         #FFFFFF;  /* tarjetas */

  /* --- Líneas --- */
  --gg-borde:          #E9E2D7;  /* borde de tarjeta y separador de sección */
  --gg-borde-2:        #DED7CA;  /* borde de input y mapa */
  --gg-borde-3:        #E4DDD0;  /* separador de lista */
  --gg-borde-4:        #F0EAE0;  /* separador interno de tarjeta */

  /* --- Estado "abierto ahora" --- */
  --gg-abierto-texto:  #2E8B57;
  --gg-abierto-borde:  #B9D8C5;
  --gg-abierto-fondo:  #F1F8F3;
  --gg-abierto-oscuro: #7BE0A6;  /* el mismo indicador sobre foto o fondo oscuro */

  /* --- WhatsApp: color de marca ajena, solo para su botón --- */
  --gg-wa:             #25D366;
  --gg-wa-hover:       #1DA851;

  /* --- Tipografía --- */
  --gg-font: 'Archivo', system-ui, -apple-system, sans-serif;
  --gg-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Pesos usados: 400 / 600 / 700 / 800. El 800 es SIEMPRE uppercase. */

  --gg-h1:      44px;  /* hero, line-height 1.02, letter-spacing -.015em, uppercase */
  --gg-h2-xl:   44px;  /* franja empresas */
  --gg-h2:      22px;  /* títulos de sección, uppercase */
  --gg-h2-sm:   19px;  /* títulos de sección secundarios */
  --gg-stat:    34px;  /* cifras de la franja de ventajas */
  --gg-step:    38px;  /* numerales 01 / 02 / 03 */
  --gg-body:    14px;  /* párrafo del hero */
  --gg-body-sm: 12.5px;/* párrafos de tarjeta */
  --gg-meta:    11.5px;/* direcciones, enlaces de pie */
  --gg-micro:   10.5px;/* legal, etiquetas */

  /* Etiquetas: font-weight 700, uppercase, letter-spacing .06em–.09em */
  --gg-track-label: .06em;
  --gg-track-nav:   .05em;
  --gg-track-kicker:.09em;

  /* --- Geometría --- */
  --gg-radio: 3px;             /* ÚNICO radio del sistema. Nada más redondeado. */
  /* Contenedor centrado. El handoff de mediodía probó quitarlo (full width) y
     se descartó: vuelve el tope de 1360px. Las franjas de color siguen
     ocupando todo el ancho; lo que se alinea es su contenido interior. */
  --gg-max:   1360px;
  --gg-gutter: 44px;           /* padding lateral; 20px en móvil */
  --gg-nav-h: 86px;
  --gg-logo-nav: 64px;         /* altura del lockup en el menú.
                                  El handoff marca 44px / navbar 80px, pero Elena pidió
                                  expresamente el logo más grande: manda su indicación. */
  --gg-logo-footer: 58px;

  /* --- Sombra: prácticamente inexistente. Pines de mapa y elevación de tarjeta. --- */
  --gg-sombra-pin: 0 2px 3px rgba(26,26,26,.22);
  --gg-sombra-card: 0 22px 44px -28px rgba(26,26,26,.4);
  --gg-sombra-op:   0 20px 40px -28px rgba(26,26,26,.4);

  /* --- Movimiento --- */
  --gg-ease: cubic-bezier(.2,.7,.2,1);
}

/* Reglas no negociables del sistema
   1. Un solo radio: 3px. Nunca pills ni cards redondeadas.
   2. Máximo 2 fondos por página: --gg-crema y --gg-crema-2.
   3. El naranja es acento, no fondo, salvo la franja de empresas y los CTA.
   4. Todo texto a 800 va en mayúsculas; los párrafos nunca en mayúsculas.
   5. Sin degradados, sin emoji, sin iconos de relleno decorativo.
   6. Iconos: SVG stroke 1.6–2, currentColor o --gg-naranja, nunca fill.
*/