/* retoz-home.css — estilos y animaciones de la portada, portados del diseño aprobado */
:root{--surface-page:#FFFFFF;--surface-card:#FFFFFF;--surface-accent:#EBE7E3;}
    body{margin:0;background:var(--surface-page);}
    @media (max-width:1160px){
      [data-rtz-links]{display:none !important}
      [data-rtz-burger]{display:grid !important}
    }
    [data-rtz-tabbar]{display:none}
    [data-rtz-tab]{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;color:rgba(67,39,25,.6);cursor:pointer;padding:0;font-family:var(--font-sans)}
    [data-rtz-tab] > span{display:grid;place-items:center;transition:color 180ms cubic-bezier(.4,0,.2,1)}
    [data-rtz-tab] > small{font-size:13px;font-weight:400;color:inherit;transition:color 180ms cubic-bezier(.4,0,.2,1)}
    [data-rtz-tab][data-active="true"]{color:var(--retoz-marron)}
    [data-rtz-tab][data-active="true"] > small{font-weight:500}
    @media (max-width:749px){
      [data-rtz-nav]{gap:6px !important;padding:6px 10px !important}
      [data-rtz-logo]{flex:1 1 auto !important;justify-content:center !important}
      [data-rtz-account]{display:none !important}
      [data-rtz-announce]{gap:10px !important;justify-content:space-between !important}
      [data-rtz-announce] span{min-width:0 !important;flex:1 1 auto !important}
      [data-rtz-content]{align-items:center !important;text-align:center !important}
      [data-rtz-content] > div:last-child{justify-content:center !important}
      [data-rtz-inner]{padding-bottom:150px !important}
      [data-rtz-cart-actions]{flex-direction:column-reverse !important}
      [data-rtz-cart-actions] > a{width:100% !important;flex:0 0 auto !important;min-height:48px !important}
      [data-rtz-tabbar]{display:flex !important}
      [data-rtz-track]{height:auto !important}
      [data-rtz-viewport]{position:static !important;display:block !important;height:auto !important;padding:44px 0 56px !important;overflow:visible !important}
      [data-rtz-row]{flex-direction:column !important;align-items:stretch !important;width:100% !important;min-width:0 !important;max-width:100% !important;gap:32px !important;padding:0 !important;transform:none !important}
      [data-rtz-catintro]{width:auto !important;padding:0 22px !important}
      [data-rtz-catcards]{box-sizing:border-box !important;width:100% !important;min-width:0 !important;max-width:100% !important;overflow-x:auto !important;scroll-padding-left:22px !important;overscroll-behavior-x:contain !important;touch-action:pan-x pan-y !important;scroll-snap-type:x mandatory !important;padding:4px 22px !important;scrollbar-width:none}
      [data-rtz-feedrow]::-webkit-scrollbar,[data-rtz-revrow]::-webkit-scrollbar,[data-rtz-storyrow]::-webkit-scrollbar{display:none}
      [data-rtz-promisegrid]{grid-template-columns:repeat(2,1fr) !important;padding:24px !important}
      [data-rtz-footgrid]{grid-template-columns:1fr !important;gap:36px !important;padding:44px 22px !important}
      [data-rtz-footbar]{padding-bottom:96px !important}
      [data-rtz-subscribe]{max-width:none !important}
      [data-rtz-storyhead]{flex-direction:column !important}
      [data-rtz-footbar]{flex-direction:column !important;align-items:flex-start !important;gap:14px !important}
      [data-rtz-comparegrid]{grid-template-columns:1fr !important}
      [data-rtz-featrow]::-webkit-scrollbar,[data-rtz-actrow]::-webkit-scrollbar{display:none}
      [data-rtz-feattabs]{max-width:100% !important;overflow-x:auto !important;justify-content:flex-start !important;border-radius:32px !important;scrollbar-width:none}
      [data-rtz-feattabs]::-webkit-scrollbar{display:none}
      [data-rtz-feattabs] button{flex:0 0 auto !important;padding:0 16px 0 6px !important}
      [data-rtz-feattabswrap]{padding:0 22px !important}
      [data-rtz-lookgrid]{grid-template-columns:56px 1fr !important;gap:14px !important}
      [data-rtz-lookgrid] > div:first-child{gap:12px !important}
      [data-rtz-lookgrid] > div:first-child button{width:52px !important;height:52px !important}
      [data-rtz-lookgrid] > div:first-child svg{width:52px !important;height:52px !important}
      [data-rtz-lookgrid] > div:nth-child(2){max-width:none !important}
      [data-rtz-lookgrid] > div:last-child{grid-column:1/-1 !important;margin-top:10px !important}

      [data-rtz-look2]{padding-top:56px !important}
      [data-rtz-banner]{padding-top:40px !important}
      [data-rtz-bannerinner]{flex-direction:column !important;align-items:flex-start !important;gap:22px !important;padding:28px 22px !important}
      [data-rtz-bannerinner] > div{max-width:100% !important}
      [data-rtz-catcards]::-webkit-scrollbar{display:none}
      [data-rtz-catcard]{width:78vw !important;scroll-snap-align:start}
      [data-rtz-controls]{left:0 !important;right:0 !important;bottom:104px !important;justify-content:center !important}
      [data-rtz-controls] button{width:44px !important;height:44px !important}
      [data-rtz-controls] button > svg[width="32"]{inset:6px !important}
      [data-rtz-announce] button{width:40px !important;height:40px !important}
      [aria-label="Ver producto"]{width:40px !important;height:40px !important}
      [data-rtz-inner]{padding-bottom:210px !important}
    }
    @keyframes rtz-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
    @keyframes rtz-fade{from{opacity:0}to{opacity:1}}
    @keyframes rtz-in-a{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
    @keyframes rtz-in-b{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
    [data-rtz-anim] > *{animation-duration:420ms;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both}
    [data-rtz-anim="a"] > *{animation-name:rtz-in-a}
    [data-rtz-anim="b"] > *{animation-name:rtz-in-b}
    [data-rtz-anim] > *:nth-child(2){animation-delay:80ms}
    [data-rtz-anim] > *:nth-child(3){animation-delay:160ms}
    [data-rtz-io]{opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);transition:opacity 760ms cubic-bezier(.16,1,.3,1),transform 860ms cubic-bezier(.16,1,.3,1),filter 620ms cubic-bezier(.4,0,.2,1)}
    [data-rtz-io="in"]{opacity:1;transform:none;filter:none}
    [data-rtz-io="x"]{opacity:0;transform:translateX(-64px) scale(.96);transition:opacity 720ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1)}
    [data-rtz-io="x"][data-rtz-io="in"]{opacity:1;transform:none}
    [data-rtz-io-d="1"]{transition-delay:110ms}
    [data-rtz-io-d="2"]{transition-delay:220ms}
    [data-rtz-io-d="3"]{transition-delay:330ms}
    [data-rtz-stagger] > *{opacity:0;transform:translateY(40px) scale(.96);filter:blur(5px);transition:opacity 700ms cubic-bezier(.16,1,.3,1),transform 820ms cubic-bezier(.16,1,.3,1),filter 560ms cubic-bezier(.4,0,.2,1)}
    [data-rtz-stagger][data-rtz-io="in"] > *{opacity:1;transform:none;filter:none}
    [data-rtz-stagger] > *:nth-child(1){transition-delay:60ms}
    [data-rtz-stagger] > *:nth-child(2){transition-delay:150ms}
    [data-rtz-stagger] > *:nth-child(3){transition-delay:240ms}
    [data-rtz-stagger] > *:nth-child(4){transition-delay:330ms}
    [data-rtz-stagger] > *:nth-child(5){transition-delay:420ms}
    [data-rtz-stagger] > *:nth-child(6){transition-delay:500ms}
    [data-rtz-stagger] > *:nth-child(n+7){transition-delay:560ms}
    [data-rtz-feedrow]{cursor:grab}
    [data-rtz-feedrow]:active{cursor:grabbing}
    [data-rtz-feedrow] a{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
    /* Solo con mouse: en celular el :hover que cambia la foto se come el primer toque (26/09/2026). */
    @media (hover:hover) and (pointer:fine){
      [data-rtz-featcard]:hover [data-rtz-featimg]{transform:scale(1.04)}
      [data-rtz-featcard]:hover [data-rtz-featalt]{opacity:1;transform:scale(1.04)}
    }
    @keyframes rtz-ringA{from{stroke-dashoffset:182.2}to{stroke-dashoffset:0}}
    @keyframes rtz-ringB{from{stroke-dashoffset:182.2}to{stroke-dashoffset:0}}
    @keyframes rtz-photoA{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
    @keyframes rtz-photoB{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
    [data-rtz-catcard]:hover [data-rtz-catmedia]{transform:scale(1.06)}
    @media (max-width:1000px){[data-rtz-revgrid]{grid-template-columns:repeat(2,1fr) !important}}
    @media (max-width:749px){[data-rtz-revgrid]{grid-template-columns:1fr !important;padding:0 22px !important}}
    @keyframes rtz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    @keyframes rtz-marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
    @keyframes rtz-ring-a{from{stroke-dashoffset:95.8}to{stroke-dashoffset:0}}
    @keyframes rtz-ring-b{from{stroke-dashoffset:95.8}to{stroke-dashoffset:0}}
    a{color:var(--action);text-decoration:none;}
    a:hover{color:var(--action-hover);}

/* ── Ajustes pedidos por el cliente (2026-08-09) ── */

/* Márgenes laterales que faltaban, tal como el diseño original */
[data-rtz-compare]{padding-left:22px;padding-right:22px}
[data-rtz-featrow]{padding:2px 22px}
[data-rtz-storyrow]{padding:2px 22px}

/* El feed corre solo; con el mouse encima se puede arrastrar */
[data-rtz-feedrow]{cursor:grab}
[data-rtz-feedrow][data-arrastrando="true"]{cursor:grabbing}

@media (max-width:749px){
  /* Fuera los puntitos del hero en celular: quedan las flechas y el botón de pausa */
  [data-rtz-dot]{display:none !important}

  /* "Compra el look": en celular se apila para que se vea entera */
  [data-rtz-lookgrid]{grid-template-columns:1fr !important;gap:16px !important}
  /* los hijos traen grid-column:1 y :2 fijos en el HTML; hay que soltarlos
     o se crea una segunda columna y la foto se sale de la pantalla */
  [data-rtz-lookgrid] > *{min-width:0 !important;max-width:100% !important;
    grid-column:auto !important;grid-row:auto !important}
  /* la fila de avatares pasa a horizontal, arriba de la foto */
  [data-rtz-lookgrid] > div:first-child{flex-direction:row !important;justify-content:flex-start !important;gap:12px !important;order:-1}
  [data-rtz-lookgrid] > div:last-child{grid-column:auto !important;margin-top:0 !important}
  [data-rtz-look-view],[data-rtz-look-photo]{max-width:100% !important}
  [data-rtz-look-view] img{width:100% !important;height:auto !important;object-fit:cover}
}

/* Celular: la foto vertical tiene el producto abajo y fondo beige CLARO arriba.
   El texto va arriba, se aprieta para que quepan los dos botones sobre la barra
   inferior, y el velo se invierte (oscuro arriba) para que el texto blanco se lea. */
@media (max-width:749px){
  [data-rtz-hero] [data-rtz-inner]{
    /* el contenedor es una FILA: para subir el contenido manda align-items,
       no justify-content (eso alinea en horizontal). */
    align-items:flex-start !important;
    justify-content:center !important;
    padding-top:56px !important;
    padding-bottom:112px !important;   /* deja libre la barra inferior */
  }
  /* dentro de [data-rtz-inner] hay una rejilla con align-items:end que
     empuja el texto al fondo; en celular tiene que ir arriba */
  [data-rtz-hero] [data-rtz-inner] > div{align-items:start !important}
  [data-rtz-hero] [data-rtz-content]{gap:12px !important}
  /* titular algo más contenido para que no invada el producto */
  [data-rtz-hero] [data-rtz-content] h1,
  [data-rtz-hero] [data-rtz-content] .rz-hero-titulo{
    font-size:clamp(34px,8.6vw,46px) !important;
    line-height:1.06 !important;
  }
  [data-rtz-hero] [data-rtz-content] p{font-size:15px !important;line-height:1.45 !important}
  /* antetítulo (SEO, 09/10/2026): línea chica, no el tamaño del titular ni el de la bajada */
  [data-rtz-hero] [data-rtz-content] .rz-hero-ante{font-size:10.5px !important;line-height:1.35 !important;letter-spacing:.12em !important;margin:0 0 -2px !important}
  /* velo invertido: oscurece la mitad de arriba, donde vive el texto */
  [data-rtz-hero] [data-rtz-slide] > div:last-child{
    background:linear-gradient(180deg,
      rgba(42,24,16,.74) 0%,
      rgba(42,24,16,.52) 38%,
      rgba(42,24,16,.18) 62%,
      rgba(42,24,16,.42) 100%) !important;
    opacity:1 !important;
  }
}

/* ---------- Agregar al carrito desde las tarjetas (07/10/2026) ----------
   El botón vive FUERA del <a> de la tarjeta, dentro de .rz-celda (snippets/rz-agregar.liquid).
   Abajo a la derecha, sobre la fila del precio. El JS está en retoz-home.js (agregarRapido). */
.rz-celda{position:relative;display:flex;min-width:0}
.rz-celda > a{flex:1 1 auto;min-width:0}
.rz-agregar{position:absolute;right:12px;bottom:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;box-sizing:border-box;border-radius:999px;border:1px solid var(--border);background:var(--surface-card);color:var(--text-body);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background 120ms cubic-bezier(.4,0,.2,1),color 120ms cubic-bezier(.4,0,.2,1),border-color 120ms cubic-bezier(.4,0,.2,1),transform 320ms cubic-bezier(.16,1,.3,1)}
.rz-agregar::before{content:"";position:absolute;inset:-6px}
.rz-agregar svg{width:17px;height:17px;display:block}
.rz-agregar [data-icono="listo"]{display:none}
.rz-agregar:active{transform:scale(.9)}
.rz-agregar:focus-visible{outline:2px solid var(--action);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .rz-agregar:hover{background:var(--action);border-color:var(--action);color:var(--action-fg)}
}
.rz-agregar[data-estado="cargando"]{pointer-events:none;opacity:.55}
.rz-agregar[data-estado="listo"]{background:var(--action);border-color:var(--action);color:var(--action-fg)}
.rz-agregar[data-estado="listo"] [data-icono="bolsa"]{display:none}
.rz-agregar[data-estado="listo"] [data-icono="listo"]{display:block}

/* Aviso corto «Agregado al carrito». En celular va encima de la barra inferior (74 px). */
.rz-aviso-carrito{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:95;display:flex;align-items:center;gap:14px;box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);padding:8px 8px 8px 18px;border-radius:999px;background:#2A1810;color:#FFFFFF;font-family:var(--font-sans);font-size:14px;line-height:1.3;box-shadow:0 12px 32px rgba(42,24,16,.28);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity 180ms cubic-bezier(.4,0,.2,1),transform 320ms cubic-bezier(.16,1,.3,1)}
.rz-aviso-carrito[data-visible="true"]{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.rz-aviso-carrito span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rz-aviso-carrito button{flex:0 0 auto;height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--action);color:var(--action-fg);font-family:var(--font-sans);font-size:13.5px;font-weight:600;cursor:pointer}
.rz-aviso-carrito[data-error="true"] button{display:none}
.rz-aviso-carrito[data-error="true"]{padding-right:18px}
@media (max-width:749px){
  .rz-aviso-carrito{bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* Recuadro «Agregado a tu carrito» (08/10/2026, pedido del dueño: como Shopify, chico y sin
   tapar la página). Sale bajo la cabecera, a la derecha; el JS le pone top/right. */
.rz-agregado{position:fixed;top:12px;right:16px;z-index:65;box-sizing:border-box;width:380px;max-width:calc(100vw - 24px);padding:16px 18px 12px;background:var(--surface-card);border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 48px rgba(42,24,16,.18);font-family:var(--font-sans);color:var(--text-body);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity 180ms cubic-bezier(.4,0,.2,1),transform 320ms cubic-bezier(.16,1,.3,1),visibility 0s linear 320ms}
.rz-agregado[data-visible="true"]{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.rz-agregado-cab{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.rz-agregado-cab p{flex:1;margin:0;font-size:14px;font-weight:600;line-height:1.3}
.rz-agregado-cab > svg{flex:0 0 auto;color:var(--action)}
.rz-agregado-x{display:grid;place-items:center;width:32px;height:32px;margin:-4px -6px -4px 0;border:0;background:transparent;color:var(--text-body);border-radius:999px;cursor:pointer}
.rz-agregado-x:hover{background:var(--marron-08)}
.rz-agregado-item{display:flex;gap:12px;align-items:center;margin:0 0 14px}
.rz-agregado-foto{width:64px;height:64px;flex:0 0 auto;border-radius:12px;background:var(--surface-accent);overflow:hidden}
.rz-agregado-foto img{width:100%;height:100%;object-fit:cover;display:block}
.rz-agregado-nombre{margin:0;font-size:14px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rz-agregado-detalle{margin:3px 0 0;font-size:13px;color:rgba(67,39,25,.66)}
.rz-agregado-detalle b{color:var(--text-body);font-weight:700}
.rz-agregado-botones{display:flex;gap:8px}
.rz-agregado-botones a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none}
.rz-agregado-ver{border:1px solid var(--border);color:var(--text-body)}
.rz-agregado-ver:hover{background:var(--marron-08)}
.rz-agregado-pagar{background:var(--action);color:var(--action-fg)}
.rz-agregado-pagar:hover{background:var(--action-hover)}
.rz-agregado-seguir{display:block;width:100%;margin:6px 0 0;padding:8px;border:0;background:transparent;color:var(--text-body);font-family:var(--font-sans);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:749px){
  .rz-agregado{left:12px;right:12px !important;width:auto;max-width:none}
}