/* =============================================================
   invalue — Viabilidad inmobiliaria
   1. Tokens
   ============================================================= */
:root {
  --navy-950: #080F1C;
  --navy-900: #0C1728;
  --navy-850: #101E35;
  --navy-800: #132343;
  --navy-700: #1C3157;
  --navy-600: #26406E;

  --gold:        #B99A5C;
  --gold-bright: #DAAB5E;
  --gold-deep:   #8E7440;

  --cream:    #F8F7F4;
  --cream-2:  #EFEBE2;

  --tx:       #F4F2ED;
  --tx-soft:  rgba(244,242,237,.68);
  --tx-mute:  rgba(244,242,237,.44);
  --hair:     rgba(244,242,237,.11);
  --hair-2:   rgba(244,242,237,.2);

  --ink:      #101E35;
  --ink-soft: rgba(16,30,53,.7);
  --ink-mute: rgba(16,30,53,.46);
  --ink-hair: rgba(16,30,53,.13);

  --glass:      rgba(244,242,237,.07);
  --glass-hi:   rgba(244,242,237,.13);

  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  --nav-h: 76px;
  --wrap: 1280px;
  --pad: clamp(1.15rem, 4vw, 2.75rem);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--navy-900);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--tx);
  background: var(--navy-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 700; letter-spacing: -.025em; line-height: 1.06; }
::selection { background: var(--gold); color: var(--navy-900); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .7rem 1.1rem; background: var(--cream); color: var(--navy-900);
  border-radius: 999px; font-weight: 700;
  transition: top .3s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Un idioma cada vez.
   Solo forzamos OCULTAR el idioma inactivo: así el visible conserva el display
   que le dé su propio componente (block, inline, flex…). Sin el !important,
   cualquier regla más específica (p. ej. `.sec-idx span { display: block }`)
   gana a esta y se acaban viendo los dos idiomas a la vez. */
:root:not([lang="ca"]) [data-ca] { display: none !important; }
:root[lang="ca"]       [data-es] { display: none !important; }

/* Accent word — simple, same type, brand gold */
.accent { color: var(--gold-bright); }

.sec-idx {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.sec-idx > span { color: var(--tx-mute); display: block; margin-top: .35rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }

/* Marca de capítulo: sustituye a la numeración por un icono */
.sec-mark { display: flex; }
.sec-mark-ico {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; flex: none;
  background: rgba(185,154,92,.12);
  border: 1px solid rgba(185,154,92,.28);
  color: var(--gold-bright);
}
.sec-mark-ico svg { width: 24px; height: 24px; }

/* Cabecera de capítulo: icono y titular en la misma línea, al margen izquierdo */
.sec-head { margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.sec-title { display: flex; align-items: center; gap: clamp(.85rem, 1.6vw, 1.25rem); }
.sec-title .sec-mark-ico { align-self: center; }
.sec-h2 { font-size: clamp(1.55rem, 2.9vw, 2.5rem); font-weight: 700; line-height: 1.14; max-width: 26ch; }
.sec-lede { margin-top: .85rem; color: var(--tx-soft); max-width: 62ch; font-size: clamp(.96rem, 1.15vw, 1.05rem); }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .7em;
  padding: .85rem 1rem .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 700; font-size: .92rem; letter-spacing: -.005em;
  transition: transform .5s var(--ease), background .35s, color .35s, box-shadow .5s var(--ease), border-color .35s;
  will-change: transform;
}
.btn-ico {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: transform .5s var(--ease), background .35s;
}
.btn-ico svg { width: 13px; height: 13px; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); transition-duration: .1s; }

.btn-light { background: var(--cream); color: var(--navy-900); }
.btn-light .btn-ico { background: var(--navy-900); color: var(--cream); }
.btn-light:hover { box-shadow: 0 20px 42px rgba(0,0,0,.34); }
.btn-light:hover .btn-ico { transform: rotate(45deg); }

.btn-gold { background: var(--gold); color: var(--navy-900); }
.btn-gold .btn-ico { background: rgba(8,15,28,.85); color: var(--gold-bright); }
.btn-gold:hover { background: var(--gold-bright); box-shadow: 0 20px 42px rgba(185,154,92,.3); }
.btn-gold:hover .btn-ico { transform: rotate(45deg); }

.btn-glass {
  background: var(--glass); color: var(--tx);
  border: 1px solid var(--hair-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: .85rem 1.5rem;
}
.btn-glass:hover { background: var(--glass-hi); border-color: var(--gold); color: var(--gold-bright); }
.btn-glass .btn-ico { background: rgba(244,242,237,.1); }
.btn-glass:hover .btn-ico { transform: rotate(45deg); }

.btn-sm { padding: .6rem .75rem .6rem 1.15rem; font-size: .84rem; }
.btn-sm .btn-ico { width: 25px; height: 25px; }
.btn-sm.btn-glass { padding: .6rem 1.15rem; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 120;
  padding-top: 1.1rem;
  transition: padding-top .45s var(--ease);
}
.nav.is-scrolled { padding-top: .55rem; }
.nav-inner {
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-logo { font-size: 1.24rem; font-weight: 800; letter-spacing: -.03em; color: var(--tx); flex: none; }
.nav-logo .a-mark { color: var(--gold-bright); }

.nav-pill {
  display: none; align-items: center; gap: .2rem;
  padding: .34rem;
  background: rgba(12,23,40,.5);
  border: 1px solid var(--hair);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
@media (min-width: 1020px) { .nav-pill { display: inline-flex; } }
.nav-link {
  padding: .55rem 1.05rem; border-radius: 999px;
  font-size: .87rem; font-weight: 600; color: var(--tx-soft);
  transition: background .35s var(--ease), color .35s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--tx); background: var(--glass); }
.nav-link.is-current { color: var(--navy-900); background: var(--cream); }

.nav-right { display: flex; align-items: center; gap: .6rem; flex: none; }
.lang {
  display: inline-flex; padding: .28rem;
  background: rgba(12,23,40,.5); border: 1px solid var(--hair);
  border-radius: 999px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lang button {
  padding: .4rem .72rem; border-radius: 999px;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; color: var(--tx-mute);
  transition: background .3s, color .3s;
}
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--navy-900); }
.nav .btn { display: none; }
@media (min-width: 720px) { .nav .btn { display: inline-flex; } }

.burger {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(12,23,40,.5); border: 1px solid var(--hair);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  position: relative; flex: none;
}
@media (min-width: 1020px) { .burger { display: none; } }
.burger::before, .burger::after {
  content: ""; position: absolute; left: 13px; right: 13px; height: 1.5px;
  background: var(--tx); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s;
}
.burger::before { top: 18px; }
.burger::after  { top: 25px; }
.burger.is-open::before { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open::after  { transform: translateY(-3.5px) rotate(-45deg); }

.nav-sheet {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(8,15,28,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.nav-sheet[data-open="true"] { opacity: 1; pointer-events: auto; }
.nav-sheet a {
  font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 700; letter-spacing: -.02em;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.nav-sheet[data-open="true"] a { opacity: 1; transform: none; }
.nav-sheet a:nth-child(1) { transition-delay: .06s; }
.nav-sheet a:nth-child(2) { transition-delay: .11s; }
.nav-sheet a:nth-child(3) { transition-delay: .16s; }
.nav-sheet a:nth-child(4) { transition-delay: .21s; }
.nav-sheet a:hover { color: var(--gold-bright); }

/* =============================================================
   6. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-block: calc(var(--nav-h) + 2rem) clamp(1.4rem, 3vw, 2rem);
  overflow: hidden; isolation: isolate;
}
/* En pantallas anchas limitamos la altura a algo cercano al formato de la
   imagen (16:9). Si la portada ocupara toda la altura, `object-fit: cover`
   recortaría los laterales y el render se vería ampliado. */
@media (min-width: 1024px) {
  .hero { min-height: max(600px, min(100svh, 58vw)); }
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; will-change: transform; }

/* Progressive scrim: opaque behind the text, uncovering the image to the right */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8,15,28,.94) 0%,
      rgba(8,15,28,.90) 18%,
      rgba(8,15,28,.74) 36%,
      rgba(8,15,28,.44) 55%,
      rgba(8,15,28,.16) 74%,
      rgba(8,15,28,.04) 100%),
    linear-gradient(180deg,
      rgba(8,15,28,.55) 0%,
      rgba(8,15,28,.12) 26%,
      rgba(8,15,28,.10) 55%,
      rgba(8,15,28,.72) 92%,
      rgba(8,15,28,.88) 100%);
}
@media (max-width: 860px) {
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(8,15,28,.86) 0%,
        rgba(8,15,28,.62) 30%,
        rgba(8,15,28,.55) 55%,
        rgba(8,15,28,.86) 84%,
        rgba(8,15,28,.94) 100%);
  }
}
.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* width:100% is required — `.wrap` sets margin-inline:auto, which makes a
   column-flex child shrink-to-fit and centre instead of filling the row. */
.hero-grid { flex: 1; width: 100%; display: flex; align-items: center; }
.hero-foot { width: 100%; }
.hero-body { max-width: 620px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .46rem .95rem .46rem .78rem; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hair-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .76rem; font-weight: 700; letter-spacing: .02em; color: var(--tx-soft);
}
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); flex: none; }

.hero-h1 {
  margin-top: 1.3rem;
  font-size: clamp(2.4rem, 5.4vw, 4.5rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
}
.hero-sub {
  margin-top: 1.25rem; max-width: 44ch;
  font-size: clamp(.97rem, 1.15vw, 1.06rem);
  color: var(--tx-soft);
}
.hero-cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .7rem; }

.hero-foot { margin-top: 2rem; width: 100%; }
.hero-strip { display: grid; gap: .6rem; }
@media (min-width: 760px) { .hero-strip { grid-template-columns: repeat(3, 1fr); gap: .7rem; } }
.hero-cell {
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: rgba(12,23,40,.42);
  border: 1px solid var(--hair);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background .45s var(--ease), border-color .45s, transform .55s var(--ease);
}
.hero-cell:hover { background: rgba(185,154,92,.13); border-color: rgba(185,154,92,.4); transform: translateY(-4px); }
.hero-cell-k { font-size: .68rem; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.hero-cell-t { margin-top: .4rem; font-size: .96rem; font-weight: 700; letter-spacing: -.015em; }
.hero-cell-d { margin-top: .15rem; font-size: .8rem; color: var(--tx-mute); }

/* =============================================================
   7. Section shells
   ============================================================= */
.sec { position: relative; padding-block: clamp(2.4rem, 3.8vw, 3.2rem); }
.sec-dark   { background: var(--navy-900); }
.sec-dark-2 { background: var(--navy-850); }

/* =============================================================
   8. About (01)
   ============================================================= */
.about-cards { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .about-cards { grid-template-columns: 1.05fr .95fr; gap: 1.3rem; } }
.card-cream {
  background: var(--cream); color: var(--ink);
  border-radius: var(--r-lg); padding: clamp(1.7rem, 3.2vw, 2.6rem);
}
.card-cream h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -.02em; }
.card-cream p { margin-top: 1rem; color: var(--ink-soft); font-size: .97rem; }
.card-cream p + p { margin-top: .85rem; }
.card-sign { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--ink-hair); }
.card-sign b { display: block; font-weight: 800; letter-spacing: -.01em; }
.card-sign span { font-size: .85rem; color: var(--ink-mute); }

.card-glass {
  border-radius: var(--r-lg); padding: clamp(1.7rem, 3.2vw, 2.6rem);
  background: linear-gradient(160deg, rgba(244,242,237,.07), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
}
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
.stat-v { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; color: var(--gold-bright); }
.stat-l { margin-top: .2rem; font-size: .8rem; color: var(--tx-mute); line-height: 1.4; }

/* =============================================================
   9. Switch propietario / inversor (02)
   ============================================================= */
.switch {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  padding: .36rem;
  background: rgba(8,15,28,.5);
  border: 1px solid var(--hair);
  border-radius: 999px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  max-width: 520px;
  margin-inline: auto;                 /* centrado */
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}
.switch-thumb {
  position: absolute; top: .36rem; bottom: .36rem; left: .36rem;
  width: calc(50% - .51rem);
  border-radius: 999px; background: var(--gold);
  transition: transform .55s var(--ease);
  z-index: 0;
}
.switch[data-pos="1"] .switch-thumb { transform: translateX(calc(100% + .3rem)); }
.switch-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem .9rem; border-radius: 999px;
  font-size: .9rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--tx-soft);
  transition: color .4s var(--ease);
}
.switch-btn svg { width: 17px; height: 17px; flex: none; }
.switch-btn[aria-selected="true"] { color: var(--navy-900); }

.view { display: none; }
.view.is-active { display: block; animation: viewIn .6s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.view-lede {
  margin-top: .9rem;
  color: var(--tx-soft); max-width: 64ch; font-size: clamp(.96rem, 1.15vw, 1.05rem);
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
}

/* ---- Dos columnas dentro de cada perfil: texto+fichas | carrusel ---- */
/* Las dos columnas comparten altura: el carrusel estira hasta igualar
   el bloque de texto + fichas de la izquierda. */
.vsplit { display: grid; gap: 1.4rem; align-items: stretch; }
@media (min-width: 1080px) {
  .vsplit { grid-template-columns: 1fr 1.06fr; gap: 1.6rem; }
  /* La maqueta baja hasta el borde de la seccion, ocupando tambien su relleno
     inferior. El margen negativo iguala ese relleno, asi que la imagen se
     apoya en la linea donde acaba el bloque sin estirar la fila. */
  /* Sin desplazamientos: la columna de la maqueta acaba donde acaba la del
     texto, y como la ficha de fases es lo ultimo de esa columna, la base de
     la maqueta queda a su misma altura. */
}
.vsplit-l, .vsplit-r { min-width: 0; display: flex; flex-direction: column; }
/* El carrusel llena la columna derecha con `flex`, nunca con `height:100%`:
   un porcentaje sobre una altura que a su vez depende del contenido crea un
   bucle de cálculo y la sección se dispara. */
.vsplit-r > .slider { flex: 1; }
/* Las fichas de la izquierda crecen hasta el mismo fondo que la tarjeta. */
.vsplit-l > .tl { flex: none; align-content: start; }

/* ---- Maqueta flotante del perfil ---------------------------------- */
/* El PNG viene recortado sobre fondo transparente: no lleva marco ni
   tarjeta, solo un halo detras y una sombra eliptica que lo apoya en el
   aire. El balanceo y la sombra van sincronizados en el mismo ciclo. */
.vsplit-r > .pfloat { flex: 1; }
.pfloat {
  position: relative; margin: 0; isolation: isolate; overflow: visible;
  /* `flex-end` apoya la maqueta en el fondo de la columna, que es donde
     acaba tambien el bloque de texto: las dos pestanas quedan alineadas por
     abajo en vez de flotar cada una a su altura. */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: clamp(.6rem, 2vw, 1.4rem) 0 0;
  min-height: clamp(230px, 30vw, 400px);
}
/* Sombra de apoyo: elipse muy difusa, sin ella la maqueta parece pegada */
.pfloat::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 46%; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(3, 8, 16, .6), rgba(3, 8, 16, 0) 72%);
  opacity: .7;
}
/* Las dos maquetas no comparten proporcion (una es apaisada y la otra
   vertical). Con ancho y alto en `auto` y un tope en cada eje, el navegador
   reduce la que haga falta conservando su forma: entran enteras en la misma
   caja, sin recorte y sin que la pagina de un salto al cambiar de perfil. */
.pfloat img {
  position: relative; z-index: 1;
  width: auto; height: auto;
  max-width: 100%;
  max-height: clamp(250px, 33vw, 440px);
  object-fit: contain; display: block;
  filter: drop-shadow(0 26px 40px rgba(3, 8, 16, .5));
}

/* Cada caso remata con la puerta de entrada a su herramienta: el local va al
   test de cambio de uso y el solar a la calculadora. */
.case-cta { margin-top: 1.9rem; display: flex; justify-content: center; }
.case-cta .btn { justify-content: center; text-align: center; }

/* El comparador dentro de una ficha de caso. El de Activos va absoluto sobre
   su escenario; aqui la foto ES la celda, asi que se coloca en flujo y hereda
   el radio de la tarjeta. Se mantiene en color: en un caso real el antes y el
   despues ya contrastan solos y el gris restaria credibilidad a la foto. */
/* Doble clase a proposito: la regla generica `.ba` vive mas abajo en la hoja
   y, a igual peso, ganaria por orden dejando la foto absoluta fuera de la
   rejilla. `.case-media.ba-caso` pesa mas y no depende de donde este escrita. */
.case-media.ba-caso {
  position: relative; inset: auto; opacity: 1;
  border-radius: var(--r-md); overflow: hidden;
}
/* El antes en blanco y negro y el resultado en color: el salto se lee de
   un vistazo, sin tener que comparar detalles. */
.case-media.ba-caso .ba-a { filter: grayscale(1) contrast(1.04); }
.case-media.ba-caso img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-media.ba-caso .ba-lb { top: .7rem; font-size: .62rem; padding: .3rem .7rem; }
.case-media.ba-caso .ba-lb-a { left: .7rem; }
.case-media.ba-caso .ba-lb-b { right: .7rem; }

/* La maqueta del inversor es casi cuadrada y la del propietario apaisada: a
   la misma altura la primera cubre menos superficie y se ve mas pequena. Se
   le da algo mas de alto para que las dos pesen igual en pantalla. */
/* Su maqueta es casi cuadrada y la del propietario apaisada: a igual altura
   cubre menos superficie y se ve mas pequena, asi que va un punto mas alta.
   Crece hacia arriba, que abajo esta clavada al fondo de la ficha de fases. */
#perfiles [data-view="inv"] .pfloat img { max-height: clamp(280px, 36vw, 480px); }

/* ---- Recorrido del inversor ---------------------------------------- */
/* Mismo mecanismo que el del propietario, con tres pasos en vez de cuatro y
   sin medidor: en el paso 02 la ficha aloja las tres notas del analisis. */
.tline-inv .tline-dot[data-tstep="1"] { --paso: #E0705B; }
.tline-inv .tline-dot[data-tstep="2"] { --paso: #E29A55; }
.tline-inv .tline-dot[data-tstep="3"] { --paso: #79C387; }
.tline-inv .tline-track i {
  background: linear-gradient(90deg, #E0705B 0%, #E0705B 7%, #E29A55 50%, #79C387 93%, #79C387 100%);
}
/* Sin medidor al lado, la ficha ocupa todo el ancho */
/* El carril generico reparte cuatro columnas; aqui solo hay tres pasos y sin
   esto quedaban apretados a la izquierda con un tramo muerto a la derecha.
   Con tres columnas iguales los centros caen en 1/6, 1/2 y 5/6, y la barra se
   recorta al mismo voladizo que la del propietario. */
.tline-inv .tline-rail { grid-template-columns: repeat(3, 1fr); }
.tline-inv .tline-track { left: 10%; right: 10%; }
.tline-inv .tline-stage { display: block; }
.tline-inv .tline-panel > .tl-3 { margin-top: .8rem; }
/* Las tres notas, compactas: tienen que caber en el alto de una ficha. El
   icono va al lado del titulo, no encima: apilado se comia 36px de alto. */
.tline-inv .tl-3 .tl-step {
  padding: .6rem .75rem .7rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; align-items: center;
}
.tline-inv .tl-3 .tl-ico { grid-row: 1; width: 26px; height: 26px; margin-bottom: 0; }
.tline-inv .tl-3 .tl-ico svg { width: 13px; height: 13px; }
.tline-inv .tl-3 .tl-t { grid-row: 1; font-size: .82rem; }
.tline-inv .tl-3 .tl-d {
  grid-column: 1 / -1; margin-top: .3rem;
  font-size: .74rem; line-height: 1.4;
}
/* Por debajo de 560px las tres notas se apilan y el paso 02 se dispara: el
   minimo sube para que los tres pasos sigan midiendo lo mismo tambien aqui. */
@media (max-width: 559px) {
  .tline-inv .tline-stage { min-height: 400px; }
}

/* ---- Casos en su propia seccion, a todo el ancho ------------------- */
/* Con el carrusel fuera de la columna estrecha caben dos columnas:
   la foto a la izquierda y la ficha con la linea de fases a la derecha. */
.sec-casos .sec-head { margin-bottom: clamp(1.1rem, 2vw, 1.6rem); }
@media (min-width: 1080px) {
  /* En el HTML la foto va antes que el texto (en movil manda ella). Aqui se
     invierte con `order`: el relato entra por la izquierda y la imagen cierra
     por la derecha, que es como se lee la ficha. */
  .sec-casos .case-slide,
  .sec-casos .an-slide {
    display: grid; grid-template-columns: .92fr 1.08fr;
    gap: 1.5rem; align-items: stretch;
  }
  /* Columna flexible en las dos: sin esto el `margin-top: auto` de las cifras
     no tiene contra que empujar y el bloque se queda a media tarjeta. */
  .sec-casos .case-body,  .sec-casos .an-body  {
    order: 1; padding: .1rem 0 .2rem;
    display: flex; flex-direction: column;
  }
  /* La ficha respira: el relato, la linea de fases, las cifras y el boton
     estaban pegados unos a otros y no se distinguian como cuatro pasos. */
  .sec-casos .case-slide,
  .sec-casos .an-slide { min-height: 500px; }
  /* Nada de `aspect-ratio` aqui: con la celda estirada la foto calcularia su
     ancho a partir de la altura de fila, se saldria de su columna y asomaria
     por encima de la tarjeta vecina del carrusel. La altura la manda la fila. */
  .sec-casos .case-media, .sec-casos .an-media {
    order: 2; align-self: stretch;
    aspect-ratio: auto; width: 100%; min-width: 0; height: auto;
  }
  .sec-casos .case-media.is-dual { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
}

/* Remate del bloque del inversor: los tres analisis y, debajo, la puerta. */
.tl-cta { margin-top: 1.2rem; display: flex; justify-content: center; }

/* El bloque de cifras y el boton se apoyan en la parte baja de la ficha: el
   hueco sobrante queda entre la linea de fases y ellos, no colgando debajo. */
.sec-casos .case-nums { margin-top: auto; }

/* ---- Timeline (propietario) ---- */
.tl { display: grid; gap: .9rem; }
@media (min-width: 560px)  { .tl { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .tl { grid-template-columns: 1fr 1fr; gap: 1rem; } }
/* Tecnico, juridico y financiero son tres bloques del mismo peso: en fila se
   leen como un metodo de tres partes, apilados parecian una lista de pasos. */
.tl-3 { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .tl-3 { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
@media (min-width: 1080px) { .tl-3 { grid-template-columns: repeat(3, 1fr); gap: .9rem; align-content: start; } }
.tl-step {
  position: relative; padding: 1.15rem 1.2rem 1.25rem;
  border-radius: var(--r-md);
  background: rgba(244,242,237,.04);
  border: 1px solid var(--hair);
  transition: border-color .5s var(--ease), background .5s, transform .6s var(--ease);
}
.tl-ico {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(185,154,92,.13); border: 1px solid rgba(185,154,92,.26); color: var(--gold-bright);
  margin-bottom: .9rem;
}
.tl-ico svg { width: 17px; height: 17px; }
.tl-step:hover { transform: translateY(-5px); border-color: rgba(185,154,92,.36); background: rgba(185,154,92,.06); }
.tl-bar { height: 3px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.tl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy-600), var(--gold)); width: 0; transition: width 1.2s var(--ease); }
.tl.is-revealed .tl-bar i, .tl-step.is-revealed .tl-bar i { width: var(--w, 33%); }
.tl-n { margin-top: .9rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.tl-t { margin-top: .4rem; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.tl-d { margin-top: .4rem; font-size: .84rem; color: var(--tx-mute); }
.tl-m { margin-top: .85rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  padding: .3rem .7rem; border-radius: 999px; font-size: .71rem; font-weight: 700;
  background: var(--glass); border: 1px solid var(--hair);
}
.chip-up   { color: #96C79A; border-color: rgba(150,199,154,.28); }
.chip-down { color: #D7967F; border-color: rgba(215,150,127,.28); }

/* =============================================================
   9b. El método invalue — círculos de puntuación
   ============================================================= */
.method { overflow: hidden; }
.method-glow {
  position: absolute; inset: -25% -10% auto -10%; height: 85%; z-index: 0; pointer-events: none;
  background: radial-gradient(42% 44% at 50% 42%, rgba(185,154,92,.18), transparent 72%);
  filter: blur(110px);
}
.method .wrap { position: relative; z-index: 1; }

/* Imagen del método + los tres bloques en columna */
.msplit { display: grid; gap: 1.2rem; align-items: stretch; }
@media (min-width: 980px) { .msplit { grid-template-columns: .82fr 1.18fr; gap: 1.4rem; } }

.mfigure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--hair);
  min-height: 260px;
}
.mfigure img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 980px) { .mfigure img { position: absolute; inset: 0; } }
.mfigure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,15,28,.15) 0%, transparent 40%, rgba(8,15,28,.85) 100%);
}
.mfigure figcaption {
  position: absolute; z-index: 2; left: 1.2rem; right: 1.2rem; bottom: 1.1rem;
  font-size: .84rem; font-weight: 700; color: var(--tx);
}

.mlist { display: grid; gap: .6rem; }
.mrow {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center;
  padding: .75rem 1.2rem; border-radius: var(--r-md);
  background: rgba(244,242,237,.04); border: 1px solid var(--hair);
  transition: transform .6s var(--ease), border-color .5s, background .5s;
}
.mrow:hover { transform: translateY(-4px); border-color: rgba(185,154,92,.38); background: rgba(185,154,92,.055); }
@media (max-width: 559px) { .mrow { grid-template-columns: 1fr; gap: .9rem; justify-items: center; text-align: center; } }
.mrow-t { display: flex; align-items: center; gap: .6rem; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 559px) { .mrow-t { justify-content: center; } }
.mrow-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: rgba(185,154,92,.13); border: 1px solid rgba(185,154,92,.26); color: var(--gold-bright);
}
.mrow-ico svg { width: 15px; height: 15px; }
.mrow-d { margin-top: .35rem; font-size: .88rem; color: var(--tx-mute); }
.mrow-list { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .32rem; }
@media (max-width: 559px) { .mrow-list { justify-content: center; } }
.mrow-list li {
  font-size: .71rem; line-height: 1.3; color: var(--tx-soft);
  padding: .24rem .58rem; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--hair);
}

.ring-wrap { position: relative; width: 104px; aspect-ratio: 1; flex: none; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: rgba(244,242,237,.09); stroke-width: 11; }
.ring-fill {
  fill: none; stroke: var(--navy-600); stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 477.52; stroke-dashoffset: 477.52;
}
.ring-val {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  font-size: 1.65rem; font-weight: 800; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.ring-val sup { font-size: .42em; font-weight: 700; color: var(--tx-mute); vertical-align: super; margin-left: .06em; }

.method-foot {
  margin-top: clamp(1.2rem, 2vw, 1.7rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem;
  text-align: center;
}
.method-note { font-size: .8rem; color: var(--tx-mute); }

/* =============================================================
   10. Slider (casos / análisis)
   ============================================================= */
/* El carrusel ES la tarjeta: el rótulo y las flechas van dentro de ella. */
.slider {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(244,242,237,.07), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
  padding: 1rem 1rem .8rem;
}
.slider-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 .3rem .9rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--hair);
}
.slider-title { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--tx-soft); }
.slider-title.is-accent { color: var(--gold-bright); }
.slider-nav { display: flex; align-items: center; gap: .5rem; }
.sl-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--hair-2); color: var(--tx);
  transition: background .35s, border-color .35s, color .35s, transform .35s var(--ease);
}
.sl-arrow svg { width: 15px; height: 15px; }
.sl-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.sl-arrow:disabled { opacity: .32; cursor: default; }
.sl-arrow:disabled:hover { background: var(--glass); border-color: var(--hair-2); color: var(--tx); transform: none; }
.sl-count { font-size: .82rem; font-weight: 700; color: var(--tx-mute); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.sl-count b { color: var(--tx); }

.slider-track {
  flex: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 1rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } }
.slider-track > * { scroll-snap-align: start; }

.slider-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.1rem; }
.sl-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--hair-2);
  transition: width .45s var(--ease), background .35s;
}
.sl-dot.is-active { width: 26px; background: var(--gold); }

/* ---- Case slide (propietario) ----
   Vive dentro de la columna derecha, así que apila siempre: primero el texto
   (column-reverse) y debajo la imagen. */
/* Las diapositivas ya no llevan tarjeta propia: la tarjeta es el carrusel. */
/* Que fase se esta mirando: llena el hueco de la esquina del panel */
.tline-fase {
  display: block; margin-bottom: .35rem;
  font-size: .63rem; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold-bright);
}

/* Llamada a la accion del propietario: perfilado en el naranja de la
   primera fase, para que no compita con el dorado de la barra superior */
.btn-orange {
  background: transparent;
  border: 1.5px solid #E29A55;
  color: #E9B37A;
}
.btn-orange .btn-ico { background: rgba(226, 154, 85, .16); color: #E9B37A; }
.btn-orange:hover { background: #E29A55; border-color: #E29A55; color: var(--navy-900); }
.btn-orange:hover .btn-ico { background: rgba(12, 23, 40, .18); color: var(--navy-900); }

.view-cta { margin-top: 0; }

.case-slide {
  /* column-reverse + flex-start ancla el contenido abajo: la imagen y la
     linea de fases caen siempre al mismo nivel y el hueco sobrante queda
     arriba, aunque un caso tenga el texto mas largo que otro. */
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  min-width: 0;
}
.case-media { position: relative; aspect-ratio: 2.6/1; flex: none; border-radius: var(--r-md); overflow: hidden; }
.case-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dos imagenes en la misma tarjeta: el antes y el resultado, lado a lado */
/* Tambien en movil las dos mitades van verticales: con la proporcion
   normal de la tarjeta saldrian dos franjas de 159x123 y el solar en
   esquina no se leeria. */
.case-media.is-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 1.55/1; }
.case-half { position: relative; overflow: hidden; min-width: 0; }
.case-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-tag {
  position: absolute; z-index: 2; left: .6rem; top: .6rem;
  padding: .3rem .62rem; border-radius: 999px;
  background: rgba(8, 15, 28, .74); border: 1px solid var(--hair-2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .63rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-soft);
}
.case-tag.is-after { color: var(--navy-900); background: var(--gold); border-color: var(--gold); }

.case-badge {
  position: absolute; z-index: 2; left: 1rem; top: 1rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: rgba(8,15,28,.72); border: 1px solid var(--hair-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .71rem; font-weight: 800; letter-spacing: .03em; color: var(--tx-soft);
}
.case-badge.is-real { color: var(--navy-900); background: var(--gold); border-color: var(--gold); }
.case-body {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: .2rem .4rem 1.2rem;
}
.case-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }
.case-title { margin-top: .55rem; font-size: clamp(1.2rem, 2vw, 1.6rem); letter-spacing: -.03em; }
.case-text { margin-top: .8rem; margin-bottom: .5rem; color: var(--tx-soft); font-size: .93rem; line-height: 1.62; }
/* Cifras del caso, dentro de la imagen: la foto es el fondo del dato */
/* Las cifras bajaron al pie de la ficha: ya no flotan sobre la foto, asi que
   no necesitan ni sombra de texto ni desenfoque para leerse. */
.case-nums {
  position: static; margin: 1.9rem 0 0;
  /* `auto` empuja las cifras y el boton al fondo de la tarjeta */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: .6rem; padding: .7rem .85rem .75rem;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(244,242,237,.06), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
}
.case-nums > div {
  min-width: 0; display: flex; flex-direction: column; gap: .02rem;
  align-items: center; justify-content: flex-start; text-align: center;
}
.case-nums em {
  font-style: normal; font-size: .6rem; font-weight: 600; line-height: 1.15;
  color: var(--tx-faint); letter-spacing: .01em;
}

/* Hasta donde ha llegado el propietario. Las cuatro fases son siempre las
   mismas; lo que cambia es cuantas ha recorrido y el valor desbloqueado. */
.cline {
  list-style: none; margin: 1.5rem 0 0; padding: .3rem 4% .15rem;
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-start;
}
/* La barra va de centro a centro del primer y del ultimo punto */
.cline::before,
.cline::after {
  content: ""; position: absolute; height: 2px; border-radius: 2px;
  /* centro exacto de los circulos: padding + fila "Fase N" + hueco + medio circulo */
  top: calc(.3rem + .54rem + .16rem + 9px);
  /* Con cuatro columnas iguales dentro de un relleno del 4%, el centro del
     primer circulo cae en el 15,5% y el del ultimo en el 84,5%. La barra va
     justo de uno a otro, sin sobresalir ni quedarse corta. */
  left: 15.5%; right: 15.5%;
}
.cline::before { background: var(--hair); }
.cline::after {
  background: linear-gradient(90deg, #E0705B 0%, #E29A55 34%, #C7C059 62%, #79C387 100%);
  clip-path: inset(0 calc(100% - var(--rev, 0%)) 0 0);
}
.cline li {
  /* Cuatro columnas iguales: con `flex: 0 1 auto` cada hito ocupaba lo que
     media su rotulo y los centros quedaban a distancias distintas. */
  position: relative; z-index: 1; min-width: 0; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: .16rem;
  text-align: center;
}
/* Los cuatro hitos centran su contenido por igual. Antes el primero y el
   ultimo se pegaban a su borde, asi que sus circulos no caian en el centro de
   la columna: las distancias salian 182-128-182 y la barra no los alcanzaba. */
.cline-v {
  font-size: .74rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--tx-faint); font-variant-numeric: tabular-nums; line-height: 1;
}
.cline-d {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .55rem; font-weight: 800; letter-spacing: .01em;
  background: var(--navy-800); border: 1.5px solid var(--hair);
  color: var(--tx-faint);
}
.cline-f {
  font-size: .54rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--tx-faint); line-height: 1;
}
.cline-n { font-size: .69rem; font-weight: 600; color: var(--tx-faint); line-height: 1.15; }

.cline li[data-f="1"] { --paso: #E0705B; }
.cline li[data-f="2"] { --paso: #E29A55; }
.cline li[data-f="3"] { --paso: #C7C059; }
.cline li[data-f="4"] { --paso: #79C387; }

.cline li.is-done .cline-d { border-color: var(--paso); color: var(--tx); }
.cline li.is-done .cline-n { color: var(--tx-soft); }
.cline li.is-done .cline-v { color: var(--tx-soft); }

/* La ultima fase alcanzada es el titular: el valor que se ha desbloqueado */
.cline li.is-last .cline-d { background: var(--paso); border-color: var(--paso); color: var(--navy-900); }
.cline li.is-last .cline-v { color: var(--gold-bright); font-size: .84rem; }
.cline li.is-last .cline-n { color: var(--tx); }

/* Fase no recorrida: el propietario decide no llegar */
.cline li.is-off { opacity: .42; }

@media (max-width: 560px) {
  .case-nums { grid-template-columns: repeat(2, 1fr); gap: .5rem .55rem; padding-top: 2rem; }
  .cline-n { font-size: .62rem; }
}
@media (min-width: 480px) { .case-nums { grid-template-columns: repeat(4, 1fr); } }
.case-nums .k, .an-nums .k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-mute); }
.case-nums .k { font-size: .63rem; line-height: 1.15; }
.case-nums b, .an-nums b { display: block; margin-top: .25rem; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 800; letter-spacing: -.03em; }
.case-nums b { margin-top: .16rem; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.15; }
.case-nums b.gold, .an-nums b.gold { color: var(--gold-bright); }
.case-nums small, .an-nums small { font-size: .58em; font-weight: 600; }

/* ---- Análisis slide (inversor) ---- */
.an-slide {
  display: flex; flex-direction: column-reverse; justify-content: flex-end;
  min-width: 0;
}
.an-media { position: relative; aspect-ratio: 3.4/1; flex: none; border-radius: var(--r-md); overflow: hidden; }
.an-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.an-body { padding: .2rem .4rem 1.1rem; }
.an-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* Descripción y puntuaciones en paralelo para ganar altura */
.an-cols { margin-top: .9rem; display: grid; gap: 1rem; align-items: start; }
/* Una sola columna: primero se lee de que va la operacion y despues sus
   tres notas. En paralelo competian entre si. */
@media (min-width: 620px) { .an-cols { grid-template-columns: 1fr; gap: .9rem; } }
.an-cols .case-text { margin-top: 0; }
.an-cols .bars { margin-top: 0; }
.verdict {
  flex: none; padding: .4rem .85rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  border: 1px solid;
}
.verdict.is-go   { color: #8FCB96; background: rgba(143,203,150,.12); border-color: rgba(143,203,150,.35); }
.verdict.is-hold { color: #E3B267; background: rgba(227,178,103,.12); border-color: rgba(227,178,103,.35); }
.verdict.is-no   { color: #E08A73; background: rgba(224,138,115,.12); border-color: rgba(224,138,115,.35); }

/* ---- Barras de puntuación (rojo → naranja → verde) ---- */
.bars { margin-top: 1.5rem; display: grid; gap: .95rem; }
.bar-lab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .82rem; font-weight: 700; color: var(--tx-soft);
  margin-bottom: .4rem;
}
.bar-lab b { font-size: .84rem; font-weight: 800; color: var(--tx); font-variant-numeric: tabular-nums; }
.bar-track {
  height: 8px; border-radius: 999px;
  background: rgba(244,242,237,.09);
  overflow: hidden;
}
.bar-track i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--bar-color, var(--navy-600));
  transition: width 1.3s var(--ease), background-color 1.3s var(--ease);
}
.bars-note { margin-top: 1.4rem; font-size: .8rem; color: var(--tx-mute); }
/* Mismo panel que las cifras de los casos de propietario: fondo, filete y
   celdas centradas. Antes iban sueltas sobre el fondo y las dos pestanas no
   parecian la misma familia de ficha. */
.an-nums {
  margin-top: auto; padding: .7rem .85rem .75rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem;
  border-radius: var(--r-sm);
  background: linear-gradient(160deg, rgba(244,242,237,.06), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
}
@media (min-width: 520px) { .an-nums { grid-template-columns: repeat(4, 1fr); } }
.an-nums > div {
  min-width: 0; display: flex; flex-direction: column; gap: .02rem;
  align-items: center; justify-content: flex-start; text-align: center;
}
.an-nums .k { font-size: .63rem; line-height: 1.15; }
.an-nums b { margin-top: .16rem; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.15; }

/* =============================================================
   11. Selector de activos (03)
   ============================================================= */
.sel-tabs { display: grid; gap: .6rem; margin-bottom: 1.3rem; }
@media (min-width: 700px)  { .sel-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sel-tabs { grid-template-columns: repeat(4, 1fr); gap: .7rem; } }
.sel-tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1.1rem;
  border-radius: var(--r-sm);
  background: rgba(244,242,237,.055);
  border: 1px solid var(--hair);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  text-align: left;
  transition: background .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease), color .35s;
}
.sel-tab:hover { background: rgba(244,242,237,.1); transform: translateY(-3px); }
.sel-tab::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.sel-tab[aria-selected="true"] { background: rgba(185,154,92,.16); border-color: rgba(185,154,92,.5); }
.sel-tab[aria-selected="true"]::after { transform: scaleX(1); }
.sel-tab-n {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(8,15,28,.5); border: 1px solid var(--hair);
  color: var(--tx-mute);
  transition: background .4s, color .4s, border-color .4s;
}
.sel-tab-n svg { width: 17px; height: 17px; }
.sel-tab[aria-selected="true"] .sel-tab-n { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.sel-tab-l { font-size: .88rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.sel-tab[aria-selected="true"] .sel-tab-l { color: var(--tx); }

.sel-stage { display: grid; gap: 1.1rem; align-items: stretch; }
@media (min-width: 960px) { .sel-stage { grid-template-columns: 1.32fr 1fr; gap: 1.2rem; } }

.sel-media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--navy-850);
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hair);
}
@media (min-width: 960px) { .sel-media { aspect-ratio: auto; min-height: 356px; } }
.sel-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .8s var(--ease), transform 1.1s var(--ease);
}
.sel-media img.is-active { opacity: 1; transform: scale(1); }
.sel-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,15,28,.28) 0%, transparent 34%, rgba(8,15,28,.5) 100%);
}
.sel-badge {
  position: absolute; z-index: 2; left: 1.1rem; bottom: 1.1rem;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.05rem; border-radius: 999px;
  background: rgba(8,15,28,.55); border: 1px solid var(--hair-2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: .8rem; font-weight: 700; color: var(--tx);
}
.sel-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); }

.sel-panelwrap {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(244,242,237,.07), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  /* Las cuatro fichas se apilan en la misma celda: así la tarjeta mide
     siempre lo mismo y no da un salto al cambiar de pestaña. */
  display: grid; align-items: center;
}
.sel-panel {
  grid-area: 1 / 1; width: 100%;
  visibility: hidden; opacity: 0;
}
/* Conservamos el atributo `hidden` por semántica; oculta `visibility` */
.sel-panel[hidden] { display: block; }
.sel-panel.is-active {
  visibility: visible; opacity: 1;
  animation: panelIn .6s var(--ease) both;
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sel-panel-k { font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: var(--gold); }
.sel-panel-t { margin-top: .7rem; font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -.03em; }
.sel-panel-d { margin-top: .9rem; color: var(--tx-soft); font-size: .95rem; }
.sel-panel-list { margin-top: 1.4rem; display: grid; gap: .7rem; }
.sel-panel-list li {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .86rem; color: var(--tx-soft);
  padding-top: .7rem; border-top: 1px solid var(--hair);
}
.sel-panel-list li:first-child { padding-top: 0; border-top: 0; }
.sel-panel-list svg { width: 15px; height: 15px; flex: none; margin-top: .22em; color: var(--gold); }
/* Botón centrado y algo más contenido que el resto */
.sel-panel-cta {
  margin: 1.6rem auto 0; display: flex; width: fit-content;
  padding: .7rem .8rem .7rem 1.25rem; font-size: .85rem; gap: .6em;
}
.sel-panel-cta .btn-ico { width: 26px; height: 26px; }
.sel-panel-cta .btn-ico svg { width: 12px; height: 12px; }
.sel-panel-hint { margin-top: .7rem; font-size: .76rem; color: var(--tx-mute); text-align: center; }

/* =============================================================
   12. Contacto (04)
   ============================================================= */

/* El ancla del formulario no puede quedar tapada por la barra fija */
#form-contacto { scroll-margin-top: 100px; }

.contact-grid { display: grid; gap: 1.2rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.08fr .92fr; gap: 1.3rem; } }
.form-card {
  border-radius: var(--r-lg); padding: clamp(1.7rem, 3.2vw, 2.5rem);
  background: linear-gradient(160deg, rgba(244,242,237,.07), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
}
.field { position: relative; margin-bottom: .9rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 1.5rem 1.05rem .6rem;
  border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: rgba(8,15,28,.4); color: var(--tx);
  font-family: var(--sans); font-size: .98rem;
  transition: border-color .3s, background .3s;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); background: rgba(8,15,28,.62); }
.field label {
  position: absolute; left: 1.05rem; top: 1.05rem; pointer-events: none;
  color: var(--tx-mute); font-size: .95rem;
  transition: all .28s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: .48rem; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.form-submit { width: 100%; justify-content: center; position: relative; margin-top: .4rem; }
.form-card.is-sending .form-label { opacity: 0; }
.form-card.is-sending .form-spin { opacity: 1; }
.form-spin { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.form-spin::after {
  content: ""; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(8,15,28,.28); border-top-color: var(--navy-900);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-ok {
  margin-top: 1rem; padding-inline: 1.1rem; border-radius: var(--r-sm);
  background: rgba(185,154,92,.15); border: 1px solid rgba(185,154,92,.3);
  color: var(--gold-bright); font-weight: 600; font-size: .9rem;
  opacity: 0; max-height: 0; overflow: hidden; padding-block: 0;
  transition: opacity .5s var(--ease), max-height .5s var(--ease), padding-block .5s var(--ease);
}
.form-ok.is-visible { opacity: 1; max-height: 120px; padding-block: .95rem; }

.info-card {
  border-radius: var(--r-lg); padding: clamp(1.7rem, 3.2vw, 2.5rem);
  background: var(--cream); color: var(--ink);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.info-row { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ink-hair); }
.info-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.info-k { width: 6.5rem; flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); }
.info-v { font-weight: 700; letter-spacing: -.01em; font-size: 1.02rem; }
.info-v a { transition: color .3s; }
.info-v a:hover { color: var(--gold-deep); }
.info-cta {
  margin-top: auto; padding: 1.3rem; border-radius: var(--r-md);
  background: var(--navy-800); color: var(--tx);
}
.info-cta p { font-size: .89rem; color: var(--tx-soft); }
.info-cta .btn { margin-top: 1rem; }

/* =============================================================
   13. Footer
   ============================================================= */
.foot { background: var(--navy-950); padding-block: clamp(2.6rem, 5vw, 4rem) 1.8rem; }
.foot-top { display: grid; gap: 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--hair); }
@media (min-width: 800px) { .foot-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.foot-tag { margin-top: .7rem; font-size: .88rem; color: var(--tx-mute); max-width: 32ch; }
.foot-ct { font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: .9rem; }
.foot-col > a, .foot-col > span { display: block; font-size: .88rem; color: var(--tx-soft); padding-block: .3rem; transition: color .3s; }
.foot-col a:hover { color: var(--gold-bright); }
.foot-bot { margin-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; font-size: .78rem; color: var(--tx-mute); }

/* =============================================================
   14. Reveals & transitions
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-rd="1"] { transition-delay: .08s; }
[data-rd="2"] { transition-delay: .16s; }
[data-rd="3"] { transition-delay: .24s; }
[data-rd="4"] { transition-delay: .32s; }

.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transform-origin: 0 0; transform: scaleX(0); }

.splash {
  position: fixed; inset: 0; z-index: 10000; background: var(--navy-950);
  display: grid; place-items: center;
  transition: opacity .75s var(--ease), clip-path 1s var(--ease);
  animation: splashSafe .01s 3.4s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafe { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-m { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.splash-m .a-mark { color: var(--gold-bright); }
.splash-bar { margin-top: 1rem; width: 128px; height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.splash-bar i { display: block; height: 100%; width: 0; background: var(--gold); animation: splashLoad 1.5s var(--ease) forwards; }
@keyframes splashLoad { to { width: 100%; } }

/* =============================================================
   15. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .splash { animation: none; }
  .splash-bar i { animation: none; width: 100%; }
}

/* =============================================================
   16. Ajustes finales de composición
   ============================================================= */
/* Entradilla de cada perfil: arranque en negrita y color de marca */
.lede-lead { color: var(--gold-bright); font-weight: 800; }

/* Los puntos del carrusel, dentro de la tarjeta */
.slider-dots { margin-top: .9rem; }

/* =============================================================
   17. Título de cada perfil
   ============================================================= */
/* Mismo cuerpo y mismo icono que los titulares de seccion: los dos perfiles
   son una parada mas del recorrido, no un rotulo de otra familia. */
.view-title { display: flex; align-items: center; gap: clamp(.85rem, 1.6vw, 1.25rem); }
.view-title .sec-mark-ico { align-self: center; }
.view-h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.5rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.03em;
  max-width: 20ch;
}
.view-lede { margin-top: .8rem; }

/* =============================================================
   18. Línea temporal interactiva (propietario)
   ============================================================= */
.tline { margin-top: 1.15rem; }
.tline-rail {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .4rem; padding-top: .2rem;
}
.tline-track {
  position: absolute; left: 6%; right: 6%; top: 15px; height: 2px;
  background: var(--hair); border-radius: 2px; overflow: hidden;
}
.tline-track i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--navy-600), var(--gold));
}
.tline-dot {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 0; background: none; text-align: center;
}
.tline-n {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  background: var(--navy-900); border: 1.5px solid var(--hair-2); color: var(--tx-mute);
  transition: background .4s var(--ease), border-color .4s, color .4s, transform .4s var(--ease);
}
.tline-lb { font-size: .74rem; font-weight: 700; color: var(--tx-mute); transition: color .35s; }
.tline-dot:hover .tline-n { border-color: var(--gold); color: var(--tx); }
.tline-dot[aria-selected="true"] .tline-n {
  background: var(--gold); border-color: var(--gold); color: var(--navy-900);
  transform: scale(1.12);
}
.tline-dot[aria-selected="true"] .tline-lb { color: var(--tx); }

.tline-stage {
  margin-top: 1rem; padding: .95rem 1.2rem 1rem;
  border-radius: var(--r-md);
  background: rgba(244,242,237,.04); border: 1px solid var(--hair);
  /* El alto de la ficha mas larga de las dos pestanas: la del paso 02 del
     inversor, que lleva dentro las tres notas del analisis. Un solo valor
     para las dos, asi el bloque no cambia de tamano ni al pasar de fase ni
     al cambiar de perfil. */
  min-height: 213px;
}
.tline-panel { animation: tlineIn .45s var(--ease) both; }
@keyframes tlineIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tline-panel { animation: none; } }
.tline-t { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.tline-d { margin-top: .5rem; font-size: .88rem; color: var(--tx-mute); }
.tline-chips { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-mid { color: #E3B267; border-color: rgba(227,178,103,.3); }

/* =============================================================
   19. Flujo del método: bloques → puntuación final
   ============================================================= */
.msplit { display: grid; gap: 1.1rem; align-items: stretch; }
@media (min-width: 1080px) {
  .msplit {
    /* los tres bloques ganan el ancho que cede la puntuación final */
    grid-template-columns: 1.64fr 1.77fr 48px 1fr;
    gap: .9rem;
  }
  /* Dentro de cada bloque: anillo · título+texto · etiquetas a la derecha.
     `display: contents` deja que los hijos del cuerpo entren en la rejilla. */
  .mrow {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: .2rem .7rem; padding: .7rem 1rem;
  }
  .mrow-body { display: contents; }
  .mrow .ring-wrap { grid-area: 1 / 1 / 3 / 2; }
  .mrow-t { grid-area: 1 / 2 / 2 / 3; }
  .mrow-d { grid-area: 2 / 2 / 3 / 3; margin-top: 0; }
  .mrow-list {
    grid-area: 1 / 3 / 3 / 4;
    margin-top: 0; flex-direction: column; align-items: stretch;
    justify-content: center; gap: .3rem;
  }
  .mrow-list li { text-align: center; font-size: .66rem; padding: .26rem .45rem; }
}
/* Columna izquierda: primero el texto, debajo la foto */
.mcol-l { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.mlede { color: var(--tx-soft); font-size: .95rem; }
.mcol-l > .mfigure { flex: 1 1 200px; min-height: 200px; min-width: 0; }
.mrow { transition: transform .5s var(--ease), border-color .45s, background .45s, box-shadow .45s; }
.mrow:hover,
.msplit[data-active] .mrow.is-lit {
  border-color: rgba(218,171,94,.65);
  background: rgba(185,154,92,.09);
  box-shadow: 0 0 0 1px rgba(218,171,94,.28), 0 14px 34px rgba(0,0,0,.28);
}

/* Conector */
.mconn { display: none; }
@media (min-width: 1080px) { .mconn { display: block; position: relative; } }
.mconn svg { width: 100%; height: 100%; overflow: visible; }
.mconn-l {
  fill: none;
  stroke: var(--hair-2);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: stroke .4s var(--ease), stroke-width .4s;
}
.mconn-l.is-lit {
  stroke: var(--gold-bright);
  stroke-width: 2.4;
  stroke-dasharray: 7 5;
  animation: flujo 1.1s linear infinite;
}
@keyframes flujo { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .mconn-l.is-lit { animation: none; stroke-dasharray: none; } }

.mresult {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  text-align: center;
  padding: 1.3rem 1.1rem;
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(185,154,92,.14), rgba(244,242,237,.03));
  border: 1px solid rgba(185,154,92,.3);
  transition: border-color .45s, box-shadow .45s;
}
.msplit[data-active] .mresult {
  border-color: rgba(218,171,94,.6);
  box-shadow: 0 0 0 1px rgba(218,171,94,.25), 0 16px 40px rgba(0,0,0,.3);
}
.mresult-k { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); }
.mresult-ring { position: relative; width: 118px; aspect-ratio: 1; }
.mresult-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.mresult-ring .ring-val { font-size: 1.8rem; }
.mresult-v { font-size: .74rem; }
.mresult-d { font-size: .76rem; color: var(--tx-mute); max-width: 24ch; }

/* =============================================================
   20. Puntero personalizado
   ============================================================= */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9998;
  pointer-events: none; display: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none;
  will-change: transform; border-radius: 50%;
}
.cursor-dot {
  width: 5px; height: 5px; margin: -2.5px;
  background: var(--gold-bright);
  transition: opacity .3s, transform .25s var(--ease);
}
.cursor-ring {
  width: 34px; height: 34px; margin: -17px;
  border: 1.5px solid rgba(218,171,94,.75);
  transition: width .32s var(--ease), height .32s var(--ease),
              margin .32s var(--ease), border-color .32s, background .32s;
}
/* Sobre pestañas, botones y enlaces el puntero se hace pequeño */
.cursor.is-small .cursor-ring {
  width: 16px; height: 16px; margin: -8px;
  border-color: var(--gold-bright);
  background: rgba(218,171,94,.16);
}
.cursor.is-small .cursor-dot { opacity: 0; transform: scale(.4); }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor [role="tab"] { cursor: none; }

/* Ajuste fino: la vista de inversor compacta sus tres fichas. El titular ya
   no se reduce aqui: va al mismo cuerpo que los titulares de seccion. */
.tl-3 .tl-step { padding: .95rem 1.15rem 1rem; }
.tl-3 .tl-ico { width: 34px; height: 34px; margin-bottom: .7rem; }
.tl-3 .tl-ico svg { width: 16px; height: 16px; }
.tl-3 .tl-d { margin-top: .3rem; }

/* =============================================================
   21. Ajustes de portada, línea temporal y puntuación final
   ============================================================= */
/* Palabra destacada dentro de un párrafo */
.accent-b { color: var(--gold-bright); font-weight: 800; }

/* Las tres celdas de la portada llevan icono a la izquierda */
.hero-cell { display: flex; align-items: flex-start; gap: .85rem; }
.hero-cell-ico {
  width: 50px; height: 50px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(185,154,92,.14);
  border: 1px solid rgba(185,154,92,.3);
  color: var(--gold-bright);
  transition: background .45s var(--ease), border-color .45s;
}
.hero-cell-ico svg { width: 26px; height: 26px; stroke-width: 1.5; }
.hero-cell:hover .hero-cell-ico { background: rgba(185,154,92,.24); border-color: rgba(218,171,94,.55); }
.hero-cell-tx { min-width: 0; }

/* Número y título en la misma línea: «01 — Detecta», descripción debajo */
.hero-cell-t {
  margin-top: 0; display: flex; align-items: baseline; gap: .4rem;
}
.hero-cell-k {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  color: var(--gold); flex: none;
}
.hero-cell-k::after {
  content: "—"; margin-left: .4rem;
  color: var(--hair-2); font-weight: 400; letter-spacing: 0;
}

/* Línea temporal: del rojo (01) al verde (04), como una barra de progreso */
.tline-dot[data-tstep="1"] { --paso: #E0705B; }
.tline-dot[data-tstep="2"] { --paso: #E29A55; }
.tline-dot[data-tstep="3"] { --paso: #C7C059; }
.tline-dot[data-tstep="4"] { --paso: #79C387; }
.tline-n { border-color: color-mix(in srgb, var(--paso) 55%, transparent); color: var(--paso); }
.tline-dot:hover .tline-n { border-color: var(--paso); }
.tline-dot[aria-selected="true"] .tline-n {
  background: var(--paso); border-color: var(--paso); color: var(--navy-900);
}
/* La franja ocupa siempre el carril entero y se descubre con `clip-path`:
   así el degradado no se comprime y al llegar al 04 el extremo ES verde.
   Los topes coinciden con el centro real de cada hito (7% … 93%). */
.tline-track i {
  background: linear-gradient(90deg,
    #E0705B 0%, #E0705B 7%, #E29A55 36%, #C7C059 64%, #79C387 93%, #79C387 100%);
  clip-path: inset(0 calc(100% - var(--rev, 7%)) 0 0);
  transition: clip-path .55s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .tline-track i { transition: none; } }

/* ---- Ficha del recorrido: texto a la izquierda, medidor a la derecha ----
   La ficha estira hasta igualar el fondo de la tarjeta de casos. */
.vsplit-l > .tline { flex: 1; display: flex; flex-direction: column; }
/* Sin `flex: 1` el panel deja de estirarse hasta el fondo de la columna:
   se ajusta a su contenido y no arrastra un hueco vacio debajo. */
.tline-stage { flex: none; }
.tline-panes { min-width: 0; }
@media (min-width: 1080px) {
  .tline-stage {
    display: grid; grid-template-columns: 1fr 166px;
    gap: 1.3rem; align-items: center;
  }
}
.tgauge { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.tgauge-ring { position: relative; width: 124px; max-width: 100%; aspect-ratio: 1; }
.tgauge-ring svg { width: 100%; height: 100%; display: block; }
.tgauge-tick { stroke-width: 2.6; stroke-linecap: round; transition: stroke .4s var(--ease); }
/* `place-items: center` centra de verdad; con `baseline` el número se iría arriba */
.tgauge-mid { position: absolute; inset: 0; display: grid; place-items: center; }
.tgauge-cifra { display: flex; align-items: baseline; gap: .06rem; }
.tgauge-num {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--paso-val, var(--gold)); font-variant-numeric: tabular-nums;
  transition: color .4s var(--ease);
}
.tgauge-max { font-size: .72rem; font-weight: 700; color: var(--tx-mute); }
.tgauge-cap {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tx-mute); text-align: center;
}
@media (max-width: 1079px) { .tgauge { margin-top: 1.1rem; } }

/* =============================================================
   22. Comparador antes / después (locales)
   El eje se mueve con un <input type="range"> invisible: así funciona
   con ratón, con dedo y con teclado sin escribir lógica de arrastre.
   ============================================================= */
.ba {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity .8s var(--ease);
}
.ba.is-active { opacity: 1; }
/* Estas imágenes no entran en el desvanecido del selector */
.sel-media .ba img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; transform: none; transition: none;
}
/* Izquierda: el original, en blanco y negro. Derecha: el resultado, en color. */
.ba-a {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0);
  filter: grayscale(1) contrast(1.05);
}
.ba-axis {
  position: absolute; top: 0; bottom: 0; left: var(--ba, 50%);
  width: 2px; margin-left: -1px; z-index: 3;
  background: rgba(248,247,244,.9);
  box-shadow: 0 0 0 1px rgba(8,15,28,.28);
  pointer-events: none;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12,23,40,.72); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(248,247,244,.9);
  color: var(--tx);
}
.ba-grip svg { width: 20px; height: 20px; }
.ba-lb {
  position: absolute; top: 1rem; z-index: 3;
  padding: .34rem .8rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(12,23,40,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(248,247,244,.18); color: var(--tx);
  pointer-events: none;
}
.ba-lb-a { left: 1rem; }
.ba-lb-b { right: 1rem; color: var(--gold-bright); border-color: rgba(218,171,94,.4); }
/* El control ocupa toda la foto pero es invisible; `pan-y` deja pasar el
   desplazamiento vertical de la página en móvil. */
.ba-range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; cursor: ew-resize;
  touch-action: pan-y;
}
.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 46px; height: 100%; background: transparent; cursor: ew-resize;
}
.ba-range::-moz-range-thumb {
  width: 46px; height: 100%; background: transparent; border: 0; cursor: ew-resize;
}
.ba-range:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; }
/* El eje va antes que el control en el HTML, así que el resalte cuelga de `.ba` */
.ba:hover .ba-grip, .ba:focus-within .ba-grip {
  border-color: var(--gold-bright); color: var(--gold-bright);
}
@media (max-width: 640px) {
  .ba-grip { width: 34px; height: 34px; }
  .ba-grip svg { width: 17px; height: 17px; }
  .ba-lb { font-size: .62rem; padding: .28rem .65rem; }
}

/* =============================================================
   23. Nosotros: un único bloque sobre fondo oscuro
   Texto y firma a la izquierda; foto, nota y cifras a la derecha.
   ============================================================= */
.about-one {
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(160deg, rgba(244,242,237,.07), rgba(244,242,237,.02));
  border: 1px solid var(--hair);
  display: grid; gap: 1.5rem;
}
@media (min-width: 900px) { .about-one { grid-template-columns: 1.02fr .98fr; gap: 2.2rem; } }
.about-col { min-width: 0; display: flex; flex-direction: column; gap: 1.1rem; }
/* El bloque de texto crece y empuja la firma al pie de la columna */
.about-col-l > [data-es], .about-col-l > [data-ca] { flex: 1 1 auto; }
.about-h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -.02em; }
.about-col-l p { color: var(--tx-soft); font-size: .97rem; }
.about-col-l p + p { margin-top: .85rem; }
.about-note { color: var(--tx-mute); font-size: .93rem; }
/* La firma pasa a fondo oscuro: filete y tono claros */
.about-one .card-sign { margin-top: 0; padding-top: 1.2rem; border-top: 1px solid var(--hair); }
.about-one .card-sign b { color: var(--tx); }
.about-one .card-sign span { color: var(--tx-mute); }
@media (min-width: 900px) {
  /* Separador vertical entre las dos mitades */
  .about-col-r { padding-left: 2.2rem; border-left: 1px solid var(--hair); }
  /* Las cuatro cifras, en una sola línea: tipografía más contenida */
  .about-stats { grid-template-columns: repeat(4, 1fr); gap: .9rem; }
}

/* Las cifras van bajo la foto, en su propia banda */
.about-stats {
  margin: 0; padding: 1rem 1.15rem 1.05rem;
  border-radius: var(--r-md);
  background: rgba(8,15,28,.42); border: 1px solid var(--hair);
}
.about-stats .stat-v { font-size: clamp(1.2rem, 1.6vw, 1.55rem); }
.about-stats .stat-l { font-size: .68rem; line-height: 1.35; color: var(--tx-soft); }

/* =============================================================
   23b. Nosotros: foto del despacho
   ============================================================= */
/* La foto ocupa el hueco que sobra en la tarjeta en lugar de imponer una
   altura fija: así la sección no crece y sigue cabiendo en una pantalla. */
.about-media {
  position: relative; margin: 0;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--hair); background: var(--navy-850);
  flex: 1 1 210px; min-height: 190px;
  /* Sin esto, `min-height` + `aspect-ratio` fijan un ancho mínimo de 330px
     y la tarjeta se sale del margen en móvil. */
  min-width: 0;
}
/* Colocada en absoluto para que la foto no imponga su altura natural */
.about-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* En móvil, altura fija: con `aspect-ratio` el navegador deduce un ancho de
   330px a partir de la altura mínima y la tarjeta se desborda. */
@media (max-width: 899px) {
  /* En móvil las cifras van en dos filas, así que la foto necesita más alto */
  .about-media { flex: none; width: 100%; height: 220px; min-height: 0; aspect-ratio: auto; }
  .about-stats { padding: .9rem 1rem; gap: 1rem .8rem; }
}

/* =============================================================
   24. Contacto: elección de activo + tarjeta con foto
   ============================================================= */
.chips-set { border: 0; padding: 0; margin: 0 0 1.2rem; }
.chips-lg {
  padding: 0; margin-bottom: .7rem;
  font-size: .82rem; font-weight: 700; color: var(--tx-soft);
}
.chips-r { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-r {
  position: relative; cursor: pointer;
  padding: .5rem 1rem; border-radius: 999px;
  font-size: .84rem; font-weight: 700; letter-spacing: -.01em;
  background: rgba(8,15,28,.4); border: 1px solid var(--hair); color: var(--tx-mute);
  transition: background .3s, border-color .3s, color .3s;
}
.chip-r input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-r:hover { border-color: var(--gold); color: var(--tx); }
/* `.is-on` lo pone el JS: cubre navegadores sin `:has()` */
.chip-r:has(input:checked), .chip-r.is-on {
  background: var(--gold); border-color: var(--gold); color: var(--navy-900);
}
.chip-r:has(input:focus-visible) { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Señuelo antispam: fuera de la vista pero sin `display:none`,
   que algunos robots detectan. */
.trampa {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.contact-media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--hair);
  min-height: 340px; display: flex;
}
.contact-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.contact-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(8,15,28,.26) 0%, rgba(8,15,28,.7) 46%, rgba(8,15,28,.95) 100%);
}
.contact-media-in {
  position: relative; z-index: 1; height: 100%;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
}
.contact-media-t { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -.025em; line-height: 1.2; }
.contact-media-d { font-size: .92rem; color: var(--tx-soft); }
/* Dos caminos dentro de la tarjeta: el local y el solar no se deciden igual */
/* Los dos accesos se apilan y llenan la tarjeta: local arriba, solar abajo */
.contact-split {
  display: grid; grid-template-rows: 1fr 1fr; gap: .9rem;
  width: 100%; flex: 1 1 auto; margin-top: 0;
}
.contact-split-c {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: 1rem; border: 1px solid var(--hair); border-radius: var(--r-sm);
  background: rgba(8, 15, 28, .42);
}
.contact-split-k {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-bright);
}
.contact-split-d {
  flex: 1 1 auto; margin: 0;
  font-size: .87rem; line-height: 1.45; color: var(--tx-soft);
}
.contact-split .btn { width: 100%; justify-content: center; }

@media (max-width: 560px) {
  .contact-split { grid-template-columns: 1fr; }
}

.contact-media-foot {
  margin-top: .5rem; padding-top: .9rem; width: 100%;
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  font-size: .84rem; font-weight: 700; color: var(--tx-mute);
}
.contact-media-foot a { color: var(--gold-bright); transition: color .3s; }
.contact-media-foot a:hover { color: var(--tx); }

/* El botón vive dentro de la tarjeta de puntuación, abajo del todo */
.mresult { justify-content: space-between; }
/* Centrado y algo más contenido, igual que el de la ficha de activos */
.mresult-cta {
  margin-top: .5rem; align-self: center; width: fit-content; max-width: 100%;
  justify-content: center;
  padding: .7rem .8rem .7rem 1.25rem; font-size: .85rem; gap: .6em;
}
.mresult-cta .btn-ico { width: 26px; height: 26px; }
.mresult-cta .btn-ico svg { width: 12px; height: 12px; }
.method-foot { justify-content: center; }