.casos.seccion { padding-bottom: 0; }
.casos__cabecera { row-gap: 1rem; padding-bottom: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); }
.casos__cabecera .titular { max-width: 16ch; }
@media (min-width: 64em) {
  .casos__cabecera { align-items: end; }
  .casos__cabecera .apoyo { padding-bottom: 0.35rem; }
}

.mundo {
  --fondo: var(--carbon); --texto: var(--hueso); --texto-2: var(--plata); --acento: var(--borgona);
  --filete: var(--filete-sobre-carbon); --luz: transparent;
  --disp-bisel: var(--carbon); --disp-borde: var(--filete-sobre-carbon); --disp-pie: var(--carbon);
  --disp-filete: var(--filete);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding-block: calc(var(--alto-cabecera) + clamp(2rem, 1.5rem + 2vw, 3rem)) clamp(3.5rem, 2.5rem + 4vw, 5rem);
  background: var(--fondo); color: var(--texto);
}

.mundo--el-jichi {
  --fondo: #04100A; --texto: #EAF3EB; --texto-2: #A2B8A7; --acento: #7CFC58;
  --filete: rgb(234 243 235 / 0.2); --luz: rgb(124 252 88 / 0.14);
  --disp-borde: rgb(234 243 235 / 0.18); --disp-pie: #18201A; --disp-filete: rgb(124 252 88 / 0.5);
  --ancho-nombre: 4.42;
}
.mundo--immu {
  --fondo: #FCB6CE; --texto: #24141A; --texto-2: #5C2F40; --acento: #D9487F;
  --filete: rgb(36 20 26 / 0.22); --luz: rgb(217 72 127 / 0.16);
  --disp-bisel: #161515; --disp-borde: #161515; --disp-pie: #2B1A21; --disp-filete: rgb(36 20 26 / 0.45);
  --ancho-nombre: 3.7;
}
.mundo--codex {
  --fondo: #0E0E0E; --texto: #F5F5F5; --texto-2: #A8A8A8; --acento: #F4601B;
  --filete: rgb(245 245 245 / 0.2); --luz: rgb(244 96 27 / 0.14);
  --disp-borde: rgb(245 245 245 / 0.18); --disp-pie: #1F1F1F; --disp-filete: rgb(244 96 27 / 0.55);
  --ancho-nombre: 6.12;
}
.mundo--sk-solar {
  --fondo: #0E1A1A; --texto: #EEF3F2; --texto-2: #9DB1AE; --acento: #F3901E;
  --filete: rgb(238 243 242 / 0.2); --luz: rgb(243 144 30 / 0.13);
  --disp-borde: rgb(238 243 242 / 0.18); --disp-pie: #1A2828; --disp-filete: rgb(243 144 30 / 0.5);
  --ancho-nombre: 5.36;
}

.mundo--oscuro + .mundo--oscuro { border-top: 1px solid var(--filete); }
.mundo--oscuro:last-child { border-bottom: 1px solid var(--filete); }

.mundo__rejilla { align-items: start; }
.mundo__titulo, .mundo__medio, .mundo__cuerpo { grid-column: 1 / -1; }

.mundo__titulo { container-type: inline-size; }
.mundo__nombre {
  font-size: clamp(3rem, 1rem + 8vw, 8rem);
  font-size: min(clamp(3rem, 1rem + 8vw, 8rem), 100cqi / var(--ancho-nombre, 4.4));
  font-weight: var(--peso-titular); font-stretch: calc(var(--ancho-titular) * 1%); font-variation-settings: "wdth" var(--ancho-titular);
  line-height: 0.98; letter-spacing: -0.005em;
  margin-left: -0.055em;
}
.mundo__rubro {
  display: flex; align-items: flex-start; gap: 0.875rem; margin-top: clamp(0.875rem, 0.5rem + 1vw, 1.375rem);
  font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--texto-2);
}

.mundo__filete { flex: none; width: clamp(2.5rem, 1.75rem + 2vw, 4rem); height: 2px; margin-top: calc(0.65em - 1px); background: var(--acento); --origen: left center; }

.mundo__cuerpo { display: grid; justify-items: start; row-gap: 1.25rem; }
.mundo__etiqueta { display: block; margin-bottom: 0.25rem; font-size: var(--t-chico); font-weight: 600; color: var(--texto-2); }
.mundo__hicimos { max-width: min(40ch, 100%); text-wrap: pretty; overflow-wrap: break-word; }
.mundo__esencia {
  max-width: min(19ch, 100%); margin-top: 0.5rem; overflow-wrap: break-word; hyphens: manual;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); font-weight: 500; line-height: 1.16; letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (max-width: 22em) { .mundo__esencia { hyphens: auto; hyphenate-limit-chars: 12 6 6; } }
.mundo__nota { max-width: min(40ch, 100%); overflow-wrap: break-word; font-size: var(--t-chico); color: var(--texto-2); }
.mundo__enlace { margin-top: 0.25rem; }
.mundo__enlace::before { background: var(--acento); opacity: 1; }

.mundo__demo { margin-top: 0.75rem; }

.mundo--oscuro .boton--principal { --boton-hover: var(--hueso); background: var(--borgona); color: var(--carbon); }
.mundo--oscuro .boton--principal:hover, .mundo--oscuro .boton--principal:focus-visible { color: var(--carbon); }

.mundo__medio { margin-top: 2.25rem; }
.mundo__cuerpo { margin-top: 2.5rem; }
.dispositivos { position: relative; }

.dispositivos::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 175%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--luz), transparent);
}

.celular { position: relative; width: min(74vw, 19rem); margin-inline: auto; }
.celular__marco {
  position: relative; padding: 0.625rem; border-radius: 2.25rem;
  background: var(--carbon); border: 1px solid var(--disp-borde);
}

.celular__pantalla {
  position: relative; overflow: hidden; aspect-ratio: 540 / 1112; border-radius: 1.625rem; background: var(--carbon);
}
.celular__portada, .celular__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.celular__video { opacity: 0; background: var(--carbon); }
.celular[data-iniciado] .celular__video { opacity: 1; }

html[data-movimiento="pleno"] .celular__video { transition: opacity 0.45s linear; }

.celular[data-iniciado][data-costura] .celular__video { opacity: 0; }

.celular__control {
  position: absolute; z-index: 4; right: 0.75rem; bottom: 0.75rem; width: 2.75rem; height: 2.75rem; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--filete-sobre-carbon); border-radius: var(--radio);
  background: var(--carbon); color: var(--hueso);
  transition: background-color var(--d-hover) linear;
}
.celular__control[hidden] { display: none; }
.celular__control:hover { background: var(--gris-700); }

.celular__control:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; box-shadow: 0 0 0 6px var(--carbon); }
.celular[data-manual]:not([data-iniciado]) .celular__control { width: 3.5rem; height: 3.5rem; }
.icono { width: 1.25rem; height: 1.25rem; }
.celular[data-manual]:not([data-iniciado]) .icono { width: 1.75rem; height: 1.75rem; }
.celular[data-estado="reproduciendo"] .icono--play { display: none; }
.celular:not([data-estado="reproduciendo"]) .icono--pausa { display: none; }

.pantalla { display: none; }

html[data-movimiento="calmo"] .celular__control { transition: none; }

html:not([data-js]) .mundo img[data-src] { display: none; }

html[data-gestos]:not([data-gestos="fallo"]) [data-gesto="conjunto"]:not([data-visto]) .pantalla__marco,
html[data-gestos]:not([data-gestos="fallo"]) [data-gesto="conjunto"]:not([data-visto]) .celular__marco { opacity: 0; transform: translateY(40px); }
html[data-gestos] [data-gesto="conjunto"][data-visto] .pantalla__marco {
  transition: opacity var(--d-revelar) var(--curva) var(--retraso, 0s), transform var(--d-revelar) var(--curva) var(--retraso, 0s);
}

html[data-gestos] [data-gesto="conjunto"][data-visto] .celular__marco {
  transition: opacity 0.4s var(--curva) calc(var(--retraso, 0s) + 150ms), transform var(--d-revelar) var(--curva) calc(var(--retraso, 0s) + 150ms);
}

@media (min-width: 48em) {
  .mundo { min-height: 100svh; display: grid; align-content: center; }
  .mundo--codex { --ancho-nombre: 10.5; }
  .mundo__rejilla { row-gap: clamp(2rem, 1rem + 2vw, 2.75rem); }
  .mundo__titulo { grid-row: 1; }
  .mundo__medio, .mundo__cuerpo { grid-row: 2; margin-top: 0; }
  .mundo__cuerpo { grid-column: 1 / span 2; align-self: end; }
  .mundo__medio { grid-column: 3 / span 2; }
  .mundo--inversa .mundo__cuerpo { grid-column: 3 / span 2; }
  .mundo--inversa .mundo__medio { grid-column: 1 / span 2; }
  .celular { width: min(100%, 17.5rem); }
}

@media (min-width: 64em) {
  .mundo { padding-block: calc(var(--alto-cabecera) + 2rem) 2.5rem; }
  .mundo--codex { --ancho-nombre: 6.12; }
  .mundo__rejilla { grid-template-rows: auto auto; align-items: center; row-gap: 0; }
  .mundo__titulo { grid-column: 1 / span 5; grid-row: 1; align-self: end; }
  .mundo__cuerpo { grid-column: 1 / span 5; grid-row: 2; align-self: start; margin-top: clamp(2rem, 0.5rem + 2.4vw, 3.25rem); }
  .mundo__medio { grid-column: 6 / span 7; grid-row: 1 / span 2; }
  .mundo--inversa .mundo__titulo, .mundo--inversa .mundo__cuerpo { grid-column: 8 / span 5; }
  .mundo--inversa .mundo__medio { grid-column: 1 / span 7; }
  .mundo__esencia { max-width: 24ch; }

  .dispositivos { aspect-ratio: 100 / 70; width: min(100% - 3rem, calc((100svh - 9rem) / 0.7)); margin-left: auto; }
  .mundo--inversa .dispositivos { margin-left: 0; margin-right: auto; }
  .dispositivos::before { left: 15%; top: 56%; width: 115%; }
  .mundo--inversa .dispositivos::before { left: 85%; }

  .pantalla { display: block; position: absolute; top: 0; right: 0; width: 74%; }
  .mundo--inversa .pantalla { right: auto; left: 0; }
  .pantalla__marco {
    position: relative; padding: 0.625rem 0.625rem 1.25rem; border-radius: 0.875rem;
    background: var(--disp-bisel); border: 1px solid var(--disp-borde);
  }
  .pantalla__imagen { width: 100%; height: auto; aspect-ratio: 1440 / 900; border-radius: 3px; background: var(--fondo); }

  .pantalla__marco::before, .pantalla__marco::after { content: ""; position: absolute; background: var(--disp-pie); }
  .pantalla__marco::before { top: 100%; left: 43.5%; width: 13%; height: 1.75rem; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
  .pantalla__marco::after { top: calc(100% + 1.75rem); left: 34%; width: 32%; height: 0.375rem; border-radius: 0.25rem 0.25rem 0.125rem 0.125rem; }

  .celular { position: absolute; left: 0; bottom: 0; width: 29%; margin: 0; }
  .mundo--inversa .celular { left: auto; right: 0; }

  .celular__marco {
    padding: 0.75rem; border-radius: 2.375rem;
    box-shadow: 0 0 0 0.625rem var(--fondo), 0 0 0 calc(0.625rem + 1px) var(--disp-filete);
  }
  .celular__pantalla { border-radius: 1.625rem; }
}