/* Landing de reformas · ATN Project
   Dirección: "el tablero bien ordenado" (taste-skill, dense-tiles). La página es un tablero de
   piezas de cristal encajadas con huecos de 8 px, sobre un fondo casi negro con brillos ámbar,
   líneas diagonales finas y grano, como el CRM de ATN. Saúl pidió expresamente cristal y
   degradados (nada de colores lisos): por eso se permiten aquí aunque la skill los prohíba. */

/* ------------------------------------------------------------------ fuente */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */
:root {
  --fondo: #0d0b09;
  --fondo-2: #15110d;
  --fondo-3: #1d1813;
  --tinta: #f4f0ea;
  --tinta-suave: #c9bdad;
  --tinta-tenue: #a19484;

  --oro: #dba54e;
  --oro-claro: #f6d08c;
  --cobre: #c0773c;
  --cobre-hondo: #7a4520;
  --tinta-oro: #1a1209;
  --grad-oro: linear-gradient(135deg, #f6d08c 0%, #dba54e 42%, #c0773c 100%);
  --grad-cobre: linear-gradient(150deg, #e3a868 0%, #c0773c 48%, #8e5127 100%);
  --grad-grafito: linear-gradient(160deg, #262019 0%, #17130f 100%);

  --cristal: linear-gradient(155deg, rgba(255, 244, 228, 0.085) 0%, rgba(255, 244, 228, 0.03) 62%);
  --cristal-denso: linear-gradient(155deg, rgba(24, 19, 14, 0.86) 0%, rgba(18, 14, 11, 0.74) 100%);
  --cristal-borde: rgba(255, 238, 214, 0.11);
  --cristal-luz: inset 0 1px 0 rgba(255, 244, 228, 0.1);
  --desenfoque: blur(18px) saturate(1.2);

  --r: 16px;
  --hueco: 8px;
  --margen: clamp(8px, 0.9vw, 14px);
  --seccion: clamp(96px, 10vw, 176px);

  --t-cartel: clamp(110px, 14.4vw, 220px);
  --t-titulo: clamp(36px, 4.2vw, 66px);
  --t-frase: clamp(22px, 2.1vw, 32px);
  --t-texto: 17px;
  --t-peq: 15px;

  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  --viaje: cubic-bezier(0.65, 0, 0.35, 1);

  /* El motor de scroll toma estos */
  --sc-canvas: var(--fondo);
  --sc-surface: var(--fondo-2);
  --sc-ink: var(--tinta);
  --sc-ink-soft: var(--tinta-suave);
  --sc-accent: var(--oro);
  --sc-accent-ink: var(--tinta-oro);
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Archivo", system-ui, sans-serif;
}

/* -------------------------------------------------------------- base y fondo */
html { background: var(--fondo); scroll-padding-top: 88px; }
body {
  background: transparent;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: var(--t-texto);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
/* Brillos ámbar que se desplazan muy despacio + las líneas diagonales del CRM */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(40vmax 34vmax at 72% 18%, rgba(219, 165, 78, 0.16), transparent 70%),
    radial-gradient(36vmax 30vmax at 12% 64%, rgba(192, 119, 60, 0.13), transparent 70%),
    radial-gradient(30vmax 26vmax at 58% 96%, rgba(246, 208, 140, 0.08), transparent 70%);
  animation: brillos 46s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55;
  mix-blend-mode: soft-light;
}
@keyframes brillos {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(-4vmax, 3vmax, 0) rotate(6deg); }
}

[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { height: auto; }
::selection { background: var(--oro); color: var(--tinta-oro); }
:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.saltar {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; border-radius: var(--r);
  background: var(--grad-oro); color: var(--tinta-oro); font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }

main > section { padding-inline: var(--margen); }
main > section + section, main > .cinta + section { margin-top: var(--seccion); }

/* ----------------------------------------------------- tipografía de títulos
   Mayúsculas grandes y apretadas, con la palabra clave en el degradado de la marca moviéndose
   en bucle (.brillo). Saúl lo pidió a partir de su web principal. */
.titulo-seccion {
  font-size: clamp(34px, 4.1vw, 64px);
  font-weight: 760;
  font-stretch: 100%;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.titulo-grande {
  font-size: clamp(46px, 6.4vw, 104px);
  font-weight: 820;
  font-stretch: 100%;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.brillo {
  background-image: linear-gradient(95deg, #f6d08c 0%, #e39b5b 18%, #c0773c 34%, #f3c27e 52%, #db8d4c 70%, #f9dca6 86%, #f6d08c 100%);
  background-size: 200% 100%;
  background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: transparent;
  animation: brillo-fluye 8s linear infinite;
}
.js .brillo { animation-play-state: paused; }
.js .brillo.en-pantalla { animation-play-state: running; }
@keyframes brillo-fluye { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }

/* -------------------------------------------------------------- el fondo vivo
   La A del logo en líneas de oro con un resplandor cobre, en tres capas que se desplazan a
   distinta profundidad siguiendo el cursor (main.js, bloque "ambiente"), y una luz que lo sigue. */
.ambiente { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambiente__luz {
  position: absolute; left: 0; top: 0; width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax;
  background: radial-gradient(closest-side, rgba(226, 164, 106, 0.22), rgba(192, 119, 60, 0.09) 48%, transparent 72%);
  transform: translate3d(70vw, 30vh, 0);
  will-change: transform;
}
/* Cada capa es su propio <svg>: el navegador las mueve en la tarjeta gráfica sin volver a dibujarlas */
/* Sin ratón (pantallas táctiles) la A se queda quieta y es la luz la que pasea por detrás:
   mover capas tan grandes en un móvil cuesta; mover la luz, no. */
.ambiente--deriva .ambiente__capa { will-change: auto; }
.ambiente--deriva .ambiente__luz { animation: deriva-luz 30s ease-in-out infinite alternate; }
@keyframes deriva-luz { 0% { transform: translate3d(20vw, 25vh, 0); } 50% { transform: translate3d(80vw, 45vh, 0); } 100% { transform: translate3d(40vw, 75vh, 0); } }
.ambiente__capa {
  position: absolute; right: -14vw; bottom: -16vh;
  height: 128vh; width: auto; aspect-ratio: 800 / 470;
  overflow: visible; will-change: transform; transform: translate3d(0, 0, 0);
}
@media (max-width: 899px) {
  .ambiente__capa { height: 86vh; right: -62vw; bottom: 4vh; opacity: 0.8; }
  /* el grano sin modo de fusión: fundirlo con toda la pantalla en cada fotograma pesa en el móvil */
  body::after { mix-blend-mode: normal; opacity: 0.07; }
}


/* Cabecera de sección: el título a la izquierda y su texto a la derecha, sobre la misma rejilla,
   para que ninguna sección quede volcada a un lado. */
.cabeza {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco);
  align-items: end;
  max-width: none;
  padding-inline: 12px;
}
.cabeza > h2 { grid-column: 1 / 7; }
.cabeza > p { grid-column: 8 / -1; margin-top: 0 !important; max-width: 52ch; color: var(--tinta-suave); }
.cabeza > .problema__lead { grid-column: 7 / -1; max-width: 46ch; color: var(--tinta); }
@media (max-width: 899px) {
  .cabeza { grid-template-columns: 1fr; row-gap: 16px; }
  .cabeza > h2, .cabeza > p, .cabeza > .problema__lead { grid-column: 1; }
}

/* ------------------------------------------------------------------ piezas */
.pieza { position: relative; border-radius: var(--r); overflow: hidden; }
.pieza--cristal {
  background: var(--cristal);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-luz);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
}
.pieza--densa { background: var(--cristal-denso); }
.pieza--cobre { background: var(--grad-oro); color: var(--tinta-oro); }
.pieza--oscura { background: var(--grad-grafito); border: 1px solid rgba(255, 238, 214, 0.06); }
.pieza--foto { background: var(--fondo-2); }
.pieza--foto > img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 650; line-height: 1.1; text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--sale), filter 220ms var(--sale), background-color 220ms;
}
.boton svg { width: 18px; height: 18px; transition: transform 260ms var(--sale); }
.boton:hover svg { transform: translateX(3px); }
.boton:active { transform: scale(0.97); }
.boton--oro { background: var(--grad-oro); color: var(--tinta-oro); }
.boton--oro:hover { filter: brightness(1.08) saturate(1.05); }
.boton--oscuro { background: #17110b; color: var(--tinta); }
.boton--oscuro:hover { background: #241a11; }
.boton--fantasma { background: rgba(255, 244, 228, 0.06); color: var(--tinta); }
.boton--fantasma:hover { background: rgba(255, 244, 228, 0.12); }
.boton--peq { min-height: 42px; padding: 0 18px; font-size: 15px; }
.boton[disabled] { opacity: 0.6; cursor: progress; }

/* -------------------------------------------------------------- barra fija */
.barra {
  position: fixed; top: var(--margen); left: var(--margen); right: var(--margen); z-index: 50;
  display: flex; align-items: center; gap: 24px;
  height: 64px; padding: 0 12px 0 20px;
  border-radius: var(--r);
  background: rgba(16, 13, 10, 0.72);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-luz), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--desenfoque);
  backdrop-filter: var(--desenfoque);
  transform: translateY(calc(-100% - 24px));
  transition: transform 420ms var(--sale);
}
.barra.esta-visible { transform: none; }
.barra__marca img { width: 104px; height: auto; }
.barra__nav { display: flex; gap: 4px; margin-left: auto; }
.barra__nav a {
  padding: 10px 14px; border-radius: 999px; font-size: 15px; text-decoration: none; color: var(--tinta-suave);
  transition: color 200ms, background-color 200ms;
}
.barra__nav a:hover, .barra__nav a[aria-current="true"] { color: var(--tinta); background: rgba(255, 244, 228, 0.07); }

/* ==================================================================== HERO */
.hero {
  --banda: clamp(130px, 20vh, 190px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: var(--banda) 64px minmax(0, 1fr);
  gap: var(--hueco);
  height: max(100svh, 760px);
  padding-block: var(--margen);
}
.hero__banda {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
}
/* El logo oficial: ATN en vectorial (medido sobre el PNG de marca, scripts/logo.mjs) y la palabra
   PROJECT recortada del original. En escritorio va en horizontal, a la altura de la banda; en el
   móvil, apilado como en el logo de siempre. --alto es la altura de las letras ATN. */
.marca-atn {
  --alto: min(calc(var(--banda) * 0.72), calc((100vw - 120px) / 7.7));
  display: flex; align-items: flex-end; gap: calc(var(--alto) * 0.3);
}
.marca-atn__letras { flex: none; width: calc(var(--alto) * 3.898); height: var(--alto); overflow: visible; }
.marca-atn__letras path { fill: var(--tinta); transform-box: fill-box; }
.marca-atn__letras .logo-atn__cobre { fill: url(#g-logo); }
.marca-atn__project { flex: none; height: calc(var(--alto) * 0.42); width: auto; margin-bottom: calc(var(--alto) * -0.03); }

/* Entrada: las letras suben una a una y la pieza de cobre entra por su diagonal hasta encajar en la A. */
.js .marca-atn .logo-atn__a, .js .marca-atn .logo-atn__t, .js .marca-atn .logo-atn__n { animation: letra-sube 900ms var(--sale) both; }
.js .marca-atn .logo-atn__t { animation-delay: 90ms; }
.js .marca-atn .logo-atn__n { animation-delay: 180ms; }
.js .marca-atn .logo-atn__cobre { animation: cobre-encaja 1100ms var(--sale) 620ms both; }
.js .marca-atn__project { animation: project-entra 1000ms var(--sale) 420ms both; }
@keyframes letra-sube { from { opacity: 0; transform: translateY(38%); } }
@keyframes cobre-encaja {
  0% { opacity: 0; transform: translate(-62%, 90%); }
  55% { opacity: 1; }
  82% { filter: brightness(1.35); }
  100% { transform: none; filter: none; }
}
@keyframes project-entra { from { clip-path: inset(0 100% 0 0); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
/* En el pie la entrada espera a que el logo se vea */
.js .marca-atn--pie path, .js .marca-atn--pie .marca-atn__project { animation-play-state: paused; }
.js .marca-atn--pie.esta-visible path, .js .marca-atn--pie.esta-visible .marca-atn__project { animation-play-state: running; }
.hero__enlaces {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hueco);
}
.pieza--enlace {
  display: flex; align-items: flex-start;
  padding: 18px 22px;
  font-size: 16px; font-weight: 550; text-decoration: none;
  transition: background-color 220ms, transform 220ms var(--sale);
}
.pieza--enlace::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid var(--oro); border-right: 2px solid var(--oro);
  transform: translateY(-50%) rotate(45deg); opacity: 0.6; transition: transform 260ms var(--sale), opacity 200ms;
}
.pieza--enlace:hover { background-color: rgba(255, 244, 228, 0.06); }
.pieza--enlace:hover::after { opacity: 1; transform: translate(3px, -50%) rotate(45deg); }

.hero__izq {
  grid-column: 1 / 3; grid-row: 3;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--hueco);
  min-height: 0;
}
.hero__retrato { min-height: 0; }
.hero__retrato img { transform-origin: 50% 30%; }
.hero__datos { padding: 20px 20px 22px; font-size: var(--t-peq); line-height: 1.35; color: var(--tinta-suave); }
.hero__datos li + li { margin-top: 10px; }
.hero__datos li::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 2px;
  background: var(--grad-oro); transform: translateY(-2px);
}

.hero__centro { grid-column: 3 / 11; grid-row: 3; min-height: 0; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.hero__centro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13, 11, 9, 0.72) 0%, rgba(13, 11, 9, 0) 46%);
}
.hero__frase {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  width: min(760px, calc(100% - 24px));
  padding: 26px 28px 28px;
}
.hero__frase h1 {
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 780;
  font-stretch: 100%;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero__frase p { margin-top: 14px; max-width: 58ch; font-size: var(--t-texto); line-height: 1.5; color: var(--tinta-suave); }

.aviso {
  position: absolute; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 14px;
  background: rgba(22, 17, 13, 0.62);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-luz), 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  font-size: 14px; line-height: 1.3; color: var(--tinta-suave);
  will-change: transform;
}
.aviso b { display: block; color: var(--tinta); font-weight: 650; }
.aviso__icono {
  flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px;
  color: var(--tinta-oro); background: var(--grad-oro);
}
.aviso--1 { left: 5%; top: 9%; }
.aviso--2 { right: 5%; top: 22%; }
.aviso--3 { left: 34%; top: 40%; }

.hero__der {
  grid-column: 11 / 13; grid-row: 3;
  display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); gap: var(--hueco);
  min-height: 0;
}
.hero__dato {
  padding: 16px 18px; font-size: var(--t-peq); line-height: 1.3; color: var(--tinta-suave);
  border: 1px solid var(--cristal-borde);
}
.hero__dato b { display: block; margin-bottom: 4px; font-size: clamp(22px, 1.9vw, 30px); font-weight: 750; font-stretch: 110%; letter-spacing: -0.02em; color: var(--tinta); }
.hero__dato--1 { background: linear-gradient(160deg, rgba(255, 244, 228, 0.17), rgba(255, 244, 228, 0.08)); }
.hero__dato--2 { background: linear-gradient(160deg, rgba(255, 244, 228, 0.12), rgba(255, 244, 228, 0.05)); }
.hero__dato--3 { background: linear-gradient(160deg, rgba(255, 244, 228, 0.08), rgba(255, 244, 228, 0.03)); }
.hero__dato--4 { background: linear-gradient(160deg, rgba(255, 244, 228, 0.05), rgba(255, 244, 228, 0.015)); display: flex; align-items: flex-end; color: var(--tinta); font-weight: 550; }
.hero__accion {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px; text-decoration: none;
  background: var(--grad-oro); color: var(--tinta-oro);
  font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  transition: filter 220ms;
}
.hero__accion svg { width: 30px; height: 30px; align-self: flex-end; transition: transform 300ms var(--sale); }
.hero__accion:hover { filter: brightness(1.07); }
.hero__accion:hover svg { transform: translateX(5px); }

/* Entrada del hero: las piezas se colocan una a una, como al montar el tablero */
.js .hero > *, .js .hero__izq > *, .js .hero__der > * { animation: encaja 900ms var(--sale) both; }
.js .hero__banda { animation-delay: 0ms; }
.js .hero__enlaces { animation-delay: 90ms; }
.js .hero__centro { animation-delay: 160ms; }
.js .hero__izq > :nth-child(1) { animation-delay: 240ms; }
.js .hero__izq > :nth-child(2) { animation-delay: 320ms; }
.js .hero__der > :nth-child(1) { animation-delay: 260ms; }
.js .hero__der > :nth-child(2) { animation-delay: 320ms; }
.js .hero__der > :nth-child(3) { animation-delay: 380ms; }
.js .hero__der > :nth-child(4) { animation-delay: 440ms; }
.js .hero__der > :nth-child(5) { animation-delay: 520ms; }
.js .hero__izq, .js .hero__der { animation: none; }
.js .aviso { animation: aviso-entra 900ms var(--sale) both; }
.js .aviso--1 { animation-delay: 700ms; }
.js .aviso--2 { animation-delay: 950ms; }
.js .aviso--3 { animation-delay: 1200ms; }
@keyframes encaja { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.985); } }
@keyframes aviso-entra { from { opacity: 0; translate: 0 18px; scale: 0.94; } }

/* ============================================================== EL PROBLEMA */
.problema {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco); row-gap: 48px; align-items: center;
}
.problema__texto { grid-column: 1 / 8; padding-inline: 12px; }
.problema__texto .titulo-grande { font-size: clamp(40px, 5.2vw, 86px); }
.titulo-grande .linea { display: block; width: fit-content; white-space: nowrap; }
.problema__sub {
  margin-top: 30px; max-width: 34ch;
  font-size: clamp(17px, 1.45vw, 22px); font-weight: 650; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 0.035em;
}
.problema__sub .brillo { display: block; width: fit-content; }
.problema__lista { margin-top: 36px; display: grid; gap: 12px; }
.problema__lista li { display: flex; align-items: center; gap: 16px; font-size: clamp(17px, 1.3vw, 19px); color: var(--tinta-suave); }
.problema__lista svg {
  flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 14px;
  color: var(--oro-claro); background: linear-gradient(150deg, rgba(219, 165, 78, 0.2), rgba(192, 119, 60, 0.06));
  border: 1px solid rgba(219, 165, 78, 0.28);
}
.problema__foto { grid-column: 8 / -1; position: relative; margin: 0; }
.problema__marco { aspect-ratio: 4 / 5; }
.problema__marco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 11, 9, 0.85), rgba(13, 11, 9, 0) 45%); }
.problema__marco img { transform: scale(1.06); transition: transform 1800ms var(--sale); }
.problema__foto.sc-in .problema__marco img { transform: none; }
.caos { position: absolute; inset: 0; pointer-events: none; }
.caos__aviso {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 14px; white-space: nowrap;
  background: rgba(22, 17, 13, 0.78); border: 1px solid var(--cristal-borde);
  box-shadow: var(--cristal-luz), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  font-size: 14px; color: var(--tinta);
  animation: flota 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1.6s);
}
.caos__aviso b { font-weight: 600; }
.caos__aviso svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: var(--tinta-oro); background: var(--grad-oro); }
.caos__aviso::after {
  content: ""; position: absolute; top: -4px; left: 28px; width: 10px; height: 10px; border-radius: 50%;
  background: #f08a6e; box-shadow: 0 0 0 0 rgba(240, 138, 110, 0.6); animation: avisa 1.8s ease-out infinite;
}
.caos__aviso:nth-child(1) { left: -9%; top: 9%; }
.caos__aviso:nth-child(2) { right: 3%; top: 30%; }
.caos__aviso:nth-child(3) { left: -12%; top: 52%; }
.caos__aviso:nth-child(4) { right: 7%; top: 68%; }
@keyframes flota { from { transform: translate3d(0, 0, 0) rotate(-1.2deg); } to { transform: translate3d(0, -12px, 0) rotate(1deg); } }
@keyframes avisa { to { box-shadow: 0 0 0 10px rgba(240, 138, 110, 0); } }
.problema__pie {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
  padding: 16px 20px; border-radius: 14px;
  background: rgba(16, 12, 9, 0.8); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  font-size: clamp(15px, 1.2vw, 17px); font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.35;
}

/* ============================================================== PARA QUIÉN */
.quien__titulo { padding-inline: 12px; }
.quien__tablero { margin-top: 36px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.mosaico {
  grid-column: 1 / 6; grid-template-rows: repeat(2, minmax(0, 1fr));
  position: relative; /* las piezas miden su trozo de foto respecto al mosaico */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco);
}
.mosaico__pieza { position: relative; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--fondo-2); }
.mosaico__pieza > img { position: absolute; max-width: none; transition: transform 700ms var(--sale); }
.mosaico__pieza:hover > img { transform: scale(1.08); }
.js .mosaico__pieza { opacity: 0.35; transform: scale(0.94); transition: opacity 700ms var(--sale), transform 700ms var(--sale); transition-delay: var(--retraso, 0ms); }
.js .mosaico.esta-visible .mosaico__pieza { opacity: 1; transform: none; }
.quien__lista { grid-column: 6 / -1; display: grid; grid-auto-rows: 1fr; padding: 8px 6px; }
.quien__lista li {
  display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: 12px;
  transition: background-color 300ms;
}
.quien__lista li + li { background: linear-gradient(rgba(255, 238, 214, 0.08), rgba(255, 238, 214, 0.08)) top / 100% 1px no-repeat; }
.quien__lista li:hover { background: rgba(219, 165, 78, 0.07); }
.quien__lista b { display: block; font-size: clamp(17px, 1.35vw, 21px); font-weight: 650; letter-spacing: -0.01em; }
.quien__lista small { display: block; margin-top: 2px; font-size: 14px; color: var(--tinta-tenue); }
.marca-check {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad-oro); box-shadow: 0 0 0 6px rgba(219, 165, 78, 0.1);
  transform: scale(0.6); opacity: 0.4; transition: transform 500ms var(--sale), opacity 500ms; transition-delay: calc(var(--i, 0) * 110ms);
}
.marca-check svg { width: 22px; height: 22px; }
.marca-check path { fill: none; stroke: var(--tinta-oro); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 600ms var(--sale); transition-delay: calc(var(--i, 0) * 110ms + 220ms); }
.quien__lista.esta-visible .marca-check { transform: none; opacity: 1; }
.quien__lista.esta-visible .marca-check path { stroke-dashoffset: 0; }
.no-js .marca-check { transform: none; opacity: 1; }
.no-js .marca-check path { stroke-dashoffset: 0; }

/* La pregunta de la IA, destacada: borde de luz que gira alrededor y la A del logo al fondo */
.foco { position: relative; margin-top: var(--hueco); padding: 1.5px; border-radius: calc(var(--r) + 4px); overflow: hidden; isolation: isolate; }
.foco::before {
  content: ""; position: absolute; inset: -80% -10%; z-index: -1;
  background: conic-gradient(from 0deg, rgba(219, 165, 78, 0.15) 0 55%, #f6d08c 68%, #c0773c 76%, rgba(219, 165, 78, 0.15) 88%);
  animation: gira 7s linear infinite;
}
@keyframes gira { to { transform: rotate(1turn); } }
.foco__dentro {
  position: relative; overflow: hidden; border-radius: calc(var(--r) + 2.5px);
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px 56px; align-items: center;
  padding: clamp(28px, 4.4vw, 72px);
  background: radial-gradient(90% 140% at 88% 110%, rgba(219, 165, 78, 0.24), transparent 60%), linear-gradient(160deg, #1e1813, #100c09);
}
.foco__a { position: absolute; right: -3%; bottom: -14%; width: min(46%, 620px); pointer-events: none; }
.foco__a path { fill: rgba(255, 244, 228, 0.045); }
.foco__a .foco__a-cobre { fill: url(#g-logo); opacity: 0.32; }
.foco__titulo, .foco__texto, .boton--grande { grid-column: 1; position: relative; z-index: 1; }
.foco__titulo { font-size: clamp(30px, 3.5vw, 58px); font-weight: 820; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.foco__texto { font-size: clamp(17px, 1.35vw, 20px); color: var(--tinta-suave); max-width: 44ch; }
.boton--grande { justify-self: start; min-height: 62px; padding: 0 30px; font-size: 18px; box-shadow: 0 18px 44px -16px rgba(219, 165, 78, 0.6); }
.foco__ruta { grid-column: 2; grid-row: 1 / 4; position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.foco__ruta::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(rgba(219, 165, 78, 0.7), rgba(219, 165, 78, 0.1)); }
.foco__ruta li {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 999px;
  background: rgba(22, 17, 13, 0.7); border: 1px solid var(--cristal-borde); font-size: 17px; font-weight: 600;
}
.foco__ruta li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 244, 228, 0.08); border: 2px solid rgba(219, 165, 78, 0.6); }
.foco__ruta li:first-child::before { background: var(--grad-oro); border-color: transparent; box-shadow: 0 0 0 6px rgba(219, 165, 78, 0.18); animation: late 2s ease-in-out infinite; }
@keyframes late { 50% { box-shadow: 0 0 0 11px rgba(219, 165, 78, 0); } }

/* ======================================================= ESCENA: SE ORDENA */
.orden-acto { padding-inline: 0 !important; }
/* Sin fijar (móvil o movimiento reducido) el escenario es un bloque normal, sin sticky ni z-index. */
.orden-acto[data-sc-act="flow"] .sc-stage { position: relative; z-index: auto; height: auto; min-height: 100svh; }
.orden-acto[data-sc-act="flow"] .orden__lienzo { min-height: 52svh; }
.orden {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--hueco);
  padding: clamp(84px, 11vh, 120px) calc(var(--margen) + 12px) clamp(28px, 5vh, 56px);
}
.orden__cabeza { padding-inline: 0; }
.orden__lienzo { grid-column: 1 / -1; position: relative; min-height: 0; margin-block: 24px; }
.orden__lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orden__etiquetas span {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  padding: 7px 12px; border-radius: 999px;
  font-size: 14px; white-space: nowrap;
  background: rgba(22, 17, 13, 0.7); border: 1px solid var(--cristal-borde);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  transition: opacity 300ms;
}
.orden__etiquetas--caos span { color: var(--tinta-suave); }
.orden__etiquetas--orden span { color: var(--tinta-oro); background: var(--grad-oro); border-color: transparent; font-weight: 600; opacity: 0; }
.orden__pasos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hueco); }
.orden__paso {
  --avance: 0;
  position: relative; padding: 20px 22px 22px; border-radius: var(--r);
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  transition: background-color 300ms;
}
.orden__paso::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--grad-oro); transform-origin: left; transform: scaleX(var(--avance));
}
.orden__paso b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.orden__paso span { display: block; margin-top: 6px; font-size: var(--t-peq); line-height: 1.45; color: var(--tinta-suave); }
.orden__paso.esta-activo { background-color: rgba(219, 165, 78, 0.1); }
.orden__paso.esta-activo b { color: var(--oro-claro); }

/* ================================================================== DEMO */
.demo-seccion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); }
.demo-tablero {
  grid-column: 1 / -1; margin-top: 40px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco);
}
.demo-guia { grid-column: 1 / 4; display: grid; grid-auto-rows: 1fr; gap: var(--hueco); }
.demo-guia li { display: flex; }
.demo-guia__paso {
  width: 100%; text-align: left; cursor: pointer; padding: 20px 22px;
  color: var(--tinta); font: inherit;
  transition: background-color 220ms, border-color 220ms, transform 220ms var(--sale);
}
.demo-guia__paso b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.demo-guia__paso span { display: block; margin-top: 6px; font-size: var(--t-peq); line-height: 1.45; color: var(--tinta-suave); }
.demo-guia__paso:hover { background-color: rgba(255, 244, 228, 0.05); }
.demo-guia__paso:active { transform: scale(0.985); }
.demo-guia__paso[aria-current="true"] { border-color: rgba(219, 165, 78, 0.55); background-color: rgba(219, 165, 78, 0.09); }
.demo-guia__paso[aria-current="true"] b { color: var(--oro-claro); }
.demo-cierre {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 24px 24px 28px;
}
.demo-cierre p { max-width: 70ch; font-size: 18px; line-height: 1.4; }

/* ------------------------------------------------- la aplicación de ejemplo */
.app {
  grid-column: 4 / -1;
  display: grid; grid-template-columns: 228px minmax(0, 1fr);
  height: clamp(620px, 84svh, 780px);
  padding: 10px; gap: 10px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(30, 24, 18, 0.82), rgba(14, 11, 9, 0.9));
  border: 1px solid rgba(255, 238, 214, 0.12);
  box-shadow: var(--cristal-luz), 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  font-size: 15px; line-height: 1.4;
  overflow: hidden;
  isolation: isolate;
}
.app::before {
  content: ""; position: absolute; z-index: -1; width: 70%; height: 70%; right: -10%; top: -20%;
  background: radial-gradient(closest-side, rgba(219, 165, 78, 0.16), transparent);
  pointer-events: none;
}
.app { position: relative; }
.app button { font: inherit; color: inherit; cursor: pointer; }
.app__lado {
  display: flex; flex-direction: column; gap: 14px; min-height: 0;
  padding: 18px 12px 12px; border-radius: 18px;
  background: rgba(255, 244, 228, 0.035); border: 1px solid rgba(255, 238, 214, 0.07);
}
.app__marca { padding: 0 8px 6px; }
.app__marca img { width: 108px; height: auto; }
.app__marca span { display: block; margin-top: 10px; font-size: 13px; color: var(--tinta-tenue); letter-spacing: 0.02em; }
.app__menu { display: grid; gap: 4px; }
.app__opcion {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; background: none;
  text-align: left; color: var(--tinta-suave);
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.app__opcion svg { width: 20px; height: 20px; flex: none; }
.app__opcion:hover { background: rgba(255, 244, 228, 0.05); color: var(--tinta); }
.app__opcion[aria-current="page"] {
  color: var(--tinta); background: linear-gradient(90deg, rgba(219, 165, 78, 0.16), rgba(219, 165, 78, 0.04));
  border-color: rgba(219, 165, 78, 0.35);
}
.app__opcion[aria-current="page"]::before {
  content: ""; position: absolute; left: -7px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--grad-oro);
}
.app__opcion[aria-current="page"] svg { color: var(--oro); }
.app__cuenta { margin-left: auto; font-style: normal; font-size: 13px; color: var(--tinta-tenue); }
.app__cuenta:empty { display: none; }
.app__cuenta--aviso { min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; background: var(--grad-oro); color: var(--tinta-oro); font-weight: 700; }
.app__ahorro {
  margin-top: auto; padding: 14px; border-radius: 14px;
  background: rgba(255, 244, 228, 0.04); border: 1px solid rgba(255, 238, 214, 0.07);
}
.app__ahorro span, .app__ahorro small { display: block; font-size: 13px; color: var(--tinta-tenue); }
.app__ahorro b { display: block; margin: 4px 0 10px; font-size: 26px; font-weight: 750; letter-spacing: -0.02em; }
.app__barra { height: 6px; border-radius: 6px; background: rgba(255, 244, 228, 0.08); overflow: hidden; }
.app__barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad-oro); transition: width 700ms var(--sale); }
.app__ahorro small { margin-top: 8px; }
.app__usuario { display: flex; align-items: center; gap: 10px; padding: 6px 8px 2px; }
.app__usuario i, .ini {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  font-style: normal; font-size: 13px; font-weight: 700;
  background: rgba(255, 244, 228, 0.08); border: 1px solid rgba(255, 238, 214, 0.1); color: var(--tinta);
}
.app__usuario b { display: block; font-size: 14px; }
.app__usuario small { display: block; font-size: 13px; color: var(--tinta-tenue); }

.app__cuerpo { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 10px; }
.app__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 18px;
  background: rgba(255, 244, 228, 0.035); border: 1px solid rgba(255, 238, 214, 0.07);
}
.app__titulo { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.app__sub { margin-top: 4px; font-size: 14px; color: var(--tinta-tenue); }
.app__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.app__chip { padding: 7px 12px; border-radius: 999px; font-size: 13px; color: var(--tinta-suave); background: rgba(255, 244, 228, 0.06); border: 1px solid rgba(255, 238, 214, 0.08); }
.app__reiniciar {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(219, 165, 78, 0.55); background: none; color: var(--oro-claro); font-size: 13px;
  transition: background-color 200ms;
}
.app__reiniciar:hover { background: rgba(219, 165, 78, 0.12); }
.app__reiniciar svg { width: 16px; height: 16px; }
.app__vista { flex: 1; min-height: 0; overflow: auto; border-radius: 18px; scrollbar-width: thin; scrollbar-color: rgba(219, 165, 78, 0.4) transparent; }
.app__vista:focus { outline: none; }
.app__vista > div { min-height: 100%; }
.app__vista > div:has(> .tg) { height: 100%; }
.app__noscript { padding: 24px; color: var(--tinta-suave); }
.app__aviso {
  position: absolute; left: 50%; bottom: 14px; z-index: 5;
  max-width: calc(100% - 28px); padding: 12px 18px; border-radius: 14px;
  background: rgba(30, 24, 18, 0.94); border: 1px solid rgba(219, 165, 78, 0.45);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7);
  font-size: 14px; color: var(--tinta);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 260ms, transform 360ms var(--sale);
}
.app__aviso.esta-visible { opacity: 1; transform: translate(-50%, 0); }
.app__aviso b { color: var(--oro-claro); }

/* Tarjetas genéricas dentro de la app */
.caja {
  padding: 16px 18px; border-radius: 16px;
  background: rgba(255, 244, 228, 0.04); border: 1px solid rgba(255, 238, 214, 0.08);
}
.caja__titulo { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.caja__sub { font-size: 13px; color: var(--tinta-tenue); }
.vista-entra { animation: vista-entra 420ms var(--sale) both; }
@keyframes vista-entra { from { opacity: 0; transform: translateY(10px); } }

/* Panel */
.panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 16px; }
.kpi span { display: block; font-size: 13px; color: var(--tinta-tenue); }
.kpi b { display: block; margin-top: 6px; font-size: clamp(22px, 1.8vw, 28px); font-weight: 750; letter-spacing: -0.02em; }
.kpi small { display: block; margin-top: 2px; font-size: 13px; color: var(--oro-claro); }
.panel__obras { grid-column: 1 / 3; }
.panel__ia { grid-column: 3 / -1; display: flex; flex-direction: column; }
.lista-obras { margin-top: 10px; }
.lista-obras li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid rgba(255, 238, 214, 0.07); }
.lista-obras li:first-child { border-top: 0; }
.lista-obras small { color: var(--tinta-tenue); font-size: 13px; }
.avance { grid-column: 1 / -1; height: 5px; border-radius: 5px; background: rgba(255, 244, 228, 0.08); overflow: hidden; }
.avance i { display: block; height: 100%; border-radius: inherit; background: var(--grad-oro); transition: width 600ms var(--sale); }
.etiqueta { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.etiqueta--retraso { background: rgba(232, 112, 80, 0.16); color: #f2a58f; }
.etiqueta--ok { background: rgba(140, 200, 140, 0.13); color: #b6dfb2; }
.etiqueta--oro { background: rgba(219, 165, 78, 0.16); color: var(--oro-claro); }
.ia__chat { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; min-height: 120px; }
.ia__msg { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.ia__msg--yo { align-self: flex-end; background: rgba(219, 165, 78, 0.16); border: 1px solid rgba(219, 165, 78, 0.3); }
.ia__msg--ia { align-self: flex-start; background: rgba(255, 244, 228, 0.05); border: 1px solid rgba(255, 238, 214, 0.08); color: var(--tinta-suave); }
.ia__msg--ia b { color: var(--tinta); }
.ia__preguntas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-boton {
  padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 238, 214, 0.12); background: rgba(255, 244, 228, 0.04);
  font-size: 13.5px; color: var(--tinta); transition: background-color 200ms, border-color 200ms, transform 200ms var(--sale);
}
.chip-boton:hover { background: rgba(219, 165, 78, 0.12); border-color: rgba(219, 165, 78, 0.45); }
.chip-boton:active { transform: scale(0.97); }
.chip-boton[disabled] { opacity: 0.45; cursor: default; }
.escribiendo { display: inline-flex; gap: 4px; padding: 4px 0; }
.escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-tenue); animation: punto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* Presupuesto */
.presu { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; }
.presu__form { display: grid; gap: 16px; align-content: start; }
.presu__grupo > span { display: block; margin-bottom: 8px; font-size: 13px; color: var(--tinta-tenue); }
.opciones { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion {
  padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(255, 238, 214, 0.1); background: rgba(255, 244, 228, 0.03);
  font-size: 14px; transition: background-color 200ms, border-color 200ms, color 200ms;
}
.opcion:hover { border-color: rgba(219, 165, 78, 0.4); }
.opcion[aria-pressed="true"] { background: var(--grad-oro); color: var(--tinta-oro); border-color: transparent; font-weight: 650; }
.metros { display: flex; align-items: center; gap: 14px; }
.metros input[type="range"] { flex: 1; accent-color: var(--oro); }
.metros output { min-width: 64px; text-align: right; font-size: 20px; font-weight: 700; }
.presu__cliente { display: grid; gap: 6px; }
.presu__cliente input {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 238, 214, 0.12);
  background: rgba(0, 0, 0, 0.2); color: var(--tinta); font: inherit; font-size: 14px;
}
.presu__cliente input:focus { outline: none; border-color: var(--oro); }
.presu__hoja { display: flex; flex-direction: column; }
.presu__hoja .caja__titulo { display: flex; justify-content: space-between; align-items: baseline; }
.partidas { margin-top: 10px; flex: 1; }
.partidas li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 238, 214, 0.07); font-size: 14px; }
.partidas li span:last-child { white-space: nowrap; color: var(--tinta-suave); }
.partidas li.entra { animation: partida 380ms var(--sale) both; }
@keyframes partida { from { opacity: 0; transform: translateX(-8px); } }
.presu__totales { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255, 238, 214, 0.14); font-size: 14px; color: var(--tinta-suave); }
.presu__totales p { display: flex; justify-content: space-between; }
.presu__total { margin-top: 6px; color: var(--tinta); font-size: 15px; }
.presu__total b { font-size: 28px; font-weight: 750; letter-spacing: -0.02em; }
.presu__boton { margin-top: 14px; width: 100%; min-height: 46px; border-radius: 12px; border: 0; background: var(--grad-oro); color: var(--tinta-oro); font-weight: 700; transition: filter 200ms, transform 200ms var(--sale); }
.presu__boton:hover { filter: brightness(1.07); }
.presu__boton:active { transform: scale(0.98); }
.presu__nota { margin-top: 8px; font-size: 13px; color: var(--tinta-tenue); text-align: center; }

/* Obras (tablero) */
.obras { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 10px; min-height: 100%; }
.columna { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(255, 244, 228, 0.03); border: 1px solid rgba(255, 238, 214, 0.06); transition: background-color 200ms, border-color 200ms; }
.columna.es-destino { background: rgba(219, 165, 78, 0.08); border-color: rgba(219, 165, 78, 0.4); }
.columna__cabeza { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 4px; font-size: 13.5px; font-weight: 650; color: var(--tinta-suave); }
.columna__cabeza i { font-style: normal; color: var(--tinta-tenue); font-weight: 500; }
.tarjeta {
  position: relative; padding: 12px; border-radius: 12px; cursor: grab; user-select: none;
  background: linear-gradient(160deg, rgba(255, 244, 228, 0.08), rgba(255, 244, 228, 0.035));
  border: 1px solid rgba(255, 238, 214, 0.1);
  transition: transform 220ms var(--sale), box-shadow 220ms, border-color 200ms;
}
.tarjeta:hover { border-color: rgba(219, 165, 78, 0.45); }
@media (hover: hover) and (pointer: fine) { .tarjeta { touch-action: none; } }
.tarjeta.es-nueva { animation: nueva 900ms var(--sale) both; }
@keyframes nueva { 0% { opacity: 0; transform: translateY(-10px) scale(0.96); box-shadow: 0 0 0 2px var(--oro); } 60% { box-shadow: 0 0 0 2px var(--oro); } }
.tarjeta.se-arrastra { cursor: grabbing; opacity: 0.35; }
.tarjeta__fantasma { position: fixed; z-index: 200; pointer-events: none; transform: rotate(2deg) scale(1.03); box-shadow: 0 24px 50px -14px rgba(0, 0, 0, 0.75); opacity: 0.96; background: #2a2119; }
.tarjeta b { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; }
.tarjeta small { display: block; margin-top: 2px; font-size: 13px; color: var(--tinta-tenue); }
.tarjeta__pie { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.tarjeta__mover { display: flex; gap: 4px; }
.tarjeta__mover button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 238, 214, 0.1); background: rgba(0, 0, 0, 0.2); }
.tarjeta__mover button:hover { border-color: var(--oro); }
.tarjeta__mover button[disabled] { opacity: 0.3; cursor: default; }
.tarjeta__mover svg { width: 14px; height: 14px; }
.tarjeta .avance { margin-top: 8px; }
.tarjeta__aviso { margin-top: 8px; }
.tarjeta__pie > span:first-child { white-space: nowrap; }

.ficha {
  position: absolute; inset: 0; z-index: 4; display: flex; justify-content: flex-end;
  background: rgba(8, 6, 5, 0.45); border-radius: 18px;
  animation: vista-entra 260ms var(--sale) both;
}
.ficha__hoja {
  width: min(420px, 100%); height: 100%; overflow: auto; padding: 20px;
  border-radius: 18px; background: linear-gradient(160deg, #241d16, #15110d); border: 1px solid rgba(255, 238, 214, 0.12);
  animation: ficha-entra 420ms var(--sale) both;
}
@keyframes ficha-entra { from { transform: translateX(30px); opacity: 0; } }
.ficha__cabeza { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ficha__cabeza h3 { font-size: 20px; letter-spacing: -0.015em; }
.ficha__cerrar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255, 238, 214, 0.12); background: none; flex: none; }
.ficha__cerrar svg { width: 18px; height: 18px; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0; font-size: 14px; }
.ficha dt { color: var(--tinta-tenue); }
.ficha dd { margin: 0; }
.ficha h4 { margin: 18px 0 8px; font-size: 14px; color: var(--tinta-suave); font-weight: 650; }
.ficha ul li { padding: 8px 0; border-top: 1px solid rgba(255, 238, 214, 0.07); font-size: 14px; }
.ficha__foto { margin-top: 8px; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Telegram */
.tg { display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; height: 100%; min-height: 0; }
.tg__conv { min-height: 0; }
.tg__chats { padding: 8px; }
.tg__chat { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; font-size: 14px; }
.tg__chat.es-activo { background: rgba(219, 165, 78, 0.1); border: 1px solid rgba(219, 165, 78, 0.3); }
.tg__chat small { display: block; color: var(--tinta-tenue); font-size: 13px; }
.tg__conv { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.tg__cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 238, 214, 0.08); }
.tg__cab small { display: block; font-size: 13px; color: var(--tinta-tenue); }
.tg__mensajes { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.burbuja { max-width: 78%; padding: 9px 13px 7px; border-radius: 16px; font-size: 14px; line-height: 1.42; animation: burbuja 360ms var(--sale) both; }
.burbuja time { display: block; margin-top: 3px; font-size: 13px; text-align: right; opacity: 0.6; }
.burbuja--yo { align-self: flex-end; border-bottom-right-radius: 5px; background: linear-gradient(160deg, rgba(219, 165, 78, 0.3), rgba(192, 119, 60, 0.22)); border: 1px solid rgba(219, 165, 78, 0.35); }
.burbuja--bot { align-self: flex-start; border-bottom-left-radius: 5px; background: rgba(255, 244, 228, 0.06); border: 1px solid rgba(255, 238, 214, 0.09); }
.burbuja--bot b { color: var(--oro-claro); font-weight: 650; }
.burbuja__foto { width: 220px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.burbuja__foto img { width: 100%; height: 100%; object-fit: cover; }
@keyframes burbuja { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.tg__respuestas { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid rgba(255, 238, 214, 0.08); }
.tg__respuestas p { width: 100%; font-size: 13px; color: var(--tinta-tenue); }
.tg__respuestas .chip-boton { display: inline-flex; align-items: center; gap: 6px; }
.tg__respuestas .chip-boton svg { width: 16px; height: 16px; color: var(--oro); }

/* ============================================================== LO QUE MONTAMOS
   Escaparate: a la izquierda los cinco servicios (pestañas que avanzan solas), a la derecha una
   escena animada por servicio. Las animaciones arrancan cuando el panel lleva .es-activo. */
.vitrina { margin-top: 40px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.vitrina__lista { grid-column: 1 / 5; display: flex; flex-direction: column; gap: var(--hueco); }
.vitrina__tab {
  flex: 1; position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 84px; padding: 20px 24px; border-radius: var(--r); text-align: left; cursor: pointer;
  font: inherit; font-size: clamp(18px, 1.55vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--tinta-suave);
  background: var(--cristal); border: 1px solid var(--cristal-borde);
  transition: color 250ms, background-color 250ms, border-color 250ms, transform 250ms var(--sale);
}
.vitrina__tab:hover { color: var(--tinta); }
.vitrina__tab:active { transform: scale(0.985); }
.vitrina__tab[aria-selected="true"] {
  color: var(--tinta); border-color: rgba(219, 165, 78, 0.55);
  background: linear-gradient(115deg, rgba(219, 165, 78, 0.2), rgba(219, 165, 78, 0.04) 70%);
}
.vitrina__tab[aria-selected="true"] span { background: var(--grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vitrina__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 244, 228, 0.06); }
.vitrina__barra b { display: block; height: 100%; width: 0; background: var(--grad-oro); }
.vitrina__tab[aria-selected="true"] .vitrina__barra b { width: var(--avance, 0%); }

.vitrina__escenario {
  grid-column: 5 / -1; position: relative; min-height: 620px; border-radius: var(--r); overflow: hidden;
  background: radial-gradient(70% 90% at 70% 30%, rgba(219, 165, 78, 0.14), transparent 70%), var(--grad-grafito);
  border: 1px solid var(--cristal-borde);
}
.vitrina__panel { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; padding: clamp(24px, 3vw, 40px); }
.vitrina__panel.es-activo { animation: panel-entra 600ms var(--sale) both; }
@keyframes panel-entra { from { opacity: 0; transform: translateY(14px); } }
.vitrina__visual { display: grid; place-items: center; min-height: 0; }
.vitrina__texto h3 { font-size: clamp(24px, 2.2vw, 34px); font-weight: 780; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.vitrina__texto p { margin-top: 10px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 19px); color: var(--tinta-suave); }
.vitrina__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vitrina__chips li { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--oro-claro); background: rgba(219, 165, 78, 0.1); border: 1px solid rgba(219, 165, 78, 0.28); }

/* Diagnóstico: aparecen los procesos, dos fallan y se arreglan */
.vis-diag svg { width: min(100%, 720px); height: auto; overflow: visible; font-family: "Archivo", system-ui, sans-serif; }
.vis-diag__linea { fill: none; stroke: rgba(219, 165, 78, 0.55); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.vis-diag__nodo rect { fill: rgba(255, 244, 228, 0.06); stroke: rgba(255, 238, 214, 0.22); stroke-width: 1.5; }
.vis-diag__nodo text { fill: var(--tinta); font-size: 15px; font-weight: 600; text-anchor: middle; }
.vis-diag__nodo { opacity: 0; }
.vis-diag__aviso { opacity: 0; transform-box: fill-box; transform-origin: center; }
.vis-diag__aviso circle { fill: #f08a6e; }
.vis-diag__aviso text { fill: #fff; font-size: 14px; font-weight: 800; text-anchor: middle; }
.vis-diag__nota { fill: var(--oro-claro); font-size: 16px; font-weight: 800; text-anchor: middle; opacity: 0; }
.es-activo .vis-diag__nodo { animation: aparece 500ms var(--sale) forwards; animation-delay: calc(var(--i) * 130ms); }
.es-activo .vis-diag__linea { animation: dibuja 1600ms var(--sale) 300ms forwards; }
.es-activo .vis-diag__nodo--fuga rect { animation: fuga 3600ms ease forwards 900ms; }
.es-activo .vis-diag__aviso { animation: aviso-diag 3600ms ease forwards; animation-delay: calc(900ms + var(--i) * 80ms); }
.es-activo .vis-diag__nota { animation: aparece 600ms var(--sale) forwards; animation-delay: calc(3700ms + var(--i, 0) * 200ms); }
@keyframes aparece { to { opacity: 1; } }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes fuga {
  0% { fill: rgba(255, 244, 228, 0.06); stroke: rgba(255, 238, 214, 0.22); }
  12%, 62% { fill: rgba(240, 138, 110, 0.16); stroke: #f08a6e; }
  100% { fill: rgba(219, 165, 78, 0.22); stroke: #f6d08c; }
}
@keyframes aviso-diag { 0% { opacity: 0; transform: scale(0); } 12% { opacity: 1; transform: scale(1.15); } 20%, 62% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(0.4); } }

/* Software: la app se monta y el presupuesto sale solo */
.vis-soft__app {
  width: min(100%, 460px); display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto 1fr auto; gap: 10px;
  padding: 14px; border-radius: 18px; background: rgba(18, 14, 11, 0.85); border: 1px solid rgba(255, 238, 214, 0.12);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
.vis-soft__lado { grid-row: 1 / 4; display: grid; align-content: start; gap: 10px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 244, 228, 0.04); }
.vis-soft__lado i { height: 22px; border-radius: 7px; background: rgba(255, 244, 228, 0.1); }
.vis-soft__lado i:first-child { background: var(--grad-oro); }
.vis-soft__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vis-soft__kpis b { padding: 10px; border-radius: 10px; background: rgba(255, 244, 228, 0.05); font-size: 14px; font-weight: 700; opacity: 0; }
.vis-soft__partidas { padding: 6px 12px; border-radius: 12px; background: rgba(255, 244, 228, 0.03); }
.vis-soft__partidas li { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid rgba(255, 238, 214, 0.07); opacity: 0; }
.vis-soft__partidas li span:last-child { color: var(--oro-claro); font-weight: 600; }
.vis-soft__listo { grid-column: 2; padding: 11px 14px; border-radius: 10px; background: var(--grad-oro); color: var(--tinta-oro); font-weight: 750; font-size: 14px; opacity: 0; transform: translateY(8px); }
.es-activo .vis-soft__kpis b { animation: sube 500ms var(--sale) forwards; }
.es-activo .vis-soft__kpis b:nth-child(2) { animation-delay: 120ms; }
.es-activo .vis-soft__kpis b:nth-child(3) { animation-delay: 240ms; }
.es-activo .vis-soft__partidas li { animation: sube 450ms var(--sale) forwards; }
.es-activo .vis-soft__partidas li:nth-child(1) { animation-delay: 600ms; }
.es-activo .vis-soft__partidas li:nth-child(2) { animation-delay: 850ms; }
.es-activo .vis-soft__partidas li:nth-child(3) { animation-delay: 1100ms; }
.es-activo .vis-soft__partidas li:nth-child(4) { animation-delay: 1350ms; }
.es-activo .vis-soft__listo { animation: sube 600ms var(--sale) 1900ms forwards, destella 1.6s ease-in-out 2.5s infinite alternate; }
@keyframes sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes destella { to { box-shadow: 0 0 26px rgba(246, 208, 140, 0.55); } }

/* Telegram: los mensajes entran uno a uno */
.vis-tg__movil {
  width: 270px; padding: 14px 12px; display: grid; gap: 7px; align-content: start;
  border-radius: 34px; background: rgba(14, 11, 9, 0.9); border: 1px solid rgba(255, 238, 214, 0.14);
  box-shadow: inset 0 0 0 6px rgba(255, 244, 228, 0.03), 0 30px 70px -30px rgba(0, 0, 0, 0.85);
}
.vis-tg__msg { max-width: 88%; padding: 7px 12px; border-radius: 16px 16px 16px 5px; font-size: 14px; line-height: 1.4; background: rgba(255, 244, 228, 0.07); border: 1px solid rgba(255, 238, 214, 0.1); opacity: 0; }
.vis-tg__msg b { color: var(--oro-claro); }
.vis-tg__msg--yo { justify-self: end; border-radius: 16px 16px 5px 16px; background: linear-gradient(160deg, rgba(219, 165, 78, 0.32), rgba(192, 119, 60, 0.22)); border-color: rgba(219, 165, 78, 0.35); }
.vis-tg__foto { display: block; width: 150px; height: 74px; margin-bottom: 6px; border-radius: 10px; background: url("../img/bano-azulejo-480.webp") center / cover; }
.es-activo .vis-tg__msg { animation: sube 500ms var(--sale) forwards; animation-delay: calc(300ms + var(--i) * 950ms); }

/* Asistente IA: la pregunta se escribe y la respuesta llega */
.vis-ia__chat { width: min(100%, 470px); display: grid; gap: 14px; }
.vis-ia__pregunta { justify-self: end; padding: 12px 16px; border-radius: 16px 16px 5px 16px; background: rgba(219, 165, 78, 0.16); border: 1px solid rgba(219, 165, 78, 0.35); font-size: 16px; font-weight: 600; }
.vis-ia__pregunta span { display: inline-block; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.vis-ia__respuesta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px 16px 16px 5px; background: rgba(255, 244, 228, 0.06); border: 1px solid rgba(255, 238, 214, 0.1); font-size: 16px; line-height: 1.5; color: var(--tinta-suave); opacity: 0; }
.vis-ia__respuesta b { color: var(--tinta); }
.vis-ia__respuesta svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: var(--tinta-oro); background: var(--grad-oro); }
.es-activo .vis-ia__pregunta span { animation: escribe 1400ms steps(28) 300ms forwards; }
.es-activo .vis-ia__respuesta { animation: sube 700ms var(--sale) 2100ms forwards; }
@keyframes escribe { to { clip-path: inset(0 0 0 0); } }

/* Teléfono: suena, se atiende y queda la ficha */
.vis-tel { gap: 22px; }
.vis-tel__llamada { display: flex; align-items: center; gap: 22px; }
.vis-tel__icono { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--grad-oro); color: var(--tinta-oro); }
.vis-tel__icono svg { width: 36px; height: 36px; }
.vis-tel__icono::before, .vis-tel__icono::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(219, 165, 78, 0.6); animation: onda-tel 2s ease-out infinite; }
.vis-tel__icono::after { animation-delay: 1s; }
@keyframes onda-tel { to { transform: scale(1.9); opacity: 0; } }
.vis-tel__onda { display: flex; align-items: center; gap: 5px; height: 60px; }
.vis-tel__onda i { width: 6px; height: 100%; border-radius: 3px; background: var(--grad-oro); transform: scaleY(0.2); animation: barra-voz 1s ease-in-out infinite alternate; }
.vis-tel__onda i:nth-child(2n) { animation-delay: -0.3s; }
.vis-tel__onda i:nth-child(3n) { animation-delay: -0.55s; }
.vis-tel__onda i:nth-child(5n) { animation-delay: -0.8s; }
@keyframes barra-voz { to { transform: scaleY(1); } }
.vis-tel__ficha { display: grid; gap: 4px; padding: 16px 20px; border-radius: 16px; background: rgba(18, 14, 11, 0.85); border: 1px solid rgba(219, 165, 78, 0.35); font-size: 15px; color: var(--tinta-suave); opacity: 0; }
.vis-tel__ficha b { color: var(--oro-claro); font-size: 16px; }
.es-activo .vis-tel__ficha { animation: sube 700ms var(--sale) 1600ms forwards; }

/* ================================================================== CINTA */
.cinta { margin-top: var(--seccion); overflow: hidden; padding-block: 8px; }
.cinta__pista { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta span {
  display: flex; align-items: center; flex: none;
  font-size: clamp(64px, 10.5vw, 172px); font-weight: 800; font-stretch: 118%; line-height: 1; letter-spacing: -0.045em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(246, 208, 140, 0.55);
  padding-right: 0.5em;
}
.cinta span:nth-child(even) { color: var(--tinta); -webkit-text-stroke: 0; }
.cinta span::after { content: ""; width: 0.22em; height: 0.22em; margin-left: 0.5em; border-radius: 0.05em; background: var(--grad-oro); transform: rotate(45deg); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ================================================================= MÉTODO */
.metodo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.metodo__cabeza { margin-bottom: 32px; }
.metodo__linea { grid-column: 1 / 9; padding: 32px 28px 28px; display: flex; flex-direction: column; }
.metodo__pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.metodo__paso { position: relative; padding-top: 34px; }
.metodo__paso::before {
  content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 6px;
  background: var(--fondo-3); border: 2px solid rgba(219, 165, 78, 0.5);
  transition: background-color 400ms, border-color 400ms; transition-delay: calc(var(--en) * 1400ms);
}
.metodo.esta-visible .metodo__paso::before { background: var(--grad-oro); border-color: transparent; }
.metodo__cuando { display: block; font-size: 14px; color: var(--oro-claro); }
.metodo__paso b { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.metodo__paso span:last-child { display: block; margin-top: 6px; font-size: var(--t-peq); line-height: 1.45; color: var(--tinta-suave); }
.metodo__progreso { order: -1; height: 3px; margin: 0 0 -26px 9px; border-radius: 3px; background: rgba(255, 244, 228, 0.08); overflow: hidden; }
.metodo__progreso i { display: block; height: 100%; width: 100%; background: var(--grad-oro); transform-origin: left; transform: scaleX(0); transition: transform 1800ms var(--viaje); }
.metodo.esta-visible .metodo__progreso i { transform: scaleX(1); }
.metodo__objetivo { grid-column: 9 / -1; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.metodo__cifra { font-size: clamp(72px, 8vw, 128px); font-weight: 800; font-stretch: 115%; line-height: 0.9; letter-spacing: -0.05em; }
.metodo__objetivo p:last-child { font-size: 17px; line-height: 1.45; font-weight: 500; }
.metodo__nota { grid-column: 1 / 9; padding: 6px 12px 0; font-size: 14px; color: var(--tinta-tenue); }

/* ============================================================ CALCULADORA
   A la izquierda la consulta; a la derecha "tu semana" como un muro: cada respuesta deja caer
   sus ladrillos (media hora cada uno) en los días. Al ver el resultado se iluminan los que se
   pueden recuperar. */
.calc { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); min-height: 620px; }
.consulta__progreso { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2; background: rgba(255, 244, 228, 0.06); }
.consulta__progreso i { display: block; height: 100%; width: var(--p, 0%); background: var(--grad-oro); border-radius: 0 4px 4px 0; box-shadow: 0 0 14px rgba(246, 208, 140, 0.6); transition: width 600ms var(--sale); }
.calc__panel { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 54px); min-width: 0; }
.consulta__escenario { flex: 1; display: flex; flex-direction: column; }
.paso { display: flex; flex-direction: column; flex: 1; }
.paso.entra { animation: paso-entra 560ms var(--sale) both; }
.paso.entra-atras { animation: paso-entra-atras 560ms var(--sale) both; }
.paso.sale { animation: paso-sale 300ms cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes paso-entra { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }
@keyframes paso-entra-atras { from { opacity: 0; transform: translateY(-26px); filter: blur(8px); } }
@keyframes paso-sale { to { opacity: 0; transform: translateY(-20px) scale(0.98); filter: blur(8px); } }
.consulta__pregunta { font-size: clamp(24px, 2.3vw, 34px); font-weight: 760; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
.consulta__ayuda { margin-top: 12px; max-width: 52ch; color: var(--tinta-suave); }
.respuestas { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco); }
.respuesta {
  position: relative; overflow: hidden; min-height: 66px; padding: 16px 20px; border-radius: 14px; text-align: left; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 550; color: var(--tinta);
  background: rgba(255, 244, 228, 0.05); border: 1px solid rgba(255, 238, 214, 0.1);
  transition: background-color 200ms, border-color 200ms, transform 300ms var(--sale), opacity 300ms;
}
.paso.entra .respuesta { animation: sube 460ms var(--sale) both; animation-delay: calc(140ms + var(--i, 0) * 60ms); }
.respuesta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 244, 228, 0.12) 50%, transparent 70%); transform: translateX(-100%); transition: transform 600ms var(--sale); }
.respuesta:hover { background: rgba(219, 165, 78, 0.1); border-color: rgba(219, 165, 78, 0.5); }
.respuesta:hover::after { transform: translateX(100%); }
.respuesta:active { transform: scale(0.98); }
.respuesta.elegida { background: var(--grad-oro); color: var(--tinta-oro); border-color: transparent; font-weight: 700; transform: scale(1.02); }
.respuestas.decidido .respuesta:not(.elegida) { opacity: 0.25; transform: scale(0.97); }
.paso__pie { margin-top: auto; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Pantalla de inicio: que se vea y den ganas de pulsar */
.paso--inicio { justify-content: center; gap: 26px; }
.calc__gancho { font-size: clamp(30px, 3vw, 46px); font-weight: 820; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.025em; max-width: 16ch; }
.boton-empezar {
  position: relative; isolation: isolate; align-self: flex-start; display: inline-flex; align-items: center; gap: 18px;
  min-height: 78px; padding: 0 12px 0 34px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: clamp(19px, 1.6vw, 23px); font-weight: 780; letter-spacing: -0.01em; color: var(--tinta-oro);
  background: var(--grad-oro); background-size: 160% 100%;
  box-shadow: 0 22px 60px -14px rgba(219, 165, 78, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 300ms var(--sale), background-position 600ms var(--sale);
  animation: llama 2.6s ease-in-out infinite;
}
.boton-empezar::before { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: inherit; border: 2px solid rgba(246, 208, 140, 0.55); animation: anillo 2.6s ease-out infinite; }
.boton-empezar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); background-size: 250% 100%; animation: reflejo 3.2s ease-in-out infinite; pointer-events: none; }
.boton-empezar:hover { transform: translateY(-2px) scale(1.02); background-position: 100% 0; }
.boton-empezar:active { transform: scale(0.98); }
.boton-empezar i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #17110b; color: var(--oro-claro); transition: transform 300ms var(--sale); }
.boton-empezar:hover i { transform: translateX(4px); }
.boton-empezar svg { width: 24px; height: 24px; }
@keyframes llama { 50% { box-shadow: 0 26px 70px -10px rgba(219, 165, 78, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.45); } }
@keyframes anillo { 0% { transform: scale(0.96); opacity: 0.9; } 100% { transform: scale(1.12, 1.35); opacity: 0; } }
@keyframes reflejo { 0%, 55% { background-position: 150% 0; } 100% { background-position: -100% 0; } }
.calc__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__meta span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--tinta-suave); background: rgba(255, 244, 228, 0.05); border: 1px solid var(--cristal-borde); }
.calc__meta svg { width: 16px; height: 16px; color: var(--oro); }

.consulta__form .campos { margin-top: 24px; }
.resultado { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.resultado:focus { outline: none; }
.resultado__antes { color: var(--tinta-suave); font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.resultado__cifra { font-size: clamp(56px, 6.6vw, 108px); font-weight: 820; line-height: 0.92; letter-spacing: -0.045em; }
.resultado__cifra { background-image: linear-gradient(95deg, #f6d08c 0%, #e39b5b 25%, #c0773c 50%, #f3c27e 75%, #f6d08c 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo-fluye 6s linear infinite; }
.resultado__texto { max-width: 56ch; font-size: 18px; line-height: 1.5; }
.resultado__coste { width: 100%; margin: 8px 0; padding: 18px 20px; border-radius: 14px; background: rgba(255, 244, 228, 0.04); border: 1px solid rgba(255, 238, 214, 0.09); }
.resultado__coste label { font-size: 14px; color: var(--tinta-tenue); }
.resultado__entrada { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.resultado__entrada input { width: 96px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 238, 214, 0.16); background: rgba(0, 0, 0, 0.25); color: var(--tinta); font: inherit; font-size: 20px; font-weight: 700; }
.resultado__entrada input:focus { outline: none; border-color: var(--oro); }

/* El muro */
.muro {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: clamp(24px, 2.6vw, 38px);
  background: radial-gradient(80% 60% at 50% 100%, rgba(219, 165, 78, 0.12), transparent 70%), rgba(0, 0, 0, 0.22);
  border-left: 1px solid var(--cristal-borde);
}
.muro h3 { font-size: 20px; font-weight: 750; text-transform: uppercase; letter-spacing: -0.005em; }
.muro__total { margin-top: 8px; color: var(--tinta-suave); font-size: 15px; line-height: 1.35; }
.muro__total b { display: block; font-size: clamp(46px, 4.4vw, 70px); font-weight: 820; letter-spacing: -0.04em; line-height: 1; color: var(--tinta); }
.muro__pared {
  --dias: 5; flex: 1; min-height: 260px; position: relative;
  display: grid; grid-template-columns: repeat(var(--dias), minmax(0, 1fr)); gap: 6px; align-items: stretch;
  padding-bottom: 30px;
}
.muro__pared::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 26px; height: 3px; border-radius: 3px; background: var(--grad-oro); opacity: 0.6; }
.muro__col { position: relative; display: flex; flex-direction: column-reverse; gap: 3px; min-height: 0; }
.muro__col::after { content: attr(data-dia); position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-size: 13px; font-weight: 700; color: var(--tinta-tenue); }
.muro--vacio .muro__col { background: repeating-linear-gradient(to top, rgba(255, 244, 228, 0.05) 0 14px, transparent 14px 17px); border-radius: 4px; -webkit-mask: linear-gradient(to top, #000 0 45%, transparent 85%); mask: linear-gradient(to top, #000 0 45%, transparent 85%); animation: fantasma 2.4s ease-in-out infinite; }
.muro--vacio .muro__col:nth-child(2) { animation-delay: 0.2s; }
.muro--vacio .muro__col:nth-child(3) { animation-delay: 0.4s; }
.muro--vacio .muro__col:nth-child(4) { animation-delay: 0.6s; }
.muro--vacio .muro__col:nth-child(5) { animation-delay: 0.8s; }
@keyframes fantasma { 50% { opacity: 0.45; } }
.ladrillo {
  flex: none; height: var(--alto-l, 14px); border-radius: 3px; background: var(--c, #c0773c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.28);
  transition: opacity 500ms, filter 500ms, background-color 500ms;
}
.ladrillo:nth-child(even) { margin-inline: 3px 0; }
.ladrillo:nth-child(odd) { margin-inline: 0 3px; }
.ladrillo.cae { animation: cae 760ms cubic-bezier(0.25, 1.35, 0.5, 1) both; animation-delay: var(--retraso, 0ms); }
@keyframes cae { 0% { transform: translateY(-320px) rotate(var(--giro, 0deg)); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; } }
.muro.es-resultado .ladrillo { opacity: 0.28; filter: saturate(0.3); }
.muro.es-resultado .ladrillo.recupera { opacity: 1; filter: none; background: var(--grad-oro); box-shadow: 0 0 14px rgba(246, 208, 140, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5); animation: recupera 700ms var(--sale) both; animation-delay: var(--retraso, 0ms); }
@keyframes recupera { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08, 1.25); filter: brightness(1.6); } 100% { transform: none; } }
.muro__leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.muro__leyenda li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-suave); animation: sube 400ms var(--sale) both; }
.muro__leyenda li i { width: 14px; height: 10px; border-radius: 2px; background: var(--c); }
.muro__nota { font-size: 14px; color: var(--tinta-tenue); }

/* ============================================================== FORMULARIOS */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; color: var(--tinta-suave); }
.campo label span { color: var(--tinta-tenue); }
.campo input, .campo textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 238, 214, 0.14); background: rgba(0, 0, 0, 0.24);
  color: var(--tinta); font: inherit; font-size: 16px;
  transition: border-color 200ms, background-color 200ms;
}
.campo textarea { resize: vertical; min-height: 52px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--oro); background: rgba(0, 0, 0, 0.34); }
.campo[data-error] input, .campo[data-error] textarea { border-color: #f0937b; }
.campo__error { font-size: 14px; color: #f6ad9a; }
.campo--casilla { flex-direction: row; align-items: flex-start; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.campo--casilla input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--oro); }
.campo--casilla label { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.campo--casilla .campo__error { width: 100%; padding-left: 34px; }
.formulario__acciones { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.formulario__estado { margin-top: 12px; font-size: 15px; min-height: 1.4em; }
.formulario__estado[data-estado="error"] { color: #f6ad9a; }
.formulario__estado[data-estado="ok"] { color: #b6dfb2; }

/* ================================================================ QUIÉN SOY */
.yo__titulo { padding-inline: 12px; }
.yo__tablero { margin-top: 36px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: var(--hueco); }
.yo__ficha {
  grid-column: 1 / 8; padding: clamp(28px, 3.6vw, 60px); display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: radial-gradient(70% 90% at 0% 100%, rgba(219, 165, 78, 0.16), transparent 70%), var(--cristal);
}
.yo__nombre { font-size: clamp(36px, 3.8vw, 60px); font-weight: 820; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.95; }
.yo__rol { font-size: 18px; font-weight: 650; color: var(--oro-claro); }
.yo__datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.yo__datos li { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; background: rgba(255, 244, 228, 0.06); border: 1px solid var(--cristal-borde); }
.yo__cita { margin: 14px 0 0; padding-left: 20px; border-left: 3px solid var(--oro); font-size: clamp(22px, 2.2vw, 34px); font-weight: 760; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.08; max-width: 22ch; }
.yo__cita .brillo { display: block; width: fit-content; }
.yo__foto { grid-column: 8 / -1; grid-row: 1 / 3; min-height: 500px; margin: 0; }
.yo__razones { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 12px; }
.yo__razon {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; transition: background-color 250ms;
}
.yo__razon:hover { background: rgba(219, 165, 78, 0.08); }
.yo__razon svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--tinta-oro); background: var(--grad-oro); }
.yo__razon b { font-size: 17px; font-weight: 700; line-height: 1.2; }

/* ================================================================== PRECIOS */
.precios__tabla { padding: clamp(12px, 1.4vw, 20px); }
.precios table { width: 100%; border-collapse: separate; border-spacing: 0; }
.precios th, .precios td { text-align: left; vertical-align: top; padding: 22px 20px; font-size: 18px; line-height: 1.4; }
.precios thead th { padding-top: 12px; padding-bottom: 26px; font-size: 15px; font-weight: 500; color: var(--tinta-tenue); vertical-align: bottom; }
.precios thead th:first-child { width: 36%; }
.precios thead th:nth-child(2) { width: 24%; }
.precios__titulo { font-size: clamp(34px, 4.1vw, 64px); font-weight: 760; text-transform: uppercase; line-height: 0.96; letter-spacing: -0.022em; color: var(--tinta); }
.precios tbody th { font-size: clamp(20px, 1.6vw, 24px); font-weight: 650; letter-spacing: -0.01em; }
.precios tbody th small { font-size: 15px; font-weight: 400; color: var(--tinta-tenue); }
.precios tbody td:last-child { color: var(--tinta-suave); font-size: 16px; }
.precios tbody tr:nth-child(odd) > * { background: rgba(255, 244, 228, 0.035); }
.precios tbody tr > :first-child { border-radius: 12px 0 0 12px; }
.precios tbody tr > :last-child { border-radius: 0 12px 12px 0; }
.precio { display: block; font-size: clamp(28px, 2.8vw, 44px); font-weight: 800; font-stretch: 110%; line-height: 1; letter-spacing: -0.035em; white-space: nowrap; }
.precio small { font-size: 0.55em; font-weight: 500; letter-spacing: 0; }
.precio__extra { display: block; margin-top: 6px; font-size: 15px; color: var(--tinta-suave); }
.precios .precios__destacado > * { background: var(--grad-oro) !important; color: var(--tinta-oro) !important; }
.precios .precios__destacado > :first-child { background: linear-gradient(135deg, #f6d08c, #e5b469) !important; }
.precios .precios__destacado > :nth-child(2) { background: linear-gradient(135deg, #e5b469, #d79d4c) !important; }
.precios .precios__destacado > :last-child { background: linear-gradient(135deg, #d79d4c, #c0773c) !important; }
.precios__pie { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 20px 8px; flex-wrap: wrap; }
.precios__pie p { color: var(--tinta-suave); font-size: 15px; }

/* ==================================================================== DUDAS */
.dudas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); align-items: start; }
.dudas__titulo { grid-column: 1 / 5; position: sticky; top: 104px; padding-inline: 12px; font-size: clamp(44px, 4.6vw, 76px); }
.dudas__lista { grid-column: 5 / -1; display: grid; gap: var(--hueco); }
.duda { border-radius: var(--r); background: var(--cristal); border: 1px solid var(--cristal-borde); transition: background-color 300ms; overflow: hidden; }
.duda summary {
  position: relative; display: flex; align-items: center; min-height: 72px; padding: 20px 72px 20px 24px;
  font-size: 20px; font-weight: 550; line-height: 1.3; letter-spacing: -0.01em; cursor: pointer; list-style: none;
}
.duda summary::-webkit-details-marker { display: none; }
.duda summary::before, .duda summary::after {
  content: ""; position: absolute; right: 28px; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: currentColor; transition: transform 300ms var(--sale);
}
.duda summary::after { transform: rotate(90deg); }
.duda[open] summary::after { transform: rotate(0deg); }
.duda summary:hover { color: var(--oro-claro); }
.duda p { max-width: 58ch; padding: 0 24px 24px; font-size: 17px; line-height: 1.55; }
.duda[open] { background: var(--grad-oro); color: var(--tinta-oro); border-color: transparent; }
.duda[open] summary:hover { color: var(--tinta-oro); }
.duda[open] p { animation: vista-entra 420ms var(--sale) both; }

/* ================================================================= CONTACTO */
.contacto {
  position: relative; overflow: hidden;
  margin-inline: var(--margen); padding: 48px 0 clamp(32px, 4vw, 56px) !important;
  border-radius: var(--r);
  background:
    radial-gradient(70% 90% at 85% 0%, rgba(246, 208, 140, 0.28), transparent 60%),
    linear-gradient(155deg, #9a5a2a 0%, #6d3b19 46%, #2c180b 100%);
  min-height: 80svh;
}
.contacto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4; mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.contacto__tira { overflow: hidden; }
.contacto__pista { display: flex; gap: 8px; width: max-content; animation: cinta 60s linear infinite; }
.contacto__tira:hover .contacto__pista { animation-play-state: paused; }
.contacto__pista img { height: 150px; width: auto; border-radius: 12px; object-fit: cover; flex: none; }
.contacto__pista img[width="113"] { aspect-ratio: 3 / 4; }
.contacto__pista img[width="150"] { aspect-ratio: 1; }
.contacto__pista img[width="225"] { aspect-ratio: 3 / 2; }
.contacto__cuerpo { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); padding: 72px clamp(16px, 2.4vw, 36px) 0; }
.contacto__texto { grid-column: 1 / 6; }
.contacto__texto p { margin-top: 18px; max-width: 44ch; font-size: 18px; line-height: 1.5; color: #f3e2cd; }
.contacto__vias { display: grid; gap: var(--hueco); margin-top: 28px; }
.contacto__via {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; text-decoration: none;
  background: rgba(20, 12, 6, 0.32); border: 1px solid rgba(255, 230, 200, 0.14);
  transition: background-color 200ms, transform 200ms var(--sale);
}
.contacto__via:hover { background: rgba(20, 12, 6, 0.5); transform: translateX(3px); }
.contacto__via svg { width: 26px; height: 26px; flex: none; color: var(--oro-claro); }
.contacto__via b { display: block; font-size: 17px; }
.contacto__via span { font-size: 15px; color: #f0dcc4; }
.contacto__form { grid-column: 6 / -1; }
.contacto__celdas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
.contacto__celdas .campo {
  padding: 14px 16px 12px; border-radius: 14px; gap: 4px;
  background: rgba(20, 12, 6, 0.38); border: 1px solid rgba(255, 230, 200, 0.12);
  transition: background-color 200ms, border-color 200ms;
}
.contacto__celdas .campo:focus-within { background: rgba(255, 236, 210, 0.16); border-color: rgba(255, 230, 200, 0.5); }
.contacto__celdas .campo:nth-child(-n+4) { grid-column: span 2; }
.contacto__celdas .campo--ancho { grid-column: span 3; }
.contacto__celdas label { font-size: 14px; color: #f0dcc4; }
.contacto__celdas label span { color: #d9bea0; }
.contacto__celdas input, .contacto__celdas textarea { padding: 4px 0; border: 0; border-radius: 0; background: none; font-size: 18px; }
.contacto__celdas input:focus, .contacto__celdas textarea:focus { background: none; }
.contacto__celdas .campo[data-error] { border-color: #ffb3a0; }
.contacto__enviar {
  display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; cursor: pointer;
  background: #17110b; color: var(--tinta); font: inherit; font-size: 19px; font-weight: 750;
  transition: background-color 200ms, transform 200ms var(--sale);
}
.contacto__enviar:hover { background: #241a11; }
.contacto__enviar svg { color: var(--oro-claro); }
.contacto__enviar:active { transform: scale(0.98); }
.contacto__enviar svg { width: 20px; height: 20px; }
.contacto__enviar[disabled] { opacity: 0.6; cursor: progress; }
.contacto .campo--casilla label { color: #f0dcc4; }
.contacto .campo__error { color: #ffd0c2; }
.contacto .formulario__estado[data-estado="error"] { color: #ffd0c2; }
.contacto .formulario__estado[data-estado="ok"] { color: #e6f5d6; }

/* ===================================================================== PIE */
.pie { margin-top: var(--seccion); padding: 0 calc(var(--margen) + 12px) calc(var(--margen) + 12px); }
/* El logo cierra la página a todo el ancho del contenido */
.marca-atn--pie { --alto: calc((100vw - 2 * (var(--margen) + 12px)) / 7.7); justify-content: space-between; }
.pie__columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.pie__columnas > * { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.pie__columnas p { font-weight: 700; color: var(--tinta); margin-bottom: 4px; }
.pie__columnas a, .pie__columnas span { color: var(--tinta-suave); text-decoration: none; width: fit-content; }
.pie__columnas a:hover { color: var(--oro-claro); }
.pie__final { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; font-size: 14px; color: var(--tinta-tenue); }

/* ========================================================= PÁGINAS LEGALES */
.legal__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 920px; margin: var(--margen) auto 0; padding: 12px 12px 12px 20px;
  border-radius: var(--r); background: var(--cristal); border: 1px solid var(--cristal-borde);
}
.legal__barra img { width: 110px; height: auto; }
.legal__main { max-width: 920px; margin: 8px auto 0; padding-inline: var(--margen); }
.legal__texto { padding: clamp(24px, 4vw, 56px); }
.legal__texto h1 { font-size: var(--t-titulo); font-weight: 750; font-stretch: 112%; line-height: 1; letter-spacing: -0.035em; margin: 8px 0 28px; }
.legal__texto h2 { margin: 36px 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.legal__texto p, .legal__texto li { color: var(--tinta-suave); line-height: 1.65; }
.legal__texto p + p { margin-top: 12px; }
.legal__texto ul { margin: 12px 0; padding-left: 20px; list-style: disc; }
.legal__texto li + li { margin-top: 8px; }
.legal__texto strong { color: var(--tinta); }
.legal__texto a { color: var(--oro-claro); }
.legal__fecha { font-size: 14px; color: var(--tinta-tenue) !important; }
.legal__datos { display: grid; gap: 10px; margin: 0; }
.legal__datos div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 244, 228, 0.035); }
.legal__datos dt { color: var(--tinta-tenue); }
.legal__datos dd { margin: 0; }
.legal__pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; max-width: 920px; margin: 0 auto; padding: 32px calc(var(--margen) + 12px) 40px; font-size: 14px; color: var(--tinta-tenue); }
.legal__pie nav { display: flex; gap: 18px; flex-wrap: wrap; }
.legal__pie a { color: var(--tinta-suave); text-decoration: none; }
.legal__pie a:hover, .legal__pie a[aria-current="page"] { color: var(--oro-claro); }
@media (max-width: 599px) { .legal__datos div { grid-template-columns: 1fr; gap: 2px; } }

/* =========================================================== BARRA MÓVIL */
.barra-movil { display: none; }

/* ============================================================ TABLET Y MÓVIL */
@media (max-width: 1180px) {
  .app { grid-template-columns: 196px minmax(0, 1fr); }
  .panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel__obras, .panel__ia { grid-column: 1 / -1; }
  .tg { grid-template-columns: minmax(0, 1fr); }
  .tg__chats { display: none; }
}

@media (max-width: 899px) {
  :root {
    --hueco: 6px; --margen: 8px; --t-texto: 16px;
    --desenfoque: none;
    --cristal: linear-gradient(155deg, rgba(44, 36, 28, 0.9) 0%, rgba(26, 21, 16, 0.86) 62%);
  }
  html { scroll-padding-top: 16px; }
  .barra { display: none; }

  /* Hero como tablero de dos columnas */
  .hero {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    height: auto; min-height: 0;
  }
  /* En el móvil, el logo apilado de siempre: PROJECT centrado bajo ATN */
  .hero__banda { padding: 16px 0 18px; }
  .marca-atn { --alto: calc(min(62vw, 320px) / 3.898); flex-direction: column; align-items: center; gap: calc(var(--alto) * 0.14); }
  .marca-atn__project { height: auto; width: calc(var(--alto) * 3.898 * 0.594); margin: 0; }
  .marca-atn--pie { --alto: calc(min(82vw, 420px) / 3.898); }
  .hero__enlaces { grid-template-columns: 1fr 1fr; }
  .pieza--enlace { min-height: 56px; padding: 16px; font-size: 15px; }
  .hero__centro { grid-column: 1 / -1; grid-row: 3; display: flex; flex-direction: column; overflow: visible; background: none; }
  .hero__foto { position: relative; aspect-ratio: 4 / 3; height: auto; border-radius: var(--r); }
  .hero__centro::after { display: none; }
  .hero__frase { position: relative; left: auto; bottom: auto; width: 100%; margin-top: var(--hueco); padding: 22px 20px; background: var(--cristal); }
  /* Las piezas recortan su contenido: en una columna flexible no deben encogerse. */
  .hero__centro > * { flex: none; }
  .hero__centro > .hero__foto { height: auto; }
  .hero__frase h1 { font-size: 5.4vw; }
  .aviso { padding: 8px 12px 8px 8px; font-size: 13px; gap: 8px; }
  .aviso__icono { width: 28px; height: 28px; padding: 6px; }
  .aviso--1 { left: 4%; top: 6%; }
  .aviso--2 { right: 4%; top: 30%; }
  .aviso--3 { display: none; }
  .hero__izq { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hero__retrato { aspect-ratio: 3 / 4; }
  .hero__datos { padding: 16px; font-size: 14px; }
  .hero__datos li + li { margin-top: 8px; }
  .hero__der { grid-column: 1 / -1; grid-row: 5; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hero__dato { padding: 14px; font-size: 14px; }
  .hero__accion { grid-column: 1 / -1; min-height: 92px; flex-direction: row; align-items: center; font-size: 18px; }
  .hero__accion svg { align-self: center; }


  .orden { grid-template-columns: 1fr; padding: 72px 16px 20px; }
  .orden__cabeza { grid-column: 1; }
  .orden__cabeza p { font-size: 15px; margin-top: 12px; }
  .orden__lienzo { grid-column: 1; margin-block: 16px; }
  .orden__etiquetas span { font-size: 13px; padding: 5px 10px; }
  .orden__pasos { grid-column: 1; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .orden__paso { padding: 12px; }
  .orden__paso b { font-size: 16px; }
  .orden__paso span { display: none; }

  .demo-cabeza { grid-column: 1 / -1; }
  .demo-tablero { margin-top: 28px; }
  .demo-guia { grid-column: 1 / -1; grid-auto-rows: auto; grid-template-columns: 1fr 1fr; }
  .demo-guia__paso { padding: 14px 16px; }
  .demo-guia__paso span { font-size: 14px; }
  .app { grid-column: 1 / -1; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: min(720px, 88svh); padding: 6px; gap: 6px; border-radius: 20px; }
  .app__lado { order: 2; flex-direction: row; padding: 4px; gap: 0; border-radius: 16px; }
  .app__marca, .app__ahorro, .app__usuario { display: none; }
  .app__menu { grid-template-columns: repeat(4, 1fr); width: 100%; gap: 2px; }
  .app__opcion { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 13px; text-align: center; justify-content: center; }
  .app__opcion[aria-current="page"]::before { left: 30%; right: 30%; top: -5px; bottom: auto; width: auto; height: 3px; }
  .app__cuenta { position: absolute; top: 4px; right: 12%; margin: 0; }
  .app__cabeza { padding: 12px 14px; }
  .app__titulo { font-size: 20px; }
  .app__sub { display: none; }
  .app__chip { display: none; }
  .app__reiniciar span { display: none; }
  .app__reiniciar { padding: 8px; }
  .panel { grid-template-columns: 1fr 1fr; }
  .presu { grid-template-columns: 1fr; }
  .obras { grid-template-columns: repeat(4, 78%); overflow-x: auto; scroll-snap-type: x mandatory; }
  .columna { scroll-snap-align: start; }
  .tg { min-height: 0; }
  .demo-cierre { flex-direction: column; align-items: flex-start; padding: 20px; }
  .demo-cierre p { font-size: 16px; }

  .metodo__cabeza, .metodo__linea, .metodo__objetivo, .metodo__nota { grid-column: 1 / -1; }
  .metodo__pasos { grid-template-columns: 1fr; gap: 22px; }
  .metodo__paso { padding: 0 0 0 34px; }
  .metodo__progreso { display: none; }
  .metodo__linea { padding: 24px 20px; }

  .precios__tabla { padding: 8px; }
  .precios table, .precios tbody, .precios tr, .precios th, .precios td { display: block; width: auto !important; }
  .precios thead tr { display: block; }
  .precios thead th { display: none; }
  .precios thead th:first-child { display: block; padding: 16px 12px 20px; }
  .precios tbody tr { margin-bottom: 6px; border-radius: 14px; overflow: hidden; background: rgba(255, 244, 228, 0.035); }
  .precios tbody tr > * { background: none !important; border-radius: 0 !important; padding: 6px 16px; }
  .precios tbody tr > :first-child { padding-top: 18px; }
  .precios tbody tr > :last-child { padding-bottom: 18px; }
  .precios .precios__destacado { background: var(--grad-oro); }
  .precio { font-size: 9vw; }

  .dudas__titulo { grid-column: 1 / -1; position: static; font-size: 11vw; }
  .dudas__lista { grid-column: 1 / -1; }
  .duda summary { min-height: 64px; padding: 16px 60px 16px 18px; font-size: 18px; }
  .duda summary::before, .duda summary::after { right: 22px; }
  .duda p { padding: 0 18px 20px; font-size: 16px; }

  .contacto { padding-top: 28px !important; min-height: 0; }
  .contacto__pista { animation-duration: 40s; }
  .contacto__pista img { height: 110px; }
  .contacto__cuerpo { grid-template-columns: 1fr; padding: 40px 16px 0; }
  .contacto__texto, .contacto__form { grid-column: 1; }
  .contacto__texto p { max-width: none; }
  .contacto__celdas { grid-template-columns: 1fr; }
  .contacto__celdas .campo:nth-child(-n+4), .contacto__celdas .campo--ancho { grid-column: auto; }
  .contacto__enviar { min-height: 60px; }

  .pie__columnas { grid-template-columns: 1fr 1fr; }
  .pie__final { flex-direction: row; align-items: center; }
  .pie { padding-bottom: 96px; }

  .barra-movil {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 60;
    display: flex; gap: 6px; padding: 6px; border-radius: 18px;
    background: rgba(16, 13, 10, 0.78); border: 1px solid var(--cristal-borde);
    -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
    transform: translateY(calc(100% + 16px)); transition: transform 380ms var(--sale);
  }
  .barra-movil.esta-visible { transform: none; }
  .barra-movil .boton { flex: 1; }
  .barra-movil__wa { display: grid; place-items: center; width: 52px; border-radius: 999px; background: rgba(255, 244, 228, 0.08); color: var(--oro-claro); }
  .barra-movil__wa svg { width: 24px; height: 24px; }
}

@media (max-width: 380px) {
  .hero__enlaces .pieza--enlace::after { display: none; }
  .respuesta { font-size: 16px; }
  .precio { font-size: 32px; }
}

/* ======================================================= MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .cinta__pista, .contacto__pista { animation: none; }
  .cinta { overflow-x: auto; }
  .js .hero > *, .js .hero__izq > *, .js .hero__der > *, .js .aviso { animation-duration: 1ms; animation-delay: 0ms !important; }
  .js .mosaico__pieza { transform: none; transition-duration: 300ms; transition-delay: 0ms; }
  .js .marca-atn path, .js .marca-atn__project { animation: none; }
  .metodo__progreso i { transition-duration: 1ms; }
  .metodo__paso::before { transition-delay: 0ms; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}
@media (max-width: 599px) { .demo-guia__paso span { display: none; } .demo-guia__paso b { font-size: 16px; } }

/* ============================================= PRECIOS: el pack recomendado */
.precios__reco {
  display: block; width: fit-content; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px;
  background: #17110b; color: var(--oro-claro); font-size: 13px; font-weight: 750; letter-spacing: 0.02em;
}
.precios .precios__destacado > * { padding-block: 30px; }
.precios .precios__destacado td b { font-weight: 750; }

/* ============================================= SECCIONES NUEVAS EN EL MÓVIL */
@media (max-width: 899px) {
  .titulo-grande, .problema__texto .titulo-grande { font-size: 7.6vw; }
  .problema { row-gap: 32px; }
  .problema__texto, .problema__foto { grid-column: 1 / -1; }
  .problema__lista li { font-size: 16px; }
  .problema__marco { aspect-ratio: 4 / 4.4; }
  .caos__aviso { font-size: 13px; padding: 8px 12px 8px 8px; }
  .caos__aviso svg { width: 28px; height: 28px; padding: 6px; }
  .caos__aviso:nth-child(1) { left: 4%; top: 5%; }
  .caos__aviso:nth-child(2) { right: 4%; top: 24%; }
  .caos__aviso:nth-child(3) { left: 6%; top: 44%; }
  .caos__aviso:nth-child(4) { display: none; }

  .mosaico, .quien__lista { grid-column: 1 / -1; }
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .mosaico__pieza { aspect-ratio: 4 / 3; }
  .quien__lista { grid-auto-rows: auto; padding: 4px; }
  .quien__lista li { padding: 12px 14px; gap: 14px; }
  .marca-check { width: 34px; height: 34px; }
  .foco { margin-top: 40px; }
  .foco__dentro { grid-template-columns: 1fr; padding: 28px 22px; }
  .foco__ruta { grid-column: 1; grid-row: auto; }
  .foco__titulo { font-size: 5.4vw; }
  .foco__a { width: 80%; bottom: -6%; opacity: 0.7; }
  .boton--grande { width: 100%; justify-content: space-between; font-size: 17px; }

  .vitrina__lista, .vitrina__escenario { grid-column: 1 / -1; }
  .vitrina__lista { display: grid; grid-template-columns: 1fr 1fr; }
  .vitrina__tab { min-height: 60px; padding: 14px 16px; font-size: 15px; }
  .vitrina__tab:last-child { grid-column: 1 / -1; }
  .vitrina__escenario { min-height: 540px; }
  .vitrina__panel { padding: 22px 18px; }
  .vis-tg__movil { width: 250px; min-height: 270px; }
  .vis-tel__llamada { gap: 14px; }

  .calc { grid-template-columns: 1fr; min-height: 0; }
  .muro { order: -1; border-left: 0; border-bottom: 1px solid var(--cristal-borde); padding: 22px 18px; }
  .muro__pared { min-height: 170px; }
  .muro__total b { font-size: 44px; }
  .muro__nota { display: none; }
  .calc__panel { padding: 26px 18px; min-height: 480px; }
  .respuestas { grid-template-columns: 1fr; }
  .consulta__pregunta { font-size: 22px; }
  .calc__gancho { font-size: 8.4vw; }
  .boton-empezar { align-self: stretch; justify-content: space-between; }
  .campos { grid-template-columns: 1fr; }

  .yo__ficha, .yo__foto, .yo__razones { grid-column: 1 / -1; grid-row: auto; }
  .yo__foto { min-height: 0; aspect-ratio: 4 / 4.6; }
  .yo__razones { grid-template-columns: 1fr; }
  .yo__nombre { font-size: 10vw; }
}

@media (prefers-reduced-motion: reduce) {
  .brillo, .resultado__cifra { animation: none; }
  .caos__aviso, .caos__aviso::after, .foco::before, .foco__ruta li:first-child::before { animation: none; }
  .boton-empezar, .boton-empezar::before, .boton-empezar::after { animation: none; }
  .muro--vacio .muro__col { animation: none; }
  .ladrillo.cae, .muro.es-resultado .ladrillo.recupera { animation: none; }
  .problema__marco img { transform: none; }
}

/* La escena: cuando las esquirlas forman el logo, se enciende un brillo suave */
.orden__canvas { position: absolute; inset: 0; transition: filter 900ms var(--sale); }
.orden__canvas.esta-montado { filter: drop-shadow(0 0 22px rgba(219, 165, 78, 0.45)) drop-shadow(0 0 60px rgba(192, 119, 60, 0.25)); }
.respuestas.decidido .respuesta { animation: none; }