/* ==========================================================================
   MorCar Solutions - Web 2.0
   Archivo: /assets/css/main.css
   Descripción:
     - Estilos globales (mobile-first)
     - Componentes: header, botones, cards, grids, footer
     - Efecto neon/glow (MorCar)
     - Animaciones suaves (respeta prefers-reduced-motion)
   ========================================================================== */

:root{
  --bg: #050814;
  --bg2: #060b1f;
  --panel: rgba(10, 14, 28, .82);
  --panel2: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);

  --cian: #00e5ff;
  --blue: #1c69ff;
  --blue2: #2aa0ff;

  --border: rgba(255,255,255,.10);
  --shadow: 0 16px 60px rgba(0,0,0,.45);

  --r: 18px;
  --r2: 24px;

  --max: 1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(40,110,255,.20), transparent 70%),
    radial-gradient(900px 600px at 20% 0%, rgba(0,229,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
}

/* Fondo “tech grid” sutil (como tu screenshot) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: translateZ(0);
}

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

.container{
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Scroll progress
--------------------------------------------------------------------------- */
.scroll-progress{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index: 9999;
  background: rgba(255,255,255,.06);
}
#jsProgress{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(0,229,255,.6), rgba(40,110,255,.8));
  box-shadow: 0 0 20px rgba(0,229,255,.30);
}

/* --------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index: 2000;
  backdrop-filter: blur(10px);
  background: rgba(5, 8, 20, .55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.2px;
}
.brand img{
  width:40px;
  height:40px;
  object-fit:contain;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.18));
}
.brand span{
  font-size: 1.02rem;
  white-space:nowrap;
}

.nav-links{
  display:none; /* mobile-first */
  align-items:center;
  gap: 18px;
  font-weight: 600;
  color: var(--muted);
}
.nav-links a{
  padding:10px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover{
  background: rgba(255,255,255,.06);
  color: var(--text);
}

.nav-cta{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Evita que el CTA del header se parta en 2 líneas */
.nav-cta .btn{ white-space: nowrap; }

/* Mobile: ocultar CTA del header (evita que se sobreponga) */
@media (max-width: 979px){
  .nav-cta > a.btn{
    display:none !important;
  }
}

.mobile-toggle{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.burger{
  width:20px;
  display:inline-grid;
  gap:4px;
}
.burger span{
  height:2px;
  background: rgba(255,255,255,.75);
  border-radius: 999px;
}

.mobile-panel{
  display:none;
  padding: 10px 0 14px;
}
.mobile-panel a{
  display:block;
  padding: 12px 10px;
  border-radius: 14px;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  margin-top: 10px;
}
.mobile-panel a:hover{ color: var(--text); }

/* Dropdown simple (desktop) */
.dropdown{ position:relative; }
.dropdown > button{
  all:unset;
  cursor:pointer;
  padding:10px 10px;
  border-radius: 12px;
  color: var(--muted);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.dropdown > button:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.dropdown-menu{
  position:absolute;
  top: 46px;
  right: 0;
  min-width: 260px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 12, 26, .92);
  box-shadow: var(--shadow);
  display:none;
}
.dropdown-menu a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
}
.dropdown-menu a:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.dropdown.open .dropdown-menu{ display:block; }

@media (min-width: 980px){
  .nav-links{ display:flex; }
  .mobile-only{ display:none !important; }

  /* Header un poco más compacto para que todo quede en 1 renglón */
  .nav{ padding: 8px 0; gap: 10px; }
  .brand{ gap: 8px; }
  .brand img{ width:34px; height:34px; }
  .brand span{ font-size: .98rem; }
  .nav-links{ gap: 14px; font-size: .95rem; }
  .nav-links a{ padding:8px 8px; }
  .dropdown > button{ padding:8px 8px; font-size: .95rem; }
  .nav-cta .btn{ padding:10px 12px; font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }

.btn-primary{
  border-color: rgba(0,229,255,.35);
  background: linear-gradient(90deg, rgba(0,229,255,.18), rgba(40,110,255,.16));
  box-shadow:
    0 0 18px rgba(0,229,255,.20),
    0 0 48px rgba(0,229,255,.10);
}
.btn-primary:hover{
  box-shadow:
    0 0 22px rgba(0,229,255,.28),
    0 0 62px rgba(0,229,255,.14);
}

/* --------------------------------------------------------------------------
   Sections / Typography
--------------------------------------------------------------------------- */
.section{ padding: 42px 0; }
.section--tight{ padding: 22px 0; }

.section-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}
.section-title h1, .section-title h2{
  margin:0 0 6px 0;
  letter-spacing: .2px;
}
.section-title p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

.h1{
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  margin: 0 0 10px 0;
}
.lead{
  color: var(--muted);
  margin: 0;
  max-width: 80ch;
}

/* --------------------------------------------------------------------------
   Grids / Cards
--------------------------------------------------------------------------- */
.grid{ display:grid; gap: 16px; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width: 820px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  background: rgba(12, 16, 30, .78);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r2);
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
}

/* Neon / Glow (solo al pasar el mouse) */
.card.neon{
  position: relative;
  border: 1px solid rgba(0,229,255,.28);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
.card.neon::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--r2) + 2px);
  pointer-events:none;
  box-shadow:
    0 0 22px rgba(0,229,255,.22),
    0 0 84px rgba(0,229,255,.11);
  opacity: 0;
  transition: opacity .22s ease;
}

/* Hover/focus: activa retroiluminado (desktop) */
@media (hover:hover) and (pointer:fine){
  .card.neon:hover{
    border-color: rgba(0,229,255,.52);
    box-shadow:
      0 0 18px rgba(0,229,255,.18),
      0 0 46px rgba(0,229,255,.10),
      0 22px 70px rgba(0,0,0,.55);
    transform: translateY(-1px);
  }
  .card.neon:hover::before{ opacity:.92; }

  /* accesibilidad teclado */
  .card.neon:focus-within{
    border-color: rgba(0,229,255,.52);
    box-shadow:
      0 0 18px rgba(0,229,255,.18),
      0 0 46px rgba(0,229,255,.10),
      0 22px 70px rgba(0,0,0,.55);
  }
  .card.neon:focus-within::before{ opacity:.92; }
}

.card h2{ margin:0 0 8px 0; }
.card p{ margin:0 0 12px 0; color: var(--muted); }
.card ul{ margin: 0; padding-left: 18px; color: var(--muted); }
.card li{ margin: 8px 0; }

.card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.hr{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.3px;
  color: rgba(0,229,255,.85);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,229,255,.28);
  background: rgba(0,229,255,.06);
}

.inline-note{
  margin: 8px 0 0;
  color: var(--muted2);
  font-size: .95rem;
}

/* Callout */
.callout{
  padding: 18px;
  border-radius: var(--r2);
  border: 1px solid rgba(0,229,255,.18);
  background: linear-gradient(180deg, rgba(0,229,255,.06), rgba(40,110,255,.04));
  box-shadow: 0 0 40px rgba(0,229,255,.08);
}

/* --------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.site-footer{
  margin-top: 40px;
  padding: 34px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.footer-grid{
  display:grid;
  gap: 18px;
}
@media (min-width: 900px){
  .footer-grid{ grid-template-columns: 1.2fr .8fr; }
}
.site-footer h3{ margin:0 0 8px 0; }
.site-footer p{ margin:0 0 12px 0; color: var(--muted); }
.footer-links{ display:flex; flex-wrap:wrap; gap: 12px; }
.footer-links a{
  color: var(--muted);
  border-bottom: 1px dashed rgba(255,255,255,.22);
}
.footer-links a:hover{ color: var(--text); }

/* --------------------------------------------------------------------------
   Reveal animations (suaves)
--------------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ----------------------------------------------------------------
   Formularios (estilo oscuro)
----------------------------------------------------------------- */
.form{ display:grid; gap: 12px; }
.input label{ display:block; font-weight: 700; margin-bottom: 6px; }
.input .help{ margin-top: 6px; font-size: .92rem; color: rgba(255,255,255,.65); }
.input input,
.input select,
.input textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  outline: none;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
.input textarea{ resize: vertical; min-height: 110px; }
.input input::placeholder,
.input textarea::placeholder{ color: rgba(255,255,255,.45); }
.input input:focus,
.input select:focus,
.input textarea:focus{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 4px rgba(0,229,255,.12);
  background: rgba(255,255,255,.08);
}

/* ----------------------------------------------------------------
   Utilidades para demos y cards
----------------------------------------------------------------- */
.brand-icon{
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 10px 0 8px;
  filter: drop-shadow(0 0 18px rgba(0,229,255,.14));
}
.mini-features{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(255,255,255,.74);
}
.mini-features li{ margin: 6px 0; }

/* Offset para anclas con header sticky */
[id]{ scroll-margin-top: 92px; }

/* =========================================================
   HERO INTEGRADO (estilo "Pro")
   - Integrado al layout (no tarjeta)
   - Mobile-first
   ========================================================= */
.hero--integrated{
  position: relative;
  min-height: 62vh;
  display: grid;
  align-items: end;
  padding: 84px 0 26px; /* espacio para el header sticky */
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

@media (min-width: 900px){
  .hero--integrated{
    min-height: 72vh;
    padding: 96px 0 34px;
  }
}

.hero--integrated .hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero--integrated .hero__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.hero--integrated .hero__overlay{
  position: absolute;
  inset: 0;
  /* Overlay NEUTRO (sin tinte azul): solo contraste/legibilidad */
  background:
    linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.18) 55%, rgba(0,0,0,.42));
}

.hero--integrated .hero__content{
  position: relative;
  z-index: 1;
}

.hero--integrated .hero__stack{
  max-width: 860px;
}

.hero--integrated .hero__title{
  margin: 0 0 10px 0;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-size: clamp(30px, 4.3vw, 56px);
}

.hero--integrated .hero__subtitle{
  margin: 0 0 16px 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.55;
}

.hero--integrated .hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Thumbnail para demos/productos */
.demo-thumb{
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  margin: 10px 0 14px;
}

.demo-thumb img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

@media (min-width: 900px){
  .demo-thumb img{ height: 200px; }
}

/* WebSites: imagen hero con altura controlada (similar a SmartLink) */
.websites-hero-media{
  height: 220px;            /* ajusta si quieres 200/240 */
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* InvitApp: imagen más grande y uniforme (similar a otras fichas) */
.invitapp-hero-media{
  height: 280px;           /* 260–300 según te guste */
  width: 100%;
  object-fit: cover;       /* llena la ficha como “hero” */
  object-position: center; /* recorte centrado */
  display: block;
  border-radius: 14px;     /* opcional si quieres suavizar */
}


/* --------------------------------------------------------------------------
   Modal (Contacto en lanzamiento)
--------------------------------------------------------------------------- */
.no-scroll{ overflow:hidden; }

.mc-modal{
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.mc-modal.is-open{ display:flex; }

.mc-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

.mc-modal__dialog{
  position: relative;
  width: min(560px, 100%);
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10, 14, 34, .92);
  box-shadow: 0 22px 80px rgba(0,0,0,.60);
  padding: 16px;
}

.mc-modal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.mc-modal__header h3{
  margin: 0;
  font-size: 1.08rem;
}
.mc-modal__x{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
}
.mc-modal__x:hover{ background: rgba(255,255,255,.10); }

/* --------------------------------------------------------------------------
   Modal content
--------------------------------------------------------------------------- */
.mc-modal__body{ margin-top: 12px; }
.mc-modal__body p{ margin: 0 0 10px 0; color: rgba(255,255,255,.82); }
.mc-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
.mc-modal__actions .btn{ flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Helpers
--------------------------------------------------------------------------- */
.hidden{ display:none !important; }
.center{ text-align:center; }