/* ============================================================================
   Mundo Abogadas · capa de movimiento
   Se monta ENCIMA de templatemo-scholar.css y custom.css: no redefine ningún
   color de marca, solo agrega estados de animación, superficies 3D y el lienzo
   de física. La paleta se reusa tal cual desde las variables de abajo.
   ========================================================================== */

:root {
  --ma-primary: #7a6ad8;
  --ma-primary-dark: #6657c6;
  --ma-primary-soft: #f1f0fe;
  --ma-accent: #f5a425;
  --ma-ink: #4a4a4a;
  --ma-ink-strong: #1e1e1e;
  --ma-grad-a: rgb(85, 0, 227);
  --ma-grad-b: rgb(198, 61, 255);
}

/* ── Estado inicial de los elementos que se revelan ─────────────────────────
   Se aplica solo cuando el JS de movimiento está vivo (html.ma-motion). Si el
   JS falla o no carga, el contenido se ve completo: nunca se oculta algo que
   dependa de un script para volver a aparecer. */
html.ma-motion [data-ma-reveal] {
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* ── Barra de progreso de lectura ──────────────────────────────────────────── */
.ma-progreso {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ma-grad-a), var(--ma-grad-b), var(--ma-accent));
  z-index: 9999;
  pointer-events: none;
}

/* ── Titular del hero letra por letra ────────────────────────────────────────
   La palabra es la unidad que no se parte; la letra solo es la caja que se
   anima. Al revés, el salto de línea puede caer en medio de una palabra. */
.ma-palabra {
  display: inline-block;
  white-space: nowrap;
}
.ma-letra {
  display: inline-block;
  transform-origin: 50% 100%;
}

/* ── Escena 3D del hero (three.js) ─────────────────────────────────────────
   Ocupa la franja derecha del hero, que es donde el texto del slide no llega
   (el h2 mide 60% y el párrafo 65%). Va POR ENCIMA de la foto del slide, no
   detrás, porque esa foto es opaca y taparía la escena entera. */
.ma-escena3d {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.ma-escena3d.lista { opacity: .92; }
.ma-escena3d canvas { display: block; width: 100%; height: 100%; }

.main-banner { position: relative; overflow: hidden; }
.main-banner .container { position: relative; z-index: 2; }

/* Bajo 992px el slide ya apila el texto a lo ancho y la balanza estorbaría. */
@media (max-width: 991px) {
  .ma-escena3d { display: none; }
}

/* ── Tarjetas con inclinación 3D al pasar el cursor ────────────────────────── */
.ma-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
.ma-tilt > * { transform: translateZ(18px); }

/* Halo que sigue al cursor sobre las tarjetas de servicio. */
.ma-halo { position: relative; isolation: isolate; }
.ma-halo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    240px circle at var(--ma-x, 50%) var(--ma-y, 50%),
    rgba(122, 106, 216, .16),
    transparent 62%
  );
  pointer-events: none;
  z-index: 1;
}
.ma-halo:hover::after { opacity: 1; }

/* ── Intro 3D ─────────────────────────────────────────────────────────────
   La escena la dibuja ma-intro.js con three.js al tamaño exacto de la
   pantalla. Acá va el fondo, el nombre y el botón. */

/* Fondo de marca, compartido por la tapa del <head> y por la capa real, para
   que el paso de una a otra no se note. */
:root {
  --ma-intro-fondo:
    radial-gradient(60% 42% at 28% 26%, rgba(122, 106, 216, .40), transparent 70%),
    radial-gradient(52% 40% at 80% 72%, rgba(245, 164, 37, .16), transparent 72%),
    #0e0b1a;
}

/* Tapa desde el primer pintado. La pone un script en línea del <head> solo si
   la intro va a correr, así el sitio nunca alcanza a asomarse antes de que
   cargue el módulo. Ese mismo script la retira sola a los 5 s, pase lo que pase. */
html.ma-intro-pendiente::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ma-intro-fondo);
}

html.ma-intro-activa,
html.ma-intro-activa body { overflow: hidden; }

.ma-intro {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;   /* en el teléfono, el alto real sin las barras del navegador */
  z-index: 10000;
  background: var(--ma-intro-fondo);
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity .45s ease;   /* calza con T_FUNDIDO de ma-intro.js */
}
.ma-intro.saliendo { opacity: 0; pointer-events: none; }

.ma-intro-lienzo,
.ma-intro-lienzo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ma-intro-marca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(13vh, 88px);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.ma-intro-logo {
  width: clamp(72px, 19vw, 104px);
  height: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* El espaciado entre letras se cierra mientras aparece. `text-indent` iguala
   el espacio que queda después de la última letra, si no el nombre se ve
   corrido a la izquierda. */
.ma-intro-nombre {
  margin: 16px 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 5.4vw, 32px);
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .55em;
  text-indent: .55em;
  opacity: 0;
  transition:
    opacity .8s ease .4s,
    letter-spacing 1.2s cubic-bezier(.2, .7, .2, 1) .4s,
    text-indent 1.2s cubic-bezier(.2, .7, .2, 1) .4s;
}

.ma-intro-lema {
  margin: 10px 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .72);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s ease .8s, transform .7s ease .8s;
}

.ma-intro.corriendo .ma-intro-logo  { opacity: 1; transform: none; }
.ma-intro.corriendo .ma-intro-nombre { opacity: 1; letter-spacing: .22em; text-indent: .22em; }
.ma-intro.corriendo .ma-intro-lema  { opacity: 1; transform: none; }

.ma-intro .ma-saltar {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 24px;
  padding: 7px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ma-intro .ma-saltar:hover { background: rgba(255, 255, 255, .2); }

/* ── Botones magnéticos ────────────────────────────────────────────────────── */
.ma-magnetico { will-change: transform; display: inline-block; }

/* ── Ajustes menores heredados del original ────────────────────────────────── */
.service-item, .events_item, #precios .card { will-change: transform; }

/* ── Respeto por quien pidió menos movimiento ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.ma-motion [data-ma-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ma-progreso, .ma-escena3d, .ma-intro { display: none !important; }
  .ma-tilt, .ma-magnetico { transform: none !important; }
  .ma-halo::after { display: none; }
}

/* ── Trampa anti-bot ────────────────────────────────────────────────────────
   Fuera de la pantalla en vez de display:none: algunos bots ignoran los campos
   ocultos por display y sí llenan los que el CSS solo desplaza. */
.ma-trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Casilla de consentimiento ──────────────────────────────────────────────
   La variante lila es la del formulario único de consulta; la base queda para
   cualquier fondo blanco. */
.ma-consentimiento { font-size: 13px; line-height: 1.5; }
.ma-consentimiento .form-check-input:checked {
  background-color: var(--ma-primary);
  border-color: var(--ma-primary);
}
.ma-consentimiento a { color: var(--ma-primary); text-decoration: underline; }

.ma-consentimiento--sobre-lila { margin-bottom: 26px; padding-left: 1.9em; }
.ma-consentimiento--sobre-lila .form-check-label { color: rgba(255, 255, 255, .92); }
.ma-consentimiento--sobre-lila a { color: #fff; }
.ma-consentimiento--sobre-lila .form-check-input {
  background-color: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .6);
}
.ma-consentimiento--sobre-lila .form-check-input:checked {
  background-color: var(--ma-accent);
  border-color: var(--ma-accent);
}

/* El teléfono nuevo del contacto hereda el estilo de los otros inputs lila. */
.contact-us-content input#telefono {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background-color: rgba(249, 235, 255, 0.15);
  border: none;
  outline: none;
  font-weight: 300;
  color: #fff;
  padding: 0px 20px;
  font-size: 14px;
  margin-bottom: 30px;
}
.contact-us-content input#telefono::placeholder { color: rgba(255, 255, 255, .7); }

/* El sitio original estiliza `#contact-form input`, selector con ID, como
   pastilla de 50 px de alto y ancho completo. Sin volver a pasar por el ID,
   ninguna regla de clases le gana y la casilla de consentimiento se renderiza
   como una píldora blanca gigante en vez de un checkbox. */
#contact-form .ma-consentimiento .form-check-input {
  width: 1.05em;
  height: 1.05em;
  min-height: 1.05em;
  border-radius: .25em;
  padding: 0;
  margin: .2em 0 0 -1.5em;
  flex-shrink: 0;
}
#contact-form .ma-consentimiento .form-check-label {
  display: inline;
  width: auto;
}

/* ── Agenda opcional del formulario único ───────────────────────────────────
   Calendario propio en vez del selector de fecha del navegador: se ve igual en
   todos los teléfonos, muestra de una vez qué días se pueden elegir y deja
   animar el cambio de mes. Los días y horas salen de ma-form.js. */
.contact-us .section-heading h2 { margin-bottom: 26px; }
.ma-agenda { border-radius: 25px !important; }
.ma-agenda-ayuda { margin: 0 0 14px; font-size: 14px; color: var(--ma-ink); }

.ma-cal-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ma-cal-mes {
  font-weight: 600;
  font-size: 16px;
  color: var(--ma-ink-strong);
  text-transform: capitalize;
}
.ma-cal-nav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ma-primary);
  background: #fff;
  color: var(--ma-primary);
  font-size: 22px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease;
}
.ma-cal-nav:hover:not(:disabled) { background: var(--ma-primary); color: #fff; }
.ma-cal-nav:disabled { opacity: .3; cursor: default; }

.ma-cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.ma-cal-dia-semana {
  font-size: 12px;
  font-weight: 600;
  color: var(--ma-primary);
  padding: 4px 0;
}
.ma-cal-dia {
  aspect-ratio: 1;
  max-height: 44px;
  width: 100%;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ma-ink-strong);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ma-cal-dia:not(:disabled):hover { background: var(--ma-primary-soft); color: var(--ma-primary); }
.ma-cal-dia:disabled { color: #c9c6d6; cursor: default; }
.ma-cal-dia.es-hoy { box-shadow: inset 0 0 0 1.5px var(--ma-accent); }
.ma-cal-dia.elegido,
.ma-cal-dia.elegido:hover {
  background: var(--ma-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(122, 106, 216, .35);
}
.ma-cal-dia:focus-visible,
.ma-cal-nav:focus-visible,
.ma-hora:focus-visible,
.ma-resumen-quitar:focus-visible { outline: 2px solid var(--ma-accent); outline-offset: 2px; }

.ma-horas { margin-top: 16px; }
.ma-horas-titulo { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ma-ink-strong); }
.ma-horas-titulo::first-letter { text-transform: uppercase; }
.ma-horas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.ma-hora {
  flex: 1 0 70px;
  padding: 8px 0;
  border-radius: 20px;
  border: 1px solid var(--ma-primary);
  background: #fff;
  color: var(--ma-primary);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.ma-hora:hover:not(:disabled) { background: var(--ma-primary-soft); }
.ma-hora.elegida { background: var(--ma-primary); color: #fff; }
.ma-hora:disabled { opacity: .35; cursor: default; }

.ma-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--ma-primary-soft);
  font-size: 14px;
  color: var(--ma-primary-dark);
  font-weight: 500;
}
.ma-resumen[hidden], .ma-horas[hidden] { display: none; }
.ma-resumen-texto::first-letter { text-transform: uppercase; }
.ma-resumen-quitar {
  border: none;
  background: none;
  color: var(--ma-primary);
  text-decoration: underline;
  font-size: 13px;
  padding: 0;
  flex-shrink: 0;
}

/* El recuadro de Turnstile no ocupa espacio mientras está invisible. */
.ma-verificacion { margin-bottom: 18px; }
.ma-verificacion:empty { display: none; }

@media (max-width: 991px) {
  .ma-agenda { margin-bottom: 30px; }
}