/* ==================================================================
   LideraT - Empresas (laboratorio) /companies-lab

   Solo se siguen la letra (Fraunces + Quicksand) y los colores de la
   marca; el resto es propio de esta pagina:
   - portada con la sala llena de verdad, tenida de marino;
   - las sesiones como paneles de foto que se abren y llevan al
     formulario con el formato ya elegido;
   - las empresas como un pasaporte de sellos, como los del certificado;
   - el montador de propuestas al final.
   ================================================================== */

.le {
  --navy: #003049;
  --red: #C1121F;
  --garnet: #780000;
  --blue: #669BBC;
  --cream: #fbf0d8;
  --paper: #fffaf0;
  --white: #ffffff;

  --navy-2: color-mix(in srgb, var(--navy) 78%, var(--cream));
  --cream-2: color-mix(in srgb, var(--cream) 82%, var(--navy));
  --cream-3: color-mix(in srgb, var(--cream) 84%, var(--garnet));
  --line: color-mix(in srgb, var(--navy) 14%, transparent);
  --line-cream: color-mix(in srgb, var(--cream) 26%, transparent);

  --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: 72rem;
  --ease: cubic-bezier(.16, 1, .3, 1);

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

  background: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

.le > section {
  color: var(--navy);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.65;
  scroll-margin-top: 7.5rem;
}
.le ::selection { background: var(--red); color: var(--cream); }
.le :focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.le-hero :focus-visible, .le-montar :focus-visible, .le-pasaporte :focus-visible { outline-color: var(--cream); }
.le a { touch-action: manipulation; }
.le-caja { width: min(var(--caja), 100% - 2 * var(--gutter)); margin-inline: auto; }

.le > section :is(h1, h2, h3) { margin: 0; text-wrap: balance; font-family: var(--f-disp); }
.le > section p { margin: 0; text-wrap: pretty; }

.le .le-h2 {
  /* Algo mayores que los del resto de la web (42 px), sin saltos. */
  font-size: clamp(1.875rem, 1.1rem + 2.3vw, 3rem);
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
}


/* ==================================================================
   1. Portada: la sala llena
   ================================================================== */
.le-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  gap: var(--s-6);
  padding-block: clamp(var(--s-8), 8vw, 7rem) var(--s-6);
  background: var(--navy);
  color: var(--cream);
  overflow: hidden;
}
/* La foto, a sangre y tenida de marino: la sala sin que compita con
   el titular. */
.le-hero__foto { position: absolute; inset: 0; z-index: -1; }
.le-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(1) contrast(1.15) brightness(.9);
  mix-blend-mode: luminosity;
  opacity: .55;
}
.le-hero__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--navy) 55%, transparent) 0%, var(--navy) 92%),
    linear-gradient(90deg, var(--navy) 0%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .le-hero__foto img { animation: le-acerca 18s var(--ease) both; }
}
@keyframes le-acerca { from { scale: 1.08; } to { scale: 1; } }

.le-hero__dentro { display: grid; gap: var(--s-5); }
.le .le-hero__titulo {
  max-width: 18ch;
  /* Como la intro del resto de la web (70-72 px), solo un poco mayor. */
  font-size: clamp(2.75rem, 1.5rem + 3.6vw, 5rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--cream);
}
/* El tema pone Quicksand en todos los span: aqui manda el titular. */
.le .le-hero__titulo span { display: block; color: var(--blue); font-family: inherit; font-weight: inherit; font-variation-settings: inherit; }
.le-hero__entrada { max-width: 46ch; color: var(--cream-2); font-size: 1.125rem; }
.le-hero .lt-btn-row { flex-wrap: wrap; }
.le-hero__pie { font-size: .8125rem; color: color-mix(in srgb, var(--cream) 60%, var(--navy)); }

/* Proximamente: entradas de papel con muesca */
.le-entradas { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line-cream); }
.le-entradas__titulo { font-weight: 700; font-size: .875rem; color: var(--blue); }
.le-entradas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); }
#wrap.le .le-entrada {
  --muesca: radial-gradient(circle at 4.25rem 0, transparent .45rem, #000 .5rem) top / 100% 51% no-repeat,
            radial-gradient(circle at 4.25rem 100%, transparent .45rem, #000 .5rem) bottom / 100% 51% no-repeat;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  min-width: 16rem;
  max-width: 24rem;
  background: var(--cream);
  color: var(--navy);
  text-decoration: none;
  border-radius: 10px;
  -webkit-mask: var(--muesca);
          mask: var(--muesca);
  transition: transform .3s var(--ease);
}
#wrap.le .le-entrada:hover { transform: translateY(-3px); }
.le-entrada__fecha {
  display: grid;
  justify-items: center;
  padding: var(--s-3) 0;
  border-right: 2px dashed color-mix(in srgb, var(--navy) 25%, transparent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.le-entrada__dia { font-family: var(--f-disp); font-size: 1.75rem; font-weight: 900; color: var(--red); }
.le-entrada__mes { margin-top: 2px; font-size: .75rem; font-weight: 700; }
.le-entrada__nombre {
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-disp);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  font-variation-settings: 'opsz' 36, 'SOFT' 100, 'WONK' 1;
}


/* ==================================================================
   2. Asi son las sesiones: paneles que se abren
   ================================================================== */
.le-sesiones { padding-block: var(--seccion); }
#wrap.le .le-sesiones .le-h2 { margin-bottom: clamp(var(--s-6), 4vw, var(--s-7)); }
.le-paneles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-3);
  height: clamp(26rem, 42vw, 34rem);
}
.le-panel { flex: 1 1 0; min-width: 0; transition: flex-grow .6s var(--ease); }
.le-panel:hover, .le-panel:focus-within { flex-grow: 2.6; }
#wrap.le .le-panel__enlace {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  color: var(--cream);
  text-decoration: none;
  background: var(--navy);
}
.le-panel__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .8s var(--ease), filter .6s var(--ease);
  filter: saturate(.85);
}
.le-panel:hover .le-panel__foto { scale: 1.05; filter: saturate(1); }
#wrap.le .le-panel__enlace::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--navy) 92%, transparent) 88%);
}
.le-panel__cuerpo {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
}
.le-panel__ico {
  width: 2.5rem;
  height: 2.5rem;
  padding: .5rem;
  border-radius: 50%;
  background: var(--red);
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.le-panel__nombre {
  font-family: var(--f-disp);
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  line-height: 1.05;
  font-weight: 900;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
}
/* El texto y la accion solo en el panel abierto. */
.le-panel__texto, .le-panel__accion {
  max-width: 34ch;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .4s var(--ease), max-height .6s var(--ease);
}
.le-panel__accion { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.le-panel:hover :is(.le-panel__texto, .le-panel__accion),
.le-panel:focus-within :is(.le-panel__texto, .le-panel__accion) { opacity: 1; max-height: 8rem; }


/* ==================================================================
   3. Quien os va a escuchar
   ================================================================== */
.le-quien { padding-block: 0 var(--seccion); }
.le-quien__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-5), 3vw, var(--s-7));
  align-items: start;
}
.le .le-quien__titulo { font-size: clamp(1.875rem, 1rem + 1.8vw, 2.625rem); }
.le-quien__cosa { display: grid; gap: var(--s-3); align-content: start; }
.le-quien__ico {
  width: 3rem;
  height: 3rem;
  padding: .7rem;
  border-radius: 50%;
  background: var(--navy);
  fill: none;
  stroke: var(--cream);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.le .le-quien__cosa h3 {
  font-size: 1.375rem;
  line-height: 1.12;
  font-weight: 900;
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
}
.le-quien__cosa p { color: var(--navy-2); }
#wrap.le .le-quien__cosa a { color: var(--red); text-decoration: underline; text-underline-offset: .2em; }


/* ==================================================================
   4. Han pasado por aqui: el pasaporte de sellos
   ================================================================== */
.le-pasaporte {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--seccion);
  /* Guilloche suave de fondo, como en un pasaporte. */
  background-image:
    repeating-radial-gradient(circle at 20% 30%, transparent 0 22px, color-mix(in srgb, var(--cream) 4%, transparent) 22px 23px),
    repeating-radial-gradient(circle at 85% 70%, transparent 0 30px, color-mix(in srgb, var(--blue) 5%, transparent) 30px 31px);
}
#wrap.le .le-pasaporte__titulo { color: var(--cream); margin-bottom: clamp(var(--s-6), 4vw, var(--s-8)); }

.le-sellos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(var(--s-3), 2vw, var(--s-6)) clamp(var(--s-3), 2vw, var(--s-5));
}
.le-sello {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  rotate: var(--g);
  transition: rotate .5s var(--ease), scale .5s var(--ease);
}
/* Cada fila un poco descolocada, como sellos de verdad. */
.le-sello:nth-child(odd) { translate: 0 .6rem; }
.le-sello:hover { rotate: 0deg; scale: 1.06; }
.le-sello__anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.le-sello__borde { fill: var(--paper); stroke: var(--cream); stroke-width: 3; }
.le-sello__raya { fill: none; stroke: color-mix(in srgb, var(--navy) 22%, transparent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.le-sello__texto {
  font-family: var(--f-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: var(--navy);
}
.le-sello__logo {
  position: relative;
  width: 46%;
  height: 34%;
  object-fit: contain;
  scale: var(--z, 1);
  filter: grayscale(1) contrast(1.1);
  transition: filter .4s var(--ease);
}
.le-sello:hover .le-sello__logo { filter: none; }
.le-sello--oscuro .le-sello__logo,
.le-sello--oscuro:hover .le-sello__logo { filter: grayscale(1) invert(1) brightness(1.25) contrast(1.6); mix-blend-mode: multiply; }

/* El patrocinador: el primero, con aro rojo. */
.le-sello--patro .le-sello__borde { fill: var(--cream); stroke: var(--red); stroke-width: 5; }
.le-sello--patro .le-sello__texto { fill: var(--garnet); font-size: 14px; }
.le-sello--patro .le-sello__logo { filter: none; }

/* El vacio: punteado, y lleva al formulario. */
.le-sello--vacio .le-sello__borde { fill: transparent; stroke: var(--cream); stroke-width: 2.5; stroke-dasharray: 6 7; }
.le-sello--vacio .le-sello__texto { fill: var(--cream); }
#wrap.le .le-sello__vacio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream); text-decoration: none; }
.le-sello__pregunta {
  position: relative;
  font-family: var(--f-disp);
  font-weight: 900;
  font-size: clamp(1rem, .6rem + 1vw, 1.375rem);
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
}
.le-sello--vacio:hover .le-sello__borde { stroke: var(--blue); }


/* ==================================================================
   5. Montemos algo: el montador
   ================================================================== */
.le-montar {
  background: var(--garnet);
  color: var(--cream);
  padding-block: clamp(var(--s-8), 9vw, var(--s-10));
}
.le .le-montar__titulo {
  font-size: clamp(2.25rem, 1rem + 3.4vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--cream);
}
#wrap.le .le-montar__titulo { margin-bottom: clamp(var(--s-6), 5vw, var(--s-8)); }

.le-form__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}
.le-form__pasos { display: grid; gap: clamp(var(--s-6), 4vw, var(--s-7)); }

.le-paso { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s-4); }
.le-paso__titulo {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--f-disp);
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 900;
  color: var(--cream);
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
}
.le-paso__titulo b { font-size: 1.75rem; color: var(--blue); font-weight: 900; }

/* Radios escondidos pero enfocables: la etiqueta es el control. */
.le-montar input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Conmutador empresa / organizacion */
.le-conmutador {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--s-1);
  justify-self: start;
  padding: var(--s-1);
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 35%, var(--garnet));
}
.le-conmutador__op { position: relative; cursor: pointer; }
.le-conmutador__op span {
  display: block;
  padding: var(--s-2) var(--s-5);
  border-radius: 999px;
  font-weight: 700;
  color: var(--cream-3);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.le-conmutador__op input:checked + span { background: var(--cream); color: var(--navy); }
.le-conmutador__op input:focus-visible + span { outline: 3px solid var(--cream); outline-offset: 2px; }

/* Los cuatro formatos, como fichas que se eligen */
.le-formatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.le-formato { position: relative; cursor: pointer; display: grid; }
.le-formato__cara {
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-5);
  border-radius: 14px;
  background: var(--cream);
  color: var(--navy);
  box-shadow: inset 0 0 0 2px transparent;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.le-formato:hover .le-formato__cara { background: var(--white); }
.le-formato input:checked + .le-formato__cara { background: var(--white); box-shadow: inset 0 0 0 3px var(--red); }
/* La marca de elegido: el sello de la T en la esquina, como en el
   certificado. Hueco punteado hasta que se elige. */
.le-formato__cara::after {
  content: '';
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--navy) 30%, transparent);
  background: url('/theme_liderat/static/src/img/marca.png') center / 0 no-repeat;
  transition: background-size .35s var(--ease), border-color .2s var(--ease);
}
.le-formato input:checked + .le-formato__cara::after { background-size: 114%; border-color: transparent; }
.le-formato input:focus-visible + .le-formato__cara { outline: 3px solid var(--cream); outline-offset: 3px; }

.le-formato__ico { width: 1.875rem; height: 1.875rem; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.le-formato__nombre {
  font-family: var(--f-disp);
  font-size: 1.375rem;
  line-height: 1.15;
  font-weight: 900;
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
}
.le-formato__texto { font-size: .9375rem; line-height: 1.55; color: var(--navy-2); }

/* Chips de "que buscais" y "para cuando" */
.le-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.le-chip { position: relative; cursor: pointer; }
.le-chip span {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--cream) 45%, transparent);
  color: var(--cream);
  font-weight: 700;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.le-chip:hover span { border-color: var(--cream); }
.le-chip input:checked + span { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.le-chip input:focus-visible + span { outline: 3px solid var(--cream); outline-offset: 2px; }
.le-chip--suelto { justify-self: start; }

/* Campos */
.le-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.le-campo { display: grid; gap: var(--s-2); }
.le-campo .s_website_form_label { font-weight: 700; font-size: .9375rem; color: var(--cream); }
.le-campo .s_website_form_mark { color: var(--cream-3); }
.le .le-campo .form-control {
  min-height: 3rem;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--f-text);
  font-size: 1rem;
  box-shadow: none;
}
.le .le-campo .form-control:focus { border-color: var(--navy); background: var(--white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 60%, transparent); }
.le .le-campo .form-control.is-invalid { border-color: var(--red); background: var(--white); }

/* La hoja de la propuesta: papel que se queda a la vista */
.le-hoja { position: sticky; top: 7rem; }
.le-hoja__papel {
  display: grid;
  gap: var(--s-4);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  background: var(--paper);
  color: var(--navy);
  border-radius: 16px;
  transform: rotate(-1deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 30px 60px -28px rgba(0, 0, 0, .6);
}
.le-hoja__titulo { font-weight: 700; font-size: .875rem; color: var(--red); }
.le-hoja__frase {
  font-family: var(--f-disp);
  font-size: clamp(1.375rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--navy-2);
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  min-height: 5.5em;
}
.le-hoja__frase.is-escrita { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .le-hoja__frase.is-nueva { animation: le-tinta .5s var(--ease); }
}
@keyframes le-tinta {
  from { opacity: .35; filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); }
}
.le-hoja .le-campo .s_website_form_label { color: var(--navy); font-size: .875rem; }
.le-hoja .le-campo .s_website_form_mark { color: var(--red); }
.le .le-hoja .le-campo .form-control { background: var(--white); border-color: var(--line); min-height: 7.5rem; resize: vertical; }
.le-hoja__nota { font-size: .8125rem; color: var(--navy-2); }

#wrap.le .le-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4) var(--s-6);
  border-radius: 999px;
  background: var(--red);
  color: var(--cream);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s var(--ease);
}
#wrap.le .le-enviar:hover { background: var(--garnet); }
.le-enviar svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
#wrap.le .le-enviar:hover svg { transform: translateX(4px); }
.le-hoja__enviar #s_website_form_result { display: block; margin-top: var(--s-2); font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .le *, .le *::before, .le *::after { transition: none !important; animation: none !important; }
}


/* ==================================================================
   Tablet y movil
   ================================================================== */
@media (max-width: 74.99rem) {
  .le-quien__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .le-quien__titulo { grid-column: 1 / -1; }
}

@media (max-width: 61.99rem) {
  .le-form__rejilla { grid-template-columns: minmax(0, 1fr); }
  .le-hoja { position: static; }
  .le-hoja__papel { transform: none; }
  .le-sellos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Sin raton, los paneles no se abren al pasar: van en columna y
     con el texto a la vista. */
  .le-paneles { flex-direction: column; height: auto; }
  .le-panel, .le-panel:hover, .le-panel:focus-within { flex: none; }
  #wrap.le .le-panel__enlace { height: 22rem; }
  .le-panel__texto, .le-panel__accion { opacity: 1; max-height: none; }
}

@media (max-width: 47.99rem) {
  .le-hero { padding-top: var(--s-8); }
  .le .le-hero__titulo { font-size: clamp(2.75rem, 11vw, 3.5rem); }
  .le-hero .lt-btn-row { flex-direction: column; align-items: stretch; }
  .le-entradas__lista { flex-direction: column; }
  #wrap.le .le-entrada { min-width: 0; max-width: none; }

  #wrap.le .le-panel__enlace { height: 19rem; }
  .le-quien__rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }

  .le-sellos { gap: var(--s-3) var(--s-2); }
  .le-sello__texto { font-size: 17px; }

  .le-conmutador { display: grid; grid-auto-flow: row; border-radius: 16px; justify-self: stretch; }
  .le-conmutador__op span { border-radius: 12px; text-align: center; }
  .le-formatos { grid-template-columns: minmax(0, 1fr); }
  .le-formato__cara { padding: var(--s-4) var(--s-5); }
  .le-campos { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   Movil de verdad: repensado para el dedo, no encogido.
   ================================================================== */

/* Tableta y movil: los paneles de sesiones, en fila deslizable. */
@media (max-width: 61.99rem) {
  .le-paneles {
    flex-direction: row;
    height: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--s-2);
    scrollbar-width: none;
  }
  .le-paneles::-webkit-scrollbar { display: none; }
  .le-panel, .le-panel:hover, .le-panel:focus-within { flex: 0 0 min(78%, 22rem); scroll-snap-align: start; }
  #wrap.le .le-panel__enlace { height: 26rem; }
  /* Sellos: tira deslizable de dos filas, grandes y legibles. */
  .le-sellos {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 10rem;
    gap: var(--s-4) var(--s-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--s-2) var(--gutter) var(--s-5);
    scrollbar-width: none;
  }
  .le-sellos::-webkit-scrollbar { display: none; }
  .le-sello { scroll-snap-align: start; }
  .le-sello:nth-child(odd) { translate: 0 0; }
  .le-sello:nth-child(4n+2), .le-sello:nth-child(4n+3) { translate: .9rem 0; }
}

@media (max-width: 47.99rem) {
  /* Portada: el titular manda, la foto se ve mas. */
  .le-hero { gap: var(--s-5); padding: var(--s-8) 0 var(--s-5); }
  .le-hero__foto img { opacity: .7; object-position: 60% 30%; }
  .le-hero__foto::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--navy) 35%, transparent) 0%, color-mix(in srgb, var(--navy) 80%, transparent) 45%, var(--navy) 85%);
  }
  .le .le-hero__titulo { font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: .92; }
  .le-hero__entrada { font-size: 1rem; }
  .le-hero .lt-btn { padding-block: 14px; }
  .le-hero__pie { display: none; }
  .le-entradas { padding-top: var(--s-4); }
  /* Las entradas, tambien deslizables: una fila, no una torre. */
  .le-entradas__lista {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--s-1);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .le-entradas__lista::-webkit-scrollbar { display: none; }
  .le-entradas__lista li { flex: 0 0 min(84%, 20rem); scroll-snap-align: start; display: grid; }
  #wrap.le .le-entrada { min-width: 0; max-width: none; }

  .le .le-h2 { font-size: clamp(1.875rem, 8.2vw, 2.125rem); }
  .le-sesiones { padding-block: var(--s-8) var(--s-7); }
  #wrap.le .le-panel__enlace { height: 24rem; border-radius: 16px; }
  .le-panel__cuerpo { padding: var(--s-4); }

  /* Quien: filas compactas, icono a la izquierda. */
  .le-quien { padding-bottom: var(--s-8); }
  .le-quien__rejilla { gap: var(--s-5); }
  .le-quien__cosa { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); }
  .le-quien__ico { grid-row: 1 / span 2; }
  .le .le-quien__cosa h3 { font-size: 1.1875rem; align-self: center; }
  .le-quien__cosa p { grid-column: 2; font-size: .9375rem; }

  .le-pasaporte { padding-block: var(--s-8); }
  .le-sellos { grid-auto-columns: 8.75rem; }
  .le-sello__texto { font-size: 16px; }

  /* Montador: formatos 2 x 2 solo con icono y nombre (su explicacion ya
     esta en los paneles de arriba); todo mas junto. */
  .le-montar { padding-block: var(--s-8); }
  .le .le-montar__titulo { font-size: clamp(2.25rem, 10vw, 2.625rem); }
  #wrap.le .le-montar__titulo { margin-bottom: var(--s-6); }
  .le-form__pasos { gap: var(--s-6); }
  .le-paso { gap: var(--s-3); }
  .le-paso__titulo { font-size: 1.1875rem; }
  .le-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .le-formato__cara { padding: var(--s-4) var(--s-3); gap: var(--s-2); justify-items: start; min-height: 7.5rem; }
  .le-formato__texto { display: none; }
  .le-formato__nombre { font-size: 1.0625rem; }
  .le-formato__ico { width: 1.625rem; height: 1.625rem; }
  .le-formato__cara::after { top: var(--s-3); right: var(--s-3); width: 1.5rem; height: 1.5rem; }
  .le-chip span { padding: .6rem var(--s-4); }
  .le-hoja__papel { padding: var(--s-5); }
  .le-hoja__frase { min-height: 0; font-size: 1.25rem; }
  #wrap.le .le-enviar { padding-block: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .le *, .le *::before, .le *::after { transition: none !important; animation: none !important; }
}