/* =============================================================================
 *  index.css — Estilos específicos de la landing.
 * ===========================================================================*/

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding: 40px 0 20px; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: 62vh; }
.hero-copy .badge { margin-bottom: 18px; }
.hero-badge { background: rgba(var(--accent2-rgb), .15); color: var(--accent2); }
.hero-title {
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; margin-bottom: 28px; max-width: 560px;
  color: var(--accent);
}
.hero-title-cursor {
  display: inline-block; margin-left: 2px; font-weight: 400;
  animation: heroCursorBlink 1s steps(1) infinite;
}
@keyframes heroCursorBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-title-cursor { animation: none; opacity: 0; } }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-art img { max-height: 320px; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); }
.hero-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .35), transparent 65%); filter: blur(40px); z-index: -1; }

/* ---- Hero: cuadrícula de fondo animada (mosaico de marca que reacciona al mouse) ---- */
.hero-grid-motion {
  position: absolute; inset: -20% -10%; z-index: 0;
  display: flex; flex-direction: column; gap: 14px;
  transform: rotate(-9deg) scale(1.25); transform-origin: center;
  opacity: .5; pointer-events: none;
}
.hgm-row { display: flex; gap: 14px; flex: none; width: max-content; will-change: transform; }
.hgm-tile {
  flex: none; width: 96px; height: 96px; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.hgm-tile img { width: 48%; height: 48%; object-fit: contain; opacity: .85; }
.hgm-tile.tile-accent  { background: var(--accent); }
.hgm-tile.tile-accent2 { background: var(--accent2); }
.hero-grid-fade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--base) 0%, var(--base) 40%, transparent 78%);
}
.hero-inner { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .hero-grid-motion, .hero-grid-fade { display: none; }
}

/* ---- Ventajas / features ---- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: border-color .2s, transform .2s; }
.feature-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.feature-ic { width: 52px; height: 52px; border-radius: 12px; background: rgba(var(--accent-rgb), .12); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feature-card:nth-child(even) .feature-ic { background: rgba(var(--accent2-rgb), .12); color: var(--accent2); }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature-card p { font-size: .9rem; }

/* ---- Ritmo de secciones: alterna con el tono de superficie ---- */
.section-alt { position: relative; background: var(--surface); }
/* Degradado en los bordes para que el cambio de tono no sea un corte brusco.
   Varias paradas (en vez de 2) para una curva de entrada suave, no una rampa lineal. */
.section-alt::before, .section-alt::after {
  content: ''; position: absolute; left: 0; right: 0; height: 180px; pointer-events: none; z-index: 0;
}
.section-alt::before {
  top: -180px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--surface) 12%, transparent) 35%,
    color-mix(in srgb, var(--surface) 45%, transparent) 65%,
    color-mix(in srgb, var(--surface) 80%, transparent) 85%,
    var(--surface) 100%);
}
.section-alt::after {
  bottom: -180px;
  background: linear-gradient(to top,
    transparent 0%,
    color-mix(in srgb, var(--surface) 12%, transparent) 35%,
    color-mix(in srgb, var(--surface) 45%, transparent) 65%,
    color-mix(in srgb, var(--surface) 80%, transparent) 85%,
    var(--surface) 100%);
}
.section-alt > * { position: relative; z-index: 1; }

/* ---- Instagram: carrusel rotativo continuo ---- */
.social-track-wrap {
  overflow: hidden; width: 100%; margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.social-track { display: flex; gap: 16px; width: max-content; animation: socialScroll 38s linear infinite; padding: 8px 0 28px; }
.social-track-wrap:hover .social-track { animation-play-state: paused; }
.social-item {
  flex: none; width: 220px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); transition: transform .2s ease, border-color .2s ease;
}
.social-item:hover { transform: translateY(-4px); border-color: var(--accent2); }
.social-item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes socialScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .social-track { animation: none; overflow-x: auto; }
}

/* ---- Tienda física (parallax) ---- */
.parallax-section {
  position: relative; min-height: 440px; display: flex; align-items: center;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-attachment: fixed; overflow: hidden; isolation: isolate;
}
.parallax-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,8,18,.88) 0%, rgba(4,8,18,.62) 55%, rgba(4,8,18,.28) 100%);
  z-index: 0;
}
/* Entra desde el fondo de la sección anterior en vez de cortar directo a la foto. */
.parallax-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--base) 0%,
    color-mix(in srgb, var(--base) 65%, transparent) 35%,
    color-mix(in srgb, var(--base) 30%, transparent) 65%,
    transparent 100%);
}
.parallax-content { position: relative; z-index: 2; max-width: 560px; padding: 70px 20px; color: #fff; }
.parallax-content .kicker {
  display: inline-block; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em;
  color: var(--accent2); border: 1px solid rgba(255,255,255,.3); padding: 4px 11px;
  border-radius: 6px; margin-bottom: 18px;
}
.parallax-content h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.18; margin-bottom: 16px; color: #fff; }
.parallax-content h2 .text-accent2 { color: var(--accent2); }
.parallax-content p { color: rgba(255,255,255,.8); font-size: 1rem; max-width: 460px; }

@media (max-width: 860px) {
  /* background-attachment:fixed es problemático en iOS/Android; se desactiva y queda estático */
  .parallax-section { background-attachment: scroll; min-height: 380px; }
  .parallax-content { text-align: center; margin: 0 auto; }
  .parallax-content p { margin: 0 auto; }
}

/* ---- Placeholder de imagen ---- */
.pc-noimg, .cart-item-ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; color: var(--muted); }

/* ---- Blog grid ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.blog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s, border-color .2s; }
.blog-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.bc-img { aspect-ratio: 16/9; background: var(--void); }
.bc-img img { width: 100%; height: 100%; object-fit: cover; }
.bc-body { padding: 18px; }
.bc-body h3 { font-size: 1.1rem; margin: 6px 0 8px; }
.bc-body p { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Contacto ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.contact-list li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.contact-list li a:hover { color: var(--accent); }
.contact-list svg { color: var(--accent); flex-shrink: 0; }
.contact-map { height: 340px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); z-index: 0; }

/* ---- Estilo del mapa (pin de marca + popup + controles) ---- */
.map-pin { position: relative; display: flex; align-items: center; justify-content: center; }
.map-pin-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent2); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); z-index: 2;
}
.map-pin-pulse {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent2); opacity: .35; animation: mapPulse 2.2s ease-out infinite;
}
@keyframes mapPulse { 0% { transform: scale(.4); opacity: .5; } 100% { transform: scale(1.7); opacity: 0; } }

.leaflet-popup-content-wrapper {
  background: var(--base); color: var(--text); border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.45);
}
.leaflet-popup-content { font-family: var(--font-body); font-size: .85rem; line-height: 1.5; margin: 11px 13px; }
.leaflet-popup-content strong { font-family: var(--font-display); }
.leaflet-popup-tip { background: var(--base); }
.leaflet-popup-close-button { color: var(--muted) !important; }

.leaflet-bar { border: none !important; box-shadow: 0 8px 22px -8px rgba(0,0,0,.4); }
.leaflet-bar a {
  background: var(--base) !important; color: var(--text) !important; border-color: var(--border) !important;
}
.leaflet-bar a:hover { background: var(--surface) !important; color: var(--accent) !important; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-title { margin-left: auto; margin-right: auto; }
  .hero-copy .hero-cta { justify-content: center; }
  .hero-art { order: -1; }
  .hero-art img { max-height: 200px; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Respaldo de Mercado Libre — tarjeta de reputación del perfil de vendedor.
   =============================================================================
   Los colores de aquí (verde del termómetro, amarillo del rótulo) son de la
   marca MERCADO LIBRE, no de Merca Global: por eso van fijos y no en config.js,
   igual que el verde de WhatsApp en base.css.
   ===========================================================================*/
.ml-card {
  --ml-green: #00a650;
  --ml-yellow: #ffe600;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(190px, 250px) 1fr;
  gap: clamp(24px, 4vw, 54px); align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; padding: clamp(24px, 4vw, 46px);
  box-shadow: 0 18px 44px -28px rgba(15, 22, 38, .45);
}
/* Lavado de color suave hacia la esquina, como en el diseño de referencia. */
.ml-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 100% 0%, rgba(var(--accent-rgb), .10), transparent 58%);
}
.ml-card > * { position: relative; z-index: 1; }

/* ---- Columna del perfil ---- */
.ml-profile { text-align: center; }
.ml-logo-wrap { position: relative; width: min(100%, 196px); margin: 0 auto 16px; }
.ml-logo {
  aspect-ratio: 1; padding: 13%; border-radius: 20px;
  /* Fondo claro fijo: el logo de Mercado Libre es oscuro y se perdería en modo oscuro. */
  background: #fff; border: 1px solid rgba(15, 22, 38, .08);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -18px rgba(15, 22, 38, .55);
}
.ml-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Rótulo de respaldo mientras no esté el archivo del logo en img/. */
.ml-logo.is-fallback { background: var(--ml-yellow); }
.ml-logo-txt {
  font-family: var(--font-display); font-weight: 700; color: #2d3277;
  line-height: 1.02; font-size: clamp(1.1rem, 2.6vw, 1.6rem); text-align: center;
}
.ml-verified {
  position: absolute; right: -8px; bottom: -8px; width: 42px; height: 42px;
  border-radius: 13px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; border: 3px solid var(--surface);
}
.ml-nick { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.ml-profile-meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 7px; font-size: .82rem; color: var(--muted);
}
.ml-profile-meta span + span { position: relative; }
.ml-profile-meta span + span::before { content: '·'; position: absolute; left: -9px; }
.ml-profile-meta strong { color: var(--text); font-weight: 600; }

/* ---- Columna del contenido ---- */
.ml-kicker {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px;
  color: var(--ml-green); font-weight: 700; font-size: .88rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.ml-kicker small { color: var(--muted); font-weight: 500; font-size: .85rem; letter-spacing: 0; text-transform: none; }
.ml-title { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.12; margin-bottom: 12px; }
.ml-text { color: var(--muted); max-width: 62ch; }

/* ---- Termómetro de reputación ---- */
.ml-rep { margin: 26px 0 22px; }
.ml-rep-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ml-rep-label { color: var(--muted); }
.ml-rep-max { color: var(--ml-green); }
.ml-rep-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ml-rep-seg { height: 7px; border-radius: 999px; background: var(--border); }

/* ---- Cifras ---- */
.ml-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.ml-stat-v { font-family: var(--font-display); font-weight: 700; line-height: 1.1; font-size: clamp(1.5rem, 3vw, 2rem); }
.ml-stat-l { color: var(--muted); font-size: .85rem; margin-top: 3px; }

.ml-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

@media (max-width: 860px) {
  .ml-card { grid-template-columns: 1fr; text-align: center; }
  .ml-logo-wrap { width: min(100%, 150px); }
  .ml-kicker, .ml-actions, .ml-rep-head { justify-content: center; }
  .ml-text { margin-inline: auto; }
  .ml-actions .btn { flex: 1 1 200px; }
}