/* Yania's SHOP — hoja de estilo unica.
   Formato tipo Trading Academy pero en vino oscuro: fondo profundo, titular
   gigante en degradado, menu con iconos y boton flotante. */

/* ─────────────────────── Degradado que CAMBIA DE COLOR ───────────────────
   Primero se probo mezclando dos paletas con @property. Cambiaba de color,
   si, pero a mitad de camino los colores se promedian y todo se volvia un
   morado sucio: el titular perdia fuerza justo la mitad del tiempo.

   Esto funciona mejor: los colores se quedan SIEMPRE a tope de intensidad y
   lo que se mueve es el degradado por encima de las letras. Cada letra va
   pasando por rosa, naranja, dorado, violeta y cian, que es el efecto que se
   buscaba, pero sin un solo instante apagado.

   El ciclo dura 10 s: 5 s de recorrido y 5 s de descanso. Como el primer
   color se repite al final, el punto de llegada es identico al de salida y
   el salto al volver a empezar no se ve. */
/* ══════════════════════════════════════════════════════════════════════
   El destello del titular — copiado del mecanismo de Trading Academy.

   Lo importante es que el titulo NO esta multicolor todo el rato. Esta en
   reposo con los colores de la casa (vino -> morado -> azul) y cada cierto
   tiempo le CRUZA UNA BANDA de colores encendidos, como un brillo que pasa
   por encima de las letras y se va.

   Eso es lo que le da vida: el contraste entre el reposo y el destello. Un
   degradado multicolor permanente cansa la vista y deja de llamar la
   atencion a los diez segundos.

   El degradado mide el TRIPLE de ancho (background-size: 300%) y esta
   dividido en tres tercios:
     · tercio izquierdo  = colores de la casa   -> lo que se ve en reposo
     · tercio central    = la banda encendida   -> cruza en el destello
     · tercio derecho    = colores de la casa   -> reposo otra vez

   Ciclo de 11 s:  3 s quieto · 5 s de destello · 3 s quieto.
   (3/11 = 27.27 %   ·   8/11 = 72.73 %)
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes destello {
  0%, 27.27% {                     /* 3 s en reposo */
    background-position: 0% 50%;
    filter: none;
  }
  50% {                            /* pico: mitad del recorrido */
    background-position: 50% 50%;
    filter: saturate(2) brightness(1.45)
            drop-shadow(0 0 16px rgba(109, 40, 217, .5));
  }
  72.73%, 100% {                   /* 3 s en reposo */
    background-position: 100% 50%;
    filter: none;
  }
}

/* Los colores de la casa en los extremos y la banda encendida en el centro.
   La banda es la misma de Trading: rosa, ambar, amarillo, verde, cian, azul
   y añil. Lineal a proposito: con suavizado acelera en medio y el destello
   se siente atropellado. */
.destella {
  background-image: linear-gradient(90deg,
    #A8103A 0%, #6D28D9 20%, #2557E8 33.33%,
    #f472b6 38%, #f59e0b 43%, #facc15 48%, #34d399 52%,
    #22d3ee 57%, #38bdf8 61%, #6366f1 64.66%,
    #A8103A 66.66%, #6D28D9 84%, #2557E8 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: destello 11s linear infinite;
}

/* Lo que no es texto (botones, sellos, iconos) lleva el mismo ciclo pero
   sin recortar a las letras: ahi el destello se ve como un brillo que
   cruza la pieza. */
.destella-fondo {
  background-image: linear-gradient(120deg,
    #A8103A 0%, #6D28D9 20%, #2557E8 33.33%,
    #f472b6 38%, #f59e0b 43%, #facc15 48%, #34d399 52%,
    #22d3ee 57%, #38bdf8 61%, #6366f1 64.66%,
    #A8103A 66.66%, #6D28D9 84%, #2557E8 100%);
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
}

/* A quien tenga activado "reducir movimiento" se le queda quieto: hay gente
   a la que el movimiento le marea de verdad. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-name: none !important; }
}

:root {
  /* La marca sigue siendo vino → azul marino, como se pidio. Sobre fondo
     oscuro esos dos tonos se apagan, asi que cada uno tiene ademas una
     version encendida para el texto y los detalles. */
  --vino: #722F37;
  --vino-luz: #E84478;
  --azul: #0A1F44;
  --azul-luz: #6A8CFF;
  --lila: #9B57F5;

  /* Los degradados leen los colores animados de arriba, asi que cambian
     solos. El primero se repite al final para que el degradado empalme
     consigo mismo y no se vea un corte en los bordes. */
  /* Vino intenso, morado intenso y azul: los tres profundos y de la misma
     familia oscura, asi que el degradado se lee como un solo color con
     temperatura, no como franjas distintas.

     Van un punto mas encendidos de lo que serian sobre papel blanco: sobre
     un fondo casi negro un vino apagado se hunde y no se lee. El primero se
     repite al final para que el bucle empalme sin corte visible. */
  /* Reposo (colores de la casa) en los extremos y la banda encendida en el
     centro. Es el reparto que usa Trading. */
  --banda:
    #A8103A 0%, #6D28D9 20%, #2557E8 33.33%,
    #f472b6 38%, #f59e0b 43%, #facc15 48%, #34d399 52%,
    #22d3ee 57%, #38bdf8 61%, #6366f1 64.66%,
    #A8103A 66.66%, #6D28D9 84%, #2557E8 100%;
  --colores:
    #A8103A 0%,     /* vino intenso, el color de la casa */
    #B4144A 18%,    /* se le da doble parada para que ocupe y se reconozca:
                       con una sola quedaba como un destello y el titular
                       salia morado de punta a punta */
    #6D28D9 52%,    /* morado intenso */
    #2557E8 82%,    /* azul */
    #A8103A 100%;   /* vuelta al vino: asi el bucle empalma sin corte */
  --degradado: linear-gradient(120deg, var(--colores));
  --degradado-vivo: linear-gradient(120deg, var(--colores));
  --degradado-texto: linear-gradient(100deg, var(--colores));

  /* ── PALETA OSCURA (la de casa, la que sale por defecto) ──────────── */
  --fondo: #150609;
  --fondo-2: #1D0A11;
  --panel: #22101A;
  --panel-alto: #2B1621;
  --cabecera: rgba(21, 6, 9, .84);
  --pie: #100407;
  --campo: rgba(255, 255, 255, .04);
  --campo-activo: rgba(255, 255, 255, .07);
  --suave: rgba(255, 255, 255, .06);
  --suave-alto: rgba(255, 255, 255, .11);
  --linea: rgba(255, 255, 255, .09);
  --linea-viva: rgba(123, 44, 232, .42);
  --tinta: #F6EBEE;
  --tinta-suave: #CBAAB3;
  --tenue: #9B7B86;
  --entrada: #F3C7D4;
  --vino-menu: #E23A63;

  --sombra: 0 2px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.35);
  --sombra-alta: 0 8px 24px rgba(0,0,0,.45), 0 28px 60px rgba(0,0,0,.5);
  --curva: 16px;
}

/* ── PALETA CLARA ──────────────────────────────────────────────────────
   Se activa con el boton de la cabecera. Los blancos llevan una gota de
   vino: un gris neutro al lado de este granate se ve verdoso y sucio.
   Los colores del degradado NO cambian: son la marca, y funcionan igual
   sobre blanco que sobre negro. */
[data-tema="claro"] {
  --fondo: #FFFFFF;
  --fondo-2: #FBF7F8;
  --panel: #FFFFFF;
  --panel-alto: #F4EEF0;
  --cabecera: rgba(255, 255, 255, .88);
  --pie: #1A0A10;
  --campo: #FFFFFF;
  --campo-activo: #FFFFFF;
  --suave: #F6F1F3;
  --suave-alto: #EDE5E8;
  --linea: rgba(26, 20, 24, .12);
  --linea-viva: rgba(109, 40, 217, .30);
  --tinta: #1A1418;
  --tinta-suave: #5C5158;
  --tenue: #8B8189;
  --entrada: #6B4A54;
  --vino-menu: #A8103A;
  --sombra: 0 1px 2px rgba(26,20,24,.05), 0 8px 24px rgba(26,20,24,.07);
  --sombra-alta: 0 4px 12px rgba(26,20,24,.09), 0 20px 48px rgba(26,20,24,.13);
}

/* El brillo del hero, mucho mas suave en claro: sobre blanco esas manchas
   de color se ven como suciedad. */
[data-tema="claro"] .hero::before { opacity: .35; }

/* En claro las tarjetas son blancas planas, no degradados oscuros. */
[data-tema="claro"] .ventaja,
[data-tema="claro"] .casilla,
[data-tema="claro"] .testimonio,
[data-tema="claro"] .tarjeta,
[data-tema="claro"] .paso,
[data-tema="claro"] .caja-tarifa,
[data-tema="claro"] .bloque-checkout,
[data-tema="claro"] .resumen,
[data-tema="claro"] .caja-recibo { background: var(--panel); }

[data-tema="claro"] .carrito { background: var(--panel); }
[data-tema="claro"] .sugerencias { background: var(--panel); }
[data-tema="claro"] .velo { background: rgba(26, 20, 24, .45); }
[data-tema="claro"] .contador { color: #fff; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--fondo);
  color: var(--tinta);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--vino-luz); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

/* ------------------------------------------------------------- Tipografia */
h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-weight: 700; letter-spacing: -.025em; }
h2.titulo-seccion {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); text-align: center;
  background-image: linear-gradient(90deg, var(--banda));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: destello 11s linear infinite;
}
.subtitulo-seccion {
  text-align: center; color: var(--tinta-suave); max-width: 62ch;
  margin: .8rem auto 2.8rem; font-size: 1.02rem;
}
.eyebrow {
  display: block; text-align: center; font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #C77DFF; margin-bottom: .5rem;
}

/* --------------------------------------------------------------- Botones */
.btn {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .93rem; font-weight: 600; line-height: 1;
  padding: .95rem 1.6rem; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--degradado); color: #fff; text-align: center;
  transition: transform .15s ease, box-shadow .22s ease, filter .2s ease;
  box-shadow: 0 4px 18px rgba(176,58,91,.4);
}
.btn:hover {
  transform: translateY(-2px); background: var(--degradado-vivo);
  box-shadow: 0 8px 30px rgba(199,125,255,.45);
}
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

.btn-linea {
  background: transparent; color: var(--vino-luz);
  border: 1.5px solid var(--linea-viva); box-shadow: none;
}
.btn-linea:hover { background: rgba(224,104,125,.1); border-color: var(--vino-luz); filter: none; }

.btn-suave {
  background: var(--suave); color: var(--tinta);
  border: 1px solid var(--linea); box-shadow: none;
}
.btn-suave:hover { background: var(--suave-alto); filter: none; }

.btn-ancho { width: 100%; }
.btn-chico { padding: .6rem 1rem; font-size: .82rem; }

/* ------------------------------------------------------------- Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 60;
  background: var(--cabecera); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; gap: 1.2rem; height: 74px; }

.marca { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.1rem; }
.marca-sello {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  width: 38px; height: 38px; border-radius: 11px; background: var(--degradado);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .92rem;
  box-shadow: 0 3px 12px rgba(142,58,69,.4);
}
.marca-nombre em {
  font-style: normal;
  background-image: linear-gradient(90deg, var(--banda));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: destello 11s linear infinite;
}

/* Menu con iconito delante de cada seccion, como en Trading. */
.menu { display: flex; gap: .15rem; margin-left: auto; }
/* El menu va en blanco y negrita, y la seccion en la que estas se pone en
   rojo vino. Se usa --tinta y no un blanco fijo porque en el tema claro un
   texto blanco sobre fondo blanco no se ve: --tinta es casi blanco en
   oscuro y casi negro en claro, asi el menu se lee en los dos. */
.menu a {
  display: flex; align-items: center; gap: .4rem;
  padding: .55rem .85rem; border-radius: 9px; font-size: .88rem; font-weight: 700;
  color: var(--tinta); transition: color .18s, background .18s;
}
.menu a .ic { font-size: .95rem; opacity: .9; }
.menu a:hover { color: var(--vino-menu); background: var(--suave); }
.menu a.activo { color: var(--vino-menu); background: var(--suave); }
/* El iconito toma el mismo vino cuando la seccion esta activa. */
.menu a.activo .ic { opacity: 1; }

/* La entrada de la app va marcada para que se vea entre las demas: es la
   unica del menu que no es una seccion de la tienda. */
.menu a.destacado {
  color: var(--vino-menu);
  border: 1px solid var(--linea-viva);
}
.menu a.destacado:hover { background: var(--suave); }

.acciones-cabecera { display: flex; align-items: center; gap: .5rem; }

.btn-carrito {
  position: relative; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--linea); background: var(--suave); cursor: pointer;
  display: grid; place-items: center; color: var(--tinta); font-size: 1.05rem;
  transition: border-color .18s, background .18s;
}
.btn-carrito:hover { border-color: var(--vino-luz); background: rgba(224,104,125,.12); }
.contador {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--vino-luz); color: #2A0810;
  font-size: .7rem; font-weight: 700; display: grid; place-items: center;
}
.contador[hidden] { display: none; }

.btn-icono {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 40px; padding: 0 .75rem; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--suave); color: var(--tinta);
  font-family: inherit; font-size: .95rem; transition: border-color .18s, background .18s;
}
.btn-icono span { font-size: .8rem; font-weight: 600; }
.btn-icono:hover { border-color: var(--vino-luz); background: var(--suave-alto); }
.btn-icono[hidden] { display: none; }

/* Ventana de "Descarga la app".
   Antes era una tira pegada al borde de abajo, y en el iPhone quedaba JUSTO
   debajo de la barra de Safari: se abria y no se veia, asi que parecia que
   el boton no hacia nada. Centrada y con el fondo oscurecido no hay forma
   de perderla. */
.ventana-fondo {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(6, 2, 3, .72); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 1.5rem;
}
.ventana-fondo[hidden] { display: none; }

.ventana {
  position: relative; width: min(420px, 100%);
  background: var(--panel-alto); border: 1px solid var(--linea-viva);
  border-radius: 18px; padding: 2rem 1.6rem 1.6rem; text-align: center;
  box-shadow: var(--sombra-alta);
}
.ventana-icono {
  width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 16px;
  display: grid; place-items: center; font-size: 1.8rem;
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
}
.ventana strong { display: block; font-size: 1.15rem; margin-bottom: .7rem; }
.ventana p {
  font-size: .92rem; color: var(--tinta-suave); line-height: 1.9;
  text-align: left; margin-bottom: 1.4rem;
}
.cerrar-aviso {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
  border: 0; background: none; color: var(--tenue); font-size: 1.4rem; cursor: pointer;
}
.cerrar-aviso:hover { color: var(--tinta); }

.acceso-duena {
  padding: .55rem .85rem; border-radius: 9px; font-size: .88rem; font-weight: 700;
  color: var(--tinta); transition: color .18s, background .18s;
}
.acceso-duena:hover { color: var(--vino-menu); background: var(--suave); }

.btn-menu {
  display: none; width: 44px; height: 44px; border: 1px solid var(--linea);
  background: var(--suave); border-radius: 12px; cursor: pointer; color: var(--tinta); font-size: 1.1rem;
}

/* ---------------------------------------------------------------- Inicio */
/* El resplandor de detras es lo que da profundidad al fondo oscuro. Sin el,
   el vino oscuro se ve como una mancha plana. */
.hero { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem); text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: -10% -20% auto; height: 620px; z-index: -1;
  background:
    radial-gradient(40% 44% at 22% 26%, rgba(196,30,78,.30), transparent 70%),
    radial-gradient(38% 42% at 54% 20%, rgba(123,44,232,.24), transparent 70%),
    radial-gradient(40% 44% at 80% 36%, rgba(42,92,240,.22), transparent 70%);
  filter: blur(24px); pointer-events: none;
}

.insignia {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.1rem; border-radius: 40px; margin-bottom: 1.8rem;
  border: 1px solid rgba(199,125,255,.4); background: rgba(199,125,255,.1);
  color: #E6C4FF; font-size: .84rem; font-weight: 600;
}

/* El titular entero va en degradado, las dos lineas.
   La primera arranca en rosa palo y la segunda entra a saco en rosa → lila →
   cian: asi la frase se lee como una sola cosa que va ganando color, en vez
   de una linea blanca y otra de colores sin relacion. */
/* El titular es UNA sola pieza de color, no dos lineas sueltas.
   Antes cada linea llevaba su propio degradado y la de arriba salia lavada,
   como si fuera de otro sitio. Ahora el degradado se pinta una vez sobre el
   h1 entero y las dos lineas son el mismo barrido de color: empieza rosa
   arriba a la izquierda y termina en cian abajo a la derecha.

   La clave es que el <em> ya NO tiene fondo propio; solo parte la linea. */
.hero h1 {
  font-size: clamp(2.3rem, 6.5vw, 4.4rem); margin-bottom: 1.3rem;
  background-image: linear-gradient(90deg, var(--banda));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: destello 11s linear infinite;
}
.hero h1 em { font-style: normal; display: block; }

.hero p.entrada {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--entrada);
  max-width: 58ch; margin: 0 auto 2.4rem;
}
.hero-botones { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

.ventajas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.ventaja {
  padding: 1.6rem; border: 1px solid var(--linea); border-radius: var(--curva);
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  transition: transform .2s, border-color .2s;
}
.ventaja:hover { transform: translateY(-4px); border-color: var(--linea-viva); }
.ventaja h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.ventaja p { font-size: .9rem; color: var(--tinta-suave); }
.ventaja .icono {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  width: 44px; height: 44px; border-radius: 12px; background: var(--degradado);
  display: grid; place-items: center; margin-bottom: .9rem; font-size: 1.2rem;
  box-shadow: 0 4px 16px rgba(176,58,91,.35);
}

/* ------------------------------------------------------------- Vitrina */
/* Carrusel del inicio. Casillas pequenas a proposito: es un adelanto para
   picar la curiosidad, no el catalogo. El grande esta mas abajo. */
.vitrina-seccion { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }
.vitrina-seccion[hidden] { display: none; }

.vitrina-alto {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.vitrina-titulo { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.vitrina-flechas { display: flex; gap: .5rem; }
.vitrina-flechas button {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--linea); background: var(--suave); color: var(--tinta);
  font-size: 1.3rem; line-height: 1; transition: border-color .18s, color .18s;
}
.vitrina-flechas button:hover { border-color: var(--vino-menu); color: var(--vino-menu); }

/* La ventana recorta y el carril de dentro se desliza. */
.vitrina { overflow: hidden; }
.vitrina-carril {
  display: flex; gap: 1rem;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

/* Tres a la vista en pantalla ancha. El ancho se calcula quitando los dos
   huecos, para que la tercera no quede cortada por la mitad. */
.volante {
  flex: 0 0 calc((100% - 2rem) / 3);
  display: flex; gap: .85rem; align-items: center;
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-radius: var(--curva);
  padding: .8rem; cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.volante:hover { transform: translateY(-3px); border-color: var(--linea-viva); }
.volante img, .volante .sin {
  width: 84px; height: 84px; border-radius: 11px; object-fit: cover; flex-shrink: 0;
  background: var(--panel-alto); display: grid; place-items: center; color: var(--tenue);
}
.volante-datos { min-width: 0; flex: 1; }
.volante-categoria {
  font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vino-menu); margin-bottom: .15rem;
}
.volante h4 {
  font-size: .92rem; line-height: 1.3; margin-bottom: .3rem;
  /* Dos lineas como mucho: si no, las casillas quedan de alturas distintas. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.volante-precio { font-size: 1.05rem; font-weight: 700; color: var(--vino-menu); font-variant-numeric: tabular-nums; }

.vitrina-puntos { display: flex; justify-content: center; gap: .4rem; margin-top: 1rem; }
.vitrina-puntos button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--linea); cursor: pointer; transition: width .25s, background .25s;
}
.vitrina-puntos button.activo { width: 22px; border-radius: 4px; background: var(--vino-menu); }

@media (max-width: 900px) { .volante { flex: 0 0 calc((100% - 1rem) / 2); } }
@media (max-width: 620px) { .volante { flex: 0 0 100%; } }

/* ------------------------------------------------------------- Secciones */
.seccion { padding: clamp(3rem, 7vw, 5rem) 0; }
.seccion.alterna { background: var(--fondo-2); border-block: 1px solid var(--linea); }

/* --------------------------------------------------------- Herramientas */
.herramientas { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 2.2rem; }
.campo-busqueda { position: relative; flex: 1 1 280px; max-width: 380px; }
.campo-busqueda input { padding-left: 2.6rem; }
.campo-busqueda::before {
  content: "⌕"; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--tenue); font-size: 1.3rem; pointer-events: none;
}

input, select, textarea {
  width: 100%; font-family: inherit; font-size: .95rem; color: var(--tinta);
  padding: .82rem .95rem; border: 1.5px solid var(--linea); border-radius: 11px;
  background: var(--campo); transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--vino-luz);
  background: var(--campo-activo); box-shadow: 0 0 0 3px rgba(224,104,125,.14);
}
input::placeholder, textarea::placeholder { color: var(--tenue); }
select option { background: var(--panel); color: var(--tinta); }
label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .4rem; color: var(--tinta-suave); }
.campo { margin-bottom: 1.1rem; }
.pareja { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---------------------------------------------------------- Productos */
.rejilla-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 1.5rem; }

.casilla {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-radius: var(--curva); overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s;
}
.casilla:hover {
  transform: translateY(-5px); border-color: rgba(199,125,255,.45);
  box-shadow: var(--sombra-alta), 0 0 0 1px rgba(199,125,255,.2);
}

.casilla-foto { position: relative; aspect-ratio: 1/1; background: var(--panel-alto); overflow: hidden; }
.casilla-foto img { width: 100%; height: 100%; object-fit: cover; }
.casilla-foto .sin-foto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--tenue); font-size: 2.4rem; }

/* El precio va SOBRE la foto, arriba a la derecha, en grande. Solo el precio. */
.precio-foto {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  position: absolute; top: 12px; right: 12px;
  background: var(--degradado); color: #fff;
  font-size: 1.34rem; font-weight: 700; letter-spacing: -.02em;
  padding: .45rem .9rem; border-radius: 11px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); font-variant-numeric: tabular-nums;
}

.casilla-cuerpo { padding: 1.15rem 1.2rem 0; flex: 1; }
.casilla-categoria {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vino-luz); margin-bottom: .4rem;
}
.casilla h3 { font-size: 1.06rem; margin-bottom: .5rem; }

/* La descripcion se enseña entera: la vendedora escribe lo que necesite y la
   casilla crece. Recortarla escondia justo lo que vende. */
.casilla-descripcion { font-size: .89rem; color: var(--tinta-suave); white-space: pre-line; }

.casilla-precio {
  font-size: 1.28rem; font-weight: 700; margin: .9rem 0 .2rem; font-variant-numeric: tabular-nums;
  background-image: linear-gradient(90deg, var(--banda));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: destello 11s linear infinite;
}
.casilla-existencias { font-size: .78rem; color: var(--tenue); }
.agotado { color: #FF8A8A; font-weight: 600; }

.casilla-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: 1.15rem; }
.casilla-botones .btn { padding: .82rem .4rem; font-size: .79rem; }

.vacio-aviso {
  grid-column: 1 / -1; text-align: center; padding: 3.5rem 1rem;
  color: var(--tinta-suave); border: 2px dashed var(--linea); border-radius: var(--curva);
}

/* --------------------------------------------------------- Testimonios */
.rejilla-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.testimonio {
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-radius: var(--curva); padding: 1.7rem;
}
.estrellas { color: #F0B44B; letter-spacing: .12em; margin-bottom: .8rem; }
.testimonio p { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 1.2rem; }
.testimonio-firma { display: flex; align-items: center; gap: .7rem; }
.testimonio-inicial {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  width: 40px; height: 40px; border-radius: 50%; background: var(--degradado);
  color: #fff; display: grid; place-items: center; font-weight: 600;
}
.testimonio-foto {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid transparent;
  /* El aro de color se hace con dos fondos: el de dentro tapa el degradado
     salvo en el borde. Un simple border no admite degradado. */
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
              var(--degradado-vivo) border-box;
}
.testimonio-firma strong { display: block; font-size: .9rem; }
.testimonio-firma span { font-size: .8rem; color: var(--tenue); }

/* ------------------------------------------------------------ Contacto */
.rejilla-contacto { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; }
.tarjeta {
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-radius: var(--curva); padding: 1.9rem;
}
.dato-contacto { display: flex; gap: .85rem; margin-bottom: 1.3rem; }
.dato-contacto .icono {
  width: 42px; height: 42px; border-radius: 11px; background: rgba(224,104,125,.12);
  border: 1px solid var(--linea-viva); display: grid; place-items: center; flex-shrink: 0;
}
.dato-contacto strong { display: block; font-size: .88rem; }
.dato-contacto span { font-size: .88rem; color: var(--tinta-suave); word-break: break-word; }

/* -------------------------------------------------------------- Envios */
.pasos-envio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
/* Los numeros de aqui SI son un orden real: son las fases por las que pasa el
   paquete, y saltarse una no tiene sentido. */
.paso {
  border: 1px solid var(--linea); border-radius: var(--curva); padding: 1.5rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
}
.paso-numero { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--vino-luz); margin-bottom: .5rem; }
.paso h3 { font-size: .98rem; margin-bottom: .35rem; }
.paso p { font-size: .88rem; color: var(--tinta-suave); }

.caja-tarifa {
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-left: 4px solid var(--vino-luz);
  border-radius: var(--curva); padding: 1.8rem;
}
.caja-tarifa h3 { font-size: 1.06rem; margin-bottom: .6rem; }
.formula {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .95rem;
  background: var(--campo); border: 1px solid var(--linea); border-radius: 10px;
  padding: .9rem 1.1rem; margin: 1rem 0; color: var(--vino-luz); overflow-x: auto;
}

/* --------------------------------------------------------- Boton flotante */
.flotante {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--degradado-vivo); color: #fff; font-size: 1.45rem;
  display: grid; place-items: center; box-shadow: 0 8px 30px rgba(199,125,255,.5);
  transition: transform .18s;
}
.flotante:hover { transform: scale(1.08); }

/* -------------------------------------------------------------- Carrito */
.velo {
  position: fixed; inset: 0; background: rgba(6,2,3,.7); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 90;
}
.velo.abierto { opacity: 1; visibility: visible; }

/* La mitad de la pantalla, deslizando desde la derecha, tal como se pidio. */
.carrito {
  position: fixed; top: 0; right: 0; height: 100dvh; width: 50%;
  background: var(--fondo-2); border-left: 1px solid var(--linea);
  box-shadow: -12px 0 50px rgba(0,0,0,.6);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 100; display: flex; flex-direction: column;
}
.carrito.abierto { transform: translateX(0); }

.carrito-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--linea);
}
.carrito-cabecera h2 { font-size: 1.2rem; }
.btn-cerrar {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--linea);
  background: var(--suave); cursor: pointer; font-size: 1.15rem; color: var(--tinta-suave);
}
.btn-cerrar:hover { border-color: var(--vino-luz); color: var(--vino-luz); }

.carrito-lista { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; }
.linea-carrito { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.linea-carrito img, .linea-carrito .sin-foto-mini {
  width: 76px; height: 76px; border-radius: 11px; object-fit: cover;
  background: var(--panel-alto); flex-shrink: 0; display: grid; place-items: center; color: var(--tenue);
}
.linea-datos { flex: 1; min-width: 0; }
.linea-datos h4 { font-size: .95rem; margin-bottom: .2rem; }
.linea-precio { color: var(--vino-luz); font-weight: 700; font-variant-numeric: tabular-nums; }
.cantidad { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; }
.cantidad button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--linea);
  background: var(--suave); cursor: pointer; font-size: 1rem; color: var(--tinta);
}
.cantidad button:hover { border-color: var(--vino-luz); color: var(--vino-luz); }
.cantidad span { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.btn-quitar { background: none; border: 0; color: var(--tenue); cursor: pointer; font-size: .8rem; padding: .3rem; }
.btn-quitar:hover { color: #FF8A8A; }

.carrito-pie { border-top: 1px solid var(--linea); padding: 1.4rem 1.6rem; }
.fila-total { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .92rem; color: var(--tinta-suave); }
.fila-total.grande { font-size: 1.22rem; font-weight: 700; color: var(--tinta); margin: .8rem 0 1.1rem; }
.fila-total span { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Checkout */
.pantalla-checkout { position: fixed; inset: 0; background: var(--fondo); z-index: 120; overflow-y: auto; display: none; }
.pantalla-checkout.abierta { display: block; }

.checkout-cabecera {
  position: sticky; top: 0; background: var(--cabecera); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea); z-index: 5;
}
.checkout-cabecera .cabecera-fila { justify-content: space-between; }

.checkout-rejilla { display: grid; grid-template-columns: 1.35fr .65fr; gap: 2.5rem; padding: 2.5rem 0 4rem; align-items: start; }

/* Las tres secciones bien separadas entre si, como se pidio. */
.bloque-checkout {
  border: 1px solid var(--linea); border-radius: var(--curva);
  padding: 1.9rem; margin-bottom: 2.4rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
}
.bloque-checkout:last-of-type { margin-bottom: 1.6rem; }
.bloque-cabecera { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.4rem; }
.bloque-numero {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  width: 34px; height: 34px; border-radius: 10px; background: var(--degradado);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0;
}
.bloque-cabecera h3 { font-size: 1.06rem; }
.bloque-cabecera p { font-size: .82rem; color: var(--tenue); }

.opcion-pago {
  display: flex; align-items: center; gap: 1rem; padding: 1.15rem;
  border: 1.5px solid var(--linea); border-radius: 12px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.opcion-pago:hover { border-color: var(--vino-luz); background: rgba(224,104,125,.07); }
.sello-visa { font-weight: 700; font-style: italic; font-size: 1.35rem; color: #8FB4FF; letter-spacing: -.03em; }

.resumen {
  position: sticky; top: 98px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-radius: var(--curva); padding: 1.7rem;
}
.resumen h3 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.resumen-linea { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding: .5rem 0; color: var(--tinta-suave); }
.resumen-linea span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta); }
.resumen-total {
  display: flex; justify-content: space-between; font-size: 1.22rem; font-weight: 700;
  border-top: 2px solid var(--vino-luz); margin-top: .8rem; padding-top: .9rem; color: var(--vino-luz);
}
.nota-envio { font-size: .76rem; color: var(--tenue); margin-top: .5rem; line-height: 1.5; }

.zona-comprar { text-align: center; padding-top: .5rem; }
.zona-comprar .btn { min-width: 300px; padding: 1.15rem 2rem; font-size: 1rem; }

/* -------------------------------------------------- Autocompletado */
.con-sugerencias { position: relative; }
.sugerencias {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--panel-alto); border: 1px solid var(--linea); border-radius: 11px;
  box-shadow: var(--sombra-alta); max-height: 260px; overflow-y: auto; display: none;
}
.sugerencias.visible { display: block; }
.sugerencia { padding: .78rem .95rem; font-size: .87rem; cursor: pointer; border-bottom: 1px solid var(--linea); }
.sugerencia:last-child { border-bottom: 0; }
.sugerencia:hover, .sugerencia.marcada { background: rgba(224,104,125,.14); color: var(--vino-luz); }
.sugerencia small { display: block; color: var(--tenue); font-size: .76rem; }

/* ---------------------------------------------------------------- Avisos */
.aviso { padding: .9rem 1.05rem; border-radius: 11px; font-size: .87rem; margin-bottom: 1.2rem; border: 1px solid; }
.aviso-error { background: rgba(255,107,107,.1); color: #FFB0B0; border-color: rgba(255,107,107,.35); }
.aviso-ok { background: rgba(94,230,168,.1); color: #9BEFC7; border-color: rgba(94,230,168,.32); }
.aviso-info { background: rgba(240,180,75,.1); color: #F5D08F; border-color: rgba(240,180,75,.32); }
.aviso[hidden] { display: none; }

.cinta-demo {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
 background: var(--degradado); color: #fff; text-align: center; padding: .58rem 1rem; font-size: .82rem; font-weight: 600; }

/* ------------------------------------------------------------- Confirmado */
.confirmado { max-width: 620px; margin: 4rem auto; text-align: center; padding: 0 1.5rem; }
.tic {
  background-image: linear-gradient(120deg, var(--banda));
  background-size: 300% 100%;
  animation: destello 11s linear infinite;
  width: 88px; height: 88px; border-radius: 50%; background: var(--degradado);
  color: #fff; display: grid; place-items: center; font-size: 2.5rem; margin: 0 auto 1.6rem;
  box-shadow: 0 10px 34px rgba(142,58,69,.5);
}
.caja-recibo {
  background: linear-gradient(180deg, var(--panel) 0%, var(--fondo-2) 100%);
  border: 1px solid var(--linea); border-radius: var(--curva); padding: 1.7rem;
  text-align: left; margin: 1.8rem 0;
}
.caja-recibo .resumen-linea { border-bottom: 1px solid var(--linea); }
.caja-recibo .resumen-linea:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------- Pie */
.pie { background: var(--pie); border-top: 1px solid var(--linea); color: var(--tinta-suave); padding: 3.2rem 0 1.6rem; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.2rem; }
.pie h4 { color: var(--tinta); font-size: .93rem; margin-bottom: .9rem; }
.pie a { display: block; font-size: .88rem; padding: .22rem 0; color: var(--tinta-suave); }
.pie a:hover { color: var(--vino-luz); }
.pie p { font-size: .88rem; }
.pie-abajo { border-top: 1px solid var(--linea); padding-top: 1.4rem; text-align: center; font-size: .82rem; color: var(--tenue); }

/* ------------------------------------------------------------- Responsiva */
@media (max-width: 980px) {
  .rejilla-contacto, .checkout-rejilla { grid-template-columns: 1fr; }
  .ventajas { grid-template-columns: 1fr; }
  .resumen { position: static; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  /* En pantallas medianas media pantalla se queda estrecha para leer. */
  .carrito { width: 68%; }
}

@media (max-width: 760px) {
  .contenedor { width: min(1200px, 100% - 1.6rem); }
  .menu {
    position: fixed; top: 74px; left: 0; right: 0; background: var(--fondo-2);
    border-bottom: 1px solid var(--linea); flex-direction: column; padding: .8rem;
    box-shadow: var(--sombra); display: none;
  }
  .menu.abierto { display: flex; }
  .menu a { padding: .9rem 1rem; }
  .btn-menu { display: grid; place-items: center; order: 3; }
  .acciones-cabecera { margin-left: auto; }
  .acceso-duena { display: none; }
  .carrito { width: 100%; }
  .pareja { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr; gap: 1.6rem; }
  .zona-comprar .btn { width: 100%; min-width: 0; }
  .casilla-botones .btn { font-size: .75rem; padding: .8rem .3rem; }
  .flotante { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 1.3rem; }
}