/* Pantalla de entrar / crear cuenta / recuperar: formulario a la izquierda, demo animada a la derecha */
body.entrar { background: var(--white); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100vh; }
.lado-form { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px); }
.lado-form .logo img { height: 30px; width: auto; }
.form-caja { width: 100%; max-width: 400px; margin: auto; padding: 32px 0; }
.form-caja.cambia { animation: aparece .45s cubic-bezier(.2,.8,.2,1); }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
.form-caja h1 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.form-caja .sub { margin: 0; color: var(--text); }

.sociales { display: grid; gap: 10px; margin-top: 26px; }
.sociales[hidden], .o[hidden] { display: none; }
.social {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
  transition: border-color .2s, background .2s, transform .15s;
}
.social:hover { border-color: #cfd8d3; background: #fafcfb; }
.social:active { transform: scale(.98); }
.social svg { width: 20px; height: 20px; }
.o { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--grey); font-size: 13px; }
.o::before, .o::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.campo { display: block; margin-bottom: 14px; }
.campo[hidden] { display: none; }
.campo > span:first-child { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.campo > span.fila { display: flex; justify-content: space-between; align-items: baseline; }
.campo .fila a { font-weight: 600; color: #047857; text-decoration: none; font-size: 13px; }
.campo .fila a[hidden] { display: none; }
.campo input {
  width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px;
  font: 500 15px/1.2 var(--body); color: var(--ink); background: var(--white); outline: 0; transition: border-color .2s, box-shadow .2s;
}
.campo input:focus { border-color: var(--emerald); box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.clave { position: relative; display: block; }
.clave input { padding-right: 76px; }
.ver { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: var(--card); border-radius: 9px; padding: 7px 10px; font: 600 12px/1 var(--body); color: var(--text); cursor: pointer; }

.fuerza { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.fuerza[hidden] { display: none; }
.fuerza i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.fuerza small { min-width: 70px; text-align: right; font-size: 12px; color: var(--grey); }
.fuerza[data-n="1"] i:nth-child(-n+1) { background: #f97316; }
.fuerza[data-n="2"] i:nth-child(-n+2) { background: #eab308; }
.fuerza[data-n="3"] i:nth-child(-n+3) { background: var(--emerald); }
.fuerza[data-n="4"] i:nth-child(-n+4) { background: #047857; }

.aviso, .exito { min-height: 20px; margin: 2px 0 12px; font-size: 13.5px; font-weight: 600; }
.aviso { color: #b45309; }
.exito { color: #047857; }
.exito a { color: inherit; }
.aviso:empty, .exito:empty { min-height: 0; margin: 0; }
.pie { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--text); }
.pie a { color: #047857; font-weight: 700; text-decoration: none; }
.legal { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--grey); }
.legal[hidden] { display: none; }

/* ---- Lado derecho: el teléfono «vende solo» (ventas, visitas, avisos y confeti) ---- */
.lado-demo {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
  padding: 26px 24px 0; height: 100vh; color: var(--leaf);
  background: radial-gradient(600px 420px at 50% 38%, rgba(62,232,168,.32), transparent 65%), radial-gradient(900px 600px at 100% 0%, rgba(16,185,129,.25), transparent 60%), var(--forest);
}
.escena { --th0: clamp(440px, calc(100vh - 230px), 640px); --tw0: calc(var(--th0) * .484); --tw: var(--tw0); --th: var(--th0); position: relative; width: 500px; height: calc(var(--th) + 20px); flex: none; }
.orbita[hidden] { display: none; }
.orbita { position: absolute; inset: -10px 0 0; animation: gira 40s linear infinite; }
.red {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
  transform: rotate(calc(var(--k) * 60deg)) translateY(calc(var(--th) * -.5 - 4px)) rotate(calc(var(--k) * -60deg));
}
.red svg { width: 22px; height: 22px; fill: var(--c); animation: gira 40s linear infinite reverse; }
@keyframes gira { to { transform: rotate(360deg); } }

.tel {
  position: absolute; left: 50%; top: 10px; margin-left: calc(var(--tw) / -2); width: var(--tw); height: var(--th); border-radius: 54px; padding: 10px; border: 6px solid transparent;
  /* marco de titanio: varias capas de gris con brillo arriba a la izquierda y sombra abajo a la derecha */
  background:
    linear-gradient(#050606, #050606) padding-box,
    linear-gradient(145deg, #fdfdfd 0%, #c9cecc 12%, #8d9391 30%, #e6e9e8 48%, #7c8280 66%, #b7bcba 84%, #eef0ef 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 1px #2f3432,
    0 0 0 2px rgba(255,255,255,.08),
    0 50px 90px -30px rgba(0,0,0,.75);
}
/* botones laterales del marco */
.tel::before, .tel::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6f7573, #d3d7d5 60%, #8a908e); }
.tel::before { left: -10px; top: 21%; height: 9%; box-shadow: 0 calc(var(--th) * .12) 0 0 #a3a9a7; }
.tel::after { right: -10px; top: 27%; height: 14%; }
.isla { position: absolute; z-index: 2; top: 18px; left: 50%; transform: translateX(-50%); width: 74px; height: 21px; border-radius: 20px; background: #000; }
@keyframes flota { 50% { transform: translateY(-10px); } }

/* ---- La app dentro del teléfono, usándose sola ---- */
/* clip-path recorta de verdad las esquinas: con solo overflow:hidden, lo que se mueve dentro se sale por las esquinas */
.pant { --acento: #06301f; position: relative; height: 100%; border-radius: 40px; background: #f6f8f7; overflow: hidden; clip-path: inset(0 round 40px); isolation: isolate; color: var(--ink); font-size: 12px; }
.scr { position: absolute; inset: 0; background: #f6f8f7; padding: 46px 14px 16px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(18px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.scr.on { opacity: 1; transform: none; }
.app-top { font-size: 15px; font-weight: 800; text-align: center; letter-spacing: -.01em; }
.app-btn { margin-top: auto; display: block; text-align: center; background: var(--acento); color: #fff; border-radius: 12px; padding: 11px; font-weight: 700; font-size: 12.5px; transition: transform .15s, background .3s; }
.pulsado { transform: scale(.94) !important; }

/* 1 · plantillas */
.grid-pl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { position: relative; aspect-ratio: 3 / 4.4; border-radius: 12px; background: var(--img) center top / cover; box-shadow: 0 0 0 2px transparent, 0 6px 14px -8px rgba(0,0,0,.4); transition: box-shadow .25s, transform .15s; overflow: hidden; }
.tile b { position: absolute; left: 6px; bottom: 6px; background: rgba(255,255,255,.92); border-radius: 6px; padding: 3px 6px; font-size: 10px; }
.tile.elegida { box-shadow: 0 0 0 3px var(--emerald), 0 6px 14px -8px rgba(0,0,0,.4); }
.tile.elegida::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--emerald); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 11px; animation: pop .35s cubic-bezier(.3,1.7,.5,1); }
@keyframes pop { from { transform: scale(0); } }

/* 2 · nombre */
.fondo-pl { position: absolute; inset: 0; background: center top / cover no-repeat; }
.s2 .fondo-pl, [data-s="2"] .fondo-pl { filter: brightness(.55); }
.hoja { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 22px 22px 0 0; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.4); }
.hoja small { font-size: 10.5px; font-weight: 600; color: var(--grey); }
.hoja small b { color: #047857; }
.campo-demo { display: flex; align-items: center; min-height: 38px; border: 2px solid var(--emerald); border-radius: 10px; padding: 8px 10px; font-size: 14px; font-weight: 700; transition: transform .15s; }
.cursor { width: 2px; height: 16px; margin-left: 1px; background: var(--emerald); animation: parpadea 1s steps(1) infinite; }
@keyframes parpadea { 50% { opacity: 0; } }
.colores-demo { display: flex; gap: 10px; }
.colores-demo i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); transition: box-shadow .2s, transform .15s; }
.colores-demo i.activo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--emerald); }

/* 3 · widgets */
/* La pantalla es la plantilla real de Café Raíz: arriba su portada y perfil, debajo los widgets nuevos con su estilo */
.scr.s3 { background: #faf6f0; padding: 0; gap: 0; }
.fr-demo { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #faf6f0; pointer-events: none; }
.chips { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; background: #fff; border-radius: 16px; padding: 8px; box-shadow: 0 -6px 24px -10px rgba(0,0,0,.35); }
.chips-tit { grid-column: 1 / -1; font-size: 11px; color: #8c8072; text-align: center; }
.chip { border: 2px solid var(--line); border-radius: 10px; padding: 7px 2px; text-align: center; font-weight: 700; font-size: 11px; white-space: nowrap; transition: border-color .2s, background .2s, transform .15s; }
.chip.listo { border-color: var(--emerald); background: var(--leaf); }
.chips.abajo { transform: translateY(130%); opacity: 0; }

/* 4 · redes */
.redes-demo { display: flex; flex-direction: column; gap: 7px; }
.redes-demo > div { display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 12px; padding: 8px 10px; }
.redes-demo i { width: 28px; height: 28px; border-radius: 8px; background: #f3f5f4; display: grid; place-items: center; flex: none; }
.redes-demo svg, .destinos svg { width: 16px; height: 16px; fill: var(--c); }
.redes-demo span { flex: 1; font-weight: 700; font-size: 12px; }
.redes-demo small { display: block; font-weight: 500; font-size: 10px; color: var(--grey); }
.sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #d5dbd8; transition: background .25s, transform .15s; flex: none; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.sw.activo { background: #22c55e; }
.sw.activo::after { transform: translateX(14px); }

/* 5 · publicar */
.post-demo { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 0 0 1px var(--line); }
.pd-foto { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: url(/app/demo/food.webp) center 2% / 290% auto; }
.post-demo p { margin: 7px 2px 0; font-size: 11px; color: var(--text); }
.destinos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; justify-items: center; }
.destinos i { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #dfe8e3; transition: box-shadow .3s; }
.destinos i::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; color: #fff; font: 800 8px/13px var(--body); text-align: center; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.destinos i.listo { box-shadow: 0 0 0 2px #22c55e; }
.destinos i.listo::after { transform: scale(1); }

/* el dedo que va guiando */
.dedo { position: absolute; z-index: 5; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid rgba(0,0,0,.28); box-shadow: 0 6px 16px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: transform .65s cubic-bezier(.45,.05,.3,1), opacity .3s; transform: translate(150px, 420px); }
.dedo.ve { opacity: 1; }
.dedo.arrastra { background: rgba(255,255,255,.75); box-shadow: 0 0 0 6px rgba(62,232,168,.35), 0 6px 16px rgba(0,0,0,.3); transition-timing-function: cubic-bezier(.3,.1,.3,1); }
.dedo.pulsa::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 3px solid var(--mint); animation: onda .5s ease-out forwards; }
@keyframes onda { from { transform: scale(.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }

/* texto del paso y barra de progreso */
/* altura fija: así el teléfono no sube ni baja cuando cambia el texto del paso */
.paso-txt { text-align: center; width: 100%; max-width: 520px; height: 112px; flex: none; overflow: hidden; }
.paso-txt p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paso-txt.va { animation: cambiaPaso .5s cubic-bezier(.2,.8,.2,1); }
@keyframes cambiaPaso { from { opacity: 0; } }
.paso-n { display: inline-block; background: rgba(62,232,168,.16); color: var(--mint); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; }
.paso-txt h2 { margin: 10px 0 0; white-space: nowrap; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.paso-txt p { margin: 8px 0 0; color: var(--leaf); opacity: .85; }
.barra-pasos { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); display: flex; gap: 6px; }
.barra-pasos i { width: 34px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.18); overflow: hidden; position: relative; }
.barra-pasos i.hecho { background: var(--mint); }
.barra-pasos i.ahora::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform-origin: left; animation: llena 4.5s linear forwards; }
@keyframes llena { from { transform: scaleX(0); } }

/* lo de vender solo aparece en el último paso */
.stat, .notis { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
body.vendiendo .stat, body.vendiendo .notis { opacity: 1; transform: none; }

/* números que suben */
.stat { position: absolute; z-index: 4; background: var(--white); color: var(--ink); border-radius: 18px; padding: 12px 16px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); }
.stat small { display: block; font-size: 11.5px; font-weight: 600; color: var(--grey); }
.stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-dinero { left: -36px; top: 96px; }
.st-dinero b { color: #047857; }
.sube { position: absolute; right: 12px; top: -12px; background: #22c55e; color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 9px; opacity: 0; }
.sube.va { animation: sube 1.6s ease forwards; }
@keyframes sube { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.st-visitas { right: -30px; top: 40px; }
.spark { display: block; width: 90px; height: 24px; margin-top: 4px; }
.spark path { fill: none; stroke: var(--emerald); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; animation: traza 2.4s ease-in-out infinite alternate; }
@keyframes traza { from { stroke-dashoffset: 120; } }

/* avisos en directo */
.notis { position: absolute; z-index: 5; right: -60px; bottom: 30px; width: 250px; display: flex; flex-direction: column; gap: 8px; }
.noti {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.97); color: var(--ink); border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.7); animation: entraNoti .5s cubic-bezier(.2,1.3,.4,1); transition: opacity .3s, transform .3s;
}
.noti:nth-child(2) { opacity: .85; transform: scale(.97); }
.noti:nth-child(3) { opacity: .6; transform: scale(.94); }
.noti.verde { box-shadow: 0 0 0 2px #22c55e, 0 18px 40px -20px rgba(0,0,0,.7); }
.noti.sale { animation: saleNoti .4s ease forwards; }
.ni { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--leaf); display: grid; place-items: center; font-size: 16px; }
.noti b { display: block; font-size: 13px; }
.noti small { display: block; font-size: 11.5px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ahora { margin-left: auto; align-self: flex-start; font-size: 10.5px; color: var(--grey); }
@keyframes entraNoti { from { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes saleNoti { to { opacity: 0; transform: translateY(14px) scale(.9); } }

/* confeti en cada venta */
.confeti { position: absolute; z-index: 6; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.confeti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: confeti var(--d) cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes confeti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 260px)) rotate(var(--r)); opacity: 0; } }

@media (max-height: 700px) { .paso-txt p { display: none; } .paso-txt { height: 78px; } }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .lado-demo { display: none; }
  body.entrar { background: radial-gradient(900px 500px at 90% -10%, rgba(62,232,168,.22), transparent 60%), var(--white); }
}


/* Mensaje junto al teléfono: sin caja; las letras van apareciendo como si alguien lo escribiera */
.mensaje {
  position: absolute; z-index: 5; top: 38%; width: 150px; left: calc(250px + var(--tw) / 2 + 22px);
  color: var(--white); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
/* un mensaje sí y otro no sale a la izquierda, alineado hacia el teléfono */
.mensaje.izq { left: calc(250px - var(--tw) / 2 - 22px - 150px); text-align: right; }
.mensaje.izq i { margin-left: auto; }
body.mostrando .mensaje { opacity: 1; transform: none; }
body.mostrando .mensaje.fuera { opacity: 0; transform: translateY(8px); }
.mensaje i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 14px; background: rgba(62,232,168,.16); font-style: normal; font-size: 20px; transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.mensaje.va i { animation: icono .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes icono { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.mensaje b { display: block; min-height: 2.4em; font-size: 17px; line-height: 1.22; font-weight: 800; letter-spacing: -.015em; }
.mensaje b em { font-style: normal; color: var(--mint); }
.mensaje b::after { content: ""; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -2px; background: var(--mint); animation: parpadea 1s steps(1) infinite; }
.mensaje.listo b::after { display: none; }
.mensaje small { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: var(--leaf); opacity: 0; transform: translateY(6px); }
/* solo se anima al aparecer: al cambiar de mensaje la frase vieja desaparece al instante */
.mensaje.listo small { opacity: .85; transform: none; transition: opacity .5s, transform .5s; }