/* ============================================================
   HERNÁNDEZ & COMPANY — PÁGINAS INTERNAS
   ------------------------------------------------------------
   Cabecera tinta común a todas las páginas + los bloques que
   viven fuera del inicio. Solo tokens de brand.css.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   CABECERA DE PÁGINA
════════════════════════════════════════════════════════════ */
/* El color sale del ajuste por página del theme base (KuiraWeb → cabecera);
   sin él, la tinta de siempre. Así el cotizador va en vino sin campo nuevo. */
.hdz-page-hero {
  position: relative;
  background: var(--hdz-hero-bg-color, var(--hdz-ink));
  color: #fff;
  overflow: hidden;
}

/* Imagen de fondo (KuiraWeb → cabecera de la página), oscurecida
   para que el titular conserve contraste. */
.hdz-page-hero__image {
  position: absolute;
  inset: 0;
  background-image: var(--hdz-hero-bg);
  background-size: cover;
  background-position: center;
  opacity: .3;
}

.hdz-page-hero__inner {
  position: relative;
  padding-block: 72px 68px;
}

.hdz-page-hero__eyebrow {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hdz-gold-soft);
}

.hdz-page-hero__title {
  margin: 0;
  font-family: var(--hdz-font-display);
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 600;
  line-height: 1.1;
  max-width: 26ch;
  color: #fff;
  text-wrap: pretty;
}

.hdz-page-hero__lead {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  max-width: 60ch;
  text-wrap: pretty;
}

.hdz-page-hero--plain .hdz-page-hero__lead { color: var(--hdz-ink-60); }

/* Variante sin fondo: la usa el base cuando la página pide cabecera plana */
.hdz-page-hero--plain {
  background: var(--hdz-cream);
  color: var(--hdz-ink);
}

.hdz-page-hero--plain .hdz-page-hero__title { color: var(--hdz-ink); }
.hdz-page-hero--plain .hdz-page-hero__eyebrow { color: var(--hdz-wine); }

@media (max-width: 640px) {
  .hdz-page-hero__inner { padding-block: 48px 44px; }
}

/* ── Migas ────────────────────────────────────────────────── */
.hdz-crumbs {
  background: var(--hdz-sand);
  border-bottom: 1px solid rgba(26, 22, 20, .09);
  font-size: 13px;
}

.hdz-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding-block: 12px;
}

.hdz-crumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hdz-ink-60);
}

.hdz-crumbs__item a { color: var(--hdz-ink-60); transition: color var(--hdz-t-fast); }
.hdz-crumbs__item a:hover { color: var(--hdz-wine); }
.hdz-crumbs__item.is-current { color: var(--hdz-ink); }
.hdz-crumbs__sep { color: rgba(26, 22, 20, .3); }

/* ════════════════════════════════════════════════════════════
   RELATO CON RETRATO Y CIFRAS
════════════════════════════════════════════════════════════ */
.hdz-story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-block: 76px;
}

.hdz-story__grid--single { grid-template-columns: minmax(0, 68ch); }

.hdz-story__heading {
  margin: 0 0 20px;
  font-family: var(--hdz-font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
}

/* Separación mayor entre apartados que entre párrafos */
.hdz-story__heading + * { margin-top: 0; }
.hdz-story__text + .hdz-story__heading { margin-top: 44px; }

.hdz-story__text {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(26, 22, 20, .78);
}

.hdz-story__text:last-child { margin-bottom: 0; }

/* ── Aside ────────────────────────────────────────────────── */
.hdz-story__portrait {
  border: 1px solid rgba(26, 22, 20, .14);
  padding: 10px;
  margin: 0 0 28px;
}

.hdz-story__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.hdz-story__stats {
  background: var(--hdz-sand);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hdz-story__stat + .hdz-story__stat {
  border-top: 1px solid rgba(26, 22, 20, .12);
  padding-top: 20px;
}

.hdz-story__stat-number {
  font-family: var(--hdz-font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--hdz-wine);
}

.hdz-story__stat-label {
  font-size: 13.5px;
  color: rgba(26, 22, 20, .66);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .hdz-story__grid { padding-block: 52px; }
}

/* ════════════════════════════════════════════════════════════
   INSTALACIONES
════════════════════════════════════════════════════════════ */
.hdz-facilities {
  background: var(--hdz-sand);
  border-top: 1px solid rgba(26, 22, 20, .09);
  border-bottom: 1px solid rgba(26, 22, 20, .09);
  padding-block: 76px;
}

.hdz-facilities__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hdz-facilities__title {
  margin: 0;
  font-family: var(--hdz-font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  max-width: 26ch;
  text-wrap: pretty;
}

.hdz-facilities__intro {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(26, 22, 20, .7);
  max-width: 44ch;
}

/* La primera foto ocupa el doble que la segunda, como en el mockup */
.hdz-facilities__featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.hdz-facilities__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.hdz-shot {
  position: relative;
  margin: 0;
  min-height: 200px;
  background: var(--hdz-line);
  overflow: hidden;
}

.hdz-shot--lg { min-height: 340px; }

.hdz-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hdz-shot__placeholder {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 22, 20, .07) 0 8px,
    rgba(26, 22, 20, 0) 8px 16px
  );
}

.hdz-shot__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(26, 22, 20, .5);
}

/* ── Datos de la oficina ──────────────────────────────────── */
.hdz-facilities__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 28px;
  margin: 36px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(26, 22, 20, .14);
}

.hdz-fact__label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, .55);
  margin-bottom: 8px;
}

.hdz-fact__value {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .hdz-facilities { padding-block: 52px; }
  .hdz-facilities__featured { grid-template-columns: 1fr; }
  .hdz-shot--lg { min-height: 240px; }
}

/* ════════════════════════════════════════════════════════════
   ALCANCE
════════════════════════════════════════════════════════════ */
.hdz-coverage {
  background: var(--hdz-wine);
  color: #fff;
}

.hdz-coverage__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-block: 72px;
}

.hdz-coverage__title {
  margin: 0 0 20px;
  font-family: var(--hdz-font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  max-width: 24ch;
  text-wrap: pretty;
}

.hdz-coverage__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 48ch;
  text-wrap: pretty;
}

.hdz-coverage__rows {
  display: grid;
  gap: 22px;
  align-content: start;
  margin: 0;
}

.hdz-coverage__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: 16px;
}

.hdz-coverage__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hdz-coverage__row dt { font-size: 16px; }

.hdz-coverage__row dd {
  margin: 0;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .66);
  text-align: right;
}

@media (max-width: 640px) {
  .hdz-coverage__grid { padding-block: 52px; }
}

/* ════════════════════════════════════════════════════════════
   VARIANTE «PASOS» de las tarjetas numeradas
   Misma rejilla que los servicios, tarjeta más compacta.
════════════════════════════════════════════════════════════ */
.hdz-services--steps { padding-block: 76px; }

.hdz-services--steps .hdz-services__head {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 44px;
}

.hdz-services--steps .hdz-services__title {
  font-size: clamp(26px, 2.6vw, 32px);
  max-width: 24ch;
}

.hdz-services--steps .hdz-service { padding: 32px 30px; }

.hdz-services--steps .hdz-service__num { margin-bottom: 16px; }

.hdz-services--steps .hdz-service__title {
  font-size: 19px;
  margin-bottom: 10px;
}

.hdz-services--steps .hdz-service__text {
  font-size: 14.5px;
  margin-bottom: 0;
  max-width: none;
}

@media (max-width: 640px) {
  .hdz-services--steps { padding-block: 52px; }
  .hdz-services--steps .hdz-service { padding: 26px 22px; }
}

/* ════════════════════════════════════════════════════════════
   SERVICIOS EN DETALLE
════════════════════════════════════════════════════════════ */
.hdz-svc { padding-block: 76px 0; }

.hdz-svc__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  padding-block: 56px;
  border-bottom: 1px solid rgba(26, 22, 20, .12);
}

.hdz-svc__row:first-child { padding-top: 0; }

.hdz-svc__row:last-child {
  border-bottom: none;
  padding-bottom: 56px;
}

.hdz-svc__num {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--hdz-gold);
  margin-bottom: 14px;
}

.hdz-svc__title {
  margin: 0 0 14px;
  font-family: var(--hdz-font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}

.hdz-svc__media {
  position: relative;
  margin: 0 0 24px;
  min-height: 230px;
  background: var(--hdz-line);
  overflow: hidden;
}

.hdz-svc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hdz-svc__placeholder {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 22, 20, .07) 0 8px,
    rgba(26, 22, 20, 0) 8px 16px
  );
}

.hdz-svc__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 14px 16px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: rgba(26, 22, 20, .5);
}

.hdz-svc__text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(26, 22, 20, .75);
}

.hdz-svc__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Tarjeta «Qué incluye» ────────────────────────────────── */
.hdz-svc__card {
  background: var(--hdz-sand);
  padding: 34px 36px;
}

.hdz-svc__card-title {
  margin: 0 0 18px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hdz-wine);
}

.hdz-svc__includes {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hdz-svc__includes li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55;
}

.hdz-svc__dash { color: var(--hdz-gold); flex: none; }

.hdz-svc__meta {
  border-top: 1px solid rgba(26, 22, 20, .14);
  margin: 24px 0 0;
  padding-top: 18px;
  display: grid;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(26, 22, 20, .72);
}

.hdz-svc__meta dt {
  display: inline;
  font-weight: 600;
  color: var(--hdz-ink);
}

.hdz-svc__meta dd { display: inline; margin: 0; }

@media (max-width: 640px) {
  .hdz-svc { padding-block: 52px 0; }
  .hdz-svc__row { padding-block: 40px; }
  .hdz-svc__card { padding: 26px 24px; }
}

/* ════════════════════════════════════════════════════════════
   TARJETAS CON FILETE
════════════════════════════════════════════════════════════ */
.hdz-notes { padding-block: 76px; }

.hdz-notes--sand {
  background: var(--hdz-sand);
  border-top: 1px solid rgba(26, 22, 20, .09);
  border-bottom: 1px solid rgba(26, 22, 20, .09);
}

.hdz-notes__title {
  margin: 0 0 40px;
  font-family: var(--hdz-font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  max-width: 26ch;
  text-wrap: pretty;
}

.hdz-notes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
}

.hdz-note {
  border-top: 2px solid var(--hdz-wine);
  padding-top: 18px;
}

.hdz-note__title {
  margin: 0 0 8px;
  font-family: var(--hdz-font-display);
  font-size: 19px;
  font-weight: 600;
}

.hdz-note__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(26, 22, 20, .7);
}

@media (max-width: 640px) {
  .hdz-notes { padding-block: 52px; }
  .hdz-notes__title { margin-bottom: 28px; }
}

/* ════════════════════════════════════════════════════════════
   PREGUNTAS FRECUENTES
════════════════════════════════════════════════════════════ */
/* Filete de separación: el FAQ suele ir tras otra sección crema (contacto) y
   sin él las dos se leen como un solo bloque. Cuando viene después de una
   franja que ya cierra con su propio borde, se quita para no doblar la línea. */
.hdz-faq {
  padding-block: 76px;
  border-top: 1px solid rgba(26, 22, 20, .12);
}

.hdz-notes + .hdz-faq,
.hdz-facilities + .hdz-faq,
.hdz-directions + .hdz-faq,
.hdz-coverage + .hdz-faq { border-top: none; }

.hdz-faq__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.hdz-faq__title {
  margin: 0 0 18px;
  font-family: var(--hdz-font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  max-width: 22ch;
  text-wrap: pretty;
}

.hdz-faq__text {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(26, 22, 20, .72);
  max-width: 44ch;
}

.hdz-faq__item {
  padding-block: 24px;
  border-bottom: 1px solid rgba(26, 22, 20, .14);
}

.hdz-faq__item:first-child { padding-top: 0; }

.hdz-faq__item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.hdz-faq__question {
  margin: 0 0 8px;
  font-family: var(--hdz-font-display);
  font-size: 19px;
  font-weight: 600;
}

.hdz-faq__answer {
  margin: 0;
  font-size: 15px;
  line-height: 1.68;
  color: rgba(26, 22, 20, .72);
}

@media (max-width: 640px) {
  .hdz-faq { padding-block: 52px; }
}

/* ════════════════════════════════════════════════════════════
   Contenido de página
   Las secciones de bloque sangran a ancho completo dentro del
   contenedor estrecho que trae el base.
════════════════════════════════════════════════════════════ */
.hdz-page-hero,
.hdz-facilities,
.hdz-coverage,
.hdz-notes--sand {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   RESEÑAS DE CLIENTES
════════════════════════════════════════════════════════════ */
.hdz-reviews { padding-block: 76px; }

.hdz-review {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding-block: 48px;
  border-bottom: 1px solid rgba(26, 22, 20, .12);
}

.hdz-review:first-child { padding-top: 0; }

.hdz-review:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.hdz-review__photo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
  background: var(--hdz-line);
}

/* Marcador diagonal mientras no haya retrato */
.hdz-review__photo--empty {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 22, 20, .07) 0 6px,
    rgba(26, 22, 20, 0) 6px 12px
  );
}

.hdz-review__name {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
}

.hdz-review__role {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(26, 22, 20, .62);
}

.hdz-review__quote {
  margin: 0;
  font-family: var(--hdz-font-display);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.5;
  color: var(--hdz-ink);
  text-wrap: pretty;
}

@media (max-width: 640px) {
  .hdz-reviews { padding-block: 52px; }
  .hdz-review { padding-block: 32px; }
}

/* ════════════════════════════════════════════════════════════
   LOGOS DE CLIENTES
════════════════════════════════════════════════════════════ */
.hdz-clients {
  background: var(--hdz-sand);
  border-top: 1px solid rgba(26, 22, 20, .09);
  width: 100%;
}

.hdz-clients__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding-block: 56px;
}

.hdz-clients__label {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, .55);
  flex: none;
}

.hdz-clients__list {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hdz-client img {
  display: block;
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sin logo cargado: el nombre en una caja de la misma medida */
.hdz-clients__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 140px;
  min-height: 48px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(26, 22, 20, .55);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(26, 22, 20, .09) 0 6px,
    rgba(26, 22, 20, 0) 6px 12px
  );
}

@media (max-width: 640px) {
  .hdz-clients__inner { gap: 24px; padding-block: 40px; }
  .hdz-clients__list { gap: 24px; }
}

/* ════════════════════════════════════════════════════════════
   FRANJA DE DATOS (bajo la cabecera)
════════════════════════════════════════════════════════════ */
.hdz-strip {
  background: var(--hdz-ink);
  color: #fff;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .16);
  /* Sube para pegarse a la cabecera: el hueco entre bloques rompería
     la ilusión de que las dos bandas son una sola pieza. */
  margin-top: -1px;
}

.hdz-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.hdz-strip__cell {
  padding: 26px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}

.hdz-strip__cell:first-child { padding-left: 0; }

.hdz-strip__cell:last-child {
  padding-right: 0;
  border-right: none;
}

.hdz-strip__label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.hdz-strip__value {
  display: block;
  margin: 0;
  font-family: var(--hdz-font-display);
  font-size: 22px;
  line-height: 1.3;
  color: #fff;
  transition: color var(--hdz-t-fast);
}

a.hdz-strip__value:hover { color: var(--hdz-gold-soft); }

/* Los datos que no son un enlace (dirección, horario) van en cuerpo */
.hdz-strip__value--plain {
  font-family: var(--hdz-font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 640px) {
  .hdz-strip__cell {
    padding: 18px 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .hdz-strip__cell:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════════════════════════
   CONTACTO
════════════════════════════════════════════════════════════ */
/* Filete de separación: en la portada el formulario viene tras las noticias,
   que también es crema, y sin él las dos se leen como un solo bloque. Cuando
   va después de una franja propia (la de datos, en contacto) se quita. */
.hdz-contact {
  padding-block: 72px;
  border-top: 1px solid rgba(26, 22, 20, .12);
}

.hdz-strip + .hdz-contact,
.hdz-directions + .hdz-contact { border-top: none; }

.hdz-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* ── Formulario ───────────────────────────────────────────── */
.hdz-contact-form {
  border: 1px solid rgba(26, 22, 20, .14);
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
}

.hdz-contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hdz-contact-form__title {
  margin: 0 0 8px;
  font-family: var(--hdz-font-display);
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 600;
}

.hdz-contact-form__intro {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(26, 22, 20, .68);
  max-width: 46ch;
}

.hdz-field select {
  width: 100%;
  border: 1px solid rgba(26, 22, 20, .22);
  border-radius: var(--hdz-radius);
  background: #fff;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hdz-ink);
  transition: border-color var(--hdz-t-fast), box-shadow var(--hdz-t-fast);
}

.hdz-field select:focus {
  outline: none;
  border-color: var(--hdz-wine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdz-wine) 14%, transparent);
}

.hdz-contact-form__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.hdz-contact-form__note {
  font-size: 13px;
  color: var(--hdz-ink-60);
  max-width: 34ch;
  line-height: 1.5;
}

.hdz-contact-form__error {
  margin: 0 0 16px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--hdz-wine) 8%, transparent);
  border-left: 3px solid var(--hdz-wine);
  font-size: 14px;
  color: var(--hdz-wine);
}

/* ── Confirmación ─────────────────────────────────────────── */
.hdz-contact-done {
  border: 1px solid rgba(26, 22, 20, .14);
  background: var(--hdz-sand);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
}

.hdz-contact-done__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--hdz-wine);
  border-radius: 50%;
  color: var(--hdz-wine);
  margin-bottom: 22px;
}

.hdz-contact-done h2 {
  margin: 0 0 14px;
  font-family: var(--hdz-font-display);
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 600;
}

.hdz-contact-done p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(26, 22, 20, .75);
  max-width: 48ch;
}

.hdz-contact-done [data-reset] {
  background: none;
  border: none;
  border-bottom: 1px solid var(--hdz-gold);
  cursor: pointer;
  font-family: inherit;
  padding: 0 0 4px;
}

/* ── Tarjetas del costado ─────────────────────────────────── */
.hdz-contact__aside {
  display: grid;
  gap: 28px;
  align-content: start;
}

.hdz-card-sand,
.hdz-card-lined,
.hdz-card-wine { padding: 32px; }

.hdz-card-sand  { background: var(--hdz-sand); }
.hdz-card-lined { border: 1px solid rgba(26, 22, 20, .14); }
.hdz-card-wine  { background: var(--hdz-wine); color: #fff; }

.hdz-card-sand h3,
.hdz-card-lined h3,
.hdz-card-wine h3 {
  margin: 0 0 18px;
  font-family: var(--hdz-font-display);
  font-size: 21px;
  font-weight: 600;
}

.hdz-card-wine h3 { color: #fff; margin-bottom: 12px; }

.hdz-card-wine p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
}

/* Horario */
.hdz-hours {
  display: grid;
  gap: 12px;
  margin: 0;
  font-size: 15px;
}

.hdz-hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(26, 22, 20, .14);
  padding-bottom: 12px;
}

.hdz-hours > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hdz-hours dt { margin: 0; }
.hdz-hours dd { margin: 0; color: rgba(26, 22, 20, .68); text-align: right; }

/* Canales directos */
.hdz-channels {
  display: grid;
  gap: 16px;
  font-size: 15px;
}

.hdz-channel { display: grid; gap: 4px; }

.hdz-channel__label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, .55);
}

.hdz-channel a { color: var(--hdz-wine); }
.hdz-channel a:hover { color: var(--hdz-gold); }

.hdz-channel__social { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .hdz-contact { padding-block: 52px; }
  .hdz-card-sand,
  .hdz-card-lined,
  .hdz-card-wine { padding: 24px; }
}

/* ════════════════════════════════════════════════════════════
   CÓMO LLEGAR
════════════════════════════════════════════════════════════ */
.hdz-directions {
  background: var(--hdz-sand);
  border-top: 1px solid rgba(26, 22, 20, .09);
  padding-block: 72px;
  width: 100%;
}

.hdz-directions__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hdz-directions__title {
  margin: 0;
  font-family: var(--hdz-font-display);
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  max-width: 24ch;
  text-wrap: pretty;
}

.hdz-directions__body {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.hdz-directions__map {
  flex: 1 1 420px;
  min-width: 0;
  min-height: 360px;
  border: 1px solid rgba(26, 22, 20, .14);
  overflow: hidden;
  background: var(--hdz-line);
}

.hdz-directions__map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
}

.hdz-directions__notes {
  flex: 1 1 280px;
  min-width: 0;
  display: grid;
  gap: 20px;
  align-content: start;
}

.hdz-note-row {
  border-top: 1px solid rgba(26, 22, 20, .14);
  padding-top: 16px;
}

/* La primera nota lleva el filete grueso, como el diseño */
.hdz-note-row:first-child { border-top: 2px solid var(--hdz-wine); }

.hdz-note-row__label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, .55);
}

.hdz-note-row__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(26, 22, 20, .78);
}

@media (max-width: 640px) {
  .hdz-directions { padding-block: 52px; }
  .hdz-directions__map { min-height: 280px; }
  .hdz-directions__map iframe { min-height: 280px; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT FORM 7 dentro del bloque
   ------------------------------------------------------------
   CF7 imprime su propio marcado y las plantillas de este sitio
   traen clases de Bootstrap heredadas del theme anterior
   (row / col-lg-*), que aquí no existen. Se estilan por tipo de
   control en vez de por clase de CF7, y se da una rejilla
   mínima a esas columnas para que no se apilen todas.
════════════════════════════════════════════════════════════ */
.hdz-contact-form--cf7 .wpcf7 { margin-top: 8px; }

.hdz-contact-form--cf7 .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}

.hdz-contact-form--cf7 .row > p {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0 0 18px;
}

/* Las columnas de ancho completo y la del botón mandan sobre el flex base */
.hdz-contact-form--cf7 .row > .col-lg-12,
.hdz-contact-form--cf7 .row > .col-12 { flex-basis: 100%; }
.hdz-contact-form--cf7 .row > .col-lg-auto { flex: 0 0 auto; }

.hdz-contact-form--cf7 label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 500;
}

.hdz-contact-form--cf7 input[type="text"],
.hdz-contact-form--cf7 input[type="email"],
.hdz-contact-form--cf7 input[type="tel"],
.hdz-contact-form--cf7 input[type="url"],
.hdz-contact-form--cf7 input[type="date"],
.hdz-contact-form--cf7 input[type="number"],
.hdz-contact-form--cf7 select,
.hdz-contact-form--cf7 textarea {
  width: 100%;
  border: 1px solid rgba(26, 22, 20, .22);
  border-radius: var(--hdz-radius);
  background: #fff;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--hdz-ink);
  transition: border-color var(--hdz-t-fast), box-shadow var(--hdz-t-fast);
}

.hdz-contact-form--cf7 textarea { min-height: 130px; resize: vertical; }

.hdz-contact-form--cf7 input:focus,
.hdz-contact-form--cf7 select:focus,
.hdz-contact-form--cf7 textarea:focus {
  outline: none;
  border-color: var(--hdz-wine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdz-wine) 14%, transparent);
}

.hdz-contact-form--cf7 .wpcf7-form-control-wrap { display: block; }

/* Botón: se le quitan las clases del theme anterior y se le pone el nuestro */
.hdz-contact-form--cf7 input[type="submit"],
.hdz-contact-form--cf7 button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: var(--hdz-wine);
  color: #fff;
  border-radius: var(--hdz-radius);
  padding: 15px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  width: auto;
  transition: background var(--hdz-t-fast);
}

.hdz-contact-form--cf7 input[type="submit"]:hover,
.hdz-contact-form--cf7 button[type="submit"]:hover { background: var(--hdz-wine-dark); }

/* Estados y validación */
.hdz-contact-form--cf7 .wpcf7-not-valid {
  border-color: var(--hdz-wine);
}

.hdz-contact-form--cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--hdz-wine);
}

.hdz-contact-form--cf7 .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  border: none;
  border-left: 3px solid var(--hdz-ink-60);
  background: var(--hdz-sand);
  font-size: 14.5px;
  line-height: 1.55;
}

.hdz-contact-form--cf7 form.sent .wpcf7-response-output {
  border-left-color: var(--hdz-gold);
}

.hdz-contact-form--cf7 form.invalid .wpcf7-response-output,
.hdz-contact-form--cf7 form.failed .wpcf7-response-output,
.hdz-contact-form--cf7 form.spam .wpcf7-response-output {
  border-left-color: var(--hdz-wine);
  color: var(--hdz-wine);
  background: color-mix(in srgb, var(--hdz-wine) 7%, transparent);
}

.hdz-contact-form--cf7 .wpcf7-spinner { margin-left: 12px; }

.hdz-contact-form__note--block {
  display: block;
  margin: 18px 0 0;
  max-width: none;
}

/* ════════════════════════════════════════════════════════════
   COTIZADOR
════════════════════════════════════════════════════════════ */
.hdz-quote { padding-block: 64px 88px; }

.hdz-quote__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}

.hdz-quote-form {
  border: 1px solid rgba(26, 22, 20, .14);
  background: #fff;
  padding: clamp(24px, 3vw, 40px);
}

/* ── Pasos ────────────────────────────────────────────────── */
.hdz-step {
  border: none;
  margin: 0 0 36px;
  padding: 0;
}

.hdz-step:last-of-type { margin-bottom: 26px; }

.hdz-step__title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 22px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hdz-wine);
}

.hdz-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hdz-wine);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  flex: none;
}

/* ── Tarjetas de servicio ─────────────────────────────────── */
.hdz-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.hdz-pick {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(26, 22, 20, .16);
  padding: 16px 18px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.45;
  transition: border-color var(--hdz-t-fast), background var(--hdz-t-fast);
}

.hdz-pick:hover { border-color: var(--hdz-wine); }

.hdz-pick:has(input:checked) {
  border-color: var(--hdz-wine);
  background: color-mix(in srgb, var(--hdz-wine) 4%, #fff);
}

.hdz-pick input {
  margin: 2px 0 0;
  accent-color: var(--hdz-wine);
  flex: none;
}

/* La última opción ocupa el ancho completo, como en el diseño */
.hdz-picks > .hdz-pick:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ── Costado ──────────────────────────────────────────────── */
.hdz-quote__aside {
  background: var(--hdz-sand);
  padding: 34px 32px;
}

.hdz-quote__aside-title {
  margin: 0 0 18px;
  font-family: var(--hdz-font-display);
  font-size: 21px;
  font-weight: 600;
}

.hdz-how {
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.hdz-how__item {
  display: flex;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(26, 22, 20, .75);
}

.hdz-how__num {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--hdz-gold);
  flex: none;
  padding-top: 3px;
}

.hdz-quote__phones {
  border-top: 1px solid rgba(26, 22, 20, .14);
  padding-top: 24px;
}

.hdz-quote__phones-title {
  margin: 0 0 12px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, .55);
}

.hdz-quote__phones a {
  display: block;
  font-family: var(--hdz-font-display);
  font-size: 22px;
  color: var(--hdz-wine);
  margin-bottom: 4px;
  transition: color var(--hdz-t-fast);
}

.hdz-quote__phones a:hover { color: var(--hdz-gold); }

.hdz-quote-done__phone {
  margin: -12px 0 24px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(26, 22, 20, .62);
}

/* Campo trampa del guard: fuera de pantalla, nunca visible */
.hdz-guard {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .hdz-quote { padding-block: 44px 60px; }
  .hdz-quote__aside { padding: 26px 24px; }
}

/* ════════════════════════════════════════════════════════════
   FICHA DE SERVICIO
════════════════════════════════════════════════════════════ */
.hdz-svc-crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.hdz-svc-crumbs a {
  color: var(--hdz-gold-soft);
  transition: color var(--hdz-t-fast);
}

.hdz-svc-crumbs a:hover { color: #fff; }

/* ── Imagen destacada del servicio ────────────────────────────
   Se monta sobre la franja tinta en vez de quedar flotando entre
   dos secciones: la banda oscura le hace de fondo y la foto gana
   profundidad, que es lo que le faltaba.

   Sin recorte a propósito: estas piezas son banners con texto
   dentro, y un object-fit:cover se come las letras. La altura la
   marca la propia imagen. */
.hdz-svc-hero {
  --hdz-lift: 96px;
  position: relative;
  z-index: 2;
  margin-top: calc(var(--hdz-lift) * -1);
  padding-bottom: 44px;
}

/* La franja tinta crece para alojar el trozo que se le monta encima */
.hdz-page-hero--with-media .hdz-page-hero__inner { padding-bottom: 124px; }

.hdz-svc-hero__media {
  margin: 0;
  overflow: hidden;
  background: var(--hdz-ink);
  box-shadow: 0 20px 50px rgba(12, 10, 9, .28);
}

.hdz-svc-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Red de seguridad: si alguna regla fija la altura, que recorte
     en vez de deformar la imagen. */
  object-fit: cover;
}

@media (max-width: 900px) {
  /* Menos vuelo: en pantallas cortas un solape grande deja la
     cabecera casi tapada. */
  .hdz-svc-hero { --hdz-lift: 56px; padding-bottom: 32px; }
  .hdz-page-hero--with-media .hdz-page-hero__inner { padding-bottom: 84px; }
}

/* ── En qué consiste ──────────────────────────────────────── */
.hdz-svc-intro { padding-block: 56px; }

/* Sin foto arriba, la primera sección abre la página y necesita más aire */
.hdz-svc-body > .hdz-svc-intro:first-child { padding-top: 64px; }

/* El texto pesa más que la ficha: 1.3fr contra un máximo de 400px. Con
   columnas iguales la ficha quedaba tan alta que abría un hueco debajo del
   texto. `stretch` deja además que la columna izquierda reparta su contenido. */
.hdz-svc-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 400px);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
}

.hdz-svc-intro__main {
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .hdz-svc-intro__grid { grid-template-columns: 1fr; }
}

.hdz-svc-intro__title {
  margin: 0 0 18px;
  font-family: var(--hdz-font-display);
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 600;
}

.hdz-svc-intro__text {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(26, 22, 20, .78);
}

.hdz-svc-intro__text:last-child { margin-bottom: 0; }

/* ── Ficha del servicio ───────────────────────────────────── */
.hdz-svc-card {
  background: var(--hdz-sand);
  padding: 34px 36px;
}

.hdz-svc-card__title {
  margin: 0 0 20px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hdz-wine);
}

.hdz-svc-card__rows {
  display: grid;
  gap: 16px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.hdz-svc-card__rows > div + div {
  border-top: 1px solid rgba(26, 22, 20, .14);
  padding-top: 16px;
}

.hdz-svc-card__rows dt {
  color: rgba(26, 22, 20, .6);
  font-size: 13px;
  margin-bottom: 4px;
}

.hdz-svc-card__rows dd { margin: 0; }
.hdz-svc-card__rows dd a { color: var(--hdz-wine); }
.hdz-svc-card__rows dd a:hover { color: var(--hdz-gold); }

.hdz-svc-card__cta {
  display: flex;
  width: 100%;
  margin-top: 26px;
}

/* ── Dos listas ───────────────────────────────────────────── */
.hdz-lists { padding-block: 8px 64px; }

.hdz-lists__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.hdz-lists__grid--single { grid-template-columns: minmax(0, 60ch); }

.hdz-lists__title {
  margin: 0 0 22px;
  font-family: var(--hdz-font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 600;
}

.hdz-lists__items {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hdz-lists__items li {
  display: flex;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(26, 22, 20, .78);
}

.hdz-lists__dash { color: var(--hdz-gold); flex: none; }

@media (max-width: 640px) {
  .hdz-svc-intro { padding-block: 40px; }
  .hdz-svc-card { padding: 26px 24px; }
  .hdz-lists { padding-block: 8px 44px; }
}

/* ── FAQ en acordeón ──────────────────────────────────────────
   <details> nativo: sin JS, con teclado y encontrable con Ctrl+F. */
.hdz-faq__list--accordion .hdz-faq__item { padding-block: 0; }

.hdz-faq__list--accordion .hdz-faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding-block: 22px;
  cursor: pointer;
  list-style: none;
  transition: color var(--hdz-t-fast);
}

/* Safari pinta su propio triángulo si no se le quita */
.hdz-faq__list--accordion summary::-webkit-details-marker { display: none; }

.hdz-faq__list--accordion .hdz-faq__question:hover { color: var(--hdz-wine); }

.hdz-faq__list--accordion .hdz-faq__question:focus-visible {
  outline: 2px solid var(--hdz-wine);
  outline-offset: 3px;
}

.hdz-faq__chevron {
  flex: none;
  color: var(--hdz-wine);
  margin-top: 4px;
  transition: transform var(--hdz-t-med);
}

.hdz-faq__list--accordion [open] .hdz-faq__chevron { transform: rotate(180deg); }

.hdz-faq__list--accordion .hdz-faq__answer { padding-bottom: 22px; }

@media (prefers-reduced-motion: reduce) {
  .hdz-faq__chevron { transition: none; }
}

/* ── Ficha del servicio pegajosa ──────────────────────────────
   La ficha lleva el botón de cotizar; en una página larga tiene que
   seguir a la vista, no quedarse arriba. */
@media (min-width: 901px) {
  .hdz-svc-card {
    position: sticky;
    top: calc(var(--header-height, 96px) + 24px);
  }
}

/* Descargo de responsabilidad al pie de una ficha */
.hdz-disclaimer {
  max-width: var(--hdz-container);
  margin: 0 auto;
  padding: 0 var(--hdz-gutter) 64px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(26, 22, 20, .5);
}

/* ════════════════════════════════════════════════════════════
   NAVEGACIÓN DE FICHA DE SERVICIO
   Índice horizontal que permanece debajo del header. Los enlaces
   pueden desplazarse en móvil sin forzar dos líneas.
════════════════════════════════════════════════════════════ */
.hdz-svc-nav {
  position: sticky;
  top: 70px;
  z-index: 90;
  background: color-mix(in srgb, var(--hdz-cream) 94%, transparent);
  border-top: 1px solid rgba(26, 22, 20, .1);
  border-bottom: 1px solid rgba(26, 22, 20, .12);
  backdrop-filter: blur(12px);
}

.hdz-svc-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 58px;
}

.hdz-svc-nav__label {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hdz-ink-60);
}

.hdz-svc-nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}

.hdz-svc-nav__links::-webkit-scrollbar { display: none; }

.hdz-svc-nav__links a {
  flex: none;
  padding-block: 19px 17px;
  border-bottom: 2px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(26, 22, 20, .72);
  transition: color var(--hdz-t-fast), border-color var(--hdz-t-fast);
}

.hdz-svc-nav__links a:hover,
.hdz-svc-nav__links a:focus-visible {
  color: var(--hdz-wine);
  border-color: var(--hdz-wine);
}

.hdz-svc-nav__cta {
  flex: none;
  margin-left: auto;
  padding: 9px 16px;
  background: var(--hdz-wine);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background var(--hdz-t-fast);
}

.hdz-svc-nav__cta:hover { background: var(--hdz-wine-dark); color: #fff; }

@media (max-width: 760px) {
  .hdz-svc-nav { top: 69px; }
  .hdz-svc-nav__inner { gap: 16px; }
  .hdz-svc-nav__label { display: none; }
  .hdz-svc-nav__links { gap: 20px; }
  .hdz-svc-nav__cta { padding-inline: 13px; }
}

/* ════════════════════════════════════════════════════════════
   CONTACTO DENTRO DE UNA FICHA
════════════════════════════════════════════════════════════ */
.hdz-service-contact { padding-block: 76px; }

.hdz-service-contact__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding: clamp(36px, 5vw, 72px);
  background: var(--hdz-ink);
  color: #fff;
  border-top: 4px solid var(--hdz-gold);
}

.hdz-service-contact__eyebrow {
  margin: 0 0 14px;
  color: var(--hdz-gold-soft);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hdz-service-contact__title {
  margin: 0;
  max-width: 20ch;
  color: #fff;
  font-family: var(--hdz-font-display);
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 600;
  line-height: 1.08;
}

.hdz-service-contact__text {
  margin: 20px 0 0;
  max-width: 58ch;
  color: rgba(255, 255, 255, .74);
  font-size: 16px;
  line-height: 1.7;
}

.hdz-service-contact__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hdz-service-contact__note {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: 12.5px;
  line-height: 1.5;
}

.hdz-service-contact__facts {
  margin: 0;
  padding-left: clamp(26px, 3vw, 46px);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.hdz-service-contact__facts > div {
  padding-block: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.hdz-service-contact__facts > div:first-child { padding-top: 0; }
.hdz-service-contact__facts > div:last-child { padding-bottom: 0; border-bottom: none; }

.hdz-service-contact__facts dt {
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .5);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hdz-service-contact__facts dd {
  margin: 0;
  color: #fff;
  font-family: var(--hdz-font-display);
  font-size: 20px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .hdz-service-contact { padding-block: 52px; }
  .hdz-service-contact__panel { grid-template-columns: 1fr; gap: 36px; }
  .hdz-service-contact__actions { display: grid; }
  .hdz-service-contact__facts { padding: 30px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
}

/* Segunda vía de contacto en la ficha lateral. */
.hdz-svc-card__actions {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.hdz-svc-card__actions .hdz-svc-card__cta { margin-top: 0; }
.hdz-svc-card__secondary { width: 100%; }

.hdz-svc-card__note {
  margin: 13px 0 0;
  color: rgba(26, 22, 20, .56);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   RECORRIDO EDITORIAL · CREAR EMPRESA EN EUA
   Ajustes deliberadamente acotados a esta ficha.
════════════════════════════════════════════════════════════ */
.crear-empresa-en-estados-unidos :is(
  #resumen,
  #beneficios,
  #estructura,
  #proceso,
  #incluye,
  #preguntas
) {
  scroll-margin-top: 148px;
}

.crear-empresa-en-estados-unidos .hdz-svc-body > .hdz-strip:first-child {
  margin-top: 0;
}

.crear-empresa-en-estados-unidos .hdz-svc-intro__main {
  max-width: 68ch;
}

.crear-empresa-en-estados-unidos #beneficios .hdz-notes__grid,
.crear-empresa-en-estados-unidos #sectores .hdz-notes__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.crear-empresa-en-estados-unidos #beneficios .hdz-notes__grid {
  counter-reset: benefit;
}

.crear-empresa-en-estados-unidos #beneficios .hdz-note,
.crear-empresa-en-estados-unidos #sectores .hdz-note {
  min-height: 100%;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid rgba(26, 22, 20, .11);
  border-top: 3px solid var(--hdz-wine);
}

.crear-empresa-en-estados-unidos #beneficios .hdz-note {
  counter-increment: benefit;
}

.crear-empresa-en-estados-unidos #beneficios .hdz-note::before {
  content: "0" counter(benefit);
  display: block;
  margin-bottom: 18px;
  color: var(--hdz-gold);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
}

.crear-empresa-en-estados-unidos #estructura,
.crear-empresa-en-estados-unidos #incluye {
  padding-block: 72px;
}

.crear-empresa-en-estados-unidos #estructura {
  background: var(--hdz-sand);
  border-block: 1px solid rgba(26, 22, 20, .09);
}

.crear-empresa-en-estados-unidos #estructura .hdz-lists__grid > div,
.crear-empresa-en-estados-unidos #incluye .hdz-lists__grid > div {
  padding: clamp(26px, 3vw, 38px);
  background: #fff;
  border: 1px solid rgba(26, 22, 20, .12);
  border-top: 3px solid var(--hdz-wine);
}

.crear-empresa-en-estados-unidos #estructura .hdz-lists__grid > div + div {
  border-top-color: var(--hdz-ink);
}

.crear-empresa-en-estados-unidos #incluye .hdz-lists__grid > div:last-child {
  background: var(--hdz-sand);
  border-top-color: var(--hdz-gold);
}

.crear-empresa-en-estados-unidos #proceso {
  background: var(--hdz-cream);
}

.crear-empresa-en-estados-unidos #proceso .hdz-service {
  position: relative;
  padding-top: 38px;
  background: #fff;
}

.crear-empresa-en-estados-unidos #proceso .hdz-service:hover {
  background: #fff;
}

.crear-empresa-en-estados-unidos #proceso .hdz-service__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  background: var(--hdz-wine);
  color: #fff;
  border-radius: 50%;
}

.crear-empresa-en-estados-unidos #riesgos .hdz-note {
  padding-left: 22px;
  border-top: 0;
  border-left: 3px solid var(--hdz-wine);
}

.crear-empresa-en-estados-unidos #preguntas {
  background: #fff;
}

.crear-empresa-en-estados-unidos #preguntas .hdz-faq__intro {
  align-self: start;
  position: sticky;
  top: 154px;
}

@media (max-width: 900px) {
  .crear-empresa-en-estados-unidos #beneficios .hdz-notes__grid,
  .crear-empresa-en-estados-unidos #sectores .hdz-notes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crear-empresa-en-estados-unidos #preguntas .hdz-faq__intro { position: static; }
}

@media (max-width: 640px) {
  .crear-empresa-en-estados-unidos #estructura,
  .crear-empresa-en-estados-unidos #incluye { padding-block: 52px; }
  .crear-empresa-en-estados-unidos #beneficios .hdz-notes__grid,
  .crear-empresa-en-estados-unidos #sectores .hdz-notes__grid {
    grid-template-columns: 1fr;
  }
}


/* ── Puntos clave del servicio ────────────────────────────────
   Van al fondo de la columna con margin-top:auto, de modo que el
   bloque cierra a la altura de la ficha en vez de dejar hueco. */
.hdz-svc-highlights {
  list-style: none;
  margin: auto 0 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(26, 22, 20, .14);
  display: grid;
  gap: 14px;
}

.hdz-svc-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--hdz-ink);
}

.hdz-svc-highlights__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 1px;
  background: color-mix(in srgb, var(--hdz-wine) 10%, transparent);
  color: var(--hdz-wine);
}

/* ════════════════════════════════════════════════════════════
   DESPLAZAMIENTO SUAVE
   ------------------------------------------------------------
   Para el índice de servicio y cualquier ancla del sitio. Se
   desactiva si el sistema pide menos movimiento: a algunas
   personas el scroll animado les provoca mareo.
════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* El destino no debe quedar debajo del header ni del índice pegajoso:
   header (--header-height) + índice (~56px) + aire. */
section[id],
[id].hdz-panel { scroll-margin-top: calc(var(--header-height, 70px) + 84px); }

/* Sin índice encima, basta con librar el header */
.hdz-taller-single [id],
.hdz-article [id] { scroll-margin-top: calc(var(--header-height, 70px) + 24px); }