/* Páginas de servicio: /servicios/ y /servicios/<slug>/. Porte de prototipos/hero_ronda2/servicios/servicio.css y de lo que
   usaban de base.css (tarjetas de servicio, bloque de la sección siguiente). Se carga después de hx.css y todo vive
   bajo .hx (el <main> de estas páginas). Las unidades de pantalla van siempre con var(--vw), var(--vh) o var(--svh).
   Filetes finos en vez de cajas; rótulos carbón sobre las fotografías. */

/* Bloques con el relleno de una sección de página (índice, tarjetas, otros servicios). Antes de sus ajustes propios: el orden de la cascada importa. */
.s-indice, .s-tarjetas, .s-otros { padding: 72px var(--pad) 96px; }
.s-indice .hx-eyebrow, .s-otros .hx-eyebrow { margin-bottom: 18px; }
.s-otros h2 { font: 600 44px/1.13 var(--heading); letter-spacing: -.042em; margin-bottom: 36px; }
@media (max-width: 760px) {
  .s-indice, .s-tarjetas, .s-otros { padding: 48px 20px 64px; }
  .s-otros h2 { font-size: 32px; margin-bottom: 24px; }
}

/* Tarjetas de servicio: cada una lleva a su página; el enlace del título cubre toda la tarjeta. */
.hx-needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.hx-needs li { position: relative; display: flex; flex-direction: column; padding: 16px 24px 18px; border-left: 1px solid var(--line); transition: background 160ms, border-color 160ms; }
.hx-needs h3 { font: 600 24px/1.2 var(--heading); letter-spacing: -.035em; margin-bottom: 8px; }
.hx-needs h3 a { text-decoration: none; }
.hx-needs h3 a::after { content: ""; position: absolute; inset: 0; }
.hx-needs h3 a:focus-visible { outline: none; }
.hx-needs h3 a:focus-visible::after { outline: 3px solid var(--brand-dark); outline-offset: -3px; }
.hx-needs p { font-size: 20px; color: var(--muted); line-height: 1.4; }
.hx-needs .hx-ir { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font: 700 19px/1.2 var(--body); color: var(--brand-dark); pointer-events: none; }
.hx-needs .hx-ir .hx-arrow { width: 20px; height: 20px; }
.hx-needs li:hover { background: var(--surface); border-left-color: var(--brand); }
.hx-needs li:hover h3 { color: var(--brand-dark); }
.hx-needs li:hover .hx-arrow { transform: translateX(4px); }
@media (max-width: 1100px) {
  .hx-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 760px) {
  .hx-needs { grid-template-columns: 1fr; }
}


/* Índice de servicios: tarjetas con foto, 2 x 2 en escritorio y apiladas en el teléfono; el enlace del título cubre la tarjeta. */
.s-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(24px, calc(3 * var(--vw)), 48px); }
.s-cards li { position: relative; display: flex; flex-direction: column; border-top: 4px solid var(--brand); background: var(--paper); transition: background 160ms; }
.s-card-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.s-card-foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 300ms; }
.s-card-texto { display: flex; flex-direction: column; flex: 1; padding: 20px 4px 4px; }
.s-cards h3 { font: 600 28px/1.15 var(--heading); letter-spacing: -.04em; margin-bottom: 8px; }
.s-cards h3 a { text-decoration: none; }
.s-cards h3 a::after { content: ""; position: absolute; inset: 0; }
.s-cards h3 a:focus-visible { outline: none; }
.s-cards h3 a:focus-visible::after { outline: 3px solid var(--brand-dark); outline-offset: 3px; }
.s-cards p { font-size: 20px; color: var(--muted); line-height: 1.4; }
.s-cards .hx-ir { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font: 700 19px/1.2 var(--body); color: var(--brand-dark); pointer-events: none; }
.s-cards .hx-ir .hx-arrow { width: 20px; height: 20px; }
.s-cards li:hover h3 { color: var(--brand-dark); }
.s-cards li:hover .hx-arrow { transform: translateX(4px); }
.s-cards li:hover img { transform: scale(1.03); }
@media (max-width: 760px) {
  .s-cards { grid-template-columns: 1fr; gap: 32px; }
  .s-card-foto { aspect-ratio: 3 / 2; }
  .s-cards h3 { font-size: 25px; }
}

/* Ruta: Inicio / Servicios / servicio. Va en una fila: si no cabe, el nombre de la página actual se corta con puntos
   suspensivos. El separador no se lee en voz alta y cada enlace gana 4 px de área de toque por lado. */
.s-migas { padding: 12px var(--pad) 0; font-size: 18px; line-height: 1.2; color: var(--muted); }
.s-migas ol { display: flex; align-items: center; }
.s-migas li { display: inline-flex; flex: none; align-items: center; min-height: 44px; }
.s-migas li:last-child { flex: 0 1 auto; min-width: 0; }
.s-migas li + li::before { content: "/"; content: "/" / ""; margin: 0 12px; color: var(--muted); }
.s-migas a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.s-migas a::after { content: ""; position: absolute; inset: 0 -4px; }
.s-migas a:hover { color: var(--ink); }
.s-migas [aria-current] { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 700; }

/* Encabezado del servicio: texto y acciones a la izquierda, fotografía a la derecha. */
.s-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); column-gap: clamp(32px, calc(4.5 * var(--vw)), 72px); align-items: center; padding: 20px var(--pad) 64px; }
.s-cabeza h1 { margin: 18px 0 20px; font-size: clamp(30px, calc(3.5 * var(--vw)), 52px); }
.s-cabeza .hx-sub { max-width: 30em; margin-bottom: 30px; }
.s-foto, .s-figura { position: relative; overflow: hidden; border-radius: 4px; background: var(--surface); }
.s-foto { aspect-ratio: 4 / 3; }
.s-foto img, .s-figura img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.s-foto .hx-rotulo, .s-figura .hx-rotulo { max-width: 100%; }
/* Al pasar el cursor, enfocar o tocar una fotografía aparece una capa con su descripción (sin cursor de mano: no es un enlace).
   Escape la cierra (site.js pone .sin-capa). */
.sin-capa .s-sobre { opacity: 0 !important; }
.s-sobre { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px, calc(2.4 * var(--vw)), 34px); padding-bottom: calc(clamp(18px, calc(2.4 * var(--vw)), 34px) + 40px); background: rgb(27 32 35 / 88%); color: white; font-size: 19px; line-height: 1.42; opacity: 0; transition: opacity 200ms; }
.s-sobre p { max-width: 32em; color: inherit; }
.s-sobre .s-sobre-titulo { font: 600 24px/1.15 var(--heading); letter-spacing: -.03em; color: var(--brand-light); }
.s-foto:hover .s-sobre, .s-foto:focus .s-sobre, .s-figura:hover .s-sobre, .s-figura:focus .s-sobre { opacity: 1; }
/* Con ratón, un clic deja el foco en la foto: sin esto la capa quedaría pegada al retirar el cursor. */
@media (hover: hover) { .s-foto:focus:not(:focus-visible):not(:hover) .s-sobre, .s-figura:focus:not(:focus-visible):not(:hover) .s-sobre { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s-sobre { transition: none; } }
@media print { .s-sobre { display: none; } }

/* Artículo y panel lateral. */
.s-cuerpo { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 380px); justify-content: space-between; column-gap: clamp(40px, calc(5 * var(--vw)), 88px); align-items: start; padding: 0 var(--pad) 88px; }
.s-articulo { min-width: 0; }
.s-seccion { padding: 34px 0 14px; border-top: 1px solid var(--line); }
.s-seccion h2 { margin-bottom: 16px; font: 600 clamp(26px, calc(2.6 * var(--vw)), 30px)/1.15 var(--heading); letter-spacing: -.04em; text-wrap: balance; }
.s-seccion > p { margin-bottom: 16px; text-wrap: pretty; }
.s-seccion > .s-nota { padding-left: 16px; border-left: 3px solid var(--brand-light); font-size: 20px; line-height: 1.4; color: var(--muted); }

/* Lista de término y explicación. */
.s-lista { margin: 6px 0 20px; }
.s-lista > div { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); column-gap: 28px; padding: 14px 0; border-top: 1px solid var(--line); }
.s-lista > div:last-child { border-bottom: 1px solid var(--line); }
.s-lista dt { font: 600 20px/1.3 var(--heading); letter-spacing: -.03em; }
.s-lista dd { font-size: 21px; line-height: 1.4; color: var(--muted); }

/* Pasos numerados. */
.s-pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; margin: 8px 0 20px; }
.s-pasos li { counter-increment: paso; padding-top: 14px; border-top: 2px solid var(--brand); }
.s-pasos li::before { content: counter(paso, decimal-leading-zero); display: block; margin-bottom: 8px; font: 700 15px/1 var(--body); letter-spacing: .13em; font-variant-numeric: tabular-nums; color: var(--brand-dark); }
.s-pasos strong { display: block; font: 600 20px/1.25 var(--heading); letter-spacing: -.03em; }
.s-pasos span { display: block; margin-top: 6px; font-size: 20px; line-height: 1.4; color: var(--muted); }
/* En el artículo las columnas miden 237 px: con 19 px los títulos más largos caben en una línea en ambos navegadores. */
.s-seccion .s-pasos strong { font-size: 19px; }

/* Ficha de un caso: tres columnas bajo un filete de marca. */
.s-ficha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 20px; border-top: 4px solid var(--brand); border-bottom: 1px solid var(--line); }
.s-ficha > div { padding: 18px 20px 20px 0; }
.s-ficha > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.s-ficha dt { margin-bottom: 8px; font: 700 14px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-dark); }
.s-ficha dd { font-size: 20px; line-height: 1.4; }

.s-figura { margin: 24px 0 14px; aspect-ratio: 3 / 2; }
.s-figura--v { max-width: 440px; aspect-ratio: 4 / 5; }

/* Panel «Para evaluar su caso»: acompaña la lectura en escritorio. */
.s-panel { position: sticky; top: 24px; margin-top: 34px; padding: 24px 26px 28px; background: var(--surface); border-top: 4px solid var(--brand); border-radius: 0 0 4px 4px; }
.s-panel h2 { margin-bottom: 10px; font: 600 24px/1.2 var(--heading); letter-spacing: -.035em; }
.s-panel p { font-size: 20px; line-height: 1.4; color: var(--muted); }
.s-panel ul { margin: 14px 0 22px; }
.s-panel li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); font-size: 20px; line-height: 1.3; }
.s-panel li:last-child { border-bottom: 1px solid var(--line); }
.s-panel li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--brand); }
.s-panel .hx-actions { flex-direction: column; }
.s-panel .hx-btn { width: 100%; }
.s-panel .hx-btn:not(.hx-btn--wsp) { justify-content: space-between; }

/* Proceso: los seis pasos del sitio. */
.s-proceso { padding: 64px var(--pad) 72px; background: var(--editorial); border-top: 1px solid var(--line); }
.s-proceso h2 { margin: 16px 0 12px; font: 600 40px/1.13 var(--heading); letter-spacing: -.042em; }
.s-proceso .hx-sub { max-width: 32em; margin-bottom: 34px; }
.s-proceso .s-pasos { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }

.s-otros .hx-needs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Índice de servicios. */
.s-indice { padding-top: 24px; padding-bottom: 20px; }
.s-indice h1 { margin: 18px 0 16px; }
.s-indice .hx-sub { max-width: 34em; margin-bottom: 28px; }
.s-tarjetas { padding-top: 28px; }

/* Franja final de contacto, carbón. Reemplaza al contacto simulado del prototipo: lleva a la portada, donde está el formulario. */
.s-contacto { padding: 64px var(--pad) 72px; background: var(--ink); color: white; }
.s-contacto h2 { font: 800 clamp(34px, calc(3.6 * var(--vw)), 52px)/1.05 var(--heading); letter-spacing: -.05em; margin: 18px 0 14px; }
.s-contacto > p:not(.hx-eyebrow, .s-directo) { color: #C9D4D8; max-width: 640px; margin-bottom: 28px; }
.s-contacto .hx-actions { margin-bottom: 28px; }
.s-directo { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.s-directo a { display: inline-flex; align-items: center; min-height: 44px; color: white; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.s-directo a:hover { color: var(--brand-light); }

@media (max-width: 1100px) {
  .s-cuerpo { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .s-articulo { max-width: 760px; }
  .s-panel { position: static; max-width: 760px; margin-top: 28px; }
  .s-panel .hx-actions { flex-direction: row; }
  .s-panel .hx-btn { width: auto; }
  .s-proceso .s-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-foto .hx-rotulo, .s-figura .hx-rotulo { font-size: 12px; letter-spacing: .08em; }
}
/* Con menos de 624 px de alto el panel no cabe entero: deja de acompañar para no quedar cortado. */
@media (min-width: 1101px) and (max-height: 650px) {
  .s-panel { position: static; }
}
/* Hasta 960 px el encabezado va apilado: en dos columnas el titular bajaba al tamaño de los h2 y los botones no cabían. */
@media (max-width: 960px) {
  .s-cabeza { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .s-cabeza h1 { font-size: clamp(33px, calc(6 * var(--vw)), 48px); }
  .s-foto { aspect-ratio: 3 / 2; }
}
@media (max-width: 760px) {
  .s-migas { padding-top: 6px; font-size: 17px; }
  .s-migas li + li::before { margin: 0 9px; }
  .s-cabeza { padding-top: 12px; padding-bottom: 44px; }
  .s-cabeza h1 { margin: 14px 0 16px; }
  .s-cabeza .hx-sub { margin-bottom: 24px; }
  .s-seccion { padding-top: 28px; }
  .s-lista > div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .s-lista dd { font-size: 20px; }
  .s-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-ficha { grid-template-columns: minmax(0, 1fr); }
  .s-ficha > div { padding: 16px 0; }
  .s-ficha > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .s-figura--v { max-width: none; }
  .s-panel { padding: 22px 20px 24px; }
  .s-panel .hx-actions { flex-direction: column; }
  .s-panel .hx-btn { width: 100%; }
  .s-proceso { padding: 44px 20px 52px; }
  .s-proceso h2 { font-size: 32px; }
  .s-proceso .s-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-otros .hx-needs { grid-template-columns: 1fr; }
  .s-contacto { padding: 48px 20px 56px; }
}
@media (max-width: 480px) {
  .s-pasos, .s-proceso .s-pasos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* El rótulo va bajo la foto, como franja: encima, partido en dos líneas, tapaba hasta una cuarta parte de la imagen. */
  .s-foto, .s-figura, .s-figura--v { aspect-ratio: auto; }
  .s-foto img, .s-figura img { height: auto; aspect-ratio: 3 / 2; }
  .s-figura--v img { aspect-ratio: 4 / 5; }
  .s-foto .hx-rotulo, .s-figura .hx-rotulo { position: relative; z-index: 1; display: block; }
  /* En teléfonos el rótulo queda bajo la foto y ya dice el título: la capa lleva solo la descripción. */
  .s-sobre { padding: 12px 14px 54px; font-size: 16px; line-height: 1.35; }
  .s-sobre .s-sobre-titulo { display: none; }
}

/* En el teléfono los botones van a todo el ancho: el de WhatsApp, centrado. */
@media (max-width: 760px) {
  .s-cabeza .hx-actions .hx-btn--wsp, .s-indice .hx-actions .hx-btn--wsp, .s-panel .hx-actions .hx-btn--wsp, .s-contacto .hx-actions .hx-btn--wsp { justify-content: center; }
}
/* Barra inferior de contacto (teléfono): WhatsApp entre «Evaluar» y «Llamar»; el pie queda libre por encima de ella (el scroll-padding-bottom de site.css cubre el foco). */
@media (max-width: 760px) {
  .mobile-contact--servicio > a:nth-child(2) { width: 64px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--brand-light); }
  .mobile-contact--servicio > a:first-child { gap: 16px; }
  /* A 360 px o menos «Evaluar mi caso» va en una línea, con aire a los lados. */
  @media (max-width: 360px) { .mobile-contact--servicio > a:first-child { gap: 10px; padding-inline: 12px; font-size: 20px; white-space: nowrap; } }
  [data-pagina="servicio"] .footer-bottom { margin-bottom: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-needs li, .s-cards li, .s-card-foto img { transition: none; }
}