/* ============================================================
   /cafes — CAFÉS DE ESPECIALIDAD
   ------------------------------------------------------------
   Página aparte, con su propia hoja. NO hereda styles.css a
   propósito: esta sección tiene otro ritmo —más aire, una cosa
   por pantalla— y mezclarla con la carta habría terminado en un
   archivo que ninguna de las dos usa entera.

   La paleta sí es la misma del sitio (mismo negro, mismo acento
   #e05c24): es la misma marca, no un micrositio.

   REDISEÑO 16-sep-2026. Dirección: tostaduría editorial.
   - Fraunces (serif con eje óptico) para titulares: da la calidez
     de etiqueta impresa que el sans del sitio no tiene.
   - IBM Plex Mono para rótulos y datos de ficha: se lee como
     etiqueta técnica, que es lo que son.
   - Curvas de nivel (img/topografia.svg) como motivo: la altura
     es un dato real de cada ficha, y es lo que distingue a un
     café de especialidad.
   - SIN FOTOS DE BANCO. Granos y bolsas son ilustraciones SVG/CSS
     que no fingen ser el producto. Una foto de un grano ajeno en
     una página que dice "todo lo que leas está copiado de la
     bolsa" contradice la página (Ley 19.496).

   LAS FOTOS. Cada `.objeto` sigue listo para recibir un
   <img class="foto">. Cuando lleguen, se reemplaza .bolsa.
   ============================================================ */
:root{
  --negro:#0a0908; --carbon:#131110; --linea:#2a2422;
  --texto:#f5f2ee; --tenue:#9a918a; --acento:#e05c24; --brasa:#ff7a3d;
  --crema:#e9dccb; --kraft:#b98a5e;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:Fraunces,Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--negro);color:var(--texto);font-family:var(--sans);line-height:1.6;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Grano de papel sobre toda la página: quita el negro "de pantalla". */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;
  background-image:url('/img/ruido.svg');opacity:.55;mix-blend-mode:overlay}
.env{max-width:1180px;margin:0 auto;padding:0 32px}
.rot{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--tenue);
     display:flex;align-items:center;gap:12px}
.rot-linea{display:inline-block;width:28px;height:1px;background:var(--acento)}
.oculto{display:none !important}
:focus-visible{outline:2px solid var(--brasa);outline-offset:3px;border-radius:3px}

.barra{position:sticky;top:0;z-index:9;background:rgba(10,9,8,.8);backdrop-filter:blur(12px);
       -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.barra .env{display:flex;align-items:center;justify-content:space-between;height:66px}
/* Valores copiados de .logo / .logo-icono en styles.css, no aproximados:
   40px de imagen, 22px de texto, gap 10, interletraje -0.3px, Inter 700.
   Si alguna vez cambia el logotipo de la carta, hay que cambiarlo aquí
   también — son dos hojas independientes y nada las mantiene en sincronía. */
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);
       font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.3px}
.marca img{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.marca .marca-ama{color:var(--acento)}
.menu{display:flex;gap:30px;align-items:center}
.menu a{color:var(--tenue);text-decoration:none;font-family:var(--mono);font-size:11px;
        letter-spacing:.2em;text-transform:uppercase;transition:color .2s}
.menu a:hover,.menu a.on{color:var(--texto)}
.cuenta-carrito{background:var(--acento);color:#fff;border-radius:999px;padding:2px 8px;
                font-family:var(--mono);font-size:11px;margin-left:6px}
.cuenta-carrito.vacio{display:none}

/* ---------- HERO ---------- */
.hero{padding:96px 0 0;border-bottom:1px solid var(--linea);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-120px;top:-160px;width:900px;height:760px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(224,92,36,.24),transparent 64%)}
.hero-topo{position:absolute;inset:0;background:url('/img/topografia.svg') center/cover no-repeat;
  opacity:.22;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%)}
.hero-grilla{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero .rot{margin-bottom:30px}
.hero h1{font-family:var(--serif);font-size:clamp(38px,5.2vw,72px);line-height:1.04;font-weight:350;
         letter-spacing:-.025em;max-width:15ch;font-variation-settings:'opsz' 144}
.hero h1 em{font-style:italic;color:var(--brasa);font-weight:300}
.hero-bajada{margin-top:28px;max-width:54ch;color:var(--tenue);font-size:16.5px}
.hero .acciones{margin-top:38px}
.hero-arte{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center}
.hero-granos{width:115%;max-width:600px;height:auto;position:relative;animation:flotar 9s ease-in-out infinite}
.sello{position:absolute;top:4%;right:2%;width:150px;height:150px;z-index:2}
.sello svg{width:100%;height:100%;animation:girar 38s linear infinite}
.sello text{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;fill:var(--crema)}
.sello img{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  box-shadow:0 0 0 6px rgba(10,9,8,.7)}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.5deg)}}

/* Franja de orígenes: índice pintado desde las fichas. */
.origenes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1px solid var(--linea);
  position:relative;z-index:1}
.origenes:empty{display:none}
.origen{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:2px;padding:22px 20px 26px;
  text-decoration:none;color:var(--texto);border-right:1px solid var(--linea);transition:background .25s}
.origen:last-child{border-right:0}
.origen:hover{background:linear-gradient(180deg,rgba(224,92,36,.12),transparent)}
.origen-num{font-family:var(--mono);font-size:11px;color:var(--acento);grid-row:span 2;padding-top:4px}
.origen-nombre{font-family:var(--serif);font-size:19px;line-height:1.2}
.origen-dato{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--tenue);grid-column:2}
.origen-pts{grid-row:1 / span 2;grid-column:3;align-self:center;font-family:var(--mono);font-size:12px;
  border:1px solid var(--linea);border-radius:999px;padding:3px 9px;color:var(--crema)}

/* ---------- LOS CAFÉS ---------- */
.variedades{padding:110px 0 40px}
.cab{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;
     border-bottom:1px solid var(--linea);padding-bottom:18px;margin-bottom:20px}
.cab h2{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);font-weight:350;letter-spacing:-.015em}

.cafe{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
      padding:90px 0;border-bottom:1px solid var(--linea)}
.cafe:last-of-type{border-bottom:0}
.cafe:nth-of-type(even) .objeto{order:-1}
.num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--acento);
     margin-bottom:18px;display:flex;align-items:baseline;gap:14px}
.num-grande{font-family:var(--serif);font-size:44px;letter-spacing:-.02em;line-height:1;color:transparent;
     -webkit-text-stroke:1px var(--acento);font-weight:400}
.cafe h3{font-family:var(--serif);font-size:clamp(34px,4vw,54px);font-weight:350;line-height:1.02;letter-spacing:-.025em}
/* "Hoy en la máquina": la variedad que se está moliendo. Usa el
   acento de la marca y el mismo ritmo monoespaciado de .num, con
   un punto delante — se lee como una etiqueta encendida, no como
   otro titular compitiendo con el nombre del café.
   Tokens de ESTE archivo (:root de arriba); cafes.css no comparte
   nombres con admin.css. */
.hoy{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
     color:var(--brasa);margin:-6px 0 16px;display:flex;align-items:center;gap:8px}
.hoy::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brasa);
     box-shadow:0 0 0 4px rgba(255,122,61,.18);animation:latir 2s ease-in-out infinite}
@keyframes latir{50%{box-shadow:0 0 0 7px rgba(255,122,61,.06)}}
.sub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
     color:var(--tenue);margin-top:16px}
.puntaje{color:var(--crema)}
.gancho{font-family:var(--serif);font-style:italic;font-weight:300;font-size:21px;line-height:1.45;
        margin-top:22px;max-width:40ch;color:var(--crema)}

.notas{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 4px}
.nota{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;padding:6px 13px;
      border:1px solid rgba(224,92,36,.35);border-radius:999px;color:var(--texto);
      background:rgba(224,92,36,.06)}

.ficha{margin:26px 0 30px;border-top:1px solid var(--linea)}
.ficha div{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linea)}
.ficha dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
          color:var(--tenue);white-space:nowrap}
.ficha .puntos{flex:1;border-bottom:1px dotted var(--linea);transform:translateY(-4px)}
.ficha dd{font-size:14px;text-align:right}

.acciones{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
     padding:14px 22px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block;
     border:1px solid;background:transparent;color:var(--texto);
     transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.btn-p{background:var(--acento);border-color:var(--acento);color:#fff}
.btn-p:hover{background:var(--brasa);border-color:var(--brasa);transform:translateY(-1px);
     box-shadow:0 10px 24px rgba(224,92,36,.3)}
.btn-s{border-color:#3a322e}
.btn-s:hover{border-color:var(--crema)}
.btn-t{border-color:transparent;color:var(--brasa);padding-left:6px;padding-right:6px}
.btn-t:hover{color:var(--texto)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn.confirmado{background:var(--ok,#3d9970);border-color:var(--ok,#3d9970);color:#fff}

/* ---------- LA BOLSA ILUSTRADA ---------- */
.objeto{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px}
.objeto::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,61,.28),rgba(224,92,36,.08) 45%,transparent 68%)}
.objeto-topo{position:absolute;inset:4% 0;background:url('/img/topografia.svg') center/cover no-repeat;opacity:.18;
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
.foto{position:relative;max-width:320px;height:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.75))}
.bolsa{--bolsa:#1c1816;--tinta:var(--crema);--banda:var(--acento);
  position:relative;width:250px;height:350px;
  border-radius:14px 14px 10px 10px / 18px 18px 10px 10px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.35),transparent 14%,transparent 80%,rgba(0,0,0,.4)),
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 30%),
    url('/img/ruido.svg'),var(--bolsa);
  box-shadow:0 50px 90px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;padding:44px 22px 20px;
  transform:rotate(-3deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cafe:nth-of-type(even) .bolsa{transform:rotate(3deg)}
.cafe:hover .bolsa{transform:rotate(0) translateY(-6px)}
/* El cierre termosellado de arriba. */
.bolsa::before{content:'';position:absolute;top:0;left:0;right:0;height:26px;border-radius:14px 14px 0 0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 5px),rgba(0,0,0,.25)}
.bolsa.tono-1{--bolsa:#a77a50;--tinta:#1d120b;--banda:#1d120b}
.bolsa.tono-2{--bolsa:#e4d6c3;--tinta:#1d120b;--banda:var(--acento)}
.bolsa.tono-3{--bolsa:#5b2a17;--tinta:var(--crema);--banda:var(--crema)}
.bolsa-valvula{position:absolute;top:40px;right:26px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.35) 30%,rgba(255,255,255,.12) 32%,rgba(0,0,0,.2) 70%)}
.bolsa-etiqueta{margin-top:34px;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;color:var(--tinta);
  border-top:2px solid var(--banda);border-bottom:2px solid var(--banda);padding:18px 6px}
.bolsa-etiqueta .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.bolsa-etiqueta .n{font-family:var(--serif);font-size:26px;line-height:1.05;letter-spacing:-.01em;font-weight:400}
.bolsa-etiqueta svg{width:92px;height:24px;fill:none;stroke:var(--banda);stroke-width:1.6;stroke-linejoin:round}
.bolsa-marca{margin-top:14px;white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--tinta);opacity:.6}
/* La altura, marcada como cota de mapa al costado de la bolsa. */
.altura-marca{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--crema);padding-left:26px}
.altura-marca::before{content:'';position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--acento)}

/* ---------- MEZCLA ---------- */
.mezcla{padding:110px 0;border-top:1px solid var(--linea);position:relative;overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(224,92,36,.04))}
.mezcla::after{content:'';position:absolute;right:-170px;top:30px;width:660px;height:660px;
  background:radial-gradient(circle,rgba(224,92,36,.14),transparent 66%);pointer-events:none}
.mezcla-grilla{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;z-index:1}
.mezcla h2{font-family:var(--serif);font-size:clamp(32px,4vw,52px);font-weight:350;line-height:1.06;
  max-width:18ch;margin:22px 0 20px;letter-spacing:-.022em}
.mezcla p{max-width:58ch;color:var(--tenue)}
.mezcla p b{color:var(--brasa)}
.mezcla-arte svg{width:100%;max-width:360px;display:block;margin:0 auto}
.mezcla-arte text{font-family:var(--mono);font-size:9px;letter-spacing:.18em;fill:var(--crema)}
.pasos{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:34px 0 10px}
.paso{border:1px solid var(--linea);border-radius:16px;padding:26px 24px;background:rgba(19,17,16,.6);
  transition:border-color .25s,transform .25s}
.paso:hover{border-color:rgba(224,92,36,.45);transform:translateY(-3px)}
.paso-icono{display:inline-flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(224,92,36,.12);margin-bottom:18px}
.paso-icono svg{width:22px;height:22px;fill:none;stroke:var(--brasa);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.paso b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acento);margin-bottom:8px}
.paso h4{font-family:var(--serif);font-size:21px;font-weight:400;margin-bottom:8px}
.paso p{font-size:14px;color:var(--tenue)}
.mezcla-cierre{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding-top:28px;border-top:1px solid var(--linea)}

.pie{border-top:1px solid var(--linea);padding:38px 0 96px;color:var(--tenue);font-size:13px}
.pie p{max-width:70ch}
.pie p + p{margin-top:12px}
.pie a{color:var(--tenue)}
.pie a:hover{color:var(--texto)}

.cargando{padding:60px 0;color:var(--tenue);font-family:var(--mono);font-size:12px;letter-spacing:.2em;
          text-transform:uppercase}

/* Aparición al hacer scroll (la agrega cafes.js). */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.revelar.visible{opacity:1;transform:none}

/* ---------- AMA, el globo ----------
   Desde el 4-oct-2026 vive en public/ama-globo.css: es el mismo globo
   en la portada y acá, y tiene que verse idéntico en las dos. */

@media(max-width:980px){
  .hero-grilla,.mezcla-grilla{grid-template-columns:1fr}
  .hero-arte{min-height:300px;order:-1;margin-bottom:-20px}
  .hero-granos{width:78%}
  .sello{width:112px;height:112px;right:6%}
  .sello img{width:46px;height:46px}
  .origenes{grid-template-columns:repeat(2,1fr)}
  .origen:nth-child(2n){border-right:0}
  .origen:nth-child(-n+2){border-bottom:1px solid var(--linea)}
  .cafe{grid-template-columns:1fr;gap:30px;padding:64px 0}
  .objeto,.cafe:nth-of-type(even) .objeto{min-height:400px;order:-1}
  .pasos{grid-template-columns:1fr}
  .mezcla-arte{order:-1}
  .menu a:not(.menu-carrito){display:none}
}
@media(max-width:560px){
  .env{padding:0 16px}
  .hero{padding-top:48px}
  .origenes{grid-template-columns:1fr}
  .origen{border-right:0;border-bottom:1px solid var(--linea)}
  .objeto::before{width:320px;height:320px}
  .bolsa{width:210px;height:300px;padding-top:38px}
  .bolsa-etiqueta .n{font-size:22px}
  .bolsa-marca{font-size:8px;letter-spacing:.2em}
  .altura-marca{bottom:0}
  .num-grande{font-size:36px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .revelar{opacity:1;transform:none}
  html{scroll-behavior:auto}
}