:root {
    --tipografia-principal: DM Sans, Arial;
}
body { font-family: var(--tipografia-principal); font-size: var(--font-size-default); background: #ffffff; }

/*VIDEO DESTACADO*/
.cabecera { background:url(https://www-storage.13.cl/c13/rec/bg-gris.jpg)#ebebeb;clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);overflow:hidden;}

/*MENU*/
.header-principal{position: relative;}
.header-principal .row {display: grid; align-items: center; grid-template-columns: auto auto;position:relative;padding: 30px var(--padding-viewport);}
.header-principal .row:before {content:""; display:block;background: url(https://www-storage.13.cl/c13/rec/vineta-1.png);position: absolute;top: 0;right: 36px;max-width: 306px;width: 100%;height: 92px;}
.header-principal .row #logo img{height: 55px;    filter: none;width:auto;}
.header-principal nav {     display: flex; width: 100%; justify-content: space-between; align-items: center;}
.header-principal .menu-principal ul {display: flex; list-style: none; padding: 0; margin: 0; gap: 30px;}
.header-principal .menu-principal li a { color:var(--color-2);}
.header-principal .menu-redes  {align-items: center;margin: 0;display: flex; padding: 0; list-style: none; z-index: 8;gap:24px; }
.header-principal .menu-redes a img {filter: brightness(0) invert(1);}
#menu-mobile {display:none; }

.contenedor-video {position: relative;height: 0;width: 100%;padding-top: 56%;}
.contenedor-video:after{content:"";background: url(https://www-storage.13.cl/c13/rec/soporte-16-9.png) no-repeat;display: block;position: absolute;top: 0;height: 100%;left: 0;width: 100%;}
.contenedor-video iframe { position: absolute;top: 5%;left: 5%;width: 90%; height: 90%;z-index: 2; }
.video-destacado { padding: 76px 0px 40px;}
.video-destacado .content { display: grid;grid-template-columns: 60% auto;justify-content: center;justify-items: center;grid-gap: 40px;align-items: center;}
.video-destacado .content .data { max-width: 390px;width: 100%;}
.video-destacado .content h2 { color: var(--color-2);font-size: 1.6rem;}
.video-destacado .content h2:after { content:"";width: 24%;display: block;height: 3px;background: var(--color-2);}
.video-destacado .content .data p {margin-top: 36px;}
 .destacados.comp-desktop-grilla-4 { padding-bottom:80px;clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);position: relative;z-index: 2;}
.destacados.comp-desktop-grilla-4:after { content:"";display:block;    background: url(https://www-storage.13.cl/c13/rec/vineta-2.png) no-repeat;max-width: 647px;width: 100%;height: 140px;position: absolute;bottom: 0;left: 0;}
 .destacados.comp-desktop-grilla-4 .content {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 15px;}
.destacados .card { position: relative;z-index: 2;}
.destacados.comp-desktop-grilla-4 .card .imagen { margin-bottom: 0px; padding-top: 100%;border-radius: 0px;}
.destacados.comp-desktop-grilla-4 .card .imagen:before {content:"";width:100%}
.destacados.comp-desktop-grilla-4 .card .data { position:absolute;bottom: 0px;padding: 120px 22px 22px;background: linear-gradient(to bottom, rgba(47, 56, 66, 0) 0%, rgb(18 28 37) 100%);width: 100%;}
.destacados.comp-desktop-grilla-4 .card .data .titulo { color: #ffffff;font-size: 1.5rem;}
.debut {color: #ffffff;background: #ff4500;font-size: 1.2rem;padding: 3px;width: fit-content;transform: rotate(-8deg);margin-top: 5px;}

/* Cableoperadores */
.view-rec-v2-cableoperadores {padding: 50px 0;background: #ffffff;}
.view-rec-v2-cableoperadores .view-footer {text-align: center; text-transform: uppercase; font-size: 44px; line-height: initial;margin-top: 30px;}
.cableoperadores-item {display: inline-block; position: relative; margin: 0 1%; }
.cableoperadores-item-senal { position: absolute; bottom: -14px; left: 50%; margin-left: -26px; color: #000; width: 55px; text-align: center; padding: 10px 5px; }
.view-rec-v2-cableoperadores .view-content {background: white; text-align: center; margin: auto;padding: 50px 0px; }
.view-rec-v2-cableoperadores .seccion-label { font-family: var(--tipografia-titulos);text-transform: uppercase;font-size: calc(var(--font-size-default) * 1.9);letter-spacing: 1px;text-align: left;display: flex;align-items: center;gap: 15px;line-height: 1em;color: var(--color-2);justify-content: center;}

.btn-programacion a { background: #ff6600; color: white; width: 100%; display: block; padding: 23px; text-align: center; text-transform: uppercase; font-size: 1.5em; border-radius: 10px; box-sizing: border-box; margin: 30px 0; }
.rec-destacadosdehoy .content { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px; }
.rec-destacadosdehoy .content iframe { width: 100%; height: 200px; }
.rec-destacadosdehoy { padding: 40px var(--padding-viewport); }
.comp-desktop-grilla-4 .header { justify-content: center;}
.label { color:var(--color-2);}
.label::before { display:none;}
.rec-originales .label { color: #ff4500; margin: 0px auto 30px; }
.galeria { margin: 40px auto; padding: 0 20px; background: url(https://www-storage.13.cl/c13/rec/bg-azul.jpg)#1b164b; clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%); }
.galeria .header .label { text-align: center; color: #ffffff; width: fit-content; margin: 50px auto; padding-top: 20px; display: block; }
.galeria .header .label:after { content:""; width:50%; margin:auto; display:block; position: relative; height:3px; background:#ffffff; }
.galeria-grid { column-count: 3; column-gap: 20px; width: 100%; }
.galeria-item { break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; }
.galeria-item img { width: 100%; height: auto; /* Permite que respete la proporción original de la foto */ display: block; border-radius: 12px; cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.galeria-item img:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); }
.site-footer { background-image: url('https://www-storage.13.cl/c13/rec/bg-footer.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 70px 20px; display: flex; justify-content: center; align-items: center; text-align: center; clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%); }
.footer-content { color: #ffffff; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-logo     {max-width: 122px; width: 100%; filter: brightness(0) invert(1); }
@media(max-width:676px) { 
.cabecera {clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);}
.header-principal .row {padding:0px; }
.destacados.comp-desktop-grilla-4 {clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%); }
.destacados.comp-desktop-grilla-4 .content {grid-template-columns: 100%; }
.destacados.comp-mobile-grilla-1 .card {grid-template-columns: 100%;padding-bottom: 0px; }
.view-rec-v2-cableoperadores .seccion-label {font-size: calc(var(--font-size-default) * 1.5);gap: 10px;text-align: center; }
.view-rec-v2-cableoperadores .view-content { padding: 10px 0px; }
.video-destacado .content {grid-template-columns: 100%; grid-gap: 30px;}
.video-destacado .content .data {     text-align: center;}
.video-destacado .content h2:after {margin: auto; }
.rec-destacados.comp-desktop-grilla-4 .header { align-items: center;}
.header-principal { position: sticky; top: 0; z-index: 99; padding: 0px; }
.header-principal nav {width: 0; position: fixed; top: 0; right: 0; background: var(--color-2); height: 100vh; flex-direction: column; justify-content: space-around; box-shadow: 0px 0px 10px; transform: translateX(100%); display:flex; }
.header-principal nav.active #menu-mobile{left:initial;right:0;}
.header-principal nav.active{transform: translateX(0);width: 85%;}    
#menu-mobile { z-index: 9;width: 50px; height: 45px; position: absolute; top: 10px;right: 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px; }
#menu-mobile div { width: 100%; height: 15%; background: #ffffff; }
.header-principal .row:before { right: 0; max-width: 120px; background-size: auto 100%; background-repeat: no-repeat; background-position: left top; height: 72px;}
.header-principal nav ul.menu-redes li:not(:last-child) { display:block;}
.header-principal #logo::before { display:none;}
.header-principal .menu-principal {     margin: auto;width: auto; }
.header-principal nav .menu-principal ul {white-space: initial;flex-direction: column;}
.header-principal nav ul.menu-redes { grid-row: initial; margin: auto; }
.header-principal .menu-principal li a { color:#ffffff;}
.header-principal .row #logo img { margin: 18px 0px 16px 20px; height: 40px; filter: none; width: auto; }
.galeria {     padding: 70px 20px;}
.galera .header .label {     padding-bottom: 40px;}
.galeria-grid {column-count: 1;}
.site-footer {padding: 30px 20px;}
.footer-logo {    width: 30%;}
.site-footer p {margin: 0;}
 }