/* ===========================
   Variables y base
   =========================== */
:root {
  --color-dark-blue: #0a192f;
  --color-medium-blue: #6a96c1;
  --color-light-blue: #a8c6e6;
  --color-medium-blue-alt: #6495ed; /* si quieres un matiz alternativo */
  --max-width: 7xl;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

/* Tailwind directives (si usas build) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fuente y ajustes globales */
body {
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.btn-primary {
  background-color: var(--color-dark-blue);
}

.btn-white {
  background-color: var(--color-light-blue);
}

/* Colores utilitarios personalizados */
.bg-dark-blue {
  background-color: var(--color-dark-blue);
}
.bg-medium-blue {
  background-color: var(--color-medium-blue);
}
.text-light-blue {
  color: var(--color-light-blue);
}
.text-medium-blue {
  color: var(--color-medium-blue);
}
.border-medium-blue {
  border-color: var(--color-medium-blue);
}

/* Navbar smooth transition */
#navbar {
  transition: background-color 0.28s ease, backdrop-filter 0.28s ease,
    box-shadow 0.28s ease;
}

/* Transparent background variant for navbar on scroll */
.bg-dark-blue-transparent {
  background-color: rgba(10, 25, 47, 0.6);
  backdrop-filter: blur(6px);
}

/* Hero background */
.hero-bg {
  background-image: url("img/fondo/fondo-section.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* background-attachment: fixed;  -> problemático en iOS, lo gestionamos con supports */
  position: relative;
}

/* iOS fallback para background-attachment: fixed */
@supports (-webkit-overflow-scrolling: touch) {
  .hero-bg {
    background-attachment: scroll;
  }
}
@supports not (-webkit-overflow-scrolling: touch) {
  .hero-bg {
    background-attachment: fixed;
  }
}

/* Wave shapes */
.wave-top {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.wave-bottom {
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
}

/* Drop shadows para textos (si lo quieres) */
.drop-shadow-lg {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
.drop-shadow-md {
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
}

/* CLAVE para el círculo */
.shadow-wrap {
  border-radius: 50%;
  transition: box-shadow 0.4s ease-out, transform 0.3s ease; /* Transición */
  overflow: visible; /* La sombra NO se corta */
  /* ... el resto de estilos base ... */
}

.shadow-wrap:hover {
  transform: translateY(-6px);
}

/* CLAVE para la imagen dentro */
.mask {
  border-radius: 50%;
  overflow: hidden; /* Corta la imagen al círculo */
}

.mask img {
  object-fit: contain; /* Asegura que el logo no se salga o se distorsione */
}
/* Cada item hace snap */
.carousel-item {
  scroll-snap-align: center;
  flex: 0 0 auto; /* evita que se comprima */
  padding-top: 30px; /* Deja 10px de espacio libre arriba */
  padding-bottom: 30px; /* Deja 10px de espacio libre abajo */
  min-width: calc(70px + 6rem);
}

/* El resto de las reglas @media también deben tener este padding si es necesario */
.shadow-wrap:hover {
  /* 1. Sombra oscura para profundidad */
  box-shadow: 0 18px 40px rgba(10, 25, 47, 0.2),
    /* 2. Sombra azul brillante (contorno interior) */ 0 0 0 8px
      rgba(71, 147, 219, 0.6),
    /* 3. Sombra azul resplandor (contorno exterior) */ 0 0 0 16px
      rgba(71, 147, 219, 0.3);

  transform: translateY(-6px);
}

/* Y la transición debe estar en el elemento base: */
.shadow-wrap {
  /* ... otros estilos ... */
  transition: box-shadow 0.4s ease-out, transform 0.3s ease;
}
@media (min-width: 640px) {
  /* 🌟 LOGROS 4 LOGOS VISIBLES (Aprox. 25% - gap) */
  /* Si el gap es de 10px (por ejemplo), el ancho del ítem debe ser: (100% / 4) - gap */
  .carousel-item {
    min-width: calc(25% - 20px); /* Ajusta 20px según tu 'gap' real */
  }
}

/* CARDS CON ESPECIFICACIONES */
:root {
  --color-primary: #1e3a8a; /* Azul oscuro */
  --color-secondary: #3b82f6; /* Azul brillante */
  --dark-blue: #0a192f;
  --medium-blue: #3b82f6;
}

body {
  font-family: "Inter", sans-serif;
}

/* Estilos de tarjeta general */
.card {
  transition: all 0.3s ease;
  cursor: default;
  min-height: 250px; /* Asegura altura consistente */
  position: relative;
}

/* ESTILO INTERACTIVO PARA TODAS LAS CARDS */
.card.is-trigger {
  cursor: pointer;
  border: 1px solid #e5e7eb;
}

/* ESTILO PARA CARD ACTIVA (la que se está viendo en detalle) */
.card.is-trigger.active {
  border: 2px solid var(--medium-blue);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.5),
    0 4px 6px -2px rgba(59, 130, 246, 0.2);
  transform: translateY(-5px);
}

.card.is-trigger:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Estilos para el switcher de pestañas */
.tab-button {
  transition: all 0.1s ease;
  border-bottom: 2px solid transparent;
  color: gray;
}

.tab-button.active {
  border-color: var(--medium-blue);
  color: var(--dark-blue);
  font-weight: 600;
}

#card-auditoria {
    /* Esencial: establece el contexto de posicionamiento */
    position: relative; 
    z-index: 1; /* Asegura que el card esté en una capa manejable */
    /* Asegúrate que el fondo blanco esté aplicado A ESTE DIV */
}

/* Pseudoelemento para la imagen sutil */
#card-auditoria::before {
    content: "";
    background-image: url("IMG/auditoría.png"); /* ¡Tu imagen! */
    background-repeat: no-repeat;
    background-position: 95% 95%; /* Posiciona la imagen */
    background-size: 100px; /* Tamaño de la imagen */
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem; /* Hereda el redondeo de 'rounded-xl' de Tailwind */
    
    opacity: 0.15; /* La clave de la sutileza, solo para la imagen */
    z-index: -1; /* ¡CLAVE! Lo pone detrás de todo el contenido del card */
}