/* ==========================================================
   DJA · detalles del concepto "Expediente Confidencial"
   Lo que Elementor no reproduce con widgets nativos.
   Se encola desde wp-content/novamira-sandbox/dja-frontend.php
   ========================================================== */

:root{
  --dja-bg:        #14161C;
  --dja-bg-dark:   #0F1115;
  --dja-card:      #1E212A;
  --dja-txt:       #ECE7DD;
  --dja-txt-2:     #928F86;
  --dja-txt-3:     #6E6C66;
  --dja-bronce:    #D8BC85;
  --dja-bronce-2:  #B08D57;
  --dja-borde:     rgba(176,141,87,.18);
}

body{ background: var(--dja-bg); color: var(--dja-txt); }

/* ---------- 0. Tipografia ----------
   Los tres stacks del diseno original. La plantilla de Elementor
   traia "Georgia" y "ui-sans-serif" a secas, sin respaldo: fuera de
   Safari eso no resuelve a nada y el navegador ponia lo que queria.
   Aqui va el stack completo, aplicado por clase. */
.dja-serif, .dja-serif *{
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif !important;
}
.dja-mono, .dja-mono *{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}
.dja-sans, .dja-sans *{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif !important;
}

/* ---------- 1. Hero con la foto de equipo y su velo ----------
   El velo es mas claro que en el diseno original (.94 dejaba la foto
   casi en negro). Sigue garantizando contraste sobre el titular. */
.dja-hero{
  position: relative; overflow: hidden;
  background-image: none !important;
  background-color: #0F1115;
}
/* El parrafo del hero mide 520 px en el diseno, no todo el ancho.
   Se excluye la etiqueta de evidencia, que va a 10 px y ancho completo. */
.dja-hero p:not(.dja-prueba){
  max-width: 520px;
  font-size: 17px;
}
/* El titular ocupa 660 px en el diseno: cae en tres lineas, no en dos. */
.dja-hero h1{ max-width: 660px; }
/* La etiqueta va al pie del hero, en una sola linea. */
.dja-hero .dja-prueba{
  font-size: 10px !important;
  max-width: none; white-space: nowrap;
  margin-top: 26px;
}
/* Filete de bronce al pie del hero. */
.dja-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, var(--dja-bronce-2), transparent 62%);
}
.dja-hero h1{
  font-size: clamp(2.4rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(15,17,21,.7);
}
/* En movil la foto recorta a una sola persona: se oscurece mas
   para que el titular siempre gane contraste. */
@media (max-width: 767px){
  .dja-hero{
    background-image:
      linear-gradient(rgba(15,17,21,.90), rgba(15,17,21,.90)),
      url("https://snow-tarsier-975368.hostingersite.com/wp-content/uploads/dja/equipo-dja.jpg");
    background-position: 62% center;
  }
}

/* ---------- 1b. Menu principal del header ----------
   La plantilla no lo traia: el header solo tenia logo y boton, y los
   enlaces del pie apuntaban a anclas que no existian. */
/* ---------- Cabecera de dos filas, como el diseno ----------
   Fila 1: marca y boton. Filete de bronce. Fila 2: menu y lema.
   Antes iba todo en una sola fila y el boton se comia el menu. */
.dja-header-fila1{
  display: flex !important;
  align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: nowrap !important;
  border-bottom: 1px solid rgba(176,141,87,.20);
}
.dja-header-fila1 > .e-con{ flex: 0 1 auto; }
.dja-header-fila1 > .elementor-widget-button{ flex: 0 0 auto; }

.dja-header-fila2{
  display: flex !important;
  align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.dja-header-fila2 > *{ flex: 0 1 auto; }
/* El menu manda a la izquierda; el lema se retira cuando ya no cabe. */
.elementor .dja-header-fila2 .dja-menu{ justify-content: flex-start; gap: 26px; }
@media (max-width: 900px){ .dja-header-fila2 .dja-lema{ display: none; } }

/* ---------- Iconos de WhatsApp en los botones ----------
   El diseno los lleva; la plantilla de Elementor no los traia. */
.dja-header-fila1 .elementor-button-text::before,
a.dja-cta-fija::before,
.dja-hero .elementor-widget-button:first-of-type .elementor-button-text::before{
  content:"";
  display:inline-block; vertical-align:-3px;
  width:17px; height:17px; margin-right:9px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.22 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.27-.2-.57-.34m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26C2.16 6.44 6.6 2 12.05 2c2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.82 11.82 0 0 0 12.05.1C5.5.1.16 5.44.16 12c0 2.1.55 4.14 1.59 5.94L.06 24.1l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.9 0-3.18-1.24-6.17-3.49-8.42'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.37-.03-.52-.07-.15-.67-1.61-.91-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.87 1.22 3.07c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.18-1.42-.08-.12-.27-.2-.57-.34m-5.42 7.4h-.01a9.87 9.87 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1-1.51-5.26C2.16 6.44 6.6 2 12.05 2c2.64 0 5.12 1.03 6.99 2.9a9.83 9.83 0 0 1 2.89 6.99c0 5.45-4.44 9.88-9.88 9.88m8.41-18.3A11.82 11.82 0 0 0 12.05.1C5.5.1.16 5.44.16 12c0 2.1.55 4.14 1.59 5.94L.06 24.1l6.3-1.65a11.88 11.88 0 0 0 5.69 1.45c6.55 0 11.89-5.34 11.89-11.9 0-3.18-1.24-6.17-3.49-8.42'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Medidas de boton tomadas del diseno */
.dja-header-fila1 .elementor-button{
  padding: 12px 20px !important;
  font-size: 14px !important; font-weight: 600 !important;
  border-radius: 2px !important;
  white-space: nowrap;
}
.dja-header-fila1 .elementor-button-content-wrapper,
.dja-header-fila1 .elementor-button-text{ white-space: nowrap; }
/* En movil ese nowrap desbordaba la pantalla: el boton se aprieta y,
   si aun no cabe, se le permite partir en dos lineas. */
@media (max-width: 520px){
  .dja-header-fila1 .elementor-button{
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    white-space: normal;
  }
  .dja-header-fila1 .elementor-button-content-wrapper,
  .dja-header-fila1 .elementor-button-text{ white-space: normal; }
  .dja-header-fila1 .elementor-button-text::before{ width:14px; height:14px; margin-right:7px; }
}
/* La etiqueta de evidencia tampoco debe forzar ancho en pantallas chicas. */
@media (max-width: 560px){
  .dja-hero .dja-prueba{ white-space: normal; font-size: 9px !important; letter-spacing: .14em; }
}
.dja-hero .elementor-button{
  min-height: 54px;
  font-size: 15px !important;
  border-radius: 2px !important;
}

.dja-menu{ display:flex; align-items:center; justify-content:flex-end; gap:30px; }
/* La regla general de enlaces del sitio le ganaba a esta y pintaba el
   menu de bronce; por eso el selector va anclado a .elementor. */
.elementor .dja-menu a{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #A8A49A; text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.elementor .dja-menu a:hover, .elementor .dja-menu a:focus-visible{
  color: var(--dja-txt); border-bottom-color: var(--dja-bronce-2);
}

/* Lema a la derecha del menu, como en el diseno. Se retira cuando ya no
   cabe, que es exactamente lo que hace el HTML de referencia. */
.dja-lema{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dja-txt-2); white-space: nowrap;
}
@media (max-width: 1279px){ .dja-lema{ display:none; } }

/* Etiquetas de evidencia al pie de las fotos. Sostienen la metafora del
   expediente: sin ellas las fotos son solo fotos. */
.dja-prueba{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dja-txt-3); padding-top: 10px;
}
.dja-prueba--chica{ font-size: 9.5px; letter-spacing: .16em; }
/* ---------- Recorte de las fotos ----------
   En el diseno las tres van con object-fit cover y un punto de foco
   definido. Elementor solo les habia puesto ancho, asi que salian con
   su proporcion nativa y estiraban la pagina. El !important es
   necesario: Elementor genera una regla propia mas especifica. */
.elementor-element-1a2b027 img, asi que salian con
   su proporcion nativa y estiraban la pagina. El !important es
   necesario: Elementor genera una regla propia mas especifica. */
.elementor-element-en2b027 img{        /* equipo: banda horizontal */
  aspect-ratio: 1038 / 360 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: 50% 32% !important;
}
.elementor-element-1a2b01b img, .elementor-element-en2b01b img{        /* retrato de Lin Yu: casi cuadrado */
  aspect-ratio: 476 / 470 !important;
  width: 476px !important; max-width: 100% !important; height: auto !important;
  object-fit: cover !important;
  object-position: 50% 20% !important;
}
/* Abajo de 1024 el menu no cabe junto al logo y al boton: pasa a una
   fila propia y se puede desplazar sin romper la pagina. */
@media (max-width: 1023px){
  .dja-menu{
    order: 3; width: 100%;
    justify-content: flex-start; gap: 22px;
    overflow-x: auto; scrollbar-width: none;
    padding-top: 4px;
  }
  .dja-menu::-webkit-scrollbar{ display:none; }
}

/* El ancla no debe quedar tapada al saltar. */
[id="despacho"], [id="equipo"], [id="areas"], [id="faq"], [id="contacto"]{
  scroll-margin-top: 18px;
}
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ---------- 2. Barra vertical lateral del expediente ---------- */
.dja-lomo{
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 34px; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: var(--dja-bg-dark);
  border-right: 1px solid var(--dja-borde);
  pointer-events: none;
}
.dja-lomo span{
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--dja-txt-3); white-space: nowrap;
}
@media (max-width: 1200px){ .dja-lomo{ display:none } }

/* ---------- 3. Barra fija de WhatsApp ----------
   En movil barra completa abajo, en escritorio pastilla flotante.
   Este es el arreglo del bug que tenia el diseno original. */
.dja-cta-fija{
  position: fixed; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--dja-bronce-2); color: var(--dja-bg-dark) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  font-size: 15px; font-weight: 600; text-decoration: none;
  min-height: 52px; padding: 14px 22px; border-radius: 2px;
  right: 26px; bottom: 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.dja-cta-fija:hover{ background: var(--dja-bronce); color: var(--dja-bg-dark) !important; }
@media (max-width: 900px){
  .dja-cta-fija{
    left:0; right:0; bottom:0; width:100%;
    justify-content:center; border-radius:0;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px rgba(0,0,0,.5);
  }
  body{ padding-bottom: 88px; }
}

/* ---------- 4. Rejillas ----------
   Columnas y separaciones medidas una a una en el HTML de referencia:
   despacho 2 col gap 64 · experiencia 2 col gap 48 · contacto 2 col
   gap 60 · equipo 3 col gap 14 · areas 4 col gap 14 · pie 3 col.
   Elementor los tenia en fila pero los hijos hacian salto de linea y
   todo terminaba apilado, que es lo que estiraba la pagina.

   Elementor tiene dos tipos de contenedor y hay que tratarlos distinto:
   "full" pone los hijos en el propio elemento, "boxed" los mete en un
   .e-con-inner. Si la rejilla se aplica al contenedor boxed, su unico
   hijo (el inner) cae en la primera columna y todo sigue apilado. */
.e-con-full.dja-col2,    .dja-col2 > .e-con-inner,
.e-con-full.dja-col3,    .dja-col3 > .e-con-inner,
.e-con-full.dja-col4,    .dja-col4 > .e-con-inner,
.e-con-full.dja-col-pie, .dja-col-pie > .e-con-inner{
  display: grid !important;
  align-items: start;
}
.e-con-full.dja-col2,    .dja-col2 > .e-con-inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e-con-full.dja-col3,    .dja-col3 > .e-con-inner{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-con-full.dja-col4,    .dja-col4 > .e-con-inner{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-con-full.dja-col-pie, .dja-col-pie > .e-con-inner{ grid-template-columns: 1.7fr 1fr 1fr; }

.e-con-full.dja-gap14, .dja-gap14 > .e-con-inner{ gap: 14px !important; }
.e-con-full.dja-gap48, .dja-gap48 > .e-con-inner{ gap: 48px !important; }
.e-con-full.dja-gap60, .dja-gap60 > .e-con-inner{ gap: 60px !important; }
.e-con-full.dja-gap64, .dja-gap64 > .e-con-inner{ gap: 64px !important; }

/* Tableta: las de 3 y 4 columnas bajan a 2; las de 2 se quedan. */
@media (max-width: 1024px){
  .e-con-full.dja-col3, .dja-col3 > .e-con-inner,
  .e-con-full.dja-col4, .dja-col4 > .e-con-inner,
  .e-con-full.dja-col-pie, .dja-col-pie > .e-con-inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Movil: todo a una columna. */
@media (max-width: 767px){
  .e-con-full.dja-col2, .dja-col2 > .e-con-inner,
  .e-con-full.dja-col3, .dja-col3 > .e-con-inner,
  .e-con-full.dja-col4, .dja-col4 > .e-con-inner,
  .e-con-full.dja-col-pie, .dja-col-pie > .e-con-inner{
    grid-template-columns: minmax(0, 1fr);
  }
  .e-con-full.dja-gap48, .dja-gap48 > .e-con-inner,
  .e-con-full.dja-gap60, .dja-gap60 > .e-con-inner,
  .e-con-full.dja-gap64, .dja-gap64 > .e-con-inner{ gap: 34px !important; }
}

/* ---------- 5. Preguntas frecuentes ----------
   Medidas tomadas del HTML: bloque de 820 px centrado (no los 1140 de
   las demas secciones), pregunta de 19 px en serif con 20 px de aire,
   respuesta de 14.5 px, y la linea separadora ARRIBA de cada pregunta. */
#faq > .e-con-inner{ max-width: 820px; margin-left: auto; margin-right: auto; }

.elementor-accordion .elementor-accordion-item{
  border: 0 !important;
  border-top: 1px solid rgba(176,141,87,.18) !important;
  background: transparent;
  border-radius: 0 !important;
}
.elementor-accordion .elementor-accordion-item:last-child{
  border-bottom: 1px solid rgba(176,141,87,.18) !important;
}
.elementor-accordion .elementor-tab-title{
  padding: 20px 0 !important;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
  color: var(--dja-txt) !important;
  background: transparent !important;
  border: 0 !important;
}
.elementor-accordion .elementor-tab-content{
  border: 0 !important;
  padding: 0 0 22px 0 !important;
  background: transparent !important;
  color: var(--dja-txt-2) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}
.elementor-accordion .elementor-tab-content p{ margin: 0; font-size: inherit; color: inherit; }

/* ---------- 6. Tipografia de las fojas ----------
   El tamano y el color los pone Elementor con los valores del diseno
   (10.5 px, #928F86); aqui solo van familia, espaciado y caja. */
.dja-foja, .dja-foja .elementor-heading-title{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .22em; text-transform: uppercase;
}
.dja-foja .elementor-heading-title::before{
  content:""; display:inline-block;
  width: 26px; height: 1px; margin-right: 12px; vertical-align: middle;
  background: var(--dja-bronce-2);
}

/* ---------- 7. Enlaces ---------- */
.elementor a{ color: var(--dja-bronce); text-decoration: none; }
.elementor a:hover{ color: var(--dja-txt); }
:focus-visible{ outline: 2px solid var(--dja-bronce); outline-offset: 3px; }

/* ---------- 8. Formulario de contacto (Contact Form 7) ----------
   CF7 no trae estilos: sin esto se ve como formulario de 2009. */
.wpcf7 .dja-campo{ display:flex; flex-direction:column; gap:7px; margin:0 0 18px; }
.wpcf7 .dja-campo label{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dja-txt-3);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%; box-sizing:border-box;
  background: var(--dja-bg-dark);
  border: 1px solid var(--dja-borde);
  border-radius: 2px;
  color: var(--dja-txt);
  font-family: Georgia, serif; font-size: 16px;  /* 16px evita el zoom de iOS */
  padding: 13px 14px;
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder{ color:#5A5852; }
.wpcf7 input:focus, .wpcf7 textarea:focus{
  outline:none; border-color: var(--dja-bronce-2);
}
.wpcf7 textarea{ resize: vertical; min-height: 132px; }
.wpcf7 .dja-enviar{ margin: 4px 0 0; }
.wpcf7 input[type="submit"]{
  width:100%; min-height:54px; cursor:pointer;
  background: var(--dja-bronce-2); color: var(--dja-bg-dark);
  border:0; border-radius:2px;
  font-family: Georgia, serif; font-size:16px; font-weight:500;
}
.wpcf7 input[type="submit"]:hover{ background: var(--dja-bronce); }
.wpcf7 form .wpcf7-response-output{
  margin: 18px 0 0; padding: 13px 15px;
  border: 1px solid var(--dja-borde); border-radius: 2px;
  color: var(--dja-txt-2); font-size: 14.5px;
}
.wpcf7-not-valid-tip{ color: #E0A2A2; font-size: 13px; }
/* ==========================================================
   AJUSTE POR SECCION contra el HTML de referencia
   Todos los valores de aqui salieron de medir el HTML, no de
   estimarlos: relleno de tarjetas, anchos maximos de texto y
   tamano de los titulos de seccion.
   ========================================================== */

/* ---- Tarjetas: el diseno usa relleno uniforme; Elementor las dejo
   con relleno horizontal y cero vertical, y el texto tocaba el borde. */
.elementor-element-1a2b044 > .e-con, y el texto tocaba el borde. */
.elementor-element-en2b044 > .e-con{        /* equipo: 4 fichas */
  padding: 22px !important;
  background-color: #14161C;
  border: 1px solid rgba(176,141,87,.18);
  border-radius: 0 !important;
}
.elementor-element-1a2b059 > .e-con, .elementor-element-en2b059 > .e-con{        /* areas: 4 tarjetas */
  padding: 24px !important;
  background-color: #1E212A;
  border: 1px solid rgba(176,141,87,.18);
  border-radius: 0 !important;
}
/* ---- Experiencia: las cuatro fojas, en lista con separadores finos,
   con el numero a la izquierda y el texto a la derecha. Estaban puestas
   en rejilla de 2x2 y quedaban como columnas altas y estrechas. */
.dja-lista-fojas{ display: block !important; gap: 0 !important; }
.dja-lista-fojas > .e-con{
  padding: 20px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(176,141,87,.18) !important;
  border-radius: 0 !important;
  width: 100%;
}
.dja-lista-fojas > .e-con:last-child{
  border-bottom: 1px solid rgba(176,141,87,.18) !important;
}
/* Fila interna: numero a la izquierda, contenido a la derecha.
   El selector es de hijo directo a proposito: con un descendiente
   generico el bloque de titulo y descripcion tambien se ponia en
   fila y los textos se encimaban. */
.dja-lista-fojas > .e-con > .e-con,
.dja-lista-fojas > .e-con > .e-con-inner > .e-con{
  display: flex !important; flex-direction: row !important;
  align-items: normal !important; gap: 18px;
  padding: 0 !important; background: transparent !important; border: 0 !important;
}
/* El bloque de titulo y descripcion se queda en columna. */
.dja-lista-fojas > .e-con > .e-con > .e-con,
.dja-lista-fojas > .e-con > .e-con-inner > .e-con > .e-con,
.dja-lista-fojas > .e-con > .e-con-inner > .e-con > .e-con-inner{
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; gap: 0;
  flex: 1 1 auto; min-width: 0;
  padding: 0 !important; background: transparent !important; border: 0 !important;
}
.dja-lista-fojas > .e-con > .e-con > .elementor-widget-heading,
.dja-lista-fojas > .e-con > .e-con-inner > .e-con > .elementor-widget-heading{
  flex: 0 0 32px; max-width: 32px; padding-top: 3px;
}
.dja-lista-fojas h2, .dja-lista-fojas h3, .dja-lista-fojas h4{
  font-size: 17px !important; line-height: 1.35 !important; margin: 0 0 6px;
}
.dja-lista-fojas p{ margin: 0; }
.elementor-element-1a2b07d, .elementor-element-en2b07d{                 /* experiencia: panel "Tu ventaja" */
  padding: 38px !important;
  background-color: #1E212A;
  border: 1px solid rgba(176,141,87,.30);
  border-radius: 0 !important;
}
.elementor-element-1a2b098, .elementor-element-en2b098{                 /* contacto: bloque del formulario */
  padding: 32px !important;
  background-color: #1E212A;
  border: 1px solid rgba(176,141,87,.28);
  border-radius: 0 !important;
}
.elementor-element-1a2b01c, .elementor-element-en2b01c{                 /* despacho: marco del retrato */
  padding: 10px !important;
  background-color: #1E212A;
  border: 1px solid rgba(176,141,87,.22);
  border-radius: 0 !important;
}
/* ---- Titulos de seccion: el diseno los pone a 38 px, no a 44. */
#equipo h2, #areas h2, .elementor-element-1a2b07f h2, .elementor-element-en2b07f h2{
  font-size: 38px !important;
  line-height: 1.16 !important;
  letter-spacing: -.012em !important;
}

/* ---- Anchos maximos de texto. Sin esto los parrafos se estiran a
   todo el ancho y el bloque pierde su forma editorial. */
#equipo h2{ max-width: 640px; }
#areas h2{ max-width: 680px; }
.elementor-element-1a2b07f h2, .elementor-element-en2b07f h2{ max-width: 640px; }
#equipo .elementor-widget-text-editor p,
#areas .elementor-widget-text-editor p{ max-width: 620px; }
#contacto > .e-con-inner > .elementor-widget-text-editor p{ max-width: 520px; }
.elementor-element-1a2b09c p, .elementor-element-en2b09c p{ max-width: 320px; }
/* pie: bloque de marca */

/* Las tarjetas y rejillas no heredan ese limite. */
.dja-col2 p, .dja-col3 p, .dja-col4 p, .elementor-element-1a2b078 p, .elementor-element-en2b078 p, .elementor-element-1a2b07d p, .elementor-element-en2b07d p{ max-width: none !important; }
/* ---- Banda inferior de areas ("Tu caso no esta en esta lista")
   Marco punteado, como recorte de expediente, y el boton en bronce
   solido con el texto oscuro para que se lea, igual que en el HTML. */
.elementor-element-1a2b05c, igual que en el HTML. */
.elementor-element-en2b05c{
  padding: 22px 24px !important;
  background-color: #0F1115;
  border: 1px dotted rgba(176,141,87,.55) !important;
  border-radius: 0 !important;
}
.elementor-element-1a2b05b .elementor-button, .elementor-element-en2b05b .elementor-button{
  background-color: var(--dja-bronce-2) !important;
  color: var(--dja-bg-dark) !important;
  border: 0 !important;
  border-radius: 2px !important;
  padding: 14px 22px !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}
.elementor-element-1a2b05b .elementor-button:hover, .elementor-element-en2b05b .elementor-button:hover{
  background-color: var(--dja-bronce) !important;
  color: var(--dja-bg-dark) !important;
}
.elementor-element-1a2b05b .elementor-button-text, .elementor-element-en2b05b .elementor-button-text{ color: inherit !important; }

/* ---- Preguntas frecuentes: linea fina, sin relleno lateral. */
#faq .elementor-accordion-item{ border-radius: 0 !important; }
/* ==========================================================
   ALINEACION
   Las rejillas de tarjetas se estiran para que todas midan lo
   mismo; las de dos columnas de contenido siguen alineadas
   arriba, que es como van en el diseno.
   ========================================================== */

/* Tarjetas de equipo, areas y experiencia: misma altura en cada fila. */
.elementor-element-1a2b044, areas y experiencia: misma altura en cada fila. */
.elementor-element-en2b044, .elementor-element-1a2b044 > .e-con-inner, .elementor-element-en2b044 > .e-con-inner, .elementor-element-1a2b059, .elementor-element-en2b059, .elementor-element-1a2b059 > .e-con-inner, .elementor-element-en2b059 > .e-con-inner{
  align-items: stretch !important;
}
.elementor-element-1a2b044 > .e-con, .elementor-element-en2b044 > .e-con, .elementor-element-1a2b059 > .e-con, .elementor-element-en2b059 > .e-con{
  height: 100%;
  justify-content: flex-start;
}
/* Experiencia: las fojas van en lista, y el panel "Tu ventaja" se queda
   con su altura, no se estira hasta el final de la columna. */
.elementor-element-1a2b07e, no se estira hasta el final de la columna. */
.elementor-element-en2b07e, .elementor-element-1a2b07e > .e-con-inner, .elementor-element-en2b07e > .e-con-inner{ align-items: start !important; }
/* Banda inferior de areas: el texto y el boton, centrados entre si
   y repartidos a lo ancho, no pegados uno al otro. */
.elementor-element-1a2b05c, no pegados uno al otro. */
.elementor-element-en2b05c, .elementor-element-1a2b05c > .e-con-inner, .elementor-element-en2b05c > .e-con-inner{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px;
  flex-wrap: wrap;
}
.elementor-element-1a2b05c .elementor-widget-text-editor, .elementor-element-en2b05c .elementor-widget-text-editor{ flex: 1 1 auto; }
.elementor-element-1a2b05c .elementor-widget-text-editor p, .elementor-element-en2b05c .elementor-widget-text-editor p{ margin: 0; }
.elementor-element-1a2b05c .elementor-widget-button, .elementor-element-en2b05c .elementor-widget-button{ flex: 0 0 auto; }
/* Las cifras de arriba tambien alineadas entre si. */
.elementor-element-1a2b019, /* Las cifras de arriba tambien alineadas entre si. */
.elementor-element-en2b019, .elementor-element-1a2b019 > .e-con-inner, .elementor-element-en2b019 > .e-con-inner{ align-items: start !important; }
/* Bloque de contacto: los dos lados arrancan arriba, pero la columna
   de datos conserva su altura natural. Con "stretch" se estiraba hasta
   igualar al formulario y dejaba un hueco muerto debajo del texto. */
.elementor-element-1a2b099, pero la columna
   de datos conserva su altura natural. Con "stretch" se estiraba hasta
   igualar al formulario y dejaba un hueco muerto debajo del texto. */
.elementor-element-en2b099, .elementor-element-1a2b099 > .e-con-inner, .elementor-element-en2b099 > .e-con-inner{ align-items: start !important; }
/* La columna de datos no es una tarjeta: en el diseno va sin fondo.
   Solo el bloque del formulario lleva caja. */
.elementor-element-1a2b094, /* La columna de datos no es una tarjeta: en el diseno va sin fondo.
   Solo el bloque del formulario lleva caja. */
.elementor-element-en2b094{
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.elementor-element-1a2b094 > .e-con-inner, .elementor-element-en2b094 > .e-con-inner{ padding: 0 !important; }
/* Las rejillas de tarjetas traian un relleno propio de 10 px que metia
   las tarjetas hacia dentro y las descuadraba respecto a la foto y al
   titular de la seccion. Los tres bordes deben caer en la misma linea. */
.elementor-element-1a2b044, /* Las rejillas de tarjetas traian un relleno propio de 10 px que metia
   las tarjetas hacia dentro y las descuadraba respecto a la foto y al
   titular de la seccion. Los tres bordes deben caer en la misma linea. */
.elementor-element-en2b044, .elementor-element-1a2b059, .elementor-element-en2b059, .elementor-element-1a2b019, .elementor-element-en2b019, .dja-lista-fojas{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elementor-element-1a2b044 > .e-con-inner, .elementor-element-en2b044 > .e-con-inner, .elementor-element-1a2b059 > .e-con-inner, .elementor-element-en2b059 > .e-con-inner, .elementor-element-1a2b019 > .e-con-inner, .elementor-element-en2b019 > .e-con-inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================
   CONTACTO, con la estructura del HTML de referencia
   La seccion es una rejilla de dos columnas desde arriba: la
   izquierda lleva foja, titular, bajada y datos; la derecha,
   el formulario. Antes el titular iba encima a todo el ancho.
   ========================================================== */
#contacto > .e-con-inner{ padding-top: 104px !important; padding-bottom: 104px !important; }
/* Los datos de contacto: separadores finos y respiro de 18 px, como los bloques del diseno. */
.elementor-element-1a2b08e, como los bloques del diseno. */
.elementor-element-en2b08e, .elementor-element-1a2b090, .elementor-element-en2b090, .elementor-element-1a2b092, .elementor-element-en2b092{
  padding-top: 14px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid rgba(176,141,87,.18);
  margin: 0 !important;
}
.elementor-element-1a2b08e, .elementor-element-en2b08e{ margin-top: 26px !important; }
/* El valor va pegado a su etiqueta: 4 px, no un bloque aparte. */
.elementor-element-1a2b08f, no un bloque aparte. */
.elementor-element-en2b08f, .elementor-element-1a2b091, .elementor-element-en2b091, .elementor-element-1a2b093, .elementor-element-en2b093{
  padding: 0 0 14px !important;
  margin: 4px 0 0 !important;
}
.elementor-element-1a2b093, .elementor-element-en2b093{ border-bottom: 1px solid rgba(176,141,87,.18); }
/* El telefono es la pieza destacada del bloque. */
.elementor-element-1a2b08f p, /* El telefono es la pieza destacada del bloque. */
.elementor-element-en2b08f p, .elementor-element-1a2b08f a, .elementor-element-en2b08f a{
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif !important;
  font-size: 23px !important; line-height: 1.2 !important;
  color: var(--dja-bronce) !important;
}
/* El sello "Confidencial" va arriba a la derecha del formulario. */
.elementor-element-1a2b098, /* El sello "Confidencial" va arriba a la derecha del formulario. */
.elementor-element-en2b098{ position: relative; }
.elementor-element-1a2b095, .elementor-element-en2b095{
  position: absolute; top: 18px; right: 18px; z-index: 2; width: auto !important;
  transform: rotate(-4deg);   /* sello de goma, ligeramente torcido */
}
.elementor-element-1a2b095 .elementor-heading-title, .elementor-element-en2b095 .elementor-heading-title{
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid rgba(176,141,87,.5);
  border-radius: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dja-bronce);
}

/* ---- Formulario a la medida exacta del diseno ----
   El HTML lo tiene compacto: 32 px de caja, 18 px entre campos, y label
   pegado a su campo. Contact Form 7 envuelve cada campo en un <p>, que
   trae margenes propios de 1em y era lo que inflaba el bloque. */
.wpcf7 form{ margin: 0 !important; padding: 0 !important; }
.wpcf7 .dja-campo{
  margin: 0 0 18px !important;
  gap: 8px;
}
.wpcf7 .dja-campo label{ margin: 0; }
/* Red de seguridad: si CF7 vuelve a meter saltos automaticos, que no
   sumen altura. Cada <br> suyo mide 19 px. */
.wpcf7 .dja-campo br, .wpcf7 .dja-enviar br{ display: none !important; }
.wpcf7 .wpcf7-form-control-wrap{ display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="tel"]{
  height: 48px; min-height: 48px; padding: 13px 14px; margin: 0;
}
.wpcf7 textarea{ height: 121px; min-height: 121px; margin: 0; }
.wpcf7 .dja-enviar{ margin: 0 !important; }
.wpcf7 input[type="submit"]{ height: 54px; min-height: 54px; padding: 0 22px; }
.wpcf7 form .wpcf7-response-output{ margin: 14px 0 0 !important; }
/* Nota al pie del formulario, pegada al boton. */
.elementor-element-1a2b097, pegada al boton. */
.elementor-element-en2b097{ margin: 18px 0 0 !important; }
.elementor-element-1a2b097 p, .elementor-element-en2b097 p{ margin: 0 !important; }
/* El bloque no debe dejar aire muerto al final. */
.elementor-element-1a2b098 > .e-con-inner, /* El bloque no debe dejar aire muerto al final. */
.elementor-element-en2b098 > .e-con-inner{ padding: 0 !important; gap: 0 !important; }
.elementor-element-1a2b096, .elementor-element-en2b096{ margin: 0 !important; }
/* La balanza es marca de agua del panel "Tu ventaja", no un bloque en
   flujo: en el diseno mide 190 px y se apoya arriba a la derecha, detras del texto. Suelta ocupaba 458 px de ancho y empujaba todo. */
.elementor-element-1a2b07d, detras del texto. Suelta ocupaba 458 px de ancho y empujaba todo. */
.elementor-element-en2b07d{ position: relative; overflow: hidden; }
.elementor-element-1a2b079, .elementor-element-en2b079{
  position: absolute !important;
  top: 10px; right: 6px; z-index: 0;
  width: 190px !important; max-width: 190px !important;
  margin: 0 !important; pointer-events: none;
  opacity: .5;
}
.elementor-element-1a2b079 img, .elementor-element-en2b079 img{ width: 190px !important; height: auto !important; }
/* El texto del panel va por delante de la marca de agua. */
.elementor-element-1a2b07d > .e-con-inner > *:not(.elementor-element-1a2b079), /* El texto del panel va por delante de la marca de agua. */
.elementor-element-en2b07d > .e-con-inner > *:not(.elementor-element-en2b079), .elementor-element-1a2b07d > *:not(.elementor-element-1a2b079), .elementor-element-en2b07d > *:not(.elementor-element-en2b079){ position: relative; z-index: 1; }

/* El contenedor interno de cada foja traia 28 px propios arriba y abajo
   que se sumaban a los de la ficha: 92 px de relleno donde el diseno usa
   40. El relleno vive en la ficha, el interior va a cero. */
.dja-lista-fojas > .e-con > .e-con-inner{
  padding: 0 !important;
  margin: 0 !important;
  row-gap: 0 !important;
}
.dja-lista-fojas > .e-con > .e-con > .e-con-inner,
.dja-lista-fojas > .e-con > .e-con-inner > .e-con > .e-con-inner{
  padding: 0 !important; row-gap: 0 !important;
}
/* Titulo y descripcion, juntos como en el diseno. */
.dja-lista-fojas .elementor-widget-heading{ margin-bottom: 6px !important; }
.dja-lista-fojas .elementor-widget-text-editor,
.dja-lista-fojas .elementor-widget-text-editor p{ margin: 0 !important; }
/* La balanza es una marca de agua discreta: en el diseno apenas se
   intuye detras del texto. Al 50 por ciento competia con el contenido. */
.elementor-element-1a2b079, /* La balanza es una marca de agua discreta: en el diseno apenas se
   intuye detras del texto. Al 50 por ciento competia con el contenido. */
.elementor-element-en2b079{ opacity: .12 !important; }

/* ==========================================================
   PAGINAS LEGALES (aviso de privacidad y terminos)
   Columna estrecha de lectura, con el mismo lenguaje del sitio.
   ========================================================== */
.dja-legal-wrap{ background: var(--dja-bg); }
.dja-legal{
  max-width: 720px; margin: 0 auto;
  color: var(--dja-txt-2);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  font-size: 15px; line-height: 1.75;
}
.dja-foja-legal{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dja-txt-3); margin: 0 0 18px;
}
.dja-foja-legal::before{
  content:""; display:inline-block; width:26px; height:1px;
  margin-right:12px; vertical-align:middle; background: var(--dja-bronce-2);
}
.dja-legal h1{
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  font-size: 38px; line-height: 1.16; font-weight: 400;
  color: var(--dja-txt); margin: 0 0 10px;
}
.dja-legal-fecha{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dja-txt-3);
  padding-bottom: 26px; margin: 0 0 34px;
  border-bottom: 1px solid var(--dja-borde);
}
.dja-legal h2{
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  font-size: 19px; line-height: 1.35; font-weight: 400;
  color: var(--dja-txt);
  margin: 38px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--dja-borde);
}
.dja-legal h2:first-of-type{ border-top: 0; padding-top: 0; margin-top: 0; }
.dja-legal p{ margin: 0 0 14px; }
.dja-legal strong{ color: var(--dja-txt); font-weight: 600; }
.dja-legal ul, .dja-legal ol{ margin: 0 0 14px; padding-left: 20px; }
.dja-legal li{ margin-bottom: 7px; }
.dja-legal a{ color: var(--dja-bronce); }
.dja-legal a:hover{ color: var(--dja-txt); }
.dja-legal-volver{
  margin: 46px 0 0; padding-top: 26px;
  border-top: 1px solid var(--dja-borde);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
@media (max-width: 767px){
  .dja-legal h1{ font-size: 30px; }
  .dja-legal{ font-size: 15px; }
}
/* Nota de privacidad bajo el formulario: el consentimiento se informa
   en el momento en que se otorga, no solo en una pagina aparte. */
.elementor-element-1a2b097 a, no solo en una pagina aparte. */
.elementor-element-en2b097 a{ color: var(--dja-bronce); text-decoration: underline; }

/* Selector de idioma en la cabecera, junto al lema. */
.dja-idioma{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: #A8A49A !important;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid rgba(176,141,87,.35);
  border-radius: 2px;
  white-space: nowrap;
}
.dja-idioma:hover{
  color: var(--dja-bg-dark) !important;
  background: var(--dja-bronce-2);
  border-color: var(--dja-bronce-2);
}
.dja-header-fila2 .elementor-widget-html:last-child{ flex: 0 0 auto; }
@media (max-width: 900px){
  /* Cuando el lema se retira, el selector se queda: es lo util de los dos. */
  .dja-idioma{ font-size: 10px; padding: 4px 8px; }
}
/* ---- Legibilidad de la cabecera ----
   Los 10.5 px del diseno original, con ese espaciado y ese gris, cuestan
   de leer en pantalla. Se suben los tres textos de la cabecera y se
   aprieta un poco el espaciado para compensar el ancho ganado. */
.dja-header-fila1 .elementor-widget-heading:last-child .elementor-heading-title, .elementor-element-1a2b003 .elementor-heading-title, .elementor-element-en2b003 .elementor-heading-title{
  font-size: 10px !important;      /* "Abogados penalistas", antes 8.5 */
  letter-spacing: .16em !important;
  color: #A8A49A !important;
}
/* El nombre de la marca acompana la subida. */
.elementor-element-1a2b002 .elementor-heading-title, /* El nombre de la marca acompana la subida. */
.elementor-element-en2b002 .elementor-heading-title{ font-size: 22px !important; }

@media (max-width: 1023px){
  .elementor .dja-menu a{ font-size: 12px; letter-spacing: .11em; }
}
@media (max-width: 560px){
  .elementor .dja-menu a{ font-size: 11.5px; letter-spacing: .09em; }
  .dja-idioma{ font-size: 11px; }
}

/* ---- Cabecera en movil ----
   La fila del menu no heredaba margen lateral y quedaba pegada al borde,
   desalineada respecto al logo. Se le da el mismo margen y se compacta,
   que a 390 px la cabecera llegaba a ocupar 299 px de alto. */
@media (max-width: 767px){
  .dja-header-fila1,
  .dja-header-fila2{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .dja-header-fila1{ padding-top: 10px !important; padding-bottom: 10px !important; }
  .dja-header-fila2{ padding-top: 9px !important; padding-bottom: 9px !important; row-gap: 8px; }

  /* Los cinco enlaces no caben en una linea a 390 px. En vez de
     esconderlos tras un desplazamiento, el menu envuelve en dos filas:
     se ven todos y no hay que descubrir que hay mas. */
  .dja-header-fila2 .dja-menu{
    flex-wrap: wrap !important;
    overflow: visible !important;
    column-gap: 18px; row-gap: 8px;
    padding-right: 6px;
  }
  .dja-header-fila2{ flex-wrap: nowrap !important; align-items: flex-start; }
  .dja-header-fila2 .elementor-widget-html:first-child{ flex: 1 1 auto; min-width: 0; }
  .dja-header-fila2 .dja-idioma{ flex: 0 0 auto; margin-top: 2px; }

  /* El logo y su bloque de marca, mas compactos. */
  .dja-header-fila1 .elementor-widget-image img{ width: 44px !important; }
}

/* ==== VIDEO DEL CONGRESO ====
   Portada alojada aqui + carga diferida: YouTube no recibe ninguna peticion
   hasta que la persona hace clic. Asi el aviso de privacidad sigue siendo
   cierto para quien solo navega. El iframe lo inyecta dja-frontend.php. */
.dja-video-sec > .e-con-inner{ max-width: 820px; margin-left: auto; margin-right: auto; }
.dja-video-sec > .e-con-inner > .elementor-widget{ width: 100%; }
.dja-video-sec .elementor-widget-heading + .elementor-widget-heading{ margin-top: 12px; }
.dja-video{ margin-top: 26px; }
.dja-video-lanzar{
  display: block; position: relative; width: 100%; padding: 0; line-height: 0;
  border: 1px solid rgba(176,141,87,.28); border-radius: 2px;
  background: #0F1115; cursor: pointer; overflow: hidden;
}
.dja-video-lanzar img{
  width: 100%; height: auto; display: block; opacity: .58;
  transition: opacity .25s ease, transform .5s ease;
}
.dja-video-lanzar:hover img,
.dja-video-lanzar:focus-visible img{ opacity: .82; transform: scale(1.02); }
.dja-video-lanzar:focus-visible{ outline: 2px solid #D8BC85; outline-offset: 3px; }
.dja-video-play{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(176,141,87,.94); display: grid; place-items: center;
  transition: transform .25s ease;
}
.dja-video-lanzar:hover .dja-video-play{ transform: translate(-50%,-50%) scale(1.07); }
.dja-video-play::after{
  content: ""; width: 0; height: 0; margin-left: 6px;
  border-left: 22px solid #0F1115;
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
}
.dja-video-cta{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 15px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #ECE7DD; text-align: left; line-height: 1.4;
  background: linear-gradient(to top, rgba(15,17,21,.94), rgba(15,17,21,0));
}
.dja-video iframe{
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: 2px;
}
@media (max-width: 767px){
  .dja-video-sec{ padding-left: 20px !important; padding-right: 20px !important; }
  .dja-video-play{ width: 56px; height: 56px; }
  .dja-video-play::after{ margin-left: 4px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
  .dja-video-cta{ font-size: 10px; padding: 12px 14px; }
}


/* ==== HERO DINAMICO ====
   Seis fotos en capas con fundido lento. Se mueve SOLO el fondo: titular,
   parrafo y botones nunca cambian de sitio; en un sitio penal la gente
   llega asustada y que se muevan los botones estorba.

   OJO: el velo NO puede ir en .dja-hero::after, que ya esta ocupado por el
   filete de bronce del pie del hero (height:1px). Si se pone ahi, el velo
   hereda ese 1px, no se ve, y ademas se pierde el filete. Por eso el velo
   es un elemento real dentro de .dja-hero-fondo.

   Las fotos se oscurecen con filter porque tres de las seis estan tomadas
   a pleno sol y, sin eso, el texto blanco no se lee encima. Asi las ocho
   caen en el mismo rango tonal y el hero se ve parejo cambie la que cambie. */
.dja-hero-fondo{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dja-hero-fondo i{
  position: absolute; inset: 0; z-index: 1; display: block;
  background-size: cover; background-position: center 38%;
  filter: brightness(.55) saturate(.78) contrast(1.06);
  opacity: 0; will-change: opacity;
  animation: djaHeroFundido 48s infinite;
}
/* 8 fotos x 6 s = 48 s de ciclo. Si se agrega o quita una foto en
   dja_hero_fondos(), hay que ajustar aqui las tres cosas a la vez: la
   duracion, la lista de retrasos y los porcentajes del keyframe. Los
   porcentajes salen de dividir los segundos entre la duracion:
   1 s de fundido = 2.08 %, 6 s visible = 12.5 %, 7 s = 14.58 %. */
.dja-hero-fondo i:nth-child(1){ animation-delay: 0s; }
.dja-hero-fondo i:nth-child(2){ animation-delay: 6s; }
.dja-hero-fondo i:nth-child(3){ animation-delay: 12s; }
.dja-hero-fondo i:nth-child(4){ animation-delay: 18s; }
.dja-hero-fondo i:nth-child(5){ animation-delay: 24s; }
.dja-hero-fondo i:nth-child(6){ animation-delay: 30s; }
.dja-hero-fondo i:nth-child(7){ animation-delay: 36s; }
.dja-hero-fondo i:nth-child(8){ animation-delay: 42s; }
@keyframes djaHeroFundido{
  0%     { opacity: 0; }
  2.08%  { opacity: 1; }
  12.5%  { opacity: 1; }
  14.58% { opacity: 0; }
  100%   { opacity: 0; }
}
/* el velo: encima de las fotos, debajo del texto */
.dja-hero-velo{
  position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none;
  background: linear-gradient(100deg,
    rgb(15,17,21) 0%,
    rgba(15,17,21,.94) 40%,
    rgba(15,17,21,.72) 72%,
    rgba(15,17,21,.84) 100%);
}
.dja-hero > .e-con-inner, .dja-hero > .elementor-element{ position: relative; z-index: 2; }
@media (max-width: 767px){
  .dja-hero-velo{ background: linear-gradient(180deg, rgba(15,17,21,.90) 0%, rgba(15,17,21,.86) 55%, rgba(15,17,21,.93) 100%); }
  .dja-hero-fondo i{ background-position: center 42%; }
}
/* Quien pidio menos movimiento en su sistema ve una sola imagen fija */
@media (prefers-reduced-motion: reduce){
  .dja-hero-fondo i{ animation: none; opacity: 0; }
  .dja-hero-fondo i:nth-child(1){ opacity: 1; }
}
/* ==== LOGO DEL PIE ====
   Elementor lo dejaba centrado dentro de su columna. Medido contra el HTML
   de referencia: ahi el logo arranca en el mismo pixel que el parrafo de
   abajo (los dos en 70 px), o sea alineado a la izquierda, no centrado.
   Centrado se notaba corrido a la derecha en pantallas medianas, porque el
   parrafo no llena toda la columna y el centro optico del texto queda mas
   a la izquierda que el centro del contenedor. */
.dja-col-pie .elementor-widget-image,
.dja-col-pie .elementor-widget-image .elementor-widget-container,
.dja-col-pie .elementor-widget-image figure{
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

/* ---------- 9. Triaje del formulario: aviso de urgencia + etapa ----------
   La clienta pidio casillas en vez de texto libre para poder priorizar de un
   vistazo, y su propio aviso de privacidad prohibe la narracion de hechos: un
   desplegable no admite relato. Su "opcion 1" era una instruccion de contacto
   urgente, no algo seleccionable, asi que vive ARRIBA del campo y siempre
   visible. Enlaza a WhatsApp porque su linea telefonica normal no recibe. */
.wpcf7 .dja-aviso-urgente{
  margin: 0 0 20px !important;
  padding: 14px 16px;
  background: rgba(216,188,133,.05);
  border: 1px solid var(--dja-borde);
  border-left: 2px solid var(--dja-bronce-2);
  border-radius: 2px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, sans-serif;
  font-size: 13.5px; line-height: 1.5;
  color: var(--dja-txt-2);
}
.wpcf7 .dja-aviso-urgente strong{ color: var(--dja-txt); font-weight: 600; }
.wpcf7 .dja-aviso-urgente br{ display: none !important; }
.wpcf7 a.dja-aviso-btn{
  display: inline-block; margin-top: 11px; padding: 9px 15px;
  border: 1px solid var(--dja-bronce-2); border-radius: 2px;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dja-bronce) !important; text-decoration: none;
}
.wpcf7 a.dja-aviso-btn:hover, .wpcf7 a.dja-aviso-btn:focus{
  background: var(--dja-bronce); color: var(--dja-bg-dark) !important;
}

/* El desplegable copia exactamente la caja de los inputs de texto para que la
   columna del formulario no cambie de alto. La flecha se dibuja a mano porque
   appearance:none deja el control desnudo. */
.wpcf7 select{
  width: 100%; box-sizing: border-box;
  height: 48px; min-height: 48px; margin: 0;
  padding: 13px 38px 13px 14px;
  background-color: var(--dja-bg-dark);
  border: 1px solid var(--dja-borde); border-radius: 2px;
  color: var(--dja-txt);
  font-family: Georgia, serif; font-size: 16px;
  appearance: none; -webkit-appearance: none;
  background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20fill%3D%22%23B08D57%22%20d%3D%22M6%208%200%200h12z%22%2F%3E%3C%2Fsvg%3E);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}
.wpcf7 select:focus{ outline: none; border-color: var(--dja-bronce-2); }
/* El menu desplegado lo pinta el sistema operativo: sin esto, en fondo oscuro
   algunos navegadores lo dejan con texto claro sobre blanco. */
.wpcf7 select option{ background: var(--dja-bg-dark); color: var(--dja-txt); }


/* ---------- 10. Balanza del hero ----------
   Pedido de la clienta: la balanza de su logo a la derecha del hero, quieta
   y apenas insinuada.

   OJO, esto costo dos intentos y conviene no repetirlos:
   1) .dja-hero::after NO sirve: ya sostiene el filete de bronce del pie del
      hero (height:1px). Usarlo mata el filete.
   2) .dja-hero::before TAMPOCO: Elementor lo usa para el velo oscuro que el
      hero trae configurado desde sus propios ajustes
      (background-color: rgba(15,17,21,.78) con inset:0). Al reutilizarlo, ese
      velo se encoge al tamano de la balanza y aparece un RECTANGULO OSCURO
      visible sobre la foto, ademas de que el hero pierde ese oscurecido.

   La balanza cuelga entonces de .dja-hero-velo::after, que esta libre y cuyo
   elemento ya cubre el hero completo, asi que sirve de caja de referencia.
   Al ser hijo del velo pinta encima de el y debajo del titular. */
.dja-hero-velo::after{
  content: "";
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 400px; height: 375px;   /* la imagen es 490x459, proporcion 1.067 */
  background: url("/wp-content/uploads/dja/balanza-sola.png") no-repeat center / contain;
  opacity: .16;
  filter: blur(1px) saturate(.85);
  pointer-events: none;
}
@media (max-width: 1024px){
  .dja-hero-velo::after{ width: 280px; height: 262px; right: 2%; opacity: .13; }
}
@media (max-width: 767px){
  /* En movil el titular ocupa todo el ancho: la balanza se recoge abajo a la
     derecha y baja de opacidad para no estorbar la lectura. */
  .dja-hero-velo::after{
    width: 200px; height: 187px;
    right: -10px; top: auto; bottom: 64px; transform: none;
    opacity: .09;
  }
}