/* --- [RESPONSIVE PATCH OLA 1 – NEUTRALIZACIÓN LAYOUT LEGACY EN MOBILE] ---
   Contexto: layout.css fuerza .row-3 horizontal y .work-card min-width/flex fijo en mobile.
   Fix: override quirúrgico en mobile para apilar vertical y ancho 100%.
   - .row-3: display flex, flex-direction column, flex-wrap unset, gap, centrado
   - .work-card: min-width 0, flex 1 1 100%, width 100%
   - !important para máxima prioridad
   - No destructivo, solo mobile
   - Documentado para trazabilidad
   ---------------------------------------------- */
@media (max-width: 600px) {
  .row-3 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: unset !important;
    gap: 18px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    padding-left: clamp(12px, 4vw, 24px) !important;
    padding-right: clamp(12px, 4vw, 24px) !important;
  }
  .row-3 > .work-card {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* =============================
  DOCUMENTACIÓN DE LEGACY Y DUPLICADOS
  =============================
  - Todas las reglas de headings, .btn*, .card*, .lead, .lead-strong, .reveal, .container, .section, .section-copy han sido neutralizadas
  - Fuente de verdad: base.css y components.css
  - Solo quedan comentarios de referencia para evitar conflicto de cascada
  - No tocar reglas visuales estables ni layout de cards
*/
/* Forzar work-cards en una sola línea horizontal */
.row-3 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}
@media (max-width: 900px) {
  .row-3 {
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .work-card {
    min-width: 320px;
    flex: 0 0 320px;
  }
}
/* ============================================
   4. LAYOUT
   ============================================ */
/* .container: fuente de verdad en base.css */
.section{padding:50px 0}

.statement .container {
  padding:22px 0;
  text-align:center;
  color:var(--white);
}

.split-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:28px; align-items:start}
.section-head{max-width:920px; margin:0 0 34px}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto}
.section-copy{color:var(--gray); line-height:1.8}
.content-stack{display:grid; gap:16px;}
.content-card{padding:24px}
.content-card p{margin:0; color:var(--gray); line-height:1.8}
.pillar-list{display:grid; gap:14px; margin-top:16px}
.pillar-list div strong{display:block; color:var(--turq); margin-bottom:6px}
.pillar-list div span{color:var(--gray); line-height:1.7}

.section {
  padding: 70px 0;
}

.two-col {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 28px;
  align-items: start;
}


/* ============================================
   7. TYPOGRAPHY
   ============================================ */
.eyebrow {
  margin: 0 0 14px;
  color: var(--turq);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow.small {
  font-size: 0.72rem;
}

.section-head {
  max-width: 930px;
  margin: 0 0 34px;
}

.section-head.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  line-height: 1.06;
}


  font-size: 1.1rem;
  margin: 0 0 18px;
}

.lead-strong {
  color: var(--white);
  font-weight: 700;
}

.copy-block {
  padding-top: 44px;
}


/* ============================================
   20. RESPONSIVE DESIGN
   ============================================ */

/* Tablets & Medium Screens */
@media (max-width: 1120px) {
  .hero-grid,
  .two-col,
  .service-columns,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .framework-pillars,
  .model-grid,
  .results-grid,
  .hero-points,
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile Devices */
@media (max-width: 820px) {
  /* Mobile Menu */

  }
  
  /* Single Column Layouts */
  .hero-points,
  .story-grid,
  .service-columns,
  .framework-pillars,
  .model-grid,
  .results-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
  
  .section {
    padding: 70px 0;
  }
  
  /* Adjust hero for mobile */
  .hero {
    padding-top: 64px;
  }
  
  /* Duplicado neutralizado: .hero h1. Ver home.css para override contextual. */
  }
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.work-card {
  padding: 26px;
  position: relative;
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.03)
  );
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 60px rgba(0,0,0,0.28);
}

.work-card:hover {
  transform: translateY(-6px);
  border: 1px solid rgba(94,208,200,0.3);
  box-shadow: 
    0 25px 80px rgba(0,0,0,0.35),
    0 0 30px rgba(94,208,200,0.15);
}

.work-step {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(94,208,200,0.12);
  border: 1px solid rgba(94,208,200,0.3);
  color: #5ED0C8;
  font-weight: 800;
  margin-bottom: 14px;
}

.work-card h3 {
  margin: 0 0 10px;
  font-size: 1.55rem;
  color: #F2F6F9;
}

.work-card p {
  margin: 0 0 14px;
  color: #9FB3C8;
  line-height: 1.75;
}

.work-card ul {
  margin: 0;
  padding-left: 20px;
  color: #9FB3C8;
  line-height: 1.85;
}

.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(
    circle at top left,
    rgba(94,208,200,0.08),
    transparent 60%
  );
  opacity: 0;
  transition: 0.3s;
}

.work-card:hover::before {
  opacity: 1;
}