:root{
  --primary: #071029; /* deep navy */
  --accent:  #FFB84D; /* warm gold */
  --muted:   #94a3b8;
  --bg:      #F7F8FA;
}

/* small helpers not available as tailwind utilities */
.glass {
  background: linear-gradient(180deg, rgba(7,16,41,0.94), rgba(7,16,41,0.85));
  backdrop-filter: blur(6px);
}

/* subtle text shadow for hero */
.hero-title-shadow {
  text-shadow: 0 8px 30px rgba(2,6,23,0.45);
}

/* floating contact card shadow */
.card-float {
  box-shadow: 0 20px 40px rgba(3,7,18,0.24);
  border: 1px solid rgba(255,255,255,0.04);
}

/* navbar scrolled state applied via JS */
#site-navbar.scrolled {
  background: linear-gradient(180deg, rgba(7,16,41,0.94), rgba(7,16,41,0.85));
  box-shadow: 0 8px 30px rgba(2,6,23,0.34);
}

/* small tweak for cards hover gradient */
.card-hover:hover {
  transform: translateY(-6px) scale(1.01);
  transition: transform .32s cubic-bezier(.2,.9,.2,1);
}

/* focus outline consistent */
.focus-ring:focus {
  outline: 3px solid rgba(255,184,77,0.18);
  outline-offset: 3px;
}

/* testimonial carousel dots */
.dot-active {
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(255,184,77,0.16);
}

/* back to top */
#back-to-top {
  transition: opacity .18s ease, transform .18s ease;
}

/* reveal initial state used by JS */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* subtle underline for headings */
.heading-underline::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg,var(--accent),rgba(255,184,77,0.65));
  margin-top: .6rem;
  border-radius: 999px;
}

/* small responsive fix for hero CTAs on very small screens */
@media (max-width:420px){
  .hero-cta { padding-left: .9rem; padding-right: .9rem; }

  /*
    iPhone-specific team layout override:
    - Force 3 columns in the team grid on small devices (as requested)
    - Ensure team images are square and 265x265px
    - Allow cards to center and avoid overflow
    Note: this uses !important to override utility classes where necessary.
  */
  #equipo .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #equipo .max-w-sm {
    max-width: none !important;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  #equipo .max-w-sm .relative,
  #equipo .max-w-sm .relative > img,
  #equipo .max-w-sm img {
    width: 265px !important;
    height: 265px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  /* ensure the card content flows below the image without overlap */
  #equipo .max-w-sm .relative {
    height: 265px !important;
    overflow: hidden;
    position: relative;
  }
}

/* MOBILE: aumentar separación entre la barra fija y el título del hero */
@media (max-width:640px) {
  /* Anulamos el margin negativo que empuja el hero hacia arriba y añadimos padding-top
     para que el título no quede pegado a la barra de navegación fija. */
  #inicio {
    margin-top: 0;
    padding-top: 5.5rem; /* suficiente espacio para navbar (h-16) + separación */
  }

  /* Ajuste fino del espaciado del título en pantallas muy pequeñas */
  #inicio h1 {
    margin-top: .35rem;
  }
}

/* TABLET: aumentar separación en pantallas intermedias (tablet) */
@media (min-width:641px) and (max-width:1024px) {
  /* Neutralizamos el -mt aplicado en la sección y añadimos padding superior
     para que el título no quede pegado a la barra fija en tablets. */
  #inicio {
    margin-top: 0;
    padding-top: 6.5rem; /* un poco más que móvil para tablets */
  }

  /* Ajuste del título en tablet para mantener proporciones */
  #inicio h1 {
    margin-top: 0.5rem;
  }
}

/* Floating WhatsApp button */
.whatsapp-fab{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--primary);
  box-shadow: 0 10px 30px rgba(2,6,23,0.18);
  z-index: 60;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.whatsapp-fab:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 36px rgba(2,6,23,0.22);
}

/* MOBILE MENU: make mobile/offcanvas menus opaque and readable on small screens */
@media (max-width: 768px) {
  /* Target common mobile/offcanvas/menu selectors used across the site's pages */
  .mobile-menu,
  .mobile-nav,
  .site-nav-mobile,
  .site-menu-mobile,
  #mobile-menu,
  #mobile-panel,
  .mobile-panel,
  .menu-overlay,
  .menu-panel,
  .offcanvas,
  .offcanvas.show,
  .navbar-collapse,
  .navbar-collapse.show,
  [id^="mobile-"],
  [id*="mobile-panel"] {
    /* Stronger override to beat utility classes or inline styles */
    background-color: #071229 !important;
    background-image: none !important;
    color: #ffffff !important;
    /* remove backdrop to avoid translucency issues on some browsers */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: 0 12px 30px rgba(2,6,23,0.75) !important;
    z-index: 99999 !important;
    opacity: 1 !important;
  }

  /* Very specific selector for the site mobile panel to ensure it is opaque */
  body #site-navbar #mobile-panel,
  body #mobile-panel,
  header #mobile-panel {
    background-color: #071229 !important;
    background-image: none !important;
    opacity: 1 !important;
    box-shadow: 0 12px 30px rgba(2,6,23,0.75) !important;
    z-index: 99999 !important;
  }

  /* Ensure links and interactive elements inside the menu are readable */
  .mobile-menu a,
  .mobile-nav a,
  .site-nav-mobile a,
  .navbar-collapse a,
  .menu-panel a,
  .offcanvas a,
  #mobile-panel a,
  .mobile-panel a {
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(2,6,23,0.6);
  }

  /* Make close buttons and toggle icons clearly visible */
  .mobile-menu .close,
  .offcanvas .close,
  .navbar-collapse .close,
  #mobile-panel .close,
  #mobile-panel .btn-close,
  .mobile-panel .close,
  .mobile-panel .btn-close {
    color: #ffffff !important;
    opacity: 0.95;
  }

  /* If the menu is positioned off-canvas with transforms, ensure it's above the navbar */
  #mobile-panel,
  .mobile-panel,
  #mobile-menu,
  .offcanvas {
    transform: translateZ(0); /* promote to its own layer for smoother animation */
  }
}

/* Additional fix for mobile panel background */
#mobile-panel {
  background-color: #071229;
  background-image: none;
}

/* TEAM: enforce consistent image sizing and crop so team cards look even */
#equipo .max-w-sm .relative > img,
#equipo .max-w-sm img {
  width: 100%;
  height: 16rem; /* matches the utility class h-64 used in markup */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ensure the image container keeps a fixed height and overlay covers correctly */
#equipo .max-w-sm .relative {
  height: 16rem;
  overflow: hidden;
  position: relative;
}

/* Additional helper: allow cards to shrink gracefully on narrow viewports */
#equipo .max-w-sm {
  max-width: 100%;
}

/* Add extra space at the very end of the footer so it becomes 50px taller */
footer {
  padding-bottom: 60px;
}