/* ============================================================
   Tarot con alma · Catálogo de lecturas
   Sistema visual compartido con "Mesa de lectura al amanecer" (v5)

   Usa exactamente los mismos tokens que la base de conocimiento
   Rider-Waite: crema rosado, malva rector y oro cálido, con
   Cinzel para titulares y EB Garamond para el texto.

   Todo está bajo el ámbito .catalogo, así que este archivo puede
   convivir con el estilo.css de la web principal sin pisar
   ninguna de sus clases (.bloque, .ficha, .lamina, .volver…).
   ============================================================ */

:root {
  /* --- Superficies claras --- */
  --bg-0:        #FAF1ED;   /* fondo base, crema rosado */
  --bg-1:        #FDF8F5;   /* superficie de tarjetas y bloques */
  --bg-2:        #F6E7E1;   /* superficie elevada / hover */
  --bg-3:        #F0DAD3;   /* cabeceras de tabla, chips */

  /* --- Marca --- */
  --primary:       #A6687F;   /* malva, color rector */
  --primary-bright:#5E2540;   /* vino: énfasis y titulares */
  --primary-deep:  #8E4E68;   /* malva profundo para degradados */
  --accent:        #B08A3C;   /* oro cálido, realce y detalles */
  --accent-soft:   #C9A868;

  /* --- Texto --- */
  --text:        #3E2230;
  --text-soft:   #6B4A58;
  --text-dim:    #8A6B78;

  /* --- Líneas --- */
  --line:        rgba(94,37,64,.18);
  --line-soft:   rgba(94,37,64,.10);

  /* Emociones (Plutchik) sobre fondo claro: tonos medios */
  --em-1: #D9A93C; /* Alegría */
  --em-2: #7FB369; /* Confianza */
  --em-3: #4FA98C; /* Miedo */
  --em-4: #57A8D0; /* Sorpresa */
  --em-5: #6C82D4; /* Tristeza */
  --em-6: #9C6BC4; /* Aversión */
  --em-7: #D96A6A; /* Ira */
  --em-8: #DE9648; /* Anticipación */

  --shape-s: 10px;
  --shape-m: 16px;
  --shape-l: 22px;

  --shadow-1: 0 4px 18px rgba(94,37,64,.10);
  --shadow-2: 0 14px 40px rgba(94,37,64,.16);
  --glow:     0 0 0 1px rgba(166,104,127,.35), 0 12px 34px rgba(166,104,127,.22);

  --dur:    .3s;
  --dur-lg: .6s;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --display: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  --texto:   'EB Garamond', Georgia, 'Times New Roman', serif;

  --ancho: 1180px;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

.catalogo *,
.catalogo *::before,
.catalogo *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.catalogo {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;      /* evita el salto por la barra del navegador móvil */
  color: var(--text);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  background: var(--bg-0);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;  /* Safari no agranda el texto en horizontal */
  text-size-adjust: 100%;
}

/* El halo de color va en una capa fija propia.
   Con background-attachment: fixed, iOS lo repinta mal al hacer scroll. */
body.catalogo::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(166,104,127,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(195,155,82,.14), transparent 55%);
}

.catalogo img { max-width: 100%; display: block; }

/* Los anclajes (#lecturas, #formacion, #testimonios) no quedan
   ocultos bajo la cabecera fija al pulsarlos desde el menú. */
.catalogo [id] { scroll-margin-top: 92px; }

.catalogo a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease); }
.catalogo a:hover { color: var(--primary-bright); }

.catalogo ::selection { background: rgba(166,104,127,.22); color: var(--primary-bright); }

.catalogo :focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.catalogo [hidden] { display: none !important; }

.catalogo .contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 26px);
}

/* ------------------------------------------------------------
   Animaciones
   ------------------------------------------------------------ */

@keyframes surgir {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes bajar {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes latido-oro {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}
@keyframes deriva-fondo {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------ */

.catalogo h1,
.catalogo h2,
.catalogo h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--primary-bright);
  line-height: 1.2;
  letter-spacing: .03em;
  margin: 0;
}

.catalogo .titular {
  font-size: clamp(1.8rem, 4.2vw, 2.9rem);
}
.catalogo .titular em {
  font-family: var(--texto);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--accent);
}

.catalogo .epigrafe {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.catalogo .entradilla {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 58ch;
}

.catalogo .lema {
  font-family: var(--texto);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: var(--primary-bright);
  letter-spacing: .02em;
}

/* Estrella divisoria: hilo dorado con la estrella de las fichas */
.catalogo .estrella {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0;
  color: var(--accent);
}
.catalogo .estrella::before,
.catalogo .estrella::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
}
.catalogo .estrella svg { width: 16px; height: 16px; flex: none; }
.catalogo .estrella.corta { max-width: 280px; }

/* ------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------ */

.catalogo .cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(250,241,237,.88);
  border-bottom: 1px solid var(--line);
}
.catalogo .cabecera::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 180px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: latido-oro 4s ease-in-out infinite;
}
.catalogo .cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.catalogo .marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .08em;
  color: var(--primary-bright);
}
.catalogo .marca:hover { color: var(--primary-bright); }
.catalogo .marca svg { width: 14px; height: 14px; color: var(--accent); }

.catalogo .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px clamp(14px, 2.5vw, 28px);
  font-family: var(--display);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.catalogo .menu a {
  color: var(--text-soft);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.catalogo .menu a:hover,
.catalogo .menu a:focus-visible { color: var(--primary-bright); border-color: var(--accent); }

/* ------------------------------------------------------------
   Portada
   ------------------------------------------------------------ */

.catalogo .portada {
  position: relative;
  overflow: hidden;
  margin: 26px auto 0;
  max-width: var(--ancho);
  border-radius: var(--shape-l);
  border: 1px solid var(--line);
  padding: clamp(44px, 7vw, 74px) 0 clamp(38px, 6vw, 60px);
  text-align: center;
  background: linear-gradient(110deg, #F7E4DE, #FBEFE9, #F3D9D2, #FCEAE2);
  background-size: 300% 300%;
  animation: deriva-fondo 18s ease-in-out infinite alternate;
}
.catalogo .portada::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 220px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: latido-oro 4s ease-in-out infinite;
}
.catalogo .portada .titular {
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  animation: bajar .8s var(--ease-out) both;
}
.catalogo .portada .epigrafe { animation: bajar .8s var(--ease-out) both; }
.catalogo .portada .entradilla { margin: 0 auto; animation: surgir .8s var(--ease-out) .12s both; }
.catalogo .portada .lema { margin-top: 22px; animation: surgir .8s var(--ease-out) .2s both; }
.catalogo .portada .estrella { max-width: 300px; margin-inline: auto; }

/* ------------------------------------------------------------
   La tirada · rejilla de lecturas
   Protagonismo a la lámina: sin cajas pesadas.
   ------------------------------------------------------------ */

.catalogo .tirada {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(26px, 3.5vw, 38px) clamp(20px, 2.5vw, 28px);
  padding: clamp(44px, 7vw, 80px) 0 clamp(40px, 6vw, 70px);
}

.catalogo .carta {
  display: flex;
  flex-direction: column;
  color: inherit;
  border-radius: var(--shape-m);
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}
.catalogo .carta:hover { transform: translateY(-8px); }

.catalogo .carta .lamina {
  border-radius: var(--shape-m);
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--bg-2);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.catalogo .carta:hover .lamina {
  box-shadow: var(--glow);
  filter: saturate(1.06);
}
.catalogo .carta .lamina img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

.catalogo .carta h2 {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: .02em;
  margin-top: 16px;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.catalogo .carta:hover h2 { color: var(--primary-bright); }

.catalogo .carta p {
  margin: 6px 0 0;
  font-size: .95rem;
  font-style: italic;
  color: var(--text-dim);
}

.catalogo .pie-carta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.catalogo .precio-min {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  white-space: nowrap;
}
.catalogo .ver {
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--dur) var(--ease);
}
.catalogo .carta:hover .ver { color: var(--primary); }

/* Entrada en cascada */
@media (prefers-reduced-motion: no-preference) {
  .catalogo .revelar { opacity: 0; }
  .catalogo .revelar.dentro {
    animation: surgir .6s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }
}

/* ------------------------------------------------------------
   Página de lectura
   ------------------------------------------------------------ */

.catalogo .volver {
  display: inline-block;
  margin: 28px 0 22px;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--primary);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.catalogo .volver:hover { transform: translateX(-4px); color: var(--primary-bright); }

.catalogo .ficha {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: clamp(30px, 4.5vw, 46px);
  align-items: start;
  padding-bottom: clamp(40px, 6vw, 64px);
}
@media (max-width: 880px) {
  .catalogo .ficha { grid-template-columns: 1fr; }
}

.catalogo .ficha .titular { animation: bajar .6s var(--ease-out) both; }
.catalogo .ficha .entradilla { margin-top: 16px; }

.catalogo .lamina-grande {
  position: sticky;
  top: 96px;
  margin: 0;
  border-radius: var(--shape-m);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  animation: surgir .7s var(--ease-out) both;
}
@media (max-width: 880px) {
  .catalogo .lamina-grande { position: static; max-width: 380px; margin-inline: auto; }
}

/* Bloques de contenido */
.catalogo .bloque {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--shape-m);
  padding: 22px 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.catalogo .bloque:hover { transform: translateY(-3px); border-color: var(--line); }

.catalogo .bloque h2 {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.catalogo .bloque h3 {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary-bright);
  margin: 24px 0 10px;
}
.catalogo .bloque p { color: var(--text-soft); margin: 0 0 12px; }
.catalogo .bloque p:last-child { margin-bottom: 0; }

/* Listas de contenido */
.catalogo .lista { list-style: none; margin: 0; padding: 0; }
.catalogo .lista li {
  background: var(--bg-2);
  border-left: 3px solid var(--primary-deep);
  border-radius: var(--shape-s);
  padding: 13px 16px;
  margin-bottom: 10px;
  color: var(--text-soft);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.catalogo .lista li:last-child { margin-bottom: 0; }
.catalogo .lista li:hover {
  transform: translateX(6px);
  background: var(--bg-3);
  border-left-color: var(--accent);
}
.catalogo .lista li strong { color: var(--accent); font-weight: 600; }

.catalogo .lista.simple li {
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 7px 0 7px 24px;
  margin-bottom: 0;
  position: relative;
}
.catalogo .lista.simple li:hover { transform: none; background: none; }
.catalogo .lista.simple li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  color: var(--accent-soft);
  font-size: .85rem;
}

/* Datos de entrega */
.catalogo .entrega {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  animation: surgir .6s var(--ease-out) .06s both;
}
.catalogo .entrega li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-3);
  color: var(--primary-bright);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .04em;
}
.catalogo .entrega svg { width: 14px; height: 14px; color: var(--accent); flex: none; }

/* Precio: borde en degradado morado→oro, como los filtros de la web */
.catalogo .precio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  margin-top: 28px;
  padding: 22px 26px;
  border: 1px solid transparent;
  border-radius: var(--shape-l);
  background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
              linear-gradient(120deg, rgba(166,104,127,.38), rgba(195,155,82,.32)) border-box;
  box-shadow: var(--shadow-1);
}
.catalogo .precio .etiqueta {
  display: block;
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.catalogo .precio .cifra {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--accent);
}
.catalogo .precio-doble { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 40px); }

/* Botones */
.catalogo .boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary-deep), #BE7E96);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.catalogo .boton:hover {
  color: #fff;
  filter: brightness(1.12);
  box-shadow: 0 8px 22px rgba(142,78,104,.35);
  transform: translateY(-2px);
}
.catalogo .boton:active { transform: translateY(0) scale(.97); }

.catalogo .boton.linea {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--primary-bright);
}
.catalogo .boton.linea:hover { background: var(--bg-3); box-shadow: var(--glow); }

.catalogo .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.catalogo .aviso {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--accent-soft);
  font-size: .95rem;
  font-style: italic;
  color: var(--text-dim);
}

/* ------------------------------------------------------------
   Testimonios
   ------------------------------------------------------------ */

.catalogo .testimonios {
  margin: clamp(30px, 5vw, 50px) 0 clamp(50px, 8vw, 90px);
  padding: clamp(34px, 6vw, 60px) clamp(24px, 5vw, 54px);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--shape-l);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2)) padding-box,
              linear-gradient(120deg, rgba(166,104,127,.38), rgba(195,155,82,.32)) border-box;
  box-shadow: var(--shadow-2);
}
.catalogo .testimonios h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.catalogo .testimonios .estrella { max-width: 220px; margin-inline: auto; }
.catalogo .testimonios .entradilla { margin: 0 auto 12px; }
.catalogo .testimonios [data-testimonios-titulo] {
  font-family: var(--texto);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--primary-bright);
}
.catalogo .testimonios .boton { margin-top: 26px; }

/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */

.catalogo .pie {
  border-top: 1px solid var(--line-soft);
  padding: 30px 0 46px;
  font-size: .88rem;
  color: var(--text-dim);
}
.catalogo .pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

/* ------------------------------------------------------------
   Móvil
   ------------------------------------------------------------ */

@media (max-width: 700px) {
  /* La portada deja de pegarse a los bordes de la pantalla */
  .catalogo .portada { margin-inline: 14px; }
}

@media (max-width: 520px) {
  .catalogo .precio { flex-direction: column; align-items: flex-start; }
  .catalogo .precio .acciones { width: 100%; }
  .catalogo .acciones .boton { width: 100%; justify-content: center; }
  .catalogo .cabecera .contenedor { flex-direction: column; gap: 8px; padding-block: 12px; }
  .catalogo [id] { scroll-margin-top: 118px; }  /* la cabecera apilada es más alta */

  /* Los detalles de los cursos, en dos líneas para ganar ancho */
  .catalogo .detalles li { grid-template-columns: 38px 1fr; gap: 12px; }
  .catalogo .detalles .icono { width: 38px; height: 38px; }
  .catalogo .detalles .icono svg { width: 17px; height: 17px; }
}

/* ------------------------------------------------------------
   Pantallas táctiles
   En móvil el :hover se queda "pegado" tras tocar: una carta
   pulsada seguiría levantada al volver atrás. Aquí se anula.
   ------------------------------------------------------------ */

@media (hover: none) {
  .catalogo .carta:hover { transform: none; }
  .catalogo .carta:hover .lamina { box-shadow: var(--shadow-1); filter: none; }
  .catalogo .bloque:hover { transform: none; }
  .catalogo .lista li:hover { transform: none; background: var(--bg-2); border-left-color: var(--primary-deep); }
  .catalogo .volver:hover { transform: none; }
  .catalogo .boton:hover { transform: none; filter: none; box-shadow: none; }
  .catalogo .boton.linea:hover { background: var(--bg-2); box-shadow: none; }
}

/* ------------------------------------------------------------
   Accesibilidad: respeta la preferencia de menos movimiento
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .catalogo *,
  .catalogo *::before,
  .catalogo *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .catalogo .revelar { opacity: 1 !important; }
}

/* ------------------------------------------------------------
   Formaciones · bloques añadidos para los cursos
   Reutilizan los mismos tokens: no introducen colores nuevos.
   ------------------------------------------------------------ */

/* Distintivo: "Nuevo grupo en septiembre", "Plazas limitadas"… */
.catalogo .distintivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--primary-bright);
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.catalogo .distintivo::before {
  content: "✦";
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: 0;
}

/* Distintivo dentro de una carta de la portada */
.catalogo .carta .distintivo {
  margin: 14px 0 0;
  font-size: .62rem;
  padding: 4px 12px;
}

/* Detalles del curso: icono redondo + título + descripción */
.catalogo .detalles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.catalogo .detalles li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.catalogo .detalles li:last-child { border-bottom: 0; }

.catalogo .detalles .icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--primary);
  border: 1px solid var(--line-soft);
}
.catalogo .detalles .icono svg { width: 19px; height: 19px; }

.catalogo .detalles h3 {
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--primary-bright);
  margin: 6px 0 4px;
}
.catalogo .detalles p {
  margin: 0;
  font-size: .98rem;
  color: var(--text-soft);
}

/* Cierre de página: la frase con la que se despide cada curso */
.catalogo .cierre {
  margin: clamp(26px, 4vw, 40px) 0 0;
  padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 40px);
  text-align: center;
  border-radius: var(--shape-l);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
}
.catalogo .cierre .lema { margin: 0 0 10px; }
.catalogo .cierre p:last-child { margin-bottom: 0; color: var(--text-dim); }

/* Rótulo de pie de página, como la línea inferior de las fichas */
.catalogo .rotulo {
  margin: 26px 0 0;
  text-align: center;
  font-family: var(--display);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Rejilla de dos elementos (los cursos): sin auto-fit, para que no
   se queden estrechos y alineados a la izquierda en pantallas anchas. */
.catalogo .tirada.pareja {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-inline: auto;
}
@media (max-width: 620px) {
  .catalogo .tirada.pareja { grid-template-columns: 1fr; }
}

/* Sonda usada por comprobar.html para saber si esta hoja ha cargado */
#sonda { color: var(--primary); }

/* ------------------------------------------------------------
   Páginas legales
   ------------------------------------------------------------ */

.catalogo .legal { max-width: 780px; padding-bottom: clamp(40px, 6vw, 70px); }
.catalogo .legal .bloque h2 { font-size: .84rem; }
.catalogo .legal .lista li { font-size: .97rem; }
.catalogo .legal .entradilla { color: var(--text-dim); font-style: italic; }

/* Huecos por rellenar con los datos identificativos */
.catalogo .pendiente {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  background: rgba(176,138,60,.16);
  border: 1px dashed var(--accent);
  color: var(--text-soft);
  font-style: italic;
  font-size: .93em;
}