/* 
   :root define variables globales de CSS que se pueden usar 
   en todo el proyecto. Aqui se configuran colores y estilos base 
   para mantener una apariencia uniforme y facil de actualizar.
*/
:root {
  --color-primary: #a914b8;
  --color-primary-600: #7c1087;
  --color-accent: #f59e0b;
  --color-bg: #0b1220;
  --color-surface: #0f172a;
  --color-text: #e5e7eb;
  --color-muted: #9ca3af;
  --radius: 12px;
}


/* 
   El selector universal (*) aplica estilos a todos los elementos de la pagina.
   box-sizing: border-box hace que el ancho y alto incluyan 
   padding y bordes, facilitando el control del diseno y evitando 
   calculos adicionales de espacio.
*/
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, var(--color-bg), #0c1427 40%, #0b1220 100%);
  color: var(--color-text);
}

/*
   Tamano base de encabezados para no depender de valores por defecto del navegador
   dentro de <section>, <article>, <nav>, <aside>. Evita advertencias y mantiene
   tipografia consistente entre navegadores.
*/
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; margin: 0 0 10px; }
h3 { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.3; margin: 0 0 8px; }


/* 
   Clase .container para estructurar el contenido principal.
   - width: 100%;        Hace que ocupe todo el ancho disponible.
   - max-width: 1100px;  Limita el ancho maximo para evitar que se vea demasiado extendido.
   - margin: 0 auto;     Centra el contenedor horizontalmente.
   - padding: 0 20px;    Agrega espacio interno lateral para que el contenido no quede pegado a los bordes.
*/
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 20px; }


/* 
    Estilos para la cabecera del sitio y su navegacion:
    - .site-header: Hace que la cabecera permanezca fija en la parte superior 
       mientras se hace scroll, con un fondo semitransparente y un ligero desenfoque.
    - .header-inner: Organiza el contenido interno en fila y lo separa con espacio entre elementos.
    - .brand y .brand-mark: Controlan la apariencia del logotipo y el nombre del sitio.
    - .main-nav: Define el estilo del menu de navegacion, incluyendo enlaces y su efecto hover.
*/
.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(6px); background: rgba(11,18,32,0.6); border-bottom: 1px solid rgba(255,255,255,0.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; font-weight: 700; letter-spacing: .2px; }
.brand-mark { font-size: 24px; }
.main-nav { display: flex; gap: 14px; align-items: center; }
.main-nav a { color: var(--color-text); text-decoration: none; opacity: 0.9; }
.main-nav a:hover { opacity: 1; }

/* Mobile hamburger trigger (hidden on desktop) */
.menu-toggle { display:none; appearance:none; background:transparent; border:1px solid rgba(255,255,255,0.18); color: var(--color-text); border-radius:10px; padding:8px 10px; cursor:pointer; }
.menu-toggle:focus-visible { outline: 3px solid rgba(59,130,246,0.35); outline-offset: 2px; }

/* Off-canvas drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display:none; z-index: 70; }
.mobile-drawer { position: fixed; top:0; right:0; height:100vh; width: 86vw; max-width: 360px; background: var(--color-surface); color: var(--color-text); transform: translateX(100%); transition: transform .25s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.4); z-index: 80; display:flex; flex-direction: column; }
.mobile-drawer header { display:flex; align-items:center; justify-content: space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
.mobile-drawer nav { display:flex; flex-direction: column; gap: 10px; padding: 12px 16px; }
.mobile-drawer a, .mobile-drawer button { color: var(--color-text); text-decoration:none; background: transparent; border: 1px solid rgba(255,255,255,0.14); padding:10px 12px; border-radius: 10px; text-align:left; }
.mobile-drawer a:hover, .mobile-drawer button:hover { border-color: rgba(255,255,255,0.24); }
.mobile-drawer .close { background:#fff; color:#111; border:1px solid #e5e7eb; }

.drawer-open .drawer-backdrop { display:block; }
.drawer-open .mobile-drawer { transform: translateX(0); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.12); background: transparent; color: var(--color-text); text-decoration: none; cursor: pointer; transition: .2s ease; }
.button:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.button-primary { background: var(--color-primary); border-color: var(--color-primary); color: #041410; }
.button-primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.button-secondary { background: transparent; }
.link { text-decoration: underline; text-underline-offset: 2px; }

.hero { padding: 64px 0 40px; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 32px; }
.hero-title { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 12px; }
.hero-subtitle { color: var(--color-muted); margin: 0 0 20px; font-size: 1.1rem; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.demo-form { display: grid; gap: 8px; max-width: 520px; }
.demo-label { color: var(--color-muted); font-size: .95rem; }
.demo-inputs { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.input { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: var(--color-text); outline: none; }
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(20,184,166,0.22); }
.demo-help { color: var(--color-muted); font-size: .9rem; }

/* Input adornments (icons/buttons inside inputs) */
.field-with-icon { position: relative; }
.field-with-icon > .input { padding-right: 44px; }
.field-with-icon .icon-toggle {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   background: transparent;
   color: var(--color-muted);
   border: 0;
   width: 30px;
   height: 30px;
   display: grid;
   place-items: center;
   cursor: pointer;
   z-index: 1;
}
.field-with-icon .icon-toggle:hover { color: var(--color-text); }
.field-with-icon .icon-toggle:focus-visible { outline: 3px solid rgba(59,130,246,0.35); border-radius: 6px; }


/* 
   Estilo para el contenedor de la ilustracion QR.
   - display: grid;        Utiliza un sistema de cuadricula para alinear contenido.
   - place-items: center;  Centra el contenido tanto vertical como horizontalmente.
   - height: 260px;        Define una altura fija para el area de la ilustracion.
*/
.qr-illustration { display: grid; place-items: center; height: 260px; }
.qr-tag { width: 160px; height: 160px; background: #111827; border: 2px solid rgba(255,255,255,0.1); border-radius: var(--radius); position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04); }
.qr-square { position: absolute; inset: 16px; background: conic-gradient(from 90deg, #0ea5e9, #14b8a6, #22c55e, #0ea5e9); -webkit-mask: radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) top left,
      radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) top right,
      radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) bottom left,
      radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) bottom right,
      linear-gradient(#000 0 0);
  mask: radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) top left,
    radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) top right,
    radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) bottom left,
    radial-gradient(circle at 12px 12px, transparent 10px, #000 11px) bottom right,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-in, destination-in, destination-in, destination-in, source-over;
      mask-composite: intersect; filter: blur(10px) saturate(0.8) brightness(0.8);
}
.qr-lines { position: absolute; inset: 16px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px); border-radius: 8px; mix-blend-mode: overlay; }
.collar { width: 210px; height: 20px; background: linear-gradient(90deg, #334155, #475569); border-radius: 999px; margin-top: 14px; box-shadow: 0 6px 30px rgba(0,0,0,0.4); }

.section { padding: 52px 0; }
.section-alt { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.steps { display: grid; grid-template-columns: 1fr; gap: 18px; }
.step h3 { margin: 0 0 10px; }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-item { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px; }
.bullets { line-height: 1.8; color: var(--color-muted); }

.site-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-nav a { color: var(--color-muted); text-decoration: none; margin-right: 12px; }
.footer-nav a:hover { color: var(--color-text); }

/* 
   Media query para pantallas pequenas (maximo 900px de ancho).
   Ajusta la distribucion de columnas para que los elementos se 
   muestren en una sola columna, mejorando la visualizacion en dispositivos moviles.
*/
@media (max-width: 900px) {
   /* Agrega un pequeno margen lateral en pantallas pequenas para evitar que el contenido quede pegado a los bordes */
   body { padding-left: 10px; padding-right: 10px; }
   /* Evita doble padding: el contenedor usa el padding del body en mobile */
   .container { padding-left: 0; padding-right: 0; }
  .hero-inner { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
   .main-nav { display:none; }
   .menu-toggle { display:inline-flex; }
}

/* ---- Cards, badges, and blog helpers ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px; transition: .2s ease; }
.card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
.card a { color: var(--color-text); text-decoration: none; }
.muted { color: var(--color-muted); }
.badge { display:inline-flex; align-items:center; gap:6px; padding: 2px 10px; border:1px solid rgba(255,255,255,0.12); border-radius: 999px; font-size: .8rem; color: var(--color-muted); background: rgba(255,255,255,0.02); }

/* Prose-ish defaults for content blocks */
.prose { line-height: 1.7; }
.prose p { margin: 0 0 12px; }
.prose h2 { margin: 18px 0 8px; font-size: 1.35rem; }
.prose h3 { margin: 14px 0 6px; font-size: 1.15rem; }
.prose ul { padding-left: 20px; margin: 8px 0 12px; }
.prose li { margin: 4px 0; }

/* Blog cover images and chips */
.card-cover { width: 100%; aspect-ratio: 16 / 9; background: #0b1220; border-radius: 10px; overflow: hidden; border:1px solid rgba(255,255,255,0.08); margin-bottom: 10px; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-hero { width: 100%; aspect-ratio: 16 / 9; background: #0b1220; border-radius: 12px; overflow: hidden; border:1px solid rgba(255,255,255,0.08); margin: 10px 0 14px; }
.cover-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid rgba(255,255,255,0.12); border-radius:999px; font-size:.8rem; color: var(--color-muted); background: rgba(255,255,255,0.02); }