/* =====================================================================
   A+PARTNERS ARCHITECTS — Sistema de diseño v2 (rediseño septiembre 2026)
   =====================================================================
   Pedido del dueño: mucho más blanco/claro, más fotografía, más
   animaciones (referencias: Fran Silvestre Arquitectos, Foster + Partners,
   Tatiana Bilbao). Colores de marca se mantienen: negro, rojo, blanco, gris.
   Un detalle patrio muy sutil (línea verde-blanco-rojo) para septiembre,
   fácil de quitar después: buscar "TOQUE PATRIO" en este archivo.
   ===================================================================== */

@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-Variable.ttf') format('truetype-variations'),
      url('../fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight:500; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight:600; font-display:swap;
}

:root{
  --negro:#111111;
  --carbon:#232323;
  --rojo:#BC1721;
  --rojo-oscuro:#8F111A;
  --gris:#5C5C5C;
  --gris-claro:#9A9A9A;
  --linea:#EBEBEB;
  --blanco:#FFFFFF;
  --hueso:#FAFAFA;

  /* TOQUE PATRIO — septiembre: acento verde, muy contenido, solo de apoyo */
  --patrio-verde:#0B6E4F;

  --fuente-display:'Montserrat','Segoe UI',Arial,sans-serif;
  --fuente-mono:'Plex Mono','Courier New',monospace;

  --radio:2px;
  --contenedor:1240px;
  --ease:cubic-bezier(.22,.68,0,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--fuente-display); color:var(--negro);
  background:var(--blanco); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}

.contenedor{max-width:var(--contenedor); margin:0 auto; padding:0 32px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--rojo); outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ===================== TOQUE PATRIO — franja septiembre ===================== */
.franja-patria{
  height:5px; width:100%;
  background:linear-gradient(90deg, var(--patrio-verde) 0 33.3%, var(--blanco) 33.3% 66.6%, var(--rojo) 66.6% 100%);
}
.aviso-patrio{
  background:var(--negro); color:var(--blanco); text-align:center;
  font-family:var(--fuente-mono); font-size:.74rem; letter-spacing:.05em;
  padding:8px 16px;
}
.aviso-patrio strong{color:#7FD8B5;}

/* ===================== EYEBROW ===================== */
.eyebrow{
  font-family:var(--fuente-mono); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rojo); display:inline-flex; align-items:center; gap:.5em;
}
.eyebrow::before{content:"+"; font-weight:700;}
.eyebrow.sobre-oscuro{color:#FF7A72;}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:500;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.site-header .barra{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; max-width:var(--contenedor); margin:0 auto; gap:18px;
}
.marca{display:flex; align-items:center; gap:10px;}
.marca img{height:40px; width:auto;}
.marca .txt{font-family:var(--fuente-mono); font-size:.64rem; letter-spacing:.08em; color:var(--gris); display:none; line-height:1.3;}
.nav-principal{display:flex; align-items:center; gap:2px;}
.nav-principal a{
  font-size:.85rem; font-weight:600; padding:10px 15px; border-radius:var(--radio);
  color:var(--negro); position:relative;
}
.nav-principal a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px;
  background:var(--rojo); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-principal a:hover::after, .nav-principal a.activo::after{transform:scaleX(1);}
.nav-principal a.activo{color:var(--rojo);}

.header-derecha{display:flex; align-items:center; gap:10px;}

.selector-idioma{
  display:flex; align-items:center; font-family:var(--fuente-mono); font-size:.72rem; font-weight:600;
  border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
}
.selector-idioma button{
  background:none; border:none; padding:8px 12px; color:var(--gris-claro); transition:color .15s ease, background .15s ease;
}
.selector-idioma button.activo{color:var(--blanco); background:var(--negro);}
.selector-idioma button:not(.activo):hover{color:var(--negro);}

.btn-empleados{
  font-family:var(--fuente-mono); font-size:.7rem; font-weight:600; letter-spacing:.05em;
  color:var(--blanco) !important; background:var(--negro);
  padding:10px 16px; border-radius:var(--radio); display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--negro); transition:background .2s ease, border-color .2s ease;
}
.btn-empleados:hover{background:var(--rojo); border-color:var(--rojo);}
.btn-empleados svg{width:13px; height:13px; flex-shrink:0;}

.btn-menu-movil{
  display:none; background:none; border:none; width:36px; height:36px; padding:0;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.btn-menu-movil span{width:22px; height:2px; background:var(--negro); display:block; transition:transform .2s ease, opacity .2s ease;}

.nav-movil{
  display:none; flex-direction:column; background:var(--blanco); border-bottom:1px solid var(--linea);
  padding:8px 32px 20px;
}
.nav-movil.abierto{display:flex;}
.nav-movil a{padding:14px 0; font-weight:600; border-bottom:1px solid var(--linea); font-size:.95rem;}
.nav-movil a:last-child{border-bottom:none;}

/* ===================== BOTONES ===================== */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-size:.85rem; font-weight:700;
  padding:15px 28px; border-radius:var(--radio); border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-3px);}
.btn-primario{background:var(--rojo); color:var(--blanco);}
.btn-primario:hover{background:var(--rojo-oscuro); color:var(--blanco);}
.btn-oscuro{background:var(--negro); color:var(--blanco);}
.btn-oscuro:hover{background:var(--carbon); color:var(--blanco);}
.btn-linea{background:transparent; color:var(--negro); border-color:var(--negro);}
.btn-linea:hover{background:var(--negro); color:var(--blanco);}
.btn-linea.sobre-oscuro{color:var(--blanco); border-color:rgba(255,255,255,.5);}
.btn-linea.sobre-oscuro:hover{background:var(--blanco); color:var(--negro);}

/* ===================== HERO — grande, blanco, foto a pantalla completa ===================== */
.hero{
  position:relative; overflow:hidden; min-height:92vh; display:flex; align-items:flex-end;
  background:var(--blanco);
}
.hero-fondo{
  position:absolute; inset:0; z-index:0;
}
.hero-fondo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08);
  animation:heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-fondo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(17,17,17,.15) 55%, rgba(17,17,17,.72) 100%);
}
.hero-contenido{position:relative; z-index:1; padding:64px 0 68px; color:var(--blanco); width:100%;}
.hero .eyebrow{margin-bottom:20px; color:#FF9992;}
.hero h1{
  font-size:clamp(2.3rem, 5.4vw, 4.4rem); line-height:1.04; margin-bottom:24px; max-width:820px;
  opacity:0; transform:translateY(24px); animation:subeDesvanece .9s var(--ease) .25s forwards;
}
.hero h1 em{font-style:normal; color:#FF8078;}
.hero p.lead{
  font-size:1.15rem; color:#EDEDED; max-width:560px; margin-bottom:36px;
  opacity:0; transform:translateY(24px); animation:subeDesvanece .9s var(--ease) .45s forwards;
}
.hero .acciones{
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(24px); animation:subeDesvanece .9s var(--ease) .65s forwards;
}
@keyframes subeDesvanece{ to{ opacity:1; transform:none; } }

.hero-scroll{
  position:absolute; right:32px; bottom:28px; z-index:1; color:var(--blanco);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--fuente-mono); font-size:.64rem; letter-spacing:.14em;
}
.hero-scroll .barra-scroll{width:1px; height:38px; background:rgba(255,255,255,.4); position:relative; overflow:hidden;}
.hero-scroll .barra-scroll::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--blanco);
  animation:scrollBarra 1.8s ease-in-out infinite;
}
@keyframes scrollBarra{ 50%{ top:0; } 100%{ top:100%; } }

/* ===================== SECCIONES ===================== */
.seccion{padding:120px 0;}
.seccion.claro{background:var(--hueso);}
.seccion.oscura{background:var(--negro); color:var(--blanco);}
.seccion-cabecera{max-width:680px; margin-bottom:64px;}
.seccion-cabecera.centrada{margin-left:auto; margin-right:auto; text-align:center;}
.seccion-cabecera h2{font-size:clamp(1.9rem, 3.4vw, 2.8rem); margin-top:18px;}
.seccion-cabecera p{color:var(--gris); margin-top:18px; font-size:1.05rem;}
.oscura .seccion-cabecera p{color:#C9C9C9;}

/* ===================== SCROLL REVEAL ===================== */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.visto{opacity:1; transform:none;}
.reveal-fila > *{opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-fila.visto > *{opacity:1; transform:none;}
.reveal-fila.visto > *:nth-child(1){transition-delay:.05s;}
.reveal-fila.visto > *:nth-child(2){transition-delay:.15s;}
.reveal-fila.visto > *:nth-child(3){transition-delay:.25s;}
.reveal-fila.visto > *:nth-child(4){transition-delay:.35s;}
.reveal-fila.visto > *:nth-child(5){transition-delay:.45s;}
.reveal-fila.visto > *:nth-child(6){transition-delay:.55s;}
.reveal-fila.visto > *:nth-child(7){transition-delay:.65s;}
.reveal-fila.visto > *:nth-child(8){transition-delay:.75s;}
.reveal-fila.visto > *:nth-child(9){transition-delay:.85s;}
.reveal-fila.visto > *:nth-child(10){transition-delay:.95s;}

/* ===================== SERVICIOS (grid con foto y numero grande) ===================== */
.grid-servicios{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--linea); border:1px solid var(--linea);}
.servicio-card{background:var(--blanco); padding:44px 34px; position:relative; transition:background .25s ease, transform .25s ease;}
.servicio-card:hover{background:var(--hueso); transform:translateY(-4px);}
.servicio-card .idx{font-family:var(--fuente-mono); font-size:2rem; font-weight:700; color:var(--linea); transition:color .25s ease;}
.servicio-card:hover .idx{color:var(--rojo);}
.servicio-card h3{font-size:1.15rem; margin:18px 0 12px;}
.servicio-card p{color:var(--gris); font-size:.92rem;}

/* ===================== GALERIA DE IMAGENES (estilo Fran Silvestre: foto grande, poco texto) ===================== */
.galeria-grande{display:grid; grid-template-columns:1.4fr 1fr; gap:22px;}
.galeria-grande .foto-principal{grid-row:span 2; position:relative; overflow:hidden; border-radius:var(--radio);}
.foto-marco{position:relative; overflow:hidden; border-radius:var(--radio); background:var(--linea);}
.foto-marco img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.foto-marco:hover img{transform:scale(1.06);}
.foto-marco .etiqueta{
  position:absolute; left:18px; bottom:18px; color:var(--blanco);
  font-family:var(--fuente-mono); font-size:.72rem; letter-spacing:.06em;
  background:rgba(17,17,17,.55); padding:8px 14px; border-radius:var(--radio); backdrop-filter:blur(4px);
}

/* ===================== MOSAICO DE PROYECTOS ===================== */
.grid-proyectos{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.proyecto-card{position:relative;}
.proyecto-foto{aspect-ratio:4/5; overflow:hidden; border-radius:var(--radio); position:relative; background:var(--linea);}
.proyecto-foto img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.proyecto-card:hover .proyecto-foto img{transform:scale(1.07);}
.proyecto-info{padding:18px 2px 0;}
.proyecto-info .tag{font-family:var(--fuente-mono); font-size:.66rem; color:var(--rojo); letter-spacing:.08em;}
.proyecto-info h3{font-size:1.05rem; margin-top:8px;}
.proyecto-info p{color:var(--gris); font-size:.86rem; margin-top:4px;}

/* ===================== POR QUE ELEGIRNOS / VALORES ===================== */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.grid-valores{display:grid; grid-template-columns:1fr; gap:1px; background:var(--linea); border:1px solid var(--linea);}
.valor-card{background:var(--blanco); padding:30px 32px; display:flex; gap:20px; align-items:flex-start;}
.valor-card .cruz-icono{color:var(--rojo); font-family:var(--fuente-mono); font-size:1.5rem; font-weight:700; line-height:1;}
.valor-card h4{font-size:1.05rem; margin-bottom:8px;}
.valor-card p{color:var(--gris); font-size:.9rem;}

/* ===================== CONTADORES ANIMADOS ===================== */
.contadores{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center;}
.contador .num{font-family:var(--fuente-mono); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:700; color:var(--negro);}
.contador .lbl{font-family:var(--fuente-mono); font-size:.72rem; color:var(--gris); letter-spacing:.06em; margin-top:8px; text-transform:uppercase;}

/* ===================== FRANJA MEXICANA (marca + orgullo, discreta) ===================== */
.franja-mexico{
  display:flex; align-items:center; gap:14px; padding:22px 0; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
}
.franja-mexico .bandera-mini{display:flex; width:26px; height:18px; border-radius:1px; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px var(--linea);}
.franja-mexico .bandera-mini span{flex:1;}
.franja-mexico .bandera-mini span:nth-child(1){background:var(--patrio-verde);}
.franja-mexico .bandera-mini span:nth-child(2){background:var(--blanco);}
.franja-mexico .bandera-mini span:nth-child(3){background:var(--rojo);}
.franja-mexico p{font-size:.92rem; color:var(--gris);}
.franja-mexico strong{color:var(--negro);}

/* ===================== PRACTICAS / ESTUDIANTES ===================== */
.tarjeta-practicas{
  background:var(--negro); color:var(--blanco); border-radius:4px; padding:56px; position:relative; overflow:hidden;
}
.tarjeta-practicas::before{
  content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(188,23,33,.35), transparent 70%);
}
.tarjeta-practicas h2{position:relative; font-size:clamp(1.7rem,3vw,2.3rem); max-width:600px;}
.tarjeta-practicas p{position:relative; color:#C9C9C9; margin-top:16px; max-width:560px; font-size:1rem;}
.lista-practicas{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:32px;}
.lista-practicas li{font-size:.92rem; color:#E4E4E4; display:flex; gap:10px; align-items:flex-start;}
.lista-practicas li::before{content:"+"; color:var(--rojo); font-weight:700;}

/* ===================== CTA FINAL ===================== */
.cta-final{background:var(--negro); color:var(--blanco); padding:110px 0; text-align:center; position:relative; overflow:hidden;}
.cta-final h2{font-size:clamp(1.9rem,3.8vw,2.8rem); max-width:680px; margin:18px auto 36px;}
.cta-final .acciones{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--blanco); color:var(--gris); padding:72px 0 0; border-top:1px solid var(--linea);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px;}
.footer-marca img{height:38px; margin-bottom:16px;}
.footer-marca p{font-size:.86rem; color:var(--gris-claro); max-width:260px;}
.footer-col h5{font-family:var(--fuente-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-claro); margin-bottom:18px; font-weight:600;}
.footer-col ul li{margin-bottom:11px;}
.footer-col a{font-size:.88rem; color:var(--gris); transition:color .15s ease;}
.footer-col a:hover{color:var(--rojo);}
.footer-col.empleados-col{background:#FBEDEE; border:1px solid #F3CFD1; border-radius:var(--radio); padding:22px; align-self:start;}
.footer-col.empleados-col h5{color:var(--rojo);}
.footer-col.empleados-col p{font-size:.82rem; color:var(--gris); margin-bottom:16px;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding:22px 0; font-family:var(--fuente-mono); font-size:.7rem; color:var(--gris-claro); border-top:1px solid var(--linea);
}
.footer-social{display:flex; gap:14px;}
.footer-social a:hover{color:var(--rojo);}

/* ===================== FORMULARIO CONTACTO ===================== */
.form-contacto{display:grid; gap:20px; max-width:560px;}
.campo{display:flex; flex-direction:column; gap:8px;}
.campo label{font-family:var(--fuente-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris);}
.campo input, .campo select, .campo textarea{
  font-family:var(--fuente-display); font-size:.96rem; padding:14px 15px;
  border:1px solid var(--linea); background:var(--blanco); border-radius:var(--radio); color:var(--negro);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{border-color:var(--rojo);}
.campo-error{font-family:var(--fuente-mono); font-size:.74rem; color:var(--rojo); min-height:1.2em;}
.campo-fila{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.info-contacto{display:flex; flex-direction:column; gap:28px;}
.info-item .eyebrow{margin-bottom:8px;}
.info-item p, .info-item a{font-size:1rem; color:var(--negro);}
.mapa-placeholder{
  aspect-ratio:16/10; background:var(--hueso); border:1px solid var(--linea);
  display:flex; align-items:center; justify-content:center; font-family:var(--fuente-mono); font-size:.76rem; color:var(--gris); text-align:center; padding:20px;
}
.aviso-placeholder{
  border:1px dashed var(--gris-claro); background:var(--hueso); padding:20px 24px;
  font-family:var(--fuente-mono); font-size:.78rem; color:var(--gris); border-radius:var(--radio); margin-top:36px;
}
.aviso-placeholder strong{color:var(--negro);}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .nav-principal, .marca .txt{display:none;}
  .btn-menu-movil{display:flex;}
  .grid-servicios, .grid-proyectos{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr; gap:36px;}
  .galeria-grande{grid-template-columns:1fr;}
  .galeria-grande .foto-principal{grid-row:auto;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .campo-fila{grid-template-columns:1fr;}
  .contadores{grid-template-columns:1fr; gap:24px;}
  .lista-practicas{grid-template-columns:1fr;}
  .tarjeta-practicas{padding:38px 28px;}
}
@media (max-width: 560px){
  .grid-servicios, .grid-proyectos{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .seccion{padding:80px 0;}
  .hero{min-height:82vh;}
}