/**
 * assets/css/landing.css
 *
 * Estilos base de la marca y de la landing (index.php). También los reutilizan las páginas
 * públicas (producto.php y las de compra), que cargan además producto.css o tienda.css.
 * Incluye: variables de marca, reinicio, botones, cabecera, hero, buscador, categorías,
 * productos destacados, pasos, envíos, pagos, preguntas frecuentes, llamada a la acción y pie.
 * Diseño "mobile first": lo base es para celular y los @media (min-width) amplían para escritorio.
 */

/* ---------- Variables de marca (colores, radio, sombra y tipografías) ---------- */
:root{
  /* Colores: naranja = acción principal, amarillo = acentos, grafito = texto/fondos oscuros, acero = texto secundario, hueso = fondos suaves */
  --naranja:#FF6A00;--naranja-osc:#e65f00;--amarillo:#FFC400;--grafito:#14181D;--acero:#5B6670;--hueso:#F5F3EF;--blanco:#fff;
  /* Radio de esquinas y sombra estándar de las tarjetas */
  --radio:16px;--sombra:0 10px 30px rgba(20,24,29,.12);
  /* Tipografías: Montserrat para títulos, Inter para texto (con alternativas del sistema si no cargan) */
  --f-titulo:Montserrat,'Arial Black',system-ui,sans-serif;--f-texto:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Reinicio y base ---------- */
/* El tamaño incluye bordes y relleno (cálculo de anchos más simple) */
*{box-sizing:border-box}
/* Desplazamiento suave y margen superior para que la cabecera fija no tape los títulos al saltar a un ancla */
html{scroll-behavior:smooth;scroll-padding-top:80px}
/* Cuerpo: sin margen, tipografía y colores de marca, interlineado cómodo y sin zoom automático del texto en móviles */
body{margin:0;font-family:var(--f-texto);color:var(--grafito);background:var(--blanco);line-height:1.6;-webkit-text-size-adjust:100%}
/* Imágenes y SVG nunca desbordan su contenedor y no dejan huecos debajo */
img,svg{max-width:100%;display:block}
/* Títulos con la tipografía de marca y sin márgenes automáticos */
h1,h2,h3{font-family:var(--f-titulo);line-height:1.15;margin:0}
/* Tamaño de h2 y h3 (el h2 se adapta al ancho con clamp) */
h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin-bottom:28px}
h3{font-size:1.1rem;font-weight:800}
/* Párrafos sin margen por defecto (el espaciado se define por componente) */
p{margin:0}
/* Los enlaces heredan el color del texto que los rodea */
a{color:inherit}
/* Anillo de foco amarillo visible para quien navega con teclado (accesibilidad) */
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
/* "Solo lectores de pantalla": oculta visualmente pero se conserva para tecnologías de asistencia */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Enlace "Saltar al contenido": fuera de pantalla hasta que recibe el foco del teclado */
.saltar{position:absolute;left:-999px;top:8px;background:var(--amarillo);color:var(--grafito);padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.saltar:focus{left:8px}
/* Contenedor centrado de ancho máximo 1160 px con márgenes laterales de 16 px */
.contenedor{width:100%;max-width:1160px;margin:0 auto;padding:0 16px}
/* Variante más angosta (para textos largos como las preguntas frecuentes) */
.contenedor--angosto{max-width:780px}

/* ---------- Botones y etiquetas ---------- */
/* Botón principal: píldora naranja, mínimo 44 px de alto (tamaño táctil recomendado) */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:999px;background:var(--naranja);color:#fff;font-weight:600;text-decoration:none;border:2px solid var(--naranja);transition:background .2s,transform .2s;cursor:pointer}
/* Al pasar el cursor, el naranja se oscurece */
.boton:hover{background:var(--naranja-osc);border-color:var(--naranja-osc)}
/* Botón con solo borde (sobre fondos oscuros) */
.boton--borde{background:transparent;border-color:rgba(255,255,255,.5)}
.boton--borde:hover{background:rgba(255,255,255,.1);border-color:#fff}
/* Botón grande oscuro (llamada a la acción final) */
.boton--grande{min-height:56px;padding:14px 34px;font-size:1.1rem;background:var(--grafito);border-color:var(--grafito)}
.boton--grande:hover{background:#000;border-color:#000}
/* Etiqueta pequeña en mayúsculas sobre los títulos (amarilla por defecto, naranja en secciones claras) */
.etiqueta{display:inline-block;font-family:var(--f-titulo);font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:var(--amarillo);margin-bottom:14px}
.etiqueta--naranja{color:var(--naranja)}

/* ---------- Cabecera ---------- */
/* Barra superior fija con fondo oscuro translúcido y desenfoque */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(20,24,29,.94);backdrop-filter:blur(8px)}
/* Fila interna: logo, menú y botones alineados horizontalmente */
.cabecera__fila{display:flex;align-items:center;gap:20px;min-height:68px}
.cabecera__logo{display:block;flex:0 0 auto}
.cabecera__logo img{height:44px;width:auto}
/* Menú de secciones: oculto en celular y visible desde 900 px (regla @media más abajo) */
.cabecera__nav{display:none;margin-left:auto;gap:22px}
.cabecera__nav a{color:#d9dde1;text-decoration:none;font-weight:600;font-size:.95rem}
.cabecera__nav a:hover{color:var(--amarillo)}
/* En celular el botón de ingreso se empuja a la derecha */
.cabecera .boton{margin-left:auto}
/* En escritorio: se muestra el menú (que ya empuja a la derecha) y el botón vuelve a su sitio */
@media (min-width:900px){.cabecera__nav{display:flex}.cabecera .boton{margin-left:0}}

/* ---------- Hero (primera pantalla) ---------- */
/* Fondo grafito con un resplandor naranja en la esquina superior derecha */
.hero{background:radial-gradient(1200px 500px at 85% 10%,rgba(255,106,0,.28),transparent 60%),var(--grafito);color:#fff;padding:48px 0 72px;overflow:hidden}
/* Una columna en celular; dos columnas (texto + ilustración) desde 900 px */
.hero__grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:1.15fr .85fr}}
/* Titular grande que se adapta al ancho; la palabra destacada va en amarillo */
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);font-weight:900;letter-spacing:-.02em}
.hero h1 span{color:var(--amarillo)}
/* Subtítulo (frase aleatoria) */
.hero__sub{margin:14px 0 26px;font-size:clamp(1.05rem,2.4vw,1.3rem);color:#d9dde1}
/* Fila de atajos de búsqueda (chips) */
.hero__chips{margin-top:14px;color:#aab2ba;font-size:.9rem;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{min-height:36px;padding:4px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:inherit;cursor:pointer}
.chip:hover{border-color:var(--amarillo);color:var(--amarillo)}
/* Lista de ventajas con íconos de verificación amarillos */
.hero__datos{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:8px;color:#d9dde1}
.hero__datos li{display:flex;gap:10px;align-items:center}
.hero__datos svg{width:20px;height:20px;color:var(--amarillo);flex:0 0 auto}

/* ---------- Buscador en vivo ---------- */
/* Caja blanca redondeada con sombra; es el contenedor de la lupa, el campo y la lista */
.buscador{position:relative;background:#fff;border-radius:999px;box-shadow:var(--sombra);display:flex;align-items:center}
/* Lupa dentro del campo (no captura clics) */
.buscador__icono{position:absolute;left:18px;width:24px;height:24px;color:var(--acero);pointer-events:none}
/* Campo de texto transparente con espacio a la izquierda para la lupa */
.buscador input{width:100%;min-height:58px;border:0;border-radius:999px;padding:0 20px 0 52px;font:inherit;font-size:1.05rem;color:var(--grafito);background:transparent}
.buscador input:focus{outline:3px solid var(--amarillo)}
/* Lista desplegable de resultados, anclada justo debajo del campo, con scroll si es larga */
.buscador__lista{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;color:var(--grafito);border-radius:var(--radio);box-shadow:0 20px 50px rgba(0,0,0,.35);max-height:min(60vh,440px);overflow:auto;z-index:20;padding:6px}
/* El atributo hidden debe ocultarla aunque tenga otras reglas de display */
.buscador__lista[hidden]{display:none}
/* Cada resultado: foto, datos y precio en una fila; se resalta al pasar el cursor o con el teclado */
.res{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;min-height:64px}
.res:hover,.res[aria-selected=true]{background:var(--hueso)}
/* Miniatura del resultado (o ícono si no hay foto) */
.res__foto{flex:0 0 52px;height:52px;border-radius:10px;background:var(--hueso);display:grid;place-items:center;color:var(--naranja);overflow:hidden}
.res__foto img{width:100%;height:100%;object-fit:cover}
.res__foto svg{width:28px;height:28px}
/* Nombre en una sola línea (con puntos suspensivos) y SKU/stock debajo */
.res__info{flex:1;min-width:0}
.res__info strong{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res__info small{color:var(--acero)}
/* Precio en USD (naranja) y equivalente en Bs debajo */
.res__precio{text-align:right;font-family:var(--f-titulo);font-weight:800;color:var(--naranja);white-space:nowrap}
.res__precio small{display:block;font-family:var(--f-texto);font-weight:400;color:var(--acero)}
/* Mensaje cuando no hay resultados */
.res__vacio{padding:18px;text-align:center;color:var(--acero)}
/* Etiquetas de disponibilidad: verde = hay, rojo = agotado */
.stock{font-size:.8rem;font-weight:600}
.stock--si{color:#188038}.stock--no{color:#b3261e}

/* ---------- Ilustración del hero (engranaje con íconos orbitando) ---------- */
/* Oculta en celular; en escritorio es un cuadrado de hasta 440 px */
.hero__visual{position:relative;display:none;aspect-ratio:1;max-width:440px;margin-inline:auto;width:100%}
@media (min-width:900px){.hero__visual{display:block}}
/* Logo-engranaje central que gira lentamente (40 s por vuelta) con un resplandor naranja */
.hero__engranaje{position:absolute;inset:12%;width:76%;height:76%;animation:girar 40s linear infinite;filter:drop-shadow(0 20px 40px rgba(255,106,0,.35))}
/* Círculos blancos con íconos de categorías alrededor del engranaje */
.orbita{position:absolute;width:76px;height:76px;border-radius:50%;background:#fff;color:var(--grafito);display:grid;place-items:center;box-shadow:var(--sombra)}
.orbita svg{width:40px;height:40px}
/* Posición de cada círculo: arriba, derecha, abajo e izquierda */
.o1{top:2%;left:42%}.o2{top:42%;right:0}.o3{bottom:2%;left:42%}.o4{top:42%;left:0}
/* Etiquetas flotantes ("En stock", "Precio de ganga") */
.etiqueta-flotante{position:absolute;padding:6px 14px;border-radius:999px;font-weight:700;font-size:.85rem;box-shadow:var(--sombra)}
.e1{top:18%;right:6%;background:#188038;color:#fff}
.e2{bottom:16%;left:4%;background:var(--amarillo);color:var(--grafito)}
/* Animación de giro completo del engranaje */
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- Cinta amarilla de ventajas ---------- */
.cinta{background:var(--amarillo);color:var(--grafito)}
/* 2 columnas en celular, 4 desde 900 px */
.cinta__fila{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-block:20px}
@media (min-width:900px){.cinta__fila{grid-template-columns:repeat(4,1fr)}}
.cinta strong{display:block;font-family:var(--f-titulo);font-weight:800;line-height:1.2}
.cinta span{font-size:.9rem}

/* ---------- Secciones genéricas ---------- */
/* Espaciado vertical de cada sección y variantes de fondo (gris suave / oscuro) */
.seccion{padding:72px 0}
.seccion--gris{background:var(--hueso)}
.seccion--oscura{background:var(--grafito);color:#fff}
/* Dos columnas iguales desde 900 px (texto + gráfico) */
.dos-col{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.dos-col{grid-template-columns:1fr 1fr}}

/* ---------- Categorías ---------- */
/* Cuadrícula: 2 columnas en celular, 4 desde 700 px */
.categorias{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.categorias{grid-template-columns:repeat(4,1fr)}}
/* Tarjeta de categoría (es un botón): ícono, nombre y detalle apilados */
.categoria{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--hueso);border:2px solid transparent;border-radius:var(--radio);padding:22px 18px;font:inherit;color:inherit;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
/* Al pasar el cursor sube un poco y se resalta con borde naranja y sombra */
.categoria:hover{transform:translateY(-4px);border-color:var(--naranja);background:#fff;box-shadow:var(--sombra)}
.categoria svg{width:52px;height:52px;color:var(--naranja);margin-bottom:6px}
.categoria strong{font-family:var(--f-titulo);font-size:1.05rem}
.categoria span{font-size:.85rem;color:var(--acero)}

/* ---------- Productos destacados ---------- */
/* Cuadrícula: 2 columnas en celular, 4 desde 900 px */
.productos{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.productos{grid-template-columns:repeat(4,1fr)}}
/* Tarjeta de producto (es un enlace) con elevación al pasar el cursor */
.producto{background:#fff;border-radius:var(--radio);padding:12px;text-decoration:none;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 10px rgba(20,24,29,.06);transition:transform .2s,box-shadow .2s}
.producto:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
/* Zona de la foto en proporción 4:3 (el contenedor posiciona la insignia "Oferta") */
.producto__foto{position:relative;aspect-ratio:4/3;background:var(--hueso);border-radius:12px;display:grid;place-items:center;overflow:hidden;color:var(--naranja)}
.producto__foto img{width:100%;height:100%;object-fit:cover}
.producto__foto svg{width:60px;height:60px}
/* Insignia naranja "Oferta" en la esquina de la foto */
.producto__oferta{position:absolute;top:8px;left:8px;background:var(--naranja);color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px}
.producto h3{font-size:.95rem;font-weight:600;font-family:var(--f-texto)}
/* Precio vigente (naranja) y, tachado, el precio normal cuando hay oferta */
.producto__precio{font-family:var(--f-titulo);font-weight:800;font-size:1.25rem;color:var(--naranja)}
.producto__precio s{font-size:.85rem;color:var(--acero);font-weight:400;margin-left:6px}
/* Equivalente en bolívares */
.producto__bs{font-size:.85rem;color:var(--acero)}

/* ---------- Pasos ("Así de fácil") ---------- */
/* Lista numerada sin viñetas: 1 columna en celular, 4 desde 700 px */
.pasos{list-style:none;padding:0;margin:0;display:grid;gap:18px}
@media (min-width:700px){.pasos{grid-template-columns:repeat(4,1fr)}}
/* Cada paso en una tarjeta translúcida sobre el fondo oscuro */
.pasos li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radio);padding:24px 20px}
/* Círculo naranja con el número del paso */
.pasos__n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--naranja);font-family:var(--f-titulo);font-weight:900;margin-bottom:14px}
.pasos h3{margin-bottom:6px;color:var(--amarillo)}
.pasos p{color:#d9dde1;font-size:.95rem}

/* ---------- Envíos ---------- */
/* Lista de formas de entrega con una barra naranja a la izquierda */
.lista-iconos{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.lista-iconos li{padding-left:18px;border-left:5px solid var(--naranja)}
.lista-iconos strong{display:block;font-family:var(--f-titulo)}
/* Marco del gráfico de la zona de delivery */
.mapa{margin:0;background:var(--hueso);border-radius:var(--radio);padding:18px;max-width:460px;margin-inline:auto;width:100%}

/* ---------- Pagos ---------- */
/* 1 columna en celular, 3 desde 800 px */
.pagos{display:grid;gap:16px}
@media (min-width:800px){.pagos{grid-template-columns:repeat(3,1fr)}}
/* Tarjeta blanca con borde superior naranja (la variante "acento" es oscura con borde amarillo) */
.tarjeta{background:#fff;border-radius:var(--radio);padding:26px 22px;box-shadow:0 2px 10px rgba(20,24,29,.06);border-top:6px solid var(--naranja)}
.tarjeta h3{margin-bottom:8px}
.tarjeta--acento{background:var(--grafito);color:#fff;border-top-color:var(--amarillo)}
/* Nota pequeña en gris (por ejemplo, la tasa del día) */
.nota{margin-top:20px;color:var(--acero);font-size:.9rem}

/* ---------- Preguntas frecuentes (<details>) ---------- */
.faq{border-bottom:1px solid #e3e0da;padding:6px 0}
/* Título clicable: sin el triángulo nativo; muestra "+" a la derecha */
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;min-height:44px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:'+';font-size:1.4rem;color:var(--naranja);line-height:1}
/* Abierto: el "+" cambia a "–" */
.faq[open] summary::after{content:'–'}
/* Oculta el triángulo nativo en Safari/Chrome */
.faq summary::-webkit-details-marker{display:none}
.faq p{padding:0 0 16px;color:var(--acero)}

/* ---------- Llamada a la acción final y pie ---------- */
.cta{background:var(--naranja);color:#fff;text-align:center;padding:64px 0}
.cta h2{margin-bottom:10px}
.cta p{margin-bottom:24px;font-size:1.1rem}
.pie{background:var(--grafito);color:#aab2ba;padding:36px 0}
.pie__fila{display:grid;gap:12px;justify-items:center;text-align:center}
.pie__copia{font-size:.85rem}

/* ---------- Aparición al hacer scroll (solo si el navegador y el usuario lo permiten) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Estado inicial (solo con JavaScript activo): transparente y 18 px más abajo */
  .js .revelar{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
  /* Estado final al entrar en pantalla (clase añadida por landing.js) */
  .js .revelar.visible{opacity:1;transform:none}
}
/* Quien prefiere menos movimiento: sin desplazamiento suave y sin giro del engranaje */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__engranaje{animation:none}
}