/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =================================================================== */
/* CARGA DE FUENTE PERSONALIZADA: SENTIENT */
/* =================================================================== */

/* --- Sentient Regular (Peso 400) --- */
@font-face {
  font-family: 'Sentient'; /* Usamos un solo nombre de familia */
  src: url('./fonts/Sentient-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Sentient Italic (Peso 400, Cursiva) --- */
@font-face {
  font-family: 'Sentient';
  src: url('./fonts/Sentient-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --- Sentient Medium (Peso 500) --- */
@font-face {
  font-family: 'Sentient';
  src: url('./fonts/Sentient-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Sentient Bold (Peso 700) --- */
@font-face {
  font-family: 'Sentient';
  src: url('./fonts/Sentient-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Sentient Light (Peso 300) --- */
@font-face {
  font-family: 'Sentient';
  src: url('./fonts/Sentient-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --- Sentient Extralight (Peso 200) --- */
@font-face {
  font-family: 'Sentient';
  src: url('./fonts/Sentient-Extralight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* =================================================================
   ESTRUCTURA DEL POPUP CON SCROLL EXTERNO (VERSIÓN OPTIMIZADA)
   ================================================================= */

/* --- Contenedor Principal (AHORA CON SCROLL) --- */
body #myne-popup.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    overflow-y: auto; /* Habilita el scroll en este contenedor principal */
    padding: 5vh 20px; /* Espacio vertical (5% de la altura de la pantalla) y horizontal */
    text-align: center; /* Truco para centrar el popup */
    display: none !important;
}

body #myne-popup.popup-container.visible {
    display: block !important;
}

/* --- Fondo Oscuro (Overlay) --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

/* --- Contenido del Popup (la caja blanca) --- */
.popup-content {
    display: inline-block; /* Necesario para que el centrado con text-align funcione */
    vertical-align: middle;
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 5px 30px rgba(0,0,0,0.25);
    max-width: 500px;
    width: 100%;
    z-index: 1001;
    text-align: left; /* Reseteamos el alineado para el contenido del formulario */
    border-radius: 12px;
    padding: 30px 30px;
}

/* --- Botón de Cerrar --- */
.popup-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 5px;
}
.popup-close-btn:hover {
    color: #333;
}


/* =================================================================
   ESTILOS OPTIMIZADOS DEL FORMULARIO
   ================================================================= */

/* --- Textos Generales del Popup --- */
.popup-content h3 { margin-top: 0; margin-bottom: 8px; font-size: 24px; }
.popup-content p { margin-top: 0; margin-bottom: 25px; font-size: 16px; color: #666; }

/* --- Contenedor de cada campo del formulario --- */
.form-group { 
    margin-bottom: 20px; 
}

/* --- Etiquetas de los campos (azules) --- */
.popup-content .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #003366; 
}

/* --- Estilo ÚNICO y CONSOLIDADO para los campos de texto --- */
.popup-content .form-group input,
.popup-content .form-group textarea {
    width: 100%;
    background-color: #f5f5f5; /* Fondo gris claro */
    border: 1px solid #003366;  /* Borde azul oscuro */
    border-radius: 8px;
    color: #000000;             /* Texto del usuario en negro */
    font-size: 16px;
    padding: 15px;
    transition: all 0.3s ease;
}

/* --- Estilo para el texto de ejemplo (placeholder) --- */
.popup-content .form-group input::placeholder,
.popup-content .form-group textarea::placeholder {
    color: #9E9E9E;
    opacity: 1;
}

/* --- Estilo al hacer clic en un campo (focus) --- */
.popup-content .form-group input:focus,
.popup-content .form-group textarea:focus {
    outline: none;
    border-color: #0055a4; /* Azul más brillante al seleccionar */
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.2);
    color: #000000; /* Aseguramos que el texto siga siendo negro */
}

/* --- Botón de Enviar --- */
.popup-content #myne-contact-form .boton-enviar { 
    width: 100%; 
    padding: 15px; 
    background-color: #003366; 
    color: white; 
    border: none; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background-color 0.3s;
    border-radius: 8px; /* Tu redondeo de 8px */
}
.popup-content #myne-contact-form .boton-enviar:hover { 
    background-color: #005bb5;
}


/* =================================================================
   ESTILOS PARA MENSAJES DE ÉXITO/ERROR
   ================================================================= */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
}
.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* =================================================================
   ESTILOS DE SCROLLBAR (APLICADOS AL CONTENEDOR PRINCIPAL)
   ================================================================= */
/* --- Para WebKit (Chrome, Safari, Edge) --- */
.popup-container::-webkit-scrollbar {
    width: 8px; 
}
.popup-container::-webkit-scrollbar-track {
    background: transparent; 
}
.popup-container::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 10px;
}
.popup-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- Para Firefox --- */
.popup-container {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent; 
}


/* =================================================================
   AJUSTES RESPONSIVOS PARA MÓVILES (HASTA 768px)
   ================================================================= */
@media (max-width: 768px) {
    body #myne-popup.popup-container {
        padding: 0; /* Quitamos el padding para que el popup ocupe todo */
    }

    .popup-content {
        width: 100%;
        height: 100%; 
        max-width: none;
        border-radius: 0; /* Ya no necesita overflow-y: auto aquí, el padre lo controla */
		overflow-y: auto; /* <-- LA LÍNEA CLAVE: Habilita el scroll interno si es necesario */
    	padding: 40px 25px; /* Ajustamos el padding para que sea consistente */
    }
}

/* =================================================================
   ESTILOS PARA EL CAMPO DESPLEGABLE (SELECT)
   ================================================================= */
.popup-content .form-group select {
    width: 100%;
    background-color: #f5f5f5;
    border: 1px solid #003366;
    border-radius: 8px;
    color: #000000;
    font-size: 14px;
    padding: 15px;
	line-height: normal;
    -webkit-appearance: none; /* Quita la flecha por defecto en WebKit */
    -moz-appearance: none;    /* Quita la flecha por defecto en Firefox */
    appearance: none;         /* Quita la flecha por defecto estándar */
    /* Añadimos nuestra propia flecha con CSS */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23003366%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 20px;
}

.popup-content .form-group select:focus {
    outline: none;
    border-color: #0055a4;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.2);
}

/* =================================================================
   BURBUJA DE CONTACTO FLOTANTE
   ================================================================= */

/* --- 1. Estilo y Posición de la Burbuja --- */
#myne-contact-bubble {
    position: fixed; /* Fija en la pantalla */
    bottom: 25px;    /* Distancia desde abajo */
    right: 25px;     /* Distancia desde la derecha */
    z-index: 999;    /* Se asegura de que esté sobre la mayoría de los elementos */
    
    /* Diseño de la burbuja */
    background-color: #EFB810; /* Tu color azul oscuro */
    color: #003366;            /* Color para el icono y el texto */
    width: 60px;               /* Ancho inicial */
    height: 60px;              /* Altura inicial */
    border-radius: 50%;        /* ¡La clave para que sea redonda! */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	border: 1.5px solid #003366;
    
    /* Centrado del contenido (el icono) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transiciones para la animación de expansión */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    
    /* Aplicamos la animación de rebote */
    animation: myne-bubble-bounce 2s ease-in-out infinite;
    
    cursor: pointer;
    text-decoration: none; /* Quitamos el subrayado del enlace */
}

/* --- 2. Estilo del Icono SVG --- */
#myne-contact-bubble svg {
    fill: currentColor; /* El icono toma el 'color' del padre (blanco) */
    transition: all 0.3s ease;
}

/* --- 3. Estilo del Texto "Contactar" (inicialmente oculto) --- */
#myne-contact-bubble span {
    /* Ocultamos el texto de forma animable */
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
    
    font-weight: 600;
    font-size: 16px;
    margin-left: 0; /* Sin margen inicial */
    transition: all 0.3s ease;
}


/* --- 4. Efecto al Pasar el Puntero (Hover) --- */
#myne-contact-bubble:hover {
    width: 170px; /* Ancho expandido para que quepa el texto */
    border-radius: 30px; /* Reducimos el redondeo para forma de "píldora" */
    animation-play-state: paused; /* Pausamos la animación de rebote */
}

/* Hacemos visible el texto al hacer hover */
#myne-contact-bubble:hover span {
    max-width: 100px; /* Le damos espacio para aparecer */
    opacity: 1;
    margin-left: 10px; /* Creamos un espacio entre el icono y el texto */
}


/* --- 5. Definición de la Animación de Rebote --- */
@keyframes myne-bubble-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* Sube 8 píxeles */
    }
}

/* =================================================================== */
/* ESTILOS PARA TÍTULO "MI HISTORIA" CON JERARQUÍA */
/* =================================================================== */

/* Estilo base para todo el título */
.page-id-12 .titulo-mi-historia h2 {
  font-family: 'Sentient', sans-serif;
}

/* Estilo para "Mi Historia" */
.page-id-12 .titulo-mi-historia .linea-principal {
  display: block; /* Asegura que ocupe su propia línea */
  font-weight: 700; /* Negrita */
  font-size: 70px;  /* Tamaño grande (ajusta si es necesario) */
}

/* Estilo para "por Jaime Reyes" */
.page-id-12 .titulo-mi-historia .linea-secundaria {
  display: block; /* Asegura que ocupe su propia línea */
  font-weight: 400; /* Peso normal (sin negrita) */
  font-size: 33px;  /* Tamaño más pequeño (ajusta si es necesario) */
  margin-top: 8px;  /* Pequeño espacio entre las líneas */
}