/* Stratio · la hoja de la página (diseño de la ronda 7, H8a y H8b).
   Arma la página como las referencias del equipo (constructorres.com.ar,
   puntaldesarrollos.com, umohcrew.com) con la marca de Stratio:
   - arriba, una foto real a pantalla completa con el título gigante en
     MAYÚSCULAS blancas, el encabezado encima y la barra de servicios abajo;
   - etiquetas chicas en píldora sobre los títulos;
   - los servicios como lista de títulos con líneas y una flecha;
   - una cinta de palabras gigantes, los pasos numerados sobre una foto
     oscura, fotos grandes en un carril, reseñas sobre una foto;
   - el cierre con una palabra enorme y el WhatsApp flotando.
   Un solo acento (naranja, n.º 40): sobre claro va de fondo con la letra en
   tinta (5,9:1); sobre oscuro puede ir en letras. Sin <style> ni style=""
   en línea, para que la CSP no necesite unsafe-inline. */

@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fuentes/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/fuentes/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-display: swap; src: url("/fuentes/source-sans-3-300.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("/fuentes/source-sans-3-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("/fuentes/source-sans-3-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins respaldo"; src: local("Arial"); size-adjust: 112%; ascent-override: 94%; descent-override: 31%; line-gap-override: 0%; }

:root {
  --fondo: hsl(213 50% 97%);
  --hoja: hsl(213 50% 99%);
  --tinta: hsl(213 50% 10%);
  --tinta-2: hsl(213 35% 30%);
  --navy: #203d61;
  --n40: hsl(213 50% 40%);
  --n85: hsl(213 50% 85%);
  --borde-campo: hsl(213 35% 55%); /* borde de los campos: 3,4:1 sobre la tarjeta (WCAG 1.4.11) */
  --blue-gray: #6699cc;
  --pale-sky: #d1e0f0;
  --naranja: #ff5f00;
  --naranja-2: hsl(22 100% 56%);

  --f-titulo: "Poppins", "Poppins respaldo", system-ui, sans-serif;
  --f-texto: "Source Sans 3", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --borde: max(var(--gutter), (100vw - 1440px) / 2 + var(--gutter));
  --sec: clamp(4.5rem, 9vw, 8rem);
  --radio: 28px;
  --radio-foto: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--blue-gray) var(--fondo); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 300 1.125rem/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 0; color: var(--navy); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }
::selection { background: var(--navy); color: var(--pale-sky); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--blue-gray); border: 3px solid var(--fondo); border-radius: 8px; }

.wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
section[id] { scroll-margin-top: 1rem; }
main > section:not(.hero), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.sec { padding-block: var(--sec); }
.titulo { font-size: clamp(2.6rem, 6vw, 5.75rem); letter-spacing: -0.04em; line-height: 0.95; }
.intro { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.5; color: var(--tinta-2); max-width: 36rem; }

.saltar { position: absolute; left: var(--gutter); top: -4rem; z-index: 20; padding: 0.8rem 1.1rem; border-radius: 10px; background: var(--navy); color: var(--hoja); font: 700 1rem/1 var(--f-titulo); text-decoration: none; }
.saltar:focus { top: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 999px;
  font: 700 1rem/1 var(--f-titulo); letter-spacing: -0.02em; text-decoration: none; cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn-grande { min-height: 62px; padding: 0 1.9rem; font-size: 1.1rem; }
.btn-naranja { background: var(--naranja); color: var(--tinta); }
.btn-naranja:hover { background: var(--naranja-2); }
.btn-navy { background: var(--navy); color: var(--hoja); }
.btn-navy:hover { background: var(--n40); }
.btn-linea { color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn-linea:hover { background: var(--navy); color: var(--hoja); }
.flecha { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
.btn:hover .flecha { transform: translate(3px, -3px); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* El título del inicio: la palabra clave con el naranja de fondo y la letra en tinta (5,9:1). */
.h1-grande { display: block; font-size: clamp(3.4rem, 8.6vw, 8.5rem); line-height: 0.92; letter-spacing: -0.045em; color: var(--navy); }
.h1-baja { display: block; margin-top: 0.45em; font-size: clamp(1.7rem, 3.4vw, 3.3rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; color: var(--n40); }
.h1-baja em { font-style: normal; font-weight: 700; color: var(--tinta); background: var(--naranja); padding: 0 0.16em 0.04em; border-radius: 0.22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- Encabezado ---------- */
.site-header { position: relative; z-index: 10; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; }
.site-header .logo { display: block; flex: none; }
.site-header .logo img { height: 70px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav-links { display: flex; gap: clamp(1.25rem, 2.2vw, 2rem); }
.nav-links a { font: 500 1rem/1 var(--f-titulo); letter-spacing: -0.02em; color: var(--navy); text-decoration: none; padding: 0.6rem 0; border-bottom: 3px solid transparent; transition: border-color 200ms var(--ease); }
.nav-links a:hover { border-bottom-color: var(--naranja); }
.menu-btn { display: none; min-height: 48px; padding: 0 1.25rem; border: 0; border-radius: 999px; background: var(--navy); color: var(--hoja); font: 500 1rem/1 var(--f-titulo); cursor: pointer; }
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .site-header.menu-abierto .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: calc(100% - 0.25rem); left: var(--gutter); right: var(--gutter);
    padding: 0.5rem 1.25rem; border-radius: 22px; background: var(--hoja);
    box-shadow: 0 24px 48px -18px rgb(0 0 0 / 0.28);
  }
  .site-header.menu-abierto .nav-links a { padding: 1.1rem 0; font-size: 1.2rem; border-bottom: 1px solid var(--pale-sky); }
  .site-header.menu-abierto .nav-links a:last-of-type { border-bottom: 0; }
  .site-header .menu-btn[aria-expanded="true"] { background: var(--pale-sky); color: var(--navy); }
}
@media (max-width: 560px) { .site-header .nav > .btn { display: none; } }

/* ---------- Fotos reales ---------- */
.foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--radio-foto); background: var(--n85); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
/* Qué se ve en la foto: una etiqueta chica montada sobre el borde de abajo. */
.foto figcaption {
  position: absolute; left: 0.75rem; bottom: 0.75rem; max-width: calc(100% - 1.5rem);
  padding: 0.45rem 0.75rem 0.4rem; border-radius: 10px;
  background: var(--hoja); color: var(--navy);
  font: 500 0.92rem/1.2 var(--f-titulo); letter-spacing: -0.015em;
}
.barra { fill: var(--blue-gray); }
.ribete .r1, .ribete .r3 { fill: var(--navy); }
.ribete .r2 { fill: var(--pale-sky); }

/* ---------- Botones redondos de los carriles (servicios, reseñas) ---------- */
.riel-nav { display: flex; gap: 0.6rem; }
.riel-nav button { width: 58px; height: 58px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--navy); color: var(--hoja); cursor: pointer; transition: background-color 200ms var(--ease), opacity 200ms var(--ease); }
.riel-nav button:hover { background: var(--n40); }
.riel-nav button:disabled { opacity: 0.25; cursor: default; }

/* ---------- Equipo ---------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2.5vw, 2.5rem); }
.people li { display: grid; align-content: start; }
.people img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 24px; background: var(--pale-sky); }
.people b { justify-self: start; position: relative; margin: -1.6rem 0 0 clamp(0.75rem, 1.5vw, 1.25rem); padding: 0.7rem 1rem 0.6rem; border-radius: 14px 14px 14px 0; background: var(--navy); font: 700 clamp(1.15rem, 1.6vw, 1.5rem)/1.1 var(--f-titulo); letter-spacing: -0.035em; color: var(--hoja); }
.people li:nth-child(3n + 2) b { background: var(--blue-gray); color: var(--tinta); }
.people span { display: block; margin: 0.6rem 0 0 clamp(0.75rem, 1.5vw, 1.25rem); font-size: 1.05rem; line-height: 1.35; color: var(--tinta-2); }

/* ---------- Clientes ---------- */
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 5vw, 4.5rem); }
.logos li { display: grid; place-items: center; min-height: 84px; }
.logos img { height: auto; max-width: 100%; filter: brightness(0) invert(0.46); transition: filter 250ms var(--ease), transform 250ms var(--ease); }
.logos li:hover img { filter: none; transform: scale(1.06); }
/* Los de dos tonos (un trazo sobre un bloque de color, una letra con su sombra): con el filtro de arriba se
   aplastaban en una mancha. Estos pasan a gris conservando el claro y el oscuro. */
.logos img.tonos { filter: grayscale(1) contrast(1.15) opacity(0.6); }
.logos img.tonos-claros { filter: grayscale(1) brightness(0.55) contrast(2.5) opacity(0.62); }

/* ---------- Reseñas (el texto; cada propuesta arma su contenedor) ---------- */
.review { margin: 0; }
.review blockquote { margin: 0; font: 400 clamp(1.15rem, 1.4vw, 1.3rem)/1.5 var(--f-texto); }
.review figcaption b { display: block; font: 700 1.25rem/1.2 var(--f-titulo); letter-spacing: -0.03em; }

/* ---------- Contacto: un bloque naranja enorme y el formulario en una hoja encima ---------- */
.contacto-bloque { padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem) clamp(7rem, 12vw, 11rem); border-radius: var(--radio); background: var(--naranja); color: var(--tinta); }
.contacto-bloque h2 { font-size: clamp(3.5rem, 12vw, 12rem); line-height: 0.85; letter-spacing: -0.045em; color: var(--tinta); }
.contacto-bloque .intro { margin-top: 1.5rem; color: var(--tinta); font-weight: 400; }
.contacto-bloque :focus-visible { outline-color: var(--tinta); }
.contacto-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: start; margin: calc(-1 * clamp(4.5rem, 8vw, 7.5rem)) clamp(0rem, 3vw, 3rem) 0; }
.contact-links { list-style: none; margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem); display: grid; gap: 0.35rem; border-radius: 24px; background: var(--navy); }
.contact-links a { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem; border-radius: 14px; text-decoration: none; color: var(--hoja); transition: background-color 200ms var(--ease); }
.contact-links a:hover { background: var(--n40); }
.contact-links .ic { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--pale-sky); color: var(--navy); }
.contact-links b { display: block; font: 700 1.05rem/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.contact-links small { display: block; margin-top: 0.1rem; font-size: 0.98rem; color: var(--pale-sky); overflow-wrap: anywhere; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1rem; padding: clamp(1.1rem, 2.2vw, 1.75rem); border-radius: 24px; background: var(--hoja); box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.3); }
.contact-form > .full { grid-column: 1 / -1; }
.field { display: grid; gap: 0.35rem; }
.field label { font: 500 0.92rem/1 var(--f-titulo); letter-spacing: -0.02em; color: var(--navy); }
.field label small { font: 400 0.9rem/1 var(--f-texto); color: var(--tinta-2); }
.field input, .field textarea { min-height: 46px; padding: 0.55rem 0.85rem; border-radius: 12px; border: 1.5px solid var(--borde-campo); background: var(--fondo); color: var(--tinta); font: 400 1rem/1.4 var(--f-texto); caret-color: var(--naranja); transition: border-color 200ms var(--ease); }
.field textarea { min-height: 76px; resize: vertical; }
.contact-form .btn-grande { min-height: 50px; padding: 0 1.6rem; font-size: 1rem; }
.field input:hover, .field textarea:hover { border-color: var(--n40); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--navy); }
.field input[aria-invalid="true"] { border-color: hsl(22 100% 32%); }
.form-note a, .form-done a { color: var(--navy); }
.form-ayuda { margin-top: -0.35rem; font-size: 0.9rem; color: var(--tinta-2); }
/* El aviso de qué se guarda: debajo del botón, detrás de una «i» que se abre con un toque o con el teclado. */
.form-info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--pale-sky); font-size: 0.92rem; line-height: 1.5; color: var(--tinta-2); }
.form-info details { flex: 1 1 18rem; }
.form-info summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; list-style: none; color: var(--navy); cursor: pointer; }
.form-info summary::-webkit-details-marker { display: none; }
.form-info summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.form-i { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy); font: 700 0.8rem/1 var(--f-titulo); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.form-info details[open] .form-i { background: var(--navy); color: var(--hoja); }
.form-info details p { margin-top: 0.35rem; }
.form-info > a { display: inline-flex; align-items: center; min-height: 44px; }
.form-info a { color: var(--navy); }
.ts-slot:empty { display: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.form-foot .btn[disabled] { opacity: 0.6; cursor: progress; }
.form-status { color: var(--tinta-2); line-height: 1.45; }
.form-status.error { color: hsl(22 100% 32%); font-weight: 600; }
.form-note { font-size: 1rem; color: var(--tinta-2); }
.form-done { display: grid; gap: 0.75rem; align-content: start; padding: 2rem; border-radius: 24px; background: var(--hoja); box-shadow: 0 30px 60px -28px rgb(0 0 0 / 0.3); }
.form-done h3 { font-size: 1.75rem; }

/* ---------- Pie ---------- */
.site-footer { margin-top: var(--sec); background: var(--navy); color: var(--pale-sky); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-block: clamp(4rem, 7vw, 6rem) 3rem; }
.foot-brand img { height: clamp(70px, 6vw, 92px); width: auto; }
.foot-brand p { margin-top: 1.25rem; max-width: 24rem; }
.foot-brand .btn { margin-top: 1.5rem; }
.site-footer h2 { font: 700 1rem/1.2 var(--f-titulo); letter-spacing: -0.02em; color: var(--hoja); }
.site-footer ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.site-footer a { color: var(--pale-sky); text-decoration: none; }
.site-footer a:hover { color: var(--hoja); text-decoration: underline; }
.site-footer .social { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.site-footer .social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--n40); color: var(--hoja); }
.site-footer .social a:hover { background: var(--blue-gray); color: var(--tinta); }
.foot-legal span:last-child { margin-inline-end: 4.5rem; } /* deja libre el WhatsApp flotante */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.25rem 2rem; border-top: 1px solid var(--n40); font-size: 0.95rem; }

@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; }
  .contact-links { order: 2; grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .people { grid-template-columns: 1fr 1fr; gap: 2rem 0.75rem; }
  .people b { margin-left: 0.5rem; padding: 0.55rem 0.7rem 0.5rem; font-size: 1rem; }
  .people span { margin-left: 0.5rem; font-size: 0.98rem; }
  .contact-links { grid-template-columns: 1fr; }
  form { grid-template-columns: 1fr; }
  .contacto-grid { margin-inline: 0.5rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .acciones, .acciones .btn { width: 100%; }
  .riel-nav button { width: 50px; height: 50px; }
}

/* Movimiento común: el ribete se arma al cargar. Cada propuesta suma lo suyo. */
@media (prefers-reduced-motion: no-preference) {
  .ribete path { animation: armar 1.3s var(--ease) both; }
  .ribete .r2 { animation-delay: 0.3s; }
  .ribete .r3 { animation-delay: 0.55s; }
  @keyframes armar { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @supports (animation-timeline: view()) {
    .titulo, .contacto-bloque h2 { animation: entrar linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes entrar { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* ====================================================================
   La página
   ==================================================================== */
:root {
  --borde-claro: hsl(213 50% 88%);
  --velo: hsl(213 50% 8%);
}

/* ---------- Botones en píldora, con la flecha en su círculo ---------- */
.btn { min-height: 56px; padding: 0 0.45rem 0 1.5rem; gap: 0.9rem; font-size: 1rem; }
.btn:not(:has(.btn-circulo)) { padding: 0 1.5rem; }
.btn-circulo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tinta); color: var(--hoja); transition: transform 300ms var(--ease); }
.btn-circulo .flecha { width: 1.15em; height: 1.15em; }
.btn:hover .btn-circulo { transform: rotate(45deg); }
.btn:hover .btn-circulo .flecha { transform: none; }
.btn-vidrio { color: var(--hoja); background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-vidrio:hover { background: var(--hoja); color: var(--tinta); }
.btn-linea { gap: 0.7rem; }
.btn-linea .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); }

/* ---------- Etiqueta chica en píldora, con el punto naranja ---------- */
.etiqueta { display: inline-flex; align-items: center; gap: 0.55rem; margin-bottom: clamp(1.25rem, 2.4vw, 1.75rem); padding: 0.45rem 0.9rem 0.42rem; border: 1px solid var(--borde-claro); border-radius: 999px; font: 500 0.8rem/1 var(--f-titulo); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }
.etiqueta-clara { border-color: rgb(255 255 255 / 0.3); color: var(--pale-sky); }

/* El anillo de foco: navy sobre claro (10:1); naranja sobre lo oscuro (5,9:1). Naranja sobre claro no llega (2,8:1). */
:focus-visible { outline-color: var(--navy); }
.site-header :focus-visible, .hero :focus-visible, .servicios :focus-visible, .metodo :focus-visible, .resenas :focus-visible, .incluye :focus-visible, .contacto-foto :focus-visible, .contact-links :focus-visible, .site-footer :focus-visible { outline-color: var(--naranja); }

.titulo { font-size: clamp(2.1rem, 4.5vw, 4.4rem); line-height: 0.98; letter-spacing: -0.035em; }

/* ---------- Encabezado: encima de la foto, los links en una píldora oscura ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 15; transition: transform 450ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.site-header .bar { transition: padding 300ms var(--ease); }
.site-header.flotando { background: rgb(8 18 30 / 0.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.1); }
.site-header.flotando .bar { padding-block: 0.55rem; }
/* En la barra fija el logo va más chico que los 70 px del manual (lo pidió el equipo, n.º 103). */
.site-header .logo img { transition: height 300ms var(--ease); }
.site-header.flotando .logo img { height: 54px; }
.site-header.flotando .nav-links { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.oculto { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }
.site-header .bar { max-width: none; padding: 1.25rem var(--gutter); }
.nav-links { gap: 0.15rem; padding: 0.35rem; border-radius: 999px; background: rgb(8 18 30 / 0.74); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.nav-links a { padding: 0.75rem 1.1rem; border: 0; border-radius: 999px; color: var(--hoja); transition: background-color 200ms var(--ease); }
.nav-links a:hover { background: rgb(255 255 255 / 0.14); border: 0; }
.site-header .nav > .btn { min-height: 52px; }
/* Nada del encabezado parte en dos renglones. Debajo de 1080 px va el menú de teléfono (con cinco links, antes de eso el
   botón no entraba); y hasta 1280 px, los links más juntos y el botón sin su círculo. */
.nav-links a, .site-header .nav > .btn, .menu-btn { white-space: nowrap; }
@media (max-width: 1280px) {
  .nav { gap: 0.9rem; }
  .nav-links a { padding-inline: 0.8rem; font-size: 0.94rem; }
  .site-header .nav > .btn { padding: 0 1.25rem; }
  .site-header .nav > .btn .btn-circulo { display: none; }
}
.menu-btn { background: rgb(8 18 30 / 0.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 1080px) {
  .site-header.menu-abierto .nav-links { background: var(--hoja); backdrop-filter: none; box-shadow: 0 24px 48px -18px rgb(0 0 0 / 0.35); }
  .site-header.menu-abierto .nav-links a { color: var(--navy); border-radius: 0; }
  .site-header.menu-abierto .nav-links a:focus-visible { outline-color: var(--navy); }
}

/* ---------- Inicio: la foto a pantalla completa ---------- */
.hero { position: relative; display: grid; align-content: end; min-height: max(640px, 100svh); overflow: hidden; background: var(--velo); color: var(--hoja); }
.hero-foto, .hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-foto img { object-fit: cover; object-position: 50% 45%; }
.hero-foto::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(8 18 30 / 0.86) 0%, rgb(8 18 30 / 0.62) 42%, rgb(8 18 30 / 0.12) 100%),
  linear-gradient(0deg, rgb(8 18 30 / 0.75) 0%, rgb(8 18 30 / 0) 32%); }
.hero-contenido { position: relative; z-index: 1; width: 100%; padding-top: 9rem; padding-bottom: clamp(7.5rem, 11vw, 9.5rem); }
.hero h1 { color: var(--hoja); }
.h1-grande { display: block; font-size: clamp(2.6rem, 7vw, 7.3rem); line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; color: var(--hoja); }
.linea { display: block; overflow: hidden; padding-block: 0.22em 0.04em; margin-top: -0.22em; } /* deja lugar a la tilde de Ordená, Diagnóstico… */
.linea > span { display: block; }
.h1-baja { margin-top: 0.55em; font-size: clamp(1.4rem, 2.5vw, 2.35rem); color: var(--pale-sky); }
.hero .lede { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 31rem; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--pale-sky); }
.hero .acciones { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Una tarjeta de vidrio abajo a la derecha, que lleva a las fotos con clientes. */
.hero-tarjeta { position: absolute; z-index: 1; right: var(--gutter); bottom: 6.25rem; display: flex; align-items: center; gap: 1rem; width: min(22rem, 30vw); padding: 0.6rem 1.25rem 0.6rem 0.6rem; border-radius: 20px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--hoja); text-decoration: none; transition: background-color 250ms var(--ease); }
.hero-tarjeta:hover { background: rgb(255 255 255 / 0.2); }
.hero-tarjeta img { flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 14px; }
.hero-tarjeta b { display: block; font: 700 1.05rem/1.2 var(--f-titulo); letter-spacing: -0.02em; }
.hero-tarjeta small { display: inline-block; margin-top: 0.5rem; padding-bottom: 0.1rem; border-bottom: 1.5px solid var(--naranja); font: 500 0.88rem/1.2 var(--f-titulo); color: var(--pale-sky); }

/* La barra de servicios al pie de la foto. */
.hero-servicios { position: absolute; z-index: 1; inset: auto 0 0; border-top: 1px solid rgb(255 255 255 / 0.22); }
.hero-servicios ul { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; justify-content: space-between; }
.hero-servicios li { display: flex; align-items: center; }
.hero-servicios li + li::before { content: ""; flex: none; width: 3px; height: 1.7rem; margin-right: clamp(1rem, 3vw, 2.5rem); background: var(--blue-gray); transform: skewX(-23deg); }
.hero-servicios a[aria-current="page"], .hero-servicios a[aria-current="true"] { color: var(--naranja); }
.hero-servicios a { display: block; padding: 1.35rem 0; font: 500 0.88rem/1 var(--f-titulo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hoja); text-decoration: none; transition: color 200ms var(--ease); }
.hero-servicios a:hover { color: var(--naranja); }
/* En pantallas angostas la tira avanza sola (app.js le suma una copia de los rótulos para dar la vuelta). */
@media (min-width: 901px) { .hero-servicios li[aria-hidden="true"] { display: none; } }

/* ---------- ¿Te pasa esto? Una frase grande y tres columnas con línea ---------- */
.frase { max-width: 24ch; font: 500 clamp(1.8rem, 3.9vw, 3.8rem)/1.2 var(--f-titulo); letter-spacing: -0.035em; color: var(--navy); }
.frase em { font-style: normal; font-weight: 700; color: var(--tinta); background: linear-gradient(var(--naranja), var(--naranja)) no-repeat 0 0 / 100% 100%; padding: 0 0.12em; border-radius: 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pasa-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--borde-claro); }
.pasa-cab .titulo { font-size: clamp(1.9rem, 3.6vw, 3.4rem); max-width: 16ch; }
.pasa-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pasa-lista li { padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.5rem) 0; }
.pasa-lista li:first-child { padding-left: 0; }
.pasa-lista li + li { border-left: 1px solid var(--borde-claro); }
.pasa-lista h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 14ch; }
.pasa-lista p { margin-top: 1rem; color: var(--tinta-2); max-width: 32ch; }
.pasa-lista .etiqueta { margin: 1.25rem 0 0; max-width: none; color: var(--navy); }
.pasa-accion { margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Servicios: fondo tinta, la lista gigante en mayúsculas ---------- */
.servicios { background: var(--tinta); color: var(--pale-sky); }
.servicios { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.serv-cab { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: end; }
.serv-cab .etiqueta { grid-column: 1 / -1; justify-self: start; }
.serv-cab h2 { font-size: clamp(2rem, 3.7vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; color: var(--hoja); max-width: 24ch; }
.serv-cab p { justify-self: end; font-size: 1.2rem; max-width: 30rem; }
.serv-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: clamp(2rem, 3.5vw, 3rem); }
.serv-fotos { position: sticky; top: 2rem; aspect-ratio: 5 / 4; border-radius: 22px; overflow: hidden; background: var(--navy); }
.serv-foto { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity 500ms var(--ease), transform 900ms var(--ease); }
.serv-foto.activa { opacity: 1; transform: none; }
.serv-foto img { width: 100%; height: 100%; object-fit: cover; }
.serv-lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.serv-lista li { border-top: 1px solid rgb(255 255 255 / 0.16); }
.serv-lista a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: center; padding: 0.95rem 0; color: var(--hoja); text-decoration: none; }
.serv-num { font: 500 0.85rem/1 var(--f-titulo); color: var(--blue-gray); }
.serv-nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; }
.serv-nombre b { font: 700 clamp(1.45rem, 2.3vw, 2.2rem)/1 var(--f-titulo); letter-spacing: -0.02em; text-transform: uppercase; transition: color 250ms var(--ease), transform 400ms var(--ease); }
.serv-nombre > span { font: 500 clamp(0.95rem, 1.1vw, 1.05rem)/1.2 var(--f-titulo); letter-spacing: -0.01em; color: var(--blue-gray); }
.serv-flecha { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.3); transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease), transform 400ms var(--ease); }
.flecha-abajo { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* El texto de cada servicio está plegado y se abre al pasar el cursor o al llegar con el teclado.
   En pantallas táctiles no hay cursor: ahí queda siempre a la vista. */
.serv-texto { grid-column: 2 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 450ms var(--ease); }
.serv-texto > span { min-height: 0; overflow: hidden; max-width: 46ch; font-size: 1.05rem; line-height: 1.45; color: var(--pale-sky); }
.serv-texto > span::before { content: ""; display: block; height: 0.55rem; }
.serv-lista a:hover .serv-texto, .serv-lista a:focus-visible .serv-texto { grid-template-rows: 1fr; }
@media (hover: none) { .serv-texto { grid-template-rows: 1fr; } }
.serv-lista a:hover b, .serv-lista a:focus-visible b, .serv-lista a.activo b { color: var(--naranja); transform: translateX(0.35rem); }
.serv-lista a:hover .serv-flecha, .serv-lista a:focus-visible .serv-flecha { background: var(--naranja); color: var(--tinta); box-shadow: none; transform: rotate(-90deg); }
.servicios :focus-visible { outline-offset: 6px; }

/* ---------- La cinta: palabras llenas y de contorno ---------- */
.cinta { overflow: hidden; padding-block: clamp(1.1rem, 2vw, 1.75rem); border-bottom: 1px solid var(--borde-claro); }
.cinta-pista { display: flex; align-items: center; width: max-content; }
.cinta span { padding-inline: 0.35em; font: 700 clamp(1.5rem, 3.4vw, 3.25rem)/1 var(--f-titulo); letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.cinta .c0 { color: var(--navy); }
.cinta .c1 { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.cinta .c2 { color: var(--blue-gray); }
.cinta .c3 { color: transparent; -webkit-text-stroke: 1.5px var(--blue-gray); }
.cinta .barra { flex: none; height: clamp(1.2rem, 2.7vw, 2.6rem); width: auto; fill: var(--naranja); }
/* En el inicio va en una caja de vidrio, como la tarjeta de arriba de la foto (lo pidió la persona el 09-10),
   montada sobre la unión entre «Servicios» (tinta) y «¿Cómo trabajamos?» (navy): el vidrio deja ver el cambio de fondo. */
.cinta-vidrio { overflow: visible; padding: 0 var(--gutter); border: 0; background: linear-gradient(var(--tinta) 50%, var(--navy) 50%); }
.cinta-caja { overflow: hidden; max-width: calc(1440px - 2 * var(--gutter)); margin-inline: auto; padding-block: clamp(0.9rem, 1.6vw, 1.35rem); border-radius: 20px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* Sobre el vidrio, todo en claro: el blue-gray no llegaba (2,6:1 sobre la mitad navy); blanco da 7,8:1 y pale-sky 5,8:1. */
.cinta-vidrio .c0 { color: var(--hoja); }
.cinta-vidrio .c1 { -webkit-text-stroke: clamp(1.5px, 0.15vw, 2.25px) var(--hoja); }
.cinta-vidrio .c2 { color: var(--pale-sky); }
.cinta-vidrio .c3 { -webkit-text-stroke: clamp(1.5px, 0.15vw, 2.25px) var(--pale-sky); }

/* ---------- Cómo trabajamos: los pasos numerados sobre el navy, con el ribete del logo de fondo ---------- */
.metodo { position: relative; overflow: hidden; padding-block: var(--sec); background: var(--navy); color: var(--pale-sky); }
/* Sin foto (H16, n.º 104): el ribete del logo, grande y centrado, en su versión de fondo oscuro (docs/MARCA.md:
   los trazos en Blue Gray y la pieza del medio en Pale Sky), aclarado para que el texto de encima se siga leyendo. */
.metodo .ribete { position: absolute; left: 50%; top: -6%; height: 112%; width: auto; translate: -50% 0; opacity: 0.3; }
.metodo .ribete .r1, .metodo .ribete .r3 { fill: var(--blue-gray); }
.metodo .ribete .r2 { fill: var(--pale-sky); }
.metodo .wrap { position: relative; }
.metodo h2 { font-size: clamp(2.2rem, 5vw, 5rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--hoja); }
.pasos { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.pasos li { padding: 0 clamp(1rem, 2vw, 1.75rem) 0.5rem; border-left: 1px solid rgb(255 255 255 / 0.25); }
@media (min-width: 1001px) {
  .pasos li:nth-child(2) { margin-top: 3rem; }
  .pasos li:nth-child(3) { margin-top: 6rem; }
  .pasos li:nth-child(4) { margin-top: 9rem; }
}
.paso-num { display: block; font: 700 clamp(2.8rem, 4.4vw, 4.2rem)/1 var(--f-titulo); letter-spacing: -0.03em; color: var(--naranja); }
.pasos h3 { margin-top: 1.25rem; font-size: 1.15rem; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; color: var(--hoja); }
.pasos p { margin-top: 0.75rem; font-size: 1.08rem; color: var(--pale-sky); }

/* ---------- Así se ve trabajar con nosotros: un carril de fotos grandes ---------- */
.trabajo-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.trabajo-cab .titulo { max-width: 13ch; }
.riel { scrollbar-width: thin; scrollbar-color: var(--blue-gray) transparent; }
.trabajo-riel { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0 var(--borde) 1.25rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(430px, 78vw); gap: clamp(1rem, 1.6vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde); overscroll-behavior-x: contain; }
/* Se corre de costado con el dedo, las flechas o el teclado. Sin barra a la vista y sin scroll hacia abajo adentro
   (las fotos que entran moviéndose lo hacían aparecer). */
.trabajo-riel { overflow-y: hidden; scrollbar-width: none; }
.trabajo-riel::-webkit-scrollbar { display: none; }
.trabajo-riel li { scroll-snap-align: start; }
.trabajo-riel figure { margin: 0; }
.trabajo-riel img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; background: var(--n85); transition: transform 600ms var(--ease), border-radius 600ms var(--ease); }
.trabajo-riel figure:hover img { transform: scale(0.98); border-radius: 32px; }

/* ---------- Quiénes somos ---------- */
.equipo { padding-top: 0; }
/* La etiqueta arriba, sola; debajo, el título y el texto arrancan a la misma altura y terminan parejos. */
.equipo-cab { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.25rem, 2.4vw, 1.75rem) clamp(2rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.equipo-cab .etiqueta { grid-column: 1 / -1; justify-self: start; margin-bottom: 0; }
.equipo-texto { display: grid; gap: 0.9rem; padding-top: 0.3rem; }
.equipo-texto .intro { max-width: none; }
.equipo-texto p:not(.intro) { color: var(--tinta-2); }
@media (min-width: 1101px) { .people { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem 1rem; } .people b { font-size: 1.05rem; margin-left: 0.6rem; } .people span { margin-left: 0.6rem; font-size: 0.98rem; } }
.people li:nth-child(3n + 2) b { background: var(--navy); color: var(--hoja); }
.people img { border-radius: 22px; transition: transform 500ms var(--ease); }
.people li:hover img { transform: translateY(-0.4rem); }

/* ---------- Reseñas: las tarjetas claras sobre el fondo tinta, sin foto (H16) ---------- */
.resenas { position: relative; overflow: hidden; padding-block: var(--sec); background: var(--tinta); }
.resenas-grid { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.resenas-cab h2 { font-size: clamp(2.2rem, 4.5vw, 4.5rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--hoja); }
.resenas-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); align-items: start; }
.resenas-lista .review { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: 22px; background: var(--hoja); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
.resenas-lista .review:nth-child(2) { margin-top: 2.5rem; }
.resenas-lista .review::after { content: "”"; position: absolute; top: 0.9rem; right: 1.25rem; font: 700 4.5rem/1 var(--f-titulo); color: var(--naranja); }
.review-logo { height: 52px; width: auto; max-width: 62%; object-fit: contain; object-position: left; }
.review blockquote { color: var(--tinta); font-size: 1.08rem; }
.review figcaption b { color: var(--navy); }
.review figcaption span { color: var(--tinta-2); font-size: 0.98rem; }

/* ---------- Clientes ---------- */
.clientes-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.clientes-cab p { max-width: 24rem; color: var(--tinta-2); }


/* ---------- ¿Charlamos? La palabra enorme sobre la foto y el formulario encima ---------- */
.contacto-foto { position: relative; overflow: hidden; display: grid; align-content: end; min-height: clamp(520px, 80vh, 820px); padding-block: 8rem clamp(10rem, 16vw, 14rem); background: var(--velo); color: var(--pale-sky); }
/* Las personas están a la izquierda de la foto: en teléfono, el recorte se corre hacia ellas. */
.contacto-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% center; opacity: 0.42; }
.contacto-foto .wrap { position: relative; width: 100%; }
.contacto-foto h2 { font-size: clamp(2.6rem, 8.2vw, 8.5rem); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: var(--hoja); }
.contacto-foto .intro { margin-top: 1rem; color: var(--pale-sky); }
.contacto-grid { margin-top: calc(-1 * clamp(6rem, 11vw, 10rem)); }
.contacto-grid { margin-inline: auto; }

/* ---------- Pie ---------- */
.site-footer { margin-top: var(--sec); background: var(--tinta); }
/* El botón naranja lleva siempre la letra en tinta (5,9:1), también en el pie. */
.site-footer .btn-naranja, .site-footer .btn-naranja:hover { color: var(--tinta); text-decoration: none; }

/* ---------- WhatsApp, siempre a mano ---------- */
.wa-flotante { position: fixed; z-index: 20; right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--navy); color: var(--hoja); box-shadow: 0 16px 32px -12px rgb(0 0 0 / 0.5), inset 0 0 0 1.5px rgb(255 255 255 / 0.2); transition: background-color 200ms var(--ease), transform 300ms var(--ease); }
.wa-flotante svg { width: 26px; height: 26px; }
.wa-flotante::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--naranja); opacity: 0; }
.js .wa-flotante:not(.visible) { transform: scale(0); visibility: hidden; transition: transform 300ms var(--ease), visibility 0s 300ms; }
.wa-flotante:hover { background: var(--naranja); color: var(--tinta); transform: translateY(-3px); }

/* ====================================================================
   /servicios/ y las cinco páginas de servicio
   ==================================================================== */
.hero-baja { min-height: max(540px, 76svh); }
.h1-media { font-size: clamp(2.2rem, 5.2vw, 5.4rem); line-height: 0.95; }
.p-servicio .h1-grande { font-size: clamp(2.5rem, 6.6vw, 7rem); }
.migas { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.migas a { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); font: 500 0.8rem/1 var(--f-titulo); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hoja); text-decoration: none; transition: background-color 200ms var(--ease); }
.migas a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }
.migas a:hover { background: rgb(255 255 255 / 0.14); }

/* /servicios/: cada servicio con su foto, de un lado y del otro */
.service { padding-block: var(--sec); }
.service + .service { border-top: 1px solid var(--borde-claro); }
.service-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; }
.service-inv .service-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.service-inv .service-foto { order: 2; }
.service-foto { position: relative; margin: 0; }
.service-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; background: var(--n85); }
.service-num { position: absolute; left: 1rem; top: 1rem; padding: 0.5rem 0.85rem 0.45rem; border-radius: 999px; background: var(--hoja); font: 700 0.95rem/1 var(--f-titulo); color: var(--navy); }
.service-texto h2 { font-size: clamp(2.2rem, 4.6vw, 4.5rem); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.service-texto .que { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 38rem; font-size: clamp(1.15rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--tinta-2); }
.service-texto h3.etiqueta { margin: clamp(2rem, 3.5vw, 3rem) 0 0.25rem; }
.citas { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--borde-claro); }
.citas li { display: grid; gap: 0.35rem; padding: 1.1rem 0; border-top: 1px solid var(--borde-claro); }
.citas li:first-child { border-top: 0; }
.citas b { font: 700 clamp(1.1rem, 1.4vw, 1.3rem)/1.2 var(--f-titulo); letter-spacing: -0.02em; color: var(--navy); }
.citas span { color: var(--tinta-2); max-width: 46ch; }
.service-texto .btn { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.btn-navy .btn-circulo { background: var(--naranja); color: var(--tinta); }

/* Página de un servicio */
.que-grid, .preguntas-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.que-frase { font: 500 clamp(1.5rem, 2.5vw, 2.3rem)/1.2 var(--f-titulo); letter-spacing: -0.03em; color: var(--navy); }
.que-cuerpo p + p { margin-top: 1.5rem; max-width: 38rem; font-size: 1.2rem; color: var(--tinta-2); }
.pasa-servicio { background: var(--pale-sky); }
.pasa-servicio .pasa-cab { margin-top: 0; border-bottom-color: rgb(32 61 97 / 0.22); }
.pasa-servicio .pasa-cab .intro { max-width: 24rem; color: var(--tinta); }
.pasa-servicio .pasa-lista li + li { border-color: rgb(32 61 97 / 0.22); }
.pasa-servicio .pasa-lista p { color: var(--tinta); }
.incluye { background: var(--tinta); color: var(--pale-sky); }
.incluye-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.incluye-cab { position: sticky; top: 2rem; }
.incluye h2 { font-size: clamp(2.2rem, 5vw, 5rem); line-height: 0.95; letter-spacing: -0.035em; color: var(--hoja); }
.entrega { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 30rem; font-size: 1.15rem; }
.incluye-lista { list-style: none; margin: 0; padding: 0; counter-reset: inc; border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.incluye-lista li { counter-increment: inc; position: relative; padding: clamp(1.1rem, 2vw, 1.6rem) 0 clamp(1.1rem, 2vw, 1.6rem) clamp(3rem, 5vw, 4.5rem); border-top: 1px solid rgb(255 255 255 / 0.16); font: 500 clamp(1.2rem, 1.9vw, 1.75rem)/1.2 var(--f-titulo); letter-spacing: -0.025em; color: var(--hoja); }
.incluye-lista li::before { content: counter(inc, decimal-leading-zero); position: absolute; left: 0; top: clamp(1.25rem, 2.2vw, 1.9rem); font: 700 0.95rem/1 var(--f-titulo); letter-spacing: 0; color: var(--naranja); }
.faq { border-bottom: 1px solid var(--borde-claro); }
.faq details { border-top: 1px solid var(--borde-claro); }
.faq summary { position: relative; list-style: none; padding: 1.4rem 3.75rem 1.4rem 0; font: 700 clamp(1.15rem, 1.6vw, 1.45rem)/1.2 var(--f-titulo); letter-spacing: -0.025em; color: var(--navy); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--navy); font: 500 1.6rem/1 var(--f-titulo); transition: transform 300ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--navy); color: var(--hoja); }
.faq summary:hover::after { background: var(--navy); color: var(--hoja); }
.faq details p { padding: 0 3.75rem 1.6rem 0; max-width: 46rem; color: var(--tinta-2); font-size: 1.15rem; }
.otros .serv-cab { margin-bottom: 0; }

/* ---------- Celular y tableta ---------- */
@media (max-width: 1100px) {
  .pasos { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}
@media (max-width: 1000px) {
  .serv-grid { grid-template-columns: 1fr; }
  .serv-fotos { display: none; }
  .hero-tarjeta { display: none; }
}
@media (max-width: 900px) {
  .hero-servicios ul { overflow-x: auto; justify-content: start; gap: 1.1rem; scrollbar-width: none; }
  .hero-servicios li + li::before { margin-right: 1.1rem; }
  .hero-servicios a { white-space: nowrap; font-size: 0.82rem; }
  .serv-cab, .equipo-cab, .service-grid, .que-grid, .preguntas-grid, .incluye-grid { grid-template-columns: 1fr; }
  .service-inv .service-grid { grid-template-columns: 1fr; }
  .service-inv .service-foto { order: 0; }
  .service-foto img { aspect-ratio: 4 / 3; }
  .incluye-cab { position: static; }
  .serv-cab p { margin-top: 1.25rem; }
  .pasa-lista { grid-template-columns: 1fr; }
  .resenas-lista { grid-template-columns: 1fr; }
  .resenas-lista .review:nth-child(n) { margin-top: 0; }
  .pasa-lista li, .pasa-lista li:first-child { padding: 1.75rem 0 0; }
  .pasa-lista li + li { border-left: 0; border-top: 1px solid var(--borde-claro); margin-top: 1.75rem; }
}
@media (max-width: 700px) {
  .hero-foto img { object-position: 50% 50%; }
  .hero-foto::after { background: linear-gradient(0deg, rgb(8 18 30 / 0.92) 0%, rgb(8 18 30 / 0.7) 48%, rgb(8 18 30 / 0.25) 100%); }
  .hero-contenido { padding-top: 8rem; padding-bottom: 6rem; }
  .serv-lista a { grid-template-columns: minmax(0, 1fr) auto; padding: 1.4rem 0; }
  .serv-nombre { gap: 0.3rem 0.6rem; }
  .serv-nombre b { font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.01em; }
  .serv-texto > span::before { height: 0.8rem; }
  .serv-num { display: none; }
  .serv-texto { grid-column: 1 / -1; }
  .pasos { grid-template-columns: 1fr; }
  /* En teléfono el logo arranca en 50 px, a la par del botón del menú, y al bajar achica a 42 (n.º 105). */
  .site-header .logo img { height: 50px; }
  .site-header.flotando .logo img { height: 42px; }
  .contacto-foto h2 { font-size: 10vw; }
  .metodo .ribete { top: 2%; height: 52%; opacity: 0.22; }
}

/* ====================================================================
   El 404: los números desordenados; un botón los ordena
   ==================================================================== */
.e404 { position: relative; display: grid; align-content: end; min-height: max(640px, 100svh); overflow: hidden; background: var(--tinta); color: var(--pale-sky); }
.e404-texto { position: relative; z-index: 2; width: 100%; padding-top: 9rem; padding-bottom: clamp(8rem, 13vw, 11rem); }
.e404 h1 { font-size: clamp(2.6rem, 6.4vw, 6.4rem); line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; color: var(--hoja); max-width: 12ch; }
.e404 .lede { margin-top: clamp(1.25rem, 2vw, 1.75rem); max-width: 31rem; font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--pale-sky); }
.e404 .acciones { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.e404-numeros { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.02em; padding-right: 3vw; font: 700 clamp(8rem, 27vw, 28rem)/0.8 var(--f-titulo); letter-spacing: -0.04em; pointer-events: none; }
.e404 .d { display: block; translate: calc(var(--mx, 0) * var(--f) * 1px) calc(var(--my, 0) * var(--f) * 1px); rotate: var(--r); transition: rotate 900ms cubic-bezier(0.34, 1.4, 0.44, 1), translate 500ms var(--ease); pointer-events: auto; cursor: grab; }
.e404 .d b { display: block; font-weight: 700; color: transparent; -webkit-text-stroke: 2px var(--blue-gray); transition: color 600ms var(--ease), -webkit-text-stroke-color 600ms var(--ease); }
.e404 .d1 { --r: -14deg; --f: 26; margin-top: -0.12em; }
.e404 .d2 { --r: 9deg; --f: -40; margin-top: 0.22em; }
.e404 .d2 b { -webkit-text-stroke-color: var(--naranja); }
.e404 .d3 { --r: 22deg; --f: 34; margin-top: -0.2em; }
.e404.ordenado .d { --r: 0deg; --f: 0; margin-top: 0; }
.e404.ordenado .d b { color: var(--hoja); -webkit-text-stroke-color: var(--hoja); }
.e404.ordenado .d2 b { color: var(--naranja); -webkit-text-stroke-color: var(--naranja); }
/* Las barras: sueltas por la pantalla; al ordenar, se acomodan como un gráfico que sube. */
.e404-barras { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.e404 .b { position: absolute; left: var(--x); top: var(--y); width: clamp(10px, 1.3vw, 20px); height: var(--h); border-radius: 3px; background: var(--blue-gray); rotate: var(--g); transform: skewX(-23deg); transition: left 900ms var(--ease), top 900ms var(--ease), height 900ms var(--ease), rotate 900ms var(--ease), background-color 600ms var(--ease); }
.e404 .b1 { --x: 6%; --y: 22%; --h: 9vh; --g: 38deg; }
.e404 .b2 { --x: 31%; --y: 14%; --h: 6vh; --g: -52deg; background: var(--naranja); }
.e404 .b3 { --x: 47%; --y: 71%; --h: 11vh; --g: 71deg; }
.e404 .b4 { --x: 58%; --y: 9%; --h: 7vh; --g: 17deg; background: var(--n40); }
.e404 .b5 { --x: 78%; --y: 78%; --h: 8vh; --g: -33deg; }
.e404 .b6 { --x: 90%; --y: 17%; --h: 12vh; --g: 60deg; background: var(--n40); }
.e404 .b7 { --x: 20%; --y: 58%; --h: 5vh; --g: -74deg; background: var(--naranja); }
.e404.ordenado .b { --g: 0deg; top: auto; bottom: clamp(7rem, 12vw, 10rem); background: var(--blue-gray); }
.e404.ordenado .b1 { --x: 74%; --h: 6vh; }
.e404.ordenado .b2 { --x: 77%; --h: 9vh; }
.e404.ordenado .b3 { --x: 80%; --h: 12vh; }
.e404.ordenado .b4 { --x: 83%; --h: 15vh; }
.e404.ordenado .b5 { --x: 86%; --h: 18vh; }
.e404.ordenado .b6 { --x: 89%; --h: 22vh; }
.e404.ordenado .b7 { --x: 92%; --h: 27vh; background: var(--naranja); }
.e404.ordenado .b { top: calc(100% - clamp(7rem, 12vw, 10rem) - var(--h)); }
.cinta-404 { position: absolute; z-index: 1; inset: auto 0 0; padding-block: 1.1rem; border: 0; border-top: 1px solid rgb(255 255 255 / 0.16); }
.cinta-404 span { font-size: clamp(1.4rem, 3vw, 2.6rem); }
.cinta-404 .c1 { -webkit-text-stroke: 1.5px var(--pale-sky); }
.cinta-404 .c3 { color: var(--hoja); -webkit-text-stroke: 0; }
.cinta-404 .barra { height: clamp(1.1rem, 2.4vw, 2rem); }
.p-404 .site-footer { margin-top: 0; }
@media (max-width: 700px) {
  .e404-numeros { align-items: flex-start; justify-content: center; padding: 6.5rem 0 0; font-size: 44vw; }
  .e404-texto { padding-top: 62vw; padding-bottom: 6.5rem; }
  .e404-barras { inset: 0 0 auto; height: calc(62vw + 5rem); }
  .e404.ordenado .b { display: none; }
}

/* ====================================================================
   /gracias/, /formulario-error/ y /privacidad/
   ==================================================================== */
/* Los avisos usan la pantalla del 404, con el ribete del logo en lugar de los números. */
.aviso .ribete { position: absolute; z-index: 1; right: 5vw; bottom: -4%; height: 92%; width: auto; }
.aviso .ribete .r1 { fill: var(--navy); }
.aviso .ribete .r2 { fill: var(--blue-gray); }
.aviso .ribete .r3 { fill: var(--naranja); }
.aviso h1 { max-width: 13ch; }
.aviso .e404-texto { padding-bottom: clamp(4rem, 8vw, 7rem); }
.p-aviso .site-footer, .p-legal .site-footer { margin-top: 0; }
.hero-texto { min-height: 0; background: var(--tinta); }
.hero-texto .hero-contenido { padding-top: clamp(9rem, 14vw, 12rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.p-legal h1 { font-size: clamp(2.4rem, 6.4vw, 6.4rem); line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; color: var(--hoja); }
.p-legal .hero .lede { max-width: 40rem; }
.legal { padding-block: clamp(2rem, 5vw, 4rem) var(--sec); }
.legal > * { max-width: 46rem; }
.legal h2 { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--borde-claro); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.05; letter-spacing: -0.03em; }
.legal p, .legal li { margin-top: 1rem; font-size: 1.15rem; color: var(--tinta-2); }
.legal ul { margin: 0; padding-left: 1.25rem; }
.legal li::marker { color: var(--naranja); }
.legal a { color: var(--navy); font-weight: 400; }
@media (max-width: 700px) {
  .aviso .ribete { right: -12%; bottom: auto; top: 5.5rem; height: 46%; opacity: 0.55; }
}

/* ====================================================================
   Movimiento. Todo se ve sin esperar a nada: lo que entra al bajar lo
   prepara app.js sólo para lo que todavía no está en pantalla (clase
   "antes"); sin JavaScript o con movimiento reducido, queda todo quieto y
   visible.
   ==================================================================== */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* Entre una página y otra: la vieja se va hacia arriba, la nueva entra desde abajo. */
  ::view-transition-old(root) { animation: 280ms var(--ease) both pagina-sale; }
  ::view-transition-new(root) { animation: 520ms var(--ease) both pagina-entra; }
  @keyframes pagina-sale { to { opacity: 0; transform: translateY(-2rem); } }
  @keyframes pagina-entra { from { opacity: 0; transform: translateY(3rem); } }

  /* Al cargar: la foto se acomoda, el título sube por renglones, el resto entra en escalera. */
  .hero-foto img { animation: acomodar 2.4s var(--ease) both; }
  @keyframes acomodar { from { transform: scale(1.12); } }
  .linea > span { animation: subir 1s var(--ease) both; }
  .linea + .linea > span { animation-delay: 0.12s; }
  @keyframes subir { from { transform: translateY(105%); } }
  .hero .h1-baja, .hero .lede, .hero .acciones, .hero .migas, .hero-tarjeta, .e404 .etiqueta, .e404 h1, .e404-mensaje, .e404 .acciones { animation: asomar 900ms var(--ease) both; }
  .hero .h1-baja { animation-delay: 0.3s; }
  .hero .lede, .e404-mensaje { animation-delay: 0.42s; }
  .hero .acciones, .e404 .acciones { animation-delay: 0.54s; }
  .hero-tarjeta { animation-delay: 0.8s; }
  @keyframes asomar { from { opacity: 0; transform: translateY(1.5rem); } }
  .h1-baja em { animation: pintar 800ms var(--ease) 0.75s both; background: linear-gradient(var(--naranja), var(--naranja)) no-repeat 0 0 / 100% 100%; }
  @keyframes pintar { from { background-size: 0% 100%; color: var(--hoja); } }
  .hero-servicios li { animation: asomar 700ms var(--ease) both; animation-delay: calc(0.7s + var(--i, 0) * 70ms); }
  .hero-servicios li:nth-child(2) { --i: 1; } .hero-servicios li:nth-child(3) { --i: 2; } .hero-servicios li:nth-child(4) { --i: 3; } .hero-servicios li:nth-child(5) { --i: 4; }

  /* La cinta pasa sola y se frena al pasar el mouse. */
  .cinta-pista { animation: cinta 30s linear infinite; }
  .cinta:hover .cinta-pista { animation-play-state: paused; }
  @keyframes cinta { to { transform: translateX(-33.333%); } }

  /* Lo que entra al bajar. */
  .anim-sube, .anim-item, .anim-foto { transition: opacity 800ms var(--ease), transform 900ms var(--ease), clip-path 1s var(--ease); }
  .anim-sube.antes { opacity: 0; transform: translateY(0.6em); clip-path: inset(0 0 100% 0); }
  .anim-sube { clip-path: inset(-0.2em -0.1em -0.3em -0.1em); }
  .anim-item.antes { opacity: 0; transform: translateY(2.75rem); }
  .anim-foto.antes { opacity: 0; transform: translateY(2rem) scale(0.96); clip-path: inset(12% 0 0 0 round 24px); }
  .anim-foto { clip-path: inset(0 0 0 0 round 24px); }
  .frase em { transition: background-size 900ms var(--ease) 0.45s; }
  .frase.antes em { background-size: 0% 100%; }
  .paso-num { transition: transform 900ms var(--ease) 0.15s; }
  .antes .paso-num { transform: translateX(-1.5rem); }

  /* El WhatsApp aparece al bajar y late cada tanto. */
  .wa-flotante { transition: background-color 200ms var(--ease), transform 500ms cubic-bezier(0.34, 1.4, 0.44, 1); }
  .wa-flotante.visible::after { animation: latir 4.5s ease-out 2s infinite; }
  @keyframes latir { 0% { opacity: 0.9; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(1.75); } }

  /* La tarjeta de vidrio del inicio flota apenas. */
  .hero-tarjeta img { animation: flotar 5s ease-in-out 1.8s infinite alternate; }
  @keyframes flotar { to { transform: translateY(-5px) rotate(-2deg); } }

  /* El 404: los números flotan, cada uno a su ritmo, hasta que se ordenan. */
  .e404 .d b { animation: boyar var(--t, 6s) ease-in-out infinite alternate; }
  .e404 .d1 { --t: 5.5s; } .e404 .d2 { --t: 7s; } .e404 .d3 { --t: 4.6s; }
  @keyframes boyar { from { transform: translateY(-0.03em) rotate(-2deg); } to { transform: translateY(0.04em) rotate(3deg); } }
  .e404.ordenado .d b { animation: none; }
  .e404 .d.giro b { animation: giro 800ms var(--ease); }
  @keyframes giro { to { transform: rotate(360deg); } }
  .e404 .b { animation: boyar-barra var(--tb, 7s) ease-in-out infinite alternate; }
  .e404 .b:nth-child(odd) { --tb: 5.5s; }
  @keyframes boyar-barra { to { transform: skewX(-23deg) translateY(-14px); } }
  .e404.ordenado .b { animation: none; }

  @supports (animation-timeline: view()) {
    /* Las fotos de fondo se corren apenas mientras pasan (paralaje). */
    .contacto-foto > img { animation: paralaje linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes paralaje { from { transform: scale(1.18) translateY(-5%); } to { transform: scale(1.18) translateY(5%); } }
    .hero-foto { animation: hundir linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hundir { to { transform: translateY(14%); } }
    .service-foto img, .trabajo-riel img { animation: foto-pasa linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes foto-pasa { from { object-position: 50% 35%; } to { object-position: 50% 65%; } }
    /* Una raya naranja arriba marca cuánto se bajó. */
    body::before { content: ""; position: fixed; z-index: 30; inset: 0 0 auto; height: 3px; background: var(--naranja); transform-origin: 0 50%; animation: avance linear both; animation-timeline: scroll(root); }
    @keyframes avance { from { transform: scaleX(0); } }
  }
}
.btn:active { transform: scale(0.97); }

/* Links del pie con alto de dedo en el celular. */
@media (max-width: 700px) {
  .site-footer ul { gap: 0; }
  .site-footer ul:not(.social) li > a { display: inline-block; padding-block: 0.7rem; }
  .foot-legal a { display: inline-block; padding-block: 0.5rem; }
}

/* ====================================================================
   Herramientas (H13b): /herramientas/ y el bloque del inicio. Las
   tarjetas las escribe el Worker con lo que ofrece el catálogo del tablero.
   ==================================================================== */
.herr-cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.herr-cab .titulo { max-width: 15ch; }
.herr-cab > p { max-width: 26rem; color: var(--tinta-2); }
.herr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.herr-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.9rem; height: 100%; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: 24px; background: var(--hoja); box-shadow: inset 0 0 0 1px var(--borde-claro); }
.herr-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.herr-ic { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--pale-sky); color: var(--navy); }
.herr-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.herr-card .etiqueta { margin: 0; }
.herr-card h3 { font-size: clamp(1.6rem, 2.3vw, 2.2rem); letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.herr-card p { color: var(--tinta-2); max-width: 34ch; }
.herr-card .btn { justify-self: start; margin-top: 0.75rem; }
/* Una sola herramienta: la tarjeta ocupa el ancho entero, acostada. */
.herr-grid:has(> li:only-child) { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  .herr-grid > li:only-child .herr-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(2rem, 3.5vw, 3.25rem); }
  .herr-grid > li:only-child .herr-top { grid-row: 1 / -1; flex-direction: column; align-items: start; gap: 1.25rem; margin: 0; }
  .herr-grid > li:only-child .herr-ic { width: 96px; height: 96px; }
  .herr-grid > li:only-child .herr-ic svg { width: 44px; height: 44px; }
  .herr-grid > li:only-child h3 { font-size: clamp(2.4rem, 4.6vw, 4.5rem); line-height: 0.95; align-self: end; }
  .herr-grid > li:only-child p { font-size: 1.25rem; align-self: start; grid-column: 2; }
  .herr-grid > li:only-child .btn { grid-column: 3; grid-row: 1 / -1; margin: 0; }
}
.herr-medida { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--borde-claro); }
.herr-medida p { font: 500 clamp(1.2rem, 1.8vw, 1.6rem)/1.2 var(--f-titulo); letter-spacing: -0.025em; color: var(--navy); }
.herr-vacio .titulo + p { margin-top: 1.5rem; max-width: 34rem; font-size: 1.2rem; color: var(--tinta-2); }
.herr-vacio .acciones { margin-top: 2rem; }
.herr-pasos .pasa-cab { margin-top: 0; }
.herr-pasos .pasa-lista b { display: block; margin-bottom: 0.9rem; font: 500 0.95rem/1 var(--f-titulo); color: var(--n40); }
.herr-entrar .wrap > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--radio); background: var(--navy); color: var(--pale-sky); }
.herr-entrar h2 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -0.035em; color: var(--hoja); }
.herr-entrar p { margin-top: 0.75rem; max-width: 30rem; }
.herr-entrar :focus-visible { outline-color: var(--naranja); }
.p-herramientas .herr-entrar { padding-top: 0; }
@media (max-width: 1000px) { .herr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .herr-grid { grid-template-columns: 1fr; }
  .herr-card .btn { justify-self: stretch; }
  .herr-medida .btn, .herr-entrar .btn { width: 100%; }
}