/* ===== Juanchocoffee — prototipo v2: cálido, redondeado, fotográfico ===== */
:root{
  --naranja:#FF8C00; --rojo:#FF2D00; --rojo-p:#D90000; --amarillo:#FFC440; --crema:#FFF0A5; --blanco:#FFFFFF;
  --tinta:#000000; --berenjena:#2E0927; --cafe:#8E2800; --cafe2:#A8541B; --cafe3:#CC7E48;
  --turquesa:#13CEBB; --verde:#468966; --verde-c:#AEE096; --morado:#703A6C; --lila:#B776B6; --gris:#85919B;
  --papel:#FFFBF0; /* crema muy suave (FFF0A5 a baja intensidad) para fondos amplios */
  --texto:#2E0927;
  --f-tit:'Montserrat', 'Arial Black', system-ui, sans-serif;
  --f-txt:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mano:'Caveat', 'Segoe Print', cursive;
  --radio:28px; --radio-s:18px;
  --sombra:0 22px 45px -18px rgba(46,9,39,.35);
  --sombra-s:0 10px 24px -10px rgba(46,9,39,.3);
  --ancho:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--f-txt);color:var(--texto);background:var(--papel);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--naranja);outline-offset:3px;border-radius:8px}
.contenedor{width:min(var(--ancho),100% - 32px);margin-inline:auto}
.antetitulo{font-family:var(--f-tit);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--cafe2);display:inline-block}
.mano{font-family:var(--f-mano);font-weight:700;font-size:1.35em;color:var(--naranja);line-height:1}
h1,h2,h3{font-family:var(--f-tit);font-weight:800;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(32px,4.4vw,56px)}

/* ---------- Divulgación + header ---------- */
.divulgacion{background:rgba(0,0,0,.25);color:var(--crema);text-align:center;padding:16px;font-size:13px;margin-top:28px;border-radius:16px;grid-column:1/-1}
.divulgacion a{color:var(--amarillo)}
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,251,240,.9);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(46,9,39,.08)}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.cabecera .logo img{height:44px;width:auto}
.nav{display:flex;gap:2px;align-items:center}
.nav a{font-family:var(--f-tit);font-weight:700;text-decoration:none;padding:9px 14px;border-radius:999px;font-size:15px;transition:background .2s,color .2s}
.nav a[aria-current="page"]{background:var(--naranja);color:var(--berenjena)}
@media (hover:hover){.nav a:hover{background:var(--naranja);color:var(--berenjena)}}
.idioma{font-family:var(--f-tit);font-weight:700;font-size:12px;border:1.5px solid rgba(46,9,39,.25);border-radius:999px;padding:7px 12px;background:transparent;cursor:pointer;color:var(--texto);margin-left:6px}
.menu-btn{display:none;background:var(--naranja);border:0;border-radius:999px;padding:10px 18px;font-family:var(--f-tit);font-weight:800;cursor:pointer;color:var(--berenjena)}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--papel);padding:12px 16px 24px;border-radius:0 0 28px 28px;box-shadow:var(--sombra);transform:translateY(calc(-100% - 100px));visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s}
  .nav.abierto{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .nav a{font-size:20px;padding:14px}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-tit);font-weight:800;text-decoration:none;border:0;border-radius:999px;padding:15px 26px;cursor:pointer;font-size:16px;transition:transform .2s cubic-bezier(.2,.9,.3,1.4),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-naranja{background:var(--naranja);color:var(--berenjena);box-shadow:0 12px 24px -10px rgba(255,140,0,.8)}
.btn-naranja:hover{box-shadow:0 18px 30px -10px rgba(255,140,0,.9)}
.btn-claro{background:rgba(255,255,255,.95);color:var(--berenjena);box-shadow:var(--sombra-s)}
.btn-borde{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-oscuro{background:var(--berenjena);color:var(--crema)}
.btn-amazon{background:var(--naranja);color:var(--berenjena);width:100%;padding:13px 18px;font-size:15px}

/* ---------- Hero (Concepto A) con foto ---------- */
.hero{position:relative;overflow:hidden;color:var(--crema);background:var(--berenjena)}
.hero .fondo{position:absolute;inset:-6% 0 0 0;background:url('img/barra-cafeteras.jpg') center/cover no-repeat;transform:translateY(calc(var(--p,0) * 60px)) scale(1.06);transition:transform .2s linear}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(46,9,39,.92) 0%,rgba(46,9,39,.75) 42%,rgba(46,9,39,.25) 75%,rgba(46,9,39,.45) 100%)}
.hero .contenedor{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;min-height:calc(100svh - 104px);padding-block:56px}
.hero .antetitulo{color:var(--amarillo)}
.hero h1{font-weight:900;font-size:clamp(46px,7vw,96px);line-height:.98;letter-spacing:-.03em;margin:18px 0 22px;perspective:900px;color:var(--blanco)}
.hero h1 .linea{display:block;transform-origin:50% 100%;animation:asentar .9s cubic-bezier(.2,.9,.25,1) both}
.hero h1 .linea:nth-child(2){animation-delay:.12s}
.hero h1 .linea:nth-child(3){animation-delay:.24s}
.resalta{color:var(--naranja);position:relative;white-space:nowrap}
.resalta::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;background:var(--naranja);border-radius:99px;transform-origin:0 50%;animation:subrayar .8s 1s cubic-bezier(.2,.9,.25,1) both;opacity:.55}
.hero .bajada{font-size:clamp(17px,1.6vw,20px);max-width:36ch;animation:emerger .8s .45s both;color:rgba(255,240,165,.92)}
.hero .acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;animation:emerger .8s .6s both}

/* Taza que se arma */
.escena{position:relative;aspect-ratio:1/1;perspective:1100px;max-width:540px;justify-self:center;width:100%}
.taza{position:absolute;inset:8% 6% 12% 6%;transform-style:preserve-3d;transform:rotateX(calc(var(--p,0) * 14deg)) rotateY(calc(var(--mx,0) * 10deg)) translateY(calc(var(--p,0) * -30px));transition:transform .2s linear;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.taza svg{width:100%;height:100%;overflow:visible}
.pieza{transform-box:fill-box;transform-origin:center}
.p-asa{animation:entra-asa 1s .5s cubic-bezier(.2,.9,.25,1.2) both}
.p-cuerpo{animation:entra-cuerpo 1s .2s cubic-bezier(.2,.9,.25,1) both}
.p-bandera{transform-origin:100% 0;animation:entra-bandera .8s .85s cubic-bezier(.2,.9,.3,1.3) both}
.p-gota{animation:entra-gota 1s 1.1s cubic-bezier(.3,1.5,.5,1) both}
.vapor path{fill:none;stroke:rgba(255,240,165,.8);stroke-width:9;stroke-linecap:round;opacity:0;animation:vapor 3.2s 1.9s ease-in-out infinite}
.vapor path:nth-child(2){animation-delay:2.4s}
.vapor path:nth-child(3){animation-delay:2.9s}
.ficha-flota{position:absolute;background:var(--blanco);color:var(--berenjena);border-radius:999px;padding:10px 18px 10px 12px;box-shadow:var(--sombra);font-family:var(--f-tit);font-weight:800;font-size:14px;display:flex;align-items:center;gap:10px;animation:emerger .7s both, flotar 5s ease-in-out infinite}
.ficha-flota .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--naranja);font-size:16px}
.ficha-flota small{display:block;font-size:11px;font-weight:700;color:var(--cafe2);letter-spacing:.08em;text-transform:uppercase}
.f1{top:4%;left:-2%;animation-delay:1.5s,2.2s}
.f2{top:42%;right:-4%;animation-delay:1.7s,2.6s}
.f2 .ico{background:var(--crema)}
.f3{bottom:4%;left:8%;animation-delay:1.9s,3s}
.f3 .ico{background:var(--turquesa)}
.bajar{position:absolute;left:50%;bottom:20px;z-index:3;transform:translateX(-50%);animation:bajar 1.6s ease-in-out infinite;color:var(--crema);font-family:var(--f-tit);font-weight:700;font-size:13px;letter-spacing:.12em}
@media (max-width:900px){
  .hero .contenedor{grid-template-columns:1fr;min-height:auto;padding-block:30px 72px}
  .hero::after{background:linear-gradient(180deg,rgba(46,9,39,.55) 0%,rgba(46,9,39,.9) 55%)}
  .escena{max-width:300px;order:-1}
  .ficha-flota{font-size:12px;padding:6px 12px 6px 6px;gap:8px}
  .ficha-flota .ico{width:26px;height:26px;font-size:13px}
  .ficha-flota small{font-size:9px}
  .f1{top:-4%;left:-10%}
  .f2{top:56%;right:-14%}
  .f3{bottom:-6%;left:-6%}
}

/* ---------- Cinta de categorías (se mueve sola, se arrastra, cada categoría abre el comparador) ---------- */
.cinta{background:var(--naranja);color:var(--berenjena);display:flex;align-items:center;gap:0;overflow:hidden;position:relative}
.cinta-titulo{flex:0 0 auto;font-family:var(--f-tit);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:0 18px 0 max(16px,calc((100vw - var(--ancho))/2));white-space:nowrap;align-self:stretch;display:flex;align-items:center;background:var(--berenjena);color:var(--crema);border-radius:0 999px 999px 0;position:relative;z-index:2}
.carril{flex:1;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:14px 14px;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.carril::-webkit-scrollbar{display:none}
.carril.arrastrando{cursor:grabbing}
.carril .cat{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.35);color:var(--berenjena);text-decoration:none;font-family:var(--f-tit);font-weight:800;font-size:16px;padding:10px 18px;border-radius:999px;transition:background .2s,transform .2s;user-select:none;-webkit-user-drag:none}
.carril .cat:hover,.carril .cat:focus-visible{background:var(--blanco);transform:translateY(-2px)}
@media (max-width:700px){.cinta-titulo{display:none}.carril .cat{font-size:14px;padding:8px 14px}}
/* ---------- Pila de tarjetas con fotos ---------- */
.pila{position:relative;height:340vh;background:var(--papel)}
.pila .fijo{position:sticky;top:72px;height:calc(100vh - 72px);display:grid;place-items:center;padding-top:clamp(90px,15vh,140px);overflow:hidden;perspective:1200px}
.pila .titulo-pila{position:absolute;top:4vh;left:16px;right:16px;text-align:center}
.carta{position:absolute;width:min(900px,92vw);min-height:min(400px,56vh);border-radius:36px;box-shadow:0 40px 60px -30px rgba(46,9,39,.5);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;will-change:transform,opacity;transform-origin:50% 0}
.carta .foto{background-size:cover;background-position:center;min-height:100%}
.carta .texto{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.carta .num{font-family:var(--f-tit);font-weight:900;font-size:clamp(54px,7vw,92px);line-height:.8;opacity:.9}
.carta h3{font-size:clamp(26px,3.2vw,40px);margin:12px 0 10px}
.carta p{max-width:38ch;margin-bottom:22px}
.c1{background:var(--naranja);color:var(--berenjena)}
.c1 .foto{background-image:url('img/molienda-espresso.jpg')}
.c2{background:var(--crema);color:var(--berenjena)}
.c2 .foto{background-image:url('img/prensa-ventana.jpg')}
.c2 .num{color:var(--cafe2)}
.c3{background:var(--berenjena);color:var(--crema)}
.c3 .foto{background-image:url('img/servir-prensa.jpg')}
.c3 .num{color:var(--turquesa)}
@media (max-width:700px){.carta{grid-template-columns:1fr;grid-template-rows:150px auto}.carta .texto{padding:22px}}

/* ---------- Secciones ---------- */
.seccion{padding:clamp(72px,9vw,128px) 0;position:relative}
.cabeza-seccion{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.cabeza-seccion p{max-width:46ch}
.revelar{opacity:0;transform:perspective(900px) rotateX(18deg) translate3d(0,40px,-60px);transform-origin:50% 0;transition:opacity .7s,transform .9s cubic-bezier(.2,.9,.25,1)}
.revelar.visto{opacity:1;transform:none}

/* ---------- Comparador ---------- */
.comparar{background:var(--blanco);border-radius:48px 48px 0 0;margin-top:-48px;z-index:2}
.carrusel-cat{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;margin-bottom:10px;scrollbar-width:thin;scroll-snap-type:x proximity}
.chip{border:0;border-radius:999px;background:#F6EEDC;color:var(--berenjena);padding:9px 18px;font-family:var(--f-tit);font-weight:700;cursor:pointer;font-size:14px;transition:background .2s,transform .2s,color .2s;white-space:nowrap}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--berenjena);color:var(--crema)}
.chip.grande{font-size:15px;padding:12px 20px;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px}
.chip.grande[aria-pressed="true"]{background:var(--naranja);color:var(--berenjena);box-shadow:0 10px 20px -10px rgba(255,140,0,.9)}
.chip .pronto{font-size:10px;background:rgba(46,9,39,.1);padding:2px 7px;border-radius:99px;text-transform:uppercase;letter-spacing:.06em}
.filtros{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:30px;padding:18px 22px;border-radius:var(--radio-s);background:var(--papel)}
.filtros .grupo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filtros .antetitulo{margin-right:4px;font-size:12px}
.aviso-prototipo{display:inline-block;background:var(--amarillo);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:18px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.producto{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s}
.producto:hover{transform:translateY(-6px);box-shadow:0 34px 50px -20px rgba(46,9,39,.4)}
.producto.oculto{display:none}
.producto.recomendado{box-shadow:0 0 0 4px var(--naranja),var(--sombra)}
.producto .foto{aspect-ratio:4/3;background:radial-gradient(circle at 50% 60%,#fff 0,var(--crema) 75%);display:grid;place-items:center;position:relative}
.producto .foto svg{width:40%;height:auto;filter:drop-shadow(0 14px 14px rgba(46,9,39,.25))}
.producto .sello{position:absolute;top:14px;left:14px;background:var(--amarillo);border-radius:999px;padding:5px 12px;font-family:var(--f-tit);font-size:12px;font-weight:800}
.producto .precio{position:absolute;top:14px;right:14px;font-family:var(--f-tit);font-weight:800;background:var(--blanco);border-radius:999px;padding:4px 12px;box-shadow:var(--sombra-s)}
.producto .cuerpo{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.producto h3{font-size:22px}
.producto .ideal{font-size:15px}
.producto .veredicto{font-family:var(--f-mano);font-size:22px;line-height:1.15;color:var(--cafe)}
.producto .fila-btn{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.producto .fila-btn .btn-amazon{flex:1 1 170px;width:auto;white-space:nowrap}
.btn-comparar{flex:0 0 auto;border:0;border-radius:999px;background:#F6EEDC;font-family:var(--f-tit);font-weight:800;padding:12px 18px;cursor:pointer;color:var(--berenjena);transition:background .2s;white-space:nowrap}
.producto .foto img{width:63%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--blanco);border-radius:22px;box-shadow:0 14px 28px -14px rgba(46,9,39,.35)}
.divulgacion-inline{font-size:13px;color:#6a5a65;margin:-6px 0 20px}
.divulgacion-inline a{color:var(--cafe)}
.btn-comparar[aria-pressed="true"]{background:var(--berenjena);color:var(--crema)}
.placeholder-cat{grid-column:1/-1;border-radius:var(--radio);background:var(--papel);padding:48px;text-align:center}

.bandeja{position:fixed;left:50%;bottom:22px;transform:translate(-50%,170%);z-index:60;background:var(--berenjena);color:var(--crema);border-radius:999px;padding:10px 10px 10px 24px;display:flex;align-items:center;gap:16px;box-shadow:var(--sombra);transition:transform .45s cubic-bezier(.2,.9,.3,1.2)}
.bandeja.visible{transform:translate(-50%,0)}
.bandeja .btn{padding:11px 20px}
.bandeja .btn:disabled{opacity:.5;cursor:not-allowed}

.panel-comparar{position:fixed;inset:0;z-index:80;background:rgba(46,9,39,.6);backdrop-filter:blur(4px);display:none;place-items:center;padding:16px}
.panel-comparar.abierto{display:grid}
.panel-comparar .hoja{background:var(--blanco);border-radius:32px;box-shadow:0 40px 80px -20px rgba(0,0,0,.5);width:min(1000px,100%);max-height:90vh;overflow:auto;animation:abrir-ficha .55s cubic-bezier(.2,.9,.25,1) both;transform-origin:50% 0}
.panel-comparar .barra{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;position:sticky;top:0;background:var(--blanco);box-shadow:0 1px 0 rgba(46,9,39,.08);z-index:1}
.panel-comparar h3{font-size:26px}
.cerrar{border:0;border-radius:50%;background:#F6EEDC;font-weight:900;font-size:20px;width:44px;height:44px;cursor:pointer;color:var(--berenjena)}
.tabla{width:100%;border-collapse:collapse;min-width:640px}
.tabla th,.tabla td{border-bottom:1px solid #F1E8D6;padding:15px 18px;text-align:left;vertical-align:top;font-size:15px}
.tabla thead th{font-family:var(--f-tit);font-size:18px;background:var(--papel)}
.tabla tbody th{font-family:var(--f-tit);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--cafe2);width:150px}
.tabla td ul{padding-left:18px}
.tabla tr{animation:emerger .5s both}
.tabla .por-verificar{color:var(--gris);font-style:italic}
.nota-tabla{padding:16px 26px;font-size:13px;color:#5a4a55}

/* Quiz */
.quiz{margin-top:64px;display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:start;border-radius:36px;background:linear-gradient(135deg,var(--crema),#FFE3B3);box-shadow:var(--sombra);padding:clamp(24px,4vw,44px)}
.quiz h3{font-size:clamp(28px,3vw,40px);margin:6px 0 10px}
.quiz .pregunta{margin-bottom:16px}
.quiz .pregunta p{font-weight:800;margin-bottom:8px}
.quiz .chip{background:rgba(255,255,255,.7)}
.quiz .chip[aria-pressed="true"]{background:var(--berenjena)}
.quiz .resultado{margin-top:10px;font-weight:700;min-height:1.5em}
@media (max-width:760px){.quiz{grid-template-columns:1fr}}

/* Ofertas */
.ofertas{background:linear-gradient(160deg,var(--rojo) 0%,var(--naranja) 100%);color:var(--blanco);overflow:hidden}
.ofertas::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:url('img/granos.jpg') center/cover;opacity:.25}
.ofertas .antetitulo{color:var(--crema)}
.ofertas .chip{background:rgba(255,255,255,.2);color:var(--blanco)}
.ofertas .chip[aria-pressed="true"]{background:var(--blanco);color:var(--rojo-p)}
.ofertas .tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.ofertas .rejilla{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tarjeta-oferta{background:var(--blanco);color:var(--berenjena);border-radius:var(--radio);padding:26px;box-shadow:0 24px 40px -20px rgba(0,0,0,.45);position:relative}
.tarjeta-oferta .tipo{display:inline-block;font-family:var(--f-tit);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:#FFE7DF;color:var(--rojo-p);margin-bottom:12px}
.tarjeta-oferta h3{font-size:21px;margin-bottom:8px}
.tarjeta-oferta .oferta-foto{display:block;width:100%;height:170px;object-fit:contain;background:var(--blanco);border-radius:16px;margin:-6px 0 14px}
.tarjeta-oferta.oculto{display:none}

/* Blog con fotos reales */
.blog{background:var(--papel)}
.articulo{border-radius:var(--radio);overflow:hidden;background:var(--blanco);box-shadow:var(--sombra);text-decoration:none;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.9,.25,1),box-shadow .4s}
.articulo:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 36px 50px -22px rgba(46,9,39,.45)}
.articulo .portada{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;transition:transform .6s}
.articulo:hover .portada{transform:scale(1.04)}
.articulo .video{position:absolute;left:14px;bottom:14px;background:rgba(46,9,39,.85);color:var(--crema);border-radius:999px;padding:6px 14px 6px 8px;font-family:var(--f-tit);font-weight:700;font-size:12px;display:flex;align-items:center;gap:8px}
.articulo .video b{width:24px;height:24px;border-radius:50%;background:var(--rojo);display:grid;place-items:center;font-size:10px;color:#fff}
.articulo .info{padding:22px}
.articulo h3{font-size:21px;line-height:1.2;margin-top:6px}

/* Teaser coffee shops */
.teaser-cafes{color:var(--crema);overflow:hidden;background:var(--berenjena)}
.teaser-cafes::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,9,39,.95) 30%,rgba(46,9,39,.55)),url('img/servir-prensa.jpg') center/cover}
.teaser-cafes .contenedor{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.teaser-cafes .antetitulo{color:var(--turquesa)}
.teaser-cafes p{margin:16px 0 26px;max-width:42ch}
.mini-ruta svg{width:100%;height:auto}
.mini-ruta .trazo{fill:none;stroke:var(--naranja);stroke-width:5;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.4s ease}
.mini-ruta.visto .trazo{stroke-dashoffset:0}
.mini-ruta circle{fill:var(--turquesa);stroke:var(--crema);stroke-width:3}
@media (max-width:760px){.teaser-cafes .contenedor{grid-template-columns:1fr}}

/* Sobre Juancho */
.sobre .contenedor{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:center}
.sobre h2{font-size:clamp(30px,3.6vw,46px);margin:8px 0 18px}
.retrato{position:relative;max-width:440px;margin-inline:auto;width:100%}
.foto-juancho{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:36px;box-shadow:var(--sombra);transform:rotate(-2deg)}
.foto-mini{position:absolute;width:42%;aspect-ratio:3/4;object-fit:cover;right:-8%;bottom:-8%;border-radius:24px;border:6px solid var(--papel);box-shadow:var(--sombra);transform:rotate(5deg)}
.retrato .sello-gira{position:absolute;width:30%;left:-8%;top:-8%;animation:girar 28s linear infinite;filter:drop-shadow(0 10px 14px rgba(46,9,39,.25))}
.sobre p{margin:12px 0}
.cita{font-size:clamp(26px,2.6vw,34px);color:var(--naranja);margin:22px 0 18px;line-height:1.15}
.datos-rapidos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 26px}
.datos-rapidos li{background:var(--blanco);border-radius:18px;padding:12px 10px;text-align:center;box-shadow:var(--sombra-s);font-size:13px}
.datos-rapidos b{display:block;font-family:var(--f-tit);font-weight:900;font-size:20px;color:var(--rojo)}
@media (max-width:760px){.sobre .contenedor{grid-template-columns:1fr}.datos-rapidos{grid-template-columns:repeat(2,1fr)}.foto-mini{right:-2%}.retrato .sello-gira{left:-2%}}

/* Footer */
.pie{background:var(--berenjena);color:var(--crema);padding:72px 0 120px;border-radius:48px 48px 0 0}
.pie .contenedor{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
.pie h4{font-family:var(--f-tit);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);margin-bottom:12px}
.pie a{display:block;text-decoration:none;padding:3px 0;opacity:.9}
.pie a:hover{color:var(--naranja)}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(255,240,165,.2);padding-top:18px;font-size:13px;opacity:.75}
@media (max-width:760px){.pie .contenedor{grid-template-columns:1fr 1fr}}

/* Barra de progreso */
.progreso{position:fixed;left:0;right:0;bottom:0;height:5px;z-index:70}
.progreso i{display:block;height:100%;background:linear-gradient(90deg,var(--rojo),var(--naranja));transform-origin:0 50%;transform:scaleX(var(--leido,0));border-radius:0 99px 99px 0}

/* Transición entre páginas */
.cortina{position:fixed;inset:0;z-index:100;background:var(--naranja);display:grid;place-items:center;transform:translateY(100%);pointer-events:none;border-radius:0}
.cortina svg{width:120px;height:auto}
.cortina.entra{animation:cortina-sube .55s cubic-bezier(.7,0,.3,1) forwards}
.cortina.sale{transform:none;animation:cortina-se-va .7s .1s cubic-bezier(.7,0,.3,1) forwards}

/* ===== Página Coffee Shops (Concepto B) ===== */
.hero-ruta{color:var(--crema);position:relative;overflow:hidden;background:var(--berenjena)}
.hero-ruta::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(46,9,39,.95) 25%,rgba(46,9,39,.6)),url('img/prensa-taza.jpg') center/cover}
.hero-ruta .contenedor{position:relative;padding-block:64px 80px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.ciudades{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.ciudad{border:0;border-radius:999px;padding:9px 16px;font-family:var(--f-tit);font-weight:700;font-size:14px;background:rgba(255,240,165,.12);color:var(--crema);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.ciudad[aria-pressed="true"]{background:var(--turquesa);color:var(--berenjena)}
.ciudad[disabled]{cursor:not-allowed;opacity:.65}
.ciudad .pronto{font-size:10px;background:rgba(255,240,165,.2);padding:2px 7px;border-radius:99px;text-transform:uppercase}
.hero-ruta .antetitulo{color:var(--turquesa)}
.hero-ruta h1{font-weight:900;font-size:clamp(46px,7vw,92px);line-height:.98;letter-spacing:-.03em;margin:14px 0 18px;color:var(--blanco)}
.hero-ruta h1 .linea{display:block;animation:asentar .9s cubic-bezier(.2,.9,.25,1) both}
.hero-ruta h1 .linea:nth-child(2){animation-delay:.15s;color:var(--naranja)}
.hero-ruta .bajada{max-width:40ch;animation:emerger .8s .4s both}
.mapa{border-radius:32px;background:rgba(46,9,39,.75);backdrop-filter:blur(6px);box-shadow:0 30px 60px -25px rgba(0,0,0,.6);padding:14px;animation:emerger .8s .5s both}
.mapa svg{width:100%;height:auto;max-height:66vh;display:block}
.mapa .lago{fill:#13CEBB;opacity:.2}
.mapa .ruta-mapa{fill:none;stroke:var(--naranja);stroke-width:3;stroke-dasharray:6 6}
.mapa .punto{fill:var(--turquesa);stroke:var(--crema);stroke-width:2;cursor:pointer}
.mapa .punto.activo{fill:var(--naranja)}
.mapa .punto.vip{fill:var(--amarillo)}
.mapa text{fill:var(--crema);font-family:var(--f-tit);font-weight:700;font-size:9px;letter-spacing:.1em}
@media (max-width:900px){.hero-ruta .contenedor{grid-template-columns:1fr}}

.filtro-barrios{position:sticky;top:72px;z-index:40;background:rgba(255,251,240,.92);backdrop-filter:blur(8px);padding:12px 0;box-shadow:0 1px 0 rgba(46,9,39,.08)}
.filtro-barrios .contenedor{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}

/* Destacado patrocinado */
.destacado{padding:56px 0 0}
.tarjeta-vip{display:grid;grid-template-columns:1fr 1.2fr;border-radius:36px;overflow:hidden;background:var(--blanco);box-shadow:0 0 0 3px var(--amarillo),var(--sombra)}
.tarjeta-vip .foto{background:linear-gradient(135deg,rgba(255,196,64,.25),rgba(255,140,0,.25)),url('img/barra-cafeteras.jpg') center/cover;min-height:260px}
.tarjeta-vip .texto{padding:clamp(24px,4vw,44px)}
.etq-patrocinado{display:inline-flex;align-items:center;gap:6px;background:var(--morado);color:#fff;border-radius:999px;padding:5px 12px;font-family:var(--f-tit);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tarjeta-vip h3{font-size:clamp(26px,3vw,36px);margin:14px 0 8px}
@media (max-width:760px){.tarjeta-vip{grid-template-columns:1fr}}

.ruta{position:relative;padding:72px 0 120px;background:var(--papel)}
.ruta .hilo{position:absolute;top:0;left:50%;width:6px;height:100%;transform:translateX(-50%);background:rgba(46,9,39,.1);border-radius:3px}
.ruta .hilo i{position:absolute;inset:0;background:linear-gradient(180deg,var(--naranja),var(--rojo));transform-origin:50% 0;transform:scaleY(var(--avance,0));border-radius:3px}
.parada{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;margin-bottom:56px}
.parada .marca{grid-column:2;justify-self:center;width:30px;height:30px;border-radius:50%;background:var(--blanco);box-shadow:0 0 0 4px var(--papel),0 0 0 7px rgba(46,9,39,.15);transition:background .3s,transform .3s,box-shadow .3s;z-index:2}
.parada.encendida .marca{background:var(--turquesa);transform:scale(1.2);box-shadow:0 0 0 4px var(--papel),0 0 0 7px var(--turquesa)}
.parada .tarjeta{grid-row:1;background:var(--blanco);border-radius:var(--radio);padding:26px;box-shadow:var(--sombra);opacity:0;transform:perspective(900px) rotateY(var(--giro,18deg)) translateX(var(--desde,-40px));transition:opacity .6s,transform .8s cubic-bezier(.2,.9,.25,1)}
.parada:nth-of-type(odd) .tarjeta{grid-column:1;--desde:-50px;--giro:18deg}
.parada:nth-of-type(even) .tarjeta{grid-column:3;--desde:50px;--giro:-18deg}
.parada.encendida .tarjeta{opacity:1;transform:none}
.parada.oculta{display:none}
.tarjeta .barrio{display:inline-block;background:#E4F6D9;color:var(--verde);border-radius:999px;padding:4px 12px;font-family:var(--f-tit);font-size:12px;font-weight:800}
.tarjeta h3{font-size:24px;margin:12px 0 6px}
.tarjeta .dir{font-size:15px;color:#5a4a55}
.tarjeta .estado{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.badge{font-family:var(--f-tit);font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;background:#F6EEDC}
.badge.abierto{background:var(--turquesa);color:var(--berenjena)}
.badge.visitar{background:var(--amarillo)}
.badge.verificar{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(46,9,39,.2);color:#6a5a65}
.tarjeta .enlaces{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--f-tit);font-weight:700;font-size:14px}
.tarjeta .enlaces a{color:var(--cafe)}
.patrocinio{border:2px dashed var(--lila);border-radius:var(--radio);padding:24px;text-align:center;color:var(--morado);background:#FBF4FB;margin:0 auto 56px;max-width:560px;position:relative;z-index:2}
@media (max-width:760px){
  .ruta .hilo{left:38px}
  .parada{grid-template-columns:44px 1fr}
  .parada .marca{grid-column:1;grid-row:1;justify-self:start;margin-left:7px}
  .parada:nth-of-type(odd) .tarjeta,.parada:nth-of-type(even) .tarjeta{grid-column:2;--desde:30px;--giro:-12deg}
}

/* ---------- Keyframes ---------- */
@keyframes asentar{from{transform:translate3d(0,-40px,220px) rotateX(28deg);opacity:0}55%{opacity:1}to{transform:none;opacity:1}}
@keyframes emerger{from{opacity:0;transform:translate3d(0,14px,-90px) rotateX(-18deg)}to{opacity:1;transform:none}}
@keyframes flotar{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:-.8deg}}
@keyframes bajar{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@keyframes subrayar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes entra-asa{from{transform:translateX(-160px) rotate(-35deg);opacity:0}to{transform:none;opacity:1}}
@keyframes entra-cuerpo{from{transform:translateY(-260px) rotate(8deg) scale(.9);opacity:0}70%{transform:translateY(10px) scale(1.02,.97)}to{transform:none;opacity:1}}
@keyframes entra-bandera{from{transform:rotate(-80deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes entra-gota{from{transform:translateY(-320px) scale(.5,1.3);opacity:0}60%{transform:translateY(8px) scale(1.12,.86);opacity:1}to{transform:none;opacity:1}}
@keyframes vapor{0%{opacity:0;transform:translateY(20px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-50px)}}
@keyframes cinta{to{transform:translateX(-50%)}}
@keyframes abrir-ficha{from{opacity:0;transform:perspective(800px) rotateX(-60deg) translateZ(-40px)}to{opacity:1;transform:none}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes cortina-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes cortina-se-va{from{transform:none}to{transform:translateY(-100%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .revelar,.parada .tarjeta{opacity:1;transform:none}
  .vapor path{opacity:.5}
  .pila{height:auto}
  .pila .fijo{position:relative;height:auto;display:flex;flex-direction:column;gap:24px;padding:40px 0;top:0}
  .pila .titulo-pila{position:static}
  .carta{position:relative;transform:none!important;opacity:1!important}
}

/* ===== Artículos y páginas (WordPress) ===== */
.cabeza-articulo{position:relative;color:var(--blanco);background:var(--berenjena);padding:clamp(80px,12vw,150px) 0 clamp(56px,7vw,90px);overflow:hidden}
.cabeza-articulo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,9,39,.55),rgba(46,9,39,.92)),var(--foto) center/cover}
.cabeza-articulo.simple{padding:clamp(56px,8vw,96px) 0 clamp(36px,5vw,56px)}
.cabeza-articulo.simple::before{background:linear-gradient(135deg,var(--berenjena),#4a1340)}
.cabeza-articulo .contenedor{position:relative;max-width:860px}
.cabeza-articulo .antetitulo{color:var(--amarillo)}
.cabeza-articulo h1{font-size:clamp(34px,5vw,62px);margin:14px 0 18px;animation:asentar .9s cubic-bezier(.2,.9,.25,1) both}
.cabeza-articulo .autor{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--crema)}
.cabeza-articulo .autor img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--naranja)}
.entrada{max-width:760px;padding:clamp(40px,6vw,72px) 0 96px;font-size:18px;line-height:1.75}
.entrada > * + *{margin-top:1.1em}
.entrada h2{font-size:clamp(26px,3vw,34px);margin-top:1.8em}
.entrada h3{font-size:22px;margin-top:1.5em}
.entrada a{color:var(--cafe);font-weight:700}
.entrada ul,.entrada ol{padding-left:1.3em}
.entrada li + li{margin-top:.4em}
.entrada img{border-radius:var(--radio-s);box-shadow:var(--sombra-s)}
.entrada blockquote{font-family:var(--f-mano);font-size:30px;line-height:1.2;color:var(--naranja);border-left:4px solid var(--naranja);padding-left:18px}
.entrada table{width:100%;border-collapse:collapse;font-size:16px}
.entrada th,.entrada td{border-bottom:1px solid #F1E8D6;padding:10px 12px;text-align:left}
.entrada .wp-block-button__link,.entrada .btn{display:inline-flex;background:var(--naranja);color:var(--berenjena);border-radius:999px;padding:13px 24px;font-family:var(--f-tit);font-weight:800;text-decoration:none}
/* Producto dentro de un artículo: foto del fabricante + texto + botón compacto bajo la foto */
.producto-blog{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:24px;align-items:center;background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra-s);padding:20px;margin:18px 0 28px}
.producto-blog .pb-foto{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none}
.producto-blog .pb-foto img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:16px;box-shadow:none;background:var(--blanco);transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.producto-blog .pb-foto:hover img{transform:scale(1.04)}
.producto-blog p{margin:0 0 .6em}
.producto-blog > p:empty,.producto-blog > br{display:none}
.entrada .producto-blog .btn-amazon{width:auto;padding:9px 18px;font-size:14px;white-space:nowrap;box-shadow:0 8px 16px -10px rgba(217,0,0,.6)}
.producto-blog .pb-credito{font-size:12px;color:var(--neutro,#85919B);margin:0}
@media (max-width:600px){.producto-blog{grid-template-columns:1fr;text-align:center;padding:18px}.producto-blog .pb-foto img{max-width:240px}}
.video-yt{position:relative;aspect-ratio:16/9;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.video-yt iframe{position:absolute;inset:0;width:100%;height:100%}
.paginacion{margin-top:40px}
.paginacion .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.paginacion .page-numbers{padding:8px 14px;border-radius:999px;background:#F6EEDC;text-decoration:none;font-weight:700}
.paginacion .current{background:var(--naranja)}
.badge.visitado{background:var(--verde-c)}
.tarjeta .pedir{font-size:15px;margin-top:-4px;margin-bottom:12px}
.pie .divulgacion{grid-column:1/-1;margin-top:0}

/* Hero: firma y fichas como enlaces */
.hero .firma{margin-top:22px;font-size:14px;color:rgba(255,240,165,.75);animation:emerger .8s .75s both}
.hero .firma::before{content:"✓ ";color:var(--turquesa);font-weight:800}
a.ficha-flota{text-decoration:none;cursor:pointer;transition:box-shadow .2s}
a.ficha-flota:hover{box-shadow:0 0 0 3px var(--naranja),var(--sombra)}
.pregunta-pilar{display:inline-block;margin-top:10px;font-family:var(--f-tit);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.35)}
.c3 .pregunta-pilar{background:rgba(19,206,187,.2);color:var(--turquesa)}
/* Selector de idioma ES · EN */
.idioma{display:inline-flex;align-items:center;gap:4px}
.nav .idioma a{padding:2px 6px;border-radius:999px;font-size:12px;opacity:.55;background:none}
.nav .idioma a:hover{opacity:1;background:none;color:var(--naranja)}
.nav .idioma a.activo{opacity:1;background:var(--berenjena);color:var(--crema)}
@media (max-width:900px){.nav .idioma{justify-content:center;margin:8px 0 0;font-size:16px}.nav .idioma a{font-size:16px;padding:6px 14px}}