@charset "UTF-8";
/* Cuenta trazable · V2. La información permanece visible sin movimiento. */
.motion-progress, .motion-filter-result, .motion-note { display: none; }
.motion-progress[hidden] { display: none !important; }

/* ── Ficha de promoción: lectura inmediata ── */
.compact-body { padding-top: 28px; }
/* ── La ficha abierta, a pantalla completa ──────────────────────────────
   Misma ficha, mismo orden, mismo diseno: solo cambia el contenedor. La lista
   se queda debajo sin moverse, asi que al cerrar apareces donde estabas. */
html.ficha-abierta { overflow: hidden; padding-right: var(--barra, 0px); }
/* scrollbar-gutter no cubre este caso: el navegador solo reserva el hueco
   mientras el desbordamiento es auto o scroll, y aqui es hidden. El ancho
   real se mide en engine.js justo antes de bloquear. */
/* La seccion que envuelve al ranking conserva la transformacion identidad
   con la que entro al hacer scroll, y cualquier transform —aunque sea la
   identidad— convierte al ancestro en el bloque contenedor de lo fijo: la
   capa se anclaba a la seccion y no a la ventana. Mientras hay una ficha
   abierta se anula; visualmente no cambia nada porque ya estaba en reposo. */
html.ficha-abierta #main .reveal { transform: none !important; transition-property: opacity !important; }
/* Sin la segunda declaracion, el paso de translateY(0) a none se animaba con
   la transicion de .reveal (700 ms) y, mientras tanto, la capa seguia
   anclada a la seccion: la ficha aparecia bajo la pieza de la ganadora y
   luego saltaba a la ventana. */
.detail-grid details.promo[open] {
  position: fixed; inset: 0; z-index: 200; margin: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--bg-0); border: 0;
  animation: ficha-entra .28s var(--ease) both;
}
@keyframes ficha-entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .detail-grid details.promo[open] { animation: none; } }

/* Pie: volver al listado o seguir por el ranking. Los dos bloques pesan lo
   mismo —misma altura, mismo reparto de tipografia— y lo unico que los separa
   es el relleno: el siguiente va macizo y la vuelta, perfilada. */
.ficha-pie {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 16px;
  margin: 26px 0 0; padding: 26px 0 8px; border-top: 1px solid var(--line-strong);
}
.fp-ant, .fp-ant-vacio { grid-column: 1 / -1; }
.fp-ant {
  justify-self: start; padding: 0; background: none; border: 0; color: var(--text-mute); cursor: pointer;
  font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-align: left; transition: color .2s;
}
.fp-ant:hover { color: var(--text); }
.fp-ant-vacio { display: none; }
.fp-cta {
  display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 92px;
  padding: 20px 26px; border: 1px solid var(--text); text-decoration: none; cursor: pointer; text-align: left;
  transition: background-color .2s, color .2s;
}
.fp-cta small { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.fp-cta b { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.05; text-transform: uppercase; letter-spacing: -.005em; }
.fp-sig { background: var(--text); color: #FFFFFF; }
.fp-sig small { color: var(--oro-1); }
.fp-sig:hover { background: #2E2E2E; }
.fp-vuelta { background: transparent; color: var(--text); }
.fp-vuelta small { color: var(--oro-3); }
.fp-vuelta:hover { background: var(--text); color: #FFFFFF; }
.fp-vuelta:hover small { color: var(--oro-1); }
.fp-cta:focus-visible, .fp-ant:focus-visible { outline: 2px solid var(--oro-3); outline-offset: 3px; }

/* ── Pases de la cabecera ────────────────────────────────────────────────
   Cuatro imagenes apiladas donde antes habia una. La que todavia no existe se
   queda en un hueco gris con su numero y el nombre de la promocion: se
   sustituye anadiendo la imagen, sin tocar el marcado. La regla .dc-head-bg de
   guia.css ya no encuentra a nadie —la imagen vive dentro de .dc-slide—. */
.dc-slides { position: absolute; inset: 0; z-index: -2; }
.dc-slide {
  position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s var(--ease);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.dc-slide.is-on { opacity: 1; }
/* Absoluta, no en flujo: el centrado del flex es para el texto del hueco y
   encogia la imagen en el eje transversal. */
.dc-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.detail-card:hover .dc-slide.is-on img { transform: scale(1.035); }
.dc-hueco, .dc-slide.sin-img { background: linear-gradient(150deg, #3A3E44 0%, #26292E 58%, #191B1F 100%); }
/* Sobre el hueco el velo sobra: esta hecho para rebajar una fotografia, y
   aqui solo ensucia el gris de navy. Se deja lo justo para el titular. */
.dc-head:has(.dc-slide.dc-hueco.is-on)::after { opacity: .28; }
.dc-slide.sin-img img { display: none; }
.dc-hueco-n { margin-top: -30px; font: 700 112px/1 var(--f-display); letter-spacing: -.02em; color: rgba(255,255,255,.2); }
.dc-hueco-t { padding: 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.46); text-align: center; }
/* A la izquierda: arriba a la derecha vive el +/- que abre y cierra la ficha
   (.dc-head::before), y los botones se le montaban encima. */
.dc-pases { position: absolute; top: 22px; left: 26px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.dc-pase-n { font: 400 13px/1 var(--f-display); letter-spacing: .08em; color: rgba(255,255,255,.82); }
.dc-pase-b {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,38,.34); border: 1px solid rgba(255,255,255,.4); color: #FFFFFF;
  font-family: var(--f-sans); font-size: 15px; line-height: 1; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dc-pase-b:hover { background: #FFFFFF; color: var(--text); border-color: #FFFFFF; }
.dc-pase-b:focus-visible { outline: 2px solid var(--oro-1); outline-offset: 2px; }
/* Crédito de la imagen visible: debajo de los pases, o en su sitio si no hay. */
.dc-cred { position: absolute; top: 24px; left: 26px; z-index: 3; max-width: 60%;
  font: 600 10px/1.3 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); text-shadow: 0 1px 6px rgba(0,0,0,.45); pointer-events: none; }
.dc-pases ~ .dc-cred { top: 64px; }

/* ── Ficha de promocion: primero el proyecto, despues el golf ──
   Tres bloques con el mismo ritmo: rotulo, titular, nota del bloque y su barra;
   dentro, los datos; debajo, los criterios que producen esa nota con la razon
   pegada a cada uno. Antes la razon vivia plegada dentro de un <details> y la
   tarjeta quedaba desconectada de lo que explicaba. */
.fb { padding: 22px 24px 24px; margin: 0 0 18px; border: 1px solid var(--line-strong); background: var(--bg-2); }
.fb-cab { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px 14px; }
/* El rotulo de bloque sin caja: manda la versalita, el cuerpo y el peso. El
   numero se queda en oro para que se lea como capitulo y no como dato. */
.account-step {
  align-self: center; display: inline-block; color: var(--text);
  font-size: 12px; font-weight: 700; letter-spacing: .22em; line-height: 1.2; text-transform: uppercase; white-space: nowrap;
}
.fb-golf .account-step { color: var(--verde-2); }
.fb-proyecto .account-step, .fb-cuenta .account-step { color: var(--oro-3); }
.fb-tit { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--text-mid); }
/* El divisor va al mismo cuerpo que la cifra y se distingue por el peso:
   Antonio light frente a la negrita. Nunca por tamano. */
.fb-nota { font: 700 38px/1 var(--f-display); letter-spacing: -.02em; color: var(--oro-3); white-space: nowrap; }
.fb-golf .fb-nota { color: var(--verde-2); }
.fb-nota small { margin-left: 3px; font: 300 1em/1 var(--f-display); letter-spacing: -.01em; color: var(--text-mute); }
.fb-cab .measure-track { grid-column: 1 / -1; height: 3px; margin-top: 2px; }
.fb-golf .fb-cab .measure-fill, .fb-golf .crit .measure-fill { background: var(--verde-2); }
.measure-track { grid-column: 1 / -1; position: relative; display: block; height: 6px; overflow: hidden; background: var(--bg-3); }
.measure-fill { display: block; width: 100%; height: 100%; background: var(--oro-2); transform: scaleX(var(--ratio, 0)); transform-origin: left; }

.fb-proyecto .project-data, .fb-golf .fb-golf-top { margin-top: 20px; }
.project-data dd.dd-texto { font-size: 13px; font-weight: 400; }
/* Tres columnas cuando hay cadena —de momento solo la #01— y dos cuando no. */
/* El campo de referencia abre el bloque a lo ancho, con su ficha sobre la
   imagen. Debajo van la cadena y los tres datos del entorno. */
.golf-hero {
  position: relative; margin: 20px 0 0; overflow: hidden; min-height: 320px;
  display: flex; align-items: flex-end; padding: 34px 32px 28px; background: #0F1726; color: #FFFFFF;
}
.golf-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.golf-hero:hover img { transform: scale(1.03); }
.golf-hero.sin-img { background: linear-gradient(150deg, #2F4A16 0%, #1E3A10 100%); }
.golf-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,38,.12) 0%, rgba(15,23,38,.04) 38%, rgba(15,23,38,.88) 100%);
}
.golf-hero figcaption { position: relative; z-index: 1; display: grid; gap: 7px; max-width: 760px; }
.gh-lbl { font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--verde-1); }
.gh-nombre { margin: 0; font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.005em; }
.gh-meta { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.9); }
.gh-meta .star-off { -webkit-text-stroke-color: var(--amarillo); }
.gh-palmares { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.fb-golf-top { display: grid; grid-template-columns: minmax(0,290px) minmax(0,1fr); gap: 18px; align-items: start; }
.fb-golf-top:not(:has(.adn)) { grid-template-columns: 1fr; }
/* La cadena manda en la columna izquierda y los datos y los criterios se
   reparten la derecha: si no, la fila quedaba con un palmo de blanco. */
.fb-golf-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.fb-golf-col .crit-tira { margin: 0; }
@media (min-width: 901px) { .fb-golf-top:has(.adn) .crit-tira { grid-template-columns: 1fr 1fr; } }

/* ── La cadena ──────────────────────────────────────────────────────────
   El entorno de golf de una promocion, dibujado desde sus propias relaciones.
   Sin norte y sin costa: de eso ya se ocupa el atlas. Aqui el radio son los
   minutos, el tamano son las estrellas y el hueco dice que hay que ser socio.
   Los tonos son los mismos que usa el atlas sobre fondo claro. */
.adn { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line-strong); background: var(--bg-0); }
.adn-svg { display: block; width: 100%; height: auto; }
.adn figcaption { padding: 10px 14px 12px; border-top: 1px solid var(--line); line-height: 1.4; text-transform: uppercase; color: var(--text-mute); }
.adn-anillo { fill: none; stroke: rgba(30,58,95,.13); stroke-width: 1; }
.adn-anillo-t { fill: var(--text-mute); font-family: var(--f-sans); font-size: 7.5px; font-weight: 600; letter-spacing: .1em;
  paint-order: stroke; stroke: var(--bg-0); stroke-width: 2.5px; stroke-linejoin: round; }
.adn-l { stroke: var(--verde-2); stroke-width: 1; opacity: .34; }
.adn-l-socios { stroke-dasharray: 2.5 3.5; opacity: .3; }
.adn-n { stroke-width: 0; transform-box: fill-box; transform-origin: center; }
.adn-s4 { fill: #2F4A16; } .adn-s3 { fill: #4A6B22; } .adn-s2 { fill: #6E9130; } .adn-s1 { fill: #9CB865; }
.adn-cerrado { fill: none; stroke-width: 1.5; }
.adn-cerrado.adn-s4 { stroke: #2F4A16; } .adn-cerrado.adn-s3 { stroke: #4A6B22; }
.adn-cerrado.adn-s2 { stroke: #6E9130; } .adn-cerrado.adn-s1 { stroke: #9CB865; }
.adn-fuera { opacity: .42; }
.adn-ref { fill: none; stroke: var(--oro-2); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.adn-core { fill: var(--text); transform-box: fill-box; transform-origin: center; }
.adn-core-t { fill: #FFFFFF; font-family: var(--f-display); font-size: 15px; font-weight: 700; text-anchor: middle; }
.adn-golpe { fill: transparent; }
.adn-g { cursor: pointer; outline: none; }
.adn-g .adn-n, .adn-g .adn-l, .adn-g .adn-ref { transition: opacity .2s, r .2s; }
/* Senalado: lo demas se apaga y el elegido se queda a plena tinta. */
.adn-svg.adn-activo .adn-g .adn-n { opacity: .18; }
.adn-svg.adn-activo .adn-g .adn-l { opacity: .1; }
.adn-svg.adn-activo .adn-g.adn-on .adn-n, .adn-svg.adn-activo .adn-g.adn-on .adn-ref { opacity: 1; }
.adn-svg.adn-activo .adn-g.adn-on .adn-l { opacity: .85; }
.adn-g:focus-visible .adn-golpe { stroke: var(--oro-3); stroke-width: 2; }
.adn figcaption { display: grid; gap: 5px; }
.adn-foco { min-height: 30px; font-size: 11px; line-height: 1.35; letter-spacing: .02em; text-transform: none; color: var(--text-mid); font-weight: 400; }
.adn-foco b { font-weight: 700; color: var(--text); }
.adn-leyenda { font-size: 9px; letter-spacing: .1em; }
.fb-golf-top .quick-facts { grid-template-columns: repeat(3, minmax(0,1fr)); margin: 0; }
.fb-golf-top .quick-facts > div + div { border-left: 1px solid var(--line-strong); }
.quick-facts { display: grid; border: 1px solid var(--line-strong); background: var(--bg-0); }
.quick-facts > div { min-width: 0; padding: 15px 18px; transition: background-color .2s, color .2s; }
/* Mismo gesto que las sub-tarjetas del proyecto: al pasar por encima se
   invierte. Las estrellas se quedan en su amarillo, que es el de siempre. */
.quick-facts > div:hover { background: #424242; }
.quick-facts > div:hover dt { color: rgba(255,255,255,.72); }
.quick-facts > div:hover dd { color: #FFFFFF; }
.quick-facts > div:hover dd small { color: rgba(255,255,255,.68); }
.quick-facts dt { margin-bottom: 6px; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); }
.quick-facts dd { margin: 0; font: 700 24px/1.05 var(--f-display); text-transform: uppercase; color: var(--text); }
.quick-facts dd small { display: block; margin-top: 5px; font: 400 11px/1.3 var(--f-sans); text-transform: none; letter-spacing: .02em; color: var(--text-mute); }

/* Cuatro criterios de proyecto en dos columnas y seis de golf en tres: asi
   ninguna fila se queda coja. */
.crit-tira { display: grid; grid-template-columns: 1fr; gap: 0 28px; margin: 14px 0 0; }
@media (min-width: 901px) {
  .fb-proyecto .crit-tira { grid-template-columns: 1fr 1fr; }
  .fb-golf .crit-tira { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 641px) and (max-width: 900px) { .crit-tira { grid-template-columns: 1fr 1fr; } }
.crit { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: baseline; gap: 0 10px; padding: 12px 0 13px; border-top: 1px solid var(--line-strong); }
.crit-cod { font: 700 10px/1.7 var(--f-sans); letter-spacing: .1em; color: var(--text-mute); }
.crit-lbl { font-size: 13px; line-height: 1.35; color: var(--text); }
.crit > strong { font: 700 20px/1 var(--f-display); color: var(--oro-3); }
.fb-golf .crit > strong { color: var(--verde-2); }
.crit > strong small { margin-left: 2px; font: 300 1em/1 var(--f-display); letter-spacing: -.01em; color: var(--text-mute); }
.crit .measure-track { grid-column: 2 / -1; height: 2px; margin-top: 8px; }
.crit > p { grid-column: 2 / -1; margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-mid); }

.fb-pie { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-strong); }
.fb-pie .project-rights { margin: 0 0 16px; }
/* Las etiquetas no decian que eran. El rotulo lo dice: son los rasgos que
   diferencian a esta promocion, incluido lo incomodo —ZEW lleva ahi su
   conflicto declarado—. */
.fb-rasgos { display: grid; gap: 9px; }
/* ── La cuenta, como marcador ──────────────────────────────────────────
   Era una linea de texto y se leia como un pie de pagina, cuando es el
   veredicto. Ahora es un marcador: los dos sumandos a la izquierda, cada uno
   con su barra, y el total dominando a la derecha. El reparto deja de contarse
   y se ve. Mismo fondo que los bloques de arriba: lo que le da rango es la
   escala del total, no un cambio de color. */
.fb-cuenta { display: grid; gap: 20px; padding: 26px 28px 28px; }
.cm { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px 40px; align-items: center; }
.cm-partes { display: grid; gap: 16px; min-width: 0; }
.cm-parte { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 4px 16px; }
.cm-lbl { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--text-mute); }
.cm-parte strong { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--text); }
.cm-parte strong small { margin-left: 2px; font-family: var(--f-display); font-size: 1em; font-weight: 300; letter-spacing: -.01em; color: var(--text-mute); }
.cm-parte .measure-track { grid-column: 1 / -1; height: 3px; background: var(--bg-3); margin-top: 6px; }
.cm-parte .measure-fill { background: var(--oro-2); }
.cm-parte.is-golf .measure-fill { background: var(--verde-2); }
.cm-total { display: grid; justify-items: end; gap: 12px; text-align: right; }
.cm-total strong { font-family: var(--f-display); font-weight: 700; font-size: clamp(58px, 6vw, 86px); line-height: .88; letter-spacing: -.025em; color: var(--oro-3); }
.cm-total strong small { margin-left: 2px; font-family: var(--f-display); font-size: 1em; font-weight: 300; letter-spacing: -.02em; color: var(--text-mute); }

/* ── Progressive disclosure ── */
.promo-sections { border-top: 1px solid var(--line); }
.promo-section { border-bottom: 1px solid var(--line); }
.promo-section > summary {
  display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px;
  min-height: 66px; padding: 13px 4px; cursor: pointer; list-style: none;
  font: 700 20px/1.05 var(--f-display); text-transform: uppercase; color: var(--text);
}
.promo-section > summary::-webkit-details-marker, .criterion > summary::-webkit-details-marker { display: none; }
.promo-section > summary > span {
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--oro-2);
  font: 700 13px/1 var(--f-sans); color: var(--oro-3);
}
.promo-section > summary > small { font: 600 11px/1.2 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }
.promo-section > summary::after { content: '+'; grid-column: 4; font: 400 28px/1 var(--f-sans); color: var(--oro-3); }
.promo-section[open] > summary::after { content: '\2212'; }
.promo-section > summary:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 4px; }
.promo-section-body { padding: 14px 0 30px 56px; }
.criteria-grid { display: grid; grid-template-columns: 3fr 2fr; align-items: start; gap: 22px; }
.criterion-group { border: 1px solid var(--line); background: #FFFFFF; }
.criterion-group h4 {
  display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 16px 18px;
  background: var(--oro-soft); font: 700 17px/1 var(--f-display); text-transform: uppercase;
}
.criterion-group.is-golf h4 { background: var(--verde-soft); }
.criterion-group h4 span { font: 700 18px/1 var(--f-sans); }
.criterion { border-top: 1px solid var(--line); }
.criterion > summary {
  display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px 12px; align-items: center;
  padding: 11px 14px; cursor: pointer; list-style: none; font-size: 12.5px; line-height: 1.25;
}
.criterion > summary .criterion-code { font-size: 10px; font-weight: 700; color: var(--text-mute); letter-spacing: .08em; }
.criterion > summary strong { font-size: 17px; color: var(--text); }
.criterion > summary strong small { font-size: 10px; color: var(--text-mute); }
.criterion > summary .measure-track { grid-column: 2 / 4; height: 4px; }
.criterion > summary:focus-visible { outline: 2px solid var(--oro-1); outline-offset: -2px; }
.criterion > p { margin: 0; padding: 0 14px 14px 56px; font-size: 12px; line-height: 1.45; color: var(--text-mid); }

/* Ocho sub-tarjetas sueltas sobre el gris del bloque, en vez de una rejilla
   con lineas: cada dato se lee como una pieza y no como una celda de tabla. */
.project-data { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0; }
.project-data > div { padding: 14px 16px 15px; background: var(--bg-0); border: 1px solid var(--line);
  transition: background-color .2s, border-color .2s, color .2s; }
/* Al pasar por encima la sub-tarjeta se invierte: gris al 74 % de negro y
   texto en blanco, con el rotulo un punto por debajo para que el dato siga
   mandando. */
.project-data > div:hover { background: #424242; border-color: #424242; }
.project-data > div:hover dt { color: rgba(255,255,255,.72); }
.project-data > div:hover dd { color: #FFFFFF; }
.project-data > div:hover dd small { color: rgba(255,255,255,.68); }
.project-data dt { margin-bottom: 5px; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--text-mute); }
.project-data dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
.project-data dd small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--text-mute); }
.project-rights { margin: 16px 0; padding: 14px 16px; background: var(--bg-1); font-size: 13px; line-height: 1.5; }
.account-footnote { margin: 16px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-mute); }
.project-warnings { margin: 16px 0 0; padding: 0; list-style: none; }
.project-warnings li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }

/* ── Créditos fuera de las fichas ── */
.image-credits { border: 1px solid var(--line); background: #FFFFFF; }
.image-credits > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px;
  cursor: pointer; list-style: none; font: 700 20px/1 var(--f-display); text-transform: uppercase;
}
.image-credits > summary::-webkit-details-marker { display: none; }
.image-credits > summary small { font: 600 11px/1 var(--f-sans); color: var(--text-mute); letter-spacing: .08em; }
.image-credits > summary:focus-visible { outline: 3px solid var(--oro-1); outline-offset: 3px; }
.image-credit-groups { display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; padding: 0 22px 24px; }
.image-credit-groups h3 { margin: 0; font: 700 20px/1 var(--f-display); text-transform: uppercase; }
.image-credit-groups .ic-grupo { min-width: 0; }
.image-credit-groups ul { margin: 0; padding: 0; list-style: none; }
.image-credit-groups li { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.35; }
.image-credit-groups li span { color: var(--text-mute); }
.image-credit-groups p { margin: 10px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); }
.image-credit-groups li em { font-style: normal; color: var(--text-mute); }
.image-credit-groups .ic-promos > li { gap: 6px; }
.image-credit-groups .ic-promos ol { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.image-credit-groups .ic-promos ol li { display: list-item; padding: 0; border: 0; color: var(--text-mid); }
.image-credit-groups .ic-promos ol li em::before { content: ' — '; }
.creditos-img { margin-top: 48px; }
.image-credit-groups a { color: var(--oro-3); }

/* ── Movimiento escritorio ── */
@media (min-width: 1024px) and (pointer: fine) {
  .motion-ready .motion-progress {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; height: 3px;
    z-index: 1000; pointer-events: none;
  }
  .motion-progress::after {
    content: ''; display: block; height: 100%; background: var(--oro-3);
    transform: scaleX(var(--motion-progress, 0)); transform-origin: left;
  }
  .motion-ready .motion-filter-result { display: block; margin: 12px 0; color: var(--text); font-size: 14px; }
  .motion-ready .motion-note { display: block; margin: 8px 0 14px; color: var(--text); font-size: 13px; line-height: 1.5; }
  .motion-ready caption.motion-note { display: table-caption; }
  .motion-running { will-change: transform, opacity, clip-path; }
  .hero-bottom { position: relative; }
  .hero-bottom::before {
    content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.22));
    transform-origin: left;
  }
  .hero-bottom > div { position: relative; }
  .hero-bottom > div::before { content: ''; position: absolute; top: -18px; left: 0; width: 1px; height: 9px; background: rgba(255,255,255,.8); }
  .account-panel.is-tracing::before { animation: account-trace 1.25s cubic-bezier(.2,.72,.2,1) both; }
}

@keyframes account-trace { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .46; } }

@media (max-width: 1023px), (pointer: coarse) {
  .account-panel { grid-template-columns: 1fr; }
  .account-panel::before { display: none; }
  .account-contributions { padding-top: 0; }
  .account-result { min-height: 150px; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .quick-facts > div:nth-child(2) { border-right: 0; }
  .quick-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .account-insights { grid-template-columns: 1fr; }
  .criteria-grid, .image-credit-groups { grid-template-columns: 1fr; }
  .project-data { grid-template-columns: 1fr 1fr; gap: 8px; }
  .promo-section-body { padding-left: 0; }
  .dc-pases { top: 14px; left: 20px; }
  .dc-cred { top: 16px; left: 20px; max-width: 70%; }
  .dc-pases ~ .dc-cred { top: 54px; }
  .ficha-pie { grid-template-columns: 1fr; gap: 12px; }
  .fp-cta { min-height: 78px; padding: 16px 20px; }
  .fb { padding: 18px 16px 20px; }
  .fb-cab { grid-template-columns: auto auto; }
  .fb-tit { grid-column: 1 / -1; order: 3; }
  .fb-nota { font-size: 30px; }
  .fb-golf-top { grid-template-columns: 1fr; }
  .fb-golf-top .quick-facts { grid-template-columns: 1fr; }
  .fb-golf-top .quick-facts > div + div { border-left: 0; border-top: 1px solid var(--line-strong); }
  .golf-hero { min-height: 240px; padding: 24px 20px 20px; }
  .adn-svg { max-width: 320px; margin: 0 auto; }
  .fb-cuenta { padding: 16px; }
  .fb-cuenta { padding: 20px; }
  .cm { grid-template-columns: 1fr; gap: 18px; }
  .cm-total { justify-items: start; text-align: left; }
}

@media (max-width: 640px) {
  .compact-body { padding-top: 14px; }
  .account-panel { padding: 16px; gap: 14px; }
  .account-contributions { grid-template-columns: 1fr; }
  .quick-facts { grid-template-columns: 1fr; }
  .quick-facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .quick-facts > div:last-child { border-bottom: 0; }
  .promo-section > summary { grid-template-columns: 38px 1fr auto; }
  .promo-section > summary > small { display: none; }
  .promo-section > summary::after { grid-column: 3; }
  .project-data { grid-template-columns: 1fr; }
}

/* Titular del hero: entrada carácter a carácter, en orden de lectura. La especificidad
   de dos clases gana a «.hero-title span» (guia.css) sin depender del orden de los <link>. */
.hero-title .hero-split { display: block; white-space: nowrap; }
/* Cada letra sube la suya y despeja antes de que arranque la siguiente. Con
   460 ms de recorrido y 14 de separacion habia treinta letras en el aire a la
   vez y el titular se leia como una ola; ahora hay dos. */
.hero-title .hero-char {
  display: inline-block; opacity: 0; transform: translateY(90%);
  animation: hero-char-in .22s cubic-bezier(.16,.84,.34,1) both;
  animation-delay: calc(var(--i, 0) * 68ms);
}
@keyframes hero-char-in { to { opacity: 1; transform: translateY(0); } }
/* En el móvil la línea más larga del titular de portada —«El ranking de obra
   nueva prime», 30 letras sin corte— medía 460 px a 38 px de cuerpo y ensanchaba
   la página entera: el iPhone dejaba desplazarla de lado. El cuerpo baja con el
   ancho de la pantalla para que las tres líneas se sigan leyendo como tres. */
@media (max-width: 600px) {
  #hero .hero-title { font-size: min(38px, 7vw); }
  /* El rango de precios se partía en «€500k–» / «16,5M»: va en una línea. */
  #kpiRango { font-size: min(40px, 7.4vw); white-space: nowrap; }
}

/* Vídeo de fondo del hero: sustituye a «.hero::before» solo cuando el motion.js lo activa
   (escritorio + puntero fino + sin preferencia de movimiento reducido). Con JS desactivado
   o fuera de esos casos queda «hidden» y se ve la imagen estática de siempre. */
.hero-video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}

@media (prefers-reduced-motion: reduce) {
  .motion-progress { display: none !important; }
  .account-panel::before, .measure-fill { animation: none !important; transition: none !important; }
  .hero-title .hero-char { animation: none !important; opacity: 1; transform: none; }
}

/* ── Empate de puesto ───────────────────────────────────────────
   Dos numeros 10 seguidos parecen un error de maquetacion si nada lo
   explica. En la tarjeta basta una marca corta junto al puesto; en la
   ficha se dice entero, con la nota que comparten. */
.dc-empate {
  flex: none; align-self: center; padding: 4px 8px 3px;
  font: 700 9px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase;
  /* Oro oscuro y no el medio: a 9 px el blanco sobre el oro medio se queda en
     3,0:1 y no pasa AA; sobre este llega a 4,9:1 y sigue leyendose dorado. */
  background: var(--oro-3); color: #FFFFFF; white-space: nowrap;
}
.cm-empate {
  display: block; margin-top: 8px; max-width: 30ch; font-size: 11.5px; line-height: 1.45;
  font-style: italic; color: var(--text-mute);
}
.cm-empate::before { content: '*'; margin-right: .4em; font-style: normal; }