@layer sections {
  .reveal {
    opacity: 1;
    transform: none;
  }

  html.js-listo .reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s ease, transform .6s ease;
  }

  html.js-listo .reveal.en-vista {
    opacity: 1;
    transform: none;
  }

  .glow-blob {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(4.5rem);
    opacity: .55;
    pointer-events: none;
  }

  .glow-blob-lima {
    background-color: var(--lima);
  }

  .glow-blob-azul {
    background-color: var(--azul);
  }

  .front {
    position: relative;
    padding-block: var(--espacio-7) var(--espacio-9);
    overflow: clip;
  }

  .front .front-glow-a {
    top: -4rem;
    right: -3rem;
    width: 18rem;
    height: 18rem;
  }

  .front .front-glow-b {
    bottom: -5rem;
    left: -4rem;
    width: 14rem;
    height: 14rem;
  }

  .front .front-fila {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-8);
  }

  .front .front-copy {
    max-width: 34rem;
  }

  .front .front-titulo {
    margin-top: var(--espacio-4);
  }

  .front .front-lead {
    margin-top: var(--espacio-4);
    font-size: 1.1rem;
    color: var(--tinta-60);
  }

  .front .front-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-3);
    margin-top: var(--espacio-6);
  }

  .front .front-datos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-5);
    margin-top: var(--espacio-7);
    font-size: .85rem;
    color: var(--tinta-60);
  }

  .front .front-dato-num {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 1.35rem;
    color: var(--tinta);
  }

  .front .front-visual {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-tarjeta);
  }

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

  .front .front-velo {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image: linear-gradient(165deg, rgba(16, 38, 43, .9), rgba(16, 38, 43, .6));
    -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), transparent 0, transparent 6rem, #000 11.5rem);
    mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), transparent 0, transparent 6rem, #000 11.5rem);
    transition: opacity .35s ease;
  }

  .front.front-interactivo .front-velo {
    opacity: 1;
  }

  .front .front-visual-nota {
    position: absolute;
    left: var(--espacio-4);
    bottom: var(--espacio-4);
    padding: .5rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tinta);
    background-color: var(--papel-80);
    border-radius: var(--radio-s);
  }

  .front.front-interactivo .front-visual-nota {
    opacity: 0;
    transition: opacity .3s ease;
  }

  .par-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
    align-items: start;
  }

  .par-media .par-media-foto {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-tarjeta);
  }

  .par-media .par-media-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cabecera-pagina {
    position: relative;
    padding-block: var(--espacio-8) var(--espacio-6);
    overflow: clip;
  }

  .cabecera-pagina .cabecera-lead {
    max-width: 40rem;
    margin-top: var(--espacio-4);
    font-size: 1.05rem;
    color: var(--tinta-60);
  }

  .franja {
    padding-block: var(--espacio-8);
  }

  .franja-tinta {
    color: var(--papel);
    background-color: var(--tinta);
  }

  .franja-cabecera {
    max-width: 38rem;
  }

  .franja-cabecera .franja-lead {
    margin-top: var(--espacio-3);
    color: var(--tinta-60);
  }

  .franja-tinta .franja-lead {
    color: var(--papel-80);
  }

  .zonas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
    margin-top: var(--espacio-7);
  }

  .zonas-grid .zona-tarjeta {
    display: flex;
    flex-direction: column;
  }

  .zonas-grid .zona-media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radio-m);
  }

  .zonas-grid .zona-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
  }

  .zonas-grid .zona-tarjeta:hover .zona-media img {
    transform: scale(1.05);
  }

  .zonas-grid .zona-cuerpo {
    padding-top: var(--espacio-4);
  }

  .zonas-grid .zona-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
  }

  .zonas-grid .zona-precio {
    margin-top: var(--espacio-2);
    font-family: var(--fuente-titulo);
    font-size: .95rem;
    color: var(--azul);
  }

  .zonas-grid .zona-texto {
    margin-top: var(--espacio-2);
    font-size: .92rem;
    color: var(--tinta-60);
  }

  .zonas-grid .zona-link {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: var(--espacio-4);
    font-weight: 700;
    color: var(--azul);
  }

  .cartel-lista {
    display: flex;
    flex-direction: column;
    margin-top: var(--espacio-7);
  }

  .cartel-lista .cartel-fila {
    border-top: .0625rem solid var(--tinta-12);
  }

  .cartel-lista .cartel-fila:last-child {
    border-bottom: .0625rem solid var(--tinta-12);
  }

  .cartel-lista .cartel-cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-5);
    width: 100%;
    padding-block: var(--espacio-5);
    text-align: left;
  }

  .cartel-lista .cartel-numero {
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
    color: var(--azul);
  }

  .cartel-lista .cartel-nombre {
    flex-grow: 1;
    font-family: var(--fuente-titulo);
    font-size: 1.15rem;
  }

  .cartel-lista .cartel-edad {
    font-size: .85rem;
    color: var(--tinta-60);
  }

  .cartel-lista .cartel-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease;
  }

  .cartel-lista .cartel-fila:hover .cartel-panel,
  .cartel-lista .cartel-fila:focus-within .cartel-panel {
    grid-template-rows: 1fr;
  }

  .cartel-lista .cartel-panel-int {
    overflow: hidden;
    min-height: 0;
  }

  .cartel-lista .cartel-contenido {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-4);
    padding-bottom: var(--espacio-5);
  }

  .cartel-lista .cartel-foto {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radio-m);
  }

  .cartel-lista .cartel-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ledger {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espacio-6);
    margin-top: var(--espacio-7);
  }

  .ledger .ledger-item {
    text-align: center;
  }

  .ledger .ledger-num {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.1rem, 1.7rem + 1.6vw, 3.4rem);
    background-image: var(--gradiente-arcade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .ledger .ledger-etq {
    margin-top: var(--espacio-2);
    font-size: .85rem;
    color: var(--tinta-60);
  }

  .franja-tinta .ledger-etq {
    color: var(--papel-80);
  }

  .acordeon {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    margin-top: var(--espacio-7);
  }

  .acordeon .acordeon-item {
    overflow: hidden;
    background-color: var(--papel);
    border: .0625rem solid var(--tinta-12);
    border-radius: var(--radio-m);
  }

  .acordeon .acordeon-resumen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-4);
    padding: var(--espacio-5);
    font-family: var(--fuente-titulo);
    font-size: 1rem;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
  }

  .acordeon .acordeon-resumen::-webkit-details-marker {
    display: none;
  }

  .acordeon .acordeon-marca {
    position: relative;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }

  .acordeon .acordeon-marca::before,
  .acordeon .acordeon-marca::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--azul);
    transform: translate(-50%, -50%);
  }

  .acordeon .acordeon-marca::before {
    width: 1.125rem;
    height: .1875rem;
  }

  .acordeon .acordeon-marca::after {
    width: .1875rem;
    height: 1.125rem;
    transition: transform .25s ease, opacity .25s ease;
  }

  .acordeon-item[open] .acordeon-marca::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .acordeon .acordeon-cuerpo {
    padding: 0 var(--espacio-5) var(--espacio-5);
    font-size: .95rem;
    color: var(--tinta-60);
  }

  .equipo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacio-6);
    margin-top: var(--espacio-7);
  }

  .equipo-grid .equipo-tarjeta {
    overflow: hidden;
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-tarjeta);
  }

  .equipo-grid .equipo-foto {
    aspect-ratio: 2 / 3;
    overflow: hidden;
  }

  .equipo-grid .equipo-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .equipo-grid .equipo-info {
    padding: var(--espacio-5);
  }

  .equipo-grid .equipo-cargo {
    margin-top: var(--espacio-1);
    font-size: .85rem;
    font-weight: 600;
    color: var(--azul);
  }

  .equipo-grid .equipo-texto {
    margin-top: var(--espacio-3);
    font-size: .9rem;
    color: var(--tinta-60);
  }

  .valores-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacio-5);
    margin-top: var(--espacio-7);
  }

  .valores-grid .valor-tarjeta {
    padding: var(--espacio-5);
  }

  .valores-grid .valor-numero {
    font-family: var(--fuente-titulo);
    font-size: 1.3rem;
    color: var(--azul);
  }

  .valores-grid .valor-titulo {
    margin-top: var(--espacio-2);
  }

  .valores-grid .valor-texto {
    margin-top: var(--espacio-2);
    font-size: .9rem;
    color: var(--tinta-60);
  }

  .contacto-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espacio-8);
    margin-top: var(--espacio-7);
  }

  .info-lista {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-5);
    margin-top: var(--espacio-6);
  }

  .info-lista .info-item {
    display: flex;
    gap: var(--espacio-4);
  }

  .info-lista .info-rotulo {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--azul);
  }

  .info-lista .info-valor {
    margin-top: var(--espacio-1);
    font-size: .95rem;
  }

  .legal-cuerpo {
    max-width: 52rem;
    margin-top: var(--espacio-6);
  }

  .legal-cuerpo h2 {
    margin-top: var(--espacio-8);
    margin-bottom: var(--espacio-3);
  }

  .legal-cuerpo h2:first-child {
    margin-top: 0;
  }

  .legal-cuerpo p {
    max-width: none;
    margin-top: var(--espacio-3);
    color: var(--tinta-60);
  }

  .legal-cuerpo ul {
    margin-top: var(--espacio-3);
    padding-left: 1.25rem;
    color: var(--tinta-60);
    list-style: disc;
  }

  .legal-cuerpo li {
    margin-top: var(--espacio-2);
  }

  .legal-cuerpo table {
    width: 100%;
    margin-top: var(--espacio-4);
    font-size: .9rem;
    border: .0625rem solid var(--tinta-12);
  }

  .legal-cuerpo th,
  .legal-cuerpo td {
    padding: var(--espacio-3);
    text-align: left;
    border-bottom: .0625rem solid var(--tinta-12);
  }

  .gracias-panel,
  .error-panel {
    position: relative;
    max-width: 34rem;
    padding-block: var(--espacio-9);
    margin-inline: auto;
    text-align: center;
    overflow: clip;
  }

  .error-panel .error-codigo {
    font-family: var(--fuente-titulo);
    font-size: clamp(4rem, 3rem + 5vw, 8rem);
    background-image: var(--gradiente-arcade);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .gracias-panel .gracias-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-inline: auto;
    color: var(--tinta);
    background-color: var(--lima);
    border-radius: 50%;
  }

  .pasos-lista {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    margin-top: var(--espacio-6);
    text-align: left;
  }

  .pasos-lista .paso-item {
    display: flex;
    gap: var(--espacio-3);
    padding: var(--espacio-4);
    background-color: var(--papel-neblina);
    border-radius: var(--radio-s);
  }

  .pasos-lista .paso-num {
    font-family: var(--fuente-titulo);
    color: var(--azul);
  }

  @media (min-width: 48rem) {
    .zonas-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .equipo-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .valores-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .ledger {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 60rem) {
    .front .front-fila {
      flex-direction: row;
      align-items: center;
    }

    .front .front-copy {
      flex: 0 0 42%;
    }

    .front .front-visual {
      flex: 1;
    }

    .zonas-grid {
      grid-template-columns: repeat(3, 1fr);
    }

    .zonas-grid .zona-tarjeta:nth-child(2) {
      transform: translateY(2.75rem);
    }

    .zonas-grid .zona-tarjeta:nth-child(3) {
      transform: translateY(-1.5rem);
    }

    .contacto-layout {
      grid-template-columns: 1.05fr .95fr;
    }

    .par-media {
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
    }
  }
}