/* =====================================================================
   ELEGANZ — Complementos sobre la plantilla Legendary
   Solo lo que la plantilla no trae: bloque de Volanteo con GPS,
   métricas de ruta, botón flotante de WhatsApp y ajustes de marca.
   Acento oficial: #e4a94e
   ===================================================================== */

/* ---------- 0. Hero: punto de arranque del Ken Burns ----------

   Se conserva el efecto de Vegas —arranca cerrado y se abre hasta
   mostrar la foto completa—, pero partiendo de menos zoom.

   Recorrido largo: arranca cerrado, a sangre, y se abre hasta mostrar
   la foto completa. Las fotos están montadas para que quepan enteras
   en el lienzo con los bordes fundidos en negro, así que el final del
   recorrido enseña la imagen entera sin que se noten barras.

   ESTA ES LA PERILLA: subir el número = más recorrido y más zoom
   inicial; bajarlo = movimiento más corto. En 1.0 no se mueve.

   Tope práctico: 1.28. Por encima de eso, en la foto de las edecanes en
   la hacienda —donde ocupan casi todo el alto del encuadre— el zoom
   inicial les corta la cabeza. Si algún día sale esa foto del slider,
   se puede volver a subir.
   ------------------------------------------------------------------- */

/* --- 0.a Anclar el fondo al tamaño exacto de la ventana ---

   El fondo del hero cuelga de una cadena del plugin de parallax:
   .level-2 > .dzsparallaxer.allbody (position:fixed) > --target > .bg-image
   El plugin calcula por JS la altura del target y le aplica transforms.
   Cuando ese cálculo sale mayor que la ventana, background-size:cover
   escala la foto de más y el recorte se come cabezas y pies —por eso el
   zoom parecía mucho mayor que el que pide el keyframe.

   Aquí fijamos toda la cadena al 100 % del hero y le quitamos los
   transforms, de modo que la foto quede 1:1 con lo que se ve. El único
   escalado que queda es el Ken Burns de abajo, que es el que controlamos.
   OJO: no tocar .vegas-slide-inner, que es donde vive esa animación.   */

.hero .background-content .level-2 {
  -webkit-transform: none !important;
          transform: none !important;
}

.hero .background-content .dzsparallaxer,
.hero .background-content .dzsparallaxer--target,
.hero .background-content .bg-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-transform: none !important;
          transform: none !important;
}

.hero .bg-image .vegas-slide,
.hero .bg-image .vegas-slide-inner {
  background-size: cover !important;
  background-position: center center !important;
}


/* --- 0.b El zoom del Ken Burns --- */

@-webkit-keyframes kenburns {
  0%   { -webkit-transform: scale(1.28); transform: scale(1.28); }
  100% { -webkit-transform: scale(1);    transform: scale(1); }
}
@keyframes kenburns {
  0%   { -webkit-transform: scale(1.28); transform: scale(1.28); }
  100% { -webkit-transform: scale(1);    transform: scale(1); }
}

/* Vegas puede elegir variantes con desplazamiento; todas llevaban
   scale(1.5) y un translate del 10 %. Las igualamos al mismo valor
   para que ninguna se salga de lo previsto. */
@-webkit-keyframes kenburnsUp        { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsUp                { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsDown      { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsDown              { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsLeft      { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsLeft              { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsRight     { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsRight             { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsUpLeft    { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsUpLeft            { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsUpRight   { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsUpRight           { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsDownLeft  { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsDownLeft          { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@-webkit-keyframes kenburnsDownRight { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
@keyframes kenburnsDownRight         { 0% { -webkit-transform: scale(1.28); transform: scale(1.28); } 100% { -webkit-transform: scale(1); transform: scale(1); } }

/* El recorrido se reparte parejo durante los 6 s, en vez de frenar
   al principio como hacía el ease-out original. */
.vegas-animation-kenburns,
[class*="vegas-animation-kenburns"] {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

/* ---------- 0.c Secciones consecutivas del mismo color ----------

   La plantilla alterna claro/oscuro, así que el relleno de 140 px abajo
   más 140 px arriba queda bien: el cambio de fondo marca dónde termina
   una sección y empieza la otra.

   Al reordenar las secciones quedaron tres pares del mismo color seguidos.
   Ahí los rellenos se suman y, sin cambio de fondo, se leen como un hueco
   vacío. Recortamos el de abajo en el primero de cada par.
   ------------------------------------------------------------------- */

/* Ritmo vertical de la página.

   La plantilla pone 130-140 px arriba y de 120 a 200 px abajo en cada
   sección. Entre dos secciones eso suma casi 300 px de vacío, que se
   nota sobre todo donde no hay cambio de color de fondo.

   Aquí se define el ritmo completo, sección por sección, en vez de
   arrastrar los valores de la plantilla. Los tres pares del mismo color
   llevan menos relleno abajo, porque el de la sección siguiente ya
   aporta la separación. */

#about   .content { padding-top: 95px; padding-bottom: 95px; }
#service .content { padding-top: 95px; padding-bottom: 75px; }   /* le sigue #gps, también oscuro */
#gps     .content { padding-top: 95px; padding-bottom: 95px; }
#campo   .content { padding-top: 95px; padding-bottom: 40px; }   /* le sigue #team, también claro */
#team    .content { padding-top: 95px; padding-bottom: 95px; }
#faq     .content { padding-top: 95px; padding-bottom: 60px; }   /* le sigue #contact, también oscuro */
#contact .content { padding-top: 95px; padding-bottom: 90px; }

/* El encabezado de cada sección añade otros 36 px por debajo */
section .header { padding-bottom: 26px; }

@media (max-width: 991px) {
  #about   .content,
  #service .content,
  #gps     .content,
  #campo   .content,
  #team    .content,
  #faq     .content,
  #contact .content { padding-top: 65px; padding-bottom: 65px; }

  #service .content { padding-bottom: 50px; }
  #campo   .content { padding-bottom: 25px; }
  #faq     .content { padding-bottom: 40px; }
}


/* ---------- 0.d Galería "Eleganz en campo" ----------

   Antes usaba cubeportfolio, que calcula por JS la altura del contenedor.
   Ese cálculo reservaba una fila de más al final y dejaba un hueco. Con
   CSS Grid la altura la marca el contenido, así que no hay nada que
   calcular ni que se pueda descuadrar.

   El aspecto es el mismo que trae la plantilla: mosaico de tres columnas
   y velo dorado con el texto al pasar el ratón.
   ------------------------------------------------------------------- */

.eleganz-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin: 46px auto 0;
}

.eleganz-galeria figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;   /* las fotos están cortadas en cuadrado */
  background: #f2f2f2;
}

.eleganz-galeria img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.19, 1, .22, 1);
}
.eleganz-galeria figure:hover img { transform: scale(1.04); }

.eleganz-galeria figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  text-align: center;
  background: #e4a94e;
  opacity: 0;
  transition: opacity .4s cubic-bezier(.19, 1, .22, 1);
}
.eleganz-galeria figure:hover figcaption { opacity: 1; }

.eleganz-galeria figcaption h5,
.eleganz-galeria figcaption p {
  color: #010000;
  margin: 0;
  transform: translateY(-15px);
  opacity: 0;
  transition: all .1s cubic-bezier(.57, .18, .04, 1);
}
.eleganz-galeria figure:hover figcaption h5,
.eleganz-galeria figure:hover figcaption p {
  transform: translateY(0);
  opacity: 1;
  transition: all .5s cubic-bezier(.57, .18, .04, 1);
}

.eleganz-galeria figcaption h5 {
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: .35em;
  line-height: 1.3;
}
.eleganz-galeria figcaption p {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .eleganz-galeria { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .eleganz-galeria figcaption { padding: 16px 24px; }
  .eleganz-galeria figcaption h5 { font-size: 16px; }
  .eleganz-galeria figcaption p  { font-size: 13px; }
}

@media (max-width: 560px) {
  .eleganz-galeria { grid-template-columns: 1fr; gap: 20px; }
}


/* ---------- 1. Ajustes de marca sobre la plantilla ---------- */

/* Los logos vienen recortados al dibujo (proporción 2.12:1) y sin la
   sombra que traía el archivo original. Como ya no cargan el margen
   vacío del PNG cuadrado, el aire lo pone el CSS. */
.hero .front-content .inner img.logo { max-width: 285px; margin: 0 auto 34px; }

@media (max-width: 767px) {
  .hero .front-content .inner img.logo { max-width: 215px; margin-bottom: 26px; }
}

/* El eslogan del hero es el único <h1> de la página (antes era un <p>,
   y la plantilla repartía nueve <h1> entre las secciones). Le devolvemos
   el aire que tenía como párrafo. */
.hero .front-content .inner h1 {
  font-size: 22px;
  font-weight: 300;
  line-height: 1.6em;
  letter-spacing: .04em;
  max-width: 620px;
  margin: 0 auto;
  color: #fff;
}

@media (max-width: 767px) {
  .hero .front-content .inner h1 { font-size: 17px; padding: 0 18px; }
}

/* Línea de servicios bajo el eslogan. Va en versalitas doradas para que
   informe sin competirle al eslogan ni ensuciar la foto. */
.hero .front-content .inner .eleganz-hero-servicios {
  margin: 26px auto 0;
  max-width: 620px;
  color: #e4a94e;
  font-size: 13px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.hero .front-content .inner .eleganz-hero-servicios span {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  letter-spacing: .26em;
}

@media (max-width: 767px) {
  .hero .front-content .inner .eleganz-hero-servicios {
    margin-top: 20px;
    padding: 0 18px;
    font-size: 10px;
    letter-spacing: .14em;
  }
  .hero .front-content .inner .eleganz-hero-servicios span { font-size: 10px; letter-spacing: .18em; }
}

/* Los títulos de sección pasaron de h1 a h2: replicamos el tamaño y el
   espaciado que la plantilla le daba al h1 para que se vean igual. */
section .header h2 {
  font-size: 32px;
  line-height: 1.15em;
  letter-spacing: .1em;
}

@media (max-width: 767px) {
  section .header h2 { font-size: 24px; }
}

/* ---------- Pie de página ----------

   La plantilla trae un pie de una sola línea. Aquí lo armamos en cuatro
   escalones ( marca · lema · ubicación · contacto ) separados por aire y
   una línea dorada, para que cierre como cierra la revista y no como un
   bloque de texto suelto.
   ------------------------------------------------------------------- */

/* El relleno original deja un hueco enorme ahora que el contenido es más
   corto. El de abajo no baja de 120 px: ahí va el botón "subir". */
.block-footer-1 { padding-top: 80px !important; padding-bottom: 120px !important; }

.block-footer-1 img { max-width: 205px; margin: 0 auto 22px; }

/* Lema: versalitas espaciadas en el dorado de la marca */
.eleganz-pie-lema {
  margin: 0 0 24px;
  color: #e4a94e;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.eleganz-pie-linea {
  width: 100%;
  max-width: 320px;
  height: 1px;
  margin: 0 auto 24px;
  background: linear-gradient(to right, transparent, rgba(228, 169, 78, .55), transparent);
}

.eleganz-pie-zona {
  margin: 0 0 26px;
  color: #9a9a9a;
  font-size: 14px;
  letter-spacing: .05em;
}

.eleganz-pie-redes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.eleganz-pie-redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(228, 169, 78, .38);
  border-radius: 50%;
  color: #e4a94e !important;
  font-size: 17px;
  text-decoration: none !important;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.eleganz-pie-redes a:hover {
  background: #e4a94e;
  border-color: #e4a94e;
  color: #010000 !important;
}

/* Credenciales. El logo de CANACO va atenuado para que acompañe sin gritar,
   y se aclara al pasar el cursor. */
.eleganz-pie-credenciales {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  max-width: 420px;
  margin: 0 auto 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Anulamos el max-width y el margen que .block-footer-1 img le pone al
   logotipo grande del pie: aquí el logo es un sello pequeño. */
.eleganz-pie-credenciales img {
  width: auto;
  height: 54px;
  max-width: none;
  margin: 0;
  opacity: .72;
  transition: opacity .3s ease;
}
.eleganz-pie-credenciales:hover img { opacity: 1; }

.eleganz-pie-credenciales p {
  margin: 0;
  text-align: left;
  color: #9a9a9a;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .06em;
}
.eleganz-pie-credenciales strong { color: #cfcfcf; font-weight: 400; }
.eleganz-pie-credenciales span   { display: block; color: #7d7d7d; }

@media (max-width: 500px) {
  .eleganz-pie-credenciales { gap: 12px; padding-top: 22px; margin-bottom: 22px; }
  .eleganz-pie-credenciales img { height: 44px; }
  .eleganz-pie-credenciales p { font-size: 11px; }
}

/* La plantilla pinta este h5 grande y en blanco; el aviso legal debe pesar
   lo mínimo. Cuatro selectores para ganarle a .block-footer-1.bg-black h5. */
.block-footer-1.bg-black h5.eleganz-pie-legal {
  color: #7d7d7d;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .12em;
}

/* A partir de aquí la plantilla manda el botón "subir" al borde superior del
   pie, así que arriba hay que dejarle sus 50 px y abajo ya no hacen falta. */
@media (max-width: 500px) {
  .block-footer-1 { padding-top: 68px !important; padding-bottom: 70px !important; }
  .eleganz-pie-lema { font-size: 11px; letter-spacing: .22em; }
  .eleganz-pie-redes { gap: 11px; }
  .eleganz-pie-redes a { width: 40px; height: 40px; font-size: 15px; }
}

/* El logo del menú lleva width/height en el HTML para que el navegador le
   reserve el espacio y la cabecera no salte al cargar. Pero la plantilla solo
   le pone max-height: con el ancho fijo del atributo, el límite de altura lo
   aplastaba en vez de escalarlo. Devolviendo el ancho a automático, el
   max-height vuelve a mandar y la proporción se respeta. */
.navigation-main .navbar-brand img { width: auto; }

/* El menú pasó de 5 a 7 entradas visibles ("Inicio" va oculto por la
   plantilla). Sus 15 px de separación por lado sobran a pantalla completa,
   pero entre 768 y 1200 px el menú se sale o se parte en dos líneas. */
@media (min-width: 768px) and (max-width: 1199px) {
  .navigation-main ul li a,
  .navigation-main ul li span {
    padding: 0 9px;
    font-size: 12px;
    letter-spacing: .06em;
  }
  .navigation-main .navbar-brand img { max-height: 42px; }
}

/* Cabecera de sección con antetítulo dorado, como en la revista */
.eleganz-antetitulo {
  display: block;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #e4a94e;
  margin-bottom: 14px;
  font-weight: 600;
}

/* Cita dorada en cursiva — igual que las de la revista */
.eleganz-cita {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: #e4a94e;
  text-align: center;
  max-width: 620px;
  margin: 40px auto 0;
}

@media (max-width: 767px) {
  .eleganz-cita { font-size: 20px; }
}

/* ---------- 2. Bloque Volanteo con GPS ---------- */

.eleganz-caja {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 4px;
  padding: 28px 26px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, .025);
  height: 100%;
}

/* La caja de la solución va destacada en dorado */
.eleganz-caja.destacada {
  border-color: rgba(228, 169, 78, .45);
  background: rgba(228, 169, 78, .06);
}

.eleganz-caja h5 {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8c8c8c;
  margin: 0 0 12px;
  font-weight: 600;
}
.eleganz-caja.destacada h5 { color: #e4a94e; }

.eleganz-caja p {
  color: #cfcfcf;
  line-height: 1.85;
  margin: 0;
  font-size: 15px;
}

/* Aquí la lista va debajo del párrafo de la caja: mismo cuerpo */
.eleganz-caja ul.eleganz-lista li { font-size: 15px; }

/* Tarjetas de evidencia: Recorrido / Evidencia / Reporte */
.eleganz-evidencia {
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  padding: 30px 20px;
  margin-bottom: 22px;
  transition: border-color .3s ease, background .3s ease;
}
.eleganz-evidencia:hover {
  border-color: rgba(228, 169, 78, .45);
  background: rgba(228, 169, 78, .04);
}
.eleganz-evidencia span[class^="ti-"] {
  font-size: 30px;
  color: #e4a94e;
  display: block;
  margin-bottom: 14px;
}
.eleganz-evidencia h4 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.eleganz-evidencia p  { margin: 0; font-size: 14px; color: #a5a5a5; line-height: 1.65; }

/* Métricas reales de la ruta */
.eleganz-metrica {
  text-align: center;
  border: 1px solid rgba(228, 169, 78, .35);
  border-radius: 4px;
  padding: 26px 16px;
  margin-bottom: 22px;
  background: rgba(228, 169, 78, .05);
}
.eleganz-metrica strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.1;
  color: #e4a94e;
  margin-bottom: 6px;
}
.eleganz-metrica span {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a5a5a5;
}

/* Lista con viñeta dorada, para "qué incluye".

   La plantilla declara Dosis para p, a, span y títulos, pero se salta li:
   las listas caían en la Helvetica de Bootstrap y desentonaban con el
   párrafo de al lado. Aquí se la devolvemos y ajustamos el cuerpo para que
   cada lista pese lo mismo que el texto que la acompaña. */
ul.eleganz-lista { list-style: none; padding: 0; margin: 18px 0 0; }
ul.eleganz-lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  line-height: 1.75;
}
ul.eleganz-lista li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4a94e;
}

/* ---------- 3. Operativos combinados ---------- */

.eleganz-combo {
  border: 1px solid rgba(0, 0, 0, .09);
  border-top: 3px solid #e4a94e;
  border-radius: 4px;
  padding: 32px 28px;
  margin-bottom: 26px;
  background: #fff;
  height: 100%;
  transition: box-shadow .3s ease, transform .3s ease;
}
.eleganz-combo:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .09);
  transform: translateY(-4px);
}
.eleganz-combo h4 { margin: 0 0 8px; font-size: 20px; }
.eleganz-combo .gancho {
  font-style: italic;
  color: #8a8a8a;
  font-size: 15px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* Dentro de las tarjetas la lista va al mismo cuerpo que su gancho */
.eleganz-combo ul.eleganz-lista li { font-size: 15px; color: #666; }

/* ---------- 4. Preguntas frecuentes ----------

   La plantilla, dentro de una sección negra, pinta el acordeón como cajas
   BLANCAS con texto negro (.bg-black .accordion-item-default .panel-heading
   { background:#fff }). Eso choca con el resto de la página, que no usa
   cajas: usa tipografía limpia sobre negro con acentos dorados.

   Esas reglas de la plantilla tienen 3 clases de especificidad, así que
   aquí encadenamos .bg-black + .block-faq-eleganz (4 clases) para ganarles
   sin recurrir a !important.

   El resultado: filas separadas por una línea fina, pregunta en blanco que
   pasa a dorado al abrirse, y una flecha dibujada con CSS —no con la fuente
   de iconos, que no traía el glifo y salía un guion—.
   ------------------------------------------------------------------- */

.bg-black.block-faq-eleganz .panel-group { margin: 0; }

.bg-black.block-faq-eleganz .accordion-item-default,
.bg-black.block-faq-eleganz .panel-group .panel {
  margin: 0 !important;          /* la plantilla mete 8px con !important */
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  border-radius: 0;
  box-shadow: none;
}
.bg-black.block-faq-eleganz .panel-group .panel:first-child {
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.bg-black.block-faq-eleganz .accordion-item-default .panel-heading {
  padding: 0;
  background: none;
  border: 0;
}

.bg-black.block-faq-eleganz .accordion-item-default .panel-heading a {
  position: relative;
  display: block;
  width: 100%;
  padding: 28px 60px 28px 0;
  color: #fff;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;          /* la plantilla usa line-height:60px, que corta
                                las preguntas largas en dos líneas pegadas */
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .3s ease;
}
.bg-black.block-faq-eleganz .accordion-item-default .panel-heading a:hover,
.bg-black.block-faq-eleganz .accordion-item-default .panel-heading a[aria-expanded="true"] {
  color: #e4a94e;
}

/* Flecha dibujada con bordes: sin depender de la fuente de iconos */
.bg-black.block-faq-eleganz .accordion-item-default .panel-heading a:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 1.5px solid #e4a94e;
  border-bottom: 1.5px solid #e4a94e;
  transform: rotate(45deg);
  transition: transform .35s cubic-bezier(.19, 1, .22, 1);
}
.bg-black.block-faq-eleganz .accordion-item-default .panel-heading a[aria-expanded="true"]:after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.bg-black.block-faq-eleganz .accordion-item-default .panel-body {
  padding: 0 60px 30px 0;
  border: 0;
  background: none;
  color: #b0b0b0;
  font-size: 16px;
  line-height: 1.9;
}
.bg-black.block-faq-eleganz .accordion-item-default .panel-body p { margin: 0; }

@media (max-width: 767px) {
  .bg-black.block-faq-eleganz .accordion-item-default .panel-heading a {
    padding: 22px 44px 22px 0;
    font-size: 16px;
  }
  .bg-black.block-faq-eleganz .accordion-item-default .panel-body {
    padding: 0 20px 24px 0;
    font-size: 15px;
  }
}

/* ---------- 4.b Canales de contacto ----------

   Reemplazan a las pestañas "Contáctanos / Síguenos". El diseño de la
   plantilla escondía el dato tras un hover: el icono se deslizaba y recién
   entonces aparecía el número. En móvil eso no funciona —no hay hover— y
   en escritorio hay que adivinar que ahí hay algo.

   Aquí el valor está siempre a la vista, como en la página 23 de la revista.
   ------------------------------------------------------------------- */

/* La plantilla separa los campos 80 px, pensados para un formulario que
   ocupaba todo el ancho. En dos columnas eso deja el formulario larguísimo
   y desalineado respecto a los canales. */
.eleganz-contacto .tab-content form .form-group { margin-bottom: 22px; }
.eleganz-contacto .tab-content form .form-group.button-container { margin-bottom: 0; }

.eleganz-contacto { margin-top: 55px; }
.eleganz-contacto .tab-content { padding: 0; }

/* Canales: en columna, a la derecha del formulario */
.eleganz-canales { display: grid; gap: 14px; }

.eleganz-canal {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 4px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.eleganz-canal:hover {
  border-color: rgba(228, 169, 78, .5);
  background: rgba(228, 169, 78, .06);
  transform: translateX(4px);
}

.eleganz-canal span[class^="ti-"] {
  flex: none;
  font-size: 23px;
  line-height: 1;
  color: #e4a94e;
}

.eleganz-canal em {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #8f8f8f;
  margin-bottom: 4px;
}

.eleganz-canal strong {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.3;
  word-break: break-word;
  transition: color .3s ease;
}
.eleganz-canal:hover strong { color: #e4a94e; }

.eleganz-nota-contacto {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #8f8f8f;
}

/* Apilado: los canales pasan debajo del formulario */
@media (max-width: 991px) {
  .eleganz-contacto .col-md-5 { margin-top: 45px; }
  .eleganz-canales { grid-template-columns: repeat(2, 1fr); }
  .eleganz-nota-contacto { text-align: center; }
}

@media (max-width: 560px) {
  .eleganz-canales { grid-template-columns: 1fr; }
  .eleganz-contacto .tab-content form .form-group { margin-bottom: 16px; }
}


/* ---------- 5. Botones flotantes ----------

   Revista arriba, WhatsApp abajo. Van dentro de un contenedor apilado en
   vez de posicionar cada uno por su cuenta: así basta mover el contenedor
   para reubicar los dos, sin tener que recalcular a mano el desplazamiento
   del de arriba cada vez que cambia la altura del de abajo.
   ------------------------------------------------------------------- */

.eleganz-flotantes {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.eleganz-flotante {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 16px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  transition: transform .3s ease, background .3s ease;
}
.eleganz-flotante:hover { transform: translateY(-3px); }
.eleganz-flotante span[class^="ti-"] { font-size: 21px; line-height: 1; }
.eleganz-flotante em { font-style: normal; }

/* Revista en el dorado de la marca */
.eleganz-flotante--revista { background: #e4a94e; color: #010000 !important; }
.eleganz-flotante--revista:hover { background: #f0c17a; color: #010000 !important; }

/* WhatsApp en su verde, que la gente reconoce de inmediato */
.eleganz-flotante--wa { background: #22ab52; color: #fff !important; }
.eleganz-flotante--wa:hover { background: #1d9748; color: #fff !important; }

/* En móvil el botón "subir" de la plantilla ocupa la esquina inferior:
   subimos el bloque y dejamos solo los iconos. */
@media (max-width: 767px) {
  .eleganz-flotantes { right: 16px; bottom: 76px; gap: 10px; }
  .eleganz-flotante { padding: 14px; }
  .eleganz-flotante em { display: none; }
}

/* ---------- 6. Detalles ---------- */

/* Los <strong> dentro de párrafos oscuros se perdían */
.bg-black p strong, .content.bg-black p strong { color: #efefef; }

/* Rejilla de campo: alto uniforme para que no se escalone */
.block-work-1 .work-grid .cbp-item img { width: 100%; display: block; }