/* =============================================================================
   rediseno.css — Abogados VIP
   -----------------------------------------------------------------------------
   Se carga la última y redefine sobre la plantilla existente. No toca el HTML,
   así que el CRM, los formularios y la estructura siguen intactos: quitando la
   línea que la enlaza, el sitio vuelve al diseño anterior.

   Blanco y dorado: invierte la fórmula del despacho oscuro con dorado que usa
   todo el sector. Mismo material noble, fondo claro. De paso el logo funciona
   tal cual, sin filtros.

   El dorado sobre blanco pierde contraste, así que se trabaja con dos tonos:
   uno oscuro para texto y bordes, otro claro para fondos oscuros.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700&family=Archivo:wght@400;500;600&display=swap');

:root{
  --blanco:  #FFFFFF;
  --hueso:   #FAF8F3;
  --tinta:   #1A1713;
  --oro:     #A8862F;
  --oro-cla: #D4B15E;
  --gris:    #756F63;
  --borde:   #E4DFD3;
  --serif:   "Literata", Georgia, serif;
  --sans:    "Archivo", system-ui, -apple-system, sans-serif;
}

/* ---- Base ------------------------------------------------------------- */
body{
  background: var(--blanco) !important;
  color: var(--tinta) !important;
  font-family: var(--sans) !important;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

p{ color: var(--tinta); opacity: .84; max-width: 68ch; }

h1, h2, h3, h4,
.heading, .pb_heading{
  font-family: var(--serif) !important;
  color: var(--tinta) !important;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.18;
  text-transform: none !important;
}
h1{ font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: .8rem; }
h3{ font-size: 1.22rem; font-weight: 600; }

a{ color: var(--oro); }
a:hover{ color: var(--tinta); }

/* ---- Cabecera --------------------------------------------------------- */
.probootstrap-navbar,
.navbar{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding: 1rem 0 !important;
}
.navbar .nav-link{
  font-family: var(--sans) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: .96rem;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{ color: var(--oro-cla) !important; }
img[src$="logo.webp"]{ max-height: 62px !important; width: auto; }

.dropdown-menu{
  border: 1px solid var(--borde);
  border-radius: 3px;
  box-shadow: 0 14px 38px rgba(26,23,19,.13);
  padding: .4rem 0;
}
.dropdown-item{ font-size: .94rem; padding: .55rem 1.1rem; color: var(--tinta); }
.dropdown-item:hover{ background: rgba(168,134,47,.09); color: var(--oro); }

/* ---- Hero ------------------------------------------------------------- */
/* Se recupera la fotografía: da contexto y peso en medio segundo, que es lo
   que un titular solo no consigue. El velo la oscurece lo justo. */
#section-home,
.pb_cover_v1{
  position: relative;
  background-image: url(../images/slide1.webp) !important;
  background-size: cover !important;
  background-position: center center !important;
  padding: 11rem 0 7rem !important;
  min-height: 0 !important;
}
#section-home::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,12,9,.93) 0%, rgba(14,12,9,.74) 48%, rgba(14,12,9,.44) 100%);
  z-index: 0;
}
#section-home .container{ position: relative; z-index: 1; }
.pb_cover_v1 .row{ min-height: 0 !important; align-items: center !important; }

#section-home h1,
#section-home .heading{ color: #fff !important; max-width: 15ch; margin-bottom: 1.3rem; }
#section-home h1::after{
  content: "";
  display: block;
  width: 76px; height: 2px;
  background: var(--oro-cla);
  margin-top: 1.4rem;
}
#section-home p{ color: rgba(255,255,255,.82) !important; opacity: 1; }
#section-home .sub-heading p:first-child{
  font-size: 1.16rem; line-height: 1.65; margin-bottom: 1.8rem !important; max-width: 46ch;
}
#section-home .text-center{ text-align: left !important; }

.avip-claves{
  list-style: none; margin: 0 0 2rem; padding: 0;
  border-left: 2px solid var(--oro-cla);
}
.avip-claves li{
  padding: .4rem 0 .4rem 1.1rem;
  color: rgba(255,255,255,.88);
  font-size: 1rem;
}

/* La traza sale del hero: encaja mejor en la sección del método */
#section-home .avip-traza{ display: none !important; }

/* ---- Botones ---------------------------------------------------------- */
.btn, .btn-primary, .pb_btn-primary{
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: .97rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 2px !important;
  padding: .9rem 1.8rem !important;
  border: 1px solid var(--oro) !important;
  background: var(--oro) !important;
  color: #fff !important;
  transition: background .2s, border-color .2s;
}
.btn:hover, .btn-primary:hover{
  background: #8E7026 !important; border-color: #8E7026 !important; color: #fff !important;
}
#section-home .btn{
  background: var(--oro-cla) !important;
  border-color: var(--oro-cla) !important;
  color: #1A1713 !important;
}
#section-home .btn:hover{ background: #fff !important; border-color: #fff !important; }

/* ---- Secciones -------------------------------------------------------- */
.site-section{ padding: 4.8rem 0; }
.site-section.bg-light{ background: var(--hueso) !important; }

.pb_section_v1,
#section-why-us{ background: var(--tinta) !important; }
.pb_section_v1 h2, .pb_section_v1 h3,
#section-why-us h2, #section-why-us h3{ color: #fff !important; }
.pb_section_v1 p, #section-why-us p{ color: rgba(255,255,255,.74) !important; opacity: 1; }
.pb_section_v1 .flaticon, #section-why-us .flaticon{ color: var(--oro-cla) !important; }

.heading-border-top::before,
.heading-border-top::after,
.pb_heading-border::before{ background: var(--oro) !important; }

/* ---- Tarjetas --------------------------------------------------------- */
.pb_feature_v1{
  padding: 1.8rem 1.6rem;
  border: 0;
  border-left: 2px solid var(--borde);
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  transition: border-color .2s;
}
.pb_feature_v1:hover{ border-left-color: var(--oro); }
#section-why-us .pb_feature_v1{ border-left-color: rgba(212,177,94,.3); }
#section-why-us .pb_feature_v1:hover{ border-left-color: var(--oro-cla); }

.card, .single-item{
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 3px;
  box-shadow: none !important;
}

/* ---- Traza del método ------------------------------------------------- */
.avip-traza svg{ width: 100%; max-width: 400px; height: auto; display: block; }
.avip-traza .tz-lbl{ font-family: var(--sans); font-size: 13px; fill: var(--gris); }
.avip-traza .tz-fin{ fill: var(--oro); font-weight: 600; }
.avip-traza-pie{
  margin-top: 1.1rem; max-width: 34ch; font-size: .92rem; line-height: 1.6;
  color: var(--gris); border-left: 2px solid var(--borde); padding-left: 1rem;
}

/* ---- Iconos y acordeón ------------------------------------------------ */
.flaticon, .pb_icon_v1 i, .icon{ color: var(--oro) !important; }
[data-toggle="collapse"]{ color: var(--tinta) !important; }
[data-toggle="collapse"]:hover,
[aria-expanded="true"]{ color: var(--oro) !important; }
.card-header, .accordion .card{ border-color: var(--borde) !important; background: transparent; }

/* ---- Formulario ------------------------------------------------------- */
.form-control{
  font-family: var(--sans); font-size: 1rem;
  border: 1px solid var(--borde); border-radius: 2px;
  padding: .8rem 1rem; background: var(--blanco); color: var(--tinta);
  box-shadow: none;
}
.form-control:focus{ border-color: var(--oro); box-shadow: 0 0 0 3px rgba(168,134,47,.15); }
label{ font-size: .9rem; font-weight: 500; color: var(--gris); }

/* ---- Imágenes --------------------------------------------------------- */
img{ border-radius: 2px; max-width: 100%; height: auto; }
.images img{ box-shadow: 0 18px 44px rgba(26,23,19,.16); }

/* ---- Pie -------------------------------------------------------------- */
.pb_footer{ background: var(--tinta) !important; padding: 3rem 0 2.2rem; }
.pb_footer p, .pb_footer a{ color: rgba(255,255,255,.6) !important; }
.pb_footer a:hover{ color: var(--oro-cla) !important; }
.pb_footer .text-muted{ color: rgba(255,255,255,.4) !important; font-size: .84rem; }

/* ---- Accesibilidad ---------------------------------------------------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--oro); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }

/* ---- Móvil ------------------------------------------------------------ */
@media (max-width: 767px){
  body{ font-size: 16px; }
  #section-home,
  .pb_cover_v1{ padding: 8rem 0 4rem !important; background-position: 62% center !important; }
  #section-home h1{ font-size: 2.2rem; max-width: 100%; }
  #section-home,
  #section-home .row,
  #section-home .col-md-6,
  #section-home .text-center{ text-align: left !important; }
  .site-section{ padding: 3.2rem 0; }
  .navbar{ background: rgba(26,23,19,.94) !important; }
}

/* ---- Alineación del hero ---------------------------------------------- */
/* La plantilla empujaba el contenido a la derecha con justify-content-end.
   El titular debe empezar donde empieza el logo. */
#section-home .row{ justify-content: flex-start !important; }
#section-home .col-md-6{ flex: 0 0 56%; max-width: 620px; }

/* La foto tiene al abogado a la izquierda: el velo se refuerza en ese lado
   para que el texto no compita con la figura. */
#section-home::after{
  background: linear-gradient(95deg, rgba(12,10,7,.95) 0%, rgba(12,10,7,.88) 42%, rgba(12,10,7,.45) 100%) !important;
}

@media (max-width: 767px){
  #section-home .col-md-6{ flex: 0 0 100%; max-width: 100%; }
  #section-home::after{ background: rgba(12,10,7,.88) !important; }
}

/* =============================================================================
   Contraste
   -----------------------------------------------------------------------------
   Revisión con el criterio de la WCAG (4.5:1 para texto normal). Varios
   elementos heredaban colores del tema anterior y quedaban ilegibles: texto
   oscuro sobre la banda oscura, dorado claro sobre blanco, etiquetas en tonos
   pastel del formulario.
   ============================================================================= */

/* Enlaces y títulos dentro de la banda oscura: iban en tinta sobre tinta */
.pb_section_v1 a,
#section-why-us a,
.pb_section_v1 .pb_font-18,
#section-why-us .pb_font-18,
.pb_section_v1 [data-toggle="collapse"],
#section-why-us [data-toggle="collapse"]{
  color: #fff !important;
}
.pb_section_v1 [data-toggle="collapse"]:hover,
#section-why-us [data-toggle="collapse"]:hover,
.pb_section_v1 [aria-expanded="true"],
#section-why-us [aria-expanded="true"]{
  color: var(--oro-cla) !important;
}
.pb_section_v1 li,
#section-why-us li,
.pb_section_v1 span,
#section-why-us span{ color: rgba(255,255,255,.8) !important; }

/* El dorado claro no se lee sobre blanco: se reserva para fondos oscuros */
.nav-link.active{ color: var(--oro) !important; }
body:not(.hero) .text-uppercase,
.site-section .text-uppercase{ color: var(--gris) !important; }

/* Etiquetas y textos de ayuda del formulario, en tonos pastel ilegibles */
label,
.av-phone-combo-hint,
.form-text,
small{ color: var(--gris) !important; }
.form-group label{ color: var(--tinta) !important; opacity: .82; }

/* Enlaces sueltos que heredaban colores del tema */
span.text-primary,
.text-info,
a.text-info{ color: var(--oro) !important; }

/* Botón dorado: el blanco sobre oro queda en 3,43:1. Con el oro oscuro
   y texto blanco sube por encima del mínimo. */
.btn, .btn-primary, .pb_btn-primary{
  background: #8E7026 !important;
  border-color: #8E7026 !important;
  color: #fff !important;
}
.btn:hover, .btn-primary:hover{
  background: #75591C !important; border-color: #75591C !important;
}
/* En el hero, sobre foto oscura, el dorado claro con texto oscuro va sobrado */
#section-home .btn{
  background: var(--oro-cla) !important;
  border-color: var(--oro-cla) !important;
  color: #1A1713 !important;
}
#section-home .btn:hover{ background: #fff !important; border-color: #fff !important; }

/* "Ver más" venía en verde agua del tema original: 1,37:1 sobre blanco.
   Al dorado oscuro, que es legible y coherente con la marca. */
.pb_section_v2 span,
.pb_media_v1 span,
.pb_feature_v1 span,
a span[class*="pb_color"],
span[style*="a5e9db"],
span[class*="text-success"]{ color: var(--oro) !important; }

/* Cualquier resto del verde agua o el azul del tema */
[style*="#a5e9db"], [style*="#A5E9DB"],
.text-success, .pb_color-success{ color: var(--oro) !important; }

/* El "Ver más" del carrusel es un <span> sin clase dentro de .slide-text */
.slide-text span,
.slide-text a span{ color: var(--oro-cla) !important; font-weight: 600; }
.slide-text a:hover span{ color: var(--tinta) !important; }

/* El dorado como texto sobre blanco necesita el tono oscuro para superar
   el 4,5:1 que exige la WCAG. El claro se reserva a fondos oscuros. */
.site-section a:not(.btn),
.pb_section_v2 a:not(.btn){ color: #75591C !important; }
.site-section a:not(.btn):hover{ color: var(--tinta) !important; }

/* El enlace activo del menú seguía en el azul del tema */
.navbar .nav-link.active,
.navbar .nav-link:focus,
.nav-item.active .nav-link{ color: var(--oro-cla) !important; }

/* Sobre fondo claro (al hacer scroll la cabecera se ve sobre secciones
   blancas) el dorado claro no se lee: se usa el oscuro. */
.navbar.scrolled .nav-link,
.navbar.scrolled .nav-link.active{ color: var(--tinta) !important; }
.navbar.scrolled .nav-link.active{ color: #75591C !important; }

/* =============================================================================
   Correcciones de contraste sobre fondos oscuros de la plantilla
   -----------------------------------------------------------------------------
   Varias secciones traen imagen de fondo oscura o fondo partido (pb_bg-half).
   Al fijar el color de texto en tinta para todo el sitio, ahí quedaba negro
   sobre negro. Estas secciones necesitan texto en blanco.
   ============================================================================= */

/* Secciones con imagen de fondo oscurecida */
.cover-bg-black,
.cover-bg-opacity-4,
.pb_sm_py_cover,
.pb_bg-half{
  position: relative;
}
.cover-bg-black h1, .cover-bg-black h2, .cover-bg-black h3, .cover-bg-black h4,
.cover-bg-opacity-4 h1, .cover-bg-opacity-4 h2, .cover-bg-opacity-4 h3,
.pb_sm_py_cover h1, .pb_sm_py_cover h2, .pb_sm_py_cover h3{
  color: #fff !important;
}
.cover-bg-black p, .cover-bg-opacity-4 p,
.pb_sm_py_cover p,
.cover-bg-black li,
.cover-bg-black span{
  color: rgba(255,255,255,.84) !important;
  opacity: 1;
}
.cover-bg-black a:not(.btn),
.pb_sm_py_cover a:not(.btn){ color: var(--oro-cla) !important; }
.cover-bg-black a:not(.btn):hover{ color: #fff !important; }

/* El "Ver más" del carrusel va sobre la mitad oscura */
/* El carrusel va sobre tarjetas con imagen de fondo oscura */
.pb_bg-half .slide-text span,
.pb_bg-half .slide-text a span{ color: var(--oro-cla) !important; }

/* Los iconos de esas secciones, en dorado claro */
.cover-bg-black .flaticon{ color: var(--oro-cla) !important; }
.pb_bg-half .flaticon{ color: var(--oro) !important; }

/* ---- Hero: alto y posición del botón ---------------------------------- */
/* Medía 950 px porque la plantilla fija el alto de pantalla. El botón
   quedaba a 873 px, fuera del primer golpe de vista. */
#section-home,
.pb_cover_v1{
  padding: 9.5rem 0 3.5rem !important;
  min-height: 0 !important;
  height: auto !important;
}
#section-home .container,
.pb_cover_v1 .container{ min-height: 0 !important; height: auto !important; }

@media (max-width: 767px){
  #section-home,
  .pb_cover_v1{ padding: 7rem 0 3.5rem !important; }
}

/* pb_bg-half tiene fondo claro (#f8f9fa): su texto va en tinta */
.pb_bg-half h1, .pb_bg-half h2, .pb_bg-half h3, .pb_bg-half h4{ color: var(--tinta) !important; }
.pb_bg-half p, .pb_bg-half li{ color: var(--tinta) !important; opacity: .84; }

/* El botón de las secciones centradas no heredaba el centrado, porque .btn
   es inline-block dentro de un <p> que sí está centrado pero con margen. */
.text-center .btn,
.pb_sm_py_cover .btn,
.cover-bg-black .btn{ margin-left: auto; margin-right: auto; display: inline-block; }
.text-center p{ margin-left: auto; margin-right: auto; }

/* El enlace activo del menú seguía en el azul de la plantilla original.
   La clase la pone el JS al hacer scroll, con más peso que la mía. */
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-item.active > .nav-link,
nav .nav-link.active{ color: var(--oro-cla) !important; }

/* ---- Hero: cabe en pantalla ------------------------------------------- */
/* La cabecera ocupa 123 px. Con ese margen arriba y los espacios internos
   ajustados, el titular, la entradilla, las tres claves y el botón entran
   en una ventana de portátil sin necesidad de bajar. */
#section-home h1,
#section-home .heading{ margin-bottom: 1rem !important; }
#section-home h1::after{ margin-top: 1.1rem; }
#section-home .sub-heading p:first-child{
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.3rem !important;
}
.avip-claves{ margin-bottom: 1.5rem !important; }
.avip-claves li{ padding: .3rem 0 .3rem 1.1rem; font-size: .97rem; }
#section-home .btn{ padding: .8rem 1.6rem !important; }

/* En pantallas bajas se aprieta un poco más */
@media (max-height: 820px) and (min-width: 768px){
  #section-home,
  .pb_cover_v1{ padding: 8.5rem 0 2.5rem !important; }
  #section-home h1{ font-size: clamp(2rem, 4.2vw, 3.1rem); }
  #section-home .sub-heading p:first-child{ font-size: 1.04rem; margin-bottom: 1rem !important; }
  .avip-claves{ margin-bottom: 1.2rem !important; }
}

/* La fila del hero medía 855 px y centraba verticalmente una columna de 530,
   lo que empujaba el titular 160 px hacia abajo. Alineada arriba, el texto
   arranca justo después de la cabecera. */
#section-home .row,
.pb_cover_v1 .row{
  align-items: flex-start !important;
  min-height: 0 !important;
  height: auto !important;
}

/* =============================================================================
   Tarjetas del carrusel de Soluciones legales
   -----------------------------------------------------------------------------
   Cada tarjeta lleva una imagen de fondo oscura. Los títulos heredaban el
   color de tinta general del sitio y quedaban negro sobre negro.
   ============================================================================= */
.link-block,
.slide-text{
  color: #fff !important;
}
.link-block h1, .link-block h2, .link-block h3, .link-block h4,
.slide-text h1, .slide-text h2, .slide-text h3, .slide-text h4{
  color: #fff !important;
}
.link-block p, .slide-text p{
  color: rgba(255,255,255,.82) !important;
  opacity: 1;
}
/* "Ver más" sobre la tarjeta oscura: dorado claro */
.link-block span,
.slide-text span,
.slide-text a span,
.link-block a{ color: var(--oro-cla) !important; }
.link-block a:hover,
.link-block a:hover span{ color: #fff !important; }

/* Las flechas y los puntos del carrusel, visibles sobre claro */
.slick-prev:before, .slick-next:before{ color: var(--tinta) !important; }
.slick-dots li button:before{ color: var(--gris) !important; }
.slick-dots li.slick-active button:before{ color: var(--oro) !important; }

/* El "Ver más" de las tarjetas va sobre fondo oscuro: necesita el dorado
   claro, no el oscuro que se usa sobre blanco. Esta regla va al final para
   ganar a la de .site-section a:not(.btn). */
.site-section .link-block span,
.site-section .link-block a,
.site-section .slide-text span,
.link-block span,
.link-block a:not(.btn),
.slide-text span{ color: var(--oro-cla) !important; }
.link-block a:not(.btn):hover,
.link-block a:hover span{ color: #fff !important; }

/* Las FAQ comparten el componente de carrusel con Soluciones legales, pero
   van sobre fondo claro: su texto es tinta, no blanco. */
.slide_content-text,
.slide_content-text h1, .slide_content-text h2,
.slide_content-text h3, .slide_content-text h4{ color: var(--tinta) !important; }
.slide_content-text p{ color: var(--tinta) !important; opacity: .84; }

/* =============================================================================
   Páginas legales
   -----------------------------------------------------------------------------
   Fondo blanco, texto en tinta. La cabecera se hace sólida porque aquí no
   hay foto de fondo sobre la que flotar.
   ============================================================================= */
.avip-legal{
  background: var(--blanco);
  padding: 10rem 0 5rem;
}
.avip-legal h1{
  color: var(--tinta) !important;
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-bottom: .6rem;
}
.avip-legal h2{
  color: var(--tinta) !important;
  font-size: 1.35rem;
  margin: 2.4rem 0 .8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--borde);
}
.avip-legal p,
.avip-legal li{ color: var(--tinta) !important; opacity: .86; line-height: 1.75; }
.avip-legal a{ color: #75591C !important; text-decoration: underline; text-underline-offset: 3px; }
.avip-legal a:hover{ color: var(--tinta) !important; }
.avip-legal strong{ color: var(--tinta); opacity: 1; }
.avip-legal-migas{ font-size: .88rem; color: var(--gris) !important; margin-bottom: 1.4rem; }
.avip-legal-migas a{ color: var(--gris) !important; text-decoration: none; }
.avip-legal-fecha{ font-size: .9rem; color: var(--gris) !important; margin-bottom: 1rem; }

/* Tabla de cookies: desplazable en móvil para no romper el ancho */
.avip-tabla{ overflow-x: auto; margin: 1.2rem 0 .4rem; }
.avip-tabla table{ width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 540px; }
.avip-tabla th{
  text-align: left; padding: .7rem .8rem;
  border-bottom: 2px solid var(--oro);
  color: var(--tinta); font-weight: 600;
}
.avip-tabla td{
  padding: .75rem .8rem; vertical-align: top;
  border-bottom: 1px solid var(--borde);
  color: var(--tinta);
}
.avip-tabla td:first-child{ font-family: ui-monospace, monospace; font-size: .86rem; }

/* Cabecera sólida en las páginas sin hero */
body:has(.avip-legal) .navbar{ background: var(--tinta) !important; }

@media (max-width: 767px){
  .avip-legal{ padding: 8rem 0 3.5rem; }
}

/* =============================================================================
   Arreglos de móvil
   ============================================================================= */

/* Hamburguesa: iba en tinta y arriba del todo, sobre el hero oscuro, no se
   veía. En dorado se lee sobre fondo oscuro y sobre la cabecera clara. */
.navbar-toggler{
  border: 1px solid var(--oro-cla) !important;
  border-radius: 3px;
  padding: .35rem .6rem;
}
.navbar-toggler,
.navbar-toggler span,
.navbar-toggler i{ color: var(--oro-cla) !important; }
.navbar-toggler i{ font-size: 1.7rem; line-height: 1; }
.navbar-toggler:focus{ outline: 2px solid var(--oro-cla); outline-offset: 2px; }

/* «Sobre Abogados VIP»: en escritorio dos fotos superpuestas; en móvil se
   apilaban y quedaba desordenado. Se deja solo la principal. */
@media (max-width: 991px){
  #section-about .img2{ display: none !important; }
  #section-about .img1{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 0 !important;
    transform: none !important;
  }
}

/* Submenú de «Soluciones legales» dentro del menú plegado */
@media (max-width: 991px){
  .navbar .dropdown-menu.show{
    display: block;
    background: rgba(255,255,255,.04);
    border: 0;
    box-shadow: none;
    padding: .2rem 0 .4rem .8rem;
  }
  .navbar .dropdown-menu.show .dropdown-item{ color: rgba(255,255,255,.82) !important; padding: .55rem .8rem; }
  .navbar .dropdown-menu.show .dropdown-item:hover{ color: var(--oro-cla) !important; background: transparent; }
}

/* «Configurar cookies» es ahora un botón: que se vea como un enlace */
.avip-enlace{
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.pb_footer .avip-enlace{ color: rgba(255,255,255,.6) !important; }
.pb_footer .avip-enlace:hover{ color: var(--oro-cla) !important; }

/* El menú desplegado en móvil no tenía fondo propio: sobre el hero se leía
   el titular por debajo de las opciones. Fondo sólido para todo el panel. */
@media (max-width: 991px){
  .navbar{ background: var(--tinta) !important; }
  .navbar-collapse.show,
  .navbar-collapse.collapsing{
    background: var(--tinta) !important;
    margin: 0;
    padding: .4rem 0 1rem;
  }
  .navbar .dropdown-menu.show{ background: #26221C !important; }
}

/* =============================================================================
   Formulario por pasos — diseño propio de Abogados VIP
   -----------------------------------------------------------------------------
   Usa los recursos del resto de la web: la regla dorada corta bajo los
   títulos, el borde dorado a la izquierda de tarjetas y listas, la Literata en
   los títulos y el botón dorado del hero. Va sobre la tarjeta oscura que dibuja
   form-component.js (un degradado), así que el texto directo es claro.
   Campos a 16 px: por debajo, el iPhone amplía la página al escribir.
   ============================================================================= */
.avf-oculto{ display: none !important; }
.avf-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avf-paso{ border: 0; margin: 0; padding: 0; min-width: 0; }
.avf-paso[hidden]{ display: none !important; }

/* Progreso: cuatro tramos de regla dorada que se llenan al avanzar */
#brend-crm-form .avf-indicador{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  list-style: none; margin: 0 0 1.9rem; padding: 0;
}
#brend-crm-form .avf-ind{
  display: block; text-align: left; font-size: .78rem; line-height: 1.3;
  color: rgba(255,255,255,.6);
}
#brend-crm-form .avf-ind::before{
  content: ""; display: block; height: 3px; margin-bottom: .55rem;
  background: rgba(255,255,255,.16); border-radius: 2px; transition: background .25s;
}
#brend-crm-form .avf-ind.hecho::before,
#brend-crm-form .avf-ind.activo::before{ background: var(--oro-cla); }
#brend-crm-form .avf-ind.hecho{ color: rgba(255,255,255,.75); }
#brend-crm-form .avf-ind.activo{ color: #F3EEE3; font-weight: 600; }

/* Título del paso: Literata con la regla dorada corta de la web */
#brend-crm-form .avf-titulo{
  font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2;
  color: #FFFFFF !important; margin: 0 0 1.4rem; padding: 0; width: auto; border: 0; outline: none;
}
#brend-crm-form .avf-titulo::after{
  content: ""; display: block; width: 44px; height: 2px; background: var(--oro-cla); margin-top: .7rem;
}

/* Campos */
#brend-crm-form .form-control,
#brend-crm-form select,
#brend-crm-form input[type="text"],
#brend-crm-form input[type="email"],
#brend-crm-form input[type="tel"],
#brend-crm-form input[type="number"],
#brend-crm-form textarea{
  font-size: 16px !important; min-height: 50px; border-radius: 2px !important;
}
#brend-crm-form textarea{ min-height: 130px; line-height: 1.55; }
#brend-crm-form .form-control:focus,
#brend-crm-form select:focus,
#brend-crm-form textarea:focus{
  border-color: var(--oro-cla) !important;
  box-shadow: 0 0 0 3px rgba(212,177,94,.22) !important; outline: none;
}
#brend-crm-form label{
  font-size: .92rem !important; font-weight: 600 !important;
  color: #F3EEE3 !important; opacity: 1 !important; margin-bottom: .4rem;
}
#brend-crm-form small, #brend-crm-form .form-text,
#brend-crm-form .av-phone-combo-hint{ color: rgba(255,255,255,.72) !important; }

/* Categorías: filas con el borde dorado a la izquierda, como las tarjetas */
.avf-grupos{ display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.12); }
.avf-grupo{
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-left: 2px solid transparent; transition: border-color .2s;
}
.avf-grupo:has(.avf-grupo-cab[aria-expanded="true"]){ border-left-color: var(--oro-cla); }
.avf-grupo-cab{
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: 0; padding: 1rem .9rem; min-height: 54px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 600; text-align: left; color: #F3EEE3 !important;
}
.avf-grupo-cab[aria-expanded="true"]{ color: var(--oro-cla) !important; }
.avf-mas{ color: var(--oro-cla); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.avf-grupo-cab[aria-expanded="true"] .avf-mas{ transform: rotate(45deg); }
.avf-opciones{ display: grid; gap: .45rem; padding: 0 .9rem 1.1rem; }
.avf-opciones[hidden]{ display: none; }

/* Opciones: borde a la izquierda que se enciende en dorado al elegir */
.avf-op{
  min-height: 46px; padding: .65rem .9rem; border: 0; border-left: 2px solid rgba(255,255,255,.24);
  border-radius: 0; background: rgba(255,255,255,.05); color: #F3EEE3;
  font: inherit; font-size: .95rem; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.avf-op[aria-pressed="true"]{
  border-left-color: var(--oro-cla); background: rgba(212,177,94,.16); color: #FFFFFF; font-weight: 600;
}
.avf-op[aria-pressed="true"]::after{ content: "✓"; float: right; margin-left: .6rem; color: var(--oro-cla); }
.avf-fuentes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .45rem; margin-bottom: .7rem; }

/* Navegación: el botón dorado del hero */
.avf-nav{ display: flex; gap: .8rem; align-items: center; justify-content: flex-end; margin-top: 1.6rem; flex-wrap: wrap; }
.avf-nav .form-group{ margin: 0; flex: 1 1 220px; }
.avf-siguiente,
#brend-crm-form button[type="submit"]{
  min-height: 52px; padding: .85rem 2rem !important; border: 0 !important; border-radius: 2px !important;
  cursor: pointer; background: var(--oro-cla) !important; color: #1A1713 !important;
  font-family: var(--sans) !important; font-weight: 600 !important; font-size: 1rem !important;
  letter-spacing: 0 !important; text-transform: none !important; transition: background .2s;
}
#brend-crm-form button[type="submit"]{ width: 100%; }
#brend-crm-form button[type="submit"]:disabled{ opacity: .6; cursor: wait; }
.avf-atras{
  min-height: 52px; padding: .8rem .2rem; border: 0; background: none; cursor: pointer; margin-right: auto;
  color: rgba(255,255,255,.8); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px;
}

.avf-error{
  display: none; margin: 1rem 0 0; padding: .7rem .9rem; border-left: 3px solid #E07A6E;
  background: rgba(224,122,110,.12); color: #F6C9C3 !important; font-size: .92rem; opacity: 1 !important;
}
.avf-op:focus-visible, .avf-grupo-cab:focus-visible, .avf-siguiente:focus-visible,
.avf-atras:focus-visible, #brend-crm-form button[type="submit"]:focus-visible{
  outline: 2px solid var(--oro-cla); outline-offset: 2px;
}

@media (max-width: 575px){
  #brend-crm-form .avf-ind{ font-size: .72rem; }
  .avf-fuentes{ grid-template-columns: 1fr 1fr; }
  .avf-siguiente{ flex: 1; }
}

/* Efectos al pasar el ratón solo con ratón: en pantallas táctiles se quedan
   activos tras el toque y el botón de envío aparecía blanco. */
@media (hover: hover){
  .avf-grupo-cab:hover{ color: #FFFFFF !important; }
  .avf-op:hover{ border-left-color: var(--oro-cla); background: rgba(255,255,255,.08); }
  .avf-siguiente:hover,
  #brend-crm-form button.av-submit-btn[type="submit"]:hover{ background: #FFFFFF !important; }
  .avf-atras:hover{ color: #FFFFFF; }
}
/* form-component.js redondea el botón de envío con una regla más específica
   (#section-contact .av-form .av-submit-btn): esta la supera. */
#brend-crm-form button.av-submit-btn[type="submit"]{ border-radius: 2px !important; }