/* ==================================================================
   LideraT - Certificado (laboratorio)

   Pagina de pruebas en /certificado-lab. Solo la marca de LideraT:
   marino, rojo, granate, azul claro y crema; Fraunces para titulares
   y Quicksand para el texto. Todo va bajo .lc para no tocar nada del
   resto de la web.

   Dos secciones son las de la pagina original, tal cual ("En que
   consiste" en movil y "Que sesiones cuentan"): llevan .lt-section y
   los ajustes de aqui NO las tocan, se ven igual que en /certificado.
   Por eso las reglas de base van sobre "section:not(.lt-section)".

   Movimiento, dos momentos y ninguno mas:
   - al cargar, los cinco sellos de la cartilla (el pico);
   - al pasar por una sesion de la agenda final, su sello (el final).
   ================================================================== */

.lc {
  /* Marca */
  --navy: #003049;
  --red: #C1121F;
  --garnet: #780000;
  --blue: #669BBC;
  --cream: #fbf0d8;
  --paper: #fffaf0;

  /* Texto secundario: tenido del color de su fondo, nunca gris. */
  --navy-2: color-mix(in srgb, var(--navy) 78%, var(--cream));
  --cream-2: color-mix(in srgb, var(--cream) 80%, var(--navy));
  --cream-3: color-mix(in srgb, var(--cream) 82%, var(--garnet));
  --line: color-mix(in srgb, var(--navy) 14%, transparent);
  --line-cream: color-mix(in srgb, var(--cream) 30%, transparent);

  /* Escala de espacio (base 4px). Nada fuera de la escala. */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --seccion: clamp(var(--s-7), 7vw, var(--s-9));
  --gutter: clamp(1.375rem, 5vw, 4.5rem);
  --caja: 68rem;

  --ease: cubic-bezier(.16, 1, .3, 1);   /* salida exponencial */
  --t-micro: .12s;
  --t-corto: .22s;
  --t-medio: .38s;

  --f-disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-text: 'Quicksand', 'Trebuchet MS', sans-serif;

  interpolate-size: allow-keywords;
  background: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

.lc > section:not(.lt-section) {
  color: var(--navy);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.65;
}

.lc ::selection { background: var(--red); color: var(--cream); }

.lc :focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.lc-hero :focus-visible,
.lc-pasos :focus-visible,
.lc-vive :focus-visible,
.lc-cta :focus-visible { outline-color: var(--cream); }

.lc a { touch-action: manipulation; }

.lc-caja {
  width: min(var(--caja), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.lc section { scroll-margin-top: 7.5rem; }

/* El documento anotado solo cabe en pantalla ancha; debajo de eso se
   ve la seccion de la pagina original. */
.lc-solo-ancho { display: none; }
@media (min-width: 75rem) {
  .lc-solo-ancho { display: block; }
  .lc .lc-solo-estrecho { display: none; }
}

/* ---------- Tipografia ----------
   El tema pone Fraunces con !important en todos los h1-h6; aqui solo
   se ajusta el eje optico al tamano real de cada titulo. */
.lc > section:not(.lt-section) :is(h1, h2, h3),
.lc .lc-cartilla__titulo {
  font-family: var(--f-disp);
  text-wrap: balance;
  margin: 0;
}

/* Titulos: los mismos que los de la pagina original (.lt-heading y
   .lt-card h3), para que no se note el salto entre un bloque nuevo y
   uno de los que vienen de alli. */
.lc .lc-h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -.018em;
  font-weight: 900;
  font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1;
}

.lc .lc-h3 {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -.008em;
  font-weight: 700;
  font-variation-settings: 'opsz' 40, 'SOFT' 100, 'WONK' 1;
}

.lc > section:not(.lt-section) p { margin: 0; text-wrap: pretty; }

.lc-intro {
  max-width: 62ch;
  color: var(--navy-2);
  font-size: 1.0625rem;
}

.lc strong { font-weight: 700; }


/* ==================================================================
   1. Portada
   ================================================================== */
.lc-hero {
  background: var(--navy);
  color: var(--cream);
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
  overflow: hidden;
}

.lc-hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s-7), 6vw, var(--s-9));
}

.lc-hero__texto { display: grid; gap: var(--s-5); }

/* La linea del DOE es la de la pagina original (.lt-eyebrow); aqui
   solo se le quita el margen, que ya lo pone la rejilla. */
.lc-hero .lt-cert__eyebrow { margin: 0 0 calc(-1 * var(--s-2)); }

.lc .lc-hero__titulo {
  font-size: clamp(2.5rem, 1.3rem + 4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--cream);
}

.lc-hero__entrada {
  max-width: 54ch;
  color: var(--cream-2);
  font-size: 1.0625rem;
}
.lc-hero__entrada strong { color: var(--cream); }

.lc-hero .lt-btn-row { margin-top: var(--s-2); flex-wrap: wrap; }

/* ---------- La cartilla ---------- */
.lc-cartilla {
  justify-self: end;
  width: min(100%, 25rem);
  background: var(--paper);
  color: var(--navy);
  border-radius: 14px;
  padding: var(--s-5);
  transform: rotate(-2.5deg);
  box-shadow:
    0 2px 3px rgba(0, 0, 0, .18),
    0 30px 60px -22px rgba(0, 0, 0, .55);
  display: grid;
  gap: var(--s-4);
}

.lc-cartilla__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 1.5px dashed color-mix(in srgb, var(--navy) 28%, transparent);
}
.lc-cartilla__marca { width: 2rem; height: 2rem; }
.lc-cartilla__curso {
  font-weight: 700;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy-2);
}

.lc .lc-cartilla__titulo {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
}

.lc-cartilla__huecos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
}
.lc-cartilla__huecos li { display: grid; justify-items: center; gap: var(--s-2); }

/* El hueco punteado donde cae cada sello. */
.lc-sello {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--navy) 30%, transparent);
}
.lc-sello img {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  transform: rotate(var(--r));
}

.lc-cartilla__n {
  font-weight: 700;
  font-size: .75rem;
  line-height: 1;
  color: var(--navy-2);
  font-variant-numeric: tabular-nums;
}

.lc-cartilla__pie {
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy-2);
}

/* El pico de la pagina. Los sellos caen uno a uno, con calma: cada
   uno tarda algo mas de medio segundo en posarse y el siguiente no
   empieza hasta que el anterior ha tocado el papel. Al caer el
   quinto, la cartilla acusa el golpe. Sin la preferencia de
   movimiento todo esta ya puesto. */
@media (prefers-reduced-motion: no-preference) {
  .lc-sello img {
    animation: lc-estampa .62s var(--ease) both;
    animation-delay: calc(.45s + var(--i) * .42s);
  }
  .lc-cartilla {
    animation: lc-golpe .4s var(--ease) both;
    animation-delay: calc(.45s + 4 * .42s + .34s);
  }
}

@keyframes lc-estampa {
  0%   { opacity: 0; transform: rotate(var(--r)) scale(1.8); filter: blur(4px); }
  55%  { opacity: 1; transform: rotate(var(--r)) scale(.93); filter: blur(0); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}

@keyframes lc-golpe {
  0%   { transform: rotate(-2.5deg) translateY(0); }
  35%  { transform: rotate(-2.2deg) translateY(3px); }
  100% { transform: rotate(-2.5deg) translateY(0); }
}


/* ==================================================================
   2. Como se consigue
   ================================================================== */
.lc-pasos {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--seccion);
}
.lc-pasos .lc-h2, .lc-pasos .lc-h3 { color: var(--cream); }
.lc-pasos .lc-intro { color: var(--cream-2); }
.lc-pasos .lc-intro strong { color: var(--cream); }

.lc-pasos__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--s-4) clamp(var(--s-6), 5vw, var(--s-8));
  align-items: start;
  margin-bottom: clamp(var(--s-6), 5vw, var(--s-7));
}

.lc-pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-5), 4vw, var(--s-7));
}

.lc-paso {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-top: var(--s-5);
  border-top: 2px solid color-mix(in srgb, var(--cream) 35%, transparent);
}
.lc-paso p { color: var(--cream-2); max-width: 34ch; }

.lc-paso__n {
  font-family: var(--f-disp);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  line-height: .8;
  font-weight: 700;
  /* Rojo sobre marino apenas se ve; el azul claro es de la marca y
     es el mismo de la linea del DOE. */
  color: var(--blue);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  margin-bottom: var(--s-2);
}


/* ==================================================================
   3. El documento, anotado (solo a partir de 75rem)

   Las notas y sus rayas van DENTRO del lienzo de la imagen, en
   posicion absoluta: asi los porcentajes son de la propia imagen y
   cada punto cae en su sitio a cualquier ancho. Medidas sobre el
   certificado:
   - Quien lo avala -> la pareja "LideraT x doe" de la cabecera (y 8 %,
     empieza en x 4,5 %): el DOE junto al profesorado de LideraT, que
     es lo que dice la nota. La raya llega por la izquierda sin tachar
     ningun logo.
   - Que acredita   -> "Por su participacion..." (y 58,5 %, empieza en
     x 7 %).
   - Para que sirve -> "en soft skills" (y 35 %, acaba en x 60,5 %).
   ================================================================== */
.lc-doc {
  background: var(--paper);
  padding-block: var(--seccion);
}

.lc .lc-doc__titulo { margin-bottom: var(--s-8); }

.lc-doc__rejilla {
  /* Sitio a los lados para las notas: 16rem de nota + 3rem de raya. */
  padding-inline: 19rem;
  padding-bottom: var(--s-6);
}

.lc-doc__papel { margin: 0; display: grid; gap: var(--s-3); }
.lc-doc__papel figcaption { font-size: .875rem; color: var(--navy-2); }

.lc-doc__lienzo { position: relative; }
.lc-doc__lienzo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(0, 48, 73, .12),
    0 24px 50px -20px rgba(0, 48, 73, .38);
}

.lc-nota {
  position: absolute;
  width: 16rem;
  display: grid;
  gap: var(--s-2);
}
.lc-nota p { color: var(--navy-2); font-size: .9375rem; line-height: 1.6; }

/* El centro del titulo de la nota cae a .75rem de su borde de arriba:
   se resta para que la raya salga justo de el. */
.lc-nota--avala    { right: calc(100% + var(--s-7)); top: calc(8% - .75rem); }
.lc-nota--acredita { right: calc(100% + var(--s-7)); top: calc(58.5% - .75rem); }
.lc-nota--sirve    { left: calc(100% + var(--s-7));  top: calc(35% - .75rem); }

.lc-guia {
  position: absolute;
  height: 1.5px;
  background: var(--red);
  pointer-events: none;
}
.lc-guia::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--paper);
}
/* Desde la nota (a 3rem del papel, menos .75rem de aire) hasta el
   punto medido. */
.lc-guia--avala    { top: 8%;    left: calc(-1 * var(--s-7) + var(--s-3)); width: calc(var(--s-7) - var(--s-3) + 4%); }
.lc-guia--acredita { top: 58.5%; left: calc(-1 * var(--s-7) + var(--s-3)); width: calc(var(--s-7) - var(--s-3) + 6%); }
.lc-guia--sirve    { top: 35%;   right: calc(-1 * var(--s-7) + var(--s-3)); width: calc(var(--s-7) - var(--s-3) + 38.5%); }
.lc-guia--avala::after, .lc-guia--acredita::after { right: -3px; }
.lc-guia--sirve::after { left: -3px; }


/* ==================================================================
   4. Asi se vive
   ================================================================== */
.lc-vive {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--seccion);
}
.lc-vive .lc-h2 { color: var(--cream); margin-bottom: var(--s-3); }
.lc-vive .lc-intro { color: var(--cream-2); }

.lc-vive__mosaico {
  margin-top: clamp(var(--s-5), 4vw, var(--s-7));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

.lc-vive__foto {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--navy) 80%, var(--cream));
}
.lc-vive__foto.lc-vive__foto--grande { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

.lc-vive__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-vive__dato {
  margin-top: var(--s-6);
  max-width: 40ch;
  font-family: var(--f-disp);
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem);
  line-height: 1.3;
  font-weight: 500;
  font-variation-settings: 'opsz' 36, 'SOFT' 100, 'WONK' 1;
  color: var(--cream-2);
}
.lc-vive__dato strong { color: var(--cream); font-weight: 700; }


/* ==================================================================
   5. Preguntas
   ================================================================== */
.lc-faq { padding-block: var(--seccion); }

.lc-faq__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s-6) clamp(var(--s-6), 6vw, var(--s-9));
  align-items: start;
}
.lc-faq__titulo { position: sticky; top: 6rem; }

.lc-faq__lista { border-top: 1.5px solid var(--navy); }
.lc-faq details { border-bottom: 1px solid var(--line); }

.lc-faq summary {
  text-wrap: balance;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
  font-family: var(--f-disp);
  font-size: 1.1875rem;
  line-height: 1.25;
  font-weight: 700;
  font-variation-settings: 'opsz' 40, 'SOFT' 100, 'WONK' 1;
  transition: color var(--t-corto) var(--ease);
}
.lc-faq summary::-webkit-details-marker { display: none; }
.lc-faq summary:hover { color: var(--red); }

/* El signo mas, dibujado con dos rayas: se convierte en un aspa. */
.lc-faq summary::after {
  content: '';
  flex: none;
  width: .875rem;
  height: .875rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform var(--t-medio) var(--ease);
}
.lc-faq details[open] summary::after { transform: rotate(45deg); }

.lc-faq details p {
  padding-bottom: var(--s-4);
  max-width: 60ch;
  color: var(--navy-2);
}

/* Abrir con suavidad donde el navegador lo sabe hacer; donde no, se
   abre de golpe, que es lo de siempre. */
.lc-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--t-medio) var(--ease),
              content-visibility var(--t-medio) allow-discrete;
}
.lc-faq details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .lc-faq summary::after,
  .lc-faq details::details-content { transition: none; }
}

#wrap.lc .lc-faq a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1.5px;
  transition: color var(--t-micro) var(--ease);
}
#wrap.lc .lc-faq a:hover { color: var(--garnet); }


/* ==================================================================
   6. La primera sesion (congelada: se queda tal cual la v4)
   ================================================================== */
.lc-cta {
  background: var(--garnet);
  color: var(--cream);
  padding-block: var(--seccion);
}

.lc-cta__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: 'texto agenda' 'acciones agenda';
  column-gap: clamp(var(--s-7), 6vw, var(--s-9));
  row-gap: var(--s-6);
  align-items: start;
}
.lc-cta__texto { grid-area: texto; align-self: end; }
.lc-cta__agenda { grid-area: agenda; align-self: center; }
.lc-cta__acciones {
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}
#wrap.lc .lc-cta__equipo {
  color: var(--cream);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--cream) 50%, transparent);
  transition: text-decoration-color var(--t-micro) var(--ease);
}
#wrap.lc .lc-cta__equipo:hover { text-decoration-color: var(--cream); }

.lc-cta__texto { display: grid; gap: var(--s-5); }
.lc-cta .lc-h2 { color: var(--cream); }
.lc-cta__texto p { color: var(--cream-3); max-width: 46ch; }

.lc-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-cream);
}
.lc-agenda li { border-bottom: 1px solid var(--line-cream); }

#wrap.lc .lc-agenda__fila {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-3);
  margin-inline: calc(-1 * var(--s-3));
  border-radius: 8px;
  color: var(--cream);
  text-decoration: none;
  transition: background-color var(--t-corto) var(--ease);
}
#wrap.lc .lc-agenda__fila:hover,
#wrap.lc .lc-agenda__fila:active,
#wrap.lc .lc-agenda__fila:focus-visible {
  background: color-mix(in srgb, var(--cream) 8%, transparent);
}
#wrap.lc .lc-agenda__fila:hover .lc-agenda__nombre,
#wrap.lc .lc-agenda__fila:focus-visible .lc-agenda__nombre {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
}

.lc-agenda__fecha {
  display: grid;
  justify-items: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lc-agenda__dia {
  font-family: var(--f-disp);
  font-size: 2.5rem;
  font-weight: 700;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
}
.lc-agenda__mes {
  margin-top: var(--s-1);
  font-size: .875rem;
  font-weight: 700;
  color: var(--cream-3);
}

.lc-agenda__que { display: grid; gap: var(--s-1); min-width: 0; }
.lc-agenda__nombre {
  font-family: var(--f-disp);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 600;
  font-variation-settings: 'opsz' 36, 'SOFT' 100, 'WONK' 1;
  overflow-wrap: anywhere;
}
.lc-agenda__hora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-size: .9375rem;
  color: var(--cream-3);
}
.lc-agenda__hora > span:first-child::first-letter { text-transform: uppercase; }

.lc-agenda__chip {
  padding: .125rem var(--s-3);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cream) 45%, transparent);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--cream);
}

/* El final de la pagina repite el gesto del principio: cada sesion
   trae su hueco, y al pasar por ella cae el sello. Solo donde hay
   raton; en una pantalla tactil un hueco que nunca se llena no dice
   nada, asi que no se pinta. */
.lc-agenda__hueco { display: none; }

@media (hover: hover) {
  .lc-agenda__hueco {
    position: relative;
    display: block;
    width: 2.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--cream) 50%, transparent);
  }
  .lc-agenda__hueco img {
    position: absolute;
    inset: -7%;
    width: 114%;
    height: 114%;
    opacity: 0;
    transform: rotate(-8deg) scale(1.7);
    filter: blur(3px);
    transition: opacity var(--t-corto) var(--ease),
                transform var(--t-medio) var(--ease),
                filter var(--t-corto) var(--ease);
  }
  #wrap.lc .lc-agenda__fila:hover .lc-agenda__hueco img,
  #wrap.lc .lc-agenda__fila:focus-visible .lc-agenda__hueco img {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
    filter: blur(0);
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .lc-agenda__hueco img { transform: rotate(-8deg); filter: none; transition: opacity var(--t-micro) linear; }
}

.lc-agenda__vacia {
  color: var(--cream-3);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line-cream);
}

/* Tamanos de la v4 fijados aqui para que el recorte general de la v5
   no toque esta seccion. */
.lc > section.lc-cta { font-size: 1.0625rem; padding-block: clamp(4rem, 9vw, 8rem); }
.lc .lc-cta .lc-h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 600;
}

/* ==================================================================
   Tablet y movil
   ================================================================== */
@media (max-width: 61.99rem) {
  .lc-hero__rejilla { grid-template-columns: minmax(0, 1fr); }
  .lc-cartilla { justify-self: start; }

  .lc-pasos__cabeza { grid-template-columns: minmax(0, 1fr); }

  .lc-faq__rejilla { grid-template-columns: minmax(0, 1fr); }
  .lc-faq__titulo { position: static; }
  .lc-cta__rejilla {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'texto' 'agenda' 'acciones';
  }
}

@media (max-width: 47.99rem) {
  /* Pasos en fila: numero a la izquierda, texto a la derecha. Ocupan
     la mitad que apilados. */
  .lc-pasos__lista { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .lc-paso {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: var(--s-4);
    row-gap: var(--s-1);
    padding-top: var(--s-4);
  }
  .lc-paso__n { grid-row: 1 / span 2; font-size: 2.75rem; margin: 0; }

  /* Las tarjetas de las dos secciones originales, en una fila que se
     desliza con el dedo, dejando ver el borde de la siguiente. Son
     las mismas tarjetas: solo cambia como se colocan. La fila sale a
     sangre para que la tarjeta asome desde el borde de la pantalla. */
  .lc .lt-section .lt-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: var(--s-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--s-1) var(--gutter) var(--s-5);
    scrollbar-width: none;
  }
  .lc .lt-section .lt-cards::-webkit-scrollbar { display: none; }
  .lc .lt-section .lt-card { scroll-snap-align: start; }
  .lc .lt-section .lt-subheading { margin-bottom: var(--s-5); }

  .lc-vive__mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lc-hero .lt-btn-row { flex-direction: column; align-items: stretch; }
  .lc-cta__acciones { flex-direction: column; align-items: stretch; text-align: center; }

  /* La cartilla justo debajo del titulo, para que el sellado se vea
     sin bajar. */
  .lc-hero { padding-top: var(--s-6); }
  .lc-hero__rejilla { gap: var(--s-5); }
  .lc-hero__texto { display: contents; }
  .lc-hero .lt-cert__eyebrow { order: 0; margin: 0; }
  .lc .lc-hero__titulo { order: 1; }
  .lc-cartilla { order: 2; justify-self: stretch; width: auto; padding: var(--s-4); transform: rotate(-1.5deg); }
  .lc-hero__entrada { order: 3; font-size: 1rem; }
  .lc-hero .lt-btn-row { order: 4; }

  @keyframes lc-golpe {
    0%   { transform: rotate(-1.5deg) translateY(0); }
    35%  { transform: rotate(-1.2deg) translateY(3px); }
    100% { transform: rotate(-1.5deg) translateY(0); }
  }
}


/* ==================================================================
   EXPERIMENTO: la cartilla que te acompana (/certificado-lab-cartilla)

   Mini cartilla fija que se sella un hueco por bloque leido. En
   ordenador, tarjeta en la esquina de abajo a la derecha; en movil,
   barra fina abajo del todo, con el margen del gesto de inicio.
   ================================================================== */
#wrap.lc .lc-acompana {
  position: fixed;
  z-index: 1020;              /* por debajo del aviso de cookies */
  right: var(--s-5);
  bottom: var(--s-5);
  width: 15rem;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--paper);
  color: var(--navy);
  text-decoration: none;
  border-radius: 12px;
  box-shadow:
    0 2px 4px rgba(0, 48, 73, .12),
    0 18px 40px -14px rgba(0, 48, 73, .35);
  /* Escondida: baja y se apaga. Visible: sube a su sitio. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) rotate(-1.5deg);
  transition: opacity var(--t-medio) var(--ease),
              transform var(--t-medio) var(--ease),
              visibility 0s linear var(--t-medio);
}
#wrap.lc .lc-acompana.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-1.5deg);
  transition: opacity var(--t-medio) var(--ease),
              transform var(--t-medio) var(--ease),
              visibility 0s;
}
#wrap.lc .lc-acompana:hover { box-shadow: 0 2px 4px rgba(0, 48, 73, .14), 0 22px 44px -14px rgba(0, 48, 73, .45); }

.lc-acompana__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.lc-acompana__titulo {
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1rem;
  font-variation-settings: 'opsz' 40, 'SOFT' 100, 'WONK' 1;
}
.lc-acompana__cuenta {
  font-size: .8125rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--navy-2);
  font-variant-numeric: tabular-nums;
}

.lc-acompana__huecos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-2);
}
.lc-acompana__hueco {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--navy) 30%, transparent);
}
.lc-acompana__hueco img {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  opacity: 0;
  transform: rotate(var(--r));
}
.lc-acompana__hueco.is-sellado img { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .lc-acompana__hueco.is-sellado img { animation: lc-estampa .55s var(--ease) both; }
  #wrap.lc .lc-acompana.is-completa { animation: lc-entrega .6s var(--ease) both; }
}

/* Completa: la cartilla se "entrega" (salta un poco y se endereza) y
   la cuenta se vuelve el aviso de que ahora toca de verdad. */
@keyframes lc-entrega {
  0%   { transform: translateY(0) rotate(-1.5deg) scale(1); }
  40%  { transform: translateY(-6px) rotate(0deg) scale(1.04); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
#wrap.lc .lc-acompana.is-completa { transform: translateY(0) rotate(0deg); }
.lc-acompana.is-completa .lc-acompana__cuenta { color: var(--red); }

/* La linea de "ahora, de verdad" solo con la cartilla completa. */
.lc-acompana__pie {
  display: none;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--red);
}
.lc-acompana.is-completa .lc-acompana__pie { display: block; }

/* Entregada: se queda en un sello redondo en la esquina. */
.lc-acompana__sello { display: none; }
#wrap.lc .lc-acompana.is-entregada {
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border-radius: 50%;
  place-items: center;
  animation: none;
}
.lc-acompana.is-entregada > :not(.lc-acompana__sello) { display: none; }
.lc-acompana.is-entregada .lc-acompana__sello { display: block; width: 3.5rem; height: 3.5rem; }
.lc-acompana.is-entregada .lc-acompana__sello img { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .lc-acompana.is-entregada .lc-acompana__sello img { animation: lc-estampa .5s var(--ease) both; }
}

/* Movil: una barra abajo, a lo ancho, que no tapa el contenido. */
@media (max-width: 47.99rem) {
  #wrap.lc .lc-acompana {
    left: var(--s-3);
    right: var(--s-3);
    bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-4);
    padding: var(--s-2) var(--s-4);
    transform: translateY(1rem);
  }
  #wrap.lc .lc-acompana.is-visible,
  #wrap.lc .lc-acompana.is-completa { transform: translateY(0); }
  .lc-acompana__huecos { grid-column: 1; grid-row: 1; grid-template-columns: repeat(5, 1.75rem); }
  .lc-acompana__cuenta { grid-column: 2; grid-row: 1; }
  #wrap.lc .lc-acompana.is-entregada { left: auto; right: var(--s-4); display: grid; }

  @keyframes lc-entrega {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-4px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
  }

  /* Que la barra no tape el final de la pagina. */
  .lc-faq { padding-bottom: calc(var(--seccion) + 4rem); }
}


/* ==================================================================
   EXPERIMENTO: la pagina se revela al bajar (/certificado-lab-scroll)

   Animaciones ligadas al desplazamiento, solo CSS (animation-timeline).
   Donde el navegador no las sabe hacer (Firefox) o la persona pide
   menos movimiento, no se aplica nada y la pagina se ve tal cual.

   Lo que se mueve, y nada mas:
   - el diploma se imprime de arriba abajo y luego se dibujan las
     rayas hasta su punto y aparecen las notas;
   - en los pasos, la linea de arriba se traza y el numero se rellena;
   - las fotos se destapan;
   - las tarjetas suben al asomar.
   ================================================================== */

/* El numero que cuenta: el lector de pantalla lee siempre el de
   verdad; el que se ve es un contador que solo existe donde hay
   animacion por desplazamiento. */
.lc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@property --lc-n {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

/* Atado al desplazamiento: solo en pantallas de ordenador. En movil el
   dedo desplaza a golpes y va el modo "al entrar" de mas abajo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {

    /* ---- El diploma ---- */
    .lc-doc__lienzo { view-timeline-name: --papel; }

    .lc-doc__lienzo img {
      animation: lc-imprime linear both;
      animation-timeline: --papel;
      animation-range: entry 25% cover 45%;
    }
    @keyframes lc-imprime {
      /* Los lados ya abiertos, para que la sombra no se corte. */
      from { clip-path: inset(0 -30% 100% -30%); }
      to   { clip-path: inset(-30% -30% -30% -30%); }
    }

    .lc-guia--avala, .lc-guia--acredita {
      animation: lc-raya-der linear both;
      animation-timeline: --papel;
      animation-range: cover 42% cover 54%;
    }
    .lc-guia--sirve {
      animation: lc-raya-izq linear both;
      animation-timeline: --papel;
      animation-range: cover 42% cover 54%;
    }
    /* Nace en el lado de la nota y avanza hasta el punto. */
    @keyframes lc-raya-der {
      from { clip-path: inset(-6px 100% -6px -6px); }
      to   { clip-path: inset(-6px -6px -6px -6px); }
    }
    @keyframes lc-raya-izq {
      from { clip-path: inset(-6px -6px -6px 100%); }
      to   { clip-path: inset(-6px -6px -6px -6px); }
    }

    .lc-nota {
      animation: lc-nota linear both;
      animation-timeline: --papel;
      animation-range: cover 38% cover 50%;
    }
    .lc-nota--avala, .lc-nota--acredita { --desde: -1rem; }
    .lc-nota--sirve { --desde: 1rem; }
    @keyframes lc-nota {
      from { opacity: 0; translate: var(--desde) 0; }
      to   { opacity: 1; translate: 0 0; }
    }

    /* ---- Los pasos ---- */
    .lc-paso {
      position: relative;
      view-timeline-name: --paso;
      border-top-color: transparent;
    }
    .lc-paso::before {
      content: '';
      position: absolute;
      top: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: color-mix(in srgb, var(--cream) 35%, transparent);
      transform-origin: left center;
      animation: lc-traza linear both;
      animation-timeline: --paso;
      animation-range: entry 10% entry 90%;
    }
    @keyframes lc-traza {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    .lc-paso__n {
      -webkit-text-stroke: 1.5px var(--blue);
      animation: lc-rellena linear both;
      animation-timeline: --paso;
      animation-range: entry 60% cover 40%;
    }
    @keyframes lc-rellena {
      from { color: transparent; }
      to   { color: var(--blue); }
    }

    /* ---- Las fotos ---- */
    /* La linea de tiempo va en el marco y no en la foto: el marco
       lleva overflow:hidden, y eso lo convierte en el "contenedor de
       desplazamiento" mas cercano de la foto. Con view() en la foto,
       el navegador miraria un marco que nunca se desplaza y la
       animacion no arrancaria. */
    .lc-vive__foto { view-timeline-name: --foto; }
    .lc-vive__foto img {
      animation: lc-destapa linear both;
      animation-timeline: --foto;
      animation-range: entry 0% cover 35%;
    }
    .lc-vive__foto:nth-child(3) img { animation-range: entry 8% cover 40%; }
    .lc-vive__foto:nth-child(4) img { animation-range: entry 16% cover 45%; }
    .lc-vive__foto:nth-child(5) img { animation-range: entry 24% cover 50%; }
    @keyframes lc-destapa {
      from { clip-path: inset(14% 14% 14% 14% round 6px); scale: 1.12; }
      to   { clip-path: inset(0 0 0 0 round 6px); scale: 1; }
    }

    /* ---- Las tarjetas, solo en pantallas con rejilla ---- */
    @media (min-width: 48rem) {
      .lc .lt-section .lt-card {
        animation: lc-sube linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
      }
      @keyframes lc-sube {
        from { opacity: 0; translate: 0 1.5rem; }
        to   { opacity: 1; translate: 0 0; }
      }
    }
  }
}


/* ==================================================================
   Modo "al entrar" (movil y navegadores sin animation-timeline).
   Lo activa cert_lab_scroll.js poniendo .lc-revela-js; sin JS, la
   pagina se ve tal cual. Cada cosa se anima una vez, con su tiempo.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .lc-revela-js .lc-paso { position: relative; border-top-color: transparent; }
  .lc-revela-js .lc-paso::before {
    content: '';
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 2px;
    background: color-mix(in srgb, var(--cream) 35%, transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s var(--ease);
  }
  .lc-revela-js .lc-paso.is-dentro::before { transform: scaleX(1); }
  .lc-revela-js .lc-paso__n {
    -webkit-text-stroke: 1.5px var(--blue);
    color: transparent;
    transition: color .6s var(--ease) .35s;
  }
  .lc-revela-js .lc-paso.is-dentro .lc-paso__n { color: var(--blue); }

  .lc-revela-js .lc-vive__foto img {
    clip-path: inset(14% 14% 14% 14% round 6px);
    scale: 1.12;
    transition: clip-path .9s var(--ease), scale .9s var(--ease);
  }
  .lc-revela-js .lc-vive__foto.is-dentro img { clip-path: inset(0 0 0 0 round 6px); scale: 1; }
  .lc-revela-js .lc-vive__foto:nth-child(3) img { transition-delay: .1s; }
  .lc-revela-js .lc-vive__foto:nth-child(4) img { transition-delay: .2s; }
  .lc-revela-js .lc-vive__foto:nth-child(5) img { transition-delay: .3s; }

  .lc-revela-js .lt-section .lt-card {
    opacity: 0;
    translate: 0 1rem;
    transition: opacity .6s var(--ease), translate .6s var(--ease);
  }
  .lc-revela-js .lt-section .lt-card.is-dentro { opacity: 1; translate: 0 0; }

  }
}