/* ==========================================================================
   Mawii Plus - hoja de estilos
   ========================================================================== */

:root {
  /* Marca Mawii Plus: colores del manual de marca + tonos derivados para fondos y bordes */
  --mawii-blue: #17207A;      /* Azul Mawii (el del logo): botones, enlaces, íconos */
  --mawii-navy: #022859;      /* Azul profundo: títulos y botones al pasar el mouse */
  --mawii-red: #F24968;       /* Rojo Mawii: solo acentos en letra grande */
  --mawii-red-600: #D93558;   /* Rojo Mawii legible en letra pequeña */
  --mawii-sky: #53C8FB;       /* Celeste: solo detalles decorativos, nunca texto */
  --mawii-sky-700: #0A6E9E;   /* Celeste oscuro legible como texto */
  --mawii-blue-50: #EEF0FB;
  --mawii-blue-100: #DDE0F5;
  --mawii-sky-50: #E6F7FE;
  --mawii-sky-100: #CDEFFD;
  --mawii-red-50: #FDEBEF;
  --mawii-red-800: #A8203B;

  --primary: 234.5 68.3% 28.4%;  /* = --mawii-blue en HSL, para poder usarlo con transparencia */
  --primary-hover: var(--mawii-navy);
  --heading: var(--mawii-navy);
  --foreground: hsl(20 14.3% 4.1%);
  --accent: var(--mawii-blue-50);
  --destructive: hsl(0 84.2% 60.2%);

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --amber-800: #92400e;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

  --radius: 0.3rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--gray-200); margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--foreground);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
main { padding-top: 100px; min-height: 100vh; }

.container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

.text-primary { color: hsl(var(--primary)); }
.font-medium { font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.hidden { display: none !important; }

/* ---------- Animaciones ---------- */
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes gentle-pulse { 0% { opacity: .92; } 50% { opacity: .97; } 100% { opacity: .92; } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.float { animation: float 6s ease-in-out infinite; }
.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; top: 0; width: 100%; z-index: 50;
  background: #fff; box-shadow: var(--shadow-md);
  transition: all .3s;
}
.site-header__bar { height: .375rem; width: 100%; background: linear-gradient(to right, var(--mawii-blue), var(--mawii-sky)); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 3.25rem; width: auto; display: block; }
.site-nav { display: none; align-items: center; }
.site-nav a {
  font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700);
  padding: .5rem 1rem; margin: 0 .25rem; transition: color .15s;
}
.site-nav a:hover { color: hsl(var(--primary)); }
.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.site-header__login { display: none; align-items: center; gap: .5rem; }
.site-header__login a { padding: .5rem 1rem; font-size: .875rem; line-height: 1.25rem; color: var(--gray-600); transition: color .15s; }
.site-header__login a:hover { color: hsl(var(--primary)); }
.site-header__burger {
  padding: .375rem; color: var(--gray-500); border-radius: .375rem; border: 1px solid var(--gray-200);
  display: inline-flex; align-items: center; justify-content: center;
}
.site-header__burger:hover { color: hsl(var(--primary)); }
.mobile-menu { display: none; background: #fff; border-top: 1px solid var(--gray-100); }
.mobile-menu.open { display: block; }
.mobile-menu__inner { display: flex; flex-direction: column; padding-top: .5rem; padding-bottom: .5rem; }
.mobile-menu__inner > a { padding: .5rem 0; color: var(--gray-700); border-bottom: 1px solid var(--gray-50); transition: color .15s; }
.mobile-menu__inner > a:hover { color: hsl(var(--primary)); }
.mobile-menu__login { padding: .75rem 0; display: flex; flex-direction: column; gap: .5rem; }
.mobile-menu__login a {
  width: 100%; padding: .5rem 0; text-align: center; border: 1px solid var(--gray-200); color: var(--gray-700); border-radius: .375rem; transition: all .15s;
}
.mobile-menu__login a:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
@media (min-width: 768px) {
  .site-nav { display: flex; }
  .site-header__login { display: flex; }
  .site-header__burger { display: none; }
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding-top: 5rem; padding-bottom: 4rem; overflow: hidden; background: #fff; }
.hero__bg1, .hero__bg2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; clip-path: polygon(0 0, 300% 0, 0 100%); }
.hero__bg1 { opacity: .95; background: linear-gradient(to right, var(--mawii-blue-50), var(--mawii-sky-50)); animation: gentle-pulse 8s ease-in-out infinite alternate; }
.hero__bg2 { opacity: .35; background: linear-gradient(135deg, var(--mawii-blue-100), var(--mawii-sky-100)); mix-blend-mode: soft-light; }
.hero__container { position: relative; z-index: 10; padding-top: 3rem; }
.hero__row { display: flex; flex-direction: column; align-items: center; }
.hero__copy { margin-bottom: 2.5rem; }
.hero__title { font-size: 2.25rem; line-height: 1.25; font-weight: 700; margin-bottom: 1.5rem; color: var(--heading); letter-spacing: -.025em; }
.hero__title .text-primary { color: var(--mawii-red); }
.hero__subtitle { font-size: 1.25rem; line-height: 1.625; margin-bottom: 2rem; color: var(--gray-600); max-width: 32rem; font-weight: 300; letter-spacing: .025em; }
.hero__actions { display: flex; flex-direction: column; gap: .75rem; }
.hero__note { margin-top: .875rem; font-size: .8125rem; color: var(--gray-600); }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .875rem 2rem; border-radius: .375rem; background: hsl(var(--primary)); color: #fff; font-weight: 500;
  box-shadow: var(--shadow-lg); transition: color .3s, background-color .3s, transform .3s, box-shadow .3s;
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-.25rem); box-shadow: var(--shadow-xl), 0 20px 25px -5px hsl(var(--primary) / .3), 0 8px 10px -6px hsl(var(--primary) / .3); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(.875rem - 1px) 2rem; border: 1px solid var(--mawii-blue-100); border-radius: .375rem; background: #fff; color: hsl(var(--primary)); font-weight: 500;
  box-shadow: var(--shadow-sm); transition: background-color .15s, border-color .15s;
}
.btn-secondary:hover { background: var(--mawii-blue-50); border-color: hsl(var(--primary) / .4); }
.hero__visual { position: relative; width: 100%; margin: 0 auto; }

/* Tarjeta "un solo sistema": facturación, contabilidad con LUKA y números del negocio.
   Sin JS se ve completa; initStack la anima iluminando cada parte en orden, con escaneo y contadores. */
.stack { position: relative; z-index: 1; max-width: 36rem; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--gray-200); border-radius: .875rem; box-shadow: var(--shadow-xl), 0 24px 48px -12px hsl(var(--primary) / .18); }
.stack__scan {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 4px; opacity: 0; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--mawii-sky), transparent);
  box-shadow: 0 0 12px 4px color-mix(in srgb, var(--mawii-sky) 50%, transparent), 0 0 24px 10px color-mix(in srgb, var(--mawii-sky) 30%, transparent);
}
.stack__scan.is-sweeping { animation: stack-scan .9s linear forwards; }
@keyframes stack-scan { 0% { top: 0; opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.stack__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--gray-100); }
.stack__company { font-size: .875rem; font-weight: 600; color: var(--heading); }
.stack__luka { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--mawii-sky-700); white-space: nowrap; }
.stack__luka::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--mawii-sky); animation: pulse 1.2s ease-in-out infinite; }
.stack__item { display: flex; gap: .875rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--gray-100); border-left: 3px solid transparent; transition: background-color .22s, border-color .22s, opacity .22s; }
.stack__item:last-child { border-bottom: 0; }
.stack__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: var(--mawii-blue-50); font-size: 1rem; color: hsl(var(--primary)); transition: background-color .22s, color .22s; }
.stack__body { flex: 1; min-width: 0; }
.stack__label { font-size: .75rem; color: var(--gray-600); }
.stack__text { margin-top: .125rem; font-size: .9375rem; font-weight: 500; color: var(--gray-900); }
/* Frase de LUKA: renglones parejos, y los contadores guardan el ancho de dos cifras para que
   la frase no se reacomode mientras suben */
.stack__text--balance { text-wrap: balance; }
.stack__text [data-count] { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.stack__up { color: var(--mawii-sky-700); }
.stack__chip { flex-shrink: 0; align-self: center; padding: .25rem .625rem; border: 1px solid var(--mawii-sky-100); border-radius: 9999px; background: #fff; font-size: .75rem; font-weight: 600; color: var(--mawii-sky-700); white-space: nowrap; transition: opacity .22s, transform .22s; }
.stack__bar { height: .375rem; margin-top: .625rem; overflow: hidden; border-radius: 9999px; background: var(--mawii-blue-50); }
.stack__bar span { display: block; width: 62%; height: 100%; border-radius: inherit; background: hsl(var(--primary)); transition: width .85s ease-out; }
.stack__alert { display: flex; align-items: flex-start; gap: .5rem; margin-top: .625rem; padding: .5rem .625rem; border-radius: .5rem; background: var(--mawii-red-50); font-size: .75rem; color: var(--mawii-red-800); transition: opacity .22s, transform .22s; }
.stack__alert i { margin-top: .125rem; }
/* Estados de la animación: pendiente (atenuado), activa (resaltada) y hecha */
.stack.is-animated .stack__item { opacity: .45; }
.stack.is-animated .stack__item.is-active, .stack.is-animated .stack__item.is-done { opacity: 1; }
.stack.is-animated .stack__item.is-active { background: var(--mawii-sky-50); border-left-color: hsl(var(--primary)); }
.stack.is-animated .stack__item.is-active .stack__icon { background: hsl(var(--primary)); color: #fff; }
.stack.is-animated .stack__bar span { width: 0; }
.stack.is-reset .stack__bar span { transition: none; }
.stack.is-animated .is-active .stack__bar span, .stack.is-animated .is-done .stack__bar span { width: 62%; }
.stack.is-animated .stack__chip, .stack.is-animated .stack__alert { opacity: 0; transform: translateY(.25rem); }
.stack.is-animated .is-active .stack__chip, .stack.is-animated .is-done .stack__chip,
.stack.is-animated .is-active .stack__alert, .stack.is-animated .is-done .stack__alert { opacity: 1; transform: none; }
@media (min-width: 640px) {
  .stack__head { padding: 1rem 1.375rem; }
  .stack__company { font-size: 1rem; }
  .stack__luka, .stack__label, .stack__chip, .stack__alert { font-size: .8125rem; }
  .stack__item { gap: 1rem; padding: 1.25rem 1.375rem; }
  .stack__icon { width: 2.625rem; height: 2.625rem; border-radius: .625rem; font-size: 1.125rem; }
  .stack__text { font-size: 1.0625rem; }
  .stack__chip { padding: .3125rem .75rem; }
  .stack__bar { height: .4375rem; margin-top: .75rem; }
  .stack__alert { margin-top: .75rem; padding: .5625rem .75rem; }
}
.hero__blob1 { position: absolute; bottom: -1.5rem; right: -1.5rem; width: 6rem; height: 6rem; background: hsl(var(--primary) / .05); border-radius: 9999px; filter: blur(40px); z-index: 0; }
.hero__blob2 { position: absolute; top: -2.5rem; left: -2.5rem; width: 8rem; height: 8rem; background: hsl(var(--primary) / .1); border-radius: 9999px; filter: blur(64px); z-index: 0; }
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; }
}
@media (min-width: 768px) {
  .hero__row { flex-direction: row; }
  .hero__copy { width: 50%; margin-bottom: 0; padding-right: 1.5rem; }
  .hero__visual { width: 50%; }
  .hero__title { font-size: 3rem; line-height: 1.25; }
}
@media (min-width: 1024px) {
  .hero__copy { width: 45%; }
  .hero__visual { width: 55%; }
}

/* ==========================================================================
   Secciones genéricas
   ========================================================================== */
.section-head { text-align: center; }
.section-head h2 { font-weight: 700; color: var(--heading); }
.section-head p { color: var(--gray-600); margin-left: auto; margin-right: auto; }

/* ---------- Beneficios ---------- */
.benefits { padding-top: 3.5rem; padding-bottom: 3.5rem; background: var(--gray-50); }
.benefits .section-head { margin-bottom: 2.5rem; }
.benefits .section-head h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: .75rem; }
.benefits .section-head p { font-size: .875rem; line-height: 1.25rem; max-width: 36rem; }
.benefits__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 64rem; margin: 0 auto; }
.benefit {
  position: relative; border: 1px solid var(--gray-100); border-radius: .5rem; padding: 1.25rem; background: #fff;
  backdrop-filter: blur(4px); transition: all .2s;
}
.benefit:hover { border-color: hsl(var(--primary) / .2); box-shadow: var(--shadow-sm); }
.benefit--highlight { background: linear-gradient(to right, color-mix(in srgb, var(--mawii-blue-50) 70%, transparent), color-mix(in srgb, var(--mawii-sky-50) 70%, transparent)); border-color: var(--mawii-blue-100); }
.benefit--highlight:hover { border-color: var(--mawii-blue-100); }
.benefit__inner { display: flex; align-items: flex-start; }
.benefit__icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: .75rem; color: hsl(var(--primary)); font-size: 1.25rem; transition: all .2s; }
.benefit:hover .benefit__icon { color: hsl(var(--primary) / .8); }
.benefit--highlight .benefit__icon, .benefit--highlight:hover .benefit__icon { color: hsl(var(--primary)); }
.benefit h3 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; margin-bottom: .375rem; color: var(--gray-800); }
.benefit--highlight h3 { color: hsl(var(--primary)); }
.benefit p { font-size: .75rem; line-height: 1.625; color: var(--gray-600); }
@media (min-width: 768px) {
  .benefits .section-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Asistente ---------- */
.assistant { padding-top: 3rem; padding-bottom: 3rem; background: #fff; }
.assistant .section-head { margin-bottom: 2.5rem; }
.assistant .section-head h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: .5rem; }
.assistant .section-head p { font-size: .875rem; line-height: 1.25rem; max-width: 36rem; }
.assistant__grid { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.chat-card { background: #fff; border: 1px solid var(--gray-100); border-radius: .5rem; padding: 1.25rem; box-shadow: var(--shadow-md); transition: box-shadow .15s; }
.chat-card:hover { box-shadow: var(--shadow-lg); }
.chat-card__head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.chat-card__avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: hsl(var(--primary) / .1); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary)); font-size: .875rem; }
.chat-card__head h3 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.chat-card__head p { font-size: .75rem; line-height: 1rem; color: var(--gray-500); }
.chat-card__msgs { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.msg { display: flex; align-items: flex-start; }
.msg--user { justify-content: flex-end; }
.msg__avatar { width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: hsl(var(--primary) / .1); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: .5rem; color: hsl(var(--primary)); font-size: .75rem; }
.msg__bubble { background: var(--gray-50); padding: .5rem; border-radius: .375rem; font-size: .75rem; line-height: 1rem; color: var(--gray-700); max-width: 80%; }
.msg--user .msg__bubble { background: hsl(var(--primary) / .05); }
.msg__lock { margin-top: .5rem; text-align: center; padding: .375rem; background: #fff; border-radius: .25rem; border: 1px solid var(--gray-100); }
.msg__lock i { color: hsl(var(--primary)); font-size: .75rem; margin-right: .25rem; }
.msg__lock span { font-size: .75rem; font-weight: 500; }
.chat-card__cta { margin-top: 1rem; text-align: center; }
.btn-block {
  display: block; width: 100%; text-align: center; padding: .625rem 1rem; background: hsl(var(--primary)); color: #fff;
  font-size: .875rem; line-height: 1.25rem; font-weight: 500; border-radius: .5rem; box-shadow: var(--shadow-sm); transition: background-color .15s;
}
.btn-block:hover { background: var(--primary-hover); }
.assistant__list h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; margin-bottom: 1rem; }
.assistant__items { display: flex; flex-direction: column; gap: .75rem; }
.feature { display: flex; align-items: flex-start; padding: .75rem; border-radius: .5rem; border: 1px solid var(--gray-50); transition: all .15s; }
.feature:hover { border-color: var(--gray-100); box-shadow: var(--shadow-sm); }
.feature__icon { width: 2rem; height: 2rem; border-radius: 9999px; background: hsl(var(--primary) / .1); display: flex; align-items: center; justify-content: center; margin-right: .75rem; color: hsl(var(--primary)); font-size: .75rem; flex-shrink: 0; transition: background-color .15s; }
.feature:hover .feature__icon { background: hsl(var(--primary) / .2); }
.feature h4 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; margin-bottom: .25rem; }
.feature p { font-size: .75rem; line-height: 1rem; color: var(--gray-600); }
@media (min-width: 768px) {
  .assistant .section-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .assistant__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FAQ ---------- */
.faq { padding-top: 5rem; padding-bottom: 5rem; position: relative; overflow: hidden; background: var(--gray-50); }
.faq .section-head { margin-bottom: 3rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.faq .section-head h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1rem; }
.faq .section-head p { font-size: 1rem; line-height: 1.5rem; max-width: 36rem; }
.faq__list { max-width: 48rem; margin: 0 auto; }
.faq__items { display: grid; gap: 1rem; margin-bottom: 2rem; }
.faq-item { background: #fff; border-radius: .75rem; overflow: hidden; border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); transition: all .2s; }
.faq-item:hover { border-color: hsl(var(--primary) / .2); box-shadow: var(--shadow); }
.faq-item__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem; text-align: left; }
.faq-item__q { display: flex; align-items: center; }
.faq-item__icon { padding: .5rem; margin-right: .75rem; border-radius: 9999px; background: var(--mawii-sky-50); color: hsl(var(--primary)); transition: color .2s, background-color .2s; }
.faq-item__icon svg { width: 1.25rem; height: 1.25rem; }
.faq-item__q span { font-weight: 500; color: var(--gray-700); transition: color .2s; }
.faq-item__chev { width: 1.25rem; height: 1.25rem; color: var(--gray-400); transition: transform .3s; flex-shrink: 0; }
.faq-item__body { overflow: hidden; transition: all .3s; max-height: 0; opacity: 0; }
.faq-item__body > div { padding: 0 1rem 1rem 4rem; color: var(--gray-600); }
.faq-item.open .faq-item__body { max-height: 24rem; opacity: 1; }
.faq-item.open .faq-item__chev { transform: rotate(180deg); color: hsl(var(--primary)); }
.faq-item.open .faq-item__q span { color: hsl(var(--primary)); }
.faq-item.open .faq-item__icon { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.faq__cta { margin-top: 2.5rem; text-align: center; padding: 1.5rem; border-radius: .75rem; border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm); transition: box-shadow .15s; }
.faq__cta:hover { box-shadow: var(--shadow); }
.faq__cta h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; color: var(--heading); margin-bottom: .5rem; }
.faq__cta p { color: var(--gray-600); margin-bottom: 1rem; }
.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.5rem;
  background: hsl(var(--primary)); color: #fff; font-weight: 500; border-radius: .5rem; box-shadow: var(--shadow-sm); transition: all .15s;
}
.btn-cta:hover { background: var(--primary-hover); }
.btn-cta svg { width: 1rem; height: 1rem; margin-left: .5rem; }
@media (min-width: 768px) { .faq .section-head h2 { font-size: 2.25rem; line-height: 2.5rem; } }

/* ---------- CTA final ---------- */
.cta { padding-top: 4rem; padding-bottom: 4rem; position: relative; overflow: hidden; background: #fff; border-top: 1px solid var(--gray-100); }
.cta__inner { max-width: 56rem; margin: 0 auto; text-align: center; position: relative; z-index: 10; }
.cta h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--heading); }
.cta p { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 2rem; }
.cta__btns { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.btn-solid { padding: .75rem 2rem; border-radius: .5rem; background: hsl(var(--primary)); color: #fff; font-weight: 500; box-shadow: var(--shadow-sm); transition: background-color .15s; display: inline-block; text-align: center; }
.btn-solid:hover { background: var(--primary-hover); }
.btn-outline { padding: .75rem 2rem; border-radius: .5rem; border: 1px solid hsl(var(--primary) / .2); color: hsl(var(--primary)); font-weight: 500; transition: background-color .15s; display: inline-block; text-align: center; }
.btn-outline:hover { background: hsl(var(--primary) / .05); }
@media (min-width: 640px) { .cta__btns { flex-direction: row; } }
@media (min-width: 768px) { .cta h2 { font-size: 2.25rem; line-height: 2.5rem; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #fff; border-top: 1px solid var(--gray-100); padding-top: 2rem; padding-bottom: 2rem; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.site-footer__brand { grid-column: span 2 / span 2; }
.site-footer__logo { display: inline-flex; align-items: center; margin-bottom: 1rem; }
.site-footer__logo img { height: 2.5rem; width: auto; display: block; }
.site-footer__brand p { font-size: .75rem; line-height: 1rem; color: var(--gray-500); margin-bottom: 1rem; }
.site-footer__social { display: flex; gap: .75rem; }
.site-footer__social a { color: var(--gray-400); font-size: .875rem; transition: color .15s; }
.site-footer__social a:hover { color: hsl(var(--primary)); }
.site-footer h3 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-800); margin-bottom: .75rem; }
.site-footer ul { display: flex; flex-direction: column; gap: .5rem; }
.site-footer ul a { font-size: .75rem; line-height: 1rem; color: var(--gray-500); transition: color .15s; }
.site-footer ul a:hover { color: hsl(var(--primary)); }
.site-footer__bottom { border-top: 1px solid var(--gray-100); padding-top: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.site-footer__bottom p { font-size: .75rem; line-height: 1rem; color: var(--gray-400); margin-bottom: 1rem; }
.site-footer__contact { display: flex; align-items: center; font-size: .75rem; line-height: 1rem; color: var(--gray-400); }
.site-footer__contact .dot { margin: 0 .5rem; }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .site-footer__brand { grid-column: span 1 / span 1; }
  .site-footer__bottom { flex-direction: row; }
  .site-footer__bottom p { margin-bottom: 0; }
}

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */
.wa-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); transition: all .3s;
}
.wa-fab:hover { background: #1ebe5d; transform: translateY(-.25rem); }
.wa-fab svg { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   Modal de autenticación
   ========================================================================== */
.modal { display: none; }
.modal.open { display: block; }
.modal__overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.8); animation: fade-in .2s; }
.modal__content {
  position: fixed; left: 50%; top: 50%; z-index: 50; width: 100%; max-width: 28rem; transform: translate(-50%, -50%);
  display: grid; gap: 1rem; border: 1px solid var(--gray-200); background: #fff; padding: 1.5rem; box-shadow: var(--shadow-lg);
  animation: modal-in .2s; border-radius: .5rem;
}
.modal__title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -.025em; color: var(--heading); }
.modal__close { position: absolute; right: 1rem; top: 1rem; border-radius: .125rem; opacity: .7; transition: opacity .15s; }
.modal__close:hover { opacity: 1; }
.modal__close svg { width: 1rem; height: 1rem; }
.modal__view { display: none; }
.modal__view.active { display: block; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { display: block; color: var(--gray-700); font-weight: 500; margin-bottom: .5rem; }
.auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="tel"] {
  width: 100%; padding: .75rem; border: 1px solid var(--gray-300); border-radius: .5rem; background: #fff;
}
.auth-form input:focus { outline: none; box-shadow: 0 0 0 2px hsl(var(--primary)); border-color: transparent; }
.auth-form input.error { border-color: #ef4444; }
.auth-form .field-error { color: #ef4444; font-size: .875rem; margin-top: .25rem; display: none; }
.auth-form .field-error.show { display: block; }
.auth-form__row { display: flex; justify-content: space-between; align-items: center; }
.auth-form__check { display: flex; align-items: center; }
.auth-form__check input { margin-right: .5rem; }
.auth-form__check label { margin: 0; color: var(--gray-600); font-size: .875rem; font-weight: 400; }
.auth-form__terms { display: flex; align-items: flex-start; }
.auth-form__terms input { margin-top: .25rem; margin-right: .5rem; }
.auth-form__terms label { margin: 0; color: var(--gray-600); font-size: .875rem; font-weight: 400; }
.auth-form__terms a { color: hsl(var(--primary)); }
.auth-form__terms a:hover { text-decoration: underline; }
.link-primary { color: hsl(var(--primary)); font-size: .875rem; }
.link-primary:hover { color: var(--primary-hover); }
.auth-form__submit { width: 100%; padding: .75rem 0; border-radius: .5rem; background: hsl(var(--primary)); color: #fff; font-weight: 500; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.auth-form__submit:hover { background: var(--primary-hover); }
.auth-form__submit:disabled { opacity: .7; cursor: not-allowed; }
.auth-form__submit .spinner { animation: spin 1s linear infinite; width: 1.25rem; height: 1.25rem; margin-right: .75rem; margin-left: -.25rem; }
.auth-form__foot { margin-top: 1.5rem; text-align: center; }
.auth-form__foot p { color: var(--gray-600); }
.auth-form__foot button { color: hsl(var(--primary)); font-weight: 500; margin-top: .5rem; }
.auth-form__foot button:hover { color: var(--primary-hover); }
.auth-form__desc { color: var(--gray-600); margin-bottom: 1rem; }
.tel-field { position: relative; display: flex; }
.tel-field__flag {
  display: flex; align-items: center; padding: 0 .5rem 0 .75rem; border: 1px solid var(--gray-300); border-right: 0; border-radius: .5rem 0 0 .5rem;
  background: #fff; font-size: 1rem; gap: .25rem;
}
.tel-field__flag i { font-size: .625rem; color: var(--gray-500); }
.tel-field input { border-radius: 0 .5rem .5rem 0 !important; }

/* ==========================================================================
   Toasts
   ========================================================================== */
.toaster { position: fixed; top: 0; z-index: 100; display: flex; max-height: 100vh; width: 100%; flex-direction: column-reverse; padding: 1rem; pointer-events: none; }
@media (min-width: 640px) { .toaster { bottom: 0; right: 0; top: auto; flex-direction: column; max-width: 420px; } }
.toast {
  pointer-events: auto; position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; overflow: hidden;
  border-radius: .375rem; border: 1px solid var(--gray-200); background: #fff; padding: 1.5rem 2rem 1.5rem 1.5rem; box-shadow: var(--shadow-lg);
  animation: toast-in .3s ease-out; margin-top: .5rem;
}
.toast--destructive { border-color: var(--destructive); background: var(--destructive); color: #fff; }
.toast__title { font-size: .875rem; font-weight: 600; }
.toast__desc { font-size: .875rem; opacity: .9; margin-top: .25rem; }
.toast__close { position: absolute; right: .5rem; top: .5rem; opacity: 0; color: var(--gray-500); transition: opacity .15s; }
.toast:hover .toast__close { opacity: 1; }
.toast__close svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   Página: Precios
   ========================================================================== */
.pricing { padding-top: 4rem; padding-bottom: 3.5rem; background: var(--gray-50); }
.pricing__head { text-align: center; margin-bottom: 2.5rem; }
.pricing__head h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--heading); }
.pricing__lead { color: var(--gray-700); }
.pricing__lead strong { color: hsl(var(--primary)); font-weight: 600; }
.pricing__note { margin-top: .25rem; font-size: .8125rem; color: var(--gray-500); }
.pricing__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.pricing__jump a { font-size: .875rem; padding: .375rem .875rem; border-radius: 9999px; border: 1px solid var(--mawii-blue-100); background: #fff; color: hsl(var(--primary)); transition: all .15s; }
.pricing__jump a:hover { background: var(--mawii-blue-50); border-color: hsl(var(--primary) / .4); }

.plans { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 56rem; margin: 0 auto; align-items: start; }
.plan { background: #fff; border-radius: .75rem; border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); padding: 1.75rem; scroll-margin-top: 7.5rem; transition: border-color .15s, box-shadow .15s; }
.plan:hover { border-color: hsl(var(--primary) / .25); box-shadow: var(--shadow-md); }
.plan--featured, .plan--featured:hover { border: 2px solid hsl(var(--primary)); }
.plan__for { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mawii-sky-700); margin-bottom: .25rem; }
.plan h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--heading); margin-bottom: .75rem; }
.plan h3 { font-size: .875rem; font-weight: 600; color: var(--gray-800); margin: 1.5rem 0 .75rem; }
.plan__price { display: flex; align-items: baseline; gap: .375rem; }
.plan__price .amount { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: var(--heading); }
.plan__per { color: var(--gray-500); }
.plan__annual { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .375rem; font-size: .9375rem; color: var(--gray-700); }
.plan__badge { font-size: .75rem; font-weight: 600; color: #fff; background: var(--mawii-red-600); border-radius: 9999px; padding: .125rem .5rem; }
.plan__tax { margin-top: .25rem; font-size: .8125rem; color: var(--gray-500); }
.plan__cta { display: block; margin-top: 1.25rem; padding: .75rem 1rem; border-radius: .5rem; background: hsl(var(--primary)); color: #fff; font-weight: 600; text-align: center; box-shadow: var(--shadow-sm); transition: background-color .15s; }
.plan__cta:hover { background: var(--primary-hover); }
.plan__trial { display: block; margin-top: .625rem; font-size: .875rem; font-weight: 500; text-align: center; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px; }
.plan__trial:hover { color: var(--primary-hover); }
.plan__highlight { margin-top: 1.25rem; padding: .625rem .875rem; border-radius: .5rem; background: var(--mawii-sky-50); color: var(--mawii-navy); font-size: .9375rem; }
.plan__group { border-top: 1px solid var(--gray-100); margin-top: 1.25rem; }
.plan__group h3 { margin: 1.25rem 0 .375rem; }
.plan__group p { font-size: .875rem; line-height: 1.375rem; color: var(--gray-600); }
.plan__group p + p { margin-top: .375rem; }
.plan__group a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }

.checklist { display: grid; gap: .5rem; }
.checklist li { position: relative; padding-left: 1.625rem; font-size: .875rem; line-height: 1.25rem; color: var(--gray-700); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .125rem; width: 1rem; height: 1rem; border-radius: 9999px;
  background: hsl(var(--primary)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 8L7 9.5L10.5 6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.docs { padding-top: 3.5rem; padding-bottom: 5rem; background: #fff; border-top: 1px solid var(--gray-100); scroll-margin-top: 6.5rem; }
.docs__head { text-align: center; max-width: 44rem; margin: 0 auto 1.75rem; }
.docs__head h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--heading); margin-bottom: .75rem; }
.docs__head p { color: var(--gray-600); }
.docs__head .docs__meta { margin-top: .5rem; font-size: .8125rem; color: var(--gray-500); }
.docs__uses-title { margin-bottom: .75rem; font-size: .875rem; font-weight: 600; color: var(--gray-800); text-align: center; }
.docs__uses { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 64rem; margin: 0 auto 2rem; }
.docs__uses li { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border-radius: .75rem; background: var(--mawii-sky-50); color: var(--mawii-navy); font-size: .9375rem; line-height: 1.375rem; }
.docs__uses i { flex-shrink: 0; margin-top: .1875rem; color: hsl(var(--primary)); }
.docs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 64rem; margin: 0 auto; }
.doc-pack { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem 1rem; border: 1px solid var(--gray-200); border-radius: .75rem; background: #fff; text-align: center; transition: border-color .15s, box-shadow .15s; }
.doc-pack:hover { border-color: hsl(var(--primary) / .3); box-shadow: var(--shadow-sm); }
.doc-pack h3 { font-size: 1rem; font-weight: 600; color: var(--heading); }
.doc-pack__qty { font-size: .875rem; color: var(--gray-600); }
.doc-pack__qty strong { display: block; font-size: 1.25rem; line-height: 1.75rem; color: var(--gray-900); }
.doc-pack__price { margin: .25rem 0 .75rem; font-size: 1.375rem; font-weight: 700; color: var(--heading); }
.doc-pack__price span { display: block; font-size: .8125rem; font-weight: 400; color: var(--gray-500); }
.doc-pack:last-child:nth-child(odd) { grid-column: span 2; }
.doc-pack__cta { margin-top: auto; padding: .5rem; border: 1px solid hsl(var(--primary)); border-radius: .5rem; font-size: .875rem; font-weight: 600; color: hsl(var(--primary)); transition: all .15s; }
.doc-pack__cta:hover { background: hsl(var(--primary)); color: #fff; }
.docs__includes { max-width: 64rem; margin: 2.5rem auto 0; padding: 1.5rem; border-radius: .75rem; background: var(--gray-50); }
.docs__includes h3 { font-size: 1rem; font-weight: 600; color: var(--heading); margin-bottom: 1rem; }

.pricing__help { max-width: 40rem; margin: 3rem auto 0; text-align: center; }
.pricing__help h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--heading); margin-bottom: .5rem; }
.pricing__help p { color: var(--gray-600); margin-bottom: 1.25rem; }
.pricing__help-btns { display: flex; flex-direction: column; gap: .75rem; justify-content: center; }
@media (min-width: 640px) {
  .checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .pricing__help-btns { flex-direction: row; }
}
@media (min-width: 768px) {
  .pricing__head h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs__head h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .docs__uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .docs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-pack:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1024px) {
  .docs__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .checklist--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Página: Contacto
   ========================================================================== */
.contact { position: relative; padding-top: 6rem; padding-bottom: 6rem; background: #fff; overflow: hidden; }
.contact__top { position: absolute; top: 0; left: 0; width: 100%; height: 6rem; background: linear-gradient(to bottom, hsl(var(--primary) / .05), transparent); }
.contact__blob1 { position: absolute; top: -5rem; left: 25%; width: 16rem; height: 16rem; background: hsl(var(--primary) / .05); border-radius: 9999px; filter: blur(64px); }
.contact__blob2 { position: absolute; bottom: 2.5rem; right: 25%; width: 16rem; height: 16rem; background: hsl(var(--primary) / .05); border-radius: 9999px; filter: blur(64px); }
.contact__head { text-align: center; margin-bottom: 3rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.contact__head h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--heading); }
.contact__head p { color: var(--gray-600); }
.contact__card { max-width: 42rem; margin: 0 auto; background: #fff; border-radius: .75rem; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100); overflow: hidden; position: relative; }
.contact__card-inner { padding: 1.5rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.contact-form__field { display: flex; flex-direction: column; gap: .5rem; }
.contact-form__field label { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); }
.contact-form__field label span { color: var(--mawii-red-600); }
.contact-form__field input, .contact-form__field textarea {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: #fff; transition: border-color .15s;
}
.contact-form__field input:focus, .contact-form__field textarea:focus { outline: none; box-shadow: 0 0 0 2px hsl(var(--primary) / .2); border-color: hsl(var(--primary) / .3); }
.contact-form__field textarea { resize: vertical; }
.captcha-wrap { display: flex; justify-content: center; margin-top: 1rem; }
.captcha { background: linear-gradient(to right, var(--gray-50), #fff); padding: 1rem; border-radius: .5rem; box-shadow: var(--shadow-md); border: 1px solid var(--gray-200); max-width: 28rem; width: 100%; margin: 0 auto; }
.captcha__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.captcha__head-left { display: flex; align-items: center; }
.captcha__head-left svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); margin-right: .5rem; }
.captcha__head-left p { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); }
.captcha__brand { display: flex; align-items: center; gap: .25rem; }
.captcha__brand img { height: 1.25rem; width: auto; }
.captcha__brand span { font-size: .75rem; color: var(--gray-500); }
.captcha__row { padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; border-radius: .375rem; cursor: pointer; transition: all .2s; background: #fff; border: 1px solid var(--gray-200); }
.captcha__row:hover { border-color: hsl(var(--primary) / .5); box-shadow: var(--shadow-sm); }
.captcha__row.checked { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .05); }
.captcha__row-left { display: flex; align-items: center; }
.captcha__box { width: 1.25rem; height: 1.25rem; border-radius: .25rem; border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; transition: all .3s; }
.captcha__row.checked .captcha__box { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.captcha__box svg { width: .75rem; height: .75rem; color: #fff; display: none; }
.captcha__row.checked .captcha__box svg { display: block; }
.captcha__row-left span { margin-left: .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); }
.captcha__row > svg { width: 1.5rem; height: 1.5rem; color: var(--gray-400); }
.captcha__row.checked > svg { color: hsl(var(--primary)); }
.captcha__note { margin-top: .75rem; font-size: .75rem; color: var(--gray-500); text-align: center; }
.captcha__note a { color: hsl(var(--primary)); margin-left: .25rem; }
.captcha__note a:hover { text-decoration: underline; }
.contact-form__submit-wrap { margin-top: 1.5rem; display: flex; justify-content: center; }
.contact-form__submit {
  padding: .75rem 2rem; background: hsl(var(--primary)); color: #fff; border-radius: .5rem; font-weight: 500; transition: all .15s;
  display: flex; align-items: center; justify-content: center; width: 100%; max-width: 20rem;
}
.contact-form__submit:hover { background: var(--primary-hover); box-shadow: var(--shadow-md); }
.contact-form__submit:disabled { opacity: .7; cursor: not-allowed; }
.contact-form__submit span { display: flex; align-items: center; }
.contact-form__submit svg { width: 1rem; height: 1rem; margin-right: .5rem; }
@media (min-width: 768px) {
  .contact__head h1 { font-size: 2.25rem; line-height: 2.5rem; }
  .contact__card-inner { padding: 2.5rem; }
  .contact-form__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .contact .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* ==========================================================================
   Página: Asistente
   ========================================================================== */
.assist-page { background: #fff; min-height: 100vh; position: relative; }
.assist-gate { position: absolute; inset: 0; z-index: 50; background: rgba(255,255,255,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.assist-gate__box { width: 100%; max-width: 28rem; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.assist-gate__head { text-align: center; margin-bottom: 1.5rem; }
.assist-gate__head h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--heading); margin-bottom: .5rem; }
.assist-gate__head p { color: var(--gray-600); }
.assist-gate__card { background: #fff; box-shadow: var(--shadow-md); border-radius: .5rem; overflow: hidden; margin-bottom: 1rem; padding: 1.25rem; }
.assist-gate__card > p { text-align: center; margin-bottom: 1rem; color: var(--gray-600); }
.assist-gate__login { display: block; text-align: center; width: 100%; padding: .5rem 0; background: hsl(var(--primary)); color: #fff; border-radius: .25rem; transition: opacity .15s; }
.assist-gate__login:hover { opacity: .9; }
.assist-gate__signup { display: block; text-align: center; width: 100%; padding: .5rem 0; border: 1px solid var(--gray-300); color: var(--gray-700); border-radius: .25rem; margin-top: .75rem; transition: background-color .15s; }
.assist-gate__signup:hover { background: var(--gray-50); }
.assist-layout { margin: 0 auto; max-width: 80rem; height: 100vh; display: flex; flex-direction: column; }
.assist-layout__row { flex: 1 1 0%; display: flex; overflow: hidden; }
.assist-side { width: 16rem; background: color-mix(in srgb, var(--mawii-blue-50) 40%, transparent); display: none; flex-direction: column; overflow: hidden; }
.assist-side__head { padding: 1rem; background: linear-gradient(to bottom, #fff, rgba(249,250,251,.4), transparent); }
.assist-side__head h2 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); }
.assist-side__new-wrap { background: linear-gradient(to bottom, transparent, rgba(255,255,255,.4)); }
.assist-side__new { width: 100%; padding: .75rem 1rem; display: flex; align-items: center; gap: .5rem; color: hsl(var(--primary)); transition: background-color .15s; }
.assist-side__new:hover { background: rgba(249,250,251,.3); }
.assist-side__new svg { width: 1rem; height: 1rem; }
.assist-side__new span { font-size: .875rem; line-height: 1.25rem; }
.assist-side__list { flex: 1 1 0%; overflow-y: auto; }
.assist-main { flex: 1 1 0%; display: flex; flex-direction: column; overflow: hidden; position: relative; background: #fff; box-shadow: var(--shadow-sm); }
.assist-main__head { padding: .75rem 1.5rem; background: linear-gradient(to bottom, #fff, rgba(249,250,251,.2), transparent); text-align: center; }
.assist-main__head h1 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 500; }
.assist-main__head p { font-size: .875rem; line-height: 1.25rem; color: var(--gray-500); }
.assist-main__mbtn { position: absolute; top: 1rem; padding: .5rem; background: #fff; border-radius: 9999px; box-shadow: var(--shadow-md); z-index: 10; }
.assist-main__mbtn--l { left: 1rem; }
.assist-main__mbtn--r { right: 1rem; }
.assist-main__mbtn svg { width: 1.25rem; height: 1.25rem; }
.assist-main__body { flex: 1 1 0%; overflow-y: auto; padding: 1.5rem; }
.assist-main__col { display: flex; flex-direction: column; height: 100%; }
.assist-main__form-wrap { padding: 1rem; border-bottom: 1px solid var(--gray-200); }
.assist-main__form { display: flex; gap: .5rem; max-width: 48rem; margin: 0 auto; }
.assist-main__form input { flex: 1 1 0%; padding: .75rem 1rem; border: 1px solid var(--gray-200); border-radius: .5rem; }
.assist-main__form input:focus { outline: none; box-shadow: 0 0 0 1px hsl(var(--primary)); }
.assist-main__form button { padding: .75rem; background: hsl(var(--primary)); color: #fff; border-radius: .5rem; transition: opacity .15s; }
.assist-main__form button:hover { opacity: .9; }
.assist-main__form button:disabled { opacity: .5; cursor: not-allowed; }
.assist-main__form button svg { width: 1.25rem; height: 1.25rem; }
.assist-empty { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1rem; }
.assist-empty__icon { margin-bottom: 1.5rem; opacity: .8; }
.assist-empty__icon svg { width: 3rem; height: 3rem; color: hsl(var(--primary)); margin: 0 auto; }
.assist-empty h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 500; color: var(--gray-800); margin-bottom: .5rem; }
.assist-empty p { color: var(--gray-600); max-width: 28rem; }
.assist-refs { width: 20rem; border-left: 1px solid var(--gray-200); background: #fff; display: none; flex-direction: column; overflow: hidden; }
.assist-refs__head { padding: 1rem; background: linear-gradient(to bottom, #fff, rgba(249,250,251,.4), transparent); }
.assist-refs__head h2 { font-size: .875rem; line-height: 1.25rem; font-weight: 500; color: var(--gray-700); }
.assist-refs__search { padding: .75rem 1rem .5rem; }
.assist-refs__search input { width: 100%; padding: .375rem .75rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: .25rem; font-size: .875rem; }
.assist-refs__search input:focus { outline: none; }
.assist-refs__hint { padding: .5rem .75rem; }
.assist-refs__hint p { font-size: .75rem; line-height: 1rem; color: var(--gray-500); }
.assist-refs__empty { flex: 1 1 0%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; height: 100%; }
.assist-refs__empty p { color: var(--gray-500); font-size: .875rem; line-height: 1.25rem; }
@media (min-width: 768px) { .assist-side { display: flex; } .assist-main__mbtn { display: none; } }
@media (min-width: 1024px) { .assist-refs { display: flex; } }

/* ==========================================================================
   Páginas legales
   ========================================================================== */
.legal { min-height: 100vh; padding-top: 5rem; padding-bottom: 4rem; }
.legal__box { max-width: 56rem; margin: 0 auto; background: #fff; padding: 2rem; border-radius: .5rem; box-shadow: var(--shadow-sm); }
.legal__back { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; border-radius: .375rem; font-size: .875rem; line-height: 1.25rem; font-weight: 500; height: 2.5rem; padding: .5rem 1rem; margin-bottom: 1.5rem; transition: all .15s; }
.legal__back:hover { background: var(--accent); }
.legal h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 2rem; color: var(--heading); }
.prose { color: var(--gray-700); font-size: 1rem; line-height: 1.75; max-width: none; }
.prose p { margin-top: 1.25em; margin-bottom: 1.25em; }
.prose .lead { font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 1.5rem; margin-top: 0; }
.prose h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; color: var(--heading); }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.prose li { margin-top: .5em; margin-bottom: .5em; padding-left: .375em; }
.prose strong { font-weight: 600; color: var(--gray-900); }
.prose .updated { margin-top: 2rem; font-size: .875rem; line-height: 1.25rem; color: var(--gray-500); }