/* Guide pages (care guide, shipping and warranty): content grouped by topic, framed like the home page */

/* Head: words on cacao beside the photo, like the home hero */
.guia__cabeza { display: grid; background: var(--cacao); color: var(--marfil); }
.guia__cabeza :focus-visible { outline-color: var(--champan); }
.guia__cabeza-texto {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter) clamp(2rem, 7vw, 3rem);
}
.guia__migas { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--crema); }
.guia__migas a { text-decoration: none; }
.guia__migas a:hover { color: var(--marfil); text-decoration: underline; }
.guia__titulo { font-family: var(--font-marca); font-weight: 300; font-size: clamp(2.5rem, 10vw, 4.25rem); line-height: 1.04; max-width: 11ch; }
.guia__intro { color: var(--crema); font-size: 1.0625rem; line-height: 1.55; max-width: 36ch; }
.guia__foto { background: var(--arena); overflow: hidden; }
/* Legal pages have no photo: the head is one band of words. */
.guia__cabeza:not(:has(.guia__foto)) .guia__titulo { max-width: 16ch; }
.guia__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 55%; }

/* Body frame */
.guia__cuerpo { padding: 0 var(--gutter) clamp(3.5rem, 9vw, 6rem); }
.guia__cuerpo > * { max-width: 64rem; margin-left: auto; margin-right: auto; }

/* Index: one entry per group, with a piece photo or a line icon */
.guia-indice { display: grid; margin-top: clamp(1.5rem, 5vw, 3rem); border-top: var(--hairline); border-bottom: var(--hairline); }
.guia-indice a {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: 0.9rem 0; text-decoration: none;
}
.guia-indice a + a { border-top: 1px solid rgb(184 147 90 / 0.4); }
.guia-indice__foto { grid-row: 1 / span 2; display: block; aspect-ratio: 660 / 731; overflow: hidden; background: var(--arena); }
.guia-indice__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.guia-indice a:hover .guia-indice__foto img { transform: scale(1.035); }
.guia-indice__icono { grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: var(--champan); }
.guia-indice__icono svg { width: 1.75rem; height: 1.75rem; }
.guia-indice--iconos a { grid-template-columns: 2.5rem minmax(0, 1fr); }
.guia-indice__nombre { align-self: end; font-size: 1.25rem; line-height: 1.2; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.25s var(--ease-out); }
.guia-indice a:hover .guia-indice__nombre { text-decoration-color: var(--champan); }
.guia-indice__temas { align-self: start; margin-top: 0.2rem; font-size: 0.875rem; line-height: 1.35; color: var(--tinta-suave); }

/* Groups: the material heading, then its questions at reading width.
   WordPress wraps group content in an inner div; it steps aside so the grid sees the blocks. */
.guia-grupo > .wp-block-group__inner-container, .guia-aviso > .wp-block-group__inner-container { display: contents; }
.guia-grupo { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.guia-grupo + .guia-grupo { margin-top: clamp(2.5rem, 7vw, 4.5rem); border-top: 1px solid rgb(184 147 90 / 0.45); }
.guia-grupo > div > h2 {
  font-family: var(--font-texto); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(1.9rem, 6.5vw, 2.75rem); line-height: 1.1;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.guia-grupo > div > h3 { font-family: var(--font-marca); font-weight: 300; font-size: clamp(1.625rem, 5.4vw, 2rem); line-height: 1.15; margin-top: 2.5rem; }
.guia-grupo > div > h2 + h3 { margin-top: 1.5rem; }
.guia-grupo > div > h2 + p { margin-top: 1.25rem; }
.guia-grupo > div > p { margin-top: 0.75rem; font-size: 1.125rem; line-height: 1.65; max-width: 36rem; }
.guia-grupo > div > p + p { margin-top: 1em; }
.guia-grupo > div > ul { margin: 0.75rem 0 0; padding-left: 1.25rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.65; }
.guia-grupo > div > ul li + li { margin-top: 0.3em; }
.guia-grupo > div > ul li::marker { color: var(--champan); }
.guia-grupo > div > ul + p { margin-top: 1em; }
.guia-grupo a { text-decoration-color: var(--champan); transition: text-decoration-color 0.2s var(--ease-out); }
.guia-grupo a:hover { text-decoration-color: var(--cacao); }

/* Rows: one per kind of piece or price, with a quiet tag on the right */
.guia-filas { margin: 1.25rem 0 0; max-width: 36rem; border-top: 1px solid var(--cacao); }
.guia-filas > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1rem;
  padding: 1.1rem 0 1.25rem; border-bottom: 1px solid rgb(184 147 90 / 0.45);
}
.guia-filas dt { font-weight: 500; font-size: 1.0625rem; line-height: 1.35; }
.guia-filas dd { margin: 0; grid-column: 1 / -1; font-size: 1.0625rem; line-height: 1.6; }
.guia-filas .guia-filas__marca {
  grid-column: 2; grid-row: 1; align-self: start; justify-self: end;
  font-size: 0.8125rem; line-height: 1.3; padding: 0.25rem 0.6rem; white-space: nowrap; border: 1px solid var(--cacao);
}
.guia-filas .guia-filas__marca--si { background: var(--cacao); color: var(--marfil); }
.guia-filas .guia-filas__marca--ver { border-color: transparent; background: var(--arena); }

.guia-filas .guia-filas__marca--precio { border-color: transparent; padding: 0; font-size: 1.0625rem; font-weight: 500; }
.guia-filas--precios > div { padding: 0.9rem 0; }

/* Cities: region name, then its cities in one run of text */
.guia-ciudades { margin: 1rem 0 0; max-width: 36rem; }
.guia-ciudades > div { padding: 0.85rem 0; border-bottom: 1px solid rgb(184 147 90 / 0.45); }
.guia-ciudades > div:first-child { border-top: 1px solid rgb(184 147 90 / 0.45); }
.guia-ciudades dt { font-weight: 500; }
.guia-ciudades dd { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--tinta-suave); }

/* Warranty: the store notice */
.guia-aviso { margin-top: 2.75rem; max-width: 36rem; background: var(--arena); border-top: 2px solid var(--champan); padding: 1.25rem 1.25rem 1.4rem; }
.guia-aviso > div > h3 { font-family: var(--font-texto); font-weight: 500; font-size: 1.125rem; line-height: 1.3; }
.guia-aviso > div > p { margin-top: 0.5rem; line-height: 1.6; }
.guia-aviso > div > :first-child { margin-top: 0; }

/* Close: rosa, the one warm block, before the cacao footer */
.guia-cierre { background: var(--rosa); padding: clamp(2.5rem, 8vw, 4.5rem) var(--gutter); }
.guia-cierre__inner { max-width: 64rem; margin: 0 auto; display: grid; gap: 1.25rem; justify-items: start; }
.guia-cierre__titulo { font-family: var(--font-texto); font-weight: 400; letter-spacing: -0.01em; font-size: clamp(1.9rem, 6.5vw, 2.75rem); max-width: 16ch; }
.guia-cierre__botones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.guia-cierre .btn svg { width: 1.25rem; height: 1.25rem; }

/* Reading line: the gold hairline of the top band fills as she reads, as on blog posts */
@supports (animation-timeline: scroll()) {
  .guia-page .top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--champan); transform-origin: 0 50%; transform: scaleX(0);
    animation: guia-leer linear both; animation-timeline: scroll(root);
  }
  @keyframes guia-leer { to { transform: scaleX(1); } }
}

@media (min-width: 48rem) {
  .guia__cabeza:has(.guia__foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .guia__foto { grid-column: 2; grid-row: 1; }
  .guia__foto img { aspect-ratio: auto; height: 100%; min-height: 26rem; max-height: 34rem; }
  .guia__cabeza-texto {
    grid-column: 1; grid-row: 1; gap: 1.25rem;
    padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3.5rem);
    padding-left: max(var(--gutter), calc((100vw - 64rem) / 2));
  }
  .guia__intro { font-size: 1.125rem; }

  .guia-indice { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-cards); }
  .guia-indice a { padding: 1.1rem 0; grid-template-columns: 4.75rem minmax(0, 1fr); }
  .guia-indice a + a { border-top: 0; }
  .guia-indice--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .guia-grupo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); column-gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .guia-grupo > div > * { grid-column: 2; }
  .guia-grupo > div > h2 { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--header-h) + 2rem); }
  .guia-grupo > div > h2 + :is(h3, p) { margin-top: 0; }

  .guia-cierre__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); column-gap: clamp(2rem, 6vw, 5rem); align-items: end; }
}