/* Ferretería La Esquina — la página en construcción.
 *
 * Los colores son los de la marca (`cerebro/trabajos/ferreteria-la-esquina/marca`): negro, amarillo y crema.
 * El logo solo va sobre fondo claro, así que no hay modo oscuro.
 *
 * Contrastes medidos (WCAG, mínimo 4,5:1 para texto):
 *   negro sobre amarillo ........ 10,5:1  (el botón)
 *   negro sobre crema ........... 16,3:1
 *   texto-suave sobre crema ...... 8,8:1
 *   texto-suave sobre blanco ..... 9,4:1
 * ⚠️ El amarillo NUNCA va como color de texto sobre fondo claro: da menos de 2:1.
 */

:root {
  --negro: #1a1a1a;
  --amarillo: #fac11e;
  --crema: #faf7f2;
  --blanco: #ffffff;
  --texto: var(--negro);
  --texto-suave: #4a4640;
  --radio: 14px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* La marca usa Arial Black e Impact. En Android y iOS no está Arial Black: ahí cae a la fuente del
     sistema en su peso más grueso, que mantiene el carácter. */
  --fuente-titulo: "Arial Black", "Arial Bold", Gadget, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--crema);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

::selection {
  background: var(--amarillo);
  color: var(--negro);
}

a {
  color: var(--negro);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 3px;
}

a:focus-visible {
  outline: 3px solid var(--negro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* La cinta de obra, arriba y abajo: decorativa (va con aria-hidden). */
.cinta {
  flex: none;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--negro) 0 12px, var(--amarillo) 12px 24px);
}

.hoja {
  flex: 1;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding: 1.75rem 1rem 3rem;
}

.marca {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* El logo es el REDONDO (decisión de Lucho, 2026-09-26): un sello blanco con el aro de pincel. */
.logo {
  width: min(80vw, 20rem);
}

.logo-chico {
  width: min(52vw, 12rem);
}

.marca-enlace {
  display: inline-block;
}

/* La tarjeta del mensaje principal: borde negro y sombra dura, como las cajas del logo. */
.aviso {
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: var(--radio);
  box-shadow: 5px 5px 0 var(--negro);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

h1 {
  margin: 0 0 0.75rem;
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bajada {
  max-width: 40ch;
  margin: 0 auto 1.5rem;
  color: var(--texto-suave);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  background: var(--amarillo);
  color: var(--negro);
  border: 2px solid var(--negro);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--negro);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  touch-action: manipulation;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.boton:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--negro);
}

.boton:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--negro);
}

.boton:focus-visible {
  outline-offset: 5px;
  border-radius: 12px;
}

.llamar {
  margin: 1.1rem 0 0;
  color: var(--texto-suave);
}

/* En el celular es el segundo camino de contacto: el área de toque crece hasta 44 px sin mover el renglón. */
.llamar a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.datos {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.25rem;
}

/* Rótulo arriba y raya negra, como el pie «MELO · CERRO LARGO · URUGUAY» del logo original. */
.bloque {
  border-top: 3px solid var(--negro);
  padding-top: 0.9rem;
}

h2 {
  margin: 0 0 0.8rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.direccion {
  display: flex;
  gap: 0.6rem;
  font-size: 1.0625rem;
  font-style: normal;
  line-height: 1.45;
}

.direccion .icono {
  margin-top: 0.1em;
}

/* Que el corte de línea no parta el nombre de una calle («Darío / Silva»). */
.direccion span {
  text-wrap: balance;
}

/* El horario va como la dirección: ícono a la izquierda y el dato al lado. */
.horario {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.horario .icono {
  margin-top: 0.1em;
}

.rotulo {
  margin: 0;
  font-weight: 700;
}

.horas {
  margin: 0.2rem 0 0;
}

/* Cada tramo en un renglón: los días con ancho fijo para que las horas queden alineadas en columna. Si no
   entran (letra agrandada, pantalla muy angosta), la hora baja abajo en vez de desbordar. */
.horas div {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
}

.horas dt {
  min-width: 9.5em;
  color: var(--texto-suave);
}

.horas dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  margin-top: 0.4rem;
  font-weight: 700;
}

.enlace-flecha .icono {
  transition: transform 0.15s ease-out;
}

.enlace-flecha:hover .icono {
  transform: translateX(3px);
}

.rubros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rubros li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

/* La viñeta: un cuadradito amarillo con borde negro, como las cajas del logo. */
.rubros li::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--amarillo);
  border: 2px solid var(--negro);
}

.icono {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.pie {
  padding: 1.25rem 1rem 1.5rem;
  color: var(--texto-suave);
  font-size: 0.875rem;
  text-align: center;
}

.pie p {
  margin: 0;
}

/* `.pie .redes` y no `.redes` a secas: `.pie p` tiene más peso y le ganaría el margen. */
.pie .redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  margin-bottom: 0.35rem;
}

/* El área de toque llega a 44 px sin separar el renglón del de abajo. */
.redes a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--negro);
  font-weight: 700;
}

@media (max-width: 29.99rem) {
  .boton {
    width: 100%;
  }
}

@media (min-width: 40rem) {
  .hoja {
    padding-top: 3rem;
  }

  .aviso {
    padding: 2.25rem 2.5rem;
  }

  .datos {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boton,
  .enlace-flecha .icono {
    transition: none;
  }

  .boton:hover,
  .boton:active,
  .enlace-flecha:hover .icono {
    transform: none;
  }
}