/* ==========================================================================
   AREA UNITED · Página «Clases» · Hero corto, índice de anclas y 11 fichas
   (foto 4:5 fija a un lado, texto al otro; el lado alterna con --flip).
   Solo prefijo p2-cd-. No redefine nada de tokens.css ni base.css.
   ========================================================================== */

:root {
  --p2-cd-fs-h1: clamp(48px, 8vw, 112px);
  --p2-cd-fs-name: clamp(52px, 7vw, 104px);
  --p2-cd-section-y: clamp(56px, 7vw, 104px);
}

/* Las anclas #slug caen bajo la cabecera fija también en el salto nativo */
.p2-cd-item, .p2-cd-hero { scroll-margin-top: var(--header-h); }

/* --- Hero corto de página --- */
.p2-cd-hero {
  --grain: var(--grain-hero);
  padding-top: calc(var(--header-h) + var(--section-y));
  isolation: isolate;
  overflow: hidden;
}
.p2-cd-hero > .container { position: relative; z-index: 1; }
.p2-cd-crumb { margin-bottom: clamp(28px, 4vw, 48px); }
.p2-cd-back { font-size: 14px; color: var(--gray-text); }
.p2-cd-back:hover { color: var(--white); }
.p2-cd-back .arrow { order: -1; }
.p2-cd-back:hover .arrow { transform: translateX(-6px); }

.p2-cd-hero-head { display: grid; gap: 20px; justify-items: start; }
.p2-cd-hero-head .label { color: var(--yellow); }
.p2-cd-hero-head h1 { font-size: var(--p2-cd-fs-h1); max-width: 12ch; }
.p2-cd-hero-head .lead { max-width: 58ch; }
.p2-cd-hero-actions { margin-top: 8px; }

/* --- Índice de anclas: lista con líneas, número, punto y nombre --- */
.p2-cd-index {
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: 24px;
  border-top: var(--line);
}
.p2-cd-index-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
}
.p2-cd-index-link {
  display: grid;
  grid-template-columns: 2.6em 8px 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 12px 0;
  border-bottom: var(--line);
  transition: color var(--t-fast);
}
.p2-cd-index-link::after {               /* flecha que aparece al pasar */
  content: "";
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-fast), transform var(--t-base) var(--ease-out);
}
.p2-cd-index-link:hover, .p2-cd-index-link:focus-visible { color: var(--yellow); }
.p2-cd-index-link:hover::after, .p2-cd-index-link:focus-visible::after { opacity: 1; transform: none; }
.p2-cd-index-link:focus-visible { box-shadow: inset 0 0 0 2px var(--yellow); }
.p2-cd-index-num {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--gray-text);
}
.p2-cd-index-link .display { font-size: clamp(26px, 3vw, 34px); line-height: 1; }

/* --- Ficha de clase --- */
.p2-cd-item { padding-block: var(--p2-cd-section-y); }
.p2-cd-grid { display: grid; gap: 32px; }

/* Foto 4:5 con el tratamiento común (.p2-photo) y etiqueta abajo */
.p2-cd-photo {
  display: block;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
}
.p2-cd-photo img { filter: saturate(.8) contrast(1.08) brightness(.92); }
.p2-cd-photo::before {                   /* velo bajo para que se lea la etiqueta */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,.7) 100%);
}
.p2-cd-photo-label {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.p2-cd-photo-label .p2-tag { color: var(--white); }
.p2-cd-photo-label .p2-tag:last-child::before { display: none; }
.p2-cd-photo-label .p2-tag:last-child { color: var(--gray-text); text-align: right; }

/* Hueco de IMAGEN PENDIENTE: negro, misma proporción, nombre en contorno */
.p2-cd-photo--pending {
  display: grid;
  place-items: center;
  background: var(--black);
  border: 1px solid var(--surface-2);
  container-type: inline-size;
}
.p2-cd-photo--pending::after { opacity: .2; }
.p2-cd-pending-name {
  font-size: 22cqw;
  line-height: .85;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  -webkit-text-stroke-width: 1.5px;
  opacity: .8;
}
.p2-cd-photo--pending .p2-cd-photo-label .p2-tag:last-child { color: var(--yellow); }

/* Columna de texto */
.p2-cd-copy { display: grid; gap: 28px; align-content: start; }
.p2-cd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.p2-cd-num { font-size: 15px; letter-spacing: .04em; color: var(--yellow); }
.p2-cd-num-total { color: var(--gray-text-light); }
.p2-cd-provisional {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gray-text);
  border: 1px dashed var(--gray-text-light);
  padding: 5px 8px;
  line-height: 1;
}
.p2-cd-title { display: flex; align-items: center; gap: 16px; margin-top: -8px; }
.p2-cd-title .dot { width: 12px; height: 12px; }
.p2-cd-title h2 { font-size: var(--p2-cd-fs-name); }
.p2-cd-summary { margin-top: -8px; }

/* Duración · Nivel */
.p2-cd-facts {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--line);
  border-bottom: var(--line);
}
.p2-cd-facts > div {
  display: grid;
  gap: 8px;
  padding: 16px 16px 16px 0;
}
.p2-cd-facts > div + div { border-left: var(--line); padding-left: 16px; }
.p2-cd-facts dd { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1; }

/* Bloques de texto con etiqueta de ficha técnica */
.p2-cd-block { display: grid; gap: 12px; }
.p2-cd-block > p { color: #D6D6D4; max-width: 58ch; }
.p2-cd-block > h3 { margin: 0; font-weight: 400; }

/* Cómo es una sesión: pasos numerados con línea vertical */
.p2-cd-steps { display: grid; }
.p2-cd-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "num title" "num text";
  column-gap: 14px;
  padding-block: 14px;
}
.p2-cd-step::before {                    /* línea que une los pasos */
  content: "";
  position: absolute;
  left: 15px;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--surface-2);
}
.p2-cd-step:first-child::before { top: 14px; }
.p2-cd-step:last-child::before { bottom: auto; height: 14px; }
.p2-cd-step-num {
  grid-area: num;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: var(--black);
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font-size: 14px;
  letter-spacing: .02em;
  position: relative;
  z-index: 1;
  margin-top: -4px;
}
.p2-cd-step-title { grid-area: title; font-size: clamp(22px, 2.4vw, 28px); line-height: 1; }
.p2-cd-step p { grid-area: text; margin-top: 6px; font-size: 15px; color: var(--gray-text); max-width: 44ch; }

/* Qué trabajas (etiquetas cuadradas) · Qué traer (lista con punto amarillo) */
.p2-cd-lists { display: grid; gap: 28px; }
.p2-cd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.p2-cd-tags li {
  display: inline-flex;
  align-items: center;
  height: var(--p2-chip-h);
  padding-inline: 12px;
  border: 1px solid var(--surface-2);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1;
  color: var(--white);
}
.p2-cd-bring { display: grid; gap: 8px; }
.p2-cd-bring li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  color: #D6D6D4;
}
.p2-cd-bring li::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--yellow); translate: 0 -1px; }

.p2-cd-actions { padding-top: 8px; }

/* --- Tablet --- */
@media (min-width: 768px) {
  .p2-cd-index-list { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .p2-cd-index-link { padding: 14px 0; }
  .p2-cd-grid { gap: 40px; }
  .p2-cd-media { max-width: 560px; }
  .p2-cd-lists { grid-template-columns: 1fr 1fr; gap: 32px; }
  .p2-cd-copy { gap: 32px; }
}

/* --- Escritorio: foto 5 / texto 7, foto fija bajo la cabecera; lado alterno --- */
@media (min-width: 1024px) {
  .p2-cd-index-list { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
  .p2-cd-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .p2-cd-media {
    max-width: none;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
  .p2-cd-item--flip .p2-cd-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .p2-cd-item--flip .p2-cd-media { order: 2; }
  .p2-cd-copy { gap: 36px; }
  .p2-cd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (min-width: 1280px) {
  .p2-cd-grid { gap: 96px; }
}

/* --- Reduced motion: sin flecha animada ni desplazamientos --- */
@media (prefers-reduced-motion: reduce) {
  .p2-cd-index-link::after { transform: none; }
  .p2-cd-back:hover .arrow { transform: none; }
}