/* ============================================================================
   demo-productora-ia.css · Productora de Contenidos IA (DARK «Sala oscura»,
   negro sala + señal REC + ámbar) · Capa 1 (home/about/contact/header/footer/
   page-header) — la Capa 2 agrega el ensamble de módulos al final del archivo.
   Scopeado 100% en html.demo-productora-ia. Escrito entero desde el blueprint
   propio (mockup Septimio) — NO deriva de ningún theme Porto. Re-skineable: los
   colores salen de var(--primary)=REC / (--secondary)=ámbar / (--tertiary)=plata /
   (--quaternary)=acero / (--dark)=negro sala / (--light)=pantalla, que
   SkinColorService reinyecta por tenant (skin:auto). Solo literales de
   contraste (rgba sobre frame) quedan inline.
   Dirección #9 «Sala oscura»: Bricolage Grotesque 800 (display, tracking -.035em,
   line-height .92) + Instrument Sans (cuerpo/UI) + JetBrains Mono (timecodes,
   eyebrows, chips — mono a propósito). Motivos: letterbox 2.39:1 (.pi-frame),
   esquinas de visor (.pi-vf), grano (.pi-grain), glow del acento, timecode (.pi-tc),
   señal REC (.pi-rec), gradientes g1..g6 para frames sin foto.
   ============================================================================ */

html.demo-productora-ia {
    --pi-ink: var(--dark, #0C0C0F);
    --pi-steel: var(--quaternary, #2A2C33);
    --pi-silver: var(--tertiary, #9AA0AB);
    --pi-screen: var(--light, #F3F1EA);
    --pi-rec: var(--primary, #FF3D2E);
    --pi-amber: var(--secondary, #F2B33D);
    --pi-graphite: color-mix(in srgb, var(--pi-ink) 80%, var(--pi-steel));
    --pi-panel: color-mix(in srgb, var(--pi-ink) 88%, var(--pi-steel));
    --pi-lead: color-mix(in srgb, var(--pi-screen) 72%, var(--pi-silver));
    --pi-line: color-mix(in srgb, var(--pi-screen) 12%, transparent);
    --pi-line-2: color-mix(in srgb, var(--pi-screen) 22%, transparent);
    --pi-line-3: color-mix(in srgb, var(--pi-screen) 8%, transparent);
    --pi-fd: var(--font-family-primary, "Bricolage Grotesque", "Archivo Black", "Arial Narrow", Impact, sans-serif);
    --pi-fb: var(--font-family-secondary, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
    --pi-fm: var(--font-family-tertiary, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
    --pi-radius: 4px;
    --pi-g1: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--pi-rec) 16%, var(--pi-steel)) 0%, var(--pi-graphite) 55%, var(--pi-ink) 100%);
    --pi-g2: radial-gradient(90% 80% at 80% 80%, color-mix(in srgb, #2C3A4A 72%, var(--pi-steel)) 0%, var(--pi-graphite) 60%, var(--pi-ink) 100%);
    --pi-g3: radial-gradient(100% 100% at 50% 0%, color-mix(in srgb, var(--pi-amber) 22%, var(--pi-steel)) 0%, color-mix(in srgb, var(--pi-amber) 6%, var(--pi-graphite)) 50%, var(--pi-ink) 100%);
    --pi-g4: linear-gradient(135deg, color-mix(in srgb, var(--pi-steel) 72%, var(--pi-ink)) 0%, var(--pi-ink) 60%);
    --pi-g5: radial-gradient(80% 80% at 30% 70%, color-mix(in srgb, var(--pi-rec) 9%, #34293A) 0%, var(--pi-graphite) 55%, var(--pi-ink) 100%);
    --pi-g6: radial-gradient(100% 80% at 70% 30%, color-mix(in srgb, #24343A 80%, var(--pi-steel)) 0%, var(--pi-graphite) 55%, var(--pi-ink) 100%);
}

html.demo-productora-ia body,
html.demo-productora-ia .body,
html.demo-productora-ia .pi-main {
    background: var(--pi-ink);
    color: var(--pi-screen);
    font-family: var(--pi-fb);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
html.demo-productora-ia .pi-main p { font-family: var(--pi-fb); color: inherit; }
html.demo-productora-ia img { max-width: 100%; }
html.demo-productora-ia a { color: inherit; text-decoration: none; transition: color .18s; }
html.demo-productora-ia a:hover { color: var(--pi-amber); text-decoration: none; }
html.demo-productora-ia .pi-wrap { max-width: 1312px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
html.demo-productora-ia .pi-disp, html.demo-productora-ia .pi-h2 { font-family: var(--pi-fd); font-weight: 800; letter-spacing: -.035em; line-height: .92; margin: 0; color: var(--pi-screen); text-wrap: balance; font-variation-settings: "opsz" 96; }
html.demo-productora-ia .pi-h2 { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -.03em; line-height: .95; }
html.demo-productora-ia .pi-mono { font-family: var(--pi-fm); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pi-silver); }
html.demo-productora-ia .pi-eyebrow { font-family: var(--pi-fm); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--pi-rec); display: block; margin-bottom: 14px; }
html.demo-productora-ia .pi-lead { font-family: var(--pi-fb); font-size: 19px; line-height: 1.5; color: var(--pi-lead); margin: 0; }
html.demo-productora-ia .pi-lead-sm { font-size: 16px; }
html.demo-productora-ia .pi-lead b { color: var(--pi-screen); font-weight: 600; }
html.demo-productora-ia .pi-hr { height: 1px; background: var(--pi-line); }
html.demo-productora-ia .pi-link-arrow { color: var(--pi-screen); display: inline-block; margin-top: 6px; }
html.demo-productora-ia .pi-link-arrow:hover { color: var(--pi-amber); }
html.demo-productora-ia em { font-style: normal; color: var(--pi-amber); }

/* ── botones (pill 52px, acento = REC, ghost = filete pantalla) ── */
html.demo-productora-ia .pi-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 24px;
    border-radius: 999px; font-family: var(--pi-fb); font-weight: 600; font-size: 15px; letter-spacing: .01em;
    border: 1px solid transparent; cursor: pointer; transition: .18s; white-space: nowrap; line-height: 1;
}
html.demo-productora-ia .pi-btn-acc { background: var(--pi-rec); color: var(--pi-ink); border-color: var(--pi-rec); }
html.demo-productora-ia .pi-btn-acc:hover { background: var(--pi-amber); border-color: var(--pi-amber); color: var(--pi-ink); }
html.demo-productora-ia .pi-btn-ghost { background: transparent; color: var(--pi-screen); border-color: var(--pi-line-2); }
html.demo-productora-ia .pi-btn-ghost:hover { border-color: var(--pi-screen); color: var(--pi-screen); }

/* ── motivos: frame (letterbox) · visor · grano · glow · timecode · REC ── */
html.demo-productora-ia .pi-frame { position: relative; overflow: hidden; background: var(--pi-graphite); border-radius: var(--pi-radius); isolation: isolate; }
html.demo-productora-ia .pi-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(var(--pi-ink) 0 8%, transparent 8% 92%, var(--pi-ink) 92% 100%); }
html.demo-productora-ia .pi-frame.g1 { background: var(--pi-g1); }
html.demo-productora-ia .pi-frame.g2 { background: var(--pi-g2); }
html.demo-productora-ia .pi-frame.g3 { background: var(--pi-g3); }
html.demo-productora-ia .pi-frame.g4 { background: var(--pi-g4); }
html.demo-productora-ia .pi-frame.g5 { background: var(--pi-g5); }
html.demo-productora-ia .pi-frame.g6 { background: var(--pi-g6); }
html.demo-productora-ia .pi-frame-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; display: block; }
html.demo-productora-ia .pi-frame-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,15,.15) 0%, rgba(12,12,15,.55) 100%); }
html.demo-productora-ia .pi-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .16; 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='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>"); }
html.demo-productora-ia .pi-vf { position: absolute; inset: 14px; z-index: 3; pointer-events: none; }
html.demo-productora-ia .pi-vf span { position: absolute; width: 18px; height: 18px; border-color: rgba(243,241,234,.55); border-style: solid; border-width: 0; }
html.demo-productora-ia .pi-vf .a { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
html.demo-productora-ia .pi-vf .b { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
html.demo-productora-ia .pi-vf .c { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
html.demo-productora-ia .pi-vf .d { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
html.demo-productora-ia .pi-tc { position: absolute; z-index: 3; font-family: var(--pi-fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,241,234,.78); line-height: 1; }
html.demo-productora-ia .pi-tc-tl { left: 28px; top: 26px; }
html.demo-productora-ia .pi-tc-tr { right: 28px; top: 26px; }
html.demo-productora-ia .pi-tc-br { right: 28px; bottom: 26px; }
html.demo-productora-ia .pi-rec { display: inline-flex; align-items: center; gap: 8px; }
html.demo-productora-ia .pi-rec i, html.demo-productora-ia .pi-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pi-rec); box-shadow: 0 0 12px var(--pi-rec); display: inline-block; animation: pi-blink 1.6s ease-in-out infinite; }
@keyframes pi-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
html.demo-productora-ia .pi-glow { position: absolute; width: 55%; height: 40%; left: 12%; top: 30%; filter: blur(60px); background: var(--pi-rec); opacity: .16; border-radius: 50%; z-index: 1; pointer-events: none; }
html.demo-productora-ia .pi-mark { display: inline-block; vertical-align: middle; color: var(--pi-screen); }
html.demo-productora-ia .pi-mark text { font-family: var(--pi-fd); }
html.demo-productora-ia .pi-mark-rec { fill: var(--pi-rec); }
html.demo-productora-ia .pi-wordmark { font-family: var(--pi-fd); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--pi-screen); text-transform: uppercase; white-space: nowrap; }
html.demo-productora-ia .pi-wordmark small { font-weight: 600; font-size: .5em; letter-spacing: .4em; margin-left: .3em; vertical-align: .1em; }
@media (prefers-reduced-motion: reduce) { html.demo-productora-ia .pi-rec i, html.demo-productora-ia .pi-rec-dot { animation: none; } }

/* ══ HEADER (barra negra, filete inferior, sticky) ══ */
html.demo-productora-ia #header.pi-header {
    position: sticky; top: 0; z-index: 1030; min-height: 0; height: auto;
    background: color-mix(in srgb, var(--pi-ink) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pi-line-3); box-shadow: none;
}
html.demo-productora-ia .pi-bar { max-width: 1312px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; gap: 28px; }
html.demo-productora-ia .pi-brand { display: inline-flex; align-items: center; gap: 14px; color: var(--pi-screen); }
html.demo-productora-ia .pi-brand:hover { color: var(--pi-screen); }
html.demo-productora-ia .pi-wordmark-hd { font-size: 22px; }
html.demo-productora-ia .pi-nav { display: flex; gap: 30px; margin-left: auto; }
html.demo-productora-ia .pi-nav a { font-family: var(--pi-fb); font-size: 15px; font-weight: 500; color: var(--pi-screen); transition: .18s; }
html.demo-productora-ia .pi-nav a:hover, html.demo-productora-ia .pi-nav a.on { color: var(--pi-rec); }
html.demo-productora-ia .pi-hright { display: flex; align-items: center; gap: 14px; }
html.demo-productora-ia .pi-hd-cta { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--pi-rec); color: var(--pi-ink); font-family: var(--pi-fb); font-weight: 600; font-size: 14px; transition: .18s; white-space: nowrap; }
html.demo-productora-ia .pi-hd-cta:hover { background: var(--pi-amber); color: var(--pi-ink); }
html.demo-productora-ia .pi-burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px 0 8px 8px; align-items: flex-end; }
html.demo-productora-ia .pi-burger span { height: 2px; background: var(--pi-screen); display: block; transition: .2s; }
html.demo-productora-ia .pi-burger span:first-child { width: 22px; }
html.demo-productora-ia .pi-burger span:last-child { width: 14px; }
html.demo-productora-ia .pi-burger.open span { width: 22px; }

/* ══ HERO LETTERBOX ══ */
html.demo-productora-ia .pi-hero { min-height: clamp(620px, 92vh, 880px); border-radius: 0; margin: 0; background: var(--pi-g2); display: flex; align-items: flex-end; }
html.demo-productora-ia .pi-hero::before { background: linear-gradient(var(--pi-ink) 0 7%, transparent 7% 93%, var(--pi-ink) 93% 100%); }
html.demo-productora-ia .pi-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
html.demo-productora-ia .pi-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,12,15,.82) 0%, rgba(12,12,15,.55) 55%, rgba(12,12,15,.35) 100%), linear-gradient(180deg, rgba(12,12,15,.2) 0%, rgba(12,12,15,.75) 100%); }
html.demo-productora-ia .pi-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
html.demo-productora-ia .pi-hero .pi-vf { inset: 11% 64px; }
html.demo-productora-ia .pi-hero-tc-a { left: 88px; top: calc(11% + 22px); }
html.demo-productora-ia .pi-hero-tc-b { right: 88px; top: calc(11% + 22px); }
html.demo-productora-ia .pi-hero-tc-c { right: 88px; bottom: calc(11% + 22px); }
html.demo-productora-ia .pi-hero-inner { position: relative; z-index: 3; padding: 0 88px calc(11% + 22px); max-width: 1180px; display: flex; flex-direction: column; gap: 26px; width: 100%; }
html.demo-productora-ia .pi-hero-inner .pi-eyebrow { margin: 0; }
html.demo-productora-ia .pi-main .pi-hero-h1 { font-size: clamp(48px, 6.9vw, 100px); color: var(--pi-screen); max-width: 18ch; }
html.demo-productora-ia .pi-hero-sub { max-width: 620px; }
html.demo-productora-ia .pi-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ══ MARQUEE ══ */
html.demo-productora-ia .pi-marq { overflow: hidden; border-top: 1px solid var(--pi-line-3); border-bottom: 1px solid var(--pi-line-3); padding: 18px 0; white-space: nowrap; }
html.demo-productora-ia .pi-marq-in { display: inline-flex; gap: 48px; font-family: var(--pi-fm); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--pi-screen); animation: pi-scroll 40s linear infinite; padding-left: 48px; }
html.demo-productora-ia .pi-marq-star { color: var(--pi-rec); }
@keyframes pi-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html.demo-productora-ia .pi-marq-in { animation: none; } }

/* ── secciones ── */
html.demo-productora-ia section { position: relative; }
html.demo-productora-ia .pi-sec { padding: 104px 0; }
html.demo-productora-ia .pi-sec-panel { background: var(--pi-panel); }
html.demo-productora-ia .pi-sec-head { margin-bottom: 48px; }
html.demo-productora-ia .pi-sec-head .pi-lead { margin-top: 16px; max-width: 620px; }
html.demo-productora-ia .pi-sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
html.demo-productora-ia .pi-sec-head-row .pi-link-arrow { flex-shrink: 0; margin-bottom: 6px; }

/* ══ TRABAJOS (grilla 12 col: 8+4 / 4+4+4) ══ */
html.demo-productora-ia .pi-work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
html.demo-productora-ia .pi-work { display: block; grid-column: span 4; height: 360px; color: var(--pi-screen); }
html.demo-productora-ia .pi-work-1 { grid-column: span 8; height: 520px; }
html.demo-productora-ia .pi-work-2 { height: 520px; }
html.demo-productora-ia .pi-work:hover { color: var(--pi-screen); }
html.demo-productora-ia .pi-work .pi-frame-bg { transition: transform .6s ease; }
html.demo-productora-ia .pi-work:hover .pi-frame-bg { transform: scale(1.04); }
html.demo-productora-ia .pi-work-meta { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
html.demo-productora-ia .pi-work-title { font-size: 26px; }
html.demo-productora-ia .pi-work-1 .pi-work-title { font-size: 36px; }
html.demo-productora-ia .pi-work-2 .pi-work-title { font-size: 28px; }

/* ══ SERVICIOS (sticky intro + filas numeradas) ══ */
html.demo-productora-ia .pi-svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
html.demo-productora-ia .pi-svc-intro { grid-column: span 4; position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
html.demo-productora-ia .pi-svc-intro .pi-lead { margin-top: 14px; }
html.demo-productora-ia .pi-svc-intro .pi-link-arrow { margin-top: 20px; }
html.demo-productora-ia .pi-svc-list { grid-column: span 8; display: flex; flex-direction: column; border-bottom: 1px solid var(--pi-line); }
html.demo-productora-ia .pi-svc { display: grid; grid-template-columns: 80px 1fr 220px; gap: 24px; padding: 30px 0; border-top: 1px solid var(--pi-line); align-items: baseline; color: var(--pi-screen); transition: .18s; }
html.demo-productora-ia .pi-svc:hover { color: var(--pi-screen); }
html.demo-productora-ia .pi-svc:hover .pi-svc-title { color: var(--pi-amber); }
html.demo-productora-ia .pi-svc-num { color: var(--pi-rec); }
html.demo-productora-ia .pi-svc-body { display: flex; flex-direction: column; gap: 8px; }
html.demo-productora-ia .pi-svc-title { font-size: 34px; transition: color .18s; }
html.demo-productora-ia .pi-svc-desc { color: var(--pi-silver); font-size: 15px; line-height: 1.5; }
html.demo-productora-ia .pi-svc-data { text-align: right; }

/* ══ PROCESO (4 cards con timecode) ══ */
html.demo-productora-ia .pi-proc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
html.demo-productora-ia .pi-proc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.demo-productora-ia .pi-pstep { display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--pi-line); border-radius: var(--pi-radius); min-height: 240px; background: color-mix(in srgb, var(--pi-ink) 40%, transparent); }
html.demo-productora-ia .pi-pstep-tc { color: var(--pi-rec); }
html.demo-productora-ia .pi-pstep-title { font-size: 28px; }
html.demo-productora-ia .pi-pstep p { color: var(--pi-silver); font-size: 15px; line-height: 1.5; margin: 0; }

/* ══ BRIEF EN 60 SEGUNDOS (killer) ══ */
html.demo-productora-ia .pi-brief-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
html.demo-productora-ia .pi-brief-intro { grid-column: span 5; display: flex; flex-direction: column; gap: 4px; }
html.demo-productora-ia .pi-brief-intro .pi-lead { margin-top: 14px; }
html.demo-productora-ia .pi-brief-box { grid-column: span 7; border: 1px solid var(--pi-line-2); border-radius: var(--pi-radius); padding: 40px; display: flex; flex-direction: column; gap: 28px; background: var(--pi-panel); }
html.demo-productora-ia .pi-brief-sentence { font-family: var(--pi-fd); font-weight: 600; font-size: 30px; line-height: 1.6; letter-spacing: -.01em; margin: 0; color: var(--pi-screen); font-variation-settings: "opsz" 48; }
html.demo-productora-ia .pi-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pi-line-2); background: transparent; font-family: var(--pi-fm); font-size: 12px; letter-spacing: .06em; color: var(--pi-screen); cursor: pointer; transition: .15s; vertical-align: middle; white-space: nowrap; line-height: 1; }
html.demo-productora-ia .pi-chip:hover { border-color: var(--pi-screen); }
html.demo-productora-ia .pi-chip.on { background: var(--pi-rec); border-color: var(--pi-rec); color: var(--pi-ink); }
html.demo-productora-ia .pi-chip-sel { margin: 0 2px; font-size: 13px; }
html.demo-productora-ia .pi-chip-sel:not(.on) { border-color: var(--pi-line-2); color: var(--pi-screen); }
html.demo-productora-ia .pi-chip-sel.on { outline: 0; }
html.demo-productora-ia .pi-chip-sel.focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-rec) 35%, transparent); }
html.demo-productora-ia .pi-brief-groups { position: relative; }
html.demo-productora-ia .pi-brief-group { display: none; flex-direction: column; gap: 12px; }
html.demo-productora-ia .pi-brief-group.on { display: flex; }
html.demo-productora-ia .pi-chips { display: flex; flex-wrap: wrap; gap: 10px; }
html.demo-productora-ia .pi-brief-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ══ ESTUDIO ══ */
html.demo-productora-ia .pi-studio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
html.demo-productora-ia .pi-studio-frame { grid-column: span 6; height: 520px; }
html.demo-productora-ia .pi-studio-body { grid-column: span 6; display: flex; flex-direction: column; gap: 8px; padding-left: 32px; }
html.demo-productora-ia .pi-studio-body .pi-lead { margin-top: 12px; }
html.demo-productora-ia .pi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
html.demo-productora-ia .pi-stat { display: flex; flex-direction: column; gap: 6px; }
html.demo-productora-ia .pi-stat-v { font-size: 44px; color: var(--pi-rec); }
html.demo-productora-ia .pi-stats-band { margin: 0 0 48px; padding: 36px 0; border-top: 1px solid var(--pi-line); border-bottom: 1px solid var(--pi-line); }
html.demo-productora-ia .pi-stats-band .pi-stat-v { font-size: 56px; }
html.demo-productora-ia .pi-studio-body .pi-link-arrow { margin-top: 18px; }

/* ══ FRAMES (strip gallery) ══ */
html.demo-productora-ia .pi-gal-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--pi-steel) transparent; }
html.demo-productora-ia .pi-gal-item { flex: 0 0 clamp(260px, 30vw, 400px); aspect-ratio: 4 / 3; scroll-snap-align: start; display: block; color: var(--pi-screen); }
html.demo-productora-ia .pi-gal-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
html.demo-productora-ia .pi-gal-item:hover img { transform: scale(1.04); }
html.demo-productora-ia .pi-gal-cap { position: absolute; left: 28px; bottom: 26px; z-index: 3; color: var(--pi-screen); }

/* ══ NOTAS (blog 3 cards) ══ */
html.demo-productora-ia .pi-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html.demo-productora-ia .pi-post { display: flex; flex-direction: column; gap: 12px; color: var(--pi-screen); }
html.demo-productora-ia .pi-post:hover { color: var(--pi-screen); }
html.demo-productora-ia .pi-post:hover .pi-post-title { color: var(--pi-amber); }
html.demo-productora-ia .pi-post-thumb { display: block; aspect-ratio: 16 / 10; margin-bottom: 6px; }
html.demo-productora-ia .pi-post-thumb .pi-frame-bg { transition: transform .6s ease; }
html.demo-productora-ia .pi-post:hover .pi-post-thumb .pi-frame-bg { transform: scale(1.04); }
html.demo-productora-ia .pi-post-meta { color: var(--pi-rec); }
html.demo-productora-ia .pi-post-title { font-size: 26px; transition: color .18s; }
html.demo-productora-ia .pi-post-ex { color: var(--pi-silver); font-size: 15px; line-height: 1.5; }

/* ══ CTA FINAL ══ */
html.demo-productora-ia .pi-cta-sec { padding-top: 0; }
html.demo-productora-ia .pi-cta { min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; }
html.demo-productora-ia .pi-cta-sm { min-height: 380px; }
html.demo-productora-ia .pi-cta-glow { left: 30%; top: 20%; }
html.demo-productora-ia .pi-cta-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 60px 32px; max-width: 760px; }
html.demo-productora-ia .pi-main .pi-cta-h2 { font-size: clamp(48px, 6vw, 72px); color: var(--pi-screen); }
html.demo-productora-ia .pi-cta-text { max-width: 520px; }
html.demo-productora-ia .pi-cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
html.demo-productora-ia .pi-cta-contact { color: var(--pi-silver); }

/* ══ PAGE HEADER (about/contact + módulos) ══ */
html.demo-productora-ia .pi-phead { border-radius: 0; min-height: 360px; display: flex; align-items: flex-end; background: var(--pi-g2); }
html.demo-productora-ia .pi-phead::before { background: linear-gradient(var(--pi-ink) 0 6%, transparent 6% 94%, var(--pi-ink) 94% 100%); }
html.demo-productora-ia .pi-phead-bg::after { background: linear-gradient(90deg, rgba(12,12,15,.88) 0%, rgba(12,12,15,.6) 60%, rgba(12,12,15,.45) 100%); }
html.demo-productora-ia .pi-phead-glow { opacity: .12; left: 55%; top: 10%; }
html.demo-productora-ia .pi-phead .pi-vf { inset: calc(6% + 18px) 32px; }
html.demo-productora-ia .pi-phead-tc { right: 56px; top: calc(6% + 40px); }
html.demo-productora-ia .pi-phead-inner { padding: 80px 32px calc(6% + 48px); display: flex; flex-direction: column; gap: 18px; }
html.demo-productora-ia .pi-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
html.demo-productora-ia .pi-crumb a { color: var(--pi-silver); }
html.demo-productora-ia .pi-crumb a:hover { color: var(--pi-amber); }
html.demo-productora-ia .pi-crumb span { color: var(--pi-screen); }
html.demo-productora-ia .pi-main .pi-phead-h1 { font-size: clamp(44px, 6.4vw, 92px); color: var(--pi-screen); max-width: 1100px; }
html.demo-productora-ia .pi-phead-sub { max-width: 640px; font-size: 17px; }

/* ══ ABOUT ══ */
html.demo-productora-ia .pi-about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
html.demo-productora-ia .pi-about-body { grid-column: span 6; display: flex; flex-direction: column; gap: 10px; padding-right: 32px; }
html.demo-productora-ia .pi-about-body .pi-lead { margin-top: 12px; }
html.demo-productora-ia .pi-about-p { color: var(--pi-silver); font-size: 16px; line-height: 1.6; margin: 0; }
html.demo-productora-ia .pi-about-frame { grid-column: span 6; height: 520px; }
html.demo-productora-ia .pi-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 16px; border: 1px solid var(--pi-line-2); border-radius: 999px; font-family: var(--pi-fm); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pi-screen); align-self: flex-start; }
html.demo-productora-ia .pi-team-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
html.demo-productora-ia .pi-team-card { display: flex; flex-direction: column; gap: 8px; color: var(--pi-screen); }
html.demo-productora-ia .pi-team-thumb { display: block; aspect-ratio: 4 / 5; }
html.demo-productora-ia .pi-team-initial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: var(--pi-rec); z-index: 1; }
html.demo-productora-ia .pi-team-name { font-weight: 600; font-size: 15px; }

/* ══ CONTACT ══ */
html.demo-productora-ia .pi-contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
html.demo-productora-ia .pi-contact-info { grid-column: span 5; display: flex; flex-direction: column; gap: 10px; padding-right: 32px; }
html.demo-productora-ia .pi-contact-info .pi-btn { align-self: flex-start; margin-top: 10px; }
html.demo-productora-ia .pi-contact-list { margin: 22px 0 10px; display: flex; flex-direction: column; gap: 0; }
html.demo-productora-ia .pi-contact-list div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--pi-line); align-items: baseline; }
html.demo-productora-ia .pi-contact-list div:last-child { border-bottom: 1px solid var(--pi-line); }
html.demo-productora-ia .pi-contact-list dt { margin: 0; font-weight: 400; }
html.demo-productora-ia .pi-contact-list dd { margin: 0; color: var(--pi-screen); font-size: 16px; }
html.demo-productora-ia .pi-contact-form { grid-column: 7 / span 6; position: relative; border: 1px solid var(--pi-line-2); border-radius: var(--pi-radius); padding: 56px 40px 40px; background: var(--pi-panel); }
html.demo-productora-ia .pi-form-tc { left: 28px; top: 22px; }
html.demo-productora-ia .pi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html.demo-productora-ia .pi-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
html.demo-productora-ia .pi-input { width: 100%; background: color-mix(in srgb, var(--pi-ink) 70%, transparent); border: 1px solid var(--pi-line-2); border-radius: var(--pi-radius); color: var(--pi-screen); font-family: var(--pi-fb); font-size: 15px; padding: 13px 14px; outline: 0; transition: border-color .18s; box-shadow: none; }
html.demo-productora-ia .pi-input:focus { border-color: var(--pi-rec); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-rec) 25%, transparent); }
html.demo-productora-ia textarea.pi-input { resize: vertical; min-height: 140px; }
html.demo-productora-ia .pi-alert { border: 1px solid var(--pi-amber); color: var(--pi-amber); padding: 12px 16px; border-radius: var(--pi-radius); margin-bottom: 18px; font-size: 14px; }
html.demo-productora-ia .pi-map { padding: 0 0 104px; }
html.demo-productora-ia .pi-map iframe { width: 100%; height: 420px; border: 0; filter: grayscale(1) invert(.92) contrast(.9); border-radius: var(--pi-radius); }

/* ══ FOOTER (4 columnas · trampa #58: #footer a de Porto) ══ */
html.demo-productora-ia #footer.pi-footer { background: var(--pi-ink); color: var(--pi-screen); border-top: 1px solid var(--pi-line-3); margin-top: 0; padding: 56px 0 40px; font-size: 14px; }
html.demo-productora-ia #footer.pi-footer a { color: var(--pi-screen) !important; text-decoration: none; }
html.demo-productora-ia #footer.pi-footer a:hover { color: var(--pi-amber) !important; }
html.demo-productora-ia #footer.pi-footer p { color: var(--pi-silver); font-size: 14px; line-height: 1.5; max-width: 360px; margin: 0; }
html.demo-productora-ia .pi-fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
html.demo-productora-ia .pi-fbrand { grid-column: span 5; display: flex; flex-direction: column; gap: 16px; }
html.demo-productora-ia .pi-fbrand-row { display: inline-flex; }
html.demo-productora-ia .pi-wordmark-ft { font-size: 28px; }
html.demo-productora-ia .pi-flegal { margin-top: 4px; }
html.demo-productora-ia .pi-fcol { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; }
html.demo-productora-ia .pi-fcol:last-child { grid-column: span 3; }
html.demo-productora-ia .pi-fhead { margin-bottom: 4px; }
html.demo-productora-ia .pi-fcity { color: var(--pi-silver); }
html.demo-productora-ia .pi-social { display: flex; gap: 10px; margin-top: 8px; }
html.demo-productora-ia .pi-social a { width: 36px; height: 36px; border: 1px solid var(--pi-line-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: .18s; }
html.demo-productora-ia .pi-social a:hover { border-color: var(--pi-amber); }
html.demo-productora-ia .pi-fbot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--pi-line-3); }

/* Porto: ocultar elementos de chrome que el demo no usa */
html.demo-productora-ia .scroll-to-top { background: var(--pi-rec); color: var(--pi-ink); }

/* ══ RESPONSIVE ══ */
@media (max-width: 1199px) {
    html.demo-productora-ia .pi-svc { grid-template-columns: 60px 1fr 160px; }
    html.demo-productora-ia .pi-proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    html.demo-productora-ia .pi-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--pi-ink); border-bottom: 1px solid var(--pi-line-2); padding: 8px 0 16px; }
    html.demo-productora-ia .pi-nav.open { display: flex; }
    html.demo-productora-ia .pi-nav a { padding: 14px 24px; border-top: 1px solid var(--pi-line-3); font-size: 17px; }
    html.demo-productora-ia .pi-burger { display: flex; }
    html.demo-productora-ia .pi-hd-cta { display: none; }
    html.demo-productora-ia .pi-hright { margin-left: auto; }
    html.demo-productora-ia .pi-work, html.demo-productora-ia .pi-work-1, html.demo-productora-ia .pi-work-2 { grid-column: span 6; height: 340px; }
    html.demo-productora-ia .pi-svc-intro, html.demo-productora-ia .pi-svc-list,
    html.demo-productora-ia .pi-brief-intro, html.demo-productora-ia .pi-brief-box,
    html.demo-productora-ia .pi-studio-frame, html.demo-productora-ia .pi-studio-body,
    html.demo-productora-ia .pi-about-body, html.demo-productora-ia .pi-about-frame,
    html.demo-productora-ia .pi-contact-info, html.demo-productora-ia .pi-contact-form { grid-column: span 12; }
    html.demo-productora-ia .pi-svc-intro { position: static; }
    html.demo-productora-ia .pi-studio-body, html.demo-productora-ia .pi-about-body, html.demo-productora-ia .pi-contact-info { padding: 0; }
    html.demo-productora-ia .pi-studio-frame, html.demo-productora-ia .pi-about-frame { height: 380px; }
    html.demo-productora-ia .pi-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.demo-productora-ia .pi-team-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html.demo-productora-ia .pi-fbrand { grid-column: span 12; }
    html.demo-productora-ia .pi-fcol, html.demo-productora-ia .pi-fcol:last-child { grid-column: span 4; }
    html.demo-productora-ia .pi-hero .pi-vf { inset: 9% 24px; }
    html.demo-productora-ia .pi-hero-tc-a, html.demo-productora-ia .pi-hero-inner { left: 0; }
    html.demo-productora-ia .pi-hero-tc-a { left: 40px; top: calc(9% + 18px); }
    html.demo-productora-ia .pi-hero-tc-b { right: 40px; top: calc(9% + 18px); }
    html.demo-productora-ia .pi-hero-tc-c { display: none; }
    html.demo-productora-ia .pi-hero-inner { padding: 0 40px calc(9% + 24px); }
}
@media (max-width: 767px) {
    html.demo-productora-ia .pi-wrap { padding: 0 20px; }
    html.demo-productora-ia .pi-bar { padding: 14px 20px; gap: 16px; }
    html.demo-productora-ia .pi-wordmark-hd { font-size: 17px; }
    html.demo-productora-ia .pi-wordmark-hd small { display: none; }
    html.demo-productora-ia .pi-sec { padding: 64px 0; }
    html.demo-productora-ia .pi-sec-head { margin-bottom: 28px; }
    html.demo-productora-ia .pi-sec-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    html.demo-productora-ia .pi-hero { min-height: 640px; }
    html.demo-productora-ia .pi-hero .pi-vf { inset: 64px 20px; }
    html.demo-productora-ia .pi-hero-tc-a { left: 34px; top: 80px; }
    html.demo-productora-ia .pi-hero-tc-b { right: 34px; top: 80px; }
    html.demo-productora-ia .pi-hero-inner { padding: 0 34px 84px; gap: 18px; }
    html.demo-productora-ia .pi-main .pi-hero-h1 { font-size: clamp(40px, 12.8vw, 50px); }
    html.demo-productora-ia .pi-hero-sub { font-size: 15px; }
    html.demo-productora-ia .pi-hero-cta .pi-btn { width: 100%; }
    html.demo-productora-ia .pi-marq { padding: 14px 0; }
    html.demo-productora-ia .pi-marq-in { gap: 28px; font-size: 12px; padding-left: 20px; }
    html.demo-productora-ia .pi-work, html.demo-productora-ia .pi-work-1, html.demo-productora-ia .pi-work-2 { grid-column: span 12; height: 300px; }
    html.demo-productora-ia .pi-work-title, html.demo-productora-ia .pi-work-1 .pi-work-title, html.demo-productora-ia .pi-work-2 .pi-work-title { font-size: 24px; }
    html.demo-productora-ia .pi-work-meta { left: 24px; right: 24px; bottom: 24px; }
    html.demo-productora-ia .pi-tc-tl { left: 24px; top: 22px; }
    html.demo-productora-ia .pi-tc-tr { right: 24px; top: 22px; }
    html.demo-productora-ia .pi-svc { grid-template-columns: 40px 1fr; gap: 12px; padding: 20px 0; }
    html.demo-productora-ia .pi-svc-title { font-size: 24px; }
    html.demo-productora-ia .pi-svc-desc { display: none; }
    html.demo-productora-ia .pi-svc-data { grid-column: 2; text-align: left; }
    html.demo-productora-ia .pi-proc, html.demo-productora-ia .pi-proc-3 { grid-template-columns: 1fr; }
    html.demo-productora-ia .pi-pstep { min-height: 0; }
    html.demo-productora-ia .pi-brief-box { padding: 24px; gap: 20px; }
    html.demo-productora-ia .pi-brief-sentence { font-size: 20px; line-height: 1.7; }
    html.demo-productora-ia .pi-chip-sel { height: 30px; }
    html.demo-productora-ia .pi-brief-foot .pi-btn { width: 100%; }
    html.demo-productora-ia .pi-studio-frame, html.demo-productora-ia .pi-about-frame { height: 300px; }
    html.demo-productora-ia .pi-stats { gap: 12px; }
    html.demo-productora-ia .pi-stat-v, html.demo-productora-ia .pi-stats-band .pi-stat-v { font-size: 34px; }
    html.demo-productora-ia .pi-blog-grid { grid-template-columns: 1fr; }
    html.demo-productora-ia .pi-team-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.demo-productora-ia .pi-cta { min-height: 380px; }
    html.demo-productora-ia .pi-cta-inner { padding: 48px 20px; }
    html.demo-productora-ia .pi-cta-row { flex-direction: column; width: 100%; }
    html.demo-productora-ia .pi-phead { min-height: 280px; }
    html.demo-productora-ia .pi-phead-inner { padding: 64px 20px calc(6% + 36px); }
    html.demo-productora-ia .pi-phead-tc { right: 28px; top: calc(6% + 28px); }
    html.demo-productora-ia .pi-contact-form { padding: 52px 20px 24px; }
    html.demo-productora-ia .pi-form-row { grid-template-columns: 1fr; gap: 0; }
    html.demo-productora-ia .pi-contact-list div { grid-template-columns: 90px 1fr; }
    html.demo-productora-ia .pi-fcol, html.demo-productora-ia .pi-fcol:last-child { grid-column: span 6; }
    html.demo-productora-ia .pi-fbot { flex-direction: column; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPA 2 · CASE STUDY + PORTFOLIO bespoke (projects · demos/demo-productora-ia)
   ══════════════════════════════════════════════════════════════════════════ */
html.demo-productora-ia .pi-cs-head { padding: 72px 0 40px; }
html.demo-productora-ia .pi-cs-head .pi-wrap { display: flex; flex-direction: column; gap: 24px; }
html.demo-productora-ia .pi-main .pi-cs-h1 { font-size: clamp(40px, 6.4vw, 92px); color: var(--pi-screen); max-width: 1100px; }
html.demo-productora-ia .pi-cs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--pi-line); border-bottom: 1px solid var(--pi-line); padding: 22px 0; }
html.demo-productora-ia .pi-cs-fact { display: flex; flex-direction: column; gap: 6px; }
html.demo-productora-ia .pi-cs-fact b { font-weight: 600; font-size: 15px; color: var(--pi-screen); }
html.demo-productora-ia .pi-cs-hero { height: clamp(300px, 50vw, 720px); }
html.demo-productora-ia .pi-cs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .4s; }
html.demo-productora-ia .pi-cs-video.on { opacity: 1; z-index: 4; }
html.demo-productora-ia .pi-cs-play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--pi-screen); }
html.demo-productora-ia .pi-cs-play span { width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid rgba(243,241,234,.6); display: flex; align-items: center; justify-content: center; background: rgba(12,12,15,.28); backdrop-filter: blur(4px); transition: .18s; }
html.demo-productora-ia .pi-cs-play:hover span { background: var(--pi-rec); border-color: var(--pi-rec); color: var(--pi-ink); }
html.demo-productora-ia .pi-cs-play.off { display: none; }
html.demo-productora-ia .pi-cs-body { padding: 96px 0 0; }
html.demo-productora-ia .pi-cs-body-2 { padding-top: 64px; }
html.demo-productora-ia .pi-cs-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
html.demo-productora-ia .pi-cs-body-l { grid-column: span 5; display: flex; flex-direction: column; gap: 16px; }
html.demo-productora-ia .pi-cs-body-l .pi-eyebrow { margin: 0; }
html.demo-productora-ia .pi-cs-body-r { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 16px; }
html.demo-productora-ia .pi-cs-body-r p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--pi-lead); }
html.demo-productora-ia .pi-cs-h2 { font-size: clamp(30px, 3.4vw, 44px); }
html.demo-productora-ia .pi-cs-frames { padding: 96px 0; }
html.demo-productora-ia .pi-cs-frames .pi-wrap { display: flex; flex-direction: column; gap: 28px; }
html.demo-productora-ia .pi-cs-frames-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
html.demo-productora-ia .pi-cs-frames-head .pi-eyebrow { margin: 0; }
html.demo-productora-ia .pi-cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html.demo-productora-ia .pi-cs-g { height: 260px; display: block; }
html.demo-productora-ia .pi-cs-result { padding: 80px 0; }
html.demo-productora-ia .pi-cs-res-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
html.demo-productora-ia .pi-cs-res-l { grid-column: span 5; display: flex; flex-direction: column; gap: 12px; }
html.demo-productora-ia .pi-cs-res-l .pi-eyebrow { margin: 0; }
html.demo-productora-ia .pi-cs-res-l .pi-lead { margin-top: 6px; }
html.demo-productora-ia .pi-cs-res-r { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html.demo-productora-ia .pi-cs-res-r .pi-stat-v { font-size: 56px; }
html.demo-productora-ia .pi-cs-nav { padding: 80px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--pi-line-3); }
html.demo-productora-ia .pi-cs-nav-l { display: flex; flex-direction: column; gap: 8px; color: var(--pi-screen); max-width: 34%; }
html.demo-productora-ia .pi-cs-nav-l:hover { color: var(--pi-screen); }
html.demo-productora-ia .pi-cs-nav-l:hover .pi-cs-nav-t { color: var(--pi-amber); }
html.demo-productora-ia .pi-cs-nav-r { text-align: right; align-items: flex-end; }
html.demo-productora-ia .pi-cs-nav-t { font-size: 30px; transition: color .18s; }
html.demo-productora-ia .pi-cs-related { padding: 96px 0; }
/* portfolio index */
html.demo-productora-ia .pi-pj-sec { padding-top: 56px; }
html.demo-productora-ia .pi-pj-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
html.demo-productora-ia .pi-pj-more { margin-top: 48px; display: flex; justify-content: center; }
html.demo-productora-ia .pi-pj-empty { text-align: center; padding: 60px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   CAPA B · ENSAMBLE DE MÓDULOS (services/projects/gallery/blog/team/faqs)
   Demo DARK: base = negro sala, paneles = grafito con filete, headings display,
   mono en metadatos. Las vistas compartidas están pensadas para skins oscuros
   "secondary = superficie"; acá --secondary es el ÁMBAR (acento), así que toda
   banda/cabecera `var(--secondary)` inline se neutraliza a la base oscura.
   Capa A (cd-system-base.css) ya alinea btn/badge/paginación a --primary/--radius.
   Nunca @if($activeDemo) en blades de módulos — solo estas reglas.
   ══════════════════════════════════════════════════════════════════════════ */
html.demo-productora-ia {
    /* hooks que exponen las vistas compartidas (services index) */
    --services-card-title: var(--pi-screen);
    --services-card-text: var(--pi-silver);
}
/* alineación de containers: las vistas compartidas usan container-xl-custom (1440)
   → misma geometría que el .pi-wrap (1312 + 32 de padding) del home/page-header */
html.demo-productora-ia .main .container,
html.demo-productora-ia .main .container-xl-custom,
html.demo-productora-ia .main .container-xxl-custom { max-width: 1312px; padding-left: 32px; padding-right: 32px; }
/* superficies: toda sección de módulo pinta la base (vence `var(--secondary)` y
   `var(--dark)` inline, y el border-top gris de Porto) */
html.demo-productora-ia .main section.section,
html.demo-productora-ia .main .section { background-color: var(--pi-ink) !important; background-image: none !important; border: 0 !important; margin: 0 !important; }
html.demo-productora-ia .main .section.py-5 { padding-top: 56px !important; padding-bottom: 96px !important; }
html.demo-productora-ia .main .bg-light, html.demo-productora-ia .main .bg-color-light,
html.demo-productora-ia .main .bg-color-grey, html.demo-productora-ia .main .bg-color-grey-scale-1,
html.demo-productora-ia .main .bg-dark, html.demo-productora-ia .main .bg-color-dark { background: var(--pi-panel) !important; }
/* cajas inline "var(--dark)" (sidebars, benefits, steps, CTA card, results bar) → panel con filete */
html.demo-productora-ia .main .section [style*="background-color: var(--dark)"],
html.demo-productora-ia .main .section [style*="background-color:var(--dark)"] { background-color: var(--pi-panel) !important; border-color: var(--pi-line) !important; border-radius: var(--pi-radius); }
html.demo-productora-ia .main .section [style*="background-color: var(--secondary)"],
html.demo-productora-ia .main .section [style*="background-color:var(--secondary)"] { background-color: var(--pi-graphite) !important; }
/* trampa #57: Porto .text-color-dark {color: var(--dark) !important} → negro sobre negro */
html.demo-productora-ia .main h1.text-color-dark, html.demo-productora-ia .main h2.text-color-dark,
html.demo-productora-ia .main h3.text-color-dark, html.demo-productora-ia .main h4.text-color-dark,
html.demo-productora-ia .main h5.text-color-dark, html.demo-productora-ia .main h6.text-color-dark,
html.demo-productora-ia .main .text-dark, html.demo-productora-ia .main strong.text-color-dark { color: var(--pi-screen) !important; }
html.demo-productora-ia .main p.text-color-dark, html.demo-productora-ia .main span.text-color-dark,
html.demo-productora-ia .main li.text-color-dark, html.demo-productora-ia .main a.text-color-dark,
html.demo-productora-ia .main div.text-color-dark { color: var(--pi-lead) !important; }
html.demo-productora-ia .main .text-color-light { color: var(--pi-screen) !important; }
html.demo-productora-ia .main .text-muted, html.demo-productora-ia .main .text-color-grey,
html.demo-productora-ia .main .text-color-grey-scale-2 { color: var(--pi-silver) !important; }
html.demo-productora-ia .main .text-color-primary, html.demo-productora-ia .main a.text-color-primary,
html.demo-productora-ia .main .text-color-hover-primary:hover { color: var(--pi-rec) !important; }
html.demo-productora-ia .main a.text-color-dark:hover, html.demo-productora-ia .main a.text-color-dark:hover h4 { color: var(--pi-amber) !important; }
/* textos inline pensados para skins genéricos (acero = ilegible sobre negro) */
html.demo-productora-ia .main .section [style*="--quaternary"] { color: var(--pi-silver) !important; }
html.demo-productora-ia .main .section [style*="color: var(--light)"], html.demo-productora-ia .main .section [style*="color:var(--light)"] { color: var(--pi-screen) !important; }
html.demo-productora-ia .main .section [style*="rgba(255, 255, 255, 0.7)"], html.demo-productora-ia .main .section [style*="rgba(255, 255, 255, 0.75)"],
html.demo-productora-ia .main .section [style*="rgba(255, 255, 255, 0.65)"] { color: var(--pi-lead) !important; }
html.demo-productora-ia .main .section [style*="rgba(255, 255, 255, 0.55)"] { color: var(--pi-silver) !important; }
/* tipografía de módulos (scopeada a .section para NO pisar las secciones bespoke del
   home/case-study, que no usan .section — trampa #60) */
html.demo-productora-ia .main .section h1, html.demo-productora-ia .main .section h2, html.demo-productora-ia .main .section h3,
html.demo-productora-ia .main .section h4, html.demo-productora-ia .main .section h5, html.demo-productora-ia .main .section h6 { font-family: var(--pi-fd); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--pi-screen); text-transform: none; }
html.demo-productora-ia .main .section h1 { letter-spacing: -.035em; }
html.demo-productora-ia .main .section h1 a, html.demo-productora-ia .main .section h2 a, html.demo-productora-ia .main .section h3 a,
html.demo-productora-ia .main .section h4 a, html.demo-productora-ia .main .section h5 a { color: inherit; }
html.demo-productora-ia .main .section p, html.demo-productora-ia .main .section li, html.demo-productora-ia .main .section td { color: var(--pi-lead); font-family: var(--pi-fb); }
html.demo-productora-ia .main .section a { color: var(--pi-screen); }
html.demo-productora-ia .main .section a:hover { color: var(--pi-amber); }
/* (solo span/time: los <i class="fas text-1"> de FontAwesome NO pueden cambiar de fuente) */
html.demo-productora-ia .main .section .badge, html.demo-productora-ia .main .section time,
html.demo-productora-ia .main .section span.text-1, html.demo-productora-ia .main .section span.text-2 { font-family: var(--pi-fm); }
/* cards (services/blog/team/projects/faqs/sidebars) → panel grafito con filete.
   Las utilities border-0 / rounded-0 / custom-box-shadow-1 son !important → se
   re-declaran igual. */
html.demo-productora-ia .main .card, html.demo-productora-ia .main .card.border-0,
html.demo-productora-ia .main .service-card, html.demo-productora-ia .main .blog-card,
html.demo-productora-ia .main .project-card, html.demo-productora-ia .main .team-item,
html.demo-productora-ia .main .post-item, html.demo-productora-ia .main .thumb-info,
html.demo-productora-ia .main .sidebar > div, html.demo-productora-ia .main aside.card { background: var(--pi-panel) !important; border: 1px solid var(--pi-line) !important; border-radius: var(--pi-radius) !important; box-shadow: none !important; color: var(--pi-screen); overflow: hidden; transition: border-color .18s, transform .3s; }
html.demo-productora-ia .main .card:hover, html.demo-productora-ia .main .service-card:hover,
html.demo-productora-ia .main .blog-card:hover, html.demo-productora-ia .main .project-card:hover { border-color: var(--pi-line-2) !important; }
html.demo-productora-ia .main .card .card-body, html.demo-productora-ia .main .card .card-footer { background: transparent !important; color: inherit; }
html.demo-productora-ia .main .card-header { background: var(--pi-graphite) !important; border-color: var(--pi-line) !important; }
html.demo-productora-ia .main .card-img-top { border-radius: 0 !important; }
/* botones de módulo (Capa A = --primary) → pill 999, acento REC con texto ink, ghost con filete.
   EXCEPCIÓN de radio (playbook): Capa A fija `[role=main] .btn:not(…)x4 {border-radius: var(--border-radius) !important}`
   con especificidad (0,6,0) y el skin auto deja --border-radius en 0 → se re-declara con la misma cadena + html.demo. */
html.demo-productora-ia { --border-radius: var(--pi-radius); }
html.demo-productora-ia [role="main"] .btn:not(.rounded-circle):not(.btn-close):not(.header-btn-collapse-nav):not(.hamburguer-btn) { border-radius: 999px !important; }
html.demo-productora-ia .main .btn { font-family: var(--pi-fb); font-weight: 600; border-radius: 999px !important; letter-spacing: .01em; transition: .18s; }
html.demo-productora-ia .main .btn-primary, html.demo-productora-ia .main .btn-modern.btn-primary { background: var(--pi-rec) !important; border-color: var(--pi-rec) !important; color: var(--pi-ink) !important; }
html.demo-productora-ia .main .btn-primary:hover { background: var(--pi-amber) !important; border-color: var(--pi-amber) !important; color: var(--pi-ink) !important; }
html.demo-productora-ia .main .btn-outline-primary, html.demo-productora-ia .main .btn-outline-secondary,
html.demo-productora-ia .main .btn-outline-light, html.demo-productora-ia .main .btn-outline-dark,
html.demo-productora-ia .main .btn-outline-success, html.demo-productora-ia .main .btn-light { background: transparent !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen) !important; }
html.demo-productora-ia .main .btn-outline-primary:hover, html.demo-productora-ia .main .btn-outline-secondary:hover,
html.demo-productora-ia .main .btn-outline-light:hover, html.demo-productora-ia .main .btn-outline-dark:hover,
html.demo-productora-ia .main .btn-outline-success:hover { border-color: var(--pi-screen) !important; color: var(--pi-screen) !important; background: color-mix(in srgb, var(--pi-screen) 8%, transparent) !important; }
/* badges/pills → mono uppercase con filete (el de categoría de services trae var(--secondary) inline) */
html.demo-productora-ia .main .badge { font-family: var(--pi-fm); font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px !important; background: transparent !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen) !important; padding: 5px 10px !important; }
html.demo-productora-ia .main .badge.bg-primary, html.demo-productora-ia .main .service-badge,
html.demo-productora-ia .main .project-badge { border-color: var(--pi-rec) !important; color: var(--pi-rec) !important; }
/* formularios de vistas compartidas */
html.demo-productora-ia .main .form-control, html.demo-productora-ia .main .form-select { background: color-mix(in srgb, var(--pi-ink) 70%, transparent); border: 1px solid var(--pi-line-2); color: var(--pi-screen); border-radius: var(--pi-radius); box-shadow: none; }
html.demo-productora-ia .main .form-control::placeholder { color: var(--pi-silver); }
html.demo-productora-ia .main .form-control:focus { border-color: var(--pi-rec); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-rec) 25%, transparent); }
/* paginación */
html.demo-productora-ia .main .pagination .page-link { background: transparent !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen) !important; font-family: var(--pi-fm); border-radius: 999px !important; margin: 0 3px; }
html.demo-productora-ia .main .pagination .page-item.active .page-link, html.demo-productora-ia .main .pagination .page-link:hover { background: var(--pi-rec) !important; border-color: var(--pi-rec) !important; color: var(--pi-ink) !important; }
/* alerts (team vacío, etc.) */
html.demo-productora-ia .main .alert { background: var(--pi-panel); border: 1px solid var(--pi-line-2); color: var(--pi-screen); border-radius: var(--pi-radius); }

/* ── /services (grid de cards) ── */
html.demo-productora-ia .main .service-card .card-body { padding: 28px !important; }
html.demo-productora-ia .main .service-card h3 { font-size: 26px; }
html.demo-productora-ia .main .service-card p[style*="--primary"] { font-family: var(--pi-fm); font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--pi-rec) !important; }
html.demo-productora-ia .main .service-card .custom-view-more { font-family: var(--pi-fm); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
html.demo-productora-ia .main .service-card .rounded-circle { background: color-mix(in srgb, var(--pi-rec) 12%, transparent) !important; border-color: color-mix(in srgb, var(--pi-rec) 30%, transparent) !important; }
html.demo-productora-ia .main .service-card .text-6[style*="--primary-rgba-20"] { font-family: var(--pi-fm); font-size: 13px !important; letter-spacing: .12em; color: var(--pi-silver) !important; }
/* ── /services/{slug} (detalle) ── */
html.demo-productora-ia .main .section h1.text-7 { font-size: clamp(36px, 4.6vw, 56px); }
html.demo-productora-ia .main .service-description-content, html.demo-productora-ia .main .service-description-content p,
html.demo-productora-ia .main .service-description-content li { color: var(--pi-lead) !important; font-size: 16px; }
html.demo-productora-ia .main .service-description-content strong, html.demo-productora-ia .main .service-description-content h2,
html.demo-productora-ia .main .service-description-content h3, html.demo-productora-ia .main .service-description-content h4 { color: var(--pi-screen) !important; }
html.demo-productora-ia .main .section .text-8[style*="--primary"] { font-family: var(--pi-fm); font-size: 14px !important; letter-spacing: .12em; opacity: 1 !important; color: var(--pi-rec) !important; align-self: flex-start; margin-top: 4px; }
html.demo-productora-ia .main .toggle > section.toggle { background: var(--pi-panel) !important; border: 1px solid var(--pi-line) !important; border-radius: var(--pi-radius) !important; margin-bottom: 10px; padding: 0; }
html.demo-productora-ia .main .toggle > section.toggle > .toggle-title { font-family: var(--pi-fb); font-weight: 600; font-size: 16px; padding: 14px 18px 14px 40px; color: var(--pi-screen) !important; }
html.demo-productora-ia .main .toggle > section.toggle > .toggle-title::before { color: var(--pi-rec); }
html.demo-productora-ia .main .toggle > section.toggle > .toggle-content { padding: 0 18px 16px; }
html.demo-productora-ia .main .toggle > section.toggle > .toggle-content p { color: var(--pi-lead) !important; }

/* ── /gallery (vista compartida; trae var(--dark) inline + pills btn-outline-light) ── */
html.demo-productora-ia #gallery-content { background: var(--pi-ink) !important; padding: 56px 0 96px !important; }
html.demo-productora-ia #gallery-content .btn { font-family: var(--pi-fm); font-weight: 500; font-size: 12px; letter-spacing: .06em; padding: 8px 14px !important; line-height: 1; }
html.demo-productora-ia #gallery-content .text-muted { color: var(--pi-line-2) !important; }
html.demo-productora-ia #gallery-content .gallery-item { border-radius: var(--pi-radius) !important; border: 1px solid var(--pi-line); background: var(--pi-graphite); }
html.demo-productora-ia #gallery-content .gallery-item:hover { border-color: var(--pi-line-2); }
html.demo-productora-ia #gallery-content .gallery-item .text-2 { font-family: var(--pi-fb); font-weight: 600; font-size: 14px; }
html.demo-productora-ia #gallery-content .gallery-item .text-1 { font-family: var(--pi-fm); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pi-amber) !important; }
html.demo-productora-ia #gallery-content .portfolio-grid-item { transition: transform .3s; }
html.demo-productora-ia #gallery-content .portfolio-grid-item:hover { transform: translateY(-4px); }

/* ── /team (banda var(--secondary) inline = ámbar → base; cards panel) ── */
html.demo-productora-ia .main .team-list .card { text-align: left; }
html.demo-productora-ia .main .team-list .card > a { color: var(--pi-screen) !important; }
html.demo-productora-ia .main .team-list .card h4 { font-size: 22px; margin: 6px 0 4px; }
html.demo-productora-ia .main .team-list .card p.text-color-primary { color: var(--pi-rec) !important; font-family: var(--pi-fm); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }
html.demo-productora-ia .main .team-list .card .p-3 { padding: 18px 20px 10px !important; }
html.demo-productora-ia .main .team-list .card img { filter: saturate(.85) contrast(1.05); transition: transform .6s ease; }
html.demo-productora-ia .main .team-list .card:hover img { transform: scale(1.04); }
html.demo-productora-ia .main .team-list .card-footer .d-flex { justify-content: flex-start !important; padding: 0 20px 12px; }
html.demo-productora-ia .main .team-list .card-footer a { color: var(--pi-silver) !important; }
html.demo-productora-ia .main .sort-source { gap: 8px; margin-bottom: 8px; }
html.demo-productora-ia .main .sort-source > li > a { font-family: var(--pi-fm) !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--pi-silver) !important; background: transparent !important; border: 1px solid var(--pi-line-2) !important; border-radius: 999px !important; padding: 9px 16px !important; line-height: 1; }
html.demo-productora-ia .main .sort-source > li > a:hover { color: var(--pi-screen) !important; border-color: var(--pi-screen) !important; }
html.demo-productora-ia .main .sort-source > li.active > a, html.demo-productora-ia .main .sort-source > li > a.active { color: var(--pi-ink) !important; background: var(--pi-rec) !important; border-color: var(--pi-rec) !important; }
html.demo-productora-ia .main .sort-source-style-3 > li > a::after, html.demo-productora-ia .main .sort-source-style-3 > li > a::before { display: none !important; }
/* /team/{slug} */
html.demo-productora-ia .main #service.section { padding: 64px 0 96px !important; }

/* ── /blog + /blog/{slug} (vista compartida dark: cards var(--dark) inline) ── */
html.demo-productora-ia .main .blog-card .card-body { padding: 24px !important; }
html.demo-productora-ia .main .blog-card h4 { font-size: 22px !important; line-height: 1.1 !important; }
html.demo-productora-ia .main .blog-card h4 a { color: var(--pi-screen) !important; }
html.demo-productora-ia .main .blog-card:hover h4 a { color: var(--pi-amber) !important; }
html.demo-productora-ia .main .blog-card .card-img-top { height: 220px !important; }
html.demo-productora-ia .main .blog-post-detail h1 { font-size: clamp(36px, 4.8vw, 60px); }
html.demo-productora-ia .main .blog-post-content, html.demo-productora-ia .main .blog-post-content p,
html.demo-productora-ia .main .blog-post-content li { color: var(--pi-lead) !important; font-size: 17px; }
html.demo-productora-ia .main .blog-post-content h2, html.demo-productora-ia .main .blog-post-content h3,
html.demo-productora-ia .main .blog-post-content h4, html.demo-productora-ia .main .blog-post-content strong { color: var(--pi-screen) !important; }
html.demo-productora-ia .main .blog-post-content blockquote { background: var(--pi-panel) !important; border-left: 3px solid var(--pi-rec) !important; border-radius: 0 var(--pi-radius) var(--pi-radius) 0 !important; color: var(--pi-screen); }
html.demo-productora-ia .main .blog-post-content img { border-radius: var(--pi-radius) !important; }
html.demo-productora-ia .main .sidebar h3 { font-size: 13px !important; font-family: var(--pi-fm) !important; font-weight: 500 !important; letter-spacing: .14em; text-transform: uppercase !important; color: var(--pi-rec) !important; }
html.demo-productora-ia .main .sidebar .nav-link { padding: 8px 0; font-family: var(--pi-fb); font-size: 15px; color: var(--pi-lead) !important; border-bottom: 1px solid var(--pi-line-3); border-radius: 0; }
html.demo-productora-ia .main .sidebar .nav-link:hover, html.demo-productora-ia .main .sidebar .nav-link[style*="--primary"] { color: var(--pi-rec) !important; }
html.demo-productora-ia .main .sidebar h6 { font-family: var(--pi-fb) !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: 0 !important; }
html.demo-productora-ia .main .section .rounded-circle.btn { background: var(--pi-panel) !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen) !important; }
html.demo-productora-ia .main .section .rounded-circle.btn:hover { border-color: var(--pi-amber) !important; color: var(--pi-amber) !important; }

/* ── /faqs (layout propio: sidebar + buscador + acordeón con <style> inline) ── */
html.demo-productora-ia #faqs-content { padding: 56px 0 96px !important; }
html.demo-productora-ia #faqs-content aside.card .card-header { background: var(--pi-graphite) !important; }
html.demo-productora-ia #faqs-content aside.card .card-header h5 { font-family: var(--pi-fm); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pi-rec) !important; }
html.demo-productora-ia #faqs-content .category-stats, html.demo-productora-ia #faqs-content .category-stats * { color: var(--pi-silver) !important; font-family: var(--pi-fm); font-size: 12px; }
html.demo-productora-ia #faqs-content .category-nav-item { background: transparent !important; border: 1px solid var(--pi-line) !important; color: var(--pi-lead) !important; border-radius: var(--pi-radius) !important; font-family: var(--pi-fb); font-weight: 500; transform: none !important; }
html.demo-productora-ia #faqs-content .category-nav-item:hover { border-color: var(--pi-line-2) !important; color: var(--pi-screen) !important; }
html.demo-productora-ia #faqs-content .category-nav-item.active { background: var(--pi-rec) !important; border-color: var(--pi-rec) !important; color: var(--pi-ink) !important; }
html.demo-productora-ia #faqs-content .badge-count { background: color-mix(in srgb, var(--pi-screen) 10%, transparent) !important; color: var(--pi-screen) !important; font-family: var(--pi-fm); }
html.demo-productora-ia #faqs-content .category-nav-item.active .badge-count { background: rgba(12,12,15,.2) !important; color: var(--pi-ink) !important; }
html.demo-productora-ia #faqs-content .faq-search-container { background: var(--pi-panel) !important; border: 1px solid var(--pi-line) !important; border-radius: var(--pi-radius) !important; }
html.demo-productora-ia #faqs-content .faq-search-input { background: color-mix(in srgb, var(--pi-ink) 70%, transparent) !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen) !important; border-radius: var(--pi-radius) !important; font-family: var(--pi-fb); box-shadow: none !important; }
html.demo-productora-ia #faqs-content .faq-search-input::placeholder { color: var(--pi-silver); }
html.demo-productora-ia #faqs-content .faq-search-input:focus { border-color: var(--pi-rec) !important; }
html.demo-productora-ia #faqs-content .search-stats, html.demo-productora-ia #faqs-content .search-stats * { color: var(--pi-silver) !important; font-family: var(--pi-fm); font-size: 12px; }
html.demo-productora-ia #faqs-content .search-suggestions { background: var(--pi-panel) !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen); }
html.demo-productora-ia #faqs-content .search-suggestion-item { color: var(--pi-screen) !important; border-color: var(--pi-line) !important; }
html.demo-productora-ia #faqs-content .faq-category-section { background: transparent !important; border: 0 !important; padding: 0 !important; }
html.demo-productora-ia #faqs-content .category-header h4 { font-size: 28px; }
html.demo-productora-ia #faqs-content .faq-item { background: var(--pi-panel) !important; border: 1px solid var(--pi-line) !important; border-radius: var(--pi-radius) !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; }
html.demo-productora-ia #faqs-content .faq-item:hover { border-color: var(--pi-line-2) !important; }
html.demo-productora-ia #faqs-content .faq-question { background: transparent !important; border-bottom: 0 !important; border-radius: var(--pi-radius) var(--pi-radius) 0 0 !important; padding: 20px 22px !important; }
html.demo-productora-ia #faqs-content .faq-question h5 { font-family: var(--pi-fd); font-weight: 700; font-size: 20px !important; letter-spacing: -.02em; color: var(--pi-screen) !important; }
html.demo-productora-ia #faqs-content .faq-question:hover h5 { color: var(--pi-amber) !important; }
html.demo-productora-ia #faqs-content .toggle-icon { color: var(--pi-rec) !important; }
html.demo-productora-ia #faqs-content .faq-answer { background: transparent !important; border-top: 1px solid var(--pi-line) !important; border-radius: 0 0 var(--pi-radius) var(--pi-radius) !important; }
html.demo-productora-ia #faqs-content .faq-content { color: var(--pi-lead) !important; font-family: var(--pi-fb); font-weight: 400 !important; font-size: 15px !important; padding: 18px 22px !important; }
html.demo-productora-ia #faqs-content .faq-actions { border-top: 1px solid var(--pi-line) !important; }
html.demo-productora-ia #faqs-content .faq-actions .btn { background: transparent !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-silver) !important; font-family: var(--pi-fm); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transform: none !important; }
html.demo-productora-ia #faqs-content .faq-actions .btn:hover { border-color: var(--pi-screen) !important; color: var(--pi-screen) !important; }
html.demo-productora-ia #faqs-content .no-results, html.demo-productora-ia #faqs-content .no-results * { color: var(--pi-silver) !important; }
/* paginación propia del módulo ("Página 1 de 2" hereda color #333 de Porto → ilegible) */
html.demo-productora-ia #faqs-content .d-flex > span.mx-3, html.demo-productora-ia #faqs-content span.mx-3 { color: var(--pi-silver) !important; font-family: var(--pi-fm); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
/* «Acciones rápidas» trae background var(--secondary) (= ámbar) → panel grafito */
html.demo-productora-ia #faqs-content .quick-actions { background: var(--pi-graphite) !important; border: 1px solid var(--pi-line) !important; border-radius: var(--pi-radius) !important; }
html.demo-productora-ia #faqs-content .quick-actions h6 { font-family: var(--pi-fm); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pi-silver); }
html.demo-productora-ia #faqs-content .quick-actions .btn, html.demo-productora-ia #faqs-content .quick-actions .btn-outline-primary,
html.demo-productora-ia #faqs-content .quick-actions .btn-outline-secondary { background: transparent !important; border: 1px solid var(--pi-line-2) !important; color: var(--pi-screen) !important; font-family: var(--pi-fm); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transform: none !important; box-shadow: none !important; }
html.demo-productora-ia #faqs-content .quick-actions .btn:hover { border-color: var(--pi-screen) !important; }

/* ── page header en módulos: misma geometría que about/contact (ya en .pi-phead) ── */
/* ── franja entre el último bloque de módulo y el footer (Porto #footer margin-top) ── */
html.demo-productora-ia #footer.pi-footer, html.demo-productora-ia #footer { margin-top: 0 !important; border-top: 1px solid var(--pi-line-3) !important; }

/* trampa #60: re-asertar bespoke DESPUÉS del bloque de tipografía de módulos */
html.demo-productora-ia .main .pi-hero .pi-hero-h1, html.demo-productora-ia .main .pi-phead .pi-phead-h1,
html.demo-productora-ia .main .pi-cta .pi-cta-h2, html.demo-productora-ia .main .pi-cs-h1,
html.demo-productora-ia .main .pi-h2 { color: var(--pi-screen); font-family: var(--pi-fd); }
html.demo-productora-ia .main .pi-stat-v, html.demo-productora-ia .main .pi-svc-num,
html.demo-productora-ia .main .pi-pstep-tc, html.demo-productora-ia .main .pi-eyebrow { color: var(--pi-rec); }

/* ── responsive Capa 2 ── */
@media (max-width: 991px) {
    html.demo-productora-ia .pi-cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.demo-productora-ia .pi-cs-body-l, html.demo-productora-ia .pi-cs-body-r,
    html.demo-productora-ia .pi-cs-res-l, html.demo-productora-ia .pi-cs-res-r { grid-column: span 12; }
    html.demo-productora-ia .pi-cs-body { padding-top: 64px; }
    html.demo-productora-ia .pi-cs-nav { flex-direction: column; align-items: stretch; }
    html.demo-productora-ia .pi-cs-nav-l, html.demo-productora-ia .pi-cs-nav-r { max-width: none; text-align: left; align-items: flex-start; }
    html.demo-productora-ia .pi-cs-nav .pi-btn { align-self: flex-start; }
    html.demo-productora-ia .pi-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html.demo-productora-ia .pi-work-rel { grid-column: span 6; }
}
@media (max-width: 767px) {
    html.demo-productora-ia .main .container, html.demo-productora-ia .main .container-xl-custom,
    html.demo-productora-ia .main .container-xxl-custom { padding-left: 20px; padding-right: 20px; }
    html.demo-productora-ia .main .section.py-5 { padding-top: 40px !important; padding-bottom: 64px !important; }
    html.demo-productora-ia .pi-cs-head { padding: 48px 0 28px; }
    html.demo-productora-ia .pi-main .pi-cs-h1 { font-size: clamp(34px, 10.5vw, 44px); }
    html.demo-productora-ia .pi-cs-facts { grid-template-columns: 1fr 1fr; gap: 14px; }
    html.demo-productora-ia .pi-cs-hero { height: 240px; }
    html.demo-productora-ia .pi-cs-hero .pi-tc-tr { display: none; }
    html.demo-productora-ia .pi-cs-play span { width: 64px; height: 64px; }
    html.demo-productora-ia .pi-cs-frames { padding: 64px 0; }
    html.demo-productora-ia .pi-cs-g { height: 200px; }
    html.demo-productora-ia .pi-cs-result, html.demo-productora-ia .pi-cs-related { padding: 64px 0; }
    html.demo-productora-ia .pi-cs-res-r { gap: 12px; }
    html.demo-productora-ia .pi-cs-res-r .pi-stat-v { font-size: 36px; }
    html.demo-productora-ia .pi-cs-nav { padding: 48px 0; }
    html.demo-productora-ia .pi-cs-nav-t { font-size: 22px; }
    html.demo-productora-ia .pi-work-rel { grid-column: span 12; }
    /* en 390px los dos timecodes del frame (nº·formato / tag) se pisan → queda solo el izquierdo */
    html.demo-productora-ia .pi-work .pi-tc-tr { display: none; }
    html.demo-productora-ia .pi-pj-sec { padding-top: 40px; }
    html.demo-productora-ia .pi-pj-filters { margin-bottom: 24px; }
    html.demo-productora-ia .main .team-list .card .position-relative { height: 300px !important; }
}
@media (max-width: 560px) {
    html.demo-productora-ia .pi-cs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    /* /gallery en 390px: 2 columnas dejan los frames de 160px con el caption pisando la foto → 1 por fila */
    html.demo-productora-ia #gallery-content .col-6 { flex: 0 0 100%; max-width: 100%; }
}
/* letterbox de los frames de grilla (trabajos / strip de frames / celdas del case study): la barra
   superior se ensancha a 10% (12% en mobile) para que el timecode quede DENTRO de la barra y no
   pise la foto (en 360px de alto, 8% = 29px y el tc llegaba a 37px). */
html.demo-productora-ia .pi-work.pi-frame::before, html.demo-productora-ia .pi-gal-item.pi-frame::before,
html.demo-productora-ia .pi-cs-g.pi-frame::before, html.demo-productora-ia .pi-post-thumb.pi-frame::before { background: linear-gradient(var(--pi-ink) 0 10%, transparent 10% 90%, var(--pi-ink) 90% 100%); }
@media (max-width: 767px) {
    html.demo-productora-ia .pi-work.pi-frame::before, html.demo-productora-ia .pi-gal-item.pi-frame::before,
    html.demo-productora-ia .pi-cs-g.pi-frame::before { background: linear-gradient(var(--pi-ink) 0 12%, transparent 12% 88%, var(--pi-ink) 88% 100%); }
}