/* Pieza · Web completa con tu marca
   ---------------------------------
   Composición: la ficha del Creador de webs a la izquierda, la web que va
   montando en la ventana, el móvil con la misma web y la tarjeta de
   «publicada» cruzando el borde de abajo. Nada toca el borde del lienzo.

   Lienzo de 600 × 400. Dentro, cada caja con sus coordenadas:
     ficha      6 → 212    ·   72 → 204
     ventana  202 → 526    ·    8 → 308
     móvil    516 → 630    ·  124 → 376
     flotante 206 → 496    ·  296 → 372

   Las tres tarjetas van por encima de la ventana: la ficha le cruza el
   borde izquierdo, el móvil el derecho y la de publicada el de abajo. */

.pzw {
  --ancho: 640;
  --alto: 400;
}

/* ---- La ficha del especialista ---- */

.pzw__ficha {
  left: 6px;
  top: 72px;
  width: 206px;
  z-index: 2;
}

/* El texto de lo que está haciendo cambia a mitad de la historia. */
.pzw__accion {
  display: none;
}

.pzw__accion--1 {
  display: inline;
}

.pzw .pzw__accion--2.es-dentro {
  display: inline;
}

.pzw .pzw__accion--2.es-dentro + .pza__puntitos,
.pzw__accion--1 {
  display: inline;
}

.pzw .pzw__accion--2.es-dentro ~ .pzw__accion--1,
.pzw__ficha:has(.pzw__accion--2.es-dentro) .pzw__accion--1 {
  display: none;
}

/* ---- La ventana con el sitio ---- */

.pzw__ventana {
  left: 202px;
  top: 8px;
  width: 324px;
  height: 300px;
}

.pzw__sitio {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pzw__cabecera {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0 11px;
  border-bottom: 1px solid var(--pz-borde);
}

.pzw__marca {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pzw__marca-gota {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50% 50% 50% 2px;
  background: var(--pz-marca);
}

.pzw__marca-nombre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pzw__menu {
  display: flex;
  gap: 9px;
  margin-left: 2px;
  font-size: 10px;
  color: var(--pz-tinta2);
  white-space: nowrap;
}

.pzw__cabecera-boton {
  margin-left: auto;
  padding: 4px 9px;
  font-size: 10px;
}

/* ---- La portada ---- */

.pzw__portada {
  position: relative;
  height: 96px;
  flex: 0 0 96px;
  overflow: hidden;
}

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

/* Velo plano, sin degradado, solo lo justo para que lea el blanco. */
.pzw__velo {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 27, 0.4);
}

.pzw__portada-texto {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.pzw__portada-titulo {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.01em;
}

.pzw__portada-boton {
  padding: 5px 11px;
  font-size: 10.5px;
}

/* ---- Las experiencias ---- */

.pzw__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px 10px;
  min-height: 0;
}

.pzw__epigrafe {
  font-size: 11px;
  font-weight: 600;
  color: var(--pz-tinta2);
}

.pzw__salidas {
  display: flex;
  gap: 6px;
  min-height: 0;
}

.pzw__salida {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pz-borde);
  border-radius: 9px;
  overflow: hidden;
  background: var(--pz-papel);
}

.pzw__salida-foto {
  position: relative;
  display: block;
  flex: 0 0 46px;
  height: 46px;
  overflow: hidden;
}

.pzw__salida-estado {
  position: absolute;
  left: 5px;
  top: 5px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 9px;
  padding: 1px 6px;
}

.pzw__salida-titulo {
  margin: 6px 8px 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzw__salida-dato {
  margin: 1px 8px 0;
  font-size: 9.5px;
  color: var(--pz-tinta3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzw__salida-precio {
  margin: auto 8px 8px;
  padding-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- El móvil, con la misma web ---- */

.pzw__movil {
  left: 516px;
  top: 124px;
  width: 114px;
  height: 252px;
  z-index: 2;
}

.pzw__movil-cabecera {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  flex: 0 0 30px;
  padding: 8px 9px 0;
  font-size: 10px;
  font-weight: 700;
  border-bottom: 1px solid var(--pz-borde);
}

.pzw__movil-cabecera .pzw__marca-gota {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
}

.pzw__movil-portada {
  position: relative;
  display: block;
  height: 78px;
  flex: 0 0 78px;
  overflow: hidden;
}

.pzw__movil-titulo {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.pzw__movil-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 8px 9px;
}

.pzw__movil-fila {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pzw__movil-foto {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 6px;
  object-fit: cover;
}

.pzw__movil-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* A 118 px la fecha no cabe: en el móvil de escritorio va solo el sitio y
   el precio. En la versión de móvil, que es más grande, sí entra. */
.pzw__movil-dato {
  display: none;
}

.pzw__movil-precio {
  display: none;
}

.pzw__movil-texto .pzw__movil-precio {
  display: block;
}

.pzw__movil-sitio {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

.pzw__movil-dato {
  font-size: 8.5px;
  color: var(--pz-tinta3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pzw__movil-precio {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

 /* La tercera fila solo cabe en la versión de móvil, que es más alta. */
.pzw__movil-fila:nth-of-type(3) {
  display: none;
}

.pzw__movil-boton {
  margin-top: auto;
  justify-content: center;
  padding: 6px;
  font-size: 10.5px;
}

/* ---- La tarjeta de publicada ---- */

.pzw__flotante {
  left: 206px;
  top: 296px;
  width: 290px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pzw__flotante-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pzw__flotante-fila .pza__flotante-titulo {
  white-space: nowrap;
}

.pzw__flotante-url {
  color: var(--pz-marca);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Móvil: la pieza se recompone
   ---------------------------------------------------------------
   Aquí la pieza principal es el teléfono con la web, con la ficha del
   especialista al lado y la tarjeta de publicada debajo de ella: ninguna
   de las dos tapa la pantalla del teléfono.

   Lienzo de 320 × 384:
     móvil      8 → 150   ·   30 → 372
     ficha    144 → 312   ·    6 → 164
     flotante 144 → 312   ·  200 → 290 */

@media (max-width: 767px) {
  .como__escena:has(.pzw) {
    aspect-ratio: 20 / 24;
  }

  .pzw {
    --ancho: 320;
    --alto: 384;
    --escala: min(1, var(--cabe-x), var(--cabe-y));
  }

  /* La ventana de escritorio no cabe: en el móvil manda el teléfono. */
  .pzw__ventana {
    display: none;
  }

  /* En móvil el teléfono es la pieza principal, así que está desde el
     principio: lo que se va montando dentro es la web, paso a paso. */
  .pzw .pzw__movil[data-desde] {
    opacity: 1;
    transform: none;
  }

  .pzw__movil {
    left: 8px;
    top: 30px;
    width: 142px;
    height: 342px;
  }

  .pzw__movil-cabecera {
    height: 32px;
    flex-basis: 32px;
    font-size: 11px;
  }

  .pzw__movil-portada {
    height: 104px;
    flex-basis: 104px;
  }

  .pzw__movil-titulo {
    font-size: 12.5px;
  }

  .pzw__movil-cuerpo {
    gap: 9px;
    padding: 10px 9px 11px;
  }

  .pzw__movil-fila:nth-of-type(3) {
    display: flex;
  }

  .pzw__movil-foto {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .pzw__movil-sitio {
    font-size: 12px;
  }

  .pzw__movil-dato {
    font-size: 10px;
  }

  .pzw__movil-precio {
    font-size: 11.5px;
  }

  .pzw__movil-boton {
    font-size: 11.5px;
    padding: 8px;
  }

  .pzw__ficha {
    left: 144px;
    top: 6px;
    width: 168px;
  }

  .pzw__ficha .pza__ficha-cabecera {
    padding: 9px 10px;
    gap: 8px;
  }

  /* A 168 px el nombre no cabe a 12,5. */
  .pzw__ficha .pza__ficha-nombre {
    font-size: 11.5px;
  }

  /* A este ancho «leyendo olaviajes.com» no cabe en una línea: que parta,
     antes que quede cortada. */
  .pzw__ficha .pza__ficha-accion {
    font-size: 10.5px;
    white-space: normal;
    line-height: 1.25;
  }

  .pzw__ficha .pza__ficha-cara {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .pzw__ficha .pza__ficha-pasos {
    gap: 6px;
    padding: 9px 10px 10px;
  }

  .pzw__flotante {
    left: 144px;
    top: 200px;
    width: 168px;
    gap: 4px;
  }

  /* A este ancho el título y la pastilla no caben en la misma línea. */
  .pzw__flotante-fila {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .pzw__flotante-fila .pza__flotante-titulo {
    white-space: normal;
    order: 2;
  }

  .pzw__flotante-url {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
}