/* ============================================================
   TOTEMICA — capa responsive.
   Se carga DESPUÉS del <style> de cada página para poder
   sobrescribir las rejillas declaradas ahí sin usar !important.
   ============================================================ */

@media (max-width:1100px){
  .wrap,.wrap-tight,.wrap-text{padding:0 28px}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:72px minmax(0,1fr)}
  .pdp .info{grid-column:1 / -1;position:static;margin-top:var(--s6)}
  .layout{grid-template-columns:200px minmax(0,1fr);gap:var(--s6)}
  .footer .cols{grid-template-columns:1fr 1fr}
}

@media (max-width:820px){
  .totem-rail{display:none}

  /* --- cabecera --- */
  .announce{font-size:10px;letter-spacing:.12em;padding:9px 16px;line-height:1.5}
  .header-row{padding:14px 0;gap:12px}
  .logo img{height:26px}
  .nav{display:none}
  .tools{gap:16px}

  /* --- tipografía --- */
  h1.display{font-size:clamp(34px,9vw,52px)}
  h2.display{font-size:clamp(26px,6.4vw,38px)}
  .mega{font-size:clamp(38px,11vw,64px)}
  .lede{font-size:15px;line-height:1.8}
  .stack{padding:var(--s8) 0}
  .stack-sm{padding:var(--s7) 0}

  /* --- portada --- */
  .hero{height:auto;min-height:0;padding-bottom:var(--s8)}
  .hero .inner{position:relative;padding:var(--s9) 0 var(--s7)}
  .hero .copy{max-width:none}
  .hero .meta{position:static;padding:0 28px;flex-wrap:wrap;gap:var(--s5) var(--s6)}
  .hero .meta div{min-width:78px}
  .hero .scrollcue{display:none}
  .actives{flex-wrap:wrap;gap:var(--s5)}
  .cta-row{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .cta-row .btn{width:100%}

  /* --- bloques de la portada --- */
  .manifiesto .col{grid-template-columns:1fr;gap:var(--s6)}
  .ritual{grid-template-columns:1fr}
  .ritual > div{border-right:0;border-bottom:1px solid var(--line);padding:var(--s7) 28px}
  .ritual > div:last-child{border-bottom:0}
  .cap{grid-template-columns:1fr;min-height:0}
  .cap:nth-child(even){direction:ltr}
  .cap .art{min-height:280px;order:-1}
  .cap .txt{padding:var(--s7) 28px}
  .editorial{grid-template-columns:1fr;gap:var(--s6);padding:var(--s8) 0}
  .ingr{min-height:0;padding:var(--s8) 0}
  .ingr .card{max-width:none;padding:var(--s6)}
  .tiles{grid-template-columns:1fr}
  .gestos{grid-template-columns:1fr}
  .dist{min-height:0;padding:var(--s8) 0}
  .dist .inner{max-width:none}
  .dist .figs{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .news form{flex-direction:column}

  /* --- producto --- */
  .pgrid{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s4)}
  .pdp{grid-template-columns:1fr;gap:var(--s5)}
  .thumbs{flex-direction:row;position:static;order:2;overflow-x:auto;gap:8px}
  .thumbs button{width:66px;flex:0 0 66px}
  .stage{order:1}
  .info{position:static;order:3}
  .info h1{font-size:var(--fs-xl)}
  .activos{grid-template-columns:1fr 1fr 1fr}
  .buybar{flex-wrap:wrap}
  .buybar .add{min-width:100%;order:2}
  .express{grid-template-columns:1fr}
  .ritual-band{min-height:0;padding:var(--s8) 0}
  .pasos{grid-template-columns:1fr;gap:var(--s5)}
  .ingr-grid{grid-template-columns:1fr 1fr}
  .resenas{grid-template-columns:1fr;gap:var(--s6)}
  .tabs{gap:var(--s5);overflow-x:auto}

  /* --- categoría --- */
  .cabecera{height:auto;min-height:300px}
  .cabecera .inner{padding:var(--s8) 0 var(--s6)}
  .layout{grid-template-columns:1fr}
  .rail{position:static;max-height:none;overflow:visible;border-bottom:1px solid var(--line);
    padding-bottom:var(--s5);margin-bottom:var(--s5)}
  .barra{position:static;flex-wrap:wrap;gap:10px}
  .pgrid-3{grid-template-columns:repeat(2,1fr)}
  .editorial-cell{grid-column:span 2;min-height:240px}
  .banda{height:auto;min-height:240px;padding:var(--s7) 28px;margin:var(--s7) 0}

  /* --- carrito --- */
  .cart-layout{grid-template-columns:1fr;gap:var(--s6)}
  .chead{display:none}
  .crow{grid-template-columns:88px 1fr;gap:var(--s4);row-gap:var(--s3);align-items:start}
  .crow .qty{grid-column:2;justify-self:start}
  .crow .tot{grid-column:2;text-align:left}
  .crow .x{grid-column:2;justify-self:start}
  .aside{position:static}
  .progreso{flex-direction:column;gap:var(--s3)}
  .sugerencia{grid-template-columns:1fr;gap:var(--s4)}
  .sugerencia .im{max-width:160px}

  /* --- pago --- */
  .co{grid-template-columns:1fr}
  .co-main{padding:var(--s7) 0}
  .co-side{border-left:0;border-top:1px solid var(--line);padding:var(--s7) 0;position:static;max-height:none}
  .row-2,.row-3{grid-template-columns:1fr}
  .express-row{grid-template-columns:1fr}

  /* --- cajón --- */
  .drawer{width:100%}

  /* --- pie --- */
  .footer{padding:var(--s8) 0 var(--s5)}
  .footer .cols{grid-template-columns:1fr 1fr;gap:var(--s6)}
  .footer .bottom{flex-direction:column;gap:10px}
}

@media (max-width:600px){
  .wrap,.wrap-tight,.wrap-text{padding:0 20px}
  .hero .meta{padding:0 20px}
  .ritual > div,.cap .txt,.banda{padding-left:20px;padding-right:20px}
  .pgrid,.pgrid-3{grid-template-columns:1fr}
  .editorial-cell{grid-column:span 1}
  .activos{grid-template-columns:1fr}
  .activos div{border-right:0;border-bottom:1px solid var(--line)}
  .activos div:last-child{border-bottom:0}
  .ingr-grid{grid-template-columns:1fr}
  .dist .figs{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
}