@font-face { font-family: "Barlow"; src: url("fuentes/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fuentes/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fuentes/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fuentes/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fuentes/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fondo: #f6f1e7;
  --papel: #fffdf8;
  --tinta: #1b2436;
  --tinta-suave: #515b6e;
  --rojo: #c8202a;
  --rojo-oscuro: #a3161f;
  --marino: #1f3552;
  --linea: #ddd4c3;
  --whatsapp: #1c8048;
  --titulos: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--rojo-oscuro); text-underline-offset: 3px; }
a:hover { color: var(--rojo); }

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

h1, h2, h3 { font-family: var(--titulos); line-height: 1.02; margin: 0; }
h1 { font-weight: 700; font-size: clamp(2.5rem, 7vw, 4.5rem); text-transform: uppercase; letter-spacing: 0.005em; }
h2 { font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 2.9rem); text-transform: uppercase; }
h3 { font-weight: 600; font-size: 1.55rem; line-height: 1.1; }
p { margin: 0 0 1em; }

.ancho { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.oculto { position: absolute; left: -9999px; }
.rojo { color: var(--rojo); }

.rotulo {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo);
  margin: 0 0 0.6rem;
}

.bajada { font-size: 1.2rem; color: var(--tinta-suave); max-width: 34em; }

/* Franja superior y encabezado */

.franja { background: var(--marino); color: #efe9dc; font-size: 0.9rem; }
.franja .ancho { display: flex; justify-content: space-between; gap: 16px; padding-top: 7px; padding-bottom: 7px; }
.franja span:last-child { white-space: nowrap; }

.encabezado { background: var(--papel); border-bottom: 1px solid var(--linea); }
.encabezado .ancho { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca svg { width: 54px; height: auto; flex: none; }
.marca-nombre { display: block; font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--rojo); letter-spacing: -0.01em; }
.marca-zona { display: block; font-family: var(--titulos); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--marino); margin-top: 3px; }

.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  padding: 6px 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.menu a:hover { border-bottom-color: var(--linea); }
.menu a[aria-current="page"] { border-bottom-color: var(--rojo); }

.llamar { text-decoration: none; color: var(--tinta); text-align: right; line-height: 1.15; white-space: nowrap; }
.llamar small { display: block; font-size: 0.8rem; color: var(--tinta-suave); }
.llamar strong { font-family: var(--titulos); font-weight: 700; font-size: 1.45rem; }

/* Botones */

.boton {
  display: inline-block;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 15px 22px;
  border: 2px solid var(--rojo);
  border-radius: 3px;
  background: var(--rojo);
  color: #fff;
  cursor: pointer;
}
.boton:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); color: #fff; }
.boton--linea { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.boton--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); }
.boton--whatsapp:hover { background: #166639; border-color: #166639; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

/* Secciones */

.seccion { padding: 72px 0; }
.seccion--papel { background: var(--papel); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion--marino { background: var(--marino); color: #f3eee2; }
.seccion--marino .rotulo { color: #ff9a8f; }
.seccion--marino .bajada { color: #cfd6e2; }
.seccion--marino a:not(.boton) { color: #fff; }

.cabecera { padding: 56px 0 44px; }
.cabecera h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.cabecera .bajada { margin-top: 1rem; }

/* Portada */

.portada { padding: 56px 0 72px; }
.portada .ancho { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.portada .bajada { margin-top: 1.2rem; }

.foto { position: relative; margin: 0; }
.foto img { width: 100%; border: 6px solid #fff; box-shadow: 0 1px 0 var(--linea), 0 18px 40px -22px rgba(27, 36, 54, 0.55); }
.foto figcaption { font-size: 0.9rem; color: var(--tinta-suave); margin-top: 10px; }
.cartel {
  position: absolute;
  left: -14px;
  top: -18px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 10px 14px;
}

/* Lista numerada de servicios */

.lista { list-style: none; margin: 2.2rem 0 0; padding: 0; border-top: 2px solid var(--tinta); counter-reset: item; }
.lista li {
  counter-increment: item;
  display: grid;
  grid-template-columns: 3.2rem 17rem 1fr;
  gap: 8px 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--linea);
}
.lista li::before { content: counter(item, decimal-leading-zero); font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; color: var(--rojo); }
.lista h3 { font-size: 1.6rem; }
.lista p { margin: 0; color: var(--tinta-suave); }

/* Dos columnas */

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.dos--foto { grid-template-columns: 1.4fr 0.6fr; align-items: center; }

.formatos { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.formatos li { font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 10px 14px; border: 2px solid currentColor; }

.renglones { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 2px solid var(--tinta); }
.renglones li { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.renglones strong { font-family: var(--titulos); font-weight: 600; font-size: 1.3rem; display: block; line-height: 1.15; }
.renglones span { color: var(--tinta-suave); }

/* Ficha de datos */

.ficha { margin: 0; border-top: 2px solid var(--tinta); }
.ficha div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.ficha dt { font-family: var(--titulos); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); padding-top: 2px; }
.ficha dd { margin: 0; font-weight: 500; }
.ficha dd small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 0.95rem; }

.mapa { width: 100%; height: 340px; border: 6px solid #fff; box-shadow: 0 1px 0 var(--linea); display: block; }

/* Página Servicios */

.servicio { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px 56px; padding: 40px 0; border-top: 1px solid var(--linea); }
.servicio:first-of-type { border-top: 2px solid var(--tinta); }
.servicio h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
.servicio ul { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--tinta-suave); }
.servicio li { margin-bottom: 0.25rem; }
.servicio li::marker { color: var(--rojo); }

/* Página Insumos */

.rubros { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 2px solid var(--tinta); }
.rubro { padding: 30px 0; border-bottom: 1px solid var(--linea); }
.rubro h2 { font-size: 1.9rem; }
.rubro p { color: var(--tinta-suave); margin: 0.5rem 0 0.8rem; }
.rubro a { font-weight: 600; }

/* Formulario */

.formulario { display: grid; gap: 16px; }
.formulario label { display: grid; gap: 6px; font-weight: 600; font-size: 0.98rem; }
.formulario label small { font-weight: 400; color: var(--tinta-suave); }
.formulario input, .formulario select, .formulario textarea {
  font: inherit;
  font-weight: 400;
  color: var(--tinta);
  background: #fff;
  border: 1.5px solid #b9b09d;
  border-radius: 3px;
  padding: 12px 13px;
  width: 100%;
}
.formulario textarea { min-height: 150px; resize: vertical; }
.formulario .par { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario button { justify-self: start; }
.formulario button[disabled] { opacity: 0.6; cursor: wait; }
.estado { margin: 0; font-weight: 600; }
.estado--bien { color: var(--whatsapp); }
.estado--mal { color: var(--rojo-oscuro); }

/* Pie */

.pie { background: #162236; color: #cfd6e2; padding: 52px 0 96px; font-size: 0.98rem; }
.pie .ancho { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.pie h2 { font-size: 1.15rem; letter-spacing: 0.12em; color: #fff; margin-bottom: 0.7rem; }
.pie p { margin: 0 0 0.35rem; }
.pie a { color: #fff; }
.pie .marca-nombre { color: #fff; }
.pie .marca-zona { color: #ff9a8f; margin-bottom: 0.9rem; }

/* Botón flotante de WhatsApp */

.flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--whatsapp);
  color: #fff;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 13px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}
.flotante:hover { background: #166639; color: #fff; }
.flotante svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .encabezado .ancho { flex-wrap: wrap; gap: 10px 20px; }
  .llamar { margin-left: auto; }
  .menu { order: 3; width: 100%; margin: 0; flex-wrap: wrap; gap: 0 20px; border-top: 1px solid var(--linea); padding-top: 4px; }
  .menu a { padding: 7px 0 4px; font-size: 1.1rem; }
  .portada .ancho, .dos, .dos--foto, .servicio, .rubros { grid-template-columns: 1fr; gap: 28px; }
  .servicio { gap: 12px; padding: 30px 0; }
  .rubros { gap: 0; }
  .portada { padding: 40px 0 52px; }
  .seccion { padding: 52px 0; }
  .cabecera { padding: 40px 0 32px; }
  .cartel { left: -8px; top: -14px; font-size: 1.25rem; }
  .lista li { grid-template-columns: 2.6rem 1fr; }
  .lista p { grid-column: 2; }
  .dos--foto .foto { max-width: 300px; }
  .pie .ancho { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .franja span:first-child { display: none; }
  .franja .ancho { justify-content: center; }
  .marca svg { width: 44px; }
  .marca-nombre { font-size: 1.3rem; }
  .llamar strong { font-size: 1.25rem; }
  .formulario .par { grid-template-columns: 1fr; }
  .ficha div { grid-template-columns: 1fr; gap: 0; }
  .boton { font-size: 1.1rem; padding: 14px 18px; }
}