/*
Theme Name: ElegiFácil
Theme URI: https://elegifacil.com.ar
Author: Ezequiel Olea
Description: Tema a medida para ElegiFácil — guías de compra y recomendaciones con IA para Mercado Libre Argentina.
Version: 1.3.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: elegifacil
*/

:root {
  --ef-bg: #faf9f7;
  --ef-surface: #ffffff;
  --ef-text: #1a1a1a;
  --ef-text-muted: #595959;
  --ef-accent: #FFE600;
  --ef-accent-dark: #cdae00;
  /* Paleta de Mercado Libre: azul de acciones/links, verde de envío y
     descuentos. Tonos un punto más oscuros que los de ML (#3483fa, #00a650)
     porque esos no llegan a contraste AA (4.5:1) con texto blanco encima ni
     como texto chico sobre blanco. */
  --ef-ml-blue: #2968c8;
  --ef-ml-blue-dark: #1f56a8;
  --ef-ml-blue-bright: #3483fa; /* solo decorativo: bordes, glows, íconos grandes */
  --ef-ml-green: #00814a;
  --ef-ml-red: #e83b3b;
  --ef-border: #ececec;
  --ef-radius: 8px;
  --ef-shadow: 0 2px 10px rgba(0,0,0,.06);
  --ef-shadow-hover: 0 8px 24px rgba(0,0,0,.1);
  --ef-space-1: 4px;
  --ef-space-2: 8px;
  --ef-space-3: 16px;
  --ef-space-4: 24px;
  --ef-space-5: 32px;
  --ef-space-6: 48px;
  --ef-max-width: 1180px;
  --ef-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ef-font);
  background: var(--ef-bg);
  color: var(--ef-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { letter-spacing: -0.01em; }
body.ef-nav-locked { overflow: hidden; }

.ef-container { max-width: var(--ef-max-width); margin: 0 auto; padding: 0 var(--ef-space-4); }
.screen-reader-text { position: absolute; left: -9999px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.ef-header {
  background: var(--ef-surface);
  border-bottom: 1px solid var(--ef-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: top .25s ease;
}
/* Se esconde moviendo top (no transform): un transform en el header lo
   vuelve el contenedor de los position:fixed de adentro, y el menú mobile
   aparecía flotando sobre la página. */
.ef-header.is-hidden { top: calc(var(--ef-header-full, 160px) * -1); }
.ef-offer-jump { transition: top .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .ef-header, .ef-offer-jump { transition: none; }
}
.ef-header-inner {
  display: flex;
  align-items: center;
  gap: var(--ef-space-4);
  padding: var(--ef-space-3) var(--ef-space-4);
  max-width: var(--ef-max-width);
  margin: 0 auto;
}
/* Escritorio: logo a la izquierda, buscador centrado y más ancho, regalos a
   la derecha — la fila ocupa el mismo ancho que el contenido de la página
   en vez de quedar amontonada a la izquierda. */
@media (min-width: 900px) {
  .ef-header-inner { display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, 620px) minmax(max-content, 1fr); }
  .ef-header-inner .ef-brand { justify-self: start; }
  .ef-header-inner .ef-header-search { width: 100%; max-width: none; }
  .ef-header-inner .ef-header-gift-cta { grid-column: 3; justify-self: end; }
}
.ef-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ef-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
}
.ef-logo,
.ef-footer-logo {
  gap: 10px;
  color: #1a1a1a;
  text-decoration: none;
  transition: transform .2s ease;
}
.ef-logo:hover, .ef-footer-logo:hover { transform: translateY(-1px); }
.ef-logo-mark { display: flex; flex-shrink: 0; }
.ef-logo-mark svg { width: 38px; height: 38px; display: block; filter: drop-shadow(0 4px 10px rgba(11,20,48,.15)); }
.ef-logo-word { font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.ef-logo-word b { font-weight: 800; color: #2968c8; }
.ef-brand-divider { width: 1px; height: 20px; background: var(--ef-border); flex-shrink: 0; }
.ef-brand-ml-logo { height: 15px; width: auto; display: block; opacity: .8; }
@media (max-width: 420px) {
  .ef-brand-divider, .ef-brand-ml-logo { display: none; }
}
@media (min-width: 721px) {
  .ef-logo { gap: 12px; }
  .ef-logo-mark svg { width: 48px; height: 48px; }
  .ef-logo-word { font-size: 30px; }
}

/* ── Buscador del header (siempre visible, como en Mercado Libre) ─────────
   Una sola píldora blanca (no dos bloques de color pegados) con el botón
   circular flotando adentro — mismo lenguaje que .ef-hero-search. */
.ef-header-search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 440px;
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.ef-header-search:focus-within {
  border-color: var(--ef-ml-blue);
  box-shadow: 0 2px 12px rgba(52, 131, 250, 0.18);
}
.ef-header-search input {
  flex: 1;
  min-height: 44px;
  min-width: 0;
  border: none;
  background: transparent;
  height: 44px;
  padding: 0 4px 0 18px;
  font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
  font-family: inherit;
  color: var(--ef-text);
}
.ef-header-search input:focus { outline: none; }
.ef-header-search button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* 44px: tap target mínimo en mobile */
  height: 44px;
  margin: 2px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--ef-ml-blue);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ef-header-search button[type="submit"]:hover { background: var(--ef-ml-blue-dark); transform: scale(1.06); }

/* ── CTA "vedette" del header — el buscador de regalos aparte del resto del
   menú, mismo criterio que en el hero: azul = "arrancá una conversación con
   la IA". Solo desktop — en mobile sigue viviendo en el drawer de siempre,
   para no amontonar la fila de arriba en pantallas chicas. */
.ef-header-gift-cta { display: none; }
@media (min-width: 721px) {
  .ef-header-gift-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ef-ml-blue), var(--ef-ml-blue-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(52, 131, 250, .3);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .ef-header-gift-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(52, 131, 250, .4); }
  .ef-header-gift-cta .ef-icon { width: 16px; height: 16px; }
  .ef-header-gift-cta .ef-nav-badge { margin-left: 2px; }
}

/* ── Segunda fila del header: el resto de la navegación, aparte del buscador
   de regalos — mismo <nav class="ef-nav"> de siempre adentro (el drawer
   mobile no cambia en nada), pero ahora como franja propia de ancho
   completo en vez de compartir fila con el buscador. En mobile esta franja
   queda sin presencia visual a propósito (sin display:none: el drawer de
   .ef-nav vive adentro y es position:fixed — un padre en display:none se
   lo hubiera llevado puesto igual). */
.ef-header-subnav { margin: 0; padding: 0; border: none; background: none; }
@media (min-width: 721px) {
  .ef-header-subnav { background: #f9fafc; border-top: 1px solid var(--ef-border); }
  .ef-header-subnav .ef-nav { max-width: var(--ef-max-width); margin: 0 auto; padding: 0 var(--ef-space-4); }
  /* Centrado (no pegado a la izquierda) + íconos visibles: en el drawer mobile
     los íconos ya existían pero acá arriba estaban con display:none por la
     regla general de abajo — se habilitan de nuevo con más especificidad, sin
     tocar esa regla, mismo criterio que el badge/chispa de hover. */
  .ef-header-subnav .ef-nav ul { justify-content: center; gap: 34px; padding: 11px 0; }
  .ef-header-subnav .ef-nav a { display: inline-flex; align-items: center; gap: 7px; }
}
/* Tablet / notebook chica: 7 ítems no entran en una línea con 34 px de aire. */
@media (min-width: 721px) and (max-width: 1180px) {
  .ef-header-subnav .ef-nav ul { flex-wrap: wrap; gap: 0 20px; padding: 4px 0; }
}
@media (min-width: 721px) {
  .ef-header-subnav .ef-nav a svg.ef-icon { display: inline-flex; width: 16px; height: 16px; color: var(--ef-ml-blue); flex-shrink: 0; }
  /* "Buscador de regalos" ya tiene su propio botón arriba (.ef-header-gift-cta) —
     acá abajo, en desktop, queda oculto para no duplicarlo. */
  .ef-nav-item-gift { display: none; }
}

.ef-nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.ef-nav a {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ef-text);
  padding: var(--ef-space-2) 0;
  transition: color .2s ease;
}
.ef-nav a:hover { color: var(--ef-ml-blue-dark); }
/* Subrayado con gradiente de marca que se dibuja desde el centro hacia
   afuera (no una barra plana deslizando desde la izquierda) + una chispita
   que aparece arriba del link — mismo ícono SVG que el resto del sitio, no
   un emoji (ya hubo problemas de renderizado con emoji en otras partes del
   proyecto). */
.ef-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ef-ml-blue), var(--ef-accent), var(--ef-ml-green));
  transform: translateX(-50%) scaleX(0);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.ef-nav a:hover::after { transform: translateX(-50%) scaleX(1); }
.ef-nav-hover-spark {
  position: absolute;
  top: -6px;
  left: 50%;
  display: flex;
  color: var(--ef-accent-dark);
  opacity: 0;
  transform: translate(-50%, 4px) scale(.5) rotate(-15deg);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.ef-nav a .ef-nav-hover-spark svg.ef-icon { display: inline-flex; width: 12px; height: 12px; }
.ef-nav a:hover .ef-nav-hover-spark { opacity: 1; transform: translate(-50%, -4px) scale(1) rotate(0deg); }
@media (max-width: 720px) { .ef-nav-hover-spark { display: none; } }
@media (prefers-reduced-motion: reduce) { .ef-nav-hover-spark { transition: opacity .25s ease; transform: translate(-50%, -4px) scale(1); } }
.ef-nav-toggle {
  display: none;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  border-radius: 12px;
  font-size: 24px;
  color: var(--ef-text);
  cursor: pointer;
  padding: 0;
}
.ef-nav-toggle:focus-visible { outline: 3px solid rgba(52, 131, 250, .45); }
.ef-nav a svg.ef-icon { display: none; }
.ef-nav-backdrop { display: none; }

/* Badge "✨ IA" del buscador de regalos: único ítem del menú que arranca una
   conversación libre con la IA en vez de una búsqueda literal. Selector con
   más clases a propósito (no !important) para ganarle en especificidad a
   ".ef-nav a svg.ef-icon" (que oculta/redimensiona íconos de menú arriba y
   en mobile) sin tocar esa regla general. */
.ef-nav-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ef-accent);
  color: var(--ef-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: 2px;
}
.ef-nav a .ef-nav-badge svg.ef-icon { display: inline-flex; width: 10px; height: 10px; color: var(--ef-text); }
.ef-nav-badge--new { background: #d6324a; color: #fff; }

@media (max-width: 720px) {
  .ef-header-inner { flex-wrap: wrap; }
  .ef-header-search { order: 3; flex: 1 0 100%; max-width: none; }
  /* Sin esto, el ☰ queda pegado al lado de .ef-brand: .ef-header-search se va a
     su propia fila (order: 3) y deja de ocupar el espacio del medio que en desktop
     empuja el toggle hacia la derecha. (El toggle ahora vive directo en
     .ef-header-inner, no adentro de .ef-nav — .ef-nav pasó a la segunda fila.) */
  .ef-nav-toggle { display: block; position: relative; z-index: 101; margin-left: auto; }
  .ef-nav-backdrop {
    display: block;
    position: fixed;
    inset: 61px 0 0 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .25s ease;
    z-index: 95;
  }
  .ef-nav.ef-nav-open .ef-nav-backdrop {
    background: rgba(0,0,0,.28);
    pointer-events: auto;
  }
  .ef-nav ul {
    position: fixed;
    inset: 61px 0 0 0;
    background: var(--ef-surface);
    flex-direction: column;
    padding: var(--ef-space-4);
    gap: 0;
    transform: translateY(-110%);
    transition: transform .25s ease;
    margin: 0;
    z-index: 96;
  }
  .ef-nav.ef-nav-open ul { transform: translateY(0); }
  .ef-nav li { border-bottom: 1px solid var(--ef-border); }
  .ef-nav li:last-child { border-bottom: none; }
  .ef-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    padding: 16px 4px;
  }
  .ef-nav a::after { display: none; }
  .ef-nav a svg.ef-icon { display: flex; width: 20px; height: 20px; color: var(--ef-ml-blue); flex-shrink: 0; }
  .ef-nav a .ef-nav-badge { margin-left: auto; }
  .ef-nav li.current-menu-item a,
  .ef-nav li.current_page_item a { color: var(--ef-ml-blue); font-weight: 800; }
  .ef-nav li.current-menu-item a svg.ef-icon,
  .ef-nav li.current_page_item a svg.ef-icon { color: var(--ef-ml-blue); }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.ef-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ef-space-5);
  /* Fondo a todo el ancho; el contenido se alinea a la grilla del sitio. */
  padding: var(--ef-space-5) max(var(--ef-space-3), calc((100% - var(--ef-max-width)) / 2 + var(--ef-space-4))) var(--ef-space-5);
  overflow: hidden;
}

/* Fondo del hero: noche con aurora (amarillo/azul/violeta de la marca) que
   se mueve lento + grilla de puntos. Oscuro a propósito: el home alterna
   claro/oscuro y así el buscador blanco y la demo resaltan solos. Los blobs
   además siguen al mouse (ver reveal.js). */
.ef-hero {
  background: #0b1430;
  color: #fff;
  --ef-text-muted: #c9d1e6;
}
.ef-hero-blobs {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  transition: transform .3s ease-out;
}
.ef-hero-blobs::before,
.ef-hero-blobs::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: blur(60px);
  will-change: transform;
}
.ef-hero-blobs::before {
  background:
    radial-gradient(closest-side at 22% 28%, rgba(52, 131, 250, .55), transparent),
    radial-gradient(closest-side at 80% 70%, rgba(122, 92, 255, .5), transparent);
  animation: ef-aurora-a 18s ease-in-out infinite alternate;
}
.ef-hero-blobs::after {
  background:
    radial-gradient(closest-side at 72% 20%, rgba(0, 190, 255, .3), transparent),
    radial-gradient(closest-side at 28% 88%, rgba(236, 72, 153, .22), transparent);
  animation: ef-aurora-b 22s ease-in-out infinite alternate;
}
@keyframes ef-aurora-a { to { transform: translate(6%, 4%) rotate(8deg) scale(1.08); } }
@keyframes ef-aurora-b { to { transform: translate(-6%, -3%) rotate(-10deg) scale(1.12); } }
.ef-hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent);
}

.ef-hero-content { position: relative; z-index: 1; flex: 1; text-align: center; max-width: 600px; }
.ef-hero h1 {
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 var(--ef-space-3);
}
.ef-hero p {
  font-size: 16px;
  color: var(--ef-text-muted);
  max-width: 520px;
  margin: 0 auto var(--ef-space-3);
}
/* ── Buscador del hero — la acción principal de la home, no un botón que te
   manda a otra página a buscar recién ahí. ─────────────────────────────── */
.ef-hero-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin: 0 auto var(--ef-space-3);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.ef-hero-search::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: linear-gradient(120deg, #3483fa, #ffe600, #00a650, #3483fa);
  background-size: 300% 300%;
  opacity: 0;
  z-index: -1;
  transition: opacity .3s ease;
}
.ef-hero-search:focus-within::before { opacity: 1; animation: ef-gradient-spin 3s linear infinite; }
@keyframes ef-gradient-spin { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.ef-hero-search-icon { display: flex; padding: 0 0 0 20px; color: var(--ef-ml-blue); flex-shrink: 0; }
.ef-hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 17px 12px;
  font-size: 16px;
  font-family: inherit;
}
.ef-hero-search input:focus { outline: none; }
.ef-hero-search button[type="submit"] {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--ef-ml-blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  margin: 5px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.ef-hero-search button[type="submit"]:hover { background: var(--ef-ml-blue-dark); transform: translateY(-1px); }
.ef-hero-search button[type="submit"] span { display: none; }

@media (min-width: 480px) {
  .ef-hero-search button[type="submit"] span { display: inline; }
}

/* ── Eyebrow, pedidos de ejemplo y garantías del hero ─────────────────── */
.ef-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--ef-space-3);
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.ef-hero-eyebrow .ef-icon { width: 16px; height: 16px; color: #ffe600; }
.ef-hero-h1-accent {
  background: linear-gradient(100deg, #1f56a8, #2968c8 55%, #7a5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ef-hero-prompts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 var(--ef-space-3);
}
.ef-hero-prompts-label { flex: 1 0 100%; font-size: 14px; font-weight: 600; color: #3d3d3d; }
.ef-hero-prompt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(26,26,26,.08);
  color: #1a1a1a;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ef-hero-prompt:hover { transform: translateY(-2px); border-color: var(--ef-ml-blue); box-shadow: 0 6px 16px rgba(41,104,200,.15); }

.ef-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  list-style: none;
  margin: 0 0 var(--ef-space-4);
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2b;
}
.ef-hero-trust li { display: inline-flex; align-items: center; gap: 6px; }
.ef-hero-trust .ef-icon { width: 18px; height: 18px; color: var(--ef-ml-green); stroke-width: 3; }
.ef-hero-trust img { height: 18px; width: auto; }

.ef-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ef-btn-primary { background: var(--ef-accent); color: var(--ef-text); box-shadow: var(--ef-shadow); }
.ef-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ef-shadow-hover); filter: brightness(.97); }
.ef-btn-secondary { background: var(--ef-surface); color: var(--ef-text); border: 1px solid var(--ef-border); }
.ef-btn-secondary:hover { border-color: var(--ef-text); transform: translateY(-2px); }

/* ── Demo en vivo del buscador con IA (hero) ─────────────────────────────
   Una ventana del propio sitio "usándose sola": se tipea un pedido en el
   buscador, la IA muestra cómo lo interpretó y qué filtró, y aparecen 3
   productos reales — el mismo recorrido que /buscar-productos/ (reveal.js). */
.ef-ai-demo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(31, 86, 168, .22), 0 0 0 1px rgba(26,26,26,.06);
  overflow: hidden;
  text-align: left;
}
.ef-ai-demo-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #f1f3f6;
  border-bottom: 1px solid #e5e8ee;
}
.ef-ai-demo-lights { display: inline-flex; gap: 6px; }
.ef-ai-demo-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.ef-ai-demo-lights i:nth-child(2) { background: #febc2e; }
.ef-ai-demo-lights i:nth-child(3) { background: #28c840; }
.ef-ai-demo-url {
  flex: 1;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: #595959;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ef-ai-demo-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 400px;
  padding: 18px;
  background: linear-gradient(180deg, #fffbe0 0, #fff 120px);
}

/* Barra de búsqueda: igual que la del sitio */
.ef-ai-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 6px 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid #e2e6ee;
  box-shadow: 0 6px 18px rgba(26,26,26,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ef-ai-demo.is-typing .ef-ai-search { border-color: #2968c8; box-shadow: 0 0 0 4px rgba(41,104,200,.14); }
.ef-ai-search-icon { display: inline-flex; color: #2968c8; flex-shrink: 0; }
.ef-ai-search-icon .ef-icon { width: 18px; height: 18px; }
.ef-ai-typed {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-ai-typed::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -3px;
  background: #2968c8;
  opacity: 0;
}
.ef-ai-demo.is-typing .ef-ai-typed::after { opacity: 1; animation: ef-caret 1s steps(1) infinite; }
@keyframes ef-caret { 50% { opacity: 0; } }
.ef-ai-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2968c8;
  color: #fff;
  transition: transform .15s ease, background .15s ease;
}
.ef-ai-search-btn .ef-icon { width: 18px; height: 18px; }
.ef-ai-demo.is-pressing .ef-ai-search-btn { transform: scale(.86); background: #1f56a8; }

/* Pasos de la IA: aparecen de a uno y se tildan */
.ef-ai-steps { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 8px; }
.ef-ai-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #3d3d3d;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.ef-ai-steps li.is-on,
.ef-ai-steps li.is-done { opacity: 1; transform: none; }
.ef-ai-steps strong { color: #1a1a1a; }
.ef-ai-step-icon {
  position: relative;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c9d3e4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ef-ai-step-icon .ef-icon { width: 13px; height: 13px; stroke-width: 3.5; color: #fff; opacity: 0; transition: opacity .2s ease; }
.ef-ai-steps li.is-on .ef-ai-step-icon { border-color: #2968c8; border-right-color: transparent; animation: ef-spin .8s linear infinite; }
.ef-ai-steps li.is-done .ef-ai-step-icon { border-color: #00814a; background: #00814a; animation: none; }
.ef-ai-steps li.is-done .ef-ai-step-icon .ef-icon { opacity: 1; }
@keyframes ef-spin { to { transform: rotate(360deg); } }

.ef-ai-results { transition: opacity .3s ease; }
.ef-ai-results.is-hidden { opacity: 0; visibility: hidden; }
.ef-ai-skel {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: linear-gradient(100deg, #eef1f7 30%, #f8f9fc 50%, #eef1f7 70%) 0 0 / 300% 100%;
  animation: ef-ai-shimmer 1.2s linear infinite;
}
@keyframes ef-ai-shimmer { to { background-position: -150% 0; } }
.ef-ai-results.is-loading .ef-ai-results-head { opacity: .5; }
.ef-ai-results-head { margin: 4px 4px 10px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #2968c8; }
.ef-ai-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ef-ai-product {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 8px 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6e9f0;
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ef-ai-results:not(.is-hidden) .ef-ai-product { animation: ef-ai-pop .45s cubic-bezier(.2,.8,.3,1.25) both; }
.ef-ai-product:nth-child(2) { animation-delay: .1s !important; }
.ef-ai-product:nth-child(3) { animation-delay: .2s !important; }
@keyframes ef-ai-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.ef-ai-product:hover { transform: translateY(-3px); border-color: rgba(41,104,200,.4); box-shadow: 0 10px 22px rgba(41,104,200,.16); }
.ef-ai-product-img { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; background: #f4f4f5; overflow: hidden; margin-bottom: 4px; }
.ef-ai-product-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; display: block; }
.ef-ai-product-img em {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #00814a;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.ef-ai-product-title { font-size: 13px; line-height: 1.3; color: #3d3d3d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.ef-ai-product b { font-size: 16px; font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.ef-ai-product small { font-size: 12px; font-weight: 600; color: #00814a; }

.ef-ai-demo-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-top: 1px solid #eef0f4;
  color: #2968c8;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}
.ef-ai-demo-cta:hover { background: #f4f8ff; }
.ef-ai-demo-cta .ef-icon { width: 16px; height: 16px; }
.ef-ai-demo-dots { position: absolute; top: 19px; right: 16px; display: flex; gap: 5px; }
.ef-ai-demo-dots span { width: 6px; height: 6px; border-radius: 999px; background: #c9ced8; transition: width .3s ease, background .3s ease; }
.ef-ai-demo-dots span.is-active { width: 16px; background: #2968c8; }
.ef-ai-demo-url { margin-right: 52px; }


@media (min-width: 960px) {
  .ef-hero { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ef-space-6); padding-top: var(--ef-space-6); padding-bottom: var(--ef-space-6); }
  .ef-hero-content { text-align: left; max-width: 600px; }
  .ef-hero p { margin: 0 0 var(--ef-space-4); }
  .ef-hero-search { margin-left: 0; }
  .ef-hero-prompts,
  .ef-hero-trust { justify-content: flex-start; }
  .ef-ai-demo { flex: 0 0 460px; margin: 0; }
}

@media (max-width: 600px) {
  .ef-hero { padding-top: var(--ef-space-4); }
  .ef-hero-prompts {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    margin-left: calc(var(--ef-space-3) * -1);
    margin-right: calc(var(--ef-space-3) * -1);
    padding: 0 var(--ef-space-3) 4px;
    scrollbar-width: none;
  }
  .ef-hero-prompts::-webkit-scrollbar { display: none; }
  .ef-hero-prompts > * { flex: 0 0 auto; white-space: nowrap; }
  .ef-hero-prompts-label { display: none; }
  .ef-hero-trust { gap: 4px 14px; }
  .ef-ai-demo { border-radius: 18px; }
  .ef-ai-demo-body { min-height: 380px; padding: 14px; }
  .ef-ai-steps li { font-size: 13.5px; }
  .ef-ai-products { gap: 8px; }
  .ef-ai-product b { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ef-ai-product, .ef-ai-steps li .ef-ai-step-icon { animation: none !important; }
  .ef-ai-results, .ef-ai-steps li { transition: none; }
}

/* ── Hero: una pantalla + versión oscura ─────────────────────────────────
   Ocupa exactamente lo visible bajo el header (--ef-header-full no cambia
   cuando el header se esconde, así el hero no salta al scrollear). */
.ef-hero h1 { color: #fff; text-wrap: balance; } /* balance: sin palabra huérfana ("vos.") en mobile */
.ef-hero-h1-accent { background: linear-gradient(100deg, #ffe14d 0%, #ffc94d 35%, #ffb3c7 62%, #b6a4ff 100%); -webkit-background-clip: text; background-clip: text; }
.ef-hero-eyebrow {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ef-hero-search { box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.35); }
.ef-hero-prompts-label { color: #c9d1e6; }
.ef-hero-prompt {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #eef2fb;
}
.ef-hero-prompt:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.ef-hero-prompt--gift {
  gap: 8px;
  font-style: normal;
  font-weight: 700;
  background: #ffe600;
  border-color: #ffe600;
  color: #1a1a1a;
}
.ef-hero-prompt--gift .ef-icon { width: 17px; height: 17px; vertical-align: 0; }
.ef-hero-prompt--gift:hover { background: #fff04d; border-color: #fff04d; box-shadow: 0 8px 24px rgba(255,214,0,.3); }
.ef-hero-trust { color: #e3e8f4; margin-bottom: 0; }
.ef-hero-trust .ef-icon { color: #3ddc84; }

.ef-hero-visual { position: relative; z-index: 1; }
.ef-hero-visual::before {
  content: '';
  position: absolute;
  inset: 8% -6% -4%;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255,214,0,.45), rgba(52,131,250,.5) 55%, rgba(122,92,255,.45));
  filter: blur(40px);
  z-index: -1;
}
.ef-hero .ef-ai-demo { color: #1a1a1a; --ef-text-muted: #595959; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); }
.ef-hero-float { display: none; }

@media (min-width: 960px) {
  .ef-hero {
    min-height: calc(100svh - var(--ef-header-full, 152px));
    padding-top: var(--ef-space-5);
    padding-bottom: var(--ef-space-5);
  }
  .ef-hero-content { max-width: 620px; }
  .ef-hero-prompts-label { flex: 0 0 auto; margin-right: 4px; }
  .ef-hero-visual { flex: 0 0 460px; }
  .ef-hero-visual .ef-ai-demo { margin: 0; max-width: none; }
  .ef-hero-float {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
    animation: ef-float 6s ease-in-out infinite;
  }
  .ef-hero-float .ef-icon { width: 16px; height: 16px; vertical-align: 0; }
  .ef-hero-float--a { left: -40px; bottom: 0; }
  .ef-hero-float--a .ef-icon { color: #00814a; stroke-width: 3; }
  .ef-hero-float--b { right: -24px; top: 0; animation-delay: -3s; }
  .ef-hero-float--b .ef-icon { color: #2968c8; }
}
@keyframes ef-float { 50% { transform: translateY(-10px); } }

/* Notebooks bajas (≤ 860 px de alto): todo entra igual en una pantalla. */
@media (min-width: 960px) and (max-height: 860px) {
  .ef-hero h1 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: var(--ef-space-2); }
  .ef-hero-eyebrow { margin-bottom: var(--ef-space-2); }
  .ef-hero p { margin-bottom: var(--ef-space-3); }
  .ef-hero-search { margin-bottom: var(--ef-space-3); }
  .ef-hero-prompts { margin-bottom: var(--ef-space-2); }
  .ef-ai-demo-body { min-height: 0; padding: 14px; gap: 10px; }
  .ef-ai-search { min-height: 46px; }
  .ef-ai-steps { gap: 4px; }
  .ef-ai-product-img { aspect-ratio: 4 / 3; }
}

/* Las etiquetas flotantes van en un margen propio (no pisan la demo) y
   solo donde sobra alto. */
@media (min-width: 960px) and (min-height: 861px) {
  .ef-hero-visual { padding: 34px 0; }
}
@media (min-width: 960px) and (max-height: 860px) {
  .ef-hero-float { display: none; }
}
@media (min-width: 960px) and (max-height: 790px) {
  .ef-hero-prompts-label, .ef-hero-trust { display: none; }
  .ef-ai-product-img { aspect-ratio: 16 / 10; }
  .ef-ai-product-title { -webkit-line-clamp: 1; min-height: 1.3em; }
}

/* Celular: el chip de regalos va primero, si no queda escondido al final del carrusel. */
@media (max-width: 600px) {
  .ef-hero-prompt--gift { order: -1; }
}

/* Pantallas grandes: más ancho, más aire y tipografía más grande. */
@media (min-width: 1440px) {
  .ef-hero { padding-left: max(var(--ef-space-6), calc((100% - 1320px) / 2)); padding-right: max(var(--ef-space-6), calc((100% - 1320px) / 2)); }
  .ef-hero-content { max-width: 720px; }
  .ef-hero-visual { flex-basis: 540px; }
}
@media (min-width: 1440px) and (min-height: 861px) {
  .ef-hero h1 { font-size: clamp(48px, 2.9vw, 56px); }
  .ef-hero p { font-size: 18px; max-width: 580px; }
}

@media (prefers-reduced-motion: reduce) {
  .ef-hero-blobs::before, .ef-hero-blobs::after, .ef-hero-float { animation: none; }
}

/* ── Íconos SVG inline (trust bar, CTAs, "cómo funciona") ────────────────── */
.ef-icon { display: inline-block; vertical-align: -4px; flex-shrink: 0; }
.ef-btn .ef-icon { width: 17px; height: 17px; vertical-align: -3px; }

/* ── Animación de aparición al hacer scroll ──────────────────────────────
   Progresiva: sin JS o con prefers-reduced-motion, reveal.js agrega
   is-visible de una — nunca queda contenido oculto si algo falla. */
.ef-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.ef-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Hero del buscador (páginas /buscar-productos/ y /buscador-de-regalos/,
   comparten esta clase) — mismo tratamiento de color que el hero de la home
   (gradiente propio, no solo los blobs difuminados encima) y el mismo
   override de --ef-text-muted, por la misma razón: el gris global (#666666)
   queda lavado sobre un fondo este saturado. */
.ef-search-hero {
  position: relative;
  overflow: hidden;
  padding: var(--ef-space-6) var(--ef-space-4);
  text-align: center;
  background: linear-gradient(135deg, #ffe066 0%, #fff2b8 30%, #dcebfd 65%, #bcdaff 100%);
  --ef-text-muted: #3d3d3d;
}
.ef-search-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.ef-search-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ef-ml-blue);
  margin-bottom: var(--ef-space-3);
  box-shadow: var(--ef-shadow);
}
.ef-search-hero h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 0 0 var(--ef-space-2); }
.ef-search-hero > .ef-search-hero-inner > p { color: var(--ef-text-muted); font-size: 16px; margin: 0 0 var(--ef-space-4); }

/* ── Carrusel de "Buenas oportunidades" en /buscar-productos/ — más ancho
   que el hero (que está pensado para texto centrado, no para una fila de
   tarjetas), así el carrusel tiene espacio real para respirar. ────────── */
.ef-deals-section {
  max-width: var(--ef-max-width);
  margin: var(--ef-space-6) auto 0;
  padding: 0 var(--ef-space-4);
}

.ef-has-page-search .ef-header-search { display: none; }

/* ── Hero en modo compacto: cuando la página ya tiene una búsqueda (?q= o
   ?ctx=, o se buscó desde la página) queda solo la barra, ya completada, y
   los resultados entran en la primera pantalla. El h1 sigue en la página
   (accesibilidad/SEO) pero oculto a la vista. ─────────────────────────── */
.ef-search-hero.is-compact { padding-top: var(--ef-space-3); padding-bottom: var(--ef-space-3); }
.ef-search-hero.is-compact .ef-search-hero-badge,
.ef-search-hero.is-compact .ef-search-hero-inner > p,
.ef-search-hero.is-compact .abot-search-suggestions,
.ef-search-hero.is-compact .abot-gift-suggestions,
.ef-search-hero.is-compact .ef-gift-steps { display: none; }
.ef-search-hero.is-compact h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ef-search-hero.is-compact #abot-search-finder { margin-top: 0; }
.ef-search-hero.is-compact .ef-gift-form-card { margin-top: 0; padding: var(--ef-space-3); }
.ef-search-hero.is-compact #abot-gift-form textarea { min-height: 56px; }

/* ── Buscador de regalos: formulario como protagonista del hero ──────────
   Los resultados van en su propia sección blanca a ancho completo
   (#abot-gift-results, estilos en gift-finder.css) y las ideas populares
   quedan abajo como inspiración. */
.ef-gift-hero { padding-bottom: var(--ef-space-5); }
.ef-gift-hero-inner { max-width: 820px; }
.ef-gift-form-card {
  margin-top: var(--ef-space-4);
  padding: var(--ef-space-4);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(41, 104, 200, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ef-gift-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ef-space-2) var(--ef-space-4);
  list-style: none;
  margin: var(--ef-space-4) 0 0;
  padding: 0;
  font-size: 14px;
  color: #3d3d3d;
}
.ef-gift-steps li { display: inline-flex; align-items: center; gap: var(--ef-space-2); }
.ef-gift-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
}
.ef-gift-inspo {
  max-width: var(--ef-max-width);
  margin: var(--ef-space-6) auto;
  padding: 0 var(--ef-space-4);
}
.ef-gift-inspo #abot-gift-ideas { margin: 0; max-width: none; }

@media (max-width: 600px) {
  .ef-gift-form-card { padding: var(--ef-space-3); border-radius: 20px; margin-left: calc(var(--ef-space-2) * -1); margin-right: calc(var(--ef-space-2) * -1); }
  .ef-gift-steps { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
  .ef-gift-inspo { padding: 0 var(--ef-space-3); }
}

/* ── Encabezado de sección reutilizable (título + bajada + link) ───────── */
.ef-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ef-space-2) var(--ef-space-4);
  margin-bottom: var(--ef-space-4);
}
.ef-section-head h2 { margin: 0; font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.01em; }
.ef-section-head p { margin: 6px 0 0; color: #4d4d4d; font-size: 15px; }
.ef-section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: #2968c8;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.ef-section-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ef-section-link .ef-icon { width: 16px; height: 16px; }

/* ── "Lo mejor de hoy": 4 estanterías en el home ─────────────────────── */
.ef-home-deals {
  max-width: var(--ef-max-width);
  margin: var(--ef-space-6) auto 0;
  padding: 0 var(--ef-space-4);
}
.ef-home-deals #abot-shop-home { max-width: none; padding: 0; margin: 0; }
.ef-home-deals .abot-carousel-head h2 { font-size: 18px; }

/* ── Cómo funciona: 3 pasos, fondo oscuro para cortar el ritmo claro ── */
.ef-how {
  margin: var(--ef-space-6) 0 0;
  padding: var(--ef-space-6) max(var(--ef-space-3), calc((100% - var(--ef-max-width)) / 2 + var(--ef-space-4)));
  background: #14161c;
  color: #f5f5f5;
}
.ef-how > h2 { margin: 0 0 var(--ef-space-4); font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: #fff; }
.ef-how-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ef-space-3);
}
.ef-how-card {
  position: relative;
  padding: var(--ef-space-4);
  border-radius: 20px;
  background: #1d2029;
  border: 1px solid rgba(255,255,255,.08);
}
.ef-how-num {
  position: absolute;
  top: var(--ef-space-3);
  right: var(--ef-space-4);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255,255,255,.08);
}
.ef-how-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffe600;
  color: #14161c;
  margin-bottom: var(--ef-space-3);
}
.ef-how-icon .ef-icon { width: 22px; height: 22px; }
.ef-how-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #fff; }
.ef-how-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #c9cbd3; }

@media (max-width: 800px) {
  .ef-how-grid { grid-template-columns: 1fr; }
  .ef-home-deals { padding: 0 var(--ef-space-3); }
}

/* ── El diferencial del sitio: buscador de regalos con IA ─────────────────
   Sección "vendedora" a propósito — es la única función del sitio que no
   tiene equivalente directo en Mercado Libre ni en un blog de "ideas de
   regalos" (búsqueda literal vs. contexto libre + inventario real en el
   momento). Paleta de azules (antes amarilla) a pedido del usuario — el CTA
   pasa a amarillo para no perderse contra el nuevo fondo (mismo criterio de
   siempre: azul = acción de búsqueda/lectura, amarillo = acción de
   descubrimiento, así que el amarillo ahora se concentra en el botón en vez
   del fondo). */
.ef-gift-feature {
  max-width: var(--ef-max-width);
  margin: 0 auto var(--ef-space-6);
  padding: 0 var(--ef-space-4);
}
.ef-gift-feature-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf2ff 0%, #bcdaff 55%, #7fb3ff 100%);
  border-radius: 28px;
  padding: var(--ef-space-6) var(--ef-space-5);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--ef-space-6);
  align-items: center;
}
.ef-gift-feature-inner::before {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 102, .35), transparent 70%);
}
/* Formas flotando en el fondo (mismo @keyframes ef-float que ya usa el
   collage de tarjetas del hero) — el "agente en movimiento" del pedido del
   usuario arranca acá, de fondo, y sigue en el ícono giratorio del estado
   "pensando" más abajo. */
.ef-gift-feature-float {
  position: absolute;
  display: flex;
  color: rgba(255, 255, 255, .55);
  animation: ef-float 6s ease-in-out infinite;
}
.ef-gift-feature-float .ef-icon { width: 100%; height: 100%; }
.ef-gift-feature-float-1 { top: 12%; left: 6%; width: 34px; height: 34px; --r: -12deg; animation-delay: -1s; }
.ef-gift-feature-float-2 { bottom: 10%; left: 42%; width: 26px; height: 26px; color: rgba(0, 166, 80, .32); --r: 10deg; animation-delay: -3s; }
.ef-gift-feature-float-3 { top: 20%; right: 6%; width: 20px; height: 20px; color: rgba(255, 224, 102, .65); --r: -8deg; animation-delay: -2s; }
@media (prefers-reduced-motion: reduce) { .ef-gift-feature-float { animation: none; } }

.ef-gift-feature-copy { position: relative; z-index: 1; }
.ef-gift-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ef-ml-blue-dark);
  margin-bottom: var(--ef-space-3);
}
.ef-gift-feature-eyebrow .ef-icon { width: 14px; height: 14px; }
.ef-gift-feature-copy h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.24;
  margin: 0 0 var(--ef-space-3);
  color: #0f2847;
}
/* Sheen dorado (antes azul sobre azul, se perdía contra el nuevo fondo) —
   blanco→amarillo→blanco, el combo de más contraste posible sobre la banda
   de azules nueva. */
.ef-gift-feature-highlight {
  /* Vaivén real entre los dos colores de marca — azul ML oscuro (no un navy
     genérico) y dorado, varias paradas para que se sienta como que "juega"
     entre los dos en vez de un solo cruce. Nunca blanco ni amarillo puro: con
     blanco de por medio, el ciclo pasaba por un momento casi invisible
     contra la zona más clara del fondo (#eaf2ff) — ninguno de estos dos
     tonos es lo bastante claro como para perderse ahí. */
  background: linear-gradient(90deg,
    var(--ef-ml-blue-dark) 0%, #c9960c 25%, var(--ef-ml-blue-dark) 50%,
    #c9960c 75%, var(--ef-ml-blue-dark) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ef-highlight-sheen 5s ease-in-out infinite;
}
@keyframes ef-highlight-sheen {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) { .ef-gift-feature-highlight { animation: none; } }
.ef-gift-feature-copy > p {
  font-size: 15.5px;
  color: #16324f;
  line-height: 1.6;
  margin: 0 0 var(--ef-space-4);
  max-width: 440px;
}

.ef-gift-feature-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--ef-accent), #ffce00);
  color: #16324f;
  font-weight: 800;
  font-size: 14.5px;
  padding: 14px 26px;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ef-gift-feature-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .24); }
.ef-gift-feature-cta .ef-icon { width: 18px; height: 18px; }

/* ── Demo animado en vivo: "tipea" los mismos 4 ejemplos reales del buscador
   de regalos, uno por uno, muestra el estado "pensando" con el ícono del
   agente girando, y hace aparecer tarjetas abstractas en cascada — todo el
   bloque es un solo <a> clickeable que lleva al buscador real con ese mismo
   contexto ya cargado (?ctx=, ver gift-finder.js). Reemplaza la comparación
   de texto anterior: mucho más visual, mucho menos para leer. */
.ef-gift-feature-demo {
  position: relative;
  z-index: 1;
  display: block;
  background: #fff;
  border-radius: 20px;
  padding: var(--ef-space-4);
  text-decoration: none;
  color: var(--ef-text);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .14);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ef-gift-feature-demo:hover { transform: translateY(-3px); box-shadow: 0 26px 54px rgba(0, 0, 0, .18); }
/* Avatar del bot — "el agente" pedido, ahora con cara además del ícono
   girando del estado "pensando" — sobresale del borde superior de la
   tarjeta, como el avatar de un chat, con un bobbing sutil para que se
   sienta despierto sin ser invasivo. */
.ef-gift-feature-demo-bot {
  position: absolute;
  top: -16px;
  left: var(--ef-space-4);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ef-ml-blue), var(--ef-ml-blue-dark));
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(52, 131, 250, .4);
  z-index: 2;
  animation: ef-bot-bob 2.4s ease-in-out infinite;
}
.ef-gift-feature-demo-bot .ef-icon { width: 20px; height: 20px; }
@keyframes ef-bot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ef-gift-feature-demo-bot { animation: none; } }
.ef-gift-feature-demo-input {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Reserva altura para 2 líneas siempre (el ejemplo más largo, "Mi pareja,
     fan del fitness y el café de especialidad", llega a ocupar 2) — así la
     caja nunca cambia de tamaño entre un ejemplo corto y uno largo, y todo
     lo que va abajo (estado "pensando", tarjetas) no da el salto/rebote que
     daba antes con solo 1 línea reservada. box-sizing:border-box es global
     acá, así que el min-height tiene que incluir el padding (28px) además
     de las 2 líneas de texto (~38px) — no solo el contenido. */
  min-height: 66px;
  margin-top: 10px;
  background: #f4f6fb;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.ef-gift-feature-demo-input .ef-icon { width: 17px; height: 17px; color: var(--ef-ml-blue); flex-shrink: 0; }
.ef-gift-feature-demo-cursor {
  display: inline-block;
  width: 2px;
  height: 15px;
  margin-left: 1px;
  background: var(--ef-ml-blue);
  vertical-align: -3px;
  animation: ef-cursor-blink .9s step-end infinite;
}
@keyframes ef-cursor-blink { 50% { opacity: 0; } }

.ef-gift-feature-demo-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--ef-space-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--ef-text-muted);
}
.ef-gift-feature-demo-agent {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ef-gift-feature-demo-agent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--ef-ml-blue), var(--ef-accent), var(--ef-ml-green), var(--ef-ml-blue));
  animation: ef-agent-spin 1s linear infinite;
}
.ef-gift-feature-demo-agent::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: #fff; }
@keyframes ef-agent-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ef-gift-feature-demo-agent::before { animation: none; } }

.ef-gift-feature-demo-cards { display: flex; gap: 10px; margin-top: var(--ef-space-3); }
.ef-gift-feature-demo-card {
  flex: 1;
  aspect-ratio: 1 / 1.05;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff, #e3f2ff);
  opacity: 0;
  transform: scale(.85);
}
.ef-gift-feature-demo-cards.is-visible .ef-gift-feature-demo-card { animation: ef-card-pop .45s ease forwards; }
.ef-gift-feature-demo-cards.is-visible .ef-gift-feature-demo-card:nth-child(2) { animation-delay: .12s; }
.ef-gift-feature-demo-cards.is-visible .ef-gift-feature-demo-card:nth-child(3) { animation-delay: .24s; }
@keyframes ef-card-pop { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ef-gift-feature-demo-card { opacity: 1; transform: scale(1); animation: none !important; }
}

.ef-gift-feature-demo-hint {
  display: block;
  margin-top: var(--ef-space-3);
  font-size: 14px;
  font-weight: 700;
  color: var(--ef-ml-blue);
}

@media (max-width: 860px) {
  .ef-gift-feature-inner { grid-template-columns: 1fr; padding: var(--ef-space-5) var(--ef-space-4); }
  .ef-gift-feature-float { display: none; }
}

/* ── CTA de cierre ────────────────────────────────────────────────────── */
/* Banda de ancho completo (mismo tratamiento que el hero) para que no quede
   como un botón perdido entre el blog y el footer — es la última chance de
   convertir a alguien que llegó hasta el final sin buscar nada todavía. */
.ef-closing {
  position: relative;
  overflow: hidden;
  margin: var(--ef-space-6) 0 0;
  padding: var(--ef-space-6) var(--ef-space-4);
  background: var(--ef-surface);
  border-top: 1px solid var(--ef-border);
}
.ef-closing-blobs {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(52, 131, 250, 0.10), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 230, 0, 0.16), transparent 45%);
  filter: blur(30px);
}
.ef-closing-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.ef-closing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ef-accent), #fff59d);
  color: var(--ef-text);
  margin-bottom: var(--ef-space-3);
}
.ef-closing h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin: 0 0 var(--ef-space-2); }
.ef-closing p { color: var(--ef-text-muted); margin: 0 0 var(--ef-space-4); }

.ef-closing-search { position: relative; display: flex; gap: 0; max-width: 480px; margin: 0 auto; }
.ef-closing-search input {
  flex: 1;
  border: 1px solid var(--ef-border);
  border-right: none;
  border-radius: 999px 0 0 999px;
  padding: 13px 18px;
  font-size: 15px;
  font-family: inherit;
  min-width: 0;
  transition: border-color .2s ease;
}
.ef-closing-search input:focus { outline: none; border-color: var(--ef-ml-blue); }
.ef-closing-search button[type="submit"] {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 0 999px 999px 0;
  background: var(--ef-ml-blue);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 0 22px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ef-closing-search button[type="submit"]:hover { background: var(--ef-ml-blue-dark); transform: translateY(-1px); }

@media (max-width: 480px) {
  .ef-closing-search { flex-direction: column; }
  .ef-closing-search input { border-right: 1px solid var(--ef-border); border-radius: 999px; margin-bottom: var(--ef-space-2); }
  .ef-closing-search button[type="submit"] { border-radius: 999px; justify-content: center; padding: 13px 22px; }
}

/* ── Chips de categorías (usado por "Últimas guías", que reusa esta clase
   de wrapper de sección) ─────────────────────────────────────────────── */
.ef-chips-section { max-width: var(--ef-max-width); margin: 0 auto var(--ef-space-6); padding: 0 var(--ef-space-4); }
.ef-chips-section h2 { font-size: 18px; margin-bottom: var(--ef-space-3); }
.ef-home-guides .ef-section-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin: 0; }
.ef-chips { display: flex; gap: var(--ef-space-2); flex-wrap: wrap; }
.ef-chip {
  display: inline-block;
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ef-text);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ef-chip:hover { border-color: var(--ef-ml-blue); background: #f5f9ff; transform: translateY(-1px); }

/* ── Categorías: tiles con ícono en círculo ───────────────────────────── */
.ef-cat-section { max-width: var(--ef-max-width); margin: 0 auto var(--ef-space-6); padding: 0 var(--ef-space-4); }
.ef-cat-section h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin-bottom: var(--ef-space-4); }
.ef-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--ef-space-3);
}
.ef-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ef-text);
  padding: var(--ef-space-3) var(--ef-space-2);
  border-radius: var(--ef-radius);
  transition: transform .2s ease, background .2s ease;
}
.ef-cat-tile-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff9db, #eef4fb);
  font-size: 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ef-cat-tile-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--ef-ml-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  white-space: nowrap;
}
.ef-cat-tile-label { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.3; }
.ef-cat-tile:hover { background: #fafafa; transform: translateY(-3px); }
.ef-cat-tile:hover .ef-cat-tile-icon { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.1); }

/* ── Encabezado de página genérico (Sobre nosotros, Privacidad, etc.) ────
   Antes estas páginas arrancaban directo con un <h1> sobre fondo blanco,
   sin ninguna separación del header — se sentían como un documento pegado,
   no como parte del sitio. Una banda liviana + miga de pan les da lugar. */
.ef-page-header {
  background: var(--ef-surface);
  border-bottom: 1px solid var(--ef-border);
  padding: var(--ef-space-5) var(--ef-space-4) var(--ef-space-4);
}
.ef-page-header-inner { max-width: 820px; margin: 0 auto; }
.ef-breadcrumb { font-size: 14px; color: var(--ef-text-muted); margin-bottom: var(--ef-space-2); }
.ef-breadcrumb a { display: inline-block; min-width: 44px; padding: 12px 0; color: inherit; text-decoration: none; }
.ef-breadcrumb a:hover { color: var(--ef-ml-blue); }
.ef-breadcrumb span { margin: 0 6px; }
.ef-page-header h1 { font-size: 28px; font-weight: 800; margin: 0; }
.ef-single-date { display: inline-block; margin-top: var(--ef-space-2); font-size: 14px; color: var(--ef-text-muted); }

/* ── Nota individual (guía) ───────────────────────────────────────────── */
.ef-single-featured-img {
  max-width: 820px;
  margin: 0 auto var(--ef-space-5);
  border-radius: var(--ef-radius);
  overflow: hidden;
  box-shadow: var(--ef-shadow);
}
.ef-single-featured-img img { width: 100%; height: auto; display: block; }
.ef-single-more { margin: var(--ef-space-6) 0 0; }
.ef-single-more h2 { font-size: 20px; margin-bottom: var(--ef-space-3); }

/* ── Formulario de contacto ───────────────────────────────────────────── */
.ef-contact-form { max-width: 560px; margin-top: var(--ef-space-4); }
.ef-contact-row { margin-bottom: var(--ef-space-3); display: flex; flex-direction: column; gap: 6px; }
.ef-contact-row label { font-weight: 600; font-size: 15px; }
.ef-contact-row input,
.ef-contact-row textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s ease;
}
.ef-contact-row input:focus,
.ef-contact-row textarea:focus { outline: none; border-color: var(--ef-ml-blue); }
.ef-contact-row textarea { resize: vertical; }
.ef-contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ef-contact-form button {
  padding: 13px 28px;
  background: var(--ef-ml-blue);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ef-contact-form button:hover:not(:disabled) { background: var(--ef-ml-blue-dark); transform: translateY(-1px); }
.ef-contact-form button:disabled { opacity: .6; cursor: default; }
#ef-contact-status { margin-top: var(--ef-space-3); font-size: 14px; font-weight: 600; }
#ef-contact-status.is-success { color: var(--ef-ml-green); }
#ef-contact-status.is-error { color: var(--ef-ml-red); }

/* ── Tendencias reales (relleno honesto mientras la vidriera de productos
   no tiene datos — ver nota en front-page.php) ────────────────────────── */
.ef-trending-keywords {
  max-width: var(--ef-max-width);
  margin: 0 auto var(--ef-space-6);
  padding: 0 var(--ef-space-4);
}
.ef-trending-keywords h2 { font-size: 18px; margin-bottom: var(--ef-space-3); }
/* Variante para cuando va DENTRO de una columna de grid (buscador de
   regalos) en vez de ser su propia sección de ancho completo — sin el
   max-width/padding/margin pensados para eso, que ahí solo desalinean. */
.ef-trending-keywords-inline { max-width: none; margin: 0; padding: 0; }
.ef-trending-note { margin: var(--ef-space-3) 0 0; font-size: 14px; color: var(--ef-text-muted); }

/* ── Banner de cookies — se guarda la aceptación en localStorage, no
   vuelve a aparecer una vez aceptado (ver reveal.js). */
.ef-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ef-space-4);
  flex-wrap: wrap;
  background: var(--ef-surface);
  color: var(--ef-text);
  border-top: 1px solid var(--ef-border);
  padding: var(--ef-space-3) var(--ef-space-4);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  transform: translateY(0);
  transition: transform .3s ease;
}
.ef-cookie-banner[hidden] { display: none; }
.ef-cookie-banner.is-hiding { transform: translateY(110%); }
.ef-cookie-banner p { margin: 0; font-size: 14px; max-width: 720px; color: var(--ef-text-muted); }
.ef-cookie-banner a { color: var(--ef-ml-blue); text-decoration: underline; }
.ef-cookie-banner .ef-btn-primary { flex-shrink: 0; min-height: 44px; padding: 9px 20px; font-size: 14px; }

/* ── Autocompletado del buscador — sugerencias reales (búsquedas de otras
   personas + categorías reales), nunca inventadas. Funciona en cualquier
   <form> que apunte a /buscar-productos/ (ver reveal.js), por eso el
   selector es genérico y no atado a una sección puntual del sitio. */
.abot-suggest-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  border: 1px solid var(--ef-border);
  overflow: hidden;
  z-index: 50;
  text-align: left;
}
.abot-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--ef-text);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.abot-suggest-item:hover, .abot-suggest-item.is-active {
  background: #f5f9ff;
  color: var(--ef-ml-blue);
}
.abot-suggest-item svg { flex-shrink: 0; color: var(--ef-text-muted); width: 15px; height: 15px; }

/* ── FAQ teaser en el home (versión corta, con link a la página completa) ── */
.ef-home-faq {
  max-width: var(--ef-max-width);
  margin: 0 auto var(--ef-space-6);
  padding: 0 var(--ef-space-4);
  text-align: center;
}
.ef-home-faq h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin-bottom: var(--ef-space-4); }
.ef-home-faq .ef-faq-list { text-align: left; }
.ef-home-faq-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--ef-space-4);
  font-size: 14px;
  font-weight: 700;
  color: var(--ef-ml-blue);
  text-decoration: none;
}
.ef-home-faq-more:hover { text-decoration: underline; }

/* ── FAQ: acordeón ────────────────────────────────────────────────────── */
.ef-faq-group-title {
  max-width: 720px;
  margin: 0 auto var(--ef-space-3);
  font-size: 15px;
  font-weight: 800;
  color: var(--ef-ml-blue);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ef-faq-list + .ef-faq-group-title { margin-top: var(--ef-space-6); }
.ef-faq-list { max-width: 720px; margin: 0 auto; }
.ef-faq-item { border-bottom: 1px solid var(--ef-border); }
.ef-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ef-space-3);
  width: 100%;
  background: none;
  border: none;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ef-text);
  text-align: left;
  cursor: pointer;
}
.ef-faq-chevron { flex-shrink: 0; color: var(--ef-text-muted); transition: transform .3s ease; }
.ef-faq-item.is-open .ef-faq-chevron { transform: rotate(180deg); color: var(--ef-ml-blue); }

/* grid-template-rows 0fr → 1fr anima a "altura automática" sin necesitar
   JS midiendo pixeles — soportado en navegadores modernos. */
.ef-faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ef-faq-item.is-open .ef-faq-a-wrap { grid-template-rows: 1fr; }
.ef-faq-a-inner { overflow: hidden; }
.ef-faq-a { color: var(--ef-text-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.ef-faq-a a { color: var(--ef-ml-blue); text-decoration: none; }
.ef-faq-a a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .ef-faq-a-wrap, .ef-faq-chevron { transition: none; }
}

/* ── Ítems de guía (producto + comentario editorial) ─────────────────────
   Usado dentro del contenido de las guías generadas por ABot_Guides — cada
   producto real va con su tarjeta + el comentario que escribió la IA sobre
   ESE producto puntual, no una lista de tarjetas sueltas sin contexto. */
.ef-guide-list { display: flex; flex-direction: column; gap: var(--ef-space-5); margin: var(--ef-space-4) 0; }
.ef-guide-item {
  display: flex;
  gap: var(--ef-space-4);
  align-items: center;
  padding-bottom: var(--ef-space-5);
  border-bottom: 1px solid var(--ef-border);
}
.ef-guide-item:last-child { border-bottom: none; padding-bottom: 0; }
.ef-guide-item-card { flex: 0 0 200px; }
.ef-guide-item-card .abot-pcard { height: 100%; }
.ef-guide-item-text { flex: 1; min-width: 0; }
.ef-guide-item-text h2 { margin-top: 0 !important; font-size: 19px; }
.ef-guide-item-text p { color: var(--ef-text-muted); }

@media (max-width: 640px) {
  .ef-guide-item { flex-direction: column; }
  .ef-guide-item-card { flex: 0 0 auto; width: 100%; max-width: 240px; }
}

/* ── Contenido de página ──────────────────────────────────────────────── */
.ef-page { max-width: 820px; margin: 0 auto; padding: var(--ef-space-6) var(--ef-space-4); }
.ef-page.ef-page-wide { max-width: var(--ef-max-width); }

/* ── Ofertas del día: un top 10 real por rubro ───────────────────────────
   Reusa .abot-pgrid/abot-pcard (mismo componente del buscador y la vidriera)
   para que la tarjeta se vea igual en todo el sitio — lo único nuevo es el
   numerito de ranking, inyectado vía el $extra_badge de
   abot_render_product_card() en vez de duplicar el componente. */
.ef-offer-section { margin-bottom: var(--ef-space-6); }
.ef-offer-section h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--ef-space-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ef-rank-badge {
  position: absolute;
  top: 8px;
  right: 8px; /* la izquierda es del badge de descuento */
  background: rgba(26, 26, 26, .78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
}
/* Barra de rubros de /ofertas-del-dia/: fija debajo del header, salta a cada top 10 */
.ef-offer-jump {
  position: sticky;
  top: var(--ef-header-h, 0px);
  z-index: 20;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 calc(var(--ef-space-3) * -1) var(--ef-space-4);
  padding: 10px var(--ef-space-3);
  background: rgba(250, 249, 247, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  scrollbar-width: none;
}
.ef-offer-jump::-webkit-scrollbar { display: none; }
.ef-offer-jump a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--ef-border);
  background: #fff;
  color: var(--ef-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.ef-offer-jump a:hover { border-color: var(--ef-ml-blue); transform: translateY(-1px); }
.ef-offer-section { scroll-margin-top: calc(var(--ef-header-h, 0px) + 80px); }

.ef-deals-empty {
  max-width: 480px;
  margin: var(--ef-space-6) auto;
  text-align: center;
}

/* ── /mas-vendidos/ — tabs semana/mes + badge de unidades vendidas reales
   (delta entre dos fotos de sold_quantity, ver ABot_DB::get_top_sellers()). */
.ef-topsellers-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--ef-space-5);
  border-bottom: 1px solid var(--ef-border);
}
.ef-topsellers-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-bottom: -1px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ef-text-muted);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.ef-topsellers-tab:hover { color: var(--ef-text); }
.ef-topsellers-tab.is-active { color: var(--ef-ml-blue); border-bottom-color: var(--ef-ml-blue); }
.ef-topsellers-panel { display: none; }
.ef-topsellers-panel.is-active { display: block; }
.ef-topsellers-delta {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ef-ml-green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.ef-deals-empty-icon { font-size: 40px; display: block; margin-bottom: var(--ef-space-3); }
.ef-deals-empty h2 { font-size: 20px; margin-bottom: var(--ef-space-2); }
.ef-deals-empty p { color: var(--ef-text-muted); margin-bottom: var(--ef-space-4); }
.ef-page h1 { font-size: 32px; font-weight: 800; margin-bottom: var(--ef-space-4); }
.ef-single-featured-credit { display: block; font-size: 13px; color: var(--ef-text-muted); margin-top: 6px; }
.ef-entry-content h2 { font-size: 22px; margin-top: var(--ef-space-5); margin-bottom: var(--ef-space-2); }
.ef-entry-content h3 { font-size: 17px; margin-top: var(--ef-space-4); margin-bottom: var(--ef-space-2); }
.ef-entry-content p { margin-bottom: var(--ef-space-3); }
.ef-entry-content ul, .ef-entry-content ol { margin: 0 0 var(--ef-space-3); padding-left: 22px; }
.ef-entry-content li { margin-bottom: 8px; line-height: 1.6; }
.ef-entry-content a { color: var(--ef-ml-blue); text-decoration: underline; text-underline-offset: 2px; }
.ef-entry-content a:hover { text-decoration: underline; }
.ef-entry-content table { width: 100%; border-collapse: collapse; margin: var(--ef-space-4) 0; }
.ef-entry-content th, .ef-entry-content td { border: 1px solid var(--ef-border); padding: 10px 12px; text-align: left; font-size: 14px; }
/* Mobile: cada fila se apila como tarjeta; la etiqueta sale de data-label en cada td. */
@media (max-width: 600px) {
  .ef-entry-content table:has(td[data-label]) thead { display: none; }
  .ef-entry-content table:has(td[data-label]),
  .ef-entry-content table:has(td[data-label]) tbody,
  .ef-entry-content table:has(td[data-label]) tr,
  .ef-entry-content table:has(td[data-label]) td { display: block; width: 100%; }
  .ef-entry-content table:has(td[data-label]) tr { border: 1px solid var(--ef-border); border-radius: var(--ef-radius); margin-bottom: var(--ef-space-2); overflow: hidden; }
  .ef-entry-content table:has(td[data-label]) td { border: 0; border-bottom: 1px solid var(--ef-border); }
  .ef-entry-content table:has(td[data-label]) td:last-child { border-bottom: 0; }
  .ef-entry-content td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--ef-text-muted, #666); margin-bottom: 2px; }
}
.ef-entry-content th { background: #f7f7f5; }
.ef-entry-content blockquote {
  border-left: 3px solid var(--ef-accent);
  margin: var(--ef-space-4) 0;
  padding: var(--ef-space-2) var(--ef-space-4);
  color: var(--ef-text-muted);
  background: var(--ef-surface);
  border-radius: 0 8px 8px 0;
}

/* ── Grilla de blog ───────────────────────────────────────────────────── */
.ef-page-header-sub { color: var(--ef-text-muted); font-size: 15px; margin: var(--ef-space-1) 0 0; }

/* ── Filtros y buscador de Guías ──────────────────────────────────────── */
.ef-guide-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ef-space-3);
  margin-bottom: var(--ef-space-4);
}
.ef-guide-search {
  display: flex;
  align-items: center;
  max-width: 320px;
  flex: 1 1 260px;
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: 999px;
  box-shadow: var(--ef-shadow);
}
.ef-guide-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  height: 44px;
  padding: 0 4px 0 18px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ef-text);
}
.ef-guide-search input:focus { outline: none; }
.ef-guide-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 3px;
  border: none;
  border-radius: 50%;
  background: var(--ef-ml-blue);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.ef-guide-search button svg { width: 16px; height: 16px; }
.ef-guide-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ef-guide-cat-pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ef-border);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ef-text-muted);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ef-guide-cat-pill:hover { border-color: var(--ef-ml-blue); color: var(--ef-ml-blue); }
.ef-guide-cat-pill.is-active { background: var(--ef-ml-blue); border-color: var(--ef-ml-blue); color: #fff; }

.ef-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ef-space-4); }
.ef-post-card {
  display: block;
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ef-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ef-post-card:hover { box-shadow: var(--ef-shadow-hover); transform: translateY(-3px); }
.ef-post-card-media { aspect-ratio: 16 / 10; background: #f7f7f8; overflow: hidden; }
.ef-post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ef-post-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fff9db, #eef4fb);
}
.ef-post-card-placeholder .ef-icon { width: 34px; height: 34px; color: var(--ef-ml-blue); opacity: .55; }
.ef-post-card-body { padding: var(--ef-space-4); }
.ef-post-card-date { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ef-ml-blue); }
.ef-post-card h2, .ef-post-card h3 { font-size: 17px; margin: var(--ef-space-1) 0 var(--ef-space-2); }
.ef-post-card p { font-size: 14px; color: var(--ef-text-muted); margin: 0 0 var(--ef-space-2); }
.ef-post-card-cta { font-size: 14px; font-weight: 700; color: var(--ef-text); }
.ef-post-card:hover .ef-post-card-cta { color: var(--ef-ml-blue); }

.ef-pagination { display: flex; gap: var(--ef-space-2); margin-top: var(--ef-space-5); }
.ef-pagination a, .ef-pagination span {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--ef-border);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.ef-pagination .current { background: var(--ef-accent); border-color: var(--ef-accent); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.ef-footer {
  border-top: 1px solid var(--ef-border);
  margin-top: var(--ef-space-6);
  padding: var(--ef-space-5) var(--ef-space-4);
  background: var(--ef-surface);
}
.ef-footer-inner { max-width: var(--ef-max-width); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ef-space-3); }
.ef-footer-logo { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; }
.ef-disclosure { font-size: 14px; color: var(--ef-text-muted); line-height: 1.6; max-width: 720px; }
.ef-footer-links { display: flex; gap: var(--ef-space-1) var(--ef-space-4); flex-wrap: wrap; font-size: 15px; }
.ef-footer-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.ef-footer-links a { text-decoration: none; color: var(--ef-text-muted); }
.ef-footer-links a:hover { color: var(--ef-text); }
.ef-footer-links-legal { font-size: 14px; gap: 0 var(--ef-space-3); }
.ef-copyright { font-size: 14px; color: #595959; }

/* ── Amigo invisible (page-amigo-invisible.php) ─────────────────────────
   Hero de noche como el del home, con brillos rojo y amarillo de regalo.
   La app (plugin: assets/secret-santa.css) va sobre fondo claro. */
.ef-si-hero {
  background: #0b1430;
  color: #fff;
  --ef-text-muted: #c9d1e6;
}
.ef-si-hero .ef-hero-blobs {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(214, 50, 74, .45), transparent),
    radial-gradient(closest-side at 80% 25%, rgba(255, 214, 0, .28), transparent),
    radial-gradient(closest-side at 60% 90%, rgba(52, 131, 250, .45), transparent);
  filter: blur(50px);
}
.ef-si-hero .ef-search-hero-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.ef-si-hero .ef-search-hero-badge .ef-icon { color: #ffe600; }
.ef-si-hero h1 { color: #fff; }
.ef-si-hero .ef-gift-steps { color: #e3e8f4; }
.ef-si-hero .ef-gift-steps b { background: #ffe600; color: #1a1a1a; }
.ef-si-section { padding: var(--ef-space-5) var(--ef-space-3) var(--ef-space-6); background: #f6f7fb; }
.ef-si-section + .ef-gift-results-section { background: #f6f7fb; }
.ef-si-gift-engine { display: none !important; }
/* Con un link (grupo, personal, organizador) la franja del hero sobra: la
   tarjeta de la app ya muestra el grupo. El h1 sigue para lectores de pantalla. */
.ef-si-hero.is-compact { padding: 0; }
.ef-si-hero.is-compact .ef-hero-blobs { display: none; }

/* ---------- Home: promo Amigo invisible (temporada) ----------
   Banda verde fiestas entre el hero oscuro y las ofertas claras: alterna
   paleta y destaca sin competir con el amarillo de los CTA de compra. */
.ef-si-promo {
  max-width: var(--ef-max-width);
  margin: var(--ef-space-6) auto;
  padding: 0 var(--ef-space-4);
}
.ef-si-promo-inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--ef-space-5);
  align-items: center;
  padding: var(--ef-space-6) var(--ef-space-5);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 230, 0, .22), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(232, 59, 59, .28), transparent 45%),
    linear-gradient(135deg, #0b3d2a 0%, #0f5a3c 60%, #127048 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(11, 61, 42, .22);
}
.ef-si-promo-confetti { position: absolute; inset: 0; pointer-events: none; }
.ef-si-promo-confetti i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ef-accent);
  opacity: .8;
  animation: ef-float 6s ease-in-out infinite;
}
.ef-si-promo-confetti i:nth-child(1) { top: 14%; left: 48%; --r: 20deg; }
.ef-si-promo-confetti i:nth-child(2) { top: 72%; left: 4%; background: #ff8a8a; --r: -15deg; animation-delay: -2s; }
.ef-si-promo-confetti i:nth-child(3) { bottom: 10%; left: 52%; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation-delay: -4s; }
.ef-si-promo-confetti i:nth-child(4) { top: 8%; right: 30%; width: 6px; height: 14px; background: #ff8a8a; --r: 30deg; animation-delay: -1s; }
.ef-si-promo-confetti i:nth-child(5) { bottom: 16%; right: 4%; width: 8px; height: 8px; border-radius: 50%; animation-delay: -3s; }
.ef-si-promo-confetti i:nth-child(6) { top: 88%; left: 30%; width: 6px; height: 6px; background: #fff; animation-delay: -5s; }
@media (prefers-reduced-motion: reduce) { .ef-si-promo-confetti i { animation: none; } }

.ef-si-promo-copy { position: relative; z-index: 1; }
.ef-si-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin-bottom: var(--ef-space-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
  font-weight: 800;
}
.ef-si-promo-badge .ef-icon { width: 14px; height: 14px; color: var(--ef-accent); }
.ef-si-promo-copy h2 {
  margin: 0 0 var(--ef-space-3);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}
.ef-si-promo-copy h2 span { color: var(--ef-accent); }
.ef-si-promo-copy > p {
  max-width: 460px;
  margin: 0 0 var(--ef-space-4);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
.ef-si-promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ef-space-3); }
.ef-si-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ef-space-2);
  min-height: 48px;
  padding: 0 var(--ef-space-4);
  border-radius: 999px;
  background: var(--ef-accent);
  color: #1a1a1a;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(255, 230, 0, .25);
  transition: all .2s ease;
}
.ef-si-promo-cta .ef-icon { width: 18px; height: 18px; }
.ef-si-promo-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 230, 0, .35); }
.ef-si-promo-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ef-si-promo-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
}
.ef-si-promo-note .ef-icon { width: 16px; height: 16px; color: var(--ef-accent); }

.ef-si-promo-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: var(--ef-space-3);
  display: grid;
  gap: var(--ef-space-2);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.ef-si-promo-steps li {
  display: flex;
  align-items: center;
  gap: var(--ef-space-3);
  padding: 12px var(--ef-space-3);
  border-radius: 14px;
  background: #fff;
  color: var(--ef-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  transition: all .2s ease;
}
.ef-si-promo-steps li:hover { transform: translateX(4px); }
.ef-si-promo-steps li > span {
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0f5a3c;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.ef-si-promo-steps b { display: block; font-size: 15px; line-height: 1.3; }
.ef-si-promo-steps small { display: block; font-size: 14px; color: var(--ef-text-muted); line-height: 1.4; }

@media (max-width: 860px) {
  .ef-si-promo-inner { grid-template-columns: 1fr; padding: var(--ef-space-5) var(--ef-space-4); }
}
@media (max-width: 600px) {
  .ef-si-promo { margin: var(--ef-space-5) auto; padding: 0 var(--ef-space-3); }
  .ef-si-promo-inner { border-radius: 20px; padding: var(--ef-space-5) var(--ef-space-3); }
  .ef-si-promo-cta { width: 100%; justify-content: center; }
  .ef-si-promo-confetti i:nth-child(1), .ef-si-promo-confetti i:nth-child(4) { display: none; }
}