/* ============================================
   CHOCOMELLOS — Estilos de componentes
   ============================================ */

/* ==========================================
   ENCABEZADO
   ========================================== */

.encabezado {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--alto-encabezado);
  display: flex;
  align-items: center;
  background-color: transparent;
  overflow: visible;
  transition: background-color var(--transicion-normal),
              box-shadow var(--transicion-normal),
              backdrop-filter var(--transicion-normal);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 var(--espacio-xl);
  gap: var(--espacio-md);
  height: 100%;
}

.encabezado__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.encabezado__logo img {
  height: 250px;
  margin-top: 25px;
  width: auto;
  transition: opacity var(--transicion-normal);
}

.encabezado__logo:hover img {
  opacity: 0.9;
  transform: scale(1.02);
}

.encabezado__nav {
  display: flex;
  align-items: center;
  gap: var(--espacio-lg);
}

.encabezado__enlace {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--cafe-chocolate);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--transicion-rapida);
}

.encabezado__enlace::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--rosa-coral);
  border-radius: 1px;
  transition: width var(--transicion-normal);
}

.encabezado__enlace:hover {
  color: var(--rosa-coral);
}

.encabezado__enlace:hover::after {
  width: 100%;
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
}

/* Botón hamburguesa */
.encabezado__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
}

.encabezado__hamburguesa span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--cafe-chocolate);
  border-radius: 1px;
  transition: transform var(--transicion-normal), opacity var(--transicion-normal);
  transform-origin: center;
}

.encabezado__hamburguesa.abierto span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.encabezado__hamburguesa.abierto span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.encabezado__hamburguesa.abierto span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú móvil */
.encabezado__menu-movil {
  display: none;
  position: fixed;
  top: var(--alto-encabezado);
  left: 0;
  right: 0;
  background-color: var(--blanco-calido);
  box-shadow: var(--sombra-lg);
  padding: var(--espacio-xl);
  flex-direction: column;
  gap: var(--espacio-md);
  z-index: 99;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform var(--transicion-suave), opacity var(--transicion-suave);
  pointer-events: none;
}

.encabezado__menu-movil.abierto {
  display: flex;
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.encabezado__menu-movil .encabezado__enlace {
  font-size: var(--texto-md);
  padding: var(--espacio-sm) 0;
  border-bottom: 1px solid var(--crema-oscura);
}

.encabezado__menu-movil .boton-principal {
  margin-top: var(--espacio-sm);
  justify-content: center;
}

/* ==========================================
   PIE DE PÁGINA
   ========================================== */

.pie-pagina {
  background-color: var(--cafe-chocolate);
  color: var(--crema-suave);
  padding: var(--espacio-4xl) 0 var(--espacio-xl);
  position: relative;
  overflow: hidden;
}

.pie-pagina::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(240,144,139,0.06) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(216,167,95,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.pie-pagina__interior {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--espacio-3xl);
  position: relative;
  z-index: 1;
}

.pie-pagina__marca img {
  height: 52px;
  width: auto;
  margin-bottom: var(--espacio-md);
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.pie-pagina__frase {
  font-family: var(--fuente-acento);
  font-size: var(--texto-lg);
  color: var(--rosa-coral);
  display: block;
  margin-bottom: var(--espacio-md);
}

.pie-pagina__descripcion {
  color: rgba(255, 247, 236, 0.6);
  font-size: var(--texto-sm);
  line-height: 1.7;
}

.pie-pagina__titulo-columna {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--crema-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--espacio-md);
}

.pie-pagina__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}

.pie-pagina__lista a,
.pie-pagina__lista span {
  color: rgba(255, 247, 236, 0.65);
  font-size: var(--texto-sm);
  transition: color var(--transicion-rapida);
}

.pie-pagina__lista a:hover {
  color: var(--rosa-coral);
}

.pie-pagina__redes {
  display: flex;
  gap: var(--espacio-md);
  margin-top: var(--espacio-md);
}

.pie-pagina__red {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,247,236,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,247,236,0.65);
  transition: background-color var(--transicion-normal),
              color var(--transicion-normal),
              border-color var(--transicion-normal);
}

.pie-pagina__red:hover {
  background-color: var(--rosa-coral);
  border-color: var(--rosa-coral);
  color: white;
}

.pie-pagina__base {
  margin-top: var(--espacio-3xl);
  padding-top: var(--espacio-xl);
  border-top: 1px solid rgba(255,247,236,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-md);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.pie-pagina__copyright {
  color: rgba(255, 247, 236, 0.4);
  font-size: var(--texto-xs);
}

/* ==========================================
   TARJETA SERVICIO
   ========================================== */

.tarjeta-servicio {
  background-color: var(--blanco-calido);
  border-radius: var(--radio-lg);
  padding: var(--espacio-2xl);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion-normal),
              box-shadow var(--transicion-normal);
  position: relative;
  overflow: hidden;
}

.tarjeta-servicio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rosa-coral), var(--dorado-sutil));
  opacity: 0;
  transition: opacity var(--transicion-normal);
}

.tarjeta-servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-hover);
}

.tarjeta-servicio:hover::before {
  opacity: 1;
}

.tarjeta-servicio__icono {
  width: 56px;
  height: 56px;
  background-color: var(--rosa-claro);
  border-radius: var(--radio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--espacio-lg);
  transition: background-color var(--transicion-normal);
}

.tarjeta-servicio:hover .tarjeta-servicio__icono {
  background-color: var(--rosa-coral);
}

.tarjeta-servicio:hover .tarjeta-servicio__icono svg {
  color: white;
}

.tarjeta-servicio__icono svg {
  width: 28px;
  height: 28px;
  color: var(--rosa-coral);
  transition: color var(--transicion-normal);
}

.tarjeta-servicio__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: 700;
  color: var(--cafe-chocolate);
  margin-bottom: var(--espacio-sm);
}

.tarjeta-servicio__descripcion {
  font-size: var(--texto-sm);
  color: var(--cafe-medio);
  line-height: 1.65;
  margin-bottom: var(--espacio-lg);
}

.tarjeta-servicio__enlace {
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--rosa-coral);
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-xs);
  transition: gap var(--transicion-normal), color var(--transicion-normal);
}

.tarjeta-servicio__enlace:hover {
  color: #e8726c;
  gap: var(--espacio-sm);
}

/* ==========================================
   TARJETA IDEA
   ========================================== */

.tarjeta-idea {
  background-color: var(--blanco-calido);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion-normal),
              box-shadow var(--transicion-normal);
}

.tarjeta-idea:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.tarjeta-idea__imagen {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background-color: var(--beige-calido);
  transition: transform var(--transicion-suave);
}

.tarjeta-idea:hover .tarjeta-idea__imagen {
  transform: scale(1.03);
}

.tarjeta-idea__imagen-envolvente {
  overflow: hidden;
  position: relative;
}

.tarjeta-idea__contenido {
  padding: var(--espacio-lg);
}

.tarjeta-idea__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs);
  margin-bottom: var(--espacio-sm);
}

.tarjeta-idea__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-lg);
  font-weight: 700;
  color: var(--cafe-chocolate);
  margin-bottom: var(--espacio-xs);
}

.tarjeta-idea__descripcion {
  font-size: var(--texto-sm);
  color: var(--cafe-medio);
  line-height: 1.6;
  margin-bottom: var(--espacio-md);
}

/* ==========================================
   BOTÓN WHATSAPP FLOTANTE
   ========================================== */

.boton-whatsapp-flotante {
  position: fixed;
  bottom: var(--espacio-xl);
  right: var(--espacio-xl);
  z-index: 200;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform var(--transicion-normal),
              box-shadow var(--transicion-normal);
  animation: latir 3s ease-in-out infinite;
}

.boton-whatsapp-flotante:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.55);
  animation: none;
}

.boton-whatsapp-flotante svg {
  width: 32px;
  height: 32px;
  color: white;
}

@keyframes latir {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ==========================================
   CONSTRUCTOR DE REGALO
   ========================================== */

.constructor-regalo {
  background-color: var(--beige-calido);
}

.constructor-regalo__interior {
  max-width: 860px;
  margin: 0 auto;
}

.constructor-regalo__pasos {
  display: flex;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-3xl);
  flex-wrap: wrap;
}

.constructor-regalo__indicador {
  flex: 1;
  min-width: 80px;
  height: 4px;
  background-color: var(--crema-oscura);
  border-radius: 2px;
  transition: background-color var(--transicion-normal);
  position: relative;
}

.constructor-regalo__indicador.activo {
  background-color: var(--rosa-coral);
}

.constructor-regalo__indicador.completado {
  background-color: var(--cafe-claro);
}

.constructor-regalo__paso {
  display: none;
}

.constructor-regalo__paso.activo {
  display: block;
  animation: entrarPaso 0.35s ease forwards;
}

@keyframes entrarPaso {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.constructor-regalo__pregunta {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--texto-2xl);
  color: var(--cafe-chocolate);
  margin-bottom: var(--espacio-xl);
}

.constructor-regalo__opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--espacio-md);
}

.constructor-regalo__opcion {
  background-color: var(--blanco-calido);
  border: 2px solid transparent;
  border-radius: var(--radio-lg);
  padding: var(--espacio-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transicion-normal),
              background-color var(--transicion-normal),
              transform var(--transicion-normal);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--cafe-chocolate);
}

.constructor-regalo__opcion:hover {
  border-color: var(--rosa-medio);
  transform: translateY(-2px);
}

.constructor-regalo__opcion.seleccionado {
  border-color: var(--rosa-coral);
  background-color: var(--rosa-claro);
  color: var(--cafe-chocolate);
}

.constructor-regalo__emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--espacio-sm);
}

.constructor-regalo__resultado {
  display: none;
  background-color: var(--blanco-calido);
  border-radius: var(--radio-xl);
  padding: var(--espacio-3xl);
  text-align: center;
  box-shadow: var(--sombra-lg);
  animation: entrarPaso 0.4s ease forwards;
}

.constructor-regalo__resultado.visible {
  display: block;
}

.constructor-regalo__recomendacion {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: var(--texto-2xl);
  color: var(--cafe-chocolate);
  margin-bottom: var(--espacio-md);
}

.constructor-regalo__descripcion-resultado {
  font-size: var(--texto-md);
  color: var(--cafe-medio);
  margin-bottom: var(--espacio-xl);
  line-height: 1.65;
}

.constructor-regalo__navegacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--espacio-2xl);
  gap: var(--espacio-md);
}

/* ==========================================
   GALERÍA INSPIRACIÓN
   ========================================== */

.galeria-inspiracion {
  background-color: var(--crema-suave);
}

.galeria-inspiracion__filtros {
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-2xl);
}

.galeria-inspiracion__filtro {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--cafe-medio);
  background-color: var(--blanco-calido);
  border: 1px solid var(--crema-oscura);
  border-radius: var(--radio-redondo);
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: all var(--transicion-normal);
}

.galeria-inspiracion__filtro:hover {
  border-color: var(--rosa-coral);
  color: var(--rosa-coral);
}

.galeria-inspiracion__filtro.activo {
  background-color: var(--cafe-chocolate);
  border-color: var(--cafe-chocolate);
  color: var(--crema-suave);
}

.galeria-inspiracion__grid {
  columns: 3;
  column-gap: var(--espacio-md);
}

.galeria-inspiracion__item {
  break-inside: avoid;
  margin-bottom: var(--espacio-md);
  border-radius: var(--radio-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform var(--transicion-normal);
}

.galeria-inspiracion__item:hover {
  transform: scale(1.01);
}

.galeria-inspiracion__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transicion-suave);
}

.galeria-inspiracion__item:hover img {
  transform: scale(1.04);
}

.galeria-inspiracion__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(63,36,20,0.6) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transicion-normal);
  display: flex;
  align-items: flex-end;
  padding: var(--espacio-md);
}

.galeria-inspiracion__item:hover .galeria-inspiracion__overlay {
  opacity: 1;
}

.galeria-inspiracion__overlay-texto {
  color: var(--crema-suave);
  font-size: var(--texto-sm);
  font-weight: 500;
}

.galeria-inspiracion__item.oculto {
  display: none;
}

/* Modal galería */
.galeria-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 15, 8, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion-normal);
}

.galeria-modal.abierto {
  opacity: 1;
  pointer-events: all;
}

.galeria-modal__contenido {
  position: relative;
  max-width: 860px;
  width: 100%;
  border-radius: var(--radio-lg);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform var(--transicion-suave);
}

.galeria-modal.abierto .galeria-modal__contenido {
  transform: scale(1);
}

.galeria-modal__imagen {
  width: 100%;
  height: auto;
  display: block;
}

.galeria-modal__cerrar {
  position: absolute;
  top: var(--espacio-md);
  right: var(--espacio-md);
  width: 40px;
  height: 40px;
  background: rgba(255,247,236,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--cafe-chocolate);
  transition: background-color var(--transicion-normal);
}

.galeria-modal__cerrar:hover {
  background: var(--blanco-calido);
}

/* ==========================================
   PROCESO DE REGALO
   ========================================== */

.proceso-regalo__pasos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--espacio-lg);
  position: relative;
}

.proceso-regalo__pasos::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--rosa-coral), var(--dorado-sutil));
  z-index: 0;
}

.proceso-regalo__paso {
  text-align: center;
  position: relative;
  z-index: 1;
}

.proceso-regalo__numero {
  width: 64px;
  height: 64px;
  background-color: var(--rosa-claro);
  border: 3px solid var(--blanco-calido);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--espacio-md);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xl);
  font-weight: 700;
  color: var(--rosa-coral);
  box-shadow: var(--sombra-sm);
}

.proceso-regalo__titulo {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
  font-weight: 700;
  color: var(--cafe-chocolate);
  margin-bottom: var(--espacio-xs);
}

.proceso-regalo__descripcion {
  font-size: var(--texto-sm);
  color: var(--cafe-medio);
  line-height: 1.5;
}

/* ==========================================
   PREGUNTAS FRECUENTES
   ========================================== */

.preguntas-frecuentes__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  max-width: 800px;
  margin: 0 auto;
}

.pregunta-item {
  background-color: var(--blanco-calido);
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  transition: box-shadow var(--transicion-normal);
}

.pregunta-item:hover {
  box-shadow: var(--sombra-md);
}

.pregunta-item__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espacio-lg) var(--espacio-xl);
  cursor: pointer;
  gap: var(--espacio-md);
}

.pregunta-item__texto {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--cafe-chocolate);
  line-height: 1.4;
}

.pregunta-item__icono {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--rosa-coral);
  transition: transform var(--transicion-normal);
}

.pregunta-item.activa .pregunta-item__icono {
  transform: rotate(45deg);
}

.pregunta-item__respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transicion-suave);
}

.pregunta-item.activa .pregunta-item__respuesta {
  max-height: 400px;
}

.pregunta-item__respuesta-interior {
  padding: 0 var(--espacio-xl) var(--espacio-lg);
  font-size: var(--texto-sm);
  color: var(--cafe-medio);
  line-height: 1.7;
  border-top: 1px solid var(--crema-oscura);
  padding-top: var(--espacio-md);
}

/* ==========================================
   LLAMADO FINAL (CTA)
   ========================================== */

.llamado-final {
  background: linear-gradient(135deg, var(--cafe-chocolate) 0%, #5c3420 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.llamado-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(240,144,139,0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(216,167,95,0.08) 0%, transparent 40%);
  pointer-events: none;
}

.llamado-final__interior {
  position: relative;
  z-index: 1;
}

.llamado-final__titulo {
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: clamp(var(--texto-2xl), 4vw, var(--texto-4xl));
  color: var(--crema-suave);
  margin-bottom: var(--espacio-md);
}

.llamado-final__subtitulo {
  font-size: var(--texto-md);
  color: rgba(255, 247, 236, 0.7);
  margin-bottom: var(--espacio-2xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.llamado-final .boton-principal {
  font-size: var(--texto-md);
  padding: 1rem var(--espacio-3xl);
}