/* ==========================================================================
   APP.CSS — Base UI System (Blocksy Child + Bootstrap)
   Paleta:
   - Ink:   #05061B
   - Sand:  #EFEDEC
   - Lilac: #DBD7FC
   - Pink:  #F7B0FB
   - Rose:  #F4458F
   Font: Poppins
   ========================================================================== */

/* -----------------------------
   1) Design Tokens (CSS Vars)
------------------------------ */
:root {
  /* Brand */
  --c-ink: #05061b;
  --c-sand: #efedec;
  --c-lilac: #dbd7fc;
  --c-pink: #f7b0fb;
  --c-rose: #f4458f;

  /* Semantic */
  --c-bg: var(--c-sand);
  --c-surface: #ffffff;
  --c-text: var(--c-ink);
  --c-muted: rgba(5, 6, 27, 0.72);
  --c-border: rgba(5, 6, 27, 0.12);
  --c-shadow: rgba(5, 6, 27, 0.12);
  --c-focus: rgba(244, 69, 143, 0.35);

  /* Typography */
  --ff-base: "Poppins", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Type scale (responsive) */
  --fs-0: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem); /* small */
  --fs-1: clamp(1rem, 0.98rem + 0.25vw, 1.125rem); /* base */
  --fs-2: clamp(1.125rem, 1.08rem + 0.35vw, 1.35rem);
  --fs-3: clamp(1.35rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-4: clamp(1.75rem, 1.55rem + 1vw, 2.4rem);
  --fs-5: clamp(2.2rem, 1.9rem + 1.6vw, 3.2rem);

  --lh-tight: 1.15;
  --lh-base: 1.55;

  /* Spacing (8px grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;

  /* Radius */
  --r-1: 0.5rem;
  --r-2: 0.75rem;
  --r-3: 1rem;
  --r-4: 1.25rem;

  /* Shadows */
  --sh-1: 0 6px 18px var(--c-shadow);
  --sh-2: 0 14px 40px var(--c-shadow);

  /* Motion */
  --t-fast: 140ms;
  --t-base: 220ms;
  --e-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --container-max: 1200px;
}

/* -----------------------------
   2) Resets / Base
------------------------------ */
html {
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
label,
figcaption,
.wp-block-quote,
.wp-block-pullquote,
.ct-label,
.site-title,
.entry-meta,
.ct-menu-badge,
.entry-excerpt,
.ct-post-title,
.ct-breadcrumbs,
.ct-header-text,
.ct-product-sku,
.ct-product-title,
.ct-woo-card-stock,
.author-box-bio,
.author-box-name,
.ct-contact-info,
.site-description,
.page-description,
.mobile-menu a,
.menu .ct-menu-link,
.comment-reply-title,
.ct-footer-copyright,
.ct-language-switcher,
:where(pre, code, samp, kbd),
.onsale,
.out-of-stock-badge,
[class*="ct-woo-badge-"],
:is(
    .entry-summary,
    [data-products],
    .ct-trending-block,
    .ct-added-to-cart-product
  )
  .price,
.ct-waitlist-message,
.woocommerce-tabs .tabs,
.woocommerce-tabs .ct-accordion-heading,
.woocommerce-result-count,
.ct-header-account-dropdown,
.ct-module-title:is(p, span),
.related-entry-title:is(p, span),
.woocommerce-loop-product__title:is(p, span),
.woocommerce-loop-category__title:is(p, span),
.ct-shortcuts-bar,
.ct-widget > *,
.ct-dynamic-data-layer,
.ct-dynamic-filter,
.ct-search-results,
.tutor-ratings,
.tutor-meta > *,
.tutor-course-details-title,
.tutor-course-details-actions > a,
.ct-language-switcher ul[data-placement] {
  font-family: "Poppins", sans-serif !important;
}
body {
  font-family: "Poppins", sans-serif !important;
  font-size: var(--fs-1);
  line-height: var(--lh-base);
  color: var(--c-ink) !important;
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Better selection */
::selection {
  background: rgba(247, 176, 251, 0.55);
  color: var(--c-ink);
}

/* -----------------------------
   3) Typography Helpers
------------------------------ */

.p-light{
  color: var(--c-sand);
}
.u-h1 {
  font-size: var(--fs-5);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.u-h2 {
  font-size: var(--fs-4);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.u-h3 {
  font-size: var(--fs-3);
  line-height: 1.2;
  font-weight: var(--fw-semibold);
}
.u-h4 {
  font-size: var(--fs-2);
  line-height: 1.25;
  font-weight: var(--fw-semibold);
}

.u-lead {
  font-size: var(--fs-2);
  color: var(--c-muted);
}
.u-small {
  font-size: var(--fs-0);
  color: var(--c-muted);
}

.u-fw-regular {
  font-weight: var(--fw-regular);
}
.u-fw-medium {
  font-weight: var(--fw-medium);
}
.u-fw-semibold {
  font-weight: var(--fw-semibold);
}
.u-fw-bold {
  font-weight: var(--fw-bold);
}

/* -----------------------------
   4) Layout Utilities
------------------------------ */
.u-container {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.u-section {
  padding-block: var(--sp-10);
}
@media (max-width: 768px) {
  .u-section {
    padding-block: var(--sp-9);
  }
}

.u-stack > * + * {
  margin-top: var(--sp-5);
} /* vertical rhythm */

/* -----------------------------
   5) Surfaces / Cards
------------------------------ */
.ui-surface {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}

.ui-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  padding: var(--sp-7);
}

.ui-card--soft {
  background: rgba(219, 215, 252, 0.3); /* lilac tint */
}

/* -----------------------------
   6) Buttons (custom classes)
------------------------------ */
.ui-btn, [type=submit]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: 999px !important;
  border: 1px solid transparent;
  font-weight: var(--fw-semibold);
  line-height: 1;
  transition:
    transform var(--t-fast) var(--e-out),
    box-shadow var(--t-base) var(--e-out),
    background var(--t-base) var(--e-out),
    border-color var(--t-base) var(--e-out);
  user-select: none;
  text-decoration: none;
  width: 155px;
  height: 50px;
}

.ui-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.ui-btn:active {
  transform: translateY(0);
}

.ui-btn--primary {
  background: var(--c-rose);
  color: #fff;
  box-shadow: 0 10px 24px rgba(244, 69, 143, 0.25);
}
.ui-btn--primary:hover {
  box-shadow: 0 14px 34px rgba(244, 69, 143, 0.32);
}

.ui-btn--outline {
  background: transparent;
  border-color: rgba(5, 6, 27, 0.25);
  color: var(--c-ink);
}
.ui-btn--outline:hover {
  background: rgba(219, 215, 252, 0.25);
  color: var(--c-rose);
}

.ui-btn--ghost {
  background: rgba(219, 215, 252, 0.25);
  color: var(--c-ink);
}
.ui-btn--ghost:hover {
  background: rgba(219, 215, 252, 0.38);
}

/* -----------------------------
   7) Forms (works with Bootstrap)
------------------------------ */
.ui-field {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  padding: 0.85rem 1rem;
  width: 100%;
  transition:
    border-color var(--t-base) var(--e-out),
    box-shadow var(--t-base) var(--e-out);
}

.ui-field:focus {
  border-color: rgba(244, 69, 143, 0.55);
  box-shadow: 0 0 0 0.25rem rgba(244, 69, 143, 0.18);
  outline: none;
}

.ui-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: var(--fw-medium);
}

/* -----------------------------
   8) Badges / Chips
------------------------------ */
.ui-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: rgba(247, 176, 251, 0.25);
  font-size: var(--fs-0);
  font-weight: var(--fw-medium);
}

/* -----------------------------
   9) Links
------------------------------ */
.ui-link {
  color: var(--c-rose);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.ui-link:hover {
  text-decoration: underline;
}

/* -----------------------------
   10) Bootstrap small overrides (minimal)
   Nota: solo lo indispensable para que se sienta “tu UI”
------------------------------ */
:where(.btn) {
  font-family: var(--ff-base);
  font-weight: var(--fw-semibold);
  border-radius: 999px;
}

:where(.card) {
  border-radius: var(--r-3);
  border-color: var(--c-border);
}

:where(.form-control, .form-select) {
  border-radius: var(--r-2);
  border-color: var(--c-border);
}

/* -----------------------------
   11) WordPress / Blocksy niceties
------------------------------ */
.wp-block-image img {
  border-radius: var(--r-3);
}

/* ==========================================================================
   HERO — Impulsa tu marca (flex-only with Bootstrap utilities)
   ========================================================================== */
.hero-ai {
  position: relative;
  overflow: hidden;
  background: rgba(219, 215, 252, 0.35);
}

/* Background image + overlay */
.hero-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  filter: saturate(0.9) contrast(0.95);
  transform: scale(1.02);
  opacity: 0.35; /* foto suave al fondo */
  pointer-events: none;
}

.hero-ai::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(219, 215, 252, 0.55); /* overlay lila */
  pointer-events: none;
}

.hero-ai__inner {
  position: relative;
  z-index: 1;
  min-height: 520px;
}

.hero-ai__content {
  max-width: 640px;
}

.hero-ai__title {
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.6rem + 2.2vw, 3.35rem);
}

.hero-ai__desc {
  max-width: 520px;
  font-size: var(--fs-0);
  color: var(--c-ink);
}

.u-accent {
  color: var(--c-rose);
}

/* Underline like the mock */
.u-accent-underline {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
  font-weight: var(--fw-bold);
}

/* Button variant to match screenshot */
.ui-btn--dark, button {
  background: var(--c-ink);
  color: #fff;
  box-shadow: 0 10px 24px rgba(5, 6, 27, 0.22);
}
.ui-btn--dark:hover, button:hover {
  box-shadow: 0 14px 34px rgba(5, 6, 27, 0.28);
}

.hero-ai__portrait {
  width: min(380px, 100%);
  height: auto;
  display: block;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hero-ai__inner {
    min-height: auto;
    padding-top: var(--sp-9);
  }
  .hero-ai__content,
  .hero-ai__desc {
    max-width: 100%;
  }
  .hero-ai__portrait {
    width: min(340px, 90%);
  }
}

/* ==========================================================================
   HERO — Ajuste imagen derecha (más grande + pegada abajo)
   ========================================================================== */
.hero-ai__media {
  align-items: flex-end; /* clave: empuja la imagen hacia abajo */
}

.hero-ai__portrait {
  width: min(500px, 42vw); /* más grande */
  max-width: 100%;
  align-self: flex-end;
  margin-bottom: -40px; /* efecto "pegada" / overlap */
}

/* Responsive control */
@media (max-width: 991.98px) {
  .hero-ai__media {
    align-items: center;
  }

  .hero-ai__portrait {
    width: min(360px, 85%);
    margin-bottom: 0;
  }
}

/* ==========================================================================
   BUTTON — Shine swipe (override .ui-btn--dark)
   ========================================================================== */
.ui-btn--dark, [type=submit] {
  position: relative;
  overflow: hidden;
  background: var(--c-ink) !important;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 28px rgba(5, 6, 27, 0.22) !important;
  transition:
    transform var(--t-fast) var(--e-out),
    box-shadow var(--t-base) var(--e-out),
    background var(--t-base) var(--e-out),
    border-color var(--t-base) var(--e-out);
}

/* Shine layer */
.ui-btn--dark::before, [type=submit]::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -35%;
  width: 35%;
  height: 180%;
  transform: rotate(18deg) translateX(-140%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.32) 45%,
    rgba(255, 255, 255, 0.08) 60%,
    transparent 100%
  );
  transition: transform 650ms var(--e-out);
  pointer-events: none;
}

/* Hover: subtle brand tint + shine passes */
.ui-btn--dark:hover, [type=submit]:hover {
  background: #12143a; /* tinta del ink (más elegante que rosa directo) */
  border-color: rgba(244, 69, 143, 0.35);
  box-shadow:
    0 18px 44px rgba(5, 6, 27, 0.26),
    0 0 0 4px rgba(244, 69, 143, 0.12);
  transform: translateY(-2px);
  color: var(--c-sand);
}

.ui-btn--dark:hover::before, [type=submit]:hover::before {
  transform: rotate(18deg) translateX(420%);
}

/* Active: press feedback */
.ui-btn--dark:active, [type=submit]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 10px 22px rgba(5, 6, 27, 0.22);
}

/* Optional: reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .ui-btn--dark,
  .ui-btn--dark::before {
    transition: none;
  }
}

/* ==========================================================================
   SERVICES — Section
   ========================================================================== */

.u-container-services {
  padding: 100px 0;
}
.services {
  background:
    radial-gradient(
      1200px 520px at 50% -10%,
      rgba(219, 215, 252, 0.2),
      transparent 60%
    ),
    linear-gradient(180deg, #05061b 0%, #040516 100%);
  color: #fff;
}

.services__head {
  max-width: 760px;
}

.services__title {
  font-size: clamp(2rem, 1.7rem + 1.2vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-sand);
}

.services__subtitle {
  color: var(--c-sand);
  font-size: var(--fs-0);
}

/* Flex grid */
.services__grid {
  width: 100%;
  max-width: 980px;
}

/* Cards */
.service-card {
  color: var(--c-text);
  background: rgba(239, 237, 236, 0.96); /* sand */
  border-color: rgba(255, 255, 255, 0.14);
  padding: var(--sp-7);
  flex: 1 1 calc(50% - 1rem); /* 2 cols on desktop */
  min-width: 320px;
}

.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-2);
  background: rgba(247, 176, 251, 0.25);
  border: 1px solid rgba(244, 69, 143, 0.2);
}

.service-card__title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
}

.service-card__price {
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.service-card__price--free {
  color: var(--c-rose);
}

.service-card__desc {
  color: var(--c-ink);
  font-size: 0.95rem;
}

.service-card__divider {
  height: 1px;
  width: 100%;
  background: rgba(5, 6, 27, 0.1);
}

.service-card__label {
  color: var(--c-ink);
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
}

/* List */
.service-list {
  list-style: none;
}

.service-list__item {
  color: var(--c-ink);
  font-size: 0.92rem;
}

.service-list__item-white {
  color: var(--c-ink);
  font-size: 0.92rem;
}


.service-list__dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: 0.2rem;
  flex: 0 0 18px;
  background: var(--c-rose);
  box-shadow: 0 6px 14px rgba(244, 69, 143, 0.25);
  position: relative;
}

.service-list__dot::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  left: 6px;
  top: 3px;
  transform: rotate(40deg);
}

/* Small button size (reusable) */
.ui-btn--sm {
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
}

/* Responsive: 1 col */
@media (max-width: 767.98px) {
  .service-card {
    flex-basis: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   SPLIT CTA — Pattern left + photo right
   ========================================================================== */

.split-cta{
  overflow: hidden;
}

/* WRAP */
.split-cta__wrap{
  min-height: 560px;
  height: auto;                 /* nunca fijo */
  align-items: stretch;         /* ambos lados misma altura */
}

/* ==============================
   LEFT PANEL
================================= */

.split-cta__left{
  flex: 1 1 50%;
  padding: var(--sp-10);
  background-image: url("../img/home/patern-section.png");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;          /* centra verticalmente el contenido */
}

.split-cta__left-inner{
  width: min(520px, 100%);
}

.split-cta__title{
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem);
  line-height: 1.12;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  letter-spacing: -0.02em;
}

.split-cta__lead{
  font-weight: var(--fw-semibold);
  color: var(--c-rose);
  font-size: 0.98rem;
}

.split-cta__desc{
  color: var(--c-ink);
  font-size: 0.95rem;
}

.split-cta__btn{
  margin-top: var(--sp-3);
}

/* ==============================
   RIGHT PANEL
================================= */

.split-cta__right{
  flex: 1 1 50%;
  align-self: stretch;          /* toma la altura del lado izquierdo */
  display: flex;
}

/* Imagen dinámica */
@media (min-width: 992px){

  .split-cta__photo{
    width: 100%;
    height: 100%;               /* iguala altura del bloque */
    object-fit: cover;          /* elegante */
    object-position: center;    /* ajustable si quieres */
    display: block;
  }

}

/* ==============================
   RESPONSIVE
================================= */

@media (max-width: 991.98px){

  .split-cta__wrap{
    min-height: auto;
    height: auto;
  }

  .split-cta__left{
    padding: var(--sp-9) var(--sp-6);
  }

  .split-cta__right{
    min-height: 360px;
  }

  .split-cta__photo{
    width: 100%;
    height: 360px;              /* control visual en móvil */
    object-fit: cover;
  }

}


/* ==========================================================================
   MEDIA + FREEBIES — with floating decorative elements
   ========================================================================== */
.media-freebies {
  position: relative;
  background: var(--c-sand);
  padding-block: var(--sp-10);
  overflow: hidden;
}



.highlight-prink{
  color: var(--c-rose) !important;
}
/* Headings */
.mf-head {
  max-width: 820px;
}

.mf-title {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.65rem + 1.4vw, 3rem);
}



.mf-subtitle {
  color: var(--c-ink);
  font-size: var(--fs-0);
}

.mf-title-white, .mf-subtitle-white, .hero-ai__desc-white, .service-list__item-white{
  color: var(--c-sand);
}

/* -----------------------------
   Floating elements (decor)
------------------------------ */
.mf-float {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.mf-float--blob {
  width: 140px;
  height: 140px;
  border-radius: 42% 58% 55% 45% / 45% 45% 55% 55%;
  background: rgba(247, 176, 251, 0.35);
  filter: blur(0.2px);
}

.mf-float--stripes {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: repeating-linear-gradient(
    45deg,
    rgba(244, 69, 143, 0.22),
    rgba(244, 69, 143, 0.22) 4px,
    transparent 4px,
    transparent 10px
  );
  opacity: 0.55;
}

/* Placement similar to screenshot */
.mf-float--tl {
  top: 70px;
  left: -40px;
}
.mf-float--br {
  bottom: 120px;
  right: -50px;
}
.mf-float--l {
  top: 210px;
  left: 70px;
  transform: rotate(10deg);
}
.mf-float--r {
  top: 520px;
  right: 65px;
  transform: rotate(-8deg);
}

/* Keep content above decor */
.media-freebies > .u-container {
  position: relative;
  z-index: 1;
}

/* -----------------------------
   Feature videos (2 cards)
------------------------------ */
.mf-feature {
  max-width: 980px;
}

.mf-video {
  position: relative;
  flex: 1 1 420px;
  max-width: 480px;
  min-height: 220px;
  border-radius: var(--r-4);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--sh-2);
}

.mf-video__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.2) contrast(0.95) brightness(0.85);
  transition:
    transform var(--t-base) var(--e-out),
    filter var(--t-base) var(--e-out);
}

.mf-video__overlay {
  position: absolute;
  inset: 0;
  padding: var(--sp-7);
  background: linear-gradient(180deg, transparent 15%, rgba(5, 6, 27, 0.7) 90%);
}

.mf-video__kicker {
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}

.mf-video__title {
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 1.35rem;
  line-height: 1.1;
}

.mf-video:hover .mf-video__img {
  transform: scale(1.03);
  filter: saturate(0.35) contrast(1) brightness(0.9);
}

/* -----------------------------
   Resource cards (3)
------------------------------ */
.mf-cards {
  max-width: 1100px;
}

.mf-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(5, 6, 27, 0.08);
  box-shadow: 0 16px 44px rgba(5, 6, 27, 0.08);
  padding: var(--sp-7);
  border-radius: var(--r-4);
  flex: 1 1 300px;
  max-width: 340px;
  min-height: 420px;
}

.mf-card__illus {
  width: 88px;
  height: 88px;
  display: block;
}

.mf-card__body {
  width: 100%;
}

.mf-card__tag {
  color: var(--c-rose);
  font-weight: var(--fw-bold);
}

.mf-card__title {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  line-height: 1.15;
}

.mf-card__text {
  color: var(--c-ink);
  font-size: 0.92rem;
}

/* Dots */
.mf-dots {
  margin-top: var(--sp-4);
}
.mf-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(5, 6, 27, 0.25);
}
.mf-dot--active {
  background: var(--c-ink);
}

/* ==========================================================================
   MEDIA FREEBIES — Feature slider (Swiper)
   ========================================================================== */
.mf-feature--swiper{
  position: relative;
  max-width: 1100px;
}

.mf-feature--swiper .swiper-slide{
  height: auto;
}

/* Pagination */
.mf-feature__pagination{
  margin-top: var(--sp-4);
  position: static;
}

.mf-feature__pagination .swiper-pagination-bullet{
  width: 7px;
  height: 7px;
  opacity: 1;
  background: rgba(255,255,255,.28);
}

.mf-feature__pagination .swiper-pagination-bullet-active{
  background: rgba(255,255,255,.85);
}

/* Arrows */
.mf-feature__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
  z-index: 5;
}

.mf-feature__prev{ left: 10px; }
.mf-feature__next{ right: 10px; }

.mf-feature__nav:hover{
  background: rgba(255,255,255,.14);
}

@media (max-width: 767.98px){
  .mf-feature__nav{ display: none !important; }
}


/* ==========================================================================
   TESTIMONIALS — Swiper
   ========================================================================== */
.testimonials {
  position: relative;
  background: rgba(239, 237, 236, 0.92);
  padding-block: var(--sp-10);
  overflow: hidden;
}

.testimonials > .u-container {
  position: relative;
  z-index: 1;
}

.tst-title {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem);
  max-width: 820px;
}

/* Layout row (arrows + slider) */
.tst-slider {
  max-width: 980px;
  gap: var(--sp-6);
}

/* Swiper sizing */
.tst-swiper {
  width: min(760px, 100%);
}

/* Card */
.tst-card {
  width: min(720px, 100%);
  padding: var(--sp-6) var(--sp-6);
}

.tst-quote {
  color: var(--c-ink);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 680px;
}

/* Person */
.tst-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(219, 215, 252, 0.55);
  border: 1px solid rgba(5, 6, 27, 0.1);
}

.tst-avatar > img{
  border-radius: 50%;
}

.tst-avatar__icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(5, 6, 27, 0.35);
  position: relative;
}
.tst-avatar__icon::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 10px;
  border-radius: 10px 10px 2px 2px;
  background: rgba(5, 6, 27, 0.35);
  left: 2px;
  top: 22px;
  transform: translateY(-6px);
}

.tst-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.tst-name {
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  font-size: 0.98rem;
}

.tst-role {
  color: var(--c-rose);
  font-weight: var(--fw-semibold);
  font-size: 0.82rem;
}

/* Nav buttons */
.tst-nav {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(5, 6, 27, 0.14);
  background: rgba(255, 255, 255, 0.55);
  color: var(--c-ink);
  transition:
    transform var(--t-fast) var(--e-out),
    background var(--t-base) var(--e-out),
    box-shadow var(--t-base) var(--e-out);
}

.tst-nav:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(5, 6, 27, 0.1);
}

.tst-nav:active {
  transform: translateY(0) scale(0.98);
}

/* Pagination */
.tst-pagination {
  margin-top: var(--sp-4);
  position: static;
}

.tst-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  opacity: 1;
  background: rgba(5, 6, 27, 0.25);
}

.tst-pagination .swiper-pagination-bullet-active {
  background: var(--c-ink);
}

/* Responsive: hide arrows on small screens */
@media (max-width: 767.98px) {
  .tst-slider {
    gap: var(--sp-3);
  }
  .tst-nav {
    display: none !important;
  }
  .tst-card {
    padding-inline: var(--sp-3);
  }
}

/* ==========================================================================
   NEWSLETTER — Pattern card
   ========================================================================== */
.newsletter {
  background: rgba(219, 215, 252, 0.3);
  padding-block: var(--sp-10);
}

.newsletter__head {
  max-width: 760px;
}

.newsletter__kicker {
  color: var(--c-ink);
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
}

.newsletter__title {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.7rem + 1.25vw, 3rem);
}

.newsletter__subtitle {
  color: var(--c-rose);
  font-weight: var(--fw-semibold);
  font-size: 0.9rem;
}

/* Card */
.nl-card {
  max-width: 1020px;
  border-radius: var(--r-4);
  overflow: hidden;
  padding: var(--sp-8);
  position: relative;
  box-shadow: 0 18px 44px rgba(5, 6, 27, 0.1);

  background-image: url("../img/home/patern-section-second.png");
  background-size: cover;
  background-position: center;
}

.nl-card-custom{
  max-width: 1020px;
  border-radius: var(--r-4);
  overflow: hidden;
  padding: var(--sp-8);
  position: relative;
 
  background-size: cover;
  background-position: center;
}

/* Optional soft overlay to keep text readable */
.nl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.nl-card-custom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.nl-card__content,
.nl-card__media {
  position: relative;
  z-index: 1;
}

.nl-card__content {
  max-width: 540px;
}

.nl-card__quote {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.nl-card__h {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
}

.nl-card__meta {
  color: var(--c-ink);
  font-size: 0.82rem;
  font-weight: var(--fw-medium);
}

.nl-card__p {
  color: var(--c-ink);
  font-size: 0.95rem;
  max-width: 520px;
}

/* Contenedor ovalado */
.nl-media {
  width: 230px;
  height: 300px; /* más alto que ancho → oval */
  border-radius: 120px; /* oval vertical */
  border: 8px solid #05061b; /* azul oscuro (ink) */
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 48px rgba(5, 6, 27, 0.22);
}

/* Imagen interna */
.nl-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 112px; /* acompaña el borde */
}

/* Badge rosa ajustado a la nueva forma */
.nl-media__badge {
  right: -14px;
  top: 34%;
  width: 48px;
  height: 48px;
}

/* Responsive */
@media (max-width: 991.98px) {
  .nl-card {
    padding: var(--sp-7);
  }
  .nl-card__content {
    max-width: 100%;
  }
  .nl-media {
    width: 190px;
    height: 190px;
  }
}

/* ==========================================================================
   ABOUT — Conóceme
   ========================================================================== */
.about {
  background: rgba(239, 237, 236, 0.92);
  padding-block: var(--sp-10);
  overflow: hidden;
}

.about__content {
  max-width: 560px;
}

.about__title {
  font-size: clamp(2.2rem, 1.9rem + 1.4vw, 3.2rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  line-height: 1.05;
}

.about__kicker {
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  line-height: 1.2;
}

.about__copy {
  color: var(--c-ink);
  font-size: 0.95rem;
}

/* Media frame */
.about__media {
  flex: 1 1 520px;
}

.about__frame {
  position: relative;
  width: min(520px, 100%);
  min-height: 520px;
}

/* Big lilac circle behind */
.about__halo {
  position: absolute;
  width: 420px;
  height: 100%;
  border-radius: 999px;
  background: rgba(219, 215, 252, 0.75);
  top: -40px;
  right: 70px;
  z-index: 0;
}

/* Pink bubble */
.about__bubble {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: rgba(244, 69, 143, 0.55);
  left: 0;
  top: 190px;
  z-index: 999;
}

/* Main image */
.about__img {
  position: relative;
  z-index: 2;
  width: 420px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Badge */
.about__badge {
  position: absolute;
  right: 12px;
  top: 300px;
  z-index: 3;
  width: 140px;
  height: 140px;
  border-radius: var(--r-4);
  background: rgba(244, 69, 143, 0.92);
  color: #fff;
  box-shadow: 0 18px 44px rgba(5, 6, 27, 0.2);
}

.about__badge-num {
  font-weight: var(--fw-bold);
  font-size: 2.5rem;
  line-height: 1;
}

.about__badge-text {
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  line-height: 1.1;
}

/* ============================
   FIX: Imagen pegada al borde inferior (desktop)
   ============================ */
@media (min-width: 992px) {
  /* Override de Bootstrap: align-items-center del wrapper */
  .about .u-container {
    align-items: stretch !important;
  }

  /* Pega el bloque derecho al fondo */
  .about__media {
    align-items: flex-end !important;
    justify-content: center;
  }

  /* Compensa el padding inferior de .about */
  .about__frame {
    margin-bottom: calc(var(--sp-10) * -1);
  }
}

/* Responsive */
@media (max-width: 991.98px) {
  .about__frame {
    min-height: 460px;
    margin-bottom: 0;
  }
  .about__halo {
    width: 360px;
    height: 360px;
    right: 10px;
  }
  .about__img {
    width: 360px;
  }
  .about__badge {
    right: 0;
    top: 260px;
    width: 128px;
    height: 128px;
  }
}

/* ==========================================================================
   ROLES STRIP — Logos row
   ========================================================================== */
.roles-strip {
  background: var(--c-ink);
  padding-block: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.roles-strip__title {
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--fw-medium);
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
}

.roles-strip__logos {
  max-width: 1100px;
}

.roles-strip__logo {
  height: 26px;
  width: auto;
  opacity: 0.85;
  filter: grayscale(1) brightness(1.6);
  transition:
    opacity var(--t-base) var(--e-out),
    transform var(--t-fast) var(--e-out);
}

.roles-strip__logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Responsive: un poquito más grande en desktop */
@media (min-width: 992px) {
  .roles-strip__logo {
    height: 80px;
  }
}

/* ==========================================================================
   PRINCIPLES — Misión / Visión / Valores
   ========================================================================== */
.principles {
  position: relative;
  background: rgba(239, 237, 236, 0.92);
  padding-block: var(--sp-10);
  overflow: hidden;
}

/* Keep content above floats */
.principles > .u-container {
  position: relative;
  z-index: 1;
}

.pr-head {
  max-width: 820px;
}

.pr-kicker {
  color: var(--c-ink);
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
}

.pr-title {
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
}

.pr-grid {
  max-width: 1100px;
  margin-top: var(--sp-6);
}

/* Card */
.pr-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(5, 6, 27, 0.08);
  border-radius: var(--r-4);
  box-shadow: 0 18px 44px rgba(5, 6, 27, 0.08);
  padding: var(--sp-8) var(--sp-7);
  flex: 1 1 300px;
  max-width: 360px;
  min-height: 320px;
}

.pr-illus {
  width: 120px;
  height: 120px;
  display: block;

  object-fit: cover
  ;
}

.pr-card__title {
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
}

.pr-card__text {
  color: var(--c-ink);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 290px;
}

/* Valores list */
.pr-list {
  list-style: none;
  width: 100%;
  color: var(--c-ink);
  font-size: 0.95rem;
}

.pr-list__item {
  padding: 0.12rem 0;
}

/* Responsive */
@media (max-width: 767.98px) {
  .pr-card {
    max-width: 420px;
  }
}


/* ==========================================================================
   SERVICES LIST — Image + card rows
   ========================================================================== */
.svc-list{
  background: #F4F4F4 !important;
  padding-block: var(--sp-10);
}

.svc-item{
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
}

/* Alternate: invierte orden SOLO en desktop */
@media (min-width: 992px){
  .svc-item--alt{
    flex-direction: row-reverse !important;
  }
}

/* Media (image) */
.svc-item__media{
  flex: 1 1 420px;
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(5,6,27,.12);
  background: #fff;
}

.svc-item__img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* Card sizing for this layout */
.svc-item__card{
  flex: 1 1 460px;
  max-width: 520px;
  padding: var(--sp-7);
}

/* Tighten card content like screenshot */
.svc-item__card .service-card__desc{
  max-width: 420px;
}

/* Mobile spacing */
@media (max-width: 991.98px){
  .svc-item__card{
    max-width: 100%;
  }
}


/* ==========================================================================
   PAGE HERO — Mentoria (bg image + overlay)
   ========================================================================== */
.page-hero{
  position: relative;
  padding-block: var(--sp-10);
  background: rgba(219, 215, 252, .35);
  overflow: hidden;
}

.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--page-hero-bg);
  background-size: cover;
  background-position: center;
  opacity: .35;
  transform: scale(1.02);
  pointer-events:none;
}

.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(219, 215, 252, .55);
  pointer-events:none;
}

.page-hero > .u-container{
  position: relative;
  z-index: 1;
}

.page-hero__title{
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-ink);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem);
}

.page-hero__subtitle{
  max-width: 720px;
  color: var(--c-ink);
  font-size: var(--fs-0);
}

/* ==========================================================================
   PLANS — 3 cards
   ========================================================================== */
.plans{
  background: rgba(239, 237, 236, .92);
  padding-block: var(--sp-10);
}

.plans__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
}

.plans__grid{
  max-width: 1100px;
  margin-top: var(--sp-6);
}

/* Card */
.plan-card{
  background: rgba(255,255,255,.78);
  border-color: rgba(5,6,27,.08);
  border-radius: var(--r-4);
  box-shadow: 0 18px 44px rgba(5,6,27,.08);
  padding: var(--sp-8) var(--sp-7);
  flex: 1 1 300px;
  max-width: 360px;
  min-height: 560px;
}

/* Icon circle */
.plan-card__icon{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: #F4458F;
  border: 1px solid rgba(244, 69, 143, .18);
}

.plan-card__h{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: 1.35rem;
}

.plan-card__p{
  color: var(--c-ink);
  font-size: .95rem;
}

.plan-card__price{
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
}

.plan-card__divider{
  height: 1px;
  width: 100%;
  background: rgba(5,6,27,.10);
}

.plan-card__note{
  color: var(--c-ink);
  font-size: .86rem;
}

/* Mobile */
@media (max-width: 767.98px){
  .plan-card{
    max-width: 420px;
    min-height: 0;
  }
}

/* ==========================================================================
   OTHER PRODUCTS — 3 cover cards
   ========================================================================== */
.other-products{
  position: relative;
  background: rgba(239, 237, 236, .92);
  padding-block: var(--sp-10);
  overflow: hidden;
}

.op-title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
}

/* Decor bubble (simple, no duplica mf-float) */
.op-float{
  position: absolute;
  right: -60px;
  top: 90px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(219, 215, 252, .55);
  pointer-events: none;
}

.op-grid{
  max-width: 1100px;
  margin-top: var(--sp-6);
}

/* Card */
.op-card{
  position: relative;
  flex: 1 1 300px;
  max-width: 340px;
  min-height: 260px;
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(5,6,27,.12);
  text-decoration: none;
}

.op-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) contrast(.95);
  transition: transform var(--t-base) var(--e-out);
}

.op-card__overlay{
  position: absolute;
  inset: 0;
  padding: var(--sp-7);
  background: linear-gradient(180deg, rgba(5,6,27,.10) 15%, rgba(5,6,27,.86) 92%);
}

.op-card__title{
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 1.4rem;
  line-height: 1.05;
}

.op-card__link{
  color: rgba(255,255,255,.80);
  font-size: .9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Hover */
.op-card:hover .op-card__img{
  transform: scale(1.03);
}

/* Mobile */
@media (max-width: 767.98px){
  .op-card{
    max-width: 420px;
  }
  .op-float{
    display: none;
  }
}


/* ==========================================================================
   BONUS — Dark card
   ========================================================================== */
.bonus{
  background: rgba(239, 237, 236, .92);
  padding-block: var(--sp-10);
}

.bonus-card{
  max-width: 980px;
  background: linear-gradient(180deg, #05061B 0%, #040516 100%);
  border-radius: var(--r-4);
  padding: var(--sp-9);
  color: #fff;
  box-shadow: 0 22px 56px rgba(5,6,27,.22);
  overflow: hidden;
}

.bonus-card__left{
  position: relative;
  flex: 0 0 360px;
  min-height: 240px;
}

.bonus-card__icon{
  width: 260px;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.25));
}

/* Pink bubble + stripes */
.bonus-card__bubble{
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(244, 69, 143, .85);
  z-index: 1;
}

.bonus-card__stripes{
  position: absolute;
  left: 14px;
  bottom: 70px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.22) 4px,
      transparent 4px,
      transparent 10px
    );
  opacity: .55;
  z-index: 1;
}

.bonus-card__right{
  max-width: 420px;
}

.bonus-card__title{
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
  color: #EFEDEC;
}

.bonus-card__lead{
  color: rgba(255,255,255,.78);
  font-weight: var(--fw-semibold);
  font-size: .95rem;
  color: #F4458F;
}

.bonus-list{
  list-style: none;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}

/* Light button variant (reusable) */
.ui-btn--light{
  background: rgba(255,255,255,.92);
  color: var(--c-ink);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.ui-btn--light:hover{
  background: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
  color: var(--c-rose);
}

/* Responsive */
@media (max-width: 991.98px){
  .bonus-card{
    padding: var(--sp-7);
  }
  .bonus-card__left{
    flex-basis: auto;
    width: 100%;
  }
  .bonus-card__right{
    max-width: 100%;
  }
}

/* ==========================================================================
   WHO — Split image + content
   ========================================================================== */
.who{
  background: rgba(239, 237, 236, .92);
}

.who__wrap{
  width: 100%;
  min-height: 640px;
}

.who__media{
  flex: 1 1 50%;
  min-height: 360px;
}

.who__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.who__content{
  flex: 1 1 50%;
  padding: var(--sp-10);
}

.who__inner{
  width: min(520px, 100%);
}

.who__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
}

.who__p{
  color: var(--c-ink);
  font-size: .95rem;
}

.who__kicker{
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: .95rem;
}

.who__cta{
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  font-size: .95rem;
}

/* Mobile */
@media (max-width: 991.98px){
  .who__content{
    padding: var(--sp-9) var(--sp-6);
  }
  .who__wrap{
    min-height: auto;
  }
}


/* ==========================================================================
   WS2 — Split image + content (imagen ocupa TODO el contenedor sin recorte)
   ========================================================================== */

.ws2{
  background: rgba(239, 237, 236, .92);
}

/* Wrapper */
.ws2__wrap{
  width: 100%;
  display: flex;
  align-items: stretch;   /* ambos lados misma altura */
}

/* ==============================
   CONTENT
================================= */

.ws2__content{
  flex: 1 1 52%;
  padding: var(--sp-10);
  display: flex;
  align-items: center;   /* centra si la imagen empuja altura */
}

.ws2__inner{
  width: min(560px, 100%);
}

.ws2__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
}

.ws2__p{
  color: rgba(5,6,27,.68);
  font-size: .95rem;
  line-height: 1.65;
}

.ws2__cta{
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: .95rem;
}

/* ==============================
   MEDIA
================================= */

.ws2__media{
  flex: 1 1 48%;
  display: flex;
  align-items: stretch;  /* toma la altura total del contenedor */
  justify-content: center;
}

/* Imagen llena todo el contenedor sin recorte */
.ws2__img{
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;   /* clave: no recorta */
  display: block;
}

/* ==============================
   RESPONSIVE
================================= */

@media (max-width: 991.98px){

  .ws2__wrap{
    flex-direction: column;
  }

  .ws2__content{
    padding: var(--sp-9) var(--sp-6);
    align-items: flex-start;
  }

  .ws2__media{
    align-items: center;
  }

  .ws2__img{
    height: auto;
    max-height: 420px;  /* evita gigante en mobile */
  }

}


/* ==========================================================================
   WHO — Swiper (altura correcta + imagen sin corte feo)
   ========================================================================== */

.who--swiper{
  position: relative;
}

/* Swiper base */
.who--swiper .who-swiper{
  position: relative;
}

/* Evita que Swiper estire verticalmente */
.who--swiper .swiper-wrapper{
  align-items: flex-start;
}

/* Slide colapsa al contenido */
.who--swiper .swiper-slide{
  height: auto !important;
  display: flex;
}

.who--swiper .swiper-slide > *{
  width: 100%;
}

/* Neutraliza posibles min-height heredados */
.who--swiper .who__wrap{
  min-height: 0 !important;
}

/* ==========================================================================
   IMAGE CONTROL (SOLUCIÓN PROFESIONAL)
   ========================================================================== */

/* Contenedor con proporción controlada */
.who--swiper .who__media{
  flex: 1 1 50%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  aspect-ratio: 4 / 3; /* Cambia a 16/9 si quieres más horizontal */
  border-radius: var(--r-4);
  overflow: hidden;
  background: rgba(219,215,252,.25);
}

/* Imagen dentro del ratio */
.who--swiper .who__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* evita cortar caras */
  display: block;
}

/* Desktop ajuste fino */
@media (min-width: 992px){
  .who--swiper .who__media{
    aspect-ratio: 5 / 4;
  }
}

/* Mobile */
@media (max-width: 991.98px){
  .who--swiper .who__media{
    aspect-ratio: 4 / 3;
  }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.who-swiper__pagination{
  margin-top: var(--sp-4);
  position: static;
}

.who-swiper__pagination .swiper-pagination-bullet{
  width: 7px;
  height: 7px;
  opacity: 1;
  background: rgba(5,6,27,.25);
}

.who-swiper__pagination .swiper-pagination-bullet-active{
  background: var(--c-ink);
}

/* ==========================================================================
   NAVIGATION ARROWS
   ========================================================================== */

.who-swiper__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(5,6,27,.14);
  background: rgba(255,255,255,.55);
  color: rgba(5,6,27,.65);
  box-shadow: 0 14px 34px rgba(5,6,27,.10);
  z-index: 5;
  transition: background .2s ease;
}

.who-swiper__prev{ left: 10px; }
.who-swiper__next{ right: 10px; }

.who-swiper__nav:hover{
  background: rgba(255,255,255,.85);
}

@media (max-width: 767.98px){
  .who-swiper__nav{
    display: none !important;
  }
}


@media (max-width: 991.98px){

  .who--swiper .who__media{
    aspect-ratio: auto;      /* quitamos el ratio fijo */
    height: auto;
  }

  .who--swiper .who__img{
    height: auto;            /* muestra tamaño real */
    max-height: none;
    object-fit: contain;     /* evita recorte */
  }

}



/* ==========================================================================
   MODULES — Lo que aprenderás (stacked cards)
   ========================================================================== */
.modules{
  background: rgba(239, 237, 236, .92);
  padding-block: var(--sp-10);
}

.modules__head{
  max-width: 820px;
}

.modules__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
}

.modules__kicker{
  color: var(--c-rose);
  font-weight: var(--fw-semibold);
  font-size: 22px;
}

.modules__desc{
  color: var(--c-ink);
  font-size: .95rem;
}

.modules__meta{
  color: rgba(2, 4, 63, 0.36);
  font-size: .85rem;
}

.modules__pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(244, 69, 143, .92);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: .8rem;
}

.modules__list{
  max-width: 980px;
}

/* Card layout */
.module-card{
  background: rgba(255,255,255,.78);
  border-color: rgba(5,6,27,.08);
  border-radius: var(--r-4);
  box-shadow: 0 18px 44px rgba(5,6,27,.08);
  padding: var(--sp-7);
}

/* Media */
.module-card__media{
  flex: 1 1 360px;
  border-radius: var(--r-4);
  overflow: hidden;
  background: #fff;
}

.module-card__img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* Body */
.module-card__body{
  flex: 1 1 520px;
  padding: var(--sp-2) var(--sp-2);
}

.module-card__h{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: 34px;
}

.module-card__h-accent{
  color: var(--c-rose);
}

.module-card__sub{
  color: var(--c-ink);
  font-size: .85rem;
  display: inline-flex;
  gap: .6rem;
  align-items: center;
}

.module-card__tag{
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 22px;
}

.module-card__stars{
  letter-spacing: .12em;
  color: var(--c-ink);
  font-size: .78rem;
}

.module-card__info-item{
  color: var(--c-ink);
  font-size: 16px;
}

.module-card__info-item > img{
  margin-right: 10px;
}

.module-card__p{
  color: var(--c-ink);
  font-size: 16px;
}

.module-card__divider{
  height: 1px;
  width: 100%;
  background: rgba(5,6,27,.10);
  margin: .25rem 0 .15rem;
}

.module-card__label{
  color: rgba(2, 4, 63, 0.50);
  font-size: 16px;
  font-weight: var(--fw-regular);
}

/* Mobile */
@media (max-width: 991.98px){
  .module-card{
    padding: var(--sp-6);
  }
  .module-card__body{
    padding: 0;
  }
}


.bonus-list__item{
  list-style: disc;
  margin-left: 30px !important;
}

/* ==========================================================================
   REGISTRATION — Image + form panel
   ========================================================================== */
.reg{
  background: #F4F4F4;
  padding-block: var(--sp-10);
  overflow: hidden;
}

/* Media */
.reg__media{
  flex: 1 1 620px;
  justify-content: center;
}

.reg__img{
  width: min(720px, 100%);
  height: auto;
  display: block;
  border-radius: var(--r-4);
  box-shadow: 0 18px 44px rgba(5,6,27,.10);
  object-fit: cover;
}

/* Panel (floats slightly over image on desktop) */
.reg__panel{
  flex: 0 0 500px;
  max-width: 500px;
}

@media (min-width: 992px){
  .reg__panel{
    margin-left: -120px; /* superposición como en el mock */
  }
}

/* Card */
.reg-card{
 background: #F4F4F4;
  border: 1px solid #E1E4ED;
  border-radius: var(--r-4);
  padding: var(--sp-7);
  box-shadow: 0 1px 4px 0 rgba(25, 33, 61, 0.08);
}

.reg-card__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  font-size: 1.1rem;
}

.reg-card__subtitle{
  color: rgba(5,6,27,.55);
  font-size: .9rem;
}

/* Fields */
.reg-label{
  color: rgba(5,6,27,.70);
  font-size: .8rem;
  font-weight: var(--fw-semibold);
}

.reg-input{
  height: 42px;
  border-radius: 30px !important;
  border: 1px solid rgba(5,6,27,.10) !important;
  background: rgba(255,255,255,.95) !important;
  padding: 0 14px;
  font-size: .9rem;
  outline: none;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}

.reg-input:focus{
  border-color: rgba(244,69,143,.55);
  box-shadow: 0 0 0 4px rgba(244,69,143,.12);
}

/* Checkbox */
.reg-check__box{
  margin-top: 3px;
}

.reg-check__text{
  color: rgba(5,6,27,.48);
  font-size: .78rem;
  line-height: 1.35;
}

/* Button (reusa ui-btn--dark) */
.reg-btn{
  border-radius: 999px;
  justify-content: center;
}

/* Responsive */
@media (max-width: 991.98px){
  .reg__panel{
    max-width: 520px;
    width: 100%;
    margin-left: 0;
  }
  .reg-card{
    padding: var(--sp-6);
  }
}


/* ==========================================================================
   REGISTRATION — Order mobile first
   ========================================================================== */
@media (max-width: 991.98px){
  .reg__panel{
    order: 1; /* primero el form */
  }

  .reg__media{
    order: 2; /* después la imagen */
  }
}


.bg-dark{
  background-color: var(--c-ink) !important;

  
}

/* ==========================================================================
   CONFIRM — Registro confirmado (hand flush bottom)
   ========================================================================== */
.confirm{
  background: linear-gradient(180deg, #05061B 0%, #040516 100%);
  padding-top: var(--sp-10);
  padding-bottom: 0;              /* CLAVE: sin padding abajo */
  overflow: hidden;
}

/* Para que el contenido tenga “aire” sin empujar la mano */
.confirm__inner{
  padding-bottom: var(--sp-8);    /* aire para texto */
  position: relative;
}

.confirm__content{
  flex: 1 1 370px;
  position: relative;
}

.confirm__title{
  color: #fff;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.0;
  font-size: clamp(2.3rem, 1.9rem + 2vw, 3.6rem);
}

.confirm__kicker{
  color: var(--c-rose);
  font-weight: var(--fw-bold);
  font-size: 1rem;
}

.confirm__list{
  color: rgba(255,255,255,.78);
  font-size: .95rem;
}

/* Local stripes decor */
.confirm__stripes{
  position: absolute;
  left: -18px;
  bottom: -28px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.20) 4px,
      transparent 4px,
      transparent 10px
    );
  opacity: .55;
  pointer-events: none;
}

/* Media right */
.confirm__media{
  flex: 1 1 520px;
  align-self: stretch;
}

.confirm__media-frame{
  position: relative;
  width: min(520px, 100%);
  min-height: 420px;
}

/* Lilac oval behind */
.confirm__oval {
    position: absolute;
    right: 0;
    bottom: -80px;
    width: 100%;
    height: 520px;
    border-radius: 999px;
    background: rgba(219, 215, 252, .95);
    z-index: 0;
}
/* Hand image flush bottom */
.confirm__hand{
  position: relative;
  z-index: 1;
  width: 420px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: calc(6rem * -1); /* CLAVE: pega al borde inferior */
}

/* Desktop fine tune */
@media (min-width: 992px){
  .confirm__inner{
    padding-bottom: var(--sp-9);
  }
  .confirm__hand{
    width: 460px;
    margin-bottom: calc(var(--sp-9) * -1);
    left: 140px;
  }
  .confirm__oval{
    width: 420px;
    height: 560px;
    bottom: -110px;
  }
}

/* Mobile: también pegada abajo */
@media (max-width: 991.98px){
  .confirm{
    padding-top: var(--sp-9);
  }
  .confirm__inner{
    padding-bottom: var(--sp-7);
  }
  .confirm__media-frame{
    min-height: 360px;
  }
  .confirm__hand{
    margin-bottom: calc(var(--sp-7) * -1);
            left: 60px;
  }
}


/* ==========================================================================
   FAQ — Photo + Accordion
   ========================================================================== */
.faq{
  background: rgba(239, 237, 236, .92);
  padding-block: var(--sp-10);
  overflow: hidden;
}

/* Media photo */
.faq__media{ flex: 1 1 520px; }

.faq-photo{
  position: relative;
  width: min(520px, 100%);
  border-radius: var(--r-4);
}

.faq-photo__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-4);
  border: 10px solid var(--c-ink);
  box-shadow: 0 22px 56px rgba(5,6,27,.16);
}

/* Pink sparkle badge */
.faq-photo__badge{
  position: absolute;
  left: -18px;
  top: 80px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--c-rose);
  box-shadow: 0 18px 44px rgba(244,69,143,.25);
  z-index: 2;
}

.faq-photo__badge::after{
  content:"";
  position:absolute;
  inset: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.90);
  transform: rotate(45deg);
}

/* Content */
.faq__content{ flex: 1 1 520px; }
.faq__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.2rem, 1.9rem + 1.6vw, 3.2rem);
}

/* Accordion */
.faq-acc{ max-width: 520px; }

.faq-item{
  border-radius: 14px;
  overflow: hidden;
}

.faq-q{
  width: 100%;
  border: 0;
  padding: 18px 18px;
  border-radius: 14px;
  font-weight: var(--fw-bold);
  text-align: left;
  transition: transform var(--t-fast) var(--e-out);
  cursor: pointer;
}

/* Closed state */
.faq-item:not(.is-open) .faq-q{
  background: rgba(5,6,27,.08);
  color: rgba(5,6,27,.88);
}

/* Open state */
.faq-item.is-open .faq-q{
  background: linear-gradient(180deg, #05061B 0%, #040516 100%);
  color: #fff;
}

/* Icon chevron (CSS) */
.faq-icon{
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--e-out);
  flex: 0 0 12px;
}

.faq-item.is-open .faq-icon{
  transform: rotate(-135deg); /* apunta arriba */
}

.faq-a{
  padding: 14px 18px 18px;
  background: transparent;
  color: rgba(5,6,27,.62);
  font-size: .95rem;
  display: none;
}

.faq-item.is-open .faq-a{
  display: block;
}

/* Responsive */
@media (max-width: 991.98px){
  .faq-photo__badge{ left: 8px; top: 22px; }
  .faq-acc{ max-width: 100%; }
}


/* ==========================================================================
   UBUNTU — Beliefs + bottom pink strip
   ========================================================================== */

.ubuntu{
  background: rgba(239, 237, 236, .92);
}

/* Main block */
.ubuntu__main{
  padding-block: var(--sp-10);
}

/* Header */
.ubuntu__kicker{
  color: rgba(5,6,27,.62);
  font-size: .95rem;
  max-width: 820px;
}

.ubuntu__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 1.9rem + 2vw, 3.6rem);
}

/* Grid */
.ubuntu__grid{
  max-width: 980px;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-4);
}

/* Cards */
.ubuntu-card{
  flex: 1 1 200px;
  max-width: 240px;
}

/* Icon box (pink soft square) */
.ubuntu-card__icon{
  width: 140px;
  height: 140px;
  border-radius: 26px;
  background: rgba(244, 69, 143, .12);
  border: 1px solid rgba(244, 69, 143, .14);
  transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}

/* Icon image */
.ubuntu-card__icon img{
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}

/* Text */
.ubuntu-card__text{
  color: rgba(5,6,27,.70);
  font-size: .95rem;
  line-height: 1.4;
}

/* Hover (nice) */
.ubuntu-card:hover .ubuntu-card__icon{
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(244, 69, 143, .18);
}

/* Bottom strip */
.ubuntu-strip{
  margin-top: var(--sp-10);
  background: rgba(244, 69, 143, .92);
  padding-block: var(--sp-7);
}

.ubuntu-strip__text{
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
}

.ubuntu-strip__tags{
  color: rgba(255,255,255,.92);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.25;
}

/* Responsive */
@media (max-width: 767.98px){
  .ubuntu-card{
    max-width: 320px;
  }

  .ubuntu-card__icon{
    width: 132px;
    height: 132px;
  }

  .ubuntu-strip__tags{
    font-size: .95rem;
  }
}


/* ==========================================================================
   LEGAL — Privacy / Terms page
   ========================================================================== */
.legal{
  background: rgba(239,237,236,.92);
  padding-block: var(--sp-10);
}

.legal__head{
  max-width: 980px;
}

.legal__title{
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.legal__intro{
  color: rgba(5,6,27,.60);
  font-size: .95rem;
  line-height: 1.6;
  width: 100%;
}

.legal__body{
  align-items: flex-start;
}

/* Two columns */
.legal__col{
  flex: 1 1 520px;
  min-width: 0;
}

/* Blocks */
.legal__block{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(5,6,27,.08);
  border-radius: 18px;
  padding: var(--sp-6);
  box-shadow: 0 14px 34px rgba(5,6,27,.06);
}

.legal__h{
  margin: 0;
  color: var(--c-ink);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
}

.legal__p{
  color: rgba(5,6,27,.62);
  font-size: .95rem;
  line-height: 1.65;
}

/* Nice typography for rich content (optional) */
.legal__block p + p{
  margin-top: .9rem;
}

/* Responsive */
@media (max-width: 991.98px){
  .legal__block{
    padding: var(--sp-5);
  }
}


/* ==========================================================================
   FOOTER — Dark (match mock)
   ========================================================================== */
.site-footer{
  background: var(--c-ink);
  color: #fff;
  padding-block: var(--sp-10);
}

.site-footer__brand{
  text-decoration: none;
}

.site-footer__logo{
  height: 80px;
  width: auto;
  display: block;
  margin-bottom: 30px;
}

/* Big headline */
.site-footer__title{
  font-size: clamp(1.9rem, 1.35rem + 2vw, 3.1rem);
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: rgba(255,255,255,.92);
  max-width: 720px;
}

/* Nav row */
.site-footer__navrow{
  padding-top: var(--sp-3);
}

/* Links */
.site-footer__nav{
  row-gap: 12px;
}

.site-footer__link{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: .95rem;
  font-weight: var(--fw-semibold);
  transition: color var(--t-base) var(--e-out);
}

.site-footer__link:hover{
  color: #fff;
}

/* CTA button (reusa ui-btn; solo ajuste de look si no tienes light) */
.ui-btn--light{
  background: rgba(255,255,255,.92);
  color: var(--c-ink);
  border: 1px solid rgba(255,255,255,.14);
}

.ui-btn--light:hover{
  background: #fff;
}

/* Divider line */
.site-footer__divider{
  height: 1px;
  width: 100%;
  margin-top: var(--sp-7);
  background: rgba(255,255,255,.16);
}

/* Bottom legal */
.site-footer__bottom{
  padding-top: var(--sp-5);
}

.site-footer__legal{
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  text-decoration: none;
  transition: color var(--t-base) var(--e-out);
}

.site-footer__legal:hover{
  color: rgba(255,255,255,.92);
}

/* Responsive */
@media (max-width: 991.98px){
  .site-footer__title{
    text-align: left;
  }

  .site-footer__navrow{
    align-items: flex-start !important;
  }

  .site-footer__cta{
    width: 100%;
   margin-top: 20px;
  }

   .site-footer__nav{
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .site-footer__link{
    width: 100%;
  }
}

/* ==========================================================================
   MEDIA FREEBIES GRID
   ========================================================================== */

.mf-grid {
  display: grid;
  gap: 24px;
}

/* Mobile */
@media (min-width: 0px) {
  .mf-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .mf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 992px) {
  .mf-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   MF FEATURE GRID
   ========================================================================== */

.mf-feature__grid {
  display: grid;
  gap: 24px;
}

/* Mobile */
@media (min-width: 0px) {
  .mf-feature__grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop */
@media (min-width: 768px) {
  .mf-feature__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}