/* ==========================================================================
   growth.rar · página propia. Hereda el sistema de studio.css.
   El edificio es el negocio; debajo, en los cimientos, lo que trae gente.
   ========================================================================== */

/* ---------- Hero: «growth.rar» detrás del edificio ----------
   Capas: luz de persiana que se mueve despacio → la palabra «growth.rar» → el edificio, que le tapa
   la parte baja de «.rar». Con el scroll la palabra se va, el texto sube arriba a todo el ancho
   y la cámara baja a los cimientos, que es donde está lo que trae gente. */
.hero--growth .hero-tarjeta {
  --fs: min(13.4cqw, 21cqh);
  --fh: min(66cqh, 42cqw);
  --fw: calc(var(--fh) * 1.0408);
  --fl: calc(100cqw - var(--fw) - 3.5cqw);
  --ft: calc(100cqh - var(--fh) - 2.5cqh);
}
/* el sol entra por la persiana y se desplaza muy despacio por la pared */
.hero--growth .hero-tarjeta::before {
  content: ""; position: absolute; z-index: 0; inset: -8% -14% auto -10%; aspect-ratio: 900 / 560; pointer-events: none;
  background: url("../img/fondos/persiana.webp") center / 100% 100% no-repeat;
  animation: sol 26s ease-in-out infinite alternate;
}
@keyframes sol { from { transform: translate3d(-2%, -1%, 0) rotate(-1deg); } to { transform: translate3d(4%, 3%, 0) rotate(1.5deg); } }
/* el tejado corta «.rar» por la mitad de las letras: se lee, pero queda detrás */
.hero--growth .hero-marca { top: calc(var(--ft) + var(--fh) * .02 - var(--fs) * .58); }
.hero--growth .hero-escena { transform-origin: 0 0; }
.hero--growth .hero-edificio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(50, 30, 22, .2)); }
.hero--growth .hero-suelo { left: 4%; right: 4%; top: 70%; bottom: -6%; }
/* en horizontal el texto ocupa la mitad izquierda, grande y centrado en alto; el edificio se queda a la derecha */
.hero--growth .hero-b, .hero--growth .hero-c { left: 5cqw; right: 52cqw; top: 50%; margin: 0; max-width: none; text-align: left; }
.js .hero--growth .hero-b { transform: translate3d(0, calc(-50% + (1 - var(--b, 0)) * 26px), 0); }
.js .hero--growth .hero-c { transform: translate3d(0, calc(-50% + (1 - var(--c, 0)) * 26px), 0); }
.hero--growth .hero-b span { font-size: clamp(1.05rem, min(1.6cqw, 2.8cqh), 1.6rem); }
.hero--growth .hero-b strong { white-space: normal; font-size: min(4.7cqw, 8.6cqh); text-wrap: balance; }
.hero--growth .hero-c { font-size: min(4.5cqw, 8.2cqh); }

/* Etiquetas de las tres salas de los cimientos */
.et--ads { left: 22%; top: 44%; --l: var(--l1); --etx: 0%; }
.et--landing { left: 50%; top: 76%; --l: var(--l2); }
.et--numeros { left: 78%; top: 51%; --l: var(--l3); --etx: -22%; }
.et--abajo { transform: translate(-50%, 0); }
.et--abajo::after { top: auto; bottom: 100%; }

@container hero (orientation: portrait) {
  .hero--growth .hero-escena, .hero--growth .hero-marca {
    --fs: min(16.4cqw, 9.4cqh);
    --mt: 104px;
    --reserva: 214px;
    --fh: min(calc(100cqh - var(--mt) - var(--fs) - var(--reserva)), 96cqw);
    --fw: calc(var(--fh) * 1.0408);
    --fl: calc((100cqw - var(--fw)) / 2);
    /* el tejado tapa la parte baja de las letras: se lee, pero queda detrás */
    --ft: calc(var(--mt) + var(--fs) * .7 - var(--fh) * .02);
  }
  .hero--growth .hero-marca { top: var(--mt); }
  .hero--growth .hero-b, .hero--growth .hero-c { left: 6cqw; right: 6cqw; top: calc(var(--mt, 104px) + 8px); text-align: center; }
  .js .hero--growth .hero-b { transform: translate3d(0, calc((1 - var(--b, 0)) * 26px), 0); }
  .js .hero--growth .hero-c { transform: translate3d(0, calc((1 - var(--c, 0)) * 26px), 0); }
  .hero--growth .hero-b span { font-size: clamp(1rem, 4.3cqw, 1.2rem); }
  .hero--growth .hero-b strong { font-size: clamp(2rem, 9.2cqw, 3.2rem); }
  .hero--growth .hero-c { font-size: clamp(2rem, 9.4cqw, 3.2rem); }
  .hero--growth .et { display: block; }
  .hero--growth .et span { max-width: 7.4rem; }
  .hero--growth .et--ads { --etx: 26%; }
  .hero--growth .et--numeros { --etx: -26%; }
}

/* ---------- El problema: la comparativa ---------- */
.problema { overflow: hidden; overflow: clip; --lp-inset: -4% -10% auto auto; --lp-w: min(1500px, 120%); }
.compara { display: grid; gap: 1.6rem; max-width: 1040px; margin: 0 auto; }
.compara-fila {
  display: grid; gap: .8rem 1.4rem; align-items: center;
  padding: 1.6rem 1.6rem; border-radius: var(--r-xl);
  background: var(--superficie); box-shadow: 0 0 0 1px var(--linea), var(--sombra-1);
}
.compara-fila--rar { box-shadow: 0 0 0 1.5px var(--vino), var(--sombra-2); }
.compara-quien { display: grid; gap: .2rem; }
.compara-quien strong { font-size: 1.2rem; font-weight: 700; font-stretch: 110%; letter-spacing: -.02em; }
.compara-quien .mono { color: var(--apoyo); }
.compara-barra { position: relative; display: block; height: 12px; border-radius: 12px; background: var(--papel-2); overflow: hidden; }
.compara-barra span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 12px; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(calc(var(--v) * var(--k, 1))); transition: transform 1.4s var(--ease); }
.compara-fila--rar .compara-barra span { background: var(--vino); }
.compara-barra .compara-rango { background: repeating-linear-gradient(-45deg, rgba(252, 251, 250, .55) 0 5px, transparent 5px 10px); transform: none; left: calc(var(--a) * 100%); width: auto; right: 0; border-radius: 0; }
.js .compara:not(.is-in) .compara-barra span:not(.compara-rango) { --k: 0; }
.compara-cifra { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.compara-cifra .cifra { font-size: clamp(1.8rem, 2.6vw, 2.4rem); white-space: nowrap; }
.compara-cifra .mono { color: var(--apoyo); }
.compara-pie { text-align: center; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -.012em; margin-top: .6rem; }
@media (min-width: 900px) {
  .compara-fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, .9fr); padding: 1.8rem 2.2rem; }
  .compara-cifra { justify-content: flex-end; }
}

/* ---------- Resultado del filtro ---------- */
.res-sello {
  display: inline-block; padding: .35rem .8rem; border-radius: var(--r-pill);
  background: rgba(226, 84, 94, .14); color: var(--vino-claro); margin-bottom: 1rem;
}
.res-sello[data-tipo="no"] { background: rgba(242, 238, 234, .1); color: var(--sobre-tinta); }

/* ---------- Qué hago y qué no ---------- */
.alcance { overflow: hidden; overflow: clip; --lh-inset: -4rem auto auto -5rem; --lh-w: min(70vw, 800px); --lh-o: .75; }
.alcance-grid { display: grid; gap: 1.2rem; }
.lista-tarjeta { padding: clamp(1.6rem, 3vw, 2.6rem); border-radius: var(--r-xl); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea), var(--sombra-1); }
.lista-tarjeta--no { background: rgba(252, 251, 250, .55); }
.lista-titulo { display: grid; gap: .5rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; font-stretch: 110%; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 1.2rem; }
.lista-titulo .mono { color: var(--apoyo); font-weight: 400; letter-spacing: .01em; }
.lista-si li, .lista-no li { position: relative; padding: .75rem 0 .75rem 1.8rem; border-top: 1px solid var(--linea); line-height: 1.4; }
.lista-si li::before, .lista-no li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 15px; height: 15px; background: center / contain no-repeat; }
.lista-si li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23630C12' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lista-no li { color: var(--texto-2); }
.lista-no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%236B6360' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (min-width: 900px) { .alcance-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; } }

/* ---------- Precio ---------- */
.precio {
  overflow: hidden; overflow: clip;
  background:
    url("../img/fondos/grano.webp") 0 0 / 144px 144px,
    radial-gradient(40% 34% at 50% 40%, rgba(255, 254, 252, .95), rgba(255, 254, 252, 0) 72%),
    var(--papel);
  --lp-inset: 0 auto auto -12%; --lp-w: min(1300px, 105%); --lp-o: .75; --lp-t: scaleX(-1);
}
.precio-tarjeta {
  position: relative; max-width: 880px; margin: 7rem auto 0;
  padding: 9rem clamp(1.4rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.6rem);
  border-radius: var(--r-xl); background: var(--superficie);
  box-shadow: 0 0 0 1.5px var(--vino), var(--sombra-2);
  display: grid; justify-items: center; text-align: center;
}
.precio-obj { position: absolute; left: 50%; top: -6.5rem; width: min(46%, 270px); transform: translateX(-50%); filter: var(--sombra-obj); }
@media (max-width: 759px) {
  .precio-tarjeta { margin-top: 5.5rem; padding-top: 6.2rem; }
  .precio-obj { top: -4.6rem; width: 52%; }
}
.precio-tabla { width: 100%; display: grid; gap: 0; text-align: left; }
.precio-tabla div { display: grid; gap: .3rem 1rem; padding: 1.05rem 0; border-top: 1px solid var(--linea); align-items: baseline; }
.precio-tabla dt { font-weight: 650; letter-spacing: -.01em; }
.precio-tabla dt .mono { display: block; color: var(--apoyo); font-weight: 400; margin-top: .1rem; }
.precio-tabla dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; }
.precio-tabla dd .cifra { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.precio-tabla .cifra--sm { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.precio-tabla dd .mono { color: var(--apoyo); }
.precio-tabla--total { background: linear-gradient(90deg, rgba(99, 12, 18, .06), rgba(99, 12, 18, 0)); border-radius: var(--r-md); padding-inline: .8rem !important; margin-inline: -.8rem; }
.precio-tabla--total dd .cifra { color: var(--vino); }
.precio-cta { margin-top: 1.6rem; }
@media (min-width: 760px) {
  .precio-tabla div { grid-template-columns: 1fr auto; }
  .precio-tabla dd { justify-content: flex-end; }
}
.cuenta-titulo { text-align: center; margin: clamp(5rem, 9vw, 7rem) auto 0; max-width: 24ch; }
.razones { display: grid; gap: .9rem; margin-top: 2.4rem; }
.razones li { display: grid; gap: .35rem; padding: 1.4rem 1.4rem 1.5rem; border-radius: var(--r-lg); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea), var(--sombra-1); }
.razones strong { font-size: 1.15rem; font-weight: 700; font-stretch: 108%; letter-spacing: -.02em; }
.razones li > span:last-child { color: var(--apoyo); line-height: 1.45; }
@media (min-width: 760px) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .razones { grid-template-columns: repeat(4, 1fr); } }

/* ---------- El ciclo ---------- */
.ciclo { overflow: hidden; overflow: clip; --lp-inset: auto -10% -6% auto; --lp-w: min(1400px, 115%); }
.meses { --mp: 0; position: relative; display: grid; gap: .9rem; }
.meses li {
  position: relative; display: grid; gap: .3rem; padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--r-lg); background: var(--superficie); box-shadow: 0 0 0 1px var(--linea);
  transition: box-shadow .4s var(--ease), transform .5s var(--ease);
}
.meses li.is-on { box-shadow: 0 0 0 1.5px var(--vino), var(--sombra-2); transform: translateY(-4px); }
.meses .mono { color: var(--apoyo); }
.meses li.is-on .mono { color: var(--vino); }
.meses strong { font-size: 1.25rem; font-weight: 700; font-stretch: 108%; letter-spacing: -.02em; }
.meses li > span:last-child { color: var(--apoyo); line-height: 1.45; }
.meses-despues { background: transparent !important; box-shadow: none !important; border: 1.5px dashed var(--linea-2); }
@media (min-width: 900px) {
  .meses { grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 2.2rem; }
  .meses::before, .meses::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: var(--linea-2); }
  .meses::after { background: var(--vino); transform-origin: 0 50%; transform: scaleX(var(--mp)); }
}

/* Los tres meses se conectan con cables a growth.rar (mismo componente que los 15 minutos de la home) */
.material--meses .pieza--mes { grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 1.15rem 3.2rem 1.25rem 1.2rem; }
.pieza--mes .pieza-txt { gap: .3rem; }
.pieza--mes .mono { color: var(--apoyo); }
.pieza--mes.is-on .mono { color: var(--vino); }
.pieza--mes .pieza-t { font-size: 1.2rem; font-weight: 700; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.15; }
.pieza--mes .pieza-s { font-size: .93rem; line-height: 1.45; }
.material-cubo--growth { width: 150px; }
.como-reloj--dias small { font-size: .24em; letter-spacing: -.02em; margin-left: .06em; }
.material--meses .material-msg strong { display: block; color: var(--tinta); font-size: 1.12rem; letter-spacing: -.012em; }
@media (min-width: 760px) {
  .material--meses .material-items { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .material--meses .pieza--mes { justify-items: start; align-content: start; text-align: left; min-height: 0; padding: 1.6rem 1.6rem 2.1rem; }
  .material--meses .pieza-txt { justify-items: start; }
  .material-cubo--growth { width: 190px; }
}

/* ---------- El compromiso, a pantalla completa ---------- */
.compromiso {
  min-height: 92svh; display: grid; place-items: center;
  padding: var(--seccion) var(--gutter);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  --lh-inset: -3rem -3rem auto auto; --lh-w: min(78vw, 900px); --lh-o: .85;
}
.compromiso-frase {
  max-width: 18ch; text-align: center;
  font-size: clamp(2.4rem, 7vw, 6.4rem); font-weight: 800; font-stretch: 114%; letter-spacing: -.05em; line-height: .98;
  text-wrap: balance;
}
.compromiso-frase em { font-style: normal; color: var(--vino); }

/* ---------- Cierre con el edificio de growth ---------- */
.cierre-objeto--growth { margin: 1rem auto -2rem; width: min(80%, 460px); align-self: end; }
.cierre-objeto--growth img { -webkit-mask-image: none; mask-image: none; filter: var(--sombra-obj); }
@media (min-width: 960px) { .cierre-objeto--growth { margin: 0 auto; width: min(80%, 520px); align-self: center; } }

/* ---------- ¿Encaja? La sección negra con brasa que se mueve detrás del cristal ---------- */
.quest--brasa::before, .quest--brasa::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  width: min(70vw, 900px); aspect-ratio: 1.6;
  background: radial-gradient(closest-side, rgba(226, 84, 94, .2), rgba(122, 22, 29, .1) 50%, rgba(99, 12, 18, 0));
}
.quest--brasa::before { left: -18%; top: 22%; animation: deriva 18s ease-in-out infinite alternate; }
.quest--brasa::after { right: -20%; bottom: 4%; animation: deriva 23s ease-in-out infinite alternate-reverse; }
@keyframes deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14%, -10%, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .hero--growth .hero-tarjeta::before, .quest--brasa::before, .quest--brasa::after { animation: none; }
  .js .hero--growth .hero-b, .js .hero--growth .hero-c { transform: translateY(-50%) !important; }
}
@media (prefers-reduced-motion: reduce) and (orientation: portrait) {
  .js .hero--growth .hero-b, .js .hero--growth .hero-c { transform: none !important; }
}