/* ═══════════════════════════════════════════════════════════════════════════════════════════
   CARTÓN — el material, no un estilo
   ═══════════════════════════════════════════════════════════════════════════════════════════

   POR QUÉ CARTÓN Y NO OTRA COSA
   ───────────────────────────────────────────────────────────────────────────────────────────
   Las bolsas de Montesco son kraft de verdad. El cartón no es una decoración que se le pone
   encima a la tienda: es el material del que está hecho lo que llega a casa del comprador. Por
   eso la web puede usarlo sin explicarlo — quien ve la foto de la bolsa y el fondo de la
   tarjeta entiende que son la misma cosa antes de leer una palabra.

   CUÁNTO PESA ESTO: CERO PETICIONES
   ───────────────────────────────────────────────────────────────────────────────────────────
   Todo el material está hecho con degradados y con UNA textura en `data:` de menos de 1 KB.
   No hay ni una imagen de cartón, ni una fuente nueva, ni una librería. La regla que mandaba
   sobre esta tanda era que el LCP de 288 ms y los 2.467 KB de la primera vista no se tocan, y
   un material que se dibuja con CSS no los toca: son bytes que viajan comprimidos dentro de
   una hoja que además se cachea entre las cuatro páginas.

   DÓNDE **NO** SE ANIMA, Y ESTO ES LO IMPORTANTE
   ───────────────────────────────────────────────────────────────────────────────────────────
   Las tarjetas de producto NO tienen animación de entrada. Ni una. La fuga medida es que 3 de
   cada 4 visitantes nunca llegan a ver un producto, así que cualquier efecto que retrase la
   aparición del catálogo empeora exactamente lo que vinimos a arreglar. El movimiento vive en
   lo que la persona TOCA —pulsar, abrir, añadir—, donde confirma una acción en vez de
   retrasarla. Un producto que aparece con un fundido de 600 ms es un producto que durante
   600 ms no se puede comprar.

   QUÉ ES «TIPO PIXAR» AQUÍ
   ───────────────────────────────────────────────────────────────────────────────────────────
   Tres cosas concretas, no un adjetivo:
     · ANTICIPACIÓN: lo que va a subir, primero baja un pelo.
     · SQUASH & STRETCH: al pulsar, el objeto se aplasta; al soltar, rebota y se pasa un poco.
     · PESO: nada se mueve a velocidad constante. Todo sale rápido y frena despacio, y el
       cartón —que es ligero y rígido— rebota corto y seco, no como la goma.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* El kraft real de la bolsa, en tres tonos. No sustituye a la paleta de marca: es el
     MATERIAL sobre el que la paleta se apoya. El oro sigue siendo el oro. */
  --kraft:#C29256;
  --kraft-claro:#D8AE76;
  --kraft-oscuro:#8A6134;
  --carton-canto:#6E4B27;      /* el canto cortado, donde se ve el grosor */
  --carton-sombra:rgba(10,6,3,.5);

  /* Las curvas. `--rebote` se pasa de largo y vuelve: es el gesto de algo ligero que aterriza.
     `--salida` no rebota, porque lo que se va no tiene que llamar la atención. */
  --rebote:cubic-bezier(.34,1.56,.64,1);
  --salida:cubic-bezier(.4,0,1,1);
  --peso:cubic-bezier(.22,1,.36,1);
}

/* ── La textura del papel ──────────────────────────────────────────────────────────────────
   Ruido fractal en SVG, incrustado en la hoja. Son ~700 bytes y NO es una petición: si fuera
   un .png de cartón serían 40-80 KB y una conexión más compitiendo con el primer pintado. */
.carton,
.scard,
.ficha-bolsa,
.puente{
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* El cartón corrugado: el grano del papel encima, la onda de la flauta debajo. La onda va muy
   sutil (3 %) porque a tamaño de tarjeta una flauta marcada se ve como una tela de rayas. */
.carton{
  position:relative;
  background-color:var(--kraft);
  background-image:
    var(--grano),
    repeating-linear-gradient(90deg,
      rgba(110,75,39,.05) 0 2px,
      rgba(255,255,255,.035) 2px 4px,
      rgba(110,75,39,.05) 4px 7px);
  background-blend-mode:multiply,normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),          /* el filo de arriba, iluminado */
    inset 0 -2px 0 var(--carton-canto),           /* el grosor del canto */
    0 10px 22px var(--carton-sombra);
}

/* ── El canto cortado ──────────────────────────────────────────────────────────────────────
   Una tira de 3 px en la base con el tono del canto y una serie de muescas: es lo que hace que
   el ojo lea «esto es una lámina con grosor» en vez de «esto es un rectángulo marrón». */
.carton-canto::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,
    var(--carton-oscuro,var(--kraft-oscuro)) 0 5px,
    var(--carton-canto) 5px 10px);
  opacity:.85;pointer-events:none;
}

/* ── El sello ──────────────────────────────────────────────────────────────────────────────
   Tinta sobre cartón: sin relleno, solo contorno, y con la línea algo irregular. Es el gesto
   de la caja estampada, y sirve para las etiquetas de perfil sin pedir ni una imagen. */
.sello{
  display:inline-flex;align-items:center;gap:7px;
  border:2px solid currentColor;border-radius:4px;
  padding:4px 10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;
  transform:rotate(-1.4deg);
  box-shadow:1px 1px 0 rgba(0,0,0,.18);
}

/* ── Cinta de embalar ──────────────────────────────────────────────────────────────────────
   Para señalar una sola cosa por pantalla (la regla del oro único de la dirección de arte).
   Va translúcida, como la cinta de verdad, y deja ver el cartón por debajo. */
.cinta{
  position:relative;
  background:linear-gradient(180deg,rgba(231,192,132,.92),rgba(203,145,69,.88));
  color:#2A1A08;
  box-shadow:0 2px 0 rgba(110,75,39,.35),0 8px 18px rgba(0,0,0,.28);
}
.cinta::before,.cinta::after{
  content:"";position:absolute;top:0;bottom:0;width:10px;
  background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(255,255,255,.35) 3px 6px);
}
.cinta::before{left:-4px}
.cinta::after{right:-4px}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   EL MOVIMIENTO · solo donde la persona toca
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Squash & stretch al pulsar ────────────────────────────────────────────────────────────
   Un botón que se aplasta un 4 % al presionarlo y rebota al soltar. Es el gesto que hace que
   una pantalla se sienta física, y cuesta dos declaraciones. Se aplica al :active, así que
   NUNCA ocurre sin que alguien lo provoque: no hay nada moviéndose solo en la página. */
.btn,.chip-f,.scard-img,.ficha-pres button,.plan-add,.wa-julieta,.fab{
  transition:transform .32s var(--rebote),box-shadow .32s var(--peso),background .28s var(--peso),color .28s var(--peso);
}
.btn:active,.chip-f:active,.ficha-pres button:active,.plan-add:active,.wa-julieta:active{
  transform:scale(.955,1.03);
  transition-duration:.09s;          /* la ida es seca; la vuelta, con rebote */
}
.fab:active{transform:scale(.9)}

/* ── La tarjeta de cartón ──────────────────────────────────────────────────────────────────
   Se levanta del plano y la sombra se separa con ella: sin ese cambio de sombra parece que se
   agranda, no que se levanta. Y un grado de giro, porque una lámina apoyada nunca está
   perfectamente recta. */
.scard{
  transition:transform .42s var(--rebote),box-shadow .42s var(--peso);
  will-change:transform;
}
.scard:hover{
  transform:translateY(-6px) rotate(-.5deg);
  box-shadow:inset 0 0 0 1px rgba(203,145,69,.34),0 26px 52px rgba(0,0,0,.46);
}
.scard:active{transform:translateY(-2px) scale(.99);transition-duration:.1s}

/* La bolsa dentro de la tarjeta: anticipación. Baja 2 px antes de subir 8, que es lo que hace
   que parezca que toma impulso en vez de teletransportarse. */
.scard-img img{transition:transform .5s var(--rebote)}
.scard:hover .scard-img img{transform:translateY(-8px) scale(1.05)}

/* ── El acuse de recibo al añadir ──────────────────────────────────────────────────────────
   Cuando algo entra al carrito, el contador da un golpe seco. Es la confirmación de que la
   acción ocurrió: sin ella la gente pulsa dos veces, y eso son dos unidades en el pedido. */
@keyframes sello-golpe{
  0%{transform:scale(1)}
  28%{transform:scale(.82) rotate(-6deg)}
  62%{transform:scale(1.22) rotate(3deg)}
  100%{transform:scale(1)}
}
.cart-count.golpe,.cart-link .cc.golpe{animation:sello-golpe .42s var(--rebote)}

/* ── La ficha entra con peso ───────────────────────────────────────────────────────────────
   Ya tenía transición; lo que cambia es la curva: entra pasándose un poco y se asienta. En
   móvil sube desde abajo como una tapa de caja que se cierra. */
#fichaModal{transition:transform .46s var(--rebote)}
@media(min-width:861px){
  #fichaModal{transition:transform .4s var(--rebote),opacity .26s var(--peso)}
}

/* ── El cartón se dobla, no se desvanece ───────────────────────────────────────────────────
   Para los avisos que aparecen (toast, barra de envío gratis): giran sobre su borde superior,
   como una solapa. Dura poco y no bloquea nada. */
@keyframes solapa{
  from{transform:perspective(600px) rotateX(-82deg);opacity:0}
  to{transform:perspective(600px) rotateX(0);opacity:1}
}
.toast.show{animation:solapa .34s var(--rebote)}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   QUIEN PIDE NO MOVERSE, NO SE MUEVE
   ───────────────────────────────────────────────────────────────────────────────────────────
   No es un detalle de accesibilidad de trámite: hay gente a la que el movimiento de pantalla
   le produce mareo de verdad. Se apaga TODO —incluidas las animaciones por fotogramas—, y la
   tienda sigue funcionando igual porque ninguna animación de aquí lleva información que no
   esté también escrita.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .btn,.chip-f,.scard,.scard-img img,.ficha-pres button,.plan-add,.wa-julieta,.fab,#fichaModal{
    transition-duration:.01ms!important;
  }
  .scard:hover{transform:none}
  .scard:hover .scard-img img{transform:none}
  .cart-count.golpe,.cart-link .cc.golpe,.toast.show{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LA TARJETA ES UNA ETIQUETA DE KRAFT PEGADA SOBRE LA FOTO
   ═══════════════════════════════════════════════════════════════════════════════════════════
   El escenario de la foto se queda OSCURO: las bolsas están fotografiadas sobre fondo negro y
   sobre kraft perderían el recorte. Lo que se vuelve cartón es el cuerpo de la tarjeta, que es
   donde va el texto — igual que la etiqueta impresa va pegada sobre el papel de la bolsa.

   Y DE PASO ARREGLA UN PROBLEMA QUE NO ERA DE ESTILO. Con 12 tarjetas había 12 botones de oro
   brillante en pantalla; la dirección de arte pedía «un solo oro brillante por pantalla» y
   tenía razón por un motivo medible: cuando todo brilla, el ojo no encuentra dónde empezar.
   Sobre kraft, «Añadir» pasa a ser tinta oscura, que tiene MÁS contraste que el oro sobre
   marrón (7:1 frente a 3,4:1). Se ve mejor y deja de competir consigo mismo doce veces.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{ --carton-tinta:#2E1D0C; --carton-tinta-suave:#5B4126; }

.scard{
  background:linear-gradient(180deg,var(--panel),var(--panel2));   /* el escenario, intacto */
  overflow:hidden;
}
/* El cuerpo: kraft con su grano, y un filo claro arriba que simula el borde del papel pegado. */
.scard-body{
  background-color:var(--kraft);
  background-image:var(--grano);
  background-blend-mode:multiply;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(110,75,39,.35);
  color:var(--carton-tinta);
  padding-top:12px;
}
.scard-name{color:var(--carton-tinta);font-weight:800}
.scard-fmt{color:var(--carton-tinta-suave)}
.scard-price{color:var(--carton-tinta);text-shadow:0 1px 0 rgba(255,255,255,.25)}
.scard-gram{color:var(--carton-tinta-suave)}
/* Las notas de cata pasan a ser sellos de tinta sobre el papel. */
.scard-notas span{
  color:var(--carton-tinta-suave);
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 1px rgba(110,75,39,.3);
}

/* «Añadir»: tinta sobre kraft, como un sello de caja. Es el botón con más contraste de la
   tarjeta, que es justo lo que tiene que ser. */
.scard-btns .btn-oro{
  background:linear-gradient(180deg,#3B2712,var(--carton-tinta));
  color:var(--kraft-claro);
  box-shadow:0 3px 0 rgba(110,75,39,.5),0 8px 18px rgba(0,0,0,.3);
}
.scard-btns .btn-oro:active{box-shadow:0 1px 0 rgba(110,75,39,.5),0 4px 10px rgba(0,0,0,.3)}
/* «Ver ficha»: secundario de verdad, contorno sobre el papel. */
.scard-btns .scard-ficha{
  background:transparent;color:var(--carton-tinta);
  box-shadow:inset 0 0 0 1.5px rgba(46,29,12,.45);
}
.scard-btns .scard-ficha:hover{background:rgba(255,255,255,.2);color:var(--carton-tinta)}

/* El sello de perfil, sobre la foto: se queda oscuro porque vive en el escenario, no en el papel. */
.scard-tag{transform:rotate(-1.6deg)}
.scard-best{transform:rotate(1.6deg)}

/* ── El bloque de la etiqueta en la ficha ──────────────────────────────────────────────────
   «Lo que dice la bolsa» es, literalmente, la etiqueta. Que se vea como ella. */
.ficha-bolsa{
  background-color:var(--kraft);
  background-image:var(--grano);
  background-blend-mode:multiply;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(110,75,39,.35);
  color:var(--carton-tinta);
}
.ficha-bolsa .fb-hd{color:var(--carton-tinta-suave)}
.ficha-bolsa .ficha-frase{color:var(--carton-tinta-suave)}
.ficha-notas span{
  color:var(--carton-tinta);background:rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(110,75,39,.35);
}
.ficha-meters .m{color:var(--carton-tinta-suave)}
.ficha-meters .bar{background:rgba(46,29,12,.18)}
.ficha-meters .bar i{background:linear-gradient(90deg,#7A5424,var(--carton-tinta))}

/* ── El puente Kit → Pack: una caja de cartón con cinta ───────────────────────────────────── */
.puente{
  background-color:var(--kraft);
  background-image:var(--grano);
  background-blend-mode:multiply;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -4px 0 rgba(110,75,39,.4),0 14px 30px rgba(0,0,0,.35);
  color:var(--carton-tinta);
}
.puente-tx b{color:var(--carton-tinta)}
.puente-tx span,.puente-num i{color:var(--carton-tinta-suave)}
.puente-num i b{color:#7A2E12}
/* Aquí SÍ va el oro brillante: es la única acción destacada de esa franja. */
.puente .btn-oro{box-shadow:0 3px 0 rgba(110,75,39,.45),0 10px 24px rgba(203,145,69,.3)}