/* 
  Guía de estilos basada en la maqueta 1920x10939 px y tipografías del cliente:
  - Titulares: PP Telegraf UltraBold (OTF)
  - Subtitulares: PP Telegraf Regular / Myanmar MN Bold
  - Cuerpo: Noto Serif Regular
*/

/* @font-face {
  font-family: 'PP Telegraf';
  src: url('fonts/PPTelegraf-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Telegraf';
  src: url('fonts/PPTelegraf-UltraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('fonts/NotoSerif-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Myanmar MN';
  src: url('fonts/MyanmarMN-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
} */

:root{
  --green:#1b5e20;
  --green-700:#104b17;
  --gold:#c19a33;
  --gold-700:#9f7f27;
  --black:#0b0b0b;
  --white:#ffffff;
  --cream:#f8f5ef;
  --text:#1a1a1a;
  --muted:#eaeae7;

  --container: 1120px;
  --radius: 20px;

  /* ajustes del hero */
  --capuccino-gap: clamp(70px, 12vh, 160px); /* separación botón → capuccino */
  --hero-cover: 82%;                         /* 80–85% del alto del hero */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
  font-size:clamp(16px, .9vw + 10px, 18px);
}

/* Utilidad layout */
.container{width:min(var(--container), 92vw); margin:0 auto;}
.center{text-align:center}

/* Tipografía */
.display{
  font-family: 'PP Telegraf', 'Myanmar MN', 'Poppins', Arial, sans-serif;
  font-weight:800;
  font-size: clamp(30px, 2.6vw + 14px, 52px);
  line-height:1.05;
  letter-spacing: .2px;
  color:var(--white);
  margin:0 0 12px;
}
.title-small{
  display:block; 
  font-size: 28px;
  font-weight:700; 
  color:var(--white);
   line-height:1.08;
  }
.display-strong{display:block; line-height:1.02; font-weight:800; font-size: clamp(42px, 4.2vw + 18px, 78px);}
.display-gold{ color: var(--gold); text-shadow: 0 0 24px rgba(193,154,51,.35); }

.lead{
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(18px, 1.1vw + 10px, 22px);
  color:#f2f3f1;
  max-width: 940px;
  margin: 0 auto 32px;
}

.h2{
  font-family: 'PP Telegraf', 'Myanmar MN', 'Poppins', Arial, sans-serif;
  font-weight:800;
  font-size: clamp(28px, 1.6vw + 16px, 40px);
  line-height:1.15;
  color:var(--green-700);
  margin:0 0 10px;
}

.h3{
  font-family: 'PP Telegraf', 'Myanmar MN', 'Poppins', Arial, sans-serif;
  font-weight:700;
  font-size: clamp(20px, 1vw + 12px, 24px);
  color:var(--green-700);
  margin:.2rem 0 .4rem;
}

.sublead{
  font-family: 'Noto Serif', Georgia, serif;
  font-size: clamp(16px, .8vw + 10px, 18px);
  color:#3a3a3a;
  max-width: 720px;
  margin: 0 auto 1.8rem;
}

.body{font-size:1.05rem; color:#2b2b2b}
.body-sm{font-size:.98rem; color:#494949}

/* ================= HERO ================= */
.hero{
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: visible;               /* que nada se recorte */
}

/* Fondo solo 80–85% del alto */
.hero-bg{
  position: absolute;
  top: 0; left: 0; right: 0;       /* NO usar inset:0 para que respete height */
  height: var(--hero-cover);
  background-position: center top;
  background-size: cover;
  transform: scale(1.02);
  z-index: 0;
}

/* Overlay hasta el corte (con fade al final) */
.hero-overlay{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hero-cover);
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.36) 32%,
    rgba(0,0,0,.58) 70%,
    rgba(0,0,0,0) 100%            /* se desvanece al transparente */
  );
  pointer-events: none;
  z-index: 1;
}

/* Contenido por encima de todo */
.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(4rem, 8vw, 7rem) 1rem;
}

.shadow-gold{
  text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 28px rgba(193,154,51,.35)
}

/* Notas bajo el título */
.hero-notes{ margin: 8px auto 22px; max-width: 980px; padding: 0 .5rem; }
.hero-notes .note{
  margin: 6px 0;
  font-size: clamp(13px, .5vw + 10px, 16px);
  color: #e9eee7;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Imagen capuccino (más abajo) */
.hero-capuccino{
  margin: var(--capuccino-gap) auto 0 !important;
  display: flex; justify-content: center;
}
.hero-capuccino img{
  width: clamp(250px, 45vw, 470px);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  backdrop-filter: blur(0.5px);
}

/* Botones */
.btn{
  display:inline-block; padding:1rem 1.3rem; border-radius:999px; text-decoration:none; font-weight:800; transition:.25s ease; border:2px solid transparent;
  font-family: 'PP Telegraf', 'Myanmar MN', 'Poppins', Arial, sans-serif;
  letter-spacing:.2px;
}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-700));
  color:#111; box-shadow:0 10px 24px rgba(193,154,51,.3)
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(193,154,51,.38)}
.btn-outline{color:var(--green); border-color:var(--green); background:#fff}
.btn-outline:hover{background:var(--green); color:#fff}

/* (Resto de estilos de tu sitio siguen igual) */

/* Responsivo: opcional que el fondo cubra un poco más en móviles */
@media (max-width: 640px){
  :root{ --hero-cover: 90%; }
  .hero-capuccino{ margin: clamp(36px, 10vh, 80px) auto 0 !important; }
}


/* =========================================================
   SECCIÓN: De los Andes colombianos a tu mañana en Corea
   ========================================================= */

#andes-a-corea{
  position: relative;
  background: #fff;
  isolation: isolate;
  padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 8vw, 110px);
  --andes-text: #222;
  --andes-muted:#6b6b6b;
  --andes-border:#e6e1d9;
  --andes-accent:#1b5e20;
}

.andes-container{ width: min(var(--container), 92vw); margin: 0 auto; }

/* Banderas + curva (centradas, pequeñas e inclinadas) */
.andes-legend{
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap: clamp(10px, 2vw, 16px); 
  color:var(--andes-accent);
  margin-bottom: clamp(10px, 1.6vw, 20px);
}

/* NUEVO: banderas como imágenes */
.flag-img{
  width: clamp(26px, 2.4vw, 38px);
  height: auto;
  display: block;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transform-origin: center;
}
.flag-co{ transform: rotate(-12deg) translateY(2px); }
.flag-kr{ transform: rotate(12deg) translateY(2px); }

/* Curva entre banderas */
.andes-legend .curve{ 
  width: clamp(120px, 18vw, 210px); 
  height:auto; 
  display:inline-block; 
}

.andes-title{
  text-align:center; color:#111;
  font-family:"PP Telegraf","Myanmar MN","Poppins",Arial,sans-serif; font-weight:800;
  font-size: clamp(28px, 2.6vw + 16px, 44px); line-height:1.2;
  margin: 0 auto clamp(26px, 3vw, 40px);
}

.br-lg{ display:none; }
@media (min-width: 900px){ .br-lg{ display:inline; } }

.andes-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px) clamp(22px, 2.6vw, 32px);
  row-gap: clamp(26px, 3.4vw, 42px);
}

.andes-item{ 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  text-align:center; 
}

.andes-media{
  width:100%; 
  aspect-ratio: 4 / 3; 
  border-radius:8px; 
  background:#111; 
  overflow:hidden;
  box-shadow: 0 2px 0 0 var(--andes-border) inset; 
  margin-bottom: clamp(10px, 1.4vw, 14px);
}
.andes-media img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
  filter: saturate(1.05) contrast(1.02); 
}

.andes-text{
  max-width:92%; 
  margin:0 auto; 
  color:var(--andes-muted);
  font-family:"Noto Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(14px, .85vw + 10px, 16px); 
  line-height:1.6;
}

#andes-a-corea::after{
  content:""; 
  position:absolute; 
  inset:0 0 auto 50%; 
  height:85%;
  background: radial-gradient(60% 60% at 70% 50%, rgba(0,0,0,0.03), transparent 60%);
  pointer-events:none; 
  z-index:-1;
}

@media (max-width: 980px){ 
  .andes-grid{ grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 640px){
  .andes-grid{ grid-template-columns: 1fr; }
  .andes-text{ max-width: 600px; }
}

/* ====================== CAFÉS DE ORIGEN ====================== */
.origin-section{
  --origin-title: #ffffff;
  --origin-sub: #e8e1d9;
  --origin-card-bg: #caa78f;     /* color tarjeta según maqueta */
  --origin-card-text: #fff;
  --origin-bullet: #f5efe9;
  --origin-shadow: rgba(0,0,0,.22);
  --origin-radius: 18px;
  --origin-gap: clamp(18px, 2vw, 24px);
  --origin-overlap: clamp(15px, 5vw, 50px); /* cuánto “bajan” las tarjetas */
  position: relative;
  background:#fff;
  padding: clamp(56px, 7vw, 100px) 0 calc(clamp(64px, 8vw, 120px) + var(--origin-overlap));
  overflow: visible;
}

/* Fondo de granos solo arriba (las tarjetas sobresalen) */
.origin-bg{
  position:absolute;
  left:0; right:0; top:0;
  height: 85%;
  background-position:center;
  background-size: cover;
  opacity: .95;
  z-index: 0;
}
.origin-overlay{
  position:absolute; left:0; right:0; top:0; height:68%;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.18) 30%, rgba(0,0,0,.22));
  z-index: 1;
}

.origin-container{ width:min(var(--container,1120px), 92vw); margin:0 auto; position:relative; z-index:2; }

/* LOGO arriba del título */
.origin-logo{
  display:block;
  width: clamp(60px, 16vw, 185px);
  height: auto;
  margin: 0 auto clamp(8px, 1.2vw, 14px);
}

/* Título y subtítulo */
.origin-title{
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  text-align:center; color:var(--origin-title);
  font-size: clamp(28px, 2.6vw + 16px, 42px);
  margin:0 0 10px;
}
.origin-sublead{
  text-align:center; color:var(--origin-sub);
  font-family:'Noto Serif', Georgia, serif;
  font-size: clamp(14px, .9vw + 10px, 16px); line-height:1.7;
  max-width:880px; margin:0 auto clamp(28px, 3.2vw, 44px);
}

/* Grid de tarjetas con “bajada” */
.origin-cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--origin-gap); align-items:stretch;
  transform: translateY(var(--origin-overlap));
}

.origin-card{
  background:var(--origin-card-bg); color:var(--origin-card-text);
  border-radius:var(--origin-radius);
  box-shadow:0 14px 28px var(--origin-shadow);
  display:flex; flex-direction:column;
  min-height:500px; padding: clamp(16px, 1.6vw, 20px);
}

/* Área de imagen */
.origin-card-media{
  display:grid; place-items:center;
  margin-top: clamp(4px, .6vw, 8px);
  margin-bottom: clamp(8px, .9vw, 12px);
  min-height:120px;
}

.origin-cards .origin-card:nth-child(3) .origin-divider{
  margin-top: clamp(10px, 1vw, 14px);
}

/* Tazas (taza1 / taza2) */
.origin-card-media.cup img{
  width: clamp(110px, 12vw, 150px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
  display:block;
}

.origin-card-media.round {
  margin-bottom: clamp(26px,2.6vw,34px);
}



/* Imagen de campo redonda */
.origin-card-media.round img{
  width: clamp(90px, 10vw, 120px);
  height: clamp(90px, 10vw, 120px);
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
  display:block;
}

/* Línea divisora bajo la imagen (como en la maqueta) */
.origin-divider{
  display:block;
  width: 45%;
  height: 2px;
  background: rgba(255,255,255,.62);
  margin: 6px auto 12px;
  border-radius: 2px;
}

/* Título card */
.origin-card-title{
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:800; font-size: clamp(16px, 1vw + 12px, 20px);
  text-align:center; margin:2px 0 10px;
}

/* Lista */
.origin-list{
  list-style:none; padding:0; margin:0;
  font-family:'Noto Serif', Georgia, serif;
  font-size: clamp(14px, .85vw + 10px, 16px); line-height:1.55;
}
.origin-list li{ position:relative; padding-left:28px; margin:10px 0; }

/* Bullet decorativo (opcional) */
.origin-list li::before{
  content: "✦";
  position:absolute; left:0; top:.1em;
  font-size: 16px; line-height:1;
  color: var(--origin-bullet);
}

/* Responsive */
@media (max-width: 1024px){ .origin-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){
  .origin-cards{ grid-template-columns: 1fr; }
  .origin-card{ min-height:420px; }
}


/* ===================== ¿POR QUÉ TOMAR NUESTRO CAFÉ? ===================== */
.why-section{
  background:#fff;
  padding: clamp(48px, 6vw, 72px) 0;
}
.why-container{
  width:min(1120px, 92vw);
  margin:0 auto;
}
.why-title{
  text-align:center;
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  color:#111;
  margin:0 0 clamp(22px, 3vw, 34px);
  font-size: clamp(26px, 2.2vw + 14px, 40px);
}

/* Layout: 2 columnas, el mapa iguala la altura de las 4 tarjetas */
.why-layout{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
}

/* Columna izquierda: grilla 2x2 */
.why-left{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
}

/* Tarjetas */
.why-card{
  background:#ececec;
  border-radius:18px;
  padding: clamp(14px, 1.6vw, 20px);
  box-shadow: 0 4px 10px rgba(0,0,0,.06) inset;
}
.why-card-title{
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:700;
  color:#222;
  font-size: clamp(16px, .9vw + 12px, 20px);
  margin:0 0 6px;
  text-align:center;
}
.why-card-text{
  font-family:'Noto Serif', Georgia, serif;
  color:#555;
  font-size: clamp(14px, .85vw + 9px, 16px);
  line-height:1.6;
  text-align:center;
  margin:0;
}

/* Mapa */
.why-map{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:#f0f0f0;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display:flex;
}
.why-map img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Responsivo */
@media (max-width: 1024px){
  .why-layout{ grid-template-columns: 1fr; }
  .why-map{ height: clamp(260px, 46vw, 420px); }
}
@media (max-width: 640px){
  .why-left{ grid-template-columns: 1fr; }
}

/* ================= SECCION EMERGE =============== */

/* Variables de la sección */
:root{
  --emerge-green:#2f4d3f;
  --text-white:#ffffff;
  --shadow: 0 10px 24px rgba(0,0,0,.18);
  --wrap-max: 1260px;

  /* Fondo verde cubre 85% y deja blanco abajo */
  --green-cover: 85%;

  /* Tamaño/posición del árbol detrás del texto */
  --mark-scale-desktop: 400%;  /* altura relativa de la imagen del árbol */
  --mark-y-desktop: 45%;       /* posición vertical del árbol (0% arriba, 100% abajo) */
}

/* Fondo verde 0→85%, blanco 85→100% */
.emerge-section{
  background: linear-gradient(
    to bottom,
    var(--emerge-green) 0 var(--green-cover),
    #fff var(--green-cover) 100%
  );
  color: var(--text-white);
  position: relative;
  overflow: visible;
  padding: 50px 0 65px;
}

/* Dos columnas: imágenes + texto */
.emerge-wrap{
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 520px 1fr;
  column-gap: 180px;           /* separación amplia entre bloques */
  align-items: center;
  padding: 0 24px;
}

/* ===== Columna izquierda ===== */
.emerge-left{ position: relative; }

@media (min-width: 1200px){
  .emerge-left{ margin-left: -120px; } /* corre a la izquierda como en la maqueta */
}

/* Logo superior */
.brand-logo{
  width: 300px;
  height: auto;
  display: block;
  margin-bottom: 26px;
}

/* Grilla de imágenes (tamaños por custom props --w/--h) */
.img-grid{
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 28px;
  align-items: start;
}
.right-stack{ display: grid; row-gap: 22px; }

/* Óvalo perfecto y sombra suave */
.oval{
  width: var(--w);
  height: var(--h);
  background: #fff;
  border-radius: 50% !important;
  -webkit-clip-path: ellipse(50% 50% at 50% 50%);
          clip-path: ellipse(50% 50% at 50% 50%);
  overflow: hidden;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}
.oval img{ width:100%; height:100%; object-fit:cover; display:block; }

/* La inferior sobresale del fondo verde al blanco */
.protrude{ transform: translateY(36px); }

/* ===== Columna derecha ===== */
.emerge-right{
  position: relative;
  overflow: visible;
}

/* Árbol de fondo (con fallback de ruta Images/images) */
.emerge-right::before{
  content:"";
  position: absolute;
  inset: 0;
  background-image: url("Images/LOGOMARK-15.png"), url("images/LOGOMARK-15.png");
  background-repeat: no-repeat, no-repeat;
  /* Escalar por ALTURA para cubrir todo el bloque de texto y título */
  background-size: auto var(--mark-scale-desktop), auto var(--mark-scale-desktop);
  background-position: 50% var(--mark-y-desktop), 50% var(--mark-y-desktop);
  opacity: 0.45;                 /* visible pero sutil (puedes subir/bajar) */
  pointer-events: none;
  z-index: 0;
}

/* Contenido por encima del árbol */
.emerge-right-inner{
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  transform: translateY(14px);   /* alinea vertical con las 3 imágenes */
}

/* Título y divisor centrados */
.emerge-right h2{
  font-family:"Georgia","Times New Roman",serif;
  font-weight: 800;
  line-height: 1.12;
  font-size: 55px;
  text-align: center;
  text-wrap: balance;
  text-transform: uppercase;
  margin: 0 0 16px 0;
  color: var(--text-white);
}

.divider{
  display: block;
  width: 64px;
  height: 3px;
  background: rgba(255,255,255,.85);
  margin: 12px auto 22px;      /* centrada debajo del título */
  border-radius: 2px;
}

/* Párrafos */
.emerge-right p{
  margin: 0 0 16px 0;
  font-size: 20px;
  line-height: 1.7;
  color: rgba(255,255,255,.95);
  max-width: 560px;
  text-align: center;
}

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .emerge-wrap{
    grid-template-columns: 1fr;
    row-gap: 32px;
    column-gap: 32px;
    align-items: start;
  }
  .emerge-left{ margin-left: 0; }
  .emerge-right::before{
    /* un poco menos alto en pantallas medianas */
    background-size: auto 220%, auto 220%;
    background-position: 50% 58%, 50% 58%;
  }
  .brand-logo{ width: 180px; }
  .emerge-right-inner{ transform: none; }
}

@media (max-width: 620px){
  .img-grid{
    grid-template-columns: 1fr 180px;
    column-gap: 16px;
  }
  .right-stack{ row-gap: 16px; }
  .emerge-right h2{ font-size: 34px; }
  .emerge-right p{ font-size: 16px; }
}
/* =================== ¿CÓMO PREPARAR NUESTRO CAFÉ? =================== */
:root{
  /* respaldo por si no estuviera definido arriba */
  --prep-gray: #eeeeee;
}

.prep-section{
  background:#fff;
  padding: clamp(48px, 6vw, 72px) 0;
}
.prep-container{
  width:min(1120px, 92vw);
  margin:0 auto;
  text-align:center;
}
.prep-title{
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:800;
  letter-spacing:.02em;
  color:#171717;
  margin:0 0 clamp(8px, 1.6vw, 12px);
  font-size: clamp(26px, 2.2vw + 14px, 40px);
}
.prep-sub{
  font-family:'Noto Serif', Georgia, serif;
  color:#0c0c0c;
  margin:0 0 clamp(18px, 2.4vw, 26px);
  font-size: clamp(16px, .9vw + 10px, 16px);
}

.prep-sub1{
  font-family:'Noto Serif', Georgia, serif;
  color:#0a0a0a;
  margin:16px 16px clamp(18px, 2.4vw, 26px);
  font-size: clamp(16px, .9vw + 12px, 18px);
  font-weight: bold;

}

/* Tarjeta gris */
.prep-card{
  position: relative;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
  background: var(--prep-gray);
  padding: clamp(12px, 1.6vw, 16px);
  box-shadow: 0 2px 0 rgba(0,0,0,.04) inset;
  width: min(980px, 95%);
}
.prep-image{
  display:block;
  width:100%;
  height:auto;
  border-radius: 12px;
}

/* Hotspots: 6 columnas sobre la imagen */
.prep-hotspots{
  position:absolute;
  inset: clamp(12px, 1.6vw, 16px);
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  pointer-events: none;
}
.hotspot{
  position: relative;
  align-self: end;
  justify-self: center;
  width: 90%;
  height: 28%;
  pointer-events: auto;
  transform: translateY(10%);
  cursor: default;
}

/* Tooltip dorado */
.hotspot::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  background: var(--gold);
  color: #111;
  font-family:'Noto Serif', Georgia, serif;
  font-size: clamp(12px, .8vw + 8px, 14px);
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transition: .22s ease;
}
.hotspot::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(6px) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--gold);
  opacity: 0; visibility: hidden;
  transition: .22s ease;
  border-radius: 2px;
}
.hotspot:hover::after,
.hotspot:focus-visible::after,
.hotspot:hover::before,
.hotspot:focus-visible::before{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hotspot{ outline: none; }
.hotspot:focus-visible{ box-shadow: 0 0 0 2px rgba(193,154,51,.45); border-radius: 8px; }


/* ======= CAFÉ IDEAL ======= */
.ideal-section{
  padding: clamp(3rem, 7vw, 7rem) 0;
}

.ideal-wrap{
  text-align: center;
}

/* Título */
.ideal-title{
  font-family: 'PP Telegraf','Poppins',Arial,sans-serif;
  font-weight: 800;
  color: #000;
  font-size: clamp(22px, 0.8vw + 25px, 45px);
  line-height: 1.12;
  margin: 0 0 .8rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Oferta */
.ideal-offer{
  font-family: 'Noto Serif', Georgia, serif;
  color: #2b2b2b;
  font-size: clamp(16px, .9vw + 12px, 22px);
  margin: 0 auto 1.2rem;
}
.ideal-offer strong{ color: var(--gold, #c19a33); }

/* Botón (usa estilos globales .btn .btn-primary) */
.ideal-cta{
  margin: .3rem auto 2.2rem;
  display: inline-block;
}

/* Fila inferior: texto + imagen alineados y centrados */
.ideal-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(1rem, 3vw, 2.2rem);
  flex-wrap: nowrap;
}

/* Texto “Nuestros tipos de café” */
.ideal-label{
  margin: 0;
  font-family: 'PP Telegraf','Poppins',Arial,sans-serif;
  font-weight: 800;
  color: var(--green-700, #104b17);
  font-size: clamp(18px, 1vw + 14px, 28px);
  white-space: nowrap; /* mantiene una sola línea */
}

/* Imagen */
.ideal-figure{
  margin: 0;
  line-height: 0;
}
.ideal-figure img{
  width: clamp(220px, 42vw, 520px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.12));
  border-radius: var(--radius, 20px);
}

/* Responsive: en móviles apilar y centrar */
@media (max-width: 720px){
  .ideal-row{
    flex-direction: column;
    gap: .8rem;
  }
  .ideal-label{
    white-space: normal;
    font-size: clamp(18px, 2.8vw + 12px, 24px);
  }
  .ideal-figure img{
    width: min(92vw, 480px);
  }
}


/* ====================== FAQ (Preguntas Frecuentes) ====================== */

:root{
  /* Ajusta libremente estos dos valores si quieres aún menos/más espacio */
  --faq-pad-top: clamp(290px, 20vw, 330px);   /* antes ~380–400px */
  --faq-pad-bottom: clamp(70px, 7vw, 110px);  /* antes ~100–140px */
}

.faq-section{
  position: relative;
  isolation: isolate;
  /* Más espacio arriba y abajo para “bajar” preguntas y footer */
  padding: var(--faq-pad-top) 0 var(--faq-pad-bottom) !important;
  color:#fff;
  overflow: hidden;
}

/* Fondo verde sólido (mismo tono de la maqueta) */
.faq-bg{
  position:absolute; inset:0;
  background-color:#2f4f3f; /* verde profundo */
  z-index: 0;
}

/* Árbol en capa separada, MUY grande y sobresaliendo */
.faq-tree{
  position:absolute; 
  inset:-10% 0 -16% 0 !important;      /* expande el lienzo del árbol */
  background-repeat:no-repeat;
  background-position:center 14% !important;               /* ligeramente alto para que se vea detrás del título */
  background-size: clamp(1200px, 145vw, 2250px); /* árbol más grande que antes */
  opacity:.50;                                 /* opacidad de la figura */
  pointer-events: none;
  z-index: 1;
}

/* Velo sutil para lectura */
.faq-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.16) 35%, rgba(0,0,0,.10));
  z-index: 2;
}

/* Contenedor de contenido por encima de fondo/árbol/velo */
.faq-container{
  width:min(1120px, 92vw);
  margin:0 auto;
  position: relative;
  z-index: 3;
}

/* ===== NUEVO: Imagen de título grande ==== */
.faq-title{
  margin: 0 auto .4rem !important;
  line-height: 0;
  text-align: center;
}
.faq-title img{
  width: clamp(360px, 46vw, 820px);   /* tamaño amplio y responsive */
  height: auto;
  display: inline-block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.22));
}

/* ===== NUEVO: Línea divisora debajo del título ==== */
.faq-title-divider{
  display: block;
  width: clamp(64px, 8vw, 120px);
  height: 3px;
  background: rgba(255,255,255,.85);
  margin: 8px auto 6px !important;            /* centrada bajo la imagen */
}

/* Título “Preguntas frecuentes” (debajo de la imagen) */
.faq-heading{
  text-align:center;
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:800;
  color:#ffffff;
  margin: 8px 0 clamp(26px, 3.5vw, 38px) !important;  /* espacio inferior hacia el acordeón */
  font-size: clamp(22px, 1.6vw + 18px, 32px);
  letter-spacing:.02em;
}

/* Lista / acordeón */
.faq-list{
  display:grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto clamp(48px, 6vw, 70px); /* más espacio antes del footer */
}
.faq-item{
  background:#f9f9f7;
  color:#222;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.35),
              0 0 0 2px #deddd8 inset;
  overflow: hidden;
}
.faq-q{
  list-style: none;
  cursor: pointer;
  padding: 12px 46px 12px 16px;
  font-family:'Noto Serif', Georgia, serif;
  font-weight:700;
  color:#333;
  position: relative;
  outline: none;
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after{
  content:"▾";
  position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  font-size: 16px; color:#333;
}
.faq-item[open] .faq-q::after{ transform:translateY(-50%) rotate(180deg); }

.faq-a{
  padding: 12px 16px 16px;
  border-top: 2px solid #e5e2dc;
  background:#ffffff;
}
.faq-a p{
  margin:0;
  color:#4a4a4a;
  font-family:'Noto Serif', Georgia, serif;
  font-size: clamp(14px, .3vw + 13px, 16px);
  line-height:1.7;
}

/* Footer centrado bajo las preguntas (logo + contacto) */
.faq-footer{
  display:flex;
  align-items:center;
  justify-content:center;                            /* centrado total */
  gap: clamp(14px, 2.4vw, 26px);
  max-width: 860px;
  margin: clamp(40px, 5vw, 60px) auto 0;             /* más separación desde las preguntas */
  text-align:left;
}

/* Logo: tamaño visual equilibrado con el bloque de texto */
.faq-brand{
  margin:0;
  width: clamp(120px, 16vw, 160px);
  display:flex; align-items:center; justify-content:center;
}
.faq-brand img{
  width: 400px; height:300px; display:block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* Contacto */
.faq-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.faq-contact-title{
  margin:0 0 6px;
  font-family:'PP Telegraf','Myanmar MN','Poppins',Arial,sans-serif;
  font-weight:800; color:#fff;
  font-size: clamp(20px, .9vw + 18px, 30px);
}
.faq-contact-text{
  margin:0 0 10px;
  color:#e8efe6;
  font-family:'Noto Serif', Georgia, serif;
  font-size: clamp(14px, .3vw + 12px, 16px);
  line-height:1.5;
}
.faq-link{ color:#e8efe6; text-decoration:none; }
.faq-link:hover{ text-decoration:underline; }

/* Selector de idioma */
.faq-lang{
  appearance:none;
  border:1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.15);
  color:#fff;
  padding:.45rem .9rem;
  border-radius:8px;
  backdrop-filter: blur(2px);
  font-family:'Noto Serif', Georgia, serif;
}

/* Accesibilidad */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Responsive */
@media (max-width: 940px){
  .faq-footer{
    flex-direction:column;
    text-align:center;
  }
  .faq-contact{ align-items:center; }
}