/* =============================================================
   1. Tokens
   ============================================================= */
/* ---------------------------------------------------------------------------
   Paleta oficial — Manual de Identidad Corporativa HAXO 2026, pág. 9.
   Son los cuatro colores autorizados; el manual prohíbe expresamente
   modificarlos. El verde es el color dominante de la marca y el cobre,
   su acento: por eso aquí el verde sustituye al antiguo casi-negro cálido.
   --------------------------------------------------------------------------- */
:root {
  --verde:        #032c28;   /* R3  G44  B40  — dominante */
  --cobre:        #a95a39;   /* R169 G90  B57 */
  --cobre-medio:  #d48753;   /* R212 G135 B83 */
  --cobre-claro:  #e49165;   /* R228 G145 B101 */

  /* Escala derivada del verde de marca, para capas y profundidad */
  --black:    #021b18;
  --charcoal: #032c28;
  --graphite: #0a463f;
  --gray-800: #2c5852;
  --gray-600: #6b8b86;
  --gray-500: #93aba7;
  --gray-300: #c6d5d2;
  --gray-100: #e6eceb;
  --paper:    #f7f3ed;
  --white:    #ffffff;
  --cream:    #f1e9de;

  --ink:      #032c28;
  --ink-soft: #24504a;
  --ink-mute: #4a6b66;

  --teal:      #032c28;
  --teal-deep: #021b18;

  --copper:       #a95a39;
  --copper-light: #e49165;
  --copper-deep:  #8a4527;
  --copper-mid:   #d48753;

  --serif: "Playfair Display", serif;
  /* Montserrat es la tipografía secundaria del manual (pág. 6) */
  --sans:  "Montserrat", "Manrope", sans-serif;
  --mono:  "IBM Plex Mono", monospace;
  /* El manual pide 'Lemon Milk' como primaria. No está en Google Fonts y la
     copia incrustada en el PDF viene subconjuntada, así que se usa Jost como
     sustituta: geométrica y del mismo carácter. Sustituible en un token. */
  --display: "Jost", "Futura", "Century Gothic", sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 4px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 600;
}
em { font-style: italic; font-weight: 500; }
::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--paper);
  z-index: 9999; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 1.2rem;
}
.kicker::before {
  content: "";
  width: 34px; height: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.kicker-dark { color: var(--copper-deep); }

/* ---------------------------------------------------------------------------
   Recursos de marca (manual de identidad)
   El filete de cobre y el hexágono son los dos elementos que se repiten en
   toda la papelería: el filete separa el campo verde del blanco, y el
   hexágono aparece sobredimensionado como marca de agua.
   --------------------------------------------------------------------------- */

/* Filete: línea de cobre con degradado, como remate de sección */
.filete-cobre {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-mid) 35%, transparent 100%);
}

/* Marca de agua hexagonal. Dibujada como SVG —dos hexágonos girados entre sí,
   que es como el logotipo genera su trenzado— para que se pueda teñir y usar
   igual sobre verde que sobre crema, cosa que el .webp no permitía. */
.marca-hex {
  position: absolute; pointer-events: none; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e49165' stroke-width='1'%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5'/%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5' transform='rotate(14 50 50)'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .16;
}
/* Sobre fondo claro hace falta el cobre oscuro y menos presencia */
.marca-hex-claro {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23a95a39' stroke-width='1'%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5'/%3E%3Cpolygon points='50,3 91,26.5 91,73.5 50,97 9,73.5 9,26.5' transform='rotate(14 50 50)'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .09;
}

/* Trazos diagonales finos, como en los fondos digitales del manual */
.trazos-diagonales {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(115deg, transparent 38%, rgba(212,135,83,0.16) 38.2%, transparent 38.5%),
    linear-gradient(115deg, transparent 62%, rgba(212,135,83,0.10) 62.2%, transparent 62.5%),
    linear-gradient(115deg, transparent 79%, rgba(212,135,83,0.07) 79.2%, transparent 79.5%);
}

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
/* Filete de cobre bajo cada titular de sección: el mismo remate que ya tenía
   "¿Quiénes somos?", ahora como recurso común que cose toda la página. */
.section-head .section-title::after {
  content: "";
  display: block; width: 56px; height: 2px;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  background: linear-gradient(90deg, var(--copper), var(--copper-mid));
}
.section-head-light .section-title::after {
  background: linear-gradient(90deg, var(--copper-mid), var(--copper-light));
}
.section-head-light .kicker { color: var(--copper-mid); }
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); }
.section-title-light { color: var(--paper); }
.section-sub { margin-top: .9rem; color: var(--ink-mute); font-size: 1.02rem; }
.section-sub-light { color: var(--gray-300); }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.btn-primary {
  background: var(--copper);
  color: var(--black);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.btn-primary:hover {
  background: var(--copper-light);
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(138,74,34,.35);
}
.btn-ghost {
  border: 1px solid rgba(3,44,40,0.18);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); }

/* Ghost button on dark backgrounds */
.hero .btn-ghost { border-color: rgba(247,243,237,0.28); color: var(--paper); }
.hero .btn-ghost:hover { border-color: var(--paper); }

/* Magnetic wrapper */
.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s var(--ease-soft);
}

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  padding-block: 1.4rem;
  transition: background-color .4s var(--ease-out), padding .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(247,243,237,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: .85rem;
  box-shadow: 0 1px 0 rgba(3,44,40,0.08);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: .65rem; }
.nav-brand-mark {
  border: 1px solid rgba(3,44,40,0.25);
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  transition: border-color .4s;
}
.nav.is-scrolled .nav-brand-mark { border-color: rgba(3,44,40,0.25); }
.nav-brand-name {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: .07em;
  color: var(--ink);
  transition: color .4s;
}
.nav.is-scrolled .nav-brand-name { color: var(--ink); }

.nav-links { display: none; align-items: center; gap: clamp(1.2rem, 2vw, 2.1rem); }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; padding: .3rem 0;
  color: var(--ink-soft); font-size: .92rem; font-weight: 500;
  transition: color .4s;
}
.nav.is-scrolled .nav-link { color: var(--ink-soft); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  padding: .6rem 1.2rem; border-radius: 999px;
  border: 1px solid rgba(3,44,40,0.22);
}
.nav.is-scrolled .nav-cta { border-color: rgba(3,44,40,0.2); }
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav.is-scrolled .nav-cta:hover { background: var(--ink); color: var(--paper); }

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px; padding: .5rem;
  z-index: 101;
}
@media (min-width: 960px) { .nav-toggle { display: none; } }
.nav-toggle span {
  width: 22px; height: 1.5px; background: var(--ink); transition: background .3s, transform .3s, opacity .3s;
}
.nav.is-scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span { background: var(--paper) !important; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile a { font-family: var(--serif); font-size: 1.6rem; }

/* =============================================================
   6. Hero (emblema a pantalla completa) + Intro + Stats
   ============================================================= */
.hero-zone {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.hero-zone-bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, var(--black) 0%, var(--charcoal) 65%, var(--charcoal) 100%);
}
.hero-zone-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---- Primera pantalla: solo el emblema ---- */
/* El fondo de la sección son los propios tonos de la pared del rótulo,
   medidos sobre la foto: baño de los focos #d5b8a4 arriba, pared media
   #8f7160, base #675147. Nada de negro. */
/* Primera pantalla: el logotipo panorámico a sangre sobre su propio crema.
   Al ser un fondo plano, la imagen se puede recortar por los lados sin que se
   note el corte, y el color del CSS continúa donde acaba el archivo. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  justify-items: center;
  align-items: end;
  padding: 6rem 0 1.5rem;
  overflow: hidden;
  color: var(--ink);
  background: #fbf1e9;
}
/* Ya no hay marco: la imagen ocupa toda la pantalla. Se mantiene el elemento
   para no tocar el HTML ni el JavaScript. */
.hero-stage {
  position: absolute; inset: 0;
  width: auto; margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
.hero-emblem {
  position: absolute; inset: 0;
  /* Móvil primero: versión vertical (4:5). El logotipo ocupa el 81% del ancho
     del marco, así que en el móvil llena la pantalla de lado a lado. */
  background-image: url("assets/img/haxo-hero-alto-v5.webp");
  /* «contain», no «cover»: el logotipo entra ENTERO en cualquier proporción de
     pantalla. Con «cover» el recorte se comía la línea «ASESORÍA LEGAL
     CORPORATIVA» en cuanto la ventana era más ancha que alta respecto de la
     ilustración (una ventana 1920x620, o el móvil en horizontal).
     El fondo de la ilustración es un crema plano #FBF1E9 idéntico al
     background-color de abajo, así que las bandas que deja «contain» son
     invisibles: la pantalla se sigue viendo a sangre. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fbf1e9;
  transform-origin: center;
  will-change: transform;
  animation: emblemZoom 26s var(--ease-soft) infinite;
}
@media (min-width: 900px) {
  /* En pantallas anchas, la panorámica. Su proporción (1.45) es más estrecha
     que cualquier monitor, así que «contain» siempre ajusta por ALTURA y el
     logotipo mide un 74% del alto de la pantalla, pase lo que pase. */
  .hero-emblem { background-image: url("assets/img/haxo-hero-ancho-v4.webp"); }
}
/* Video del hero. La caja mide EXACTAMENTE lo que se dibuja (misma lógica que
   «contain») y sus bordes se difuminan 3 px con el mismo crema del fondo: así
   ninguna línea de muestreo del borde del video (GPU, escala fraccionaria)
   puede verse como raya oscura. */
.hero-emblem { container-type: size; }
.hero-video {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .25s linear;
  pointer-events: none;
}
@supports (width: 1cqw) {
  .hero-video {
    /* alto y ancho de móvil (828x1034) */
    width: min(100cqw, calc(100cqh * 0.8008));
    height: min(100cqh, calc(100cqw / 0.8008));
    object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3px, #000 calc(100% - 3px), transparent),
                        linear-gradient(180deg, transparent, #000 3px, #000 calc(100% - 3px), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 3px, #000 calc(100% - 3px), transparent),
                linear-gradient(180deg, transparent, #000 3px, #000 calc(100% - 3px), transparent);
    mask-composite: intersect;
  }
  @media (min-width: 900px) {
    /* panorámica (1926x1328) */
    .hero-video {
      width: min(100cqw, calc(100cqh * 1.4503));
      height: min(100cqh, calc(100cqw / 1.4503));
    }
  }
}
.hero-video.is-on { opacity: 1; }
.hero-emblem.has-video { animation: none; will-change: auto; }
/* El halo cálido tenía sentido sobre la foto de la pared iluminada.
   Sobre el crema plano solo ensuciaría, así que se retira. */
.hero-emblem-glow { display: none; }
/* Velo superior: cálido, no negro. Solo lo justo para que la navegación en
   color papel se lea sobre el baño claro de los focos. */
/* El velo superior existía para que la navegación clara se leyera sobre la
   foto oscura. Con el hero en crema la barra pasa a tinta verde y sobra. */
.hero-topveil { display: none; }

/* Fundido inferior: del crema del logotipo al verde de la sección de texto */
.hero-fade {
  position: absolute; inset: auto 0 0 0; height: 22vh; pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(251,241,232,0) 30%, rgba(3,44,40,0.55) 78%, var(--verde) 100%);
}

/* Zoom apenas perceptible: solo roza el borde de la pared, nunca el logotipo */
@keyframes emblemZoom {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes emblemBreath {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-emblem, .hero-emblem-glow { animation: none; }
}

/* La versión 4:5 ya está pensada para pantalla vertical, así que el hero
   vuelve a ocupar la pantalla completa también en móvil. */
@media (max-width: 719px) {
  .hero { min-height: 100svh; padding: 0; }
}

/* ---- Segunda pantalla: el mensaje ---- */
.hero-intro {
  position: relative;
  color: var(--paper);
}
.hero-inner { padding-block: clamp(4.5rem, 11vw, 8rem) clamp(3rem, 7vw, 5rem); max-width: 880px; }
.hero-title {
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  color: var(--paper);
  max-width: 15ch;
}
.hero-title em { color: var(--gray-300); }
.hero-sub {
  margin-top: 1.6rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--gray-300);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* Split words reveal */
.split-word { display: inline-block; }

/* =============================================================
   7. Stats strip
   ============================================================= */
.stats {
  position: relative;
  color: var(--paper);
  padding-block: clamp(2.4rem, 5vw, 3.5rem);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  text-align: center;
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat-num, .stat-suffix {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--copper-light);
}
.stat-suffix { margin-left: 2px; }
.stat p { margin-top: .5rem; color: var(--gray-500); font-size: .88rem; max-width: 20ch; }

/* =============================================================
   7a. Lema de marca
   ============================================================= */
/* El corte en diagonal con canto de cobre es el gesto de la carpeta: el campo
   verde entra en ángulo y un filete lo separa del blanco. Se consigue con dos
   capas recortadas con el mismo polígono, la de cobre 3 px por encima. */
.lema {
  position: relative;
  overflow: hidden;
  background: var(--copper);
  color: var(--paper);
  padding-block: clamp(4.2rem, 9vw, 6rem) clamp(3rem, 7vw, 5rem);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.lema::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--verde);
  clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 720px) {
  .lema { clip-path: polygon(0 42px, 100% 0, 100% 100%, 0 100%); }
  .lema::before { clip-path: polygon(0 45px, 100% 3px, 100% 100%, 0 100%); }
}
.marca-hex-lema {
  width: clamp(260px, 34vw, 460px); aspect-ratio: 1;
  right: -6%; top: 50%; transform: translateY(-50%);
  opacity: .2;
}
.lema-inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem);
}
.lema-frase {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.4vw, 2.4rem);
  line-height: 1.22;
  color: var(--paper);
  max-width: 18ch;
}
.lema-frase em { color: var(--copper-light); font-style: italic; }
.lema-valores {
  list-style: none; display: flex; flex-wrap: wrap; gap: clamp(.6rem, 2vw, 1.4rem);
}
.lema-valores li {
  font-family: var(--display);
  font-size: clamp(.7rem, 1.3vw, .82rem);
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray-300);
  padding: .55rem 1.1rem;
  border: 1px solid rgba(228,145,101,0.34);
  border-radius: 999px;
}

/* =============================================================
   7b. Quiénes somos (declaración de apertura)
   ============================================================= */
.about {
  position: relative; overflow: hidden;
  background: var(--paper);
  padding-block: clamp(4.5rem, 10vw, 7.5rem);
  text-align: center;
}
.marca-hex-about {
  width: clamp(220px, 26vw, 340px); aspect-ratio: 1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.about-inner { position: relative; z-index: 1; max-width: 860px; }
.about-title { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
/* Filete de cobre entre el titular y la declaración */
.about-title::after {
  content: "";
  display: block;
  width: 64px; height: 2px;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  background: var(--copper);
}
.about-lead {
  max-width: 44ch;
  margin-inline: auto;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* =============================================================
   8. Advantages
   ============================================================= */
.advantages { padding-block: clamp(4rem, 9vw, 7rem); background: var(--paper); }
.advantages-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 720px) { .advantages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .advantages-grid { grid-template-columns: repeat(4, 1fr); } }
.advantage-card {
  background: var(--white);
  border: 1px solid rgba(3,44,40,0.09);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: transform .5s var(--ease-soft), border-color .4s, box-shadow .5s var(--ease-soft);
}
.advantage-card:hover {
  border-color: rgba(3,44,40,0.22);
  box-shadow: 0 30px 60px -25px rgba(3,44,40,0.25);
}
.advantage-num {
  font-family: var(--mono); font-size: .85rem; color: var(--copper-deep);
  display: block; margin-bottom: 1.4rem;
}
.advantage-card h3 { font-size: 1.15rem; margin-bottom: .65rem; }
.advantage-card p { color: var(--ink-mute); font-size: .95rem; }

/* =============================================================
   9. Practice areas marquee
   ============================================================= */
.practice-marquee {
  background: var(--ink); color: var(--paper);
  padding-block: 1.5rem;
  border-block: 1px solid rgba(247,243,237,0.1);
}
/* flex evita que la pista pueda partirse en dos líneas si alguna vez vuelve
   a haber más de un hijo aquí dentro */
.marquee { overflow: hidden; position: relative; display: flex; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.marquee-track {
  display: flex; flex: 0 0 auto;
  gap: 2.5rem; white-space: nowrap; will-change: transform;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--gray-300);
}
.marquee-track span:nth-child(odd) { color: var(--paper); }

/* =============================================================
   10. Team
   ============================================================= */
.team { padding-block: clamp(4rem, 9vw, 7rem); background: var(--paper); }
/* Cinco abogados no caben en una rejilla regular sin dejar huecos: con flex
   y justify-content:center la última fila queda centrada en vez de colgando
   a la izquierda. 2 por fila en tablet (2+2+1) y 3 en escritorio (3+2). */
.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
}
.team-card { flex: 0 1 100%; }
@media (min-width: 640px)  { .team-card { flex-basis: calc(50% - .75rem); } }
@media (min-width: 1024px) { .team-card { flex-basis: calc(33.333% - 1rem); } }
/* Con siete integrantes, cuatro por fila reparte 4+3 en vez de dejar una
   ficha sola en la tercera fila. */
@media (min-width: 1200px) { .team-card { flex-basis: calc(25% - 1.125rem); } }
.team-card {
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-soft);
}
.team-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  /* Blanco, igual que el fondo de los retratos: así el marco no se nota
     mientras la imagen carga. */
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
}
.team-photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(3,44,40,0.14) 0 15%, transparent 16%),
    radial-gradient(ellipse 46% 30% at 50% 88%, rgba(3,44,40,0.14) 0 100%, transparent 100%);
}
.team-photo span {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .05em;
  color: var(--gray-600);
  background: rgba(255,255,255,0.7);
  padding: .35rem .7rem;
  border-radius: 999px;
}
.team-photo img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.03);
  transition: transform .7s var(--ease-soft), filter .5s;
}
.team-card:hover .team-photo img { transform: scale(1.05); filter: grayscale(0) contrast(1.03); }
.team-card h3 { font-size: 1.2rem; margin-bottom: .1rem; }
/* Cargo: etiqueta pequeña, por encima de la especialidad */
/* Filete de cobre al pie del retrato: ata la ficha a la identidad sin
   recargarla, y separa la foto del nombre. */
.team-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--copper), var(--copper-mid) 55%, transparent);
  transform: scaleX(.34); transform-origin: left;
  transition: transform .55s var(--ease-soft);
}
.team-card:hover .team-photo::after { transform: scaleX(1); }

.team-tag {
  font-family: var(--display);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: .35rem;
}
.team-role {
  font-family: var(--display);
  font-size: .98rem; font-weight: 600;
  letter-spacing: .01em; line-height: 1.38;
  color: var(--copper-deep); margin-bottom: .85rem;
}
.team-bio { font-size: .92rem; color: var(--ink-mute); }
.team-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: .4rem;
}
.team-link {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--mono); font-size: .86rem; font-weight: 500;
  color: var(--ink-soft);
  border: 1.5px solid rgba(3,44,40,0.22);
  border-radius: 999px;
  padding: .48rem 1rem;
  min-height: 2.6rem;
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-soft);
}
.team-link:hover { color: var(--ink); border-color: var(--ink); }
.team-link svg { width: 19px; height: 19px; flex-shrink: 0; }

/* WhatsApp con su verde característico */
.team-link-wa {
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37,211,102,0.32);
}
.team-link-wa:hover {
  background: #1EBE5A;
  border-color: #1EBE5A;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,211,102,0.45);
}

/* Correo: solo el icono por ahora, sin dirección todavía */
.team-link-mail {
  padding: .48rem .78rem;
  color: var(--ink-soft);
  border-color: rgba(3,44,40,0.3);
}
.team-link-mail:hover { transform: translateY(-2px); }
.team-link-mail svg { width: 21px; height: 21px; }

/* =============================================================
   11. Cases
   ============================================================= */
.cases {
  position: relative; overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--ink); color: var(--paper);
}
.cases .container { position: relative; z-index: 1; }
.marca-hex-casos {
  width: clamp(300px, 40vw, 560px); aspect-ratio: 1;
  left: -8%; bottom: -12%;
  opacity: .17;
}
.cases-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 720px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
.case-card {
  background: var(--charcoal);
  border: 1px solid rgba(247,243,237,0.08);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform .5s var(--ease-soft), border-color .4s;
}
.case-card:hover { border-color: rgba(247,243,237,0.22); }
.case-tag {
  display: inline-block;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--copper-light);
  border: 1px solid rgba(224,160,111,0.3);
  border-radius: 999px; padding: .3rem .75rem;
  margin-bottom: 1.1rem;
}
.case-card h3 { font-size: 1.25rem; color: var(--paper); margin-bottom: .6rem; }
.case-card p { color: var(--gray-300); font-size: .94rem; }
.case-result {
  display: block; margin-top: 1.1rem;
  font-family: var(--mono); font-size: .78rem;
  color: var(--copper-light);
}
.case-result::before { content: "— "; }

/* =============================================================
   12. Testimonials
   ============================================================= */
.testimonials { padding-block: clamp(4rem, 9vw, 7rem); background: var(--paper); }
.testimonials-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 780px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  background: var(--white);
  border: 1px solid rgba(3,44,40,0.09);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
.testimonial-card:hover { box-shadow: 0 30px 60px -25px rgba(3,44,40,0.22); }
.testimonial-stars { color: var(--copper); letter-spacing: .15em; margin-bottom: 1.1rem; font-size: .95rem; }
.testimonial-quote { font-size: 1rem; color: var(--ink-soft); flex: 1; margin-bottom: 1.5rem; }
.testimonial-author { display: flex; align-items: center; gap: .8rem; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: .92rem; font-weight: 600; }
.testimonial-author span { font-size: .8rem; color: var(--ink-mute); }

/* =============================================================
   13. Contact
   ============================================================= */
.contact { position: relative; padding-block: clamp(4rem, 9vw, 7rem); background: var(--ink); color: var(--paper); overflow: hidden; }

/* Video de fondo en bucle */
.contact-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-bg-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* El plano es cálido y con mucha luz: lo enfriamos y bajamos su peso visual
     para que el texto claro del formulario siga siendo el elemento dominante. */
  filter: grayscale(0.35) brightness(0.6) contrast(1.05);
}
/* Velo que garantiza el contraste del texto sobre cualquier fotograma.
   Una sola capa: sumado al brightness del vídeo deja la zona más luminosa
   del plano (la ventana) en torno al 30 % de luminancia, suficiente para
   texto claro sin apagar del todo la imagen. */
.contact-bg-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(3,44,40,0.50) 18%,
    rgba(3,44,40,0.50) 80%,
    var(--ink) 100%);
}
/* En pantallas estrechas la sección es muy alta: a pantalla completa el encuadre
   16:9 se recortaría hasta dejar visible solo una franja central del plano.
   Lo limitamos a una banda superior que se funde con el fondo. */
@media (max-width: 959px) {
  .contact-bg { bottom: auto; height: clamp(320px, 55vh, 520px); }
  .contact-bg-veil {
    background: linear-gradient(180deg,
      rgba(3,44,40,0.55) 0%,
      rgba(3,44,40,0.70) 45%,
      rgba(3,44,40,0.92) 82%,
      var(--ink) 100%);
  }
}

/* Accesibilidad: sin movimiento, se queda el fotograma fijo */
@media (prefers-reduced-motion: reduce) {
  .contact-bg-video { display: none; }
  /* Pseudoelemento, no fondo del contenedor: así el póster recibe el mismo
     filtro que el vídeo y el velo sigue pintándose por encima. */
  .contact-bg::before {
    content: "";
    position: absolute; inset: 0;
    background: url("assets/video/balanza-contacto-poster.jpg") center / cover no-repeat;
    filter: grayscale(0.35) brightness(0.6) contrast(1.05);
  }
}

.contact-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 4.5rem; } }
.contact-list { list-style: none; margin-top: 2.2rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-list li { display: flex; flex-direction: column; gap: .2rem; font-size: .98rem; }
.contact-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-500);
}
.contact-list a { transition: color .3s; }
.contact-list a:hover { color: var(--gray-300); }
.contact-map {
  margin-top: 2rem; aspect-ratio: 16/9; border-radius: var(--radius);
  background: var(--graphite);
  border: 1px solid rgba(247,243,237,0.1);
  overflow: hidden;
  filter: grayscale(0.4) sepia(0.18) hue-rotate(135deg) saturate(1.25) brightness(0.94);
}
.contact-map iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.contact-map-link {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: .9rem;
  font-family: var(--mono); font-size: .78rem; color: var(--copper-light);
  border-bottom: 1px solid rgba(224,160,111,0.35);
  padding-bottom: .1rem;
  transition: color .3s, border-color .3s;
}
.contact-map-link:hover { color: var(--paper); border-color: var(--paper); }

/* Panel del formulario: es la acción principal de la página, así que se
   levanta del fondo con un cristal oscuro, filo de cobre y sombra propia. */
.contact-panel {
  position: relative;
  align-self: start;
  background: rgba(3,44,40,0.62);
  border: 1px solid rgba(247,243,237,0.16);
  border-radius: calc(var(--radius) * 2);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.contact-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--copper-deep), var(--copper-light) 45%, transparent);
}
.contact-panel-head { margin-bottom: 1.1rem; }
.contact-panel-kicker {
  font-family: var(--display);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: .5rem;
}
.contact-panel-head h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--paper); }
.contact-panel-sub {
  margin-top: .6rem; color: var(--gray-300); font-size: .96rem; max-width: 44ch;
}
/* Motivos para rellenarlo, justo antes de los campos */
.contact-perks {
  list-style: none; display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: 1.5rem;
}
.contact-perks li {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
  color: var(--gray-300);
  background: rgba(247,243,237,0.06);
  border: 1px solid rgba(247,243,237,0.14);
  border-radius: 999px;
  padding: .34rem .7rem;
}
.contact-perks li::before {
  content: "✓"; color: var(--copper-light); font-weight: 700;
}

.contact-form { position: relative; display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-content: start; }
@media (min-width: 540px) { .contact-form { grid-template-columns: 1fr 1fr; } }
.field { position: relative; grid-column: span 1; }
.field-full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 1.35rem 1rem .55rem;
  background: rgba(247,243,237,0.04);
  border: 1px solid rgba(247,243,237,0.18);
  border-radius: var(--radius);
  color: var(--paper);
  font: inherit; font-size: .95rem;
  transition: border-color .3s;
}
.field select { appearance: none; }
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(247,243,237,0.55); }
.field label {
  position: absolute; left: 1rem; top: 1.1rem;
  pointer-events: none; transition: all .25s var(--ease-out);
  color: var(--gray-500); font-size: .95rem;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  top: .45rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500);
}
/* A todo el ancho: el botón es el destino del bloque, no un elemento más */
.cta-submit {
  grid-column: 1 / -1; position: relative; margin-top: .4rem;
  justify-self: stretch; width: 100%;
  padding-block: 1.05rem; font-size: 1rem;
}
.contact-form-note {
  grid-column: 1 / -1;
  margin-top: -.35rem;
  font-family: var(--mono); font-size: .72rem; line-height: 1.5;
  color: var(--gray-500); text-align: center;
}
.cta-submit .cta-form-spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.contact-form.is-sending .cta-form-label { opacity: 0; }
.contact-form.is-sending .cta-form-spinner { display: flex; }
.cta-form-spinner::after {
  content: ""; width: 16px; height: 16px;
  border: 1.5px solid rgba(247,243,237,0.3); border-top-color: var(--paper);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.contact-form.is-sent { opacity: 0; transform: translateY(-10px); pointer-events: none; position: absolute; }

.cta-success {
  grid-column: 1 / -1;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-soft);
  border: 1px solid rgba(247,243,237,0.18); border-radius: var(--radius);
  padding: 2rem;
}
.cta-success.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.cta-success h3 { color: var(--paper); margin-bottom: .5rem; font-size: 1.3rem; }
.cta-success p { color: var(--gray-300); }

/* =============================================================
   14. Footer
   ============================================================= */
.footer { background: var(--black); color: var(--gray-500); padding-block: 2.5rem; }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.footer-brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--paper);
  font-family: var(--display); font-weight: 600; letter-spacing: .07em;
}
.footer-brand .nav-brand-mark {
  border: 1px solid rgba(247,243,237,0.25);
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer-links a { font-size: .88rem; transition: color .3s; }
.footer-links a:hover { color: var(--paper); }
.footer-legal { width: 100%; font-size: .78rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,243,237,0.08); margin-top: .5rem; }

/* =============================================================
   15. Reveal & tilt (shared)
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

.has-tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft);
}
.has-tilt:hover { transition-duration: .15s; }

/* =============================================================
   16. Breakpoints reference (mobile-first, used above)
   ============================================================= */
@media (min-width: 540px) { }
@media (min-width: 720px) { }
@media (min-width: 960px) { }
@media (min-width: 1280px) {
  .hero-title { max-width: 17ch; }
}

/* =============================================================
   17. Chat widget
   ============================================================= */
/* Los dos botones flotantes van en fila: WhatsApp a la izquierda, chat a la
   derecha. El panel del chat es hijo absoluto y se ancla al borde derecho. */
.chat-widget { position: fixed; inset: auto 1.1rem 1.1rem auto; z-index: 300; display: flex; align-items: center; gap: .7rem; }
@media (min-width: 540px) { .chat-widget { inset: auto 1.75rem 1.75rem auto; } }

.chat-fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(155deg, var(--copper-light), var(--copper) 62%, var(--copper-deep));
  color: var(--teal-deep);
  border: 2.5px solid var(--teal);
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(138,74,34,0.45);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
  position: relative;
}
.chat-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 48px rgba(138,74,34,0.6); }
.chat-fab-icon { width: 24px; height: 24px; position: absolute; inset: 0; margin: auto; transition: opacity .25s, transform .3s var(--ease-soft); }
.chat-fab-icon-close { opacity: 0; transform: scale(.6) rotate(-45deg); }
.chat-fab-icon-open { opacity: 1; transform: scale(1) rotate(0); }
.chat-widget.is-open .chat-fab-icon-open { opacity: 0; transform: scale(.6) rotate(45deg); }
.chat-widget.is-open .chat-fab-icon-close { opacity: 1; transform: scale(1) rotate(0); }

/* Boton flotante de WhatsApp, gemelo del chat. Conserva el verde propio de
   WhatsApp para que se reconozca al instante, pero con el mismo borde y la
   misma sombra que el otro para que los dos se lean como una pareja. */
.wa-fab {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: linear-gradient(155deg, #4ce07a, #25d366 62%, #10a343);
  color: var(--white);
  border: 2.5px solid var(--teal);
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(7,90,45,0.42);
  transition: transform .4s var(--ease-soft), box-shadow .4s var(--ease-soft), opacity .3s var(--ease-soft);
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 48px rgba(7,90,45,0.55); }
.wa-fab svg { width: 26px; height: 26px; display: block; }
/* Con el chat abierto estorba y compite con la X: se aparta sin ocupar sitio. */
.chat-widget.is-open .wa-fab { opacity: 0; transform: scale(.7); pointer-events: none; }

.chat-panel {
  position: absolute; right: 0; bottom: calc(58px + .9rem);
  width: min(380px, calc(100vw - 2.2rem));
  height: min(600px, 72vh);
  background: var(--white);
  border-radius: 16px;
  border: 1px solid rgba(3,44,40,0.1);
  box-shadow: 0 40px 90px -20px rgba(3,44,40,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.chat-widget.is-open .chat-panel { opacity: 1; transform: none; pointer-events: auto; }

.chat-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem;
  background: var(--ink); color: var(--paper);
  flex-shrink: 0;
}
.chat-panel-brand { display: flex; align-items: center; gap: .7rem; }
.chat-panel-brand .nav-brand-mark { width: 32px; height: 32px; border-color: rgba(247,243,237,0.3); }
.chat-panel-brand strong { display: block; font-size: .92rem; font-weight: 600; }
.chat-panel-brand span {
  font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  color: var(--gray-300);
}
.chat-panel-close { width: 30px; height: 30px; display: grid; place-items: center; color: var(--paper); border-radius: 50%; transition: background .25s; }
.chat-panel-close:hover { background: rgba(247,243,237,0.12); }
.chat-panel-close svg { width: 16px; height: 16px; }

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--paper);
}
.chat-msg {
  max-width: 84%;
  padding: .65rem .9rem;
  border-radius: 14px;
  font-size: .9rem; line-height: 1.5;
}
.chat-msg p { margin: 0; }
.chat-msg + .chat-msg { margin-top: 0; }
.chat-msg-bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid rgba(3,44,40,0.08);
  border-bottom-left-radius: 4px;
  color: var(--ink-soft);
}
.chat-msg-user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.chat-msg-error {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid rgba(3,44,40,0.14);
  color: var(--ink-mute);
  font-style: italic;
}
.chat-typing { align-self: flex-start; display: flex; gap: 4px; padding: .8rem .9rem; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gray-500);
  animation: chatTyping 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-typing span { animation: none; opacity: .7; } }

.chat-disclaimer {
  font-size: .72rem; color: var(--gray-500); text-align: center;
  padding: .5rem 1rem 0; flex-shrink: 0;
}

.chat-input-row {
  display: flex; align-items: flex-end; gap: .6rem;
  padding: .85rem 1rem 1rem;
  flex-shrink: 0;
}
.chat-input {
  flex: 1; resize: none; max-height: 96px;
  padding: .7rem .9rem;
  border: 1px solid rgba(3,44,40,0.15);
  border-radius: 14px;
  font: inherit; font-size: .9rem; line-height: 1.4;
  color: var(--ink);
  transition: border-color .3s;
}
.chat-input:focus { border-color: var(--ink); }
.chat-send {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  transition: transform .3s var(--ease-soft), opacity .3s;
}
.chat-send:hover { transform: scale(1.06); }
.chat-send:disabled { opacity: .4; pointer-events: none; }
.chat-send svg { width: 18px; height: 18px; }

/* Mobile: near-fullscreen sheet */
@media (max-width: 539px) {
  .chat-panel {
    position: fixed; inset: 0; bottom: 0; right: 0;
    width: 100%; height: 100%;
    border-radius: 0;
  }
  .chat-fab, .wa-fab { width: 54px; height: 54px; }
  .wa-fab svg { width: 24px; height: 24px; }
}

/* =============================================================
   18. Offices gallery
   ============================================================= */
.offices { padding-block: clamp(4rem, 9vw, 7rem); background: var(--paper); }
.offices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 640px)  { .offices-grid { gap: 1.1rem; } }
@media (min-width: 960px)  { .offices-grid { grid-template-columns: repeat(4, 1fr); } }
/* Las fotos son casi todas verticales: casillas 3:4 para no recortarlas.
   La horizontal (rótulo) ocupa dos columnas y queda en 3:2. */
.office-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(3,44,40,0.08);
}
.office-photo-wide { grid-column: span 2; aspect-ratio: 3 / 2; }
/* En cuatro columnas comparte fila con dos casillas 3:4: sin proporción propia,
   se estira a su altura y queda alineada al píxel. */
@media (min-width: 960px) { .office-photo-wide { aspect-ratio: auto; } }
.office-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-soft);
}
.office-photo:hover img { transform: scale(1.06); }