.conoce {
  --ancho: 1480px;
  --margen-conoce: clamp(16px, 3vw, 44px);
  --linea: #cadfd6;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 19% 4%, #d6eaf2 0%, transparent 56%),
    radial-gradient(ellipse at 87% 83%, #e0f3e9 0%, transparent 62%),
    #f7faf8;
}

.conoce-cabecera, .conoce-principal, .conoce-pie {
  width: min(var(--ancho), calc(100% - 2 * var(--margen-conoce)));
  margin-inline: auto;
}

.conoce-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 6px;
}

.conoce-marca {
  display: grid;
  place-items: center;
  flex: 0 1 220px;
  min-width: 0;
  min-height: 44px;
}

.conoce-marca img { width: 100%; height: auto; }

.conoce-reserva {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--deep-freedom);
  color: white;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.conoce-reserva:hover { background: var(--deep-freedom-hover); }

.conoce-principal {
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr);
  max-height: 800px;
  gap: clamp(12px, 2.4vh, 22px);
  padding-block: 6px 8px;
}

.conoce h1, .conoce h2, .conoce h3 {
  font-family: var(--f-identidad);
  line-height: 1.08;
}

.conoce h1 {
  text-align: center;
  font-size: clamp(2.15rem, 5vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -.035em;
}

.conoce-lienzo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(20px, 3vw, 44px) minmax(0, 2fr);
  align-items: center;
  padding: clamp(16px, 3vw, 30px);
  border: 1px solid #d8e8e0;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 14px 42px rgba(30,107,85,.08);
}

.conoce-equipo, .conoce-proyectos { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.conoce-lienzo h2 { margin-bottom: 12px; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 750; }

.conoce-personas {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  gap: 10px 8px;
  margin: 0;
  padding: 14px 8px;
  list-style: none;
  border: 1px solid #dceae3;
  border-radius: 16px;
  background: radial-gradient(circle, #cbded5 1px, transparent 1px) 0 0 / 15px 15px, #f3f9f6;
}

.conoce-personas::before {
  content: "";
  position: absolute;
  inset: 25% 25%;
  z-index: -1;
  border: 1px solid #b8d9cb;
  border-radius: 22px;
}

.conoce-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 4px;
  text-align: center;
  line-height: 1.25;
}

.conoce-retrato {
  position: relative;
  display: block;
  width: clamp(66px, 8.4vw, 104px);
  margin-bottom: 3px;
  padding: 4px;
  border: 1px solid #a8ccbd;
  border-radius: 50%;
  background: #fbfffd;
  box-shadow: 0 5px 14px rgba(30,107,85,.16);
}

.conoce-retrato img { display: block; width: 100%; height: auto; border-radius: 50%; }
.conoce-retrato::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--freedom-green);
}

.conoce-persona strong { font-size: .9rem; }
.conoce-departamento { color: var(--deep-freedom); font-size: .75rem; font-weight: 750; line-height: 1.2; }
.conoce-funcion { color: var(--texto-suave); font-size: .77rem; }

.conoce-conexion {
  position: relative;
  overflow: hidden;
  height: 2px;
  background: var(--linea);
}

.conoce-conexion span, .conoce-conexion::after {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--deep-freedom), transparent);
}

.conoce-conexion::after { content: ""; }

.conoce-exposicion {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 340px;
  overflow: hidden;
  border: 1px solid #c3d6ce;
  border-radius: 16px;
  background: #24463e;
}

.conoce-vestibulo { min-width: 0; }

.conoce-vestibulo {
  --alto-puerta: clamp(196px, 35vh, 270px);
  --umbral: calc(50% + var(--alto-puerta) / 2 - 6px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 132px));
  place-content: center;
  gap: clamp(10px, 1.9vw, 26px);
  padding: 30px clamp(14px, 4vw, 52px) 42px;
  background:
    linear-gradient(90deg, #243d3527, transparent 22% 78%, #243d3527),
    linear-gradient(180deg, #eff7f1, #d4e4dc var(--umbral), #7b9186 var(--umbral) calc(var(--umbral) + 2px), #b8cdc1 calc(var(--umbral) + 3px), #e1ebe5);
}

:is(.conoce-puerta, .conoce-galeria)[data-sector="abogados"] { --color-sector: var(--sector-abogados); }
:is(.conoce-puerta, .conoce-galeria)[data-sector="distribuidores"] { --color-sector: var(--sector-distribuidores); }
:is(.conoce-puerta, .conoce-galeria)[data-sector="publico"] { --color-sector: var(--sector-publico); }
:is(.conoce-puerta, .conoce-galeria)[data-sector="generales"] { --color-sector: var(--sector-generales); }

.conoce-puerta {
  --luz-puerta: color-mix(in srgb, var(--color-sector) 32%, white);
  position: relative;
  min-width: 0;
  block-size: var(--alto-puerta);
  padding: 5px 5px 0;
  border: 1px solid #819c90;
  border-bottom: 0;
  border-radius: 5px 5px 1px 1px;
  background: linear-gradient(90deg, #f3fbf5, #a8bfb3 48%, #e6f1ea);
  box-shadow: 5px 10px 22px #19332b36, 0 0 0 2px #eef8f04d;
  cursor: pointer;
}

.conoce-puerta::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 38%;
  width: 24%;
  height: 3px;
  border-radius: 3px;
  background: #a0b8ad;
  transition: background-color .24s, box-shadow .24s;
}

.conoce-puerta:hover::before, .conoce-puerta:focus-visible::before, .conoce-puerta[data-abierta]::before {
  background: #fff;
  box-shadow: 0 5px 20px 5px var(--luz-puerta);
}

.conoce-puerta-marco {
  display: block;
  height: 100%;
  padding: 2px 2px 0;
  perspective: 540px;
  background:
    radial-gradient(ellipse at 53% 22%, var(--luz-puerta), transparent 58%),
    linear-gradient(155deg, var(--color-sector), #1b2425 78%);
  box-shadow: inset 0 2px 8px #0f241c80;
}

.conoce-puerta-hoja {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  height: 100%;
  padding: 36% 4px 0;
  transform-origin: left center;
  border: 1px solid #1a3b34;
  background:
    repeating-linear-gradient(90deg, #e8fff008 0 1px, transparent 1px 13px),
    linear-gradient(108deg, #061b1d30, transparent 60%, #092c2954),
    var(--color-sector);
  box-shadow: inset 0 0 0 3px #c5ecdb1a;
  transition: transform .48s cubic-bezier(.36,.11,.35,1);
}

.conoce-puerta[data-abierta] .conoce-puerta-hoja { transform: rotateY(-80deg); }

.conoce-puerta-hoja::before {
  content: "";
  position: absolute;
  inset: 6% 10%;
  border: 1px solid #d3f1df3c;
  border-radius: 2px;
  box-shadow: 0 1px 1px #102d24b0;
  pointer-events: none;
}

.conoce-puerta-hoja::after {
  content: "";
  position: absolute;
  top: 58%;
  right: 11%;
  width: clamp(7px, 1.1vw, 14px);
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fcf6d7, #a8a079);
  box-shadow: 1px 2px 2px #14251da6;
}

.conoce-puerta-placa {
  position: relative;
  max-width: 100%;
  padding: 6px 4px;
  border: 1px solid #ebf7ee80;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-sector) 45%, #14241e);
  color: #fff;
  font-size: clamp(.66rem, 1.22vw, .91rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.conoce-puerta[data-sector="distribuidores"] .conoce-puerta-placa {
  font-size: clamp(.63rem, 1.02vw, .82rem);
  overflow-wrap: normal;
}

.conoce-galeria {
  --color-sector: var(--sector-generales);
  --acento-galeria: color-mix(in srgb, var(--color-sector) 24%, white);
  --sala-luz: color-mix(in srgb, var(--color-sector) 63%, #3e4546);
  --sala-fondo: color-mix(in srgb, var(--color-sector) 46%, #161e20);
  --sala-sombra: color-mix(in srgb, var(--color-sector) 32%, #101818);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(12px, 1.85vw, 28px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  background: radial-gradient(ellipse at 50% 10%, var(--sala-luz), var(--sala-fondo) 76%);
  color: #f2fff7;
}

html:has(.conoce-galeria[open]) { overflow: hidden; }
.conoce-galeria[open] { display: grid; grid-template-rows: auto minmax(300px, 1fr) auto; gap: 12px; }
.conoce-galeria::backdrop { background: transparent; }
.conoce-galeria[data-entrando] { pointer-events: none; }

.conoce-galeria-cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.conoce-galeria-cabecera [data-volver] { justify-self: start; }
.conoce-galeria-cabecera .conoce-reserva {
  justify-self: end;
  background: var(--freedom-green);
  color: var(--graphite);
}
.conoce-galeria-cabecera .conoce-reserva:hover { background: var(--mint-glow); }
.conoce-galeria-identidad { display: grid; gap: 3px; text-align: center; }
.conoce-galeria-identidad h2 { font-size: clamp(1.4rem, 2.5vw, 2.45rem); }
.conoce-galeria-sector { margin: 0; color: var(--acento-galeria); font-size: .86rem; line-height: 1.2; }

.conoce-galeria-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #aacbbf75;
  border-radius: 8px;
  background: var(--sala-sombra);
  color: #f5fff9;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}

.conoce-galeria-boton:hover { background: var(--sala-luz); }
.conoce-galeria-boton[aria-disabled="true"] { opacity: .55; cursor: default; }
.conoce-galeria-boton[aria-disabled="true"]:hover { background: var(--sala-sombra); }
.conoce-galeria-boton:focus-visible, .conoce-cuadro:focus-visible {
  outline: 2px solid var(--acento-galeria);
  outline-offset: 3px;
}

.conoce-pared {
  --ancho-cuadro: min(77%, 1320px);
  --separacion-cuadros: clamp(12px, 2vw, 26px);
  --margen-cuadro: clamp(16px, 4.7svh, 52px);
  --junta-suelo: calc(100% - var(--margen-cuadro));
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding-block: var(--margen-cuadro);
  overflow: clip;
  border: 1px solid #aacbbf32;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--acento-galeria) 26%, transparent), transparent 68%),
    linear-gradient(180deg, var(--sala-luz) var(--junta-suelo), var(--sala-sombra) calc(var(--junta-suelo) + 2px), color-mix(in srgb, var(--sala-luz) 76%, var(--acento-galeria)) calc(var(--junta-suelo) + 4px), var(--sala-fondo) 100%);
  touch-action: pan-y pinch-zoom;
}

.conoce-galeria[data-casos="1"] .conoce-pared { --ancho-cuadro: min(94%, 1560px); }

.conoce-pared-fondo {
  position: absolute;
  inset: 0 -170px;
  z-index: -1;
  transform: translateX(calc(-72px * var(--cuadro-activo, 0)));
  background: repeating-linear-gradient(
    90deg, transparent 0 118px, #132d2642 119px 120px, #bad4c321 121px 122px
  );
  pointer-events: none;
}

.conoce-riel {
  display: grid;
  grid-auto-columns: var(--ancho-cuadro);
  grid-auto-flow: column;
  gap: var(--separacion-cuadros);
  width: 100%;
  min-width: 0;
  min-height: 0;
  transform: translateX(calc(
    (100% - var(--ancho-cuadro)) / 2 -
    var(--cuadro-activo, 0) * (var(--ancho-cuadro) + var(--separacion-cuadros))
  ));
}

.conoce-expuesto {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.conoce-elegir-cuadro[hidden] { display: none; }

.conoce-galeria[data-vista="sala"] .conoce-riel {
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--casos-sala), minmax(0, 1fr));
  align-items: center;
  gap: clamp(14px, 2.5vw, 36px);
  padding-inline: clamp(16px, 3.6vw, 54px);
  transform: none;
}

.conoce-galeria[data-vista="sala"] .conoce-expuesto {
  --alto-letrero: 32px;
  position: relative;
  height: min(100%, clamp(170px, 26vw, 336px));
  grid-template-rows: var(--alto-letrero) minmax(0, 1fr);
  gap: 10px;
}

.conoce-elegir-cuadro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: var(--alto-letrero) 1fr;
  justify-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #f2fff8;
  cursor: zoom-in;
}

.conoce-letrero {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  max-width: 100%;
  gap: 6px;
  padding-inline: clamp(6px, 1vw, 14px);
  border: 1px solid #cfe1d37a;
  border-radius: 4px;
  background: var(--sala-sombra);
  box-shadow: 0 5px 15px #0b131b45;
  font-size: clamp(.73rem, 1.3vw, 1.03rem);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.conoce-letrero::after { content: "↗"; color: var(--acento-galeria); font-size: .86em; }
.conoce-elegir-cuadro:focus-visible { outline: 2px solid #f1fff8; outline-offset: 4px; }
.conoce-elegir-cuadro:is(:hover, :focus-visible) .conoce-letrero { background: var(--sala-luz); }
.conoce-elegir-cuadro:is(:hover, :focus-visible) + .conoce-cuadro { box-shadow: 0 12px 30px #102820c2, 0 0 0 1px var(--acento-galeria); }

.conoce-galeria[data-cambiando] :is(.conoce-riel, .conoce-pared-fondo) { transition: none !important; }

.conoce-cuadro {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 11px;
  min-width: 0;
  min-height: 0;
  padding: clamp(11px, 1.5vw, 21px);
  border: 5px solid var(--sala-sombra);
  background: color-mix(in srgb, var(--acento-galeria) 18%, #f7faf8);
  color: #1c352d;
  box-shadow: 0 10px 19px #102820a0, inset 0 0 0 1px #afc9bd;
}

.conoce-cuadro[inert] { opacity: .7; }

.conoce-galeria[data-vista="cuadro"] .conoce-cuadro:not([inert]) { position: relative; z-index: 1; }

.conoce-galeria[data-vista="sala"] .conoce-cuadro {
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  padding: clamp(7px, 1.2vw, 16px);
  border-width: 4px;
  opacity: 1;
}

.conoce-galeria[data-vista="sala"] .conoce-cuadro-contexto { font-size: .61rem; }
.conoce-galeria[data-vista="sala"] .conoce-cuadro h3 { font-size: clamp(1rem, 1.8vw, 1.6rem); }
.conoce-galeria[data-vista="sala"] .conoce-comparacion { border-radius: 4px; }
.conoce-galeria[data-vista="sala"] .conoce-tramo { --glifo: 13px; padding: 4px 6px; gap: 2px; grid-template-rows: auto minmax(0, 1fr); }
.conoce-galeria[data-vista="sala"] .conoce-tramo h4 { font-size: .72rem; }
.conoce-galeria[data-vista="sala"] .conoce-accion small { display: none; }
.conoce-galeria[data-vista="sala"] .conoce-accion { gap: 4px; }
.conoce-galeria[data-vista="sala"] .conoce-manual > li:nth-child(n+4) { display: none; }
.conoce-galeria[data-vista="sala"] .conoce-accion strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.54rem, .85vw, .72rem);
}

.conoce-cuadro-cabecera { display: grid; gap: 3px; }
.conoce-cuadro-contexto {
  margin: 0;
  color: #436357;
  font-size: clamp(.65rem, 1vw, .82rem);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.conoce-cuadro h3 { font-size: clamp(1.34rem, 2.9vw, 3rem); font-weight: 750; letter-spacing: -.025em; }

.conoce-comparacion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  border: 1px solid #b6cbbf;
  border-radius: 9px;
  container-type: size;
}

.conoce-tramo {
  --tramo-acento: #2a5744;
  --tramo-glifo: #d2eadc;
  --glifo: clamp(20px, 3.8cqw, 35px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(3px, 1.2cqh, 8px);
  min-width: 0;
  min-height: 0;
  padding: clamp(6px, 2.3cqh, 15px) clamp(8px, 2.2cqw, 22px);
  background: #e8f6ed;
  color: var(--tramo-acento);
}

.conoce-tramo[data-tramo="manual"] {
  --tramo-acento: #6b4835;
  --tramo-glifo: #f2e1d1;
  background: #faf3eb;
  border-inline-end: 1px solid #a9b8ab;
}

.conoce-tramo h4 {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1rem, 3.2cqw, 1.83rem);
  line-height: 1.1;
}

.conoce-manual, .conoce-asistido {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.conoce-manual, .conoce-asistido { grid-auto-rows: minmax(0, 1fr); }
.conoce-manual > li, .conoce-asistido > li { position: relative; display: grid; align-items: center; min-width: 0; min-height: 0; }

.conoce-manual > li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--glifo) / 2);
  inset-block: 50% -50%;
  border-inline-start: 1px dashed #b99a83;
  pointer-events: none;
}

.conoce-accion {
  position: relative;
  display: grid;
  grid-template-columns: var(--glifo, 24px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(4px, 1.3cqw, 13px);
  min-width: 0;
}

.conoce-accion-icono {
  display: grid;
  place-items: center;
  width: var(--glifo, 24px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--tramo-acento, #2a5744);
  background: var(--tramo-glifo, #d8ede1);
}

.conoce-accion-icono svg { width: 54%; height: 54%; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.conoce-accion[data-responsable="clon"] .conoce-accion-icono { background: #315c49; color: #fff; }

.conoce-accion-texto { display: grid; gap: 2px; min-width: 0; }
.conoce-accion-texto strong { font-size: clamp(.64rem, 1.84cqw, 1.05rem); line-height: 1.13; }
.conoce-accion-texto small { color: #425d51; font-size: clamp(.64rem, 1.41cqw, .82rem); line-height: 1.18; }
.conoce-manual .conoce-accion-texto small { color: #6b5243; }

.conoce-asistido > li:not(:last-child) { border-block-end: 1px solid #bfd7c7; }
.conoce-aprendizaje .conoce-accion { align-items: start; }
.conoce-aprendizaje .conoce-accion-texto { gap: 3px; }
.conoce-aprendizaje .conoce-accion-texto small { line-height: 1.12; }
.conoce-aprendizaje .conoce-accion-texto small:first-of-type {
  color: #274d3d;
  font-weight: 650;
}

@container (max-width: 530px) {
  .conoce-accion-texto strong { font-size: .76rem; }
  .conoce-accion-texto small { font-size: .69rem; }
}

@container (max-width: 350px) {
  .conoce-tramo { padding: 6px; }
  .conoce-tramo h4 { font-size: .9rem; }
  .conoce-tramo .conoce-accion { gap: 5px; }
  .conoce-tramo .conoce-accion-texto small { font-size: .66rem; }
  .conoce-tramo[data-tramo="manual"] { --glifo: 8px; }
  .conoce-manual { grid-auto-rows: auto; }
  .conoce-manual .conoce-accion-icono { border: 1px solid #a88268; }
  .conoce-manual .conoce-accion-icono svg { display: none; }
  .conoce-tramo[data-tramo="asistido"] { --glifo: 16px; }
}

.conoce-galeria[data-vista="cuadro"] .conoce-cuadro {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(4px, 1.15vh, 9px);
}

.conoce-galeria[data-vista="cuadro"] :is(.conoce-manual, .conoce-asistido) {
  grid-auto-rows: minmax(min-content, 1fr);
}

.conoce-accion-agrupada .conoce-accion-texto {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 5px;
}

.conoce-subtareas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: #36584a;
  font-size: clamp(.65rem, 1.28cqw, .81rem);
}

.conoce-llave {
  color: #477c64;
  font: 400 3.6em/.85 Georgia, serif;
}

.conoce-subtareas ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding-inline-start: 1em;
  list-style: disc outside;
  line-height: 1.15;
}

.conoce-galeria[data-vista="sala"] .conoce-accion-agrupada .conoce-accion-texto { display: block; }
.conoce-galeria[data-vista="sala"] .conoce-subtareas { display: none; }

.conoce-detalles-caso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.conoce-galeria[data-vista="sala"] .conoce-detalles-caso { display: none; }

.conoce-recuadro-caso {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(3px, .55vw, 5px);
  min-width: 0;
  padding: clamp(5px, .55vw, 8px) clamp(6px, 1.05vw, 13px);
  border: 1px solid #c6d3c9;
  border-radius: 7px;
  font-size: clamp(.67rem, .93vw, .8rem);
  line-height: 1.2;
}

.conoce-recuadro-herramientas {
  border-color: #d6c7b5;
  background: #faf3eb;
  color: #604a38;
}

.conoce-recuadro-one-stop {
  border-color: #b9d1c1;
  background: #e8f6ed;
  color: #284f3e;
}

.conoce-recuadro-caso :is(h4, p, ul) { margin: 0; }
.conoce-recuadro-caso h4 {
  font-size: clamp(.75rem, 1.15vw, .96rem);
  line-height: 1.12;
  font-weight: 800;
}

.conoce-herramientas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  list-style: none;
}

.conoce-herramientas > li {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid #e0d1bf;
  border-radius: 4px;
  background: #fffbf6;
}

.conoce-herramientas strong {
  font-size: .94em;
  font-weight: 750;
}
.conoce-archivo-herramienta { color: #624f3e; }

.conoce-indicador-herramienta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
  margin-block-end: 2px;
}

.conoce-cantidad-herramienta {
  padding: .2em .4em;
  border-radius: 4px;
  background: #e8ded0;
  color: #483524;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.conoce-cantidad-herramienta:empty, .conoce-archivo-herramienta:empty { display: none; }

.conoce-icono-herramienta {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #eae0f0;
  color: #583b70;
}

.conoce-icono-herramienta[data-icono="carpeta"] { background: #f4e4b7; color: #71531c; }
.conoce-icono-herramienta[data-icono="hoja"] { background: #d8efdf; color: #225b3d; }
.conoce-icono-herramienta[data-icono="portal"] { background: #dceaf1; color: #30536b; }

.conoce-icono-herramienta svg {
  width: 72%;
  height: 72%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conoce-nodo-clon {
  display: grid;
  align-content: center;
  justify-items: center;
  align-self: center;
  justify-self: center;
  width: min(248px, 100%);
  gap: 4px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #96bda5;
  border-radius: 9px;
  background: #f8fdf9;
  box-shadow: 0 0 0 3px #d7eddf;
  text-align: center;
}

.conoce-nodo-clon img {
  display: block;
  width: min(100%, 160px);
  height: auto;
}

.conoce-nodo-clon p { font-weight: 800; }

@media (max-width: 720px) {
  .conoce-detalles-caso { gap: 5px; }
  .conoce-herramientas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .conoce-galeria[data-vista="cuadro"] .conoce-pared { --margen-cuadro: 7px; }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro { gap: 5px; }
  .conoce-herramientas { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .conoce-herramientas > li { display: block; padding: 1px 3px; }
  .conoce-indicador-herramienta { gap: 2px; margin: 0 3px 0 0; vertical-align: middle; }
  .conoce-icono-herramienta {
    width: 15px;
    height: 15px;
    border-radius: 3px;
  }
  .conoce-nodo-clon { padding: 5px; }
}

@container (min-width: 431px) {
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-manual { --glifo: 20px; }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-manual .conoce-accion-texto {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: baseline;
    gap: 0 8px;
  }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-manual strong {
    font-size: clamp(.73rem, 1.6cqw, .98rem);
    line-height: 1.08;
  }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-manual small {
    font-size: clamp(.68rem, 1.3cqw, .78rem);
    line-height: 1.1;
  }
}

@container (max-width: 430px) {
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-manual small { display: none; }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-accion-agrupada { row-gap: 1px; }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-accion-agrupada .conoce-accion-texto { display: contents; }
  .conoce-galeria[data-vista="cuadro"] .conoce-cuadro .conoce-subtareas { grid-column: 1 / -1; }
  .conoce-subtareas ul { gap: 0; line-height: 1.1; }
  .conoce-asistido .conoce-accion strong { font-size: .72rem; }
  .conoce-aprendizaje .conoce-accion { row-gap: 2px; align-items: center; }
  .conoce-aprendizaje .conoce-accion-texto { display: contents; }
  .conoce-aprendizaje .conoce-accion-texto small { grid-column: 1 / -1; }
}

@media (min-width: 721px) and (max-height: 760px) {
  .conoce-galeria[data-vista="cuadro"] .conoce-pared { --margen-cuadro: clamp(15px, 2.4svh, 19px); }
}

@media (max-width: 420px) and (max-height: 660px) {
  .conoce-galeria[open][data-vista="cuadro"] {
    grid-template-rows: auto minmax(604px, 1fr) auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .conoce:not([data-movimiento="pausado"]) :is(.conoce-riel, .conoce-pared-fondo) {
    transition: transform 440ms cubic-bezier(.22,.7,.25,1);
  }
  .conoce:not([data-movimiento="pausado"]) .conoce-cuadro { transition: opacity 220ms ease-out; }
}

.conoce-galeria-pasos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.conoce-galeria-pasos { min-height: 44px; }
.conoce-galeria-pasos > button:first-child { grid-area: 1 / 1; justify-self: start; }
.conoce-galeria-pasos > button:last-child { grid-area: 1 / 3; justify-self: end; }
.conoce-galeria-pasos [hidden] { display: none; }
#galeria-posicion { margin: 0; color: var(--acento-galeria); font-size: .78rem; font-variant-numeric: tabular-nums; }
.conoce-galeria-controles { grid-area: 1 / 2; display: grid; justify-items: center; }
.conoce-galeria .conoce-pausa { color: var(--acento-galeria); font-size: .7rem; }

.conoce-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; font-size: .75rem; line-height: 1.35; }
.conoce-pie a { margin-left: auto; color: var(--deep-freedom); text-underline-offset: 3px; }
.conoce-pausa { min-height: 28px; padding: 0 4px; border: 0; background: transparent; color: var(--deep-freedom); cursor: pointer; }
.conoce-pausa:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .conoce-retrato { animation: conoce-retrato-entra 1.2s cubic-bezier(.22,.61,.36,1) both; }
  .conoce-retrato img { animation: conoce-retrato-flota 8s ease-in-out 1.5s infinite; }
  .conoce-personas li:nth-child(2) img { animation-delay: 2.1s; }
  .conoce-personas li:nth-child(3) img { animation-delay: 2.7s; }
  .conoce-personas li:nth-child(4) img { animation-delay: 3.3s; }
  .conoce-personas li:nth-child(2) .conoce-retrato { animation-delay: 90ms; }
  .conoce-personas li:nth-child(3) .conoce-retrato { animation-delay: 180ms; }
  .conoce-personas li:nth-child(4) .conoce-retrato { animation-delay: 270ms; }
  .conoce-personas::before { animation: conoce-trazo 8s ease-in-out 1.5s infinite; }
  .conoce-conexion::after { animation: conoce-pulso 8s ease-in-out 1.5s infinite; }
  .conoce[data-movimiento="pausado"] .conoce-retrato img,
  .conoce[data-movimiento="pausado"] .conoce-personas::before,
  .conoce[data-movimiento="pausado"] .conoce-conexion::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) { .conoce-pausa { display: none; } }

@keyframes conoce-retrato-entra {
  0% { opacity: 0; transform: translateY(9px) scale(.88); }
  55% { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes conoce-retrato-flota {
  0%, 54%, 100% { transform: translateY(0); }
  23% { transform: translateY(-3px); }
}

@keyframes conoce-trazo {
  0%, 40%, 100% { border-color: #b8d9cb; }
  16% { border-color: #4fae8a; }
}

@keyframes conoce-pulso {
  0%, 10% { transform: translateX(-100%); opacity: 0; }
  18% { opacity: .9; }
  30%, 100% { transform: translateX(100%); opacity: 0; }
}

@media (max-height: 760px) and (min-width: 721px) {
  .conoce-principal { gap: 12px; }
  .conoce-lienzo { padding-block: 18px; }
  .conoce-cuadro { padding-block: clamp(10px, 1.1vw, 16px); gap: 9px; }
}

@media (max-height: 680px) and (min-width: 721px) {
  .conoce-retrato { width: 76px; }
  .conoce h1 { font-size: clamp(2.15rem, 5vw, 3.2rem); }
}

@media (max-width: 960px) {
  .conoce-vestibulo {
    --alto-puerta: clamp(105px, 15.5svh, 146px);
    grid-template-columns: repeat(2, minmax(0, max(78px, calc(var(--alto-puerta) * .68))));
    gap: 23px 16px;
    padding: 17px 12px 12px;
    background: linear-gradient(155deg, #eff7f1, #c5d9ce);
  }
  .conoce-puerta { padding: 4px 4px 0; }
  .conoce-puerta::after {
    content: "";
    position: absolute;
    inset: auto -4px -2px;
    height: 3px;
    background: #8ba498;
  }
  .conoce-puerta-hoja { padding: 20% 2px 0; }
  .conoce-puerta-placa { padding: 4px 3px; font-size: .69rem; }
}

@media (min-width: 721px) {
  .conoce-galeria[data-vista="sala"][data-casos="7"] .conoce-riel {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 12px;
  }
  .conoce-galeria[data-vista="sala"][data-casos="7"] .conoce-expuesto {
    flex: 0 0 calc((100% - 36px) / 4);
    height: min(220px, calc((100% - 12px) / 2));
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .conoce-galeria[data-vista="sala"][data-casos="5"] .conoce-riel {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 12px;
  }
  .conoce-galeria[data-vista="sala"][data-casos="5"] .conoce-expuesto {
    flex: 0 0 calc((100% - 24px) / 3);
    height: min(220px, calc((100% - 12px) / 2));
  }
}

@media (max-width: 720px) {
  .conoce { --margen-conoce: clamp(10px, 3.3vw, 18px); }
  .conoce-cabecera { padding: 8px 0 5px; }
  .conoce-marca { flex-basis: 160px; }
  .conoce-reserva { padding-inline: 11px; font-size: .8rem; }
  .conoce-principal { grid-template-rows: auto auto; align-content: start; gap: 12px; padding-block: 6px; }
  .conoce h1 { font-size: clamp(1.85rem, 7.4vw, 2.9rem); }
  .conoce-lienzo { grid-template-columns: minmax(0, 1fr); padding: 13px; border-radius: 18px; }
  .conoce-lienzo h2 { margin-bottom: 8px; font-size: 1.24rem; }
  .conoce-personas { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; align-items: stretch; gap: 2px; padding: 7px 2px; }
  .conoce-personas::before { inset: 33% 10% auto; border-radius: 0; border-width: 1px 0 0; }
  .conoce-retrato { width: min(100%, 60px); margin: 0; padding: 3px; }
  .conoce-persona { padding: 2px; gap: 4px; }
  .conoce-persona strong { font-size: .69rem; }
  .conoce-persona .conoce-departamento { font-size: .68rem; }
  .conoce-funcion { display: none; }
  .conoce-conexion { width: 16px; margin-block: 7px; justify-self: center; transform: rotate(90deg); }
  .conoce-exposicion { min-block-size: clamp(320px, 45.6svh, 328px); }
  .conoce-galeria { padding: 12px; }
  .conoce-galeria[open] { grid-template-rows: auto minmax(280px, 1fr) auto; gap: 9px; }
  .conoce-galeria-cabecera { grid-template-columns: 1fr 1fr; gap: 7px; }
  .conoce-galeria-identidad {
    grid-area: 2 / 1 / auto / -1;
    grid-auto-flow: column;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
  }
  .conoce-galeria-boton { padding-inline: 10px; font-size: .75rem; }
  .conoce-galeria-sector { font-size: .75rem; }
  .conoce-pared { --ancho-cuadro: 88%; --separacion-cuadros: 7px; --margen-cuadro: clamp(11px, 3.4svh, 26px); }
  .conoce-galeria[data-vista="cuadro"] .conoce-pared { --ancho-cuadro: 100%; }
  .conoce-galeria[data-vista="sala"] .conoce-riel {
    width: min(95%, 480px);
    justify-self: center;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--casos-sala), minmax(0, 1fr));
    padding-inline: 4px;
    gap: 6px;
  }
  .conoce-galeria[data-vista="sala"] .conoce-expuesto { --alto-letrero: 23px; height: min(100%, 154px); gap: 4px; }
  .conoce-galeria[data-vista="sala"][data-casos="7"] .conoce-riel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .conoce-galeria[data-vista="sala"][data-casos="7"] .conoce-expuesto { --alto-letrero: 29px; }
  .conoce-galeria[data-vista="sala"][data-casos="7"] .conoce-expuesto:last-child { grid-column: 1 / -1; }
  .conoce-galeria[data-vista="sala"] .conoce-cuadro { gap: 4px; padding: 5px 7px; border-width: 3px; }
  .conoce-galeria[data-vista="sala"] .conoce-cuadro-contexto { display: none; }
  .conoce-galeria[data-vista="sala"] .conoce-tramo { --glifo: 10px; padding: 2px 4px; gap: 1px; }
  .conoce-galeria[data-vista="sala"] .conoce-tramo h4 { font-size: .59rem; }
  .conoce-galeria[data-vista="sala"] :is(.conoce-manual, .conoce-asistido) > li:not(:first-child) { display: none; }
  .conoce-cuadro { gap: 7px; padding: 8px; border-width: 4px; }
  .conoce-cuadro h3 { font-size: clamp(1.12rem, 4.5vw, 1.6rem); }
  .conoce-pie { padding-bottom: 4px; }
}

@media (max-width: 720px) and (max-height: 680px) {
  .conoce-galeria[data-vista="sala"] .conoce-cuadro { grid-template-rows: 1fr; align-items: center; }
  .conoce-galeria[data-vista="sala"] .conoce-comparacion { display: none; }
}

@media (max-width: 420px) and (max-height: 610px) {
  .conoce-cabecera { padding-block: 4px 2px; }
  .conoce-principal { gap: 6px; padding-block: 3px; }
  .conoce h1 { font-size: 1.72rem; }
  .conoce-lienzo { padding: 8px 10px; }
  .conoce-lienzo h2 { margin-bottom: 5px; font-size: 1.12rem; }
  .conoce-personas { padding-block: 4px; }
  .conoce-retrato { max-width: 45px; }
  .conoce-persona { gap: 2px; }
  .conoce-persona strong { font-size: .65rem; line-height: 1.15; }
  .conoce-conexion { width: 10px; margin-block: 4px; }
  .conoce-exposicion { min-block-size: 268px; }
  .conoce-vestibulo { gap: 22px 13px; padding-inline: 8px; }
  .conoce-puerta-placa { padding-inline: 2px; font-size: .63rem; }
  .conoce-galeria { padding: 8px; }
  .conoce-galeria[open] { gap: 7px; }
  .conoce-pared { --ancho-cuadro: 90%; --separacion-cuadros: 4px; --margen-cuadro: 12px; }
  .conoce-galeria[data-vista="sala"] .conoce-cuadro h3 { font-size: .94rem; }
  .conoce-galeria[data-vista="sala"] .conoce-manual, .conoce-galeria[data-vista="sala"] .conoce-asistido { gap: 0; }
  .conoce-cuadro { padding: 5px 6px; gap: 4px; border-width: 3px; }
}