/* =========================================================
   Web pública · estilo "vitrina al atardecer"
   Marco redondeado con cielo del color de cada rubro, palabra gigante
   detrás del celular, tarjetas de vidrio y navegación flotante.
   ========================================================= */
/* Bricolage Grotesque (SIL OFL 1.1), servida desde el propio hosting */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%; src: url(../fonts/bricolage-latin-ext.woff2) format('woff2-variations'), url(../fonts/bricolage-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%; src: url(../fonts/bricolage-latin.woff2) format('woff2-variations'), url(../fonts/bricolage-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.sitio {
  --titulo: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --noche: #140F24;
  --noche-2: #241B3F;
  --papel: #F6F5FA;
  --tinta: #17131F;
  --tinta-2: #2A2436;
  --suave: #5E5870;
  --borde: #E4E1EC;
  --borde-2: #CFCADB;
  --naranja: #FF6B2C;
  --naranja-2: #FF8A52;
  --crema: #FFF3E3;
  --fondo: #F6F5FA;
  background: #fff;
  color: var(--tinta);
}
.sitio h1, .sitio h2, .sitio h3 { font-family: var(--titulo); font-variation-settings: "opsz" 48; }
.saltar { position: absolute; left: -9999px; top: 8px; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

/* Botones del sitio */
.sitio .btn { border-radius: 999px; font-weight: 600; }
.sitio .btn-primario { background: var(--naranja); color: var(--tinta); box-shadow: 0 10px 24px -12px rgba(255, 107, 44, .8); }
.sitio .btn-primario:hover { background: var(--naranja-2); color: var(--tinta); }
.sitio .btn-borde { background: #fff; border-color: var(--borde-2); }
.sitio .btn-oscuro { background: var(--tinta); }
.btn-grande { min-height: 54px; padding: 0 26px; font-size: 16px; }

/* ---------- Cabecera: píldora flotante de vidrio ---------- */
.s-cabeza { position: sticky; top: 0; z-index: 50; padding: 12px 12px 0; pointer-events: none; }
.s-pildora { pointer-events: auto; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid rgba(23, 19, 31, .08); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 10px 30px -18px rgba(20, 15, 36, .45); transition: background .3s, box-shadow .3s; }
.s-cabeza.con-sombra .s-pildora { background: rgba(255, 255, 255, .92); box-shadow: 0 14px 34px -16px rgba(20, 15, 36, .5); }
.s-pildora .marca { font-size: 21px; flex-shrink: 0; }
.s-nav { position: relative; margin: 0 auto; }
.s-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; position: relative; z-index: 1; }
.s-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--suave); transition: color .25s; }
.s-nav a:hover, .s-nav a[aria-current=page] { color: var(--tinta); }
.s-nav a[aria-current=page] { font-weight: 600; }
.s-burbuja { position: absolute; z-index: 0; top: 0; left: 0; height: 40px; width: 0; border-radius: 999px; background: rgba(20, 15, 36, .07); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; pointer-events: none; }
.s-acciones { display: flex; gap: 6px; flex-shrink: 0; }
.s-btn-ingresar { background: transparent; border-color: transparent; color: var(--tinta); }
.s-btn-ingresar:hover { background: rgba(20, 15, 36, .06); }
.s-acciones .btn { min-height: 42px; }

/* ---------- Barra inferior (celular) ---------- */
.s-dock, .s-hoja { display: none; }

/* ---------- Marco "vitrina" (hero, cierre y titulares) ---------- */
.v-marco { --c: #C2410C; position: relative; isolation: isolate; overflow: hidden; overflow: clip; margin: 0 12px; border-radius: 32px; color: #fff; background: var(--noche); }
.v-cielo { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--c) 70%, #FFD9B8) 0%, transparent 55%),
  linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, var(--noche)) 0%, color-mix(in srgb, var(--c) 42%, var(--noche)) 55%, color-mix(in srgb, var(--c) 80%, #2a1530) 100%);
  transition: background .9s ease; }
.v-cielo::after { content: ''; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.v-sol { position: absolute; left: 50%; bottom: -36%; width: min(1100px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, #FFE7CF) 0%, color-mix(in srgb, var(--c) 60%, transparent) 28%, transparent 62%); opacity: .85; transition: background .9s ease; }
.v-loma { position: absolute; left: -10%; right: -10%; bottom: -62%; height: 80%; border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 55%, #120c1d) 0%, #0f0a18 60%); box-shadow: 0 -2px 60px color-mix(in srgb, var(--c) 60%, transparent); transition: background .9s ease, box-shadow .9s; }
.v-palabra { font-family: var(--titulo); font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800; font-size: clamp(110px, 21vw, 330px); line-height: .82; letter-spacing: -0.02em; color: var(--crema); text-align: center; white-space: nowrap; margin: 0; user-select: none; }

/* ---------- Hero ---------- */
.v-hero { padding-top: 14px; }
.v-hero .v-marco { min-height: min(820px, calc(100svh - 40px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.v-escenario { grid-column: 1 / -1; grid-row: 1 / -1; position: relative; }
.v-escena { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.v-escena.activa { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.v-escena .v-palabra { position: absolute; left: 0; right: 0; top: 13%; opacity: .92; font-size: min(27vw, 400px, calc(175vw / var(--n, 6))); }
.v-celu { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) rotate(-4deg); filter: drop-shadow(0 40px 50px rgba(10, 5, 20, .55)); }
.v-celu .celu { width: 268px; box-shadow: none; border-color: #0E0A16; }
.v-vidrio { position: absolute; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-radius: 20px; color: #fff; box-shadow: 0 20px 40px -24px rgba(5, 2, 12, .8); }
.v-pedido { right: 5%; top: 30%; width: 268px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.v-pedido-cab { display: flex; gap: 10px; align-items: center; }
.v-pedido-cab b { display: block; font-size: 14.5px; }
.v-pedido-cab small { color: rgba(255, 255, 255, .72); }
.v-wsp { width: 32px; height: 32px; border-radius: 10px; background: #25D366; color: #0B2E17; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v-pedido ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.v-pedido li { display: flex; justify-content: space-between; gap: 10px; }
.v-pedido li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .85); }
.v-pedido li b { white-space: nowrap; font-weight: 600; }
.v-pedido-total { display: flex; justify-content: space-between; border-top: 1px dashed rgba(255, 255, 255, .35); padding-top: 9px; font-size: 15px; }
.v-visitas { left: 6%; top: 24%; display: flex; gap: 10px; align-items: center; padding: 12px 16px 12px 12px; font-size: 13px; z-index: 2; }
.v-visitas > .ico { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(134, 239, 172, .22); color: #86EFAC; }
.v-visitas b { display: block; font-size: 14px; }
.v-visitas small { color: rgba(255, 255, 255, .72); }

.v-texto { grid-column: 1; grid-row: 2; position: relative; z-index: 3; padding: 0 0 40px 48px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.v-texto h1 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: "wdth" 96, "opsz" 72; text-wrap: balance; text-shadow: 0 2px 30px rgba(10, 5, 20, .35); }
.v-bajada { font-size: 17.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 470px; }
.v-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.v-btn-vidrio { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v-btn-vidrio:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.v-control { grid-column: 2; grid-row: 2; position: relative; z-index: 3; align-self: end; justify-self: end; padding: 0 96px 44px 0; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.v-ficha { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: #fff; text-align: right; }
.v-ficha:hover { color: #fff; }
.v-ficha-nombre { font-family: var(--titulo); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.v-ficha-sub { font-size: 14px; color: rgba(255, 255, 255, .78); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.v-ficha:hover .v-ficha-sub { text-decoration-color: #fff; }
.v-flechas { display: flex; align-items: center; gap: 10px; }
.v-flecha { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, transform .2s; }
.v-flecha:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }
.v-puntos { display: flex; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v-puntos button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .35s cubic-bezier(.3, 1.3, .5, 1), background .3s; }
.v-puntos button[aria-selected=true] { width: 24px; background: #fff; }
.v-flecha:focus-visible, .v-puntos button:focus-visible, .v-ficha:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.v-datos { list-style: none; margin: 0 auto; padding: 22px 24px 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; color: var(--suave); font-size: 15px; }
.v-datos li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v-datos strong { font-family: var(--titulo); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); font-variation-settings: "wdth" 85; }
.v-datos strong span { font: inherit; color: inherit; }

/* ---------- Títulos de sección ---------- */
.v-titulo { font-size: clamp(32px, 4.6vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: "wdth" 92, "opsz" 72; max-width: 15ch; text-wrap: balance; }
.v-titulo-chico { font-size: clamp(24px, 3vw, 34px); max-width: none; }
.v-encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; }
.v-encabezado p { color: var(--suave); font-size: 17px; max-width: 440px; }

/* ---------- Recorrido con celular fijo ---------- */
.v-recorrido { padding: 110px 0 40px; }
.v-recorrido-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.v-pasos { display: flex; flex-direction: column; }
.v-pasos .v-titulo { margin-bottom: 24px; }
.v-paso { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 0; opacity: .32; transition: opacity .5s ease; }
.v-paso.activo { opacity: 1; }
.v-paso-num { width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-family: var(--titulo); font-weight: 800; font-size: 18px; color: var(--naranja); }
.v-paso h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; }
.v-paso > p { color: var(--suave); font-size: 18px; line-height: 1.55; max-width: 44ch; }
.v-pantalla-movil { display: none; }
.v-fijo { position: sticky; top: 90px; height: calc(100vh - 120px); max-height: 720px; display: flex; align-items: center; justify-content: center; }
.v-fijo::before { content: ''; position: absolute; inset: 8% 6%; border-radius: 40px; background: radial-gradient(circle at 50% 70%, rgba(255, 107, 44, .22), transparent 60%), var(--papel); z-index: -1; }
.v-telefono { position: relative; width: 300px; height: 610px; border-radius: 46px; background: #0E0A16; padding: 12px; box-shadow: 0 40px 70px -30px rgba(20, 15, 36, .6), inset 0 0 0 2px #2A2436; }
.v-notch { position: absolute; top: 20px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 99px; background: #0E0A16; z-index: 3; }
.v-pantalla { position: absolute; inset: 12px; border-radius: 36px; overflow: hidden; background: #fff; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
.v-pantalla.activa { opacity: 1; transform: none; }

/* Pantallitas */
.r-app { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 48px 14px 14px; font-size: 12px; color: #2A1810; }
.r-cab { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.r-bolsa { position: relative; width: 32px; height: 32px; border-radius: 10px; background: #2A1810; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.r-bolsa i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 99px; background: #B83A72; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.r-catalogo { background: #FFF6F9; }
.r-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-prod { background: #fff; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.r-foto { aspect-ratio: 1; border-radius: 10px; background: #FBE3EE; color: #B83A72; display: grid; place-items: center; }
.r-prod b { font-size: 11px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-prod small { color: #7a5a66; }
.r-prod em { font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 5px; text-align: center; background: #B83A72; color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; }
.r-agregado em { background: #166534; }
.r-barra { margin-top: auto; display: flex; justify-content: space-between; align-items: center; background: #2A1810; color: #fff; border-radius: 99px; padding: 12px 16px; font-size: 12.5px; }
.r-chat { background: #EFEAE2; padding: 0; gap: 0; }
.r-cab-wsp { background: #075E54; color: #fff; padding: 46px 14px 12px; justify-content: flex-start; gap: 10px; }
.r-cab-wsp small { display: block; font-size: 11px; color: #cfe9e4; }
.r-avatar { width: 32px; height: 32px; border-radius: 50%; background: #FBE3EE; color: #B83A72; display: grid; place-items: center; }
.r-mensajes { padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.r-burbuja { border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; line-height: 1.45; }
.r-burbuja small { align-self: flex-end; font-size: 10px; color: #667; }
.r-mia { background: #D9FDD3; margin-left: 18px; border-top-right-radius: 4px; }
.r-suya { background: #fff; margin-right: 34px; border-top-left-radius: 4px; }
.r-panel { background: #F4F2EE; color: #1C1917; }
.r-chip { font-size: 11px; font-weight: 700; background: #FEF5DC; color: #854D0E; padding: 4px 10px; border-radius: 99px; }
.r-pedido { background: #fff; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #E6E2DC; }
.r-pedido-cab, .r-pedido-chico { display: flex; justify-content: space-between; align-items: center; }
.r-pedido-cab span, .r-pedido-chico span { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #EAF1FB; color: #1D4E89; }
.r-pasos { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.r-pasos li { position: relative; height: 18px; display: flex; justify-content: center; }
.r-pasos li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #D3CCC3; background: #fff; position: relative; z-index: 1; }
.r-pasos li + li::after { content: ''; position: absolute; top: 7px; right: 50%; width: 100%; height: 3px; background: #E6E2DC; }
.r-pasos li.hecho::before { background: #166534; border-color: #166534; }
.r-pasos li.hecho + li.hecho::after { background: #166534; }
.r-pasos li.actual::before { box-shadow: 0 0 0 4px #E7F4EA; }
.r-fila { display: flex; justify-content: space-between; gap: 8px; color: #5F5953; }
.r-total { color: #1C1917; font-weight: 700; border-top: 1px solid #E6E2DC; padding-top: 6px; }
.r-avisar { background: #25D366; color: #0B2E17; border-radius: 12px; padding: 9px 10px; font-weight: 700; font-size: 11px; display: flex; gap: 6px; align-items: center; }
.r-pedido-chico { opacity: .7; }

/* ---------- Bento de funciones ---------- */
.v-caja { padding: 100px 0 40px; }
.v-bento { margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px; }
.v-b { position: relative; overflow: hidden; border-radius: 26px; padding: 26px; background: var(--papel); display: flex; flex-direction: column; gap: 10px; }
.v-b h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.v-b p { color: var(--suave); font-size: 15.5px; max-width: 36ch; }
.v-b-estilo { grid-column: span 4; grid-row: span 2; flex-direction: row; gap: 24px; align-items: center; background: var(--noche); color: #fff; }
.v-b-estilo > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.v-b-estilo h3 { font-size: clamp(28px, 3vw, 40px); }
.v-b-estilo p { color: rgba(255, 255, 255, .75); font-size: 17px; }
.v-muestras { display: flex; gap: 12px; margin-top: 8px; }
.v-muestras button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--m); cursor: pointer; box-shadow: 0 0 0 2px var(--noche), 0 0 0 4px transparent; transition: box-shadow .25s, transform .25s; }
.v-muestras button:hover { transform: scale(1.08); }
.v-muestras button[aria-checked=true] { box-shadow: 0 0 0 3px var(--noche), 0 0 0 5px #fff; }
.v-muestras button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.v-b-celu { flex-shrink: 0; transform: rotate(3deg) translateY(30px); margin-bottom: -60px; }
.v-b-celu .celu { width: 230px; transition: background .5s; }
.v-b-celu .celu * { transition: background .5s, color .5s; }
.v-b-pdf { grid-column: span 2; background: #FFE9DE; }
.v-mini-pdf { margin-top: auto; align-self: center; width: 150px; background: #fff; border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; box-shadow: 0 18px 30px -18px rgba(120, 40, 10, .5); transform: rotate(-4deg) translateY(16px); margin-bottom: -30px; }
.v-mini-pdf i { aspect-ratio: 1; border-radius: 6px; background: #FFD2BD; }
.v-mini-pdf b { grid-column: 1 / -1; font-size: 9.5px; text-align: center; background: #25D366; color: #fff; border-radius: 99px; padding: 5px; }
.v-b-delivery { grid-column: span 2; }
.v-zonas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.v-zonas li { display: flex; justify-content: space-between; background: #fff; border-radius: 12px; padding: 8px 12px; }
.v-abierto { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #16683E; background: #E5F5EC; border-radius: 99px; padding: 5px 12px; }
.v-abierto i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.v-b-estados { grid-column: span 2; background: #E9F8EF; }
.v-linea { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; font-size: 14px; font-weight: 600; }
.v-linea li { position: relative; padding: 0 0 12px 26px; color: var(--suave); }
.v-linea li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #9FBFAB; background: #fff; }
.v-linea li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 19px; bottom: 0; width: 2px; background: #BFE3D3; }
.v-linea li.hecho, .v-linea li.actual { color: var(--tinta); }
.v-linea li.hecho::before, .v-linea li.actual::before { background: #166534; border-color: #166534; }
.v-linea li.actual::before { box-shadow: 0 0 0 4px #BFE3D3; }
.v-b-excel { grid-column: span 2; }
.v-hoja { margin-top: auto; display: grid; grid-template-columns: 1.6fr 1fr; border: 1px solid var(--borde-2); border-radius: 10px; overflow: hidden; font-size: 13px; background: #fff; }
.v-hoja span { padding: 7px 10px; border-bottom: 1px solid var(--borde); }
.v-hoja span:nth-child(-n+2) { background: #1D6F42; color: #fff; font-weight: 700; border-bottom: 0; }
.v-hoja span:nth-last-child(-n+2) { border-bottom: 0; }
.v-b-aviso { grid-column: span 2; background: var(--tinta); color: #fff; }
.v-b-aviso p { color: rgba(255, 255, 255, .72); }
.v-noti { margin-top: auto; display: flex; gap: 10px; align-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; padding: 10px 12px; font-size: 13px; }
.v-noti img { border-radius: 9px; }
.v-noti b { display: block; }
.v-noti small { color: rgba(255, 255, 255, .7); }
.v-caja .nota-pie { margin-top: 20px; }

/* ---------- Rubros ---------- */
.v-rubros { padding: 70px 0 40px; }
.v-rubros .v-titulo { margin-bottom: 18px; }
.h-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.h-chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--borde); border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; background: #fff; transition: border-color .2s, background .2s; }
.h-chips a svg { color: var(--naranja); }
.h-chips a:hover { border-color: var(--tinta); background: var(--papel); color: var(--tinta); }
.marquesina { display: flex; gap: 8px; overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquesina-pista { flex-wrap: nowrap !important; flex-shrink: 0; }
.marquesina-pista li { flex-shrink: 0; }
.marquesina-copia { display: none !important; }

/* ---------- Precios ---------- */
.v-precios { padding: 90px 0; background: var(--papel); margin: 60px 12px 0; border-radius: 32px; }
.sitio .planes { max-width: 900px; gap: 16px; }
.sitio .plan-card { border-radius: 28px; border: 1px solid var(--borde); padding: 30px; }
.sitio .plan-oscuro { background: var(--noche); border-color: var(--noche); }
.sitio .plan-oscuro .plan-limite { background: var(--noche-2); }
.sitio .plan-precio strong { font-family: var(--titulo); font-variation-settings: "wdth" 95; font-size: 60px; letter-spacing: -0.02em; }
.sitio .plan-cinta { border-radius: 999px; background: var(--naranja); color: var(--tinta); }
.sitio .plan-limite { border-radius: 16px; }
.sitio .plan-periodos b { background: #16683E; }
.sitio .plan-oscuro .plan-periodos li { border-top-color: rgba(255, 255, 255, .14); }
.nota-pie { text-align: center; margin-top: 24px; }
.nota-pie a { font-weight: 600; color: var(--tinta); text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Preguntas ---------- */
.v-faq { padding: 100px 0 60px; }
.v-faq-fila { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.v-faq-sub { margin-top: 16px; color: var(--suave); font-size: 17px; max-width: 34ch; }
.v-faq-sub a { color: var(--tinta); font-weight: 600; }
.v-faq .faq { max-width: none; }
.v-faq .nota-pie { text-align: left; }
.faq { max-width: 780px; margin: 0 auto; }
.faq-grupo { max-width: 780px; margin: 0 auto 32px; }
.faq-grupo h3 { font-size: 22px; margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--suave); transition: transform .25s; flex-shrink: 0; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding-bottom: 20px; color: var(--suave); line-height: 1.65; max-width: 62ch; }
.s-ayuda-caja { max-width: 780px; margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; border-radius: 24px; padding: 24px; background: var(--papel); }
.s-ayuda-caja > div { flex: 1 1 260px; }
.s-ayuda-caja h2 { font-size: 22px; }
.s-ayuda-caja p { color: var(--suave); }

/* ---------- Cierre ---------- */
.v-final { padding: 40px 0 70px; }
.v-marco-final { min-height: 460px; display: flex; align-items: flex-end; }
.v-marco-final .v-sol { bottom: -60%; }
.v-palabra-final { position: absolute; left: 0; right: 0; top: 8%; opacity: .16; font-size: clamp(120px, 26vw, 400px); }
.v-final-texto { position: relative; padding: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 640px; }
.v-final-texto h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -0.025em; font-variation-settings: "wdth" 92; }
.v-final-texto p { font-size: 18px; color: rgba(255, 255, 255, .85); }

/* ---------- Titulares de las otras páginas ---------- */
.s-titular, .s-titular.centrado { display: block; padding: 14px 12px 32px; }
.s-marco { position: relative; isolation: isolate; overflow: hidden; overflow: clip; border-radius: 32px; padding: 120px 0 56px; color: #fff; background:
  radial-gradient(110% 80% at 50% 120%, rgba(255, 140, 80, .55), transparent 55%),
  linear-gradient(180deg, #1B1430 0%, #3A2347 60%, #7A3A3A 100%); }
.s-marco::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .2; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.s-palabra { position: absolute; z-index: -1; left: 0; right: 0; top: 50%; transform: translateY(-58%); margin: 0; text-align: center; white-space: nowrap; font-family: var(--titulo); font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800; font-size: clamp(90px, 17vw, 260px); line-height: .8; letter-spacing: -0.02em; color: var(--crema); opacity: .14; user-select: none; }
.s-titular h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -0.02em; max-width: 18ch; line-height: 1; margin: 0 0 16px; font-variation-settings: "wdth" 92, "opsz" 72; text-wrap: balance; }
.s-titular.centrado h1, .s-titular.centrado .bajada { margin-left: auto; margin-right: auto; text-align: center; }
.s-titular .bajada { font-size: 18px; color: rgba(255, 255, 255, .82); max-width: 640px; }
.s-titular .bajada .ico { color: #FDBA8C; }
.s-encabezado { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.s-encabezado.centrado { align-items: center; text-align: center; }
.s-encabezado h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; max-width: 760px; line-height: 1.05; font-variation-settings: "wdth" 85; }
.s-encabezado p { color: var(--suave); font-size: 17px; max-width: 620px; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--naranja); }
.sitio .seccion-gris { background: var(--papel); }
.sitio .cta { margin: 0 12px 70px; }
.sitio .cta-caja { max-width: none; border-radius: 32px; background: var(--noche); padding: 56px 48px; }
.sitio .cta-caja h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; font-variation-settings: "wdth" 85; }
.sitio .cta-caja .btn { background: var(--naranja); color: var(--tinta); border-radius: 999px; }

/* Funciones */
.f-grupo { padding: 36px 0; }
.f-grupo h2 { font-size: 30px; margin-bottom: 20px; letter-spacing: -0.025em; }
.f-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.f-item { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; background: var(--papel); }
.f-item h3 { font-family: var(--texto); font-size: 17px; letter-spacing: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f-item p { color: var(--suave); font-size: 15px; }
.f-item .icono-cuadro { width: 44px; height: 44px; background: #fff; color: var(--naranja); }

/* Plantillas */
.p-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.p-tarjeta { border-radius: 28px; overflow: hidden; background: var(--papel); display: flex; flex-direction: column; scroll-margin-top: 100px; }
.p-vitrina { background: linear-gradient(180deg, transparent, rgba(20, 15, 36, .05)); padding: 28px 0 0; display: flex; justify-content: center; height: 330px; overflow: hidden; }
.p-vitrina .celu { width: 230px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.p-tarjeta:hover .p-vitrina .celu { transform: translateY(-12px); }
.p-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; background: #fff; margin: 0 8px 8px; border-radius: 22px; }
.p-cuerpo h2 { font-size: 21px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.p-cuerpo h2 svg { color: var(--naranja); }
.p-cuerpo p { color: var(--suave); font-size: 15px; }
.p-cats { font-size: 13.5px !important; }
.p-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }

/* Celular de muestra (con los colores de cada plantilla) */
.celu { width: 250px; flex-shrink: 0; border: 9px solid #1C1917; border-radius: 36px; background: var(--f); color: var(--t); padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 60px -30px rgba(28, 25, 23, .55); overflow: hidden; }
.celu-cab { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.celu-cab strong { font-weight: 700; letter-spacing: -0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.celu-carrito { width: 26px; height: 26px; border-radius: 8px; background: var(--t); color: var(--f); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.celu-portada { border-radius: var(--rt); background: color-mix(in srgb, var(--p) 12%, var(--f)); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.celu-portada span { font-size: 15px; font-weight: 700; line-height: 1.1; }
.celu-portada i { font-style: normal; font-size: 10px; font-weight: 700; padding: 6px 10px; border-radius: var(--rb); background: var(--p); color: var(--sp); }
.celu-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.celu-prod { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.celu-foto { aspect-ratio: 1; border-radius: calc(var(--rt) * .6); background: color-mix(in srgb, var(--p) 10%, var(--f)); color: var(--p); display: flex; align-items: center; justify-content: center; }
.celu-prod b { font-size: 10px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.celu-prod span { font-size: 10px; opacity: .75; }
.celu-boton { margin-top: 2px; min-height: 34px; border-radius: var(--rb); background: var(--p); color: var(--sp); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Zyvon Technologies ---------- */
.z-banda { position: relative; overflow: hidden; background: #04060F; color: #E6E9F2; margin: 0 12px 12px; border-radius: 32px; }
.z-banda-fila { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 48px; padding-bottom: 48px; }
.z-banda-texto { display: flex; flex-direction: column; gap: 10px; }
.z-banda-logo img { display: block; height: 64px; width: auto; }
.z-banda-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.z-banda-brillo { position: absolute; width: 520px; height: 520px; left: -160px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 149, 222, .28), transparent 65%); pointer-events: none; }
.z-etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #8FA3C7; font-weight: 600; }
.z-etiqueta svg { color: #2B95DE; }
.z-lema { font-family: var(--titulo); font-size: 26px; font-weight: 700; color: #fff; margin-top: 6px; letter-spacing: -0.01em; }
.sitio .z-btn { background: #2B95DE; color: #04060F; }
.sitio .z-btn:hover { background: #5BB0EA; color: #04060F; }
.sitio .z-btn-borde { border: 1px solid #2A3550; color: #E6E9F2; background: transparent; }
.sitio .z-btn-borde:hover { border-color: #2B95DE; color: #fff; }
.z-hero { background: #04060F; color: #E6E9F2; padding: 120px 0 72px; position: relative; overflow: hidden; isolation: isolate; margin: 14px 12px 0; border-radius: 32px; }
.z-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(91, 140, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 140, 255, .07) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.z-hero .contenedor { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.z-hero h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; color: #fff; letter-spacing: -0.035em; margin: 6px 0 4px; }
.z-hero-logo { display: block; width: min(460px, 100%); height: auto; }
.z-hero-z { position: absolute; right: 6%; top: 50%; width: 300px; height: auto; transform: translateY(-50%); opacity: .12; z-index: 0; pointer-events: none; }
.z-hero-luz { position: absolute; width: 700px; height: 700px; right: -200px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(43, 149, 222, .22), transparent 60%); z-index: 0; pointer-events: none; }
.z-lema-grande { font-size: 22px; color: #9DB4E8; font-weight: 600; }
.z-bajada { max-width: 680px; font-size: 18px; color: #B9C2D6; line-height: 1.6; }
.z-seccion { background: #0A0E1C; color: #E6E9F2; padding: 72px 0; margin: 12px; border-radius: 32px; }
.z-seccion h2 { color: #fff; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; }
.z-sub { color: #9AA6C2; margin-top: 8px; }
.z-sub a { color: #5BB0EA; font-weight: 600; }
.z-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 32px; }
.z-servicio { border: 1px solid #1B2440; border-radius: 22px; padding: 22px; background: #0E1426; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s; }
.z-servicio:hover { border-color: #2B95DE; }
.z-servicio h3 { color: #fff; font-family: var(--texto); font-size: 17px; letter-spacing: 0; }
.z-servicio p { color: #9AA6C2; font-size: 15px; }
.z-ico { width: 44px; height: 44px; border-radius: 12px; background: #0C2A44; color: #5BB0EA; display: inline-flex; align-items: center; justify-content: center; }
.z-contacto-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.z-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; flex: 1 1 520px; }
.z-datos a { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px solid #1B2440; border-radius: 16px; color: #fff; text-decoration: none; background: #0E1426; min-height: 64px; transition: border-color .2s; }
.z-datos a:hover { border-color: #2B95DE; color: #fff; }
.z-datos svg, .z-datos .ico-red { color: #5BB0EA; }
.z-datos small { display: block; color: #8FA3C7; font-size: 12.5px; }
.z-datos span { overflow-wrap: anywhere; }
.z-redes { margin-top: 18px; }
.z-redes a { border-color: #1B2440; background: #0E1426; width: 46px; height: 46px; color: #CFE5F7; }
.z-dato-wsp { border-color: #1E6B3E !important; }
.z-dato-wsp svg { color: #25D366 !important; }
.btn-wsp, .z-btn-wsp, .sitio .z-btn-wsp { background: #25D366; color: #0B2E17; }
.btn-wsp:hover, .z-btn-wsp:hover { background: #1FBE5A; color: #0B2E17; }

/* ---------- Pie ---------- */
.s-pie { background: var(--noche); color: #C9C3D6; padding: 56px 0 24px; margin: 0 12px 12px; border-radius: 32px; }
.s-pie a { color: #EDEAF4; text-decoration: none; }
.s-pie a:hover { color: #fff; text-decoration: underline; }
.s-pie-grilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.s-pie h2 { font-family: var(--texto); font-size: 14px; font-weight: 600; color: #8E86A3; margin-bottom: 12px; }
.s-pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.s-pie-marca .marca { color: #fff; }
.s-pie-marca p { margin-top: 12px; max-width: 300px; font-size: 15px; }
.s-pie-empresa p { font-size: 14px; margin-top: 6px; }
.zyvon-firma { display: inline-flex; align-items: center; gap: 8px; font-family: var(--titulo); font-weight: 700; font-size: 18px; color: #fff !important; }
.zyvon-firma img { display: block; height: 40px; width: auto; }
.s-pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #2E2546; font-size: 13.5px; color: #8E86A3; }
.s-pie-legal span { display: inline-flex; align-items: center; gap: 6px; }
.s-pie-legal a { color: inherit; }
.s-pie-legal .s-pie-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.redes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; }
.s-pie ul.redes { flex-direction: row; gap: 8px; }
.redes a { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #2E2546; color: #EDEAF4; transition: background .2s, color .2s, border-color .2s; }
.redes a:hover { color: #fff; text-decoration: none; }
.redes .red-whatsapp:hover { background: #25D366; border-color: #25D366; color: #0B2E17; }
.redes .red-instagram:hover { background: #E1306C; border-color: #E1306C; }
.redes .red-facebook:hover { background: #1877F2; border-color: #1877F2; }
.redes .red-tiktok:hover { background: #000; border-color: #000; }

/* WhatsApp flotante */
.wsp-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 0; height: 58px; min-width: 58px; padding: 0 15px; border-radius: 999px; background: #25D366; color: #0B2E17; text-decoration: none; font-weight: 700; box-shadow: 0 12px 28px -10px rgba(10, 60, 30, .55); overflow: hidden; transition: gap .25s, padding .25s, transform .2s; }
.wsp-flotante:hover, .wsp-flotante:focus-visible { gap: 10px; padding: 0 20px 0 15px; color: #0B2E17; transform: translateY(-2px); }
.wsp-texto { max-width: 0; white-space: nowrap; overflow: hidden; transition: max-width .3s; }
.wsp-flotante:hover .wsp-texto, .wsp-flotante:focus-visible .wsp-texto { max-width: 200px; }

/* Páginas legales */
.legal { max-width: 780px; margin: 0 auto; padding: 48px 16px 80px; }
.legal h1 { font-size: clamp(32px, 6vw, 50px); margin-bottom: 8px; letter-spacing: -0.03em; }
.legal .legal-fecha { color: var(--suave); margin-bottom: 28px; }
.legal h2 { font-size: 22px; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--tinta-2); line-height: 1.7; }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal .legal-indice { background: var(--papel); border-radius: 18px; padding: 16px 20px; columns: 2 220px; }
.legal .legal-indice a { text-decoration: none; }
.legal .legal-caja { border: 1px solid var(--borde); border-radius: 18px; padding: 16px 20px; margin-top: 14px; }

/* ---------- Intro con logo ---------- */
.intro { display: none; }
.con-intro .intro { display: flex; position: fixed; inset: 0; z-index: 200; background: var(--noche, #140F24); color: #fff; align-items: center; justify-content: center; flex-direction: column; animation: intro-salida .7s cubic-bezier(.7, 0, .3, 1) 1.75s forwards; cursor: pointer; }
.intro.saltada { animation: intro-salida .45s cubic-bezier(.7, 0, .3, 1) forwards !important; }
@keyframes intro-salida { to { transform: translateY(-100%); visibility: hidden; } }
.intro-centro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.intro-marca { display: flex; align-items: center; gap: 14px; }
.intro-sello { width: 64px; height: 64px; border-radius: 18px; background: var(--naranja, #FF6B2C); color: var(--tinta, #17131F); display: inline-flex; align-items: center; justify-content: center; animation: intro-sello .8s cubic-bezier(.3, 1.6, .5, 1) both; }
.intro-nombre { font-family: var(--titulo); font-weight: 800; font-size: clamp(34px, 7vw, 54px); letter-spacing: -0.03em; clip-path: inset(0 100% 0 0); animation: intro-texto .7s cubic-bezier(.2, .7, .2, 1) .35s forwards; }
.intro-lema { color: #C9C3D6; font-size: 16px; opacity: 0; animation: subir .6s ease .75s forwards; }
.intro-firma { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: #8E86A3; font-size: 13px; opacity: 0; animation: aparecer .6s ease 1s forwards; }
.intro-firma img { height: 34px; width: auto; }
.intro-barra { position: absolute; left: 50%; bottom: 14%; width: 160px; height: 3px; margin-left: -80px; border-radius: 99px; background: #2E2546; overflow: hidden; }
.intro-barra i { display: block; height: 100%; background: var(--naranja, #FF6B2C); transform-origin: left; transform: scaleX(0); animation: intro-carga 1.6s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
@keyframes intro-sello { from { transform: scale(0) rotate(-120deg); } to { transform: none; } }
@keyframes intro-texto { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-carga { to { transform: scaleX(1); } }

/* =========================================================
   Movimiento (solo con html.anim)
   ========================================================= */
@keyframes subir { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 8px)); } }
@keyframes palabra-entra { from { opacity: 0; transform: translateY(40px) scale(.96); letter-spacing: .04em; } to { opacity: .92; transform: none; } }
@keyframes celu-entra { from { opacity: 0; transform: translateX(-50%) translateY(80px) rotate(-10deg); } to { opacity: 1; transform: translateX(-50%) rotate(-4deg); } }
@keyframes vidrio-entra { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
@keyframes grilla { from { background-position: 0 0, 0 0; } to { background-position: 44px 44px, 44px 44px; } }
@keyframes orbita { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 30px); } }

html.anim { --base: 0s; }
html.anim.con-intro { --base: 2.1s; }

/* El momento principal: cada escena entra con su palabra, su celular y su pedido */
.anim .v-escena.activa .v-palabra { animation: palabra-entra 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--base) + .05s); }
.anim .v-escena.activa .v-celu { animation: celu-entra 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--base) + .2s); }
.anim .v-escena.activa .v-celu .celu { animation: flotar 6s ease-in-out infinite; animation-delay: calc(var(--base) + 1.2s); }
.anim .v-escena.activa .v-pedido { animation: vidrio-entra .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--base) + .55s); }
.anim .v-visitas { animation: vidrio-entra .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--base) + .8s); }
.anim .v-texto > *, .anim .v-control { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--base) + var(--d, .1s)); }
.anim .v-texto > :nth-child(2) { --d: .2s; }
.anim .v-texto > :nth-child(3) { --d: .3s; }
.anim .v-control { --d: .45s; }
.anim .s-marco .contenedor > * { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--base) + var(--d, 0s)); }
.anim .s-marco .contenedor > :nth-child(2) { --d: .12s; }
@keyframes aparecer-tenue { from { opacity: 0; transform: translateY(-50%) scale(1.04); } to { opacity: .14; transform: translateY(-58%); } }
.anim .s-palabra { animation: aparecer-tenue 1.4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--base); }

/* Aparecer al bajar (sutil) */
.anim [data-revelar] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--retraso, 0s); }
.anim [data-revelar].visible { opacity: 1; transform: none; }

.anim .marquesina-copia { display: flex !important; }
.anim .marquesina-pista { animation: marquesina 40s linear infinite; }
.anim .marquesina:hover .marquesina-pista, .anim .marquesina:focus-within .marquesina-pista { animation-play-state: paused; }

.anim .z-hero::after { animation: grilla 8s linear infinite; }
.anim .z-hero-luz, .anim .z-banda-brillo { animation: orbita 14s ease-in-out infinite; }
.anim .wsp-flotante { opacity: 0; animation: vidrio-entra .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--base) + 1.6s); }
.anim .wsp-flotante::before { content: ''; position: absolute; inset: 0; border-radius: inherit; animation: latido 2.4s ease-out infinite; animation-delay: calc(var(--base) + 2.4s); }
.anim .faq details[open] p { animation: subir .35s ease; }

/* =========================================================
   Tablet y celular
   ========================================================= */
@media (max-width: 1020px) {
  .s-nav { display: none; }
  .v-hero .v-marco { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: 0; }
  .v-escenario { grid-row: 1; height: 600px; }
  .v-texto { grid-row: 2; padding: 0 28px 20px; max-width: none; }
  .v-control { grid-column: 1; grid-row: 3; justify-self: stretch; align-items: stretch; padding: 8px 28px 28px; flex-direction: row; justify-content: space-between; align-items: center; }
  .v-ficha { align-items: flex-start; text-align: left; }
  .v-pedido { right: 3%; top: auto; bottom: 8%; }
  .v-visitas { left: 4%; top: auto; bottom: 26%; }
  .v-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-recorrido-fila { grid-template-columns: 1fr; }
  .v-fijo { display: none; }
  .v-paso { min-height: 0; opacity: 1; padding: 28px 0; }
  .v-pantalla-movil { display: block; width: 280px; height: 520px; margin: 12px auto 0; border-radius: 40px; background: #0E0A16; padding: 10px; overflow: hidden; }
  .v-pantalla-movil .r-app { border-radius: 32px; overflow: hidden; height: 100%; }
  .v-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-b-estilo { grid-column: span 2; grid-row: auto; }
  .v-b-pdf, .v-b-delivery, .v-b-estados, .v-b-excel, .v-b-aviso { grid-column: span 1; }
  .v-faq-fila { grid-template-columns: 1fr; gap: 16px; }
  .s-pie-grilla { grid-template-columns: 1fr 1fr; }
  .z-hero-z { width: 180px; right: -20px; opacity: .08; }
}

@media (max-width: 700px) {
  .contenedor { padding: 0 18px; }
  .s-cabeza { padding: 8px 8px 0; }
  .s-pildora { padding: 6px 6px 6px 14px; }
  .s-pildora .marca { font-size: 19px; }
  .s-btn-crear { display: none; }
  .s-acciones { margin-left: auto; }
  .v-marco, .s-marco, .v-precios, .z-banda, .s-pie, .z-hero, .z-seccion { border-radius: 26px; margin-left: 8px; margin-right: 8px; }
  .s-titular { padding: 10px 8px 24px; }
  .s-titular .s-marco { margin: 0; }
  .v-hero { padding-top: 10px; }
  .v-escenario { height: 470px; overflow: clip; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
  .v-escena .v-palabra { top: 19%; font-size: min(42vw, calc(185vw / var(--n, 6))); }
  .v-celu { top: 31%; }
  .v-celu .celu { width: 210px; }
  .v-pedido { width: 196px; right: 8px; top: auto; bottom: 16%; padding: 11px; font-size: 12px; gap: 7px; }
  .v-pedido li:nth-child(2) { display: none; }
  .v-visitas { left: 8px; top: 3%; bottom: auto; padding: 8px 12px 8px 8px; font-size: 12px; }
  .v-texto { padding: 4px 20px 16px; }
  .v-texto h1 { font-size: 38px; }
  .v-bajada { font-size: 16px; }
  .v-botones .btn { flex: 1 1 100%; }
  .v-control { padding: 6px 20px 24px; }
  .v-ficha-nombre { font-size: 17px; }
  .v-ficha-sub { font-size: 13px; }
  .v-flecha { width: 38px; height: 38px; }
  .v-datos { padding: 18px 18px 0; gap: 14px; font-size: 14px; }
  .v-datos strong { font-size: 26px; }
  .v-recorrido, .v-caja, .v-faq { padding-top: 70px; }
  .v-bento { grid-template-columns: 1fr; }
  .v-b-estilo { flex-direction: column; align-items: flex-start; grid-column: auto; }
  .v-b-celu { align-self: center; }
  .v-b-pdf, .v-b-delivery, .v-b-estados, .v-b-excel, .v-b-aviso { grid-column: auto; }
  .v-precios { padding: 64px 0; }
  .sitio .plan-card { padding: 24px; }
  .v-final-texto { padding: 32px 22px; }
  .v-marco-final { min-height: 420px; }
  .s-marco { padding: 96px 0 44px; }
  .s-pie-grilla { grid-template-columns: 1fr; }
  .p-grilla { grid-template-columns: 1fr; }
  .z-banda-logo img { height: 48px; }
  .sitio .cta-caja { padding: 36px 24px; }

  /* Barra inferior flotante con burbuja y botón + al centro */
  .sitio { padding-bottom: 96px; }
  .s-dock { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; z-index: 70; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px; padding: 0 6px; border-radius: 26px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(23, 19, 31, .08); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 18px 40px -18px rgba(20, 15, 36, .55); }
  .s-dock a, .s-dock button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--suave); text-decoration: none; cursor: pointer; border-radius: 18px; transition: color .25s; }
  .s-dock [aria-current=page] { color: var(--tinta); }
  .s-dock .s-dock-crear { width: 56px; height: 56px; margin: -22px auto 0; border-radius: 50%; background: var(--naranja); color: var(--tinta); box-shadow: 0 12px 24px -8px rgba(255, 107, 44, .75), 0 0 0 5px #fff; }
  .s-dock-burbuja { position: absolute; z-index: 0; top: 6px; left: 0; height: 54px; border-radius: 18px; background: rgba(20, 15, 36, .07); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; opacity: 0; }
  .s-hoja { display: block; position: fixed; z-index: 69; left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -20px rgba(20, 15, 36, .55); padding: 8px; transform-origin: 85% 100%; transition: transform .3s cubic-bezier(.2, .7, .2, 1.2), opacity .2s; }
  .s-hoja[hidden] { display: block; opacity: 0; transform: scale(.9) translateY(10px); pointer-events: none; visibility: hidden; }
  .s-hoja ul { list-style: none; margin: 0; padding: 0; }
  .s-hoja a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 16px; text-decoration: none; font-weight: 600; color: var(--tinta); }
  .s-hoja a:hover { background: var(--papel); }
  .s-hoja .ico { color: var(--naranja); }
  .wsp-flotante { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); height: 50px; min-width: 50px; padding: 0 12px; }
}

/* Respeto a "reducir movimiento": todo quieto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-revelar] { opacity: 1 !important; transform: none !important; }
}
.celu-foto { overflow: hidden; }
.celu-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Vitrina por rubro (catálogos de ejemplo en vivo) ---------- */
.v-rubro { padding: 50px 16px 30px; max-width: 1272px; margin: 0 auto; }
.v-rubro-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.v-rubro-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; max-width: 100%; }
.v-rubro-tabs::-webkit-scrollbar { display: none; }
.v-rubro-tabs button { position: relative; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(20, 15, 36, .1); background: #fff; font: inherit; font-weight: 700; font-size: 15px; color: var(--tinta); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.v-rubro-tabs button .ico { color: var(--c); transition: color .25s; }
.v-rubro-tabs button[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.v-rubro-tabs button[aria-selected="true"] .ico { color: #fff; }
.v-rubro-tabs button:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.v-rubro-tiempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255, 255, 255, .7); }
.v-rubro-tabs button[aria-selected="true"] .v-rubro-tiempo { animation: v-tiempo var(--dur, 8s) linear forwards; }
[data-vitrinas].pausada .v-rubro-tiempo { animation-play-state: paused; }
@keyframes v-tiempo { to { width: 100%; } }
.v-rubro-marco { position: relative; overflow: hidden; border-radius: 36px; color: #fff; min-height: 600px;
  background: radial-gradient(70% 90% at 85% 10%, color-mix(in srgb, var(--c) 60%, transparent), transparent 62%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--c) 32%, transparent), transparent 65%), color-mix(in srgb, var(--c) 12%, #100B0A);
  transition: background .6s; }
.v-rubro-marco::before { content: ''; position: absolute; inset: 0; opacity: .06; background-image: repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 22px); pointer-events: none; }
.v-rubro-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 30px; align-items: center; padding: 56px 56px 0; }
.v-rubro-panel[hidden] { display: none; }
.v-rubro-panel.activo .v-rubro-texto > * { animation: v-entra .55s cubic-bezier(.2, .8, .2, 1) both; }
.v-rubro-panel.activo .v-rubro-texto > *:nth-child(2) { animation-delay: .05s; }
.v-rubro-panel.activo .v-rubro-texto > *:nth-child(3) { animation-delay: .1s; }
.v-rubro-panel.activo .v-rubro-texto > *:nth-child(n+4) { animation-delay: .15s; }
.v-rubro-panel.activo .v-rubro-cel { animation: v-cel .7s cubic-bezier(.2, .8, .2, 1) both; }
.v-rubro-panel.activo .v-extra { animation: v-extra .7s .2s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes v-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes v-cel { from { opacity: 0; transform: translateX(-46%) translateY(40px) rotate(3deg); } }
@keyframes v-extra { from { opacity: 0; transform: scale(.85) rotate(-6deg); } }
.v-rubro-texto { display: flex; flex-direction: column; gap: 18px; padding-bottom: 56px; }
.v-rubro-sobre { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-weight: 700; font-size: 14px; }
.v-rubro-texto h3 { margin: 0; font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -0.025em; font-variation-settings: "wdth" 92, "opsz" 72; max-width: 15ch; text-wrap: balance; }
.v-rubro-bajada { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .8); max-width: 50ch; }
.v-rubro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v-rubro-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: rgba(255, 255, 255, .8); }
.v-rubro-lista .ico { color: color-mix(in srgb, var(--c) 40%, #fff); margin-top: 2px; }
.v-rubro-lista b { color: #fff; }
.v-rubro-escena { position: relative; align-self: end; height: 560px; }
.v-rubro-cel { position: absolute; left: 50%; bottom: -40px; width: 300px; height: 600px; transform: translateX(-46%) rotate(3deg); border-radius: 46px; padding: 11px; background: #0B0807; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(255, 255, 255, .12); overflow: hidden; }
.v-rubro-cel iframe { width: 390px; height: 750px; border: 0; border-radius: 36px; transform: scale(.71); transform-origin: 0 0; pointer-events: none; background: #fff; }
.v-rubro-isla { position: absolute; left: 50%; top: 20px; z-index: 2; width: 86px; height: 24px; border-radius: 99px; background: #0B0807; transform: translateX(-50%); }

/* Detalles flotantes de cada rubro */
.v-extra { position: absolute; left: 0; bottom: 60px; z-index: 3; color: var(--tinta); background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .7); transform: rotate(-5deg); }
.v-extra small { display: block; font-size: 12px; font-weight: 700; color: #6b6478; }
.v-extra strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.v-extra em { display: block; font-style: normal; font-size: 13px; color: #6b6478; margin-top: 4px; }
.v-extra-mesa { width: 160px; text-align: center; color: #fff; background: linear-gradient(170deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); display: grid; justify-items: center; gap: 2px; }
.v-extra-mesa span { font-weight: 700; font-size: 14px; }
.v-extra-mesa b { font-size: 44px; line-height: .9; font-weight: 800; letter-spacing: -0.04em; }
.v-extra-mesa small { color: #fff; }
.v-extra-qr { margin: 8px 0 6px; padding: 7px; border-radius: 12px; background: #fff; line-height: 0; }
.v-extra-qr svg { width: 96px; height: 96px; }
.v-extra-club { width: 220px; color: #fff; background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 58%, #000)); }
.v-extra-club small, .v-extra-club em { color: rgba(255, 255, 255, .8); }
.v-sellos { display: flex; gap: 5px; margin-top: 10px; }
.v-sellos i { width: 24px; height: 24px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .55); }
.v-sellos i.on { border: 0; background: #fff; box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--c) 25%, #fff); }
.v-extra-tallas { width: 200px; }
.v-tallas { display: flex; gap: 6px; margin-top: 8px; }
.v-tallas i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-weight: 800; border: 1.5px solid #e4e1ea; }
.v-tallas i.on { background: var(--c); border-color: var(--c); color: #fff; }
.v-tallas i.no { color: #c5c1cd; text-decoration: line-through; }
.v-extra-pedido { display: flex; gap: 12px; align-items: center; width: 250px; }
.v-wa { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; flex-shrink: 0; }
.v-extra-cumple { display: flex; gap: 14px; align-items: center; width: 240px; background: linear-gradient(135deg, #FFF6DD, #FFE0C2); color: #3B1F00; }
.v-velas { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.v-velas i { width: 7px; border-radius: 3px; background: repeating-linear-gradient(180deg, #FB7185 0 5px, #fff 5px 10px); position: relative; }
.v-velas i:nth-child(1) { height: 22px; } .v-velas i:nth-child(2) { height: 30px; } .v-velas i:nth-child(3) { height: 18px; }
.v-velas i::before { content: ''; position: absolute; left: 50%; top: -10px; width: 7px; height: 10px; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFF3B0, #F59E0B); }
.v-extra-post { width: 170px; padding: 10px; display: grid; gap: 2px; }
.v-post-foto { height: 110px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--c), color-mix(in srgb, var(--c) 50%, #000)); margin-bottom: 6px; }
.v-extra-post b { position: absolute; top: 4px; right: -12px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #FFD23F; color: #1A1300; font-size: 16px; transform: rotate(12deg); }
.v-extra-post strong { font-size: 22px; }
@media (max-width: 900px) {
  .v-rubro { padding-top: 34px; }
  .v-rubro-cabeza { flex-direction: column; align-items: stretch; }
  .v-rubro-tabs { margin: 0 -16px; padding: 4px 16px; }
  .v-rubro-marco { border-radius: 28px; }
  .v-rubro-panel { grid-template-columns: 1fr; padding: 32px 22px 0; }
  .v-rubro-texto { padding-bottom: 0; }
  .v-rubro-escena { height: 470px; }
  .v-rubro-cel { width: 260px; height: 520px; }
  .v-rubro-cel iframe { transform: scale(.614); }
  .v-extra { bottom: 36px; transform: rotate(-5deg) scale(.88); transform-origin: left bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .v-rubro-panel.activo .v-rubro-texto > *, .v-rubro-panel.activo .v-rubro-cel, .v-rubro-panel.activo .v-extra { animation: none; }
  .v-rubro-tabs button[aria-selected="true"] .v-rubro-tiempo { animation: none; width: 0; }
}