/* aloia · landing. Los colores son los de la app (css/app.css de aloia). */
:root{
  --teal:#09848F; --teal-hover:#076C75; --teal-oscuro:#123A3F; --teal-medio:#7FC4CA;
  --crema:#F3F9F9; --lavanda:#E6F3F4; --hoja:#EEF3F4; --superficie:#F8FAFA;
  --tinta:#1F2A2E; --tinta-suave:#5F6B70; --tinta-tenue:#A2ACB0; --linea:#E3E8EA; --linea-fuerte:#CBD3D6;
  --violeta:#7A3CE0; --violeta-suave:#B9A0F7; --salida:#E6DCFA; --salida-tinta:#4A2A99;
  --ok:#1E8455; --ok-fondo:#E5F5EC; --ambar:#8F5E10; --ambar-fuerte:#D9A13F; --ambar-fondo:#FBF2E0;
  --aloia:#3F3D45;
  --sombra:0 1px 2px rgba(18,58,63,.06),0 6px 18px rgba(18,58,63,.07);
  --sombra-alta:0 30px 60px -28px rgba(18,58,63,.38);
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* marca */
.wordmark{font-weight:800;letter-spacing:-.045em;color:var(--aloia);line-height:1}
.wordmark i{font-style:normal;color:var(--violeta)}
.marca{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.marca .wordmark{font-size:28px}
.marca .by{font-size:11px;color:var(--tinta-suave);margin-top:2px;margin-left:1px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:999px;background:var(--teal);color:#fff;
  font-weight:700;font-size:16px;text-decoration:none;border:1px solid var(--teal);transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 10px 24px -12px rgba(9,132,143,.7)}
.btn:hover{background:var(--teal-hover);border-color:var(--teal-hover);transform:translateY(-1px)}
.btn-sec{background:#fff;color:var(--teal-oscuro);border-color:var(--linea-fuerte);box-shadow:none}
.btn-sec:hover{background:var(--crema);border-color:var(--teal-medio)}
.btn-chico{padding:10px 18px;font-size:14px;box-shadow:none}
.btn-link{font-weight:600;font-size:14px;text-decoration:none;color:var(--teal-oscuro);padding:10px 12px}
.btn-link:hover{color:var(--teal)}
:focus-visible{outline:3px solid rgba(9,132,143,.35);outline-offset:2px;border-radius:8px}

/* barra de arriba */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.con-borde{border-bottom-color:var(--linea)}
.nav-in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.nav-links{display:flex;gap:4px;margin-left:12px}
.nav-links a{font-size:14px;font-weight:600;color:var(--tinta-suave);text-decoration:none;padding:8px 12px;border-radius:999px}
.nav-links a:hover{color:var(--teal-oscuro);background:var(--crema)}
.nav-der{margin-left:auto;display:flex;align-items:center;gap:6px}

/* portada */
.portada{position:relative;padding:72px 24px 40px;text-align:center;overflow:hidden;
  background:radial-gradient(1100px 520px at 50% 0%,var(--crema),#fff 70%)}
.portada-txt{max-width:1080px;margin:0 auto}
.sobre{display:inline-block;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:var(--lavanda);color:var(--teal-hover);font-size:13px;font-weight:700;letter-spacing:.01em}
.portada h1{margin:0;font-size:clamp(38px,5.6vw,68px);line-height:1.04;letter-spacing:-.045em;font-weight:800;color:var(--teal-oscuro)}
.portada h1 span,.bloque h2 span{color:var(--teal)}
.bajada{margin:22px auto 0;max-width:700px;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--tinta-suave)}
.portada-btns{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* escena: la MacBook con los globitos alrededor */
.escena{position:relative;max-width:1060px;margin:56px auto 0;padding:0 40px}

/* MacBook dibujada */
.mac{position:relative;filter:drop-shadow(0 30px 40px rgba(18,58,63,.2))}
/* tapa: borde de aluminio con brillo, bisel negro, cámara y reflejo en la pantalla (sin logos) */
.mac-tapa{position:relative;margin:0 auto;width:88%;padding:1.6% 1.6% 1.5%;border:2.5px solid transparent;border-radius:20px 20px 6px 6px;
  background:linear-gradient(#0a0a0b,#0a0a0b) padding-box,linear-gradient(155deg,#e6e7ea 0%,#9b9ea4 28%,#f3f4f6 50%,#8c8f95 74%,#cfd1d5 100%) border-box;
  box-shadow:inset 0 0 0 1px #1d1e21}
.mac-notch{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:8%;height:2.8%;background:#0a0a0b;border-radius:0 0 8px 8px}
.mac-notch::after{content:'';position:absolute;left:50%;top:38%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3b4b63,#0d1118 70%);box-shadow:0 0 0 1px #1a1b1e}
.mac-pantalla{position:relative;aspect-ratio:1300/844;overflow:hidden;border-radius:6px;background:var(--teal)}
.mac-pantalla::after{content:'';position:absolute;inset:0;z-index:20;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 42%)}
/* bisagra y base de aluminio */
.mac-bisagra{width:84%;height:clamp(4px,.6vw,7px);margin:0 auto;border-radius:0 0 3px 3px;background:linear-gradient(#55575c,#1e1f22)}
.mac-base{position:relative;height:clamp(10px,1.6vw,19px);margin:-1px auto 0;width:100%;
  background:linear-gradient(180deg,#f5f6f8 0%,#dfe1e4 22%,#c3c6cb 60%,#9a9da3 100%);border-radius:3px 3px 18px 18px / 3px 3px 100% 100%;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 2px rgba(0,0,0,.18)}
.mac-sombra{position:absolute;left:6%;right:6%;bottom:-16px;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(18,30,35,.32),rgba(18,30,35,0) 70%);filter:blur(3px);z-index:-1}
.mac-hueco{position:absolute;top:0;left:50%;transform:translateX(-50%);width:13%;height:42%;background:linear-gradient(#a9acb2,#d3d5d9);border-radius:0 0 10px 10px;box-shadow:inset 0 1px 1px rgba(0,0,0,.15)}

/* globitos */
.globo{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:11px 18px 11px 11px;border-radius:18px;background:#fff;text-align:left;
  box-shadow:0 18px 40px -14px rgba(18,58,63,.35),0 0 0 1px rgba(18,58,63,.05);white-space:nowrap}
.globo b{display:block;font-size:15px;font-weight:700;color:var(--tinta);line-height:1.2}
.globo small{display:block;font-size:13px;color:var(--tinta-suave);margin-top:2px}
.globo .estrellas{color:var(--ambar-fuerte);letter-spacing:2px;font-size:14px}
.globo-ic{flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center}
.globo-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-teal{background:var(--lavanda);color:var(--teal)}
.ic-ok{background:var(--ok-fondo);color:var(--ok)}
.ic-violeta{background:#F2EDFC;color:var(--violeta)}
.ic-ambar{background:var(--ambar-fondo);color:var(--ambar-fuerte)}
.g1{top:13%;left:-120px}
.g2{top:27%;right:-110px}
.g3{bottom:13%;left:-100px}
.g4{top:-3%;right:5%}
@media (max-width:1339px){.g1{top:36%;left:-8px}.g2{right:-8px}.g3{bottom:9%;left:0}}

/* los signos de puntuación en letra grande quedan muy separados: se acercan */
.pt{margin-left:-.07em;font-weight:inherit}


/* bloques */
.bloque{max-width:1180px;margin:0 auto;padding:68px 24px}
.cab{text-align:center;max-width:820px;margin:0 auto 44px}
.ceja{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.bloque h2,.cierre h2{margin:0;font-size:clamp(32px,4.6vw,54px);line-height:1.06;letter-spacing:-.04em;font-weight:800;color:var(--teal-oscuro)}
.lead{font-size:18px;line-height:1.55;color:var(--tinta-suave);margin:18px 0 0}

/* filas: texto + tarjeta viva */
.fila{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:28px 0}
.fila.al-reves .fila-txt{order:2}
.fila-txt h3{margin:14px 0 0;font-size:clamp(26px,3vw,34px);line-height:1.12;letter-spacing:-.03em;color:var(--teal-oscuro)}
.fila-txt p{margin:16px 0 0;font-size:17.5px;line-height:1.6;color:var(--tinta-suave)}
.tildes{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.tildes li{position:relative;padding-left:30px;font-size:16px;line-height:1.45;color:var(--tinta)}
.tildes li::before{content:'';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--lavanda) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309848F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") no-repeat center/13px}
.fila-viva{position:relative}
.fila-viva::before{content:'';position:absolute;inset:8% -4% -6% 6%;border-radius:40px;background:linear-gradient(135deg,var(--lavanda),#F2EDFC);z-index:-1}

/* tarjetas vivas (comunes) */
.viva{max-width:460px;margin:0 auto;background:#fff;border-radius:26px;padding:24px;box-shadow:var(--sombra-alta),0 0 0 1px rgba(18,58,63,.05)}
.viva-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.viva-ceja{margin:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.viva-tit{margin:2px 0 0;font-size:20px;font-weight:700;color:var(--teal-oscuro)}
.viva-sub{margin:2px 0 0;font-size:14px;color:var(--tinta-suave)}
.chip-ej{flex:0 0 auto;padding:4px 12px;border-radius:999px;background:var(--hoja);color:var(--tinta-suave);font-size:12px;font-weight:700}
.verde{color:var(--ok)}
.gris{color:var(--tinta-suave)}

/* reserva que se arma sola */
.renglones{list-style:none;margin:0;padding:0}
.renglones li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--linea);font-size:15.5px;color:var(--tinta-suave);transition:opacity .5s,transform .5s}
.renglones li b{color:var(--tinta);font-variant-numeric:tabular-nums}
.renglones li small{display:block;font-size:12px;color:var(--tinta-tenue)}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-top:2px;border-top:2px solid var(--teal-oscuro)}
.total span{font-weight:700}
.total b{font-size:32px;letter-spacing:-.02em;color:var(--teal-oscuro);font-variant-numeric:tabular-nums}
.boton-wa{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;transition:opacity .5s,transform .5s,background .5s}
.boton-wa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:none}
.boton-wa .despues{display:none}
.reserva.listo .boton-wa{background:var(--ok)}
.reserva.listo .boton-wa svg,.reserva.listo .boton-wa .despues{display:inline}
.reserva.listo .boton-wa .antes{display:none}


/* finanzas */
.barra-fila{margin-bottom:16px}
.barra-txt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;color:var(--tinta-suave);margin-bottom:7px}
.barra-txt b{font-size:19px;color:var(--teal-oscuro);font-variant-numeric:tabular-nums}
.barra{height:10px;border-radius:99px;background:var(--hoja);overflow:hidden}
.barra i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--teal);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.barra i.b-gris{background:var(--tinta-tenue)}
.queda{display:flex;justify-content:space-between;align-items:baseline;padding:16px 18px;border-radius:18px;background:var(--lavanda);margin-top:4px}
.queda span{font-weight:700;color:var(--teal-oscuro)}
.queda b{font-size:34px;letter-spacing:-.02em;color:var(--teal-oscuro);font-variant-numeric:tabular-nums}
.ocupa{margin-top:16px}
.ocupa-txt{display:flex;justify-content:space-between;font-size:15px;color:var(--tinta-suave);margin-bottom:8px}
.ocupa-txt b{color:var(--teal-oscuro)}
.ocupa-noches{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.ocupa-noches i{height:14px;border-radius:4px;background:var(--hoja);transition:background .3s}
.ocupa-noches i.on{background:var(--teal)}


.huesped-cel{position:relative;display:flex;justify-content:center}
/* el celular dibujado */
/* el iPhone 18 Pro Max con sus proporciones reales (78 x 163,4 mm; pantalla 6,9" 1320x2868): marco, bisel, botones, isla, barra de estado y rayita de inicio, sin logos */
.iphone{position:relative;padding:3px;border-radius:53px;
  background:linear-gradient(150deg,#c9cbcf 0%,#76787d 22%,#e2e3e6 48%,#6a6c71 74%,#b4b6ba 100%);
  box-shadow:var(--sombra-alta),0 50px 80px -30px rgba(18,58,63,.45)}
.ip-bisel{padding:8px;border-radius:50px;background:#0b0b0c;box-shadow:inset 0 0 0 1px #2c2d31}
.ip-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#5d5f64,#c3c5c9 60%,#8a8c91)}
.ip-accion{left:-3px;top:150px;height:34px}
.ip-vol1{left:-3px;top:205px;height:62px}
.ip-vol2{left:-3px;top:280px;height:62px}
.ip-power{right:-3px;top:225px;height:100px}
.cel{position:relative;width:338px;height:735px;border-radius:42px;background:#ECE5DD;overflow:hidden}
.cel-isla{position:absolute;z-index:4;top:9px;left:50%;transform:translateX(-50%);width:97px;height:29px;border-radius:15px;background:#050506}
.cel-estado{position:absolute;z-index:3;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 36px;color:#111}
.cel-estado b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.cel-iconos{display:flex;align-items:center;gap:5px}
.cel-iconos svg{height:11px;width:auto;fill:#111}
.cel-bat{position:relative;width:24px;height:12px;border-radius:4px;border:1.5px solid rgba(17,17,17,.4);padding:1.5px}
.cel-bat::after{content:'';position:absolute;right:-4px;top:3.5px;width:2px;height:4px;border-radius:0 2px 2px 0;background:rgba(17,17,17,.4)}
.cel-bat i{display:block;width:80%;height:100%;border-radius:2px;background:#111}
.cel-home{position:absolute;z-index:3;bottom:7px;left:50%;transform:translateX(-50%);width:122px;height:5px;border-radius:3px;background:#111}
.wa-cab{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:54px 16px 12px;background:#F6F6F6;border-bottom:1px solid #e2e2e2}
.wa-volver{font-size:30px;line-height:1;color:#0A7CFF;margin-top:-4px}
.wa-avatar{width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.wa-quien b{display:block;font-size:15.5px}
.wa-quien small{font-size:12px;color:#7a7a7a}
.wa-chat{position:absolute;top:110px;bottom:68px;left:0;right:0;padding:12px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  background:#EFE7DE radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.2px) 0 0/14px 14px;overflow:hidden}
.wa-dia{display:none}
.wa-msj{position:relative;align-self:flex-end;max-width:84%;padding:7px 9px 18px;border-radius:10px 2px 10px 10px;background:#D9FDD3;font-size:13.2px;line-height:1.38;color:#111;box-shadow:0 1px .5px rgba(0,0,0,.13);
  transition:opacity .45s,transform .45s}
.wa-msj.suyo{align-self:flex-start;background:#fff;border-radius:2px 10px 10px 10px}
.wa-hora{position:absolute;right:8px;bottom:4px;font-size:10.5px;color:#667781}
.wa-msj:not(.suyo) .wa-hora{color:#53A0D6}
.wa-escribe{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;border-radius:2px 10px 10px 10px;background:#fff;opacity:0;transition:opacity .3s}
.wa-escribe i{width:7px;height:7px;border-radius:50%;background:#9aa3a8;animation:puntito 1.2s infinite}
.wa-escribe i:nth-child(2){animation-delay:.15s}.wa-escribe i:nth-child(3){animation-delay:.3s}
@keyframes puntito{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.wa-pie{position:absolute;bottom:0;left:0;right:0;height:68px;padding:9px 12px 0;background:#F6F6F6;border-top:1px solid #e2e2e2}
.wa-pie span{display:block;height:34px;line-height:34px;border-radius:18px;background:#fff;border:1px solid #e3e3e3;padding:0 14px;font-size:14px;color:#9a9a9a}
/* el voucher dentro del chat (como el de la app) */
.wa-voucher{padding:4px 4px 18px;width:84%}
.vch{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(18,58,63,.06)}
.vch-cab{display:flex;align-items:center;gap:8px;padding:10px 11px;background:linear-gradient(135deg,var(--teal),var(--teal-oscuro));color:#fff}
.vch-logo{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);font-size:10.5px;font-weight:800}
.vch-neg{flex:1;min-width:0;line-height:1.2}
.vch-neg b{display:block;font-size:11.5px}
.vch-neg small{display:block;font-size:9.5px;opacity:.75}
.vch-num{flex:0 0 auto;text-align:right;line-height:1.15}
.vch-num small{display:block;font-size:8px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.vch-num b{font-size:10.5px}
.vch-cuerpo{padding:10px 11px 10px}
.vch-estado{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 5px;border-radius:99px;background:var(--ok-fondo);color:var(--ok);font-size:10px;font-weight:700}
.vch-estado svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.vch-nombre{display:block;margin-top:5px;font-size:17px;letter-spacing:-.02em;color:var(--teal-oscuro)}
.vch-sub{display:block;font-size:10.5px;color:var(--tinta-suave)}
.vch-fechas{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;padding:7px 10px;border-radius:10px;background:var(--crema)}
.vch-fechas span{display:flex;flex-direction:column;line-height:1.2}
.vch-fechas span:last-child{text-align:right}
.vch-fechas small{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.vch-fechas b{font-size:14px;color:var(--teal-oscuro);white-space:nowrap}
.vch-fechas em{font-style:normal;font-size:9.5px;color:var(--tinta-suave)}
.vch-fechas i{flex:1;position:relative;font-style:normal;font-size:9.5px;color:var(--tinta-suave);text-align:center}
.vch-fechas i::before,.vch-fechas i::after{content:'';position:absolute;top:50%;width:8px;height:1px;background:var(--teal-medio)}
.vch-fechas i::before{left:0}.vch-fechas i::after{right:0}
.vch-pago{margin-top:8px;font-size:11px}
.vch-pago div{display:flex;justify-content:space-between;padding:3px 0;color:var(--tinta-suave)}
.vch-pago b{color:var(--tinta);font-variant-numeric:tabular-nums}
.vch-pago .vch-saldo{margin-top:3px;padding:6px 8px;border-radius:8px;background:var(--ambar-fondo);color:var(--ambar);font-weight:700}
.vch-pago .vch-saldo b{color:var(--ambar)}
.vch-pie{padding:6px 11px;border-top:1px solid var(--linea);font-size:9px;color:var(--tinta-tenue);text-align:center}
.vch-pie b{color:var(--aloia);font-weight:800;letter-spacing:-.03em}
.vch-pie i{font-style:normal;color:var(--violeta)}
.globo-cel{position:absolute;left:-70px;top:24%}


/* precios (los mismos planes que oryx) */
.precios .lead{max-width:560px;margin-left:auto;margin-right:auto}
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan-c{display:flex;flex-direction:column;padding:30px 28px;border-radius:28px;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra);transition:transform .25s,box-shadow .25s}
.plan-c:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.plan-c.destacado{border:2px solid var(--teal);box-shadow:var(--sombra-alta)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-c h3{margin:0;font-size:24px;letter-spacing:-.02em;color:var(--teal-oscuro)}
.recomendado{padding:5px 12px;border-radius:999px;background:var(--teal);color:#fff;font-size:12px;font-weight:700}
.plan-quien{margin:6px 0 0;font-size:15.5px;line-height:1.45;color:var(--tinta-suave);min-height:45px}
.plan-precio{margin:22px 0 0}
.plan-precio b{font-size:42px;letter-spacing:-.035em;color:var(--teal-oscuro);font-variant-numeric:tabular-nums}
.plan-por{margin:2px 0 0;font-size:14px;color:var(--tinta-suave)}
.plan-c .tildes{margin:24px 0 28px;gap:9px}
.plan-c .tildes li{font-size:15px}
.plan-c .btn{margin-top:auto;width:100%;box-shadow:none}
.ic-wa{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.incluido{margin-top:20px;padding:30px 32px;border-radius:28px;background:var(--crema);border:1px solid var(--lavanda)}
.incluido h3{margin:0;font-size:18px;color:var(--teal-oscuro)}
.incluido ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.incluido li{display:flex;gap:12px}
.inc-ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center}
.inc-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.incluido b{display:block;font-size:15px;color:var(--tinta)}
.incluido small{display:block;margin-top:2px;font-size:14px;line-height:1.45;color:var(--tinta-suave)}

/* preguntas */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-size:18px;font-weight:700;color:var(--teal-oscuro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--lavanda);color:var(--teal);display:grid;place-items:center;font-size:20px;font-weight:600;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:-6px 4px 22px;font-size:16.5px;line-height:1.6;color:var(--tinta-suave);max-width:700px}

/* cierre */
.cierre{padding:20px 24px 72px}
.cierre-in{max-width:1080px;margin:0 auto;text-align:center;padding:24px 24px 52px;display:grid;grid-template-columns:1fr;gap:36px;align-items:center;border-radius:40px;background:radial-gradient(700px 300px at 50% 0%,#fff,transparent 70%),linear-gradient(135deg,var(--lavanda),#F2EDFC)}
.cierre-marca{display:inline-block;font-size:34px;margin-bottom:18px}
.cierre-media{position:relative;width:100%;max-width:700px;margin:0 auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;box-shadow:var(--sombra-alta)}
.cierre-foto,.cierre-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cierre-video{opacity:0;transition:opacity .6s ease}
.cierre-video.ver{opacity:1}
.cierre-txt>p{margin:18px auto 30px;max-width:520px;font-size:18px;line-height:1.55;color:var(--tinta-suave)}
.cierre h2 span{color:var(--teal)}
.cierre-in>p{margin:18px auto 30px;max-width:520px;font-size:18px;line-height:1.55;color:var(--tinta-suave)}
.btn-grande{padding:18px 34px;font-size:17px}

/* pie */
.pie{border-top:1px solid var(--linea)}
.pie-in{max-width:1180px;margin:0 auto;padding:32px 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.pie-links{display:flex;gap:6px;flex-wrap:wrap}
.pie-links a{font-size:14px;color:var(--tinta-suave);text-decoration:none;padding:6px 10px;border-radius:99px}
.pie-links a:hover{color:var(--teal-oscuro);background:var(--crema)}
.pie-copy{margin:0 0 0 auto;font-size:14px;color:var(--tinta-tenue)}

/* confianza: sin tarjeta · configuración guiada · soporte */
.confianza{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.confianza li{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--tinta-suave)}
.confianza svg{width:17px;height:17px;padding:2px;border-radius:50%;background:var(--ok-fondo);color:var(--ok);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}


/* carga automática: 3 pasos */
.carga{max-width:1240px}
.carga .cab{margin-bottom:40px}
.carga-pasos{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr;align-items:stretch;gap:10px}
.cpaso{display:flex;flex-direction:column}
.cpaso-num{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:700;color:var(--teal-oscuro)}
.cpaso-num b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lavanda);color:var(--teal);font-size:14px;transition:background .3s,color .3s}
.cpaso.activo .cpaso-num b,.carga-pasos:not(.animada) .cpaso-num b{background:var(--teal);color:#fff}
.cpaso-caja{position:relative;overflow:hidden;flex:1;min-height:282px;padding:20px;border-radius:24px;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra);transition:border-color .3s,box-shadow .3s}
.cpaso.activo .cpaso-caja{border-color:var(--teal-medio);box-shadow:var(--sombra-alta),0 0 0 4px rgba(9,132,143,.08)}
.cflecha{align-self:center;display:grid;place-items:center;color:var(--teal-medio);margin-top:34px}
.cflecha svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 1. subir */
.cz-zona{height:100%;min-height:240px;padding-bottom:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px dashed var(--linea-fuerte);border-radius:18px;background:var(--superficie);text-align:center;transition:border-color .3s,background .3s}
.cz-zona b{font-size:16px;margin-top:8px}
.cz-zona small{font-size:13.5px;color:var(--tinta-suave)}
.cz-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--lavanda);color:var(--teal)}
.cz-ic svg,.cz-archivo svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cz-archivo{position:absolute;left:50%;bottom:34px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:#fff;font-size:14.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 14px 30px -10px rgba(18,58,63,.45),0 0 0 1px rgba(18,58,63,.06);transform:translateX(-50%);transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1)}
.cz-archivo>svg{color:#C63D3D}
.cz-archivo i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ok);color:#fff;transform:scale(0);transition:transform .3s}
.cz-archivo i svg{width:14px;height:14px;stroke-width:3}
.carga-pasos.llego .cz-zona{border-color:var(--teal-medio);background:var(--lavanda)}
.carga-pasos.subido .cz-zona{border-style:solid;border-color:#BEE4CF;background:var(--ok-fondo)}
.carga-pasos.subido .cz-archivo i{transform:scale(1)}
.animada:not(.llego) .cz-archivo{opacity:0;transform:translate(10%,60px) rotate(4deg)}
/* 2. datos */
.cz-form{display:flex;flex-direction:column;gap:10px}
.cz-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cz-campo span{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:4px}
.cz-campo b{display:block;height:38px;line-height:36px;padding:0 11px;border:1px solid var(--linea-fuerte);border-radius:10px;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .4s,border-color .4s,color .3s}
.animada .cz-campo:not(.ver) b{color:transparent}
.animada .cz-campo.ver b{animation:destello 1s}
@keyframes destello{0%{background:var(--lavanda);border-color:var(--teal)}100%{background:#fff;border-color:var(--linea-fuerte)}}
/* 3. calendario */
.cz-mes{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--teal-oscuro)}
.cz-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cz-d{position:relative;height:78px;padding:7px 0 0;border-radius:11px;background:var(--hoja);text-align:center;transition:background .35s,color .35s}
.cz-d small{display:block;font-size:11px;font-weight:600;color:var(--tinta-suave)}
.cz-d b{display:block;font-size:15px;margin-top:2px}
.cz-d em{position:absolute;left:4px;bottom:8px;font-style:normal;font-size:12px;font-weight:700;white-space:nowrap;z-index:1}
.animada .cz-d.oc:not(.ver) em{opacity:0}
.cz-d.oc.ver,.carga-pasos:not(.animada) .cz-d.oc{background:var(--teal);color:#fff}
.cz-d.oc.ver small,.carga-pasos:not(.animada) .cz-d.oc small{color:rgba(255,255,255,.8)}
.cz-ok{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:16px;background:var(--teal-oscuro);color:#fff;transition:opacity .4s,transform .4s}
.cz-ok>svg{flex:0 0 auto;width:28px;height:28px;padding:5px;border-radius:50%;background:var(--ok);fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.cz-ok b{display:block;font-size:14.5px}
.cz-ok small{display:block;font-size:12.5px;opacity:.75}
.animada:not(.guardado) .cz-ok{opacity:0;transform:translateY(10px)}
.carga-nota{max-width:640px;margin:32px auto 0;text-align:center;font-size:15.5px;line-height:1.55;color:var(--tinta-suave)}

/* beneficios */
.fila-ceja{display:inline-block;padding:5px 13px;border-radius:999px;background:var(--lavanda);color:var(--teal);font-size:13px;font-weight:800;letter-spacing:.04em}
.tildes li b{color:var(--teal-oscuro)}
.fila-cel::before{inset:10% 4% 6% 4%}



/* planes: alojamientos y usuarios */
.plan-precio{display:flex;align-items:baseline;gap:6px}
.plan-precio span{font-size:15px;color:var(--tinta-suave)}
.plan-spec{list-style:none;margin:18px 0 0;padding:14px 16px;border-radius:16px;background:var(--superficie);border:1px solid var(--linea);display:grid;gap:9px}
.plan-spec li{display:flex;align-items:center;gap:10px;font-size:15px}
.plan-spec svg{width:19px;height:19px;color:var(--teal);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.destacado .plan-spec{background:var(--crema);border-color:var(--lavanda)}
.plan-inc{margin:22px 0 0;font-size:14px;font-weight:700;color:var(--tinta-suave)}
.plan-c .plan-inc + .tildes{margin-top:12px}

/* cierre: cómo empezar */
.empezar{list-style:none;margin:26px auto 30px;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 14px}
.empezar li{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;font-size:15.5px;font-weight:600;color:var(--teal-oscuro);box-shadow:var(--sombra)}
.empezar b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lavanda);color:var(--teal);font-size:14px}
.cierre .confianza{margin-top:22px}

/* portada: la foto detrás de la MacBook */
.escena-foto{position:absolute;z-index:0;left:-70px;right:-70px;top:22%;bottom:-48px;width:calc(100% + 140px);height:calc(78% + 48px);object-fit:cover;object-position:50% 35%;border-radius:36px;
  box-shadow:inset 0 0 0 1px rgba(18,58,63,.06)}
.escena-video{opacity:0;transition:opacity 1s ease}
.escena-video.ver{opacity:1}
.escena .mac{z-index:1}
.escena .globo{z-index:3}
.ic-play{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ic-play path{fill:currentColor;stroke:none}

/* lo que ganás: foto + 4 beneficios */
.ganas{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;margin-bottom:24px}
.ganas-foto{position:relative;margin:0}
.ganas-grande{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover;border-radius:28px;box-shadow:var(--sombra-alta)}
.ganas-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ganas-lista li{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:20px;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra)}
.ben-ic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--lavanda);color:var(--teal)}
.ben-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ganas-lista b{display:block;font-size:19px;letter-spacing:-.02em;color:var(--teal-oscuro)}
.ganas-lista small{display:block;margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--tinta-suave)}

/* tipos de alojamiento */
.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tipo{position:relative;margin:0;border-radius:24px;overflow:hidden;background:var(--hoja);box-shadow:var(--sombra)}
.tipo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tipo:hover img{transform:scale(1.03)}
.tipo figcaption{position:absolute;left:0;right:0;bottom:0;padding:90px 20px 20px;color:#fff;background:linear-gradient(transparent,rgba(12,32,35,.55) 40%,rgba(12,32,35,.9))}
.tipo b{display:block;font-size:19px;letter-spacing:-.02em}
.tipo span{display:block;margin-top:4px;font-size:14.5px;line-height:1.45;opacity:.88}

/* paneles: algunos bloques van dentro de un rectángulo redondeado con fondo clarito */
.bloque.panel{max-width:1240px;width:calc(100% - 32px);margin:20px auto;padding:60px 56px;border-radius:40px;
  background:linear-gradient(180deg,#EDF6F7,#F3F1FB);border:1px solid #E2EEF0}
.panel .incluido{background:#fff;border-color:var(--linea)}
.carga.panel{max-width:1240px}

/* opiniones de clientes */
.opiniones{padding-top:24px;padding-bottom:36px}
.cita{position:relative;max-width:880px;margin:0 auto;padding:44px 56px 40px;border-radius:32px;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra-alta);text-align:center}
.cita .ceja{margin-bottom:18px}
.cita-ic{display:block;width:40px;height:30px;margin:0 auto 16px;fill:var(--teal-medio)}
.cita blockquote{margin:0;font-size:clamp(19px,2.3vw,26px);line-height:1.45;font-weight:600;letter-spacing:-.02em;color:var(--teal-oscuro)}
.cita figcaption{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;text-align:left}
.cita-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-oscuro));color:#fff;font-weight:800;font-size:18px}
.cita figcaption b{display:block;font-size:16px;color:var(--tinta)}
.cita figcaption small{display:block;font-size:14px;color:var(--tinta-suave)}

/* botón fijo abajo, solo en el celular */
.cta-movil{display:none}
@media (max-width:640px){
  .solo-compu{display:none!important}
  .opiniones{padding-top:16px;padding-bottom:24px}
  .cita{padding:30px 20px 28px;border-radius:24px}
  .cita-ic{width:32px;height:24px;margin-bottom:12px}
  #beneficios .fila{gap:22px}
  #beneficios .fila-txt p{margin-top:10px}
  .huesped-cel .iphone{zoom:.88}
  .ganas{gap:20px}
  .ganas-lista{gap:10px}
  .ganas-lista li{gap:12px;padding:14px 16px}
  .ben-ic{width:40px;height:40px;border-radius:12px}
  .bloque.panel{width:calc(100% - 20px);margin:12px auto;padding:44px 14px;border-radius:28px}
  .cta-movil{display:block;position:fixed;z-index:40;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linea);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .cta-movil.ver{transform:none}
  .cta-movil .btn{width:100%;box-shadow:none}
}

/* ---------- movimiento (solo si no se pidió menos movimiento) ---------- */
[data-motion] [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
[data-motion] [data-reveal][data-in]{opacity:1;transform:none}
/* la portada entra sola al cargar */
@media (prefers-reduced-motion:no-preference){.entra{animation:entrar .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}}
@keyframes entrar{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* los globitos aparecen de a uno y después flotan apenas (solo suben y bajan) */
[data-motion] .globo{opacity:0;translate:0 14px;scale:.94;transition:opacity .6s,translate .6s,scale .6s}
[data-motion] .escena[data-in] .globo{opacity:1;translate:0 0;scale:1;animation:flotar 6s ease-in-out infinite}
[data-motion] .escena[data-in] .g1{transition-delay:.9s;animation-delay:1.5s}
[data-motion] .escena[data-in] .g2{transition-delay:1.5s;animation-delay:2.1s}
[data-motion] .escena[data-in] .g3{transition-delay:2.1s;animation-delay:2.7s}
[data-motion] .escena[data-in] .g4{transition-delay:2.7s;animation-delay:3.3s}
/* tarjetas vivas: arrancan "vacías" y se arman cuando se ven */
[data-motion] .reserva .renglones li{opacity:0;transform:translateY(10px)}
[data-motion] .reserva .renglones li.ver{opacity:1;transform:none}
[data-motion] .reserva .boton-wa{opacity:.35;transform:scale(.97)}
[data-motion] .reserva.listo .boton-wa{opacity:1;transform:none}
[data-motion] .finanzas:not(.vivo) .barra i{width:0}
[data-motion] .cel .wa-msj{opacity:0;transform:translateY(14px) scale(.98)}
[data-motion] .cel .wa-msj.ver{opacity:1;transform:none}
[data-motion] .huesped-cel .globo-cel{opacity:0;translate:0 14px;scale:.94;transition:opacity .6s,translate .6s,scale .6s}
[data-motion] .huesped-cel .globo-cel.ver{opacity:1;translate:0 0;scale:1;animation:flotar 6s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- celular y tablet ---------- */
@media (max-width:960px){
  .globo-cel{left:0}
  .fila{grid-template-columns:1fr;gap:40px}
  .fila.al-reves .fila-txt{order:0}
  .fila-txt{max-width:620px}
  .planes{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan-c.destacado{order:-1}
  .incluido ul{grid-template-columns:1fr 1fr}
  .plan-quien{min-height:0}
}
@media (max-width:860px){
  .nav-links{display:none}
  .escena{padding:0 6px}
  .g4{display:none}
}
@media (max-width:640px){
  .nav-in{padding:10px 16px;gap:10px}
  .marca .wordmark{font-size:24px}
  .btn-link{padding:8px}
  .portada{padding:44px 16px 24px}
  .portada-btns .btn{flex:1 1 100%}
  .escena{margin-top:40px;padding:0 0 132px}
  .mac-tapa{width:96%;border-width:1.5px;border-radius:11px 11px 4px 4px}
  .mac-bisagra{width:92%}
  .mac-notch::after{width:3px;height:3px;margin-left:-1.5px}
  .mac-notch{border-radius:0 0 4px 4px}
  .mac-base{border-radius:2px 2px 10px 10px / 2px 2px 100% 100%}
  .globo{padding:8px 14px 8px 8px;gap:10px;border-radius:14px}
  .globo b{font-size:13.5px}
  .globo small{font-size:12px}
  .globo-ic{width:32px;height:32px;border-radius:10px}
  .globo-ic svg{width:17px;height:17px}
  .g1{top:auto;bottom:66px;left:0}
  .g2{top:auto;bottom:4px;right:0}
  .g3{display:none}
  .bloque{padding:48px 16px}
  .cab{margin-bottom:28px;text-align:left}
  .fila{padding:18px 0}
  .fila-viva::before{inset:6% -10px -4% 10px;border-radius:28px}
  .viva{padding:20px;border-radius:22px}
  .total b{font-size:28px}
  .queda b{font-size:28px}
  .wa-dia{display:none}
  .wa-msj{font-size:12.6px}
  .vch-nombre{font-size:17px}
  .wa-chat{top:104px}
  .globo-cel{left:-6px;top:auto;bottom:6%}
  .plan-c{padding:26px 22px;border-radius:24px}
  .incluido{padding:24px 20px;border-radius:24px}
  .incluido ul{grid-template-columns:1fr}
  .faq summary{font-size:16.5px;padding:18px 2px}
  .cierre{padding:12px 10px 56px}
  .cierre-in{padding:52px 20px;border-radius:28px}
  .pie-in{padding:28px 16px;gap:16px}
  .pie-copy{margin:0;width:100%}
}

@media (max-width:860px){
}
@media (max-width:960px){
  .ganas{grid-template-columns:1fr;gap:28px}
  .ganas-grande{aspect-ratio:4/3}
  .tipos{grid-template-columns:1fr 1fr}
  .carga-pasos{grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:8px}
  .cflecha{margin:0;transform:rotate(90deg)}
  .cpaso-caja{min-height:0}
  .cz-zona{min-height:220px}
}
@media (max-width:640px){
  .portada h1 br,.bloque h2 br,.cierre h2 br{display:none}
  .portada h1 span,.bloque h2 span,.cierre h2 span{display:block}
  .portada-btns{margin-top:26px}
  .confianza{gap:8px 14px}
  .confianza li{font-size:13.5px}
  .empezar{flex-direction:column;align-items:stretch;max-width:300px}
  .carga-nota{text-align:left}
  .escena-foto{left:-16px;right:-16px;width:calc(100% + 32px);top:18%;bottom:auto;height:82%;border-radius:24px}
  .ganas-lista li{padding:16px 18px}
  .cierre-in{padding:20px 16px 44px}
  .cierre-media{border-radius:20px}
  .ganas-lista b{font-size:17.5px}
  .tipos{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .tipos::-webkit-scrollbar{display:none}
  .tipo{flex:0 0 76%;scroll-snap-align:start}
}

/* ======================================================================
   La app "en vivo" dentro de la MacBook (lienzo de 1300×844, se achica).
   Imita las pantallas reales de aloia: franja, menú, hoja, calendario.
   ====================================================================== */
.demo{position:absolute;inset:0;overflow:hidden}
.ap{position:absolute;top:0;left:0;transform-origin:0 0;background:var(--teal);font-family:var(--sans);color:var(--tinta);font-size:15px;overflow:hidden;text-align:left;line-height:1.35}
.ap svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ap-franja{position:absolute;top:0;left:0;right:0;height:76px;display:flex;align-items:center;gap:16px;padding:0 28px;color:#fff}
.ap-marca{display:flex;flex-direction:column;line-height:1}
.ap-marca .wordmark{font-size:26px;color:#fff}
.ap-marca .wordmark i{color:var(--violeta-suave)}
.ap-marca .by{font-size:10px;opacity:.7;margin-top:3px}
.ap-sep{width:1px;height:30px;background:rgba(255,255,255,.25)}
.ap-neg{display:flex;flex-direction:column;line-height:1.2}
.ap-neg b{font-size:16px}
.ap-neg small{font-size:12px;opacity:.7}
.ap-salir{margin-left:auto;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);font-size:13px;font-weight:600}
.ap-menu{position:absolute;top:76px;left:0;bottom:0;width:232px;padding:6px 14px 22px;display:flex;flex-direction:column;gap:4px}
.ap-tab{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:999px;color:rgba(255,255,255,.86);font-size:15.5px;font-weight:500}
.ap-tab svg{width:19px;height:19px}
.ap-tab.on{background:#fff;color:#066670;font-weight:600}
.ap-config{margin-top:auto}
.ap-hoja{position:absolute;top:76px;left:232px;right:0;bottom:0;background:var(--hoja);border-radius:28px 0 0 0;padding:26px 40px}
.ap-saludo{display:flex;align-items:flex-start;justify-content:space-between}
.ap-saludo h1{margin:0;font-size:31px;letter-spacing:-.02em;color:var(--teal-oscuro)}
.ap-saludo p{margin:4px 0 10px;font-size:15px;color:var(--tinta)}
.ap-chip{display:inline-block;padding:6px 14px;border-radius:999px;background:#fff;font-size:13px;border:1px solid var(--linea)}
.ap-btn{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;font-size:15px;transition:transform .15s,background .15s}
.ap-btn-sec{display:inline-flex;align-items:center;padding:9px 18px;border-radius:999px;background:#fff;color:var(--teal-oscuro);font-weight:600;font-size:14px;border:1px solid var(--linea-fuerte)}
.apretado{transform:scale(.94);background:var(--teal-hover)}
.ap-hoy{margin-top:16px;background:#fff;border-radius:18px;box-shadow:var(--sombra)}
.ap-hoy-top{padding:18px 24px 14px;text-align:center}
.ap-pill{display:block;color:var(--teal);font-weight:700;font-size:15px}
.ap-hoy-top b{display:block;font-size:30px;letter-spacing:-.02em;color:var(--teal-oscuro);margin-top:2px}
.ap-hoy-pie{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid var(--linea);font-size:14.5px;color:var(--tinta-suave)}
.ap-hoy-pie small{font-size:14px;margin-right:6px}
.ap-hoy-pie b{color:var(--tinta)}
.ap-tag{font-style:normal;margin-left:8px;padding:3px 10px;border-radius:999px;background:var(--ambar-fondo);color:var(--ambar);font-size:12px;font-weight:700}
.ap-cal{margin-top:16px;background:#fff;border-radius:18px;padding:16px 18px 18px;box-shadow:var(--sombra)}
.ap-cal-tit{display:flex;align-items:baseline;gap:10px;margin:0 2px 8px}
.ap-cal-tit b{font-size:19px;color:var(--teal-oscuro)}
.ap-cal-tit small{font-size:13px;color:var(--tinta-suave)}
.ap-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:6px}
.ap-sem span{text-align:center;font-size:12px;font-weight:600;color:var(--tinta-suave)}
.ap-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.dd{position:relative;height:56px;border-radius:12px;background:var(--hoja);padding:6px 10px;overflow:hidden;color:var(--tinta)}
.dd.vacio{background:transparent}
.sem6 .dd{height:47px}
.sem6 .dd .nm{bottom:4px}
.sem4 .dd{height:64px}
.dd .num{font-size:14px;font-weight:700}
.dd .nm{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12.5px;font-weight:600}
.dd .libre{font-weight:500;color:var(--tinta-tenue);font-size:12px}
.dd.occ{background:var(--teal);color:#fff}
.dd.occ.fin{background:#959DA0}
.dd.sale{background:linear-gradient(var(--salida) 0 50%,var(--hoja) 50%);color:var(--salida-tinta)}
.dd.sale.fin{background:linear-gradient(#E3E6E7 0 50%,var(--hoja) 50%);color:var(--tinta-suave)}
.dd.sale .nm{top:22px;bottom:auto;font-size:12px}
.dd.sale .nm em{font-style:normal;font-size:9.5px;letter-spacing:.06em;margin-right:2px}
.dd.sale .abajo{position:absolute;left:0;right:0;top:20px;font-size:11px;color:var(--tinta-tenue)}
.dd.sale:not(.fin) .nm{top:6px;left:30px;text-align:left}
.dd.hoy{background:var(--lavanda);box-shadow:inset 0 0 0 2px var(--teal-oscuro)}
.dd.hoy .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--teal-oscuro);color:#fff;font-size:13px;margin:-2px 0 0 -4px}
/* la reserva nueva: arranca como día libre y se pinta cuando se guarda */
.dd.nueva{transition:background .45s,color .45s}
.dd.nueva:not(.ver){background:var(--hoja);color:var(--tinta)}
.dd.nueva:not(.ver) .nm{opacity:0}
.dd.nueva:not(.ver)::after{content:'Disponible';position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:12px;color:var(--tinta-tenue)}
.dd.nueva.ver .nm{animation:aparece .45s both}
@keyframes aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* formulario */
.ap-velo{position:absolute;inset:0;background:rgba(18,58,63,.38);opacity:0;transition:opacity .3s;pointer-events:none}
.ap-modal{position:absolute;left:50%;top:34px;width:660px;margin-left:-330px;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(18,58,63,.35);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
.con-modal .ap-velo{opacity:1}
.con-modal .ap-modal{opacity:1;transform:none}
.ap-modal-cab{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--linea)}
.ap-modal-cab b{font-size:19px;color:var(--teal-oscuro)}
.ap-x{width:30px;height:30px;border-radius:50%;border:1px solid var(--linea-fuerte);display:grid;place-items:center;font-size:18px;line-height:1}
.ap-modal-cuerpo{padding:16px 22px 6px}
.ap-subir{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px dashed var(--linea-fuerte);border-radius:16px;background:var(--superficie);transition:border-color .3s,background .3s}
.ap-subir b{display:block;font-size:15.5px}
.ap-subir small{display:block;font-size:13px;color:var(--tinta-suave);margin-top:2px}
.ap-subir-ic{width:40px;height:40px;border-radius:12px;background:var(--lavanda);color:var(--teal);display:grid;place-items:center;flex:0 0 auto}
.ap-subir-ic svg{width:22px;height:22px}
.ap-spin{margin-left:auto;width:22px;height:22px;border-radius:50%;border:3px solid var(--lavanda);border-top-color:var(--teal);opacity:0}
.ap-subir.leyendo{border-color:var(--teal-medio);background:var(--lavanda)}
.ap-subir.leyendo .ap-spin{opacity:1;animation:girar .8s linear infinite}
.ap-subir.listo{border-style:solid;border-color:#BEE4CF;background:var(--ok-fondo)}
.ap-subir.listo .ap-subir-ic{background:#fff;color:var(--ok)}
@keyframes girar{to{transform:rotate(360deg)}}
.ap-form{margin-top:14px;border-left:4px solid var(--teal-medio);border-radius:14px;background:var(--superficie);padding:12px 16px 14px}
.ap-leyenda{margin:0 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--teal)}
.ap-fila3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}
.ap-campo span:first-child{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:5px}
.ap-input{display:block;height:42px;line-height:40px;padding:0 12px;border:1px solid var(--linea-fuerte);border-radius:10px;background:#fff;font-size:14.5px;white-space:nowrap;overflow:hidden;transition:background .5s,border-color .5s}
.ap-input i{font-style:normal;color:var(--tinta-tenue)}
.ap-input.sel{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B70' stroke-width='2'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center/16px}
.ap-input.lleno{font-weight:600;color:var(--tinta)}
.flash{background:var(--lavanda)!important;border-color:var(--teal)!important}
.ap-huesp{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;margin-bottom:10px;border:1px solid var(--linea);border-radius:12px;background:#fff}
.ap-huesp b{display:block;font-size:15px}
.ap-huesp small{font-size:12px;color:var(--tinta-suave)}
.ap-step{display:flex;align-items:center;gap:14px}
.ap-step i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--teal);color:var(--teal);display:grid;place-items:center;font-style:normal;font-size:17px}
.ap-step b{min-width:16px;text-align:center;font-size:17px;border-radius:6px;transition:background .5s}
.ap-modal-pie{display:flex;justify-content:flex-end;gap:10px;padding:12px 22px 18px}
/* el PDF que se suelta */
.ap-archivo{position:absolute;left:820px;top:430px;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#fff;font-size:14px;font-weight:600;
  box-shadow:0 14px 30px -8px rgba(18,58,63,.45);opacity:0;transform:translate(160px,120px) rotate(0deg);transition:opacity .4s,transform .8s cubic-bezier(.2,.7,.2,1)}
.ap-archivo svg{width:20px;height:20px;color:#C63D3D}
.ap-archivo.ver{opacity:1;transform:none;left:490px;top:150px}
.ap-archivo.suelto{opacity:0;transform:scale(.6)}
/* avisos */
.ap-toast{position:absolute;left:50%;bottom:30px;display:flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border-radius:16px;background:var(--teal-oscuro);color:#fff;
  box-shadow:0 18px 40px -10px rgba(18,58,63,.6);opacity:0;transform:translate(-50%,20px);transition:opacity .4s,transform .4s}
.ap-toast svg{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--ok);stroke-width:2.6}
.ap-toast b{display:block;font-size:15px}
.ap-toast small{display:block;font-size:13px;opacity:.75}
.ap-toast.ver{opacity:1;transform:translate(-50%,0)}
.ap-aviso{position:absolute;right:30px;bottom:96px;width:330px;padding:14px 18px;border-radius:16px;background:#fff;font-size:14px;line-height:1.45;box-shadow:0 18px 40px -12px rgba(18,58,63,.4);
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.ap-aviso.ver{opacity:1;transform:none}
.ap-campana{position:absolute;right:30px;bottom:30px;width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(9,132,143,.8)}
.ap-campana svg{width:24px;height:24px}
.ap-campana i{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--violeta);color:#fff;font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.ap-cursor{position:absolute;left:1040px;top:620px;width:30px;height:30px;margin:-4px 0 0 -6px;transition:left .8s cubic-bezier(.45,.05,.25,1),top .8s cubic-bezier(.45,.05,.25,1);z-index:9;pointer-events:none}
.ap-cursor svg{width:30px;height:30px;fill:#111;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.ap-cursor.click svg{transform:scale(.85);transition:transform .1s}