/* ============================================================
   MALLA — landing.css
   ------------------------------------------------------------
   Public (logged-out) marketing landing for Modo Iberia.
   Loaded only by partials/landing_iberia_public.html.
   Namespace: lp- (page structure) · mk- (hero SVG mock) ·
   ci- (capability micro-diagrams).
   Palette discipline: every colour comes from base.css tokens
   (var(--accent) etc.) or from the local derivatives declared
   below. White-alpha surfaces follow the same rgba(255,255,255,·)
   vocabulary base.css uses for glass fills.
   ============================================================ */

:root{
  /* rgb triplet derived from --pos (#3ddc9a) for alpha mixes */
  --lp-pos-rgb:61,220,154;
  /* dark inner "well" surface used by the SVG mock, matches .pl-modal-input */
  --lp-well:rgba(0,0,0,.26);
  --lp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Shared section vocabulary
   ============================================================ */
.lp-panel{padding:30px 34px;border-radius:26px}

.lp-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px 14px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:24px;
}
.lp-head h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,2.6vw,28px);letter-spacing:-.015em;line-height:1.05;
}
.lp-head h2 em{font-style:italic;color:var(--accent)}
.lp-head .meta{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);text-align:right;white-space:nowrap;
}

.lp-eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-dim);
  display:inline-flex;align-items:center;gap:10px;
}
.lp-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);box-shadow:0 0 14px var(--accent);
}

.lp-sub{
  margin:16px 0 0;font-family:var(--font-sans);font-size:14.5px;
  color:var(--ink-dim);line-height:1.6;max-width:54ch;
}

.lp-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.lp-cta-row .btn-primary,
.lp-cta-row .btn-ghost{text-decoration:none;display:inline-block}

.lp-fine{
  margin-top:14px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);line-height:1.7;
}

/* ============================================================
   1 · HERO
   ============================================================ */
.lp-hero{padding:38px 40px 30px;border-radius:26px}
.lp-hero > .content{
  display:grid;grid-template-columns:1.04fr .96fr;gap:20px 40px;align-items:center;
}
.lp-hero h1{
  margin:16px 0 0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,4.4vw,50px);line-height:1.02;letter-spacing:-.02em;
}
.lp-hero h1 em{font-style:italic;color:var(--accent)}

/* hero stat strip spans both hero columns */
.lp-strip{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);margin-top:14px;padding-top:18px;
}
.lp-strip .c{padding:0 22px;border-right:1px solid var(--rule)}
.lp-strip .c:first-child{padding-left:0}
.lp-strip .c:last-child{border-right:none;padding-right:0}
.lp-strip .v{
  font-family:var(--font-display);font-size:clamp(20px,2vw,26px);
  letter-spacing:-.015em;line-height:1;color:var(--ink);
}
.lp-strip .k{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-label);margin-top:7px;line-height:1.5;
}

/* ---- hero SVG mock (tear-sheet) ---- */
.lp-mock{min-width:0}
.lp-mock-svg{
  width:100%;height:auto;display:block;max-width:460px;margin:0 auto;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.45));
}
.mk-card{fill:var(--lp-well);stroke:rgba(255,255,255,.09);stroke-width:1}
.mk-dot{fill:var(--accent)}
.mk-rule{stroke:var(--rule);stroke-width:1}
.mk-eyebrow{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;
  fill:var(--ink-label);
}
.mk-eyebrow.mk-dim{fill:var(--ink-mute)}
.mk-name{font-family:var(--font-display);font-size:21px;letter-spacing:-.01em;fill:var(--ink)}
.mk-meta{font-family:var(--font-mono);font-size:8px;letter-spacing:.12em;fill:var(--ink-mute)}
.mk-lbl{font-family:var(--font-mono);font-size:8px;letter-spacing:.14em;fill:var(--ink-label)}
.mk-score{font-family:var(--font-display);font-size:30px;letter-spacing:-.02em;fill:var(--ink)}
.mk-chip{font-family:var(--font-mono);font-size:8px;letter-spacing:.18em;fill:var(--pos)}
.mk-pos{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;fill:var(--pos)}
.mk-val{font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;fill:var(--ink)}
.mk-k{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.16em;fill:var(--ink-mute)}
.mk-v{font-family:var(--font-display);font-size:18px;letter-spacing:-.01em;fill:var(--ink)}
.mk-foot{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.1em;fill:var(--ink-mute)}
.mk-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
.mk-arc{
  fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:251.33;stroke-dashoffset:55.3;  /* 78 / 100 */
}
.mk-bar{fill:rgba(255,255,255,.06)}
.mk-fill--dim{fill:rgba(255,255,255,.26)}
.mk-fill--accent{fill:var(--accent)}

/* ============================================================
   2 · CÓMO FUNCIONA — connected steps, not cards
   ============================================================ */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lp-step{position:relative;padding:26px 30px 4px 0}
.lp-step::before{
  content:"";position:absolute;top:3px;left:0;right:0;height:1px;
  background:var(--rule-2);
}
.lp-step:first-child::before{
  background:linear-gradient(90deg, rgba(var(--accent-rgb),.65), var(--rule-2) 70%);
}
.lp-step:last-child::before{
  background:linear-gradient(90deg, var(--rule-2), transparent);
}
.lp-step::after{
  content:"";position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
}
.lp-step .n{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--accent);
}
.lp-step .t{
  margin-top:10px;font-family:var(--font-display);font-size:20px;
  letter-spacing:-.01em;color:var(--ink);line-height:1.1;
}
.lp-step .d{
  margin:9px 0 0;font-family:var(--font-sans);font-size:13px;
  color:var(--ink-dim);line-height:1.6;
}

/* ============================================================
   3 · CAPACIDADES — asymmetric grid: 2 large + 4 compact
   ============================================================ */
.lp-caps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lp-cap{
  padding:18px 18px 16px;border-radius:16px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:9px;min-width:0;
}
.lp-cap--big{grid-column:span 2;padding:22px 24px 20px;gap:10px}
.lp-cap .k{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-mute);
}
.lp-cap .t{
  font-family:var(--font-display);font-size:19px;letter-spacing:-.01em;
  color:var(--ink);line-height:1.1;
}
.lp-cap--big .t{font-size:23px}
.lp-cap .d{
  margin:0;font-family:var(--font-sans);font-size:12.5px;
  color:var(--ink-dim);line-height:1.55;
}
.lp-cap svg{width:100%;height:auto;display:block;margin-top:auto;padding-top:10px}
.lp-ico--sm{max-width:130px;margin-left:0}

/* capability micro-diagram strokes/fills */
.ci-line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}
.ci-area{fill:rgba(var(--accent-rgb),.12);stroke:none}
.ci-mark{stroke:rgba(255,255,255,.25);stroke-width:1;stroke-dasharray:3 3}
.ci-mark--accent{stroke:var(--accent);stroke-dasharray:none;stroke-width:1.4}
.ci-tag{font-family:var(--font-mono);font-size:6.5px;letter-spacing:.12em;fill:var(--ink-mute)}
.ci-tag--accent{fill:var(--accent)}
.ci-tag--pos{fill:var(--pos)}
.ci-base{stroke:var(--rule-2);stroke-width:1}
.ci-blk{fill:rgba(255,255,255,.14)}
.ci-blk--pos{fill:rgba(var(--lp-pos-rgb),.55)}
.ci-link{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:2 3}
.ci-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:5}
.ci-ring{
  fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:94.25;stroke-dashoffset:20.7;  /* 78 / 100 */
}
.ci-bar{fill:rgba(255,255,255,.06)}
.ci-bfill{fill:rgba(255,255,255,.28)}
.ci-bfill--accent{fill:var(--accent)}
.ci-doc{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.22);stroke-width:1}
.ci-doc--accent{fill:rgba(var(--accent-rgb),.3);stroke:rgba(var(--accent-rgb),.5)}
.ci-doc--pos{fill:rgba(var(--lp-pos-rgb),.25);stroke:rgba(var(--lp-pos-rgb),.45)}

/* discreet hover lift, pointer devices only */
@media (hover:hover){
  .lp-cap{transition:transform .25s var(--lp-ease), border-color .25s var(--lp-ease)}
  .lp-cap:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.35)}
}

/* ============================================================
   4 · RIGOR — credibility band
   ============================================================ */
.lp-rigor-grid{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:20px 44px;align-items:start;
}
.lp-rigor-copy h2{
  margin:14px 0 0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3vw,32px);letter-spacing:-.018em;line-height:1.05;
}
.lp-rigor-copy h2 em{font-style:italic;color:var(--accent)}

.lp-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:18px 0;
}
.lp-stat{padding:0 20px;border-right:1px solid var(--rule)}
.lp-stat:first-child{padding-left:0}
.lp-stat:last-child{border-right:none;padding-right:0}
.lp-stat .v{
  font-family:var(--font-display);font-size:clamp(30px,3.2vw,40px);
  letter-spacing:-.02em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.lp-stat .v small{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--ink-dim);margin-left:3px;
}
.lp-stat .k{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-label);margin-top:9px;line-height:1.55;
}

.lp-prov{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.lp-prov-row{
  display:flex;gap:12px;align-items:baseline;
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-dim);line-height:1.55;
}
.lp-tag{
  flex:0 0 auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}

/* ============================================================
   5 · CONFIDENCIALIDAD — sober ledger rows
   ============================================================ */
.lp-conf-rows{display:flex;flex-direction:column}
.lp-conf-row{
  display:grid;grid-template-columns:60px 250px 1fr;gap:6px 22px;
  padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.lp-conf-row:last-child{border-bottom:none}
.lp-conf-row .idx{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-mute);
}
.lp-conf-row .t{
  font-family:var(--font-display);font-size:17.5px;letter-spacing:-.008em;color:var(--ink);
}
.lp-conf-row .d{
  margin:0;font-family:var(--font-sans);font-size:12.5px;
  color:var(--ink-dim);line-height:1.6;
}
.lp-legal{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-mute);
}
.lp-legal a{color:var(--ink-dim);text-decoration:none;transition:color .15s ease}
.lp-legal a:hover{color:var(--accent)}

/* ============================================================
   6 · PRECIOS (teaser) + CTA FINAL
   ============================================================ */
.lp-price-rows{display:flex;flex-direction:column}
.lp-price-row{
  display:grid;grid-template-columns:190px 1fr auto;gap:6px 22px;align-items:baseline;
  padding:15px 10px;border-bottom:1px solid var(--rule);
  text-decoration:none;border-left:2px solid transparent;margin-left:-10px;
  transition:background .15s ease, border-color .15s ease;
}
.lp-price-row:hover{background:rgba(255,255,255,.03)}
.lp-price-row--featured{border-left-color:var(--accent)}
.lp-price-row .nm{
  font-family:var(--font-display);font-size:19px;letter-spacing:-.008em;color:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
}
.lp-price-row .tg{
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-dim);line-height:1.5;
}
.lp-price-row .pr{
  font-family:var(--font-display);font-size:23px;letter-spacing:-.015em;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lp-price-row .pr small{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--ink-dim);
}
.lp-price-foot{
  margin-top:16px;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-dim);
}
.lp-price-foot a{color:var(--accent);text-decoration:none;margin-left:6px}
.lp-price-foot a:hover{text-decoration:underline}

.lp-final{padding:38px 40px;border-radius:26px}
.lp-final > .content{
  display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;
}
.lp-final h2{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(24px,3.2vw,36px);letter-spacing:-.018em;line-height:1.05;
}
.lp-final h2 em{font-style:italic;color:var(--accent)}
.lp-final .lp-fine{margin-top:10px}
.lp-final .lp-cta-row{margin-top:0}

/* ============================================================
   Reveal transitions — IntersectionObserver adds .is-in; the
   stagger (70 ms per sibling) is timed from JS so hover lifts
   never inherit a transition-delay. Gated behind html.lp-anim
   (only set when JS runs and motion is allowed) so content is
   always visible without JS.
   ============================================================ */
html.lp-anim [data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity .42s var(--lp-ease), transform .42s var(--lp-ease);
}
html.lp-anim [data-reveal].is-in{opacity:1;transform:none}

/* hero-mock choreography: bars grow, ring sweeps once revealed */
html.lp-anim .lp-mock .mk-fill--dim,
html.lp-anim .lp-mock .mk-fill--accent{
  transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
  transition:transform .7s var(--lp-ease) .28s;
}
html.lp-anim .lp-mock.is-in .mk-fill--dim,
html.lp-anim .lp-mock.is-in .mk-fill--accent{transform:scaleX(1)}
html.lp-anim .lp-mock .mk-arc{
  stroke-dashoffset:251.33;
  transition:stroke-dashoffset .9s var(--lp-ease) .3s;
}
html.lp-anim .lp-mock.is-in .mk-arc{stroke-dashoffset:55.3}

@media (prefers-reduced-motion: reduce){
  [data-reveal],
  .lp-mock .mk-fill--dim,.lp-mock .mk-fill--accent,.lp-mock .mk-arc,
  .lp-cap,.lp-price-row{
    opacity:1 !important;transform:none !important;
    transition:none !important;animation:none !important;
  }
  .lp-mock .mk-arc{stroke-dashoffset:55.3 !important}
}

/* ============================================================
   Responsive — the partial lives inside .main (next to a 340px
   sidebar above 1100px viewport), so breakpoints are tuned to
   the resulting column: ~850px at 1280, full width below 1100.
   ============================================================ */
@media (max-width:860px){
  .lp-hero > .content{grid-template-columns:1fr}
  .lp-mock{order:3}
  .lp-strip{order:4}
  .lp-rigor-grid{grid-template-columns:1fr;gap:22px}
}

@media (max-width:920px) and (min-width:561px){
  .lp-caps-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .lp-panel{padding:26px 24px}
  .lp-hero,.lp-final{padding:30px 24px}
  /* steps become a vertical rail */
  .lp-steps{grid-template-columns:1fr;gap:24px}
  .lp-step{padding:0 0 0 26px}
  .lp-step::before{top:2px;bottom:-26px;left:3px;right:auto;width:1px;height:auto}
  .lp-step:first-child::before{
    background:linear-gradient(180deg, rgba(var(--accent-rgb),.65), var(--rule-2) 70%);
  }
  .lp-step:last-child::before{
    background:linear-gradient(180deg, var(--rule-2), transparent);
  }
  .lp-step::after{top:2px}
  .lp-conf-row{grid-template-columns:52px 1fr}
  .lp-conf-row .d{grid-column:2}
  .lp-price-row{grid-template-columns:1fr auto;padding:14px 6px;margin-left:-6px}
  .lp-price-row .tg{grid-column:1 / -1}
}

@media (max-width:600px){
  /* stack the section head: the mono meta drops below the serif h2
     instead of colliding with its second line */
  .lp-head{flex-direction:column;align-items:flex-start}
  .lp-head .meta{text-align:left;white-space:normal}
}

@media (max-width:560px){
  .lp-caps-grid{grid-template-columns:1fr}
  .lp-cap--big{grid-column:auto}
  .lp-strip{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .lp-strip .c:nth-child(2){border-right:none}
  .lp-strip .c:nth-child(3){padding-left:0}
  .lp-strip .c:nth-child(even){padding-right:0}
  .lp-stats{grid-template-columns:1fr;gap:14px;padding:16px 0}
  .lp-stat{padding:0;border-right:none}
  .lp-cta-row .btn-primary,.lp-cta-row .btn-ghost{flex:1 1 auto}
  .lp-final > .content{flex-direction:column;align-items:stretch;text-align:left}
}