/* =============================================================================
   VARIANTE A — «La lámina»
   Autoridad técnica: papel de plano, tinta verde, filete perimetral con cruces
   de registro. Embudo largo, formulario calificador de cinco campos.
   ========================================================================== */

:root {
  --marco: clamp(10px, 1.4vw, 20px);   /* aire entre el filete y el borde */
  --cabecera-h: 52px;
}

/* El contenido se mete dentro del filete: la cabecera pega justo debajo de la
   línea superior, no encima de ella. */
body {
  background: var(--bg);
  padding-block: var(--marco);
}

/* -----------------------------------------------------------------------------
   La plancha — el filete que se dibuja al cargar, borde por borde.
   -------------------------------------------------------------------------- */
.plancha {
  position: fixed;
  inset: var(--marco);
  z-index: 60;
  pointer-events: none;
}

.plancha__borde {
  position: absolute;
  background: var(--rule-firm);
}
.plancha__borde--t,
.plancha__borde--b { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.plancha__borde--l,
.plancha__borde--r { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }

.plancha__borde--t { top: 0; transform-origin: left; animation: trazo-x 0.5s var(--e-out) 0.1s forwards; }
.plancha__borde--r { right: 0; transform-origin: top; animation: trazo-y 0.4s var(--e-out) 0.55s forwards; }
.plancha__borde--b { bottom: 0; transform-origin: right; animation: trazo-x 0.5s var(--e-out) 0.9s forwards; }
.plancha__borde--l { left: 0; transform-origin: bottom; animation: trazo-y 0.4s var(--e-out) 1.35s forwards; }

@keyframes trazo-x { to { transform: scaleX(1); } }
@keyframes trazo-y { to { transform: scaleY(1); } }

/* Cruces de registro: en una plancha marcan las esquinas útiles del dibujo. */
.plancha__cruz {
  position: absolute;
  width: 13px; height: 13px;
  opacity: 0;
  animation: cruz 0.35s var(--e-out) 1.7s forwards;
  background:
    linear-gradient(var(--rule-firm), var(--rule-firm)) center / 100% 1px no-repeat,
    linear-gradient(var(--rule-firm), var(--rule-firm)) center / 1px 100% no-repeat;
}
.plancha__cruz--tl { top: -6px; left: -6px; }
.plancha__cruz--tr { top: -6px; right: -6px; }
.plancha__cruz--bl { bottom: -6px; left: -6px; }
.plancha__cruz--br { bottom: -6px; right: -6px; }

@keyframes cruz { to { opacity: 1; } }

/* La regla global solo acorta la duración; el retardo seguiría corriendo. Aquí
   se retiran las animaciones del todo y el filete queda dibujado desde el inicio. */
@media (prefers-reduced-motion: reduce) {
  .plancha__borde, .plancha__cruz { animation: none; }
  .plancha__borde--t, .plancha__borde--b { transform: scaleX(1); }
  .plancha__borde--l, .plancha__borde--r { transform: scaleY(1); }
  .plancha__cruz { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: var(--marco);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.cabecera__in {
  max-width: var(--wrap);
  margin-inline: auto;
  height: var(--cabecera-h);
  padding-inline: max(var(--gutter), calc(var(--marco) + 1rem));
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.cabecera__ref { flex: none; }

.cabecera__nav {
  display: none;
  align-items: center;
  gap: clamp(0.8rem, 1.6vw, 1.5rem);
  margin-inline: auto;
}
.cabecera__nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.cabecera__nav a:hover { color: var(--ink); }
.cabecera__nav a.is-aqui {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

@media (min-width: 1000px) { .cabecera__nav { display: flex; } }

.cabecera__wa {
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

@media (max-width: 999px) {
  .cabecera__ref { margin-right: auto; }
}
@media (max-width: 419px) {
  .cabecera__ref { display: none; }
  .cabecera__in .idioma { margin-right: auto; }
}

/* -----------------------------------------------------------------------------
   Hero — el video vive dentro de la lámina, no a sangre.
   -------------------------------------------------------------------------- */
.hero {
  padding: clamp(0.9rem, 2vw, 1.6rem)
           max(var(--gutter), calc(var(--marco) + 1rem))
           clamp(1.5rem, 3vw, 2.5rem);
}

.hero__lamina {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  min-height: min(76svh, 640px);
  display: flex;
  overflow: hidden;
  background: var(--verde-sombra);
  border-radius: 3px;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(9, 20, 15, 0.88) 0%, rgba(9, 20, 15, 0.5) 42%, rgba(9, 20, 15, 0.1) 72%),
    linear-gradient(to right, rgba(9, 20, 15, 0.55), transparent 60%);
}

.hero__marca {
  position: absolute;
  z-index: 2;
  color: rgba(232, 237, 230, 0.72);
  font-size: 0.66rem;
}
.hero__marca--tl { top: 1rem; left: 1.1rem; }
.hero__marca--br { bottom: 1rem; right: 1.1rem; }

.hero__texto .display {
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  font-stretch: 116%;
}

.hero__texto {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  padding-bottom: clamp(2.6rem, 5vw, 3.6rem);
  max-width: 42rem;
  color: var(--lamina);
}

.hero__texto .lead {
  color: rgba(232, 237, 230, 0.82);
  margin-top: 1.1rem;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.9rem;
}

.hero__btn-alt {
  border-color: rgba(232, 237, 230, 0.4);
  color: var(--lamina);
}
.hero__btn-alt:hover { background: rgba(232, 237, 230, 0.14); }

@media (max-width: 719px) {
  .hero__lamina { min-height: min(82svh, 620px); }
  .hero__marca--tl { display: none; }
}

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

.leyenda__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.leyenda__celda {
  background: var(--bg);
  padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1rem, 2vw, 1.6rem);
}
.leyenda__celda dt { color: var(--ink-2); }
.leyenda__celda dd { margin-top: 0.75rem; }
.leyenda__celda p {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.figure--palabra {
  font-family: var(--f-text);
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  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;
}

/* -----------------------------------------------------------------------------
   Entorno
   -------------------------------------------------------------------------- */
.entorno { padding-bottom: 0; }
.entorno__lead { max-width: 54ch; margin-top: 1.2rem; }

.entorno__figura {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-inline: max(var(--gutter), calc(var(--marco) + 1rem));
}
.entorno__figura img {
  width: 100%;
  max-width: var(--wrap);
  max-height: 62svh;
  object-fit: cover;
  margin-inline: auto;
  border-radius: 3px;
}

/* -----------------------------------------------------------------------------
   Recorrido
   -------------------------------------------------------------------------- */
.recorrido .lead { margin-top: 1.1rem; }
.recorrido__marco {
  position: relative;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  border-radius: 3px;
  overflow: hidden;
  background: var(--verde-sombra);
}
.recorrido__marco img { width: 100%; }

.recorrido__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--verde-sombra);
}

.recorrido__play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  color: var(--lamina);
  background: linear-gradient(rgba(9, 20, 15, 0.12), rgba(9, 20, 15, 0.55));
  font-family: var(--f-data);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background var(--d-fast) var(--e-out);
}
.recorrido__play:hover { background: linear-gradient(rgba(9, 20, 15, 0.25), rgba(9, 20, 15, 0.68)); }
.recorrido__icono {
  width: 3.6rem;
  height: 3.6rem;
  padding: 0.9rem;
  fill: currentColor;
  border: 1px solid rgba(232, 237, 230, 0.55);
  border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   Cierre — el formulario sobre la aérea limpia.
   -------------------------------------------------------------------------- */
.cierre {
  position: relative;
  isolation: isolate;
  /* Respaldo: si la aérea no carga, el texto claro sigue sobre verde oscuro. */
  background: var(--verde-sombra);
  color: var(--lamina);
  --ink: var(--lamina);
  --ink-2: rgba(232, 237, 230, 0.78);
  --rule: rgba(232, 237, 230, 0.18);
  --rule-firm: rgba(232, 237, 230, 0.38);
  --bg: var(--verde-sombra);
}

.cierre__fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.cierre__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cierre__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(9, 20, 15, 0.9), rgba(9, 20, 15, 0.58));
}

.cierre__in {
  display: grid;
  gap: clamp(2.2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 880px) {
  .cierre__in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

.cierre__texto .title { margin-bottom: 1.1rem; }
.cierre__tel {
  margin-top: 1.6rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.cierre__tel a { text-decoration: none; border-bottom: 1px solid var(--rule-firm); }

.cierre__form .field input,
.cierre__form .field select,
.cierre__form .field textarea {
  background: rgba(9, 20, 15, 0.5);
  color: var(--lamina);
}
.cierre__form .field select option { color: #12261d; }

/* -----------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie {
  padding-block: clamp(2.2rem, 4vw, 3rem);
  padding-bottom: calc(clamp(2.2rem, 4vw, 3rem) + 4.5rem);
  border-top: 1px solid var(--rule);
}
.pie__in { display: grid; gap: 0.9rem; }
.pie a { color: var(--accent); }
.pie__aviso {
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.7;
  max-width: 62ch;
}

@media (min-width: 880px) {
  .pie { padding-bottom: clamp(2.2rem, 4vw, 3rem); }
}

/* -----------------------------------------------------------------------------
   El cajetín — rótulo fijo, como en la esquina de un plano.
   -------------------------------------------------------------------------- */
.cajetin {
  position: fixed;
  z-index: 55;
  right: calc(var(--marco) + 10px);
  bottom: calc(var(--marco) + 10px);
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(18, 38, 29, 0.16);
  overflow: hidden;
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}

.cajetin.is-retirado {
  opacity: 0;
  transform: translateY(150%);
  pointer-events: none;
}

.cajetin__id {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.95rem;
  border-right: 1px solid var(--rule-firm);
}
.cajetin__sitio {
  color: var(--ink-2);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.cajetin__wa {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--f-data);
  font-size: var(--t-data);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--d-fast) var(--e-out);
}
.cajetin__wa:hover { background: var(--trazo-hover); }
.cajetin__wa svg { width: 1.2rem; height: 1.2rem; fill: currentColor; flex: none; }

@media (min-width: 880px) {
  .cajetin__id { display: flex; }
}

/* En móvil el cajetín ocupa el ancho: es la única acción visible. */
@media (max-width: 879px) {
  .cajetin {
    left: calc(var(--marco) + 10px);
    right: calc(var(--marco) + 10px);
    bottom: calc(var(--marco) + 8px);
  }
  .cajetin__wa { flex: 1; justify-content: center; padding-block: 0.85rem; }
}

/* -----------------------------------------------------------------------------
   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; }

/* El cierre invierte los papeles, así que las vías alternas van claras. */
.cierre .via { border-color: rgba(232, 237, 230, 0.34); color: var(--lamina); }
.cierre .via:hover { background: rgba(232, 237, 230, 0.14); }
.cierre .via.is-hecho { border-color: #8fd8a8; color: #8fd8a8; }