/* =================================================================
 STYLE.CSS REESTRUCTURADO Y MEJORADO (V5 - VERSIÓN FINAL COMPLETA)
 ================================================================= */

/* -----------------------------------------------------------------
 1. VARIABLES GLOBALES (ROOT)
 ----------------------------------------------------------------- */
:root {
 /* Paleta de Colores */
 --color-primary: #4D90FE;
 --color-primary-hover: #63a0ff;
 --color-text-main: #E0E0E0;
 --color-text-headings: #FFFFFF;
 --color-text-muted: #999;
 --color-background-dark1: #100211;
 --color-background-dark2: #06010A;
 --color-surface-1: #141314;
 --color-surface-2: #1a1a1c;
 --color-surface-3: #2a2a35;
 --color-border: rgba(255, 255, 255, 0.1);
 --color-border-strong: rgba(255, 255, 255, 0.3);
 --color-error: #e74c3c;
 --color-success: #2ecc71;

 /* Tipografía */
 --font-main: 'Inter', sans-serif;

 /* Layout */
 --header-height: 70px;
 --max-width-container: 1100px;
 --border-radius-sm: 5px;
 --border-radius-md: 8px;
 --border-radius-lg: 25px;

 /* Transiciones */
 --transition-speed: 0.3s ease;
}

/* -----------------------------------------------------------------
 2. RESET Y ESTILOS GLOBALES
 ----------------------------------------------------------------- */
*, *::before, *::after {
 box-sizing: border-box;
}

html {
 height: 100%;
}

body {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 margin: 0;
 padding-top: var(--header-height);
 font-family: var(--font-main);
 background: linear-gradient(to top right, var(--color-background-dark1), var(--color-background-dark2));
 background-attachment: fixed;
 color: var(--color-text-main);
 position: relative;
 overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, header nav a {
 font-family: var(--font-main);
 color: var(--color-text-headings);
}

/* Mejora de Accesibilidad: Estilos de foco visibles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
 outline: 2px solid var(--color-primary);
 outline-offset: 2px;
}

/* -----------------------------------------------------------------
 3. HEADER Y NAVEGACIÓN
 ----------------------------------------------------------------- */
header {
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 z-index: 1000;
 background-color: rgba(0, 0, 0, 0.5);
 backdrop-filter: blur(5px);
 height: var(--header-height);
 display: flex;
 align-items: center;
}

.header-container {
 max-width: var(--max-width-container);
 width: 100%;
 margin: 0 auto;
 padding: 0 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.logo-container {
 flex-shrink: 0;
}

.logo-container img {
 height: 45px;
 width: auto;
 display: block;
}

header nav {
 margin-left: auto;
}

header nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: flex;
 align-items: center;
 gap: 35px;
 justify-content: flex-end;
}

header nav a {
 color: var(--color-text-headings);
 text-decoration: none;
 font-weight: 700;
 font-size: 14px;
 letter-spacing: 0.5px;
 text-transform: uppercase;
 transition: color var(--transition-speed);
}

header nav a:hover {
 color: var(--color-primary);
}

header nav a.activo {
 color: var(--color-primary);
 font-weight: 900;
}

.menu-hamburguesa {
 display: none;
 background: none;
 border: none;
 color: var(--color-text-headings);
 font-size: 28px;
 cursor: pointer;
 z-index: 1001;
}

/* -----------------------------------------------------------------
 4. ELEMENTOS DE FONDO Y OVERLAYS
 ----------------------------------------------------------------- */
#particles-js {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: -1;
}
body::after {
 content: "";
 background-image: url('/assets/img/granito.png');
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0.3;
 pointer-events: none;
 z-index: -1;
}

/* -----------------------------------------------------------------
 5. LAYOUT Y SECCIONES PRINCIPALES
 ----------------------------------------------------------------- */
main, .hero-section {
  flex: 1 0 auto;
}

.hero-section {
 display: grid;
 place-content: center;
 text-align: center;
 padding: 20px;
 position: relative;
 width: 100%;
}

.hero-overlay {
 position: relative;
 z-index: 5;
 color: var(--color-text-headings);
}
.hero-text h1 {
 font-weight: 900;
 font-size: clamp(2.4rem, 8vw, 4.8rem);
 text-transform: uppercase;
 letter-spacing: 3px;
 margin: 0;
 word-break: break-word;
}
.hero-text p {
 font-size: 1.2rem;
 max-width: 600px;
 margin: 20px auto 0 auto;
 color: var(--color-text-headings);
}
.share-button {
 background-color: transparent;
 border: 2px solid var(--color-text-headings);
 color: var(--color-text-headings);
 border-radius: var(--border-radius-sm);
 padding: 12px 28px;
 font-size: 14px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 cursor: pointer;
 transition: all var(--transition-speed);
 margin-top: 30px;
}
.share-button:hover {
 background-color: var(--color-text-headings);
 color: #120d1c;
}

main {
 padding-bottom: 80px;
 position: relative;
 z-index: 5;
}

body.home main {
 display: none;
}

main > section.content-box {
 max-width: var(--max-width-container);
 margin: 40px auto;
 padding: 60px 80px;
 background-color: #141314ee;
 border-radius: var(--border-radius-lg);
 border: 1px solid #1d1c1f;
}

main > section.content-box h1 {
 font-size: 2.8rem;
 border-bottom: 2px solid rgba(255, 255, 255, 0.5);
 padding-bottom: 20px;
 margin-top: 0;
 margin-bottom: 40px;
 word-break: break-word;
}
main > section.content-box h2 {
 font-size: 2rem;
 color: #F1F1F1;
 margin-top: 60px;
 margin-bottom: 30px;
 word-break: break-word;
}

main > section.content-box p {
 line-height: 1.8;
 font-size: 1.15rem;
 margin-bottom: 30px;
 text-align: justify;
}

main > section.content-box .lead,
main > section.content-box .enfoque-description {
 text-align: left;
}

main > section.content-box ul {
 list-style: none;
 padding-left: 0;
 font-size: 1.15rem;
 line-height: 1.8;
 margin-bottom: 30px;
}
main > section.content-box ul li {
 margin-bottom: 25px;
 display: flex;
 align-items: flex-start;
 gap: 15px;
}
main > section.content-box ul li strong {
 font-weight: 700;
 color: #F1F1F1;
}
main > section.content-box ul li::before {
 content: '\f00c';
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
 color: #F1F1F1;
 font-size: 1.1rem;
 flex-shrink: 0;
}

/* -----------------------------------------------------------------
 6. FORMULARIOS
 ----------------------------------------------------------------- */
.contact-form { margin: 40px 0; }
.contact-form label { display: block; margin-bottom: 8px; color: #F1F1F1; font-weight: 700; }
.contact-form input,
.contact-form select,
.contact-form textarea {
 width: 100%;
 padding: 15px;
 margin-bottom: 20px;
 background-color: var(--color-surface-3);
 color: #f0f0f0;
 border: 1px solid var(--color-border-strong);
 border-radius: var(--border-radius-sm);
 font-size: 1rem;
}
.contact-form select {
 appearance: none;
 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
 background-repeat: no-repeat;
 background-position: right 15px center;
 background-size: 1em;
}
.contact-form select option { background-color: var(--color-surface-3); color: #f0f0f0; }
.contact-form ::placeholder { color: var(--color-text-muted); }

.submit-button {
 width: 100%;
 display: block;
 background-color: var(--color-text-headings);
 color: #131316;
 border: 2px solid var(--color-text-headings);
 border-radius: var(--border-radius-sm);
 padding: 15px;
 font-size: 16px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 cursor: pointer;
 transition: all var(--transition-speed);
}
.submit-button:hover {
 background-color: transparent;
 color: var(--color-primary);
 border-color: var(--color-primary);
}

.textarea-container {
 position: relative;
 margin-bottom: 20px;
}
.textarea-container textarea {
 width: 100%;
 margin-bottom: 0;
}
#contador-caracteres {
 position: absolute;
 bottom: 10px;
 right: 15px;
 font-size: 14px;
 color: var(--color-text-muted);
 background-color: var(--color-surface-3);
 padding: 2px 5px;
 border-radius: 3px;
 pointer-events: none;
}

/* -----------------------------------------------------------------
 7. MODALES
 ----------------------------------------------------------------- */
.modal {
 display: none;
 position: fixed;
 z-index: 2000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 background-color: rgba(0, 0, 0, 0.85);
 justify-content: center;
 align-items: center;
}
.modal-content {
 background-color: var(--color-surface-1);
 color: #f1f1f1;
 margin: auto;
 padding: 20px 30px;
 border: 1px solid #3c4043;
 width: 80%;
 max-width: 700px;
 border-radius: 10px;
 position: relative;
 max-height: 85vh;
 display: flex;
 flex-direction: column;
}
.modal-content h2 {
 margin-top: 0;
 border-bottom: 1px solid #3c4043;
 padding-bottom: 10px;
 font-weight: 700;
}
.modal-text {
 overflow-y: auto;
 line-height: 1.6;
 text-align: justify;
}
.close-button {
 color: #9aa0a6;
 position: absolute;
 top: 10px;
 right: 20px;
 font-size: 28px;
 font-weight: bold;
}
.close-button:hover, .close-button:focus {
 color: #f1f1f1;
 text-decoration: none;
 cursor: pointer;
}

/* -----------------------------------------------------------------
 8. GRIDS DE CONTENIDO (VIDEOS, ANÁLISIS)
 ----------------------------------------------------------------- */
.video-controls {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 20px;
 margin-top: 20px;
 margin-bottom: 40px;
 border-bottom: 1px solid var(--color-border);
 padding-bottom: 30px;
}
.filtros { display: flex; flex-wrap: wrap; gap: 10px; }
.filtro-btn { background-color: transparent; border: 1px solid var(--color-border-strong); color: #cccccc; padding: 10px 20px; border-radius: var(--border-radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; transition: all var(--transition-speed); }
.filtro-btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: var(--color-primary); color: var(--color-primary); }
.filtro-btn.activo { background-color: var(--color-primary); color: var(--color-text-headings); border-color: var(--color-primary); }
.search-bar input[type="search"] { width: 300px; padding: 12px 15px; background-color: var(--color-surface-3); color: #f0f0f0; border: 1px solid var(--color-border-strong); border-radius: var(--border-radius-sm); font-size: 1rem; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); }
.search-bar input[type="search"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 10px rgba(77, 144, 254, 0.2); }

.video-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 gap: 30px;
 margin-top: 40px;
}

.video-card {
 background-color: rgba(23, 17, 31, 0.5);
 border-radius: var(--border-radius-md);
 overflow: hidden;
 transition: transform var(--transition-speed), box-shadow var(--transition-speed), border-color var(--transition-speed);
 text-decoration: none;
 color: inherit;
 border: 1px solid var(--color-border);
 display: flex;
 flex-direction: column;
}

.video-card:hover {
 transform: translateY(-8px);
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
 border-color: var(--color-primary);
}

.video-thumbnail {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
 background-size: cover;
 background-position: center;
 background-color: var(--color-surface-3);
 flex-shrink: 0;
}

.video-thumbnail::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
 opacity: 0.8;
}

.video-thumbnail .play-icon {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%) scale(0.8);
 z-index: 2;
 font-size: 50px;
 color: rgba(255, 255, 255, 0.8);
 opacity: 0;
 transition: opacity var(--transition-speed), transform var(--transition-speed);
 text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

.video-card:hover .play-icon {
 opacity: 1;
 transform: translate(-50%, -50%) scale(1);
}

.video-info {
 padding: 20px;
 flex-grow: 1;
 display: flex;
 flex-direction: column;
  justify-content: space-between; /* --- CORRECCIÓN --- Se añade esta línea para distribuir el espacio */
}

.video-info > p {
 text-align: left;
 margin-bottom: 0; /* --- CORRECCIÓN --- Se cambia de 20px a 0 para evitar espacio extra */
 font-size: 1rem;
 line-height: 1.6;
}

.card-footer-group {
 /* margin-top: auto; */ /* --- CORRECCIÓN --- Se elimina esta línea que ya no es necesaria */
 padding-top: 15px;
 border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.video-info .category-tag {
 display: inline-block;
 background-color: rgba(77, 144, 254, 0.2);
 color: var(--color-primary);
 padding: 4px 10px;
 border-radius: 4px;
 font-size: 0.8rem;
 font-weight: 700;
 margin-right: 5px;
 margin-bottom: 5px;
}

.paginacion {
 text-align: center;
 margin-top: 50px;
 padding-top: 30px;
 border-top: 1px solid var(--color-border);
}
.paginacion button {
 background-color: var(--color-surface-3);
 border: 1px solid var(--color-border-strong);
 color: #cccccc;
 margin: 0 5px;
 padding: 10px 15px;
 min-width: 40px;
 border-radius: var(--border-radius-sm);
 cursor: pointer;
 transition: all var(--transition-speed);
 font-weight: 700;
}
.paginacion button:hover {
 background-color: var(--color-primary);
 color: var(--color-text-headings);
 border-color: var(--color-primary);
}
.paginacion button.activo {
 background-color: var(--color-text-headings);
 color: var(--color-background-dark1);
 border-color: var(--color-text-headings);
 cursor: default;
}
.paginacion button:disabled {
 opacity: 0.4;
 cursor: not-allowed;
 background-color: var(--color-surface-3);
 color: #cccccc;
 border-color: var(--color-border-strong);
}

.loading-message {
 text-align: center;
 font-size: 1.2rem;
 padding: 50px;
 color: var(--color-text-muted);
}

/* -----------------------------------------------------------------
 9. PANEL DE ADMINISTRACIÓN
 ----------------------------------------------------------------- */
.admin-tabs { display: flex; border-bottom: 2px solid rgba(255, 255, 255, 0.2); margin-bottom: 30px; }
.tab-btn { background-color: transparent; border: none; padding: 15px 25px; color: #ccc; font-size: 1rem; font-weight: 700; cursor: pointer; transition: color var(--transition-speed), border-bottom-color var(--transition-speed); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.activo { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.activo { display: block; }
.admin-post-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); margin-bottom: 10px; }
.admin-post-item:nth-child(odd) { background-color: rgba(255, 255, 255, 0.03); }
.admin-post-item p { margin: 0; font-weight: bold; color: #F1F1F1; }
.admin-post-actions button { margin-left: 10px; padding: 8px 15px; font-size: 14px; border-radius: var(--border-radius-sm); border: 1px solid; cursor: pointer; }
.btn-editar { background-color: #3498db; border-color: #3498db; color: #fff; }
.btn-eliminar { background-color: var(--color-error); border-color: var(--color-error); color: #fff; }

.category-checkboxes, .post-category-checkboxes {
 max-height: 200px;
 overflow-y: auto;
 border: 1px solid var(--color-border-strong);
 padding: 15px;
 border-radius: var(--border-radius-sm);
 margin-bottom: 20px;
 background-color: var(--color-surface-3);
}
.checkbox-item { display: flex; align-items: center; margin-bottom: 10px; }
.checkbox-item input[type="checkbox"] { width: auto; margin-right: 10px; margin-bottom: 0; }
.checkbox-item label { margin-bottom: 0; font-weight: normal; cursor: pointer; }

/* -----------------------------------------------------------------
 10. CONTENIDO DE POSTS
 ----------------------------------------------------------------- */
.video-responsive-container {
 position: relative;
 overflow: hidden;
 width: 100%;
 padding-top: 56.25%;
 margin: 40px 0;
}
.video-responsive-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
}
.post-full-content h2,
.post-full-content h3,
.post-full-content h4 {
 color: #F1F1F1;
 margin-top: 40px;
 margin-bottom: 20px;
}
.post-full-content ul, .post-full-content ol {
 padding-left: 30px;
 margin-bottom: 30px;
}
.post-full-content li {
 margin-bottom: 15px;
 line-height: 1.8;
}
.post-full-content blockquote {
 border-left: 4px solid #444;
 padding-left: 20px;
 margin-left: 0;
 margin-right: 0;
 font-style: italic;
 color: #aaa;
}

.post-full-content .table-container {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 border: 1px solid #3a3a3c;
 border-radius: var(--border-radius-md);
 margin: 40px 0;
}

.post-full-content table {
 width: 100%;
 border-collapse: collapse;
 background-color: var(--color-surface-2);
 font-size: 1rem;
 table-layout: fixed;
}

.post-full-content th,
.post-full-content td {
 padding: 15px 20px;
 text-align: left;
 border-bottom: 1px solid #2c2c2e;
 word-break: break-word;
 vertical-align: middle;
 min-width: 100px;
}

.post-full-content thead th {
 background-color: var(--color-surface-3);
 color: var(--color-primary);
 font-weight: 700;
 font-size: 1.1rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 white-space: nowrap;
}

.post-full-content tbody tr:hover {
 background-color: #2a2a2d;
}

.post-full-content tbody td:first-child {
 font-weight: 600;
 color: #F1F1F1;
 min-width: 250px;
}

.post-full-content tbody tr:last-child td {
 border-bottom: none;
}

#content-modal .modal-content {
 max-width: 900px;
 width: 90%;
 padding: 10px;
 background-color: #000;
}
.video-popup-container {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
 background-color: #000;
}
.video-popup-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: none;
}

/* -----------------------------------------------------------------
 11. FOOTER
 ----------------------------------------------------------------- */
footer {
 position: relative;
 width: 100%;
 background-color: #121212;
 border-top: 1px solid var(--color-border);
 color: #ccc;
 z-index: 5;
}

footer .footer-container {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 20px;
 padding: 25px 40px 10px 40px;
 max-width: 1300px;
 margin: 0 auto;
}

.footer-left { flex: 1; text-align: left; }
.footer-left .social-icons { display: flex; gap: 20px; margin-bottom: 15px; justify-content: flex-start; }
.footer-left .social-icons a { color: #ccc; font-size: 1.8rem; transition: color var(--transition-speed); margin: 0; }
.footer-left .social-icons a:hover { color: var(--color-primary); }
.footer-left p { margin: 0; font-size: 1.0rem; color: #888; transition: color var(--transition-speed); }
.footer-left p:hover { color: var(--color-primary); }

.footer-center { flex: 2; display: flex; justify-content: center; }
.newsletter-footer { width: 100%; max-width: 450px; text-align: center; }
.newsletter-footer h4 { margin: 0 0 5px 0; font-size: 1.2rem; color: var(--color-text-headings); }
.newsletter-footer p { margin: 0 0 15px 0; font-size: 0.9rem; color: #ccc; text-align: center; }
.newsletter-footer .newsletter-input-group { display: flex; }
.newsletter-footer input[type="email"] { flex-grow: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-right: none; border-radius: 5px 0 0 5px; background: rgba(255, 255, 255, 0.05); padding: 12px 15px; color: #fff; font-size: 1rem; }
.newsletter-footer button[type="submit"] { border: 1px solid var(--color-primary); background-color: var(--color-primary); color: #fff; padding: 12px 18px; cursor: pointer; border-radius: 0 5px 5px 0; }
.footer-newsletter-message { margin-top: 10px; min-height: 18px; font-size: 0.85rem; }
.footer-newsletter-message.error { color: var(--color-error); }
.footer-newsletter-message.success { color: var(--color-success); }


.footer-right { flex: 1; text-align: right; }
.legal-links a { display: block; color: #888; font-size: 1.0rem; text-decoration: none; transition: color var(--transition-speed); margin: 0 0 8px 0; }
.legal-links a:hover { color: var(--color-primary); }

/* -----------------------------------------------------------------
 12. ESTILOS ADICIONALES Y ESPECÍFICOS
 ----------------------------------------------------------------- */
.video-info .tags-container {
 margin-bottom: 15px;
}

.ver-analisis-btn-container {
 text-align: center;
}

.ver-analisis-btn {
 display: inline-block;
 background-color: #8ab4f8;
 color: #131316;
 padding: 10px 25px;
 border-radius: var(--border-radius-sm);
 font-weight: 700;
 text-transform: uppercase;
 font-size: 14px;
 letter-spacing: 0.5px;
 transition: all var(--transition-speed);
}

.video-card:hover .ver-analisis-btn {
 background-color: var(--color-text-headings);
 color: #000;
}

.video-info h3 {
 color: var(--color-primary);
 line-height: 1.4;
 font-size: 1.1rem;
 margin: 0 0 10px 0;
 padding: 0;
}

.tiempo-lectura-label {
 color: var(--color-primary);
 font-weight: bold;
}

.tiempo-lectura {
 font-size: 0.8em;
 margin-bottom: 15px;
}

.share-box-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 20px;
 background-color: rgba(77, 144, 254, 0.1);
 border: 1px solid rgba(77, 144, 254, 0.3);
 padding: 20px 25px;
 border-radius: var(--border-radius-md);
 margin-bottom: 40px;
}

.share-box-text {
 margin: 0;
 font-size: 1.05rem;
 color: var(--color-text-main);
 line-height: 1.6;
 flex-grow: 1;
}

.share-button-post {
 background-color: var(--color-primary);
 color: var(--color-text-headings);
 border: 1px solid var(--color-primary);
 border-radius: var(--border-radius-sm);
 padding: 12px 28px;
 font-size: 14px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 cursor: pointer;
 transition: all var(--transition-speed);
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

.share-button-post:hover {
 background-color: var(--color-primary-hover);
 border-color: var(--color-primary-hover);
 transform: translateY(-2px);
 box-shadow: 0 4px 15px rgba(77, 144, 254, 0.2);
}

/* -----------------------------------------------------------------
 13. MEDIA QUERIES
 ----------------------------------------------------------------- */
@media (max-width: 860px) {

 .header-container {
  padding: 0 20px;
 }

 .menu-hamburguesa {
  display: block;
 }

 header nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(7, 7, 7, 0.9);
  backdrop-filter: blur(5px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  z-index: 1000;
 }

 header nav.menu-abierto {
  display: flex;
 }

 header nav ul {
  flex-direction: column;
  text-align: center;
  gap: 0;
 }

 header nav li {
  margin: 20px 0;
 }

 header nav a {
  font-size: 24px;
 }

 main > section.content-box {
  padding: 40px 20px;
  margin: 20px auto;
 }

 .post-full-content th,
 .post-full-content td {
  padding: 12px 10px;
  min-width: 80px;
 }
 .post-full-content thead th {
  font-size: 0.9rem;
 }
 .post-full-content tbody td:first-child {
   min-width: 180px;
 }

 .video-grid {
  grid-template-columns: 1fr;
 }

 .video-controls {
  flex-direction: column;
  align-items: stretch;
 }

 .search-bar {
  width: 100%;
 }

 .search-bar input[type="search"] {
  width: 100%;
  max-width: none;
 }

 footer .footer-container {
  flex-direction: column;
  align-items: center;
  padding: 25px 20px;
  text-align: center;
  gap: 25px;
 }

 .footer-left, .footer-center, .footer-right {
  text-align: center !important;
  width: 100%;
 }

 .footer-left .social-icons {
  justify-content: center;
 }

 .legal-links a {
  margin: 5px 0;
 }
}

@media (max-width: 768px) {
 .share-box-container {
  flex-direction: column;
  text-align: center;
  gap: 15px;
  padding: 25px 20px;
 }

 .share-button-post {
  width: 100%;
  justify-content: center;
 }
}

@media (min-width: 861px) {
 header nav {
  display: flex !important;
 }

 .menu-hamburguesa {
  display: none;
 }
}
/* Estilo para ocultar el campo honeypot a los usuarios */
.honeypot-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}