/*
 * Grupo Arcondec — piel de marca sobre el template aball (index-12).
 * Ajusta colores, tipografia y proporciones del template SIN modificar style.css,
 * para que una actualizacion del template no pise estos cambios.
 * Compartido por todas las paginas (ES y EN).
 *
 * Paleta oficial: naranja #FFBB00 / #F7931E · azul marino #1D4598 / #132D67
 */

/* --- Texto visible mientras carga la tipografía -------------------------
   style.css (intocable) declara space_grotesk sin font-display: el
   navegador puede dejar títulos y texto invisibles unos instantes mientras
   descarga la fuente. Se redeclara aquí (misma familia/peso/origen, mismos
   archivos) solo para sumar font-display: swap — como carga después de
   style.css en el <head>, esta versión gana. */
@font-face {
    font-family: 'space_grotesk';
    src: url("../fonts/spacegrotesk-light-webfont.woff2") format("woff2"), url("../fonts/spacegrotesk-light-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'space_grotesk';
    src: url("../fonts/spacegrotesk-regular-webfont.woff2") format("woff2"), url("../fonts/spacegrotesk-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'space_grotesk';
    src: url("../fonts/spacegrotesk-medium-webfont.woff2") format("woff2"), url("../fonts/spacegrotesk-medium-webfont.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'space_grotesk';
    src: url("../fonts/spacegrotesk-semibold-webfont.woff2") format("woff2"), url("../fonts/spacegrotesk-semibold-webfont.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'space_grotesk';
    src: url("../fonts/spacegrotesk-bold-webfont.woff2") format("woff2"), url("../fonts/spacegrotesk-bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.header-top .header-top-item .info ul li a { color: inherit; }
/* Escala tipográfica del template (100px demo): 80px es el máximo que admite el titular oficial sin cortarse */
.hero-2-content.hero-11-content .title { font-size: 80px; line-height: 1.08; }
@media only screen and (min-width: 992px) and (max-width: 1200.98px) {
    .hero-2-content.hero-11-content .title { font-size: 62px; line-height: 1.1; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero-2-content.hero-11-content .title { font-size: 46px; line-height: 1.15; }
}
@media (max-width: 575px) {
    .hero-2-content.hero-11-content .title { font-size: 36px; line-height: 1.2; }
}
.lang-switch.active { font-weight: 700; text-decoration: underline; }
/* Fondo del hero optimizado para web (mismo encuadre, 360 KB vs 2 MB del PNG) */
.hero-area.hero-2-area .section__bg { background-image: url(../images/hero-bg-2-opt.jpg); }

/* Las dos diapositivas del hero medían distinto (1275px la primera, 1072px la
   segunda: cinco líneas de titular contra tres). Slick en modo fade deja las dos
   flotando en el track, así que el track conserva la altura de la más alta y la
   segunda dejaba una banda blanca de 200px bajo su foto.
   Superponiéndolas en una sola celda de grid las dos se estiran a la altura del
   track: misma altura, misma foto de fondo y el contenido sigue centrado. El
   `left` que slick escribe en línea sobra al estar ya superpuestas. */
.hero-slider.hero-11-slider .slick-track { display: grid; width: 100% !important; }
.hero-slider.hero-11-slider .slick-track > .slick-slide {
    grid-area: 1 / 1;
    left: 0 !important;
    width: 100% !important;
}
/* El topbar lleva textos más largos que el demo: se compacta en tablets para que no desborde */
@media only screen and (min-width: 992px) and (max-width: 1200.98px) {
    .header-top .header-top-item .info ul li { margin-right: 18px; font-size: 15px; }
    .header-top .header-top-item .info ul li:nth-child(2) { display: none; }
    .header-nav .navigation .navbar .navbar-nav > .nav-item > a { font-size: 15px; margin-right: 16px; white-space: nowrap; }
}

/* El desplegable de Servicios mide 290px y cuelga del borde izquierdo de su ítem.
   El menú va alineado a la derecha, así que cuanto más cortos son los rótulos más
   a la derecha queda «Servicios» y más se asoma el panel: con el menú actual se
   salía 54px de la pantalla a 1200px de ancho. Anclado al borde derecho del ítem
   crece hacia dentro y cabe en cualquier ancho, pase lo que pase con los rótulos.
   Por debajo de 992px el menú es un acordeón y el template ya fuerza left:0. */
@media (min-width: 992px) {
    .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu { left: auto; right: 0; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-top .header-top-item .info ul li:nth-child(2),
    .header-top .header-top-item .info ul li:nth-child(3) { display: none; }
}
/* Los logos de clientes varían de tamaño: se acotan para que las filas queden parejas */
/* Sello D-U-N-S (blanco) sobre la franja oscura del footer, como en arcondec.mx */
.footer-2-top .footer-logo img.duns { width: auto; display: block; }
/* ===== Tarjetas Data Center (portada) =====
   El template las trae pensadas para un equipo humano: la cara visible es un
   avatar redondo de 139px y la foto grande solo asoma al pasar el cursor. Con
   fotos de obra eso no se lee —cuatro miniaturas donde no se distingue nada— y
   además en un móvil no hay cursor con el que descubrirlas.

   Se invierte el orden de las capas: la cara visible (.team-overlay-2) pasa a
   ser la que manda en el alto de la tarjeta, con la foto a todo el ancho arriba
   y el texto debajo, como en las tarjetas del blog. La foto grande y el overlay
   del hover quedan por detrás en posición absoluta, cubriendo la tarjeta. */
.team-2-item.team-12-item > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.team-2-item.team-12-item .team-overlay-2 {
    position: relative;
    padding-top: 0;
    padding-bottom: 28px;
}
.team-12-item .team-overlay-2 img {
    width: 100%;
    height: auto;
    aspect-ratio: 27 / 19;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 22px;
}
.team-12-item .team-overlay-2 .title,
.team-12-item .team-overlay-2 span { padding-left: 20px; padding-right: 20px; }
/* ===== Radio uniforme en las fotos de contenido =====
   El template redondea unas sí y otras no: la primera foto de «Nosotros» lleva
   15px y la segunda ninguno, justo al lado. Y las del blog van embutidas 16px
   dentro de su tarjeta, así que el redondeo de la tarjeta no las alcanza y salen
   en pico. Las que ya recorta un contenedor ceñido —tarjetas de proyecto, de
   Data Center, portfolio— no necesitan nada: heredan el de su tarjeta.
   Los iconos, el patrón de puntos y los logos quedan fuera a propósito. */
.article-thumb img,
.about-2-thumb .thumb-2 img,
.case-thumb img,
.testimonial-11-thumb img { border-radius: 15px; }

/* Las fotos reales de Arcondec tienen proporciones variadas: se fuerzan las proporciones
   exactas del demo para que renglones y columnas queden alineados (responsive con aspect-ratio) */
.article-11-item .article-thumb img { width: 100%; aspect-ratio: 320 / 260; object-fit: cover; }
.article-11-item .article-content h3.title { min-height: 90px; }
/* La foto de fondo de las tarjetas Data Center ya no fija la proporción: ahora va
   en absoluto cubriendo la tarjeta, y quien manda en el alto es el contenido
   (ver el bloque de esas tarjetas más arriba). */
.testimonial-11-thumb img { width: 100%; aspect-ratio: 445 / 600; object-fit: cover; }
.service-2-item.service-11-item { min-height: 370px; }
/* Botón flotante de WhatsApp (FAB verde oficial) */
.whatsapp-float { position: fixed; right: 25px; bottom: 95px; z-index: 99; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .2s ease, background .2s ease; }
/* El hover-scale solo si el dispositivo puede "hover" de verdad: en touch, un
   tap deja el estado :hover pegado y el botón se queda agrandado sin razón. */
@media (hover: hover) {
    .whatsapp-float:hover { transform: scale(1.1); background: #1EBE5D; }
}
.whatsapp-float:active { transform: scale(0.94); background: #1EBE5D; }
.whatsapp-float svg { width: 34px; height: 34px; display: block; }
@media (max-width: 767px) {
    .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 88px; }
    .whatsapp-float svg { width: 30px; height: 30px; }
}

/* ===== Piel de marca Arcondec — colores oficiales de arcondec.mx ===== */
/* Naranja #FFBB00 / #F7931E (acento y botones) · Azul marino #1D4598 / #132D67 (fondos) */
.main-btn { background-color: #FFBB00; border-color: #FFBB00; color: #132D67; transition: background-color .2s ease, border-color .2s ease, transform .15s ease; }
.main-btn:hover { background-color: #E5A800; border-color: #E5A800; color: #132D67; }
.main-btn:active { transform: scale(0.97); }
.main-btn.main-btn-3 { background: #FFBB00; color: #132D67; }
.main-btn.main-btn-3:hover { background: #E5A800; color: #132D67; }
.hero-2-content.hero-11-content ul li a { background: #FFBB00; border-color: #FFBB00; color: #132D67; }
.hero-2-content.hero-11-content ul li a:hover { background: #E5A800; border-color: #E5A800; color: #132D67; }
.hero-2-content.hero-11-content ul li a.main-btn-2 { background: #1D4598; border-color: #1D4598; color: #fff; }
.hero-2-content.hero-11-content ul li a.main-btn-2:hover { background: #132D67; border-color: #132D67; color: #fff; }
/* Header en el azul oficial del logo (#1D4598) */
.header-2-area .header-top { background: #1D4598; }
.header-area.header-2-area .header-nav.sticky { background-color: #1D4598; }
/* Logo oficial (wordmark blanco + ícono naranja). El del template es más
   pequeño de lo que pide una marca con wordmark largo; 195px lo hace legible sin
   comerse el nav —queda holgura de sobra hasta el primer ítem del menú—. */
.navbar-brand img { width: 195px; height: auto; }
@media (min-width: 1201px) {
    .header-nav .navigation .navbar .navbar-nav > .nav-item > a { margin-right: 22px; white-space: nowrap; }
}
.footer-2-top .footer-logo a img { width: 215px; height: auto; }
/* Fondos del footer en el azul oficial */
.footer-2-area .footer-2-top { background: #1D4598; }
footer.footer-area.footer-2-area { background: #132D67; }
.header-2-area.header-11-area .header-top .sicial ul li a:hover { color: #FFBB00; }
.header-nav .navigation .navbar .navbar-nav .nav-item a:hover { color: #FFBB00; }
.header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu li a:hover { color: #F7931E; }
/* Tarjetas del carrusel de servicios: ícono temático de cada servicio en el círculo del template */
.service-2-item.service-11-item .icon { background: rgba(255, 187, 0, 0.14); }
.service-2-item.service-11-item .icon i { font-size: 38px; line-height: 90px; color: #1D4598; }
/* Fondo de la sección de servicios: foto industrial oficial con overlay azul de marca */
.service-2-area.service-11-area .section__bg { background-image: linear-gradient(rgba(19, 45, 103, 0.88), rgba(19, 45, 103, 0.88)), url(../images/arcondec/secciones/servicios-bg-2.jpg); }
/* Tabs de cobertura */
.case-tab-btn.case-tab-btn-11 .nav .nav-link span::before { background: #FFBB00; }
.case-tab-btn.case-tab-btn-11 .nav .nav-link.active { background: #1D4598; }
/* Franja CTA. Iba en el mismo #1D4598 que la franja superior del pie, justo
   debajo, y las dos se leían como un único bloque azul de 500px. En azul marino
   el cierre de página queda escalonado: contenido claro → CTA oscuro → pie azul.
   El filo superior en el degradado de marca marca dónde empieza el llamado. */
.subscribe-area.subscribe-11-area { background: #1b1f2e; position: relative; }
.subscribe-area.subscribe-11-area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #FFBB00 0%, #F7931E 100%);
}
.subscribe-form.subscribe-11-form ul li a { background: #FFBB00; border-color: #FFBB00; color: #132D67; }
/* Bloque del testimonial */
.testimonial-9-active .testimonial-11-thumb::before { background: #1D4598; }
/* Overlay de las tarjetas Data Center */
.team-2-item.team-12-item .team-overlay { background: linear-gradient(rgba(255, 187, 0, 0.25) 0%, #1D4598 100%); }
/* Caja "30+ Años" y caja de fecha con el degradado naranja de la marca */
.about-2-thumb .thumb-2 .box { background: linear-gradient(330deg, #F7931E 0%, #FFBB00 80%); }
.article-2-item .article-content .date .item { background: linear-gradient(330deg, #F7931E 0%, #FFBB00 80%); }
.article-2-item .article-content .date .item .title, .article-2-item .article-content .date .item span { color: #132D67; }
.article-2-item .article-content > a .icon::before { background: #1D4598; }
.article-2-item .article-content .title a:hover { color: #8A6400; }
/* Newsletter del footer */
.footer-newsletter-item.footer-newsletter-item-11 { background: #1D4598; }
/* Botón subir y enlaces de acento */
.back-to-top.back-to-top-11 { background: #FFBB00; color: #132D67; }
.footer-copyright p a { color: #FFBB00; }
/* Reglas del template con mayor especificidad (variante header/hero/about/article -11) */
.header-2-area.header-11-area .header-nav .navigation .navbar .navbar-btn a { background: #FFBB00; border-color: #FFBB00; color: #132D67; }
.header-2-area.header-11-area .header-nav .navigation .navbar .navbar-btn a:hover { background: transparent; border-color: #FFBB00; color: #FFBB00; }
@media (max-width: 991px) {
    .header-2-area.header-11-area .header-nav .navigation .navbar .navbar-collapse { background: #1D4598; }
}
.header-2-area.header-11-area .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li:hover > a { color: #F7931E; }
.hero-play-11 a { color: #F7931E; }
.hero-play-11 a:hover { background: #FFBB00; color: #132D67; }
.hero-slider.hero-11-slider .slick-dots li.slick-active button { background: #FFBB00; }
.about-2-content.about-11-content .item.active::before, .about-2-content.about-11-content .item:hover::before { background: #FFBB00; }
.about-2-content.about-11-content a.main-btn-3 { background: #FFBB00; border-color: #FFBB00; color: #132D67; }
.about-2-content.about-11-content a.main-btn-3:hover { background: #E5A800; color: #132D67; }
.about-2-thumb.about-11-thumb .thumb-2 .box { background: linear-gradient(330deg, #F7931E 0%, #FFBB00 80%); }
.service-2-item.service-11-item::before { background: linear-gradient(rgba(255, 187, 0, 0.16) 0%, #1D4598 100%); }
.service-11-active .slick-arrow:hover { background: #FFBB00; color: #132D67; }
.article-11-item .article-content .date .item { background: linear-gradient(330deg, #F7931E 0%, #FFBB00 80%); }
.article-11-item .article-content > a .icon::before { background: #1D4598; }
.footer-item .footer-list.footer-list-11 ul li a:hover { color: #FFBB00; }
/* Botones de redes del pie: el template los pinta en gris #383833, el único gris
   de toda la página. Van en el azul de marca con un filo blanco tenue (ícono
   blanco sobre #1D4598: 9.0:1). El relleno amarillo del hover ya existía, solo
   faltaba bajar el ícono a azul marino para que se lea sobre el ámbar: #132D67
   sobre #FFBB00 da 7.7:1, mientras que el blanco que había daba 1.7:1. */
.footer-2-area .footer-copyright ul li a {
    background: #1D4598;
    border: 1px solid rgba(255, 255, 255, .2);
    line-height: 46px;
    transition: color .3s ease-out 0s;
}
.footer-2-area .footer-copyright.footer-copyright-11 ul li a::before { background: #FFBB00; }
.footer-2-area .footer-copyright.footer-copyright-11 ul li a:hover { color: #132D67; }

/* ==========================================================================
   Componentes de las páginas interiores (prefijo .arc-)
   --------------------------------------------------------------------------
   El template aball no trae maquetación para páginas de servicio, proyectos,
   contacto ni reclutamiento, así que estos bloques se construyen aquí usando
   su mismo lenguaje visual: tipografía space_grotesk, radio de 15px, títulos
   en #000 y texto en #33415C, con los azules y el naranja de la marca.
   ========================================================================== */

/* --- Franja de entradilla bajo el banner de página --- */
.service-lead-strip {
    max-width: 900px;
    margin: 50px auto 0;
    padding: 0 15px;
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    color: #33415C;
}
@media (max-width: 767px) {
    .service-lead-strip { font-size: 18px; margin-top: 35px; }
}

/* --- Antetítulo en versalitas --- */
.service-eyebrow,
.about-2-content .service-eyebrow,
.about-2-content span.service-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.5;
    height: auto;
    text-transform: uppercase;
    border-radius: 30px;
    background: linear-gradient(rgba(255, 187, 0, .18) 0%, rgba(247, 147, 30, .18) 100%);
    color: #8A6400;
}

/* --- Sección con fondo suave, para alternar el ritmo de la página --- */
.arc-soft-area { background: #F6F8FC; }

/* --- Panel blanco (listas, datos de contacto, bloques destacados) --- */
.arc-panel {
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 15px;
    padding: 40px;
}
@media (max-width: 767px) {
    .arc-panel { padding: 25px; }
}
.arc-panel > .title { color: #132D67; margin-bottom: 18px; }
.arc-panel p { color: #33415C; }

/* --- Ítem con palomita (listas de servicios especializados) --- */

/* --- Tarjeta con icono circular (beneficios, valores) --- */

/* --- Banda de llamada a la acción --- */
.arc-cta {
    background: linear-gradient(120deg, #1D4598 0%, #132D67 100%);
    border-radius: 15px;
    padding: 55px 50px;
    color: #fff;
}
@media (max-width: 767px) {
    .arc-cta { padding: 35px 25px; }
}
.arc-cta .title { color: #fff; margin-bottom: 14px; }
.arc-cta p { color: rgba(255, 255, 255, .85); margin-bottom: 0; }
@media (max-width: 991px) {
    .arc-cta .main-btn { margin-top: 25px; }
}

/* --- Listas de enlaces (otros servicios, capacidades) --- */
.arc-links ul { padding: 0; margin: 0; list-style: none; }
.arc-links ul li { display: inline-block; margin: 8px 6px 0; }
.arc-links ul li a,
.arc-links ul li {
    color: #33415C;
    line-height: 1.6;
}
.arc-links ul li a {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid #E7EBF3;
    border-radius: 30px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.arc-links ul li a:hover {
    background: #1D4598;
    border-color: #1D4598;
    color: #fff;
}
.arc-links ul li a:active { transform: scale(0.97); }
/* Cuando la lista es informativa (no enlaces), se muestra apilada */
.arc-panel.arc-links ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
}
.arc-panel.arc-links ul li i { margin-top: 5px; color: #FFBB00; }

/* --- Contadores de la página de proyectos --- */
.overview-counter-item {
    border: 1px solid #E7EBF3;
    height: calc(100% - 30px);
}
.arc-counter-pre {
    display: block;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8A6400;
    font-weight: 700;
}
.overview-counter-item .title {
    padding-top: 10px !important;
    color: #132D67;
    font-size: 46px !important;
    line-height: 1.1;
}
.overview-counter-item p { color: #33415C; margin-bottom: 0; }

/* --- Tarjeta de proyecto (leyenda siempre visible, también en móvil) --- */
.arc-project {
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 15px;
    overflow: hidden;
    height: calc(100% - 30px);
    transition: box-shadow .3s ease, transform .3s ease;
}
.arc-project:hover {
    box-shadow: 0 18px 40px rgba(19, 45, 103, .12);
    transform: translateY(-4px);
}
/* El velo azul se pinta con un pseudo-elemento sobre la foto, no con un filter
   CSS: `filter` teñiría también el logo ARC incrustado en la esquina, mientras
   que una capa con `mix-blend-mode: multiply` respeta los tonos de la imagen y
   solo la vuelca hacia el azul de marca. Solo aparece en las tarjetas que
   enlazan a algún lado: sobre una tarjeta sin página, el velo prometería un
   clic que no existe. */
.arc-project-thumb { overflow: hidden; position: relative; }
.arc-project.is-link .arc-project-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #1D4598;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.arc-project.is-link:hover .arc-project-thumb::after { opacity: .55; }
.arc-project-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.arc-project:hover .arc-project-thumb img { transform: scale(1.06); }
/* Los proyectos que todavía no tienen página se muestran en gris. Siguen
   contando el portafolio completo, pero de un vistazo se distingue cuáles se
   pueden abrir sin necesidad de pasar el mouse por encima. En cuanto uno se
   marca como publicado recupera el color solo, porque la regla depende de
   `.is-link`, que ya distingue tarjeta enlazada de tarjeta simple.
   Aquí sí conviene `filter`: el objetivo es apagar la foto entera, incluido el
   logo ARC incrustado —al revés que el velo azul del hover, que debe respetarlo. */
.arc-project:not(.is-link) .arc-project-thumb img {
    filter: grayscale(1);
    opacity: .78;
}
.arc-project-caption { padding: 22px 25px 25px; }
.arc-project-caption .title { color: #132D67; margin-bottom: 4px; }
.arc-project-caption span { color: #33415C; font-size: 15px; }

/* La tarjeta enlazada es un <a>: hay que devolverle la caja y el color, que
   el navegador le quita por ser enlace. Solo la llevan los proyectos con
   página publicada, así que el cursor de mano distingue por sí solo cuáles
   se pueden abrir y cuáles todavía no. */
.arc-project.is-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.arc-project.is-link:hover .arc-project-caption .title { color: #1D4598; }

/* ==========================================================================
   PÁGINA DE DETALLE DE PROYECTO
   --------------------------------------------------------------------------
   Los bloques reutilizan piezas que ya existen (.arc-panel, .service-2-item,
   .arc-service-grid). Aquí solo van las tres cosas que no tenían forma
   propia: la ficha técnica, la lista de alcances y las cifras de resultados.
   ========================================================================== */
/* --- El artículo ---------------------------------------------------------- */
/* El título arranca a la misma altura que el de la tarjeta de al lado. Los
   34px salen de sumar el margen superior del aside (10px) y el relleno de la
   tarjeta (26px), menos los 2px que el texto de un titular de 36px cae dentro
   de su caja de línea frente a uno de 20px. Si cambia el relleno de
   .arc-aside-card, hay que recalcular este número. */
@media (min-width: 992px) {
    .arc-case { margin-top: 34px; }
}
.arc-case-title {
    color: #132D67;
    margin-top: 0;
    font-size: 36px;
    line-height: 1.22;
    margin-bottom: 18px;
}
.arc-case-lead {
    font-size: 20px;
    line-height: 32px;
    color: #33415C;
    margin-bottom: 26px;
}
.arc-case p {
    font-size: 17px;
    line-height: 29px;
    color: #33415C;
    margin-bottom: 18px;
}
/* Imagen destacada bajo el título. `aspect-ratio` fija la altura desde el
   primer píxel pintado, así que la foto no empuja el texto al terminar de
   cargar (eso es lo que castiga el CLS). El formato panorámico 21:9 la deja
   baja para que el texto empiece pronto, sin que la foto se coma la pantalla.
   Por debajo de ~3:1 la foto empieza a leerse como una franja decorativa y
   deja de mostrar el proyecto, así que este es el límite razonable. */
.arc-case-figure {
    margin: 0 0 30px;
    border-radius: 20px;
    overflow: hidden;
}
.arc-case .arc-project-thumb {
    border-radius: 20px;
    overflow: hidden;
}
.arc-case .arc-gallery-top .arc-project-thumb {
    aspect-ratio: 4 / 3;
}
.arc-case .arc-gallery-top .arc-project-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.arc-case .arc-project-thumb img,
.arc-case-figure img {
    border-radius: 20px;
}
.arc-case-figure img {
    display: block;
    width: 100%;
    /* height:auto es obligatorio. La etiqueta lleva width/height reales para
       reservar el espacio y evitar saltos de layout, pero mientras el alto siga
       siendo el del atributo el navegador ignora aspect-ratio por completo.
       aspect-ratio solo manda cuando el alto es auto. */
    height: auto;
    /* 3:2 en todos los anchos. Se probó una franja panorámica de 6:1 y quedaba
       demasiado baja: la foto se leía como un adorno y no como parte del caso.
       Al ser una proporción cercana a la de una cámara, no hace falta cambiarla
       por tamaño de pantalla; se escala sola sin volverse una rendija. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* Los encabezados intermedios necesitan más aire arriba que abajo: así se
   leen como el inicio de un bloque y no como un rótulo suelto entre párrafos. */
.arc-case-h {
    color: #132D67;
    margin-top: 40px;
    margin-bottom: 14px;
}
.arc-case-discipline strong { color: #132D67; }

/* --- Columna derecha: los datos ------------------------------------------ */
/* La barra sigue al lector mientras baja por el artículo, pero solo desde
   992px: por debajo las columnas se apilan y fijarla no tendría sentido. */
.arc-case-aside { margin-top: 10px; }
@media (min-width: 992px) {
    .arc-case-aside {
        position: sticky;
        top: 110px;
    }
}
.arc-aside-card {
    background: #F5F7FB;
    border: 1px solid #E7EBF3;
    border-radius: 15px;
    padding: 26px 26px 28px;
    margin-bottom: 24px;
}
.arc-aside-title {
    color: #132D67;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E0E6F0;
}

/* Ficha técnica: filas apiladas, etiqueta encima del dato. En una columna
   estrecha esto se escanea mejor que dos columnas apretadas. */
.arc-fact + .arc-fact {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E7EBF3;
}
.arc-fact-label {
    display: block;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8A6D2F;
    margin-bottom: 4px;
}
.arc-fact-value {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #132D67;
    line-height: 1.35;
}

/* Viñeta propia en vez del disco por defecto: un cuadro pequeño en azul de
   marca lee como especificación técnica, no como lista de supermercado. */
.arc-scope {
    list-style: none;
    padding: 0;
    margin: 0;
}
.arc-scope li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
    color: #33415C;
    font-size: 15px;
    line-height: 24px;
}
.arc-scope li:last-child { margin-bottom: 0; }
.arc-scope li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #1D4598;
    border-radius: 2px;
}

.arc-result + .arc-result {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #E7EBF3;
}
.arc-result-figure {
    display: block;
    font-family: "space_grotesk";
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    color: #1D4598;
}
.arc-result-label {
    display: block;
    margin-top: 4px;
    color: #5B6B85;
    font-size: 15px;
}

/* Anterior / todos / siguiente. Los dos vecinos son pestañas a los lados y
   el enlace al índice queda al centro. Con `margin-left: auto` en la pestaña
   "siguiente", el bloque se mantiene equilibrado aunque falte uno de los dos
   vecinos —que es lo normal en el primer y el último proyecto—. */
/* Rejilla de tres columnas «1fr auto 1fr»: las dos laterales miden siempre lo
   mismo, así que la del centro queda centrada respecto al contenedor sin
   depender de lo largo que sea el nombre de cada proyecto. Con flex y márgenes
   automáticos el centro se corría según el ancho de las pestañas vecinas. */
.arc-prevnext {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.arc-prevnext-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 30px 28px;
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 15px;
    text-decoration: none;
    color: #132D67;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.arc-prevnext-link:hover {
    border-color: #C7D2E5;
    box-shadow: 0 12px 28px rgba(19, 45, 103, .10);
    transform: translateY(-2px);
}
/* La pestaña "siguiente" invierte el orden para que la flecha quede del lado
   hacia el que apunta, no pegada al texto por dentro. */
.arc-prevnext-link.is-prev { grid-column: 1; justify-self: start; }
/* La pestaña "siguiente" invierte el orden para que la flecha quede del lado
   hacia el que apunta, no pegada al texto por dentro. */
.arc-prevnext-link.is-next {
    grid-column: 3;
    justify-self: end;
    flex-direction: row-reverse;
    text-align: right;
}
.arc-prevnext-arrow {
    font-size: 22px;
    line-height: 1;
    color: #1D4598;
    flex: none;
}
.arc-prevnext-label {
    display: block;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8A94A8;
    margin-bottom: 2px;
}
.arc-prevnext-name {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
}
.arc-prevnext-link:hover .arc-prevnext-name { color: #1D4598; }
/* El enlace al índice es la tercera pestaña, no un texto suelto: con las tres
   con la misma caja, la fila se lee como un solo control de navegación. Va en
   azul de marca porque es la salida del recorrido, no un paso más dentro de él. */
.arc-prevnext-all {
    display: flex;
    align-items: center;
    grid-column: 2;
    justify-self: center;
    padding: 30px 34px;
    background: #1D4598;
    border: 1px solid #1D4598;
    border-radius: 15px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.arc-prevnext-all:hover {
    background: #132D67;
    border-color: #132D67;
    color: #fff;
    box-shadow: 0 12px 28px rgba(19, 45, 103, .18);
    transform: translateY(-2px);
}
/* Con solo dos proyectos publicados no hay un anterior distinto del siguiente,
   así que la fila baja a dos pestañas. Se centran como pareja en lugar de dejar
   una columna vacía, que se leía como un hueco. Vuelve sola a tres columnas en
   cuanto se publica un tercer proyecto. */
.arc-prevnext.is-duo {
    grid-template-columns: auto auto;
    justify-content: center;
}
.arc-prevnext.is-duo .arc-prevnext-link.is-prev,
.arc-prevnext.is-duo .arc-prevnext-all {
    grid-column: auto;
    justify-self: auto;
}

/* Tres pestañas de 30px de relleno no caben en una fila de 768px: se apilan
   desde que desaparece la retícula de escritorio, no hasta el móvil. */
@media (max-width: 991px) {
    .arc-prevnext { grid-template-columns: 1fr; }
    .arc-prevnext-link.is-prev,
    .arc-prevnext-all,
    .arc-prevnext-link.is-next {
        grid-column: 1;
        justify-self: stretch;
    }
    .arc-prevnext-link.is-next { flex-direction: row; text-align: left; }
    .arc-prevnext-all { justify-content: center; }
}
@media (max-width: 767px) {
    .arc-case-title { font-size: 28px; }
    .arc-case-lead { font-size: 18px; line-height: 29px; }
    .arc-result-figure { font-size: 34px; }
    .arc-prevnext { flex-direction: column; align-items: flex-start; }
    .arc-prevnext-link,
    .arc-prevnext-link.is-next {
        max-width: 100%;
        margin-left: 0;
        text-align: left;
    }
    .arc-prevnext-all { margin: 0; }
}

/* --- Formulario de contacto (usa .contact-us-box del template) --- */
.contact-us-box .input-box label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #132D67;
}
.contact-us-box .input-box select {
    width: 100%;
    height: 55px;
    padding: 0 20px;
    border: 1px solid #E7EBF3;
    border-radius: 5px;
    background: #fff;
    color: #33415C;
    font-family: "space_grotesk";
}
.contact-us-box .input-box textarea { min-height: 150px; }
.form-legal { font-size: 14px; color: #6B7794; }

/* El template pinta un fondo oscuro en .contact-us-area; aquí la sección es
   clara, así que el recuadro del formulario se deja sobre blanco. */
.contact-us-box { background: #fff; }

/* --- Distintivo "Próximamente" en las tarjetas del blog --- */
.article-soon {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 14px;
    border-radius: 30px;
    background: rgba(255, 187, 0, .18);
    color: #8A6400;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* --- Migas de pan del banner --- */
.page-title-content .breadcrumb {
    background: transparent;
    justify-content: center;
    padding: 0;
    margin-top: 12px;
}
.page-title-content .breadcrumb-item,
.page-title-content .breadcrumb-item a { color: rgba(255, 255, 255, .85); }
.page-title-content .breadcrumb-item a:hover { color: #FFBB00; }
.page-title-content .breadcrumb-item.active { color: #FFBB00; }
.page-title-content .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .55); }

/* El banner de página interior acepta una foto propia por página */
.page-title-area .section__bg {
    background-size: cover;
    background-position: center;
}

/* --- Galería de servicio --- */
.portfolio-style-3-area .portfolio-style-2-item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --- Ajustes del bloque intro reutilizado en páginas interiores --- */
.about-2-area .about-2-thumb .thumb img { border-radius: 15px; }
.about-2-content.about-11-content h2.title {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 20px;
}
@media (max-width: 767px) {
    .about-2-content.about-11-content h2.title { font-size: 28px; }
}

/* --- Correcciones sobre el bloque intro reutilizado --- */
/* El template pinta el antetítulo con un degradado rojo/amarillo del demo;
   se sustituye por el ámbar de la marca. */
.about-2-content .service-eyebrow {
    background: linear-gradient(rgba(255, 187, 0, .18) 0%, rgba(247, 147, 30, .18) 100%);
    height: 40px;
    line-height: 40px;
    padding: 0 22px;
    border-radius: 30px;
    color: #8A6400;
}

/* Las fotos de servicio son apaisadas; sin acotar, la columna crecía el doble
   que el texto y dejaba un hueco enorme.
   Con las introducciones a tres párrafos el problema se invirtió: el texto pasó
   a medir ~830px y la foto se quedaba en 409, como una miniatura flotando al
   lado. Sube a 4:5 (~680px) para que las dos columnas pesen parejo.
   No se estira hasta igualar el alto exacto del texto —lo más vistoso— porque
   son tomas apaisadas de obra: un recorte vertical agresivo se comería la
   escena que la foto viene a mostrar. 4:5 recorta lo justo. */
.about-2-thumb.about-11-thumb .thumb img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    max-height: 720px;
}
/* Apilada en móvil la foto ya no compite con nada, y tan alta solo empuja el
   contenido hacia abajo: vuelve a proporción de cámara. */
@media (max-width: 991px) {
    .about-2-thumb.about-11-thumb .thumb img {
        aspect-ratio: 3 / 2;
        max-height: 420px;
    }
}

/* Las <img> llevan width/height explícitos (evitan saltos de maquetación al
   cargar, bueno para el CLS de Core Web Vitals). Ese atributo fija la altura y
   anula aspect-ratio, así que hay que devolverla a auto donde recortamos. */
.about-2-thumb.about-11-thumb .thumb img,
.arc-project-thumb img,
.portfolio-style-3-area .portfolio-style-2-item img,
.article-11-item .article-thumb img {
    height: auto;
}

/* ==========================================================================
   Correcciones de responsividad
   --------------------------------------------------------------------------
   El template está pensado para textos cortos en inglés. Los rótulos reales de
   Arcondec son más largos ("Agenda tu consulta con nuestros especialistas") y
   provocaban desbordamiento horizontal en móvil y tablet.
   ========================================================================== */

/* ==========================================================================
   Hero-tarjeta de la portada (adaptación de nor.ma)
   --------------------------------------------------------------------------
   Lámina redondeada e insetada sobre lienzo blanco, foto a sangre con velo
   degradado, titular a dos tonos y CTAs en píldora. El header de cristal del
   template flota encima, como las píldoras de nor.ma. Solo la usa index.html
   (el <style> espejo de tools/home_source.html se elimina en el build).
   ========================================================================== */
.arc-hero { background: #131737; padding: 0; } /* 51px de topbar + 12px de canal */
/* Casi pantalla completa: viewport menos el colchón superior (63px) y un
   respiro de 12px; svh evita el baile de la barra del navegador en móvil. */
.arc-hero-card { position: relative; overflow: hidden; }
/* Tipografía del template original en el slider (misma escala que el hero
   histórico de Arcondec: el título oficial no cabe a los 100px del demo). */
.arc-hero .hero-2-content.hero-11-content .title { font-size: 72px; line-height: 1.08; text-transform: none; }
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .arc-hero .hero-2-content.hero-11-content .title { font-size: 56px; line-height: 1.1; }
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .arc-hero .hero-2-content.hero-11-content .title { font-size: 42px; line-height: 1.15; }
}
@media (max-width: 575px) {
    .arc-hero .hero-2-content.hero-11-content .title { font-size: 32px; line-height: 1.2; }
}
.arc-hero .hero-2-content .text p { color: rgba(255, 255, 255, .88); max-width: 640px; }

/* Slides en capas: la primera da altura y queda visible sin JavaScript; las
   demás esperan apagadas a que arcondec-motion.js las rote con el scroll. */
.arc-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.arc-hero-slide:first-child { position: relative; opacity: 1; visibility: visible; }
.arc-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arc-hero-scrim { position: absolute; inset: 0; background: rgba(19, 23, 55, .40); }
.arc-hero-panel { border: 0; }

/* El rótulo «GRUPO ARCONDEC» del hero. El template lo trae como píldora de
   cristal esmerilado (blanco al 25% con `backdrop-filter`), que sobre un video
   de fondo se lee distinto en cada lámina. Se cambia por un rectángulo naranja
   sólido: color de marca, legible siempre y con esquinas apenas redondeadas.
   Se anula el desenfoque porque con fondo opaco solo cuesta rendimiento.
   Usa el mismo #FFBB00 y el mismo #132D67 de la letra del botón «Habla con
   un asesor» que está debajo, así los dos elementos se leen como piezas del
   mismo sistema. Contraste 7.5:1, holgado sobre el 4.5:1 que pide WCAG AA.
   Si se cambia cualquiera de los dos colores, recalcular el ratio. */
.arc-hero-panel > span {
    background-color: #FFBB00;
    color: #132D67;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .06em;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Controles del hero: anterior · pausa · siguiente · contador.
   La rotación es automática y pasa de 5 s, así que WCAG 2.2.2 exige un modo de
   detenerla; y con movimiento reducido no hay avance automático, de modo que
   estos botones son el único camino a las láminas 2 y 3. Van a 44x44 para
   cumplir el tamaño mínimo de destino táctil. */
.arc-hero-controls { position: absolute; z-index: 3; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vh, 44px); display: flex; align-items: center; gap: 10px; }
.arc-hero-ctrl { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: rgba(9, 17, 40, .45); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .15s ease; }
.arc-hero-ctrl:hover { background: rgba(9, 17, 40, .72); border-color: #FFBB00; color: #FFBB00; }
.arc-hero-ctrl:active { transform: scale(0.92); }
/* El foco tiene que verse sobre foto: anillo ámbar con halo oscuro detrás. */
.arc-hero-ctrl:focus-visible { outline: 3px solid #FFBB00; outline-offset: 3px; box-shadow: 0 0 0 3px rgba(9, 17, 40, .75); }
/* Un solo botón, dos iconos: se enseña el que corresponde al estado. */
.arc-hero-toggle .fa-play { display: none; }
.arc-hero-toggle[aria-pressed="true"] .fa-pause { display: none; }
.arc-hero-toggle[aria-pressed="true"] .fa-play { display: block; }
.arc-hero-count { margin: 0 0 0 6px; color: #fff; display: flex; align-items: baseline; gap: 6px; font-weight: 600; letter-spacing: .04em; }
.arc-hero-count-n { font-size: clamp(22px, 1.8vw, 34px); }
.arc-hero-count-t { font-size: clamp(13px, 1vw, 16px); color: rgba(255, 255, 255, .75); }
@media (max-width: 767px) {
    .arc-hero { padding: 0; }
    /* El contador se va —no cabe—, pero los botones se quedan: son un requisito
       de accesibilidad, no un adorno. */
    .arc-hero-count { display: none; }
    .arc-hero-controls { left: 16px; bottom: 16px; gap: 8px; }
    /* El topbar (teléfonos + correos + login) no cabe entre 576 y 767px y se
       apilaba en columnas rotas: se oculta, como ya hace el template <576px. */
    .header-top { display: none; }
    .header-area.header-2-area .header-nav { top: 0; }
}
/* Entrada: fundido con desenfoque, como nor.ma; sin movimiento si el usuario lo
   pide. La opacidad inicial vive SOLO en el keyframe (fill "both"): si la
   animación no llega a ejecutarse, el contenido queda visible. */
@media (prefers-reduced-motion: no-preference) {
    .arc-hero-panel > * { animation: arcHeroIn .9s cubic-bezier(.22, .61, .21, 1) both; }
    .arc-hero-panel > *:nth-child(2) { animation-delay: .12s; }
    .arc-hero-panel > *:nth-child(3) { animation-delay: .24s; }
    .arc-hero-panel > *:nth-child(4) { animation-delay: .36s; }
}
@keyframes arcHeroIn { from { opacity: 0; filter: blur(10px); transform: translateY(16px); } to { opacity: 1; filter: blur(0); transform: none; } }

/* El menú desplegable (móvil/tablet) cae como tarjeta redondeada, no como panel
   seco. SOLO ≤991px: en escritorio .navbar-collapse aloja el submenú absoluto
   de Servicios y un overflow:hidden aquí lo recortaría (pasó). */
@media (max-width: 991px) {
    .header-area.header-2-area .header-nav .navbar-collapse {
        border-radius: 20px;
        overflow: hidden;
        margin-top: 8px;
    }
}

/* --- Sistema de botones: una sola geometría ---
   El template reparte entre .main-btn, el hero (index-11) y la franja de
   compromiso tres alturas (54/56/60px), tres radios (2/3/5px), mayúsculas y
   letter-spacing dispares, con selectores 0-2-3 que ganaban a los overrides.
   Aquí se unifica todo el cuerpo del botón con la especificidad necesaria. */
.hero-2-content.hero-11-content ul li a,
.subscribe-form.subscribe-11-form ul li a {
    text-transform: none;
    letter-spacing: 0;
    border-radius: 5px;
    font-size: 16px;
    line-height: 54px;
    padding: 0 36px;
}

/* Móvil: .main-btn trae white-space:nowrap y 54-60px de línea; con rótulos
   largos el botón medía 473px de ancho o partía en líneas de 56px de alto. */
@media (max-width: 767px) {
    .main-btn,
    .main-btn.main-btn-2,
    .main-btn.main-btn-3,
    .hero-2-content.hero-11-content ul li a,
    .hero-2-content.hero-11-content ul li a.main-btn-2,
    .subscribe-form.subscribe-11-form ul li a,
    .subscribe-form.subscribe-11-form ul li a.main-btn-2 {
        white-space: normal;
        line-height: 1.4;
        padding: 13px 24px;
        min-height: 48px;
        max-width: 100%;
    }
    /* CTAs por pares (hero y franja): columna a ancho completo con 12px de
       aire; el primario ámbar arriba, el secundario azul/contorno debajo. */
    .hero-2-content.hero-11-content ul li,
    .subscribe-form.subscribe-11-form ul li {
        display: block;
        margin-right: 0;
    }
    .hero-2-content.hero-11-content ul li a,
    .subscribe-form.subscribe-11-form ul li a {
        display: block;
        width: 100%;
    }
    /* El template indenta 28px el secundario entre 576-767px aun a ancho
       completo; se anula y se fija el ritmo vertical del par. */
    .hero-2-content.hero-11-content ul li a.main-btn-2,
    .subscribe-form.subscribe-11-form ul li a.main-btn-2 {
        margin-left: 0;
        margin-top: 12px;
    }
}

/* El bloque de imágenes de "Sobre nosotros" apila dos fotos con un desfase de
   80px (.ml-80). Por debajo de lg esa suma superaba el ancho disponible. */
@media (max-width: 991px) {
    .about-2-thumb .thumb img,
    .about-2-thumb .thumb-2 img {
        max-width: 100%;
        height: auto;
    }
    .about-2-thumb .thumb-2.ml-80 {
        margin-left: 0;
    }
    .about-2-thumb,
    .about-2-thumb .thumb,
    .about-2-thumb .thumb-2 {
        max-width: 100%;
    }
}

/* NO usar `overflow-x: hidden` en html/body.
   En Safari convierte a <html> en contenedor de scroll y `jQuery(window).scrollTop()`
   se queda en 0. De eso dependen DOS cosas del template:
     · el header pegajoso (main.js añade .sticky según el scroll)
     · WOW.js, que mantiene los bloques .wow en visibility:hidden hasta animarlos
   Con la regla puesta, el header no se formaba y las fotos nunca aparecían.
   Las causas reales del desbordamiento ya están corregidas arriba (botones que
   no partían línea y el desfase .ml-80), así que esta red de seguridad sobra. */

/* Bloque de CTA centrado.
   OJO: aquí había un `}` de más y las dos reglas iban indentadas, restos de un
   @media cuyo encabezado se perdió en alguna edición. El navegador descartaba
   la llave suelta, así que estas reglas venían aplicándose en TODOS los anchos
   —que es como se ve el sitio hoy— y por eso se dejan tal cual: quitar la llave
   corrige el archivo sin mover nada en pantalla. Si en su día se pensaron solo
   para móvil, envolverlas en @media (max-width: 767px) es un cambio de diseño y
   toca decidirlo aparte. */
.arc-cta { text-align: center; }
.arc-cta .main-btn { margin-top: 20px; }

/* --- Listas y enlaces dentro de los paneles blancos --- */
/* Sin esto, los <ul> de datos de contacto salen con viñetas del navegador. */
.arc-panel ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.arc-panel ul li { margin-bottom: 10px; color: #33415C; }
.arc-panel ul li:last-child { margin-bottom: 0; }
.arc-panel ul li span { color: #132D67; font-weight: 500; }
.arc-panel a { color: #1D4598; }
.arc-panel a:hover { color: #8A6400; text-decoration: underline; }

/* --- Acordeón de vacantes (Vacantes) ---------------------------------------
   <details>/<summary> nativos: sin JS, con soporte de teclado y lector de
   pantalla de fábrica. Cada fila expande requisitos, funciones y un
   formulario propio hacia Formspree (con verificación anti-spam incluida). */
.arc-vacancies { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.arc-vacancy {
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 15px;
    overflow: hidden;
}
.arc-vacancy[open] { border-color: #C7D2E5; }
.arc-vacancy-head {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 22px 26px;
}
.arc-vacancy-head::-webkit-details-marker { display: none; }
/* El resalte azul es solo una señal de "esto se puede abrir": en cuanto la
   vacante está desplegada deja de aplicarse, porque ahí el foco es el
   contenido y el formulario, no la fila. De ahí el :not([open]). */
.arc-vacancy-head,
.arc-vacancy-title,
.arc-vacancy-meta {
    transition: background-color .25s ease, color .25s ease;
}
.arc-vacancy:not([open]) .arc-vacancy-head:hover {
    background: #1E429B;
}
.arc-vacancy:not([open]) .arc-vacancy-head:hover .arc-vacancy-title,
.arc-vacancy:not([open]) .arc-vacancy-head:hover .arc-vacancy-meta {
    color: #fff;
}
.arc-vacancy:not([open]) .arc-vacancy-head:hover .arc-vacancy-icon::before,
.arc-vacancy:not([open]) .arc-vacancy-head:hover .arc-vacancy-icon::after {
    background: #fff;
}
.arc-vacancy-title { color: #132D67; font-weight: 600; font-size: 18px; }
.arc-vacancy-meta { color: #5B6B85; font-size: 15px; margin-left: auto; }
.arc-vacancy-icon { position: relative; width: 20px; height: 20px; flex: none; }
.arc-vacancy-icon::before,
.arc-vacancy-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #1D4598;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}
.arc-vacancy-icon::before { width: 14px; height: 2px; }
.arc-vacancy-icon::after { width: 2px; height: 14px; }
.arc-vacancy[open] .arc-vacancy-icon::after { transform: translate(-50%, -50%) scale(0); }
.arc-vacancy-body { padding: 0 26px 26px; border-top: 1px solid #E7EBF3; }
.arc-vacancy-body p { color: #33415C; font-size: 17px; line-height: 28px; margin: 18px 0 0; }
.arc-vacancy-body p strong { color: #132D67; }
.arc-vacancy-form { border-top: 1px dashed #E7EBF3; margin-top: 20px; padding-top: 20px; }
.arc-vacancy-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.arc-vacancy-fields input[type="text"],
.arc-vacancy-fields input[type="email"] {
    flex: 1 1 180px;
    border: 1px solid #E7EBF3;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 15px;
    color: #33415C;
    height: 48px;
}
.arc-vacancy-file { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #5B6B85; }
.arc-vacancy-file input[type="file"] {
    border: 1px dashed #C7D2E5;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #33415C;
    background: #fff;
}
.arc-vacancy-form .main-btn { padding: 0 28px; line-height: 48px; }
.arc-vacancy-note { color: #8A94A8; font-size: 13px; margin-top: 12px; }
@media (max-width: 767px) {
    .arc-vacancy-head { padding: 18px 20px; }
    .arc-vacancy-meta { margin-left: 0; }
    .arc-vacancy-body { padding: 0 20px 20px; }
}

/* --- Campos del formulario, al estilo del template --- */
.contact-us-box .input-box select,
.contact-us-box .input-box input,
.contact-us-box .input-box textarea {
    background: #F5F5F5;
    border: 0;
    border-radius: 5px;
}
.contact-us-box .input-box select { height: 60px; padding: 0 20px; }
.contact-us-box .input-box textarea { padding-top: 15px; }
.contact-us-box .input-box label {
    color: #132D67;
    font-weight: 500;
}
.contact-us-box { padding: 45px 40px; border: 1px solid #E7EBF3; border-radius: 15px; }
@media (max-width: 575px) {
    .contact-us-box { padding: 28px 20px; }
}

/* El mapa incrustado hereda el radio de la tarjeta */
.contact-map iframe { border-radius: 10px; display: block; width: 100%; }

/* Clase de utilidad para lectores de pantalla (etiqueta del boletín) */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* --- Tarjetas del índice de blog con altura uniforme --- */
/* Los títulos y resúmenes tienen longitudes distintas; sin esto, el distintivo
   "Próximamente" queda a alturas distintas y la retícula se ve desalineada. */
.article-2-area .row > [class*="col-"] { display: flex; }
.article-2-item.article-11-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 15px;
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.article-2-item.article-11-item:hover {
    box-shadow: 0 18px 40px rgba(19, 45, 103, .12);
    transform: translateY(-4px);
}
.article-11-item .article-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 25px;
}
.article-11-item .article-content .title { color: #132D67; }
.article-11-item .article-content p { color: #33415C; flex: 1 1 auto; }
.article-11-item .article-content .article-soon { align-self: flex-start; }

/* ==========================================================================
   Submenú de Servicios
   --------------------------------------------------------------------------
   El template fija .sub-menu en 205px, pensado para rótulos cortos en inglés.
   Los de Arcondec ("Construcción llave en mano", "Corriente directa (DC)")
   no caben y se salían de la caja blanca. Se deja que el submenú crezca con
   su contenido, con un tope para que no invada el resto del menú.
   ========================================================================== */
@media (min-width: 992px) {
    .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu {
        width: auto;
        min-width: 290px;
        max-width: 320px;
    }
    .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li > a {
        white-space: normal;
        line-height: 1.45;
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

/* Rótulos de área dentro del desplegable de Servicios.
   Van como <li> sin <a> porque las áreas no tienen página: no hay destino que
   ofrecer y un enlace muerto confunde, sobre todo con lector de pantalla.
   Se distinguen del resto por versalitas y color apagado, no por tamaño: el
   protagonista del menú sigue siendo el servicio, no el grupo. */
.header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li.arc-sub-group {
    padding: 14px 20px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A94A8;
    cursor: default;
    pointer-events: none;
}
/* El primero no necesita el aire de arriba: ya lo pone la caja del submenú. */
.header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li.arc-sub-group:first-child {
    padding-top: 4px;
}
/* Los servicios se recorren dentro de su área: la sangría hace visible a cuál
   pertenece cada uno sin necesidad de líneas divisorias. */
.header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li:not(.arc-sub-group) > a {
    padding-left: 30px;
}

/* La animación fadeInRight de WOW desplaza el bloque de imágenes ~100px a la
   derecha mientras dura (1s). El template original hace exactamente lo mismo.
   Se contiene EN LA PROPIA SECCIÓN, no en html/body: así no se crea un
   contenedor de scroll y jQuery(window).scrollTop() sigue funcionando, que es
   de lo que dependen el header pegajoso y el propio WOW. */
.about-2-area,
.about-11-area {
    overflow-x: hidden;
}

/* ==========================================================================
   Tarjetas de servicio — modelo services-2.html del template
   --------------------------------------------------------------------------
   Se reutiliza .service-2-item tal cual (geometría, radios, hover y punteado
   del template). Solo se cambia la paleta: el demo usa un degradado rojo/amarillo
   y aquí van los colores oficiales de Arcondec. La tipografía es la del
   template (space_grotesk), heredada; no se introduce ninguna otra.
   ========================================================================== */

/* Relleno del hover con el azul de marca (el demo trae #ff564f → #fad029) */
.service-2-item::before {
    background: linear-gradient(330deg, #1D4598 0%, #132D67 80%);
}

/* Círculo del icono con el ámbar de marca */
.service-2-item .icon {
    background: rgba(255, 187, 0, .16);
}
.service-2-item .icon i {
    font-size: 34px;
    line-height: 90px;
    color: #1D4598;
    transition: color .4s ease-out 0s;
}
.service-2-item:hover .icon i {
    color: #132D67;
}

/* Las tarjetas del índice son enlaces: se comportan como bloque y no subrayan */
a.service-2-item {
    text-decoration: none;
    height: calc(100% - 30px);
}
a.service-2-item:hover { text-decoration: none; }
.service-2-item .title { color: #132D67; }
.service-2-item p { color: #33415C; }

/* "Ver servicio" con la flecha del template */
.service-more {
    display: inline-block;
    margin-top: 18px;
    font-weight: 600;
    color: #1D4598;
    transition: color .4s ease-out 0s;
}
.service-more i { margin-left: 6px; }
.service-2-item:hover .service-more { color: #FFBB00; }

/* Variante sin párrafo: las viñetas de "Servicios especializados" son frases
   cortas, así que la tarjeta se compacta y el título no queda descolgado. */
.service-2-item.arc-spec { padding: 32px 24px; }
.service-2-item.arc-spec .title {
    font-size: 19px;
    margin-top: 24px;
    margin-bottom: 0;
    line-height: 1.4;
}
@media (max-width: 767px) {
    .service-2-item.arc-spec .title { font-size: 18px; }
}

/* Alturas parejas SOLO en la rejilla de tarjetas. Si se aplicara a todas las
   filas de la sección, la columna del título también se volvería contenedor
   flex y el encabezado se encogería y dejaría de estar centrado. */
.arc-service-grid > [class*="col-"] { display: flex; }
.arc-service-grid .service-2-item { width: 100%; height: calc(100% - 30px); }

/* Los textos de cada servicio tienen longitudes distintas; con flex el enlace
   "Ver servicio" queda a la misma altura en toda la fila, como en el mockup. */
a.service-2-item {
    display: flex;
    flex-direction: column;
}
a.service-2-item .title { margin-bottom: 12px; }
a.service-2-item p { flex: 1 1 auto; margin-bottom: 0; }
a.service-2-item .service-more { align-self: center; }

/* ==========================================================================
   Un solo lenguaje de tarjeta en todo el sitio
   --------------------------------------------------------------------------
   Antes convivían dos: .service-2-item del template (centrada, icono en
   círculo, título 25px/600) y una propia (.arc-card, alineada a la izquierda,
   título 22px/500). Mezclar pesos 500/600/700 se lee como "otra tipografía"
   aunque la familia sea la misma. Ahora todo usa .service-2-item, que ES la
   del template, y la escala queda: 56px título de sección · 25px título de
   tarjeta · 17px texto.
   ========================================================================== */

/* Los servicios relacionados son enlaces con el mismo aspecto de tarjeta */
a.service-2-item.arc-spec { display: flex; flex-direction: column; justify-content: center; }
a.service-2-item.arc-spec .title { margin-bottom: 0; }

/* Título de tarjeta: el 25px/600 del template, con margen algo menor para que
   la retícula respire igual en tarjetas con y sin párrafo. */
.arc-service-grid .service-2-item .title { margin-top: 28px; }

/* El punteado decorativo del template se desbordaba por la derecha en las
   tarjetas más estrechas; se ancla al pie como en el mockup original. */
.service-2-item .service-dot { overflow: hidden; }
.service-2-item .service-dot > img { max-width: 100%; height: auto; }

/* El botón secundario de la franja de compromiso salía blanco sobre azul */
.subscribe-form.subscribe-11-form ul li a.main-btn-2 {
    background: transparent;
    border-color: #fff;
    color: #fff;
}
.subscribe-form.subscribe-11-form ul li a.main-btn-2:hover {
    background: #fff;
    border-color: #fff;
    color: #1D4598;
}

/* La galería de obra necesita su propio encabezado para no quedar suelta */

/* ==========================================================================
   Indicador de desplegable en "Servicios"
   --------------------------------------------------------------------------
   Avisa de que el ítem despliega el resto de servicios.

   Se dibuja con ::after y NO se reutiliza el <button class="sub-nav-toggler">
   que inyecta main.js: ese botón sigue siendo el control táctil por debajo de
   992px y, si se mostrara en escritorio, seguiría siendo enfocable por teclado;
   pulsarlo con Intro dispararía el slideToggle de jQuery y dejaría el submenú
   en display:none, rompiendo la apertura por hover hasta recargar.
   Así el indicador es puramente decorativo y el móvil queda intacto.
   ========================================================================== */
@media (min-width: 992px) {
    .header-nav .navigation .navbar .navbar-nav > .nav-item.arc-has-sub > a::after {
        content: "\f107";                    /* fa-angle-down */
        font-family: "Font Awesome 5 Pro";
        font-weight: 300;                    /* equivale a .fal */
        font-size: 13px;
        line-height: 1;
        margin-left: 7px;
        display: inline-block;
        vertical-align: middle;
        transition: transform .3s ease-out 0s;
    }
    /* Gira al abrirse el submenú, como cualquier desplegable */
    .header-nav .navigation .navbar .navbar-nav > .nav-item.arc-has-sub:hover > a::after {
        transform: rotate(180deg);
    }
}

/* ==========================================================================
   Franja superior del pie
   --------------------------------------------------------------------------
   El template no contemplaba enlaces aquí (su pie es texto plano). Al hacer
   los teléfonos y correos pulsables, los <a> caían al azul por defecto del
   navegador: azul sobre azul marino, ilegible. Además los números se partían
   a mitad al final de línea.
   ========================================================================== */
.footer-2-area .footer-2-top a {
    color: #E0E0E0;
    text-decoration: none;
    transition: color .3s ease-out 0s;
}
.footer-2-area .footer-2-top a:hover {
    color: #FFBB00;
    text-decoration: none;
}
/* Un teléfono partido en dos líneas deja de ser legible como número */
.footer-2-area .footer-info ul li a[href^="tel:"],
.footer-2-area .footer-info ul li a[href^="mailto:"] {
    white-space: nowrap;
    display: inline-block;
}

/* Ritmo vertical: las cuatro columnas alineadas arriba y con la misma altura
   de línea, para que la retícula se lea de un vistazo. */
.footer-2-area .footer-info ul li {
    line-height: 1.75;
    margin-bottom: 2px;
}
.footer-2-area .footer-info ul li img {
    top: 9px;
}

/* Logo y sello D-U-N-S: el sello iba pegado al logotipo y con la leyenda
   ilegible; se le da aire y un tamaño que permita leerla. */
.footer-2-area .footer-2-top .footer-logo { padding-top: 4px; }
.footer-2-top .footer-logo img.duns {
    height: 54px;
    margin-top: 20px;
}

@media (max-width: 991px) {
    /* En tablet y móvil las columnas se apilan: separación clara entre bloques */
    .footer-2-area .footer-2-top .footer-info { margin-top: 26px; }
    .footer-2-area .footer-2-top .footer-logo { margin-bottom: 6px; }
}

/* --- Columnas de enlaces del pie --- */
/* El template fija line-height:36px en los enlaces. Con rótulos largos como
   "Construcción llave en mano" el enlace se parte y las dos líneas quedan tan
   separadas que se leen como dos enlaces distintos. Se compacta la línea y se
   separan los ítems entre sí, que es lo que de verdad debe respirar. */
.footer-item .footer-list ul li a {
    line-height: 1.55;
    display: inline-block;
}
.footer-item .footer-list ul li {
    margin-bottom: 13px;
}
.footer-item .footer-list ul li:last-child { margin-bottom: 0; }
.footer-item .footer-list .title { margin-bottom: 26px; }

/* Botón del boletín con el ámbar de la marca (el template lo deja en blanco) */
.footer-newsletter-item .input-box button {
    background: #FFBB00;
    color: #132D67;
    font-weight: 600;
    line-height: 54px;
    transition: background .3s ease-out 0s, color .3s ease-out 0s;
}
.footer-newsletter-item .input-box button:hover {
    background: #E5A800;
    color: #132D67;
}

/* La caja del boletín se alinea con las columnas de enlaces */
.footer-newsletter-item.footer-newsletter-item-11 { border-radius: 10px; }

/* Entre 992 y 1200px las cuatro columnas del pie quedan en su punto más
   estrecho y "Construcción llave en mano" no cabe en una línea. Se reduce
   ligeramente el cuerpo, igual que hace el template en otros bloques. */
@media only screen and (min-width: 992px) and (max-width: 1200.98px) {
    .footer-item .footer-list ul li a { font-size: 15px; }
    .footer-item .footer-list .title { font-size: 19px; }
}

/* ==========================================================================
   Accesibilidad
   --------------------------------------------------------------------------
   El template hace `a:focus, button:focus { outline: none }` (style.css:104)
   y no lo repone: NINGÚN elemento mostraba foco. Quien navega con teclado no
   sabía dónde estaba. Se repone con :focus-visible, que no molesta al ratón.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #132D67;
    outline-offset: 2px;
}

/* El submenú de Servicios solo abría con :hover, así que sus 7 enlaces eran
   inalcanzables con el tabulador. :focus-within lo abre también con teclado. */
@media (min-width: 992px) {
    .header-nav .navigation .navbar .navbar-nav .nav-item:focus-within .sub-menu {
        opacity: 1;
        visibility: visible;
        top: 100%;
    }
    .header-nav .navigation .navbar .navbar-nav .nav-item:focus-within > a::after {
        transform: rotate(180deg);
    }
}

/* Saltar al contenido: había 20 elementos focalizables antes del <main> */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 22px;
    background: #FFBB00;
    color: #132D67;
    font-weight: 600;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    left: 0;
    color: #132D67;
}

/* El botón "volver arriba" pasó de <a> a <button>: se neutraliza el aspecto
   nativo para que conserve exactamente el diseño del template. */
button.back-to-top {
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* animate.css ya respeta prefers-reduced-motion, pero el preloader no lleva
   la clase .animated y seguía girando. */
@media (prefers-reduced-motion: reduce) {
    .lds-ellipsis span,
    .preloader * {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Caja de los titulares --- */
/* El template aplica text-transform:capitalize, pensado para inglés. En español
   produce "Servicios Especializados" o "Trabaja Con Nosotros", que es ortografía
   incorrecta. Se desactiva y los textos se muestran tal como están escritos en
   el contenido oficial. */
.page-title-content > .title,
.about-2-content > .title,
.section-title-9 .title,
.service-2-item .title {
    text-transform: none;
}

/* ==========================================================================
   Fugas de la plantilla que ganaban por especificidad
   ========================================================================== */

/* El botón de ENVIAR del formulario —el único botón de conversión del sitio—
   salía en el coral del demo (#FF564F) y en morado al pasar el cursor, porque
   style.css lo ataca con .contact-us-box .input-box button (0-2-1) y nuestro
   .main-btn (0-1-0) perdía aunque se cargue después. */
.contact-us-box .input-box button {
    background: #FFBB00;
    border-color: #FFBB00;
    color: #132D67;
}
.contact-us-box .input-box button:hover {
    background: #D09021;
    border-color: #D09021;
    color: #fff;
}

/* "Playfair Display" se declara en style.css pero NUNCA se carga: esos textos
   caían a una serif del sistema, rompiendo la unidad tipográfica. */
.contact-us-box .title,
.testimonial-3-content .info .title {
    font-family: "space_grotesk";
}
.contact-us-box .title { font-size: 28px; line-height: 1.25; font-weight: 700; }
.testimonial-3-content .info .title { font-weight: 600; }

/* line-height (48px) menor que font-size (56px): a dos líneas, las tildes de
   la segunda invadían la primera. Muy visible en español. */
.section-title-9 .title,
.arc-h2 {
    font-family: "space_grotesk";
    font-weight: 700;
    font-size: 48px;
    line-height: 1.18;
    letter-spacing: normal;
}
@media (max-width: 767px) {
    .section-title-9 .title,
    .arc-h2 { font-size: 32px; line-height: 1.22; }
}

/* Bootstrap define .h3/.h4/.h5 con font-weight:500 y gana a los h1..h6 de
   style.css por especificidad de clase. Afectaba a 204 encabezados, que salían
   más ligeros que sus hermanos sin la clase. */
.title.h3,
.title.h4,
.title.h5 {
    font-weight: 700;
    line-height: 1.25;
}

/* Longitud de línea: el panel a col-lg-10 daba 99 caracteres por línea */
.arc-panel p { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* El botón flotante de WhatsApp quedaba por debajo de otras capas */
.whatsapp-float { z-index: 998; }

/* ==========================================================================
   Móvil: correcciones de uso real
   ========================================================================== */

/* Los botones .main-btn-3 se aplastaban a 22px de alto: resuelto en el
   "Sistema de botones" (arriba), que ya incluye .main-btn.main-btn-3. */

/* Áreas táctiles: el mínimo recomendado es 44px y varias quedaban en 22-40px */
@media (max-width: 991px) {
    .header-nav .navigation .navbar .navbar-nav .nav-item a,
    .header-nav .navigation .navbar .navbar-nav .nav-item .sub-menu > li a {
        line-height: 1.4;
        padding: 13px 0;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .navbar-toggler { padding: 11px 12px; }
    .header-nav .navigation .navbar .navbar-nav .nav-item .sub-nav-toggler { width: 48px; }
}
@media (max-width: 575px) {
    .arc-panel ul li a,
    .footer-item .footer-list ul li a,
    .footer-copyright p a,
    .page-title-content .breadcrumb-item a {
        display: inline-block;
        padding: 10px 0;
    }
    .arc-panel ul li,
    .footer-item .footer-list ul li { margin-bottom: 2px; }

    /* El banner ocupaba 425px de los 568px de un iPhone SE */
    .page-title-content { padding-top: 130px; padding-bottom: 24px; }

    /* El FAB de WhatsApp se montaba sobre el botón del hero, ya a ancho completo */
    .whatsapp-float { bottom: 104px; }

    .contact-us-box .input-box select { font-size: 15px; padding: 0 12px; }
}

/* quejasysugerencias@arcondec.mx se salía de su tarjeta a 320px */
.arc-panel ul li,
.arc-panel a { overflow-wrap: anywhere; }

/* Único texto del sitio por debajo de 14px */
.article-soon { font-size: 14px; }

/* ==========================================================================
   Contraste: correcciones con ratio calculado (WCAG AA)
   ========================================================================== */

/* Sobre fondos oscuros el anillo azul marino no se vería: ahí va el ámbar */
.header-area a:focus-visible,
.footer-area a:focus-visible,
.subscribe-11-area a:focus-visible,
.arc-cta a:focus-visible,
.whatsapp-float:focus-visible {
    outline-color: #FFBB00;               /* 5.29 sobre #1D4598 · 7.73 sobre ámbar */
}

/* El CTA de la franja de compromiso viraba a blanco con texto índigo del demo */
.subscribe-form.subscribe-11-form ul li a:hover {
    background: #E5A800;
    border-color: #E5A800;
    color: #132D67;                        /* 6.21:1 */
}

/* Migas de pan sobre foto: medidas píxel a píxel, 6 de 13 banners eran
   ilegibles (hasta 1.81:1). El overlay sube y el ítem activo deja de depender
   de la foto al llevar su propio fondo. */
.page-title-area .section__bg::before { opacity: .62; }
.page-title-content .breadcrumb-item,
.page-title-content .breadcrumb-item a { color: #fff; }
.page-title-content .breadcrumb-item.active {
    background: #132D67;
    color: #FFBB00;                        /* 7.73:1 fijo */
    padding: 2px 12px;
    border-radius: 20px;
}

/* Texto legal: 4.48:1, fallaba por dos centésimas */
.form-legal { color: #5C6784; }            /* 5.63:1 */

/* El precargador es lo primero que se ve y salía en el naranja del demo */
.lds-ellipsis span { background: #FFBB00; }

/* a:hover global del template (#FFAB4A) filtrándose a elementos sin color propio */
a.service-2-item:hover { color: #fff; }
.whatsapp-float,
.whatsapp-float:hover,
.whatsapp-float:focus { color: #fff; }

/* Botones primarios: mismo ámbar pero convivían 5 radios y 3 cuerpos */
.main-btn,
.main-btn-2,
.main-btn-3,
.contact-us-box .input-box button,
.footer-newsletter-item .input-box button,
.subscribe-11-form ul li a {
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

/* ==========================================================================
   Tablet y escritorio pequeño (576–1200px)
   ========================================================================== */

/* Los logos de clientes ya no usan .brand-3-items: la sección la ocupa el
   carrusel .arc-logos (slick, ver arcondec-motion.js §6c) y su respaldo sin
   JavaScript es la fila desplazable de más abajo. Aquí vivían ~55 líneas de
   reglas para .brand-3-items y para la cinta .arc-marquee que movía el JS;
   ninguna de las dos existe ya en las páginas publicadas. */


/* La segunda foto de Nosotros salía estirada 3× en vertical: el height="1200"
   del atributo fijaba la altura y la corrección de height:auto solo alcanzaba
   a .thumb img, no a .thumb-2 img. */
.about-2-thumb .thumb-2 img { width: 100%; height: auto; }

/* Faltaba el tramo 768–991 en la escalera del titular del hero: al bajar de 992
   a 991 la tipografía CRECÍA de 62px a 80px y el hero pasaba de 1214 a 1355px,
   más alto que la pantalla de un iPad. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-2-content.hero-11-content .title { font-size: 56px; line-height: 1.1; }
}

/* Los rótulos en español ocupan más líneas que los del demo: las tarjetas del
   carrusel quedaban desiguales sobre el fondo azul. */
@media (min-width: 768px) and (max-width: 991px) {
    .service-2-item.service-11-item { min-height: 400px; }
}
@media (min-width: 992px) and (max-width: 1200.98px) {
    .service-2-item.service-11-item { min-height: 385px; }
}

/* Igual que en .about-2-area: la animación fadeInRight desplaza la tarjeta y
   provoca un destello de scroll horizontal mientras dura. */
.article-2-area { overflow-x: hidden; }

/* ==========================================================================
   Movimiento — acompaña a assets/js/arcondec-motion.js (GSAP + ScrollTrigger)
   --------------------------------------------------------------------------
   Aquí solo va lo que se resuelve mejor en CSS: el ajuste de las animaciones de
   entrada del hero (las del propio slick) y los microgestos de hover. La
   aparición por scroll la monta el JS, que además respeta prefers-reduced-motion.
   ========================================================================== */

/* Barra de progreso de lectura. La pinta y la mueve arcondec-motion.js; si GSAP
   no carga, el elemento no llega a crearse. */
.arc-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #FFBB00 0%, #F7931E 100%);
    pointer-events: none;
}

/* El aire que necesita la máscara de cada línea para no cortar los trazos que
   bajan lo pone arcondec-motion.js en línea, compensado con un margen negativo:
   partir un titular no puede cambiar el alto de la página o los puntos de disparo
   de ScrollTrigger dejan de cuadrar con el recorrido real. */

/* Las tarjetas propias (.arc-project, .article-11-item) ya se levantaban al pasar
   el cursor; las del template no. Mismo gesto en todas para que la página
   responda igual en cualquier sección. */
.service-2-item,
.portfolio-style-2-item {
    transition: transform .35s ease-out, box-shadow .35s ease-out;
}
.service-2-item:hover,
.portfolio-style-2-item:hover {
    transform: translateY(-6px);
}
.portfolio-style-2-item:hover {
    box-shadow: 0 18px 40px rgba(19, 45, 103, .18);
}

/* Los botones cambiaban de color pero no se movían: 2px bastan para que el clic
   se sienta. Los .main-btn son <a> y el template ya les anima `all`; el del boletín
   es un <button>, al que esa regla global no llega, y su transición propia (más
   arriba) solo cubría color y fondo: sin esto el desplazamiento sería un salto seco. */
.footer-newsletter-item .input-box button {
    transition: background .3s ease-out 0s, color .3s ease-out 0s, transform .3s ease-out 0s;
}
.main-btn:hover,
.main-btn-2:hover,
.main-btn-3:hover,
.footer-newsletter-item .input-box button:hover,
.contact-us-box .input-box button:hover {
    transform: translateY(-2px);
}

/* Ni el hover ni la aparición deben moverse con animaciones reducidas. */
@media (prefers-reduced-motion: reduce) {
    .hero-2-content [data-animation].fadeInDown,
    .hero-2-content [data-animation].fadeInLeft,
    .hero-2-content [data-animation].fadeInUp { animation-name: none; }

    .service-2-item,
    .portfolio-style-2-item,
    .arc-project,
    .article-2-item.article-11-item,
    .main-btn,
    .main-btn-2,
    .main-btn-3,
    .arc-hero-ctrl,
    .whatsapp-float,
    .arc-links ul li a { transition: none; }

    .service-2-item:hover,
    .portfolio-style-2-item:hover,
    .arc-project:hover,
    .article-2-item.article-11-item:hover,
    .main-btn:hover,
    .main-btn-2:hover,
    .main-btn-3:hover,
    .footer-newsletter-item .input-box button:hover,
    .contact-us-box .input-box button:hover,
    .main-btn:active,
    .arc-hero-ctrl:active,
    .whatsapp-float:active,
    .whatsapp-float:hover,
    .arc-links ul li a:active { transform: none; }
}

/* ==========================================================================
   Página de Contacto reorganizada
   --------------------------------------------------------------------------
   La página abría con el formulario y dejaba los teléfonos en la columna de al
   lado: en un móvil de 390px eso eran 2,8 pantallas de scroll —los nueve campos
   enteros— antes de ver un número al que llamar. Ahora las tres vías que no
   piden rellenar nada van primero, en tres tarjetas iguales.
   ========================================================================== */

/* Nota: aquí hubo un `position: sticky` para la columna de datos, pensando que
   quedaría corta al lado del formulario. Medido, no hace falta: los tres paneles
   suman 1129px frente a los 1133px del formulario (y a 992-1100px la columna de
   datos es incluso 86px más alta), así que nunca llegaba a activarse. */

/* El horario estaba solo en el JSON-LD: lo veía Google y no el visitante.
   Va al fondo de la tarjeta; es el único elemento con margen automático, porque
   dos repartirían el hueco entre ellos y dejarían el contenido flotando. */
.arc-hours {
    margin-bottom: 0;
    padding-top: 18px;
    color: #5C6784;
    font-size: 15px;
}

/* Los teléfonos y correos son objetivos táctiles: 44px de alto en móvil, que es
   el mínimo cómodo para el pulgar. */
@media (max-width: 991px) {
    .arc-contact-aside ul li a { padding-top: 11px; padding-bottom: 11px; }
}

/* Ningún campo obligatorio se señalaba: solo se descubrían al fallar el envío.
   El asterisco lo marca a la vista y `aria-required` a los lectores de pantalla,
   así que la información no viaja solo en el color (WCAG 1.4.1 y 3.3.2). */
.contact-us-box .input-box label .req {
    color: #B3541E;
    font-weight: 700;
    margin-left: 2px;
}
.form-required-note {
    margin-top: 6px;
    margin-bottom: 0;
    color: #5C6784;
    font-size: 15px;
}

/* Las etiquetas de la rejilla comparten línea base aunque una se parta en dos
   al traducirse: si no, los dos campos de la fila arrancan a alturas distintas
   y se lee como un error de maquetación. */
@media (min-width: 768px) {
    .contact-us-box .input-box label { min-height: 2.4em; }
}

/* El mapa cierra la página a todo el ancho y en grande: es lo que se mira para
   decidir si la oficina queda a mano. En móvil se recorta a 340px, que ya deja
   ver las calles sin comerse dos pantallas. */
@media (min-width: 992px) {
    .contact-map iframe { height: 520px; }
}
@media (max-width: 991px) {
    .contact-map iframe { height: 340px; }
}

/* --------------------------------------------------------------------------
   Franja de certificaciones ISO (bajo el hero)
   --------------------------------------------------------------------------
   Los tres PNG del template se sustituyeron por iconos Font Awesome —ya
   cargados en el sitio— para que cada norma lleve su símbolo propio y se vea
   nítido en pantallas Retina, sin sumar peso ni archivos nuevos. Ocupan la
   misma caja de 45px que las imágenes, así que el padding-left: 65px del
   template sigue alineando igual. */
.sub-2-item .arc-sub-icon {
    position: absolute;
    left: 0;
    top: -2px;
    width: 45px;
    text-align: center;
    font-size: 34px;
    line-height: 1;
    color: #1D4598;
}

/* El template esconde la tercera tarjeta entre 768 y 991px para no dejar un
   huérfano en la rejilla de dos columnas. Con certificaciones eso no aplica:
   una lista de normas incompleta se lee como si faltara la certificación. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .sub-2-item.item-3 { display: block; }
}

/* ==========================================================================
   Ritmo vertical entre secciones
   --------------------------------------------------------------------------
   El template deja 100px arriba y abajo de cada sección (75-84px en algunas).
   Con el contenido de Arcondec —bloques más cortos que los del demo— eso abre
   huecos que obligan a hacer scroll a ciegas entre una sección y la siguiente.
   Se recortan ~25% de forma pareja: se conserva la jerarquía relativa del
   template (las secciones que respiraban más siguen respirando más) y no se
   toca ningún padding lateral ni la rejilla.
   Los valores son fijos en el template, sin variantes por breakpoint, así que
   estas reglas aplican igual en escritorio y en móvil. */
.sub-2-area { padding-top: 56px; }
.sub-2-area .sub-box { padding-bottom: 38px; }
.about-2-area { padding-top: 34px; padding-bottom: 75px; }
.service-2-area { padding-top: 75px; padding-bottom: 75px; }
.article-2-area { padding-top: 75px; padding-bottom: 75px; }
.testimonial-3-area { padding-top: 60px; padding-bottom: 60px; }
/* Doblemente clasificado a propósito: pt-90/pb-90 son utilidades del template
   que se usan en más sitios, así que el recorte se limita a esta sección. */
.our-case-area { padding-top: 63px; }
.our-case-area.pt-90 { padding-top: 68px; }
.our-case-area.pb-90 { padding-bottom: 68px; }

/* --------------------------------------------------------------------------
   Bloque Dun & Bradstreet (inicio)
   --------------------------------------------------------------------------
   El h4 arrastraba el margen inferior por defecto de los encabezados y abría
   un hueco entre el título de la certificación y su descripción: se leían como
   dos ideas sueltas en vez de una sola. Van juntos.
   La barra vertical del template es de 100px fijos y centrada: al juntar las
   dos líneas sobresalía por arriba y por abajo del texto, así que pasa a
   medir lo que mida el bloque. Solo aplica al inicio — es la única página con
   un `.item` dentro de `.about-11-content`. */
.about-2-content.about-11-content .item .title { margin-bottom: 4px; }
.about-2-content.about-11-content .item p { margin-bottom: 0; }
.about-2-content.about-11-content .item::before { height: 100%; }

/* --------------------------------------------------------------------------
   Mapa de cobertura nacional (inicio)
   --------------------------------------------------------------------------
   El template declara `width: 100%` en .case-thumb > img pero no `height: auto`,
   y no hay una regla global para <img>. Con los atributos width/height puestos
   —que sí queremos, evitan el salto de maquetación al cargar— el navegador
   toma el height del atributo como altura real y estira el mapa. Esta línea
   devuelve la proporción. Es el mismo patrón que ya usa .about-2-thumb. */
.our-case-area .case-thumb > img { height: auto; }

/* ==========================================================================
   Carrusel de logos de clientes
   --------------------------------------------------------------------------
   Sustituye la rejilla de dos renglones por una sola fila que avanza de un
   logo a la vez. Los logos vienen en lienzos de proporción distinta, así que
   se limitan por alto —no por ancho— y se centran: es lo que los deja
   ópticamente parejos sin recortar ninguno.

   Antes de que slick monte, .arc-logos es una fila normal con desplazamiento
   horizontal manual. Si el JS fallara, la sección se queda usable en vez de
   apilar diez logos en una columna de mil pixeles de alto. */
.brand-3-area .arc-logos {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.brand-3-area .arc-logos::-webkit-scrollbar { display: none; }

/* Ya montado, slick maneja el ancho y el desbordamiento.

   direction: rtl es obligatorio, no cosmético: con rtl:true slick calcula el
   desplazamiento contando desde la derecha, y si la pista se maqueta de
   izquierda a derecha el resultado sale invertido —la tira se va +2574px fuera
   de cuadro y la sección se ve vacía—. El contenido de cada logo vuelve a ltr
   para que el texto alternativo y cualquier enlace se comporten normal. */
.brand-3-area .arc-logos.slick-initialized { display: block; overflow: visible; direction: rtl; }
.brand-3-area .arc-logos .slick-track { display: flex; align-items: center; }
.brand-3-area .arc-logos .slick-slide { height: auto; direction: ltr; }

.brand-3-area .arc-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.brand-3-area .arc-logo img {
    /* Todos los archivos comparten lienzo de 300x150 con el logo centrado y
       normalizado por área, así que basta un ancho único: el equilibrio óptico
       ya viene resuelto en la imagen y no hace falta afinar logo por logo. */
    width: 250px;
    height: auto;
}

@media (max-width: 767px) {
    .brand-3-area .arc-logo { padding: 0 8px; }
    .brand-3-area .arc-logo img { width: 168px; }
}

/* ==========================================================================
   Eslogan de marca + tira de obra
   --------------------------------------------------------------------------
   Sustituye al bloque de testimoniales. La tira sale del contenedor a
   propósito: al sangrar por la derecha se lee que hay más fotos fuera de
   cuadro, que es lo que invita a seguir bajando.

   El desplazamiento lo lleva el scroll (ver arcondec-motion.js), no un
   temporizador. Con `prefers-reduced-motion` ese JS no corre, así que la tira
   se quedaría fija y las fotos de la derecha quedarían inalcanzables: por eso
   ahí se cambia a desplazamiento manual. */
.arc-slogan {
    background: #1b1f2e;
    padding: 84px 0 90px;
    overflow: hidden;
}
.arc-slogan-text {
    margin: 0 0 46px;
    color: #fff;
    font-family: "space_grotesk";
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 52px);
    line-height: 1.22;
    letter-spacing: -0.02em;
    max-width: 20ch;
}
.arc-slogan-accent { color: #FFBB00; }

.arc-slogan-strip { overflow: hidden; }
.arc-slogan-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    width: max-content;
    padding-left: calc((100vw - 1140px) / 2);
    will-change: transform;
}
@media (max-width: 1199.98px) {
    .arc-slogan-track { padding-left: 24px; }
}
.arc-slogan-item {
    flex: 0 0 auto;
    margin: 0;
    width: clamp(290px, 34vw, 500px);
}
.arc-slogan-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .arc-slogan-strip {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .arc-slogan-strip::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Bloque «empresa 100% mexicana»: una sola foto
   --------------------------------------------------------------------------
   Antes eran dos imágenes encimadas. Se queda una y la caja «30+» se ancla a
   su esquina inferior derecha, sobre el piso libre de la foto, donde no tapa
   equipo. La caja va DENTRO de .thumb —no de .thumb-2, que ya no existe— así
   que las reglas del template dejan de alcanzarla y su aspecto se define aquí
   completo: degradado de marca, tamaño y tipografía.

   Escalar el contenedor y no la <img> mantiene foto y caja solidarias: si solo
   creciera la imagen, la caja quedaría flotando fuera de su borde mientras
   dura la animación. */
.arc-about-single .thumb {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 15px;
    will-change: transform;
}
.arc-about-single .thumb img {
    display: block;
    width: 100%;
    height: auto;
}
.arc-about-single .box {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 132px;
    height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(330deg, #F7931E 0%, #FFBB00 80%);
}
.arc-about-single .box .title {
    margin: 0;
    font-size: 38px;
    line-height: 1;
    font-weight: 500;
    color: #132D67;
}
.arc-about-single .box > span {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 500;
    color: #132D67;
    max-width: 92px;
}
@media (max-width: 575.98px) {
    .arc-about-single .box { right: 14px; bottom: 14px; width: 100px; height: 100px; }
    .arc-about-single .box .title { font-size: 28px; }
    .arc-about-single .box > span { font-size: 12px; max-width: 74px; }
}

/* Tarjetas de servicio: el template las deja en 5px, un redondeo tan corto que
   a este tamaño se lee casi como esquina viva. Se suben a 18px, en línea con
   las tarjetas de artículo (15px) y con la tira del eslogan (10px), para que
   todo el inicio comparta el mismo lenguaje de esquina. */
.service-2-item.service-11-item { border-radius: 18px; }

/* El mapa respeta el contenedor del sitio, como el resto de las secciones.
   Llegó a salirse a 1560px para ganar legibilidad en las etiquetas, pero la
   excepción rompía la alineación con todo lo demás y ni así resolvía el
   problema de fondo: en móvil las etiquetas quedan en 4px pase lo que pase.
   El recorte del lienzo del SVG (viewBox ajustado al contenido real) ya
   recuperó buena parte del tamaño perdido sin romper la caja. */
.our-case-area .arc-map {
    width: 100%;
    max-width: 100%;
}

/* El hero pasó de fotos a video. .arc-hero-media ya trae inset:0 y object-fit:
   cover del bloque original, pero <video> no hereda el ajuste automático de
   proporción que sí tenía <img>: sin esto se estira. El poster usa el mismo
   recorte para que el relevo entre imagen y video sea invisible. */
video.arc-hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #0d1428;
}

/* La franja de clientes sale del contenedor de 1140px. Con cinco logos a la
   vista, ese ancho dejaba 214px por celda y el logo topaba ahí por más que se
   subiera su tamaño. Ensanchando la franja cada celda pasa a ~292px y el logo
   cabe de verdad. Solo afecta a esta sección: el resto de la página conserva
   su contenedor. */
.brand-3-area > .container {
    max-width: min(calc(100vw - 40px), 1560px);
}

/* La página en curso se marca en amarillo de marca con un subrayado corto.
   El generador ya ponía la clase .active y el aria-current, pero nada lo hacía
   visible: la única señal de en qué página estabas era la URL.

   Va sobre el <a> y no sobre el <li> para que el subrayado mida lo que mide la
   palabra. Y el color no es la única señal —lleva también el trazo— porque
   distinguir solo por color deja fuera a quien no lo percibe. */
.header-nav .navbar-nav > .nav-item.active > .nav-link {
    color: #FFBB00;
    position: relative;
}
.header-nav .navbar-nav > .nav-item.active > .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: #FFBB00;
}

}

/* ==========================================================================
   Página Nosotros — maquetación editorial
   --------------------------------------------------------------------------
   La versión anterior metía cada bloque en una tarjeta y coronaba cada título
   con un círculo de icono. Son los dos recursos más repetidos en interfaces
   generadas automáticamente, y aquí no aportaban: los valores son cuatro
   palabras y las certificaciones cuatro nombres de norma. El peso lo llevan
   ahora la tipografía, el filete y el aire.

   El interletrado va por tamaño, no fijo: los cuerpos grandes necesitan
   tracking negativo —al crecer, las letras se leen demasiado separadas— y el
   texto pequeño lo necesita positivo. Un solo valor está mal en algún lado.
   ========================================================================== */

.arc-h2 {
    color: #000;
    margin-bottom: 22px;
}

/* --- 1 · Historia -------------------------------------------------------
   El "1991" de fondo es puramente tipográfico (no hay foto de más), y el
   marco offset detrás de la imagen es un rectángulo con borde, no una
   segunda foto: ambos recursos suman peso editorial sin salirse de la
   restricción de "nada de fotos de proyecto en esta sección". Las cifras
   que antes vivían en la caja flotante ("30+ Años") ahora son dos chips
   junto a la foto, y se les suma "3 áreas clave" —dato que ya está en el
   primer párrafo, no es contenido nuevo. */
.arc-about-story { padding: 86px 0 78px; }
.arc-story-copy { position: relative; }
.arc-story-copy > * { position: relative; z-index: 1; }
.arc-story-year {
    position: absolute;
    top: -30px;
    left: -4px;
    z-index: 0;
    font-family: "space_grotesk";
    font-size: 132px;
    font-weight: 700;
    line-height: 1;
    color: #EEF2F8;
    pointer-events: none;
    user-select: none;
}
.arc-story-copy p {
    font-size: 17px;
    line-height: 28px;
    color: #33415C;
    margin-bottom: 16px;
}
.arc-story-frame img {
    display: block;
    width: 100%;
    /* Los originales son verticales 3:4 y a todo el ancho de media columna se
       iban a 760px de alto: la foto dominaba el bloque y el texto de al lado
       quedaba flotando en el centro. Recortadas a cuadrado bajan a ~570 y las
       dos mitades pesan parejo. `height:auto` es obligatorio para que
       aspect-ratio mande: con el alto del atributo puesto, el navegador lo
       ignora (mismo caso que la destacada de las páginas de proyecto). */
    height: auto;
    /* 5:4. Más alta que 4:3, que se veía achatada, pero sin llegar al cuadrado:
       en cuadrado el recorte se comía a dos personas de cada lado de la foto
       del equipo, que es justo lo que esa imagen viene a mostrar. */
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}
@media (max-width: 767px) {
    .arc-story-year { font-size: 84px; top: -18px; }
}

/* --- 2, 2b, 5 y 6 · Propósito/Meta/Visión, Valores, Qué nos distingue,
   Certificaciones ----------------------------------------------------------
   Las cuatro dejaron su tratamiento propio (banda oscura de manifiesto /
   monograma / cita editorial / insignia con sello) por el mismo lenguaje de
   tarjeta que usan las páginas de Servicios (.service-2-item dentro de
   .arc-service-grid, dentro de .section-title-9): así Nosotros se lee como
   parte de la misma familia visual del sitio, no como una página aparte.
   Solo la letra del acróstico de Valores necesita una regla propia: vive en
   el mismo círculo que llevaría un ícono fa, pero es texto, no un glifo, así
   que no hereda su tamaño. */
.service-2-item .icon .arc-mv-letter {
    font-family: "space_grotesk";
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: #1D4598;
}
@media (max-width: 767px) {
    .arc-about-story { padding: 58px 0 52px; }
}

/* ==========================================================================
   NOSOTROS · las seis secciones
   --------------------------------------------------------------------------
   Historia · Qué nos distingue · Propósito · Visión · Valores · BHAG ·
   Certificaciones.

   El ritmo de fondos es lo que separa las secciones sin necesidad de líneas
   divisorias: blanco (historia) → azul profundo (propósito) → blanco (visión)
   → gris suave (valores) → azul profundo (BHAG) → blanco (certificaciones).
   Las dos bandas oscuras caen en las dos declaraciones —el propósito y la
   meta—, que son las frases que deben pesar más al hojear la página.

   Las animaciones no necesitan JS nuevo: el motor de arcondec-motion.js toma
   cada `.row` como unidad y escalona sus columnas, y parte en líneas cualquier
   `h2.title` grande. Por eso todo aquí se arma con `.row` + `.col-*` y los
   titulares conservan la clase `.title`.
   ========================================================================== */

/* --- Qué nos distingue: remate de la historia, no sección aparte ----------
   Espeja a Historia: allá el texto va a la izquierda y la foto a la derecha,
   aquí al revés. El zigzag mantiene las dos mitades del relato conectadas y
   evita que la segunda se lea como una sección nueva. Reutiliza .arc-story-copy
   y .arc-story-frame para que el cuerpo de texto y el marco de la foto sean
   exactamente los mismos, sin una variante paralela que mantener. */
.arc-distinct-copy h2 { margin-bottom: 22px; }
.arc-distinct-copy p:last-of-type { margin-bottom: 24px; }
.arc-distinct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Azul de marca en sólido, no el tinte claro de antes: sobre fondo blanco
   aquel apenas se despegaba y las tres palabras —que son el remate del
   bloque— se perdían. Van en sólido y a mayor tamaño para que se lean como
   el cierre de la idea. No son enlaces y no lo parecen: los botones del sitio
   son amarillos o de contorno, nunca pastillas azules llenas. */
.arc-distinct-chips li {
    background: #1D4598;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 13px 28px;
    border-radius: 999px;
}
@media (max-width: 575px) {
    .arc-distinct-chips { gap: 10px; }
    .arc-distinct-chips li {
        font-size: 15px;
        padding: 11px 22px;
    }
}

/* --- Aire entre las dos columnas de Historia y Qué nos distingue ----------
   El canal por defecto de la rejilla (30px) deja la foto casi pegada al texto
   y las dos mitades se leen como un solo bloque. El relleno va en la cara
   interior de cada columna, no en la fila, para que el ancho útil del bloque
   no se encoja por los lados. Solo en estas dos secciones de Nosotros. */
@media (min-width: 992px) {
    .arc-about-story .row > div:first-child,
    .arc-distinct-area .row > div:first-child { padding-right: 40px; }
    .arc-about-story .row > div:last-child,
    .arc-distinct-area .row > div:last-child { padding-left: 40px; }
}

/* --- Bandas de manifiesto: propósito y BHAG ------------------------------- */
.arc-manifest {
    background: #132D67;
    color: #fff;
    position: relative;
    overflow: hidden;
}
/* Un halo muy tenue detrás del texto para que la banda no sea un rectángulo
   plano. Va con `pointer-events:none` porque es pura decoración. */
.arc-manifest::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(31, 67, 155, .55) 0%, rgba(19, 45, 103, 0) 62%);
    pointer-events: none;
}
.arc-manifest .container { position: relative; }
.arc-manifest-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #FFBB00;
    margin-bottom: 18px;
}
.arc-manifest-title {
    color: #fff;
    font-size: 44px;
    line-height: 1.22;
    margin: 0;
}
/* En Propósito se invierte la jerarquía respecto a las demás bandas: la
   palabra "Propósito" toma el tratamiento de título —grande, en redonda, sin
   versalitas— y la declaración baja de tamaño. Así la sección se identifica de
   un vistazo al hojear y la frase se lee como su contenido, no como el rótulo.
   El <h2> sigue siendo la declaración, que es lo correcto para la estructura
   del documento; lo que cambia es solo el peso visual. */
.arc-manifest-purpose .arc-manifest-eyebrow {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 14px;
}
.arc-manifest-purpose .arc-manifest-title { font-size: 34px; }

/* --- BHAG: la cifra sale del enunciado ----------------------------------- */
/* El rótulo va más grande que el de una banda cualquiera, pero sigue siendo
   rótulo y no título como en Propósito: aquí la cifra de 500 MW ya es el
   elemento grande, y dos piezas peleando por la atención se anulan. */
.arc-manifest-bhag .arc-manifest-eyebrow {
    font-size: 18px;
    letter-spacing: .12em;
    margin-bottom: 20px;
}
.arc-bhag-title { font-size: 38px; }
.arc-bhag-figure {
    border-left: 3px solid #FFBB00;
    padding-left: 26px;
}
.arc-bhag-number {
    display: block;
    font-family: "space_grotesk";
    font-size: 76px;
    font-weight: 700;
    line-height: 1;
    color: #FFBB00;
}
.arc-bhag-label {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .75);
}

/* --- Visión: centrada, rótulo arriba y párrafo debajo --------------------- */
.arc-vision-title {
    color: #132D67;
    font-size: 40px;
    line-height: 1.2;
    margin: 0 0 22px;
}
/* El ancho máximo corta la línea antes de que se vuelva incómoda de seguir:
   un párrafo de este largo a todo lo ancho del contenedor obliga a saltos de
   vista muy largos y se lee peor, aunque quepa. */
.arc-vision-block p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.7;
    color: #33415C;
}

/* --- Valores: el acróstico se lee en vertical ----------------------------- */
/* Rejilla propia de cinco columnas: Bootstrap no tiene un ancho de 1/5, y con
   tres o cuatro por renglón el acróstico se partiría (IDE / AS). La fila sigue
   siendo un `.row` para que el motor de movimiento la reconozca y escalone las
   cinco tarjetas; solo se le cambia el modo de reparto. */
.arc-values-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 30px;
}
.arc-value {
    /* Cuadradas: la caja fija hace que las cinco iniciales queden a la misma
       altura y se lean como una sola línea de izquierda a derecha. */
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 18px;
    padding: 24px 22px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.arc-value:hover {
    border-color: #C7D2E5;
    box-shadow: 0 14px 32px rgba(19, 45, 103, .09);
    transform: translateY(-2px);
}
/* La inicial en su propia caja, arriba y a la izquierda de cada tarjeta: las
   cinco caen alineadas y forman la palabra al recorrer la fila. */
.arc-value-letter {
    flex: none;
    align-self: flex-start;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1D4598;
    color: #fff;
    border-radius: 16px;
    font-family: "space_grotesk";
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
}
.arc-value-text {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.4;
    color: #132D67;
    font-weight: 500;
}

@media (max-width: 991px) {
    .arc-manifest-purpose .arc-manifest-eyebrow { font-size: 32px; }
    .arc-manifest-purpose .arc-manifest-title { font-size: 27px; }
    .arc-manifest-title { font-size: 34px; }
    .arc-bhag-title { font-size: 30px; }
    /* La cifra pasa debajo del enunciado: sin la columna al lado, el borde
       izquierdo dejaría de alinear con nada. */
    .arc-bhag-figure { margin-top: 34px; }
    .arc-vision-title { font-size: 32px; }
    /* Bajo 992px las cinco no caben legibles: pasan a tres y luego a dos. El
       acróstico se parte, pero el sello con la palabra bajo el título sigue
       diciendo cuál es. */
    .arc-values-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .arc-value { aspect-ratio: auto; min-height: 190px; }
}
@media (max-width: 767px) {
    .arc-manifest-purpose .arc-manifest-eyebrow { font-size: 27px; }
    .arc-manifest-purpose .arc-manifest-title { font-size: 22px; }
    .arc-manifest-title { font-size: 28px; }
    .arc-bhag-number { font-size: 58px; }
    .arc-values-list { grid-template-columns: repeat(2, 1fr); }
    .arc-value {
        min-height: 170px;
        padding: 18px 18px;
    }
    .arc-value-letter {
        width: 72px;
        height: 72px;
        font-size: 40px;
    }
    .arc-value-text {
        margin-top: 12px;
        font-size: 15px;
    }
}
@media (max-width: 419px) {
    .arc-values-list { grid-template-columns: 1fr; }
    .arc-value { min-height: 0; }
}

/* ==========================================================================
   MAPA DE PRESENCIA NACIONAL (inicio)
   --------------------------------------------------------------------------
   Sustituye al JPG que había antes. Al ser SVG en línea + HTML, los colores
   salen de esta hoja —así el mapa sigue la marca sin reexportar nada—, el
   texto se traduce y se puede resaltar cada estado.

   El mapa va arriba a todo lo ancho y las tarjetas debajo en rejilla. La
   primera versión las puso en dos columnas laterales y el mapa quedaba en
   630px: más de la mitad del ancho se iba en texto para un bloque cuyo
   protagonista es el mapa. Abajo caben igual, con tipografía menor.
   ========================================================================== */
.arc-mapa { margin-top: 34px; }

/* El mapa se sale del contenedor en pantallas anchas: es la pieza que debe
   pesar y el contenedor de 1140px le queda corto. */
.arc-mapa-lienzo {
    max-width: 1080px;
    margin: 0 auto;
}
@media (min-width: 1400px) {
    .arc-mapa-lienzo { max-width: 1240px; }
}
.arc-mapa-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* --- Estados -------------------------------------------------------------
   Ninguno queda en gris: el mapa habla de cobertura nacional y medio país
   apagado decía lo contrario. Los que tienen obra van en el azul de marca;
   el resto, en un azul claro que los mantiene dentro del mismo lenguaje. */
.arc-mapa-estado {
    /* Para que el giro y la escala de la entrada ocurran alrededor del centro
       de cada estado y no del origen del SVG, que los mandaría a la esquina. */
    transform-box: fill-box;
    transform-origin: center center;
    fill: #AFC3E4;
    stroke: #fff;
    stroke-width: 0.9;
    transition: fill .25s ease;
}
.arc-mapa-estado.is-fuerte { fill: #1D4598; }
.arc-mapa-estado.is-marcado { fill: #FFBB00; }
.arc-mapa-punto {
    /* Para que el punto crezca desde su propio centro y no desde el origen del
       SVG, que lo mandaría volando a la esquina. */
    transform-box: fill-box;
    transform-origin: center;
    fill: #fff;
    stroke: #132D67;
    stroke-width: 2.2;
    transition: r .25s ease;
}
.arc-mapa-punto.is-marcado { r: 8; fill: #FFBB00; }

/* --- Rejilla de tarjetas -------------------------------------------------- */
/* Columnas y no rejilla: con `grid` cada fila mide lo que la tarjeta más alta
   de esa fila —Nuevo León tiene nueve renglones— y las vecinas quedaban con un
   hueco blanco debajo esperando a la siguiente fila. En multicolumna las
   tarjetas fluyen y rellenan el espacio, sin huecos. */
.arc-mapa-rejilla {
    column-count: 4;
    column-gap: 16px;
    margin-top: 38px;
}
.arc-mapa-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 16px;
}
.arc-mapa-card {
    background: #fff;
    border: 1px solid #E7EBF3;
    border-radius: 12px;
    padding: 17px 18px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.arc-mapa-card.is-marcado {
    border-color: #1D4598;
    box-shadow: 0 12px 28px rgba(19, 45, 103, .12);
    transform: translateY(-2px);
}
.arc-mapa-estado-nombre {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #1D4598;
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #EEF2FA;
}
.arc-mapa-lista { list-style: none; margin: 0; padding: 0; }
.arc-mapa-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.4;
    color: #33415C;
}
.arc-mapa-item strong { font-weight: 600; color: #132D67; }
.arc-mapa-texto { display: block; }
.arc-mapa-sub {
    display: block;
    font-size: 13.5px;
    color: #8A94A8;
    margin-top: 1px;
}

/* --- Marca de categoría --------------------------------------------------
   Un cuadro de color por tipo de proyecto en lugar de un icono: son cinco
   categorías repetidas 34 veces y con iconos el bloque se volvía ruido. */
.arc-mapa-marca {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-top: 5px;
    background: #1D4598;
}
.is-datos   .arc-mapa-marca { background: #1D4598; }
.is-telecom .arc-mapa-marca { background: #4A7BD8; }
.is-energia .arc-mapa-marca { background: #16A085; }
.is-hvac    .arc-mapa-marca { background: #3FA9C9; }
.is-mt      .arc-mapa-marca { background: #FFBB00; }
/* La sede es la única redonda: es un lugar, no un tipo de trabajo, y así se
   distingue del resto sin depender del color. */
.is-sede    .arc-mapa-marca {
    background: #132D67;
    border-radius: 50%;
    box-shadow: 0 0 0 2.5px rgba(19, 45, 103, .15);
}

/* --- Leyenda ------------------------------------------------------------- */
.arc-mapa-leyenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    list-style: none;
    margin: 30px 0 0;
    padding: 18px 20px;
    background: #F6F8FC;
    border-radius: 12px;
}
.arc-mapa-leyenda-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #132D67;
}
.arc-mapa-leyenda-item .arc-mapa-marca { margin-top: 0; }

@media (max-width: 1199px) {
    .arc-mapa-rejilla { column-count: 3; }
}
@media (max-width: 767px) {
    .arc-mapa-rejilla { column-count: 2; column-gap: 12px; }
    .arc-mapa-card { margin-bottom: 12px; }
}
@media (max-width: 479px) {
    .arc-mapa-rejilla { column-count: 1; }
    .arc-mapa-leyenda { gap: 9px 16px; padding: 16px 14px; }
}

/* "Servicios" en el menú abre el desplegable pero no navega: es un <a> sin
   href, así que el navegador no lo trata como enlace y hay que devolverle el
   cursor y el estado de foco a mano. Va con role="button" y tabindex para que
   siga siendo alcanzable con teclado, y con aria-haspopup para que un lector
   de pantalla anuncie que abre un menú en vez de prometer un destino. */
.header-nav .navigation .navbar .navbar-nav .nav-item > a.arc-nav-solo-menu {
    cursor: pointer;
    user-select: none;
}


/* ==========================================================================
   Aire entre el texto y la foto del bloque de introducción
   --------------------------------------------------------------------------
   Lo usan las seis páginas de servicio en los dos idiomas, más Inicio y
   Vacantes: dieciséis páginas con el mismo problema. El canal por defecto de
   la rejilla son 30px, y con la foto pegada al último renglón de cada línea
   el texto se lee apretado contra la imagen.

   El relleno va en la cara interior de cada columna y no en la fila, para que
   el bloque conserve el ancho del contenedor y no se encoja por los lados.
   Funciona igual con la foto a izquierda o a derecha, porque solo ensancha el
   canal; no depende de cuál columna lleve el texto.
   ========================================================================== */
@media (min-width: 992px) {
    .about-2-area .row > div:first-child { padding-right: 40px; }
    .about-2-area .row > div:last-child { padding-left: 40px; }
}


/* ==========================================================================
   Etapas de una página de servicio · banda oscura
   --------------------------------------------------------------------------
   La sección entera va sobre el azul profundo de marca, de borde a borde. Es
   el mismo tratamiento que Propósito y BHAG en Nosotros, y cumple dos cosas a
   la vez: rompe la sucesión de secciones blancas de la página de servicio, y
   convierte el listado de alcances en el bloque que más pesa de la página, que
   es lo que corresponde a su contenido.

   Los numerales van en amarillo y a gran tamaño: sobre fondo oscuro el color
   de marca rinde mucho más que sobre blanco, y son lo que ordena la lectura.

   Es una <ol> porque la secuencia es parte del contenido. El numeral visible
   va aria-hidden: el orden ya lo aporta la lista.
   ========================================================================== */
.arc-etapas-area {
    position: relative;
    background: #132D67;
    overflow: hidden;
}
/* Halo tenue para que la banda no sea un rectángulo plano. Decoración pura. */
.arc-etapas-area::before {
    content: "";
    position: absolute;
    top: -45%;
    left: 50%;
    width: 1100px;
    height: 1100px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(29, 69, 152, .5) 0%, rgba(19, 45, 103, 0) 63%);
    pointer-events: none;
}
.arc-etapas-area .container { position: relative; }
.arc-etapas-area .section-title-9 .title { color: #fff; }

.arc-etapas {
    list-style: none;
    margin: 46px 0 0;
    padding: 0;
}
.arc-etapa {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 40px;
    align-items: start;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    transition: border-color .35s ease;
}
.arc-etapa:first-child { border-top: 0; padding-top: 6px; }
.arc-etapa:last-child { padding-bottom: 6px; }
.arc-etapa:hover { border-color: rgba(255, 187, 0, .5); }

.arc-etapa-num {
    font-family: "space_grotesk";
    font-size: 88px;
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-align: right;
    color: #FFBB00;
    /* Arranca en contorno y se rellena al pasar el mouse: el número está
       siempre presente pero no compite con el título hasta que se le señala. */
    -webkit-text-stroke: 1.5px #FFBB00;
    color: transparent;
    transition: color .35s ease;
}
.arc-etapa:hover .arc-etapa-num { color: #FFBB00; }

.arc-etapa-cuerpo { padding-top: 8px; }
.arc-etapa-titulo {
    font-size: 26px;
    line-height: 1.24;
    color: #fff;
    margin: 0 0 14px;
}
.arc-etapa-texto {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .78);
    max-width: 68ch;
}

@media (max-width: 991px) {
    .arc-etapa {
        grid-template-columns: 96px 1fr;
        gap: 26px;
        padding: 32px 0;
    }
    .arc-etapa-num { font-size: 60px; -webkit-text-stroke-width: 1.2px; }
    .arc-etapa-titulo { font-size: 22px; }
}
/* En celular el numeral deja de ser columna y pasa arriba del título: a este
   ancho, dos columnas dejaban el texto en treinta caracteres por línea.
   También se rellena de una vez, porque sin mouse no hay forma de encenderlo. */
@media (max-width: 575px) {
    .arc-etapas { margin-top: 34px; }
    .arc-etapa {
        display: block;
        padding: 26px 0;
    }
    .arc-etapa-num {
        display: block;
        text-align: left;
        font-size: 44px;
        color: #FFBB00;
        -webkit-text-stroke: 0;
        margin-bottom: 8px;
    }
    .arc-etapa-cuerpo { padding-top: 0; }
    .arc-etapa-titulo { font-size: 20px; }
    .arc-etapa-texto { font-size: 15.5px; }
}
/* Obra civil · composición editorial y especialidades desplegables. */
.arc-civil { background: #132d67; color: #fff; padding: 96px 0 104px; }
.arc-civil-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.arc-civil-eyebrow { display: block; color: #ffbb00; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.arc-civil-header h2 { color: #fff; font-size: clamp(36px, 4vw, 54px); line-height: 1.08; letter-spacing: -.035em; margin: 0; }
.arc-civil-header > p { color: #d0d8e8; max-width: 270px; font-size: 16px; line-height: 1.65; margin: 0 0 3px; }
.arc-civil-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: stretch; }
.arc-civil-visual { position: relative; min-height: 550px; overflow: hidden; border-radius: 20px; background: #0d214d; }
.arc-civil-photo { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.arc-civil-photo:first-child { opacity: 1; visibility: visible; }
.arc-civil-photo img { width: 100%; height: 100%; object-fit: cover; }
.arc-civil-photo::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(5, 17, 40, .9)); pointer-events: none; }
.arc-civil-photo figcaption { position: absolute; bottom: 28px; left: 28px; right: 28px; z-index: 1; color: #fff; font-size: 15px; font-weight: 500; }
.arc-civil-photo figcaption span { display: block; color: #ffbb00; font-size: 11px; letter-spacing: .16em; margin-bottom: 10px; }
.arc-civil-layout:has(details[open]) .arc-civil-photo { opacity: 0; visibility: hidden; }
.arc-civil-layout:has(#civil-stage-1[open]) .arc-civil-photo-1,
.arc-civil-layout:has(#civil-stage-2[open]) .arc-civil-photo-2,
.arc-civil-layout:has(#civil-stage-3[open]) .arc-civil-photo-3,
.arc-civil-layout:has(#civil-stage-4[open]) .arc-civil-photo-4,
.arc-civil-layout:has(#civil-stage-5[open]) .arc-civil-photo-5 { opacity: 1; visibility: visible; }
.arc-civil-detail { border-bottom: 1px solid #425782; }
.arc-civil-detail:first-child { border-top: 1px solid #425782; }
.arc-civil-detail summary { list-style: none; display: grid; grid-template-columns: 26px 1fr 24px; gap: 16px; align-items: center; padding: 25px 0; cursor: pointer; }
.arc-civil-detail summary::-webkit-details-marker { display: none; }
.arc-civil-detail summary:focus-visible { outline: 2px solid #ffbb00; outline-offset: 6px; }
.arc-civil-number { color: #d0d8e8; font-size: 12px; letter-spacing: .04em; }
.arc-civil-detail h3 { color: #fff; font-size: 23px; line-height: 1.3; margin: 0; font-weight: 500; }
.arc-civil-toggle { position: relative; width: 24px; height: 24px; }
.arc-civil-toggle::before, .arc-civil-toggle::after { content: ''; position: absolute; background: currentColor; top: 11px; left: 5px; width: 14px; height: 1px; }
.arc-civil-toggle::after { transform: rotate(90deg); transition: transform .2s; }
.arc-civil-detail[open] .arc-civil-toggle::after { transform: rotate(0); }
.arc-civil-detail[open] .arc-civil-number, .arc-civil-detail[open] .arc-civil-toggle, .arc-civil-detail summary:hover .arc-civil-toggle { color: #ffbb00; }
.arc-civil-detail[open] { border-bottom-color: #ffbb00; }
.arc-civil-description { padding: 0 32px 28px 42px; }
.arc-civil-description p { color: #d0d8e8; font-size: 17px; line-height: 1.8; margin: 0; }
@media (max-width: 1199px) { .arc-civil-layout { gap: 36px; } .arc-civil-detail h3 { font-size: 23px; } }
@media (max-width: 991px) {
    .arc-civil { padding: 64px 0; }
    .arc-civil-header { align-items: start; flex-direction: column; gap: 20px; margin-bottom: 32px; }
    .arc-civil-header > p { max-width: 100%; }
    .arc-civil-layout { grid-template-columns: 1fr; gap: 30px; }
    .arc-civil-visual { min-height: 0; height: 360px; }
    .arc-civil-description { padding-right: 24px; }
}
@media (max-width: 575px) {
    .arc-civil-visual { height: 280px; }
    .arc-civil-detail summary { gap: 10px; padding: 22px 0; grid-template-columns: 24px 1fr 24px; }
    .arc-civil-detail h3 { font-size: 21px; }
    .arc-civil-description { padding-left: 34px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .arc-civil-photo, .arc-civil-toggle::after { transition: none; } }

/* Valores: composición editorial sobre blanco cálido. */
.arc-values-editorial { background: #faf9f6; padding: 96px 0; color: #132d67; }
.arc-values-composition { display: grid; grid-template-columns: .85fr 1.25fr; gap: 80px; }
.arc-values-heading { display: flex; flex-direction: column; align-items: flex-start; }
.arc-values-eyebrow { display: flex; align-items: center; gap: 20px; color: #132d67; font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 30px; }
.arc-values-eyebrow::after { content: ""; width: 56px; height: 3px; background: #ffbb00; }
.arc-values-heading h2 { color: #132d67; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -.035em; margin: 0; }
.arc-values-signature { font-size: clamp(80px, 9vw, 132px); font-weight: 700; line-height: 1; letter-spacing: -.055em; color: #e9e8e5; margin-top: auto; padding-top: 60px; }
.arc-principles { list-style: none; padding: 0; margin: 0; }
.arc-principle { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 28px; padding: 28px 0; border-bottom: 1px solid #dededb; }
.arc-principle:first-child { padding-top: 0; }
.arc-principle:last-child { border-bottom: 0; padding-bottom: 0; }
.arc-principle > span { position: relative; color: #132d67; font-size: 54px; line-height: 1; font-weight: 700; }
.arc-principle > span::after { content: ""; position: absolute; width: 2px; height: 36px; right: 0; top: 50%; transform: translateY(-50%); background: #ffbb00; }
.arc-principle p { color: #132d67; font-size: 23px; line-height: 1.45; margin: 0; }
@media (max-width: 991px) {
 .arc-values-composition { grid-template-columns: 1fr; gap: 44px; }
 .arc-values-heading { position: relative; padding-right: 150px; }
 .arc-values-signature { position: absolute; right: 0; bottom: 0; font-size: 65px; padding: 0; }
}
@media (max-width: 575px) {
 .arc-values-editorial { padding: 64px 0; }
 .arc-values-heading { padding-right: 0; }
 .arc-values-signature { display: none; }
 .arc-values-heading h2 { font-size: 36px; }
 .arc-values-eyebrow { font-size: 12px; gap: 14px; margin-bottom: 24px; }
 .arc-principle { grid-template-columns: 48px 1fr; gap: 20px; padding: 24px 0; }
 .arc-principle > span { font-size: 40px; }
 .arc-principle > span::after { height: 28px; }
 .arc-principle p { font-size: 20px; }
}

/* Historia y equipo: fotografía real y composición editorial. */
.arc-story-premium { padding: 88px 0 72px; background: #fff; }
.arc-editorial-label { color: #132d67; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; margin-bottom: 24px; }
.arc-editorial-label::before { content: ""; display: inline-block; vertical-align: middle; width: 32px; height: 3px; background: #ffbb00; margin-right: 16px; }
.arc-story-intro h2 { color: #132d67; font-size: clamp(36px,4.4vw,62px); line-height: 1.08; letter-spacing: -.04em; margin: 0; }
.arc-story-summary { color: #132d67; font-size: 19px; line-height: 1.5; margin: 24px 0 0; }
.arc-story-premium .arc-story-panorama { position: relative; margin: 36px 0; border-radius: 20px; overflow: hidden; aspect-ratio: 2.45; }
.arc-story-premium .arc-story-panorama img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.arc-origin { position: absolute; left: 24px; bottom: 24px; padding: 16px 24px; background: #faf9f6; border-radius: 8px; color: #132d67; }
.arc-origin strong { display: block; font-size: 44px; line-height: 1.1; }
.arc-origin span { font-size: 14px; }
.arc-history-editorial h3 { color: #132d67; font-size: 30px; }
.arc-history-columns { columns: 2; column-gap: 36px; }
.arc-history-columns p { color: #344567; font-size: 16px; line-height: 1.75; break-inside: avoid; margin: 0 0 20px; }
.arc-team-premium { background: #faf9f6; padding: 76px 0; }
.arc-team-premium .arc-team-photo { border-radius: 20px; overflow: hidden; }
.arc-team-premium .arc-team-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.arc-team-copy { padding-left: 30px; }
.arc-team-copy h2 { color: #132d67; font-size: 42px; line-height: 1.15; letter-spacing: -.03em; margin-bottom: 24px; }
.arc-team-copy > p:not(.arc-editorial-label) { font-size: 17px; line-height: 1.7; color: #344567; }
.arc-team-principles { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: team; }
.arc-team-principles li { counter-increment: team; border-top: 1px solid #d9dde3; padding: 17px 0; color: #132d67; font-size: 22px; font-weight: 700; }
.arc-team-principles li::before { content: counter(team, decimal-leading-zero); color: #9b6b00; margin-right: 24px; font-size: 17px; }
@media(max-width:991px) {
 .arc-team-copy { padding: 36px 0 0; }
 .arc-story-premium .arc-story-panorama { aspect-ratio: 1.7; }
 .arc-history-editorial h3 { margin-bottom: 24px; }
}
@media(max-width:575px) {
 .arc-story-premium,.arc-team-premium { padding: 56px 0; }
 .arc-story-intro h2,.arc-team-copy h2 { font-size: 36px; }
 .arc-history-columns { columns: 1; }
 .arc-origin { left: 12px; bottom: 12px; padding: 10px 14px; }
 .arc-origin strong { font-size: 30px; }
 .arc-origin span { font-size: 11px; }
 .arc-editorial-label { font-size: 10px; letter-spacing: .1em; }
}

/* Historia y equipo: misma escala y colores del bloque Nosotros de inicio. */
.arc-story-intro h2,
.arc-team-copy h2 {
    font-family: "space_grotesk";
    font-size: 54px;
    line-height: 62px;
    font-weight: 700;
    letter-spacing: normal;
    color: #000;
}
.arc-story-summary,
.arc-history-columns p,
.arc-team-copy > p:not(.arc-editorial-label) {
    font-family: "space_grotesk";
    font-size: 17px;
    line-height: 28px;
    font-weight: 400;
    color: #33415c;
}
.arc-history-editorial h3,
.arc-team-principles li { color: #000; font-size: 24px; font-weight: 700; }
@media (max-width: 767px) {
    .arc-story-intro h2,
    .arc-team-copy h2 { font-size: 32px; line-height: 46px; }
}
@media (min-width: 576px) and (max-width: 767px) {
    .arc-story-intro h2,
    .arc-team-copy h2 { line-height: 42px; }
}

/* Historia: lectura continua bajo la fotografía. */
.arc-history-reading { max-width: 820px; margin: 0 auto; padding-top: 12px; }
.arc-history-reading h3 { margin-bottom: 24px; font-size: 30px; }
.arc-history-reading .arc-history-columns { columns: 1; }
.arc-history-reading .arc-history-columns p { margin-bottom: 20px; }
.arc-history-reading .arc-history-columns p:last-child { margin-bottom: 0; }

/* La foto del equipo acompaña toda la altura del texto en escritorio. */
@media (min-width: 992px) {
    .arc-team-premium .row { align-items: stretch !important; }
    .arc-team-premium .row > .col-lg-6:first-child { display: flex; }
    .arc-team-premium .arc-team-photo { position: relative; width: 100%; min-height: 550px; }
    .arc-team-premium .arc-team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* Traits animés des valeurs, sans déplacement de la mise en page. */
.arc-values-editorial { overflow: hidden; }
.arc-principle { position: relative; border-bottom: 0; }
.arc-principle:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #dededb; transform: scaleX(var(--arc-rule-scale, 1)); transform-origin: left; }

/* Portafolio: proyectos con igual jerarquía y fotografía protagonista. */
.arc-portfolio-editorial { background: #fff; }
.arc-portfolio-heading { margin-bottom: 26px; }
.arc-portfolio-heading h2 { color: #000; font-size: 54px; line-height: 62px; font-weight: 700; }
.arc-portfolio-intro { color: #33415c; font-size: 17px; line-height: 28px; margin-bottom: 20px; }
.arc-portfolio-editorial .arc-project { display: block; border: 0; border-radius: 0; box-shadow: none; background: transparent; margin-bottom: 26px; height: calc(100% - 56px); }
.arc-portfolio-editorial .arc-project:hover { transform: none; box-shadow: none; }
.arc-portfolio-editorial .arc-project-thumb { border-radius: 16px; aspect-ratio: 1.65; }
.arc-portfolio-editorial .arc-project-thumb img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.arc-portfolio-editorial .arc-project-caption { position: relative; padding: 20px 0 0; }
.arc-portfolio-editorial .arc-project-caption .title { font-family: "space_grotesk"; font-size: 26px; line-height: 1.25; color: #000; margin-bottom: 6px; }
.arc-portfolio-editorial .arc-project-caption span { font-size: 17px; line-height: 28px; color: #33415c; }
.arc-portfolio-editorial .is-link .arc-project-caption { padding-right: 58px; }
.arc-portfolio-editorial .is-link .arc-project-caption::after { content: "↗"; position: absolute; right: 0; top: 20px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #132d67; border-radius: 50%; color: #132d67; font-size: 25px; transition: background .2s; }
.arc-portfolio-editorial .is-link:hover .arc-project-caption::after { background: #ffbb00; }
.arc-portfolio-editorial .arc-project:focus-visible { outline: 2px solid #132d67; outline-offset: 6px; }
@media(max-width:767px) {
 .arc-portfolio-heading h2 { font-size: 32px; line-height: 42px; }
 .arc-portfolio-editorial .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
 .arc-portfolio-editorial .arc-project-caption .title { font-size: 24px; }
}

/* Introducciones de servicios: cabecera, panorama y lectura continua. */
.arc-service-editorial { padding: 88px 0 80px; background: #fff; }
.arc-service-editorial-heading h2 { font-family: "space_grotesk"; color: #000; font-size: 54px; line-height: 62px; font-weight: 700; margin: 0; }
.arc-service-editorial-summary { border-left: 1px solid #dededb; padding-left: 28px; color: #33415c; font-size: 17px; line-height: 28px; margin: 24px 0 0; }
.arc-service-editorial .arc-service-panorama { border-radius: 20px; overflow: hidden; aspect-ratio: 2.45; margin: 38px 0; }
.arc-service-editorial .arc-service-panorama img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.arc-service-reading { max-width: 820px; margin: 0 auto; }
.arc-service-reading p { color: #33415c; font-size: 17px; line-height: 28px; margin: 0 0 22px; }
.arc-service-reading .main-btn { background: #ffbb00; border-color: #ffbb00; color: #132d67; }
.arc-service-reading .main-btn:hover { background: #e5a800; border-color: #e5a800; }
@media(max-width:991px) {
 .arc-service-editorial-summary { padding-left: 0; border-left: 0; }
 .arc-service-editorial .arc-service-panorama { aspect-ratio: 1.7; }
}
@media(max-width:767px) {
 .arc-service-editorial { padding: 56px 0; }
 .arc-service-editorial-heading h2 { font-size: 32px; line-height: 42px; }
 .arc-service-editorial .arc-service-panorama { margin: 28px 0; border-radius: 16px; }
}

/* Blog: galería editorial coherente con Proyectos. */
.arc-blog-editorial { background: #fff; }
.arc-blog-heading { margin-bottom: 26px; }
.arc-blog-heading h2 { color: #000; font-size: 54px; line-height: 62px; font-weight: 700; }
.arc-blog-heading p:not(.arc-editorial-label) { font-size: 17px; line-height: 28px; color: #33415c; }
.arc-blog-editorial .article-2-item.article-11-item { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; margin-bottom: 38px; height: calc(100% - 68px); }
.arc-blog-editorial .article-2-item.article-11-item:hover { transform: none; box-shadow: none; }
.arc-blog-editorial .article-thumb { border-radius: 16px; overflow: hidden; background: #faf9f6; }
.arc-blog-editorial .article-thumb img { width: 100%; aspect-ratio: 1.6; object-fit: contain; }
.arc-blog-editorial .article-content { padding: 24px 0 0; }
.arc-blog-editorial .article-content .title { color: #000; font-size: 28px; line-height: 1.25; text-transform: none; min-height: 0; margin: 0 0 14px; }
.arc-blog-editorial .article-content p { font-size: 17px; line-height: 28px; color: #33415c; margin-bottom: 20px; }
.arc-blog-editorial .article-soon { border-radius: 0; background: transparent; padding: 8px 0 0; border-top: 2px solid #ffbb00; color: #806000; font-size: 12px; letter-spacing: .08em; }
@media(max-width:767px) {
 .arc-blog-heading h2 { font-size: 32px; line-height: 42px; }
 .arc-blog-editorial .row > .col-md-6 { flex: 0 0 100%; max-width: 100%; }
 .arc-blog-editorial .article-content .title { font-size: 24px; }
}

/* Redondeado visible en las imágenes completas del Blog. */
.arc-blog-editorial .article-thumb,
.arc-blog-editorial .article-thumb img { border-radius: 20px; }
.arc-blog-editorial .article-thumb { background: transparent; }
.arc-blog-editorial .article-thumb img { aspect-ratio: auto; height: auto; display: block; }

/* Blog: imágenes a todo el ancho, con el mismo formato que Proyectos. */
.arc-blog-editorial .article-2-item .article-thumb { padding: 0; aspect-ratio: 1.65; flex-shrink: 0; }
.arc-blog-editorial .article-2-item .article-thumb img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }

/* El encabezado del Blog no comparte el flex horizontal de las tarjetas. */
.arc-blog-editorial .arc-blog-heading > [class*="col-"] { display: block; }
.arc-blog-heading .arc-editorial-label { display: flex; align-items: center; gap: 16px; color: #132d67; margin-bottom: 24px; }
.arc-blog-heading .arc-editorial-label::before { flex: 0 0 32px; margin-right: 0; }
#blog-articles { scroll-margin-top: 110px; }
#blog-articles > [hidden] { display: none !important; }
.arc-blog-pagination { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 20px; }
.arc-blog-pagination[hidden] { display: none; }
.arc-blog-pagination button { border: 1px solid #d9dde3; background: #fff; color: #132d67; border-radius: 8px; min-width: 44px; min-height: 44px; padding: 8px 16px; cursor: pointer; }
.arc-blog-pagination button[aria-current="page"] { background: #ffbb00; border-color: #ffbb00; font-weight: 700; }
.arc-blog-pagination button:disabled { opacity: .45; cursor: default; }
.arc-blog-pagination button:focus-visible { outline: 2px solid #132d67; outline-offset: 3px; }
.arc-blog-pagination p { flex-basis: 100%; text-align: center; color: #33415c; margin: 12px 0 0; }

/* Vacantes: misma identidad editorial que Servicios y Proyectos. */
.arc-careers-editorial { background: #fff; }
.arc-careers-editorial .arc-soft-area { background: #faf9f6; }
.arc-careers-heading { margin-bottom: 36px; }
.arc-careers-heading h2 { font-size: 54px; line-height: 62px; color: #000; }
.arc-careers-heading p:not(.arc-editorial-label) { font-size: 17px; line-height: 28px; color: #33415c; }
.arc-careers-editorial .arc-vacancy { border: 0; border-top: 1px solid #d9dde3; border-radius: 0; background: transparent; box-shadow: none; margin: 0; }
.arc-careers-editorial .arc-vacancy:last-child { border-bottom: 1px solid #d9dde3; }
.arc-careers-editorial .arc-vacancy-head { padding: 28px 0; }
.arc-careers-editorial .arc-vacancy-title { color: #000; font-size: 26px; line-height: 1.3; }
.arc-careers-editorial .arc-vacancy-body { padding: 0 0 30px; }
.arc-careers-editorial .arc-vacancy[open] { box-shadow: none; }
.arc-careers-editorial .arc-vacancy[open] .arc-vacancy-head { background: transparent; }
.arc-careers-editorial .service-2-item { border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left !important; padding: 24px 20px; border-top: 2px solid #ffbb00; }
.arc-careers-editorial .service-2-item .title { color: #000; font-size: 26px; }
.arc-careers-editorial .service-2-item .service-dot { display: none; }
.arc-careers-editorial .arc-panel { border: 0; border-radius: 0; box-shadow: none; border-left: 3px solid #ffbb00; padding: 12px 32px; background: transparent; }
.arc-careers-editorial .arc-panel h2 { color: #000; font-size: 36px; }
.arc-careers-editorial .arc-cta { border-radius: 20px; }
@media(max-width:767px) {
 .arc-careers-heading h2 { font-size: 32px; line-height: 42px; }
 .arc-careers-editorial .arc-vacancy-title { font-size: 22px; }
 .arc-careers-editorial .arc-panel { padding: 12px 20px; }
 .arc-careers-editorial .arc-panel h2 { font-size: 28px; }
}

/* Beneficios y cultura: filas editoriales y política en dos columnas. */
.arc-career-benefits { padding: 64px 0; }
.arc-career-benefit { padding: 30px 0; border-top: 1px solid #d9dde3; align-items: start; }
.arc-career-benefit:last-child { border-bottom: 1px solid #d9dde3; }
.arc-benefit-number { color: #956b00; font-size: 20px; font-weight: 700; }
.arc-career-benefit h3 { color: #000; font-size: 28px; line-height: 1.3; padding-right: 24px; }
.arc-career-benefit p,.arc-career-policy p,.arc-career-policy li { color: #33415c; font-size: 17px; line-height: 28px; }
.arc-career-benefit p { margin: 0; }
.arc-career-policy { background: #faf9f6; padding: 72px 0; }
.arc-career-policy h2 { color: #000; font-size: 36px; line-height: 1.2; padding-right: 32px; }
.arc-career-policy ul { list-style: none; padding: 0; margin: 28px 0 0; }
.arc-career-policy li { padding: 16px 0; border-top: 1px solid #d9dde3; }
.arc-career-policy li i { color: #956b00; margin-right: 8px; }
.arc-career-contact { padding: 64px 0; background: #fff; }
.arc-career-contact-inner h2 { color: #000; font-size: 36px; }
.arc-career-contact-inner p { color: #33415c; font-size: 17px; line-height: 28px; }
@media(max-width:991px) {
 .arc-benefit-number { display: block; margin-bottom: 12px; }
 .arc-career-policy h2 { margin-bottom: 28px; }
}
@media(max-width:575px) {
 .arc-career-benefit h3 { font-size: 24px; }
 .arc-career-policy h2,.arc-career-contact-inner h2 { font-size: 30px; }
}

/* Vacantes: conservar el encuadre completo de las personas. */
.arc-careers-editorial .arc-service-editorial .arc-service-panorama { aspect-ratio: auto; }
.arc-careers-editorial .arc-service-editorial .arc-service-panorama img { display: block; width: 100%; height: auto; object-fit: contain; }

/* Beneficios: banda de marca diferenciada del listado de puestos. */
.arc-career-benefits { background: #132d67; padding: 80px 0; }
.arc-benefits-band { row-gap: 40px; }
.arc-career-benefits .arc-career-benefit { border: 0; padding: 0 26px; margin: 0; }
.arc-career-benefits .arc-benefit-number { display: block; color: #ffbb00; font-size: 64px; line-height: 1; font-weight: 700; margin-bottom: 30px; }
.arc-career-benefits .arc-career-benefit h3 { color: #fff; font-size: 28px; line-height: 1.25; padding: 0; margin-bottom: 20px; }
.arc-career-benefits .arc-career-benefit p { color: #d0d8e8; font-size: 17px; line-height: 28px; }
.arc-benefits-band > .col-lg-4 + .col-lg-4 { border-left: 1px solid rgba(255,255,255,.2); }
@media(max-width:991px) {
 .arc-benefits-band > .col-lg-4 + .col-lg-4 { border-left: 0; }
 .arc-career-benefits .arc-career-benefit { padding: 0; }
 .arc-career-benefits .arc-benefit-number { font-size: 48px; margin-bottom: 18px; }
}

/* Vacantes: panorama uniforme con el encuadre anclado a los cascos. */
.arc-careers-editorial .arc-service-editorial .arc-service-panorama { aspect-ratio: 2.45; }
.arc-careers-editorial .arc-service-editorial .arc-service-panorama img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media(max-width:991px) {
 .arc-careers-editorial .arc-service-editorial .arc-service-panorama { aspect-ratio: 1.7; }
}

/* Contacto: formulario editorial y vías directas sin tarjetas repetidas. */
.arc-contact-editorial { background: #fff; }
.arc-contact-editorial > .arc-soft-area { background: #fff; }
.arc-contact-heading { margin-bottom: 42px; }
.arc-contact-heading h2 { color: #000; font-size: 54px; line-height: 62px; }
.arc-contact-heading p { color: #33415c; font-size: 17px; line-height: 28px; }
.arc-contact-editorial .contact-us-box { background: #faf9f6; border: 0; border-radius: 20px; padding: 38px; box-shadow: none; }
.arc-contact-editorial .contact-us-box > .title { color: #000; font-size: 30px; line-height: 1.2; }
.arc-contact-editorial .arc-contact-aside { padding-left: 32px; }
.arc-contact-editorial .arc-panel { border: 0; border-radius: 0; border-top: 1px solid #d9dde3; padding: 26px 0; background: transparent; box-shadow: none; }
.arc-contact-editorial .arc-panel .title { color: #000; font-size: 28px; }
.arc-contact-editorial .arc-panel p { font-size: 17px; line-height: 28px; color: #33415c; }
.arc-contact-editorial .arc-panel li a { color: #132d67; }
.arc-contact-editorial .input-box input,
.arc-contact-editorial .input-box select,
.arc-contact-editorial .input-box textarea { background: #fff; border: 1px solid #cbd2dc; border-radius: 8px; }
.arc-contact-editorial .input-box input:focus,
.arc-contact-editorial .input-box select:focus,
.arc-contact-editorial .input-box textarea:focus { outline: 2px solid #132d67; outline-offset: 2px; }
.arc-contact-editorial .contact-map { border-radius: 20px; overflow: hidden; }
.arc-contact-editorial .section-title-9 { text-align: left !important; }
.arc-contact-editorial .section-title-9 .title { color: #000; font-size: 42px; }
@media(max-width:991px) {
 .arc-contact-editorial .arc-contact-aside { padding-left: 0; }
}
@media(max-width:575px) {
 .arc-contact-heading h2 { font-size: 32px; line-height: 42px; }
 .arc-contact-editorial .contact-us-box { padding: 24px 18px; }
 .arc-contact-editorial .section-title-9 .title { font-size: 32px; }
}

/* Ubicación: composición lateral diferenciada del formulario. */
.arc-contact-editorial .arc-location { background: #f3f1eb; padding: 80px 0; }
.arc-location-layout { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 60px; }
.arc-location-copy::before { content: ""; display: block; width: 56px; height: 4px; background: #ffbb00; margin-bottom: 28px; }
.arc-location-copy h2 { color: #000; font-size: 42px; line-height: 1.15; margin-bottom: 28px; }
.arc-location-copy p { color: #33415c; font-size: 17px; line-height: 28px; margin: 0 0 24px; }
.arc-location-copy .main-btn { margin-top: 8px; }
.arc-contact-editorial .arc-location-map { border-radius: 20px; overflow: hidden; margin: 0; }
.arc-location-map iframe { display: block; width: 100%; height: 480px; }
@media(max-width:991px) {
 .arc-location-layout { grid-template-columns: 1fr; gap: 36px; }
 .arc-contact-editorial .arc-location { padding: 56px 0; }
 .arc-location-map iframe { height: 360px; }
 .arc-location-copy h2 { font-size: 32px; }
}
.arc-news-layout{padding-top:170px;padding-bottom:80px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;color:#193369}.arc-news-layout aside{background:#f4f6fa;padding:26px;border-radius:18px;align-self:start}.arc-news-layout aside h2{font-size:22px}.arc-news-layout aside ul{list-style:none;padding:0}.arc-news-layout aside li{padding:16px 0;border-bottom:1px solid #dce2eb}.arc-news-layout a{color:#23469b}.arc-news-layout a[aria-current]{font-weight:700;text-decoration:underline}.arc-news-layout h1{font-size:38px;margin-bottom:24px}.arc-news-layout article>h2{font-size:26px;margin:28px 0 16px}.arc-news-layout article>p{line-height:1.8;margin-bottom:22px}.arc-news-layout figure img{width:100%;height:auto;border-radius:20px}.arc-news-layout figcaption{font-size:13px;line-height:1.6;margin:10px 0 24px}.arc-news-source{background:#f4f6fa;padding:22px;border-radius:12px}.arc-news-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #dce2eb;margin-top:35px;padding-top:25px}.arc-news-archive{grid-column:1/-1;margin-top:40px}.arc-news-archive .article-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}.arc-news-nav a{text-align:center}.arc-news-lead{font-size:21px}@media(max-width:767px){.arc-news-layout{grid-template-columns:1fr;padding-top:120px;gap:25px}.arc-news-layout aside{order:2}.arc-news-layout article{order:1}.arc-news-archive{order:3}.arc-news-layout h1{font-size:30px}.arc-news-nav{font-size:14px;gap:12px}}
body:has(.arc-news-layout) .header-area .header-nav{background:#1D4598}
.arc-home-news-heading{max-width:780px;margin:0 auto 38px;text-align:center}
.arc-home-news-heading h2{max-width:720px;margin:0 auto 22px;color:#000;font-size:48px;line-height:1.18;letter-spacing:-1.5px}
.arc-home-news-heading p{font-size:17px;line-height:28px;color:#34466b;margin:0}
.arc-home-news-more{text-align:center;margin-top:28px}
.arc-home-news-more .main-btn{background:#ffbb00;border-color:#ffbb00;color:#132d67;border-radius:8px;padding:0 32px}
.arc-home-news-more .main-btn:hover{background:#e5a800;border-color:#e5a800;color:#132d67}
@media(max-width:767px){.arc-home-news-heading h2{font-size:34px;letter-spacing:-.8px}.arc-home-news-heading{margin-bottom:22px}.arc-home-news-more{margin-top:16px}}

/* Las regiones del mapa se encienden mediante su máscara SVG. */
.arc-mapa-calor { position: relative; }

/* Indicador de la especialidad activa: línea que se extiende suavemente. */
.arc-civil-detail { position: relative; }
.arc-civil-detail[open] { border-bottom-color: #425782; }
.arc-civil-detail::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: #ffbb00; transform: scaleX(0);
    transform-origin: left; transition: transform .4s ease; pointer-events: none;
}
.arc-civil-detail[open]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .arc-civil-detail::after { transition: none; }
}

/* Encuadre de la nueva foto vertical dentro de la portada 3:2 de Pachuca. */
.arc-case-figure img[src$="arcondec-pachuca-equipo-v2.png"] { object-position: center top; }