del tema padre para secciones de ancho completo) ========================================================================== hello-elementor (tema padre) limita ".site-main" con max-width según breakpoint (500/600/800/1140px — ver assets/css/theme.css del tema padre) en CUALQUIER página cuyo no tenga una clase "elementor-page-*". Ese límite es responsable del look "columna angosta tipo blog" en plantillas PHP planas como single-ciudad.php: aunque una sección interna no declare ningún max-width propio, sigue quedando encajonada dentro de ese ancho. home.php ya resuelve esto para el blog con ".blog .site-main{max-width: 100%!important}" (ver más abajo, sección 5) — esta es la misma técnica, como utilidad reusable para cualquier sección que necesite ir de borde a borde del viewport (mismo patrón que ".alignfull" del tema padre en assets/css/theme.css: "margin-inline:calc(50% - 50vw); width:100vw"). Requiere que algún ancestro tenga overflow-x:hidden (ya lo tienen #ciudad-page-ctx y #cobertura-section-ctx) para que el 100vw no produzca scroll horizontal en navegadores con scrollbar clásica. */ .full-bleed { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } /* ========================================================================== 3. APLICACIÓN GLOBAL BASE ========================================================================== */ h1, h2, h3 { font-family: var(--font-universo); color: var(--color-azul-oscuro); } /* ========================================================================== 4. OPTIMIZACIÓN EDITORIAL PARA ENTRADAS INDIVIDUALES (BLOGS) ========================================================================== */ .single-post-universo .page-content { max-width: 1200px !important; margin: 160px auto 60px auto !important; padding: 0 24px !important; display: block !important; } .single-post-universo h1.entry-title { font-family: var(--font-universo) !important; font-weight: 700 !important; color: var(--color-azul-oscuro) !important; font-size: 42px !important; line-height: 1.25 !important; margin-bottom: 15px !important; } .blog-universo-meta { font-family: var(--font-universo); font-size: 0.9rem; color: #666; margin-bottom: 35px; display: flex; gap: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; } .blog-universo-body { font-family: var(--font-universo); font-weight: 400; font-size: 19px; line-height: 1.85; color: #2b2b2b; } .blog-universo-body p { margin-bottom: 28px !important; } .blog-universo-body h2 { font-family: var(--font-universo) !important; font-weight: 700 !important; color: var(--color-azul-digital) !important; font-size: 28px !important; margin-top: 45px !important; margin-bottom: 20px !important; } .blog-universo-body h3 { font-family: var(--font-universo) !important; font-weight: 700 !important; color: var(--color-azul-cielo) !important; font-size: 23px !important; margin-top: 35px !important; margin-bottom: 15px !important; } .blog-universo-body a { color: var(--color-azul-digital); text-decoration: underline; font-weight: 700; } .blog-universo-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 35px auto; display: block; box-shadow: 0 4px 20px rgba(10, 20, 68, 0.08); } /* ========================================================================== 5. GRID DINÁMICO DE BLOGS ANIMADO Y PREMIUM (SIN REPETICIONES) ========================================================================== */ /* Animación de entrada para las tarjetas */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Contenedor estructural - Separación del menú sticky. Antes eran 160px porque la rejilla era lo primero de la página y tenía que despejar el nav fijo ella sola; ahora el hero del blog (home.php) ya la despeja, así que aquí solo hace falta un respiro corto. */ .container-blog-layout { padding-top: 40px; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); min-height: 100vh; } .blog .site-main, .blog .page-content, .blog #content { max-width: 100% !important; width: 100% !important; } .blog-container-custom { max-width: 1240px !important; margin: 0 auto; padding: 0px 24px 80px 24px; } /* Grid de 3 Columnas */ .blog-grid-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Fuerza 3 columnas exactas */ gap: 40px; margin-bottom: 60px; } /* Tarjeta Médica Animada */ .blog-card-custom { background: #ffffff; border-radius: 24px; border: 1px solid rgba(10, 20, 68, 0.05); box-shadow: 0 10px 35px rgba(10, 20, 68, 0.03); display: flex; flex-direction: column; overflow: hidden; position: relative; animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--card-delay, 0s); transition: var(--transition-smooth); } /* Efecto Hover en Tarjeta (Scroll up + Sombra de profundidad) */ .blog-card-custom:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 25px 55px rgba(10, 20, 68, 0.12); border-color: rgba(44, 63, 205, 0.2); } /* Wrapper de Imagen con Zoom */ .card-image-wrapper { width: 100%; height: 240px; overflow: hidden; position: relative; background-color: var(--color-azul-oscuro); } /* Velo de gradiente para dar profundidad a la imagen al pasar el mouse */ .card-image-wrapper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 68, 0.35) 0%, rgba(10, 20, 68, 0) 35%, rgba(10, 20, 68, 0) 100%); opacity: 0; transition: var(--transition-smooth); pointer-events: none; } .blog-card-custom:hover .card-image-wrapper::after { opacity: 1; } .imagen-portada-blog { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } /* Zoom + Filtro cinemático al pasar el mouse por la tarjeta */ .blog-card-custom:hover .imagen-portada-blog { transform: scale(1.08) rotate(0.5deg); opacity: 0.95; } /* Contenido Interno */ .card-content-wrapper { padding: 32px; display: flex; flex-direction: column; flex-grow: 1; } /* Título con Fuente Corporativa y Efecto de color */ .titulo-blog { font-family: var(--font-universo); font-size: 22px; line-height: 1.35; font-weight: 700; margin: 0 0 24px 0; } .titulo-blog a { color: var(--color-azul-oscuro); text-decoration: none; transition: color 0.3s ease; } .blog-card-custom:hover .titulo-blog a { color: var(--color-azul-digital); } /* Botón Individual "Leer más" con Micro-interacción */ .card-footer-action { margin-top: auto; } .btn-leer-nota { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; color: var(--color-azul-digital) !important; border: 2px solid var(--color-azul-digital); padding: 10px 24px; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 50px; transition: var(--transition-smooth); } .btn-leer-nota-icon { transition: var(--transition-smooth); } /* El botón se rellena de forma fluida en hover y la flecha avanza */ .blog-card-custom:hover .btn-leer-nota { background-color: var(--color-azul-digital); color: #ffffff !important; box-shadow: 0 6px 15px rgba(44, 63, 205, 0.25); } .blog-card-custom:hover .btn-leer-nota-icon { transform: translateX(4px); } /* --- SECCIÓN BOTÓN AJAX GLOBAL DE ABAJO --- */ .contenedor-boton-ajax { text-align: center; margin-top: 20px; } .boton-cargar-mas { background-color: var(--color-azul-oscuro); color: #ffffff; padding: 16px 45px; font-size: 16px; font-weight: 700; font-family: var(--font-universo); border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 8px 25px rgba(10, 20, 64, 0.15); transition: var(--transition-smooth); } .boton-cargar-mas:hover { background-color: var(--color-azul-digital); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(44, 63, 205, 0.3); } /* Y agregamos un media query al final para que en móviles no se rompa y pase a 1 sola columna */ @media (max-width: 1024px) { .blog-grid-custom { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } } /* Auditoría Doutor (limpieza final pre-migración): esta sección tenía ~695 líneas de dos implementaciones viejas del carrusel de testimonios (.testimonio-*/.slider-btn y .dr-colegas-*/.dr-doctor-card/.dr-avatar-*/ .dr-metric-*/.dr-btn-ver) — ninguna de las dos genera markup hoy: [carrusel_testimonios] usa DR_Testimonios_Grid (inc/testimonios/, css/testimonios/testimonios-grid.css) desde functions.php:246-262, que documenta ahí mismo que ambas quedaron sin PHP que las genere. Confirmado con un barrido de las 17 páginas del sitio + todo el PHP/JS del tema: cero coincidencias de estas 47 clases. Recuperable en el historial de git (rama feature/testimonios-grid-ajax) si algún día hiciera falta.