/* ======================
   Fuentes
   ====================== */
@font-face{ /* 45 Light */
  font-family: 'HN-Com-45Light';
  src: url('../Fonts/HelveticaNeueLTCom-Lt.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{ /* 55 Roman */
  font-family: 'HN-Com-55Roman';
  src: url('../Fonts/HelveticaNeueLTCom-Roman.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{ /* 95 Black */
  font-family: 'HN-Com-95Black';
  src: url('../Fonts/HelveticaNeueLTCom-Blk.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face{ /* 85 Heavy (Std) */
  font-family: 'HN-Std-85Heavy';
  src: url('../Fonts/HelveticaNeueLTStd-Hv_1.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ======================
   Variables / base
   ====================== */
:root{
  --magenta:#e51377;
  --amarillo:#ffe000;
  --durazno:#eda358;
  --grisBorde:#dedede;

  --container:1200px;
  --padX:24px;

  /* Marker (barra magenta) */
  --barW:260px;
  --barH:28px;
  --barRadius:3px;
  --barPadY:0px;
  --barOffsetY:-8px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'HN-Com-55Roman', Arial, sans-serif;
  color:#000;
  overflow-x:hidden;
  background:#fff; /* limpio, sin SVG */
}

/* ======================
   Sidebar / Menú + Social
   ====================== */
.sidebar{
  position:fixed; left:18px; top:22px;
  display:flex; flex-direction:column; gap:18px;
  z-index:1000;
}
.social{display:flex; gap:1rem}
.social a{
  width:34px; height:34px;
  border:1px solid var(--grisBorde);
  border-radius:50%; display:grid; place-items:center;
  text-decoration:none; color:#c8cbca; font-size:1.5rem;
  transition:color .3s;
}
.social a:hover{ color:var(--magenta); }

.hamburger{
  width:40px; height:28px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
  margin:8px 0 6px 6px; padding:3px 2px;
}
.hamburger span{height:3px; background:#b1b1b1; border-radius:2px; transition:.25s}
.sidebar.open .hamburger span:nth-child(1){transform:translateY(12px) rotate(45deg)}
.sidebar.open .hamburger span:nth-child(2){opacity:0}
.sidebar.open .hamburger span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}

nav.menu{
  position:relative;
  margin-top:10px;
  border-left:1px dashed var(--grisBorde);
  padding-left:12px; min-width:240px;
  transform:translateX(-8px);
  opacity:0; pointer-events:none;
  transition:transform .35s ease, opacity .35s ease;
}
.sidebar.open nav.menu{transform:translateX(0); opacity:1; pointer-events:auto}

/* Marker */
.menu .marker{
  position:absolute; left:-12px; top:0;
  width:var(--barW); height:var(--barH);
  background:var(--magenta); color:var(--amarillo);
  border-radius:var(--barRadius);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.2px;
  padding:var(--barPadY) 20px; z-index:2;
  transition:top .28s ease;
}
.menu .marker .notch{
  position:absolute; right:-10px; top:calc(50% - 10px);
  width:0; height:0;
  border-left:10px solid var(--amarillo);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

.menu a{
  display:block; margin:26px 0; z-index:1;
  color:#b5b5b5; text-decoration:none; font-size:20px; line-height:1;
  transition:color .2s;
}
.menu a:hover{color:#000}
.menu a.active{color:transparent; pointer-events:none}

/* ======================
   HOME
   ====================== */
header#home{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
}

/* ======================
   ¿QUIÉNES SOMOS?
   ====================== */
section#quienes{
  position:relative; min-height:100vh;
  display:grid; align-items:center;
  padding:clamp(40px, 6vw, 80px) var(--padX);
}
.quienes-wrap{
  max-width:var(--container); width:100%;
  margin:0 auto;
  display:grid; gap:32px;
  grid-template-columns:1fr minmax(320px, 560px);
}
.quienes-col{grid-column:2; color:#fff}
.quienes-kicker{
  font-family:'HN-Com-45Light'; font-weight:300;
  font-size:clamp(22px, 2.2vw, 28px);
  color:#FFEE34; margin:0 0 10px;
}
.quienes-title{
  font-family:'HN-Std-85Heavy'; font-weight:900;
  font-size:clamp(48px, 8vw, 110px);
  line-height:.95; letter-spacing:-.5px;
  color:#fff; margin:0 0 16px;
}
.quienes-p{
  font-family:'HN-Com-55Roman'; font-weight:400;
  font-size:clamp(16px, 1.45vw, 18px);
  line-height:1.8; color:#fff; margin:0 0 14px;
}
.quienes-emph{
  font-family:'HN-Com-55Roman'; font-weight:400;
  font-size:clamp(16px, 1.45vw, 18px);
  line-height:1.8; color:#FFEE34; margin:18px 0 0;
}

/* ======================
   ¿QUÉ HACEMOS?
   ====================== */
section#quehacemos{
  position:relative; min-height:100vh;
  display:grid; align-items:center;
  padding:clamp(40px, 6vw, 80px) var(--padX);
  margin-top:0;               /* ya no calzamos imagen */
}
.qh-wrap{max-width:var(--container); width:100%; margin:0 auto}
.qh-kicker{
  font-family:'HN-Com-45Light'; font-weight:300;
  font-size:clamp(22px, 2vw, 28px);
  color:#6a6a6a; margin:0 0 12px;
}
.qh-title{
  font-family:'HN-Com-95Black'; font-weight:900;
  font-size:clamp(48px, 7vw, 96px);
  line-height:1.05; color:#111; margin:0 0 24px;
}
.qh-num3{display:inline-block; line-height:0; vertical-align:baseline}
.qh-num3 img{height:0.9em; width:auto; vertical-align:-0.06em}

.qh-text{
  font-family:'HN-Com-55Roman'; font-weight:400;
  font-size:clamp(16px, 1.5vw, 18px);
  line-height:1.7; color:#333; max-width:640px;
  text-align:left;
}
.qh-text strong{font-family:'HN-Std-85Heavy'; font-weight:900; color:#000}
.qh-highlight{background:var(--magenta); color:#fff; padding:2px 4px; border-radius:2px}

.qh-logos{display:flex; gap:32px; margin-top:36px; flex-wrap:wrap}
.qh-logos {
  display: flex;                /* fuerza horizontal */
  justify-content: center;      /* centra en horizontal */
  align-items: center;          /* centra en vertical */
  gap: 24px;                    /* espacio entre ellos */
  flex-wrap: wrap;              /* permite saltar de línea si no caben */
  margin-top: 32px;
}

/* Corrección layout desktop: todo a la izquierda */
#quehacemos .qh-wrap{
  display:grid;
  grid-template-columns:minmax(320px, 520px) 1fr;
  column-gap:40px; align-items:start;
}
#quehacemos .qh-wrap > *{ grid-column:1; }
#quehacemos .qh-title{
  font-size:clamp(40px, 5.6vw, 88px);
  line-height:.95; letter-spacing:-0.5px;
  margin:0 0 18px; max-width:520px;
}
#quehacemos .qh-text{ max-width:520px; }
#quehacemos .qh-logos{ max-width:520px; gap:28px; margin-top:32px; }
#quehacemos .qh-num3 img{ height:.9em; vertical-align:-.06em; }

/* =======================
   SECCIÓN: Nuestra experiencia
   ======================= */
section#experiencia{
  position:relative; min-height:100vh;
  display:grid; align-items:center;
  padding:clamp(40px, 6vw, 80px) var(--padX);
}
.xp-wrap{
  max-width:var(--container); width:100%; margin:0 auto;
  display:grid; grid-template-columns:minmax(320px, 480px) 1fr;
  column-gap:36px; align-items:start;
}
.xp-title{
  font-family:'HN-Com-95Black', Arial, sans-serif;
  font-weight:900; color:#111;
  line-height:.98; letter-spacing:-0.3px;
  margin:0; font-size:clamp(30px, 4.6vw, 72px);
  max-width:480px;
}
.xp-logos{
  display:grid; grid-template-columns:repeat(4, minmax(120px, 1fr));
  gap:clamp(12px, 1.6vw, 22px);
  align-content:start; margin-top:8px; list-style:none; padding:0;
}
.xp-logos .bubble{
  aspect-ratio:1/1; border-radius:999px; background:rgba(255,255,255,.9);
  display:grid; place-items:center;
  box-shadow:0 6px 14px rgba(0,0,0,.075), inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;
}
.xp-logos .bubble img{ max-width:64%; height:auto; display:block; filter:saturate(1); }

/* Animaciones de entrada */
.reveal-up{opacity:0; transform:translateY(24px); transition:transform .7s cubic-bezier(.2,.65,.2,1), opacity .7s ease;}
.reveal-up.in{opacity:1; transform:none;}
.pop-in{opacity:0; transform:scale(.8); transition:transform .5s cubic-bezier(.2,.65,.2,1), opacity .5s ease;}
.pop-in.in{opacity:1; transform:none;}
.xp-logos .bubble:nth-child(1){transition-delay:.05s}
.xp-logos .bubble:nth-child(2){transition-delay:.10s}
.xp-logos .bubble:nth-child(3){transition-delay:.15s}
.xp-logos .bubble:nth-child(4){transition-delay:.20s}
.xp-logos .bubble:nth-child(5){transition-delay:.25s}
.xp-logos .bubble:nth-child(6){transition-delay:.30s}
.xp-logos .bubble:nth-child(7){transition-delay:.35s}
.xp-logos .bubble:nth-child(8){transition-delay:.40s}
.xp-logos .bubble:nth-child(9){transition-delay:.45s}
.xp-logos .bubble:nth-child(10){transition-delay:.50s}
.xp-logos .bubble:nth-child(11){transition-delay:.55s}
.xp-logos .bubble:nth-child(12){transition-delay:.60s}

/* =======================
   SECCIÓN: Contáctanos
   ======================= */
section#contacto{
  position:relative; min-height:100vh;
  display:grid; align-items:center;
  padding:clamp(40px, 6vw, 80px) var(--padX);
}
.contact-wrap{
  max-width:var(--container); width:100%; margin:0 auto;
  display:grid; grid-template-columns:1fr minmax(520px, 720px);
  column-gap:56px; align-items:start;
}
.contact-head{ grid-column:2; }
.contact-kicker{
  font-family:'HN-Com-45Light'; font-weight:300; color:#9b9b9b;
  margin:0 0 8px; font-size:clamp(18px, 1.6vw, 22px);
}
.contact-title{
  font-family:'HN-Com-95Black'; font-weight:900; color:#111;
  line-height:.96; letter-spacing:-0.5px; margin:0 0 22px;
  font-size:clamp(42px, 6.6vw, 86px);
}
.form-card{ grid-column:2; background:transparent; max-width:620px; }
.form-field{ margin:14px 0; }
.form-field label{
  display:inline-block; font-family:'HN-Com-55Roman'; font-size:14px;
  color:#888; margin:0 0 6px 8px;
}
.form-input,.form-textarea{
  width:100%; border:2px solid #dcdcdc; border-radius:22px; background:#fff;
  padding:12px 16px; font-family:'HN-Com-55Roman'; font-size:16px; color:#555;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus,.form-textarea:focus{ border-color:#c9c9c9; box-shadow:0 0 0 3px rgba(0,0,0,.03); }
.form-textarea{ border-radius:16px; min-height:168px; resize:vertical; }
.form-actions{ display:flex; justify-content:flex-end; }
.btn-enviar{
  display:inline-block; padding:12px 26px; background:var(--magenta); color:var(--amarillo);
  font-family:'HN-Std-85Heavy'; font-weight:900; border:none; border-radius:18px; cursor:pointer;
  box-shadow:0 6px 14px rgba(229,19,119,.24); transition:transform .05s ease, filter .2s ease;
}
.btn-enviar:active{ transform:translateY(1px); }
.btn-enviar:hover{ filter:brightness(1.02); }

/* =======================
   Footer
   ======================= */
.site-footer{ background:transparent; padding:14px var(--padX) 20px; }
.footer-center{ display:flex; justify-content:center; margin-bottom:10px; }
.footer-center img{ height:34px; width:auto; display:block; }

.phones-row{
  max-width:var(--container);
  margin:0 auto 10px;
  display:grid;

  /* ANTES: grid-template-columns: 1fr 1fr auto;  */
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); /* simétrico */

  align-items:center;
  column-gap:56px;
  row-gap:10px;
  font-family:'HN-Com-55Roman';
  color:#9a9a9a;
  font-size:14px;

  justify-items:stretch; /* no centramos todas las celdas */
}

.phone{ display:flex; align-items:center; gap:8px; }
.phone .ico{ opacity:.8; }

/* Colocación precisa */
.phones-row .phone:first-child{ justify-self:start; text-align:left; }
.phones-row .phone:nth-of-type(2){ justify-self:center; text-align:center; }
.phones-row .city{ justify-self:end; text-align:right; }

/* Línea y legal ya estaban OK */
.footer-sep{
  height:1px; background:#e1e1e1;
  width:100%; max-width:var(--container);
  margin:8px auto 10px;
}
.footer-legal{
  text-align:center;
  font-family:'HN-Com-55Roman';
  color:#b0b0b0; font-size:13px;
}

/* Móvil / tablet: pila en una columna y todo alineado a la izquierda */
@media (max-width: 900px){
  .phones-row{
    grid-template-columns:1fr;
    row-gap:8px;
    justify-items:flex-start; /* todo a la izquierda */
  }
  .phones-row .phone:nth-of-type(2),
  .phones-row .city{
    justify-self:flex-start;
    text-align:left;
  }
}

/* ======================
   Accesibilidad
   ====================== */
@media (prefers-reduced-motion: reduce){
  .reveal-up, .pop-in, .menu .marker{ transition:none !important; }
}

/* ======================
   Responsivo (≤ 900px: móvil y tablet)
   ====================== */
@media (max-width: 900px){

  /* Sidebar más compacta */
  .sidebar{ left:14px; top:16px; gap:14px; }
  .social a{ width:30px; height:30px; font-size:1.25rem; }

  nav.menu{ min-width:200px; }

  /* Home */
  header#home{ min-height:70vh; }

  /* ¿Quiénes somos? -> 1 columna */
  .quienes-wrap{
    grid-template-columns:1fr;
  }
  .quienes-col{ grid-column:auto; }

  /* ¿Qué hacemos? */
  #quehacemos .qh-wrap{
    grid-template-columns:1fr;
  }
  #quehacemos .qh-wrap > *{ grid-column:auto; }
  .qh-logos img{ height:72px; }

  /* Experiencia */
  .xp-wrap{
    grid-template-columns:1fr;
  }
  .xp-logos{ grid-template-columns:repeat(3, minmax(90px,1fr)); }
  .xp-logos .bubble{ box-shadow:0 4px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5); }

  /* Contacto */
  .contact-wrap{
    grid-template-columns:1fr;
    column-gap:0;
  }
  .contact-head, .form-card{ grid-column:auto; }
  .form-actions{ justify-content:stretch; }
  .btn-enviar{ width:100%; }

  /* Footer */
  .phones-row{
    grid-template-columns:1fr;
    justify-items:flex-start;
  }
  .city{ justify-self:flex-start; text-align:left; }
}

/* ======================
   Salvaguardas desktop (alineaciones)
   ====================== */
@media (min-width:901px){
  #quienes .quienes-title,
  #quienes .quienes-p,
  #quienes .quienes-emph,
  #quehacemos .qh-title,
  #quehacemos .qh-text,
  #experiencia .xp-title{
    text-align:left !important;
  }
  #quehacemos .qh-title,
  #quehacemos .qh-text,
  #quehacemos .qh-logos{
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
    width:auto !important;
    max-width:none !important;
    box-sizing:content-box !important;
    margin-inline:0 !important;
  }
  #quehacemos .qh-logos{ justify-content:flex-start !important;        max-width: 150px !important; }
}



@media (max-width: 900px){
  /* ... lo demás igual ... */

  /* Footer: TODO centrado en una sola columna */
  .phones-row{
    grid-template-columns: 1fr;   /* una columna */
    row-gap: 10px;
    justify-items: center;        /* centra las celdas */
    text-align: center;           /* centra el texto dentro */
  }

  .phones-row .phone:first-child,
  .phones-row .phone:nth-of-type(2),
  .phones-row .city{
    justify-self: center;         /* asegúrate de que no hereden 'start' */
    text-align: center;
  }

  .footer-sep{
    width: 100%;
    max-width: var(--container);
    margin: 8px auto 10px;        /* línea centrada bajo la fila */
  }
}
/* ======================
   Logos ATL / BTL / DIGITAL (versión corregida)
   ====================== */
.qh-logos{
  display:flex;
  justify-content:center;   /* centrados horizontal */
  align-items:center;
  gap:18px;                 /* menos espacio entre ellos */
  margin-top:20px;
  flex-wrap:nowrap;         /* nunca se apilan */
}

.qh-logos .qh-item{
  font-family:'HN-Com-95Black', Arial, sans-serif;
  font-weight:900;
  font-size:18px;           /* tamaño fijo pequeño */
  line-height:1;
  text-align:center;
  color:rgba(0,0,0,0.25);
  position:relative;
  min-width:60px;           /* ancho mínimo parejo */
}

/* Línea diagonal */
.qh-logos .qh-item::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:50%;
  height:2px;
  background:#fff;
  transform:rotate(-12deg);
  opacity:.6;
}

/* DIGITAL en magenta */
.qh-logos .qh-item.digital{
  color:var(--magenta);
}
/* ===================================================

/* ===================================================
   FONDO CONTINUO — agencia.webp
   =================================================== */

/* La imagen cubre toda la página */
body {
  background: url("../images/agencia.webp") no-repeat center top;
  background-size: 100% auto;
  background-attachment: scroll;
  background-color: #fff;
}

/* Secciones transparentes para dejar ver el fondo continuo */
header#home,
section#quienes,
section#quehacemos,
section#experiencia,
section#contacto {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Desactivar posibles capas previas */
section#quienes::before,
section#quehacemos::before,
section#experiencia::before,
section#contacto::before {
  display: none !important;
}

/* Ajuste para móviles */
@media (max-width: 900px) {
  body {
    background-size: cover;
    background-attachment: scroll;
  }
}
/* ===========================
   Ajuste responsive <1500px
   =========================== */
/* De 1080px hasta 1500px */
@media (min-width: 1080px) and (max-width: 1500px) {
  .quienes-col {
    margin-top: -50%;
  }
}

/* Menor a 1080px */
@media (max-width: 1079px) {
    .quienes-col {
        margin-top: -40%;
        padding-bottom: 25%;
        padding-left: 24%;
        margin-left: 11%;
    }
}