/* ==========================================================================
   CASADO·MARÍN ABOGADOS — Hoja de estilos
   Sistema de diseño derivado del Manual de Marca v1.0
   ========================================================================== */

/* ---- 1. Tokens ---- */
:root{
  /* Color — Manual de Marca §08 */
  --azul: #2A4767;
  --azul-profundo: #16283C;
  --dorado: #B0894C;
  --dorado-claro: #C9A96A;
  --azul-niebla: #CBD6DF;
  --fondo-claro: #F4F6F8;
  --gris: #6B6B6B;
  --blanco: #FFFFFF;

  --tinta: var(--azul-profundo);
  --tinta-suave: #3C4E60;

  /* Tipografía — Manual §09 */
  --font-display: "Marcellus", "Palatino Linotype", Georgia, serif;
  --font-text: "Source Sans 3", "Calibri", "Aptos", Arial, sans-serif;

  /* Escala */
  --step-eyebrow: 0.6875rem;   /* 11px */
  --step-body: 1rem;            /* 16px */
  --step-body-sm: 0.8125rem;    /* 13px */
  --step-h3: 1.375rem;          /* 22px */
  --step-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
  --step-h1: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem);

  /* Espaciado */
  --space-section: clamp(5rem, 4rem + 4vw, 9rem);
  --space-xl: 6rem;
  --space-lg: 3rem;
  --space-md: 1.5rem;
  --space-sm: 0.75rem;

  --container: 1240px;
  --container-narrow: 780px;

  --radius: 2px;
  --line: 1px solid rgba(22, 40, 60, 0.12);

  --ease-cinema: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.6s;
  --dur-slow: 1.1s;

  --shadow-card: 0 1px 2px rgba(22,40,60,0.06), 0 12px 32px -16px rgba(22,40,60,0.18);
  --shadow-lift: 0 20px 48px -20px rgba(22,40,60,0.35);

  /* Cristal esmerilado — Manual de Marca §08, variante de superficie.
     Dos tonos: claro (tarjetas y cabecera sobre fondo claro) y oscuro
     (panel móvil, superpuesto a fotografía). El brillo superior imita
     el filo de un cristal real captando la luz; sin distorsión ni
     brillos dinámicos, para que rinda igual en cualquier navegador. */
  --glass-light-bg: rgba(255,255,255,0.72);
  --glass-light-blur: blur(22px) saturate(1.5);
  --glass-light-border: rgba(255,255,255,0.5);
  --glass-light-highlight: rgba(255,255,255,0.85);
  --glass-dark-bg: rgba(16,27,41,0.78);
  --glass-dark-blur: blur(26px) saturate(1.6);
  --glass-dark-border: rgba(255,255,255,0.16);
  --glass-dark-highlight: rgba(255,255,255,0.3);
}

/* ---- 2. Reset ---- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body, h1, h2, h3, h4, p, figure, blockquote{ margin: 0; }
ul{ list-style: none; margin: 0; padding: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
svg{ display: block; }

body{
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--step-body);
  line-height: 1.7;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection{ background: var(--dorado-claro); color: var(--azul-profundo); }

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

.skip-link{
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--azul-profundo);
  color: var(--blanco);
  padding: 0.75rem 1.25rem;
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-soft);
  font-size: var(--step-body-sm);
  letter-spacing: 0.04em;
}
.skip-link:focus{ top: 1rem; }

h1, h2, h3{ font-family: var(--font-display); font-weight: 400; color: var(--azul-profundo); }
h1{ font-size: var(--step-h1); line-height: 1.08; letter-spacing: -0.01em; }
h2{ font-size: var(--step-h2); line-height: 1.18; }
h3{ font-size: var(--step-h3); line-height: 1.3; }

.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.5rem, 4vw, 3rem); }
.container--narrow{ max-width: var(--container-narrow); }

section{ position: relative; }
.section-pad{ padding-block: var(--space-section); }

/* Antetítulo dorado — único ornamento tipográfico de la marca */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* El dorado es un acento gráfico (Manual §08): a este tamaño de texto
     sobre blanco no alcanza el contraste AA, así que el color va en la
     marca (--azul) y el dorado queda en el filete decorativo ::before. */
  color: var(--azul);
}
.eyebrow::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--dorado);
  display: inline-block;
}
.eyebrow--center{ justify-content: center; }
.eyebrow--center::before{ display: none; }

.eyebrow--on-dark{ color: var(--dorado-claro); }

.section-head{ max-width: 640px; margin-bottom: var(--space-lg); }
.section-head p{ margin-top: 1rem; color: var(--tinta-suave); font-size: 1.0625rem; }
.section-head--center{ margin-inline: auto; text-align: center; }

/* filete dorado — único ornamento gráfico */
.rule-gold{ width: 44px; height: 2px; background: var(--dorado); border: 0; margin: 1.25rem 0; }
.rule-gold--center{ margin-inline: auto; }

/* ---- Botones ---- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{ background: var(--azul-profundo); color: var(--blanco); }
.btn--primary:hover{ background: var(--azul); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.btn--ghost-dark{ border-color: rgba(255,255,255,0.55); color: var(--blanco); }
.btn--ghost-dark:hover{ border-color: var(--blanco); background: rgba(255,255,255,0.08); transform: translateY(-2px); }

.btn--ghost{ border-color: rgba(22,40,60,0.25); color: var(--azul-profundo); }
.btn--ghost:hover{ border-color: var(--azul-profundo); background: rgba(22,40,60,0.04); }

.btn--gold{ background: var(--dorado); color: var(--azul-profundo); }
.btn--gold:hover{ background: var(--dorado-claro); transform: translateY(-2px); }

.btn--sm{ padding: 0.7rem 1.3rem; font-size: 0.875rem; }
.btn--block{ width: 100%; }

.btn--icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */
.nav{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  /* Padding block fijo a propósito: el "encogido" al hacer scroll lo aporta
     el logo (transform: scale, sin coste de layout) y no la caja del nav,
     para no animar una propiedad de layout en cada frame. */
  padding-block: 1.4rem;
  /* iPhone con notch/Dynamic Island (viewport-fit=cover en el meta viewport):
     sin esto el logo y los botones quedan por debajo de la barra de estado. */
  padding-top: max(1.4rem, env(safe-area-inset-top));
  transition: background-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
  /* Capa de composición propia desde el primer pintado: evita el bug de
     Safari/WKWebView (navegadores in-app como WhatsApp) donde un elemento
     "position:fixed" con "backdrop-filter" que se activa por clase (al
     hacer scroll) se duplica/fantasmea en la parte superior de la pantalla. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}
.nav .container{ display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.nav--solid{
  background: var(--glass-light-bg);
  backdrop-filter: var(--glass-light-blur);
  -webkit-backdrop-filter: var(--glass-light-blur);
  box-shadow: 0 1px 0 var(--glass-light-highlight) inset, 0 1px 0 rgba(22,40,60,0.08);
}

.brand{ display: flex; align-items: center; }
.brand img{ height: 40px; width: auto; transform-origin: left center; transition: transform var(--dur-base) var(--ease-soft); }
.nav--solid .brand img{ transform: scale(0.85); }
.brand .logo-dark{ display: block; }
.brand .logo-light{ display: none; }
.nav--solid .brand .logo-dark{ display: block; }
.nav--solid .brand .logo-light{ display: none; }
.nav:not(.nav--solid) .brand .logo-dark{ display: none; }
.nav:not(.nav--solid) .brand .logo-light{ display: block; }

.nav-links{ display: flex; align-items: center; gap: 2.2rem; }
.nav-links a{
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--blanco);
  position: relative;
  padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav-links a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--dorado);
  transition: right var(--dur-base) var(--ease-cinema);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ right: 0; }
.nav--solid .nav-links a{ color: var(--azul-profundo); }

.nav-actions{ display: flex; align-items: center; gap: 1rem; }
.nav-actions .btn{ color: var(--blanco); border-color: rgba(255,255,255,0.55); }
.nav--solid .nav-actions .btn--ghost-dark{ color: var(--azul-profundo); border-color: rgba(22,40,60,0.28); }
.nav--solid .nav-actions .btn--ghost-dark:hover{ background: rgba(22,40,60,0.05); border-color: var(--azul-profundo); }

.nav-toggle{
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  color: var(--blanco);
}
.nav--solid .nav-toggle{ color: var(--azul-profundo); }
/* OJO: nunca ".nav-toggle span" a secas — oculta también el propio
   icono ".hamburger" (que es un <span>), dejando el botón invisible
   pero pulsable. Solo queremos anular pseudo-elementos del botón. */
.nav-toggle::before, .nav-toggle::after{ display: none; }

.hamburger{ position: relative; width: 22px; height: 14px; }
.hamburger i{
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft), top var(--dur-fast) var(--ease-soft);
}
.hamburger i:nth-child(1){ top: 0; }
.hamburger i:nth-child(2){ top: 6px; }
.hamburger i:nth-child(3){ top: 12px; }
.nav-open .hamburger i:nth-child(1){ top: 6px; transform: rotate(45deg); }
.nav-open .hamburger i:nth-child(2){ opacity: 0; }
.nav-open .hamburger i:nth-child(3){ top: 6px; transform: rotate(-45deg); }

.mobile-panel{
  position: fixed; inset: 0; z-index: 90;
  background: var(--glass-dark-bg);
  backdrop-filter: var(--glass-dark-blur);
  -webkit-backdrop-filter: var(--glass-dark-blur);
  box-shadow: 0 1px 0 var(--glass-dark-highlight) inset;
  display: flex; flex-direction: column;
  padding: 6rem 2rem 2.5rem;
  padding-top: max(6rem, calc(env(safe-area-inset-top) + 4rem));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-cinema);
}
.nav-open .mobile-panel{ transform: translateY(0); }
/* Selector limitado a hijos directos: si se usara ".mobile-panel a" a
   secas, esta tipografía se colaba también en los botones ".btn" de
   .nav-actions (dentro del panel), rompiendo su caja. */
.mobile-panel > a{
  font-family: var(--font-display); font-size: 1.375rem; color: var(--blanco);
  padding-block: 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-panel .nav-actions{ margin-top: 1.75rem; flex-direction: column; align-items: stretch; }

/* ---- Desplegable "Áreas" — escritorio ---- */
.nav-item{ position: relative; }
.nav-links .nav-dropdown-toggle{
  display: inline-flex; align-items: center; gap: 0.35rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--blanco);
  background: none; border: 0; cursor: pointer;
  position: relative; padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav--solid .nav-links .nav-dropdown-toggle{ color: var(--azul-profundo); }
.nav-links .nav-dropdown-toggle::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--dorado);
  transition: right var(--dur-base) var(--ease-cinema);
}
.nav-links .nav-dropdown-toggle:hover::after,
.nav-item[data-open="true"] > .nav-dropdown-toggle::after{ right: 0; }
.nav-dropdown-toggle .chevron{ transition: transform var(--dur-fast) var(--ease-soft); }
.nav-item[data-open="true"] > .nav-dropdown-toggle .chevron{ transform: rotate(180deg); }

.nav-dropdown{
  position: absolute; top: calc(100% + 1.1rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
  min-width: 460px;
  background: var(--glass-light-bg);
  backdrop-filter: var(--glass-light-blur);
  -webkit-backdrop-filter: var(--glass-light-blur);
  border: 1px solid var(--glass-light-border);
  box-shadow: 0 1px 0 var(--glass-light-highlight) inset, var(--shadow-lift);
  padding: 1.5rem 1.75rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), visibility var(--dur-fast);
}
.nav-item[data-open="true"] > .nav-dropdown{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-col{ display: flex; flex-direction: column; gap: 0.5rem; }
.nav-dropdown-heading{
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dorado); margin-bottom: 0.2rem;
}
.nav-dropdown a{ font-size: 0.875rem; color: var(--tinta-suave); }
.nav-dropdown a:hover{ color: var(--dorado); }
.nav-dropdown .nav-dropdown-cta{ margin-top: 0.4rem; padding-top: 0.6rem; border-top: var(--line); font-weight: 600; color: var(--azul); }

/* ---- Desplegable "Áreas" — panel móvil (acordeón) ----
   display:none→grid, sin animar alto: es un desplegable dentro de un
   panel que ya se anima al abrirse (translateY), así que aquí prima
   que el contenido aparezca siempre, de forma fiable, sobre una
   coreografía adicional que además animaría una propiedad de layout. */
.mobile-panel > .nav-item{ border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-panel .nav-item > .nav-dropdown-toggle{
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 1.375rem; color: var(--blanco);
  background: none; border: 0; cursor: pointer;
  padding-block: 0.55rem;
}
.mobile-panel .nav-dropdown-toggle .chevron{ width: 16px; height: 16px; flex-shrink: 0; }
.mobile-panel .nav-dropdown{
  display: none;
  position: static; transform: none; min-width: 0;
  grid-template-columns: 1fr; gap: 1rem;
  background: none; border: 0; box-shadow: none; pointer-events: auto;
  padding: 0 0 1rem;
  opacity: 1; visibility: visible;
}
.mobile-panel .nav-item[data-open="true"] .nav-dropdown{
  display: grid;
  transform: none;
}
.mobile-panel .nav-dropdown-col{ gap: 0.1rem; }
.mobile-panel .nav-dropdown-heading{ color: var(--dorado-claro); margin-top: 0.3rem; font-size: 0.625rem; }
.mobile-panel .nav-dropdown a{ font-size: 0.9375rem; color: rgba(255,255,255,0.8); padding-block: 0.3rem; }
.mobile-panel .nav-dropdown a:hover{ color: var(--blanco); }
.mobile-panel .nav-dropdown .nav-dropdown-cta{ border-top-color: rgba(255,255,255,0.15); color: var(--dorado-claro); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--blanco);
  overflow: hidden;
  background: var(--azul-profundo);
}
.hero-media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 30%;
  transform: scale(1.08);
  will-change: transform;
}
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(16,27,41,0.94) 0%, rgba(16,27,41,0.62) 42%, rgba(16,27,41,0.22) 68%, rgba(16,27,41,0.35) 100%);
}
.hero-content{
  position: relative; z-index: 1;
  padding-block: clamp(7rem, 20vh, 11rem) clamp(3.5rem, 8vh, 5.5rem);
  width: 100%;
}
.hero-content .eyebrow{ color: var(--dorado-claro); margin-bottom: 2.1rem; }
/* line-height 1.3 (no 1.08 como el h1 global): .line usa overflow:hidden
   para el barrido de entrada, y a 1.08 la caja de línea queda más baja
   que el alto real de Marcellus, recortando descendentes ("g", "j", "p")
   contra ese overflow. 1.3 deja margen de sobra a cualquier tamaño. */
.hero h1{ color: var(--blanco); max-width: 16ch; font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem); line-height: 1.3; }
.hero h1 .line{ display: block; overflow: hidden; }
.hero h1 .line span{ display: inline-block; will-change: transform; }
.hero-sub{
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: 1.125rem;
  color: rgba(255,255,255,0.86);
}
.hero-cta{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }

.hero-scroll{
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.hero-scroll .stem{ width: 1px; height: 34px; background: rgba(255,255,255,0.4); overflow: hidden; position: relative; }
.hero-scroll .stem::after{
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--dorado-claro);
  animation: scrollDrop 2.2s var(--ease-soft) infinite;
}
@keyframes scrollDrop{
  0%{ top: -100%; } 60%{ top: 100%; } 100%{ top: 100%; }
}
@media (prefers-reduced-motion: reduce){ .hero-scroll .stem::after{ animation: none; top:0; } }

/* ==========================================================================
   ÁREAS DE PRÁCTICA
   ========================================================================== */
.rutas{ background: var(--fondo-claro); }

.areas-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(22,40,60,0.12);
  border: 1px solid rgba(22,40,60,0.12);
}
/* La pestaña Empresas tiene 5 tarjetas: en 4 columnas, la última quedaría
   huérfana en su propia fila. La centramos en vez de dejarla colgando. */
#panel-empresas .area-card:last-child{ grid-column: 2 / span 2; }
.area-card{
  background: var(--blanco);
  padding: 2.2rem 1.8rem;
  min-height: 220px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-soft);
}
.area-card .num{
  /* Gold reserved for accents ≥24px (Manual §08): a 14px label needs the
     brand blue to keep AA contrast on the white card. */
  font-family: var(--font-display); font-size: 0.875rem; color: var(--azul);
}
.area-card h3{ margin-top: 1.1rem; font-size: 1.2rem; }
.area-card h3 a{ color: inherit; }
.area-card h3 a:hover{ color: var(--dorado); }
.area-card .area-more{
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.area-card .area-more:hover{ color: var(--dorado); }
/* Revelado sin animar layout: la pista de grid pasa de 0fr a 1fr
   (composición, no reflow) en vez de animar max-height/margin. */
.area-card .desc{
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0.75rem;
  transition: grid-template-rows var(--dur-base) var(--ease-soft);
}
.area-card .desc > p{
  overflow: hidden;
  min-height: 0;
  font-size: 0.9rem; color: var(--tinta-suave);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.area-card::before{
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--dorado);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-cinema);
}
.area-card:hover, .area-card:focus-within{ background: var(--fondo-claro); }
.area-card:hover .desc, .area-card:focus-within .desc{ grid-template-rows: 1fr; }
.area-card:hover .desc > p, .area-card:focus-within .desc > p{ opacity: 1; }
.area-card:hover::before, .area-card:focus-within::before{ transform: scaleX(1); }

.area-card .attrib{
  display: block; margin-top: 0.9rem; font-size: 0.75rem; color: var(--gris);
  letter-spacing: 0.01em;
}

.areas-note{ margin-top: 1.5rem; font-size: 0.875rem; color: var(--tinta-suave); }

/* ==========================================================================
   VALORES / EJES
   ========================================================================== */
.ejes{ background: var(--azul-profundo); color: var(--blanco); }
.ejes-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.eje{ padding: 2rem 1.75rem; border: 1px solid rgba(255,255,255,0.14); }
.eje .mark{ font-family: var(--font-display); font-size: 2.5rem; color: var(--dorado-claro); line-height: 1; }
.eje h3{ color: var(--blanco); margin-top: 1.25rem; }
.eje p{ margin-top: 0.85rem; color: rgba(255,255,255,0.75); font-size: 0.95rem; }

/* ==========================================================================
   PROCESO
   ========================================================================== */
.proceso-list{ counter-reset: paso; margin-top: var(--space-lg); }
.paso{
  counter-increment: paso;
  display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem;
  padding-block: 2rem;
  border-top: var(--line);
  align-items: start;
}
.proceso-list .paso:last-child{ border-bottom: var(--line); }
.paso::before{
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.75rem; color: var(--dorado);
}
/* h3 y p van explícitamente en la 2ª columna: sin esto, el grid de 2
   columnas coloca el párrafo (3er hijo) en la 1ª columna estrecha del
   número, comprimiéndolo a ~90px de ancho. */
.paso h3{ grid-column: 2; margin-bottom: 0.6rem; }
.paso p{ grid-column: 2; color: var(--tinta-suave); max-width: 56ch; }

/* ==========================================================================
   EQUIPO
   ========================================================================== */
.equipo-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
/* .persona es flex-column con altura completa: cuando el grid iguala la
   altura de las dos fichas, el colegiado se ancla al pie (margin-top:auto)
   en vez de dejar un hueco muerto en la ficha con menos contenido. */
.persona{ position: relative; display: flex; flex-direction: column; height: 100%; }
.persona-media{ position: relative; overflow: hidden; flex: none; aspect-ratio: 4 / 5; background: var(--azul-profundo); }
.persona-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-cinema); filter: grayscale(1); }
.persona:hover .persona-media img{ transform: scale(1.05); }
/* Un degradado sobre la foto nunca da contraste garantizado: su fuerza
   depende de lo clara que sea la zona de la foto que tape (fallaba con
   el papel claro tras "Mariano Marín"), y subir su opacidad/alto para
   compensar solo aplana la foto entera en un bloque azul sin conseguir
   legibilidad real. En su lugar, .persona-info es una barra de cristal
   esmerilado (--glass-dark-*, igual que .mobile-panel): su fondo es
   opaco de por sí, así que el nombre siempre lee igual sin importar
   la foto de debajo. El degradado que queda encima es solo un
   suavizado corto de la transición foto→cristal, no el contraste. */
.persona-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22,40,60,0.35) 0%, rgba(22,40,60,0) 18%); }
.persona-info{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.75rem;
  color: var(--blanco);
  background: var(--glass-dark-bg);
  backdrop-filter: var(--glass-dark-blur);
  -webkit-backdrop-filter: var(--glass-dark-blur);
  box-shadow: 0 1px 0 var(--glass-dark-highlight) inset;
}
.persona-info .rol{ display:block; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dorado-claro); margin-bottom: 0.35rem; }
.persona-info h3{ color: var(--blanco); }
.persona-body{ display: flex; flex-direction: column; flex: 1; padding: 1.5rem 0.25rem 0; }
.persona-body p{ color: var(--tinta-suave); font-size: 0.9375rem; }
.persona-body .colegiado{ margin-top: auto; padding-top: 0.75rem; font-size: 0.8125rem; color: var(--gris); }
.persona-areas{
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: var(--line);
  font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--azul);
}
.persona-areas strong{ color: var(--azul-profundo); font-weight: 600; }
.persona-credenciales{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.credential{
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 0.35rem 0.7rem; border: 1px solid rgba(42,71,103,0.25); color: var(--azul);
}
.persona-aeafa{ margin-top: 1.1rem; display: flex; align-items: center; gap: 0.6rem; }
.persona-aeafa img{ height: 22px; width: auto; }
.persona-aeafa span{ font-size: 0.75rem; color: var(--gris); }

/* ==========================================================================
   SEDES
   ========================================================================== */
.sedes{ background: var(--fondo-claro); }
.sedes-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.sede{ background: var(--blanco); border: var(--line); padding: 2.2rem; display: flex; flex-direction: column; height: 100%; }
.sede .eyebrow{ margin-bottom: 1rem; }
.sede h3{ margin-bottom: 1rem; }
.sede address{ font-style: normal; color: var(--tinta-suave); font-size: 0.9375rem; line-height: 1.8; flex-grow: 1; }
.sede .btn{ margin-top: 1.5rem; align-self: flex-start; }
.sede-actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.sede-actions .btn{ margin-top: 0; }

/* ==========================================================================
   CONFIANZA / RESEÑAS
   ========================================================================== */
.confianza{ text-align: center; }
.confianza-stats{
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin: var(--space-lg) 0;
}
.confianza-stat .figure{ font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); color: var(--azul-profundo); line-height: 1; }
.confianza-stat .label{ display: block; margin-top: 0.6rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.confianza-rating{
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 1.5rem 2.25rem; border: var(--line); background: var(--fondo-claro);
}
.confianza-rating a{ color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.stars{ display: flex; gap: 0.15rem; color: var(--dorado); }
.confianza-copy{ max-width: 640px; margin: 1.75rem auto 0; color: var(--tinta-suave); }

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */
.faq-list{ margin-top: var(--space-lg); }
.faq-item{ padding-block: 1.75rem; border-top: var(--line); }
.faq-list .faq-item:last-child{ border-bottom: var(--line); }
.faq-item h3{ font-size: 1.125rem; margin-bottom: 0.6rem; }
.faq-item p{ color: var(--tinta-suave); max-width: 62ch; }

/* ==========================================================================
   CTA FINAL + FORMULARIO
   ========================================================================== */
.cta-final{ position: relative; color: var(--blanco); overflow: hidden; }
.cta-final .hero-media{ position: absolute; inset: 0; }
.cta-final .hero-media img{ transform: none; object-position: 25% 30%; }
.cta-final-inner{ position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-lg); align-items: center; }
.cta-final h2{ color: var(--blanco); max-width: 14ch; }
.cta-final p{ color: rgba(255,255,255,0.82); margin-top: 1.25rem; max-width: 42ch; }
.cta-contacts{ margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.cta-contacts a{ display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
.cta-contacts .ico{ width: 2.2rem; height: 2.2rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.form-card{
  /* Cristal más opaco que el resto (0.88 vs. 0.72): esta tarjeta lleva
     el formulario y necesita legibilidad total sobre la fotografía. */
  background: rgba(255,255,255,0.88); color: var(--tinta);
  backdrop-filter: var(--glass-light-blur);
  -webkit-backdrop-filter: var(--glass-light-blur);
  border: 1px solid var(--glass-light-border);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow: 0 1px 0 var(--glass-light-highlight) inset, var(--shadow-lift);
}
.form-card h3{ margin-bottom: 0.4rem; }
.form-card .sub{ color: var(--tinta-suave); font-size: 0.9375rem; margin-bottom: 1.75rem; }
.field{ margin-bottom: 1.15rem; }
.field label{ display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.45rem; color: var(--tinta-suave); }
.field input, .field select, .field textarea{
  width: 100%; padding: 0.85rem 1rem;
  border: 1px solid rgba(22,40,60,0.2);
  background: var(--blanco);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--azul); box-shadow: 0 0 0 3px rgba(42,71,103,0.12); outline: none;
}
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field textarea{ resize: vertical; min-height: 96px; }
.form-legal{ font-size: 0.75rem; color: var(--gris); margin-top: 1rem; line-height: 1.6; }
.form-note{ display:none; margin-top:1rem; padding: 0.85rem 1rem; background: var(--fondo-claro); border-left: 2px solid var(--dorado); font-size: 0.875rem; }
.form-note.show{ display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--azul-profundo); color: rgba(255,255,255,0.75); }
.footer-top{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand img{ height: 40px; width: auto; margin-bottom: 1.25rem; }
.footer-brand p{ max-width: 34ch; font-size: 0.9375rem; }
.footer h4{ color: var(--blanco); font-family: var(--font-text); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.1rem; font-weight: 600; }
.footer-col a{ display: block; padding-block: 0.4rem; font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease-soft); }
.footer-col a:hover{ color: var(--dorado-claro); }
.footer-social{ display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.footer-social a{ width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft); }
.footer-social a:hover{ border-color: var(--dorado-claro); background: rgba(255,255,255,0.06); }
.footer-bottom{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-block: 1.75rem; font-size: 0.8125rem; }
.footer-bottom nav{ display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-bottom nav a:hover{ color: var(--blanco); }

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.whatsapp-float{
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 80;
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: #25D366; color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-fast) var(--ease-soft), background-color var(--dur-fast) var(--ease-soft);
}
.whatsapp-float svg{ width: 30px; height: 30px; }
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.04); background: #1EBE5A; }
.whatsapp-float span{ position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(37,211,102,0.4); animation: pulseRing 2.6s var(--ease-soft) infinite; }
@keyframes pulseRing{ 0%{ transform: scale(0.9); opacity: 0.8; } 100%{ transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .whatsapp-float span{ animation: none; display:none; } }

/* ==========================================================================
   REVEAL (JS hooks)
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(28px); }
.reveal.is-visible{ opacity: 1; transform: none; }
.no-js .reveal{ opacity: 1; transform: none; }

/* ==========================================================================
   PÁGINAS DE ÁREA — breadcrumb, artículo largo, callouts
   ========================================================================== */
.breadcrumb{
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.8125rem; color: var(--gris);
  margin-bottom: 1.75rem;
}
.breadcrumb a{ color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover{ color: var(--azul-profundo); }
.breadcrumb .actual{ color: var(--tinta-suave); }

.articulo-layout{
  display: grid; grid-template-columns: 1fr 320px; gap: var(--space-lg);
  align-items: start;
}
.articulo{ max-width: 720px; }
.articulo h2{ margin-top: var(--space-lg); margin-bottom: 1rem; }
.articulo h2:first-child{ margin-top: 0; }
.articulo h3{ margin-top: var(--space-md); margin-bottom: 0.75rem; font-size: 1.15rem; }
.articulo p{ color: var(--tinta-suave); margin-bottom: 1.25rem; max-width: 66ch; }
.articulo p:last-child{ margin-bottom: 0; }
.articulo ul, .articulo ol{ margin: 0 0 1.25rem; padding-left: 1.25rem; color: var(--tinta-suave); max-width: 62ch; }
.articulo ul{ list-style: disc; }
.articulo ol{ list-style: decimal; }
.articulo li{ margin-bottom: 0.55rem; }
.articulo li::marker{ color: var(--dorado); }
.articulo strong{ color: var(--tinta); font-weight: 600; }
.articulo blockquote{
  border-left: 3px solid var(--dorado);
  padding: 0.2rem 0 0.2rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--azul-profundo);
  max-width: 58ch;
}
.articulo blockquote cite{ display: block; margin-top: 0.75rem; font-family: var(--font-text); font-style: normal; font-size: 0.8125rem; color: var(--gris); letter-spacing: 0.02em; }

.callout{
  background: var(--fondo-claro);
  border: var(--line);
  border-left: 3px solid var(--dorado);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  max-width: 66ch;
}
.callout h4{ font-family: var(--font-text); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dorado); margin-bottom: 0.7rem; font-weight: 600; }
.callout p{ color: var(--tinta-suave); margin: 0; max-width: none; }
.callout p + p{ margin-top: 0.75rem; }

.sidebar-card{
  position: sticky; top: 6.5rem;
  border: 1px solid var(--glass-light-border);
  padding: 1.75rem;
  background: var(--glass-light-bg);
  backdrop-filter: var(--glass-light-blur);
  -webkit-backdrop-filter: var(--glass-light-blur);
  box-shadow: 0 1px 0 var(--glass-light-highlight) inset, var(--shadow-card);
}
.sidebar-card h4{ font-family: var(--font-display); font-size: 1.05rem; color: var(--azul-profundo); margin-bottom: 1rem; }
.sidebar-card .dato{ display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; border-top: var(--line); font-size: 0.875rem; }
.sidebar-card .dato:first-of-type{ border-top: none; }
.sidebar-card .dato span:first-child{ color: var(--gris); }
.sidebar-card .dato span:last-child{ color: var(--tinta); text-align: right; font-weight: 600; }
.sidebar-card .btn{ margin-top: 1.5rem; width: 100%; justify-content: center; }

.related-areas{ margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.related-areas a{
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.1rem; border: var(--line); font-size: 0.875rem;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.related-areas a:hover{ background: var(--fondo-claro); border-color: var(--dorado); }

/* ==========================================================================
   BLOG — listado y meta de artículo
   ========================================================================== */
.blog-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--linea, rgba(22,40,60,0.12));
  border: 1px solid rgba(22,40,60,0.12);
  margin-top: var(--space-lg);
}
.blog-card{
  background: var(--blanco); padding: 2.2rem 2rem;
  display: flex; flex-direction: column;
  transition: background-color var(--dur-base) var(--ease-soft);
}
.blog-card:hover{ background: var(--fondo-claro); }
.blog-card .cat{
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--dorado); margin-bottom: 0.9rem;
}
.blog-card h3{ margin-bottom: 0.75rem; }
.blog-card h3 a{ color: var(--azul-profundo); }
.blog-card h3 a:hover{ color: var(--dorado); }
.blog-card p{ color: var(--tinta-suave); font-size: 0.9375rem; flex-grow: 1; }
.blog-card .meta{
  display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem;
  font-size: 0.8125rem; color: var(--gris);
}
.blog-card .meta a{ color: var(--azul); text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }

.article-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem;
  font-size: 0.875rem; color: var(--gris); margin-bottom: 2.5rem;
  padding-bottom: 1.5rem; border-bottom: var(--line);
}
.article-meta strong{ color: var(--tinta); }
.article-meta .autor-colegiado{ font-size: 0.8125rem; color: var(--gris); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .areas-grid{ grid-template-columns: repeat(2, 1fr); }
  #panel-empresas .area-card:last-child{ grid-column: 1 / -1; }
  .footer-top{ grid-template-columns: 1fr 1fr; row-gap: var(--space-md); }
  .cta-final-inner{ grid-template-columns: 1fr; }
  .cta-final .form-card{ order: -1; }
  .articulo-layout{ grid-template-columns: 1fr; }
  .sidebar-card{ position: static; max-width: 480px; }
  .nav-dropdown{ min-width: 400px; gap: 1.5rem; }
}

@media (max-width: 860px){
  .nav-links{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .ejes-grid{ grid-template-columns: 1fr; }
  .equipo-grid{ grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .sedes-grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }
  .nav-actions .btn span{ display: none; }
  /* El CTA dorado completo ("Pedir una consulta") no cabe junto al telefono
     y el boton de menu en una pantalla estrecha: se queda solo en el panel
     movil, que ya lo repite a ancho completo. Sin esto, el contenido
     desbordaba el viewport, empujando el boton de menu fuera de pantalla
     y comprimiendo el logo (perdia su proporcion). */
  .nav > .container > .nav-actions .btn--gold{ display: none; }
}

@media (max-width: 620px){
  .areas-grid{ grid-template-columns: 1fr; }
  .paso{ grid-template-columns: 56px 1fr; }
  .hero-content{ padding-top: 6.5rem; }
  .confianza-rating{ flex-direction: column; gap: 0.5rem; }
  .blog-grid{ grid-template-columns: 1fr; }
  /* Foto de portada de la home: en un recorte tan estrecho (retrato),
     object-fit:cover deja fuera a uno de los dos socios. Centramos
     entre ambas caras y quitamos el zoom cinematográfico (scale 1.08)
     para ganar el margen que hace falta para que quepan las dos. */
  .hero-media--duo img{ object-position: 51% 15%; transform: scale(1); }
}