/*  CSS PER FORMULARI DE CONTACTE TIPUS 3D NEUMORPHISM  10/04/2026 */

/* --- CONFIGURACIÓN BASE PARA LILY PAIN ART DESIGN --- */
:root {
  --blanc-color: #fff;
  --bg-color: #f0f0f0;
  /* Gris claro base */
  --shadow-dark: #d1d1d1;
  /* Sombra oscura */
  --shadow-light: #ffffff;
  /* Sombra clara (Luz) */
  --rose-color: #ffdfdf;
  ;
  /*  #ffb6c1;       /* Tu rosa característico */
}

/* Relieve del Jumbotron  12/04/2026 */
.jumbotron {
  position: relative;
  /* Usamos el color de tu práctica que ya te gusta */
  background: #ffeeee !important;
  border-radius: 50px !important;
  padding: 50px !important;
  border: none !important;

  /* LA MAGIA: 4 capas de sombra */
  box-shadow:
    45px 45px 45px -15px rgba(0, 0, 0, 0.15),
    /* Elevación exterior */
    inset 15px 15px 10px rgba(255, 255, 255, 0.75),
    /* Brillo interno superior */
    -15px -15px 35px rgba(255, 255, 255, 0.55),
    /* Luz exterior superior */
    inset -2px -2px 15px rgba(0, 0, 0, 0.15) !important;
  /* Borde de grosor inferior */
  margin-bottom: 50px;
  max-width: 800px;
}

/* --- INPUTS Y TEXTAREA (EFECTO HUNDIDO / INSET) --- */
.form-control {
  width: 100%;
  outline: none !important;

  background-color: var(--blanc-color) !important;
  border: none !important;
  border-radius: 30px !important;
  /* Ovalados */
  padding: 12px 25px !important;
  height: auto !important;
  color: #999 !important;
  /* La magia del hundido */
  box-shadow: inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light) !important;
  font-family: inherit;
  transition: all 0.3s ease !important;
}

/* Efecto Focus al escribir */
.form-control:focus {
  box-shadow: inset 2px 2px 5px var(--shadow-dark),
    inset -2px -2px 5px var(--shadow-light) !important;
  outline: none !important;
}

/* Unificamos el color del placeholder para inputs y textareas */
#contacto-frm input::placeholder,
#contacto-frm textarea::placeholder {
  color: #999 !important;
  /* El color que quieras (usa el rojo aquí para probar) */
  opacity: 1 !important;
  /* Firefox baja la opacidad por defecto, esto lo arregla */
}

/* Para navegadores antiguos o específicos (Safari/Chrome/Edge) */
#contacto-frm input::-webkit-input-placeholder,
#contacto-frm textarea::-webkit-input-placeholder {
  color: #999 !important;
}

/* Si quieres que al escribir el texto real sea distinto */
#contacto-frm input,
#contacto-frm textarea {
  color: #444 !important;
  /* Color del texto cuando el usuario ya ha escrito */
}



/* --- EL CHECKBOX (EL CÍRCULO) --- */
input[type="checkbox"] {

  /* 1. Eliminamos el aspecto de sistema (Imprescindible) */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* 2. Forzamos dimensiones para que no midan 0px */
  width: 22px !important;
  height: 22px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  background-color: var(--bg-color);
  border-radius: 50% !important;
  /* Circulares */
  border: none !important;
  vertical-align: middle !important;
  /*margin-right: 10px !important;
    margin-top: 4px !important;  /* Altura Círculos Checkbox */
  margin: 4px 15px, 0, 0 !important;
  box-shadow: inset 3px 3px 6px var(--shadow-dark),
    inset -3px -3px 6px var(--shadow-light);
  /* position: relative;  */
  flex-shrink: 0;
  /* EVITA QUE EL TEXTO LO APLASTE */
}

input[type="checkbox"]:checked {
  box-shadow: 2px 2px 5px var(--shadow-dark),
    -2px -2px 5px var(--shadow-light);
}

/* --- EL PUNTO ROSA --- */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-color: var(--rose-color);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 182, 193, 0.5);
  /* Un pequeño brillo rosa */
}

/* 6. Efecto al pasar el ratón (opcional pero pro) */
input[type="checkbox"]:hover {
  box-shadow: inset 2px 2px 4px #c1c1c1,
    inset -2px -2px 4px #ffffff !important;
}


/* 5. El estado "Marcado" (Aparece el punto rosa) */
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  /* Tamaño del punto central */
  height: 12px;
  background-color: #ffb6c1 !important;
  /* Tu rosa corporativo */
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 182, 193, 0.5);
  /* Un pequeño brillo rosa */
}

/* 6. Efecto al pasar el ratón (opcional pero pro) */
input[type="checkbox"]:hover {
  box-shadow: inset 2px 2px 4px #c1c1c1,
    inset -2px -2px 4px #ffffff !important;
}

/* --- EL TEXTO (COLUMNA DERECHA) --- */
#checkbox01,
#checkbox02 {

  /* El "truco": un margen superior de 4-5px centra el texto 
       visualmente con el círculo si el texto es pequeño */
  margin: 6px 15px 6px 10px !important;
  line-height: 1.4 !important;
  /* Espaciado cómodo entre líneas */
  color: #666 !important;
  font-size: 0.9rem !important;
  text-align: left !important;
  /* Asegura que el texto largo no se centre */

}

/* Ajuste opcional: Si en móviles muy pequeños no caben, 
   podemos permitir que se apilen solo en pantallas diminutas 
@media (max-width: 400px) {
    .botones-group {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
    } 
} */


/*  ***********************************************************/
/*  ***********    MODAL DEL FORMULARI  **********************   */
/* CSS per el formulari de contacte by Gemini PRO - 04/04/2026  */

/* Amagar el camp de seguretat  */
.visual-hidden-field {
  /* 1. Lo sacamos del flujo visual */
  position: absolute !important;

  /* 2. Lo hacemos diminuto */
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;

  /* 3. Lo mandamos lejos y lo hacemos invisible */
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Modal de Contacto Profesional */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  /* Oscurece el fondo de la web */
  display: none;
  /* Se activa con JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(3px);
  /* Efecto moderno de desenfoque */
}

/* El contenedor principal con relieve profundo */
.modal-content-custom {
  position: relative;
  background-color: #ffeeee;
  /* Tu color base */
  border-radius: 25px;
  /* Bordes definidos pero suaves */
  padding: 60px;
  max-width: 500px;
  width: 90%;
  text-align: center;

  /* LA MAGIA: 4 capas de sombra de Online mTutorials  13/04/2026  */
  box-shadow:
    45px 45px 45px -15px rgba(0, 0, 0, 0.15),
    /* Elevación exterior */
    inset 15px 15px 10px rgba(255, 255, 255, 0.75),
    /* Brillo interno superior */
    -15px -15px 35px rgba(255, 255, 255, 0.55),
    /* Luz exterior superior */
    inset -2px -2px 15px rgba(0, 0, 0, 0.15) !important;

  /* Animación de entrada para resaltar el volumen */
  animation: zoomInRelief 0.4s ease-out;
}

@keyframes zoomInRelief {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* El título del modal con un toque elegante */
/* Ajuste sutil para el título */
#modalTitle {
  color: #444444;
  font-size: 1.9rem;
  font-weight: bold;
  margin-bottom: 25px;
  /* Un toque de relieve en el texto también */
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 1), 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.modal-content-custom h3 {
  color: #444444;
  margin-bottom: 15px;
}

.modal-content-custom p {
  color: #666666;
  margin-bottom: 25px;
}

/* El botón de cierre con estilo de botón físico */
.btn-modal-close {
  margin-top: 30px;
  padding: 10px 40px;
  border: 2px solid #ffb6c1;
  /* Borde oscuro definido */
  outline: none;
  color: #444;
  /* Texto en tu color suave */
  font-weight: bold;
  font-size: 0.9rem;
  letter-spacing: 1px;
  background: #ffb6c1;
  /* Fondo oscuro */
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;

  /* EFECTO 3D INICIAL DEL BOTÓN (SUPERPOSICIÓN) */
  box-shadow:
    /* Sombra externa inferior dura */
    0px 6px 0px #d39ca4,
    /* #2a2a2a,  */
    /* Sombra externa inferior suave (lejanía) */
    0px 8px 15px rgba(204, 143, 143, 0.3),
    /* Brillo superior interno sutil */
    inset 0px 2px 3px rgba(255, 255, 255, 0.3);
}

/* Al pasar el ratón: El botón parece hundirse ligeramente */
/* Estado :hover - El botón reacciona */
.btn-modal-close:hover {
  background-color: #ebbbbb;
  transform: translateY(2px);
  /* Se hunde ligeramente */
  box-shadow:
    /* Reducimos la sombra dura inferior */
    0px 4px 0px #ffaaaa,
    0px 6px 10px rgba(0, 0, 0, 0.2),
    inset 0px 2px 3px rgba(255, 255, 255, 0.2);
}

/* Estado :active - El efecto de pulsado total */
.btn-modal-close:active {
  transform: translateY(6px);
  /* Se hunde hasta la base */
  box-shadow:
    /* Desaparece la sombra dura inferior (está "tocando fondo") */
    0px 0px 0px #2a2a2a,
    /* Mantenemos una sombra suave muy pequeña */
    0px 2px 5px rgba(0, 0, 0, 0.2),
    /* Aumentamos la sombra interna (efecto hundido) */
    inset 0px 4px 8px rgba(0, 0, 0, 0.5);
}