/* ==========================================================================
   TECNIAPLICACIONES — COMPONENTES DE PRODUCCIÓN
   Deriva exclusivamente de tokens.css (Capítulo 10). No se declara ningún
   color, tipografía o espaciado fuera del sistema de tokens.
   ========================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-base); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); line-height: var(--lh-base); }
img { display:block; max-width:100%; }

/* Accesibilidad: salto directo al contenido */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:1000;
  background: var(--color-navy-950); color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding-desktop); }
@media (max-width: 1023px) { .wrap { padding: 0 var(--container-padding-tablet); } }
@media (max-width: 639px)  { .wrap { padding: 0 var(--container-padding-mobile); } }

.eyebrow { font-family: var(--font-base); font-weight: var(--fw-medium); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-steel-700); display:block; margin-bottom: var(--space-2); }
.tech-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); color: var(--color-steel-700); }

.section-pad { padding: var(--space-9) 0; }
@media (max-width: 1023px) { .section-pad { padding: var(--space-8) 0; } }
@media (max-width: 639px)  { .section-pad { padding: var(--space-7) 0; } }

/* --------------------------------------------------------------------
   MEDIA PLACEHOLDER — reserva visual hasta recibir la biblioteca editorial.
   data-media identifica el slot exacto para facilitar el reemplazo futuro
   por <img> real, sin tocar la estructura del componente.
   -------------------------------------------------------------------- */
.media-placeholder {
  background: repeating-linear-gradient(45deg, var(--color-grey-100), var(--color-grey-100) 10px, var(--color-surface) 10px, var(--color-surface) 20px);
  border: 1px dashed var(--color-grey-300);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--color-text-muted); padding: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs);
}
.media-placeholder[data-ratio="4-3"] { aspect-ratio: 4/3; }
.media-placeholder[data-ratio="1-1"] { aspect-ratio: 1/1; }
.media-placeholder[data-ratio="21-9"] { aspect-ratio: 21/9; }

/* Imagen real — mismo sistema de slots que el placeholder, vía object-fit */
.media-cover { width:100%; height:100%; object-fit:cover; display:block; border:none; }
.media-cover[data-ratio="4-3"] { aspect-ratio: 4/3; }
.media-cover[data-ratio="1-1"] { aspect-ratio: 1/1; }
.media-cover[data-ratio="21-9"] { aspect-ratio: 21/9; }

/* --------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-grey-200);
  transition: padding var(--duration-fast) var(--ease-precise);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.site-header.is-scrolled .wrap { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.logo { font-weight: var(--fw-semibold); font-size: var(--text-md); letter-spacing: 0.02em; color: var(--color-text); text-decoration:none; }
.main-nav { display:flex; gap: var(--space-5); align-items:center; }
.main-nav a { color: var(--color-grey-700); text-decoration:none; font-size: var(--text-sm); font-weight: var(--fw-medium); transition: color var(--duration-micro) var(--ease-precise); }
.main-nav a:hover { color: var(--color-steel-700); }
.header-actions { display:flex; align-items:center; gap: var(--space-4); }
.lang-switch { display:flex; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); }
.lang-switch a { color: var(--color-grey-500); text-decoration:none; }
.lang-switch a[aria-current="true"] { color: var(--color-steel-700); font-weight: var(--fw-medium); }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer; padding: var(--space-2);
  flex-direction:column; gap:5px;
}
.nav-toggle span { display:block; width:22px; height:2px; background: var(--color-navy-900); transition: transform var(--duration-fast) var(--ease-precise), opacity var(--duration-fast) var(--ease-precise); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display:flex; }
  .main-nav {
    position:absolute; top:100%; left:0; right:0;
    background: var(--color-bg); border-bottom: 1px solid var(--color-grey-200);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition: max-height var(--duration-base) var(--ease-precise);
  }
  .main-nav.is-open { max-height: 400px; }
  .main-nav a { width:100%; padding: var(--space-3) var(--container-padding-tablet); border-bottom: 1px solid var(--color-grey-100); }
}

/* Mobile: el botón persistente del header se retira para evitar overflow
   horizontal — el Hero ya ofrece el mismo CTA y el menú móvil da acceso
   a Contacto. Corrección de QA (Etapa 5), no afecta copy ni decisiones
   de contenido ya aprobadas. */
@media (max-width: 639px) {
  .header-actions .btn-primary { display:none; }
}

/* --------------------------------------------------------------------
   BOTONES
   -------------------------------------------------------------------- */
.btn { display:inline-block; text-decoration:none; font-family: var(--font-base); font-size: var(--text-sm); font-weight: var(--fw-medium); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); cursor:pointer; border: var(--border-width) solid transparent; transition: background var(--duration-micro) var(--ease-precise), color var(--duration-micro) var(--ease-precise), border-color var(--duration-micro) var(--ease-precise), box-shadow var(--duration-micro) var(--ease-precise), transform var(--duration-micro) var(--ease-precise); }
.btn-primary { background: var(--color-navy-900); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-navy-950); box-shadow: inset 0 -1px 0 0 var(--color-steel-500); }
.btn-primary:active { transform: scale(0.985); }
.btn-secondary { background: transparent; color: var(--color-navy-900); border-color: var(--color-grey-300); }
.btn-secondary:hover { border-color: var(--color-steel-500); color: var(--color-steel-700); }
.btn-ghost { background: transparent; color: var(--color-navy-900); padding: var(--space-2) 0; text-decoration: underline; text-decoration-color: var(--color-grey-300); text-underline-offset: 4px; }
.btn-ghost:hover { text-decoration-color: var(--color-steel-500); color: var(--color-steel-700); }

/* --------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------- */
.hero { height: 100vh; min-height: 640px; position:relative; display:flex; align-items:flex-end; overflow:hidden; }
.hero .media-placeholder, .hero .media-cover { position:absolute; inset:0; border:none; aspect-ratio:auto; }
.hero-scrim { position:absolute; inset:0; background: linear-gradient(to top, rgba(var(--color-navy-950-rgb), 0.55), rgba(var(--color-navy-950-rgb), 0) 55%); }
.hero-content { position:relative; z-index:2; padding-bottom: var(--space-9); color: var(--color-text-inverse); max-width: 720px; }
.hero-content h1 { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.hero-content p { font-size: var(--text-md); line-height: var(--lh-md); color: var(--color-grey-100); margin-bottom: var(--space-5); max-width: 560px; }
@media (max-width: 639px) { .hero-content h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); } }

/* --------------------------------------------------------------------
   EDITORIAL SECTION
   -------------------------------------------------------------------- */
.editorial { display:grid; grid-template-columns: 7fr 5fr; gap: var(--grid-gutter-desktop); align-items:center; }
@media (max-width: 1023px) { .editorial { grid-template-columns: 1fr; gap: var(--space-5); } }
.editorial.reverse { grid-template-columns: 5fr 7fr; }
@media (max-width: 1023px) { .editorial.reverse { grid-template-columns: 1fr; } }
.editorial.reverse .media-placeholder { order:2; }
@media (max-width: 1023px) { .editorial.reverse .media-placeholder { order:initial; } }
.editorial h2 { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.editorial p { color: var(--color-grey-700); margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------
   SERVICE CARD — grilla asimétrica 3+2 de Líneas de Negocio
   -------------------------------------------------------------------- */
.card-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
.card-grid .card { grid-column: span 4; }
.card-grid .card--wide { grid-column: span 6; }
@media (max-width: 1023px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid .card, .card-grid .card--wide { grid-column: span 1; }
}
@media (max-width: 639px)  { .card-grid { grid-template-columns: 1fr; } }

.card { border-top: 1px solid var(--color-grey-200); padding-top: var(--space-4); transition: border-color var(--duration-micro) var(--ease-precise); }
.card:hover { border-top-color: var(--color-steel-500); }
.card .media-placeholder, .card .media-cover { margin-bottom: var(--space-3); }
.card .card-category { margin-bottom: var(--space-1); }
.card h3 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.card p { font-size: var(--text-sm); color: var(--color-grey-700); }
/* .card-link: arquitectura preparada para una futura página de detalle por línea de
   negocio. No se renderiza en producción (Etapa 4, corrección de enlaces muertos). */

.card--wide { display:flex; gap: var(--space-4); align-items:flex-start; }
.card--wide .media-placeholder, .card--wide .media-cover { width: 45%; flex-shrink:0; margin-bottom:0; }
.card--wide .card-body { flex:1; }
@media (max-width: 1023px) {
  .card--wide { display:block; }
  .card--wide .media-placeholder, .card--wide .media-cover { width:100%; margin-bottom: var(--space-3); }
}

/* --------------------------------------------------------------------
   METODOLOGÍA — banda documental + timeline responsive
   -------------------------------------------------------------------- */
.documentary-band { position:relative; margin-bottom: var(--space-7); }
.documentary-band .media-placeholder { border:1px dashed var(--color-grey-300); }
.documentary-band .media-cover { display:block; }
.documentary-band .band-caption {
  position:absolute; bottom: var(--space-3); left: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-steel-700);
  background: rgba(255,255,255,0.85); padding: 2px 8px;
}

.methodology { display:flex; gap: var(--space-6); overflow-x:auto; padding-bottom: var(--space-3); }
.method-step { min-width: 200px; flex-shrink:0; }
.method-num { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--color-steel-700); margin-bottom: var(--space-2); }
.method-title { font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.method-desc { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 1023px) {
  .methodology { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); overflow-x:visible; }
  .method-step { min-width: 0; }
}
@media (max-width: 639px) {
  .methodology { display:flex; flex-direction:column; gap: var(--space-5); }
}

/* --------------------------------------------------------------------
   SECTORES — composición editorial arquitectónica (v2)
   Sin tarjetas, sin sombras, sin bordes redondeados, sin fondos por
   sector. Un único plano editorial dividido por líneas de 1px.
   -------------------------------------------------------------------- */

/* Encabezado + fotografía transversal + frase de transición */
.sector-intro { display:grid; grid-template-columns: 7fr 5fr; gap: var(--grid-gutter-desktop); align-items:center; margin-bottom: var(--space-9); }
@media (max-width: 1023px) { .sector-intro { grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-7); } }
.sector-intro .media-cover, .sector-intro .media-placeholder { aspect-ratio: 3/2; }
.sector-transition { font-size: var(--text-md); line-height: var(--lh-md); color: var(--color-grey-500); max-width: 320px; }

/* Retícula 01–06: un único plano continuo, dividido por hairlines */
.sector-matrix { display:grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-grey-200); }
@media (max-width: 1023px) { .sector-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .sector-matrix { grid-template-columns: 1fr; } }

.sector-cell {
  padding: var(--space-6) var(--space-5);
  border-right: 1px solid var(--color-grey-200);
  border-bottom: 1px solid var(--color-grey-200);
}
/* Sin borde derecho en la última columna de cada fila */
.sector-matrix .sector-cell:nth-child(3n) { border-right: none; }
@media (max-width: 1023px) { .sector-matrix .sector-cell:nth-child(3n) { border-right: 1px solid var(--color-grey-200); } .sector-matrix .sector-cell:nth-child(2n) { border-right: none; } }
@media (max-width: 639px)  { .sector-matrix .sector-cell { border-right: none !important; } }

.sector-num {
  display:block; font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono); color: var(--color-grey-500);
  margin-bottom: var(--space-3);
  transition: color var(--duration-base) var(--ease-engineering);
}
.sector-rule {
  display:block; width: 24px; height: 1px; background: var(--color-grey-300);
  margin-bottom: var(--space-3);
  transition: background var(--duration-base) var(--ease-engineering), width var(--duration-base) var(--ease-engineering);
}
.sector-name {
  font-family: var(--font-base); font-size: var(--text-xl); line-height: var(--lh-xl);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-2);
  transition: transform var(--duration-base) var(--ease-engineering);
}
.sector-desc { font-size: var(--text-sm); color: var(--color-grey-700); max-width: 280px; }

.sector-cell:hover .sector-num { color: var(--color-steel-500); }
.sector-cell:hover .sector-rule { background: var(--color-steel-500); width: 40px; }
.sector-cell:hover .sector-name { transform: translateX(4px); }

/* --------------------------------------------------------------------
   COMMITMENT — full-bleed, scrim denso
   -------------------------------------------------------------------- */
.dark-section { background: var(--color-navy-950); color: var(--color-text-inverse); }
.dark-section .eyebrow { color: var(--color-steel-300); }
.dark-section h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-semibold); max-width: 760px; margin-bottom: var(--space-4); }
.dark-section p { color: var(--color-grey-300); max-width: 620px; }

.commitment-section { position:relative; min-height:60vh; display:flex; align-items:center; overflow:hidden; }
.commitment-section .media-placeholder, .commitment-section .media-cover { position:absolute; inset:0; border:none; aspect-ratio:auto; }
.commitment-scrim { position:absolute; inset:0; background: rgba(var(--color-navy-950-rgb), 0.8); }
.commitment-content { position:relative; z-index:2; padding: var(--space-9) var(--container-padding-desktop); }
@media (max-width: 1023px) { .commitment-content { padding: var(--space-8) var(--container-padding-tablet); } }
@media (max-width: 639px)  { .commitment-content { padding: var(--space-7) var(--container-padding-mobile); } }

/* --------------------------------------------------------------------
   CONTACT FORM
   -------------------------------------------------------------------- */
.contact-grid { display:grid; grid-template-columns: 5fr 7fr; gap: var(--grid-gutter-desktop); }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.form-row { margin-bottom: var(--space-4); }
.form-row label { display:block; font-size: var(--text-sm); color: var(--color-grey-700); margin-bottom: var(--space-2); }
.form-row input, .form-row textarea {
  width:100%; border:none; border-bottom: 1px solid var(--color-grey-300);
  padding: var(--space-2) 0; font-family: var(--font-base); font-size: var(--text-base);
  background:transparent; color: var(--color-text); resize:vertical;
  transition: border-color var(--duration-micro) var(--ease-precise);
}
.form-row textarea { min-height: 96px; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--color-steel-500); outline:none; }
.form-row input:invalid:not(:placeholder-shown) { border-color: #b3261e; }
.form-message { font-size: var(--text-sm); margin-top: var(--space-3); display:none; }
.form-message.is-visible { display:block; }
.form-message--success { color: var(--color-steel-700); }
.form-message--error { color: #b3261e; }

.form-row--checkbox { display:flex; }
.checkbox-label { display:flex; align-items:flex-start; gap: var(--space-3); cursor:pointer; font-size: var(--text-sm); color: var(--color-grey-700); }
.checkbox-label input[type="checkbox"] { margin-top: 3px; width:16px; height:16px; flex-shrink:0; accent-color: var(--color-steel-500); }
.checkbox-label a { color: var(--color-navy-900); text-decoration: underline; text-decoration-color: var(--color-grey-300); text-underline-offset: 2px; }
.checkbox-label a:hover { text-decoration-color: var(--color-steel-500); }

/* Honeypot antispam — oculto visualmente sin display:none (para que los
   bots que sí lo detectan igual lo completen). Invisible y sin afectar
   el diseño ni el orden de tabulación para personas usando teclado. */
.hp-field { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

/* --------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------- */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-grey-200); padding: var(--space-6) 0; }
.footer-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-5); font-size: var(--text-sm); color: var(--color-grey-500); }
.footer-grid .tech-label { color: var(--color-grey-500); }
.footer-grid a { color: var(--color-grey-500); }
.footer-grid a:hover { color: var(--color-steel-700); }
.footer-logo { font-weight: var(--fw-semibold); font-size: var(--text-base); margin-bottom: var(--space-2); color: var(--color-text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}