/* Variables CSS - Paleta de Colores */
:root {
  /* Colores Principales */
  --color-yellow-primary: #F1B227;
  --color-blue-primary: #005479;

  /* Colores Secundarios */
  --color-yellow-secondary: #F4C55D;
  --color-blue-secondary: #3E7E9A;

  /* Colores Adicionales */
  --color-gold: #DEA325;
  --color-blue-dark: #004564;
  --color-white: #FFFFFF;
  --color-gray-light: #E6E6E6;

  /* Colores de texto */
  --color-text-dark: #333333;
  --color-text-medium: #666666;
}

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--color-text-dark);
}


/* ===================== */
/* HERO NOSOTROS */
/* ===================== */
.about-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: #ffffff;
  height: 800px;
  padding-top: 10vh;
  padding-right: 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ===================== */
/* FONDO DEGRADADO ANIMADO */
/* ===================== */
.gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
      #002A3C,
      #082236,
      #005479,
      #02253f);
  background-size: 400% 400%;
  animation: gradientMove 18s ease infinite;
  z-index: 1;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ===================== */
/* ESTRELLAS */
/* ===================== */
.stars {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
    22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
    38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
    53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
    68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
    83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
    98vw 35vh 2px white;
  animation: twinkle 8s infinite linear;
  z-index: 2;
}

.stars::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
  box-shadow:
    8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
    33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
    57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
    81vw 48vh 1px white;
  animation: twinkle 6s infinite linear reverse;
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.4;
  }
}

/* ===================== */
/* ESTRELLAS FUGACES */
/* ===================== */
.shooting-star {
  position: absolute;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, white, transparent);
  animation: shoot 3s infinite ease-in;
  z-index: 3;
}

.shooting-star:nth-child(3) {
  top: 20%;
  left: -150px;
  animation-delay: 0s;
}

.shooting-star:nth-child(4) {
  top: 40%;
  left: -150px;
  animation-delay: 1.2s;
}

.shooting-star:nth-child(5) {
  top: 60%;
  left: -150px;
  animation-delay: 2.4s;
}

@keyframes shoot {
  0% {
    transform: translateX(0) translateY(0) rotate(25deg);
    opacity: 1;
  }

  100% {
    transform: translateX(130vw) translateY(60vh) rotate(25deg);
    opacity: 0;
  }
}


.about-hero-content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* Texto */
.about-text {
  max-width: 520px;
  padding-left: 10%;
}

.about-text h1 {
  font-size: 3.2rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  line-height: 1.15;
  margin-top: 0px;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #d0d6e0;
}

/* Imagen */
.about-image img,
.about-image-case img {
  max-width: 100%;
  width: 100%;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;

  background-color: #f5b400;
  color: #ffffff;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 180, 0, 0.35);
}

@media (max-width: 992px) {
  .about-hero {
    height: 100svh;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
  }

  .about-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 2rem 8% 0 8%;
    text-align: center;
    justify-content: center;
  }

  .about-text {
    padding-left: 0;
    margin-bottom: 2rem;
  }

  .about-text h1 {
    font-size: 2rem;
  }

  .about-image {
    width: 100vw;
    height: 35vh;
    margin-left: -6vw;
    margin-right: -6vw;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 0;
    position: relative;
  }

  .about-image img {
    width: auto;
    height: 100%;
    max-width: 500px;
    display: block;
    transform: translateX(10px);
  }

  .about-image-case {
    width: 100vw;
    height: 35vh;
    margin-left: -6vw;
    margin-right: -6vw;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 0;
    position: relative;
  }

  .about-image-case img {
    max-width: 500px;
    display: block;
    transform: translateX(10px);
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

}







/* ===================== */
/* CALL TO ACTION */
/* ===================== */
.cta-section {
  position: relative;
  padding: 5rem 8%;
  background: url('/recursos/bg_cta.png') center / cover no-repeat;
  text-align: center;
  color: #ffffff;
  gap: 2.2rem;
  overflow: hidden;
  flex-wrap: wrap;
}

/* Overlay para contraste */
.cta-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;
}

/* Contenido */
.cta-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: auto;
}

.cta-content h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2.2rem;
  color: #e6f1f4;
}

/* ===================== */
/* BOTÓN ANIMADO */
/* ===================== */
.cta-btn {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 999px;
  background-color: #F1B227;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  position: relative;
  animation: pulse 2.2s infinite;
}


@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(241, 178, 39, 0.55);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 18px rgba(241, 178, 39, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(241, 178, 39, 0);
  }
}


.cta-btn:hover {
  animation-play-state: paused;
  transform: scale(1.08);
  box-shadow: 0 10px 30px rgba(241, 178, 39, 0.5);
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */
@media (max-width: 768px) {
  .cta-content h2 {
    font-size: 1.8rem;
  }

  .cta-content p {
    font-size: 1rem;
  }
}








/* ===================== */
/* CSS DE LOS CASOS DE ÉXITO */
/* ===================== */


.case-section {
  background: #002A3C;
  color: #ffffff;
  padding: 6rem 0;
  font-family: 'Segoe UI', system-ui, sans-serif;

}

.case-section.dark {
  background: #002A3C;
}

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

.case-container.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.case-container.center {
  align-items: center;
}

.case-container.reverse {
  grid-template-columns: 1fr 1fr;
}

/* ===================== */
/* TEXTO */
.case-text h2 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}

.case-text h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #f5b400;
}

.case-text span {
  color: #f5b400;
}

.case-text p {
  color: #ffffff;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* ===================== */
/* LISTAS */
.case-list ul,
.case-text ul {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.case-list li,
.case-text li {
  margin-bottom: 0.8rem;
  color: #ffffff;
  padding-left: 1.2rem;
  position: relative;
}

.case-list li::before,
.case-text li::before {
  content: "•";
  color: #f5b400;
  position: absolute;
  left: 0;
}

.case-video {
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;


}

/* ===================== */
/* MEDIA */
.case-media img {
  width: 50%;
  border-radius: 12%;
  align: center;
  box-shadow: 0 25px 60px #86b6cc;
}

.case-lp img {
  width: 100%;
  align: center;

}

/* ===================== */
/* FULL WIDTH IMAGES */
.case-image-full img {
  width: 100%;
  display: block;
}

/* ===================== */
/* RESPONSIVE */
@media (max-width: 992px) {
  .case-container.two-cols {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .case-text h2 {
    font-size: 2.1rem;
  }

  .case-text h3 {
    font-size: 1.6rem;
  }

  .case-section {
    padding: 3rem 0;
  }

  .case-media {
    display: flex;
    justify-content: center;
  }

  .case-media img {
    width: 70%;
  }
}

/* ===================== */
/* RESUMEN DEL SISTEMA */
/* ===================== */
.case-summary {
  background: #002A3C;
  color: #ffffff;
  padding: 6rem 0;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Header */
.case-summary-header {
  max-width: 800px;
  margin: auto;
  text-align: center;
  padding: 0 6%;
}

.case-summary-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.case-summary-header span {
  color: #f5b400;
}

.case-summary-header p {
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Grid */
.case-summary-grid {
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 0 6%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}

/* Item */
.summary-item {
  background: #ffffff13;
  border-radius: 14px;
  padding: 2.2rem 1.5rem;
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.summary-item i {
  font-size: 1.9rem;
  color: #f5b400;
  margin-bottom: 0.8rem;
}

.summary-item span {
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  color: #d6dde6;
  text-align: center;
}

/* Hover */
.summary-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
}

/* Responsive */
@media (max-width: 768px) {
  .case-summary {
    padding: 4rem 0;
  }

  .case-summary-header h2 {
    font-size: 2.1rem;
  }

  .case-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Si el último item queda solo, ocupa todo el ancho */
  .case-summary-grid .summary-item:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .summary-item span {
    min-height: 3.2em;
  }
}

.cta-next-case {
  position: relative;
  overflow: hidden;
}

.cta-next-preview {
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.6s ease;
  z-index: 0;
}

.cta-next-case .cta-content {
  transition: transform 0.6s ease;
}

.cta-next-trigger:hover~.cta-content {
  transform: translateX(-160px);
}

.cta-next-case:has(.cta-next-trigger:hover) .cta-content,
.cta-next-case.is-active .cta-content {
  transform: translateX(-160px);
}

.cta-next-case:has(.cta-next-trigger:hover) .cta-next-preview,
.cta-next-case.is-active .cta-next-preview {
  opacity: 0.45;
  transform: translateX(0);
}

.cta-secondary {
  background-color: transparent;
  border: 2px solid rgba(241, 178, 39, 0.6);
  color: #ffffff;
  animation: none;
  opacity: 0.85;
  margin-left: 1rem;
}

.cta-secondary:hover {
  opacity: 1;
  background-color: #002A3C;
  color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 42, 60, 0.65);
}

.cta-actions {
  gap: 1.4rem;
}

@media (max-width: 768px) {
  .cta-actions {
    display: flex;
    flex-direction: column;
    padding: 0 25px;
    gap: 1.4rem;
  }

  .cta-next-preview {
    display: none;
  }

  .cta-next-case .cta-content {
    transform: none !important;
  }

  .cta-secondary {
    margin-left: 0;
  }
}

.video-mobile {
  display: none;
}


@media (max-width: 768px) {

  .video-desktop {
    display: none;

  }

  .video-mobile {
    display: block;

  }
}