/* Correcciones de la Matriz de Control de Cambios (Brelses, 20/10/2026).
   Se carga al final de todas las páginas. Cada bloque indica el punto de la matriz. */

/* ── Tipografía de marca en todo el sitio (Guía de estilo: Gantari) ─────────────────────────────
   Divi usaba Open Sans por defecto en los textos sin fuente asignada (módulo dinámico, beneficios,
   misión/visión/valores…). Los íconos (ETmodules / FontAwesome) se respetan. */
body,
body :where(*):not(.et-pb-icon):not(.et_pb_font_icon):not([class*="fa-"]):not(.mobile_menu_bar):not(.et-pb-arrow-prev):not(.et-pb-arrow-next) {
  font-family: 'Gantari', Helvetica, Arial, Lucida, sans-serif !important;
}

/* ── SEO: encabezados que antes eran <p>/<div>, con la misma apariencia ────────────────────────── */
.brelses-h { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit;
  text-transform: inherit; text-align: inherit; margin: 0; padding: 0; }
.et_pb_text_inner > .brelses-h { padding-bottom: 0; }
/* Experiencia: «Conoce a Brelses: Tu Aliado Contable y Fiscal» en un solo H1 */
.brelses-h1-exp span { display: block; font-weight: 400; color: #000; }
/* Misión / Visión / Valores (div → h3) */
h3.mv-title { margin: 0; line-height: normal; font-family: inherit; }
/* Tarjetas de servicios: frase introductoria (h3 → p) y nombre del servicio (h4 → h3) */
p.h3-problemas { line-height: 1.25; padding-bottom: 0; }
h3.h4-problemas { line-height: 1.2; padding-bottom: 0; }
/* Entrada del blog: la categoría pasa de H1 a párrafo con su enlace */
.et_pb_heading_container p.brelses-cat { font-weight: 600; text-transform: uppercase; font-size: 18px;
  color: #706A6B !important; margin: 0; padding: 0; line-height: 1.55em; }
.et_pb_heading_container p.brelses-cat a { color: inherit; }
/* Listado del blog: títulos h3 → h2 (mismo estilo) */
h2.blog-title { line-height: 1.15; padding-bottom: 0; }

/* ── Logotipo con enlace al inicio (header y footer) ──────────────────────────────────────────── */
.brelses-logo-link { display: inline-block; line-height: 0; }

/* ── Botones ─────────────────────────────────────────────────────────────────────────────────── */
/* Flecha siempre cuadrada (en móvil se aplastaba/alargaba cuando el texto ocupa 2-3 renglones) */
.btn .btn-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.btn .btn-text { flex: 1 1 auto; }
/* Hover de los botones rojos: antes quedaba blanco sobre blanco y se perdía. Fondo blanco con contorno rojo */
.btn.version2:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #B91E22; }
/* Módulos rojos (Beneficios): sin contorno negro al pasar el cursor, solo relleno blanco */
.sc-beneficios-boton .version2, .sc-beneficios-boton .version2:hover { border-color: #fff; box-shadow: none; }
/* Footer: el botón blanco «Solicita tu asesoría» ahora sí cambia al pasar el cursor */
.et_pb_button_0_tb_footer { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }
.et_pb_button_0_tb_footer:hover { background-color: #B91E22 !important; color: #fff !important; border-color: #B91E22 !important; }

/* ── Tarjetas de beneficios (servicios): las flechas no llevan a ningún lado → se retiran ─────── */
.sc-hover-arrow { display: none !important; }
.sc-card { min-height: 280px; padding: 30px 20px; }
.sc-card-content h3 { min-height: 0; }

/* ── Experiencia · Misión, Visión y Valores: flecha más delgada (antes «➜» muy grueso) ─────────── */
.mv-title::after { content: ""; width: 18px; height: 12px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h15M11 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── Experiencia · Modelo de trabajo ─────────────────────────────────────────────────────────── */
/* Flechas en SVG (los caracteres ↘ ↗ se veían como emoji en iPhone) */
.workflow-card .arrow::before, .workflow-card:hover .arrow::before {
  content: ""; display: block; width: 22px; height: 22px; background: #e3000b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 9v9H9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 9v9H9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.workflow-card:hover .arrow::before, .workflow-card.abierta .arrow::before { background: #fff; transform: rotate(-90deg); }
/* La última tarjeta («Soporte continuo») abre su texto hacia la izquierda: ya no se sale de la pantalla */
.workflow-card:last-child .card-hover { left: auto; right: calc(100% - 40px); }
.card-hover { box-sizing: border-box; max-width: min(320px, 80vw); }
@media (max-width: 767px) {
  /* En celular el texto va dentro de la tarjeta (sin desbordes); la primera aparece abierta */
  .workflow-module { gap: 1rem; }
  .workflow-card { width: 100%; max-width: 340px; height: auto !important; min-height: 0 !important; }
  .workflow-card .card-content { height: auto !important; }
  .workflow-card:hover { transform: none; }
  .workflow-card .card-hover, .workflow-card:last-child .card-hover {
    position: static; left: auto; right: auto; max-width: none; margin: 0 12px 12px;
    opacity: 1; transform: none; display: none; pointer-events: auto; }
  .workflow-card.abierta .card-hover { display: block; }
  .card-content { padding: 1.4rem 1rem; }
}

/* ── Footer en celular: textos con aire a los lados ────────────────────────────────────────────── */
@media (max-width: 767px) {
  footer.et-l--footer .et_pb_text_inner, footer.et-l--footer .et_pb_text { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ── Header en celular: logotipo separado del borde del banner ─────────────────────────────────── */
@media (max-width: 767px) {
  .et_pb_image_0_tb_header { padding: 12px 0 0 16px !important; }
}

/* ── Inicio · «¿Te identificas con alguno de estos problemas?» ───────────────────────────────────
   En laptops (501–1300px) las 5 tarjetas quedaban amontonadas arriba (cada 50px) y abajo sobraba
   espacio: se reparten alternando lados. El botón negro se separa del texto. */
@media screen and (min-width: 501px) and (max-width: 1300px) {
  .modulo-ondas .ficha.ficha1 { top: 34px;  left: 20px;  right: auto; }
  .modulo-ondas .ficha.ficha3 { top: 104px; left: auto;  right: 20px; }
  .modulo-ondas .ficha.ficha2 { top: 174px; left: 20px;  right: auto; }
  .modulo-ondas .ficha.ficha4 { top: 244px; left: auto;  right: 20px; }
  .modulo-ondas .ficha.ficha5 { top: 314px; left: 20px;  right: auto; }
}
@media screen and (max-width: 500px) {
  .modulo-ondas .ficha.ficha1 { top: 20px; }
  .modulo-ondas .ficha.ficha2 { top: 88px; }
  .modulo-ondas .ficha.ficha3 { top: 156px; }
  .modulo-ondas .ficha.ficha4 { top: 224px; }
  .modulo-ondas .ficha.ficha5 { top: 292px; }
}
.et_pb_code_3_tb_body { margin-top: 32px !important; }

/* ── Banner negro con la frase: círculos rojos perfectamente redondos ───────────────────────────
   La imagen (1200×400) se estiraba con background-size:100% 100% y los círculos salían ovalados. */
.pagina-inicio .et_pb_row_4_tb_body,
[class*="pagina-servicio-"] .et_pb_row_5_tb_body,
.pagina-contacto .et_pb_row_3_tb_body,
.pagina-experiencia .et_pb_row_5_tb_body { background-size: cover !important; background-position: right center !important; }
.pagina-experiencia .et_pb_text_3_tb_body { background-size: cover !important; background-position: right center !important; }

/* ── Inicio · banner principal: «…crecimiento EMPRESARIAL» legible sobre la foto ─────────────── */
.pagina-inicio .et_pb_section_0_tb_body h1.et_pb_module_heading {
  text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9); }

/* ── Carrusel «Soluciones integrales» en celular (inicio, blog): en un teléfono no hay hover,
   así que la tarjeta activa (la primera al cargar) se muestra desplegada con bullets y botón ── */
@media (hover: none), (max-width: 767px) {
  .servicios-swiper .swiper-slide-active .servicio-card .hover-content { opacity: 1; visibility: visible; transform: translateY(0); }
  .servicios-swiper .swiper-slide-active .servicio-card .boton-flecha { opacity: 0; }
}
/* Blog en celular: el título del módulo con la misma jerarquía que en Inicio */
@media (max-width: 767px) {
  .pagina-blog .et_pb_heading_0_tb_body .et_pb_heading_container h2 { font-size: 40px !important; line-height: 48px !important; }
}

/* ── Servicios · carrusel «Problemas frecuentes» en celular: flechas junto a la tarjeta
   (antes quedaban hasta abajo, después de todo el contenido) ── */
@media (max-width: 767px) {
  :has(> .servicios-swiper .slide-content) { display: flex; flex-direction: column; }
  :has(> .servicios-swiper .slide-content) > .slider-navigation { order: 1; margin: 0 0 14px; }
  :has(> .servicios-swiper .slide-content) > .servicios-swiper { order: 2; }
}

/* ── Servicios · módulo dinámico de scroll: título al tamaño de los demás títulos de sección ── */
.sc-texto-principal { font-size: 40px; line-height: 44px; margin-bottom: 40px; }
@media (max-width: 767px) { .sc-texto-principal { font-size: 30px; line-height: 34px; } }

/* ── Blog en celular: texto del banner legible. La matriz sugiere una capa negra al 30%, pero el texto
   es rojo y negro y se oscurecía más; se usa un velo blanco detrás del texto, que sí sube el contraste ── */
@media (max-width: 767px) {
  .pagina-blog .et_pb_section_0_tb_body .et_pb_row_0_tb_body { position: relative; }
  .pagina-blog .et_pb_section_0_tb_body .et_pb_row_0_tb_body::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 60%, rgba(255,255,255,.25) 100%); border-radius: inherit; pointer-events: none; z-index: 0; }
  .pagina-blog .et_pb_section_0_tb_body .et_pb_row_0_tb_body > * { position: relative; z-index: 1; }
}

/* ── Celular: nada se sale a la derecha (el carrusel del blog no recortaba sus tarjetas y en iPhone
   se podía arrastrar la página de lado) ── */
.carrusel-blog { overflow: hidden; }
html { overflow-x: clip; }