:root{
  --carbon:#0B1017; --panel:#131B24; --panel2:#16212C; --linea:#25313D; --linea2:#31424F;
  --tinta:#EAF1F7; --suave:#8DA0B2; --tenue:#5F7286;
  --cian:#00B4E0; --cian2:#7DD4F0; --wa:#25D366; --waTinta:#06210F; --waTexto:#5FE39B;
  --waFondo:#122620; --waBorde:#1E5F4A;
  --halo:rgba(0,180,224,.12); --sombra:rgba(0,0,0,.6);
  --sombraCaja:0 0.5rem 1.375rem rgba(0,0,0,.4);
  --titular:'Poppins',system-ui,sans-serif; --texto:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',monospace;
  
  --toque:2.875rem;
}
html[data-tema=claro]{
  --carbon:#E7EDF3; --panel:#FFFFFF; --panel2:#F2F6FA; --linea:#D2DDE7; --linea2:#B4C5D3;
  --tinta:#0D1620; --suave:#41525F; --tenue:#5A6B7A;
  --cian:#0079A0; --cian2:#00647F; --wa:#0F7A41; --waTinta:#FFFFFF; --waTexto:#0C6E3A;
  --waFondo:#E4F6EC; --waBorde:#9CD4B7;
  --halo:rgba(0,121,160,.12); --sombra:rgba(15,40,60,.20);
  --sombraCaja:0 0.25rem 1rem rgba(20,50,75,.10);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
body{background:var(--carbon); color:var(--tinta);
  font:400 1rem/1.55 var(--texto); -webkit-font-smoothing:antialiased;
  
  overscroll-behavior-y:none}
p{margin:0}
a{color:inherit}

.marco{height:100dvh; display:grid; place-items:center; padding:0}

.rotulo{display:none}

.tel{width:100%; height:100dvh; background:transparent; position:relative;
  display:flex; flex-direction:column; overflow:hidden}

.barra{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 0.6875rem) 0.9375rem 0.6875rem;
  border-bottom:1px solid var(--linea); background:var(--carbon); z-index:5}
.marca{display:inline-flex; align-items:center; gap:0.5625rem; background:none; border:0;
  cursor:pointer; color:inherit; font:700 1.0625rem var(--titular);
  
  min-height:var(--toque); padding:0 0.5625rem 0 0; margin-left:-2px}
.marca img{width:1.8125rem; height:1.8125rem}
.tema{display:grid; place-items:center; width:var(--toque); height:var(--toque);
  margin-right:-0.5625rem; border:0; background:none; cursor:pointer; color:var(--suave)}
.tema .sol{display:none}
html[data-tema=claro] .tema .sol{display:block}
html[data-tema=claro] .tema .luna{display:none}

.vista{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:1rem 0.9375rem calc(env(safe-area-inset-bottom) + 0.9375rem)}

.entrada{display:flex; flex-direction:column; align-items:center; text-align:center}
.entrada .fig{height:min(30vh,13.4375rem); width:calc(min(30vh,13.4375rem) * 0.67);
  object-fit:contain; filter:drop-shadow(0 0.75rem 1.625rem var(--sombra))}
.entrada h1{font:700 1.55rem/1.2 var(--titular); letter-spacing:-.015em;
  margin:0.875rem 0 0; max-width:19ch}
.entrada h1 span{color:var(--cian2)}

.chat{display:flex; align-items:center; gap:0.6875rem; margin-bottom:0.8125rem}
.chat .fig{height:4.625rem; width:3.125rem; object-fit:contain; object-position:top;
  filter:drop-shadow(0 0.375rem 0.875rem var(--sombra))}
.chat .quien{display:flex; flex-direction:column; gap:1px; min-width:0}
.chat .quien b{font:600 .95rem var(--titular)}
.chat .quien span{font-size:.76rem; color:var(--tenue)}
.chat .cuantas{margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:baseline;
  gap:0.1875rem; padding:0.25rem 0.625rem; border-radius:62.4375rem; background:var(--panel2);
  border:1px solid var(--linea2); font:600 .8rem var(--titular); color:var(--cian2)}
.chat .cuantas i{font:500 .64rem var(--mono); font-style:normal; color:var(--tenue)}

.globo{position:relative; background:var(--panel); border:1px solid var(--linea);
  border-radius:1rem; padding:0.875rem; box-shadow:var(--sombraCaja); animation:dice .26s ease-out}
@keyframes dice{from{opacity:0; transform:translateY(0.5rem)} to{opacity:1; transform:none}}

.entrada .globo{margin-top:0.9375rem; width:100%}
.entrada .globo::before{content:''; position:absolute; top:-0.375rem; left:50%; margin-left:-0.375rem;
  width:0.75rem; height:0.75rem; background:var(--panel); border-left:1px solid var(--linea);
  border-top:1px solid var(--linea); transform:rotate(45deg)}

.chat + .globo::before{content:''; position:absolute; top:-0.375rem; left:1.1875rem;
  width:0.75rem; height:0.75rem; background:var(--panel); border-left:1px solid var(--linea);
  border-top:1px solid var(--linea); transform:rotate(45deg)}
.globo h2{font:600 1.16rem/1.3 var(--titular); margin:0 0 0.1875rem}
.globo h2 span{color:var(--cian2)}
.lista{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.5625rem}
.lista li{position:relative; padding-left:1.1875rem; font-size:.95rem; line-height:1.45}
.lista li::before{content:''; position:absolute; left:0; top:.6em; width:0.4375rem; height:0.4375rem;
  border-radius:50%; background:var(--cian)}
.lista b{color:var(--cian2); font-weight:600}

.menu{display:flex; flex-direction:column; gap:0.5rem}
.menu--aparte{margin-top:0.8125rem; padding-top:0.75rem; border-top:1px solid var(--linea)}
.op{display:block; width:100%; text-align:left; cursor:pointer; color:var(--tinta);
  background:var(--panel2); border:1px solid var(--linea); border-radius:0.8125rem;
  padding:0.75rem 0.875rem; min-height:var(--toque);
  font:500 .97rem/1.35 var(--texto); transition:transform .1s, border-color .15s}
.op:active{transform:scale(.985); border-color:var(--cian)}
.op small{display:block; font:400 .8rem/1.35 var(--texto); color:var(--suave); margin-top:0.1875rem}
.op--ir{color:var(--cian2)}
.op--wa2{color:var(--waTexto); text-decoration:none;
  background:var(--waFondo); border-color:var(--waBorde)}

.op--wa2:not(:has(svg))::before{content:''; display:inline-block; width:0.5rem; height:0.5rem;
  border-radius:50%; background:var(--wa); margin-right:0.5rem; vertical-align:middle}
.op--wa2 svg{vertical-align:-0.1875rem; margin-right:0.4375rem}
a.op{display:block}

.secundarias{display:flex; flex-wrap:wrap; gap:0.5625rem; margin-top:0.875rem}
.secundarias > *{flex:1 1 auto; min-height:var(--toque); display:inline-flex;
  align-items:center; justify-content:center; text-align:center;
  border-radius:62.4375rem; cursor:pointer; font:500 .9rem var(--texto); padding:0.625rem 0.9375rem}
.llamada{background:none; border:1px dashed var(--linea2); color:var(--cian2)}
.atras{background:none; border:1px solid var(--linea2); color:var(--suave)}
.secundarias > *:active{border-color:var(--cian); border-style:solid}

.qa + .qa{margin-top:0.75rem; padding-top:0.75rem; border-top:1px solid var(--linea)}
.qa > b{display:block; font:600 .97rem var(--titular); color:var(--cian2); margin-bottom:0.1875rem}
.qa p{font-size:.9rem; line-height:1.55; color:var(--suave)}
.qa p b{color:var(--tinta); font-weight:600}
.qa a{color:var(--cian2); text-decoration:none; border-bottom:1px dotted var(--linea2)}

.tuyo{border-left:2px solid var(--cian); padding:2px 0 2px 0.6875rem; margin-bottom:0.8125rem;
  font-size:.85rem; color:var(--tenue)}
.tuyo b{display:block; color:var(--suave); font-weight:500; margin-bottom:2px}
.abre .op--abre{padding-right:2.375rem; position:relative}
.abre .op--abre::after{content:'▾'; position:absolute; right:0.875rem; top:50%;
  transform:translateY(-50%); color:var(--tenue); transition:transform .2s}
.abre.abierto .op--abre::after{transform:translateY(-50%) rotate(180deg); color:var(--cian2)}
.abre .dentro{display:none; padding:0.6875rem 0.1875rem 0.1875rem}
.abre.abierto .dentro{display:block; animation:dice .22s ease-out}
.eyebrow{display:block; font:500 .68rem var(--mono); letter-spacing:.11em;
  text-transform:uppercase; color:var(--tenue); margin-bottom:0.375rem}
.frase{font-size:.98rem; line-height:1.5}
.promesa{margin-top:0.5625rem; font-size:.88rem; line-height:1.55; color:var(--tenue)}

.wiz{background:var(--panel2); border:1px solid var(--linea); border-radius:0.8125rem;
  padding:0.8125rem 0.875rem 0.6875rem; touch-action:pan-y}
.wiz-cab{display:flex; align-items:baseline; gap:0.5625rem; margin-bottom:0.3125rem}
.wiz-cab i{font:600 .72rem var(--mono); font-style:normal; color:var(--cian2);
  border:1px solid var(--linea2); border-radius:0.375rem; padding:2px 0.375rem}
.wiz-cab b{font:600 .98rem var(--titular)}
.wiz p{font-size:.9rem; line-height:1.5; color:var(--suave); min-height:4.4em}
.wiz-pie{display:flex; align-items:center; gap:0.625rem; margin-top:0.625rem; padding-top:0.625rem;
  border-top:1px solid var(--linea)}
.wiz-ir{width:var(--toque); height:var(--toque); display:grid; place-items:center;
  background:none; border:1px solid var(--linea2); border-radius:0.5625rem; cursor:pointer;
  color:var(--suave); font-size:1rem}
.wiz-ir[disabled]{opacity:.3}
.wiz-bolas{flex:1; display:flex; justify-content:center; gap:0.3125rem}
.wiz-bolas i{width:0.3125rem; height:0.3125rem; border-radius:50%; background:var(--linea2)}
.wiz-bolas i.hoy{background:var(--cian); transform:scale(1.45)}

.pie{flex:0 0 auto; border-top:1px solid var(--linea); background:var(--panel);
  padding:0 0.8125rem calc(env(safe-area-inset-bottom) + 0px); z-index:6}
.pie-fila{display:flex; align-items:center; gap:0.6875rem; min-height:3.75rem}
.pie-wa{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:0.5625rem; min-height:2.875rem;
  border-radius:0.75rem; text-decoration:none; background:var(--wa); color:var(--waTinta); font:600 .95rem var(--texto)}
.pie-wa svg{width:1.25rem; height:1.25rem; flex:0 0 1.25rem}
.pie-mas{width:var(--toque); height:2.875rem; display:grid; place-items:center; background:none;
  border:1px solid var(--linea2); border-radius:0.75rem; cursor:pointer; color:var(--suave); font-size:.95rem}
.pie-mas[aria-expanded=true]{border-color:var(--cian); color:var(--cian2)}

.pie-cajon{display:none; padding:0.75rem 0 0.875rem; border-top:1px solid var(--linea); max-height:68dvh; overflow-y:auto}
.pie-cajon.abierto{display:block; animation:sube .24s ease-out}
@keyframes sube{from{opacity:0; transform:translateY(0.875rem)} to{opacity:1; transform:none}}
.velo{position:absolute; inset:0; z-index:5; background:rgba(4,8,12,.55);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .24s}
.velo.visible{opacity:1; pointer-events:auto}
html[data-tema=claro] .velo{background:rgba(20,40,60,.35)}

.pie-contacto{display:grid; gap:0.5rem}
.pie-dato{display:flex; align-items:center; gap:0.75rem; min-height:3.5rem; padding:0.5625rem 0.75rem; border:1px solid var(--linea);
  border-radius:0.75rem; background:var(--panel2); text-decoration:none; color:inherit}
.pie-dato b{display:block; color:var(--tinta); font:600 .9rem/1.25 var(--texto)}
.pie-dato small{display:block; color:var(--suave); font-size:.8rem; line-height:1.3}
.pie-ico{flex:0 0 2.375rem; height:2.375rem; border-radius:0.6875rem; display:grid; place-items:center;
  background:var(--halo2); color:var(--cian2)}
.pie-ico svg{width:1.1875rem; height:1.1875rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.punto{display:inline-block; width:0.5rem; height:0.5rem; border-radius:50%; margin-right:0.375rem; vertical-align:1px; background:var(--tenue)}
.punto--on{background:var(--wa); box-shadow:0 0 0 0.1875rem var(--waFondo)}
.pie-tit{font:600 .84rem var(--texto); color:var(--tinta); margin:1rem 0 2px}

.pie-cuentan a{display:flex; align-items:center; justify-content:space-between; gap:0.625rem; color:var(--suave);
  text-decoration:none; font-size:.84rem; line-height:1.4; padding:0.8125rem 0; border-bottom:1px solid var(--linea)}
.pie-cuentan a:last-child{border-bottom:0}
.pie-cuentan a::after{content:'›'; flex:0 0 auto; color:var(--tenue); font-size:1.15rem; line-height:1}
.pie-cuentan a:active{color:var(--cian2)}

.producto{display:block; padding:0.75rem 0.8125rem; border:1px solid var(--linea); border-radius:0.75rem;
  text-decoration:none; color:var(--suave); font-size:.82rem; line-height:1.45}
.producto + .producto{margin-top:0.5rem}
.producto .pr-dolor{display:block; color:var(--tinta); font-weight:600}
.producto b{color:var(--tinta); font-weight:600}
.producto .pr-accion{display:block; margin-top:0.375rem; color:var(--cian2); font-weight:600}
.producto:active{border-color:var(--cian)}
.legal{display:flex; flex-wrap:wrap; gap:0.3125rem 0.9375rem; margin-top:1rem; padding-top:0.6875rem;
  border-top:1px solid var(--linea); font-size:.78rem; color:var(--tenue)}
.legal a{color:var(--tenue); text-decoration:none; padding:0.3125rem 0}
.pie-acciones{display:flex; align-items:center; gap:0.625rem; flex-wrap:wrap; margin-top:0.625rem}
.redes{display:flex; gap:0.5rem}
.red{display:grid; place-items:center; width:var(--toque); height:var(--toque); border-radius:0.6875rem;
  border:1px solid var(--linea); color:var(--tenue)}
.libro{display:inline-flex; align-items:center; gap:0.4375rem; border:1px solid var(--linea2); border-radius:0.625rem;
  padding:0.5625rem 0.8125rem; text-decoration:none; color:var(--suave); font-size:.82rem; min-height:var(--toque)}
.libro span{width:0.875rem; height:1.125rem; border:1.5px solid var(--cian2); border-radius:2px;
  display:inline-block; position:relative; flex:0 0 auto}
.libro span::after{content:''; position:absolute; left:0.1875rem; right:0.1875rem; top:0.25rem; height:1.5px;
  background:var(--cian2); box-shadow:0 0.25rem 0 var(--cian2), 0 0.5rem 0 var(--cian2)}

a.op,a.op:hover,a.op:visited{text-decoration:none!important}

html.vt .vista > *,html.ht .vista > *{max-width:42.5rem; margin-left:auto; margin-right:auto}

.entrada{flex-direction:row; flex-wrap:wrap; align-items:center; text-align:left; gap:0 0.75rem}
.entrada .fig{height:11rem; width:7.375rem; flex:0 0 auto; margin:0}
.entrada h1{flex:1 1 0; min-width:0; max-width:none; margin:0; font-size:1.55rem; line-height:1.16}
.entrada .globo{flex:1 1 100%; margin-top:1rem; text-align:left}
.entrada .globo::before{left:3.625rem; margin-left:0}
.op{position:relative; padding-right:2.625rem}
.op::after{content:'›'; position:absolute; right:1rem; top:50%; transform:translateY(-52%); font-size:1.5rem; line-height:1; color:var(--tenue)}
.op--wa2::after{color:var(--waTexto)}
.tema{width:2.5rem; height:2.5rem; border-radius:50%}

:root{--cj-tile:#14293B; --cj-borde:rgba(125,212,240,.32); --cj-globo:#E9F6FB; --cj-globo-tx:#0A1822; --cj-acento:#006E90;
  --cj-hero:linear-gradient(160deg,#0F3550,#0A1B29)}
html[data-tema=claro]{--cj-tile:#FFFFFF; --cj-borde:rgba(0,100,127,.28); --cj-globo:#FFFFFF; --cj-globo-tx:#0D1620;
  --cj-hero:linear-gradient(160deg,#D9ECF5,#F4F9FC)}
.hero{display:flex; align-items:flex-end; gap:0.25rem; padding:0.75rem 0.75rem 0 0.375rem; border:1px solid var(--cj-borde); border-radius:1.125rem;
  background:var(--cj-hero); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1rem 2rem -1.125rem rgba(0,0,0,.7)}
.hero .fig,.dialogo .fig{object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 0.75rem 1.125rem rgba(0,0,0,.45))}
.hero .fig{height:9.75rem; width:6.5rem}
.burbuja{position:relative; flex:1; min-width:0; margin-bottom:0.875rem; padding:0.75rem 0.875rem; border-radius:1rem;
  background:var(--cj-globo); color:var(--cj-globo-tx); font-size:.9rem; line-height:1.4; box-shadow:0 0.375rem 1rem -0.5rem rgba(0,0,0,.5)}
.burbuja::before{content:''; position:absolute; left:-0.3125rem; bottom:1.25rem; width:0.75rem; height:0.75rem; background:var(--cj-globo); transform:rotate(45deg); border-radius:2px}
.hero h1,.dialogo h2{font:700 1.1rem/1.2 var(--titular); letter-spacing:-.01em; margin:0 0 0.25rem; color:var(--cj-globo-tx); max-width:none; text-shadow:none}
.hero h1 span,.dialogo h2 span{color:var(--cj-acento); text-shadow:none}
.burbuja .sub{margin:0; font-size:.84rem; color:#33506A}
.burbuja .sub b{color:var(--cj-acento); text-shadow:none}
.principal{display:flex; align-items:center; gap:0.875rem; width:100%; min-height:4.125rem; margin-top:0.75rem; padding:0.75rem 1rem; text-align:left; cursor:pointer;
  border-radius:1rem; color:#04202B; background:linear-gradient(180deg,#2BCFF3,#0AA3D0); border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 0.875rem 1.75rem -0.75rem rgba(0,180,224,.75)}
.principal .ic svg{width:1.625rem; height:1.625rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.principal b{display:block; font:700 1rem/1.2 var(--texto)}
.principal small{display:block; font-size:.8rem; opacity:.85; margin-top:2px}
.mosaico{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.625rem; margin-top:0.625rem}
.loseta{display:flex; flex-direction:column; justify-content:space-between; gap:0.5rem; min-height:6rem; padding:0.75rem; border-radius:0.875rem; text-decoration:none;
  color:var(--tinta); background:var(--cj-tile); border:1px solid var(--cj-borde); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.loseta .ic svg{width:1.5rem; height:1.5rem; fill:none; stroke:var(--cian2); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.loseta b{font:700 .8rem/1.25 var(--texto)}
.loseta--wa{border-color:rgba(37,211,102,.5)} .loseta--wa .ic svg{stroke:#3DE08A}
.carrusel{margin-top:0.875rem}
.carrusel h2{font:700 .95rem var(--titular); margin:0 0 0.5rem; color:var(--tinta)}
.pistas{display:flex; gap:0.625rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.pistas::-webkit-scrollbar{display:none}
.pista{flex:0 0 84%; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; gap:0.5rem; min-height:5.625rem; padding:0.75rem 0.875rem;
  border-radius:0.875rem; text-decoration:none; color:var(--tinta); background:var(--cj-tile); border:1px solid var(--cj-borde); font:600 .9rem/1.3 var(--texto)}
.pista i{font-style:normal; color:var(--cian2); font-size:.8rem}
.cuenta{margin:0.5rem 0 0; text-align:center; font:600 .74rem var(--texto); color:var(--cian2)}

.paso-info{display:flex; justify-content:space-between; margin-bottom:0.375rem; font-size:.82rem; color:var(--suave)}
.paso-info b{color:var(--tinta)}
.progreso{height:0.375rem; margin-bottom:0.75rem; border-radius:0.1875rem; background:rgba(125,212,240,.2); overflow:hidden}
.progreso i{display:block; height:100%; border-radius:0.1875rem; background:linear-gradient(90deg,#2BCFF3,#0AA3D0)}
.dialogo{display:flex; align-items:flex-end; gap:0.375rem; margin-bottom:0.75rem}
.dialogo .fig{height:6.75rem; width:4.5rem}
.dialogo .burbuja{margin-bottom:0.375rem}
.vista .menu .op{background:var(--cj-tile); border:1px solid var(--cj-borde); border-radius:0.875rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:none; backdrop-filter:none; padding:0.75rem 2.5rem 0.75rem 0.875rem; color:var(--tinta)}
.vista .menu .op small{color:var(--suave)}
.vista .secundarias{display:flex; flex-direction:column; gap:0.5rem; margin-top:0.625rem}
.vista .secundarias .atras,.vista .secundarias .llamada{min-height:3rem; width:100%; border-radius:0.875rem; font-weight:700; background:transparent;
  border:1px solid var(--cj-borde); color:var(--tinta)}