/* Construye Agentes. Concepto: el taller mecánico.
   Rótulo pintado, orden de trabajo, calcomanías. Sombras duras y desplazadas,
   nunca difuminadas: eso es lo que separa un cartel impreso de una interfaz
   generada. Sin esquinas redondeadas, sin degradados, sin iconos de librería. */

:root {
  --senal:  #F5C518;
  --crudo:  #F7F3EA;
  --tinta:  #141210;
  --rojo:   #D9401F;
  --azul:   #17457E;
  --gris:   #6B655C;
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --texto:   "Bricolage Grotesque", -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crudo);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--senal); color: var(--tinta); }
a { color: var(--rojo); }

.marco { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.angosto { max-width: 680px; }

/* Cinta de peligro: franjas duras, sin degradado */
.cinta {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg, var(--tinta) 0 16px, var(--senal) 16px 32px
  );
}

/* Cabecera */
header .marco {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; padding: 18px 20px;
}
.logo {
  font-family: var(--display);
  font-weight: 800; font-size: 21px;
  letter-spacing: -0.02em; text-transform: uppercase;
  line-height: 1;
}
.logo span { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; color: var(--gris); margin-top: 3px; }
.emisor { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }

/* Rótulo principal */
.rotulo { background: var(--senal); border-top: 3px solid var(--tinta); border-bottom: 3px solid var(--tinta); }
.rotulo .marco { padding-top: 64px; padding-bottom: 64px; position: relative; }
h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 7vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 26px;
  max-width: 17ch;
  text-transform: uppercase;
}
h1 em { font-style: normal; color: var(--rojo); }
.bajada { font-size: clamp(19px, 2.2vw, 23px); font-weight: 500; margin: 0; max-width: 40ch; line-height: 1.4; }

/* Calcomanía */
.calco {
  display: inline-block;
  background: var(--tinta); color: var(--senal);
  font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 16px; margin-bottom: 22px;
  transform: rotate(-1.6deg);
  box-shadow: 5px 5px 0 var(--rojo);
}

/* Botón: sombra dura desplazada, como una calcomanía pegada */
.boton {
  display: inline-block;
  font-family: var(--display); font-weight: 800;
  font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--crudo); background: var(--rojo);
  border: 3px solid var(--tinta); border-radius: 0;
  padding: 17px 30px; margin-top: 30px;
  text-decoration: none; cursor: pointer;
  box-shadow: 7px 7px 0 var(--tinta);
  transition: transform 0.08s, box-shadow 0.08s;
}
.boton:hover { transform: translate(3px, 3px); box-shadow: 4px 4px 0 var(--tinta); }
.boton:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--tinta); }

/* Secciones */
section.bloque { padding: 68px 0; border-bottom: 3px solid var(--tinta); }
.rubro {
  font-family: var(--display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 14px;
}
h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4.2vw, 46px); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0 0 28px; max-width: 20ch;
  text-transform: uppercase;
}

/* Orden de trabajo: tabla con guías punteadas */
.orden { border-top: 3px solid var(--tinta); }
.renglon {
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--tinta);
}
.hora {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  flex: 0 0 82px; color: var(--azul);
}
.tarea { flex: 1 1 auto; font-weight: 500; }
.tarea small { display: block; font-weight: 400; color: var(--gris); font-size: 15px; margin-top: 3px; }

/* Listas de taller */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  padding: 13px 0 13px 40px; border-bottom: 1px solid var(--tinta);
  position: relative; font-weight: 500;
}
.lista li::before {
  content: "✓"; position: absolute; left: 0; top: 11px;
  font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--rojo);
}
.lista.traer li::before { content: "□"; color: var(--azul); }
.lista.no li::before { content: "✕"; color: var(--gris); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
@media (max-width: 760px) { .dos { grid-template-columns: 1fr; gap: 40px; } }

/* Etiqueta de precio */
.precio {
  display: inline-block; background: var(--crudo);
  border: 3px solid var(--tinta); padding: 22px 28px;
  box-shadow: 8px 8px 0 var(--senal);
}
.precio .cifra { font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -0.03em; }
.precio .nota { font-size: 15px; color: var(--gris); margin-top: 8px; }

.trato { background: var(--azul); color: var(--crudo); padding: 30px; margin-top: 34px; max-width: 48ch; }
.trato p { margin: 0; font-weight: 500; font-size: 19px; }
.trato strong { color: var(--senal); }

footer { background: var(--tinta); color: var(--crudo); }
footer .marco { padding: 34px 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
footer a { color: var(--senal); }

/* Lista del primer grupo */
.apunte { margin-top: 40px; max-width: 480px; }
.apunte h3 { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 10px; }
.apunte > p { margin: 0 0 26px; max-width: 44ch; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
input[type=text], input[type=email], select {
  font-family: var(--texto); font-weight: 500; font-size: 17px;
  color: var(--tinta); background: var(--crudo);
  border: 3px solid var(--tinta); border-radius: 0;
  padding: 12px 13px; width: 100%; appearance: none;
}
select:invalid { color: var(--gris); }
input:focus, select:focus { outline: none; box-shadow: 5px 5px 0 var(--senal); }
.acepto { display: flex; gap: 11px; align-items: flex-start; margin: 22px 0 0; font-size: 15px; color: var(--gris); }
.acepto input { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; border: 3px solid var(--tinta); }
#gracias { margin-top: 20px; font-weight: 600; font-size: 18px; max-width: 42ch; }


/* ---- Celular primero ---- */

* { -webkit-tap-highlight-color: transparent; }

.marco { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* Barra fija: en el teléfono el botón se va con el scroll y la página es larga.
   Borde duro arriba y cero radio, como el resto del cartel. */
.barra-fija { display: none; }
@media (max-width: 820px) {
  .barra-fija {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--senal); border-top: 3px solid var(--tinta);
    padding: 13px max(20px, env(safe-area-inset-left));
    padding-bottom: calc(13px + env(safe-area-inset-bottom));
  }
  .barra-fija b { font-family: var(--display); font-weight: 800; font-size: 22px; }
  .barra-fija span { font-size: 13px; font-weight: 600; color: var(--tinta); opacity: 0.75; }
  .barra-fija a {
    font-family: var(--display); font-weight: 800; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--crudo); background: var(--rojo); text-decoration: none;
    border: 3px solid var(--tinta); padding: 12px 20px;
    box-shadow: 4px 4px 0 var(--tinta);
  }
  body { padding-bottom: 86px; }
}

@media (max-width: 420px) {
  section.bloque { padding: 52px 0; }
  .rotulo .marco { padding-top: 48px; padding-bottom: 52px; }
  .boton { width: 100%; text-align: center; }
  .renglon { flex-direction: column; gap: 4px; }
  .hora { flex: 0 0 auto; }
  .acepto input { width: 26px; height: 26px; }
  .precio .cifra { font-size: 44px; }
}

.bajada strong { font-weight: 800; box-shadow: inset 0 -0.42em 0 rgba(20,18,16,0.14); }