/* ══════════════════════════════════════════════════════════════
   MXL Brew · página de venta
   Le habla al dueño de una cervecería, no al consumidor. Por eso
   es sobria y va al grano: el argumento fuerte es el QR de arriba,
   que se demuestra solo.
   ══════════════════════════════════════════════════════════════ */

.lp-nav{display:flex; align-items:center; gap:18px;}
.lp-nav a{font-size:12.5px; color:var(--text-dim); text-decoration:none;}
.lp-nav a:hover{color:var(--amber);}

/* ── Portada ────────────────────────────────────────────────── */
.lp-hero{
  max-width:1040px; margin:0 auto; padding:56px 22px 44px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;
}
.lp-eyebrow{
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint);
}
.lp-hero h1{
  font-family:'Fraunces', serif; font-weight:300;
  font-size:clamp(32px, 5.2vw, 52px); line-height:1.06; letter-spacing:-.015em;
  margin:14px 0 18px;
}
.lp-hero h1 em{font-style:italic; color:var(--amber);}
.lp-hero-texto > p{color:var(--text-dim); font-size:15px; line-height:1.68; max-width:52ch;}
.lp-hero-texto > p strong{color:var(--text);}

.lp-acciones{display:flex; gap:11px; flex-wrap:wrap; margin-top:26px;}
.lp-nota-hero{font-size:11.5px; color:var(--text-faint); margin-top:12px;}

.lp-qr{text-align:center;}
.lp-qr-marco{
  display:inline-block; padding:18px; border-radius:22px;
  background:#f7efe2; box-shadow:0 20px 50px rgba(0,0,0,.45);
  transform:rotate(-1.5deg);
}
.lp-qr-marco svg{display:block; width:100%; max-width:230px; height:auto;}
.lp-qr-pie{font-size:12.5px; color:var(--text-dim); line-height:1.55; margin-top:18px; max-width:30ch; margin-inline:auto;}
.lp-qr-pie strong{display:block; color:var(--text); margin-bottom:3px;}
.lp-qr-link{
  display:inline-block; margin-top:9px; font-size:11.5px;
  color:var(--text-faint); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:2px;
}
.lp-qr-link:hover{color:var(--amber); border-bottom-color:var(--amber);}

/* ── Secciones ──────────────────────────────────────────────── */
.lp-seccion{max-width:1040px; margin:0 auto; padding:52px 22px;}
.lp-titulo{margin-bottom:30px; max-width:62ch;}
.lp-titulo h2{
  font-family:'Fraunces', serif; font-weight:300;
  font-size:clamp(24px, 3.6vw, 34px); line-height:1.14;
}
.lp-titulo p{color:var(--text-dim); font-size:14px; line-height:1.65; margin-top:11px;}

/* ── El problema ────────────────────────────────────────────── */
.lp-problemas{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;
}
.lp-problema{
  padding:20px; border-radius:16px;
  background:var(--bg-elev); border:1px solid var(--line);
  border-left:2px solid rgba(201,132,122,.4);
}
.lp-problema span{
  font-family:'Fraunces', serif; font-size:12px; color:var(--text-faint);
  letter-spacing:.1em; display:block; margin-bottom:9px;
}
.lp-problema p{font-size:13.5px; line-height:1.6; color:var(--text-dim);}

/* ── Qué incluye ────────────────────────────────────────────── */
.lp-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px;}
.lp-card{
  padding:22px; border-radius:18px;
  background:var(--bg-elev); border:1px solid var(--line);
}
.lp-card h3{font-family:'Fraunces', serif; font-weight:500; font-size:17px; margin-bottom:9px;}
.lp-card p{font-size:13.5px; line-height:1.62; color:var(--text-dim);}
.lp-card p em{font-style:italic; color:var(--text);}
.lp-card.destacada{
  border-color:rgba(217,142,59,.32);
  background:linear-gradient(180deg, var(--amber-soft), transparent 55%), var(--bg-elev);
}
.lp-tag{
  display:inline-block; margin-top:13px;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--amber); border:1px solid rgba(217,142,59,.3);
  background:var(--amber-soft); padding:4px 10px; border-radius:20px;
}

/* ── Directorio ─────────────────────────────────────────────── */
.lp-dir-comparativa{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:14px; margin-bottom:24px;
}
.lp-dir-lado{
  padding:22px; border-radius:18px;
  background:var(--bg-elev); border:1px solid var(--line);
}
.lp-dir-lado.es-cliente{
  border-color:rgba(217,142,59,.3);
  background:linear-gradient(180deg, var(--amber-soft), transparent 50%), var(--bg-elev);
}
.lp-dir-etiqueta{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--text-faint); display:block; margin-bottom:14px;
}
.lp-dir-lado.es-cliente .lp-dir-etiqueta{color:var(--amber);}
.lp-dir-lado ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.lp-dir-lado li{
  font-size:13px; line-height:1.5; color:var(--text-dim);
  padding-left:18px; position:relative;
}
.lp-dir-lado li::before{content:'·'; position:absolute; left:5px; color:var(--text-faint);}
.lp-dir-lado.es-cliente li::before{color:var(--amber);}
.lp-dir-lado li strong{color:var(--text);}

/* ── Planes ─────────────────────────────────────────────────── */
.lp-planes{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:15px;}
.lp-plan{
  padding:26px 22px; border-radius:20px; position:relative;
  background:var(--bg-elev); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:15px;
}
.lp-plan.destacado{
  border-color:var(--amber);
  background:linear-gradient(180deg, var(--amber-soft), transparent 45%), var(--bg-elev);
}
.lp-plan-sello{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  background:var(--amber); color:#1a1108; padding:5px 13px; border-radius:20px;
  white-space:nowrap;
}
.lp-plan h3{font-family:'Fraunces', serif; font-weight:500; font-size:19px;}
.lp-precio{display:flex; align-items:baseline; gap:7px;}
.lp-precio strong{font-family:'Fraunces', serif; font-weight:300; font-size:30px; color:var(--amber);}
.lp-precio em{font-style:normal; font-size:11.5px; color:var(--text-faint);}
.lp-plan ul{list-style:none; display:flex; flex-direction:column; gap:8px; flex:1;}
.lp-plan li{
  font-size:13px; line-height:1.5; color:var(--text-dim);
  padding-left:18px; position:relative;
}
.lp-plan li::before{content:'✓'; position:absolute; left:0; color:var(--green); font-size:11px;}
.lp-plan-nota{font-size:11.5px; color:var(--text-faint); line-height:1.5;}

.lp-setup{
  margin-top:24px; padding:20px 22px; border-radius:16px;
  background:var(--bg-elev-2); border:1px solid var(--line);
  font-size:13.5px; line-height:1.65; color:var(--text-dim);
}
.lp-setup strong{color:var(--text);}

/* ── Dudas ──────────────────────────────────────────────────── */
.lp-faq{display:flex; flex-direction:column; gap:10px;}
.lp-faq details{
  border-radius:14px; background:var(--bg-elev); border:1px solid var(--line);
  overflow:hidden;
}
.lp-faq summary{
  padding:16px 20px; cursor:pointer; font-size:14px; font-weight:600;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:'+'; color:var(--amber); font-size:18px; flex:0 0 auto;}
.lp-faq details[open] summary::after{content:'−';}
.lp-faq details[open] summary{border-bottom:1px solid var(--line);}
.lp-faq p{padding:15px 20px 18px; font-size:13.5px; line-height:1.65; color:var(--text-dim);}

/* ── Cierre ─────────────────────────────────────────────────── */
.lp-cierre{
  max-width:640px; margin:0 auto; padding:60px 22px; text-align:center;
}
.lp-cierre h2{
  font-family:'Fraunces', serif; font-weight:300;
  font-size:clamp(25px, 4vw, 36px); line-height:1.14;
}
.lp-cierre > p{color:var(--text-dim); font-size:14.5px; line-height:1.65; margin-top:14px;}
.lp-cierre .lp-acciones{justify-content:center;}
.lp-cierre-nota{font-size:11.5px !important; color:var(--text-faint) !important; margin-top:22px !important;}

/* ── Legales ────────────────────────────────────────────────── */
.legal{max-width:720px; margin:0 auto; padding:44px 22px;}
.legal h1{font-family:'Fraunces', serif; font-weight:300; font-size:34px; line-height:1.1;}
.legal h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:17px;
  margin:32px 0 10px; color:var(--text);
}
.legal p, .legal li{font-size:13.5px; line-height:1.72; color:var(--text-dim);}
.legal p{margin-bottom:12px;}
.legal ul{list-style:none; margin:0 0 14px;}
.legal li{padding-left:18px; position:relative; margin-bottom:7px;}
.legal li::before{content:'·'; position:absolute; left:6px; color:var(--text-faint);}
.legal a{color:var(--amber);}
.legal-fecha{font-size:11.5px !important; color:var(--text-faint) !important; margin-top:8px;}
.legal-nota{
  margin-top:34px; padding:16px 18px; border-radius:14px;
  background:var(--bg-elev-2); border:1px solid var(--line);
  font-size:12px !important; color:var(--text-faint) !important;
}

@media (max-width: 860px){
  .lp-hero{grid-template-columns:1fr; gap:34px; padding-top:36px;}
  .lp-qr-marco{transform:none;}
}
@media (max-width: 640px){
  .lp-nav a:not(.dir-alta){display:none;}
  .lp-seccion{padding:38px 22px;}
}