/* Reset acotado y estilos de controles. Depende de tokens.css. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--gal-font);
  font-size: var(--gal-fs-base);
  color: var(--gal-texto);
  background: var(--gal-fondo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 var(--gal-sp-3); line-height: 1.2; font-weight: var(--gal-fw-bold); }
h1 { font-size: 2rem; }
h2 { font-size: var(--gal-fs-titulo); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--gal-sp-3); }

/* LAS MISMAS REGLAS, scopeadas al cotizador. La duplicacion es a proposito.
   Las de arriba son selectores de elemento pelado y solo mandan cuando la pagina
   es nuestra: en el sitio de Galeon, que esta hecho con Elementor, cualquier regla
   del tema con una clase les gana. Medido ahi: los h2 salian a 52px en vez de 24 y
   los parrafos sin margen, con el resumen todo amontonado.
   Las de arriba se quedan porque las paginas de la demo de Fase 1 tienen contenido
   fuera del cotizador. Si se toca una version, hay que tocar la otra. */
.gal-cotizador {
  font-family: var(--gal-font);
  font-size: var(--gal-fs-base);
  line-height: 1.5;
  color: var(--gal-texto);
}
.gal-cotizador h1,
.gal-cotizador h2,
.gal-cotizador h3 {
  margin: 0 0 var(--gal-sp-3);
  line-height: 1.2;
  font-weight: var(--gal-fw-bold);
  color: inherit;
}
.gal-cotizador h1 { font-size: 2rem; }
.gal-cotizador h2 { font-size: var(--gal-fs-titulo); }
.gal-cotizador h3 { font-size: 1.1rem; }
.gal-cotizador p { margin: 0 0 var(--gal-sp-3); }

.gal-contenedor {
  max-width: var(--gal-ancho-max);
  margin: 0 auto;
  padding: var(--gal-sp-6) var(--gal-sp-4);
}

/* Campos */
.gal-campo { display: flex; flex-direction: column; gap: var(--gal-sp-1); margin-bottom: var(--gal-sp-4); }
.gal-campo > label { font-size: var(--gal-fs-chico); color: var(--gal-texto-suave); }

.gal-campo input,
.gal-campo select {
  width: 100%;
  padding: var(--gal-sp-3);
  font: inherit;
  color: var(--gal-texto);
  background: var(--gal-fondo);
  border: 1px solid var(--gal-borde);
  border-radius: var(--gal-radio-chico);
}

.gal-campo input:focus-visible,
.gal-campo select:focus-visible,
.gal-btn:focus-visible {
  outline: 2px solid var(--gal-acento);
  outline-offset: 2px;
}

.gal-campo input[readonly] { background: var(--gal-fondo-alt); color: var(--gal-texto-suave); }
.gal-campo input[aria-invalid="true"] { border-color: var(--gal-error); }
.gal-error-campo { font-size: var(--gal-fs-mini); color: var(--gal-error); }

/* Botones.
   TODO va scopeado a .gal-cotizador, y no es decoracion del selector: el sitio de
   Galeon usa Elementor, cuyo "style kit" emite `.elementor-kit-NN button { ... }`
   —una clase y un elemento— que le gana a cualquier regla nuestra de una sola
   clase. Medido en el sitio real: nuestros botones salian con el padding, el radio
   y los colores de Elementor, y los dos botones "desnudos" —Quitar y Modificar el
   envio— aparecian como pastillas celestes con texto blanco.
   Ninguna pagina usa .gal-btn fuera del cotizador, asi que scopear no deja nada
   sin estilo. */
.gal-cotizador .gal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gal-sp-2);
  min-height: 44px;
  padding: var(--gal-sp-3) var(--gal-sp-5);
  font: inherit;
  font-weight: var(--gal-fw-bold);
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
}
.gal-cotizador .gal-btn--primario { background: var(--gal-acento); color: #fff; }
.gal-cotizador .gal-btn--secundario { background: transparent; color: var(--gal-texto); border-color: var(--gal-borde); }
.gal-cotizador .gal-btn--wsp { background: #25D366; color: #fff; }
.gal-cotizador .gal-btn:disabled { opacity: .5; cursor: not-allowed; }

/* CADA boton declara su :hover Y su :focus, aunque el valor repita el de reposo.
   No es redundancia: el tema del sitio (Hello Elementor) trae en su reset.css

     button:focus, button:hover, [type=submit]:hover { background-color:#c36; color:#fff }

   que pega en TODOS los botones del sitio. El que no declara fondo para esos dos
   estados lo hereda, y aparece un frambuesa que no es de la marca: pasaba con el
   boton de WhatsApp —que se ponia rojo— y con los dos botones "desnudos" del
   cotizador. Si se sacan estas reglas, el sintoma vuelve y parece un bug nuestro. */
.gal-cotizador .gal-btn--primario:hover,
.gal-cotizador .gal-btn--primario:focus { background: var(--gal-acento-oscuro); color: #fff; }
.gal-cotizador .gal-btn--secundario:hover,
.gal-cotizador .gal-btn--secundario:focus { background: transparent; color: var(--gal-texto); }
.gal-cotizador .gal-btn--wsp:hover,
.gal-cotizador .gal-btn--wsp:focus { background: #1EBE5A; color: #fff; }

/* Utilidades */
.gal-oculto { display: none !important; }
.gal-solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}