body.elementor-page-22667 #main.site-main{z-index:0;}/* Start custom CSS for html, class: .elementor-element-05a3080 */:root{
      --guinda:#6b1223;
      --vino:#4a0f22;
      --dorado:#ffffff;
      --crema:#faf6f1;
      --negro:#1b1b1b;
      --transicion:all .6s ease-in-out;
      --radio:16px;
      --sombra:0 8px 25px rgba(0,0,0,0.2);
      font-family:'Poppins',sans-serif;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    body{background:var(--crema);color:var(--negro);line-height:1.6;overflow-x:hidden;animation:fadeIn 1.2s ease}
    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

    .header{
      background: url('https://www.atotonilcodetula.gob.mx/wp-content/uploads/2025/10/Adobe-Express-Header-Primer-Informe-de-Gobiero.gif') center/cover no-repeat;
      text-align:center;
      color:var(--crema);
      padding:90px 20px 70px;
      border-bottom:6px solid var(--dorado);
      position:relative;
      overflow:hidden;
    }
    .header::before{
      content:'';
      position:absolute;inset:0;
      background:linear-gradient(180deg,rgba(75,15,34,0.8),rgba(0,0,0,0.6));
      z-index:0;
    }
    .header img{width:170px;position:relative;z-index:1;animation:dropIn 1.3s ease;}
    @keyframes dropIn{from{opacity:0;transform:translateY(-40px);}to{opacity:1;transform:translateY(0);}}

    .header h1{color:var(--dorado);font-size:2.6rem;margin-top:18px;animation:fadeUp 1.2s ease;position:relative;z-index:1;}
    .header p{color:var(--crema);font-size:1.1rem;margin-top:10px;animation:fadeUp 1.5s ease;position:relative;z-index:1;}
    @keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

    .videos-section{background:var(--crema);text-align:center;padding:80px 20px;}
    .videos-section h2{color:var(--guinda);font-size:2.3rem;margin-bottom:40px;position:relative;}
    .videos-section h2::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--dorado);border-radius:3px;}

    .videos-container{
      display:flex;
      justify-content:center;
      align-items:flex-start;
      flex-wrap:wrap;
      gap:30px;
    }

    .video-card{
      flex:1 1 30%;
      max-width:400px;
      background:white;
      border-radius:var(--radio);
      box-shadow:var(--sombra);
      transition:transform .5s ease, box-shadow .5s ease;
      animation:fadeInUp 1s ease both;
      padding:15px;
      position:relative;
      cursor:pointer;
      overflow:hidden;
    }

    .video-card img.thumbnail{
      width:100%;
      height:250px;
      border-radius:var(--radio);
      object-fit:cover;
      filter:brightness(0.85);
      transition:var(--transicion);
    }

    .video-card:hover img.thumbnail{filter:brightness(1);transform:scale(1.05);}

    .play-icon{
      position:absolute;
      top:50%;left:50%;transform:translate(-50%,-50%);
      font-size:60px;
      color:var(--dorado);
      background:rgba(0,0,0,0.5);
      border-radius:50%;
      width:90px;height:90px;
      display:flex;justify-content:center;align-items:center;
      transition:transform .4s ease, background .4s ease;
    }

    .video-card:hover .play-icon{transform:translate(-50%,-50%) scale(1.1);background:rgba(0,0,0,0.7);}

    .caption{
      margin-top:10px;font-size:1.1rem;font-weight:600;color:var(--guinda);
      border-left:4px solid var(--dorado);padding-left:8px;text-align:left;
    }

    /* Modal */
    .modal{
      position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);
      display:flex;justify-content:center;align-items:center;
      visibility:hidden;opacity:0;transition:opacity .5s ease, visibility .5s;
      z-index:100;
    }
    .modal.active{visibility:visible;opacity:1;}

    .modal iframe{
      width:80%;height:70%;border:none;border-radius:var(--radio);
      box-shadow:0 0 40px rgba(0,0,0,0.6);
      animation:zoomIn .6s ease;
    }

    @keyframes zoomIn{from{transform:scale(0.7);opacity:0;}to{transform:scale(1);opacity:1;}}

    @keyframes fadeInUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}/* End custom CSS */