/* Vitrina · portada pública */
.portada { overflow-x: hidden; }
.p-in { width: min(1120px, 100%); margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); }
.btn.grande { padding: 15px 22px; font-size: 16px; border-radius: 14px; }
.btn.amarillo { background: var(--tag); color: var(--tag-ink); }

/* Barra superior */
.p-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.p-top .p-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.p-marca { font-family: var(--font-display); font-size: 24px; color: var(--ink); text-decoration: none; }
.p-marca b { color: var(--accent); font-weight: 400; }
.p-nav { display: flex; gap: 20px; margin-left: 12px; }
.p-nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.p-nav a:hover { color: var(--ink); }
.p-acceso { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.p-acceso .btn { padding: 10px 14px; font-size: 14px; }
.p-entrar { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 14.5px; }
@media (max-width: 820px) { .p-nav { display: none; } }

/* Hero */
.p-hero { padding: 48px 0 64px; overflow-x: clip; }
.p-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; }
.estados { display: flex; gap: 3px; margin-bottom: 22px; max-width: 460px; }
.estados i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.estados i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left;
  animation: llenar .28s linear forwards; animation-delay: calc(var(--i) * 90ms + 300ms); }
@keyframes llenar { to { transform: scaleX(1); } }
.p-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 6.4vw, 70px); line-height: 1.02; letter-spacing: -.015em; max-width: 12ch; }
.p-lead { font-size: clamp(17px, 2vw, 19px); color: var(--muted); max-width: 44ch; margin: 20px 0 26px; }
.p-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.p-nota { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); font-weight: 600; }

/* Celular de muestra */
.p-demo { position: relative; display: grid; justify-items: center; padding: 10px 0 0; }
.p-demo::before { content: ""; position: absolute; width: min(460px, 108vw); aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -52%);
  border: 4px dashed color-mix(in srgb, var(--accent) 55%, transparent); z-index: -1; }
.p-demo::after { content: ""; position: absolute; width: min(380px, 92vw); aspect-ratio: 1; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -52%);
  background: color-mix(in srgb, var(--tag) 45%, var(--bg)); z-index: -2; }
.tel { position: relative; width: 300px; height: 612px; border-radius: 46px; background: #120a18; padding: 11px; box-shadow: 0 30px 60px -24px rgba(36,22,47,.55); }
.tel-isla { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 20px; background: #120a18; z-index: 5; }
.tel-pantalla { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #f7f3f9; color: #24162f; font-size: 12px; }
.t-vista { position: absolute; inset: 0; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.t-catalogo { padding: 44px 12px 12px; overflow: hidden; }
.t-cab { display: flex; gap: 9px; align-items: center; margin-bottom: 10px; }
.t-cab b, .wa-cab b { display: block; font-size: 13.5px; }
.t-cab small, .wa-cab small { color: #6c5d78; font-size: 11px; }
.t-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #d6336c; color: #fff; font-family: var(--font-display); flex: none;
  box-shadow: 0 0 0 2px #f7f3f9, 0 0 0 4px #d6336c; }
.t-chips { display: flex; gap: 5px; margin-bottom: 10px; overflow: hidden; }
.t-chips span { border: 1px solid #e2d8e9; background: #fff; border-radius: 999px; padding: 4px 9px; font-weight: 700; font-size: 11px; white-space: nowrap; }
.t-chips .on { background: #24162f; color: #fff; border-color: #24162f; }
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-prod { display: grid; gap: 3px; text-align: left; border: 0; background: #fff; border-radius: 14px; padding: 6px 6px 8px; color: inherit; font-size: 12px;
  box-shadow: 0 1px 0 #e2d8e9; transition: transform .15s, box-shadow .15s; }
.t-prod:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(36,22,47,.4); }
.t-prod.elegido { box-shadow: 0 0 0 2px #d6336c; }
.t-n { font-weight: 700; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-p { font-weight: 800; padding: 0 2px; }
.t-p s { color: #8c7f97; font-weight: 600; font-size: 11px; }
.t-foto { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.t-foto i { position: absolute; inset: 12%; background: var(--dibujo) center / contain no-repeat; }
.t-foto em { position: absolute; top: 6px; left: 6px; z-index: 1; font-style: normal; font-size: 10px; font-weight: 800; background: #ffd84d; color: #24162f; padding: 1px 6px; border-radius: 6px; }
.t-foto.grande { border-radius: 0; aspect-ratio: 1 / .92; }

.t-ficha { z-index: 4; background: #fff; transform: translateY(102%); overflow: hidden; }
.t-volver { position: absolute; top: 40px; left: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 22px; line-height: 1; color: #24162f; }
.t-ficha-txt { padding: 12px 14px; display: grid; gap: 4px; }
.t-ficha-txt > b { font-size: 16px; }
.t-ficha-txt .t-p { font-size: 15px; padding: 0; color: #d6336c; }
.t-ficha-txt small { margin-top: 6px; color: #6c5d78; font-weight: 700; }
.t-colores { display: flex; gap: 8px; }
.t-colores i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); border: 1px solid #d8cde0; }
.t-colores i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #24162f; }
.t-tallas { display: flex; gap: 6px; }
.t-tallas button { width: 38px; height: 32px; border-radius: 9px; border: 1.5px solid #e2d8e9; background: #fff; font-weight: 800; font-size: 12px; color: #24162f; }
.t-tallas button.on { background: #24162f; color: #fff; border-color: #24162f; }
.t-tallas button:disabled { text-decoration: line-through; opacity: .45; }
.t-agregar { margin-top: 10px; border: 0; border-radius: 12px; background: #d6336c; color: #fff; font-weight: 800; padding: 11px; font-size: 13px; }

.t-barra { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; background: #24162f; color: #fff;
  border-radius: 16px; padding: 9px 9px 9px 13px; transform: translateY(140%); transition: transform .38s cubic-bezier(.2,.8,.2,1); }
.t-barra span { flex: 1; display: grid; }
.t-barra small { color: #d9c9e6; font-size: 10.5px; }
.t-barra button { border: 0; border-radius: 11px; background: #25d366; color: #0b2e18; font-weight: 800; font-size: 12px; padding: 9px 10px; }

.t-wa { z-index: 5; background: #efe7dd; transform: translateX(102%); display: flex; flex-direction: column; }
.wa-cab { display: flex; gap: 9px; align-items: center; background: #0b6b5d; color: #fff; padding: 42px 12px 10px; }
.wa-cab small { color: #cde9e2; }
.wa-cab .t-av { box-shadow: none; }
.wa-chat { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; justify-content: flex-start; }
.wa-msg { align-self: flex-end; max-width: 92%; background: #d9fdd3; border-radius: 12px 4px 12px 12px; padding: 8px 10px 6px; display: grid; gap: 2px; font-size: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.wa-msg small { justify-self: end; color: #5b8a74; font-size: 10px; }
.wa-otra { margin: 0 12px 16px; border: 0; border-radius: 12px; background: #fff; color: #24162f; font-weight: 800; padding: 10px; }

.tel[data-paso="ficha"] .t-ficha { transform: none; }
.tel[data-paso="carrito"] .t-barra, .tel[data-paso="whatsapp"] .t-barra { transform: none; }
.tel[data-paso="whatsapp"] .t-wa { transform: none; }
.tel[data-paso="whatsapp"] .t-barra { opacity: 0; }

.aviso-pedido { position: absolute; z-index: 6; bottom: 150px; left: max(0px, calc(50% - 270px)); display: flex; gap: 10px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px 10px 10px; box-shadow: 0 18px 36px -18px rgba(36,22,47,.5);
  opacity: 0; transform: translateY(10px) scale(.96); transition: .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.aviso-pedido.ver { opacity: 1; transform: none; }
.ap-ico { width: 36px; height: 36px; border-radius: 12px; background: #25d366; display: grid; place-items: center; font-size: 18px; }
.aviso-pedido b { display: block; font-size: 14px; }
.aviso-pedido small { color: var(--muted); font-size: 12.5px; }
.p-demo-pista { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.p-demo-pista::before { content: "👆 "; }

@media (max-width: 900px) {
  .p-hero { padding-top: 28px; }
  .p-hero-in { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .aviso-pedido { left: 0; bottom: 130px; }
}
@media (max-width: 360px) { .tel { transform: scale(.92); transform-origin: top center; margin-bottom: -48px; } }

/* Secciones */
.p-sec { padding: 64px 0; }
.p-sec h2, .p-final h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.08; letter-spacing: -.01em; max-width: 18ch; }

.p-antes { background: var(--surface); border-block: 1px solid var(--line); }
.selector { display: inline-flex; gap: 4px; padding: 4px; margin: 24px 0 22px; background: var(--surface-2); border-radius: 14px; flex-wrap: wrap; }
.selector button { border: 0; background: none; border-radius: 11px; padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--muted); }
.selector button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.chat-comparar { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: center; }
.cc-chat { background: #efe7dd; border-radius: 22px; padding: 18px 14px; display: flex; flex-direction: column; gap: 7px; min-height: 290px; justify-content: center; }
.cc-chat p { margin: 0; max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 14px; color: #1d1d1d; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.cc-chat .in { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.cc-chat .out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 4px; }
.cc-chat .pedido-msg { max-width: 92%; line-height: 1.55; }
.cc-txt p { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; margin: 0; max-width: 34ch; font-weight: 600; }
.chat-comparar[data-modo="estados"] .cc-vitrina, .chat-comparar[data-modo="estados"] .cc-vitrina-t,
.chat-comparar[data-modo="vitrina"] .cc-estados, .chat-comparar[data-modo="vitrina"] .cc-estados-t { display: none; }
.cc-chat p { animation: burbuja .3s ease-out backwards; }
.cc-chat p:nth-child(2) { animation-delay: .08s; } .cc-chat p:nth-child(3) { animation-delay: .16s; } .cc-chat p:nth-child(4) { animation-delay: .24s; }
.cc-chat p:nth-child(5) { animation-delay: .32s; } .cc-chat p:nth-child(6) { animation-delay: .4s; }
@keyframes burbuja { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) { .chat-comparar { grid-template-columns: minmax(0,1fr); gap: 18px; } }
@media (prefers-color-scheme: dark) { .cc-chat { background: #2a2420; } }

.pasos-p { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; counter-reset: none; }
.pasos-p li { border-top: 3px solid var(--ink); padding-top: 16px; }
.pp-n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-size: 17px; margin-bottom: 12px; }
.pasos-p b { display: block; font-size: 19px; margin-bottom: 6px; }
.pasos-p p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .pasos-p { grid-template-columns: minmax(0,1fr); gap: 22px; } }

.p-incluye { background: #24162f; color: #fff; }
.p-incluye h2 { color: #fff; }
.incluye { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.incluye li { padding: 18px 18px 20px 0; border-top: 1px solid rgba(255,255,255,.18); color: #d9c9e6; font-size: 14.5px; }
.incluye b { display: block; color: #ffd84d; font-size: 16px; margin-bottom: 4px; }
@media (max-width: 900px) { .incluye { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .incluye { grid-template-columns: minmax(0,1fr); } }

.planes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 30px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px; }
.plan h3 { font-size: 18px; }
.plan-precio { font-family: var(--font-display); font-size: 44px; margin: 8px 0 0; line-height: 1; }
.plan-precio small { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--muted); }
.plan-prod { font-weight: 800; margin: 10px 0 12px; }
.plan ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; flex: 1; }
.plan li { padding-left: 24px; position: relative; font-size: 14.5px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 900; }
.plan.destacado { background: #24162f; color: #fff; border-color: #24162f; }
.plan.destacado .plan-precio small { color: inherit; opacity: .7; }
.plan.destacado li::before { color: #ffd84d; }
@media (prefers-color-scheme: dark) { .p-incluye, .plan.destacado { background: #2d1d3a; } .plan.destacado { border-color: #4a3557; } }
.plan-tag { position: absolute; top: -12px; left: 20px; background: var(--tag); color: var(--tag-ink); font-weight: 800; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; }
.planes-nota { margin: 18px 0 0; color: var(--muted); font-weight: 600; }
@media (max-width: 860px) { .planes { grid-template-columns: minmax(0,1fr); max-width: 460px; } }

.p-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
.p-faq details { border-bottom: 1px solid var(--line); }
.p-faq summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; font-weight: 800; font-size: 16.5px; position: relative; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--accent); transition: transform .2s; }
.p-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.p-faq details p { margin: 0 0 18px; color: var(--muted); max-width: 60ch; }
@media (max-width: 760px) { .p-faq { grid-template-columns: minmax(0,1fr); gap: 12px; } }

.p-final { background: var(--accent); color: var(--accent-ink); padding: 64px 0; text-align: center; }
.p-final h2 { margin: 0 auto 10px; color: inherit; }
.p-final p { margin: 0 0 24px; font-size: 18px; opacity: .9; }

.p-pie { padding: 32px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
.p-pie .p-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.p-pie p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.p-pie nav { display: flex; gap: 16px; }
.p-pie nav a { color: var(--muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .estados i::after { transform: none; } }