/* =========================================================
ESTILOS GLOBALES – CONSTRUCCIONES AL DÍA
Versión Desktop
========================================================= */
:root {
/* Escala de espaciado 8pt */
--space-8: 8px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-120: 120px;
}

/* ===== VARIABLES ===== */
:root {
--color-principal: #FFCE00;
--color-texto: #383D3D;
--color-fondo: #fff;
--color-negro: #111;
--color-gris: #ddd;
--fuente-base: 'Poppins', sans-serif;
--max-ancho: 1000px;
}

/* ===== RESET ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: var(--fuente-base);
color: var(--color-texto);
background-color: var(--color-fondo);
line-height: 1.6;
}

h1, h2, h3 {
font-weight: 700;
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }

/* =========================================================
HEADER
========================================================= */
.header_ar01 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 30;            /* antes 1000 */
background: transparent;
display: flex;
justify-content: center;
padding-top: 24px;
}


.header-container_ar01 {
background: #3a3a3a;
border-radius: 40px;
padding: 10px 24px;
display: flex;
align-items: center;
gap: 32px;
max-width: var(--max-ancho);
width: fit-content;
pointer-events: all;
/* 🔥 Sombra natural redondeada */
filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.35));
}

.logo_ar01 {
                /* Fondo del recuadro del logo */
width: 140px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #000;
}

.nav_ar01 ul {
display: flex;
align-items: center;
gap: 16px;
}

.nav_ar01 a {
color: #fff;
font-weight: 500;
padding: 8px 16px;
border-radius: 20px;
transition: 0.3s;
}

.nav_ar01 .active a {
background-color: var(--color-principal);
color: #000;
}

.nav_ar01 a:hover {
background-color: var(--color-principal);
color: #000;
}

/* =========================================================
HERO
========================================================= */
.hero_ar01 {
display: flex;
height: 100vh;        /* ocupa todo el alto visible */
margin-top: 0;        /* sin separación superior */
}
.hero_ar01 {
position: relative; /* importante para posicionar el ::after dentro */
}

.hero_ar01::after {
content: "";
position: absolute;
bottom: 0;       /* queda dentro del hero */
left: 0;
width: 100%;
height: 8px;     /* grosor de la franja */
background: var(--color-principal);
z-index: 5;
}
.hero-left_ar01 {
flex: 1;
background-image: url("../img/pared.jpg"); /* textura izquierda */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;    /* centra verticalmente */
align-items: flex-start;     /* separa el texto del borde izquierdo */
padding-right: 6%;          /* deja espacio antes del corte vertical */
position: relative;
height: 100vh;              /* asegura el alto total de la pantalla */
box-sizing: border-box;
padding-left: 0; /* quitamos padding lateral anterior */
}
.hero-left-inner_ar01 {
max-width: 800px;    /* mismo ancho del texto inferior */
margin-left: auto;
margin-right: auto;
padding-left: 40px;  /* leve ajuste visual */
}

.hero-left-inner_ar01 h1 {
font-size: clamp(36px, 3.8vw, 52px);
font-weight: 600;
line-height: 1.2;
margin-bottom: 40px;
}

.hero-left-inner_ar01 .btn-yellow_ar01 {
margin-top: 10px;
}
.hero-left_ar01 h1 {
font-size: clamp(36px, 3.8vw, 52px);
font-weight: 600;
line-height: 1.2;
margin-bottom: 40px;
max-width: 520px;  

}

.btn-yellow_ar01 {
background-color: var(--color-principal);
color: #000;
border: none;
border-radius: 24px;
padding: 14px 28px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}

.btn-yellow_ar01:hover {
transform: scale(1.05);
}

.hero-right_ar01 {
flex: 1;
background-image: url("../img/img1.jpg"); /* ruta a tu imagen */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
main {
margin-top: 0;        /* asegura que no haya espacio entre header y contenido */
}
/* ===== HERO CON TEXTO SUPERPUESTO ===== */
.hero_ar01 {
position: relative;
display: flex;
height: 100vh;
overflow: hidden;
}

/* Mantienen las mitades de imagen */
.hero-left_ar01,
.hero-right_ar01 {
flex: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100%;
}

.hero-left_ar01 {
background-image: url("../img/pared.jpg");
}

.hero-right_ar01 {
background-image: url("../img/img1.jpg");
}

/* Texto encima del hero */
.hero-overlay_ar01 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 800px;        /* mismo ancho que el bloque de texto inferior */
color: #fff;
text-align: left;
padding: 0 40px;         /* margen interno lateral */
z-index: 10;
}

.hero-overlay_ar01 h1 {
font-size: clamp(36px, 3.8vw, 52px);
font-weight: 600;
line-height: 1.2;
margin-bottom: 40px;
}

.hero-overlay_ar01 .btn-yellow_ar01 {
background-color: var(--color-principal);
color: #000;
border: none;
border-radius: 24px;
padding: 14px 28px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}

.hero-overlay_ar01 .btn-yellow_ar01:hover {
transform: scale(1.05);
}

/* =========================================================
INTRO
========================================================= */
.intro_ar01 {
background-color: #f8f8f8;      /* mismo gris que la secci�n de clientes */
padding: 80px 20px;             /* mismo espacio vertical */
text-align: left;
font-size: 18px;
line-height: 1.6;
font-weight: 200;
}

.intro_ar01 p {
max-width: 800px;               /* igual ancho que el resto del contenido */
margin: 0 auto;                 /* centra el bloque */
color: #383D3D;

}

.intro_ar01 p strong {
color: #383D3D;
font-weight: 400;
}

/* =========================================================
TRAYECTORIA – FAJA INDIVIDUAL POR CADA TARJETA
========================================================= */
.trayectoria_ar01 {
text-align: center;
padding: 32px 20px;
background: #fff;
}

.trayectoria_ar01 h2 {
font-size: 24px;
font-weight: 500;
color: #383D3D;
margin-bottom: 16px;
}
.trayectoria_ar01 span {
color: var(--color-principal);
}

.trayectoria-grid_ar01 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: var(--max-ancho);
margin: 0 auto;
}
.trayectoria-grid_ar01 {
max-width: 800px;       /* lo que quer�as */
margin: 0 auto;         /* centra los cuadros */
display: grid;
grid-template-columns: repeat(5, 1fr); /* 5 columnas */
gap: 24px;              /* separaciones entre tarjetas */
justify-items: center;
}

.trayectoria-item_ar01 {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

/* === FAJA AMARILLA === */
.faja_ar01 {
background: var(--color-principal);
color: #111;
font-weight: 600;
font-size: 16px;
padding: 6px 0;
border-radius: 4px;
text-align: center;
position: absolute;
top: 70px;
z-index: 3;
width: 150px; /* 🔸 antes era 180px, aumentamos para sobresalir */
transform: translateY(4px); /* ajusta su posición visual */
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* === CUADRO NEGRO === */
.caja-icono_ar01 {
background: #111;
width: 130px;
height: 140px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
position: relative;
z-index: 1;
margin-top: 34px;
}

/* === ÍCONOS === */
.icon-militar_ar01 {
background: url("../img/iconos/militar.svg") center/60% no-repeat;
}
.icon-hospital_ar01 {
background: url("../img/iconos/hospital.svg") center/60% no-repeat;
}
.icon-colegio_ar01 {
background: url("../img/iconos/colegio.svg") center/60% no-repeat;
}
.icon-adecuacion_ar01 {
background: url("../img/iconos/adecuacion.svg") center/60% no-repeat;
}

/* === NÚMERO === */
.numero_ar01 {
color: var(--color-principal);
font-size: 25px;
font-weight: 700;
margin-top: 20px;
}

/* === EFECTO HOVER (opcional) === */
.caja-icono_ar01:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
transition: 0.3s;
}
.trayectoria-slider_ar01 {
width: 100%;
overflow: hidden;
position: relative;
padding: 20px 0;
}

.trayectoria-track_ar01 {
display: flex;
gap: 40px;
white-space: nowrap;
}

.trayectoria-item_ar01 {
min-width: calc(25% - 40px); /* 4 visibles en desktop */
flex-shrink: 0;
}

@media (max-width: 900px) {
.trayectoria-item_ar01 {
min-width: 70%;
}
}


/* =========================================================
CLIENTES Y ALIADOS
========================================================= */
.clientes_ar01 {
background-color: #f8f8f8;
text-align: center;
padding: 80px 20px;
}

.titulo-clientes_ar01 {
position: relative;
font-size: 24px;
font-weight: 500;
color: #383D3D;
margin-bottom: 60px;
text-transform: uppercase;
}

.titulo-clientes_ar01::after {
content: "";
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 5px;
background: var(--color-principal);
border-radius: 2px;
}

/* Rejilla de logos */
.clientes-grid_ar01 {
max-width: var(--max-ancho);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}

/* Caja de logo */
.cliente_ar01 {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 150px;
margin: auto;
transition: 0.3s ease;
}

.cliente_ar01 img {
width: 150px;
height: auto;
opacity: 0.8;
transition: 0.3s ease;
}

.cliente_ar01:hover {
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
transform: translateY(-4px);
}

.cliente_ar01:hover img {
opacity: 1;
}

.clientes-wrapper_ar01 {
max-width: 800px;
width: 100%;
margin: 0 auto;        
}

/* =========================================================
FOOTER
========================================================= */
.footer_ar01 {
background-color: var(--color-negro);
color: #fff;
padding: 60px 20px;
}

.footer-container_ar01 {
max-width: var(--max-ancho);
margin: 0 auto;
text-align: center;
}

.footer-logo_ar01 {
width: 160px;
height: 48px;
margin: 0 auto 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}

.footer-links_ar01 {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
}

.footer-links_ar01 a {
color: #fff;
font-size: 14px;
transition: 0.3s;
}

.footer-links_ar01 a:hover {
color: var(--color-principal);
}

.footer-policies_ar01 p {
font-size: 13px;
color: #aaa;
margin: 4px 0;
}
/* === �CONOS TRAYECTORIA === */
.icon-militar_ar01 {
  background: url("../img/trayectoria_01.jpg") center/cover no-repeat;
}

.icon-hospital_ar01 {
  background: url("../img/trayectoria_02.jpg") center/cover no-repeat;
}

.icon-colegio_ar01 {
  background: url("../img/trayectoria_03.jpg") center/cover no-repeat;
}

.icon-adecuacion_ar01 {
  background: url("../img/trayectoria_04.jpg") center/cover no-repeat;
}

.icon-deporte_ar01 {
  background: url("../img/trayectoria_05.jpg") center/cover no-repeat;
}

.icon-diseno_ar01 {
  background: url("../img/trayectoria_06.jpg") center/cover no-repeat;
}

.icon-otros_ar01 {
  background: url("../img/trayectoria_07.jpg") center/cover no-repeat;
}

.trayectoria-slider_ar01,
.trayectoria-track_ar01,
.trayectoria-item_ar01,
.trayectoria-item_ar01 * {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/* Cursor cuando se puede arrastrar */
.trayectoria-track_ar01 {
cursor: grab;
}

/* Cursor cuando se est� arrastrando */
.trayectoria-track_ar01.dragging {
cursor: grabbing;
}

/* =========================================================
FOOTER NUEVO – CON FRANJA AMARILLA Y LÍNEA DIVISORIA
========================================================= */
.footer_ar01 {
background: var(--color-negro);
color: #fff;
text-align: center;
position: relative;
padding: 60px 20px 40px;
}

/* Franja amarilla superior */
.footer-top_ar01 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: var(--color-principal);
}

/* Contenedor central */
.footer-container_ar01 {
max-width: var(--max-ancho);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}

/* Logo */
.footer-logo_ar01 {
width: 230px;
height: 80px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-weight: 700;
margin-bottom: 32px;
}

/* Navegación */
.footer-links_ar01 {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 32px;
padding: 0;
}

.footer-links_ar01 a {
color: #fff;
font-size: 14px;
font-weight: 500;
transition: 0.3s;
}

.footer-links_ar01 a:hover {
color: var(--color-principal);
}

/* Línea divisoria gris */
.footer-divider_ar01 {
width: 100%;
height: 1px;
background: rgba(255,255,255,0.1);
margin-bottom: 24px;
}

/* Textos inferiores */
.footer-bottom_ar01 {
font-size: 13px;
color: #aaa;
line-height: 1.6;
}

.footer-bottom_ar01 a {
color: var(--color-principal);
text-decoration: none;
transition: 0.3s;
}

.footer-bottom_ar01 a:hover {
color: #fff;
}
/* =========================================================
SECCI�N INTRODUCCI�N � NOSOTROS (sistema 8pt)
========================================================= */
.nosotros-intro_ar01 {
background-color: #fff;
padding-top: var(--space-120); 
padding-bottom: var(--space-64);
padding-left: var(--space-20);
padding-right: var(--space-20);
}


.nosotros-intro-container_ar01 {
max-width: 800px;
margin: 0 auto;
}

/* ===== T�tulo ===== */
.nosotros-intro-container_ar01 h1 {
font-size: 36px;
font-weight: 700;
color: #383D3D;
text-align: center;
margin-bottom: var(--space-32); /* 32px debajo del t�tulo */
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}

/* L�nea amarilla */
.nosotros-intro-container_ar01 h1::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: calc(-1 * var(--space-16)); /* 16px debajo del texto */
width: 80px;
height: 4px;
background-color: var(--color-principal);
border-radius: 2px;
}

/* ===== P�rrafo ===== */
.nosotros-intro-container_ar01 p {
font-size: 18px;
line-height: 27px;
color: #383D3D;
text-align: left;
font-weight: 200;
margin-top: var(--space-40);  /* 40px separaci�n desde el t�tulo */
}
/* =========================================================
L�NEA DE TIEMPO � CAMINO CON PROP�SITO
========================================================= */
.timeline_ar01 {
background-color: #f8f8f8;
padding: var(--space-80) var(--space-20);
text-align: center;
}

.timeline-container_ar01 {
margin: 0 auto;
}

/* ===== T�tulo ===== */
.timeline-container_ar01 h2 {
font-size: 24px;
font-weight: 600;
color: #383D3D;
margin-bottom: var(--space-40);
position: relative;
}

.timeline-container_ar01 h2::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: var(--color-principal);
border-radius: 2px;
}

/* ===== Franja negra con a�os ===== */


/* Botones laterales */
.timeline-btn_ar01 {
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
transition: 0.3s;
display: none;
}

.timeline-btn_ar01:hover {
color: var(--color-principal);
}

/* ===== Contenido del a�o ===== */


.timeline-title_ar01 {
font-size: 20px;
font-weight: 500;
color: var(--color-principal);
margin-bottom: var(--space-16);
text-transform: uppercase;
}

.timeline-text_ar01 {
font-size: 16px;
line-height: 1.6;
color: #383D3D;
}
/* ===== Timeline Carrusel Centrado ===== */


/* Contenedor con scroll controlado */
.timeline-years-wrapper_ar01 {
overflow: hidden;
flex: 1;
width: 100%;
height: 57px;
}

/* Botones */
.timeline-btn_ar01 {
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
transition: 0.3s;
z-index: 2;
}

.timeline-btn_ar01:hover {
color: var(--color-principal);
}

/* ===== NUEVO LAYOUT: botones debajo del timeline ===== */
.timeline-content-wrap_ar01 {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-32);
margin-top: var(--space-48);
position: relative;
}



/* Botones bajo la franja negra */
.timeline-btn_ar01.under {
background: none;
border: none;
color: #111;
font-size: 32px;
font-weight: 300;
cursor: pointer;
transition: 0.3s;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}

.timeline-btn_ar01.under:hover {
color: var(--color-principal);
transform: scale(1.2);
}

/* Peque�o ajuste en pantallas peque�as */
@media (max-width: 768px) {
.timeline-content-wrap_ar01 {
flex-direction: column;
gap: var(--space-24);
}

.timeline-btn_ar01.under {
font-size: 28px;
}

.timeline-content_ar01 {
max-width: 100%;
}
}
/* =========================================================
L�NEA DE TIEMPO � FRANJA COMPLETA Y C�RCULOS CONC�NTRICOS
========================================================= */

.timeline_ar01 {
background-color: #f8f8f8;
padding: var(--space-80) 0;
text-align: center;
overflow: hidden;
}

.timeline-container_ar01 {
width: 100%;
margin: 0;
}

/* ===== T�tulo ===== */
.timeline-container_ar01 h2 {
font-size: 24px;
font-weight: 600;
color: #383D3D;
margin-bottom: var(--space-40);
position: relative;
}

.timeline-container_ar01 h2::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background-color: var(--color-principal);
border-radius: 2px;
}

/* ===== Franja negra (ocupa todo el ancho del viewport) ===== */
.timeline-bar_ar01 {
position: relative;
width: 100vw;
left: 50%;
transform: translateX(-50%);
background-color: #111;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-24) 0; 
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
overflow: visible;
}

/* ===== Carrusel de a�os ===== */
.timeline-years-wrapper_ar01 {
overflow: hidden;
flex: 1;
width: 100%;
}

.timeline-years_ar01 {
justify-content: center;
align-items: flex-start;
gap: var(--space-64);
transition: transform 0.5s ease;
padding: 0 var(--space-40);
}
.timeline-years_ar01 {
position: relative;
display: flex;
justify-content: center;
gap: var(--space-64);
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(120px, 16vw, 260px); 
padding: 0 var(--space-40);
}
/* ===== Cada a�o ===== */
.year_ar01 {
position: relative;
font-size: 16px;
font-weight: 500;
color: #ccc;
text-align: center;
cursor: pointer;
min-width: 100px;
transition: color 0.3s ease;
}

/* ===== C�rculos conc�ntricos debajo de cada a�o ===== */
.year_ar01::before,
.year_ar01::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
transition: all 0.3s ease;
}


/* ===== A�o activo ===== */
.year_ar01.active {
color: var(--color-principal);
}

.year_ar01.active::before {
border-color: var(--color-principal);
opacity: 1;
}

/* ===== Contenido del a�o ===== */
.timeline-content-wrap_ar01 {
display: block;
align-items: center;
justify-content: center;
gap: var(--space-32);
margin-top: var(--space-48);
position: relative;
}

.timeline-content_ar01 {
padding: var(--space-40);
text-align: center;
max-width: 530px;
flex-shrink: 0;
}
.timeline-content_ar01 {
max-height: 180px;   /* alto fijo desktop */
display: flex;
flex-direction: column;
justify-content: center; /* centra verticalmente */
}
@media (max-width: 600px) {
.timeline-content_ar01 {
max-height: 220px; /* alto fijo mobile */
}
}
/* ===== Botones debajo ===== */
.timeline-btn_ar01.under {
background: none;
border: none;
color: #111;
font-size: 51px;
font-weight: 300;
cursor: pointer;
transition: 0.3s;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}

.timeline-btn_ar01.under:hover {
color: var(--color-principal);
transform: scale(1.2);
}

/* ===== Responsivo ===== */
@media (max-width: 768px) {
.timeline-years_ar01 {
gap: var(--space-32);
}
.timeline-content-wrap_ar01 {
flex-direction: column;
gap: var(--space-24);
}
.timeline-years-wrapper_ar01{
height: 85px;
}
}.timeline-bar_ar01 {
position: relative;
}

.timeline-bar_ar01::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 37px; /* ajusta seg�n lo que necesites */
height: 2px;
background: #ccc;  /* c�mbiala al color que quieras */
opacity: 0.5;
}

/* ===== C�RCULO ACTIVO M�S GRANDE E INDEPENDIENTE ===== */
.year_ar01.active {
color: var(--color-principal);
z-index: 2;
}

@media(max-width: 500px){
.timeline-bar_ar01::after {
bottom: 43px; /* ajusta seg�n lo que necesites */
}
}



/* C�rculos normales (m�s peque�os y uniformes) */
.year_ar01::before {
width: 16px;
height: 16px;
bottom: -14px;
border: 2px solid #888;
opacity: 0.5;
}

.year_ar01::after {
width: 6px;
height: 6px;
bottom: -8px;
background: #666;
}
/* ===== L�NEA HORIZONTAL DE CONEXI�N ===== */
.timeline-years_ar01 {
position: relative;
}

/* L�nea que atraviesa todos los a�os */
.timeline-line_ar01 {
position: absolute;
top: 161%;
height: 2px;
background: #666;
z-index: 0;
transition: all 0.3s ease;
}



.year_ar01 {
position: relative;
font-size: 16px;
font-weight: 500;
color: #ccc;
text-align: center;
cursor: pointer;
min-width: 100px;
transition: color 0.3s ease;
z-index: 2; /* los c�rculos quedan sobre la l�nea */
}

/* C�rculo exterior (borde visible) */
.year_ar01::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -28px; /* ajusta para alinear a la l�nea */
width: 18px;
height: 18px;
border: 2px solid #888;
border-radius: 50%;
background: #111; /* color de la franja negra para �tapar� la l�nea detr�s */
z-index: 2;
}

/* C�rculo interior */
.year_ar01::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -21px; /* centrado dentro del anterior */
width: 8px;
height: 8px;
border-radius: 50%;
background: #666;
z-index: 3;
}
.year_ar01.active::before {
width: 24px;
height: 24px;
border: 3px solid var(--color-principal);
bottom: -31px;
background: #111;
}

.year_ar01.active::after {
width: 12px;
height: 12px;
background: var(--color-principal);
bottom: -22px;
box-shadow: 0 0 8px rgba(255, 206, 0, 0.6);
}
/* ===== L�NEA VERTICAL BAJO EL A�O ACTIVO ===== */


/* Creamos la l�nea con ::after-extra */
.year_ar01.active .vertical-line_ar01 {
position: absolute;
left: 50%;
top: 32px;          /* debajo del c�rculo */
transform: translateX(-50%);
width: 2px;
height: 55px;       /* AJUSTA ESTA ALTURA */
background: #000;
z-index: 1;
}
/* =========================================================
BASES QUE SOSTIENEN NUESTRO CAMINO
========================================================= */

.bases_ar01 {
background: #fff;
padding: 80px 20px;
}

.bases-container_ar01 {
max-width: 800px;
margin: 0 auto;
}

.bases-title_ar01 {
font-size: 24px;
font-weight: 600;
text-align: center;
color: #383D3D;
margin-bottom: 40px;
position: relative;
}

.bases-title_ar01::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--color-principal);
border-radius: 2px;
}

/* TARJETAS */
.base-item_ar01 {
display: flex;
align-items: center;
gap: 24px;
margin: 40px 0;
}

.base-item_ar01.reverse {
flex-direction: row-reverse;
}

/* Icono / imagen */
.base-icon_ar01 {
width: 180px;
height: 180px;
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
}

/* Contenido */
.base-content_ar01 h3 {
font-size: 20px;
font-weight: 600;
color: #383D3D;
margin-bottom: 12px;
}

.base-content_ar01 p {
font-size: 18px;
line-height: 1.6;
color: #383D3D;
font-weight: 200; 
}
.base-content_ar01 p strong {
font-weight: 400;  
color: #383D3D;
}


/* Separador entre tarjetas */
.base-divider_ar01 {
width: 100%;
height: 1px;
background: #ddd;
margin: 20px 0;
}

/* Responsive */
@media (max-width: 768px) {
.base-item_ar01,
.base-item_ar01.reverse {
flex-direction: column;
text-align: center;
}

.base-icon_ar01 {
margin: 0 auto;
}
}
.img_fix{
width: 180px;
height: 180px;
border-radius: 12px;
}
/* ==========================================
GALER�A DE PROYECTOS
========================================== */

const fotos = [
"img/galeria01/img1.jpg",
"img/galeria01/img2.jpg",
"img/galeria01/img3.jpg"
];

const textos = [
"Construcci�n de los frentes 1 a 5 del cant�n militar",
"Obra de adecuaci�n de infraestructura educativa",
"Construcci�n de unidad hospitalaria"
];

let galeriaIndex = 0;

const fotoDOM    = document.getElementById("galeriaFoto_ar01");
const textoDOM   = document.getElementById("galeriaTexto_ar01");
const bulletsDOM = document.getElementById("galeriaBullets_ar01");
const btnPrevGal = document.querySelector(".galeria-btn_ar01.prev");
const btnNextGal = document.querySelector(".galeria-btn_ar01.next");
/* ==========================================
GALER�A DE PROYECTOS � VERSION CORREGIDA
========================================== */

.galeria-proyectos_ar01 {
width: 100%;
background: #1a1a1a;
padding: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}

/* CONTENEDOR DE IMAGEN */
.galeria-imagen_ar01 {
width: 100%;
max-width: 1400px;
height: auto;
max-height: 650px;
overflow: hidden;
position: relative;
}

.galeria-imagen_ar01 img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}

/* FLECHAS */
.galeria-btn_ar01 {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
font-size: 60px;
color: var(--color-principal);
cursor: pointer;
z-index: 20;
padding: 0 20px;
transition: opacity 0.2s;
font-weight: 300;
line-height: 0;
}

.galeria-btn_ar01.prev { left: 30px; }
.galeria-btn_ar01.next { right: 30px; }

.galeria-btn_ar01:hover { opacity: 0.5; }

/* TEXTO */
.galeria-texto_ar01 {
width: 100%;
text-align: center;
color: #fff;
font-size: 18px;
padding: 18px 0;
font-weight: 300;
background: transparent;
}

/* BULLETS */
.galeria-bullets_ar01 {
display: flex;
justify-content: center;
gap: 10px;
padding-bottom: 20px;
}

.galeria-bullets_ar01 span {
width: 12px;
height: 12px;
background: #777;
border-radius: 50%;
cursor: pointer;
transition: background 0.2s;
}

.galeria-bullets_ar01 span.active {
background: var(--color-principal);
}

/* ==========================================
RESPONSIVE
========================================== */

/* Tablets */
@media (max-width: 900px) {
.galeria-btn_ar01 {
font-size: 45px;
left: 20px;
right: 20px;
}
}

/* M�viles */
@media (max-width: 600px) {

.galeria-imagen_ar01 {
max-height: 380px;
}

.galeria-btn_ar01 {
font-size: 38px;
left: 10px;
right: 10px;
}

.galeria-texto_ar01 {
font-size: 16px;
padding: 12px 0;
}

.galeria-bullets_ar01 span {
width: 10px;
height: 10px;
}
}
/* ======================================
GALER�A AJUSTADA EXACTA A LA REFERENCIA
====================================== */

.galeria-proyectos_ar01 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

/* CONTENEDOR NEGRO + IMAGEN ADENTRO */
.galeria-contenedor_ar01 {
width: 100%;
max-width: 1400px;    /* MISMO ANCHO DE LA IMAGEN */
background: #1a1a1a;  /* Fondo negro exacto */
margin: 0 auto;
position: relative;
overflow: hidden;
}

.galeria-contenedor_ar01 img {
width: 100%;
display: block;
}

/* ======================================
FRANJA NEGRA CON FLECHAS
====================================== */

.galeria-barra_ar01 {
width: 100%;
max-width: 1400px;
margin: 0 auto;
background: #1a1a1a; /* franja negra */
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 25px;
position: relative;
}

/* FLECHAS ahora en la franja negra */
.galeria-btn_ar01 {
font-size: 50px;
color: var(--color-principal);
background: none;
border: none;
cursor: pointer;
padding: 5px 10px;
}

.galeria-btn_ar01:hover {
opacity: 0.6;
}

/* CENTRO: texto + bullets */
.galeria-info_ar01 {
flex: 1;
text-align: center;
}

.galeria-texto_ar01 {
color: #ffffff;
font-size: 18px;
margin-bottom: 8px;
font-weight: 300;
}

.galeria-bullets_ar01 {
display: flex;
justify-content: center;
gap: 10px;
}

.galeria-bullets_ar01 span {
width: 11px;
height: 11px;
background: #777;
border-radius: 50%;
cursor: pointer;
}

.galeria-bullets_ar01 span.active {
background: var(--color-principal);
}

/* RESPONSIVO */
@media (max-width: 600px) {

.galeria-btn_ar01 {
font-size: 40px;
}

.galeria-texto_ar01 {
font-size: 16px;
}
}
/* NUESTRO SERVICIOS */
/* =======================================
SECCI�N NUESTROS SERVICIOS (REFERENCIA REAL)
========================================== */

.servicios_ar01 {
max-width: 1100px;
margin: 100px auto;
}

.servicios-grid_ar01 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin: 32px auto;
}

/* Tarjeta general */
.servicio-item_ar01 {
cursor: pointer;
transition: 0.3s ease;
}

/* Imagen */
.servicio-img_ar01 {
height: 450px;
background-size: cover;
background-position: center;
position: relative;
filter: brightness(1);
transition: 0.3s ease;
}

/* Hover efecto */
.servicio-item_ar01:hover .servicio-img_ar01 {
filter: brightness(0.75);
}

.servicio-item_ar01:hover .servicio-inner_ar01 {
border-color: var(--color-principal);
}

/* RECT�NGULO INTERNO EXACTO */
.servicio-inner_ar01 {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 2px solid rgba(255,255,255,0.8);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
transition: 0.3s ease;
}

/* Texto */
.servicio-inner_ar01 p {
color: #fff;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 1.3;
}

/* =========================================================
CIFRAS QUE HABLAN POR NOSOTROS
========================================================= */

.cifras_ar01 {
background: #fff;
padding: 80px 20px;
text-align: center;
}

.cifras-grid_ar01 {
max-width: 560px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px;
margin-top: 60px;
}

/* �tem */
.cifra-item_ar01 {
text-align: center;
}

/* C�RCULO grande */
.cifra-circulo_ar01 {
width: 180px;
height: 180px;
margin: 0 auto 24px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--color-principal);
display: flex;
align-items: center;
justify-content: center;
}

/* Imagen dentro del c�rculo */
.cifra-circulo_ar01 img {
width: 160px;
height: auto;
object-fit: contain;
opacity: 1;
}

/* N�mero */
.cifra-numero_ar01 {
font-size: 36px;
font-weight: 700;
color: #606060;
margin-bottom: 6px;
}

/* L�nea amarilla */
.cifra-linea_ar01 {
display: block;
width: 40px;
height: 4px;
background: var(--color-principal);
margin: 0 auto 12px;
border-radius: 2px;
}

/* Texto */
.cifra-texto_ar01 {
font-size: 21px;
font-weight: 600;
color: #606060;
line-height: 27px;
text-align: center;
}

/* Responsivo */
@media (max-width: 900px) {
.cifras-grid_ar01 {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 600px) {
.cifras-grid_ar01 {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* =========================================================
VENTAJAS COMPETITIVAS
========================================================= */

.ventajas_ar01 {
padding: 80px 20px;
}

.ventaja-bloque_ar01 {
display: flex;
align-items: stretch;
margin: 60px auto;
max-width: 1100px;
}

.ventaja-bloque_ar01 img {
width: 50%;
height: auto;
object-fit: cover;
}

.ventaja-bloque_ar01.reverse {
flex-direction: row-reverse;
}

/* BLOQUE DE TEXTO */
.ventaja-texto_ar01 {
width: 50%;
background: #3A3A3A;
color: #fff;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}

/* L�NEA AMARILLA */
.ventaja-texto_ar01 h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 24px;
line-height: 1.3;
position: relative;
}

.ventaja-texto_ar01 h3::after {
content: "";
width: 80px;
height: 4px;
background: var(--color-principal);
position: absolute;
left: 0;
bottom: -12px;
}

.ventaja-texto_ar01 p {
margin-top: 28px;
font-size: 16px;
line-height: 1.6;
font-weight: 300;
}

/* RESPONSIVE */
@media (max-width: 900px) {
.ventaja-bloque_ar01,
.ventaja-bloque_ar01.reverse {
flex-direction: column;
}

.ventaja-texto_ar01,
.ventaja-bloque_ar01 img {
width: 100%;
}

.ventaja-texto_ar01 {
padding: 32px;
}
}
/* =========================================================
PORTAL DE EMPLEADOS
========================================================= */

.portal-intro_ar01 {
padding-bottom: 40px;
}

.portal-search_ar01 {
margin: 40px auto 0;
max-width: 700px;
padding: 0 20px;
}

.portal-search_ar01 input {
width: 100%;
height: 50px;
border-radius: 25px;
border: 1px solid #ddd;
padding: 0 20px;
font-size: 15px;
outline: none;
background: #f9f9f9;
}

.portal-descargas_ar01 {
max-width: 800px;
margin: 40px auto 80px;
padding: 0 20px;
}

.portal-descargas_ar01 h2 {
font-size: 22px;
font-weight: 600;
margin-bottom: 28px;
}

.portal-grid_ar01 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}

.portal-item_ar01 {
background: #f3f3f3;
border-radius: 16px;
padding: 22px;
display: flex;
align-items: center;
gap: 14px;
border-left: 4px solid var(--color-principal);
}

.portal-icon_ar01 {
width: 64px;
height: 64px;
border-radius: 50%;
background: url('../img/archivo.png') center/100% no-repeat;
}


.portal-item_ar01 p {
font-size: 15px;
font-weight: 500;
color: #333;
}

/* RESPONSIVE */
@media (max-width: 600px) {
.portal-grid_ar01 {
grid-template-columns: 1fr;
}
}
.portal-search_ar01 input::placeholder {
color: #b1b1b1; /* <--- CAMBIA ESTE COLOR */
opacity: 1;     /* asegura que no se ponga transparente */
}
/* =========================================================
CONTACTO
========================================================= */

.contacto-intro_ar01 {
max-width: 800px;
margin: 120px auto 80px;
padding: 0 20px;
text-align: center;
}

.contacto-intro_ar01 h1 {
font-size: 36px;
font-weight: 700;
margin-bottom: 16px;
position: relative;
display: inline-block;
}

.contacto-intro_ar01 h1::after {
content: "";
width: 80px;
height: 4px;
background: var(--color-principal);
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}

.contacto-intro_ar01 h3 {
font-size: 22px;
margin-top: 40px;
text-align: left;
}

.contacto-intro_ar01 p {
max-width: 650px;
margin: 10px 0 40px;
font-size: 16px;
text-align: left;
line-height: 1.5;
}


/* GRID PRINCIPAL */
.contacto-grid_ar01 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 30px;
}

/* FORMULARIO */
.contacto-form_ar01 {
display: flex;
flex-direction: column;
gap: 14px;
}

.contacto-form_ar01 input,
.contacto-form_ar01 textarea {
width: 100%;
padding: 14px 18px;
border: 1px solid #ddd;
border-radius: 10px;
background: #f9f9f9;
font-size: 15px;
}

.contacto-form_ar01 textarea {
height: 130px;
resize: none;
}

.contacto-check_ar01 {
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
text-align: left;
line-height: 18px;
}

.btn-contacto_ar01 {
width: 120px;
background: var(--color-principal);
padding: 12px 28px;
border-radius: 20px;
border: none;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
color: #6d5b0c;
}

/* PANEL DERECHO */
.contacto-info_ar01 {
display: flex;
flex-direction: column;
gap: 30px;
}

.contacto-mapa_ar01 {
background: url('../img/mapa.jpg') center/cover no-repeat;
border-radius: 20px;
padding: 25px;
height: 260px;             /* Ajusta seg�n tu dise�o */
position: relative;        /* Necesario para posicionar el bot�n */
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.mapa-icon_ar01 {
width: 140px;
height: 140px;
margin: 0 auto 20px;
background: url('../img/mapa.jpg') center/cover no-repeat;
border-radius: 12px;
}

.btn-mapa_ar01 {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: var(--color-principal);
padding: 10px 24px;
border-radius: 14px;
border: none;
font-weight: 600;
cursor: pointer;
color: #6d5b0c;
}

.contacto-datos_ar01 {
list-style: none;
text-align: left;
font-size: 15px;
line-height: 1.8;
}


/* RESPONSIVE */
@media (max-width: 800px) {
.contacto-grid_ar01 {
grid-template-columns: 1fr;
}
}
/* Alinear el checkbox y el texto */
.contacto-check_ar01 {
display: flex;
align-items: center;
gap: 8px;        /* espacio entre el check y el texto */
font-size: 14px;
cursor: pointer;
}

/* Ajustar el input para que no empuje el texto */
.contacto-check_ar01 input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
}

.contacto-datos_ar01 li {
display: flex;
align-items: center;
gap: 10px;
color: #383D3D;
font-size: 15px;
}

.contacto-datos_ar01 svg {
flex-shrink: 0;
}
.contacto-datos_ar01 li {
display: flex;
align-items: center;
gap: 10px;
}

/* Normaliza todos los �conos */
.contacto-datos_ar01 img {
width: 20px;
height: 20px;
display: block;
object-fit: contain;      /* mantiene proporci�n */
aspect-ratio: 1 / 1;      /* OBLIGA a todos a ser cuadrados */
}
/* =========================================================
VERSION MOBILE INICIO � CONSTRUCCIONES AL D�A
========================================================= */
@media (max-width: 600px) {

/* HEADER */
.header_ar01 {
padding-top: 0;
background: #111;
position: fixed;
height: 60px;
}

.header-container_ar01 {
width: 100%;
border-radius: 0;
justify-content: space-between;
padding: 0 16px;
}

/* HERO */
.hero_ar01 {
height: auto;
flex-direction: column;
}

.hero-left_ar01,
.hero-right_ar01 {
display: none; /* ocultamos el dise�o desktop */
}

.hero-overlay_ar01 {
position: relative;
transform: none;
left: 0;
top: 0;
padding: 30px 20px;
text-align: left;
}

.hero-overlay_ar01 h1 {
font-size: 30px;
max-width: 280px;
}

.hero-overlay_ar01 .btn-yellow_ar01 {
font-size: 14px;
padding: 10px 20px;
border-radius: 20px;
}

/* INTRO */
.intro_ar01 {
padding: 40px 20px;
font-size: 15px;
}

.intro_ar01 p {
line-height: 1.5;
}

/* TRAYECTORIA */
.trayectoria-grid_ar01 {
grid-template-columns: 1fr;
gap: 32px;
}

.caja-icono_ar01 {
width: 160px;
height: 180px;
}

.faja_ar01 {
width: 180px;
top: 68px;
font-size: 14px;
}

.numero_ar01 {
font-size: 26px;
}

}
/* ============================================
BOT�N HAMBURGUESA (MOBILE)
============================================ */
.menu-btn_ar01 {
width: 40px;
height: 40px;
background: url('../img/menu.svg') center/28px no-repeat;
cursor: pointer;
display: none;   /* se muestra solo en mobile */
/* sin z-index, ya hereda del header (30) */
}

.menu-btn_ar01.active {
background: url('../img/close.svg') center/28px no-repeat;
}
/* Mostrar hamburguesa SOLO en mobile */
@media (max-width: 600px) {
.menu-btn_ar01 {
display: block;
}

/* Ocultar men� desktop */
.nav_ar01 {
display: none;
}
}
/* ============================
MEN� LATERAL MOBILE
============================ */
.nav-mobile_ar01 {
position: fixed;
top: 0;
left: -260px;
width: 260px;
height: 100vh;
background: #111;
padding: 80px 20px;
transition: 0.3s ease;
z-index: 20;
}

.nav-mobile_ar01.active {
left: 0;
}

.nav-mobile_ar01 ul {
list-style: none;
padding: 0;
margin: 0;
}

.nav-mobile_ar01 ul li {
margin-bottom: 22px;
}

.nav-mobile_ar01 ul li a {
color: #fff;
font-size: 18px;
text-decoration: none;
}

/* Overlay para oscurecer fondo */
.overlay_ar01 {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: none;
z-index: 10;
}

.overlay_ar01.active {
display: block;
}
/* ============================
HERO MOBILE � IMAGEN COMPLETA
============================ */
@media (max-width: 600px) {

/* HERO correcto */
.hero_ar01 {
height: auto;                                      /* no fija altura */
background: url('../img/img1.jpg') center/cover no-repeat;
padding-top: 140px;                                /* espacio para header */
padding-bottom: 60px;
display: flex;
flex-direction: column;
justify-content: flex-end;                         /* baja el texto */
position: relative;
}

/* Evitar que la franja amarilla quede dentro del hero */
.hero_ar01::after {
display: none;                                     /* la ocultamos en mobile */
}

/* CONTENEDOR DEL TEXTO */
.hero-overlay_ar01 {
position: relative;
width: 100%;
padding: 0 20px;
display: flex;
flex-direction: column;                            /* organiza el texto */
justify-content: flex-end;
gap: 22px;                                         /* separa textos y bot�n */
}

.hero-overlay_ar01 h1 {
font-size: 30px;
line-height: 33px;
max-width: 300px;
color: #fff;
margin-bottom: 16px;
}

/* BOT�N ABAJO */
.hero-overlay_ar01 .btn-yellow_ar01 {
margin-top: 0;
align-self: flex-start;                            /* queda alineado a la izq */
padding: 12px 26px;
font-size: 15px;
border-radius: 20px;
}
}
@media (max-width: 600px) {

/* 2 columnas en mobile */
.trayectoria-grid_ar01 {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}

/* Ajustar tama�o de tarjetas para que quepan bien */
.caja-icono_ar01 {
width: 150px;
height: 170px;
}

.faja_ar01 {
width: 170px;
font-size: 13px;
top: 55px;
}

.numero_ar01 {
font-size: 24px;
margin-top: 16px;
}
.trayectoria_ar01 h2{
margin-bottom: 16px;
}
}
/* ===============================
CLIENTES � VERSI�N MOBILE
=============================== */
@media (max-width: 600px) {

.clientes-grid_ar01 {
grid-template-columns: repeat(2, 1fr);   /* 2 columnas */
gap: 24px;                                /* espacio entre tarjetas */
max-width: 350px;                         /* ancho contenido como referencia */
margin: 0 auto;
}

.cliente_ar01 {
width: 140px;      /* tama�o igual para todos */
height: 140px;
}

.cliente_ar01 img {
width: 90px;       /* logos m�s proporcionados */
height: auto;
object-fit: contain;
opacity: 0.9;
}

.titulo-clientes_ar01 {
margin-bottom: 40px;
}
}
/* ===============================
NOSOTROS � INTRO (MOBILE)
=============================== */
@media (max-width: 600px) {

.nosotros-intro_ar01 {
padding: 40px 20px;
text-align: left;
}

.nosotros-intro-container_ar01 h1 {
font-size: 32px;
margin-bottom: 16px;
}

.nosotros-intro-container_ar01 p {
font-size: 15px;
line-height: 1.55;
max-width: 100%;
}
}
/* ===============================
NOSOTROS � TIMELINE (MOBILE)
=============================== */
@media (max-width: 600px) {

.timeline_ar01 {
padding: 40px 0;
}

.timeline-container_ar01 h2 {
font-size: 22px;
padding: 0 20px;
text-align: center;
line-height: 1.3;
}

.timeline-bar_ar01 {
margin: 25px 0;
padding: 0 10px;
}

.timeline-years-wrapper_ar01 {
margin: 0 10px;
}

.year_ar01 {
font-size: 16px;
padding: 8px 16px;
}

.timeline-content-wrap_ar01 {
padding: 0 20px;
}

.timeline-title_ar01 {
font-size: 19px;
line-height: 1.35;
}

.timeline-text_ar01 {
font-size: 15px;
line-height: 1.55;
}

.timeline-btn_ar01 {
font-size: 20px;
}

}
/* ===============================
NOSOTROS � BASES (MOBILE)
=============================== */
@media (max-width: 600px) {

.bases_ar01 {
padding: 40px 0;
}

.bases-title_ar01 {
font-size: 22px;
padding: 0 20px;
text-align: center;
line-height: 1.3;
margin-bottom: 40px;
}

.bases-container_ar01 {
padding: 0 20px;
}

.base-item_ar01 {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
}

.base-item_ar01.reverse {
flex-direction: column;   /* elimina reversa en mobile */
}

.base-icon_ar01 img {
width: 100%;
max-width: 260px;
border-radius: 8px;
}

.base-content_ar01 p {
font-size: 15px;
line-height: 1.55;
}

.base-divider_ar01 {
height: 1px;
background: #eee;
margin: 30px 0;
}
}
/* ===============================
MARGEN SUPERIOR � NOSOTROS (MOBILE)
=============================== */
@media (max-width: 600px) {

.nosotros-intro_ar01 {
padding-top: 80px;   /* separa el t�tulo del header */
}

.nosotros-intro-container_ar01 h1 {
font-size: 34px;
text-align: center;
}
}
/* ===============================
TIMELINE MOBILE � FIX COMPLETO
=============================== */
@media (max-width: 600px) {

/* Reducimos el padding general */
.timeline_ar01 {
padding: 40px 0 20px;
}

/* T�tulo m�s compacto */
.timeline-container_ar01 h2 {
font-size: 20px;
margin-bottom: 20px;
}

/* Franja negra ajustada */
.timeline-bar_ar01 {
padding: 12px 0;
margin-bottom: 10px;
}

/* Los a�os m�s cerca entre s� */
.timeline-years_ar01 {
gap: 50px;                 /* antes 120�260px */
padding: 0 20px;
}

.year_ar01 {
font-size: 15px;
min-width: 70px;
}

/* ---------- C�RCULOS ----------- */
.year_ar01::before {
width: 16px;
height: 16px;
bottom: -22px;
}

.year_ar01::after {
width: 6px;
height: 6px;
bottom: -16px;
}

.year_ar01.active::before {
width: 22px;
height: 22px;
bottom: -25px;
}

.year_ar01.active::after {
width: 10px;
height: 10px;
bottom: -18px;
}

/* -------- L�NEA HORIZONTAL -------- */
.timeline-line_ar01 {
top: 145% !important; /* la acercamos a los c�rculos */
height: 2px !important;
}

/* -------- L�NEA VERTICAL -------- */
.vertical-line_ar01 {
top: 32px !important;
height: 45px !important;
}

/* -------- CONTENIDO DEL A�O -------- */
.timeline-content-wrap_ar01 {
margin-top: 55px;       /* queda justo debajo de la l�nea vertical */
gap: 20px;
}

.timeline-title_ar01 {
font-size: 18px;
}

.timeline-text_ar01 {
font-size: 15px;
line-height: 1.55;
}

/* -------- BOTONES DE NAVEGACI�N -------- */
.timeline-btn_ar01.under {
font-size: 30px;
}
}
/* Flechas debajo del contenido � MOBILE */
@media (max-width: 600px) {

.timeline-buttons-mobile_ar01 {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 25px;
margin-bottom: 40px;
}

.timeline-btn_ar01 {
font-size: 28px;
}
}

/* Desktop: mostramos layout horizontal */
.timeline-desktop_ar01 {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}

/* Mobile oculto por defecto */
.timeline-mobile_ar01 {
display: none;
}

/* MOBILE */
@media (max-width: 600px) {
.timeline-desktop_ar01 {
display: none;
}

.timeline-mobile_ar01 {
display: block;
text-align: center;
}

.timeline-buttons-mobile_ar01 {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 25px;
margin-bottom: 40px;
}
}
/* ================================
SERVICIOS - MOBILE (100% REAL)
================================ */
@media (max-width: 600px) {

.servicios-grid_ar01 {
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
padding: 0 20px;
align-items: center;
}

.servicio-item_ar01 {
width: 100%;
max-width: 320px;
}

/* Imagen de cada tarjeta */
.servicio-img_ar01 {
width: 100%;
height: 320px;             /*  Tama�o fijo EXACTO como tu maqueta */
background-size: cover;
background-position: center;
border-radius: 4px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

/* Overlay y texto */
.servicio-inner_ar01 {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 1.3;
}

/* Borde dorado del servicio activo */
.servicio-item_ar01.active .servicio-img_ar01 {
border: 3px solid var(--color-principal);
}
}
/* ===== FIX DEFINITIVO � FLECHAS PEGADAS A LOS LADOS ===== */

/* Quitar position:absolute que las estaba sacando de la barra */
.galeria-btn_ar01 {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}

/* Mantenerlas en los bordes */
.galeria-barra_ar01 {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 15px 20px !important;
}

/* Centro ocupa el espacio completo */
.galeria-info_ar01 {
flex: 1 !important;
text-align: center !important;
}
/* L�nea separadora naranja entre formulario y mapa (solo mobile) */
@media (max-width: 600px) {
.contacto-form_ar01::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: var(--color-principal); /* #FFCE00 */
margin: 30px 0 20px; /* espacio arriba y abajo */
border-radius: 2px;
}
}
/* ===== ANIMACI�N DE APARICI�N DE SECCIONES ===== */
.section-hidden_ar01 {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.9s ease-out, transform 0.9s ease-out;

}

/* ===== CASCADA ===== */
.section-visible_ar01 {
  opacity: 1;
  transform: translateY(0);
}
.section-delay-1 { transition-delay: 0.25s; }
.section-delay-2 { transition-delay: 0.50s; }
.section-delay-3 { transition-delay: 0.75s; }
.section-delay-4 { transition-delay: 1.00s; }
.section-delay-5 { transition-delay: 1.25s; }
/* ===== Animaci�n individual para los bloques internos de ventajas ===== */
.ventaja-bloque_ar01 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.ventaja-visible_ar01 {
    opacity: 1;
    transform: translateY(0);
}

/* Cascada interna */
.ventaja-delay-1 { transition-delay: 0.15s; }
.ventaja-delay-2 { transition-delay: 0.30s; }
.ventaja-delay-3 { transition-delay: 0.45s; }
.ventaja-delay-4 { transition-delay: 0.60s; }
/* ==== ANIMACIONES PARA SERVICIOS Y CIFRAS === */

.servicio-item_ar01,
.cifra-item_ar01 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.servicio-visible_ar01,
.cifra-visible_ar01 {
    opacity: 1;
    transform: translateY(0);
}

.s-delay-1 { transition-delay: 0.40s; }
.s-delay-2 { transition-delay: 0.80s; }
.s-delay-3 { transition-delay: 1.20s; }
.s-delay-4 { transition-delay: 1.60s; }
/* ==== ANIMACI�N PARA LAS BASES (MISI�N - VISI�N - VALORES) === */

.base-item_ar01 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.base-visible_ar01 {
    opacity: 1;
    transform: translateY(0);
}

/* Cascada cinematogr�fica extendida */
.base-delay-1 { transition-delay: 0.40s; }
.base-delay-2 { transition-delay: 0.80s; }
.base-delay-3 { transition-delay: 1.20s; }

/* ===============================
SUGERENCIAS BUSCADOR (m�x 5)
=============================== */
.portal-sugerencias_ar01{
  max-width: 700px;
  margin: 14px auto 0;
  padding: 0 20px;
}

.portal-sugerencia-item_ar01{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f3f3f3;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border-left: 4px solid var(--color-principal);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.portal-sugerencia-item_ar01:hover{
  background: #eaeaea;
  transform: translateX(4px);
}

.portal-sugerencia-icon_ar01{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: url('../img/archivo.png') center/100% no-repeat;
  flex-shrink: 0;
}

.portal-sugerencia-item_ar01 p{
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #767676;
  line-height: 1.25;
}

.portal-sugerencia-empty_ar01{
  color: #777;
  font-size: 14px;
  padding: 10px 2px 0;
}
.portal-sugerencias_ar01{
  position: relative;
  z-index: 5;
}
.portal-sugerencias_ar01{
  max-width: 700px;
  margin: 14px auto 0;
  padding: 0 20px;
}

.portal-sugerencia-item_ar01{
  display:block;
  background:#f3f3f3;
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
  border-left:4px solid #f2c400;
  text-decoration:none;
}

.portal-sugerencia-item_ar01 p{
  margin:0;
  font-size:13px;
  font-weight:500;
  color:#767676;
}
/* Mantener look al convertir a <a> */
.portal-item_ar01{
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* ===============================
ITEMS DE DESCARGA: icono + ellipsis + tooltip
=============================== */

/* Para sugerencias debajo del buscador */
.portal-sugerencia-item_ar01{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.portal-sugerencia-icon_ar01{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 38px;
  background: #fff;
  border: 2px solid #f2c400;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portal-sugerencia-icon_ar01{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 38px;
  background: url('../img/archivo.png') center/100% no-repeat;
  border: 2px solid #f2c400;
}

/* El icono real (usa tu SVG/PNG) */
.portal-sugerencia-icon_ar01 img{
  width: 22px;
  height: 22px;
  display: block;
}

/* Texto con "..." */
.portal-sugerencia-text_ar01{
  flex: 1;
  min-width: 0; /* CLAVE para que funcione ellipsis en flex */
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (Opcional) misma l�gica para las 4 tarjetas grandes */
.portal-item_ar01 p{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Placeholder */
input::placeholder,
textarea::placeholder {
  font-family: var(--fuente-base);
  font-weight: 300;
  color: #b1b1b1;
}

/* Bot�n */
.btn-contacto_ar01 {
  font-family: var(--fuente-base);
}
.logo_ar01 {

  width: 140px;
  height: 48px;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.logo_ar01 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (max-width: 600px) {
  .logo_ar01 {
    width: 110px;
    height: 36px;
  }
}
.footer-logo_ar01 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
/* ==========================
INTRO / PRELOADER (OPCI�N 1)
========================== */
.intro-screen_ar01{
  position: fixed;
  inset: 0;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 9999; /* por encima del header (z-index: 30) */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.intro-logo_ar01{
   width: clamp(160px, 22vw, 280px);
  height: auto;
  transform: scale(0.92);
  opacity: 0;
  animation: introLogoAnim_ar01 2.2s ease forwards;
}

@keyframes introLogoAnim_ar01{
  0%   { opacity: 0; transform: scale(0.92); }
  40%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* Bloquea scroll mientras est� la intro */
body.intro-lock_ar01{
  overflow: hidden;
}

/* Cuando termina: fade out del overlay */
.intro-screen_ar01.intro-hide_ar01{
  opacity: 0;
  visibility: hidden;
}

/* Accesibilidad: respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .intro-logo_ar01{
    animation: none;
    opacity: 1;
    transform: none;
  }
  .intro-screen_ar01{
    transition: none;
  }
}
.contacto-form_ar01 input,
.contacto-form_ar01 textarea {
  font-family: 'Poppins', sans-serif;
}
.contacto-check_ar01{
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
margin-top: 10px;
}


.contacto-check_ar01{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
margin-top:10px;
}

.contacto-check_ar01 span{
display:inline;
}

.contacto-check_ar01 a{
color:#057fdf;
text-decoration:underline;
font-weight:500;
white-space:nowrap;
}
.contacto-check_ar01 a{
color:#057fdf;
text-decoration:none;
}

.contacto-check_ar01 a:hover{
text-decoration:underline;
}