/* ============================================================
   MENÚLUX · marketing.css — estilos COMPARTIDOS de las páginas públicas
   (portada, /carta, /reservas, /comandera). Extraído de carta.html:
   tokens base, nav y botones, hero, franja de confianza, precio, FAQ,
   contacto y pie. Lo específico de cada página va en su propio HTML.
   ============================================================ */

:root{
  --ink:#211b12;
  --ink2:#4a4234;
  --mut:#8f8474;
  --line:rgba(140,115,60,.16);
  --line2:rgba(140,115,60,.3);
  --gold:#b08d3c;
  --golddk:#8a6d2e;
  --paper:rgba(255,255,254,.72);
  --metal:linear-gradient(102deg,#8a6d2e,#c9a24b 28%,#f0dfa8 50%,#b08d3c 72%,#8a6d2e);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 70% at 50% -10%,#fffefb,#f7f3e9 55%,#efe8d7) fixed #efe8d7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,iframe{max-width:100%}
@keyframes shine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.f{font-family:'Fraunces',Georgia,serif;font-weight:500}
.goldtx{background:var(--metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}

/* grano fílmico sutil sobre todo */
.lx-grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* separador rombo entre secciones */
.lx-sep{display:flex;align-items:center;gap:16px;max-width:520px;margin:0 auto;padding:0 24px}
.lx-sep::before,.lx-sep::after{content:"";flex:1;height:1px}
.lx-sep::before{background:linear-gradient(90deg,transparent,var(--line2))}
.lx-sep::after{background:linear-gradient(90deg,var(--line2),transparent)}
.lx-sep b{flex:none;width:9px;height:9px;transform:rotate(45deg);background:var(--metal);background-size:220% 100%;border-radius:1.5px;box-shadow:0 1px 4px rgba(138,109,46,.4)}

/* reveal con IntersectionObserver (las clases las pone el JS) */
.rv{opacity:0}
.rv.on{opacity:1;animation:rvin .9s cubic-bezier(.22,.9,.3,1) backwards}
@keyframes rvin{from{opacity:0;transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1}
  .rv.on{animation:none}
  html{scroll-behavior:auto}
}

/* ============ a1- NAV + HERO ============ */

.a1-wrap{
  position:relative;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  overflow:hidden;
}
.a1-wrap .f, .a1-f{font-family:'Fraunces',serif;}
.a1-goldtx{
  background:var(--metal);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:a1-shine 7s linear infinite;
}
@keyframes a1-shine{
  0%{background-position:0% 0}
  100%{background-position:220% 0}
}

/* ---------- NAV flotante cristal ---------- */
.a1-nav{
  position:sticky;
  top:16px;
  z-index:60;
  max-width:1120px;
  margin:16px auto 0;
  padding:0 16px;
}
.a1-nav-inner{
  display:flex;
  align-items:center;
  gap:32px;
  padding:12px 16px 12px 24px;
  border-radius:18px;
  background:var(--paper);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 24px 60px -18px rgba(90,66,20,.16), 0 1px 0 rgba(255,255,255,.7) inset;
  position:relative;
}
.a1-nav-inner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(135deg,rgba(176,141,60,.45),rgba(176,141,60,.08) 40%,rgba(176,141,60,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.a1-logo{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
  line-height:1;
}
.a1-links{
  display:flex;
  gap:28px;
  margin-left:8px;
  flex:1;
}
.a1-links a{
  font-size:13.5px;
  font-weight:500;
  color:var(--ink2);
  text-decoration:none;
  letter-spacing:.01em;
  padding:6px 0;
  position:relative;
  transition:color .18s ease;
}
.a1-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:var(--metal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
/* Los :hover decorativos solo en punteros reales: en tactil se quedan
   «pegados» tras el toque (el subrayado o el boton levantado no se van). */
@media (hover:hover) and (pointer:fine){
  .a1-links a:hover{color:var(--ink);}
  .a1-links a:hover::after{transform:scaleX(1);}
}
.a1-nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
/* Los botones de la barra no llevan icono: el gap del .a1-btn solo servia para
   separar las tres partes del texto del CTA y lo ensanchaba 8,7px en escritorio.
   Los espacios van dentro del propio texto (nbsp). */
.a1-nav-cta .a1-btn{gap:0;}


/* ---------- menú móvil: los productos también en el teléfono ---------- */
.a1-burger{display:none;width:44px;height:44px;flex:none;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,254,.85);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.a1-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.a1-nav.open .a1-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.a1-nav.open .a1-burger i:nth-child(2){opacity:0}
.a1-nav.open .a1-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:720px){
  .a1-burger{display:flex}
  .a1-nav.open .a1-links{display:flex;flex-direction:column;gap:2px;position:absolute;top:calc(100% + 8px);left:16px;right:16px;margin:0;padding:10px;border-radius:16px;background:var(--paper);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px -18px rgba(90,66,20,.25);border:1px solid var(--line2)}
  .a1-nav.open .a1-links a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:11px;font-size:15px}
  .a1-nav.open .a1-links a.on{background:rgba(176,141,60,.12)}
  .a1-nav.open .a1-links a::after{display:none}
  .a1-nav-cta .a1-btn.a1-ghost{display:none}
}

/* ---------- Botones ---------- */
.a1-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  padding:11px 20px;
  border-radius:12px;
  text-decoration:none;
  cursor:pointer;
  border:0;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.a1-btn.a1-gold{
  background:linear-gradient(180deg,#caa24a,#a5832f);
  color:#fffdf4;
  box-shadow:0 12px 28px -10px rgba(165,131,47,.55), 0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(0,0,0,.12) inset;
}
.a1-btn.a1-ghost{
  background:rgba(255,255,254,.85);
  color:var(--ink);
  border:1px solid var(--line2);
  box-shadow:0 4px 14px -6px rgba(90,66,20,.12);
}
@media (hover:hover) and (pointer:fine){
  .a1-btn.a1-gold:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 36px -12px rgba(165,131,47,.6), 0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.12) inset;
  }
  .a1-btn.a1-ghost:hover{
    transform:translateY(-2px);
    border-color:rgba(140,115,60,.45);
    box-shadow:0 10px 24px -10px rgba(90,66,20,.2);
  }
}
.a1-btn.a1-big{
  font-size:15px;
  padding:14px 26px;
  border-radius:14px;
}

/* ---------- HERO ---------- */
.a1-hero{
  max-width:1120px;
  margin:0 auto;
  padding:72px 24px 88px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:64px;
  align-items:center;
}
.a1-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--golddk);
  margin-bottom:24px;
}
.a1-kicker::before{
  content:"";
  width:22px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.a1-title{
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:clamp(40px,5.4vw,64px);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0 0 24px;
  text-wrap:balance;
}
.a1-title em{
  font-style:italic;
  font-weight:500;
}
.a1-sub{
  font-size:17px;
  line-height:1.6;
  color:var(--ink2);
  max-width:46ch;
  margin:0 0 32px;
}
.a1-ctas{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.a1-ctas .a1-note{
  font-size:12.5px;
  color:var(--mut);
}

/* garantías con rombos */
.a1-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.a1-proof span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:500;
  color:var(--ink2);
  white-space:nowrap;
}
.a1-dia{
  width:7px;
  height:7px;
  flex:none;
  transform:rotate(45deg);
  background:var(--metal);
  background-size:220% 100%;
  border-radius:1.5px;
  box-shadow:0 1px 3px rgba(138,109,46,.4);
}

/* ---------- Móvil con la carta real ---------- */
.a1-stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-self:center;
}
.a1-halo{
  position:absolute;
  inset:-12% -22% 4%;
  background:radial-gradient(52% 46% at 50% 42%,rgba(201,162,75,.22),rgba(201,162,75,.07) 55%,transparent 75%);
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
}
.a1-phone{
  position:relative;
  z-index:1;
  width:min(320px,78vw);
  aspect-ratio:9/19;
  border-radius:40px;
  padding:10px;
  background:linear-gradient(160deg,#3b342a,#191510 45%,#241e15 80%,#3b342a);
  box-shadow:
    0 50px 90px -30px rgba(60,42,10,.45),
    0 20px 40px -20px rgba(60,42,10,.3),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.14) inset;
}
.a1-phone::before{
  content:"";
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:96px;
  height:22px;
  background:#191510;
  border-radius:0 0 14px 14px;
  z-index:3;
}
.a1-screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:31px;
  overflow:hidden;
  background:#fffefb;
  z-index:2;
}
.a1-screen iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
/* insignia flotante */
.a1-badge{
  position:absolute;
  z-index:4;
  top:14%;
  right:-8%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  border-radius:13px;
  background:var(--paper);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid var(--line2);
  box-shadow:0 16px 36px -14px rgba(90,66,20,.28);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  animation:a1-float 5.5s ease-in-out infinite;
}
.a1-badge small{
  display:block;
  font-size:10.5px;
  font-weight:500;
  color:var(--mut);
}
.a1-badge svg{color:var(--golddk);flex:none;}
@keyframes a1-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.a1-caption{
  position:relative;
  z-index:1;
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--mut);
}
.a1-caption svg{color:var(--golddk);}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .a1-hero{
    grid-template-columns:1fr;
    gap:56px;
    padding-top:56px;
    text-align:left;
  }
  .a1-badge{right:2%;}
}
@media (min-width:721px) and (max-width:860px){
  /* Franja tablet (iPad vertical = 768px): aqui los enlaces del menu todavia se
     ven, y entre logo + enlaces + los dos botones la barra pedia 811px. El grupo
     de CTA se salia del cristal y del viewport (a 768px sobresalia 84px y
     «Prueba gratis» quedaba cortado y sin poder pulsarse). Se compactan huecos
     y se acorta el texto del CTA, igual que ya se hace a <=430px. */
  .a1-nav-inner{gap:16px;padding:12px 12px 12px 20px;}
  .a1-links{gap:18px;margin-left:0;}
  /* La tablet tambien se toca con el dedo: objetivo tactil de 44px. */
  .a1-nav-cta .a1-btn{min-height:44px;}
  .a1-nav-cta{gap:8px;}
  .a1-nav-cta .a1-btn{padding:11px 14px;}
  .a1-nav-long{display:none;}
}
@media (max-width:720px){
  .a1-links{display:none;}
  .a1-nav-inner{gap:10px;padding:9px 10px 9px 16px;}
  /* «Entrar» NO se esconde en movil: quien ya es cliente entra desde aqui.
     Antes estaba en display:none y en el movil solo quedaba el boton de alta,
     asi que un cliente con cuenta no tenia por donde entrar. Se compactan los
     dos botones (y el texto del CTA) para que quepan en 320px. */
  .a1-nav-cta{gap:7px;}
  /* min-height (no padding) para llegar al objetivo tactil de 44px sin tocar el
     ancho: los botones median 33-35px de alto y se fallaban al pulsar. */
  .a1-nav-cta .a1-btn{font-size:13px;padding:9px 13px;border-radius:10px;min-height:44px;}
  .a1-logo{font-size:19px;}
  .a1-hero{padding:48px 20px 64px;}
  .a1-sub{font-size:16px;}
  .a1-ctas .a1-btn{flex:1;min-width:180px;}
  .a1-proof{gap:12px 18px;}
}
@media (max-width:430px){
  /* En un movil estrecho «Prueba 7 dias gratis» empuja a «Entrar» fuera de la
     barra: aqui el CTA se queda en «Prueba gratis». */
  .a1-nav-long{display:none;}
  .a1-nav-inner{gap:8px;padding:9px 8px 9px 13px;}
  .a1-nav-cta .a1-btn{font-size:12.5px;padding:9px 11px;}
  .a1-logo{font-size:18px;}
}

/* ============ a4 · franja de confianza ============ */

/* --- franja de confianza --- */
.a4-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1040px;margin:0 auto;background:var(--paper);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:22px;box-shadow:0 24px 60px -18px rgba(90,66,20,.16);position:relative}
.a4-trust::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;background:linear-gradient(160deg,rgba(201,162,75,.5),rgba(140,115,60,.12) 40%,rgba(201,162,75,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.a4-titem{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:30px 28px;position:relative}
.a4-titem + .a4-titem::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:1px;background:linear-gradient(180deg,transparent,var(--line),transparent)}
.a4-tico{width:26px;height:26px;color:var(--golddk);flex:none}
.a4-tico svg{width:100%;height:100%;display:block}
.a4-titem h3{font-size:14.5px;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.005em}
.a4-titem p{font-size:13px;line-height:1.5;color:var(--mut);margin:0}


@media (max-width:960px){
  .a4-trust{grid-template-columns:1fr 1fr}
  .a4-titem:nth-child(3)::before{display:none}
  .a4-titem:nth-child(odd){border-top:0}
  .a4-titem:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .a4-trust{grid-template-columns:1fr}
  .a4-titem{padding:22px 24px}
  .a4-titem + .a4-titem::before{display:none}
  .a4-titem + .a4-titem{border-top:1px solid var(--line)}
  .a4-titem:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ============ PRECIO (a5-) · FAQ · FOOTER · CONTACTO ============ */

.a5-wrap{
  padding:96px 24px 0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
}
.a5-inner{max-width:1040px;margin:0 auto;}
.a5-f{font-family:'Fraunces',serif;font-weight:450;}

/* --- cabecera de sección --- */
.a5-head{text-align:center;max-width:560px;margin:0 auto 56px;}
.a5-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--golddk);font-weight:600;margin-bottom:16px;
}
.a5-kicker::before,.a5-kicker::after{
  content:"";width:28px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line2));
}
.a5-kicker::after{background:linear-gradient(90deg,var(--line2),transparent);}
.a5-head h2{
  font-family:'Fraunces',serif;font-weight:450;
  font-size:clamp(30px,4.4vw,42px);line-height:1.12;
  letter-spacing:-.01em;margin:0 0 14px;
}
.a5-head h2 em{font-style:italic;font-weight:400;}
.a5-head p{color:var(--ink2);font-size:16.5px;line-height:1.6;margin:0;}

/* --- tarjeta protagonista --- */
.a5-card{
  position:relative;max-width:480px;margin:0 auto;
  background:var(--paper);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:22px;
  padding:56px 40px 40px;
  box-shadow:0 24px 60px -18px rgba(90,66,20,.16);
}
.a5-card::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:1px;
  background:linear-gradient(160deg,rgba(176,141,60,.55),rgba(176,141,60,.12) 40%,rgba(176,141,60,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
/* corona superior: filete doble dorado */
.a5-crown{
  position:absolute;top:22px;left:40px;right:40px;height:8px;
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line);
  pointer-events:none;
}
.a5-crown::before{
  content:"";position:absolute;left:50%;top:-4px;
  width:7px;height:7px;transform:translateX(-50%) rotate(45deg);
  background:var(--metal);
}

.a5-plan{
  text-align:center;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);font-weight:600;margin:8px 0 6px;
}
.a5-price{
  text-align:center;
  font-family:'Fraunces',serif;font-weight:450;
  font-size:64px;line-height:1;letter-spacing:-.02em;
  margin:0 0 4px;
}
.a5-price .a5-goldtx{
  background:var(--metal);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:a5-shine 7s linear infinite;
}
@keyframes a5-shine{
  0%{background-position:0% 50%;}
  50%{background-position:120% 50%;}
  100%{background-position:0% 50%;}
}
.a5-offerwrap{text-align:center;margin:0 0 12px}
.a5-offer{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border-radius:999px;background:linear-gradient(180deg,rgba(201,162,75,.18),rgba(201,162,75,.07));color:var(--golddk);font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(176,141,60,.32);box-shadow:0 3px 10px -4px rgba(176,141,60,.3)}
.a5-price .a5-was{font-family:'Fraunces',serif;font-size:30px;color:var(--mut);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(176,141,60,.55);opacity:.75;margin-right:12px;vertical-align:middle}
.a5-price .a5-per{
  font-size:22px;font-style:italic;font-weight:400;
  color:var(--ink2);letter-spacing:0;
}
.a5-trial{
  text-align:center;color:var(--ink2);
  font-size:14.5px;line-height:1.55;
  margin:0 auto 28px;max-width:340px;
}
.a5-trial strong{color:var(--ink);font-weight:600;}

/* lista de incluidos */
.a5-list{list-style:none;margin:0 0 32px;padding:26px 0 0;border-top:1px solid var(--line);}
.a5-list li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;line-height:1.5;color:var(--ink2);
  padding:7px 0;
}
.a5-list li strong{color:var(--ink);font-weight:600;}
.a5-diamond{
  flex:none;width:7px;height:7px;margin-top:7px;
  transform:rotate(45deg);
  background:var(--metal);background-size:220% 100%;
}

/* CTA */
.a5-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:17px 28px;border-radius:14px;
  font-size:16.5px;font-weight:600;letter-spacing:.01em;
  font-family:'Inter',system-ui,sans-serif;
  text-decoration:none;cursor:pointer;border:0;
  background:linear-gradient(180deg,#caa24a,#a5832f);
  color:#fffdf4;
  box-shadow:0 12px 28px -8px rgba(165,131,47,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .a5-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px -8px rgba(165,131,47,.5),inset 0 1px 0 rgba(255,255,255,.4);
  }
}
.a5-btn svg{flex:none;}
.a5-secure{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;font-size:13px;color:var(--mut);
}
.a5-secure svg{flex:none;color:var(--golddk);}
.a5-upsell{margin-top:8px}
.a5-upsell a{color:var(--golddk);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(176,141,60,.4)}

/* --- separador rombo --- */
.a5-sep{
  display:flex;align-items:center;gap:16px;
  max-width:520px;margin:72px auto 64px;
}
.a5-sep::before,.a5-sep::after{content:"";flex:1;height:1px;}
.a5-sep::before{background:linear-gradient(90deg,transparent,var(--line2));}
.a5-sep::after{background:linear-gradient(90deg,var(--line2),transparent);}
.a5-sep i{
  flex:none;width:9px;height:9px;transform:rotate(45deg);
  background:var(--metal);background-size:220% 100%;
}

/* --- FAQ --- */
.a5-faq{max-width:640px;margin:0 auto;}
.a5-faq h3{
  font-family:'Fraunces',serif;font-weight:450;
  font-size:clamp(24px,3vw,30px);letter-spacing:-.01em;
  text-align:center;margin:0 0 32px;
}
.a5-q{
  border-bottom:1px solid var(--line);
}
.a5-q:first-of-type{border-top:1px solid var(--line);}
.a5-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;cursor:pointer;list-style:none;
  font-family:'Fraunces',serif;font-weight:450;
  font-size:18px;color:var(--ink);
  transition:color .15s ease;
}
.a5-q summary::-webkit-details-marker{display:none;}
.a5-q summary:hover{color:var(--golddk);}
.a5-plus{
  flex:none;width:22px;height:22px;position:relative;
  transition:transform .25s ease;
}
.a5-plus::before,.a5-plus::after{
  content:"";position:absolute;background:var(--golddk);
  top:50%;left:50%;
}
.a5-plus::before{width:14px;height:1.5px;transform:translate(-50%,-50%);}
.a5-plus::after{width:1.5px;height:14px;transform:translate(-50%,-50%);}
.a5-q[open] .a5-plus{transform:rotate(45deg);}
.a5-q p{
  margin:0;padding:0 36px 22px 4px;
  font-size:15px;line-height:1.65;color:var(--ink2);
}

/* --- FOOTER --- */
.a5-footer{
  margin-top:104px;
  border-top:1px solid var(--line);
  padding:48px 24px 40px;
}
.a5-footin{
  max-width:1040px;margin:0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.a5-brand{max-width:300px;}
.a5-logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Fraunces',serif;font-weight:500;font-size:21px;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:10px;
}
.a5-logo svg{flex:none;color:var(--golddk);}
.a5-tag{
  font-size:13.5px;line-height:1.6;color:var(--mut);
  font-style:italic;font-family:'Fraunces',serif;font-weight:400;
  margin:0;
}
.a5-cols{display:flex;gap:56px;flex-wrap:wrap;}
.a5-col h4{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);font-weight:600;margin:0 0 14px;
}
.a5-col a{
  display:block;font-size:14px;color:var(--ink2);
  text-decoration:none;padding:4px 0;
  transition:color .15s ease;
}
.a5-col a:hover{color:var(--golddk);}
.a5-legal{
  max-width:1040px;margin:36px auto 0;padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  font-size:12.5px;color:var(--mut);
}
.a5-legal i{
  display:inline-block;width:5px;height:5px;transform:rotate(45deg);
  background:var(--gold);margin:0 2px;vertical-align:middle;opacity:.7;
}

/* --- responsive --- */
@media (max-width:560px){
  .a5-wrap{padding-top:72px;}
  .a5-card{padding:48px 24px 32px;}
  .a5-crown{left:24px;right:24px;}
  .a5-price{font-size:52px;}
  .a5-q summary{font-size:16.5px;}
  .a5-footin{flex-direction:column;gap:36px;}
  .a5-cols{gap:40px;}
  .a5-legal{flex-direction:column;align-items:flex-start;}
}
/* Objetivo tactil de 44px en los enlaces del pie: median 25px de alto, y en el
   movil/tablet se falla el dedo constantemente. Hasta 860px para cubrir tambien
   la tablet vertical (768px). */
@media (max-width:860px){
  .a5-col a{display:flex;align-items:center;min-height:44px;padding:0;}
}
/* La linea del precio («30 € 19,90 €/mes») son tres <span> pegados sin espacio,
   asi que no tiene NINGUN punto de corte: es un bloque indivisible de 287px.
   En la tarjeta solo caben 224px a 320px de ancho, de modo que «/mes» se salia
   de la tarjeta y del viewport (llegaba a 335px con el viewport en 320px).
   Se reduce el cuerpo y, en lo mas estrecho, el precio tachado sube a su
   propia linea. */
@media (max-width:430px){
  .a5-price{font-size:46px;}
  .a5-price .a5-was{font-size:25px;margin-right:9px;}
  .a5-price .a5-per{font-size:18px;}
}
@media (max-width:380px){
  .a5-price .a5-was{display:block;margin:0 0 2px;}
}

/* ---- contacto (formulario → buzón interno vía /api/lead) ---- */
.lc-wrap{max-width:640px;margin:0 auto;scroll-margin-top:24px}
.lc-wrap h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(24px,3.2vw,32px);color:var(--ink);text-align:center;margin:0 0 8px}
.lc-sub{font:400 14.5px/1.6 'Inter',sans-serif;color:var(--ink2);text-align:center;margin:0 0 26px}
.lc-card{background:var(--paper);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:22px;box-shadow:0 24px 60px -18px rgba(90,66,20,.16);padding:28px;position:relative}
.lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lc-grid .lc-full{grid-column:1/-1}
.lc-in{width:100%;font:400 14px/1.4 'Inter',sans-serif;color:var(--ink);background:#fffefdcc;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;outline:0;transition:border-color .18s,box-shadow .18s}
.lc-in::placeholder{color:var(--mut)}
.lc-in:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,60,.13)}
textarea.lc-in{resize:vertical;min-height:104px}
.lc-consent{display:flex;gap:9px;align-items:flex-start;font:400 12px/1.5 'Inter',sans-serif;color:var(--mut);margin:14px 0 16px}
.lc-consent input{margin-top:2px;accent-color:var(--gold)}
.lc-consent a{color:var(--golddk)}
.lc-send{width:100%;justify-content:center}
.lc-err{display:none;font:500 13px/1.4 'Inter',sans-serif;color:#a5352f;margin:12px 0 0}
.lc-ok{display:none;text-align:center;padding:26px 10px}
.lc-ok b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:21px;color:var(--ink);margin-bottom:6px}
.lc-ok p{font:400 13.5px/1.6 'Inter',sans-serif;color:var(--ink2);margin:0}
.lc-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
/* 16px en movil: por debajo de eso iOS hace zoom solo al enfocar el campo y
   deja la pagina descolocada y con scroll lateral. */
@media(max-width:620px){.lc-grid{grid-template-columns:1fr}.lc-card{padding:22px 18px}.lc-in{font-size:16px}}
/* Y en cualquier pantalla tactil (tablet incluida), donde el zoom de iOS pasa
   igual aunque el ancho sea grande. En raton no aplica: el escritorio no cambia. */
@media (pointer:coarse){.lc-in{font-size:16px}}

/* ============ mk- · componentes compartidos de las páginas de producto ============ */
.a1-links a.on{color:var(--ink)}
.a1-links a.on::after{transform:scaleX(1)}
.mk-sec{padding:96px 24px 88px;max-width:1160px;margin:0 auto;color:var(--ink);font-family:'Inter',system-ui,sans-serif}
.mk-sec.tight{padding-top:72px;padding-bottom:64px}
.mk-head{max-width:700px;margin:0 auto 56px;text-align:center}
.mk-head.left{text-align:left;margin:0 0 30px;max-width:none}
.mk-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--golddk);margin-bottom:16px}
.mk-kicker::before,.mk-kicker::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--line2));display:block}
.mk-kicker::after{background:linear-gradient(90deg,var(--line2),transparent)}
.mk-head.left .mk-kicker::after{display:none}
.mk-head.left .mk-kicker::before{width:22px;background:linear-gradient(90deg,transparent,var(--gold))}
.mk-title{font-family:'Fraunces',serif;font-weight:450;font-size:clamp(30px,4.4vw,46px);line-height:1.12;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.mk-head.left .mk-title{font-size:clamp(28px,3.6vw,40px)}
.mk-title em{font-style:italic;background:var(--metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite;padding-right:.08em}
.mk-lead{color:var(--ink2);font-size:16.5px;line-height:1.6;margin:0}
.mk-lead strong{color:var(--ink);font-weight:600}
.mk-card{position:relative;border-radius:20px;background:var(--paper);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 22px 54px -20px rgba(90,66,20,.16);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.mk-card::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(160deg,rgba(176,141,60,.5),rgba(176,141,60,.08) 45%,rgba(176,141,60,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.mk-pad{padding:28px 28px 24px}
.mk-kick{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--golddk);margin:0 0 9px}
.mk-h3{font-family:'Fraunces',serif;font-weight:500;font-size:21px;line-height:1.18;margin:0 0 8px;color:var(--ink)}
.mk-p{font-size:14px;line-height:1.55;color:var(--ink2);margin:0}
.mk-p strong{font-weight:600;color:var(--ink)}
.mk-p+.mk-p{margin-top:8px}
.mk-big{font-family:'Fraunces',serif;font-weight:450;font-size:clamp(34px,4.4vw,48px);line-height:1;background:var(--metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite;display:block}
.mk-grid{display:grid;gap:18px;grid-template-columns:repeat(6,1fr)}
.mk-c2{grid-column:span 2}.mk-c3{grid-column:span 3}.mk-c4{grid-column:span 4}.mk-c6{grid-column:span 6}
.mk-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.mk-split.rev .mk-visual{order:-1}
.mk-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.mk-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink2)}
.mk-list li strong{color:var(--ink);font-weight:600}
.mk-list .a5-diamond{margin-top:8px}
.mk-visual{position:relative;min-width:0}
.mk-screen{position:relative;border-radius:22px;background:var(--paper);box-shadow:0 30px 70px -26px rgba(90,66,20,.3);padding:18px;border:1px solid var(--line2);font-family:'Inter',system-ui,sans-serif}
.mk-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.mk-note{font-size:13px;color:var(--mut);margin-top:14px;line-height:1.5}
.mk-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.mk-proof span{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink2)}
/* tarjetas de producto (portada) */
.mk-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk-prod{padding:30px 28px 26px;text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
@media (hover:hover) and (pointer:fine){.mk-prod:hover{transform:translateY(-4px);box-shadow:0 32px 72px -18px rgba(90,66,20,.22)}}
.mk-prod-ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(176,141,60,.1);border:1px solid var(--line);margin-bottom:18px}
.mk-prod-ico img{width:44px;height:44px;display:block}
.mk-prod h3{font-family:'Fraunces',serif;font-weight:500;font-size:24px;margin:0 0 6px;color:var(--ink)}
.mk-prod .mk-tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--golddk);margin:0 0 14px}
.mk-prod ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.mk-prod li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--ink2)}
.mk-prod li .a5-diamond{margin-top:7px}
.mk-prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--line);margin-top:auto}
.mk-prod-price{font-family:'Fraunces',serif;font-size:15px;color:var(--ink2)}
.mk-prod-price b{font-size:22px;font-weight:500;color:var(--ink)}
.mk-prod-price s{color:var(--mut);font-size:13px;margin-right:6px;text-decoration-color:rgba(176,141,60,.55)}
.mk-prod-go{font-size:13.5px;font-weight:600;color:var(--golddk);white-space:nowrap}
/* «se hablan entre ellos» */
.mk-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:8px}
.mk-flow::before{content:"";position:absolute;top:30px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--line2) 12%,rgba(176,141,60,.45) 50%,var(--line2) 88%,transparent)}
.mk-flow-step{position:relative;padding:0 22px;text-align:center}
.mk-flow-ico{position:relative;z-index:1;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--paper);box-shadow:0 10px 26px -12px rgba(90,66,20,.25),inset 0 0 0 1px var(--line2)}
.mk-flow-ico img{width:40px;height:40px;display:block}
.mk-flow h3{font-family:'Fraunces',serif;font-weight:500;font-size:18px;margin:0 0 6px;color:var(--ink)}
.mk-flow p{font-size:13.5px;line-height:1.5;color:var(--ink2);margin:0}
/* precio en 3 columnas (portada) */
.mk-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1080px;margin:0 auto}
.mk-price{padding:36px 28px 30px;text-align:center;display:flex;flex-direction:column}
.mk-price .a5-list{flex:1}
.mk-price .a5-btn{margin-top:auto}
.mk-price .a5-plan{margin:0 0 10px}
.mk-price .a5-price{font-size:46px}
.mk-price .a5-price .a5-was{font-size:22px;margin-right:8px}
.mk-price .a5-price .a5-per{font-size:17px}
.mk-price .a5-trial{font-size:13.5px;margin-bottom:20px;max-width:none}
.mk-price .a5-list{margin-bottom:22px;padding-top:18px;text-align:left}
.mk-price .a5-list li{font-size:14px;padding:5px 0}
.mk-price .a5-btn{padding:14px 20px;font-size:15px}
.mk-price.featured::before{background:linear-gradient(160deg,rgba(176,141,60,.85),rgba(176,141,60,.25) 40%,rgba(176,141,60,.7))}
/* pack: los tres productos */
.mk-suite{max-width:1080px;margin:18px auto 0;padding:30px 34px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:center}
.mk-suite::before{background:linear-gradient(160deg,rgba(176,141,60,.9),rgba(176,141,60,.25) 40%,rgba(176,141,60,.75))}
.mk-suite h3{font-family:'Fraunces',serif;font-weight:450;font-size:clamp(24px,3vw,32px);line-height:1.15;margin:6px 0 10px;color:var(--ink)}
.mk-suite h3 em{font-style:italic;background:var(--metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite;padding-right:.08em}
.mk-suite p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}
.mk-suite .a5-plan{text-align:left;margin:0}
.mk-suite-r{text-align:center}
.mk-suite-r .a5-price{font-size:52px;margin-bottom:12px}
.mk-suite-r .a5-price .a5-was{font-size:24px}
.mk-suite-r .a5-secure{margin-top:10px}
.mk-suite-items{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mk-suite-items span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);border:1px solid var(--line2);border-radius:20px;padding:5px 12px 5px 8px;background:rgba(255,255,254,.55)}
.mk-suite-items img{width:18px;height:18px}
.mk-suite-items span.soon{opacity:.6;font-style:italic}
@media (max-width:900px){.mk-suite{grid-template-columns:1fr;max-width:480px;padding:26px 24px;text-align:center}.mk-suite .a5-plan{text-align:center}.mk-suite-items{justify-content:center}}
/* «Próximamente» en tarjetas y botones suaves (avísame) */
.mk-soon{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--golddk)}
.mk-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(176,141,60,.18)}
.mk-tag em{font-style:normal;color:var(--mut);font-weight:600}
.a5-btn.soft{background:rgba(255,255,254,.85);color:var(--ink);border:1px solid var(--line2);box-shadow:0 4px 14px -6px rgba(90,66,20,.12)}
.a1-ico{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
/* mockups: barra, chips de estado, filas */
.mk-mock{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--ink)}
.mk-mock-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mk-mock-bar b{font-family:'Fraunces',serif;font-weight:500;font-size:15px}
.mk-mock-bar span{font-size:11.5px;color:var(--mut)}
.mk-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.mk-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.mk-chip.libre{color:#2f6b3a;background:rgba(72,150,88,.14)}
.mk-chip.res{color:#8a6d2e;background:rgba(201,162,75,.2)}
.mk-chip.tarde{color:#a35a12;background:rgba(214,132,45,.16)}
.mk-chip.sent{color:#25507a;background:rgba(58,110,160,.16)}
.mk-chip.recog{color:#6a3f86;background:rgba(140,90,170,.16)}
.mk-chip.novino{color:#6b6b6b;background:rgba(120,120,120,.14)}
.mk-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px dashed var(--line)}
.mk-row:last-child{border-bottom:0}
.mk-row .t{font-variant-numeric:tabular-nums;color:var(--golddk);font-weight:600;width:44px;flex:none}
.mk-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.mk-row .m{color:var(--mut);font-size:12px;white-space:nowrap}
/* responsive */
@media (max-width:980px){
  .mk-products{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .mk-flow{grid-template-columns:1fr 1fr;gap:28px 0}
  .mk-flow::before{display:none}
}
@media (max-width:900px){
  .mk-grid{grid-template-columns:repeat(2,1fr)}
  .mk-c2,.mk-c3,.mk-c4,.mk-c6{grid-column:span 2}
  .mk-split{grid-template-columns:1fr;gap:36px}
  .mk-split.rev .mk-visual{order:0}
  .mk-prices{grid-template-columns:1fr;max-width:480px}
}
@media (max-width:560px){
  .mk-sec{padding:70px 18px 60px}
  .mk-sec.tight{padding-top:56px;padding-bottom:48px}
  .mk-pad{padding:24px 20px 20px}
  .mk-grid{grid-template-columns:1fr}
  .mk-c2,.mk-c3,.mk-c4,.mk-c6{grid-column:span 1}
  .mk-flow{grid-template-columns:1fr}
  .mk-screen{padding:14px}
}
@media (prefers-reduced-motion:reduce){.mk-title em,.mk-big{animation:none}}