/* ============================================================================
   briefs and brains — capa de marca sobre el template (crema + charcoal + Cobalt/Aqua).
   Tokens = apps/web/app/globals.css del producto. Estrategia: flip global de las
   variables del template a claro (crema), y bandas oscuras re-escopadas en charcoal
   (header, hero, CTA final, footer) redeclarando las variables adentro.
   Titulares en Recoleta (self-hosted, con licencia).
   ============================================================================ */

/* ---- Recoleta (display), self-hosted ---- */
@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("../fonts/Recoleta-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Titulares en Recoleta (el cuerpo mantiene el sans del template). */
h1, h2, h3, h4,
.ui-hero-heading, .ui-section-heading, .ui-common-heading,
.ui-pricing-div h2, .ui-feature-heading {
  font-family: "Recoleta", Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.01em;
}

:root {
  /* cuerpo claro: crema + charcoal */
  --color--black: #fff7ef;            /* fondo del body (crema) */
  --color--white: #0f1115;            /* texto principal (charcoal) */
  --color--white-100: rgba(15, 17, 21, 0.10);
  --color--white-200: rgba(15, 17, 21, 0.20);
  --color--white-400: rgba(15, 17, 21, 0.40);
  --color--white-500: rgba(15, 17, 21, 0.55);
  --color--white-700: rgba(15, 17, 21, 0.72);
  --color--white-800: rgba(15, 17, 21, 0.84);
  --color--black-100: rgba(15, 17, 21, 0.10);
  --color--black-800: rgba(255, 247, 239, 0.80); /* texto secundario DENTRO de la tarjeta charcoal */
  --color--gray-800: #fff7ef;         /* texto sobre superficies invertidas (hover/chip activo) */
  --color--gray-900: #fff7ef;         /* secciones alternas (surface-2) */
  --color--orange: #1e4dff;           /* acento = Cobalt */
}

/* ---- bandas oscuras: charcoal (mismo patrón que los headers de la app) ---- */
.ui-header,
.ui-hero-section,
.ui-cta-section,
.ui-footer {
  --color--black: #0f1115;            /* charcoal (también alimenta el gradiente del hero/CTA) */
  --color--white: #fff7ef;            /* texto sobre charcoal */
  --color--white-100: rgba(255, 247, 239, 0.12);
  --color--white-200: rgba(255, 247, 239, 0.22);
  --color--white-400: rgba(255, 247, 239, 0.40);
  --color--white-500: rgba(255, 247, 239, 0.55);
  --color--white-700: rgba(255, 247, 239, 0.72);
  --color--white-800: rgba(255, 247, 239, 0.84);
  --color--gray-800: #0f1115;         /* texto del chip MENÚ (fondo claro) */
  --color--gray-900: #08090c;
}

/* header fijo: charcoal sólido (el !important le gana al inline de la interacción de scroll) */
.ui-header {
  background-color: #0f1115 !important;
  border-bottom-color: rgba(255, 247, 239, 0.10) !important;
}

.ui-footer { background-color: #0f1115; }

/* ---- tarjetas sobre crema: superficie blanca + borde stone + sombra suave ---- */
.ui-who-we-help-card,
.ui-pricing-card {
  background-color: #ffffff;
  border: 1px solid #e6e1d7;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 3px rgba(15, 17, 21, 0.06);
}

/* plan destacado: tarjeta charcoal (el flip de vars ya pinta su texto en crema) */
.ui-pricing-card.ui-active-card {
  background-color: #0f1115;
  border-color: #0f1115;
}
.ui-active-pricing-label .ui-active-pricing-label-text { color: #ffffff; }

/* ---- botones ---- */
/* sólidos (Cobalt): texto blanco fijo; el hover del template invierte y ya queda bien con el flip */
.ui-button { color: #ffffff; }
/* variantes translúcidas/secundarias: vuelven a seguir la variable del scope */
.ui-button:where(.w-variant-4e9afd4f-476d-d61c-257a-41833666d6a1),
.ui-button:where(.w-variant-ac0d7e09-3e7d-ceb5-dd45-e24af2329231) { color: var(--color--white); }
.ui-button:where(.w-variant-af344089-583b-0e21-33a0-1a8ce564655b) { color: var(--color--gray-800); }
.ui-button:hover { color: var(--color--gray-800); }

/* ---- detalles de acento ---- */
/* subrayado del tab activo (era teal del template) → Aqua (el cerebro) */
.ui-approach-tab-detail-div.w--current { border-bottom-color: #00d4c7 !important; }
/* mensaje de éxito del form: fondo Cobalt, texto blanco */
.ui-success-message, .ui-success-message * { color: #ffffff; }

/* logos de clientes (placeholders): tenues sobre crema */
.ui-client-logo-image { opacity: 0.55; }

/* overscroll (rubber band): charcoal arriba y abajo, coincide con header/hero y footer */
html { background-color: #0f1115; }

/* ---- link Entrar en el header ---- */
.brief-login { color: rgba(255, 247, 239, 0.75); font-size: 14px; margin-right: 16px; align-self: center; text-decoration: none; transition: color .2s; }
.brief-login:hover { color: #fff7ef; }
.brief-login:focus-visible { outline: 2px solid #1e4dff; outline-offset: 3px; }

/* ---- mascots Briefs + Brains (CTA final): trabajan juntos, leve solape como el logo ---- */
.bnb-mascotas { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 20px; }
.bnb-mascotas img { width: auto; }
.bnb-mascota-briefs { height: 150px; position: relative; z-index: 1; }
.bnb-mascota-brains { height: 132px; margin-left: -22px; }
@media (max-width: 767px) {
  .bnb-mascota-briefs { height: 108px; }
  .bnb-mascota-brains { height: 95px; margin-left: -16px; }
}

/* ---- botón volver arriba (aparece pasado el 40% del scroll) ---- */
#briefTop { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 44px; height: 44px; border-radius: 8px;
  background: #0f1115; color: #fff7ef; border: 1px solid rgba(255, 247, 239, 0.25); display: grid; place-items: center;
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s; }
#briefTop.on { opacity: 1; visibility: visible; transform: none; }
#briefTop:hover { background: #1e4dff; }
#briefTop:focus-visible { outline: 2px solid #1e4dff; outline-offset: 2px; opacity: 1; visibility: visible; }
@media (max-width: 767px) { #briefTop { width: 38px; height: 38px; right: 14px; bottom: 14px; } }
.ui-header-button-div { display: flex; align-items: center; }