@font-face {
  font-family: "Titulos";
  src: url("/assets/fonts/titulos.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --marca: #16213d;
  --marca-viva: #0066cc;
  --tinta: #0b1220;
  --tinta-suave: #475569;
  --fondo: #f5f6fa;
  --superficie: #ffffff;
  --alterna: #eef1f6;
  --burbuja: #e2e6ee;
  --borde: #dbe0ea;
  --acento: #0066cc;
  --acento-tinta: #ffffff;
  --acento-velo: rgb(0 153 255 / 0.08);
  --linea-trama: rgb(15 23 42 / 0.045);
  --bot: #0066cc;
  --cierre-tinte: #dde5f4;
  --sombra: 0 1px 2px rgb(15 23 42 / 0.05), 0 8px 24px -12px rgb(15 23 42 / 0.18);
  --canal-whatsapp: #25d366;
  --serif: "Titulos", Georgia, "Times New Roman", serif;
  --sistema: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ancho: 73.75rem;
  --barra: 64.5rem;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --marca: #0099ff;
    --marca-viva: #1aa3ff;
    --tinta: #fafafa;
    --tinta-suave: #a1a1aa;
    --fondo: #06060a;
    --superficie: #0b0d11;
    --alterna: #121214;
    --burbuja: #27272a;
    --borde: #26262b;
    --acento: #0099ff;
    --acento-tinta: #06060a;
    --acento-velo: rgb(0 153 255 / 0.12);
    --linea-trama: rgb(255 255 255 / 0.035);
    --bot: #0066cc;
    --cierre-tinte: #16213d;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
  }
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --marca: #0099ff;
  --marca-viva: #1aa3ff;
  --tinta: #fafafa;
  --tinta-suave: #a1a1aa;
  --fondo: #06060a;
  --superficie: #0b0d11;
  --alterna: #121214;
  --burbuja: #27272a;
  --borde: #26262b;
  --acento: #0099ff;
  --acento-tinta: #06060a;
  --acento-velo: rgb(0 153 255 / 0.12);
  --linea-trama: rgb(255 255 255 / 0.035);
  --bot: #0066cc;
  --cierre-tinte: #16213d;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
}
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 6.5rem; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 17px/1.65 var(--sistema);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.dato__etq, .via__estado { font-size: 13px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--marca-viva); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marca); }

:focus-visible {
  outline: 2px solid var(--marca-viva);
  outline-offset: 3px;
  border-radius: 3px;
}

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--marca);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}
.saltar:focus { left: 1rem; top: 1rem; }

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.envoltura--angosta { max-width: 44rem; }

.cab {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.7rem 0;
  background: linear-gradient(var(--fondo) 55%, transparent);
}
.cab__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.4rem;
  flex-wrap: wrap;
  width: min(100% - 1.5rem, var(--barra));
  padding: 0.4rem 0.5rem 0.4rem 1.2rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: color-mix(in srgb, var(--superficie) 86%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--sombra);
}
.logo { text-decoration: none; }

.tema {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva);
}
.tema:hover { color: var(--tinta); border-color: var(--acento); }
.tema svg { width: 1.05rem; height: 1.05rem; }
.tema circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.tema__mitad { fill: currentColor; }

.cab__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.cab__nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 15px;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--curva), border-color 0.2s var(--curva);
}
.cab__nav a:hover { color: var(--tinta); border-bottom-color: var(--marca); }
@media (max-width: 46rem) {
  
  .cab__fila {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    border-radius: 1.35rem;
    padding: 0.5rem 0.6rem 0.6rem 1rem;
  }
  .cab__nav { order: 3; width: 100%; }
  .cab__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.9rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .cab__nav::-webkit-scrollbar { display: none; }
  .cab__nav a { white-space: nowrap; font-size: 14px; }
  .logo svg { width: 82px; }
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--curva), box-shadow 0.2s var(--curva),
    background-color 0.2s var(--curva), border-color 0.2s var(--curva);
}
.boton--primario { background: var(--acento); color: var(--acento-tinta); box-shadow: var(--sombra); }
.boton--primario:hover { background: var(--acento); color: var(--acento-tinta); transform: translateY(-2px); filter: brightness(1.08); }

.boton--fantasma { border-color: var(--borde); color: var(--tinta); }
.boton--fantasma:hover { border-color: var(--marca); color: var(--marca); transform: translateY(-2px); }
.boton--grande { padding: 0.95rem 1.8rem; font-size: 16px; }

.boton[data-sin-destino] { opacity: 0.55; pointer-events: none; }

.ico-wa { width: 1.15em; height: 1.15em; fill: var(--canal-whatsapp); flex: none; }

.iconero { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico-tarjeta {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0.52rem;
  box-sizing: border-box;
  margin-bottom: 0.85rem;
  border-radius: 0.65rem;
  background: var(--acento-velo);
  color: var(--acento);
  transition: background-color 0.22s var(--curva);
}
@media (hover: hover) {
  .ficha:hover .ico-tarjeta,
  .rubro:hover .ico-tarjeta { background: color-mix(in srgb, var(--acento) 18%, transparent); }
}

.seccion { padding: clamp(2.75rem, 8vw, 7.5rem) 0; }
.seccion--alterna { background: var(--alterna); }
.seccion--sobria { background: var(--alterna); }
.seccion--titular { padding-bottom: 1rem; }
.seccion--angosta { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.seccion--central { background: var(--alterna); }

.seccion--cierre {
  text-align: center;
  padding-bottom: clamp(4rem, 10vw, 7rem);
  background: linear-gradient(180deg, var(--fondo), var(--cierre-tinte) 48%);
}

.seccion__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 1rem;
}
.seccion__eyebrow::before {
  content: "";
  flex: none;
  width: 1.15rem;
  height: 1px;
  background: currentColor;
}
.seccion--cierre .seccion__eyebrow { justify-content: center; }

.tranquilidad {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  font-size: 14px;
  color: var(--tinta-suave);
}
.tranquilidad li { display: flex; align-items: center; gap: 0.45rem; }
.tranquilidad li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--acento);
  flex: none;
}
.seccion__titulo { font-size: clamp(1.85rem, 4.6vw, 3rem); }
.seccion__bajada {
  font-size: clamp(17px, 2.2vw, 1.15rem);
  color: var(--tinta-suave);
  max-width: 46rem;
  margin-bottom: 1.75rem;
}

.seccion__cierre { margin-top: 2rem; color: var(--tinta-suave); max-width: 46rem; }

.heroe {
  padding: clamp(2.5rem, 9vw, 6.5rem) 0 clamp(2.25rem, 6vw, 4.5rem);
  position: relative;
  isolation: isolate;
  background: var(--fondo);
}
.heroe::before {
  content: "";
  position: absolute;
  inset: -6rem 0 0;
  z-index: -1;
  background:
    linear-gradient(var(--linea-trama) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--linea-trama) 1px, transparent 1px) 0 0 / 64px 100%,
    radial-gradient(48rem 22rem at 78% -8%, var(--acento-velo), transparent 66%),
    radial-gradient(60rem 30rem at 15% -6%, color-mix(in srgb, var(--marca) 12%, transparent), transparent 70%);
  -webkit-mask-image: radial-gradient(78rem 42rem at 50% 18%, #000 38%, transparent 80%);
  mask-image: radial-gradient(78rem 42rem at 50% 18%, #000 38%, transparent 80%);
}
.heroe__caja { max-width: 52rem; }

.sello {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.32rem 0.9rem 0.32rem 0.35rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  font-size: 14px;
  color: var(--tinta-suave);
  margin-bottom: 1.6rem;
  animation: entrar 0.7s var(--curva) both;
}
.sello__etq {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-velo);
  border-radius: 999px;
  padding: 0.4rem 0.6rem;
}
.heroe__titulo {
  font-size: clamp(2.2rem, 6.5vw, 4rem);
  letter-spacing: -0.03em;
  animation: entrar 0.7s var(--curva) both;
}
.heroe__titulo em { font-style: normal; color: var(--acento); }
.heroe__bajada {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--tinta-suave);
  max-width: 38rem;
  animation: entrar 0.7s 0.08s var(--curva) both;
}
.heroe__acciones {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 2rem 0 2.5rem;
  animation: entrar 0.7s 0.16s var(--curva) both;
}
.heroe__firma {
  border-left: 3px solid var(--marca);
  padding-left: 1.1rem;
  font-size: 15px;
  color: var(--tinta-suave);
  animation: entrar 0.7s 0.24s var(--curva) both;
}
.heroe__firma strong { color: var(--tinta); font-size: 1.15em; }

.chat {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1.1rem;
  box-shadow: var(--sombra);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  max-width: 40rem;
}

.chat__hilo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.js .chat .msj { opacity: 0; }
.msj {
  max-width: 85%;
  padding: 0.7rem 0.95rem;
  border-radius: 1rem;
}
.chat.in .msj { animation: burbuja 0.45s var(--curva) both; animation-delay: calc(var(--turno) * 0.55s + 0.2s); }
.msj--cliente { background: var(--burbuja); border-bottom-left-radius: 0.3rem; }
.msj--bot {
  background: var(--bot);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 0.3rem;
}
.msj__quien {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.15rem;
}
.msj__texto { margin: 0; font-size: 16px; line-height: 1.5; }
.chat__pie {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: 15px;
  color: var(--tinta-suave);
}

.tres { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.tres li {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  line-height: 1.3;
  padding-left: 1.4rem;
  border-left: 3px solid var(--borde);
}
.tres li:last-child { border-left-color: var(--acento); color: var(--tinta); }

.rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@media (min-width: 62rem) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
.rejilla--tres { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.ficha {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.4rem;
  transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva), border-color 0.25s var(--curva);
}
.ficha:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--acento) 70%, var(--borde)); }
.ficha h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.ficha p { color: var(--tinta-suave); font-size: 15.5px; margin: 0; }

.pasos { list-style: none; margin: 0 0 2.5rem; padding: 0; counter-reset: paso; display: grid; gap: 1.5rem; }
.paso { counter-increment: paso; padding-left: 3.4rem; position: relative; }
.paso::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--marca);
  color: var(--fondo);
  font-family: var(--serif);
  font-weight: 700;
}
.paso h3 { font-size: 1.2rem; }
.paso p { color: var(--tinta-suave); margin: 0; }

.destacado {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--marca);
  border-radius: 1rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: var(--sombra);
}

.destacado__nodice, .dato__nodice {
  background: var(--alterna);
  border-radius: 0.6rem;
  padding: 0.9rem 1.1rem;
  font-size: 15.5px;
  color: var(--tinta-suave);
  margin-top: 1rem;
}
.destacado--plan { border-left-color: var(--marca); background: var(--superficie); }
.dato__etq {
  display: block;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--marca);
  margin-bottom: 0.3rem;
}

.tarjeta-local {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.6rem;
  box-shadow: var(--sombra);
}
.tarjeta-local h3 { font-size: 1.35rem; color: var(--tinta); margin-bottom: 0.2rem; }
.tarjeta-local__meta { font-size: 14px; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }

.datos { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.datos--detalle { grid-template-columns: 1fr; max-width: 48rem; }
.dato {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.5rem;
  scroll-margin-top: 5rem;
}
.dato__titular { font-size: 1.2rem; color: var(--tinta); }
.dato__ficha {
  margin: 1rem 0;
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  padding: 0.9rem 0;
}
.dato__ficha > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; }
.dato__ficha dt {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-top: 0.15rem;
}
.dato__ficha dd { margin: 0; font-size: 15px; }
.dato__metodo { font-size: 15.5px; color: var(--tinta-suave); }
.desglose { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 15px; }
.desglose caption {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: 0.5rem;
}
.desglose td { border-bottom: 1px solid var(--borde); padding: 0.45rem 0; }
.desglose__n { font-family: var(--serif); font-weight: 700; color: var(--acento); width: 4rem; }

.vias {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.via {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.5rem 1.4rem 1.4rem;
}

.via__paso {
  font-weight: 700;
  position: absolute;
  top: -0.85rem;
  left: 1.3rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  background: var(--fondo);
  border: 1.5px solid var(--borde);
  color: var(--tinta-suave);
}

.via__nombre { font-size: 1.15rem; margin-bottom: 0.15rem; }
.via__estado {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.8rem;
}

.via__resumen { font-size: 15.5px; }

.aviso {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--borde);
  border-radius: 1rem;
  background: var(--alterna);
  font-size: 15.5px;
}
.aviso__fecha {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--marca);
  white-space: nowrap;
  margin: 0;
}

.lista-no { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.lista-no > li { border-left: 3px solid var(--borde); padding-left: 1.2rem; }
.lista-no > li:first-child { border-left-color: var(--marca); }
.lista-no h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.lista-no p { color: var(--tinta-suave); margin: 0; }
.lista-no--simple > li { border-left-color: var(--borde); }

.retirado {
  border: 1px dashed var(--borde);
  border-radius: 1rem;
  padding: 1.2rem 1.3rem;
  margin-bottom: 1rem;
  background: var(--superficie);
}
.retirado__cifra {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.retirado__cifra s {
  color: var(--tinta-suave);
  text-decoration-thickness: 2px;
  margin-right: 0.35rem;
}
.retirado__motivo { color: var(--tinta-suave); font-size: 15.5px; margin-bottom: 0.7rem; }
.retirado__firma {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0;
}

.ficha h3 a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--acento) 60%, transparent);
  text-underline-offset: 4px;
}
.ficha h3 a:hover { color: var(--acento); text-decoration-color: currentColor; }

.checklist { list-style: none; margin: 0; padding: 0; counter-reset: cl; display: grid; gap: 1rem; }
.checklist > li {
  counter-increment: cl;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.4rem 1.5rem;
  position: relative;
}
.checklist > li > h2 {
  font-size: 1.2rem;
  margin: 0 0 0.9rem;
  padding-left: 2.1rem;
}
.checklist > li > h2::before {
  content: counter(cl, decimal-leading-zero);
  position: absolute;
  left: 1.5rem;
  font: 500 12px/1.9 var(--mono);
  letter-spacing: 0.08em;
  color: var(--acento);
}
.checklist__buena, .checklist__mala { margin: 0 0 0.7rem; font-size: 15.5px; color: var(--tinta-suave); }
.checklist__mala { margin-bottom: 0; }
.checklist__buena .dato__etq { color: var(--acento); }
.checklist__mala .dato__etq { color: var(--tinta-suave); }

.bitacora { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hito {
  padding: 1.4rem 0 1.4rem 1.4rem;
  border-left: 2px solid var(--borde);
}
.hito--correccion { border-left-color: var(--acento); }
.hito__fecha {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.6rem;
}
.hito--correccion .hito__fecha { color: var(--acento); }
.hito__titulo { font-size: 1.15rem; margin-bottom: 0.35rem; }
.hito__texto { color: var(--tinta-suave); font-size: 15.5px; margin: 0; }

.canales {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.canal {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.4rem;
  transition: transform 0.22s var(--curva), box-shadow 0.22s var(--curva), border-color 0.22s var(--curva);
}
@media (hover: hover) {
  .canal:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--acento) 70%, var(--borde)); }
}
.canal__nombre { font-size: 1.15rem; margin-bottom: 0.35rem; }
.canal__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.8rem;
}
.canal__estado::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.canal__estado--vivo { color: var(--acento); }
.canal__estado--vivo::before { background: currentColor; box-shadow: none; }
.canal__que { font-size: 15.5px; color: var(--tinta-suave); margin: 0; }
.canal__nota {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--borde);
  font-size: 14.5px;
  color: var(--tinta-suave);
}

.rubros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.rubro__hace {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  font-size: 15px;
  color: var(--tinta-suave);
}

.etiquetas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etiquetas li {
  border: 1px dashed var(--borde);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 14.5px;
  color: var(--tinta-suave);
  text-transform: capitalize;
}

.lista-precio { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.lista-precio li {
  padding-left: 1.8rem;
  position: relative;
  color: var(--tinta-suave);
}
.lista-precio li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--marca);
}
.lista-precio strong { color: var(--tinta); }

.obj {
  border-bottom: 1px solid var(--borde);
  padding: 0.3rem 0;
}
.obj summary {
  cursor: pointer;
  padding: 1rem 2rem 1rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  position: relative;
  list-style: none;
}
.obj summary::-webkit-details-marker { display: none; }
.obj summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--marca);
  transition: transform 0.25s var(--curva);
}
.obj[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.obj p { color: var(--tinta-suave); padding-bottom: 1rem; margin: 0; }
.obj[open] p { animation: entrar 0.35s var(--curva) both; }

.pie { background: var(--alterna); border-top: 1px solid var(--borde); padding: 3rem 0 2.5rem; }

.pie__marca { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--tinta); margin-bottom: 0.3rem; }
.pie__nota { color: var(--tinta-suave); max-width: 30rem; font-size: 15.5px; }

.pie__legal {
  border-top: 1px solid var(--borde);
  padding-top: 1.5rem;
  font-size: 13px;
  color: var(--tinta-suave);
  max-width: 48rem;
}

@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes burbuja {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--curva), transform 0.6s var(--curva); }
.js .reveal--fuerte { transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }
.js .datos .dato.reveal.in,
.js .rejilla .ficha.reveal.in,
.js .vias .via.reveal.in { transition-delay: calc(var(--turno, 0) * 0.07s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal, .js .chat .msj { opacity: 1; transform: none; }
}

.logo { text-decoration: none; display: inline-block; }
.logo svg { display: block; width: 118px; height: auto; overflow: visible; color: var(--tinta); }
.logo__texto {
  fill: currentColor;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0;
  animation: logo-asentar 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) 0.26s backwards;
}
.logo__renglon {
  stroke: var(--acento);
  stroke-width: 3;
  stroke-linecap: round;
  animation: logo-renglon 0.34s cubic-bezier(0.33, 0, 0.15, 1) backwards;
}
@keyframes logo-renglon {
  from { stroke-dasharray: 108; stroke-dashoffset: 108; }
  to { stroke-dasharray: 108; stroke-dashoffset: 0; }
}
@keyframes logo-asentar {
  from { opacity: 0; letter-spacing: 0.2em; }
  to { opacity: 1; letter-spacing: 0; }
}

.barra-contacto { display: none; }
@media (max-width: 46rem) {
  .barra-contacto {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fondo) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--borde);
  }
  .barra-contacto .boton { width: 100%; justify-content: center; }
  
  .barra-contacto {
    transition: transform 0.25s var(--curva), opacity 0.25s var(--curva);
  }
  .barra-contacto--oculta {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  
  body { padding-bottom: 4.5rem; }
}

.pasos-linea { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: pl; }
.pasos-linea li {
  counter-increment: pl;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--borde);
}
.pasos-linea li::before {
  content: counter(pl);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--acento);
  text-align: right;
}
.pasos-linea h3 { font-size: 1.05rem; margin: 0 0 0.15rem; }

.paso-largo { border-left: 2px solid var(--borde); padding: 0 0 1.75rem 1.5rem; position: relative; }
.paso-largo:last-child { border-left-color: transparent; padding-bottom: 0; }
.paso-largo::before {
  content: attr(data-n);
  position: absolute;
  left: -1.05rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-tinta);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.95rem;
}
.paso-largo h2 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.paso-largo .paso-largo__linea { font-size: 1.05rem; margin-bottom: 0.6rem; }
.paso-largo .paso-largo__detalle { color: var(--tinta-suave); margin: 0; }

.cifras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cifra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  border-radius: 0.875rem;
  padding: 1.2rem 1.3rem;
}
.cifra__n {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  color: var(--acento);
  line-height: 1;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.cifra__q { font-size: 15.5px; margin-bottom: 0.5rem; }
.cifra__den { font-size: 13px; color: var(--tinta-suave); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .logo__texto, .logo__renglon { animation: none; }
}

.vias--resumen .via { padding: 1.1rem 1.2rem; }
.vias--resumen .via__estado { margin-bottom: 0; }

.destacado__criollo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 0.9rem;
  color: var(--tinta);
}

@media (max-width: 46rem) {
  
  .msj__quien { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .msj { max-width: 92%; padding: 0.6rem 0.85rem; }
  .chat__hilo { gap: 0.5rem; }

  
  .rejilla { gap: 0.7rem; }
  .ficha { padding: 0.95rem 1rem; }
  .ficha:hover { transform: none; box-shadow: none; }
  .ficha h3 { font-size: 1.02rem; margin-bottom: 0.15rem; }
  .ficha p { font-size: 15px; }

  .seccion__bajada { margin-bottom: 1.25rem; font-size: 17px; }
  .seccion__cierre { margin-top: 1.25rem; }
  .pasos { gap: 1rem; }
  .paso { padding-left: 2.9rem; }
  .paso::before { width: 2rem; height: 2rem; font-size: 0.9rem; }
  .lista-no { gap: 0.9rem; }
  .cifras { gap: 0.6rem; }
  .cifra { padding: 0.9rem 1rem; }
  .heroe__titulo { font-size: clamp(2rem, 8.5vw, 2.6rem); }
}

.ejemplo {
  margin: 1.5rem 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 0.875rem;
}
.ejemplo__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.ejemplo__quien {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.1rem;
}
.ejemplo__p, .ejemplo__r { margin: 0 0 0.7rem; font-size: 15.5px; }
.ejemplo__r { color: var(--marca); font-weight: 500; }
.ejemplo__porque {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--borde);
  font-size: 15px;
  color: var(--tinta-suave);
}

.bloque__titulo {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--acento);
  display: inline-block;
}
.bloque__titulo:first-of-type { margin-top: 0.5rem; }

.ejemplo__fuente {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento);
  font-weight: 700;
  margin: -0.5rem 0 0.9rem;
}

.cifra,
.via,
.ejemplo,
.dato,
.tarjeta-local {
  transition:
    transform 0.22s var(--curva),
    box-shadow 0.22s var(--curva),
    border-color 0.22s var(--curva);
}
@media (hover: hover) {
  .cifra:hover,
  .via:hover,
  .ejemplo:hover,
  .dato:hover,
  .tarjeta-local:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    border-color: color-mix(in srgb, var(--acento) 70%, var(--borde));
  }
  
}

.boton:active {
  transform: translateY(1px) scale(0.96);
  transition-duration: 0.08s;
  filter: brightness(0.94);
}
.boton--primario:active,

.ficha:active,
.cifra:active,
.via:active,
.ejemplo:active,
.tarjeta-local:active,
.obj summary:active {
  transform: translateY(0) scale(0.995);
  box-shadow: none;
  transition-duration: 0.08s;
}

.logo svg { transition: transform 0.22s var(--curva); }
.logo__renglon { transition: stroke-width 0.22s var(--curva); }
@media (hover: hover) {
  .logo:hover .logo__renglon { stroke-width: 4.5; }
}
.logo:active svg { transform: scale(0.97); }

.obj summary { transition: color 0.18s var(--curva); }
@media (hover: hover) {
  .obj summary:hover { color: var(--acento); }
  .obj summary:hover::after { color: var(--acento); }
}

.boton:focus-visible { outline-offset: 4px; }

@media (hover: hover) {
}

@media (prefers-reduced-motion: reduce) {
  
  .cifra:hover, .via:hover, .ejemplo:hover, .dato:hover, .tarjeta-local:hover,
  .boton:active, .ficha:active, .cifra:active, .via:active, .ejemplo:active,
  .tarjeta-local:active, .obj summary:active, .logo:active svg {
    transform: none;
  }
}

.msj__sello {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.75;
}
.msj__sello::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.msj__sello--hueco { opacity: 0.95; }
.msj__sello--hueco::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.msj__sello + .msj__sello { margin-top: 0.25rem; }

.flecha {
  display: inline-block;
  transition: transform 0.2s ease-out;
}
@media (hover: hover) {
  a:hover .flecha { transform: translateX(5px); }
  a:not(:hover) .flecha { transform: translateX(0); }
}

.cab {
  transition:
    background-color 0.25s var(--curva),
    box-shadow 0.25s var(--curva),
    border-color 0.25s var(--curva);
}
.cab--movida {
  background: color-mix(in srgb, var(--fondo) 95%, transparent);
  box-shadow: 0 6px 24px -14px rgb(0 0 0 / 0.35);
  border-bottom-color: color-mix(in srgb, var(--acento) 30%, var(--borde));
}

.integras {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.integra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.4rem;
  transition:
    transform 0.22s var(--curva),
    box-shadow 0.22s var(--curva),
    border-color 0.22s var(--curva);
}
@media (hover: hover) {
  .integra:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    border-color: color-mix(in srgb, var(--acento) 70%, var(--borde));
  }
}
.integra:active { transform: translateY(0) scale(0.995); box-shadow: none; transition-duration: 0.08s; }
.integra__nombre { font-size: 1.2rem; color: var(--tinta); margin-bottom: 0.4rem; }
.integra__que { font-size: 15.5px; }
.integra__quien {
  font-size: 15px;
  color: var(--tinta-suave);
  border-top: 1px solid var(--borde);
  padding-top: 0.8rem;
  margin: 0.9rem 0 0;
}

.aviso--sobrio {
  display: block;
  border-left: 4px solid var(--acento);
  background: var(--superficie);
  margin-top: 0;
}

.integras--resumen { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.integra--resumen { padding: 1.1rem 1.2rem; }
.integra--resumen .integra__que { margin: 0; color: var(--tinta-suave); }

.integra__hoy {
  border-left: 3px solid var(--acento);
  padding: 0.15rem 0 0.15rem 0.8rem;
  margin: 0.9rem 0 0;
  font-size: 15px;
  color: var(--tinta-suave);
}

.vias--balanza { grid-template-columns: 1fr; }
.balanza {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}
@media (min-width: 40rem) {
  .balanza { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .balanza__lado--contra { border-left: 1px solid var(--borde); padding-left: 1.75rem; }
}
.balanza ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.balanza li { font-size: 15.5px; }
.balanza__lado--pro .dato__etq { color: var(--marca); }
.balanza__lado--contra .dato__etq { color: var(--acento); }
.balanza__lado--contra li { color: var(--tinta-suave); }
@media (max-width: 40rem) {
  .balanza__lado--contra { border-top: 1px dashed var(--borde); padding-top: 0.9rem; }
}
.via--resumen { padding: 1.3rem 1.4rem; }

.balanza--corta { margin-top: 0.9rem; padding-top: 0.9rem; gap: 1rem; }
.balanza--corta li { font-size: 14.5px; }
.balanza--corta .dato__etq { margin-bottom: 0.2rem; }
@media (min-width: 40rem) {
  .balanza--corta { grid-template-columns: 1fr; gap: 0.9rem; }
  .balanza--corta .balanza__lado--contra { border-left: 0; padding-left: 0; border-top: 1px dashed var(--borde); padding-top: 0.8rem; }
}
.via--resumen .via__estado { margin-bottom: 0; }

.costos {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0 0.6rem;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.costos caption {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: 0.5rem;
}
.costos td { border-bottom: 1px solid var(--borde); padding: 0.45rem 0; }
.costos__n { text-align: right; font-weight: 600; white-space: nowrap; padding-left: 1rem; }
.costos__nota { font-size: 15px; color: var(--tinta-suave); margin: 0 0 0.4rem; }

.promo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 1rem;
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: var(--sombra);
}
.promo .seccion__titulo { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.promo__descuento {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--acento);
  margin: 1rem 0 0.5rem;
}
.promo__nota { font-size: 15px; color: var(--tinta-suave); margin: 0; }

.rubros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.rubro {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  padding: 1.3rem;
  transition: transform 0.22s var(--curva), box-shadow 0.22s var(--curva), border-color 0.22s var(--curva);
}
@media (hover: hover) {
  .rubro:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--acento) 70%, var(--borde)); }
}
.rubro:active { transform: translateY(0) scale(0.995); box-shadow: none; transition-duration: 0.08s; }
.rubro__nombre { font-size: 1.15rem; color: var(--tinta); margin-bottom: 0.8rem; }
.rubro__preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rubro__preguntas li {
  font-size: 15.5px;
  color: var(--tinta-suave);
  padding-left: 0.9rem;
  border-left: 2px solid var(--borde);
}

.banco {
  margin-top: 1.75rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: 1rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
}
.banco__titulo { font-size: 1.15rem; margin-bottom: 0.6rem; }
.banco__aclaracion {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  font-size: 15px;
  color: var(--tinta-suave);
}

.pie__cols {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.25rem;
}
@media (min-width: 40rem) { .pie__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .pie__cols { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2.5rem 2rem; } }
.pie__col { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.pie__titulo {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 0.2rem;
}
.pie__col a {
  color: var(--tinta-suave);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.18s var(--curva);
}
@media (hover: hover) { .pie__col a:hover { color: var(--tinta); } }
.pie__dato { font-size: 15px; color: var(--tinta-suave); margin: 0; }
.pie__dato--tenue { font-size: 13px; opacity: 0.8; }
.pie__col--marca .pie__nota { max-width: 26rem; }

.heroe__grilla {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
  justify-items: center;
  text-align: center;
  grid-template-columns: 1fr;
}
.heroe__caja { margin-inline: auto; }
.heroe__bajada { margin-inline: auto; }
.heroe__acciones { justify-content: center; }

.heroe__grilla .telefono, .heroe__grilla .chat { text-align: left; }
.heroe__firma {
  border-left: 0;
  border-top: 1px solid var(--borde);
  padding: 1rem 0 0;
  max-width: 34rem;
  margin-inline: auto;
}

.telefono {
  justify-self: center;
  width: min(100%, 21rem);
  animation: entrar 0.8s 0.2s var(--curva) both;
}
.telefono__marco {
  border-radius: 2.2rem;
  padding: 0.55rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 22%, var(--borde)), var(--borde));
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.1),
    0 24px 60px -22px rgb(0 0 0 / 0.55);
}
.telefono__barra { display: flex; justify-content: center; padding: 0.15rem 0 0.4rem; }
.telefono__pastilla {
  width: 3.2rem;
  height: 0.3rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.35);
}
.telefono__pantalla {
  border-radius: 1.7rem;
  overflow: hidden;
  background: var(--fondo);
}
.telefono__cabecera {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--alterna);
  color: var(--tinta);
  border-bottom: 1px solid var(--borde);
}
.telefono__punto {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--acento) 30%, transparent);
  flex: none;
}
.telefono__quien { font-family: var(--serif); font-weight: 700; font-size: 15px; }
.telefono__estado { font-size: 12px; color: var(--tinta-suave); margin-left: auto; }

.chat--telefono {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.9rem 0.8rem 1.1rem;
  max-width: none;
  max-height: 24rem;
  overflow-y: auto;
}
.chat--telefono .msj { max-width: 90%; }
.chat--telefono .msj__texto { font-size: 14.5px; }
.chat--telefono .msj__quien { display: none; }
.chat--telefono .msj__sello { font-size: 11px; }

.telefono__rotulo {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.chat__pie--suelto {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.js .chat--telefono .msj { opacity: 0; }
.chat--telefono .msj {
  animation: burbuja 0.45s var(--curva) both;
  animation-delay: calc(var(--turno) * 0.6s + 0.7s);
}
@media (prefers-reduced-motion: reduce) {
  .js .chat--telefono .msj { opacity: 1; }
}

.chat--telefono {
  max-height: none;
  overflow: visible;
  padding: 0.85rem 0.75rem 1rem;
}
.chat--telefono .msj { padding: 0.55rem 0.75rem; }
.chat--telefono .msj__texto { font-size: 13.5px; line-height: 1.45; }
.chat--telefono .msj__sello { font-size: 10.5px; margin-top: 0.35rem; }
.chat--telefono .chat__hilo { gap: 0.45rem; }

.heroe__titulo { font-size: clamp(2.15rem, 5.6vw, 4.35rem); line-height: 1.02; }
@media (min-width: 62rem) {
  .heroe { padding-top: clamp(3rem, 6vw, 5rem); }
  .telefono { width: min(100%, 22.5rem); }
}

.seccion__titulo { font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -0.03em; }

.seccion--alterna,
.seccion--central,
.seccion--sobria {
  position: relative;
  background:
    radial-gradient(38rem 18rem at 92% 0%, var(--acento-velo), transparent 70%),
    var(--alterna);
}

.seccion--alterna::before,
.seccion--central::before,
.seccion--sobria::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--acento) 55%, transparent) 30%,
    color-mix(in srgb, var(--marca) 45%, transparent) 70%,
    transparent
  );
}

.seccion--central {
  background:
    radial-gradient(44rem 22rem at 88% -5%, color-mix(in srgb, var(--acento) 14%, transparent), transparent 68%),
    radial-gradient(50rem 26rem at 5% 100%, color-mix(in srgb, var(--marca) 18%, transparent), transparent 70%),
    var(--alterna);
}

.chat--telefono .msj--cliente { max-width: 78%; }
.chat--telefono .msj--bot { max-width: 88%; }

.seccion__cierre,
.seccion > .envoltura > p,
.banco > p,
.lista-no p,
.paso p {
  max-width: 46rem;
}
.seccion__bajada { max-width: 44rem; }

.tres li,
.paso,
.lista-no > li,
.destacado,
.ejemplo,
.banco,
.aviso,
.lista-precio li,
.integra__que,
.integra__quien,
.integra__hoy { max-width: 46rem; }

.tres li { max-width: 40rem; }

.destacado, .ejemplo, .banco { max-width: 52rem; }
.destacado p, .ejemplo p, .banco p { max-width: 44rem; }