/* Audiovisual B2B · borrador: negro de cine con degradado, títulos finos con tracking (Jost), detalles en Courier Prime */
:root { --bg:#050505; --fg:#fff; --mut:rgba(255,255,255,.58); --faint:rgba(255,255,255,.12); --acento:rgba(24,166,134,.72);
  --mono:"Courier Prime", monospace; --sans:Jost, system-ui, sans-serif; --ease:cubic-bezier(.2,.7,.1,1); --lado:clamp(16px,6vw,96px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--fg); font:300 17px/1.7 var(--sans);
  background:radial-gradient(120% 80% at 50% -10%, #1b1c1e 0%, #0b0b0c 45%, #030303 100%) fixed, var(--bg); }
a { color:inherit; }
img { max-width:100%; display:block; -webkit-touch-callout:none; user-select:none; }

/* Cabecera */
.cab { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--lado); background:rgba(5,5,5,.86); backdrop-filter:blur(10px); }
.b-logo { font:200 15px var(--sans); letter-spacing:.42em; text-transform:uppercase; text-decoration:none; white-space:nowrap; }
.b-logo b { font-weight:400; color:var(--acento); }
.b-menu { display:flex; gap:clamp(18px,3vw,44px); }
.b-menu a { font:400 11px var(--mono); letter-spacing:.32em; text-transform:uppercase; text-decoration:none; color:var(--mut); transition:color .25s; }
.b-menu a:hover, .b-menu a:focus-visible { color:var(--fg); }
.b-menu-b { display:none; }

/* Piezas comunes */
main { padding:0 var(--lado); }
section { padding:12vh 0; }
.eti { display:block; margin-bottom:2.4vh; font:400 11px var(--mono); letter-spacing:.36em; text-transform:uppercase; color:var(--acento); }
.eti a { text-decoration:none; }
h1, h2 { font-weight:200; letter-spacing:.18em; text-transform:uppercase; line-height:1.2; margin:0 0 3vh; }
h1 { font-size:clamp(2rem,5.4vw,4.6rem); }
h2 { font-size:clamp(1.3rem,2.6vw,2.2rem); }
h3 { font:400 13px var(--mono); letter-spacing:.24em; text-transform:uppercase; margin:5vh 0 1.4vh; }
p { max-width:68ch; color:rgba(255,255,255,.82); }
.pend { color:#e0b25a; font-family:var(--mono); font-size:13px; }
.b-boton { display:inline-block; align-self:flex-start; margin-top:3vh; padding:.85em 1.8em; border:1px solid rgba(255,255,255,.42); font:300 13px var(--sans);
  letter-spacing:.32em; text-transform:uppercase; text-decoration:none; transition:background .25s, color .25s; }
.b-boton:hover, .b-boton:focus-visible { background:#fff; color:#050505; }

/* Portada */
.b-hero { min-height:calc(100vh - 80px); display:flex; flex-direction:column; justify-content:center; padding-top:0; }
.b-hero h1 { font-size:clamp(2.6rem,8vw,7.4rem); letter-spacing:.14em; }
.b-hero h1 b { font-weight:400; color:var(--acento); }
.hero-d { font-size:clamp(1rem,1.4vw,1.25rem); }
.estrella { border-top:1px solid var(--faint); }
.b-casos { display:grid; gap:10vh; border-top:1px solid var(--faint); }
.caso { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
.caso:nth-child(even) .vid { order:2; }
.caso h3 { margin-top:0; }
.cifras { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; border-top:1px solid var(--faint); text-align:center; }
.cifras b { display:block; font:200 clamp(2.4rem,5vw,4.4rem)/1 var(--sans); }
.cifras span { font:400 11px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--mut); }
.opinan { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5vh 6vw; border-top:1px solid var(--faint); }
.opinan .eti { grid-column:1/-1; margin:0; }
blockquote { margin:0; }
blockquote p { font-size:1.05rem; font-style:italic; }
cite { font:400 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mut); font-style:normal; }
.b-cta { text-align:center; border-top:1px solid var(--faint); }
.b-cta h2 { font-size:clamp(1.1rem,2vw,1.6rem); }
.cta-d, .cta-d a { font:400 13px var(--mono); letter-spacing:.14em; color:var(--mut); text-decoration:none; }
.cta-d a:hover { color:var(--fg); }

/* Servicios */
.b-intro { padding-bottom:4vh; }
.lista-serv { list-style:none; margin:0; padding:0 0 10vh; border-top:1px solid var(--faint); }
.lista-serv a { display:grid; grid-template-columns:60px minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:baseline; padding:4.5vh 0;
  border-bottom:1px solid var(--faint); text-decoration:none; transition:padding .4s var(--ease); }
.lista-serv a:hover { padding-left:12px; }
.lista-serv h2 { margin:0; font-size:clamp(1rem,1.8vw,1.5rem); }
.lista-serv p { margin:0; color:var(--mut); }
.b-num { font:400 12px var(--mono); color:var(--acento); }
.texto { padding-top:0; }
.disp dt { font:400 12px var(--mono); letter-spacing:.24em; text-transform:uppercase; margin-top:3vh; }
.disp dd { margin:.6vh 0 0; max-width:68ch; color:rgba(255,255,255,.82); }

/* Rejilla de vídeos */
.bloque { padding:6vh 0; }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:28px 22px; padding-top:0; }
.vid { position:relative; display:block; width:100%; padding:0; border:0; background:#000; color:inherit; cursor:pointer; text-align:left; font:inherit; }
.vid img { width:100%; aspect-ratio:16/9; object-fit:cover; filter:brightness(.82) saturate(.9); transition:filter .4s, transform .6s var(--ease); }
.vid:hover img, .vid:focus-visible img { filter:none; }
.vid::after { content:""; position:absolute; left:50%; top:calc(50% - 1.2em); width:0; height:0; translate:-30% -50%;
  border:12px solid transparent; border-left:20px solid #fff; opacity:.75; transition:opacity .3s; }
.caso .vid::after { top:50%; }
.rejilla .vid::after { top:calc((100% - 2.6em) / 2); }
.vid:hover::after { opacity:1; }
.vid-t { display:block; padding:12px 2px 0; font:400 11px/1.6 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }

/* Contacto */
.contacto { min-height:70vh; display:flex; flex-direction:column; justify-content:center; }
.contacto dl { margin:4vh 0 0; }
.contacto dt { font:400 11px var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--acento); margin-top:3vh; }
.contacto dd { margin:.8vh 0 0; font-size:clamp(1.1rem,2vw,1.6rem); font-weight:200; letter-spacing:.06em; }
.contacto dd a { text-decoration:none; }

/* Ventana de vídeo */
.b-lupa { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:rgba(0,0,0,.92); }
.b-lupa[hidden] { display:none; }
.b-lupa-v { width:min(92vw, 160vh); aspect-ratio:16/9; }
.b-lupa-v iframe { width:100%; height:100%; border:0; }
.b-lupa-x { position:absolute; top:14px; right:20px; border:0; background:none; color:#fff; font:200 42px/1 var(--sans); cursor:pointer; }
body.lupa-abierta { overflow:hidden; }

/* Pie */
.b-pie { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:5vh var(--lado); border-top:1px solid var(--faint);
  font:400 10px var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--mut); }
.b-pie nav { display:flex; gap:22px; }
.b-pie a { text-decoration:none; }

/* Móvil */
@media (max-width:760px) {
  body { font-size:16px; }
  .cab { padding:16px; }
  .b-logo { font-size:13px; letter-spacing:.32em; }
  .b-menu-b { display:grid; gap:7px; width:28px; padding:6px 0; border:0; background:none; cursor:pointer; }
  .b-menu-b i { display:block; height:1px; background:#fff; transition:transform .3s; }
  .b-menu-abierto .b-menu-b i:first-child { transform:translateY(4px) rotate(45deg); }
  .b-menu-abierto .b-menu-b i:last-child { transform:translateY(-4px) rotate(-45deg); }
  .b-menu { position:fixed; inset:60px 0 auto; flex-direction:column; gap:0; padding:8px 16px 24px; background:#050505f5; display:none; }
  .b-menu-abierto .b-menu { display:flex; }
  .b-menu a { padding:14px 0; font-size:13px; border-bottom:1px solid var(--faint); }
  main { padding:0 16px; }
  section { padding:8vh 0; }
  .caso { grid-template-columns:1fr; gap:20px; }
  .caso:nth-child(even) .vid { order:0; }
  .cifras { grid-template-columns:repeat(2,1fr); row-gap:5vh; }
  .opinan { grid-template-columns:1fr; }
  .lista-serv a { grid-template-columns:40px minmax(0,1fr); }
  .lista-serv p { grid-column:2; }
  .b-pie { padding:4vh 16px; flex-direction:column; }
}


/* ---- Sobre los estilos de andresnavarra.com (an.css) ---- */
/* Fondo: degradado negro con trama de líneas finas (toque corporativo) */
body { background:
  radial-gradient(ellipse 90% 70% at 50% 0%, rgba(40,42,46,.55), transparent 70%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 96px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 96px),
  linear-gradient(#0a0a0b, #030303) fixed; background-attachment:fixed; }
main { padding-top:90px; }

/* Portada centrada */
.p-index main section { text-align:center; display:flex; flex-direction:column; align-items:center; }
.p-index main p { margin-left:auto; margin-right:auto; }
.p-index .b-boton { align-self:center; }
.p-index .b-casos { display:grid; justify-items:center; }
.p-index .caso { grid-template-columns:1fr; max-width:820px; justify-items:center; }
.p-index .caso:nth-child(even) .vid { order:0; }
.p-index .opinan { display:grid; justify-items:center; }

/* Portada: la bobina del perfil de fondo, sin sonido, a pantalla completa */
.p-index .b-hero { position:relative; min-height:100vh; margin:-90px calc(-1 * var(--lado)) 0; padding:0 var(--lado); justify-content:center; overflow:hidden; }
.bobina { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.bobina iframe { position:absolute; left:50%; top:50%; width:max(100vw, 177.78vh); height:max(56.25vw, 100vh); transform:translate(-50%,-50%); border:0; }
.bobina::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55) 70%, #050505); }
.p-index .carta { width:min(980px,100%); margin:0 auto; padding:10vh 0; text-align:left; }

/* Carta de paquetes: tarjetas grandes con imagen (el primero, a todo lo ancho) */
.carta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:min(1400px,100%); margin:0 auto; padding:10vh 0; }
.plato { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#000; text-decoration:none; color:#fff; }
.plato:first-child { grid-column:1/-1; aspect-ratio:21/9; }
.plato img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(.85); transition:transform 1.2s var(--ease), filter .6s; }
.plato:hover img, .plato:focus-visible img { transform:scale(1.04); filter:brightness(.85) saturate(1); }
.plato::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 45%, rgba(0,0,0,.75)); }
.plato span { position:absolute; z-index:1; left:clamp(18px,2.4vw,40px); }
.plato-n { top:clamp(16px,2vw,30px); font:400 12px var(--mono); letter-spacing:.3em; color:var(--acento); }
.plato-t { bottom:clamp(44px,5vw,78px); right:clamp(18px,2.4vw,40px); font:200 clamp(1.1rem,2.2vw,2.1rem)/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; text-align:left; }
.plato:first-child .plato-t { font-size:clamp(1.4rem,3.4vw,3.2rem); }
.plato-v { bottom:clamp(18px,2vw,32px); font:400 10px var(--mono); letter-spacing:.36em; text-transform:uppercase; color:rgba(255,255,255,.7); transition:color .3s, letter-spacing .4s var(--ease); }
.plato-v::after { content:"  →"; }
.plato:hover .plato-v { color:var(--acento); letter-spacing:.44em; }
.p-index .carta { text-align:left; }

/* Cabecera de cada paquete: su imagen a todo lo ancho */
.cabecera { position:relative; min-height:72vh; margin:-90px calc(-1 * var(--lado)) 6vh; padding:0 var(--lado) 8vh; display:flex; align-items:flex-end; overflow:hidden; }
.cabecera img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); z-index:-1; }
.cabecera::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 40%, #050505); }
.cabecera h1 { max-width:18ch; }
@media (max-width:760px) { .carta { grid-template-columns:1fr; } .plato:first-child { aspect-ratio:16/10; } }

/* ---- Propuesta de fondo (solo en Servicios): luz verde, haz de proyector, bruma y grano de película ---- */
body { background:#030404; }
body main { position:relative; z-index:1; }
/* Capa de luz: dos manchas verdes que respiran y un haz de proyector que barre despacio */
body::before { content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 38% 30% at 82% 8%, rgba(24,166,134,.20), transparent 70%),
    radial-gradient(ellipse 30% 26% at 6% 92%, rgba(24,166,134,.10), transparent 70%),
    conic-gradient(from 200deg at 90% -10%, transparent 0deg, rgba(160,215,200,.07) 8deg, transparent 18deg, rgba(160,215,200,.04) 26deg, transparent 34deg);
  filter:blur(18px); animation:respira 14s ease-in-out infinite alternate; }
@keyframes respira { from { transform:translate3d(0,0,0) rotate(0deg); opacity:.85; } to { transform:translate3d(-2%,1.5%,0) rotate(2.5deg); opacity:1; } }
/* Bruma y grano: textura de sala de cine, nada de bloques */
body::after { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    url(assets/film/grano.svg),
    radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.75) 100%);
  opacity:.55; mix-blend-mode:screen; animation:grano .9s steps(6) infinite; }
@keyframes grano { 0%{background-position:0 0,center} 20%{background-position:-40px 20px,center} 40%{background-position:30px -50px,center} 60%{background-position:-20px 40px,center} 80%{background-position:50px 10px,center} 100%{background-position:0 0,center} }
/* Luz que sigue al ratón, como una linterna sobre el fondo */
.foco { position:fixed; z-index:0; left:0; top:0; width:56vmax; height:56vmax; margin:-28vmax 0 0 -28vmax; pointer-events:none;
  background:radial-gradient(circle, rgba(24,166,134,.09), transparent 60%); transition:transform .9s var(--ease); }
.p-servicios .b-intro h1 { background:linear-gradient(90deg, #fff 35%, rgba(24,166,134,.9)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.p-servicios .plato { box-shadow:0 30px 80px -40px rgba(24,166,134,.35); }
.p-servicios .plato:hover { box-shadow:0 40px 100px -30px rgba(24,166,134,.55); }
@media (prefers-reduced-motion:reduce) { body::before, body::after { animation:none; } .foco { display:none; } }

/* ---- Tipografía de Audiovisual B2B: Montserrat, como Deporte MBA. Titulares gruesos y apretados, texto ligero.
   Los corchetes [ ] de Deporte MBA como detalle gráfico en etiquetas y números. ---- */
:root { --sans:Montserrat, system-ui, sans-serif; --gris:rgba(255,255,255,.42); }
body main p, body .b-hero .hero-d, body .b-intro p, main dd { font-family:var(--sans); font-weight:400; font-size:clamp(1rem,1.05vw,1.12rem); line-height:1.75; color:rgba(255,255,255,.74); }
main h1, main h2, .plato-t, .cabecera h1, .cifras b { font-family:var(--sans); font-weight:700; text-transform:none; letter-spacing:-.025em; }
main h1 { font-size:clamp(2.6rem,5.8vw,5.6rem); line-height:1.02; }
main h2 { font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.12; }
.b-hero h1 { font-size:clamp(3.2rem,8.6vw,8.4rem); font-weight:800; letter-spacing:-.035em; }
.b-hero h1 b, main h1 em { font-style:normal; font-weight:800; color:rgb(24,166,134); }
main h3, .eti, .plato-v, .cifras span, cite, .vid-t, .disp dt { font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.plato-t { font-size:clamp(1.4rem,2.4vw,2.3rem); line-height:1.08; }
.plato:first-child .plato-t { font-size:clamp(2rem,4.2vw,4rem); }
.plato-n, .num { font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--gris); }
.plato-n::before, .num::before { content:"["; } .plato-n::after, .num::after { content:"]"; }
.plato-n { color:rgba(255,255,255,.6); }
.cifras b { font-size:clamp(3rem,6vw,5.4rem); font-weight:800; }
blockquote p { font-family:var(--sans); font-style:normal; font-weight:500; font-size:clamp(1.1rem,1.4vw,1.35rem); line-height:1.5; color:rgba(255,255,255,.88); }
.p-servicios .b-intro h1 { background:none; color:#fff; }
.p-servicios .b-intro { padding-top:16vh; }
header .brand { font-family:var(--sans) !important; font-weight:700 !important; letter-spacing:.06em !important; }
header nav a, #menu a { font-family:var(--sans) !important; font-weight:500 !important; letter-spacing:.12em !important; }
body main p, body .b-hero .hero-d, body .b-intro p, main dd { font-size:clamp(16px,1.15vw,19px); }

/* Titular sobre la bobina: sombra para despegarlo del vídeo, brillo que lo recorre y reflejo en el suelo */
.b-hero h1 { position:relative; z-index:1; filter:drop-shadow(0 12px 40px rgba(0,0,0,.65));
  background:linear-gradient(105deg, #fff 0 42%, #e6f3ef 47%, #fff 52% 100%) 0 0 / 260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:brillo 7s ease-in-out infinite; }
.b-hero h1 b { background:linear-gradient(105deg, rgb(24,166,134) 0 42%, #9fdcca 47%, rgb(24,166,134) 52% 100%) 0 0 / 260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:brillo 7s ease-in-out infinite;
  text-shadow:0 0 42px rgba(24,166,134,.45); }
@keyframes brillo { 0%, 55% { background-position:100% 0; } 85%, 100% { background-position:0 0; } }
.b-hero .hero-d { position:relative; z-index:1; text-shadow:0 2px 14px rgba(0,0,0,.8); margin-top:3.5vh; }
@media (prefers-reduced-motion:reduce) { .b-hero h1, .b-hero h1 b { animation:none; } }

/* ---- Portada: declaración de intenciones ---- */
.manifiesto { max-width:1100px; margin:0 auto; padding:18vh 0 14vh; text-align:center; display:flex; flex-direction:column; align-items:center; }
.manifiesto h2 { font-size:clamp(2.6rem,6.4vw,6rem); font-weight:800; letter-spacing:-.035em; margin-bottom:5vh; }
.manifiesto del { color:rgba(255,255,255,.38); text-decoration-color:rgb(24,166,134); text-decoration-thickness:.08em; }
body .manifiesto .mf-lead { font-size:clamp(18px,1.6vw,24px); font-weight:400; color:#fff; max-width:40ch; margin:0 auto 3vh; }
.mf-preguntas { display:flex; flex-wrap:wrap; justify-content:center; gap:.4em 1.4em; margin:2vh 0 3vh; max-width:none; }
.mf-preguntas span { font:700 clamp(1.3rem,2.4vw,2.2rem)/1.2 var(--sans); letter-spacing:-.02em; color:rgb(24,166,134); }
.manifiesto .pf-vs { width:100%; margin:7vh 0 6vh; text-align:left; }
body .manifiesto .mf-cierre { font-size:clamp(18px,1.6vw,24px); color:#fff; }
.mf-cierre b { font-weight:700; color:rgb(24,166,134); }

/* ---- Portada: una sección por paquete ---- */
.paquete { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:clamp(24px,5vw,90px); padding:12vh 0; border-top:1px solid rgba(255,255,255,.08); max-width:1400px; margin:0 auto; }
.paq-cab { position:sticky; top:110px; align-self:start; }
.paq-cab h2 { font-size:clamp(2rem,3.6vw,3.4rem); margin:1.4vh 0 0; }
.paq-cuerpo > p { max-width:62ch; }
.ejemplos { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin:4vh 0; }
.ejemplos .vid { display:block; text-decoration:none; }
.ejemplos .vid::after { top:calc((100% - 2.6em) / 2); }
.paq-ver { display:inline-flex; align-items:center; gap:.8em; margin-top:1vh; font:600 12px var(--sans); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:#fff; padding:1em 1.6em; border:1px solid rgba(24,166,134,.5); transition:background .3s, color .3s; }
.paq-ver::after { content:"→"; }
.paq-ver:hover { background:rgb(24,166,134); color:#030404; }
.paquete .cifras { grid-template-columns:repeat(4,1fr); border:0; padding:4vh 0 0; text-align:left; gap:18px; }
.paquete .cifras b { font-size:clamp(2.4rem,4vw,3.8rem); }

/* ---- Contacto al pie: caja con luz, esquinas de visor y botones ---- */
.b-cta { padding:14vh 0; border:0; }
.cta-caja { position:relative; max-width:1000px; margin:0 auto; padding:clamp(48px,8vw,110px) clamp(24px,5vw,80px); text-align:center; overflow:hidden;
  background:radial-gradient(ellipse 70% 90% at 50% 120%, rgba(24,166,134,.16), transparent 70%), rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.06); }
.cta-caja::before, .cta-caja::after { content:""; position:absolute; width:26px; height:26px; border:solid rgba(24,166,134,.7); }
.cta-caja::before { left:14px; top:14px; border-width:1px 0 0 1px; }
.cta-caja::after { right:14px; bottom:14px; border-width:0 1px 1px 0; }
.cta-luz { position:absolute; left:10%; right:10%; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(24,166,134,.9), transparent); animation:barrido 6s ease-in-out infinite; }
@keyframes barrido { 0%,100% { transform:translateX(-30%); opacity:.3; } 50% { transform:translateX(30%); opacity:1; } }
.b-cta h2 { font-size:clamp(1.8rem,3.4vw,3.2rem); font-weight:700; max-width:22ch; margin:0 auto 5vh; }
.b-cta h2 em { font-style:normal; color:rgb(24,166,134); }
.cta-botones { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.cta-b { padding:1em 1.6em; border:1px solid rgba(255,255,255,.22); font:500 14px var(--sans); letter-spacing:.04em; text-decoration:none; color:#fff; transition:border-color .3s, background .3s, color .3s; }
.cta-b:hover { border-color:rgb(24,166,134); }
.cta-b-on { background:rgb(24,166,134); border-color:rgb(24,166,134); color:#030404; font-weight:700; }
.cta-b-on:hover { background:#fff; border-color:#fff; }
@media (max-width:760px) { .paquete { grid-template-columns:1fr; } .paq-cab { position:static; } .paquete .cifras { grid-template-columns:repeat(2,1fr); } }
.p-index main section.paquete { display:grid; text-align:left; align-items:start; } .p-index main section.b-cta { display:block; }
.manifiesto .pf-vs-cab span { font:600 12px var(--sans) !important; letter-spacing:.16em !important; color:rgba(255,255,255,.5) !important; }
.manifiesto .pf-vs-cab span:last-child { color:rgb(24,166,134) !important; }
.manifiesto .pf-vs-fila span { font:400 clamp(15px,1.15vw,18px)/1.5 var(--sans) !important; letter-spacing:0 !important; padding:2.2vh 0 !important; }
.manifiesto .pf-vs-fila span:first-child { color:rgba(255,255,255,.45) !important; text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25); }
.manifiesto .pf-vs-fila span:last-child { color:#fff !important; }
.ejemplos { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) { .ejemplos { grid-template-columns:1fr; } }
/* Bobina vertical (móvil): llena la pantalla en 9:16 */
.bobina.vertical iframe { width:max(100vw, 56.25vh); height:max(177.78vw, 100vh); }
.manifiesto .mf-golpe { font-weight:700 !important; font-size:clamp(20px,2vw,30px) !important; letter-spacing:-.01em; }
/* Lema bajo el titular de la portada */
body .b-hero .hero-lema { position:relative; z-index:1; margin:2.4vh 0 0; font:600 clamp(18px,1.8vw,28px)/1.3 var(--sans); letter-spacing:.02em; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.85); }
body .b-hero .hero-lema { font-style:italic; }
/* Lema más contundente: más grande, más grueso, apretado y con una raya verde que lo subraya */
body .b-hero .hero-lema { margin-top:3vh; font-weight:800; font-size:clamp(22px,3.2vw,52px); letter-spacing:-.025em; line-height:1.1; }
body .b-hero .hero-lema::after { content:""; display:block; width:42%; height:4px; margin:2.2vh auto 0; background:rgb(24,166,134); box-shadow:0 0 24px rgba(24,166,134,.6); }
/* Lema en una sola línea (en el móvil se parte en dos) */
body .b-hero .hero-lema { white-space:nowrap; font-size:min(2.05vw, 40px); max-width:none; }
body .b-hero .hero-lema span { color:rgb(24,166,134); }
@media (max-width:760px) { body .b-hero .hero-lema { white-space:normal; font-size:clamp(20px,5.6vw,30px); max-width:16ch; margin-left:auto; margin-right:auto; } body .b-hero .hero-lema span { display:block; margin-top:.4em; } }
/* «NO SOMOS FILMMAKERS»: mayúsculas, peso máximo, una sola línea */
.manifiesto h2 { text-transform:uppercase; font-weight:800; white-space:nowrap; font-size:min(6.4vw, 92px); letter-spacing:-.04em; line-height:1; }
/* Tachado de FILMMAKERS más bajo, para que no ensucie la palabra */
.manifiesto del { text-decoration:none; background:linear-gradient(rgb(24,166,134), rgb(24,166,134)) 0 72% / 100% .07em no-repeat; padding-bottom:.02em; }

/* Lo que sí hacemos: frase, invitación y seis objetivos en rejilla, que aparecen al bajar */
body .manifiesto .mf-colega { font:400 clamp(18px,1.7vw,26px)/1.45 var(--sans); color:rgba(255,255,255,.62); max-width:34ch; margin:5vh auto 9vh; }
body .manifiesto .mf-ayuda { font:800 clamp(26px,3.4vw,52px)/1.1 var(--sans); letter-spacing:-.03em; color:#fff; max-width:none; margin:0 0 6vh; }
.mf-lista { list-style:none; counter-reset:obj; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; width:100%; padding:0; margin:0 0 10vh; text-align:left; border-top:1px solid rgba(255,255,255,.1); }
.mf-lista li { counter-increment:obj; position:relative; padding:4.5vh 2vw 5vh; border-bottom:1px solid rgba(255,255,255,.1); font:400 clamp(16px,1.25vw,20px)/1.45 var(--sans); color:rgba(255,255,255,.66);
  opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease), background .4s; }
.mf-lista li + li { border-left:1px solid rgba(255,255,255,.1); }
.mf-lista li:nth-child(4) { border-left:0; }
.mf-lista li::before { content:"[" counter(obj, decimal-leading-zero) "]"; display:block; margin-bottom:2.4vh; font:600 13px var(--sans); color:rgba(255,255,255,.4); }
.mf-lista li b { display:block; margin-bottom:.5vh; font:800 clamp(20px,1.9vw,30px)/1.15 var(--sans); letter-spacing:-.02em; color:rgb(24,166,134); }
.mf-lista li:hover { background:radial-gradient(ellipse at 30% 0%, rgba(24,166,134,.10), transparent 70%); }
.mf-lista.visto li { opacity:1; transform:none; }
.mf-lista.visto li:nth-child(2) { transition-delay:.08s; } .mf-lista.visto li:nth-child(3) { transition-delay:.16s; }
.mf-lista.visto li:nth-child(4) { transition-delay:.24s; } .mf-lista.visto li:nth-child(5) { transition-delay:.32s; } .mf-lista.visto li:nth-child(6) { transition-delay:.4s; }
@media (max-width:760px) { .mf-lista { grid-template-columns:1fr; } .mf-lista li + li { border-left:0; } }
@media (prefers-reduced-motion:reduce) { .mf-lista li { opacity:1; transform:none; } }

/* ---- Tachado de FILMMAKERS: a media altura, fino y en rojo ---- */
.manifiesto del { text-decoration:none; color:rgba(255,255,255,.5); background:linear-gradient(#e5484d, #e5484d) 0 54% / 100% .055em no-repeat; padding-bottom:0; }

/* ---- «Nosotros te podemos ayudar si quieres:» a la izquierda; los objetivos, a lo ancho a la derecha ---- */
.manifiesto { max-width:1400px; }
.mf-ayuda-bloque { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(30px,6vw,120px); align-items:start; width:100%; margin:0 0 12vh; text-align:left; }
body .manifiesto .mf-ayuda { position:sticky; top:120px; margin:0; font-size:clamp(30px,3.6vw,58px); line-height:1.05; }
.mf-lista { display:block; list-style:none; padding:0; margin:0; border:0; counter-reset:none; }
.mf-lista li { padding:0 0 3.2vh; border:0 !important; background:none !important; font:400 clamp(20px,2vw,32px)/1.25 var(--sans); letter-spacing:-.015em; color:rgba(255,255,255,.55); }
.mf-lista li::before { content:none; }
.mf-lista li b { display:inline; margin:0; font:800 inherit; font-weight:800; color:rgb(24,166,134); }
.mf-lista li:hover { color:#fff; }
@media (max-width:760px) { .mf-ayuda-bloque { grid-template-columns:1fr; } body .manifiesto .mf-ayuda { position:static; } }

/* ---- Portada más compacta: todo más cerca del vídeo y entre sí ---- */
.manifiesto { padding:9vh 0 6vh; }
.manifiesto h2 { margin-bottom:1.6vh; }
body .manifiesto .mf-colega { white-space:nowrap; max-width:none; margin:0 auto 7vh; font-size:min(1.7vw, 24px); color:rgba(255,255,255,.62); }
.mf-ayuda-bloque { margin:0 0 6vh; }
.mf-lista li { padding-bottom:2vh; }
.manifiesto .pf-vs { margin:0 0 5vh; }
.paquete { padding:8vh 0; }
@media (max-width:760px) { body .manifiesto .mf-colega { white-space:normal; font-size:17px; } }

/* ---- «Nosotros te podemos ayudar si quieres:» en una línea y los seis objetivos en dos columnas de tres ---- */
.mf-ayuda-bloque { display:block; margin:0 0 7vh; }
body .manifiesto .mf-ayuda { position:static; white-space:nowrap; font-size:min(3.4vw, 50px); margin:0 0 4vh; text-align:center; }
.mf-lista { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); grid-auto-flow:column; gap:2.2vh 5vw; max-width:1200px; margin:0 auto; }
.mf-lista li { padding:0; font-size:clamp(18px,1.5vw,24px); }

/* ---- Tabla filmmaker / nosotros: que se vea tabla, elegante, cada celda en una línea ---- */
.manifiesto .pf-vs { display:block; max-width:1200px; margin:0 auto 6vh; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); }
.manifiesto .pf-vs-cab, .manifiesto .pf-vs-fila { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,2.3fr); }
.manifiesto .pf-vs-cab { background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.12); }
.manifiesto .pf-vs-fila + .pf-vs-fila { border-top:1px solid rgba(255,255,255,.07); }
.manifiesto .pf-vs-cab span, .manifiesto .pf-vs-fila span { padding:2.2vh 2vw !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.manifiesto .pf-vs-cab span { font-size:13px !important; }
.manifiesto .pf-vs-fila span { font-size:min(1.2vw, 18px) !important; }
.manifiesto .pf-vs-cab span + span, .manifiesto .pf-vs-fila span + span { border-left:1px solid rgba(255,255,255,.12); background:rgba(24,166,134,.035); }
@media (max-width:760px) {
  body .manifiesto .mf-ayuda { white-space:normal; font-size:28px; }
  .mf-lista { grid-template-columns:1fr; grid-auto-flow:row; }
  .manifiesto .pf-vs-cab, .manifiesto .pf-vs-fila { grid-template-columns:1fr; }
  .manifiesto .pf-vs-cab span, .manifiesto .pf-vs-fila span { white-space:normal; font-size:15px !important; }
  .manifiesto .pf-vs-cab span + span, .manifiesto .pf-vs-fila span + span { border-left:0; }
}
.manifiesto .pf-vs-cab, .manifiesto .pf-vs-fila { grid-template-columns:minmax(0,1fr) minmax(0,2.7fr); } .manifiesto .pf-vs-fila span { font-size:min(1.15vw, 17px) !important; }

/* ---- Franja blanca para «NO SOMOS FILMMAKERS» y la frase del colega; después, vuelta al negro ---- */
.manifiesto { padding-top:0; }
.mf-banner { width:100vw; margin:0 calc(50% - 50vw) 8vh; padding:7vh 6vw 6vh; background:#f4f4f2; color:#0a0a0a; position:relative; }
.mf-banner::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:rgb(24,166,134); }
.mf-banner h2 { color:#0a0a0a; margin-bottom:1.4vh; }
.mf-banner del { color:rgba(10,10,10,.42); }
body .manifiesto .mf-banner .mf-colega { color:rgba(10,10,10,.68); margin-bottom:0; font-weight:500; }
/* Cierre: invitación a elegir */
body .manifiesto .mf-cierre { font:700 clamp(22px,2.4vw,38px)/1.2 var(--sans); letter-spacing:-.02em; color:#fff; margin-top:2vh; }
.mf-cierre b { display:block; font-weight:800; color:rgb(24,166,134); }
/* Objetivos: la parte verde en una línea y la gris debajo */
.mf-lista li b { display:block; margin-bottom:.3em; }
.mf-lista { gap:4vh 6vw; }

/* ---- Dorado: detalles finos para la sensación de lujo (nunca en bloques grandes) ---- */
:root { --oro:#a87a2a; --oro-claro:#c8963e; --oro-grad:linear-gradient(90deg, #7a5418, #c8963e 45%, #a87a2a 70%, #6e4a12); }
/* Lema de la portada: la raya pasa a dorada */
body .b-hero .hero-lema::after { height:2px; background:var(--oro-grad); box-shadow:0 0 18px rgba(168,122,42,.45); }
/* Tabla: cabecera «Nosotros» en dorado y filete dorado arriba */
.manifiesto .pf-vs { border-top:1px solid rgba(168,122,42,.55); }
.manifiesto .pf-vs-cab span:last-child { color:var(--oro) !important; }
/* «Precio cerrado, resultados medibles.» con un filete dorado encima */
body .manifiesto .mf-cierre::before { content:""; display:block; width:64px; height:1px; margin:0 auto 3vh; background:var(--oro-grad); }
/* Botón «Ver el paquete»: borde dorado; al pasar, relleno verde */
.paq-ver { border-color:rgba(168,122,42,.6); }
.paq-ver::after { color:var(--oro); }
.paq-ver:hover::after { color:inherit; }
/* Caja de contacto: esquinas y línea de luz doradas */
.cta-caja::before, .cta-caja::after { border-color:rgba(168,122,42,.75); }
.cta-luz { background:linear-gradient(90deg, transparent, rgba(200,150,62,.9), transparent); }
/* Tarjetas de paquetes: «Ver paquete» en dorado */
.plato-v { color:var(--oro-claro); }

/* ---- Franja blanca con más clase: marfil cálido con luz, grano de papel y filetes dorados ---- */
.mf-banner { background:
    radial-gradient(ellipse 70% 120% at 50% 0%, #fbfaf6 0%, #efebe2 60%, #e3ddd0 100%);
  padding:9vh 6vw 8vh; box-shadow:inset 0 30px 60px -40px rgba(0,0,0,.35), inset 0 -30px 60px -40px rgba(0,0,0,.25); }
.mf-banner::before { content:""; position:absolute; inset:0; pointer-events:none; background:url(assets/film/grano.svg); opacity:.18; mix-blend-mode:multiply; }
.mf-banner::after { left:50%; right:auto; width:min(420px,50%); height:1px; bottom:3.4vh; transform:translateX(-50%); background:var(--oro-grad); }
.mf-banner h2 { position:relative; color:#111; letter-spacing:-.045em; }
body .manifiesto .mf-banner .mf-colega { position:relative; color:rgba(17,17,17,.6); font-weight:400; letter-spacing:.01em; }
.mf-banner del { color:rgba(17,17,17,.35); }
body .manifiesto .mf-cierre { text-transform:uppercase; letter-spacing:-.01em; }
body .manifiesto .mf-ayuda { text-transform:uppercase; font-size:min(3vw, 44px); letter-spacing:-.015em; } .mf-lista li b { text-transform:uppercase; letter-spacing:-.005em; }

/* Objetivos: columna izquierda alineada a la derecha y derecha a la izquierda, sin tope hacia fuera */
.mf-lista { max-width:none; width:100%; column-gap:8vw; }
.mf-lista li:nth-child(-n+3) { text-align:right; }
.mf-lista li:nth-child(n+4) { text-align:left; }
@media (max-width:760px) { .mf-lista li:nth-child(-n+3) { text-align:left; } }

/* Raya bajo el lema de la portada: otra vez verde */
body .b-hero .hero-lema::after { height:3px; background:rgb(24,166,134); box-shadow:0 0 22px rgba(24,166,134,.55); }

/* Franja marfil: ribete verde y dorado en los dos bordes, luz que la recorre despacio y viñeteado suave */
.mf-banner { overflow:hidden;
  border-top:3px solid rgb(24,166,134); border-bottom:3px solid rgb(24,166,134);
  box-shadow:inset 0 3px 0 #a87a2a, inset 0 -3px 0 #a87a2a, inset 0 40px 70px -50px rgba(0,0,0,.4), inset 0 -40px 70px -50px rgba(0,0,0,.3);
  background:
    radial-gradient(ellipse 60% 140% at 50% 50%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 120% 160% at 50% 50%, transparent 55%, rgba(120,100,70,.18) 100%),
    linear-gradient(180deg, #f6f3ec, #ebe5d8); }
.mf-banner::after { content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; height:auto; transform:skewX(-18deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); box-shadow:none; animation:satin 9s ease-in-out infinite; pointer-events:none; }
@keyframes satin { 0%, 35% { left:-40%; } 75%, 100% { left:120%; } }
@media (prefers-reduced-motion:reduce) { .mf-banner::after { animation:none; display:none; } }

/* Objetivos: frases grises algo más grandes y con más luz */
.mf-lista li { font-size:clamp(17px,1.3vw,21px); color:rgba(255,255,255,.72); }

/* ---- Menú de paquetes: cinco miniaturas 16:9; al pasar, avance del vídeo sin sonido; al pulsar, baja a su explicación ---- */
.menu-paq { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; width:100vw; margin:6vh calc(50% - 50vw) 0; padding:0 var(--lado); }
.menu-paq a { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#000; text-decoration:none; color:#fff;
  outline:1px solid rgba(255,255,255,.08); outline-offset:-1px; transition:transform .5s var(--ease), outline-color .4s, box-shadow .5s; }
.menu-paq img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55) saturate(.8); transition:filter .5s, transform 1.2s var(--ease); }
.menu-paq iframe { position:absolute; left:50%; top:50%; width:177.78%; height:177.78%; transform:translate(-50%,-50%) scale(.5625); border:0; pointer-events:none; opacity:0; transition:opacity .6s; }
.menu-paq a.vivo iframe { opacity:1; }
.menu-paq a::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%, rgba(0,0,0,.85)); pointer-events:none; }
.menu-paq span { position:absolute; z-index:1; left:14px; right:14px; bottom:12px; font:800 clamp(12px,1vw,16px)/1.2 var(--sans); text-transform:uppercase; letter-spacing:-.005em; text-align:left; }
.menu-paq a:hover, .menu-paq a:focus-visible { transform:translateY(-6px); outline-color:#a87a2a; box-shadow:0 24px 50px -20px rgba(24,166,134,.45); }
.menu-paq a:hover img { filter:brightness(.85) saturate(1); transform:scale(1.05); }
.paquete { scroll-margin-top:90px; }
@media (max-width:760px) { .menu-paq { grid-template-columns:1fr 1fr; } .menu-paq a:last-child { grid-column:1/-1; } }
.menu-paq { width:100%; margin:6vh 0 0; padding:0; }

/* ---- Carta interactiva: cinco números (como la carta de un kebab: «quiero el 3») y un reproductor grande debajo ---- */
.carta-int { width:100%; max-width:1260px; margin:6vh auto 0; }
.menu-paq { width:90%; margin:0 auto; padding:0; gap:12px; }
.menu-paq button { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; padding:0; border:0; background:#000; color:#fff; cursor:pointer; font:inherit;
  outline:1px solid rgba(255,255,255,.08); outline-offset:-1px; transition:transform .45s var(--ease), outline-color .3s, box-shadow .45s; }
.menu-paq button img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.45) saturate(.7); transition:filter .4s, transform 1s var(--ease); }
.menu-paq button::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 30%, rgba(0,0,0,.85)); }
.menu-paq button i { position:absolute; z-index:1; top:-.08em; left:.1em; font:800 clamp(48px,5.4vw,84px)/1 var(--sans); font-style:normal; letter-spacing:-.06em; color:rgba(255,255,255,.9); text-shadow:0 4px 20px rgba(0,0,0,.6); }
.menu-paq button span { position:absolute; z-index:1; left:12px; right:12px; bottom:10px; font:800 clamp(11px,.85vw,14px)/1.2 var(--sans); text-transform:uppercase; text-align:left; }
.menu-paq button:hover { transform:translateY(-4px); }
.menu-paq button:hover img { filter:brightness(.7) saturate(.9); }
.menu-paq button[aria-pressed="true"] { outline:2px solid #a87a2a; box-shadow:0 18px 40px -18px rgba(168,122,42,.6); }
.menu-paq button[aria-pressed="true"] img { filter:brightness(.85) saturate(1); }
.menu-paq button[aria-pressed="true"] i { color:#c8963e; }
.visor-paq { position:relative; margin-top:18px; aspect-ratio:16/9; overflow:hidden; background:#000; outline:1px solid rgba(255,255,255,.08); }
.vp-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
.visor-paq::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(0,0,0,.85)); pointer-events:none; }
.vp-info { position:absolute; z-index:1; left:clamp(18px,3vw,48px); right:clamp(18px,3vw,48px); bottom:clamp(18px,3vw,44px); display:flex; align-items:flex-end; gap:clamp(14px,2vw,30px); text-align:left; }
.vp-n { font:800 clamp(70px,9vw,150px)/.8 var(--sans); font-style:normal; letter-spacing:-.07em; color:#c8963e; }
.vp-t { flex:1; margin:0; font:800 clamp(22px,2.6vw,42px)/1.05 var(--sans) !important; text-transform:uppercase; letter-spacing:-.02em !important; color:#fff; }
.vp-ir { margin:0; background:rgba(0,0,0,.35); }
.vp-ir::after { content:"↓"; }
@media (max-width:760px) { .menu-paq { width:100%; grid-template-columns:repeat(5,1fr); gap:6px; } .menu-paq button span { display:none; } .menu-paq button i { font-size:34px; }
  .visor-paq { aspect-ratio:4/5; } .vp-video iframe { width:250%; left:-75%; } .vp-info { flex-wrap:wrap; } }

/* Reproductor de la carta: vídeo a la izquierda y, a la derecha, número, título, promesa, precio y botón */
.visor-paq { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); aspect-ratio:auto; overflow:visible; background:rgba(255,255,255,.02); outline:1px solid rgba(255,255,255,.08); }
.visor-paq::after { content:none; }
.vp-pantalla { position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.vp-pantalla .car-flecha { top:50%; width:34px; height:40px; }
.vp-pantalla .car-flecha.izq { left:14px; } .vp-pantalla .car-flecha.der { right:14px; }
.vp-info { position:static; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; padding:clamp(20px,3vw,48px); border-left:1px solid rgba(168,122,42,.45); }
.vp-n { font-size:clamp(70px,7vw,120px); margin-bottom:1.6vh; }
.vp-t { flex:none; margin-bottom:2.4vh !important; font-size:clamp(20px,1.9vw,32px) !important; }
body .vp-promesa { margin:0 0 3vh; font:400 clamp(15px,1.1vw,18px)/1.55 var(--sans); color:rgba(255,255,255,.75); }
body .vp-precio { margin:0 0 3.4vh; font:500 13px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.vp-precio b { font:800 clamp(22px,1.8vw,30px) var(--sans); letter-spacing:-.01em; text-transform:none; color:#fff; margin-left:.3em; }
.vp-ir { background:none; }
@media (max-width:760px) { .visor-paq { grid-template-columns:1fr; } .vp-pantalla { aspect-ratio:16/9; } .vp-video iframe { width:100%; left:0; } .vp-info { border-left:0; border-top:1px solid rgba(168,122,42,.45); } }
.vp-pantalla .car-flecha { z-index:3; width:40px; height:46px; } .vp-pantalla .car-flecha svg { fill:#fff; opacity:.85; }
/* Carta más ancha: más sitio para la promesa */
.carta-int { max-width:1500px; } .visor-paq { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); } body .vp-promesa { max-width:40ch; }

/* ---- Separador bajo la carta: dos filetes que nacen del sello B2B, con un destello que viaja hacia fuera ---- */
.separador { position:relative; display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); width:100vw; margin:14vh calc(50% - 50vw) 4vh; padding:0 6vw; }
.sep-linea { position:relative; flex:1; height:1px; overflow:hidden;
  background:linear-gradient(90deg, transparent, rgba(168,122,42,.55) 40%, rgba(200,150,62,.9)); }
.sep-linea:last-child { background:linear-gradient(270deg, transparent, rgba(168,122,42,.55) 40%, rgba(200,150,62,.9)); }
.sep-linea::after { content:""; position:absolute; top:-1px; height:3px; width:22%; background:linear-gradient(90deg, transparent, #f1d79a, transparent); filter:blur(.5px); animation:destello-izq 5.5s ease-in-out infinite; }
.sep-linea:first-child::after { right:0; }
.sep-linea:last-child::after { left:0; animation-name:destello-der; }
@keyframes destello-izq { 0% { transform:translateX(0); opacity:0; } 15% { opacity:1; } 70%,100% { transform:translateX(-480%); opacity:0; } }
@keyframes destello-der { 0% { transform:translateX(0); opacity:0; } 15% { opacity:1; } 70%,100% { transform:translateX(480%); opacity:0; } }
.sep-sello { position:relative; display:grid; place-items:center; width:clamp(78px,7vw,108px); aspect-ratio:1; transform:rotate(45deg);
  border:1px solid #a87a2a; box-shadow:0 0 0 6px rgba(168,122,42,.12), 0 0 40px rgba(24,166,134,.25), inset 0 0 30px rgba(168,122,42,.15);
  font:800 clamp(16px,1.4vw,22px) var(--sans); letter-spacing:.06em; color:transparent; }
.sep-sello::before { content:"B2B"; position:absolute; transform:rotate(-45deg); color:#c8963e; letter-spacing:.04em; }
.sep-sello::after { content:""; position:absolute; inset:8px; border:1px solid rgba(24,166,134,.55); }
@media (prefers-reduced-motion:reduce) { .sep-linea::after { animation:none; opacity:0; } }
.sep-linea { height:2px; background:linear-gradient(90deg, transparent, rgba(168,122,42,.8) 35%, #c8963e) !important; } .sep-linea:last-child { background:linear-gradient(270deg, transparent, rgba(168,122,42,.8) 35%, #c8963e) !important; } .sep-linea::after { height:4px; top:-1px; }

/* Flechas fuera del vídeo, en el aire a los lados del reproductor */
.visor-paq { position:relative; }
.visor-paq > .car-flecha { position:absolute; top:50%; z-index:3; width:40px; height:46px; transform:translateY(-50%); }
.visor-paq > .car-flecha svg { fill:#efeae0; opacity:.75; }
.visor-paq > .car-flecha.izq { left:-70px; } .visor-paq > .car-flecha.der { right:-70px; }
@media (max-width:1640px) { .visor-paq > .car-flecha.izq { left:-54px; } .visor-paq > .car-flecha.der { right:-54px; } }
@media (max-width:760px) { .visor-paq > .car-flecha { top:28vw; } .visor-paq > .car-flecha.izq { left:4px; } .visor-paq > .car-flecha.der { right:4px; } }

/* ---- Separador: luz blanco hueso que entra en diagonal, como a través de una persiana, y se desvanece ---- */
.separador { display:block; position:relative; width:100vw; height:30vh; min-height:200px; margin:10vh calc(50% - 50vw) 2vh; padding:0; overflow:hidden; gap:0; }
.separador .sep-linea, .separador .sep-sello { display:none; }
.sep-luz { position:absolute; inset:-20% -10%; display:block;
  background:
    radial-gradient(ellipse 38% 60% at 50% 50%, rgba(239,234,224,.16), transparent 70%),
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(239,234,224,.07) 46px 47px, transparent 47px 92px, rgba(239,234,224,.035) 92px 120px);
  -webkit-mask:radial-gradient(ellipse 55% 55% at 50% 50%, #000 20%, transparent 75%); mask:radial-gradient(ellipse 55% 55% at 50% 50%, #000 20%, transparent 75%);
  animation:persiana 18s linear infinite; }
.separador::after { content:""; position:absolute; left:15%; right:15%; top:50%; height:1px; background:linear-gradient(90deg, transparent, rgba(239,234,224,.55), transparent); box-shadow:0 0 24px rgba(239,234,224,.35); }
@keyframes persiana { from { background-position:0 0, 0 0; } to { background-position:0 0, 240px 0; } }
@media (prefers-reduced-motion:reduce) { .sep-luz { animation:none; } }
.sep-luz { background:radial-gradient(ellipse 38% 60% at 50% 50%, rgba(239,234,224,.22), transparent 70%), repeating-linear-gradient(118deg, transparent 0 46px, rgba(239,234,224,.12) 46px 48px, transparent 48px 92px, rgba(239,234,224,.05) 92px 124px) !important; }

/* ---- Separador, otra vez: solo luz. Un destello anamórfico de cine (raya horizontal de luz con núcleo y halo) que respira ---- */
.sep-luz { inset:0 !important; -webkit-mask:none !important; mask:none !important; animation:flare 7s ease-in-out infinite !important;
  background:
    radial-gradient(ellipse 4% 9% at 50% 50%, rgba(255,252,244,.95), rgba(255,252,244,0) 70%),
    radial-gradient(ellipse 14% 24% at 50% 50%, rgba(239,232,216,.28), transparent 70%),
    radial-gradient(ellipse 46% 3% at 50% 50%, rgba(239,232,216,.55), transparent 70%),
    radial-gradient(ellipse 70% 40% at 50% 50%, rgba(239,232,216,.07), transparent 75%) !important; }
.separador::after { left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 5%, rgba(239,232,216,.35) 35%, rgba(255,252,244,.9) 50%, rgba(239,232,216,.35) 65%, transparent 95%); box-shadow:0 0 18px rgba(239,232,216,.5); animation:flare 7s ease-in-out infinite; }
@keyframes flare { 0%,100% { opacity:.65; transform:scaleX(.92); } 50% { opacity:1; transform:scaleX(1.06); } }

/* ---- Separador definitivo: un hilo vertical de luz blanco hueso que se dibuja al llegar y termina en un punto ----
   Nada más: aire, una línea y un detalle. Como las webs de relojería o de moda. */
.separador { height:auto; min-height:0; margin:12vh auto 6vh; width:auto; padding:0; overflow:visible; display:flex; justify-content:center; }
.separador::after { content:none !important; }
.sep-luz { position:relative !important; inset:auto !important; display:block; width:1px; height:16vh; animation:none !important;
  background:linear-gradient(rgba(239,232,216,0), rgba(239,232,216,.75)) !important;
  transform:scaleY(0); transform-origin:top; transition:transform 1.6s cubic-bezier(.6,0,.2,1); }
.sep-luz::after { content:""; position:absolute; left:50%; bottom:-4px; width:7px; height:7px; border-radius:50%; transform:translateX(-50%) scale(0);
  background:#f3ede0; box-shadow:0 0 0 6px rgba(239,232,216,.06), 0 0 22px 4px rgba(239,232,216,.35); transition:transform .6s 1.4s var(--ease); }
.separador.visto .sep-luz { transform:scaleY(1); }
.separador.visto .sep-luz::after { transform:translateX(-50%) scale(1); }
@media (prefers-reduced-motion:reduce) { .sep-luz { transform:none; transition:none; } .sep-luz::after { transform:translateX(-50%); transition:none; } }

/* ---- Barra flotante de la carta (abajo, centrada): «Carta» para volver arriba y los números 1-5 para saltar ---- */
.separador { display:none !important; }
.carta-int { scroll-margin-top:90px; }
.mini-carta { position:fixed; left:50%; bottom:22px; z-index:30; display:flex; align-items:center; gap:4px; padding:6px; transform:translate(-50%, 140%); opacity:0;
  background:rgba(10,10,10,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1); border-radius:999px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.8); transition:transform .6s var(--ease), opacity .4s; }
.mini-carta.on { transform:translate(-50%, 0); opacity:1; }
.mini-carta a { display:grid; place-items:center; min-width:38px; height:38px; padding:0 4px; border-radius:999px; text-decoration:none;
  font:800 15px var(--sans); color:rgba(255,255,255,.6); transition:background .3s, color .3s; }
.mini-carta a:hover { color:#fff; background:rgba(255,255,255,.08); }
.mini-carta a.act { color:#0a0a0a; background:#c8963e; }
.mini-carta .mc-arriba { padding:0 16px; margin-right:4px; font:700 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#efe8d8; border:1px solid rgba(255,255,255,.14); }
.mini-carta .mc-arriba::before { content:"↑"; margin-right:.5em; font-size:14px; }
.mini-carta .mc-arriba { display:flex; white-space:nowrap; }

/* ---- Cada pack con su fondo: misma base negra, distinta luz (de lado a lado de la pantalla) ---- */
.paquete { position:relative; isolation:isolate; border-top:0; }
.paquete::before { content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  border-top:1px solid rgba(255,255,255,.06); }
/* 1 · Documental: luz cálida blanco hueso que entra desde la izquierda, como una ventana */
#documental-de-marca::before { background:radial-gradient(ellipse 60% 90% at 0% 30%, rgba(239,228,205,.10), transparent 70%), linear-gradient(180deg, #0b0a09, #070707); }
/* 2 · Podcast: verde profundo, de estudio, desde arriba a la derecha */
#podcast-ferias-congresos::before { background:radial-gradient(ellipse 55% 80% at 100% 0%, rgba(24,166,134,.16), transparent 70%), linear-gradient(180deg, #050a09, #040706); }
/* 3 · Making of: luz de plató, un foco blanco frío desde arriba en el centro */
#amplificacion-de-eventos::before { background:radial-gradient(ellipse 45% 70% at 50% -10%, rgba(220,226,235,.10), transparent 70%), linear-gradient(180deg, #08090b, #060607); }
/* 4 · Transmedia: ocre, como luz de atardecer desde abajo a la izquierda */
#ficcion-de-marca::before { background:radial-gradient(ellipse 60% 80% at 0% 100%, rgba(168,122,42,.16), transparent 70%), linear-gradient(180deg, #0a0806, #070605); }
/* 5 · Formación: luz azulada y limpia desde la derecha, como una pantalla */
#marketing-educativo::before { background:radial-gradient(ellipse 55% 85% at 100% 60%, rgba(120,160,200,.10), transparent 70%), linear-gradient(180deg, #06080a, #050607); }

/* Portada: atajo a los packs bajo el lema */
.b-hero .hero-packs { position:relative; z-index:1; margin-top:4.5vh; padding:.95em 1.9em; border:1px solid rgba(239,232,216,.45); background:rgba(0,0,0,.25); backdrop-filter:blur(6px);
  font:700 12px var(--sans); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:#efe8d8; transition:background .3s, color .3s, border-color .3s; }
.b-hero .hero-packs::after { content:"↓"; margin-left:.8em; }
.b-hero .hero-packs:hover { background:#efe8d8; color:#0a0a0a; border-color:#efe8d8; }
/* Menos aire entre la franja marfil y «Nosotros te podemos ayudar» */
.mf-banner { margin-bottom:5vh; }
/* Pie: los cinco packs enlazados, discretos (para Google y para quien los busque) */
.pie-packs { display:flex; flex-wrap:wrap; gap:4px 18px; }
.pie-packs a { font-size:11px; color:rgba(255,255,255,.4); text-decoration:none; }
.pie-packs a:hover { color:#efe8d8; }

/* ---- Pack especial Navidad: aparte de la carta, una franja propia con luz cálida y filete dorado ---- */
.especial { position:relative; display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:clamp(14px,2.4vw,40px); width:100%; margin:3vh 0 0; padding:clamp(20px,2.6vw,36px) clamp(22px,3vw,48px);
  text-decoration:none; color:#fff; overflow:hidden; border:1px solid rgba(168,122,42,.55);
  background:radial-gradient(ellipse 50% 140% at 0% 50%, rgba(200,150,62,.22), transparent 70%), radial-gradient(ellipse 30% 120% at 100% 50%, rgba(239,228,205,.07), transparent 70%), #0b0907;
  transition:border-color .4s, box-shadow .5s; }
.especial:hover { border-color:#c8963e; box-shadow:0 20px 60px -25px rgba(200,150,62,.5); }
.esp-etq { font:700 11px var(--sans); letter-spacing:.24em; text-transform:uppercase; color:#c8963e; }
.esp-t { font:800 clamp(30px,3.6vw,56px)/1 var(--sans); letter-spacing:-.03em; text-transform:uppercase; }
.esp-d { font:400 15px/1.5 var(--sans); color:rgba(255,255,255,.7); }
.esp-d.pend { display:block; font-family:var(--sans); font-size:13px; }
.esp-ir { padding:.95em 1.6em; border:1px solid rgba(168,122,42,.7); font:700 12px var(--sans); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; transition:background .3s, color .3s; }
.esp-ir::after { content:" →"; }
.especial:hover .esp-ir { background:#c8963e; color:#0a0a0a; }
@media (max-width:760px) { .especial { grid-template-columns:1fr; } }
.p-index .contacto-home .contactpage { position:absolute !important; inset:0 !important; display:block !important; padding:0 !important; min-height:0 !important; } .contacto-home .tarjeta { position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; }

/* ---- Contacto al final de la portada: la misma tarjeta que la página de Contacto, centrada en su franja ---- */
.contacto-home { position:relative; width:100vw; height:min(100vh, 900px); min-height:620px; margin:8vh calc(50% - 50vw) 0; overflow:hidden; }
.contacto-home .visor { position:absolute; inset:0; height:100%; }

/* ---- Packs en la portada: etiqueta blanco hueso con corte diagonal (un tercio del ancho), alternando izquierda y derecha;
   en la parte negra, la propuesta de valor y un vídeo de ejemplo ---- */
.p-index main section.paquete { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:0; align-items:stretch;
  width:100vw; max-width:none; margin:0 calc(50% - 50vw); padding:0; min-height:min(78vh, 760px); text-align:left; }
.paquete::before { border-top:0; }
.paq-cab { position:relative !important; top:auto !important; display:flex; flex-direction:column; justify-content:center; gap:2vh;
  padding:8vh 7vw 8vh 5vw; background:linear-gradient(160deg, #f6f3ec, #e9e3d6); color:#111;
  clip-path:polygon(0 0, 100% 0, 80% 100%, 0 100%); }
.paq-num { font:800 clamp(90px,11vw,190px)/.8 var(--sans); letter-spacing:-.07em; color:#a87a2a; }
.paquete .paq-cab h2 { margin:0; max-width:11ch; font-size:clamp(28px,3.2vw,54px) !important; line-height:1 !important; font-weight:800; text-transform:uppercase; color:#111; letter-spacing:-.03em !important; }
.paq-cuerpo { display:flex; flex-direction:column; justify-content:center; padding:8vh 6vw 8vh 4vw; }
/* Pares: etiqueta a la derecha, corte hacia el otro lado */
.p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
#networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { order:2; clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%); padding:8vh 5vw 8vh 7vw; align-items:flex-end; text-align:right; }
#networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { padding:8vh 4vw 8vh 6vw; }
/* Un solo vídeo de ejemplo, grande */
.paquete .ejemplos { grid-template-columns:1fr; max-width:760px; margin:3vh 0 0; }
.paquete .ejemplos .vid:not(:first-child) { display:none; }
.paquete .paq-cuerpo > p { max-width:60ch; font-size:clamp(16px,1.15vw,19px); }
@media (max-width:760px) {
  .p-index main section.paquete, .p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:1fr; min-height:0; }
  .paq-cab, #networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { order:0; clip-path:polygon(0 0, 100% 0, 100% 82%, 0 100%); padding:6vh 6vw 9vh; align-items:flex-start; text-align:left; }
  .paq-cuerpo, #networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { padding:4vh 6vw 8vh; }
}
.paquete .paq-cab { align-self:stretch !important; }
.paq-cab { padding-right:10vw !important; } #networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { padding-right:5vw !important; padding-left:10vw !important; } .paquete .paq-cab h2 { font-size:clamp(26px,2.8vw,48px) !important; }

/* ---- Packs más compactos: franja algo más alta que el vídeo; etiqueta blanca más estrecha (una cuarta parte) ---- */
.p-index main section.paquete { grid-template-columns:minmax(0,1fr) minmax(0,3fr); min-height:0; }
.p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:minmax(0,3fr) minmax(0,1fr); }
.paq-cab { padding-top:4vh !important; padding-bottom:4vh !important; padding-left:3.5vw !important; padding-right:6vw !important; gap:1.4vh; }
#networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { padding-left:6vw !important; padding-right:3.5vw !important; }
.paq-num { font-size:clamp(70px,7.5vw,130px); }
.paquete .paq-cab h2 { font-size:clamp(20px,2vw,34px) !important; }
.paq-cuerpo { padding:4.5vh 5vw 4.5vh 3vw !important; }
#networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { padding:4.5vh 3vw 4.5vh 5vw !important; }
.paquete .ejemplos { max-width:620px; margin-top:2vh; }
.paquete .paq-cuerpo > p { margin-bottom:1vh; }

/* Separación entre packs: un hilo blanco que nace en el borde de la etiqueta y se apaga hacia el otro lado */
.paquete { --hilo:linear-gradient(90deg, rgba(239,232,216,.75), rgba(239,232,216,.25) 40%, transparent 85%); }
#networking-podcast-b2b, #ficcion-de-marca { --hilo:linear-gradient(270deg, rgba(239,232,216,.75), rgba(239,232,216,.25) 40%, transparent 85%); }
.paquete::after { content:""; position:absolute; z-index:1; left:50%; width:100vw; transform:translateX(-50%); top:0; height:1px; background:var(--hilo); pointer-events:none; }
@media (max-width:760px) { .p-index main section.paquete, .p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:1fr; } }

/* ---- Packs con alto fijo (como el 3): en la parte negra, texto a un lado y vídeo al otro, a la misma altura ---- */
.p-index main section.paquete { height:clamp(340px, 29vw, 460px); min-height:0; }
.paq-cab { padding-top:0 !important; padding-bottom:0 !important; }
.paquete .paq-cuerpo { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); grid-auto-rows:min-content; align-content:center; column-gap:3.5vw; row-gap:1vh; padding-top:0 !important; padding-bottom:0 !important; overflow:hidden; }
.paquete .paq-cuerpo > :not(.ejemplos) { grid-column:1; margin:0; }
.paquete .paq-cuerpo > .ejemplos { grid-column:2; grid-row:1 / span 12; align-self:center; margin:0; max-width:none; }
.paquete .paq-cuerpo > p { font-size:clamp(14px,1vw,17px); line-height:1.6; }
.paquete .vid-t { padding-top:8px; }
@media (max-width:760px) { .p-index main section.paquete { height:auto; } .paquete .paq-cuerpo { grid-template-columns:1fr; padding:4vh 6vw 6vh !important; }
  .paquete .paq-cuerpo > .ejemplos { grid-column:1; grid-row:auto; } }

/* =====================================================================================================
   PACKS · maquetación definitiva (sustituye a las pruebas anteriores)
   - Franja de alto fijo (--alto-pack). El vídeo de ejemplo mide 10 px menos que la franja (5 px arriba y abajo),
     sea horizontal o vertical: se ajusta por altura y conserva su proporción.
   - Etiqueta blanco hueso (una cuarta parte) con número y título siempre dentro del corte diagonal.
   - El texto va junto al vídeo, centrado en vertical y dentro de la franja.
   ===================================================================================================== */
:root { --alto-pack:clamp(360px, 30vw, 470px); }
.p-index main section.paquete { height:var(--alto-pack); width:auto; margin:0 calc(-1 * var(--lado)); overflow:hidden;
  grid-template-columns:minmax(0,1fr) minmax(0,3fr) !important; }
.p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:minmax(0,3fr) minmax(0,1fr) !important; }
.paquete::before { left:0; width:100%; transform:none; }
.paquete::after { left:0; width:100%; transform:none; }

/* Etiqueta */
.paquete .paq-cab { justify-content:center; gap:1.2vh; overflow:hidden; padding:0 7.5vw 0 3vw !important; }
#networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { padding:0 3vw 0 7.5vw !important; }
.paquete .paq-num { font-size:clamp(64px,6.4vw,118px); }
.paquete .paq-cab h2 { font-size:clamp(18px,1.65vw,30px) !important; max-width:100%; overflow-wrap:break-word; hyphens:auto; }

/* Parte negra: texto | vídeo (y en los packs con la etiqueta a la derecha: vídeo | texto) */
.paquete .paq-cuerpo { grid-template-columns:minmax(220px,1fr) auto !important; column-gap:3vw; align-content:center; align-items:center;
  height:var(--alto-pack); padding:5px 3vw 5px 2.6vw !important; }
.paquete .paq-cuerpo > :not(.ejemplos) { grid-column:1 !important; max-width:52ch; }
.paquete .paq-cuerpo > .ejemplos { grid-column:2 !important; grid-row:1 / span 20 !important; align-self:center; height:calc(var(--alto-pack) - 10px); display:block; }
#networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { grid-template-columns:auto minmax(220px,1fr) !important; padding:5px 2.6vw 5px 3vw !important; }
#networking-podcast-b2b .paq-cuerpo > :not(.ejemplos), #ficcion-de-marca .paq-cuerpo > :not(.ejemplos) { grid-column:2 !important; }
#networking-podcast-b2b .paq-cuerpo > .ejemplos, #ficcion-de-marca .paq-cuerpo > .ejemplos { grid-column:1 !important; }
.paquete .paq-cuerpo > p { font-size:clamp(14px,1vw,16px) !important; line-height:1.6 !important; }
.paquete .paq-cuerpo > p:first-child::before { content:""; display:block; width:40px; height:1px; margin-bottom:2vh; background:#a87a2a; }

/* Vídeo de ejemplo: alto = franja − 10 px; ancho según su proporción; título encima, abajo */
.paquete .ejemplos .vid { position:relative; height:100%; width:auto; display:block; overflow:hidden; outline:1px solid rgba(168,122,42,.35); outline-offset:-1px; }
.paquete .ejemplos .vid img { height:100%; width:auto; max-width:min(52vw, 860px); aspect-ratio:auto; object-fit:cover; filter:brightness(.85); transition:filter .4s, transform 1s var(--ease); }
.paquete .ejemplos .vid:hover img { filter:brightness(1); transform:scale(1.03); }
.paquete .ejemplos .vid::after { top:50% !important; }
.paquete .ejemplos .vid-t { position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; background:linear-gradient(transparent, rgba(0,0,0,.8)); color:#efe8d8; }

/* Móvil: todo apilado y con alto libre */
@media (max-width:760px) {
  .p-index main section.paquete { height:auto; grid-template-columns:1fr !important; }
  .paquete .paq-cab, #networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { padding:6vh 6vw 9vh !important; }
  .paquete .paq-cuerpo, #networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { grid-template-columns:1fr !important; height:auto; padding:4vh 6vw 6vh !important; }
  .paquete .paq-cuerpo > *, .paquete .paq-cuerpo > .ejemplos { grid-column:1 !important; grid-row:auto !important; height:auto; }
  .paquete .ejemplos .vid, .paquete .ejemplos .vid img { height:auto; width:100%; max-width:none; max-height:70vh; }
}
/* Más sitio para el texto: el vídeo horizontal se recorta un poco por los lados si hace falta (nunca en alto) */
.paquete .ejemplos .vid img { max-width:min(38vw, 640px); }
.paquete .cifras { grid-template-columns:repeat(4,auto) !important; justify-content:start; gap:0 2.2vw !important; padding-top:1.6vh !important; }
.paquete .cifras b { font-size:clamp(26px,2.4vw,40px) !important; }
.paquete .cifras span { font-size:9px !important; letter-spacing:.08em !important; }
.paquete .paq-cuerpo { row-gap:0 !important; } .paquete .paq-cuerpo > :not(.ejemplos) + :not(.ejemplos) { margin-top:1.6vh !important; }

/* Parte negra como bloque: texto y vídeo juntos, centrados en vertical y en horizontal */
.paquete .paq-cuerpo { display:flex !important; align-items:center; justify-content:center; gap:3.5vw; }
.paquete .paq-texto { flex:0 1 50ch; display:flex; flex-direction:column; justify-content:center; gap:1.6vh; max-height:calc(var(--alto-pack) - 40px); }
.paquete .paq-texto > * { margin:0 !important; }
.paquete .paq-texto > p:first-child::before { content:""; display:block; width:40px; height:1px; margin-bottom:2vh; background:#a87a2a; }
.paquete .paq-texto > p { font-size:clamp(14px,1vw,16px) !important; line-height:1.6 !important; }
.paquete .paq-cuerpo > .ejemplos { flex:none; }
#networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { flex-direction:row-reverse; }
@media (max-width:760px) { .paquete .paq-cuerpo, #networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { flex-direction:column; align-items:stretch; } .paquete .paq-texto { max-height:none; flex:none; } }
.paquete .paq-cuerpo { flex-direction:row; } #networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { flex-direction:row-reverse; } @media (max-width:760px) { .paquete .paq-cuerpo, #networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { flex-direction:column; } }

/* Etiqueta de pack: un tercio más estrecha (≈ 1/6 del ancho), corte recto vertical, número y título centrados */
.p-index main section.paquete { grid-template-columns:minmax(0,1fr) minmax(0,5fr) !important; }
.p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:minmax(0,5fr) minmax(0,1fr) !important; }
.paquete .paq-cab, #networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { clip-path:none !important; align-items:center !important; text-align:center !important; padding:0 1.4vw !important; }
.paquete .paq-cab h2 { margin:0 auto !important; text-align:center; font-size:clamp(15px,1.3vw,24px) !important; }
.paquete .paq-num { font-size:clamp(56px,5.4vw,100px); }
@media (max-width:760px) { .p-index main section.paquete, .p-index main section#networking-podcast-b2b, .p-index main section#ficcion-de-marca { grid-template-columns:1fr !important; } .paquete .paq-cab, #networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { padding:5vh 6vw !important; } }

/* ---- Propuesta: cada pack es una tarjeta contenida en el ancho de la carta (1500 px), no de borde a borde ---- */
.p-index main section.paquete { width:100%; max-width:1500px; margin:0 auto 3.5vh !important; border-radius:0;
  outline:1px solid rgba(239,232,216,.08); outline-offset:-1px; box-shadow:0 30px 70px -45px rgba(0,0,0,.9); }
.p-index main section#documental-de-marca { margin-top:10vh !important; }
.paquete::before, .paquete::after { left:0 !important; width:100% !important; transform:none !important; }
/* Vídeo de un pack reproduciéndose en su sitio */
.paquete .ejemplos .vid.reproduciendo { cursor:default; outline-color:rgba(168,122,42,.6); }
.paquete .ejemplos .vid.reproduciendo::after { content:none; }
.paquete .ejemplos .vid.reproduciendo iframe { display:block; width:100%; height:100%; border:0; }

/* Vídeos de los packs en 16:9 de verdad: alto = franja − 10 px y ancho = alto × 16/9 (sin recortes a 4:3) */
:root { --alto-pack:clamp(300px, 25vw, 420px); }
.paquete .ejemplos .vid { width:calc((var(--alto-pack) - 10px) * 16 / 9); }
.paquete .ejemplos .vid img { width:100%; height:100%; max-width:none; aspect-ratio:16/9; object-fit:cover; }
.lorem { color:rgba(255,255,255,.62); }

/* =========================== MÓVIL: correcciones finales (van al final para mandar sobre todo lo anterior) =========================== */
@media (max-width:760px) {
  :root { --lado:16px; }
  /* Carta: vídeo arriba y panel debajo, a todo el ancho */
  .carta-int { max-width:100%; }
  .visor-paq { grid-template-columns:1fr !important; }
  .vp-info { border-left:0 !important; border-top:1px solid rgba(168,122,42,.45); padding:22px 18px 26px !important; }
  .vp-n { font-size:64px !important; }
  .vp-t { font-size:22px !important; }
  .visor-paq > .car-flecha { top:calc((100vw - 32px) * 9 / 32); width:34px; height:40px; }
  .visor-paq > .car-flecha.izq { left:6px; } .visor-paq > .car-flecha.der { right:6px; }
  /* Packs: etiqueta, texto y vídeo apilados; vídeo a todo el ancho en 16:9 */
  .p-index main section.paquete { height:auto !important; max-width:100%; }
  .paquete .paq-cab, #networking-podcast-b2b .paq-cab, #ficcion-de-marca .paq-cab { order:0 !important; flex-direction:row !important; justify-content:flex-start !important; align-items:center !important; gap:16px; text-align:left !important; padding:18px 18px !important; }
  .paquete .paq-num { font-size:56px !important; }
  .paquete .paq-cab h2 { margin:0 !important; text-align:left !important; font-size:20px !important; max-width:none; }
  .paquete .paq-cuerpo, #networking-podcast-b2b .paq-cuerpo, #ficcion-de-marca .paq-cuerpo { flex-direction:column !important; height:auto !important; padding:22px 18px 26px !important; gap:18px; }
  .paquete .paq-texto { flex:none !important; max-height:none !important; }
  .paquete .ejemplos { width:100%; height:auto !important; }
  .paquete .ejemplos .vid { width:100% !important; height:auto !important; }
  .paquete .ejemplos .vid img { width:100% !important; height:auto !important; aspect-ratio:16/9; }
  .paquete .ejemplos .vid.reproduciendo { aspect-ratio:16/9; }
  .paquete .cifras { grid-template-columns:repeat(2,auto) !important; gap:12px 28px !important; }
}
@media (max-width:760px) { body .manifiesto .mf-ayuda { white-space:normal !important; font-size:24px !important; line-height:1.15; } .manifiesto h2 { font-size:clamp(28px,9vw,40px) !important; white-space:normal !important; } }

/* Llamada a la acción de cada pack: «Quiero el N» (WhatsApp) y, discreto, «o pídelo por correo» */
.paq-cta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin-top:1vh !important; }
.paq-quiero { display:inline-flex; align-items:center; gap:.7em; padding:.95em 1.6em; background:rgb(24,166,134); color:#06110e; text-decoration:none;
  font:800 13px var(--sans); letter-spacing:.12em; text-transform:uppercase; transition:background .3s, transform .3s; }
.paq-quiero::after { content:"→"; font-weight:400; }
.paq-quiero:hover { background:#efe8d8; transform:translateX(3px); }
.paq-correo { font:500 12px var(--sans); color:rgba(239,232,216,.7); text-decoration:underline; text-decoration-color:rgba(168,122,42,.6); text-underline-offset:4px; }
.paq-correo:hover { color:#fff; }
/* Legibilidad: textos de los packs y cifras algo más grandes y claros */
.paquete .paq-texto > p { font-size:clamp(15px,1.05vw,17px) !important; color:rgba(255,255,255,.8); }
.lorem { color:rgba(255,255,255,.72) !important; }
.paquete .cifras span { font-size:10px !important; color:rgba(255,255,255,.6); }
.paquete .paq-texto { max-height:calc(var(--alto-pack) - 10px) !important; gap:1.1vh !important; } .paquete .paq-texto > p { line-height:1.5 !important; } .paquete .paq-texto > p:first-child::before { margin-bottom:1.4vh !important; }

/* Llamada a la acción de los packs, versión sobria: botón de contorno ocre, letra pequeña espaciada, sin relleno de color */
.paq-quiero { background:transparent !important; color:#efe8d8 !important; border:1px solid rgba(168,122,42,.75); padding:.9em 1.5em;
  font:600 11px var(--sans) !important; letter-spacing:.2em !important; transform:none !important; transition:background .35s, color .35s, border-color .35s; }
.paq-quiero::after { content:"→"; margin-left:.4em; color:#a87a2a; transition:transform .35s, color .35s; }
.paq-quiero:hover { background:#efe8d8 !important; color:#0a0a0a !important; border-color:#efe8d8; }
.paq-quiero:hover::after { color:#0a0a0a; transform:translateX(3px); }
.paq-correo { font-size:11px; letter-spacing:.04em; color:rgba(239,232,216,.55); text-decoration-color:rgba(239,232,216,.25); }

/* ---- Cierre de la portada: mismo lenguaje que los packs (tarjeta contenida, etiqueta blanco hueso + parte negra) ---- */
.p-index main section.cierre { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); width:100%; max-width:1500px; margin:12vh auto 10vh; padding:0; text-align:left;
  outline:1px solid rgba(239,232,216,.08); outline-offset:-1px; background:radial-gradient(ellipse 60% 120% at 100% 100%, rgba(24,166,134,.10), transparent 70%), #070808; }
.cierre-marca { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4vh; padding:6vh 3vw; text-align:center; background:linear-gradient(160deg, #f6f3ec, #e9e3d6); color:#111; }
.cierre-nombre { font:800 clamp(26px,2.6vw,44px)/1 var(--sans); letter-spacing:-.03em; text-transform:uppercase; }
.cierre-cargo { font:600 clamp(11px,.85vw,13px) var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#a87a2a; }
.cierre-cuerpo { display:flex; flex-direction:column; justify-content:center; gap:3.2vh; padding:7vh 5vw; }
.cierre-cuerpo h2 { margin:0; max-width:20ch; font:800 clamp(24px,2.4vw,40px)/1.08 var(--sans) !important; letter-spacing:-.025em !important; text-transform:uppercase; }
.cierre-datos { display:grid; grid-template-columns:auto 1fr; gap:1.2vh 2.4vw; margin:0; align-items:baseline; }
.cierre-datos dt { font:600 11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#a87a2a; }
.cierre-datos dd { margin:0; font:400 clamp(16px,1.2vw,19px) var(--sans); color:#efe8d8; }
.cierre-datos a { color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; }
.cierre-datos a:hover { border-color:rgba(168,122,42,.7); }
@media (max-width:760px) { .p-index main section.cierre { grid-template-columns:1fr; margin:8vh 0; } .cierre-marca { padding:28px 18px; } .cierre-cuerpo { padding:28px 18px 32px; } }
.p-index main section.cierre { align-items:stretch !important; }

/* Cierre: el blanco hueso pasa a ser una franja horizontal arriba (nombre a la izquierda, lema a la derecha) */
.p-index main section.cierre { grid-template-columns:1fr !important; }
.cierre-marca { flex-direction:row !important; justify-content:space-between !important; align-items:baseline !important; gap:2vw; padding:3.4vh 5vw !important; text-align:left !important; }
.cierre-cuerpo { display:grid !important; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; column-gap:5vw; row-gap:3vh; padding:6vh 5vw !important; }
.cierre-cuerpo h2 { grid-column:1; grid-row:1 / span 2; max-width:16ch; }
.cierre-datos, .cierre-cuerpo .paq-cta { grid-column:2; }
@media (max-width:760px) {
  .cierre-marca { flex-direction:column !important; align-items:flex-start !important; gap:8px; padding:22px 18px !important; }
  .cierre-cuerpo { grid-template-columns:1fr; padding:26px 18px 30px !important; }
  .cierre-cuerpo h2, .cierre-datos, .cierre-cuerpo .paq-cta { grid-column:1; grid-row:auto; }
}

/* ---- Cierre de cine: la misma bobina que abre la portada, oscurecida, y encima solo lo esencial (como unos títulos de crédito) ---- */
.p-index main section.cierre-cine { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.6vh; overflow:hidden;
  width:auto; min-height:min(92vh, 860px); margin:14vh calc(-1 * var(--lado)) 0; padding:12vh 6vw; text-align:center; isolation:isolate; }
.cierre-cine .bobina { z-index:-1; }
.cierre-cine .bobina::after { background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(3,4,4,.62), rgba(3,4,4,.9)), linear-gradient(#030404, transparent 25%, transparent 75%, #030404); }
.cierre-cine h2 { margin:0; max-width:18ch; font:800 clamp(30px,4.2vw,68px)/1.02 var(--sans) !important; letter-spacing:-.035em !important; text-transform:uppercase; color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.6); }
.cc-correo { font:300 clamp(20px,2.4vw,38px)/1.2 var(--sans); letter-spacing:.01em; color:#efe8d8; text-decoration:none; border-bottom:1px solid rgba(168,122,42,.7); padding-bottom:.18em; transition:color .3s, border-color .3s; }
.cc-correo:hover { color:#fff; border-color:#efe8d8; }
body .cierre-cine .cc-linea { display:flex; gap:1.6em; justify-content:center; flex-wrap:wrap; margin:0; max-width:none; font:500 12px var(--sans); letter-spacing:.18em; text-transform:uppercase; color:rgba(239,232,216,.6); }
.cc-linea a { color:inherit; text-decoration:none; } .cc-linea a:hover { color:#fff; }
.cierre-cine .paq-quiero { margin-top:1vh; }
@media (max-width:760px) { .p-index main section.cierre-cine { min-height:80vh; margin-top:8vh; padding:10vh 18px; } }

/* =====================================================================================================
   Ancho único para toda la portada: todos los bloques comparten el mismo ancho y los mismos márgenes,
   que crecen con la pantalla (hasta 1760 px de contenido). Así no quedan franjas vacías a los lados.
   ===================================================================================================== */
:root { --margen:clamp(20px, 3.6vw, 72px); --ancho:min(calc(100vw - 2 * var(--margen)), 1760px); }
.p-index main { padding-left:0 !important; padding-right:0 !important; --lado:0px; }
.p-index .manifiesto { max-width:none !important; width:var(--ancho); margin-left:auto; margin-right:auto; }
.p-index .mf-banner { margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; }
.p-index .mf-ayuda-bloque, .p-index .mf-lista { width:100%; max-width:none !important; }
.p-index .carta-int { width:var(--ancho); max-width:none !important; }
.p-index .menu-paq { width:100% !important; }
.p-index main section.paquete { width:var(--ancho) !important; max-width:none !important; }
.p-index .b-hero { margin-left:0 !important; margin-right:0 !important; padding-left:var(--margen) !important; padding-right:var(--margen) !important; }
/* Flechas de la carta: dentro del margen lateral, nunca fuera de la pantalla */
.visor-paq > .car-flecha.izq { left:calc(-1 * var(--margen) + 4px) !important; } .visor-paq > .car-flecha.der { right:calc(-1 * var(--margen) + 4px) !important; }
/* En pantallas muy grandes, la franja de los packs y su vídeo crecen en proporción */
@media (min-width:1700px) { :root { --alto-pack:clamp(360px, 24vw, 480px); } }

/* =====================================================================================================
   ACABADO · un solo lenguaje para toda la portada
   1. Fondo negro puro con la luz verde y el grano (sin cajas grises).
   2. Formas: esquinas redondeadas (16 px en tarjetas y vídeos, cápsula en botones) y un canto de luz
      arriba de cada pieza, como un bisel de cristal.
   3. Profundidad: paralaje suave en el titular, la luz de fondo y los vídeos.
   ===================================================================================================== */
:root { --radio:16px; --radio-s:10px; --canto:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05); }
body { background:#020303 !important; }

/* Tarjetas: cristal oscuro con canto de luz, sin marco cuadrado */
.p-index main section.paquete, .visor-paq, .p-index .menu-paq button, .paquete .ejemplos .vid, .vp-pantalla {
  border-radius:var(--radio); overflow:hidden; }
.p-index main section.paquete { outline:0 !important; box-shadow:var(--canto), 0 40px 80px -50px rgba(0,0,0,.95) !important; background:rgba(255,255,255,.018); }
.paquete::after { display:none !important; }
.paquete::before { border-radius:inherit; }
.visor-paq { outline:0 !important; box-shadow:var(--canto), 0 40px 80px -50px rgba(0,0,0,.95); background:rgba(255,255,255,.02) !important; }
.vp-pantalla { border-radius:var(--radio) 0 0 var(--radio); }
.vp-info { border-left:1px solid rgba(255,255,255,.06) !important; }
.p-index .menu-paq button { border-radius:var(--radio-s); outline:0 !important; box-shadow:var(--canto); }
.p-index .menu-paq button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px #a87a2a, 0 18px 40px -18px rgba(168,122,42,.6); }

/* Etiqueta del pack: pieza de marfil flotando dentro de la tarjeta, con sus propias esquinas */
.paquete .paq-cab { margin:10px; border-radius:calc(var(--radio) - 6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -12px rgba(0,0,0,.6); }
.paquete .ejemplos .vid { outline:0 !important; box-shadow:var(--canto), 0 20px 50px -25px rgba(0,0,0,.9); }
.paquete .ejemplos .vid img { border-radius:inherit; }

/* Botones en cápsula */
.paq-quiero, .paq-ver, .b-hero .hero-packs, .esp-ir { border-radius:999px !important; }
.paq-quiero { padding:.95em 1.7em !important; }

/* Franja marfil: esquinas suaves y separada del borde, como una lámina */
.p-index .mf-banner { width:var(--ancho); margin:0 auto 5vh !important; border-radius:var(--radio); }

/* Paralaje (lo mueve main.js con la variable --py) */
.paralaje { will-change:transform; transform:translate3d(0, var(--py, 0px), 0); }
.paquete .ejemplos .vid img { transform:translate3d(0, var(--py, 0px), 0) scale(1.12); transition:filter .4s; }
.paquete .ejemplos .vid:hover img { transform:translate3d(0, var(--py, 0px), 0) scale(1.15); }
@media (prefers-reduced-motion:reduce) { .paralaje, .paquete .ejemplos .vid img { transform:none !important; } }
@media (max-width:760px) { .vp-pantalla { border-radius:var(--radio) var(--radio) 0 0; } .paquete .paq-cab { margin:8px 8px 0; } }

/* Fondo negro de verdad: fuera los tintes cálidos (ocre, blanco hueso) de las fichas; solo queda la luz verde del fondo */
body, html { background:#000 !important; }
.paquete::before, #documental-de-marca::before, #networking-podcast-b2b::before, #amplificacion-de-eventos::before, #ficcion-de-marca::before, #marketing-educativo::before { background:none !important; }
.p-index main section.paquete, .visor-paq { background:rgba(255,255,255,.012) !important; }
.especial { background:#000 !important; }

/* Fondo: NEGRO. Sin capas de luz, sin grano, sin foco que siga al ratón */
html, body { background:#000 !important; }
body::before, body::after { content:none !important; display:none !important; }
.foco { display:none !important; }

/* Foco verde que sigue al ratón y grano de película sobre el negro (el grano en «superposición»: el negro sigue siendo negro) */
.foco { display:block !important; z-index:0; }
body::after { content:"" !important; display:block !important; position:fixed; inset:0; z-index:40; pointer-events:none;
  background:url(assets/film/grano.svg) !important; opacity:.35; mix-blend-mode:overlay; animation:grano .9s steps(6) infinite; }
@media (prefers-reduced-motion:reduce) { body::after { animation:none; } }
.foco { background:radial-gradient(circle, rgba(24,166,134,.14), transparent 60%) !important; }
/* Franja marfil de «NO SOMOS FILMMAKERS»: otra vez de borde a borde, sin esquinas */
.p-index .mf-banner { width:100vw !important; margin:0 calc(50% - 50vw) 5vh !important; border-radius:0 !important; }


/* Franja marfil: los filetes de los bordes, en plata (antes verde y dorado) */
.mf-banner { border-top:2px solid #c9ced6 !important; border-bottom:2px solid #c9ced6 !important;
  box-shadow:inset 0 1px 0 #8f959e, inset 0 -1px 0 #8f959e, inset 0 40px 70px -50px rgba(0,0,0,.4), inset 0 -40px 70px -50px rgba(0,0,0,.3) !important; }
/* Sin tope de ancho: el contenido ocupa toda la pantalla menos el margen lateral */
:root { --ancho:calc(100vw - 2 * var(--margen)); }

/* Reproductor de la carta: miniatura propia de fondo mientras carga Vimeo; el vídeo aparece con un fundido al empezar */
.vp-video { background:#000 center / contain no-repeat; }
.vp-video iframe { opacity:0; transition:opacity .6s ease; }
.vp-video iframe.listo { opacity:1; }
.vp-pantalla .vp-video { position:absolute; inset:0; }
/* Vídeo de un pack al pulsarlo: el reproductor aparece con un fundido sobre su miniatura */
.paquete .ejemplos .vid.reproduciendo iframe { opacity:0; transition:opacity .6s ease; }
.paquete .ejemplos .vid.reproduciendo iframe.listo { opacity:1; }