/* ============================================================================
   DEVELOOP STUDIO · refresh.css  (11-oct-2026)
   La web con la PALETA DE LA APP develoop suite y un acabado contemporáneo.
   Se carga la última (después de pages.css): para volver atrás basta con quitar
   su develoop_style() de inc/enqueue.php.

   Origen de cada valor (regla del dueño: todo valor con su fuente):
   · APP  = plataforma-crm/web/src/styles.css (tema claro), token citado.
   · RAIL = el grafito de la barra lateral de la app, MEDIDO en pantalla:
            #434b52 arriba → #36393f centro → #27292d abajo
            (CSS: --rail-bg: linear-gradient(180deg, rgba(32,34,40,.80), rgba(18,19,23,.90))).
   · SKILL = cita literal entre «» de la skill cargada en la sesión.
   ============================================================================ */

/* ---------- 1. Tokens oscuros: el grafito de la barra lateral ---------- */
:root {
  --bg:            #2A2C31;   /* RAIL, entre el centro (#36393f) y el pie (#27292d) */
  --bg-2:          #24262D;   /* APP --navy-2 */
  --surface:       #33363C;   /* RAIL + APP --rail-hover «rgba(255,255,255,.1)» sobre --bg */
  --surface-2:     #3B3F45;
  --surface-3:     #44484F;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(76, 198, 245, 0.30);  /* APP --brand-soft #4cc6f5 */

  --text:        #F4F6F8;     /* APP --bg (:root) como blanco neutro · 12,9:1 sobre --bg */
  --text-muted:  #B9BEC6;     /* APP --rail-ink «rgba(255,255,255,.65)» resuelto · 7,5:1 */
  --text-dim:    #ABB1B9;     /* ≥ 4,5:1 también sobre #3a3e44 (el antiguo #61788a daba 3,85:1) */

  /* SKILL design-taste-frontend §3 Rule 2: «Max 1 Accent Color» ⇒ una sola familia: el celeste de la marca */
  --accent:      #009FE3;     /* APP --brand */
  --accent-2:    #007AB2;     /* APP --brand-deep */
  --iris:        #4CC6F5;     /* APP --brand-soft (sustituye al turquesa #1fb8b5) */
  --accent-soft: rgba(0, 159, 227, 0.12);
  --iris-soft:   rgba(76, 198, 245, 0.14);
  --grad-brand:  linear-gradient(135deg, #4CC6F5 0%, #009FE3 55%, #007AB2 100%); /* APP --brand-grad-bar */
  --grad-warm:   linear-gradient(135deg, #009FE3, #007AB2);                      /* APP --brand-grad */
  --grad-iris:   linear-gradient(135deg, #4CC6F5 0%, #009FE3 100%);

  --ok:    #12B76A;           /* APP --live */
  --error: #F97066;           /* APP --danger-soft */

  /* SKILL design-taste-frontend §3 Rule 4: «When a shadow is used, tint it to the background hue.»
     ⇒ grafito APP --navy-deep #0e0f12, nunca negro puro */
  --shadow-sm:    0 1px 2px rgba(14, 15, 18, 0.30);
  --shadow-card:  0 2px 4px rgba(14, 15, 18, 0.18), 0 14px 34px -14px rgba(14, 15, 18, 0.50);
  --shadow-hover: 0 26px 56px -18px rgba(14, 15, 18, 0.62);
  /* SKILL §7: «NO Neon/Outer Glows … Use inner borders or subtle tinted shadows.» */
  --glow-accent:  0 10px 28px -12px rgba(0, 122, 178, 0.55);
  --glow-iris:    0 10px 28px -12px rgba(0, 159, 227, 0.45);

  --spec: inset 0 1px 0 rgba(255, 255, 255, 0.10);  /* SKILL §4: «shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]» */
  --hair: 0 0 0 1px rgba(255, 255, 255, 0.08);       /* SKILL §4: «1px inner border (border-white/10)» */
  --accent-ink: #4CC6F5;      /* acento como TEXTO pequeño sobre grafito: 7,1:1 (#009fe3 da 4,7) */
}

body { background: var(--bg); }

/* ---------- 2. Secciones claras: el lienzo de la app ---------- */
.section--light,
.section--pale {
  --surface:       #FFFFFF;
  --surface-2:     #F7FAFD;
  --surface-3:     #EEF4FB;   /* APP --bg (tema claro) */
  --bg-2:          #EEF4FB;
  --border:        rgba(13, 34, 64, 0.10);   /* APP --line */
  --border-strong: rgba(0, 159, 227, 0.32);
  --text:          #16202A;   /* APP --ink · 15,3:1 sobre el lienzo */
  --text-muted:    #5B6B7E;   /* APP --muted · 5,1:1 */
  --text-dim:      #5B6B7E;   /* APP --muted-2 (#8496a8) no llega a 4,5:1 en texto pequeño */
  --accent-ink:    #005F93;   /* APP --brand-700 · 6,4:1 */
  --shadow-card:   0 2px 4px rgba(16, 32, 42, 0.05), 0 8px 24px -8px rgba(16, 32, 42, 0.12); /* APP --shadow-md */
  --shadow-hover:  0 18px 44px -12px rgba(16, 32, 42, 0.20);                                 /* APP --shadow-lg, tono tinta */
  --spec: inset 0 1px 0 rgba(255, 255, 255, 0.75);  /* APP --glass-inset */
  --hair: 0 0 0 1px rgba(13, 34, 64, 0.06);
}
/* APP --aurora: «radial-gradient(52% 44% at 12% 8%, rgba(0,159,227,.14) 0%, transparent 62%)» sobre «#f2f7fc».
   Se usa a media opacidad porque se repite en cada sección; la base es plana para que ⛔ haya costuras. */
.section--light {
  background:
    radial-gradient(52% 44% at 12% 8%, rgba(0, 159, 227, 0.07) 0%, transparent 62%),
    radial-gradient(56% 52% at 88% 96%, rgba(0, 159, 227, 0.05) 0%, transparent 64%),
    #F2F7FC;
}
/* SKILL redesign §Color: «If contrast is needed, use a slightly darker shade of the same palette» ⇒ adiós menta */
.section--pale { background: #E6EEF8; }  /* APP --aurora, su color final «#e6eef8» */
.section--light .text-gradient,
.section--pale .text-gradient { color: #007AB2; -webkit-text-fill-color: #007AB2; } /* APP --brand-deep; títulos ≥ 3:1 */

/* ---------- 3. Fondos oscuros con el degradado del riel + aurora celeste ---------- */
.hero,
.page-hero {
  background:
    radial-gradient(60% 70% at 6% 0%, rgba(0, 159, 227, 0.20) 0%, transparent 60%),
    radial-gradient(48% 60% at 96% 14%, rgba(76, 198, 245, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #3A3E44 0%, #2A2C31 100%);   /* RAIL, de arriba abajo */
}
.section--alt { background: var(--bg-2); }
.site-footer { background: var(--bg-2); border-top-color: rgba(255, 255, 255, 0.06); }

/* ---------- 4. Cabecera: isla de vidrio grafito ---------- */
/* SKILL high-end-visual-design §5A: «The Navbar is a floating glass pill detached from the top (mt-6, mx-auto, w-max, rounded-full).»
   SKILL §2 (banned): «Edge-to-edge sticky navbars glued to the top.» */
.site-header,
.site-header.scrolled {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.site-header .container {
  width: calc(100% - 24px);
  max-width: 1240px;
  height: 62px;
  padding-inline: 1.4rem 0.55rem;
  border-radius: 999px;
  background: rgba(39, 41, 46, 0.72);          /* RAIL: APP «rgba(32,34,40,.80)» aclarado sobre fondos oscuros */
  backdrop-filter: blur(18px) saturate(140%);  /* APP --blur: 18px */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 14px 34px -16px rgba(14, 15, 18, 0.55);
  transition: background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.site-header.scrolled .container { background: rgba(34, 36, 41, 0.86); }
.logo__img { height: 28px; }
/* Enlaces del menú como los del riel de la app */
.nav__link { border-radius: 999px; color: #C9CDD3; }
.nav__link:hover { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; }  /* APP --rail-hover */
.nav__link.active { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; } /* APP --rail-active */
.nav__link.active::after { display: none; }
.nav__dd {
  background: rgba(36, 38, 45, 0.94);
  border-color: transparent;
  box-shadow: var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -18px rgba(14, 15, 18, 0.7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid); /* pauta: «Never use transition: all» */
}
.nav__dd a:hover { background: rgba(255, 255, 255, 0.10); }
.hamburger { border-radius: 999px; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); }
.mobile-menu { background: rgba(36, 38, 45, 0.97); }
@media (max-width: 940px) {
  .site-header .container { width: calc(100% - 20px); height: 58px; padding-inline: 1.1rem 0.45rem; }
}
/* El logo ⛔ se aplasta: en 390 px no cabía con el botón, el WhatsApp y el menú (antes salía a ~45 px de ancho). */
.logo { flex: none; }
@media (max-width: 480px) {
  .site-header .container { padding-inline: 1rem 0.4rem; }
  .header__actions { gap: 0.4rem; }
  .logo__img { height: 24px; }
  .header__actions .header__login { padding: 0.55rem 0.8rem; font-size: 0.85rem; }
}
@media (max-width: 400px) { .logo__img { height: 22px; } }   /* 390 px: «develoop suite» sobresalía 5 px */
/* < 380 px ⛔ caben logo + botón + WhatsApp + menú: el acceso a develoop suite queda en el menú, donde ya está. */
@media (max-width: 380px) {
  .header__actions .header__login { display: none; }
}
/* Los botones del menú del celular heredaban la letra de los enlaces (1,6 rem): «Escríbenos por WhatsApp» se cortaba. */
.mobile-menu .btn {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
  justify-content: center; padding: 1rem 1.4rem; border-bottom: 0; margin-top: 1rem;
}
.mobile-menu .btn--wa { margin-top: 0.75rem; }

/* ---------- 5. Botones: los de la app ---------- */
.btn--primary {
  background: linear-gradient(135deg, #0076A8, #005D85);   /* APP --btn-primary-grad · 5,05:1 a 7,23:1 con blanco */
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 20px -10px rgba(0, 93, 133, 0.65); /* APP --ctrl-spec «.10» */
}
.btn--primary:hover {
  background: linear-gradient(135deg, #0083BA, #00668F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px -12px rgba(0, 93, 133, 0.75);
}
.btn--wa { color: #06291A; box-shadow: 0 8px 20px -10px rgba(18, 140, 74, 0.6); }   /* 7,9:1 en todas partes */
.btn--wa:hover { color: #06291A; box-shadow: 0 14px 30px -12px rgba(18, 140, 74, 0.7); }
.header__actions .btn--wa.header__wa { color: #FFFFFF; } /* ícono de marca de WhatsApp, convención del canal */
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
.section--light .btn--ghost,
.section--pale .btn--ghost {
  background: #FFFFFF;
  border-color: rgba(13, 34, 64, 0.12);
  box-shadow: 0 1px 2px rgba(16, 32, 42, 0.06);
}
.section--light .btn--ghost:hover,
.section--pale .btn--ghost:hover { border-color: rgba(0, 122, 178, 0.45); }
/* SKILL design-taste-frontend §3 Rule 5: «On :active, use -translate-y-[1px] or scale-[0.98]» */
.btn:active { transform: scale(0.98); }

/* ---------- 6. Rótulos: píldora en lugar de raya ---------- */
/* SKILL high-end-visual-design §4C: «Eyebrow Tags: Precede major H1/H2s with a microscopic, pill-shaped badge
   (rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium)». 10px ⇒ 11,5px por legibilidad. */
.eyebrow {
  padding: 0.42rem 0.85rem 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(76, 198, 245, 0.12);
  color: #7FD3F7;               /* 6,3:1 sobre la píldora en grafito */
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  line-height: 1;
}
.eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.18); }
.section--light .eyebrow,
.section--pale .eyebrow { background: rgba(0, 159, 227, 0.10); color: #005F93; } /* APP --brand-700 · 5,7:1 */

/* ---------- 7. Tarjetas: sin borde duro, con material ---------- */
/* SKILL redesign §Component: «Generic card look (border + shadow + white background). Remove the border»
   (y el gusto del dueño: ⛔ bordes en tarjetas). Grafito: filo de luz superior; claro: sombra de la app. */
.card {
  border-color: transparent;
  box-shadow: var(--hair), var(--spec), var(--shadow-card);
}
.card:hover {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(76, 198, 245, 0.28), var(--spec), var(--shadow-hover);
}
.section--light .card:hover,
.section--pale .card:hover { box-shadow: 0 0 0 1px rgba(0, 159, 227, 0.22), var(--shadow-hover); }

/* ---------- 8. Banda de llamada final ---------- */
.cta-band {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(0, 159, 227, 0.24) 0%, transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(76, 198, 245, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #3A3E44 0%, #26282D 100%);   /* RAIL */
  border-color: transparent;
  box-shadow: var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 30px 60px -30px rgba(14, 15, 18, 0.6);
}

/* La banda es una tarjeta OSCURA aunque viva en una sección clara (components.css:502 ya restablece sus tokens):
   aquí se restablece también lo que este archivo pinta con color explícito en las secciones claras. */
.section--light .cta-band,
.section--pale .cta-band {
  --accent-ink: #4CC6F5;
  --border-strong: rgba(76, 198, 245, 0.30);
  --spec: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --hair: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.section--light .cta-band .btn--ghost,
.section--pale .cta-band .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.section--light .cta-band .btn--ghost:hover,
.section--pale .cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
.section--light .cta-band .eyebrow,
.section--pale .cta-band .eyebrow { background: rgba(76, 198, 245, 0.12); color: #7FD3F7; }
.section--light .cta-band .text-gradient,
.section--pale .cta-band .text-gradient { color: var(--accent); -webkit-text-fill-color: var(--accent); }
.section--light .cta-band :focus-visible,
.section--pale .cta-band :focus-visible { outline-color: var(--iris); }

/* ---------- 9. Detalles ---------- */
.badge { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); }
.glow--iris { background: radial-gradient(circle, rgba(76, 198, 245, 0.40), transparent 70%); }
.metric__num { font-variant-numeric: tabular-nums; }   /* pauta web: «font-variant-numeric: tabular-nums for number columns/comparisons» */
/* Texto pequeño en celeste: #009fe3 da 4,08:1 sobre --surface y 2,76:1 sobre el lienzo ⇒ su variante legible */
.text-accent,
.link-arrow,
.service-card__tag,
.why-list .n,
body.page-nosotros .member__role,
body.page-influencers .ig-profile__handle,
.case-card__cat,
body.page-automatizacion .vs-card__pill,
body.page-influencers .inf-vs--ai .tag { color: var(--accent-ink); }
.section--light .icon-box,
.section--pale .icon-box { color: #007AB2; }          /* gráfico ≥ 3:1 sobre su fondo celeste suave */
.field label .req { color: #C22525; }                 /* APP --danger (tema claro) · 5,6:1 */
.mobile-menu .btn--wa { color: #06291A; }             /* .mobile-menu a pintaba el texto claro: 1,83:1 */
:focus-visible { outline-color: var(--iris); }
.section--light :focus-visible,
.section--pale :focus-visible { outline-color: #007AB2; }
.hero__avatars span { border-color: #3A3E44; }

/* SKILL redesign §Surface: «Grain and noise overlays. A fixed, pointer-events-none overlay with subtle noise»
   SKILL high-end §2A: «Subtle CSS noise/film-grain overlay (opacity-[0.03])». Fijo: ⛔ repinta al desplazar. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 150;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) {
  .site-header .container, .nav__dd { background: #27292E; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===========================================================================
   10. MATERIAL «APPLE»: la profundidad correcta, no la falsa (11-oct-2026)
   Regla del dueño (E204 de la app): «Apple ≠ PLANO. iOS no elimina la profundidad — elimina la
   profundidad FALSA.» Sombra corta y apoyada, filo de luz de 1 px, degradado VERTICAL (la luz cae de
   arriba), el control ⛔ se mueve al pasar el cursor y se HUNDE al pulsar. Recetas copiadas de la app:
   APP styles.css «.btn:hover:not(:disabled) { transform: none; … }»
   APP styles.css «.btn:active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 2px 4px var(--ink-a16); }»
   APP «--btn-primary-bar: linear-gradient(180deg, var(--btn-primary-a), var(--btn-primary-mid) 55%, var(--btn-primary-b))»
   APP R7.4 «el hover OSCURECE»: «background: linear-gradient(180deg, var(--btn-primary-mid), var(--btn-primary-b))»
   =========================================================================== */
:root { --btn-sombra: 0 1px 2px rgba(6, 7, 10, 0.5); }                    /* APP --shadow-sm (tema oscuro) */
.section--light, .section--pale { --btn-sombra: 0 1px 2px rgba(16, 32, 42, 0.05); } /* APP --shadow-sm (claro) */
.section--light .cta-band, .section--pale .cta-band { --btn-sombra: 0 1px 2px rgba(6, 7, 10, 0.5); }

/* Botones: reposo apoyado, hover que oscurece y ⛔ levanta */
.btn:hover { transform: none; }
.btn--primary {
  background: linear-gradient(180deg, #0076A8, #006B99 55%, #005D85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--btn-sombra);   /* APP --ctrl-spec + --shadow-sm */
}
.btn--primary:hover {
  background: linear-gradient(180deg, #006B99, #005D85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--btn-sombra);
}
.btn--wa { background: #25D366; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--btn-sombra); }
.btn--wa:hover { background: #1EBE5D; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--btn-sombra); }
.btn--ghost { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--btn-sombra); }
.section--light .btn--ghost, .section--pale .btn--ghost { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--btn-sombra); }
.section--light .btn--ghost:hover, .section--pale .btn--ghost:hover {
  background: #F7F9FB;                         /* APP --hover «rgba(13,34,64,.035)» sobre blanco */
  border-color: rgba(13, 34, 64, 0.22);        /* APP --border-hover */
}
.section--light .cta-band .btn--ghost:hover, .section--pale .cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
/* El gesto se muda del hover al clic (va al final: gana a los :hover cuando se pulsa) */
.btn:active,
.btn--primary:active,
.btn--wa:active,
.btn--ghost:active { transform: scale(0.97); box-shadow: inset 0 2px 4px rgba(16, 24, 40, 0.16); }  /* APP --ink-a16 */

/* Otros controles que «saltaban» al pasar el cursor */
.footer__social a:hover,
.step:hover .step__circle,
body.page-nosotros .philo-card:hover,
body.page-marketing .cross a:hover { transform: none; }

/* Tarjetas: VIDRIO sin desenfoque. SKILL high-end §6: «Apply backdrop-blur only to fixed or sticky elements
   … Never apply blur filters to scrolling containers» ⇒ la transparencia deja ver el grafito y la aurora de
   detrás, y el brillo lo pone el REFLEJO de la app: APP «--sheen: linear-gradient(115deg, rgba(255,255,255,.55)
   0%, transparent 34%)» (al .07 sobre grafito). En reposo ⛔ flotan: sombra corta. Al acercar el cursor ⛔ se
   mueven: se enciende su filo. */
.card,
body.page-develoop-suite .plan {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, transparent 34%), rgba(255, 255, 255, 0.045);
  border-color: transparent;
  box-shadow: var(--hair), var(--spec), 0 1px 2px rgba(6, 7, 10, 0.45), 0 10px 24px -16px rgba(6, 7, 10, 0.55);
}
.card:hover {
  transform: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 34%), rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(76, 198, 245, 0.30), var(--spec), 0 1px 2px rgba(6, 7, 10, 0.45), 0 12px 28px -16px rgba(6, 7, 10, 0.6);
}
.section--light .card,
.section--pale .card {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, transparent 34%), rgba(255, 255, 255, 0.88);  /* APP --sheen + --panel */
  box-shadow: var(--hair), var(--spec), 0 2px 4px rgba(16, 32, 42, 0.05), 0 8px 24px -8px rgba(16, 32, 42, 0.12);  /* APP --glass-inset + --shadow-md */
}
.section--light .card:hover,
.section--pale .card:hover {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.6) 0%, transparent 34%), #FFFFFF;
  box-shadow: 0 0 0 1px rgba(0, 159, 227, 0.24), var(--spec), 0 2px 4px rgba(16, 32, 42, 0.05), 0 10px 28px -10px rgba(16, 32, 42, 0.16);
}
/* Plan destacado: anillo de marca, ⛔ halo (APP E204: «halo de color de marca alrededor» = barato) */
body.page-develoop-suite .plan--featured {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px #009FE3, var(--spec), 0 1px 2px rgba(6, 7, 10, 0.45), 0 14px 30px -16px rgba(0, 93, 133, 0.55);
}
body.page-develoop-suite .plan__badge {
  background: linear-gradient(180deg, #0076A8, #006B99 55%, #005D85);   /* blanco sobre #4cc6f5 daba ~1,9:1 */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(6, 7, 10, 0.5);
}

/* Vidrio REAL (con desenfoque) sólo en lo fijo: la isla (§4), su desplegable y el menú del celular */
.site-header .container { background: linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, transparent 34%), rgba(39, 41, 46, 0.72); }
.site-header.scrolled .container { background: linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, transparent 34%), rgba(34, 36, 41, 0.86); }
.mobile-menu {
  background: rgba(36, 38, 45, 0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
@media (prefers-reduced-transparency: reduce) {
  .mobile-menu { background: #24262D; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header .container, .site-header.scrolled .container { background: #27292E; }
}

/* ---------- 11. Sello «Meta Tech Provider» (11-oct-2026) ----------
   Hecho VERIFICADO: Meta, 1-jul-2026, «Tu negocio se verificó como proveedor de tecnología»; App Review
   de WhatsApp aprobada el 27-jul-2026. ⛔ logo ni símbolo de Meta: «All usage of the Meta logo requires approval»
   (meta.com/brand/resources/meta/company-brand). Texto descriptivo + ícono propio (escudo con visto). */
.tp-badge {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-top: 1.1rem;
  padding: 0.42rem 1rem 0.42rem 0.42rem;
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%), rgba(255, 255, 255, 0.06);
  box-shadow: var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  font-size: 0.88rem; line-height: 1.35;
  color: var(--text-muted);
}
.tp-badge b { color: var(--text); font-weight: 600; }
.tp-badge__ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF;
  background: linear-gradient(180deg, #0076A8, #006B99 55%, #005D85);   /* la barra del primario de la app */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(6, 7, 10, 0.5);
}
.tp-badge__ico svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .tp-badge { border-radius: 18px; font-size: 0.84rem; } }
.footer__tp { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); max-width: 38ch; }
.footer__tp b { color: var(--text); font-weight: 600; }

/* Sello con el LOGO OFICIAL de Meta (decisión del dueño, 11-oct-2026, informado de que Meta pide aprobación de marca).
   Archivo: lockup «Negative Primary» del paquete oficial Meta_Company-Lockup.zip (meta.com/brand/resources), sólo
   reescalado. Reglas de Meta aplicadas: «Use primary logo variations whenever possible»; símbolo ≥ «12px/5mm» (va a 18 px);
   socio = anfitrión a la izquierda y «Meta included as a guest with its logo appearing to the right of the hairline». */
.tp-badge { gap: 0.9rem; padding: 0.55rem 1.15rem 0.55rem 1.05rem; }
.tp-badge__sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.22); }
.tp-badge__logo { display: block; height: 18px; width: auto; flex: none; }
.tp-badge__txt { white-space: nowrap; }
.site-footer .tp-badge { margin-top: 1.2rem; }
.footer__tp { margin-top: 0.8rem; }
@media (max-width: 400px) {
  .tp-badge { gap: 0.7rem; padding: 0.5rem 0.95rem 0.5rem 0.85rem; font-size: 0.82rem; }
  .tp-badge__logo { height: 16px; }
}
/* Sello: más presencia en el hero de escritorio; compacto y con texto que puede partirse en el pie (columnas de 241–308 px). */
@media (min-width: 561px) {
  .hero .tp-badge, .suite-hero .tp-badge, .page-hero .tp-badge { font-size: 0.95rem; gap: 1rem; padding: 0.62rem 1.3rem 0.62rem 1.2rem; }
  .hero .tp-badge__logo, .suite-hero .tp-badge__logo, .page-hero .tp-badge__logo { height: 22px; }
}
.site-footer .tp-badge { max-width: 100%; font-size: 0.78rem; gap: 0.6rem; padding: 0.45rem 0.85rem 0.45rem 0.8rem; border-radius: 16px; }
.site-footer .tp-badge__txt { white-space: normal; }
.site-footer .tp-badge__logo { height: 15px; }   /* símbolo ≥ 12 px (mínimo de Meta) */
/* Posición: en la portada, bajo los botones (primera pantalla); en la suite, ENCIMA del título. */
.tp-badge--hero { margin: 0 0 1.4rem; }
.tp-badge--top { margin: 0 0 1.5rem; }
/* Pie con columna angosta (761–1100 px): el logo baja bajo el texto en lugar de partir el texto en tres líneas. */
.site-footer .tp-badge__txt { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1100px) {
  .site-footer .tp-badge { flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.6rem 0.9rem; }
  .site-footer .tp-badge__sep { width: 100%; height: 1px; }
}
/* Portada: rótulo + sello en la misma fila, sobre el título (primera pantalla en 1440×900, 1024×768 y 360×740). */
.hero__marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.9rem; margin-bottom: 1.1rem; }
.hero__marcas .eyebrow { margin-bottom: 0; }
.hero__marcas .tp-badge { margin: 0; }
/* Sello EN LA CABECERA (fija, todas las páginas): «develoop | Meta Tech Provider».
   Meta: «The horizontal logo lockup is the preferred format for co-branding, and a hairline is used to associate the Meta
   logo lockup with a partner logo» — anfitrión a la izquierda, Meta a la derecha de la línea, los dos con su lockup completo. */
.header__tp { display: none; }
@media (min-width: 1280px) {
  .site-header .container { justify-content: flex-start; }
  .header__tp { display: inline-flex; align-items: center; gap: 0.7rem; margin-left: -0.4rem; margin-right: auto; flex: none; }
  .header__tp-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.24); }
  .header__tp-logo { height: 16px; width: auto; display: block; }      /* símbolo ≥ 12 px */
  .header__tp-txt { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C9CDD3; white-space: nowrap; }
  .site-header .nav { margin-right: auto; }
}
/* Menú del celular: el sello al pie del menú (en celular la cabecera ⛔ tiene sitio). */
.mobile-menu .tp-badge--menu { align-self: flex-start; margin: 0 0 1.2rem; border-bottom: 0; }
/* Dueño, 11-oct: «si lo pones en la isla … ya no lo pongas en la cabecera». ≥ 1280 px la isla lo lleva ⇒ fuera del
   encabezado de la página; < 1280 px la isla ⛔ tiene sitio ⇒ el del encabezado se queda. Nunca dos a la vez. */
@media (min-width: 1280px) {
  .hero__marcas .tp-badge,
  .tp-badge--top { display: none; }
}

/* ---------- 12. La isla sin apretones (dueño, 11-oct: «hay muchas cosas en la isla… muy apretado en móvil») ----------
   Medido antes: 390–480 px ⇒ botón + WhatsApp + menú a 6 px entre sí y a 3–6 px del borde; 941 px ⇒ enlaces a 24 px.
   · ≤ 1100 px: menú desplegable en vez de los enlaces (a 941 px ⛔ cabían con aire).
   · ≤ 600 px: sólo logo + WhatsApp + menú; «develoop suite / Iniciar sesión» ya está DENTRO del menú.
   · El sello de Meta en la isla, desde 1280 px (a 1200 quedaba justo). */
@media (max-width: 1100px) {
  .nav { display: none; }
  .hamburger { display: block; }
  .header__actions .btn--wa span { display: none; }
}
@media (max-width: 600px) {
  .header__actions .header__login { display: none; }
  .header__actions { gap: 0.6rem; }
  .logo__img { height: 26px; }
}