/* =============================================================================
   LENNEL — su propia hoja, porque no se presenta como Galeixandre

   Omar, 14-09-2026: «una marca hermana, aparte — comparte taller y materias
   primas, pero no se presenta como Galeixandre».

   Hasta el 26-09-2026 esta página era la casa en negro con el acento en verde
   musgo (el `moss` del libro): no había nada de Lennel de donde sacar otra
   cosa. Ahora sí lo hay: las etiquetas de Aurora (Adorable Nostalgia y Grape
   Doll, 15-04-2026). De ellas salen los colores —crema, chocolate, el rojo
   óxido de la firma y los pastel— y la letra: palo seco grueso en mayúsculas.

   Se sobrescriben las variables de la casa (--papel, --tinta, --oro…) y no se
   inventan otras: así la cabecera, el carrito y el pie de tienda.js cambian de
   piel sin tocar una regla más.
   ========================================================================== */
/* `.carrito--lennel`: el cajón del carrito en una página de Galeixandre cuando
   todo lo que lleva es de Lennel (tienda.js lo marca y trae esta hoja). */
.lennel, .carrito--lennel {
  --tinta: #5c3424;                    /* el chocolate de los títulos */
  --tinta-suave: rgba(92, 52, 36, 0.8);
  --tinta-tenue: rgba(92, 52, 36, 0.62);
  --papel: #fbe8d6;                    /* el crema del marco */
  --papel-alto: #fff4ea;
  --papel-hondo: #f3d9c2;
  --oro: #8e2d1a;                      /* el rojo óxido de la firma «Lennel.» */
  --jugo: #8e2d1a;
  --linea: rgba(92, 52, 36, 0.2);
  --rosa: #f4a7b9;
  --lila: #c9b6e4;
  --cielo: #9fd3e6;
  background: var(--papel);
  color: var(--tinta);
}
.lennel .cabecera--fija { background: rgba(251, 232, 214, 0.92); }
.lennel .logo--lennel { line-height: 0; }
.lennel .logo--lennel img { height: clamp(34px, 3.6vw, 48px); width: auto; }
.lennel .pie__logo--lennel img { height: 56px; width: auto; }
/* El pie de Lennel tiene tres columnas, no las cinco de la casa. */
.lennel .pie__rejilla--lennel { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 820px) { .lennel .pie__rejilla--lennel { grid-template-columns: 1fr; } }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- portada --------------------------------------------------------- */
.lennel__portada { padding: calc(6.5rem + 3vw) 0 clamp(3rem, 6vw, 5rem); }
.lennel__portada-rejilla {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.lennel__casa { margin: 0; line-height: 0; }
.lennel__casa img { width: clamp(220px, 34vw, 420px); height: auto; }
.lennel__reclamo {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  font-family: var(--sans); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: clamp(1rem, 1.8vw, 1.25rem); color: var(--oro);
}
.lennel__entrada {
  margin: clamp(1.2rem, 2.6vw, 2rem) 0 0; max-width: 34rem;
  font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.68; color: var(--tinta-suave);
}
.lennel__entrada p { margin: 0 0 0.9rem; }
.lennel__precio-portada {
  margin: 1.2rem 0 0; font-family: var(--sans); font-weight: 600; letter-spacing: 0.06em;
  font-size: 1.02rem; color: var(--tinta);
}
.lennel__acciones { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; margin: 1.6rem 0 0; }
.lennel__parentesco {
  margin: 1.8rem 0 0; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.lennel__parentesco a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 4px; }
.lennel__parentesco a:hover { color: var(--tinta); }

.lennel__cartel { margin: 0; }
.lennel__cartel img {
  display: block; width: 100%; height: auto; max-width: 440px; margin-left: auto;
  border: 6px solid var(--tinta); transform: rotate(2deg);
  box-shadow: 14px 14px 0 var(--rosa);
}

/* El botón de la marca: gordo, redondeado y con sombra plana, como un rótulo. */
.lennel__boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0.85rem 1.6rem; border: 3px solid var(--tinta); border-radius: 999px;
  background: var(--tinta); color: var(--papel);
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  box-shadow: 4px 4px 0 var(--oro); transition: transform 0.2s, box-shadow 0.2s;
}
.lennel__boton:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--oro); }
.lennel__boton:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---------- la ficha de un perfume (lennel-perfume.html) ------------------- */
.lennel__ficha-enlace { display: block; color: inherit; text-decoration: none; }
.lennel__ficha-enlace:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.lennel__ficha h3 a { color: inherit; text-decoration: none; }
.lennel__ficha h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lennel__perfume { padding-top: calc(6rem + 2vw); }
.lennel__perfume-rejilla {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.lennel__perfume-imagenes { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
/* Omar, 01-10-2026: «al hacer scroll, que baje la imagen, no el texto». La
   columna de las imágenes es la larga: el texto (nombre, notas, tallas y
   «Añadir») se queda a la vista mientras pasan la etiqueta y el frasco. Solo
   en dos columnas; en el móvil van una debajo de otra. */
@media (min-width: 821px) {
  .lennel__perfume-texto { position: sticky; top: clamp(5.5rem, 7vw, 7rem); }
}
.lennel__perfume-etiqueta, .lennel__perfume-frasco { margin: 0; }
.lennel__perfume-etiqueta img {
  display: block; width: 100%; height: auto; max-width: 480px;
  border: 6px solid var(--tinta); box-shadow: 14px 14px 0 var(--rosa);
}
.lennel__perfume-frasco { max-width: 480px; }
.lennel__perfume-frasco img {
  display: block; width: 100%; height: auto; border: 4px solid var(--tinta); box-shadow: 8px 8px 0 var(--cielo);
}
.lennel__perfume-frasco figcaption {
  margin: 0.9rem 0 0; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-tenue);
}
.lennel__perfume-texto .lennel__parentesco { margin: 0 0 1rem; }
.lennel__perfume-texto .lennel__parentesco a { text-decoration: none; color: var(--oro); }
.lennel__perfume-notas {
  margin: 1rem 0 1.4rem; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; color: var(--tinta-suave); max-width: 26em;
}
.lennel__tallas--grandes { flex-wrap: wrap; margin-bottom: 1.2rem; }
.lennel__tallas--grandes span { min-height: 48px; padding: 0 1.2rem; font-size: 1rem; }
.lennel__perfume-texto .lennel__garantia { margin: 1.2rem 0 0; max-width: 34rem; }
@media (max-width: 820px) {
  .lennel__perfume-rejilla { grid-template-columns: 1fr; }
  .lennel__perfume-etiqueta img, .lennel__perfume-frasco { max-width: 360px; }
  .lennel__perfume-imagenes { grid-template-columns: 1fr 1fr; align-items: start; }
  .lennel__perfume-etiqueta img { box-shadow: 8px 8px 0 var(--rosa); border-width: 4px; }
}

/* ---------- títulos de sección ---------------------------------------------- */
.lennel__titulo {
  margin: 0; font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.1em; line-height: 1.05; color: var(--tinta);
}
.lennel__sub {
  margin: 0.8rem 0 clamp(2rem, 4vw, 3rem); font-size: 1.05rem; color: var(--tinta-suave);
}
/* La promesa de envío y cobro, pegada a la tarifa: se lee antes de añadir. */
.lennel__sub + .lennel__garantia { margin-top: calc(-1 * clamp(2rem, 4vw, 3rem) + 0.6rem); }
.lennel__garantia {
  margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: 0.92rem; line-height: 1.55; color: var(--tinta-tenue);
}

/* ---------- perfumes -------------------------------------------------------- */
.lennel__rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
}
.lennel__ficha { display: flex; flex-direction: column; }
/* 4:5 como la foto de estudio, para que las dos midan lo mismo en la rejilla.
   El dibujo es 5:6 y se recorta centrado: pierde 8 % arriba y abajo, nada. */
.lennel__etiqueta {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--papel-hondo);
  border: 4px solid var(--tinta); box-shadow: 6px 6px 0 var(--lila);
}
.lennel__ficha:nth-child(3n+2) .lennel__etiqueta { box-shadow: 6px 6px 0 var(--cielo); }
.lennel__ficha:nth-child(3n) .lennel__etiqueta { box-shadow: 6px 6px 0 var(--rosa); }
.lennel__etiqueta { position: relative; }
.lennel__etiqueta img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* La foto del frasco, debajo de la etiqueta: aparece al pasar el ratón. Donde
   no hay ratón no aparece: la etiqueta es lo que Lennel es. */
.lennel__etiqueta-foto { position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s var(--curva, ease); }
@media (hover: hover) {
  .lennel__ficha:hover .lennel__etiqueta-foto,
  .lennel__ficha:focus-within .lennel__etiqueta-foto,
  .lennel__encargo-ficha:hover .lennel__etiqueta-foto { opacity: 1; }
}
/* La foto de estudio (30-09-2026): frasco sobre fondo claro, 4:5. Mismo marco y
   misma sombra que la etiqueta, para que las dos convivan en la rejilla. */
.lennel__foto {
  margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #f3f3f3;
  border: 4px solid var(--tinta); box-shadow: 6px 6px 0 var(--lila);
}
.lennel__ficha:nth-child(3n+2) .lennel__foto { box-shadow: 6px 6px 0 var(--cielo); }
.lennel__ficha:nth-child(3n) .lennel__foto { box-shadow: 6px 6px 0 var(--rosa); }
.lennel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Las notas de Aurora, una línea por perfume, tal cual las escribió. */
.lennel__notas {
  margin: 0 0 0.9rem; font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; line-height: 1.45; color: var(--tinta-suave);
}
.lennel__ficha h3 {
  margin: 1.1rem 0 0.35rem; font-family: var(--sans); font-weight: 700;
  font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.lennel__tallas { display: flex; gap: 0.5rem; margin: 0 0 0.8rem; padding: 0; border: 0; }
.lennel__tallas label { position: relative; cursor: pointer; }
.lennel__tallas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lennel__tallas span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 2px solid var(--linea); border-radius: 999px; font-size: 0.9rem;
}
.lennel__tallas input:checked + span { border-color: var(--tinta); background: var(--papel-alto); font-weight: 600; }
.lennel__tallas input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.lennel__anadir {
  margin-top: auto; min-height: 48px; padding: 0.75rem 1rem;
  border: 2px solid var(--tinta); border-radius: 999px; background: transparent; color: var(--tinta);
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lennel__anadir:hover { background: var(--tinta); color: var(--papel); }

/* ---------- por encargo ----------------------------------------------------- */
/* Los del catálogo de Lennel que el libro aún no vende. Fichas de texto, con
   la foto solo donde la hay: nombre, notas y un botón que lleva al formulario. */
.lennel__por-encargo { background: var(--papel-hondo); border-top: 4px solid var(--tinta); }
.lennel__encargo {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1.4rem; align-items: start;
}
.lennel__encargo-ficha {
  display: flex; flex-direction: column; background: var(--papel);
  border: 3px solid var(--tinta); box-shadow: 5px 5px 0 var(--rosa);
}
/* Con foto, la foto va al lado, pequeña: la ficha sigue siendo de texto. */
.lennel__encargo-ficha--foto { display: grid; grid-template-columns: 104px 1fr; }
.lennel__encargo-ficha:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--cielo); }
.lennel__encargo-ficha:nth-child(3n) { box-shadow: 5px 5px 0 var(--lila); }
.lennel__encargo-ficha .lennel__etiqueta { border: 0; border-right: 3px solid var(--tinta); box-shadow: none; aspect-ratio: auto; height: 100%; }
.lennel__encargo-texto { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.3rem; }
.lennel__encargo-texto h3 {
  margin: 0 0 0.35rem; font-family: var(--sans); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.lennel__encargo-texto .lennel__notas { margin-bottom: 1.1rem; }
.lennel__pedir-boton {
  margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0.6rem 1rem;
  border: 2px solid var(--tinta); border-radius: 999px; background: transparent; color: var(--tinta);
  font-family: var(--sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lennel__pedir-boton:hover { background: var(--tinta); color: var(--papel); }

/* ---------- kits y a medida ------------------------------------------------- */
.lennel__pedir { background: var(--papel-alto); border-top: 4px solid var(--tinta); }
.lennel__pedir-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.lennel__opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.lennel__opciones li { padding: 1.3rem 1.4rem; border: 3px solid var(--tinta); background: var(--papel); box-shadow: 5px 5px 0 var(--rosa); }
.lennel__opciones li:nth-child(2) { box-shadow: 5px 5px 0 var(--cielo); }
.lennel__opciones li:nth-child(3) { box-shadow: 5px 5px 0 var(--lila); }
.lennel__opciones h3 {
  margin: 0 0 0.5rem; font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem;
}
.lennel__opciones h3 b { color: var(--oro); white-space: nowrap; }
.lennel__opciones p { margin: 0; line-height: 1.6; color: var(--tinta-suave); }
.lennel__opciones .lennel__anadir { margin-top: 0.9rem; }
.lennel__form .campo input, .lennel__form .campo select, .lennel__form .campo textarea {
  width: 100%; padding: 0.9rem 1rem; border: 2px solid var(--linea); border-radius: 12px;
  background: var(--papel); color: var(--tinta); font: inherit;
}
.lennel__form .campo textarea { resize: vertical; }
.lennel__form .campo :focus-visible { border-color: var(--tinta); outline: none; }
.lennel__aviso { margin: 1rem 0 0; font-size: 1rem; line-height: 1.55; }
.lennel__aviso.es-fallo { color: #a8443a; }

.lennel .volver { text-align: center; padding: 2.5rem 0 4rem; }

/* ---------- el carrito y la caja, con la letra y las formas de Lennel --------
   Omar, 01-10-2026: «el carrito desentona bastante». Con solo los colores
   cambiados, el cajón y el checkout seguían siendo de Galeixandre: títulos en
   Cormorant fino, cajas de línea de 1 px, esquinas rectas y un botón plano.
   Aquí cogen lo de la página: palo seco grueso en mayúsculas, el borde de
   chocolate, las pastillas y la sombra plana de color.
   `.lennel` es /lennel y el checkout vestido; `.carrito--lennel`, el cajón en
   una página de Galeixandre. */
:is(.lennel, .carrito--lennel) .carrito,
.carrito--lennel { border-left: 4px solid var(--tinta); }
:is(.lennel, .carrito--lennel) .carrito__cabeza { border-bottom: 3px solid var(--tinta); }
:is(.lennel, .carrito--lennel) .carrito__cabeza h2,
.lennel .caja .titulo,
.lennel .acceso .titulo,
.lennel .resumen .subtitulo,
.lennel .confirmacion .titulo {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; line-height: 1.05; color: var(--tinta);
}
:is(.lennel, .carrito--lennel) .carrito__cabeza h2 { font-size: 1.3rem; }
.lennel .caja .titulo { font-size: clamp(2rem, 5vw, 3.4rem); }
.lennel .acceso .titulo { font-size: clamp(2rem, 5vw, 3.4rem); }

/* La cuenta (lennel-cuenta.html): el campo como los de la caja, el aviso y
   cada pedido como una tarjeta de la página. */
.lennel .acceso .antetitulo { font-weight: 600; color: var(--oro); }
.lennel .acceso .campo input {
  border: 2px solid var(--linea); border-radius: 12px; background: var(--papel-alto); color: var(--tinta);
}
.lennel .acceso .campo input:focus-visible { border-color: var(--tinta); outline: none; }
.lennel .acceso__aviso { border-radius: 12px; }
.lennel .acceso [data-pedidos] { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.lennel .pedido {
  border: 3px solid var(--tinta); background: var(--papel-alto); box-shadow: 6px 6px 0 var(--lila);
  padding: 1.4rem 1.5rem; margin: 0 0 1.6rem;
}
.lennel .pedido__estado { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; color: var(--oro); }
.lennel .pedido:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--cielo); }
.lennel .pedido:nth-child(3n) { box-shadow: 6px 6px 0 var(--rosa); }
.lennel .pedido__ref, .lennel .pedido__total {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lennel .resumen .subtitulo { font-size: 1.3rem; letter-spacing: 0.1em; }

/* Las líneas: la etiqueta enmarcada como en la rejilla, el nombre en negrita. */
:is(.lennel, .carrito--lennel) .linea-carrito { border-bottom: 2px solid var(--linea); }
:is(.lennel, .carrito--lennel) .linea-carrito img {
  border: 3px solid var(--tinta); box-shadow: 4px 4px 0 var(--lila);
}
:is(.lennel, .carrito--lennel) .linea-carrito:nth-child(3n+2) img { box-shadow: 4px 4px 0 var(--cielo); }
:is(.lennel, .carrito--lennel) .linea-carrito:nth-child(3n) img { box-shadow: 4px 4px 0 var(--rosa); }
:is(.lennel, .carrito--lennel) .linea-carrito h3 {
  font-family: var(--sans); font-weight: 700; font-size: 1rem; line-height: 1.25;
  letter-spacing: 0.06em; text-transform: uppercase;
}
:is(.lennel, .carrito--lennel) .linea-carrito .quitar { color: var(--oro); }
:is(.lennel, .carrito--lennel) .cantidad {
  border: 2px solid var(--tinta); border-radius: 999px; overflow: hidden;
}
:is(.lennel, .carrito--lennel) .cantidad button { width: 42px; height: 42px; color: var(--tinta); }
:is(.lennel, .carrito--lennel) .cantidad button:hover { background: var(--papel-hondo); }
:is(.lennel, .carrito--lennel) .cantidad span { font-weight: 600; }

:is(.lennel, .carrito--lennel) .carrito__pie { border-top: 3px solid var(--tinta); background: var(--papel-alto); }
:is(.lennel, .carrito--lennel) .barra { height: 8px; border: 2px solid var(--tinta); border-radius: 999px; background: var(--papel); }
:is(.lennel, .carrito--lennel) .barra i { background: var(--rosa); }
:is(.lennel, .carrito--lennel) .total,
.lennel .resumen__total {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
:is(.lennel, .carrito--lennel) .total { font-size: 1.15rem; }

/* El botón de comprar es el botón de la marca. */
:is(.lennel, .carrito--lennel) .boton {
  min-height: 52px; padding: 0.95rem 1.6rem;
  border: 3px solid var(--tinta); border-radius: 999px;
  background: var(--tinta); color: var(--papel);
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.14em;
  box-shadow: 4px 4px 0 var(--oro); transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
:is(.lennel, .carrito--lennel) .boton:hover {
  background: var(--tinta); color: var(--papel);
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--oro);
}
:is(.lennel, .carrito--lennel) .boton--linea { background: transparent; color: var(--tinta); }
:is(.lennel, .carrito--lennel) .boton--linea:hover { background: var(--papel-hondo); color: var(--tinta); }

/* La caja: campos redondeados como el formulario de «Kits y a medida», el
   resumen como una tarjeta de la página. */
.lennel .caja .campo input,
.lennel .caja .campo select {
  border: 2px solid var(--linea); border-radius: 12px; background: var(--papel-alto); color: var(--tinta);
}
.lennel .caja .campo input:focus-visible,
.lennel .caja .campo select:focus-visible { border-color: var(--tinta); outline: none; }
.lennel .caja .antetitulo { font-weight: 600; color: var(--oro); }
.lennel .paso b { font-weight: 700; color: var(--oro); }
.lennel .resumen {
  background: var(--papel-alto); border: 4px solid var(--tinta); box-shadow: 8px 8px 0 var(--rosa);
}
.lennel .resumen__total { border-top: 3px solid var(--tinta); font-size: 1.15rem; }
.lennel .metodo span,
.lennel .acuerdo span,
.lennel .casilla {
  border: 2px solid var(--linea); border-radius: 14px; background: var(--papel-alto);
}
.lennel .metodo b {
  font-family: var(--sans); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* La casilla del diario, como las dos de encima (no como los métodos). */
.lennel .casilla b { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; }
.lennel .metodo input:checked + span,
.lennel .acuerdo input:checked + span {
  border-color: var(--tinta); background: var(--papel-hondo); box-shadow: 4px 4px 0 var(--cielo);
}
.lennel .acuerdo span::before { border: 2px solid var(--tinta); border-radius: 4px; }
.lennel .acuerdo input:checked + span::before { background: var(--tinta); border-color: var(--tinta); }
.lennel .acuerdo span::after { border-color: var(--papel); }
.lennel .confirmacion .num-pedido { font-family: var(--sans); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  :is(.lennel, .carrito--lennel) .boton { transition: none; }
  :is(.lennel, .carrito--lennel) .boton:hover { transform: none; }
}

/* ---------- pantallas estrechas --------------------------------------------- */
@media (max-width: 820px) {
  .lennel__portada-rejilla, .lennel__pedir-rejilla { grid-template-columns: 1fr; }
  .lennel__cartel img { max-width: 300px; margin: 0 auto; }
}
/* En el teléfono, dos por fila: con una sola, ocho perfumes eran ocho pantallas. */
@media (max-width: 560px) {
  .lennel__rejilla { grid-template-columns: 1fr 1fr; gap: 1.8rem 0.9rem; }
  .lennel__etiqueta, .lennel__foto { border-width: 3px; box-shadow: 4px 4px 0 var(--lila); }
  /* Cormorant tiene la x baja: por debajo de 16 px, en el teléfono, no se lee. */
  .lennel__notas { font-size: 1rem; }
  .lennel__encargo { gap: 1rem; }
  .lennel__ficha h3 { font-size: 0.92rem; letter-spacing: 0.05em; }
  /* Tres tallas en media pantalla: pastillas justas y sin partir «15 ml». */
  .lennel__tallas { gap: 0.3rem; }
  .lennel__tallas span { padding: 0 0.5rem; min-height: 40px; font-size: 0.78rem; white-space: nowrap; }
  .lennel__anadir { font-size: 0.82rem; padding: 0.6rem 0.4rem; letter-spacing: 0.02em; }
}

@media (prefers-reduced-motion: reduce) {
  .lennel__boton, .lennel__anadir, .lennel__pedir-boton { transition: none; }
  .lennel__boton:hover { transform: none; }
}

/* iPhone SE (320 px): una ficha por fila, o las tallas no caben (01-10-2026). */
@media (max-width: 350px) { .lennel__rejilla { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  /* La columna del formulario no puede pedir más ancho que la pantalla. */
  .lennel__pedir-rejilla, .lennel__opciones { grid-template-columns: minmax(0, 1fr); }
  .lennel__form select, .lennel__form input, .lennel__form textarea { max-width: 100%; min-width: 0; }
}
@media (max-width: 350px) {
  /* «Perfume personalizado · Desde 98 €» no cabe en una línea: el precio baja. */
  .lennel__opciones h3 { flex-wrap: wrap; row-gap: 0.2rem; }
}

/* ---------- la letra de Lennel, la suya (02-10-2026) -------------------------
   Omar: «la tipografía de Lennel tiene que ser la suya propia, para que haya
   una diferencia». Sale de las etiquetas de Aurora: rótulos de cómic a mano,
   mayúsculas gruesas («GRAPE DOLL», «LENNEL»). Títulos en Luckiest Guy (Apache
   2.0) y el resto en Fredoka (OFL), redonda y amable. Galeixandre sigue con
   Cormorant y Jost; Lennel ya no se parece en nada. Alojadas aquí, como las de
   la casa: la CSP no deja pedir fuentes fuera. */
@font-face {
  font-family: 'Luckiest Guy'; src: url('../fonts/luckiest-guy.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fredoka'; src: url('../fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
.lennel, .carrito--lennel {
  --sans: 'Fredoka', 'Jost respaldo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Fredoka', 'Jost respaldo', 'Helvetica Neue', Arial, sans-serif;
  --letra-titulo: 'Luckiest Guy', 'Fredoka', 'Arial Black', sans-serif;
}
.lennel h1, .lennel h2, .lennel h3, .lennel .titulo, .lennel .display,
.lennel .lennel__titulo, .lennel .lennel__reclamo, .lennel .lennel__ficha h3,
.carrito--lennel h2, .carrito--lennel h3 {
  font-family: var(--letra-titulo); font-weight: 400; letter-spacing: 0.04em;
}
/* Fredoka no tiene cursiva: las notas de Aurora van rectas y un punto más gruesas. */
.lennel .lennel__notas, .lennel .lennel__perfume-notas { font-style: normal; font-weight: 500; }