.bloque-texto { max-width: 62ch; }

/* --- Tallas M / L / XL ---------------------------------------------- */
/* Son cuatro tarjetas: las columnas van 1 → 2 → 4, nunca 3. Con `auto-fit`
   los anchos intermedios daban tres columnas y dejaban la XL sola en una
   segunda fila. */
.tallas {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-top: var(--sp-4);
}
@media (min-width: 560px) {
  .tallas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tallas { grid-template-columns: repeat(4, 1fr); }
}

.talla {
  border-radius: var(--radio);
  cursor: pointer;
  perspective: 900px;
  /* el alto lo fija .talla__frente, que está en flujo normal */
}
.talla__inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.talla--girada .talla__inner { transform: rotateY(180deg); }

.talla__frente {
  display: flex;
  flex-direction: column;
  background: var(--crema);
  border: 1px solid rgba(110, 90, 73, 0.12);
  border-radius: var(--radio);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  box-shadow: var(--sombra);
  backface-visibility: hidden;
}
/* La foto ocupa el dorso entero. La primera versión la metía en un flex junto
   a un bloque de texto opaco y la tarta se quedaba en una franja de 100 px:
   quien voltea la tarjeta viene a ver la tarta, no a leer otra vez lo que ya
   ponía en la cara de delante. */
.talla__dorso {
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--madera);
  box-shadow: var(--sombra);
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.talla__dorso img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Degradado, no un bloque: el pie se apoya sobre la foto sin taparla. El
   arranque transparente empieza bien arriba para que el texto tenga fondo
   suficiente sin que se note dónde acaba la imagen. */
.talla__dorso-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-5) var(--sp-2) var(--sp-2);
  text-align: center;
  background: linear-gradient(
    to top,
    rgba(58, 45, 36, 0.95) 0%,
    rgba(58, 45, 36, 0.90) 42%,
    rgba(58, 45, 36, 0.55) 72%,
    rgba(58, 45, 36, 0) 100%
  );
}
/* La sombra no es adorno: las cuatro fotos tienen fondos distintos y la de la
   XL es clara justo donde cae el texto. Con ella el titular se lee en todas. */
.talla__dorso-titulo {
  margin: 0 0 var(--sp-1);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.1;
  color: var(--crema);        /* sobre el 0,90 del degradado: 8,9:1 */
  text-shadow: 0 1px 4px rgba(28, 20, 14, 0.55);
}
.talla__dorso .btn {
  padding: 0.5rem 1.3rem;
  font-size: var(--fs-sm);
}
.talla__letra {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--topo);          /* texto grande: 4,2:1 permitido */
  margin: 0;
}
.talla__pisos { font-weight: 600; margin: var(--sp-1) 0 0; }

/* "10 pañales" y "18 €" son dos números seguidos: si comparten peso y tamaño
   se leen como lo mismo. El contenido queda en texto pequeño y discreto; el
   precio es lo único grande, en rosa y separado por una línea. */
.talla__panales {
  margin: 0;
  font-size: var(--fs-sm);
}
.talla__incluye {
  margin: var(--sp-2) 0;
  font-size: var(--fs-sm);
  flex: 1;                     /* empuja el botón al mismo alto en las cuatro */
}
.talla__precio {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--rosa-cta);      /* 4,7:1 sobre crema, y es texto grande */
  margin: 0 0 var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(110, 90, 73, 0.14);
}

.nota {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  text-align: center;
}

/* --- Personalización -------------------------------------------------- */
.tarjetas-3 {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--sp-4);
}
.tarjeta img {
  width: 100%;
  border-radius: var(--radio);
  margin-bottom: var(--sp-2);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.tarjeta h3 { font-size: var(--fs-lg); }

/* --- Cómo funciona ----------------------------------------------------- */
.pasos {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: paso;
  list-style: none;
  padding: 0;
  margin-top: var(--sp-4);
}
.pasos li { counter-increment: paso; }
.pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--rosa);
  color: var(--topo-oscuro);   /* decorativo: el paso también está en el h3 */
  font-family: var(--serif);
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.pasos h3 { font-size: var(--fs-lg); }

/* --- Galería ------------------------------------------------------------ */
.galeria {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: var(--sp-4);
}
.galeria__item {
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: var(--radio); overflow: hidden;
}
.galeria__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.galeria__item:hover img { transform: scale(1.05); }

.lightbox {
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(110, 90, 73, 0.9); }
.lightbox img {
  max-width: 88vw;
  max-height: 86vh;
  width: auto;
  margin: auto;
  border-radius: var(--radio);
}
.lightbox__cerrar, .lightbox__nav {
  position: fixed;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--crema);
  color: var(--topo-oscuro);
  width: 48px; height: 48px;      /* objetivo táctil cómodo */
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__cerrar { top: var(--sp-2); right: var(--sp-2); }
.lightbox__nav--prev { left: var(--sp-2); top: calc(50% - 24px); }
.lightbox__nav--next { right: var(--sp-2); top: calc(50% - 24px); }

/* --- Formulario de pedido ------------------------------------------------ */
.pedido {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--sp-3);
}
.pedido label {
  display: grid;
  gap: 4px;
  align-content: start;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.pedido--ancho { grid-column: 1 / -1; }

.pedido input, .pedido select, .pedido textarea {
  font: 400 var(--fs-base) var(--sans);
  color: var(--topo-oscuro);
  background: var(--crema);
  border: 1px solid rgba(110, 90, 73, 0.28);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  min-height: 44px;                 /* objetivo táctil */
  width: 100%;
}
.pedido textarea { resize: vertical; }
.pedido [aria-invalid='true'] { border-color: var(--rosa-cta); border-width: 2px; }

.error {
  min-height: 1.2em;
  font-size: var(--fs-xs);
  font-style: normal;
  font-weight: 400;
  color: var(--rosa-cta);           /* 5,0:1 sobre crema */
}

/* Las dos hacen falta. Con solo `justify-self`, `align-self` se queda en el
   `stretch` que trae el grid y el botón se estiraba a lo alto de su fila: 829
   px de mancha rosa al lado del paso 3. */
.pedido button[type='submit'] {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: start;   /* sin esto el grid lo estira a lo alto de su fila */
}