/* ===== Semillas del Ermitaño — prototipo (compartido) ===== */
:root{
  --ink:#141210; --roast:#2a1c12; --paper:#f4e9d5; --paper-2:#ecdcc0; --card:#fbf5e9;
  --crimson:#c8102e; --gold:#d9a441; --gold-deep:#a9781f; --green:#5b5c38;
  --teal:#2f8f7f; --rust:#b5532a; --border:#141210; --text:#221a12; --muted:#6f5f4c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;font-size:18px;background:#f0e6d0}
body{
  font-family:'Montserrat',system-ui,sans-serif;color:var(--text);line-height:1.68;font-size:1rem;
  background:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Cinzel',Georgia,serif;letter-spacing:.5px;font-weight:700}
img{display:block;max-width:100%}
a{color:var(--rust)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
section{scroll-margin-top:88px}

.btn{
  display:inline-block;font-family:'Cinzel',serif;font-weight:700;font-size:1rem;text-transform:uppercase;
  letter-spacing:1.5px;padding:15px 30px;border:3px solid var(--border);border-radius:10px;background:var(--gold);
  color:var(--roast);cursor:pointer;text-decoration:none;box-shadow:5px 5px 0 var(--border);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--border)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--border)}
.btn--dark{background:var(--roast);color:#fff}
.btn--sm{font-size:.78rem;padding:9px 18px;box-shadow:4px 4px 0 var(--border)}

/* ===== Header / barra de navegación (una sola fila) ===== */
header{position:sticky;top:0;z-index:1000;background:#121110;
  border-bottom:1px solid rgba(169,120,31,.55);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.nav{max-width:1340px;margin:0 auto;padding:20px 36px;display:flex;align-items:center;justify-content:space-between;gap:22px;position:relative}
.brand{order:1;flex:none;display:flex;align-items:center;gap:15px;text-decoration:none}
.brand img{height:66px;width:auto}
.brand-txt b{display:block;font-family:'Cinzel',serif;color:var(--gold);font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:3.5px;line-height:1}
.brand-txt small{display:none}
.nav-links{order:2;margin:0 auto;display:flex;align-items:center;gap:0;list-style:none}
.nav-links li{display:flex;align-items:center}
.nav-links li:not(:last-child)::after{content:"•";color:var(--gold);opacity:.85;margin:0 26px;font-size:1.05rem}
.nav-links a{color:#f2e8d6;text-decoration:none;font-weight:700;font-size:1.08rem;text-transform:uppercase;letter-spacing:1px;padding:9px 2px;transition:color .2s ease;white-space:nowrap}
.nav-links a:hover{color:var(--gold)}
.tag-wholesale{order:3;flex:none;background:var(--crimson);color:#fff;font-family:'Cinzel',serif;font-weight:700;
  font-size:.94rem;letter-spacing:1.6px;text-transform:uppercase;padding:13px 32px;border-radius:999px;
  border:2px solid var(--gold);white-space:nowrap;box-shadow:3px 3px 0 rgba(0,0,0,.55);
  transition:transform .14s ease,box-shadow .14s ease}
.tag-wholesale:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,0,0,.55)}
.nav-toggle{order:3;display:none;background:none;border:0;cursor:pointer;padding:8px;margin:-8px}
.nav-toggle span{display:block;width:28px;height:3px;background:#f2e8d6;margin:5px 0;transition:.25s}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1040px){
  .nav{flex-wrap:wrap}
  .nav-toggle{display:block;order:2}
  .tag-wholesale{order:1;margin-left:auto}
  .nav-links{order:4;width:100%;flex-direction:column;gap:0;margin:0;
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav.open .nav-links{max-height:340px;margin-top:8px}
  .nav-links li{width:100%;justify-content:center}
  .nav-links li:not(:last-child)::after{display:none}
  .nav-links a{display:block;width:100%;text-align:center;padding:14px;border-top:1px solid rgba(255,255,255,.08)}
}
@media (max-width:560px){ .tag-wholesale{font-size:.74rem;padding:10px 18px} .brand-txt b{font-size:1rem;letter-spacing:1.8px} .brand img{height:46px} }

.hero{padding:54px 0 34px;text-align:center}
.hero h1{font-size:clamp(3rem,7vw,5rem);color:var(--roast);text-transform:uppercase;line-height:1.02;letter-spacing:1px;text-shadow:3px 3px 0 var(--border)}
.hero .lead{margin:18px auto 0;max-width:760px;font-size:clamp(1rem,2.1vw,1.35rem);font-weight:700;color:var(--rust);text-transform:uppercase;letter-spacing:3px;text-shadow:0 1px 4px rgba(255,255,255,.75)}
.panel{position:relative;margin:28px auto 0;max-width:960px;border:5px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:10px 10px 0 var(--border);background:var(--ink)}
.panel img{width:100%;height:clamp(240px,42vw,440px);object-fit:cover;object-position:center 38%}
.panel .bubble{position:absolute;left:18px;bottom:18px;max-width:min(66%,440px);background:var(--card);border:3px solid var(--border);border-radius:14px;padding:12px 15px;font-family:'Gochi Hand',cursive;font-size:1.12rem;color:var(--roast);line-height:1.32;box-shadow:4px 4px 0 var(--border);text-align:left}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ===== Home limpio: hero-foto + split ===== */
.hero-photo{position:relative;height:min(80vh,660px);min-height:430px;overflow:hidden}
.hero-photo>img,.hero-photo>picture{position:absolute;inset:0;width:100%;height:100%}
.hero-photo>img,.hero-photo>picture>img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.66),rgba(10,8,6,.2) 55%,transparent)}
.hero-photo .hp-inner{position:relative;z-index:2;max-width:1260px;margin:0 auto;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 26px}
.hero-photo h1{color:#fff;font-family:'Cinzel',serif;font-weight:700;text-transform:uppercase;line-height:1.03;font-size:clamp(2.4rem,6vw,4.4rem);text-shadow:0 4px 24px rgba(0,0,0,.55);max-width:15ch}
.hero-photo .sub{color:var(--gold);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-top:14px;font-size:clamp(.9rem,1.8vw,1.15rem)}
.hero-photo .hero-cta{justify-content:flex-start;margin-top:30px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;max-width:1160px;margin:0 auto;padding:0 26px}
.split h2{font-family:'Cinzel',serif;color:var(--rust);text-transform:uppercase;letter-spacing:1px;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px}
.split p{color:var(--text);font-size:1.05rem;margin-bottom:12px;max-width:46ch}
.split img{width:100%;border-radius:14px;box-shadow:0 16px 36px rgba(0,0,0,.22)}
@media (max-width:820px){ .split{grid-template-columns:1fr;gap:22px} .split .split-media{order:-1} }

.picker{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1000px;margin:40px auto 0}
.picker--2{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;max-width:none}
.picker--2 .pick{width:340px;max-width:46vw}
.picker--2 .pick img{height:300px;object-position:center 14%}
.picker--2 .pick b{font-size:1.15rem;padding-top:16px;letter-spacing:2px}
.picker--2 .pick .k{font-size:.7rem;padding-bottom:8px}
.picker--2 .pick .v3d{padding-bottom:16px;font-size:.68rem}
.pick{display:block;text-decoration:none;border:4px solid var(--border);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:7px 7px 0 var(--border);transition:transform .18s ease,box-shadow .18s ease}
.pick:hover{transform:translateY(-7px);box-shadow:10px 12px 0 var(--border)}
.pick img{width:100%;height:210px;object-fit:cover;object-position:center 10%;border-bottom:3px solid var(--border)}
.pick b{display:block;font-family:'Cinzel',serif;text-align:center;padding:10px 6px 2px;color:var(--roast);text-transform:uppercase;letter-spacing:1.5px;font-size:.98rem}
.pick .k{display:block;text-align:center;font-size:.66rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-deep);padding-bottom:6px}
.pick .v3d{display:block;text-align:center;font-size:.64rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--teal);padding-bottom:10px}
.pick.faisan{border-top:8px solid var(--rust)}
.pick.colibri{border-top:8px solid var(--teal)}

.strip{background:var(--roast);border-top:4px solid var(--border);border-bottom:4px solid var(--border);color:#efe2cf}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px;padding:16px 22px;text-align:center}
.strip b{display:block;font-family:'Cinzel',serif;color:var(--gold);font-size:.98rem;letter-spacing:1px}
.strip span{font-size:.68rem;text-transform:uppercase;letter-spacing:1.6px}

.band{padding:70px 0}
.band--alt{background:var(--paper-2);border-top:4px solid var(--border);border-bottom:4px solid var(--border)}
.sec-head{text-align:center;margin-bottom:36px}
.sec-head h2{font-size:clamp(2.3rem,5.2vw,3.4rem);color:var(--roast);text-transform:uppercase;letter-spacing:1px;text-shadow:3px 3px 0 var(--border)}
.sec-head p{max-width:720px;margin:16px auto 0;color:#5b4d3d;font-weight:600;font-size:1.08rem;text-shadow:0 1px 4px rgba(255,255,255,.7)}

.cafe{background:var(--card);border:4px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:8px 8px 0 var(--border);display:grid;grid-template-columns:300px 1fr;margin-bottom:34px}
.cafe__img{border-right:4px solid var(--border);background:var(--ink)}
.cafe__img img{width:100%;height:100%;object-fit:cover;min-height:360px}
.cafe__body{padding:26px}
.cafe__kind{font-size:.7rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.cafe.faisan .cafe__kind{color:var(--rust)}
.cafe.colibri .cafe__kind{color:var(--teal)}
.cafe__body h3{font-size:2.2rem;color:var(--roast);text-transform:uppercase;line-height:1;margin:6px 0 12px}
.cafe__desc{font-weight:500;margin-bottom:14px;font-size:1.02rem}
.specs{width:100%;border-collapse:collapse;font-size:.83rem;margin-bottom:14px}
.specs th,.specs td{text-align:left;padding:7px 6px;border-bottom:1px solid #e3d4bd;vertical-align:top}
.specs th{font-weight:800;white-space:nowrap;width:32%;color:var(--roast)}
.cata{font-size:.86rem;background:#fff;border:2px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:14px}
.cata b{font-family:'Cinzel',serif;text-transform:uppercase;font-size:.72rem;letter-spacing:1px;display:block;margin-bottom:3px;color:var(--gold-deep)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.variants{display:flex;gap:10px;flex-wrap:wrap}
.variants a{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--border);border-radius:9px;padding:8px 14px;font-family:'Cinzel',serif;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;text-decoration:none;color:var(--roast);background:#fff}
.variants a:hover{background:var(--gold)}
.variants a.on{background:var(--roast);color:#fff}
.prep{display:flex;gap:14px;flex-wrap:wrap}
.prep span{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.prep span::before{content:"\25CF";color:var(--gold-deep)}

.story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.story-grid img{border:4px solid var(--border);border-radius:14px;box-shadow:8px 8px 0 var(--border);width:100%}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.step{background:#fff;border:3px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:4px 4px 0 var(--border)}
.step .n{font-family:'Cinzel',serif;font-weight:700;color:var(--crimson);font-size:1.3rem;line-height:1}
.step b{display:block;font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.5px;font-size:.82rem;margin:3px 0;color:var(--roast)}
.step span{font-size:.74rem;color:var(--muted)}
.comic{margin-top:34px;border:4px solid var(--border);border-radius:14px;box-shadow:8px 8px 0 var(--border);width:100%}

.locator{display:grid;grid-template-columns:1fr 1.05fr;gap:28px;align-items:start}
.map-ph{border:4px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:8px 8px 0 var(--border);position:relative;background:#dfeee4}
.map-ph img{width:100%;height:100%;min-height:360px;object-fit:cover}
.map-note{position:absolute;left:12px;bottom:12px;background:#fff;border:2px solid var(--border);border-radius:8px;padding:6px 10px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filters select,.filters input{font-family:inherit;font-size:.85rem;padding:10px 12px;border:3px solid var(--border);border-radius:9px;background:#fff;flex:1;min-width:150px}
.dist-list{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow:auto;padding-right:4px}
.dist{background:var(--card);border:3px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:4px 4px 0 var(--border)}
.dist h4{font-size:1.05rem;color:var(--roast);display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:.5px}
.dist .type{font-size:.58rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--roast);color:#fff;padding:3px 8px;border-radius:12px}
.dist p{font-size:.84rem;color:var(--muted);margin:4px 0 8px}
.dist a{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;text-decoration:none}
.dist a:hover{text-decoration:underline}
.callout{margin-top:20px;background:var(--roast);color:#efe2cf;border:4px solid var(--border);border-radius:14px;padding:20px;text-align:center;box-shadow:6px 6px 0 var(--border)}
.callout b{font-family:'Cinzel',serif;color:var(--gold);font-size:1.05rem;display:block;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}

.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.values{list-style:none;display:flex;flex-direction:column;gap:14px}
.values li{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.values .ic{flex:none;width:38px;height:38px;border:3px solid var(--border);border-radius:9px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:3px 3px 0 var(--border)}
.values b{font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:.5px;color:var(--roast);font-size:.9rem}
.values img{margin-top:18px;border:4px solid var(--border);border-radius:14px;box-shadow:8px 8px 0 var(--border);width:100%}
form.quote{background:var(--card);border:4px solid var(--border);border-radius:18px;padding:26px;box-shadow:8px 8px 0 var(--border)}
.fg{margin-bottom:15px}
.fg label{display:block;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;font-family:inherit;font-size:.9rem;padding:11px 12px;border:3px solid var(--border);border-radius:9px;background:#fff}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.form-msg{margin-top:14px;font-weight:700;color:var(--teal);display:none}

footer{background:var(--ink);color:#cdbfa8;border-top:4px solid var(--border);padding:44px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
footer h5{font-family:'Cinzel',serif;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-size:.95rem}
.foot-logo{width:104px;height:auto;flex:none;filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))}
.foot-brand{display:flex;gap:18px;align-items:flex-start}
@media (max-width:560px){ .foot-brand{flex-direction:column;gap:12px} }
footer a{color:#efe2cf;text-decoration:none}
footer a:hover{color:var(--gold)}
footer p{font-size:.84rem;margin-bottom:5px}
.foot-bottom{text-align:center;margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:.72rem;letter-spacing:.5px}
.foot-legal{font-size:.68rem;color:#8f7f6a;margin-top:6px}
.note{max-width:1180px;margin:18px auto 0;padding:10px 22px;font-size:.72rem;color:var(--muted);text-align:center;font-style:italic}

/* ===== Ficha de producto (detalle) ===== */
.crumb{max-width:1180px;margin:0 auto;padding:18px 22px 0;font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--rust)}
.detail{padding:26px 0 62px;
  min-height:66vh;display:flex;flex-direction:column;justify-content:center}
@media (min-width:1041px){ .detail{ min-height:120vh; } }   /* compensa el zoom 0.62 del body */
.detail h1{font-size:clamp(2.1rem,5vw,3.2rem);color:var(--roast);text-transform:uppercase;letter-spacing:1px;text-shadow:3px 3px 0 var(--border);margin-bottom:6px}
.detail .kind{font-size:.8rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px;display:block}
.detail .gtin{display:block;font-size:.76rem;font-weight:600;letter-spacing:1.4px;color:var(--muted);margin-bottom:22px;font-variant-numeric:tabular-nums}
.viewers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:12px}
.viewer{border:4px solid var(--border);border-radius:16px;box-shadow:8px 8px 0 var(--border);background:var(--card);overflow:hidden}
.viewer h3{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;text-align:center;padding:10px;background:var(--roast);color:#fff}
.viewer model-viewer{width:100%;height:420px;background:transparent;--poster-color:transparent}
.viewer .hint{font-size:.66rem;text-align:center;color:var(--muted);padding:6px 8px 10px;text-transform:uppercase;letter-spacing:.5px}
.detail-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;margin-top:26px}
.detail-cols>img{align-self:start;max-height:440px;object-fit:cover}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gallery img{border:3px solid var(--border);border-radius:12px;box-shadow:4px 4px 0 var(--border);width:100%}
.back-link{display:inline-block;margin-top:26px;font-family:'Cinzel',serif;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--roast);text-decoration:none}

@media (max-width:960px){
  .picker{grid-template-columns:1fr 1fr}
  .cafe{grid-template-columns:1fr}
  .cafe__img{border-right:0;border-bottom:4px solid var(--border)}
  .cafe__img img{min-height:280px;max-height:420px}
  .story-grid,.locator,.form-grid,.viewers,.detail-cols{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .picker--2 .pick{width:100%;max-width:420px}
  .brand-txt b{font-size:1rem;letter-spacing:1.5px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .foot-grid,.picker,.gallery{grid-template-columns:1fr}
  .nav-links{width:100%;justify-content:center}
  .panel .bubble{position:static;max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0}
}

/* ===== Escena de fondo (paisaje + nubes en movimiento + parallax) ===== */
#scene{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none;will-change:transform;background:#e7cdb6}
#scene .scene-img{position:absolute;inset:-2%;
  background:url("bg-scene.jpg") center 32% / cover no-repeat;
  animation:scene-drift 60s ease-in-out infinite alternate;will-change:transform}
@keyframes scene-drift{0%{transform:scale(1.02)}100%{transform:scale(1.08) translateY(-1.2%)}}
#scene .cloud{position:absolute;fill:#fff;filter:blur(3px);will-change:transform}
#scene .cloud.c1{top:6%;width:min(340px,42vw);opacity:.5;animation:cloud-move 70s linear infinite}
#scene .cloud.c2{top:18%;width:min(220px,30vw);opacity:.38;animation:cloud-move 104s linear infinite;animation-delay:-34s}
#scene .cloud.c3{top:2%;width:min(160px,22vw);opacity:.3;animation:cloud-move 150s linear infinite;animation-delay:-88s}
@keyframes cloud-move{from{transform:translateX(-42vw)}to{transform:translateX(150vw)}}
#scene .scene-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(244,233,213,.18) 0%, rgba(244,233,213,.36) 20%, rgba(244,233,213,.60) 44%,
  rgba(244,233,213,.80) 66%, rgba(244,233,213,.90) 100%)}
@media (prefers-reduced-motion:reduce){ #scene .scene-img,#scene .cloud{animation:none} }

/* ===== Banda de pájaros (Lottie) — SIEMPRE detrás del contenido ===== */
#birds-layer{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
#birds-layer .bird{position:absolute;left:0;top:0;width:150px;height:150px;will-change:transform;transform-origin:50% 50%}
#birds-layer .bird svg{display:block;width:100%;height:100%}
@media (max-width:640px){ #birds-layer .bird{width:110px;height:110px} }
@media (prefers-reduced-motion:reduce){#birds-layer{display:none}}

/* ===== Botón flotante de WhatsApp ===== */
.wsp{position:fixed;right:24px;bottom:24px;z-index:900;width:82px;height:82px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 12px 30px rgba(0,0,0,.34);border:3px solid #fff;animation:wsp-breathe 3s ease-in-out infinite}
.wsp svg{width:46px;height:46px;fill:#fff;transition:transform .3s ease}
.wsp::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #25d366;opacity:0}
.wsp:hover{animation:none;transform:scale(1.12)}
.wsp:hover svg{transform:rotate(-8deg) scale(1.06)}
.wsp:hover::before{animation:wsp-ring .9s ease-out infinite}
@keyframes wsp-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes wsp-ring{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@media (prefers-reduced-motion:reduce){.wsp{animation:none}}
@media (max-width:560px){.wsp{width:68px;height:68px;right:16px;bottom:16px} .wsp svg{width:38px;height:38px}}

/* ===== Instagram (mismo estilo/animación que WhatsApp, sin link todavía) ===== */
.ig{position:fixed;right:24px;bottom:120px;z-index:900;width:82px;height:82px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;border:3px solid #fff;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
  box-shadow:0 12px 30px rgba(0,0,0,.34);animation:wsp-breathe 3s ease-in-out infinite}
.ig svg{width:46px;height:46px;fill:#fff;transition:transform .3s ease}
.ig::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #d6249f;opacity:0}
.ig:hover{animation:none;transform:scale(1.12)}
.ig:hover svg{transform:rotate(-8deg) scale(1.06)}
.ig:hover::before{animation:wsp-ring .9s ease-out infinite}
@media (prefers-reduced-motion:reduce){.ig{animation:none}}
@media (max-width:560px){.ig{width:68px;height:68px;right:16px;bottom:96px} .ig svg{width:38px;height:38px}}

/* ===== Encabezado de página interior ===== */
.page-head{text-align:center;padding:60px 0 8px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--roast);text-transform:uppercase;letter-spacing:1px;text-shadow:3px 3px 0 var(--border)}
.page-head p{max-width:700px;margin:16px auto 0;color:#5b4d3d;font-weight:600;font-size:1.06rem;text-shadow:0 1px 4px rgba(255,255,255,.7)}

/* ===== Home ===== */
.home-hero{text-align:center;padding:54px 0 26px}
.home-hero h1{font-size:clamp(2.8rem,7vw,5rem);color:var(--roast);text-transform:uppercase;line-height:1.02;letter-spacing:1px;text-shadow:3px 3px 0 var(--border)}
.home-hero .lead{margin:18px auto 0;max-width:780px;font-size:clamp(1rem,2.1vw,1.35rem);font-weight:700;color:var(--rust);text-transform:uppercase;letter-spacing:3px;text-shadow:0 1px 4px rgba(255,255,255,.75)}
.home-intro{max-width:780px;margin:30px auto 0;background:var(--gold);border:4px solid var(--border);border-radius:16px;box-shadow:9px 9px 0 var(--border);padding:24px 30px;text-align:left}
.home-intro p{font-family:'Cinzel',serif;font-weight:600;color:var(--roast);font-size:1.06rem;line-height:1.55;margin-bottom:12px}
.home-intro p:last-child{margin-bottom:0}
.cta-band{background:var(--roast);border-top:4px solid var(--border);border-bottom:4px solid var(--border);text-align:center;padding:52px 22px;color:#efe2cf}
.cta-band h2{font-size:clamp(1.7rem,4.4vw,2.6rem);color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;text-shadow:2px 2px 0 var(--border)}
.cta-band p{max-width:600px;margin:0 auto 22px;font-weight:500}

/* ===== Hero-foto: texto a la derecha (la chapa de la marca queda libre a la izquierda) ===== */
.hero-photo::after{background:linear-gradient(270deg,rgba(10,8,6,.7),rgba(10,8,6,.22) 55%,transparent)}
.hero-photo .hp-inner{align-items:flex-end;text-align:right}
.hero-photo h1{max-width:16ch}
.hero-photo .hero-cta{justify-content:flex-end}
@media (max-width:760px){
  .hero-photo::after{background:linear-gradient(0deg,rgba(10,8,6,.82),rgba(10,8,6,.35) 55%,transparent)}
  .hero-photo .hp-inner{align-items:center;text-align:center;justify-content:flex-end;padding-bottom:36px}
  .hero-photo .hero-cta{justify-content:center}
}

/* ===== Split: imagen un poco más grande + variante media-izquierda ===== */
.split{grid-template-columns:.9fr 1.15fr}
.split.rev .split-media{order:-1}
.split img{box-shadow:0 18px 40px rgba(0,0,0,.24)}
@media (max-width:820px){ .split.rev .split-media{order:-1} }

/* ===== Banda con foto de café + marca (no el paisaje, para que no choque) ===== */
.scene-band{position:relative;min-height:min(56vh,440px);display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;border-top:4px solid var(--border);border-bottom:4px solid var(--border);
  background:#1c130e url("home-espresso.jpg") center 42% / cover no-repeat;background-attachment:fixed}
.scene-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.5),rgba(20,14,10,.66))}
.scene-band .sb-inner{position:relative;z-index:2;max-width:720px;padding:44px 26px}
.scene-band h2{font-family:'Cinzel',serif;text-transform:uppercase;letter-spacing:2px;font-size:clamp(1.8rem,4.5vw,3rem);text-shadow:0 4px 20px rgba(0,0,0,.5)}
.scene-band p{margin-top:14px;font-size:1.06rem;color:#f3e7d0}
@media (max-width:640px){ .scene-band{background-attachment:scroll} }

/* ===== Fondo de cafetal / torre (todas las páginas, detrás del contenido crema) =====
   Va en ::before a z-index:-2 (capa fija) para que las aves (#fx-*, z-index:-1)
   queden POR DELANTE del paisaje y POR DETRÁS del contenido. */
body.scenebg{ background:transparent; }   /* transparente: si no, tapa las aves */
body.scenebg::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(rgba(244,233,213,.56),rgba(244,233,213,.72)),
    url("bg-scene-sq.jpg") center 40% / cover no-repeat #ecdcc0;
}
/* las bandas alternas dejan ver el paisaje por detrás */
body.scenebg .band--alt{background:rgba(236,220,192,.80)}
/* paneles de texto sobre el paisaje: leve fondo crema para legibilidad */
body.scenebg .split>div:not(.split-media){background:rgba(250,244,232,.80);border:1px solid rgba(20,18,16,.08);
  border-radius:16px;padding:26px 30px}
body.scenebg .sec-head h2{text-shadow:2px 2px 0 var(--border),0 2px 12px rgba(255,255,255,.4)}

/* ===== Encabezado con paisaje (páginas interiores) ===== */
.scene-head{position:relative;min-height:min(50vh,420px);display:flex;align-items:flex-end;overflow:hidden;
  border-bottom:4px solid var(--border);
  background:#1c130e url("bg-scene-sq.jpg") center 42% / cover no-repeat}
.scene-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.12) 30%,rgba(20,14,10,.72))}
.scene-head .sh-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:0 26px 34px;color:#fff}
.scene-head h1{font-family:'Cinzel',serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  font-size:clamp(2.2rem,5vw,3.5rem);text-shadow:0 4px 22px rgba(0,0,0,.55)}
.scene-head p{margin-top:12px;max-width:700px;color:#f3e7d0;font-weight:500;font-size:1.06rem;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.scene-head p strong{color:#fff}

/* ===== Intro de video + pantalla de carga ===== */
#intro{position:fixed;inset:0;z-index:6000;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
#intro.out{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#intro .i-skip,#intro .i-sound{position:absolute;top:16px;z-index:4;font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.45);
  border:2px solid rgba(255,255,255,.6);border-radius:20px;padding:8px 16px;cursor:pointer;line-height:1}
#intro .i-skip{right:18px}
#intro .i-sound{left:18px}
#intro .i-skip:hover,#intro .i-sound:hover{background:rgba(0,0,0,.75)}
#intro.sound-on .i-sound{opacity:0;pointer-events:none}   /* al activar el audio, se oculta */

#loader{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;background:radial-gradient(120% 90% at 50% 45%,#241a12,#0e0a07);opacity:0;visibility:hidden;transition:opacity .5s ease}
#loader.show{opacity:1;visibility:visible}
#loader img{width:min(150px,32vw);filter:drop-shadow(0 6px 20px rgba(0,0,0,.6));animation:ld-pulse 1.6s ease-in-out infinite}
#loader .ld-bar{width:min(260px,64vw);height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
#loader .ld-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),#f0c46a);border-radius:99px;transition:width .1s linear}
#loader .ld-txt{font-family:'Cinzel',serif;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-size:.8rem}
@keyframes ld-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){#loader img{animation:none}}

/* ===== Aves (Lottie) — capa POR ENCIMA del contenido, bajo la barra/botones.
   Cada JSON ya trae su vuelo; acá solo se ubican. ===== */
#fx-birds,#fx-birds2,#fx-birds3,#fx-birds4,#fx-flock{position:fixed;z-index:40;pointer-events:none}
#fx-birds svg,#fx-birds2 svg,#fx-birds3 svg,#fx-birds4 svg,#fx-flock svg{width:100%;height:100%;display:block}
/* aves que cruzan el cielo, a distintas alturas */
#fx-birds {top:8%;  left:0;width:100%;height:min(210px,22vh);opacity:.7}
#fx-birds2{top:33%; left:0;width:100%;height:min(190px,20vh);opacity:.55}
#fx-birds3{top:58%; left:0;width:100%;height:min(200px,21vh);opacity:.6}
#fx-birds4{top:78%; left:0;width:100%;height:min(180px,19vh);opacity:.45}
/* BANDADA en arco (lottie 3), abajo a la izquierda (lejos de los botones flotantes) */
#fx-flock{left:0;bottom:16%;width:min(540px,55vw);aspect-ratio:1229/612;opacity:.6}
@media (max-width:640px){
  #fx-birds2,#fx-birds4{display:none}          /* menos aves en celular */
  #fx-birds{opacity:.5} #fx-birds3{opacity:.42}
  #fx-flock{opacity:.4;width:82vw;bottom:22%}
}
@media (prefers-reduced-motion:reduce){ #fx-birds,#fx-birds2,#fx-birds3,#fx-birds4,#fx-flock{display:none} }

/* ===== Pájaro carpintero (Lottie) — posado sobre un título ===== */
/* posado sobre la "C" de CALIDAD, picoteandola desde la izquierda:
   anclado al <h2>, medidas en em para que siga a la letra con cualquier zoom */
#fx-woodpecker{position:absolute;left:-.78em;top:-.06em;width:1.25em;height:1.25em;z-index:20;pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))}
#fx-woodpecker svg{width:100%;height:100%;display:block}
@media (max-width:820px){ #fx-woodpecker{left:-.62em;top:-.04em;width:1.15em;height:1.15em} }
@media (prefers-reduced-motion:reduce){ #fx-woodpecker{display:none} }

/* ============================================================
   ESCALA / RESPONSIVE  (va al final: pisa lo anterior a proposito)
   - Desktop: se veia gigante -> zoom global.
   - Tablet/celular: nada de zoom (descuadra); se corrigen tamanos,
     grillas de 2 columnas que no se colapsaban, y overflow lateral.
   ============================================================ */
@media (min-width:1041px){ body{ zoom: 0.62; } }

/* ---- Tablet (<=1040px) ---- */
@media (max-width:1040px){
  html{ font-size:15px; }
  html,body{ overflow-x:hidden; max-width:100%; }
  .band{ padding:48px 0; }
  .sec-head{ margin-bottom:24px; }
  /* habia un ".split{grid-template-columns:.9fr 1.15fr}" suelto (sin media query)
     que dejaba CALIDAD/Origen en 2 columnas hasta en el celular: se fuerza 1 col */
  .split{ grid-template-columns:1fr !important; gap:22px; }
  .split .split-media{ order:-1; }
  /* el ::before ya es position:fixed (no usa background-attachment), asi que
     no se rompe en iOS/Android. Solo el paisaje de .scene-head pasa a scroll. */
  .scene-head{ background-attachment:scroll; }
  /* paneles translucidos -> mas opacos para que el texto se lea nitido */
  body.scenebg .band--alt{ background:rgba(236,220,192,.95); }
  body.scenebg .split>div:not(.split-media){ background:rgba(250,244,232,.96); }
}

/* ---- Celular (<=600px) ---- */
@media (max-width:600px){
  html{ font-size:13.5px; }
  *{ overflow-wrap:break-word; }
  .band{ padding:34px 0; }
  .wrap{ padding:0 16px; }
  .split{ padding:0 16px; }
  /* header: entra todo si achicamos nombre y pildora */
  .nav{ padding:11px 12px; gap:7px; }
  .brand img{ height:36px; }
  .brand-txt b{ font-size:.72rem; letter-spacing:.6px; }
  .tag-wholesale{ display:inline-block; order:1; margin-left:0; font-size:.54rem; padding:6px 10px;
    letter-spacing:.4px; border-width:1px; box-shadow:2px 2px 0 rgba(0,0,0,.5); }
  .nav-toggle{ margin-left:auto; }   /* hamburguesa siempre a la derecha */
  /* strip de sellos: 1 sola columna en celular (imposible que se desborde) */
  .strip .wrap{ display:grid; grid-template-columns:1fr; gap:12px; padding:16px; }
  .strip b{ font-size:.9rem; }
  .strip span{ font-size:.66rem; }
  /* hero: texto arriba, y la parte de abajo libre para que se vea la chapa
     "Semillas del Ermitaño" sin que la tapen los botones */
  .hero-photo{ height:auto; min-height:86vh; max-height:none; }
  .hero-photo>img,.hero-photo>picture>img{ object-position:center 45%; }
  .hero-photo::after{ background:linear-gradient(180deg,
      rgba(10,8,6,.80) 0%, rgba(10,8,6,.28) 34%, rgba(10,8,6,0) 52%, rgba(10,8,6,.30) 100%); }
  .hero-photo .hp-inner{ width:100%; max-width:100%; padding:76px 16px 0;
    align-items:center; justify-content:flex-start; }
  .hero-photo h1,
  .hero-photo .sub,
  .hero-photo .hero-cta{ width:100%; max-width:100%; align-self:stretch; }
  .hero-photo h1{ font-size:1.5rem; line-height:1.14; letter-spacing:0; white-space:normal; }
  .hero-photo .sub{ font-size:.8rem; letter-spacing:1.1px; margin-top:10px; white-space:normal; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; margin-top:20px; }
  .hero-cta .btn{ width:100%; }
  .btn{ font-size:.82rem; padding:13px 16px; letter-spacing:1px; box-shadow:4px 4px 0 var(--border); }
  .picker--2 .pick{ width:100%; max-width:none; }
  .picker--2 .pick img{ height:170px; padding:12px; }
  .cafe__img img{ max-height:210px; padding:12px; }
  #intro video{ object-fit:contain; }   /* video horizontal: entero, no gigante */
  .cta-band{ padding-left:16px; padding-right:16px; }
  .sec-head h2, .split h2{ font-size:1.7rem; }

  /* titulos: la sombra dura "3px 3px 0" se ve como letra doble en pantallas
     chicas -> sombra suave y simple */
  .sec-head h2, .split h2, .detail h1, .cta-band h2, .hero h1,
  .home-hero h1, .page-head h1, body.scenebg .sec-head h2{
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
  }

  /* visor 3D: marco mas chico para poder scrollear al lado del objeto
     (ademas cada <model-viewer> lleva touch-action="pan-y" para dejar pasar
      el scroll vertical) */
  .viewers{ gap:16px; }
  .viewer{ border-width:3px; box-shadow:5px 5px 0 var(--border); }
  .viewer h3{ padding:8px; font-size:.72rem; }
  .viewer model-viewer{ height:250px; }
  .viewer .hint{ font-size:.6rem; padding:5px 8px 8px; }

  /* fondo de paisaje: versión vertical para celular (el horizontal se agrandaba) */
  body.scenebg::before{
    background-image:
      linear-gradient(rgba(244,233,213,.56),rgba(244,233,213,.72)),
      url("bg-scene-mobile.jpg");
    background-position: center top;
  }
}

/* ===== Página de café (Faisán / Colibrí): minimalista, centrada y que ocupe
   el alto de pantalla para que el footer quede abajo y se vea el paisaje ===== */
.cafe-landing{ text-align:center; max-width:760px;
  align-items:center; padding-top:30px; padding-bottom:56px; }
  /* (min-height + flex centrado ya vienen de .detail) */
.cafe-landing .cl-bird{ width:min(320px,64%); height:auto; margin:2px auto 14px;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.28)); }
.cafe-landing h1{ margin-bottom:4px; }
.cafe-landing .kind{ display:inline-block; margin-bottom:4px; }
.cafe-landing .cl-fmt{ font-family:'Cinzel',serif; text-transform:uppercase; letter-spacing:1px;
  color:var(--roast); font-size:1.25rem; margin:26px 0 16px; }
.cafe-landing .fmt-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cafe-landing .fmt-btns .btn{ font-size:.86rem; padding:14px 24px; }
.cafe-landing .row{ display:flex; justify-content:center; }
.cafe-landing .back-link{ display:inline-block; margin-top:24px; }
@media (max-width:600px){
  .cafe-landing .cl-bird{ width:74%; }
  .cafe-landing .fmt-btns{ flex-direction:column; align-items:stretch; }
  .cafe-landing .fmt-btns .btn{ width:100%; }
}

/* index "Nuestros cafés": imagen = ave sola (PNG transparente), sobre fondo crema */
.picker--2 .pick img{ object-fit:contain; background:var(--card); padding:14px; height:220px; }

/* cafes.html: cada tarjeta muestra la lámina vertical (faisan-solo.jpg / colibri-solo.jpg)
   a marco cerrado (cover). Altura FIJA para que las dos queden idénticas
   (mismo recorte, mismo tamaño), sin importar el largo del texto al lado. */
/* láminas verticales (faisan-solo.jpg / colibri-solo.jpg): a marco cerrado
   (cover, sin bordes). Las dos fuentes tienen el título "Semillas del Ermitaño"
   en la misma posición, así que con el mismo encuadre quedan simétricas. */
.cafe__img{ background:var(--ink); }
.cafe{ min-height:480px; }
.cafe__img img{ width:100%; height:100%; min-height:480px; max-height:none;
  object-fit:cover; object-position:center 28%; display:block; }
@media (min-width:961px){ .cafe{ align-items:stretch; } }
@media (max-width:960px){ .cafe{ min-height:0; } .cafe__img img{ height:420px; min-height:0; } }