/* =============================================================================
   BLOQUES COMPARTIDOS por las variantes A y D.

   Salieron de a.css cuando D empezó a reutilizarlos: la retícula de datos, los
   bloques de texto con imagen, los códigos de uso, el plano interactivo, la
   galería y el proceso de compra. Aquí no hay color de fondo propio — cada
   variante lo pone con sus tokens — solo estructura y ritmo.

   B y C no cargan este archivo, así que nada de lo que se toque aquí puede
   afectarlas.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Leyenda
   -------------------------------------------------------------------------- */
.leyenda { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* La frase que el cliente marcó como clave. Va en oración, no en versalitas:
   en mayúsculas cuatro palabras largas se vuelven un letrero. */
.leyenda__frase {
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 26ch;
  text-wrap: balance;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

/* Con la tipografía más grande `auto-fit` caía en tres columnas y dejaba la
   cuarta celda sola en una fila. Con quiebres explícitos son una, dos o cuatro
   columnas: nunca tres, así no queda huérfana. */
.leyenda__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 560px) { .leyenda__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .leyenda__grid { grid-template-columns: repeat(4, 1fr); } }

.leyenda__celda {
  background: var(--bg);
  padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.6rem);
}
/* «Reserva ecológica privada» ocupa dos líneas y «Acceso» una: sin reservar el
   alto de dos, las cifras de la fila no comparten línea base y la retícula se
   ve descuadrada justo en el bloque que el cliente señaló. */
.leyenda__celda dt {
  color: var(--ink-2);
  font-size: clamp(0.84rem, 1vw, 0.95rem);
  line-height: 1.4;
  letter-spacing: 0.075em;
  min-height: 2.8em;
}
.leyenda__celda dd { margin-top: 0.85rem; }
.leyenda__celda p {
  margin-top: 0.8rem;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.figure--palabra {
  font-family: var(--f-text);
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(1.32rem, 2.3vw, 1.85rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: block;
}

/* Escalonado: las celdas entran una tras otra, no todas de golpe. */
.leyenda__celda:nth-child(2) { transition-delay: 0.08s; }
.leyenda__celda:nth-child(3) { transition-delay: 0.16s; }
.leyenda__celda:nth-child(4) { transition-delay: 0.24s; }

/* -----------------------------------------------------------------------------
   Bloques de texto + imagen
   -------------------------------------------------------------------------- */
.bloque__in {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 860px) {
  .bloque__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .bloque--invertido .bloque__texto { order: 2; }
}

.bloque__codigo {
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.bloque__texto .title { margin-bottom: 1.2rem; }
.bloque__texto .prose { color: var(--ink-2); }

.bloque__figura picture { display: block; }
.bloque__figura img {
  width: 100%;
  border-radius: 3px;
}
.bloque__figura figcaption {
  margin-top: 0.7rem;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0.02em;
}

.ficha {
  margin-top: 1.8rem;
  border-top: 1px solid var(--rule);
}
.ficha > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.ficha dt { color: var(--ink-2); align-self: center; }
.ficha dd {
  font-family: var(--f-data);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Usos — clasificación, no secuencia.
   -------------------------------------------------------------------------- */
.usos .lead { margin-top: 1.1rem; }

.usos__lista {
  list-style: none;
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
  display: grid;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

@media (min-width: 700px) { .usos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .usos__lista { grid-template-columns: repeat(3, 1fr); } }

.usos__item {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  transition: background var(--d-fast) var(--e-out),
              opacity var(--d-mid) var(--e-out),
              transform var(--d-mid) var(--e-out);
}
.usos__item:hover { background: var(--bg-2); }

.usos__codigo {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--rule-firm);
  color: var(--verde-dosel);
  margin-bottom: 1rem;
}

.usos__item .subtitle { margin-bottom: 0.55rem; }
.usos__item p {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.usos__item:nth-child(2) { transition-delay: 0.06s; }
.usos__item:nth-child(3) { transition-delay: 0.12s; }
.usos__item:nth-child(4) { transition-delay: 0.18s; }
.usos__item:nth-child(5) { transition-delay: 0.24s; }

.usos__prueba { margin-top: clamp(2rem, 4vw, 3rem); }
.usos__prueba img {
  width: 100%;
  max-height: 46svh;
  object-fit: cover;
  border-radius: 3px;
}
.usos__prueba figcaption {
  margin-top: 0.7rem;
  max-width: 60ch;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0.03em;
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   Plano interactivo
   El marcador vive sobre la imagen; su ficha, debajo. Así en móvil el texto no
   tapa justo el punto que se acaba de señalar.
   -------------------------------------------------------------------------- */
.plano .lead { margin-top: 1.1rem; }

.plano__caja {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
}
@media (min-width: 900px) {
  .plano__caja { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.plano__lienzo {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: var(--verde-sombra);
}
.plano__lienzo img { width: 100%; }

.plano__marcas { position: absolute; inset: 0; }

.plano__punto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* El aro late despacio para que se note que hay algo que tocar. */
.plano__aro {
  position: absolute;
  inset: -0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}

.plano__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(9, 20, 15, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: var(--f-data);
  font-size: 0.76rem;
  font-weight: 600;
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}

.plano__punto:hover .plano__num { transform: scale(1.12); }

.plano__punto[aria-selected="true"] .plano__num {
  background: var(--trazo);
  border-color: #fff;
}
.plano__punto[aria-selected="true"] .plano__aro { opacity: 1; transform: scale(1); }

.plano__panel {
  border-top: 1px solid var(--rule-firm);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  min-height: 11rem;
}
.plano__indice { color: var(--accent); margin-bottom: 0.6rem; }
.plano__ficha .subtitle { margin-bottom: 0.6rem; }
.plano__ficha p { color: var(--ink-2); line-height: 1.6; }

/* -----------------------------------------------------------------------------
   Galería
   -------------------------------------------------------------------------- */
.galeria .lead { margin-top: 1.1rem; }

/* Las filas tienen alto fijo y el pie va superpuesto: si el pie ocupara sitio
   propio, cada celda mediría distinto y la retícula se descuadraría. */
.galeria__grid {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  display: grid;
  gap: clamp(0.7rem, 1.5vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(120px, 15vw, 205px);
}
@media (min-width: 760px) { .galeria__grid { grid-template-columns: repeat(3, 1fr); } }

/* La toma del lindero es la que hay que mirar despacio: ocupa cuatro celdas. */
.galeria__pieza {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
  overflow: hidden;
  border-radius: 3px;
  background: var(--verde-sombra);
}
.galeria__pieza:not(:first-child) { grid-column: span 1; grid-row: span 1; }

.galeria__pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast) var(--e-out);
}
.galeria__pieza:hover img { transform: scale(1.03); opacity: 0.92; }

.galeria__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 0.85rem 0.75rem;
  color: #f2f5f0;
  text-transform: none;
  letter-spacing: 0.03em;
  line-height: 1.35;
  text-align: left;
  background: linear-gradient(transparent, rgba(6, 16, 12, 0.9));
}

.galeria__pieza:nth-child(2) { transition-delay: 0.06s; }
.galeria__pieza:nth-child(3) { transition-delay: 0.12s; }
.galeria__pieza:nth-child(4) { transition-delay: 0.18s; }
.galeria__pieza:nth-child(5) { transition-delay: 0.24s; }

/* -----------------------------------------------------------------------------
   Proceso de compra — numerado porque sí es una secuencia.
   -------------------------------------------------------------------------- */
.proceso .lead { margin-top: 1.1rem; }

.proceso__lista {
  list-style: none;
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--rule);
}

.proceso__paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
  border-bottom: 1px solid var(--rule);
}

.proceso__num {
  color: var(--accent);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  padding-top: 0.2em;
  min-width: 2.5rem;
}

.proceso__paso .subtitle { margin-bottom: 0.45rem; }
.proceso__paso p { color: var(--ink-2); max-width: 62ch; line-height: 1.6; }

.proceso__paso:nth-child(2) { transition-delay: 0.05s; }
.proceso__paso:nth-child(3) { transition-delay: 0.1s; }
.proceso__paso:nth-child(4) { transition-delay: 0.15s; }
.proceso__paso:nth-child(5) { transition-delay: 0.2s; }

/* -----------------------------------------------------------------------------
   Detalles sueltos
   -------------------------------------------------------------------------- */
.ficha__nota {
  margin-top: 0.9rem;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0.03em;
  line-height: 1.6;
  max-width: 52ch;
}

.pie__idioma { justify-self: start; }