@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("archivo.woff2") format("woff2-variations"), url("archivo.woff2") format("woff2");
}

:root {
  --burdeos: #7b1e2e;
  --burdeos-osc: #5c1421;
  --blanco: #ffffff;
  --acero: #e8ebed;
  --acero-2: #d5dade;
  --grafito: #1d2125;
  --gris: #59636c;
  --linea: #c3cad0;
  --medida: 68ch;
  --ancho: 1180px;
}

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

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

body {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--grafito);
  background: var(--blanco);
  font-stretch: 100%;
}

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

a { color: var(--burdeos); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--burdeos-osc); text-decoration-thickness: 2px; }

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

h1, h2, h3 {
  font-stretch: 72%;
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.45rem; font-stretch: 80%; line-height: 1.15; }
p { margin: 0 0 1em; max-width: var(--medida); }

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--grafito); color: var(--blanco); padding: 0.6rem 1rem; z-index: 50;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* Cabecera */
.cabecera {
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
  position: sticky; top: 0; z-index: 20;
}
.cabecera .envoltura {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.5rem;
}
.marca {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  text-decoration: none; color: var(--grafito);
  font-stretch: 70%; line-height: 1;
  white-space: nowrap;
}
.marca b { font-size: 1.85rem; font-weight: 850; color: var(--burdeos); letter-spacing: -0.02em; }
.marca span { font-size: 1.1rem; font-weight: 500; color: var(--gris); }
.marca:hover { color: var(--grafito); }

.menu { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
.menu a {
  white-space: nowrap;
  color: var(--grafito); text-decoration: none; font-size: 0.97rem; font-weight: 500;
  padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--burdeos); color: var(--grafito); }

.boton {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-weight: 650; font-stretch: 90%;
  padding: 0.8rem 1.3rem; border-radius: 3px;
  text-decoration: none; border: 2px solid var(--burdeos);
  background: var(--burdeos); color: var(--blanco); line-height: 1.1;
}
.boton:hover { background: var(--burdeos-osc); border-color: var(--burdeos-osc); color: var(--blanco); text-decoration: none; }
.boton.secundario { background: transparent; color: var(--burdeos); }
.boton.secundario:hover { background: var(--burdeos); color: var(--blanco); }
.boton svg { width: 1.15em; height: 1.15em; flex: none; }
.cabecera .boton { padding: 0.6rem 1rem; }

.menu-movil { display: none; }

@media (max-width: 1080px) {
  .menu { display: none; }
  .cabecera .boton { margin-left: auto; }
  .menu-movil { display: block; border-top: 1px solid var(--linea); background: var(--blanco); }
  .menu-movil .envoltura { display: flex; gap: 1.1rem; overflow-x: auto; padding: 0.55rem 0; scrollbar-width: none; }
  .menu-movil a { white-space: nowrap; color: var(--grafito); text-decoration: none; font-size: 0.95rem; }
  .menu-movil a[aria-current="page"] { color: var(--burdeos); font-weight: 650; }
}
@media (max-width: 520px) {
  .cabecera .boton .num { display: none; }
  .marca b { font-size: 1.6rem; }
  .marca span { font-size: 1rem; }
}

/* Portada */
.portada { background: var(--acero); border-bottom: 1px solid var(--linea); }
.portada .envoltura {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.portada h1 { max-width: 15ch; }
.portada .entrada { font-size: 1.2rem; color: var(--grafito); max-width: 46ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.zona-corta { margin-top: 1.25rem; color: var(--gris); font-size: 0.97rem; }

@media (max-width: 860px) {
  .portada .envoltura { grid-template-columns: 1fr; }
}

/* Placa de características */
.placa {
  position: relative;
  background: linear-gradient(160deg, #fdfdfd 0%, #f1f3f4 100%);
  border: 2px solid var(--grafito);
  border-radius: 6px;
  padding: 2.1rem 2rem 1.6rem;
  box-shadow: 0 1px 0 #fff inset, 6px 6px 0 var(--acero-2);
  font-stretch: 85%;
}
.placa::before, .placa::after, .placa .tornillos::before, .placa .tornillos::after {
  content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fafafa 0 25%, #9aa3aa 60%, #6d767d 100%);
  box-shadow: 0 0 0 1px #6d767d;
}
.placa::before { top: 10px; left: 10px; }
.placa::after { top: 10px; right: 10px; }
.placa .tornillos::before { bottom: 10px; left: 10px; }
.placa .tornillos::after { bottom: 10px; right: 10px; }
.placa h2 {
  font-size: 1.15rem; font-stretch: 75%; font-weight: 750; margin: 0 0 0.9rem;
  padding-bottom: 0.6rem; border-bottom: 2px solid var(--grafito);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.placa h2 small { font-weight: 500; color: var(--gris); font-size: 0.9rem; }
.placa dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.placa dt, .placa dd {
  margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--linea);
  font-size: 0.98rem; line-height: 1.3;
}
.placa dt { color: var(--gris); padding-right: 1.25rem; }
.placa dd { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.placa dl > :nth-last-child(-n+2) { border-bottom: 0; }
.placa .pie { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--gris); max-width: none; }

/* Secciones */
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion.gris { background: var(--acero); }
.seccion > .envoltura > h2 { max-width: 22ch; }
.seccion .intro { font-size: 1.12rem; color: var(--gris); margin-bottom: 2.25rem; }

/* Lista de servicios */
.servicios { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--grafito); }
.servicios li {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr) 15rem;
  gap: 1.5rem 2.5rem; align-items: baseline;
  padding: 1.6rem 0; border-bottom: 1px solid var(--linea);
}
.servicios h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); font-stretch: 70%; }
.servicios h3 a { color: var(--grafito); text-decoration: none; }
.servicios h3 a:hover { color: var(--burdeos); }
.servicios p { margin: 0; color: var(--gris); }
.servicios .ver { font-weight: 600; text-align: right; }
@media (max-width: 760px) {
  .servicios li { grid-template-columns: 1fr; gap: 0.5rem; }
  .servicios .ver { text-align: left; }
}

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: paso; }
.pasos li { counter-increment: paso; padding: 1.25rem 1.5rem 0 0; border-top: 2px solid var(--grafito); position: relative; }
.pasos li::before {
  content: counter(paso); display: block;
  font-stretch: 62%; font-weight: 800; font-size: 3rem; line-height: 1; color: var(--burdeos); margin-bottom: 0.6rem;
}
.pasos h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.pasos p { color: var(--gris); font-size: 0.98rem; margin: 0; }
@media (max-width: 860px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 520px) { .pasos { grid-template-columns: 1fr; } }

/* Dos columnas */
.columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .columnas { grid-template-columns: 1fr; } }

.lista-check { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lista-check li { padding: 0.55rem 0 0.55rem 1.9rem; border-bottom: 1px solid var(--linea); position: relative; max-width: var(--medida); }
.lista-check li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.95rem;
  width: 0.75rem; height: 0.42rem; border-left: 2.5px solid var(--burdeos); border-bottom: 2.5px solid var(--burdeos);
  transform: rotate(-45deg);
}

.zonas { columns: 3 12rem; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.zonas li { padding: 0.3rem 0; break-inside: avoid; }

/* Cabecera de servicio */
.cabecera-servicio { background: var(--acero); border-bottom: 1px solid var(--linea); }
.cabecera-servicio .envoltura { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.migas { font-size: 0.92rem; color: var(--gris); margin-bottom: 1.2rem; }
.migas a { color: var(--gris); }
.cabecera-servicio h1 { max-width: 20ch; }
.cabecera-servicio .entrada { font-size: 1.2rem; max-width: 56ch; }

.texto h2 { margin-top: 0.2em; }
.texto h3 { margin-top: 1.6em; }
.texto ul { padding-left: 1.2rem; max-width: var(--medida); }
.texto li { margin-bottom: 0.4rem; }

.aviso {
  border-left: 4px solid var(--burdeos); background: var(--blanco);
  padding: 1rem 1.25rem; margin: 1.5rem 0; max-width: var(--medida);
}
.seccion.gris .aviso { background: var(--blanco); }
.aviso p:last-child { margin-bottom: 0; }

/* Preguntas */
.preguntas { border-top: 2px solid var(--grafito); max-width: 52rem; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-weight: 650; font-size: 1.12rem; font-stretch: 88%;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 1.45rem; width: 0.7rem; height: 0.7rem;
  border-right: 2.5px solid var(--burdeos); border-bottom: 2.5px solid var(--burdeos);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.preguntas details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.preguntas details > div { padding: 0 0 1.2rem; color: var(--grafito); }
.preguntas details > div p:last-child { margin-bottom: 0; }

/* Llamada a la acción */
.contacto-bloque { background: var(--burdeos); color: var(--blanco); }
.contacto-bloque .envoltura { padding-block: clamp(2.75rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 2rem; align-items: center; }
.contacto-bloque h2 { color: var(--blanco); margin-bottom: 0.3em; }
.contacto-bloque p { color: #f3dfe2; margin: 0; }
.contacto-bloque .acciones { margin: 0; }
.contacto-bloque .boton { background: var(--blanco); color: var(--burdeos); border-color: var(--blanco); }
.contacto-bloque .boton:hover { background: #f3dfe2; border-color: #f3dfe2; color: var(--burdeos-osc); }
.contacto-bloque .boton.secundario { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.contacto-bloque .boton.secundario:hover { background: var(--blanco); color: var(--burdeos); }
.contacto-bloque :focus-visible { outline-color: var(--blanco); }
@media (max-width: 760px) { .contacto-bloque .envoltura { grid-template-columns: 1fr; } }

/* Contacto */
.datos { margin: 0; display: grid; grid-template-columns: max-content 1fr; border-top: 2px solid var(--grafito); max-width: 40rem; }
.datos dt, .datos dd { margin: 0; padding: 0.85rem 0; border-bottom: 1px solid var(--linea); }
.datos dt { color: var(--gris); padding-right: 2rem; }
.datos dd { font-weight: 600; }

/* Pie */
.pie-sitio { background: var(--grafito); color: #c9d0d6; font-size: 0.95rem; }
.pie-sitio .envoltura { padding-block: 3rem 6rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.pie-sitio a { color: var(--blanco); }
.pie-sitio h2 { font-size: 1.15rem; color: var(--blanco); font-stretch: 80%; }
.pie-sitio ul { list-style: none; padding: 0; margin: 0; }
.pie-sitio li { padding: 0.2rem 0; }
.pie-sitio .marca b { color: #e7b9c1; }
.pie-sitio .marca span { color: #c9d0d6; }
.pie-sitio p { max-width: 40ch; }
@media (max-width: 760px) { .pie-sitio .envoltura { grid-template-columns: 1fr; } }

/* Barra fija en móvil */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .barra-movil {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    border-top: 1px solid var(--linea); background: var(--blanco);
    padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom)); gap: 0.5rem;
  }
  .barra-movil .boton { padding: 0.75rem 0.5rem; }
  body { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}