/* ==========================================================================
   Nuestra aplicación móvil
   ==========================================================================
   Se carga después de interna.css y solo en app.html. Hereda todo: tokens,
   tipografía, tapa, miga, grano, header, pie y ventanas.

   Idea de la página: el teléfono manda. Quien llega quiere ver la pantalla,
   no leer sobre ella, así que la interfaz se dibuja seis veces —una en la
   tapa y cinco en el recorrido— con divs y no con capturas. El lenguaje
   visual es el del bloque de la app del home (`.tel`, `.pt__cab`, `.hito`,
   `.doc`, `.msg`, `.cita` viven en site.css y se reutilizan tal cual); lo que
   se añade aquí son las piezas que allí no hacen falta: la lectura firmada de
   un resultado, el calendario del mes con los días de viaje, la lista de
   documentos con su estado y el campo de escribir con la hora de Bogotá.

   El teléfono del home rota solo entre cuatro pantallas y lo mueve site.js
   buscando `.pant` dentro de `.app`. Aquí no hay ni una cosa ni la otra a
   propósito: las pantallas son fijas —clase `.vista`— para poder mirarlas
   todas a la vez, que es a lo que se viene a esta página.

   Ritmo de fondos: navy (tapa) · blanco (la distancia) · lavanda pálido (las
   cinco pantallas) · navy (cuándo llega) · blanco (lo que no hace) · pálido
   (el cierre). Sin tarjetas con sombra: lo que separa un bloque de otro son
   filetes y aire.

   Móvil primero.
   ========================================================================== */


/* --- La tapa -------------------------------------------------------------
   El iPhone reproduce el mismo video del home. En escritorio acompaña el
   título; en móvil queda debajo, completo y dentro del flujo. */

@media (min-width: 900px) {
  .tapa--apli {
    padding-top: calc(var(--hdr-h) + clamp(2.5rem, 7vh, 4.5rem));
  }

  .tapa__in--apli {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.apli__intro { max-width: 40rem; }
.apli__languages { margin-top: 1.25rem; color: rgba(255, 255, 255, .82); font-size: .95rem; }
.apli__languages p { margin: 0 0 .65rem; }
.apli__languages ul { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; padding: 0; margin: 0; list-style: none; }
.apli__languages li { display: inline-flex; align-items: center; gap: .5rem; }
.apli__languages li span { text-transform: capitalize; }
.apli__languages .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.apli__intro .apli__tiendas { justify-content: flex-start; }
.anim .apli__intro .apli__tiendas { opacity: 1; transform: none; }

.apli__incluida {
  margin: 1.1rem 0 0;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

.apli__asoma {
  display: block;
  margin-top: 2rem;
}
.apli__asoma .pant__vid { pointer-events: auto; }

@media (min-width: 900px) {
  .apli__asoma { margin-top: 0; }
}

/* --- El teléfono, quieto -------------------------------------------------
   En el home `.tel` va en posición absoluta dentro de su columna porque se
   sale por arriba de la sección. Aquí va en el flujo, tantas veces como
   pantallas hay.

   Y hay que desarmar la coreografía del home: site.css deja el teléfono, el
   velo de la pantalla, la barra de progreso y los distintivos de las tiendas
   en su estado de partida —invisibles— y solo los enciende con `.app.is-in`.
   Esa sección no existe en esta página, así que sin estas cuatro líneas todo
   se queda apagado. Cada pieza se vuelve a encender más abajo, atada a la
   sección que le toca. */

.tel--fijo {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(17rem, 76vw);
  margin: 0 auto;
}

.tel--tapa { width: min(20rem, 68vw); }
.apli__screen { display: block; width: 100%; height: 100%; object-fit: contain; }
.lo__l .lo__f--no-image:nth-child(n) { grid-template-columns: minmax(0, 1fr); }
.lo__l .lo__f--no-image .lo__txt { justify-self: start; }

/* El aparato se ve siempre; quien entra en escena es su contenedor. */
.anim .tel--fijo { opacity: 1; transform: none; }

/* La pantalla apagada. La de la tapa nace encendida —a esa altura no hay nada
   que anunciar todavía— y las cinco del recorrido se encienden cuando la
   sección entra. */
.anim .tapa .tel__pantalla::after { opacity: 0; transition: none; }
.anim .lo .tel__pantalla::after { opacity: 1; }
.anim .lo.is-in .tel__pantalla::after { opacity: 0; transition-delay: .5s; }

/* Cada pantalla es una columna: cabecera arriba, contenido, y el pie —cuando
   lo hay— empujado al fondo del marco. */
.vista {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Nada se encoge dentro del marco: si algún día sobra contenido, que se
   recorte por abajo como en un teléfono de verdad y no que se aplaste el
   renglón. */
.vista > * { flex: none; }

/* Choque de nombres: `.quien` es la ficha de la consultora dentro del teléfono
   en site.css y la sección «Quién lleva el embarazo» —fondo blanco— en
   interna.css. Dentro de una pantalla manda la primera, o el nombre de Daniela
   sale en blanco sobre blanco. */
.vista .quien { background: none; }

.vista__pie {
  margin: auto 0 0;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .74rem;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
}

/* Cinco de ocho fases. La barra de site.css viene fija al 58 %, y con `.anim`
   arranca en cero esperando al home: aquí se rellena cuando entra la sección
   de las pantallas. */
.vista--proceso .barra__i { width: 62%; }
.anim .lo.is-in .vista--proceso .barra__i { width: 62%; }


/* --- La lectura de un resultado ------------------------------------------
   La pieza que sostiene toda la promesa de la página: un informe no aparece
   solo, aparece con quien lo firma y con lo que significa. Por eso ocupa el
   sitio que ocupa dentro del marco y no es una fila más de la lista. */

.res {
  margin-bottom: 1.1rem;
  padding: .9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
}

.res__t {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.012em;
}

.res__q {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 300;
  color: var(--lavender);
}

.res__av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--lavender), var(--purple));
}

.res__p {
  margin: .55rem 0 0;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

/* Las dos horas, una debajo de la otra. Es literalmente lo que se cuenta en
   el texto: nadie tiene que restar cinco. */
.res__horas {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.res__h {
  font-size: .68rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
}
.res__h b {
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}


/* --- El mes --------------------------------------------------------------
   Siete columnas, cabecera de días y cuatro semanas. Los días de viaje van
   en una banda continua y no en tres puntos sueltos: lo que hay que ver de un
   vistazo es cuántos días seguidos hacen falta en Bogotá. */

.mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .18rem;
  margin-bottom: .8rem;
}

.mes__c {
  padding-bottom: .3rem;
  font-size: .6rem;
  font-weight: 600;
  text-align: center;
  color: rgba(255, 255, 255, .38);
}

.mes__d {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: .68rem;
  color: rgba(255, 255, 255, .72);
}
.mes__d--off { color: rgba(255, 255, 255, .28); }

/* Los tres días de viaje leen como un tramo y no como tres casillas: la banda
   solo se redondea en sus extremos, marcados en el marcado. */
.mes__d--viaje {
  border-radius: 0;
  background: rgba(167, 161, 203, .26);
  color: var(--white);
  font-weight: 600;
}
.mes__d--ini { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.mes__d--fin { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

.mes__d--cita {
  background: var(--apricot);
  color: var(--navy);
  font-weight: 700;
}

.mes__ley {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  font-size: .7rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .58);
}
.mes__pt {
  flex: none;
  width: 22px;
  height: 8px;
  border-radius: 4px;
  background: rgba(167, 161, 203, .5);
}


/* --- Los documentos ------------------------------------------------------
   Dos renglones por fila: el nombre y el estado escrito con palabras. «Espera
   tu firma» dice qué hacer; un icono de reloj no dice nada. */

.archs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.arch {
  display: grid;
  gap: .12rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.arch__n {
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, .88);
}

.arch__e {
  font-size: .7rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .45);
}
.arch__e--ok { color: var(--lavender); }
.arch__e--pide {
  justify-self: start;
  margin-top: .25rem;
  padding: .12rem .45rem;
  border-radius: var(--r-pill);
  background: rgba(255, 188, 125, .18);
  color: var(--apricot);
  font-weight: 600;
}


/* --- El campo de escribir ------------------------------------------------ */

.vista__campo {
  margin: auto 0 0;
  padding-top: .8rem;
}

.vista__campo-t {
  display: block;
  padding: .55rem .75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: .76rem;
  color: rgba(255, 255, 255, .45);
}

.vista__campo-h {
  display: block;
  margin-top: .5rem;
  text-align: center;
  font-size: .66rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .38);
}


/* ==========================================================================
   La distancia
   ========================================================================== */

.dist { background: var(--white); }

.dist__in {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.dist__t {
  margin: 0 0 1.2rem;
  font-size: clamp(1.75rem, 4.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}

.dist__p {
  max-width: 62ch;
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-soft);
}
.dist__p:last-child { margin-bottom: 0; }

/* El último párrafo es el que contesta la pregunta del dinero. Se separa con
   un filete para que se lea aunque nadie llegue hasta abajo. */
.dist__p--fin {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(0, 26, 50, .12);
  color: var(--ink);
  font-weight: 400;
}

.dist__foto {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-glass);
  background: var(--navy);
}
.dist__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .dist__in {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }
  /* Vertical, pero con techo. A 3:4 sueltos la fotografía medía más que toda
     la columna de texto y la fila se descompensaba. */
  .dist__foto img {
    aspect-ratio: 3 / 4;
    max-height: 32rem;
  }
}


/* ==========================================================================
   Lo que ves cuando la abres
   ==========================================================================
   Cinco filas en zigzag. El teléfono cambia de lado en cada una para que la
   vista no baje en línea recta, y el texto se queda centrado con él: al lado
   de un marco de 9/19 un párrafo alineado arriba deja medio metro de blanco.
   ========================================================================== */

.lo {
  position: relative;
  background: #EDE9F6;
}
/* Campo de color plano: el grano al 10 % que pide la cáscara para los fondos
   claros. */
.lo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .10;
  pointer-events: none;
}

.lo__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem) clamp(4rem, 10vh, 7rem);
}

.lo__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

.lo__t {
  text-align: center;
  margin: 0 0 .9rem;
  font-size: clamp(1.75rem, 4.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}

.lo__d {
  max-width: 56ch;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-soft);
}

.lo__l { display: grid; gap: clamp(3rem, 8vh, 5.5rem); }

.lo__f {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

.lo__h {
  margin: 0 0 .7rem;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.022em;
  color: var(--ink);
}

.lo__p {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* La segunda línea de cada fila es la que lleva la promesa concreta —quién
   llama, a qué hora, qué falta—. Va con filete lavanda para que se distinga
   de la explicación sin necesidad de meterla en una caja. */
.lo__nota {
  max-width: 32rem;
  margin: 1.1rem 0 0;
  padding-left: .95rem;
  border-left: 2px solid var(--lavender);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

.lo__tel { position: relative; }

@media (min-width: 900px) {
  /* La columna de texto se topa en 34 rem —la medida en que un párrafo de este
     cuerpo se sigue leyendo de un renglón al siguiente— y el teléfono se
     centra en lo que sobra. Si se pegara al borde exterior, entre el final del
     texto y el marco quedaría medio palmo de nada. */
  .lo__f {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
  .lo__tel { justify-self: center; width: 17rem; }

  /* Zigzag: en las filas pares el teléfono se va a la izquierda y el texto se
     alinea con el borde derecho de la medida. */
  .lo__f:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
  .lo__f:nth-child(even) .lo__tel { order: -1; }
  .lo__f:nth-child(even) .lo__txt { justify-self: end; }
}

/* --- El aviso ------------------------------------------------------------
   Una sola fila lleva la notificación flotante, y es la de los resultados: es
   el momento en que la aplicación hace lo que promete la página. Repetirla en
   las cinco la convertiría en decoración. */

.lo__aviso {
  display: grid;
  gap: .15rem;
  max-width: 20rem;
  margin: 0 auto 1.25rem;
  padding: .8rem .95rem;
  border-radius: var(--r-glass);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: var(--glass-lite);
  backdrop-filter: var(--glass-lite);
  box-shadow: 0 18px 34px -22px rgba(0, 26, 50, .55);
}

.lo__aviso-q {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--purple);
}
.lo__aviso-t {
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.lo__aviso-f {
  font-size: .72rem;
  font-weight: 300;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  /* Sobre el marco y por encima de su borde superior, mordiendo la esquina.
     Es la única pieza de la página que rompe una caja, y va arriba del todo
     para no tapar la cabecera de la pantalla: un aviso que esconde el título
     de lo que anuncia no se entiende. */
  .lo__aviso {
    position: absolute;
    z-index: 2;
    top: -3rem;
    right: -3rem;
    width: 16rem;
    max-width: none;
    margin: 0;
  }
  .lo__f:nth-child(even) .lo__aviso { right: auto; left: -3rem; }
}


/* ==========================================================================
   Cuándo aparece cada cosa
   ==========================================================================
   Banda oscura, y la única de la página con forma de tabla. Es una promesa de
   servicio: a la izquierda lo que ocurre en Bogotá, a la derecha cuándo se
   ve. Cuanto más seca, más se cree.
   ========================================================================== */

.cuando {
  position: relative;
  background: var(--navy);
  color: var(--white);
}
.cuando::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}

.cuando__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.cuando__head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.cuando__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.75rem, 4.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
}

.cuando__d {
  max-width: 34rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}

.cuando__l { display: grid; margin: 0; }

.cuando__f {
  display: grid;
  gap: .3rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.cuando__f:first-child { border-top: 1px solid rgba(255, 255, 255, .13); }

.cuando__f dt {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.015em;
}

.cuando__f dd {
  margin: 0;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, .68);
}

@media (min-width: 720px) {
  .cuando__f {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}


/* ==========================================================================
   Lo que no hace
   ==========================================================================
   Tres renglones en blanco, sin caja y sin icono. Es el bloque de la
   honestidad y tiene que leerse como una frase dicha, no como una parrilla de
   ventajas dadas la vuelta.
   ========================================================================== */

.nohace { background: var(--white); }

.nohace__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.nohace__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.75rem, 4.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}

.nohace__d {
  max-width: 34rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.nohace__l {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nohace__i {
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(0, 26, 50, .12);
}
.nohace__i:first-child { border-top: 1px solid rgba(0, 26, 50, .12); }

.nohace__h {
  margin: 0 0 .5rem;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

.nohace__p {
  max-width: 64ch;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .nohace__i {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  .nohace__h { margin-bottom: 0; }
}


/* ==========================================================================
   El cierre
   ========================================================================== */

.cierre { background: var(--pale); }

.cierre__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.cierre__t {
  max-width: 22ch;
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink);
}

.cierre__d {
  max-width: 56ch;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.62;
  color: var(--ink-soft);
}

.cierre__fin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.cierre__nota {
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.cierre__nota a {
  color: var(--purple);
  border-bottom: 1px solid rgba(111, 81, 170, .35);
  transition: border-color .25s var(--ease);
}
.cierre__nota a:hover { border-bottom-color: var(--purple); }

/* Descargas al cierre, con los mismos enlaces y distintivos del hero. */
.cierre__baja {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(0, 26, 50, .12);
}

.cierre__baja-t {
  max-width: 46ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
}

.cierre__baja .tiendas { margin-top: 1.1rem; }


/* ==========================================================================
   Entradas
   ==========================================================================
   El titular de cada bloque se descubre de arriba abajo, igual que en el
   resto de internas. Los teléfonos entran uno detrás de otro dentro de su
   fila —no los cinco a la vez— y con eso basta: el movimiento que de verdad
   responde al usuario es el de la fila al pasar el cursor.
   ========================================================================== */

.anim .dist__t,
.anim .lo__t,
.anim .cuando__t,
.anim .nohace__t,
.anim .cierre__t {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.45em);
  transition: clip-path .85s var(--ease), transform .85s var(--ease);
}
.anim .is-in .dist__t,
.anim .is-in .lo__t,
.anim .is-in .cuando__t,
.anim .is-in .nohace__t,
.anim .is-in .cierre__t { clip-path: inset(0 0 -20% 0); transform: translateY(0); }

.anim .dist__foto {
  clip-path: inset(0 0 0 100%);
  transition: clip-path .95s var(--ease) .15s;
}
.anim .is-in .dist__foto { clip-path: inset(0 0 0 0); }

.anim .lo__tel,
.anim .lo__aviso {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .7s var(--ease), transform .75s var(--ease);
}
.anim .is-in .lo__tel { opacity: 1; transform: translateY(0); }
.anim .is-in .lo__aviso { opacity: 1; transform: translateY(0); transition-delay: .35s; }
.anim .is-in .lo__f:nth-child(2) .lo__tel { transition-delay: .08s; }
.anim .is-in .lo__f:nth-child(3) .lo__tel { transition-delay: .16s; }
.anim .is-in .lo__f:nth-child(4) .lo__tel { transition-delay: .24s; }
.anim .is-in .lo__f:nth-child(5) .lo__tel { transition-delay: .32s; }

/* Los distintivos entran con su transición de site.css; lo que cambia es el
   disparo, que allí es `.app.is-in`. */
.anim .cierre.is-in .tiendas { opacity: 1; transform: translateY(0); }

.anim .cuando__f {
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.anim .is-in .cuando__f { opacity: 1; transform: translateY(0); }
.anim .is-in .cuando__f:nth-child(1) { transition-delay: .18s; }
.anim .is-in .cuando__f:nth-child(2) { transition-delay: .26s; }
.anim .is-in .cuando__f:nth-child(3) { transition-delay: .34s; }
.anim .is-in .cuando__f:nth-child(4) { transition-delay: .42s; }
.anim .is-in .cuando__f:nth-child(5) { transition-delay: .50s; }

/* Lo que sí responde al usuario: la fila que se está mirando levanta su
   teléfono un poco y le sube la sombra. */
@media (min-width: 900px) and (hover: hover) {
  .lo__f .tel {
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .lo__f:hover .tel {
    transform: translateY(-6px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .18),
      0 54px 90px -34px rgba(0, 26, 50, .7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .anim .dist__t,
  .anim .lo__t,
  .anim .cuando__t,
  .anim .nohace__t,
  .anim .cierre__t { clip-path: none; transform: none; }
  .anim .dist__foto { clip-path: none; }
  .anim .lo__tel,
  .anim .lo__aviso,
  .anim .cuando__f { opacity: 1; transform: none; }
  .anim .lo .tel__pantalla::after { display: none; }
  .lo__f:hover .tel { transform: none; }
}

.cierre__in { text-align: center; }
.cierre__t, .cierre__d, .cierre__baja-t { margin-inline: auto; }
.cierre__fin, .cierre__baja .tiendas { justify-content: center; }