/* ===================== Variables base ===================== */
:root{
  --brand-dark:#033840;   /* teal oscuro */
  --brand-accent:#44dfdf; /* turquesa */
  --ink:#022e47;          /* títulos */
  --radius-lg:20px;
  --radius-md:16px;
  --shadow-1:0 8px 20px rgba(0,0,0,.08);
  --shadow-2:0 10px 30px rgba(0,0,0,.12);
  --shadow-3:0 12px 28px rgba(0,0,0,.18);
}

.container{width:100%;max-width:1400px;margin-inline:auto;}
html .montserrat, body{font-family:'Montserrat',sans-serif;}

/* ===================== WE ARE / QUIÉNES SOMOS ===================== */
.weare{
  padding:6rem 1rem 3.5rem;
  background:#fff;
}
.weare .container{max-width:1100px;}
.weare-title{
  font-size:40px;font-weight:700;color:var(--ink);margin:0 0 .75rem;text-align: center;
}
.weare p{
  font-size:18px;color:#033840;line-height:1.75;text-align:justify;
}

/* ===================== BANNER SOBRE NOSOTROS ===================== */
.about-section-banner{
  --banner-bg: #6265fe;
  background:#6265fe;
  margin-top:4rem;
  padding:3.5rem 0 2.5rem;
}
.about-block{
  display:flex;align-items:center;justify-content:center;gap:4rem;
  margin-bottom:1rem;flex-wrap:wrap;
}
.about-image2{width:100%;max-width:400px;aspect-ratio:8/5;overflow:hidden;}
.about-image2 img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0 40px;}
.about-content-wide{max-width:540px;text-align:justify;}
.about-content-wide h3{font-size:25px;font-weight:900;color:#fff;margin-bottom:2rem;}
.about-content-wide p{font-size:18px;color:#fff;line-height:1.7;}

/* ===================== MARCAS / LOGOS ===================== */
.brands-section{
  padding:3.5rem 1rem 4rem;background:#6265fe;
}
.brands-section .container{max-width:1200px;}
.brands-title{
  text-align:center;font-size:40px;font-weight:700;color:white;margin-bottom:2rem;
}
.brands-grid{
  --min:150px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
  gap:1.25rem;align-items:center;
}
.brand-item{
  background:#fff;border-radius:16px;border:1px solid rgba(3,56,64,.08);
  box-shadow:var(--shadow-1);padding:1.25rem;display:grid;place-items:center;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.brand-item img{
  max-width:170px;width:100%;height:auto;object-fit:contain;
  transition:filter .2s ease, transform .2s ease;
}
.brand-item:hover{
  background: linear-gradient(
    to bottom,
    #6265fe 0%,
    #022e47 100%
  );
  box-shadow:var(--shadow-3);transform:translateY(-4px);
}
.brand-item:hover img{filter:brightness(0) invert(1);transform:scale(1.02);}

/* ===================== LÍNEA DE TIEMPO ===================== */
/* Sección */
.timeline-section { margin: 6rem 0 6rem; }
.timeline-title { margin-bottom: 1rem;text-align: center; font-size: 40px; font-weight: 700;}

/* Flechas */
.timeline-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px; /* espacio entre flechas y viewport */
}
/* Flechas externas */
.tl-nav {
  flex: 0 0 auto;
  width: 50px;        /* más ancho */
  height: 50px;       /* igual que ancho → círculo perfecto */
  border-radius: 50%; /* círculo */
  border: none;
  background: #6265fe;
  color: #fff;
  font-size: 38px;    /* flecha más grande */
  font-weight: bold;
  cursor: pointer;
  display: flex;      /* centra la flecha */
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform 0.2s, background 0.2s;
  line-height: 1;     /* evita que se vea “apretada” */
  padding: 0;         /* sin padding extra */
}
.tl-nav:hover {
  background: #9196f7;
  transform: scale(1.08);
}

/* Viewport desplazable */
.timeline-viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  border-radius: 16px;
}

/* Lienzo de 2800×700 (relación 4:1) */
.timeline-canvas {
  position: relative;
  width: 2800px;            /* ancho real del PNG */
  aspect-ratio: 4 / 1;
  background-size: cover;   /* la imagen llena el canvas */
  background-position: center left;
}

/* Puntos (años) */
.tl-point {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  min-width: 56px; min-height: 56px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #022e47;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: box-shadow .2s, background .2s, color .2s, transform .2s;
  box-shadow: 0 8px 18px rgba(2,46,247,.15);
}
.tl-point:hover { background: #6265fe; color: #fff; transform: translate(-50%, -52%) scale(1.03); }
.tl-year { pointer-events: none; }

/* Modal */
.tl-modal { position: fixed; inset: 0; z-index: 9999; }
.tl-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.tl-modal-card {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 520px);
  background: #fff;                 /* sólido para que se vea nítida */
  border-radius: 16px; padding: 20px;
  box-shadow: 0 14px 48px rgba(0,0,0,.25);
  z-index: 2;                        /* 🔹 por encima del backdrop */
}
.tl-close {
  position: absolute; top: 10px; right: 12px; border: 0;
  background: transparent; font-size: 28px; cursor: pointer;
}
.tl-modal-year { margin: 0 1.75rem 0.25rem; color: #022e47; }
.tl-modal-title { margin: 0 1.75rem .25rem; }
.tl-modal-desc { margin: 0 1.75rem .75rem; }
.tl-modal-img { display: none; width: 100%; border-radius: 12px; }
/* Scrollbar horizontal */
.timeline-viewport::-webkit-scrollbar {
  height: 10px; /* alto de la barra */
}

.timeline-viewport::-webkit-scrollbar-track {
  background: #e0e0e0; /* color del fondo */
  border-radius: 10px;
}

.timeline-viewport::-webkit-scrollbar-thumb {
  background: #6265fe; /* color de la barra */
  border-radius: 10px;
}

.timeline-viewport::-webkit-scrollbar-thumb:hover {
  background: #022ef7; /* color al pasar el mouse */
}

/* Responsivo básico */
@media (max-width: 900px) {
  .tl-point { min-width: 48px; min-height: 48px; font-size: 12px; }
}

/* ===================== HERO DESCARGA (si lo usas) ===================== */
.hero-descarga{
  position:relative;height:300px;background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:2rem;overflow:hidden;
}
.hero-descarga__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at top left, rgba(14,0,218,.4) 10%, transparent 40%),
    radial-gradient(circle at 30% 10%, rgba(68,223,223,.4) 10%, transparent 40%),
    radial-gradient(circle at 60% 10%, rgba(14,0,218,.4) 15%, transparent 40%),
    radial-gradient(circle at bottom right, rgba(68,223,223,.4) 10%, transparent 30%),
    radial-gradient(circle at center, rgba(14,0,218,.2) 30%, transparent 50%),
    radial-gradient(circle at 30% 80%, rgba(14,0,218,.3) 20%, transparent 30%),
    radial-gradient(circle at top right, rgba(0,1,1,.1) 15%, transparent 40%),
    radial-gradient(circle at 65% 80%, rgba(68,223,223,.3) 10%, transparent 32%),
    radial-gradient(circle at bottom left, rgba(0,1,1,.1) 20%, transparent 40%),
    rgba(4,38,43,.2);
  z-index:1;
}
.hero-descarga__content{position:relative;z-index:2;max-width:800px;}
.hero-descarga__content h2{font-size:2rem;font-weight:400;line-height:1.4;color:#fff;}
.hero-descarga__content h2 span{font-weight:700;color:#fff;}
.btn-descarga{
  display:inline-block;margin-top:1.5rem;padding:.8rem 1.6rem;background:#fff;color:#222;font-weight:500;
  border-radius:8px;text-decoration:none;box-shadow:0 4px 6px rgba(0,0,0,.1);transition:all .3s ease;
}
.btn-descarga:hover{background:#f0f0f0;color:#000;}

/* ===================== Utilidades de listas estilo "about" (si las usas) ===================== */
.triple-block{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;max-width:1150px;margin:0 auto;
}
.about-box{
  flex:1 1 48%;max-width:650px;padding:2rem;border-radius:var(--radius-lg);color:#fff;
}
.about-box.dark{background-color:var(--brand-dark);}
.about-box.light{background-color:#2dc5c6;color:#fff;}
.about-box h3{
  font-size:30px;margin-bottom:1rem;color:#fff;font-weight:700;text-align:center;
}
.checklist li{
  background-color:rgba(255,255,255,.4);padding:.8rem 1rem;border-radius:10px;margin:.8rem 1rem;list-style:none;line-height:18px;
}
.checklist-icons li{background-color:transparent;padding:.4rem 1rem;border-radius:10px;list-style:none;display:flex;align-items:center;gap:1rem;}
.brand-item a {
  font-size: 1.2rem;
  font-weight: 600;
  color: #033840; /* azul institucional */
  text-decoration: none;
}

.brand-item a:hover {
  color: white; /* azul más intenso al hover */
  text-decoration: underline;
}

/* =========================================================
   HOME — TABLET (<= 1024px)
   ========================================================= */
@media (max-width: 1024px) {
  .weare { padding: 4.5rem 1rem 3rem; }
  .weare .container { max-width: 900px; }
  .weare-title { font-size: 34px; }
  .weare p { font-size: 17px; }

  .about-section-banner { margin-top: 3rem; padding: 3rem 0 2rem; }
  .about-block { gap: 2.5rem; }
  .about-image2 { max-width: 360px; }
  .about-content-wide { max-width: 500px; }
  .about-content-wide h3 { font-size: 22px; margin-bottom: 1.25rem; }
  .about-content-wide p { font-size: 16.5px; }

  .brands-section { padding: 3rem 1rem 3.25rem; }
  .brands-section .container { max-width: 1000px; }
  .brands-title { font-size: 34px; margin-bottom: 1.5rem; }
  .brands-grid { --min: 140px; gap: 1rem; }
  .brand-item { border-radius: 14px; padding: 1rem; }
  .brand-item img { max-width: 150px; }

  .timeline-section { margin: 4.5rem 0 4.5rem; }
  .timeline-title { font-size: 34px; }
  .tl-nav { width: 44px; height: 44px; font-size: 32px; }
  .timeline-viewport { border-radius: 12px; }
  /* canvas más corto para tablet (menos scroll) */
  .timeline-canvas { width: 2000px; }

  .tl-point { min-width: 48px; min-height: 48px; font-size: 12px; box-shadow: 0 6px 14px rgba(2,46,247,.14); }

  .hero-descarga { height: 260px; padding: 1.5rem; }
  .hero-descarga__content { max-width: 680px; }
  .hero-descarga__content h2 { font-size: 1.6rem; }

  .triple-block { gap: 1.5rem; max-width: 1000px; }
  .about-box { padding: 1.5rem; }
  .about-box h3 { font-size: 26px; }
  .checklist li { margin: .6rem .75rem; }
  .checklist-icons li { gap: .75rem; }
}

/* =========================================================
   HOME — MOBILE / iPhone (<= 767px)
   ========================================================= */
@media (max-width: 767.98px) {
  .container { max-width: 100%; }
  .weare { padding: 3rem 1rem 2.25rem; }
  .weare .container { max-width: 640px; }
  .weare-title { font-size: 28px; margin-bottom: .5rem; }
  .weare p { font-size: 16px; line-height: 1.7; text-align: left; }

  .about-section-banner { margin-top: 2.25rem; padding: 2.25rem 0.5rem 1.75rem; }
  .about-block { gap: 1.5rem; flex-direction: column; align-items: center; }
  .about-image2 { max-width: 100%; width: 100%; aspect-ratio: 16/9; }
  .about-image2 img { border-radius: 0 24px; }
  .about-content-wide { max-width: 100%; padding: 0 1rem; text-align: left; }
  .about-content-wide h3 { font-size: 20px; margin-bottom: .75rem; }
  .about-content-wide p { font-size: 15.5px; line-height: 1.65; }

  .brands-section { padding: 2.25rem 1rem 2.5rem; }
  .brands-section .container { max-width: 640px; }
  .brands-title { font-size: 28px; margin-bottom: 1rem; }
  .brands-grid { --min: 140px; gap: .9rem; }
  .brand-item { padding: .9rem; border-radius: 12px; }
  .brand-item img { max-width: 140px; }

  .timeline-section { margin: 3.25rem 0 3.25rem; }
  .timeline-title { font-size: 28px; margin-bottom: .5rem; }
  .timeline-wrapper { gap: 8px; }
  .tl-nav { width: 40px; height: 40px; font-size: 28px; }
  .timeline-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* canvas aún más corto en móvil */
  .timeline-canvas {
    width: 1400px;         /* reduce el recorrido */
    background-position: center left;
  }
  .tl-point {
    min-width: 42px; min-height: 42px; font-size: 12px;
    box-shadow: 0 5px 12px rgba(2,46,247,.12);
  }

  .tl-modal-card {
    width: min(94vw, 480px);
    border-radius: 14px; padding: 16px;
  }
  .tl-modal-year { margin: 0 1rem .15rem; }
  .tl-modal-title { margin: 0 1rem .15rem; }
  .tl-modal-desc { margin: 0 1rem .5rem; }

  .hero-descarga { height: 240px; padding: 1.25rem; }
  .hero-descarga__content { max-width: 520px; padding: 0 .25rem; }
  .hero-descarga__content h2 { font-size: 1.35rem; line-height: 1.45; }
  .btn-descarga { margin-top: 1rem; padding: .7rem 1.2rem; font-size: .95rem; }

  .triple-block { gap: 1rem; max-width: 640px; padding: 0 .75rem; }
  .about-box { flex: 1 1 100%; max-width: 100%; padding: 1.25rem; border-radius: 16px; }
  .about-box h3 { font-size: 22px; }
  .checklist li { margin: .5rem .5rem; padding: .7rem .85rem; }
  .checklist-icons li { gap: .6rem; }
  .brand-item a { font-size: 1rem; }
}

/* =========================================================
   HOME — EXTRA COMPACT (<= 360px)
   ========================================================= */
@media (max-width: 360px) {
  .weare { padding: 2.25rem .75rem 1.75rem; }
  .weare-title { font-size: 24px; }
  .weare p { font-size: 15px; }

  .about-section-banner { padding: 2rem 0 1.5rem; }
  .about-image2 { aspect-ratio: 4/3; }
  .about-content-wide h3 { font-size: 18px; }
  .about-content-wide p { font-size: 15px; }

  .brands-grid { --min: 130px; }
  .brand-item img { max-width: 120px; }

  .timeline-title { font-size: 24px; }
  .tl-nav { width: 36px; height: 36px; font-size: 24px; }
  .timeline-canvas { width: 1200px; }
  .tl-point { min-width: 38px; min-height: 38px; font-size: 11px; }

  .hero-descarga { height: 220px; }
  .hero-descarga__content h2 { font-size: 1.15rem; }
  .btn-descarga { padding: .6rem 1rem; font-size: .9rem; }
}

/* =========================================================
   HOME — SCROLLBARS y ACCESIBILIDAD
   ========================================================= */
/* Scroll horizontal suave en iOS/Android para la timeline */
.timeline-viewport { scrollbar-width: thin; }
.timeline-viewport::-webkit-scrollbar { height: 8px; }
.timeline-viewport::-webkit-scrollbar-track { background: #e6e6f5; border-radius: 8px; }
.timeline-viewport::-webkit-scrollbar-thumb { background: #6265fe; border-radius: 8px; }
.timeline-viewport::-webkit-scrollbar-thumb:hover { background: #4f55fa; }

/* Reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .brand-item,
  .brand-item img {
    transition: none !important;
  }
  .brand-item:hover { transform: none !important; box-shadow: var(--shadow-1); }
  .tl-nav { transition: none !important; }
  .tl-point { transition: none !important; }
}