/* ============================================================
   MANITAS UI OVERRIDE (HÍBRIDO PRO)
   Archivo: assets/css/manitas-ui-override.css
   Objetivo:
   - Home PRO: 2 CTAs arriba (desktop) sin espacios raros
   - Mobile tipo app: CTAs full-bleed premium
   - Evitar dobles fondos SOLO donde molesta
   ============================================================ */

/* Base */
body.manitas-app .mta-home{ padding:18px 14px; box-sizing:border-box; }

/* Mata el “segundo fondo” SOLO en home (pero deja cards normales) */
body.manitas-app .mta-home .mta-shell{
  max-width: 1180px;
  margin: 0 auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Header card */
body.manitas-app .mta-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
body.manitas-app .mta-head__title{ font-weight:950; font-size:18px; line-height:1.15; }
body.manitas-app .mta-head__sub{ margin-top:6px; font-size:12px; color: rgba(148,163,184,.95); }

/* Botones app */
body.manitas-app .mta-btn{
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: #0b1220;
  color: #e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
body.manitas-app .mta-btn--ghost{ background: rgba(148,163,184,.10); }
body.manitas-app .mta-btn--fit{ width:max-content; }

/* ============================================================
   CTA WRAP: en desktop, 2 columnas arriba (PRO)
   ============================================================ */
body.manitas-app .mta-cta-wrap{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

/* Desktop: 2 CTAs lado a lado, ocupan TODO arriba */
@media (min-width: 900px){
  body.manitas-app .mta-cta-wrap{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* ============================================================
   CTA CARD (imagen llena, sin “bandas” feas)
   ============================================================ */
body.manitas-app .mta-cta{
  display:block;
  text-decoration:none;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #07111f;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);

  /* ✅ Default: llenar (premium) */
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}

/* Altura consistente */
body.mca-mobile.manitas-app  .mta-cta{ min-height: 190px; }
body.mca-desktop.manitas-app .mta-cta{ min-height: 320px; }

/* Overlay suave para que el texto de la imagen se lea (sin tapar) */
body.manitas-app .mta-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,.10) 45%,
    rgba(0,0,0,.35) 100%
  );
  pointer-events:none;
}

/* 👇 IMPORTANTE:
   Como tus imágenes YA traen texto, NO pintamos texto HTML encima.
   Lo escondemos visualmente pero queda para accesibilidad. */
body.manitas-app .mta-cta__t,
body.manitas-app .mta-cta__s,
body.manitas-app .mta-cta__a{
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space:nowrap !important;
}

/* ============================================================
   Paneles normales (estado rápido / accesos)
   ============================================================ */
body.manitas-app .mta-panel{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
}
body.manitas-app .mta-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
body.manitas-app .mta-panel__t{ font-weight: 950; }
body.manitas-app .mta-link{
  font-size: 12px;
  font-weight: 950;
  color: #93c5fd;
  text-decoration:none;
}
body.manitas-app .mta-link:hover{ text-decoration: underline; }

/* Grid accesos */
body.manitas-app .mta-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.mca-mobile.manitas-app .mta-grid{ grid-template-columns: 1fr; }

body.manitas-app .mta-qcard{
  text-decoration:none;
  color: inherit;
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(8px);
}
body.manitas-app .mta-qcard__t{ font-weight: 950; }
body.manitas-app .mta-qcard__s{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(148,163,184,.95);
}
/* ================================
   FIX: No apretado (desktop)
   ================================ */

/* En desktop NO forcemos banners gigantes */
@media (min-width: 900px){
  body.mca-desktop.manitas-app .mta-cta{
    min-height: 220px !important;  /* antes 320 -> se veía inflado */
    border-radius: 20px !important;
  }

  /* Si están uno debajo del otro, que respiren */
  body.mca-desktop.manitas-app .mta-cta-wrap{
    gap: 16px !important;
  }

  /* Header y contenedor: más aire */
  body.mca-desktop.manitas-app .mta-head{
    padding: 18px !important;
    border-radius: 20px !important;
  }

  body.mca-desktop.manitas-app .mta-home{
    padding: 22px 18px !important;
  }
}

/* En móvil: un poquito más de altura para que no se vea “cortado” */
@media (max-width: 520px){
  body.mca-mobile.manitas-app .mta-cta{
    min-height: 210px !important;
  }
}
/* ============================================================
   FIX DESKTOP: CTAs con imagen completa (sin recortar texto)
   - Desktop: imagen "contain" + fondo blur "cover"
   - Mobile: se mantiene cover (full-bleed)
   ============================================================ */

/* Base CTA: prepara capas */
body.manitas-app .mta-cta{
  position: relative;
  overflow: hidden;
}



/* Overlay suave (el tuyo) arriba del blur */
body.manitas-app .mta-cta::after{
  z-index:1;
}

/* La imagen “real” arriba (por defecto como lo tenías) */
body.manitas-app .mta-cta{
  background-image: var(--bg);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* ✅ DESKTOP: NO recortar texto */
@media (min-width: 900px){
  body.manitas-app .mta-cta{
    background-size: contain;            /* clave: no corta */
    background-position: center;
    min-height: 260px;                  /* ajusta cómodo */
  }

  /* Baja un poco el oscurecido para que el texto de la imagen se lea mejor */
  body.manitas-app .mta-cta::after{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,.06) 55%,
      rgba(0,0,0,.12) 100%
    );
  }
}

/* ✅ Ajuste fino por CTA (para focalizar mejor) */
@media (min-width: 900px){
  body.manitas-app .mta-cta--help{ background-position: left center; }
  body.manitas-app .mta-cta--prev{ background-position: left center; }
}

/* MOBILE: mantenemos full-bleed */
@media (max-width: 899px){
  body.manitas-app .mta-cta{
    background-size: cover;
  }
}