/* =========================
   Reset + tokens de diseño
   ========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Colores base (OMITAS + acentos suaves) */
  --bg: #f7f9fc;
  --bg-accent: radial-gradient(1200px 600px at 10% -10%, #eaf2ff 0%, transparent 60%),
               radial-gradient(900px 500px at 110% 10%, #f7eafc 0%, transparent 60%);
  --text: #1f2a37;
  --muted: #5b6776;
  --brand: #005288;    /* azul OMITAS */
  --primary: #3B81F6;  /* acento botones / chat */
  --card: #ffffff;
  --border: #e6eaf0;
  --shadow: 0 10px 25px rgba(16, 24, 40, .06);

  /* Tipografía fluida */
  --h1: clamp(1.8rem, 3.5vw, 2.4rem);
  --h2: clamp(1.2rem, 2.2vw, 1.5rem);
  --p:  clamp(.98rem, 1.4vw, 1.05rem);
  --radius: 18px;
}

/* =========================
   Base
   ========================= */
html, body { height: 100%; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-accent);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 74px; /* espacio para el menú inferior (sin tocarlo) */
}

/* =========================
   Contenido
   ========================= */
.contenido{
  width: min(100%, 1000px);
  margin: 18px auto 24px;
  padding: 0 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

/* Cards */
.tarjeta-plan{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tarjeta-plan:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(16,24,40,.09);
}

.tarjeta-plan h1{
  font-size: var(--h1);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.15;
  margin-bottom: 4px;
  background: linear-gradient(92deg, var(--brand) 0%, #2e7dff 60%, #7c8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

.tarjeta-plan h2{
  font-size: var(--h2);
  font-weight: 700;
  color: var(--brand);
  margin: 2px 0 6px;
  text-align: center;
}

.tarjeta-plan p{
  font-size: var(--p);
  color: var(--muted);
  line-height: 1.65;
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* Botón principal (teléfono) */
.boton{
  --btn-h: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 18px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 14%, white) 0%, var(--primary) 100%);
  color: #fff;
  font-weight: 700;
  font-size: .98rem;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(59,129,246,.22);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.boton:hover{ transform: translateY(-1px); filter: saturate(1.05); }
.boton:active{ transform: translateY(0); }
.boton a{ color: #fff; text-decoration: none; }

.rojo{ color: #d35400; }
.azul{ color: var(--brand); }

/* =========================
   Grid responsivo
   ========================= */
@media (min-width: 640px){
  .contenido{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .tarjeta-plan:first-child{
    grid-column: 1 / -1; /* la de encabezado ocupa el ancho completo */
  }
}

@media (min-width: 1024px){
  .contenido{
    gap: 18px;
  }
  .tarjeta-plan{ padding: 22px 20px; }
}

/* =========================
   Ajustes del chat Flowise
   ========================= */
iframe.flowise-chatbot{
  width: min(400px, 92vw) !important;
  height: min(640px, 72vh) !important;
  max-height: 85% !important;
  bottom: 84px !important; /* despega del menú inferior */
  right: 16px !important;
  border-radius: 14px !important;
  z-index: 9998 !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.flowise-fixed{ z-index: 9999 !important; }
.flowise-chatbot{ z-index: 9998 !important; }

@media (max-width: 480px){
  iframe.flowise-chatbot{
    width: 94vw !important;
    right: 3vw !important;
    left: 3vw !important;
  }
}

/* =========================
   Menú inferior (NO TOCAR)
   —Se conserva intacto—
   ========================= */
.menu-inferior{
  z-index: 100;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #ccc;
  display: flex;
  padding: .4rem 0;
}
.item-menu{
  width: 20%;
  color: #777;
  text-decoration: none;
  font-size: .8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.item-menu i{ font-size: 1.2rem; margin-bottom: 2px; }
.item-menu.activo{ color: var(--brand); font-weight: 700; }
.item-menu.nea{ color: #d35400; font-size: 1rem; }
.item-menu.nea i{ font-size: 1.5rem; }

/* =========================
   Accesibilidad / Motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
/* =========================
   Zona segura para widgets flotantes
   (evita solaparse con el menú inferior)
   ========================= */
:root{
  /* Alto real del menú inferior (ajustá si tu menú es más alto) */
  --menu-height: 500px;
  --safe-bottom: calc(var(--menu-height) + env(safe-area-inset-bottom, 0px));
}

/* Deja espacio al final del documento para que nada quede oculto */
body{
  padding-bottom: var(--safe-bottom);
}

/* --- Chatwoot --- */
#chatwoot_live_chat_widget,
.woot-widget-holder,
.woot--launcher,
.woot--bubble-holder,
.woot--attention-grabber{
  bottom: var(--safe-bottom) !important;
  right: 16px !important;
  z-index: 9998 !important;
}

/* --- Flowise --- */
iframe.flowise-chatbot,
.flowise-fixed,
.flowise-chatbot{
  bottom: var(--safe-bottom) !important;
  right: 16px !important;
  z-index: 9998 !important;
}

/* --- WhatsApp widgets comunes --- */
.whatsapp_float,
.wa-widget,
.wa__btn_popup,
.floating-whatsapp{
  bottom: var(--safe-bottom) !important;
  right: 16px !important;
}

/* --- Intercom --- */
.intercom-launcher,
.intercom-lightweight-app{
  bottom: var(--safe-bottom) !important;
  right: 16px !important;
}

/* --- Crisp --- */
#crisp-chatbox,
.crisp-client .crisp-ww{
  margin-bottom: var(--safe-bottom) !important;
}

/* --- Tawk.to --- */
[id*="tawk"],
.tawk-button{
  bottom: var(--safe-bottom) !important;
  right: 16px !important;
}

/* --- reCAPTCHA v3 badge (suele tapar el menú) --- */
.grecaptcha-badge{
  bottom: var(--safe-bottom) !important;
}

.blanco {
    background-color: #f7f9fc;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}
.blanco p {
    color: #f7f9fc ;
}