/* ===========================================================================
   Abogados Laboralistas — sitio para trabajadores
   ---------------------------------------------------------------------------
   Written for one reader: someone in their sixties, on a phone, outdoors, on
   mobile data. Every decision below follows from that.

     · Body text starts at 18px and never goes below 16px.
     · Nothing interactive is smaller than 48×48.
     · Colour never carries meaning alone — every ✓/✗ has a shape too.
     · Two typefaces: Lora for headings (the same face as the firm's corporate
       site, so the two read as siblings) and the system sans for everything
       else, which costs zero bytes and is the face the phone renders best.
     · One stylesheet, no framework, no build step beyond a copy.
   ========================================================================= */

/* ── Tipografía ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Lora";
  src: url("/fonts/lora-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
  --tinta: #0d1424;
  --tinta-suave: #1b2439;
  --texto: #17202f;
  --texto-tenue: #4d5768;
  --papel: #ffffff;
  --papel-calido: #faf7f2;
  --crema: #f3ede2;
  --borde: #e2dbcf;
  --borde-fuerte: #cdc3b2;

  /* El dorado de la marca. Sobre blanco no alcanza contraste para texto, así
     que hay dos: uno para superficies y otro, más oscuro, para leer. */
  --oro: #b4966e;
  --oro-texto: #8a6528;
  --oro-claro: #d9c39c;
  --oro-tenue: #f6efe3;

  --exito: #1f6b41;
  --alerta: #8a4b12;

  --serif: "Lora", "Georgia", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;

  --ancho: 1120px;
  --prosa: 66ch;
  --radio: 14px;
  --radio-chico: 10px;
  --sombra: 0 1px 2px rgba(13, 20, 36, 0.06), 0 8px 24px rgba(13, 20, 36, 0.07);
  --sombra-alta: 0 2px 6px rgba(13, 20, 36, 0.1), 0 18px 40px rgba(13, 20, 36, 0.14);
  --fija: 4.5rem; /* altura de la barra fija en móvil */
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #080d17;
    --tinta-suave: #121a2b;
    --texto: #e9e6e0;
    --texto-tenue: #a9b0bd;
    --papel: #11161f;
    --papel-calido: #161c27;
    --crema: #1b222e;
    --borde: #2b3342;
    --borde-fuerte: #3b4557;
    --oro-texto: #d9b878;
    --oro-tenue: #1d2330;
    --exito: #63c48d;
    --alerta: #e0a15f;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ── Base ────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  padding-bottom: var(--fija);
  background: var(--papel);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* The firm asked for all text justified. Hyphenation (the page is
     lang="es-GT") keeps a justified line on a narrow phone from opening wide
     gaps between words. Headings, buttons and addresses opt out below. */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* A justified heading stretches its first line, and a hyphen inside a heading,
   a button or an e-mail address reads as a typo. */
h1, h2, h3 { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
a[href^="mailto:"], a[href*="mail.google.com"], .boton { -webkit-hyphens: manual; hyphens: manual; }
.boton { text-align: center; }

/* mailto: opens nothing on a computer with no mail program set up, so every
   address is two links (`enlaceCorreo`): a computer gets Gmail's web compose,
   a phone keeps mailto:. A browser that answers neither query shows both. */
@media (hover: hover) and (pointer: fine) { .correo-movil { display: none !important; } }
@media (hover: none), (pointer: coarse) { .correo-web { display: none !important; } }

@media (min-width: 900px) {
  body { font-size: 1.1875rem; padding-bottom: 0; }
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--oro-texto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--oro-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

img, picture, svg { max-width: 100%; }
img { height: auto; display: block; }

.ic { width: 1.25em; height: 1.25em; flex: none; }

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: #fff;
  padding: 0.9rem 1.2rem;
  z-index: 200;
  border-radius: 0 0 var(--radio-chico) 0;
}
.saltar:focus { left: 0; }

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

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cab {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--tinta);
  color: #fff;
  border-bottom: 1px solid rgba(180, 150, 110, 0.28);
}

.cab-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  flex-wrap: wrap;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
  padding: 0.35rem 0;
}
.logo .marca { width: 2.75rem; height: 2.75rem; color: var(--oro-claro); }
.logo b {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.logo i {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* The checkbox is the real control: invisible, but present in the layout and
   in the tab order, so Space opens the menu without a line of JavaScript. It
   must never be `display:none` or `hidden` — either takes it out of the tab
   order and the menu becomes mouse-only. It sits under the label it toggles,
   which is what the visitor actually sees. */
.menu-estado {
  position: absolute;
  width: 48px;
  height: 48px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radio-chico);
  color: #fff;
  cursor: pointer;
}
/* The focus ring belongs on the thing the keyboard is actually on, so it is
   drawn on the label from the input's state. */
.menu-estado:focus-visible + .menu-boton {
  outline: 3px solid var(--oro-claro);
  outline-offset: 2px;
}
.menu-estado:checked + .menu-boton { background: rgba(255, 255, 255, 0.12); }
.menu-boton .ic { width: 1.5rem; height: 1.5rem; }

.nav { display: none; width: 100%; }
.menu-estado:checked ~ .nav { display: block; }

.nav ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nav a {
  display: block;
  padding: 0.8rem 0.6rem;
  color: #fff;
  text-decoration: none;
  border-radius: var(--radio-chico);
  font-size: 1.02rem;
}
.nav a:hover { background: rgba(255, 255, 255, 0.08); }
.nav a.actual { color: var(--oro-claro); font-weight: 600; }

/* Phone: the sticky bottom bar carries contact, so the header does not. */
.cab-contacto { display: none; }

/* The nav goes horizontal only where it fits beside the logo; at 900px it did
   not, and the header silently became two rows. The row itself never wraps
   from here up: the nav takes the space between logo and button and wraps its
   own links instead. Wrapping the row put the button alone on a second line
   whenever the visitor's text size was larger than the design's, because the
   sizes are in rem and the breakpoints are not. */
@media (min-width: 1000px) {
  .cab-in { flex-wrap: nowrap; }
  .menu-boton, .menu-estado { display: none; }
  .nav { display: block; width: auto; flex: 1 1 0; min-width: 0; }
  .nav ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.2rem; margin: 0; }
  .nav a { padding: 0.6rem 0.62rem; font-size: 0.95rem; }
}

/* The header's own contact button appears only once there is room for it
   beside the nav. Below this the sticky bottom bar is still there, so no
   width is ever left with no way to reach anyone. */
@media (min-width: 1150px) {
  .cab-contacto { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
  .cab-contacto a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .cab-contacto svg { width: 1.15rem; height: 1.15rem; }
  .cc-wa {
    background: var(--oro-texto);
    color: #fff;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
  }
  .cc-wa:hover { background: #6f5220; }
}

@media (min-width: 1150px) and (prefers-color-scheme: dark) {
  .cc-wa { background: var(--oro-claro); color: #17202f; }
  .cc-wa:hover { background: #e6cfa6; }
}

/* ── Secciones ───────────────────────────────────────────────────────────── */

.sec { padding: 3.25rem 0; }
@media (min-width: 900px) { .sec { padding: 4.5rem 0; } }

.f-papel { background: var(--papel-calido); }
.f-crema { background: var(--crema); }
.f-tinta { background: var(--tinta); color: #fff; }
.f-tinta h2, .f-tinta h3 { color: #fff; }
/* `:not(.boton)` matters: without it the gold link colour lands on the gold
   primary button and drops it under the 4.5:1 contrast floor. */
.f-tinta a:not(.boton) { color: var(--oro-claro); }

.sobre-titulo {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-texto);
  margin-bottom: 0.6rem;
}
.f-tinta .sobre-titulo { color: var(--oro-claro); }

.entradilla {
  font-size: 1.18rem;
  color: var(--texto-tenue);
  max-width: var(--prosa);
  margin-bottom: 1.8rem;
}
.f-tinta .entradilla { color: rgba(255, 255, 255, 0.82); }

.prosa { max-width: var(--prosa); }
.prosa p.destacado {
  border-left: 4px solid var(--oro);
  padding: 0.2rem 0 0.2rem 1.1rem;
  font-size: 1.16rem;
  color: var(--texto);
}

.mas-enlace { margin-top: 1.5rem; font-size: 1.02rem; }
.mas-enlace a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.mas-enlace .ic { width: 1.05em; height: 1.05em; }

.centrada { text-align: center; }
.centrada .entradilla, .centrada .botonera { margin-inline: auto; }
.centrada .botonera { justify-content: center; }

.fecha { color: var(--texto-tenue); font-size: 0.98rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.botonera { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.85rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radio-chico);
  font: inherit;
  font-weight: 650;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.b-primario { background: var(--oro-texto); color: #fff; box-shadow: var(--sombra); }
.b-primario:hover { background: #6f5220; }
@media (prefers-color-scheme: dark) {
  .b-primario { background: var(--oro-claro); color: #17202f; }
  .b-primario:hover { background: #e6cfa6; }
}

.b-secundario { background: transparent; border-color: var(--borde-fuerte); color: var(--texto); }
.b-secundario:hover { background: var(--oro-tenue); border-color: var(--oro); }

.b-claro { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.b-claro:hover { background: rgba(255, 255, 255, 0.18); }

.b-grande { width: 100%; min-height: 60px; font-size: 1.15rem; }
@media (min-width: 620px) { .b-grande { width: auto; padding-inline: 2.4rem; } }

/* ── Portada: hero ───────────────────────────────────────────────────────── */

/* The hero carries a photograph behind the headline. Three layers, bottom to
   top: the ink background, which is what the text is actually guaranteed to
   sit on; the photo; and a scrim heavy enough that the white type keeps its
   contrast even where the picture is at its brightest. The photo is the only
   layer that can fail to arrive, and losing it costs nothing but the picture —
   the hero degrades to exactly the flat panel it used to be. */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 12% -10%, rgba(180, 150, 110, 0.22), transparent 58%),
    var(--tinta);
  color: #fff;
  padding: 3rem 0 3.5rem;
  overflow: hidden;
}
@media (min-width: 900px) {
  /* Taller, and with a floor: the photograph is the first impression this
     page makes, and at 5rem of padding it was a strip behind the headline
     rather than a picture. `min-height` is capped against the viewport so a
     short laptop screen still shows the buttons without scrolling. */
  .hero { padding: 6rem 0 7.5rem; min-height: min(41rem, 88vh); display: flex; align-items: center; }
}

.hero-foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: 72% 44%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ── Las fotografías de fondo, por nombre ────────────────────────────────── */

/* Every photograph used as a background is named here, and only here.
   `componentes.ts` and `paginas.ts` emit the class; this file says which two
   files it means. They cannot be inline styles: the site serves
   `style-src 'self'`, which drops an inline `style` attribute on the floor and
   leaves the section looking like it simply has no picture.

   Two declarations each: the JPEG first, so that a browser without
   `image-set()` still gets a photograph, then the WebP for everyone else. It
   is what `<picture>` does, written the way a background has to write it. */
.sec-foto--portada-hero {
  background-image: url("/img/portada-hero.jpg");
  background-image: image-set(url("/img/portada-hero.webp") type("image/webp"), url("/img/portada-hero.jpg") type("image/jpeg"));
}
.sec-foto--cabecera-preguntas { background-image: url("/img/cabecera-preguntas.jpg"); background-image: image-set(url("/img/cabecera-preguntas.webp") type("image/webp"), url("/img/cabecera-preguntas.jpg") type("image/jpeg")); }
.sec-foto--cabecera-consulta { background-image: url("/img/cabecera-consulta.jpg"); background-image: image-set(url("/img/cabecera-consulta.webp") type("image/webp"), url("/img/cabecera-consulta.jpg") type("image/jpeg")); }
.sec-foto--cabecera-contacto { background-image: url("/img/cabecera-contacto.jpg"); background-image: image-set(url("/img/cabecera-contacto.webp") type("image/webp"), url("/img/cabecera-contacto.jpg") type("image/jpeg")); }
.sec-foto--cabecera-legal { background-image: url("/img/cabecera-legal.jpg"); background-image: image-set(url("/img/cabecera-legal.webp") type("image/webp"), url("/img/cabecera-legal.jpg") type("image/jpeg")); }

/* The plazo band on each case page. */
.sec-foto--cuotas-tiempo {
  background-image: url("/img/cuotas-tiempo.jpg");
  background-image: image-set(url("/img/cuotas-tiempo.webp") type("image/webp"), url("/img/cuotas-tiempo.jpg") type("image/jpeg"));
}
.sec-foto--banda-despido {
  background-image: url("/img/banda-despido.jpg");
  background-image: image-set(url("/img/banda-despido.webp") type("image/webp"), url("/img/banda-despido.jpg") type("image/jpeg"));
}
.sec-foto--banda-prestaciones {
  background-image: url("/img/banda-prestaciones.jpg");
  background-image: image-set(url("/img/banda-prestaciones.webp") type("image/webp"), url("/img/banda-prestaciones.jpg") type("image/jpeg"));
}

.sec-foto--banda-contacto {
  /* Framed low: the band is a wide strip cut out of a 16:9 photograph, and the
     man's face sits in its lower half. Centred, the strip would be his cap. */
  background-position: 50% 72%;
  background-image: url("/img/banda-contacto.jpg");
  background-image: image-set(url("/img/banda-contacto.webp") type("image/webp"), url("/img/banda-contacto.jpg") type("image/jpeg"));
}
/* Warm on the left, where the type is; clearer on the right, where the two
   men are. The gradient is what makes a cold-ish photograph read as part of
   the same brown-and-gold site as everything under it. */
.hero-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(13, 20, 36, 0.95) 0%, rgba(13, 20, 36, 0.88) 28%, rgba(13, 20, 36, 0.44) 58%, rgba(13, 20, 36, 0.12) 100%),
    linear-gradient(96deg, rgba(120, 82, 32, 0) 38%, rgba(120, 82, 32, 0.22) 100%);
}
@media (max-width: 700px) {
  /* A phone crops a landscape photograph down to about a third of its width,
     so the framing is chosen rather than inherited: 62% lands on the nearer
     man's face. A recognisable person behind the headline reads as a
     photograph; the same picture centred would read as a smudge. The scrim
     stays lighter at the top, where his face is, and closes over the text
     underneath it. */
  .hero-foto { background-position: 62% 50%; }
  .hero-foto::after {
    background:
      linear-gradient(180deg, rgba(13, 20, 36, 0.72) 0%, rgba(13, 20, 36, 0.86) 46%, rgba(13, 20, 36, 0.93) 100%),
      linear-gradient(0deg, rgba(120, 82, 32, 0.22), rgba(120, 82, 32, 0.22));
  }
}

.hero-in { max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: 0.5em; }
.hero-sobre {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro-claro);
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.hero-entrada { font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); max-width: 42rem; margin-bottom: 0.55rem; }
.hero-promesa {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid var(--oro);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  padding: 0.95rem 1.1rem;
  font-size: 1.08rem;
  color: #fff;
}
.hero-promesa .ic { color: var(--oro-claro); margin-top: 0.15rem; }
.hero-pie { margin-top: 1.4rem; font-size: 0.98rem; color: rgba(255, 255, 255, 0.62); }

/* ── Portada: las cifras del bufete ──────────────────────────────────────── */

/* On a wide screen the strip is pulled up over the hero's bottom edge, so it
   reads as part of the hero rather than as the first row of the section under
   it. On a phone it does not move: three figures across 360px is unreadable,
   so they stack, and there is nothing to overlap. */
.cifras-envoltura { background: var(--papel); }
@media (min-width: 760px) {
  .cifras-envoltura { margin-top: -3.25rem; position: relative; z-index: 1; }
  /* The strip is pulled up by exactly 3.25rem, so above that line it must let
     the hero photograph through and below it must be the ground of the section
     that follows. Left transparent throughout, the gutters either side of the
     card showed the white of the body between the hero and the cream section —
     two bright slivers at the edge of the screen. */
  .cifras-envoltura {
    background: linear-gradient(transparent 0 3.25rem, var(--papel-calido) 3.25rem);
  }
}

.cifras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.4rem 1.25rem;
}
@media (min-width: 760px) {
  .cifras { grid-template-columns: repeat(3, 1fr); gap: 0; box-shadow: var(--sombra-alta); }
  .cifras li + li { border-left: 1px solid var(--borde); }
}
.cifras li { text-align: center; padding: 0.35rem 1rem; }
/* The mark above each figure. Decoration only: it is `aria-hidden`, and the
   number and its label already say the whole thing. */
.cifras li > .ic {
  width: 26px;
  height: 26px;
  color: var(--oro);
  margin-bottom: 0.3rem;
}
.cifra-n {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--oro-texto);
  letter-spacing: -0.02em;
}
@media (min-width: 760px) { .cifra-n { font-size: 2.5rem; } }
.cifra-e {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: var(--texto-tenue);
}

/* ── Tarjetas de caso ────────────────────────────────────────────────────── */

/* Two across, never three: four cases in a row of three left the fourth alone
   on a second line, which read as an afterthought. Two by two keeps them
   equals, and the titles are long enough that four across would wrap each
   into a column of single words. */
.rejilla-casos { display: grid; gap: 1.25rem; }
@media (min-width: 780px) { .rejilla-casos { grid-template-columns: repeat(2, 1fr); } }

.tarjeta-caso {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--sombra);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.tarjeta-caso:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
  border-color: var(--oro);
}
.tarjeta-caso::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
  z-index: 2;
}
.tarjeta-caso:hover::before, .tarjeta-caso:has(h3 a:focus-visible)::before { transform: scaleX(1); }
.tarjeta-caso { position: relative; }
/* The photo is the card's whole first impression, so it gets more of the card
   than it used to, and a warm wash at its foot that ties four photographs
   shot by four different people into one set. */
.tc-foto { display: block; position: relative; }
.tc-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(90, 62, 26, 0.28));
  pointer-events: none;
}
.tc-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (min-width: 780px) { .tc-foto img { aspect-ratio: 3 / 2; } }
.tc-texto { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.tc-texto h3 { font-size: 1.24rem; margin-bottom: 0.45em; }
.tc-texto h3 a { color: inherit; text-decoration: none; }
.tc-texto h3 a:hover { text-decoration: underline; }
/* The heading link covers the whole card, so the card stays clickable without
   a second crawlable anchor swallowing the card's text. */
.tc-texto h3 a::after { content: ""; position: absolute; inset: 0; }
/* Suppressing the anchor's own ring is only safe where the card can draw the
   replacement, and that needs `:has()`. On an older Android WebView the guard
   fails, the rule is skipped, and the anchor keeps its default ring rather
   than the card having none at all. */
@supports selector(:has(*)) {
  .tc-texto h3 a:focus-visible { outline: none; }
}
.tarjeta-caso:has(h3 a:focus-visible) { outline: 3px solid var(--oro-texto); outline-offset: 3px; }
.tc-texto p { color: var(--texto-tenue); font-size: 1rem; flex: 1; }
.tc-mas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  font-weight: 700;
  color: var(--oro-texto);
}
.tc-mas .ic { width: 1.05em; height: 1.05em; }

/* ── Página de caso: los otros casos ─────────────────────────────────────── */

.rejilla-otros { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .rejilla-otros { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  /* Three other cases in two columns: the odd one takes the whole row rather
     than sitting alone beside a hole. */
  .rejilla-otros > .tarjeta-otro:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.tarjeta-otro {
  position: relative;
  display: flex;
  gap: 1rem;
  /* `stretch`, not `center`: the photo is a full-height strip down the side of
     the card, and centring it leaves a white margin above and below whenever
     the two cards' text runs to different lengths. */
  align-items: stretch;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  padding-right: 1.1rem;
  box-shadow: var(--sombra);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.tarjeta-otro:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--oro); }
.to-foto { flex: none; display: flex; }
.to-foto img { display: block; width: 7.5rem; height: 100%; min-height: 8.5rem; object-fit: cover; }
@media (min-width: 720px) { .to-foto img { width: 9rem; } }
.to-texto { padding: 1rem 0; min-width: 0; align-self: center; }
.to-texto h3 { font-size: 1.08rem; margin-bottom: 0.35em; }
.to-texto h3 a { color: inherit; text-decoration: none; }
.to-texto h3 a::after { content: ""; position: absolute; inset: 0; }
@supports selector(:has(*)) {
  .to-texto h3 a:focus-visible { outline: none; }
}
.tarjeta-otro:has(h3 a:focus-visible) { outline: 3px solid var(--oro-texto); outline-offset: 3px; }
.to-texto p {
  color: var(--texto-tenue);
  font-size: 0.97rem;
  margin: 0;
  /* Two lines of the case's own opener, then it gives way to the link. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.to-texto .tc-mas { margin-top: 0.6rem; font-size: 0.95rem; }

/* ── Página de caso: cabecera ────────────────────────────────────────────── */

.caso-cab { padding-top: 1.5rem; }
.caso-cab-in { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) {
  /* The picture does as much work as the headline on a page whose job is to
     be recognised before it is read, so it keeps close to half the row. The
     text side gets the remainder rather than an exact half: at 1fr 1fr the
     two buttons did not fit on one line and stacked, which left a column of
     white space beside them and pushed the liftable answer down the page. */
  .caso-cab-in { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; }
}
/* The header photo sits on a gold plate offset behind it — the one decorative
   flourish on a case page, and the thing that stops a rectangular photo from
   looking pasted on. The plate is drawn with a pseudo-element so it costs no
   markup and disappears on a phone, where there is no room for it. */
.caso-foto { position: relative; display: block; }
.caso-foto img {
  position: relative;
  width: 100%;
  display: block;
  border-radius: var(--radio);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--sombra-alta);
}
@media (min-width: 900px) {
  .caso-foto::before {
    content: "";
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border-radius: var(--radio);
    background: var(--oro-tenue);
    border: 1px solid var(--oro-claro);
  }
}

.migas { margin-bottom: 1.5rem; font-size: 0.94rem; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.migas li + li::before { content: "›"; margin-right: 0.4rem; color: var(--texto-tenue); }
.migas span { color: var(--texto-tenue); }

/* ── Cabecera de página con fotografía ───────────────────────────────────── */

/* Shallow on purpose. This band's job is to say which page you are on and to
   make it look like the same firm as the home page — not to push the reading
   below the fold. Everything under it stays as light as it was. */
/* A deeper scrim than the hero's. These bands are short, so the text runs
   across the whole width of the picture rather than sitting on the dark side
   of it, and the two smallest items — the gold eyebrow and the date — were
   measured under AA against the brightest photographs before this. */
.cab-foto .sec-foto::after {
  background:
    linear-gradient(96deg, rgba(13, 20, 36, 0.95) 0%, rgba(13, 20, 36, 0.92) 42%, rgba(13, 20, 36, 0.8) 74%, rgba(13, 20, 36, 0.66) 100%),
    linear-gradient(96deg, rgba(120, 82, 32, 0) 45%, rgba(120, 82, 32, 0.22) 100%);
}
@media (max-width: 700px) {
  .cab-foto .sec-foto::after {
    background:
      linear-gradient(180deg, rgba(13, 20, 36, 0.88) 0%, rgba(13, 20, 36, 0.92) 100%),
      linear-gradient(0deg, rgba(120, 82, 32, 0.2), rgba(120, 82, 32, 0.2));
  }
}

.cab-foto { padding: 2.25rem 0 2.5rem; }
@media (min-width: 900px) { .cab-foto { padding: 3rem 0 3.25rem; } }
.cab-foto h1 { color: #fff; max-width: 22ch; }
.cab-foto .entradilla { color: rgba(255, 255, 255, 0.85); max-width: 52ch; }
.cab-foto .migas { margin-bottom: 1.1rem; }
.cab-foto .migas a { color: var(--oro-claro); }
.cab-foto .migas li span, .cab-foto .migas li + li::before { color: rgba(255, 255, 255, 0.7); }
.cab-foto .fecha { color: rgba(255, 255, 255, 0.7); }
.cab-foto .indice { margin-top: 1.6rem; }
.cab-foto .tres-notas { margin-top: 1.5rem; color: rgba(255, 255, 255, 0.88); }
.cab-foto .tres-notas .ic { color: var(--oro-claro); }
.cab-foto .botonera { margin-bottom: 0.25rem; }

/* ── Listas ──────────────────────────────────────────────────────────────── */

.dos-columnas { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* Two panels rather than two bare columns. On the longest pages this is the
   section that decides whether the visitor keeps reading at all, so it is the
   one place worth spending a surface on. The tint is a second signal, never
   the only one: every line still carries its own ✓ or ✗. */
.col-si, .col-no {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: var(--sombra);
}
.col-si { border-top: 4px solid var(--exito); }
.col-no { border-top: 4px solid var(--alerta); }
.col-si h3, .col-no h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
  margin-bottom: 0.9em;
}
.col-si h3 { color: var(--exito); }
.col-no h3 { color: var(--alerta); }
.col-si h3::before, .col-no h3::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.lista-marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.lista-marcada li { display: flex; gap: 0.7rem; align-items: flex-start; }
.lista-marcada .ic { margin-top: 0.28rem; width: 1.3rem; height: 1.3rem; }
.lm-si .ic { color: var(--exito); }
.lm-no .ic { color: var(--alerta); }

.lista-simple { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.7rem; }
.lista-docs {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
/* These are short lines — "su DPI", "la resolución del IGSS" — so one column
   of them down a wide screen was a narrow ribbon of text with a lot of empty
   page beside it. */
@media (min-width: 820px) { .lista-docs { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; } }
.lista-docs li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.7rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
}
.lista-docs li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--oro);
  border-radius: 3px;
}

/* ── Pasos ───────────────────────────────────────────────────────────────── */

.pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 3.4rem;
  max-width: var(--prosa);
}
/* A line joining one numbered disc to the next, so five steps read as one
   route instead of five separate notes. It stops at the last step. */
.pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 2.6rem;
  bottom: -1.4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--oro-claro), var(--borde));
}
.como-in .pasos li:not(:last-child)::after { bottom: -1.5rem; }
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oro-tenue);
  border: 2px solid var(--oro);
  color: var(--oro-texto);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
}
.pasos h3 { margin-bottom: 0.3em; }
.duracion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.94rem;
  color: var(--texto-tenue);
}
@media (min-width: 900px) {
  .pasos-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
}

/* Photo above the steps on a phone, beside them from 1000px. The steps keep
   one column when the photo is next to them: two columns in half the width
   would put four lines of text in 20 characters. */
.como-in { display: grid; gap: 1.75rem; }
@media (min-width: 1000px) {
  .como-in { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; }
  .como-in .pasos-4 { grid-template-columns: 1fr; gap: 1.5rem; }
  .como-foto { position: static; }
}
/* The notice closes the section, so it spans it. Left at the prose width it
   stopped under the photo column and read as a stray box rather than as the
   last word of "Cómo trabajamos". */
.como-in + .aviso { max-width: none; }

.como-foto img {
  width: 100%;
  display: block;
  border-radius: var(--radio);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--sombra);
}

/* ── Argumentos de la otra parte ─────────────────────────────────────────── */

.argumentos { display: grid; gap: 1rem; }
@media (min-width: 860px) { .argumentos { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.arg {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--oro);
  border-radius: var(--radio-chico);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--sombra);
}
/* The heading is what the other side says, the paragraph is the answer to it.
   The quotation mark makes that split visible at a glance on a page that is
   otherwise a long column of prose — it is decoration, so it is hidden from
   the screen reader, which gets the same split from the heading. */
.arg::before {
  content: "\201C";
  position: absolute;
  top: 0.15rem;
  right: 0.7rem;
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--oro-claro);
  opacity: 0.55;
  pointer-events: none;
}
.arg h3 {
  font-size: 1.1rem;
  color: var(--oro-texto);
  margin-bottom: 0.5em;
  padding-right: 2rem;
}
.arg p { font-size: 1.02rem; margin: 0; }
.arg-etiqueta {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-tenue);
}

/* ── Preguntas frecuentes ────────────────────────────────────────────────── */

.faq { display: grid; gap: 0.7rem; max-width: 54rem; }
.faq-item {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  /* `overflow: hidden` here clipped the global focus ring — drawn 3px outside
     the summary, which is 1px inside this box — so a keyboard user got no
     indicator at all on 25 rows. `clip` rounds the corners the same way but
     `overflow-clip-margin` lets the ring out. */
  overflow: clip;
  overflow-clip-margin: 6px;
}
.faq-item[open] { border-color: var(--oro); box-shadow: var(--sombra); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  min-height: 56px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Inset, so the ring is inside the card whatever the browser does with
   `overflow-clip-margin`. */
.faq-item summary:focus-visible { outline: 3px solid var(--oro-texto); outline-offset: -3px; }

/* A single gold ring measured 2.90:1 against the brightest photograph behind
   a page header — under the 3:1 that 1.4.11 asks of a focus indicator. Two
   rings instead of one: white outline, dark halo just outside it. Whatever
   the ring lands on, one of the two contrasts with it. */
.cab-foto a:focus-visible,
.hero a:focus-visible,
.banda a:focus-visible,
.f-foto a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(13, 20, 36, 0.85);
  border-radius: 3px;
}
/* The sticky bar sits flush against three edges of the viewport, so a ring
   drawn outside it is clipped away by the screen. Draw it inside. */
.barra-fija a:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.faq-item summary h3 { margin: 0; font-size: 1.1rem; font-family: var(--sans); font-weight: 650; }
.faq-item summary .ic { color: var(--oro-texto); transform: rotate(90deg); transition: transform 0.15s ease; }
.faq-item[open] summary .ic { transform: rotate(-90deg); }
.faq-cuerpo { padding: 0 1.2rem 1.3rem; max-width: var(--prosa); }
.faq-cuerpo p { font-size: 1.04rem; }

/* Each group of questions gets a rule and a count, and the groups alternate
   ground. Four plain <h2>s down a page of collapsed rows gave the reader no
   way to see, at a glance, that this page is four lists and not one long one. */
.grupo-faq h2 {
  position: relative;
  padding-top: 0.9rem;
}
.grupo-faq h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--oro);
}
.grupo-cuenta {
  margin-top: -0.35rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texto-tenue);
}

.indice ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.indice a {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 600;
}
.indice a:hover { background: var(--oro-tenue); border-color: var(--oro); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.aviso {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--oro-tenue);
  border: 1px solid var(--oro-claro);
  border-radius: var(--radio-chico);
  max-width: var(--prosa);
}
.aviso .ic { color: var(--oro-texto); margin-top: 0.2rem; }
.aviso p { font-size: 1.02rem; margin: 0; }
.av-ojo { background: var(--crema); border-color: var(--borde-fuerte); }

/* ── Banda de contacto ───────────────────────────────────────────────────── */

/* ── Secciones con fotografía de fondo ───────────────────────────────────── */

/* `.f-foto` is the section shape that carries a photograph behind its text.
   The scrim is on the section, not on the photo layer, so it is painted even
   if the image never arrives — the text is legible before, during and after
   the download, and identical if the picture 404s. */
.f-foto { position: relative; isolation: isolate; overflow: hidden; }
.sec-foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: 70% 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
/* The scrim is a child of the photo layer, not a sibling of it. Both would sit
   at `z-index: -1`, where painting order falls back to document order and the
   section's own `::before` is generated first — so a sibling scrim would be
   painted under the photograph and the white text would land straight on the
   picture. Nesting it settles the order without a second stacking context. */
.sec-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(13, 20, 36, 0.94) 0%, rgba(13, 20, 36, 0.88) 34%, rgba(13, 20, 36, 0.58) 64%, rgba(13, 20, 36, 0.32) 100%),
    linear-gradient(96deg, rgba(120, 82, 32, 0) 40%, rgba(120, 82, 32, 0.26) 100%);
}
@media (max-width: 700px) {
  .sec-foto::after {
    background:
      linear-gradient(180deg, rgba(13, 20, 36, 0.86) 0%, rgba(13, 20, 36, 0.9) 60%, rgba(13, 20, 36, 0.94) 100%),
      linear-gradient(0deg, rgba(120, 82, 32, 0.2), rgba(120, 82, 32, 0.2));
  }
}

/* ── Banda del plazo ─────────────────────────────────────────────────────── */

/* "¿Cuánto tarda?" as a full-width photographic band rather than the small
   grey box it used to be. It is deliberately the tallest thing on a case page
   after the header: the honest answer to how long a case takes is the one the
   reader most wants and the one a small box hides, and this band carries the
   only CTA between the top of the page and the bottom. */
.banda-plazo { padding: 4.5rem 0; text-align: justify; }
@media (min-width: 900px) { .banda-plazo { padding: 6.5rem 0; } }
.banda-plazo h2 { font-size: 2.1rem; max-width: 16ch; }
@media (min-width: 900px) { .banda-plazo h2 { font-size: 2.8rem; } }
.banda-plazo .entradilla { max-width: 40ch; font-size: 1.16rem; }

.banda { text-align: justify; }
.banda h2 { max-width: 22ch; }
.sec.banda { padding: 3.75rem 0; }
@media (min-width: 900px) { .sec.banda { padding: 5rem 0; } }
.banda-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 1.8rem;
  font-size: 1.02rem;
}
.banda-datos a { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; }
/* `inline-flex` made each child of the link a flex item, so the `<wbr>` inside
   the address became a break the browser took every time: the band showed
   "info@ abogadoslaboralistas.com.gt" split across two lines with a gap in
   the middle. The address is one word to the reader and is laid out as one. */
.banda-datos a > span { display: inline; white-space: nowrap; }
.banda-datos .ic { color: var(--oro-claro); }
.banda-alterna { text-align: justify; }

/* ── Contacto ────────────────────────────────────────────────────────────── */

/* A grid item defaults to `min-width: auto`, so the unbreakable string
   `info@abogadoslaboralistas.com.gt` set this track's minimum to 428px and
   pushed all four cards past the edge of a 390px phone — the whole page then
   scrolled sideways. `break-word` on the body wraps the text but does not
   shrink min-content; only `min-width: 0` does. */
.rejilla-contacto { display: grid; gap: 1rem; }
.rejilla-contacto > * { min-width: 0; }
/* The address carries a `<wbr>` after the `@` (see `correoPartible`), which
   is where it wraps whenever that is enough. Inside this card, at 390px, it
   is not — "abogadoslaboralistas301@" alone still overflows — so the card
   also allows a break anywhere. `anywhere` is what shrinks min-content, and
   min-content is what was pushing the grid past the edge of the screen;
   `break-word` would wrap the text and change nothing about the overflow.
   With the `<wbr>` present the browser tries the `@` first and only splits a
   word when it must, so the common case still reads as an address. */
.tarjeta-contacto a { overflow-wrap: anywhere; }
@media (min-width: 700px) { .rejilla-contacto { grid-template-columns: 1fr 1fr; } }
.tarjeta-contacto {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
}
/* The icon sits in a gold disc rather than floating: four cards of plain
   outline glyphs read as a form, not as four ways to reach a person. */
.tarjeta-contacto > .ic {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.7rem;
  border-radius: 50%;
  background: var(--oro-tenue);
  border: 1px solid var(--oro-claro);
  color: var(--oro-texto);
  margin-bottom: 0.9rem;
}
.tarjeta-contacto h3 { margin-bottom: 0.35em; }
.tarjeta-contacto p { color: var(--texto-tenue); font-size: 1rem; }
.tarjeta-contacto a { font-weight: 650; }

.tres-notas {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
@media (min-width: 780px) { .tres-notas { grid-template-columns: repeat(3, 1fr); } }
.tres-notas li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1.02rem; }
.tres-notas .ic { color: var(--oro-texto); margin-top: 0.2rem; }


/* ── Barra fija (solo móvil) ─────────────────────────────────────────────── */

.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 2fr 1fr;
  background: var(--tinta);
  border-top: 1px solid rgba(180, 150, 110, 0.35);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-fija a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--fija);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 1.02rem;
}
.bf-wa { background: #1f7a4d; }
.bf-tel { border-left: 1px solid rgba(255, 255, 255, 0.18); }
/* The sticky bar goes only once the header carries contact itself — at 900px
   it used to disappear while the header still had nothing, leaving tablets
   with no way to reach anyone. */
@media (min-width: 1150px) { .barra-fija { display: none; } }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: rgba(255, 255, 255, 0.78); padding: 3rem 0 1.5rem; }
.pie-in { display: grid; gap: 2rem; }
@media (min-width: 860px) { .pie-in { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 2.5rem; } }
.pie h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro-claro);
  margin-bottom: 0.9rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.98rem; }
.pie a { color: #fff; }
.pie-marca p { font-size: 0.98rem; max-width: 34ch; }
.pie-marca .logo { margin-bottom: 0.9rem; }
.pie-fino {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Formulario ──────────────────────────────────────────────────────────── */

.sec-form { padding-top: 0; }
.form-consulta { max-width: 44rem; }

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

.paso {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--papel);
  padding: 1.5rem 1.25rem 1.75rem;
  margin: 0 0 1.25rem;
  box-shadow: var(--sombra);
}
@media (min-width: 700px) { .paso { padding: 1.9rem 1.9rem 2.1rem; } }

.paso legend {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  color: var(--texto);
}
.paso-desc { color: var(--texto-tenue); font-size: 1.02rem; margin-top: 0.4rem; }

.campo { margin-top: 1.6rem; }
.campo:first-of-type { margin-top: 1.3rem; }

.cam-et {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 1.06rem;
  margin: 0 0 0.35rem;
}
.cam-et .obl { color: var(--alerta); font-weight: 700; }
.cam-et .opt {
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--texto-tenue);
  text-transform: lowercase;
}
.cam-ayuda { font-size: 0.98rem; color: var(--texto-tenue); margin: 0 0 0.6rem; }

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="date"],
.campo input[type="number"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--texto);
  background: var(--papel);
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
}
.campo textarea { min-height: 7rem; resize: vertical; line-height: 1.55; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--oro-texto); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #a2331b; }

.con-prefijo { display: flex; align-items: stretch; }
.con-prefijo span {
  display: grid;
  place-items: center;
  min-width: 3rem;
  border: 2px solid var(--borde-fuerte);
  border-right: 0;
  border-radius: var(--radio-chico) 0 0 var(--radio-chico);
  background: var(--crema);
  font-weight: 700;
}
.con-prefijo input { border-radius: 0 var(--radio-chico) var(--radio-chico) 0 !important; }

.opciones { display: grid; gap: 0.6rem; }
.op-radio { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
/* Una opción por fila cuando el texto no cabe de dos en dos en un teléfono. */
.op-bloque { grid-template-columns: 1fr; }
@media (min-width: 640px) { .op-bloque { grid-template-columns: 1fr 1fr; } }
.op { position: relative; }
.op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.7rem 1rem;
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--papel);
  cursor: pointer;
  font-size: 1.02rem;
}
.op label::before {
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  border: 2px solid var(--borde-fuerte);
  border-radius: 50%;
  background: var(--papel);
}
.op-checkbox label::before { border-radius: 4px; }
.op input:checked + label {
  border-color: var(--oro-texto);
  background: var(--oro-tenue);
  font-weight: 650;
}
.op input:checked + label::before {
  border-color: var(--oro-texto);
  background: var(--oro-texto);
  box-shadow: inset 0 0 0 3px var(--papel);
}
.op-checkbox input:checked + label::before { box-shadow: inset 0 0 0 2px var(--papel); }
.op input:focus-visible + label { outline: 3px solid var(--oro-texto); outline-offset: 2px; }

.casos-radio { display: grid; gap: 0.75rem; margin-top: 1.2rem; }
.caso-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.caso-op label {
  display: block;
  padding: 1.05rem 1.2rem;
  border: 2px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
  cursor: pointer;
  /* A choice is a control, like a button: justified, a two-line card read
     "No      me      pagaron      mis" on a phone. */
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.caso-op label b { display: block; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.15rem; }
.caso-op label small { display: block; font-size: 0.97rem; color: var(--texto-tenue); line-height: 1.5; }
.caso-op input:checked + label {
  border-color: var(--oro-texto);
  background: var(--oro-tenue);
  box-shadow: var(--sombra);
}
.caso-op input:focus-visible + label { outline: 3px solid var(--oro-texto); outline-offset: 2px; }

.form-cierre { margin-top: 2rem; }
.consentimiento {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.98rem;
  color: var(--texto-tenue);
  margin-bottom: 1.4rem;
}
.consentimiento .ic { color: var(--oro-texto); margin-top: 0.2rem; }
.form-nota { margin-top: 1rem; font-size: 0.96rem; color: var(--texto-tenue); }

.form-errores {
  border: 2px solid #a2331b;
  background: #fdf1ee;
  color: #7d2712;
  border-radius: var(--radio-chico);
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .form-errores { background: #2a1713; color: #f0b7a5; }
}
.form-errores ul { margin: 0.6rem 0 0; padding-left: 1.2rem; font-weight: 500; }

/* ── Mejora progresiva: el asistente paso a paso ─────────────────────────── */
/* Only applied once the script has marked the document; without it every step
   stays visible and the form is a single long page that posts natively.       */

/* `.boton` sets its own `display`, which beats the UA rule behind the `hidden`
   attribute: a "hidden" Siguiente stayed on screen on the last step.        */
.form-consulta [hidden] { display: none !important; }
.js .paso[hidden] { display: none; }
.js .cond[hidden] { display: none; }

.progreso { margin: 0 0 1.25rem; }
.progreso-barra {
  height: 8px;
  border-radius: 999px;
  background: var(--crema);
  overflow: hidden;
}
.progreso-relleno {
  height: 100%;
  width: 0;
  background: var(--oro-texto);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.navegacion-paso {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}
.navegacion-paso .boton { flex: 1 1 10rem; }
.js .form-cierre .b-grande { width: 100%; }

.enviando { opacity: 0.6; pointer-events: none; }

/* ── Formulario corto (página de contacto) ───────────────────────────────── */

.sec-form-corto .entradilla { margin-bottom: 1.5rem; }

.form-corto {
  max-width: 40rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem 1.25rem 1.75rem;
  box-shadow: var(--sombra);
}
@media (min-width: 700px) { .form-corto { padding: 2rem; } }
.form-corto .campo:first-of-type { margin-top: 0; }
.form-corto .form-cierre { margin-top: 1.8rem; }

/* ── La respuesta directa ────────────────────────────────────────────────── */
/* Bajo el H1: el párrafo que se puede citar entero, sin leer el resto. */
.respuesta-directa {
  margin: 1.25rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--oro);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--texto);
}
@media (min-width: 900px) { .respuesta-directa { max-width: 60ch; } }

/* A focus target only reachable from the skip link; it should not draw a ring
   around the whole page when it receives focus programmatically. */
main:focus { outline: none; }

/* ── Blancos táctiles ────────────────────────────────────────────────────── */

/* The header of this file promises nothing interactive is smaller than 48×48.
   These were the links that broke it: footer links at 19px tall, breadcrumbs
   at 18, the contact card's tel:/mailto: at 21, the band's own contact links
   at 27. For a reader who is sixty, outdoors, on a cheap phone, that is the
   difference between tapping the number and tapping nothing. Padding rather
   than height, so nothing reflows. */
.pie a,
.banda-datos a,
.mas-enlace a,
.tarjeta-contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The breadcrumb is one short word on a single line, and giving it a 44px box
   pushed "Inicio" out of line with the "›" and the page name beside it. So the
   tap target is grown without touching the layout: an invisible pad around the
   link, which is what a hit area is for. */
.migas a { position: relative; }
.migas a::after {
  content: "";
  position: absolute;
  inset: -0.7rem -0.4rem;
}
/* In the footer's stacked columns the rows would otherwise double-space. */
.pie-cols li { margin: 0; }

@media print {
  /* Nothing is tapped on paper, and 44px rows would waste a page. */
  .pie a, .banda-datos a, .mas-enlace a, .tarjeta-contacto a {
    display: inline;
    min-height: 0;
  }
}

/* ── Impresión ───────────────────────────────────────────────────────────── */

/*
 * Printed, this should be an ordinary document: black text on white paper,
 * no site furniture, nothing hidden behind a colour the printer drops.
 *
 * It matters more here than on most sites. "Qué le vamos a pedir" is a list
 * people print and carry to the office, and before this the page printed the
 * firm's own address, telephone and e-mail as white on white — the footer and
 * the closing band are white text on ink, and browsers do not print
 * backgrounds by default. The one thing a printed page had to keep was the
 * one thing it lost.
 */
@media print {
  /* Ink is the visitor's, and the photographs are decoration. */
  .cab,
  .barra-fija,
  .saltar,
  .sec-foto,
  .hero-foto,
  .indice,
  .banda,
  .botonera,
  .tarjeta-caso,
  .otros-casos,
  .como-foto,
  .caso-foto,
  .cifras-envoltura,
  .tc-mas,
  .mas-enlace {
    display: none !important;
  }

  /* Every surface goes to paper white and every glyph to black; the dark
     sections and the light ones print the same, which is what "normal" means
     on a printer that has been told not to lay down backgrounds. */
  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    text-shadow: none !important;
  }

  html { font-size: 11pt; }
  body { padding-bottom: 0; }
  .sec { padding: 0.8rem 0; }
  .envoltura { max-width: none; padding: 0; }
  .cab-foto, .hero { padding: 0 0 0.8rem; }
  .prosa, .pasos li, .respuesta-directa { max-width: none; }

  /* Keep the borders that carry structure, in a weight a printer renders. */
  .col-si, .col-no, .arg, .lista-docs li, .faq-item, .aviso, .tarjeta-contacto {
    border: 1px solid #999 !important;
  }
  .respuesta-directa { border-left: 3px solid #999 !important; }

  /* Answers are the point of the page; print them open. */
  .faq-item .faq-cuerpo { display: block !important; }
  .faq-item summary { list-style: none; }
  .faq-item summary .ic { display: none; }

  /* Nothing that is read as one unit should straddle a page break. */
  .pasos li, .lista-docs li, .arg, .faq-item, .col-si, .col-no, .aviso,
  .tarjeta-contacto, figure, img {
    break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; }

  /* The footer is where the address and the telephone live, so it stays —
     as plain text, above a rule, at the end of the document. */
  .pie { border-top: 1px solid #999; padding-top: 0.6rem; }
  .pie-cols { display: block; }
  .pie a { text-decoration: none; }
}