/* ===========================
   Variables & Base
   =========================== */
:root{
  --brand:#b45f50;            /* cobre/rojo tierra */
  --brand-dark:#9c4e41;
  --ink:#1f1f23;
  --muted:#5f646d;
  --bg:#fffaf9;
  --card:#f2f2f2;
  --maxw:1160px;
  --radius:22px;

  --header-h: 200px;          /* altura inicial del header */
  --header-h-shrink: 90px;    /* altura del header al scrollear */
  --space: 22px;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:var(--bg);
  padding-top: none !important;
}

a{ color:inherit; text-decoration:none }

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--space);
}

/* Para que al navegar por anclas no tape el header */
section{ 
  padding:30px 0;
  scroll-margin-top: calc(var(--header-h-shrink) + 16px);
}

/* Reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===========================
   Header fijo + shrink
   =========================== */
header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  background:#fff;
  border-bottom:1px solid #e8e8e8;
  height: var(--header-h);
  transition: height .35s ease, box-shadow .35s ease;
}
header.shrink{
  height: var(--header-h-shrink);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* Barra interna: logo izq, menú centro, CTA der */
.bar{
  display:grid;
  grid-template-columns:220px 1fr 220px;
  align-items:center;
  height: 100%;
  min-height: 78px;
}

.brand{ display:flex; align-items:center; gap:.8rem }
.logo{ width:120px; height:62px; display:flex; align-items:center }
.logo img{ width:110px; height:auto; transition: width .35s ease }
.logo img.shrink{ width:40px }

/* Menú desktop */
nav#main-menu ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:46px;
  list-style:none;
  padding:0;
  margin:0;
}
nav#main-menu a{ font-weight:700 }

.cta-outline{
  justify-self:end;
  border:2px solid var(--brand);
  color:var(--brand);
  padding:.9rem 1.2rem;
  border-radius:10px;
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  font-weight:700;
}

/* Botón hamburguesa (oculto en desktop) */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
}
.hamburger span{
  width:25px;
  height:3px;
  background:#333;
  border-radius:2px;
}

/* ===========================
   HERO (pantalla completa real)
   =========================== */
.hero{
  position:relative;
  text-align:center;
  overflow:hidden;
  padding-top: 120px;
  padding-bottom: 60px;

  /* Puntitos de fondo */
  background-image: url('puntosHeroIzquierda.png'), url('puntosHeroDerecha.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: 50% auto, 50% auto;

  /* ocupar pantalla considerando el header reducido */
  min-height: calc(100vh);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.hero h1{
  font-size:clamp(2rem, 2.4rem + 1.6vw, 3.4rem);
  line-height:1.1;
  letter-spacing:.02em;
  color:var(--brand);
  text-transform:uppercase;
  margin:0 0 14px;
}
.hero p{
  font-size:clamp(1.05rem, .9rem + .6vw, 1.5rem);
  max-width:26ch;
  margin:0 auto;
}

/* Fondo móvil del hero */
@media (max-width: 700px) {
  .hero{
    background-image: url('puntosHeroIzquierda.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

/* ===========================
   ABOUT (parte 1)
   =========================== */
.about{
  background:transparent;
  max-height: 300px;
  min-height: 300px;
}
.about-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:26px;
  align-items:start;
}
.about-right h2{
  text-align:center;
  font-size: 35px;
}
.about-right p.muted{
  text-align:center;
  font-size: 20px;
  color:var(--muted);
}

/* Bubbles: ampliar contenedor para que no desborden */
.bubbles-left{ 
  position:relative; 
  width:460px; 
  height:260px; 
  overflow:visible;
}
.bubble{
  position:absolute;
  left:20px;
  opacity:0;
  transform: translateY(60px);
  transition:
    opacity .5s cubic-bezier(.4,1.7,.7,1.01),
    transform .5s cubic-bezier(.4,1.7,.7,1.01);
}
.bubble.visible{ opacity:1; transform:translateY(0) }
.bubble-lgXl{ width:110px; top:0px; left:100px }
.bubble-lg{   width:85px;  top:60px;  left:210px }
.bubble-md{   width:60px;  top:113px;  left:302px }
.bubble-sm{   width:35px;  top:158px; left:370px }
.bubble-smXl{ width:20px;  top:190px; left:420px }

/* ===========================
   QUIÉNES SOMOS (parte 2)
   =========================== */
.quienesSomosDos{
  padding-left: 12%;
  padding-right: 12%;
}
.quienesSomosDosHeader{
  place-items:center;
  align-items:center;
  text-align:center;
  margin-bottom:16px;
}
.panel{
  grid-column:1/-1;
  margin-top:-36px;
  background:#8f8f8f;
  color:#fff;
  border-radius:26px;
  padding:34px;
}
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.panel h3{ margin:0 0 10px; font-size:1.5rem }
.panel p{ margin:0; line-height:1.6 }
.panel .big{
  font-size:1.6rem;
  font-weight:600;
  max-width:16ch;
}
.about2-left{ justify-content:center; align-items:center }
.about2-right p{ font-size:1.2rem; line-height:1.6 }

/* ===========================
   SERVICIOS (cards)
   =========================== */
.services h2{
  color:#8C3F31;
  text-align:center;
  font-size:2rem;
  margin:0 0 10px;
}
.topP{
  color:#a14b3b;
  text-align:center;
  margin:0 auto 50px;
  font-size:1rem;
  max-width:80ch;
}

.cards{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
}
.cards-row{
  display:flex;
  gap:2rem;
  justify-content:center;
}

/* Carta */
.card{
  border:#1f1f23 1px solid;
  flex:1 1 0;
  min-width:250px;
  max-width:330px;
  min-height:240px;
  max-height:280px;
  background:var(--card);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  padding:1.5rem 1.2rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow .3s ease, transform .3s ease;
}
.card:hover{
  box-shadow:0 24px 64px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}

/* Icono + título */
.top-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.top-card .card-header{
  flex:1;
  display:flex;
  justify-content:center;
}
.top-card .icon{
  font-size:2.3em;
  margin-left:1em;
  display:flex;
  align-items:center;
}
.top-card h3{
  color:#a14b3b;
  margin:0;
  font-size:1.2rem;
  text-align:center;
}

/* Texto */
.bottom-card{ margin-top:1rem }
.card p.muted{
  text-align:center;
  font-size:.9rem;
  max-width:60ch;
  color:var(--muted);
}

/* Alinear la fila inferior al centro */
.cards-row.cards-row-bottom{ justify-content:center }

/* Responsive cards */
@media (max-width: 900px){
  .cards-row{
    flex-direction:column;
    align-items:center;
  }
  .card{
    max-width:100%;
    width:100%;
  }
}

/* ===========================
   CLIENTES
   =========================== */
.titulo-seccion{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin:40px 0;
}
.titulo-seccion h2{
  color:#a14b3b;
  font-weight:700;
  font-size:1.8rem;
  margin:0;
}
.linea{
  flex:1;
  height:4px;
  background-color:#888;
  border:none;
  border-radius:4px;
}
.izquierda{ max-width:45% }
.derecha{   max-width:45% }

.logos_fila {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.logoBox {
  flex: 0 1 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  min-height: 80px;
  max-width: 200px;
  max-height: 160px;
}
.logoBox img {
  width: 70%;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
}

/* ===========================
   CLIENTES responsive
   =========================== */

/* --- En pantallas chicas: 2 logos por fila --- */
@media (max-width: 600px) {
  .logos_fila {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 2rem;   /* separación entre logos */
    justify-items: center;
    align-items: center;
  }

  .logoBox {
    flex: none;
    width: 100%;
    max-width: 150px;   /* controla tamaño de logo */
  }

  .logoBox img {
    width: 80%;
    max-width: 100px;
  }
}

/* ===========================
   CONTACTO (form)
   =========================== */
form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
form .full{ grid-column:1/-1 }
label{ display:block; font-size:.95rem; margin:8px 0 6px }
input, textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid #ddd;
  font: inherit;
}
textarea{ min-height:130px }
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--brand);
  color:#fff;
  padding:.9rem 1.2rem;
  border:none;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

/* Mensaje accesible del form */
#form-msg.small{ color:var(--muted) }

/* ===========================
   FOOTER
   =========================== */
footer{
  background:#fff;
  border-top:1px solid #ededed;
  padding:28px 0 46px;
}
.foot{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.small{ color:var(--muted) }

/* ===========================
   Responsive global
   =========================== */
@media (max-width: 980px){
  .bar{ grid-template-columns:160px 1fr 160px }
  nav#main-menu ul{ gap:22px }
  .about-wrap{ grid-template-columns:1fr }
  .panel-grid{ grid-template-columns:1fr }
  form{ grid-template-columns:1fr }
  /* Ajustar offset del body en pantallas más chicas si querés */
}

/* Menú móvil */
@media (max-width: 768px){
  /* Layout header */
  header{
    height: 120px;
    align-items:center;
  }
  header.shrink{
    height: 90px;
  }
  .logo img{ width:70px }
  .logo img.shrink{ width:50px }
  .bar{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
  }
  .brand{ 
    flex:1; 
    display:flex; 
    align-items:center;
    max-width: 33%;
 }
  .cta-outline{ justify-content:center }

  /* Ocultar menú por defecto y mostrar hamburguesa */
  .hamburger{ display:flex; margin-left:auto }

  nav#main-menu{
    display:none;
    position:absolute;
    top:calc(var(--header-h-shrink));
    right:0;
    background:#fff;
    width:260px;
    border-left:1px solid #eee;
    border-bottom:1px solid #eee;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    border-bottom-left-radius:12px;
  }
  nav#main-menu.active{ display:block }
  nav#main-menu ul{
    flex-direction:column;
    padding:1rem;
    gap:1rem;
  }

  /* Hero respeta ancho */
  .hero{ padding-top:40px }

  /* Burbujas: reducir para móvil */
  .about-left{
    display: none;
  }
}

/* Más compacto en móviles pequeños */
@media (max-width: 480px){
  .titulo-seccion h2{ font-size:1.5rem }
  .topP{ font-size:.95rem }
}