/* =====================================================================
   TEMA · Molienda (café de especialidad)
   Es el mundo del menú de Make it Easy: papel crema, tinta de espresso,
   acento de tueste y granos de café que caen detrás de todo.
   Cambiando estas variables cambia el look de TODAS las páginas.
   ===================================================================== */

:root {
  /* Colores */
  --fondo: #F7F2E8;          /* crema */
  --fondo-2: #FFFDF8;        /* papel */
  --fondo-3: #F1EADC;
  --linea: rgba(46, 33, 26, .13);
  --linea-2: rgba(46, 33, 26, .26);
  --texto: #2E211A;
  --texto-2: #54463D;
  --texto-3: #6D6057;
  --titulo: #2E211A;         /* tinta de espresso */
  --acento: #B4562A;         /* tueste */
  --acento-2: #8A3F1C;
  --acento-texto: #8A3F1C;
  --acento-suave: rgba(180, 86, 42, .1);
  --sobre-acento: #FFFFFF;
  --ok: #4A7C4E; --ok-suave: rgba(74, 124, 78, .14); --ok-texto: #35603A;
  --alerta: #D9A441; --alerta-suave: #F8EACB; --alerta-texto: #6E4B00;
  --peligro: #B3261E; --peligro-suave: #F9E1DE;
  --whatsapp: #0E7468; --whatsapp-2: #0B5E54;
  --demo-fondo: #2E211A; --demo-texto: #F7F2E8;

  /* Tipografías (las del menú de Make it Easy) */
  --f-titulo: "Manrope", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-etiqueta: "IBM Plex Mono", ui-monospace, monospace;
  --t-peso: 800;
  --t-espaciado: -.02em;
  --t-alto: 1.06;
  --marca-tam: 18px;

  /* Botones y formas */
  --boton-peso: 800;
  --boton-tam: 15px;
  --f-boton: var(--f-titulo);
  --radio-boton: 999px;
  --radio-chip: 999px;
  --radio: 18px;
  --radio-hoja: 22px;
  --radio-entrada: 12px;
  --cabecera-fondo: rgba(247, 242, 232, .84);
  --mini-ajuste: contain;
}
.btn { background: var(--titulo); color: var(--fondo); }
.btn:not(.btn--linea):not(.btn--suave):not(.btn--whatsapp):not(.btn--peligro):hover { background: var(--acento-2); }
.btn--linea { background: transparent; color: var(--titulo); }
.btn--whatsapp { background: var(--whatsapp); color: #fff; }

/* La marca: un grano de café antes del nombre */
.marca { font-weight: 800; letter-spacing: -.01em; }
.marca small { display: block; font: 500 10px/1.4 var(--f-etiqueta); letter-spacing: .18em; color: var(--acento-2); opacity: 1; margin-top: 3px; }
.grano { width: 14px; height: 18px; flex: none; border-radius: 50%; background: var(--acento); transform: rotate(28deg); position: relative; box-shadow: 0 0 0 4px var(--acento-suave); }
.grano::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--fondo); transform: rotate(-8deg); }
.cabecera { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* =====================================================================
   PORTADA (index.html)
   ===================================================================== */
.inicio .granos { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; }
.inicio .granos.lejos { background-image: url(img/granos-lejos.webp); background-size: 600px auto; }
.inicio .granos.medio { background-image: url(img/granos-medio.webp); background-size: 780px auto; }
.inicio .granos.cerca { background-image: url(img/granos-cerca.webp); background-size: 900px auto; }
.inicio .velo { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: rgba(247, 242, 232, .74); }
/* los granos quedan de fondo, suaves: no compiten con el texto */
.inicio .granos { opacity: .55; }
.inicio main, .inicio .pie, .inicio .demo { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .inicio .granos { display: none; } }

.portada { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: 20px var(--margen) 70px; max-width: 1320px; margin: 0 auto; min-height: calc(100svh - 100px); }
.taza { position: relative; aspect-ratio: 1 / .92; }
.taza__objeto { position: absolute; inset: 4% 2% 14%; animation: posarse 1.4s var(--ease) both; }
.taza__objeto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 38px rgba(46, 33, 26, .28)); }
.taza__sombra { position: absolute; left: 50%; bottom: 9%; width: 62%; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(46, 33, 26, .38), transparent 72%); filter: blur(4px); animation: sombra 1.4s var(--ease) both; }
@keyframes posarse { from { transform: translateY(-70px) scale(.9); opacity: 0; } }
@keyframes sombra { from { opacity: 0; transform: translateX(-50%) scale(.5); } }
/* los ingredientes del cappuccino, como en la carta */
.taza__chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 99px; padding: 6px 13px 6px 7px; font-size: 13px; color: var(--texto-2); box-shadow: 0 12px 24px -16px rgba(46, 33, 26, .6); white-space: nowrap; animation: chip-sale .7s var(--ease-rebote) both; }
.taza__chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.taza__chip:nth-of-type(1) { left: 2%; top: 14%; animation-delay: 1.1s; }
.taza__chip:nth-of-type(2) { right: 0; top: 8%; animation-delay: 1.22s; }
.taza__chip:nth-of-type(3) { left: -2%; top: 58%; animation-delay: 1.34s; }
.taza__chip:nth-of-type(4) { right: 3%; top: 54%; animation-delay: 1.46s; }
@keyframes chip-sale { from { opacity: 0; transform: translate(var(--dx, 60px), var(--dy, 40px)) scale(.3); } }
.taza__chip:nth-of-type(2), .taza__chip:nth-of-type(4) { --dx: -60px; }
.taza__chip:nth-of-type(3), .taza__chip:nth-of-type(4) { --dy: -40px; }

.portada__txt h1 { font-size: clamp(46px, 6.6vw, 92px); line-height: .98; letter-spacing: -.035em; }
.portada__txt h1 em { font-style: normal; color: #A34B22; }
.portada__bajada { font-size: 18px; line-height: 1.6; color: var(--texto-2); max-width: 40ch; margin: 22px 0 28px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada__abierto { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font: 500 12px/1 var(--f-etiqueta); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.portada__abierto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.portada__abierto[data-abierto="no"]::before { background: var(--texto-3); box-shadow: none; }
/* la promo: un ticket de papel con borde picado */
.portada .chapa { position: relative; margin-top: 30px; max-width: 360px; background: var(--fondo-2); border: 1px dashed rgba(180, 86, 42, .5); border-radius: 14px; padding: 14px 18px; }
.chapa__cuando { font: 500 10.5px/1 var(--f-etiqueta); letter-spacing: .16em; text-transform: uppercase; color: var(--acento-2); }
.portada .chapa__titulo { font-size: 20px; margin-top: 6px; }
.chapa__precio { color: var(--acento-2); }
@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; min-height: 0; padding-top: 6px; gap: 6px; }
  .taza { width: min(100%, 440px); justify-self: center; }
  .taza__chip { font-size: 12px; }
  .portada__bajada { font-size: 16.5px; margin: 16px 0 22px; }
}

/* ---------- Lo más pedido: objetos sobre papel ---------- */
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 30px; margin-bottom: 30px; }
.objetos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.objeto { display: grid; grid-template-rows: auto 1fr; background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 20px; padding: 14px 16px 16px; text-decoration: none; box-shadow: 0 18px 40px -34px rgba(46, 33, 26, .55); transition: transform .38s var(--ease), box-shadow .38s var(--ease); }
.objeto:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -34px rgba(46, 33, 26, .6); }
.objeto__foto { aspect-ratio: 1 / .82; position: relative; }
.objeto__foto img { position: absolute; inset: 7% 9%; width: 82%; height: 86%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(46, 33, 26, .2)); transition: transform .45s var(--ease); }
.objeto:hover .objeto__foto img { transform: translateY(-6px) scale(1.05); }
.objeto h3 { font-size: 18px; }
.objeto p { font-size: 13.5px; color: var(--texto-3); margin-top: 5px; }
.objeto b { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); font: 800 17px/1 var(--f-titulo); color: var(--acento-2); }
.objeto b small { font: 500 11.5px/1 var(--f-texto); color: var(--texto-3); }
@media (max-width: 900px) { .objetos { grid-template-columns: 1fr 1fr; gap: 11px; } .objeto { padding: 10px 11px 12px; border-radius: 16px; } .objeto h3 { font-size: 15px; } .objeto p { font-size: 12px; } }

/* ---------- Cómo pedir: el mostrador en vivo ---------- */
.como { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.barra-viva { background: var(--titulo); color: var(--fondo); border-radius: 26px; padding: 28px 28px 24px; display: grid; gap: 6px; position: relative; overflow: hidden; }
.barra-viva small { font: 500 11px/1 var(--f-etiqueta); letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.barra-viva b { font: 800 clamp(64px, 10vw, 120px)/1 var(--f-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.barra-viva b.cambia { animation: cambia .6s var(--ease-rebote); }
@keyframes cambia { 30% { transform: translateY(-8px); color: #F0A26E; } }
.barra-viva span { font-size: 15px; opacity: .85; }
.barra-viva::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 200px; height: 240px; border-radius: 50%; border: 2px solid rgba(247, 242, 232, .12); transform: rotate(28deg); }
.formas { list-style: none; padding: 0; display: grid; }
.formas li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--linea); }
.formas li:last-child { border-bottom: 1px solid var(--linea); }
.formas .ico { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--acento-suave); color: var(--acento-2); }
.formas b { font: 800 19px/1.2 var(--f-titulo); color: var(--titulo); }
.formas span { color: var(--texto-2); font-size: 15px; }
.formas a { color: var(--acento-2); font-weight: 700; }
@media (max-width: 860px) { .como { grid-template-columns: 1fr; } }

/* ---------- El café de esta semana: la etiqueta de la bolsa ---------- */
.origen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 70px); align-items: center; }
.etiqueta-bolsa { background: var(--fondo-2); border: 1px solid var(--linea); border-radius: 6px 6px 22px 22px; padding: 26px 26px 22px; box-shadow: 0 30px 60px -40px rgba(46, 33, 26, .6); position: relative; }
.etiqueta-bolsa::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; background: radial-gradient(circle at 6px 12px, transparent 5px, var(--fondo-2) 5.5px) 0 0 / 12px 12px repeat-x; }
.etiqueta-bolsa h3 { font-size: clamp(30px, 4vw, 44px); }
.etiqueta-bolsa dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-top: 18px; font-size: 15px; }
.etiqueta-bolsa dt { font: 500 11px/1.9 var(--f-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.etiqueta-bolsa dd { color: var(--titulo); font-weight: 600; }
.notas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.notas span { padding: 6px 12px; border-radius: 99px; background: var(--acento-suave); color: var(--acento-2); font-weight: 700; font-size: 13.5px; }
@media (max-width: 860px) { .origen { grid-template-columns: 1fr; } }

/* ---------- Lugar y dueño ---------- */
.lugar h2 { margin-bottom: 10px; }
.dueno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; background: var(--titulo); color: var(--fondo); border-radius: 26px; padding: clamp(24px, 4vw, 44px); }
.dueno h2 { color: var(--fondo); font-size: clamp(28px, 3.6vw, 42px); }
.dueno p { opacity: .85; max-width: 54ch; margin-top: 10px; }
.dueno .btn { background: var(--fondo); color: var(--titulo); }
.dueno .btn:hover { background: #F0A26E; }

/* =====================================================================
   CAJA (pedido.html): los granos también caen detrás
   ===================================================================== */
.caja-pagina { background: var(--fondo); }
.caja-pagina .granos { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url(img/granos-lejos.webp) 0 0 / 600px auto repeat; opacity: .22; }
.caja-pagina .cabecera { z-index: 30; }
.caja-pagina .pie { position: relative; z-index: 2; }
.ticket__numero .cod { font-family: var(--f-etiqueta); letter-spacing: .14em; }

/* =====================================================================
   PANEL DEL LOCAL
   ===================================================================== */
body.panel {
  --fondo: #F4EFE6;
  --fondo-2: #FFFDF8;
  --fondo-3: #ECE3D3;
  --panel-lateral: #2E211A;
  --panel-lateral-texto: #D9CCBE;
  --panel-lateral-titulo: #FFFDF8;
  --panel-activo: #B4562A;
  --panel-activo-texto: #FFFFFF;
  --columna-fondo: #EDE5D7;
  --mostrador-fondo: #2E211A;
}
body.panel .marca small { color: #E7B28E; }
body.panel .grano { box-shadow: 0 0 0 4px rgba(247, 242, 232, .12); }
.pedido-t__num { font-family: var(--f-etiqueta); letter-spacing: .06em; }