/* 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;
  --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;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
  --papel:#14171b; --papel-2:#1b1f24; --tinta:#efe9de; --tinta-2:#bdb6aa; --tinta-3:#9a948a; --linea:#343a41;
  --acento:#c9a86a; --laton:#9c815a; --laton-texto:#c9a86a; --blanco:#1b1f24; color-scheme:dark;
}}
: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; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@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)}

/* ── 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:76px}
.logo{display:block;color:var(--tinta);text-decoration:none;line-height:0}
.logo svg{height:44px;width:auto;display:block;fill:currentColor}
.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);padding:.45em .8em;color:var(--tinta-2);display:inline-flex;align-items:center;gap:.6em;line-height:1.2}
.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}
.cab .boton{padding:.8em 1.2em;font-size:.78rem}
.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:66px}
  .logo svg{height:36px}
  .menu{display:none}
  .cab .boton{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::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: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}}

/* ── 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:4rem 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 .num{font-size:1rem;color:var(--laton-texto);letter-spacing:.08em}
.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:3rem 1fr;grid-template-rows:auto auto}.servicios p{grid-column:2}.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;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}
.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 ── */
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.razones li{border-top:1px solid var(--linea);padding-top:1.6rem}
.razones .num{display:block;color:var(--laton-texto);font-size:.9rem;letter-spacing:.12em;margin-bottom:1.2rem}
.razones h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);margin-bottom:.9rem}
.razones p{color:var(--tinta-2);font-size:1rem}
@media (max-width:860px){.razones{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}}
.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:22ch;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}}

/* ── llamada final ── */
.cta{background:#122234;color:#f4efe6;padding:clamp(4rem,9vw,8rem) 0}
.cta .rotulo{color:#c9a86a}
.cta .rotulo::before{background:#c9a86a}
.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 ── */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem) clamp(1.5rem,3vw,3rem)}
.persona{display:flex;flex-direction:column}
.persona:nth-child(3n+2){transform:translateY(clamp(0px,3vw,3rem))}
.persona img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;filter:saturate(.9)}
.persona .cargo{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laton-texto);margin-top:1.4rem}
.persona h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);margin-top:.5rem}
.persona .colegio{font-size:.95rem;color:var(--tinta-2);margin-top:.5rem}
.persona .bio{margin-top:1rem;color:var(--tinta-2);font-size:1rem}
.persona details{margin-top:1rem;font-size:1rem}
.persona summary{cursor:pointer;list-style:none;font-family:var(--sans);font-weight:500;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em;color:var(--tinta)}
.persona summary::-webkit-details-marker{display:none}
.persona summary::after{content:"+";font-weight:300;font-size:1.3em;line-height:1;transition:transform .3s ease}
.persona details[open] summary::after{transform:rotate(45deg)}
.persona details p{margin-top:1rem;color:var(--tinta-2)}
.persona details h3{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);margin-top:1.4rem;margin-bottom:.5rem}
.persona details li{padding:.35rem 0;border-top:1px solid var(--linea);color:var(--tinta-2);font-size:.95rem}
@media (max-width:1000px){.equipo{grid-template-columns:repeat(2,1fr)}.persona:nth-child(3n+2){transform:none}.persona:nth-child(2n){transform:translateY(clamp(0px,3vw,2.5rem))}}
@media (max-width:600px){.equipo{grid-template-columns:1fr}.persona:nth-child(2n){transform:none}}

/* ── contacto ── */
.contacto{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,6rem)}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 2rem}
.datos > div{border-top:1px solid var(--linea);padding-top:1.2rem}
.datos .rotulo{margin-bottom:.9rem}
.datos .rotulo::before{display:none}
.datos address{font-style:normal;font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.35}
.datos a{text-decoration:none}
.datos .grande{font-size:clamp(1.3rem,1rem + 1.2vw,2rem);font-family:var(--sans);font-weight:300;letter-spacing:.02em}
.datos .grande:hover{color:var(--acento)}
.contacto-acciones{display:flex;flex-direction:column;gap:1rem;align-self:start}
.contacto-acciones .boton{justify-content:space-between;padding:1.3em 1.6em}
.contacto .aviso{font-size:.9rem;color:var(--tinta-3);margin-top:2rem;max-width:48ch}
@media (max-width:860px){.contacto{grid-template-columns:1fr}}
@media (max-width:560px){.datos{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,5fr) minmax(0,4fr) minmax(0,3fr);gap:2.5rem clamp(2rem,4vw,5rem)}
.pie .logo svg{height:56px}
.pie .colegiacion{margin-top:1.6rem;max-width:46ch;font-size:.9rem}
.pie address{font-style:normal;line-height:1.5}
.pie address a{text-decoration:none}
.pie address a:hover{text-decoration:underline}
.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}
.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}
.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)}