/* bb.css · lo propio de la web de Bufete Barceló, encima de webflow.css (que no se toca).
   Movimiento con el estándar de Zunami; menú, idioma y formulario sin webflow.js. */

/* ---------------------------------------------------------------- base */

/* Las fotos llevan width/height en el HTML para reservar su hueco; sin esto se estiraban */
:where(img[width][height]) { height: auto; }

:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.w-nav-brand:focus-visible, .lang-link:focus-visible { border-radius: 4px; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--blue-black); color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 14px; text-decoration: none; transition: top .2s ease; }
.saltar:focus { top: 12px; }
main { display: block; }
.campo-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- selector de idioma */

.lang-link { display: inline-flex; border-radius: 4px; transition: opacity .2s ease, transform .2s ease; }
.lang-link:hover { transform: translateY(-1px); }
.lang-link.w--current { cursor: default; }
.lang-link.w--current:hover { transform: none; }

/* ---------------------------------------------------------------- menú móvil (sin webflow.js) */

button.menu-button { border: 0; cursor: pointer; font: inherit; color: inherit; }
.line-menu { transition: width .5s cubic-bezier(.2,.7,.2,1), background-color .5s ease; }
.menu-button.w--open .line-menu { background-color: var(--blue-black); }
.menu-button.w--open .line-menu.first-line { width: 18px; }
.menu-button.w--open .line-menu.second-line { width: 28px; }

@media screen and (max-width: 991px) {
  .navbar.w-nav.menu-abierto .w-nav-menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    animation: menu-entra .35s cubic-bezier(.2,.7,.2,1);
  }
  .navbar.w-nav.menu-abierto .w-nav-menu .nav-link { display: block; text-align: center; padding-top: 20px; padding-bottom: 20px; font-size: 20px; }
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- movimiento */

/* Estado de partida solo con JS (html.js) y sin movimiento reducido. Si bb.js no llega a
   marcar html.mov-listo en 2,5 s, el guion de la cabecera quita .js y todo se ve en su sitio. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-mov="sube"]:not(.visto),
  html.js [data-mov="proceso"]:not(.visto) .tile-process { opacity: 0; }
  html.js [data-mov="linea"]:not(.visto) { transform: scaleX(0); transform-origin: 0 50%; }
  html.js [data-mov="proceso"]:not(.visto) .circle-process { transform: scale(0); }
  html.js [data-mov="proceso"]:not(.visto) .line-process { transform: scaleY(0); }
  html.js [data-filas]:not(.visto) > * { opacity: 0; }
}
/* Entrada al abrir la página: CSS puro, arranca con el primer pintado (bb.js no hace falta). El
   retraso de cada pieza viene en --d desde el generador (escalonado de 55 ms, en orden de lectura). */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-entrada] { animation: bb-sube .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) both; }
  html.js [data-entrada="barra"] { animation-name: bb-barra; animation-duration: .6s; }
  html.js [data-entrada="enfoque"] { animation-name: bb-enfoque; animation-duration: .9s; }
  html.js [data-entrada="linea"] { animation-name: bb-linea; animation-duration: 1s; transform-origin: 0 50%; }
}
@keyframes bb-sube {
  from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* Titular, subtítulo y foto principal son la LCP: entran sin opacidad (Chrome no cuenta lo
   transparente y la LCP se retrasaba hasta 0,8 s), solo desplazamiento, escala y desenfoque */
@keyframes bb-enfoque {
  from { transform: translateY(24px) scale(.985); filter: blur(8px); }
  to { transform: none; filter: blur(0); }
}
@keyframes bb-barra {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}
@keyframes bb-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.inside-moving-text { will-change: transform; }
.text-stat[data-contar] { font-variant-numeric: tabular-nums; display: inline-block; }

/* Iconos de las tarjetas de contacto: el gesto lo hace bb.js; aquí, que no se recorten */
.contact-tile img, .tile-contact img { will-change: transform; }

/* ---------------------------------------------------------------- iconos */

.ico { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.nav-cta.con-icono { gap: 8px; }
.nav-cta .ico { transform-origin: 50% 50%; }
.text-read-more .ico { margin-left: 6px; width: .95em; height: .95em; }
.text-read-more.mg-top-16 { display: inline-flex; flex-direction: row; align-items: center; }
.nav-llamar { display: none; }
@media screen and (max-width: 991px) {
  .navbar.w-nav.menu-abierto .w-nav-menu .nav-llamar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--blue-black); font-weight: 500; }
}

/* ---------------------------------------------------------------- formulario */

.aviso-privacidad { margin: 4px 0 20px; color: var(--gold-dark); font-size: 14px; line-height: 150%; }
.casilla-privacidad { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.casilla-privacidad input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold-dark); }
.casilla-privacidad a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.capa-privacidad { margin: 8px 0 0 28px; font-size: 13px; opacity: .85; }
.w-form-done, .w-form-fail { border-radius: 24px; }
.w-form-fail { background-color: #fbeeee; color: #7a2b2b; padding: 16px 24px; }
form[data-contacto] input[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- textos legales y 404 */

.texto-legal { color: var(--gold-dark); }
.texto-legal h1 { color: var(--blue-black); font-weight: 400; font-size: 44px; line-height: 120%; margin: 0 0 32px; }
.texto-legal h3 { color: var(--blue-black); font-weight: 500; font-size: 20px; margin: 36px 0 12px; }
.texto-legal ul { padding-left: 20px; margin: 16px 0 24px; }
.texto-legal li { margin-bottom: 6px; }
.texto-legal a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-fecha { margin-top: 40px; font-size: 14px; opacity: .8; }
@media screen and (max-width: 767px) { .texto-legal h1 { font-size: 32px; } }

.salidas-404 { margin: 8px auto 32px; color: var(--gold-dark); text-align: center; }
.salidas-404 ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.salidas-404 a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- pie */

.pie-legal { display: flex; justify-content: center; gap: 4px 16px; flex-wrap: wrap; margin-left: 16px; }
.pie-legal::before { content: "|"; margin-right: -4px; }
@media screen and (max-width: 767px) { .pie-legal { margin-left: 0; } .pie-legal::before { content: none; } }

/* ---------------------------------------------------------------- tarjetas */

/* Webflow solo cambiaba el fondo, sin transición: ahora la tarjeta se eleva un poco y proyecta
   una sombra suave. Solo con ratón y sin movimiento reducido. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile-elevation.services-small-tile, .tile-elevation.big-service-tile, .tile-elevation.team-tile,
  .tile-elevation.contact-tile, .tile-elevation-hover.big-team {
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1), background-color .25s ease, outline-color .25s ease;
  }
  .tile-elevation.services-small-tile:hover, .tile-elevation.big-service-tile:hover, .tile-elevation.team-tile:hover,
  .tile-elevation.contact-tile:hover, .tile-elevation-hover.big-team:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -24px rgba(4, 17, 38, .45);
  }
  .tile-elevation.team-tile .image-team, .tile-elevation-hover.big-team img { transition: filter .4s ease; }
  .tile-elevation.team-tile:hover .image-team, .tile-elevation-hover.big-team:hover img { filter: brightness(1.04) saturate(1.05); }
}
.tarjeta-invitacion { border-style: dashed !important; }


/* ---------------------------------------------------------------- marcos: zoom y parallax */

/* La imagen va dentro de un marco con sus mismas clases (tamaño y esquinas) que la recorta.
   Zoom leve al pasar el ratón por la imagen o por su tarjeta; parallax en las que van solas
   (bb.js mueve la imagen con translate dentro del marco, más despacio que la página). */
.marco { display: block; overflow: hidden; isolation: isolate; }
.marco > .marco-img {
  display: block; width: 100%; height: 100%; max-width: none; border-radius: 0;
  object-fit: cover; object-position: inherit;
}
.marco-parallax > .marco-img { scale: 1.1; }
@media (prefers-reduced-motion: no-preference) {
  .marco > .marco-img { transition: scale 1.1s cubic-bezier(.2,.7,.2,1); will-change: scale; }
  .marco-parallax > .marco-img { will-change: scale, translate; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .marco:hover > .marco-img, a:hover .marco > .marco-img, .big-team:hover .marco > .marco-img { scale: 1.04; }
  .marco-parallax:hover > .marco-img { scale: 1.14; }
}
@media (prefers-reduced-motion: reduce) { .marco-parallax > .marco-img { scale: 1; } }

/* ---------------------------------------------------------------- palabras largas (alemán) */

/* Los compuestos alemanes (Immobilienkauf, Vollzugsvergünstigungen) desbordaban titulares en
   móvil y las celdas de la rejilla de "Weitere Rechtsgebiete" a 1024 px. Partición silábica
   (el navegador la hace con lang="de-DE") y celdas que pueden encoger por debajo de su palabra
   más larga. Medido el 10-11-2026 en las 54 páginas a 390, 1024 y 1440 px. */
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(de) .w-richtext, :lang(de) .tile-elevation,
:lang(de) .tile-elevation-hover, :lang(de) .text-block, :lang(de) .paragraph-big-areas {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.w-layout-grid > *, .w-dyn-items > .w-dyn-item, .grid-services-more > * { min-width: 0; }