.elementor-kit-7{--e-global-color-primary:#082B45;--e-global-color-secondary:#C5A36A;--e-global-color-text:#293033;--e-global-color-accent:#2E7F8C;--e-global-color-murivory:#F6F1E8;--e-global-color-mursage:#A8B8B0;--e-global-color-murbg:#FAFAF8;--e-global-color-murbgalt:#F3F4F2;--e-global-color-murmuted:#5F6B6E;--e-global-typography-primary-font-family:"Switzer";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Switzer";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:600;background-color:#FAFAF8;color:#293033;font-family:"Manrope", sans-serif;font-size:16px;font-weight:300;line-height:1.5em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#082B45;}.elementor-kit-7 a:hover{color:#C5A36A;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   Fuentes auto-alojadas — MUR Academy
   Switzer (titulares) no está en Google Fonts; Manrope se sirve en su versión
   variable. Elementor cargaría instancias estáticas de la API v1, así que
   "Elementor > Ajustes > Avanzado > Google Fonts" queda desactivado.
   ========================================================================== */

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://muracademy.com.ar/wp-content/uploads/mur-fonts/switzer-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://muracademy.com.ar/wp-content/uploads/mur-fonts/switzer-600.woff2) format('woff2');
}

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://muracademy.com.ar/wp-content/uploads/mur-fonts/switzer-700.woff2) format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://muracademy.com.ar/wp-content/uploads/mur-fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://muracademy.com.ar/wp-content/uploads/mur-fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   MUR Academy — CSS del sitio (Elementor > Ajustes del sitio > CSS personalizado)

   Paleta oficial (Visual Keys):
     #082B45 azul quirúrgico · #F6F1E8 marfil     · #293033 grafito
     #A8B8B0 salvia          · #C5A36A champagne  · #2E7F8C azul mineral
   Fondos de página: #FAFAF8 base · #F3F4F2 alterno · #FFFFFF tarjetas.
   ========================================================================== */

:root{
  --mur-navy:#082B45;
  --mur-ivory:#F6F1E8;
  --mur-graphite:#293033;
  --mur-sage:#A8B8B0;
  --mur-gold:#C5A36A;
  --mur-gold-2:#D6B57C;
  --mur-mineral:#2E7F8C;
  --mur-mineral-2:#3A94A2;
  --mur-bg:#FAFAF8;
  --mur-bg-alt:#F3F4F2;
  --mur-card:#FFFFFF;
  --mur-muted:#5F6B6E;
  --mur-ease:cubic-bezier(.76,0,.24,1);
  --mur-flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L9 3M4 3h5v5'/%3E%3C/svg%3E");
  --mur-tilde:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5.5'/%3E%3C/svg%3E");
  --mur-cruz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E");
}

body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
/* El diseño recorta el desborde horizontal en su contenedor raíz: acá hace
   falta por el zoom del hero y por la pista del ticker. */
body{ overflow-x:clip; }
html{ scroll-behavior:smooth; }

/* Varios párrafos llevan un ancho fijo (el `max-width` del diseño se traduce a
   width en Elementor). Sin este tope desbordarían en pantallas angostas. */
.elementor-widget{ max-width:100%; }

/* Elementor deja los titulares en `line-height:1`, lo que aprieta cualquier
   texto corto (etiquetas, nombres, pies). Se da una base legible; los widgets
   que declaran su interlineado en el panel siguen mandando sobre esto. */
.elementor-heading-title{ line-height:1.5; }

/* El tema añade margen inferior a cada <p>; en un layout con gaps eso suma
   espacio fantasma bajo cada párrafo. Se quita solo al último de cada widget,
   para que varios párrafos sigan separándose entre sí. */
.elementor-widget-text-editor p:last-child{ margin-bottom:0; }

.mur-balance .elementor-heading-title{ text-wrap:balance; }
.mur-pretty p{ text-wrap:pretty; }
.mur-script{ display:none !important; }

/* --------------------------------------------------------------------------
   1. Header
   Transparente sobre el hero; al scrollear pasa a marfil translúcido y todo
   el contenido invierte color (logo incluido).
   -------------------------------------------------------------------------- */
.mur-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:999;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
body.mur-scrolled .mur-header{
  background:rgba(250,250,248,.9);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(41,48,51,.08);
}

/* El editor de Elementor no debe quedar tapado por el header fijo. */
body.elementor-editor-active .mur-header,
body.elementor-editor-preview .mur-header{ position:relative; }

/* Los tres bloques del header (logo, menú, CTA) se miden por su contenido y
   `space-between` reparte el resto. */
.mur-header-inner > .e-con-inner > *{ flex:0 0 auto; width:auto; }

/* Logo: dos variantes superpuestas que se cruzan con el scroll. La de color
   vive sobre el hero oscuro, la gris sobre el header ya sólido. */
.mur-logo{ position:relative; }
.mur-logo img{ height:56px; width:auto; display:block; transition:opacity .3s ease; }
.mur-logo-on-light{ position:absolute !important; inset:0; }
body.mur-scrolled .mur-logo-on-dark{ opacity:0; }
body:not(.mur-scrolled) .mur-logo-on-light{ opacity:0; }

/* Menú principal
   El CSS del widget se imprime después del CSS del sitio y con .elementor-kit-7es de
   cinco clases, así que las reglas que invierten el color al scrollear repiten
   `.elementor-widget-*` para empatar y suman `body` para ganar. */
.mur-nav .elementor-nav-menu--main .elementor-item{ padding:0; transition:color .3s ease; }
.mur-nav .elementor-nav-menu--main .elementor-item:focus{ background:transparent; }
body.mur-scrolled .elementor-widget-nav-menu.mur-nav .elementor-nav-menu--main .elementor-item{
  color:var(--mur-navy);
}
body.mur-scrolled .elementor-widget-nav-menu.mur-nav .elementor-nav-menu--main .elementor-item:hover{
  color:var(--mur-gold);
}

/* Ítem activo. Elementor le da una regla propia (una clase más que la del
   resto) y la imprime *después* de la del hover, así que hacía dos cosas:
   sobre el header ya scrolleado lo dejaba marfil sobre marfil, y le anulaba el
   dorado al pasar el cursor. Como el menú apunta a anclas, Elementor Pro va
   marcando activa la sección por la que pasás, así que se ve todo el tiempo.
   El diseño no distingue el ítem activo: sigue al resto en los dos estados. */
body.mur-scrolled .elementor-widget-nav-menu.mur-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:var(--mur-navy);
}
body .elementor-widget-nav-menu.mur-nav .elementor-nav-menu--main .elementor-item.elementor-item-active:hover,
body .elementor-widget-nav-menu.mur-nav .elementor-nav-menu--main .elementor-item.elementor-item-active:focus{
  color:var(--mur-gold);
}

/* CTA del header: marfil sobre el hero, azul sobre el header sólido. */
body.mur-scrolled .elementor-widget-button.mur-header-cta .elementor-button{
  background-color:var(--mur-navy);
  color:var(--mur-ivory);
}
body.mur-scrolled .elementor-widget-button.mur-header-cta .elementor-button:hover{
  background-color:var(--mur-gold);
  color:var(--mur-navy);
}

/* --------------------------------------------------------------------------
   2. Botones
   Etiqueta con efecto rodillo (dos copias del texto) y flecha en su cajita.
   El widget de Elementor imprime `text` con wp_kses_post, así que admite los
   <span class> del rodillo pero no atributos data-*.
   -------------------------------------------------------------------------- */
.mur-btn .elementor-button{
  border-radius:10px;
  font-family:Manrope,sans-serif;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mur-btn .elementor-button-content-wrapper{ align-items:center; }
.mur-btn .elementor-button-text{
  display:inline-flex;
  align-items:center;
  gap:14px;
  flex-grow:0;
}
.mur-roll{
  display:block;
  position:relative;
  overflow:hidden;
  line-height:1.3;
  white-space:nowrap;
}
.mur-roll span{
  display:block;
  transition:transform .55s var(--mur-ease);
}
.mur-roll span + span{ position:absolute; left:0; top:100%; }
.mur-btn .elementor-button:hover .mur-roll span{ transform:translateY(-100%); }

.mur-arrow{
  width:24px;
  height:24px;
  border-radius:6px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(246,241,232,.16);
  transition:transform .4s var(--mur-ease);
}
/* La flecha se dibuja con una máscara y no con el carácter «↗». Ese carácter
   está en la lista de emoji de Unicode: según el sistema y el navegador se
   pintaba como un emoji de colores dentro de la cajita, y en el resto cambiaba
   de grosor según la fuente de reemplazo. Con la máscara toma el color del
   texto del botón, y el hover que ya lo cambia la acompaña sola. */
.mur-arrow::before,
.mur-apply-virtual .mur-apply-continuar::after{
  content:'';
  flex:0 0 auto;
  width:10px;
  height:10px;
  background:currentColor;
  -webkit-mask:var(--mur-flecha) center/contain no-repeat;
          mask:var(--mur-flecha) center/contain no-repeat;
}
.mur-btn .elementor-button:hover .mur-arrow{ transform:translate(2px,-2px); }
/* Sobre botones claros la cajita de la flecha se oscurece en vez de aclararse.
   El CTA del header queda fuera a propósito: sobre marfil la flecha casi no se
   ve y sobre el azul del header ya scrolleado sí, tal como en el diseño. */
.mur-btn-light .mur-arrow{ background:rgba(8,43,69,.14); }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
.mur-hero{ position:relative; overflow:hidden; }

/* Fondo con un leve zoom fijo: el parallax lo mueve por JS. */
.mur-hero-bg{
  position:absolute !important;
  inset:0;
  transform:scale(1.06);
  will-change:transform;
  z-index:0;
  padding:0 !important;
  min-height:0;
}

/* Un único elemento resuelve los dos degradados del diseño: el lateral (para
   legibilidad del texto) y el inferior (para asentar la figura). */
.mur-hero-veil{
  position:absolute !important;
  inset:0;
  z-index:1;
  pointer-events:none;
  padding:0 !important;
  min-height:0;
  background:linear-gradient(90deg,rgba(8,43,69,.97) 0%,rgba(8,43,69,.9) 40%,rgba(8,43,69,.6) 70%,rgba(8,43,69,.45) 100%);
}
.mur-hero-veil::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:45%;
  background:linear-gradient(180deg,rgba(8,43,69,0) 0%,rgba(8,43,69,.85) 100%);
}

/* Figura recortada del Dr. Mur, anclada al borde del contenedor de 1280. */
.mur-hero-fg{
  position:absolute !important;
  right:max(40px,calc((100% - 1280px) / 2 + 40px));
  bottom:0;
  left:auto;
  top:auto;
  z-index:1;
  width:min(44%,560px);
  height:88%;
  pointer-events:none;
  will-change:transform;
  padding:0 !important;
  min-height:0;
}
/* El diseño fundía el 30 % inferior de la figura contra el azul con un
   degradado. El recorte definitivo corta limpio a la altura de la cadera, así
   que el degradado solo ensuciaba el ambo: va sin fondo. */

.mur-hero-body{ position:relative; z-index:2; }

/* Valoración del hero */
.mur-stars{ color:var(--mur-gold); }

@media (max-width:1024px){
  .mur-hero-fg{ width:min(52%,420px); height:72%; opacity:.85; }
}
@media (max-width:767px){
  .mur-hero-fg{ display:none; }
  .mur-hero-veil{ background:linear-gradient(90deg,rgba(8,43,69,.95) 0%,rgba(8,43,69,.85) 100%); }
}

/* --------------------------------------------------------------------------
   4. Ticker
   Seis conceptos repetidos dos veces: el track mide el doble y el keyframe
   lo desplaza un 50 %, así el bucle no tiene corte.
   -------------------------------------------------------------------------- */
@keyframes mur-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.mur-ticker{ overflow:hidden; }
.mur-ticker-track{
  width:max-content !important;
  max-width:none !important;
  flex-wrap:nowrap !important;
  animation:mur-ticker 40s linear infinite;
}
.mur-ticker-track > .elementor-widget-heading{ flex:0 0 auto; width:auto; }
.elementor-widget-heading.mur-tick .elementor-heading-title{
  display:flex;
  align-items:center;
  gap:20px;
  padding-right:20px;
  white-space:nowrap;
  line-height:1.5;
}
.elementor-widget-heading.mur-tick .elementor-heading-title::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mur-gold);
  flex:0 0 auto;
}
@media (prefers-reduced-motion:reduce){
  .mur-ticker-track{ animation:none; }
}

/* --------------------------------------------------------------------------
   5. Video + credenciales
   -------------------------------------------------------------------------- */
/* El video llegó grabado en vertical: es el mismo hueco 9:16 de las reseñas
   (`.mur-testi-video`, más abajo), acá con el redondeo y la sombra de esta
   sección. Las reglas de la caja apaisada con su reproductor dibujado
   (`.mur-video`, `-play`, `-bar`, `-rule`) se fueron con ella. */
/* El video a la izquierda, ocupando las dos filas; a la derecha, el título con
   su bajada y debajo la ficha, que se estira hasta el pie del video: los dos
   lados arrancan y terminan a la misma altura. En el marcado van título,
   video, ficha, que es el orden del teléfono: ahí no hay reubicación y se
   apilan así.

   Recién desde 1200px. Más angosto, la columna del texto no llega a 680px: el
   título se parte en cuatro o cinco renglones y el lado derecho termina más
   de 100px por debajo del video. */
@media (min-width:1200px){
  .mur-presentacion{ grid-template-rows:auto 1fr !important; }
  .mur-presentacion > .mur-testi-video{ grid-column:1; grid-row:1 / span 2; align-self:start; }
  .mur-presentacion > .mur-presentacion-texto{ grid-column:2; grid-row:1; }
  .mur-presentacion > .mur-cred-card{ grid-column:2; grid-row:2; }
}
/* De tablet a 1199px el título va arriba, a todo el ancho, y debajo el video
   con la ficha al lado. Entre 1025 y 1199 —una tablet apaisada— el video se
   achica a 320px: Elementor ahí todavía aplica la columna de escritorio, y con
   380 la ficha quedaba apretada contra un video más alto que ella. */
@media (max-width:1199px) and (min-width:768px){
  .mur-presentacion > .mur-presentacion-texto{ grid-column:1 / -1; max-width:620px; }
  .mur-presentacion > .mur-testi-video{ align-self:start; }
}
@media (max-width:1199px) and (min-width:1025px){
  .mur-presentacion{ grid-template-columns:minmax(0,320px) minmax(0,1fr) !important; }
}
.mur-presentacion .mur-testi-video{
  border-radius:16px;
  box-shadow:0 40px 80px -40px rgba(8,43,69,.5);
}
.mur-presentacion .mur-testi-media{ border-radius:16px; }
.mur-tnum .elementor-heading-title{ font-variant-numeric:tabular-nums; }

/* Ficha de credenciales
   Es una grilla y no la columna flex que arma Elementor: así las filas miden
   lo mismo y se reparten el alto cuando el video de al lado la estira. Cada
   credencial centra su contenido. `!important` donde Elementor escribe el
   valor por elemento, con más peso que una clase. */
.mur-cred-card{
  border-radius:16px;
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  grid-auto-rows:1fr;
}
.mur-cred-card > .e-con{
  align-content:center;
  padding-block:18px !important;
}
.mur-cred-card > .e-con + .e-con{ border-top:1px solid rgba(41,48,51,.08); }
/* Al lado del video la ficha mide más de 670px de ancho: cuatro filas de una
   línea dejaban la mitad derecha vacía. Ahí van de a dos, con el número arriba
   del texto, y las dos líneas finas forman una cruz. */
@media (min-width:1200px){
  .mur-cred-card{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mur-cred-card > .e-con{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
    padding-block:20px !important;
  }
  .mur-cred-card > .e-con:nth-child(odd){ padding-right:32px !important; }
  .mur-cred-card > .e-con:nth-child(even){
    padding-left:32px !important;
    border-left:1px solid rgba(41,48,51,.08);
  }
  .mur-cred-card > .e-con:nth-child(-n+2){ border-top:0; }
}
.elementor-widget-heading.mur-cred-n .elementor-heading-title{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--mur-bg);
  border:1px solid rgba(197,163,106,.5);
  display:grid;
  place-items:center;
  line-height:1;
}

/* --------------------------------------------------------------------------
   6. Qué vas a aprender
   -------------------------------------------------------------------------- */
.mur-learn-card{
  border-radius:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.mur-learn-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 50px -36px rgba(8,43,69,.35);
}
/* Contenedor vacío: el widget de encabezado no renderiza sin texto, así que el
   ícono se dibuja con un container y su pseudo-elemento. */
.mur-learn-icon{
  width:44px !important;
  height:44px;
  min-height:44px;
  flex:0 0 auto;
  border-radius:12px;
  background:var(--mur-bg);
  display:grid !important;
  place-items:center;
  padding:0 !important;
}
.mur-learn-icon::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  border:2px solid var(--mur-navy);
}
/* El cierre: la frase que ocupa las dos columnas que deja libre la séptima
   tarjeta. Es texto suelto, sin caja ni adorno. En una columna —el teléfono—
   no puede pedir dos: la grilla inventaría una segunda y todas las tarjetas se
   irían a la mitad del ancho. */
.mur-learn-cierre{ grid-column:span 2; }
/* Que no se estire a lo ancho de las dos columnas: a 26px, un renglón de 800px
   se lee mal. */
.mur-learn-cierre-texto{ max-width:560px; }
@media (max-width:767px){
  .mur-learn-cierre{ grid-column:auto; }
  .elementor-widget-heading.mur-learn-cierre-texto .elementor-heading-title{ font-size:22px; }
}
/* Numeración en itálica champagne, usada también en las fichas de casos. */
.elementor-widget-heading.mur-num .elementor-heading-title{
  font-family:Switzer,sans-serif;
  font-style:italic;
  font-size:18px;
  line-height:1.5;
  color:var(--mur-gold);
}

/* --------------------------------------------------------------------------
   7. Programa
   -------------------------------------------------------------------------- */
.mur-figure{ border-radius:20px; overflow:hidden; min-height:0; }
.mur-ar-45{ aspect-ratio:4/5; }
.mur-ar-11{ aspect-ratio:1/1; }
.mur-ar-23{ aspect-ratio:2/3; }

/* El equipo: en tablet la grilla pasa a dos columnas y el título se lleva la
   primera fila entera, con los dos retratos debajo. */
@media (max-width:1024px) and (min-width:768px){
  .mur-equipo-titulo{ grid-column:1 / -1; max-width:560px; }
}
.mur-ar-169{ aspect-ratio:16/9; }
.mur-ar-916{ aspect-ratio:9/16; }

.mur-prog-stats{
  position:absolute !important;
  left:24px;
  right:24px;
  bottom:24px;
  width:auto !important;
  z-index:2;
  border-radius:14px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.mur-prog-media{ position:relative; }

/* El renglón del certificado, con un tilde dorado delante. */
.elementor-widget-heading.mur-cert-linea .elementor-heading-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.elementor-widget-heading.mur-cert-linea .elementor-heading-title::before{
  content:"";
  flex:none;
  width:14px;
  height:14px;
  background:var(--mur-gold);
  -webkit-mask:var(--mur-tilde) center/contain no-repeat;
          mask:var(--mur-tilde) center/contain no-repeat;
}

/* --------------------------------------------------------------------------
   8. Acordeones
   El CSS del widget se carga DESPUÉS del CSS del sitio, así que estas reglas
   llevan el prefijo `.elementor-widget-accordion` para ganar en especificidad
   sin recurrir a !important.
   -------------------------------------------------------------------------- */
.elementor-widget-accordion.mur-acc .elementor-accordion{ border:0; }
.elementor-widget-accordion.mur-acc .elementor-accordion-item{ border:0; }
.elementor-widget-accordion.mur-acc .elementor-tab-content{ border:0; }
.elementor-widget-accordion.mur-acc .elementor-tab-title{
  transition:color .25s ease;
  font-weight:600;
}
/* El diseño usa + / − como texto fino, no el icono sólido de Font Awesome. */
.elementor-widget-accordion.mur-acc .elementor-tab-title .elementor-accordion-icon{ display:none; }
.elementor-widget-accordion.mur-acc .elementor-tab-title::after{
  content:"+";
  order:2;
  flex:0 0 auto;
  font-family:Manrope,sans-serif;
  font-weight:300;
  text-align:right;
  line-height:1.2;
}
/* Signo menos U+2212 literal: WordPress elimina las barras invertidas al
   guardar el meta, así que un escape CSS `\2212` llegaría como texto. */
.elementor-widget-accordion.mur-acc .elementor-tab-title.elementor-active::after{ content:"−"; }
.elementor-widget-accordion.mur-acc .elementor-accordion-title{ order:1; flex:1 1 auto; }

/* Programa — filas sobre fondo azul */
.elementor-widget-accordion.mur-acc-programa .elementor-accordion-item{
  border-top:1px solid rgba(246,241,232,.14);
}
.elementor-widget-accordion.mur-acc-programa .elementor-accordion-item:last-child{
  border-bottom:1px solid rgba(246,241,232,.14);
}
.elementor-widget-accordion.mur-acc-programa .elementor-tab-title{
  display:grid;
  grid-template-columns:72px 1fr 24px;
  gap:20px;
  align-items:start;
  padding:20px 0;
  background:transparent;
}
/* `display:contents` promueve las dos etiquetas del título a celdas del grid,
   para que número, texto y signo compartan la misma rejilla de 3 columnas. */
.elementor-widget-accordion.mur-acc-programa .elementor-accordion-title{
  display:contents;
}
.elementor-widget-accordion.mur-acc-programa .mur-mod-n{
  order:0;
  font-family:Manrope,sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mur-gold);
  font-weight:600;
  padding-top:4px;
  line-height:1.5;
}
.elementor-widget-accordion.mur-acc-programa .mur-mod-t{
  order:1;
  font-family:Manrope,sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  color:var(--mur-ivory);
}
.elementor-widget-accordion.mur-acc-programa .elementor-tab-title::after{
  order:2;
  font-size:20px;
  color:var(--mur-gold);
  padding-top:2px;
}
/* Al abrir, el título cede su padding inferior al contenido: en el diseño la
   fila abierta mide `20px + título + 10px + texto + 20px`, no un padding más. */
.elementor-widget-accordion.mur-acc-programa .elementor-tab-title.elementor-active{ padding-bottom:0; }
.elementor-widget-accordion.mur-acc-programa .elementor-tab-content{
  background:transparent;
  padding:10px 0 20px 92px;
}
.elementor-widget-accordion.mur-acc-programa .elementor-tab-content p{ margin:0; max-width:460px; }

/* FAQ — filas sobre fondo claro.
   Es el widget `toggle`, no `accordion`: arranca con todas cerradas, que el
   acordeón no permite. Las clases son las del toggle, así que acá van también
   las reglas comunes de arriba (sin bordes, el + / − como texto). */
.elementor-widget-toggle.mur-acc-faq .elementor-toggle-item{
  border-top:1px solid rgba(41,48,51,.14);
}
.elementor-widget-toggle.mur-acc-faq .elementor-toggle-item:last-child{
  border-bottom:1px solid rgba(41,48,51,.14);
}
.elementor-widget-toggle.mur-acc-faq .elementor-tab-title{
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:24px 0;
  line-height:1.3;
  background:transparent;
  border:0;
  transition:color .25s ease;
  font-weight:600;
  cursor:pointer;
}
.elementor-widget-toggle.mur-acc-faq .elementor-tab-title .elementor-toggle-icon{ display:none; }
.elementor-widget-toggle.mur-acc-faq .elementor-toggle-title{ order:1; flex:1 1 auto; }
.elementor-widget-toggle.mur-acc-faq .elementor-tab-title::after{
  content:"+";
  order:2;
  flex:0 0 auto;
  font-family:Manrope,sans-serif;
  font-weight:300;
  text-align:right;
  line-height:1.2;
  font-size:22px;
  color:var(--mur-navy);
  min-width:24px;
}
.elementor-widget-toggle.mur-acc-faq .elementor-tab-title.elementor-active::after{ content:"−"; }
.elementor-widget-toggle.mur-acc-faq .elementor-tab-title.elementor-active{ padding-bottom:0; }
.elementor-widget-toggle.mur-acc-faq .elementor-tab-content{
  border:0;
  padding:12px 0 24px;
  max-width:560px;
}
.elementor-widget-toggle.mur-acc-faq .elementor-tab-content p{ margin:0; }

/* --------------------------------------------------------------------------
   9. Modalidades
   -------------------------------------------------------------------------- */
.mur-mod-card{ border-radius:20px; overflow:hidden; }
.mur-mod-media{ position:relative; border-radius:12px; overflow:hidden; min-height:0; }
/* El cuerpo ocupa el alto restante para que el botón quede siempre al pie. */
/* El cuerpo ocupa el alto que sobra de la tarjeta y el botón va al pie.
   `home.php` le pide al botón un margen `auto`, pero Elementor lo escribe con
   unidad y no vale: con cinco filas en Presencial y cuatro en Virtual, un botón
   quedaba 46px más arriba que el otro.

   Los dos con `!important`: Elementor arma el `flex` y los márgenes de sus
   contenedores con variables, en reglas más pesadas que estas. Sin eso, el
   `flex:1 1 auto` que había acá nunca se aplicó —el cuerpo quedaba en
   `0 1 auto`— y nadie lo notó mientras las dos tarjetas tuvieron cinco filas. */
.mur-mod-card > .mur-mod-body{ flex:1 1 auto !important; }
.mur-mod-body > .e-con:last-child{ margin-top:auto !important; }
.elementor-widget-heading.mur-pill .elementor-heading-title{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.5;
}
.mur-pill{
  position:absolute !important;
  left:14px;
  top:14px;
  z-index:2;
  width:auto !important;
}
.elementor-widget-heading.mur-pill-gold .elementor-heading-title{ background:var(--mur-gold); color:var(--mur-navy); }
.elementor-widget-heading.mur-pill-mineral .elementor-heading-title{ background:var(--mur-mineral); color:var(--mur-ivory); }

/* --------------------------------------------------------------------------
   10. Casos
   -------------------------------------------------------------------------- */
.mur-case-card{ border-radius:20px; }
.mur-case-pair{
  position:relative;
  aspect-ratio:4/3;
  min-height:0;
  border-radius:12px;
  overflow:hidden;
}
/* Línea divisoria y perilla central: decoración, sin interacción. */
.mur-case-pair::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:#FFFFFF;
  transform:translateX(-1px);
  z-index:2;
  pointer-events:none;
}
.mur-case-pair::after{
  content:"‹ ›";
  position:absolute;
  left:50%;
  top:50%;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#FFFFFF;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--mur-navy);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.4);
  z-index:3;
  pointer-events:none;
}
.elementor-widget-heading.mur-case-tag .elementor-heading-title{
  display:inline-block;
  background:rgba(8,43,69,.75);
  color:var(--mur-ivory);
  font-size:11px;
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;
  line-height:1.5;
}
.mur-case-tag{
  position:absolute !important;
  bottom:14px;
  z-index:4;
  width:auto !important;
  pointer-events:none;
}
.mur-case-tag-a{ left:14px; }
.mur-case-tag-b{ right:14px; }
/* Cada etiqueta se ancla a su mitad del par. */
.mur-case-pair > .e-con{ position:relative; }

/* --------------------------------------------------------------------------
   11. Testimonios
   Siete tarjetas de video en una pista horizontal: tres a la vista, y las
   flechas corren la pista hasta las que faltan.
   -------------------------------------------------------------------------- */

/* La pista. El desplazamiento lo hace el propio contenedor y no un `transform`
   calculado en JavaScript: así el arrastre con el dedo, la rueda horizontal y
   el tabulador funcionan solos, y las flechas se limitan a llamar `scrollBy()`.

   `scroll-padding` alinea el frenado del `scroll-snap` con el borde de la caja;
   sin él, la tarjeta a la que se salta queda medio píxel recortada. */
.mur-testi-pista{
  /* Elementor deja sus contenedores en `flex-wrap:wrap`, y eso desarma la pista
     en cuanto una tarjeta no entra: en teléfono, donde cada una ocupa el 100%,
     las siete se envolvían en siete filas apiladas. No había scroll horizontal
     que correr y las flechas no movían nada. Con `nowrap` las siete quedan en
     una sola fila y lo que sobra se desplaza.

     La dirección no hace falta forzarla: medida en 1440, 1100, 900, 700 y 390px,
     Elementor la deja en `row` en todas. */
  flex-wrap:nowrap !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  /* La animación la pide el script en su `scrollBy` y no se declara también
     acá: con las dos, cualquier desplazamiento del navegador —un ancla, el
     tabulador— quedaría animado sin que nadie lo haya pedido. */
  scroll-padding-inline:0;
  /* Aire abajo para que la sombra y el foco del teclado no queden recortados
     por el `overflow`. */
  padding-bottom:4px !important;
  /* La barra de desplazamiento no aporta: la sección tiene sus flechas y el
     gesto de arrastrar sigue estando. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.mur-testi-pista::-webkit-scrollbar{ display:none; }

/* Tres a la vista. El ancho sale de descontar los dos huecos de 20px y repartir
   lo que queda: así la tercera tarjeta termina justo en el borde y la cuarta
   asoma recién al correr la pista. */
.mur-testi-pista > .e-con{
  flex:0 0 calc((100% - 40px) / 3);
  scroll-snap-align:start;
}

@media (max-width:1024px){
  .mur-testi-pista > .e-con{ flex-basis:calc((100% - 20px) / 2); }
}
@media (max-width:640px){
  .mur-testi-pista > .e-con{ flex-basis:100%; }
}

/* La tarjeta: la misma piel que las de «Casos», para que las dos secciones se
   lean como del mismo sitio. */
.mur-testi-card{
  border-radius:18px;
  overflow:hidden;
  transition:box-shadow .3s var(--mur-ease), transform .3s var(--mur-ease);
}
.mur-testi-card:hover{
  box-shadow:0 18px 40px rgba(8,43,69,.10);
  transform:translateY(-2px);
}

.mur-testi-nav .elementor-button{
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(8,43,69,.18);
  border-radius:50%;
  background:transparent;
  color:var(--mur-navy);
  font-size:16px;
  line-height:1;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.mur-testi-nav .elementor-button:hover{
  background:var(--mur-navy);
  border-color:var(--mur-navy);
  color:var(--mur-ivory);
}
.mur-testi-nav .elementor-button-text{ display:block; }
.mur-testi-nav .elementor-widget-button{ flex:0 0 auto; width:auto; }

/* La flecha que no lleva a ningún lado se apaga: con siete tarjetas y tres a la
   vista, hay dos posiciones donde una de las dos no hace nada. La clase la pone
   el script del header al mirar dónde quedó la pista. */
.mur-testi-nav .elementor-widget-button.is-off .elementor-button{
  opacity:.3;
  pointer-events:none;
}

/* ---- El video vertical de la reseña ----------------------------------------
   La tarjeta manda el ancho; la proporción 9:16 da el alto. */
.mur-testi-video{
  position:relative;
  width:100%;
  border-radius:12px;
  background-color:var(--mur-navy);
}

/* El widget HTML que lleva el reproductor no aporta caja: es la capa que cubre
   el hueco entero. */
.mur-testi-video .mur-testi-capa,
.mur-testi-video .mur-testi-capa > .elementor-widget-container{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
}

.mur-testi-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:12px;
}

/* El botón de reproducir: el disco de vidrio del resto del sitio, centrado. */
.mur-testi-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(246,241,232,.55);
  border-radius:50%;
  background:rgba(8,43,69,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--mur-ivory);
  cursor:pointer;
  padding:0;
  transition:background-color .25s var(--mur-ease), border-color .25s var(--mur-ease), transform .25s var(--mur-ease);
}
.mur-testi-play:hover,
.mur-testi-play:focus-visible{
  background:var(--mur-gold);
  border-color:var(--mur-gold);
  color:var(--mur-navy);
  transform:translate(-50%,-50%) scale(1.06);
}
.mur-testi-play-glifo{
  font-size:18px;
  line-height:1;
  margin-left:3px; /* el triángulo pesa a la izquierda: se centra ópticamente */
}

/* Mientras se reproduce, el botón se va. */
.mur-testi-video.is-playing .mur-testi-play{ opacity:0; pointer-events:none; }

/* ---- El hueco sin video ----------------------------------------------------
   Queda para el caso de que una reseña se cargue sin su archivo. */
.mur-testi-pendiente{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(8,43,69,.25) 0%, rgba(8,43,69,.72) 100%);
}
.mur-testi-play.is-off{
  position:static;
  transform:none;
  opacity:.45;
  cursor:default;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.mur-testi-falta{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,241,232,.82);
  text-align:center;
  padding:0 16px;
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.mur-faq-side{ position:sticky; top:110px; }
@media (max-width:1024px){
  .mur-faq-side{ position:static; }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.mur-footer{ border-top:1px solid rgba(246,241,232,.12); }
.mur-footer-logo img{ height:64px; width:auto; display:block; }
.mur-footer-nav .elementor-nav-menu--main .elementor-item{ padding:0; }
.mur-footer-nav .elementor-nav-menu--main li{ margin-bottom:12px; }
.mur-footer-nav .elementor-nav-menu--main li:last-child{ margin-bottom:0; }
.mur-footer-bottom{ border-top:1px solid rgba(246,241,232,.1); }

/* --------------------------------------------------------------------------
   14. Revelado al hacer scroll
   El script del header aplica los estilos inline; acá solo se declara la
   transición y se respeta la preferencia de movimiento reducido.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mur-reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* --------------------------------------------------------------------------
   15. Anclas: el header es fijo, hay que compensar el scroll
   -------------------------------------------------------------------------- */
#inicio, #programa, #modalidades, #casos, #testimonios, #faq, #cta{ scroll-margin-top:110px; }
@media (max-width:767px){
  #inicio, #programa, #modalidades, #casos, #testimonios, #faq, #cta{ scroll-margin-top:80px; }
}

/* --------------------------------------------------------------------------
   16. Ajustes de móvil (al final para ganar en orden de cascada)
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  /* El menú pasa a hamburguesa: el panel se ancla al header. */
  .mur-header .mur-nav .elementor-nav-menu--dropdown{
    background:rgba(8,43,69,.97);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(246,241,232,.12);
  }
  /* El botón del menú sobre el header claro. La regla que había acá
     —`color` en azul con el header ya scrolleado— nunca se aplicó: Elementor
     pinta el botón con el color del widget en una regla más pesada, y el ícono
     es un SVG que no toma `color` sino `fill`. Quedaba marfil sobre marfil:
     invisible al scrollear la home, y siempre en las páginas interiores, que
     arrancan con el header claro.

     De paso llega a 44px, que es lo mínimo para acertarle con el dedo. */
  .mur-header .mur-nav .elementor-menu-toggle{
    min-width:44px;
    min-height:44px;
    border-radius:10px;
  }
  body.mur-scrolled .mur-header .mur-nav .elementor-menu-toggle{
    background:rgba(8,43,69,.06) !important;
    color:var(--mur-navy) !important;
  }
  body.mur-scrolled .mur-header .mur-nav .elementor-menu-toggle svg{ fill:var(--mur-navy) !important; }
  body.mur-scrolled .mur-header .mur-nav .elementor-menu-toggle:hover,
  body.mur-scrolled .mur-header .mur-nav .elementor-menu-toggle:focus-visible{ background:rgba(8,43,69,.12) !important; }
  .elementor-widget-accordion.mur-acc-programa .elementor-tab-content{ padding-left:0; }
}
@media (max-width:767px){
  .mur-logo img{ height:44px; }
  .mur-footer-logo img{ height:52px; }
  /* En teléfono el video va solo en su fila; el tope evita que, en uno ancho,
     mida más que la pantalla. */
  .mur-presentacion .mur-testi-video{ max-width:380px; margin-inline:auto; }
  .mur-prog-stats{ left:14px; right:14px; bottom:14px; }
  .elementor-widget-accordion.mur-acc-programa .elementor-tab-title{ grid-template-columns:1fr 24px; gap:10px; }
  .elementor-widget-accordion.mur-acc-programa .mur-mod-n{ grid-column:1 / -1; padding-top:0; }
}

/* Debajo de 600px el CTA del header se oculta para que el logo y la
   hamburguesa respiren; el hero ofrece los dos CTA justo debajo. */
@media (max-width:599px){
  .mur-header .mur-header-cta{ display:none; }
}

/* --------------------------------------------------------------------------
   17. Popup de aplicación
   El formulario de admisión del prototipo anterior con el lenguaje visual
   nuevo: panel azul con la introducción y tarjeta blanca con los campos.
   El CSS del widget de formulario se imprime DESPUÉS del CSS del sitio, así
   que las reglas que compiten con él repiten `.elementor-widget-form`.
   -------------------------------------------------------------------------- */
/* El scroll vive dentro del popup, no en la página de atrás. El redondeo va
   acá: el fondo de este container tapaba las esquinas de la caja del popup. */
.mur-apply{
  max-height:92dvh;
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:20px;
}

/* Botón de cierre montado sobre la esquina: dentro de la caja quedaría fijo
   sobre el formulario y los campos pasarían por debajo al scrollear. Así solo
   pisa el padding de la tarjeta. El prefijo `body` gana a los .elementor-kit-7es que
   imprime el propio documento popup. */
body .mur-apply-modal .dialog-close-button{
  top:-18px;
  inset-inline-end:-18px;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(246,241,232,.3);
  border-radius:50%;
  opacity:1;
  transition:background-color .2s ease, color .2s ease;
}

/* Panel azul: la nota 01 queda siempre al pie. */
.mur-apply-note{
  margin-top:auto;
  border-top:1px solid rgba(246,241,232,.16);
}

/* Campos */
.mur-apply-form .elementor-widget-form .elementor-field-group .elementor-field-textual{
  min-height:42px;
  padding:9px 14px;
  transition:border-color .2s ease, background-color .2s ease;
}
.mur-apply-form .elementor-widget-form .elementor-field-group .elementor-field-textual:focus{
  border-color:var(--mur-navy);
  background:var(--mur-card);
  outline:0;
  box-shadow:none;
}
/* «Años de experiencia» es un número suelto: las flechas del spinner sobran. */
.mur-apply-form .elementor-field-group-experiencia input{
  appearance:textfield;
  -moz-appearance:textfield;
}
.mur-apply-form .elementor-field-group-experiencia input::-webkit-outer-spin-button,
.mur-apply-form .elementor-field-group-experiencia input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Modalidad: dos tarjetas seleccionables, como las de la sección Modalidades.
   El radio real queda oculto y la etiqueta hace de tarjeta. */
.mur-apply-form .elementor-field-group-modalidad .elementor-field-subgroup{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:100%;
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option{
  position:relative;
  display:block;
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
}
.mur-apply-form .elementor-widget-form .elementor-field-group-modalidad .elementor-field-subgroup label{
  display:block;
  min-height:0;
  padding:12px 42px 12px 16px;
  border:1px solid rgba(41,48,51,.14);
  border-radius:12px;
  background:var(--mur-bg);
  cursor:pointer;
  transition:border-color .22s ease, background-color .22s ease;
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option label::after{
  content:"";
  position:absolute;
  top:14px;
  right:16px;
  width:14px;
  height:14px;
  border:1px solid rgba(41,48,51,.3);
  border-radius:50%;
  background:var(--mur-card);
  transition:background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option strong{
  display:block;
  margin-bottom:4px;
  color:var(--mur-navy);
  font-family:Manrope,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option small{
  display:block;
  color:var(--mur-muted);
  font-size:12.5px;
  line-height:1.45;
}
/* Presencial toma el champagne y virtual el azul mineral. */
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option:first-child input:checked + label{
  border-color:var(--mur-gold);
  background:rgba(197,163,106,.12);
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option:first-child input:checked + label::after{
  border-color:var(--mur-gold);
  background:var(--mur-gold);
  box-shadow:inset 0 0 0 3px var(--mur-card);
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option:last-child input:checked + label{
  border-color:var(--mur-mineral);
  background:rgba(46,127,140,.1);
}
.mur-apply-form .elementor-field-group-modalidad .elementor-field-option:last-child input:checked + label::after{
  border-color:var(--mur-mineral);
  background:var(--mur-mineral);
  box-shadow:inset 0 0 0 3px var(--mur-card);
}
.mur-apply-form .elementor-field-group-modalidad input:focus-visible + label{
  outline:2px solid var(--mur-gold);
  outline-offset:3px;
}

/* Declaración */
.mur-apply-form .elementor-field-group-declaracion .elementor-field-option{
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.mur-apply-form .elementor-widget-form .elementor-field-group-declaracion label{
  color:var(--mur-muted);
  font-family:Manrope,sans-serif;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.55;
  text-transform:none;
}
.mur-apply-form .elementor-field-group-declaracion input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  accent-color:var(--mur-navy);
}

/* Botón de envío: ancho completo con el rodillo y la flecha del resto del sitio. */
.mur-apply-form .elementor-field-type-submit{ margin-top:4px; }
.mur-apply-form .elementor-widget-form .elementor-button{ width:100%; }
.mur-apply-form .elementor-widget-form .elementor-button-content-wrapper{ justify-content:center; }

/* Mensajes */
.mur-apply-form .elementor-message{
  margin-top:6px;
  font-family:Manrope,sans-serif;
}
.mur-apply-form .elementor-message.elementor-message-success{
  padding:16px 18px;
  border:1px solid rgba(46,127,140,.28);
  border-radius:12px;
  background:rgba(46,127,140,.08);
}

@media (max-width:1024px){
  /* En una sola columna la nota deja de empujarse al pie. */
  .mur-apply-note{ margin-top:24px; }
}
@media (max-width:767px){
  .mur-apply-form .elementor-field-group-modalidad .elementor-field-subgroup{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   18. Páginas interiores
   La home empieza con el hero bajo el header fijo; el resto de las páginas
   (dashboard y cursos de Tutor LMS, legales…) necesitan dejarle el alto libre.
   El header ya arranca sólido ahí: lo marca el script del header.
   -------------------------------------------------------------------------- */
body:not(.home){ padding-top:92px; }
@media (max-width:1024px){ body:not(.home){ padding-top:88px; } }
@media (max-width:767px){ body:not(.home){ padding-top:68px; } }

/* --------------------------------------------------------------------------
   19. Menú del alumno logueado
   Lo imprime el mu-plugin `mur-alumno.php` dentro del widget del CTA del
   header, así que el botón hereda solo con las reglas de la sección 2 y estas
   cubren nada más el desplegable y la fila que los junta.
   -------------------------------------------------------------------------- */
.mur-cuenta{
  display:flex;
  align-items:center;
  gap:10px;
}

.mur-cuenta-menu{ position:relative; }

/* El triángulo nativo del <summary> se apaga en los dos motores. */
.mur-cuenta-menu summary{ list-style:none; cursor:pointer; }
.mur-cuenta-menu summary::-webkit-details-marker{ display:none; }

/* El botón del desplegable es el hermano discreto del CTA: mismo alto y mismo
   redondeo, pero contorno en vez de relleno, para que el CTA siga siendo el que
   manda. */
.mur-cuenta-boton{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  border:1px solid rgba(246,241,232,.35);
  border-radius:10px;
  font-family:Manrope,sans-serif;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
  color:var(--mur-ivory);
  transition:color .2s ease, border-color .2s ease;
}
.mur-cuenta-boton:hover{ color:var(--mur-gold); border-color:var(--mur-gold); }
.mur-cuenta-boton:focus-visible{ outline:2px solid var(--mur-gold); outline-offset:2px; }

/* Sobre el header sólido todo el contenido invierte color, igual que el logo,
   el menú y el CTA. */
body.mur-scrolled .mur-cuenta-boton{
  color:var(--mur-navy);
  border-color:rgba(8,43,69,.28);
}
body.mur-scrolled .mur-cuenta-boton:hover{
  color:var(--mur-gold);
  border-color:var(--mur-gold);
}

/* Un nombre largo no puede empujar la hamburguesa fuera de la pantalla. */
.mur-cuenta-nombre{
  max-width:12ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* La inicial: un disco con la primera letra del nombre. En el escritorio le da
   al botón un ancla junto al nombre; por debajo de 600px, donde el nombre se
   esconde, es lo único que queda para que el desplegable no sea un chevron
   flotando solo. No es el avatar que el spec deja afuera: no trae foto, no pide
   una consulta más y no depende de que el alumno haya subido nada. */
.mur-cuenta-inicial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(246,241,232,.14);
  font-size:11px;
  font-weight:700;
  line-height:1;
  transition:background-color .2s ease;
}
body.mur-scrolled .mur-cuenta-inicial{ background:rgba(8,43,69,.08); }

/* El chevron de la marca, dibujado con dos bordes: gira al abrir. */
.mur-cuenta-chevron{
  width:7px;
  height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--mur-ease);
}
.mur-cuenta-menu[open] .mur-cuenta-chevron{ transform:translateY(1px) rotate(225deg); }

/* El panel repite el vidrio azul del menú hamburguesa de la sección 16, que es
   el desplegable que el sitio ya tiene. */
.mur-cuenta-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  min-width:196px;
  padding:8px;
  border:1px solid rgba(246,241,232,.14);
  border-radius:12px;
  background:rgba(8,43,69,.97);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -18px rgba(8,43,69,.5);
}
/* El prefijo del panel no es decorativo: el Kit de Elementor imprime
   `.elementor-kit-N a{ color:#082B45 }`, que pesa (0,1,1). Una clase sola pesa
   (0,1,0), así que `.mur-cuenta-item` sola pierde y los tres enlaces salen
   azules sobre el panel azul —invisibles en reposo, y visibles solo al pasar el
   cursor, porque `:hover` suma un peso y ahí sí gana—. Con el padre delante
   valen (0,2,0) y la cascada queda del lado correcto. */
.mur-cuenta-panel .mur-cuenta-item{
  padding:11px 12px;
  border-radius:8px;
  font-family:Manrope,sans-serif;
  font-weight:500;
  font-size:13px;
  line-height:1.3;
  color:rgba(246,241,232,.85);
  transition:background-color .2s ease, color .2s ease;
}
.mur-cuenta-panel .mur-cuenta-item:hover,
.mur-cuenta-panel .mur-cuenta-item:focus-visible{
  background:var(--mur-gold);
  color:var(--mur-navy);
}

/* La ficha corona el panel. El botón del header muestra solo el nombre de pila,
   y con dos cuentas abiertas en el mismo navegador —le pasa a quien prueba el
   sitio— el correo es lo único que dice cuál de las dos está abierta. No es un
   enlace, así que no toma el hover de la lista. */
.mur-cuenta-ficha{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:4px;
  padding:8px 12px 12px;
  border-bottom:1px solid rgba(246,241,232,.12);
}
.mur-cuenta-ficha-nombre{
  font-family:Manrope,sans-serif;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
  color:var(--mur-ivory);
}

/* Un correo largo no puede ensanchar el panel hasta salirse de la pantalla. */
.mur-cuenta-ficha-mail{
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:Manrope,sans-serif;
  font-weight:500;
  font-size:11px;
  line-height:1.4;
  color:rgba(246,241,232,.55);
}

/* Cerrar sesión es la única entrada del panel que no lleva a ninguna parte: va
   detrás de una línea para que no se toque de paso al bajar hacia «Mis datos».
   La línea se tiñe con el hover para que no parta el bloque dorado en dos. */
.mur-cuenta-panel .mur-cuenta-salir{
  margin-top:6px;
  padding-top:12px;
  border-top:1px solid rgba(246,241,232,.12);
  color:rgba(246,241,232,.62);
}
.mur-cuenta-panel .mur-cuenta-salir:hover,
.mur-cuenta-panel .mur-cuenta-salir:focus-visible{ border-top-color:var(--mur-gold); }

/* Por debajo de 600px la sección 16 esconde el CTA porque el hero ofrece los dos
   botones justo debajo. Para un alumno esos botones son de venta, así que se le
   devuelve el suyo: sin esto se queda sin ningún camino al curso desde el
   teléfono. El mu-plugin marca el `<body>` solo cuando el botón pasó a ser el
   del alumno. */
@media (max-width:599px){
  body.mur-alumno-cta .mur-header .mur-header-cta{ display:block; }

  /* En esa franja conviven logo, botón, desplegable y hamburguesa: el nombre es
     lo primero que sobra. El `aria-label` del <summary> lo sigue nombrando para
     quien usa lector de pantalla. */
  .mur-cuenta{ gap:6px; }
  .mur-cuenta-nombre{ display:none; }

  /* Sin el nombre el botón queda en la inicial y el chevron: se le saca el
     ancho sobrante para que no parezca un recuadro vacío, y el correo de la
     ficha se acorta a lo que entra en un teléfono. */
  .mur-cuenta-boton{ gap:6px; padding:9px 10px; }
  .mur-cuenta-ficha-mail{ max-width:168px; }
}

/* --------------------------------------------------------------------------
   20. Acuse del popup de aplicación
   El script del popup marca el widget con `mur-apply-enviada` al llegar el
   mensaje de éxito de Elementor. A partir de ahí los campos se van y ese mismo
   mensaje ocupa el panel: la aplicación se manda una sola vez, así que dejar el
   formulario lleno abajo solo invita a mandarla de nuevo.
   El mensaje de ERROR no entra acá a propósito: ahí los campos tienen que
   seguir en pantalla para poder reintentar.
   -------------------------------------------------------------------------- */
.mur-apply-enviada .elementor-form-fields-wrapper{ display:none; }

.mur-apply-enviada .elementor-message-success{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:38px 32px;
  border:1px solid rgba(46,127,140,.22);
  border-radius:14px;
  background:rgba(46,127,140,.05);
  font-family:Manrope,sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--mur-muted);
  text-align:left;
}

/* El tilde que Elementor ya imprime, agrandado y puesto arriba en su disco en
   vez de colgando del renglón.
   `background-color` y NO el atajo `background`: Elementor dibuja el tilde con
   un SVG en `background-image` —de ahí la clase `elementor-message-svg`— y el
   atajo se lo borra. El disco queda vacío y el acuse pierde su única señal
   visual de que salió bien. */
.mur-apply-enviada .elementor-message-success::before{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0;
  border-radius:50%;
  background-color:rgba(46,127,140,.12);
  /* El tilde propio: el de Elementor viene en su verde de fábrica, que al lado
     del mineral de la marca se lee como de otro sitio. Va como data URI porque
     es `background-image` y `color` no lo alcanza. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7F8C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
  font-size:20px;
  color:var(--mur-mineral);
}

.mur-apply-titulo{
  font-family:Switzer,sans-serif;
  font-weight:600;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--mur-navy);
}

@media (max-width:767px){
  .mur-apply-enviada .elementor-message-success{ padding:30px 24px; }
  .mur-apply-titulo{ font-size:21px; }
}

/* --------------------------------------------------------------------------
   21. El paso siguiente en el acuse de Virtual
   Solo aparece cuando el puente contestó: el script marca el widget con
   `mur-apply-virtual`. La sección 20 ya puso el panel; esto le suma el precio,
   la nota y el botón.
   -------------------------------------------------------------------------- */
.mur-apply-virtual .mur-apply-paso{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  width:100%;
  margin-top:6px;
  padding-top:18px;
  border-top:1px solid rgba(46,127,140,.22);
}

.mur-apply-virtual .mur-apply-precio{
  font-family:Switzer,sans-serif;
  font-weight:600;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--mur-navy);
}

.mur-apply-virtual .mur-apply-nota{
  font-family:Manrope,sans-serif;
  font-weight:400;
  font-size:13px;
  line-height:1.5;
  color:var(--mur-muted);
}

/* El botón repite el CTA marfil del sitio, en su versión sólida: es la acción
   que cierra el popup, así que tiene que ganarle al resto del panel. */
.mur-apply-virtual .mur-apply-continuar{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
  padding:13px 20px;
  border-radius:10px;
  background:var(--mur-navy);
  font-family:Manrope,sans-serif;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
  color:var(--mur-ivory);
  transition:background-color .2s ease, color .2s ease;
}
.mur-apply-virtual .mur-apply-continuar:hover,
.mur-apply-virtual .mur-apply-continuar:focus-visible{
  background:var(--mur-gold);
  color:var(--mur-navy);
}

@media (max-width:767px){
  .mur-apply-virtual .mur-apply-precio{ font-size:22px; }
  .mur-apply-virtual .mur-apply-continuar{ width:100%; justify-content:center; }
}

/* --------------------------------------------------------------------------
   22. El aula del alumno — la ficha del curso
   La imprime Tutor LMS y la cierra `mur-curso.php`: acá solo se la viste. El
   `body.mur-aula` lo pone ese mismo mu-plugin, así que nada de esto toca otra
   página del sitio — y borrarlo devuelve la ficha de Tutor tal cual, sin que
   quede una regla suelta pintando algo ajeno.
   -------------------------------------------------------------------------- */

/* Aire arriba y abajo. La plantilla de Tutor no trae ninguno de los dos: el
   título arrancaba pegado al header fijo y el último módulo del temario
   terminaba cortado al ras contra el footer, sin un píxel de separación. */
body.mur-aula .tutor-page-wrap{
  padding-top:36px;
  padding-bottom:112px;
  background:var(--mur-bg);
}

/* Los íconos de Tutor, a salvo de la tipografía del sitio.

   Son una fuente de íconos: un `font-family` que caiga sobre ellos los deja en
   un cuadrito vacío. Tutor los defiende con un `!important` propio, pero le
   gana en especificidad cualquier .elementor-kit-7 que empiece por `body.mur-aula`, así
   que hace falta devolvérselos desde acá.

   Va arriba de todo y en las dos secciones porque es una red, no un parche: las
   reglas de abajo evitan pisarlos una por una con `:not([class*="tutor-icon"])`,
   y esto atrapa la que se escape. */
body.mur-aula [class*="tutor-icon-"],
body.mur-clase [class*="tutor-icon-"]{
  font-family:tutor !important;
}

/* Lo que en el aula no va. Quien está acá ya compró: una lista de deseos y un
   «compartir» son de una página de venta, y «completar curso» le deja marcarse
   el curso terminado sin haber visto una clase. */
body.mur-aula .tutor-course-wishlist-btn,
body.mur-aula .tutor-course-share-btn,
body.mur-aula .tutor-social-share-wrap,
body.mur-aula .tutor-btn-outline-primary{ display:none !important; }

/* ---- La cabecera, como banda -----------------------------------------------
   Era un título gris de 24px sobre blanco, indistinguible del resto de la
   página: el alumno entraba al aula y no había nada que le dijera dónde estaba.
   Pasa a ser la única banda oscura de la página, con el mismo azul, el mismo
   redondeo y la misma tipografía que el hero de la home. */
body.mur-aula .tutor-course-details-header{
  background:var(--mur-navy);
  border-radius:20px;
  padding:52px 48px 44px;
  margin-bottom:36px !important;
  position:relative;
  overflow:hidden;
}

/* El velo dorado de la esquina: el mismo gesto del hero, en chico. Va en un
   pseudo-elemento para no pedirle a Tutor una capa que su plantilla no tiene. */
body.mur-aula .tutor-course-details-header::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(197,163,106,.22) 0%, rgba(197,163,106,0) 70%);
  pointer-events:none;
}

body.mur-aula .tutor-course-details-title{
  font-family:Switzer,sans-serif !important;
  font-size:clamp(30px,3.2vw,46px) !important;
  font-weight:600 !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  color:var(--mur-ivory) !important;
  margin:0 0 4px !important;
  position:relative;
  z-index:1;
}

/* La fila de metadatos —«Categorías: Contorno facial»— sobre el azul. El
   rótulo en salvia y el enlace en dorado, que es el par que el sitio ya usa
   para cualquier dato secundario sobre fondo oscuro. */
body.mur-aula .tutor-course-details-header .tutor-course-details-top{
  position:relative;
  z-index:1;
}
body.mur-aula .tutor-course-details-header .tutor-meta,
body.mur-aula .tutor-course-details-header .tutor-meta *:not([class*="tutor-icon"]){
  font-family:Manrope,sans-serif !important;
  font-size:13px !important;
  color:var(--mur-sage) !important;
}
body.mur-aula .tutor-course-details-header .tutor-meta a{
  color:var(--mur-gold) !important;
  text-decoration:none;
}
body.mur-aula .tutor-course-details-header .tutor-meta a:hover{
  color:var(--mur-gold-2) !important;
  text-decoration:underline;
}

/* ---- La foto del curso -----------------------------------------------------
   Venía como un bloque de 848×710 sin recortar: media pantalla ocupada por una
   sola imagen antes de llegar al temario, que es a lo que el alumno vino. Se
   recorta a una proporción ancha y se le da el mismo redondeo que a cualquier
   otra foto del sitio. */
body.mur-aula .tutor-course-thumbnail{
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:16/9;
}
body.mur-aula .tutor-course-thumbnail img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  border-radius:0 !important;
}

/* ---- Las solapas ----------------------------------------------------------- */
body.mur-aula .tutor-nav{
  border-bottom:1px solid rgba(8,43,69,.10) !important;
}
body.mur-aula .tutor-nav-link{
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  color:var(--mur-muted) !important;
  border-bottom:2px solid transparent !important;
  transition:color .2s ease, border-color .2s ease;
}
body.mur-aula .tutor-nav-link.is-active,
body.mur-aula .tutor-nav-link:hover{
  color:var(--mur-navy) !important;
  border-bottom-color:var(--mur-gold) !important;
}

/* La barra de solapas se pega arriba al scrollear, y por debajo le pasaba el
   contenido sin fondo que lo tapara. Además tiene que quedar por debajo del
   header fijo del sitio, no encima. */
body.mur-aula .tutor-course-details-tab .tutor-is-sticky{
  top:92px !important;
  z-index:5 !important;
  background:var(--mur-bg);
}

/* ---- Los títulos del contenido --------------------------------------------- */
body.mur-aula .tutor-course-details-tab h3,
body.mur-aula .tutor-course-details-tab h4,
body.mur-aula .tutor-course-details-widget-title,
body.mur-aula .tutor-card-title{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  color:var(--mur-navy) !important;
}

body.mur-aula .tutor-course-details-tab p,
body.mur-aula .tutor-course-details-tab li{
  font-family:Manrope,sans-serif !important;
  color:var(--mur-muted) !important;
  line-height:1.75 !important;
}

/* ---- El temario ------------------------------------------------------------
   Ocho módulos, uno abierto. Cada cabecera es la unidad que el alumno recorre
   con la vista: va en tarjeta, con el mismo borde y el mismo redondeo que las
   fichas del resto del sitio, y el que está abierto se marca en azul. */
body.mur-aula .tutor-accordion-item{
  border:1px solid rgba(8,43,69,.10) !important;
  border-radius:14px !important;
  overflow:hidden;
  margin-bottom:12px !important;
  background:var(--mur-card);
}
body.mur-aula .tutor-accordion-item-header{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  font-size:16px !important;
  color:var(--mur-navy) !important;
  padding:18px 22px !important;
  background:var(--mur-card) !important;
  border:0 !important;
  transition:background-color .2s ease;
}
body.mur-aula .tutor-accordion-item-header:hover{
  background:var(--mur-bg-alt) !important;
}
body.mur-aula .tutor-accordion-item-header.is-active{
  background:rgba(8,43,69,.05) !important;
  color:var(--mur-navy) !important;
}

/* Las clases dentro del módulo: una lista tranquila, con el título en grafito y
   el ícono de tipo en salvia. El ojo de «vista previa» no compite: quien está
   acá ya tiene acceso a todas.

   El `:not([class*="tutor-icon"])` que aparece acá y en otras cuatro reglas de
   estas dos secciones no es cosmético: los íconos de Tutor son una fuente de
   íconos, y un `font-family` puesto sobre el contenedor los deja en cuadrito
   vacío. Tutor los defiende con un `!important` propio, pero cualquiera de
   estos .elementor-kit-7es le gana en especificidad. La salida es no tocarlos, no
   repararlos después. */
body.mur-aula .tutor-course-content-list-item{
  border-top:1px solid rgba(8,43,69,.06) !important;
  padding:14px 22px !important;
  transition:background-color .2s ease;
}
body.mur-aula .tutor-course-content-list-item:hover{
  background:var(--mur-bg-alt) !important;
}
body.mur-aula .tutor-course-content-list-item a,
body.mur-aula .tutor-course-content-list-item span:not([class*="tutor-icon"]){
  font-family:Manrope,sans-serif !important;
  font-size:14px !important;
  color:var(--mur-graphite) !important;
}
body.mur-aula .tutor-course-content-list-item i,
body.mur-aula .tutor-course-content-list-item svg{
  color:var(--mur-sage) !important;
  opacity:.9;
}

/* ---- «¿Qué aprenderás?» ----------------------------------------------------
   Venía como una caja blanca con cuatro renglones grises y un punto delante:
   lo más importante que la ficha tiene para decir, con el peso de una nota al
   pie. Pasa a ser el panel azul del sitio —el mismo del popup y del footer—,
   con cada resultado en su celda y un tilde dorado en vez del punto.

   Va con las dos clases, `…-widget` y `…-widget-col-2`: la primera sola la
   comparten las fichas de la columna derecha, que siguen claras, y su regla
   está más abajo con el mismo peso. Sin la segunda clase ganaba ella y el
   panel quedaba blanco con el texto marfil encima: invisible. */
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2{
  padding:32px 32px 34px !important;
  border:0 !important;
  border-radius:16px !important;
  background:var(--mur-navy) !important;
}
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-title{
  margin:0 0 22px !important;
  font-size:24px !important;
  line-height:1.15 !important;
  color:var(--mur-ivory) !important;
}
/* El filete dorado de los antetítulos del sitio, arriba del título. */
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-title::before{
  content:"";
  display:block;
  width:36px;
  height:2px;
  margin-bottom:16px;
  background:var(--mur-gold);
}
/* Tutor reparte la lista en dos columnas de texto (`column-count`), que cortan
   por donde caiga el alto: con cuatro ítems de largo distinto quedaban
   desparejas. En grilla, cada ítem es una celda y las filas alinean. */
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-list{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:0 !important;
  padding:0 !important;
  column-count:auto !important;
  columns:auto !important;
}
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-list li{
  align-items:flex-start;
  gap:14px;
  /* Tutor les da medio ancho para sus dos columnas: en la grilla, medio de
     medio. */
  width:auto !important;
  margin:0 !important;
  padding:16px 18px;
  border:1px solid rgba(246,241,232,.14);
  border-radius:12px;
  background:rgba(246,241,232,.05);
  color:var(--mur-ivory) !important;
  font-size:15.5px !important;
  font-weight:500;
  line-height:1.5 !important;
  break-inside:avoid;
}
/* Son siete: el último queda solo en su fila y la ocupa entera, en vez de dejar
   media grilla vacía a su lado. */
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-list li:last-child:nth-child(odd){
  grid-column:1 / -1;
}
/* El punto pasa a ser un tilde en un círculo dorado. Dibujado con máscara, como
   el de «Te inscribiste en este curso»: el `::before` deja de pedirle un
   carácter a la fuente de íconos, y el elemento conserva su clase. */
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-icon-bullet-point{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin:0 !important;
  border-radius:50%;
  background:var(--mur-gold);
  color:var(--mur-navy) !important;
  font-size:13px !important;
}
body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-icon-bullet-point::before{
  content:"" !important;
  display:block;
  width:1em;
  height:1em;
  background-color:currentColor;
  -webkit-mask:var(--mur-tilde) center/contain no-repeat;
          mask:var(--mur-tilde) center/contain no-repeat;
}
@media (max-width:767px){
  body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2{ padding:24px 20px 26px !important; }
  body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-title{ font-size:21px !important; }
  body.mur-aula .tutor-course-details-widget.tutor-course-details-widget-col-2 .tutor-course-details-widget-list{ grid-template-columns:minmax(0, 1fr); }
}

/* ---- La columna de la derecha ---------------------------------------------- */

/* Las tarjetas repiten la ficha del sitio: fondo claro, borde fino, esquinas
   iguales a las del resto. */
body.mur-aula .tutor-course-details-widget,
body.mur-aula .tutor-course-details-instructors,
body.mur-aula .tutor-sidebar-card{
  border:1px solid rgba(8,43,69,.10) !important;
  border-radius:16px !important;
  background:var(--mur-card) !important;
  box-shadow:none !important;
}
body.mur-aula .tutor-sidebar-card .tutor-card-body,
body.mur-aula .tutor-sidebar-card .tutor-card-footer{
  background:transparent !important;
}
body.mur-aula .tutor-sidebar-card .tutor-card-footer{
  border-top:1px solid rgba(8,43,69,.08) !important;
}

/* El ícono de «Te inscribiste en este curso el …» salía como un cuadrito vacío:
   Tutor declara `tutor-icon-purchase-mark` en su CSS de íconos pero el glifo no
   está en el `.woff` que termina cargando —el plugin registra dos `@font-face`
   con el mismo nombre de familia y gana el segundo—.

   Antes se lo escondía. Ahora se lo dibuja: el `::before` deja de pedir un
   carácter a la fuente y pasa a ser una caja pintada con `currentColor` y
   recortada por una máscara SVG de un tilde en un círculo. No depende de
   ninguna fuente, así que tampoco se rompe si Tutor arregla o vuelve a romper
   la suya. El elemento conserva su clase y su `font-family: tutor`: para la
   comprobación de íconos del aula sigue siendo un ícono de Tutor sano. */
body.mur-aula .tutor-icon-purchase-mark::before{
  content:"" !important;
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* El ritmo vertical de la columna.

   Tutor reparte la separación entre estos bloques con clases sueltas
   (`tutor-mt-24`, `tutor-mt-32`) que no están en todos: según el estado del
   visitante —inscripto, instructor, sin comprar— unas se imprimen y otras no, y
   las fichas terminan pegadas una contra otra sin un píxel de separación. En
   vez de perseguir cada clase se le da el ritmo al contenedor y se anulan los
   márgenes de adentro: así la separación es la misma para todos los estados. */
body.mur-aula .tutor-single-course-sidebar,
body.mur-aula .tutor-single-course-sidebar-more{
  display:flex;
  flex-direction:column;
  gap:20px;
}
body.mur-aula .tutor-single-course-sidebar > *,
body.mur-aula .tutor-single-course-sidebar-more > *{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* La tarjeta del progreso acompaña al alumno mientras recorre el temario. */
body.mur-aula .tutor-single-course-sidebar{
  position:sticky;
  top:124px;
}

/* El cuerpo de la tarjeta de arriba, cuando no tiene nada que decir.

   Quien dicta el curso no lo puede comprar, así que Tutor le imprime la tarjeta
   con el cuerpo vacío: un rectángulo blanco de 40px colgado arriba de todo. Se
   colapsa el cuerpo —no la tarjeta— porque el pie sí tiene contenido («Experto»)
   y tiene que seguir viéndose.

   Vacío acá quiere decir «sin precio y sin ningún botón»: mientras haya
   cualquiera de los dos, la tarjeta se dibuja entera. */
body.mur-aula .tutor-sidebar-card .tutor-card-body:not(:has(form)):not(:has(.tutor-course-sidebar-card-pricing)):not(:has(.tutor-progress-bar)){
  display:none !important;
}

/* El botón que arranca la clase es la acción principal del aula: va en el azul
   de la marca, con el mismo redondeo y el mismo dorado al pasar el cursor que
   el resto del sitio, en vez del azul violeta de fábrica de Tutor. */
body.mur-aula .tutor-btn-primary{
  background-color:var(--mur-navy) !important;
  border-color:var(--mur-navy) !important;
  border-radius:10px !important;
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  letter-spacing:0 !important;
  color:var(--mur-ivory) !important;
  transition:background-color .2s ease, color .2s ease !important;
}
body.mur-aula .tutor-btn-primary:hover,
body.mur-aula .tutor-btn-primary:focus-visible{
  background-color:var(--mur-gold) !important;
  border-color:var(--mur-gold) !important;
  color:var(--mur-navy) !important;
}

/* La barra de progreso: el mineral que el sitio usa para lo que salió bien, en
   vez del verde de fábrica. */
body.mur-aula .tutor-progress-bar span,
body.mur-aula .tutor-progress-bar .tutor-progress-value{
  background-color:var(--mur-mineral) !important;
}

/* La línea «Te inscribiste en este curso el …» venía en el verde de aviso de
   Tutor, que en esta paleta no existe y leía como una alerta. Es un dato, no
   una alarma. */
body.mur-aula .tutor-color-success:not([class*="tutor-icon"]),
body.mur-aula .tutor-course-enrolled-info,
body.mur-aula .tutor-course-enrolled-info *:not([class*="tutor-icon"]){
  color:var(--mur-muted) !important;
  font-family:Manrope,sans-serif !important;
  font-size:13px !important;
}
/* El ícono de esa misma línea lleva también `tutor-color-success`. Sin el
   `:not()` de arriba, la regla le imponía Manrope con la misma especificidad
   que la que defiende a los íconos, y por venir después ganaba: el cuadrito
   vacío de siempre. Mientras el ícono estuvo escondido no se notaba. Acá
   recibe el color y el tamaño del texto, pero no la tipografía. */
body.mur-aula .tutor-color-success[class*="tutor-icon"]{
  color:var(--mur-muted) !important;
  font-size:13px !important;
}
body.mur-aula .tutor-course-enrolled-info strong,
body.mur-aula .tutor-course-enrolled-info b{
  color:var(--mur-navy) !important;
}

/* Los enlaces del temario y del docente, en el azul de la marca y no en el
   violeta de Tutor. */
body.mur-aula a{ color:var(--mur-navy); }
body.mur-aula a:hover{ color:var(--mur-gold); }

/* El avatar genérico del docente: el círculo relleno de Tutor con la inicial
   del usuario. El nombre ya lo arregla el mu-plugin; el disco se alinea con el
   de la cuenta del header. */
body.mur-aula .tutor-avatar,
body.mur-aula .tutor-avatar .tutor-ratio,
body.mur-aula .tutor-avatar-text{
  background-color:rgba(8,43,69,.08) !important;
  background-image:none !important;
  color:var(--mur-navy) !important;
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
}

@media (max-width:1199px){
  body.mur-aula .tutor-single-course-sidebar{ position:static; }
}

@media (max-width:767px){
  body.mur-aula .tutor-course-details-header{ padding:36px 24px 30px; }
  body.mur-aula .tutor-page-wrap{ padding-top:20px; padding-bottom:72px; }
}

/* --------------------------------------------------------------------------
   23. La clase — la pantalla de estudio

   El `body.mur-clase` lo pone `mur-curso.php` en la clase, el cuestionario y la
   tarea, que comparten esta plantilla.

   El defecto que se corrige acá es de estructura, no de color: Tutor le da al
   área de estudio `min-height` de una pantalla entera y a la barra lateral
   `position:sticky` con la altura estirada a esa medida. El resultado es que el
   menú del temario se come la pantalla aunque la clase tenga dos párrafos, y
   deja un vacío entre el final del contenido y el footer. Acá la barra vuelve a
   ser una columna más: fluye con la página, mide lo que mide su contenido, y la
   página termina donde termina la clase.
   -------------------------------------------------------------------------- */

/* La raíz del defecto: sin este `min-height`, el alto de la pantalla lo decide
   el contenido y no el viewport. */
body.mur-clase .tutor-learning-area{
  min-height:0 !important;
  height:auto !important;
  background:var(--mur-bg);
}

body.mur-clase .tutor-learning-sidebar-curriculum{
  border:1px solid rgba(8,43,69,.10);
  border-radius:16px;
  background:var(--mur-card);
}

/* ---- Solo de 992px para arriba -------------------------------------------
   Todo lo estructural va acotado al escritorio, que es donde está el defecto:
   en pantalla chica Tutor no muestra dos columnas sino un panel que entra
   deslizándose, y ese panel necesita su `position` para salir de la caja.
   Sacándosela —como pasó en la primera versión de esto— el panel se planta al
   lado del contenido y la página entera queda al doble de ancho que la
   pantalla, con scroll horizontal. */
@media (min-width:992px){

  /* La barra lateral deja de estar pegada y de tener su propio scroll: es una
     columna normal, tan alta como su temario. */
  body.mur-clase .tutor-learning-sidebar{
    position:static !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding-bottom:16px !important;
  }
  body.mur-clase .tutor-learning-sidebar-curriculum{
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }
  body.mur-clase .tutor-learning-nav{
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }
  body.mur-clase .tutor-learning-sidebar-pages{
    position:static !important;
  }

  /* El área de contenido: el ancho de lectura del resto del sitio y aire
     suficiente para que una clase corta no parezca una página rota. */
  body.mur-clase .tutor-learning-area-content{
    min-height:420px;
    padding:8px 24px 48px 8px !important;
  }
  body.mur-clase .tutor-learning-area-container{
    max-width:820px;
  }
}

/* El encabezado de la clase sigue pegado arriba —es de donde se vuelve al
   curso— pero por debajo del header fijo del sitio, no encima. */
body.mur-clase .tutor-learning-header{
  top:92px !important;
  z-index:4 !important;
  background:var(--mur-bg) !important;
  border-bottom:1px solid rgba(8,43,69,.08);
}
body.mur-clase .tutor-learning-header-title{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  color:var(--mur-navy) !important;
}

/* El temario del costado, en la piel del sitio. */
body.mur-clase .tutor-learning-nav-topic-title,
body.mur-clase .tutor-learning-nav-topic > button{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  color:var(--mur-navy) !important;
}
body.mur-clase .tutor-learning-nav-item,
body.mur-clase .tutor-learning-nav-item *:not([class*="tutor-icon"]){
  font-family:Manrope,sans-serif !important;
  font-size:13.5px !important;
  color:var(--mur-graphite) !important;
}
body.mur-clase .tutor-learning-nav-item:hover{
  background:var(--mur-bg-alt) !important;
}

/* La clase que se está viendo: el filete dorado del sitio, no el violeta. */
body.mur-clase .tutor-learning-nav-item.active,
body.mur-clase .tutor-learning-nav-item.is-active{
  background:rgba(8,43,69,.05) !important;
  border-left:3px solid var(--mur-gold) !important;
}

body.mur-clase .tutor-learning-progress *:not([class*="tutor-icon"]){
  font-family:Manrope,sans-serif !important;
  color:var(--mur-muted) !important;
}
body.mur-clase .tutor-progress-bar span,
body.mur-clase .tutor-progress-bar .tutor-progress-value{
  background-color:var(--mur-mineral) !important;
}

/* El botón de «pantalla completa» de Tutor, que escondía la barra lateral.
   Existía para recuperar la pantalla que se comía un panel pegado de alto
   completo — que es justamente lo que se acaba de sacar. Con la barra en flujo
   normal el botón además queda roto: Tutor la corre con un `transform`, que no
   libera el espacio que ocupaba, y el área de lectura se va con ella. Se quita
   el botón y no el `transform` porque lo que sobra es la función, no el gesto.

   Se evaluó reponerlo (27/09) y no vale la pena: la clase está topeada a 820px
   —ver `.tutor-learning-area-container` más arriba—, así que esconder el
   temario no le da ni un píxel más de lectura, solo la corre al centro. Y el
   botón vive al pie de la barra: con trece clases en el temario, queda fuera
   de la pantalla. */
body.mur-clase .tutor-learning-sidebar > button.tutor-btn-icon{
  display:none !important;
}

/* El título de la clase, que lo pone `mur-curso.php`: la plantilla de Tutor no
   lo imprime en ninguna parte. */
body.mur-clase .mur-clase-titulo{
  font-family:Switzer,sans-serif;
  font-size:clamp(26px,2.4vw,34px);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--mur-navy);
  margin:0 0 22px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(8,43,69,.10);
}

/* La clase sin material cargado. Tutor no imprime nada en ese caso —ni el
   título—, así que el bloque entero lo pone `mur-curso.php`. */
body.mur-clase .mur-clase-vacia{
  background:var(--mur-card);
  border:1px solid rgba(8,43,69,.10);
  border-radius:16px;
  padding:32px 32px 28px;
  margin-bottom:8px;
}
body.mur-clase .mur-clase-vacia-texto{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:15px;
  line-height:1.75;
  color:var(--mur-muted);
}

/* El cuerpo de la clase. */
body.mur-clase .tutor-lesson-content h1,
body.mur-clase .tutor-lesson-content h2,
body.mur-clase .tutor-lesson-content h3{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  color:var(--mur-navy) !important;
}
body.mur-clase .tutor-lesson-content p,
body.mur-clase .tutor-lesson-content li{
  font-family:Manrope,sans-serif !important;
  font-size:16px !important;
  line-height:1.8 !important;
  color:var(--mur-graphite) !important;
}

/* La barra de «Marcar como completo / Siguiente». */
body.mur-clase .tutor-learning-area-footer{
  background:var(--mur-bg) !important;
  border-top:1px solid rgba(8,43,69,.08);
}
body.mur-clase .tutor-btn-primary{
  background-color:var(--mur-navy) !important;
  border-color:var(--mur-navy) !important;
  border-radius:10px !important;
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
  color:var(--mur-ivory) !important;
}
body.mur-clase .tutor-btn-primary:hover{
  background-color:var(--mur-gold) !important;
  border-color:var(--mur-gold) !important;
  color:var(--mur-navy) !important;
}
body.mur-clase a{ color:var(--mur-navy); }
body.mur-clase a:hover{ color:var(--mur-gold); }

/* En pantalla angosta Tutor ya despliega la barra como panel deslizante: no se
   le toca nada estructural —ver el bloque de arriba— y solo se ajusta el aire
   del contenido. */
@media (max-width:991px){
  body.mur-clase .tutor-learning-area-content{ padding:8px 12px 40px !important; }

  /* «Anterior · Marcar como completo · Siguiente» suman 395px de contenido en
     una fila de 358 que Tutor deja en `nowrap`: el tercer botón se salía de la
     pantalla y arrastraba a la página entera al scroll horizontal. Se los deja
     envolver, que es lo que corresponde a 390px de ancho. */
  body.mur-clase .tutor-learning-area-footer{
    flex-wrap:wrap !important;
    row-gap:10px;
    column-gap:8px;
  }
  body.mur-clase .tutor-learning-area-footer > *{ min-width:0; }
}

/* --------------------------------------------------------------------------
   24. El panel del alumno

   La pantalla a la que cae el alumno al entrar. El `body.mur-panel` lo pone
   `mur-curso.php`; que el header y el footer del sitio aparezcan acá lo
   consiguen dos opciones de Tutor que enciende `13-curso.php` —sin ellas esta
   pantalla no tiene ni logo ni forma de volver al sitio—.

   Todo lo de abajo es piel: colores, tipografías y bordes. La estructura es la
   de Tutor y no se toca.
   -------------------------------------------------------------------------- */

/* Los íconos de Tutor, a salvo de la tipografía del sitio. Misma red que en las
   secciones 22 y 23: un `font-family` impuesto los deja en cuadrito vacío. */
body.mur-panel [class*="tutor-icon-"]{ font-family:tutor !important; }

body.mur-panel .tutor-dashboard-layout,
body.mur-panel .tutor-account-page-wrapper{
  background:var(--mur-bg);
}

/* ---- La barra lateral ------------------------------------------------------ */
body.mur-panel .tutor-dashboard-permalinks a,
body.mur-panel .tutor-dashboard-menu-item a,
body.mur-panel .tutor-dashboard-sidebar a{
  font-family:Manrope,sans-serif !important;
  font-weight:500 !important;
  color:var(--mur-graphite) !important;
  border-radius:10px;
  transition:background-color .2s ease, color .2s ease;
}
body.mur-panel .tutor-dashboard-permalinks a:hover,
body.mur-panel .tutor-dashboard-menu-item a:hover{
  background:var(--mur-bg-alt) !important;
  color:var(--mur-navy) !important;
}

/* La sección en la que está parado: el azul de la marca, no el violeta. */
body.mur-panel .tutor-dashboard-permalinks .active a,
body.mur-panel .tutor-dashboard-menu-item.active a,
body.mur-panel .tutor-dashboard-menu-item.is-active a,
body.mur-panel [class*="tutor-dashboard"] a[aria-current="page"]{
  background:rgba(8,43,69,.06) !important;
  color:var(--mur-navy) !important;
  font-weight:600 !important;
}

/* ---- Títulos y saludo ------------------------------------------------------ */
body.mur-panel h1,
body.mur-panel h2,
body.mur-panel h3,
body.mur-panel h4,
body.mur-panel h5,
body.mur-panel .tutor-dashboard-title{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  color:var(--mur-navy) !important;
}

body.mur-panel p,
body.mur-panel li,
body.mur-panel td,
body.mur-panel th,
body.mur-panel label,
body.mur-panel span:not([class*="tutor-icon"]){
  font-family:Manrope,sans-serif !important;
}

/* ---- Las tarjetas de resumen ----------------------------------------------- */
body.mur-panel .tutor-card,
body.mur-panel .tutor-dashboard-content-inner > .tutor-card,
body.mur-panel [class*="tutor-dashboard"] .tutor-card{
  border:1px solid rgba(8,43,69,.10) !important;
  border-radius:16px !important;
  background:var(--mur-card) !important;
  box-shadow:none !important;
}

/* Los números salían cada uno de un color —azul, turquesa, verde, naranja—,
   que es la paleta de Tutor y no la del sitio. Van todos en el azul de la
   marca: lo que distingue a cada tarjeta es su rótulo, no su color. */
body.mur-panel .tutor-fs-3,
body.mur-panel .tutor-fs-4,
body.mur-panel [class*="tutor-color-"]:not([class*="tutor-icon"]){
  color:var(--mur-navy) !important;
}
body.mur-panel .tutor-color-muted,
body.mur-panel .tutor-color-secondary{
  color:var(--mur-muted) !important;
}

/* ---- Botones y enlaces ----------------------------------------------------- */
body.mur-panel .tutor-btn-primary{
  background-color:var(--mur-navy) !important;
  border-color:var(--mur-navy) !important;
  border-radius:10px !important;
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
  color:var(--mur-ivory) !important;
  transition:background-color .2s ease, color .2s ease !important;
}
body.mur-panel .tutor-btn-primary:hover,
body.mur-panel .tutor-btn-primary:focus-visible{
  background-color:var(--mur-gold) !important;
  border-color:var(--mur-gold) !important;
  color:var(--mur-navy) !important;
}
body.mur-panel a{ color:var(--mur-navy); }
body.mur-panel a:hover{ color:var(--mur-gold); }

/* ---- La barra de progreso -------------------------------------------------- */
body.mur-panel .tutor-progress-bar span,
body.mur-panel .tutor-progress-bar .tutor-progress-value,
body.mur-panel .tutor-progress-bar-fill{
  background-color:var(--mur-mineral) !important;
}

/* ---- El disco de la cuenta -------------------------------------------------- */
body.mur-panel .tutor-avatar,
body.mur-panel .tutor-avatar .tutor-ratio,
body.mur-panel .tutor-avatar-text{
  background-color:rgba(8,43,69,.08) !important;
  background-image:none !important;
  color:var(--mur-navy) !important;
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
}

/* El panel se dibuja a lo alto de la ventana y debajo del header fijo: sin
   este tope, su barra lateral se mete por detrás del header. */
body.mur-panel .tutor-dashboard-layout,
body.mur-panel .tutor-account-page-wrapper{
  padding-bottom:64px;
}

/* Los cuatro números del resumen venían cada uno de un color distinto —azul,
   turquesa, verde y naranja, la paleta de Tutor—. La clase es la misma en los
   cuatro (`tutor-stat-card-value`) y el color se lo da una variable por
   tarjeta, así que se pisa acá: lo que distingue a cada tarjeta es su rótulo,
   no su color. */
body.mur-panel .tutor-stat-card-value{
  color:var(--mur-navy) !important;
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
}

/* El ítem del menú donde está parado el alumno. Tutor lo marca con un celeste
   propio; va el azul de la marca con su filete dorado, igual que el temario de
   la clase. */
body.mur-panel .tutor-dashboard-menu-item.active,
body.mur-panel li.active > a,
body.mur-panel [class*="menu"] .active{
  background:rgba(8,43,69,.06) !important;
  color:var(--mur-navy) !important;
}

/* «Explorar cursos», al pie de la barra lateral, lleva a `/courses/`, que está
   cerrado para todos: el alumno caía en una pantalla de acceso denegado. Hay un
   solo curso y ya está en la portada. */
body.mur-panel .tutor-see-all-courses{ display:none !important; }

/* ---- La portada (`mur-alumno.php`, sección 6) ------------------------------
   Reemplaza la de Tutor: el estado de la inscripción mientras se verifica la
   matrícula, y el curso mismo cuando ya hay acceso. */
.mur-inicio{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,300px);
  gap:20px;
  align-items:start;
}
.mur-inicio--sin-inscripcion{ grid-template-columns:minmax(0,1fr); }
/* Con acceso, la banda del curso va a lo ancho y abajo se reparten el temario
   y los datos útiles. */
.mur-inicio-curso{ grid-column:1 / -1; }

.mur-inicio-tarjeta{
  border:1px solid rgba(8,43,69,.10);
  border-radius:16px;
  background:var(--mur-card);
  padding:28px;
}

body.mur-panel .mur-inicio-antetitulo{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mur-mineral);
}
body.mur-panel .mur-inicio-titulo{
  margin:0 0 12px;
  font-size:28px;
  line-height:1.15;
}
body.mur-panel .mur-inicio-subtitulo{
  margin:0 0 18px;
  font-size:16px;
  line-height:1.3;
}
body.mur-panel .mur-inicio-bajada{
  margin:0;
  max-width:56ch;
  font-size:15px;
  line-height:1.6;
  color:var(--mur-muted);
}

/* ---- El botón: el mismo CTA del sitio, sin el rodillo ---------------------- */
body.mur-panel .mur-inicio-boton{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding:12px 14px 12px 20px;
  border-radius:10px;
  background:var(--mur-navy);
  font-family:Manrope,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  color:var(--mur-ivory);
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
body.mur-panel .mur-inicio-boton:hover,
body.mur-panel .mur-inicio-boton:focus-visible{
  background:var(--mur-gold);
  color:var(--mur-navy);
}
body.mur-panel .mur-inicio-boton:hover .mur-arrow{ transform:translate(2px,-2px); }
body.mur-panel .mur-inicio-boton--claro{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:18px;
  padding:11px 20px;
  border:1px solid rgba(8,43,69,.25);
  background:transparent;
  color:var(--mur-navy);
}
body.mur-panel .mur-inicio-boton--claro:hover,
body.mur-panel .mur-inicio-boton--claro:focus-visible{
  border-color:var(--mur-navy);
  background:var(--mur-navy);
  color:var(--mur-ivory);
}

/* ---- Los pasos de la inscripción ------------------------------------------- */
.mur-inicio-pasos{
  list-style:none;
  margin:28px 0 0;
  padding:0;
}
.mur-inicio-paso{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:14px;
  padding-bottom:22px;
}
.mur-inicio-paso:last-child{ padding-bottom:0; }
/* El hilo que une los pasos: sale de debajo de cada marca y llega a la
   siguiente. En el último no hay a dónde ir. */
.mur-inicio-paso:not(:last-child)::before{
  content:'';
  position:absolute;
  left:10px;
  top:24px;
  bottom:2px;
  width:2px;
  border-radius:2px;
  background:rgba(8,43,69,.10);
}
.mur-inicio-paso.is-hecho:not(:last-child)::before{ background:var(--mur-navy); }
body.mur-panel .mur-inicio-paso strong{
  display:block;
  font-size:15px;
  font-weight:600;
  line-height:22px;
  color:var(--mur-navy);
}
body.mur-panel .mur-inicio-paso span:not(.mur-inicio-marca){
  display:block;
  margin-top:2px;
  font-size:13px;
  line-height:1.5;
  color:var(--mur-muted);
}
.mur-inicio-paso:not(.is-hecho):not(.is-actual):not(.is-error) strong{ color:var(--mur-muted); }

/* La marca de cada paso y de cada módulo: vacía si falta, azul con tilde si
   está hecho, dorada con un punto si es donde está parado, roja si se cortó.
   El tilde y la cruz son máscaras, como la flecha de los botones, para que
   ningún sistema los cambie por un emoji. */
.mur-inicio-marca{
  position:relative;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid rgba(8,43,69,.18);
  background:var(--mur-card);
  box-sizing:border-box;
}
.is-hecho > .mur-inicio-marca{
  border-color:var(--mur-navy);
  background:var(--mur-navy);
}
.is-hecho > .mur-inicio-marca::after,
.is-error > .mur-inicio-marca::after{
  content:'';
  width:10px;
  height:10px;
  background:var(--mur-ivory);
  -webkit-mask:var(--mur-tilde) center/contain no-repeat;
          mask:var(--mur-tilde) center/contain no-repeat;
}
.is-actual > .mur-inicio-marca{ border-color:var(--mur-gold); }
.is-actual > .mur-inicio-marca::after{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mur-gold);
  animation:mur-inicio-latido 2s ease-in-out infinite;
}
.is-error > .mur-inicio-marca{
  border-color:#b42318;
  background:#b42318;
}
.is-error > .mur-inicio-marca::after{
  -webkit-mask-image:var(--mur-cruz);
          mask-image:var(--mur-cruz);
}
@keyframes mur-inicio-latido{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.6); opacity:.55; }
}
@media (prefers-reduced-motion:reduce){
  .is-actual > .mur-inicio-marca::after{ animation:none; }
}

/* ---- La ficha lateral ------------------------------------------------------ */
.mur-inicio-ficha dl{ margin:0; }
.mur-inicio-ficha dl > div{
  padding:12px 0;
  border-top:1px solid rgba(8,43,69,.08);
}
.mur-inicio-ficha dl > div:first-child{ padding-top:0; border-top:0; }
body.mur-panel .mur-inicio-ficha dt{
  margin:0 0 2px;
  font-family:Manrope,sans-serif;
  font-size:12px;
  color:var(--mur-muted);
}
body.mur-panel .mur-inicio-ficha dd,
body.mur-panel .mur-inicio-ficha dd span{
  margin:0;
  font-family:Manrope,sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--mur-navy);
}
body.mur-panel .mur-inicio-nota{
  margin:18px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--mur-muted);
}
body.mur-panel .mur-inicio-nota a{ text-decoration:underline; text-underline-offset:2px; }

.mur-inicio-datos{
  list-style:none;
  margin:0;
  padding:0;
}
body.mur-panel .mur-inicio-datos li{
  padding:12px 0;
  border-top:1px solid rgba(8,43,69,.08);
  font-size:13px;
  line-height:1.55;
  color:var(--mur-muted);
}
body.mur-panel .mur-inicio-datos li:first-child{ padding-top:0; border-top:0; }
body.mur-panel .mur-inicio-datos strong{ color:var(--mur-navy); font-weight:600; }
body.mur-panel .mur-inicio-datos a{ text-decoration:underline; text-underline-offset:2px; }

/* ---- Con acceso: la banda del curso ---------------------------------------
   El azul de la cabecera del aula: el alumno reconoce el curso antes de leer
   el título. */
.mur-inicio-curso{
  border-radius:16px;
  background:var(--mur-navy);
  padding:32px;
}
body.mur-panel .mur-inicio-curso .mur-inicio-antetitulo{ color:var(--mur-gold); }
body.mur-panel .mur-inicio-curso .mur-inicio-titulo{
  margin-bottom:24px;
  font-size:32px;
  color:var(--mur-ivory) !important;
}
.mur-inicio-avance{ max-width:520px; }
.mur-inicio-avance-cifras{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:10px;
}
body.mur-panel .mur-inicio-avance-cifras strong{
  font-family:Switzer,sans-serif;
  font-size:28px;
  font-weight:600;
  line-height:1;
  color:var(--mur-ivory);
}
body.mur-panel .mur-inicio-avance-cifras span{
  font-size:13px;
  color:rgba(246,241,232,.7);
}
.mur-inicio-barra{
  height:6px;
  border-radius:6px;
  background:rgba(246,241,232,.16);
  overflow:hidden;
}
.mur-inicio-barra span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--mur-gold);
}
body.mur-panel .mur-inicio-sigue{
  margin:18px 0 0;
  font-size:14px;
  color:rgba(246,241,232,.85);
}
/* Sobre el azul, el botón se invierte: marfil, y dorado al pasar. */
body.mur-panel .mur-inicio-curso .mur-inicio-boton{
  background:var(--mur-ivory);
  color:var(--mur-navy);
}
body.mur-panel .mur-inicio-curso .mur-inicio-boton:hover,
body.mur-panel .mur-inicio-curso .mur-inicio-boton:focus-visible{
  background:var(--mur-gold);
}
.mur-inicio-boton .mur-arrow{ background:rgba(8,43,69,.10); }
body.mur-panel .mur-inicio-estado .mur-inicio-boton .mur-arrow{ background:rgba(246,241,232,.16); }

/* ---- El temario ------------------------------------------------------------ */
.mur-inicio-temario ol{
  list-style:none;
  margin:0;
  padding:0;
}
.mur-inicio-modulo{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid rgba(8,43,69,.08);
}
.mur-inicio-modulo:first-child{ padding-top:0; border-top:0; }
.mur-inicio-modulo:last-child{ padding-bottom:0; }
body.mur-panel .mur-inicio-modulo-numero{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mur-muted);
}
body.mur-panel .mur-inicio-modulo strong{
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:var(--mur-navy);
}
body.mur-panel .mur-inicio-modulo-avance{
  font-size:12px;
  white-space:nowrap;
  color:var(--mur-muted);
}
body.mur-panel .mur-inicio-modulo.is-actual .mur-inicio-modulo-avance{
  padding:3px 10px;
  border-radius:999px;
  background:rgba(197,163,106,.18);
  font-weight:600;
  color:var(--mur-navy);
}

@media (max-width:1024px){
  .mur-inicio{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  .mur-inicio-tarjeta,
  .mur-inicio-curso{ padding:22px; }
  body.mur-panel .mur-inicio-titulo{ font-size:24px; }
  body.mur-panel .mur-inicio-curso .mur-inicio-titulo{ font-size:26px; }
  body.mur-panel .mur-inicio-boton:not(.mur-inicio-boton--claro){ width:100%; justify-content:space-between; }
}

/* --------------------------------------------------------------------------
   25. Casos clínicos

   Cada panel es una imagen ya compuesta —el antes y el después juntos, con sus
   rótulos quemados— así que acá no se recorta nada: el contenedor la muestra
   entera sobre negro, que es el mismo fondo que traen las fotos.
   -------------------------------------------------------------------------- */
/* La pista de cada caso. Mismo mecanismo que la de las reseñas: el scroll lo
   hace el contenedor, y las flechas del rótulo solo llaman `scrollBy()`. El
   `nowrap` es lo que la sostiene —Elementor deja sus contenedores en `wrap` y
   sin esto los paneles se apilarían en vez de correrse—. */
.mur-caso-pista{
  flex-wrap:nowrap !important;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.mur-caso-pista::-webkit-scrollbar{ display:none; }

/* Un panel a la vista por caso. Los casos tienen entre 1 y 6 paneles: con
   todos en fila, el de seis se estiraba a dos renglones y descolocaba la
   columna de al lado. Con la pista, cada bloque mide lo mismo y el que tiene
   más se recorre con sus flechas. */
.mur-caso-pista > .e-con{
  flex:0 0 100%;
  scroll-snap-align:start;
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
  min-height:0;
}

.mur-caso-rotulo{ width:100% !important; }
.mur-caso-n .elementor-heading-title{ text-transform:uppercase; }

/* Las flechas de cada caso: el mismo disco que las de las reseñas, en chico. */
.mur-caso-nav .elementor-button{
  width:34px;
  height:34px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(8,43,69,.18);
  border-radius:50%;
  background:transparent;
  color:var(--mur-navy);
  font-size:13px;
  line-height:1;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.mur-caso-nav .elementor-button:hover{
  background:var(--mur-navy);
  border-color:var(--mur-navy);
  color:var(--mur-ivory);
}
.mur-caso-nav .elementor-button-text{ display:block; }
.mur-caso-nav .elementor-widget-button{ flex:0 0 auto; width:auto; }
.mur-caso-nav .elementor-widget-button.is-off .elementor-button{
  opacity:.3;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   26. Los controles del video

   El `<video>` va sin el atributo `controls`: la barra que trae cada navegador
   es distinta —Chrome la pinta gris, Safari translúcida, Firefox le suma su
   menú— y ninguna se parece al sitio. Esta la imprime `home.php` y la maneja el
   script del header.
   -------------------------------------------------------------------------- */
.mur-video-ctrl{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(8,43,69,.62);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(246,241,232,.18);
}
.mur-video-ctrl[hidden]{ display:none; }

.mur-video-toggle,
.mur-video-sonido{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--mur-ivory);
  font-size:11px;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.mur-video-toggle:hover,
.mur-video-sonido:hover,
.mur-video-toggle:focus-visible,
.mur-video-sonido:focus-visible{
  background:var(--mur-gold);
  color:var(--mur-navy);
}
.mur-video-sonido.is-muted{ opacity:.6; }

.mur-video-tiempo{
  flex:0 0 auto;
  font-family:Manrope,sans-serif;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:rgba(246,241,232,.9);
  white-space:nowrap;
}

/* El deslizador. Va como `<input type="range">` —trae el arrastre, las flechas
   del teclado y el rol de deslizador sin JavaScript— y se le saca la piel del
   navegador para dibujar la del sitio. El relleno de lo ya visto se hace con un
   degradado duro hasta `--mur-avance`, que escribe el script. */
.mur-video-barra{
  flex:1 1 auto;
  min-width:0;
  height:4px;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border-radius:2px;
  background:linear-gradient(
    to right,
    var(--mur-gold) 0%,
    var(--mur-gold) var(--mur-avance,0%),
    rgba(246,241,232,.28) var(--mur-avance,0%),
    rgba(246,241,232,.28) 100%
  );
  cursor:pointer;
}
.mur-video-barra::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--mur-ivory);
  border:0;
  cursor:pointer;
}
.mur-video-barra::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--mur-ivory);
  border:0;
  cursor:pointer;
}
.mur-video-barra:focus-visible{
  outline:2px solid var(--mur-gold);
  outline-offset:3px;
}

/* --------------------------------------------------------------------------
   27. Las pantallas de WooCommerce: checkout, carrito y «Mi cuenta»

   Las imprime WooCommerce con su hoja de estilos —botón violeta, tablas de
   bordes grises, el menú de la cuenta como lista de viñetas subrayada y sin
   ancho de caja— y es la única parte del recorrido que no se parece al sitio.
   Justo donde el comprador entrega su matrícula y sus datos.

   El `body.mur-tienda` lo pone `mur-checkout.php`: borrarlo devuelve las
   pantallas de WooCommerce tal cual venían.
   -------------------------------------------------------------------------- */

/* La caja. Estas páginas salen a lo ancho del navegador porque el tema no les
   da contenedor; se les da el mismo de 1200px que usa el resto del sitio, con
   aire arriba —el header es fijo— y abajo, que terminaban al ras del footer. */
body.mur-tienda .site-main,
body.mur-tienda .woocommerce-account,
body.mur-tienda .entry-content{
  max-width:1200px;
  margin-inline:auto;
  padding:40px 24px 96px;
}

body.mur-tienda .site-main{ background:var(--mur-bg); }

/* ---- Títulos y textos ------------------------------------------------------ */
body.mur-tienda h1,
body.mur-tienda h2,
body.mur-tienda h3,
body.mur-tienda .woocommerce-column__title,
body.mur-tienda #order_review_heading{
  font-family:Switzer,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  color:var(--mur-navy) !important;
}
body.mur-tienda h1{ font-size:clamp(28px,3vw,40px) !important; line-height:1.1 !important; }
body.mur-tienda h2,
body.mur-tienda h3,
body.mur-tienda #order_review_heading{ font-size:20px !important; line-height:1.25 !important; }

body.mur-tienda p,
body.mur-tienda td,
body.mur-tienda th,
body.mur-tienda label,
body.mur-tienda li{
  font-family:Manrope,sans-serif;
  color:var(--mur-graphite);
}

body.mur-tienda a{ color:var(--mur-navy); }
body.mur-tienda a:hover{ color:var(--mur-gold); }

/* ---- Campos ---------------------------------------------------------------- */
body.mur-tienda .woocommerce form .form-row label,
body.mur-tienda .woocommerce-billing-fields label,
body.mur-tienda label{
  font-family:Manrope,sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--mur-navy) !important;
  margin-bottom:6px !important;
}

body.mur-tienda input[type="text"],
body.mur-tienda input[type="email"],
body.mur-tienda input[type="tel"],
body.mur-tienda input[type="password"],
body.mur-tienda input[type="number"],
body.mur-tienda textarea,
body.mur-tienda select,
body.mur-tienda .select2-container .select2-selection--single{
  font-family:Manrope,sans-serif !important;
  font-size:15px !important;
  color:var(--mur-graphite) !important;
  background:var(--mur-card) !important;
  border:1px solid rgba(8,43,69,.16) !important;
  border-radius:10px !important;
  padding:11px 14px !important;
  min-height:46px;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
body.mur-tienda textarea{ min-height:96px; }

body.mur-tienda input:focus,
body.mur-tienda textarea:focus,
body.mur-tienda select:focus{
  outline:none !important;
  border-color:var(--mur-navy) !important;
  box-shadow:0 0 0 3px rgba(8,43,69,.10) !important;
}

/* El asterisco de obligatorio: en rojo de sistema desentona con toda la paleta
   y además no hace falta gritarlo — el campo ya lo dice al enviar. */
body.mur-tienda .required,
body.mur-tienda abbr.required{
  color:var(--mur-gold) !important;
  border:0 !important;
  text-decoration:none !important;
}

/* ---- Botones --------------------------------------------------------------- */
body.mur-tienda .button,
body.mur-tienda button.button,
body.mur-tienda a.button,
body.mur-tienda input.button,
body.mur-tienda #place_order,
body.mur-tienda .woocommerce-button{
  font-family:Manrope,sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--mur-ivory) !important;
  background:var(--mur-navy) !important;
  border:1px solid var(--mur-navy) !important;
  border-radius:10px !important;
  padding:13px 22px !important;
  box-shadow:none !important;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.mur-tienda .button:hover,
body.mur-tienda button.button:hover,
body.mur-tienda a.button:hover,
body.mur-tienda #place_order:hover,
body.mur-tienda .woocommerce-button:hover{
  background:var(--mur-gold) !important;
  border-color:var(--mur-gold) !important;
  color:var(--mur-navy) !important;
}

/* El de «Realizar el pedido» es la acción que cierra la compra: va a lo ancho
   de su caja y un punto más grande que el resto. */
body.mur-tienda #place_order{
  width:100%;
  padding:16px 22px !important;
  font-size:15px !important;
}

/* ---- Avisos ---------------------------------------------------------------- */
body.mur-tienda .woocommerce-info,
body.mur-tienda .woocommerce-message,
body.mur-tienda .woocommerce-error,
body.mur-tienda .woocommerce-notice{
  font-family:Manrope,sans-serif !important;
  font-size:14px !important;
  background:var(--mur-card) !important;
  color:var(--mur-graphite) !important;
  border:1px solid rgba(8,43,69,.12) !important;
  border-top:0 !important;
  border-left:3px solid var(--mur-navy) !important;
  border-radius:10px !important;
  padding:16px 20px !important;
}
body.mur-tienda .woocommerce-error{ border-left-color:#B3261E !important; }
body.mur-tienda .woocommerce-message{ border-left-color:var(--mur-mineral) !important; }
body.mur-tienda .woocommerce-info::before,
body.mur-tienda .woocommerce-message::before,
body.mur-tienda .woocommerce-error::before{ display:none !important; }

/* ---- Tablas ---------------------------------------------------------------- */
body.mur-tienda table.shop_table,
body.mur-tienda table.woocommerce-orders-table,
body.mur-tienda table.woocommerce-table{
  border:1px solid rgba(8,43,69,.10) !important;
  border-radius:14px !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
  background:var(--mur-card);
}
body.mur-tienda table.shop_table th,
body.mur-tienda table.woocommerce-orders-table th{
  font-family:Manrope,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mur-muted) !important;
  background:var(--mur-bg-alt) !important;
  border:0 !important;
  padding:14px 18px !important;
}
body.mur-tienda table.shop_table td,
body.mur-tienda table.woocommerce-orders-table td{
  font-family:Manrope,sans-serif !important;
  font-size:14px !important;
  color:var(--mur-graphite) !important;
  border:0 !important;
  border-top:1px solid rgba(8,43,69,.08) !important;
  padding:16px 18px !important;
}
body.mur-tienda table.shop_table tfoot th,
body.mur-tienda table.shop_table tfoot td{
  background:transparent !important;
  color:var(--mur-navy) !important;
  font-weight:600 !important;
  text-transform:none;
  letter-spacing:0;
  font-size:15px !important;
}

/* ---- «Mi cuenta» ------------------------------------------------------------
   El menú era una lista de viñetas con los enlaces subrayados. Pasa a ser la
   columna de navegación que la pantalla necesita, con la misma ficha que las
   tarjetas del aula. */
body.mur-tienda .woocommerce-account .woocommerce{
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:36px;
  align-items:start;
}

body.mur-tienda .woocommerce-MyAccount-navigation{
  border:1px solid rgba(8,43,69,.10);
  border-radius:16px;
  background:var(--mur-card);
  padding:10px;
}
body.mur-tienda .woocommerce-MyAccount-navigation ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
body.mur-tienda .woocommerce-MyAccount-navigation li{
  list-style:none !important;
  margin:0 !important;
}
body.mur-tienda .woocommerce-MyAccount-navigation a{
  display:block;
  font-family:Manrope,sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--mur-graphite);
  text-decoration:none !important;
  padding:11px 14px;
  border-radius:10px;
  transition:background-color .2s ease, color .2s ease;
}
body.mur-tienda .woocommerce-MyAccount-navigation a:hover{
  background:var(--mur-bg-alt);
  color:var(--mur-navy);
}
body.mur-tienda .woocommerce-MyAccount-navigation li.is-active a{
  background:rgba(8,43,69,.06);
  color:var(--mur-navy);
  font-weight:600;
}

body.mur-tienda .woocommerce-MyAccount-content{ min-width:0; }

@media (max-width:767px){
  body.mur-tienda .woocommerce-account .woocommerce{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
}

/* ---- Checkout ---------------------------------------------------------------
   Las clases van PEGADAS (`body.mur-tienda.woocommerce-checkout`) y no separadas
   por un espacio: `woocommerce-checkout` la pone WooCommerce en el propio
   `<body>`, asi que con espacio el .elementor-kit-7 busca un descendiente que no existe
   y no aplica nada.

   Dos columnas: los datos a la izquierda, el pedido y el pago a la derecha, en
   una tarjeta que acompaña al scroll. En una sola columna, el comprador llena
   doce campos sin ver nunca cuánto va a pagar. */
body.mur-tienda.woocommerce-checkout form.checkout{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,0.75fr);
  gap:48px;
  align-items:start;
}
/* Las cuatro piezas van colocadas a mano. Dejadas al acomodo automático, cada
   una cae en la primera celda libre: el bloque de credenciales se iba a la
   columna derecha y el pedido bajaba una fila entera, quedando a la altura del
   pie del formulario en vez de arriba.

   `#customer_details` ocupa las dos primeras filas para que la primera pueda
   ser `min-content` —del alto del título «Tu pedido» y nada más— y el pedido
   arranque pegado a él.

   La segunda fila es `1fr` y no `auto` por eso mismo. Con dos filas `auto`, el
   navegador reparte entre las dos lo que al formulario le sobra, y la del
   título crecía a 213px para un texto de 25: quedaba un hueco de un cuarto de
   pantalla entre «Tu pedido» y la tarjeta. Un ítem que cruza una fila `fr` no
   participa del cálculo de las filas intrínsecas, así que el sobrante lo
   absorbe entero la segunda. */
body.mur-tienda.woocommerce-checkout form.checkout{
  grid-template-rows:min-content 1fr auto;
}
body.mur-tienda.woocommerce-checkout #customer_details{ grid-column:1; grid-row:1 / span 2; }
body.mur-tienda.woocommerce-checkout .mur-credenciales{ grid-column:1; grid-row:3; }
body.mur-tienda.woocommerce-checkout #order_review_heading{ grid-column:2; grid-row:1; }
body.mur-tienda.woocommerce-checkout #order_review{ grid-column:2; grid-row:2; }

body.mur-tienda.woocommerce-checkout #order_review{
  border:1px solid rgba(8,43,69,.10);
  border-radius:16px;
  background:var(--mur-card);
  padding:22px;
  position:sticky;
  top:120px;
}
body.mur-tienda.woocommerce-checkout #order_review table.shop_table{
  border:0 !important;
  border-radius:0 !important;
}

/* Las dos columnas internas de los datos de facturación las arma WooCommerce
   con su propia grilla; acá solo se las apila, que con la caja a 1,25fr no
   entran de a dos sin apretarse. */
body.mur-tienda.woocommerce-checkout .col2-set,
body.mur-tienda.woocommerce-checkout .col2-set .col-1,
body.mur-tienda.woocommerce-checkout .col2-set .col-2{
  width:100% !important;
  float:none !important;
  margin:0 !important;
}

@media (max-width:1024px){
  body.mur-tienda.woocommerce-checkout form.checkout{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
  }
  body.mur-tienda.woocommerce-checkout #customer_details,
  body.mur-tienda.woocommerce-checkout #order_review_heading,
  body.mur-tienda.woocommerce-checkout #order_review{ grid-column:1; }
  body.mur-tienda.woocommerce-checkout #order_review{ position:static; }
}

/* El bloque de credenciales profesionales: es el que justifica todo el gate.

   El `grid-column:1` no es decorativo. Lo imprime `mur-checkout.php` en
   `woocommerce_checkout_after_customer_details`, o sea como hijo directo del
   formulario, asi que la grilla lo mandaba solo a la primera celda libre —la
   columna derecha, arriba del pedido—, separado de los campos que completa y
   dejando un hueco enorme del otro lado. */
body.mur-tienda.woocommerce-checkout .mur-credenciales{
  border:1px solid rgba(197,163,106,.45);
  border-radius:14px;
  background:rgba(197,163,106,.07);
  padding:22px;
  margin-top:28px;
}

/* El pago y la casilla de términos. */
body.mur-tienda .woocommerce-checkout-payment{
  background:transparent !important;
  border-radius:0 !important;
}
body.mur-tienda .woocommerce-checkout-payment ul.payment_methods{
  border:1px solid rgba(8,43,69,.10) !important;
  border-radius:12px !important;
  background:var(--mur-bg-alt) !important;
  padding:14px 16px !important;
  margin:0 0 16px !important;
}
body.mur-tienda .woocommerce-checkout-payment ul.payment_methods li{ list-style:none !important; }
body.mur-tienda .woocommerce-checkout-payment .payment_box{
  background:var(--mur-card) !important;
  border:1px solid rgba(8,43,69,.08) !important;
  border-radius:10px !important;
  font-size:13px !important;
  color:var(--mur-muted) !important;
}
body.mur-tienda .woocommerce-checkout-payment .payment_box::before{ display:none !important; }

body.mur-tienda .woocommerce-terms-and-conditions-wrapper{
  font-size:13px;
  color:var(--mur-muted);
  margin-bottom:16px;
}

/* Las casillas, en el azul de la marca y no en el del navegador. */
body.mur-tienda input[type="checkbox"],
body.mur-tienda input[type="radio"]{
  accent-color:var(--mur-navy);
  width:16px;
  height:16px;
}

/* El aviso del cupón: en un curso que se vende a precio fijo, invita a buscar
   un descuento que no existe. Se esconde; si algún día hay cupones, se saca
   esta regla y vuelve. */
body.mur-tienda .woocommerce-form-coupon-toggle{ display:none !important; }

/* La cuenta regresiva del acuse de Virtual. Va debajo del botón, en el tono de
   los textos de apoyo: informa, no apura. */
.mur-apply-virtual .mur-apply-cuenta{
  display:block;
  margin-top:10px;
  font-family:Manrope,sans-serif;
  font-size:12px;
  color:rgba(246,241,232,.72);
}
.mur-apply-virtual .mur-apply-cuenta:empty{ display:none; }

/* --------------------------------------------------------------------------
   28. Las páginas legales: términos, privacidad y arrepentimiento

   Son documentos para leer, y siguen siéndolo: una sola columna angosta, sin
   tarjetas ni bandas. Lo que cambia es que ahora tienen la tipografía, los
   colores y los botones del sitio, y aire entre el header y el título.

   Todo cuelga de `body.mur-legal`, que pone `mur-legales.php`.
   -------------------------------------------------------------------------- */
body.mur-legal .site-main{
  /* 720px de lectura: unos 75 caracteres por renglón. El tema daba 1140. */
  max-width:720px;
  margin:0 auto;
  padding:72px 24px 110px;
  font-family:Manrope,sans-serif;
  color:var(--mur-graphite);
}
body.mur-legal .page-header{ margin:0 0 36px; padding:0; }
body.mur-legal .page-header .entry-title{
  /* El tema le da 10px a los lados y un ancho propio: en el teléfono el título
     quedaba corrido respecto del texto. */
  max-width:none;
  margin:0;
  padding:0;
  font-family:Switzer,sans-serif;
  font-weight:600;
  font-size:clamp(34px,4.4vw,52px);
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--mur-navy);
}
/* El antetítulo dorado de las secciones de la home, acá con un texto fijo. */
body.mur-legal .page-header .entry-title::before{
  content:"Legales";
  display:block;
  margin-bottom:16px;
  font-family:Manrope,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8A6A2F;
}
body.mur-legal .page-content{ font-size:16px; line-height:1.75; }
body.mur-legal .page-content p{ margin:0 0 16px; }
body.mur-legal .page-content h2{
  margin:44px 0 12px;
  padding-top:28px;
  border-top:1px solid rgba(8,43,69,.10);
  font-family:Switzer,sans-serif;
  font-weight:600;
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--mur-navy);
}
body.mur-legal .page-content strong{ font-weight:600; color:var(--mur-navy); }
body.mur-legal .page-content a{
  color:var(--mur-mineral);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
body.mur-legal .page-content a:hover{ color:var(--mur-navy); }
body.mur-legal .page-content ul{ margin:0 0 16px; padding:0; list-style:none; }
body.mur-legal .page-content li{ position:relative; margin:0 0 8px; padding-left:22px; }
body.mur-legal .page-content li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mur-gold);
}
/* «Última actualización…» es una nota, no un párrafo del documento. */
body.mur-legal .page-content p > em:only-child{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:var(--mur-bg-alt);
  font-size:13px;
  font-style:normal;
  color:var(--mur-muted);
}

/* ---- El formulario de arrepentimiento ------------------------------------- */
body.mur-legal .mur-arrepentimiento{
  position:relative;
  margin-top:32px;
  padding:32px;
  border:1px solid rgba(8,43,69,.10);
  border-radius:16px;
  background:var(--mur-card);
}
body.mur-legal .mur-arrepentimiento p{ margin:0 0 18px; }
body.mur-legal .mur-arrepentimiento p:last-child{ margin-bottom:0; }
body.mur-legal .mur-arrepentimiento label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:600;
  color:var(--mur-navy);
}
body.mur-legal .mur-arrepentimiento input,
body.mur-legal .mur-arrepentimiento textarea{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  border:1px solid rgba(8,43,69,.16);
  border-radius:10px;
  background:var(--mur-bg-alt);
  font-family:inherit;
  font-size:16px;
  color:var(--mur-navy);
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
body.mur-legal .mur-arrepentimiento textarea{ min-height:120px; resize:vertical; }
body.mur-legal .mur-arrepentimiento input:focus,
body.mur-legal .mur-arrepentimiento textarea:focus{
  border-color:var(--mur-navy);
  background:#fff;
  box-shadow:0 0 0 3px rgba(197,163,106,.35);
  outline:none;
}
/* El botón del sitio: azul, dorado al pasar. El del tema venía rosa. */
body.mur-legal .mur-arrepentimiento button{
  min-height:50px;
  padding:0 26px;
  border:0;
  border-radius:10px;
  background:var(--mur-navy);
  color:var(--mur-ivory);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s, color .2s;
}
body.mur-legal .mur-arrepentimiento button:hover,
body.mur-legal .mur-arrepentimiento button:focus{
  background:var(--mur-gold);
  color:var(--mur-navy);
}
body.mur-legal .mur-arrepentimiento button:focus-visible{ outline:2px solid var(--mur-navy); outline-offset:3px; }
body.mur-legal .mur-aviso{
  margin:28px 0 0;
  padding:16px 20px;
  border-left:3px solid var(--mur-gold);
  border-radius:8px;
  background:var(--mur-ivory);
}
body.mur-legal .mur-aviso p,
body.mur-legal .mur-aviso ul{ margin:0; }
body.mur-legal .mur-aviso-error{ border-left-color:#B42318; background:#FBEFEE; }
body.mur-legal .mur-aviso-error li::before{ background:#B42318; }

@media (max-width:767px){
  body.mur-legal .site-main{ padding:44px 20px 72px; }
  body.mur-legal .page-content h2{ margin-top:36px; padding-top:24px; font-size:20px; }
  body.mur-legal .mur-arrepentimiento{ padding:22px 18px; }
  body.mur-legal .mur-arrepentimiento button{ width:100%; }
}/* End custom CSS */