/* =========================================================================
   Modo Emprendedor · Landing 3.1

   Sistema de formas (una sola regla, aplicada en toda la página):
     interactivo (botones, filtros, etiquetas) .... píldora
     tarjetas grandes ............................. 28px
     tarjetas chicas y campos ..................... 16px

   DOS PALETAS INTERCAMBIABLES
   ---------------------------
   La página usa un solo acento, y ese acento vive en variables. Para cambiar
   de paleta se cambia UNA palabra en modo-emprendedor-landing.php, dentro de
   meo_config(): 'paleta' => 'oro'  o  'paleta' => 'azul'.

   Ningún color está escrito a mano fuera de estos dos bloques.

   Nota sobre los acentos: tanto el oro del logo como el cian son demasiado
   luminosos para texto chico sobre blanco. Por eso cada paleta tiene tres
   tonos, con un trabajo distinto cada uno:
     --acento        superficies, filetes y texto sobre fondo oscuro
     --acento-osc    texto grande sobre claro (basta 3:1 desde 24px)
     --acento-texto  texto chico sobre claro (cumple 4.5:1)
   ====================================================================== */

/* -------- PALETA ORO: el amarillo del logo sobre neutros cálidos --------
   El logo original es dorado sobre negro. Aquí el dorado se conserva tal
   cual y el negro se sustituye por un grafito cálido: el oro sobre negro
   es el uniforme visual de los infoproductos, y sobre papel cálido lee
   como marca establecida. */
.meo-paleta-oro{
  --bg:#ffffff;
  --superficie:#faf7f0;
  --oscuro:#221d17;
  --linea:#ece5d8;
  --linea-2:#d9cfbc;
  --linea-osc:rgb(255 255 255 / .12);

  --tinta:#1c1814;
  --apagado:#6b6357;
  --apagado-osc:#b0a695;

  --acento:#e8b33d;
  --acento-rgb:232 179 61;
  --acento-osc:#a97c12;
  --acento-texto:#8a6410;
  --acento-claro:#f7d98a;

  --tinta-rgb:28 24 20;
  --oscuro-hover:#32291f;
  --sombra:0 24px 60px -30px rgb(28 24 20 / .22);
  --sombra-alta:0 36px 80px -34px rgb(28 24 20 / .34);
}

/* ------------------------ PALETA AZUL (la versión anterior) ------------ */
.meo-paleta-azul{
  --bg:#ffffff;
  --superficie:#f8fafc;
  --oscuro:#0f172a;
  --linea:#e2e8f0;
  --linea-2:#cbd5e1;
  --linea-osc:rgb(255 255 255 / .10);

  --tinta:#0f172a;
  --apagado:#64748b;
  --apagado-osc:#94a3b8;

  --acento:#22d3ee;
  --acento-rgb:34 211 238;
  --acento-osc:#0891b2;
  --acento-texto:#0e7490;
  --acento-claro:#67e8f9;

  --tinta-rgb:15 23 42;
  --oscuro-hover:#1e2d4d;
  --sombra:0 24px 60px -30px rgb(15 23 42 / .22);
  --sombra-alta:0 36px 80px -34px rgb(15 23 42 / .34);
}

.meo-landing{
  --wa:#25d366;
  --r-grande:28px;
  --r-chico:16px;
  --ease:cubic-bezier(.16,1,.3,1);

  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--tinta);
  background:var(--bg);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;

  overflow-x:clip;
}
.meo-landing *,
.meo-landing *::before,
.meo-landing *::after{box-sizing:border-box}
.meo-landing img{max-width:100%;height:auto;display:block}

/* Los resets van con :where() para que aporten especificidad cero y nunca
   pisen a las clases de componente. */
.meo-landing :where(a){color:inherit;text-decoration:none}
.meo-landing :where(p){margin:0}
.meo-landing :where(h1,h2,h3){margin:0;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.meo-landing :where(ul,ol,dl,dd){margin:0;padding:0;list-style:none}
.meo-landing :where(hr){border:0;border-top:1px solid var(--linea-osc);margin:20px 0}

/* ============================================ convivencia con el tema
   Medido sobre el sitio en vivo (tema blockbase-premium / videomaker):
     - el contenido va encajonado a 800px por is-layout-constrained
     - .wp-site-blocks lleva 30px de relleno lateral
     - el fondo del body es NEGRO

   Todo esto se neutraliza sólo en la portada, con ámbito en
   body.meo-landing-page. El resto del sitio queda intacto. */

/* 1. El tema es oscuro; la portada va en blanco. */
body.meo-landing-page,
body.meo-libros-page{background:#fff}

/* 2. Fuera el encajonado de 800px.
      Sólo se toca el ancho máximo. Los márgenes NO se tocan: el tema le pone
      a alignfull un margen negativo que compensa exactamente el relleno de
      .wp-site-blocks, y ese par tiene que quedar intacto para que la landing
      llegue al borde sin desbordarse. */
body.meo-landing-page .meo-landing,
body.meo-libros-page .meo-landing{max-width:none !important}

/* 3. OJO: el relleno lateral de .wp-site-blocks NO se toca.
      La clase alignfull ya lo compensa con un margen negativo de -30px por
      lado. Si se quita el relleno, ese margen negativo se convierte en
      desbordamiento y aparece scroll horizontal. Se intentó y falló. */

/* 4. La landing trae su propia navegación y su propio pie: se ocultan los
      del tema para no duplicarlos, junto con el título y la fecha. */
body.meo-landing-page header.wp-block-template-part,
body.meo-landing-page footer.wp-block-template-part,
body.meo-libros-page header.wp-block-template-part,
body.meo-libros-page footer.wp-block-template-part{display:none}
body.meo-landing-page .wp-block-post-title,
body.meo-libros-page .wp-block-post-title{display:none}

/* 5. El tema pinta un espaciador y el grupo de la fecha antes del contenido.
      Ocultar sólo la fecha no bastaba: su grupo conserva el relleno y seguía
      dejando un hueco grande encima de la navegación. */
body.meo-landing-page .wp-block-spacer,
body.meo-landing-page .post-meta,
body.meo-landing-page .post-tags-container,
body.meo-landing-page .wp-block-post-date,
body.meo-libros-page .wp-block-spacer,
body.meo-libros-page .post-meta,
body.meo-libros-page .post-tags-container,
body.meo-libros-page .wp-block-post-date{display:none}

/* 6. Fuera los márgenes verticales que el tema pone entre bloques. */
body.meo-landing-page .wp-block-post-content,
body.meo-libros-page .wp-block-post-content{margin-block-start:0}
body.meo-landing-page .wp-site-blocks > *,
body.meo-libros-page .wp-site-blocks > *{margin-block-start:0}

.meo-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------ tipografía
   Sora carga el carácter de la marca en los titulares.
   Inter hace el trabajo de lectura en el cuerpo. */
.meo-landing h1,.meo-landing h2,.meo-landing h3,
.meo-wordmark,.meo-plan__precio,.meo-cifra__num,.meo-calc__monto,.meo-num{
  font-family:"Sora","Inter",ui-sans-serif,system-ui,sans-serif;
}

.meo-h1{font-size:clamp(38px,4.9vw,60px);letter-spacing:-.04em;line-height:1.04}
.meo-h2{font-size:clamp(28px,3.5vw,44px);letter-spacing:-.035em;line-height:1.08}
.meo-sub{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.68;color:var(--apagado);max-width:50ch}
.meo-lead{font-size:17px;line-height:1.7;color:var(--apagado);max-width:60ch}
.meo-acento{color:var(--acento-osc)}

.meo-cejilla{
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acento-texto);margin:0 0 16px;
}
.meo-cejilla--pill{
  display:inline-block;padding:8px 16px;border-radius:999px;
  background:rgb(var(--acento-rgb) / .14);color:var(--acento-texto);margin-bottom:22px;
}

/* --------------------------------------------------------------- secciones */
.meo-seccion{padding:clamp(72px,8.5vw,116px) 0}
.meo-seccion--superficie{background:var(--superficie)}
.meo-seccion--oscura{background:var(--oscuro);color:#fff}
.meo-seccion--oscura .meo-h2{color:#fff}
.meo-seccion--oscura .meo-lead{color:var(--apagado-osc)}
.meo-seccion--oscura .meo-cejilla{color:var(--acento)}

.meo-encabezado{margin-bottom:clamp(40px,4.5vw,60px);max-width:760px}
.meo-encabezado--centro{margin-left:auto;margin-right:auto;text-align:center}
.meo-encabezado--centro .meo-lead{margin-left:auto;margin-right:auto}
.meo-encabezado .meo-h2{margin-bottom:16px}

/* --------------------------------------------------------------- botones */
.meo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:999px;
  font-size:15.5px;font-weight:600;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;cursor:pointer;font-family:inherit;
  transition:transform .2s var(--ease),background-color .2s,border-color .2s,box-shadow .2s,color .2s;
}
.meo-btn:active{transform:translateY(1px)}
.meo-btn:focus-visible{outline:3px solid var(--acento-osc);outline-offset:3px}
.meo-btn--sm{padding:11px 20px;font-size:14.5px}
.meo-btn--ancho{width:100%}

.meo-btn--oscuro{background:var(--oscuro);color:#fff}
.meo-btn--oscuro:hover{background:var(--oscuro-hover);box-shadow:0 14px 30px -16px rgb(var(--tinta-rgb) / .75)}

.meo-btn--linea{background:#fff;color:var(--tinta);border-color:var(--linea-2)}
.meo-btn--linea:hover{border-color:var(--oscuro);background:var(--superficie)}

/* El acento es muy luminoso en ambas paletas: con texto blanco reprobaría
   contraste, así que el botón de acento siempre lleva la tinta oscura. */
.meo-btn--acento{background:var(--acento);color:var(--oscuro)}
.meo-btn--acento:hover{background:var(--acento-claro);box-shadow:0 14px 30px -16px rgb(var(--acento-rgb) / .55)}

/* El verde de WhatsApp sobre blanco no alcanza contraste para texto, así que
   el verde vive en el glifo y el botón usa una superficie legible. */
.meo-btn--wa{background:#fff;color:var(--oscuro)}
.meo-btn--wa svg{color:#128c4a;flex:none}
.meo-btn--wa:hover{background:var(--superficie)}

.meo-enlace{display:inline-block;color:var(--acento-texto);font-weight:600;font-size:15px}
.meo-enlace:hover{text-decoration:underline;text-underline-offset:3px}
.meo-seccion--oscura .meo-enlace{color:var(--acento)}

/* ------------------------------------------------------------------ marca */
.meo-marca{display:inline-flex;align-items:center;gap:11px}
.meo-medallon{flex:none;display:block}
.meo-wordmark{font-size:16.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.meo-wordmark__punto{color:var(--acento-texto)}
.meo-pie .meo-wordmark__punto,
.meo-seccion--oscura .meo-wordmark__punto{color:var(--acento)}

/* ------------------------------------------------------------ navegación */
.meo-nav{
  position:sticky;top:0;z-index:40;
  background:rgb(255 255 255 / .85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s,box-shadow .25s;
}
.meo-nav.is-pegada{border-bottom-color:var(--linea);box-shadow:0 6px 24px -18px rgb(var(--tinta-rgb) / .5)}
.meo-nav__in{height:76px;display:flex;align-items:center;gap:28px}
.meo-nav__links{display:flex;gap:30px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--apagado)}
.meo-nav__links a{position:relative;padding:4px 0;transition:color .2s}
.meo-nav__links a:hover,.meo-nav__links a.is-activo{color:var(--tinta)}
.meo-nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--acento);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);
}
.meo-nav__links a.is-activo::after{transform:scaleX(1)}
.meo-nav__cta{flex:none}

.meo-hamb{display:none;width:44px;height:44px;margin-left:auto;background:none;border:1px solid var(--linea);
  border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.meo-hamb span{display:block;width:16px;height:1.8px;background:var(--tinta);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.meo-hamb[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.meo-hamb[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}

.meo-menu-movil{display:none;flex-direction:column;gap:2px;padding:14px 24px 22px;border-bottom:1px solid var(--linea);background:#fff}
.meo-menu-movil[hidden]{display:none}
.meo-menu-movil a{padding:12px 0;font-weight:600;font-size:16px}
.meo-menu-movil .meo-btn{margin-top:12px}

/* ------------------------------------------------------------------ hero */
.meo-hero{
  padding:clamp(44px,5.5vw,80px) 0 clamp(56px,6vw,92px);
  background:
    radial-gradient(900px 420px at 78% 6%, rgb(var(--acento-rgb) / .15), transparent 62%),
    radial-gradient(620px 340px at 8% 0%, rgb(var(--acento-rgb) / .10), transparent 60%);
}
.meo-hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.meo-hero__copy .meo-h1{margin-bottom:22px}
.meo-hero__copy .meo-sub{margin-bottom:32px}
.meo-ctas{display:flex;gap:12px;flex-wrap:wrap}

.meo-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px}
.meo-checks li{position:relative;padding-left:24px;font-size:14.5px;color:var(--apagado)}
.meo-checks li::before{
  content:"";position:absolute;left:0;top:6px;width:13px;height:7px;
  border-left:2px solid var(--acento-texto);border-bottom:2px solid var(--acento-texto);
  transform:rotate(-45deg);
}

/* -------------------------------------------------- vitrina con carrusel
   Marco de navegador con capturas reales que se van alternando. La barra
   de direcciones cambia de dominio y el celular acompaña, de modo que se
   entiende en un segundo que son sitios distintos y ya publicados. */
.meo-vitrina{
  position:relative;padding:22px 22px 20px;border-radius:var(--r-grande);
  background:#fff;box-shadow:var(--sombra-alta);
}

.meo-navegador{border:1px solid var(--linea);border-radius:var(--r-chico);overflow:hidden;background:#fff}
.meo-navegador__barra{
  display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  background:var(--superficie);border-bottom:1px solid var(--linea);
}
.meo-navegador__punto{width:9px;height:9px;border-radius:50%;background:var(--linea-2);flex:none}
.meo-navegador__url{
  flex:1;text-align:center;font-size:11.5px;color:var(--apagado);
  font-family:ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .3s var(--ease);
}
.meo-navegador__lienzo{position:relative;aspect-ratio:1280/800;background:var(--superficie)}
.meo-diapo{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transform:scale(1.015);
}
.meo-diapo.is-activa{opacity:1;visibility:visible;transform:none}
.meo-diapo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.meo-navegador__base{height:10px;margin:0 auto;width:66%;
  background:linear-gradient(180deg,var(--linea),var(--linea-2));border-radius:0 0 12px 12px}

.meo-tel{
  position:absolute;left:-14px;bottom:46px;width:20%;max-width:114px;aspect-ratio:420/909;
  border:5px solid var(--oscuro);border-radius:20px;overflow:hidden;background:var(--oscuro);
  box-shadow:0 22px 44px -20px rgb(var(--tinta-rgb) / .55);
}
.meo-diapo-tel{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  border-radius:15px;opacity:0;transition:opacity .7s var(--ease);
}
.meo-diapo-tel.is-activa{opacity:1}

.meo-vitrina__pie{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 4px 2px;margin-left:calc(20% + 4px)}
.meo-vitrina__etq{font-size:13.5px;font-weight:600;color:var(--apagado);
  transition:opacity .3s var(--ease)}
.meo-vitrina.is-cambiando .meo-vitrina__etq,
.meo-vitrina.is-cambiando .meo-navegador__url{opacity:0}

.meo-puntos{display:flex;gap:7px;flex:none}
.meo-punto{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:var(--linea-2);transition:width .3s var(--ease),background-color .3s;
}
.meo-punto.is-activo{width:24px;background:var(--acento-osc)}
.meo-punto:hover{background:var(--acento-osc)}
.meo-punto:focus-visible{outline:3px solid var(--acento-osc);outline-offset:3px}

/* -------------------------------------------------------------- problema */
.meo-problema__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.meo-tarjeta-num{
  background:rgb(255 255 255 / .035);border:1px solid var(--linea-osc);
  border-radius:var(--r-grande);padding:30px 26px;
  transition:transform .3s var(--ease),background-color .3s,border-color .3s;
}
.meo-tarjeta-num:hover{transform:translateY(-4px);background:rgb(255 255 255 / .06);border-color:rgb(var(--acento-rgb) / .40)}
/* Ojo: el número también es un <p>, así que la descripción lleva su propia
   clase en vez de un selector de descendencia que pisaría a .meo-num. */
.meo-num{font-size:30px;font-weight:800;color:var(--acento);letter-spacing:-.04em;line-height:1;margin-bottom:20px}
.meo-tarjeta-num h3{font-size:17.5px;letter-spacing:-.02em;margin-bottom:10px;color:#fff;line-height:1.3}
.meo-tarjeta-num__txt{font-size:14.5px;color:var(--apagado-osc);line-height:1.62}

/* ------------------------------------------------------------ soluciones */
.meo-sol__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.meo-sol__card{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-grande);padding:32px 30px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s;
}
.meo-sol__card:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--linea-2)}
.meo-sol__icono{
  display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-bottom:22px;
  border-radius:var(--r-chico);background:rgb(var(--acento-rgb) / .15);color:var(--acento-texto);
}
.meo-sol__icono svg{width:24px;height:24px}
.meo-sol__card h3{font-size:19px;letter-spacing:-.02em;margin-bottom:9px}
.meo-sol__card p{font-size:15px;color:var(--apagado);line-height:1.65}

/* --------------------------------------------------------- caso destacado */
.meo-caso-top__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.meo-marco{display:block;border-radius:var(--r-grande);overflow:hidden;background:#fff;
  box-shadow:var(--sombra-alta);border:1px solid var(--linea)}
.meo-marco img{width:100%;transition:transform .6s var(--ease)}
.meo-marco:hover img{transform:scale(1.03)}
.meo-caso-top__copy .meo-h2{margin-bottom:16px}
.meo-caso-top__copy .meo-lead{margin-bottom:34px}
.meo-caso-top__copy strong{color:var(--tinta);font-weight:700}

.meo-cifras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.meo-cifra{background:#fff;border:1px solid var(--linea);border-radius:var(--r-chico);padding:22px 24px}
.meo-cifra__num{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:7px}
.meo-cifra__etq{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--apagado)}

/* ------------------------------------------------------- antes y después */
.meo-comparacion{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.meo-comp{border-radius:var(--r-grande);padding:34px 34px 38px}
.meo-comp__titulo{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:22px}
.meo-comp li{position:relative;padding-left:28px;margin-bottom:15px;font-size:15.5px;line-height:1.55}
.meo-comp li:last-child{margin-bottom:0}

.meo-comp--antes{background:var(--superficie);border:1px solid var(--linea)}
.meo-comp--antes .meo-comp__titulo{color:var(--apagado)}
.meo-comp--antes li{color:var(--apagado)}
.meo-comp--antes li::before{
  content:"";position:absolute;left:6px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--linea-2);
}

/* El "después" usa el acento como superficie, no como detalle: el estado
   deseable es el que brilla. Con la tinta oscura encima da 9.3:1, muy por
   encima del mínimo, así que el color puede ser protagonista sin costo. */
.meo-comp--despues{background:var(--acento);color:var(--oscuro)}
.meo-comp--despues .meo-comp__titulo{color:var(--oscuro);opacity:.72}
.meo-comp--despues li{color:var(--oscuro);font-weight:500}
.meo-comp--despues li::before{
  content:"";position:absolute;left:3px;top:6px;width:13px;height:7px;
  border-left:2px solid var(--oscuro);border-bottom:2px solid var(--oscuro);transform:rotate(-45deg);
}

/* ----------------------------------------------------------- calculadora */
.meo-calc{
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-grande);
  padding:38px;box-shadow:var(--sombra);
}
.meo-calc__controles{display:grid;gap:26px}

.meo-input-money{
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--linea-2);border-radius:var(--r-chico);padding:0 16px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.meo-input-money:focus-within{border-color:var(--acento-osc);box-shadow:0 0 0 4px rgb(var(--acento-rgb) / .22)}
.meo-input-money > span[aria-hidden]{color:var(--apagado);font-weight:600}
.meo-input-money input{
  flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:17px;font-weight:600;
  padding:14px 0;color:var(--tinta);
}
.meo-input-money__mxn{font-size:13px;font-weight:600;color:var(--apagado)}

.meo-rango{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--acento) var(--pct,4%),var(--linea) var(--pct,4%));
  outline:none;cursor:pointer;margin:6px 0 4px;
}
.meo-rango::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--acento);border:3px solid #fff;box-shadow:0 2px 8px rgb(var(--tinta-rgb) / .3);cursor:grab;
}
.meo-rango::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--acento);border:3px solid #fff;
  box-shadow:0 2px 8px rgb(var(--tinta-rgb) / .3);cursor:grab;
}
.meo-rango:focus-visible{outline:3px solid var(--acento-osc);outline-offset:4px}
.meo-rango__topes{display:flex;justify-content:space-between;font-size:12.5px;color:var(--apagado)}

.meo-select{
  width:100%;font:inherit;font-size:15.5px;color:var(--tinta);background:#fff;
  padding:14px 16px;border:1.5px solid var(--linea-2);border-radius:var(--r-chico);cursor:pointer;
}
.meo-select:focus{outline:none;border-color:var(--acento-osc);box-shadow:0 0 0 4px rgb(var(--acento-rgb) / .22)}

.meo-calc__resultado{background:var(--oscuro);color:#fff;border-radius:var(--r-grande);padding:34px 32px}
.meo-calc__resultado .meo-cejilla{color:var(--acento);margin-bottom:12px}
.meo-calc__monto{font-size:clamp(38px,4.4vw,54px);font-weight:800;letter-spacing:-.045em;line-height:1;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.meo-calc__mxn{font-size:16px;font-weight:600;color:var(--apagado-osc);letter-spacing:0}
.meo-calc__nota{font-size:15px;color:var(--apagado-osc);line-height:1.65;margin-bottom:24px}
.meo-calc__nota strong{color:var(--acento);font-weight:700}
.meo-calc__aclaracion{margin-top:18px;font-size:13.5px;color:var(--apagado);text-align:center}

/* ---------------------------------------------------------- portafolio */
.meo-filtros{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.meo-filtro{
  padding:10px 20px;border-radius:999px;border:1.5px solid var(--linea-2);background:#fff;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--apagado);cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.meo-filtro:hover{border-color:var(--oscuro);color:var(--tinta)}
.meo-filtro.is-activo{background:var(--oscuro);border-color:var(--oscuro);color:#fff}
.meo-filtro:focus-visible{outline:3px solid var(--acento-osc);outline-offset:3px}

.meo-casos__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.meo-caso{
  border:1px solid var(--linea);border-radius:var(--r-grande);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s;
}
.meo-caso:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:var(--linea-2)}
.meo-caso[hidden]{display:none}
.meo-caso__img{display:block;overflow:hidden;background:var(--superficie);border-bottom:1px solid var(--linea)}
.meo-caso__img img{width:100%;transition:transform .55s var(--ease)}
.meo-caso:hover .meo-caso__img img{transform:scale(1.03)}
.meo-caso__cuerpo{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.meo-caso__top{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.meo-caso__top h3{font-size:20px}
.meo-tag{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;background:rgb(var(--acento-rgb) / .16);color:var(--acento-texto)}
.meo-caso__rol{font-size:13.5px;font-weight:600;color:var(--apagado);margin-bottom:12px}
.meo-caso__resumen{font-size:15px;line-height:1.65;color:var(--apagado);margin-bottom:20px}
.meo-caso__piezas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.meo-caso__piezas li{font-size:12.5px;font-weight:600;color:var(--tinta);
  padding:6px 12px;border-radius:999px;background:var(--superficie);border:1px solid var(--linea)}
.meo-caso__cuerpo .meo-enlace{margin-top:auto}

/* --------------------------------------------------------------- precios */
.meo-precios__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.meo-plan{border:1px solid var(--linea);border-radius:var(--r-grande);padding:34px 32px 36px;background:#fff;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.meo-plan:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.meo-plan.is-destacado{border-color:var(--oscuro);border-width:2px;padding:32px 31px 34px;box-shadow:var(--sombra)}
.meo-plan__flag{display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--oscuro);background:var(--acento);padding:7px 14px;border-radius:999px;margin-bottom:18px}
.meo-plan h3{font-size:20px;margin-bottom:12px}
.meo-plan__precio{font-size:40px;font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:14px}
.meo-plan__precio span{font-size:14px;font-weight:600;color:var(--apagado);letter-spacing:0}
.meo-plan__para{font-size:15px;color:var(--apagado);line-height:1.65;margin-bottom:24px}
.meo-plan__lista{display:grid;gap:12px;margin-bottom:30px;flex:1}
.meo-plan__lista li{font-size:15px;padding-left:28px;position:relative}
.meo-plan__lista li::before{
  content:"";position:absolute;left:2px;top:7px;width:14px;height:8px;
  border-left:2px solid var(--acento-texto);border-bottom:2px solid var(--acento-texto);transform:rotate(-45deg);
}

.meo-medida{
  margin-top:26px;padding:36px 40px;border-radius:var(--r-grande);
  background:var(--oscuro);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.meo-medida h3{font-size:22px;margin-bottom:8px}
.meo-medida p{font-size:15px;color:var(--apagado-osc);line-height:1.65;max-width:58ch}

/* ------------------------------------------------------------- preguntas */
.meo-faq__in{max-width:860px}
.meo-faq__lista{display:grid;gap:14px}
.meo-faq__item{
  border:1px solid var(--linea);border-radius:var(--r-grande);background:#fff;overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.meo-faq__item[open]{border-color:var(--linea-2);box-shadow:var(--sombra)}
.meo-faq__item summary{
  list-style:none;cursor:pointer;padding:24px 62px 24px 28px;position:relative;
  font-size:17px;font-weight:700;letter-spacing:-.015em;
}
.meo-faq__item summary::-webkit-details-marker{display:none}
.meo-faq__item summary:focus-visible{outline:3px solid var(--acento-osc);outline-offset:-3px;border-radius:var(--r-grande)}
.meo-faq__mas{position:absolute;right:28px;top:50%;width:15px;height:15px;margin-top:-7px}
.meo-faq__mas::before,.meo-faq__mas::after{
  content:"";position:absolute;background:var(--acento-texto);border-radius:2px;
  transition:transform .3s var(--ease);
}
.meo-faq__mas::before{left:0;top:6.5px;width:15px;height:2px}
.meo-faq__mas::after{left:6.5px;top:0;width:2px;height:15px}
.meo-faq__item[open] .meo-faq__mas::before{transform:rotate(45deg)}
.meo-faq__item[open] .meo-faq__mas::after{transform:rotate(45deg)}
.meo-faq__cuerpo{padding:0 62px 26px 28px}
.meo-faq__cuerpo p{font-size:16px;line-height:1.72;color:var(--apagado)}

/* -------------------------------------------------------------- contacto */
.meo-contacto__in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.meo-contacto__copy .meo-h2{margin-bottom:16px}
.meo-contacto__copy .meo-lead{margin-bottom:30px}

.meo-form-caja{background:#fff;border-radius:var(--r-grande);padding:34px;color:var(--tinta);box-shadow:var(--sombra-alta)}
.meo-form{display:grid;gap:18px}
.meo-campo{display:grid;gap:8px}
.meo-campo label{font-size:14px;font-weight:600;color:var(--tinta)}
.meo-seccion--oscura .meo-form-caja .meo-campo label{color:var(--tinta)}
/* El campo de dinero ya trae su propio marco (con el signo y el MXN dentro),
   así que su input queda fuera de este estilo para no dibujar dos bordes. */
.meo-campo input:not([type="range"]):not(.meo-input-money input),
.meo-campo textarea{
  width:100%;font:inherit;font-size:15.5px;color:var(--tinta);
  padding:13px 15px;border:1.5px solid var(--linea-2);border-radius:var(--r-chico);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.meo-campo textarea{resize:vertical;min-height:106px}
.meo-campo input:not([type="range"]):not(.meo-input-money input):focus,
.meo-campo textarea:focus{
  outline:none;border-color:var(--acento-osc);box-shadow:0 0 0 4px rgb(var(--acento-rgb) / .22);
}
.meo-ayuda{font-size:12.5px;color:var(--apagado)}
/* Campo trampa contra robots. Se oculta con el patrón estándar de sólo
   lectores de pantalla, sin sacarlo a -9999px: esa técnica ensancha la
   página y puede provocar desplazamiento horizontal. */
.meo-trampa{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.meo-aviso{padding:14px 16px;border-radius:var(--r-chico);font-size:15px;font-weight:600;margin-bottom:20px}
.meo-aviso--ok{background:#e7f6ec;color:#14532d;border:1px solid #b9e3c6}
.meo-aviso--mal{background:#fdeceb;color:#7f1d1d;border:1px solid #f3c2bf}
.meo-aviso--centro{max-width:640px;margin-left:auto;margin-right:auto;text-align:center}

/* --------------------------------------------------------- ventana de pago */
.meo-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.meo-modal[hidden]{display:none}
.meo-modal__fondo{position:absolute;inset:0;background:rgb(var(--tinta-rgb) / .55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.meo-modal__panel{
  position:relative;width:100%;max-width:460px;max-height:calc(100dvh - 40px);overflow:auto;
  background:#fff;border-radius:var(--r-grande);padding:36px 34px 34px;box-shadow:var(--sombra-alta);
}
@media (prefers-reduced-motion:no-preference){
  .meo-modal:not([hidden]) .meo-modal__panel{animation:meo-modal-in .3s var(--ease)}
}
@keyframes meo-modal-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.meo-modal__x{
  position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:999px;
  border:1px solid var(--linea);background:#fff;color:var(--apagado);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s;
}
.meo-modal__x:hover{color:var(--tinta);border-color:var(--linea-2)}
.meo-modal__x:focus-visible{outline:3px solid var(--acento-osc);outline-offset:2px}
.meo-modal .meo-cejilla{margin-bottom:8px}
.meo-modal h3{font-size:24px;letter-spacing:-.02em;margin-bottom:6px;padding-right:32px}
.meo-modal__precio{font-family:"Sora","Inter",sans-serif;font-size:30px;font-weight:800;
  letter-spacing:-.04em;line-height:1;margin-bottom:20px}
.meo-modal__precio span{font-family:inherit}
.meo-modal__texto{font-size:15px;color:var(--apagado);line-height:1.6;margin-bottom:22px}
.meo-modal__opciones{display:grid;gap:12px}
.meo-modal__opciones .meo-btn{padding-top:16px;padding-bottom:16px}
.meo-modal__wa{display:inline-block;text-align:center;font-size:14.5px;font-weight:600;
  color:var(--acento-texto);margin-top:6px}
.meo-modal__wa:hover{text-decoration:underline;text-underline-offset:3px}
.meo-modal__volver{
  background:none;border:0;padding:0 0 14px;font:inherit;font-weight:600;font-size:14.5px;
  color:var(--apagado);cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.meo-modal__volver:hover{color:var(--tinta)}
.meo-modal__volver:focus-visible{outline:3px solid var(--acento-osc);outline-offset:2px;border-radius:6px}
.meo-modal .meo-form{display:grid;gap:16px;margin-top:6px}
.meo-archivo{
  width:100%;font:inherit;font-size:14px;color:var(--apagado);
  padding:12px;border:1.5px dashed var(--linea-2);border-radius:var(--r-chico);
  background:var(--superficie);cursor:pointer;
}
.meo-archivo::file-selector-button{
  font:inherit;font-size:13.5px;font-weight:600;margin-right:12px;cursor:pointer;
  padding:8px 14px;border-radius:999px;border:0;background:var(--oscuro);color:#fff;
}
.meo-archivo:focus-visible{outline:none;border-color:var(--acento-osc);box-shadow:0 0 0 4px rgb(var(--acento-rgb) / .22)}

/* ------------------------------------------------------------- contenido */
.meo-podcast__lista{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.meo-podcast__lista li{
  padding:14px 28px;border-radius:999px;border:1px solid var(--linea);background:var(--superficie);
  font-size:15px;font-weight:600;color:var(--apagado);
}

/* Flex en vez de rejilla fija: con una sola pieza queda centrada en vez de
   sola en la esquina, y con cuatro forma la fila completa. */
.meo-contenido__grid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.meo-pieza{
  flex:1 1 240px;max-width:282px;min-width:0;
  border:1px solid var(--linea);border-radius:var(--r-grande);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s;
}
.meo-pieza:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--linea-2)}
.meo-pieza__portada{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--superficie);border-bottom:1px solid var(--linea)}
.meo-pieza__portada img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.meo-pieza:hover .meo-pieza__portada img{transform:scale(1.04)}
/* Si la pieza no trae portada, la inicial hace de marca de agua en vez de
   dejar un hueco gris. */
.meo-pieza__portada--vacia{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--oscuro),color-mix(in srgb,var(--oscuro) 80%,var(--acento)))}
.meo-pieza__portada--vacia span{font-family:"Sora","Inter",sans-serif;font-size:56px;font-weight:800;
  color:var(--acento);opacity:.9}
.meo-pieza__cuerpo{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.meo-pieza__cuerpo h3{font-size:17.5px;letter-spacing:-.02em;line-height:1.3}
.meo-pieza__cuerpo h3 a:hover{color:var(--acento-texto)}
.meo-pieza__cuerpo p{font-size:14.5px;color:var(--apagado);line-height:1.6}
.meo-pieza__cuerpo .meo-tag{align-self:flex-start}
.meo-pieza__cuerpo .meo-enlace{margin-top:auto}

/* ------------------------------------------------------------------- pie */
.meo-pie{background:var(--oscuro);color:#fff;padding:56px 0 48px;border-top:1px solid var(--linea-osc)}
.meo-pie__in{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.meo-pie__marca p{margin-top:16px;font-size:14.5px;color:var(--apagado-osc);max-width:42ch}
.meo-pie__links{display:flex;gap:26px;font-size:14.5px;color:var(--apagado-osc);flex-wrap:wrap}
.meo-pie__links a:hover{color:#fff}
.meo-pie__redes{display:flex;gap:16px;margin-top:18px}
.meo-pie__redes a{color:var(--apagado-osc);transition:color .2s}
.meo-pie__redes a:hover{color:#fff}

/* -------------------------------------------------- botón flotante WhatsApp
   El verde de marca se usa sólo como fondo del botón sin texto (el logotipo
   está exento de la regla de contraste 1.4.11 de WCAG). */
.meo-wa-flota{
  position:fixed;right:20px;bottom:20px;z-index:50;
  width:58px;height:58px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wa);color:#fff;
  box-shadow:0 16px 34px -12px rgb(37 211 102 / .65);
  transition:transform .22s var(--ease);
}
.meo-wa-flota:hover{transform:scale(1.07)}
.meo-wa-flota:focus-visible{outline:3px solid var(--oscuro);outline-offset:3px}

/* ------------------------------------------------------------- movimiento
   El estado oculto sólo se aplica cuando el JS confirmó que puede revelarlo
   (clase meo-js). Sin JavaScript el contenido se ve completo desde el inicio. */
.meo-js .meo-rv{opacity:0;transform:translateY(22px)}
.meo-js .meo-rv.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .meo-js .meo-rv{
    transition:opacity .7s var(--ease),transform .7s var(--ease);
    transition-delay:calc(var(--d,0) * 75ms);
  }
  .meo-js .meo-comp.is-visible li{animation:meo-entra .55s var(--ease) both;animation-delay:calc(var(--d,0) * 70ms + .15s)}
}
@keyframes meo-entra{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .meo-landing *{animation:none !important;transition:none !important}
  .meo-js .meo-rv{opacity:1;transform:none}
}

/* =========================================================== adaptaciones */
@media (max-width:1080px){
  .meo-problema__grid{grid-template-columns:repeat(2,1fr)}
  .meo-sol__grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:960px){
  .meo-hero__in{grid-template-columns:1fr;gap:44px}
  .meo-hero__copy .meo-sub{max-width:58ch}
  .meo-hero__arte{max-width:620px}
  .meo-caso-top__in,.meo-contacto__in,.meo-calc{grid-template-columns:1fr;gap:34px}
  .meo-comparacion{grid-template-columns:1fr}
  .meo-precios__grid{grid-template-columns:1fr}
  .meo-plan.is-destacado{order:-1}
}

@media (max-width:860px){
  .meo-nav__links,.meo-nav__cta{display:none}
  .meo-hamb{display:flex}
  .meo-menu-movil:not([hidden]){display:flex}
  .meo-casos__grid{grid-template-columns:1fr}
  .meo-medida{flex-direction:column;align-items:flex-start}
  .meo-medida .meo-btn{width:100%}
}

@media (max-width:560px){
  .meo-wrap{padding:0 18px}
  .meo-nav__in{height:66px}
  .meo-problema__grid,.meo-sol__grid,.meo-cifras{grid-template-columns:1fr}
  .meo-ctas .meo-btn{width:100%}
  .meo-checks{gap:10px 20px}
  .meo-vitrina{padding:14px 14px 14px}
  .meo-tel{width:24%;left:-8px;bottom:44px}
  .meo-vitrina__pie{margin-left:calc(24% + 4px);padding-top:12px}
  .meo-vitrina__etq{font-size:12.5px}
  .meo-calc,.meo-form-caja,.meo-comp,.meo-medida{padding:24px 22px 28px}
  .meo-calc__resultado{padding:26px 22px}
  .meo-sol__card,.meo-plan{padding:26px 22px 28px}
  .meo-caso__cuerpo{padding:22px 20px 26px}
  .meo-faq__item summary{padding:20px 52px 20px 22px;font-size:16px}
  .meo-faq__mas{right:22px}
  .meo-faq__cuerpo{padding:0 52px 22px 22px}
  .meo-wa-flota{width:52px;height:52px;right:16px;bottom:16px}
  .meo-pie__in{flex-direction:column;gap:28px}
}

/* =========================================================================
   Catálogo de libros (/libros)
   ====================================================================== */

.meo-libros-hero{padding-bottom:0}

.meo-buscar{max-width:480px;margin:0 auto;position:relative}
.meo-buscar__icono{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--apagado);pointer-events:none}
.meo-buscar__input{
  width:100%;font:inherit;font-size:16px;color:var(--tinta);
  padding:16px 18px 16px 50px;border:1.5px solid var(--linea-2);border-radius:999px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.meo-buscar__input:focus{
  outline:none;border-color:var(--acento-osc);box-shadow:0 0 0 4px rgb(var(--acento-rgb) / .22);
}
.meo-buscar__input::placeholder{color:var(--apagado)}

.meo-libros__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.meo-libros__vacio{text-align:center;font-size:16px;color:var(--apagado);padding:40px 0}

.meo-libro{
  border:1px solid var(--linea);border-radius:var(--r-grande);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s;
}
.meo-libro:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:var(--linea-2)}
.meo-libro[hidden]{display:none}

.meo-libro__portada{aspect-ratio:3/4;overflow:hidden;background:var(--superficie);border-bottom:1px solid var(--linea)}
.meo-libro__portada img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.meo-libro:hover .meo-libro__portada img{transform:scale(1.04)}
.meo-libro__portada--vacia{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--oscuro),color-mix(in srgb,var(--oscuro) 80%,var(--acento)))}
.meo-libro__portada--vacia span{font-family:"Sora","Inter",sans-serif;font-size:56px;font-weight:800;
  color:var(--acento);opacity:.9}

.meo-libro__cuerpo{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.meo-libro__cuerpo h3{font-size:17.5px;letter-spacing:-.02em;line-height:1.3}
.meo-libro__cuerpo p{font-size:14.5px;color:var(--apagado);line-height:1.6}
.meo-libro__precio{font-family:"Sora","Inter",sans-serif;font-size:26px;font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--tinta);margin-top:auto;padding-top:8px}
.meo-libro__precio span{font-size:14px;font-weight:600;color:var(--apagado);letter-spacing:0}
.meo-libro__cuerpo .meo-btn{margin-top:8px}

/* Tarjetas que llevan a la página de venta del producto.
   El enlace del botón se estira por encima de toda la tarjeta, así se puede
   pulsar en cualquier parte (la portada, el título) y no solo en el botón.
   El botón sigue existiendo tal cual para quien navega con teclado. */
.meo-libro--enlace{position:relative}
.meo-libro__ir{text-decoration:none}
.meo-libro__ir::after{content:"";position:absolute;inset:0;z-index:1}
.meo-libro--enlace:focus-within{border-color:var(--linea-2);box-shadow:var(--sombra)}
.meo-libro__ir:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

@media (max-width:1080px){
  .meo-libros__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .meo-libros__grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (max-width:420px){
  .meo-libros__grid{grid-template-columns:1fr;max-width:320px;margin:0 auto}
}