/* ═══════════════════════════════════════════════════════════════
   BORRADOR · LA HOME CON DOS CAMINOS
   ═══════════════════════════════════════════════════════════════

   Hoja aparte a propósito. No toca ni una línea de v3-styles.css,
   así que este borrador se puede borrar de un tirón sin dejar
   rastro en lo que ya funciona.

   Todo está escrito contra las variables de tokens.css: ni un color
   ni una tipografía inventados. Si mañana cambia la paleta, esto
   cambia con ella.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · EL HÉROE: LA BIFURCACIÓN ─────────────────────────────── */

.dc-hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3rem, 6vw, 5rem);
  background: var(--bg);
  /* SIN overflow:hidden, Y NO ES UN DESCUIDO. Basta con que un ancestro
     lo tenga para que el `position:sticky` de la ilustración deje de
     funcionar, sin aviso y sin error. Nada se desborda aquí. */
}

.dc-hero-head {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

.dc-badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-white);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 1.25rem;
}

.dc-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.dc-title em { font-style: italic; color: var(--coral); }

.dc-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* ── La que presenta los dos caminos ──────────────────────────

   Va EN MEDIO de las dos tarjetas, señalando con un índice a cada
   camino. El gesto cuenta en un vistazo lo que el texto tarda una frase
   en decir.

   Y va IMANTADA AL PIE DE LA VENTANA: mientras se baja, ella se queda
   quieta abajo y las dos tarjetas pasan por delante, cada una bajo su
   mano. Cuando se acaban, se despega y sube con ellas. `sticky` con
   `bottom: 0` hace exactamente eso, sin una línea de JavaScript —y por
   eso ningún ancestro puede llevar `overflow: hidden`.

   Las manos se salen de su columna a propósito, con los márgenes
   negativos, y quedan pisando un poco cada tarjeta. Ese solape es lo que
   hace que se lea como «este y este» y no como tres cosas en fila. */

.dc-persona {
  position: sticky;
  bottom: 0;
  align-self: end;
  z-index: 2;
  pointer-events: none;
  /* Se ensancha por encima de las tarjetas sin robarles anchura: la
     columna sigue midiendo lo que mide y la imagen se desborda. Cuanto
     más se desborda, más pisan las manos. */
  margin-inline: clamp(-4.5rem, -4.5vw, -2.5rem);
}

.dc-persona img {
  width: 100%;
  height: auto;
  display: block;
  /* El pie de la foto está recortado a media cadera; ese corte
     horizontal a la vista parece un error de montaje. Se disuelve. */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* Apiladas las tarjetas, el gesto de «una a cada lado» deja de decir
   nada y lo de quedarse abajo estorba: sube arriba del todo, quieta, y
   hace de remate del titular. */
@media (max-width: 899px) {
  .dc-persona {
    position: relative;
    order: -1;
    margin-inline: auto;
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .dc-persona img {
    width: min(70vw, 320px);
    /* Por delante de las manchas: los dedos quedan encima y parece que
       las sujeta. No roba la pulsación porque la ilustración entera va
       con `pointer-events: none` heredado del contenedor. */
    position: relative;
    z-index: 4;
  }

  /* Los dedos tienen que apuntar a algo, y aquí ese algo son los
     atajos: se les deja sitio a los lados. */
  .dc-persona .dc-atajos { display: block; }
}

/* ── Los atajos del móvil ─────────────────────────────────────

   Apilado, el gesto de «uno a cada lado» se queda sin nada a lo que
   señalar: las tarjetas están una debajo de otra y muy abajo. Estas dos
   etiquetas se ponen justo donde apuntan sus dedos y llevan a su camino.

   Se meten un poco por debajo de ella a propósito, para que la punta del
   dedo caiga encima de la etiqueta. Con un hueco entre medias parecerían
   dos cosas sueltas en vez de «esta». */

/* Escondidos por defecto. La regla que los enciende va en el bloque de
   móvil de más arriba y lleva un selector más específico a propósito:
   con la misma especificidad ganaría esta, por ir después, y no
   aparecerían nunca. */
.dc-atajos { display: none; }

.dc-atajo {
  position: absolute;
  /* Por delante de ella: si van por detrás, con la chica grande apenas
     asoma un dedo de etiqueta y no se lee nada. Quedan justo debajo de
     cada mano, con la punta del dedo asomando por encima. */
  z-index: 3;
  width: 34vw;
  max-width: 138px;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* Holgado a propósito: la forma se deforma sola y con poco margen el
     texto se saldría por las esquinas al redondearse. */
  padding: 0.85rem 0.9rem;
  text-align: center;
  background: var(--bg-white);
  box-shadow: 0 6px 22px rgba(26, 20, 16, 0.10);
  pointer-events: auto;
  /* Manchas, no cajas: mismos fotogramas que las formas del fondo y que
     la burbuja del chat, para que la página se mueva toda igual. */
  border-radius: 46% 54% 58% 42% / 50% 46% 54% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .dc-atajo--a { animation: morphBlob 9s ease-in-out infinite, floatC 7s ease-in-out infinite; }
  .dc-atajo--b { animation: morphBlob 11s 0.6s ease-in-out infinite, floatA 8s 0.4s ease-in-out infinite; }
}

.dc-atajo-que {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* El «desde» en su propia línea y el precio entero debajo: en una sola
   línea el importe se partía por la mitad al final del renglón, y un
   precio partido se lee dos veces. */
.dc-atajo-desde {
  font-size: 0.68rem;
  color: var(--ink-3);
  line-height: 1.2;
}

.dc-atajo-precio {
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}

.dc-atajo-mas {
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--coral);
}

/* A LA ALTURA DE SU CABEZA, no debajo de ella: así las dos manchas
   salen de sus manos y le enmarcan la cara. Encajadas abajo parecían dos
   botones puestos en fila; aquí parecen dos globos que ella sostiene.

   Bastante por encima de sus manos: los dedos van por delante y tienen
   que caer sobre el BORDE de la mancha, no sobre su texto. Un poco más
   abajo y la punta del dedo se come el «Más info», que es justo lo que
   hay que leer.

   Desniveladas entre sí, además, que a la misma altura vuelven a
   parecer un formulario. */
.dc-atajo--a { left: -5%;  top: -12%; }
.dc-atajo--b { right: -5%; top: -5%; }

/* Que el menú de arriba no tape el camino al que se acaba de saltar. */
.dc-card { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ── Las formas de colores ────────────────────────────────────

   Se reutilizan las clases de la home (.hero-shape-*): heredan el color
   y la animación de flotar y deformarse que ya existen, así que el día
   que se cambie una, cambian las dos. Aquí solo se recolocan.

   ESTRECHAS Y APRETADAS CONTRA ELLA, a propósito. En cuanto se abren un
   poco se meten sobre el texto de las tarjetas, y ahí dejan de ser
   decoración para ser un estorbo. Se quedan dentro de su carril. */

.dc-formas {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: 62%;
  height: 66%;
  z-index: -1;
  pointer-events: none;
}

.dc-formas .hero-shape-blob      { width: 66%; height: 40%; left: 6%;   bottom: 2%;  }
.dc-formas .hero-shape-yellow    { width: 66%; height: 48%; right: 4%;  top: 8%;     }
.dc-formas .hero-shape-coral     { width: 30%; height: 44%; right: 26%; top: 2%;     }
.dc-formas .hero-shape-lila      { width: 26%; height: 22%; left: 0;    top: 30%;    }
.dc-formas .hero-shape-turquoise { width: 12%; height: 10%; right: 0;   bottom: 30%; }

@media (max-width: 899px) {
  .dc-formas .hero-shape-coral,
  .dc-formas .hero-shape-turquoise { display: none; }
}

/* ── Las dos tarjetas ─────────────────────────────────────────── */

.dc-caminos {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}

/* Tarjeta · ella · tarjeta. La columna del centro se lleva lo justo:
   las tarjetas mandan y ella cabe en medio. */
@media (min-width: 900px) {
  .dc-caminos {
    grid-template-columns: 1fr clamp(220px, 24vw, 330px) 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: stretch;
  }
}

.dc-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-white);
  /* Sin sombra en una y con ella en la otra sería decir cuál es la
     buena. Aquí las dos pesan lo mismo: la elección es del que lee. */
  box-shadow: 0 1px 2px rgba(26, 20, 16, 0.04);
}

.dc-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 0.9rem;
}

.dc-card-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.85rem;
}

.dc-card-body {
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
}

.dc-card-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.4rem;
}

/* El «desde» va pequeño y delante del número, no dentro: los dos precios
   son el del escalón más bajo —600 € es una landing, 12,99 € el plan
   pequeño— y esconderlo en la letra chica se paga en la primera llamada. */
.dc-precio-desde {
  font-size: 0.9rem;
  color: var(--ink-3);
  align-self: center;
}

.dc-precio-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  line-height: 1;
  color: var(--ink);
}

.dc-precio-nota { font-size: 0.84rem; color: var(--ink-3); }

.dc-lista {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.dc-lista li {
  display: flex;
  gap: 0.65rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.dc-lista .check {
  flex: none;
  color: var(--coral);
  font-weight: 600;
}

/* El pie de la tarjeta se pega abajo para que las dos rimen aunque
   una tenga un punto más que la otra. */
.dc-card-pie { margin-top: auto; }

.dc-card-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dc-card-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.dc-card-link:hover { color: var(--coral); }

.dc-card-para {
  font-size: 0.86rem;
  font-style: italic;
  color: var(--ink-3);
  margin: 0;
}

/* La línea que desatasca al indeciso. Va debajo de las dos y
   centrada: no pertenece a ninguna de ellas. */
.dc-cual {
  max-width: 40rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.dc-cual strong { color: var(--ink); font-weight: 600; }

/* ── 2 · LA COMPARACIÓN ───────────────────────────────────────── */

.dc-comparar { background: var(--bg-white); padding: var(--section-py) 0; }

.dc-tabla {
  max-width: 56rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}

.dc-fila {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
}

.dc-fila:last-child { border-bottom: 0; }

@media (min-width: 760px) {
  .dc-fila { grid-template-columns: 1.1fr 1fr 1fr; }
}

.dc-celda {
  padding: 1rem clamp(1rem, 2vw, 1.5rem);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.dc-celda--pregunta {
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
}

/* En pantalla estrecha la tabla se convierte en fichas: sin esto,
   tres columnas de 90 píxeles no se leen. */
@media (max-width: 759px) {
  .dc-celda--valor::before {
    content: attr(data-camino);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.2rem;
  }
  .dc-celda--valor + .dc-celda--valor { border-top: 1px solid var(--border); }
}

@media (min-width: 760px) {
  .dc-cabecera .dc-celda { font-weight: 600; color: var(--ink); background: var(--bg-soft); }
}

/* ── 3 y 4 · LOS DOS CAMINOS EN DETALLE ───────────────────────── */

.dc-camino { padding: var(--section-py) 0; }
.dc-camino--a { background: var(--bg); }
.dc-camino--b { background: var(--bg-white); }

.dc-camino-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.dc-camino-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 0.9rem;
}

.dc-camino-title em { font-style: italic; color: var(--coral); }

.dc-camino-sub { font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); margin: 0; }

.dc-rejilla {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.dc-punto {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-white);
}

.dc-camino--b .dc-punto { background: var(--bg-soft); }

.dc-punto-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--coral);
  display: block;
  margin-bottom: 0.6rem;
}

.dc-punto-title {
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--ink);
  margin: 0 0 0.45rem;
}

.dc-punto-body { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin: 0; }

.dc-camino-ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* ── Las preguntas incómodas del camino B ─────────────────────── */

.dc-faq {
  max-width: 48rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--border);
}

.dc-faq-item { padding: 1.35rem 0; border-bottom: 1px solid var(--border); }

.dc-faq-q { font-weight: 600; font-size: 1rem; color: var(--ink); margin: 0 0 0.4rem; }

.dc-faq-a { font-size: 0.94rem; line-height: 1.62; color: var(--ink-2); margin: 0; }

/* ── Nota honesta bajo las reseñas ────────────────────────────── */

.dc-nota-resenas {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════
   LA PÁGINA DE PRECIOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Lo que no cambia de un camino al otro ──────────────────── */

.pdc-comun {
  padding-block: var(--section-py);
  background: var(--bg-white);
  border-top: 0.5px solid var(--border);
}

.pdc-comun-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pdc-comun-item {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-soft);
}

.pdc-comun-title {
  font-weight: 600;
  font-size: 1.03rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.pdc-comun-body { font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* El «/mes» no puede pesar lo mismo que la cifra. */
.pdc-mes {
  font-family: var(--f-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-3);
}

/* ── Que no haya tres bloques seguidos del mismo color ───────
   Bifurcación en crema, «lo que no cambia» en blanco, autoservicio otra
   vez en crema y los packs en blanco. Alternando, cada familia se lee
   como un bloque y no como una lista larguísima. */
#planes-tu { background: var(--bg); }

/* ── Los planes de autoservicio, en dos grupos ──────────────── */

.pdc-grupo { margin-top: clamp(2rem, 4vw, 3rem); }

.pdc-grupo-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.pdc-grupo-sub {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

.pdc-grid-4 {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
}

/* En cuatro columnas la cifra tiene que caber: «199,99€/mes» se salía
   de la tarjeta con el tamaño de las de tres columnas. */
.pdc-grid-4 .pricing-detail-price { font-size: clamp(1.5rem, 2.3vw, 2rem); }

@media (min-width: 640px)  { .pdc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pdc-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Lo que todavía no se puede contratar ────────────────────
   Se enseña porque el que va a montar una tienda quiere saber si podrá
   crecer, y callarlo le hace pensar que se queda en 20 productos para
   siempre. Pero se enseña APAGADO y sin botón: una tarjeta con precio y
   botón que no se puede pulsar es una promesa a medias. */

.pdc-pronto { opacity: 0.72; }

.pdc-pronto .pricing-detail-price,
.pdc-pronto .pricing-detail-name { color: var(--ink-2); }

.pdc-badge-pronto {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.25em 0.75em;
  margin-bottom: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--border);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Que el menú fijo no tape el titular de la familia a la que se salta. */
#planes-tu,
#planes-nosotros { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ── La entradilla, a la anchura del titular ──────────────────

   Se corta donde acaba «sin sorpresas» en vez de seguir hasta media
   pantalla. Pasa de tres líneas largas a cuatro y pico más cortas, que
   se leen mejor y, de paso, dejan de meterse en el terreno de las
   manchas cuando la ventana se estrecha.

   El ancho está a ojo sobre el titular (421 px a tamaño completo). No se
   puede atar al ancho real del H1 sin JavaScript, así que lleva `min()`
   para que en pantallas pequeñas mande el 100%. */

.precios-hero .page-hero-sub { max-width: min(100%, 27rem); }

/* ═══════════════════════════════════════════════════════════════
   PRECIOS · LA BIFURCACIÓN, DENTRO DEL HÉROE
   ═══════════════════════════════════════════════════════════════

   Vivía en una sección aparte, debajo del titular, y por mucho que se
   pegaran las dos siempre se leía como dos bloques y dejaba un agujero
   de media pantalla en medio. Ahora es la segunda columna del héroe:
   titular a la izquierda, pareja a la derecha y las manchas encima de
   ellos, todo en la misma banda y a la misma altura.

   Las manchas van en posición absoluta sobre la pareja —y una de ellas
   se sale por la izquierda, hasta el hueco que deja el titular— porque
   es donde caen los dedos. En una rejilla ordenada quedarían alineadas
   y el gesto no señalaría nada.
   ═══════════════════════════════════════════════════════════════ */

.precios-hero .page-visual { display: none; }

.pdc-lado {
  position: relative;
  align-self: end;
  min-width: 0;
}

.pdc-pareja {
  position: relative;
  /* Con z-index, la capa de las formas (que va en -1) se queda dentro y
     detrás de la foto; sin él se cuela bajo el fondo y no se ve. */
  z-index: 0;
  /* Más ancha que su columna y volcada a la derecha: la pareja tiene que
     pesar en la composición, y encogida dentro de media pantalla queda
     como una pegatina. Se sale por abajo y la sección la recorta, que es
     el mismo recurso que ya usa la home. */
  width: 166%;
  margin-left: -93%;
  margin-bottom: clamp(-6rem, -6vw, -2.5rem);
  pointer-events: none;
}

/* En espejo: la foto original apunta a la derecha y volteada señala
   hacia dentro de la página, al titular y a las manchas. */
.pdc-pareja img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  transform: scaleX(-1);
}

.pdc-pareja .dc-formas { top: 6%; width: 74%; height: 72%; }

.pdc-mancha {
  position: absolute;
  z-index: 3;
  width: min(14rem, 34vw);
  max-width: none;
  padding: 0.85rem 1rem;
  text-align: center;
}

.pdc-mancha .dc-atajo-que    { font-size: 0.8rem; }
.pdc-mancha .dc-atajo-desde  { font-size: 0.72rem; }
.pdc-mancha .dc-atajo-precio { font-size: 1.12rem; }
.pdc-mancha .dc-atajo-mas    { font-size: 0.74rem; }

/* COLOCADAS SOBRE LA PROPIA FOTO, en porcentajes de ella.
   Antes iban en porcentajes de la columna, que mide otra cosa: cada vez
   que la pareja crecía o encogía, las manchas se quedaban donde estaban
   y los dedos dejaban de apuntar a nada.

   Dentro de la foto, los dos dedos levantados están siempre en el mismo
   sitio —él al 43 % de ancho y al 3 % de alto; ella al 6 % y al 35 %—,
   así que las manchas los siguen solas.

   Y a la izquierda de las caras, nunca encima: taparles la cara es
   quitarle al bloque lo único que lo hace simpático. */
.pdc-mancha--a { bottom: 96%; right: 52%; }
.pdc-mancha--b { top: 4%;     right: 74%; }

@media (prefers-reduced-motion: no-preference) {
  .pdc-mancha--a { animation: morphBlob 10s ease-in-out infinite, floatD 8s ease-in-out infinite; }
  .pdc-mancha--b { animation: morphBlob 12s 0.5s ease-in-out infinite, floatB 9s 0.7s ease-in-out infinite; }
}

/* Apilado, las manchas dejan de flotar: van debajo de la pareja, en
   fila, que es lo único que se lee en una columna estrecha. */
@media (max-width: 900px) {
  .pdc-mancha {
    position: static;
    width: 100%;
    margin-top: 0.75rem;
  }
  .pdc-mancha--a { margin-top: 1.25rem; }
}