.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS *//* PAGINA LEGAL — calcado del mockup de Lovable (medido a 1440).
   Identico a 3817 y 3826. Ver notas de medicion en CLAUDE.md. */

body { background-color: var(--color-background); }

#tl-legal-head,
#tl-legal-head *,
#tl-legal-texto,
#tl-legal-texto * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#tl-legal-head {
  background-color: var(--color-surface);
  padding: 80px 0 0 !important;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

#tl-legal-head-in {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 96px 32px !important;
  gap: 0 !important;
  align-items: flex-start;
}

#tl-legal-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.24em;
  color: var(--color-gold-deep);
  margin: 0;
}

#tl-legal-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 3.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 20px 0 0;
}

#tl-legal-intro {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.625;
  color: var(--color-text-muted);
  margin: 24px 0 0;
  max-width: 607px;
}

#tl-legal-texto {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 32px;
  box-sizing: border-box;
  font-family: var(--font-body);
  color: var(--color-text-muted);
}

#tl-legal-texto h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 56px 0 0;
}
#tl-legal-texto h2:first-child { margin-top: 0; }

#tl-legal-texto h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 36px 0 0;
}

#tl-legal-texto p {
  font-size: 0.97rem;
  line-height: 1.85;
  margin: 16px 0 0;
}
#tl-legal-texto > p:first-child { margin-top: 0; }

#tl-legal-texto ul { margin: 20px 0 0; padding: 0; list-style: none; }

#tl-legal-texto ul > li {
  position: relative;
  padding-left: 24px;
  font-size: 0.95rem;
  line-height: 1.8;
}

#tl-legal-texto ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background-color: var(--color-gold);
}

#tl-legal-texto dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
  margin: 32px 0 0;
}

#tl-legal-texto dl > div {
  background-color: var(--color-surface);
  padding: 20px 24px;
}

#tl-legal-texto dt {
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
  color: var(--color-gold-deep);
  margin: 0;
}

#tl-legal-texto dd {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: 8px 0 0;
}

#tl-legal-texto a {
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 300ms ease;
}
#tl-legal-texto a:hover { color: var(--color-text); }

#tl-legal-texto strong { color: var(--color-text); font-weight: 500; }

@media (max-width: 767px) {
  #tl-legal-head-in { padding: 64px 20px !important; }
  #tl-legal-texto { padding: 56px 20px; }
  #tl-legal-texto dl { grid-template-columns: 1fr; }
  #tl-legal-texto h2 { margin-top: 44px; }
}
/* A 390px la pagina desbordaba: las URLs de las redes sociales van en texto
   plano y no tienen donde partir. Se permite el corte dentro de la palabra. */
#tl-legal-texto,
#tl-legal-texto p,
#tl-legal-texto li,
#tl-legal-texto dd { overflow-wrap: anywhere; }
/* === Cabecera fija en claro, sin transicion =============================
   La cabecera del Maquetador lleva animaciones de scroll pensadas para la
   home: arranca transparente sobre el hero oscuro y se aclara al bajar.
   En una pagina legal no hay hero, asi que ese estado inicial la dejaba
   grisacea sobre un fondo claro y luego cambiaba de color a mitad de scroll.
   El mockup no hace eso: aqui la cabecera nace ya clara y no se mueve
   (medido: color-surface al 95%, blur 8px, filete inferior, texto oscuro,
   identico arriba y despues de 600px de scroll).
   Se anulan las animaciones y se fijan los valores finales. */

.elementor-element-96a2278 {
  animation: none !important;
  background-color: color-mix(in srgb, var(--color-background) 95%, transparent) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 0 var(--color-border) !important;
}

.elementor-element-96a2278 a:first-child > *:first-child,
.elementor-element-96a2278 aside a,
.elementor-element-96a2278 aside span,
.elementor-element-96a2278 aside p,
.elementor-element-9e2ef75 svg,
.elementor-element-e1da398 svg {
  animation: none !important;
  color: var(--color-text) !important;
}

.elementor-element-9e2ef75 {
  animation: none !important;
  border-color: var(--color-border) !important;
}

/* La cabecera de estas páginas no hace la transición de scroll, así que el
   logo tampoco: va directamente el normal. Sin esto se quedaba la versión
   clara sobre fondo claro, o sea invisible. */
#tl-logo-img { animation: none !important; opacity: 1 !important; }
#tl-logo-img-claro { animation: none !important; opacity: 0 !important; }

/* el h2 también escala con la pantalla, en vez de quedarse en 32px */
#tl-legal-texto h2 { font-size: clamp(1.55rem, 4.2vw, 2rem); }/* End custom CSS */