/* ==========================================================
   MALLORCA LAW — tokens
   Dirección "Despacho profesional": marino casi negro + grafito,
   blanco, un único acento en dorado envejecido. Sin color saturado.
   ========================================================== */
:root {
  /* Fondos */
  --navy-950: #1d2b26;
  --navy-900: #24342e;
  --navy-800: #2c3d36;
  --graphite-700: #34443d;
  --surface: #22312c;
  --surface-raised: #2a3a34;

  /* Texto */
  --ink: #f3f1eb;
  --ink-dim: #bcc4bf;
  --ink-on-light: #1a2320;
  --ink-on-light-dim: #5c6660;

  /* Acento — dorado envejecido, usado con moderación */
  --gold: #c9835a;
  --gold-bright: #dd9d74;
  --gold-dim: #8f5738;
  --gold-ink: #8a4d30; /* variante oscurecida de --gold-dim para texto AA sobre fondos claros — ver memoria.md sobre verificar cada tono de una escala */

  --border-dark: rgba(243, 241, 235, 0.12);
  --border-light: rgba(26, 35, 32, 0.12);

  --font-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --container-width: 1180px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 2px 10px rgba(29, 43, 38, 0.08);
  --shadow-md: 0 12px 32px rgba(29, 43, 38, 0.14);
  --shadow-gold: 0 8px 24px rgba(201, 131, 90, 0.18);

  --ease-apple: cubic-bezier(0.16, 0.8, 0.24, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-on-light);
  background: #ffffff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 0.5em;
  color: var(--ink-on-light);
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--ink-on-light-dim); }
a { color: var(--navy-900); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: 6rem 0; }
.section-alt { background: #f7f5f1; }
.section-dark { background: var(--navy-950); color: var(--ink); }
.section-dark p { color: var(--ink-dim); }
.section-dark h2, .section-dark h3 { color: var(--ink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1em;
}
.section-dark .eyebrow { color: var(--gold); }
.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
}
.section-head { max-width: 640px; margin: 0 0 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================
   Botones
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s var(--ease-apple), box-shadow 0.22s var(--ease-apple), background-color 0.22s var(--ease-apple), border-color 0.22s var(--ease-apple), color 0.22s var(--ease-apple);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); color: var(--navy-950); }
.btn-primary:hover { background: var(--gold-bright); box-shadow: var(--shadow-gold); }
.btn-ghost-dark { background: transparent; color: var(--ink); border-color: rgba(243,241,235,0.35); }
.btn-ghost-dark:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn-ghost-light { background: transparent; color: var(--ink-on-light); border-color: var(--border-light); }
.btn-ghost-light:hover { border-color: var(--navy-900); }

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(29, 43, 38, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-dark);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background-color 0.3s var(--ease-apple), box-shadow 0.3s var(--ease-apple);
}
/* La cabecera reacciona al pasar el "centinela" invisible del principio de
   la página (ver #scroll-sentinel + IntersectionObserver en main.js) --
   se compacta y gana sombra, sin usar un listener de scroll a pelo. */
.site-header.is-scrolled {
  background: rgba(29, 43, 38, 0.97);
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
.site-header.is-scrolled .header-inner { padding: 0.8rem 1.5rem; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  /* Transiciona `padding`, no `transform`/`opacity` -- en principio dispara
     layout. Se deja así a propósito: solo se dispara una vez por cruce del
     centinela (no en cada frame de scroll), sobre una fila flex pequeña de
     pocos hijos, así que el coste real es despreciable. Reescribirlo sin
     `padding` exigiría un wrapper extra en las 30 páginas del pipeline i18n
     para contra-escalar los hijos -- desproporcionado para esta ganancia. */
  transition: padding 0.22s var(--ease-apple);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Playfair Display', var(--font-heading);
  font-size: 1.32rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.05em;
}
.logo span { color: var(--gold); }
.logo-mark {
  height: 34px;
  width: auto;
  border-radius: 4px;
  display: block;
}
.footer-brand .logo-mark { height: 42px; }
.footer-seal {
  width: 84px;
  border-radius: 8px;
  border: 1px solid var(--border-dark);
  margin-bottom: 1.2rem;
}
.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  text-decoration: none;
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease-apple), border-color 0.25s var(--ease-apple);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); border-color: var(--gold); }
.header-cta { display: inline-block; white-space: nowrap; }
.lang-switch {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em;
}
.lang-switch a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 0.2rem 0.15rem;
  transition: color 0.25s var(--ease-apple);
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--gold); }
.lang-switch span.sep { color: var(--border-dark); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); margin: 6px 0; transition: transform 0.25s var(--ease-apple), opacity 0.25s var(--ease-apple); }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  background: var(--navy-950);
  color: var(--ink);
}
.hero-pin {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: clip;
}
.hero-media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-media-visual {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hero-media video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-apple);
}
.hero-media video.is-playing { opacity: 1; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 65% 65% at 50% 48%, rgba(29,43,38,0.68) 0%, rgba(29,43,38,0.32) 55%, rgba(29,43,38,0.05) 100%),
    linear-gradient(180deg, rgba(29,43,38,0.42) 0%, rgba(29,43,38,0.06) 22%, rgba(29,43,38,0.1) 68%, rgba(29,43,38,0.52) 100%);
}

/* Encuadre cinematográfico del vídeo en el scroll del hero — solo escritorio
   y sin prefers-reduced-motion (ver media query + hero-scroll-reveal en main.js).
   Mismo patrón de rAF + getBoundingClientRect() que el zoom de animaciones.md,
   aplicado a clip-path/transform sobre la capa visual (nunca sobre .hero-inner). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero { height: 185vh; }
  .hero-pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .hero-media-visual {
    clip-path: polygon(12% 12%, 88% 12%, 88% 88%, 12% 88%);
    transform: scale(1.316);
    will-change: clip-path, transform;
  }
}

.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 6rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-brand {
  font-family: 'PT Serif', var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.7rem, 7.6vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 4px 32px rgba(0,0,0,0.55);
  margin: 0.1em 0 0.3em;
  max-width: none;
}
.hero-brand span { color: var(--gold-bright); }
.hero-tagline {
  font-family: 'Fraunces', var(--font-heading);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  color: var(--ink-dim);
  max-width: 620px;
  margin: 0 auto;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.hero-eyebrow { color: var(--tw-eyebrow, #ecd3c0); font-weight: 700; letter-spacing: 0.2em; margin-bottom: 0.35em; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 2px 14px rgba(0,0,0,0.75); }
.hero-inner .lede { max-width: 560px; font-size: 1.1rem; color: var(--ink-dim); margin: 1.1rem auto 0; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }

/* Revelado "enfoque": el eyebrow, la marca, el subtítulo, el párrafo y los
   botones entran desenfocados/ampliados/transparentes y se enfocan en su
   sitio a medida que se hace scroll por el hero — mismo progreso 0-1 que abre
   el recorte del vídeo (ver hero-text-reveal en main.js). Solo escritorio y
   sin prefers-reduced-motion: en el resto de casos se usa la cascada de
   entrada normal (fade + rise) definida más abajo, sin ligar nada al scroll. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* !important porque cancela la animación de ".js .hero-in .hero-cascade"
     (0,3,0 de especificidad, definida más abajo) — aquí el JS pasa a ser el
     único dueño de opacity/filter/transform en estos cinco elementos. */
  .hero-eyebrow, .hero-brand, .hero-tagline, .hero-lede, .hero-actions-el {
    animation: none !important;
    opacity: 0;
    filter: blur(16px);
    transform: scale(1.05);
  }
}

/* Cascada de entrada del hero — se activa con clase JS, oculto solo si .js está presente */
.js .hero-cascade { opacity: 0; }
.hero-cascade { transform: translateY(22px); }
.js .hero-in .hero-cascade {
  animation: heroCascadeIn 0.9s var(--ease-apple) forwards;
}
.hero-in .hero-eyebrow { animation-delay: 0ms; }
.hero-in .hero-brand { animation-delay: 120ms; }
.hero-in .hero-tagline { animation-delay: 260ms; }
.hero-in .hero-lede { animation-delay: 360ms; }
.hero-in .hero-actions-el { animation-delay: 460ms; }
@keyframes heroCascadeIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   Reveal genérico (secciones) — fade + rise calmado, sin stagger marcado
   ========================================================== */
.js .reveal { opacity: 0; transform: translateY(32px); }
.js .reveal.is-visible {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.55s var(--ease-apple), transform 0.55s var(--ease-apple);
}

/* Variante "enfoque" (testimonios) — eco, en miniatura, del desenfoque del
   hero: da a las citas un aire más editorial que el fundido+ascenso genérico
   del resto del sitio. Misma clase .reveal para el disparo por
   IntersectionObserver; esta solo cambia el ESTADO visual. */
.js .reveal-blur { filter: blur(10px); transform: translateY(18px) scale(1.015); }
.js .reveal-blur.is-visible {
  filter: blur(0); transform: translateY(0) scale(1);
  transition: opacity 0.5s var(--ease-apple), filter 0.5s var(--ease-apple), transform 0.5s var(--ease-apple);
}

/* Variante "asentado" (tarjetas de servicios) — entra con una escala sutil en
   vez de deslizarse hacia arriba, para que no todo el sitio se mueva igual. */
.js .reveal-scale { transform: scale(0.94); }
.js .reveal-scale.is-visible {
  transform: scale(1);
  transition: opacity 0.6s var(--ease-apple), transform 0.6s var(--ease-apple);
}

/* ==========================================================
   Barra de progreso de scroll
   ========================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2.5px; width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  z-index: 500;
  pointer-events: none;
}

/* ==========================================================
   Sección con imagen a sangre de fondo (muy tenue, con parallax lento)
   ========================================================== */
.section-photo-bg { position: relative; overflow: hidden; }
.section-photo-bg .bg-image {
  position: absolute; inset: -12% -6%; z-index: 0;
  opacity: 0.24;
  will-change: transform;
}
.section-photo-bg .bg-image img, .section-photo-bg .bg-image .bg-video { width: 100%; height: 100%; object-fit: cover; }
.section-photo-bg .bg-image .bg-video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-apple);
}
.section-photo-bg .bg-image .bg-video.is-playing { opacity: 1; }
.section-photo-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #f7f5f1 0%, rgba(247,245,241,0.55) 40%, #f7f5f1 100%);
}
.section-photo-bg > .container, .section-photo-bg > .two-col { position: relative; z-index: 1; }


/* ==========================================================
   Sección "momento de pausa" — martillo 3D
   ========================================================== */
.hammer-section {
  padding: 6.5rem 0;
  position: relative;
}
.hammer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}
.hammer-text { max-width: 420px; }
.hammer-text .eyebrow { justify-content: flex-start; }
.hammer-text p { font-size: 1.05rem; }
.hammer-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  perspective: 1000px;
  overflow: hidden; /* recorta el respiro de escala/balanceo del fallback -- sin esto la foto se saldría del recuadro al animarse, ya que no lleva un fondo de sobra como el render anterior */
}
.hammer-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Envoltorio del fallback: lleva el recorte redondeado y el parallax por
   scroll (JS, ver hammer-parallax en main.js) -- separado del <img>, que
   lleva su propia respiración ambiental por CSS. Dos elementos porque una
   animación CSS y un transform puesto por JS sobre el MISMO elemento se
   pisan (la animación gana siempre sobre el estilo en línea). */
.hammer-stage picture {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.hammer-fallback-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-style: preserve-3d;
  animation: hammerTilt 7s ease-in-out infinite alternate;
}
/* la regla global `img { display:block }` gana por origen de cascada sobre
   el estilo por defecto del atributo hidden del navegador — se restaura aquí */
.hammer-fallback-img[hidden] { display: none; }
/* Fallback en móvil/reduced-motion: foto real de la fachada de la oficina
   (sustituye al render del martillo, que en una imagen plana giraba de forma
   casi imperceptible -- ±11°/±2° de rotateY/rotateX en un plano es solo un
   ~2% de escorzo, invisible en un teléfono real). Respiración de escala más
   marcada (1 -> 1.045) + balanceo sutil, evitando un "flotante" que
   contradiga el propio texto de la sección ("el peso que merece"): un
   cambio de tamaño uniforme se lee como presencia, no como ingravidez. */
@keyframes hammerTilt {
  from { transform: scale(1) rotateY(-5deg) rotateX(1.5deg); }
  to   { transform: scale(1.045) rotateY(5deg) rotateX(-1.5deg); }
}
@media (max-width: 900px) {
  .hammer-inner { grid-template-columns: 1fr; text-align: center; }
  .hammer-text { max-width: 100%; margin: 0 auto; }
  .hammer-text .eyebrow { justify-content: center; }
  .hammer-stage { max-width: 420px; aspect-ratio: 960 / 567; }
}

/* Bloques de servicios complementarios (servicios.html) */
.comp-card {
  padding: 1.6rem 1.7rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: #ffffff;
  transition: transform 0.35s var(--ease-apple), box-shadow 0.35s var(--ease-apple), border-color 0.35s var(--ease-apple);
}
.comp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.comp-card h3 { color: var(--ink-on-light); }
.comp-card p { font-size: 0.95rem; margin: 0; }

/* Entrada escalonada de tarjetas en fila (áreas de práctica, servicios complementarios) */
.grid .practice-card.reveal:nth-child(1), .grid .comp-card.reveal:nth-child(1) { transition-delay: 0s; }
.grid .practice-card.reveal:nth-child(2), .grid .comp-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.grid .practice-card.reveal:nth-child(3), .grid .comp-card.reveal:nth-child(3) { transition-delay: 0.16s; }
.grid .practice-card.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ==========================================================
   Grid / tarjetas de áreas de práctica
   ========================================================== */
.grid { display: grid; gap: 1.75rem; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.practice-card {
  display: block;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.8rem;
  transition: transform 0.35s var(--ease-apple), box-shadow 0.35s var(--ease-apple), border-color 0.35s var(--ease-apple);
}
.practice-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.practice-card .icon {
  width: 42px; height: 42px;
  color: var(--gold-dim);
  margin-bottom: 1.4rem;
  transition: color 0.35s var(--ease-apple);
}
.practice-card:hover .icon { color: var(--gold); }
.practice-card h3 { color: var(--ink-on-light); margin-bottom: 0.5em; }
.practice-card p { font-size: 0.95rem; margin-bottom: 1.2em; }
.practice-card .card-link { font-size: 0.85rem; font-weight: 600; color: var(--navy-900); letter-spacing: 0.02em; }
.practice-card .card-link::after { content: " →"; transition: margin 0.3s var(--ease-apple); }
.practice-card:hover .card-link::after { margin-left: 4px; }

/* ==========================================================
   Slider de equipo — scroll-snap horizontal
   ========================================================== */
.team-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 2.5rem;
}
.team-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  color: var(--ink-on-light-dim);
  padding: 0.9rem 0.1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.25s var(--ease-apple), border-color 0.25s var(--ease-apple);
}
.team-tab:hover { color: var(--ink-on-light); }
.team-tab.is-active { color: var(--ink-on-light); border-color: var(--gold); }
.team-panel[hidden] { display: none; }

.team-slider-wrap { position: relative; }
.team-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0.25rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.team-slider::-webkit-scrollbar { height: 6px; }
.team-slider::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }
.team-card {
  scroll-snap-align: start;
  flex: 0 0 280px;
  background: var(--surface);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 2rem 1.6rem;
  color: var(--ink);
  transition: transform 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple), border-color 0.4s var(--ease-apple), opacity 0.5s var(--ease-apple);
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-dim);
}
.team-photo {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--navy-800);
  border: 1px solid var(--border-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  color: var(--gold-dim);
  overflow: hidden;
  transition: transform 0.4s var(--ease-apple);
}
.team-card:hover .team-photo { transform: scale(1.06); }

/* Entrada escalonada de las tarjetas al activar una pestaña de departamento */
.js .team-panel .team-card { opacity: 0; transform: translateY(14px); }
.js .team-panel.is-active .team-card { opacity: 1; transform: translateY(0); }
.js .team-panel.is-active .team-card:nth-child(1) { transition-delay: 0.03s; }
.js .team-panel.is-active .team-card:nth-child(2) { transition-delay: 0.09s; }
.js .team-panel.is-active .team-card:nth-child(3) { transition-delay: 0.15s; }
.js .team-panel.is-active .team-card:nth-child(4) { transition-delay: 0.21s; }
.team-photo svg { width: 46px; height: 46px; }
.team-photo picture { display: block; width: 100%; height: 100%; }
/* Cuando haya foto real: sustituir el contenido de .team-photo por <img class="team-photo-img" src="..." alt="..."> — misma caja circular ya preparada. */
.team-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Parche temporal: la única foto en blanco y negro del equipo (el resto son
   a color) rompía la consistencia de la sección. Un tono cálido no la
   "colorea" de verdad, pero la acerca a la paleta dorada del resto de fotos
   en vez de leer como blanco y negro puro -- quitar esta clase en cuanto
   haya una foto a color real que la sustituya. */
.team-photo-img--bw { filter: sepia(0.35) saturate(1.15) brightness(1.04) contrast(1.02); }
.team-card h3 { font-size: 1.15rem; margin-bottom: 0.1em; color: var(--ink); }
.team-card .role { color: var(--gold); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 1rem; display: block; }
.team-card dl { margin: 0; font-size: 0.85rem; }
.team-card dt { color: var(--ink-dim); font-weight: 600; margin-top: 0.8rem; }
.team-card dd { margin: 0.15rem 0 0; color: var(--ink); }

.team-nav {
  display: flex; gap: 0.75rem; margin-top: 0.5rem;
}
.team-nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-dark);
  background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-apple), color 0.25s var(--ease-apple), transform 0.2s var(--ease-apple);
}
.team-nav-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.team-nav-btn:active { transform: scale(0.94); }
.team-nav-btn svg { width: 18px; height: 18px; }

/* ==========================================================
   Testimonios
   ========================================================== */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testimonial {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  margin: 0;
  transition: transform 0.35s var(--ease-apple), box-shadow 0.35s var(--ease-apple), border-color 0.35s var(--ease-apple);
}
.testimonial:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--border-light); }
.testimonial .quote-mark { font-family: var(--font-heading); font-size: 2.6rem; color: var(--gold); line-height: 0.5; display: block; margin-bottom: 0.8rem; transition: transform 0.35s var(--ease-apple); }
.testimonial:hover .quote-mark { transform: scale(1.12); }
.testimonial p { font-style: italic; color: var(--ink-on-light); font-size: 0.98rem; }
.testimonial cite { display: block; margin-top: 1rem; font-weight: 600; font-style: normal; font-size: 0.9rem; color: var(--ink-on-light); }
.testimonial cite span { display: block; font-weight: 400; color: var(--ink-on-light-dim); font-size: 0.82rem; margin-top: 0.15rem; }

.testimonial-list { column-count: 2; column-gap: 1.75rem; }
.testimonial-full {
  break-inside: avoid;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem;
  margin: 0 0 1.75rem;
  display: inline-block;
  width: 100%;
  transition: transform 0.35s var(--ease-apple), box-shadow 0.35s var(--ease-apple);
}
.testimonial-full:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-full .quote-mark { font-family: var(--font-heading); font-size: 2.6rem; color: var(--gold); line-height: 0.5; display: block; margin-bottom: 0.8rem; transition: transform 0.35s var(--ease-apple); }
.testimonial-full:hover .quote-mark { transform: scale(1.1); }
.testimonial-full p { font-style: italic; color: var(--ink-on-light); font-size: 0.96rem; }
.testimonial-full cite { display: block; margin-top: 1rem; font-weight: 600; font-style: normal; font-size: 0.88rem; color: var(--ink-on-light); border-top: 1px solid var(--border-light); padding-top: 0.9rem; }
.testimonial-full cite span { display: block; font-weight: 400; color: var(--ink-on-light-dim); font-size: 0.82rem; margin-top: 0.15rem; }
@media (max-width: 720px) { .testimonial-list { column-count: 1; } }

.reviews-cta {
  margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border-light);
  text-align: center;
}
.reviews-cta p { max-width: 520px; margin: 0 auto 1.2rem; }

/* ==========================================================
   Contacto
   ========================================================== */
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.contact-info dl { margin: 0; }
.contact-info dt { color: var(--ink-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1.6rem; }
.contact-info dd { margin: 0.3rem 0 0; font-size: 1.05rem; }
.contact-info dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-dark); }
.contact-info dd a:hover { border-color: var(--gold); }
.map-embed { margin-top: 2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-dark); filter: grayscale(0.25) contrast(1.05); }
.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem;
  height: 300px;
  padding: 1.5rem;
  background: var(--navy-950);
  color: var(--ink-dim);
  text-align: center;
  font-size: 0.88rem;
}
.map-placeholder p { margin: 0; max-width: 320px; }

.contact-form { display: flex; flex-direction: column; gap: 1.1rem; background: #fff; padding: 2.2rem; border-radius: var(--radius-lg); border: 1px solid var(--border-light); }
.contact-form label { font-weight: 600; font-size: 0.85rem; color: var(--ink-on-light); margin-bottom: 0.35rem; display: block; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  background: #fdfcfa;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.contact-form .field-note { font-size: 0.78rem; color: var(--ink-on-light-dim); margin-top: -0.6rem; }
.contact-form button { margin-top: 0.4rem; align-self: flex-start; }
.form-status { font-size: 0.9rem; margin-top: 0.5rem; }

/* Botón flotante de llamada (sustituye al de WhatsApp — sin nº de WhatsApp confirmado, ver README) */
.call-float {
  position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 300;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.3rem;
  background: var(--navy-950); color: var(--ink);
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600; font-size: 0.85rem;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-apple), border-color 0.3s var(--ease-apple);
}
.call-float:hover { transform: translateY(-3px); border-color: var(--gold); }
.call-float:active { transform: scale(0.97); }
.call-float svg { width: 18px; height: 18px; color: var(--gold); }
body.cookie-banner-visible .call-float { transform: translateY(-72px); }

/* Aviso de cookies (RGPD) — inyectado por JS (main.js) en las 30 páginas si no
   hay elección guardada. Solo gatea el mapa de Google de la página de
   contacto; el resto del sitio no usa cookies de analítica ni publicidad. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: var(--navy-950);
  border-top: 1px solid var(--border-dark);
  padding: 1.2rem 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease-apple);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: 0.88rem; color: var(--ink-dim); max-width: 620px; flex: 1 1 320px; }
.cookie-banner p a { color: var(--gold-bright); }
.cookie-banner-actions { display: flex; gap: 0.7rem; flex-shrink: 0; }
.cookie-banner-actions .btn { padding: 0.65rem 1.15rem; font-size: 0.86rem; }
.cookie-settings-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px;
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { background: var(--navy-950); color: var(--ink-dim); padding: 4.5rem 0 2rem; }
.site-footer p { color: var(--ink-dim); margin: 0 0 1em; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border-dark); }
.footer-brand .logo { display: inline-block; margin-bottom: 1rem; }
.footer-brand p { max-width: 280px; font-size: 0.9rem; }
.footer-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.78rem; color: var(--ink-dim);
  border: 1px solid var(--border-dark);
  border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
}
.footer-badge svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }
.footer-col-title { color: var(--ink); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 1.1rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.6rem; font-size: 0.82rem; }
.footer-bottom p { color: var(--ink-dim); margin: 0; }
.footer-bottom a { color: var(--ink-dim); }
.footer-bottom-right { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  color: var(--ink-dim);
  transition: color 0.25s var(--ease-apple), border-color 0.25s var(--ease-apple), transform 0.25s var(--ease-apple);
}
.social-link svg { width: 16px; height: 16px; }
.social-link:hover { color: var(--gold-bright); border-color: var(--gold); transform: translateY(-2px); }
/* En páginas con el botón flotante de llamada (hoy solo la home), reserva
   hueco a la derecha del pie para que no tape el icono de LinkedIn. */
body:has(.call-float) .footer-bottom { padding-right: 11rem; }
@media (max-width: 640px) {
  body:has(.call-float) .footer-bottom { padding-right: 0; padding-bottom: 4.5rem; }
}

/* ==========================================================
   Página interior — cabecera simple (no hero grande)
   ========================================================== */
.page-header {
  background: var(--navy-950); color: var(--ink);
  padding: 7rem 0 3.5rem;
}
.page-header h1 { color: var(--ink); max-width: 720px; }
.page-header .lede { color: var(--ink-dim); max-width: 620px; font-size: 1.05rem; margin-top: 1rem; }
.breadcrumb { font-size: 0.82rem; color: var(--ink-dim); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--border-dark); }
.breadcrumb a:hover { color: var(--gold-bright); }

.gold-rule { width: 48px; height: 2px; background: var(--gold); border: none; margin: 0 0 1.6rem; }

.related-services { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.related-services li { padding-left: 1.1rem; position: relative; font-size: 0.95rem; }
.related-services li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.related-services a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.related-services a:hover { color: var(--gold-bright); border-color: var(--gold); }

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 3.5rem; align-items: start; }
.side-card { background: var(--navy-950); color: var(--ink); border-radius: var(--radius-lg); padding: 2.2rem; position: sticky; top: 6.5rem; }
.side-card h3 { color: var(--ink); }
.side-card p { color: var(--ink-dim); font-size: 0.92rem; }
.side-card .btn { margin-top: 1rem; width: 100%; justify-content: center; }
.side-card .btn-download {
  margin-top: 0.7rem; width: 100%; justify-content: center;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--border-dark);
}
.side-card .btn-download:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.side-card .btn-download svg { width: 16px; height: 16px; }

.value-list { list-style: none; padding: 0; margin: 2rem 0; display: flex; flex-direction: column; gap: 1.6rem; }
.value-list li { padding-left: 2.2rem; position: relative; }
.value-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.15em;
  width: 20px; height: 20px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .side-card { position: static; }
}
@media (max-width: 900px) {
  .contact-inner, .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy-950);
    flex-direction: column; align-items: flex-start; gap: 0;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s var(--ease-apple), transform 0.22s var(--ease-apple), visibility 0s linear 0.22s;
  }
  .main-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s var(--ease-apple), transform 0.22s var(--ease-apple), visibility 0s linear;
  }
  /* Icono hamburguesa -> X: se engancha del aria-expanded que el JS ya
     estaba poniendo (ver main.js), sin necesitar ningún cambio de JS. */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .main-nav a { width: 100%; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-dark); }
  .header-cta { display: none; }
  .nav-toggle { display: block; }
  .grid-4, .grid-3, .grid-2, .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .section { padding: 4rem 0; }
  .team-card { flex-basis: 240px; }
}

/* ==========================================================
   Movimiento — respeto a prefers-reduced-motion
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .hero-cascade { opacity: 1 !important; transform: none !important; filter: none !important; }
}