/* Identidad compartida con Box y App;
sin fuentes ni recursos de terceros. */
:root {
  --tinta:#1f1c51;
  --azul:#4089ff;
  --azul-texto:#2865ce;
  --verde:#0b8279;
  --fondo:#f6f8fc;
  --gris:#626c80;
  --linea:#e5eaf2;
  --blanco:#fff;
  --radio:24px;
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:var(--fondo);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0;
  -webkit-font-smoothing:antialiased
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
button {
  color:inherit
}
button:not(:disabled),summary {
  cursor:pointer
}
img {
  max-width:100%;
  display:block
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  text-wrap:balance
}
p {
  line-height:1.7
}
h1 {
  font-size:clamp(2.8rem,4.8vw,4.4rem);
  line-height:1.06;
  letter-spacing:-.058em;
  font-weight:750
}
h2 {
  font-size:clamp(2rem,3.5vw,3rem);
  line-height:1.15;
  letter-spacing:-.045em
}
h3 {
  font-size:1.25rem;
  line-height:1.35;
  letter-spacing:-.025em
}
:focus-visible {
  outline:3px solid var(--azul);
  outline-offset:5px;
  border-radius:5px
}
[hidden] {
  display:none!important
}
.contenedor {
  width:min(1180px,calc(100% - 96px));
  margin-inline:auto
}
.icono {
  width:24px;
  height:24px;
  flex:none;
  vertical-align:middle
}
.simbolos,.solo-lector {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.saltar {
  position:fixed;
  left:16px;
  top:-90px;
  background:var(--tinta);
  color:white;
  padding:14px;
  z-index:20;
  border-radius:8px
}
.saltar:focus {
  top:12px
}
.sobretitulo {
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--azul-texto);
  display:flex;
  align-items:center;
  gap:9px;
  line-height:1.6
}
.punto {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--verde);
  flex:none
}
.etiqueta {
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--gris)
}
.micro {
  font-size:.75rem;
  color:var(--gris)
}
.icono-caja {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px;
  background:#edf3ff;
  color:var(--azul-texto);
  border-radius:13px;
  flex:none
}
.acciones {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}
.boton {
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  background:var(--tinta);
  color:var(--blanco);
  border:1px solid transparent;
  border-radius:12px;
  padding:14px 22px;
  font-size:.9rem;
  font-weight:650;
  line-height:1.35;
  transition:background .15s,transform .15s
}
.boton:hover {
  text-decoration:none;
  background:#302b70;
  transform:translateY(-1px)
}
.boton-pequeno {
  min-height:44px;
  padding:10px 18px
}
.enlace {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.875rem;
  font-weight:650;
  min-height:44px
}
.enlace .icono {
  width:19px;
  height:19px
}
.cabecera {
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--linea)
}
.navegacion {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:86px
}
.marca {
  display:inline-flex;
  flex:none
}
.marca img {
  object-fit:contain;
  object-position:left center
}
.navegacion nav {
  display:flex;
  align-items:center;
  gap:29px;
  font-size:.82rem;
  font-weight:550
}
.navegacion nav>a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px
}
.navegacion nav .icono {
  width:16px;
  height:16px
}
.nav-separador {
  height:22px;
  width:1px;
  background:var(--linea);
  margin-left:9px
}
.menu-boton {
  border:1px solid var(--linea);
  background:var(--blanco);
  padding:10px 14px;
  border-radius:10px;
  min-height:44px
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:55px;
  align-items:center;
  padding-top:83px;
  padding-bottom:68px
}
.hero .sobretitulo {
  font-size:.66rem;
  letter-spacing:.07em;
  margin-bottom:24px
}
.hero h1 span {
  color:var(--azul-texto)
}
.entrada {
  font-size:1.13rem;
  line-height:1.65;
  margin-top:27px;
  max-width:390px;
  color:#42465f
}
.hero-descripcion {
  color:var(--gris);
  font-size:.92rem;
  max-width:390px;
  margin-top:13px
}
.hero .acciones {
  margin-top:30px;
  gap:22px
}
.nota-hero {
  margin-top:25px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.75rem;
  color:var(--gris)
}
.nota-hero .icono {
  width:18px;
  height:18px
}
.vista-producto {
  position:relative;
  padding:25px 0
}
.vista-producto:before {
  content:"";
  position:absolute;
  inset:-12% 0;
  z-index:-1;
  background:radial-gradient(ellipse,#dfebff 0%,transparent 68%)
}
.ventana {
  border:1px solid #dce4f1;
  border-radius:17px;
  background:white;
  box-shadow:0 25px 60px -32px #1f1c5152,0 4px 13px #1f1c5105;
  overflow:hidden;
  transform:rotate(-1deg)
}
.ventana-barra {
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:space-between;
  border-bottom:1px solid var(--linea);
  background:#fafbfe;
  padding:12px 17px;
  font-size:.63rem;
  color:var(--gris)
}
.ventana-barra>.icono {
  width:14px;
  height:14px
}
.ventana-puntos {
  display:flex;
  gap:5px
}
.ventana-puntos i {
  width:6px;
  height:6px;
  background:#d8dfec;
  border-radius:50%
}
.producto-barra {
  padding:19px 24px;
  display:flex;
  gap:7px;
  align-items:center;
  border-bottom:1px solid #f0f2f7;
  font-size:.65rem;
  color:var(--gris)
}
.avatar {
  margin-left:auto;
  border-radius:50%;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  background:#eef3fc;
  font-size:.6rem;
  font-weight:700;
  color:var(--tinta)
}
.producto-contenido {
  padding:24px
}
.producto-titulo {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:23px
}
.producto-titulo h2 {
  font-size:1.4rem;
  letter-spacing:-.035em;
  margin-top:5px
}
.estado {
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:.6rem;
  font-weight:650;
  color:var(--verde);
  background:#e9f7f3;
  border:1px solid #e2f2ec;
  padding:6px 9px;
  border-radius:20px
}
.estado .punto {
  width:5px;
  height:5px
}
.estado-pendiente {
  background:#fff4e6;
  color:#95612c;
  border-color:#f8eddf
}
.pestanas {
  display:flex;
  gap:19px;
  border-bottom:1px solid var(--linea);
  margin-bottom:21px
}
.pestanas button {
  border:0;
  background:transparent;
  padding:7px 0 12px;
  font-size:.72rem;
  color:var(--gris);
  min-height:44px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px
}
.pestanas button[aria-selected=true] {
  border-bottom-color:var(--azul-texto);
  color:var(--tinta);
  font-weight:700
}
.panel-ejemplo {
  min-height:255px
}
.equipo-ejemplo {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:.75rem
}
.equipo-ejemplo .icono-caja {
  width:36px;
  height:36px;
  border-radius:10px
}
.equipo-ejemplo .icono {
  width:20px;
  height:20px
}
.equipo-ejemplo strong {
  display:block;
  font-weight:650
}
.equipo-ejemplo span:not(.icono-caja) {
  display:block;
  color:var(--gris);
  font-size:.65rem;
  margin-top:4px
}
.periodo-ejemplo {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.61rem;
  color:var(--gris);
  margin:22px 0 14px
}
.periodo-ejemplo span:first-child {
  color:var(--tinta);
  font-weight:600
}
.tabla-ejemplo {
  border-collapse:collapse;
  width:100%;
  font-size:.71rem;
  white-space:nowrap
}
.tabla-ejemplo th,.tabla-ejemplo td {
  padding:11px 6px;
  border-bottom:1px solid #edf0f7;
  text-align:right
}
.tabla-ejemplo th:first-child {
  text-align:left;
  padding-left:0
}
.tabla-ejemplo thead th {
  font-size:.59rem;
  color:var(--gris);
  font-weight:500;
  background:#f9fafe;
  padding-block:9px
}
.tabla-ejemplo th:last-child,.tabla-ejemplo td:last-child {
  padding-right:0
}
.tabla-ejemplo tbody td:last-child {
  font-weight:750;
  color:var(--azul-texto)
}
.tabla-ejemplo tbody th {
  font-weight:600
}
.ejemplo-pie {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--verde);
  font-size:.61rem;
  margin-top:19px
}
.ejemplo-pie .icono {
  width:14px;
  height:14px
}
.leyenda-ejemplo {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:23px;
  font-size:.66rem;
  color:var(--gris)
}
.leyenda-ejemplo .punto {
  background:#9caac2;
  width:5px;
  height:5px
}
.nivel {
  padding-top:22px
}
.nivel>div {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.7rem
}
.nivel strong {
  font-size:1rem
}
.nivel meter {
  display:block;
  width:100%;
  height:7px;
  appearance:none;
  border:0;
  border-radius:10px;
  background:#edf1f7;
  margin:10px 0 5px;
  overflow:hidden
}
.nivel meter::-webkit-meter-bar {
  background:#edf1f7;
  border:0;
  border-radius:10px;
  height:7px
}
.nivel meter::-webkit-meter-optimum-value {
  background:var(--tinta);
  border-radius:10px
}
.nivel meter::-moz-meter-bar {
  background:var(--tinta)
}
.nivel-prevision meter::-webkit-meter-optimum-value {
  background:var(--azul)
}
.nivel-prevision meter::-moz-meter-bar {
  background:var(--azul)
}
.nivel small {
  font-size:.59rem;
  color:var(--gris)
}
.ejemplo-aclaracion {
  color:var(--gris);
  font-size:.64rem;
  line-height:1.7;
  margin-top:19px
}
.mini-titulo {
  font-size:.75rem;
  font-weight:650;
  margin:0 0 12px
}
.sitio-ejemplo {
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom:1px solid var(--linea);
  padding:13px 0
}
.sitio-ejemplo .icono-caja {
  width:32px;
  height:32px;
  border-radius:9px
}
.sitio-ejemplo .icono {
  width:17px;
  height:17px
}
.sitio-ejemplo strong {
  font-size:.7rem;
  display:block
}
.sitio-ejemplo div>span {
  font-size:.62rem;
  color:var(--gris);
  display:block;
  margin-top:3px
}
.sitio-ejemplo>.estado {
  margin-left:auto;
  font-size:.55rem
}
.franja {
  border-block:1px solid var(--linea);
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  padding:22px 0
}
.franja p {
  font-size:.83rem;
  color:var(--gris)
}
.franja strong {
  color:var(--tinta);
  font-weight:650
}
.seccion {
  padding-top:95px;
  padding-bottom:95px
}
.encabezado-seccion {
  max-width:640px
}
.encabezado-seccion h2 {
  margin-top:15px
}
.encabezado-seccion>p:last-child:not(.sobretitulo) {
  color:var(--gris);
  margin-top:22px;
  font-size:.96rem;
  max-width:545px
}
.valor-principal {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:66px;
  align-items:center;
  padding:40px;
  margin-top:40px;
  background:white;
  border:1px solid var(--linea);
  border-radius:var(--radio)
}
.valor-copy h3 {
  margin-top:22px;
  font-size:1.5rem
}
.valor-copy>p {
  font-size:.9rem;
  color:var(--gris);
  margin-top:14px
}
.lista-check {
  list-style:none;
  margin:22px 0 0;
  padding:0;
  color:#4e5872;
  display:grid;
  gap:13px;
  font-size:.8rem
}
.lista-check li {
  padding-left:23px;
  position:relative;
  line-height:1.6
}
.lista-check li:before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--verde);
  font-weight:700
}
.conciliacion {
  background:var(--fondo);
  padding:28px;
  border:1px solid #edf0f7;
  border-radius:18px
}
.linea-periodo {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:25px
}
.linea-periodo>div {
  display:grid;
  gap:7px
}
.linea-periodo span:not(.linea) {
  font-size:.72rem;
  color:var(--gris)
}
.linea-periodo strong {
  font-size:1.65rem;
  letter-spacing:-.05em
}
.linea-periodo small {
  font-size:.66rem;
  color:var(--gris)
}
.linea {
  height:1px;
  background:#cbd7e9;
  flex:1;
  min-width:20px
}
.resultado {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:white;
  border:1px solid var(--linea);
  border-radius:12px;
  padding:19px;
  margin-top:24px
}
.resultado span {
  font-size:.72rem;
  color:var(--gris)
}
.resultado strong {
  font-size:2rem;
  display:block;
  margin-top:4px;
  letter-spacing:-.05em
}
.resultado strong small {
  font-size:.75rem;
  font-weight:500;
  color:var(--gris);
  letter-spacing:0
}
.resultado>.icono {
  width:28px;
  height:28px;
  padding:5px;
  background:#e9f7f3;
  color:var(--verde);
  border-radius:50%
}
.conciliacion>.micro {
  font-size:.66rem;
  margin-top:14px
}
.valores-secundarios {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px;
  margin-top:46px
}
.valores-secundarios article {
  padding:0 4px
}
.valores-secundarios h3 {
  margin-top:20px;
  font-size:1.12rem
}
.valores-secundarios p {
  color:var(--gris);
  font-size:.875rem;
  margin-top:12px
}
.flujo-fondo {
  background:#edf2fa;
  border-block:1px solid #e5ebf5
}
.pasos {
  list-style:none;
  padding:0;
  margin:45px 0 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  counter-reset:paso
}
.pasos li {
  position:relative;
  background:white;
  padding:30px;
  border:1px solid #e3eaf5;
  border-radius:18px;
  display:flex;
  align-items:flex-start;
  flex-direction:column
}
.pasos .numero {
  position:absolute;
  right:26px;
  top:25px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  color:#8e9eb8
}
.pasos li>.icono {
  color:var(--azul-texto);
  width:30px;
  height:30px;
  margin-bottom:24px
}
.pasos h3 {
  font-size:1.15rem
}
.pasos p {
  font-size:.85rem;
  color:var(--gris);
  margin-top:14px
}
.pasos .enlace {
  margin-top:13px;
  color:var(--azul-texto);
  font-size:.8rem
}
.continuidad {
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:30px;
  padding:23px 26px;
  border:1px solid #d9e4f3;
  border-radius:16px
}
.continuidad h3 {
  font-size:.92rem
}
.continuidad p {
  font-size:.8rem;
  color:var(--gris);
  margin-top:5px
}
.continuidad .icono-caja {
  background:#fff
}
.confianza {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
  border-bottom:1px solid var(--linea)
}
.confianza h2 {
  margin-top:15px
}
.texto-apoyo {
  font-size:.9rem;
  color:var(--gris);
  margin-top:23px;
  max-width:450px
}
.confianza-lista {
  display:grid;
  gap:30px
}
.confianza-lista article {
  display:flex;
  gap:18px
}
.confianza-lista article>.icono {
  color:var(--azul-texto);
  margin-top:3px;
  width:23px;
  height:23px
}
.confianza-lista h3 {
  font-size:1rem
}
.confianza-lista p {
  color:var(--gris);
  font-size:.85rem;
  margin-top:8px
}
.preguntas {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px
}
.acordeones details {
  border-bottom:1px solid #dae2ef
}
.acordeones summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 0;
  font-size:.9rem;
  font-weight:600;
  line-height:1.6
}
.acordeones summary::-webkit-details-marker {
  display:none
}
.acordeones summary>.icono {
  width:18px;
  height:18px;
  transition:transform .15s
}
.acordeones details[open] summary>.icono {
  transform:rotate(45deg)
}
.acordeones details p {
  font-size:.85rem;
  color:var(--gris);
  padding-bottom:23px
}
.acordeones .enlace {
  font-size:.8rem;
  margin-bottom:18px;
  color:var(--azul-texto)
}
.cierre {
  background:var(--tinta);
  color:white;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:54px 60px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:center;
  margin-bottom:70px
}
.cierre .sobretitulo {
  color:#a8c8ff
}
.cierre h2 {
  margin-top:18px;
  letter-spacing:-.04em
}
.cierre p:not(.sobretitulo) {
  color:#c2c4df;
  margin-top:20px;
  font-size:.9rem
}
.cierre .acciones {
  margin-top:30px;
  gap:23px
}
.cierre .enlace {
  font-size:.8rem;
  color:#e2e7ff
}
.boton-claro {
  background:white;
  color:var(--tinta)
}
.boton-claro:hover {
  background:#e7efff
}
.cierre-dibujo {
  width:260px;
  height:260px;
  position:relative;
  justify-self:end
}
.orbita {
  border:1px solid #ffffff15;
  border-radius:50%;
  position:absolute;
  inset:0
}
.orbita-dos {
  inset:45px
}
.nodo,.centro {
  position:absolute;
  display:grid;
  place-items:center;
  border:1px solid #ffffff26;
  background:#2b285f;
  border-radius:15px;
  width:50px;
  height:50px;
  color:#b6d0ff;
  box-shadow:0 8px 25px #11113030
}
.nodo-uno {
  left:2px;
  top:60px
}
.nodo-dos {
  right:0;
  top:75px
}
.nodo-tres {
  bottom:0;
  left:105px
}
.centro {
  width:80px;
  height:80px;
  top:90px;
  left:90px;
  border-radius:24px;
  background:#4b77d3;
  color:white
}
.centro .icono {
  width:40px;
  height:40px
}
.pie {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
  padding-bottom:30px
}
.pie>div:first-child p {
  font-size:.73rem;
  color:var(--gris);
  margin-top:16px
}
.pie-enlaces {
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  max-width:580px;
  justify-content:flex-end
}
.pie-enlaces a,
.pie-redes a {
  font-size:.75rem;
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.pie-final {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  border-top:1px solid var(--linea);
  width:100%;
  color:var(--gris);
  font-size:.75rem;
  padding-top:24px;
  margin-top:0
}
.pie-final p {
  margin:0
}
.pie-redes {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  color:var(--tinta)
}
.pie-redes a {
  gap:8px;
  padding:9px 12px;
  border:1px solid var(--linea);
  border-radius:10px;
  background:var(--blanco, #fff);
  font-weight:600
}
.pie-redes a:hover {
  border-color:var(--gris);
  background:#eef3fb
}
.icono-social {
  flex:none;
  fill:currentColor
}
.legal {
  max-width:760px;
  padding-block:70px
}
.legal h1 {
  font-size:2.8rem
}
.legal h2 {
  font-size:1.3rem;
  margin:32px 0 12px
}
.legal p {
  font-size:.95rem;
  color:var(--gris);
  margin:18px 0
}
.legal a {
  text-decoration:underline
}
.legal .sobretitulo {
  color:var(--azul-texto)
}
@media(min-width:901px) {
  .menu-boton {
    display:none!important
  }
}
@media(max-width:1100px) {
  .contenedor {
    width:calc(100% - 64px)
  }
  .hero {
    gap:30px;
    padding-top:65px
  }
  .hero .acciones {
    gap:14px
  }
  .navegacion nav {
    gap:20px
  }
  .hero h1 {
    font-size:clamp(2.75rem,5vw,3.6rem)
  }
  .valor-principal {
    gap:35px;
    padding:32px
  }
  .confianza,.preguntas {
    gap:45px
  }
  .pasos li {
    padding:25px
  }
  .cierre {
    padding:45px
  }
  .cierre-dibujo {
    transform:scale(.85);
    transform-origin:right center
  }
  .cierre .acciones {
    gap:15px
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
    gap:32px
  }
  .hero-copy {
    max-width:620px
  }
  .hero h1 {
    font-size:3.5rem
  }
  .vista-producto {
    width:100%;
    max-width:580px;
    margin-inline:auto
  }
  .vista-producto:before {
    inset:-12% 0
  }
  .entrada {
    font-size:1rem
  }
  .hero-descripcion {
    font-size:.85rem
  }
  .producto-contenido {
    padding:20px
  }
  .producto-barra {
    padding-inline:20px
  }
  .pestanas {
    gap:16px
  }
  .hero .boton {
    padding:13px 16px;
    font-size:.83rem
  }
  .hero .enlace {
    font-size:.8rem
  }
  .hero .acciones {
    gap:8px 18px
  }
  .producto-titulo h2 {
    font-size:1.2rem
  }
  .estado {
    font-size:.56rem;
    padding:5px 7px
  }
  .franja p {
    font-size:.75rem
  }
  .valores-secundarios {
    gap:25px
  }
  .valor-principal {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .conciliacion {
    padding:20px
  }
  .linea-periodo {
    gap:10px
  }
  .linea-periodo strong {
    font-size:1.4rem
  }
  .pasos {
    gap:16px
  }
  .pasos li {
    padding:23px
  }
  .cierre {
    grid-template-columns:1fr .45fr
  }
  .cierre-dibujo {
    width:200px;
    transform:scale(.7);
    transform-origin:left center
  }
  .pie-enlaces {
    max-width:430px
  }
}
@media(max-width:900px) {
  .contenedor {
    width:calc(100% - 40px)
  }
  .navegacion {
    min-height:74px;
    flex-wrap:wrap;
    gap:0;
    position:relative;
    padding-block:17px
  }
  .marca img {
    width:132px;
    height:32px
  }
  .menu-boton {
    margin-left:auto
  }
  .navegacion nav {
    width:100%;
    flex-wrap:wrap;
    gap:4px 24px;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid var(--linea)
  }
  html.con-js .navegacion nav:not(.abierto) {
    display:none
  }
  .navegacion nav>a {
    min-height:44px;
    font-size:.82rem
  }
  .nav-separador {
    display:none
  }
  .hero {
    grid-template-columns:minmax(0,1fr);
    gap:28px;
    padding-top:51px;
    padding-bottom:37px
  }
  .hero .sobretitulo {
    font-size:.65rem;
    margin-bottom:22px
  }
  .hero h1 {
    font-size:clamp(3rem,8.8vw,4.2rem);
    letter-spacing:-.055em
  }
  .hero h1 br:nth-of-type(2) {
    display:none
  }
  .entrada {
    font-size:1.1rem;
    max-width:440px;
    margin-top:24px
  }
  .hero-descripcion {
    font-size:.94rem;
    max-width:470px
  }
  .hero .acciones {
    margin-top:25px;
    gap:22px
  }
  .hero .boton {
    font-size:.88rem;
    padding:14px 20px
  }
  .hero .enlace {
    font-size:.85rem
  }
  .nota-hero {
    margin-top:22px
  }
  .vista-producto:before {
    inset:-12% 0
  }
  .vista-producto {
    max-width:560px;
    width:100%;
    margin:auto;
    padding:18px 8px 0
  }
  .ventana {
    transform:none
  }
  .producto-contenido {
    padding:24px
  }
  .producto-titulo h2 {
    font-size:1.4rem
  }
  .pestanas {
    gap:24px
  }
  .pestanas button {
    font-size:.78rem
  }
  .tabla-ejemplo {
    font-size:.8rem
  }
  .tabla-ejemplo thead th {
    font-size:.66rem
  }
  .equipo-ejemplo {
    font-size:.82rem
  }
  .equipo-ejemplo span:not(.icono-caja) {
    font-size:.72rem
  }
  .periodo-ejemplo {
    font-size:.67rem
  }
  .panel-ejemplo {
    min-height:260px
  }
  .ejemplo-pie {
    font-size:.67rem
  }
  .nivel>div {
    font-size:.8rem
  }
  .nivel small,.ejemplo-aclaracion {
    font-size:.7rem
  }
  .sitio-ejemplo strong {
    font-size:.8rem
  }
  .sitio-ejemplo div>span {
    font-size:.7rem
  }
  .sitio-ejemplo>.estado {
    font-size:.63rem
  }
  .estado {
    font-size:.63rem
  }
  .leyenda-ejemplo {
    margin-top:15px
  }
  .franja {
    display:block;
    padding-block:20px
  }
  .franja p {
    font-size:.8rem
  }
  .franja p+p {
    margin-top:4px
  }
  .seccion {
    padding-block:62px
  }
  h2 {
    font-size:2.25rem
  }
  .encabezado-seccion>p:last-child:not(.sobretitulo) {
    font-size:.9rem;
    margin-top:17px
  }
  .valor-principal {
    grid-template-columns:1fr;
    padding:27px;
    gap:30px;
    margin-top:28px
  }
  .valor-copy h3 {
    font-size:1.4rem
  }
  .conciliacion {
    padding:25px
  }
  .linea-periodo strong {
    font-size:1.8rem
  }
  .valores-secundarios {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:33px
  }
  .valores-secundarios article {
    position:relative;
    padding-left:64px
  }
  .valores-secundarios article>.icono-caja {
    position:absolute;
    left:0;
    top:0
  }
  .valores-secundarios h3 {
    margin-top:0
  }
  .valores-secundarios p {
    margin-top:9px
  }
  .pasos {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:30px
  }
  .pasos li {
    padding:26px 26px 26px 79px;
    min-height:150px
  }
  .pasos li>.icono {
    position:absolute;
    left:27px;
    top:30px;
    width:27px;
    height:27px
  }
  .pasos .numero {
    font-size:.65rem;
    top:12px;
    right:16px
  }
  .pasos p {
    margin-top:10px
  }
  .pasos .enlace {
    margin-top:7px
  }
  .continuidad {
    align-items:flex-start;
    padding:21px;
    gap:14px
  }
  .continuidad .icono-caja {
    width:36px;
    height:36px
  }
  .continuidad h3 {
    font-size:.9rem
  }
  .confianza {
    grid-template-columns:1fr;
    gap:35px
  }
  .confianza-lista {
    gap:27px
  }
  .texto-apoyo {
    max-width:none
  }
  .preguntas {
    grid-template-columns:1fr;
    gap:25px
  }
  .acordeones summary {
    font-size:.9rem;
    gap:20px;
    padding-block:21px
  }
  .cierre {
    padding:35px 28px;
    display:block;
    border-radius:20px;
    margin-bottom:45px
  }
  .cierre h2 {
    font-size:2.1rem
  }
  .cierre-dibujo {
    display:none
  }
  .cierre .acciones {
    gap:14px
  }
  .cierre .boton {
    padding:14px 17px
  }
  .pie {
    gap:24px
  }
  .pie-enlaces {
    justify-content:flex-start;
    max-width:none;
    gap:0 25px
  }
  .pie-final {
    margin-top:0;
    padding-top:19px
  }
  .legal {
    padding-block:45px
  }
  .legal h1 {
    font-size:2rem
  }
}
@media(max-width:380px) {
  .contenedor {
    width:calc(100% - 32px)
  }
  .hero h1 {
    font-size:clamp(2.25rem,11.8vw,2.75rem)
  }
  .hero .sobretitulo {
    font-size:.58rem;
    letter-spacing:.03em
  }
  .hero .acciones {
    gap:9px 18px
  }
  .hero .boton {
    padding:13px 17px
  }
  .vista-producto {
    padding-inline:0
  }
  .producto-contenido {
    padding:18px 14px
  }
  .producto-titulo {
    gap:7px
  }
  .producto-titulo h2 {
    font-size:1.2rem
  }
  .estado {
    font-size:.54rem;
    padding:5px 6px
  }
  .pestanas {
    gap:20px
  }
  .pestanas button {
    font-size:.71rem
  }
  .tabla-ejemplo {
    font-size:.7rem
  }
  .tabla-ejemplo thead th {
    font-size:.57rem
  }
  .tabla-ejemplo th,.tabla-ejemplo td {
    padding-inline:4px
  }
  .periodo-ejemplo {
    font-size:.58rem
  }
  .equipo-ejemplo {
    font-size:.73rem
  }
  .nivel>div {
    font-size:.7rem
  }
  .nivel small,.ejemplo-aclaracion {
    font-size:.65rem
  }
  .valor-principal {
    padding:23px
  }
  .conciliacion {
    padding:18px
  }
  .linea-periodo strong {
    font-size:1.4rem
  }
  .resultado {
    padding:14px
  }
  .valores-secundarios article {
    padding-left:58px
  }
  h2 {
    font-size:2rem
  }
  .cierre {
    padding:30px 23px
  }
  .cierre h2 {
    font-size:1.85rem
  }
  .sitio-ejemplo {
    gap:8px
  }
  .sitio-ejemplo strong {
    font-size:.72rem
  }
  .sitio-ejemplo>.estado {
    font-size:.55rem
  }
  .continuidad {
    padding:18px;
    gap:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}

/* Idioma, contacto y documentos públicos: misma escala visual que el producto. */
.idiomas {display:inline-flex;align-items:center;gap:2px;border:1px solid var(--linea);border-radius:10px;padding:2px;background:white;flex:none}
.navegacion .idiomas a {display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:.7rem;border-radius:7px;color:var(--gris)}
.navegacion .idiomas a[aria-current] {background:#edf3ff;color:var(--tinta);font-weight:750}
.contacto {display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding-top:20px;align-items:start}
.contacto-copy h2 {margin-top:16px;font-size:2.5rem}
.contacto-copy>p:not(.sobretitulo) {color:var(--gris);font-size:.9rem;margin-top:20px}
.contacto-copy>.micro {font-size:.78rem!important}
.contacto-copy>.enlace {margin-top:14px;font-size:.85rem;overflow-wrap:anywhere}
.contacto-pasos {margin-top:23px;display:grid;gap:10px;font-size:.78rem;color:var(--gris)}
.formulario-contacto {background:white;border:1px solid var(--linea);border-radius:24px;padding:32px;min-width:0}
.campos-contacto {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:21px 19px}
.campo {min-width:0;display:flex;flex-direction:column;gap:8px}
.campo-completo {grid-column:1/-1}
.campo label {font-size:.8rem;font-weight:600;line-height:1.6}
.campo label>span {font-weight:400;font-size:.72rem;color:var(--gris);margin-left:4px}
.campo input,.campo select,.campo textarea {min-height:48px;min-width:0;width:100%;background:#fff;border:1px solid #cfd8e9;border-radius:10px;padding:12px;color:var(--tinta);font:inherit;font-size:16px;line-height:1.45;box-shadow:none}
.campo input:hover,.campo select:hover,.campo textarea:hover {border-color:#9caecb}
.campo textarea {resize:vertical;max-height:400px}
.campo small {color:var(--gris);font-size:.7rem;line-height:1.6}
.campo [aria-invalid=true] {border-color:#b84628;outline:2px solid #b8462820}
.telefono {display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px}
.consentimiento {display:flex;gap:11px;align-items:flex-start;font-size:.75rem;line-height:1.7;margin-top:24px;color:var(--gris)}
.consentimiento input {margin:4px 0 0;flex:none;width:18px;height:18px;accent-color:var(--tinta)}
.consentimiento a {text-decoration:underline;text-underline-offset:3px;color:var(--tinta)}
.contacto-estado {font-size:.8rem;line-height:1.65;margin-top:17px;border-radius:10px;overflow-wrap:anywhere}
.contacto-estado:empty {margin:0}
.contacto-estado.error {padding:14px;background:#fff5ed;color:#944426}
.contacto-estado.exito {padding:14px;background:#eaf7f2;color:#0b7065}
.formulario-contacto>.boton {margin-top:20px}
.boton:disabled {opacity:.65;cursor:default;transform:none}
.senuelo {position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.foto-contacto {margin:27px 0 0}
.foto-contacto img {width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:17px;border:1px solid var(--linea)}
.foto-contacto figcaption {font-size:.66rem;color:var(--gris);margin-top:7px}
.legal {max-width:820px}
.legal h1 {letter-spacing:-.045em;margin-top:15px}
.legal section {border-top:1px solid var(--linea);padding-top:3px;margin-top:27px}
.legal section h2 {font-size:1.15rem;margin-top:25px;letter-spacing:-.02em}
.legal section p {font-size:.9rem;margin-block:14px;line-height:1.8}
.legal .micro {font-size:.76rem}
@media(max-width:1100px) {
  .navegacion nav {gap:17px}
  .contacto {gap:38px}
  .formulario-contacto {padding:27px}
}
@media(max-width:900px) {
  .contacto {grid-template-columns:minmax(0,1fr);gap:30px;padding-top:5px}
  .contacto-copy h2 {font-size:2.2rem}
  .contacto-copy>p {max-width:570px}
  .contacto-pasos {display:none}
  .foto-contacto {max-width:480px}
  .formulario-contacto {padding:28px}
  .navegacion .idiomas a {min-height:40px;min-width:44px}
}
@media(max-width:520px) {
  .campos-contacto {grid-template-columns:minmax(0,1fr);gap:18px}
  .formulario-contacto {padding:23px;border-radius:18px}
  .formulario-contacto>.boton {width:100%}
  .contacto-copy h2 {font-size:2rem}
  .telefono {grid-template-columns:90px minmax(0,1fr);gap:8px}
  .consentimiento {font-size:.74rem}
  .navegacion nav {gap:7px 20px}
  .legal h1 {font-size:2.2rem}
}