/* =========================================================================
   DIRECCIÓN A — "BOTICA" · paleta de marca (oro del logo PyM)
   La perfumería de barrio de toda la vida: mostrador claro, etiqueta impresa,
   bordes rectos y sombras sólidas. Luz en vez de oscuridad.

   ESCALA DEL ORO (el amarillo no se comporta como un color oscuro):
     --oro       #D8A818  solo como FONDO, siempre con texto tinta encima  (8.9:1)
     --oro-texto #7A5A0A  cuando el oro tiene que ser TEXTO sobre papel     (6.4:1)
     --oro-luz   #E9C55C  cuando el oro es texto sobre los bloques carbón   (9.5:1)
   Nunca texto blanco sobre oro.
   ========================================================================= */

:root{
  --papel:#FDFBF6;        /* blanco cálido de mostrador */
  --papel-2:#F3EFE4;      /* panel */
  --papel-3:#E4DED0;      /* línea */
  --tinta:#171310;        /* texto */
  --tinta-2:#5C544A;      /* secundario */

  --oro:#D8A818;          /* el dorado del logo */
  --oro-h:#BE9012;        /* hover del oro */
  --oro-texto:#7A5A0A;    /* oro legible sobre papel */
  --oro-luz:#E9C55C;      /* oro legible sobre carbón */
  --oro-tinte:#FBF3DE;    /* lavado de oro para estados */
  --oro-borde:#EBD9A6;

  --carbon:#1A1512;       /* bloques oscuros: dejan brillar el oro */
  --carbon-2:#241D18;
  --lacre:#8E2B2B;        /* urgencia real */

  --display:"Fraunces",Georgia,serif;
  --ui:"Manrope",system-ui,-apple-system,sans-serif;

  /* El contenedor es fluido, no una caja fija centrada: el tope es alto y
     el canal lateral crece con la pantalla, asi el contenido se acerca al
     borde en monitores grandes y respira en los pequenos. Los bloques de
     lectura llevan su propia medida (.pagina__cu, .faq, .bajada). */
  --max:1760px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--ui);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}
p{margin:0}ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.015em;font-variation-settings:"SOFT" 20,"WONK" 1}
:focus-visible{outline:2px solid var(--oro-texto);outline-offset:3px}

/* Sin tope: el contenido llega al borde y solo deja un canal minimo, que
   se encoge en movil. Los bloques de lectura (.bajada, .faq, .pagina__cu)
   llevan su propia medida, asi que ensanchar aqui no estropea el texto. */
.wrap{width:100%;max-width:none;margin-inline:auto;padding-inline:clamp(16px,2.2vw,44px)}

.sec{padding-block:58px;position:relative}
@media(min-width:900px){.sec{padding-block:94px}}
.sec--papel{background:var(--papel-2)}
.sec--tinta{background:var(--carbon);color:var(--papel)}

/* Etiqueta de sección: como el rótulo de un frasco de botica */
.ojo{
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro-texto);display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  border-bottom:2px solid var(--oro);padding-bottom:5px;
}
.ojo::before{display:none}
.sec--tinta .ojo{color:var(--oro-luz);border-color:var(--oro)}

.t-sec{font-size:clamp(31px,7vw,50px);text-wrap:balance}
.t-sec em{font-style:italic;font-weight:400;color:var(--oro-texto)}
.sec--tinta .t-sec em{color:var(--oro-luz)}
.bajada{margin-top:14px;max-width:58ch;color:var(--tinta-2);font-size:16.5px}
.sec--tinta .bajada{color:rgba(253,251,246,.76)}
.dato{font-size:12.5px;font-weight:600;letter-spacing:.02em}

/* Botones: rectos, con peso. El oro siempre lleva texto tinta. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;
  border-radius:2px;font-weight:700;font-size:14.5px;letter-spacing:.04em;
  transition:transform .2s var(--ease),background-color .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn--laton{background:var(--oro);color:var(--tinta)}
.btn--laton:hover{background:var(--oro-h)}
.btn--linea{border:2px solid var(--tinta);color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--papel)}
.sec--tinta .btn--linea{border-color:rgba(253,251,246,.55);color:var(--papel)}
.sec--tinta .btn--linea:hover{background:var(--papel);color:var(--carbon)}
.btn--ancho{width:100%}

/* Solo se oculta si hay JS capaz de revelarlo: sin esto, un fallo de
   script dejaria la pagina entera en blanco. */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:.07s}.js .rv[data-d="2"]{transition-delay:.14s}
.js .rv[data-d="3"]{transition-delay:.21s}.js .rv[data-d="4"]{transition-delay:.28s}

/* ---------- S0 barra de riesgo cero: oro pleno con texto tinta ---------- */
.riesgo{position:relative;background:var(--oro);height:40px;overflow:hidden}
.riesgo__pista{position:relative;height:40px}
.riesgo__msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--tinta);
  opacity:0;transform:translateY(100%);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.riesgo__msg.on{opacity:1;transform:none}
.riesgo__msg.out{opacity:0;transform:translateY(-100%)}
.riesgo__msg svg{width:16px;height:16px;flex:none;stroke:var(--tinta);fill:none}
.riesgo__msg b{font-weight:800}

/* ---------- Cabecera ---------- */
.cab{background:rgba(253,251,246,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--papel-3)}
.cab__in{display:flex;align-items:center;gap:16px;height:64px}
@media(min-width:900px){.cab__in{height:80px}}
.logo{display:flex;flex-direction:column;gap:1px;flex:none}
.logo__m{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;letter-spacing:-.02em}
.logo__m i{font-style:italic;font-weight:400;color:var(--oro-texto)}
.logo__s{display:none;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
@media(min-width:900px){.logo__m{font-size:25px}.logo__s{display:block}}
.menu{display:none;margin-left:auto}
@media(min-width:1040px){.menu{display:block}}
.menu__ul{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600;list-style:none;margin:0;padding:0}
.menu a{position:relative;padding-block:6px}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--oro);
  transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.menu a:hover::after{transform:scaleX(1);transform-origin:left}
.cab__acc{display:flex;align-items:center;gap:4px;margin-left:auto}
@media(min-width:1040px){.cab__acc{margin-left:0}}
.icono{width:46px;height:46px;display:grid;place-items:center;border-radius:2px;transition:background-color .2s}
.icono:hover{background:var(--papel-2)}
.icono svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}
.carrito-btn{position:relative}
.carrito-n{position:absolute;top:5px;right:3px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  border-radius:10px;background:#D3302B;color:#fff;font-size:11px;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--papel);
  transform:scale(0);transition:transform .28s var(--ease)}
.carrito-n.on{transform:scale(1)}
.carrito-btn.pulso{animation:pulso .45s var(--ease)}
@keyframes pulso{0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}

/* ---------- S1 Hero: vitrina clara ---------- */
.hero{padding-block:44px 56px;position:relative;overflow:hidden;background:
  linear-gradient(180deg,var(--papel) 0%,var(--papel-2) 100%)}
@media(min-width:900px){.hero{padding-block:72px 84px}}
.hero__luz,.hero__grano{display:none}
.hero__in{position:relative;z-index:2}
.hero h1{font-size:clamp(38px,8.6vw,68px);max-width:17ch;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:400;color:var(--oro-texto)}
.hero h1 .pct{font-style:normal;font-weight:700;background:var(--oro);color:var(--tinta);padding:0 .12em;border-radius:2px}
.hero__p{margin-top:18px;max-width:50ch;font-size:17.5px;color:var(--tinta-2)}
.hero__p b{color:var(--tinta);font-weight:700;box-shadow:inset 0 -.5em 0 var(--oro-tinte)}

/* Buscador: caja de mostrador, blanca y con marco */
.busca{position:relative;margin-top:30px;max-width:620px;z-index:20}
.busca__caja{display:flex;align-items:center;gap:12px;height:62px;padding:0 8px 0 18px;
  background:#fff;border:2px solid var(--tinta);border-radius:2px;transition:box-shadow .25s,border-color .25s}
.busca.foco .busca__caja{box-shadow:5px 5px 0 0 var(--oro)}
.busca__caja svg{width:21px;height:21px;flex:none;stroke:var(--oro-texto);fill:none;stroke-width:1.8}
.busca input{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;color:var(--tinta);font-size:16.5px}
.busca input::placeholder{color:#9A9287}
.busca__ir{height:46px;padding:0 22px;border-radius:2px;background:var(--oro);color:var(--tinta);
  font-size:14px;font-weight:800;flex:none;transition:background-color .2s}
.busca__ir:hover{background:var(--oro-h)}
@media(max-width:520px){.busca__ir{padding:0 15px}.busca__ir span{display:none}}
.suge{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:2px solid var(--tinta);
  border-radius:2px;box-shadow:6px 6px 0 rgba(23,19,16,.12);overflow:hidden;max-height:min(60vh,420px);overflow-y:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.suge.on{opacity:1;transform:none;pointer-events:auto}
.suge__gr{padding:12px 16px 5px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.suge__it{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;text-align:left;transition:background-color .15s}
.suge__it:hover,.suge__it[aria-selected="true"]{background:var(--oro-tinte)}
.suge__mini{width:34px;height:44px;flex:none;background:var(--papel);border:1px solid var(--papel-3);overflow:hidden}
.suge__tx{flex:1;min-width:0}
.suge__tx b{display:block;font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suge__tx b mark{background:var(--oro-tinte);color:var(--oro-texto)}
.suge__tx span{font-size:12px;color:var(--tinta-2)}
.suge__pr{font-weight:800;font-size:14px;color:var(--oro-texto);flex:none;font-variant-numeric:tabular-nums}

/* 3 rutas: fichas de mostrador */
.rutas{display:grid;gap:12px;margin-top:32px}
@media(min-width:760px){.rutas{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}}
.ruta{position:relative;display:block;overflow:hidden;border-radius:2px;min-height:128px;padding:20px;
  border:2px solid var(--tinta);background:#fff;color:var(--tinta);isolation:isolate;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
@media(min-width:760px){.ruta{min-height:270px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}}
.ruta__fx{position:absolute;inset:0;z-index:-1;opacity:.16;transition:transform .6s var(--ease),opacity .3s}
.ruta:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 0 var(--oro)}
.ruta:hover .ruta__fx{transform:scale(1.06);opacity:.24}
.ruta__n{font-family:var(--display);font-size:27px;font-weight:700}
@media(min-width:760px){.ruta__n{font-size:35px}}
.ruta__d{font-size:12.5px;font-weight:600;color:var(--tinta-2);margin-top:4px}
.ruta__cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:800;color:var(--oro-texto)}
.ruta--mujer .ruta__fx{background:radial-gradient(120% 90% at 70% 15%,#C97BA6,transparent)}
.ruta--hombre .ruta__fx{background:radial-gradient(120% 90% at 70% 15%,#2E6FA8,transparent)}
.ruta--arabe .ruta__fx{background:radial-gradient(120% 90% at 70% 15%,#C4801F,transparent)}

/* Sellos */
.sellos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:38px}
@media(min-width:760px){.sellos{grid-template-columns:repeat(4,1fr)}}
.sello{display:flex;gap:11px;align-items:flex-start;padding:15px;background:#fff;border:1px solid var(--papel-3);
  border-left:4px solid var(--oro);border-radius:2px}
.sello svg{width:20px;height:20px;flex:none;stroke:var(--oro-texto);fill:none;stroke-width:1.7;margin-top:2px}
.sello b{display:block;font-weight:700;font-size:14.5px}
.sello span{font-size:12.5px;color:var(--tinta-2)}

/* ---------- S2 Perfilador: conversación, no formulario ----------
   La tienda pregunta y el visitante contesta con burbujas. El hilo crece
   hacia abajo y la zona de opciones queda pegada al borde inferior de la
   tarjeta, así nunca hay que buscar dónde tocar.                        */
.conv-sec{position:relative}
.conv__cab-sec{max-width:660px;margin:0 auto 30px;text-align:center}
.conv__cab-sec .ojo{margin-inline:auto}
.conv__cab-sec .bajada{margin-inline:auto}

.conv{max-width:720px;margin-inline:auto;background:#fff;border:1px solid var(--papel-3);border-radius:2px;
  box-shadow:0 22px 48px -34px rgba(0,0,0,.45)}

/* Cabecera del hilo */
.conv__cab{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--papel-3);
  background:var(--papel);border-radius:2px 2px 0 0}
.conv__av{width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;background:var(--oro);
  display:grid;place-items:center}
.conv__av img{width:100%;height:100%;object-fit:contain;padding:3px}
.conv__av b{font-family:var(--display);font-weight:600;font-size:15px;color:var(--tinta)}
.conv__id{min-width:0}
.conv__id b{display:block;font-size:14.5px;font-weight:800;line-height:1.2}
.conv__id span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta-2)}
.conv__id span::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#1B8A45}
.conv__otra{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;
  border:1.5px solid var(--papel-3);border-radius:999px;font-size:12.5px;font-weight:700;color:var(--tinta-2)}
.conv__otra svg{width:14px;height:14px;flex:none}
.conv__otra:hover{border-color:var(--tinta);color:var(--tinta)}
@media(max-width:519px){.conv__otra span{display:none}}

/* El hilo */
.conv__hilo{padding:20px 16px;display:flex;flex-direction:column;gap:12px;min-height:300px}
/* Con el hilo vivo la altura se fija y el scroll es interno: si no, la
   sección crecería medio metro y el resto de la home se iría abajo.
   Al llegar las recomendaciones se suelta, que ahí sí conviene ver todo. */
.conv__hilo--vivo{max-height:min(56vh,470px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){.conv__hilo--vivo{scroll-behavior:auto}}
@media(min-width:640px){.conv__hilo{padding:24px 22px}}
.bu{max-width:82%;padding:11px 15px;font-size:15px;line-height:1.45;animation:bu-sube .32s var(--ease)}
@keyframes bu-sube{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.bu--t{align-self:flex-start;background:var(--papel-2);border-left:3px solid var(--oro);border-radius:0 12px 12px 0}
.bu--c{align-self:flex-end;background:var(--oro-tinte);border:1px solid var(--oro-borde);border-radius:12px 0 0 12px;
  font-weight:700}
.bu--ancha{max-width:100%;align-self:stretch;background:none;border:0;padding:0}
.bu--esc{align-self:flex-start;display:flex;gap:4px;padding:14px 15px;background:var(--papel-2);border-radius:0 12px 12px 0}
.bu--esc i{width:6px;height:6px;border-radius:50%;background:var(--tinta-2);animation:bu-pt 1.1s infinite}
.bu--esc i:nth-child(2){animation-delay:.18s}
.bu--esc i:nth-child(3){animation-delay:.36s}
@keyframes bu-pt{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.bu--esc{display:none}}

/* Zona de acción. No va pegada: el hilo ya tiene scroll propio, así que
   las opciones quedan siempre bajo la última burbuja sin necesidad de
   sticky — y pegada se comía pantalla al bajar por el resto de la home. */
.conv__pie{border-top:1px solid var(--papel-3);background:var(--papel);
  padding:13px 16px;border-radius:0 0 2px 2px}
@media(min-width:640px){.conv__pie{padding:14px 22px}}
.conv__pie[hidden]{display:none}
.conv__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:7px;min-height:44px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--papel-3);background:#fff;text-align:left;
  transition:border-color .16s,background-color .16s,transform .16s var(--ease)}
.chip b{font-weight:700;font-size:14.5px;line-height:1.2}
.chip small{font-size:12px;font-weight:500;color:var(--tinta-2)}
/* En móvil los chips pasan a filas completas: esconder el apoyo dejaba
   "Dulce" a secas, que no dice nada frente a "Vainilla, caramelo, ámbar". */
@media(max-width:519px){
  .conv__chips{gap:7px}
  .chip{width:100%;min-height:44px;padding:8px 15px;border-radius:12px}
  .chip small{margin-left:auto;padding-left:10px;text-align:right}
}
@media(hover:hover){.chip:hover{border-color:var(--tinta);background:var(--oro-tinte);transform:translateY(-1px)}}
.chip:hover small{color:var(--oro-texto)}

/* Recomendaciones dentro del hilo */
.res-grid{display:grid;gap:12px}
.res-grid>*{min-width:0}
@media(min-width:560px){.res-grid{grid-template-columns:repeat(3,1fr)}}
.res-senuelo{display:flex;align-items:center;gap:13px;padding:12px;border:1px dashed var(--papel-3);
  border-radius:2px;background:#fff}
.res-senuelo[hidden]{display:none}
.res-senuelo .mini{width:44px;height:58px;background:var(--papel-2);flex:none;overflow:hidden;border:1px solid var(--papel-3)}
.res-senuelo b{display:block;font-weight:700;font-size:14.5px;line-height:1.25}
.res-senuelo span{font-size:12.5px;color:var(--tinta-2)}
.res-senuelo .pr{margin-left:auto;font-weight:700;font-size:15.5px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.res-senuelo .pr small{display:block;font-size:10.5px;font-weight:500;color:var(--tinta-2)}

/* Guardar el perfil por WhatsApp: al final, nunca antes */
.wa-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wa-form label{flex:1 1 100%;font-size:13px;font-weight:700}
.wa-form label span{display:block;font-weight:500;color:var(--tinta-2);font-size:12.5px;margin-top:1px}
.wa-form input{flex:1;min-width:160px;height:48px;padding:0 14px;border-radius:999px;border:1.5px solid var(--papel-3);
  background:#fff;outline:none}
.wa-form input:focus{border-color:var(--tinta)}
.wa-form button{height:48px;padding:0 22px;border-radius:999px;background:var(--oro);color:var(--tinta);
  font-weight:800;font-size:14px}
.wa-form button:hover{background:var(--oro-h)}
.wa-ok{display:none;margin-top:9px;font-size:13px;font-weight:700;color:var(--oro-texto)}
.wa-ok.on{display:block}

.conv__nota{display:flex;align-items:center;justify-content:center;gap:9px;max-width:720px;
  margin:16px auto 0;font-size:13px;color:var(--tinta-2);text-align:left}
.conv__nota svg{width:17px;height:17px;flex:none;stroke:var(--oro-texto)}

/* Sin JavaScript el hilo no se puede montar: queda la lista, legible.
   Nunca se esconde desde aquí — la retira el propio script. */
.conv__base{display:flex;flex-direction:column;gap:24px;width:100%}
.conv__pregunta{display:grid;gap:11px}
.conv__q{font-family:var(--display);font-size:20px;font-weight:600}
.conv__ops{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Tarjeta de producto ----------
   Foto cuadrada y nombre a dos lineas: la tarjeta bajo de 613 a ~500 px y
   precios y botones quedan alineados entre tarjetas aunque un titulo sea
   el triple de largo que otro.                                          */
.card{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--papel-3);border-radius:2px;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
@media(hover:hover){
  .card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 0 var(--oro);border-color:var(--tinta)}
}
.card__fig{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
/* Las fotos del catalogo ya vienen cuadradas y con fondo blanco: sin
   relleno llenan el cuadro entero y no recortan nada. */
.card__fig .im{position:absolute;inset:0;display:block;
  transition:opacity .4s,transform .5s var(--ease)}
.card__fig .im img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.card__fig .im--b{opacity:0}
.card:hover .card__fig .im--a{opacity:0;transform:scale(1.04)}
.card:hover .card__fig .im--b{opacity:1}

.badge{position:absolute;top:0;left:0;z-index:3;font-size:12px;font-weight:800;letter-spacing:.02em;
  background:var(--lacre);color:#fff;padding:5px 10px}
.stock{position:absolute;top:0;right:0;z-index:3;font-size:11px;font-weight:700;
  background:var(--tinta);color:var(--papel);padding:5px 9px}
.stock--no{background:var(--tinta-2)}

.card__cu{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1}
.card__mar{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__nom{margin-top:2px;font-family:var(--display);font-size:18.5px;font-weight:600;line-height:1.2;
  color:var(--tinta);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.2em)}
/* El titulo cubre toda la tarjeta: se puede pulsar en cualquier punto. */
.card__nom a::after{content:"";position:absolute;inset:0;z-index:1}
.card__esp{margin-top:5px;font-size:12px;color:var(--tinta-2);overflow-wrap:anywhere}
/* Estrellas: solo se pintan con reseñas reales (ver pym_estrellas en
   inc/data.php). El relleno dorado se recorta al porcentaje exacto del
   promedio con clip-path, asi un 4.3 se ve como 4.3 y no redondeado. */
.estrellas{position:relative;display:inline-block;width:70px;height:14px;margin-top:3px;vertical-align:top}
.estrellas svg{position:absolute;inset:0;width:100%;height:100%}
.estrellas__fondo path{fill:var(--papel-3)}
.estrellas__oro{clip-path:inset(0 calc(100% - var(--pct)) 0 0)}
.estrellas__oro path{fill:var(--oro)}
.card__esp i{font-style:normal;font-weight:700;color:var(--oro-texto)}
.card__fam{position:relative;z-index:2;text-decoration:underline;text-decoration-color:var(--papel-3);
  text-underline-offset:2px}
.card__fam:hover{color:var(--oro-texto);text-decoration-color:var(--oro)}

.card__pr{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card__ahora{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* El ahorro en pesos es el unico numero que cambia de un producto a otro:
   el porcentaje es el mismo en 584 de 586 fichas. */
.card__ahorro{margin-top:2px;font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.card__ahorro s{text-decoration:line-through}
.card__ahorro b{font-weight:700;color:var(--oro-texto)}

.card__add{position:relative;z-index:2;margin-top:11px;width:100%;min-height:46px;border-radius:2px;
  background:var(--oro);color:var(--tinta);font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .2s,color .2s}
.card__add:hover{background:var(--tinta);color:var(--oro-luz)}
.card__add.hecho{background:var(--tinta);color:var(--oro-luz)}
.card__add--linea{background:#fff;border:1.5px solid var(--tinta);font-weight:700}
.card__add--linea:hover{background:var(--tinta);color:var(--papel)}

.card--agotada .card__fig .im{filter:grayscale(1);opacity:.55}
.card--agotada .card__ahora{color:var(--tinta-2)}

/* ---------- S3 Ofertas ---------- */
.of__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.reloj{display:flex;align-items:center;gap:11px;flex:none}
.reloj__tx{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);max-width:110px;line-height:1.3}
.reloj__d{display:flex;gap:5px}
.reloj__u{background:var(--tinta);color:var(--papel);padding:8px 9px 6px;min-width:46px;text-align:center;border-radius:2px}
.reloj__u b{display:block;font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--oro-luz)}
.reloj__u span{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(253,251,246,.6)}
.riel{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;margin-top:26px;padding-bottom:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.riel>*{scroll-snap-align:start}
@media(min-width:560px){.riel{grid-auto-columns:44%}}
@media(min-width:900px){.riel{grid-auto-columns:25.5%;gap:16px}}
@media(min-width:1200px){.riel{grid-auto-columns:23%}}
/* Pie del carrusel: el botón se estira hasta topar con las flechas.
   Debajo de 900 px las flechas no existen, así que queda a todo lo ancho. */
.riel-pie{display:flex;align-items:center;gap:16px;margin-top:8px}
.riel-pie .btn{flex:1}
.riel-nav{display:none;gap:8px}
@media(min-width:900px){.riel-nav{display:flex}}
.riel-nav button{width:46px;height:46px;border:2px solid var(--tinta);border-radius:2px;display:grid;place-items:center;transition:background-color .2s,color .2s}
.riel-nav button:hover{background:var(--oro)}
.riel-nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- S4 Familias: tiras de papel ---------- */
.fam{position:relative;overflow:hidden;background:var(--papel);transition:background-color .6s var(--ease)}
.fam__aura{position:absolute;inset:0;pointer-events:none;opacity:.5;transition:background .6s var(--ease)}
.fam__in{position:relative;z-index:2}
.fam__cols{display:grid;gap:30px}
.fam__cols>*{min-width:0}
@media(min-width:1000px){
  /* Tres zonas: el abanico necesita 420 px para abrirse sin pisar el
     titulo, y las fichas se llevan la fila entera (258 px cada una en
     vez de los 171 px que les dejaba la columna estrecha).
     display:contents deja que descripcion y productos, que viven
     dentro del mismo panel, caigan en zonas distintas de la rejilla. */
  .fam__cols{grid-template-columns:minmax(0,440px) minmax(0,1fr);
    grid-template-areas:'abanico desc' 'prods prods' 'link link';
    column-gap:52px;row-gap:0;align-items:start}
  .fam__abanico{grid-area:abanico}
  .fam__cols #famPanel,.fam__cols .fam__panel{display:contents}
  .fam__cols .fam__panel[hidden]{display:none}
  .fam__desc{grid-area:desc;margin-top:0}
  .fam__prods{grid-area:prods}
  .fam__link{grid-area:link}
}
@media(min-width:1280px){.fam__cols{grid-template-columns:minmax(0,520px) minmax(0,1fr)}}
.abanico{display:flex;gap:8px;margin-top:22px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.abanico::-webkit-scrollbar{display:none}
/* --paso: cuanto se separa la base de cada tira. --ang: cuanto gira.
   Son los dos mandos del abanico; subirlos lo abre y lo ensancha. */
@media(min-width:1000px){
  .abanico{display:block;position:relative;height:400px;margin-top:14px;
    overflow:visible;padding:0;--paso:32px;--ang:8deg}
}
@media(min-width:1280px){.abanico{--paso:44px;--ang:10deg}}
.tira{position:relative;flex:none;width:76px;height:212px;border-radius:1px 1px 24px 24px;
  background:#fff;color:var(--tinta);border:1px solid var(--papel-3);
  box-shadow:3px 3px 0 rgba(23,19,16,.08);display:flex;flex-direction:column;align-items:center;padding:12px 6px;
  cursor:pointer;transition:transform .45s var(--ease),box-shadow .35s;transform-origin:50% 100%}
.tira__tinte{position:absolute;left:0;right:0;bottom:0;height:42%;border-radius:0 0 23px 23px;background:var(--tinte);opacity:.9;
  transition:height .45s var(--ease);-webkit-mask-image:linear-gradient(180deg,transparent,#000 34%);mask-image:linear-gradient(180deg,transparent,#000 34%)}
.tira__n{position:relative;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.tira:hover{transform:translateY(-9px)}
.tira.act{transform:translateY(-15px);box-shadow:6px 8px 0 var(--oro);border-color:var(--tinta)}
.tira.act .tira__tinte{height:60%}
@media(min-width:1000px){
  /* El pivote va en la esquina inferior izquierda: así el abanico mide
     285 px de ancho y cabe en su columna de 320 px sin tapar el título
     de la familia, que antes quedaba 48 px por debajo de las tiras. */
  /* El pivote se sube 61 px: al girar 45 grados la esquina inferior de
     la ultima tira baja 59 px, y sin este margen se metia encima de
     las fichas de producto. */
  .tira{--t:translateX(calc(var(--n) * var(--paso))) rotate(calc(var(--n) * var(--ang)));
    position:absolute;left:0;top:auto;bottom:66px;width:84px;height:296px;
    transform:var(--t);transform-origin:0% 100%}
  .tira:hover{transform:var(--t) translateY(-14px)}
  .tira.act{transform:var(--t) translateY(-22px) scale(1.03);z-index:9}
}
.fam__desc{margin-top:20px;min-height:92px}
.fam__desc h3{font-family:var(--display);font-size:clamp(27px,6vw,40px);font-weight:600}
.fam__desc h3 em{font-style:italic;font-weight:400;color:var(--oro-texto)}
.fam__desc p{margin-top:10px;color:var(--tinta-2);font-size:16px;max-width:46ch}
.fam__notas{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.fam__notas span{font-size:11.5px;font-weight:600;border:1px solid var(--papel-3);background:#fff;padding:5px 11px;border-radius:99px;color:var(--tinta-2)}
.fam__prods{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.fam__prods>*{min-width:0}
@media(min-width:700px){.fam__prods{grid-template-columns:repeat(4,1fr)}}
.fam__link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;font-weight:800;color:var(--oro-texto);
  border-bottom:3px solid var(--oro);padding-bottom:3px;transition:gap .25s var(--ease)}
.fam__link:hover{gap:14px}

/* ---------- S5 Marcas ---------- */
.marcas{padding-block:48px;background:var(--papel-2);border-block:1px solid var(--papel-3);overflow:hidden}
.marcas__cab{text-align:center;margin-bottom:26px}
.marcas__cab .ojo{display:inline-flex}
.marcas__cab h2{font-family:var(--display);font-size:clamp(22px,4.4vw,30px);font-weight:600}
.cinta{position:relative;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.cinta+.cinta{margin-top:12px}
.cinta__p{display:flex;width:max-content;gap:12px;will-change:transform}
.cinta--a .cinta__p{animation:corre 54s linear infinite}
.cinta--b .cinta__p{animation:corre 64s linear infinite reverse}
.cinta:hover .cinta__p{animation-play-state:paused}
@keyframes corre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marca{flex:none;display:grid;place-items:center;height:72px;padding:0 24px;min-width:154px;background:#fff;
  border:1px solid var(--papel-3);border-radius:2px;font-family:var(--display);font-size:15.5px;font-weight:600;
  text-align:center;color:var(--tinta-2);transition:color .25s,border-color .25s,box-shadow .25s}
.marca:hover{color:var(--tinta);border-color:var(--tinta);box-shadow:3px 3px 0 var(--oro)}

/* ---------- S6 Prueba social ---------- */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:40px}
.cifras>*{min-width:0}
.cifra{position:relative;background:#fff;border:1px solid var(--papel-3);border-top:4px solid var(--oro);
  border-radius:2px;padding:20px 12px 22px;text-align:center;overflow:hidden}
.cifra__ic{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 8px;border-radius:50%;
  background:var(--oro-tinte);color:var(--oro-texto)}
.cifra__ic svg{width:18px;height:18px}
.cifra b{display:block;font-size:clamp(26px,6vw,42px);font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05}
.cifra__k{display:block;margin-top:4px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2)}
/* La barra corre a la par del contador: el número deja de ser un dato
   suelto y se convierte en algo que ocurre delante del visitante. */
.cifra__barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--papel-2);display:block}
.cifra__barra::after{content:"";display:block;height:100%;width:0;background:var(--oro)}
/* La transicion vive solo en el estado contado: al salir de pantalla la
   barra vuelve a cero de golpe y queda lista para contar otra vez. */
.cifra.contada .cifra__barra::after{width:100%;
  transition:width 1.6s var(--ease);transition-delay:var(--retardo,0s)}
.cifra.contada b{animation:cifra-pop .5s var(--ease)}
@keyframes cifra-pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .cifra.contada b{animation:none}
  .cifra__barra::after{transition:none;width:100%}
}

.social__cols{display:grid;gap:34px}
.social__cols>*{min-width:0}
@media(min-width:980px){.social__cols{grid-template-columns:minmax(0,1fr) 320px;gap:46px;align-items:start}}
.resenas{display:grid;gap:12px}
.resenas>*{min-width:0}
@media(min-width:640px){.resenas{grid-template-columns:repeat(2,1fr)}}
.res{background:#fff;border:1px solid var(--papel-3);border-radius:2px;padding:18px}
.res__e{display:flex;gap:2px;margin-bottom:10px}
.res__e svg{width:15px;height:15px;fill:var(--oro)}
.res p{font-size:15.5px;line-height:1.55}
.res p mark{background:var(--oro-tinte);color:var(--tinta);padding:0 3px;box-shadow:inset 0 -2px 0 var(--oro)}
.res__q{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--papel-2)}
.res__q .res__av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--oro);color:var(--tinta);font-size:13px;font-weight:800;flex:none}
.res__q b{display:block;font-weight:700;font-size:14px}
.res__q span{font-size:11.5px;color:var(--tinta-2)}
.res__ver{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--oro-texto);text-transform:uppercase;flex:none}
.res__ver svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4}

/* ---------- Mapa de despachos ----------
   El bloque cambia de forma según el hueco que le toque: en la columna
   estrecha de 320 px se apila, y cuando no hay reseñas y ocupa todo el
   ancho, mapa y destinos se ponen lado a lado en vez de dejar medio
   metro de negro vacío. Por eso va con @container y no con @media.      */
.mapa{position:relative;overflow:hidden;background:var(--carbon);color:var(--papel);
  border-radius:2px;padding:20px;container-type:inline-size}
.mapa h3{display:flex;align-items:center;gap:9px;font-family:var(--ui);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--oro-luz)}
.mapa__vivo{width:8px;height:8px;flex:none;border-radius:50%;background:#1EA34B;
  box-shadow:0 0 0 0 rgba(30,163,75,.6);animation:vivo 2.2s ease-out infinite}
@keyframes vivo{0%{box-shadow:0 0 0 0 rgba(30,163,75,.55)}70%,100%{box-shadow:0 0 0 9px rgba(30,163,75,0)}}

.mapa__in{display:grid;gap:16px;margin-top:16px;align-items:center}
@container (min-width:430px){
  .mapa__in{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:28px}
}
.mapa__lienzo{position:relative}
.mapa__svg{margin-inline:auto;width:100%;max-width:210px;overflow:visible}
.mapa__pais{fill:rgba(253,251,246,.05);stroke:var(--oro);stroke-width:1.6;stroke-linejoin:round;
  stroke-dasharray:2600;stroke-dashoffset:2600}
.mapa.dibujado .mapa__pais{animation:traza 2.2s var(--ease) forwards}
@keyframes traza{to{stroke-dashoffset:0}}

.mapa__ruta{fill:none;stroke:var(--oro-luz);stroke-width:1.4;stroke-linecap:round;opacity:.85;
  stroke-dasharray:var(--largo,300);stroke-dashoffset:var(--largo,300);animation:vuela 1.1s var(--ease) forwards}
@keyframes vuela{to{stroke-dashoffset:0}}
.mapa__origen{fill:var(--papel);stroke:var(--oro);stroke-width:1.6}
.mapa__pt{fill:var(--oro-luz);opacity:.5;transition:opacity .4s,r .4s var(--ease)}
.mapa__pt.act{opacity:1;fill:#fff}
.mapa__halo{fill:none;stroke:var(--oro-luz);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:ping 3.4s ease-out infinite}
@keyframes ping{0%{opacity:.8;transform:scale(.35)}70%,100%{opacity:0;transform:scale(2.8)}}

.mapa__et{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(253,251,246,.5)}
.mapa__feed{position:relative;height:38px;margin-top:2px;overflow:hidden}
.mapa__feed li{position:absolute;inset:0;display:flex;align-items:center;
  font-family:var(--display);font-size:23px;font-weight:600;line-height:1.15;color:var(--oro-luz);
  opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s var(--ease)}
.mapa__feed li.on{opacity:1;transform:none}
.mapa__pie{margin-top:12px;font-size:12.5px;color:rgba(253,251,246,.58);
  border-top:1px solid rgba(253,251,246,.14);padding-top:11px}

@media(prefers-reduced-motion:reduce){
  .mapa__halo{display:none}
  .mapa__vivo{animation:none}
  .mapa__pais{stroke-dashoffset:0}
  .mapa.dibujado .mapa__pais{animation:none}
  .mapa__ruta{animation:none;stroke-dashoffset:0}
}

/* ---------- S7 Objeciones ---------- */
/* Es una lista de dudas, no un menú: titulares de 50 px y reglas negras de
   2 px la convertían en un muro. Todo baja un escalón y las separaciones
   pasan a ser líneas finas. */
.faq{max-width:760px;margin-inline:auto}
.faq .t-sec{font-size:clamp(26px,4.2vw,34px)}
.faq__it{border-top:1px solid rgba(23,19,16,.13)}
.faq__it:last-child{border-bottom:1px solid rgba(23,19,16,.13)}
.faq__b{width:100%;display:flex;align-items:flex-start;gap:16px;padding:16px 0;text-align:left}
.faq__b h3{font-family:var(--display);font-size:clamp(16.5px,2.4vw,19.5px);font-weight:600;flex:1;line-height:1.35}
.faq__b:hover h3{color:var(--oro-texto)}
.faq__mas{width:18px;height:18px;flex:none;position:relative;margin-top:5px}
.faq__mas::before,.faq__mas::after{content:"";position:absolute;background:var(--oro-texto);transition:transform .3s var(--ease),opacity .25s}
.faq__mas::before{left:0;top:8px;width:18px;height:2px}
.faq__mas::after{left:8px;top:0;width:2px;height:18px}
.faq__it.on .faq__mas::after{transform:rotate(90deg);opacity:0}
.faq__pan{overflow:hidden;height:0;transition:height .38s var(--ease)}
.faq__cu{padding:0 0 20px;max-width:66ch;color:var(--tinta-2);font-size:15px;line-height:1.62}
.faq__cu strong{color:var(--tinta);font-weight:700}
.pasos{display:grid;gap:10px;margin-top:16px}
@media(min-width:640px){.pasos{grid-template-columns:repeat(3,1fr)}}
.paso{background:#fff;border:1px solid var(--papel-3);border-left:4px solid var(--oro);border-radius:2px;padding:14px}
.paso b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto);margin-bottom:5px}
.paso span{font-size:14px;color:var(--tinta)}
.ficha-legal{display:grid;gap:8px;margin-top:14px;font-size:13.5px}
.ficha-legal div{display:flex;gap:10px}
.ficha-legal dt{color:var(--tinta-2);min-width:112px;font-weight:600}
.ficha-legal a{color:var(--oro-texto);font-weight:800}

/* ---------- S10 Guía ---------- */

/* ---------- S11 Pie ---------- */
.pie{background:var(--tinta);color:var(--papel);padding-block:62px 26px}
@media(min-width:900px){.pie{padding-block:78px 30px}}
.pie__grid{display:grid;gap:38px}
.pie__grid>*{min-width:0}
@media(min-width:760px){.pie__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.pie h4{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-luz);
  margin-bottom:16px;padding-bottom:9px;border-bottom:1px solid rgba(253,251,246,.14)}
.pie li+li{margin-top:11px}
.pie li a{font-size:14.5px;color:rgba(253,251,246,.72);transition:color .16s,padding-left .16s}
.pie li a:hover{padding-left:5px}
.pie li a:hover{color:var(--oro-luz)}
.pie .logo__m{color:var(--papel)}
.pie .logo__m i{color:var(--oro-luz)}
.pie__sobre p{font-size:14px;color:rgba(253,251,246,.6);margin-top:12px;max-width:36ch}
.pie__dat{margin-top:14px;font-size:13px;color:rgba(253,251,246,.55);display:grid;gap:6px}
.pie__dat a{color:var(--oro-luz)}
.pie__soc{display:flex;gap:8px;margin-top:16px}
.pie__soc a{width:42px;height:42px;border:1px solid rgba(253,251,246,.2);border-radius:2px;display:grid;place-items:center}
.pie__soc a:hover{border-color:var(--oro);color:var(--oro-luz)}
.pie__soc svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
/* Medios de pago: marcas, no texto suelto. Las que tienen forma propia se
   dibujan; las demas van como logotipo de texto con su color, que es mas
   honesto que un trazado malo de un logo real. */
.pie__medios{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:42px;padding-top:26px;
  border-top:1px solid rgba(253,251,246,.14)}
.pie__medio{height:40px;min-width:60px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;background:#fff;border-radius:3px;color:#1A1512}
.pie__medio b{font-size:14px;font-weight:800;letter-spacing:.01em;line-height:1}
.pie__medio svg{width:17px;height:17px;flex:none}
.pie__medio--ancho{background:var(--oro);color:var(--tinta)}
.pie__medio--ancho b{font-size:12.5px;font-weight:800}
.pie__mc{width:38px;height:24px}
.pie__medio--visa b{font-style:italic;font-size:16px;letter-spacing:-.02em;color:#1A1F71}
.pie__medio--pse b{color:#0B4EA2}
.pie__medio--addi b{font-size:16px;letter-spacing:-.03em;color:#0A2A5E;text-transform:lowercase}
/* El max-width:100% general de las imagenes lo encogia a 34 px dentro de la ficha. */
.pie__medio--bold .pie__logo{width:52px;height:19px;max-width:none;flex:none}
.pie__medio--coord b{font-size:12.5px;color:#C8102E}

.pie__legal{margin-top:26px;padding-top:20px;border-top:1px solid rgba(253,251,246,.1);
  font-size:11.5px;color:rgba(253,251,246,.42);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}

/* ---------- Mini-carrito ---------- */
.velo{position:fixed;inset:0;z-index:98;background:rgba(23,19,16,.5);opacity:0;pointer-events:none;transition:opacity .3s}
.velo.on{opacity:1;pointer-events:auto}
.cesta{position:fixed;top:0;right:0;bottom:0;z-index:99;width:min(500px,94vw);background:var(--papel);
  border-left:4px solid var(--oro);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .38s var(--ease)}
.cesta.on{transform:none}
.cesta__cab{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--papel-3)}
.cesta__cab h2{font-family:var(--display);font-size:23px;font-weight:600;flex:1}
.cesta__x{width:44px;height:44px;display:grid;place-items:center;border-radius:2px}
.cesta__x:hover{background:var(--papel-2)}
.cesta__x svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none}
.cesta__cu{flex:1;overflow-y:auto;padding:14px 18px}
.cesta__vacia{text-align:center;padding:44px 10px;color:var(--tinta-2);font-size:15px}
.li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--papel-3)}
.li__im{width:56px;height:70px;flex:none;background:#fff;border:1px solid var(--papel-3);overflow:hidden}
.li__tx{flex:1;min-width:0}
.li__tx b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;overflow-wrap:anywhere}
.li__tx span{font-size:12px;color:var(--tinta-2)}
.li__pr{font-size:15px;font-weight:800;color:var(--oro-texto);margin-top:5px;display:block;font-variant-numeric:tabular-nums}
.li__q{display:flex;align-items:center;gap:2px;margin-top:7px;border:1px solid var(--papel-3);width:max-content}
.li__q button{width:32px;height:32px;display:grid;place-items:center;font-weight:700;color:var(--tinta-2)}
.li__q button:hover{color:var(--oro-texto)}
.li__q b{width:28px;text-align:center;font-size:13.5px;font-weight:700}
.cross{margin-top:20px;padding-top:16px;border-top:3px solid var(--oro)}
.cross h3{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--oro-texto);margin-bottom:12px}
.cross__it{display:flex;gap:11px;align-items:center;width:100%;text-align:left;padding:9px 0}
.cross__it .li__im{width:44px;height:56px}
.cross__it b{display:block;font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.cross__it span{font-size:12px;color:var(--tinta-2)}
.cross__add{margin-left:auto;flex:none;width:36px;height:36px;border:2px solid var(--tinta);border-radius:50%;
  display:grid;place-items:center;color:var(--tinta);font-weight:800;transition:background-color .2s}
.cross__add:hover{background:var(--oro)}
.cesta__pie{padding:16px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--papel-3);background:var(--papel-2)}
.cesta__tot{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--tinta-2)}
.cesta__tot b{font-size:24px;font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums}
.cesta__envio{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--oro-texto);margin-top:5px}
.cesta__pago{display:flex;align-items:center;gap:9px;margin:12px 0;padding:11px 13px;border-radius:2px;background:var(--oro-tinte);border:1px solid var(--oro-borde)}
.cesta__pago svg{width:20px;height:20px;flex:none;stroke:var(--oro-texto);fill:none;stroke-width:1.7}
.cesta__pago span{font-size:13px}
.cesta__pago b{color:var(--oro-texto);font-weight:800}
.vuela{position:fixed;z-index:120;pointer-events:none;overflow:hidden;background:#fff;border:1px solid var(--papel-3)}

/* ---------- Salida por intención ---------- */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .cinta__p{animation:none}
  .mapa__halo{display:none}
}
/* =========================================================================
   CATÁLOGO
   Filtros por atributo, nunca por categoría: el árbol de categorías tiene
   80 nombres duplicados (Diesel aparece dos veces, con 20 y 19 productos).
   ========================================================================= */
.cat{padding-block:26px 70px;background:var(--papel)}
@media(min-width:900px){.cat{padding-block:34px 90px}}

.cat__cab{max-width:70ch;margin-bottom:22px}
.migas{font-size:12.5px;color:var(--tinta-2);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.migas a:hover{color:var(--oro-texto)}
.migas span{color:var(--papel-3)}
.cat__cab .t-sec{font-size:clamp(27px,5vw,40px)}
.cat__cab .bajada{margin-top:10px;font-size:15.5px}

/* ---------- Barra de herramientas ---------- */
.cat__barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-block:12px;border-block:1px solid var(--papel-3);background:var(--papel)}
/* Pegada solo en móvil: con 586 productos, tener que subir hasta arriba
   para volver a filtrar es lo que hace que la gente se rinda. */
@media(max-width:1039px){
  .cat__barra{position:sticky;top:var(--cab-alto,105px);z-index:40}
}
.cat__filtrar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border:1.5px solid var(--tinta);border-radius:2px;font-size:14px;font-weight:700;background:#fff;
  transition:background-color .2s,color .2s}
.cat__filtrar:hover{background:var(--tinta);color:var(--papel)}
.cat__filtrar svg{width:17px;height:17px;flex:none}
.cat__n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:99px;
  background:var(--oro);color:var(--tinta);font-size:11.5px;font-weight:800}
@media(min-width:1040px){.cat__filtrar{display:none}}
.cat__conteo{font-size:14px;color:var(--tinta-2)}
.cat__conteo b{color:var(--tinta);font-weight:800;font-variant-numeric:tabular-nums}
.cat__orden{margin-left:auto;display:flex;gap:8px;align-items:center}
.cat__orden select{min-height:44px;padding:0 34px 0 12px;border:1.5px solid var(--papel-3);border-radius:2px;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C544A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/15px;
  font-size:13.5px;font-weight:600;appearance:none;cursor:pointer;max-width:62vw}
.cat__orden select:hover{border-color:var(--tinta)}
.cat__ir{min-height:44px;padding:0 14px;border:1.5px solid var(--tinta);border-radius:2px;font-weight:700;font-size:13.5px}

/* ---------- Chips de lo que está filtrado ---------- */
.cat__chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:14px}
.cat__chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border-radius:99px;
  background:var(--oro-tinte);border:1px solid var(--oro-borde);font-size:13px;font-weight:700;
  transition:border-color .18s,background-color .18s}
.cat__chip span{font-size:15px;color:var(--oro-texto);line-height:1}
.cat__chip:hover{background:#fff;border-color:var(--tinta)}
.cat__limpia{font-size:13px;font-weight:700;color:var(--tinta-2);text-decoration:underline;
  text-underline-offset:3px;margin-left:4px}
.cat__limpia:hover{color:var(--lacre)}

/* ---------- Dos columnas ---------- */
.cat__cols{display:grid;gap:30px;margin-top:24px}
.cat__cols>*{min-width:0}
@media(min-width:1040px){
  .cat__cols{grid-template-columns:246px minmax(0,1fr);gap:44px;align-items:start}
  .cat__lado{position:sticky;top:calc(var(--cab-alto,105px) + 20px);max-height:calc(100vh - var(--cab-alto,105px) - 40px);
    overflow-y:auto;overscroll-behavior:contain}
}

/* En móvil el panel es un cajón, igual que el carrito: mismo gesto,
   misma mecánica de cierre. */
@media(max-width:1039px){
  .cat__lado{position:fixed;inset:0 0 0 auto;z-index:90;width:min(360px,88vw);background:var(--papel);
    display:flex;flex-direction:column;transform:translateX(101%);transition:transform .3s var(--ease);
    box-shadow:-16px 0 40px -24px rgba(0,0,0,.5)}
  .cat__lado.on{transform:none}
  .cat__lado .filtros{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 18px}
  .cat__lado-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:14px 18px;border-bottom:1px solid var(--papel-3);font-family:var(--display);font-size:21px;font-weight:600}
  .cat__lado-pie{padding:14px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--papel-3);background:var(--papel)}
  .velo--filtros{position:fixed;inset:0;z-index:85;background:rgba(23,19,16,.5);opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s}
  .velo--filtros.on{opacity:1;visibility:visible}
}
@media(min-width:1040px){
  .cat__lado-cab,.cat__lado-pie,.velo--filtros{display:none}
}

/* ---------- Un bloque de filtro ---------- */
.filtro{padding-block:16px;border-top:1px solid var(--papel-3)}
.filtro:first-child{border-top:0;padding-top:4px}
.filtro__t{font-family:var(--ui);font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:10px}
.filtro__ul{display:grid;gap:1px}
.filtro__ul li.oculto{display:none}
.filtro__op{display:flex;align-items:center;gap:10px;min-height:38px;padding:4px 6px;margin-inline:-6px;
  border-radius:2px;font-size:14px;transition:background-color .16s}
.filtro__op:hover{background:var(--papel-2)}
.filtro__caja{width:17px;height:17px;flex:none;border:1.5px solid var(--papel-3);border-radius:2px;background:#fff;
  position:relative;transition:background-color .16s,border-color .16s}
.filtro__op.on .filtro__caja{background:var(--oro);border-color:var(--oro)}
.filtro__op.on .filtro__caja::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--tinta);border-width:0 2px 2px 0;transform:rotate(45deg)}
.filtro__nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtro__op.on .filtro__nom{font-weight:700}
.filtro__n{flex:none;font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.filtro__busca{width:100%;min-height:38px;padding:0 11px;margin-bottom:8px;border:1.5px solid var(--papel-3);
  border-radius:2px;background:#fff;font-size:13.5px;outline:none}
.filtro__busca:focus{border-color:var(--tinta)}
.filtro__mas{margin-top:6px;font-size:13px;font-weight:700;color:var(--oro-texto);text-decoration:underline;
  text-underline-offset:3px}
.filtro__mas:hover{color:var(--tinta)}

/* ---------- Rejilla ---------- */
/* auto-fill en vez de puntos de corte a dedo: la rejilla se reparte sola
   en cualquier ancho y las tarjetas nunca bajan de 220 ni se agigantan. */
.cat__rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cat__rejilla>*{min-width:0}
@media(min-width:700px){.cat__rejilla{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}}

/* ---------- Sin resultados ---------- */
.cat__vacio{text-align:center;padding:56px 20px;background:var(--papel-2);border:1px dashed var(--papel-3);border-radius:2px}
.cat__vacio svg{width:44px;height:44px;margin:0 auto 16px;stroke:var(--oro-texto)}
.cat__vacio h2{font-family:var(--display);font-size:clamp(21px,3.4vw,27px);font-weight:600}
.cat__vacio p{margin-top:8px;color:var(--tinta-2);font-size:15px}
.cat__vacio-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}

/* ---------- Paginación ---------- */
.cat__pag,.woocommerce-pagination{margin-top:34px}
.cat__pag .nav-links,.woocommerce-pagination .page-numbers{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  align-items:center;list-style:none;padding:0}
.cat__pag .page-numbers,.woocommerce-pagination .page-numbers li a,.woocommerce-pagination .page-numbers li span{
  display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;border:1.5px solid var(--papel-3);
  border-radius:2px;background:#fff;font-weight:700;font-size:14px;transition:border-color .18s,background-color .18s}
.cat__pag a.page-numbers:hover{border-color:var(--tinta)}
.cat__pag .page-numbers.current{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.cat__pag .page-numbers.dots{border-color:transparent;background:none;min-width:24px}

/* =========================================================================
   PIE — fila de documentos legales
   Existían publicados pero no se enlazaban desde ninguna parte. En una
   tienda contra entrega, no encontrar la política de devoluciones resta
   justo la confianza que el resto construye.
   ========================================================================= */
.pie__docs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;width:100%}
.pie__docs a{font-size:12.5px;color:rgba(253,251,246,.62);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(253,251,246,.24)}
.pie__docs a:hover{color:var(--oro-luz);text-decoration-color:var(--oro)}

/* =========================================================================
   CUENTA
   ========================================================================= */
.cuenta{padding-block:30px 76px;background:var(--papel)}
@media(min-width:900px){.cuenta{padding-block:40px 96px}}
.cuenta__cab{max-width:64ch;margin-bottom:26px}
.cuenta__cab .t-sec{font-size:clamp(27px,4.6vw,38px)}
.cuenta__cab .bajada{margin-top:8px;font-size:15.5px}

.cuenta__cols{display:grid;gap:24px}
.cuenta__cols>*{min-width:0}
@media(min-width:900px){
  .cuenta__cols{grid-template-columns:250px minmax(0,1fr);gap:52px;align-items:start}
}

/* Menú: columna en escritorio, fichas deslizables en móvil */
.cuenta__nav ul{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.cuenta__nav ul::-webkit-scrollbar{display:none}
.cuenta__nav a{display:flex;align-items:center;gap:9px;white-space:nowrap;min-height:44px;padding:0 14px;
  border:1.5px solid var(--papel-3);border-radius:999px;background:#fff;font-size:14px;font-weight:600;
  transition:border-color .18s,background-color .18s,color .18s}
.cuenta__nav svg{width:17px;height:17px;flex:none}
.cuenta__nav a:hover{border-color:var(--tinta)}
.cuenta__nav .is-active a{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
@media(min-width:900px){
  .cuenta__nav ul{display:grid;gap:4px;overflow:visible}
  .cuenta__nav a{border:0;border-radius:2px;background:none;padding:0 12px;font-weight:600}
  .cuenta__nav a:hover{background:var(--papel-2)}
  .cuenta__nav .is-active a{background:var(--oro-tinte);color:var(--tinta);
    box-shadow:inset 3px 0 0 var(--oro)}
}

/* Bloques del panel */
.cuenta-bloque{background:#fff;border:1px solid var(--papel-3);border-radius:2px;padding:18px;margin-bottom:16px}
.cuenta-bloque__cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.cuenta-bloque__cab h2{font-family:var(--display);font-size:20px;font-weight:600}
.cuenta-bloque__ver{font-size:13.5px;font-weight:700;color:var(--oro-texto);text-decoration:underline;
  text-underline-offset:3px;flex:none}
.cuenta-bloque__ver:hover{color:var(--tinta)}

/* Lista de pedidos */
.pedidos{display:grid;gap:10px}
.pedido__link{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;
  padding:13px 14px;border:1px solid var(--papel-3);border-radius:2px;
  transition:border-color .18s,box-shadow .18s,transform .18s var(--ease)}
@media(hover:hover){
  .pedido__link:hover{border-color:var(--tinta);transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--oro)}
}
.pedido__id b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pedido__id span{display:block;font-size:12px;color:var(--tinta-2)}
.pedido__estado{justify-self:end;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--papel-2);color:var(--tinta-2)}
.pedido__estado--completed{background:#E4F1E8;color:#1B6B3A}
.pedido__estado--processing{background:var(--oro-tinte);color:var(--oro-texto)}
.pedido__estado--on-hold{background:var(--papel-2);color:var(--tinta-2)}
.pedido__estado--cancelled,.pedido__estado--failed,.pedido__estado--refunded{background:#F6E4E4;color:var(--lacre)}
.pedido__datos{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:9px;margin-top:3px;border-top:1px solid var(--papel-2)}
.pedido__n{font-size:12.5px;color:var(--tinta-2)}
.pedido__total{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}

.cuenta-dir{font-style:normal;font-size:15px;line-height:1.6;color:var(--tinta-2)}
.cuenta-dir--vacia{color:var(--tinta-2);font-size:14.5px}

.cuenta-vacio{text-align:center;padding:48px 20px;background:var(--papel-2);border:1px dashed var(--papel-3);
  border-radius:2px;margin-bottom:16px}
.cuenta-vacio svg{width:42px;height:42px;margin:0 auto 14px;stroke:var(--oro-texto)}
.cuenta-vacio h2{font-family:var(--display);font-size:clamp(20px,3.2vw,25px);font-weight:600}
.cuenta-vacio p{margin:8px auto 20px;max-width:46ch;color:var(--tinta-2);font-size:15px}

.cuenta-ayuda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;background:var(--oro-tinte);border:1px solid var(--oro-borde);border-radius:2px}
.cuenta-ayuda b{display:block;font-size:15.5px;font-weight:800}
.cuenta-ayuda span{font-size:13.5px;color:var(--tinta-2)}

/* ---------- Entrar / crear cuenta ---------- */
.cuenta-acceso__nota{display:flex;align-items:flex-start;gap:10px;max-width:74ch;margin-bottom:22px;
  padding:13px 16px;background:var(--oro-tinte);border:1px solid var(--oro-borde);border-radius:2px;
  font-size:14.5px;color:var(--tinta)}
.cuenta-acceso__nota svg{width:18px;height:18px;flex:none;stroke:var(--oro-texto);margin-top:2px}
.cuenta-acceso__cols{display:grid;gap:16px}
@media(min-width:820px){
  .cuenta-acceso__cols{grid-template-columns:repeat(2,1fr);gap:22px;align-items:start}
  .cuenta-acceso__cols--sola{grid-template-columns:minmax(0,440px)}
}
.cuenta-caja{background:#fff;border:1px solid var(--papel-3);border-radius:2px;padding:22px}
.cuenta-caja--crear{background:var(--papel-2)}
.cuenta-caja h2{font-family:var(--display);font-size:23px;font-weight:600}
.cuenta-caja__bajada{margin-top:6px;font-size:14px;color:var(--tinta-2)}
.cuenta-form{margin-top:16px}
.cuenta-campo{display:grid;gap:5px;margin-bottom:13px}
.cuenta-campo label{font-size:13px;font-weight:700}
.cuenta-campo input{width:100%;min-height:48px;padding:0 13px;border:1.5px solid var(--papel-3);border-radius:2px;
  background:#fff;font-size:15px;outline:none;transition:border-color .18s}
.cuenta-campo input:focus{border-color:var(--tinta)}
.cuenta-form__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin:4px 0 16px}
.cuenta-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinta-2)}
.cuenta-olvido{font-size:13.5px;font-weight:700;color:var(--oro-texto);text-decoration:underline;text-underline-offset:3px}
.cuenta-olvido:hover{color:var(--tinta)}
.cuenta-nota{font-size:13.5px;color:var(--tinta-2);margin-bottom:14px}

/* WooCommerce pinta sus avisos con sus propias clases: se les da la
   apariencia del tema en vez de dejarlos con el estilo del plugin. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;margin:0 0 18px;padding:13px 16px;border-radius:2px;font-size:14.5px;
  background:var(--papel-2);border-left:4px solid var(--oro)}
.woocommerce-error{background:#F6E4E4;border-left-color:var(--lacre);color:#5E1C1C}
.woocommerce-message{background:var(--oro-tinte);border-left-color:var(--oro)}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none}

/* Pantallas internas de la cuenta: pedidos, direcciones y datos.
   Los campos los generan WooCommerce y dos plugins de campos extra; aqui
   solo se les da la tipografia y los tamanos del tema. */
.cuenta-form--ancha,.cuenta__main form{max-width:none}
.campos{display:grid;gap:0 16px}
@media(min-width:640px){.campos{grid-template-columns:repeat(2,1fr)}}
.campos .cuenta-campo--ancho,.campos p.form-row-wide{grid-column:1/-1}

/* WooCommerce y sus plugins escriben .form-row / .input-text: se alinean
   con el aspecto de .cuenta-campo en vez de dejar el estilo del plugin. */
.cuenta__main .form-row{display:grid;gap:5px;margin:0 0 13px}
.cuenta__main .form-row label{font-size:13px;font-weight:700}
.cuenta__main .form-row .required{color:var(--lacre);text-decoration:none}
.cuenta__main .input-text,
.cuenta__main .form-row input[type=text],
.cuenta__main .form-row input[type=email],
.cuenta__main .form-row input[type=tel],
.cuenta__main .form-row input[type=password],
.cuenta__main .form-row select,
.cuenta__main .select2-selection{
  width:100%;min-height:48px;padding:0 13px;border:1.5px solid var(--papel-3);border-radius:2px;
  background:#fff;font-family:var(--ui);font-size:15px;color:var(--tinta);outline:none;
  transition:border-color .18s;box-shadow:none}
.cuenta__main .input-text:focus,.cuenta__main .form-row select:focus{border-color:var(--tinta)}
.cuenta__main .select2-selection{display:flex;align-items:center}
.cuenta__main .select2-selection__rendered{padding:0!important;line-height:1.4!important;color:var(--tinta)!important}
.cuenta__main .select2-selection__arrow{top:50%;transform:translateY(-50%);right:8px}
.cuenta__main .woocommerce-input-wrapper{width:100%}
.cuenta-form__acc{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}

/* Direcciones.
   El listado lo pinta el plugin woo-address-book (.address_book), que
   permite guardar varias -- 54 de 218 clientes las usan. Aqui solo se le
   da la piel del tema: venia con enlaces azules, cursivas y botones del
   navegador. Las clases son las que emite el plugin, no inventadas. */
.cuenta-bloque__cab--suelto{margin-bottom:6px}
.cuenta-intro{margin-bottom:20px;font-size:14.5px;color:var(--tinta-2);max-width:70ch}

.cuenta__main .address_book{margin-bottom:22px;background:#fff;border:1px solid var(--papel-3);
  border-radius:2px;padding:18px}
.cuenta__main .address_book > header{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px;margin-bottom:4px}
.cuenta__main .address_book > header h3{font-family:var(--display);font-size:19px;font-weight:600;color:var(--tinta)}
.cuenta__main .address_book .myaccount_address{font-size:13.5px;color:var(--tinta-2);margin-bottom:16px;max-width:70ch}
.cuenta__main .address_book .addresses{display:grid;gap:12px}
@media(min-width:820px){.cuenta__main .address_book .addresses{grid-template-columns:repeat(2,1fr)}}

/* Ficha de una direccion guardada */
.cuenta__main .wc-address-book-address{border:1px solid var(--papel-3);border-radius:2px;padding:15px;
  display:flex;flex-direction:column;gap:11px;background:var(--papel)}
.cuenta__main .wc-address-book-address-default{border-color:var(--oro);box-shadow:inset 3px 0 0 var(--oro)}
.cuenta__main .wc-address-book-address > header{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin:0}
.cuenta__main .wc-address-book-address > header h3{font-family:var(--ui);font-size:13px;font-weight:800;
  letter-spacing:.02em;color:var(--tinta);text-transform:none}
.cuenta__main .wc-address-book-address address{font-style:normal;font-size:14.5px;line-height:1.6;
  color:var(--tinta-2);flex:1}
.cuenta__main .wc-address-book-address-default-label{display:inline-block;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;background:var(--oro);color:var(--tinta);
  padding:4px 9px;border-radius:99px;white-space:nowrap}

/* Botones que emite el plugin: se les quita la piel de WordPress. */
.cuenta__main .address_book .button,
.cuenta__main .wc-address-book-make-default,
.cuenta__main .wc-address-book-delete,
.cuenta__main a.add.button{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;
  border:1.5px solid var(--papel-3);border-radius:2px;background:#fff;color:var(--tinta);
  font-family:var(--ui);font-size:13.5px;font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:none;transition:background-color .18s,color .18s,border-color .18s}
.cuenta__main .address_book .button:hover,
.cuenta__main .wc-address-book-make-default:hover{border-color:var(--tinta);background:var(--tinta);color:var(--papel)}
/* Un nivel mas de especificidad: si no, gana la regla generica de boton
   de arriba y "Eliminar" sale en tinta en vez de en lacre. */
.cuenta__main .address_book .wc-address-book-delete{border-color:transparent;color:var(--lacre);padding:0 10px}
.cuenta__main .address_book .wc-address-book-delete:hover{background:var(--lacre);color:#fff;border-color:var(--lacre)}

/* El boton de anadir: dorado, en la cabecera del bloque y sin envolver
   en toda la linea, que era lo que lo hacia parecer un enlace suelto. */
.cuenta__main .wc-address-book-add-new-address{display:flex;align-items:center;gap:8px;flex:none}
.cuenta__main a.add.button.wc-address-book-add-billing-button,
.cuenta__main a.add.button.wc-address-book-add-shipping-button{
  background:var(--oro);border-color:var(--oro);color:var(--tinta);font-weight:800;white-space:nowrap}
.cuenta__main a.add.button.wc-address-book-add-billing-button:hover,
.cuenta__main a.add.button.wc-address-book-add-shipping-button:hover{
  background:var(--tinta);border-color:var(--tinta);color:var(--oro-luz)}
.cuenta__main .add.button.disabled{display:none!important}

/* Acciones al pie de cada ficha */
.cuenta__main .wc-address-book-address .wc-address-book-address-actions,
.cuenta__main .wc-address-book-address > div:last-child{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.pedidos__pag{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* Detalle de un pedido: WooCommerce lo pinta con tablas. */
.cuenta__main .woocommerce-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14.5px}
.cuenta__main .woocommerce-table th,.cuenta__main .woocommerce-table td{
  padding:11px 12px;border-bottom:1px solid var(--papel-3);text-align:left;vertical-align:top}
.cuenta__main .woocommerce-table thead th{font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-2);background:var(--papel-2)}
.cuenta__main .woocommerce-table tfoot th{font-weight:700}
.cuenta__main .woocommerce-table td a{font-weight:700;color:var(--oro-texto)}
.cuenta__main .woocommerce-table img{width:44px;height:auto;border-radius:2px}
@media(max-width:639px){
  .cuenta__main .woocommerce-table thead{display:none}
  .cuenta__main .woocommerce-table tr{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--papel-3)}
  .cuenta__main .woocommerce-table td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:14px}
  .cuenta__main .woocommerce-table td::before{content:attr(data-title);font-weight:700;color:var(--tinta-2);font-size:13px}
}
.cuenta__main .woocommerce-customer-details address{font-style:normal;font-size:14.5px;line-height:1.6;
  border:1px solid var(--papel-3);border-radius:2px;padding:14px}
.cuenta__main h2,.cuenta__main h3{font-family:var(--display);font-weight:600}
.cuenta__main .woocommerce-order-details__title,
.cuenta__main .woocommerce-column__title{font-size:20px;margin:22px 0 12px}

/* ---------- Paginas ----------
   Dos clases distintas: la interfaz de tienda usa todo el ancho porque
   trae su propia rejilla; el texto largo mantiene una medida de lectura,
   que a 1180 px de linea no se lee bien. */
.pagina--tienda{padding-block:0}
/* Sin sesion, WooCommerce pinta el formulario de entrar sin pasar por
   el envoltorio .cuenta, asi que el aire vertical lo pone la propia
   pantalla de acceso. */
.pagina--tienda .cuenta-acceso{padding-block:34px 76px;max-width:940px;margin-inline:auto}
@media(min-width:900px){.pagina--tienda .cuenta-acceso{padding-block:46px 96px}}
.pagina--texto{padding-block:34px 76px;background:var(--papel)}
@media(min-width:900px){.pagina--texto{padding-block:46px 96px}}
.pagina__cab{max-width:70ch;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--papel-3)}
.pagina__cab .t-sec{font-size:clamp(28px,4.8vw,42px)}
.pagina__fecha{margin-top:10px;font-size:12.5px;color:var(--tinta-2)}
.pagina__cu{max-width:74ch;font-size:16.5px;line-height:1.72;color:var(--tinta-2)}
.pagina__cu > * + *{margin-top:16px}
.pagina__cu h2{font-family:var(--display);font-size:clamp(21px,3.2vw,27px);font-weight:600;color:var(--tinta);
  margin-top:34px}
.pagina__cu h3{font-family:var(--display);font-size:19px;font-weight:600;color:var(--tinta);margin-top:26px}
.pagina__cu strong,.pagina__cu b{color:var(--tinta);font-weight:700}
.pagina__cu a{color:var(--oro-texto);text-decoration:underline;text-underline-offset:3px}
.pagina__cu a:hover{color:var(--tinta)}
.pagina__cu ul,.pagina__cu ol{padding-left:20px;display:grid;gap:8px}
.pagina__cu ul li{list-style:disc}
.pagina__cu ol li{list-style:decimal}
.pagina__cu img{border-radius:2px;margin-block:8px}
.pagina__cu blockquote{margin:24px 0;padding:16px 20px;background:var(--papel-2);border-left:4px solid var(--oro);
  font-size:16px;color:var(--tinta)}
.pagina__cu table{width:100%;border-collapse:collapse;font-size:15px}
.pagina__cu th,.pagina__cu td{padding:10px 12px;border-bottom:1px solid var(--papel-3);text-align:left}
.pagina__pag{display:flex;gap:8px;margin-top:24px;font-weight:700}

/* =========================================================================
   FICHA DE PRODUCTO
   Dos columnas: la foto a la izquierda, la decisión de compra a la derecha.
   ========================================================================= */
.prod{padding-block:26px 0;background:var(--papel)}
@media(min-width:900px){.prod{padding-block:32px 0}}

.prod__cols{display:grid;gap:28px;margin-top:14px}
.prod__cols>*{min-width:0}
@media(min-width:900px){
  .prod__cols{grid-template-columns:minmax(0,580px) minmax(0,1fr);gap:52px;align-items:start}

  /* La que se queda quieta es la foto, no la columna de compra: es la corta
     de las dos y la que uno quiere seguir viendo mientras lee y decide. */
  .prod__izq{position:sticky;top:calc(var(--cab-alto,105px) + 20px);align-self:start}

  /* En pantallas bajas la foto se encoge hasta caber entera con sus
     miniaturas; si no, el sticky deja el pie de la galeria fuera de vista. */
  .prod__gal{--tope:calc(100svh - var(--cab-alto,105px) - 110px)}
  .prod__foto{width:min(100%,var(--tope));margin-inline:auto}
  .prod__minis{width:min(100%,var(--tope));margin-inline:auto}
}
@media(min-width:1400px){.prod__cols{grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:68px}}

/* ---------- Galería ---------- */
.prod__foto{position:relative;aspect-ratio:1/1;background:#fff;border:1px solid var(--papel-3);
  border-radius:2px;overflow:hidden}
.prod__foto img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.prod__minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin-top:10px}
.prod__mini{aspect-ratio:1/1;background:#fff;border:1.5px solid var(--papel-3);border-radius:2px;
  overflow:hidden;padding:0;cursor:pointer;transition:border-color .18s}
.prod__mini img{width:100%;height:100%;object-fit:cover;display:block}
.prod__mini:hover{border-color:var(--tinta-2)}
.prod__mini.on{border-color:var(--oro);box-shadow:0 0 0 2px var(--oro-tinte)}

/* ---------- Columna de compra ---------- */
.prod__marca{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.prod__marca a:hover{color:var(--oro-texto)}
.prod__nom{margin-top:6px;font-family:var(--display);font-size:clamp(26px,3.6vw,38px);font-weight:600;
  line-height:1.14;color:var(--tinta)}
.prod__esp{margin-top:9px;font-size:14px;color:var(--tinta-2)}
.prod__esp i{font-style:normal;font-weight:700;color:var(--oro-texto)}
.prod__esp a{text-decoration:underline;text-decoration-color:var(--papel-3);text-underline-offset:3px}
.prod__esp a:hover{color:var(--oro-texto);text-decoration-color:var(--oro)}

.prod__ventas{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:9px 16px 9px 13px;
  background:var(--oro-tinte);border:1.5px solid var(--oro-borde);border-radius:99px;
  font-size:14px;font-weight:600;color:var(--tinta);line-height:1.2}
.prod__ventas svg{width:19px;height:19px;flex:none;stroke:var(--oro-texto);stroke-width:2}
.prod__ventas b{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--tinta);
  font-variant-numeric:tabular-nums}

/* ---------- Precio ---------- */
.prod__pr{margin-top:20px;padding-top:18px;border-top:1px solid var(--papel-3)}
.prod__pr-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prod__ahora{font-size:clamp(30px,4.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.prod__chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:99px;
  background:var(--oro);color:var(--tinta);font-size:13px;font-weight:800;white-space:nowrap}
.prod__antes{margin-top:8px;font-size:14px;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.prod__antes s{text-decoration:line-through}
.prod__ciclo{margin-top:10px;padding-left:11px;border-left:2px solid var(--oro);
  font-size:13px;color:var(--tinta-2)}
.prod__ciclo b{color:var(--tinta);font-weight:700}
.prod__ciclo b::first-letter{text-transform:uppercase}
.prod__viendo{display:flex;align-items:center;gap:9px;margin-top:10px;padding-left:11px;
  border-left:2px solid #1B8A45;font-size:13px;color:var(--tinta-2)}
.prod__viendo b{color:var(--tinta);font-weight:800}
.prod__viendo-punto{width:8px;height:8px;flex:none;border-radius:50%;background:#1B8A45;
  animation:pym-latido 2.2s ease-in-out infinite}
@keyframes pym-latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
@media(prefers-reduced-motion:reduce){.prod__viendo-punto{animation:none}}

/* ---------- Formulario de compra (lo genera WooCommerce) ---------- */
.prod__der form.cart{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.prod__der form.cart .quantity{display:flex;align-items:stretch;border:1.5px solid var(--papel-3);
  border-radius:2px;background:#fff;overflow:hidden}
.prod__der form.cart .quantity input[type=number]{width:74px;min-height:56px;padding:0 8px;border:0;
  background:none;text-align:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  outline:none;-moz-appearance:textfield}
.prod__der form.cart button[type=submit],
.prod__der .single_add_to_cart_button{
  flex:1;min-width:200px;min-height:56px;padding:0 26px;border:0;border-radius:2px;
  background:var(--oro);color:var(--tinta);font-family:var(--ui);font-size:15.5px;font-weight:800;
  letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background-color .2s,color .2s}
.prod__der .single_add_to_cart_button:hover{background:var(--tinta);color:var(--oro-luz)}
.prod__der .stock.out-of-stock{width:100%;padding:13px 15px;background:var(--papel-2);
  border-left:4px solid var(--tinta-2);font-size:14.5px;color:var(--tinta-2);position:static}

/* ---------- Entrega ---------- */
.prod__entrega{display:flex;gap:13px;align-items:flex-start;margin-top:16px;padding:15px 17px;
  background:#fff;border:1.5px solid var(--papel-3);border-left:4px solid var(--oro);
  border-radius:2px;font-size:13.5px;color:var(--tinta-2);line-height:1.5}
.prod__entrega svg{width:24px;height:24px;flex:none;stroke:var(--oro-texto);stroke-width:1.9;margin-top:1px}
.prod__entrega b{display:block;color:var(--tinta);font-weight:800;font-size:15.5px;
  letter-spacing:-.01em;margin-bottom:3px}

/* ---------- Promesas ---------- */
.prod__promesas{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--papel-3)}
@media(min-width:560px){.prod__promesas{grid-template-columns:repeat(2,1fr);gap:12px 18px}}
.prod__promesas li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--tinta-2);line-height:1.4}
.prod__promesas svg{width:18px;height:18px;flex:none;stroke:var(--oro-texto);margin-top:1px}
.prod__promesas b{display:block;font-size:13.5px;font-weight:800;color:var(--tinta)}

/* ---------- Ficha técnica ---------- */
.prod__datos{margin-top:20px;padding-top:16px;border-top:1px solid var(--papel-3);display:grid;gap:0}
.prod__datos > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:9px 0;
  border-bottom:1px solid var(--papel-2);font-size:14px}
.prod__datos > div:last-child{border-bottom:0}
.prod__datos dt{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);align-self:center}
.prod__datos dd{margin:0;color:var(--tinta);font-weight:600}

/* ---------- Preguntas frecuentes en la columna de compra ---------- */
.prod__faq{margin-top:22px;padding-top:18px;border-top:1px solid var(--papel-3)}
.prod__faq-t{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);margin-bottom:2px}
.prod__faq .faq{max-width:none;margin-inline:0}
.prod__faq .faq__b{padding:13px 0;gap:12px}
.prod__faq .faq__b h3{font-size:15px;line-height:1.4}
.prod__faq .faq__mas{width:15px;height:15px;margin-top:4px}
.prod__faq .faq__mas::before{top:6.5px;width:15px}
.prod__faq .faq__mas::after{left:6.5px;height:15px}
.prod__faq .faq__cu{padding-bottom:17px;max-width:none;font-size:14px;line-height:1.6}
.prod__faq .pasos{grid-template-columns:1fr;gap:8px;margin-top:12px}
.prod__faq .paso{padding:11px 13px}
.prod__faq .paso span{font-size:13.5px}
.prod__faq .ficha-legal{font-size:13px}
.prod__faq .ficha-legal dt{min-width:98px}

/* ---------- Ayuda ---------- */
.prod__ayuda{display:flex;gap:11px;align-items:flex-start;margin-top:18px;padding:14px 16px;
  border:1.5px solid var(--papel-3);border-radius:2px;font-size:13px;color:var(--tinta-2);
  line-height:1.45;transition:border-color .18s,background-color .18s}
.prod__ayuda:hover{border-color:var(--tinta);background:var(--papel-2)}
.prod__ayuda svg{width:20px;height:20px;flex:none;stroke:#1B8A45;margin-top:1px}
.prod__ayuda b{display:block;color:var(--tinta);font-weight:800;font-size:14px}

/* ---------- Descripción ---------- */
.prod__desc{margin-top:56px;padding-block:52px;background:var(--papel-2);border-top:1px solid var(--papel-3)}
.prod__desc h2{font-family:var(--display);font-size:clamp(22px,3.4vw,30px);font-weight:600;margin:0 0 18px}
.prod__desc-grid{display:grid;gap:0}
.prod__desc-col>.ojo{margin-bottom:10px}

/* En ancho, el titulo baja a su propia columna y acompana la lectura; el
   cuerpo deja de ser una franja de texto con medio monitor vacio al lado. */
@media(min-width:1040px){
  .prod__desc-grid{grid-template-columns:minmax(190px,250px) minmax(0,1fr);gap:60px;align-items:start}
  .prod__desc h2{position:sticky;top:calc(var(--cab-alto,105px) + 20px);margin:0}
}

/* Piramide olfativa: los tres pisos que estaban enterrados en el parrafo. */
.piramide{display:grid;gap:12px;margin-bottom:32px}
@media(min-width:760px){.piramide{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.piramide__it{background:#fff;border:1px solid var(--papel-3);border-top:3px solid var(--oro);
  border-radius:2px;padding:16px 18px}
.piramide__t{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-texto);margin-bottom:8px}
.piramide__v{font-size:15px;line-height:1.55;color:var(--tinta)}

/* Fichas sueltas rescatadas del cuerpo ("Cuando", "Tipo", "Para"). */
.prod__extras{display:grid;gap:0;margin-bottom:28px;max-width:560px}
.prod__extras>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:8px 0;
  border-bottom:1px solid var(--papel-3);font-size:14.5px}
.prod__extras>div:first-child{border-top:1px solid var(--papel-3)}
.prod__extras dt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);align-self:center}
.prod__extras dd{margin:0;color:var(--tinta);font-weight:600}

.prod__desc-cu{max-width:74ch;font-size:16.5px;line-height:1.75;color:var(--tinta-2)}
.prod__desc-cu > *:first-child{margin-top:0}
.prod__desc-cu p+p{margin-top:15px}
.prod__desc-cu h3{font-family:var(--display);color:var(--tinta);margin-top:30px;margin-bottom:8px;
  font-size:21px;font-weight:600;line-height:1.2}
.prod__desc-cu strong,.prod__desc-cu b{color:var(--tinta);font-weight:700}
.prod__desc-cu a{color:var(--oro-texto);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--oro-borde)}
.prod__desc-cu a:hover{color:var(--tinta);text-decoration-color:var(--tinta)}
.prod__desc-cu ul,.prod__desc-cu ol{padding-left:20px;display:grid;gap:8px;margin-top:14px}
.prod__desc-cu ul li{list-style:disc}
.prod__desc-cu ol li{list-style:decimal}
.prod__desc-cu li::marker{color:var(--oro-texto)}
.prod__desc-cu--plegada{position:relative;max-height:19em;overflow:hidden}
.prod__desc-cu--plegada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6.5em;
  background:linear-gradient(180deg,rgba(243,239,228,0),var(--papel-2) 82%);pointer-events:none}
.prod__desc-cu--abierta{max-height:none}
.prod__desc-cu--abierta::after{display:none}
.prod__desc-mas{margin-top:16px;min-height:44px;padding:0 20px;border:1.5px solid var(--tinta);
  border-radius:2px;background:transparent;font-size:13.5px;font-weight:700;color:var(--tinta);
  transition:background-color .18s,color .18s}
.prod__desc-mas:hover{background:var(--tinta);color:var(--papel)}

/* ---------- Relacionados ---------- */
.prod__rel{padding-block:56px 84px;background:var(--papel)}
.prod__rel-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--papel-3)}
.prod__rel-cab h2{font-family:var(--display);font-size:clamp(22px,3.4vw,32px);font-weight:600;margin-top:2px}
.prod__rel-cab .ojo{margin-bottom:8px}
.prod__rel-cab .btn{min-height:46px;padding:0 22px;font-size:13.5px;flex:none}
/* Columnas fijas, no auto-fill: son 8 productos y con relleno automatico en
   pantalla ancha salian 7 en una fila y 1 sola en la siguiente. Con 2 y 4 las
   filas cierran siempre, y a 1900 px cada tarjeta gana mas de 150 px. */
.prod__rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.prod__rel-grid>*{min-width:0}
@media(min-width:1000px){.prod__rel-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}

.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Ajustes del tema de WordPress ---------- */
/* display:flex de .res-senuelo gana sobre [hidden]; esto lo corrige. */
[hidden]{display:none!important}

/* WooCommerce mete su propio marcado de precio dentro de la tarjeta. */
.card__ahora .woocommerce-Price-amount,
.li__pr .woocommerce-Price-amount,
.cesta__tot b .woocommerce-Price-amount{font:inherit;color:inherit}
.card__antes .woocommerce-Price-amount{font:inherit;color:inherit}
.card__fig img{width:100%;height:100%;object-fit:contain}
.suge__mini img,.li__im img,.cross__it img,.res-senuelo .mini img{width:100%;height:100%;object-fit:contain}

/* La imagen secundaria solo existe si el producto tiene galeria. */
.card__fig .im--b:empty{display:none}

/* =========================================================================
   CABECERA COMPLETA SIEMPRE VISIBLE
   La barra y la navegación viajan juntas en un solo contenedor pegajoso.
   Nota: `body{overflow-x:hidden}` volvía al body un contenedor de scroll y
   anulaba position:sticky en sus hijos. Por eso vive en html con `clip`.
   ========================================================================= */
.cabecera{position:sticky;top:0;z-index:60;isolation:isolate}
.cabecera::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,19,16,.10),transparent);
  opacity:0;transition:opacity .3s var(--ease);
}
.cabecera.pegada::after{opacity:1}
/* Al bajar, la cabecera se compacta un poco para devolver alto a la pantalla. */
.cabecera.pegada .cab__in{height:56px}
@media(min-width:900px){.cabecera.pegada .cab__in{height:64px}}
.cab__in{transition:height .35s var(--ease)}

/* =========================================================================
   S0 · BARRA SUPERIOR CONFIGURABLE
   ========================================================================= */
.riesgo{--riesgo-alto:40px;height:var(--riesgo-alto);position:relative;overflow:hidden}
.riesgo--oro{background:var(--oro);color:var(--tinta)}
.riesgo--carbon{background:var(--carbon);color:var(--papel)}
.riesgo--papel{background:var(--papel-2);color:var(--tinta);border-bottom:1px solid var(--papel-3)}
.riesgo--carbon .riesgo__msg b{color:var(--oro-luz)}
.riesgo--papel .riesgo__msg b{color:var(--oro-texto)}

/* Brillo que recorre el oro: una sola capa, solo transform. */
.riesgo--oro::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:brillo 7s ease-in-out infinite;
}
@keyframes brillo{0%,72%{transform:translateX(-100%)}92%,100%{transform:translateX(100%)}}

.riesgo__pista{position:relative;height:100%}
.riesgo__msg{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.03em;color:inherit;
  padding-inline:44px;text-align:center;
  will-change:transform,opacity;
}
/* El texto va en una sola caja: si el <b> fuese hermano del flex,
   el gap partiría la frase por la mitad. */
.riesgo__tx{display:block}
.riesgo__msg b{font-weight:800}
.riesgo__msg svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none}
a.riesgo__msg{text-decoration:none}
a.riesgo__msg:hover .riesgo__tx{text-decoration:underline;text-underline-offset:3px}

/* --- Deslizar --- */
.riesgo--desliza .riesgo__msg{opacity:0;transform:translateY(105%);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.riesgo--desliza .riesgo__msg.on{opacity:1;transform:none}
.riesgo--desliza .riesgo__msg.out{opacity:0;transform:translateY(-105%)}

/* --- Fundido --- */
.riesgo--funde .riesgo__msg{opacity:0;transform:scale(.97);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.riesgo--funde .riesgo__msg.on{opacity:1;transform:none}
.riesgo--funde .riesgo__msg.out{opacity:0;transform:scale(1.03)}

/* --- Voltear en 3D --- */
.riesgo--flip .riesgo__pista{perspective:520px}
.riesgo--flip .riesgo__msg{opacity:0;transform:rotateX(-92deg);transform-origin:50% 0;
  transition:opacity .45s var(--ease),transform .55s var(--ease);backface-visibility:hidden}
.riesgo--flip .riesgo__msg.on{opacity:1;transform:none}
.riesgo--flip .riesgo__msg.out{opacity:0;transform:rotateX(92deg);transform-origin:50% 100%}

/* --- Marquesina: todos los mensajes en fila continua --- */
.riesgo--marquesina .riesgo__pista{
  display:flex;width:max-content;align-items:center;
  animation:desfila var(--marq-dur,26s) linear infinite;
}
.riesgo--marquesina .riesgo__msg{
  position:relative;inset:auto;opacity:1;transform:none;
  padding-inline:0;margin-inline:28px;white-space:nowrap;
}
.riesgo--marquesina:hover .riesgo__pista{animation-play-state:paused}
@keyframes desfila{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Puntos para saltar entre mensajes */
.riesgo__puntos{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:3;
  display:none;gap:5px;
}
@media(min-width:760px){.riesgo__puntos{display:flex}}
.riesgo__punto{
  width:16px;height:16px;display:grid;place-items:center;border:0;background:none;cursor:pointer;
}
.riesgo__punto::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.35;transition:opacity .25s,transform .25s var(--ease);
}
.riesgo__punto:hover::after{opacity:.7}
.riesgo__punto.on::after{opacity:1;transform:scale(1.5)}

@media(prefers-reduced-motion:reduce){
  .riesgo--oro::before{animation:none;display:none}
  .riesgo--marquesina .riesgo__pista{animation:none}
  .cab__in{transition:none}
}

/* =========================================================================
   LOGO
   Emblema cuadrado: manda el alto, no el ancho. Se acompaña de la línea de
   ciudad y año, que es lo que el emblema no alcanza a decir a este tamaño.
   ========================================================================= */
.logo{display:flex;align-items:center;gap:12px;flex:none;flex-direction:row}
.logo__img{height:52px;width:auto;flex:none;display:block;transition:height .35s var(--ease)}
@media(min-width:900px){.logo__img{height:62px}}
.cabecera.pegada .logo__img{height:44px}
@media(min-width:900px){.cabecera.pegada .logo__img{height:50px}}

/* La línea de apoyo se separa del emblema con un filete dorado. */
.logo--cabecera .logo__s{
  display:none;
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-2);
  padding-left:12px;border-left:2px solid var(--oro);
  max-width:12ch;line-height:1.3;
}
@media(min-width:900px){.logo--cabecera .logo__s{display:block}}
/* Al compactarse la cabecera, la línea de apoyo sobra. */
.cabecera.pegada .logo--cabecera .logo__s{display:none}

.logo--pie .logo__img{height:74px}
.pie .logo{margin-bottom:4px}

/* =========================================================================
   CABECERA EN MÓVIL: hamburguesa · logo centrado · acciones
   Tres zonas en rejilla 1fr/auto/1fr para que el logo quede centrado de
   verdad, sin depender de que los lados midan lo mismo.
   ========================================================================= */
.hamb{display:none}

@media(max-width:1039px){
  .cab__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
  .hamb{display:grid;place-items:center;justify-self:start;width:46px;height:46px;border-radius:2px;
    transition:background-color .2s}
  .hamb:hover{background:var(--papel-2)}
  .logo{justify-self:center}
  .cab__acc{justify-self:end;margin-left:0}
}

/* Las tres rayitas: se convierten en aspa al abrir. */
.hamb__cajon{position:relative;width:22px;height:16px;display:block}
.hamb__l{position:absolute;left:0;width:100%;height:2px;background:var(--tinta);border-radius:2px;
  transition:transform .32s var(--ease),opacity .2s var(--ease),width .32s var(--ease)}
.hamb__l:nth-child(1){top:0}
.hamb__l:nth-child(2){top:7px;width:70%}
.hamb__l:nth-child(3){top:14px}
.hamb:hover .hamb__l:nth-child(2){width:100%}
.hamb[aria-expanded="true"] .hamb__l:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] .hamb__l:nth-child(2){opacity:0;width:0}
.hamb[aria-expanded="true"] .hamb__l:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================================
   PANEL DE NAVEGACIÓN MÓVIL
   ========================================================================= */
.velo--menu{z-index:97}
.menum{
  position:fixed;top:0;left:0;bottom:0;z-index:98;width:min(360px,86vw);
  background:var(--papel);border-right:3px solid var(--oro);
  display:flex;flex-direction:column;
  transform:translateX(-101%);transition:transform .38s var(--ease);
  overscroll-behavior:contain;
}
.menum.on{transform:none}
@media(min-width:1040px){.menum,.velo--menu,.hamb{display:none}}

.menum__cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px 14px;border-bottom:1px solid var(--papel-3)}
.menum__t{font-family:var(--display);font-size:22px;font-weight:600}

.menum__cu{flex:1;overflow-y:auto;padding:6px 18px 18px}

.menum__lista{display:block}
.menum__lista li{border-bottom:1px solid var(--papel-3)}
.menum__lista a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:10px 0;font-family:var(--display);font-size:21px;font-weight:600;
  transition:padding-left .25s var(--ease),color .2s}
.menum__lista a:hover,.menum__lista a:focus-visible{padding-left:8px;color:var(--oro-texto)}
.menum__lista a b{font-family:var(--ui);font-size:12px;font-weight:700;color:var(--tinta-2);
  background:var(--papel-2);border-radius:99px;padding:3px 9px;flex:none}

.menum__titulo{margin:24px 0 12px;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro-texto);border-bottom:2px solid var(--oro);
  padding-bottom:5px;display:inline-block}
.menum__fams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.menum__fams a{display:flex;align-items:center;gap:9px;min-height:48px;padding:8px 12px;
  border:1px solid var(--papel-3);border-radius:2px;background:#fff;font-size:14px;font-weight:600;
  transition:border-color .2s,transform .2s var(--ease)}
.menum__fams a:hover{border-color:var(--tinta);transform:translateY(-2px)}
.menum__fams i{width:11px;height:11px;border-radius:50%;background:var(--tinte);flex:none}

.menum__pie{padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--papel-3);background:var(--papel-2)}
.menum__nota{margin-top:10px;font-size:12px;color:var(--tinta-2);text-align:center}

@media(prefers-reduced-motion:reduce){
  .menum{transition:none}
  .hamb__l{transition:none}
}

/* =========================================================================
   S1 · BANDA DE IMAGEN DEL HERO
   Va a sangre, detrás del titular, y termina justo antes del buscador.
   Sin imagen configurada queda el degradado de siempre: nada se rompe.
   ========================================================================= */
.hero{padding-top:0}
.hero__lienzo{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  padding-block:44px;
  background:linear-gradient(180deg,var(--papel) 0%,var(--papel-2) 100%);
}
@media(min-width:900px){.hero__lienzo{padding-block:72px}}

.hero__lienzo--baja{min-height:auto}
.hero__lienzo--media{min-height:46vh}
.hero__lienzo--alta{min-height:64vh}
@media(min-width:900px){
  .hero__lienzo--media{min-height:52vh}
  .hero__lienzo--alta{min-height:76vh}
}

/* La foto es un <img> real para que lleve srcset y precarga. */
.hero__foto{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:var(--foco,center);
}

/* Velo: aclara u oscurece según el tono elegido, nunca las dos cosas. */
.hero__lienzo--con-foto::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
.hero__lienzo--con-foto.hero__lienzo--oscuro::before{
  background:linear-gradient(100deg,
    rgba(253,251,246,calc(var(--velo,.55) + .22)) 0%,
    rgba(253,251,246,var(--velo,.55)) 46%,
    rgba(253,251,246,calc(var(--velo,.55) * .45)) 100%);
}
.hero__lienzo--con-foto.hero__lienzo--claro::before{
  background:linear-gradient(100deg,
    rgba(23,19,16,calc(var(--velo,.55) + .22)) 0%,
    rgba(23,19,16,var(--velo,.55)) 46%,
    rgba(23,19,16,calc(var(--velo,.55) * .45)) 100%);
}

.hero__titular{position:relative;z-index:1;width:100%}
.hero__lienzo--con-foto .hero__titular{max-width:min(var(--max),100%)}

/* Titular claro sobre foto oscura: cambia toda la escala, no solo el h1. */
.hero__lienzo--claro .hero h1,
.hero__lienzo--claro h1{color:var(--papel)}
.hero__lienzo--claro h1 em{color:var(--oro-luz)}
.hero__lienzo--claro h1 .pct{background:var(--oro);color:var(--tinta)}
.hero__lienzo--claro .hero__p{color:rgba(253,251,246,.86)}
.hero__lienzo--claro .hero__p b{color:var(--papel);box-shadow:inset 0 -.5em 0 rgba(216,168,24,.35)}

/* El buscador ya no vive dentro de la banda: recupera su aire. */
.hero__in{padding-top:30px}
@media(min-width:900px){.hero__in{padding-top:40px}}
.hero .busca{margin-top:0}

/* En móvil la foto no puede empujar el buscador fuera de pantalla. */
@media(max-width:599px){
  .hero__lienzo--media{min-height:38vh}
  .hero__lienzo--alta{min-height:50vh}
}

/* El buscador ocupa el ancho completo del contenedor, alineado con las
   tres rutas de abajo. Antes se cortaba a 620 px y rompía la retícula.
   El selector va por .busca-barra y no por .hero: el buscador vive fuera
   del hero desde que se volvió pegajoso. */
.busca-barra .busca,
.hero .busca{max-width:none;width:100%}

/* =========================================================================
   BANDA DEL BUSCADOR PEGAJOSA
   Se queda bajo la cabecera durante todo el recorrido: el visitante frío de
   Meta casi siempre llega buscando un nombre concreto, y ese campo no puede
   desaparecer al primer scroll.
   --cab-alto lo mide el JS, porque la cabecera se compacta al bajar.
   ========================================================================= */
.busca-barra{
  position:sticky;top:var(--cab-alto,105px);z-index:50;
  background:var(--papel);
  padding-block:22px;
  transition:padding .3s var(--ease),box-shadow .3s var(--ease),background-color .3s;
}
/* La banda del hero termina en el mismo tono para que no se vea el corte. */
.hero__lienzo{background:linear-gradient(180deg,var(--papel-2) 0%,var(--papel) 100%)}

.busca-barra.pegada{
  padding-block:12px;
  border-bottom:1px solid var(--papel-3);
  box-shadow:0 10px 24px -18px rgba(23,19,16,.5);
}
/* Al pegarse, el campo baja de 62 a 54 px: devuelve pantalla sin perder el tacto. */
.busca-barra.pegada .busca__caja{height:54px}
.busca__caja{transition:height .3s var(--ease)}

@media(max-width:599px){
  .busca-barra{padding-block:16px}
  .busca-barra.pegada{padding-block:9px}
  .busca-barra.pegada .busca__caja{height:50px}
}

/* El hero se parte en dos: banda de imagen arriba, rutas y sellos abajo. */
.hero--pie{padding-top:26px}
@media(min-width:900px){.hero--pie{padding-top:34px}}
.hero--pie .hero__in{padding-top:0}
.hero--pie .rutas{margin-top:0}

/* =========================================================================
   CINTA VIVA
   Banda delgada entre la imagen del hero y el buscador. Va con datos reales,
   así que se comporta como un dato y no como un adorno: tipografía pequeña,
   nada de colores de alarma.
   ========================================================================= */
.cinta-viva{
  background:var(--papel-2);
  border-block:1px solid var(--papel-3);
  overflow:hidden;
  height:42px;
  display:flex;align-items:center;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.cinta-viva__pista{
  display:flex;align-items:center;width:max-content;
  animation:cintaCorre var(--cinta-dur,42s) linear infinite;
  will-change:transform;
}
@keyframes cintaCorre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.cinta__it{
  display:inline-flex;align-items:center;gap:9px;
  padding-inline:26px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--tinta-2);
  position:relative;
}
/* Separador: un rombo, guiño al logo. */
.cinta__it::after{
  content:"";position:absolute;right:-4px;top:50%;
  width:5px;height:5px;background:var(--oro);
  transform:translateY(-50%) rotate(45deg);opacity:.55;
}
.cinta__it svg{width:15px;height:15px;flex:none;stroke:var(--oro-texto);fill:none}
.cinta__it b{color:var(--tinta);font-weight:800}
.cinta__reloj,.despacho__reloj{font-variant-numeric:tabular-nums}
.prod__entrega .despacho__reloj{color:var(--oro-texto)}

@media(max-width:599px){
  .cinta-viva{height:38px}
  .cinta__it{padding-inline:18px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  /* Sin movimiento la cinta se convierte en una línea desplazable a mano. */
  .cinta-viva{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .cinta-viva__pista{animation:none}
}

/* La banda de imagen y la cinta se tocan: el relleno inferior del hero
   dejaba 56 px de aire muerto entre las dos. Solo afecta al hero de arriba,
   no al bloque de rutas que comparte la clase. */
.hero:not(.hero--pie){padding-bottom:0}

/* =========================================================================
   CABECERA EN ESCRITORIO: logo · menú centrado · acciones
   Misma rejilla 1fr/auto/1fr que en móvil, para que el menú quede centrado
   respecto a la ventana y no respecto al espacio que sobra.
   ========================================================================= */
@media(min-width:1040px){
  .cab__in{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
  .logo{justify-self:start}
  .menu{justify-self:center;margin-left:0}
  .cab__acc{justify-self:end;margin-left:0}
}

/* La línea de apoyo se partía en tres renglones. En una sola línea, y solo
   cuando hay ancho de sobra para no empujar al menú fuera del centro. */
.logo--cabecera .logo__s{max-width:none;white-space:nowrap}
@media(min-width:900px) and (max-width:1219px){.logo--cabecera .logo__s{display:none}}

/* =========================================================================
   CHECKOUT
   Tres bloques numerados a la izquierda y el resumen fijo a la derecha,
   con la misma forma que el de elmejorperfume.com.
   ========================================================================= */
.pago{padding-block:26px 70px;background:var(--papel)}
.pago__cab{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--papel-3)}
.pago__cab h1{font-family:var(--display);font-size:clamp(27px,4vw,38px);font-weight:600;line-height:1.1}
.pago__cab p{margin-top:8px;font-size:15px;color:var(--tinta-2)}

.pago__grid{display:grid;gap:30px}
.pago__grid>*{min-width:0}
@media(min-width:1000px){
  .pago__grid{grid-template-columns:minmax(0,1fr) minmax(340px,420px);gap:48px;align-items:start}
  .pago__der{position:sticky;top:calc(var(--cab-alto,105px) + 18px)}
}

/* ---------- Bloques numerados ---------- */
.pago__bloque{border:0;padding:0;margin:0 0 30px}
.pago__bloque legend{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding:0;
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--tinta)}
.pago__bloque legend b{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--tinta);color:var(--oro-luz);font-family:var(--ui);font-size:13.5px;font-weight:800}

.pago__campos{display:grid;gap:14px}
@media(min-width:620px){
  .pago__campos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
  .pago__campos .form-row-wide,.pago__campos .pym-pais{grid-column:1/-1}
}
.pago__campos .form-row{margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pago__campos label{font-size:12.5px;font-weight:700;color:var(--tinta-2);line-height:1.35}
.pago__campos label .required{color:var(--oro-texto);text-decoration:none}
.pago__campos input[type=text],.pago__campos input[type=tel],.pago__campos input[type=email],
.pago__campos input[type=number],.pago__campos select,.pago__campos textarea,
.pago__campos .select2-container .select2-selection{
  width:100%;min-height:50px;padding:0 14px;border:1.5px solid var(--papel-3);border-radius:2px;
  background:#fff;font-family:var(--ui);font-size:15.5px;color:var(--tinta);outline:none;
  transition:border-color .16s,box-shadow .16s}
.pago__campos textarea{min-height:88px;padding:12px 14px;line-height:1.5;resize:vertical}
.pago__campos input:focus,.pago__campos select:focus,.pago__campos textarea:focus{
  border-color:var(--oro);box-shadow:0 0 0 3px var(--oro-tinte)}
.pago__campos .woocommerce-invalid input,.pago__campos .woocommerce-invalid select{border-color:#C0392B}
.pago__campos .select2-container .select2-selection__rendered{line-height:47px;padding:0}
.pago__campos .select2-container .select2-selection__arrow{height:48px}

.pago__entrega{display:flex;gap:11px;align-items:flex-start;margin-top:16px;padding:13px 15px;
  background:var(--papel-2);border-left:4px solid var(--oro);border-radius:2px;
  font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.pago__entrega svg{width:21px;height:21px;flex:none;stroke:var(--oro-texto);margin-top:1px}

/* ---------- Pago ---------- */
/* Crear cuenta: el bloque estandar de WooCommerce, al final de "Tus datos" */
.pago__cuenta{margin-top:14px}
.pago__cuenta p.create-account label{display:flex;gap:10px;align-items:center;font-size:14.5px;cursor:pointer}
.pago__cuenta div.create-account{margin-top:10px}
.pago__bloque--pago .wc_payment_methods{list-style:none;margin:0;padding:0;display:grid;gap:10px}
/* El radio y el nombre van en la misma linea: la rejilla los pone en columnas
   y deja la descripcion debajo, alineada con el texto y no con el circulo. */
.pago__bloque--pago .wc_payment_method{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:12px;padding:0 16px;
  border:1.5px solid var(--papel-3);border-radius:2px;background:#fff;
  transition:border-color .16s,box-shadow .16s}
.pago__bloque--pago .wc_payment_method:has(input:checked){border-color:var(--oro);box-shadow:0 0 0 2px var(--oro-tinte)}
.pago__bloque--pago .wc_payment_method>input{grid-column:1;margin:0;width:18px;height:18px;
  accent-color:var(--oro-texto);cursor:pointer}
.pago__bloque--pago .wc_payment_method>label{grid-column:2;margin:0;padding:15px 0;display:flex;
  align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--tinta);cursor:pointer}
.pago__bloque--pago .wc_payment_method>label img{max-height:26px;width:auto;margin-left:auto}
.pago__bloque--pago .payment_box{grid-column:2;margin:0;padding:0 0 15px;background:none;border:0;
  font-size:13.5px;line-height:1.55;color:var(--tinta-2)}
.pago__bloque--pago .payment_box::before{display:none}
/* Esta pasarela mete la descripcion dentro de <fieldset> y deja uno vacio; el
   borde por defecto del fieldset era el recuadro suelto que se veia debajo. */
.pago__bloque--pago .payment_box fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.pago__bloque--pago .payment_box p{margin:0}
.pago__bloque--pago .payment_box p+p{margin-top:8px}
.pago__bloque--pago .woocommerce-terms-and-conditions-wrapper{margin-top:16px;font-size:13px;color:var(--tinta-2)}
.pago__bloque--pago #place_order{width:100%;min-height:58px;margin-top:16px;padding:0 24px;border:0;
  border-radius:2px;background:var(--oro);color:var(--tinta);font-family:var(--ui);font-size:16px;
  font-weight:800;letter-spacing:.02em;cursor:pointer;transition:background-color .2s,color .2s}
.pago__bloque--pago #place_order:hover{background:var(--tinta);color:var(--oro-luz)}

.pago__promesas{display:grid;gap:9px;margin-top:22px;padding-top:18px;border-top:1px solid var(--papel-3)}
@media(min-width:560px){.pago__promesas{grid-template-columns:repeat(3,1fr);gap:14px}}
.pago__promesas li{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;color:var(--tinta-2)}
.pago__promesas svg{width:18px;height:18px;flex:none;stroke:var(--oro-texto)}

/* ---------- Resumen ---------- */
.pago__res{background:var(--papel-2);border:1px solid var(--papel-3);border-radius:2px;padding:20px}
.pago__res-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--papel-3)}
.pago__res-cab h2{font-family:var(--display);font-size:21px;font-weight:600}
.pago__res-cab span{font-size:12.5px;color:var(--tinta-2)}

.pago__lineas{list-style:none;margin:0;padding:0;display:grid;gap:14px;padding-block:16px}
.pago__linea{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start}
.pago__im{display:block;width:64px;height:64px;background:#fff;border:1px solid var(--papel-3);
  border-radius:2px;overflow:hidden}
.pago__im img{width:100%;height:100%;object-fit:cover;display:block}
.pago__marca{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-2)}
.pago__nom{margin-top:2px;font-size:14px;font-weight:700;line-height:1.3;color:var(--tinta)}
.pago__esp{margin-top:2px;font-size:12px;color:var(--tinta-2)}
.pago__fila{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.pago__cant{display:inline-flex;align-items:center;border:1.5px solid var(--papel-3);border-radius:2px;background:#fff}
.pago__cant button{width:28px;height:30px;display:grid;place-items:center;background:none;border:0;
  font-size:15px;color:var(--tinta-2);cursor:pointer}
.pago__cant button:hover{color:var(--tinta);background:var(--papel-2)}
.pago__cant b{min-width:26px;text-align:center;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.pago__pr{text-align:right;line-height:1.25}
.pago__pr s{display:block;font-size:11.5px;color:var(--tinta-2)}
.pago__pr b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}

.pago__cupon{padding-block:14px;border-top:1px solid var(--papel-3)}
.pago__cupon-b{background:none;border:0;padding:0;font-size:13.5px;font-weight:700;color:var(--oro-texto);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pago__cupon-b:hover{color:var(--tinta)}
.pago__cupon-c{display:flex;gap:8px;margin-top:11px}
.pago__cupon-c input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid var(--papel-3);
  border-radius:2px;background:#fff;font-size:14px;outline:none}
.pago__cupon-c input:focus{border-color:var(--oro)}
.pago__cupon-c button{min-height:44px;padding:0 16px;border:1.5px solid var(--tinta);border-radius:2px;
  background:none;font-size:13.5px;font-weight:700;color:var(--tinta);cursor:pointer}
.pago__cupon-c button:hover{background:var(--tinta);color:var(--papel)}

.pago__totales{display:grid;gap:0;padding-top:14px;border-top:1px solid var(--papel-3)}
.pago__totales>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:14.5px;color:var(--tinta-2)}
.pago__totales dd{margin:0;color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.pago__gratis{color:#1B8A45;font-weight:800;text-transform:uppercase;font-size:13px}
.pago__descuento dd{color:#1B8A45}
.pago__total{margin-top:6px;padding-top:12px;border-top:1px solid var(--papel-3);font-size:16px}
.pago__total dt{font-weight:700;color:var(--tinta)}
.pago__total dd{font-size:23px;font-weight:800;letter-spacing:-.02em}
.pago__ahorro{margin-top:10px;padding:8px 12px;background:var(--oro-tinte);border-radius:2px;
  font-size:13px;color:var(--tinta-2);text-align:center}
.pago__ahorro b{color:var(--tinta);font-weight:800}
.pago__seguir{display:block;margin-top:14px;text-align:center;font-size:13.5px;font-weight:700;
  color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px}
.pago__seguir:hover{color:var(--tinta)}

/* En movil el resumen va primero: saber cuanto se paga antes de teclear. */
@media(max-width:999px){
  .pago__der{order:-1}
  .pago__res{padding:16px}
}
.pago__envio dd{width:100%}
.pago__envios{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.pago__envios label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer}
.pago__envios input{accent-color:var(--oro-texto)}
.pago__envios b{margin-left:auto;font-weight:800}
/* Quitar una linea del carrito. Va arriba a la derecha, separado de los
   -/+ para que no se confunda con bajar la cantidad. */
.li{position:relative}
.li__x{position:absolute;top:10px;right:0;width:28px;height:28px;display:grid;place-items:center;
  background:none;border:0;border-radius:2px;color:var(--tinta-2);cursor:pointer;
  transition:color .16s,background-color .16s}
.li__x svg{width:15px;height:15px}
.li__x:hover{color:#C0392B;background:var(--papel-2)}
.li__tx{padding-right:30px}
/* La misma cruz en el resumen del checkout. */
.pago__linea{position:relative}
.pago__linea .li__x{top:0;right:0}
.pago__dt{padding-right:28px}
/* Con un cajon abierto (carrito, menu movil o filtros) el boton flotante de
   WhatsApp se esconde: su capa va por encima de la de los cajones y tapaba el
   "Finalizar pedido" del carrito y el WhatsApp del propio menu (25-sep-2026).
   Los tres cajones encienden su velo con la misma clase. */
body:has(.velo.on) .qlwapp{display:none}

/* =========================================================================
   Pagina de gracias (woocommerce/checkout/thankyou.php · inc/gracias.php)
   Mismo planteamiento que elmejorperfume.com, con la piel de esta tienda:
   cabecera que confirma, "que esta pasando" si falta el pago, "que sigue",
   sellos, perfumes del mismo acorde y, a la derecha, resumen, entrega y ayuda.
   ========================================================================= */
.gracias{padding-block:22px 64px}

/* ---------- 1 · Cabecera ---------- */
.gracias__hero{text-align:center;padding:34px 18px 28px;margin-bottom:26px;background:var(--papel-2);
  border:1px solid var(--papel-3);border-radius:2px}
.gracias__anillo{width:66px;height:66px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;
  background:var(--oro);color:var(--tinta);box-shadow:0 0 0 7px var(--oro-tinte)}
.gracias__anillo svg{width:30px;height:30px;stroke-width:2.2}
.gracias--espera .gracias__anillo,.gracias--transferencia .gracias__anillo{background:var(--oro-tinte);
  color:var(--oro-texto);box-shadow:inset 0 0 0 2px var(--oro-borde),0 0 0 7px rgba(251,243,222,.6)}
.gracias--fallido .gracias__anillo,.gracias--parado .gracias__anillo{background:#F6E6E3;color:var(--lacre);
  box-shadow:0 0 0 7px #FBF1EF}
.gracias__ojo{margin-bottom:12px}
.gracias--fallido .gracias__ojo,.gracias--parado .gracias__ojo{color:var(--lacre);border-color:var(--lacre)}
.gracias__tit{font-family:var(--display);font-size:clamp(29px,5.4vw,46px);font-weight:600;line-height:1.08;
  color:var(--tinta);text-wrap:balance}
.gracias__lead{max-width:58ch;margin:12px auto 0;font-size:16px;line-height:1.6;color:var(--tinta-2)}
.gracias__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.gracias__chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--papel-3);font-size:13.5px;font-weight:600;color:var(--tinta-2)}
.gracias__chip b{font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums}
.gracias__chip svg{width:16px;height:16px;flex:none}
.gracias__chip--oro{background:var(--oro-tinte);border-color:var(--oro-borde);color:var(--oro-texto)}
.gracias__acciones{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.gracias__acciones .btn svg,.gracias .btn svg{width:19px;height:19px;flex:none}

/* ---------- Rejilla ---------- */
.gracias__grid{display:grid;gap:26px}
.gracias__grid>*{min-width:0}
@media(min-width:1000px){
  .gracias__grid{grid-template-columns:minmax(0,1fr) minmax(340px,410px);gap:44px;align-items:start}
  .gracias__lado{position:sticky;top:calc(var(--cab-alto,105px) + 18px)}
}

/* ---------- 2 · Que esta pasando ---------- */
.gracias__falta{padding:22px 22px 24px;margin-bottom:26px;background:var(--oro-tinte);border:1px solid var(--oro-borde);
  border-left:4px solid var(--oro);border-radius:2px}
.gracias__falta .ojo{margin-bottom:10px}
.gracias__falta h2{font-family:var(--display);font-size:clamp(21px,3vw,25px);font-weight:600;line-height:1.2;color:var(--tinta)}
.gracias__falta>p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--tinta-2);max-width:62ch}
.gracias__cuentas{margin-top:14px;padding:14px 16px;background:#fff;border:1px dashed var(--oro-borde);border-radius:2px;
  font-size:14px;line-height:1.6;color:var(--tinta)}
.gracias__cuentas p{margin:0}
.gracias__cuentas p+p{margin-top:8px}
.gracias__falta .btn{margin-top:16px}
.gracias__pasarela{margin:0 0 22px;padding:14px 16px;background:#fff;border:1px solid var(--papel-3);border-radius:2px;
  font-size:14px;line-height:1.6;color:var(--tinta-2)}
.gracias__falta .gracias__pasarela{margin:14px 0 0}
.gracias__pasarela:empty{display:none}

/* ---------- 3 · Que sigue ---------- */
.gracias__sigue{padding:22px 22px 24px;margin-bottom:22px;background:#fff;border:1px solid var(--papel-3);border-radius:2px}
.gracias__sigue-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:18px}
.gracias__sigue-cab .ojo{margin:0}
.gracias__sigue-cab span{font-size:13px;font-weight:700;color:var(--tinta-2)}
.gracias__pasos{list-style:none;margin:0;padding:0}
.gracias__paso{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding-bottom:20px}
.gracias__paso:last-child{padding-bottom:0}
.gracias__paso::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--papel-3)}
.gracias__paso:last-child::before{display:none}
.gracias__paso.es-pasado::before{background:var(--oro)}
.gracias__punto{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;
  border:2px solid var(--papel-3);font-size:13px;font-weight:800;color:var(--tinta-2);position:relative;z-index:1}
.gracias__punto svg{width:16px;height:16px;stroke-width:2.6}
.gracias__paso.es-pasado .gracias__punto{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.gracias__paso.es-actual .gracias__punto{border-color:var(--oro);color:var(--oro-texto);box-shadow:0 0 0 5px var(--oro-tinte)}
.gracias__paso-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:5px;font-size:15.5px;font-weight:800;color:var(--tinta)}
.gracias__paso:not(.es-pasado):not(.es-actual) .gracias__paso-t{color:var(--tinta-2)}
.gracias__ahora{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;
  border-radius:999px;background:var(--oro);color:var(--tinta)}
.gracias__paso-x{display:block;margin-top:4px;font-size:13.5px;line-height:1.6;color:var(--tinta-2);max-width:60ch}

/* ---------- 4 · Sellos ---------- */
.gracias__sellos{display:grid;gap:10px}
@media(min-width:640px){.gracias__sellos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gracias__sello{display:flex;flex-direction:column;gap:4px;padding:16px 16px 18px;background:var(--papel-2);
  border:1px solid var(--papel-3);border-radius:2px}
.gracias__sello svg{width:24px;height:24px;margin-bottom:6px;stroke:var(--oro-texto)}
.gracias__sello b{font-size:14.5px;font-weight:800;color:var(--tinta)}
.gracias__sello span{font-size:13px;line-height:1.5;color:var(--tinta-2)}

/* ---------- 5 · Quizas te guste tambien (franja de todo el ancho) ---------- */
.gracias__mas{margin-top:40px;padding-top:34px;border-top:1px solid var(--papel-3)}
.gracias__mas-cab{margin-bottom:16px}
.gracias__mas-cab .ojo{margin-bottom:10px}
.gracias__mas-cab h2{font-family:var(--display);font-size:clamp(23px,3.4vw,30px);font-weight:600;line-height:1.15;color:var(--tinta)}
.gracias__mas-cab p:last-child{margin-top:6px;font-size:14px;color:var(--tinta-2)}
@media(min-width:1000px){.gracias__rejilla{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Lado: resumen, entrega, ayuda ---------- */
.gracias__res{padding:20px;background:var(--papel-2);border:1px solid var(--papel-3);border-radius:2px}
.gracias__res-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;
  padding-bottom:12px;border-bottom:1px solid var(--papel-3)}
.gracias__res-cab h2{font-family:var(--display);font-size:21px;font-weight:600;color:var(--tinta)}
.gracias__res-cab span{font-size:12.5px;font-weight:700;color:var(--tinta-2)}
.gracias__res .pago__marca,.gracias__res .pago__nom{display:block}
.gracias__linea-pie{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:6px}
.gracias__linea-pie b{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums}
.gracias__tot{margin:0;padding-top:12px;border-top:1px solid var(--papel-3);display:grid;gap:9px}
.gracias__tot>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.gracias__tot dt{font-size:13.5px;color:var(--tinta-2);max-width:60%}
.gracias__tot dd{margin:0;text-align:right;font-size:14px;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.gracias__tot .es-total{margin-top:4px;padding-top:12px;border-top:1px solid var(--papel-3)}
.gracias__tot .es-total dt{font-size:15px;font-weight:800;color:var(--tinta)}
.gracias__tot .es-total dd{font-size:21px;font-weight:800}
.gracias__nota-pago{margin-top:12px;padding-top:12px;border-top:1px dashed var(--papel-3);font-size:12.5px;line-height:1.55;color:var(--tinta-2)}

.gracias__entrega{margin-top:14px;padding:16px 18px;background:#fff;border:1px solid var(--papel-3);border-radius:2px}
.gracias__entrega h3{margin-bottom:8px;font-family:var(--ui);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro-texto)}
.gracias__entrega address{font-style:normal;font-size:14px;line-height:1.6;color:var(--tinta)}
.gracias__entrega p{margin-top:8px;font-size:13px;line-height:1.5;color:var(--tinta-2);overflow-wrap:anywhere}

.gracias__ayuda{margin-top:14px;padding:20px;display:grid;gap:8px;background:#fff;border:1px solid var(--papel-3);border-radius:2px}
.gracias__ayuda>b{font-family:var(--display);font-size:19px;font-weight:600;color:var(--tinta)}
.gracias__ayuda>span{font-size:13.5px;line-height:1.55;color:var(--tinta-2)}
.gracias__ayuda .btn{min-height:50px;margin-top:6px}
.gracias__link{justify-self:center;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--tinta);
  text-decoration:underline;text-underline-offset:3px}
.gracias--espera .gracias__ayuda,.gracias--transferencia .gracias__ayuda{background:var(--carbon);border-color:var(--carbon)}
.gracias--espera .gracias__ayuda>b,.gracias--transferencia .gracias__ayuda>b{color:var(--papel)}
.gracias--espera .gracias__ayuda>span,.gracias--transferencia .gracias__ayuda>span{color:rgba(253,251,246,.76)}
.gracias--espera .gracias__link,.gracias--transferencia .gracias__link{color:var(--oro-luz)}

@media(max-width:639px){
  .gracias__sello{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:14px 16px}
  .gracias__sello svg{grid-row:span 2;margin:1px 0 0}
}
@media(max-width:560px){
  .gracias__hero{padding:28px 14px 24px}
  .gracias__falta,.gracias__sigue{padding:18px 16px 20px}
  .gracias__acciones .btn,.gracias__falta .btn{width:100%}
}