/* Serrano del Río Abogados · Marbella · hoja de estilo única.
   Voz editorial: Fraunces (titulares y cuerpo, con tamaño óptico) y Jost (rótulos, menú, números: la familia del logotipo).
   Dos temas (claro/oscuro) por variables; el navegador elige y el pie deja cambiarlo. Sin librerías. */
@font-face{font-family:"Fraunces";src:url(/fuentes/fraunces.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fuentes/fraunces-italic.woff2) format("woff2");font-weight:300 400;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(/fuentes/jost.woff2) format("woff2");font-weight:300 500;font-style:normal;font-display:swap}

:root{
  --papel:#f4efe6; --papel-2:#ebe4d7; --tinta:#122234; --tinta-2:#46505c; --tinta-3:#5f646b; --linea:#cfc7b8;
  --acento:#7d6540; --laton:#9c815a; --laton-texto:#7d6540; --blanco:#fffdf9; --sombra:18,34,52;
  --ancho:1440px; --margen:clamp(20px,4vw,64px);
  --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Jost","Avenir Next","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
/* El tema oscuro NO sigue al sistema (Rubén, 02/10: un despacho se lee en claro); solo si el visitante lo elige en el pie. */
:root[data-tema="oscuro"]{
  --papel:#14171b; --papel-2:#1b1f24; --tinta:#efe9de; --tinta-2:#bdb6aa; --tinta-3:#9a948a; --linea:#343a41;
  --acento:#c9a86a; --laton:#9c815a; --laton-texto:#c9a86a; --blanco:#1b1f24; --sombra:0,0,0; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}/* la barra siempre tiene su hueco: una página corta no mueve la cabecera */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--serif);font-size:clamp(1.0625rem,0.98rem + 0.35vw,1.1875rem);line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
h1,h2,h3,h4{font-weight:400;line-height:1.05;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.salto{position:absolute;left:-200vw;top:0;background:var(--tinta);color:var(--papel);padding:.6em 1em;font-family:var(--sans);z-index:100}
.salto:focus{left:var(--margen)}

/* ── rótulos y tipos ── */
.rotulo{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.rotulo::before{content:"";display:inline-block;width:1.6em;height:1px;background:var(--laton);vertical-align:middle;margin-right:.9em}
.num{font-family:var(--sans);font-weight:300;font-variant-numeric:tabular-nums lining-nums}
.enlace{font-family:var(--sans);font-weight:500;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;gap:.5em;position:relative}
.enlace::after{content:"";position:absolute;left:0;bottom:-.2em;height:1px;width:100%;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.enlace:hover::after,.enlace:focus-visible::after{transform:scaleX(1)}
.enlace .flecha{transition:transform .35s ease}
.enlace:hover .flecha{transform:translateX(.3em)}
.boton{font-family:var(--sans);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.84rem;text-decoration:none;display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.7em;border:1px solid var(--tinta);color:var(--tinta);background:transparent;white-space:nowrap;transition:background .35s ease,color .35s ease}
.boton:hover,.boton:focus-visible{background:var(--tinta);color:var(--papel)}
.boton.lleno{background:var(--tinta);color:var(--papel)}
.boton.lleno:hover,.boton.lleno:focus-visible{background:var(--acento);border-color:var(--acento);color:var(--papel)}

/* el botón con el traje del logotipo (prueba, 04/10: «Qué hacemos» de la portada). Medido en el logotipo: el marco es un
   rectángulo de línea fina sin los lados, dos corchetes reflejados arriba y abajo, cada patita 1/6 de su alto; el texto,
   en mayúsculas espaciadas, va centrado y SE SALE del marco (aquí, una letra por cada lado). Sin flecha. Al pasar, el
   texto crece un poco (el marco no se mueve). */
.boton-marca{position:relative;display:inline-flex;align-items:center;justify-self:start;align-self:center;width:max-content;padding:1.15em 0 1.15em .2em;font-family:var(--sans);font-weight:500;
  font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--tinta);white-space:nowrap}
/* el marco empieza tras la PRIMERA letra y acaba antes de la ÚLTIMA (Rubén, 04/10: «que solo sobresalga una letra por cada
   lado»): sitio.js mide esas dos letras en cada botón y pone --izq y --der; sin él, un ancho de letra aproximado */
.boton-marca::before,.boton-marca::after{content:"";position:absolute;left:var(--izq,1.05em);right:var(--der,1.05em);height:17%;border:1px solid currentColor}
.boton-marca::before{top:0;border-bottom:0}
.boton-marca::after{bottom:0;border-top:0}
.boton-marca span{display:inline-block;max-width:100%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* siempre en UNA línea (Rubén, 05/10: «en dos líneas se pierde el efecto del logotipo»): si no cabe, sitio.js le baja la
   letra hasta que quepa (html.marcos). Sin JavaScript, en el móvil baja de renglón antes que sacar la página de la pantalla */
@media (max-width:600px){html:not(.marcos) .boton-marca{white-space:normal;width:auto;max-width:100%}}
.boton-marca:hover span,.boton-marca:focus-visible span{transform:scale(1.08)}
.boton-marca:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){.boton-marca span{transition:none}}
/* 04/10: todos los enlaces de texto con flechita (.enlace) pasan a este botón; sus márgenes de sitio, los mismos */
.dos .texto+.boton-marca{margin-top:2rem}
.servicio-grande .boton-marca{margin-top:1.2rem}
.boton-marca.abajo{margin-top:2rem}
.cabeza.al-final{margin:2.5rem 0 0}
.resenas .boton-marca.resena{margin-left:1.6rem}
@media (max-width:520px){.resenas .boton-marca.resena{margin-left:0;margin-top:.8rem}}

/* los párrafos en Jost en toda la web, y el pie entero (Rubén, 05/10); los títulos siguen en Fraunces, y las cursivas
   también (el lema, la cita, las opiniones y la nota de traducción del pie: «las cursivas están bien») */
[data-cuerpo="sans"] main p:not(.lema):not(blockquote p){font-family:var(--sans);font-weight:400}
[data-cuerpo="sans"] .pie{font-family:var(--sans)}
[data-cuerpo="sans"] main .puntos li{font-family:var(--sans)}/* las listas (fichas: formación, idiomas…; servicios: los puntos), también (05/10) */
[data-cuerpo="sans"] .pie .traduccion{font-family:var(--serif)}

/* ── cabecera ── */
.cab{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--papel) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab-in{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;min-height:92px}
.logo{display:block;color:var(--tinta);text-decoration:none;line-height:0}
.logo svg{height:72px;width:auto;display:block;fill:currentColor;overflow:visible}
.menu{display:flex;justify-content:center;gap:clamp(1.2rem,2.4vw,2.6rem);font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:.06em}
.menu a{text-decoration:none;color:var(--tinta-2);padding:.4em 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--laton);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--tinta)}
.cab-acciones{display:flex;align-items:center;gap:1.1rem;justify-self:end}
/* el selector de idioma: un <details> que despliega la lista (seis idiomas desde el 01/10); sitio.js lo cierra al pulsar fuera */
.idiomas{position:relative;font-family:var(--sans);font-size:.84rem;letter-spacing:.08em}
.idiomas summary{list-style:none;cursor:pointer;border:1px solid var(--linea);height:40px;padding:0 .8em;color:var(--tinta-2);display:inline-flex;align-items:center;gap:.6em;line-height:1.2}/* 40 px: la altura de «Área de clientes» y del tema (04/10) */
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary::after{content:"";width:.38em;height:.38em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-.1em,-.1em)}
.idiomas[open] summary,.idiomas summary:hover{border-color:var(--tinta);color:var(--tinta)}
.idiomas ul{position:absolute;right:0;top:calc(100% + .45rem);min-width:11.5rem;background:var(--papel);border:1px solid var(--linea);padding:.35rem 0;z-index:70;box-shadow:0 12px 32px rgba(18,34,52,.10)}
.idiomas li a{display:block;padding:.6em 1.1em;text-decoration:none;color:var(--tinta-2);letter-spacing:.04em;white-space:nowrap}
.idiomas li a:hover,.idiomas li a:focus-visible{background:var(--papel-2);color:var(--tinta)}
.idiomas li a[aria-current]{color:var(--tinta);font-weight:500}
.tema-cab{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--linea);color:var(--tinta-2);background:none;cursor:pointer}
.tema-cab:hover,.tema-cab:focus-visible{border-color:var(--tinta);color:var(--tinta)}
@media (max-width:1023px){.tema-cab{display:none}}
/* el acceso al área de clientes: un botón discreto a la derecha, en todas las páginas; de 1024 a 1300 solo el icono */
.acceso{position:relative;display:inline-flex;align-items:center;gap:.55em;height:40px;padding:0 1em;border:1px solid var(--linea);font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--tinta-2);white-space:nowrap}
.acceso:hover,.acceso:focus-visible,.acceso[aria-current]{border-color:var(--tinta);color:var(--tinta)}
@media (max-width:1300px){.acceso{width:40px;padding:0;justify-content:center}.acceso span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (max-width:1023px){.acceso{display:none}}
@media (max-width:1023px){.idiomas summary{height:44px}}/* en móvil, la altura del teléfono y del menú (04/10) */
@media (min-width:1024px){.menu .solo-movil{display:none}}
@media (max-width:1300px){.menu{font-size:.82rem;gap:clamp(.9rem,1.6vw,1.6rem)}}
.tel-cab{display:none;width:44px;height:44px;border:1px solid var(--linea);color:var(--tinta);place-items:center;text-decoration:none}
.tel-cab:hover,.tel-cab:focus-visible{border-color:var(--tinta)}
.hamb{display:none;background:none;border:1px solid var(--linea);color:var(--tinta);width:44px;height:44px;cursor:pointer;place-items:center}
.hamb span{display:block;width:20px;height:1px;background:currentColor;margin:3px 0;transition:transform .3s ease,opacity .3s ease}
.cab[data-abierto="si"] .hamb span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.cab[data-abierto="si"] .hamb span:nth-child(2){opacity:0}
.cab[data-abierto="si"] .hamb span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1023px){
  .cab-in{grid-template-columns:auto 1fr auto;min-height:74px}
  .logo svg{height:52px}
  .menu{display:none}
  .hamb{display:grid}
  .tel-cab{display:grid}
  .cab[data-abierto="si"] .menu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--papel);border-bottom:1px solid var(--linea);padding:1.2rem var(--margen) 1.6rem;gap:0;font-size:1.25rem;letter-spacing:.03em;z-index:60}
  .cab[data-abierto="si"] .menu a{padding:.8em 0;border-top:1px solid var(--linea);color:var(--tinta)}
  .cab[data-abierto="si"] .menu a::after{display:none}
  .cab[data-abierto="si"] .menu .menu-cta{margin-top:1.2rem;border:1px solid var(--tinta);text-align:center;padding:1em;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
}
@media (min-width:1024px){.menu .menu-cta{display:none}}

/* ── estructura ── */
.ancho{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
.seccion{padding:clamp(4rem,9vw,8.5rem) 0}
.seccion+.seccion{padding-top:0}
.cabeza{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.cabeza h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem)}
.cabeza .rotulo{margin-bottom:1.2rem}
@media (max-width:767px){.cabeza{grid-template-columns:1fr}}
.linea{border:0;border-top:1px solid var(--linea);margin:0}

/* ── portada: héroe ── */
.hero{padding:clamp(3rem,7vw,6.5rem) 0 clamp(3rem,6vw,5.5rem);position:relative}
.hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.hero h1{font-size:clamp(2.75rem,1.6rem + 5.4vw,6.4rem);line-height:.98;letter-spacing:-.025em;font-weight:400;max-width:12ch}
.hero .lema{font-style:italic;font-size:clamp(1.2rem,1rem + .9vw,1.7rem);line-height:1.35;color:var(--tinta-2);margin-top:1.4rem;max-width:30ch;font-variation-settings:"opsz" 36}
.hero .intro{margin-top:1.6rem;max-width:52ch;color:var(--tinta-2)}
.hero .rotulo{margin-bottom:1.6rem}
.acciones{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;margin-top:2.4rem}
.retrato{margin:0;position:relative;justify-self:end;width:min(100%,460px)}
.retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;filter:saturate(.92) contrast(1.02)}
.retrato picture{display:block;position:relative}
.retrato picture::before{content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:62%;border:1px solid var(--laton);z-index:-1}
.retrato figcaption{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;color:var(--tinta-3);margin-top:calc(14px + 1rem);text-transform:uppercase}
.lateral{position:absolute;right:calc(var(--margen) / 2 - .5em);top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-3)}
@media (max-width:1100px){.lateral{display:none}}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.retrato{justify-self:start;width:min(100%,380px);margin-top:1rem}}

/* la máquina de escribir del titular de la portada (sitio.js, 03/10): letras invisibles en su sitio y un cursor fino, del
   color del texto (Rubén, 03/10: «demasiado gruesa»), que parpadea, colgado de la última letra escrita (posición absoluta: no toca el reparto en renglones) */
.escribiendo .letra{opacity:0}
.escribiendo .letra.vista{opacity:1}
.escribiendo .letra{position:relative}
.cursor{position:absolute;left:100%;margin-left:.03em;top:.12em;height:.82em;border-left:1.5px solid var(--tinta);animation:parpadeo 1s steps(1) infinite;transition:opacity .6s ease}
.cursor.fuera{opacity:0}
@keyframes parpadeo{50%{border-left-color:transparent}}

/* ── cifras ── */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cifras li{padding:2rem 0;display:flex;align-items:baseline;gap:1rem;border-left:1px solid var(--linea);padding-left:1.6rem}
.cifras li:first-child{border-left:0;padding-left:0}
.cifras .num{font-size:clamp(2.6rem,2rem + 2.6vw,4.6rem);line-height:1;color:var(--tinta)}
.cifras span:last-child{font-style:italic;color:var(--tinta-2);max-width:12ch;line-height:1.25}
@media (max-width:640px){.cifras{grid-template-columns:1fr}.cifras li{border-left:0;padding-left:0;border-top:1px solid var(--linea);padding:1.4rem 0}.cifras li:first-child{border-top:0}}

/* ── el despacho (texto a dos columnas) ── */
.dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem clamp(2rem,5vw,6rem);align-items:start}
.dos h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem)}
.dos .texto{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.5;font-variation-settings:"opsz" 24;color:var(--tinta)}
.dos .texto+.enlace{margin-top:2rem}
@media (max-width:767px){.dos{grid-template-columns:1fr}}

/* ── servicios: lista editorial ── */
.servicios{border-top:1px solid var(--linea)}
.servicios li{border-bottom:1px solid var(--linea)}
.servicios a,.servicios .fila{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 2rem;gap:1.5rem;align-items:baseline;padding:1.8rem 0;text-decoration:none;color:inherit;transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.servicios a:hover,.servicios a:focus-visible{padding-left:.8rem}
.servicios h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.3rem);letter-spacing:-.01em}
.servicios p{color:var(--tinta-2);font-size:1rem}
.servicios .flecha{justify-self:end;color:var(--tinta-3);transition:transform .35s ease,color .35s ease}
.servicios a:hover .flecha{transform:translate(.3em,-.3em);color:var(--tinta)}
@media (max-width:860px){.servicios a,.servicios .fila{grid-template-columns:1fr;grid-template-rows:auto auto;gap:.6rem}.servicios .flecha{display:none}}

/* ── servicios: página ── */
.servicio-grande{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:1.5rem clamp(1.5rem,4vw,4rem);padding:clamp(2.2rem,4vw,3.4rem) 0;border-top:1px solid var(--linea)}
.servicio-grande:last-child{border-bottom:1px solid var(--linea)}
.servicio-grande .num{font-size:clamp(2.4rem,2rem + 2vw,4rem);color:var(--laton);line-height:1}
.servicio-grande h2{font-size:clamp(1.8rem,1.3rem + 2vw,3rem);margin-bottom:.8rem}
.servicio-grande p{max-width:62ch;color:var(--tinta-2);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
@media (max-width:640px){.servicio-grande{grid-template-columns:1fr;gap:.6rem}}
.pasos{counter-reset:paso;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem)}
.pasos li{counter-increment:paso;border-top:1px solid var(--tinta);padding-top:1.4rem;position:relative}
/* un solo número: el 01 de aquí (03/10: la lista numerada pintaba además su «1.» delante; list-style:none lo quita) */
.pasos li::before{content:"0" counter(paso);font-family:var(--sans);font-weight:300;font-size:2.2rem;color:var(--laton);display:block;margin-bottom:1rem;line-height:1}
.pasos h3{font-size:1.35rem;margin-bottom:.6rem}
.pasos p{color:var(--tinta-2);font-size:1rem}
@media (max-width:900px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}

/* ── cita ── */
.cita{padding:clamp(4rem,9vw,8rem) 0;text-align:center}
.cita blockquote{margin:0 auto;max-width:24ch;font-size:clamp(1.9rem,1.2rem + 3.2vw,4.2rem);line-height:1.12;letter-spacing:-.02em;font-style:italic;font-weight:300;font-variation-settings:"opsz" 72}
.cita blockquote::before{content:"";display:block;width:3rem;height:1px;background:var(--laton);margin:0 auto 2.4rem}

/* ── razones (portada): llevan el traje de los pasos (.pasos), en tres columnas (03/10) ── */
.pasos.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.pasos.tres{grid-template-columns:1fr}}

/* ── valores (el despacho) ── */
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.valores li{border-top:1px solid var(--linea);padding-top:1.4rem}
.valores h3{font-size:1.3rem;margin-bottom:.7rem}
.valores p{color:var(--tinta-2);font-size:1rem}
@media (max-width:860px){.valores{grid-template-columns:1fr}}
/* 36ch: «Abogados inmobiliarios en Marbella: / seguridad jurídica en cada paso.» en dos líneas en escritorio (03/10) */
.banda{background:var(--papel-2);padding:clamp(3rem,6vw,5.5rem) 0}
.banda h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.8rem);max-width:36ch;font-style:italic;font-weight:300}

/* ── reseñas ── */
.resenas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem clamp(2rem,5vw,6rem);align-items:center;border:1px solid var(--linea);padding:clamp(1.8rem,4vw,3.4rem)}
.resenas h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem)}
.resenas .resena{margin-left:1.6rem}
@media (max-width:520px){.resenas .resena{margin-left:0;margin-top:.8rem;display:inline-flex}}
.resenas .estrellas{font-family:var(--sans);letter-spacing:.3em;color:var(--laton-texto);font-size:1.1rem;margin-bottom:.8rem}
@media (max-width:767px){.resenas{grid-template-columns:1fr}}
/* las páginas legales: columna de lectura, h2 por sección, fecha al pie */
.legal{max-width:72ch}
.legal h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);margin:2.4rem 0 .7rem}
.legal section:first-child h2{margin-top:0}
.legal p{margin:0 0 1em;color:var(--tinta-2)}
.legal .actualizado{margin-top:2.6rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
/* las opiniones de Google (resenas.py pinta el bloque entre marcas; aquí solo su traje) */
.cuenta{font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);margin:2rem 0 1rem}
.opiniones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1rem}/* 15rem: cinco en una fila desde 1280 (medido: a 16rem quedaban 4 + 1 suelta) */
.opinion{border:1px solid var(--linea);background:var(--papel-2);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.opinion .estrellas{font-family:var(--sans);letter-spacing:.2em;color:#6b5535;font-size:.95rem;margin:0}/* más oscuro que el latón del texto: sobre papel-2 el latón da 4,36 de contraste (medido) y hace falta 4,5 */
:root[data-tema="oscuro"] .opinion .estrellas{color:var(--laton-texto)}
.opinion blockquote{margin:0;font-style:italic;font-size:1rem;line-height:1.5}.opinion blockquote p{margin:0}
.opinion .quien{margin:auto 0 0;font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;color:var(--tinta-2)}.opinion .quien em{font-style:normal;color:var(--tinta-3)}

/* ── llamada final ── */
.cta{background:#122234;color:#f4efe6;padding:clamp(4rem,9vw,8rem) 0}
.cta .rotulo{color:#c9a86a}
.cta .rotulo::before{display:none}/* sin la raya delante (Rubén, 03/10) */
.cta h2{font-size:clamp(2.4rem,1.6rem + 4vw,5.4rem);letter-spacing:-.02em;max-width:14ch}
.cta p{margin-top:1.4rem;max-width:46ch;color:#cfc7b8;font-size:clamp(1.1rem,1rem + .4vw,1.3rem)}
.cta .boton{border-color:#f4efe6;color:#f4efe6;margin-top:2.4rem}
.cta .boton:hover,.cta .boton:focus-visible{background:#f4efe6;color:#122234}
.cta-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:end}
.cta-in .boton{justify-self:start}
@media (max-width:767px){.cta-in{grid-template-columns:1fr}}

/* ── páginas interiores: cabecera ── */
.portadilla{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4.5rem)}
.portadilla h1{font-size:clamp(2.6rem,1.6rem + 5vw,6rem);letter-spacing:-.025em;line-height:.98;max-width:14ch}
.portadilla .lema{font-style:italic;font-size:clamp(1.2rem,1rem + .9vw,1.7rem);color:var(--tinta-2);margin-top:1.4rem;max-width:34ch;line-height:1.35}
.portadilla .intro{margin-top:1.6rem;max-width:58ch;color:var(--tinta-2);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}
.portadilla .rotulo{margin-bottom:1.6rem}

/* ── equipo: el carrusel de tarjetas (03/10) ──
   La mecánica es la del carrusel de saykin.es (#carr-soluciones): activa en el centro, las demás a los lados al 94 %, se
   arrastra y encaja, mandos con cuenta debajo. El traje, el de esta web: esquinas rectas, línea fina, latón para lo activo.
   Lo que cambia al centrarse es la FOTO (color y escala) y la sombra; el texto no se apaga, para no perder contraste.
   El texto va entero (cargo, nombre, colegiación sin repetir el cargo, primer párrafo): foto 4:3 arriba y todas a la altura de la más larga.
   Sin JavaScript (sin .vivo) es una tira con desplazamiento propio e imán. */
.carrusel{position:relative}
/* la caja del carrusel, dentro del ancho del contenido (el de .ancho, sin su margen) y con los dos bordes fundidos: las
   tarjetas aparecen y desaparecen por los lados (Rubén, 04/10: «no quiero que se salga por el lado izquierdo de la pantalla») */
.carrusel-caja{overflow:hidden;width:calc(100% - 2 * var(--margen));max-width:calc(var(--ancho) - 2 * var(--margen));margin:0 auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 min(5rem,12%),#000 calc(100% - min(5rem,12%)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 min(5rem,12%),#000 calc(100% - min(5rem,12%)),transparent 100%)}
.tarjetas{--lado:clamp(18rem,28vw,25rem);--hueco:clamp(1rem,2vw,1.75rem);display:flex;gap:var(--hueco);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margen);padding:1.5rem var(--margen) 3rem;scrollbar-width:none}
.tarjetas>li{flex:none;width:var(--lado);scroll-snap-align:center;display:flex}
@media (max-width:768px){.tarjetas{--lado:min(82vw,21rem)}}
.carrusel.vivo .carrusel-caja{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.carrusel.vivo .carrusel-caja:active{cursor:grabbing}
.carrusel.vivo .tarjetas{overflow:visible;scroll-snap-type:none;padding-inline:0;will-change:transform}
.tarjeta{display:flex;flex-direction:column;width:100%;overflow:hidden;background:var(--blanco);color:inherit;text-decoration:none;
  border:1px solid var(--linea);-webkit-user-drag:none}
.tarjeta img{-webkit-user-drag:none;pointer-events:none}
.tarjeta picture{display:block;flex:none;aspect-ratio:4/3;overflow:hidden;background:var(--papel-2)}
.tarjeta img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}
.tarjeta-texto{display:flex;flex-direction:column;flex:1 1 auto;padding:1.3rem 1.5rem 1.5rem;border-top:1px solid var(--linea)}
.tarjeta .cargo{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laton-texto)}
.tarjeta .nombre{flex:none;font-size:clamp(1.2rem,1.05rem + .45vw,1.45rem);line-height:1.12;margin-top:.35rem}
.tarjeta .colegio{font-size:.86rem;line-height:1.45;color:var(--tinta-2);margin-top:.5rem}
.tarjeta .bio{font-size:.95rem;line-height:1.55;color:var(--tinta-2);margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linea)}
a.tarjeta:focus-visible{outline:2px solid var(--laton);outline-offset:4px}
/* el estado: la activa, entera, con la foto en color y su sombra; las de los lados, al 94 % y con la foto apagada */
.carrusel.vivo .tarjeta{transform:scale(.94);transition:transform .45s cubic-bezier(.25,1,.5,1),border-color .3s ease,box-shadow .45s cubic-bezier(.25,1,.5,1)}
.carrusel.vivo .tarjeta img{filter:grayscale(1) contrast(.95);opacity:.75;transition:filter .45s ease,opacity .45s ease,transform .6s cubic-bezier(.25,1,.5,1)}
.carrusel.vivo .activa .tarjeta{transform:none;border-color:var(--laton);box-shadow:0 22px 40px -22px rgba(var(--sombra),.45)}
.carrusel.vivo .activa .tarjeta img{filter:saturate(.92);opacity:1;transform:scale(1.03)}
.carrusel-mandos{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:.5rem}
.carrusel-mandos[hidden]{display:none}
.carrusel-btn{width:48px;height:48px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--tinta);background:var(--tinta);color:var(--papel);cursor:pointer;transition:background .25s ease,border-color .25s ease,opacity .25s ease,transform .18s ease}
.carrusel-btn:hover:not(:disabled),.carrusel-btn:focus-visible{background:var(--acento);border-color:var(--acento)}
.carrusel-btn:active:not(:disabled){transform:scale(.94)}
.carrusel-btn:disabled{opacity:.3;cursor:default}
.carrusel-cuenta{font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--tinta-2);min-width:4.5rem;text-align:center}
@media (prefers-reduced-motion:reduce){.carrusel.vivo .tarjeta,.carrusel.vivo .tarjeta img{transition:none}}

/* ── la ficha de cada abogado: el nombre con su cargo debajo y la foto a la derecha; debajo, las listas a la izquierda (se
   quedan al bajar) y la trayectoria a la derecha ── */
.ficha-h1 .lugar{display:block;font-family:var(--sans);font-weight:500;font-size:clamp(.82rem,.75rem + .3vw,1rem);letter-spacing:.14em;text-transform:uppercase;color:var(--laton-texto);margin-top:1.4rem;line-height:1.4}
.ficha-cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2.5rem clamp(2rem,6vw,7rem);align-items:center}
.ficha-foto{margin:0;justify-self:end;width:min(100%,30rem)}
.ficha-foto .tarjeta{aspect-ratio:1;box-shadow:0 22px 40px -22px rgba(var(--sombra),.45)}
.ficha-foto .tarjeta picture{flex:1 1 auto}
.ficha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,6vw,7rem);align-items:start}
.ficha-listas{position:sticky;top:120px}
.ficha-listas .ficha-lista:first-child{margin-top:0}
.ficha-texto .texto{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.5;font-variation-settings:"opsz" 24;color:var(--tinta)}
.ficha-texto .sigue{margin-top:1.2rem;color:var(--tinta-2)}
.ficha-lista{font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);margin-top:3rem}
.ficha-lista+.puntos{margin-top:1rem}
@media (max-width:860px){.ficha-cab{grid-template-columns:1fr}.ficha-foto{justify-self:start;width:min(100%,26rem)}}
@media (max-width:767px){.ficha{grid-template-columns:1fr}.ficha-listas{position:static;order:2}}

/* ── contacto (03/10, opción A sin plano): las tres vías como filas que se pulsan enteras, a la izquierda; la dirección, el
   horario y el botón a Google Maps, a la derecha. Cada dato sale una vez. ── */
.contacto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem clamp(2rem,6vw,7rem);align-items:start}
.vias{border-top:1px solid var(--linea)}
.vias li{border-bottom:1px solid var(--linea)}
.via{display:grid;grid-template-columns:minmax(0,1fr) 2rem;grid-template-areas:"rotulo flecha" "dato flecha";align-items:center;gap:.4rem 1.5rem;
  padding:1.6rem 0;text-decoration:none;color:inherit;transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.via:hover,.via:focus-visible{padding-left:.8rem}
.via-rotulo{grid-area:rotulo;font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2)}
.via-dato{grid-area:dato;font-family:var(--sans);font-weight:300;font-size:clamp(1.4rem,1rem + 1.6vw,2.4rem);letter-spacing:.01em;line-height:1.2;overflow-wrap:anywhere}
.via .flecha{grid-area:flecha;justify-self:end;font-family:var(--sans);font-size:1.2rem;color:var(--tinta-3);transition:transform .35s ease,color .35s ease}
.via:hover .flecha,.via:focus-visible .flecha{transform:translateX(.3em);color:var(--tinta)}
.contacto .aviso{font-size:.9rem;color:var(--tinta-3);margin-top:2rem;max-width:52ch}
.donde-esta{border-top:1px solid var(--linea);padding-top:1.6rem}
.donde-esta address{font-style:normal;font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.45}
.donde-esta .horario{color:var(--tinta-2);font-size:1rem;margin-top:1rem;line-height:1.5}
.donde-esta .boton{margin-top:2rem}
@media (max-width:860px){.contacto{grid-template-columns:1fr}}

/* ── pie ── */
.pie{border-top:1px solid var(--linea);padding:clamp(3rem,6vw,5rem) 0 2rem;color:var(--tinta-2);font-size:.95rem}
.pie-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,2.5fr) minmax(0,3fr);gap:2.5rem clamp(2rem,3.5vw,4.5rem)}/* en cuatro (05/10) */
.pie .logo svg{height:88px}
.pie .colegiacion{margin-top:1.6rem;max-width:46ch;font-size:.9rem}
.pie address{font-style:normal;line-height:1.5}
/* teléfono, WhatsApp y correo, subrayados: se ve que se pulsan (Rubén, 05/10) */
.pie address a{text-decoration:underline;text-decoration-color:var(--laton-texto);text-underline-offset:.22em}
.pie address a:hover{text-decoration-color:currentColor}
.pie .pie-llegar{margin-top:1.2rem}
.pie address .sep{color:var(--laton-texto);margin:0 .2em}/* el latón del texto pequeño: el --laton da 3,2 de contraste sobre el papel (la vara, 03/10) */
.pie .rotulo{margin-bottom:1rem}
.pie .rotulo::before{display:none}
.pie ul li{padding:.25rem 0}
.pie ul a{text-decoration:none}
.pie ul a:hover{text-decoration:underline}
.pie .traduccion{margin-top:1rem;max-width:46ch;font-size:.85rem;font-style:italic;color:var(--tinta-3)}
.pie .pie-idiomas{margin-top:1.6rem;display:flex;align-items:center;gap:1rem}
.pie .pie-idiomas .rotulo{margin-bottom:0}
/* en el pie la lista abre hacia ARRIBA (debajo ya no hay página) y desde la izquierda del botón */
.pie .idiomas ul{top:auto;bottom:calc(100% + .45rem);right:auto;left:0;box-shadow:0 -12px 32px rgba(18,34,52,.10)}
.pie-bajo a{text-decoration:none}.pie-bajo a:hover{text-decoration:underline}
.pie-bajo{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;border-top:1px solid var(--linea);margin-top:3rem;padding-top:1.4rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;color:var(--tinta-3)}
.tema{background:none;border:1px solid var(--linea);color:var(--tinta-2);font:inherit;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;padding:.4em .8em;cursor:pointer}
.tema:hover{border-color:var(--tinta);color:var(--tinta)}
@media (max-width:860px){.pie-in{grid-template-columns:1fr 1fr}.pie-in > :first-child{grid-column:1 / -1}}
@media (max-width:520px){.pie-in{grid-template-columns:1fr}}

/* ── aparición al entrar en pantalla: la pone sitio.js (html.js + .visto); sin JavaScript todo está visible desde el
   principio. Medido el 01/10: con animation-timeline: view() una captura de la página entera salía con huecos donde
   iban servicios, razones y reseñas, y Safari no lo pinta. Sin movimiento si el sistema lo pide. ── */
@media (prefers-reduced-motion:no-preference){
  html.js .aparece{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js .aparece.visto{opacity:1;transform:none}
}
@media print{.cab,.cta,.pie-bajo,.hamb{display:none}body{background:#fff;color:#000}}

/* ── páginas de servicio (01/10): migas, bloques numerados a dos columnas, lista de puntos, preguntas en <details> ── */
.miga{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:1.6rem}
.miga ol{display:flex;flex-wrap:wrap;gap:.4em .8em;margin:0;padding:0;list-style:none}
.miga li+li::before{content:"/";margin-right:.8em;color:var(--laton)}
.miga a{text-decoration:none;color:var(--tinta-2)}
.miga a:hover{color:var(--tinta);text-decoration:underline}
.miga [aria-current]{color:var(--tinta)}
.dos .sigue{margin-top:1.2rem;color:var(--tinta-2)}
.puntos{margin-top:1.6rem;border-top:1px solid var(--linea)}
.puntos li{padding:.9rem 0 .9rem 1.6rem;border-bottom:1px solid var(--linea);color:var(--tinta-2);font-size:1rem;position:relative}
.puntos li::before{content:"";position:absolute;left:0;top:1.65rem;width:.8rem;height:1px;background:var(--laton)}
.faq{border-top:1px solid var(--linea)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 2rem;align-items:center;gap:1.5rem;padding:1.4rem 0}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);font-weight:400}
.pregunta .mas{position:relative;width:1.6rem;height:1.6rem;justify-self:end}
.pregunta .mas::before,.pregunta .mas::after{content:"";position:absolute;left:50%;top:50%;background:var(--laton);transition:transform .3s ease}
.pregunta .mas::before{width:1.2rem;height:1px;transform:translate(-50%,-50%)}
.pregunta .mas::after{width:1px;height:1.2rem;transform:translate(-50%,-50%)}
.pregunta[open] .mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.pregunta p{padding:0 0 1.6rem;max-width:68ch;color:var(--tinta-2)}
.nota{margin-top:1.6rem;font-size:.9rem;color:var(--tinta-3);max-width:60ch}
.servicio-grande h2 a{text-decoration:none}
.servicio-grande h2 a:hover{color:var(--acento)}
.servicio-grande .enlace{margin-top:1.2rem;font-size:.9rem}

/* ── 404 ── */
.vacio{padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(2rem,4vw,3rem)}   /* longhands: el atajo pisaba el margen lateral de .ancho (visto en la captura del 01/10) */
.vacio h1,.vacio h2{font-size:clamp(2.2rem,1.4rem + 4vw,5rem);letter-spacing:-.02em;max-width:14ch;margin-top:1.2rem}
/* la red: una palabra que no cabe se parte antes que sacar la página de la pantalla (las compuestas de de/nl/sv llevan guion
   blando desde genera.py; si una se parte SIN guion, mide.mjs lo canta) */
.hero h1,.portadilla h1,.vacio h1,.vacio h2{overflow-wrap:anywhere}
/* un h1 con una palabra partible (genera.py le pone «ancha») no lleva el tope de 12-14ch: en escritorio sale entera */
.hero h1.ancha,.portadilla h1.ancha,.vacio h1.ancha,.vacio h2.ancha{max-width:none}
/* en un móvil un botón largo («Sprechen Sie mit uns über Ihr Vorhaben») se parte en dos renglones antes que salirse */
@media (max-width:600px){.boton{white-space:normal;text-align:center;justify-content:center}}
.vacio .intro{margin-top:1.4rem;color:var(--tinta-2);max-width:52ch}
.vacio .puntos{max-width:40ch}
.vacio .puntos a{text-decoration:none}
.vacio .puntos a:hover{text-decoration:underline}

/* ── utilidades que sustituyen a los style="" de antes (la CSP no necesita 'unsafe-inline') ── */
.sigue{margin-top:1.4rem}
.sigue-poco{margin-top:1rem}
.suave{color:var(--tinta-2)}
.fondo{padding-bottom:clamp(4rem,9vw,8.5rem)}
.banda{margin-top:clamp(4rem,9vw,8rem)}
.enlace.abajo{margin-top:2rem}
.datos .donde{margin-top:.9rem;color:var(--tinta-2);font-size:.95rem;max-width:36ch}
.cab[data-abierto="si"] .menu .menu-tel{margin-top:.6rem;border-color:var(--linea)}

/* ── el vídeo del despacho (portada): la portada es una imagen propia; el mp4 no se pide hasta pulsar ── */
.video{margin:0}
.video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#122234;border:1px solid var(--linea)}
.video figcaption{font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin-top:1rem}