/* ============================================================
   SIE PARK · styles.css · Iteración 2
   Paleta: Manual de Identidad v4.0 (Navy #1B2952 + Naranja #F28E1C)
   Tipografía: Montserrat (Google Fonts) / Arial fallback
   ============================================================ */

:root {
  --orange: #F28E1C;
  --orange-dark: #D87A0F;
  --navy: #1B2952;
  --navy-elev: #2A3A6B;
  --navy-depth: #0F1A35;
  --navy-aux: #B8C2D9;
  --gray-d: #555555;
  --gray-m: #888888;
  --gray-b: #E8E8E8;
  --gray-s: #F5F5F5;
  --gray-l: #FAFAFA;
  --white: #FFFFFF;
  --maxw: 1240px;
  --tr: all .22s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: var(--navy); background: var(--white);
  overflow-x: hidden;
}

h1,h2,h3,h4 { font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--navy); }
h1 { font-size: clamp(34px,5vw,58px); font-weight: 900; }
h2 { font-size: clamp(28px,3.8vw,44px); }
h3 { font-size: clamp(18px,2vw,23px); font-weight: 700; }
p  { color: var(--gray-d); line-height: 1.7; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { padding: 104px 0; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 18px;
}
.divider { width: 52px; height: 3px; background: var(--orange); margin: 20px 0 26px; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head p { font-size: 16.5px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 28px; border-radius: 4px; border: none;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: var(--tr);
  min-height: 48px;
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
.btn-ghost-light { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.55); }
.btn-ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

/* ============ NAV ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-b);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display: flex; align-items: center; height: 34px; }
.nav-logo img { height: 100%; width: auto; display: block; }

.nav-menu { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-menu a {
  font-size: 13.5px; font-weight: 600; color: var(--navy);
  text-decoration: none; padding: 8px 2px; border-bottom: 2px solid transparent;
  transition: var(--tr);
}
.nav-menu a:hover { color: var(--orange); }
.nav-menu a.current { color: var(--orange); border-bottom-color: var(--orange); }

.nav-cta {
  background: var(--orange); color: var(--white); text-decoration: none;
  padding: 12px 20px; border-radius: 4px; font-size: 12.5px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  transition: var(--tr); white-space: nowrap;
}
.nav-cta:hover { background: var(--orange-dark); }

.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 10px;
  min-width: 44px; min-height: 44px; justify-content: center; align-items: center;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy); transition: var(--tr); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none; background: var(--white); border-bottom: 1px solid var(--gray-b);
  padding: 8px 28px 20px;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block; padding: 14px 4px; font-size: 15px; font-weight: 600;
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gray-b);
}
.nav-mobile a:last-child { border-bottom: none; }

@media (max-width: 960px) {
  .nav-menu, .nav-cta.desktop-only { display: none; }
  .nav-burger { display: flex; }
}

/* ============ B1 · HERO ============ */
.hero { padding: 168px 0 88px; position: relative; background: var(--white); }
.hero::before {
  content: ''; position: absolute; top: 88px; left: 0;
  width: 64px; height: 64px; background: var(--orange);
}
.hero::after {
  content: ''; position: absolute; top: 88px; left: 64px;
  width: 64px; height: 64px; background: var(--navy);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 24px; }
.hero h1 .acc { color: var(--orange); }
.hero-sub { font-size: clamp(15.5px,1.3vw,18px); margin-bottom: 34px; max-width: 560px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.hero-micro { font-size: 12.5px; color: var(--gray-m); font-weight: 500; }
.hero-micro .d { color: var(--orange); margin: 0 7px; }
.hero-tag {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--gray-b);
  font-style: italic; font-size: 14px; color: var(--orange); font-weight: 600;
}

/* Composición visual del hero: foto + dashboard */
.hero-visual { position: relative; min-height: 470px; }

.ph {
  /* Placeholder profesional para fotografía pendiente */
  background:
    repeating-linear-gradient(45deg, var(--gray-s), var(--gray-s) 14px, var(--gray-l) 14px, var(--gray-l) 28px);
  border: 1px dashed var(--gray-b);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 20px; color: var(--gray-m);
}
.ph strong { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-d); }
.ph code {
  font-family: monospace; font-size: 11px; background: var(--white);
  border: 1px solid var(--gray-b); padding: 3px 8px; border-radius: 3px; color: var(--navy);
}

.hero-photo { position: absolute; inset: 0 60px 90px 0; }

/* Mockup de dashboard operativo (vista ilustrativa) */
.dash {
  position: absolute; right: 0; bottom: 0; width: 330px;
  background: var(--navy); border-radius: 6px; overflow: hidden;
  box-shadow: 0 28px 60px rgba(15,26,53,.35);
}
.dash-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--navy-depth);
}
.dash-top span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-aux); }
.dash-top em { font-size: 9px; font-style: normal; color: var(--orange); font-weight: 700; letter-spacing: .1em; }
.dash-body { padding: 16px; display: grid; gap: 12px; }
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-kpi { background: var(--navy-elev); border-radius: 4px; padding: 12px; }
.dash-kpi small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-aux); margin-bottom: 5px; }
.dash-kpi b { font-size: 19px; color: var(--white); font-weight: 800; }
.dash-kpi b.ok { color: #7BD88F; }
.dash-bar { background: var(--navy-elev); border-radius: 4px; padding: 12px; }
.dash-bar small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-aux); margin-bottom: 8px; }
.dash-track { height: 8px; background: var(--navy-depth); border-radius: 4px; overflow: hidden; }
.dash-fill { height: 100%; width: 78%; background: var(--orange); border-radius: 4px; }
.dash-bar b { display: block; text-align: right; font-size: 12px; color: var(--white); margin-top: 5px; }
.dash-list { background: var(--navy-elev); border-radius: 4px; padding: 12px; }
.dash-list small { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-aux); margin-bottom: 8px; }
.dash-list li { list-style: none; font-size: 11px; color: var(--white); padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; }
.dash-list li:first-of-type { border-top: none; }
.dash-list .tag-ok { color: #7BD88F; font-weight: 700; }
.dash-list .tag-al { color: var(--orange); font-weight: 700; }
.dash-note {
  padding: 9px 16px; background: var(--navy-depth);
  font-size: 9.5px; color: var(--navy-aux); font-style: italic;
}

/* Franja de prueba de escala bajo el hero */
.proof {
  border-top: 1px solid var(--gray-b); border-bottom: 1px solid var(--gray-b);
  background: var(--gray-l); padding: 26px 0;
}
.proof-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.proof-stats { display: flex; flex-wrap: wrap; gap: 34px; }
.proof-stat b { font-size: 26px; font-weight: 900; color: var(--navy); letter-spacing: -.03em; }
.proof-stat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-d); }
.proof-sectors { font-size: 12.5px; color: var(--gray-d); font-weight: 600; }
.proof-sectors i { font-style: normal; color: var(--orange); margin: 0 6px; }

@media (max-width: 960px) {
  .hero { padding-top: 128px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero::before,.hero::after { width: 44px; height: 44px; top: 74px; }
  .hero::after { left: 44px; }
  .hero-visual { min-height: 430px; }
  .dash { width: min(330px, 88%); }
}

/* ============ B2 · ESCALA Y CLIENTES ============ */
.sec-escala { background: var(--white); padding-top: 88px; }
.escala-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.cli-card {
  border: 1px solid var(--gray-b); border-left: 4px solid var(--orange);
  padding: 26px 22px; transition: var(--tr); background: var(--white);
}
.cli-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27,41,82,.08); }
.cli-card .cat { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.cli-card h3 { font-size: 16px; margin: 10px 0 8px; }
.cli-card p { font-size: 13px; }
.escala-note { margin-top: 26px; font-size: 13px; color: var(--gray-m); font-style: italic; }
.escala-comp { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip {
  font-size: 11.5px; font-weight: 700; color: var(--navy);
  background: var(--gray-s); border: 1px solid var(--gray-b);
  padding: 8px 14px; border-radius: 3px; letter-spacing: .03em;
}
.chip.ok::before { content: '✓ '; color: var(--orange); }
@media (max-width: 960px) { .escala-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .escala-grid { grid-template-columns: 1fr; } }

/* ============ B3 · PARA QUIÉN ============ */
.sec-quien { background: var(--gray-l); }
.quien-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.quien-card {
  background: var(--white); border: 1px solid var(--gray-b); border-top: 3px solid var(--navy);
  padding: 24px 18px; display: flex; flex-direction: column; transition: var(--tr);
}
.quien-card:hover { border-top-color: var(--orange); transform: translateY(-3px); }
.quien-card h3 { font-size: 14.5px; margin-bottom: 10px; }
.quien-card p { font-size: 12.5px; flex: 1; }
.quien-card a { margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); text-decoration: none; }
.quien-hint { display: none; text-align: center; font-size: 12px; color: var(--gray-m); margin-top: 10px; }
@media (max-width: 960px) {
  .quien-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding: 0 28px 12px; margin: 0 -28px;
    -webkit-overflow-scrolling: touch;
  }
  .quien-card { flex: 0 0 76%; scroll-snap-align: start; }
  .quien-hint { display: block; }
}

/* ============ B4 · SISTEMA + TECNOLOGÍA ============ */
.sec-sistema { background: var(--navy); }
.sec-sistema h2, .sec-sistema h3 { color: var(--white); }
.sec-sistema .sec-head p { color: var(--navy-aux); }

.sys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 72px; }

/* Organigrama */
.org-chain { list-style: none; }
.org-chain li {
  background: var(--navy-elev); border-left: 3px solid var(--orange);
  padding: 14px 18px; margin-bottom: 10px; position: relative;
}
.org-chain li::after {
  content: '↓'; position: absolute; left: 22px; bottom: -13px;
  color: var(--orange); font-weight: 800; font-size: 13px; z-index: 2;
}
.org-chain li:last-child::after { display: none; }
.org-chain b { display: block; font-size: 14px; color: var(--white); font-weight: 700; }
.org-chain span { font-size: 12px; color: var(--navy-aux); }
.org-side { margin-top: 22px; }
.org-side small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.org-side-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.org-side-chips span {
  font-size: 11.5px; font-weight: 600; color: var(--white);
  border: 1px solid rgba(255,255,255,.25); padding: 7px 12px; border-radius: 3px;
}
.org-note { margin-top: 20px; font-size: 13.5px; color: var(--navy-aux); font-style: italic; }
.org-note b { color: var(--white); }

/* Flujo tecnológico */
.flow { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-bottom: 40px; }
.flow-step { background: var(--navy-elev); padding: 16px 12px; position: relative; border-radius: 4px; }
.flow-step::after {
  content: '→'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  color: var(--orange); font-weight: 800; z-index: 2;
}
.flow-step:last-child::after { display: none; }
.flow-step b { display: block; font-size: 12px; color: var(--white); font-weight: 700; margin-bottom: 4px; }
.flow-step span { font-size: 10.5px; color: var(--navy-aux); line-height: 1.45; display: block; }

/* Capacidades con estado */
.cap-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.cap {
  background: var(--navy-elev); border-radius: 4px; padding: 20px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.cap b { font-size: 14.5px; color: var(--white); font-weight: 700; }
.cap p { font-size: 12px; color: var(--navy-aux); flex: 1; }
.cap-status {
  align-self: flex-start; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 3px;
}
.st-imp { background: rgba(123,216,143,.15); color: #7BD88F; }
.st-inf { background: rgba(242,142,28,.15); color: var(--orange); }
.st-int { background: rgba(184,194,217,.15); color: var(--navy-aux); }
.st-dev { background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); }

/* Mockups de reportería */
.sys-mocks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.mock { background: var(--navy-depth); border-radius: 6px; overflow: hidden; }
.mock-top { padding: 10px 16px; background: rgba(255,255,255,.05); display: flex; justify-content: space-between; }
.mock-top span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-aux); }
.mock-top em { font-size: 9px; font-style: normal; font-weight: 700; color: var(--orange); letter-spacing: .1em; }
.mock table { width: 100%; border-collapse: collapse; }
.mock td, .mock th { padding: 9px 16px; font-size: 11px; text-align: left; }
.mock th { color: var(--navy-aux); font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: .1em; border-bottom: 1px solid rgba(255,255,255,.1); }
.mock td { color: var(--white); border-bottom: 1px solid rgba(255,255,255,.06); }
.mock td.ok { color: #7BD88F; font-weight: 700; }
.sys-disclaimer { margin-top: 26px; font-size: 12.5px; color: var(--navy-aux); font-style: italic; }
.sys-assets { margin-top: 14px; font-size: 11.5px; color: var(--navy-aux); }
.sys-assets code { font-family: monospace; background: rgba(255,255,255,.07); padding: 2px 7px; border-radius: 3px; margin: 0 3px; font-size: 10.5px; }

@media (max-width: 960px) {
  .sys-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2,1fr); }
  .flow-step::after { display: none; }
  .cap-grid { grid-template-columns: 1fr; }
  .sys-mocks { grid-template-columns: 1fr; }
}

/* ============ B5 · INGRESO ============ */
.sec-ingreso { background: var(--white); }
.ingreso-anchor {
  background: rgba(242,142,28,.07); border-left: 4px solid var(--orange);
  padding: 20px 24px; margin-bottom: 44px; max-width: 780px;
}
.ingreso-anchor p { font-size: 15.5px; color: var(--navy); }
.tab-bar { display: flex; gap: 6px; border-bottom: 1px solid var(--gray-b); margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; }
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 14px 18px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--gray-m); cursor: pointer; white-space: nowrap; transition: var(--tr);
  display: flex; align-items: center; gap: 9px; min-height: 48px;
}
.tab-btn .n { font-weight: 900; color: var(--gray-b); transition: var(--tr); }
.tab-btn:hover { color: var(--navy); }
.tab-btn.active { color: var(--navy); border-bottom-color: var(--orange); }
.tab-btn.active .n { color: var(--orange); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .35s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px);} to { opacity:1; transform:none;} }

.palanca { max-width: 860px; }
.palanca h3 { margin-bottom: 20px; }
.palanca-tabla { width: 100%; border-collapse: collapse; }
.palanca-tabla th {
  width: 190px; vertical-align: top; text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange); padding: 13px 16px 13px 0; border-bottom: 1px solid var(--gray-b);
}
.palanca-tabla td {
  font-size: 14px; color: var(--gray-d); line-height: 1.6;
  padding: 13px 0; border-bottom: 1px solid var(--gray-b);
}
@media (max-width: 680px) {
  .palanca-tabla, .palanca-tabla tr, .palanca-tabla th, .palanca-tabla td { display: block; width: 100%; }
  .palanca-tabla th { border-bottom: none; padding-bottom: 2px; }
  .palanca-tabla td { padding-top: 2px; }
}

/* ============ B6 · CASOS ============ */
.sec-casos { background: var(--gray-l); }
.casos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.caso { background: var(--white); border: 1px solid var(--gray-b); display: flex; flex-direction: column; }
.caso-h { background: var(--navy); padding: 18px 22px; }
.caso-h .cat { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.caso-h b { display: block; font-size: 16px; color: var(--white); margin-top: 5px; }
.caso-b { padding: 20px 22px; flex: 1; }
.caso-b dl div { padding: 9px 0; border-bottom: 1px solid var(--gray-b); }
.caso-b dl div:last-child { border-bottom: none; }
.caso-b dt { font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.caso-b dd { font-size: 12.5px; color: var(--gray-d); line-height: 1.55; }
.caso-b dd .edit { color: var(--gray-m); font-style: italic; }
.caso-f { padding: 10px 22px; background: var(--gray-s); border-top: 1px dashed var(--gray-b); font-size: 10.5px; font-style: italic; color: var(--gray-m); }
@media (max-width: 960px) { .casos-grid { grid-template-columns: 1fr; } }

/* ============ B7 · IMPLEMENTACIÓN + CUMPLIMIENTO ============ */
.sec-impl { background: var(--white); }
.fases { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 64px; }
.fase { border: 1px solid var(--gray-b); border-top: 3px solid var(--orange); padding: 22px 20px; }
.fase .fn { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--orange); }
.fase h3 { font-size: 16px; margin: 8px 0 14px; }
.fase dl div { margin-bottom: 10px; }
.fase dt { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-m); }
.fase dd { font-size: 12.5px; color: var(--gray-d); line-height: 1.5; }
@media (max-width: 960px) { .fases { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .fases { grid-template-columns: 1fr; } }

.cumpl {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px;
  background: var(--navy); padding: 44px 40px; border-radius: 6px;
}
.cumpl h3 { color: var(--white); margin-bottom: 14px; }
.cumpl p { color: var(--navy-aux); font-size: 14px; margin-bottom: 20px; }
.cumpl-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.cumpl-chips span {
  font-size: 11.5px; font-weight: 700; color: var(--white);
  border: 1px solid rgba(255,255,255,.28); padding: 8px 13px; border-radius: 3px;
}
.cumpl-chips span::before { content: '✓ '; color: var(--orange); }
.cumpl-cta { align-self: center; text-align: center; }
.cumpl-cta small { display: block; margin-top: 12px; font-size: 11.5px; color: var(--navy-aux); font-style: italic; line-height: 1.5; }
@media (max-width: 860px) { .cumpl { grid-template-columns: 1fr; } }

/* ============ B8 · DIAGNÓSTICO ============ */
.sec-diag { background: var(--orange); position: relative; }
.sec-diag::before { content:''; position:absolute; top:0; right:0; width:96px; height:96px; background: var(--navy); }
.diag-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 52px; align-items: start; }
.diag-left .eyebrow { color: var(--white); opacity: .9; }
.diag-left h2 { color: var(--white); margin-bottom: 22px; }
.diag-left > p { color: rgba(255,255,255,.94); font-size: 16px; margin-bottom: 28px; }
.diag-list { list-style: none; margin-bottom: 34px; }
.diag-list li {
  display: flex; gap: 12px; padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.3);
  color: var(--white); font-size: 14.5px; font-weight: 500;
}
.diag-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.diag-list .a { color: var(--navy); font-weight: 800; }

/* Mini FAQ */
.faq { margin-top: 8px; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.3); }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 15px 36px 15px 0; font-family: inherit; font-size: 14.5px;
  font-weight: 700; color: var(--white); cursor: pointer; position: relative;
  min-height: 48px;
}
.faq-q::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 21px; font-weight: 400; color: var(--navy); }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding-bottom: 16px; font-size: 13.5px; color: rgba(255,255,255,.92); }
.diag-contact { margin-top: 28px; font-size: 13.5px; color: rgba(255,255,255,.9); }
.diag-contact b { display: block; color: var(--white); font-size: 15px; margin-top: 3px; }
.diag-wa { margin-top: 10px; font-size: 12.5px; }
.diag-wa a { color: var(--navy); font-weight: 700; text-decoration: underline; }

/* Formulario 2 pasos */
.form {
  background: var(--white); border-radius: 6px; padding: 34px 30px;
  box-shadow: 0 26px 60px rgba(15,26,53,.22);
}
.form-title { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.form-sub { font-size: 20px; font-weight: 800; color: var(--navy); margin: 6px 0 20px; }
.steps { display: flex; gap: 8px; margin-bottom: 24px; }
.step-dot { flex: 1; height: 4px; background: var(--gray-b); border-radius: 2px; transition: var(--tr); }
.step-dot.on { background: var(--orange); }
.step-label { font-size: 11.5px; font-weight: 700; color: var(--gray-m); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }

.fstep { display: none; }
.fstep.active { display: block; animation: fadeUp .3s ease; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fg { margin-bottom: 13px; }
.fg label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-d); margin-bottom: 5px; }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 12px 13px; border: 1px solid var(--gray-b);
  border-radius: 3px; font-family: inherit; font-size: 14px; color: var(--navy);
  background: var(--white); transition: var(--tr); min-height: 46px;
}
.fg textarea { min-height: 76px; resize: vertical; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--orange); }
.fg.error input, .fg.error select { border-color: #C0392B; }
.fg .err { display: none; font-size: 11px; color: #C0392B; margin-top: 4px; font-weight: 600; }
.fg.error .err { display: block; }

.fg-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; }
.fg-consent input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex-shrink: 0; }
.fg-consent label { font-size: 12px; color: var(--gray-d); text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.5; }

/* honeypot antispam — oculto para humanos */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.fnav { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; }
.fnav .btn { flex: 1; justify-content: center; }
.btn-back { background: var(--gray-s); color: var(--navy); }
.btn-back:hover { background: var(--gray-b); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

.form-msg { display: none; padding: 14px 16px; border-radius: 4px; font-size: 13.5px; font-weight: 600; margin-top: 14px; }
.form-msg.show { display: block; }
.form-msg.ok { background: #E8F6EC; color: #1E7A3A; }
.form-msg.bad { background: #FBEAE8; color: #C0392B; }

.form-success { display: none; text-align: center; padding: 30px 8px; }
.form-success.show { display: block; }
.form-success .ic { font-size: 40px; color: var(--orange); }
.form-success h3 { margin: 12px 0 8px; }
.form-success p { font-size: 14px; }

.form-micro { font-size: 10.5px; color: var(--gray-m); font-style: italic; margin-top: 14px; line-height: 1.55; }

@media (max-width: 960px) {
  .diag-grid { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; }
}

/* ============ FOOTER ============ */
.footer { background: var(--navy); border-top: 4px solid var(--orange); padding: 60px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-logo { height: 40px; margin-bottom: 16px; }
.footer-logo img { height: 100%; width: auto; }
.footer-tag { font-size: 13.5px; color: var(--navy-aux); font-style: italic; max-width: 260px; }
.footer h5 { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 15px; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; font-size: 13.5px; }
.footer a { color: var(--white); text-decoration: none; font-weight: 500; transition: var(--tr); }
.footer a:hover { color: var(--orange); }
.footer .pending { color: var(--navy-aux); cursor: default; }
.footer .pending::after { content: ' ·'; color: var(--orange); }
.footer-line { font-size: 13.5px; color: var(--white); font-weight: 500; margin-bottom: 7px; }
.footer-line.dim { color: var(--navy-aux); }
.footer-bottom {
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--navy-aux);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============ WHATSAPP (secundario) ============ */
.wa-float {
  position: fixed; bottom: 18px; right: 18px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.4); text-decoration: none;
}
.wa-float svg { width: 27px; height: 27px; fill: var(--white); }
@media (max-width: 960px) { .wa-float { display: flex; } } /* Solo móvil: en desktop no compite con el CTA */

/* ============ ANIMACIONES / REVEAL ============ */
/* Fail-safe: el contenido es visible por defecto. La animación de aparición
   solo se activa cuando el JS corre (html.js), para que visores sin JavaScript
   (WhatsApp, vista previa de iOS, correo) muestren la página completa. */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============ COBERTURA (activa / preparación / futura) ============ */
.cobertura { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 34px; }
.cob-col { border: 1px solid var(--gray-b); border-top: 3px solid var(--orange); padding: 20px 18px; background: var(--white); }
.cob-col.cob-prep { border-top-color: var(--navy); }
.cob-col.cob-fut { border-top-style: dashed; border-top-color: var(--gray-m); background: var(--gray-l); }
.cob-col small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.cob-col.cob-prep small { color: var(--navy); }
.cob-col.cob-fut small { color: var(--gray-m); }
.cob-col b { display: block; font-size: 16px; color: var(--navy); margin-bottom: 6px; }
.cob-col span { font-size: 12.5px; color: var(--gray-d); line-height: 1.55; }
@media (max-width: 860px) { .cobertura { grid-template-columns: 1fr; } }

/* ============ SECTORES (sustituye casos mientras se documentan) ============ */
.sectores-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.sector-item { background: var(--white); border-left: 4px solid var(--orange); border-top: 1px solid var(--gray-b); border-right: 1px solid var(--gray-b); border-bottom: 1px solid var(--gray-b); padding: 20px 22px; }
.sector-item b { display: block; font-size: 16px; color: var(--navy); font-weight: 800; margin-bottom: 5px; }
.sector-item span { font-size: 13px; color: var(--gray-d); }
@media (max-width: 700px) { .sectores-strip { grid-template-columns: 1fr; } }

/* ============ PREDIOS EN ESPERA DE DESARROLLO ============ */
.sec-predios { background: var(--navy); }
.sec-predios h2 { color: var(--white); }
.predios-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: start; }
.predios-sub { font-size: 16.5px; color: var(--white); font-weight: 500; margin-bottom: 20px; line-height: 1.65; }
.predios-txt { font-size: 14.5px; color: var(--navy-aux); margin-bottom: 16px; }
.predios-txt strong { color: var(--white); }
.predios-micro { margin-top: 16px; font-size: 12px; color: var(--navy-aux); font-style: italic; line-height: 1.6; }
.sec-predios .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.55); }
.sec-predios .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--white); color: var(--white); }

.predio-modelo { background: var(--navy-elev); border-left: 4px solid var(--orange); border-radius: 4px; padding: 30px 28px; }
.predio-modelo small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.predio-modelo ul { list-style: none; }
.predio-modelo li { font-size: 13px; color: var(--navy-aux); line-height: 1.6; padding: 11px 0 11px 22px; border-bottom: 1px solid rgba(255,255,255,.09); position: relative; }
.predio-modelo li:last-child { border-bottom: none; }
.predio-modelo li::before { content: ''; position: absolute; left: 0; top: 19px; width: 11px; height: 2px; background: var(--orange); }
.predio-modelo li b { color: var(--white); font-weight: 700; }
.predio-nota { margin-top: 16px; font-size: 11.5px; color: var(--navy-aux); font-style: italic; line-height: 1.6; }
@media (max-width: 960px) { .predios-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ============ V4 · JERARQUÍA DE RENTA ============ */

/* Hero más compacto, visual = activo (no dashboard) */
.hero-renta { padding: 148px 0 72px; }
.hero-photo-full { position: absolute; inset: 0; }
@media (max-width: 960px) {
  .hero-renta { padding: 118px 0 48px; }
  .hero-renta .hero-visual { min-height: 200px; }
  .hero-renta h1 { font-size: clamp(30px,8vw,40px); }
}

/* Bloque 2: renta + beneficios */
.sec-renta { background: var(--gray-l); }
.renta-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 52px; align-items: start; }
.renta-benefits { list-style: none; background: var(--white); border: 1px solid var(--gray-b); border-top: 4px solid var(--orange); padding: 26px 26px; }
.renta-benefits li { font-size: 14px; color: var(--navy); font-weight: 500; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--gray-b); position: relative; line-height: 1.5; }
.renta-benefits li:last-child { border-bottom: none; }
.renta-benefits li::before { content: '✓'; position: absolute; left: 0; top: 11px; color: var(--orange); font-weight: 800; }
@media (max-width: 960px) { .renta-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Bloque 3: activos que rentamos */
.sec-activos { background: var(--white); padding: 84px 0; }
.activos-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.activo-chip { font-size: 13.5px; font-weight: 700; color: var(--navy); background: var(--gray-l); border: 1px solid var(--gray-b); border-left: 3px solid var(--orange); padding: 13px 18px; }

/* Bloque 6: dashboard compacto + expandible */
.dash-inline { position: static; width: 100%; max-width: 380px; margin-bottom: 18px; }
.mock-details summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--orange);
  padding: 12px 0; list-style: none; letter-spacing: .03em;
}
.mock-details summary::before { content: '+ '; }
.mock-details[open] summary::before { content: '− '; }
.mock-details .sys-mocks { margin-top: 10px; grid-template-columns: 1fr; gap: 12px; }
.impl-strip {
  margin-top: 48px; padding: 20px 24px; background: var(--navy-elev);
  border-left: 4px solid var(--orange); border-radius: 4px;
  font-size: 13.5px; color: var(--navy-aux); line-height: 1.65;
}
.impl-strip b { color: var(--white); }

/* Bloque 7: renta fija dominante */
.sec-modelos { background: var(--white); }
.modelos-v4 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; }
.modelo-main {
  border: 2px solid var(--navy); border-top: 5px solid var(--orange);
  padding: 36px 34px; background: var(--white);
}
.modelo-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white); background: var(--orange);
  padding: 5px 11px; border-radius: 3px; margin-bottom: 14px;
}
.modelo-main h3 { font-size: 26px; margin-bottom: 12px; }
.modelo-lead { font-size: 15px; color: var(--gray-d); margin-bottom: 18px; }
.modelo-main ul { list-style: none; margin-bottom: 24px; }
.modelo-main li { font-size: 13.5px; color: var(--navy); padding: 8px 0 8px 24px; position: relative; border-bottom: 1px solid var(--gray-b); }
.modelo-main li:last-child { border-bottom: none; }
.modelo-main li::before { content: '✓'; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.modelos-alt { display: flex; flex-direction: column; gap: 20px; }
.modelo-sec { border: 1px solid var(--gray-b); padding: 24px 22px; flex: 1; }
.modelo-sec h3 { font-size: 17px; margin-bottom: 8px; }
.modelo-sec p { font-size: 13px; }
.modelo-admin { background: var(--gray-l); border: 1px dashed var(--gray-b); padding: 16px 20px; }
.modelo-admin p { font-size: 12px; color: var(--gray-m); font-style: italic; }
@media (max-width: 900px) { .modelos-v4 { grid-template-columns: 1fr; } }

/* ============ CORRECCIONES MÓVILES V4 ============ */
@media (max-width: 960px) {
  /* WhatsApp sin invadir contenido: más pequeño y espacio reservado al final */
  .wa-float { width: 46px; height: 46px; bottom: 14px; right: 14px; }
  .wa-float svg { width: 23px; height: 23px; }
  .sec-diag { padding-bottom: 130px; }
  .footer { padding-bottom: 84px; }
  /* Dashboards con menor altura en móvil */
  .dash-inline { max-width: 100%; }
  .dash-kpi b { font-size: 16px; }
  .mock td, .mock th { padding: 7px 12px; font-size: 10px; }
  /* Separación entre secciones */
  section { padding: 72px 0; }
  .sec-activos { padding: 60px 0; }
}

/* ============ V5 · VISUAL INSTITUCIONAL DEL HERO ============ */
/* Composición geométrica limpia (acceso vehicular estilizado).
   Para sustituir por la fotografía definitiva, ver comentario en index.html. */
.hero-art { position: absolute; inset: 0; background: var(--navy); overflow: hidden; }
.hero-art::before { content: ''; position: absolute; top: 0; left: 0; width: 88px; height: 88px; background: var(--orange); }
.hero-art::after { content: ''; position: absolute; top: 0; left: 88px; width: 88px; height: 88px; background: var(--navy-elev); }
.ha-post { position: absolute; top: 34%; left: 14%; width: 10px; height: 26%; background: var(--white); opacity: .9; }
.ha-gate { position: absolute; top: 34%; left: 15%; width: 52%; height: 9px; background: var(--orange); transform-origin: left center; transform: rotate(-7deg); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ha-slots {
  position: absolute; left: 8%; right: 8%; bottom: 64px; height: 26%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 3px, transparent 3px 62px);
  transform: skewX(-16deg);
}
.ha-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 20px;
  background: var(--navy-depth); color: var(--navy-aux);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 960px) {
  .hero-renta .hero-visual { min-height: 220px; }
  .ha-caption { font-size: 9px; padding: 10px 14px; }
}

/* ============ V5 · CAMPOS CONDICIONALES DESARROLLADOR ============ */
.dev-fields { border: 1px solid var(--gray-b); border-left: 3px solid var(--orange); padding: 16px 16px 4px; margin-bottom: 13px; background: var(--gray-l); }
.dev-fields-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }

/* ============ V6 · ACCESOS FUNCIONALES EN HEADER ============ */
.nav-access { display: flex; align-items: center; gap: 14px; }
.access-btn {
  font-size: 12px; font-weight: 700; color: var(--navy);
  border: 1.5px solid var(--gray-b); border-radius: 4px;
  padding: 9px 14px; text-decoration: none; letter-spacing: .03em;
  transition: var(--tr); white-space: nowrap;
}
.access-btn:hover { border-color: var(--orange); color: var(--orange); }
.access-link {
  font-size: 11.5px; font-weight: 700; color: var(--gray-m);
  text-decoration: none; letter-spacing: .04em; white-space: nowrap;
  padding: 8px 0; border-bottom: 2px solid transparent; transition: var(--tr);
}
.access-link:hover { color: var(--navy); }
@media (max-width: 1180px) { .access-link { display: none; } }
@media (max-width: 960px) { .nav-access { display: none; } }

/* Grupos del menú móvil */
.nm-group {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange); margin: 16px 0 2px; padding-top: 6px;
}
.nav-mobile .nm-group:first-child { margin-top: 4px; }

/* Bloque institucional discreto al final de facturación */
.fact-brand {
  margin-top: 56px; padding: 26px 28px; background: var(--gray-l);
  border: 1px solid var(--gray-b); border-left: 4px solid var(--orange);
}
.fact-brand p { font-size: 14px; color: var(--navy); font-weight: 600; margin-bottom: 12px; }
.fact-brand-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fact-brand-links a { font-size: 12.5px; font-weight: 700; color: var(--orange); text-decoration: none; }
.fact-brand-links a:hover { text-decoration: underline; }

/* ============================================================
   Selector de idioma ES|EN (v14-rc1 · FEATURE_ENGLISH_SITE)
   Oculto por defecto (atributo hidden); script.js lo muestra
   únicamente cuando featureEnglishSite === true.
   ============================================================ */
.lang-switch { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; }
.lang-switch[hidden] { display: none; }
.lang-switch .ls-cur { color: var(--navy); opacity: .5; }
.lang-switch .ls-sep { color: var(--gray-b); font-weight: 400; }
.lang-switch a { color: var(--navy); text-decoration: none; transition: var(--tr); }
.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--orange); }
.footer .lang-switch .ls-cur, .footer .lang-switch a { color: inherit; }
.footer .lang-switch a:hover { color: var(--orange); }
.nav-mobile .lang-switch { padding: 10px 0 4px; font-size: 14px; }
.lang-switch.ls-inline { display: inline-flex; }
.lang-switch[hidden] { display: none !important; }

/* ============ V6 · HERO TIPOGRÁFICO SIN FOTOGRAFÍA (v14-rc2) ============
   Decisión editorial de Dirección: sin imagen hasta contar con la fotografía
   institucional real. Composición amplia basada en tipografía + tratamiento
   CSS ligero (retícula de cajones y bloques geométricos navy/naranja).
   SUSTITUCIÓN FUTURA: agregar la clase .has-foto a la sección e insertar
   <figure class="hero-foto"><img …></figure> — sin reconstruir el hero. */

/* Composición de una columna, ancho editorial, línea legible */
.hero-tipo { overflow: hidden; }
.hero-tipo .hero-grid { grid-template-columns: 1fr; gap: 0; align-items: start; }
.hero-tipo .hero-content { max-width: 900px; position: relative; z-index: 1; }
.hero-tipo h1 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.08; max-width: 860px; }
.hero-tipo .hero-sub { max-width: 640px; }

/* Retícula arquitectónica discreta: cajones de estacionamiento estilizados
   (franja derecha, solo desktop) + bloque geométrico de apoyo. Estático. */
.hero-tipo .hero-lineas {
  position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      rgba(27, 41, 82, .07) 0 2px, transparent 2px 84px);
  transform: skewX(-16deg); transform-origin: top right;
  border-left: 2px solid rgba(27, 41, 82, .08);
}
.hero-tipo .hero-lineas span {
  position: absolute; right: 0; bottom: 0; width: 42%; height: 10px;
  background: var(--orange);
}
/* Línea de base institucional bajo el contenido, alineada a la retícula */
.hero-tipo .hero-content::after {
  content: ''; display: block; margin-top: 34px;
  height: 2px; width: 88px; background: var(--navy);
  box-shadow: 96px 0 0 0 var(--orange);
}

/* Pie de sectores: compacto, tipográfico, institucional */
.hero-sectores {
  margin-top: 26px; font-size: 12px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--navy);
}
.hero-tipo .hero-tag { margin-top: 22px; }

/* Móvil: hero compacto, sin huecos; la retícula lateral se retira */
@media (max-width: 960px) {
  .hero-tipo .hero-lineas { display: none; }
  .hero-tipo .hero-content { max-width: 100%; }
  .hero-tipo h1 { font-size: clamp(30px, 8vw, 40px); }
  .hero-sectores { font-size: 10.5px; letter-spacing: .07em; line-height: 1.8; }
  .hero-tipo .hero-content::after { margin-top: 26px; }
  .hero-tipo .hero-tag { margin-top: 18px; padding-top: 16px; }
}

/* GANCHO FUTURO (inactivo hasta agregar .has-foto + <figure class="hero-foto">):
   reactiva la composición de dos columnas con la fotografía real aprobada.
   No genera peticiones ni espacios mientras no exista el elemento. */
.hero-tipo.has-foto .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-tipo.has-foto .hero-lineas { display: none; }
.hero-foto { position: relative; margin: 0; }
.hero-foto img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
@media (max-width: 960px) {
  .hero-tipo.has-foto .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-foto img { min-height: 220px; }
}