/* =========================================================
   Fundación Colindres — Capa v6: responsive fino
   Ajustes específicos para móvil pequeño (≤420), móvil (≤640),
   tablet vertical (641–900), tablet horizontal (901–1100),
   móvil apaisado (altura baja) y zonas táctiles de 44 px.
   ========================================================= */

/* ---------- Base fluida ---------- */
html{font-size:clamp(15px, 0.6vw + 13.5px, 17px)}
body{font-size:1rem}
img,svg,video,iframe{max-width:100%}
.wrap{width:min(100% - 2*var(--gutter), var(--max))}

/* ---------- Zonas táctiles ---------- */
.link-arrow{min-height:44px;padding:8px 0;align-items:center}
.cta__socials a{width:48px;height:48px}
.nav__burger{width:48px;height:48px}
.social{min-height:72px}
.breadcrumb a{padding:6px 0;display:inline-block}
.footer li a{display:inline-block;padding:6px 0}
.footer li + li{margin-top:4px}
.hero__scroll{padding:10px 14px;min-height:44px;justify-content:flex-end}

/* ---------- Tablet horizontal (901–1100) ---------- */
@media (max-width:1100px){
  .split{gap:clamp(24px,4vw,48px)}
  .legacy{grid-template-columns:260px 1fr}
  .map{grid-template-columns:1fr 1fr}
  .nav__links a{padding:10px 10px}
}

/* ---------- Tablet vertical (641–900) ---------- */
@media (max-width:900px){
  /* tres tarjetas en fila mientras quepan, con menos relleno */
  .grid-3{grid-template-columns:repeat(3,1fr);gap:16px}
  .card{padding:22px 20px}
  .card--art .card__media{margin:0 -20px 14px}
  .card--link h3{font-size:1.3rem}
  .card--link p{font-size:.95rem}
  .pillars{grid-template-columns:repeat(3,1fr);gap:16px}
  .pillar{padding:26px 14px}
  .pillar__icon{width:76px;height:76px}
  .pillar__icon svg{width:36px;height:36px}
  .pillar h3{font-size:.8rem;letter-spacing:.16em}
  .steps{grid-template-columns:repeat(3,1fr);gap:16px;max-width:none}
  .step{padding:22px 18px}
  .step h3{font-size:1.2rem}
  .phases{grid-template-columns:repeat(3,1fr);gap:14px}
  .phase{padding:22px 14px}
  .split{grid-template-columns:1fr}
  .split__media{aspect-ratio:16/10;max-height:440px}
  .legacy{grid-template-columns:1fr;text-align:center}
  .legacy__photo{margin-inline:auto;width:min(280px,100%)}
  .legacy .eyebrow,.legacy__pills{justify-content:center}
  .map{grid-template-columns:1fr}
  .map__frame{aspect-ratio:16/10}
  .project{grid-template-columns:1fr}
  .project__media{min-height:0;aspect-ratio:16/9}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:28px}
  .section-num{font-size:5.5rem;top:-36px}
  .page-hero{min-height:380px}
}

/* ---------- Móvil (≤640) ---------- */
@media (max-width:640px){
  :root{--gutter:18px;--r-xl:22px;--r-lg:18px}
  .section{padding-block:56px}
  .section--tight{padding-block:40px}
  .section-head{margin-bottom:28px}
  .section-num{font-size:4.5rem;top:-30px;left:-4px}
  .grid-3,.pillars,.steps,.phases{grid-template-columns:1fr;gap:14px}
  .pillars{max-width:none}
  .pillar{display:grid;grid-template-columns:64px 1fr;gap:16px;text-align:left;align-items:center;padding:18px}
  .pillar__icon{width:64px;height:64px;margin:0;grid-row:1/3}
  .pillar h3,.pillar p{grid-column:2}
  .pillar__icon svg{width:30px;height:30px}
  .pillar h3{margin-bottom:4px;font-size:.78rem}
  .pillar p{font-size:.95rem}
  .card--link{min-height:0}
  .card--art .card__media{aspect-ratio:16/9}
  .step{padding:20px}
  .btn{min-height:50px;padding:0 20px;font-size:.95rem}
  .btn-row{gap:10px}
  .hero__actions .btn,.cta .btn-row .btn{width:100%;max-width:360px}
  .hero{padding:72px var(--gutter) 110px;min-height:min(88svh,760px)}
  .hero__title{font-size:clamp(3.6rem,19vw,5.6rem);letter-spacing:.06em}
  .hero__slogan{font-size:1.25rem;margin-bottom:26px}
  .hero__kicker{font-size:.62rem;letter-spacing:.18em;padding:8px 12px}
  .page-hero{padding-top:52px;padding-bottom:150px}
  .page-hero h1{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .page-hero .lead{font-size:1rem}
  .breadcrumb{margin-bottom:14px}
  .statement .big{font-size:clamp(1.3rem,6vw,1.7rem)}
  .quote-band{padding:30px 22px}
  .quote-band blockquote{font-size:1.15rem}
  .quote-band::before{font-size:7rem;left:12px;top:-6px}
  .ticker__track{padding:12px 0}
  .ticker__track span{font-size:1rem;padding:0 16px}
  .legacy{padding:22px}
  .legacy__photo{width:min(240px,100%)}
  .map{padding:18px}
  .map__frame{aspect-ratio:4/3}
  .map__coords{font-size:.8rem;padding:8px 12px}
  .project__body{padding:22px 20px}
  .project__meta{gap:14px 22px}
  .phases{padding-bottom:22px}
  .connect{padding:26px 18px}
  .connect .logo{width:110px}
  .social{grid-template-columns:44px 1fr auto;gap:12px;padding:12px}
  .social__icon{width:44px;height:44px;border-radius:12px}
  .social__sub{font-size:.8rem}
  .tl-item__body{padding:18px}
  .tl-item__body h3{font-size:1.25rem}
  .check{padding:14px}
  .cta{padding:40px 20px;border-radius:22px}
  .cta__socials{gap:10px}
  .footer{padding-bottom:110px}
  .footer__grid{grid-template-columns:1fr;gap:26px}
  .footer .brand img.brand__white{width:72px;height:72px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:6px}
  .video .tech__label{max-width:92%;padding:8px 10px}
  .video .tech__dims{font-size:.85rem}
  .tech__label{max-width:90%}
  .wa-float{right:14px;bottom:14px}
  .totop{right:20px;bottom:84px;width:42px;height:42px}
  .toast{bottom:84px;max-width:92%;text-align:center}
  .nav__links{max-height:calc(100dvh - 80px);overflow:auto}
}

/* ---------- Móvil pequeño (≤420) ---------- */
@media (max-width:420px){
  :root{--gutter:16px}
  .hero__title{font-size:clamp(3.2rem,18vw,4.6rem)}
  .hero__slogan{font-size:1.1rem}
  .h2{font-size:1.6rem}
  .lead{font-size:1rem}
  .btn{padding:0 18px;font-size:.92rem}
  .nav__cta{gap:8px}
  .nav__wa{width:42px;height:42px}
  .tech__label b{font-size:.6rem;letter-spacing:.14em}
  .tech__dims{font-size:.85rem}
}

/* ---------- Móvil apaisado / pantallas bajas ---------- */
@media (max-height:540px) and (orientation:landscape){
  .hero{min-height:auto;padding:70px var(--gutter) 90px}
  .hero__title{font-size:clamp(3rem,12vh,5rem)}
  .hero__scroll{display:none}
  .page-hero{padding-top:40px;padding-bottom:120px;min-height:0}
  .loader__inner img{width:96px;height:96px}
}

/* ---------- Pantallas muy anchas ---------- */
@media (min-width:1600px){
  :root{--max:1240px}
  .hero{min-height:min(88svh,920px)}
}

/* ---------- Preferencias del sistema ---------- */
@media (hover:none){
  .card:hover,.pillar:hover,.step:hover,.social:hover,.check:hover{transform:none}
  .btn:hover{transform:none}
}

/* ---------- Hamburguesa compacta ---------- */
@media (max-width:860px){
  .nav__burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:46px;height:46px;border-radius:12px}
  .nav__burger span{width:20px;height:2px;margin:0 !important;display:block}
  .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
  .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Pie: la marca no invade las columnas ---------- */
.footer .brand{flex-wrap:wrap;min-width:0}
.footer .brand__text{min-width:0}
.footer .brand__name{white-space:normal;line-height:1.1}
.footer .brand__tag{white-space:normal}
@media (max-width:1100px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:28px 32px}
  .footer__grid > :first-child{grid-column:1 / -1;max-width:520px}
}
@media (max-width:640px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid > :first-child{grid-column:1 / -1}
  .footer .brand img.brand__white{width:64px;height:64px}
}

/* ---------- WhatsApp flotante se retira al llegar al pie ---------- */
.wa-float.is-away{transform:translateY(140px);opacity:0;pointer-events:none}
.wa-float{transition:transform .45s var(--ease), opacity .3s, box-shadow .3s}
.totop{transition:opacity .3s, transform .3s var(--ease), background .2s, bottom .3s}
.footer-near .totop{bottom:22px}