/* custom.css */

/* === COLORES PERSONALIZADOS === */

/* Oscuro */
.bg-oscuro         { background-color: #5D5C5A !important; }
.text-oscuro       { color: #5D5C5A !important; }
.hover-bg-oscuro:hover  { background-color: #5D5C5A !important; }
.hover-text-oscuro:hover{ color: #5D5C5A !important; }

/* Claro */
.bg-claro          { background-color: #F3FCF7 !important; }
.text-claro        { color: #F3FCF7 !important; }
.hover-bg-claro:hover   { background-color: #F3FCF7 !important; }
.hover-text-claro:hover { color: #F3FCF7 !important; }

/* Rosa 1 */
.bg-rosa1          { background-color: #FB809D !important; }
.text-rosa1        { color: #FB809D !important; }
.hover-bg-rosa1:hover   { background-color: #FB809D !important; }
.hover-text-rosa1:hover { color: #FB809D !important; }

/* Rosa 2 */
.bg-rosa2          { background-color: #FFD1DC !important; }
.text-rosa2        { color:#FFD1DC !important; }
.hover-bg-rosa2:hover   { background-color: #FFD1DC !important; }
.hover-text-rosa2:hover { color: #FFD1DC !important; }

/* Rosa 3 */
.bg-rosa3          { background-color: #FDEAF2 !important; }
.text-rosa3        { color: #FDEAF2 !important; }
.hover-bg-rosa3:hover   { background-color: #FDEAF2 !important; }
.hover-text-rosa3:hover { color: #FDEAF2 !important; }

/* === BORDES PERSONALIZADOS === */
.border-oscuro     { border-color: #5D5C5A !important; }
.border-rosa1      { border-color: #FB809D !important; }


/* === BOTONES PERSONALIZADOS === */

.btn-rosa1 {
  background-color: #FB809D;
  color: #ffffff;
  border: none;
}
.btn-rosa1:hover {
  background-color: #f86d8f;
  color: #ffffff;
}

.btn-rosa2 {
  background-color: #FBBFC1;
  color: #5D5C5A;
  border: none;
}
.btn-rosa2:hover {
  background-color: #f9a7aa;
  color: #5D5C5A;
}

.btn-oscuro {
  background-color: #5D5C5A;
  color: #ffffff;
  border: none;
}
.btn-oscuro:hover {
  background-color: #4a4947;
  color: #ffffff;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Estilo de hover para los elementos del navbar */
.nav-link {
  transition: all 0.3s ease; /* Añadir transición para un efecto más suave */
}

/* === Hover personalizado para las clases === */
.nav-link.hover-rosa3:hover {
  color: #5D5C5A !important;  /* Cambiar el color del texto al pasar el mouse */
  background-color: #FFD9DD !important;  /* Cambiar el fondo al pasar el mouse */
}

/* Para otros efectos de hover, como el hover rosa1 */
.nav-link.hover-rosa1:hover {
  color: #FB809D !important;  /* Cambiar color de texto */
  background-color: #FB809D !important;  /* Cambiar el fondo */
}

.navbar-logo {
    height: 60px;
    width: auto;
}

.text-justify {
  text-align: justify;
}


#servicios {
  min-height: 100vh; /* Asegura que la sección ocupe toda la altura de la pantalla */
}
#productos {
  min-height: 100vh; /* Asegura que la sección ocupe toda la altura de la pantalla */
}
#equipo {
  min-height: 100vh; /* Asegura que la sección ocupe toda la altura de la pantalla */
}
#contacto {
  min-height: 100vh; /* Asegura que la sección ocupe toda la altura de la pantalla */
}
#nosotros {
  min-height: 100vh; /* Asegura que la sección ocupe toda la altura de la pantalla */
}

/* Personalización del borde y color de fondo para Misión y Visión */
.p-4.border {
  border-color: #FB809D; /* Color de borde personalizado */
}

.bg-light {
  background-color: #F3FCF7; /* Un tono más claro si deseas diferenciarlo del resto */
}

.text-oscuro {
  color: #5D5C5A; /* Tono oscuro para el texto */
}

h3 {
  font-family: 'Arial', sans-serif; /* Cambia la fuente si quieres algo diferente */
  font-size: 1.2rem; /* Tamaño del título */
}

/* Carousel */

/* Altura de pantalla completa para cada slide */
#bienvenida .carousel-item {
  height: 100vh;
  position: relative; /* para posicionar overlay */
}

/* La imagen llena el slide y se recorta centrada */
#bienvenida .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Capa oscura encima de la imagen */
.carousel-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35); /* puedes subir/bajar la opacidad */
  display: flex;
  align-items: center;
  padding-left: 3rem; /* ps-5 equivalente por si no usas utilidades */
}

/* Bloque de texto */
.carousel-item-text {
  color: #fff;
  max-width: 800px;
}

@media (max-width: 576px) {
  .carousel-item-text h1 { font-size: 1.75rem; }
  .carousel-item-text h2 { font-size: 1.125rem; }
  .carousel-item-overlay { padding-left: 1.25rem; }
}

/* Secciones de altura completa sin “saltos” en iOS Safari */
.hero-full {
  min-height: 100vh; /* Fallback universal */
}
@supports (height: 100dvh) {
  .hero-full { min-height: 100dvh; }
}
@supports (height: 100svh) {
  .hero-full { min-height: 100svh; }
}

/* Efecto blur con soporte para Safari */
.blur-bg {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Simular gap en flex usando márgenes (añádelo al contenedor) */
.flex-gap-fix > * { margin-right: 1rem; margin-bottom: 1rem; }
.flex-gap-fix > *:last-child { margin-right: 0; }

/* Variantes rápidas (opcional) */
.flex-gap-fix-sm > * { margin-right: .5rem; margin-bottom: .5rem; }
.flex-gap-fix-lg > * { margin-right: 1.5rem; margin-bottom: 1.5rem; }

:root { --nav-h: 56px; }
@media (min-width: 992px) { :root { --nav-h: 64px; } }

/* Para que el scroll “pare” antes y no tape el título */
html { scroll-padding-top: calc(var(--nav-h) + 12px); }

/* Offset cuando el ancla está en la sección */
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* (Opcional) si también enlazas a h2/h3 */
/* h2[id], h3[id] { scroll-margin-top: calc(var(--nav-h) + 12px); } */

html { scroll-behavior: smooth; }

/* Contenedor que recorta la imagen (para que el zoom no “desborde”) */
.img-zoom-wrapper {
  overflow: hidden;
  border-radius: .75rem; /* similar a .rounded */
}

/* La imagen ocupa todo el contenedor y hace zoom en hover/focus */
.img-zoom {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
  will-change: transform;
}

/* En dispositivos con mouse, aplica el zoom al pasar el puntero;
   también al enfocar con teclado (accesibilidad) */
@media (hover: hover) and (pointer: fine) {
  .img-zoom-link:hover .img-zoom,
  .img-zoom-link:focus-visible .img-zoom {
    transform: scale(1.08);
  }
}

/* Reduce animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
  .img-zoom { transition: none; }
}

/* Si usas .ratio de Bootstrap, ayuda a que la imagen rellene */
.ratio .img-zoom {
  width: 100%;
  height: 100%;
}

.card-hover:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }

/* Avatar circular responsivo */
.avatar-xxl { width: 160px; height: 160px; }
@media (min-width: 992px) { .avatar-xxl { width: 200px; height: 200px; } }

/* Recorte sin deformar */
.object-cover { object-fit: cover; }

/* Tarjeta con leve elevación en hover */
.team-card { transition: transform .2s ease, box-shadow .2s ease; border-radius: 1rem; }
.team-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }

/* Chips de etiquetas */
.tag {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 50rem;
  border: 1px solid currentColor;
  font-size: .75rem;
  line-height: 1;
}

/* Limitar texto a 4 líneas (bonito y limpio) */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.showcase .showcase-text {
  padding: 3rem;
}

.showcase .showcase-img {
  min-height: 30rem;
  background-size: cover;       /* que cubra todo el div */
  background-position: center;  /* centra la imagen */
  background-repeat: no-repeat; /* evita que se repita */
}

@media (min-width: 768px) {
  .showcase .showcase-text {
    padding: 7rem;
  }
}