:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#030918;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}.top{background:linear-gradient(180deg,#020b1e,#03112b);display:flex;align-items:center;justify-content:space-between;padding:5px 3.5% 7px;gap:22px;border-bottom:5px solid #028af0;position:sticky;top:0;z-index:10;box-shadow:0 5px 15px #001029}.brand{display:flex;flex-direction:column;align-items:center;flex:0 0 285px}.brand img{width:280px;max-width:100%;height:92px;object-fit:contain}.brand span{font-size:11px;font-weight:900;letter-spacing:1.4px;margin-top:-6px}.top nav{display:flex;align-items:center;justify-content:space-between;gap:4px;flex:1}.top nav a{font-size:clamp(12px,1vw,16px);font-weight:800;padding:14px 11px;white-space:nowrap;border-radius:10px}.top nav a:hover,.top nav a.selected{background:#0765e8}.menu-btn{display:none}.hero{background:linear-gradient(90deg,#03112a88,#00122c42),url('assets/fondo.png') center/cover;min-height:425px;padding:24px 5% 28px;display:grid;grid-template-columns:0.94fr 1.06fr;align-items:center;gap:30px}.hero-text{text-align:center}.hero h1{font-size:clamp(45px,5.2vw,85px);font-style:italic;letter-spacing:-2px;line-height:1.05;margin:0 0 15px;text-shadow:0 4px 3px #030915,0 8px 15px #000}.hero h1 span,.screen-name em{font-style:italic;background:linear-gradient(#ff3843,#ba000d);border:2px solid #ff4d55;border-radius:10px;padding:0 10px;box-shadow:0 4px 0 #74000b}.hero h2{font-size:clamp(14px,1.5vw,22px);letter-spacing:2px;margin:10px 0 25px}.lead{font-size:clamp(16px,1.6vw,23px);line-height:1.35;text-align:left;border-left:6px solid #ed1a30;padding-left:17px;max-width:575px;margin:0 auto 20px}.outline-button{display:inline-block;border:2px solid white;border-radius:10px;padding:12px 35px;font-size:21px;font-weight:800;background:#041b3b9c;transition:.2s}.outline-button:hover{background:#0764df}.tv-panel{border:3px solid #e0f3ff;border-radius:16px;box-shadow:0 0 22px #057dff8a;aspect-ratio:16/9;position:relative;background:linear-gradient(145deg,#010818,#09295a 58%,#010916);overflow:hidden}.tv-panel:before{content:'';position:absolute;inset:22% -20% 4%;border-bottom:24px solid #0752b7;border-radius:50%;transform:rotate(-12deg);opacity:.6;pointer-events:none}.live-tag{position:absolute;top:17px;left:18px;background:#e0001d;border-radius:8px;padding:10px 13px;font-weight:900;z-index:2;font-size:clamp(11px,1.2vw,18px)}.player-placeholder{height:calc(100% - 44px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;position:relative;z-index:1}.screen-name{font-size:clamp(23px,3.6vw,54px);font-weight:900;font-style:italic;white-space:nowrap;text-shadow:0 4px 6px #000}.screen-name em{padding:0 7px}.play-mark{font-size:38px;border:4px solid #fff;border-radius:12px;padding:3px 22px;margin-top:20px}.player-placeholder p{font-size:clamp(12px,1.3vw,19px);margin:14px 0 6px}.player-placeholder small{color:#c4d8f4}.mock-controls{height:44px;position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:0 16px;background:linear-gradient(#000a,#01040c);z-index:1;font-size:15px}.mock-track{height:6px;background:#8e9eb3;border-radius:20px;flex:1}.tv-panel iframe,.tv-panel video{width:100%;height:100%;border:0;display:block;position:relative;z-index:2}.features{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(180deg,#071831,#020b1d);padding:17px 4%;gap:0;border-top:1px solid #0877d4;border-bottom:2px solid #d3e8ff}.features>div{display:flex;align-items:center;justify-content:center;gap:15px;border-right:1px solid #3b5777;padding:3px 12px}.features>div:last-child{border:0}.feature-icon{font-size:46px;font-weight:900}.red{color:#ff2639}.purple{color:#c036f5}.cyan{color:#00d5f7}.yellow{color:#ffcf26}.features strong,.features small{display:block}.features strong{font-size:clamp(14px,1.35vw,20px)}.features small{font-size:clamp(11px,1vw,15px);color:#d4e0f0;margin-top:3px}.services{background:#f1f6ff;color:#091731;display:grid;grid-template-columns:29% 33% 38%;gap:0;align-items:center;min-height:275px}.service-photo{height:100%;min-height:275px;background:url('assets/camera.png') center/cover;border-right:4px solid #398aff}.section-heading{padding:25px 8%}.eyebrow{color:#d80017;font-weight:900;letter-spacing:1px;font-size:22px;margin:0 0 12px}.services h2{font-size:clamp(25px,2.5vw,40px);margin:0 0 16px;line-height:1.12}.services p{font-size:clamp(14px,1.2vw,18px);line-height:1.4;margin:0}.service-list{border-left:1px solid #b7cbe5;padding:10px 9%}.service-list>div{display:flex;align-items:center;gap:18px;padding:8px 0;border-bottom:1px solid #c6d7ec}.service-list>div:last-child{border:0}.service-list span{font-size:32px;color:#123b81;width:43px;text-align:center;flex-shrink:0}.service-list b{font-size:clamp(15px,1.25vw,19px)}.service-list p{font-size:clamp(12px,1vw,15px)}.portfolio{padding:50px 4% 55px;background:linear-gradient(#031127d9,#020919ee),url('assets/fondo.png') center/cover;text-align:center}.portfolio-title{display:flex;justify-content:center;align-items:center;gap:20px}.portfolio-title span{font-size:35px;color:#fff}.portfolio h2{font-size:clamp(30px,4vw,55px);font-style:italic;text-shadow:0 4px #5d0008;margin:0;border-bottom:4px solid #f12c46;padding:0 20px 8px}.portfolio>p{font-size:18px}.portfolio h3{margin:32px 0 14px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:15px 0 32px}.placeholder-card{aspect-ratio:16/9;border:3px solid #16a8ff;border-radius:13px;box-shadow:0 0 16px #0078ff8c;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#0a2349,#02091c);font-size:48px;overflow:hidden}.placeholder-card span{font-size:18px;margin-top:12px}.placeholder-card small{font-size:12px;color:#b8d1e9;display:block;margin-top:6px}.gallery iframe{width:100%;aspect-ratio:16/9;border:3px solid #16a8ff;border-radius:13px}.flyers{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.flyers>div{aspect-ratio:4/3;border:2px solid #12aaff;border-radius:12px;background:#0c244b;display:grid;place-items:center;overflow:hidden}.flyers img{width:100%;height:100%;object-fit:contain;border-radius:10px}.cta{text-align:center;padding:30px 5%;background:linear-gradient(90deg,#061634,#0b3674,#06132d)}.cta h2{font-size:clamp(24px,3vw,38px);font-style:italic;margin:10px 0 20px}.button{display:inline-block;border:2px solid white;border-radius:12px;padding:15px 27px;font-weight:900}.green{background:#087a35;border-color:#2fff7b;box-shadow:0 0 15px #13ee6b77}.green:hover{background:#0b9a4b}.contact{text-align:center;padding:35px 5%;background:#030b1b}.contact-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.contact-buttons a{border:2px solid #26e46b;border-radius:9px;padding:15px 20px;font-weight:800}footer{text-align:center;padding:22px;background:#010511;color:#afc3e2}@media(max-width:1150px){.top{flex-wrap:wrap;justify-content:center}.brand{flex-basis:230px}.brand img{width:225px;height:75px}.top nav{flex:1;justify-content:center}.hero{padding:35px 4%}.services{grid-template-columns:30% 34% 36%}}@media(max-width:850px){.top{justify-content:space-between}.menu-btn{display:block;background:#0767dd;color:white;border:0;padding:12px;border-radius:7px}.top nav{display:none;width:100%;flex-direction:column;align-items:stretch;flex-basis:100%}.top nav.open{display:flex}.hero{grid-template-columns:1fr;gap:28px}.hero-text{max-width:680px;margin:auto}.tv-panel{width:100%;max-width:720px;margin:auto}.features{grid-template-columns:repeat(2,1fr);row-gap:15px}.features>div:nth-child(2){border:0}.services{grid-template-columns:1fr 1fr}.service-photo{display:none}.gallery{gap:10px}.flyers{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.top{padding:4px 5%}.brand{flex-basis:190px}.brand img{width:185px;height:60px}.brand span{font-size:8px}.hero{padding:30px 5%}.hero h1{font-size:clamp(39px,10vw,58px)}.hero h2{font-size:14px}.lead{font-size:16px}.tv-panel{min-height:210px}.player-placeholder{padding:10px}.screen-name{font-size:clamp(20px,6vw,35px)}.play-mark{font-size:20px;padding:2px 13px;margin-top:12px}.player-placeholder p{font-size:12px}.player-placeholder small{font-size:10px}.live-tag{font-size:10px;padding:7px}.features{gap:10px;padding:15px 2%}.features>div{padding:3px;gap:7px}.feature-icon{font-size:28px}.features strong{font-size:13px}.features small{font-size:11px}.services{grid-template-columns:1fr}.section-heading{padding:25px 7% 10px}.service-list{border:0;padding:8px 7% 25px}.gallery{grid-template-columns:1fr}.flyers{grid-template-columns:repeat(2,1fr)}.portfolio>p{font-size:15px}}

/* Refinamiento visual: portada más compacta y proporciones de la referencia */
.top{padding:5px 3.2% 6px;gap:15px;border-bottom:4px solid #0096fa;background:linear-gradient(180deg,#020b1c,#03132e)}
.brand{flex:0 0 280px}.brand img{height:82px;width:260px}.brand span{font-size:10px;letter-spacing:1.3px;margin-top:-4px}
.top nav{gap:2px}.top nav a{font-size:clamp(12px,.95vw,16px);padding:12px 9px;border-radius:9px}
.hero{min-height:390px;padding:23px 4.5% 24px;grid-template-columns:.96fr 1.04fr;gap:28px;background:linear-gradient(90deg,#03122c45,#00132a30),url('assets/fondo.png') center/cover}
.hero h1{font-size:clamp(42px,4.4vw,72px);letter-spacing:-2.5px;margin-bottom:15px}.hero h1 span{font-style:italic;display:inline-block;transform:skew(-5deg);padding:0 8px}
.hero h2{font-size:clamp(13px,1.24vw,19px);letter-spacing:2px;margin:10px 0 22px}
.lead{font-size:clamp(16px,1.32vw,21px);max-width:520px;margin-bottom:19px;line-height:1.42}
.outline-button{font-size:18px;padding:11px 32px}.tv-panel{border-width:3px;box-shadow:0 0 0 1px #0d63a8,0 0 24px #007bff65;background:radial-gradient(ellipse at 70% 55%,#0c3168 0%,#051632 57%,#020a1b 100%)}
.tv-panel:before{border-bottom-width:18px}.player-placeholder{height:100%;padding:24px 24px 10px}.screen-name{font-size:clamp(23px,3.2vw,48px)}.play-mark{font-size:31px;margin-top:18px;padding:5px 19px}.player-placeholder p{font-size:clamp(12px,1.12vw,17px)}
.live-tag{font-size:clamp(11px,1vw,15px);padding:9px 12px}.features{padding:13px 4%}.feature-icon{font-size:39px}.features>div{gap:12px}.services{min-height:255px;grid-template-columns:28% 34% 38%}.service-photo{min-height:255px}.section-heading{padding:20px 7%}.eyebrow{font-size:19px}.services h2{font-size:clamp(24px,2.2vw,35px)}.service-list{padding:8px 7%}.service-list>div{padding:6px 0}
.portfolio{padding:38px 4% 45px}.gallery{gap:16px}.flyers{gap:12px}.placeholder-card,.gallery iframe{box-shadow:0 0 13px #008cff8c}
@media(max-width:1150px){.top{flex-wrap:wrap;justify-content:center}.brand{flex-basis:230px}.brand img{width:225px;height:72px}.hero{padding:28px 4%}.services{grid-template-columns:30% 34% 36%}}
@media(max-width:850px){.top{justify-content:space-between}.hero{grid-template-columns:1fr;gap:26px}.hero-text{max-width:680px}.services{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.brand{flex-basis:190px}.brand img{width:185px;height:60px}.hero{padding:27px 5%}.hero h1{font-size:clamp(37px,9.5vw,57px)}.hero h2{font-size:13px}.lead{font-size:16px}.tv-panel{min-height:210px}.player-placeholder{padding:10px}.screen-name{font-size:clamp(19px,5.8vw,34px)}.services{grid-template-columns:1fr}}

/* Reproductores de comerciales: mayor tamaño y proporción HD 16:9 */
.portfolio .gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  gap: 24px;
}
.portfolio .gallery iframe,
.portfolio .gallery .placeholder-card {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 3px solid #16a8ff;
  border-radius: 13px;
  box-shadow: 0 0 16px #0078ff8c;
  overflow: hidden;
  background: #020919;
}
@media (max-width: 850px) {
  .portfolio .gallery {grid-template-columns: 1fr;max-width: 760px;}
}

/* Cuarta casilla: mantener el contenido centrado */
.portfolio .gallery .placeholder-card{display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* Videos verticales 9:16, debajo de los cuatro comerciales horizontales */
.vertical-videos-section{margin:42px auto 36px;max-width:1050px;text-align:center}
.vertical-videos-section h3{margin-bottom:10px}
.vertical-videos-section>p{margin:0 auto 22px;opacity:.8}
.vertical-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:720px;margin:0 auto;align-items:start}
.vertical-video-grid iframe,.vertical-video-grid .vertical-video-placeholder{width:100%;aspect-ratio:9/16;height:auto;min-height:0;border:3px solid #16a8ff;border-radius:16px;box-shadow:0 0 18px #0078ff88;background:#020919;overflow:hidden;display:block}
.vertical-video-grid .vertical-video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;padding:12px;text-align:center}
.vertical-video-placeholder .vertical-play{font-size:42px;color:#22adff}
.vertical-video-placeholder small{opacity:.75}
@media(max-width:540px){.vertical-video-grid{gap:12px}.vertical-video-grid iframe,.vertical-video-grid .vertical-video-placeholder{border-width:2px;border-radius:10px}.vertical-video-placeholder .vertical-play{font-size:30px}}

/* Ajuste final: cada reproductor vertical ocupa un lienzo 9:16 real,
   sin estirarse a todo el ancho de la sección. */
.portfolio .vertical-videos-section .vertical-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 270px));
  justify-content: center;
  align-items: start;
  gap: 24px;
  max-width: 600px;
  margin-inline: auto;
}
.portfolio .vertical-video-grid iframe,
.portfolio .vertical-video-grid .vertical-video-placeholder {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  min-width: 0;
  min-height: 0;
  max-width: 270px;
  border: 3px solid #16a8ff;
  border-radius: 14px;
  background: #020919;
  box-shadow: 0 0 18px #0078ff88;
}
.portfolio .vertical-video-grid .vertical-video-placeholder {
  display: flex;
}
@media (max-width: 620px) {
  .portfolio .vertical-videos-section .vertical-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    gap: 12px;
  }
  .portfolio .vertical-video-grid iframe,
  .portfolio .vertical-video-grid .vertical-video-placeholder {
    border-width: 2px;
    border-radius: 10px;
  }
}

/* Corrección: reproductores verticales más anchos, sin comprimirlos */
.portfolio .vertical-videos-section{max-width:1000px;width:100%;margin-inline:auto}
.portfolio .vertical-videos-section .vertical-video-grid{
  width:100%;max-width:900px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,420px));
  gap:28px;
  justify-content:center;
  align-items:start;
  margin-inline:auto;
}
.portfolio .vertical-video-grid iframe,
.portfolio .vertical-video-grid .vertical-video-placeholder{
  width:100%;max-width:none;
  aspect-ratio:9/16;
  height:auto;
  min-height:0;
  border:3px solid #16a8ff;
  border-radius:14px;
  box-sizing:border-box;
  display:block;
}
@media(max-width:700px){
 .portfolio .vertical-videos-section .vertical-video-grid{
   grid-template-columns:minmax(0,420px);
   max-width:420px;
   gap:26px;
   padding:0 8px;
 }
 .portfolio .vertical-video-grid iframe,
 .portfolio .vertical-video-grid .vertical-video-placeholder{
   max-width:100%;
   border-width:2px;
 }
}

/* Galería de cinco flyers: tres cuadrados y dos verticales.
   Respetar la proporción original, sin recortar ni estirar. */
.portfolio .flyers{
 display:grid;
 grid-template-columns:repeat(6,minmax(0,1fr));
 align-items:start;
 justify-items:center;
 gap:22px;
 max-width:1150px;
 margin:22px auto 0;
}
.portfolio .flyers>.flyer-card{
 display:block;
 width:100%;
 height:auto;
 aspect-ratio:auto;
 min-width:0;
 overflow:hidden;
 border:2px solid #12aaff;
 border-radius:12px;
 background:#06152d;
 box-shadow:0 0 14px #008cff65;
}
.portfolio .flyers>.flyer-card.square{grid-column:span 2}
.portfolio .flyers>.flyer-card.portrait{grid-column:span 3;max-width:380px}
.portfolio .flyers>.flyer-card img{
 display:block;
 width:100%;
 height:auto;
 max-height:none;
 object-fit:contain;
 border-radius:0;
}
@media(max-width:700px){
 .portfolio .flyers{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .portfolio .flyers>.flyer-card.square,
 .portfolio .flyers>.flyer-card.portrait{grid-column:span 1;max-width:none}
 .portfolio .flyers>.flyer-card.square:nth-child(3){grid-column:1/-1;max-width:calc(50% - 6px);justify-self:center}
}