/*
Theme Name: Ricardo Arcega Child
Template: astra
Version: 21.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

/* ══════════════════════════════════════════════════════════════
   FIX ASTRA: quitar todos los fondos blancos que tapan Elementor
══════════════════════════════════════════════════════════════ */
body, #page, #content, .site-content, .ast-container,
#primary, #primary.content-area, .ast-plain-container,
.ast-page-builder-template, .entry-content, .hentry {
  background: transparent !important;
  background-color: transparent !important;
}

.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template .site .site-content #primary,
.ast-plain-container .ast-article-post,
.ast-plain-container .ast-article-single {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.elementor-section.elementor-section-stretched {
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-page .elementor { margin-top: 0 !important; }
body { background-color: #f8fafc !important; }

/* ══════════════════════════════════════════════════════════════
   CRÍTICO: anular el color que Astra fuerza en h1-h6 y enlaces
   dentro de mis secciones .ra-section
══════════════════════════════════════════════════════════════ */

/* Especificidad alta — gana siempre sobre Astra */
.elementor .ra-section h1,
.elementor .ra-section h2,
.elementor .ra-section h3,
.elementor .ra-section h4,
.elementor .ra-section h5,
.elementor .ra-section h6 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
}

/* Títulos sobre fondo claro (gris muy oscuro, casi negro) */
.elementor .ra-section .ra-title-dark,
.elementor .ra-section .ra-title-dark * {
  color: #0f172a !important;
}

/* Títulos sobre fondo navy → blanco SIEMPRE */
.elementor .ra-section .ra-title-light,
.elementor .ra-section .ra-title-light * {
  color: #ffffff !important;
}

/* Las palabras destacadas <em> en verde — gana sobre los dos anteriores */
.elementor .ra-section .ra-title em,
.elementor .ra-section .ra-title-dark em,
.elementor .ra-section .ra-title-light em {
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  background: none !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

/* H1 del hero — siempre blanco con em verde */
.elementor .ra-section .ra-hero h1 {
  color: #ffffff !important;
}
.elementor .ra-section .ra-hero h1 em {
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  background: none !important;
}

/* ══════════════════════════════════════════════════════════════
   BOTONES — bulletproof contra Astra
══════════════════════════════════════════════════════════════ */
.elementor .ra-section a.ra-btn,
.elementor .ra-section a.ra-btn:link,
.elementor .ra-section a.ra-btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.95rem 2rem !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  border: 1.5px solid transparent !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  box-shadow: none;
}

.elementor .ra-section a.ra-btn--primary,
.elementor .ra-section a.ra-btn--primary:link,
.elementor .ra-section a.ra-btn--primary:visited {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(16,185,129,0.4) !important;
}
.elementor .ra-section a.ra-btn--primary:hover {
  background: #059669 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(16,185,129,0.55) !important;
}

.elementor .ra-section a.ra-btn--ghost,
.elementor .ra-section a.ra-btn--ghost:link,
.elementor .ra-section a.ra-btn--ghost:visited {
  background: rgba(255,255,255,0.06) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.elementor .ra-section a.ra-btn--ghost:hover {
  background: rgba(16,185,129,0.1) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
  transform: translateY(-2px);
}

.elementor .ra-section a.ra-btn--dark,
.elementor .ra-section a.ra-btn--dark:link,
.elementor .ra-section a.ra-btn--dark:visited {
  background: #0b1220 !important;
  color: #ffffff !important;
}
.elementor .ra-section a.ra-btn--dark:hover {
  background: #10b981 !important;
  color: #ffffff !important;
}

.elementor .ra-section a.ra-btn--outline,
.elementor .ra-section a.ra-btn--outline:link,
.elementor .ra-section a.ra-btn--outline:visited {
  background: transparent !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}
.elementor .ra-section a.ra-btn--outline:hover {
  color: #10b981 !important;
  border-color: #10b981 !important;
}

/* Quitar subrayado y color de Astra en TODOS los enlaces internos */
.elementor .ra-section a:not(.ra-btn) {
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
.main-header-bar, .site-header, #masthead {
  background: rgba(15,23,42,0.97) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}
.site-title a, .site-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.main-header-menu .menu-item > a,
.main-navigation .menu-item > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.72) !important;
  font-weight: 500 !important;
}
.main-header-menu .menu-item > a:hover {
  color: #10b981 !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer, #colophon {
  background: #0b1220 !important;
  color: rgba(255,255,255,0.45) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  text-align: center !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.site-footer a, #colophon a {
  color: #10b981 !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════════════
   TIPOGRAFÍA BASE
══════════════════════════════════════════════════════════════ */
body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  color: #0f172a !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOG
══════════════════════════════════════════════════════════════ */
.entry-content {
  font-family: 'Inter', sans-serif !important;
  color: #475569 !important;
  line-height: 1.85 !important;
}
.entry-content h2, .entry-content h3 {
  font-family: 'Cormorant Garamond', serif !important;
  color: #0f172a !important;
}
.entry-content a { color: #10b981 !important; }
.entry-content blockquote {
  border-left: 3px solid #10b981 !important;
  padding-left: 1.5rem !important;
  font-style: italic !important;
}
.entry-content code {
  background: #f1f5f9 !important;
  color: #6366f1 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 4px !important;
}
.entry-content pre {
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  padding: 1.5rem !important;
  border-radius: 10px !important;
  overflow-x: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   WPFORMS
══════════════════════════════════════════════════════════════ */
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.8rem 1rem !important;
  background: #ffffff !important;
}
.wpforms-field input:focus, .wpforms-field textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12) !important;
}
.wpforms-field label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #475569 !important;
}
.wpforms-submit-container button {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 0.9rem 2rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4) !important;
}
.wpforms-submit-container button:hover { background: #059669 !important; }

/* ══════════════════════════════════════════════════════════════
   FIX v6 — Padding lateral del container
   Más respiración en pantallas grandes y mejor manejo del móvil
══════════════════════════════════════════════════════════════ */
.elementor .ra-section .ra-container {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: clamp(24px, 5vw, 60px) !important;
  padding-right: clamp(24px, 5vw, 60px) !important;
  box-sizing: border-box !important;
}

/* En móvil, un poco más de aire visual */
@media (max-width: 600px) {
  .elementor .ra-section .ra-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Caso especial: el hero NO usa ra-container (está a sangre completa)
   pero la columna izquierda con el texto sí necesita padding propio.
   Refuerzo por si Astra interfiere */
.elementor .ra-section .ra-hero__left {
  padding-left: clamp(28px, 6vw, 80px) !important;
  padding-right: clamp(28px, 5vw, 70px) !important;
}

@media (max-width: 900px) {
  .elementor .ra-section .ra-hero__left {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX v7 — Menú móvil con fondo navy
   En móvil Astra abre un panel off-canvas con su propio fondo
══════════════════════════════════════════════════════════════ */

/* Botón hamburguesa (icono) */
.ast-mobile-menu-buttons-fill .ast-button-wrap .menu-toggle.main-header-menu-toggle,
.ast-button-wrap .menu-toggle,
.main-header-bar .main-header-bar-navigation .ast-mobile-menu-buttons {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 8px !important;
}

.ast-button-wrap .menu-toggle .ast-mobile-svg,
.menu-toggle svg,
.menu-toggle .menu-toggle-icon {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Panel del menú desplegado en móvil */
.ast-mobile-header-wrap .main-header-bar,
.main-header-bar .main-header-bar-navigation.toggle-on,
.main-header-bar-navigation.toggle-on,
.main-navigation.toggle-on,
.ast-mobile-popup-drawer .ast-mobile-popup-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
}

/* Items del menú en móvil */
.main-header-menu.submenu-with-border li,
.ast-mobile-popup-drawer .menu-item,
.ast-mobile-popup-content .menu-item,
.main-navigation.toggle-on .menu-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.ast-mobile-popup-drawer .menu-item > a,
.ast-mobile-popup-content .menu-item > a,
.main-navigation.toggle-on .menu-item > a,
.main-header-menu.submenu-with-border .menu-item > a {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 1rem 1.4rem !important;
}

.ast-mobile-popup-drawer .menu-item > a:hover,
.ast-mobile-popup-content .menu-item > a:hover,
.main-navigation.toggle-on .menu-item > a:hover,
.main-header-menu.submenu-with-border .menu-item.current-menu-item > a {
  color: #10b981 !important;
  background: rgba(16,185,129,0.06) !important;
}

/* Botón de cierre del popup */
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .ast-mobile-popup-header {
  background: #0b1220 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.ast-mobile-popup-drawer .menu-toggle-close svg,
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-close .ast-mobile-svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Submenús desplegables dentro del menú móvil */
.ast-mobile-popup-drawer .sub-menu,
.main-navigation.toggle-on .sub-menu {
  background: rgba(255,255,255,0.04) !important;
}

.ast-mobile-popup-drawer .ast-submenu-expanded > a,
.main-navigation.toggle-on .ast-submenu-expanded > a {
  background: rgba(16,185,129,0.08) !important;
  color: #10b981 !important;
}

/* Iconos de flecha desplegable */
.ast-header-navigation-arrow,
.ast-mobile-popup-drawer .ast-header-navigation-arrow {
  color: rgba(255,255,255,0.6) !important;
}

/* Body cuando el menú móvil está abierto — fondo overlay */
.ast-mobile-popup-drawer.active::before,
.ast-mobile-popup-overlay {
  background: rgba(0,0,0,0.5) !important;
}

/* Logo / título del sitio en versión móvil — asegurar blanco */
@media (max-width: 921px) {
  .ast-mobile-header-wrap .site-title,
  .ast-mobile-header-wrap .site-title a,
  .ast-mobile-header-wrap .site-description {
    color: #ffffff !important;
  }
}

/* Asegurar que el header sigue navy en móvil */
@media (max-width: 921px) {
  .main-header-bar,
  .ast-mobile-header-wrap .main-header-bar,
  .ast-replace-site-logo-transparent.ast-theme-transparent-header .main-header-bar {
    background: rgba(15,23,42,0.97) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FIX v8 — Menú móvil con fondo navy TOTAL
   Cubre TODOS los wrappers posibles de Astra en cualquier
   versión free / pro / nueva / clásica
══════════════════════════════════════════════════════════════ */

/* Fondo navy en absolutamente todos los contenedores del menú móvil */
html body .ast-mobile-popup-drawer,
html body .ast-mobile-popup-drawer .ast-mobile-popup-overlay,
html body .ast-mobile-popup-drawer .ast-mobile-popup-content,
html body .ast-mobile-popup-drawer .ast-mobile-popup-inner,
html body .ast-mobile-popup-drawer .main-header-bar-navigation,
html body .ast-mobile-popup-drawer .main-header-menu,
html body .ast-mobile-popup-drawer .main-navigation,
html body .ast-mobile-popup-drawer nav,
html body .ast-mobile-popup-drawer ul,
html body .ast-mobile-popup-drawer .menu,
html body .ast-mobile-popup-drawer .menu-primary-menu-container,
html body .ast-mobile-popup-drawer #ast-mobile-popup-inner-content,
html body .ast-mobile-popup-content,
html body .ast-mobile-popup-wrap,
html body .ast-mobile-header-content,
html body .ast-mobile-menu-buttons-fill,
html body .ast-mobile-header-wrap .main-header-bar,
html body .ast-mobile-header-wrap .main-header-bar-wrap,
html body .ast-builder-menu-mobile,
html body .ast-builder-menu-mobile-inner,
html body .ast-flyout-menu-enable .main-header-bar-navigation {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
}

/* Forzar fondo navy en CUALQUIER nivel anidado dentro del popup */
html body .ast-mobile-popup-drawer * {
  background-color: transparent;
}

/* Pero los items con hover/active sí tienen su color */
html body .ast-mobile-popup-drawer .menu-item.current-menu-item,
html body .ast-mobile-popup-drawer .menu-item:hover {
  background-color: rgba(16,185,129,0.06) !important;
}

/* Quitar bordes blancos / cajas blancas dentro del popup */
html body .ast-mobile-popup-drawer .ast-mobile-popup-content,
html body .ast-mobile-popup-drawer ul,
html body .ast-mobile-popup-drawer ul li {
  border: none !important;
  box-shadow: none !important;
}

/* Border sutil solo entre items */
html body .ast-mobile-popup-drawer .menu-item {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Forzar texto blanco en items del menú móvil */
html body .ast-mobile-popup-drawer a,
html body .ast-mobile-popup-drawer .menu-item > a,
html body .ast-mobile-popup-drawer .menu-link {
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
}

html body .ast-mobile-popup-drawer .menu-item.current-menu-item > a,
html body .ast-mobile-popup-drawer a:hover {
  color: #10b981 !important;
  background: rgba(16,185,129,0.06) !important;
}

/* Header del popup (donde está el nombre + botón cerrar) */
html body .ast-mobile-popup-drawer .ast-mobile-popup-header,
html body .ast-mobile-popup-drawer header {
  background: #0b1220 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Asegurar que el body no genere fondo blanco detrás cuando se abre */
html body.ast-mobile-popup-active {
  background: #0b1220 !important;
}

/* Versión alternativa: menú clásico inline (no popup) */
html body .main-header-bar.toggled-on,
html body .ast-main-header-bar-alignment .main-header-bar-navigation.toggle-on {
  background: #0b1220 !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v11 — Estilo coherente de WPForms con el diseño
   Cubre: formulario en fondo blanco (página contacto) y
   formulario en fondo navy (home, caja oscura)
══════════════════════════════════════════════════════════════ */

/* ─── Resetear lo que WPForms aplica por defecto y ensucia el diseño ─── */
html body div.wpforms-container,
html body div.wpforms-container-full {
  margin: 0 !important;
  max-width: 100% !important;
}

html body div.wpforms-container form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ─── Labels principales (Nombre, Email, Mensaje) ─── */
html body .wpforms-container label.wpforms-field-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

/* ─── Sub-labels (los "NOMBRE / APELLIDOS / CORREO ELECTRÓNICO" feos) ─── */
html body .wpforms-container label.wpforms-field-sublabel {
  display: none !important;
}

html body .wpforms-container .wpforms-field-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  color: #94a3b8 !important;
  margin-top: 0.4rem !important;
}

/* ─── Inputs / textareas / selects ─── */
html body .wpforms-container input.wpforms-field-medium,
html body .wpforms-container input.wpforms-field-large,
html body .wpforms-container input.wpforms-field-small,
html body .wpforms-container input[type="text"],
html body .wpforms-container input[type="email"],
html body .wpforms-container input[type="tel"],
html body .wpforms-container input[type="url"],
html body .wpforms-container textarea,
html body .wpforms-container select {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}

html body .wpforms-container textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

html body .wpforms-container input:focus,
html body .wpforms-container textarea:focus,
html body .wpforms-container select:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.12) !important;
}

/* ─── Asterisco rojo de campos obligatorios ─── */
html body .wpforms-container .wpforms-required-label {
  color: #ef4444 !important;
  font-weight: 600 !important;
}

/* ─── Botón Enviar ─── */
html body .wpforms-container button.wpforms-submit,
html body .wpforms-container input[type="submit"].wpforms-submit {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: #10b981 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0.95rem 2.2rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4) !important;
  transition: all 0.25s ease !important;
  margin-top: 0.5rem !important;
  width: auto !important;
}

html body .wpforms-container button.wpforms-submit:hover,
html body .wpforms-container input[type="submit"].wpforms-submit:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(16,185,129,0.55) !important;
}

/* ─── Espaciado entre campos ─── */
html body .wpforms-container .wpforms-field {
  padding: 0 0 1.2rem 0 !important;
}

/* ─── MENSAJE DE CONFIRMACIÓN (después de enviar) ─── */
html body div.wpforms-confirmation-container-full,
html body div.wpforms-confirmation-container {
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(59,130,246,0.1)) !important;
  border: 1px solid rgba(16,185,129,0.4) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.8rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.15) !important;
}

html body div.wpforms-confirmation-container-full p,
html body div.wpforms-confirmation-container p {
  color: #0f172a !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ─── ERRORES DE VALIDACIÓN ─── */
html body .wpforms-container label.wpforms-error,
html body .wpforms-container em.wpforms-error {
  color: #ef4444 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  margin-top: 0.3rem !important;
  display: block !important;
}

html body .wpforms-container input.wpforms-error,
html body .wpforms-container textarea.wpforms-error {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
}

/* ══════════════════════════════════════════════════════════════
   ADAPTACIÓN: formulario sobre fondo NAVY (caja oscura de home)
   Si está dentro de .ra-cbox, invertir colores de labels
══════════════════════════════════════════════════════════════ */
.ra-cbox .wpforms-container label.wpforms-field-label {
  color: rgba(255,255,255,0.75) !important;
}

.ra-cbox .wpforms-container input,
.ra-cbox .wpforms-container textarea {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

.ra-cbox .wpforms-container input::placeholder,
.ra-cbox .wpforms-container textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

.ra-cbox .wpforms-container input:focus,
.ra-cbox .wpforms-container textarea:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2) !important;
}

.ra-cbox .wpforms-confirmation-container,
.ra-cbox .wpforms-confirmation-container-full {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.4) !important;
}

.ra-cbox .wpforms-confirmation-container p {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v12 — Formulario WPForms dentro de caja navy (.ra-cbox)
   • Texto que se escribe debe ser BLANCO (no oscuro)
   • Mensaje de confirmación con texto BLANCO sobre verde
══════════════════════════════════════════════════════════════ */

/* Forzar color del texto que escribe el usuario — BLANCO */
html body .ra-cbox .wpforms-container input,
html body .ra-cbox .wpforms-container input[type="email"],
html body .ra-cbox .wpforms-container input[type="text"],
html body .ra-cbox .wpforms-container input[type="tel"],
html body .ra-cbox .wpforms-container input[type="url"],
html body .ra-cbox .wpforms-container textarea {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* Autofill del navegador (cuando Chrome rellena automáticamente
   y pone fondo amarillo claro con texto oscuro) */
html body .ra-cbox .wpforms-container input:-webkit-autofill,
html body .ra-cbox .wpforms-container input:-webkit-autofill:hover,
html body .ra-cbox .wpforms-container input:-webkit-autofill:focus,
html body .ra-cbox .wpforms-container textarea:-webkit-autofill {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
  caret-color: #ffffff !important;
}

/* Cursor de escritura visible sobre el negro */
html body .ra-cbox .wpforms-container input,
html body .ra-cbox .wpforms-container textarea {
  caret-color: #10b981 !important;
}

/* Selección de texto */
html body .ra-cbox .wpforms-container input::selection,
html body .ra-cbox .wpforms-container textarea::selection {
  background: rgba(16,185,129,0.3) !important;
  color: #ffffff !important;
}

/* ─── MENSAJE DE CONFIRMACIÓN dentro de la caja navy ─── */
html body .ra-cbox div.wpforms-confirmation-container-full,
html body .ra-cbox div.wpforms-confirmation-container,
html body .ra-cbox .wpforms-confirmation-container-full,
html body .ra-cbox .wpforms-confirmation-container {
  background: rgba(16,185,129,0.15) !important;
  border: 1px solid rgba(16,185,129,0.5) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.8rem !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,0.2) !important;
}

html body .ra-cbox div.wpforms-confirmation-container-full *,
html body .ra-cbox div.wpforms-confirmation-container *,
html body .ra-cbox .wpforms-confirmation-container p,
html body .ra-cbox .wpforms-confirmation-container-full p {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* Mensajes de error (texto rojo) sobre fondo oscuro */
html body .ra-cbox .wpforms-container label.wpforms-error,
html body .ra-cbox .wpforms-container em.wpforms-error {
  color: #fca5a5 !important;
  font-weight: 500 !important;
}

/* Input con error visual sobre fondo oscuro */
html body .ra-cbox .wpforms-container input.wpforms-error,
html body .ra-cbox .wpforms-container textarea.wpforms-error {
  border-color: #ef4444 !important;
  background: rgba(239,68,68,0.08) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v13 — Estilo de POSTS individuales del blog
   Se aplica solo en single-post.php (no en páginas Elementor)
══════════════════════════════════════════════════════════════ */

/* Solo aplica en posts (single.php) — los wrappers single .post tienen .single-post */
body.single-post #content,
body.single-post .site-content,
body.single-post #primary {
  background: #f8fafc !important;
  padding: clamp(40px, 6vh, 80px) 0 !important;
}

/* Container del post */
body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .post-navigation,
body.single-post #comments {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding-left: clamp(24px, 5vw, 40px) !important;
  padding-right: clamp(24px, 5vw, 40px) !important;
  box-sizing: border-box !important;
}

/* Cabecera del post */
body.single-post .entry-header {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: clamp(2.5rem, 5vw, 4rem) !important;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06), 0 16px 48px rgba(15,23,42,0.06) !important;
  margin-bottom: 2rem !important;
  text-align: center !important;
}

/* Categoría arriba del título */
body.single-post .ast-blog-meta-container,
body.single-post .entry-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #10b981 !important;
  margin-bottom: 1rem !important;
}

body.single-post .ast-blog-meta-container a,
body.single-post .entry-meta a {
  color: #10b981 !important;
  text-decoration: none !important;
}

/* Título del post */
body.single-post .entry-title,
body.single-post h1.entry-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: #0f172a !important;
  margin: 0 0 1rem !important;
}

/* Meta info (autor, fecha) debajo del título */
body.single-post .post-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin-top: 1rem !important;
}

body.single-post .post-meta a {
  color: #64748b !important;
  text-decoration: none !important;
}

body.single-post .post-meta a:hover { color: #10b981 !important; }

/* Imagen destacada — full width, redondeada */
body.single-post .post-thumb-img-content,
body.single-post .single-thumbnail-image {
  max-width: 1300px !important;
  margin: 0 auto 2rem !important;
}

body.single-post .post-thumb-img-content img,
body.single-post .single-thumbnail-image img {
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(15,23,42,0.12) !important;
}

/* CONTENIDO del post */
body.single-post .entry-content {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: clamp(2.5rem, 5vw, 4rem) !important;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06), 0 16px 48px rgba(15,23,42,0.06) !important;
}

body.single-post .entry-content p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  margin: 0 0 1.5rem !important;
}

/* Primer párrafo más grande (lead) */
body.single-post .entry-content > p:first-of-type {
  font-size: 1.2rem !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  font-weight: 400 !important;
}

/* Subtítulos H2, H3 dentro del post */
body.single-post .entry-content h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  margin: 2.5rem 0 1rem !important;
  line-height: 1.25 !important;
}

body.single-post .entry-content h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem) !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 2rem 0 0.8rem !important;
  line-height: 1.3 !important;
}

/* Enlaces dentro del contenido */
body.single-post .entry-content a {
  color: #10b981 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
body.single-post .entry-content a:hover {
  color: #059669 !important;
  text-decoration-thickness: 2px !important;
}

/* Listas */
body.single-post .entry-content ul,
body.single-post .entry-content ol {
  margin: 0 0 1.5rem !important;
  padding-left: 1.5rem !important;
}

body.single-post .entry-content ul li,
body.single-post .entry-content ol li {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.02rem !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  margin-bottom: 0.5rem !important;
}

body.single-post .entry-content ul li::marker {
  color: #10b981 !important;
}

/* Citas */
body.single-post .entry-content blockquote {
  background: #f8fafc !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 1.5rem 2rem !important;
  margin: 2rem 0 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.2rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
}

body.single-post .entry-content blockquote p { margin: 0 !important; font-size: inherit !important; }

/* Código inline */
body.single-post .entry-content code {
  background: #f1f5f9 !important;
  color: #6366f1 !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 5px !important;
  font-family: ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 0.92em !important;
  border: 1px solid #e2e8f0 !important;
}

/* Bloques de código */
body.single-post .entry-content pre {
  background: #0b1220 !important;
  color: #e2e8f0 !important;
  padding: 1.5rem !important;
  border-radius: 12px !important;
  overflow-x: auto !important;
  margin: 2rem 0 !important;
  font-family: ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,0.15) !important;
}

body.single-post .entry-content pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
  font-size: inherit !important;
}

/* Imágenes dentro del contenido */
body.single-post .entry-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  margin: 1.5rem 0 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.1) !important;
}

/* Separadores horizontales */
body.single-post .entry-content hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent) !important;
  margin: 2.5rem 0 !important;
}

/* Tablas */
body.single-post .entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.5rem 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
}

body.single-post .entry-content table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  text-align: left !important;
  padding: 0.8rem 1rem !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

body.single-post .entry-content table td {
  padding: 0.8rem 1rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

/* Etiquetas / tags al pie del post */
body.single-post .tags-links {
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid #e2e8f0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
}

body.single-post .tags-links a {
  display: inline-block !important;
  background: rgba(16,185,129,0.1) !important;
  color: #10b981 !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  margin: 0 0.3rem 0.3rem 0 !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

body.single-post .tags-links a:hover {
  background: #10b981 !important;
  color: #ffffff !important;
}

/* NAVEGACIÓN entre posts (anterior / siguiente) */
body.single-post .post-navigation {
  margin-top: 2rem !important;
}

body.single-post .nav-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

@media (max-width: 600px) {
  body.single-post .nav-links {
    grid-template-columns: 1fr !important;
  }
}

body.single-post .nav-previous,
body.single-post .nav-next {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 1.2rem 1.5rem !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.06) !important;
  transition: all 0.25s !important;
}

body.single-post .nav-previous:hover,
body.single-post .nav-next:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
}

body.single-post .nav-previous a,
body.single-post .nav-next a {
  display: block !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

body.single-post .nav-next { text-align: right !important; }

body.single-post .nav-previous a::before {
  content: "← Anterior" !important;
  display: block !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  margin-bottom: 0.3rem !important;
}

body.single-post .nav-next a::before {
  content: "Siguiente →" !important;
  display: block !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  font-weight: 600 !important;
  margin-bottom: 0.3rem !important;
}

/* SECCIÓN DE COMENTARIOS */
body.single-post #comments {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: clamp(2rem, 4vw, 3rem) !important;
  margin-top: 2rem !important;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06) !important;
}

body.single-post .comments-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  margin: 0 0 1.5rem !important;
}

/* ══════════════════════════════════════════════════════════════
   PÁGINA DE ARCHIVO DE CATEGORÍA (cuando clicas "Desarrollo")
   Se aplica sobre /category/desarrollo, /category/gatos, etc.
══════════════════════════════════════════════════════════════ */
body.archive #content,
body.archive .site-content,
body.archive #primary {
  background: #f8fafc !important;
  padding: clamp(60px, 8vh, 100px) 0 !important;
}

body.archive .ast-archive-description,
body.archive .page-header {
  max-width: 900px !important;
  margin: 0 auto 3rem !important;
  text-align: center !important;
  padding: 0 clamp(24px, 5vw, 40px) !important;
}

body.archive h1.page-title,
body.archive .ast-archive-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  font-weight: 300 !important;
  color: #0f172a !important;
  margin: 0 0 1rem !important;
}

body.archive .archive-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: #64748b !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v14 — Shortcode [ra_blog] estilos del listado de posts
══════════════════════════════════════════════════════════════ */

.ra-blog-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 40px);
}

/* ─── FILTROS DE CATEGORÍA ─── */
.ra-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.ra-blog-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0;
  border-radius: 99px;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}

.ra-blog-filter:hover {
  border-color: #10b981;
  color: #10b981 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16,185,129,0.15);
}

.ra-blog-filter.is-active {
  background: var(--cat-color, #10b981) !important;
  border-color: var(--cat-color, #10b981);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}

.ra-blog-filter__count {
  background: rgba(0,0,0,0.08);
  border-radius: 99px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.ra-blog-filter.is-active .ra-blog-filter__count {
  background: rgba(255,255,255,0.25);
  color: #ffffff;
}

/* ─── GRID DE POSTS ─── */
.ra-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  margin-bottom: 3rem;
}

@media (max-width: 900px) { .ra-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ra-blog-grid { grid-template-columns: 1fr; } }

/* TARJETA */
.ra-blog-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ra-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(15,23,42,0.14);
}

.ra-blog-card__link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

/* IMAGEN */
.ra-blog-card__img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: #f1f5f9;
}

.ra-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ra-blog-card:hover .ra-blog-card__img { transform: scale(1.04); }

.ra-blog-card__img-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cat-color, #10b981) 0%, rgba(15,23,42,0.9) 100%);
}

.ra-blog-card__placeholder-icon {
  font-size: 3rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  opacity: 0.85;
}

/* BODY */
.ra-blog-card__body {
  padding: 1.4rem 1.5rem 1.6rem;
}

.ra-blog-card__cat {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: var(--cat-color, #10b981) !important;
  background: color-mix(in srgb, var(--cat-color, #10b981) 12%, transparent);
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  margin-bottom: 0.7rem;
}

/* Fallback sin color-mix (navegadores antiguos) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .ra-blog-card__cat { background: rgba(16,185,129,0.12); }
}

.ra-blog-card__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  margin: 0 0 0.6rem !important;
}

.ra-blog-card:hover .ra-blog-card__title {
  color: #10b981 !important;
}

.ra-blog-card__excerpt {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: #64748b !important;
  margin: 0 0 1rem !important;
}

.ra-blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  padding-top: 0.8rem;
  border-top: 1px solid #f1f5f9;
}

.ra-blog-card__dot { color: #cbd5e1; }

/* ─── PAGINACIÓN ─── */
.ra-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 3rem 0 1rem;
}

.ra-blog-pagination .ra-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.8rem;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569 !important;
  text-decoration: none !important;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}

.ra-blog-pagination .ra-page:hover {
  border-color: #10b981;
  color: #10b981 !important;
  transform: translateY(-2px);
}

.ra-blog-pagination .ra-page.current {
  background: #10b981 !important;
  border-color: #10b981;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.4);
}

/* ─── ESTADO VACÍO ─── */
.ra-blog-empty {
  text-align: center;
  background: #ffffff;
  border-radius: 20px;
  padding: 4rem 2rem;
  box-shadow: 0 4px 24px rgba(15,23,42,0.06);
  margin: 2rem 0;
}

.ra-blog-empty h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.6rem !important;
  color: #0f172a !important;
  margin: 1rem 0 0.5rem !important;
}

.ra-blog-empty p {
  font-family: 'Inter', sans-serif !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v16 — Menú móvil: forzar fondo navy en el contenedor REAL
   detectado en HTML: .ast-mobile-header-content
   y todo lo que contenga dentro
══════════════════════════════════════════════════════════════ */

/* El contenedor que se expande en móvil cuando se toca la X */
html body .ast-mobile-header-content,
html body .ast-mobile-header-content.content-align-flex-start,
html body .ast-mobile-header-content > div,
html body .ast-mobile-header-content .ast-builder-menu-mobile,
html body .ast-mobile-header-content .ast-builder-menu-mobile-inner,
html body .ast-mobile-header-content .ast-main-header-bar-alignment,
html body .ast-mobile-header-content .main-header-bar-navigation,
html body .ast-mobile-header-content nav,
html body .ast-mobile-header-content #ast-hf-mobile-menu,
html body .ast-mobile-header-content .main-navigation,
html body .ast-mobile-header-content ul,
html body .ast-mobile-header-content .main-header-menu {
  background: #0b1220 !important;
  background-color: #0b1220 !important;
}

/* Items del menú con texto blanco — clase real es .menu-link */
html body .ast-mobile-header-content a,
html body .ast-mobile-header-content .menu-link,
html body .ast-mobile-header-content li > a,
html body .ast-mobile-header-content .menu-item > a {
  color: rgba(255,255,255,0.88) !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 1rem 1.4rem !important;
  display: block !important;
  text-decoration: none !important;
}

html body .ast-mobile-header-content a:hover,
html body .ast-mobile-header-content .current-menu-item a {
  color: #10b981 !important;
  background: rgba(16,185,129,0.08) !important;
}

/* Separadores entre items */
html body .ast-mobile-header-content li {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Botón X (cerrar) en blanco sobre navy */
html body .menu-toggle.toggled,
html body .menu-toggle[aria-expanded="true"],
html body .menu-toggle.toggled svg,
html body .menu-toggle[aria-expanded="true"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Header del móvil cuando el menú está expandido — fondo navy */
html body .ast-mobile-header-wrap,
html body .ast-mobile-header-wrap .main-header-bar,
html body .ast-mobile-header-wrap .ast-main-header-bar-alignment {
  background: #0b1220 !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v17 — Imagen destacada DENTRO del post + más ancho
══════════════════════════════════════════════════════════════ */

/* Imagen destacada hero en single-post: grande, full-width, encima del título */
body.single-post .ra-featured-hero {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto 2rem;
  padding: 0 clamp(20px, 4vw, 40px);
  box-sizing: border-box;
}

body.single-post .ra-featured-hero img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(15,23,42,0.15);
  display: block;
}

/* En móvil que la imagen no sea tan alta */
@media (max-width: 600px) {
  body.single-post .ra-featured-hero img {
    max-height: 280px;
    border-radius: 14px;
  }
}

/* Caption opcional para créditos de la imagen */
body.single-post .ra-featured-hero figcaption {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  text-align: right !important;
  padding: 0.6rem 0.4rem 0 !important;
  font-style: italic !important;
}

body.single-post .ra-featured-hero figcaption a {
  color: #64748b !important;
  text-decoration: none !important;
  border-bottom: 1px dotted #cbd5e1 !important;
}

body.single-post .ra-featured-hero figcaption a:hover {
  color: #10b981 !important;
  border-bottom-color: #10b981 !important;
}

/* IMÁGENES EXTRAS dentro del cuerpo (las que genera la IA) */
body.single-post .entry-content figure.ra-imagen-extra {
  margin: 2.5rem 0 !important;
  text-align: center !important;
}

body.single-post .entry-content figure.ra-imagen-extra img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
  margin: 0 !important;
  display: block !important;
}

body.single-post .entry-content figure.ra-imagen-extra figcaption {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  color: #94a3b8 !important;
  font-style: italic !important;
  margin-top: 0.6rem !important;
  text-align: center !important;
}

/* Citas (blockquote) más bonitas en posts individuales */
body.single-post .entry-content blockquote {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 1.8rem 2.2rem !important;
  margin: 2.5rem 0 !important;
  position: relative !important;
}

body.single-post .entry-content blockquote::before {
  content: """ !important;
  position: absolute !important;
  top: -10px !important;
  left: 20px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 5rem !important;
  color: #10b981 !important;
  opacity: 0.25 !important;
  line-height: 1 !important;
}

body.single-post .entry-content blockquote p {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.35rem !important;
  line-height: 1.5 !important;
  color: #334155 !important;
  margin: 0 0 0.6rem !important;
}

body.single-post .entry-content blockquote cite {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: #64748b !important;
  display: block !important;
  text-align: right !important;
}

/* Bloques de código mejorados para v17 */
body.single-post .entry-content pre {
  background: linear-gradient(180deg, #0b1220 0%, #131e36 100%) !important;
  position: relative !important;
}

body.single-post .entry-content pre::before {
  content: "JAVA" !important;
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.8rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  color: #10b981 !important;
  opacity: 0.6 !important;
  font-weight: 700 !important;
}

body.single-post .entry-content pre code {
  color: #e2e8f0 !important;
}

body.single-post .entry-content pre code.language-java {
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v18 — Más ancho real y navegación anterior/siguiente arreglada
══════════════════════════════════════════════════════════════ */

/* Ancho aún mayor para v18 */
body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .post-navigation,
body.single-post #comments {
  max-width: 1100px !important;
  width: 100% !important;
}

/* Imagen destacada hero un poco más ancha */
body.single-post .ra-featured-hero {
  max-width: 1300px !important;
}

/* ──────────────────────────────────────────
   NAVEGACIÓN ANTERIOR/SIGUIENTE ARREGLADA
   El problema era que el texto del título se
   desbordaba del contenedor
────────────────────────────────────────── */

body.single-post .post-navigation {
  margin: 2rem auto !important;
  padding: 0 clamp(20px, 4vw, 40px) !important;
}

body.single-post .nav-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.2rem !important;
  width: 100% !important;
}

@media (max-width: 700px) {
  body.single-post .nav-links {
    grid-template-columns: 1fr !important;
  }
}

/* Cajas anterior/siguiente — overflow:hidden para evitar desbordes */
body.single-post .nav-previous,
body.single-post .nav-next {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 1.2rem 1.5rem !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.06) !important;
  transition: all 0.25s !important;
  overflow: hidden !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body.single-post .nav-previous:hover,
body.single-post .nav-next:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
}

/* Reset del enlace */
body.single-post .nav-previous a,
body.single-post .nav-next a {
  display: block !important;
  text-decoration: none !important;
  color: #0f172a !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body.single-post .nav-next {
  text-align: right !important;
}

/* Eliminar los ::before duplicados de la v16 */
body.single-post .nav-previous a::before,
body.single-post .nav-next a::before {
  content: none !important;
}

/* Etiqueta "Anterior →" / "Siguiente ←" como elemento separado, no como pseudo */
body.single-post .nav-previous::before {
  content: "← Anterior" !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

body.single-post .nav-next::before {
  content: "Siguiente →" !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  text-align: right !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v19 — Ancho con MÁXIMA especificidad y navegación reconstruida
══════════════════════════════════════════════════════════════ */

/* ANCHO MAYOR — usando html body para ganar a Astra */
html body.single-post .entry-header,
html body.single-post .entry-content,
html body.single-post .post-navigation,
html body.single-post #comments,
html body.single-post article.post .entry-header,
html body.single-post article.post .entry-content,
html body.single-post .ast-container,
html body.single-post .ast-article-single,
html body.single-post .single .post,
html body.single-post #primary,
html body.single-post .site-main {
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* La imagen destacada hero MÁS ancha que el contenido */
html body.single-post .ra-featured-hero {
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Forzar también el contenedor que Astra usa */
html body.single-post .ast-container > .site-content,
html body.single-post .content-area,
html body.single-post .ast-no-sidebar .entry-content {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ══════════════════════════════════════════════════════════════
   NAVEGACIÓN ANTERIOR/SIGUIENTE — RECONSTRUIDA DESDE CERO
   Quitamos todos los ::before raros y ponemos un layout simple
══════════════════════════════════════════════════════════════ */

/* RESET: eliminar todos los pseudo-elementos previos */
html body.single-post .nav-previous::before,
html body.single-post .nav-next::before,
html body.single-post .nav-previous a::before,
html body.single-post .nav-next a::before,
html body.single-post .nav-previous a::after,
html body.single-post .nav-next a::after {
  content: none !important;
  display: none !important;
}

/* Contenedor principal */
html body.single-post .post-navigation {
  max-width: 1200px !important;
  margin: 2rem auto !important;
  padding: 0 clamp(20px, 4vw, 40px) !important;
}

/* Grid 2 columnas (1 en móvil) */
html body.single-post .nav-links {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.2rem !important;
}

@media (max-width: 700px) {
  html body.single-post .nav-links {
    grid-template-columns: 1fr !important;
  }
}

/* Cajas anterior/siguiente — limpias */
html body.single-post .nav-previous,
html body.single-post .nav-next {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 1.3rem 1.6rem !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.06) !important;
  transition: all 0.25s !important;
  position: relative !important;
}

html body.single-post .nav-previous:hover,
html body.single-post .nav-next:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,0.12) !important;
}

/* El enlace ocupa toda la caja */
html body.single-post .nav-previous > a,
html body.single-post .nav-next > a {
  display: block !important;
  text-decoration: none !important;
  color: #0f172a !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

html body.single-post .nav-next > a {
  text-align: right !important;
}

/* La etiqueta superior "Anterior" / "Siguiente" — usando rel="prev/next" */
html body.single-post .nav-previous > a::before {
  content: "← Anterior" !important;
  display: block !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  font-weight: 700 !important;
  margin-bottom: 0.6rem !important;
}

html body.single-post .nav-next > a::before {
  content: "Siguiente →" !important;
  display: block !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
  font-weight: 700 !important;
  margin-bottom: 0.6rem !important;
}

/* Permitir que el título completo se vea, hasta 3 líneas con ellipsis */
html body.single-post .nav-previous > a,
html body.single-post .nav-next > a {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Quitar las flechas raras de la navegación */
html body.single-post .post-navigation .meta-nav {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v20 — Centrar nav prev/next + arreglar móvil
══════════════════════════════════════════════════════════════ */

/* RESET DURO de cualquier regla previa que mantenía nav-links con grid raro */
html body.single-post .post-navigation .nav-links,
html body.single-post .post-navigation > div {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* MÓVIL: una columna */
@media (max-width: 700px) {
  html body.single-post .post-navigation .nav-links,
  html body.single-post .post-navigation > div {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 1rem !important;
  }
}

/* Cajas anterior/siguiente — ancho mínimo controlado */
html body.single-post .nav-previous,
html body.single-post .nav-next {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* En móvil, las cajas ocupan TODO el ancho disponible */
@media (max-width: 700px) {
  html body.single-post .nav-previous,
  html body.single-post .nav-next {
    width: 100% !important;
    padding: 1.1rem 1.3rem !important;
  }
}

/* El enlace: aprovechar todo el espacio interno */
html body.single-post .nav-previous > a,
html body.single-post .nav-next > a {
  width: 100% !important;
  box-sizing: border-box !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* En móvil quitar el clamp de líneas para que se vea el título entero */
@media (max-width: 700px) {
  html body.single-post .nav-previous > a,
  html body.single-post .nav-next > a {
    -webkit-line-clamp: 4 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }
}

/* Asegurar que el contenedor post-navigation usa todo el ancho */
html body.single-post .post-navigation {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 2.5rem auto !important;
  padding: 0 clamp(16px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════
   FIX v21 — Hero con marco blanco tipo polaroid
══════════════════════════════════════════════════════════════ */

html body.single-post .ra-featured-hero {
  background: #ffffff !important;
  padding: 14px !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 40px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06) !important;
  margin-bottom: 2.5rem !important;
}

html body.single-post .ra-featured-hero img {
  border-radius: 16px !important;
  box-shadow: none !important;
  display: block !important;
}

/* En móvil padding más pequeño */
@media (max-width: 600px) {
  html body.single-post .ra-featured-hero {
    padding: 8px !important;
    border-radius: 18px !important;
  }
  html body.single-post .ra-featured-hero img {
    border-radius: 12px !important;
  }
}

/* Caption del hero pegado al marco */
html body.single-post .ra-featured-hero figcaption {
  padding: 0.5rem 0.6rem 0 !important;
}
.ra-suscripcion {
    margin: 2.5rem auto;
    max-width: 680px;
    padding: 2rem;
    border-radius: 12px;
    background: #f6f4ef;
    border: 1px solid #e6e1d6;
    text-align: center;
}
.ra-suscripcion h3 { margin: 0 0 .5rem; }
.ra-suscripcion p  { margin: 0 0 1.2rem; opacity: .85; }
.ra-suscripcion.ra-antes-footer {
    max-width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}