/* ============================================================
   Hospedaje Pro — Marketing (landing + auth)
   Paleta hospedaje: azul océano + teal + dorado
   ============================================================ */
:root{
  --m-navy:#0a1b30;
  --m-navy2:#0e2746;
  --m-blue:#155e9c;
  --m-blue2:#1f7fd1;
  --m-teal:#0fb6a8;
  --m-teal2:#1fd3c0;
  --m-gold:#e3a72f;
  --m-gold2:#f4c560;
  --m-ink:#0f1b2d;
  --m-soft:#64748b;
}
*{box-sizing:border-box}
body.m-body{margin:0;font-family:'Inter','Segoe UI',system-ui,sans-serif;color:var(--m-ink);
  background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
.m-gradient-text{background:linear-gradient(100deg,#ffffff 10%,var(--m-gold2) 60%,var(--m-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-weight:600;border-radius:.7rem;padding:.85rem 1.5rem;border:none;cursor:pointer;
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s,filter .2s;font-size:1rem}
.m-btn:hover{transform:translateY(-2px)}
.m-btn-gold{background:linear-gradient(135deg,var(--m-gold),var(--m-gold2));color:#3a2a05;
  box-shadow:0 10px 26px rgba(227,167,47,.4)}
.m-btn-gold:hover{box-shadow:0 14px 32px rgba(227,167,47,.5);color:#3a2a05}
.m-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px)}
.m-btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.m-btn-brand{background:linear-gradient(135deg,var(--m-blue),var(--m-teal));color:#fff;
  box-shadow:0 10px 26px rgba(15,182,168,.32)}
.m-btn-brand:hover{box-shadow:0 14px 32px rgba(15,182,168,.42);color:#fff}

/* ---------- Navbar ---------- */
.m-nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:1rem 2.2rem;transition:all .3s;
  background:rgba(255,255,255,.0)}
.m-nav.scrolled{background:rgba(255,255,255,.96);box-shadow:0 4px 20px rgba(10,27,48,.1);backdrop-filter:blur(10px)}
.m-brand{display:flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.2rem;color:#fff;letter-spacing:-.01em}
.m-nav.scrolled .m-brand{color:var(--m-navy)}
.m-logo{width:38px;height:38px;border-radius:.7rem;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.15rem;
  background:linear-gradient(135deg,var(--m-blue),var(--m-teal));box-shadow:0 6px 16px rgba(15,182,168,.45)}
.m-navlinks{display:flex;align-items:center;gap:1.8rem}
.m-navlinks a{color:rgba(255,255,255,.82);font-weight:500;font-size:.95rem;transition:color .2s}
.m-nav.scrolled .m-navlinks a{color:#334155}
.m-navlinks a:hover{color:#fff}
.m-nav.scrolled .m-navlinks a:hover{color:var(--m-blue)}
.m-navlinks .m-btn{padding:.6rem 1.15rem;font-size:.92rem}

/* ---------- Hero ---------- */
.m-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:7rem 1.5rem 4rem;overflow:hidden;
  background:radial-gradient(1100px 520px at 50% -8%, #15467e 0%, transparent 60%),
             radial-gradient(900px 500px at 85% 20%, rgba(15,182,168,.32) 0%, transparent 55%),
             linear-gradient(160deg,#0a1b30 0%,#0e2746 55%,#0a2540 100%)}
.m-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 360px at 18% 85%, rgba(227,167,47,.16) 0%, transparent 60%)}
.m-hero-inner{position:relative;z-index:2;max-width:880px}
.m-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);color:#dbe7f5;
  font-size:.85rem;font-weight:500;margin-bottom:1.8rem;backdrop-filter:blur(6px)}
.m-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;font-weight:800;color:#fff;
  margin:0 0 1.4rem;letter-spacing:-.02em}
.m-hero p.lead{color:#aebfd4;font-size:clamp(1rem,2.4vw,1.2rem);max-width:620px;margin:0 auto 2.3rem;line-height:1.6}
.m-hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.m-stats{display:flex;gap:2.8rem;justify-content:center;flex-wrap:wrap;margin-top:3.4rem}
.m-stat .n{font-size:clamp(1.7rem,4vw,2.3rem);font-weight:800;color:#fff;line-height:1}
.m-stat .n span{background:linear-gradient(120deg,var(--m-gold2),var(--m-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.m-stat .l{color:#8ea2bd;font-size:.82rem;margin-top:.35rem}

/* ---------- Secciones ---------- */
.m-section{padding:5rem 1.5rem;max-width:1140px;margin:0 auto}
.m-section h2{text-align:center;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:var(--m-navy);
  margin:0 0 .6rem;letter-spacing:-.02em}
.m-section .sub{text-align:center;color:var(--m-soft);max-width:560px;margin:0 auto 3rem;font-size:1.05rem}
.m-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.m-feature{background:#fff;border:1px solid #e9eef5;border-radius:1rem;padding:1.6rem;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.m-feature:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(10,27,48,.12);border-color:#cfe0f2}
.m-feature .ic{width:52px;height:52px;border-radius:.85rem;display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:#fff;margin-bottom:1rem;background:linear-gradient(135deg,var(--m-blue),var(--m-teal))}
.m-feature.gold .ic{background:linear-gradient(135deg,var(--m-gold),var(--m-gold2));color:#3a2a05}
.m-feature h3{font-size:1.12rem;font-weight:700;margin:0 0 .4rem;color:var(--m-navy)}
.m-feature p{color:var(--m-soft);font-size:.92rem;margin:0;line-height:1.55}

/* ---------- Precios ---------- */
.m-pricing{background:linear-gradient(180deg,#f6f9fc,#eef4fa)}
.m-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;max-width:1000px;margin:0 auto}
.m-price{background:#fff;border:1px solid #e4ebf3;border-radius:1.1rem;padding:2rem 1.6rem;text-align:center;
  position:relative;transition:transform .25s,box-shadow .25s}
.m-price:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(10,27,48,.13)}
.m-price.feat{border:2px solid var(--m-teal);box-shadow:0 18px 44px rgba(15,182,168,.18)}
.m-price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--m-gold),var(--m-gold2));color:#3a2a05;
  font-size:.72rem;font-weight:700;padding:.25rem .9rem;border-radius:999px}
.m-price h3{font-size:1.25rem;font-weight:800;color:var(--m-navy);margin:.2rem 0 .5rem}
.m-price .amt{font-size:2.4rem;font-weight:800;color:var(--m-blue);line-height:1}
.m-price .amt small{font-size:.9rem;color:var(--m-soft);font-weight:500}
.m-price ul{list-style:none;padding:0;margin:1.4rem 0;text-align:left}
.m-price li{padding:.4rem 0;color:#334155;font-size:.92rem;display:flex;align-items:center;gap:.5rem}
.m-price li i{color:var(--m-teal)}

/* ---------- Footer / CTA ---------- */
.m-cta-band{background:linear-gradient(135deg,#0a1b30,#0e2746 60%,#0b5a64);color:#fff;text-align:center;
  padding:4.5rem 1.5rem;border-radius:0}
.m-cta-band h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;margin:0 0 .8rem;color:#fff}
.m-cta-band p{color:#aebfd4;max-width:520px;margin:0 auto 2rem;font-size:1.05rem}
.m-foot{background:#081424;color:#7e93ad;text-align:center;padding:2rem 1.5rem;font-size:.85rem}

/* ============================================================
   AUTH SPLIT (login / registro)
   ============================================================ */
.m-auth{min-height:100vh;display:flex}
.m-auth-left{flex:1;position:relative;color:#fff;padding:3rem 3.2rem;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
  background:radial-gradient(700px 400px at 30% 20%, rgba(15,182,168,.30) 0%, transparent 55%),
             radial-gradient(600px 380px at 80% 90%, rgba(227,167,47,.18) 0%, transparent 55%),
             linear-gradient(160deg,#0a1b30,#0e2746 60%,#0a2a44)}
.m-auth-left .a-logo{width:78px;height:78px;border-radius:1.2rem;display:flex;align-items:center;justify-content:center;
  font-size:2.1rem;color:#fff;background:linear-gradient(135deg,var(--m-blue),var(--m-teal));
  box-shadow:0 14px 34px rgba(15,182,168,.5);margin-bottom:1.1rem}
.m-auth-left h2{font-size:1.9rem;font-weight:800;margin:0;letter-spacing:-.01em}
.m-auth-left .tagline{color:var(--m-gold2);font-weight:600;letter-spacing:.12em;font-size:.78rem;
  text-transform:uppercase;margin:.3rem 0 2.2rem}
.m-feat-list{list-style:none;padding:0;margin:0 0 2.2rem;display:flex;flex-direction:column;gap:1.15rem;max-width:380px}
.m-feat-list li{display:flex;gap:.95rem;align-items:flex-start}
.m-feat-list .fi{width:44px;height:44px;flex-shrink:0;border-radius:.7rem;display:flex;align-items:center;
  justify-content:center;font-size:1.15rem;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);color:var(--m-teal2)}
.m-feat-list .ft{font-weight:600;font-size:.98rem}
.m-feat-list .fd{color:#9fb2cb;font-size:.83rem}
.m-auth-stats{display:flex;gap:.9rem;flex-wrap:wrap}
.m-auth-stats .s{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:.85rem;
  padding:.9rem 1.1rem;min-width:96px;text-align:center}
.m-auth-stats .s .n{font-size:1.5rem;font-weight:800;color:var(--m-gold2);line-height:1}
.m-auth-stats .s .l{font-size:.72rem;color:#9fb2cb;margin-top:.2rem}

.m-auth-right{width:46%;max-width:560px;background:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:3rem 3rem}
.m-auth-right h1{font-size:1.7rem;font-weight:800;color:var(--m-navy);margin:0 0 .3rem}
.m-auth-right .hint{color:var(--m-soft);font-size:.92rem;margin-bottom:1.8rem}
.m-field{margin-bottom:1.1rem}
.m-field label{display:block;font-size:.82rem;font-weight:600;color:#475569;margin-bottom:.35rem}
.m-input-group{display:flex;align-items:center;border:1.5px solid #e2e8f1;border-radius:.7rem;
  overflow:hidden;transition:border-color .2s,box-shadow .2s;background:#fff}
.m-input-group:focus-within{border-color:var(--m-teal);box-shadow:0 0 0 .2rem rgba(15,182,168,.16)}
.m-input-group .ig-ic{padding:0 .85rem;color:#94a3b8}
.m-input-group input{flex:1;border:none;outline:none;padding:.72rem .4rem;font-size:.95rem;background:transparent}
.m-demo{border:1px solid #e7eef6;border-radius:.85rem;padding:.85rem;margin-top:.4rem;background:#fafcff}
.m-demo .dh{font-size:.78rem;font-weight:700;color:var(--m-blue);margin-bottom:.5rem}
.m-demo .drow{display:flex;align-items:center;justify-content:space-between;padding:.45rem .5rem;border-radius:.5rem;
  cursor:pointer;transition:background .2s}
.m-demo .drow:hover{background:#eef5fc}
.m-demo .drow .em{font-size:.86rem;color:#334155}
.m-divider{display:flex;align-items:center;gap:.8rem;color:#9aa7b8;font-size:.78rem;margin:1.4rem 0 1rem}
.m-divider::before,.m-divider::after{content:"";flex:1;height:1px;background:#e6ecf3}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .m-auth-left{display:none}
  .m-auth-right{width:100%;max-width:none}
  .m-navlinks{gap:1rem}
  .m-navlinks a:not(.m-btn){display:none}
}
@media (max-width:575px){
  .m-nav{padding:.85rem 1.1rem}
  .m-auth-right{padding:2.2rem 1.4rem}
  .m-stats{gap:1.6rem}
  .m-section{padding:3.5rem 1.1rem}
}

/* Distintivo "Aplicativo SaaS" en el panel de login */
.m-saas-pill{display:inline-flex;align-items:center;gap:.5rem;margin:-1.4rem 0 2.2rem;
  padding:.45rem 1rem;border-radius:999px;font-size:.8rem;font-weight:600;
  color:var(--m-gold2);background:rgba(227,167,47,.12);
  border:1px solid rgba(244,197,96,.35);backdrop-filter:blur(4px);width:fit-content}
.m-saas-pill i{color:var(--m-gold2)}