/* Theme Name: Raíces Digitales Theme URI: https://raicesdigitales.org Author: Raíces Digitales Author URI: https://raicesdigitales.org Description: Theme para organizaciones ciudadanas enfocadas en espacio público, patrimonio arqueológico, ecosistemas y protección animal. Portada modular configurable desde el Personalizador (portada, ejes, proyectos, blog, eventos, impacto, participar, galería, mapa interactivo, videojuegos educativos, calendario y contacto), modo claro/oscuro y paleta azul petróleo + verde + tierra. Cada campo vacío simplemente no se muestra. Version: 4.0.2 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: raices-digitales Tags: non-profit, environment, one-column, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, threaded-comments */ /* ============ VARIABLES ============ */ :root{ --petroleo:#0e5a63; --petroleo-oscuro:#083b41; --petroleo-profundo:#06282c; --petroleo-claro:#4b99a3; --petroleo-suave:#dcebee; --verde:#2f7d5b; --verde-claro:#7fae92; --verde-suave:#e3efe7; --tierra:#b07a4a; --tierra-claro:#d9b382; --ocre:#a0522d; --crema:#f4f1ea; --tinta:#12262b; --blanco:#ffffff; --gris:#5c6b6e; /* Nuevas variables semánticas */ --bg-body: var(--crema); --bg-card: var(--blanco); --text-body: var(--tinta); --text-heading: var(--petroleo-oscuro); --text-meta: var(--gris); --text-hero: var(--crema); --text-btn: var(--blanco); --sombra:0 6px 20px rgba(6,40,44,.08); --radio:14px; --transicion:.3s ease; } /* ============ BASE ============ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scrollbar-color:var(--petroleo) var(--bg-body)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:var(--bg-body)} ::-webkit-scrollbar-thumb{background:linear-gradient(var(--petroleo),var(--verde));border-radius:999px;border:2px solid var(--bg-body)} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(var(--petroleo-oscuro),var(--verde))} body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--text-body);background:var(--bg-body);line-height:1.6} h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;color:var(--text-heading);line-height:1.2} h1{font-size:clamp(2rem,5vw,3.5rem)} h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:1rem} h3{font-size:1.25rem;margin-bottom:.5rem} p{margin-bottom:1rem} a{color:var(--petroleo);text-decoration:none;transition:color var(--transicion)} a:hover{color:var(--tierra)} img{max-width:100%;height:auto;display:block} .contenedor{max-width:1200px;margin:0 auto;padding:0 1.25rem} section{padding:5rem 0} .seccion-titulo{text-align:center;margin-bottom:3rem} .seccion-titulo p{max-width:700px;margin:1rem auto 0;color:var(--text-meta)} .saltar-contenido{position:absolute;left:-9999px;top:0;background:var(--petroleo);color:#fff;padding:.8rem 1.5rem;z-index:999;border-radius:0 0 8px 0} .saltar-contenido:focus{left:0} .aviso{padding:1rem 1.5rem;border-radius:10px;margin-bottom:1.5rem;font-weight:600} .aviso-ok{background:var(--verde-suave);color:var(--verde);border:1px solid var(--verde-claro)} .aviso-error{background:#fdecea;color:#a33;border:1px solid #e8b4b0} /* ============ HEADER ============ */ .nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;max-width:1200px;margin:0 auto;gap:1rem} .logo{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--text-heading);font-family:Georgia,serif;font-size:1.3rem} .logo svg{width:36px;height:36px;flex-shrink:0} .logo a{color:var(--text-heading);display:flex;align-items:center;gap:.6rem} .logo .custom-logo-link{display:flex;align-items:center} .logo img{max-height:46px;width:auto} .nav-menu{display:flex;gap:1.4rem;list-style:none;align-items:center} .nav-menu a{font-weight:500;color:var(--menu-txt, var(--text-body))} .nav-menu a:hover{color:var(--menu-hov, var(--petroleo))} .btn-nav{background:var(--petroleo);color:var(--text-btn)!important;padding:.55rem 1.1rem;border-radius:999px} .btn-nav:hover{background:var(--petroleo-oscuro)} .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem} .menu-toggle span{display:block;width:24px;height:2px;background:var(--menu-txt, var(--petroleo-oscuro));margin:5px 0;transition:var(--transicion)} /* ============ HERO ============ */ .hero{position:relative;background:linear-gradient(135deg,var(--petroleo-profundo) 0%,var(--petroleo) 100%);color:var(--text-hero);padding:5rem 1.25rem 6rem;overflow:hidden;display:flex;align-items:center;justify-content:center} .hero-contenido{position:relative;z-index:3;max-width:900px;margin:0 auto;text-align:center;width:100%} .hero h1{color:var(--text-hero);margin-bottom:1.2rem} .hero p.lead{font-size:1.2rem;margin-bottom:2rem;opacity:.95} .hero-botones{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .btn{display:inline-block;padding:.85rem 1.8rem;border-radius:999px;font-weight:600;cursor:pointer;border:none;transition:all var(--transicion);font-size:1rem;font-family:inherit} .btn-primario{background:var(--tierra);color:var(--text-btn)} .btn-primario:hover{background:var(--tierra-claro);color:var(--tinta);transform:translateY(-2px)} .btn-secundario{background:transparent;color:var(--petroleo);border:2px solid var(--petroleo)} .btn-secundario:hover{background:var(--petroleo);color:#ffffff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(14,90,99,0.25)} .hero .btn-secundario{color:var(--text-hero);border-color:var(--crema)} .hero .btn-secundario:hover{background:var(--crema);color:var(--petroleo-oscuro)} body.tema-oscuro .btn-secundario:not(.hero .btn-secundario){color:var(--petroleo-claro);border-color:var(--petroleo-claro)} body.tema-oscuro .btn-secundario:not(.hero .btn-secundario):hover{background:var(--petroleo-claro);color:var(--tinta)} /* ============ EJES ============ */ .ejes{background:var(--bg-body)} .ejes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem} .eje-card{background:var(--bg-card);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--transicion);display:flex;flex-direction:column} .eje-card:hover{transform:translateY(-6px)} .eje-imagen{height:180px;display:flex;align-items:center;justify-content:center;color:var(--text-btn)} .eje-imagen svg{width:80px;height:80px;opacity:.95} .eje-espacio .eje-imagen{background:linear-gradient(135deg,var(--petroleo),var(--petroleo-claro))} .eje-arqueologia .eje-imagen{background:linear-gradient(135deg,#8b5a2b,var(--tierra))} .eje-ecosistemas .eje-imagen{background:linear-gradient(135deg,var(--verde),#4fa882)} .eje-fauna .eje-imagen{background:linear-gradient(135deg,var(--ocre),#cd853f)} .eje-contenido{padding:1.5rem;flex:1;display:flex;flex-direction:column} .eje-contenido p{flex:1;color:var(--text-meta)} .eje-link{margin-top:1rem;font-weight:600;color:var(--petroleo)} /* ============ PROYECTOS ============ */ .proyectos{background:var(--bg-card)} .proyectos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem} .proyecto{background:var(--bg-pub-proyecto, var(--bg-body));border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--transicion);display:flex;flex-direction:column;border-top:4px solid var(--petroleo)} .proyecto:hover{transform:translateY(-4px)} .proyecto-img{display:block;height:200px;overflow:hidden;position:relative;background:var(--petroleo-suave)} .proyecto-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--transicion)} .proyecto:hover .proyecto-img img{transform:scale(1.04)} .proyecto-img.vacia{display:flex;align-items:center;justify-content:center} .proyecto-icono-svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:transform var(--transicion)} .proyecto:hover .proyecto-icono-svg{transform:scale(1.08)} .proyecto-icono-svg svg{width:64px;height:64px;stroke:currentColor;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.2))} .proyecto-cuerpo{padding:1.8rem;flex:1;display:flex;flex-direction:column} .proyecto p,.proyecto-cuerpo p{flex:1;color:var(--text-meta)} .proyecto .tag,.proyecto-cuerpo .tag{display:inline-block;background:var(--petroleo-suave);color:var(--text-heading);padding:.25rem .7rem;border-radius:999px;font-size:.8rem;font-weight:600;margin-bottom:.8rem} .proyecto .tag a,.proyecto-cuerpo .tag a{color:var(--text-heading)} .proyecto .btn,.proyecto-cuerpo .btn{margin-top:1rem;align-self:flex-start} /* ============ BLOG ============ */ .blog{background:var(--bg-body)} .blog-filtros{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem} .filtro-btn{background:var(--bg-card);border:2px solid var(--petroleo-suave);color:var(--text-heading);padding:.5rem 1.2rem;border-radius:999px;font-weight:600;transition:all var(--transicion);font-size:.9rem} .filtro-btn:hover{background:var(--petroleo-suave);color:var(--text-heading)} .filtro-btn.activo{background:var(--petroleo);color:var(--text-btn);border-color:var(--petroleo)} .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem} .articulo{background:var(--bg-pub-blog, var(--bg-card));border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--transicion);display:flex;flex-direction:column} .articulo:hover{transform:translateY(-4px)} .articulo-img{display:block;height:200px;overflow:hidden} .articulo-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--transicion)} .articulo:hover .articulo-img img{transform:scale(1.04)} .articulo-img.vacia{background:linear-gradient(135deg,var(--petroleo),var(--petroleo-claro));display:flex;align-items:center;justify-content:center;color:#fff} .articulo-cuerpo{padding:1.5rem;flex:1;display:flex;flex-direction:column} .articulo-meta{display:flex;gap:1rem;font-size:.85rem;color:#888;margin-bottom:.6rem;flex-wrap:wrap;align-items:center} .articulo-cat{background:var(--petroleo-suave);color:var(--text-heading);padding:.15rem .6rem;border-radius:999px;font-weight:600;font-size:.75rem} .articulo h3 a{color:var(--text-heading)} .articulo h3 a:hover{color:var(--petroleo)} .articulo p{color:var(--text-meta);flex:1;font-size:.95rem} .articulo-link{margin-top:1rem;font-weight:600;color:var(--petroleo)} /* ============ GALERÍA ============ */ .galeria{background:var(--bg-card)} .galeria-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem} .galeria-item{aspect-ratio:1;border-radius:var(--radio);overflow:hidden;cursor:pointer;position:relative;box-shadow:var(--sombra);transition:transform var(--transicion)} .galeria-item:hover,.galeria-item:focus-visible{transform:scale(1.03)} .galeria-item img{width:100%;height:100%;object-fit:cover} .galeria-item .g-caption{position:absolute;bottom:0;left:0;right:0;padding:.8rem 1rem;background:linear-gradient(to top,rgba(6,40,44,.85),rgba(6,40,44,.4) 65%,transparent);color:var(--text-btn);font-size:.85rem;font-weight:600;margin:0;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap} .galeria-item .g-btn{padding:0.35rem 0.8rem;font-size:0.75rem;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.25)} .lightbox{display:none;position:fixed;inset:0;background:rgba(6,40,44,.93);z-index:99999;align-items:center;justify-content:center;padding:1rem} .lightbox.activo{display:flex} .lightbox-contenido{max-width:900px;width:100%;text-align:center;position:relative} .lightbox-img{width:100%;max-height:75vh;object-fit:contain;border-radius:var(--radio)} .lightbox-caption{color:var(--text-btn);margin-top:1rem;font-size:1.1rem} .lightbox-cerrar,.lightbox-nav{position:absolute;background:rgba(255,255,255,.15);border:none;color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;transition:background var(--transicion);line-height:1} .lightbox-cerrar:hover,.lightbox-nav:hover{background:rgba(255,255,255,.35)} .lightbox-cerrar{top:-60px;right:0} .lightbox-prev{left:-60px;top:50%;transform:translateY(-50%)} .lightbox-next{right:-60px;top:50%;transform:translateY(-50%)} /* ============ MAPA ============ */ .mapa{background:var(--bg-body)} .mapa-contenedor{height:500px;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)} #rvMapa{height:100%;width:100%} /* Mapa en modo oscuro (Inversión de mapa para Leaflet) */ .leaflet-tile-pane { transition: filter 0.5s ease; } body.tema-oscuro .leaflet-tile-pane { filter: invert(100%) hue-rotate(180deg) brightness(90%) contrast(85%); } .mapa-leyenda{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem;font-size:.9rem} .leyenda-item{display:flex;align-items:center;gap:.5rem} .leyenda-punto{width:14px;height:14px;border-radius:50%;flex-shrink:0} body.tema-oscuro .mapa-leyenda, body.tema-oscuro .leyenda-item{color:#e2e8f0} .rv-proyecto-mapa-box{width:100%;height:450px;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);margin:1.5rem 0} .rv-mapa-marker{background:transparent;border:none} /* Estilos de bocadillos (modo claro) */ .rv-mapa-popup h4{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.25} .rv-mapa-popup h4 a, .rv-mapa-popup .rv-popup-tit-link{color:var(--petroleo);text-decoration:none} .rv-mapa-popup h4 a:hover, .rv-mapa-popup .rv-popup-tit-link:hover{text-decoration:underline} .rv-mapa-popup .rv-popup-tit{color:#111827} .rv-mapa-popup div, .rv-mapa-popup .rv-popup-desc{margin:0 0 6px;font-size:13px;color:#4b5563;line-height:1.45} .rv-mapa-popup a.rv-popup-link{color:var(--petroleo);font-size:12px;font-weight:600;text-decoration:none} .rv-mapa-popup a.rv-popup-link:hover{text-decoration:underline} /* ============ BOCADILLOS DE MAPA EN MODO OSCURO (FONDO GENERAL DE LA WEB Y TIPOGRAFÍA BLANCA) ============ */ body.tema-oscuro .leaflet-popup-content-wrapper, body.tema-oscuro .leaflet-popup-tip, .tema-oscuro .leaflet-popup-content-wrapper, .tema-oscuro .leaflet-popup-tip { background: var(--bg-body, #151515) !important; color: #ffffff !important; box-shadow: 0 4px 22px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.14) !important; } body.tema-oscuro .leaflet-popup-close-button, .tema-oscuro .leaflet-popup-close-button { color: #ffffff !important; } body.tema-oscuro .leaflet-popup-close-button:hover, .tema-oscuro .leaflet-popup-close-button:hover { color: #cbd5e1 !important; } body.tema-oscuro .leaflet-popup-content, body.tema-oscuro .leaflet-popup-content *, .tema-oscuro .leaflet-popup-content, .tema-oscuro .leaflet-popup-content * { color: #ffffff !important; } body.tema-oscuro .leaflet-popup-content a, .tema-oscuro .leaflet-popup-content a { color: #ffffff !important; text-decoration: underline !important; } body.tema-oscuro .leaflet-popup-content a:hover, .tema-oscuro .leaflet-popup-content a:hover { color: #93c5fd !important; text-decoration: underline !important; } body.tema-oscuro .rv-mapa-popup h4, body.tema-oscuro .rv-mapa-popup h4 a, body.tema-oscuro .rv-mapa-popup .rv-popup-tit, body.tema-oscuro .rv-mapa-popup .rv-popup-tit-link, body.tema-oscuro .rv-mapa-popup .rv-popup-desc, body.tema-oscuro .rv-mapa-popup a.rv-popup-link, .tema-oscuro .rv-mapa-popup h4, .tema-oscuro .rv-mapa-popup h4 a, .tema-oscuro .rv-mapa-popup .rv-popup-tit, .tema-oscuro .rv-mapa-popup .rv-popup-tit-link, .tema-oscuro .rv-mapa-popup .rv-popup-desc, .tema-oscuro .rv-mapa-popup a.rv-popup-link { color: #ffffff !important; } /* ============ CALENDARIO ============ */ .calendario{background:var(--bg-card)} .cal-contenedor{max-width:900px;margin:0 auto} .cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem} .cal-titulo{font-size:1.5rem;margin:0;text-align:center} .cal-header button{background:var(--petroleo);color:#fff;border:none;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.3rem;transition:background var(--transicion);line-height:1} .cal-header button:hover{background:var(--petroleo-oscuro)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--bg-body);padding:1rem;border-radius:var(--radio)} .cal-dia-nombre{text-align:center;font-weight:700;color:var(--text-heading);padding:.5rem;font-size:.85rem;text-transform:uppercase} .cal-dia{background:var(--bg-card);min-height:72px;padding:.5rem;border-radius:8px;font-size:.9rem;transition:all var(--transicion)} .cal-dia.vacio{background:transparent} .cal-dia.hoy{outline:2px solid var(--petroleo)} .cal-dia.con-evento{cursor:pointer} .cal-dia.con-evento:hover{background:var(--petroleo-suave);transform:scale(1.05)} .cal-dia .num{font-weight:600;color:var(--cal-text-num, var(--tinta))} .cal-dia .evento-dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--tierra);margin:.25rem auto 0} .cal-eventos-dia{margin-top:2rem;background:var(--cal-bg-panel, var(--bg-body));padding:1.5rem;border-radius:var(--radio)} .cal-eventos-dia h4{margin-bottom:1rem} .cal-evento-item{padding:.8rem 1rem;background:var(--cal-bg-ficha, var(--bg-card));color:var(--cal-text-ficha, var(--text-body));border-radius:8px;margin-bottom:.5rem;border-left:4px solid var(--petroleo)} .cal-evento-item strong a{color:var(--cal-text-ficha, var(--text-heading))} /* ============ EVENTOS ============ */ .eventos{background:var(--bg-card)} .evento-lista{display:flex;flex-direction:column;gap:1rem;max-width:900px;margin:0 auto} .evento{display:flex;gap:1.5rem;padding:1.2rem;background:var(--bg-pub-evento, var(--bg-body));border-radius:var(--radio);align-items:center} .evento-fecha{background:var(--petroleo);color:#fff;padding:.8rem 1rem;border-radius:10px;text-align:center;min-width:80px;flex-shrink:0} .evento-fecha .dia{font-size:1.8rem;font-weight:700;line-height:1;display:block} .evento-fecha .mes{font-size:.8rem;text-transform:uppercase;letter-spacing:1px} .evento-info{flex:1} .evento-info h3{margin-bottom:.3rem} .evento-info h3 a{color:var(--text-heading)} .evento-info h3 a:hover{color:var(--petroleo)} .evento-info p{margin:0 0 .5rem;color:var(--text-meta);font-size:.95rem} .evento-detalles{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.9rem;color:var(--text-meta)} .badge-eje{display:inline-block;background:var(--petroleo-suave);color:var(--text-heading);padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600} /* ============ IMPACTO ============ */ .impacto{background:linear-gradient(135deg,var(--petroleo-profundo),var(--petroleo));color:var(--text-hero)} .impacto h2{color:var(--text-hero)} .impacto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;text-align:center} .impacto-num{font-size:3rem;font-weight:700;font-family:Georgia,serif;color:var(--tierra-claro)} .impacto-label{font-size:1rem;opacity:.9} /* ============ PARTICIPAR ============ */ .participar{background:var(--bg-body)} .participar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem} .participar-card{background:var(--bg-card);padding:2rem 1.5rem;border-radius:var(--radio);text-align:center;box-shadow:var(--sombra);transition:transform var(--transicion),box-shadow var(--transicion);display:flex;flex-direction:column;align-items:center} .participar-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.12)} .participar-icono{width:70px;height:70px;border-radius:50%;background:var(--petroleo-suave);color:var(--petroleo);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem} .participar-card svg{width:36px;height:36px;color:currentColor;margin:0} .participar-card h3{margin:0 0 0.8rem;font-size:1.25rem;color:var(--text-heading);font-weight:700} .participar-card p{margin:0;font-size:0.95rem;line-height:1.6;color:var(--text-body);opacity:0.9} .rv-proyecto-participar{margin:1.5rem 0} /* ============ CONTACTO ============ */ .contacto{background:var(--bg-body)} .contacto-grid{display:grid;grid-template-columns:1fr;gap:3rem;max-width:700px;margin:0 auto} .contacto-grid.con-info{grid-template-columns:1fr 1fr;max-width:1000px} .rv-ct-trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .form-campo{margin-bottom:1.2rem} .form-campo label{display:block;margin-bottom:.4rem;font-weight:600;color:var(--text-heading)} .form-campo input,.form-campo textarea,.form-campo select{width:100%;padding:.8rem;border:1px solid rgba(128,128,128,0.3);background:var(--bg-body);color:var(--text-body);border-radius:8px;font-family:inherit;font-size:1rem;background:var(--bg-card);transition:border var(--transicion)} .form-campo input:focus,.form-campo textarea:focus,.form-campo select:focus{outline:none;border-color:var(--petroleo)} .form-campo textarea{resize:vertical;min-height:120px} /* ============ ENTRADAS Y CONTENIDO ============ */ .entrada-contenido h2{margin-top:2rem} .entrada-contenido ul,.entrada-contenido ol{margin:0 0 1rem 1.5rem} .entrada-contenido blockquote{border-left:4px solid var(--petroleo);padding:.8rem 1.2rem;background:var(--petroleo-suave);border-radius:0 8px 8px 0;margin:1.5rem 0} .entrada-contenido img{border-radius:8px} .alignleft{float:left;margin:0 1.5rem 1rem 0} .alignright{float:right;margin:0 0 1rem 1.5rem} .aligncenter{margin:1rem auto} .wp-caption{max-width:100%} .wp-caption-text{font-size:.85rem;color:var(--text-meta);text-align:center} .screen-reader-text{position:absolute!important;left:-9999px} .screen-reader-text:focus{left:0;top:0;z-index:999;background:#fff;padding:.8rem} /* ============ ENTRADA INDIVIDUAL (SINGLE BLOG) ============ */ .entrada-destacada-card { background: var(--bg-card); padding: 3rem; border-radius: var(--radio); box-shadow: var(--sombra); } .entrada-destacada-card img { border-radius: var(--radio); box-shadow: var(--sombra); display: block; width: 100%; height: auto; } /* ============ COMENTARIOS ============ */ .comentarios { margin-top: 3rem; background: var(--bg-card); padding: 3rem; border-radius: var(--radio); box-shadow: var(--sombra); } .comentarios h3, .comentarios .comment-reply-title { font-family: Georgia, serif; color: var(--text-heading); margin-bottom: 1.2rem; font-size: 1.4rem; } .comment-list { list-style: none; margin: 0 0 2rem; } .comment { padding: 1.2rem 0; border-bottom: 1px solid rgba(128,128,128,0.2); } .comment .avatar { border-radius: 50%; float: left; margin-right: 1rem; } .comment-author { font-weight: 700; color: var(--text-heading); } .comment-metadata { font-size: .8rem; color: var(--text-meta); } .comment-content { clear: both; padding-top: .5rem; } .reply { font-size: .85rem; margin-top: .5rem; } .reply a { color: var(--petroleo); font-weight: 600; } .reply a:hover { color: var(--tierra); } .comentarios .comment-respond { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(128,128,128,0.2); } .comentarios .comment-form label { display: block; margin-top: .8rem; font-weight: 600; color: var(--text-heading); font-size: .95rem; } .comentarios input[type=text], .comentarios input[type=email], .comentarios input[type=url], .comentarios textarea { width: 100%; padding: .8rem; border: 1px solid rgba(128,128,128,0.3); background: var(--bg-body); color: var(--text-body); border-radius: 8px; font-family: inherit; font-size: 1rem; margin-top: .3rem; transition: border var(--transicion); } .comentarios input[type=text]:focus, .comentarios input[type=email]:focus, .comentarios input[type=url]:focus, .comentarios textarea:focus { outline: none; border-color: var(--petroleo); } .comentarios .comment-form-cookies-consent { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; } .comentarios .comment-form-cookies-consent input { width: auto; margin: 0; } .comentarios .comment-form-cookies-consent label { margin: 0; font-weight: normal; font-size: .9rem; } .comentarios .submit, #commentform #submit, .comment-form .submit, .comment-respond .form-submit input[type="submit"] { background: var(--tierra); color: var(--text-btn, #ffffff) !important; padding: 0.85rem 2.2rem; border-radius: 999px; font-weight: 600; font-size: 1rem; font-family: inherit; cursor: pointer; border: none; transition: all var(--transicion); box-shadow: 0 4px 12px rgba(176,122,74,0.25); margin-top: 1.2rem; display: inline-block; line-height: 1.2; text-decoration: none; } .comentarios .submit:hover, #commentform #submit:hover, .comment-form .submit:hover, .comment-respond .form-submit input[type="submit"]:hover { background: var(--tierra-claro); color: var(--tinta, #1c2a24) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(176,122,74,0.35); } @media (max-width: 768px) { .entrada-destacada-card { padding: 1.8rem 1.25rem !important; } .entrada-contenido { padding: 1.8rem 1.25rem !important; } .comentarios { padding: 1.8rem 1.25rem !important; } } /* ============ PAGINACIÓN ============ */ .paginacion{margin-top:3rem;text-align:center} .paginacion .nav-links{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap} .paginacion ul.page-numbers{list-style:none;display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap} .paginacion .nav-links a,.paginacion .nav-links span,.paginacion .page-numbers{display:inline-block;padding:.5rem .9rem;border-radius:8px;background:var(--bg-card);color:var(--petroleo);font-weight:600;box-shadow:var(--sombra)} .paginacion .nav-links .current,.paginacion .page-numbers.current{background:var(--petroleo);color:#fff} /* ============ FOOTER ============ */ footer{background:var(--footer-bg, var(--tinta));color:var(--footer-txt, var(--text-hero));padding:3rem 0 1.5rem} .footer-grid{display:grid;grid-template-columns:repeat(var(--footer-cols, 4), 1fr);gap:2rem;margin-bottom:2rem} @media (max-width: 900px){.footer-grid{grid-template-columns:repeat(2, 1fr)}} footer h4{color:var(--footer-titulos, var(--tierra-claro));margin-bottom:1rem;font-family:Georgia,serif} .footer-logo{max-width:140px;height:auto;margin-bottom:1rem;display:block} footer ul{list-style:none} footer ul li{margin-bottom:.5rem} footer a{color:var(--footer-txt, var(--text-hero));opacity:.85} footer a:hover{color:var(--footer-titulos, var(--tierra-claro));opacity:1} .redes{display:flex;gap:1rem;margin-top:1rem} .redes a{width:40px;height:40px;border-radius:50%;background:var(--footer-icon-bg, var(--petroleo));display:flex;align-items:center;justify-content:center} .redes a:hover{background:var(--footer-icon-hov, var(--tierra))} .redes a { color: #fff; } .redes svg { width: 20px; height: 20px; } .redes svg * { fill: currentColor; } .redes svg *[fill="none"] { fill: none !important; } .copyright{text-align:center;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem;opacity:.7} /* ============ RESPONSIVE ============ */ @media (max-width:768px){ .menu-toggle{display:block} .cal-dia{min-height:52px;padding:.3rem;font-size:.8rem} .cal-dia .evento-dot{width:6px;height:6px} .lightbox-prev{left:10px} .lightbox-next{right:10px} .lightbox-cerrar{top:10px;right:10px} .contacto-grid.con-info{grid-template-columns:1fr} .evento{flex-direction:column;align-items:flex-start} } /* ===== Actualizaciones de Calendario (Colores Originales) ===== */ .cal-dia { border: none !important; transition: transform 0.2s, box-shadow 0.2s !important; position: relative; background: var(--cal-bg-dia, var(--bg-card)) !important; } .cal-dia:not(.vacio):hover { transform: translateY(-4px) !important; box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important; z-index: 10; } .cal-dia.con-evento { background-color: var(--cal-bg-dia, var(--bg-card)) !important; color: var(--text-body) !important; cursor: pointer; } .cal-dia.con-evento:hover { background-color: var(--cal-hover-dia, var(--verde-suave)) !important; } .cal-dia.con-evento .num { color: var(--cal-text-num, var(--text-body)) !important; font-weight: 600; } .cal-dia.hoy { border: 2px solid var(--verde) !important; outline: none !important; } .cal-dots { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: .3rem; } .evento-dot { display: block; width: 8px; height: 8px; border-radius: 50%; } /* ============ HERO SLIDER ============ */ .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1} .hero-overlay{position:absolute;inset:0;z-index:2} /* Controls */ .hero-flecha { position: absolute; top: 50%; transform: translateY(-50%); background: var(--petroleo); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background var(--transicion); line-height: 1; } .hero-flecha:hover { background: var(--petroleo-oscuro); } .hero-prev { left: 20px; } .hero-next { right: 20px; } .hero-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .hero-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; border: none; transition: background 0.3s, transform 0.3s; padding: 0; } .hero-dot.activo { background: var(--petroleo); transform: scale(1.2); } /* ============ TOP BAR & HEADER VARIANTS ============ */ .top-bar { display: flex; justify-content: space-between; align-items: center; background: var(--topbar-bg, var(--menu-bg, var(--bg-body))); color: var(--topbar-txt, var(--menu-txt, var(--tinta))); padding: 0.5rem 1.25rem; font-size: 0.85rem; border-bottom: 1px solid rgba(0,0,0,0.06); } .top-bar a { color: var(--topbar-txt, var(--menu-txt, var(--tinta))); display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1rem; text-decoration: none; transition: opacity 0.3s; } .top-bar a:hover { opacity: 0.8; } .top-bar-der { display: flex; align-items: center; gap: 0.8rem; } .site-header { position: sticky; top: 0; z-index: 100; background: var(--menu-bg, var(--bg-body)); transition: all 0.3s ease; border-bottom: 1px solid rgba(0,0,0,0.05); } .site-header.header-transparente { position: absolute; width: 100%; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; } .site-header.header-transparente.header-scrolled { position: fixed !important; background: var(--menu-bg, var(--bg-body)) !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; box-shadow: var(--sombra) !important; } .site-header.header-transparente.header-scrolled .nav { padding: 0.5rem 1.25rem !important; } .site-header.header-transparente.header-scrolled .logo-container img { max-height: 40px !important; transition: max-height 0.3s; } .site-header.header-transparente.header-scrolled .logo svg { width: 28px; height: 28px; } .site-header.header-comprime { position: sticky; } .site-header.header-comprime.header-scrolled { padding-top: 0; padding-bottom: 0; box-shadow: var(--sombra); } .site-header.header-comprime.header-scrolled .nav { padding: 0.5rem 1.25rem; } .site-header.header-comprime.header-scrolled .logo svg { width: 28px; height: 28px; } /* Centered Logo */ .site-header.logo-centro .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: start; } .site-header.logo-centro .logo { justify-self: center; } .site-header.logo-centro .nav-links { justify-self: end; } .nav-links { display: flex; align-items: center; gap: 1.5rem; } .btn-theme-toggle { background: none; border: none; cursor: pointer; color: var(--menu-txt, var(--tinta)); display: flex; align-items: center; padding: 0.4rem; border-radius: 50%; transition: background 0.3s; } .btn-theme-toggle:hover { color: var(--menu-hov); } body.tema-oscuro .icon-sun { display: none !important; } body.tema-oscuro .icon-moon { display: block !important; } @media (max-width: 768px) { .site-header.logo-centro .nav { display: flex; justify-content: space-between; } .top-bar { flex-direction: column; gap: 0.5rem; text-align: center; } .top-bar a { margin-right: 0.5rem; } } /* ===== Menú Hamburguesa Forzado (Botón a la izquierda, Logo al centro, Modo oscuro a la derecha) ===== */ .site-header.hamburguesa-siempre .nav { display: grid !important; grid-template-columns: 1fr auto 1fr !important; grid-template-rows: 1fr !important; grid-auto-flow: dense !important; align-items: center !important; padding: 1rem 1.25rem !important; min-height: 78px !important; box-sizing: border-box !important; } .site-header.hamburguesa-siempre .menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; height: 42px !important; width: 42px !important; padding: 0 !important; margin: 0 !important; } .site-header.hamburguesa-siempre .menu-toggle span { display: block !important; width: 24px !important; height: 2.5px !important; background: var(--menu-txt, var(--petroleo-oscuro)) !important; margin: 2.5px 0 !important; transition: var(--transicion) !important; border-radius: 2px !important; } .site-header.hamburguesa-siempre .logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; height: auto !important; min-height: 46px !important; margin: 0 auto !important; padding: 0 !important; } .site-header.hamburguesa-siempre .logo-container { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: auto !important; min-height: 46px !important; line-height: 1.2 !important; gap: 0.6rem !important; margin: 0 !important; padding: 0 !important; } .site-header.hamburguesa-siempre .logo-container img { max-height: 46px !important; height: auto !important; width: auto !important; object-fit: contain !important; display: inline-block !important; vertical-align: middle !important; margin: 0 !important; } .site-header.hamburguesa-siempre .logo-container span { font-size: 1.3rem !important; font-weight: 700 !important; font-family: Georgia, serif !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; } .site-header.hamburguesa-siempre .logo svg { width: 36px !important; height: 36px !important; display: block !important; flex-shrink: 0 !important; } .site-header.hamburguesa-siempre .nav-links { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; height: auto !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; gap: 0.5rem !important; } .site-header.hamburguesa-siempre .btn-theme-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 42px !important; width: 42px !important; padding: 0 !important; margin: 0 !important; align-self: center !important; } /* ===== Control de Capas de Cabecera y Menú Abierto ===== */ .site-header.hamburguesa-siempre, body.menu-drawer-abierto .site-header { z-index: 100000 !important; } /* ===== Fondo Oscuro Opaco (Backdrop) que Cubre Toda la Web ===== */ .menu-drawer-backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; z-index: 99990 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.35s ease, visibility 0.35s ease !important; } .menu-drawer-backdrop.activo { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } body.menu-drawer-abierto { overflow: hidden; } /* ===== Columna Lateral Deslizable (Ancho 250px, Deslizamiento Izq -> Der, Fondo Opaco) ===== */ /* 1. Cuando se fuerza el menú hamburguesa (en cualquier pantalla) */ .site-header.hamburguesa-siempre .nav-menu { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 250px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; z-index: 100001 !important; margin: 0 !important; padding: 1.5rem 1.25rem !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; list-style: none !important; transform: translateX(-100%) !important; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.35s ease, box-shadow 0.35s ease !important; visibility: hidden !important; pointer-events: none !important; overflow-y: auto !important; overflow-x: hidden !important; background: linear-gradient(135deg, var(--menu-col-c1, #0e5a63), var(--menu-col-c2, #2e7d5b)) !important; box-shadow: none !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; } .site-header.hamburguesa-siempre .nav-menu::before { display: none !important; } .site-header.hamburguesa-siempre .nav-menu.activo { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; box-shadow: 6px 0 30px rgba(0, 0, 0, 0.45) !important; } .site-header.hamburguesa-siempre .nav-menu li { width: 100%; margin: 0; position: relative; z-index: 2; } .site-header.hamburguesa-siempre .nav-menu a { color: var(--menu-col-txt, #ffffff) !important; font-size: 1.05rem; font-weight: 600; padding: 0.7rem 0.65rem; display: block; border-radius: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.25s ease; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .site-header.hamburguesa-siempre .nav-menu a:hover { color: var(--menu-col-hov, #d9b382) !important; background: rgba(255, 255, 255, 0.12); padding-left: 0.95rem; } .site-header.hamburguesa-siempre .nav-menu .btn-nav { background: rgba(255, 255, 255, 0.2) !important; color: var(--menu-col-txt, #ffffff) !important; text-align: center; margin-top: 0.5rem; border-bottom: none; } .site-header.hamburguesa-siempre .nav-menu .btn-nav:hover { background: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } /* 2. En dispositivos móviles (pantallas <= 768px) */ @media (max-width: 768px) { .site-header .nav { display: grid !important; grid-template-columns: 1fr auto 1fr !important; grid-template-rows: 1fr !important; grid-auto-flow: dense !important; align-items: center !important; padding: 0.65rem 1rem !important; min-height: 52px !important; } .site-header .menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: center !important; height: 36px !important; width: 36px !important; padding: 0 !important; margin: 0 !important; } .site-header .menu-toggle span { display: block !important; width: 20px !important; height: 2px !important; margin: 2px 0 !important; } .site-header .logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; align-self: center !important; height: 36px !important; margin: 0 auto !important; padding: 0 !important; } .site-header .logo-container { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; line-height: 1 !important; gap: 0.5rem !important; margin: 0 !important; padding: 0 !important; } .site-header .logo-container img { max-height: 30px !important; height: 30px !important; width: auto !important; object-fit: contain !important; display: inline-block !important; vertical-align: middle !important; margin: 0 !important; } .site-header .logo-container span { font-size: 1.1rem !important; line-height: 1 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; } .site-header .logo svg { width: 26px !important; height: 26px !important; display: block !important; } .site-header .nav-links { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; height: 36px !important; margin: 0 !important; padding: 0 !important; } .site-header .btn-theme-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; width: 36px !important; padding: 0 !important; margin: 0 !important; align-self: center !important; } .site-header .nav-menu { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 250px !important; max-width: 85vw !important; height: 100vh !important; height: 100dvh !important; z-index: 100001 !important; margin: 0 !important; padding: 1.5rem 1.25rem !important; display: flex !important; flex-direction: column !important; gap: 0.5rem !important; list-style: none !important; transform: translateX(-100%) !important; transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.35s ease, box-shadow 0.35s ease !important; visibility: hidden !important; pointer-events: none !important; overflow-y: auto !important; overflow-x: hidden !important; background: linear-gradient(135deg, var(--menu-col-c1, #0e5a63), var(--menu-col-c2, #2e7d5b)) !important; box-shadow: none !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; } .site-header .nav-menu::before { display: none !important; } .site-header .nav-menu.activo { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; box-shadow: 6px 0 30px rgba(0, 0, 0, 0.45) !important; } .site-header .nav-menu li { width: 100%; margin: 0; position: relative; z-index: 2; } .site-header .nav-menu a { color: var(--menu-col-txt, #ffffff) !important; font-size: 1.05rem; font-weight: 600; padding: 0.7rem 0.65rem; display: block; border-radius: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.25s ease; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .site-header .nav-menu a:hover { color: var(--menu-col-hov, #d9b382) !important; background: rgba(255, 255, 255, 0.12); padding-left: 0.95rem; } .site-header .nav-menu .btn-nav { background: rgba(255, 255, 255, 0.2) !important; color: var(--menu-col-txt, #ffffff) !important; text-align: center; margin-top: 0.5rem; border-bottom: none; } .site-header .nav-menu .btn-nav:hover { background: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; } } /* ========================================================== Columna Lateral (Menú Hamburguesa) - Cabecera y Pie ========================================================== */ /* Por defecto, los elementos del drawer están COMPLETAMENTE OCULTOS */ .menu-drawer-header, .menu-drawer-footer { display: none !important; } /* Solo se activan cuando el menú es hamburguesa forzado en PC */ .site-header.hamburguesa-siempre .nav-menu .menu-drawer-header, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-footer { display: flex !important; } /* O en móvil cuando el menú está abierto */ @media (max-width: 768px) { .site-header .nav-menu.activo .menu-drawer-header, .site-header .nav-menu.activo .menu-drawer-footer { display: flex !important; } } /* Encabezado dentro de la Columna Lateral (Título y botón cerrar) */ .menu-drawer-header { align-items: center; justify-content: space-between; padding-bottom: 0.8rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 100%; position: relative; z-index: 2; } .menu-drawer-titulo { font-family: Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--menu-col-txt, #ffffff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-drawer-cerrar { background: none; border: none; color: var(--menu-col-txt, #ffffff); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 4px; transition: opacity 0.2s, transform 0.2s; opacity: 0.85; } .menu-drawer-cerrar:hover { opacity: 1; transform: scale(1.15); } /* Pie de la Columna Lateral (de abajo hacia arriba: Redes al fondo, Contacto en medio, HTML arriba) */ .menu-drawer-footer { margin-top: auto !important; padding-top: 1.25rem !important; padding-bottom: 0.5rem !important; border-top: 1px solid rgba(255, 255, 255, 0.15) !important; flex-direction: column !important; gap: 0.9rem !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; z-index: 2 !important; } .menu-drawer-html { font-size: 0.88rem; line-height: 1.45; color: var(--menu-col-txt, #ffffff); opacity: 0.92; word-break: break-word; } .menu-drawer-html a { color: var(--menu-col-hov, #d9b382) !important; text-decoration: underline !important; padding: 0 !important; display: inline !important; border-bottom: none !important; } .menu-drawer-html img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 0.4rem 0; } .menu-drawer-contacto { display: flex !important; flex-direction: column !important; gap: 0.45rem !important; } .site-header .nav-menu .menu-drawer-contacto-item, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-contacto-item { display: inline-flex !important; align-items: center !important; gap: 0.55rem !important; color: var(--menu-col-txt, #ffffff) !important; font-size: 0.88rem !important; font-weight: 500 !important; padding: 0.3rem 0 !important; border-bottom: none !important; text-decoration: none !important; opacity: 0.9 !important; background: transparent !important; transition: opacity 0.2s, color 0.2s, padding 0.2s !important; } .site-header .nav-menu .menu-drawer-contacto-item svg, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-contacto-item svg { flex-shrink: 0 !important; width: 16px !important; height: 16px !important; stroke: currentColor !important; } .site-header .nav-menu .menu-drawer-contacto-item:hover, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-contacto-item:hover { color: var(--menu-col-hov, #d9b382) !important; opacity: 1 !important; background: transparent !important; padding-left: 0.35rem !important; } /* Redes Sociales en Columna Lateral (tamaño adecuado del diseño original) */ .site-header .nav-menu .menu-drawer-redes, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-redes { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0.65rem !important; padding-top: 0.2rem !important; } .site-header .nav-menu .menu-drawer-redes a, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-redes a { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border-bottom: none !important; text-shadow: none !important; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; box-sizing: border-box !important; } .site-header .nav-menu .menu-drawer-redes a svg, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-redes a svg { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; display: block !important; margin: 0 !important; flex-shrink: 0 !important; } .site-header .nav-menu .menu-drawer-redes a svg * { fill: currentColor; } .site-header .nav-menu .menu-drawer-redes a svg *[fill="none"] { fill: none !important; } .site-header .nav-menu .menu-drawer-redes a:hover, .site-header.hamburguesa-siempre .nav-menu .menu-drawer-redes a:hover { background: #ffffff !important; color: var(--menu-col-c1, #0e5a63) !important; transform: translateY(-2px) scale(1.08) !important; padding: 0 !important; padding-left: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } .site-header .nav-menu .menu-drawer-redes a:hover svg * { fill: currentColor; } .site-header .nav-menu .menu-drawer-redes a:hover svg *[fill="none"] { fill: none !important; } /* En PC cuando no se fuerza el menú hamburguesa se muestra horizontalmente */ @media (min-width: 769px) { .site-header:not(.hamburguesa-siempre) .nav-menu { position: static !important; transform: none !important; visibility: visible !important; pointer-events: auto !important; width: auto !important; height: auto !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important; flex-direction: row !important; gap: 1.4rem !important; border-right: none !important; } .site-header:not(.hamburguesa-siempre) .nav-menu::before { display: none !important; } .site-header:not(.hamburguesa-siempre) .menu-drawer-header, .site-header:not(.hamburguesa-siempre) .menu-drawer-footer { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } } /* ===== Logo Display ===== */ .logo-container { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-heading); } .logo-container img { max-height: 50px; width: auto; } .logo-container span { font-weight: 700; font-family: Georgia, serif; font-size: 1.3rem; } /* ===== Colores Específicos para Cabecera Transparente ===== */ .site-header.header-transparente:not(.header-scrolled) { background: transparent !important; box-shadow: none !important; border-top: none !important; } .site-header.header-transparente:not(.header-scrolled) .top-bar { background: transparent !important; border-bottom: 1px solid transparent; color: var(--menu-txt-transparente, #fff); } .site-header.header-transparente:not(.header-scrolled) .top-bar a { color: var(--menu-txt-transparente, #fff); } .site-header.header-transparente:not(.header-scrolled) .nav-menu a { color: var(--menu-txt-transparente, #fff); } .site-header.header-transparente:not(.header-scrolled) .nav-menu a:hover { color: var(--menu-hov-transparente, rgba(255,255,255,0.7)); } .site-header.header-transparente:not(.header-scrolled) .logo-container { color: var(--menu-txt-transparente, #fff); } .site-header.header-transparente:not(.header-scrolled) .btn-theme-toggle { color: var(--menu-txt-transparente, #fff); } .site-header.header-transparente:not(.header-scrolled) .menu-toggle span { background: var(--menu-txt-transparente, #fff); } .site-header.header-transparente:not(.header-scrolled) .logo-container svg path[stroke="var(--text-heading)"] { stroke: var(--menu-txt-transparente, #fff) !important; } .site-header.header-transparente ~ .hero, .site-header.header-transparente ~ * .hero, .site-header.header-transparente + .hero, .site-header.header-transparente + article > .hero { padding-top: 6.5rem !important; } #contenido > p:first-child:empty { display: none !important; margin: 0 !important; padding: 0 !important; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(128, 128, 128, 0.2); margin-top: 2rem; gap: 1rem; } .copyright { border-top: none; padding-top: 0; text-align: left; } .legal-links { display: flex; gap: 1rem; margin-top: 0.5rem; } .legal-links a { font-size: 0.85rem; text-decoration: underline; } @media (max-width: 768px) { .footer-bottom { flex-direction: column; text-align: center; justify-content: center; } .copyright { text-align: center; } .legal-links { justify-content: center; } .footer-bottom .redes { justify-content: center; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr !important; } } /* ============ CAROUSELS GLOBALES ============ */ .rv-carousel-container { position: relative; width: 100%; } .rv-carousel-track { cursor: grab; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 1.5rem; padding-bottom: 1rem; scrollbar-width: none; } .rv-carousel-track::-webkit-scrollbar { display: none; } .rv-carousel-track > * { flex: 0 0 calc(33.333% - 1rem); scroll-snap-align: start; min-width: 0; } @media (max-width: 992px) { .rv-carousel-track > * { flex: 0 0 calc(50% - 0.75rem); } } @media (max-width: 768px) { .rv-carousel-track > * { flex: 0 0 85%; } } .proyectos-grid.rv-carousel-track, .blog-grid.rv-carousel-track, .galeria-grid.rv-carousel-track { cursor: grab; display: flex !important; grid-template-columns: none !important; } .rv-carousel-nav { position: absolute; top: 50%; left: -20px; right: -20px; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .rv-carousel-arrow { pointer-events: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.15); } .rv-carousel-arrow { background: var(--petroleo); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: background var(--transicion); line-height: 1; } .rv-carousel-arrow:hover { background: var(--petroleo-oscuro); } .rv-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 1.5rem; } .rv-carousel-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(14, 90, 99, 0.3); border: none; cursor: pointer; transition: background 0.3s, transform 0.3s; padding: 0; } /* petroleo but transparent */ .rv-carousel-dot.activo { background: var(--petroleo); transform: scale(1.2); } .tema-oscuro .rv-carousel-dot { background: rgba(255,255,255,0.3); } /* petroleo but transparent */ .tema-oscuro .rv-carousel-dot.activo { background: var(--petroleo-oscuro); } .rv-carousel-track.dragging { cursor: grabbing !important; scroll-snap-type: none !important; } .rv-carousel-track.dragging * { user-select: none; } /* ===== BOTÓN SUBIR AL PRINCIPIO ===== */ .rv-scroll-top { position: fixed; bottom: 25px; right: 25px; width: 48px; height: 48px; border-radius: 50%; background: var(--footer-bg, #1a2a22); color: var(--footer-txt, #fff); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all var(--transicion); z-index: 999; } .rv-scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .rv-scroll-top:hover { filter: brightness(1.2); transform: translateY(-3px); } @media (max-width: 768px) { .rv-solo-escritorio { display: none !important; } .rv-scroll-top { bottom: 15px; right: 15px; width: 42px; height: 42px; } } body.tema-oscuro .eventos { background: #151515 !important; } body.tema-oscuro .evento { background: #1f1f1f !important; } /* Ajustes de contraste para modo oscuro (Botones de Pestañas y Filtros de Categoría) */ body.tema-oscuro .rv-tab-btn { background: #1f1f1f; border-color: rgba(255, 255, 255, 0.12); color: #e0e0e0; } body.tema-oscuro .rv-tab-btn:hover, body.tema-oscuro .rv-sidebar-tabs .rv-tab-btn:hover { background: #0b3236 !important; border-color: var(--petroleo) !important; color: #ffffff !important; } body.tema-oscuro .rv-tab-btn.activo, body.tema-oscuro .rv-sidebar-tabs .rv-tab-btn.activo { background: var(--petroleo) !important; color: #ffffff !important; border-color: var(--petroleo) !important; } body.tema-oscuro .rv-sidebar-card { background: #191919; border-color: rgba(255, 255, 255, 0.08); } body.tema-oscuro .rv-sidebar-tabs .rv-tab-btn { background: #141414; border-color: rgba(255, 255, 255, 0.08); color: #e0e0e0; } body.tema-oscuro .rv-sidebar-title { border-bottom-color: rgba(255, 255, 255, 0.1); color: #ffffff; } body.tema-oscuro .filtro-btn { background: #1f1f1f; border-color: rgba(255, 255, 255, 0.15); color: #e0e0e0; } body.tema-oscuro .filtro-btn:hover { background: #0b3236 !important; border-color: var(--petroleo) !important; color: #ffffff !important; } body.tema-oscuro .filtro-btn.activo { background: var(--petroleo) !important; color: #ffffff !important; border-color: var(--petroleo) !important; } body.tema-oscuro .articulo-cat, body.tema-oscuro .proyecto .tag { background: rgba(14, 90, 99, 0.35) !important; color: #dcebee !important; border: 1px solid rgba(75, 153, 163, 0.3); } body.tema-oscuro .articulo-cat:hover, body.tema-oscuro .proyecto .tag:hover { background: var(--petroleo) !important; color: #ffffff !important; } /* ============ TABS ============ */ .rv-tabs-container { margin: 2rem 0; } .rv-tabs-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; border-bottom: 2px solid var(--bg-card); padding-bottom: 1rem; } .rv-tabs-nav-vertical { flex-direction: column; border-bottom: none; border-right: 2px solid var(--bg-card); padding-right: 1.5rem; padding-bottom: 0; } .rv-tabs-container.rv-tabs-vertical { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; } @media (max-width: 768px) { .rv-tabs-container.rv-tabs-vertical { grid-template-columns: 1fr; } .rv-tabs-nav-vertical { border-right: none; border-bottom: 2px solid var(--bg-card); padding-right: 0; padding-bottom: 1rem; flex-direction: row; } } .rv-tab-btn { background: var(--bg-card); color: var(--text-heading); border: 1px solid rgba(128,128,128,0.2); padding: 0.8rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all var(--transicion); font-size: 0.95rem; } .rv-tab-btn:hover { background: var(--petroleo-suave); border-color: var(--petroleo-suave); } .rv-tab-btn.activo { background: var(--petroleo); color: #fff; border-color: var(--petroleo); } .rv-tab-panel { animation: rvFadeIn 0.4s ease forwards; } @keyframes rvFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ============ PROYECTO LAYOUT CON SIDEBAR ============ */ .rv-proyecto-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; margin: 2rem 0; } .rv-proyecto-main { min-width: 0; } .rv-proyecto-card { background: var(--bg-card); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; border: 1px solid rgba(128,128,128,0.1); } .rv-proyecto-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 95px; } .rv-sidebar-card { background: var(--bg-card); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.5rem; border: 1px solid rgba(128,128,128,0.12); } .rv-sidebar-title { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin-bottom: 1.1rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--petroleo-suave); display: flex; align-items: center; gap: 0.5rem; } .rv-sidebar-tabs .rv-tabs-nav-vertical { display: flex; flex-direction: column; gap: 0.5rem; border: none; padding: 0; margin: 0; width: 100%; } .rv-sidebar-tabs .rv-tab-btn { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.1rem; border-radius: 10px; background: var(--bg-body); border: 1px solid rgba(128,128,128,0.15); color: var(--text-heading); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all var(--transicion); } .rv-sidebar-tabs .rv-tab-btn:hover { background: var(--petroleo-suave); color: var(--text-heading); transform: translateX(3px); } .rv-sidebar-tabs .rv-tab-btn.activo { background: var(--petroleo); color: #ffffff; border-color: var(--petroleo); box-shadow: 0 4px 12px rgba(6,40,44,0.18); } .rv-sidebar-tabs .rv-tab-btn .rv-tab-arrow { transition: transform 0.2s ease, opacity 0.2s ease; opacity: 0.6; } .rv-sidebar-tabs .rv-tab-btn:hover .rv-tab-arrow, .rv-sidebar-tabs .rv-tab-btn.activo .rv-tab-arrow { opacity: 1; transform: translateX(3px); } .rv-sidebar-img-wrap { margin-bottom: 1rem; border-radius: 10px; overflow: hidden; } .rv-sidebar-img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; display: block; } .rv-sidebar-caption { font-size: 0.82rem; color: var(--text-meta); margin-top: 0.4rem; font-style: italic; text-align: center; } .rv-sidebar-text { font-size: 0.95rem; line-height: 1.6; color: var(--text-body); } .rv-sidebar-text p:last-child { margin-bottom: 0; } .rv-sidebar-btn { display: block; width: 100%; text-align: center; margin-top: 1rem; box-sizing: border-box; } @media (max-width: 950px) { .rv-proyecto-layout { grid-template-columns: 1fr; gap: 2rem; } .rv-proyecto-sidebar { position: static; display: contents; } .rv-sidebar-tabs { order: -1; } .rv-proyecto-main { order: 1; } .rv-sidebar-card:not(.rv-sidebar-tabs) { order: 2; } } /* ============ IMPACTO EN PROYECTOS ============ */ .rv-proyecto-impacto { background: linear-gradient(135deg, var(--petroleo-profundo, #06282c), var(--petroleo, #0e5a63)); border-radius: var(--radio, 14px); padding: 3rem 2rem; margin: 2rem 0; box-shadow: var(--sombra); color: #fff; text-align: center; } .rv-proyecto-impacto .impacto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2.5rem; align-items: center; } .rv-proyecto-impacto .impacto-item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .rv-proyecto-impacto .impacto-num { font-size: 3.5rem; font-weight: 700; font-family: Georgia, serif; color: var(--tierra-claro, #d9b382); line-height: 1; display: block; letter-spacing: -1px; } .rv-proyecto-impacto .impacto-label { font-size: 1.05rem; color: var(--text-hero, #f4f1ea); margin-top: 0.8rem; font-weight: 500; line-height: 1.4; display: block; opacity: 0.95; text-transform: none; } /* ============ CARRUSEL ============ */ .rv-carrusel-container { width: 100%; margin: 2rem 0; position: relative; overflow: hidden; } .rv-carrusel-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 1rem; } .rv-carrusel-track::-webkit-scrollbar { height: 8px; } .rv-carrusel-track::-webkit-scrollbar-track { background: var(--bg-card); border-radius: 4px; } .rv-carrusel-track::-webkit-scrollbar-thumb { background: var(--petroleo); border-radius: 4px; } .rv-carrusel-item { flex: 0 0 80%; max-width: 800px; scroll-snap-align: center; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); position: relative; } @media (min-width: 768px) { .rv-carrusel-item { flex: 0 0 60%; } } .rv-carrusel-img { width: 100%; height: 100%; object-fit: cover; max-height: 450px; display: block; } .rv-carrusel-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.2rem 1.5rem; background: linear-gradient(to top, rgba(6,40,44,0.88), rgba(6,40,44,0.45) 60%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; color: #fff; pointer-events: none; } .rv-carrusel-titulo { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); flex: 1; min-width: 150px; } .rv-carrusel-btn { pointer-events: auto; font-size: 0.85rem; padding: 0.5rem 1.1rem; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); white-space: nowrap; } /* ============ ESTILOS DE BLOQUES GUTENBERG (FRONTEND) ============ */ .wp-block-button__link, .wp-element-button { background-color: var(--tierra); color: var(--text-btn) !important; padding: 0.85rem 1.8rem; border-radius: 999px; font-weight: 600; font-family: inherit; text-decoration: none; display: inline-block; transition: all var(--transicion); border: none; box-shadow: 0 4px 12px rgba(176, 122, 74, 0.25); } .wp-block-button__link:hover, .wp-element-button:hover { background-color: var(--tierra-claro); color: var(--tinta) !important; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(176, 122, 74, 0.35); } .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; border: 2px solid var(--petroleo); color: var(--petroleo) !important; box-shadow: none; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--petroleo); color: #fff !important; } .wp-block-quote, blockquote { border-left: 4px solid var(--petroleo); padding: 1.2rem 1.6rem; background: var(--petroleo-suave); border-radius: 0 var(--radio) var(--radio) 0; margin: 2rem 0; } .wp-block-quote p { font-style: italic; color: var(--petroleo-oscuro); font-size: 1.1rem; line-height: 1.7; margin-bottom: 0.5rem; } .wp-block-quote cite { font-style: normal; font-size: 0.9rem; color: var(--text-meta); font-weight: 600; } .wp-block-pullquote { border-top: 3px solid var(--tierra); border-bottom: 3px solid var(--tierra); padding: 2rem 1rem; margin: 2.5rem 0; text-align: center; color: var(--petroleo-oscuro); } .wp-block-pullquote blockquote p { font-size: 1.4rem; font-family: Georgia, serif; font-style: italic; } .wp-block-image img { border-radius: var(--radio); box-shadow: var(--sombra); } .wp-block-image figcaption, .wp-block-gallery figcaption { font-size: 0.85rem; color: var(--text-meta); text-align: center; margin-top: 0.6rem; } .wp-block-separator, hr.wp-block-separator { border: none; height: 2px; background: linear-gradient(to right, transparent, var(--tierra-claro), transparent); margin: 3rem auto; opacity: 0.75; } .wp-block-table table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); } .wp-block-table th { background: var(--petroleo); color: #fff; padding: 0.9rem 1.2rem; text-align: left; font-weight: 600; } .wp-block-table td { padding: 0.8rem 1.2rem; border-bottom: 1px solid rgba(0,0,0,0.06); background: var(--bg-card); } .wp-block-table tr:last-child td { border-bottom: none; } .wp-block-group { border-radius: var(--radio); } .wp-block-columns { gap: 1.5rem; } /* Modo oscuro para bloques Gutenberg */ body.tema-oscuro .wp-block-quote { background: rgba(14, 90, 99, 0.25); border-left-color: var(--petroleo-claro); } body.tema-oscuro .wp-block-quote p { color: #e0e0e0; } body.tema-oscuro .wp-block-table td { background: var(--bg-card); border-bottom-color: rgba(255,255,255,0.08); } /* ============ REPRODUCTOR DE AUDIO (GUTENBERG Y NATIVO) ============ */ .wp-block-audio { margin: 2rem 0; padding: 1.4rem 1.6rem; background: var(--crema, #f4f1ea) !important; border: 1px solid rgba(14, 90, 99, 0.2) !important; border-left: 5px solid var(--petroleo) !important; border-radius: var(--radio); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 0.9rem; transition: transform var(--transicion), box-shadow var(--transicion); color: var(--text-heading) !important; } .wp-block-audio:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(6,40,44,0.14); } .wp-block-audio figcaption { font-size: 0.95rem; font-weight: 600; color: var(--text-heading) !important; margin: 0; letter-spacing: 0.3px; opacity: 0.95; } /* Reproductor HTML5 nativo verde con controles blancos */ .wp-block-audio audio, audio { width: 100%; height: 50px; border-radius: 999px; outline: none; background: var(--petroleo) !important; accent-color: #ffffff; box-shadow: 0 4px 14px rgba(14, 90, 99, 0.3); } /* Controles nativos en verde institucional con iconos blancos */ .wp-block-audio audio::-webkit-media-controls-panel, audio::-webkit-media-controls-panel { background: var(--petroleo) !important; color: #ffffff !important; } .wp-block-audio audio::-webkit-media-controls-play-button, .wp-block-audio audio::-webkit-media-controls-mute-button, .wp-block-audio audio::-webkit-media-controls-current-time-display, .wp-block-audio audio::-webkit-media-controls-time-remaining-display { filter: invert(1) brightness(2); } /* MediaElement Player de WordPress (mejs) en verde institucional con botones blancos */ .mejs-container, .wp-audio-shortcode { border-radius: 999px !important; background: var(--petroleo) !important; box-shadow: 0 4px 15px rgba(14, 90, 99, 0.3) !important; overflow: hidden; } .mejs-controls { background: linear-gradient(135deg, var(--petroleo-oscuro), var(--petroleo)) !important; padding: 0 12px !important; } .mejs-playpause-button button, .mejs-volume-button button { filter: brightness(2) drop-shadow(0 1px 2px rgba(0,0,0,0.4)) !important; } .mejs-playpause-button button:focus, .mejs-playpause-button button:hover { outline: none !important; filter: brightness(3) !important; } .mejs-time { color: #ffffff !important; font-weight: 600; } .mejs-time-total, .mejs-time-rail .mejs-time-total { background: rgba(255, 255, 255, 0.28) !important; border-radius: 999px !important; } .mejs-time-current, .mejs-time-rail .mejs-time-current { background: #ffffff !important; border-radius: 999px !important; } .mejs-time-loaded { background: rgba(255, 255, 255, 0.45) !important; border-radius: 999px !important; } .mejs-time-handle { background: #ffffff !important; border-color: var(--petroleo) !important; } .mejs-horizontal-volume-total { background: rgba(255, 255, 255, 0.28) !important; } .mejs-horizontal-volume-current { background: #ffffff !important; } /* En modo oscuro: reproductor luce idéntico y vibrante como en modo claro */ body.tema-oscuro .wp-block-audio { background: #1f2a24 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-left: 5px solid var(--verde, #2e7d5b) !important; color: #ffffff !important; } body.tema-oscuro .wp-block-audio figcaption { color: #ffffff !important; } body.tema-oscuro .wp-block-audio audio, body.tema-oscuro audio { background: var(--petroleo) !important; box-shadow: 0 4px 16px rgba(14, 90, 99, 0.4) !important; } body.tema-oscuro .wp-block-audio audio::-webkit-media-controls-panel, body.tema-oscuro audio::-webkit-media-controls-panel { background: var(--petroleo) !important; color: #ffffff !important; } body.tema-oscuro .mejs-container { background: var(--petroleo) !important; box-shadow: 0 4px 16px rgba(14, 90, 99, 0.4) !important; } body.tema-oscuro .mejs-controls { background: linear-gradient(135deg, var(--petroleo-oscuro), var(--petroleo)) !important; } /* ===================================================================== MAPA · marcadores animados, bocadillos y pantalla completa ===================================================================== */ .mapa-contenedor{position:relative;isolation:isolate;background:var(--petroleo-suave)} .rv-mapa{height:100%;width:100%;min-height:280px} .rv-mapa:focus-visible{outline:3px solid var(--petroleo-claro);outline-offset:-3px} /* Marcador: el punto late (crece y se encoge) y emite aros de pulso */ .rv-mapa-marker{background:transparent;border:0} .rv-pin{position:relative;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;--c:#0e5a63;--d:0s} .rv-pin-punto{ position:relative;z-index:2;width:22px;height:22px;border-radius:50%; background:var(--c);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4); animation:rv-latido 1.6s ease-in-out var(--d) infinite; transition:transform .2s ease; } .rv-pin-pulso{ position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%; background:var(--c);opacity:0;z-index:1; animation:rv-pulso 2.4s ease-out var(--d) infinite; } .rv-pin-pulso--2{animation-delay:calc(var(--d) + 1.2s)} .leaflet-marker-icon:hover .rv-pin-punto, .leaflet-marker-icon:focus .rv-pin-punto{animation-play-state:paused;transform:scale(1.55)} .leaflet-marker-icon:focus-visible{outline:none} .leaflet-marker-icon:focus-visible .rv-pin-punto{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 7px var(--c)} @keyframes rv-latido{0%,100%{transform:scale(.82)}50%{transform:scale(1.28)}} @keyframes rv-pulso{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.7);opacity:0}} @media (prefers-reduced-motion:reduce){ .rv-pin-punto{animation:none} .rv-pin-pulso{animation:none;display:none} } /* Bocadillo (popup) */ .rv-mapa-popup{font-family:inherit;min-width:170px;max-width:260px;line-height:1.4} .rv-mapa-popup .rv-popup-img{width:100%;height:120px;object-fit:cover;border-radius:8px;margin:0 0 .6rem} .rv-mapa-popup .rv-popup-cat{display:inline-block;margin:0 0 .4rem;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--c,var(--petroleo))} .rv-mapa-popup h4.rv-popup-tit{margin:0 0 .35rem;font-size:15px;font-weight:700;line-height:1.25;color:#111827} .rv-mapa-popup .rv-popup-desc{margin:0 0 .5rem;font-size:13px;color:#4b5563;line-height:1.5} .rv-mapa-popup a.rv-popup-link{display:inline-block;padding:6px 12px;border-radius:8px;background:var(--petroleo);color:#fff;font-size:12px;font-weight:700;text-decoration:none} .rv-mapa-popup a.rv-popup-link:hover{background:var(--petroleo-oscuro);color:#fff;text-decoration:none} .leaflet-popup-content{margin:12px 14px} .leaflet-popup-content-wrapper{border-radius:12px} body.tema-oscuro .rv-mapa-popup h4.rv-popup-tit{color:#fff} /* Botón de pantalla completa */ .rv-mapa-ctrl a.rv-mapa-pantalla{display:grid;place-items:center;width:34px;height:34px;color:#222;background:#fff;cursor:pointer} .rv-mapa-ctrl a.rv-mapa-pantalla:hover{background:#f1f1f1;color:var(--petroleo)} .rv-mapa-ctrl a.rv-mapa-pantalla svg{display:block} /* Mapa ampliado: pantalla completa real (API del navegador) o, si no existe, a pantalla del sitio */ .mapa-contenedor.rv-mapa-ampliado{ position:fixed;inset:0;z-index:100010;height:100vh;height:100dvh;width:100vw; max-width:none;border-radius:0;box-shadow:none;margin:0; } .mapa-contenedor:fullscreen{height:100%;width:100%;border-radius:0} .mapa-contenedor:-webkit-full-screen{height:100%;width:100%;border-radius:0} html.rv-sin-scroll,html.rv-sin-scroll body{overflow:hidden} .mapa-contenedor.rv-mapa-ampliado .leaflet-control-zoom{margin-top:10px} /* ===================================================================== VIDEOJUEGOS (EcoCiudadano) ===================================================================== */ .videojuegos{padding:4.5rem 0;background:var(--bg-body)} .vj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem} .vj-card{display:flex;flex-direction:column;background:var(--bg-card);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--transicion),box-shadow var(--transicion);--vj-color:var(--petroleo)} .vj-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(6,40,44,.16)} .vj-card-cuerpo{display:flex;flex-direction:column;gap:.5rem;padding:1.15rem 1.25rem 1.35rem;flex:1} .vj-card-cuerpo h3{margin:0} .vj-card-cuerpo .vj-desc{margin:0;color:var(--text-meta);font-size:.95rem} .vj-card-cuerpo .vj-leccion{margin:0;font-size:.9rem;padding:.55rem .75rem;border-radius:10px;background:var(--verde-suave);color:#1d3d2f} body.tema-oscuro .vj-card-cuerpo .vj-leccion{background:rgba(255,255,255,.07);color:var(--text-body)} .vj-card-cuerpo .vj-jugar{margin-top:auto;align-self:flex-start;cursor:pointer;border:0} .vj-arte{position:relative;display:grid;place-items:center;min-height:150px;background-color:var(--vj-color);background-size:cover;background-position:center;box-shadow:inset 0 -8px 0 rgba(0,0,0,.18)} .vj-arte--imagen{min-height:170px} .vj-emoji{font-size:4.2rem;line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))} .vj-badge{position:absolute;left:12px;top:12px;padding:3px 11px;border-radius:9px;background:#ffc531;color:#1b2230;font-weight:800;font-size:.8rem;box-shadow:0 3px 0 #c98f00;transform:rotate(-3deg)} /* Reproductor con pestañas */ .vj-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.5rem} .vj-tab{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:99px;border:2px solid var(--vj-color,var(--petroleo));background:transparent;color:var(--text-heading);font:inherit;font-weight:700;cursor:pointer;transition:background var(--transicion),color var(--transicion)} .vj-tab:hover{background:color-mix(in srgb,var(--vj-color) 14%,transparent)} .vj-tab.activo{background:var(--vj-color);color:#fff} .vj-tab:focus-visible{outline:3px solid var(--petroleo-claro);outline-offset:2px} .vj-panel[hidden]{display:none} .vj-info{max-width:680px;margin:0 auto 1.25rem;text-align:center} .vj-info h3{margin-bottom:.4rem} .vj-info .vj-desc{color:var(--text-meta);margin-bottom:.6rem} .vj-info .vj-leccion{display:inline-block;margin:0;padding:.5rem .9rem;border-radius:10px;background:var(--verde-suave);color:#1d3d2f;font-size:.92rem} body.tema-oscuro .vj-info .vj-leccion{background:rgba(255,255,255,.07);color:var(--text-body)} /* Marco del juego */ .vj-marco{position:relative;margin:0 auto;border-radius:22px;overflow:hidden;background:#1b2230;box-shadow:0 18px 40px rgba(6,40,44,.35)} .vj-marco--vertical{width:min(100%,460px);aspect-ratio:450/800;max-height:86vh} .vj-marco--horizontal{width:min(100%,980px);aspect-ratio:960/540} @supports not (aspect-ratio:1){ .vj-marco--vertical{height:min(86vh,820px)} .vj-marco--horizontal{height:min(56vw,552px)} } .vj-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#1b2230} .vj-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:transparent;display:block} .vj-poster[hidden]{display:none} .vj-poster .vj-arte{position:absolute;inset:0;min-height:0} .vj-poster .vj-emoji{font-size:clamp(4rem,14vw,7rem)} .vj-poster-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;padding-left:6px;background:#ffc531;color:#1b2230;box-shadow:0 6px 0 #c98f00,0 14px 24px rgba(0,0,0,.35);transition:transform .15s ease} .vj-poster:hover .vj-poster-play{transform:translate(-50%,-50%) scale(1.08)} .vj-poster:focus-visible{outline:4px solid #ffc531;outline-offset:-6px} .vj-barra-marco{position:absolute;right:10px;top:10px;z-index:3;opacity:0;transition:opacity .2s} .vj-marco:hover .vj-barra-marco,.vj-barra-marco:focus-within{opacity:1} .vj-marco:fullscreen,.vj-modal-caja:fullscreen{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0} .vj-marco:fullscreen .vj-barra-marco{display:none} .vj-modal-caja:fullscreen .vj-modal-cuerpo{flex:1} .vj-modal-caja:fullscreen .vj-marco{width:min(100%,calc((100vh - 70px) * 450 / 800));max-height:none} .vj-modal-caja:fullscreen .vj-marco--horizontal{width:min(100%,calc((100vh - 70px) * 960 / 540))} .vj-pseudo-fs{position:fixed !important;inset:0;z-index:100010;width:100vw !important;height:100dvh !important;max-height:none !important;aspect-ratio:auto !important;border-radius:0} /* Ventana de juego (modo tarjetas) */ .vj-modal{position:fixed;inset:0;z-index:100005;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(6,40,44,.9)} .vj-modal[hidden]{display:none} .vj-modal-caja{display:flex;flex-direction:column;width:100%;max-width:1020px;max-height:100%;background:#1b2230;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)} .vj-modal-barra{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem .55rem 1.1rem;color:#fff;background:#2a3446} .vj-modal-titulo{flex:1;font-family:Georgia,serif;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vj-modal-btn{width:38px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center} .vj-modal-btn:hover{background:rgba(255,255,255,.25)} .vj-modal-btn:focus-visible{outline:3px solid #ffc531} .vj-modal-cuerpo{display:flex;justify-content:center;padding:1rem;overflow:auto} .vj-modal .vj-marco{box-shadow:none;flex-shrink:0} .vj-modal .vj-marco--vertical{width:min(100%,calc((100vh - 130px) * 450 / 800),460px);max-height:none} .vj-modal .vj-marco--horizontal{width:min(100%,calc((100vh - 130px) * 960 / 540),980px)} @media (max-width:600px){.videojuegos{padding:3rem 0}.vj-modal{padding:0}.vj-modal-caja{border-radius:0;height:100%}.vj-modal-cuerpo{padding:.5rem;align-items:center}} /* Ajustes finos de videojuegos */ .vj-poster .vj-arte{align-items:start;padding-top:12%} .vj-poster .vj-emoji{font-size:clamp(3rem,10vw,5.5rem)} .vj-poster-play{top:62%} .pagina-contenido .videojuegos{padding:2rem 0;background:transparent} .pagina-contenido .mapa{background:transparent} @media (max-width:600px) and (orientation:portrait){ .vj-modal-cuerpo[data-ratio="horizontal"]::after{content:"Tip: gira tu teléfono o usa la pantalla completa para jugar más cómodo.";display:block;position:absolute;left:1rem;right:1rem;bottom:1rem;text-align:center;color:#c9d1dd;font-size:.9rem} .vj-modal-cuerpo{position:relative} } /* ===================================================================== EFECTOS AMBIENTALES · aurora, grano, parallax y ola divisoria Propios de Raíces Digitales: orgánicos y discretos (no el brillo tipo SaaS), en los mismos tonos verde/tierra/petróleo de la paleta. Todos se apagan solos con "reducir movimiento" y se pueden desactivar desde Personalizar → Apariencia Global. ===================================================================== */ /* Aurora: dos manchas de luz muy desenfocadas que respiran despacio detrás del degradado de la portada. */ .rd-aurora{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none} .rd-aurora::before,.rd-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.38;will-change:transform} .rd-aurora::before{width:46vw;height:46vw;max-width:480px;max-height:480px;background:var(--verde);top:-16%;left:-10%;animation:rd-aurora-a 24s ease-in-out infinite alternate} .rd-aurora::after{width:38vw;height:38vw;max-width:420px;max-height:420px;background:var(--tierra);bottom:-18%;right:-8%;animation:rd-aurora-b 28s ease-in-out infinite alternate;animation-delay:-6s} @keyframes rd-aurora-a{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,3%) scale(1.08)}} @keyframes rd-aurora-b{from{transform:translate(0,0) scale(1)}to{transform:translate(-3%,-4%) scale(1.1)}} /* Grano: textura de ruido casi imperceptible, un aire más editorial que plano. */ .rd-grano{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* Ola divisoria: transición orgánica entre la portada y la sección siguiente. Posición absoluta a propósito: .hero es un contenedor flex (centra su contenido), así que sin esto la ola se centraría como si fuera más contenido en vez de quedarse pegada abajo del todo. */ .rd-ola-divisor{display:block;width:100%;height:48px;position:absolute;left:0;bottom:0;z-index:3;line-height:0} .rd-ola-divisor path{fill:var(--bg-body)} @media (min-width:768px){.rd-ola-divisor{height:72px}} /* Parallax: el fondo de la portada se mueve algo más lento que el scroll (ver assets/js/main.js). Más alto que su contenedor para que el desplazamiento no deje un hueco visible arriba o abajo. */ .rd-parallax-capa{will-change:transform;top:-12%;bottom:-12%;height:124%} @media (prefers-reduced-motion:reduce){ .rd-aurora::before,.rd-aurora::after{animation:none} }