/* Páginas por tipo de cliente y por familia de bebida.
   Reutilizan styles.css; aquí solo lo propio de estas páginas y del índice del pie. */

.lp-intro { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem .6rem; font-size: .8125rem; letter-spacing: .08em; color: var(--soft); }
.crumbs a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line); }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--amber); }
.crumbs [aria-current] { color: var(--ink); }
.lp-eyebrow { margin-top: clamp(2.5rem, 6vw, 4rem); color: var(--amber); font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; }
.lp-intro h1 { margin-top: 1rem; font-size: clamp(2.6rem, 6.4vw, 5.5rem); line-height: 1.02; letter-spacing: -.015em; max-width: 18ch; }
.lp-lead { margin-top: 1.75rem; max-width: 40rem; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--soft); line-height: 1.6; }

.lp-points { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.lp-points .pillars { margin-top: 0; }

.lp-cats, .lp-faq, .lp-related, .lp-cta { padding-block: var(--section); }
.lp-cats .cats { margin-top: clamp(2rem, 4vw, 3rem); }
.lp-cats h2, .lp-faq h2, .lp-related h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .lp-split { grid-template-columns: 1fr; } }

.faq-list { border-top: 1px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: 1.4rem 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2;
  transition: color 200ms var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--sans); color: var(--amber); font-size: 1.5rem; line-height: 1; transition: transform 250ms var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--amber); }
.faq-item p { padding: 0 0 1.5rem; color: var(--soft); max-width: 60ch; }

.lp-related { background: var(--bg-raise); border-block: 1px solid var(--line); }
.rel-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rel-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.5rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem);
  transition: color 200ms var(--ease-out), padding-left 300ms var(--ease-out);
}
.rel-list a .icon { color: var(--amber); }
.rel-list a:hover { color: var(--amber); }
@media (hover: hover) { .rel-list a:hover { padding-left: .75rem; } }
.rel-sub { margin: 2.5rem 0 1rem; color: var(--soft); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }

.lp-cta { border-top: 1px solid var(--line); }
.lp-cta h2 { max-width: 14ch; }

/* Índice de páginas en el pie (también lo usa la portada) */
.footer-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(2rem, 6vw, 5rem); margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.footer-pages ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .1rem; }
.footer-pages a { display: inline-block; padding: .35rem 0; color: var(--soft); text-decoration: none; transition: color 200ms var(--ease-out); }
.footer-pages a:hover { color: var(--ink); }
.footer-pages-title { color: var(--ink); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 640px) { .footer-pages { grid-template-columns: 1fr; } }

/* Enlaces de la portada a estas páginas */
.clients-more { grid-column: 2; margin-top: 2rem; }
.clients-more a, .catalog-note a { text-decoration: underline; text-decoration-color: var(--amber); }
@media (max-width: 860px) { .clients-more { grid-column: 1; } }
.zona-reparto { margin: 1.5rem 0; color: var(--soft); max-width: 36ch; }