/** Shopify CDN: Minification failed

Line 332:0 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0) */
.announcement{background:var(--ink);color:#fff;font-size:13px}
.announcement__inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding-block:10px;
}
.announcement__msg{margin:0}
.announcement__links{display:flex;gap:20px}
.announcement__links a:hover{color:#8fe3ee}
.announcement__tel{display:inline-flex;align-items:center;gap:7px}
.announcement__tel svg{opacity:.75}

@media (max-width:860px){
  .announcement{font-size:12px}
  /* Una sola línea: la barra se roba altura antes de que se vea un producto.
     El relleno vertical lo pone el enlace, no el contenedor, así el teléfono
     conserva alto táctil sin que la barra crezca por los dos lados. */
  .announcement__inner{
    justify-content:space-between;flex-wrap:nowrap;
    gap:12px;padding-block:0;
  }
  .announcement__msg{
    min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* A tamaño de texto el enlace deja 18 px de alto, poco para acertarle con
     el dedo cuando lo que hace es llamar. */
  .announcement__tel{padding-block:8px;flex:none}
}
/* END_SECTION:announcement-bar */

/* START_SECTION:cart-main (INDEX:1) */
.cartp{padding:26px 0 64px}
.cartp__title{font:600 30px/38px var(--font-head);color:var(--ink);margin-bottom:24px}

.cartp__empty{
  text-align:center;padding:56px 20px;
  background:var(--grey8);border-radius:var(--radius);
}
.cartp__empty p{color:var(--body);margin-bottom:20px}

.cartp__grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:40px;align-items:start}

/* ---------------- Líneas ---------------- */

.cline{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto auto;
  gap:18px;align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--bd);
}
.cline:first-child{border-top:1px solid var(--bd)}

.cline__media{
  width:96px;aspect-ratio:1;
  border-radius:10px;overflow:hidden;background:var(--grey1);
  display:block;position:relative;
}
.cline__media img{width:100%;height:100%;object-fit:cover;display:block}
.cline__media .ph{position:absolute;inset:0}

.cline__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.cline__title{font:500 16px/22px var(--font-body);color:var(--ink)}
.cline__title:hover{color:var(--cta)}
.cline__variant{font-size:13px;color:var(--mute)}
.cline__unit{font-size:13px;color:var(--body);display:flex;gap:7px;align-items:baseline}
.cline__unit del{color:var(--mute)}

.cline__qty{display:flex;flex-direction:column;align-items:center;gap:7px}
.cline__remove{font-size:12.5px;color:var(--mute);text-decoration:underline}
.cline__remove:hover{color:var(--price)}

.cline__total{
  font:600 17px/1 var(--font-body);color:var(--ink);
  text-align:right;min-width:92px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-end;
}
.cline__total del{font-size:13px;font-weight:400;color:var(--mute)}

.cartp__note{margin-top:22px;max-width:520px}
.cartp__note label{
  display:block;margin-bottom:7px;
  font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
}
.cartp__note textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--bd);border-radius:var(--radius);
  font:400 14px/22px var(--font-body);color:var(--ink);
  resize:vertical;
}
.cartp__note textarea:focus{outline:2px solid var(--cta);outline-offset:-1px;border-color:var(--cta)}

/* ---------------- Resumen ---------------- */

.cartp__summary{
  position:sticky;top:var(--sticky-top);
  background:var(--grey8);
  border:1px solid var(--bd);border-radius:var(--radius);
  padding:22px;
  display:flex;flex-direction:column;gap:13px;
}
.cartp__summary h2{font:600 17px/1 var(--font-head);color:var(--ink);margin-bottom:3px}
.csum__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:15px;color:var(--body)}
.csum__row strong{font-size:19px;color:var(--ink)}
.csum__row--save strong{color:var(--price);font-size:15px}
.csum__note{font-size:12.5px;line-height:19px;color:var(--mute)}
.csum__back{text-align:center;font-size:13.5px;color:var(--cta)}
.csum__back:hover{color:var(--cta-2)}
/* Con JavaScript el formulario se envía solo al cambiar la cantidad. */
.js .csum__update{display:none}

@media (max-width:900px){
  .cartp__grid{grid-template-columns:1fr;gap:26px}
  .cartp__summary{position:static}
}
@media (max-width:620px){
  .cartp{padding:18px 0 44px}
  .cartp__title{font-size:24px;line-height:31px;margin-bottom:16px}
  .cline{
    grid-template-columns:72px minmax(0,1fr) auto;
    grid-template-areas:'foto info total' 'foto cant cant';
    gap:12px 14px;align-items:start;
  }
  .cline__media{grid-area:foto;width:72px}
  .cline__info{grid-area:info}
  .cline__total{grid-area:total}
  .cline__qty{grid-area:cant;flex-direction:row;align-items:center;gap:14px}
}
/* END_SECTION:cart-main */

/* START_SECTION:collection-banner (INDEX:3) */
.cbanner{
  background:var(--grey1);
  padding:14px 0 18px;
  border-bottom:1px solid var(--bd);
}
/* Sin nada visible dentro, la franja no debe ocupar ni pintar nada. */
.cbanner--vacio{background:none;padding:0;border-bottom:0}
.crumbs{
  display:flex;gap:8px;align-items:center;
  font-size:12.5px;color:var(--mute);
  margin-bottom:6px;
}
.crumbs a:hover{color:var(--cta)}
.cbanner__title{font-size:28px;line-height:34px}
.cbanner__text{
  margin-top:8px;max-width:62ch;
  font-size:15px;line-height:24px;color:var(--body);
}

@media (max-width:560px){
  .cbanner{padding:10px 0 14px}
  .cbanner__title{font-size:23px;line-height:29px}
}
/* END_SECTION:collection-banner */

/* START_SECTION:collections-feature (INDEX:5) */
.cfeat__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

.cfeat__item{
  position:relative;display:block;
  border-radius:var(--radius);overflow:hidden;
  isolation:isolate;
}
.cfeat__media{display:block;position:relative;aspect-ratio:3/2}
.cfeat__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.cfeat__item:hover .cfeat__media img{transform:scale(1.04)}

/* Velo en degradado: sin él el texto blanco se pierde en las fotos claras,
   que acá son casi todas —hielo y escarcha. */
.cfeat__item::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--ink) 70%, transparent) 30%,
    color-mix(in srgb, var(--ink) 34%, transparent) 58%,
    transparent 82%);
  pointer-events:none;
}

.cfeat__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:26px 28px;color:#fff;
}
.cfeat__kicker{
  font:600 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;
  color:#8fe3ee;margin-bottom:9px;
}
.cfeat__title{font:600 27px/33px var(--font-head);margin-bottom:5px}
.cfeat__text{font-size:14px;line-height:21px;color:rgba(255,255,255,.82)}
.cfeat__cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:15px;
  font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;
  padding-bottom:5px;border-bottom:2px solid var(--cta);
  transition:gap .25s ease;
}
/* El chevron apunta a la derecha: es un «ir a», no un desplegable. */
.cfeat__cta svg{transform:rotate(-90deg)}
.cfeat__item:hover .cfeat__cta{gap:11px}

@media (max-width:760px){
  .cfeat__grid{grid-template-columns:1fr;gap:16px}
  /* Más alta que en escritorio a propósito: en una columna angosta el
     bloque de texto ocupa casi lo mismo sea cual sea el ancho, y a 16:9
     no quedaba foto a la vista debajo de él. */
  .cfeat__media{aspect-ratio:4/3}
  .cfeat__body{padding:20px 20px}
  .cfeat__title{font-size:22px;line-height:28px}
}

@media (prefers-reduced-motion: reduce){
  .cfeat__media img,.cfeat__cta{transition:none}
}
/* END_SECTION:collections-feature */

/* START_SECTION:collections-list (INDEX:6) */
.clist .sec-head{margin-bottom:30px}
.clist__text{
  margin-top:12px;max-width:62ch;
  font-size:15px;line-height:24px;color:var(--body);
}
@media (max-width:560px){.clist .sec-head{margin-bottom:20px}}
/* END_SECTION:collections-list */

/* START_SECTION:featured-collection (INDEX:7) */
[data-filter-item]{display:flex}
[data-filter-item] > *{flex:1}

.fcol__chips{display:flex;gap:10px;flex-wrap:wrap}
.fcol__empty{text-align:center;color:var(--mute);padding-block:32px}
.fcol__more{display:flex;justify-content:center;margin-top:28px}

@media (max-width:860px){
  .fcol__chips{
    flex-wrap:nowrap;overflow-x:auto;width:100%;
    padding-bottom:4px;scrollbar-width:none;
  }
  .fcol__chips::-webkit-scrollbar{display:none}
}
/* END_SECTION:featured-collection */

/* START_SECTION:footer (INDEX:8) */
.footer{background:var(--ink);color:#fff;padding:44px 0 26px}
.footer__top{
  display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));
  gap:36px;
}
.footer__logo img{display:block;width:170px;height:auto;max-width:none}
.footer__about{font-size:14px;line-height:24px;color:#c9cde4;margin-top:12px}
.footer__coltitle{color:#fff;font-size:17px;margin-bottom:14px}
.footer__links{font-size:14px;line-height:28px;color:#c9cde4}
.footer__links a:hover{color:#8fe3ee}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:30px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:13px;color:#c9cde4;
}
.footer__pay{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.footer__pay li{
  display:flex;align-items:center;
  background:#fff;
  border-radius:7px;
  padding:7px 12px;
}
.footer__pay img{display:block;height:22px;width:auto}
/* Reserva para un medio sin logo cargado */
.footer__pay span{font-size:12px;color:var(--ink);font-weight:600}

@media (max-width:860px){
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .footer__brand{grid-column:1 / -1}
}

@media (max-width:560px){
  .footer{padding:32px 0 20px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:9) */
.header{
  background:#fff;position:relative;z-index:30;
  transition:box-shadow .2s ease;
}
/* Encogerlo al fijarse es solo de escritorio: en móvil ya mide 77 px y
   recortarlo más dejaría el logo ilegible. La sombra en móvil va fija, más
   abajo, porque ahí no existe la barra de colecciones que lo separe. */
@media (min-width:861px){
  .header.is-stuck{box-shadow:0 6px 20px color-mix(in srgb, var(--ink) 10%, transparent)}
  .header.is-stuck .header__main{padding-block:10px}
  .header.is-stuck .header__logo img{width:calc(var(--logo-w) * .68)}
}
.header__main{transition:padding .2s ease}

.header__main{
  display:grid;
  /* Logo · menú principal · buscador · carrito */
  grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:20px;align-items:center;
  padding-block:16px;
}
.header__brand{justify-self:start}
.hcart{justify-self:end}

/* ---------- Menú principal ---------- */

.topnav{
  display:flex;align-items:center;gap:20px;
  font:500 14px var(--font-body);
  white-space:nowrap;
}
.topnav__link{color:var(--body)}
.topnav__link:hover{color:var(--cta)}

}
.header__logo{display:block}
.header__logo img{
  display:block;
  width:var(--logo-w);height:auto;
  /* Sin esto el max-width:100% global lo vuelve comprimible y la columna
     lateral del grid lo aplasta para darle su ancho máximo al buscador. */
  max-width:none;
  transition:width .2s ease;
}

.header__burger{
  display:none;background:none;border:0;padding:6px;
  color:var(--ink);cursor:pointer;
}

/* Buscador */
.hsearch{
  display:flex;align-items:center;gap:8px;
  width:100%;max-width:620px;min-width:220px;
  border:2px solid var(--bd);border-radius:var(--radius-pill);
  padding:4px 4px 4px 18px;
  transition:border-color .18s ease;
}
.hsearch:focus-within{border-color:var(--cta)}
.hsearch__icon{color:var(--mute);display:flex;flex:none}
.hsearch input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:400 15px var(--font-body);color:var(--ink);
}
.hsearch .btn{flex:none;padding:9px 18px}

/* Carrito */
.hcart{
  position:relative;
  /* Círculo con el mismo borde del buscador. Los 53px son su altura: el
     buscador la saca de su contenido, así que acá va explícita y hay que
     tocarla si aquel cambia de tamaño. */
  --hcart-size:53px;
  width:var(--hcart-size);height:var(--hcart-size);
  display:grid;place-items:center;
  border:2px solid var(--bd);border-radius:50%;
  color:var(--ink);
  transition:border-color .18s ease, color .18s ease;
}
.hcart:hover{color:var(--cta);border-color:var(--cta)}
.hcart:focus-visible{border-color:var(--cta)}

/* El contador queda a caballo sobre el borde, arriba a la derecha. Se
   posiciona por el centro y no por las esquinas: así sigue calzando sobre
   la línea aunque el número pase de una cifra a tres y la burbuja se
   ensanche, y se adapta solo cuando el círculo cambia de tamaño.
   El desplazamiento es el radio hasta la mitad del borde, repartido en
   partes iguales entre los dos ejes (dividir por √2 da el punto a 45°). */
.hcart__count{
  --hcart-r:calc((var(--hcart-size) / 2 - 1px) / 1.41421);
  position:absolute;top:50%;left:50%;
  transform:translate(-50%, -50%) translate(var(--hcart-r), calc(var(--hcart-r) * -1));
  background:var(--price);color:#fff;
  font:600 11px/18px var(--font-body);
  min-width:18px;height:18px;border-radius:9px;
  text-align:center;padding-inline:5px;
}

/* Navegación */
.hnav{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.hnav__inner{
  display:flex;gap:28px;align-items:center;
  /* Si el comerciante agrega más colecciones, la barra baja a otra línea
     en vez de desbordarse. No uso scroll horizontal porque recortaría
     los desplegables. */
  flex-wrap:wrap;
  padding-block:14px;
  font:500 15px var(--font-body);
}

/* Entre 861 y 1080 px la fila va justa: apretamos enlaces, logo y
   buscador antes de que algo se desborde. */
@media (max-width:1080px){
  .hnav__inner{gap:18px;font-size:14px}
  .header__main{gap:16px}
  .topnav{gap:16px;font-size:13px}
  .hsearch{min-width:230px}
}
.hnav__link{color:var(--body)}
.hnav__link:hover{color:var(--cta)}

.dd{position:relative}
.dd__trigger{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.dd__trigger svg{color:var(--mute)}
.dd__panel{
  position:absolute;top:100%;left:-18px;z-index:20;
  min-width:250px;
  /* El padding hace de puente: el panel arranca pegado al trigger,
     así el cursor nunca cruza una zona muerta y el menú no se cierra. */
  padding-top:14px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px) scale(.96);
  transform-origin:top left;
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
}
.dd__panel-inner{
  background:#fff;
  border:1px solid var(--bd);border-radius:var(--radius);
  box-shadow:0 15px 30px rgba(61,110,168,.14);
  padding:14px 0;
}
.dd:hover .dd__panel,
.dd:focus-within .dd__panel{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .2s ease,transform .2s cubic-bezier(.2,.9,.3,1.1),visibility 0s;
}
.dd:hover .dd__trigger,
.dd:focus-within .dd__trigger{color:var(--cta)}
.dd__trigger svg{transition:transform .2s ease}
.dd:hover .dd__trigger svg,
.dd:focus-within .dd__trigger svg{transform:rotate(180deg)}
.dd__panel a{
  display:flex;justify-content:space-between;gap:16px;
  padding:9px 22px;font:400 15px var(--font-body);color:var(--body);
}
.dd__panel a:hover{background:var(--grey8);color:var(--ink)}
.dd__panel a span{color:var(--mute);font-size:13px}

@media (prefers-reduced-motion: reduce){
  .dd__panel{transition:none;transform:none}
  .dd:hover .dd__panel,.dd:focus-within .dd__panel{transition:none;transform:none}
  .dd__trigger svg{transition:none}
}

/* Chips y menú móvil */

@media (max-width:860px){
  /* En escritorio el encabezado se apoya en la barra de colecciones, que le
     pone un borde inferior, y gana sombra al fijarse. Acá esa barra vive en
     el cajón y el encabezado no se fija, así que sin esto queda pegado a la
     grilla sin nada que los separe. La sombra va fija y es la misma del
     estado fijo en escritorio. */
  .header{box-shadow:0 6px 20px color-mix(in srgb, var(--ink) 10%, transparent)}

  /* Logo a la izquierda; carrito y hamburguesa a la derecha */
  .header__main{
    grid-template-columns:1fr auto auto;
    gap:12px;
    padding-block:12px;
  }
  .header__brand{justify-self:start}
  .header__logo img{width:min(var(--logo-w), 104px)}
  .header__burger{display:block}

  /* Sin buscador a la vista, el círculo no tiene con qué emparejarse y a
     53px se comería la barra. */
  .hcart{--hcart-size:42px}

  /* Todo esto vive dentro del cajón */
  .topnav,
  .hnav,
  .header__main .hsearch{display:none}
}
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:10) */
.hero{
  position:relative;display:block;
  isolation:isolate;
  background:var(--ink);
}

.hero__track{
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.hero__track::-webkit-scrollbar{display:none}

.hero__slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
  min-height:520px;
  display:flex;align-items:center;
  background:repeating-linear-gradient(135deg,#cfd7e2 0 14px,#c5cedb 14px 28px);
}

.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  /* Cada slide define su eje horizontal según dónde viva el producto;
     el vertical se mantiene alto porque casi todas las tomas son cenitales. */
  object-position:var(--focal-x, 72%) 28%;
}

/* Acercamiento lento mientras el slide está a la vista.

   Va con transición y no con @keyframes: la clase se pone y se quita en
   cada cambio, así que la transición se reinicia sola sin los trucos que
   pide reiniciar una animación. Y el slide que sale vuelve a su tamaño
   suavemente, que importa porque durante el desplazamiento todavía se ve:
   con una animación cortada de golpe pegaría un salto.

   El recorte lo hace el slide: la imagen crece más allá de su caja y sin
   esto se metería en el slide vecino. */
.hero--zoom .hero__slide{overflow:hidden}
.hero--zoom .hero__bg{
  transform:scale(1);
  transition:transform .9s ease-out;
  will-change:transform;
}
.hero--zoom .hero__slide.is-current .hero__bg{
  transform:scale(1.08);
  transition:transform var(--zoom-time, 8s) linear;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--ink) 86%, transparent) 0%,
    color-mix(in srgb, var(--ink) 64%, transparent) 48%,
    color-mix(in srgb, var(--ink) 15%, transparent) 100%);
}

/* El padding inferior deja espacio para los puntos y el anillo */
.hero__inner{position:relative;z-index:3;padding-block:64px 116px}
.hero__copy{max-width:660px}
.hero__eyebrow{color:#8fe3ee}
.hero__title{
  color:#fff;font-size:54px;line-height:59px;margin-top:10px;
  text-wrap:balance;letter-spacing:-.3px;
}
.hero__text{
  font-size:16px;line-height:26px;color:#e6e8f4;
  max-width:46ch;margin:18px 0 28px;
}
.hero__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Entrada del texto: cada pieza sube y aparece cuando su slide pasa a
   estar visible, escalonadas para que se lean en orden.

   El estado oculto depende de `is-ready`, que pone el JavaScript. Si el
   script no corre, el texto se ve igual: nunca queda contenido invisible
   esperando a un script que quizá falló.

   Al salir se va rápido y sin espera, porque el slide todavía está a la
   vista mientras se desplaza. */
.hero--text.is-ready .hero__eyebrow,
.hero--text.is-ready .hero__title,
.hero--text.is-ready .hero__text,
.hero--text.is-ready .hero__actions{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .3s ease-in, transform .3s ease-in;
}
.hero--text.is-ready .hero__slide.is-current .hero__eyebrow,
.hero--text.is-ready .hero__slide.is-current .hero__title,
.hero--text.is-ready .hero__slide.is-current .hero__text,
.hero--text.is-ready .hero__slide.is-current .hero__actions{
  opacity:1;
  transform:none;
  transition:opacity 1.1s ease-out, transform 1.1s cubic-bezier(.16,.84,.28,1);
}
/* La espera entre piezas es lo que hace que se lea como una secuencia y no
   como un bloque que aparece: la última arranca casi un segundo después de
   la primera. El conjunto termina a los 2,2 s, muy dentro de los 7 que
   dura el slide. */
.hero--text.is-ready .hero__slide.is-current .hero__eyebrow{transition-delay:.15s}
.hero--text.is-ready .hero__slide.is-current .hero__title{transition-delay:.42s}
.hero--text.is-ready .hero__slide.is-current .hero__text{transition-delay:.72s}
.hero--text.is-ready .hero__slide.is-current .hero__actions{transition-delay:1.02s}

/* ---------- Controles ---------- */

.hero__controls{
  position:absolute;left:0;right:0;bottom:46px;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  pointer-events:none;
}
.hero__dots{display:flex;gap:8px;pointer-events:auto}

.hero__dot{
  width:34px;height:5px;padding:0;border:0;border-radius:3px;
  background:rgba(255,255,255,.42);cursor:pointer;
  transition:background .2s ease,width .2s ease;
}
.hero__dot:hover{background:rgba(255,255,255,.7)}
.hero__dot[aria-selected="true"]{background:var(--cta);width:48px}

.hero__timer{
  position:relative;width:44px;height:44px;flex:none;
  display:grid;place-items:center;
}
.hero__timer svg{
  position:absolute;inset:0;width:100%;height:100%;
  /* Arranca arriba en vez de a las 3 en punto */
  transform:rotate(-90deg);
}
.hero__timer circle{fill:none;stroke-width:2.5}
.hero__timer-track{stroke:rgba(255,255,255,.28)}
.hero__timer-fill{
  stroke:var(--cta);stroke-linecap:round;
  /* 2πr con r=19 */
  stroke-dasharray:119.38;
  stroke-dashoffset:119.38;
}
.hero__timer-count{
  position:relative;
  font:600 13px/1 var(--font-body);
  color:#fff;font-variant-numeric:tabular-nums;
}

@media (max-width:860px){
  .hero__title{font-size:40px;line-height:44px}
  .hero__inner{padding-block:48px 106px}
}

@media (max-width:560px){
  .hero__slide{min-height:420px;align-items:flex-end}
  .hero__scrim{
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 25%, transparent) 0%,
      color-mix(in srgb, var(--ink) 88%, transparent) 62%);
  }
  /* En vertical el recorte cae encima del salmón y el texto se queda
     sin fondo: corremos el encuadre hacia la pizarra. */
  .hero__bg{object-position:28% 30%}
  .hero__inner{padding-block:24px 88px}
  .hero__title{font-size:32px;line-height:36px}
  .hero__text{font-size:14px;line-height:22px;margin:10px 0 18px}
  .hero__actions .btn,.hero__actions .btn-o{width:100%}
  .hero__controls{bottom:34px}
  .hero__dot{width:26px}
  .hero__dot[aria-selected="true"]{width:38px}
}

@media (prefers-reduced-motion: reduce){
  .hero--zoom .hero__bg,
  .hero--zoom .hero__slide.is-current .hero__bg{transform:none;transition:none}
  .hero--text.is-ready .hero__eyebrow,
  .hero--text.is-ready .hero__title,
  .hero--text.is-ready .hero__text,
  .hero--text.is-ready .hero__actions,
  .hero--text.is-ready .hero__slide.is-current .hero__eyebrow,
  .hero--text.is-ready .hero__slide.is-current .hero__title,
  .hero--text.is-ready .hero__slide.is-current .hero__text,
  .hero--text.is-ready .hero__slide.is-current .hero__actions{
    opacity:1;transform:none;transition:none;
  }
  .hero__track{scroll-behavior:auto}
  .hero__dot{transition:none}
}
/* END_SECTION:hero */

/* START_SECTION:newsletter (INDEX:11) */
.news{background:var(--cta);padding-block:36px}
.news__inner{
  display:flex;justify-content:space-between;align-items:center;gap:32px;
}
.news__title{color:#fff;font-size:28px;line-height:34px;margin-bottom:6px;text-wrap:balance}
.news__text{font-size:14px;color:#eafafd}
.news__form{
  display:flex;align-items:center;position:relative;
  background:#fff;border-radius:var(--radius-pill);
  padding:5px 5px 5px 22px;min-width:440px;margin:0;
}
.news__form input[type="email"]{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:400 15px var(--font-body);color:var(--ink);
}
.news__form .btn{flex:none}
.news__ok,.news__error{
  position:absolute;top:calc(100% + 8px);left:22px;
  font-size:13px;color:#fff;margin:0;
}
.news__error{color:#ffe2e9}

@media (max-width:960px){
  .news__inner{flex-direction:column;align-items:stretch;text-align:center}
  .news__form{min-width:0;width:100%;text-align:left}
  .news__title{font-size:22px;line-height:28px}
}

@media (max-width:560px){
  .news__form{
    flex-direction:column;background:transparent;padding:0;gap:10px;
  }
  .news__form input[type="email"]{
    width:100%;background:#fff;border-radius:var(--radius-pill);
    padding:14px 22px;
  }
  .news__form .btn{width:100%}
  .news__ok,.news__error{position:static;text-align:center}
}
/* END_SECTION:newsletter */

/* START_SECTION:offers (INDEX:12) */
.offers{
  /* Un tinte apenas perceptible separa la fila de la de productos que va
     justo antes. Sin filetes de color: alcanza con el cambio de fondo. */
  background:color-mix(in srgb, var(--price) 4%, #fff);
  padding-block:44px;
}
.offers__note{
  font-size:14px;color:var(--mute);
  max-width:34ch;text-align:right;
}
.offers__empty{
  grid-column:1 / -1;text-align:center;
  color:var(--mute);padding-block:32px;
}
.offers__more{display:flex;justify-content:center;margin-top:28px}

@media (max-width:860px){
  .offers__note{text-align:left;max-width:none}
}
@media (max-width:560px){
  .offers{padding-block:28px}
}
/* END_SECTION:offers */

/* START_SECTION:page-content (INDEX:13) */
.pcontent .rte{max-width:68ch}
/* END_SECTION:page-content */

/* START_SECTION:page-header (INDEX:14) */
.phead{background:var(--grey1);border-bottom:1px solid var(--bd);padding:14px 0 34px}
.phead .crumbs{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--mute);margin-bottom:18px;
}
.phead .crumbs a:hover{color:var(--cta)}
.phead__inner{max-width:720px}
.phead__eyebrow{color:var(--cta);display:block;margin-bottom:4px}
.phead__title{font:600 38px/46px var(--font-head);color:var(--ink)}
.phead__lead{
  margin-top:14px;max-width:60ch;
  font-size:17px;line-height:28px;color:var(--body);
}
@media (max-width:560px){
  .phead{padding:10px 0 24px}
  .phead__title{font-size:28px;line-height:35px}
  .phead__lead{font-size:15px;line-height:25px;margin-top:11px}
}
/* END_SECTION:page-header */

/* START_SECTION:proceso (INDEX:15) */
.proceso__intro{
  margin-top:12px;max-width:62ch;
  font-size:16px;line-height:26px;color:var(--body);
}

.proceso__list{
  list-style:none;padding:0;margin-top:34px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
}
.proceso__step{position:relative;display:flex;flex-direction:column;gap:14px}

/* La línea une un paso con el siguiente y por eso no va en el último. */
.proceso__step:not(:last-child)::before{
  content:'';position:absolute;
  top:21px;left:52px;right:-26px;height:2px;
  background:repeating-linear-gradient(90deg,
    var(--bd) 0 7px, transparent 7px 14px);
}

.proceso__num{
  width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--cta-soft);color:var(--ink);
  font:600 17px/1 var(--font-head);
  position:relative;z-index:1;
}
.proceso__title{font:600 17px/24px var(--font-head);color:var(--ink);margin-bottom:6px}
.proceso__text{font-size:14.5px;line-height:23px;color:var(--body)}
.proceso__detail{
  display:inline-block;margin-top:10px;
  font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cta);
}

@media (max-width:900px){
  .proceso__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
  /* En dos columnas la línea uniría pasos que no van seguidos en pantalla. */
  .proceso__step::before{display:none}
}
@media (max-width:560px){
  .proceso__list{grid-template-columns:1fr;gap:22px;margin-top:24px}
  .proceso__step{flex-direction:row;gap:14px;align-items:flex-start}
  .proceso__num{width:36px;height:36px;font-size:15px}
}
/* END_SECTION:proceso */

/* START_SECTION:product-main (INDEX:16) */
.pdp{padding:18px 0 56px}
.pdp .crumbs{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--mute);margin-bottom:18px;
}
.pdp .crumbs a:hover{color:var(--cta)}

.pdp__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}

/* ---------------- Galería ---------------- */

.pdp__gallery{display:block;position:sticky;top:var(--sticky-top)}
.pgal__main{
  position:relative;
  aspect-ratio:1;
  border-radius:16px;overflow:hidden;
  background:var(--grey1);
}
.pgal__main img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__main .ph{position:absolute;inset:0}
.pgal__main .pbadge{position:absolute;top:16px;left:16px}

.pgal__thumbs{display:flex;gap:10px;margin-top:12px;list-style:none;padding:0}
.pgal__thumbs button{
  width:78px;aspect-ratio:1;
  border-radius:10px;overflow:hidden;
  border:2px solid transparent;
  background:var(--grey1);
  display:block;padding:0;cursor:pointer;
  transition:border-color .18s ease;
}
.pgal__thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__thumbs button:hover{border-color:var(--bd)}
.pgal__thumbs button[aria-current="true"]{border-color:var(--cta)}

/* ---------------- Información ---------------- */

.pdp__info{display:flex;flex-direction:column;gap:22px}
.pdp__type{
  font:600 11px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cta);display:block;margin-bottom:8px;
}
.pdp__title{font:600 32px/40px var(--font-head);color:var(--ink);margin-bottom:10px}
.pdp__head .product__reviews{margin:0}

.pdp__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pdp__price .price{font-size:30px}
.pdp__price .price del{font-size:19px}
.pdp__save{
  font:600 12px/1 var(--font-body);
  color:var(--price);background:color-mix(in srgb, var(--price) 10%, transparent);
  border-radius:var(--radius-pill);padding:7px 13px;
}

.pdp__variants{border:0;padding:0;margin:0}
.pdp__variants legend{
  font:600 12px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);margin-bottom:10px;padding:0;
}
.pdp__opts{display:flex;gap:10px;flex-wrap:wrap}
/* El radio real queda accesible pero fuera de vista: el foco se dibuja
   sobre la etiqueta, que es lo que el usuario ve. */
.vopt input{position:absolute;opacity:0;width:0;height:0}
.vopt span{
  display:block;
  border:1px solid var(--bd);border-radius:var(--radius-pill);
  padding:10px 22px;
  font:500 14px/1 var(--font-body);color:var(--ink);
  cursor:pointer;transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.vopt span:hover{border-color:var(--cta)}
.vopt input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.vopt input:focus-visible + span{outline:2px solid var(--cta);outline-offset:2px}
.vopt.is-out span{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.pdp__form{display:flex;gap:12px;margin:0}
.pdp__buy .btn{gap:9px}
.pdp__buy .btn.is-disabled{background:var(--mute);border-color:var(--mute);cursor:not-allowed}

.pdp__specs{
  display:grid;gap:0;
  border:1px solid var(--bd);border-radius:var(--radius);
  overflow:hidden;
}
.pdp__specs > div{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:16px;padding:12px 16px;
  font-size:14px;line-height:21px;
}
.pdp__specs > div + div{border-top:1px solid var(--bd)}
.pdp__specs > div:nth-child(odd){background:var(--grey8)}
.pdp__specs dt{color:var(--mute)}
.pdp__specs dd{color:var(--ink);margin:0}

/* El formato lo pone `.rte` en base.css; acá solo el tamaño, que en la
   ficha va un punto más chico que en una página de texto. */
.pdp__desc{font-size:15px;line-height:25px}

.pdp__reassure{list-style:none;padding:0;display:grid;gap:11px}
.pdp__reassure li{
  display:flex;align-items:center;gap:11px;
  font-size:14px;color:var(--body);
}
.pdp__reassure svg{color:var(--cta);flex:0 0 auto}

@media (max-width:900px){
  .pdp__grid{grid-template-columns:1fr;gap:28px}
  .pdp__gallery{position:static}
}
@media (max-width:560px){
  .pdp{padding:12px 0 40px}
  .pdp__title{font:600 25px/32px var(--font-head)}
  .pdp__price .price{font-size:25px}
  .pgal__thumbs button{width:62px}
  .pdp__specs > div{grid-template-columns:1fr;gap:2px}
  .pdp__form{flex-wrap:wrap}
  .pdp__buy .btn{width:100%}
}
/* END_SECTION:product-main */

/* START_SECTION:product-recommendations (INDEX:17) */
.prec{padding:8px 0 64px;border-top:1px solid var(--bd);margin-top:8px}
.prec__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-top:40px;margin-bottom:26px;
}
.prec__head h2{font:600 25px/32px var(--font-head);color:var(--ink)}
.prec__all{
  display:inline-flex;align-items:center;gap:5px;
  font:500 14px/1 var(--font-body);color:var(--cta);white-space:nowrap;
}
/* El chevron apunta a la derecha: es un «ir a», no un desplegable. */
.prec__all svg{transform:rotate(-90deg)}
.prec__all:hover{color:var(--cta-2)}

.prec__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}

@media (max-width:1000px){.prec__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.prec__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media (max-width:560px){
  .prec{padding-bottom:44px}
  .prec__head{padding-top:30px;margin-bottom:18px}
  .prec__head h2{font-size:21px;line-height:27px}
}
/* END_SECTION:product-recommendations */

/* START_SECTION:search-main (INDEX:18) */
.search{padding-block:28px 56px}

.search__head{
  display:flex;flex-direction:column;gap:16px;
  padding-bottom:24px;margin-bottom:4px;
}
.search__title{font:600 30px/38px var(--font-head);color:var(--ink)}
.search__title em{font-style:normal;color:var(--cta)}

/* El buscador de la página es el mismo componente del encabezado, solo
   que acá manda y ocupa el ancho de la columna de texto. */
.search__form{max-width:620px}

.search__idle{padding:8px 0 40px}
.search__hint{font-size:15px;line-height:24px;color:var(--body);margin-bottom:16px}
.search__chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}

.search__pages{
  margin-top:36px;padding-top:24px;
  border-top:1px solid var(--bd);
}
.search__pages h2{font:600 19px/1 var(--font-head);color:var(--ink);margin-bottom:12px}
.search__pages ul{list-style:none;padding:0;display:grid;gap:8px}
.search__pages a{font-size:15px;color:var(--cta)}
.search__pages a:hover{color:var(--cta-2)}

@media (max-width:560px){
  .search{padding-block:18px 40px}
  .search__title{font-size:24px;line-height:31px}
  .search__head{gap:13px;padding-bottom:18px}
}
/* END_SECTION:search-main */

/* START_SECTION:shipping-progress (INDEX:19) */
.ship{
  background:var(--ink);border-radius:var(--radius);
  padding:36px 40px;color:#fff;
  display:flex;justify-content:space-between;align-items:center;gap:32px;
}
.ship__eyebrow{color:#8fe3ee}
.ship__title{color:#fff;font-size:30px;line-height:36px;margin-top:6px;text-wrap:balance}
.ship__bar{flex:1;max-width:300px}
.ship__track{height:10px;background:rgba(255,255,255,.25);border-radius:var(--radius-pill);overflow:hidden}
.ship__fill{display:block;height:100%;background:var(--cta);border-radius:var(--radius-pill);transition:width .4s ease}
.ship__amounts{font-size:13px;color:#c9cde4;margin-top:10px}
.ship .btn{flex:none}

@media (max-width:960px){
  .ship{flex-direction:column;align-items:stretch;gap:20px;padding:24px}
  .ship__title{font-size:22px;line-height:28px}
  .ship__bar{max-width:none}
  .ship .btn{width:100%}
}

@media (max-width:560px){
  .ship__amounts{display:none}
}
/* END_SECTION:shipping-progress */

/* START_SECTION:shop-grid (INDEX:20) */
.shop{padding-block:28px 56px}

@media (max-width:860px){
  .shop{padding-block:18px 40px}
}
/* END_SECTION:shop-grid */

/* START_SECTION:showcase (INDEX:21) */
.showcase{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:44px;
}

.showcase__head{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-bottom:22px;
}
.showcase__title{font-size:26px;line-height:32px}
.showcase__all{flex:none}

.showcase__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;align-items:start;
}
.showcase__list{display:flex;flex-direction:column;gap:8px}

/* ---------- Producto destacado ---------- */

.fcard__media{
  display:block;position:relative;aspect-ratio:1;
  border-radius:var(--radius);overflow:hidden;
  margin-bottom:14px;
}
.fcard__media img{transition:transform .35s ease}
.fcard:hover .fcard__media img{transform:scale(1.04)}
.fcard__badge{position:absolute;top:12px;left:12px;z-index:2}
.fcard__title{
  font:400 17px/23px var(--font-body);color:var(--ink);
  letter-spacing:0;margin:6px 0 8px;
}
.fcard__title a:hover{color:var(--cta)}
.fcard .price{font-size:20px}

/* Una columna por fila: dos vitrinas lado a lado dejan cada producto
   demasiado angosto para leerse. */
@media (max-width:1000px){
  .showcase{grid-template-columns:minmax(0,1fr);gap:40px}
}

@media (max-width:560px){
  .showcase__head{margin-bottom:16px}
  .showcase__title{font-size:22px;line-height:28px}
  .showcase__all{padding:8px 16px}
  /* El destacado pasa arriba y la lista debajo: en vertical, media
     pantalla por columna deja la miniatura ilegible. */
  .showcase__body{grid-template-columns:minmax(0,1fr);gap:16px}
  .fcard__title{font-size:15px;line-height:21px}
  .fcard .price{font-size:18px}
}

@media (prefers-reduced-motion: reduce){
  .fcard__media img,.fcard:hover .fcard__media img{transition:none;transform:none}
}
/* END_SECTION:showcase */

/* START_SECTION:testimonials (INDEX:22) */
.tcard{padding:24px;margin:0;display:flex;flex-direction:column}
.tcard__stars{color:var(--star);margin-bottom:10px;letter-spacing:1px}
.tcard__quote{
  font-size:15px;line-height:24px;color:var(--body);
  margin:0 0 14px;quotes:'“' '”';
}
.tcard__quote::before{content:open-quote}
.tcard__quote::after{content:close-quote}
.tcard figcaption{margin-top:auto}
.tcard__name{font-size:15px}
.tcard__meta{font-size:13px;color:var(--mute);margin-top:2px}

@media (max-width:560px){
  .tcard{padding:18px}
  .tcard__quote{font-size:14px;line-height:22px}
}
/* END_SECTION:testimonials */

/* START_SECTION:trust-bar (INDEX:23) */
.trust{background:var(--grey1);padding:28px 0 32px}
.trust__card{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:22px 16px;
}
.trust__item{
  padding-inline:26px;text-align:center;
  border-right:1px solid var(--bd);
}
.trust__item:last-child{border-right:0}
.trust__icon{color:var(--cta);display:inline-flex;margin-bottom:10px}
.trust__figure{font-size:24px;line-height:1;margin-bottom:5px}
.trust__label{
  font-size:12px;text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:4px;
}
.trust__text{font-size:13px;line-height:18px;color:var(--mute)}

@media (max-width:860px){
  .trust__card{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;padding:24px 8px}
  .trust__item{padding-inline:14px}
  .trust__item:nth-child(2n){border-right:0}
  .trust__item:nth-child(-n+2){padding-bottom:24px;border-bottom:1px solid var(--bd)}
}

@media (max-width:420px){
  .trust__figure{font-size:20px}
  .trust__text{font-size:12px}
}
/* END_SECTION:trust-bar */

/* START_SECTION:whatsapp-float (INDEX:24) */
.wa-fab{
  position:fixed;right:20px;bottom:20px;z-index:25;
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 10px 28px -6px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease;
  margin-bottom:env(safe-area-inset-bottom, 0);
}
.wa-fab:hover,.wa-fab:focus-visible{transform:scale(1.08);background:#20bd5a}
.wa-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* El ícono ocupa buena parte del círculo (40 de 58 px). */
.wa-fab__icon{position:relative;z-index:2;width:40px;height:40px;display:block}

.wa-fab__pulse{
  position:absolute;inset:0;z-index:0;
  border-radius:50%;background:#25d366;
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}

.wa-fab__tip{
  position:absolute;right:calc(100% + 14px);top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:var(--ink);color:#fff;
  font:600 .78rem/1.3 var(--font-body);letter-spacing:.02em;
  padding:.5rem .85rem;border-radius:var(--radius);
  box-shadow:0 6px 18px -4px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.wa-fab__tip::after{
  content:'';position:absolute;left:100%;top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--ink);
}
@media (min-width:900px){
  .wa-fab:hover .wa-fab__tip,
  .wa-fab:focus-visible .wa-fab__tip{opacity:1;transform:translateY(-50%) translateX(0)}
}

@media (max-width:640px){
  .wa-fab{width:54px;height:54px;right:16px;bottom:16px}
  .wa-fab__icon{width:37px;height:37px}
  .wa-fab__tip{display:none}
}

@media (prefers-reduced-motion: reduce){
  .wa-fab__pulse{animation:none;opacity:0}
  .wa-fab{transition:none}
  .wa-fab:hover,.wa-fab:focus-visible{transform:none}
}
/* END_SECTION:whatsapp-float */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:facets-colecciones (INDEX:26) */
.facet__list--cats{gap:0}

/* `.facet__opt` está pensada para una casilla y su texto. Sin el input el
   texto quedaría contra el borde, así que se compensa la sangría para que
   este grupo se lea alineado con los de casillas. */
a.facet__opt--enlace{padding-left:27px;text-decoration:none}
a.facet__opt--enlace:hover{color:var(--cta)}
a.facet__opt--enlace.is-active{color:var(--cta);font-weight:600}

/* --- Rama con subcolecciones --- */
.cat__head{
  display:flex;align-items:center;gap:10px;
  padding:6px 0 6px 27px;cursor:pointer;list-style:none;
  font-size:14.5px;color:var(--body);
  position:relative;
}
.cat__head::-webkit-details-marker{display:none}
.cat__head:hover{color:var(--cta)}
.cat__head.is-active{color:var(--cta);font-weight:600}
/* El chevron va en la sangría que deja el hueco de la casilla, no al final:
   al final competiría con el número de productos. */
.cat__head > svg{
  position:absolute;left:6px;top:50%;
  transform:translateY(-50%);
  color:var(--mute);transition:transform .2s ease;
}
.cat[open] > .cat__head > svg{transform:translateY(-50%) rotate(180deg)}
.cat__head .facet__count{margin-left:auto}

.cat__subs{
  display:flex;flex-direction:column;
  margin:2px 0 6px;padding-left:14px;
  border-left:1px solid var(--bd);
}
.cat__subs a.facet__opt--enlace{padding-left:13px;font-size:14px}
.cat__todo{color:var(--mute)}

@media (prefers-reduced-motion: reduce){
  .cat__head > svg{transition:none}
}
/* END_SNIPPET:facets-colecciones */

/* START_SNIPPET:facets-orden (INDEX:27) */
/* En la barra el orden iba en línea con su etiqueta. Acá ocupa el ancho del
   panel y la etiqueta es el título del grupo, como en los demás. */
.orden{position:relative;display:block}
.orden select{
  width:100%;appearance:none;
  border:1px solid var(--bd);border-radius:var(--radius);
  background:var(--white);
  padding:9px 34px 9px 12px;
  font:400 14px var(--font-body);color:var(--ink);
  cursor:pointer;
}
.orden select:hover{border-color:var(--cta)}
.orden select:focus-visible{outline:2px solid var(--cta);outline-offset:1px;border-color:var(--cta)}
.orden > svg{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  color:var(--mute);pointer-events:none;
}
/* El título del grupo es un <label>: hereda el tamaño del encabezado, no el
   del cuerpo del formulario. */
.facet--plano .facet__head label{cursor:pointer}
/* END_SNIPPET:facets-orden */

/* START_SNIPPET:facets (INDEX:28) */
.facets{display:flex;flex-direction:column}

.facet{border-bottom:1px solid var(--bd)}
.facet__head{
  display:flex;align-items:center;gap:10px;
  padding:14px 0;cursor:pointer;list-style:none;
  font:600 15px var(--font-head);color:var(--ink);
}
.facet__head::-webkit-details-marker{display:none}
/* En la versión plana el título no abre nada: no es un control. */
.facet--plano .facet__head{cursor:default}
.facet__head svg{margin-left:auto;color:var(--mute);transition:transform .2s ease}
.facet[open] .facet__head svg{transform:rotate(180deg)}
.facet__badge{
  background:var(--cta);color:#fff;
  font:600 11px/1 var(--font-body);
  min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding-inline:5px;
}

.facet__body{padding-bottom:14px}
.facet__list{display:flex;flex-direction:column;gap:2px}

.facet__opt{
  display:flex;align-items:center;gap:10px;
  padding:6px 0;cursor:pointer;
  font-size:14.5px;color:var(--body);
}
.facet__opt:hover{color:var(--ink)}
.facet__opt input{
  width:17px;height:17px;flex:none;
  accent-color:var(--cta);cursor:pointer;
}
.facet__name{min-width:0}
.facet__count{
  margin-left:auto;font-size:13px;color:var(--mute);
  font-variant-numeric:tabular-nums;
}
/* Una opción que no devolvería nada se deja visible pero apagada: sacarla
   haría saltar la lista cada vez que se marca otro filtro. */
.facet__opt.is-empty{opacity:.4;cursor:not-allowed}
.facet__opt.is-empty input{cursor:not-allowed}

.facet__price{display:flex;align-items:center;gap:10px}
.facet__price label{flex:1;min-width:0}
.facet__price input{
  width:100%;
  border:1px solid var(--bd);border-radius:var(--radius);
  padding:9px 12px;
  font:400 14px var(--font-body);color:var(--ink);
  background:var(--white);
}
.facet__price input:focus{outline:2px solid var(--cta);outline-offset:1px;border-color:var(--cta)}
.facet__dash{color:var(--mute);flex:none}

.facets__apply{margin-top:16px}
/* END_SNIPPET:facets */

/* START_SNIPPET:product-card-mini (INDEX:31) */
.mcard{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:16px;align-items:center;
  padding:10px;
  border-radius:var(--radius);
  transition:background .18s ease;
}
.mcard:hover{background:var(--grey8)}

.mcard__media{
  position:relative;aspect-ratio:1;
  border-radius:var(--radius);overflow:hidden;
}

.mcard__text{display:block;min-width:0}
.mcard__title{
  display:block;
  font:400 15px/20px var(--font-body);color:var(--ink);
  /* Dos líneas como máximo: si no, las tres tarjetas dejan de estar
     alineadas con el alto del producto grande de al lado. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:6px;
}
.mcard:hover .mcard__title{color:var(--cta)}
.mcard .price{font-size:17px}
.mcard .price del{font-size:13px}

@media (max-width:560px){
  .mcard{grid-template-columns:68px minmax(0,1fr);gap:12px;padding:8px}
  .mcard__title{font-size:14px;line-height:19px}
  .mcard .price{font-size:15px}
}
/* END_SNIPPET:product-card-mini */

/* START_SNIPPET:product-card (INDEX:32) */
.pcard{display:flex;flex-direction:column;height:100%}

/* ---------- Foto y capas ---------- */

.pcard__thumb{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  margin-bottom:14px;
  background:var(--grey1);
}
.pcard__media{display:block;position:relative;aspect-ratio:1}
.pcard__media img{width:100%;height:100%;object-fit:cover;display:block}
.pcard__media .ph{position:absolute;inset:0}

/* Velo sutil sobre la foto al pasar el mouse */
.pcard__thumb::before{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.pcard:hover .pcard__thumb::before{opacity:1}

/* ---------- Íconos flotantes ---------- */

.pcard__action{
  position:absolute;top:14px;right:14px;z-index:3;
  display:flex;flex-direction:column;gap:8px;
}
.pcard__action a{
  width:34px;height:34px;
  display:grid;place-items:center;
  background:#fff;color:var(--ink);
  border-radius:50%;
  box-shadow:0 2px 8px color-mix(in srgb, var(--ink) 12%, transparent);
}
.pcard__action a:hover{background:var(--cta);color:#fff}

/* ---------- Botón sobre la foto ---------- */

.pcard__cta{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:3;
}
.pcard__cta product-form{display:block}
.pcard__form{margin:0}
.pcard__cta .btn{gap:8px;padding-block:11px}
.pcard__cta .btn.is-disabled{
  background:var(--mute);border-color:var(--mute);
  cursor:not-allowed;opacity:.85;
}

/* Íconos y botón entran solo donde hay puntero con hover. En táctil no hay
   forma de revelarlos, así que ahí quedan visibles siempre. */
@media (hover:hover) and (pointer:fine){
  .pcard__action a{
    opacity:0;
    transform:translateX(16px);
    transition:opacity .3s ease, transform .3s ease, background .18s ease, color .18s ease;
  }
  /* Escalonado: el segundo ícono entra un pelo después que el primero */
  .pcard__action a:nth-child(1){transition-delay:.05s}
  .pcard__action a:nth-child(2){transition-delay:.11s}
  .pcard:hover .pcard__action a,
  .pcard:focus-within .pcard__action a{opacity:1;transform:none}

  .pcard__cta{
    opacity:0;
    transform:translateY(34px);
    pointer-events:none;
    transition:opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.05);
  }
  .pcard:hover .pcard__cta,
  .pcard:focus-within .pcard__cta{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- Contenido ---------- */

.pcard__content{display:flex;flex-direction:column;flex:1}
.pcard__meta{font-size:12.5px;color:var(--mute);margin-bottom:3px}
.pcard__title{
  font:400 16px/22px var(--font-body);
  color:var(--ink);letter-spacing:0;
  margin-bottom:8px;
  /* Se corta a dos líneas, pero sin reservarlas: la alineación del precio
     entre tarjetas ya la resuelve el `margin-top:auto` de abajo, y fijar la
     altura solo abría un hueco en los nombres de una línea. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.pcard__title a:hover{color:var(--cta)}
.pcard__content .price{margin-top:auto;font-size:20px}
.pcard__content .price del{font-size:15px}

@media (max-width:560px){
  .pcard__thumb{border-radius:12px;margin-bottom:10px}
  .pbadge{top:9px;left:9px;font-size:10px;padding:5px 9px}
  .pcard__action{top:9px;right:9px;gap:6px}
  .pcard__action a{width:30px;height:30px}
  .pcard__cta{left:9px;right:9px;bottom:9px}
  .pcard__cta .btn{padding-block:10px;font-size:11px}
  .pcard__meta{font-size:11px}
  .pcard__title{font-size:14px;line-height:19px}
  .pcard__content .price{font-size:17px}
  .pcard__content .price del{font-size:13px}
}

@media (prefers-reduced-motion: reduce){
  .pcard__thumb::before,.pcard__action a,.pcard__cta{transition:none}
}
/* END_SNIPPET:product-card */