/* ============================================================================
   NAUTILUS · Refinamientos UI/UX de la homepage (capa aditiva)
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de los estilos originales (inline + nautilus-enhance.css),
   así que los sobrescribe SIN tocar el código fuente ni el SEO/GEO.
   Solo se enlaza en index.html / index-en.html. Para revertir: quitar el <link>.
   Cada bloque está etiquetado con el punto del plan UI/UX (A/B/C/D/E).
   ============================================================================ */

:root{
  /* B9 — Escala tipográfica modular (tokens) */
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px;
  --fs-24:24px; --fs-32:32px; --fs-48:48px; --fs-72:72px;

  /* B11 — Escala de elevación / sombra (3 niveles consistentes) */
  --shadow-1:0 1px 2px rgba(13,26,38,0.06), 0 1px 3px rgba(13,26,38,0.08);
  --shadow-2:0 6px 20px rgba(13,26,38,0.10);
  --shadow-3:0 18px 48px rgba(13,26,38,0.20);

  /* D16 — Dorado seguro para TEXTO sobre fondo claro (≈4.6:1, cumple WCAG) */
  --gold-text:#8A6D2F;

  /* Easing premium unificado */
  --ease-premium:cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================================
   B8 / B9 — TIPOGRAFÍA: usar Outfit (sí está cargada) en lugar de DM Sans
   (que el sitio declara pero NUNCA carga → hoy cae a sans-serif del sistema).
   ============================================================================ */
body, p, .hero-sub, .phil-text, .feat-tipo, .zona-sub, .footer-col a, .stat-label{
  font-family:'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ============================================================================
   A. ANIMACIÓN Y MOVIMIENTO
   ============================================================================ */

/* A1 — Silenciar animaciones infinitas (glow de números, partículas, mesh) */
.stat-num, .hstat-num{ animation:none !important; }
.gold-particles [class^="particle"]{ animation-duration:16s !important; opacity:0.3 !important; }
@media(max-width:900px){ .gold-particles{ display:none !important; } }   /* partículas solo desktop */

/* A4 — Ken Burns lento y cinematográfico en el slide activo del hero */
@keyframes ntlsKenBurns{ from{ transform:scale(1.0); } to{ transform:scale(1.09); } }
.hero-slide{ will-change:transform, opacity; }
.hero-slide.active{ animation:ntlsKenBurns 8s var(--ease-premium) forwards; }

/* A4 — el texto del hero se mueve/atenúa sutilmente con el scroll (capa interna, vía JS) */
.hero-content{ will-change:transform, opacity; }

/* A5 — ritmo de entrada premium: mejor easing y duración en los reveals existentes */
.reveal{
  transition-timing-function:var(--ease-premium) !important;
  transition-duration:0.9s !important;
}

/* A6 — "lift + sombra" (en vez de 3D tilt) en todas las cards */
.feat-main, .feat-small, .zona-card, .testimonial-card, .partner-card{
  transition:transform 0.45s var(--ease-premium), box-shadow 0.45s var(--ease-premium) !important;
}
.feat-main:hover, .feat-small:hover{ transform:translateY(-6px); box-shadow:var(--shadow-3); }

/* A6 — línea de acento dorada que se revela en hover (editorial, no "gadget") */
.feat-main::after, .feat-small::after{
  content:''; position:absolute; left:1.5rem; right:1.5rem; bottom:1.25rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left center;
  transition:transform 0.55s var(--ease-premium); z-index:3; pointer-events:none;
}
.feat-main:hover::after, .feat-small:hover::after{ transform:scaleX(1); }

/* A7 — Press feedback consistente (scale 0.98) + transición unificada en CTAs */
a[class^="btn-"], .nav-cta, .hsf-btn, .btn-outline, button.map-filter-btn{
  transition:transform 0.2s ease-out, opacity 0.2s ease-out, background 0.2s ease-out,
             color 0.2s ease-out, border-color 0.2s ease-out !important;
}
a[class^="btn-"]:active, .nav-cta:active, .hsf-btn:active, .btn-outline:active{ transform:scale(0.98); }

/* ============================================================================
   B. DISEÑO VISUAL Y JERARQUÍA
   ============================================================================ */

/* B8 — Minimalismo editorial: más aire vertical + títulos sobredimensionados */
.featured{ padding:8rem 2.5rem; }
.philosophy{ padding:9rem 2.5rem 9rem; gap:7rem; }
.partners, .map-section{ padding-top:7rem; padding-bottom:7rem; }
.section-title{
  font-size:clamp(42px,6vw,78px) !important;
  letter-spacing:-0.015em;
  margin-bottom:3.25rem;
}
.section-label{ letter-spacing:0.32em; margin-bottom:1.15rem; }

/* B10 — Grid de portafolio EDITORIAL: 1 protagonista grande + 2 laterales, overlay mínimo */
.featured-grid{ grid-template-columns:2fr 1fr; grid-auto-rows:1fr; gap:1.5rem; }
.featured-grid .feat-main{ grid-row:span 2; aspect-ratio:auto; min-height:540px; }
.featured-grid .feat-small{ aspect-ratio:auto; min-height:258px; }
.feat-overlay{ background:linear-gradient(to top, rgba(7,15,26,0.80) 0%, rgba(7,15,26,0.05) 52%) !important; }
.feat-name.large{ font-size:32px !important; }
#featRow2{ gap:1.5rem; margin-top:1.5rem; }
@media(max-width:900px){
  .featured-grid{ grid-template-columns:1fr; }
  .featured-grid .feat-main{ grid-row:auto; min-height:auto; }
  .featured-grid .feat-small{ min-height:auto; }
}

/* B11 — Sombras por tokens (consistencia de elevación) */
.testimonial-card, .partner-card{ box-shadow:var(--shadow-1); }
.testimonial-card:hover, .partner-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-4px); }

/* B12 — Hover unificado: lift sutil también en zona-cards */
.zona-card:hover{ box-shadow:var(--shadow-3); }

/* ============================================================================
   C. RENDIMIENTO / VELOCIDAD PERCIBIDA
   ============================================================================ */
/* C13 — Loader corto (si quedara alguno largo, lo acota a ~0.4s) */
.page-loader, .loader-bar{ animation-duration:0.4s !important; }

/* ============================================================================
   D. ACCESIBILIDAD
   ============================================================================ */
/* D16 — Nunca dorado claro como texto pequeño sobre fondo claro: tono accesible */
.section-label{ color:#6B7280; }   /* gris muted con contraste, no dorado */
.feat-more .btn-outline{ color:var(--navy); }

/* D17 — :focus-visible consistente en todo lo interactivo */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--gold) !important;
  outline-offset:3px !important;
  border-radius:2px;
}

/* ============================================================================
   E. MÓVIL
   ============================================================================ */
/* E19 — hero usa min-height dinámica (evita salto con la barra del navegador móvil) */
.hero{ min-height:100svh; }
/* E19 — área táctil ≥44px en los dots del hero sin agrandar el punto visible */
@media(max-width:900px){
  .hero-dot{ position:relative; }
  .hero-dot::before{ content:''; position:absolute; inset:-18px; }
}

/* B10b — Slot GRANDE: la curación (JS, flag big:1) garantiza que SOLO entren
   fotos high-res que se ven bien en grande. SIN tope de tamaño (decisión de
   Carlos: "que se vean grandes"). object-fit:cover = recorta, nunca distorsiona. */
.feat-main img, .feat-small img{ object-fit:cover; object-position:center; }

/* ============================================================================
   prefers-reduced-motion — respetar (el JS también lo respeta)
   ============================================================================ */
@media(prefers-reduced-motion: reduce){
  .hero-slide.active{ animation:none !important; transform:none !important; }
  .feat-main, .feat-small, .zona-card, .testimonial-card, .partner-card{ transition:none !important; }
}