@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400 900; font-display:swap; src:url("assets/coffee-market/fonts/playfair-display-f556cda9.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Playfair Display"; font-style:normal; font-weight:400 900; font-display:swap; src:url("assets/coffee-market/fonts/playfair-display-9deeae77.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("assets/coffee-market/fonts/inter-749a3084.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("assets/coffee-market/fonts/inter-1ab1ad55.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --cream:#f5f2e9; --paper:#eee8db; --green:#123324; --coffee:#8a6a3b; --ink:#344638; --font-serif:"Cormorant Garamond", "Playfair Display", "Libre Baskerville", Georgia, serif; --font-sans:"Inter", "DM Sans", "Manrope", Arial, sans-serif; --serif:var(--font-serif); --sans:var(--font-sans); }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--cream); }
body { font-family:var(--font-sans); font-synthesis:none; }

/* ==========================================================================
   FASE 2 · Layout web real
   Tokens de layout y tipografía fluida compartidos por las secciones convertidas.
   ========================================================================== */
:root {
  --gutter:clamp(20px, 7.4vw, 112px);
  --header-h:clamp(64px, 5.4vw, 80px);
  --fs-kicker:clamp(10.5px, .78vw, 12px);
  --ls-kicker:.32em;
}
body { color:var(--green); -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
main > section[id] { scroll-margin-top:var(--header-h); }
/* Foco visible accesible para teclado en enlaces y botones (no afecta al clic con ratón). */
a:focus-visible,button:focus-visible { outline:2px solid #b8924f; outline-offset:3px; border-radius:2px; }
.kicker { margin:0; color:var(--coffee); font-family:var(--font-sans); font-size:var(--fs-kicker); font-weight:700; letter-spacing:var(--ls-kicker); line-height:1.5; }

/* Header ------------------------------------------------------------------ */
.site-header { position:sticky; z-index:50; top:0; background:rgba(245,242,233,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow:0 1px 0 rgba(138,106,59,.16); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--header-h); padding:0 var(--gutter); }
/* Logo completo: la caja recorta solo el margen transparente del PNG 800×800 (tinta en x 32–728, y 284–516 → proporción 3:1). */
.brand { display:block; flex:none; width:clamp(116px, 10.2vw, 152px); aspect-ratio:3 / 1; overflow:hidden; }
.brand img { display:block; width:114.94%; height:auto; max-width:none; transform:translate(-4%, -35.5%); }
.site-nav { display:flex; align-items:center; }
.site-nav a { padding:6px 0; color:var(--coffee); font-size:clamp(10.5px, .8vw, 12px); font-weight:700; letter-spacing:.28em; text-decoration:none; text-transform:uppercase; white-space:nowrap; transition:color .2s ease; }
.site-nav a + a::before { display:inline-block; margin:0 clamp(12px, 1.3vw, 20px); color:rgba(138,106,59,.4); content:"|"; letter-spacing:0; }
.site-nav a:hover { color:var(--green); }
.menu-toggle { display:none; }

/* Hero -------------------------------------------------------------------- */
/* La foto va a sangre; el velo crema de la izquierda sostiene el texto. La parte baja (≈52 unidades del lienzo) queda bajo la curva de perfiles. */
.hero { position:relative; z-index:1; display:flex; align-items:center; min-height:clamp(520px, 43vw, 680px); padding:0 var(--gutter) calc(var(--uw) * 52); overflow:hidden; background:#eee9df; }
.hero__media { position:absolute; inset:0; }
.hero__media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.hero__media::after { position:absolute; inset:0; content:""; background:linear-gradient(to right, rgba(245,242,233,.86) 0%, rgba(245,242,233,.8) 27%, rgba(245,242,233,.5) 40%, rgba(245,242,233,0) 56%); }
.hero__content { position:relative; z-index:1; max-width:560px; }
.hero__title { margin:clamp(14px, 1.3vw, 20px) 0 clamp(16px, 1.4vw, 22px); color:var(--green); font-family:var(--font-serif); font-size:clamp(40px, 3.95vw, 60px); font-weight:500; letter-spacing:-.018em; line-height:.98; text-shadow:0 1px 18px rgba(245,242,233,.45); }
.hero__lead { margin:0; color:var(--ink); font-size:clamp(16px, 1.2vw, 18.5px); line-height:1.5; }
.hero__location { display:inline-flex; align-items:center; gap:7px; margin-top:clamp(28px, 2.6vw, 40px); color:var(--coffee); font-size:clamp(10.5px, .76vw, 11.5px); font-weight:700; letter-spacing:.24em; text-decoration:none; text-transform:uppercase; }
.hero__location svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }
.hero__location:hover { color:var(--green); }

/* Unidades: --uw sigue el ancho de pantalla (curvas y decoración a sangre); --u es la misma escala del diseño aprobado, limitada a 1,75 px para pantallas muy anchas. */
:root { --uw:calc(100vw / 846); --u:min(calc(100vw / 846), 1.75px); }

/* Perfiles ------------------------------------------------------------------
   Sube 52 unidades sobre el final del hero: su curva superior cierra la foto en todo el ancho. */
.profiles { position:relative; z-index:2; margin-top:calc(var(--uw) * -52); padding-top:calc(var(--uw) * 40); }
.profiles__bg { position:absolute; inset:0; overflow:hidden; background:var(--paper); clip-path:polygon(0.00% calc(var(--uw) * 22.0), 6.52% calc(var(--uw) * 25.4), 12.26% calc(var(--uw) * 29.8), 17.79% calc(var(--uw) * 33.0), 23.64% calc(var(--uw) * 33.0), 27.23% calc(var(--uw) * 30.6), 30.22% calc(var(--uw) * 27.1), 32.87% calc(var(--uw) * 23.9), 35.46% calc(var(--uw) * 22.0), 39.39% calc(var(--uw) * 20.3), 42.48% calc(var(--uw) * 19.5), 45.02% calc(var(--uw) * 19.5), 47.28% calc(var(--uw) * 20.0), 50.87% calc(var(--uw) * 20.8), 53.86% calc(var(--uw) * 21.5), 56.51% calc(var(--uw) * 22.2), 59.10% calc(var(--uw) * 23.0), 64.13% calc(var(--uw) * 24.8), 68.78% calc(var(--uw) * 26.6), 73.31% calc(var(--uw) * 27.9), 78.01% calc(var(--uw) * 28.0), 84.18% calc(var(--uw) * 27.5), 90.07% calc(var(--uw) * 26.0), 95.43% calc(var(--uw) * 23.8), 100.00% calc(var(--uw) * 21.0), 100% 100%, 0 100%); }
.profiles__bg::before { position:absolute; inset:0; content:""; background:radial-gradient(ellipse 50% 85% at 48% 45%,rgba(245,242,233,.95),transparent 72%); }
/* Paisaje real a la derecha: la foto va más ancha y anclada a la derecha para dejar fuera la columna de hormigón del borde izquierdo; máscaras separadas (contenedor/imagen) para evitar la línea fina de algunos navegadores. */
/* Encuadre (posición) y fundido van separados: el contenedor define la ventana y el fundido lateral corto; la imagen define el encuadre (más paisaje/cafetal arriba, bandeja de cerezas como parte del conjunto) y solo un fundido inferior suave. */
.profiles-landscape { position:absolute; top:0; right:0; width:calc(var(--uw) * 174); height:calc(var(--uw) * 200); overflow:hidden; -webkit-mask-image:linear-gradient(to right,transparent 0,transparent 6%,rgba(0,0,0,.45) 18%,rgba(0,0,0,.85) 30%,#000 38%); mask-image:linear-gradient(to right,transparent 0,transparent 6%,rgba(0,0,0,.45) 18%,rgba(0,0,0,.85) 30%,#000 38%); }
.profiles-landscape img { position:absolute; top:calc(var(--uw) * -12); right:calc(var(--uw) * -22); display:block; width:calc(var(--uw) * 214); height:auto; max-width:none; -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--uw) * 28),#000 calc(var(--uw) * 56),#000 calc(var(--uw) * 188.5),transparent calc(var(--uw) * 210)); mask-image:linear-gradient(to bottom,transparent calc(var(--uw) * 28),#000 calc(var(--uw) * 56),#000 calc(var(--uw) * 188.5),transparent calc(var(--uw) * 210)); }
.profiles__plant { position:absolute; z-index:1; top:calc(var(--uw) * -160); left:calc(var(--uw) * -14); width:calc(var(--uw) * 230); height:calc(var(--uw) * 440); object-fit:cover; object-position:left center; pointer-events:none; -webkit-mask-image:linear-gradient(to right,#000 0%,#000 50%,transparent 100%),linear-gradient(to bottom,transparent 0%,transparent 19%,#000 35%,#000 83%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,#000 0%,#000 50%,transparent 100%),linear-gradient(to bottom,transparent 0%,transparent 19%,#000 35%,#000 83%,transparent 100%); mask-composite:intersect; }
.profiles__cherries { position:absolute; z-index:4; top:calc(var(--uw) * -38); left:calc(var(--uw) * -6); width:calc(var(--uw) * 172); height:auto; transform:rotate(-2deg); transform-origin:left center; pointer-events:none; }
.profiles__inner { position:relative; z-index:3; width:calc(var(--u) * 846); max-width:100%; min-height:calc(var(--u) * 160); margin:0 auto; padding:0 calc(var(--u) * 150) calc(var(--u) * 24) calc(var(--u) * 190); }
.profiles__intro { text-align:center; }
.profiles__lead { margin:max(6px, calc(var(--u) * 5)) 0 0; color:var(--ink); font-size:max(14px, calc(var(--u) * 8.4)); line-height:1.45; }
.profiles__list { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u) * 4); margin-top:max(18px, calc(var(--u) * 20)); }
/* Selección editorial: sin cajas; el activo se distingue por opacidad y un acento fino en su color */
/* Perfiles como selección editorial clicable: todos nítidos; el activo se marca con su color en la llamada y un subrayado fino. */
.profile { display:flex; flex-direction:column; align-items:center; padding:6px 4px 4px; border:0; border-radius:10px; background:none; color:inherit; font-family:var(--font-sans); text-align:center; cursor:pointer; transition:background-color .3s ease; }
.profile:hover { background:rgba(138,106,59,.06); }
.profile:hover .profile-badge { transform:translateY(-3px); }
.profile:focus-visible { outline:1px solid rgba(138,106,59,.4); outline-offset:4px; }
.profile-badge { transition:transform .3s ease; display:block; width:max(64px, calc(var(--u) * 62)); height:auto; aspect-ratio:1; margin:0 auto max(10px, calc(var(--u) * 7)); object-fit:contain; }
.profile-name { font-size:max(11px, calc(var(--u) * 7.5)); font-weight:700; letter-spacing:.42em; line-height:1.15; }
.profile-line { margin-top:max(5px, calc(var(--u) * 4)); color:var(--ink); font-family:var(--font-serif); font-size:max(14px, calc(var(--u) * 8.8)); font-style:italic; line-height:1.3; }
.profile-cue { display:inline-block; margin-top:max(9px, calc(var(--u) * 7)); padding-bottom:2px; border-bottom:1px solid transparent; color:var(--coffee); font-size:max(10px, calc(var(--u) * 5.8)); font-weight:700; letter-spacing:.24em; text-transform:uppercase; opacity:.75; transition:opacity .25s ease, border-color .25s ease; }
.profile-cue span { display:inline-block; letter-spacing:0; transition:transform .25s ease; }
.profile:hover .profile-cue { opacity:1; }
.profile:hover .profile-cue span { transform:translateX(3px); }
.profile[aria-pressed="true"] .profile-cue { color:currentColor; opacity:1; border-bottom-color:currentColor; }
.essential { color:#6c1726; }.daily { color:#bf7133; }.signature { color:#1f5835; }.exclusive { color:#1c1c1c; }

/* Ficha del café ------------------------------------------------------------
   Escritorio: saco a la izquierda, hoja boutique solapada y polaroid de la productora a la derecha (composición aprobada, en escala real). */
.ficha { position:relative; z-index:3; background:linear-gradient(to bottom,var(--paper) 50%,#eee3d3 86%); }
.ficha::after { position:absolute; inset:0; z-index:0; content:""; background:radial-gradient(ellipse 45% 70% at 55% 42%,rgba(245,242,233,.6),transparent 76%); pointer-events:none; }
.ficha__sack { position:absolute; z-index:1; top:calc(var(--uw) * -18); left:calc(var(--uw) * -12); width:calc(var(--uw) * 338); height:calc(100% + var(--uw) * 18); object-fit:cover; object-position:left center; clip-path:polygon(0.00% 3.66%, 15.03% 1.92%, 29.29% 1.60%, 43.10% 2.54%, 56.80% 4.57%, 68.96% 6.47%, 79.96% 7.66%, 90.17% 8.22%, 100.00% 8.23%, 100% 100%, 0 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 3%,#000 94%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 3%,#000 94%,transparent 100%); }
.ficha__inner { position:relative; z-index:3; display:grid; grid-template-columns:calc(var(--u) * 298) calc(var(--u) * 325) 1fr; width:calc(var(--u) * 846); max-width:100%; min-height:calc(var(--u) * 308); margin:0 auto; padding:calc(var(--u) * 8) 0 0; }
.ficha__inner > .huila-sheet { grid-column:2; align-self:start; }
.ficha__cut { position:absolute; z-index:2; left:0; bottom:0; width:100%; height:calc(var(--uw) * 30); background:#eee3d3; clip-path:polygon(0.00% calc(var(--uw) * 17.0), 10.42% calc(var(--uw) * 9.9), 20.39% calc(var(--uw) * 6.8), 29.92% calc(var(--uw) * 7.7), 39.01% calc(var(--uw) * 13.0), 47.23% calc(var(--uw) * 18.1), 56.00% calc(var(--uw) * 20.8), 65.44% calc(var(--uw) * 20.0), 75.65% calc(var(--uw) * 15.0), 83.18% calc(var(--uw) * 10.2), 89.78% calc(var(--uw) * 7.8), 95.40% calc(var(--uw) * 8.0), 100.00% calc(var(--uw) * 11.0), 100% 100%, 0 100%); pointer-events:none; }
/* Hoja boutique: papel cálido, borde sutil, sin cajas ni sombras */
.huila-sheet { --cafe:#bf7133; position:relative; display:flex; flex-direction:column; min-height:calc(var(--u) * 300); padding:max(22px, calc(var(--u) * 18)) max(24px, calc(var(--u) * 24)) max(18px, calc(var(--u) * 16)); border:1px solid rgba(138,106,59,.16); background:#fffdf8; }
.huila-sheet::after { position:absolute; inset:0; content:""; opacity:.045; background:repeating-radial-gradient(ellipse at 40% 45%,rgba(138,106,59,.12) 0 .45px,transparent .65px 4px); pointer-events:none; }
.huila-sheet .kicker { font-size:max(10px, calc(var(--u) * 6.5)); letter-spacing:.36em; }
.sheet-body { display:flex; flex:1; flex-direction:column; transition:opacity .18s ease; }
.sheet-body.is-changing { opacity:0; }
.huila-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:max(12px, calc(var(--u) * 12)); padding-bottom:max(14px, calc(var(--u) * 12)); border-bottom:1px solid rgba(138,106,59,.2); }
.huila-type-badge { flex:none; display:block; width:max(52px, calc(var(--u) * 46)); height:auto; aspect-ratio:1; object-fit:contain; }
.sheet-name h2 { margin:0 0 max(6px, calc(var(--u) * 4)); color:var(--cafe); font-family:var(--font-serif); font-size:max(34px, calc(var(--u) * 31)); font-weight:500; letter-spacing:-.025em; line-height:.95; }
.sheet-tagline { margin:0; color:var(--ink); font-family:var(--font-serif); font-size:max(15px, calc(var(--u) * 9.5)); font-style:italic; line-height:1.3; }
.huila-facts { display:grid; grid-template-columns:1fr 1fr; gap:max(16px, calc(var(--u) * 13)) max(20px, calc(var(--u) * 18)); margin:max(16px, calc(var(--u) * 15)) 0 max(18px, calc(var(--u) * 12)); }
.huila-facts div { display:grid; grid-template-columns:max(32px, calc(var(--u) * 26)) 1fr; column-gap:max(8px, calc(var(--u) * 6)); align-items:start; align-content:start; }
/* Pictogramas: caja común; cada PNG trae distinto margen interno y proporción, así que se compensa la escala por tipo para igualar el peso óptico (sin deformar ni recolorear). --s en unidades del diseño. */
.profile-info-icon { --k:max(1.23px, var(--u)); position:relative; grid-row:span 2; display:block; width:calc(var(--k) * 26); height:calc(var(--k) * 26); margin-top:calc(var(--k) * -3); }
.profile-info-icon img { position:absolute; top:50%; left:50%; display:block; width:calc(var(--k) * var(--s, 28)); height:calc(var(--k) * var(--s, 28)); max-width:none; object-fit:contain; transform:translate(-50%,-50%); }
.icon-origen { --s:44; } .icon-proceso { --s:42; } .icon-variedad { --s:31; } .icon-altitud { --s:34; } .icon-notas { --s:31; } .icon-puntuacion { --s:33; }
.huila-facts dt { margin:0; color:var(--coffee); font-size:max(9.5px, calc(var(--u) * 5.8)); font-weight:700; letter-spacing:.26em; line-height:1.3; text-transform:uppercase; }
.huila-facts dd[data-field="proceso"] { white-space:pre-line; }
.huila-facts dd { margin:2px 0 0; color:var(--green); font-family:var(--font-serif); font-size:max(16px, calc(var(--u) * 10.5)); font-weight:500; line-height:1.2; }
.sheet-foot { display:flex; justify-content:flex-end; margin-top:auto; padding-top:max(14px, calc(var(--u) * 10)); border-top:1px solid rgba(138,106,59,.14); }
.sheet-link { display:inline-flex; align-items:center; gap:8px; color:var(--cafe); font-size:max(10px, calc(var(--u) * 6.2)); font-weight:700; letter-spacing:.28em; text-decoration:none; text-transform:uppercase; }
.sheet-link span { font-size:1.45em; letter-spacing:0; transition:transform .25s ease; }.sheet-link:hover span { transform:translateX(3px); }
.ficha__producer { position:relative; margin:0; padding:calc(var(--u) * 30) 0 calc(var(--u) * 24) calc(var(--u) * 29); }
.producer-frame { width:calc(var(--u) * 150); padding:calc(var(--u) * 5); background:#f8f3e9; transform:rotate(-2.5deg); box-shadow:0 3px 10px rgba(52,70,56,.12); }
.producer-frame img { display:block; width:100%; aspect-ratio:140 / 176; height:auto; object-fit:cover; object-position:32% 30%; }
.real-note { display:block; width:calc(var(--u) * 114); height:auto; margin:calc(var(--u) * -18) 0 0 calc(var(--u) * 18); }

/* Tablet: se mantiene la composición en tres planos con medidas reales; la polaroid se hace más estrecha. */
@media (max-width:1023px) {
  .profiles__inner { width:auto; padding:0 var(--gutter) 28px; }
  .profiles-landscape { opacity:.55; }
  .profiles__list { max-width:640px; margin-left:auto; margin-right:auto; }
  .ficha__inner { grid-template-columns:24% minmax(0,1fr) 25%; width:auto; padding:10px var(--gutter) 0 0; }
  .ficha__producer { padding:32px 0 44px 22px; }
  .producer-frame { width:100%; max-width:170px; }
  .real-note { width:78%; max-width:140px; margin:-12px 0 0 12%; }
}
@media (max-width:899px) {
  .profiles-landscape { display:none; }
  .profiles__cherries { top:-24px; left:-18px; width:112px; }
  .ficha__sack { width:30%; }
  .ficha__inner { grid-template-columns:12% minmax(0,1fr) 26%; }
  .huila-facts { gap:16px 14px; }
  .huila-facts div { grid-template-columns:30px 1fr; column-gap:6px; }
  .huila-facts dd { font-size:15px; }
}

/* Móvil: perfiles en 2×2 táctil; la ficha va a todo el ancho con el saco como cabecera y la polaroid debajo. */
@media (max-width:767px) {
  .profiles__plant { display:none; }
  .profiles__cherries { top:-30px; left:-22px; width:70px; }
  .profiles__inner { padding:30px var(--gutter) 30px; }
  .profiles__intro { padding:0 12px; }
  .profiles__intro .kicker { letter-spacing:.26em; }
  .profiles__list { grid-template-columns:repeat(2, 1fr); gap:22px 12px; margin-top:24px; }
  .profile { padding:10px 0 4px; }
  .profile-badge { width:72px; }
  .profile-cue { font-size:9.5px; letter-spacing:.2em; margin-top:8px; }
  .ficha { padding-bottom:calc(var(--uw) * 30); }
  .ficha__sack { position:relative; top:0; left:0; display:block; width:100%; height:200px; object-position:30% 55%; clip-path:none; -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%); mask-image:linear-gradient(to bottom,#000 70%,transparent 100%); }
  .ficha__inner { display:block; width:auto; margin-top:-56px; padding:0 var(--gutter); }
  .huila-sheet { min-height:0; padding:22px 20px 18px; }
  .huila-facts { gap:18px 14px; }
  .ficha__producer { display:flex; flex-direction:column; align-items:center; padding:28px 0 6px; }
  .sheet-foot { justify-content:space-between; }
  .sheet-link { letter-spacing:.18em; }
  .producer-frame { width:62%; max-width:230px; }
  .real-note { width:52%; max-width:180px; margin:-10px 0 0; }
}
@media (max-width:389px) {
  .huila-facts { grid-template-columns:1fr; }
}

/* Experiencia sensorial -----------------------------------------------------
   Escritorio: composición aprobada (imagen compuesta sin texto + etiquetas HTML bajo cada icono) en escala real.
   Centros de icono medidos en el asset (x 447/674/892/1117 sobre 1942). */
/* Arranca con el mismo crema en que termina la ficha y pasa muy suavemente al crema cálido propio de la imagen sensorial. */
.sensorial { position:relative; z-index:2; background:#eee3d3; }
.sensorial__inner { position:relative; width:calc(var(--u) * 846); max-width:100%; height:calc(var(--u) * 280); margin:0 auto; }
.sensorial-copy { position:absolute; z-index:2; top:calc(var(--u) * 84); left:calc(var(--u) * 45); width:calc(var(--u) * 210); }
.sensorial-copy h2 { margin:max(10px, calc(var(--u) * 8)) 0 max(12px, calc(var(--u) * 10)); color:var(--green); font-family:var(--font-serif); font-size:max(30px, calc(var(--u) * 27)); font-weight:500; letter-spacing:-.025em; line-height:.96; }
.sensorial-lead { margin:0; color:var(--ink); font-size:max(14px, calc(var(--u) * 8.5)); line-height:1.5; }
.sensorial-visual { position:absolute; z-index:1; top:calc(var(--u) * -10); right:0; width:calc(var(--u) * 700); aspect-ratio:1942 / 809; clip-path:polygon(0 0, 74.3% 0, 83.6% .7%, 91.4% 2.5%, 100% 6.9%, 100% 100%, 0 100%); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%); mask-image:linear-gradient(to right,transparent 0,#000 7%); }
.sensorial-visual img { display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 5%,rgba(0,0,0,.5) 14%,#000 26%,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,transparent 5%,rgba(0,0,0,.5) 14%,#000 26%,#000 78%,transparent 100%); }
/* Fundido solo en la base de la persona para que el retrogusto se lea; no toca los óvalos. */
.sensorial-visual::after { position:absolute; top:0; right:0; bottom:0; left:63.7%; content:""; background:linear-gradient(to bottom,rgba(238,227,211,0) 0%,rgba(238,227,211,0) 58%,rgba(238,227,211,.82) 80%,#eee3d3 90%); -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18.8%); mask-image:linear-gradient(to right,transparent 0,#000 18.8%); pointer-events:none; }
.sensorial-labels { position:absolute; z-index:2; top:calc(var(--u) * 208); left:0; right:0; }
.senses { margin:0; padding:0; list-style:none; }
.sense { position:absolute; top:0; width:calc(var(--u) * 78); margin-left:calc(var(--u) * -39); text-align:center; }
.sense-aroma { left:calc(var(--u) * 307); }.sense-acidez { left:calc(var(--u) * 389); }.sense-sabor { left:calc(var(--u) * 468); }.sense-cuerpo { left:calc(var(--u) * 549); }
.sense h3,.aftertaste .kicker { margin:0 0 max(4px, calc(var(--u) * 3)); color:var(--green); font-family:var(--font-sans); font-size:max(10px, calc(var(--u) * 6.8)); font-weight:700; letter-spacing:.34em; line-height:1.3; text-transform:uppercase; }
.sense p,.aftertaste p:last-child { margin:0; color:var(--ink); font-size:max(11.5px, calc(var(--u) * 7.3)); line-height:1.35; }
/* Retrogusto como quinta columna: misma etiqueta y microcopy; solo "Lo que permanece." lleva un acento serif. */
.aftertaste { position:absolute; top:0; left:calc(var(--u) * 648); width:calc(var(--u) * 150); text-align:center; }
.aftertaste h3 { margin:0 0 2px; color:var(--green); font-family:var(--font-serif); font-size:max(16px, calc(var(--u) * 11.5)); font-weight:500; line-height:1.25; }

/* Métodos -------------------------------------------------------------------
   Fondo de mármol verde a sangre; la curva superior sube 26 unidades sobre el final de sensorial. */
.methods { position:relative; z-index:3; color:var(--cream); background:var(--green) url("assets/coffee-market/canonical/metodos/fondo-marmol-verde.webp") center top / cover no-repeat; }
.methods::before { position:absolute; top:calc(var(--uw) * -26); left:0; width:100%; height:calc(var(--uw) * 40); content:""; background:var(--green) url("assets/coffee-market/canonical/metodos/fondo-marmol-verde.webp") center top / 100% auto no-repeat; clip-path:polygon(0.00% calc(var(--uw) * 9.0), 5.90% calc(var(--uw) * 17.5), 12.27% calc(var(--uw) * 23.2), 18.93% calc(var(--uw) * 26.5), 25.72% calc(var(--uw) * 27.8), 32.46% calc(var(--uw) * 27.5), 39.01% calc(var(--uw) * 26.0), 49.66% calc(var(--uw) * 24.1), 60.26% calc(var(--uw) * 23.5), 70.70% calc(var(--uw) * 23.9), 80.88% calc(var(--uw) * 25.2), 90.68% calc(var(--uw) * 27.3), 100.00% calc(var(--uw) * 30.0), 100% 100%, 0 100%); pointer-events:none; }
.methods__inner { position:relative; z-index:1; display:flex; align-items:flex-start; width:calc(var(--u) * 846); max-width:100%; min-height:calc(var(--u) * 200); margin:0 auto; padding:calc(var(--u) * 24) 0 calc(var(--u) * 26) calc(var(--u) * 45); }
.methods-copy { flex:none; width:calc(var(--u) * 205); margin:calc(var(--u) * 1) calc(var(--u) * 30) 0 0; }
.methods-copy .kicker { color:#e5d8bb; }
.methods-copy h2 { margin:max(10px, calc(var(--u) * 8)) 0 max(12px, calc(var(--u) * 11)); color:var(--cream); font-family:var(--font-serif); font-size:max(30px, calc(var(--u) * 27)); font-weight:500; letter-spacing:-.025em; line-height:.96; }
.methods-copy p:not(.kicker) { margin:0; font-size:max(13.5px, calc(var(--u) * 8)); line-height:1.45; }
.methods__list { display:flex; gap:calc(var(--u) * 8); margin:0; padding:0; list-style:none; }
.method { position:relative; flex:none; width:calc(var(--u) * 120); color:var(--cream); text-align:center; }
.method.espresso { margin-left:calc(var(--u) * 21); }
.method:not(.espresso)::after { position:absolute; bottom:calc(var(--u) * 2); right:calc(var(--u) * -4); width:1px; height:calc(var(--u) * 48); content:""; background:rgba(245,242,233,.25); }
.method.moka::after { right:calc(var(--u) * -15); }
.method-frame { position:relative; display:block; width:100%; aspect-ratio:6 / 5; overflow:hidden; border:1px solid rgba(245,242,233,.48); border-radius:5px; box-shadow:0 5px 14px rgba(0,0,0,.16); }
/* Cada foto se amplía 1,3x y se desplaza para que el utensilio del método quede en el centro (centros medidos en el asset, sin contar el asa). */
.method-frame img { position:absolute; left:var(--x); top:var(--y); display:block; width:130%; height:117%; max-width:none; object-fit:cover; }
.filter .method-frame img { --x:-20%; --y:-8%; }.press .method-frame img { --x:-22.5%; --y:-4%; }.moka .method-frame img { --x:-25%; --y:-11%; }.espresso .method-frame img { --x:-10%; --y:0%; width:111.7%; height:101%; }
.method h3 { margin:max(8px, calc(var(--u) * 7)) 0 max(5px, calc(var(--u) * 4)); font-family:var(--font-serif); font-size:max(17px, calc(var(--u) * 13)); font-weight:500; letter-spacing:-.01em; line-height:1.05; }
.method p { margin:0; font-size:max(11.5px, calc(var(--u) * 7.3)); line-height:1.4; opacity:.9; }

/* Tablet: texto arriba y el resto apilado; las cuatro tarjetas en fila; la imagen sensorial completa con las etiquetas alineadas a sus iconos. */
@media (max-width:1023px) {
  .sensorial__inner { width:auto; height:auto; padding:48px 0 34px; }
  .sensorial-copy { position:static; width:auto; padding:0 var(--gutter); }
  .sensorial-visual { position:relative; top:0; width:100%; margin-top:18px; clip-path:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%); mask-image:linear-gradient(to bottom,transparent 0,#000 14%); }
  .sensorial-visual::after { background:linear-gradient(to bottom,rgba(238,227,211,0) 0%,rgba(238,227,211,0) 70%,#eee3d3 100%); }
  .sensorial-labels { position:relative; top:0; height:84px; margin-top:-16px; }
  .sense { width:12%; margin-left:-6%; }
  .sense-aroma { left:23%; }.sense-acidez { left:34.7%; }.sense-sabor { left:45.9%; }.sense-cuerpo { left:57.5%; }
  .aftertaste { left:auto; right:3%; width:26%; }
  .methods__inner { display:block; width:auto; min-height:0; padding:52px var(--gutter) 44px; }
  .methods-copy { width:auto; margin:0 0 26px; }
  .methods__list { gap:16px; }
  .method { flex:1 1 0; width:auto; }
  .method.espresso { margin-left:0; }
  .method:not(.espresso)::after { display:none; }
}

/* Móvil: sensorial en orden de lectura (título, imagen, cuatro sensaciones en 2×2, retrogusto); métodos como tarjetas horizontales con la chuleta al lado de la foto. */
@media (max-width:767px) {
  .sensorial__inner { padding:44px 0 36px; overflow:hidden; }
  .sensorial-lead br { display:none; }
  .sensorial-visual { width:130%; margin-left:-20%; }
  .sensorial-labels { height:auto; margin-top:6px; padding:0 var(--gutter); }
  .senses { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; }
  .sense,.aftertaste { position:static; width:auto; margin:0; }
  .aftertaste { margin-top:24px; padding-top:18px; border-top:1px solid rgba(138,106,59,.22); }
  .methods__inner { padding:48px var(--gutter) 40px; }
  .methods__list { flex-direction:column; gap:14px; }
  .method { display:grid; grid-template-columns:42% 1fr; align-items:center; gap:16px; text-align:left; }
  .method h3 { margin-top:0; font-size:19px; }
  .method p { font-size:13.5px; }
}

/* Tecnología -----------------------------------------------------------------
   Escritorio: pantalla real de la S7X a la izquierda con el detalle de la ventana del tambor, texto y nota manuscrita a la derecha. */
.stronghold { position:relative; z-index:4; background:#ebe5d9; }
.stronghold::before { position:absolute; top:calc(var(--uw) * -18); left:0; width:100%; height:calc(var(--uw) * 26); content:""; background:#ebe5d9; clip-path:polygon(0.00% calc(var(--uw) * 16.0), 9.03% calc(var(--uw) * 12.2), 16.88% calc(var(--uw) * 10.3), 23.94% calc(var(--uw) * 9.9), 30.60% calc(var(--uw) * 10.4), 37.27% calc(var(--uw) * 11.3), 44.33% calc(var(--uw) * 12.0), 54.26% calc(var(--uw) * 12.6), 63.96% calc(var(--uw) * 11.8), 73.40% calc(var(--uw) * 10.5), 82.57% calc(var(--uw) * 9.6), 91.44% calc(var(--uw) * 9.8), 100.00% calc(var(--uw) * 12.0), 100% 100%, 0 100%); pointer-events:none; }
.stronghold__inner { position:relative; z-index:1; width:calc(var(--u) * 846); max-width:100%; min-height:calc(var(--u) * 201); margin:0 auto; }
/* La foto sube por debajo del final de métodos y su borde superior sigue la misma curva (sin franja crema encima). */
.stronghold-media { position:absolute; top:calc(var(--uw) * -18); bottom:0; left:0; width:calc(var(--u) * 362); clip-path:polygon(0% calc(var(--uw) * 16), 21.1% calc(var(--uw) * 12.2), 39.4% calc(var(--uw) * 10.3), 55.9% calc(var(--uw) * 9.9), 71.5% calc(var(--uw) * 10.4), 87.1% calc(var(--uw) * 11.3), 100% calc(var(--uw) * 11.9), 100% 100%, 0 100%); }
.stronghold-zoom { position:absolute; inset:0; overflow:hidden; }
.stronghold-photo { position:absolute; top:-16%; left:-69%; width:200%; height:200%; max-width:none; object-fit:cover; }
.stronghold-detail { position:absolute; z-index:3; top:calc(var(--u) * 88 + var(--uw) * 18); left:calc(var(--u) * 250); width:calc(var(--u) * 96); margin:0; padding:calc(var(--u) * 4); background:#f8f3e9; transform:rotate(2.5deg); box-shadow:0 3px 10px rgba(52,70,56,.18); }
.stronghold-detail img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; object-position:center 62%; }
.stronghold-copy { position:relative; z-index:2; width:calc(var(--u) * 360); margin-left:calc(var(--u) * 390); padding:calc(var(--u) * 22) 0 calc(var(--u) * 24); }
.stronghold-copy h2 { margin:max(8px, calc(var(--u) * 6)) 0 max(10px, calc(var(--u) * 7)); color:var(--green); font-family:var(--font-serif); font-size:max(28px, calc(var(--u) * 25)); font-weight:500; letter-spacing:-.025em; line-height:.98; }
.stronghold-copy > p:not(.kicker) { margin:0; color:var(--ink); font-size:max(14px, calc(var(--u) * 8.5)); line-height:1.45; }
/* Tres claims como sistema: pictograma fino encima, titular corto debajo; columnas iguales separadas por filetes finos. */
.stronghold-bullets { display:grid; grid-template-columns:repeat(3, 1fr); margin:max(16px, calc(var(--u) * 13)) 0 0; padding:max(12px, calc(var(--u) * 9)) 0 0; border-top:1px solid rgba(138,106,59,.2); list-style:none; }
.stronghold-bullets li { display:flex; align-items:center; gap:max(8px, calc(var(--u) * 6)); padding:0 max(10px, calc(var(--u) * 8)); color:var(--green); font-size:max(12.5px, calc(var(--u) * 7.2)); font-weight:600; line-height:1.25; }
.stronghold-bullets li:first-child { padding-left:0; }
.stronghold-bullets li + li { border-left:1px solid rgba(138,106,59,.18); }
.stronghold-bullets img { flex:none; display:block; width:max(28px, calc(var(--u) * 19)); height:auto; opacity:.92; }

/* Preguntas frecuentes (acordeón editorial aprobado) ------------------------ */
.faq { position:relative; z-index:5; background:var(--cream); }
/* Unión tecnología → FAQ: curva crema suave que entra sobre el final de tecnología (mismo lenguaje que el resto de transiciones). */
.faq::before { position:absolute; top:calc(var(--uw) * -16); left:0; width:100%; height:calc(var(--uw) * 17); content:""; background:var(--cream); clip-path:polygon(0 calc(var(--uw) * 6), 12% calc(var(--uw) * 11), 26% calc(var(--uw) * 14), 42% calc(var(--uw) * 14.5), 58% calc(var(--uw) * 12.5), 74% calc(var(--uw) * 9), 88% calc(var(--uw) * 7.5), 100% calc(var(--uw) * 9), 100% 100%, 0 100%); pointer-events:none; }
.faq__inner { display:flex; align-items:flex-start; width:calc(var(--u) * 846); max-width:100%; min-height:calc(var(--u) * 151); margin:0 auto; padding:calc(var(--u) * 42) 0 calc(var(--u) * 30) calc(var(--u) * 70); }
.faq-copy { flex:none; width:calc(var(--u) * 230); margin-right:calc(var(--u) * 80); }
.faq-copy h2 { margin:max(8px, calc(var(--u) * 7)) 0; color:var(--green); font-family:var(--font-serif); font-size:max(32px, calc(var(--u) * 30)); font-weight:500; letter-spacing:-.025em; line-height:.96; }
.faq-copy > p:last-child { margin:0; color:var(--ink); font-size:max(14px, calc(var(--u) * 8.5)); line-height:1.4; }
.faq-list { flex:none; width:calc(var(--u) * 410); margin-top:calc(var(--u) * 4); border-top:1px solid rgba(138,106,59,.18); }
/* Numeración sutil, fila entera clicable, +/− dibujado en CSS y banda cálida para la pregunta abierta. */
.faq-item { margin:0; border-bottom:1px solid rgba(138,106,59,.18); border-radius:2px; transition:background-color .25s ease; }
.faq-item.open { background:rgba(138,106,59,.075); border-bottom-color:transparent; }
.faq-question { display:grid; grid-template-columns:max(34px, calc(var(--u) * 22)) 1fr 14px; align-items:center; width:100%; min-height:48px; margin:0; padding:max(8px, calc(var(--u) * 5)) max(14px, calc(var(--u) * 10)) max(8px, calc(var(--u) * 5)) max(12px, calc(var(--u) * 8)); border:0; background:none; color:var(--ink); font-family:var(--font-sans); text-align:left; cursor:pointer; }
.faq-question:hover .faq-q { color:var(--green); }
.faq-question:focus-visible { outline:1px solid rgba(138,106,59,.45); outline-offset:-1px; }
.faq-num { color:var(--coffee); font-family:var(--font-serif); font-size:max(14px, calc(var(--u) * 8.5)); font-style:italic; line-height:1; }
.faq-q { font-size:max(15px, calc(var(--u) * 8.8)); font-weight:600; line-height:1.25; transition:color .2s ease; }
.faq-item.open .faq-q { color:var(--green); font-family:var(--font-serif); font-size:max(19px, calc(var(--u) * 11.5)); font-weight:500; letter-spacing:-.005em; }
.faq-icon { position:relative; width:12px; height:12px; justify-self:end; }
.faq-icon::before,.faq-icon::after { position:absolute; top:5.5px; left:0; width:12px; height:1px; content:""; background:var(--coffee); transition:transform .25s ease; }
.faq-icon::after { transform:rotate(90deg); }
.faq-item.open .faq-icon::after { transform:rotate(0deg); }
.faq-answer { display:none; margin:0; padding:0 max(34px, calc(var(--u) * 26)) max(14px, calc(var(--u) * 8)) max(46px, calc(var(--u) * 30)); color:rgba(18,51,36,.82); font-size:max(14px, calc(var(--u) * 8)); line-height:1.5; }
.faq-item.open .faq-answer { display:block; }

/* Cierre --------------------------------------------------------------------
   Paisaje a sangre con curva crema superior; WhatsApp como llamada principal, B2B secundario, logo como firma. */
.cta { position:relative; z-index:3; overflow:hidden; background:var(--cream); }
.cta::before { position:absolute; z-index:2; top:-2px; left:0; width:100%; height:calc(var(--uw) * 22 + 2px); content:""; background:var(--cream); clip-path:polygon(0 0, 100% 0, 100.00% calc(var(--uw) * 5.0), 92.02% calc(var(--uw) * 9.3), 82.86% calc(var(--uw) * 12.7), 72.80% calc(var(--uw) * 15.1), 62.11% calc(var(--uw) * 16.5), 51.06% calc(var(--uw) * 17.0), 39.93% calc(var(--uw) * 16.5), 28.99% calc(var(--uw) * 15.1), 18.50% calc(var(--uw) * 12.7), 8.75% calc(var(--uw) * 9.3), 0.00% calc(var(--uw) * 5.0)); }
.cta::after { position:absolute; z-index:1; inset:0; content:""; background:radial-gradient(ellipse 62% 118% at 4% 52%,rgba(18,51,36,.64),rgba(18,51,36,.3) 58%,transparent 100%), radial-gradient(ellipse 34% 42% at 14% 88%,rgba(18,51,36,.42),transparent 100%); pointer-events:none; }
.cta-landscape { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:60% 42%; }
.cta__inner { position:relative; z-index:3; width:calc(var(--u) * 846); max-width:100%; display:flex; align-items:center; min-height:calc(var(--u) * 236); margin:0 auto; padding:calc(var(--u) * 40) calc(var(--u) * 45) calc(var(--u) * 34); }
.cta-copy { width:calc(var(--u) * 330); color:var(--cream); text-shadow:0 1px 12px rgba(18,51,36,.35); }
.cta-copy .kicker { color:#ecdcb6; }
.cta-copy h2 { margin:max(8px, calc(var(--u) * 6)) 0; color:var(--cream); font-family:var(--font-serif); font-size:max(34px, calc(var(--u) * 31)); font-weight:500; letter-spacing:-.025em; line-height:.94; }
.cta-copy > p:not(.kicker):not(.cta-b2b) { margin:0; font-size:max(14px, calc(var(--u) * 8.5)); line-height:1.4; }
.whatsapp { display:inline-flex; align-items:center; min-height:44px; margin-top:max(16px, calc(var(--u) * 13)); padding:max(12px, calc(var(--u) * 9)) max(22px, calc(var(--u) * 16)); border-radius:99px; color:var(--green); background:var(--cream); box-shadow:0 2px 8px rgba(0,0,0,.18); font-size:max(14px, calc(var(--u) * 9)); font-weight:700; text-decoration:none; text-shadow:none; }
.whatsapp span { margin-left:8px; transition:transform .25s ease; }
.whatsapp:hover span { transform:translateX(3px); }
/* B2B como nota secundaria bajo la llamada principal: misma columna, filete fino, sin caja. */
.cta-b2b { max-width:max(360px, calc(var(--u) * 280)); margin:max(22px, calc(var(--u) * 18)) 0 0; padding:max(14px, calc(var(--u) * 10)) max(18px, calc(var(--u) * 13)); border:1px solid rgba(236,220,182,.22); border-radius:6px; background:rgba(18,51,36,.46); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:rgba(245,242,233,.92); font-size:max(13px, calc(var(--u) * 7.4)); line-height:1.5; text-shadow:none; }
.cta-b2b-title { color:var(--cream); font-family:var(--font-serif); font-size:1.18em; font-style:italic; }
.cta-b2b-link { display:inline-block; margin-top:8px; color:#ecdcb6; font-size:max(10.5px, calc(var(--u) * 6)); font-weight:700; letter-spacing:.22em; text-decoration:none; text-transform:uppercase; border-bottom:1px solid rgba(236,220,182,.5); }
.cta-b2b-link span { margin-left:4px; }

/* Pie ------------------------------------------------------------------------
   Una sola franja: dirección, teléfono e Instagram con iconos finos dorados; isotipo y marca a la derecha. */
.footer { color:var(--cream); background:var(--green); }
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:20px 40px; width:calc(var(--u) * 846); max-width:100%; min-height:max(92px, calc(var(--u) * 54)); margin:0 auto; padding:22px calc(var(--u) * 45); }
.footer__inner > a { display:inline-flex; align-items:flex-start; gap:10px; color:rgba(245,242,233,.82); font-size:max(13px, calc(var(--u) * 7.4)); line-height:1.45; text-decoration:none; transition:color .2s ease; }
.footer__inner > a:hover { color:var(--cream); }
.footer__inner small { display:block; color:rgba(245,242,233,.56); font-size:.92em; }
.footer__inner span { display:block; }
.footer__inner svg { flex:none; width:15px; height:15px; margin-top:2px; fill:none; stroke:#d8bd86; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.footer__brand { display:inline-flex !important; align-items:center; gap:10px; font-size:max(13.5px, calc(var(--u) * 7.8)); font-weight:700; white-space:nowrap; }
/* Isotipo monocromo crema directo sobre el verde, sin círculo; alineado ópticamente con el texto. */
.footer__brand img { width:26px; height:26px; margin-top:-2px; opacity:.92; }

/* Acceso flotante a WhatsApp: discreto, en colores BMC; aparece tras el hero y se oculta al llegar al cierre. */
.wa-float { position:fixed; z-index:60; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px 0 14px; border:1px solid rgba(216,189,134,.45); border-radius:99px; color:var(--cream); background:rgba(18,51,36,.94); box-shadow:0 8px 24px rgba(18,51,36,.22); font-size:13.5px; font-weight:700; letter-spacing:.02em; text-decoration:none; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s ease, transform .3s ease, background-color .2s ease; }
.wa-float.is-visible { opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover { background:var(--green); }
.wa-float svg { width:17px; height:17px; fill:none; stroke:#d8bd86; stroke-width:1.6; stroke-linejoin:round; }
.wa-float__short { display:none; }

@media (max-width:1023px) {
  .stronghold__inner { display:grid; grid-template-columns:44% 1fr; align-items:center; width:auto; min-height:0; }
  .stronghold-media { position:relative; inset:auto; grid-row:1 / span 2; width:auto; height:100%; min-height:360px; clip-path:none; }
  .stronghold-detail { top:auto; bottom:34px; left:auto; right:-18px; width:120px; padding:5px; }
  .stronghold-copy { width:auto; margin:0; padding:48px var(--gutter) 40px 48px; }
  .stronghold-bullets { grid-template-columns:1fr; gap:12px; }
  .stronghold-bullets li { padding:0; }
  .stronghold-bullets li + li { border-left:0; }
  .faq__inner { display:block; width:auto; padding:64px var(--gutter) 60px; }
  .faq-copy { width:auto; margin:0 0 26px; }
  .faq-copy h2 br { display:none; }
  .faq-list { width:auto; margin-top:0; }
  .cta__inner { display:block; width:auto; min-height:0; padding:80px var(--gutter) 56px; }
  .cta-copy { width:auto; max-width:440px; }
  .cta::after { background:linear-gradient(to bottom,rgba(18,51,36,.22) 0%,rgba(18,51,36,.46) 50%,rgba(18,51,36,.62) 100%); }
  .footer__inner { width:auto; padding:22px var(--gutter); gap:18px 28px; }
}
@media (max-width:899px) {
  .footer__inner { flex-direction:column; align-items:flex-start; gap:14px; padding:26px var(--gutter) calc(92px + env(safe-area-inset-bottom)); }
  .footer__brand { order:-1; margin:0 0 4px; }
  .wa-float { left:50%; right:auto; transform:translate(-50%, 10px); }
  .wa-float.is-visible { transform:translate(-50%, 0); }
  .wa-float__long { display:none; }
  .wa-float__short { display:inline; }
}
@media (max-width:767px) {
  .stronghold__inner { display:block; }
  .stronghold-media { height:auto; aspect-ratio:4 / 3; min-height:0; }
  .stronghold-photo { top:-10%; left:-40%; width:170%; height:170%; }
  .stronghold-detail { bottom:-26px; right:18px; width:104px; }
  .stronghold-copy { padding:44px var(--gutter) 34px; }
  .cta-copy > p:not(.kicker):not(.cta-b2b) br { display:none; }
  .cta-b2b { max-width:none; }
  .whatsapp { display:flex; justify-content:center; width:100%; }
}

/* Tablet horizontal y vertical: menú compacto, el velo cubre más para que el texto no pise la bolsa. */
@media (max-width:1023px) {
  .menu-toggle { display:inline-flex; align-items:center; gap:10px; padding:10px 0; border:0; background:none; color:var(--coffee); font:700 11px/1 var(--font-sans); letter-spacing:.28em; text-transform:uppercase; cursor:pointer; }
  .menu-toggle span { position:relative; width:18px; height:1.5px; background:currentColor; transition:background .2s ease; }
  .menu-toggle span::before,.menu-toggle span::after { position:absolute; left:0; width:18px; height:1.5px; content:""; background:currentColor; transition:transform .25s ease; }
  .menu-toggle span::before { top:-6px; } .menu-toggle span::after { top:6px; }
  .site-header[data-open="true"] .menu-toggle span { background:transparent; }
  .site-header[data-open="true"] .menu-toggle span::before { transform:translateY(6px) rotate(45deg); }
  .site-header[data-open="true"] .menu-toggle span::after { transform:translateY(-6px) rotate(-45deg); }
  .site-nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; padding:8px var(--gutter) 22px; background:rgba(245,242,233,.98); box-shadow:0 14px 30px rgba(52,40,25,.08); }
  .site-header[data-open="true"] .site-nav { display:flex; }
  .site-nav a { padding:15px 0; border-bottom:1px solid rgba(138,106,59,.16); font-size:12.5px; }
  .site-nav a + a::before { display:none; }
  .hero { min-height:clamp(480px, 62vw, 620px); }
  .hero__media img { object-position:62% 60%; }
  .hero__media::after { background:linear-gradient(to right, rgba(245,242,233,.9) 0%, rgba(245,242,233,.84) 34%, rgba(245,242,233,.45) 46%, rgba(245,242,233,0) 58%); }
  .hero__content { max-width:430px; }
}

/* Móvil: la foto pasa a cabecera (encuadre en bolsa y taza) y el texto va debajo sobre crema, sin velo. */
@media (max-width:767px) {
  .hero { display:block; min-height:0; padding:0 0 calc(var(--uw) * 52 + 18px); background:var(--cream); }
  .hero__media { position:relative; height:clamp(250px, 68vw, 400px); }
  .hero__media img { object-position:56% 58%; }
  .hero__media::after { background:linear-gradient(to bottom, rgba(245,242,233,0) 70%, var(--cream) 100%); }
  .hero__content { max-width:none; margin-top:-8px; padding:0 var(--gutter); }
  .hero__title { font-size:clamp(34px, 9.4vw, 42px); }
  .hero__lead { font-size:16px; }
  .hero__lead br { display:none; }
}

h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--font-serif); font-weight:500; letter-spacing:-.025em; }