/* Letra: la Mona Sans de Vozavía, servida desde casa (la CSP del sitio no deja cargar Google Fonts) */
@font-face{font-family:"Mona";src:url("/mona-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mona";src:url("/mona-semibold.woff2") format("woff2");font-weight:600;font-display:swap}

/* Versión azul para Vozavía (10-oct-2026). Tokens de la app de Vozavía: fondo #060A16, acento #2563EB */
:root{--vz-fondo:#060A16;--vz-azul:#2563EB;--tinta:#EAF0FF;--tenue:#A9BCE0}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--vz-fondo);overflow:hidden;font-family:"Mona",system-ui,sans-serif}

/* Fondo: video horizontal en pantallas anchas y versión vertical (con las mismas
   burbujas reacomodadas) en celular; siempre se ven todas las burbujas. */
.escena{position:fixed;inset:0}
.escena{background:radial-gradient(ellipse at 50% 45%,#13306A,#050A1A 75%)}
/* Fondo dibujado desde cero (fondo-azul.js, WebGL): sin video */
.escena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Barra de cristal. La forma NO es una caja con esquinas redondas: es un contorno de
   muchos puntos (polilínea suavizada) que se deforma como líquido donde la tocas. */
.barra{position:fixed;left:50%;top:50%;width:min(51.2vw,91vh,calc(100vw - 32px));height:clamp(46px,10.2vw*.5625,10.5vh);
  translate:-50% -50%;cursor:text;
  display:flex;align-items:center;gap:2.2%;padding:0 4% 0 3.4%;
  transition:width 1.1s cubic-bezier(.22,1,.36,1),height 1.1s cubic-bezier(.22,1,.36,1)}
.barra>.h,.barra>.campo{position:relative;z-index:3}
.capa{position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none;overflow:visible}
.sombra{z-index:0}
.vidrio{z-index:1;
  background:transparent;
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.contorno{z-index:2}
/* El material ES el cristal de la imagen base 4K (la barra del video): puntas y centro
   se estiran por separado para que nunca se deformen las curvas */
.tono{position:absolute;left:40px;top:40px;right:40px;bottom:40px;border-radius:999px;mix-blend-mode:multiply;pointer-events:none}
/* Tres piezas encimadas 2 px (centro debajo, puntas arriba) en vez de una imagen partida en tres: así no se cuela una raya
   en cada unión cuando la burbuja crece con el mouse encima. --tapa = ancho de cada punta (medio alto), lo pone buscador.js */
.material{position:absolute;left:40px;top:40px;right:40px;bottom:40px;--tapa:30px}
.material i{position:absolute;top:0;bottom:0;background:url(material-barra-azul.png) no-repeat}
.material .m-centro{left:calc(var(--tapa) - 2px);right:calc(var(--tapa) - 2px);background-size:119.41% 100%;background-position:50% 0}
.material .m-izq{left:0;width:var(--tapa);background-size:auto 100%;background-position:0 0}
.material .m-der{right:0;width:var(--tapa);background-size:auto 100%;background-position:100% 0}
#pFilo,#pGrueso,#pCaustica,#pAzul,#pCalido,#pEspecular{display:none}

/* La H: silueta del logo oficial con tono de mercurio */
.h{flex:none;height:56%;aspect-ratio:1580/1000;position:relative;
  -webkit-mask:url(vozavia-simbolo.svg) center/contain no-repeat;mask:url(vozavia-simbolo.svg) center/contain no-repeat;
  background:linear-gradient(150deg,#f3f7ff 0%,#a9c2f0 22%,#24447f 44%,#d3e2ff 55%,#3d62ad 72%,#e8f0ff 88%,#86a6dc 100%);
  opacity:.9;filter:drop-shadow(0 1px 0 rgba(190,212,255,.55))}
.h::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 45%,transparent 60%);
  background-size:300% 100%;animation:reflejo 7s ease-in-out infinite}
@keyframes reflejo{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}

/* Diálogo: la frase de qué quieres conectar */
.campo{flex:1;min-width:0;position:relative;height:60%;display:flex;align-items:center}
.campo input{width:100%;border:0;outline:0;background:transparent;color:var(--tinta);
  font:500 clamp(14px,1.25vw,26px)/1 "Mona",system-ui,sans-serif;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(2,8,28,.55)}
.campo input::placeholder{color:#C3D3F2}
.linea{position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:linear-gradient(90deg,rgba(150,185,255,0),rgba(150,185,255,.5),rgba(150,185,255,0));
  transform:scaleX(0);transform-origin:left;transition:transform .6s ease}

/* Al dar clic: crece despacio como líquido (ver script) */
.barra.abierta{width:min(53.5vw,95vh,calc(100vw - 20px));height:clamp(50px,11vw*.5625,11.5vh)}
.barra.abierta .linea{transform:scaleX(1)}
/* Ondas de líquido: nacen donde tocas o escribes y se disuelven */
.ondas{position:absolute;inset:40px;border-radius:999px;pointer-events:none}
.onda{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0) 35%,rgba(205,222,255,.5) 52%,rgba(90,140,240,.25) 62%,rgba(255,255,255,0) 72%)}

/* Celular: letra cómoda y relleno lateral */
@media (max-width:600px){.barra{padding:0 20px}.campo input{font-size:16px}}
@media (max-aspect-ratio:1/1){.barra{width:min(calc(100vw - 32px),640px);height:50px}.barra.abierta{width:min(calc(100vw - 20px),660px);height:54px}}

/* ===== Botón H: independiente del campo. Al acercar el mouse se levanta; al dar clic abre menús ===== */
.botonH{flex:none;position:relative;z-index:4;height:100%;aspect-ratio:1/1;margin-left:-6%;margin-right:-4%;
  display:grid;place-items:center;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;
  -webkit-tap-highlight-color:transparent;outline:none}
.botonH .h{height:34%;transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s,opacity .45s}
.botonH::before{content:"";position:absolute;inset:16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(150,190,255,.45),rgba(150,190,255,0) 70%);opacity:0;transform:scale(.7);
  transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1)}
.botonH:hover .h,.botonH:focus-visible .h,.botonH[aria-expanded="true"] .h{
  transform:translate(var(--mx,0px),calc(-14% + var(--my,0px))) scale(1.08);opacity:.95;
  filter:drop-shadow(0 1px 0 rgba(190,212,255,.6)) drop-shadow(0 6px 6px rgba(0,6,24,.5))}
.botonH:hover::before,.botonH:focus-visible::before,.botonH[aria-expanded="true"]::before{opacity:1;transform:scale(1)}
.botonH:active .h{transform:translate(var(--mx,0px),calc(-6% + var(--my,0px))) scale(1.02);transition-duration:.12s}

/* Hostess y Vértice junto a Vozavía (Olimón, 23-oct-2026; Vértice se sumó el mismo día): al abrir el menú sale el sello de Hostess a un lado de la H; tocarlo lleva a hostess.mx
   con un puente que termina igual que su pantalla de carga (blanco y su sello al centro), así no se nota el cambio de página. */
.botonSocio{flex:none;position:relative;z-index:4;height:100%;max-width:0;aspect-ratio:1/1;display:grid;place-items:center;
  margin-right:0;overflow:visible;pointer-events:none;-webkit-tap-highlight-color:transparent;outline:none;
  transition:max-width .55s cubic-bezier(.22,1,.36,1),margin-right .55s cubic-bezier(.22,1,.36,1)}
.botonSocio .disco{display:grid;place-items:center;width:58%;aspect-ratio:1/1;border-radius:50%;background:#fff;
  box-shadow:inset 0 -2px 4px rgba(32,39,56,.12),0 0 0 1px rgba(255,255,255,.55),0 8px 18px -8px rgba(0,6,24,.7);
  opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .3s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.botonSocio img{width:68%;height:68%;object-fit:contain;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.barra.menuAbierto .botonSocio{max-width:200px;margin-right:-2%;pointer-events:auto}
.barra.menuAbierto .botonSocio+.botonSocio{margin-left:-3%}
.barra.menuAbierto .botonSocio .disco{opacity:1;transform:none;transition-delay:.08s}
.barra.menuAbierto .botonSocio+.botonSocio .disco{transition-delay:.16s}
/* Vértice: su ícono es claro sobre azul marino, el mismo fondo de verticemexico.com */
.botonSocio.oscuro .disco{background:#0F172A;box-shadow:inset 0 -2px 4px rgba(0,0,0,.35),0 0 0 1px rgba(196,182,151,.55),0 8px 18px -8px rgba(0,6,24,.7)}
.botonSocio.oscuro img{width:62%;height:62%}
@media (hover:hover){.barra.menuAbierto .botonSocio:hover .disco{transform:translateY(-8%) scale(1.08)}.botonSocio:hover img{transform:scale(1.06)}}
.botonSocio:focus-visible .disco{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(37,99,235,.8)}
.puente{position:fixed;inset:0;z-index:2147483647;pointer-events:all;overflow:hidden}
.puente .marea{position:absolute;border-radius:50%;background:#fff;will-change:transform}
.puente img{position:absolute;width:84px;height:84px;object-fit:contain;will-change:transform}
@media (prefers-reduced-motion:reduce){.botonSocio,.botonSocio .disco,.botonSocio img{transition:none}}

/* Menús de cristal arriba y abajo de la barra */
.menu{position:absolute;left:0;right:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;pointer-events:none;z-index:5}
.menu.arriba{bottom:calc(100% + 18px)}
.menu.abajo{top:calc(100% + 18px)}
.menu a{pointer-events:auto;text-decoration:none;color:#EAF0FF;font:500 clamp(13px,1.02vw,17px)/1 "Mona",system-ui,sans-serif;
  padding:.85em 1.4em;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(70,112,205,.42),rgba(16,36,86,.42));
  backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(170,200,255,.5);text-shadow:0 1px 2px rgba(2,8,28,.5);
  box-shadow:inset 0 1px 0 rgba(220,232,255,.7),inset 0 -1px 2px rgba(4,12,40,.35),0 0 0 1px rgba(37,99,235,.28),0 10px 22px -12px rgba(0,4,16,.65);
  opacity:0;filter:blur(6px);transform:translateY(var(--desde,10px)) scale(.92);
  transition:opacity .35s ease,filter .35s ease,transform .5s cubic-bezier(.22,1,.36,1),background .25s}
.menu.arriba a{--desde:14px}.menu.abajo a{--desde:-14px}
.barra.menuAbierto .menu a{opacity:1;filter:blur(0);transform:none}
.barra.menuAbierto .menu a:hover{background:linear-gradient(180deg,rgba(95,140,235,.6),rgba(37,99,235,.42));transform:translateY(-2px)}
@media (max-width:600px){.menu{gap:8px}.menu a{font-size:14px;padding:.75em 1.1em}}

/* La burbuja se levanta cuando el mouse está sobre ella (pero no sobre la H: ahí se levanta solo la H) */
@media (hover:hover){
  .barra:hover:not(:has(.botonH:hover,.mic:hover)){transform:translateY(-6px) scale(1.012)}
}
/* Con el menú abierto la burbuja queda BLOQUEADA arriba: no baja al salir de la H ni se mueve
   al pasar por las opciones; se libera hasta el siguiente clic */
.barra.menuAbierto,.barra.menuAbierto:hover{transform:translateY(-6px) scale(1.012)}
@media (prefers-reduced-motion:reduce){.h::after{animation:none}}


/* ===== Micrófono para dictar (ronda 24): SOLO el símbolo, tratado igual que el logo de Vozavía de la izquierda
   (máscara del símbolo con el degradado de mercurio azulado, mismo reflejo, misma opacidad y mismo filo). Sin círculo. ===== */
.barra>.mic{position:relative;z-index:4}
.mic{flex:none;height:clamp(34px,64%,58px);aspect-ratio:1/1;margin-left:1%;margin-right:-1.2%;padding:0;display:grid;place-items:center;
  border:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.mic .h{height:58%;aspect-ratio:1/1;-webkit-mask:url(microfono-simbolo.svg) center/contain no-repeat;mask:url(microfono-simbolo.svg) center/contain no-repeat;
  transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s,opacity .45s}
.mic:hover .h,.mic:focus-visible .h{
  transform:translate(var(--mx,0px),calc(-14% + var(--my,0px))) scale(1.08);opacity:.95;
  filter:drop-shadow(0 1px 0 rgba(190,212,255,.6)) drop-shadow(0 6px 6px rgba(0,6,24,.5))}
.mic:active .h{transform:translate(var(--mx,0px),calc(-6% + var(--my,0px))) scale(1.02);transition-duration:.12s}
/* Escuchando: el propio símbolo late suave (escala y brillo) y dos rayitas de voz salen a cada lado; sin círculo */
.mic[aria-pressed="true"] .h{animation:late 1.5s ease-in-out infinite}
.mic::before,.mic::after{content:"";position:absolute;top:50%;width:2px;height:30%;margin-top:-15%;border-radius:2px;pointer-events:none;
  background:linear-gradient(180deg,rgba(235,243,255,0),rgba(190,214,255,.95),rgba(235,243,255,0));opacity:0;transform:scaleY(.3)}
.mic::before{left:2%}.mic::after{right:2%}
.mic[aria-pressed="true"]::before{animation:voz 1.1s ease-in-out infinite}
.mic[aria-pressed="true"]::after{animation:voz 1.1s ease-in-out .35s infinite}
@keyframes late{0%,100%{scale:1;opacity:.9}50%{scale:1.1;opacity:1}}
@keyframes voz{0%,100%{opacity:.25;transform:scaleY(.3)}50%{opacity:.95;transform:scaleY(1)}}

/* Etiqueta «Escuchando…» (debajo de la barra) y aviso amable (dentro de la barra, sobre el campo) */
.estado{position:absolute;left:50%;top:calc(100% + 16px);translate:-50% 0;z-index:5;pointer-events:none;white-space:nowrap;
  padding:.6em 1.2em;border-radius:999px;color:#EAF0FF;font:500 clamp(13px,1vw,16px)/1 "Mona",system-ui,sans-serif;
  background:linear-gradient(180deg,rgba(70,112,205,.42),rgba(16,36,86,.42));backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
  border:1px solid rgba(170,200,255,.5);text-shadow:0 1px 2px rgba(2,8,28,.5);
  opacity:0;filter:blur(6px);transform:translateY(-6px);transition:opacity .3s,filter .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.estado.visible{opacity:1;filter:none;transform:none}
.aviso{position:absolute;inset:0 0 0 0;display:flex;align-items:center;color:#DCE7FF;pointer-events:none;
  font:500 clamp(12px,1vw,17px)/1.2 "Mona",system-ui,sans-serif;text-shadow:0 1px 2px rgba(2,8,28,.55);opacity:0;transition:opacity .3s}
.campo.conAviso .aviso{opacity:1}
.campo.conAviso input{color:transparent;text-shadow:none}
.campo.conAviso input::placeholder{color:transparent}
@media (max-width:600px){.mic{margin-right:-2%}.aviso{font-size:12px}.estado{font-size:13px}}
@media (prefers-reduced-motion:reduce){.mic[aria-pressed="true"] .h,.mic[aria-pressed="true"]::before,.mic[aria-pressed="true"]::after{animation:none}.mic[aria-pressed="true"]::before,.mic[aria-pressed="true"]::after{opacity:.7;transform:none}.mic .h{transition:none}}

/* ===== Botón de enviar (ronda 25): mismo trato que el micrófono; aparece cuando hay algo escrito ===== */
.barra>.enviar{position:relative;z-index:4}
.enviar{flex:none;height:clamp(34px,60%,52px);aspect-ratio:1/1;margin-left:.5%;margin-right:0;padding:0;display:grid;place-items:center;
  border:0;background:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;
  opacity:0;scale:.6;width:0;min-width:0;pointer-events:none;overflow:hidden;
  transition:opacity .45s ease,scale .6s cubic-bezier(.22,1,.36,1),width .6s cubic-bezier(.22,1,.36,1)}
.barra.conTexto .enviar{opacity:1;scale:1;width:auto;min-width:clamp(34px,60%,52px);pointer-events:auto}
.enviar .h{height:50%;aspect-ratio:1/1;-webkit-mask:url(enviar-simbolo.svg) center/contain no-repeat;mask:url(enviar-simbolo.svg) center/contain no-repeat;
  transition:transform .45s cubic-bezier(.22,1,.36,1),filter .45s,opacity .45s}
.enviar:hover .h,.enviar:focus-visible .h{transform:translate(calc(var(--mx,0px) + 8%),var(--my,0px)) scale(1.1);opacity:.95;
  filter:drop-shadow(0 1px 0 rgba(190,212,255,.6)) drop-shadow(0 6px 6px rgba(0,6,24,.5))}
.enviar:active .h{transform:translate(12%,0) scale(1.02);transition-duration:.12s}

/* ===== Respuesta (ronda 25): la barra sube y debajo aparece una tarjeta de cristal ===== */
.barra{transition:width 1.1s cubic-bezier(.22,1,.36,1),height 1.1s cubic-bezier(.22,1,.36,1),top 1.1s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
body.conRespuesta .barra{top:var(--yb,76px);z-index:6}
body.conRespuesta .menu.arriba{bottom:auto;top:calc(100% + 18px)}
body.conRespuesta .menu.abajo{top:calc(100% + 66px)}
body{--yb:clamp(58px,9.5vh,92px)}
.respuesta{position:fixed;left:50%;translate:-50% 0;z-index:4;top:var(--arriba,130px);bottom:0;width:min(780px,calc(100vw - 28px));
  padding:0 0 22px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;color:var(--tinta);
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 16px),transparent 100%)}
.respuesta::-webkit-scrollbar{display:none}
.respuesta[hidden]{display:none}
.tarjeta{position:relative;margin-top:14px;padding:22px 26px 24px;border-radius:28px;
  background:linear-gradient(180deg,rgba(22,50,114,.93),rgba(9,22,62,.96));
  backdrop-filter:blur(30px) saturate(1.4);-webkit-backdrop-filter:blur(30px) saturate(1.4);
  border:1px solid rgba(178,206,255,.30);
  box-shadow:0 26px 64px rgba(0,6,24,.55),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(48,92,190,.45),inset 0 0 38px rgba(70,120,230,.10)}
.tarjeta.entra{animation:entra .8s cubic-bezier(.22,1,.36,1) both}
@keyframes entra{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.tarjeta .pregunta-eco{font:600 12.5px/1.3 "Mona",system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#9DB6E6;padding-right:34px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarjeta .cuerpo{margin-top:12px;font:400 clamp(16px,1.14vw,17.5px)/1.62 "Mona",system-ui,sans-serif;color:#D9E4FB;text-shadow:0 1px 2px rgba(2,8,28,.4)}
.tarjeta .cuerpo>*+*{margin-top:.75em}
.tarjeta .cuerpo .entrada{font:600 clamp(18.5px,1.5vw,22.5px)/1.38 "Mona",system-ui,sans-serif;color:#fff;letter-spacing:-.005em;text-wrap:pretty}
.tarjeta .cuerpo .entrada+*{margin-top:.95em}
.tarjeta .cuerpo h3{margin-top:1.5em;font:600 12.5px/1.3 "Mona",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9DB6E6}
.tarjeta .cuerpo h3+*{margin-top:.5em}
.tarjeta .cuerpo ul{padding-left:0;list-style:none}
.tarjeta .cuerpo li{position:relative;margin-top:.42em;padding-left:1.25em}
.tarjeta .cuerpo li::before{content:"";position:absolute;left:.18em;top:.66em;width:6px;height:6px;border-radius:50%;background:#7FA6F0;box-shadow:0 0 8px rgba(110,160,255,.7)}
.tarjeta .cuerpo strong{font-weight:600;color:#fff}
.tarjeta .cerrar{position:absolute;right:14px;top:12px;width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;color:#C9D8F6;
  background:rgba(120,160,235,.14);display:grid;place-items:center;font:500 20px/1 "Mona",system-ui,sans-serif;transition:background .3s,transform .3s}
.tarjeta .cerrar:hover,.tarjeta .cerrar:focus-visible{background:rgba(140,180,255,.3);transform:rotate(90deg);outline:none}
.tarjeta .sello{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:6px 12px;border-radius:99px;font:600 12.5px/1 "Mona",system-ui,sans-serif;
  color:#CFE0FF;background:rgba(80,130,235,.2);border:1px solid rgba(160,196,255,.28)}
.tarjeta .error{color:#FFD9D2}

/* Pensando: tres gotas líquidas que se funden (filtro #goo) */
.pensando{display:flex;align-items:center;gap:14px;margin-top:12px;color:#BFD1F4;font:500 16px/1 "Mona",system-ui,sans-serif}
.gotas{position:relative;width:62px;height:26px;filter:url(#goo)}
.gotas i{position:absolute;top:50%;left:6px;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:#9DBDFF;animation:gota-rueda 1.5s cubic-bezier(.45,0,.3,1) infinite}
.gotas i:nth-child(2){animation-delay:.18s;background:#7DA6FA}.gotas i:nth-child(3){animation-delay:.36s;background:#5C8BF0}
@keyframes gota-rueda{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(36px) scale(1.25)}}
.goo{position:absolute;width:0;height:0;pointer-events:none}

/* Bloqueo estilo Scribd: unas líneas se desvanecen y debajo va el llamado. El texto de las líneas es relleno neutro, NUNCA la respuesta. */
.bloqueo{margin-top:6px}
.velo{position:relative;max-height:230px;overflow:hidden;margin-bottom:-26px;user-select:none;-webkit-user-select:none;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)}
.velo p,.velo li{font:400 clamp(16px,1.18vw,18.5px)/1.62 "Mona",system-ui,sans-serif;color:#EEF3FF;filter:blur(6px);opacity:.85}
.velo p+p,.velo p+ul,.velo ul+p{margin-top:.75em}.velo ul{padding-left:1.15em}.velo li{margin-top:.28em}
.llamado{position:relative;margin-top:2px;padding:20px 20px 18px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,rgba(60,108,214,.34),rgba(20,46,112,.38));border:1px solid rgba(170,202,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 34px rgba(0,8,30,.35)}
.llamado .candado{display:block;width:30px;height:30px;margin:0 auto 10px;-webkit-mask:url(candado-simbolo.svg) center/contain no-repeat;mask:url(candado-simbolo.svg) center/contain no-repeat;
  background:linear-gradient(180deg,#F2F7FF,#8FB2F2)}
.llamado h2{font:600 clamp(18px,1.4vw,21px)/1.25 "Mona",system-ui,sans-serif;color:#F4F8FF}
.llamado p{margin:6px auto 0;max-width:46ch;font:400 15px/1.5 "Mona",system-ui,sans-serif;color:#C4D5F6}
.llamado .acciones{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px}
.btn-crear{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:99px;text-decoration:none;cursor:pointer;
  font:600 16px/1 "Mona",system-ui,sans-serif;color:#fff;border:1px solid rgba(190,214,255,.55);
  background:linear-gradient(180deg,#4F86F7,#2563EB 60%,#1B4DC4);box-shadow:0 10px 26px rgba(37,99,235,.5),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.btn-crear:hover,.btn-crear:focus-visible{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,99,235,.62),inset 0 1px 0 rgba(255,255,255,.6);outline:none}
.enlaces-bloqueo{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.enlaces-bloqueo a{color:#CFE0FF;font:500 14.5px/1 "Mona",system-ui,sans-serif;text-decoration:none;padding:12px 4px;border-bottom:1px solid rgba(180,206,255,.4);cursor:pointer}
.enlaces-bloqueo a:hover,.enlaces-bloqueo a:focus-visible{color:#fff;border-bottom-color:#fff;outline:none}

@media (max-width:600px){
  .respuesta{width:calc(100vw - 20px)}
  .tarjeta{padding:18px 18px 20px;border-radius:24px}
  .tarjeta .cerrar{right:10px;top:9px}
  .tarjeta .cuerpo{font-size:16px}
  .llamado{padding:18px 14px 14px}
  .btn-crear{width:100%}
}
@media (prefers-reduced-motion:reduce){.tarjeta.entra{animation:none}.gotas i{animation:none}.barra{transition:none}}

.sonda{position:fixed;visibility:hidden;top:var(--yb);height:0;pointer-events:none}

/* ===== Sugerencias mientras escribes (ronda 26): lista corta de cristal bajo la barra ===== */
.sugerencias{position:fixed;z-index:7;left:50%;translate:-50% 0;top:var(--sug-top,200px);width:var(--sug-ancho,560px);max-width:calc(100vw - 24px);
  list-style:none;margin:0;padding:8px;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(26,56,120,.66),rgba(8,20,54,.78));
  backdrop-filter:blur(22px) saturate(1.45);-webkit-backdrop-filter:blur(22px) saturate(1.45);
  border:1px solid rgba(178,206,255,.30);
  box-shadow:0 22px 54px rgba(0,6,24,.5),inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 30px rgba(70,120,230,.10);
  transform-origin:50% 0;animation:sug-abre .5s cubic-bezier(.22,1,.36,1) both}
.sugerencias[hidden]{display:none}
@keyframes sug-abre{from{opacity:0;transform:translateY(-8px) scaleY(.86);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.sugerencias li{display:flex;align-items:center;gap:10px;min-height:44px;padding:9px 14px;border-radius:16px;cursor:pointer;color:#C9D8F6;
  font:400 clamp(15px,1.1vw,17px)/1.3 "Mona",system-ui,sans-serif;animation:sug-item .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*45ms);
  transition:background .25s,color .25s}
@keyframes sug-item{from{opacity:0;transform:translateY(-5px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.sugerencias li::before{content:"";flex:none;width:15px;height:15px;opacity:.7;background:#9DBDFF;
  -webkit-mask:url(enviar-simbolo.svg) center/contain no-repeat;mask:url(enviar-simbolo.svg) center/contain no-repeat}
.sugerencias li b{font-weight:600;color:#fff;background:linear-gradient(180deg,transparent 62%,rgba(110,160,255,.38) 62%)}
.sugerencias li[aria-selected="true"],.sugerencias li:hover{background:linear-gradient(180deg,rgba(95,140,235,.5),rgba(37,99,235,.36));color:#fff}
.respuesta.atenuada{opacity:.3;filter:blur(2px);transition:opacity .4s,filter .4s}
.respuesta{transition:opacity .4s,filter .4s}
@media (prefers-reduced-motion:reduce){.sugerencias,.sugerencias li{animation:none}}

/* ===== Ronda del 13-oct-2026 (Olimón): respuestas completas para todos, conversación, paquetes sugeridos e ideas para empezar ===== */

/* La respuesta entra por partes: primero la tarjeta, luego cada bloque sube un poco detrás del anterior */
.tarjeta.entra>*:not(.cerrar){animation:sube .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*80ms + 140ms)}
@keyframes sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pal{display:inline-block;opacity:0;animation:pal .55s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--w,0)*42ms + 260ms)}
@keyframes pal{from{opacity:0;transform:translateY(5px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}

/* Paquete sugerido / planes: tarjetas chicas de cristal con el precio del catálogo */
.paquetes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:20px}
.paquete{display:flex;flex-direction:column;align-items:flex-start;padding:16px 18px 17px;border-radius:20px;
  background:linear-gradient(180deg,rgba(74,122,226,.24),rgba(16,38,98,.34));border:1px solid rgba(170,202,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -14px rgba(0,6,24,.6);
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .45s}
.paquete:first-child{background:linear-gradient(180deg,rgba(88,138,246,.36),rgba(22,50,124,.4));border-color:rgba(190,214,255,.44)}
@media (hover:hover){.paquete:hover{transform:translateY(-3px);border-color:rgba(200,222,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 34px -14px rgba(0,6,24,.7)}}
.paquete-etiqueta{padding:5px 10px;border-radius:99px;font:600 11px/1 "Mona",system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#D5E3FF;
  background:rgba(120,165,255,.2);border:1px solid rgba(170,202,255,.26)}
.paquete-titulo{margin-top:12px;font:600 15px/1.2 "Mona",system-ui,sans-serif;color:#C9D8F6}
.paquete-precio{margin-top:4px;font:600 clamp(22px,1.9vw,27px)/1.15 "Mona",system-ui,sans-serif;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.paquete-nota{margin-top:3px;font:400 13.5px/1.3 "Mona",system-ui,sans-serif;color:#A9BCE0}
.paquete ul{list-style:none;margin:12px 0 0;padding:11px 0 0;width:100%;border-top:1px solid rgba(160,196,255,.16)}
.paquete li{position:relative;padding-left:1.1em;font:400 14px/1.45 "Mona",system-ui,sans-serif;color:#D0DDF8}
.paquete li+li{margin-top:3px}
.paquete li::before{content:"";position:absolute;left:.1em;top:.6em;width:5px;height:5px;border-radius:50%;background:#7FA6F0}

/* Botones de la respuesta */
.acciones-resp{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn-suave{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:99px;text-decoration:none;cursor:pointer;
  font:600 15.5px/1 "Mona",system-ui,sans-serif;color:#EAF0FF;background:rgba(84,132,236,.16);border:1px solid rgba(170,202,255,.4);
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s}
.btn-suave:hover,.btn-suave:focus-visible{transform:translateY(-2px);background:rgba(104,150,246,.3);border-color:rgba(200,222,255,.7);outline:none}
.btn-crear:active,.btn-suave:active{transform:translateY(0) scale(.98);transition-duration:.1s}

/* Fichas: preguntas que se mandan con un toque (ideas para empezar y «Sigue preguntando») */
.ficha{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:99px;cursor:pointer;text-align:left;
  font:500 14.5px/1.25 "Mona",system-ui,sans-serif;color:#DCE7FF;background:rgba(30,60,132,.26);border:1px solid rgba(170,200,255,.26);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(220,232,255,.22);-webkit-tap-highlight-color:transparent;
  transition:transform .4s cubic-bezier(.22,1,.36,1),background .3s,border-color .3s,color .3s}
.ficha:hover,.ficha:focus-visible{transform:translateY(-2px);color:#fff;background:rgba(84,132,236,.42);border-color:rgba(200,222,255,.62);outline:none}
.ficha:active{transform:scale(.97);transition-duration:.1s}

.pie{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:22px;padding-top:16px;border-top:1px solid rgba(160,196,255,.16)}
.sigue{min-width:0}
.sigue-titulo,.antes-titulo{display:block;font:600 12px/1.3 "Mona",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8FA9DC}
.sigue-fila{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sigue .ficha{min-height:44px;padding:8px 14px;font-size:14px;background:rgba(60,104,200,.2)}
.copiar{flex:none;min-height:38px;padding:0 14px;border-radius:99px;cursor:pointer;font:500 13.5px/1 "Mona",system-ui,sans-serif;color:#A9BCE0;
  background:transparent;border:1px solid rgba(160,196,255,.22);transition:color .3s,border-color .3s,background .3s}
.copiar:hover,.copiar:focus-visible{color:#fff;border-color:rgba(200,222,255,.6);background:rgba(84,132,236,.18);outline:none}
.copiar.hecho{color:#BFF3D2;border-color:rgba(150,232,186,.5)}

/* Respuestas anteriores de la conversación, plegadas */
.antes{margin-top:22px;padding:0 6px}
.previa{margin-top:10px;border-radius:18px;background:rgba(11,26,70,.86);border:1px solid rgba(160,196,255,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s,border-color .3s}
.previa[open]{background:rgba(14,32,84,.94);border-color:rgba(170,202,255,.28)}
.previa summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 18px;cursor:pointer;list-style:none;
  font:500 15px/1.35 "Mona",system-ui,sans-serif;color:#C9D8F6;border-radius:18px;outline:none;transition:color .3s}
.previa summary::-webkit-details-marker{display:none}
.previa summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid #8FA9DC;border-bottom:2px solid #8FA9DC;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.previa[open] summary::after{transform:translateY(2px) rotate(225deg)}
.previa summary:hover,.previa summary:focus-visible{color:#fff}
.previa .cuerpo{padding:2px 18px 18px;font:400 15.5px/1.6 "Mona",system-ui,sans-serif;color:#D0DDF8}
.previa .cuerpo>*+*{margin-top:.7em}
.previa .cuerpo .entrada{font-weight:600;color:#EEF3FF}
.previa .cuerpo h3{margin-top:1.2em;font:600 12px/1.3 "Mona",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9DB6E6}
.previa .cuerpo ul{list-style:none;padding:0}
.previa .cuerpo li{position:relative;padding-left:1.2em;margin-top:.35em}
.previa .cuerpo li::before{content:"";position:absolute;left:.15em;top:.62em;width:5px;height:5px;border-radius:50%;background:#7FA6F0}
.previa .cuerpo strong{font-weight:600;color:#fff}

/* Pensando: el texto cambia y debajo van tres renglones de espera con un brillo que pasa */
.pensando-texto{transition:opacity .3s}
.hueso{display:grid;gap:11px;margin-top:18px}
.hueso i{display:block;height:12px;border-radius:99px;background:linear-gradient(90deg,rgba(120,160,240,.12) 20%,rgba(170,202,255,.3) 50%,rgba(120,160,240,.12) 80%);
  background-size:220% 100%;animation:brillo 1.5s linear infinite}
.hueso i:nth-child(1){width:92%}.hueso i:nth-child(2){width:78%;animation-delay:.12s}.hueso i:nth-child(3){width:56%;animation-delay:.24s}
@keyframes brillo{from{background-position:120% 0}to{background-position:-100% 0}}

/* Ideas para empezar, bajo la barra en reposo */
.ideas{position:fixed;z-index:3;left:50%;top:var(--ideas-top,58%);translate:-50% 0;width:min(700px,calc(100vw - 32px));
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s}
.ideas[hidden]{display:none}
.ideas.fuera{opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .4s ease,visibility 0s .3s}
.ideas .ficha{animation:idea .8s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes idea{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

:focus-visible{outline:2px solid rgba(190,214,255,.9);outline-offset:3px}
.campo input:focus-visible,.botonH:focus-visible,.mic:focus-visible,.enviar:focus-visible{outline:none}

@media (max-width:600px){
  .tarjeta .cuerpo .entrada{font-size:18.5px}
  .paquetes{grid-template-columns:1fr;gap:10px}
  .acciones-resp{flex-direction:column}
  .acciones-resp .btn-crear,.acciones-resp .btn-suave{width:100%}
  .pie{flex-direction:column;align-items:stretch}
  .copiar{align-self:flex-start}
  .ideas{gap:8px}
  .ideas .ficha{font-size:14px;padding:0 14px}
  .antes{padding:0}
}
@media (prefers-reduced-motion:reduce){
  .tarjeta.entra>*:not(.cerrar),.pal,.ideas .ficha,.hueso i{animation:none}
  .pal{opacity:1}
  .ideas,.ideas.fuera,.ficha,.paquete,.btn-suave,.btn-crear{transition:none}
}

.previa .paquetes{margin:0;padding:0 18px 18px}
.herramientas{flex:none;display:flex;gap:8px}
.escuchar.sonando{color:#fff;border-color:rgba(200,222,255,.7);background:rgba(84,132,236,.3)}
@media (max-width:600px){.herramientas{align-self:flex-start}}

/* Foco con teclado siempre a la vista (revisión del 13-oct): el contorno gana a los «outline:none» de cada botón */
.ficha:focus-visible,.btn-suave:focus-visible,.btn-crear:focus-visible,.copiar:focus-visible,.previa summary:focus-visible,.tarjeta .cerrar:focus-visible,.menu a:focus-visible,.enlaces-bloqueo a:focus-visible{outline:2px solid rgba(190,214,255,.95);outline-offset:3px}
/* Dedo: zonas de toque de 44 px */
@media (pointer:coarse){.copiar{min-height:44px}.tarjeta .cerrar{width:44px;height:44px;right:8px;top:6px}.tarjeta .pregunta-eco{padding-right:48px}}

/* Salida de la respuesta al cerrar: se desvanece mientras la barra vuelve a su lugar */
.respuesta.saliendo{opacity:0;filter:blur(6px);transform:translateY(10px);pointer-events:none;transition:opacity .35s ease,filter .35s ease,transform .35s ease}
@media (prefers-reduced-motion:reduce){.respuesta.saliendo{transition:none}}

/* Encabezado de la tarjeta: la pregunta y, si lo reconoció, el giro */
.cabeza{display:flex;align-items:center;gap:10px;min-width:0;padding-right:38px}
.cabeza .pregunta-eco{padding-right:0;min-width:0}
.giro-sello{flex:none;max-width:46%;padding:5px 10px;border-radius:99px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:600 11.5px/1 "Mona",system-ui,sans-serif;letter-spacing:.03em;color:#D5E3FF;background:rgba(110,158,255,.2);border:1px solid rgba(170,202,255,.3)}
@media (pointer:coarse){.cabeza{padding-right:48px}}

/* Segunda revisión (13-oct): celular, teclado y lector de pantalla */
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tarjeta:focus,.tarjeta:focus-visible{outline:none}
body.conMenu .respuesta{opacity:.22;filter:blur(3px);pointer-events:none}
/* En pantallas angostas la barra queda debajo del botón «Cerrar» de la portada (que ocupa hasta los 58 px) */
@media (max-width:600px){body{--yb:clamp(92px,13.5vh,108px)}}
/* En celular, al tocar el campo la barra sube: así las sugerencias caben arriba del teclado */
@media (pointer:coarse){body.tecleando .barra{top:var(--yb,92px)}}

/* Las tarjetas de paquete son ligas al armador */
a.paquete{text-decoration:none;color:inherit;cursor:pointer}
.paquete-ir{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font:600 13.5px/1 "Mona",system-ui,sans-serif;color:#BBD0FA;transition:color .3s,gap .35s cubic-bezier(.22,1,.36,1)}
.paquete-ir::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:url(enviar-simbolo.svg) center/contain no-repeat;mask:url(enviar-simbolo.svg) center/contain no-repeat}
a.paquete:hover .paquete-ir,a.paquete:focus-visible .paquete-ir{color:#fff;gap:10px}
a.paquete:focus-visible{outline:2px solid rgba(190,214,255,.95);outline-offset:3px}
.previa .paquete-ir{display:none}

/* ===== Pulido de diseño (13-oct, crítica independiente): menos píldoras, una sola escalera de tamaños (12/14/15/16), ritmo de 24 px ===== */
/* Paquetes: todas iguales (sin una «preferida» por accidente), etiqueta en texto simple y precio que no compite con la primera frase */
.paquete:first-child{background:linear-gradient(180deg,rgba(74,122,226,.24),rgba(16,38,98,.34));border-color:rgba(170,202,255,.26)}
.paquete ul{flex:1}
.paquete-etiqueta{padding:0;background:none;border:0;font-size:12px;color:#8FA9DC;letter-spacing:.08em}
.paquete-titulo{margin-top:10px;font-size:14px}
.paquete-precio{font-size:clamp(20px,1.6vw,23px)}
.paquete-nota,.paquete li,.paquete-ir{font-size:14px}
.giro-sello{border:0;background:rgba(110,158,255,.16);font-size:12px}
.sigue-titulo,.antes-titulo,.tarjeta .pregunta-eco,.tarjeta .cuerpo h3,.previa .cuerpo h3{font-size:12px}
.ficha,.copiar{font-size:14px}
.btn-suave{font-size:15px;border-color:rgba(170,202,255,.24);background:rgba(84,132,236,.1)}
/* Ritmo vertical: 24 px entre bloques de la tarjeta */
.paquetes,.acciones-resp{margin-top:24px}
.pie{flex-direction:column;align-items:stretch;gap:16px;margin-top:24px;padding-top:20px}
.sigue-fila{margin-top:12px}
/* Pie: el seguimiento a todo el ancho; Escuchar y Copiar discretos, sin borde, a la derecha */
.herramientas{align-self:flex-end}
.copiar{border-color:transparent;padding:0 10px}
.copiar:hover,.copiar:focus-visible{border-color:transparent}
/* Las fichas de seguimiento pesan menos que los botones */
.sigue .ficha{min-height:38px;padding:6px 14px;background:transparent;box-shadow:none;border-color:rgba(170,200,255,.2);backdrop-filter:none;-webkit-backdrop-filter:none}
.sigue .ficha:hover,.sigue .ficha:focus-visible{background:rgba(84,132,236,.26);border-color:rgba(200,222,255,.5)}
/* Ideas bajo la barra: claramente más angostas que la barra y más ligeras que ella */
.ideas{width:min(600px,calc(100vw - 32px));gap:8px}
.ideas .ficha{min-height:40px;box-shadow:none;background:rgba(30,60,132,.18);border-color:rgba(170,200,255,.18)}
.ideas .ficha:hover,.ideas .ficha:focus-visible{background:rgba(84,132,236,.36);border-color:rgba(200,222,255,.55)}
/* Pensando */
.hueso{margin-top:16px;gap:10px}
.hueso i{height:10px}
@media (prefers-reduced-motion:reduce){.gotas{width:18px}.pensando{gap:10px}}
@media (pointer:coarse){.sigue .ficha,.ideas .ficha{min-height:44px}}
@media (max-width:600px){
  /* cuatro ideas en rejilla pareja de 2 × 2, no en renglones desiguales */
  .ideas{display:grid;grid-template-columns:1fr 1fr}
  .ideas .ficha{justify-content:center;text-align:center;padding:0 10px}
  .tarjeta{padding:20px 20px 22px}
  .tarjeta .cuerpo{font-size:16px;line-height:1.55}
  .tarjeta .cuerpo .entrada{font-size:18px;line-height:1.32}
  .tarjeta .cuerpo li{margin-top:.3em}
  .herramientas{align-self:flex-end}
}
/* En celular el sello del giro baja a su propio renglón: no le roba espacio a la pregunta */
@media (max-width:600px){.cabeza{flex-wrap:wrap;row-gap:8px}.cabeza .pregunta-eco{flex:1 1 100%}.giro-sello{max-width:100%}}
/* En pantallas anchas las cuatro ideas van en un solo renglón (nunca 3 + 1) */
@media (min-width:720px){.ideas{width:max-content;max-width:calc(100vw - 32px);flex-wrap:nowrap}.ideas .ficha{white-space:nowrap}}

/* Socio de Point Care: la empresa aliada que sí cubre lo que no hace Vozavía (abre su página en otra pestaña) */
.socio{display:flex;flex-direction:column;align-items:flex-start;margin-top:20px;padding:18px 20px 18px;border-radius:20px;text-decoration:none;color:inherit;cursor:pointer;
  background:linear-gradient(180deg,rgba(88,138,246,.3),rgba(18,42,108,.38));border:1px solid rgba(190,214,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -14px rgba(0,6,24,.6);
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .45s}
@media (hover:hover){.socio:hover{transform:translateY(-3px);border-color:rgba(200,222,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 34px -14px rgba(0,6,24,.7)}}
.socio-nombre{margin-top:12px;font:600 clamp(20px,1.7vw,24px)/1.15 "Mona",system-ui,sans-serif;color:#fff;letter-spacing:-.01em}
.socio-texto{margin:10px 0 0;padding-top:11px;width:100%;border-top:1px solid rgba(160,196,255,.16);font:400 14.5px/1.5 "Mona",system-ui,sans-serif;color:#D0DDF8}
a.socio:hover .paquete-ir,a.socio:focus-visible .paquete-ir{color:#fff;gap:10px}
.previa .socio{margin:0 18px 18px}
@media (prefers-reduced-motion:reduce){.socio{transition:none}}

/* ===== Con la cuenta del cliente (26-oct-2026): sus videos, el tutorial, el prearmado y «Llévame a…» ===== */
.mis-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,220px));gap:12px;margin-top:20px}
.mi-video,.tutorial{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid rgba(170,202,255,.2);background:linear-gradient(180deg,rgba(40,70,150,.22),rgba(10,22,60,.34))}
.tutorial{margin-top:20px;max-width:560px}
.mi-video video{display:block;width:100%;aspect-ratio:9/16;max-height:340px;object-fit:cover;background:#030612}
.tutorial video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#030612}
.mi-video-espera{display:grid;place-items:center;aspect-ratio:9/16;max-height:340px;font:500 13.5px/1.3 "Mona",system-ui,sans-serif;color:#A9BCE0;background:rgba(3,6,18,.6)}
.mi-video-pie{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px 14px}
.mi-video-pie .paquete-titulo{margin-top:0}
.mi-video-como{min-height:38px;margin-top:10px;padding:0 16px;font-size:13.5px}
.prearmado{margin-top:20px;max-width:560px;background:linear-gradient(180deg,rgba(88,138,246,.3),rgba(22,50,124,.38));border-color:rgba(190,214,255,.4)}
.prearmado-nota{margin:12px 0 0;font:400 13.5px/1.4 "Mona",system-ui,sans-serif;color:#C9D8F6}
.ir-a{margin-top:16px}
@media (max-width:600px){.mis-videos{grid-template-columns:1fr 1fr;gap:10px}.mi-video-como{width:100%}}
@media (prefers-reduced-motion:reduce){.mi-video-como{transition:none}}

/* Pantalla completa: el video se ve ENTERO (vertical con franjas), nunca recortado por el object-fit:cover de su tarjeta (29-oct-2026).
   Reglas separadas: si un navegador no conoce un selector, no tumba al otro. */
video:fullscreen{object-fit:contain!important;background:#000}
video:-webkit-full-screen{object-fit:contain!important;background:#000}