/* Layout y componentes compartidos por los dos cotizadores. */
.gal-cotizador {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gal-sp-5);
}

@media (min-width: 900px) {
  .gal-cotizador--dos-columnas { grid-template-columns: 1fr 1fr; align-items: start; }
  .gal-cotizador--dos-columnas .gal-panel-resultado { position: sticky; top: var(--gal-sp-4); }
}

/* Que panel se ve lo decide data-paso, que pone pasos.js y nadie mas.
   En el paso 3 el panel de datos sale del flujo y la grilla reubica sola: la
   cotizacion cae en la columna 1 y el formulario en la 2. */
.gal-cotizador[data-paso="datos"] .gal-panel--lead,
.gal-cotizador[data-paso="mail"] .gal-panel--datos { display: none; }

/* En el paso 3 la cotizacion es contexto de solo lectura: el CTA llevaria al
   paso en el que ya estas, y quitar un item dejaria el formulario mandando una
   cotizacion vacia. Para cambiar algo esta "Modificar el envio". */
.gal-cotizador[data-paso="mail"] .gal-acciones,
.gal-cotizador[data-paso="mail"] .gal-item__quitar { display: none; }

/* Nombres para que el navegador anime el movimiento de un panel entre columnas
   en vez de un salto. Tienen que ser unicos en el documento. */
.gal-panel--datos { view-transition-name: gal-datos; }
.gal-panel-resultado { view-transition-name: gal-resultado; }
.gal-panel--lead { view-transition-name: gal-lead; }

::view-transition-group(gal-datos),
::view-transition-group(gal-resultado),
::view-transition-group(gal-lead) { animation-duration: .28s; }

/* Donde no hay View Transitions, el panel del paso 3 al menos entra con un
   fade. Con la API disponible este keyframe no corre: lo animaria el navegador
   dos veces y el snapshot saldria a medio camino. */
@keyframes gal-aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@supports not (view-transition-name: none) {
  .gal-cotizador[data-paso="mail"] .gal-panel--lead {
    animation: gal-aparecer .28s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gal-cotizador[data-paso="mail"] .gal-panel--lead { animation: none; }
}

.gal-panel {
  background: var(--gal-fondo);
  border: 1px solid var(--gal-borde);
  border-radius: var(--gal-radio);
  padding: var(--gal-sp-5);
}
.gal-panel-resultado { background: var(--gal-fondo-alt); }

.gal-grilla-2,
.gal-grilla-3 { display: grid; grid-template-columns: 1fr; gap: 0 var(--gal-sp-4); }
@media (min-width: 600px) {
  .gal-grilla-2 { grid-template-columns: repeat(2, 1fr); }
  .gal-grilla-3 { grid-template-columns: repeat(3, 1fr); }
}

.gal-separador { border: 0; border-top: 1px solid var(--gal-borde); margin: var(--gal-sp-4) 0; }

/* Lineas del resumen */
.gal-linea { display: flex; justify-content: space-between; gap: var(--gal-sp-4); padding: var(--gal-sp-1) 0; }
.gal-linea__monto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gal-linea--total { font-size: var(--gal-fs-total); font-weight: var(--gal-fw-bold); }
.gal-linea--total-ars { color: var(--gal-acento); font-weight: var(--gal-fw-bold); }

.gal-item { padding: var(--gal-sp-3) 0; border-bottom: 1px solid var(--gal-borde); }
/* El ultimo item ya queda separado por el hr que abre los costos fijos: con su
   borde propio se veia una doble linea. */
.gal-item:last-child { border-bottom: 0; padding-bottom: 0; }
.gal-item__cabecera { display: flex; justify-content: space-between; gap: var(--gal-sp-3); }
.gal-item__meta { color: var(--gal-texto-suave); font-size: var(--gal-fs-chico); margin-bottom: 0; }
/* Rojo y pelado, igual en los cuatro estados: no cambia nada al pasarle el mouse.
   Scopeado por lo mismo que .gal-volver. */
.gal-cotizador .gal-item__quitar,
.gal-cotizador .gal-item__quitar:hover,
.gal-cotizador .gal-item__quitar:focus,
.gal-cotizador .gal-item__quitar:active {
  padding: 0;
  background: none;
  border: 0;
  color: var(--gal-error);
  text-decoration: none;
  cursor: pointer;
  font-size: var(--gal-fs-chico);
}

/* El item que saca al envio del regimen courier. Se marca para que el usuario sepa
   CUAL cambiar: el aviso dice que hay un bulto de mas de 50 kg, pero con cuatro
   productos cargados no dice cual. Solo lo lleva el bulto pesado, que es el unico
   motivo de consulta atribuible a un item: el destino del interior y el tope FOB
   son del envio entero.

   La marca es SOLO la linea de texto, sin fondo ni borde: con el recuadro ambar
   el item se veia como otro aviso igual al de abajo, y a primera vista parecian
   dos mensajes en vez de un mensaje y el producto que lo causa. */
.gal-item__traba { color: var(--gal-aviso); font-size: var(--gal-fs-chico); margin: var(--gal-sp-1) 0 0; }

/* Los costos del item van indentados, para que se lean como parte de el y no
   como lineas sueltas del resumen. El guion es decorativo y por eso va en CSS:
   no tiene que viajar en el texto que se copia a WhatsApp o al mail. Solo lo
   llevan los costos directos del item, no el desglose de impuestos, que es un
   nivel mas abajo. */
.gal-item > .gal-linea,
.gal-item > .gal-detalle > summary { padding-left: var(--gal-sp-4); }
.gal-item > .gal-linea > span:first-child::before,
.gal-item > .gal-detalle > summary > span:first-child::before { content: "- "; }

/* El summary ES la linea de Impuestos: al desplegarla, el desglose cuelga de
   ella, un nivel mas adentro. */
.gal-detalle > summary { cursor: pointer; list-style: none; }
.gal-detalle > summary::-webkit-details-marker { display: none; }
.gal-detalle > summary:focus-visible { outline: 2px solid var(--gal-acento); outline-offset: 2px; }
.gal-detalle__ver { color: var(--gal-acento); font-size: var(--gal-fs-chico); }

.gal-detalle__cuerpo { padding-left: var(--gal-sp-6); }
.gal-detalle__cuerpo .gal-linea { font-size: var(--gal-fs-chico); color: var(--gal-texto-suave); }

.gal-vacio { color: var(--gal-texto-suave); font-style: italic; }
.gal-fx { font-size: var(--gal-fs-mini); color: var(--gal-texto-suave); text-align: right; }

.gal-aviso {
  background: var(--gal-aviso-fondo);
  border-left: 3px solid var(--gal-aviso);
  padding: var(--gal-sp-3);
  border-radius: var(--gal-radio-chico);
  font-size: var(--gal-fs-chico);
  margin: var(--gal-sp-4) 0;
}
.gal-disclaimer { font-size: var(--gal-fs-mini); color: var(--gal-texto-suave); margin-top: var(--gal-sp-4); }

.gal-acciones { display: flex; flex-wrap: wrap; gap: var(--gal-sp-3); margin-top: var(--gal-sp-4); }

/* Salida del paso 3.
   Es un link disfrazado de boton y NO cambia nada al pasarle el mouse ni al tomar
   foco: los cuatro estados declaran lo mismo. Va scopeado al cotizador por el kit
   de Elementor, que pinta todo `button` con fondo celeste y texto blanco; ver la
   nota larga en base.css. */
.gal-cotizador .gal-volver,
.gal-cotizador .gal-volver:hover,
.gal-cotizador .gal-volver:focus,
.gal-cotizador .gal-volver:active {
  display: inline-flex;
  align-items: center;
  gap: var(--gal-sp-2);
  margin-bottom: var(--gal-sp-4);
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--gal-fs-chico);
  color: var(--gal-acento);
  text-decoration: none;
  cursor: pointer;
}
/* El outline del foco por teclado si se mantiene: no es un cambio de color, es la
   unica señal de donde esta parado quien navega sin mouse. */
.gal-cotizador .gal-volver:focus-visible { outline: 2px solid var(--gal-acento); outline-offset: 2px; }

/* Formulario de lead */
.gal-lead h2:focus-visible { outline: 2px solid var(--gal-acento); outline-offset: 2px; }
.gal-lead #lead-estado { font-size: var(--gal-fs-chico); color: var(--gal-texto-suave); margin-top: var(--gal-sp-2); }

/* La alternativa va al lado del submit y se LEE como un link, para que quede clara
   cual es la opcion secundaria. Si no entra a lo ancho, cae abajo. */
.gal-lead__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gal-sp-4);
}

/* La usan DOS elementos: el control de WhatsApp del formulario, que es un <button>, y el
   link "Abrir WhatsApp" de la pantalla de exito, que si es un <a>. Los dos son la accion
   secundaria y tienen que verse igual; el segundo estuvo un rato pintado como
   gal-btn--primario y competia con "Hacer otra cotizacion".

   Se lee como link pero es un <button> desde la 2.6.0: dejo de abrir una URL y pasa a
   hacer un POST que registra la cotizacion antes de abrir wa.me, y un <a href> navegaria
   antes de que el handler termine.

   Ese cambio lo dejo expuesto al reset.css de Hello Elementor, que pinta TODO boton del
   sitio con `border: 1px solid #c36` y `color: #c36`, y le mete un fondo frambuesa en
   :hover y en :focus. Como esta regla solo declaraba tamaño y color, el control aparecia
   con un borde rojo en reposo y se llenaba de frambuesa al pasarle el mouse.

   Por eso van explicitos el borde, el fondo, el padding y el radio, y por eso :hover y
   :focus declaran fondo aunque repita el de reposo. Es el mismo motivo —y la misma
   trampa— que explica el comentario largo de base.css arriba de los .gal-btn. Si se
   sacan estas lineas, el borde rojo vuelve y parece un bug nuestro. */
.gal-cotizador .gal-lead__alternativa {
  font-size: var(--gal-fs-chico);
  color: var(--gal-acento);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.gal-cotizador .gal-lead__alternativa:hover,
.gal-cotizador .gal-lead__alternativa:focus {
  background: transparent;
  color: var(--gal-acento-oscuro);
}
/* Se deshabilita junto con el de mail mientras viaja el POST: sin esto no se nota. */
.gal-cotizador .gal-lead__alternativa:disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------------
   Cromo de la DEMO. Nada de esta seccion pasa al plugin de WordPress:
   alli la navegacion la pone el tema y las notas de validacion no van.
   ------------------------------------------------------------------ */

.gal-nav {
  background: var(--gal-fondo-alt);
  border-bottom: 1px solid var(--gal-borde);
}
/* Tres columnas: logo, cotizadores, etiqueta. Las de los costados miden igual
   (1fr), asi que la del medio queda centrada de verdad aunque el logo y la
   etiqueta tengan anchos distintos. */
.gal-nav__interior {
  max-width: var(--gal-ancho-max);
  margin: 0 auto;
  padding: var(--gal-sp-3) var(--gal-sp-4);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gal-sp-2);
}
.gal-nav__links {
  display: flex;
  justify-content: center;
  gap: var(--gal-sp-2);
}
.gal-nav__marca {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.gal-nav__marca img {
  height: 26px;
  width: auto;
  display: block;
}
.gal-nav a:not(.gal-nav__marca) {
  color: var(--gal-texto-suave);
  text-decoration: none;
  padding: var(--gal-sp-2) var(--gal-sp-3);
  border-radius: var(--gal-radio-chico);
  font-size: var(--gal-fs-chico);
}
.gal-nav a:not(.gal-nav__marca):hover { color: var(--gal-texto); background: rgba(10, 22, 40, .06); }
.gal-nav a[aria-current="page"] { color: #fff; background: var(--gal-acento); }
.gal-nav__etiqueta {
  justify-self: end;
  color: var(--gal-texto-suave);
  font-size: var(--gal-fs-mini);
}

/* Bloques de validacion (notas y referencia de calculo) */
.gal-validacion { margin-top: var(--gal-sp-6); }
.gal-validacion > summary {
  cursor: pointer;
  font-weight: var(--gal-fw-bold);
  padding: var(--gal-sp-3) var(--gal-sp-4);
  background: var(--gal-fondo-alt);
  border: 1px solid var(--gal-borde);
  border-radius: var(--gal-radio);
  list-style-position: inside;
}
.gal-validacion[open] > summary { border-radius: var(--gal-radio) var(--gal-radio) 0 0; }
.gal-validacion__cuerpo {
  border: 1px solid var(--gal-borde);
  border-top: 0;
  border-radius: 0 0 var(--gal-radio) var(--gal-radio);
  padding: var(--gal-sp-5);
}

.gal-notas { display: grid; grid-template-columns: 1fr; gap: var(--gal-sp-5); }
@media (min-width: 900px) { .gal-notas { grid-template-columns: 1fr 1fr; } }
.gal-notas h3 { display: flex; align-items: center; gap: var(--gal-sp-2); }
.gal-notas ol { margin: 0; padding-left: 1.2rem; }
.gal-notas li { margin-bottom: var(--gal-sp-3); font-size: var(--gal-fs-chico); }
.gal-notas li strong { display: block; }
.gal-notas li span { color: var(--gal-texto-suave); }

.gal-chip {
  font-size: var(--gal-fs-mini);
  font-weight: var(--gal-fw-normal);
  padding: 2px 8px;
  border-radius: 999px;
}
.gal-chip--duda { background: var(--gal-aviso-fondo); color: var(--gal-aviso); }
.gal-chip--decision { background: var(--gal-acento-suave); color: var(--gal-acento-oscuro); }

/* Referencia de calculo */
.gal-formula {
  background: var(--gal-oscuro);
  color: #e6edf3;
  padding: var(--gal-sp-4);
  border-radius: var(--gal-radio-chico);
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: var(--gal-fs-chico);
  line-height: 1.7;
  white-space: pre;
  margin: 0 0 var(--gal-sp-4);
}
.gal-formula b { color: var(--gal-acento); font-weight: var(--gal-fw-normal); }
.gal-formula i { color: #8b98a5; font-style: normal; }

/* Las tablas anchas scrollean dentro de su caja, nunca arrastran la pagina. */
.gal-scroll-x { overflow-x: auto; margin-bottom: var(--gal-sp-4); }
.gal-scroll-x .gal-tabla-ref { margin-bottom: 0; }

.gal-tabla-ref { width: 100%; border-collapse: collapse; margin-bottom: var(--gal-sp-4); font-size: var(--gal-fs-chico); }
.gal-tabla-ref td, .gal-tabla-ref th { white-space: nowrap; }
.gal-tabla-ref td:first-child, .gal-tabla-ref th:first-child { white-space: normal; }
.gal-tabla-ref th, .gal-tabla-ref td { padding: .4rem .6rem; border-bottom: 1px solid var(--gal-borde); text-align: left; }
.gal-tabla-ref th { color: var(--gal-texto-suave); font-weight: var(--gal-fw-normal); }
.gal-tabla-ref td.num, .gal-tabla-ref th.num { text-align: right; font-variant-numeric: tabular-nums; }
.gal-tabla-ref caption { text-align: left; font-weight: var(--gal-fw-bold); padding-bottom: var(--gal-sp-2); }

/* Pestanas del panel de configuracion */
.gal-tabs { display: flex; flex-wrap: wrap; gap: var(--gal-sp-1); border-bottom: 1px solid var(--gal-borde); margin-bottom: var(--gal-sp-5); }
.gal-tabs button {
  font: inherit;
  font-weight: var(--gal-fw-bold);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--gal-sp-3) var(--gal-sp-4);
  color: var(--gal-texto-suave);
  cursor: pointer;
  min-height: 44px;
}
.gal-tabs button:hover { color: var(--gal-texto); }
.gal-tabs button[aria-selected="true"] { color: var(--gal-acento); border-bottom-color: var(--gal-acento); }
.gal-tabs button:focus-visible { outline: 2px solid var(--gal-acento); outline-offset: -2px; }

/* Mobile */
@media (max-width: 599px) {
  .gal-acciones { flex-direction: column; }
  .gal-acciones .gal-btn { width: 100%; }
  .gal-contenedor { padding: var(--gal-sp-5) var(--gal-sp-3); }
  .gal-panel { padding: var(--gal-sp-4); }
  h1 { font-size: 1.5rem; }

  /* En una columna los titulos y el total ocupan demasiado: 1.5rem de titulo y
     1.75rem de total, pensados para dos columnas anchas, en un telefono empujan
     todo el resumen fuera de la primera pantalla.
     Van scopeados como el resto de la tipografia del componente: una regla de
     elemento pelado pierde contra el kit de Elementor. Ver la nota en base.css. */
  .gal-cotizador h2 { font-size: 1.2rem; }
  .gal-cotizador .gal-linea--total { font-size: 1.5rem; }
  .gal-nav__etiqueta { display: none; }
  /* El logo se queda con su propia fila: si comparte linea con los links,
     estos se parten de forma despareja. */
  .gal-nav__interior { grid-template-columns: 1fr; }
  .gal-nav__marca { margin: 0 0 var(--gal-sp-2); }
  .gal-nav a:not(.gal-nav__marca) { padding: var(--gal-sp-2); }
  .gal-validacion__cuerpo { padding: var(--gal-sp-4); }
  .gal-tabs button { padding: var(--gal-sp-3) var(--gal-sp-3); font-size: var(--gal-fs-chico); }
}

/* Ninguna tabla ni bloque ancho puede hacer scrollear el body. */
body { overflow-x: hidden; }

/* --- Campo trampa del antispam --- */
/* No se usa display:none ni type=hidden: los bots mas simples los detectan y saltean
   el campo, que es justamente lo que no queremos. Asi queda fuera de la pantalla,
   invisible para el usuario y para el lector de pantalla (aria-hidden en el markup),
   pero presente en el DOM como un input de texto comun. */
.gal-trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Nota de privacidad del formulario --- */
.gal-nota-privacidad {
  margin-top: var(--gal-esp-3, 12px);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--gal-texto-suave, #666);
}