/* ADVOCO Abogados · mejoras de contenido y de uso (9-nov-2026, noche)
   Se carga después de marca-advoco.css en las páginas de advoco/. No define colores ni tipografías
   de marca: usa las variables de marca-advoco.css (oro, negro, familias). Aquí vive:
   1. Ilustraciones de las guías y de «Dónde trabajamos» (img/*.svg, línea de oro sobre negro).
   2. Línea de tiempo de los 4 pasos (.av-tiempo), igual en el inicio y en las páginas internas.
   3. «Qué puede esperar de nosotros» (pilares con más contenido).
   4. Esquema de cobertura (.av-mapa) y explorador de zonas (.av-zonas) de cobertura.html.
   5. Formulario más grande y más fácil de responder (.cf-*).
   Las ilustraciones se regeneran con: python img/_generar.py img */

/* ── 1. Ilustraciones ─────────────────────────────────────────────────── */
.tile .foto::after, .lugar .foto::after { display: none; }
[data-direccion="a"] .foto-pasillo { background: #000 url("img/guia-despido.svg") center top / cover no-repeat; }
[data-direccion="a"] .foto-escalera { background: #000 url("img/guia-documentos.svg") center top / auto 88% no-repeat; }
[data-direccion="a"] .foto-ventana { background: #000 url("img/guia-divorcio.svg") center top / auto 88% no-repeat; }
[data-direccion="a"] .foto-documento { background: #000 url("img/guia-pagare.svg") center top / auto 88% no-repeat; }
.tile { background: #000; outline: 1px solid rgba(189, 148, 57, 0.3); outline-offset: -1px; transition: outline-color 0.4s; }
.tile:hover, .tile:focus-visible { outline-color: var(--advoco-oro, #BD9439); }
.tile::after { background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.94) 76%); }
.tile:hover .foto { transform: scale(1.04); }

[data-direccion="a"] .foto-ciudad { background: #000 url("img/lugar-cdmx-edomex.svg") center / cover no-repeat; }
[data-direccion="a"] .foto-pachuca { background: #000 url("img/lugar-hidalgo-queretaro.svg") center / cover no-repeat; }
.lugar { overflow: hidden; }
.lugar .foto { height: auto; aspect-ratio: 8 / 5; transition: transform 1.2s var(--suave); }
.lugar:hover .foto { transform: scale(1.04); }
.lugar-texto { position: relative; background: inherit; flex: 1; }
.lugar-linea { background: #000 url("img/lugar-linea.svg") center top / 100% auto no-repeat; }
.lugar-linea .lugar-texto { flex: none; background: linear-gradient(180deg, transparent, #000 34%); padding-top: 64px; }
@media (max-width: 1120px) {
  .lugar-linea { background-size: auto 100%; background-position: right center; }
  .lugar-linea .lugar-texto { background: linear-gradient(90deg, #000 46%, transparent); padding-top: 26px; max-width: none; }
  .lugar-linea .lugar-texto > * { max-width: 52%; }
}
@media (max-width: 640px) {
  .lugar-linea { background-size: 100% auto; background-position: center top; padding-top: 44%; }
  .lugar-linea .lugar-texto { background: linear-gradient(180deg, transparent, #000 30%); padding-top: 48px; }
  .lugar-linea .lugar-texto > * { max-width: none; }
}

/* ── 2. Línea de tiempo de los 4 pasos ────────────────────────────────── */
.proceso { --av-fondo: var(--hueso); }
.av-tiempo { --av-nodo: 58px; --av-cuando: 72px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.av-tiempo::before, .av-tiempo::after { content: ""; position: absolute; left: calc(var(--av-nodo) / 2); right: 0; top: calc(var(--av-cuando) + var(--av-nodo) / 2 - 1px); height: 2px; }
.av-tiempo::before { background: rgba(189, 148, 57, 0.34); }
.av-tiempo::after { background: var(--advoco-oro, #BD9439); transform-origin: left center; transition: transform 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
.av-js .av-tiempo:not(.av-visto)::after { transform: scaleX(0); }
.av-tiempo li { position: relative; padding: 0 clamp(18px, 2.4vw, 36px) 0 0; border: 0; }
.av-tiempo li:last-child::before { content: ""; position: absolute; right: 1px; top: calc(var(--av-cuando) + var(--av-nodo) / 2 - 6px); width: 10px; height: 10px; border-top: 2px solid var(--advoco-oro, #BD9439); border-right: 2px solid var(--advoco-oro, #BD9439); transform: rotate(45deg); }
.av-cuando { display: flex; flex-direction: column; justify-content: flex-end; height: var(--av-cuando); margin: 0; padding-bottom: 16px; font: 700 12.5px/1.3 var(--f-grotesca); letter-spacing: 0.14em; text-transform: uppercase; color: var(--advoco-oro-texto, #765a20); }
.av-cuando small { display: block; margin-top: 3px; font: 500 14.5px/1.3 var(--f-grotesca); letter-spacing: 0; text-transform: none; color: var(--gris, #5c5852); }
.av-nodo { position: relative; z-index: 1; display: grid; place-items: center; width: var(--av-nodo); height: var(--av-nodo); border-radius: 50%; background: #000; color: #fff; font: italic 400 23px/1 var(--f-serif); box-shadow: inset 0 0 0 2px var(--advoco-oro, #BD9439), 0 0 0 7px var(--av-fondo, #fff); transition: background 0.5s, color 0.5s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 0.4s + 0.25s); }
.av-js .av-tiempo:not(.av-visto) .av-nodo { background: var(--av-fondo, #fff); color: var(--advoco-oro-texto, #765a20); transform: scale(0.86); }
.av-tiempo h3 { margin: 24px 0 10px; font: 800 21px/1.2 var(--f-grotesca); letter-spacing: -0.015em; color: #000; }
.av-tiempo li > p:last-child { margin: 0; max-width: 31ch; font-size: 16px; line-height: 1.6; color: var(--gris, #5c5852); }
@media (max-width: 860px) {
  .av-tiempo { --av-nodo: 50px; grid-template-columns: 1fr; }
  .av-tiempo::before, .av-tiempo::after { left: calc(var(--av-nodo) / 2 - 1px); right: auto; top: calc(var(--av-nodo) / 2); bottom: 4px; width: 2px; height: auto; transform-origin: center top; }
  .av-js .av-tiempo:not(.av-visto)::after { transform: scaleY(0); }
  .av-tiempo li { display: grid; grid-template-columns: var(--av-nodo) minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 0 0 36px; }
  .av-tiempo li:last-child { padding-bottom: 22px; }
  .av-tiempo li:last-child::before { right: auto; left: calc(var(--av-nodo) / 2 - 6px); top: auto; bottom: 4px; transform: rotate(135deg); }
  .av-nodo { grid-column: 1; grid-row: 1 / span 3; font-size: 20px; }
  .av-cuando { grid-column: 2; grid-row: 1; height: auto; padding: 3px 0 8px; }
  .av-tiempo h3 { grid-column: 2; grid-row: 2; margin: 0 0 8px; }
  .av-tiempo li > p:last-child { grid-column: 2; grid-row: 3; max-width: none; }
}

/* ── 3. Qué puede esperar de nosotros (pilares) ───────────────────────── */
.av-pilares { background: var(--hueso); }
.av-pilares .pilares { gap: 16px; align-items: stretch; }
.av-pilares .pilar { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 40px); background: #fff; border-top: 3px solid #000; }
.av-pilares .pilar::before { content: ""; position: absolute; left: 0; top: -3px; width: 0; height: 3px; background: var(--advoco-oro, #BD9439); transition: width 0.6s var(--suave); }
.av-pilares .pilar:hover::before, .av-pilares .pilar:focus-within::before { width: 100%; }
.av-pilares .pilar.visible:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(0, 0, 0, 0.5); transition: transform 0.45s var(--suave), box-shadow 0.45s; }
.av-pilares .pilar-ico { width: 78px; height: 78px; margin-bottom: 26px; color: var(--advoco-oro, #BD9439); }
.av-pilares .pilar-ico svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.av-pilares .pilar h3 { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.15; margin-bottom: 12px; }
.av-pilares .pilar > p { font-size: 16.5px; margin-bottom: 22px; }
.pilar-sub { margin: 0 0 12px; padding-top: 20px; border-top: 1px solid var(--acero-2); font: 700 12px/1.3 var(--f-grotesca); letter-spacing: 0.14em; text-transform: uppercase; color: var(--advoco-oro-texto, #765a20); }
.pilar-lista { display: grid; gap: 10px; margin: 0 0 28px; }
.pilar-lista li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; color: var(--tinta); }
.pilar-lista li::before { content: ""; position: absolute; left: 2px; top: 0.4em; width: 12px; height: 6px; border-left: 2px solid var(--advoco-oro, #BD9439); border-bottom: 2px solid var(--advoco-oro, #BD9439); transform: rotate(-45deg); }
.pilar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.pilar-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px; border: 1.5px solid var(--acero-2); font-size: 15px; font-weight: 600; color: var(--tinta); text-decoration: none; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pilar-chips a:hover { background: #000; border-color: #000; color: #fff; }
.av-pilares .pilar .liga { margin-top: auto; align-self: flex-start; }
@media (max-width: 1020px) { .av-pilares .pilares { grid-template-columns: 1fr; } }

/* ── 4. Cobertura: esquema y explorador de zonas ──────────────────────── */
.detail-art .av-mapa { display: block; width: 100%; height: 100%; }
.av-mapa text { font-family: var(--f-grotesca); }
.av-mapa .av-mapa-anillo { fill: none; stroke: var(--advoco-oro, #BD9439); stroke-width: 1; opacity: 0.3; }
.av-mapa .av-mapa-orbita { fill: none; stroke: var(--advoco-oro, #BD9439); stroke-width: 1.2; stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0.75; }
.av-mapa .av-mapa-lema { fill: var(--advoco-oro, #BD9439); font-size: 14.5px; font-weight: 700; letter-spacing: 0.24em; }
.av-mapa .av-mapa-red { fill: rgba(189, 148, 57, 0.07); stroke: var(--advoco-oro, #BD9439); stroke-width: 1.4; stroke-linejoin: round; }
.av-mapa .av-mapa-fino { fill: none; stroke: var(--advoco-oro, #BD9439); stroke-width: 1; opacity: 0.45; }
.av-mapa-nodo { cursor: pointer; text-decoration: none; }
.av-mapa-nodo .halo { fill: #000; stroke: var(--advoco-oro, #BD9439); stroke-width: 1.5; transition: fill 0.3s; }
.av-mapa-nodo .punto { fill: var(--advoco-oro, #BD9439); transition: fill 0.3s; }
.av-mapa-nodo .pulso { fill: none; stroke: var(--advoco-oro, #BD9439); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: av-pulso 3.6s ease-out infinite; animation-delay: var(--r, 0s); }
.av-mapa-nodo text { fill: #fff; font-size: 23px; font-weight: 600; paint-order: stroke; stroke: #000; stroke-width: 6px; stroke-linejoin: round; }
.av-mapa-nodo text.sub { fill: #cfc7b8; font-size: 15px; font-weight: 500; }
.av-mapa-nodo:hover .halo, .av-mapa-nodo:focus-visible .halo, .av-mapa-nodo.activa .halo { fill: var(--advoco-oro, #BD9439); }
.av-mapa-nodo:hover .punto, .av-mapa-nodo:focus-visible .punto, .av-mapa-nodo.activa .punto { fill: #000; }
.av-mapa-nodo:focus-visible { outline: none; }
.av-mapa-nodo:focus-visible text { fill: var(--advoco-oro, #BD9439); }
@keyframes av-pulso { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(2.7); opacity: 0; } }

.av-zonas { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.av-zonas-lista { display: grid; border-top: 1px solid var(--d-line); }
.av-zonas-lista button { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 66px; padding: 16px 14px 16px 0; border: 0; border-bottom: 1px solid var(--d-line); background: none; text-align: left; cursor: pointer; font: 700 20px/1.2 var(--f-grotesca); color: #6b655a; transition: color 0.25s, padding 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.25s, box-shadow 0.25s; }
.av-zonas-lista button > span { flex: none; width: 24px; font: 600 12px/1 var(--f-grotesca); letter-spacing: 0.06em; color: var(--advoco-oro-texto, #765a20); }
.av-zonas-lista button::after { content: "→"; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s; }
.av-zonas-lista button:hover { color: #000; padding-left: 10px; }
.av-zonas-lista button[aria-selected="true"] { color: #000; padding-left: 18px; background: #f6f3ed; box-shadow: inset 4px 0 0 var(--advoco-oro, #BD9439); }
.av-zonas-lista button[aria-selected="true"]::after { opacity: 1; transform: none; }
.av-zonas-nota { margin-top: 22px; font-size: 14px; line-height: 1.6; color: #625b50; }
.av-zona-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border: 1px solid var(--d-line); background: #fff; }
.av-zona-panel[hidden] { display: none; }
.av-js .av-zona-panel:not([hidden]) { animation: av-entra 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes av-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.av-zona-panel figure { position: relative; margin: 0; background: #000; min-height: 300px; }
.av-zona-panel figure img { width: 100%; height: 100%; object-fit: contain; }
.av-zona-panel figcaption { position: absolute; left: 20px; right: 20px; bottom: 14px; font: 600 10px/1.4 var(--f-grotesca); letter-spacing: 0.16em; text-transform: uppercase; color: var(--advoco-oro, #BD9439); }
.av-zona-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(24px, 3vw, 40px); }
.av-zona-texto h3 { font: 800 clamp(26px, 2.5vw, 34px)/1.08 var(--f-grotesca); letter-spacing: -0.02em; }
.av-zona-texto p { font-size: 16.5px; line-height: 1.65; color: #575247; }
.av-zona-texto .pilar-chips { margin: 0; }
.av-zona-texto .pilar-chips a { border-color: var(--d-line); min-height: 40px; padding: 7px 13px; font-size: 14px; }
.av-zona-texto .detail-button { gap: 18px; text-align: left; }
.av-zonas-mover { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.av-zonas-mover button { display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid #000; background: #fff; color: #000; font-size: 20px; cursor: pointer; transition: background 0.25s, color 0.25s; }
.av-zonas-mover button:hover { background: #000; color: #fff; }
.av-zonas-mover span { margin-left: 8px; font: 600 14px/1 var(--f-grotesca); letter-spacing: 0.08em; color: #625b50; font-variant-numeric: tabular-nums; }
.av-zonas > * { min-width: 0; }
@media (max-width: 980px) {
  .av-zonas { grid-template-columns: minmax(0, 1fr); }
  .av-zonas-lista { display: flex; gap: 8px; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 10px; border: 0; scroll-snap-type: x proximity; scrollbar-width: none; }
  .av-zonas-lista::-webkit-scrollbar { display: none; }
  .av-zonas-lista button { flex: none; width: auto; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--d-line); font-size: 16px; white-space: nowrap; scroll-snap-align: start; }
  .av-zonas-lista button > span, .av-zonas-lista button::after { display: none; }
  .av-zonas-lista button:hover { padding-left: 16px; }
  .av-zonas-lista button[aria-selected="true"] { padding-left: 16px; background: #000; border-color: #000; color: #fff; box-shadow: none; }
  .av-zonas-nota { display: none; }
}
@media (max-width: 760px) {
  .av-zona-panel { grid-template-columns: minmax(0, 1fr); }
  .av-zona-panel figure { min-height: 0; aspect-ratio: 8 / 5; }
  .av-zona-texto .detail-button { width: 100%; justify-content: space-between; }
}

/* ── 5. Formulario más grande y más fácil de responder ────────────────── */
@media (min-width: 1121px) {
  .portada-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 610px); gap: clamp(36px, 4vw, 60px); }
  .titular { font-size: clamp(54px, 6.3vw, 104px); }
}
@media (max-width: 1120px) { .caja-form { max-width: 720px; } }
@media (min-width: 761px) { .detail-contact { grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); gap: clamp(32px, 4vw, 64px); } }
.caja-form { padding: clamp(24px, 2.6vw, 40px); }
.caja-titulo { font-size: clamp(30px, 2.7vw, 40px); }
.caja-sub { font-size: 16.5px; }
.cf-paso-texto { margin: 0 0 10px; font: 700 12.5px/1.3 var(--f-grotesca); letter-spacing: 0.14em; text-transform: uppercase; color: var(--advoco-oro-texto, #765a20); }
.cf-progreso { gap: 8px; margin-bottom: 14px; font-size: 13.5px; }
.cf-progreso li span { width: 30px; height: 30px; font-size: 13.5px; }
.cf-progreso li[role="button"] { cursor: pointer; }
.cf-progreso li[role="button"]:hover em, .cf-progreso li[role="button"]:focus-visible em { text-decoration: underline; color: #000; }
.cf-barra { height: 5px; margin-bottom: 26px; }
.cf-barra i { background: var(--advoco-oro, #BD9439); }
.cf-titulo { font-size: clamp(23px, 2vw, 28px); margin-bottom: 20px; }
.cf-materias { gap: 10px; }
.cf-materia { grid-template-columns: 38px minmax(0, 1fr); column-gap: 15px; row-gap: 2px; align-items: center; min-height: 94px; padding: 16px 18px; }
.cf-materia::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; background: var(--advoco-oro-texto, #765a20); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.cf-materia:has(input[value="laboral"])::before { -webkit-mask-image: url("comun/diseno/iconos/linea/laboral.svg"); mask-image: url("comun/diseno/iconos/linea/laboral.svg"); }
.cf-materia:has(input[value="familiar"])::before { -webkit-mask-image: url("comun/diseno/iconos/linea/familiar.svg"); mask-image: url("comun/diseno/iconos/linea/familiar.svg"); }
.cf-materia:has(input[value="civil"])::before { -webkit-mask-image: url("comun/diseno/iconos/linea/civil.svg"); mask-image: url("comun/diseno/iconos/linea/civil.svg"); }
.cf-materia:has(input[value="mercantil"])::before { -webkit-mask-image: url("comun/diseno/iconos/linea/mercantil.svg"); mask-image: url("comun/diseno/iconos/linea/mercantil.svg"); }
.cf-materia:has(input[value="penal"])::before { -webkit-mask-image: url("comun/diseno/iconos/linea/penal.svg"); mask-image: url("comun/diseno/iconos/linea/penal.svg"); }
.cf-materia:has(input[value="no_se"])::before { -webkit-mask-image: url("comun/diseno/iconos/linea/orientacion.svg"); mask-image: url("comun/diseno/iconos/linea/orientacion.svg"); }
.cf-materia strong { grid-column: 2; align-self: end; font-size: 19px; }
.cf-materia small { grid-column: 2; align-self: start; font-size: 14.5px; }
.cf-materia:hover::before, .cf-materia:has(input:checked)::before { background: #000; }
.cf-grupo { margin-bottom: 24px; }
.cf-grupo legend { margin-bottom: 12px; font-size: 17px; line-height: 1.3; }
.cf-opcional { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--gris-claro); white-space: nowrap; }
.cf-ayuda { font-size: 14px; margin: -6px 0 12px; }
.cf-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cf-chip { display: flex; }
.cf-chip span { position: relative; display: flex; flex: 1; min-height: 54px; padding: 12px 14px 12px 44px; font-size: 15.5px; line-height: 1.3; }
.cf-chip span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 1.5px solid var(--gris-claro); border-radius: 50%; background: #fff; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.cf-chip input:checked + span::before { border-color: var(--advoco-oro, #BD9439); background: var(--advoco-oro, #BD9439); box-shadow: inset 0 0 0 4px #000; }
.cf-campo { margin-bottom: 18px; }
.cf-campo label { font-size: 15.5px; }
.cf-campo input, .cf-campo textarea { min-height: 56px; padding: 16px; font-size: 17px; }
.cf-fila { gap: 12px; }
.cf-acepto { margin: 8px 0; font-size: 14.5px; line-height: 1.5; }
.cf-acepto input { width: 22px; height: 22px; }
.cf-error { font-size: 15px; }
.cf-btn { min-height: 58px; padding: 16px 30px; font-size: 16.5px; }
.cf-acciones .cf-btn:not(.cf-btn-sec) { flex: 1; }
.cf-nota { font-size: 13.5px; }
@media (max-width: 640px) {
  .cf-opciones { grid-template-columns: 1fr; }
  .cf-materia { min-height: 72px; padding: 13px 16px; }
  .cf-materia::before { width: 32px; height: 32px; }
  .cf-progreso li span { width: 28px; height: 28px; }
  .cf .cf-progreso li em, .cf .cf-progreso li.actual em { display: none; } /* el nombre del paso ya va arriba: «Paso 1 de 4 · Materia» */
}

@media (prefers-reduced-motion: reduce) {
  .av-mapa-nodo .pulso { animation: none; opacity: 0; }
  .av-js .av-tiempo:not(.av-visto)::after { transform: none; }
  .av-js .av-tiempo:not(.av-visto) .av-nodo { background: #000; color: #fff; transform: none; }
}

html:not(.av-js) .av-zonas-mover { display: none; }