/* ==========================================================================
   Páginas internas — /cervezas/, /bares/, /donde-tomarla/, etc.
   Reutiliza enteramente los tokens, tipografías y botones de style.css.
   No define colores ni fuentes nuevas: sólo la composición de estas páginas.
   ========================================================================== */

.pg{background:var(--crema);padding-block:clamp(40px,5vw,72px);min-height:60vh}
.pg > .wrap{max-width:1080px}

/* --- Miga de pan --- */
.pg-ruta{margin-bottom:clamp(24px,3vw,36px)}
.pg-ruta ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin:0;padding:0;list-style:none;   /* la ruta se lee por las barras, no numerada */
  font-family:var(--f-texto);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.pg-ruta li + li::before{content:"/";margin-right:.5rem;color:var(--crema-3)}
.pg-ruta a{text-decoration:underline;text-underline-offset:3px}
.pg-ruta a:hover{color:var(--tinta)}
.pg-ruta [aria-current]{color:var(--tinta)}

/* --- Encabezado --- */
.pg-intro{max-width:46ch;margin-bottom:clamp(32px,4vw,52px)}
.pg-intro h1{font-size:clamp(2.3rem,5vw,4.2rem);margin-top:.5rem}
.pg-bajada{margin-top:1.1rem;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.65;color:var(--tinta-2)}

/* --- Bloques --- */
.pg-bloque{margin-top:clamp(40px,5vw,64px)}
.pg-bloque h2{font-size:clamp(1.6rem,2.6vw,2.4rem);margin-bottom:.9rem}
.pg-bloque h3{font-size:1.25rem;margin-bottom:.35rem}
.pg-bloque p{margin-bottom:.8rem;line-height:1.65;color:var(--tinta-2);max-width:68ch}
.pg-bloque a:not(.btn){text-decoration:underline;text-underline-offset:3px;color:var(--tinta)}
.pg-resumen{font-size:1.05rem}
.pg-claim{font-weight:600;color:var(--tinta)}
.pg-nota{font-size:.85rem;color:var(--tinta-2);border-left:2px solid var(--dorado);padding-left:.9rem}
.pg-cierre{border-top:1px solid var(--crema-3);padding-top:clamp(28px,3.5vw,44px)}
.pg-vacio{background:var(--crema-2);padding:clamp(24px,3vw,36px);border:1px dashed var(--crema-3)}
.pg-acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}

/* --- Listas --- */
.pg-bullets{margin:0 0 1rem;padding:0;list-style:none;max-width:68ch}
.pg-bullets li{position:relative;padding-left:1.1rem;margin-bottom:.45rem;line-height:1.55;color:var(--tinta-2)}
.pg-bullets li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--dorado)}
.pg-lista{display:grid;gap:clamp(20px,2.5vw,32px);margin:0;padding:0;list-style:none}
@media (min-width:760px){.pg-lista{grid-template-columns:repeat(2,1fr)}}
.pg-lista > li{border-top:2px solid var(--dorado);padding-top:1rem}

/* --- Datos técnicos --- */
.pg-datos{display:flex;flex-wrap:wrap;gap:1.4rem;margin:.9rem 0 0}
.pg-datos div{min-width:64px}
.pg-datos dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2);font-weight:600}
.pg-datos dd{margin:.15rem 0 0;font-family:var(--f-titulo);font-size:1.5rem;line-height:1}

/* --- Grilla de cervezas --- */
.pg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.5vw,32px);margin:0;padding:0;list-style:none}
@media (min-width:700px){.pg-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.pg-grid{grid-template-columns:repeat(5,1fr)}}
.pg-grid-chica{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.pg-grid-chica{grid-template-columns:repeat(4,1fr)}}
/* Las tarjetas comparten alto de fila y empujan la ficha técnica al pie, para
   que los datos queden alineados aunque las descripciones midan distinto. */
.pg-card{display:flex;flex-direction:column}
.pg-card .pg-datos{margin-top:auto;padding-top:.6rem}
.pg-card a{display:block;text-decoration:none;text-align:center}
.pg-card img{height:180px;width:auto;margin:0 auto .7rem;object-fit:contain}
.pg-card-estilo{display:block;font-family:var(--f-texto);font-weight:600;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-2)}
.pg-card-nombre{display:block;font-family:var(--f-titulo);font-size:1.5rem;
  text-transform:uppercase;line-height:1.05;margin-top:.15rem;color:var(--tinta)}
.pg-card a:hover .pg-card-nombre{color:var(--madera)}
.pg-card a:focus-visible{outline:2px solid var(--dorado);outline-offset:4px}
.pg-card p{font-size:.85rem;margin-top:.6rem;text-align:left}
.pg-card .pg-datos{gap:.9rem}
.pg-card .pg-datos dd{font-size:1.15rem}

/* --- Página de producto --- */
.pg-producto{display:grid;gap:clamp(28px,4vw,52px);align-items:start}
@media (min-width:860px){.pg-producto{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}}
.pg-producto-foto{margin:0;text-align:center}
.pg-producto-foto img{height:clamp(300px,42vw,480px);width:auto;margin:0 auto;
  filter:drop-shadow(0 20px 26px rgba(13,13,13,.18))}
.pg-descripcion{font-size:clamp(1rem,1.2vw,1.12rem)}
.pg-producto-texto h2{font-size:1.35rem;margin-top:1.8rem}
.pg-producto-texto .pg-datos{margin-bottom:.4rem}

/* --- Servicios B2B --- */
.pg-servicios{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:760px){.pg-servicios{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pg-servicios{grid-template-columns:repeat(3,1fr)}}
.pg-servicios article{border-top:2px solid var(--dorado);padding-top:1rem}
.pg-num{font-family:var(--f-titulo);font-size:1.6rem;line-height:1;color:var(--madera);margin-bottom:.2rem}

@media (prefers-reduced-motion:reduce){
  .pg-card a,.pg-card-nombre{transition:none}
}