/* ==========================================================
   CREHAZ · responsive.css
   Pase responsive. El bloque 1100px viene del diseño original; a partir de 960px se añade el pase móvil (nav hamburguesa, dividers más bajos, animaciones reducidas).
   ========================================================== */
@media (max-width: 1100px){
  .nav .links{display:none}
  .hero h1{font-size:clamp(60px,12vw,120px)}
  .hero .lead{grid-template-columns:1fr;gap:40px}
  .hero-logo{justify-self:start;max-width:360px}
  .creaft-hero .lead,.atelier .grid,.arbol .grid,.cartas .grid,.kontakt .top,.siro .grid,.news,.dehesa .hd-row{grid-template-columns:1fr;gap:40px}
  .puertas .grid{grid-template-columns:1fr}
  .encargo .stages{grid-template-columns:1fr 1fr}
  .pent{grid-template-columns:repeat(2,1fr)}
  footer .top{grid-template-columns:1fr 1fr}
}


/* ============ ≤960px · nav móvil ============ */
@media (max-width:960px){
  .nav{grid-template-columns:1fr auto;height:64px;padding:0 16px}
  .nav.shrunk{height:56px}
  .nav .wm{font-size:16px}
  .nav .wm .c{width:34px;height:34px}
  .nav .wm small{font-size:8.5px;letter-spacing:.14em}
  .nav .lk.contacto.solo-escritorio{display:none}
  .nav-toggle{display:inline-flex}
  .nav .links{position:fixed;top:64px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:var(--paper);border-bottom:2px solid var(--ink);box-shadow:0 10px 0 rgba(14,16,34,.12);padding:8px 0 14px;max-height:calc(100vh - 64px);overflow-y:auto}
  .nav.open .links{display:flex}
  .nav .links .sep{display:none}
  .nav .lk{padding:14px 20px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav .lk::after{left:20px;right:20px;bottom:8px}
  .nav .links .lk .sub{display:block;font-size:11px;letter-spacing:.18em;color:var(--stone);margin-top:2px}
  .nav .links .lk.contacto.solo-movil{display:inline-flex;margin:12px 20px 0;box-shadow:4px 4px 0 var(--magenta)}
  .shell{padding-top:64px}
  :root{--gutter:20px}
}
/* ============ ≤960px · secciones ============ */
@media (max-width:960px){
  :root{--mq-h:104px;--mq-lift:24px;--mq-scale:26}
  .hero{min-height:auto;padding:28px var(--gutter) 72px}
  .hero .lay{padding-top:12px}
  .hero h1{font-size:clamp(46px,13vw,86px)}
  .hero h1 .line{white-space:normal}
  .hero .lead{margin-top:32px}
  .hero .lead p{font-size:17px}
  .hero .cta-row{margin-top:32px;gap:16px}
  .hero .scroll-hint{display:none}
  .marquee .v-corte .track{font-size:clamp(42px,13vw,90px)}
  .puertas h2 em{font-size:1.24em}
  .quehacer{padding:56px var(--gutter)}
  [data-q3="D"] .quehacer .grid .col{grid-template-columns:1fr}
  [data-q3="D"][data-voz="1"] .quehacer .grid .aside{grid-template-columns:1fr;grid-template-areas:"photo" "body" "sig"}
  [data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-photo{min-height:230px;border-right:0;border-bottom:2px solid var(--ink)}
  [data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body{padding:20px}
  [data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body h4{font-size:23px}
  [data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body p{font-size:15px}
  [data-q3="D"][data-voz="1"] .quehacer .grid .aside .sig{font-size:17px;padding:14px 18px}
  .cartas{padding:44px var(--gutter) 80px}
  .cartas h2,.cartas .sub{white-space:normal}
  .cartas h2{font-size:clamp(32px,9vw,60px)}
  .cartas .grid{grid-template-columns:1fr;gap:22px}
  .cartas-modal .panel{grid-template-columns:1fr;max-height:92vh}
  .cartas-modal .panel .r{border-left:0;border-top:2px solid var(--ink)}
  .news{grid-template-columns:1fr;gap:24px;padding:24px}
  .news form{flex-direction:column}
  .news button{border-left:0;border-top:2px solid var(--paper)}
  footer .top{grid-template-columns:1fr 1fr;gap:32px}
  footer .bot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:640px){
  footer .top{grid-template-columns:1fr}
  .encargo .stages,.pent{grid-template-columns:1fr}
}
/* ============ Móvil: animaciones simplificadas ============
   Se conservan en escritorio; en pantallas táctiles pequeñas se apagan las
   capas más costosas (auroras, patrón rotante, manchas blur, dividers). */
@media (max-width:960px){
  .hero::before,.puertas::before{animation:none}
  .puertas .bg-fx .aurora{filter:blur(30px)}
  .puertas .bg-fx .aurora .band{animation:none;transform:none}
  .quehacer::before{animation:none;opacity:.14}
  .cartas-bg .ink-stain{display:none}
  .cartas-bg .cline{animation:none}
  .crehaz-divider .chip{display:none}
  .cartas-divider .postal.t2,.cartas-divider .postal.t4,.cartas-divider .postal.t6{display:none}
  .hero-logo .logo-stage{animation:none}
  .hero-logo .logo-wordmark{animation:none}
}
/* ============ prefers-reduced-motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero-logo .slice{opacity:1;transform:none;filter:none}
  .hero-logo .slice.eslogan{filter:invert(1) brightness(1.18) contrast(1.15)}
  .marquee{clip-path:none!important}
  .hero h1,.hero-logo{transform:none!important;opacity:1!important}
}