body {
      font-family: Verdana, sans-serif;
    }
    h1, h3, a, .title {
      font-family: Verdana, sans-serif;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    h2 {
      font-family: Verdana, sans-serif;
      font-weight: 600;
      letter-spacing: 0.5px;
      color:#C43030;
    }

    body { font-family: Verdana, sans-serif; background: #fff; color: #000; margin:0; }

    /* Navbar */
    .navbar { background:#fff; border-bottom:1px solid #ddd; }
    .navbar-brand { color:#C43030; font-weight:bold; }
    .navbar-nav .nav-link { font-weight:bold; color:#000; }
    .navbar-nav .nav-link:hover { color:#C43030; }

    /* Hero */
    .hero { position:relative; height:95vh; overflow:hidden; }
    .hero video { width:100%; height:100%; object-fit:cover; }
    .hero-text {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      text-align:center; color:#fff;
      text-shadow:0 2px 6px rgba(0,0,0,0.7);
    }
    .hero-text h1 { font-size:3rem; }
    .hero-text p { font-size:1.2rem; }

    /* Section */
    .section { padding: 3rem 8rem; text-align:center; }
    @media (max-width: 768px) {
    .section {
      padding: 4rem 2rem;
    }
  }
    .section-title {
      font-size:2rem; font-weight:bold;
      margin-bottom:2rem;
      border-bottom:3px solid #C43030;
      display:inline-block; padding-bottom:.5rem;
    }

    /* Video thumbnails - UPDATED */
    .video-thumb { 
      cursor:pointer; 
      border-radius:8px; 
      overflow:hidden; 
      position: relative;
      height: 250px;
      background: #000;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .video-thumb:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(196, 48, 48, 0.3);
    }
    
    .video-thumb img { 
      width:100%; 
      height:100%; 
      object-fit:cover; 
      display:block; 
    }
    
    .video-thumb .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: rgba(196, 48, 48, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      transition: all 0.3s ease;
    }
    
    .video-thumb:hover .play-button {
      background: rgba(196, 48, 48, 1);
      transform: translate(-50%, -50%) scale(1.1);
    }
    
    .video-thumb .play-button::before {
      content: '▶';
      margin-left: 3px;
    }

    /* Projects */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
      overflow: visible;
    }

    .project-card {
      display: block;
      background: #f5f5f5;
      border-radius: 10px;
      overflow: visible;
      text-decoration: none;
      color: #000;
      transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms;
      will-change: transform, box-shadow;
      transform-origin: center center;
      position: relative;
    }

    .project-card img {
      display: block;
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    .project-card h3 {
      padding: 1rem;
      margin: 0;
      color: #C43030;
      font-size: large;
    }

    .project-card p {
      padding: 1rem;
      margin: 2;
      font-weight: lighter;
    }

    .project-card:hover,
    .project-card:focus {
      transform: scale(1.08);
      box-shadow: 0 14px 30px rgba(0,0,0,0.15);
      z-index: 10;
    }

    .project-card:active {
      transform: scale(1.03);
    }

    @media (max-width: 480px) {
      .project-card:hover { transform: scale(1.03); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
    }

    /* Contact */
    .contact-form { max-width:600px; margin:auto; display:flex; flex-direction:column; gap:1rem; }
    .contact-form input, .contact-form textarea { padding:1rem; border:1px solid #ccc; border-radius:5px; }
    .contact-form button { background:#C43030; color:#fff; border:none; padding:1rem; font-weight:bold; cursor:pointer; }
    .contact-form button:hover { background:#000; }

    /* Footer */
    .footer { background:#000; color:#fff; text-align:center; padding:1rem; margin-top:2rem; }

    /* Popup - UPDATED */
    .popup { 
      display:none; 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      background:rgba(0,0,0,0.9); 
      justify-content:center; 
      align-items:center; 
      z-index:2000; 
      padding:1rem;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .popup.show { 
      display:flex; 
      opacity: 1;
    }
    
    .popup-content { 
      position:relative; 
      width:100%; 
      max-width:1000px;
      animation: popupSlideIn 0.3s ease-out;
    }
    
    @keyframes popupSlideIn {
      from {
        transform: scale(0.8);
        opacity: 0;
      }
      to {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    .popup-content iframe { 
      width:100%; 
      height:70vh; 
      border-radius: 8px;
    }
    
    .popup .close {
      position:absolute; 
      top:-50px; 
      right:0;
      font-size:2.5rem; 
      color:#fff;
      background:rgba(196, 48, 48, 0.8);
      border:none; 
      cursor:pointer;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    
    .popup .close:hover {
      background: rgba(196, 48, 48, 1);
      transform: scale(1.1);
    }

    .btn-ver-mas {
      display: inline-block;
      background-color: #C43030;
      color: #fff;
      font-weight:bold;
      padding: 0.85rem 1.5rem;
      border-radius: 9999px;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
      border: 3px solid transparent;
    }

    .btn-ver-mas:hover {
      background-color: #fff;
      color: #C43030;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.15);
      border-color: #C43030;
      border-radius: 9999px;
    }

    /* Ajustar flechas del carousel */
    .carousel-control-prev,
    .carousel-control-next {
      width: 5%;
      top: -10%;
      transform: translateY(5%); 
      z-index: 2;
    }

    .carousel-control-prev {
      left: -4px;
    }

    .carousel-control-next {
      right: -4px;
    }