:root{
  --bg-start:#f5f6f7;
  --bg-end:#ffffff;
  --blue:#0b67ff;
  --text:#0b0b0b;
  --muted:#6b6b6b;
  --height:72px;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(90deg,var(--bg-start),var(--bg-end));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Thin blue line across top */
.accent-line{
  height: 8px;
  background:var(--blue);
  width:100%;
}

/* Header wrapper */
.site-header{
  border-bottom:1px solid rgba(9,9,9,0.04);
  background: linear-gradient(90deg, #c0ccd0 0%, #fbfcff 100%);
}

/* Inner row: brand + menu button */
.header-inner{
  height:var(--height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 20px;
  max-width:1200px;
  margin:0 auto;
}

/* Branding */
.branding{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.brand-icon{
  height:55px;      /* keep consistent visual height */
  width:auto;       /* preserve original aspect ratio */
  max-width:none;
  display:block;
  object-fit:contain;
}
.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.brand-name{
  font-weight:700;
  font-size:18px;
  letter-spacing:0.2px;
}
.brand-sub{
  font-size:12px;
  color:var(--muted);
}

/* Menu button (always visible) */
.menu-btn{
  background:transparent;
  border:0;
  padding:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border-radius:6px;
}
.menu-btn:focus{
  outline:2px solid rgba(11,103,255,0.18);
  outline-offset:3px;
}
.hamburger{
  width:28px;
  height:28px;
  fill:none;
  stroke:rgba(59,59,59,0.85);
  stroke-width:1.5;
}

/* Navigation (hidden on small, visible on desktop) */
.nav{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px 12px 20px;
  overflow:hidden;
  transition:opacity 160ms ease, max-height 220ms ease;
  max-height:0;
  opacity:0;
}
.nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
  padding:8px 10px;
  border-radius:6px;
  font-weight:500;
}
.nav a:hover, .nav a:focus{
  color:var(--text);
  background:rgba(11,103,255,0.06);
}

/* Mobile: collapsed by default */
@media (max-width:900px){
  /* keep mobile stacking when open */
  .nav ul{
    flex-direction:column;
    gap:8px;
    padding-top:12px;
  }
}

.nav.open{
  max-height:600px; /* enough to contain menu */
  opacity:1;
}

/* Desktop: always visible as horizontal bar */
@media (min-width:901px){
  /* Keep hamburger visible on desktop as well; nav stays collapsed unless ".open" is set */
  .nav ul{
    justify-content:flex-end;
    gap:28px;
    padding:12px 0;
    flex-direction:row;
  }
  .header-inner{padding-right:24px}
  .menu-btn{display:inline-flex}
}

/* Accessible screen-reader only */
.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
  border:0;padding:0;margin:-1px;
}

.hero{
  display:flex;
  align-items:center;
  gap:28px;
  padding:80px 20px;
  background: 
    
    url('hero.png') no-repeat center center;
  background-size: cover;
  min-height:550px;
  /* ensure content can center vertically when column */
 
}
.hero-inner{
  max-width:820px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  padding-left:20vw;; /* espacio desde la izquierda */
}
.hero-pretitle{
   font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  color:var(--blue);
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:0.6px;
  font-size:14px;
  margin:0;
}
.hero-title{
  margin:0;
  font-size:45px;
  color:black;
  font-weight:800;
  line-height:1.05;
  
  
  font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
 

}
.cta-btn{
  display:inline-block;
  margin-top:6px;
  background:white;
  color:var(--blue);
  box-shadow: 0px 8px 16px rgba(74, 144, 226, 0.8);
  padding:12px 18px;
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
}

.cta-btn-2{
  display:inline-block;
  margin-top:0px;
  background:var(--blue);
  color: white;
  box-shadow: 0px 8px 16px rgba(74, 144, 226, 0.8);
  padding:12px 18px;
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
}

@media (max-width:820px){
  .hero{flex-direction:column; /* center vertically and horizontally on smaller screens */
    align-items:center;
    justify-content:center;
    padding:36px 18px;
    min-height:480px;
  }
  .hero{
    background-position: center bottom;
    background-size: cover;
  }
  .hero-inner{
    padding-left:12px; padding-right:12px; max-width:100%;
    align-items:center; /* center text horizontally */
    text-align:center;
  }
}

/* Experience image: full-width, responsive */
.experience{
  width:100%;
  display:block;
  background-color:#ffffff;
}
.experience-img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* Servicios Profesionales */
.services-wrap{
  display:flex;
  justify-content:center;
  background:white;
  padding:40px 20px;
}
.services-inner{
  max-width:900px;
  width:100%;
  text-align:center;
  margin:0 auto;
}
.services-title{
  font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  font-weight:700;
  font-size:28px;
  color:#3366CC;
  margin:0 0 30px 0;
}
.services-desc{
  font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  font-weight:600;
  font-size:18px;
  color:#333333;
  max-width:700px;
  margin:0 auto 50px auto;
  line-height:1.4;
}

.services-desc-2{
  font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  font-weight:600;
  font-size:18px;
  color:#333333;
  max-width:700px;
  margin:0 auto 15px auto;
  line-height:1.4;
}

/* Outer blue frame */
.services-frame{
  border:2px solid #3366CC;
  width:100%;
}

/* Grid: 4 columns x 2 rows on desktop */
.services-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(80px, auto);
}

/* Common cell rules */
.svc{
  padding:15px 10px;
  box-sizing:border-box;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  word-break:break-word;
}

/* Header cells */
.hdr{
  font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  font-weight:700;
  font-size:16px;
  color:#333333;
  border-top:10px solid white;
  border-left:10px solid white;
   border-right:10px solid white;
  
}
.hdr:not(:nth-child(4)){
  border-right:10px solid white;
  border-left:10px solid white;
}

/* Description cells */
.desc{
  font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  font-weight:400;
  font-size:14px;
  color:#666666;
  min-height:80px;
  border-bottom:10px solid white;
  border-left:10px solid white;
   border-right:10px solid white;
  
}
.desc:not(:nth-child(8)){
  border-right:10px solid white;
  border-left:10px solid white;
 
}

/* Background colors as specified */
.hdr-light{ background:#c0c3c6; }
.hdr-light2{ background:#d4e5ea; }
.hdr-sky{  background:#94d1e3; }
.hdr-mid{  background:#5da4b9; }

.desc-light{ background:#ecedee; }
.desc-light2{ background:#f6fafb; }
.desc-sky{   background:#eaf6f9; }
.desc-mid{   background:#dfedf1; }

/* Responsive behavior */
/* Tablet: 2 columns (pair header+desc stacked per column) */
@media (max-width:1024px){
  .services-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(60px, auto);
  }
  /* Reorder so each service is header then description in DOM visual order */
  .services-grid > .hdr:nth-child(1){ grid-row:1; grid-column:1; }
  .services-grid > .hdr:nth-child(2){ grid-row:1; grid-column:2; }
  .services-grid > .hdr:nth-child(3){ grid-row:3; grid-column:1; }
  .services-grid > .hdr:nth-child(4){ grid-row:3; grid-column:2; }

  .services-grid > .desc:nth-child(5){ grid-row:2; grid-column:1; }
  .services-grid > .desc:nth-child(6){ grid-row:2; grid-column:2; }
  .services-grid > .desc:nth-child(7){ grid-row:4; grid-column:1; }
  .services-grid > .desc:nth-child(8){ grid-row:4; grid-column:2; }

  /* Adjust borders to avoid double vertical borders when stacked */
  .hdr:not(:nth-child(2)){ border-right:10px solid white; border-left:10px solid white; }
  .desc:not(:nth-child(6)){ border-right:10px solid white; border-left:10px solid white; border-bottom:10px solid white;
                          
                          }
}

/* Mobile: 1 column, each service header above its description */
@media (max-width:767px){
  .services-inner{ padding:0 8px; }
  .services-grid{
    
    grid-auto-rows: auto;
  }

  /* Ensure each cell fills full width and stacks evenly */
  .services-grid > * { width:100%; }
  /* Use block layout for consistent heights (prevents uneven flex centering) */
  .svc { display:block; text-align:center; padding:12px 10px; box-sizing:border-box; }
  /* Keep header above description order but let DOM order drive layout */
  /* Ensure consistent min-heights so cells don't vary too much */
  .hdr, .desc { min-height:72px; }

  /* Remove right borders (no vertical separation) and keep horizontal separators */
  .hdr, .desc { border-right: none; }
  .hdr { border-bottom:1px solid white; }
  .desc { border-bottom: none; }

  /* Slightly smaller type for mobile */
  .hdr{ font-size:14px; }
  .desc{ font-size:12px; }
}

/* --- Estilos únicos para Aries --- */
.aries-financiera {
  font-family: Arial, Helvetica, sans-serif;
  padding: 30px 15px;
  text-align: center;
  color: #333;
}

.aries-contenedor {
    
    font-family: "Montserrat", "Noto Sans", system-ui, sans-serif;
  max-width: 700px;
  margin: 0 auto;
}

.aries-titulo {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.aries-texto {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.aries-barrita {
  width: 100%;
  max-width: 500px;
  height: 2px;
  background-color: #0046ff;
  margin: 20px auto;
}

.aries-texto2 {
  font-size: 18px;
  margin-bottom: 25px;
  line-height: 1.6;
}

.aries-web {
  font-size: 1.2rem;
  margin-bottom: 15px;
}

.aries-web strong {
  font-weight: bold;
  color: #000;
}

.aries-web span {
  color: #0046ff;
}

.aries-legales {
  font-size: 0.8rem;
  color: #555;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

.aries-legales-azul {
  display: block;
  color: #0046ff;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 3px; /* separa las letras */
  margin-bottom: 8px;
  text-transform: uppercase; /* asegura mayúsculas */
}

/* Responsivo */
@media (max-width: 600px) {
  .aries-titulo {
    font-size: 1rem;
  }
  .aries-texto, .aries-texto2 {
    font-size: 0.9rem;
  }
  .aries-web {
    font-size: 1rem;
  }
}

.aries-footer {
  background-color: #111; /* negro elegante */
  color: #fff;
  padding: 40px 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.aries-footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.aries-footer-logo img {
  max-width: 180px;
  height: auto;
}

.aries-footer-contacto {
  max-width: 300px;
}

.aries-contacto-titulo {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.aries-contacto-sub {
  font-size: 0.85rem;
  color: #bbb;
  margin-bottom: 4px;
}

.aries-contacto-texto {
  font-size: 0.9rem;
  margin-bottom: 15px;
  line-height: 1.5;
}

.aries-contacto-texto strong {
  color: #fff;
}

/* Responsivo */
@media (max-width: 768px) {
  .aries-footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .aries-footer-logo img {
    margin-bottom: 20px;
  }
}