/* Montaje — interfaz. Claro por defecto, oscuro con el sistema. Curvas y desenfoques al estilo Apple. */
:root {
  --fondo: #f5f5f7; --sup: #ffffff; --sup-2: #fbfbfd; --sup-3: #f0f0f3;
  --texto: #1d1d1f; --texto-2: #6e6e73; --texto-3: #86868b; --linea: rgba(0, 0, 0, .08); --linea-2: rgba(0, 0, 0, .14);
  --acento: #0071e3; --acento-2: #0077ed; --acento-suave: rgba(0, 113, 227, .10);
  --verde: #28a745; --verde-suave: rgba(52, 199, 89, .14); --naranja: #ff9f0a; --rojo: #ff3b30;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .06), 0 26px 60px rgba(0, 0, 0, .12);
  --vidrio: rgba(251, 251, 253, .72);
  --r-1: 12px; --r-2: 18px; --r-3: 24px; --r-4: 30px;
  --curva: cubic-bezier(.2, .8, .2, 1); --rebote: cubic-bezier(.34, 1.4, .64, 1);
  --fuente: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #000000; --sup: #1c1c1e; --sup-2: #161617; --sup-3: #2c2c2e;
    --texto: #f5f5f7; --texto-2: #a1a1a6; --texto-3: #6e6e73; --linea: rgba(255, 255, 255, .10); --linea-2: rgba(255, 255, 255, .18);
    --acento: #2997ff; --acento-2: #47a6ff; --acento-suave: rgba(41, 151, 255, .16);
    --verde: #30d158; --verde-suave: rgba(48, 209, 88, .16);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35);
    --sombra-2: 0 2px 8px rgba(0, 0, 0, .5), 0 26px 60px rgba(0, 0, 0, .6);
    --vidrio: rgba(22, 22, 23, .72);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; overscroll-behavior-x: none; }          /* la página no se mueve de lado: solo los carruseles */
body { overflow-x: clip; max-width: 100vw; margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.47 var(--fuente); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--acento); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: var(--acento-suave); }
.oculto-accesible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

/* ---------- barra superior (vidrio) ---------- */
.barra { position: sticky; top: 0; z-index: 30; background: var(--vidrio); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--linea); }
.barra-in { max-width: 1120px; margin: 0 auto; height: 56px; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 650; font-size: 19px; letter-spacing: -.02em; }
.marca-glifo { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 22px; width: 24px; padding: 3px 3px; border-radius: 7px; background: var(--texto); }
.marca-glifo i { display: block; width: 4.5px; border-radius: 1.5px; background: var(--fondo); }
.marca-glifo i:nth-child(1) { height: 11px; } .marca-glifo i:nth-child(2) { height: 8px; opacity: .7; } .marca-glifo i:nth-child(3) { height: 14px; background: #0a84ff; }
.barra-nav { display: flex; gap: 22px; margin-right: auto; }
.barra-nav a { color: var(--texto-2); font-size: 14px; transition: color .2s; }
.barra-nav a:hover, .barra-nav a.activo { color: var(--texto); }
.conexion { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linea); background: var(--sup); padding: 6px 14px 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform .2s var(--curva), box-shadow .2s; }
.conexion:hover { box-shadow: var(--sombra-1); }
.conexion:active { transform: scale(.97); }
.conexion .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); box-shadow: 0 0 0 3px rgba(0, 0, 0, .04); }
.conexion.ok .punto { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.conexion.falta { background: var(--acento); color: #fff; border-color: transparent; }
.conexion.falta .punto { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.conexion.demo .punto { background: var(--naranja); box-shadow: 0 0 0 3px rgba(255, 159, 10, .2); }

/* ---------- contenedor y vistas ---------- */
.app { max-width: 1120px; margin: 0 auto; padding: 0 24px 120px; outline: none; }
.vista { animation: entra .26s var(--curva) both; }
.vista.quieta { animation: none; }          /* repintado con datos nuevos: sin volver a animar */
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }          /* corta y sin desenfoque: en el celular el blur de toda la página se siente lento */
.aparece { animation: aparece .5s var(--curva) both; }
@keyframes aparece { from { opacity: 0; filter: blur(6px); transform: translateY(8px); } to { opacity: 1; filter: blur(0); transform: none; } }

/* ---------- portada ---------- */
.heroe { text-align: center; padding: 88px 0 56px; }
.heroe .antetitulo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--texto-2); margin-bottom: 18px; }
.heroe .antetitulo b { color: var(--acento); font-weight: 600; }
.heroe h1 { font-size: clamp(44px, 7vw, 80px); line-height: 1.02; letter-spacing: -.045em; font-weight: 700; margin: 0 auto; max-width: 13ch; }
.heroe h1 span { background: linear-gradient(120deg, #0a84ff 10%, #bf5af2 55%, #ff375f 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heroe p { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.38; color: var(--texto-2); max-width: 36ch; margin: 22px auto 34px; letter-spacing: -.017em; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila.centro { justify-content: center; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 22px; font-size: 17px; font-weight: 500; cursor: pointer; text-decoration: none;
  background: var(--acento); color: #fff; transition: background .2s, transform .18s var(--curva), box-shadow .2s, opacity .2s; white-space: nowrap; }
.boton:hover { background: var(--acento-2); }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .38; cursor: default; transform: none; }
.boton.sec { background: var(--sup-3); color: var(--texto); }
.boton.sec:hover { background: color-mix(in srgb, var(--sup-3) 85%, var(--texto) 15%); }
.boton.fantasma { background: transparent; color: var(--acento); padding-inline: 10px; }
.boton.fantasma:hover { background: var(--acento-suave); }
.boton.peligro { background: transparent; color: var(--rojo); }
.boton.peligro:hover { background: rgba(255, 59, 48, .1); }
.boton.chico { font-size: 14px; padding: 8px 16px; }
.boton.grande { font-size: 19px; padding: 16px 30px; }
.boton .flecha { transition: transform .25s var(--curva); }
.boton:hover .flecha { transform: translateX(3px); }

/* ---------- secciones ---------- */
.seccion { margin-top: 28px; }
.seccion-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.seccion-cab h2 { font-size: 32px; letter-spacing: -.03em; margin: 0; font-weight: 700; }
.seccion-cab p { margin: 4px 0 0; color: var(--texto-2); font-size: 17px; }
.segmentos { display: inline-flex; background: var(--sup-3); padding: 3px; border-radius: 11px; gap: 2px; }
.segmentos button { border: 0; background: transparent; padding: 7px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--texto-2); cursor: pointer; transition: all .25s var(--curva); }
.segmentos button.activo { background: var(--sup); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }

/* ---------- tarjetas de estilo ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }
.tarjeta { position: relative; display: flex; flex-direction: column; background: var(--sup); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--sombra-1); color: var(--texto);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva); cursor: pointer; text-align: left; border: 0; padding: 0; }
.tarjeta:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--sombra-2); }
.tarjeta:active { transform: scale(.985); }
.tarjeta:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.tarjeta .info { padding: 18px 20px 20px; }
.tarjeta h3 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.tarjeta p { margin: 6px 0 12px; font-size: 14.5px; line-height: 1.42; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--sup-3); color: var(--texto-2); }
.chip.acento { background: var(--acento-suave); color: var(--acento); }
.chip.borrador { background: rgba(255, 159, 10, .14); color: #c77700; }
.insignia { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--texto-3); }
.tarjeta.nueva { grid-column: 1 / -1; flex-direction: row; background: transparent; box-shadow: none; border: 2px dashed var(--linea-2); align-items: center; justify-content: center; min-height: 128px; gap: 18px; color: var(--texto-2); padding: 22px; text-align: left; }
.tarjeta.nueva .textos, .tarjeta.nueva .textos span { display: flex; flex-direction: column; gap: 2px; max-width: none; text-align: left; }
.tarjeta.nueva:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); box-shadow: none; }
.tarjeta.nueva .mas { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sup); box-shadow: var(--sombra-1); color: var(--acento); transition: transform .45s var(--rebote); }
.tarjeta.nueva .mas svg { display: block; }
.tarjeta.nueva:hover .mas { transform: rotate(90deg) scale(1.06); }
.tarjeta.nueva strong { font-size: 19px; color: var(--texto); letter-spacing: -.02em; }
.tarjeta.nueva span { font-size: 14px; max-width: 22ch; text-align: center; }

/* ---------- portadas animadas (una por estilo) ---------- */
.portada { position: relative; aspect-ratio: 4 / 3.6; overflow: hidden; isolation: isolate; }
.portada.grande { aspect-ratio: 16 / 10; border-radius: var(--r-3); box-shadow: var(--sombra-2); }
.portada * { position: absolute; }
@media (prefers-reduced-motion: reduce) { .portada *, .portada { animation: none !important; } }
/* Batalla: dos logos, barras de PS, destello y cuadro de texto */
.p-batalla { background: radial-gradient(120% 90% at 30% 70%, #173a2d 0%, transparent 55%), radial-gradient(120% 90% at 75% 60%, #4a2412 0%, transparent 55%), #0e0e12; }
.p-batalla .ps { top: 9%; width: 36%; height: 11%; border-radius: 6px; background: #f7f7f2; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.p-batalla .ps.izq { left: 8%; } .p-batalla .ps.der { right: 8%; }
.p-batalla .ps::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 22%; height: 22%; border-radius: 4px; background: #33363c; }
.p-batalla .ps b { left: 10%; bottom: 22%; height: 22%; border-radius: 4px; background: #34c759; width: 80%; }
.p-batalla .ps.der b { animation: ps 5s var(--curva) infinite; }
@keyframes ps { 0%, 38% { width: 80%; background: #34c759; } 46%, 70% { width: 14%; background: #ff3b30; } 86%, 100% { width: 80%; background: #34c759; } }
.p-batalla .ps i { left: 10%; top: 16%; width: 46%; height: 18%; border-radius: 3px; background: #1d1d1f; opacity: .85; }
.p-batalla .pj { width: 30%; aspect-ratio: 1; bottom: 26%; }
.p-batalla .pj.izq { left: 12%; animation: flota 2.4s ease-in-out infinite, ataca 5s var(--curva) infinite; }
.p-batalla .pj.der { right: 12%; animation: flota 2.4s ease-in-out -1.2s infinite, golpeado 5s linear infinite; }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6%; } }
@keyframes ataca { 0%, 34% { transform: none; } 38% { transform: translateX(-10%) scale(1.05, .92); } 42% { transform: translateX(34%) scale(.92, 1.08); } 50%, 100% { transform: none; } }
@keyframes golpeado { 0%, 41% { opacity: 1; transform: none; } 42% { transform: translateX(10%) rotate(10deg); } 44% { opacity: .2; } 46% { opacity: 1; } 48% { opacity: .2; } 50% { opacity: 1; } 52% { opacity: .2; } 54%, 100% { opacity: 1; transform: none; } }
.p-batalla .flash { inset: 0; background: #fff; opacity: 0; mix-blend-mode: screen; animation: flash 5s linear infinite; z-index: 3; }
@keyframes flash { 0%, 41% { opacity: 0; } 42% { opacity: .75; } 50%, 100% { opacity: 0; } }
.p-batalla .rayos { left: 50%; top: 48%; width: 42%; aspect-ratio: 1; translate: -50% -50%; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .9) 0 4deg, transparent 4deg 22deg); border-radius: 50%; mask: radial-gradient(circle, transparent 28%, #000 30%, #000 60%, transparent 62%); animation: rayos 5s var(--curva) infinite; }
@keyframes rayos { 0%, 41% { opacity: 0; transform: scale(.4); } 43% { opacity: 1; transform: scale(1); } 52%, 100% { opacity: 0; transform: scale(1.4); } }
.p-batalla .caja { left: 7%; right: 7%; bottom: 6%; height: 15%; border-radius: 8px; background: #fbfbf8; box-shadow: inset 0 0 0 3px #2b3450, inset 0 0 0 5px #fbfbf8, inset 0 0 0 6px #7fa3d9; }
.p-batalla .caja span { left: 7%; top: 50%; translate: 0 -50%; font: 700 clamp(10px, 1.25vw, 14px)/1 var(--fuente); color: #25262b; white-space: nowrap; overflow: hidden; width: 0; animation: escribe 5s steps(22, end) infinite; }
@keyframes escribe { 0%, 8% { width: 0; } 30%, 100% { width: 72%; } }
/* SaaS: ventana, cursor que hace clic y aviso que entra con desenfoque */
.p-saas { background: radial-gradient(80% 60% at 70% 0%, rgba(0, 113, 227, .22), transparent 60%), linear-gradient(180deg, #eef2f8, #e6ebf3); }
@media (prefers-color-scheme: dark) { .p-saas { background: radial-gradient(80% 60% at 70% 0%, rgba(41, 151, 255, .3), transparent 60%), linear-gradient(180deg, #16181d, #0e1014); } }
.p-saas .ventana { left: 10%; top: 13%; width: 80%; height: 70%; border-radius: 12px; background: #fff; box-shadow: 0 30px 60px rgba(20, 40, 80, .18), 0 2px 6px rgba(0, 0, 0, .06); transform: perspective(900px) rotateX(6deg); animation: ventana 6s var(--curva) infinite; }
@keyframes ventana { 0%, 100% { transform: perspective(900px) rotateX(6deg) scale(1); } 40%, 62% { transform: perspective(900px) rotateX(0deg) scale(1.04); } }
.p-saas .ventana .tb { left: 0; right: 0; top: 0; height: 13%; border-bottom: 1px solid #eef0f3; }
.p-saas .ventana .tb i { top: 38%; width: 3.2%; aspect-ratio: 1; border-radius: 50%; }
.p-saas .ventana .tb i:nth-child(1) { left: 4%; background: #ff5f57; } .p-saas .ventana .tb i:nth-child(2) { left: 9%; background: #febc2e; } .p-saas .ventana .tb i:nth-child(3) { left: 14%; background: #28c840; }
.p-saas .ventana .lado { left: 0; top: 13%; bottom: 0; width: 24%; background: #f7f8fa; border-right: 1px solid #eef0f3; }
.p-saas .ventana .l { height: 5.5%; border-radius: 4px; background: #e9ecf1; }
.p-saas .ventana .l.a { left: 30%; top: 22%; width: 44%; background: #d9dee6; } .p-saas .ventana .l.b { left: 30%; top: 33%; width: 60%; } .p-saas .ventana .l.c { left: 30%; top: 42%; width: 52%; } .p-saas .ventana .l.d { left: 30%; top: 51%; width: 58%; }
.p-saas .boton-demo { left: 30%; top: 66%; width: 30%; height: 14%; border-radius: 999px; background: #0071e3; animation: pulsa 6s var(--curva) infinite; }
@keyframes pulsa { 0%, 44% { transform: scale(1); } 47% { transform: scale(.9); } 52%, 100% { transform: scale(1); } }
.p-saas .cursor { width: 7%; left: 70%; top: 88%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); animation: cursor 6s cubic-bezier(.45, 0, .2, 1) infinite; z-index: 2; }
@keyframes cursor { 0% { left: 72%; top: 90%; } 40% { left: 44%; top: 71%; } 46% { left: 44%; top: 71%; transform: scale(.85); } 50% { transform: scale(1); } 74% { left: 44%; top: 71%; } 100% { left: 72%; top: 90%; } }
.p-saas .aviso { right: 7%; top: 6%; width: 42%; height: 13%; border-radius: 10px; background: rgba(255, 255, 255, .92); box-shadow: 0 12px 30px rgba(20, 40, 80, .18); opacity: 0; animation: aviso 6s var(--curva) infinite; display: flex; align-items: center; }
.p-saas .aviso::before { content: ""; position: absolute; left: 8%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #34c759; }
.p-saas .aviso::after { content: ""; position: absolute; left: 26%; width: 58%; height: 20%; border-radius: 4px; background: #d9dee6; }
@keyframes aviso { 0%, 50% { opacity: 0; filter: blur(6px); transform: translateY(-30%); } 58%, 82% { opacity: 1; filter: blur(0); transform: none; } 92%, 100% { opacity: 0; filter: blur(6px); transform: translateY(-10%); } }
/* Motion Graphics: fondo carbón, tarjeta de cristal que nace desenfocada al 86 % y píldora que se abre */
.p-motion { background: radial-gradient(90% 70% at 50% 40%, #2a2a2c 0%, #151515 60%, #0b0b0b 100%); }
.p-motion .vidrio { left: 16%; top: 20%; width: 68%; height: 56%; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); animation: nace 5s var(--curva) infinite; }
@keyframes nace { 0% { opacity: 0; filter: blur(12px); transform: scale(.86); } 24% { opacity: 1; filter: blur(0); } 40%, 80% { transform: scale(1); opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(10px); transform: translateY(-14%) scale(1.02); } }
.p-motion .cifra { left: 10%; top: 16%; font: 800 clamp(26px, 3.6vw, 44px)/1 var(--fuente); color: #fff; letter-spacing: -.04em; }
.p-motion .sub { left: 10%; top: 50%; width: 55%; height: 7%; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.p-motion .sub2 { left: 10%; top: 64%; width: 38%; height: 7%; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.p-motion .pildora { right: 9%; top: 18%; height: 18%; border-radius: 999px; background: #30d158; width: 0; animation: pildora 5s var(--curva) infinite; transform: perspective(300px) rotateY(-12deg); }
@keyframes pildora { 0%, 22% { width: 0; height: 2%; top: 26%; } 30% { width: 30%; height: 2%; top: 26%; } 38%, 80% { width: 30%; height: 18%; top: 18%; } 100% { width: 30%; height: 18%; top: 18%; opacity: 0; } }
.p-motion .desenfoque { left: -12%; bottom: -18%; width: 46%; height: 46%; border-radius: 22px; background: rgba(255, 255, 255, .08); filter: blur(14px); animation: primerplano 5s linear infinite; }
@keyframes primerplano { from { transform: translateX(0); } to { transform: translateX(260%); } }
/* Documental: papel rasgado, palabras que entran, polaroid e hilo rojo */
.p-documental { background: radial-gradient(90% 80% at 50% 35%, #2a2522 0%, #141110 70%); }
.p-documental .polaroid { right: 11%; top: 12%; width: 30%; aspect-ratio: .86; background: #f4f1ea; box-shadow: 0 16px 30px rgba(0, 0, 0, .5); transform: rotate(7deg); animation: polaroid 6s var(--curva) infinite; }
.p-documental .polaroid::before { content: ""; position: absolute; left: 8%; right: 8%; top: 7%; height: 70%; background: linear-gradient(160deg, #6d6a66, #2f2c2a); }
@keyframes polaroid { 0% { opacity: 0; transform: rotate(18deg) translateY(-14%) scale(1.08); } 16%, 100% { opacity: 1; transform: rotate(7deg); } }
.p-documental .pin { right: 24%; top: 11%; width: 4.2%; aspect-ratio: 1; border-radius: 50%; background: #e5484d; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); z-index: 2; }
.p-documental svg { inset: 0; width: 100%; height: 100%; }
.p-documental .hilo { fill: none; stroke: #e5484d; stroke-width: 1.6; stroke-dasharray: 160; stroke-dashoffset: 160; animation: hilo 6s var(--curva) infinite; }
@keyframes hilo { 0%, 20% { stroke-dashoffset: 160; } 55%, 100% { stroke-dashoffset: 0; } }
.p-documental .papel { left: 7%; bottom: 16%; width: 66%; padding: 3% 4%; background: #efe9dc; clip-path: polygon(0 8%, 6% 0, 14% 6%, 24% 1%, 35% 7%, 47% 0, 58% 6%, 70% 1%, 82% 7%, 92% 0, 100% 6%, 100% 92%, 94% 100%, 84% 94%, 72% 100%, 60% 93%, 48% 100%, 36% 94%, 24% 100%, 12% 93%, 0 100%); position: absolute; }
.p-documental .papel b { position: relative; display: inline-block; font: 800 clamp(12px, 1.6vw, 18px)/1.15 var(--fuente); color: #1b1714; letter-spacing: -.02em; margin-right: .28em; opacity: 0; animation: palabra 6s var(--curva) infinite; }
.p-documental .papel b:nth-child(2) { animation-delay: .25s; } .p-documental .papel b:nth-child(3) { animation-delay: .5s; }
@keyframes palabra { 0%, 6% { opacity: 0; transform: translateY(30%); filter: blur(4px); } 12%, 88% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; } }
.p-documental .luz { left: -20%; top: -30%; width: 60%; height: 160%; background: linear-gradient(90deg, transparent, rgba(255, 230, 190, .16), transparent); transform: rotate(18deg); animation: luz 6s ease-in-out infinite; }
@keyframes luz { from { translate: -40% 0; } to { translate: 260% 0; } }
/* Genérica (estilos creados por el usuario): malla de color con sus iniciales */
.p-generico { background: radial-gradient(70% 70% at 20% 20%, var(--c1), transparent 60%), radial-gradient(70% 70% at 85% 30%, var(--c2), transparent 60%), radial-gradient(80% 80% at 50% 100%, var(--c3), transparent 60%), #111; animation: malla 12s ease-in-out infinite alternate; background-size: 140% 140%; }
@keyframes malla { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.p-generico .iniciales { inset: 0; display: grid; place-items: center; font: 800 clamp(48px, 6vw, 72px)/1 var(--fuente); letter-spacing: -.05em; color: rgba(255, 255, 255, .92); text-shadow: 0 10px 40px rgba(0, 0, 0, .35); position: absolute; }

/* ---------- detalle de estilo ---------- */
.volver { display: inline-flex; align-items: center; gap: 6px; margin: 26px 0 10px; font-size: 15px; color: var(--acento); border: 0; background: none; cursor: pointer; padding: 0; }
.detalle { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 8px; }
.detalle h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.04em; line-height: 1.05; margin: 10px 0 12px; font-weight: 700; }
.detalle .resumen { font-size: 20px; line-height: 1.42; color: var(--texto-2); margin: 0 0 18px; letter-spacing: -.015em; }
.meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); margin: 18px 0 0; }
.meta b { color: var(--texto); font-weight: 600; }
.panel { background: var(--sup); border-radius: var(--r-3); box-shadow: var(--sombra-1); padding: 26px; }
.panel h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.025em; }
.panel .ayuda { margin: 0 0 18px; color: var(--texto-2); font-size: 15px; }
.campo { display: block; margin-bottom: 18px; }
.campo > span, .etiqueta { display: block; font-size: 13px; font-weight: 600; color: var(--texto-2); margin: 0 0 8px; letter-spacing: -.005em; }
textarea, input[type=text], input[type=url], select { width: 100%; border: 1px solid var(--linea-2); background: var(--sup-2); border-radius: 14px; padding: 13px 15px; font-size: 16px; line-height: 1.45; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; resize: vertical; }
textarea { min-height: 128px; }
textarea:focus, input:focus, select:focus { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); background: var(--sup); }
textarea::placeholder, input::placeholder { color: var(--texto-3); }
.ejemplos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ejemplos button { border: 1px solid var(--linea); background: var(--sup); color: var(--texto-2); border-radius: 999px; font-size: 13px; padding: 6px 12px; cursor: pointer; transition: all .2s var(--curva); }
.ejemplos button:hover { color: var(--acento); border-color: var(--acento); background: var(--acento-suave); }
.soltar { border: 1.5px dashed var(--linea-2); border-radius: 16px; padding: 18px; text-align: center; color: var(--texto-2); font-size: 14px; cursor: pointer; transition: all .25s var(--curva); background: var(--sup-2); }
.soltar:hover, .soltar.encima { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.soltar strong { color: var(--texto); font-weight: 600; }
.archivos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.archivos li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--sup-3); font-size: 14px; animation: aparece .4s var(--curva) both; }
.archivos li .nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivos li small { color: var(--texto-3); }
.archivos li button { border: 0; background: none; color: var(--texto-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.acciones { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; }
.nota { font-size: 13px; color: var(--texto-3); }
details.guia { margin-top: 26px; }
details.guia summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 17px; padding: 16px 20px; background: var(--sup); border-radius: var(--r-2); box-shadow: var(--sombra-1); }
details.guia summary::-webkit-details-marker { display: none; }
details.guia summary::after { content: "›"; transform: rotate(90deg); transition: transform .3s var(--curva); color: var(--texto-3); font-size: 22px; }
details.guia[open] summary::after { transform: rotate(-90deg); }
.md { padding: 6px 22px 22px; font-size: 15px; line-height: 1.55; color: var(--texto); }
.md h1 { display: none; }
.md h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); margin: 22px 0 8px; }
.md ul { margin: 0; padding-left: 20px; } .md li { margin: 4px 0; } .md code { background: var(--sup-3); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.md p { margin: 8px 0; color: var(--texto-2); }

/* ---------- trabajo en curso ---------- */
.trabajo { max-width: 760px; margin: 0 auto; }
.estado-grande { display: flex; align-items: center; gap: 18px; margin: 34px 0 8px; }
.anillo { width: 54px; height: 54px; flex: none; border-radius: 50%; position: relative; }
.anillo.girando { background: conic-gradient(from 0deg, var(--acento), transparent 70%); animation: gira 1s linear infinite; mask: radial-gradient(circle, transparent 58%, #000 60%); }
@keyframes gira { to { transform: rotate(360deg); } }
.anillo.ok { background: var(--verde); display: grid; place-items: center; animation: late .6s var(--rebote) both; }
.anillo.mal { background: var(--rojo); display: grid; place-items: center; animation: late .6s var(--rebote) both; }
.anillo svg { width: 26px; height: 26px; }
@keyframes late { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.estado-grande h1 { margin: 0; font-size: 30px; letter-spacing: -.03em; }
.estado-grande p { margin: 2px 0 0; color: var(--texto-2); font-size: 15px; }
.linea-tiempo { list-style: none; margin: 26px 0 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); border-radius: 2px; }
.linea-tiempo li { position: relative; display: flex; gap: 14px; padding: 8px 0; animation: aparece .5s var(--curva) both; }
.linea-tiempo .ico { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--sup); box-shadow: var(--sombra-1); display: grid; place-items: center; color: var(--texto-2); z-index: 1; }
.linea-tiempo .ico svg { width: 16px; height: 16px; }
.linea-tiempo .txt { padding-top: 5px; font-size: 15px; }
.linea-tiempo .txt small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 1px; }
.linea-tiempo li.dice .txt { background: var(--sup); box-shadow: var(--sombra-1); padding: 12px 16px; border-radius: 16px; border-top-left-radius: 6px; font-size: 15px; line-height: 1.5; }
.linea-tiempo li.dice .ico { background: #1d1d1f; color: #fff; }
.linea-tiempo li.error .txt { color: var(--rojo); }
.resultado { margin-top: 30px; animation: aparece .6s var(--curva) both; }
.resultado video { width: 100%; max-height: 70vh; border-radius: var(--r-2); background: #000; box-shadow: var(--sombra-2); }

/* ---------- asistente para crear un estilo ---------- */
.asistente { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; margin-top: 30px; }
.pasos-cab { display: flex; align-items: center; gap: 14px; margin: 30px 0 0; flex-wrap: wrap; }
.pasos-cab h1 { font-size: 34px; letter-spacing: -.035em; margin: 0; }
.progreso { display: flex; gap: 6px; margin-left: auto; }
.progreso i { width: 28px; height: 5px; border-radius: 3px; background: var(--linea-2); transition: background .4s var(--curva), width .4s var(--curva); }
.progreso i.hecho { background: var(--acento); }
.progreso i.ahora { background: var(--acento); width: 46px; }
.paso-titulo { font-size: 26px; letter-spacing: -.03em; margin: 0 0 6px; }
.paso-sub { color: var(--texto-2); margin: 0 0 22px; font-size: 17px; }
.consejo { position: sticky; top: 84px; background: var(--sup); border-radius: var(--r-3); padding: 22px; box-shadow: var(--sombra-1); font-size: 14.5px; line-height: 1.5; }
.consejo .ico-consejo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd60a, #ff9f0a); color: #fff; margin-bottom: 12px; }
.consejo h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.consejo ul { margin: 8px 0 0; padding-left: 18px; color: var(--texto-2); } .consejo li { margin: 5px 0; }
.consejo .mal, .consejo .bien { display: block; padding: 8px 12px; border-radius: 10px; margin: 8px 0; font-size: 13.5px; }
.consejo .mal { background: rgba(255, 59, 48, .08); color: #c9302c; } .consejo .bien { background: var(--verde-suave); color: #1e7e34; }
@media (prefers-color-scheme: dark) { .consejo .mal { color: #ff6961; } .consejo .bien { color: #30d158; } }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.opcion { border: 1.5px solid var(--linea-2); border-radius: 16px; padding: 14px; background: var(--sup); cursor: pointer; text-align: left; transition: all .25s var(--curva); }
.opcion:hover { border-color: var(--texto-3); }
.opcion.activa { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.opcion strong { display: block; font-size: 15px; } .opcion small { color: var(--texto-2); font-size: 12.5px; }
.opcion .forma { display: block; background: var(--sup-3); border-radius: 5px; margin-bottom: 10px; height: 34px; }
.claridad { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--texto-3); min-height: 18px; }
.claridad .barra-c { width: 90px; height: 5px; border-radius: 3px; background: var(--linea); overflow: hidden; position: relative; }
.claridad .barra-c i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; transition: width .5s var(--curva), background .5s; }
.claridad b { font-weight: 600; }
.claridad .pista { color: var(--texto-2); }
.medidor-total { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }
.medidor-total .grande { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.lista-check { list-style: none; padding: 0; margin: 10px 0 0; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14.5px; color: var(--texto-2); }
.lista-check li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--verde-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2328a745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lista-check li.no::before { background: rgba(255, 59, 48, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23ff3b30' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mini-trabajo { margin-top: 18px; background: var(--sup-2); border: 1px solid var(--linea); border-radius: 18px; padding: 8px 18px 14px; }
.mini-trabajo .linea-tiempo { margin-top: 8px; }
.editor-md { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; min-height: 360px; line-height: 1.55; }
.fin-estilo { text-align: center; padding: 30px 0 10px; }
.fin-estilo .anillo { margin: 0 auto 18px; width: 72px; height: 72px; }
.fin-estilo .anillo svg { width: 34px; height: 34px; }

/* ---------- ajustes ---------- */
.ajustes { max-width: 760px; margin: 0 auto; }
.ajustes h1 { font-size: 40px; letter-spacing: -.04em; margin: 44px 0 24px; }
.grupo { background: var(--sup); border-radius: var(--r-2); box-shadow: var(--sombra-1); overflow: hidden; margin-bottom: 26px; }
.grupo-tit { font-size: 13px; font-weight: 600; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px 18px; }
.renglon { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.renglon + .renglon { border-top: 1px solid var(--linea); }
.renglon .icono-app { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.renglon .cuerpo { flex: 1; min-width: 0; } .renglon .cuerpo strong { display: block; font-weight: 600; font-size: 16px; } .renglon .cuerpo small { color: var(--texto-2); font-size: 13.5px; }
.interruptor { position: relative; width: 51px; height: 31px; flex: none; }
.interruptor input { opacity: 0; width: 0; height: 0; position: absolute; }
.interruptor span { position: absolute; inset: 0; background: var(--linea-2); border-radius: 999px; transition: background .25s; cursor: pointer; }
.interruptor span::before { content: ""; position: absolute; width: 27px; height: 27px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .3s var(--rebote); }
.interruptor input:checked + span { background: #34c759; }
.interruptor input:checked + span::before { transform: translateX(20px); }
.estado-ok { color: var(--verde); font-weight: 600; font-size: 14px; } .estado-no { color: var(--texto-3); font-size: 14px; }

/* ---------- proyectos ---------- */
.lista-proyectos { display: grid; gap: 10px; }
.proyecto { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--sup); border-radius: 16px; box-shadow: var(--sombra-1); color: var(--texto); transition: transform .3s var(--curva); }
.proyecto:hover { transform: translateY(-2px); }
.proyecto .cuerpo { flex: 1; min-width: 0; } .proyecto strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proyecto small { color: var(--texto-2); }
.vacio { text-align: center; color: var(--texto-2); padding: 60px 0; }

/* ---------- hoja (modal que sube) y avisos ---------- */
.hoja { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fondo .3s ease both; }
@keyframes fondo { from { opacity: 0; } to { opacity: 1; } }
.hoja-caja { width: min(480px, 100%); background: var(--sup); border-radius: var(--r-4); box-shadow: 0 30px 90px rgba(0, 0, 0, .35); padding: 34px 32px 28px; text-align: center; animation: sube .5s var(--curva) both; position: relative; }
@keyframes sube { from { opacity: 0; transform: translateY(24px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hoja-caja h2 { margin: 14px 0 8px; font-size: 26px; letter-spacing: -.03em; }
.hoja-caja p { color: var(--texto-2); margin: 0 0 22px; font-size: 16px; }
.hoja-caja .cerrar { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--sup-3); color: var(--texto-2); cursor: pointer; font-size: 18px; line-height: 1; }
.pasos-conexion { text-align: left; display: grid; gap: 10px; margin: 0 0 22px; }
.paso-c { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sup-3); font-size: 15px; }
.paso-c .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sup); font-size: 13px; font-weight: 700; color: var(--texto-2); flex: none; }
.paso-c.hecho .num { background: #34c759; color: #fff; }
.paso-c.ahora { box-shadow: inset 0 0 0 2px var(--acento); background: var(--acento-suave); }
.avisos { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.aviso-t { background: rgba(29, 29, 31, .92); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); animation: aviso-t .45s var(--curva) both; backdrop-filter: blur(10px); }
.aviso-t.fuera { animation: aviso-f .35s ease both; }
@keyframes aviso-t { from { opacity: 0; transform: translateY(14px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes aviso-f { to { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.cinta-demo { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 18px auto 0; padding: 10px 16px; border-radius: 999px; background: rgba(255, 159, 10, .12); color: #b36b00; font-size: 14px; width: fit-content; }
@media (prefers-color-scheme: dark) { .cinta-demo { color: #ffb340; } }

/* ---------- pantallas chicas ---------- */
@media (max-width: 860px) {
  .detalle, .asistente { grid-template-columns: 1fr; gap: 26px; }
  .consejo { position: static; }
  .barra-nav { display: none; }
  .barra-in { gap: 12px; }
  .marca { margin-right: auto; }
}
@media (max-width: 520px) {
  .app { padding: 0 16px 100px; } .barra-in { padding: 0 16px; }
  .heroe { padding: 56px 0 36px; }
  .panel { padding: 20px; }
  .progreso i { width: 16px; } .progreso i.ahora { width: 26px; }
  .conexion-txt { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------------------------------------------------------------- cambios: el revisor del cliente (marca momento, zona y nota) */
.cambios-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: var(--sup-2); border: 1px solid var(--linea); }
.cambios-cab .nota { margin: 2px 0 0; }
.cambios-cab .boton { display: inline-flex; align-items: center; gap: 8px; }
.revisor-c { margin-top: 6px; }
.rv-marco { display: flex; justify-content: center; background: #000; border-radius: 16px; overflow: hidden; }
.rv-escena { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.rv-escena video { display: block; max-width: 100%; max-height: 68vh; }
.rv-capa { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.rv-zona { position: absolute; border: 3px solid var(--rojo); border-radius: 6px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .18); pointer-events: none; }
.rv-zona.vieja { border-style: dashed; box-shadow: none; opacity: .8; }
.rv-controles { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rv-play { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--sup-3); color: var(--texto); font-size: 14px; cursor: pointer; }
.rv-pista { position: relative; flex: 1; display: flex; align-items: center; }
.rv-pista input { width: 100%; accent-color: var(--acento); }
.rv-ticks { position: absolute; inset: 0 8px; pointer-events: none; }
.rv-ticks i { position: absolute; top: -6px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--rojo); }
.rv-t { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--texto-2); min-width: 54px; text-align: right; }
.rv-ayuda { margin: 12px 0 10px; font-size: 14px; }
.rv-nota { display: flex; gap: 10px; }
.rv-nota input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto); }
.rv-nota input:focus, .rv-general textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.rv-marcas { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.rv-marcas li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linea); font-size: 15px; }
.rv-marcas li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rv-ir { border: 0; background: var(--acento-suave); color: var(--acento); border-radius: 8px; padding: 3px 8px; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.rv-quitar { border: 0; background: transparent; color: var(--texto-3); cursor: pointer; padding: 4px; display: inline-flex; }
.rv-quitar:hover { color: var(--rojo); }
.rv-general { display: block; margin-top: 16px; font-size: 15px; font-weight: 600; }
.rv-general small { color: var(--texto-3); font-weight: 400; }
.rv-general textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: 16px; font-weight: 400; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto); resize: vertical; }
.preferencias { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.preferencias li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--sup-2); border: 1px solid var(--linea); font-size: 15px; }
.preferencias li span { flex: 1; }
@media (hover: none) { .solo-teclado { display: none; } }
@media (max-width: 600px) {
  .cambios-cab { flex-direction: column; align-items: stretch; }
  .rv-nota { flex-direction: column; }
}

/* carruseles: se deslizan de lado sin arrastrar la página entera */
.c-est-fila, .c-ideas, .ex-filtros { overscroll-behavior-x: contain; }

/* el resplandor detrás de «Cuéntame tu idea» se salía 6 px de la pantalla y en Android la página se podía arrastrar de lado */
.app { overflow-x: clip; }
@media (max-width: 760px) { .app .c-zona::before { left: 0; right: 0; } }