/* ===========================================================
   Master Edit — Landing para WordPress / Elementor
   Es el mismo CSS de la landing estática, pero ENCAPSULADO
   bajo #me-landing.

   Por qué: el CSS original arranca con un reset global
   (* { margin:0; padding:0 }). Si eso entrara suelto en
   WordPress, rompería la interfaz de Elementor y el tema.
   Aquí ninguna regla puede salirse del contenedor.

   Se sube a: public_html/landing/landing-embed.css
   =========================================================== */

@property --tw-leading{syntax:"*";inherits:false}

/* ---------- Tokens de diseño ---------- */
#me-landing{
  --radius:.625rem;

  --background:oklch(13% .06 275);
  --foreground:oklch(98% 0 0);
  --card:oklch(19% .08 275);
  --primary:oklch(52% .28 265);
  --primary-foreground:oklch(99% 0 0);
  --muted-foreground:oklch(78% .04 265);
  --highlight:oklch(82% .13 232);
  --border:oklch(33% .1 270);

  --hero-gradient:linear-gradient(180deg, oklch(42% .24 266) 0%, oklch(22% .12 272) 45%, oklch(13% .06 275) 100%);
  --glow-red:0 0 60px -10px oklch(52% .28 265 / .75);

  --radius-xl:calc(var(--radius) + 4px);
  --radius-2xl:calc(var(--radius) + 8px);

  --ink:#0b0f2b;
}

/* ---------- Neutralizar el envoltorio de Elementor ----------
   Solo afecta a los contenedores que realmente llevan la landing,
   gracias a :has(). Cualquier otra sección que agregues a la
   página después queda intacta. */
.elementor-widget-html:has(#me-landing) > .elementor-widget-container,
.elementor-section:has(#me-landing) > .elementor-container,
.e-con:has(#me-landing),
.e-con-inner:has(#me-landing){
  padding:0;
  margin:0;
  max-width:none;
  width:100%;
}
body:has(#me-landing){
  background-color:oklch(13% .06 275);
  margin:0;
}
/* El tema de Hostinger le pone una animación de entrada (AOS) a los
   contenedores de Elementor, que desplaza la landing 100 px hacia abajo.
   Aquí no aporta nada: la landing ya tiene su propia jerarquía visual. */
.hostinger-elementor-aos:has(#me-landing){
  transform:none;
  opacity:1;
  transition:none;
}

/* ---------- Reset, encapsulado ---------- */
#me-landing,
#me-landing *,
#me-landing *::before,
#me-landing *::after{
  box-sizing:border-box;
  border:0 solid var(--border);
  margin:0;
  padding:0;
}
#me-landing{
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  background-color:var(--background);
  color:var(--foreground);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  tab-size:4;
}
#me-landing img,
#me-landing svg,
#me-landing video,
#me-landing iframe{display:block;max-width:100%;height:auto}
#me-landing a{color:inherit;text-decoration:none}
#me-landing ul,
#me-landing ol{list-style:none}
#me-landing summary::-webkit-details-marker{display:none}

/* ---------- Tipografía de marca ---------- */
#me-landing .headline{
  text-transform:uppercase;
  letter-spacing:.01em;
  font-family:"League Gothic","Open Sans",sans-serif;
  font-weight:400;
  line-height:.95;
}
#me-landing .subheadline{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:500;
  --tw-leading:initial;
}

/* ---------- Layout ---------- */
#me-landing .min-h-screen{min-height:100vh}
#me-landing .mx-auto{margin-left:auto;margin-right:auto}
#me-landing .w-full{width:100%}
#me-landing .h-full{height:100%}
#me-landing .min-h-32{min-height:8rem}

#me-landing .max-w-xs{max-width:20rem}
#me-landing .max-w-2xl{max-width:42rem}
#me-landing .max-w-3xl{max-width:48rem}
#me-landing .max-w-4xl{max-width:56rem}
#me-landing .max-w-5xl{max-width:64rem}

#me-landing .flex{display:flex}
#me-landing .inline-flex{display:inline-flex}
#me-landing .items-center{align-items:center}
#me-landing .items-start{align-items:flex-start}
#me-landing .justify-center{justify-content:center}
#me-landing .grid{display:grid}
#me-landing .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#me-landing .gap-3{gap:.75rem}
#me-landing .gap-4{gap:1rem}

#me-landing .aspect-video{aspect-ratio:16/9}
#me-landing .aspect-9-16{aspect-ratio:9/16}

/* ---------- Espaciado ---------- */
#me-landing .px-5{padding-left:1.25rem;padding-right:1.25rem}
#me-landing .px-10{padding-left:2.5rem;padding-right:2.5rem}
#me-landing .py-5{padding-top:1.25rem;padding-bottom:1.25rem}
#me-landing .py-10{padding-top:2.5rem;padding-bottom:2.5rem}
#me-landing .py-16{padding-top:4rem;padding-bottom:4rem}
#me-landing .py-20{padding-top:5rem;padding-bottom:5rem}
#me-landing .pt-16{padding-top:4rem}
#me-landing .pb-20{padding-bottom:5rem}
#me-landing .p-4{padding:1rem}
#me-landing .p-5{padding:1.25rem}
#me-landing .p-6{padding:1.5rem}
#me-landing .p-8{padding:2rem}

#me-landing .mt-2{margin-top:.5rem}
#me-landing .mt-3{margin-top:.75rem}
#me-landing .mt-4{margin-top:1rem}
#me-landing .mt-5{margin-top:1.25rem}
#me-landing .mt-6{margin-top:1.5rem}
#me-landing .mt-8{margin-top:2rem}
#me-landing .mt-10{margin-top:2.5rem}
#me-landing .mt-14{margin-top:3.5rem}

#me-landing .space-y-3 > :not(:last-child){margin-bottom:.75rem}
#me-landing .space-y-4 > :not(:last-child){margin-bottom:1rem}

/* ---------- Texto ---------- */
#me-landing .text-center{text-align:center}
#me-landing .uppercase{text-transform:uppercase}
#me-landing .font-semibold{font-weight:600}
#me-landing .font-bold{font-weight:700}
#me-landing .font-extrabold{font-weight:800}
#me-landing .tracking-wide{letter-spacing:.025em}
#me-landing .tracking-widest{letter-spacing:.1em}

#me-landing .leading-relaxed{--tw-leading:1.625;line-height:1.625}

#me-landing .text-xs{font-size:.75rem;line-height:var(--tw-leading, calc(1 / .75))}
#me-landing .text-sm{font-size:.875rem;line-height:var(--tw-leading, calc(1.25 / .875))}
#me-landing .text-base{font-size:1rem;line-height:var(--tw-leading, calc(1.5 / 1))}
#me-landing .text-lg{font-size:1.125rem;line-height:var(--tw-leading, calc(1.75 / 1.125))}
#me-landing .text-xl{font-size:1.25rem;line-height:var(--tw-leading, calc(1.75 / 1.25))}
#me-landing .text-2xl{font-size:1.5rem;line-height:var(--tw-leading, calc(2 / 1.5))}
#me-landing .text-3xl{font-size:1.875rem;line-height:var(--tw-leading, calc(2.25 / 1.875))}
#me-landing .text-4xl{font-size:2.25rem;line-height:var(--tw-leading, calc(2.5 / 2.25))}
#me-landing .text-6xl{font-size:3.75rem;line-height:var(--tw-leading, 1)}

/* ---------- Color ---------- */
#me-landing .bg-background{background-color:var(--background)}
#me-landing .text-foreground{color:var(--foreground)}
#me-landing .text-foreground\/85{color:color-mix(in oklab, var(--foreground) 85%, transparent)}
#me-landing .text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}
#me-landing .text-muted-foreground{color:var(--muted-foreground)}
#me-landing .text-highlight{color:var(--highlight)}
#me-landing .text-highlight\/80{color:color-mix(in oklab, var(--highlight) 80%, transparent)}
#me-landing .text-primary-foreground{color:var(--primary-foreground)}

#me-landing .bg-card{background-color:var(--card)}
#me-landing .bg-card\/30{background-color:color-mix(in oklab, var(--card) 30%, transparent)}
#me-landing .bg-card\/40{background-color:color-mix(in oklab, var(--card) 40%, transparent)}
#me-landing .bg-primary{background-color:var(--primary)}
#me-landing .bg-white{background-color:#fff}

#me-landing .border{border-width:1px}
#me-landing .border-2{border-width:2px}
#me-landing .border-t{border-top-width:1px}
#me-landing .border-dashed{border-style:dashed}
#me-landing .border-border{border-color:var(--border)}
#me-landing .border-highlight\/50{border-color:color-mix(in oklab, var(--highlight) 50%, transparent)}

#me-landing .rounded-xl{border-radius:var(--radius-xl)}
#me-landing .rounded-2xl{border-radius:var(--radius-2xl)}
#me-landing .rounded-full{border-radius:calc(infinity * 1px)}
#me-landing .shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / .25)}

#me-landing .text-ink{color:var(--ink)}
#me-landing .border-ink-10{border-color:color-mix(in oklab, var(--ink) 10%, transparent)}
#me-landing .bg-ink-04{background-color:color-mix(in oklab, var(--ink) 4%, transparent)}

/* ---------- Piezas de marca ---------- */
#me-landing .hero-bg{background-image:var(--hero-gradient)}
#me-landing .cta-glow{box-shadow:var(--glow-red)}

#me-landing .cta{transition:transform .15s cubic-bezier(.4,0,.2,1)}
#me-landing .cta:hover{transform:scale(1.05)}

#me-landing a.cta.hotmart__button-checkout,
#me-landing a.cta.hotmart-fb{
  background-image:none;
  background-color:var(--primary);
  color:var(--primary-foreground);
  border:0;
  border-radius:calc(infinity * 1px);
  padding:1.25rem 2.5rem;
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:1rem;
  font-weight:800;
  text-shadow:none;
  box-shadow:var(--glow-red);
}

#me-landing .cursor-pointer{cursor:pointer}
#me-landing .list-none{list-style:none}
#me-landing summary.list-none{list-style:none}

/* Placeholders "PENDIENTE:" */
#me-landing .placeholder{
  display:flex;
  height:100%;
  min-height:8rem;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-xl);
  border-width:2px;
  border-style:dashed;
  border-color:color-mix(in oklab, var(--highlight) 50%, transparent);
  background-color:color-mix(in oklab, var(--card) 40%, transparent);
  padding:1.5rem;
  text-align:center;
  font-size:.75rem;
  line-height:calc(1 / .75);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:color-mix(in oklab, var(--highlight) 80%, transparent);
}

/* ---------- Breakpoint sm (640px) ---------- */
@media (min-width:40rem){
  #me-landing .sm\:pt-24{padding-top:6rem}
  #me-landing .sm\:p-10{padding:2.5rem}
  #me-landing .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #me-landing .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  #me-landing .sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  #me-landing .sm\:text-base{font-size:1rem;line-height:var(--tw-leading, calc(1.5 / 1))}
  #me-landing .sm\:text-lg{font-size:1.125rem;line-height:var(--tw-leading, calc(1.75 / 1.125))}
  #me-landing .sm\:text-2xl{font-size:1.5rem;line-height:var(--tw-leading, calc(2 / 1.5))}
  #me-landing .sm\:text-4xl{font-size:2.25rem;line-height:var(--tw-leading, calc(2.5 / 2.25))}
  #me-landing .sm\:text-6xl{font-size:3.75rem;line-height:var(--tw-leading, 1)}

  #me-landing a.cta.hotmart__button-checkout,
  #me-landing a.cta.hotmart-fb{font-size:1.125rem}
}

@media (prefers-reduced-motion:reduce){
  #me-landing .cta{transition:none}
  #me-landing .cta:hover{transform:none}
}

/* ===========================================================
   AJUSTES 2 (22 de agosto de 2026) — encapsulado bajo #me-landing
   Temario a dos columnas con mockup, bloque BONUS REGALO,
   caja de oferta, bio con foto y subpágina de compra.
   =========================================================== */

#me-landing .max-w-6xl{max-width:72rem}

/* ---------- Rejillas de dos columnas ---------- */
#me-landing .grid-temario,
#me-landing .grid-bio,
#me-landing .grid-compra{display:grid;gap:2.5rem;align-items:start}

@media (min-width:64rem){
  #me-landing .grid-temario{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem}
  #me-landing .grid-bio{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:center}
  #me-landing .grid-compra{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3.5rem}
}

/* ---------- Mockup del pack de recursos ---------- */
#me-landing .mockup-img{
  display:block;
  width:100%;
  max-width:34rem;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 30px 60px oklch(0% 0 0 / .45));
}

/* ---------- Micro-sección "Bonus regalo" ---------- */
#me-landing .bonus-head{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem}
#me-landing .bonus-emoji{font-size:1.35rem;line-height:1}
#me-landing .bonus-title{
  font-family:"League Gothic","Open Sans",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1;
  font-size:1.6rem;
  color:var(--primary);
}
#me-landing .bonus-line{flex:1;height:1px;background:color-mix(in oklab, var(--primary) 30%, transparent)}
#me-landing .bonus-list{margin-top:.9rem}

/* ---------- Caja de oferta ---------- */
#me-landing .oferta{
  margin-top:1.75rem;
  border-radius:var(--radius-2xl);
  border:1px solid color-mix(in oklab, var(--highlight) 25%, transparent);
  background:color-mix(in oklab, var(--card) 45%, transparent);
  padding:2.25rem 1.75rem;
  text-align:center;
}
#me-landing .oferta-antes{font-size:1.45rem;color:color-mix(in oklab, var(--foreground) 85%, transparent)}
#me-landing .oferta-antes s{
  margin-left:.4rem;
  font-family:"League Gothic","Open Sans",sans-serif;
  font-size:2.5rem;
  letter-spacing:.01em;
  color:var(--highlight);
  text-decoration-line:line-through;
  text-decoration-color:var(--highlight);
  text-decoration-thickness:3px;
}
#me-landing .oferta-ahora{
  margin-top:.9rem;
  font-family:"League Gothic","Open Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:3.1rem;
  line-height:1;
  color:var(--foreground);
}
#me-landing .oferta-precio{
  margin-top:.5rem;
  font-family:"League Gothic","Open Sans",sans-serif;
  font-size:clamp(5rem, 13vw, 10.5rem);
  line-height:1;
  letter-spacing:.01em;
  color:var(--highlight);
  text-shadow:0 0 32px color-mix(in oklab, var(--highlight) 55%, transparent);
}

/* ---------- Bio: foto a la derecha ---------- */
#me-landing .bio-foto{display:flex;justify-content:center}
@media (min-width:64rem){
  #me-landing .bio-foto{justify-content:flex-end}
}
#me-landing .foto-paz{
  width:100%;
  max-width:26rem;
  height:auto;
  border-radius:var(--radius-2xl);
  box-shadow:0 25px 50px -12px oklch(0% 0 0 / .45);
}

/* ---------- Subpágina de compra ---------- */
#me-landing .volver{
  display:inline-block;
  font-size:.75rem;
  line-height:calc(1 / .75);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--highlight);
}

#me-landing .col-oferta{position:sticky;top:2rem}
@media (max-width:63.999rem){
  #me-landing .col-oferta{position:static}
}

#me-landing .beneficios-caja{
  border-radius:var(--radius-2xl);
  background:#fff;
  color:var(--ink);
  box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
}
@media (min-width:40rem){
  #me-landing .beneficios-caja{grid-template-columns:1fr 1fr}
}

#me-landing .beneficio{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1.05rem 1.1rem;
  border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
#me-landing .beneficio:last-child{border-bottom:0}
@media (min-width:40rem){
  #me-landing .beneficio:nth-child(odd){border-right:1px solid color-mix(in oklab, var(--ink) 10%, transparent)}
  #me-landing .beneficio:nth-child(7),
  #me-landing .beneficio:nth-child(8){border-bottom:0}
}

#me-landing .beneficio-ico{
  flex-shrink:0;
  width:2.4rem;
  height:2.4rem;
  border-radius:12px;
  background:color-mix(in oklab, var(--primary) 9%, #fff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  line-height:1;
}
#me-landing .beneficio-titulo{
  font-family:"League Gothic","Open Sans",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
  font-size:1.15rem;
  color:var(--primary);
}
#me-landing .beneficio-desc{
  margin-top:.25rem;
  font-size:.8rem;
  line-height:1.45;
  color:color-mix(in oklab, var(--ink) 72%, transparent);
}

#me-landing .inscripcion{
  border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  background:var(--card);
  padding:2rem;
  text-align:center;
}

/* ---- Ajuste de proporciones para acercarse a la referencia (22 ago) ----
   El mockup manda: ocupa toda su columna. La caja de oferta va algo más
   angosta y centrada debajo, y la de inscripción más angosta que la caja
   blanca de beneficios. Es la jerarquía del diseño de referencia. */
#me-landing .mockup-img{max-width:none}

#me-landing .col-oferta .oferta{
  max-width:88%;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:64rem){
  #me-landing .grid-compra{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  #me-landing .inscripcion{max-width:84%;margin-left:auto;margin-right:auto}
}

/* La subpágina de compra necesita más ancho que el resto de la landing:
   con 72rem los textos de los 8 beneficios se partían en cuatro líneas. */
#me-landing .max-w-7xl{max-width:84rem}

/* ===========================================================
   MEDIOS REALES (12 de septiembre de 2026)
   Videos de resultados en bucle, tarjetas de pago y testimonios.
   =========================================================== */

/* ---------- Videos verticales en bucle ---------- */
#me-landing .marco-video{
  /* position:relative para poder montar el boton de play encima. */
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  background:color-mix(in oklab, var(--card) 60%, transparent);
  cursor:pointer;
}
#me-landing .marco-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Boton de play de los videos de resultados.

   En el movil el autoplay silencioso falla a menudo: el navegador responde
   "video-only background media was paused to save power" y lo pausa aunque el
   video ya este descargado (modo de bajo consumo, ahorro de datos, o la
   politica del propio navegador). Eso no se puede vencer por codigo, asi que
   cuando pasa mostramos este boton y con un toque arranca. En escritorio,
   donde el autoplay si funciona, no llega a verse nunca. */
#me-landing .vplay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
#me-landing .vplay[hidden]{display:none}
#me-landing .vplay svg{width:54px;height:54px}
#me-landing .vplay-fondo{fill:var(--primary);opacity:.9}
#me-landing .vplay-flecha{fill:#fff}


/* ---------- Etiqueta de seccion ---------- */
#me-landing .etiqueta-seccion{
  display:block;
  width:max-content;
  margin:0 auto 1rem;
  border-radius:calc(infinity * 1px);
  border:1px solid color-mix(in oklab, var(--highlight) 35%, transparent);
  background:color-mix(in oklab, var(--card) 55%, transparent);
  padding:.4rem 1rem;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--highlight);
}

/* ---------- Tarjetas de pago ---------- */
#me-landing .grid-pagos{display:grid;gap:1rem;grid-template-columns:1fr;align-items:start}
#me-landing .pago{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:var(--radius-2xl);
  border:1px solid color-mix(in oklab, var(--highlight) 22%, transparent);
  background:color-mix(in oklab, var(--card) 45%, transparent);
  padding:1.25rem;
}
#me-landing .pago-badge{
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:oklch(78% .16 155);
}
#me-landing .pago-monto{
  margin-top:.45rem;
  font-family:"League Gothic","Open Sans",sans-serif;
  font-weight:400;
  font-size:2.5rem;
  line-height:1;
  letter-spacing:.01em;
  color:var(--foreground);
}
#me-landing .pago-monto span{font-size:.95rem;letter-spacing:.06em;color:var(--highlight)}
#me-landing .pago-concepto{margin-top:.2rem;font-size:.85rem;color:var(--muted-foreground)}
#me-landing .pago-img{
  margin-top:1rem;
  width:100%;
  height:auto;
  border-radius:var(--radius-xl);
  border:1px solid color-mix(in oklab, var(--border) 90%, transparent);
}

/* ---------- Testimonios ---------- */
#me-landing .grid-testi-2,
#me-landing .grid-testi-3{display:grid;gap:1rem;grid-template-columns:1fr;align-items:start}
#me-landing .testi{
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:var(--card);
}
#me-landing .testi video,
#me-landing .testi img{display:block;width:100%;height:auto;background:#05060f}
#me-landing .testi figcaption{
  padding:.7rem 1rem;
  text-align:center;
  font-size:.8rem;
  color:var(--muted-foreground);
}

@media (min-width:40rem){
  #me-landing .grid-pagos{grid-template-columns:repeat(2,minmax(0,1fr))}
  #me-landing .grid-testi-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #me-landing .grid-testi-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:64rem){
  #me-landing .grid-pagos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Fachada del VSL de YouTube ----------
   Se ve la miniatura y el boton; el iframe solo se crea al hacer clic.
   Asi la portada no arrastra el peso del reproductor de YouTube. */
#me-landing .yt-fachada{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  cursor:pointer;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid color-mix(in oklab, var(--highlight) 30%, transparent);
  background:#000;
}
#me-landing .yt-fachada img,
#me-landing .yt-fachada iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}

#me-landing .yt-play{
  /* Baja del centro a proposito: en esta miniatura el rostro esta al medio
     y un boton centrado le tapaba la sonrisa. */
  position:absolute;
  top:70%;
  left:50%;
  transform:translate(-50%,-50%);
  width:88px;
  height:62px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  transition:transform .18s ease;
}
#me-landing .yt-play svg{width:100%;height:100%;display:block}
#me-landing .yt-play-fondo{fill:var(--primary);opacity:.92}
#me-landing .yt-play-flecha{fill:#fff}
#me-landing .yt-fachada:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}
#me-landing .yt-play:focus-visible{outline:3px solid var(--highlight);outline-offset:6px;border-radius:12px}

@media (prefers-reduced-motion:reduce){
  #me-landing .yt-play{transition:none}
  #me-landing .yt-fachada:hover .yt-play{transform:translate(-50%,-50%)}
}

/* ---------- Aviso de cookies ----------
   Se muestra hasta que la persona elige. La eleccion se guarda en
   localStorage, asi que no vuelve a aparecer. Mientras no haya elegido, el
   consentimiento esta DENEGADO: los pixeles no se cargan y a Google se le
   manda consent denied. */
#me-landing .cookies-aviso{
  position:fixed;
  left:1rem;
  right:1rem;
  bottom:1rem;
  z-index:9999;
  margin-inline:auto;
  max-width:46rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  padding:1.15rem 1.35rem;
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--card) 96%, black);
  box-shadow:0 18px 40px rgb(0 0 0 / .45);
}
#me-landing .cookies-aviso[hidden]{display:none}
#me-landing .cookies-texto{flex:1 1 20rem;margin:0;font-size:.8125rem;line-height:1.55;color:var(--muted-foreground)}
#me-landing .cookies-texto strong{color:var(--foreground)}
#me-landing .cookies-texto a{color:var(--highlight);text-decoration:underline}
#me-landing .cookies-botones{display:flex;flex-wrap:wrap;gap:.6rem}
#me-landing .cookies-btn{
  cursor:pointer;
  border-radius:9999px;
  border:1px solid var(--border);
  background:none;
  padding:.6rem 1.1rem;
  font-family:inherit;
  font-size:.8125rem;
  font-weight:600;
  color:var(--foreground);
}
#me-landing .cookies-btn-si{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
@media (max-width:30rem){
  .cookies-aviso{left:.5rem;right:.5rem;bottom:.5rem;padding:1rem}
  .cookies-botones{width:100%}
  .cookies-btn{flex:1 1 auto;text-align:center}
}

/* Enlaces legales del pie */
#me-landing .pie-legal{margin-top:.85rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem}
#me-landing .pie-legal a{color:var(--muted-foreground);text-decoration:underline}
#me-landing .pie-legal a:hover{color:var(--foreground)}

/* ---------- Paginas legales ---------- */
#me-landing .legal{max-width:46rem;margin-inline:auto}
#me-landing .legal h2{font-family:"League Gothic",Impact,sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:1.75rem;line-height:1.15;margin:2.5rem 0 .75rem;color:var(--foreground)}
#me-landing .legal h3{font-size:1rem;font-weight:700;margin:1.75rem 0 .4rem;color:var(--highlight)}
#me-landing .legal p{margin:.75rem 0;font-size:.9375rem;line-height:1.75;color:var(--muted-foreground)}
#me-landing .legal strong{color:var(--foreground)}
#me-landing .legal ul{margin:.75rem 0;padding-left:1.15rem;list-style:disc}
#me-landing .legal li{margin:.45rem 0;font-size:.9375rem;line-height:1.7;color:var(--muted-foreground)}
#me-landing .legal a{color:var(--highlight);text-decoration:underline}
#me-landing .legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;
  padding:.1em .35em;border-radius:.25rem;background:var(--card)}
#me-landing .legal-fecha{margin-top:.6rem;font-size:.8125rem;color:var(--muted-foreground)}
#me-landing .legal-pie{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border)}
#me-landing .nota{font-size:.8125rem;font-style:italic}
#me-landing .pendiente{padding:.1em .45em;border-radius:.25rem;background:oklch(62% .19 35);color:#fff;
  font-size:.8125rem;font-weight:700;letter-spacing:.02em}
#me-landing .tabla-cookies{width:100%;margin:1rem 0;border-collapse:collapse;font-size:.8125rem;
  display:block;overflow-x:auto}
#me-landing .tabla-cookies th, #me-landing .tabla-cookies td{padding:.6rem .7rem;text-align:left;
  border-bottom:1px solid var(--border);color:var(--muted-foreground);white-space:nowrap}
#me-landing .tabla-cookies th{color:var(--foreground);font-weight:700}