/* ==========================================================================
   DMD — Página oficial: Tema Lovable
   Sobrescribe el tema corporativo (style.css) con los colores de
   dmd-paginas-web-ia.vercel.app:
   fondo crema #f7f4ed, Inter, degradado naranja #ff8a4c / rosa #f0467f /
   azul #4f7dff, botones negros tipo píldora, tarjetas blancas.
   Se carga DESPUÉS de style.css en index.html, servicios.html y
   portafolio.html, así que sus reglas ganan.
   NO modifica style.css ni script.js: los proyectos aparte (login, Canva,
   POS, Contenido IA y el creador de páginas) los cargan desde
   dmd-bc.vercel.app y siguen funcionando igual.
   ========================================================================== */

/* --- Variables del CSS oficial, redefinidas a Lovable --- */
:root{
  --bg-primary:#f7f4ed;
  --bg-secondary:#f7f4ed;
  --bg-tertiary:#f1eee6;
  --bg-canvas-area:#f1eee6;

  --card-bg:#fcfbf8;
  --card-border:rgba(28,28,28,.08);
  --card-border-hover:rgba(28,28,28,.16);
  --card-border-strong:rgba(28,28,28,.28);

  --text-main:#1c1c1c;
  --text-body:#3d3d3a;
  --text-muted:#5f5f5d;
  --text-light:#8a8a86;

  --primary:#1c1c1c;
  --primary-hover:#000000;
  --primary-dark:#000000;
  --primary-light:#f7f4ed;
  --primary-border:rgba(28,28,28,.12);

  --accent:#f0467f;
  --accent-hover:#d63a6e;
  --accent-light:#fdeef3;

  --lovable:#f0467f;
  --lovable-hover:#d63a6e;
  --lovable-light:#fdeef3;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:16px;
}

/* --- Base: fondo crema y tipografía Inter --- */
html,body{
  background-color:#f7f4ed !important;
  color:#1c1c1c;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{letter-spacing:-.03em;}
.hero-title,.section-title{letter-spacing:-.03em !important;}
.hero-subtitle{color:#5f5f5d !important;}
a{color:inherit;}

/* --- Barra superior: crema translúcida con blur, estilo Lovable --- */
.navbar-global{
  background:rgba(252,251,248,.88) !important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(28,28,28,.08) !important;
  box-shadow:0 1px 0 rgba(28,28,28,.04) !important;
}
.nav-link-item{color:#3d3d3a !important;}
.nav-link-item:hover,
.nav-link-item.active{
  color:#f0467f !important;
  background-color:rgba(28,28,28,.05) !important;
}

/* --- Hero y encabezados de sección con resplandor degradado Lovable --- */
.hero-section,
.spoke-header{
  position:relative;
  overflow:hidden;
  background-color:#f7f4ed !important;
  border-bottom:1px solid rgba(28,28,28,.08) !important;
}
.hero-section::before,
.spoke-header::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-32%;
  width:130%;
  height:85%;
  transform:translateX(-50%);
  pointer-events:none;
  background:
    radial-gradient(40% 55% at 30% 70%,rgba(255,138,76,.5),transparent 70%),
    radial-gradient(38% 60% at 52% 80%,rgba(240,70,127,.45),transparent 70%),
    radial-gradient(40% 55% at 74% 70%,rgba(79,125,255,.45),transparent 70%);
  filter:blur(50px);
  opacity:.8;
}
.hero-section > *,
.spoke-header > *{position:relative;z-index:1;}

/* --- Botones: negros tipo píldora (Lovable) --- */
.btn{border-radius:9999px !important;}
.btn-primary,
a.btn-primary,
button.btn-primary,
.btn-spoke-cta,
a.btn-spoke-cta{
  background-color:#1c1c1c !important;
  color:#fcfbf8 !important;
  border-color:#1c1c1c !important;
  border-radius:9999px !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.btn-spoke-cta:hover,
a.btn-spoke-cta:hover{background-color:#000000 !important;}
.btn-secondary,
a.btn-secondary,
button.btn-secondary{
  background-color:#fcfbf8 !important;
  color:#1c1c1c !important;
  border-color:rgba(28,28,28,.14) !important;
  border-radius:9999px !important;
}
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover{background-color:#ffffff !important;}
/* Botón con contorno azul -> contorno rosa Lovable */
.btn-outline-blue,
a.btn-outline-blue,
button.btn-outline-blue{
  background-color:#fcfbf8 !important;
  color:#d63a6e !important;
  border:1.5px solid #f0467f !important;
  border-radius:9999px !important;
}
.btn-outline-blue:hover,
a.btn-outline-blue:hover,
button.btn-outline-blue:hover{background-color:#fdeef3 !important;}
/* "Diseña algo tú mismo": de degradado azul a degradado Lovable */
.btn-disena-tu-mismo{
  background:linear-gradient(135deg,#ff8a4c,#f0467f 55%,#4f7dff) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
/* Acceder y suscripciones: de azul a negro píldora */
.btn-portal-nav,
.btn-dropdown-subscribe,
.btn-subscribe-premium-nav{
  background-color:#1c1c1c !important;
  color:#fcfbf8 !important;
  border-color:#1c1c1c !important;
  border-radius:9999px !important;
}
.btn-portal-nav:hover,
.btn-dropdown-subscribe:hover,
.btn-subscribe-premium-nav:hover{background-color:#000000 !important;}

/* --- Menú desplegable y drawer móvil --- */
.dropdown-link:hover{
  background-color:#fdf1e7 !important;
  border-color:#f3d9c8 !important;
  box-shadow:0 6px 18px -4px rgba(240,70,127,.12) !important;
}
.dropdown-link .item-title{color:#1c1c1c !important;}
.mobile-nav-link{color:#1c1c1c !important;}
.mobile-nav-link:hover{
  background-color:#fdf1e7 !important;
  border-color:#f3d9c8 !important;
  color:#d63a6e !important;
}

/* --- Secciones y tarjetas --- */
.section{
  background-color:#f7f4ed !important;
  border-bottom-color:rgba(28,28,28,.08) !important;
}
.section-alt{background-color:#f1eee6 !important;}
.card,
.pricing-card,
.portfolio-card,
.contact-form-container{
  background-color:#fcfbf8 !important;
  border:1px solid rgba(28,28,28,.08) !important;
  border-radius:16px !important;
  box-shadow:0 0 0 1px rgba(28,28,28,.06) !important;
}
.section-tag{color:#d63a6e !important;}

/* --- Insignias con estilo azul en línea -> melocotón/rosa --- */
.badge-ia[style],
.badge-price[style]{
  background:#fdeee3 !important;
  color:#d63a6e !important;
  border-color:#fbcfe8 !important;
}
.badge{
  background:#fdeee3 !important;
  color:#d63a6e !important;
  border-color:#fbcfe8 !important;
}
/* Icono de canal azul en línea -> tinta */
.channel-icon-badge[style]{background:#1c1c1c !important;}
/* Icono de tile azul claro en línea -> melocotón/rosa */
.canva-tile-icon-box[style]{
  background:#fdeee3 !important;
  color:#d63a6e !important;
}
/* Tarjetas de Servicios con borde azul en línea -> borde rosa */
[style*="1.5px solid #2563eb"]{
  border-color:rgba(240,70,127,.4) !important;
  box-shadow:0 4px 14px rgba(240,70,127,.08) !important;
}

/* --- Formularios: foco rosa Lovable --- */
input:focus,select:focus,textarea:focus{
  border-color:#f0467f !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(240,70,127,.15) !important;
}

/* --- Pie de página --- */
.footer{
  background-color:#f7f4ed !important;
  border-top:1px solid rgba(28,28,28,.08) !important;
}
.footer a:hover{color:#f0467f !important;}

/* --- INTENCIONALMENTE SIN TOCAR ---
   - Las portadas oscuras del Portafolio (degradados pizarra en línea):
     son la imagen de cada proyecto, no el tema del sitio.
   - Colores de estado (éxito/Advertencia/peligro) y los botones del
     banner de cookies (Aceptar/Rechazar): son semánticos, no del tema.
   - Elementos que inyecta script.js con estilos literales: el tema cubre
     el menú, el drawer y la barra inferior con las clases principales. */

/* --- Rediseño oficial 2026-11-07: logo en hero, sección Suscripción +
   Servicios, tira de precios y pie legible --- */
.footer h4{color:#1c1c1c !important;}
.footer .navbar-logo h4{color:#1c1c1c !important;}
.dmd-hero-logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px;}
.dmd-hero-logo img{width:72px;height:72px;border-radius:18px;box-shadow:0 10px 24px -8px rgba(240,70,127,.35),0 0 0 1px rgba(28,28,28,.06);}
.dmd-hero-logo span{font-weight:800;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#5f5f5d;}
.dmd-choose-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;}
@media (max-width:760px){.dmd-choose-grid{grid-template-columns:1fr;}}
.dmd-choose-card{background:#fcfbf8;border:1px solid rgba(28,28,28,.08);border-radius:16px;padding:28px;box-shadow:0 0 0 1px rgba(28,28,28,.06);display:flex;flex-direction:column;}
.dmd-choose-card.featured{border:2px solid transparent;background:linear-gradient(#fcfbf8,#fcfbf8) padding-box,linear-gradient(135deg,#ff8a4c,#f0467f 55%,#4f7dff) border-box;}
.dmd-choose-price{font-size:2rem;font-weight:900;letter-spacing:-.03em;color:#1c1c1c;}
.dmd-choose-price small{font-size:.85rem;font-weight:700;color:#5f5f5d;}
.dmd-price-strip{margin-top:36px;background:#fcfbf8;border:1px solid rgba(240,70,127,.35);border-radius:16px;padding:20px 24px;font-size:.92rem;line-height:1.6;color:#3d3d3a;box-shadow:0 4px 14px rgba(240,70,127,.08);}
.dmd-price-strip a{color:#d63a6e;font-weight:800;text-decoration:none;}

/* --- Móvil 2026-11-07 (PageSpeed Insights móvil + captura de Axel) ---
   Logo de 32px en ≤540px y encabezado apretado (pill $79/mes + Acceder +
   hamburguesa). No se toca style.css ni script.js: todo va aquí. --- */
@media (max-width:820px){
  /* Logo más grande y visible en móvil, como en la pestaña del navegador */
  .navbar-logo img{height:48px !important;width:48px !important;}
  .brand-logo{width:48px !important;height:48px !important;}
  /* Objetivos táctiles cómodos (mínimo 44px) */
  .btn-portal-nav{min-height:44px !important;padding:10px 16px !important;font-size:.85rem !important;}
  .btn-subscribe-premium-nav{min-height:44px !important;}
  .btn-hamburger-mobile,.menu-toggle-btn{width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;}
}
@media (max-width:540px){
  .navbar-global{height:64px !important;padding:0 12px !important;}
  .navbar-logo img{height:44px !important;width:44px !important;}
  .brand-logo{width:44px !important;height:44px !important;}
  /* Despejar el encabezado: se oculta el subtítulo de marca... */
  .brand-subtitle{display:none !important;}
  /* ...y el pill Premium solo en móviles muy estrechos. Sigue en
     escritorio, en el drawer móvil y en la sección Suscripción. */
  .btn-subscribe-premium-nav{display:none !important;}
}

/* --- Contraste AA (PageSpeed Insights móvil, Accesibilidad 90) ---
   El rosa #d63a6e sobre fondos claros daba 3.9–4.1:1 (falla AA 4.5:1
   en texto pequeño: section-tag, insignias). Rosa oscuro #a81e4e:
   6.2–6.5:1 sobre crema, melocotón y blanco. Las insignias semánticas
   vuelven a sus colores originales, que sí pasan AA. --- */
:root{--accent-text:#a81e4e;}
.section-tag{color:#a81e4e !important;}
.nav-link-item:hover,.nav-link-item.active{color:#a81e4e !important;}
.mobile-nav-link:hover{color:#a81e4e !important;}
.btn-outline-blue,.btn-outline-blue:hover{color:#a81e4e !important;}
.dmd-price-strip a{color:#a81e4e !important;}
.footer a:hover{color:#a81e4e !important;}
/* Insignias genéricas: rosa oscuro sobre melocotón */
.badge{background:#fdeee3 !important;color:#a81e4e !important;border-color:#fbcfe8 !important;}
.badge-ia[style],.badge-price[style]{background:#fdeee3 !important;color:#a81e4e !important;border-color:#fbcfe8 !important;}
.canva-tile-icon-box[style]{background:#fdeee3 !important;color:#a81e4e !important;}
/* Insignias semánticas con sus colores originales (pasan AA) */
.badge.badge-primary{background:#f7f4ed !important;color:#1c1c1c !important;border-color:rgba(28,28,28,.12) !important;}
.badge.badge-success{background:#ecfdf5 !important;color:#065f46 !important;border-color:#a7f3d0 !important;}
.badge.badge-accent{background:#eff6ff !important;color:#2563eb !important;border-color:#bfdbfe !important;}
.badge.badge-info{background:#f0f9ff !important;color:#0369a1 !important;border-color:#bae6fd !important;}
.badge.badge-warning{background:#fffbeb !important;color:#92400e !important;border-color:#fde68a !important;}
.badge-price{background:#eff6ff !important;color:#1c1c1c !important;border-color:#bfdbfe !important;}
.badge-price-pop{background:#fef3c7 !important;color:#92400e !important;border-color:#fde68a !important;}

/* ==========================================================================
   DOCK INFERIOR MÓVIL: SOLO CON SESIÓN, ESTILO LOVABLE
   El dock lo inyecta script.js (initDmdMobileNav) solo si hay sesión
   (localStorage dmd_user). Todo vive aquí, no en style.css.
   ========================================================================== */
@media (max-width: 768px) {
  /* El menú superior (hamburguesa) siempre visible, con o sin sesión:
     style.css lo oculta cuando body tiene .user-logged-in; aquí se revierte. */
  body.user-logged-in .btn-hamburger-mobile,
  body.user-logged-in #btnMobileNavToggle,
  body.user-logged-in #menuToggleBtn,
  body.user-logged-in .menu-toggle-btn,
  body.user-logged-in .nav-hamburger,
  body.user-logged-in [data-nav-toggle] {
    display: flex !important;
  }

  /* Sin sesión no hay dock: quitar el hueco que style.css reserva abajo. */
  body:not(.user-logged-in) {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Seguridad extra: si un dock quedara en el DOM sin sesión, ocultarlo. */
  body:not(.user-logged-in) .mobile-bottom-nav {
    display: none !important;
  }

  /* Dock estilo Lovable (solo existe con sesión). */
  body.user-logged-in .mobile-bottom-nav {
    background: rgba(247, 244, 237, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 138, 76, 0.25) !important;
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.08) !important;
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  body.user-logged-in .bottom-nav-item {
    min-height: 44px !important;
    min-width: 44px !important;
    color: #57534e !important;
  }

  body.user-logged-in .bottom-nav-item .bottom-nav-label {
    font-size: 0.72rem !important;
  }

  /* Ítem activo con acento Lovable (rosa + indicador con degradado). */
  body.user-logged-in .bottom-nav-item.active {
    color: #f0467f !important;
  }

  body.user-logged-in .bottom-nav-item.active .bottom-nav-icon {
    transform: translateY(-2px) scale(1.1) !important;
  }

  body.user-logged-in .bottom-nav-item.active .bottom-nav-label {
    font-weight: 800 !important;
    color: #f0467f !important;
  }

  body.user-logged-in .bottom-nav-item.active::after {
    background: linear-gradient(90deg, #ff8a4c, #f0467f, #4f7dff) !important;
  }
}