/* ═══════════════════════════════════════════════════════════════
   Operación 50 · Tadori Inversiones
   Estética: documento institucional digital. Sobrio.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Paleta clara · cuerpo de la landing (paleta Tadori INVERTIDA) */
  --bg:           #FAFAF7;     /* blanco roto */
  --bg-elevated:  #F2EFE5;
  --surface:      #FFFFFF;
  --surface-2:    #F0EDE3;
  --hairline:     rgba(10, 14, 26, 0.20);    /* bordes oscuros sólidos sobre claro */
  --hairline-2:   rgba(10, 14, 26, 0.40);
  --gold:         #A8800B;     /* oro oscurecido para legibilidad sobre claro */
  --gold-soft:    #8C6A09;
  --gold-line:    rgba(168, 128, 11, 0.45);
  --gold-faint:   rgba(168, 128, 11, 0.10);

  /* Texto · NEGRO PURO, sin grises por petición */
  --text:         #0A0E1A;
  --text-soft:    #0A0E1A;
  --text-muted:   #0A0E1A;
  --text-faint:   #0A0E1A;

  /* Tipografía */
  --serif:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:         'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Secciones oscuras · color exacto del fondo del logo Tadori (#141414) */
.theme-dark {
  --bg:           #141414;
  --bg-elevated:  #1b1b1b;
  --surface:      #222222;
  --surface-2:    #2a2a2a;
  --hairline:     rgba(255, 255, 255, 0.22);
  --hairline-2:   rgba(255, 255, 255, 0.36);
  --gold:         #F9C80E;
  --gold-soft:    #d9af14;
  --gold-line:    rgba(249, 200, 14, 0.40);
  --gold-faint:   rgba(249, 200, 14, 0.10);
  --text:         #FFFFFF;
  --text-soft:    #FFFFFF;
  --text-muted:   #FFFFFF;
  --text-faint:   #FFFFFF;

  background: var(--bg);
  color: var(--text);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0.012em;
  color: var(--text-soft);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--bg); }

/* Tipografía base */
h1, h2, h3, h4, h5 {
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}

a { color: var(--gold-soft); text-decoration: none; }
a:hover { color: var(--gold); }

/* Containers */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
}

.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 56px;
}

.gold { color: var(--gold); }
.center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   META BAR · cabecera con LOGO + metadata + link panel
   ═══════════════════════════════════════════════════════════════ */
.meta-bar {
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0;
  background: #141414;
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding 0.3s ease;
}

.meta-bar.scrolled {
  padding: 14px 0;
}

.meta-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* Logo grande al cargar · se encoge al hacer scroll */
.meta-logo img {
  height: 96px;
  width: auto;
  display: block;
  opacity: 1;
  transition: height 0.3s ease, opacity 0.2s;
}

.meta-bar.scrolled .meta-logo img {
  height: 44px;
}

.meta-logo:hover img { opacity: 1; }

.meta-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.meta-doc-label {
  color: var(--text-faint);
}

.meta-cta {
  color: var(--text-muted);
  transition: color 0.2s;
}

.meta-cta:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   COVER · primera vista, sobria y editorial
   ═══════════════════════════════════════════════════════════════ */
.cover {
  padding: 110px 0 130px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.cover-eyebrow {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.cover-eyebrow::before {
  content: '';
  width: 72px;
  height: 2px;
  background: var(--gold);
}

.cover-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(64px, 10vw, 144px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 36px;
  max-width: 920px;
}

.cover-title-gold {
  color: var(--gold);
  display: block;
}

.cover-subtitle {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.015em;
  color: var(--text-soft);
  max-width: 540px;
  margin-bottom: 24px;
}

.cover-subtitle--small {
  font-size: 16px;
  margin-bottom: 0;
}

.cover-subtitle strong {
  color: var(--text);
  font-weight: 600;
}

/* Layout 2-col: texto izda / render dcha (eco de la inspiración)
   Render sangra al borde derecho del viewport para integración seamless. */
.cover-top {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: stretch;
  margin-bottom: 72px;
}

@media (max-width: 880px) {
  .cover-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.cover-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cover-render {
  margin: 0;
  border: none;
  overflow: hidden;
  position: relative;
  /* Sangrado a la derecha: extiende el render hasta el borde del viewport */
  margin-right: calc(-1 * (100vw - 1180px) / 2);
  min-height: 100%;
}

@media (max-width: 1180px) {
  .cover-render {
    margin-right: -56px;  /* alineado al padding del container */
  }
}

@media (max-width: 980px) {
  .cover-render {
    margin-right: -32px;
    margin-left: -32px;
  }
}

@media (max-width: 640px) {
  .cover-render {
    margin-right: -24px;
    margin-left: -24px;
  }
}

.cover-render img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* Fade sutil del lado izquierdo del render para integrarlo con el fondo */
.cover-render::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 80px;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 880px) {
  .cover-render::before { display: none; }
}

/* Grid de 4 datos clave */
.cover-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 40px;
  max-width: 920px;
}

.cover-meta-item {
  padding-right: 24px;
  border-right: 1px solid var(--hairline);
}
.cover-meta-item:last-child { border-right: none; }
.cover-meta-item:nth-child(n+2) { padding-left: 24px; }

.cover-meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.cover-meta-value {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

.cover-meta-unit-inline {
  color: var(--text);
  font-size: 0.7em;
  font-weight: 400;
  margin-left: 3px;
}

.cover-meta-pct {
  color: var(--text);
  font-weight: 400;
  margin-left: 1px;
}

.cover-meta-unit {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-top: 8px;
  opacity: 0.85;
}

/* Fila de métricas del cover · 3 celdas pequeñas + celda destacada a la derecha */
.cover-metrics-row {
  display: grid;
  grid-template-columns: minmax(460px, 2.2fr) 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
  padding: 40px 0;
  align-items: center;
}

@media (max-width: 880px) {
  .cover-metrics-row {
    grid-template-columns: 1fr 1fr;
    gap: 32px 0;
  }
  .metric-cell--wide {
    grid-column: 1 / -1;
    border-top: 1px solid var(--hairline);
    padding-top: 32px;
    margin-top: 8px;
  }
}

.metric-cell {
  padding: 0 28px;
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.metric-cell:last-child { border-right: none; }
.metric-cell:first-child { padding-left: 0; }

@media (max-width: 880px) {
  .metric-cell { border-right: none; padding: 0 16px; }
}

.metric-icon {
  color: var(--gold);
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
}

.metric-icon svg { width: 100%; height: 100%; display: block; }

.metric-value {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
}

.metric-pct,
.metric-unit-inline {
  font-size: 0.6em;
  font-weight: 300;
  margin-left: 2px;
  color: var(--text);
}

.metric-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 14px;
}

.metric-label sup {
  color: var(--gold);
  font-weight: 600;
  margin-left: 2px;
}

.metric-sub {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: 10px;
  line-height: 1.5;
}

/* Celda ancha · DESTACADA: escenarios Base/Top integrados (protagonista del cover) */
.metric-cell--wide {
  border: 1.5px solid var(--gold);
  background: var(--gold-faint);
  padding: 28px 36px;
  position: relative;
  text-align: center;
  align-items: center;
}

.metric-cell--wide .metric-scenarios {
  justify-content: center;
}

.metric-scenarios-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  line-height: 1.4;
  white-space: nowrap;
}

.metric-scenarios {
  display: flex;
  align-items: center;
  gap: 36px;
}

.metric-scenarios-divider {
  width: 1px;
  align-self: stretch;
  background: var(--gold-line);
}

.metric-scenario-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}

.metric-scenario-value {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
}

.metric-scenario-value .metric-pct {
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   DIFERENCIADORES · 7 iconos en fila (OPERACIÓN AVANZADA...)
   ═══════════════════════════════════════════════════════════════ */
.differentials {
  padding: 80px 0 96px;
}

.differentials-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--text);
  margin-bottom: 64px;
}

.differentials-title-gold {
  color: var(--gold);
}

.differentials-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 24px;
}

@media (max-width: 980px) {
  .differentials-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .differentials-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.differential-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
}

.differential-icon {
  color: var(--gold);
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
}

.differential-icon svg { width: 100%; height: 100%; display: block; }

.differential-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 12px;
}

.differential-desc {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   PRIVATE NOTICE · aviso regulatorio "operación coinversión privada"
   ═══════════════════════════════════════════════════════════════ */
.private-notice {
  padding: 0 0 64px;
  border-top: none;
}

.private-notice-box {
  max-width: 920px;
  margin: 32px auto 0;
  padding: 28px 36px;
  border: 1px solid var(--gold-line);
  background: var(--gold-faint);
  text-align: center;
}

.private-notice-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.private-notice-text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
  margin: 0 auto 12px;
  max-width: none;
}

.private-notice-text strong {
  font-weight: 600;
}

.private-notice-disclaimer {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.7;
  margin: 0 auto;
  max-width: none;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* ═══════════════════════════════════════════════════════════════
   QUICK SUMMARY · card con datos clave del proyecto
   ═══════════════════════════════════════════════════════════════ */
.quick-summary {
  padding: 64px 0 96px;
  border-top: none;
}

/* Card "executive deal sheet" · fondo blanco roto sobre sección dark
   Override de variables tipo "isla clara" dentro del theme-dark */
.quick-summary-card {
  background: #FAFAF7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 48px 56px;
  color: #0A0E1A;
  --text: #0A0E1A;
  --gold: #A8800B;
  --hairline: rgba(10, 14, 26, 0.16);
}

@media (max-width: 720px) {
  .quick-summary-card { padding: 36px 24px; }
}

.quick-summary-cols {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}

@media (max-width: 880px) {
  .quick-summary-cols { grid-template-columns: 1fr; gap: 48px; }
}

.quick-summary-col-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A8800B;
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10, 14, 26, 0.14);
}

.quick-summary-list {
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr;
  row-gap: 26px;
  column-gap: 24px;
  align-items: center;
}

.quick-summary-list li {
  display: contents;
}

.quick-summary-icon {
  color: #A8800B;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

.quick-summary-icon svg { width: 100%; height: 100%; display: block; }

.quick-summary-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A8800B;
  white-space: nowrap;
}

.quick-summary-value {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: #0A0E1A;
  line-height: 1.45;
}

.quick-summary-value--inline {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-weight: 400;
}

.quick-summary-value--inline strong {
  font-weight: 600;
  margin-right: 6px;
  color: #A8800B;
}

/* Tabla compacta de escenarios dentro de la card · estilo institucional */
.quick-summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sans);
  margin-top: 4px;
  border: 1px solid rgba(10, 14, 26, 0.18);
  overflow: hidden;
  border-radius: 2px;
}

/* Cabecera con fondo charcoal — neutro, ni oscuro extremo ni oro */
.quick-summary-table thead th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FAFAF7;
  background: #4a4a4a;
  padding: 14px 14px;
  text-align: right;
  border-bottom: none;
}

.quick-summary-table thead th:first-child { text-align: left; }

/* Celdas del cuerpo · todos peso 400/500 (sin negrita) */
.quick-summary-table tbody td {
  font-size: 16px;
  font-weight: 400;
  color: #0A0E1A;
  padding: 14px 14px;
  text-align: right;
  border-bottom: 1px solid rgba(10, 14, 26, 0.08);
}

.quick-summary-table tbody td:first-child {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(10, 14, 26, 0.85);
  border-left: 2px solid rgba(10, 14, 26, 0.15);
  padding-left: 12px;
}

/* Zebra stripes muy sutiles */
.quick-summary-table tbody tr:nth-child(even) td {
  background: rgba(10, 14, 26, 0.025);
}

/* Filas destacadas (Base, Top) con tinte oro + borde izquierdo oro */
.quick-summary-table tbody tr.highlight td {
  background: rgba(168, 128, 11, 0.10);
  color: #0A0E1A;
}

.quick-summary-table tbody tr.highlight td:first-child {
  color: #A8800B;
  border-left: 2px solid #A8800B;
}

/* Última columna (rentabilidad) protagonista — un punto más grande, peso normal */
.quick-summary-table tbody td:last-child {
  font-size: 18px;
  font-weight: 500;
  color: #A8800B;
}

.quick-summary-table tbody tr.highlight td:last-child {
  font-size: 18px;
  color: #A8800B;
}

.quick-summary-table tbody tr:last-child td {
  border-bottom: none;
}

.quick-summary-table-note {
  margin-top: 14px;
  font-size: 11px;
  color: rgba(10, 14, 26, 0.55);
  line-height: 1.5;
}

/* Asterisco doble en la fila Salida anticipada del deal sheet · amarillo */
.quick-summary-asterisk {
  color: #D4A810;
  font-size: 0.65em;
  font-weight: 700;
  margin-left: 2px;
  vertical-align: super;
}

/* Footnote pie de la card "deal sheet" · explica el ** */
.quick-summary-footnote {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 14, 26, 0.10);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(10, 14, 26, 0.65);
  text-align: left;
}

.quick-summary-footnote sup {
  color: #D4A810;
  font-weight: 700;
}

.quick-summary-footnote strong {
  font-weight: 600;
  color: #0A0E1A;
}

/* ═══════════════════════════════════════════════════════════════
   STEPS GRID · pasos numerados (Cómo invertir, etc.)
   ═══════════════════════════════════════════════════════════════ */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 32px;
  margin-top: 32px;
}

.strategy-grid--4 { --cols: 4; }

@media (max-width: 1080px) {
  .strategy-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .strategy-grid { grid-template-columns: 1fr; gap: 24px; }
}

.strategy-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  background: var(--bg-elevated);
  position: relative;
}

.strategy-step-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 18px;
}

.strategy-step-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0;
}

.strategy-step-desc {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   GARANTÍAS · sub-bloque salidas dentro de la sección
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   TIPOLOGÍAS · tabla compacta de las 7 tipologías de vivienda
   ═══════════════════════════════════════════════════════════════ */
.typology-block {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
}

.typology-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.typology-eyebrow::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--gold);
}

.typology-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 32px;
  line-height: 1.15;
}

.typology-table-wrapper {
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--hairline-2);
  overflow-x: auto;
}

.typology-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}

.typology-table thead th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
  padding: 16px 14px;
  text-align: left;
  border-bottom: 1px solid var(--hairline-2);
  white-space: nowrap;
}

.typology-table tbody td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  vertical-align: top;
}

.typology-table tbody tr:nth-child(even) td {
  background: rgba(10, 14, 26, 0.025);
}

.typology-table tbody tr.typology-highlight td {
  background: var(--gold-faint);
  border-left: none;
}

.typology-type {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
  font-size: 14px !important;
  width: 56px;
}

.typology-uds {
  font-weight: 600;
  text-align: center !important;
  white-space: nowrap;
  width: 60px;
}

.typology-m2 {
  font-weight: 500;
  white-space: nowrap;
  width: 100px;
}

.typology-desc {
  color: var(--text);
}

.typology-table tfoot td {
  padding: 18px 14px;
  border-top: 2px solid var(--gold);
  border-bottom: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.typology-table tfoot .typology-type {
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 720px) {
  .typology-table thead th,
  .typology-table tbody td,
  .typology-table tfoot td {
    padding: 12px 8px;
    font-size: 12px;
  }
  .typology-desc { font-size: 12px; }
  .typology-type { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RIESGOS Y MITIGACIÓN · grid de 6 cards con mitigaciones
   ═══════════════════════════════════════════════════════════════ */
.risks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 980px) {
  .risks-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .risks-grid { grid-template-columns: 1fr; gap: 16px; }
}

.risk-card {
  padding: 32px 28px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: relative;
}

.risk-card-num {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 14px;
}

.risk-card-title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.3;
  letter-spacing: 0;
}

.risk-card-desc {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.risks-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  max-width: 920px;
  margin: 40px auto 0;
  padding: 24px 28px;
  border-left: 2px solid var(--gold);
  background: var(--bg-elevated);
}

.risks-note strong {
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   CASCADA · distribución del beneficio en 3 tramos
   ═══════════════════════════════════════════════════════════════ */
.cascade {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  counter-reset: cascade-counter;
  position: relative;
}

@media (max-width: 880px) {
  .cascade { grid-template-columns: 1fr; gap: 16px; }
}

.cascade-step {
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  padding: 32px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cascade-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--gold);
  opacity: 0.35;
}

.cascade-step:nth-child(1)::before { opacity: 1; }
.cascade-step:nth-child(2)::before { opacity: 0.55; }
.cascade-step:nth-child(3)::before { opacity: 0.3; }

.cascade-tier {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.cascade-headline {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.3;
}

.cascade-target {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}

.cascade-step--split .cascade-target {
  color: var(--text);
}

.cascade-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

.cascade-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  max-width: 920px;
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 2px solid var(--gold);
  background: var(--gold-faint);
}

.garantias-subtitle {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  margin-top: 56px;
  margin-bottom: 12px;
  letter-spacing: 0;
}

.garantias-subdesc {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 32px;
  max-width: 720px;
}

/* ═══════════════════════════════════════════════════════════════
   QUIÉN ES TADORI · 3 pilares
   ═══════════════════════════════════════════════════════════════ */
.tadori-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--hairline);
}

@media (max-width: 880px) {
  .tadori-pillars { grid-template-columns: 1fr; gap: 24px; }
}

.tadori-pillar {
  display: flex;
  flex-direction: column;
}

.tadori-pillar-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.tadori-pillar-value {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: 0;
}

.tadori-pillar-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   CLOSINGS · 3 cierres (legacy, ya no usado)
   ═══════════════════════════════════════════════════════════════ */
.upper-closings {
  padding: 32px 0 64px;
  border-top: none;
}

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

@media (max-width: 880px) {
  .closings-grid {
    grid-template-columns: 1fr;
  }
}

.closing-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--hairline);
}

.closing-icon {
  color: var(--gold);
  width: 32px;
  height: 32px;
  margin-bottom: 18px;
  flex: 0 0 auto;
}

.closing-icon svg { width: 100%; height: 100%; display: block; }

.closing-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
  margin-bottom: 12px;
}

.closing-desc {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   UPPER CTA BANNER · cierre del upper one-pager
   ═══════════════════════════════════════════════════════════════ */
.upper-cta {
  padding: 32px 0 72px;
  border-top: none;
}

/* Bloque "Operación coinversión privada" dentro del upper-cta · sin caja, ocupa el ancho del contenido */
.upper-cta .private-notice-box {
  border: none;
  background: transparent;
  padding: 0;
  margin: 96px auto 0;
  max-width: none;
}

.upper-cta-banner {
  border: 1.5px solid var(--gold);
  background: linear-gradient(135deg,
    rgba(249, 200, 14, 0.16) 0%,
    rgba(249, 200, 14, 0.04) 40%,
    rgba(249, 200, 14, 0.02) 70%,
    rgba(249, 200, 14, 0.16) 100%);
  padding: 24px 36px;
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}

.upper-cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(249, 200, 14, 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.upper-cta-banner > * { position: relative; z-index: 1; }

.upper-cta-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(249, 200, 14, 0.18);
  border-color: var(--gold);
}

.upper-cta-banner:hover .upper-cta-arrow {
  transform: translateX(8px);
  color: var(--gold);
}

.upper-cta-icon {
  color: var(--gold);
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}

.upper-cta-icon svg { width: 100%; height: 100%; display: block; }

.upper-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

/* Título Reservas abiertas. — Montserrat 500 (eco diferenciadores) */
.upper-cta-title {
  font-family: var(--sans);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  line-height: 1.15;
}

.upper-cta-title-gold {
  color: var(--gold);
}

.upper-cta-sub {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 14px;
}

.upper-cta-arrow {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 200;
  color: var(--text);
  transition: transform 0.25s ease, color 0.25s ease;
  flex: 0 0 auto;
}

@media (max-width: 600px) {
  .upper-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 20px;
  }
  .upper-cta-text { align-items: center; }
  .upper-cta-arrow { display: none; }
}

.upper-cta-note {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: var(--text);
  opacity: 0.5;
  margin-top: 28px;
  text-align: center;
}

/* Disclaimer legal completo bajo el banner Reservas Abiertas */
.upper-cta-disclaimer {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.65;
  margin: 28px auto 0;
  max-width: 920px;
  padding: 20px 24px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.upper-cta-disclaimer strong {
  font-weight: 600;
  opacity: 1;
}

/* Callout de escenarios Base/Top en el cover (eco de la inspiración) — legacy */
.cover-scenarios {
  margin-top: 48px;
  padding: 32px 36px;
  border: 1px solid var(--gold-line);
  background: var(--gold-faint);
  max-width: 920px;
}

.cover-scenarios-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.cover-scenarios-values {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  flex-wrap: wrap;
}

.cover-scenario {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cover-scenario-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.7;
}

.cover-scenario-value {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.cover-scenario-pct {
  font-size: 0.7em;
  font-weight: 400;
  margin-left: 2px;
}

.cover-scenarios-note {
  flex: 1;
  min-width: 240px;
  font-size: 12px;
  color: var(--text);
  opacity: 0.65;
  line-height: 1.5;
  align-self: center;
  border-left: 1px solid var(--hairline);
  padding-left: 24px;
}

@media (max-width: 720px) {
  .cover-scenarios-note {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 16px;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECCIONES · estructura editorial general
   ═══════════════════════════════════════════════════════════════ */
section {
  padding: 110px 0;
  position: relative;
}

section + section { border-top: 1px solid var(--hairline); }

.section-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-eyebrow::before {
  content: '';
  width: 36px;
  height: 2px;
  background: var(--gold);
}
.section-eyebrow.center {
  justify-content: center;
}
.section-eyebrow.center::before { display: none; }

.section-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 48px;
  max-width: 920px;
}

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

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

/* Rentabilidades · centrar tabla + nota */
.rentabilidades-section .table-note {
  max-width: 880px;
  margin: 24px auto 0;
  text-align: center;
}

.section-lede {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.012em;
  color: var(--text-soft);
  max-width: 980px;
  margin-bottom: 56px;
}

.section-lede strong { color: var(--text); font-weight: 600; }

/* Prosa editorial */
.prose p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.012em;
  color: var(--text-soft);
  margin-bottom: 22px;
  max-width: 920px;
}

.prose p strong { color: var(--text); font-weight: 600; }

/* Capital letter (drop cap) */
.prose p:first-child::first-letter {
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 400;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--gold-soft);
}

/* ═══════════════════════════════════════════════════════════════
   RESUMEN EJECUTIVO
   ═══════════════════════════════════════════════════════════════ */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: start;
}

.summary-list {
  list-style: none;
}

.summary-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: baseline;
}
.summary-list li:first-child { padding-top: 0; }

.summary-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.summary-value {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}

.summary-value small {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   DIFERENCIACIÓN · "sin variables que retrasan"
   ═══════════════════════════════════════════════════════════════ */
.differentiation {
  padding: 130px 0;
  background: linear-gradient(180deg, var(--bg) 0%, #0c121f 50%, var(--bg) 100%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.differentiation-lede {
  text-align: center;
  font-size: 19px;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 80px;
  line-height: 1.65;
}

.no-variables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 980px;
  margin: 0 auto;
}

.no-variables-item {
  padding: 56px 32px;
  text-align: center;
  border-right: 1px solid var(--hairline);
}
.no-variables-item:last-child { border-right: none; }

.no-variables-num {
  font-family: var(--sans);
  font-size: 13px;
  font-style: normal;
  color: var(--gold);
  margin-bottom: 18px;
  letter-spacing: 0.05em;
}

/* Iconos SVG dorados estilo banca privada */
.no-variables-icon {
  color: var(--gold);
  margin: 0 auto 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.no-variables-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.no-variables-word {
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.no-variables-word .strike {
  position: relative;
  color: var(--text-muted);
}
.no-variables-word .strike::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 53%;
  height: 1px;
  background: var(--gold);
}

.no-variables-detail {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   ZONA · San Vicente del Raspeig
   ═══════════════════════════════════════════════════════════════ */
.zona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.zona-text .prose p { max-width: none; }

.zona-text h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 26px;
  color: var(--text);
  margin: 36px 0 14px;
  letter-spacing: -0.005em;
}
.zona-text h3:first-child { margin-top: 0; }

/* Plano real SVR · sticky a la derecha del texto */
.zona-plano {
  position: sticky;
  top: 100px;
}

.zona-plano figure {
  margin: 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--surface);
}

.zona-plano img {
  width: 100%;
  height: auto;
  display: block;
}

.zona-plano figcaption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  padding: 14px 18px;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

/* Imagen aérea (cuando se añada) */
.zona-hero-image {
  margin: 32px 0 64px;
  overflow: hidden;
}

.zona-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.zona-hero-image figcaption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  margin-top: 12px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   ZONA · bullets compactos
   ═══════════════════════════════════════════════════════════════ */
.zona-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.zona-bullets li {
  position: relative;
  padding: 18px 0 18px 28px;
  border-bottom: 1px solid var(--hairline);
}

.zona-bullets li:first-child { padding-top: 0; }
.zona-bullets li:last-child { border-bottom: none; }

.zona-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28px;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

.zona-bullets li:first-child::before { top: 10px; }

.zona-bullet-title {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.zona-bullets p {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX · click en imagen abre popup zoom
   ═══════════════════════════════════════════════════════════════ */
img[data-lightbox] {
  cursor: zoom-in;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  cursor: zoom-out;
  padding: 56px 32px;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Cuadro contenedor de la imagen */
.lightbox-frame {
  position: relative;
  background: #FAFAF7;
  border: 1px solid rgba(168, 128, 11, 0.40);
  padding: 24px;
  max-width: min(88vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  cursor: default;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.lightbox-overlay.active .lightbox-frame {
  transform: scale(1);
}

.lightbox-frame img {
  max-width: 100%;
  max-height: calc(88vh - 100px);
  object-fit: contain;
  display: block;
  width: auto;
  margin: 0 auto;
}

.lightbox-caption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: #0A0E1A;
  letter-spacing: 0.04em;
  text-align: center;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgba(10, 14, 26, 0.10);
}

.lightbox-close {
  position: absolute;
  top: -56px;
  right: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  font-size: 20px;
  font-family: var(--sans);
  font-weight: 200;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.lightbox-close:hover {
  border-color: var(--gold);
  background: rgba(249, 200, 14, 0.10);
}

/* ═══════════════════════════════════════════════════════════════
   INTERIOR GALLERY · 4 fotos de staging en sección Descripción
   ═══════════════════════════════════════════════════════════════ */
.interior-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 64px 0 32px;
}

@media (max-width: 720px) {
  .interior-gallery { grid-template-columns: 1fr; }
}

.interior-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.interior-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.interior-card:hover img {
  transform: scale(1.04);
}

.interior-card figcaption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  padding: 14px 18px;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--hairline);
}

/* Disclaimer de renders y copyright bajo galerías de imágenes */
.image-disclaimer {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.65;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  max-width: 920px;
  letter-spacing: 0.01em;
}

.image-disclaimer strong {
  font-weight: 600;
  opacity: 1;
}

.image-copyright {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

/* © inline pequeño dentro de cada figcaption · marca propiedad individual */
.image-copyright-mini {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  white-space: nowrap;
}

/* Para el cover (figcaption sola, fondo dark, posicionada abajo-derecha) */
.cover-render figcaption.image-copyright-mini {
  display: block;
  margin: 8px 0 0;
  text-align: right;
  font-size: 10px;
  opacity: 0.65;
}

/* Render edificio diurno · full-width cierre de sección */
.building-render {
  margin: 32px 0 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.building-render img {
  width: 100%;
  height: auto;
  display: block;
}

.building-render figcaption {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  padding: 14px 18px;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--hairline);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   PROYECTO · datos técnicos del edificio
   ═══════════════════════════════════════════════════════════════ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 64px 0;
}

.project-grid-item {
  padding: 32px 24px;
  border-right: 1px solid var(--hairline);
}
.project-grid-item:last-child { border-right: none; }

.project-grid-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}

.project-grid-value {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}

.value-decimal {
  font-size: 0.65em;
  color: var(--text-muted);
}

.project-grid-unit {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-top: 8px;
  text-transform: uppercase;
}

/* Render del proyecto (cuando se añada) */
.project-render {
  margin: 64px 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.project-render img {
  width: 100%;
  height: auto;
  display: block;
}

.project-render figcaption {
  font-family: var(--sans);
  font-size: 14px;
  font-style: normal;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 24px;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.project-closing { max-width: 700px; }

/* ═══════════════════════════════════════════════════════════════
   RENTABILIDADES · tabla institucional
   ═══════════════════════════════════════════════════════════════ */
.returns-table-wrapper {
  margin-top: 16px;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--hairline-2);
  overflow-x: auto;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.returns-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}

.returns-table thead th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 16px 18px 14px;
  text-align: right;
  border-bottom: 1px solid var(--hairline-2);
}
.returns-table thead th:first-child { text-align: left; }

.returns-table tbody td {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  padding: 18px 18px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  letter-spacing: -0.005em;
}

.returns-table tbody td:first-child {
  text-align: left;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.returns-table tbody tr.highlight td {
  color: var(--gold);
  background: var(--gold-faint);
}
.returns-table tbody tr.highlight td:first-child {
  color: var(--gold);
}

.returns-table tbody tr:last-child td { border-bottom: none; }

.table-note {
  font-size: 13px;
  color: var(--text-faint);
  font-style: normal;
  line-height: 1.65;
  max-width: 720px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.guarantee-callout {
  margin-top: 64px;
  padding: 36px 40px;
  border-left: 2px solid var(--gold);
  background: var(--gold-faint);
  max-width: 780px;
}

.guarantee-callout-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.guarantee-callout-text {
  font-family: var(--sans);
  font-size: 23px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════════════════════
   PLANOS · galería editorial
   ═══════════════════════════════════════════════════════════════ */
.planos-section { padding: 110px 0 130px; }

/* Grid de cards · planos visados (eco maqueta alternativa) */
.planos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

@media (max-width: 600px) {
  .planos-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.plano-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

.plano-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-line);
  box-shadow: 0 12px 32px rgba(10, 14, 26, 0.10);
}

.plano-card-image {
  background: #FFFFFF;
  padding: 28px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.plano-card-image img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.plano-card-info {
  padding: 24px 28px;
}

.plano-card-title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}

.plano-card-meta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   CRONOGRAMA · timeline vertical
   ═══════════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  margin-top: 56px;
  padding-left: 32px;
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--hairline-2);
}

.timeline-item {
  position: relative;
  padding-bottom: 48px;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 6px;
  width: 13px;
  height: 13px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
}

.timeline-item.active::before { background: var(--gold); }

.timeline-date {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.timeline-title {
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.timeline-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 580px;
}

/* ═══════════════════════════════════════════════════════════════
   SALIDAS ANTICIPADAS · cards
   ═══════════════════════════════════════════════════════════════ */
.exits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}

.exit-card {
  padding: 48px 40px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold);
}

.exit-card-period {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.exit-card-percent {
  font-family: var(--sans);
  font-size: 68px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.exit-card-percent .pct {
  color: var(--gold);
  font-size: 0.55em;
  font-style: normal;
  vertical-align: super;
}

.exit-card-asterisk {
  color: var(--gold);
  font-size: 0.45em;
  font-weight: 500;
  margin-left: 4px;
  vertical-align: super;
}

.exits-footnote {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.7;
  margin-top: 24px;
  text-align: center;
}

.exits-footnote sup {
  color: var(--gold);
  font-weight: 600;
  opacity: 1;
}

.exits-footnote strong {
  font-weight: 600;
  opacity: 1;
}

.exit-card-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq-list {
  margin-top: 32px;
  border-top: 1px solid var(--hairline);
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-question {
  cursor: pointer;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.005em;
  list-style: none;
  transition: color 0.2s;
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--gold); }

.faq-icon {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--gold);
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  padding: 0 0 32px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 760px;
}

.faq-answer p { margin-bottom: 14px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   CTA · solicitud de reserva
   ═══════════════════════════════════════════════════════════════ */
.cta-section {
  padding: 110px 0;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-elevated);
}

/* Banner "RESERVAS ABIERTAS" */
.cta-banner {
  max-width: 920px;
  margin: 0 auto 80px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 40px;
  border: 2px solid var(--gold);
  background: var(--surface);
}

.cta-banner-icon {
  color: var(--gold);
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.cta-banner-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cta-banner-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}

.cta-banner-sub {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  opacity: 0.7;
}

@media (max-width: 600px) {
  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
}

.cta-content {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.cta-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.cta-title {
  font-family: var(--sans);
  font-size: clamp(38px, 4.8vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 22px;
  letter-spacing: -0.015em;
}

.cta-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 56px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold);
  padding: 22px 44px;
  border: 1px solid var(--gold);
  transition: background 0.25s, color 0.25s;
  text-align: center;
  max-width: 100%;
  white-space: normal;
}

.cta-button:hover {
  background: transparent;
  color: var(--gold);
}

.cta-button .arrow { transition: transform 0.25s; }
.cta-button:hover .arrow { transform: translateX(4px); }

.cta-mechanism {
  margin-top: 36px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   AVISO LEGAL · pie editorial en dos columnas
   ═══════════════════════════════════════════════════════════════ */
.legal {
  padding: 80px 0 60px;
  border-top: 1px solid var(--hairline);
}

.legal-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.legal-content {
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-faint);
  columns: 2;
  column-gap: 56px;
  column-rule: 1px solid var(--hairline);
}

.legal-content p {
  margin-bottom: 14px;
  break-inside: avoid;
}

.legal-content h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 10px;
  break-after: avoid;
}

.legal-content h4:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  padding: 48px 0 40px;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  gap: 24px;
}

.footer-logo img {
  height: 28px;
  width: auto;
  opacity: 0.85;
}

.footer-info a {
  color: var(--text-faint);
  transition: color 0.2s;
}
.footer-info a:hover { color: var(--gold); }

/* Enlaces legales en footer */
.footer-legal-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.footer-legal-links a {
  color: var(--text-faint);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}

.footer-legal-links a:hover {
  opacity: 1;
  color: var(--gold);
}

@media (max-width: 720px) {
  .footer-legal-links { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMACIONES SUTILES
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  }

  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .container, .container-narrow { padding: 0 32px; }
  .cover { padding: 80px 0 90px; }
  section { padding: 80px 0; }
  .differentiation { padding: 90px 0; }

  .zona-grid { grid-template-columns: 1fr; gap: 40px; }
  .zona-plano { position: static; }

  .exits-grid { grid-template-columns: 1fr; }

  .legal-content { columns: 1; }
}

@media (max-width: 640px) {
  .container, .container-narrow { padding: 0 24px; }
  body { font-size: 16px; }     /* en móvil reducimos un punto */

  .meta-bar { padding: 14px 0; }
  .meta-logo img { height: 26px; }
  .meta-nav { gap: 16px; }
  .meta-doc-label { display: none; }    /* solo logo + CTA en móvil */

  .cover { padding: 60px 0 70px; }
  .cover-title { font-size: 44px; }
  .cover-subtitle { font-size: 17px; margin-bottom: 48px; }

  .returns-table thead th,
  .returns-table tbody td {
    padding: 14px 8px;
    font-size: 12px;
  }
  .returns-table tbody td { font-size: 13px; }
  .returns-table tbody td:first-child { font-size: 11px; }

  .exit-card-percent { font-size: 56px; }
  .faq-question { font-size: 17px; padding: 22px 0; gap: 16px; }

  .footer-inner { flex-direction: column; gap: 18px; text-align: center; }
}

@media print {
  .meta-bar, .cta-section { display: none; }
  body { background: white; color: black; }
}

/* ═══════════════════════════════════════════════════════════════
   FASES DE PARTICIPACIÓN · 3 cards + tabla escenarios (BORRADOR)
   ═══════════════════════════════════════════════════════════════ */
.phases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 880px) {
  .phases-grid { grid-template-columns: 1fr; gap: 16px; }
}

.phase-card {
  padding: 36px 30px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.phase-card--featured {
  border: 1.5px solid var(--gold);
  background: var(--gold-faint);
  position: relative;
}

.phase-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}

.phase-priority {
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
}

.phase-card--featured .phase-priority { color: var(--gold); }

.phase-pct {
  font-size: 0.45em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
}

.phase-priority-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.7;
  margin: 10px 0 28px;
}

.phase-data {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--hairline);
}

.phase-data li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 13px;
}

.phase-data li span {
  color: var(--text);
  opacity: 0.7;
}

.phase-data li strong {
  font-weight: 600;
  color: var(--text);
}

.phase-data li strong.phase-open {
  color: var(--gold);
}

.phase-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.85;
  margin: auto 0 0;
}

/* Tabla de escenarios por fase */
.phases-table-title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  margin: 64px 0 12px;
}

.phases-table-sub {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.8;
  max-width: 760px;
  margin: 0 0 28px;
}

.phases-table-wrapper {
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--hairline-2);
  overflow-x: auto;
}

.phases-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}

.phases-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
  padding: 18px 20px;
  text-align: right;
  border-bottom: 1px solid var(--hairline-2);
  white-space: nowrap;
}
.phases-table thead th:first-child { text-align: left; }

.phases-table tbody td {
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  padding: 18px 20px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: lining-nums;
}

.phases-table tbody td:first-child {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.phases-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

.phases-table tbody tr.highlight td {
  background: var(--gold-faint);
  color: var(--gold);
}
.phases-table tbody tr.highlight td:first-child { color: var(--gold); }

.phases-table tbody tr:last-child td { border-bottom: none; }

.phases-note {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.65;
  margin: 24px 0 0;
  max-width: 920px;
}

@media (max-width: 640px) {
  .phases-table thead th,
  .phases-table tbody td { padding: 14px 10px; font-size: 13px; }
  .phases-table tbody td { font-size: 15px; }
  .phases-table tbody td:first-child { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   COVER · badge de fase activa (BORRADOR fases)
   ═══════════════════════════════════════════════════════════════ */
.cover-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--gold);
  border-radius: 100px;
  background: var(--gold-faint);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 28px;
  align-self: flex-start;
}

.cover-phase-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold);
  animation: phase-pulse 2s infinite;
}

@keyframes phase-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(249, 200, 14, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(249, 200, 14, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 200, 14, 0); }
}

.cover-phase-badge-state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 12px;
  border-left: 1px solid var(--gold-line);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE MODEL · fórmula visual del reparto (BORRADOR fases)
   ═══════════════════════════════════════════════════════════════ */
.phase-model {
  margin-top: 40px;
  padding: 36px 40px;
  border: 1px solid var(--hairline-2);
  background: var(--bg-elevated);
}

.phase-model-title {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.phase-model-formula {
  display: flex;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

.phase-model-factor {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.phase-model-factor--result {
  border-color: var(--gold);
  background: var(--gold-faint);
}

.phase-model-factor-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.phase-model-factor-desc {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  opacity: 0.65;
}

.phase-model-op {
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
}

@media (max-width: 760px) {
  .phase-model-formula { flex-direction: column; gap: 10px; }
  .phase-model-op { justify-content: center; padding: 2px 0; }
  .phase-model-factor { min-width: 0; }
}

.phase-model-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text);
  opacity: 0.8;
  margin: 24px 0 0;
  max-width: 820px;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER FASES · banner de fase como 2ª fila dentro del header sticky
   ═══════════════════════════════════════════════════════════════ */
/* El header conserva su sticky original; movemos el padding al inner
   para que el banner quede pegado abajo a ancho completo */
.fases-header {
  padding: 0 !important;
}

.fases-header .meta-bar-inner {
  padding: 16px 0;
}

/* Banner de fase · franja dorada a ancho completo */
.phase-bar {
  background: #1f2937;                       /* azul-gris oscuro · distinto del header negro */
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.phase-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;                   /* label + botón juntos, centrados */
  gap: 96px;                                 /* espacio amplio entre label y botón */
  padding: 9px 0;                            /* fino · una sola línea */
}

@media (max-width: 640px) {
  .phase-bar-inner { gap: 20px; }
}

.phase-bar-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}

.phase-bar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: phase-bar-pulse 2s infinite;
}

@keyframes phase-bar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(249, 200, 14, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(249, 200, 14, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 200, 14, 0); }
}

.phase-bar-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}

.phase-bar-state {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.65;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Botón en formato Tadori · dorado sólido, rectangular */
.phase-bar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: var(--gold);
  color: #141414;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}

.phase-bar-cta:hover {
  background: #FFFFFF;
  color: #141414;
}

@media (max-width: 640px) {
  .phase-bar-inner { gap: 12px; }
  .phase-bar-label { font-size: 12px; gap: 8px; }
  .phase-bar-state { display: none; }
  .phase-bar-cta { padding: 7px 14px; font-size: 10px; letter-spacing: 0.08em; }
}

/* Eyebrow del cover con la fase destacada */
.cover-eyebrow-phase {
  color: var(--gold);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   COVER · dos cuadros de escenarios lado a lado (operación + Fase 1)
   ═══════════════════════════════════════════════════════════════ */
.cover-dual-scenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border-top: 1px solid var(--hairline-2);
  padding: 40px 0 24px;
  align-items: stretch;
}

.cover-dual-scenarios .metric-cell--wide {
  min-width: 0;          /* evita desbordamiento del grid item */
  box-sizing: border-box;
}

/* Cuadro Fase 1 · relleno del color del banner de fase (azul-gris) */
.metric-cell--phase {
  background: #1f2937 !important;
}

/* Números algo más contenidos para que quepan dos cuadros lado a lado */
.cover-dual-scenarios .metric-scenario-value {
  font-size: 38px;
}

.cover-dual-scenarios .metric-scenarios {
  gap: 24px;
}

.cover-dual-scenarios .metric-scenarios-title {
  white-space: normal;   /* permite que el título envuelva si hace falta */
}

/* Cuadro Fase 1 · resaltado en oro pleno (la fase abierta) */
.metric-cell--phase {
  border: 1.5px solid var(--gold) !important;
}

@media (max-width: 760px) {
  .cover-dual-scenarios { grid-template-columns: 1fr; }
}

/* Fila de 3 métricas pequeñas (sin el cuadro wide) */
.cover-metrics-row--three {
  grid-template-columns: 1fr 1fr 1fr;
  border-top: none;
  padding-top: 0;
}

@media (max-width: 760px) {
  .cover-metrics-row--three { grid-template-columns: 1fr; gap: 28px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE CARDS v2 · coeficiente grande + rentabilidad bruta (BORRADOR)
   ═══════════════════════════════════════════════════════════════ */
.phase-coef {
  font-family: var(--sans);
  font-size: 60px;
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}

.phase-card--featured .phase-coef { color: var(--gold); }

.phase-coef-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.7;
  margin: 12px 0 24px;
}

.phase-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.phase-gross {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(10, 14, 26, 0.05);        /* gris neutro · contrasta en card normal y featured */
  border-left: 2px solid var(--gold);
}

/* En la card destacada (fondo dorado), fondo blanco para que no sea oro sobre oro */
.phase-card--featured .phase-gross {
  background: #FFFFFF;
}

.phase-gross-value {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.phase-gross-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.7;
}

/* Tabla de fases dentro de Rentabilidades · centrada */
.phases-table-title.center { text-align: center; }
.phases-table-sub.center { text-align: center; margin-left: auto; margin-right: auto; }
.rentabilidades-section .phases-table-wrapper { max-width: 880px; margin-left: auto; margin-right: auto; }
.rentabilidades-section .phases-note { max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; }

/* % pequeño del coeficiente, asterisco y nota al pie de tarjetas (BORRADOR) */
.phase-coef-pct {
  font-size: 0.4em;
  font-weight: 400;
  vertical-align: super;
  margin-left: 2px;
}

.phase-gross-ast {
  color: var(--gold);
  font-size: 0.6em;
  font-weight: 600;
  vertical-align: super;
}

.phase-gross-label { white-space: nowrap; }

.phases-grid-note {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.65;
  margin: 24px 0 0;
  max-width: 920px;
}

.phases-grid-note sup { color: var(--gold); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   TABLA DUAL · bruta + partícipe por fase (BORRADOR)
   ═══════════════════════════════════════════════════════════════ */
.rentabilidades-section .phases-table-wrapper:has(.phases-table--dual) {
  max-width: 1080px;
}

.phases-table--dual th,
.phases-table--dual td {
  text-align: center !important;
  padding: 14px 12px;
}

.phases-table--dual thead tr:first-child th:first-child,
.phases-table--dual tbody td:first-child {
  text-align: left !important;
}

/* Cabecera de grupo (Fase 1/2/3) · solo la línea oro debajo, sin bordes laterales */
.phases-table--dual .phase-group {
  border-bottom: 2px solid var(--gold);
  font-size: 12px;
  color: var(--gold);
  opacity: 1;
  letter-spacing: 0.14em;
}

.phases-table--dual thead tr:last-child th {
  font-size: 10px;
  padding: 10px 12px;
}

/* Sin zebra de fila · no se sombrea ninguna fila */
.phases-table--dual tbody tr:nth-child(even) td {
  background: transparent;
}

/* Sombreado SOLO por columna · columnas partícipe en oro tenue, todas las filas igual */
.phases-table--dual .part {
  background: var(--gold-faint) !important;
}

.phases-table--dual td.part {
  font-weight: 600;
  color: var(--gold);
}

@media (max-width: 720px) {
  .phases-table--dual th,
  .phases-table--dual td { padding: 10px 8px; font-size: 12px; }
}

/* Fecha de salida debajo del texto + nota de fases (BORRADOR) */
.exit-card-date {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.exits-phase-note {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.7;
  margin: 20px 0 0;
}

.exits-phase-note strong { font-weight: 600; opacity: 1; }