/* Mismo lenguaje visual que la home (styles.css): un tamaño de texto, peso 500,
   rejilla de 14 columnas, etiquetas en gris, botones de texto con píldora al pasar. */

/* ---------- tokens ---------- */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255, 255, 255, 0.45);
  --line: rgba(255, 255, 255, 0.15);
  --pill-bg: rgba(255, 255, 255, 0.15);
  --error: #ff6b5b;
  --gold: #F2B65A;
  --gold-soft: rgba(242, 182, 90, 0.7);
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gutter: 1.4rem;
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* rem fluido: 10px a 1500px de ancho */
html { font-size: calc(100vw / 39); background: var(--bg); }
/* escritorio: escala ~25 % mayor que antes, con tope para pantallas grandes */
@media (min-width: 650px) { html { font-size: clamp(8.6px, calc(100vw / 118), 15px); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: 500;
  font-size: 1.7rem; line-height: 1.11; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
@media (max-width: 649px) { body { font-size: 1.4rem; } }
a, button { color: inherit; font: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: inherit; }
input, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
img, video { display: block; }
h1, h2, h3, b { font: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.right { display: flex; justify-content: flex-end; text-align: right; }
.gap { gap: 2rem; }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }

/* tamaño grande: el mismo que el texto del bloque Estudio de la home */
.big { font-size: 4.2rem; line-height: 1.02; letter-spacing: -0.02em; }
@media (max-width: 649px) { .big { font-size: 2.6rem; } }

/* ---------- rejilla ---------- */
.site-max { width: 100%; padding-inline: var(--gutter); }
.site-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
@media (min-width: 650px) { .site-grid { grid-template-columns: repeat(14, minmax(0, 1fr)); } }
.col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; }
.col-10 { grid-column: span 10; } .col-12 { grid-column: span 12; }
@media (max-width: 649px) {
  .col-2 { grid-column: span 2; }
  .col-3, .col-4, .col-5, .col-6, .col-8, .col-10, .col-12 { grid-column: span 4; }
  .site-grid { row-gap: 1rem; }
  .hide-m { display: none !important; }
  .site-grid > .col-2:empty { display: none; }
  .sec-head > .right, .after-quotes .right { grid-column: 1 / -1; justify-content: flex-start; margin-top: 1rem; }
  .apply-top .apply-progress { order: 3; grid-column: 1 / -1; margin-top: 1rem; }
}

/* ---------- píldora al pasar (igual que la home) ---------- */
.pill { position: relative; display: inline-block; }
.pill::before {
  content: ""; position: absolute; inset: -0.4rem -0.8rem -0.3rem; z-index: -1;
  border-radius: 0.5rem; background: transparent;
  transition: background-color .15s ease;
}
.pill:hover::before, .pill.is-on::before { background: var(--pill-bg); transition: background-color .3s var(--ease-out); }

/* ---------- 1 · cabecera ---------- */
.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 25; padding-top: 2rem; mix-blend-mode: difference; }
.nav { display: flex; gap: 2.4rem; }
@media (max-width: 649px) { .site-header { padding-top: 1.5rem; } .site-header .col-6 { grid-column: span 2; } }

/* ---------- 2 · hero ---------- */
.hero { padding-top: 10rem; }
@media (max-width: 649px) { .hero { padding-top: 7rem; } }
.hero-head { display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center; }
.hero-head h1 { max-width: 13em; font-size: 7.2rem; line-height: 0.98; letter-spacing: -0.035em; }
@media (max-width: 649px) { .hero-head h1 { font-size: 4.2rem; } }
.hero-video { margin-top: 8rem; width: 100%; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
@media (max-width: 649px) { .hero-video { aspect-ratio: 4 / 3; margin-top: 5rem; } }
.hero-video { position: relative; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; }
.video-ctrls { position: absolute; right: 1rem; bottom: 1.4rem; display: flex; gap: .6rem; }
.video-ctrls .seg { height: auto; padding: .4rem .7rem; font-size: 1.1rem; border-radius: .4rem; }
@media (max-width: 649px) { .video-ctrls .seg { font-size: 1.1rem; padding: .4rem .6rem; } }
/* barra de progreso "falsa": avanza rápido al principio y se frena después */
.vsl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: .4rem; background: rgba(255, 255, 255, .2); }
.vsl-bar span { display: block; height: 100%; width: 0; background: var(--fg); }

/* ---------- secciones ---------- */
.block { margin-top: 12rem; }
@media (max-width: 649px) { .block { margin-top: 6rem; } }
.sec-head { margin-bottom: 4rem; }

/* ---------- 3 · portfolio (tiles como la home) ---------- */
.works { row-gap: 4rem; }
.work { grid-column: span 7; display: block; transition: opacity .2s ease; }
@media (max-width: 649px) { .work { grid-column: span 4; } }
.works:hover .work { opacity: .2; }
.works .work:hover { opacity: 1; }
.work-meta { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.work-meta span { color: var(--muted); }
.work-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.work-media video, .work-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-media img { transition: opacity .3s; }
.work.is-playing .work-media img { opacity: 0; }

/* ---------- 4 · opiniones ---------- */
.carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.carousel::-webkit-scrollbar { display: none; }
.track { display: flex; gap: var(--gutter); width: max-content; }
.quote {
  scroll-snap-align: start; flex: none;
  width: calc((100vw - var(--gutter) * 15) / 14 * 4 + var(--gutter) * 3); /* 4 columnas */
  display: flex; flex-direction: column; gap: 1.2rem;
}
@media (max-width: 649px) { .quote { width: 80vw; } }
.quote p { min-height: 5.5em; }
.quote .who { display: flex; flex-direction: column; }
.quote .who span { color: var(--muted); }
.quote.is-placeholder p, .quote.is-placeholder .who { color: var(--muted); }
.quote-cta p { color: var(--muted); }
.carousel-progress { height: 1px; background: var(--line); margin-top: 4rem; }
.after-quotes { margin-top: 4rem; }
.carousel-progress span { display: block; height: 100%; width: 20%; background: var(--fg); transition: width .2s; }

/* ---------- 5 · servicios (diagrama de líneas finas) ---------- */
.diagram-inner { display: flex; flex-direction: column; align-items: stretch; }
.nodes { display: grid; grid-template-columns: repeat(4, 1fr); }
.node { display: flex; align-items: baseline; gap: .6rem; justify-self: center; }
.dot { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid var(--muted); align-self: center; transition: background .3s, border-color .3s; }
.node.is-done .dot { background: var(--fg); border-color: var(--fg); }
.wires { width: 100%; height: 6rem; margin: 1rem 0; }
.wires path { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.node-main { align-self: center; }
@media (max-width: 649px) {
  .nodes { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; }
  .node { justify-self: start; }
  .wires { display: none; }
  .node-main { align-self: flex-start; margin-top: 2rem; }
  .node-main::before { content: "→ "; color: var(--muted); }
}

/* ---------- 6 · KPIs ---------- */
.kpis { row-gap: 1.4rem; align-items: stretch; }
.kpi {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 2.4rem 2.2rem; border-radius: 1.2rem;
  background: rgba(242, 182, 90, 0.035);
  box-shadow: inset 0 0 0 1px rgba(242, 182, 90, 0.22);
}
@media (max-width: 649px) { .kpis { row-gap: 1rem; } .kpi { padding: 1.8rem 1.6rem; border-radius: 1rem; } }
.kpi b { font-variant-numeric: tabular-nums; margin-bottom: .8rem; }
.kpi p { max-width: 28ch; }

/* ---------- 6b · secuencia de imágenes: estática en la página, avanza con el scroll ---------- */
.scrub { margin-top: 2.5rem; }
.scrub-sticky {
  width: 100%; aspect-ratio: 1440 / 400;
  /* el vídeo original toca el borde derecho: fundido suave en vez de corte seco */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 90%, transparent 100%);
}
.scrub-sticky canvas { display: block; width: 100%; height: 100%; }
.after-scrub { margin-top: 3rem; }
@media (max-width: 649px) { .scrub { margin-top: 2rem; } .after-scrub { margin-top: 2.5rem; } }

/* ---------- 7 · frase ---------- */

/* ---------- 8 · CTA final (caja centrada) ---------- */
.final-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.4rem; padding: 0 0 4rem; }
.final.block { margin-top: 7rem; }
.chip {
  display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; border-radius: 999px;
  color: var(--muted); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line);
}
.final-title {
  font-size: 6.4rem; line-height: 1; letter-spacing: -0.03em; max-width: 12em;
  background: linear-gradient(100deg, #fff 35%, rgba(255, 255, 255, .45) 60%, #fff 85%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.final-sub { max-width: 40ch; }
.cta-solid {
  margin-top: .6rem; padding: 1.2rem 2.8rem; border-radius: 999px; font-size: 2.1rem;
  color: var(--fg); background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .45);
  transition: background-color .3s, box-shadow .3s;
}
.cta-solid:hover { background: rgba(255, 210, 140, .08); box-shadow: inset 0 0 0 1px rgba(255, 210, 140, .8); }
@media (max-width: 649px) {
  .final-box { padding: 0 0 3rem; gap: 1.8rem; }
  .final.block { margin-top: 4.5rem; }
  .final-title { font-size: 3.4rem; }
  .cta-solid { padding: .9rem 1.8rem; font-size: 1.5rem; }
}

/* dirigible flotando bajo el CTA final (render sobre negro puro, se funde con la página) */
.blimp-wrap { margin-top: 2rem; overflow: hidden; }
.blimp-float { width: 100%; max-width: 140rem; margin-inline: auto; animation: heading 10s ease-in-out infinite; will-change: transform; }
.blimp-float img {
  display: block; width: 100%; height: auto; mix-blend-mode: screen; animation: bob 4.5s ease-in-out infinite;
  /* fundido en los bordes: el haz de luz nunca se ve cortado */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 98%), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
/* avanza en la diagonal del rumbo (morro abajo-izquierda) y vuelve */
@keyframes heading {
  0%, 100% { transform: translate(1.2%, -1.4%); }
  50% { transform: translate(-1.2%, 1.4%); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-1.6%) rotate(0.4deg); }
}
@media (prefers-reduced-motion: reduce) { .blimp-float, .blimp-float img { animation: none; } }

/* ---------- 9 · footer ---------- */
.site-footer { margin-top: 16rem; padding-bottom: 6rem; }
.site-footer .site-grid { align-items: end; row-gap: 3rem; }
@media (max-width: 649px) { .site-footer { margin-top: 8rem; padding-bottom: 8rem; } }

/* ---------- barra inferior (como el dock de la home) ---------- */
.dock { position: fixed; left: 1.4rem; bottom: 1.2rem; z-index: 30; transform: translateY(200%); transition: transform .5s var(--ease-out); }
.dock.is-on { transform: none; }
.dock .seg { height: auto; padding: .4rem .7rem; font-size: 1.1rem; border-radius: .4rem; }
.seg, .cookies {
  display: flex; gap: .8rem; align-items: center;
  height: 2.5rem; padding: 0 .5rem; border-radius: .5rem;
  background: rgba(20, 20, 20, .6); backdrop-filter: blur(16px);
}
@media (max-width: 649px) { .seg, .cookies { height: 3.2rem; padding: 0 .8rem; } }

.cookies { position: fixed; right: 1.4rem; bottom: 1.2rem; z-index: 31; }
.cookies.cookies { height: auto; padding: .35rem .7rem; gap: .9rem; font-size: 1.1rem; border-radius: .4rem; }
.cookies button { color: var(--muted); transition: color .3s; }
.cookies button:hover, .cookies [data-cookies="accept"] { color: var(--fg); }
@media (max-width: 649px) { .cookies.cookies { left: auto; max-width: calc(100% - 2.8rem); padding: .45rem .7rem; font-size: 1.1rem; } }

/* ---------- cuestionario ---------- */
.apply { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow-y: auto; }
.apply-top { padding-block: 2rem; align-items: center; position: sticky; top: 0; background: var(--bg); }
.apply-progress { height: 1px; background: var(--line); }
.apply-progress span { display: block; height: 100%; background: var(--fg); transition: width .4s var(--ease-out); }
.apply-body { padding-top: clamp(6rem, 18vh, 18rem); padding-bottom: 10rem; }
.apply-main { display: flex; flex-direction: column; }
.apply-desc { margin-top: 1.6rem; max-width: 50ch; }
.apply-fields { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; margin-top: 5rem; }
.opt { color: var(--muted); transition: color .2s; }
.opt::after { content: ""; }
.opt:hover, .opt.is-on { color: var(--fg); }
.opt .n { display: inline-block; width: 4rem; color: var(--muted); }
.apply input[type=text], .apply input[type=email], .apply input[type=tel], .apply input[type=url], .apply textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: .8rem 0; outline: none; transition: border-color .2s;
}
@media (max-width: 649px) { .apply input, .apply textarea { font-size: 16px; } }
.apply textarea { resize: vertical; min-height: 8rem; }
.apply input::placeholder, .apply textarea::placeholder { color: var(--muted); }
.apply input:focus, .apply textarea:focus { border-color: var(--fg); }
.apply .is-invalid { border-color: var(--error) !important; }
.file { color: var(--muted); cursor: pointer; }
.file:hover { color: var(--fg); }
.file input { display: none; }
.check { display: flex; gap: 1rem; align-items: flex-start; color: var(--muted); }
.check input { width: 1.4em; height: 1.4em; accent-color: #fff; flex: none; }
.check a { color: var(--fg); }
.check.is-invalid span { color: var(--error); }
.apply-error { color: var(--error); min-height: 1.2em; margin-top: 2rem; }
.apply-actions { display: flex; justify-content: space-between; margin-top: 3rem; }
.apply-actions [data-back][hidden] { display: inline-block !important; visibility: hidden; }
.apply-actions [disabled] { color: var(--muted); pointer-events: none; }
.calendly { width: 100%; height: 680px; border: 0; margin-top: 1rem; }

/* ---------- entrada al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform 1s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ---------- protección contra copia ---------- */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, video { -webkit-user-drag: none; }
@media print { body { display: none !important; } }

/* ---------- acentos dorados ---------- */
.gold { color: var(--gold); }
.sec-head > .muted:first-child, .after-quotes > .muted:first-child, .final .chip { color: var(--gold-soft); }
.final .chip { box-shadow: inset 0 0 0 1px rgba(242, 182, 90, .3); }
.site-header .right .pill { color: var(--gold); }
.pill:hover::before, .pill.is-on::before { background: rgba(242, 182, 90, .14); }
.kpi b { color: var(--gold); }
.vsl-bar span, .carousel-progress span, .apply-progress span { background: var(--gold); }
.node.is-done .dot { background: var(--gold); border-color: var(--gold); }
.node-main { color: var(--gold); }
.node .muted { color: var(--gold-soft); }
.work-meta span { color: var(--gold-soft); }
.opt:hover, .opt.is-on { color: var(--gold); }
.opt.is-on .n { color: var(--gold); }
.apply-count { color: var(--gold-soft); }
.dock .seg { color: var(--gold); }

/* frase grande centrada */
.statement-text { text-align: center; max-width: 16em; margin-inline: auto; }

/* ---------- resultados: cifras con degradado dorado (sustituye a las tarjetas) ---------- */
.kpi-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  padding: 6rem 4rem; border-radius: 1.6rem;
  /* resplandor que se desvanece del todo antes de los bordes: sin cortes visibles */
  background: radial-gradient(46% 46% at 50% 50%, rgba(242, 182, 90, 0.09), rgba(242, 182, 90, 0.03) 55%, transparent 100%);
}
.kpi-band .kpi { padding: 0; border-radius: 0; background: none; box-shadow: none; gap: .6rem; align-items: center; text-align: center; }
.kpi-num {
  display: inline-flex; align-items: baseline; margin: 0;
  font-size: 7.2rem; line-height: 1; letter-spacing: -0.04em;
}
.kpi-num .n {
  background: linear-gradient(100deg, #b38a45 0%, #f6e7c6 38%, #d9b36b 62%, #f3dfb4 80%, #a8813f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi-num .plus {
  margin-left: .04em;
  background: linear-gradient(180deg, rgba(196, 160, 96, 0.9), rgba(120, 95, 50, 0.6));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kpi-band .kpi > span { color: rgba(255, 255, 255, 0.62); font-size: 1.9rem; }
.kpi-band .kpi p { display: none; }  /* como la referencia: solo cifra + etiqueta */
@media (max-width: 649px) {
  /* móvil: dos columnas centradas, la última cifra sola en su fila */
  .kpi-band { grid-template-columns: 1fr 1fr; gap: 4.2rem 1.6rem; padding: 3rem 0; background: none; border-radius: 0; }
  .kpi-band .kpi { align-items: center; text-align: center; gap: .5rem; }
  .kpi-band .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-num { font-size: 4.4rem; }
  .kpi-band .kpi > span { font-size: 1.6rem; line-height: 1.3; max-width: 9ch; }
}

/* ---------- opiniones: reseña arriba, foto pequeña redonda + nombre, cargo y empresa abajo ---------- */
.quote { justify-content: space-between; padding: 2.4rem; border-radius: 1.2rem; box-shadow: inset 0 0 0 1px rgba(242, 182, 90, 0.18); }
.quote p { min-height: 0; }
.quote .pending { color: var(--muted); }
.quote .who { flex-direction: row; align-items: center; gap: 1.2rem; }
.who-photo { width: 4.8rem; height: 4.8rem; border-radius: 50%; object-fit: cover; flex: none; background: #111; }
.who-text { display: flex; flex-direction: column; line-height: 1.25; }
.who-text span { color: var(--muted); }
.who-text em { font-style: normal; color: var(--gold-soft); }
@media (max-width: 649px) { .quote { padding: 1.8rem; } .who-photo { width: 4.4rem; height: 4.4rem; } }
.quote .story { color: rgba(255, 255, 255, 0.85); }
.quote .story b { font-weight: inherit; color: var(--gold); }

/* ---------- degradado dorado (el mismo de las cifras) en los puntos clave ---------- */
:root { --gold-grad: linear-gradient(100deg, #b38a45 0%, #f6e7c6 38%, #d9b36b 62%, #f3dfb4 80%, #a8813f 100%); }
.gold, .quote .story b {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;  /* el degradado sigue bien si la frase salta de línea */
}
/* titular final: degradado dorado con el brillo que lo recorre */
.final-title {
  background: linear-gradient(100deg, #a8813f 0%, #e9cf98 22%, #fff4dc 34%, #d9b36b 48%, #f3dfb4 66%, #b38a45 82%, #e9cf98 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- portfolio como publicaciones (logo + empresa, vídeo 4:5, título) ---------- */
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.work.post {
  grid-column: auto; border-radius: 1.4rem; overflow: hidden;
  background: #0b0b0b; box-shadow: inset 0 0 0 1px rgba(242, 182, 90, 0.16);
}
.post-head { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; }
.post-logo {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--gold-grad);
  box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 3px rgba(242, 182, 90, 0.55);
}
.post-logo img { width: 100%; height: 100%; object-fit: cover; }
.post-logo span { color: #1a1206; font-size: 1.5rem; }
.post-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.post-id b { font-weight: inherit; }
.post-id small { font-size: 1.3rem; color: var(--gold-soft); }
.post-more { margin-left: auto; color: var(--muted); letter-spacing: .1em; }
.work.post .work-media { aspect-ratio: 4 / 5; }
.post-caption { padding: 1.2rem 1.4rem 1.6rem; color: rgba(255, 255, 255, 0.8); }
.post-caption b { font-weight: inherit; color: var(--fg); margin-right: .4rem; }
@media (max-width: 649px) {
  .works { grid-template-columns: 1fr; gap: 1.6rem; }
  .post-head { padding: 1rem 1.2rem; }
  .post-logo { width: 3.2rem; height: 3.2rem; }
  .post-caption { padding: 1rem 1.2rem 1.4rem; }
}

/* perfil y título dentro del vídeo, sobre degradados negro → transparente */
.work.post { background: none; }
.work.post .work-media { border-radius: 1.4rem; }
.work.post .post-head, .work.post .post-caption { position: absolute; left: 0; right: 0; z-index: 2; margin: 0; }
.work.post .post-head { top: 0; padding: 1.4rem 1.4rem 4rem; background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 55%, transparent 100%); }
.work.post .post-caption { bottom: 0; padding: 4.5rem 1.4rem 1.4rem; background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 60%, transparent 100%); }
.work.post .post-id small { color: var(--gold); }
.work.post .post-more { color: rgba(255, 255, 255, .7); }
@media (max-width: 649px) {
  .work.post .post-head { padding: 1.2rem 1.2rem 3.4rem; }
  .work.post .post-caption { padding: 3.8rem 1.2rem 1.2rem; }
}

/* el logo va dentro del vídeo: que no herede las reglas de la imagen de portada */
.work.post .post-logo img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; transition: none; }
.work.post .post-logo:has(img) { background: #fff; }

/* perfil abajo, sin bordes dorados ni textos extra */
.work.post { box-shadow: none; }
.work.post .post-logo { box-shadow: none; }
.work.post .post-head {
  top: auto; bottom: 0; padding: 5rem 1.4rem 1.4rem;
  background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 55%, transparent 100%);
}
@media (max-width: 649px) { .work.post .post-head { padding: 4rem 1.2rem 1.2rem; } }

/* ---------- VSL más grande y redondeado ---------- */
.hero-video { margin-top: 5rem; border-radius: 1.6rem; overflow: hidden; }
.hero-video { aspect-ratio: 16 / 9; }  /* el VSL será 1920x1080: siempre 16:9, sin recortes */
@media (max-width: 649px) { .hero-video { margin-top: 3.5rem; aspect-ratio: 16 / 9; border-radius: 1.2rem; } }

/* ---------- portfolio más pequeño ---------- */
.works { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.work.post .work-media { border-radius: 1.1rem; }
.work.post .post-head { padding: 3.6rem 1.1rem 1.1rem; gap: .8rem; }
.work.post .post-logo { width: 3rem; height: 3rem; }
.work.post .post-id { font-size: 1.5rem; }
@media (max-width: 649px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .work.post .post-head { padding: 3rem .9rem .9rem; gap: .6rem; }
  .work.post .post-logo { width: 2.6rem; height: 2.6rem; }
  .work.post .post-id { font-size: 1.25rem; }
}

/* ---------- portfolio en 16:9 (todos los vídeos son 1920x1080) ---------- */
.work.post .work-media { aspect-ratio: 16 / 9; }
.works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.work.post .post-head { padding: 3rem 1.1rem 1rem; }
@media (max-width: 649px) {
  .works { grid-template-columns: 1fr; gap: 1.2rem; }
  .work.post .post-head { padding: 3rem 1.1rem 1rem; }
  .work.post .post-logo { width: 2.8rem; height: 2.8rem; }
  .work.post .post-id { font-size: 1.35rem; }
}

/* ---------- pulsación dorada en los botones "Reserva una llamada" ---------- */
[data-apply] { -webkit-tap-highlight-color: transparent; }
.cta-solid { transition: background-color .3s, box-shadow .3s, color .25s, transform .25s; }
.cta-solid.is-pressed {
  color: #1a1206;
  background: var(--gold-grad);
  box-shadow: 0 0 0 1px var(--gold), 0 0 2.6rem rgba(242, 182, 90, .5);
  animation: goldPress .55s cubic-bezier(.2, .9, .3, 1.2);
}
/* botones de texto (cabecera, secciones): la píldora se rellena de dorado */
.pill[data-apply].is-pressed { color: #1a1206; animation: goldPress .55s cubic-bezier(.2, .9, .3, 1.2); }
.pill[data-apply].is-pressed::before { background: var(--gold-grad); box-shadow: 0 0 2rem rgba(242, 182, 90, .45); transition: none; }
/* botón flotante */
.dock .seg { transition: background-color .3s, color .25s; }
.dock .seg.is-pressed { background: var(--gold-grad); color: #1a1206; animation: goldPress .55s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes goldPress {
  0% { transform: scale(1); }
  30% { transform: scale(.94); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
/* respuesta inmediata al tocar */
.cta-solid:active, .dock .seg:active { transform: scale(.96); }

/* ---------- cuestionario: entrada y pasos suaves ---------- */
.apply {
  background: rgba(0, 0, 0, 0.94);
  opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1), backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}
.apply.is-open { opacity: 1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.apply .apply-top { opacity: 0; transform: translateY(-1.2rem); transition: opacity .6s ease .1s, transform .7s cubic-bezier(.22, 1, .36, 1) .1s; }
.apply.is-open .apply-top { opacity: 1; transform: none; }
.apply-main.step-in > *, .apply-main.step-in .apply-fields > * { animation: stepIn .65s cubic-bezier(.22, 1, .36, 1) both; }
.apply-main.step-in > :nth-child(1) { animation-delay: .08s; }
.apply-main.step-in > :nth-child(2) { animation-delay: .14s; }
.apply-main.step-in > :nth-child(3) { animation-delay: .2s; }
.apply-main.step-in > :nth-child(5), .apply-main.step-in > :nth-child(6) { animation-delay: .42s; }
.apply-main.step-in .apply-fields > :nth-child(1) { animation-delay: .22s; }
.apply-main.step-in .apply-fields > :nth-child(2) { animation-delay: .27s; }
.apply-main.step-in .apply-fields > :nth-child(3) { animation-delay: .32s; }
.apply-main.step-in .apply-fields > :nth-child(4) { animation-delay: .37s; }
.apply-main.step-in .apply-fields > :nth-child(5) { animation-delay: .42s; }
.apply-main.step-in .apply-fields > :nth-child(n+6) { animation-delay: .46s; }
.apply-count { animation: none; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(1.8rem); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .apply, .apply .apply-top { transition: none; }
  .apply-main.step-in > *, .apply-main.step-in .apply-fields > * { animation: none; }
}

/* ---------- carrusel de fotos dentro de una publicación ---------- */
.work-media.is-carousel { background: #000; }
.post-track {
  position: absolute; inset: 0; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.post-track::-webkit-scrollbar { display: none; }
.work.post .post-track img {
  position: static; flex: none; height: 100%; width: auto; aspect-ratio: 4 / 5; object-fit: cover;
  scroll-snap-align: start; opacity: 1 !important;
}
.car-btn {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
  opacity: 0; transition: opacity .25s;
}
.car-btn.prev { left: 1rem; } .car-btn.next { right: 1rem; }
.work-media.is-carousel:hover .car-btn { opacity: 1; }
@media (hover: none) { .car-btn { display: none; } }  /* en móvil se desliza con el dedo */

/* ---------- publicaciones pulsables ---------- */
.work.post { cursor: pointer; }
.post-open {
  position: absolute; top: 1rem; right: 1rem; z-index: 3; padding: .4rem .8rem; border-radius: 999px; font-size: 1.2rem;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-.4rem); transition: opacity .25s, transform .25s;
}
.work.post:hover .post-open { opacity: 1; transform: none; }
@media (hover: none) { .post-open { opacity: 1; transform: none; } }

/* ---------- visor ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center;
  padding: 6rem var(--gutter) 4rem; background: rgba(0, 0, 0, .92); overflow-y: auto;
  opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), backdrop-filter .45s, -webkit-backdrop-filter .45s;
}
.viewer.is-open { opacity: 1; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.viewer-close { position: fixed; top: 2rem; right: 2.2rem; z-index: 2; }
.viewer-body { width: min(100%, 120rem); display: flex; flex-direction: column; gap: 2rem;
  transform: translateY(2rem) scale(.98); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.viewer.is-open .viewer-body { transform: none; }
.viewer-media video { display: block; width: 100%; max-height: 72vh; border-radius: 1.4rem; background: #000; }
.viewer-gallery { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.viewer-gallery::-webkit-scrollbar { display: none; }
.viewer-gallery img { flex: none; height: min(70vh, 60rem); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.2rem; scroll-snap-align: center; }
.viewer-info { display: flex; flex-direction: column; gap: 1rem; max-width: 60rem; }
.viewer-id { display: flex; align-items: center; gap: 1rem; }
.viewer-id > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.viewer-id b { font-weight: inherit; }
.viewer-id small { color: var(--gold-soft); font-size: 1.4rem; }
.viewer-id .post-logo { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--gold-grad); flex: none; }
.viewer-id .post-logo img { width: 100%; height: 100%; object-fit: cover; }
.viewer-id .post-logo:has(img) { background: #fff; }
.viewer-info p { color: rgba(255, 255, 255, .85); }
.viewer-info p b { font-weight: inherit; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 649px) {
  .viewer { padding: 6rem 1.2rem 3rem; align-items: flex-start; }
  .viewer-gallery img { height: 60vh; }
}

/* =================== secciones del nuevo posicionamiento =================== */
.hero-sub { max-width: 34em; text-align: center; margin-top: -1rem; }
.lang-switch { color: var(--muted); }

/* el problema */
.problem-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.problem-list li {
  display: flex; gap: 1rem; align-items: baseline; padding: 2rem; border-radius: 1.2rem;
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85);
}
.problem-list .x { color: var(--muted); font-size: .9em; }

/* servicios */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.svc {
  position: relative; display: flex; flex-direction: column; gap: 1.2rem; padding: 2.6rem 2.4rem; border-radius: 1.4rem;
  background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.svc.is-featured { background: rgba(242, 182, 90, .05); box-shadow: inset 0 0 0 1px rgba(242, 182, 90, .45); }
.svc-badge { position: absolute; top: -1.1rem; left: 2.4rem; padding: .3rem 1rem; border-radius: 999px; font-size: 1.2rem; color: #1a1206; background: var(--gold-grad); }
.svc-n { color: var(--gold-soft); }
.svc h3 { font-size: 2.8rem; line-height: 1.05; letter-spacing: -0.02em; }
.svc.is-featured h3 { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc p { color: rgba(255, 255, 255, .78); flex: 1; }
.svc-meta { color: var(--muted); font-size: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); }

/* proceso */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; list-style: none; counter-reset: none; }
.step { display: flex; flex-direction: column; gap: .8rem; padding-top: 1.6rem; border-top: 1px solid rgba(242, 182, 90, .35); }
.step-n { font-size: 4.2rem; line-height: 1; letter-spacing: -0.03em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font-size: 2rem; }
.step p { color: var(--muted); }

/* FAQ */
.faq { max-width: 90rem; margin-left: auto; margin-right: auto; border-top: 1px solid rgba(255, 255, 255, .1); }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 0; font-size: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: rgba(255, 255, 255, .75); padding: 0 0 2rem; max-width: 60ch; }

@media (max-width: 649px) {
  .problem-list, .services, .steps { grid-template-columns: 1fr; }
  .services { gap: 2.2rem; }
  .svc { padding: 2.2rem 1.8rem; }
  .svc h3 { font-size: 2.6rem; }
  .steps { gap: 2.4rem; }
  .faq-item summary { font-size: 1.7rem; padding: 1.6rem 0; }
  .hero-sub { font-size: 1.5rem; }
}
.problem-list .x { color: var(--gold-soft); font-size: .85em; }
.problem-list li:last-child { box-shadow: inset 0 0 0 1px rgba(242, 182, 90, .4); background: rgba(242, 182, 90, .05); }  /* la conclusión, destacada */

/* ---------- todos los "Reserva una llamada" de la página, centrados ---------- */
.sec-head > .right:has([data-apply]),
.after-quotes > .right:has([data-apply]),
.site-footer .right:has([data-apply]) {
  grid-column: 1 / -1; justify-content: center; text-align: center; margin-top: 2.4rem;
}
.sec-head > .right:has([data-apply]) { order: 10; }

/* botón de la cabecera: contorno fino para que se lea como botón */
.site-header [data-apply="nav"] {
  padding: .45rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(242, 182, 90, .5);
}
.site-header [data-apply="nav"]::before { inset: 0; border-radius: 999px; }
.quote-cta .cta-solid { font-size: 1.5rem; padding: .7rem 1.6rem; }

/* cabecera: botón en una sola línea y alineado con EN/ES */
.site-header .right.gap { align-items: center; gap: 1.6rem; }
.site-header [data-apply="nav"] { white-space: nowrap; }
@media (max-width: 649px) {
  .site-header .site-grid > a.col-2 { grid-column: span 1; align-self: center; }
  .site-header .right.gap { grid-column: span 3; gap: 1.2rem; }
  .site-header [data-apply="nav"] { font-size: 1.25rem; padding: .4rem .9rem; }
  .site-header .lang-switch { font-size: 1.25rem; }
}

/* logo mark */
.brand-mark { display: inline-flex; align-items: center; gap: .7rem; }
.brand-mark img { height: 3.2rem; width: auto; display: block; flex: none; }