/* ============================================================
   Benstudios — portada (landing). Se carga DESPUÉS de style.css y
   solo en index.php: no afecta carrito, ayuda, privacidad, etc.
   ============================================================ */

body.landing{
  --font-serif:'Newsreader','Georgia','Times New Roman',serif;
  --land-bg:#FBFBFA;
  background:var(--land-bg);
}

/* ---- Tipografía serif en títulos grandes ---- */
body.landing .hero h1,
body.landing .section-head h2,
body.landing .feature-copy h2,
body.landing .final-cta h2{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.022em;
  line-height:1.14;
}
body.landing .hero h1{ font-size:clamp(32px,4.4vw,52px); max-width:20ch; margin:0 auto; }
body.landing .section-head h2,
body.landing .feature-copy h2{ font-size:clamp(26px,3.3vw,40px); }
body.landing .final-cta h2{ font-size:clamp(26px,3.6vw,38px); }

/* Subrayado suave sobre la palabra clave (como en CloudSpot) */
.hl{
  font-style:normal;
  color:inherit;
  background:linear-gradient(transparent 82%, var(--accent-pastel) 82%, var(--accent-pastel) 94%, transparent 94%);
  padding:0 .04em;
}

/* ---- Botones más planos ---- */
body.landing .btn{ border-radius:8px; letter-spacing:.045em; text-transform:uppercase; font-size:12.5px; padding:14px 26px; }
body.landing .btn-sm{ padding:10px 18px; font-size:12px; }
body.landing .btn-primary{ box-shadow:none; }
body.landing .nav{ background:rgba(255,255,255,.92); }
body.landing .nav-links{ gap:34px; }
body.landing .nav-links a{ font-weight:600; }

/* ---- Etiqueta redondeada de sección ---- */
.pill-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:999px; padding:8px 16px;
  margin-bottom:22px;
}
.pill-label .icon{ width:15px; height:15px; color:var(--accent-deep); }
.pill-label.gold .icon{ color:var(--gold); }
.pill-label.purple .icon{ color:var(--purple-deep); }
.pill-label.green .icon{ color:var(--green); }

/* ============================================================
   HERO
   ============================================================ */
.hero-land{ padding:72px 0 30px; text-align:center;
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(168,181,210,.35), transparent 70%),
    var(--land-bg);
}
.hero-land .hero-sub{ margin:24px auto 0; max-width:56ch; font-size:18px; }
.hero-land .hero-actions{ justify-content:center; }
.hero-land .trust-row{ justify-content:center; }
.hero-shot{ margin:54px auto 0; max-width:960px; text-align:left; }

/* ============================================================
   VENTANA DE LA APP (mock)
   ============================================================ */
.win{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 40px 80px -40px rgba(40,40,38,.35), 0 8px 24px -12px rgba(40,40,38,.10);
  overflow:hidden; text-align:left;
}
.win-bar{ display:flex; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.win-dots{ display:flex; gap:6px; }
.win-dots span{ width:9px; height:9px; border-radius:99px; background:var(--border-strong); }
.win-title{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; }
.win-body{ background:#F4F4F5; padding:16px; }

.m-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.m-brand{ display:flex; align-items:center; gap:9px; }
.m-logo{ width:26px; height:26px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.m-brand b{ font-size:12.5px; color:var(--ink); display:block; line-height:1.15; }
.m-brand small{ font-size:10px; color:var(--muted); }

.m-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 14px; }
.m-card h4{ font-family:var(--font-display); font-size:12.5px; font-weight:800; color:var(--ink); margin:0 0 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.m-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.m-stats.four{ grid-template-columns:repeat(4,1fr); }
.m-stat{ background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:11px 12px; }
.m-stat .ico{ width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.m-stat .ico .icon{ width:14px; height:14px; }
.m-stat .ico.gold{ background:var(--gold-soft); color:var(--gold); }
.m-stat .ico.green{ background:var(--green-soft); color:var(--green); }
.m-stat .ico.purple{ background:var(--purple-soft); color:var(--purple-deep); }
.m-stat .v{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1; }
.m-stat .l{ font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.3; }
.m-grid2{ display:grid; grid-template-columns:1.2fr 1fr; gap:12px; }
.m-list{ display:flex; flex-direction:column; gap:7px; }
.m-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#F4F4F5; border-radius:10px; padding:9px 11px; font-size:12px; }
.m-row .nm{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); min-width:0; }
.m-row .nm i{ width:7px; height:7px; border-radius:99px; background:var(--accent); flex-shrink:0; }
.m-row .nm i.gold{ background:var(--gold); }
.m-row .nm i.purple{ background:var(--purple); }
.m-row .nm span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-row .rt{ display:flex; align-items:center; gap:7px; color:var(--muted); font-variant-numeric:tabular-nums; font-size:11.5px; flex-shrink:0; }
.m-row .money{ font-weight:800; color:var(--ink); }

.m-pill{ display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:3px 8px; border-radius:99px; background:var(--accent-soft); color:var(--accent-deep); white-space:nowrap; }
.m-pill.ok{ background:var(--green-soft); color:var(--green); }
.m-pill.warn{ background:var(--gold-soft); color:var(--gold); }
.m-pill.bad{ background:#FBEAE7; color:#B8483B; }
.m-pill.purple{ background:var(--purple-soft); color:var(--purple-deep); }
.m-pill.mute{ background:#EDEDEB; color:var(--muted); }
.m-pill .icon{ width:10px; height:10px; }

/* Filtros / barra de herramientas del mock */
.m-tools{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.m-chip{ font-size:10.5px; font-weight:600; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:6px 10px; white-space:nowrap; }
.m-chip.on{ background:#FBEAE7; border-color:#EBC2BB; color:#B8483B; }
.m-seg{ margin-left:auto; display:flex; border:1px solid var(--border-strong); border-radius:99px; overflow:hidden; background:var(--surface); }
.m-seg button{ border:none; background:transparent; cursor:pointer; padding:6px 11px; color:var(--muted); display:flex; align-items:center; }
.m-seg button .icon{ width:14px; height:14px; }
.m-seg button.on{ background:var(--accent-soft); color:var(--accent-deep); }

/* Tarjeta de boda del mock */
.m-bodas.lista{ display:flex; flex-direction:column; gap:9px; }
.m-bodas.grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.m-boda{ background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:11px 13px; }
.m-boda .t{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px; }
.m-boda .t b{ font-family:var(--font-display); font-size:13px; color:var(--ink); }
.m-boda .t small{ font-size:10.5px; color:var(--muted); font-weight:600; }
.m-boda .t .money{ font-size:11px; font-weight:800; color:var(--accent-deep); }
.m-boda .eq{ font-size:10.5px; color:var(--green); font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.m-boda .eq .icon{ width:11px; height:11px; }
.m-boda .pl{ display:flex; gap:5px; flex-wrap:wrap; }
.m-bodas.grid .m-boda .t{ flex-direction:column; align-items:flex-start; gap:2px; }

/* Formulario */
.m-link{ display:flex; gap:8px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:9px 10px; margin-bottom:12px; }
.m-link .u{ flex:1; font-size:10.5px; color:var(--ink-soft); background:#F4F4F5; border-radius:8px; padding:7px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-link .b{ font-size:10.5px; font-weight:700; color:var(--ink); border:1px solid var(--border-strong); border-radius:8px; padding:6px 11px; display:flex; align-items:center; gap:5px; }
.m-link .b .icon{ width:11px; height:11px; }
.m-field{ display:flex; align-items:center; gap:9px; background:#F4F4F5; border-radius:10px; padding:9px 11px; margin-bottom:7px; font-size:12px; font-weight:700; color:var(--ink); }
.m-check{ width:14px; height:14px; border-radius:4px; border:1.5px solid var(--border-strong); background:var(--surface); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.m-check.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.m-check .icon{ width:10px; height:10px; stroke-width:3; }
.m-field .tags{ display:flex; gap:4px; margin-left:4px; }
.m-field .tags em{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--accent-deep); background:var(--accent-soft); padding:2px 7px; border-radius:99px; }
.m-sec{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin:12px 0 8px; }

/* Gastos */
.m-gasto-mes{ display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:10px 0 6px; }
.m-gasto-mes b{ color:#B8483B; }
.m-gasto{ display:flex; justify-content:space-between; align-items:center; background:#F4F4F5; border-radius:9px; padding:7px 10px; margin-bottom:5px; font-size:11.5px; }
.m-gasto small{ display:block; font-size:10px; color:var(--muted); }
.m-gasto b{ color:var(--ink); font-weight:700; }
.m-gasto .neg{ color:#B8483B; font-weight:800; }

/* Donut y barras */
.m-donut{ width:92px; height:92px; border-radius:50%; position:relative; flex-shrink:0;
  background:conic-gradient(var(--accent) 0 38%, var(--gold) 38% 63%, var(--purple) 63% 82%, var(--green) 82% 100%); }
.m-donut::after{ content:""; position:absolute; inset:22px; background:var(--surface); border-radius:50%; }
.m-legend{ display:flex; flex-direction:column; gap:7px; font-size:11px; color:var(--ink-soft); }
.m-legend span{ display:flex; align-items:center; gap:7px; }
.m-legend i{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.m-legend em{ font-style:normal; color:var(--muted); }
.m-bars{ display:flex; align-items:flex-end; gap:6px; height:84px; padding-top:6px; }
.m-bars div{ flex:1; background:var(--accent-pastel); border-radius:5px 5px 2px 2px; position:relative; }
.m-bars div.hi{ background:var(--accent); }
.m-bars-lbl{ display:flex; gap:6px; margin-top:6px; }
.m-bars-lbl span{ flex:1; text-align:center; font-size:9px; color:var(--muted); }
.m-proy{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.m-proy div{ border:1px solid var(--border); border-radius:11px; padding:10px 11px; }
.m-proy b{ display:block; font-family:var(--font-display); font-size:22px; color:var(--ink); line-height:1; }
.m-proy b.g{ color:var(--green); }
.m-proy span{ font-size:10.5px; color:var(--muted); display:block; margin-top:4px; line-height:1.3; }

/* Calendario */
.m-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.m-cal .dow{ font-size:9.5px; font-weight:700; color:var(--muted); text-align:center; padding-bottom:3px; }
.m-cal .d{ min-height:52px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:4px 4px 3px; font-size:10px; color:var(--ink-soft); display:flex; flex-direction:column; gap:3px; }
.m-cal .d.off{ background:transparent; border-color:transparent; }
.m-cal .d.today{ border:1.5px solid var(--green); background:var(--green-soft); color:var(--green); font-weight:800; }
.m-cal .ev{ font-size:8.5px; font-weight:700; color:#fff; border-radius:4px; padding:2px 4px; background:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-cal .ev.gold{ background:var(--gold); }
.m-cal .ev.purple{ background:var(--purple); }
.m-gcal{ display:flex; align-items:center; gap:9px; background:var(--green-soft); border:1px solid #BFE0D2; border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:11.5px; font-weight:700; color:var(--ink); }
.m-gcal i{ width:8px; height:8px; border-radius:99px; background:var(--green); }
.m-gcal span{ margin-left:auto; font-size:10.5px; font-weight:700; border:1px solid var(--border-strong); background:var(--surface); border-radius:8px; padding:5px 10px; }

/* ============================================================
   COMPARACIÓN
   ============================================================ */
body.landing .section-alt{ background:#F3F3F1; }
body.landing .section{ padding:104px 0; }
body.landing .compare-card{ border-radius:20px; padding:30px; }

/* ============================================================
   FILAS DE FUNCIONALIDADES
   ============================================================ */
.feature-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:68px; align-items:center; }
.feature.reverse .feature-grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); }
.feature.reverse .feature-copy{ order:2; }
.feature.reverse .feature-shot{ order:1; }
.feature-copy p.lead{ margin-top:18px; font-size:16.5px; line-height:1.65; color:var(--muted); max-width:46ch; }
.check-grid{ list-style:none; margin:28px 0 32px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; }
.check-grid li{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.45; }
.check-grid .ic{ width:32px; height:32px; border-radius:9px; border:1px solid var(--border-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-deep); }
.check-grid .ic .icon{ width:16px; height:16px; }
.check-grid.gold .ic{ color:var(--gold); }
.check-grid.purple .ic{ color:var(--purple-deep); }
.check-grid.green .ic{ color:var(--green); }
.feature-note{ font-size:12px; color:var(--muted); margin-top:14px; }
.feature-shot .win{ transform:rotate(0); }

/* ============================================================
   "Y ADEMÁS"
   ============================================================ */
.extras{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.extra{ flex:0 0 calc((100% - 36px) / 3); background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 24px; }
.extra .ic{ width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.extra .ic .icon{ width:20px; height:20px; }
.extra h3{ font-size:16px; font-weight:800; margin-bottom:7px; }
.extra p{ font-size:13.5px; color:var(--muted); line-height:1.55; }

/* ============================================================
   REVEAL
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .feature-grid, .feature.reverse .feature-grid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .feature.reverse .feature-copy, .feature.reverse .feature-shot{ order:initial; }
  .extra{ flex-basis:calc((100% - 18px) / 2); }
  body.landing .section{ padding:76px 0; }
}
@media (max-width: 640px){
  .hero-land{ padding:48px 0 10px; }
  .hero-shot{ margin-top:36px; }
  .check-grid{ grid-template-columns:minmax(0,1fr); }
  .extra{ flex-basis:100%; }
  .m-stats, .m-stats.four{ grid-template-columns:1fr 1fr; }
  .m-grid2{ grid-template-columns:1fr; }
  .m-bodas.grid{ grid-template-columns:1fr; }
  .win-body{ padding:12px; }
  .m-cal .d{ min-height:40px; }
  .m-cal .ev{ font-size:0; padding:2px; height:6px; }
  .m-proy{ grid-template-columns:1fr; }
  body.landing .btn{ padding:13px 20px; }
}

.feature-copy,.feature-shot,.win,.win-body{ min-width:0; }
.win-body{ overflow:hidden; }
@media (max-width: 480px){
  .landing .nav-inner{ padding:12px 16px; gap:8px; }
  .landing .nav-actions{ gap:6px; }
  .landing .nav-actions .btn{ padding:10px 12px; font-size:11.5px; letter-spacing:.02em; }
  .landing .brand{ font-size:17px; }
}
.m-gasto .neg{white-space:nowrap;}


/* ---- Hero a pantalla completa con foto ---- */
body.landing .hero-photo{
  position:relative; padding:0; text-align:left; color:#fff;
  min-height:max(560px, calc(100vh - 64px)); min-height:max(560px, calc(100svh - 64px)); display:flex; align-items:center;
  background:#1d2230 url(../img/hero-fondo.jpg) right 45% / cover no-repeat;
}
body.landing .hero-photo::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(16,20,34,.88) 0%, rgba(16,20,34,.72) 30%, rgba(16,20,34,.18) 58%, rgba(16,20,34,0) 78%),
    linear-gradient(0deg, rgba(16,20,34,.35) 0%, rgba(16,20,34,0) 30%);
}
body.landing .hero-photo .container{ position:relative; z-index:1; width:100%; }
body.landing .hero-copy{ max-width:520px; padding:70px 0; }
body.landing .hero-photo .pill-label{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(6px); }
body.landing .hero-photo .pill-label .icon{ color:#fff; }
body.landing .hero-photo h1{
  font-size:clamp(26px,3vw,40px); font-weight:600; letter-spacing:-0.015em; line-height:1.2;
  max-width:none; margin:20px 0 0; color:#fff;
}
body.landing .hero-photo .hl{ background:linear-gradient(transparent 88%, rgba(160,178,226,.85) 88%, rgba(160,178,226,.85) 94%, transparent 94%); }
body.landing .hero-photo .hero-sub{ margin:18px 0 0; max-width:46ch; font-size:16px; line-height:1.65; color:rgba(255,255,255,.86); font-weight:400; }
body.landing .hero-photo .hero-actions{ justify-content:flex-start; margin-top:30px; }
body.landing .btn-light{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(6px); }
body.landing .btn-light:hover{ background:rgba(255,255,255,.24); }
body.landing .hero-photo .trust-row{ justify-content:flex-start; margin-top:26px; gap:18px; flex-wrap:wrap; }
body.landing .hero-photo .trust-item{ color:rgba(255,255,255,.82); font-size:12.5px; font-weight:500; }
body.landing .hero-photo .trust-item .icon{ color:rgba(255,255,255,.9); }
/* títulos de sección más finos y chicos */
body.landing .section-head h2, body.landing .feature-copy h2{ font-size:clamp(23px,2.5vw,32px); font-weight:600; letter-spacing:-0.015em; line-height:1.22; }
body.landing .final-cta h2{ font-size:clamp(23px,2.8vw,32px); font-weight:600; letter-spacing:-0.015em; }
@media (max-width:760px){
  body.landing .hero-photo{ display:block; min-height:0; background:#101422 url(../img/hero-fondo.jpg) 84% 0 / auto 330px no-repeat; padding-top:290px; }
  body.landing .hero-photo::before{ background:linear-gradient(0deg, #101422 0%, #101422 56%, rgba(16,20,34,.55) 74%, rgba(16,20,34,0) 100%); }
  body.landing .hero-copy{ padding:0 0 38px; max-width:none; }
  body.landing .hero-photo h1{ font-size:25px; }
}

.m-boda .eq.warn{ color:var(--gold); }


.ptabs{ display:flex; gap:8px; flex-wrap:wrap; }
.ptab{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .15s,color .15s,border-color .15s; }
.ptab .icon{ width:15px; height:15px; color:var(--accent-deep); }
.ptab:hover{ border-color:var(--accent); }
.ptab.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.ptab.on .icon{ color:#fff; }
.ppanel[hidden]{ display:none; }
.ppanel .feature-copy h2{ margin-top:22px; }