/* Estilos generales */
:root {
  --primary-color: #1a3b6e;
  --secondary-color: #e63946;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --gray-color: #6c757d;
  --border-radius: 5px;
  --transition-slow: 0.5s ease;
  --transition-medium: 0.3s ease;
  --transition-fast: 0.2s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: var(--dark-color);
  background-color: #fff;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

p {
  margin-bottom: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--secondary-color);
}

/* Navbar */
.navbar {
  background-color: transparent;
  box-shadow: none;
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background-color: #31456b;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  max-width: 1400px;
}

.logo img {
  height: 70px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.logo img:hover {
  transform: scale(1.05);
}

.navbar.scrolled .logo img {
  filter: none;
}

nav ul {
  display: flex;
  gap: 2.5rem;
}

nav ul li a {
  font-weight: 600;
  padding: 0.5rem;
  position: relative;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.navbar.scrolled nav ul li a {
  text-shadow: none;
}

nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--secondary-color);
  transition: width var(--transition-medium);
}

nav ul li a:hover {
  color: var(--secondary-color);
  text-shadow: none;
}

nav ul li a:hover::after {
  width: 100%;
}

/* Hero Section */
.hero {
  color: #fff;
  padding: 12rem 0 10rem;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;
}



.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.6) 0%, 
    rgba(0, 0, 0, 0.4) 10%, 
    rgba(0, 0, 0, 0.3) 30%, 
    rgba(0, 0, 0, 0.3) 70%, 
    rgba(0, 0, 0, 0.4) 90%, 
    rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  text-align: left;
  padding: 0 2rem;
}

.hero h1 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: #fff;
  max-width: 70%;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 2.5rem;
  max-width: 70%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1.6;
  font-weight: 400;
}

/* Decade of Protection Section */
.decade-protection {
  background: linear-gradient(135deg, #1a365d 0%, #2d3748 25%, #1a202c 50%, #2b6cb0 75%, #3182ce 100%);
  color: #fff;
  padding: 8rem 0;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.decade-protection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.decade-protection .container {
  max-width: 1400px;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.decade-protection h2 {
  color: #fff;
  margin-bottom: 2rem;
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.decade-protection p {
  max-width: 75%;
  margin: 0 0 4rem 0;
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  padding: 2rem 0;
}

/* Tarjetas de características */
.feature-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 
              0 8px 16px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  /* Animaciones de entrada */
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.feature-card:nth-child(1).visible {
  transition-delay: 0.1s;
}

.feature-card:nth-child(2).visible {
  transition-delay: 0.2s;
}

.feature-card:nth-child(3).visible {
  transition-delay: 0.3s;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.feature-card:hover::before {
  left: 100%;
}

.feature-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 
              0 12px 24px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.feature-card .icon {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 
              0 5px 15px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.feature-card .icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.3), transparent);
  animation: rotate 3s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover .icon::before {
  opacity: 1;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.feature-card i {
  font-size: 3rem;
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
  background: -webkit-linear-gradient(45deg, var(--secondary-color), #ff7e33);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-card .icon img {
  width: 45px;
  height: 45px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  position: relative;
  z-index: 2;
}

.feature-card:hover .icon {
  transform: scale(1.1) rotateY(10deg);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 
              0 10px 20px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.feature-card:hover .icon img {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.feature-card h3 {
  color: #fff;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.feature-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  line-height: 1.7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin: 0;
}

.feature-card .counter {
  font-weight: 800;
  font-size: 1.3rem;
  color: #60a5fa;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Innovation Section */
.innovation {
  padding: 6rem 0;
  background-color: #f8f9fa;
  background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.innovation .container {
  max-width: 1400px;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.innovation-content {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.innovation-content.visible {
  opacity: 1;
  transform: translateX(0);
}

.innovation-content h2 {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  color: var(--primary-color);
}

.innovation-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--gray-color);
}

.innovation-content ul {
  margin: 2rem 0;
  padding: 0;
}

.innovation-content ul li {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 2rem;
  font-size: 1.1rem;
  color: var(--dark-color);
  list-style: none;
}

.innovation-content ul li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--secondary-color);
  font-weight: bold;
  font-size: 1.2rem;
}

.innovation-media {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.innovation-media.visible {
  opacity: 1;
  transform: translateX(0);
}

.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.video-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-medium);
  background: #000;
}

.video-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(49, 69, 107, 0.8), rgba(255, 126, 51, 0.6));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: all var(--transition-medium);
  backdrop-filter: blur(2px);
}

.video-overlay:hover {
  background: linear-gradient(135deg, rgba(49, 69, 107, 0.6), rgba(255, 126, 51, 0.4));
  backdrop-filter: blur(1px);
}

.play-button {
  margin-bottom: 1rem;
  transition: transform var(--transition-medium);
}

.play-button:hover {
  transform: scale(1.1);
}

.video-info {
  text-align: center;
  color: white;
}

.video-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.video-info p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.video-wrapper.playing .video-overlay {
  opacity: 0;
  pointer-events: none;
}

.video-wrapper.playing video {
  z-index: 3;
}

.video-wrapper video::-webkit-media-controls-current-time-display,
.video-wrapper video::-webkit-media-controls-time-remaining-display {
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.images-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.innovation-media .images img {
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-medium);
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 2px solid #fff;
}

.images-grid img {
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-medium);
  width: 100%;
  height: 200px;
  object-fit: cover;
  border: 2px solid #fff;
}

.innovation-media .images img:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--secondary-color);
}

@media (max-width: 768px) {
  .innovation .container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .images-grid {
    grid-template-columns: 1fr;
  }
  
  .innovation-content h2 {
    font-size: 2rem;
  }
}

/* Brands and Clients Sections */
.brands {
  padding: 4rem 0;
  text-align: left;
  overflow: hidden;
}

.brands .container {
  max-width: 1400px;
  padding: 0 2rem;
}

.clients {
  padding: 4rem 0;
  text-align: left;
  overflow: hidden;
}

.clients .container {
  max-width: 1400px;
  padding: 0 2rem;
}

.brands h2, .clients h2 {
  margin-bottom: 3rem;
  position: relative;
  display: inline-block;
}

.brands h2::after, .clients h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 80px;
  height: 3px;
  background-color: var(--secondary-color);
}

/* Estilos para el carrusel */
.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  margin-top: 3rem;
}

.carousel-container::before,
.carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.carousel-container::before {
  left: 0;
  background: linear-gradient(to right, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.8) 30%, 
    rgba(255, 255, 255, 0) 100%);
}

.carousel-container::after {
  right: 0;
  background: linear-gradient(to left, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.8) 30%, 
    rgba(255, 255, 255, 0) 100%);
}

.carousel-container.visible {
  opacity: 1;
  transform: translateY(0);
}

.brands-carousel, .clients-carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  animation: scroll 30s linear infinite;
  width: max-content;
  gap: 3rem;
  margin-top: 2rem;
  align-items: center;
  min-height: 110px;
}

.carousel-slide img {
  height: 90px;
  max-width: 200px;
  object-fit: contain;
  margin: 0 2rem;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--transition-medium), opacity var(--transition-medium), transform var(--transition-medium);
}

.carousel-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

.carousel-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

/* Mantener los estilos originales para compatibilidad */
.brands-grid, .clients-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.brands-grid.visible, .clients-grid.visible {
  opacity: 1;
  transform: translateY(0);
}

.brands-grid img, .clients-grid img {
  height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter var(--transition-medium), opacity var(--transition-medium), transform var(--transition-medium);
}

.brands-grid img:hover, .clients-grid img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* Services Section */
.services {
  padding: 5rem 0;
  background-color: var(--primary-color);
  color: #fff;
}

.services .container {
  max-width: 1400px;
  padding: 0 2rem;
}

.services h2 {
  color: #fff;
  text-align: center;
  margin-bottom: 3rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 2.5rem;
  transition: all var(--transition-medium);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.service-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
}

.service-card:hover::before {
  left: 100%;
}

.service-card h3 {
  color: #fff;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff, #e6394a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.service-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-card ul li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
  transition: all 0.3s ease;
}

.service-card ul li::before {
  content: '▶';
  position: absolute;
  left: 0;
  color: var(--secondary-color);
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

.service-card:hover ul li::before {
  transform: translateX(3px);
  color: #fff;
}

.service-card ul li:hover {
  color: #fff;
  transform: translateX(5px);
}

/* Team Section */
.team {
  padding: 6rem 0;
  background-color: #f8f9fa;
  background-image: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.team .container {
  max-width: 1400px;
  padding: 0 2rem;
  text-align: center;
}

.team h2 {
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  color: var(--primary-color);
}

.team-description {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--gray-color);
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-bottom: 5rem;
}

.team-member {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-medium);
  border: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow), box-shadow var(--transition-medium);
}

.team-member.visible {
  opacity: 1;
  transform: translateY(0);
}

.team-member:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.member-image {
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1.5rem;
  border: 4px solid var(--secondary-color);
}

.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-medium);
}

.team-member:hover .member-image img {
  transform: scale(1.1);
}

.member-info h3 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.member-role {
  color: var(--gray-color);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.certification-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.certification-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.certification-content {
  text-align: left;
}

.certification-content h3 {
  color: var(--primary-color);
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.certification-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-color);
  margin: 0;
}

.certification-content strong {
  color: var(--secondary-color);
  font-weight: 700;
}

.certification-image {
  text-align: center;
}

.certification-image img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  border: 2px solid #fff;
}

.certification-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

/* Responsividad para la sección decade-protection */
@media (max-width: 1024px) {
  .decade-protection {
    padding: 6rem 0;
  }
  
  .decade-protection h2 {
    font-size: 2.5rem;
  }
  
  .features {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .decade-protection {
    padding: 4rem 0;
  }
  
  .decade-protection h2 {
    font-size: 2rem;
    text-align: center;
  }
  
  .decade-protection p {
    max-width: 100%;
    text-align: center;
    margin: 0 0 3rem 0;
  }
  
  .features {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1rem 0;
  }
  
  .feature-card {
    padding: 2.5rem 2rem;
    text-align: center;
  }
  
  .feature-card .icon {
    width: 80px;
    height: 80px;
  }
  
  .feature-card .icon img {
    width: 40px;
    height: 40px;
  }
  
  .feature-card h3 {
    font-size: 1.6rem;
  }
  
  .feature-card p {
    font-size: 1rem;
  }
  
  .team-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .certification-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .certification-content {
    text-align: center;
  }
  
  .team h2 {
    font-size: 2rem;
  }
  
  .team-description {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .decade-protection {
    padding: 3rem 0;
  }
  
  .decade-protection .container {
    padding: 0 1rem;
  }
  
  .decade-protection h2 {
    font-size: 1.8rem;
  }
  
  .features {
    gap: 1.5rem;
  }
  
  .feature-card {
    padding: 2rem 1.5rem;
  }
  
  .feature-card .icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
  }
  
  .feature-card .icon img {
    width: 35px;
    height: 35px;
  }
  
  .feature-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  
  .feature-card p {
    font-size: 0.95rem;
  }
}

/* Imágenes clickeables */
.clickable-image {
  cursor: pointer;
  transition: all var(--transition-medium);
  position: relative;
}

.clickable-image:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(1.1);
}

.clickable-image::after {
  content: '🔍';
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 8px;
  border-radius: 50%;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity var(--transition-medium);
}

.clickable-image:hover::after {
  opacity: 1;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  position: relative;
  margin: auto;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
  transition: color var(--transition-fast);
}

.close:hover {
  color: var(--secondary-color);
}

.modal-caption {
  color: #fff;
  text-align: center;
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 500;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    padding: 10px;
  }
  
  .close {
    top: 10px;
    right: 20px;
    font-size: 30px;
  }
  
  .modal-caption {
    font-size: 1rem;
  }
  
  /* Estilos responsivos para video */
  .video-container {
    margin-bottom: 1.5rem;
    border-radius: 15px;
  }
  
  .video-header {
    padding: 1rem 1.5rem;
  }
  
  .video-header h3 {
    font-size: 1.2rem;
  }
  
  .video-header p {
    font-size: 0.9rem;
  }
  
  .video-container:hover {
    transform: translateY(-4px);
  }
}

/* Contact Section */
.contact {
  padding: 6rem 0;
  background-color: #f9f9f9;
  background-image: linear-gradient(to bottom, #f9f9f9, #f0f0f0);
  text-align: left;
}

.contact .container {
  max-width: 1400px;
  padding: 0 2rem;
}

.contact h2 {
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.contact h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--secondary-color);
  border-radius: 2px;
}

.contact p {
  margin-bottom: 2rem;
}

.contact-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.contact-buttons.visible {
  opacity: 1;
  transform: translateY(0);
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), background-color var(--transition-medium);
  position: relative;
  overflow: hidden;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.btn-primary {
  background-color: var(--secondary-color);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #ff7e33;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

.btn-email {
  background-color: #D44638;
  color: #fff;
  box-shadow: 0 4px 15px rgba(212, 70, 56, 0.4);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-email:hover {
  background-color: #c73c2e;
  box-shadow: 0 6px 20px rgba(212, 70, 56, 0.5);
  transform: translateY(-3px);
}

.btn-instagram {
  background-color: #C13584;
  color: #fff;
  box-shadow: 0 4px 15px rgba(193, 53, 132, 0.4);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-instagram:hover {
  background-color: #b12f78;
  box-shadow: 0 6px 20px rgba(193, 53, 132, 0.5);
  transform: translateY(-3px);
}

.btn-whatsapp {
  background-color: #25D366;
  color: #fff;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #20c35e;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  transform: translateY(-3px);
}

.btn-linkedin {
  background-color: #0077B5;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 119, 181, 0.4);
  transform: translateY(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.btn-linkedin:hover {
  background-color: #006399;
  box-shadow: 0 6px 20px rgba(0, 119, 181, 0.5);
  transform: translateY(-3px);
}

/* Iconos para botones y footer */
[class^="icon-"] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-whatsapp {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>');
}

.icon-email {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>');
}

.icon-instagram {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>');
}

.icon-linkedin {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>');
}

.icon-phone {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>');
}

.icon-web {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>');
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  color: #fff;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.btn:focus:not(:active)::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  20% {
    transform: scale(25, 25);
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

/* Footer */
footer {
  background-color: #1a2942;
  background-image: linear-gradient(to bottom, #1a2942, #141e30);
  color: #fff;
  padding: 4rem 0 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

footer a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover {
  color: var(--secondary-color);
}

footer .container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 1400px;
  padding: 0 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.footer-logo {
  flex: 0 0 30%;
}

.footer-logo img {
  height: 60px;
  margin-bottom: 1rem;
}

.footer-logo p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: flex-start;
  width: 100%;
}

.footer-column {
  flex: 1;
  min-width: 200px;
}

.footer-column h4 {
  color: #fff;
  margin-bottom: 1.5rem;
  position: relative;
}

.footer-column p {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
}

.footer-column p [class^="icon-"] {
  color: var(--secondary-color);
  margin-right: 10px;
}

.footer-column h4::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--secondary-color);
}

.social-links {
  display: flex;
  gap: 1.5rem;
}

.social-links a {
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
  opacity: 1;
  transform: translateY(-3px);
  color: var(--secondary-color);
}

.copyright {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 992px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .features {
    justify-content: center;
  }
  
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  .innovation .container {
    flex-direction: column;
  }
  
  .innovation-content, .innovation-media {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .navbar {
    background-color: #31456b;
    position: sticky;
  }
  
  .navbar .container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
  }
  
  nav ul {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(135deg, #31456b, #1a3b6e);
    flex-direction: column;
    padding: 100px 30px 30px;
    transition: right 0.3s ease;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    backdrop-filter: blur(20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  nav ul.active {
    right: 0;
  }
  
  /* Prevenir scroll del body cuando el menú móvil está activo */
  body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  nav ul li {
    margin: 15px 0;
  }
  
  nav ul li a {
    color: #fff !important;
    font-size: 1.1rem;
    padding: 15px 20px;
    border-radius: 8px;
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
  }
  
  nav ul li a:hover {
    background: rgba(230, 57, 70, 0.8);
    transform: translateX(-5px);
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
  }
  
  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 25px;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
    border-radius: 5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
  
  .mobile-menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transition: all 0.3s ease;
    border-radius: 2px;
  }
  
  .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  
  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .feature-card {
    min-width: 100%;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .service-card {
    padding: 2rem;
  }
  
  .service-card h3 {
    font-size: 1.5rem;
  }
  
  .footer-links {
    flex-direction: column;
    gap: 2rem;
  }
  
  .footer-top {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  
  .footer-logo {
    flex: none;
    text-align: center;
  }
  
  .footer-logo p {
    max-width: 100%;
  }
  
  .video-wrapper {
    height: 250px;
  }
  
  .video-info h4 {
    font-size: 1.2rem;
  }
  
  .video-info p {
    font-size: 0.9rem;
  }
  
  .carousel-slide img {
    height: 60px;
    margin: 0 1rem;
  }
  
  .carousel-slide {
    gap: 2rem;
    min-height: 80px;
  }
}

@media (max-width: 576px) {
  .hero {
    padding: 5rem 0;
  }
  
  .hero h1 {
    font-size: 1.8rem;
  }
  
  .decade-protection, .innovation, .services, .team, .contact {
    padding: 3rem 0;
  }
  
  .contact-buttons {
    flex-direction: column;
  }
  
  .footer-column {
    min-width: 100%;
    text-align: center;
  }
  
  .footer-column h4 {
    font-size: 1.1rem;
  }
  
  .footer-column p {
    font-size: 0.9rem;
    justify-content: center;
  }
  
  .video-wrapper {
    height: 200px;
  }
  
  .video-info h4 {
    font-size: 1rem;
  }
  
  .video-info p {
    font-size: 0.8rem;
  }
  
  .play-button svg {
    width: 50px;
    height: 50px;
  }
}