/* ==========================================================================
   MÓDULOS NUEVOS — RV Eyelashes
   Megamenú · Consigue el look (video comprable) · Reseñas · Instagram
   Sobre tu pedido · Badges
   Se carga DESPUÉS de styles.css
   ========================================================================== */

/* ---------- 1. MEGAMENÚ ---------- */
.hdr{position:sticky}                     /* contenedor del desplegable */
.nav{position:static}
.nav__item{position:static;display:flex;align-items:center}
.nav__item>a{display:inline-flex;align-items:center;gap:6px}
.nav__item>a::before{content:none}
.flechita{
  width:9px;height:9px;stroke:currentColor;stroke-width:2;fill:none;
  transition:var(--trans);flex-shrink:0;
}
.nav__item:hover .flechita{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:var(--blanco);border-top:1px solid var(--gris-linea);
  box-shadow:0 18px 44px rgba(26,26,26,.09);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:repeat(3,1fr) 300px;gap:clamp(22px,3vw,48px);padding-block:36px 40px}
.mega__col h5{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--gris);margin-bottom:16px;
}
/* Caja normal: heredan mayúsculas y tracking de `.nav a` y quedan gritones */
.mega a,.mega b,.mega em{text-transform:none;letter-spacing:normal}
.mega__col a{
  display:flex;align-items:center;gap:9px;padding:7px 0;font-size:.9rem;
  color:var(--negro-suave);transition:var(--trans);font-weight:400;
}
.mega__col a::after{content:none}   /* quita el subrayado animado del nav */
.mega__col a:hover{color:var(--magenta);transform:translateX(3px)}
.mega__col a span{
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:2px 7px;border-radius:20px;background:var(--magenta-luz);color:var(--magenta);
}
.mega__col a span.gris{background:var(--hueso);color:var(--gris)}
/* Tarjeta destacada del megamenú */
.mega__promo{position:relative;overflow:hidden;display:block;min-height:230px}
.mega__promo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .7s ease}
.mega__promo:hover img{transform:scale(1.05)}
.mega__promo div{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:20px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(14,12,13,.88));
}
.mega__promo b{display:block;font-family:var(--serif);font-size:1.15rem;margin-bottom:3px}
.mega__promo em{font-style:normal;font-size:.74rem;color:#D6CFD2}
@media(max-width:1100px){.mega{display:none}}

/* ---------- 2. CONSIGUE EL LOOK (video comprable) ---------- */
.look{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px)}
/* ═══════════════════════════════════════════════════════════════════════════
   5 · «EL RESULTADO EN USO» — la previa y el producto, sin adornos que mienten
   ═══════════════════════════════════════════════════════════════════════════

   🚨 LA CAJA BLANCA QUE REPORTÓ FER ERA TEXTO INVISIBLE.

   `.look__prod` iba encima de la foto, en `position:absolute`, con
   `color:#fff` — pensado para leerse sobre el degradado oscuro de la imagen.
   Pero terminaba pintándose sobre fondo BLANCO, así que el nombre del producto
   quedaba blanco sobre blanco: ahí estaba, en el HTML, y no se veía. Lo único
   que se alcanzaba a leer era el precio, en magenta, flotando en un rectángulo
   vacío. De ahí «la caja del precio se ve en blanco bien feo».

   ⚠️ Es el modo de fallar más traicionero que hay: el texto SÍ está, los
   comprobadores de contenido lo encuentran, y nadie lo ve. Ahora el pie tiene
   fondo propio y opaco, y el texto un color que contrasta contra ESE fondo, no
   contra uno que a lo mejor está debajo.
   ═══════════════════════════════════════════════════════════════════════════ */
.look__card{
  position:relative;border-radius:6px;overflow:hidden;background:var(--negro);
  display:flex;flex-direction:column;transition:var(--trans);
}
.look__card:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}

/* ─── La tarjeta: la foto ES la miniatura del reel ────────────────────────
   Se acabó el `<iframe>`. La foto de la tarjeta es la miniatura del video,
   bajada de Instagram y guardada en la biblioteca de RV — así que se comporta
   como cualquier otra foto del sitio: `srcset`, WebP y cero peticiones a
   terceros al abrir la portada. */
/* ⚠️ ESTA REGLA SE ME PERDIÓ EN UNA REESCRITURA Y ROMPIÓ LA TARJETA.
   Sin ella, `.look__ir` es un `<a>` EN LÍNEA: sus dos hijos —la foto y el
   pie— dejan de apilarse y el pie se sale de la tarjeta, que tiene
   `overflow:hidden`. Medido: la tarjeta cerraba en y=764 y el pie iba de 736
   a 787, o sea 23 px cortados; y el enlace a Instagram quedaba encimado
   encima del pie, en la misma y=736.
   El bloque de CSS lo reemplacé de una marca a otra y la regla vivía
   justo antes del corte. */
.look__ir{display:flex;flex-direction:column;color:inherit;text-decoration:none}

.look__reel{
  position:relative;overflow:hidden;background:#000;
  aspect-ratio:9/16;
}
.look__reel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s ease;
}
.look__card:hover .look__reel img{transform:scale(1.06)}
.look__reel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,12,13,.22) 0%,transparent 40%,rgba(14,12,13,.30) 100%);
}
.look__tag{
  position:absolute;top:12px;left:12px;z-index:3;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--negro);padding:4px 9px;border-radius:20px;
}

/* El pie: fondo negro OPACO y texto claro. Nada de contar con lo que haya
   debajo — eso fue lo que dejó el nombre invisible la primera vez. */
.look__pie{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:13px 14px;background:var(--negro);color:#fff;
  transition:var(--trans);
}
.look__pie:hover{background:var(--magenta)}

/* 🚨 ESTA REGLA TAMBIÉN SE PERDIÓ EN LA REESCRITURA, Y NO SE VEÍA QUE FALTABA.
   Sin ella el `<a>` heredaba `color` del contenedor oscuro y quedaba NEGRO
   SOBRE NEGRO: el enlace estaba ahí, medía 218×27, se podía picar, y no se
   veía. Lo encontró `bin/verificar/invisible.mjs` —el detector que nació del
   botón de «Ver carrito» que reportó Fer— en la primera corrida después del
   cambio: 8 casos en la portada, los cuatro enlaces en reposo y con el cursor
   encima.
   Es la tercera vez en este proyecto que un color heredado deja texto
   invisible. Por eso el pie y este enlace llevan su color EXPLÍCITO, sin
   depender de lo que haya arriba. */
.look__ig{
  display:block;padding:11px 14px;text-align:center;
  background:#1B1718;color:rgba(255,255,255,.72);
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  border-top:1px solid rgba(255,255,255,.1);transition:var(--trans);
  white-space:nowrap;
}
.look__ig:hover{background:var(--magenta);color:#fff}
.look__nom{
  font-size:.82rem;line-height:1.25;font-weight:500;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.look__precio{font-size:.95rem;font-weight:700;color:#fff;white-space:nowrap}



@media(max-width:1100px){.look{grid-template-columns:repeat(3,1fr)}.look__card:nth-child(n+4){display:none}}
@media(max-width:680px){
  .look{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  /* ⚠️ 88vw, no 62. En el teléfono la tarjeta medía 242 px y el embed de
     Instagram —que se dibuja a 400— quedaba encogido al 0.60: el nombre del
     perfil y la canción salían en letra de hormiga. A 88vw la tarjeta mide
     ~343 px y la escala sube a 0.86, que es prácticamente el tamaño con el que
     Instagram la diseñó. Se sigue asomando la siguiente por la derecha, que es
     lo que le dice a la gente que la tira se arrastra. */
  .look__card{flex:0 0 88vw;scroll-snap-align:start}
  .look__card:nth-child(n+4){display:flex}
}

/* ---------- 3. RESEÑAS ---------- */
.res-cab{display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:36px}
.res-nota{text-align:center;padding:26px;background:var(--hueso);border-radius:4px}
.res-nota b{display:block;font-family:var(--serif);font-size:3.2rem;line-height:1}
.res-nota .estrellas{margin:8px 0 6px}
.res-nota span{font-size:.8rem;color:var(--gris)}
.estrellas{color:#E8A020;letter-spacing:2px;font-size:.95rem}
.estrellas--sm{font-size:.8rem;letter-spacing:1px}
.res-barras{display:grid;gap:8px}
.res-barra{display:grid;grid-template-columns:52px 1fr 38px;gap:12px;align-items:center;font-size:.78rem;color:var(--gris)}
.res-barra i{height:5px;background:var(--gris-linea);border-radius:3px;overflow:hidden;display:block}
.res-barra i em{display:block;height:100%;background:#E8A020;font-style:normal}
/* Fotos que mandan las clientas */
.res-fotos{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:30px}
.res-fotos img{width:96px;height:96px;object-fit:cover;border-radius:4px;flex-shrink:0;cursor:pointer;transition:var(--trans)}
.res-fotos img:hover{transform:scale(1.04)}
.res-lista{display:grid;gap:1px;background:var(--gris-linea)}
.resena{background:var(--blanco);padding:24px 0}
.resena__cab{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.resena__ava{
  width:38px;height:38px;border-radius:50%;background:var(--magenta-luz);color:var(--magenta);
  display:grid;place-items:center;font-weight:700;font-size:.82rem;flex-shrink:0;
}
.resena__nom{font-weight:600;font-size:.92rem}
.resena__ver{
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--exito);background:#F2FAF6;border:1px solid #9FD4B4;padding:2px 8px;border-radius:20px;
}
.resena__fecha{margin-left:auto;font-size:.76rem;color:var(--gris)}
.resena p{font-size:.92rem;color:var(--negro-suave);max-width:70ch;margin-top:6px}
.resena__fotos{display:flex;gap:8px;margin-top:12px}
.resena__fotos img{width:64px;height:64px;object-fit:cover;border-radius:3px}
.resena__util{margin-top:12px;font-size:.78rem;color:var(--gris)}
@media(max-width:760px){.res-cab{grid-template-columns:1fr}.resena__fecha{margin-left:0;width:100%}}

/* ---------- 4. INSTAGRAM ---------- */
.ig-cab{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.ig-cab a{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--magenta)}
.ig-cab svg{width:17px;height:17px;fill:currentColor}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,.8vw,12px)}
.ig-item{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.ig-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ig-item:hover img{transform:scale(1.07)}
.ig-item::after{
  content:"";position:absolute;inset:0;background:rgba(214,0,110,.62);
  opacity:0;transition:var(--trans);
}
.ig-item:hover::after{opacity:1}
.ig-item__ico{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  opacity:0;transition:var(--trans);
}
.ig-item:hover .ig-item__ico{opacity:1}
.ig-item__ico svg{width:22px;height:22px;fill:#fff}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 5. SOBRE TU PEDIDO ---------- */
.pedido{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pedido__col{display:flex;gap:16px;align-items:flex-start;padding:clamp(20px,2.6vw,32px)}
.pedido__col+.pedido__col{border-left:1px solid var(--gris-linea)}
.pedido__ico{width:34px;height:34px;flex-shrink:0;stroke:var(--magenta);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pedido__col h4{font-size:.98rem;margin-bottom:6px}
.pedido__col h4 em{font-style:italic;color:var(--magenta);font-family:var(--serif)}
.pedido__col p{font-size:.86rem;color:var(--negro-suave);max-width:34ch}
@media(max-width:860px){
  .pedido{grid-template-columns:1fr}
  .pedido__col+.pedido__col{border-left:0;border-top:1px solid var(--gris-linea)}
}

/* ---------- 6. BADGES Y DETALLES ---------- */
.badge--nuevo{background:#1D7A54}
.badge--pill{border-radius:20px;padding:5px 12px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:20px;background:var(--magenta-luz);color:var(--magenta);
}
.pill--verde{background:#F2FAF6;color:var(--exito)}
.pill--ambar{background:#FDF6EC;color:var(--alerta)}
.pill--negro{background:var(--negro);color:#fff}
/* Etiqueta de descuento del menú, estilo Diana Fletes */
.nav-off{
  font-size:.58rem;font-weight:700;letter-spacing:.06em;
  background:var(--magenta);color:#fff;padding:2px 7px;border-radius:20px;margin-left:6px;
}

/* ---------- 7. PAQUETES DE MAYOREO ---------- */
.paq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.paq__card{
  position:relative;display:flex;flex-direction:column;background:var(--blanco);
  border:1px solid var(--gris-linea);border-radius:6px;overflow:hidden;transition:var(--trans);
}
.paq__card:hover{border-color:var(--magenta);box-shadow:var(--sombra-alta);transform:translateY(-3px)}
.paq__card--top{border-color:var(--magenta);border-width:1.5px}
.paq__cinta{
  position:absolute;top:14px;right:-34px;z-index:3;transform:rotate(45deg);
  background:var(--magenta);color:#fff;font-size:.58rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 40px;
}
.paq__img{aspect-ratio:4/3;overflow:hidden;background:var(--hueso)}
.paq__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.paq__card:hover .paq__img img{transform:scale(1.05)}
.paq__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.paq__linea{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);font-weight:700}
.paq__nom{font-family:var(--serif);font-size:1.3rem;margin:8px 0 4px;line-height:1.2}
.paq__pz{font-size:.84rem;color:var(--gris)}
.paq__precio{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px}
.paq__precio b{font-family:var(--serif);font-size:2.1rem;line-height:1}
.paq__precio span{font-size:.8rem;color:var(--gris)}
.paq__unit{font-size:.84rem;color:var(--exito);font-weight:600}
.paq__envio{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--exito);background:#F2FAF6;border:1px solid #9FD4B4;padding:6px 12px;border-radius:20px;
  align-self:flex-start;
}
.paq__cta{margin-top:auto;padding-top:20px}
@media(max-width:900px){.paq{grid-template-columns:1fr}}

/* ---------- 8. REDES CON SEGUIDORES ---------- */
.redes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.red{
  display:flex;align-items:center;gap:18px;padding:20px 24px;
  border:1px solid var(--gris-linea);border-radius:10px;background:var(--blanco);
  transition:var(--trans);
}
.red:hover{border-color:var(--magenta);box-shadow:var(--sombra)}
.red__ava{
  width:58px;height:58px;border-radius:50%;flex-shrink:0;padding:2.5px;
  background:linear-gradient(45deg,#F09433,#E6683C,#DC2743,#CC2366,#BC1888);
}
.red__ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid #fff;background:#fff}
.red--tt .red__ava{background:linear-gradient(45deg,#25F4EE,#000,#FE2C55)}
.red__id{flex:1;min-width:0}
.red__id b{display:flex;align-items:center;gap:6px;font-size:.98rem;font-weight:600}
.red__id b svg{width:15px;height:15px;fill:#3897F0;flex-shrink:0}
.red__id span{font-size:.82rem;color:var(--gris)}
.red__num{display:flex;gap:22px;text-align:center;flex-shrink:0;border-left:1px solid var(--gris-linea);padding-left:22px}
.red__num>span{display:block}
.red__num>span b{display:block;font-size:1.05rem;font-weight:700;line-height:1.2}
.red__num>span span{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-top:2px}
@media(max-width:820px){
  .redes{grid-template-columns:1fr}
  .red{flex-wrap:wrap;gap:14px}
  .red__num{border-left:0;padding-left:0;width:100%;justify-content:flex-start}
}

/* ==========================================================================
   9. MI CUENTA — estructura calcada de la plantilla My Account de WooCommerce
   (woocommerce-MyAccount-navigation + woocommerce-MyAccount-content)
   ========================================================================== */

/* --- Acceso / Registro: las dos columnas clásicas de Woo --- */
.acceso{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,52px);align-items:start}
.caja-form{border:1px solid var(--gris-linea);border-radius:6px;padding:clamp(26px,3vw,40px);background:var(--blanco)}
.caja-form h2{font-size:1.5rem;margin-bottom:6px}
.caja-form>p{font-size:.88rem;color:var(--gris);margin-bottom:22px}
.caja-form .f label{margin-top:16px}
.caja-form .f label:first-of-type{margin-top:0}
.req{color:var(--magenta)}
.recuerdame{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 22px;flex-wrap:wrap}
.recuerdame a{font-size:.82rem;text-decoration:underline;text-underline-offset:3px;color:var(--gris)}
.recuerdame a:hover{color:var(--magenta)}
.aviso-form{font-size:.8rem;color:var(--gris);margin-top:16px;line-height:1.6}
@media(max-width:820px){.acceso{grid-template-columns:1fr}}

/* --- Panel: navegación + contenido --- */
.cuenta{display:grid;grid-template-columns:260px 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.cuenta-nav{border:1px solid var(--gris-linea);border-radius:6px;overflow:hidden;background:var(--blanco)}
.cuenta-nav__cab{padding:20px;border-bottom:1px solid var(--gris-linea);display:flex;gap:12px;align-items:center}
.cuenta-nav__ava{
  width:42px;height:42px;border-radius:50%;background:var(--magenta-luz);color:var(--magenta);
  display:grid;place-items:center;font-weight:700;font-size:.9rem;flex-shrink:0;
}
.cuenta-nav__cab b{display:block;font-size:.92rem;font-weight:600;line-height:1.2}
.cuenta-nav__cab span{font-size:.74rem;color:var(--gris)}
.cuenta-nav ul{display:flex;flex-direction:column}
.cuenta-nav li{border-bottom:1px solid var(--gris-linea)}
.cuenta-nav li:last-child{border-bottom:0}
.cuenta-nav a{
  display:flex;align-items:center;gap:11px;padding:14px 20px;font-size:.9rem;
  color:var(--negro-suave);transition:var(--trans);border-left:2px solid transparent;
}
.cuenta-nav a:hover{background:var(--hueso);color:var(--magenta)}
.cuenta-nav a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cuenta-nav li.on a{border-left-color:var(--magenta);color:var(--magenta);font-weight:600;background:var(--magenta-luz)}
.cuenta-nav li.salir a{color:var(--gris)}

.cuenta-cont h1{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:8px}
.saludo{font-size:.95rem;color:var(--negro-suave);margin-bottom:28px}
.saludo b{font-weight:600}
.saludo a{text-decoration:underline;text-underline-offset:3px;color:var(--gris)}

/* Atajos del escritorio */
.atajos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.atajo{
  border:1px solid var(--gris-linea);border-radius:6px;padding:20px;
  display:flex;gap:13px;align-items:flex-start;transition:var(--trans);background:var(--blanco);
}
.atajo:hover{border-color:var(--magenta);box-shadow:var(--sombra)}
.atajo svg{width:20px;height:20px;stroke:var(--magenta);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.atajo b{display:block;font-size:.9rem;margin-bottom:3px}
.atajo span{font-size:.79rem;color:var(--gris)}
@media(max-width:900px){.atajos{grid-template-columns:1fr}}

/* Tabla de pedidos, al estilo de Woo */
.tabla-ped{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla-ped th{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);font-weight:700;text-align:left;padding:12px 14px;border-bottom:1px solid var(--gris-linea);
}
.tabla-ped td{padding:16px 14px;border-bottom:1px solid var(--gris-linea);vertical-align:middle}
.tabla-ped tr:hover td{background:var(--hueso)}
.tabla-ped .ped{font-weight:600;color:var(--magenta)}
.estado{
  display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:20px;
}
.estado--ok{background:#F2FAF6;color:var(--exito);border:1px solid #9FD4B4}
.estado--camino{background:#EEF4FD;color:#2A5BA8;border:1px solid #B7CDEE}
.estado--proceso{background:#FDF6EC;color:var(--alerta);border:1px solid #EAD3AE}
.acc-ped{display:flex;gap:8px;flex-wrap:wrap}
.tabla-wrap{overflow-x:auto;border:1px solid var(--gris-linea);border-radius:6px}
.tabla-wrap .tabla-ped tr:last-child td{border-bottom:0}

/* Direcciones */
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dir{border:1px solid var(--gris-linea);border-radius:6px;padding:24px;background:var(--blanco)}
.dir h3{font-size:1.05rem;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.dir address{font-style:normal;font-size:.9rem;color:var(--negro-suave);line-height:1.75}
.dir .link-sub{margin-top:14px;display:inline-block}
@media(max-width:760px){.dirs{grid-template-columns:1fr}}

/* Aviso informativo */
.info-box{
  border:1px solid #B7CDEE;background:#EEF4FD;border-radius:6px;
  padding:16px 20px;font-size:.86rem;color:#26497F;margin-bottom:24px;
}
@media(max-width:900px){
  .cuenta{grid-template-columns:1fr}
  .cuenta-nav ul{flex-direction:row;overflow-x:auto}
  .cuenta-nav li{border-bottom:0;border-right:1px solid var(--gris-linea);white-space:nowrap}
  .cuenta-nav li.on a{border-left-color:transparent;border-bottom:2px solid var(--magenta)}
}

/* Arreglo: `.f label` (bloque, mayúsculas, negritas) pisaba a las etiquetas
   de opción y de radio, y les rompía el flex — desaparecían la casilla y el
   círculo. Se les devuelve su propio display y caja normal. */
.f label.fopt,
.f label.radio{
  display:flex;font-size:.9rem;letter-spacing:normal;text-transform:none;
  font-weight:400;margin-bottom:0;color:var(--negro-suave);
}
.f label.radio{align-items:flex-start;gap:14px}
.f label.radio b{font-size:.9rem;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--negro)}
.f label.radio span{font-size:.79rem;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--gris)}
.f label.radio--on b{color:var(--negro)}
.f label.fopt{align-items:center;gap:10px}

/* ==========================================================================
   10. CORRECCIONES
   ========================================================================== */

/* Desbordamiento horizontal: `1fr` no baja de su contenido mínimo, así que
   con textos largos la retícula del megamenú empujaba la página ~31 px.
   minmax(0,1fr) sí permite encoger. */
.mega__in{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,300px)}
.mega{overflow:hidden}
.mega__col a{flex-wrap:wrap}

/* Reseñas: los bloques blancos llegaban a filo de sección y se veían rotos */
.res-lista{border:1px solid var(--gris-linea);border-radius:6px;overflow:hidden;gap:1px}
.resena{padding:24px clamp(18px,2.2vw,28px)}
.res-fotos{scrollbar-width:thin}

/* Ficha de producto: la galería se queda fija mientras baja la columna de datos */
.pdp__gal{position:sticky;top:112px;align-self:start}
.pdp__info{position:static}
@media(max-width:900px){.pdp__gal{position:static}}

/* Cuadrículas de 4: evita que la última fila quede con un solo producto */
.prods{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
@media(min-width:1000px){.prods{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:700px) and (max-width:999px){.prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* En el catálogo la barra lateral resta ancho: ahí van 3 */
.cat-lay .prods{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.cat-lay .prods{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Instagram: 8 fotos en 4 columnas */
.ig-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.redes{grid-template-columns:1fr;max-width:520px;margin-inline:auto}

/* Botones del hero editorial */
.ed__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.ed__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 30px;border-radius:2px;border:1px solid;
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  transition:var(--trans);
}
.ed__btn--blanco{background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.ed__btn--blanco:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
.ed__btn--trans{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.55)}
.ed__btn--trans:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ---------- 11. MAPA ---------- */
.mapa-sec{position:relative}
.mapa-sec iframe{
  width:100%;height:clamp(320px,42vh,460px);border:0;display:block;
  filter:grayscale(.25) contrast(1.04);
}
.mapa-cta{
  position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(16px,3vw,32px);z-index:2;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--blanco);padding:18px 22px;border-radius:6px;
  box-shadow:0 6px 28px rgba(26,26,26,.18);max-width:min(460px,calc(100% - 32px));
}
.mapa-cta b{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:3px}
.mapa-cta span{font-size:.84rem;color:var(--gris)}
.mapa-cta .btn{margin-left:auto}
@media(max-width:600px){.mapa-cta{left:16px;right:16px;bottom:16px;max-width:none}.mapa-cta .btn{margin-left:0;width:100%}}

/* ============================================================
   11. CATÁLOGO REAL — placeholder de foto pendiente,
       contadores en filtros, nota del tabulador.
   ============================================================ */

/* Producto sin fotografía todavía: no inventamos imagen, lo decimos. */
.prod__falta{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#F4F1F2,#F4F1F2 10px,#EDE9EA 10px,#EDE9EA 20px);
  color:var(--gris);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}

/* Contador de cuántos productos hay por filtro */
.fopt em{
  font-style:normal;margin-left:auto;font-size:.76rem;color:var(--gris);
  background:var(--hueso);border-radius:20px;padding:2px 8px;font-weight:500;
}
.fopt--on em{background:rgba(214,0,110,.10);color:var(--magenta)}

.fnota{font-size:.82rem;color:var(--gris);line-height:1.55;margin-top:2px}

/* Los badges se apilan si hay más de uno (ej. Top ventas + Sobre pedido) */
.prod__badges{display:flex;flex-direction:column;align-items:flex-start;gap:5px}

/* Distintivo dentro del H1 de la ficha (🔥 El más vendido) */
.pdp__flag{
  display:inline-block;vertical-align:middle;margin-left:12px;
  background:var(--magenta);color:#fff;border-radius:20px;
  padding:6px 13px;font-family:var(--sans,'Jost',sans-serif);
  font-size:.72rem;letter-spacing:.10em;text-transform:uppercase;font-weight:600;
}
/* Aviso de línea sobre pedido */
.pdp__pedido{
  display:flex;gap:11px;align-items:flex-start;background:#FFF6E8;
  border-left:3px solid #C98A00;border-radius:0 8px 8px 0;padding:13px 16px;margin-top:14px;
}
.pdp__pedido b{display:block;font-size:.9rem;margin-bottom:2px}
.pdp__pedido p{font-size:.84rem;color:var(--gris);line-height:1.55}

/* ============================================================
   12. CINTA DE BENEFICIOS / PROMOCIONES
       Va justo debajo del hero. Icono en SVG (no emoji suelto),
       tarjetas de altura pareja y etiqueta anclada abajo.
   ============================================================ */
.promos{background:var(--negro);color:var(--blanco);padding:clamp(44px,5.5vw,72px) 0}
.promos__head{text-align:center;margin-bottom:clamp(30px,3.4vw,44px)}
.promos__head .eyebrow{color:var(--magenta)}
.promos__head h2{
  font-family:var(--serif,'Playfair Display',serif);font-weight:600;
  font-size:clamp(1.5rem,3vw,2.05rem);color:var(--blanco);margin-top:10px;
}
.promos__grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}

.promo{
  position:relative;background:#1E1E1E;border:1px solid #2E2C2D;border-radius:16px;
  padding:26px 24px 22px;display:flex;flex-direction:column;
  transition:border-color .3s ease,transform .3s ease;
}
.promo:hover{border-color:#4A3E44;transform:translateY(-2px)}

/* La destacada: sin degradado pesado, solo un filete magenta arriba */
.promo--top{border-color:rgba(214,0,110,.45);background:#211A1E}
.promo--top::before{
  content:"";position:absolute;top:-1px;left:24px;right:24px;height:2px;
  background:var(--magenta);border-radius:0 0 3px 3px;
}

.promo__ico{
  width:42px;height:42px;border-radius:12px;
  background:rgba(214,0,110,.13);display:grid;place-items:center;margin-bottom:16px;
}
.promo__ico svg{width:21px;height:21px;stroke:var(--magenta);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* El icono ahora es un <img> (data-URI o foto propia) para que el editor
   pueda cambiarlo; ver rv_icono_editable(). */
.promo__ico img{width:21px;height:21px;object-fit:contain;display:block}

.promo b{
  font-size:1.01rem;font-weight:600;color:var(--blanco);
  letter-spacing:-.005em;margin-bottom:7px;
}
.promo p{
  font-size:.855rem;color:#A29CA0;line-height:1.6;
  margin-bottom:18px;min-height:4.8em;
}

/* Etiqueta anclada abajo, separada por un filete. Nunca de dos líneas. */
.promo__pill{
  margin-top:auto;padding-top:15px;border-top:1px solid #2E2C2D;
  font-size:.715rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:#8C8689;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.promo--top .promo__pill{color:var(--magenta)}

.promos__nota{margin-top:22px;text-align:center;font-size:.82rem;color:#7E787A}
.promos__nota b{color:#B5AFB1;font-weight:500}

@media(max-width:1080px){.promos__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .promos__grid{grid-template-columns:1fr;gap:12px}
  .promo{padding:22px 20px 18px}
  .promo p{min-height:0;margin-bottom:14px}
}

/* ============================================================
   AVISO DE ZONA EXTENDIDA
   Lo pidió Rocío por WhatsApp (29 jul): la tienda cobra $200
   parejo, y si el CP sale zona extendida RV contacta por WhatsApp
   por los $200 extra. La nota va antes de pagar, textual:
   "que no les tome de sorpresa".
   ============================================================ */
.aviso-zona{
  display:flex;gap:12px;align-items:flex-start;
  background:#FFF8EC;border:1px solid #F0DDB8;border-radius:12px;
  padding:15px 17px;margin:20px 0;
}
.aviso-zona__ico{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:#C98A00;color:#fff;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;line-height:1;
}
/* ⚠️ EL TÍTULO ES BLOQUE; LOS <b> DE DENTRO DEL PÁRRAFO, NO.
 *
 * Esto decía `.aviso-zona b`, a secas, y el párrafo trae tres <b> para
 * resaltar «zona normal ($200)», «zona extendida» y el monto. Los tres se
 * volvían bloque y partían la frase en cinco renglones, dejando huérfanos
 * ". Si tu código postal resulta ser de" y ", te contactamos por WhatsApp".
 * La nota que Rocío pidió para que no tomara de sorpresa era ilegible.
 *
 * Ya se había intentado arreglar EN PHP —armando el texto antes de imprimirlo,
 * ver el comentario de `form-checkout.php`— porque se leyó como un problema de
 * saltos de línea del propio PHP. No lo era: el HTML siempre estuvo bien y la
 * causa vivía aquí, a dos archivos de distancia. El síntoma sobrevivió al
 * arreglo, que es la señal de que se arregló lo que no era.
 *
 * El `>` importa: el título es hijo directo del div, los otros van dentro de <p>.
 */
.aviso-zona > div > b{display:block;font-size:.9rem;margin-bottom:4px;color:#7A5400}
.aviso-zona p b{font-weight:700;color:#7A5400}
.aviso-zona p{font-size:.83rem;color:#6E5A32;line-height:1.55}
.aviso-zona p + p{margin-top:6px}

/* Incentivo de reseña: cupón del 10% en la siguiente compra.
   PENDIENTE OPERATIVO — falta que RV defina código y vigencia. */
.cupon{
  display:flex;gap:13px;align-items:flex-start;margin-top:16px;
  background:linear-gradient(135deg,rgba(214,0,110,.09),rgba(214,0,110,.03));
  border:1px dashed var(--magenta);border-radius:12px;padding:15px 18px;
}
.cupon__ico{font-size:1.5rem;line-height:1;flex-shrink:0}
.cupon b{display:block;font-size:.95rem;margin-bottom:3px}
.cupon p{font-size:.85rem;color:var(--gris);line-height:1.55}
.cupon code{
  background:var(--negro);color:#fff;border-radius:5px;padding:2px 8px;
  font-size:.78rem;letter-spacing:.08em;font-family:ui-monospace,monospace;
}

/* Con 4 paquetes la rejilla necesita respirar en pantallas medianas */
@media(max-width:1160px){.paq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.paq{grid-template-columns:1fr}}
/* Con 4 tarjetas el texto aprieta: bajamos un punto la tipografía */
@media(min-width:1161px){
  .paq__nom{font-size:1.12rem}
  .paq__precio b{font-size:1.72rem}
  .paq__pz{font-size:.8rem}
}

/* Con 4 paquetes las descripciones tienen distinto largo y los precios
   quedaban a distinta altura. Reservamos 2 líneas para que todo alinee. */
@media(min-width:621px){
  .paq__pz{min-height:2.9em}
  .paq__unit{min-height:1.5em}
}
.paq__body{display:flex;flex-direction:column}
.paq__cta{margin-top:auto}

/* Las cifras de marca en el home: "Shark Tank" es más ancho que un número
   y se brincaba de fila. Rejilla de 3 que sí deja respirar al texto largo. */
.marca-datos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);
}
.marca-datos .dato b{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.1;display:block}
.marca-datos .dato span{font-size:.72rem;line-height:1.4}
@media(max-width:700px){.marca-datos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* El texto claro de «Nuestra historia», que antes iba en un `style` dentro del
   propio `<p>`. Al hacerlo editable el atributo se perdía —`rv_html()` imprime
   la etiqueta él mismo— así que el color se movió a una clase. Si se hubiera
   dejado así, esos dos párrafos habrían quedado negro sobre negro en la
   sección oscura: invisibles pero presentes, que es el defecto que este
   proyecto ya cazó tres veces. */
.rv-claro { color: #D9D2D5; }

/* ⚠️ Estas clases sustituyen `style=` que vivían DENTRO de los propios <p> y
   <h1>. Al hacerlos editables, `rv_html()` imprime la etiqueta él mismo y el
   atributo se perdía: los textos centrados se habrían ido a la izquierda y los
   claros habrían quedado negro sobre negro en la sección oscura. Es el mismo
   descuido que ya dejó texto invisible tres veces en este proyecto. */
.rv-centrado { margin-inline: auto; }
.rv-angosto  { max-width: 18ch; margin-inline: auto; }
/* El `margin-top` que iba en el atributo del <p> del pie. */
.rv-pie-desc { margin-top: 18px; }

/* El ancla de las secciones de Políticas. Antes el `id` vivía en el propio
   <h2>; al hacer el titular editable hubo que sacarlo a un <span>, porque
   `rv_html()` no imprime `id` — y sin él se rompían los enlaces #envios,
   #mayoreo y #pagos que apuntan desde el pie, el menú del teléfono y Contacto.

   `scroll-margin-top` para que al llegar por el enlace el titular no quede
   pegado al borde de arriba ni debajo del encabezado. */
.rv-ancla { display: block; height: 0; scroll-margin-top: 96px; }

/* ─── Shark Tank, en Nosotros ────────────────────────────────────────────────
   La sección entera sólo existe cuando hay foto — ver el comentario de
   `page-nosotros.php`. Aquí sólo se le da forma.

   La foto manda: va primero y ocupa más. Es una foto de las dueñas en
   televisión nacional, y ése es todo el argumento; el texto sólo la sitúa. */
.shark {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.shark__foto { margin: 0; }
.shark__foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
@media (max-width: 900px) {
  .shark { grid-template-columns: 1fr; }
}