/* PURE — plantilla de página de taller.
   Escrita contra `docs/referencia/04-taller-volver-a-mi.webp` y los siete
   campos que el brief §5 deja cerrados: qué se explora · para quién · qué
   sucede durante · quién facilita y su formación · modalidad, lugar,
   duración y fecha · valor, qué incluye y condiciones · cómo inscribirse.

   Esta primera instancia es un taller que YA OCURRIÓ, y eso cambia dos
   cosas de forma: no hay botón de inscripción en ningún sitio, y el sello
   de fecha pasada es lo primero que se lee. El sitio anterior siguió
   ofreciendo preventa y cobrando por Stripe tres meses y medio después de
   la fecha del taller; esta plantilla existe para que eso no pueda pasar
   por descuido. */

.entrada-taller{padding-block:clamp(38px,7vh,86px) clamp(52px,8vh,104px)}

/* El sello va antes del rótulo y del titular. No es una insignia decorativa:
   es la corrección de un error que costó dinero real, así que pesa lo que
   pesa un dato y no lo que pesa un adorno. */
.sello-pasado{
  display:inline-block;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--tinta);
  background:var(--rosa);
  border-radius:999px;
  padding:7px 15px;
  margin-bottom:14px;
}

.aviso-inscripcion{
  margin-top:clamp(20px,3vh,30px);
  padding-top:16px;
  border-top:1px solid #21264f1f;
  font-size:.92rem;line-height:1.62;opacity:.78;
  max-width:46ch;
}
.aviso-inscripcion a{color:var(--tinta);font-weight:600}

/* ——— Los cinco pasos ————————————————————————————————————— */

/* Numerados porque son una secuencia de verdad: cada paso se apoya en el
   anterior y el orden es información, no estilo. Una lista de temas sueltos
   no llevaría número. */
.pasos{
  list-style:none;margin:clamp(28px,4vh,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,3.4vw,44px);
  counter-reset:paso;
}
.pasos li{margin:0}
.pasos .numero{
  font-family:var(--script);
  font-size:1.9rem;line-height:1;
  color:var(--coral);
  margin:0 0 10px;
}
.pasos h3{font-size:1.08rem;font-weight:600;margin:0 0 6px}
.pasos p:last-child{margin:0;font-size:.94rem;line-height:1.62;opacity:.8}

/* ——— Quiénes facilitaron ————————————————————————————————— */

.facilitadoras{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
  gap:clamp(22px,3.2vw,40px);
  margin-top:clamp(28px,4vh,48px);
}
.facilitadoras article{
  background:#fffffff2;
  border-radius:20px;
  padding:clamp(18px,2.4vw,26px);
}
/* Los tres retratos son reales, del propio sitio del cliente. La foto manda
   en la tarjeta: es lo que hace que estas tres sean personas y no tres
   párrafos. Los logos de las casas vienen en blanco sobre transparente,
   hechos para fondo oscuro; sobre la foto, con el degradado debajo, caen
   exactamente donde tienen que caer y no necesitan disco.

   La de Camila mide 352×466 en origen: es la más pequeña de las tres y no
   se amplía, porque ampliar inventa detalle. En una tarjeta de ~300px se
   ve bien; si esta página crece, hay que pedirle el original al cliente. */
.retrato-facilitadora{
  position:relative;margin:0 0 14px;
  aspect-ratio:3/4;
  border-radius:16px;
  overflow:hidden;
  background:var(--crema);
}
.retrato-facilitadora > img{width:100%;height:100%;object-fit:cover;display:block}
.retrato-facilitadora figcaption{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:center;gap:9px;
  padding:34px 14px 12px;
  /* El degradado no es decoración: sin él, el logo blanco y el rótulo caen
     sobre lo que traiga la foto y a veces desaparecen. */
  background:linear-gradient(to top,#21264fcc,#21264f00);
}
.retrato-facilitadora .marca-casa{width:26px;height:26px;object-fit:contain;flex:none;display:block}
.retrato-facilitadora .casa{
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:#fff;line-height:1.2;
}
.facilitadoras h3{font-size:1.22rem;font-weight:600;margin:0}
.facilitadoras .papel{font-size:.86rem;opacity:.66;margin:2px 0 12px}
.facilitadoras article > p:last-child{margin:0;font-size:.92rem;line-height:1.66;opacity:.84}

/* ——— La ficha ———————————————————————————————————————————— */

/* Una lista de definiciones, no una tabla: son pares dato-valor, y en un
   teléfono una tabla de dos columnas obliga a scroll horizontal. */
.ficha{
  margin:clamp(26px,4vh,44px) 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:0 clamp(26px,3.6vw,52px);
}
.ficha > div{
  padding:15px 0;
  border-top:1px solid #21264f1a;
}
.ficha dt{
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;opacity:.55;margin-bottom:4px;
}
.ficha dd{margin:0;font-size:1rem;line-height:1.6}

@media(max-width:820px){
  .aviso-inscripcion{max-width:none}
}