/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');*/

/* ==========================================
   DIN 2014
========================================== */

@font-face {
    font-family: 'DIN2014';
    src: url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Light.eot');
    src: url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Light.eot?#iefix') format('embedded-opentype'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Light-1.woff2') format('woff2'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Light-1.woff') format('woff'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Light-1.ttf') format('truetype'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Light.svg#DIN2014') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN2014';
    src: url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Regular.eot');
    src: url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Regular.eot?#iefix') format('embedded-opentype'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Regular-1.woff2') format('woff2'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Regular-1.woff') format('woff'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Regular-1.ttf') format('truetype'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Regular.svg#DIN2014') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN2014';
    src: url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Bold.eot');
    src: url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Bold.eot?#iefix') format('embedded-opentype'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Bold-1.woff2') format('woff2'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Bold-1.woff') format('woff'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Bold-1.ttf') format('truetype'),
         url('https://acapcultural.com/wp-content/uploads/2025/10/DIN2014-Bold.svg#DIN2014') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Estilos para un Formulario Elegante de CF7 --- */

/* 1. Contenedor principal del formulario */
.mi-formulario-elegante {
  max-width: 600px; /* Ancho máximo del formulario */
  margin: 0px auto; /* Centrado */
  padding: 25px;
  background: #ffffff;
  border-radius: 12px; /* Bordes redondeados */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border: 1px solid #eee;
}

/* 1b. Contenedor principal del formulario footer */
.mi-formulario-elegante.form-footer {
  padding: 15px 15px 0 15px;
}

/* 1c. Contenedor principal del formulario popup */
.mi-formulario-elegante.popup {
  box-shadow: none;
  padding: 15px 25px;
  background: none;
  border: none;
	color: #fff;
}
.mi-formulario-elegante.popup .wpcf7-form-control-wrap {
    flex-grow: 1; /* Ocupa todo el espacio horizontal disponible */
	top: -6px;
}
/* 1cbis. Contenedor principal del formulario footer */
.mi-formulario-elegante.form-footer {
  padding: 0;
  background: none;
  border: none;
}
.mi-formulario-elegante.form-footer {
	box-shadow: none;
}

/* 2. Estilos de todos los campos (inputs y textarea) */
.mi-formulario-elegante input[type="text"],
.mi-formulario-elegante input[type="email"],
.mi-formulario-elegante input[type="tel"],
.mi-formulario-elegante textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: 'DIN2014', sans-serif;
  font-size: 16px;
  color: #333;
  box-sizing: border-box; /* Asegura que el padding no rompa el layout */
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* 2c. Estilos de todos los campos inputs popup  */
.mi-formulario-elegante.popup input[type="text"],
.mi-formulario-elegante.popup input[type="email"],
.mi-formulario-elegante.popup input[type="tel"] {
	width: 100%;
    padding: 1px 0;
	background: transparent;
	font-family: 'DIN2014', sans-serif;
	color: #ffffff;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #fff;
}
.mi-formulario-elegante.popup input[type="submit"] {
	width: 100%;
	flex-grow: 1;
}
.mi-formulario-elegante.popup p {
	margin-bottom: 15px; /* Aumenté un poco el margen para mejor separación */
	font-family: 'DIN2014', sans-serif;
	display: flex; /* Habilita el Flexbox */
	align-items: baseline; /* Alinea verticalmente el texto y el input */
	gap: 10px; /* Añade un pequeño espacio entre el texto y el input */
}
.mi-formulario-elegante.popup p .wpcf7-spinner {
	display: none;
}
/* 2cbis. Estilos de todos los campos inputs footer */
.mi-formulario-elegante.form-footer input[type="email"] {
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #fff;
	padding: 1px 0;
	background: transparent;
	color: #ffffff;
}
/* 3. Efecto visual al hacer clic en un campo (focus) */
.mi-formulario-elegante input:focus,
.mi-formulario-elegante textarea:focus {
  border-color: #007BFF;
  box-shadow: 0 0 8px rgba(0,123,255,0.2);
  outline: none; /* Quita el borde feo de Chrome/Safari */
}
/* 4c. Estilo de los textos popup y footer "placeholder" */
.mi-formulario-elegante.popup ::placeholder,.mi-formulario-elegante.form-footer ::placeholder  {
  color: #fff;
  opacity: 1; 
}
/* 4. Estilo de los textos "placeholder" */
.mi-formulario-elegante ::placeholder {
  color: #999;
  opacity: 1; 
}

/* 5. Layout para Nombre y Apellido (lado a lado) */
.mi-formulario-elegante .campo-grupo {
  display: flex;
  flex-wrap: wrap; /* Para móviles */
  justify-content: space-between;
  gap: 15px; /* Espacio entre los campos */
  margin-bottom: 15px;
}

.mi-formulario-elegante .campo-mitad {
  flex-basis: 100%; /* En móvil ocupa 100% */
}

/* En pantallas más grandes, ocupa la mitad */
@media (min-width: 600px) {
  .mi-formulario-elegante .campo-mitad {
    flex-basis: 48%; /* 48% para dejar espacio de 'gap' */
  }
}

/* 6. Espaciado para campos completos y el botón */
.mi-formulario-elegante .campo-completo,
.mi-formulario-elegante .campo-enviar {
  margin-bottom: 15px;
}

.mi-formulario-elegante textarea {
  min-height: 120px; /* Altura mínima para el comentario */
  resize: vertical; /* Permite al usuario agrandarlo verticalmente */
}

/* 7. El botón de Enviar */
.mi-formulario-elegante .btn-enviar {
  width: 100%;
  padding: 16px 20px;
  background-color: #e73144; /* Color de fondo */
  color: white; /* Color de texto */
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.mi-formulario-elegante .btn-enviar:hover {
  background-color: #cc2941; /* Color más oscuro al pasar el mouse */
  transform: translateY(-2px); /* Pequeño salto */
}

.mi-formulario-elegante .campo-enviar p .btn-enviar-left {
	padding-left: 0;
	background-color: #e73144 !important;
	color: white; /* Color de texto */
	border: none;
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s, transform 0.2s;
}
.mi-formulario-elegante .btn-enviar-left:hover {
	background-color: #cc2941; /* Color más oscuro al pasar el mouse */
}

/* 8. Corrección de CF7 (a veces añade <p> no deseados) */
.mi-formulario-elegante p {
  margin: 0;
}

/* 9. Estilos para los mensajes de éxito/error (¡Importante!) */
.mi-formulario-elegante .wpcf7-response-output {
  border-radius: 8px;
  margin: 15px 0 0 0;
  padding: 15px;
  font-size: 15px;
}
.mi-formulario-elegante .wpcf7-not-valid-tip {
  font-size: 13px;
  color: #D9534F; /* Un rojo para errores */
  margin-top: 5px;
}


/* ----------------------------------------------------- */
/* ESTILOS GLOBALES PARA LA CAJA CUSTOM: .caja-custom-persona */
/* ----------------------------------------------------- */

/* 1. CONFIGURACIÓN DEL CONTENEDOR PRINCIPAL */
.caja-custom-persona {
    position: relative; /* Clave para posicionar el footer */
    overflow: hidden; /* Oculta la parte del footer que no se ve */
    height: 300px; /* Asegúrate de que esta altura sea la misma que la del contenedor en Elementor */
    transition: all 0.5s ease;
	cursor: pointer;
}

/* 2. ESTILOS Y POSICIÓN DEL FOOTER EXPANDIBLE (Container Hijo) */
.caja-custom-persona .footer-expandible {
    position: absolute;
    bottom: 0; /* Lo fija en la parte inferior de la imagen */
    width: 100%;
    z-index: 5;
    background-color: #45699b; /* Color azul */
    color: white;
    
    /* ALTURA INICIAL (El 5% visible) */
    height: 70px; 
    
    transition: height 0.6s ease 0.6s; /* Transición para la expansión */
}

/* 3. EFECTO HOVER: Expande el footer */
.caja-custom-persona:hover .footer-expandible {
    height: 100%; /* Expande al 100% de la altura del contenedor principal */
}

/* ----------------------------------------------------- */
/* 4. ESTILOS DEL CONTENIDO DENTRO DEL HTML WIDGET */
/* ----------------------------------------------------- */

/* Estilos para el texto y botón siempre visibles (El 5%) */
.footer-expandible .info-footer-visible {
    padding: 15px;
    display: flex;
    justify-content: flex-start; /* Alinea el contenido al inicio (izquierda) */
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
}

/* Fuerza el bloque de texto a ocupar el espacio restante y apila el texto */
.footer-expandible .info-footer-visible .info-footer-texto {
    flex-grow: 1; /* Ocupa todo el espacio horizontal disponible, empujando el icono */
    display: flex;
    flex-direction: column; /* Apila el título y el cargo verticalmente */
    text-align: left;
}
.footer-expandible h5, .footer-expandible h6 {
	font-family: 'DIN2014', sans-serif;
	font-weight: bold;
	font-size: 0.8em;
    margin: 0;
    line-height: 1.2;
}

/* Estilos de la biografía oculta */
.footer-expandible .info-footer-biografia {
	font-size: 14px;
    padding: 20px;
    opacity: 0; 
    max-height: 0; 
    transition: opacity 0.3s ease 0.2s; 
    overflow: hidden; 
}

/* Muestra la biografía cuando el footer está expandido */
.caja-custom-persona:hover .info-footer-biografia {
    opacity: 1; 
    max-height: 999px; 
}

/* Estilo del botón (icono +) */
.icono-mas {
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.5s ease;
}

/* El icono original '+' que se muestra en el estado inicial con círculo */
.icono-mas::before {
    content: '+'; 
    display: flex; /* Para centrar el '+' dentro del círculo */
    justify-content: center;
    align-items: center;
    width: 25px; /* Ancho del círculo */
    height: 25px; /* Alto del círculo */
	padding-bottom: 5px;
    border: 1px solid white; /* Borde blanco de 2px */
    border-radius: 50%; /* Hace que el borde sea un círculo */
    line-height: 1; /* Asegura que el '+' esté bien centrado verticalmente */
    transition: all 0.5s ease; /* Para que el cambio del círculo sea suave */
}

/* El icono cambia a '-' al expandirse (el círculo permanece) */
.caja-custom-persona:hover .icono-mas::before {
    content: '-'; 
    transform: rotate(0deg); /* Asegura que no rote si no lo quieres */
    background-color: transparent; /* Opcional: si quieres que el círculo se rellene de color en hover */
}