/* 1. Fuente cursiva (Allura) para "Personales" */
@font-face {
  font-family: 'AlluraCursiva';
  src: url('../../img/Fuentes/Allura_Cursiva/Allura-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 2. Fuente para "COMBOS" (Ekamai / ChangaOne) */
@font-face {
  font-family: 'EkamaiFuente';
  src: url('../../img/Fuentes/Ekamai_ParaPersonales/Ekamai.ttf') format('truetype'); 
  font-weight: bold;
  font-style: normal;
}
/*3. fuente  para corpporativos */
@font-face {
  font-family: 'ChangeOne';
  src: url('../../img/Fuentes/ChangaOne-Regular_ParaCorporativos/ChangaOne-Regular.ttf') format('truetype'); 
  font-weight: bold;
  font-style: normal;
}

/* Contenedor del banner/encabezado */
.contenedor-titulo-combos {
  margin-top: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  background-color: #d8f0fe; /* Azul claro de fondo de Jululu */
  overflow: visible;
}

/* Texto 1: COMBOS (Letra grande azul) */
.texto-combos {
  font-family: 'EkamaiFuente', sans-serif; /* Usamos la fuente de la carpeta Ekamai */
  font-size: 7.5rem;
  font-weight: 900;
  color: #0099ff; /* Azul vivo interior */
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 1px;

  /* Borde azul oscuro alrededor de las letras COMBOS */
  -webkit-text-stroke: 8px #0052cc;
  paint-order: stroke fill;

  top: 50%;
  left: 50%;
  transform: translate(-25%, -15%);
}

/* Texto 2: Personales (Letra cursiva montada) */
.texto-personales {
  position: absolute;
  font-family: 'AlluraCursiva', cursive; /* Usamos la fuente Allura */
  font-size: 6.2rem;
  color: #0052cc; /* Color del texto cursivo */
  margin: 0;

  /* Ubicación exacta para montarla sobre "COMBOS" */
  top: 35%;
  left: 50%;
  transform: translate(-55%, -15%) rotate(-1deg);

  z-index: 10; /* Hace que quede encima de COMBOS */

  /* Borde blanco grueso alrededor de la cursiva para destacarla */
  -webkit-text-stroke: 5px #ffffff;
  paint-order: stroke fill;
}

/* CORPORATIVOS */
/* Contenedor principal de la sección corporativa */
.contenedor-titulo-corporativos {
  margin-top: 80px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  background-color: #222933; /* Fondo gris oscuro/azulado de la vista corporativa */
  overflow: visible;
}

/* 1. Texto Base: COMBOS (Con Changa One) */
.texto-combos-corp {
  font-family: 'ChangeOne', sans-serif;
  font-size: 7.5rem;
  font-weight: 400; /* Changa One por lo general se usa en regular */
  color:#11151c; /* Relleno interior azul noche */
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  
  /* Trazo o borde exterior grueso de color gris oscuro/negro para que resalte */
  -webkit-text-stroke: 18px  #ffffff;
  paint-order: stroke fill;

  top: 50%;
  left: 50%;
  transform: translate(-25%, -15%);
}

/* 2. Texto Superpuesto: Corporativos (Con la fuente Allura Cursiva) */
.texto-corporativos {
  position: absolute;
  font-family: 'AlluraCursiva', cursive;
  font-size: 6.2rem;
  color: #ffffff; /* Texto completamente blanco */
  margin: 0;
  
  /* Posicionamiento exacto para montarlo sobre la parte inferior de COMBOS */
  top: 35%;
  left: 50%;
  transform: translate(-15%, -15%) rotate(-1deg);
  
  z-index: 10; /* Asegura que quede por encima de COMBOS */
  
  /* Sombra suave opcional para darle profundidad sobre el fondo oscuro */
  filter: drop-shadow(4px 4px 5px #222933);
}


.espacio{
    margin-top: 50px;
}



/* Capa de texto superpuesta en la parte inferior */
.card-body-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  color: #fff; /* Cambia a oscuro (#000) si prefieres texto negro como en tu referencia */
  transform: translateY(20px); /* Posición inicial ligeramente desplazada hacia abajo */
  transition: transform 0.4s ease, background 0.4s ease;
}



/* ==========================================================================
   TARJETAS Y EFECTO 3D
   ========================================================================== */
.card-efecto {
  position: relative;
  cursor: pointer;
  border: 2px solid rgba(0, 86, 207, 0.35) !important;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 86, 207, 0.1);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Imagen de la tarjeta con transición para el hover */
.card-efecto img {
  transition: opacity 0.4s ease, transform 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa de texto superpuesta en la tarjeta */
.card-body-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  color: #fff;
  transform: translateY(20px);
  transition: transform 0.4s ease, background 0.4s ease;
}

/* Hover de la tarjeta */
.card-efecto:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 86, 207, 0.25);
}

.card-efecto:hover img {
  opacity: 0.6;
  transform: scale(1.03);
}

.card-efecto:hover .card-body-overlay {
  transform: translateY(0);
}

/* ==========================================================================
   ESTILOS PARA EL ZOOM INTERACTIVO DE LA LUPA (MODAL)
   ========================================================================== */
.img-zoom-container {
  position: relative;
  overflow: hidden;
  cursor: crosshair; /* Muestra una cruz de precisión al pasar el mouse */
  display: inline-block;
  width: 100%;
  max-height: 400px; /* Limita la altura para que no ocupe toda la pantalla */
  border-radius: 8px;
}

.img-zoom-container img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  transition: transform 0.1s ease-out; /* Movimiento súper fluido */
  transform-origin: center center;
}

/* Ajuste de títulos para pantallas móviles */
@media (max-width: 768px) {
  /* Si tu título de la cabecera es un h1 o tiene una clase especial */
  h1, 
  .titulo-seccion,
  .hero-title {
    font-size: 2rem !important; /* Disminuye el tamaño para que encaje completo */
    line-height: 1.2 !important;
    text-align: center !important;
    word-wrap: break-word !important; /* Evita que palabras muy largas se salgan */
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Si utilizas una imagen o texto compuesto para el banners superior */
  .banner-header h1,
  .banner-header h2 {
    font-size: 1.8rem !important;
  }

  /* 1. Reducimos el texto cursivo de Corporativos en celulares */
  .texto-corporativos {
    font-size: 3rem !important; /* Baja de 6.2rem a un tamaño ideal para móvil */
    top: 40% !important;
    transform: translate(-30%, -20%) rotate(-1deg) !important;
  }

  /* 2. Reducimos el texto cursivo de Personales en celulares */
  .texto-personales {
    font-size: 3rem !important; /* Baja de 6.2rem a un tamaño ideal para móvil */
    top: 40% !important;
    transform: translate(-50%, -20%) rotate(-1deg) !important;
    -webkit-text-stroke: 3px #ffffff !important; /* Ajustamos el borde blanco para que no se vea grueso */
  }

  /* 3. Ajustamos también el título principal superior (el bloque grande de "REGALOS/COMBOS") */
  .banner-header h1,
  .hero-title,
  .titulo-principal {
    font-size: 2.5rem !important; /* Evita que se desborde a los lados */
  }
}