/* ==========================================================
   Barber Host · Página guiada y menos cargada
   Mismo contenido y mismas animaciones: solo más aire, bloques más compactos,
   pistas "siguiente paso" entre secciones y un llamado a contratar en cada pantalla.
   Se carga al final: pisa lo anterior sin tocar los otros archivos.
   ========================================================== */

/* ---------- Ritmo general: menos espacio muerto entre bloques ---------- */
section{padding-block:clamp(48px,7vw,88px)}
.statement{padding-block:clamp(36px,5vw,64px)}
.story{padding-block:clamp(40px,6vw,72px)}
.sec-head{margin-bottom:clamp(24px,3.5vw,40px)}
.sec-head h2{margin-top:10px}
.page-head{padding-block:clamp(28px,4vw,44px) 4px}
.page-head + section,.page-head + .phrase + section{padding-top:clamp(32px,4.5vw,56px)}
.chips{margin-block:18px 14px}

/* ---------- Inicio: "Qué es" en filas compactas (icono al costado) ---------- */
.pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillar{min-height:0;padding:20px 22px;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;align-content:start}
.pillar svg{width:30px;height:30px;margin-top:2px}
.pillar h3{font-size:clamp(18px,1.6vw,22px);margin-bottom:4px}
.pillar p{font-size:14px;max-width:none}
@media (max-width:900px){.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .pillar h3{font-size:17px}
  .pillar p{font-size:13px}
}

/* ---------- Inicio: "El problema" más corto ---------- */
.big3{font-size:clamp(26px,3.8vw,52px)}
.after{font-size:clamp(19px,2vw,28px);margin-top:20px}
.flows{margin-top:32px}
.flow{grid-template-columns:130px minmax(0,1fr);padding-block:14px;gap:16px}
.flow h4{font-size:18px}
.steps span{padding:8px 11px}
.value{margin-top:32px;gap:16px}
@media (max-width:700px){.flow{grid-template-columns:1fr;gap:10px}}
@media (max-width:560px){
  .big3{font-size:clamp(24px,7.2vw,32px)}
  .flows{margin-top:24px}
  .value{margin-top:22px}
}

/* ---------- Servicios: tarjetas con icono al costado ---------- */
.services{gap:12px}
.svc{padding:18px 20px;gap:4px 16px;grid-template-columns:auto minmax(0,1fr);align-items:start;align-content:start}
.svc .ic{grid-row:1/3;width:40px;height:40px}
.svc .ic svg{width:19px;height:19px}
.svc h3{font-size:19px;align-self:end}
.svc p{font-size:14px;grid-column:2}
.custom{margin-top:12px;padding:clamp(22px,3vw,34px);gap:18px 32px}
.custom::after{display:none}
@media (max-width:560px){.svc{padding-top:16px}.custom h3{font-size:28px}}

/* ---------- Por qué + energía: lista y tarjetas más livianas ---------- */
.why .claim{font-size:clamp(28px,4vw,56px)}
.know{margin-top:24px;padding-top:14px;gap:2px}
.know li{font-size:clamp(18px,2.2vw,30px)}
.know li.closing{font-size:clamp(18px,2vw,26px);margin-top:10px}
.sci div{padding:16px 18px 18px 0;gap:6px}
.sci h3{font-size:19px;gap:10px}
.sci h3::before{width:14px}
.sci p{font-size:14px;max-width:none}
.spark{margin-top:36px}
.spark span{font-size:clamp(26px,4.2vw,56px)}
.bolt{width:38px;height:38px;margin-top:12px}
@media (max-width:560px){
  .sci div{padding:14px 0 16px}
  .know li{font-size:clamp(18px,5.4vw,22px)}
  .spark span{font-size:clamp(24px,7.4vw,32px)}
}

/* ---------- Experiencia ---------- */
.exp .photos>*{aspect-ratio:1/1}
.exp .photos>:first-child{aspect-ratio:16/10}
.tl li{padding-bottom:24px}
.tl h3{font-size:clamp(22px,2.4vw,32px);margin-block:8px 4px}
.tl p{font-size:15px}
.decade{margin-top:0;padding:20px;gap:18px}
@media (max-width:560px){
  .tl li{padding-bottom:20px}
  .tl h3{font-size:22px}
  .decade{padding:16px}
}

/* ---------- Eventos: en celu, los 3 flyers se deslizan de costado ---------- */
.ev .body{padding:16px 18px 18px;gap:8px}
.ev h3{font-size:clamp(22px,2.2vw,28px)}
.ev p{font-size:14px}
.sub-head{margin-block:clamp(36px,5vw,56px) 16px}
@media (max-width:620px){
  .ev-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ev-grid::-webkit-scrollbar{display:none}
  .ev{flex:0 0 76%;scroll-snap-align:start}
  .ev .ev-img{aspect-ratio:4/4.6}
}

/* ---------- Contratar ---------- */
.path{min-height:0;padding:22px;gap:10px}
.path h3{font-size:clamp(24px,2.2vw,32px)}
.final .inner{padding-block:clamp(64px,9vw,112px) clamp(36px,5vw,56px)}
.final h2{font-size:clamp(36px,5.6vw,80px)}
@media (max-width:560px){.final .inner{padding-block:72px 44px}.final h2{font-size:clamp(34px,10.5vw,46px)}}

/* ---------- Bloque "siguiente sección": más chico, mismo hover ---------- */
.next{padding-block:clamp(28px,4vw,48px)}
.next .wrap{gap:8px}
.next b{font-size:clamp(28px,5vw,64px)}
@media (max-width:560px){.next{padding-block:28px}.next b{font-size:clamp(28px,8.4vw,40px)}}

/* ---------- Guía: pista "seguí por acá" entre secciones ---------- */
.hint-row{padding-block:clamp(4px,1.5vw,14px) clamp(8px,2vw,20px)}
.hint-row.inline{padding-block:clamp(28px,4vw,40px) 0}
.hint{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);padding:8px 0}
.hint::before{content:"";width:34px;height:1px;background:var(--gold);transition:width .45s var(--ease)}
.hint .lbl{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hint b{font:400 clamp(18px,2vw,24px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;transition:color .3s}
.hint i{font-style:normal;color:var(--yellow);display:inline-block;animation:hintBob 1.8s var(--ease) infinite}
.hint:hover::before{width:56px}
.hint:hover b{color:var(--yellow)}
@keyframes hintBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:560px){.hint{gap:10px}.hint::before{width:22px}.hint .lbl{font-size:10px}}

/* ---------- Guía: el llamado a contratar aparece al final de cada pantalla ---------- */
.cta-strip{border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(255,187,0,.08),transparent 70%)}
.cta-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:22px}
.cta-strip p{margin:0;font:400 clamp(20px,2.4vw,30px)/1.1 var(--f-display);text-transform:uppercase}
@media (max-width:560px){.cta-strip .wrap{padding-block:18px;padding-right:calc(var(--gutter) + 62px)}.cta-strip .btn{width:100%;justify-content:center}}

/* ---------- Celular: bloques secundarios se deslizan de costado (se ve el siguiente asomando) ---------- */
@media (max-width:560px){
  .pillars,.sci{scroll-padding-inline:var(--gutter);display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;border:0}
  .pillars::-webkit-scrollbar,.sci::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 76%;scroll-snap-align:start;border:1px solid var(--line);border-radius:10px;padding:16px 14px;align-content:start}
  .sci div{flex:0 0 76%;scroll-snap-align:start;border:1px solid var(--line);border-radius:10px;padding:16px 14px;align-content:start}
  .story-card{max-width:220px}
  .statement p{font-size:clamp(28px,8.6vw,34px)}
  .statement small{margin-top:12px}
  .cta-strip p .y{display:none}
  .cta-strip .wrap{padding-block:14px;gap:10px}
}

/* Ciencia con 4 ideas: 4 columnas en compu */
@media (min-width:901px){.sci{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Eventos: 4 tarjetas ---------- */
@media (min-width:1100px){.ev-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ==========================================================
   Celular: más aire vertical entre textos y títulos un poco más chicos
   ========================================================== */
@media (max-width:560px){
  /* aire entre bloques */
  section{padding-block:68px}
  .statement{padding-block:60px}
  .story{padding-block:60px}
  .story .wrap,.exp{gap:36px}
  .sec-head{margin-bottom:36px;gap:18px}
  .page-head{padding-block:32px 10px}
  .page-head + section,.page-head + .phrase + section{padding-top:48px}
  .sub-head{margin-block:52px 22px}
  .hint-row{padding-block:14px 22px}
  .hint-row.inline{padding-block:44px 0}
  .final .inner{padding-block:84px 52px}
  .cta-strip .wrap{padding-block:22px}
  .next{padding-block:34px}
  /* aire dentro de los bloques */
  .services{gap:14px}
  .svc{padding:20px 18px 22px}
  .pillar{padding:20px 16px}
  .sci div{padding:20px 16px}
  .flow{padding-block:20px}
  .value{margin-top:30px}
  .custom{padding:28px 22px}
  .path{padding:26px 22px;gap:14px}
  .tl li{padding-bottom:30px}
  .ev .body{padding:20px;gap:12px}
  .know{gap:6px}
  .hero .row2{margin-top:22px}
  /* interlineado de los textos */
  .sec-head p,.story p.body,.statement small,.tl p,.ev p,.svc p,.pillar p,.sci p,.path p,.decade p,.custom p,.after{line-height:1.7}
  /* títulos un poco más chicos */
  .hero .name{font-size:clamp(24px,7.2vw,31px)}
  .hero h1{font-size:clamp(52px,17vw,76px)}
  .hero .tag{font-size:18px}
  .statement p{font-size:clamp(26px,7.8vw,31px)}
  .story h2{font-size:clamp(34px,10.4vw,46px)}
  .sec-head h2{font-size:clamp(28px,9vw,39px)}
  .sub-head h3{font-size:clamp(26px,7.6vw,34px)}
  .page-head h1{font-size:clamp(30px,9.8vw,46px)}
  .big3{font-size:clamp(22px,6.6vw,29px)}
  .why .claim{font-size:clamp(27px,8.2vw,36px)}
  .spark span{font-size:clamp(22px,6.8vw,29px)}
  .final h2{font-size:clamp(31px,9.6vw,42px)}
  .contact h2{font-size:clamp(29px,8.8vw,38px)}
  .next b{font-size:clamp(26px,7.6vw,36px)}
  .custom h3{font-size:26px}
  .tl h3{font-size:20px}
  .ev h3{font-size:21px}
  .path h3{font-size:24px}
  .svc h3,.sci h3{font-size:18px}
  .know li{font-size:clamp(17px,5vw,20px)}
}

.ev .body{align-content:start}