/* ==========================================================================
   site.css — Hoja de estilos escrita a mano (no la procesa Tailwind).
   Une en UN solo archivo bloqueante lo que antes eran nav-fix.css y prose-legal.css,
   para que el menú y la tipografía de artículos NO aparezcan sin estilo (FOUC) ni
   provoquen saltos de diseño (CLS). Se carga con ?v=<fecha de modificación>.
   ========================================================================== */

/* ───────── Menú y navegación (antes nav-fix.css) ───────── */

/* ==========================================================================
   nav-fix.css - Arreglos para el submenú de Servicios
   Este archivo NO está dentro de @layer utilities, por lo que Tailwind
   no purga sus selectores. Se importa DESPUÉS de tw.css en header.php
   ========================================================================== */

/* ============ Mega-menú con CSS puro (group-hover real) ============ */

/* El contenedor padre: nav-pill con dropdown */
.mega-trigger {
  position: relative;
}
/* Puente invisible entre trigger y dropdown para que hover no se rompa */
.mega-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.75rem;
  height: 0.75rem;
}
.mega-trigger > .mega-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: 780px;
  max-width: calc(100vw - 2rem);
  border-radius: 1.5rem;
  background: white;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(231, 229, 228, 1);
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.375rem;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s ease-out;
}
.mega-trigger:hover > .mega-dropdown,
.mega-trigger:focus-within > .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* El chevron rota en hover */
.mega-trigger:hover .mega-chevron,
.mega-trigger:focus-within .mega-chevron {
  transform: rotate(180deg);
}

/* Items del mega-menú */
.mega-trigger > .mega-dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
}
.mega-trigger > .mega-dropdown a:hover {
  background: linear-gradient(135deg, #eff6ff 0%, rgba(236, 253, 245, 0.5) 100%);
}
.mega-trigger > .mega-dropdown a .mega-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.mega-trigger > .mega-dropdown a:hover .mega-icon {
  background: #0f172a;
  color: white;
  transform: scale(1.1);
}
.mega-trigger > .mega-dropdown a .mega-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  transition: color 0.2s;
}
.mega-trigger > .mega-dropdown a:hover .mega-label {
  color: #1e3a8a;
}
.mega-trigger > .mega-dropdown a .mega-desc {
  display: block;
  font-size: 0.6875rem;
  color: #475569;
  line-height: 1.3;
  margin-top: 0.125rem;
}
.mega-trigger > .mega-dropdown a .mega-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 0.5rem;
  transition: all 0.2s;
}
.mega-trigger > .mega-dropdown a:hover .mega-arrow {
  color: #059669;
  transform: translateX(2px);
}

/* CTA del footer del mega-menú */
.mega-trigger > .mega-dropdown .mega-cta {
  grid-column: span 3;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, #0f172a 0%, #1e3a8a 100%);
  color: white;
  transition: box-shadow 0.2s;
}
.mega-trigger > .mega-dropdown .mega-cta:hover {
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
  box-shadow: 0 0 0 1px rgba(30, 58, 138, 0.18), 0 12px 40px -8px rgba(30, 58, 138, 0.3);
}
.mega-trigger > .mega-dropdown .mega-cta-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.mega-trigger > .mega-dropdown .mega-cta:hover .mega-cta-icon {
  transform: scale(1.1);
}

/* Línea gradient decorativa en top del mega-menú */
.mega-trigger > .mega-dropdown::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 3rem;
  right: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #10b981 50%, transparent 100%);
}

/* ============ Pills con active state correcto ============ */
.nav-pill {
  position: relative;
  isolation: isolate;
}
.nav-pill::before {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1), right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}
.nav-pill:hover::before {
  left: 0;
  right: 0;
}
.nav-pill.is-active::before {
  left: 0;
  right: 0;
  background: white;
}
.nav-pill .mega-chevron {
  transition: transform 0.3s ease;
}

/* ============ Mobile menu drawer (no depende de Tailwind variants) ============ */

/* Por defecto: oculto en TODAS las pantallas (mobile, tablet, desktop) */
#mobile-menu {
  display: none !important;
}
/* Cuando html.mm-open: visible como drawer a pantalla completa */
html.mm-open #mobile-menu {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  flex-direction: column;
  background: white;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: mobile-menu-in 0.25s ease-out;
}
@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* El icono del menú hamburguesa: rotar a X cuando está abierto */
html.mm-open #mobile-menu-btn {
  background: #0F172A;
  color: white;
}
html.mm-open #mobile-menu-btn svg:first-child,
html.mm-open #mobile-menu-btn svg {
  transform: rotate(90deg);
}
html.mm-open #mobile-menu-btn svg { transition: transform 0.3s ease; }

/* Body sin scroll cuando el menú está abierto */
html.mm-open { overflow: hidden; }
html.mm-open body { overflow: hidden; }

/* Items del mobile menu: animacion de entrada */
html.mm-open #mobile-menu nav a {
  animation: mobile-item-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
html.mm-open #mobile-menu nav a:nth-child(1) { animation-delay: 0.05s; }
html.mm-open #mobile-menu nav a:nth-child(2) { animation-delay: 0.1s; }
html.mm-open #mobile-menu nav a:nth-child(3) { animation-delay: 0.15s; }
html.mm-open #mobile-menu nav a:nth-child(4) { animation-delay: 0.2s; }
html.mm-open #mobile-menu nav a:nth-child(5) { animation-delay: 0.25s; }
@keyframes mobile-item-in {
  from { opacity: 0; transform: translateX(15px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============ Hero ring orbit animation (SVG native, no CSS needed) ============ */


/* ───────── Tipografía de artículos (antes prose-legal.css) ───────── */

/* ==========================================================================
   prose-legal.css - Tipografía premium para artículos legales
   Este archivo NO está dentro de @layer utilities, por lo que Tailwind
   no purga sus selectores. Se importa DESPUÉS de tw.css en header.php
   ========================================================================== */

/* Contenedor principal */
.prose-legal {
  color: #1E293B;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.prose-legal > * + * { margin-top: 1.25rem; }

/* Headings con tipografía premium */
.prose-legal h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  scroll-margin-top: 6rem;
}
.prose-legal h3 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #0F172A;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  scroll-margin-top: 6rem;
}

/* Texto base */
.prose-legal p { color: #334155; margin: 0; }
.prose-legal strong { color: #0F172A; font-weight: 600; }

/* Enlaces */
.prose-legal a {
  color: #1D4ED8;
  text-decoration: underline;
  text-decoration-color: rgba(29, 78, 216, 0.3);
  text-underline-offset: 3px;
  transition: all 0.2s;
}
.prose-legal a:hover {
  color: #1E3A8A;
  text-decoration-color: #1E3A8A;
}

/* Listas premium */
.prose-legal ul, .prose-legal ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.prose-legal ul li, .prose-legal ol li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
  color: #334155;
}
.prose-legal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981, #2563EB);
}
.prose-legal ol { counter-reset: proselegal-counter; }
.prose-legal ol li {
  counter-increment: proselegal-counter;
}
.prose-legal ol li::before {
  content: counter(proselegal-counter);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E3A8A, #2563EB);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Blockquote elegante */
.prose-legal blockquote {
  border-left: 4px solid #2563EB;
  background: linear-gradient(90deg, #EFF6FF 0%, transparent 100%);
  padding: 1rem 1.5rem;
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
  color: #1E40AF;
  margin: 1.5rem 0;
}
.prose-legal blockquote p { color: #1E40AF; }

/* Código inline */
.prose-legal code {
  background: #F1F5F9;
  color: #BE185D;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Separador */
.prose-legal hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #CBD5E1, transparent);
  margin: 2.5rem 0;
}

/* Callouts */
.prose-legal .callout {
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.prose-legal .callout-info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A8A; }
.prose-legal .callout-warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.prose-legal .callout-success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.prose-legal .callout-tip { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.prose-legal .callout-warning { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.prose-legal .callout-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}
.prose-legal .callout-icon::before {
  content: "i";
}
.prose-legal .callout-warn .callout-icon::before,
.prose-legal .callout-warning .callout-icon::before { content: "!"; }
.prose-legal .callout-success .callout-icon::before,
.prose-legal .callout-tip .callout-icon::before { content: "✓"; }
.prose-legal .callout p { color: inherit; margin: 0; }
.prose-legal .callout strong { color: inherit; }
.prose-legal .callout > div:not(.callout-icon) { flex: 1; }

/* Lead (párrafo destacado) */
.prose-legal .lead {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #475569;
  font-weight: 400;
  border-left: 3px solid #10B981;
  padding-left: 1.25rem;
  margin-top: 0;
  margin-bottom: 2rem;
  font-style: normal;
}

/* Imágenes dentro del artículo */
.prose-legal img {
  border-radius: 0.75rem;
  margin: 1.5rem auto;
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.1);
  max-width: 100%;
  height: auto;
  display: block;
}
/* Figuras con caption */
.prose-legal figure {
  margin: 2rem 0;
  text-align: center;
}
.prose-legal figure img {
  margin: 0 auto 0.75rem;
}
.prose-legal figcaption {
  font-size: 0.875rem;
  color: #64748b;
  font-style: italic;
  margin-top: 0.5rem;
}

/* Línea gradient antes del primer h2/h3 */
.prose-legal h2:first-of-type::before,
.prose-legal h3:first-of-type::before {
  content: '';
  display: block;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, #10B981, #2563EB);
  border-radius: 2px;
  margin-bottom: 0.75rem;
}


/* ==========================================================================
   Componentes de contenido (índice, datos clave, tablas, migas, accesibilidad)
   ========================================================================== */

/* Enlace "saltar al contenido" (accesibilidad) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: #0F172A; color: #fff; padding: .75rem 1rem;
  border-radius: 0 0 .75rem 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Índice del artículo (se genera solo a partir de los <h2>) */
.toc-box {
  border: 1px solid #E7E5E4; background: #fff; border-radius: 1rem;
  padding: 1.25rem 1.5rem; margin: 0 0 2rem;
}
.toc-box .toc-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #64748B; margin: 0 0 .75rem;
}
.toc-box ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc-box li { counter-increment: toc; padding: .2rem 0; display: flex; gap: .5rem; }
.toc-box li::before { content: counter(toc) "."; color: #94A3B8; font-weight: 600; font-size: .875rem; min-width: 1.25rem; }
.toc-box a { color: #1E293B; text-decoration: none; font-weight: 500; font-size: .95rem; line-height: 1.45; }
.toc-box a:hover { color: #1D4ED8; text-decoration: underline; }

/* Ficha de datos clave ("En 30 segundos") */
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin: 0 0 2rem; }
.keyfacts > div { background: #fff; border: 1px solid #E7E5E4; border-radius: 1rem; padding: 1rem 1.125rem; }
.keyfacts dt { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #64748B; }
.keyfacts dd { margin: .25rem 0 0; font-size: 1.0625rem; font-weight: 600; color: #0F172A; line-height: 1.35; }

/* Tablas dentro de artículos y páginas de contenido */
.prose-legal .table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid #E7E5E4; border-radius: 1rem; background: #fff; }
.prose-legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.prose-legal th { text-align: left; padding: .75rem 1rem; background: #F8FAFC; color: #0F172A; font-weight: 600; border-bottom: 2px solid #E7E5E4; }
.prose-legal td { padding: .75rem 1rem; border-bottom: 1px solid #E7E5E4; vertical-align: top; color: #334155; }
.prose-legal tr:last-child td { border-bottom: 0; }

/* Fuente / referencia legal al pie de un apartado */
.prose-legal .source-note { font-size: .8125rem; color: #64748B; margin-top: .5rem; }
.prose-legal .source-note a { font-weight: 500; }

/* Texto solo para lectores de pantalla y buscadores (H1 accesible en diseños con texto animado) */
.sr-only-seo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   Utilidades que las plantillas usaban pero no existían en tw.css
   (la paleta 'accent' no define el tono 300, y tw.css se compiló antes de varios cambios).
   ========================================================================== */
.not-italic { font-style: normal; }
.text-accent-300 { color: #6EE7B7; }
.hover\:text-accent-300:hover { color: #6EE7B7; }
.\!text-accent-300 { color: #6EE7B7 !important; }
.text-white\/90 { color: rgb(255 255 255 / .9); }
.bg-white\/12 { background-color: rgb(255 255 255 / .12); }
.hover\:bg-white\/8:hover { background-color: rgb(255 255 255 / .08); }
.bg-brand-500\/8 { background-color: rgb(59 130 246 / .08); }
.bg-accent-500\/8 { background-color: rgb(16 185 129 / .08); }
.ring-accent-300\/40 { --tw-ring-color: rgb(110 231 183 / .4); }
.from-black\/30 {
  --tw-gradient-from: rgb(0 0 0 / .3) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}