/* ===================================================================
   Arte Para Pocos · sistema visual para TODO el sitio.
   Se carga desde layout.tpl, asi que aplica a producto, carrito,
   categorias, busqueda y cuenta. La portada ademas carga app-home.css.

   Criterio: no se toca el HTML de Rio. Se pisan sus tokens y sus
   clases propias (.head-main, .btn, .nav-list-link, etc). Asi el tema
   sigue funcionando y solo cambia como se ve.
   =================================================================== */

:root{
  --ap-negro:#0A0809;
  --ap-crema:#F5F0EB;
  --ap-vino:#6B2A35;
  --ap-oro:#C9A84C;
  --ap-oro-claro:#E7CE8A;
  --ap-suave:#8A8580;
  --ap-rad:22px;
  --ap-linea:rgba(245,240,235,.12);

  /* Rio arma los titulos con este token; nuestra marca es peso 900 */
  --title-font-weight:900;
}

/* ---------- tipografia ---------- */
/* Titulos pesados, en mayusculas y con tracking cerrado, como la portada.
   Se usa `body` para ganarle en especificidad al scss del tema sin !important. */
body h1, body h2, body h3, body h4,
body .h1, body .h2, body .h3, body .h4{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.035em;
  line-height:.95;
}
/* Los tamanos NO se pueden fijar con `body h1`: Rio le cuelga al titulo de
   producto su clase .h4 y gana. Se apunta por tipo de pagina, que el
   layout.tpl deja en el body como template-producto, template-cart, etc. */
body.template-product h1,
body.template-product h1.h1, body.template-product h1.h2,
body.template-product h1.h3, body.template-product h1.h4{
  font-size:clamp(24px,3.6vw,36px);
  line-height:.98;
}
body.template-cart h1, body.template-cart h1.h1, body.template-cart h1.h2,
body.template-cart h1.h3, body.template-cart h1.h4,
body.template-category h1, body.template-category h1.h1, body.template-category h1.h2,
body.template-category h1.h3, body.template-category h1.h4,
body.template-search h1, body.template-search h1.h1, body.template-search h1.h2,
body.template-search h1.h3, body.template-search h1.h4{
  font-size:clamp(22px,3.2vw,32px);
  line-height:1;
}

/* Los titulos de producto dentro de las grillas no van tan grandes */
body .item-name, body .js-item-name{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:var(--font-base);
}

/* ---------- botones ---------- */
body .btn{
  border-radius:999px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .18s;
}
body .btn:hover{ transform:translateY(-1px) }
body .btn-primary{
  background:var(--ap-crema);
  border-color:var(--ap-crema);
  color:var(--ap-negro);
}
body .btn-primary:hover{
  background:var(--ap-oro-claro);
  border-color:var(--ap-oro-claro);
  color:var(--ap-negro);
  box-shadow:0 8px 22px rgba(201,168,76,.35);
}
body .btn-default, body .btn-secondary{
  border-radius:999px;
  border:1px solid var(--ap-linea);
}

/* ---------- formas: todo lo cuadrado se redondea ---------- */
body .item-image img,
body .product-item-image-container img,
body .js-product-item-image-container-private img,
body .card, body .modal-content, body .input-group, body .form-control{
  border-radius:14px;
}
body .form-control{
  border:1px solid var(--ap-linea);
  padding:12px 16px;
}
body .form-control:focus{
  border-color:var(--ap-oro);
  box-shadow:0 0 0 3px rgba(201,168,76,.18);
}

/* ---------- header ---------- */
body .head-main{
  background:var(--ap-negro);
  border-bottom:1px solid var(--ap-linea);
}
body .nav-list-link, body .nav-main-item, body .utilities-link{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:11.5px;
}
body .nav-list-link:hover, body .utilities-link:hover{ color:var(--ap-oro-claro) }
/* el globito con la cantidad del carrito, igual al de la portada */
body .js-cart-widget-amount.badge{
  background:var(--ap-oro);
  color:var(--ap-negro);
  font-weight:800;
  border-radius:999px;
}

/* ---------- footer ---------- */
body footer.js-footer{
  background:var(--ap-negro);
  border-top:1px solid var(--ap-linea);
}
body footer.js-footer .subtitle{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:800;
  color:var(--ap-crema);
}
body footer.js-footer a:hover{ color:var(--ap-oro-claro) }

/* ---------- precios ---------- */
body .price-compare, body .js-compare-price-display{
  color:var(--ap-suave);
  text-decoration:line-through;
}
body .js-payment-discount-price-product-container,
body .payment-discount-price-cart-container{
  color:var(--ap-oro-claro);
  font-weight:700;
}

/* ===================================================================
   FICHA DE PRODUCTO
   Medido antes: precio 14px peso 400, cuotas 10px, descripcion 12px
   con interlineado normal, fotos sin redondear. Se sube todo al
   registro de la portada.
   =================================================================== */

body.template-product .js-price-display,
body.template-product .price-display,
body.template-product .js-price-container .h4,
body.template-product .js-price-container .h5{
  font-size:clamp(26px,3vw,32px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  color:var(--ap-crema);
}
body.template-product .js-compare-price-display,
body.template-product .price-compare{
  font-size:15px;
  color:var(--ap-suave);
  text-decoration:line-through;
  font-weight:400;
}
body.template-product .js-max-installments,
body.template-product .item-installments{ font-size:13px }

/* La descripcion se leia en 12px sin interlineado */
body .user-content{ font-size:15px; line-height:1.65 }
body .user-content p + p{ margin-top:.9em }

/* Fotos y miniaturas */
body .product-thumb,
body .slider-slide img,
body .product-native-video-slide,
body .js-product-slide img{ border-radius:16px }
body .product-thumb{ border:1px solid var(--ap-linea); overflow:hidden }
body .product-thumb.selected{ border-color:var(--ap-oro) }

/* Selectores de variante en pildora */
body .btn-variant{
  border-radius:999px;
  border:1px solid var(--ap-linea);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11.5px;
  font-weight:700;
}
body .btn-variant.selected, body .btn-variant:hover{
  border-color:var(--ap-oro);
  color:var(--ap-oro-claro);
}

/* Rotulos de seccion y divisores */
body .subtitle{ letter-spacing:.18em; font-weight:800; font-size:11px; text-transform:uppercase }
body .divider{ border-top:1px solid var(--ap-linea) }

/* ===================================================================
   BARRA FLOTANTE, EN TODAS LAS PAGINAS
   Misma capsula que la portada. Clases con prefijo ap- para no chocar
   con las de Rio (.inner, .links y .tools son nombres muy comunes).
   =================================================================== */

/* el fondo del sitio, igual al de la portada */
body{ background:var(--ap-negro) }

/* la barra de Rio se reemplaza por la nuestra en todo el sitio */
header.js-head-main{ display:none!important }

.ap-bar{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1050;
  transition:top .25s,box-shadow .25s}
.ap-bar-inner{display:flex;align-items:center;gap:6px;border-radius:999px;padding:5px;
  background:rgba(20,19,19,.42);border:1px solid rgba(245,240,235,.14);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(245,240,235,.12)}
.ap-bar.ap-scrolled{top:12px}
.ap-bar.ap-scrolled .ap-bar-inner{background:rgba(20,19,19,.78);
  border-color:rgba(245,240,235,.22);
  box-shadow:0 20px 52px rgba(0,0,0,.6),inset 0 1px 0 rgba(245,240,235,.16)}

.ap-links{position:relative;display:inline-flex;align-items:center;gap:1px;padding:0 4px}
.ap-cursor{position:absolute;z-index:0;top:50%;left:0;height:31px;width:0;opacity:0;
  border-radius:999px;background:var(--ap-crema);transform:translateY(-50%);
  transition:left .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),opacity .2s}
.ap-links a{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  height:31px;padding:0 15px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--ap-crema);text-decoration:none;white-space:nowrap;
  transition:color .22s,font-weight .22s}
.ap-links a.ap-sobre{color:var(--ap-negro);font-weight:600}
.ap-links a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.45)}

.ap-sep{flex:none;width:1px;height:19px;margin:0 5px;background:rgba(245,240,235,.20)}
.ap-tools{display:inline-flex;align-items:center;gap:1px;flex:none;padding-right:2px}
.ap-tool{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:33px;height:31px;border-radius:999px;color:var(--ap-crema);
  transition:background .22s}
.ap-tool:hover{background:rgba(245,240,235,.15);color:var(--ap-crema)}
.ap-tool:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.45)}
.ap-tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.ap-cont{position:absolute;top:-1px;right:-2px;min-width:15px;height:15px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--ap-oro);color:var(--ap-negro);font-size:9.5px;font-weight:800;line-height:1}
.ap-cont:empty{display:none}

/* la barra tapa el arranque del contenido en las paginas internas */
body:not(.template-home){ padding-top:84px }

@media(max-width:1000px){
  .ap-links{display:none}
  .ap-sep{display:none}
  .ap-tool{width:31px}
  .ap-bar{top:12px;width:calc(100% - 24px)}
  .ap-bar-inner{justify-content:center;padding:5px}
  body:not(.template-home){ padding-top:70px }
}

/* ===================================================================
   AVISO EN EL ICONO DEL CARRITO
   Cuando Rio actualiza la cantidad, el globito late y el icono da un
   salto. Se dispara desde app-tienda.js observando el numero.
   =================================================================== */
.ap-cont{
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .28s;
  transform-origin:center;
}
.ap-cont.ap-late{ animation:ap-latido .55s cubic-bezier(.34,1.56,.64,1) }
.ap-tool-cart.ap-salta svg{ animation:ap-salto .5s cubic-bezier(.34,1.56,.64,1) }
.ap-tool-cart.ap-salta{ background:rgba(201,168,76,.22) }

@keyframes ap-latido{
  0%{ transform:scale(1) }
  35%{ transform:scale(1.75) }
  100%{ transform:scale(1) }
}
@keyframes ap-salto{
  0%{ transform:translateY(0) }
  30%{ transform:translateY(-4px) rotate(-7deg) }
  60%{ transform:translateY(1px) rotate(3deg) }
  100%{ transform:translateY(0) }
}

/* halo momentaneo alrededor de la capsula */
.ap-bar.ap-aviso .ap-bar-inner{
  box-shadow:0 20px 52px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(245,240,235,.16),
             0 0 0 2px rgba(201,168,76,.55);
  transition:box-shadow .3s;
}

@media (prefers-reduced-motion: reduce){
  .ap-cont.ap-late, .ap-tool-cart.ap-salta svg{ animation:none }
}

/* ===================================================================
   FICHA DE PRODUCTO · tarjeta crema con la jerarquia de la referencia
   Orden: titulo, subtitulo tecnico, precio de transferencia (negro,
   grande, sin centavos), "CON TRANSFERENCIA", "Ahorras $X" (dorado),
   linea, envio gratis, precio de tarjeta, cuotas, boton negro.
   app-tienda.js arma .ap-ficha (envoltorio), .ap-ficha-sub (subtitulo
   sacado de la descripcion), mueve el envio gratis dentro del precio y
   redondea los importes. Los nodos de Rio no se tocan: solo se ordenan.
   =================================================================== */
body.template-product .ap-ficha{
  background:var(--ap-crema);
  color:var(--ap-negro);
  border-radius:24px;
  padding:30px 34px 32px;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  margin-bottom:28px;
}
body.template-product .ap-ficha .page-header{ padding-top:0!important; margin:0 }
body.template-product .ap-ficha .breadcrumbs{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8A8580; margin-bottom:16px;
}
body.template-product .ap-ficha .breadcrumbs .crumb,
body.template-product .ap-ficha .breadcrumbs .separator{ color:#8A8580 }
body.template-product .ap-ficha .breadcrumbs .crumb.active{ color:var(--ap-negro) }
body.template-product .ap-ficha h1,
body.template-product .ap-ficha h1.h4{
  color:var(--ap-negro);
  font-size:clamp(32px,4vw,46px);
  line-height:.95;
  margin:0 0 8px;
}
body.template-product .ap-ficha-sub{
  font-size:14.5px; letter-spacing:.06em; color:#6F6A64; margin:0 0 30px;
}

/* bloque de precio: columna, en el orden de la referencia */
body.template-product .ap-ficha .js-price-container{
  display:flex; flex-direction:column; row-gap:0; margin:0!important;
}
body.template-product .ap-ficha .js-price-container > .col-12{ order:1; padding:0; flex:none; max-width:none }
body.template-product .ap-ficha .ap-ahorro{ order:2 }
body.template-product .ap-ficha .ap-ficha-envio{ order:3 }
body.template-product .ap-ficha .js-price-container > .col{ order:4; padding:0; flex:none; max-width:none }
body.template-product .ap-ficha .js-price-container > .col-auto{ order:5; padding:0; flex:none; max-width:none }

/* transferencia: el numero protagonista */
body.template-product .ap-ficha .js-payment-discount-price-product-container{
  font-size:clamp(40px,5.2vw,56px);
  font-weight:900;
  color:var(--ap-negro);
  letter-spacing:-.03em;
  line-height:1;
  margin:0;
}
body.template-product .ap-ficha .ap-transf-label{
  display:block;
  font-size:13px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:#6F6A64; margin-top:10px;
}
body.template-product .ap-ficha .ap-ahorro{
  font-size:16px; font-weight:800; color:#96721B; margin-top:6px;
}

/* envio gratis, bajo una linea fina */
body.template-product .ap-ficha .ap-ficha-envio{
  border-top:1px solid rgba(10,8,9,.14);
  margin-top:20px; padding-top:18px;
}
body.template-product .ap-ficha .js-free-shipping-message{
  display:flex; align-items:center; gap:8px;
  margin:0!important; padding:0!important;
  font-size:17px; color:#6F6A64;
}
body.template-product .ap-ficha .js-free-shipping-message .float-left{ float:none; margin:0!important; display:flex }
body.template-product .ap-ficha .js-free-shipping-message svg{ width:24px; height:24px; fill:#96721B; color:#96721B; margin:0!important }
body.template-product .ap-ficha .js-free-shipping-message .font-small{ font-size:17px }
body.template-product .ap-ficha .js-free-shipping-message .text-accent{ color:#96721B; font-weight:800 }
body.template-product .ap-ficha .ap-envio-resto{ margin-left:6px; color:#6F6A64 }

/* precio de tarjeta y cuotas: lineas secundarias */
body.template-product .ap-ficha .js-price-container .font-big{ font-size:inherit }
body.template-product .ap-ficha .js-price-display{
  font-size:17px; font-weight:500; color:#6F6A64; letter-spacing:0; margin-top:14px;
}
body.template-product .ap-ficha .js-price-display::after{ content:" con tarjeta"; font-size:17px; color:#6F6A64 }
body.template-product .ap-ficha .js-price-container .js-max-installments-container{
  font-size:17px; color:#6F6A64; margin-top:6px;
}
body.template-product .ap-ficha .js-price-container .js-installment-price{ color:var(--ap-negro); font-weight:800 }

/* boton negro, pildora, ancho natural */
body.template-product .ap-ficha .js-product-form{ margin-top:26px }
body.template-product .ap-ficha .js-product-form .form-row{ margin:0 }
body.template-product .ap-ficha .js-product-form .form-row > [class*="col"]{ padding:0 }
body.template-product .ap-ficha .js-addtocart{
  display:inline-block; width:auto; min-width:min(100%,360px);
  background:var(--ap-negro)!important; color:var(--ap-crema)!important;
  border:0; border-radius:999px; padding:20px 44px;
  font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 14px!important;
}
body.template-product .ap-ficha .js-addtocart:hover{ background:#2A2628!important }
body.template-product .ap-ficha .js-added-to-cart-product-message{ color:#6F6A64 }
body.template-product .ap-ficha .js-added-to-cart-product-message .btn-link{ color:var(--ap-negro) }

/* "Medios de pago": fila discreta al pie de la tarjeta */
body.template-product .ap-ficha .js-accordion-container{ margin:0!important; padding-top:14px; border-top:1px solid rgba(10,8,9,.14) }
body.template-product .ap-ficha .js-accordion-toggle{ color:#6F6A64; margin:0 }
body.template-product .ap-ficha .js-accordion-toggle .subtitle{ font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#6F6A64 }
body.template-product .ap-ficha .js-accordion-toggle svg{ fill:#6F6A64; color:#6F6A64 }
body.template-product .ap-ficha .js-accordion-content{ color:var(--ap-negro); font-size:14px }
body.template-product .ap-ficha .js-accordion-content .text-accent{ color:#96721B }
body.template-product .ap-ficha .js-accordion-content .btn-link{ color:var(--ap-negro) }

/* lo que Rio pone entre medio y ya no hace falta */
body.template-product .ap-ficha > .divider{ display:none }

@media (max-width:767px){
  body.template-product .ap-ficha{ padding:22px 20px 24px; border-radius:20px }
  body.template-product .ap-ficha .js-addtocart{ width:100%; min-width:0 }
}

/* ===================================================================
   TARJETAS DE PRODUCTO fuera del inicio (.ap-grid): misma estructura
   y estetica que las .p-card de home. Se usa en "Otros cuadros" de la
   ficha. Copia de app-home.css con el alcance cambiado de #ap-home a
   .ap-grid, sin la destacada ni el sello.
   =================================================================== */
.ap-relacionados{ --negro:#0A0809; --crema:#F5F0EB; --arena:#E8E0D6; --oro:#C9A84C; --oro-claro:#E7CE8A;
  --oro-texto:#96721B; --suave:#736C66; --linea:rgba(10,8,9,.10);
  max-width:1180px; margin:56px auto 40px; padding:0 16px; }
.ap-rel-head{ text-align:center; margin-bottom:34px }
.ap-rel-head h2{ font-size:clamp(26px,3.4vw,40px); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; color:var(--ap-crema); margin:0 0 8px }
.ap-rel-head p{ font-size:14px; color:var(--ap-suave); margin:0 }

/* .ap-grid: layout de carrusel mas abajo (CARRUSEL DE CUADROS) */
.ap-grid .p-card{position:relative;z-index:1;min-width:0;display:flex;flex-direction:column;
  background:#fff;color:var(--negro);
  border-radius:22px;border:0;transform-style:preserve-3d;will-change:transform;
  box-shadow:0 2px 4px rgba(0,0,0,.34),0 16px 34px rgba(0,0,0,.44),0 42px 72px rgba(0,0,0,.38);
  transition:box-shadow .24s cubic-bezier(.22,1,.36,1)}
.ap-grid .p-card:hover{z-index:5;
  box-shadow:0 4px 10px rgba(0,0,0,.42),0 28px 60px rgba(0,0,0,.56),0 64px 110px rgba(0,0,0,.5)}
.ap-grid .p-foto{display:block;border-radius:21px 21px 0 0;overflow:hidden}
.ap-grid .p-img{position:relative;border-radius:21px 21px 0 0;background:var(--arena);aspect-ratio:1/1;overflow:hidden}
.ap-grid .p-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
  transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .48s cubic-bezier(.22,1,.36,1)}
.ap-grid .p-a,.ap-grid .p-b{transform:scale(1.34);transform-origin:52% 44%}
.ap-grid .p-a{opacity:1}
.ap-grid .p-b{opacity:0}
.ap-grid .p-card:hover .p-a{opacity:0;transform:scale(1.4)}
.ap-grid .p-card:hover .p-b{opacity:1;transform:scale(1.4)}
.ap-grid .p-card:not(:has(.p-b)):hover .p-a{opacity:1}
.ap-grid .p-foot{position:relative;z-index:3;transform-style:preserve-3d;background:#fff;
  border-radius:0 0 21px 21px;padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:13px;flex:1;justify-content:flex-end}
.ap-grid .p-info{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:var(--negro);
  transform:translateZ(34px);transform-style:preserve-3d}
.ap-grid .p-foot h3{font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin:0;color:var(--negro)}
.ap-grid .p-spec{margin-top:5px;font-size:10.5px;letter-spacing:.05em;color:var(--suave);white-space:nowrap;transform:translateZ(-6px)}
.ap-grid .p-spec:empty{display:none}
.ap-grid .p-price{margin-top:11px;font-weight:800;font-size:21px;color:var(--negro);letter-spacing:-.025em;line-height:1.05;transform:translateZ(-10px)}
.ap-grid .p-pay{display:block;margin-top:4px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);transform:translateZ(-11px)}
.ap-grid .p-ahorro{display:block;margin-top:2px;font-size:12.5px;font-weight:800;letter-spacing:.01em;color:var(--oro-texto);transform:translateZ(-12px)}
.ap-grid .p-ahorro:empty{display:none}
.ap-grid .p-envio{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:9px;align-self:stretch;
  border-top:1px solid var(--linea);font-size:11.5px;color:var(--suave);transform:translateZ(-14px)}
.ap-grid .p-envio b{font-weight:800;letter-spacing:.03em;color:var(--oro-texto)}
.ap-grid .p-envio svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--oro-texto);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ap-grid .p-alt{margin-top:4px;font-size:12px;color:var(--suave);transform:translateZ(-15px)}
.ap-grid .p-cuota{margin-top:1px;font-size:12px;color:var(--suave);transform:translateZ(-16px)}
.ap-grid .p-cuota:empty{display:none}
.ap-grid .p-cuota b{color:var(--negro);font-weight:700}
.ap-grid .p-form{width:100%;transform:translateZ(22px);margin:0}
.ap-grid .p-btn{display:block;width:100%;text-align:center;border:0;cursor:pointer;font-family:inherit;text-decoration:none;
  background:var(--negro)!important;color:var(--crema)!important;border-radius:999px;padding:11px 0;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .24s cubic-bezier(.22,1,.36,1),color .24s,box-shadow .24s}
.ap-grid .p-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,168,76,.5)}
.ap-grid .p-card:hover .p-btn{background:linear-gradient(140deg,var(--oro) 6%,var(--oro-claro) 48%,var(--oro) 92%)!important;
  color:var(--negro)!important;box-shadow:0 8px 20px rgba(201,168,76,.42),inset 0 1px 0 rgba(255,255,255,.45)}
.ap-grid .p-shine{position:absolute;inset:0;z-index:6;border-radius:21px;pointer-events:none;opacity:0;
  clip-path:inset(0 round 21px);will-change:opacity;transition:opacity .22s linear;mix-blend-mode:overlay;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),rgba(255,255,255,0) 58%)}
.ap-grid .p-card:hover .p-shine{opacity:1}

@media(max-width:820px){ .ap-relacionados{ margin-top:36px } }

/* ===================================================================
   CARRUSEL DE CUADROS (inicio: #ap-home .grid-p · ficha: .ap-grid)
   Una tarjeta en el centro y las otras a los lados; flechas para ir a
   la izquierda o a la derecha, puntitos abajo. app-tienda.js envuelve
   el riel en .p-carrusel, agrega flechas y puntitos y marca la tarjeta
   del centro (.p-centro) y las laterales (.p-lejos). Es scroll nativo
   con snap al centro, asi que en celular se desliza con el dedo.
   =================================================================== */
.p-carrusel{ position:relative }
#ap-home .grid-p, .ap-grid{
  --ap-w:min(400px, 100vw - 96px);
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0;
  padding:14px calc((100% - var(--ap-w))/2) 22px; margin:0;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#ap-home .grid-p::-webkit-scrollbar, .ap-grid::-webkit-scrollbar{ display:none }
#ap-home .grid-p.arrastrando, .ap-grid.arrastrando{ scroll-snap-type:none; scroll-behavior:auto }
#ap-home .grid-p > .p-card, .ap-grid > .p-card{
  flex:0 0 var(--ap-w); width:auto; scroll-snap-align:center;
  transition:opacity .4s ease, filter .4s ease, box-shadow .4s ease;
}
/* las laterales se apagan un poco; la del centro manda */
#ap-home .grid-p > .p-card.p-lejos, .ap-grid > .p-card.p-lejos{ opacity:.55; filter:saturate(.85) }
#ap-home .grid-p > .p-card.p-centro, .ap-grid > .p-card.p-centro{
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(201,168,76,.35);
}
/* flechas: mismas que en clientes */
.p-nav{
  position:absolute; top:calc(50% - 30px); transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:999px; border:0; cursor:pointer;
  background:var(--ap-crema); color:var(--ap-negro);
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .25s, opacity .25s;
}
.p-nav svg{ width:20px; height:20px; fill:none; stroke:var(--ap-negro); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.p-nav.prev{ left:-6px } .p-nav.next{ right:-6px }
.p-nav:hover{ transform:translateY(-50%) scale(1.08) }
.p-nav:disabled{ opacity:0; pointer-events:none }
/* puntitos */
.p-dots{ display:flex; justify-content:center; gap:7px; margin-top:2px }
.p-dots button{ width:6px; height:6px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(245,240,235,.26); transition:width .3s, background .3s }
.p-dots button[aria-selected="true"]{ width:20px; background:var(--ap-crema) }

@media(max-width:820px){
  #ap-home .grid-p, .ap-grid{ --ap-w:calc(100vw - 96px); gap:12px; padding:4px calc((100vw - var(--ap-w))/2) 18px; margin:0 -16px }
  #ap-home .grid-p > .p-card .p-foot, .ap-grid > .p-card .p-foot{ padding:20px 20px 20px }
  #ap-home .grid-p > .p-card h3, .ap-grid > .p-card h3{ font-size:18px }
  #ap-home .grid-p > .p-card .p-spec, .ap-grid > .p-card .p-spec{ font-size:12px; white-space:normal }
  #ap-home .grid-p > .p-card .p-price, .ap-grid > .p-card .p-price{ font-size:28px!important }
  #ap-home .grid-p > .p-card .p-pay, #ap-home .grid-p > .p-card .p-ahorro,
  .ap-grid > .p-card .p-pay, .ap-grid > .p-card .p-ahorro{ font-size:12.5px }
  #ap-home .grid-p > .p-card .p-envio, #ap-home .grid-p > .p-card .p-alt, #ap-home .grid-p > .p-card .p-cuota,
  .ap-grid > .p-card .p-envio, .ap-grid > .p-card .p-alt, .ap-grid > .p-card .p-cuota{ font-size:13px }
  #ap-home .grid-p > .p-card .p-btn, .ap-grid > .p-card .p-btn{ padding:15px 0; font-size:12.5px; letter-spacing:.12em }
  .p-nav{ display:none }
}

/* ===================================================================
   CARRITO LATERAL · disenado de cero sobre markup propio
   (snipplets/cart-item-ajax.tpl, cart-panel.tpl, cart-totals.tpl).
   Solo se tocan clases ap-cart-* y los pocos ganchos de Rio que
   sostienen el panel (#modal-cart, .modal-header/.modal-body).
   =================================================================== */

/* --- el panel: vidrio esmerilado --- */
#modal-cart.modal{
  background:linear-gradient(175deg,
      rgba(28,23,34,.84) 0%, rgba(16,12,19,.82) 45%, rgba(8,6,9,.88) 100%)!important;
  backdrop-filter:blur(34px) saturate(180%);
  -webkit-backdrop-filter:blur(34px) saturate(180%);
  border-left:1px solid rgba(245,240,235,.10);
  box-shadow:-30px 0 70px -20px rgba(0,0,0,.75);
  color:var(--ap-crema);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #modal-cart.modal{ background:linear-gradient(175deg,#17131C,#0A0809)!important }
}
#modal-cart .modal-body, #modal-cart .js-ajax-cart-panel{ background:transparent!important }
#modal-cart .modal-body{ padding:8px 22px 28px }

/* cabecera */
#modal-cart .modal-header{
  background:transparent; border-bottom:1px solid var(--ap-linea);
  padding:20px 22px 16px; text-transform:uppercase; letter-spacing:.2em;
  font-weight:800; font-size:11px; color:var(--ap-crema);
}
#modal-cart .modal-header .svg-icon-text{ fill:var(--ap-crema) }

/* --- lista de renglones --- */
#modal-cart .ap-cart-lista{ display:flex; flex-direction:column }
#modal-cart .ap-cart-item{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 28px;
  grid-template-areas:"foto info borrar";
  align-items:center; column-gap:16px;
  padding:18px 0; border-bottom:1px solid var(--ap-linea);
}
#modal-cart .ap-cart-item-foto{ grid-area:foto; display:block; line-height:0 }
#modal-cart .ap-cart-item-foto img{
  width:78px; height:78px; object-fit:cover; display:block;
  border-radius:14px; background:#151218; border:1px solid var(--ap-linea);
}
#modal-cart .ap-cart-item-info{ grid-area:info; text-align:center; min-width:0 }
#modal-cart .ap-cart-item-nombre a{
  display:block; font-size:13px; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ap-crema); text-decoration:none;
}
#modal-cart .ap-cart-item-nombre small{ display:block; font-size:11px; color:var(--ap-suave); margin-top:2px }
#modal-cart .ap-cart-regalo{
  display:inline-block; margin-top:4px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ap-oro-claro); font-weight:800;
}

/* el sumador: pildora centrada  [ - ] [ 2 ] [ + ] */
#modal-cart .ap-cart-item-cantidad{ margin-top:10px; display:flex; justify-content:center }
#modal-cart .ap-cart-stepper{ margin:0 }
#modal-cart .ap-cart-stepper-fila{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--ap-linea); border-radius:999px; padding:3px;
  background:rgba(245,240,235,.05);
}
#modal-cart .ap-cart-stepper-btn{
  width:30px; height:30px; padding:0; margin:0; border:0; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ap-crema); cursor:pointer;
  transition:background .18s;
}
#modal-cart .ap-cart-stepper-btn:hover{ background:rgba(245,240,235,.14) }
#modal-cart .ap-cart-stepper-btn .icon-inline{ width:12px; height:12px; fill:currentColor }
#modal-cart .ap-cart-stepper,
#modal-cart .ap-cart-stepper.form-group,
#modal-cart .ap-cart-stepper-campo,
#modal-cart .ap-cart-stepper-campo.form-control-container{
  width:auto; padding:0!important; margin:0!important; border:0!important;
  background:transparent!important; box-shadow:none!important; border-radius:0!important;
}
#modal-cart .ap-cart-stepper-campo{ width:40px!important }
#modal-cart .ap-cart-stepper-campo::before, #modal-cart .ap-cart-stepper-campo::after{ display:none!important }
#modal-cart .ap-cart-stepper-input,
#modal-cart .ap-cart-stepper-input.form-control,
#modal-cart .ap-cart-stepper-input.form-control:focus{
  width:40px!important; height:30px!important; padding:0!important; margin:0!important;
  border:0!important; outline:0!important; background:transparent!important; box-shadow:none!important;
  color:var(--ap-crema)!important; font-weight:800; font-size:14px; text-align:center;
  -moz-appearance:textfield; border-radius:0!important;
}
#modal-cart .ap-cart-stepper-input::-webkit-outer-spin-button,
#modal-cart .ap-cart-stepper-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
#modal-cart .ap-cart-spinner{ display:inline-flex; align-items:center; margin:0 4px; color:var(--ap-oro) }
#modal-cart .form-control-disabled .ap-cart-stepper-btn{ opacity:.35; pointer-events:none }

/* subtotal del renglon, centrado y con peso */
#modal-cart .ap-cart-item-subtotal{ margin-top:10px }
#modal-cart .ap-cart-item-antes{ font-size:11.5px; color:var(--ap-suave) }
#modal-cart .ap-cart-item-antes .price-compare{ text-decoration:line-through }
#modal-cart .ap-cart-item-off{ color:var(--ap-oro-claro); font-weight:800; margin-right:4px }
#modal-cart .ap-cart-item-precio{
  display:block; font-size:17px; font-weight:900; letter-spacing:-.015em; color:var(--ap-crema);
}

/* borrar */
#modal-cart .ap-cart-item-borrar{ grid-area:borrar; align-self:start; padding-top:2px }
#modal-cart .ap-cart-borrar-btn{
  width:28px; height:28px; padding:0; border:0; border-radius:999px; background:transparent;
  color:var(--ap-suave); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .18s, background .18s;
}
#modal-cart .ap-cart-borrar-btn:hover{ color:#E08A86; background:rgba(224,138,134,.12) }
#modal-cart .ap-cart-borrar-btn .icon-inline{ width:14px; height:14px; fill:currentColor }

/* carrito vacio */
#modal-cart .ap-cart-vacio-msj{
  text-align:center; padding:38px 10px; color:var(--ap-suave); font-size:14px;
  border:1px dashed var(--ap-linea); border-radius:18px; margin:18px 0;
}

/* --- envio gratis: texto + camion a la derecha, dorado, centrado --- */
#modal-cart .ap-cart-envio{ padding:18px 0 4px }
#modal-cart .ap-cart-envio .progress-bar{ margin:0!important; padding:0!important }
#modal-cart .ap-cart-envio .progress-bar-title-container{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px;
}
#modal-cart .ap-cart-envio .progress-bar-title{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto!important; width:auto!important; max-width:none!important; margin:0!important;
}
#modal-cart .ap-cart-envio .progress-bar-icon{ position:static!important; margin:0!important; transform:none!important }
#modal-cart .ap-cart-envio .bar-progress-amount, #modal-cart .ap-cart-envio .bar-progress-condition{ display:none }
#modal-cart .ap-cart-envio .ship-free-rest-text{
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ap-oro-claro); text-align:center;
}
#modal-cart .ap-cart-envio .progress-bar-icon{
  width:26px!important; height:26px!important; flex:none;
  color:var(--ap-oro)!important; fill:var(--ap-oro)!important;
}
#modal-cart .ap-cart-envio .bar-progress{
  height:5px; margin-top:12px; border-radius:999px; overflow:hidden;
  background:rgba(245,240,235,.10);
}
#modal-cart .ap-cart-envio .bar-progress-active{ background:var(--ap-oro)!important; border-radius:999px }

/* --- subtotal y promos --- */
#modal-cart .ap-cart-subtotal{
  display:flex; justify-content:center; align-items:baseline; gap:10px;
  padding:16px 0 6px; font-size:12.5px; color:var(--ap-suave);
}
#modal-cart .ap-cart-subtotal-rotulo{ letter-spacing:.14em; text-transform:uppercase; font-weight:800; font-size:10.5px }
#modal-cart .ap-cart-subtotal-valor{ font-weight:700; color:var(--ap-crema) }
#modal-cart .ap-cart-sinimp{ text-align:center; font-size:11px; color:var(--ap-suave) }
#modal-cart .ap-cart-promos{ text-align:center; font-size:12px; color:var(--ap-oro-claro) }
#modal-cart .ap-cart-promos .js-total-promotions-detail-row{ display:flex; justify-content:center; gap:8px; margin-top:4px }
#modal-cart .ap-cart-promos .js-total-promotions-detail-row > span{ flex:0 0 auto!important; width:auto!important; max-width:none!important; padding:0; text-align:center!important }

/* envio (calculadora / costo), por si esta activado en el panel */
#modal-cart .ap-cart-fulfillment{ margin-top:8px }
#modal-cart .ap-cart-envio-costo, #modal-cart .ap-cart-envio-desc{
  display:flex; justify-content:center; gap:8px; font-size:12.5px; margin-top:8px;
}

/* --- TOTAL: franja crema con sombra --- */
#modal-cart .ap-cart-total{
  background:var(--ap-crema); color:var(--ap-negro);
  border-radius:20px; padding:20px 20px 16px; margin:16px 0 14px;
  box-shadow:0 22px 46px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.65);
  text-align:center;
}
/* el numero grande en negro; debajo el rotulo en dorado; debajo el ahorro en verde
   (los tres los arma el JS de la marca dentro del contenedor de Rio) */
#modal-cart .ap-cart-transf .js-payment-discount-price-cart-container,
#modal-cart .ap-cart-transf-inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; margin:0!important; text-align:center!important;
  font-size:clamp(32px,8.5vw,40px); font-weight:900; line-height:1; letter-spacing:-.03em;
  color:var(--ap-negro)!important;
}
#modal-cart .ap-cart-transf .ap-transf-label{
  order:1; display:block; margin-top:2px;
  font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#96721B;
}
#modal-cart .ap-cart-transf .ap-ahorro-cart{
  order:2; display:block; font-size:13.5px; font-weight:800; letter-spacing:.01em; color:#1E7F55;
}
#modal-cart .ap-cart-total-lista{
  display:flex; justify-content:center; align-items:baseline; gap:10px;
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(10,8,9,.12);
}
#modal-cart .ap-cart-total-rotulo{ font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#6E6862 }
#modal-cart .ap-cart-total-valor{ font-size:16px; font-weight:700; color:#6E6862; letter-spacing:-.01em }
#modal-cart .ap-cuotas{ font-size:12.5px; color:#6E6862; margin-top:4px; text-align:center }
#modal-cart .ap-cuotas:empty{ display:none }

/* --- boton de compra --- */
#modal-cart .ap-cart-cta{ padding:0 }
#modal-cart .ap-cart-cta-fila{ margin:0 }
#modal-cart .ap-cart-cta-btn,
#modal-cart .ap-cart-cta-btn.btn-primary{
  width:100%; border-radius:999px; padding:16px 0; border:0;
  background:var(--ap-crema); color:var(--ap-negro);
  font-weight:900; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.8);
  transition:background .2s, transform .18s, box-shadow .2s;
}
#modal-cart .ap-cart-cta-btn:hover{
  background:var(--ap-oro-claro); transform:translateY(-1px);
  box-shadow:0 18px 40px -10px rgba(201,168,76,.45);
}
#modal-cart .ap-cart-avisos .alert{ border-radius:14px; border:1px solid var(--ap-linea); font-size:12.5px; margin-top:10px }
#modal-cart .ap-cart-seguir{ text-align:center; margin-top:14px }
#modal-cart .ap-cart-seguir a{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--ap-suave); text-decoration:none; border-bottom:1px solid transparent;
}
#modal-cart .ap-cart-seguir a:hover{ color:var(--ap-crema); border-bottom-color:var(--ap-crema) }

/* nodos auxiliares que no deben pintarse aunque Rio les cambie el display */
#modal-cart .js-subtotal-price, #modal-cart #store-curr, #modal-cart .total-price.hidden{ display:none!important }

@media (prefers-reduced-motion: reduce){
  #modal-cart .ap-cart-cta-btn, #modal-cart .ap-cart-stepper-btn{ transition:none }
}


/* ===================================================================
   COLORES FIJADOS PARA LA TIENDA
   Rio toma estos tokens de "Diseno > Personalizar > Colores", y el
   checkout de Tiendanube usa ESOS MISMOS ajustes para pintar el iframe
   de medios de pago (texto crema sobre fondo claro = ilegible).
   Al fijarlos aca con los valores actuales, el sitio queda igual pase
   lo que pase en el panel, y el panel se puede usar para gobernar el
   checkout: texto oscuro, acento dorado.
   =================================================================== */
:root{
  --main-foreground:#f0e8d0;
  --main-background:#080808;
  --accent-color:#f0e8d0;
  --button-background:#080808;
  --button-foreground:#f0e8d0;
  --label-background:#c9a84c;
  --label-foreground:#000000;
  --header-background:#000000;
  --header-foreground:#f0e8d0;
  --newsletter-background:#FFFFFF;
  --newsletter-foreground:#333333;
  --footer-background:#000000;
  --footer-foreground:#FFFFFF;
  --main-foreground-opacity-05:#f0e8d00D;
  --main-foreground-opacity-08:#f0e8d014;
  --main-foreground-opacity-10:#f0e8d01A;
  --main-foreground-opacity-20:#f0e8d033;
  --main-foreground-opacity-30:#f0e8d04D;
  --main-foreground-opacity-40:#f0e8d066;
  --main-foreground-opacity-50:#f0e8d080;
  --main-foreground-opacity-60:#f0e8d099;
  --main-foreground-opacity-80:#f0e8d0CC;
  --main-foreground-opacity-90:#f0e8d0E6;
  --main-background-opacity-20:#08080833;
  --main-background-opacity-30:#0808084D;
  --main-background-opacity-50:#08080880;
  --main-background-opacity-60:#08080899;
  --main-background-opacity-80:#080808CC;
  --main-background-opacity-90:#080808E6;
  --accent-color-opacity-20:#f0e8d033;
  --header-foreground-opacity-20:#f0e8d033;
  --header-foreground-opacity-30:#f0e8d04D;
  --header-background-opacity-50:#00000080;
  --newsletter-foreground-opacity-80:#333333CC;
  --footer-foreground-opacity-20:#FFFFFF33;
  --footer-foreground-opacity-30:#FFFFFF4D;
  --footer-foreground-opacity-50:#FFFFFF80;
  --footer-foreground-opacity-60:#FFFFFF99;
  --footer-foreground-opacity-80:#FFFFFFCC;
}

/* ===================================================================
   Etiqueta "Envio gratis" que Rio pega sobre la foto (ficha y grillas):
   ya se informa en el bloque de precio, sobre la foto molesta.
   =================================================================== */
body .labels .js-shipping-label-private,
body .labels .label[data-promotion-type="free-shipping"]{ display:none!important }