/* ==========================================================================
   MUNDI PROPERTIES — Sistema de diseño
   Paleta derivada del logotipo: charcoal profundo, teal, oro, crema.
   ========================================================================== */

:root{
  /* Fondos */
  --ink:        #0A0E10;
  --ink-1:      #0E1417;
  --ink-2:      #131B1F;
  --ink-3:      #1A2429;
  --hairline:   rgba(201,162,74,.16);
  --hairline-2: rgba(244,239,229,.09);

  /* Marca */
  --teal:       #0E5F62;
  --teal-2:     #12797C;
  --teal-3:     #1FA5A5;
  --teal-glow:  rgba(31,165,165,.22);
  --gold:       #C9A24A;
  --gold-2:     #E3C177;
  --gold-3:     #F0DCA8;

  /* Texto */
  --cream:      #F4EFE5;
  --text:       #DCD8CF;
  --muted:      #93A0A5;
  --muted-2:    #6C7A80;

  /* Tipografía */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Métrica */
  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 48px);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--gold); color:#0A0E10; }

/* ---------- Utilidades ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding:clamp(72px,10vw,132px) 0; position:relative; }
.center{ text-align:center; }
.mono{ font-variant-numeric:tabular-nums; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; line-height:1.5; flex-wrap:wrap;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-2);
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow.no-rule::before{ display:none; }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--cream); font-weight:500; line-height:1.06; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(2.9rem,6.6vw,5.1rem); }
h2{ font-size:clamp(2.1rem,4.4vw,3.5rem); }
h3{ font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.2; }
p{ margin:0; }

.lead{ font-size:clamp(1.02rem,1.35vw,1.19rem); color:var(--muted); max-width:62ch; line-height:1.7; }
.section-head{ max-width:760px; }
.section-head.center{ margin-inline:auto; }
.section-head h2{ margin:18px 0 20px; }

.gold{ color:var(--gold-2); }
.serif-italic{ font-family:var(--serif); font-style:italic; color:var(--gold-2); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  cursor:pointer; transition:all .28s var(--ease); white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#0A0E10; box-shadow:0 10px 34px -12px rgba(201,162,74,.75);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 18px 42px -12px rgba(201,162,74,.9); }
.btn-ghost{ border-color:var(--hairline-2); color:var(--cream); background:rgba(244,239,229,.03); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-2); background:rgba(201,162,74,.07); }
.btn-teal{ background:var(--teal-2); color:#EAFBFB; }
.btn-teal:hover{ background:var(--teal-3); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:13px; }
.btn-block{ width:100%; }
.btn-lg{ padding:18px 36px; font-size:15px; }

/* ---------- Navegación ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(10,14,16,.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hairline);
}
.nav-in{ display:flex; align-items:center; gap:28px; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand img{ width:38px; height:38px; border-radius:9px; }
.brand-txt{ line-height:1; }
.brand-txt b{ display:block; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--cream); letter-spacing:.04em; }
.brand-txt span{ display:block; font-size:8.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:3px; }

.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-size:13.5px; color:var(--muted); font-weight:500; position:relative; transition:color .25s; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; gap:10px; align-items:center; }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--cream); margin:5px 0; transition:.3s var(--ease); }
.burger.on span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 60px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .glow-a{
  position:absolute; width:min(1100px,120vw); aspect-ratio:1; right:-18%; top:-22%;
  background:radial-gradient(circle, rgba(18,121,124,.30) 0%, rgba(18,121,124,.10) 38%, transparent 68%);
  filter:blur(8px);
}
.hero-bg .glow-b{
  position:absolute; width:min(760px,90vw); aspect-ratio:1; left:-16%; bottom:-26%;
  background:radial-gradient(circle, rgba(201,162,74,.17) 0%, transparent 66%);
}
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--hairline-2) 1px,transparent 1px),linear-gradient(90deg,var(--hairline-2) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:radial-gradient(ellipse 80% 62% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 42%, #000 20%, transparent 78%);
  opacity:.55;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,var(--ink) 100%);
}

.hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.hero-copy h1{ margin:22px 0 24px; }
.hero-copy h1 em{ font-style:italic; color:var(--gold-2); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 20px; }
.hero-micro{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:var(--muted-2); }
.hero-micro span{ display:flex; align-items:center; gap:7px; }
.hero-micro span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--teal-3); box-shadow:0 0 8px var(--teal-3); }

/* Globo SVG */
.hero-art{ position:relative; display:grid; place-items:center; }
.globe-wrap{ width:100%; max-width:520px; aspect-ratio:1; position:relative; }
.globe-wrap svg{ width:100%; height:100%; overflow:visible; }
.spin{ transform-origin:300px 320px; animation:spin 46s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.arc{ stroke-dasharray:10 450; animation:dash 6s linear infinite; }
.arc.d2{ animation-delay:1.5s; } .arc.d3{ animation-delay:3s; }
@keyframes dash{ to{ stroke-dashoffset:-460; } }
.pulse{ animation:pulse 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes pulse{ 0%,100%{ opacity:.35; r:3; } 50%{ opacity:1; r:5; } }

/* Cinta de datos del hero */
.hero-strip{ position:relative; z-index:3; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:rgba(19,27,31,.5); }
.strip-in{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-in > div{ padding:26px 24px; border-right:1px solid var(--hairline-2); }
.strip-in > div:last-child{ border-right:0; }
.strip-in b{ display:block; font-family:var(--serif); font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--gold-2); font-weight:600; line-height:1; }
.strip-in small{ display:block; margin-top:8px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }

/* ---------- Tarjetas genéricas ---------- */
.card{
  background:linear-gradient(160deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--hairline-2); border-radius:var(--r-lg);
  padding:32px; position:relative; overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.card:hover{ border-color:var(--hairline); transform:translateY(-4px); }
.card h3{ margin-bottom:12px; }
.card p{ color:var(--muted); font-size:14.5px; }

.icon-badge{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:22px;
  background:linear-gradient(150deg,rgba(31,165,165,.16),rgba(201,162,74,.09));
  border:1px solid var(--hairline);
}
.icon-badge svg{ width:23px; height:23px; stroke:var(--gold-2); fill:none; stroke-width:1.5; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

/* ---------- Pasos ---------- */
.steps{ display:grid; gap:0; margin-top:56px; }
.step{
  display:grid; grid-template-columns:96px 1fr; gap:32px; align-items:start;
  padding:34px 0; border-top:1px solid var(--hairline-2);
  transition:background .3s;
}
.step:last-child{ border-bottom:1px solid var(--hairline-2); }
.step:hover{ background:linear-gradient(90deg,rgba(31,165,165,.05),transparent 60%); }
.step-n{
  font-family:var(--serif); font-size:2.9rem; line-height:1; color:transparent;
  -webkit-text-stroke:1px var(--gold); font-weight:600;
  transition:color .35s var(--ease);
}
.step:hover .step-n{ color:var(--gold-2); -webkit-text-stroke:1px transparent; }
.step-body h3{ margin-bottom:9px; }
.step-body p{ color:var(--muted); max-width:64ch; font-size:14.8px; }
.step-tag{
  display:inline-block; margin-top:14px; padding:5px 12px; border-radius:100px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  background:rgba(31,165,165,.11); color:var(--teal-3); border:1px solid rgba(31,165,165,.24);
}

/* ---------- Demo generador de lead ---------- */
.demo{
  margin-top:22px; background:var(--ink); border:1px solid var(--hairline);
  border-radius:var(--r); padding:22px; max-width:560px;
}
.demo-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:12px; }
.demo-row{ display:flex; gap:10px; flex-wrap:wrap; }
.demo-row input{ flex:1 1 190px; }
.demo-out{
  display:none; margin-top:14px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(31,165,165,.08); border:1px solid rgba(31,165,165,.26);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--teal-3);
  word-break:break-all;
}
.demo-out.on{ display:block; animation:fade .4s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* ---------- Formularios ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:600; }
.field label .req{ color:var(--gold); }
input,select,textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--ink); border:1px solid var(--hairline-2); color:var(--cream);
  font-family:var(--sans); font-size:14.5px; transition:border-color .25s, box-shadow .25s;
}
input::placeholder,textarea::placeholder{ color:var(--muted-2); }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--teal-3); box-shadow:0 0 0 3px rgba(31,165,165,.13);
}
select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A24A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
textarea{ resize:vertical; min-height:96px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row-3{ display:grid; grid-template-columns:.6fr 1fr 1fr; gap:16px; }
.err{ border-color:#C05656 !important; }
.err-msg{ display:none; font-size:12px; color:#E08A8A; margin-top:6px; }
.err-msg.on{ display:block; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  padding:9px 16px; border-radius:100px; border:1px solid var(--hairline-2);
  font-size:13px; color:var(--muted); cursor:pointer; user-select:none;
  transition:all .22s var(--ease); background:transparent;
}
.chip:hover{ border-color:var(--gold); color:var(--cream); }
.chip.on{ background:rgba(201,162,74,.13); border-color:var(--gold); color:var(--gold-2); }

.check,
.field label.check{ display:flex; gap:11px; align-items:flex-start; font-size:13.2px; color:var(--muted);
  line-height:1.6; cursor:pointer; text-transform:none; letter-spacing:0; font-weight:400; margin-bottom:0; }
.check input{ width:17px; height:17px; margin:2px 0 0; flex:0 0 auto; accent-color:var(--gold); }
.check a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Inventario ---------- */
.inv-bar{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin:38px 0 26px; }
.inv-count{ font-size:13px; color:var(--muted-2); }

.props{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prop{
  background:var(--ink-1); border:1px solid var(--hairline-2); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.prop:hover{ transform:translateY(-6px); border-color:var(--hairline); box-shadow:0 26px 50px -28px rgba(0,0,0,.9); }
.prop-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-2); }
.prop-img .ph{ position:absolute; inset:0; }
.prop-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.prop:hover .prop-img img{ transform:scale(1.06); }
.prop-badges{ position:absolute; top:14px; left:14px; right:14px; display:flex; gap:7px; flex-wrap:wrap; z-index:2; }
.badge{
  padding:5px 11px; border-radius:100px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; backdrop-filter:blur(8px);
}
.badge-gold{ background:rgba(201,162,74,.92); color:#0A0E10; }
.badge-teal{ background:rgba(18,121,124,.88); color:#EAFBFB; }
.badge-dark{ background:rgba(10,14,16,.7); color:var(--cream); border:1px solid var(--hairline-2); }
.prop-dev{ position:absolute; bottom:12px; left:14px; z-index:2; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-3); text-shadow:0 1px 8px #000; }
.prop-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(10,14,16,.82)); z-index:1; }

.prop-body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.prop-loc{ font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-3); margin-bottom:9px; }
.prop-name{ font-family:var(--serif); font-size:1.42rem; color:var(--cream); line-height:1.15; margin-bottom:14px; }
.prop-price{ font-family:var(--serif); font-size:1.6rem; color:var(--gold-2); font-weight:600; line-height:1; }
.prop-price small{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); margin-bottom:5px; font-weight:600; }
.prop-specs{ display:flex; gap:16px; flex-wrap:wrap; margin:18px 0; padding:14px 0; border-top:1px solid var(--hairline-2); border-bottom:1px solid var(--hairline-2); }
.prop-specs div{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.prop-specs b{ color:var(--cream); font-weight:600; }
.prop-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px; }
.prop-meta > span{ display:block; min-width:0; }
.prop-meta > span:last-child{ text-align:right; }
.prop-meta b{ display:block; margin-top:4px; color:var(--teal-3); font-size:12.5px;
  letter-spacing:0; text-transform:none; font-weight:600; line-height:1.3; }
.prop-actions{ margin-top:auto; display:flex; gap:9px; }
.prop-actions .btn{ flex:1; }

/* Banner patrocinado */
.ad{
  grid-column:span 3; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline); position:relative;
  background:linear-gradient(115deg,#0B2A2C 0%,#0E5F62 46%,#0A1416 100%);
  display:grid; grid-template-columns:1.35fr .65fr; align-items:center; gap:30px; padding:38px 40px;
}
.ad::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 78% 20%, rgba(201,162,74,.24), transparent 55%);
}
.ad > *{ position:relative; z-index:1; }
.ad-tag{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,220,168,.75); margin-bottom:12px; }
.ad h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:10px; }
.ad p{ color:rgba(244,239,229,.72); font-size:14.5px; max-width:52ch; }
.ad-right{ text-align:right; }

.demo-note{
  margin-top:26px; display:flex; gap:11px; align-items:flex-start;
  font-size:12.5px; color:var(--muted-2); padding:14px 18px;
  border:1px dashed var(--hairline); border-radius:var(--r); background:rgba(201,162,74,.04);
}
.demo-note b{ color:var(--gold-2); }

/* ---------- Calculadora ---------- */
.calc{
  display:grid; grid-template-columns:1fr .82fr; gap:0;
  border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--ink-2),var(--ink-1)); margin-top:48px;
}
.calc-in{ padding:clamp(28px,4vw,44px); }
.calc-out{
  padding:clamp(28px,4vw,44px); border-left:1px solid var(--hairline);
  background:linear-gradient(160deg,rgba(14,95,98,.24),rgba(10,14,16,.5));
  display:flex; flex-direction:column; justify-content:center;
}
.slider-block{ margin-bottom:30px; }
.slider-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.slider-top label{ font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.slider-val{ font-family:var(--serif); font-size:1.5rem; color:var(--gold-2); font-weight:600; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; padding:0;
  background:linear-gradient(90deg,var(--gold) var(--p,50%),rgba(244,239,229,.13) var(--p,50%));
  border:0; border-radius:100px; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--gold-2); border:3px solid var(--ink); cursor:pointer;
  box-shadow:0 0 0 1px var(--gold), 0 4px 14px rgba(201,162,74,.5);
  transition:transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.16); }
input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border-radius:50%; background:var(--gold-2);
  border:3px solid var(--ink); box-shadow:0 0 0 1px var(--gold); cursor:pointer;
}
.calc-result small{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:10px; }
.calc-result .big{
  font-family:var(--serif); font-size:clamp(2.9rem,5.6vw,4.1rem); line-height:1;
  color:var(--gold-2); font-weight:600; letter-spacing:-.02em;
}
.calc-lines{ margin-top:30px; padding-top:24px; border-top:1px solid var(--hairline-2); display:grid; gap:13px; }
.calc-line{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); gap:14px; }
.calc-line b{ color:var(--cream); font-weight:600; }
.calc-line.hi b{ color:var(--teal-3); }
.calc-foot{ margin-top:26px; font-size:12px; color:var(--muted-2); line-height:1.6; }

/* ---------- Planes ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; align-items:stretch; }
.plan{
  background:linear-gradient(165deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--hairline-2); border-radius:var(--r-lg); padding:34px 30px;
  display:flex; flex-direction:column; position:relative; transition:.35s var(--ease);
}
.plan:hover{ transform:translateY(-5px); border-color:var(--hairline); }
.plan.featured{
  border-color:var(--gold);
  background:linear-gradient(165deg,rgba(201,162,74,.09),var(--ink-1) 55%);
  box-shadow:0 30px 60px -34px rgba(201,162,74,.5);
}
.plan-flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#0A0E10;
  padding:5px 16px; border-radius:100px; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.plan-name{ font-family:var(--serif); font-size:1.55rem; color:var(--cream); }
.plan-for{ font-size:12px; color:var(--muted-2); margin-top:5px; }
.plan-price{ margin:22px 0 6px; display:flex; align-items:baseline; gap:7px; }
.plan-price .num{ font-family:var(--serif); font-size:3.1rem; line-height:1; color:var(--gold-2); font-weight:600; }
.plan-price .per{ font-size:12.5px; color:var(--muted-2); }
.plan-note{ font-size:12.5px; color:var(--muted); min-height:34px; }
.plan ul{ list-style:none; padding:0; margin:24px 0 28px; display:grid; gap:11px; }
.plan li{ font-size:13.7px; color:var(--muted); display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.plan li svg{ width:15px; height:15px; flex:0 0 auto; margin-top:3px; stroke:var(--teal-3); fill:none; stroke-width:2.2; }
.plan li.off{ color:var(--muted-2); opacity:.6; }
.plan li.off svg{ stroke:var(--muted-2); }
.plan .btn{ margin-top:auto; }

/* ---------- Split desarrolladores ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.dev-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline-2); border:1px solid var(--hairline-2); border-radius:var(--r-lg); overflow:hidden; }
.dev-stats div{ background:var(--ink-1); padding:28px 24px; }
.dev-stats b{ display:block; font-family:var(--serif); font-size:2.4rem; color:var(--gold-2); line-height:1; font-weight:600; }
.dev-stats small{ display:block; margin-top:9px; font-size:12px; color:var(--muted); line-height:1.5; }

/* ---------- Registro ---------- */
.signup{ position:relative; }
.signup::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(14,95,98,.28), transparent 70%);
}
.signup .wrap{ position:relative; z-index:1; }
.signup-grid{ display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(32px,5vw,68px); align-items:start; margin-top:52px; }
.signup-side ul{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:20px; }
.signup-side li{ display:flex; gap:15px; align-items:flex-start; }
.signup-side li .n{
  flex:0 0 auto; width:29px; height:29px; border-radius:9px; display:grid; place-items:center;
  background:rgba(31,165,165,.13); border:1px solid rgba(31,165,165,.3);
  font-size:12px; font-weight:700; color:var(--teal-3);
}
.signup-side li b{ display:block; color:var(--cream); font-size:14.5px; margin-bottom:3px; font-weight:600; }
.signup-side li p{ font-size:13.4px; color:var(--muted); line-height:1.55; }

.form-card{
  background:linear-gradient(165deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,42px); box-shadow:0 40px 80px -50px #000;
}
.form-head{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--hairline-2); }
.form-head h3{ font-size:1.75rem; margin-bottom:7px; }
.form-head p{ font-size:13.5px; color:var(--muted); }
.form-sep{ margin:28px 0 20px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:14px; }
.form-sep::after{ content:""; flex:1; height:1px; background:var(--hairline-2); }

.success{
  display:none; text-align:center; padding:16px 0;
}
.success.on{ display:block; animation:fade .5s var(--ease); }
.success .tick{
  width:66px; height:66px; margin:0 auto 24px; border-radius:50%; display:grid; place-items:center;
  background:rgba(31,165,165,.13); border:1px solid rgba(31,165,165,.35);
}
.success .tick svg{ width:30px; height:30px; stroke:var(--teal-3); fill:none; stroke-width:2.4; }
.success h3{ margin-bottom:12px; }
.success p{ color:var(--muted); font-size:14.3px; max-width:44ch; margin-inline:auto; }
.code-box{
  margin:26px auto 8px; max-width:340px; padding:20px;
  border:1px dashed var(--gold); border-radius:var(--r); background:rgba(201,162,74,.06);
}
.code-box small{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); margin-bottom:9px; }
.code-box b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.75rem;
  color:var(--gold-2); letter-spacing:.1em; font-weight:600;
}
.copy-btn{ background:none; border:0; color:var(--teal-3); font-size:12px; cursor:pointer; margin-top:12px; text-decoration:underline; text-underline-offset:3px; }

/* ---------- FAQ ---------- */
.faq{ max-width:840px; margin:52px auto 0; }
.qa{ border-bottom:1px solid var(--hairline-2); }
.qa button{
  width:100%; background:none; border:0; text-align:left; padding:24px 44px 24px 0;
  font-size:16.5px; font-family:var(--serif); color:var(--cream); cursor:pointer;
  position:relative; transition:color .25s;
}
.qa button:hover{ color:var(--gold-2); }
.qa button::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease);
}
.qa.on button::after{ transform:translateY(-30%) rotate(-135deg); }
.qa .ans{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.qa .ans p{ padding:0 40px 26px 0; color:var(--muted); font-size:14.4px; line-height:1.72; }

/* ---------- CTA final ---------- */
.final{ position:relative; overflow:hidden; text-align:center; padding:clamp(88px,11vw,150px) 0; }
.final::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(14,95,98,.34), transparent 70%);
}
.final .wrap{ position:relative; z-index:1; }
.final h2{ font-size:clamp(2.4rem,5.6vw,4.2rem); margin:20px auto 22px; max-width:16ch; }
.final .lead{ margin-inline:auto; }
.final .hero-actions{ justify-content:center; }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid var(--hairline); padding:66px 0 34px; background:var(--ink-1); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.foot-brand p{ font-size:13.4px; color:var(--muted); max-width:40ch; margin-top:18px; line-height:1.65; }
.foot h4{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:700; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.foot a{ font-size:13.4px; color:var(--muted); transition:color .22s; }
.foot a:hover{ color:var(--gold-2); }
.foot-bot{
  margin-top:52px; padding-top:26px; border-top:1px solid var(--hairline-2);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12px; color:var(--muted-2);
}

/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; box-shadow:0 12px 34px -8px rgba(37,211,102,.6);
  transition:transform .3s var(--ease);
}
.wa:hover{ transform:scale(1.1); }
.wa svg{ width:27px; height:27px; fill:#0A0E10; }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-in{ grid-template-columns:1fr; gap:44px; }
  .hero-art{ order:-1; }
  .globe-wrap{ max-width:360px; }
  .props{ grid-template-columns:repeat(2,1fr); }
  .ad{ grid-column:span 2; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:900px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .nav.open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:74px; left:0; right:0;
    background:rgba(10,14,16,.97); backdrop-filter:blur(18px);
    padding:28px var(--pad) 34px; gap:22px; border-bottom:1px solid var(--hairline);
  }
  .nav-cta .btn-ghost{ display:none; }
  .grid-3{ grid-template-columns:1fr; }
  .calc{ grid-template-columns:1fr; }
  .calc-out{ border-left:0; border-top:1px solid var(--hairline); }
  .plans{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .signup-grid{ grid-template-columns:1fr; }
  .strip-in{ grid-template-columns:1fr 1fr; }
  .strip-in > div:nth-child(2){ border-right:0; }
  .strip-in > div:nth-child(1),.strip-in > div:nth-child(2){ border-bottom:1px solid var(--hairline-2); }
  .ad{ grid-template-columns:1fr; text-align:left; }
  .ad-right{ text-align:left; }
}
@media (max-width:640px){
  .nav-in{ gap:12px; }
  .brand img{ width:34px; height:34px; }
  .brand-txt b{ font-size:17px; }
  .brand-txt span{ font-size:7.5px; letter-spacing:.28em; }
  .nav-cta .btn-gold{ padding:10px 15px; font-size:12.5px; }
  .burger{ padding:8px 0 8px 6px; }
  .hero{ padding:104px 0 48px; min-height:auto; }
  .hero-in{ gap:26px; }
  .globe-wrap{ max-width:288px; }
  .props{ grid-template-columns:1fr; }
  .ad{ grid-column:span 1; padding:30px 26px; }
  .grid-2{ grid-template-columns:1fr; }
  .field-row,.field-row-3{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:14px; }
  .step-n{ font-size:2.2rem; }
  .strip-in{ grid-template-columns:1fr; }
  .strip-in > div{ border-right:0; border-bottom:1px solid var(--hairline-2); }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}

.lbl-short{ display:none; }
@media (max-width:420px){
  .lbl-full{ display:none; }
  .lbl-short{ display:inline; }
  .brand{ gap:9px; }
  .brand-txt b{ font-size:15.5px; }
  .brand-txt span{ font-size:7px; letter-spacing:.22em; }
}

/* ==========================================================================
   SELECTOR DE IDIOMA
   ========================================================================== */
.lang{ position:relative; }
.lang-btn{
  display:flex; align-items:center; gap:7px; padding:9px 13px;
  border-radius:100px; border:1px solid var(--hairline-2); background:transparent;
  color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:all .25s var(--ease); white-space:nowrap;
}
.lang-btn:hover{ border-color:var(--gold); color:var(--gold-2); }
.lang-btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.3; flex:0 0 auto; }
.lang-menu{
  position:absolute; top:calc(100% + 10px); inset-inline-end:0; min-width:178px;
  list-style:none; margin:0; padding:7px; border-radius:15px; z-index:120;
  background:rgba(14,20,23,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline); box-shadow:0 26px 54px -24px #000;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.lang.on .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-menu li{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px;
  font-size:13.5px; color:var(--muted); cursor:pointer; transition:background .2s, color .2s;
}
.lang-menu li:hover{ background:rgba(201,162,74,.09); color:var(--cream); }
.lang-menu li.on{ color:var(--gold-2); background:rgba(201,162,74,.07); }
.lang-code{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--gold);
  min-width:23px; font-family:var(--sans);
}
@media (max-width:520px){
  .lang-btn{ padding:9px 10px; gap:5px; }
  .lang-btn svg{ display:none; }
}

/* ==========================================================================
   DIRECCIÓN DERECHA-IZQUIERDA
   ========================================================================== */
[dir="rtl"] .brand{ margin-inline-end:auto; margin-right:0; }
[dir="rtl"] .prop-meta > span:last-child{ text-align:start; }
[dir="rtl"] .prop-meta > span:first-child{ text-align:start; }
[dir="rtl"] .ad-right{ text-align:start; }
[dir="rtl"] .prop-dev{ left:auto; right:14px; }
[dir="rtl"] .wa{ right:auto; left:22px; }
[dir="rtl"] select{
  background-position:left 16px center; padding-right:16px; padding-left:40px;
}
[dir="rtl"] .calc-out{ border-left:0; border-right:1px solid var(--hairline); }
[dir="rtl"] .qa button{ padding:24px 0 24px 44px; }
[dir="rtl"] .qa button::after{ right:auto; left:6px; }
[dir="rtl"] .qa .ans p{ padding:0 0 26px 40px; }
[dir="rtl"] .step:hover{ background:linear-gradient(270deg,rgba(31,165,165,.05),transparent 60%); }
[dir="rtl"] .eyebrow::before{ background:linear-gradient(270deg,transparent,var(--gold)); }
[dir="rtl"] input[type=range]{
  background:linear-gradient(270deg,var(--gold) var(--p,50%),rgba(244,239,229,.13) var(--p,50%));
}
[dir="rtl"] .nav.open .nav-links{ text-align:start; }
[dir="rtl"] .hero-strip .strip-in > div{ border-right:0; border-left:1px solid var(--hairline-2); }
[dir="rtl"] .hero-strip .strip-in > div:last-child{ border-left:0; }
@media (max-width:900px){
  [dir="rtl"] .calc-out{ border-right:0; border-top:1px solid var(--hairline); }
  [dir="rtl"] .strip-in > div:nth-child(2){ border-left:0; }
}
@media (max-width:640px){
  [dir="rtl"] .strip-in > div{ border-left:0; }
}

/* ==========================================================================
   TIPOGRAFÍA ÁRABE
   ========================================================================== */
[lang="ar"]{ --serif:"Amiri","Noto Kufi Arabic",serif; --sans:"Noto Kufi Arabic","Inter",sans-serif; }
[lang="ar"] body,[lang="ar"] .lead,[lang="ar"] p{ line-height:1.85; }
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{ line-height:1.35; letter-spacing:normal; }
[lang="ar"] h1{ font-size:clamp(2.3rem,5.2vw,4rem); }
[lang="ar"] h2{ font-size:clamp(1.75rem,3.6vw,2.8rem); }

/* El árabe no usa cursiva ni espaciado entre letras: rompe la unión del trazo. */
[lang="ar"] em,[lang="ar"] .serif-italic{ font-style:normal; }
[lang="ar"] .eyebrow,
[lang="ar"] .badge,
[lang="ar"] .prop-loc,
[lang="ar"] .prop-price small,
[lang="ar"] .prop-meta,
[lang="ar"] .step-tag,
[lang="ar"] .demo-label,
[lang="ar"] .hero-strip small,
[lang="ar"] .field label,
[lang="ar"] .form-sep,
[lang="ar"] .plan-flag,
[lang="ar"] .calc-result small,
[lang="ar"] .code-box small,
[lang="ar"] .slider-top label,
[lang="ar"] .foot h4,
[lang="ar"] .ad-tag,
[lang="ar"] .inv-count,
[lang="ar"] .prop-dev{ letter-spacing:normal; }
[lang="ar"] .brand-txt span{ letter-spacing:.18em; }
[lang="ar"] .globe-wrap text{ letter-spacing:0; font-family:"Noto Kufi Arabic",sans-serif; font-size:9.5px; }
[lang="ar"] .step-n{ font-family:var(--sans); font-size:2.2rem; }
[lang="ar"] .plan-price .num,
[lang="ar"] .calc-result .big,
[lang="ar"] .slider-val,
[lang="ar"] .strip-in b,
[lang="ar"] .dev-stats b{ font-family:"Cormorant Garamond",serif; }
[lang="ar"] .code-box b{ letter-spacing:.1em; }

/* El diagrama del hero conserva su eje LTR: así las etiquetas nacen a la
   derecha de cada nodo y no se salen del lienzo cuando la página es RTL. */
[dir="rtl"] .globe-wrap svg{ direction:ltr; }

/* Correos, teléfonos y códigos siempre se leen de izquierda a derecha,
   incluso dentro de una página árabe. */
[dir="rtl"] input[dir="ltr"],
[dir="rtl"] select[dir="ltr"]{ text-align:right; }
[dir="rtl"] input[dir="ltr"]::placeholder{ text-align:right; }

/* ==========================================================================
   PÁGINA DE DESTINO DEL LEAD (p.html)
   ========================================================================== */
.lead-page{ background:var(--ink); }
.lp{ padding:118px 0 80px; position:relative; }
.lp::before{
  content:""; position:absolute; inset:0 0 auto 0; height:520px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 0%, rgba(14,95,98,.30), transparent 72%);
}
.lp .wrap{ position:relative; z-index:1; max-width:960px; }

.lp-attrib{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 22px; margin-bottom:28px; border-radius:var(--r);
  background:rgba(31,165,165,.07); border:1px solid rgba(31,165,165,.24);
}
.lp-attrib p{ font-size:14px; color:var(--text); margin:0; }
.lp-attrib b{
  display:inline-block; margin-inline-start:8px; color:var(--gold-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
}

.lp-card{
  background:linear-gradient(165deg,var(--ink-2),var(--ink-1));
  border:1px solid var(--hairline); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 44px 90px -56px #000;
}
.lp-media{ position:relative; aspect-ratio:16/8; overflow:hidden; background:var(--ink-2); }
.lp-media img{ width:100%; height:100%; object-fit:cover; }
.lp-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 45%,rgba(10,14,16,.86));
}
.lp-media .prop-badges{ top:18px; inset-inline-start:18px; inset-inline-end:18px; left:auto; right:auto; }
.lp-media .prop-dev{ bottom:16px; inset-inline-start:20px; left:auto; right:auto; }

.lp-body{ padding:clamp(26px,4vw,44px); }
.lp-body h1{
  font-size:clamp(1.9rem,4vw,3rem); margin:6px 0 26px;
}
.lp-price{ padding-bottom:22px; border-bottom:1px solid var(--hairline-2); }
.lp-price small{
  display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600; margin-bottom:6px;
}
.lp-price .big{
  font-family:var(--serif); font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:1;
  color:var(--gold-2); font-weight:600;
}
.lp-price-note{ margin-top:12px; font-size:12.5px; color:var(--muted-2); line-height:1.6; max-width:56ch; }

.lp-body .prop-specs{ border-top:0; margin-top:0; }

.lp-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hairline-2); border:1px solid var(--hairline-2);
  border-radius:var(--r); overflow:hidden; margin-bottom:30px;
}
.lp-facts > div{ background:var(--ink-1); padding:18px 20px; }
.lp-facts small{
  display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); font-weight:600; margin-bottom:7px;
}
.lp-facts b{ color:var(--teal-3); font-size:14.5px; font-weight:600; line-height:1.35; }

.lp-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.lp-actions .btn{ flex:1 1 220px; }

.lp-empty{ text-align:center; padding:60px 0 40px; }
.lp-empty h1{ font-size:clamp(1.9rem,4vw,2.8rem); margin-bottom:18px; }
.lp-empty .lead{ margin-inline:auto; }
.lp-empty .hero-actions{ justify-content:center; margin-top:30px; }

.lp-form{ margin-top:36px; scroll-margin-top:100px; }
.lp-attr-note{
  margin-top:16px; font-size:12px; color:var(--muted-2);
  text-align:center; line-height:1.6;
}
.lead-page .foot{ padding:34px 0; }

@media (max-width:640px){
  .lp{ padding:100px 0 60px; }
  .lp-media{ aspect-ratio:4/3; }
  .lp-facts{ grid-template-columns:1fr; }
  .lp-actions .btn{ flex:1 1 100%; }
}

/* El enlace de la demo es real y se puede abrir. */
.demo-link{
  color:var(--teal-3); text-decoration:underline; text-underline-offset:3px;
  transition:color .2s;
}
.demo-link:hover{ color:var(--gold-2); }

/* En p.html el botón al catálogo es la única acción de la barra: se conserva
   también en pantallas chicas. */
@media (max-width:900px){
  .lead-page .nav-cta .btn-ghost{ display:inline-flex; }
}
@media (max-width:520px){
  .lead-page .nav-cta .btn-ghost{ padding:9px 14px; font-size:12px; }
  .lead-page .brand-txt{ display:none; }
}

/* El atributo gana sobre cualquier transición: menú cerrado es menú sin caja. */
.lang-menu[hidden]{ display:none !important; }

/* Mensaje de tranquilidad bajo el resultado de la calculadora. */
.calc-note{
  margin-top:20px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(31,165,165,.08); border:1px solid rgba(31,165,165,.24);
  font-size:13px; color:var(--teal-3); line-height:1.6;
}