/* ============================================================
   PARAFERNALIA · LA AGENCIA
   Requiere base.css. Recorrido editorial en tarjetas con
   parallax suave. Títulos combinados: Helvética + Evenings.
   ============================================================ */

/* ---------- Título combinado (regla de marca) ---------- */
.titulo-mix{
  font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.7rem);
  line-height:1.12;
  color:var(--warm-red);
  letter-spacing:-.01em;
}
.titulo-mix .t2{
  color:var(--outer-space);
}

/* ---------- Hero ---------- */
.hero-agencia{
  max-width:1120px;margin:0 auto;
  padding:clamp(48px,9vh,110px) clamp(24px,5vw,64px) clamp(56px,10vh,120px);
}
.hero-agencia h1{
  font-weight:700;
  font-size:clamp(2.8rem,7vw,5.4rem);
  line-height:1.05;letter-spacing:-.015em;
  color:var(--warm-red);
  margin-bottom:clamp(28px,5vh,48px);
}
.hero-agencia .concepto{
  text-align:justify;
  hyphens:none;               /* texto de entrada: fluye, no se fuerza */
  font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.65rem);
  line-height:1.55;
  color:var(--outer-space);
  max-width:none;             /* corre hasta la guía derecha de la retícula */
}
.hero-agencia .concepto strong{font-weight:700}
.hero-agencia .concepto .frase{
  display:block;              /* rust: renglones 3 y 4, nunca junto al azul */
  font-weight:700;
  color:var(--rust);
}

/* ---------- Tarjetas ---------- */
.tarjeta{
  max-width:1120px;
  margin:0 auto clamp(56px,10vh,120px);
  padding:0 clamp(24px,5vw,64px);
  display:grid;
  grid-template-columns:minmax(240px,.9fr) 1.6fr;
  gap:clamp(24px,4vw,72px);
  align-items:start;
}
html.js .tarjeta:not(.vista){opacity:0;transform:translateY(46px)}
.tarjeta.vista{
  opacity:1;transform:translateY(0);
  transition:opacity .8s var(--ease-suave),transform .8s var(--ease-suave);
}
.tarjeta .titulo-mix{position:sticky;top:clamp(96px,14vh,140px)}
.tarjeta .cuerpo{
  text-align:justify;
  font-weight:400;
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  line-height:1.75;
  color:var(--outer-space);
}
.tarjeta .cuerpo p + p{margin-top:1.2em}
.tarjeta .subtitulo{
  font-weight:500;
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  line-height:1.35;
  color:var(--slate-gray);
  margin-bottom:.9em;
}
.tarjeta .cuerpo .bloque + .subtitulo,
.tarjeta .cuerpo p + .subtitulo{margin-top:2em}
.tarjeta .acento{
  font-weight:700;
  color:var(--rust);
}

/* ---------- Valores ---------- */
.valores{display:flex;flex-direction:column;gap:clamp(24px,4vh,40px)}
.valor h3{
  font-weight:700;
  font-size:clamp(1.15rem,1.7vw,1.4rem);
  color:var(--outer-space);
  margin-bottom:.45em;
}
.valor h3 .apunte{
  font-size:.85em;
  color:var(--rust);
  margin-left:.5em;
}

/* ---------- Qué Hacemos ---------- */
.servicios-lista{display:flex;flex-direction:column}
.servicio-item{
  display:block;
  padding:clamp(18px,3vh,26px) 0;
  border-bottom:1px solid rgba(3,16,97,.14);
}
.servicio-item:first-child{border-top:1px solid rgba(3,16,97,.14)}
.servicio-item h3{
  display:flex;align-items:center;gap:14px;
  font-weight:700;
  font-size:clamp(1.2rem,1.9vw,1.55rem);
  color:var(--outer-space);
  transition:color .3s var(--ease-suave);
}
.servicio-item h3 svg{
  flex:0 0 auto;
  transition:transform .35s var(--ease-suave);
}
.servicio-item p{
  text-align:justify;
  margin-top:.5em;
  font-weight:400;
  font-size:clamp(.95rem,1.2vw,1.05rem);
  line-height:1.65;
  color:var(--slate-gray);
  max-width:56ch;
}
.servicio-item:hover h3{color:var(--warm-red)}
.servicio-item:hover h3 svg{transform:translateX(5px)}

/* ---------- Proceso Creativo ---------- */
.proceso{
  text-align:left;
  font-weight:700;
  font-size:clamp(1.3rem,2.6vw,2.1rem);
  line-height:1.9;
  color:var(--outer-space);
  letter-spacing:-.01em;
}
.proceso .paso{white-space:nowrap}
.proceso .flecha-paso{
  color:var(--warm-red);
  padding:0 .35em;
  font-weight:400;
}

/* ---------- CTA final ---------- */
.cta-final{
  max-width:1120px;margin:0 auto;
  padding:clamp(40px,8vh,90px) clamp(24px,5vw,64px) clamp(88px,14vh,150px);
  text-align:center;
}
html.js .cta-final:not(.vista){opacity:0;transform:translateY(46px)}
.cta-final.vista{
  opacity:1;transform:translateY(0);
  transition:opacity .8s var(--ease-suave),transform .8s var(--ease-suave);
}
.cta-final .frase{
  text-align:center;
  font-weight:700;
  font-size:clamp(1.7rem,3.8vw,3rem);
  line-height:1.3;
  color:var(--slate-gray);
  max-width:22ch;
  margin:0 auto clamp(32px,5vh,48px);
}
.cta-final .btn-cotizar{
  color:var(--warm-red);
  border-color:var(--warm-red);
}
.cta-final .btn-cotizar:hover{
  background:var(--warm-red);
  color:var(--ivory);
}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .tarjeta{grid-template-columns:1fr;gap:20px}
  .tarjeta .titulo-mix{position:static}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .tarjeta,.cta-final{opacity:1;transform:none;transition:none}
  .servicio-item h3 svg{transition:none}
}

/* ---------- Servicios y FAQs (mismo sistema editorial) ---------- */
.hero-agencia h1 .h1-b{color:var(--outer-space)}
.hero-agencia .concepto.para-quien{margin-top:1.1em}
.hub-lista .servicio-item p{max-width:none}
.faqs-lista .faq{border-bottom:1px solid rgba(3,16,97,.14)}
.faqs-lista .faq:first-child{border-top:1px solid rgba(3,16,97,.14)}
.faqs-lista summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(18px,3vh,26px) 0;
  font-weight:700;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
  color:var(--outer-space);
  transition:color .3s var(--ease-suave);
}
.faqs-lista summary::-webkit-details-marker{display:none}
.faqs-lista summary::after{
  content:'+';
  font-weight:400;font-size:1.4em;line-height:1;
  color:var(--warm-red);
  transition:transform .35s var(--ease-suave);
}
.faqs-lista .faq[open] summary::after{transform:rotate(45deg)}
.faqs-lista summary:hover{color:var(--warm-red)}
.faqs-lista .faq p{
  text-align:justify;
  padding:0 0 clamp(18px,3vh,26px);
  max-width:62ch;
  color:var(--outer-space);
  line-height:1.75;
}

/* ---------- Contadores ---------- */
.contadores{
  max-width:1240px;margin:0 auto;
  padding:clamp(8px,2vh,20px) clamp(24px,5vw,64px) clamp(40px,7vh,72px);
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(20px,3vw,36px) clamp(14px,2vw,28px);
  text-align:center;
}
.contadores .dato .num{
  font-weight:700;
  font-size:clamp(1.9rem,3.6vw,3.2rem);
  line-height:1.05;letter-spacing:-.01em;
  color:var(--outer-space);
  font-variant-numeric:tabular-nums;
  display:block;
}
.contadores .dato .leyenda{
  display:block;margin-top:8px;
  font-weight:700;
  font-size:clamp(.68rem,.9vw,.8rem);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--warm-red);
}
@media (max-width:900px){.contadores{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.contadores{grid-template-columns:repeat(2,1fr)}}

/* ---------- Banda de marcas ---------- */
.banda-marcas{
  padding:clamp(40px,7vh,72px) 0;
  overflow:hidden;
  background:var(--outer-space); /* franja fija: logos blancos en PNG */
}
.banda-marcas h2{
  text-align:center;
  font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:var(--warm-red);
  margin-bottom:clamp(24px,4vh,40px);
}
.banda-marcas h2 .t2{color:var(--ivory)}
.cinta{
  display:flex;align-items:center;width:max-content;
  animation:cinta-scroll 32s linear infinite;
}
.cinta:hover{animation-play-state:paused}
.cinta img{
  width:auto;height:auto;
  max-width:clamp(110px,12vw,150px);
  max-height:clamp(52px,6vw,80px);
  object-fit:contain;
  margin:0 clamp(24px,3.5vw,52px);
  align-self:center;
  filter:brightness(0) invert(1); /* blanco garantizado sobre el azul, sin importar el color del PNG */
  opacity:.9;
  transition:opacity .3s;
}
.cinta img:hover{opacity:1}
@keyframes cinta-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .cinta{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}


/* ---------- Cotizar: lectura fluida y compacta ---------- */
.pagina-cotizar .hero-agencia h1{font-size:clamp(2.1rem,4.6vw,3.6rem)}
.pagina-cotizar .hero-agencia{padding-bottom:clamp(16px,2.5vh,28px)}
.pagina-cotizar .titulo-mix{font-size:clamp(1.25rem,2.1vw,1.7rem);margin-bottom:.5em}
.pagina-cotizar .tarjeta{padding-top:clamp(20px,3vh,32px);padding-bottom:clamp(20px,3vh,32px)}
.pagina-cotizar .cuerpo p + p{margin-top:.7em}
.pagina-cotizar .cuerpo .btn-cotizar{margin:4px 0 2px}


/* Cotizar: aire alrededor del calendario y icono de WhatsApp del tamaño de una mayúscula */
.pagina-cotizar .calendly-inline-widget{margin:clamp(24px,4vh,36px) 0 clamp(18px,3vh,28px)}
.wa-inline{display:inline-block;vertical-align:-0.12em;margin-left:2px}
.wa-inline svg{width:1.05em;height:1.05em;color:var(--warm-red);transition:transform .3s var(--ease-suave),color .3s}
.wa-inline:hover svg{transform:scale(1.15);color:var(--rust)}