/* ==========================================================================
   Printuul — sitio público
   Rotulación mexicana: la barda encalada (manta) con letras pintadas a pincel,
   sombra de bloque vino, filete doble, flechas de maíz y placas rosas. Colores
   planos, nada de azul, sin degradados ni sombras difusas: toda «sombra» es un
   bloque sólido corrido, como la de un rótulo. Paleta y contrastes:
   docs/MARCA.md del repositorio del sistema.
   ========================================================================== */

@font-face {
  font-family: 'Passion One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/passion-one-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/public-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/public-sans-latin-wght-italic.woff2') format('woff2');
}

:root {
  /* Rosa mexicano (BRANDING.primary) */
  --rosa: #e4007c; /* 500: bloques grandes con texto blanco (4.58:1) */
  --rosa-600: #cc0070; /* placas y letras rosas sobre manta (4.87:1) */
  --rosa-700: #a8005c;
  --rosa-400: #ff5aa8; /* letras rosas sobre tinta */
  --rosa-300: #ff92c6;
  --rosa-100: #ffe0ef;

  /* Vino (sombra de bloque y filete) y maíz (flechas, brillos) */
  --vino: #6b1040; /* manta encima 10.8:1; rosa 300 encima 6.1:1 */
  --vino-hondo: #4e0a2e;
  --maiz: #ffc12e; /* nunca texto sobre claro */

  /* Manta: la cal de la barda (BRANDING.surface) */
  --manta: #f6f0e4;
  --papel: #fbf8f3;
  --manta-100: #f5f0e7;
  --manta-200: #e9e1d4;
  --manta-300: #d6cbb9;
  --manta-400: #aa9f8e;
  --manta-500: #756c60;
  --tenue: #5a5248; /* texto secundario, 6.8:1 sobre manta */
  --tinta-700: #453e36;
  --tinta-800: #2c2722;
  --tinta: #1d1a16;

  --titulos: 'Passion One', 'Arial Narrow', Impact, 'Segoe UI', sans-serif;
  --texto: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --margen: clamp(1rem, 4.5vw, 4rem);
  --ancho: 78rem;
  --plancha: 0.9rem; /* desfase de la plancha de color detrás de las pantallas */

  /* Sombra de bloque pintada: capas de 1 px, sin desenfoque. */
  --bloque-vino: 1px 1px 0 var(--vino), 2px 2px 0 var(--vino), 3px 3px 0 var(--vino), 4px 4px 0 var(--vino),
    5px 5px 0 var(--vino), 6px 6px 0 var(--vino);
  --bloque-tinta: 1px 1px 0 var(--tinta), 2px 2px 0 var(--tinta), 3px 3px 0 var(--tinta), 4px 4px 0 var(--tinta),
    5px 5px 0 var(--tinta), 6px 6px 0 var(--tinta);
  --bloque-maiz: 1px 1px 0 var(--maiz), 2px 2px 0 var(--maiz), 3px 3px 0 var(--maiz), 4px 4px 0 var(--maiz),
    5px 5px 0 var(--maiz), 6px 6px 0 var(--maiz);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--manta) url('/img/trama.svg');
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Los titulares son letras de rótulo: una sola tinta de Passion One, nunca negrita sintética. */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--titulos);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Titular de sección: mayúsculas rosas, filete y sombra de bloque vino.
   Las palabras resaltadas van en tinta con sombra maíz: dos oscuras juntas
   (tinta sobre vino) se funden en un solo bloque; el maíz las despega. */
.seccion h2,
.contacto h2,
.legal h1,
.aviso-pagina h1 {
  font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.75rem);
  text-transform: uppercase;
  color: var(--rosa-600);
  -webkit-text-stroke: 2px var(--vino);
  paint-order: stroke fill;
  text-shadow: var(--bloque-vino);
}
.seccion h2 em,
.contacto h2 em,
.aviso-pagina h1 em {
  font-style: normal;
  color: var(--tinta);
  -webkit-text-stroke-color: var(--tinta);
  text-shadow: var(--bloque-maiz);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--vino);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.salto {
  position: absolute;
  left: -999rem;
  top: 0.75rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--manta);
  font-weight: 700;
}
.salto:focus {
  left: 0.75rem;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El rótulo chico de sección, entre dos pinceladas: «— § 1 Cómo funciona —». */
.rotulo,
.antetitulo,
.paso-etapa {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 700 0.78rem/1.35 var(--texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.rotulo {
  margin-bottom: 1.3rem;
}
.rotulo span {
  color: var(--rosa-600);
}
.rotulo::after {
  content: '';
  flex: 0 0 3.5rem;
  height: 0.6rem;
  background: url('/img/pincelada.svg') 0 50% / 100% 100% no-repeat;
}

/* Botones: placas pintadas --------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem 0.6rem;
  border: 0;
  border-radius: 2px;
  background: var(--rosa-600);
  /* filete interior de manta y sombra de bloque vino */
  box-shadow:
    inset 0 0 0 3px var(--rosa-600),
    inset 0 0 0 4.5px var(--manta),
    4px 4px 0 var(--vino);
  color: var(--manta);
  font-family: var(--titulos);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    background-color 0.12s;
}
.boton:hover {
  background: var(--rosa-700);
  box-shadow:
    inset 0 0 0 3px var(--rosa-700),
    inset 0 0 0 4.5px var(--manta),
    2px 2px 0 var(--vino);
  transform: translate(2px, 2px);
}
.boton[disabled] {
  opacity: 0.65;
  cursor: progress;
}
.boton--linea {
  background: var(--manta);
  box-shadow:
    inset 0 0 0 2px var(--tinta),
    4px 4px 0 var(--tinta);
  color: var(--tinta);
}
.boton--linea:hover {
  background: var(--papel);
  box-shadow:
    inset 0 0 0 2px var(--tinta),
    2px 2px 0 var(--tinta);
}
.boton--chico {
  min-height: 2.6rem;
  padding: 0.5rem 1rem 0.4rem;
  font-size: 1.05rem;
}
.boton--grande {
  min-height: 3.6rem;
  padding: 0.85rem 1.8rem 0.75rem;
  font-size: 1.55rem;
  box-shadow:
    inset 0 0 0 4px var(--rosa-600),
    inset 0 0 0 6px var(--manta),
    6px 6px 0 var(--vino);
}
.boton--grande:hover {
  box-shadow:
    inset 0 0 0 4px var(--rosa-700),
    inset 0 0 0 6px var(--manta),
    3px 3px 0 var(--vino);
  transform: translate(3px, 3px);
}

/* Cabecera ------------------------------------------------------------------ */

.cabecera {
  border-top: 0.45rem solid var(--vino);
}
.cabecera-fila {
  display: flex;
  align-items: center;
  gap: 1.25rem 2.5rem;
  padding-block: 1.25rem 0.75rem;
}

.marca {
  display: inline-flex;
  flex: 0 0 auto;
  text-decoration: none;
}
.marca img {
  width: auto;
  height: 3rem;
}

.cabecera nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.9688rem;
  font-weight: 600;
}
.cabecera nav a {
  text-decoration: none;
}
.cabecera nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rosa-600);
}

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.cabecera-sesion {
  font-weight: 700;
  font-size: 0.9688rem;
  text-decoration: none;
}
.cabecera-sesion:hover {
  text-decoration: underline;
}
.cabecera-acciones .corto {
  display: none;
}

/* Portada: la barda con su rótulo -------------------------------------------- */

.portada {
  padding-block: clamp(1rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem);
}

/* El filete doble vino con un rombo rosa en cada esquina (img/filete.svg: las
   esquinas de 24 unidades se quedan fijas y los lados se estiran). */
.muro {
  position: relative;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(0.75rem, 5vw, 5rem) clamp(1.75rem, 3.5vw, 3rem);
  border: 24px solid transparent;
  border-image: url('/img/filete.svg') 24 stretch;
  background: var(--manta) url('/img/trama.svg') padding-box;
  text-align: center;
}
.muro-marca {
  position: absolute;
  top: 0.5rem;
  left: 0.6rem;
  width: 2.75rem;
  height: 2.75rem;
}

.portada h1 {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
}
/* Va DENTRO del h1 (es parte del titular para los buscadores). */
.antetitulo {
  justify-content: center;
  letter-spacing: 0.13em;
}
.antetitulo::before,
.antetitulo::after {
  content: '';
  flex: 0 0 3rem;
  height: 0.6rem;
  background: url('/img/pincelada.svg') 0 50% / 100% 100% no-repeat;
}
.portada h1 picture {
  display: block;
  width: 100%;
}
.rotulo-hero {
  width: min(100%, 60rem);
  margin-inline: auto;
}
/* En el celular el letrero va en renglones (rotulo-hero-movil.svg, por <picture>). */
@media (max-width: 40rem) {
  .rotulo-hero {
    width: min(100%, 14rem);
  }
}

.portada-entrada {
  max-width: 44rem;
  margin: 1.75rem auto 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinta-800);
}
.portada-entrada strong {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--titulos);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--vino);
}

.portada-acciones {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin-top: 2.25rem;
}
/* La flecha pintada apunta al botón. */
.flecha {
  width: clamp(7rem, 12vw, 10.5rem);
  margin-right: 0.25rem;
}

.portada-nota {
  max-width: 40rem;
  margin: 1.4rem auto 0;
  font-size: 0.9375rem;
  color: var(--tenue);
}
.portada-nota a {
  color: var(--tinta);
  font-weight: 700;
  white-space: nowrap;
}

/* Técnicas: la marquesina pintada -------------------------------------------- */

.tecnicas {
  padding-block: 1.4rem 1.5rem;
  background: var(--tinta);
  color: var(--rosa-400);
  border-block: 0.35rem solid var(--vino);
}
/* Todo en un solo renglón corrido que se parte donde quepa, como letras en una marquesina. */
.tecnicas .contenedor {
  text-align: center;
  font-family: var(--titulos);
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem);
  line-height: 1.25;
}
.tecnicas-rotulo {
  display: inline;
  margin-right: 0.5em;
  text-transform: uppercase;
  color: var(--maiz);
}
.tecnicas ul,
.tecnicas li {
  display: inline;
}
.tecnicas ul {
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow:
    1px 1px 0 var(--vino),
    2px 2px 0 var(--vino),
    3px 3px 0 var(--vino);
}
.tecnicas li {
  white-space: nowrap;
}
.tecnicas li:not(:last-child)::after {
  content: '·';
  margin-inline: 0.45em;
  color: var(--maiz);
  text-shadow: none;
}

/* Secciones ------------------------------------------------------------------- */

.seccion {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
#pedido {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.encabezado {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.75rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.encabezado-entrada {
  padding-top: 1rem;
  border-top: 3px double var(--vino);
  font-size: 1.0938rem;
  color: var(--tinta-800);
}

/* Un pedido de principio a fin ------------------------------------------------- */

.pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  --aire: clamp(2.25rem, 4.5vw, 4rem);
}

.paso {
  padding-block: var(--aire);
}

.paso-rejilla {
  display: grid;
  grid-template-columns: 5rem minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(1.5rem, 3.5vw, 3.75rem);
  align-items: start;
}
.paso--invertido .paso-rejilla {
  grid-template-columns: 5rem minmax(0, 7fr) minmax(0, 5fr);
}

/* El número, pintado en una placa; debajo, la línea punteada al siguiente paso. */
.paso-num {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
}
.paso-num span {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding-top: 0.2rem;
  background: var(--rosa-600);
  box-shadow:
    inset 0 0 0 3px var(--rosa-600),
    inset 0 0 0 4.5px var(--manta),
    5px 5px 0 var(--vino);
  color: var(--manta);
  font-family: var(--titulos);
  font-size: 2.6rem;
  line-height: 1;
}
.paso-num::after {
  content: '';
  position: absolute;
  top: 5.5rem;
  bottom: calc(-2 * var(--aire) + 0.75rem);
  left: 2.05rem;
  border-left: 3px dashed var(--rosa-600);
}
.paso:last-child .paso-num::after,
.paso:has(+ .paso--rosa) .paso-num::after,
.paso--rosa .paso-num::after {
  bottom: 0;
}

.paso-texto {
  grid-column: 2;
  grid-row: 1;
  padding-top: 0.2rem;
}
.paso-rejilla > figure {
  grid-column: 3;
  grid-row: 1;
}
.paso--invertido .paso-texto {
  grid-column: 3;
}
.paso--invertido .paso-rejilla > figure {
  grid-column: 2;
}

.paso-etapa {
  margin-bottom: 0.8rem;
  color: var(--rosa-600);
}
.paso h3 {
  font-size: clamp(2rem, 1.3rem + 2vw, 3.1rem);
  text-transform: uppercase;
  color: var(--tinta);
}
.paso-texto p:not(.paso-etapa) {
  max-width: 33rem;
  margin-top: 1rem;
}
.paso-texto h3 + p {
  margin-top: 1.3rem;
}
.paso-aparte {
  padding-left: 0.9rem;
  border-left: 3px solid currentColor;
  font-weight: 650;
}

/* La aprobación, a todo lo ancho en rosa, con filete vino y manta arriba y abajo. */
.paso--rosa {
  position: relative;
  margin-block: 2rem;
  padding-block: clamp(4rem, 7.5vw, 6.5rem);
  background: var(--rosa);
  color: #fff;
  border-block: 0.4rem solid var(--vino);
}
.paso--rosa::before,
.paso--rosa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--manta);
}
.paso--rosa::before {
  top: 0.6rem;
}
.paso--rosa::after {
  bottom: 0.6rem;
}
.paso--rosa h3 {
  color: #fff;
  text-shadow: 1px 1px 0 var(--vino), 2px 2px 0 var(--vino), 3px 3px 0 var(--vino), 4px 4px 0 var(--vino);
}
.paso--rosa .paso-num span {
  background: var(--manta);
  box-shadow:
    inset 0 0 0 3px var(--manta),
    inset 0 0 0 4.5px var(--vino),
    5px 5px 0 var(--vino);
  color: var(--rosa-600);
}
.paso--rosa .paso-num::after {
  border-color: var(--manta);
}
.paso--rosa .paso-etapa {
  color: #fff;
}
.paso--rosa :focus-visible {
  outline-color: #fff;
}

/* Pantallas: capturas del sistema dentro de una ventana sencilla --------------- */

.pantalla {
  margin: 0;
}
.pantalla-marco {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--tinta);
  border-radius: 6px;
  background: #fff;
  /* La plancha de color corrida detrás, como la sombra de un rótulo. */
  box-shadow: var(--plancha) var(--plancha) 0 var(--color-plancha, var(--vino));
}
.paso--invertido .pantalla-marco {
  box-shadow: calc(-1 * var(--plancha)) var(--plancha) 0 var(--color-plancha, var(--vino));
}
.pantalla--rosa {
  --color-plancha: var(--rosa-300);
}
.pantalla--maiz {
  --color-plancha: var(--maiz);
}

.pantalla-barra {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 2px solid var(--tinta);
  background: var(--manta-100);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tres tintas en lugar de los botones de una ventana. */
.pantalla-barra::before {
  content: '';
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 1.6rem;
  background: var(--rosa);
  box-shadow:
    0.8rem 0 var(--maiz),
    1.6rem 0 var(--vino);
}

.pantalla figcaption,
.cuenta-lamina figcaption {
  margin-top: calc(var(--plancha) + 0.75rem);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tenue);
}
.pantalla figcaption span,
.cuenta-lamina figcaption span {
  margin-right: 0.35rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rosa-600);
}

.pantalla-lienzo {
  overflow: hidden;
}

.captura {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

/* El teléfono con la liga, y el mensaje que la lleva. */
.pantalla--telefono {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem);
  align-items: start;
}
/* El marco del teléfono, con la captura de la liga adentro. */
.telefono {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  /* El bisel de arriba guarda la cámara, para que no tape la pantalla. */
  padding: 1.75rem 0.55rem 1.4rem;
  border-radius: 2.4rem;
  background: var(--tinta);
  box-shadow: 0 0 0 1px #000;
}
.telefono::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0.6rem;
  left: 50%;
  width: 3.6rem;
  height: 0.6rem;
  border-radius: 1rem;
  background: #000;
  transform: translateX(-50%);
}
.telefono .captura {
  border-radius: 0.6rem;
}
.mensaje {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  max-width: 15.5rem;
  margin: 15rem -1.75rem 0 0;
  padding: 0.85rem 1rem 0.95rem;
  border-radius: 14px 14px 3px 14px;
  background: var(--manta);
  box-shadow: 4px 4px 0 var(--vino);
  color: var(--tinta);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mensaje-de {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--rosa-700);
}
.mensaje-liga {
  display: block;
  margin-top: 0.35rem;
  font-weight: 700;
  color: var(--vino);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.pantalla--telefono figcaption {
  grid-column: 1 / -1;
  margin-top: 1rem;
  color: #fff;
}
.pantalla--telefono figcaption span {
  color: #fff;
}

/* La cuenta de la orden, como un recibo, con su sello. */
.cuenta-lamina {
  margin: 0;
}
.cuenta {
  position: relative;
  max-width: 31rem;
  padding: 1.5rem 1.6rem 1.35rem;
  border: 2px solid var(--tinta);
  background: #fff;
  box-shadow: var(--plancha) var(--plancha) 0 var(--rosa-300);
}
.cuenta-folio {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tenue);
}
.cuenta-cliente {
  max-width: calc(100% - 8.5rem);
  margin-top: 0.3rem;
  font-family: var(--titulos);
  font-size: 1.75rem;
  line-height: 1.05;
}
.cuenta table {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.cuenta th,
.cuenta td {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--manta-200);
  vertical-align: top;
}
.cuenta th {
  padding-right: 1rem;
  font-weight: 400;
  text-align: left;
}
.cuenta td {
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}
.cuenta tfoot th,
.cuenta tfoot td {
  padding-top: 0.85rem;
  border-top: 2px solid var(--tinta);
  border-bottom: 0;
  font-family: var(--titulos);
  font-size: 1.75rem;
  font-weight: 400;
}
.sello {
  position: absolute;
  top: 1.25rem;
  right: 1.1rem;
  padding: 0.35rem 0.75rem 0.2rem;
  border: 3px solid var(--rosa-600);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 3.5px var(--rosa-600);
  color: var(--rosa-600);
  font-family: var(--titulos);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

/* Catálogo y almacén ------------------------------------------------------------ */

.variantes {
  padding-top: clamp(2rem, 5vw, 4rem);
}
.variantes-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.variantes-texto p:not(.rotulo) {
  max-width: 31rem;
  margin-top: 1.1rem;
}
.variantes-texto h2 + p {
  margin-top: 1.6rem;
}

/* Índice de módulos, como el de un libro -------------------------------------- */

.indice-seccion {
  border-top: 3px double var(--vino);
  background: var(--papel);
}

.indice {
  columns: 2 24rem;
  column-gap: clamp(2.5rem, 6vw, 6rem);
}
.indice section {
  break-inside: avoid;
  padding-bottom: 2.25rem;
}
.indice h3 {
  padding-top: 0.7rem;
  border-top: 3px solid var(--tinta);
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.indice li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  padding-block: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--manta-300);
}
/* Nombre ··········· número. */
.indice strong {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  grid-column: 1;
  grid-row: 1;
  font-size: 1.125rem;
  font-weight: 750;
  line-height: 1.25;
}
.indice strong::after {
  content: '';
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--manta-400);
}
.indice-num {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  font-family: var(--titulos);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--rosa-600);
}
.indice-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 34rem;
  margin-top: 0.25rem;
  font-size: 0.9688rem;
  line-height: 1.5;
  color: var(--tenue);
}

/* Hecho para el taller: bloque vino enmarcado con filete doble ----------------- */

.taller {
  position: relative;
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--vino);
  color: var(--manta);
}
/* El filete: dos líneas rosa claro corridas por dentro del bloque. */
.taller::before,
.taller::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.taller::before {
  inset: 1rem;
  border: 3px solid var(--rosa-300);
}
.taller::after {
  inset: 1.6rem;
  border: 1px solid var(--rosa-300);
}
.taller .contenedor {
  position: relative;
  padding-inline: max(var(--margen), 2.4rem);
}
.taller .rotulo {
  color: var(--manta-300);
}
.taller .rotulo span {
  color: var(--rosa-300);
}
.taller h2 {
  font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.75rem);
  text-transform: uppercase;
  color: var(--manta);
  -webkit-text-stroke: 2px var(--tinta);
  paint-order: stroke fill;
  text-shadow: var(--bloque-tinta);
}
.taller h2 em {
  font-style: normal;
  color: var(--rosa-300);
}
.taller :focus-visible {
  outline-color: var(--maiz);
}

.taller-encabezado {
  max-width: 52rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.taller-encabezado > p:last-child {
  margin-top: 1.4rem;
  font-size: 1.1875rem;
  color: var(--manta-200);
}

.taller-notas {
  columns: 4 14rem;
  column-gap: clamp(2rem, 3.5vw, 3rem);
  column-rule: 1px solid rgb(246 240 228 / 0.28);
}
.taller-notas p {
  break-inside: avoid;
  padding-bottom: 1.6rem;
  font-size: 1.0313rem;
  line-height: 1.55;
}
.taller-notas strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--titulos);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

/* Contacto -------------------------------------------------------------------- */

.contacto {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 3px double var(--vino);
}
.contacto-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.contacto-entrada {
  max-width: 30rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
}
.contacto-registro {
  margin-top: 1rem;
  color: var(--tenue);
}
.contacto-registro a {
  color: var(--rosa-600);
  font-weight: 700;
}
.contacto-vias {
  margin: 2.25rem 0 0;
}
.contacto-vias div {
  padding-block: 0.9rem;
  border-top: 1px solid var(--manta-300);
}
.contacto-vias dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.contacto-vias dd {
  margin: 0.25rem 0 0;
  font-family: var(--titulos);
  font-size: 1.85rem;
  line-height: 1.15;
}
.contacto-vias dd a {
  text-decoration: none;
}
.contacto-vias dd a:hover {
  text-decoration: underline;
  text-decoration-color: var(--rosa-600);
}
.contacto-vias small {
  display: block;
  margin-top: 0.3rem;
  font: 600 0.9375rem/1.4 var(--texto);
}
.contacto-vias small a {
  text-decoration: underline;
}

/* El formulario, como una lámina con filete. */
.formulario {
  padding: clamp(0.5rem, 2vw, 1.5rem);
  border: 24px solid transparent;
  border-image: url('/img/filete.svg') 24 stretch;
  background: #fff padding-box;
}
.formulario h3 {
  margin-bottom: 1.3rem;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--rosa-600);
}

.campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}
.campo {
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.campo--ancho {
  grid-column: 1 / -1;
}
.campo label {
  font-size: 0.9375rem;
  font-weight: 700;
}
.campo label span {
  font-weight: 450;
  color: var(--tenue);
}
.campo input,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1.5px solid var(--manta-500);
  border-radius: 3px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
}
.campo textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.campo input:focus-visible,
.campo textarea:focus-visible {
  outline-offset: 1px;
  border-color: var(--tinta);
  background: #fff;
}
.campo [aria-invalid='true'] {
  border-color: #b3261e;
  background: #fff6f4;
}
.campo .error {
  font-size: 0.875rem;
  font-weight: 600;
  color: #9c1c15;
}
.campo .error:empty {
  display: none;
}

/* Trampa para robots: fuera de la vista y del foco, nunca display:none. */
.trampa {
  position: absolute;
  left: -999rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.acepto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.acepto input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--rosa-600);
}
.acepto .error {
  grid-column: 2;
  font-size: 0.875rem;
  font-weight: 600;
  color: #9c1c15;
}
.acepto .error:empty {
  display: none;
}

.formulario-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}

.estado {
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--tinta);
  border-radius: 3px;
  font-size: 0.975rem;
  font-weight: 550;
}
.estado:empty {
  display: none;
}
.estado[data-tipo='bien'] {
  background: #e6efe0;
}
.estado[data-tipo='mal'] {
  background: var(--rosa-100);
}

/* Pie ------------------------------------------------------------------------ */

.pie {
  padding-block: 3.5rem 2.5rem;
  border-top: 0.45rem solid var(--vino);
  background: var(--tinta);
  color: var(--manta-300);
  font-size: 0.9375rem;
}
.pie-rejilla {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.pie .marca img {
  height: 3rem;
}
.pie-lema {
  max-width: 22rem;
  margin-top: 1rem;
}
.pie ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pie h2 {
  margin-bottom: 0.75rem;
  font: 700 0.75rem/1.4 var(--texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--manta);
}
.pie a {
  text-decoration: none;
}
.pie a:hover {
  color: var(--manta);
  text-decoration: underline;
}
.pie :focus-visible {
  outline-color: var(--maiz);
}
.pie-legal {
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tinta-700);
  font-size: 0.875rem;
}

/* Aviso de cookies ----------------------------------------------------------- */

.cookies {
  position: fixed;
  z-index: 20;
  left: 1rem;
  bottom: 1rem;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.2rem 1.3rem 1.35rem;
  border: 2px solid var(--tinta);
  border-radius: 2px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--vino);
  color: var(--tinta);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.cookies a {
  font-weight: 700;
  white-space: nowrap;
}
.cookies-acciones {
  display: flex;
  gap: 0.9rem;
  margin-top: 1rem;
}

/* Un botón que se lee como enlace (abre las preferencias de cookies). */
.enlace-boton {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.enlace-boton:hover {
  text-decoration: underline;
}
.pie .enlace-boton:hover {
  color: var(--manta);
}
.legal .enlace-boton {
  color: var(--rosa-600);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

/* Páginas legales y de aviso ---------------------------------------------------- */

.legal {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
}
.legal-cuerpo {
  max-width: 44rem;
}
.legal h1 {
  font-size: clamp(2.6rem, 1.4rem + 4vw, 4.2rem);
}
.legal-fecha {
  margin-top: 1.1rem;
  color: var(--tenue);
  font-size: 0.975rem;
}
.legal-resumen {
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  border-left: 0.4rem solid var(--rosa);
  background: var(--papel);
}
.legal h2 {
  margin-top: 2.8rem;
  font-size: 1.9rem;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta);
}
.legal h3 {
  margin-top: 1.6rem;
  font-family: var(--texto);
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0;
}
.legal p,
.legal ul,
.legal ol,
.legal table {
  margin-top: 0.9rem;
}
.legal ul,
.legal ol {
  padding-left: 1.3rem;
}
.legal li + li {
  margin-top: 0.4rem;
}
.legal a {
  color: var(--rosa-600);
  font-weight: 700;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.975rem;
}
.legal th,
.legal td {
  padding: 0.7rem 0.8rem 0.7rem 0;
  border-bottom: 1px solid var(--manta-300);
  text-align: left;
  vertical-align: top;
}
.legal th {
  border-bottom: 2px solid var(--tinta);
  font-weight: 700;
}
.legal-tabla {
  overflow-x: auto;
}
.legal code {
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--manta-200);
  font-size: 0.92em;
}

.aviso-pagina {
  padding-block: clamp(4rem, 12vw, 9rem);
}
.aviso-pagina h1 {
  max-width: 44rem;
  font-size: clamp(2.8rem, 1.4rem + 5vw, 5.4rem);
}
.aviso-pagina p {
  max-width: 34rem;
  margin-top: 1.6rem;
  font-size: 1.15rem;
}
.aviso-pagina p a {
  color: var(--rosa-600);
  font-weight: 700;
}
.aviso-pagina .boton {
  margin-top: 2.25rem;
}

/* Pantallas medianas y angostas ---------------------------------------------- */

@media (max-width: 66rem) {
  .cabecera nav {
    display: none;
  }
  .cabecera-acciones {
    margin-left: auto;
  }
}

@media (max-width: 56rem) {
  .encabezado,
  .variantes-rejilla,
  .contacto-rejilla {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Los pasos: placa y texto arriba, la pantalla abajo a todo lo ancho. */
  .paso-rejilla,
  .paso--invertido .paso-rejilla {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 2rem 1rem;
  }
  .paso-num span {
    width: 3.1rem;
    height: 3.1rem;
    font-size: 1.95rem;
  }
  .paso-num::after {
    top: 4.2rem;
    left: 1.45rem;
  }
  .paso-texto,
  .paso--invertido .paso-texto {
    grid-column: 2;
    grid-row: 1;
  }
  .paso-rejilla > figure,
  .paso--invertido .paso-rejilla > figure {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .paso-num::after,
  .paso:last-child .paso-num::after {
    bottom: 0;
  }
  .paso--invertido .pantalla-marco {
    box-shadow: var(--plancha) var(--plancha) 0 var(--color-plancha, var(--vino));
  }
  .pantalla,
  .cuenta-lamina {
    margin-right: var(--plancha);
  }
  .pantalla--telefono {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    margin-right: 0;
  }
  .mensaje {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: 19rem;
    margin: 0 0 -1.5rem;
  }
  .telefono {
    grid-column: 1;
    grid-row: 2;
    width: min(17.5rem, 82%);
    margin-left: 18%;
  }
  .pantalla--telefono figcaption {
    justify-self: start;
  }

  .indice-seccion .encabezado {
    margin-bottom: 2rem;
  }
}

@media (max-width: 40rem) {
  :root {
    --plancha: 0.55rem;
    --bloque-vino: 1px 1px 0 var(--vino), 2px 2px 0 var(--vino), 3px 3px 0 var(--vino), 4px 4px 0 var(--vino);
    --bloque-tinta: 1px 1px 0 var(--tinta), 2px 2px 0 var(--tinta), 3px 3px 0 var(--tinta), 4px 4px 0 var(--tinta);
    --bloque-maiz: 1px 1px 0 var(--maiz), 2px 2px 0 var(--maiz), 3px 3px 0 var(--maiz), 4px 4px 0 var(--maiz);
  }
  /* Las pantallas anchas se recortan en lugar de encogerse hasta no leerse. */
  .pantalla--recorte .captura {
    width: var(--recorte-ancho, 37rem);
    max-width: none;
    margin-left: var(--recorte, 0);
  }
  .paso .pantalla--recorte {
    --recorte-ancho: 52rem;
    --recorte: -6rem;
  }
  .seccion h2,
  .contacto h2,
  .taller h2,
  .legal h1,
  .aviso-pagina h1 {
    -webkit-text-stroke-width: 1px;
  }
  .muro {
    padding-inline: 0.5rem;
    border-width: 18px;
  }
  .muro-marca {
    position: static;
    margin: 0 auto 1rem;
  }
  .antetitulo::before,
  .antetitulo::after {
    display: none;
  }
  .flecha {
    width: 5.5rem;
    transform: rotate(90deg);
    margin: 0 0 0.25rem;
  }
  .portada-acciones {
    flex-direction: column;
    gap: 0.9rem;
  }
  .taller::before {
    inset: 0.5rem;
  }
  .taller::after {
    inset: 0.9rem;
  }
}

@media (max-width: 34rem) {
  body {
    font-size: 1rem;
  }
  .cabecera-fila {
    gap: 0.75rem;
  }
  .cabecera-acciones {
    gap: 0.9rem;
  }
  .cabecera-acciones .largo {
    display: none;
  }
  .cabecera-acciones .corto {
    display: inline;
  }
  .marca img {
    height: 2.4rem;
  }
  .antetitulo {
    letter-spacing: 0.1em;
  }
  .portada-acciones .boton,
  .formulario-acciones .boton {
    width: 100%;
  }
  .campos {
    grid-template-columns: minmax(0, 1fr);
  }
  .cuenta {
    padding-inline: 1.1rem;
  }
  .cuenta-cliente {
    max-width: none;
    margin-top: 3rem;
  }
  .sello {
    top: 1rem;
  }
  .indice li {
    padding-block: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .boton {
    transition: none;
  }
  .boton:hover,
  .boton--grande:hover {
    transform: none;
  }
}

@media print {
  .cabecera nav,
  .cabecera-acciones,
  .formulario,
  .pie nav,
  .flecha {
    display: none;
  }
  body {
    background: #fff;
  }
  .paso--rosa,
  .taller,
  .tecnicas,
  .pie {
    background: #fff;
    color: var(--tinta);
  }
}