/*
  Tokens tomados de panel_omega/static/style.css para que la web y el panel
  se vean de la misma familia. Todo color nuevo se declara aquí, nunca
  escrito a mano dentro de una regla.
*/
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #e2e5ea;
  --text: #1f2430;
  --text-muted: #6b7280;
  --primary: #2f5fe0;
  --primary-dark: #2347b0;
  --oscuro: #040e3e;          /* azul profundo: cabecera y pie, igual que la portada */
  --oscuro-texto: #ffffff;
  --pie-nota: #c3cdf5;
  --whatsapp: #25d366;
  --texto-sobre-primary: #ffffff;
  --sombra-flotante: 0 6px 20px rgba(0, 0, 0, .25);
  --radius: 10px;
  --ancho: 1100px;
  --borde-boton: #b9c8ff;
  --portada-texto: #dde5ff;
  --texto-sobre-wa: #05331a;
  --cian: #5ce1ff;                       /* acento del menu */
  --naranja: #f97316;                    /* boton de la tienda */
  --naranja-vivo: #ff8b33;
  --texto-sobre-naranja: #2b1503;        /* casi negro calido: 6:1 sobre el naranja */
  --aro-tienda: #ffffff;                 /* marca la pagina actual sobre el naranja */
  --menu-enlace: rgba(255, 255, 255, .78);
  --text-muted-fuerte: #5b6472;
  --velo-solido: #040e3e;                /* tapa el titulo impreso en la foto */
  --velo-medio: rgba(4, 14, 62, .70);
  --velo-suave: rgba(4, 14, 62, .18);
  --accent-halo: rgba(47, 95, 224, .18);
  --punto-apagado: rgba(255, 255, 255, .42);   /* puntos del carrusel de portada */
  /* Tarjetas de la portada. El fondo NO reutiliza --oscuro (cabecera y pie) a
     proposito: identico al de la cabecera, la tarjeta dejaria de leerse como
     un objeto puesto sobre el gris. */
  --tarjeta-fondo: #0a1746;
  --tarjeta-borde: #1b2f78;
  --tarjeta-texto: #9fb0e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

.seccion { padding: 56px 0; }

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.marca__nombre { font-size: 18px; font-weight: 700; color: var(--oscuro-texto); }

.cabecera { background: var(--oscuro); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.menu-boton { background: none; border: 0; color: var(--oscuro-texto); font-size: 24px; cursor: pointer; min-width: 44px; min-height: 44px; padding: 0; }
/* En celular la lista va centrada; `align-items: center` ademas hace que
   cada enlace ocupe solo su texto en vez de estirarse de borde a borde. */
.menu { display: none; width: 100%; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 12px; }
.menu.abierto { display: flex; }
/*
  Menu en versalitas espaciadas con acento cian, del mismo idioma visual que el
  circuito del logo. La linea superior encendida solo tiene sentido en la fila
  de escritorio: en la lista vertical del celular basta el cambio de color.
*/
.menu a {
  position: relative;
  color: var(--menu-enlace); text-decoration: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 12px 0; transition: color .18s ease;
}
.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current="page"] { color: var(--cian); }

/*
  La tienda es la unica accion del menu, no un enlace mas: va como boton para
  que se distinga de las cuatro secciones informativas. Cuando ademas es la
  pagina actual se marca con un aro, no cambiando el color del texto, que
  sobre el naranja del boton se leeria mal. El aro va blanco y no cian: el
  cian junto al naranja vibra.
*/
/*
  Va como `.menu a.menu__tienda` y no como `.menu__tienda` a secas: la regla
  `.menu a` de arriba es mas especifica, asi que le ganaba el `padding: 12px 0`
  y el color del enlace. Con el boton estirado no se veia; en cuanto ocupa lo
  que su texto, el texto quedaba pegado a los bordes.
*/
.menu a.menu__tienda {
  background: var(--naranja); color: var(--texto-sobre-naranja);
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 8px; padding: 10px 16px;
  transition: background .18s ease;
  /*
    En celular el menu es una columna, y sin esto el boton se estiraba de
    borde a borde: dejaba de leerse como boton y quedaba una franja azul
    enorme. Que ocupe lo que ocupa su texto, centrado como el resto de la
    lista. En escritorio se devuelve a `auto` (ver la media query) para que
    siga igualando el alto de la fila.
  */
  align-self: center;
}
.menu a.menu__tienda:hover,
.menu a.menu__tienda:focus-visible,
.menu a.menu__tienda[aria-current="page"] { color: var(--texto-sobre-naranja); }
.menu a.menu__tienda:hover { background: var(--naranja-vivo); }
.menu a.menu__tienda[aria-current="page"] { box-shadow: 0 0 0 2px var(--aro-tienda); }
/* El carrito hereda el color del texto del boton, asi que no hay un segundo
   color que mantener en sincronia. `flex-shrink: 0` para que no se aplaste
   cuando el menu se aprieta. */
.menu__tienda-icono { flex-shrink: 0; }
/*
  El globo lo crea carrito-contador.js y solo existe cuando hay algo en el
  carrito, asi que aqui no hace falta ningun `hidden` que esconder. Va azul
  profundo sobre el naranja: es el contraste mas fuerte que da la paleta sin
  meter un color nuevo.
*/
.menu__tienda-cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px;
  background: var(--oscuro); color: var(--oscuro-texto);
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/*
  La portada es un carrusel de tres fotos apiladas. Antes la foto vivia en el
  `background-image` de .portada, junto al velo; con tres hay que poder
  fundirlas una sobre otra, asi que cada foto es su propia capa y el velo pasa
  a una capa aparte ENCIMA de todas. Eso es lo importante: el velo es lo unico
  que garantiza que el texto blanco se lea, y ahora tiene que valer igual para
  las tres, sean claras u oscuras.

  La franja izquierda del velo va SOLIDA a proposito: la primera foto trae su
  propio titulo impreso en esa zona y un velo translucido no lo tapa (las
  letras son azul oscuro, del mismo tono que el velo). De ahi a la derecha se
  abre y deja ver la foto.

  El recorte de celular ya no se elige aqui sino con <picture media> en el
  HTML: asi el telefono descarga solo su version y nunca la ancha.
*/
.portada {
  position: relative;
  color: var(--oscuro-texto);
  padding: 56px 0 88px;
  background: var(--oscuro);   /* se ve mientras carga la primera foto */
  overflow: hidden;
}
.portada__fotos { position: absolute; inset: 0; }
.portada__foto {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .5s ease;
}
/* Esta clase la mueve portada.js; el nombre vive en los dos archivos. */
.portada__foto.visible { opacity: 1; }
.portada__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/*
  La franja de la portada es mucho mas ancha que alta, asi que `cover` recorta
  por arriba y por abajo. Centrada, esta foto se queda en el rotulo del fondo
  (que ademas queda cortado a la mitad); bajando el encuadre entra la mesa de
  trabajo, que es lo que hay que ver.
*/
.portada__foto--banco img { object-position: center 72%; }
.portada__velo {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(96deg, var(--velo-solido) 0%, var(--velo-solido) 44%, var(--velo-medio) 62%, var(--velo-suave) 100%);
}
.portada__cuerpo { position: relative; }

.portada__puntos { display: flex; gap: 10px; margin-top: 28px; }
.portada__punto {
  position: relative;
  width: 34px; height: 4px; padding: 0;
  border: 0; border-radius: 2px;
  background: var(--punto-apagado);
  cursor: pointer;
  transition: background .25s ease;
}
/*
  El area tactil real mide 44px de alto aunque la rayita mida 4: en un celular
  nadie acierta a una linea de cuatro pixeles.
*/
.portada__punto::before {
  content: ""; position: absolute;
  left: 0; top: -20px; width: 34px; height: 44px;
}
.portada__punto[aria-current="true"] { background: var(--cian); }
.portada__punto:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }

@media (max-width: 719px) {
  /* En celular el velo cae desde arriba, no desde la izquierda: la pantalla es
     angosta y una franja lateral se comeria la foto entera. */
  .portada__velo {
    background-image:
      linear-gradient(180deg, var(--velo-solido) 0%, var(--velo-solido) 30%, var(--velo-medio) 62%, var(--velo-suave) 100%);
  }
}

.portada h1 { font-size: 30px; max-width: 18ch; }
.portada__texto { color: var(--portada-texto); max-width: 55ch; }
.portada__acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; min-height: 48px;
}
.btn--wa { background: var(--whatsapp); color: var(--texto-sobre-wa); }
.btn--linea { background: transparent; color: var(--oscuro-texto); border: 1px solid var(--borde-boton); }

/*
  Franja de productos en la portada. La seccion nace con `hidden` y el
  JavaScript la revela solo si hay algo que mostrar, asi que aqui NO puede
  declararse `display` sobre `.destacados`: una regla de autor le gana al
  atributo y quedaria visible siempre, vacia.
*/
/*
  En celular van dos columnas, no un carrusel. La franja se deslizaba con el
  dedo y dejaba la segunda tarjeta cortada a proposito, pero eso no se lee
  como "hay mas al lado": se lee como que la pagina se rompio.
*/
.destacados__cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.destacados__fila {
  display: grid; gap: 16px; margin-top: 24px;
  grid-template-columns: repeat(2, 1fr);
}
.destacado {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  text-decoration: none; color: var(--text);
  transition: border-color .18s ease, opacity .25s ease;
}
/*
  Las tarjetas de esta franja llevan foto de producto y se quedan claras: sobre
  el fondo oscuro las fotos, que vienen con fondos distintos entre si, se leian
  como recortes pegados. Decision del dueno viendolo con productos reales.
*/
.destacado:hover { border-color: var(--primary); }
/* Estado de fundida: la tarjeta que sale y la que entra pasan por aqui.
   El valor .25s debe coincidir con FUNDIDA en destacados.js. */
.destacado--fundido { opacity: 0; }
.destacado__foto {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--radius); background: var(--bg);
}
.destacado__nombre { font-weight: 600; line-height: 1.3; }
.destacado__precio { font-weight: 700; color: var(--primary-dark); }
/*
  El boton vive arriba, junto al titulo. Antes cerraba la seccion y quedaba
  solo abajo a la izquierda, con todo el ancho vacio a su derecha: ese hueco
  era lo que hacia sentir enorme el aire hasta "Que reparamos". Ahora la
  seccion termina en la fila de tarjetas, un borde parejo de lado a lado, y
  respira igual que las demas.
*/
/*
  Mismo naranja que el boton del menu: los dos llevan a la tienda y no tiene
  sentido que hablen colores distintos. Va como `.btn.destacados__ver` porque
  `.btn--primario` esta mas abajo en el archivo y con la misma especificidad
  le ganaria por orden.
*/
.btn.destacados__ver {
  flex-shrink: 0;
  background: var(--naranja); color: var(--texto-sobre-naranja);
}
/*
  La franja termina en una reja de tarjetas muy densa, y contra esa densidad
  los 88px de aire de `.seccion` mas los 88px de la siguiente se leen como un
  hueco. Se recorta solo este lado; el resto de la pagina no cambia. Va con
  `.seccion.destacados` porque con `.destacados` a secas el `.seccion` de la
  media query de escritorio le ganaria por orden de archivo, justo donde se
  nota. Y como en toda esta franja, aqui tampoco se declara `display`.
*/
.seccion.destacados { padding-bottom: 24px; }

.seccion__intro { color: var(--text-muted-fuerte); margin-top: -8px; max-width: 60ch; }

.tarjetas { display: grid; gap: 16px; margin-top: 28px; }
/*
  La tarjeta es una placa: fondo azul profundo, esquinas rectas y una via cian
  en cada esquina. Todo lo que va encima cambia de color por obligacion, no por
  gusto: el titulo iba en --primary-dark, que sobre este fondo da 2.1:1 y
  practicamente no se ve. Hay una prueba que calcula esos contrastes.
*/
.tarjeta {
  background-color: var(--tarjeta-fondo);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 0;
  padding: 20px;
  /* Las cuatro vias van en el fondo de la tarjeta, no en pseudo-elementos
     colgados del contenido: asi siguen ahi aunque cambie lo que lleva dentro. */
  background-image:
    radial-gradient(circle 2.5px at 9px 9px, var(--cian) 98%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 9px) 9px, var(--cian) 98%, transparent 100%),
    radial-gradient(circle 2.5px at 9px calc(100% - 9px), var(--cian) 98%, transparent 100%),
    radial-gradient(circle 2.5px at calc(100% - 9px) calc(100% - 9px), var(--cian) 98%, transparent 100%);
}
.tarjeta h3 { font-size: 18px; color: var(--cian); }
.tarjeta p { margin: 0; color: var(--tarjeta-texto); }

.seccion--clara { background: var(--surface); }

.pasos { list-style: none; display: grid; gap: 20px; padding: 0; margin: 28px 0 0; }
.paso { position: relative; padding-left: 52px; }
.paso__numero {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary); color: var(--texto-sobre-primary); font-weight: 700;
}
.paso h3 { font-size: 18px; }
.paso p { margin: 0; color: var(--text-muted); }

.domicilio {
  margin-top: 32px; padding: 20px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px;
}

.contacto { display: grid; gap: 24px; margin-top: 24px; }
.contacto__dato { margin: 0 0 18px; }
.contacto__dato a { color: var(--primary); }
.horarios { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); }
.mapa { width: 100%; min-width: 0; min-height: 280px; border: 0; border-radius: var(--radius); }

.pie { background: var(--oscuro); color: var(--oscuro-texto); padding: 40px 0; }
.pie a { color: var(--oscuro-texto); }
.pie__nota { color: var(--pie-nota); font-size: 14px; }
.redes { display: flex; gap: 20px; margin: 4px 0 12px; }
.redes a { font-weight: 600; }

.consulta { display: grid; gap: 16px; margin-top: 28px; max-width: 420px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 600; }
.campo input {
  padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
}
.campo input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.btn--primario { background: var(--primary); color: var(--texto-sobre-primary); border: 0; cursor: pointer; }

.consulta__aviso {
  margin-top: 20px; padding: 14px 16px; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0;
}

.resultado {
  margin-top: 28px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.resultado__ticket { color: var(--text-muted); margin-top: -6px; }
.linea { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 10px; }
.linea__paso {
  position: relative; padding-left: 30px; color: var(--text-muted);
}
.linea__paso::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
}
.linea__paso--hecho::before { background: var(--primary); border-color: var(--primary); }
.linea__paso--activo {
  color: var(--text); font-weight: 700;
}
.linea__paso--activo::before {
  background: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--accent-halo);
}
.resultado__plata { font-weight: 600; }
#resultado-equipo:focus { outline: none; }
#resultado-equipo:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.productos { display: grid; gap: 20px; margin-top: 28px; }
.producto {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.producto__foto {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--radius); background: var(--bg);
}
.producto__nombre { font-size: 18px; margin: 0; color: var(--primary-dark); }
.producto__texto { margin: 0; color: var(--text-muted); }
.producto__precio { margin: 0; font-size: 20px; font-weight: 700; }

/*
  El carrito se muestra alternando el atributo hidden, asi que NO puede
  declararse display aqui: una regla de autor le gana a [hidden] y quedaria
  visible siempre. Es el mismo error que ya se cometio dos veces en este
  proyecto.
*/
.carrito {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sombra-flotante);
  overflow: hidden;
}
.carrito__resumen {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px; min-height: 52px; cursor: pointer;
  background: var(--primary); color: var(--texto-sobre-primary);
  border: 0; font: inherit; font-weight: 700;
}
.carrito__detalle { padding: 16px; }
.carrito__lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.carrito__linea { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; }
.carrito__ajuste {
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: inherit; font-size: 18px; line-height: 1;
}
.carrito__domicilio {
  margin: 0 0 14px; padding: 12px;
  background: var(--bg); border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-muted); font-size: 14px;
}

@media (min-width: 720px) {
  .seccion { padding: 64px 0; }
  .menu-boton { display: none; }
  .menu { display: flex; flex-direction: row; align-items: stretch; width: auto; gap: 6px; padding: 0; }
  .menu a { padding: 14px; }
  .menu a::before {
    content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px;
    background: var(--cian); box-shadow: 0 0 10px var(--cian);
    opacity: 0; transition: opacity .18s ease;
  }
  .menu a:hover::before,
  .menu a:focus-visible::before,
  .menu a[aria-current="page"]::before { opacity: 1; }
  .menu a.menu__tienda { margin-left: 8px; padding: 10px 16px; align-self: auto; }
  .menu a.menu__tienda::before { content: none; }
  .cabecera__fila { flex-wrap: nowrap; }
  .portada h1 { font-size: 44px; }
  .portada__acciones { flex-direction: row; }
  .destacados__cabeza { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .destacados__fila { grid-template-columns: repeat(4, 1fr); }
  .tarjetas { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .domicilio { flex-direction: row; align-items: center; justify-content: space-between; }
  .contacto { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .productos { grid-template-columns: repeat(3, 1fr); }
  .carrito { left: auto; right: 24px; width: 380px; }
}

/*
  Onda de luz en los titulos de seccion: un destello cian los recorre una vez,
  cuando la seccion entra en pantalla. Mismo gesto que la animacion del logo,
  y por eso no entra ningun color nuevo: --cian ya existe.

  Todo va dentro del @supports a proposito. Para que el degradado se vea a
  traves de las letras hace falta `color: transparent`, y en un navegador que
  no recorte el fondo a la forma del texto esa sola declaracion dejaria el
  titulo en blanco sobre el fondo, sin dar ningun error. Fuera de la guarda el
  titulo se ve como siempre. Es la misma leccion del modal y de .combo-list:
  aqui la cascada puede esconder contenido, no solo descuadrarlo.
*/
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .seccion h2 {
    /* Sin esto la caja del titulo ocupa todo el ancho de la columna y el
       destello se pasa la mayor parte del recorrido a la derecha de las
       letras, donde no hay nada que iluminar. */
    width: fit-content;
    background-image: linear-gradient(
      100deg,
      var(--text) 0 42%,
      var(--cian) 50%,
      var(--text) 58% 100%
    );
    background-size: 260% 100%;
    /* En reposo se ve el tramo del color de siempre: el destello esta fuera
       de las letras hasta que la animacion lo trae. */
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .seccion.onda-corre h2 { animation: onda-de-luz 1.5s ease-in-out; }
  /*
    El titulo del resultado de una consulta cae dentro de `<main class="seccion">`
    y por descendencia heredaria el degradado. No es un titulo de seccion: aparece
    despues de buscar, cuando el destello ya paso. Se le devuelve el color plano.
  */
  .resultado h2 {
    width: auto;
    background-image: none;
    color: var(--text);
  }
}

@keyframes onda-de-luz {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .seccion.onda-corre h2 { animation: none; }
  .portada__foto { transition: none; }
}