@font-face { font-family: 'Outfit'; src: url('../fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --crema: #FBF4E8; --crema2: #F4E8D4; --tarjeta: #FFFCF7; --navy: #1B2A4E; --navy2: #2A3B66; --texto2: #5E677C; --texto3: #8A90A0;
  --magenta: #D6246E; --magenta-s: #FCE4EE; --naranja: #F28C28; --naranja-s: #FDEBD8; --amarillo: #F6B53B; --amarillo-s: #FDF0D2;
  --teal: #14A6A6; --teal-s: #D9F2F0; --verde: #2BA36B; --verde-s: #DDF3E7; --rojo: #E5484D;
  --borde: rgba(27, 42, 78, .08); --sombra: 0 8px 24px rgba(120, 70, 20, .08), 0 1px 3px rgba(120, 70, 20, .06);
  --sombra-f: 0 14px 34px rgba(120, 70, 20, .14); --r: 22px; --r2: 16px; --r3: 12px;
  --curva: cubic-bezier(.2, .8, .2, 1); --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --sup: env(safe-area-inset-top, 0px); --inf: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #EFE3CF; overscroll-behavior: none; }
body { font-family: 'Outfit', system-ui, sans-serif; color: var(--navy); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.4; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- marco ---------- */
#app { position: fixed; inset: 0; margin: 0 auto; max-width: 480px; background: var(--crema); overflow: hidden; overflow: clip; isolation: isolate; }
@media (min-width: 520px) {
  body { background: radial-gradient(circle at 20% 20%, #F9D9C0, transparent 40%), radial-gradient(circle at 80% 80%, #CDEBE7, transparent 40%), #EFE3CF; }
  #app { box-shadow: 0 0 60px rgba(27, 42, 78, .15); }
}
.pantalla { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-top: var(--sup); scrollbar-width: none; background: var(--crema); }
.pantalla::-webkit-scrollbar { display: none; }
.pantalla.con-nav { padding-bottom: calc(88px + var(--inf)); }
.pantalla.con-cta { padding-bottom: 0; }

/* transiciones entre pantallas */
.entra-push { animation: entraPush .42s var(--curva) both; }
.sale-push { animation: salePush .42s var(--curva) both; }
.entra-pop { animation: entraPop .42s var(--curva) both; }
.sale-pop { animation: salePop .42s var(--curva) both; z-index: 2; }
.entra-tab { animation: entraTab .36s var(--curva) both; }
.sale-tab { animation: saleTab .2s ease both; }
@keyframes entraPush { from { transform: translateX(42%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes salePush { to { transform: translateX(-18%); opacity: 0; } }
@keyframes entraPop { from { transform: translateX(-18%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes salePop { to { transform: translateX(42%); opacity: 0; } }
@keyframes entraTab { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes saleTab { to { opacity: 0; } }

/* aparición escalonada */
.ap { animation: ap .55s var(--curva) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
@keyframes ap { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ap-pop { animation: apPop .5s var(--rebote) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
@keyframes apPop { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }

.toque { transition: transform .18s var(--curva), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.toque:active { transform: scale(.965); }

/* ---------- comunes ---------- */
.ico { width: 22px; height: 22px; flex: none; }
.pad { padding: 0 20px; }
.fila { display: flex; align-items: center; gap: 10px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sub { color: var(--texto2); font-size: 14px; }
.peq { font-size: 13px; color: var(--texto2); }
.titulo-xl { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.titulo-l { font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.titulo-m { font-size: 21px; font-weight: 750; letter-spacing: -.01em; line-height: 1.15; }
.titulo-s { font-size: 17px; font-weight: 700; line-height: 1.2; }
.seccion { margin-top: 26px; }
.seccion-cab { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin-bottom: 12px; }
.seccion-cab h2 { font-size: 21px; font-weight: 750; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.seccion-cab h2 .ico { color: var(--naranja); width: 24px; height: 24px; }
.ver-todos { color: var(--teal); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 2px; padding: 6px 0; }
.ver-todos .ico { width: 16px; height: 16px; transition: transform .2s; }
.ver-todos:active .ico { transform: translateX(3px); }
.carril { display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding: 0 20px; }
.carril::-webkit-scrollbar { display: none; }
.carril > * { scroll-snap-align: start; flex: none; }

.img { background: var(--crema2); overflow: hidden; position: relative; }
.img img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .8s var(--curva); }
.img img.cargada { opacity: 1; transform: none; }

.tarjeta { background: var(--tarjeta); border-radius: var(--r); box-shadow: var(--sombra); border: 1px solid var(--borde); }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border-radius: 999px; font-weight: 650; font-size: 17px; color: #fff; background: var(--magenta); box-shadow: 0 10px 22px rgba(214, 36, 110, .28); transition: transform .18s var(--curva), box-shadow .2s, opacity .2s, background .2s; position: relative; overflow: hidden; }
.boton:active { transform: scale(.97); box-shadow: 0 5px 12px rgba(214, 36, 110, .22); }
.boton.ancho { width: 100%; }
.boton .ico { width: 20px; height: 20px; }
.boton .flecha { transition: transform .25s var(--curva); }
.boton:active .flecha { transform: translateX(4px); }
.boton.teal { background: var(--teal); box-shadow: 0 10px 22px rgba(20, 166, 166, .28); }
.boton.naranja { background: var(--naranja); box-shadow: 0 10px 22px rgba(242, 140, 40, .3); }
.boton.navy { background: var(--navy); box-shadow: 0 10px 22px rgba(27, 42, 78, .25); }
.boton.negro { background: #000; box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.boton.blanco { background: #fff; color: var(--teal); box-shadow: 0 10px 26px rgba(80, 20, 10, .22); }
.boton.suave { background: var(--crema2); color: var(--navy); box-shadow: none; }
.boton.borde { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(27, 42, 78, .18); }
.boton.chico { height: 44px; font-size: 15px; padding: 0 18px; }
.boton[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }
.boton.cargando { pointer-events: none; }
.boton.cargando > * { opacity: 0; }
.boton.cargando::after { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--tarjeta); border: 1.5px solid var(--c, rgba(27, 42, 78, .14)); color: var(--navy); white-space: nowrap; transition: all .25s var(--curva); }
.chip.activo { background: var(--c, var(--magenta)); border-color: var(--c, var(--magenta)); color: #fff; animation: chipPop .35s var(--rebote); }
@keyframes chipPop { 50% { transform: scale(1.07); } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.etiqueta { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--teal-s); color: #0E7C7C; white-space: nowrap; }
.etiqueta .ico { width: 14px; height: 14px; }
.etiqueta.magenta { background: var(--magenta); color: #fff; }
.etiqueta.magenta-s { background: var(--magenta-s); color: var(--magenta); }
.etiqueta.amarillo { background: var(--amarillo-s); color: #A86B00; }
.etiqueta.naranja { background: var(--naranja-s); color: #B85E0A; }
.etiqueta.verde { background: var(--verde); color: #fff; }
.etiqueta.verde-s { background: var(--verde-s); color: #1C7A4D; }
.etiqueta.navy { background: var(--navy); color: #fff; }
.etiqueta.blanca { background: rgba(255, 255, 255, .92); color: var(--navy); }

/* ---------- cabeceras ---------- */
.cab { position: sticky; top: calc(-1 * var(--sup)); z-index: 20; padding: calc(var(--sup) + 10px) 16px 10px; margin-top: calc(-1 * var(--sup)); display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(251, 244, 232, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .25s; }
.cab.sombra { box-shadow: 0 1px 0 var(--borde); }
.cab .titulo-cab { font-weight: 700; font-size: 17px; flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: all .25s; }
.cab.sombra .titulo-cab { opacity: 1; transform: none; }
.btn-redondo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tarjeta); box-shadow: 0 2px 10px rgba(120, 70, 20, .1); flex: none; position: relative; color: var(--navy); }
.btn-redondo .ico { width: 21px; height: 21px; }
.btn-redondo.transp { background: transparent; box-shadow: none; }
.btn-redondo.vidrio { background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); }
.btn-corazon.activo { color: var(--magenta); }
.btn-corazon.activo .ico { fill: var(--magenta); animation: latido .45s var(--rebote); }
@keyframes latido { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }

.logo { display: flex; align-items: center; gap: 8px; }
.logo .flor { width: 40px; height: 40px; }
.logo-txt { display: flex; flex-direction: column; line-height: .9; }
.logo-txt b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.logo-txt span { font-size: 15px; font-weight: 700; color: var(--magenta); letter-spacing: .14em; }
.logo.blanco .logo-txt b { color: #fff; }
.logo.blanco .logo-txt span { color: #FFE3A3; }
.flor .petalo { transform-box: view-box; }
.flor.gira { animation: florGira 18s linear infinite; }
@keyframes florGira { to { transform: rotate(360deg); } }
.flor.abre .petalo { animation: petalo .7s var(--rebote) both; animation-delay: calc(var(--i) * 70ms); transform-origin: 24px 24px; }
@keyframes petalo { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* papel picado */
.papel-picado { position: absolute; display: flex; gap: 4px; pointer-events: none; z-index: 1; }
.papel-picado .cuerda { position: absolute; left: -6px; right: -6px; top: 1px; height: 2px; background: rgba(27, 42, 78, .25); border-radius: 2px; }
.papel-picado .pp { width: 40px; height: 46px; transform-origin: 50% 0; animation: mece 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.55s); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .08)); }
.papel-picado.chico .pp { width: 30px; height: 35px; }
@keyframes mece { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ---------- nav inferior ---------- */
.nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 8px calc(8px + var(--inf)); background: rgba(255, 252, 247, .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--borde); display: grid; grid-template-columns: repeat(5, 1fr); transition: transform .4s var(--curva); }
.nav.oculta { transform: translateY(110%); }
.nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; font-size: 12px; font-weight: 600; color: var(--texto3); position: relative; transition: color .25s; }
.nav button .ico { width: 25px; height: 25px; transition: transform .35s var(--rebote); }
.nav button.activo { color: var(--magenta); }
.nav button.activo .ico { transform: translateY(-2px) scale(1.08); }
.nav button::after { content: ''; position: absolute; bottom: -3px; width: 26px; height: 3px; border-radius: 3px; background: var(--magenta); transform: scaleX(0); transition: transform .35s var(--rebote); }
.nav button.activo::after { transform: scaleX(1); }

/* ---------- inicio ---------- */
.inicio-top { position: relative; padding: 14px 20px 0; }
.inicio-top .papel-picado { top: 0; right: 14px; }
.saludo { margin-top: 18px; }
.saludo h1 { padding-right: 52px; font-size: 33px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.saludo .sub { margin-top: 2px; }
.ubic { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 16px; margin-top: 6px; padding: 4px 0; }
.ubic .ico { color: var(--magenta); width: 19px; height: 19px; }
.ubic .ico.abajo { color: var(--texto3); width: 16px; height: 16px; }
.buscador { margin: 16px 20px 0; height: 54px; border-radius: 999px; background: var(--tarjeta); box-shadow: var(--sombra); display: flex; align-items: center; gap: 10px; padding: 0 20px; color: var(--texto3); font-size: 16px; width: calc(100% - 40px); text-align: left; }
.buscador .ico { color: var(--texto2); }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 18px 20px 0; }
.cat { aspect-ratio: .92; border-radius: 20px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 650; font-size: 12.5px; letter-spacing: -.01em; position: relative; overflow: hidden; box-shadow: 0 8px 18px var(--sombra-c); background: var(--c); }
.cat .ico { width: 34px; height: 34px; stroke-width: 1.7; transition: transform .4s var(--rebote); }
.cat:active .ico { transform: rotate(-10deg) scale(1.1); }
.cat::before { content: ''; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, .14); bottom: -36px; left: 50%; transform: translateX(-50%); box-shadow: -40px 10px 0 -14px rgba(255, 255, 255, .1), 40px 10px 0 -14px rgba(255, 255, 255, .1); }
.cat span { position: relative; text-align: center; line-height: 1.1; }

/* carrusel destacado */
.destacados { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px; scrollbar-width: none; scroll-padding: 0 20px; }
.destacados::-webkit-scrollbar { display: none; }
.destacado { flex: none; width: 100%; scroll-snap-align: start; border-radius: 26px; overflow: hidden; position: relative; min-height: 340px; background: var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; box-shadow: var(--sombra-f); }
.destacado .img { position: absolute; inset: 0; background: var(--navy); }
.destacado .img img { object-position: 70% center; }
.destacado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 24, 50, .92) 0%, rgba(20, 24, 50, .65) 48%, rgba(20, 24, 50, .1) 85%), linear-gradient(0deg, rgba(20, 24, 50, .55), transparent 50%); }
.destacado .cont { position: relative; z-index: 2; padding: 22px; max-width: 86%; }
.destacado h3 { font-size: 32px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 12px; }
.destacado h3 em { font-style: normal; color: var(--amarillo); display: block; }
.destacado .dato { display: flex; align-items: center; gap: 7px; font-size: 15px; margin-top: 5px; opacity: .95; }
.destacado .dato .ico { width: 17px; height: 17px; color: var(--magenta); filter: brightness(1.3); }
.destacado .boton { height: 46px; font-size: 16px; padding: 0 20px; margin-top: 16px; }
.puntos { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.puntos i { width: 7px; height: 7px; border-radius: 4px; background: rgba(27, 42, 78, .18); transition: all .35s var(--curva); }
.puntos i.activo { width: 22px; background: var(--magenta); }

/* tarjetas de empleo chicas */
.mini-empleo { width: 250px; padding: 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.mini-empleo .fila { align-items: flex-start; }
.icono-redondo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c, var(--teal)); flex: none; }
.icono-redondo .ico { width: 24px; height: 24px; }
.mini-empleo h4 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.15; }
.mini-empleo .empresa { font-size: 13.5px; color: var(--texto2); margin-top: 2px; }
.mini-empleo .lugar { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--texto2); margin-top: 4px; }
.mini-empleo .lugar .ico { width: 14px; height: 14px; }
.mini-empleo .pago-mini { font-weight: 750; color: var(--magenta); font-size: 17px; }

.mini-resto { width: 200px; overflow: hidden; text-align: left; }
.mini-resto .img { height: 130px; }
.mini-resto .info { padding: 12px 14px 14px; }
.mini-resto h4 { margin: 0; font-size: 16px; font-weight: 700; }
.mini-resto .meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto2); margin-top: 4px; }
.estrella-ico { color: var(--amarillo); fill: var(--amarillo); width: 15px; height: 15px; }

.mini-persona { width: 150px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mini-persona .img { width: 76px; height: 76px; border-radius: 50%; margin-bottom: 6px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--teal-s); }
.mini-persona h4 { margin: 0; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.mini-persona .oficio { font-size: 13px; color: var(--texto2); }
.check-verif { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); color: #fff; display: inline-grid; place-items: center; flex: none; }
.check-verif .ico { width: 11px; height: 11px; stroke-width: 3; }

.noticia-fila { display: flex; gap: 12px; padding: 12px; text-align: left; align-items: center; width: 100%; }
.noticia-fila .img { width: 92px; height: 78px; border-radius: 14px; flex: none; }
.noticia-fila h4 { margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.2; }

/* ---------- listas ---------- */
.lista-cab { padding: 10px 20px 0; position: relative; overflow: hidden; }
.lista-cab .papel-picado { top: 0; right: 10px; }
.lista-cab h1 { margin-top: 14px; }
.lista-cab .sub { margin-top: 4px; }
.lista { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 10px; }
.nota-filtro { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto3); padding: 8px 20px 0; }
.nota-filtro .ico { width: 14px; height: 14px; }

.chip-pais { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px; min-width: 70px; }
.chip-pais .circ { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--tarjeta); box-shadow: 0 3px 10px rgba(120, 70, 20, .1); transition: all .3s var(--rebote); position: relative; }
.chip-pais .circ .bandera { width: 42px; height: 42px; }
.chip-pais .circ .ico { color: var(--texto2); }
.chip-pais .nom { font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; transition: all .25s; }
.chip-pais.activo .circ { box-shadow: 0 0 0 3px var(--magenta), 0 6px 14px rgba(214, 36, 110, .25); transform: scale(1.06); }
.chip-pais.activo .nom { background: var(--magenta); color: #fff; }
.chip-pais .circ .ok { position: absolute; right: -2px; top: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--magenta); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .3s var(--rebote); border: 2px solid var(--crema); }
.chip-pais .circ .ok .ico { width: 11px; height: 11px; stroke-width: 3.2; }
.chip-pais.activo .circ .ok { transform: scale(1); }

.tarjeta-evento { overflow: hidden; text-align: left; display: block; width: 100%; }
.tarjeta-evento .img { height: 170px; }
.tarjeta-evento .fecha-pill { position: absolute; left: 12px; top: 12px; background: #fff; border-radius: 14px; padding: 6px 10px; text-align: center; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.fecha-pill b { display: block; font-size: 22px; font-weight: 800; }
.fecha-pill span { font-size: 11.5px; font-weight: 700; color: var(--magenta); text-transform: uppercase; letter-spacing: .04em; }
.tarjeta-evento .banderas { position: absolute; right: 12px; top: 12px; display: flex; }
.tarjeta-evento .banderas .bandera { margin-left: -6px; box-shadow: 0 0 0 2px #fff; border-radius: 50%; }
.tarjeta-evento .info { padding: 14px 16px 16px; }
.tarjeta-evento h3 { font-size: 19px; font-weight: 750; line-height: 1.15; }
.dato-linea { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--texto2); margin-top: 6px; }
.dato-linea .ico { width: 16px; height: 16px; color: var(--magenta); }
.precio-desde { font-weight: 750; color: var(--magenta); font-size: 16px; }

.tarjeta-empleo { padding: 18px; text-align: left; width: 100%; display: block; }
.tarjeta-empleo .cuerpo { display: flex; gap: 14px; align-items: flex-start; }
.ilustra { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; flex: none; position: relative; background: var(--c-s); color: var(--c); }
.ilustra::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--c); opacity: .18; transform: rotate(-12deg) scale(1.1, .9); }
.ilustra .ico { width: 38px; height: 38px; stroke-width: 1.8; position: relative; }
.tarjeta-empleo h3 { font-size: 20px; font-weight: 750; line-height: 1.12; }
.tarjeta-empleo .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.tarjeta-empleo .meta span { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--texto2); }
.tarjeta-empleo .meta .ico { width: 16px; height: 16px; }
.pago-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; margin-top: 8px; }
.pago-chip .moneda { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.tarjeta-empleo .pie { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borde); }
.tarjeta-empleo .empresa-mini { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--texto2); font-weight: 500; min-width: 0; }
.tarjeta-empleo .empresa-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tarjeta-resto { overflow: hidden; text-align: left; width: 100%; display: block; }
.tarjeta-resto .img { height: 160px; }
.tarjeta-resto .info { padding: 14px 16px 16px; display: flex; gap: 12px; align-items: center; }
.tarjeta-resto .logo-negocio { margin-top: -40px; box-shadow: 0 0 0 4px var(--tarjeta), 0 6px 14px rgba(0, 0, 0, .15); }
.tarjeta-resto h3 { font-size: 18px; font-weight: 750; }
.tarjeta-resto .promo-pill { position: absolute; left: 12px; bottom: 12px; }
.punto-estado { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); display: inline-block; box-shadow: 0 0 0 3px rgba(43, 163, 107, .2); animation: pulsa 2s infinite; }
.punto-estado.cerrado { background: var(--texto3); box-shadow: none; animation: none; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 6px rgba(43, 163, 107, 0); } }

.logo-negocio { border-radius: 50%; background: var(--fondo); color: #fff; display: grid; place-items: center; flex: none; position: relative; overflow: hidden; }
.logo-negocio::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .35); }
.logo-negocio .ico { width: 46%; height: 46%; }

.tarjeta-noticia { overflow: hidden; text-align: left; width: 100%; display: block; }
.tarjeta-noticia .img { height: 190px; }
.tarjeta-noticia .info { padding: 12px 16px 16px; }
.tarjeta-noticia .etqs { display: flex; gap: 6px; flex-wrap: wrap; }
.tarjeta-noticia h3 { font-size: 20px; font-weight: 750; line-height: 1.15; margin-top: 10px; }
.hace { display: flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--texto3); margin-top: 8px; }
.hace .ico { width: 15px; height: 15px; }

.vacio { text-align: center; padding: 50px 30px; color: var(--texto2); }
.vacio .flor { margin: 0 auto 14px; opacity: .9; }
.vacio p { margin-bottom: 18px; }

/* ---------- detalle ---------- */
.hero { position: relative; height: 330px; margin-top: calc(-1 * var(--sup)); overflow: hidden; }
.hero .img { position: absolute; inset: 0; will-change: transform; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, .25)); pointer-events: none; }
.hero-botones { position: absolute; top: calc(var(--sup) + 10px); left: 16px; right: 16px; display: flex; justify-content: space-between; z-index: 5; }
.hero-botones .der { display: flex; gap: 8px; }
.cab-flotante { position: absolute; top: 0; left: 0; right: 0; z-index: 30; padding: calc(var(--sup) + 10px) 16px 10px; display: flex; align-items: center; gap: 8px; background: rgba(251, 244, 232, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(-100%); transition: transform .3s var(--curva); box-shadow: 0 1px 0 var(--borde); }
.cab-flotante.visible { transform: none; }
.cab-flotante .t { flex: 1; font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalle { position: relative; margin-top: -28px; background: var(--crema); border-radius: 28px 28px 0 0; padding: 24px 20px 10px; z-index: 2; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.info-celda { padding: 14px; border-radius: var(--r2); background: var(--tarjeta); border: 1px solid var(--borde); }
.info-celda .k { font-size: 12.5px; color: var(--texto3); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.info-celda .k .ico { width: 15px; height: 15px; color: var(--magenta); }
.info-celda .v { font-size: 16px; font-weight: 700; margin-top: 4px; line-height: 1.2; }
.dato-redondo { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 16px; font-weight: 600; }
.dato-redondo .circ { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c-s, var(--magenta-s)); color: var(--c, var(--magenta)); flex: none; }
.dato-redondo .circ .ico { width: 22px; height: 22px; }
.dato-redondo .sub { font-weight: 400; font-size: 13.5px; }
.cita { margin-top: 18px; padding: 16px 18px; border-radius: var(--r2); background: var(--amarillo-s); position: relative; font-size: 16px; line-height: 1.45; }
.cita::before { content: '“'; position: absolute; top: -14px; left: 12px; font-size: 56px; font-weight: 800; color: var(--amarillo); line-height: 1; }
.cita .k { font-size: 12px; font-weight: 700; color: #A86B00; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.lista-check { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lista-check li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.lista-check li .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--teal-s); color: var(--teal); stroke-width: 3; }
.bloque-t { font-size: 18px; font-weight: 750; margin-top: 24px; }
.parrafo { font-size: 16px; line-height: 1.55; color: #33405F; margin-top: 10px; }

.cta-fija { position: sticky; left: 0; right: 0; bottom: 0; z-index: 35; margin-top: 24px; padding: 14px 20px calc(14px + var(--inf)); background: linear-gradient(0deg, var(--crema) 70%, rgba(251, 244, 232, 0)); display: flex; gap: 10px; align-items: center; animation: subeCta .5s var(--curva) .15s both; }
@keyframes subeCta { from { transform: translateY(100%); } to { transform: none; } }
.cta-fija .boton { flex: 1; }

.fila-empresa { display: flex; align-items: center; gap: 12px; padding: 14px; margin-top: 18px; text-align: left; width: 100%; }
.fila-empresa .nombre { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.fila-empresa .ico.chev { color: var(--texto3); margin-left: auto; }
.avatar { border-radius: 50%; overflow: hidden; flex: none; background: var(--crema2); }

/* restaurante */
.resto-cab { background: var(--navy); color: #fff; padding: calc(var(--sup) + 10px) 16px 0; margin-top: calc(-1 * var(--sup)); position: relative; text-align: center; }
.resto-cab .papel-picado { top: calc(var(--sup) + 2px); }
.resto-cab .papel-picado.izq { left: 8px; }
.resto-cab .papel-picado.der { right: 8px; }
.resto-cab .fila-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 3; min-height: 54px; }
.resto-cab .logo { justify-content: center; }
.resto-hero { margin: 8px 0 0; border-radius: 22px 22px 0 0; height: 240px; position: relative; overflow: hidden; }
.resto-hero .img { position: absolute; inset: 0; }
.resto-hero .etiqueta { position: absolute; top: 14px; left: 14px; z-index: 2; }
.resto-id { display: flex; gap: 14px; align-items: center; padding: 0 20px; margin-top: -40px; position: relative; z-index: 3; }
.resto-id .logo-negocio { box-shadow: 0 0 0 5px var(--crema), 0 10px 20px rgba(0, 0, 0, .18); }
.resto-id h1 { font-size: 27px; font-weight: 800; line-height: 1.05; margin-top: 40px; letter-spacing: -.015em; }
.resto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14.5px; font-weight: 600; margin-top: 6px; }
.resto-meta .sep { width: 1px; height: 14px; background: rgba(27, 42, 78, .2); }
.resto-meta .ico { width: 16px; height: 16px; }
.promo { margin: 20px 20px 0; border-radius: 20px; background: var(--amarillo); padding: 18px 56px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 10px 22px rgba(246, 181, 59, .35); }
.promo b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.promo .lado { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; }
.promo .lado.i { left: 8px; } .promo .lado.d { right: 8px; }
.promo .lado svg { width: 40px; height: 46px; animation: mece 3s ease-in-out infinite; transform-origin: 50% 0; }
.promo::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: brillo 3.5s ease-in-out infinite 1s; }
@keyframes brillo { 0% { left: -80px; } 40%, 100% { left: 110%; } }
.platillos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px; }
.platillo { overflow: hidden; text-align: center; }
.platillo .img { aspect-ratio: 1.15; }
.platillo .n { font-size: 14px; font-weight: 700; padding: 8px 6px 0; line-height: 1.15; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.platillo .p { color: var(--magenta); font-weight: 750; padding: 0 0 10px; }
.botones-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px; margin-top: 20px; }
.botones-par .boton { padding: 0 12px; font-size: 16px; }
.galeria { display: flex; gap: 10px; overflow-x: auto; padding: 0 20px 6px; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria .img { width: 150px; height: 110px; border-radius: 16px; flex: none; }
.lista-info { margin: 12px 20px 0; padding: 4px 16px; }
.lista-info .fila { padding: 12px 0; border-bottom: 1px solid var(--borde); align-items: flex-start; }
.lista-info .fila:last-child { border: 0; }
.lista-info .ico { color: var(--teal); margin-top: 1px; }

/* empresa */
.empresa-portada { height: 190px; margin-top: calc(-1 * var(--sup)); position: relative; }
.empresa-portada .img { position: absolute; inset: 0; }
.empresa-id { display: flex; gap: 14px; padding: 0 20px; margin-top: -54px; position: relative; z-index: 3; align-items: flex-start; }
.empresa-id .logo-negocio { box-shadow: 0 0 0 5px var(--crema), 0 10px 20px rgba(0, 0, 0, .18); }
.empresa-id .logo-negocio b { position: absolute; bottom: 22%; font-size: 10px; letter-spacing: .06em; font-weight: 800; }
.empresa-id .logo-negocio .ico { margin-bottom: 14px; }
.empresa-nombre { padding: 62px 0 4px; min-width: 0; }
.empresa-nombre h1 { font-size: 24px; font-weight: 800; line-height: 1.08; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px; margin-top: 20px; }
.stat { border-radius: 18px; padding: 16px 8px; text-align: center; background: var(--c-s); }
.stat .ico { width: 30px; height: 30px; color: var(--c); margin: 0 auto 6px; }
.stat .k { font-size: 12.5px; color: var(--texto2); }
.stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.convocatorias { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px; }
.convocatoria { overflow: hidden; text-align: left; }
.convocatoria .img { height: 96px; }
.convocatoria .info { padding: 10px 12px 12px; }
.convocatoria h4 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.15; }
.persona-dueno { display: flex; align-items: center; gap: 12px; margin: 16px 20px 0; padding: 14px; }

/* trabajador */
.perfil-cab { position: relative; height: 200px; margin-top: calc(-1 * var(--sup)); background: var(--crema2); overflow: hidden; }
.perfil-cab .talavera { position: absolute; inset: 0; opacity: .9; }
.perfil-foto { width: 150px; height: 150px; border-radius: 50%; margin: -95px auto 0; position: relative; z-index: 3; box-shadow: 0 0 0 6px var(--crema), 0 14px 30px rgba(0, 0, 0, .18); overflow: hidden; }
.perfil-foto.inicial { display: grid; place-items: center; background: linear-gradient(135deg, var(--magenta), var(--naranja)); color: #fff; font-size: 56px; font-weight: 800; }
.perfil-nombre { text-align: center; margin-top: 14px; padding: 0 20px; }
.perfil-nombre h1 { font-size: 27px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.insignias { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding: 0 20px; }
.rating-fila { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
.rating-fila b { font-size: 24px; font-weight: 800; }
.estrellas { display: flex; gap: 2px; }
.estrellas .ico { width: 18px; height: 18px; color: var(--amarillo); fill: var(--amarillo); }
.oficios-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; padding: 0 20px; }
.oficio-chip { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 999px; color: #fff; font-weight: 650; background: var(--c); }
.oficio-chip .ico { width: 18px; height: 18px; }
.portafolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 20px; margin-top: 16px; }
.portafolio .img { aspect-ratio: .78; border-radius: 16px; }

/* boletos */
.boletos-cab { position: relative; margin-top: calc(-1 * var(--sup)); padding-top: var(--sup); overflow: hidden; }
.ola { position: relative; background: var(--magenta); color: #fff; padding: 22px 20px 30px; margin-top: 6px; clip-path: polygon(0 12%, 18% 4%, 40% 10%, 62% 2%, 82% 8%, 100% 0, 100% 100%, 0 100%); }
.ola h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; position: relative; z-index: 2; }
.ola .deco { position: absolute; right: -10px; top: -6px; opacity: .9; }
.evento-banda { background: var(--navy); color: #fff; padding: 18px 20px 30px; display: flex; gap: 14px; align-items: center; border-radius: 0 0 30px 30px; position: relative; }
.evento-banda h2 { font-size: 21px; font-weight: 750; line-height: 1.1; }
.evento-banda .dato-linea { color: rgba(255, 255, 255, .85); font-size: 13.5px; margin-top: 4px; }
.evento-banda .dato-linea .ico { color: #fff; }
.tipo-boleto { display: flex; gap: 14px; padding: 16px; border: 2px solid var(--c); border-radius: 20px; background: var(--tarjeta); transition: box-shadow .3s, transform .3s var(--curva); }
.tipo-boleto.con { box-shadow: 0 10px 24px var(--c-sombra); }
.tipo-boleto .icono-cuadro { width: 60px; height: 60px; border-radius: 16px; background: var(--c); color: #fff; display: grid; place-items: center; flex: none; }
.tipo-boleto .icono-cuadro .ico { width: 30px; height: 30px; }
.tipo-boleto h3 { font-size: 19px; font-weight: 750; }
.tipo-boleto .d { font-size: 13.5px; color: var(--texto2); margin-top: 2px; }
.tipo-boleto .abajo-fila { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tipo-boleto .precio { font-size: 24px; font-weight: 800; color: var(--c); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; transition: transform .2s var(--rebote), opacity .2s; }
.stepper button:active { transform: scale(.85); }
.stepper button.menos { background: var(--c-s); color: var(--c); }
.stepper button[disabled] { opacity: .35; }
.stepper .n { font-size: 20px; font-weight: 750; min-width: 20px; text-align: center; display: inline-block; }
.stepper .n.salta { animation: salta .3s var(--rebote); }
@keyframes salta { 40% { transform: translateY(-6px) scale(1.2); } }
.resumen { padding: 6px 18px; }
.resumen .entre { padding: 12px 0; border-bottom: 1px solid var(--borde); font-size: 15.5px; }
.resumen .entre:last-child { border: 0; }
.resumen .total { font-size: 22px; font-weight: 800; }

/* hoja inferior (sheet) */
.velo { position: absolute; inset: 0; z-index: 80; background: rgba(20, 24, 45, .45); opacity: 0; transition: opacity .3s; }
.velo.visible { opacity: 1; }
.hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--crema); border-radius: 28px 28px 0 0; max-height: 92%; overflow-y: auto; padding: 10px 20px calc(24px + var(--inf)); transform: translateY(105%); transition: transform .45s var(--curva); box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); scrollbar-width: none; }
.hoja.visible { transform: none; }
.hoja .asa { width: 42px; height: 5px; border-radius: 3px; background: rgba(27, 42, 78, .18); margin: 0 auto 14px; }
.hoja h2 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.hoja.blanca { background: #fff; }

.metodo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--tarjeta); border: 2px solid var(--borde); width: 100%; text-align: left; transition: border-color .25s, box-shadow .25s; margin-top: 10px; }
.metodo.activo { border-color: var(--teal); box-shadow: 0 6px 16px rgba(20, 166, 166, .15); }
.metodo .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(27, 42, 78, .25); margin-left: auto; display: grid; place-items: center; transition: all .2s; }
.metodo.activo .radio { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 4px #fff; }
.marca-tarjeta { width: 46px; height: 32px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #1A1F71, #2B54C8); letter-spacing: .02em; font-style: italic; }
.marca-apple { width: 46px; height: 32px; border-radius: 6px; display: grid; place-items: center; background: #000; color: #fff; font-size: 12px; font-weight: 600; gap: 0; }
.marca-apple .ico { width: 14px; height: 14px; }

.campo { display: block; margin-top: 12px; }
.campo span { font-size: 13px; font-weight: 600; color: var(--texto2); display: block; margin-bottom: 6px; }
.campo input, .campo textarea { width: 100%; height: 54px; border-radius: 14px; border: 1.5px solid rgba(27, 42, 78, .14); background: var(--tarjeta); padding: 0 16px; font-size: 17px; outline: none; transition: border-color .2s, box-shadow .2s; }
.campo textarea { height: 110px; padding: 14px 16px; resize: none; line-height: 1.4; }
.campo input:focus, .campo textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20, 166, 166, .12); }
.campo.error input { border-color: var(--rojo); animation: tiembla .35s; }
@keyframes tiembla { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-btn { color: var(--teal); font-weight: 650; font-size: 14.5px; padding: 8px 0; }

/* apple pay */
.ap-hoja { background: #fff; color: #000; }
.ap-cab { display: flex; justify-content: space-between; align-items: center; }
.ap-cab .marca { display: flex; align-items: center; gap: 2px; font-size: 22px; font-weight: 600; }
.ap-cab .marca .ico { width: 22px; height: 22px; }
.ap-fila { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid #eee; font-size: 15px; }
.ap-fila .k { color: #888; font-size: 13px; width: 70px; }
.ap-tarjeta-mini { width: 40px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #E85D9A, #F7A440); }
.ap-confirmar { text-align: center; padding: 24px 0 6px; }
.ap-confirmar .faceid { width: 64px; height: 64px; margin: 0 auto; color: #0A84FF; }
.ap-confirmar .faceid .ico { width: 64px; height: 64px; stroke-width: 1.4; }
.ap-confirmar .faceid.escanea .ico { animation: escanea 1s ease-in-out infinite; }
@keyframes escanea { 50% { opacity: .4; transform: scale(.94); } }
.ap-confirmar .hecho { width: 64px; height: 64px; border-radius: 50%; border: 3px solid #0A84FF; margin: 0 auto; display: grid; place-items: center; color: #0A84FF; animation: apPop .4s var(--rebote); }
.ap-confirmar .hecho .ico { width: 34px; height: 34px; stroke-width: 3; }
.boton-lateral { position: absolute; right: 0; top: 140px; width: 6px; height: 70px; border-radius: 4px 0 0 4px; background: #0A84FF; animation: lateral 1.2s ease-in-out infinite; }
@keyframes lateral { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 30% { transform: translateX(0); } 45% { transform: translateX(-4px); } 55% { transform: translateX(0); } }

/* éxito */
.exito { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px calc(30px + var(--inf)); position: relative; }
.exito .circ-ok { width: 110px; height: 110px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 14px var(--verde-s), 0 16px 34px rgba(43, 163, 107, .35); animation: apPop .6s var(--rebote) .1s both; }
.exito .circ-ok .ico { width: 56px; height: 56px; stroke-width: 3; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo .5s ease .55s forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.exito h1 { margin-top: 30px; }
.exito .acciones { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
canvas.confeti { position: absolute; inset: 0; pointer-events: none; z-index: 100; width: 100%; height: 100%; }

/* boleto */
.fondo-boleto { min-height: 100%; background: linear-gradient(165deg, #C2186B 0%, #E0306A 35%, #F2742E 80%, #F59A2E 100%); color: #fff; position: relative; padding-bottom: calc(110px + var(--inf)); overflow: hidden; }
.fondo-boleto .papel-picado { top: calc(var(--sup) + 0px); left: 50%; transform: translateX(-50%); }
.fondo-boleto .cab-b { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--sup) + 50px) 16px 0; }
.fondo-boleto h1 { text-align: center; font-size: 30px; font-weight: 800; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.boletos-carril { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 18px 28px 10px; scrollbar-width: none; }
.boletos-carril::-webkit-scrollbar { display: none; }
.boleto { flex: none; width: 100%; scroll-snap-align: center; background: #FFF9EE; color: var(--navy); border-radius: 22px; position: relative; padding: 22px 22px 26px; box-shadow: 0 24px 50px rgba(90, 10, 30, .35); animation: boletoEntra .8s var(--rebote) .15s both; transition: transform .7s var(--curva), opacity .5s; }
@keyframes boletoEntra { from { opacity: 0; transform: translateY(60px) rotate(-3deg) scale(.92); } }
.boleto::before, .boleto::after { content: ''; position: absolute; top: 62%; width: 26px; height: 26px; border-radius: 50%; background: #E2504F; }
.boleto::before { left: -13px; } .boleto::after { right: -13px; }
.boleto .nombre-ev { text-align: center; }
.boleto .nombre-ev .a { font-size: 30px; font-weight: 800; font-style: italic; color: var(--magenta); line-height: 1; letter-spacing: -.01em; }
.boleto .nombre-ev .b { font-size: 26px; font-weight: 850; color: var(--teal); line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.boleto .flor { margin: 0 auto 8px; }
.boleto .linea-punteada { border-top: 2px dashed rgba(20, 166, 166, .5); margin: 16px 0; }
.boleto .datos2 { display: grid; grid-template-columns: 1fr 1fr; }
.boleto .datos2 > div + div { border-left: 1px solid var(--borde); padding-left: 14px; }
.boleto .datos2 .k { font-size: 13px; color: var(--texto2); }
.boleto .datos2 .v { font-size: 20px; font-weight: 800; color: var(--teal); }
.boleto .datos2 > div + div .v { color: var(--navy); }
.qr { width: 200px; height: 200px; margin: 18px auto 0; background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); position: relative; overflow: hidden; }
.qr img { width: 100%; height: 100%; }
.qr::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--teal), transparent); top: 0; animation: escaneoQR 2.4s ease-in-out infinite; opacity: .7; }
@keyframes escaneoQR { 50% { top: calc(100% - 3px); } }
.codigo-txt { text-align: center; font-size: 13px; letter-spacing: .12em; color: var(--texto2); margin-top: 10px; font-weight: 600; }
.boleto .borde-dientes { position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: radial-gradient(circle at 8px -2px, transparent 8px, #FFF9EE 8.5px) repeat-x; background-size: 16px 12px; }
.boleto.al-wallet { transform: translateY(140%) scale(.4) rotate(6deg); opacity: 0; }
.wallet-ok { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 30px; background: #000; display: grid; place-items: center; color: #fff; animation: apPop .5s var(--rebote); z-index: 5; }
.wallet-ok .ico { width: 56px; height: 56px; }

/* onboarding */
.onb { min-height: 100%; position: relative; display: flex; flex-direction: column; }
.onb-grad { background: linear-gradient(160deg, #C9196B 0%, #E5435A 38%, #F27A2E 70%, #F6A93B 100%); color: #fff; }
.onb-grad::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .14), transparent 30%), radial-gradient(circle at 90% 40%, rgba(255, 220, 120, .2), transparent 35%); pointer-events: none; }
.onb .papel-picado { top: var(--sup); left: 50%; transform: translateX(-50%); }
.onb-centro { flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(var(--sup) + 70px) 22px calc(24px + var(--inf)); position: relative; z-index: 2; }
.onb h1 { font-size: 34px; font-weight: 800; text-align: center; letter-spacing: -.02em; line-height: 1.08; margin-top: 22px; }
.onb .sub-onb { text-align: center; font-size: 17px; opacity: .95; margin-top: 8px; max-width: 320px; }
.splash-flor { animation: florEntra 1s var(--rebote) both; }
@keyframes florEntra { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }
.idiomas { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 34px; }
.idioma-btn { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 24px; background: rgba(255, 252, 247, .97); color: var(--navy); text-align: left; box-shadow: 0 14px 30px rgba(120, 20, 30, .2); }
.idioma-btn .sigla { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; background: var(--c); flex: none; }
.idioma-btn b { font-size: 21px; font-weight: 750; display: block; }
.idioma-btn .ico.chev { margin-left: auto; color: var(--texto3); }
.paises { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; margin-top: 26px; }
.pais-btn { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 24px; background: rgba(255, 252, 247, .97); color: var(--navy); text-align: left; box-shadow: 0 12px 26px rgba(120, 20, 30, .18); border: 3px solid transparent; transition: border-color .25s, transform .3s var(--rebote); position: relative; }
.pais-btn .bandera { width: 58px; height: 58px; flex: none; transition: transform .5s var(--rebote); }
.pais-btn b { font-size: 21px; font-weight: 750; }
.pais-btn.activo { border-color: var(--teal); transform: scale(1.02); }
.pais-btn.activo .bandera { transform: rotate(-12deg) scale(1.08); }
.pais-btn .ok { position: absolute; top: -10px; right: -8px; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; border: 3px solid #fff; transform: scale(0); transition: transform .35s var(--rebote); }
.pais-btn .ok .ico { width: 16px; height: 16px; stroke-width: 3.2; }
.pais-btn.activo .ok { transform: scale(1); }
.burbuja { margin-top: 18px; background: #fff; color: var(--navy); padding: 12px 18px; border-radius: 20px 20px 20px 6px; font-weight: 650; font-size: 16px; box-shadow: 0 10px 24px rgba(120, 20, 30, .2); min-height: 48px; display: flex; align-items: center; opacity: 0; transform: translateY(8px) scale(.95); transition: all .4s var(--rebote); }
.burbuja.visible { opacity: 1; transform: none; }
.onb-pie { margin-top: auto; padding-top: 24px; width: 100%; }

.intro { height: 100%; display: flex; flex-direction: column; background: var(--crema); }
.intro-carril { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.intro-carril::-webkit-scrollbar { display: none; }
.intro-pag { flex: none; width: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; padding: calc(var(--sup) + 64px) 22px 0; }
.intro-img { border-radius: 30px; overflow: hidden; height: 46vh; max-height: 420px; min-height: 260px; position: relative; box-shadow: var(--sombra-f); }
.intro-img .img { position: absolute; inset: 0; }
.intro-img .img img { transition: transform 6s ease-out, opacity .6s; }
.intro-pag.vista .intro-img .img img.cargada { transform: scale(1.08); }
.intro-pag .etiqueta { margin-top: 22px; align-self: flex-start; }
.intro-pag h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin-top: 10px; }
.intro-pag p { font-size: 17px; line-height: 1.5; color: #3A4666; margin-top: 10px; }
.intro-pag .ap-i { opacity: 0; transform: translateY(16px); transition: all .6s var(--curva); }
.intro-pag.vista .ap-i { opacity: 1; transform: none; }
.intro-pag.vista .ap-i:nth-child(3) { transition-delay: .08s; } .intro-pag.vista .ap-i:nth-child(4) { transition-delay: .16s; }
.intro-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: calc(var(--sup) + 14px) 20px 0; display: flex; justify-content: space-between; align-items: center; }
.intro-pie { padding: 16px 22px calc(18px + var(--inf)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.intro-pie .puntos { margin: 0; }
.barra-prog { height: 6px; border-radius: 3px; background: rgba(27, 42, 78, .1); overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--naranja)); border-radius: 3px; transition: width .5s var(--curva); }

.codigo-cajas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 22px; }
.codigo-cajas div { height: 62px; border-radius: 14px; background: var(--tarjeta); border: 2px solid rgba(27, 42, 78, .12); display: grid; place-items: center; font-size: 26px; font-weight: 800; transition: all .25s var(--rebote); }
.codigo-cajas div.lleno { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 6px 14px rgba(20, 166, 166, .2); }
.codigo-cajas.ok div { border-color: var(--verde); background: var(--verde-s); }

/* perfil */
.perfil-tarjeta { margin: 14px 20px 0; padding: 22px; border-radius: 26px; color: #fff; background: linear-gradient(135deg, #1B2A4E 0%, #2E3F78 60%, #3B4C8F 100%); position: relative; overflow: hidden; box-shadow: var(--sombra-f); }
.perfil-tarjeta .flor { position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; opacity: .25; }
.perfil-tarjeta .fila { position: relative; }
.avatar-inicial { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 800; background: linear-gradient(135deg, var(--magenta), var(--naranja)); color: #fff; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); overflow: hidden; }
.avatar-inicial img { width: 100%; height: 100%; object-fit: cover; }
.perfil-tarjeta h2 { font-size: 23px; font-weight: 800; }
.perfil-tarjeta .tono { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .1); border-radius: 16px; padding: 10px 12px; position: relative; font-size: 14px; }
.perfil-tarjeta .tono .ico { width: 16px; height: 16px; opacity: .7; margin-left: auto; }
.menu-lista { margin: 14px 20px 0; padding: 4px 0; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 13px 16px; width: 100%; text-align: left; font-size: 16px; font-weight: 600; }
.menu-item + .menu-item { border-top: 1px solid var(--borde); }
.menu-item .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-s); color: var(--c); flex: none; }
.menu-item .ic .ico { width: 21px; height: 21px; }
.menu-item .der { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--texto3); font-size: 14px; font-weight: 600; }
.menu-item .der .ico { width: 18px; height: 18px; }
.contador { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--magenta-s); color: var(--magenta); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.segmento { display: inline-flex; background: var(--crema2); border-radius: 999px; padding: 3px; position: relative; }
.segmento button { position: relative; z-index: 2; height: 32px; padding: 0 14px; font-weight: 700; font-size: 13.5px; color: var(--texto2); transition: color .25s; }
.segmento button.activo { color: #fff; }
.segmento .pildora { position: absolute; z-index: 1; top: 3px; bottom: 3px; border-radius: 999px; background: var(--navy); transition: all .35s var(--rebote); }

/* trabajador propio / tarjeta CTA */
.cta-perfil { margin: 16px 20px 0; padding: 20px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #0F8F8F, #14A6A6 50%, #33BFA8); position: relative; overflow: hidden; text-align: left; width: calc(100% - 40px); display: block; box-shadow: 0 14px 30px rgba(20, 166, 166, .3); }
.cta-perfil::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.cta-perfil h3 { font-size: 20px; font-weight: 800; position: relative; z-index: 2; max-width: 80%; }
.cta-perfil p { font-size: 14.5px; opacity: .92; margin-top: 4px; position: relative; z-index: 2; max-width: 85%; }
.cta-perfil .ir { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--teal); display: grid; place-items: center; z-index: 2; animation: empuja 2.4s ease-in-out infinite; }
@keyframes empuja { 0%, 70%, 100% { transform: translateY(-50%); } 80% { transform: translate(5px, -50%); } 90% { transform: translate(0, -50%); } }
.mi-trabajador { margin: 16px 20px 0; padding: 16px; display: flex; align-items: center; gap: 14px; width: calc(100% - 40px); text-align: left; }

.wizard { padding: 0 20px; }
.wizard .barra-prog { margin: 6px 0 22px; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.opciones .chip { height: 46px; font-size: 15.5px; padding: 0 18px; }
.toggle-fila { display: flex; align-items: center; justify-content: space-between; padding: 16px; margin-top: 12px; width: 100%; text-align: left; font-weight: 600; font-size: 16px; }
.switch { width: 52px; height: 32px; border-radius: 16px; background: rgba(27, 42, 78, .15); position: relative; transition: background .25s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--rebote); }
.switch.on { background: var(--teal); }
.switch.on::after { transform: translateX(20px); }
.contador-grande { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 20px; --c: var(--magenta); --c-s: var(--magenta-s); }
.contador-grande .stepper button { width: 54px; height: 54px; }
.contador-grande .n { font-size: 48px; font-weight: 800; min-width: 70px; }
.foto-subir { width: 170px; height: 170px; border-radius: 50%; margin: 26px auto 0; display: grid; place-items: center; background: var(--tarjeta); border: 3px dashed rgba(27, 42, 78, .18); color: var(--texto2); overflow: hidden; position: relative; }
.foto-subir img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-subir .ico { width: 44px; height: 44px; }

/* verificación */
.camara { position: relative; border-radius: 26px; overflow: hidden; background: #111; aspect-ratio: 3/4; margin-top: 16px; }
.camara video, .camara img.captura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camara video.espejo { transform: scaleX(-1); }
.marco-doc { position: absolute; left: 8%; right: 8%; top: 28%; aspect-ratio: 1.58; border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); }
.marco-cara { position: absolute; left: 18%; right: 18%; top: 12%; bottom: 16%; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); transition: border-color .3s; }
.marco-cara.ok { border-color: var(--verde); }
.marco-doc::before, .marco-cara::before { content: ''; position: absolute; left: 0; right: 0; height: 3px; top: 0; background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: escaneoQR 2s ease-in-out infinite; }
.instruccion { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; font-weight: 700; font-size: 19px; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.instruccion span { display: inline-block; animation: apPop .4s var(--rebote); }
.anillo-vida { position: absolute; left: 50%; top: 50%; width: 76%; aspect-ratio: .78; transform: translate(-50%, -52%); pointer-events: none; }
.sin-camara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; gap: 14px; background: linear-gradient(160deg, #2A3B66, #1B2A4E); }
.sin-camara .ico { width: 48px; height: 48px; opacity: .8; }
.doc-tipos { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.checks-proceso { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; text-align: left; width: 100%; }
.check-p { display: flex; align-items: center; gap: 14px; font-size: 16.5px; font-weight: 600; opacity: .35; transition: opacity .4s; }
.check-p.hecho { opacity: 1; }
.check-p .c { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--crema2); color: #fff; flex: none; transition: background .3s; }
.check-p.hecho .c { background: var(--verde); animation: apPop .4s var(--rebote); }
.check-p.espera .c { background: var(--amarillo); }
.check-p .c .ico { width: 18px; height: 18px; stroke-width: 3; }
.check-p.activo .c { background: transparent; border: 3px solid var(--crema2); border-top-color: var(--teal); animation: gira .8s linear infinite; }
.insignia-grande { width: 130px; height: 130px; margin: 0 auto; position: relative; display: grid; place-items: center; color: #fff; }
.insignia-grande svg.fondo { position: absolute; inset: 0; animation: florGira 20s linear infinite; }
.insignia-grande .ico { width: 54px; height: 54px; position: relative; animation: apPop .6s var(--rebote) .2s both; }

/* toast */
.toasts { position: absolute; top: calc(var(--sup) + 10px); left: 12px; right: 12px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--navy); color: #fff; border-radius: 18px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; box-shadow: 0 14px 30px rgba(20, 24, 45, .3); animation: toastEntra .5s var(--rebote); pointer-events: auto; }
.toast.sale { animation: toastSale .35s ease forwards; }
.toast .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c, var(--teal)); flex: none; }
.toast .ic .ico { width: 18px; height: 18px; }
.toast .flor { flex: none; }
@keyframes toastEntra { from { transform: translateY(-120%) scale(.9); opacity: 0; } }
@keyframes toastSale { to { transform: translateY(-120%); opacity: 0; } }

/* búsqueda */
.buscar-cab { display: flex; gap: 10px; align-items: center; padding: calc(var(--sup) + 10px) 16px 10px; margin-top: calc(-1 * var(--sup)); position: sticky; top: calc(-1 * var(--sup)); z-index: 20; background: rgba(251, 244, 232, .92); backdrop-filter: blur(14px); }
.buscar-cab .caja { flex: 1; height: 50px; border-radius: 999px; background: var(--tarjeta); box-shadow: var(--sombra); display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.buscar-cab input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; min-width: 0; }
.grupo-res h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto3); font-weight: 700; padding: 18px 20px 8px; }
.res { display: flex; gap: 12px; align-items: center; padding: 10px 20px; width: 100%; text-align: left; }
.res .img, .res .icono-redondo { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.res b { display: block; font-size: 15.5px; }
mark { background: var(--amarillo-s); color: inherit; border-radius: 4px; padding: 0 2px; }

.skeleton { background: linear-gradient(90deg, var(--crema2) 25%, #FBF1E2 50%, var(--crema2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 16px; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }