/* Base común de las páginas de servicio (/servicios/ y /servicios/<slug>/): alias de tokens, ampliación en pantallas grandes,
   reinicios acotados a .hx, cabecera compacta, botones y rótulos hx-. Porte de prototipos/hero_ronda2/base.css. Lo carga solo
   base.html en esas páginas, antes de servicios.css. La entrada escalonada (.hx-rise) y el glifo de WhatsApp (.hx-ico-wsp) que
   también usa la portada viven en hero.css.
   Reglas de convivencia con site.css: lo portado vive bajo la clase .hx (secciones y cabecera), los nombres compartidos
   llevan prefijo hx- y los reinicios que el prototipo ponía en global usan :where(.hx), con la especificidad del selector original. */

/* Colores y fuentes del prototipo, como alias de los tokens del sitio (tokens.css, desde datos/tokens.json). */
:root {
  --brand: var(--fw-brand); --brand-dark: var(--fw-brand-dark); --brand-light: var(--fw-brand-light); --ink: var(--fw-ink); --muted: var(--fw-muted);
  --paper: var(--fw-paper); --surface: var(--fw-surface); --editorial: var(--fw-editorial); --line: var(--fw-line);
  --heading: var(--fw-font-heading); --body: var(--fw-font-body);
  --gx: clamp(20px, calc(4 * var(--vw)), 56px);
  --pad: max(var(--gx), calc(calc(50 * var(--vw)) - 720px + var(--gx)));
  --header: 84px;
  /* Pantallas grandes: la página se amplía por pasos (--z) para que la composición pensada a 1440 × 900 llene la pantalla
     en vez de quedar con el ancho topado en 1440 px. zoom también amplía las unidades de pantalla, así que los estilos
     usan var(--vw), var(--vh) y var(--svh), que ya vienen divididas por --z. */
  --z: 1;
  --vw: calc(1vw / var(--z)); --vh: calc(1vh / var(--z)); --svh: var(--vh);
  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='m5 3 4 4-2 3c2 3 4 5 7 7l3-2 4 4c-1 3-4 3-6 2C8 18 4 14 2 7c-1-2 0-4 3-4Z'/%3E%3C/svg%3E");
}
@supports (height: 1svh) { :root { --svh: calc(1svh / var(--z)); } }
/* Cada paso pide el ancho y el alto que dejan, ya ampliada, una pantalla de al menos 1440 × 880.
   Solo donde el navegador reconoce zoom: sin él, --z queda en 1 y las unidades no se dividen. */
@supports (zoom: 1) {
  @media (min-width: 1584px) and (min-height: 968px) { :root { --z: 1.1; } }
  @media (min-width: 1728px) and (min-height: 1056px) { :root { --z: 1.2; } }
  @media (min-width: 1872px) and (min-height: 1144px) { :root { --z: 1.3; } }
  @media (min-width: 2016px) and (min-height: 1232px) { :root { --z: 1.4; } }
  @media (min-width: 2160px) and (min-height: 1320px) { :root { --z: 1.5; } }
  @media (min-width: 2304px) and (min-height: 1408px) { :root { --z: 1.6; } }
  @media (min-width: 2448px) and (min-height: 1496px) { :root { --z: 1.7; } }
  @media (min-width: 2592px) and (min-height: 1584px) { :root { --z: 1.8; } }
  @media (min-width: 2736px) and (min-height: 1672px) { :root { --z: 1.9; } }
  @media (min-width: 2880px) and (min-height: 1760px) { :root { --z: 2; } }
}
/* La ampliación se aplica solo en las páginas de servicio; la portada queda sin zoom. */
html[data-pagina="servicio"] body { zoom: var(--z); }
html[data-pagina="servicio"] { scroll-padding-top: calc(var(--header) * var(--z)); }

/* Reinicios del prototipo, acotados a lo portado. */
.hx { font: 22px/1.5 var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
:where(.hx, .hx *)::before, :where(.hx, .hx *)::after { box-sizing: border-box; }
:where(.hx) img, :where(.hx) video, :where(.hx) svg { display: block; max-width: 100%; }
:where(.hx) h1, :where(.hx) h2, :where(.hx) h3, :where(.hx) p, :where(.hx) ul, :where(.hx) ol, :where(.hx) dl, :where(.hx) dd, :where(.hx) figure { margin: 0; padding: 0; }
:where(.hx) p { overflow-wrap: normal; }
:where(.hx) ul, :where(.hx) ol { list-style: none; }
:where(.hx) a { color: inherit; text-underline-offset: auto; }
:where(.hx) :focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
.hx-dark :focus-visible { outline-color: var(--brand-light); }
.hx .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.hx-arrow { flex-shrink: 0; transition: transform 160ms; }

/* Cabecera compacta: 84 px y logo compacto de 200 px. Desde 1100 px hacia abajo la navegación pasa a un menú
   <details>, que funciona sin JavaScript. */
.hx-header { position: relative; z-index: 20; display: flex; align-items: center; gap: 32px; height: var(--header); padding-inline: var(--pad); background: var(--paper); border-bottom: 1px solid var(--line); }
.hx-brand { flex-shrink: 0; margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.hx-brand img { width: 200px; height: auto; }
.hx-brand .logo-neg { display: none; }
.hx-nav, .hx-acciones { display: flex; align-items: center; gap: 30px; font-size: 21px; white-space: nowrap; }
.hx-nav a, .hx-acciones a:not(.hx-btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.hx-nav a:hover, .hx-acciones a:not(.hx-btn):hover { color: var(--brand-dark); }
.hx-acciones { gap: 22px; padding-left: 30px; border-left: 1px solid var(--line); }
.hx-menu { display: none; position: relative; }
.hx-menu summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; list-style: none; }
.hx-menu summary::-webkit-details-marker { display: none; }
.hx-menu summary span { width: 20px; height: 2px; background: currentColor; transition: transform 160ms; }
.hx-menu[open] summary span:first-child { transform: translateY(4.5px) rotate(45deg); }
.hx-menu[open] summary span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.hx-menu nav { position: absolute; right: 0; top: calc(100% + 19px); min-width: 250px; padding: 8px 22px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 0 0 4px 4px; }
.hx-menu nav a { display: flex; align-items: center; min-height: 52px; font-size: 22px; text-decoration: none; border-bottom: 1px solid var(--line); }
.hx-menu nav a:last-child { border-bottom: 0; font-weight: 700; color: var(--brand-dark); }
.hx-header.is-dark { background: var(--ink); border-bottom-color: rgb(255 255 255 / 12%); color: white; }
.hx-header.is-dark :focus-visible { outline-color: var(--brand-light); }
.hx-header.is-dark .logo-pos { display: none; }
.hx-header.is-dark .logo-neg { display: block; }
.hx-header.is-dark .hx-nav a:hover, .hx-header.is-dark .hx-acciones a:not(.hx-btn):hover { color: var(--brand-light); }
.hx-header.is-dark .hx-acciones { border-left-color: rgb(255 255 255 / 28%); }

.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 14px 26px; border: 1px solid var(--brand-dark); border-radius: 4px; background: var(--brand-dark); color: white; font: 700 22px/1.2 var(--body); text-decoration: none; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; }
.hx-btn:hover { background: var(--ink); border-color: var(--ink); }
.hx-btn:hover .hx-arrow { transform: translateX(4px); }
.hx-btn--small { min-height: 46px; padding: 9px 18px; font-size: 20px; gap: 10px; }
.hx-btn--light { background: var(--brand-light); border-color: var(--brand-light); color: var(--ink); }
.hx-btn--light:hover { background: white; border-color: white; color: var(--ink); }
.hx-btn--outline { background: transparent; border-color: rgb(255 255 255 / 45%); color: white; }
.hx-btn--outline:hover { background: rgb(255 255 255 / 12%); border-color: white; }
.hx-btn--line { background: transparent; border-color: var(--ink); color: var(--ink); }
.hx-btn--line:hover { background: var(--ink); color: white; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* WhatsApp: botón secundario con el glifo. Usa los colores de la marca; el verde de WhatsApp no está en la paleta. */
.hx-btn--wsp { gap: 10px; }

.hx-eyebrow { display: flex; align-items: center; gap: 14px; font: 700 15px/1.4 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--brand-dark); }
.hx-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex-shrink: 0; }
.hx-dark .hx-eyebrow { color: var(--brand-light); }
:where(.hx) h1 { font: 600 clamp(38px, calc(4.1 * var(--vw)), 62px)/1.06 var(--heading); letter-spacing: -.042em; text-wrap: balance; }
.hx-sub { font-size: 23px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* Rótulo carbón sobre fotografía. */
.hx-rotulo { position: absolute; left: 0; bottom: 0; padding: 10px 13px 9px; background: var(--ink); color: var(--paper); font: 700 14px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; }

/* Entre 1101 y 1240 px la navegación completa solo cabe más apretada. */
@media (max-width: 1240px) {
  .hx-header { gap: 22px; }
  .hx-nav { gap: 20px; font-size: 20px; }
  .hx-acciones { gap: 16px; padding-left: 20px; font-size: 20px; }
}
@media (max-width: 1100px) {
  .hx-nav { display: none; }
  .hx-acciones { padding-left: 0; border-left: 0; }
  .hx-menu { display: block; }
}
@media (max-width: 760px) {
  :root { --header: 66px; }
  .hx { font-size: 20px; }
  .hx-header { gap: 14px; }
  .hx-brand img { width: 160px; }
  .hx-acciones .hx-btn { display: none; }
  .hx-menu nav { top: calc(100% + 10px); min-width: min(300px, calc(calc(100 * var(--vw)) - 32px)); }
  .hx-btn { min-height: 56px; font-size: 21px; }
  .hx-actions .hx-btn { width: 100%; justify-content: space-between; }
  .hx-sub { font-size: 20px; }
  .hx-eyebrow { font-size: 13px; letter-spacing: .11em; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-arrow, .hx-menu summary span { transition: none; }
}