/* ===========================================================================
   estilos.css — GOJŌ STUDIO Jurídico · Demo web corporativa · V1.17
   Marketing Electrónico · www.marketingelectronico.cl
   ---------------------------------------------------------------------------
   Un solo archivo de estilos para TODAS las páginas (ES y EN).

   ÍNDICE
     A. Variables globales (colores, tipografías, medidas)  ← empieza aquí
     B. Base
     C. Imágenes provisionales con medida (.ph) e imagen real (img.fill)
     D. Botones
     E. Animación de aparición (.reveal)
     1. Cabecera + selector de idioma
     2. MEGA MENÚ (Servicios)
     3. Hero con slider (inicio)
     4. Cifras
     5. Bloque "Vamos más allá" (4 paneles que cambian la imagen)
     6. Nosotros
     7. Carrusel "Áreas de práctica"
     8. Proceso
     9. Reconocimientos
    10. Alertas legales
    11. Contacto + formulario
    12. Pie de página
    13. WhatsApp y botón "volver arriba"
    14. PÁGINA INTERIOR (ficha de área de práctica)
     F. Responsive
   =========================================================================== */

/* =========================================================================
   A. VARIABLES GLOBALES
   ========================================================================= */
:root {
  /* --- Colores de marca --- */
  --ink:        #0e1524;   /* Fondo más oscuro (cabecera, cifras, footer) */
  --indigo:     #1c2a4a;   /* Color principal (paneles activos, bloques) */
  --indigo-2:   #283d68;   /* Variante más clara del índigo */
  --paper:      #f4f1ea;   /* Fondo claro tipo papel */
  --paper-2:    #e9e4d9;   /* Fondo claro alterno */
  --white:      #ffffff;
  --gold:       #C99A52;   /* ACENTO dorado (V1.04): botones, detalles, flechas */
  --gold-hover: #D8AE6C;
  --ivory:      #F2F0F2;   /* Blanco marfil: títulos sobre fondo oscuro */
  --soft-blue:  #AFC3E8;   /* Azul grisáceo claro: textos sobre fondo oscuro */
  --gold-text:  #ffffff;   /* Texto dentro de botones dorados (V1.05: blanco) */
  /* DEGRADADO DORADO de botones y rellenos (V1.05). Al pasar el mouse se invierte. */
  --gold-grad:       linear-gradient(to right, #D8AE6C 0%, #9e7247 100%);
  --gold-grad-hover: linear-gradient(to right, #9e7247 0%, #D8AE6C 100%);

  --text-dark:  #18203a;   /* Texto sobre fondo claro */
  --muted-dark: #5b6072;   /* Texto secundario sobre fondo claro */
  --text-light: #eef0f5;   /* Texto sobre fondo oscuro */
  --muted-light:#a6aec2;   /* Texto secundario sobre fondo oscuro */
  --line-dark:  rgba(24, 32, 58, .14);   /* Líneas sobre claro */
  --line-light: rgba(238, 240, 245, .14);/* Líneas sobre oscuro */

  /* --- Tipografías (V1.04: solo estas 3 familias) ---
     Cormorant Garamond → elegancia jurídica: títulos, numeración y cifras (solo tamaños grandes)
     Montserrat         → estructura: etiquetas, menú, botones y elementos pequeños
     Lato               → legibilidad: párrafos y textos descriptivos */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Montserrat', system-ui, sans-serif;
  --font-body:    'Lato', system-ui, sans-serif;

  /* --- Medidas --- */
  --maxw: 1320px;      /* Ancho máximo del contenido */
  --pad-x: 40px;       /* Margen lateral */
  --header-h: 100px;   /* Alto de la cabecera (al bajar se reduce a 84px, ver sección 1) */
  --radius: 28px;

  /* --- TÍTULOS DE SECCIÓN (V1.10): UNA sola medida para todos los h2 ---
     Cambia aquí y se actualizan Nosotros, Áreas, Proceso, Equipo, Alertas,
     Contacto y la ficha interior. */
  --title-size: clamp(2.5rem, 4.6vw, 4rem);   /* máx. 64px */
  --title-lh: 1.1;
  --title-ls: -.3px;      /* Curva de tarjetas y bloques grandes */

  /* --- Imágenes provisionales --- */
  --ph-bg:    #e3ddd1;
  --ph-bg-b:  #cfc6b6;
  --ph-label: #7a5f36;
  --ph-size:  #1c2a4a;

  --slide-dur: 6500ms;  /* Duración de cada imagen del hero (igual que SLIDE_TIME en main.js) */
}

/* =========================================================================
   B. BASE
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Números alineados (Cormorant trae por defecto números de estilo antiguo: 01 se vería "oɪ") */
html { font-variant-numeric: lining-nums; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body { font-family: var(--font-body); background: var(--paper); color: var(--text-dark); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: 120px 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Antetítulo: "— 01 / Sección" */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
/* Títulos: serif con palabra destacada en cursiva dorada (<em>) */
.title { font-family: var(--font-display); font-weight: 600; font-size: var(--title-size); line-height: var(--title-lh); letter-spacing: var(--title-ls); }   /* V1.08: peso 600 = más fuerza · 64px máx. */
.title em, .hero h1 em, .page-hero h1 em { font-style: italic; font-weight: 500; color: var(--gold); }
.hero h1 em, .page-hero h1 em { font-weight: 700; }
.lead { font-size: clamp(1.08rem, 1.25vw, 1.12rem); line-height: 1.6; color: #444b5e; max-width: 600px; margin-top: 20px; }
.on-dark { color: var(--text-light); }
.on-dark .lead { color: var(--soft-blue); }
.on-dark .title { color: var(--ivory); }

/* =========================================================================
   C. IMÁGENES PROVISIONALES CON MEDIDA
   Cada imagen se ve como un recuadro con su nombre y su medida mientras
   no exista el archivo. Al subir el archivo a /img con el nombre indicado
   (busca "IMAGEN:" en el HTML), aparece sola encima del recuadro.
   ========================================================================= */
.ph {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; background: var(--ph-bg); color: var(--ph-size);
  background-image: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.45), transparent 60%),
                    repeating-linear-gradient(135deg, rgba(28,42,74,.05) 0 2px, transparent 2px 24px);
}
.ph--b { background-color: var(--ph-bg-b); }
.ph-label { font-weight: 700; font-size: .9rem; color: var(--ph-label); }
.ph-size { font-family: var(--font-body); font-weight: 600; font-size: 1.35rem; letter-spacing: 1px; }
/* V1.13: cuando la imagen real existe, el recuadro con la medida se oculta.
   Si el archivo no está en /img, el <img> se elimina solo (onerror) y el
   recuadro vuelve a verse. Clave para logos PNG con fondo transparente. */
.ph:has(~ img), .ph:has(~ video) { visibility: hidden; }
.media { position: relative; overflow: hidden; }
.media > .ph { position: absolute; inset: 0; }
img.fill, video.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   D. BOTONES
   .btn        dorado relleno        .btn-line   contorno (fondo oscuro)
   .btn-dark   índigo relleno        .btn-pill   redondeado
   ========================================================================= */
/* V1.06: botón tipo píldora, SIN borde (el borde hacía que el degradado se
   repitiera en los extremos) y SIN sombra bajo el texto. */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 32px;
  font-size: .8rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--gold-grad); color: var(--gold-text); border: none; border-radius: 40px;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.btn svg { width: 16px; height: 16px; transition: transform .3s; }
/* Degradado invertido que aparece con fundido al pasar el mouse */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-grad-hover); opacity: 0; transition: opacity .45s ease; }
.btn:hover::before { opacity: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(158,114,71,.25); }
.btn:hover svg { transform: translateX(5px); }
.btn-line { background: transparent; color: var(--text-light); border: 1px solid rgba(238,240,245,.4); }
.btn-line::before, .btn-dark::before { display: none; }
.btn-line:hover { background: rgba(238,240,245,.08); border-color: var(--text-light); box-shadow: none; }
.btn-dark { background: var(--indigo); color: var(--white); }
.btn-dark:hover { background: var(--indigo-2); border-color: var(--indigo-2); }
.btn-pill { border-radius: 40px; }

/* =========================================================================
   E. APARICIÓN AL HACER SCROLL  (class="reveal" + style="--d:.2s" opcional)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================================
   E2. MONTSERRAT para los elementos pequeños y estructurales
   (etiquetas, menú, botones, datos). Agrega aquí cualquier elemento nuevo.
   ========================================================================= */
.nav-list > li > a, .nav-trigger, .lang, .btn, .btn-outline, .link-arrow, .hero-count,
.mm-label, .mm-item b, .mm-res-link b, .mm-chips a, .mm-card-top, .mm-card .mm-card-btn,
.vma-num, .areas-label span, .area-card h3, .alert-meta, .contact-info dt, .field label,
.subnav a, .fact small, .case span, .crumbs, .svc h3, .footer-bottom { font-family: var(--font-ui); }

/* =========================================================================
   1. CABECERA  (transparente sobre la portada → oscura al hacer scroll)
   ========================================================================= */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; color: var(--text-light); transition: background .4s, box-shadow .4s; }
.site-header.scrolled, .site-header.menu-open { background: rgba(14,21,36,.94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-light); }
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: var(--header-h); max-width: 1640px; margin: 0 auto; padding: 0 var(--pad-x); }
/* LOGO: img/logo-gojo.png (220 × 52, versión blanca). Sin "height" en CSS: se ve a su tamaño real */
.hdr { transition: height .4s ease; }

/* LOGO (img/Logo-header.png · 312 × 71)
   - width = ancho en pantalla; el alto se calcula solo (proporción 312/71).
   - Al bajar la página se achica al 80 % para que la cabecera sea más liviana.
   - Pantallas medianas: 270 px · móvil: 190 px (ver sección F. RESPONSIVE). */
.logo { position: relative; display: block; width: 312px; aspect-ratio: 312 / 71; flex-shrink: 0; transform-origin: left center; transition: transform .4s ease; }
.logo .ph { position: absolute; inset: 0; gap: 0; border-radius: 2px; }
.logo .ph-label { font-size: .68rem; } .logo .ph-size { font-size: .8rem; }
.logo img { position: relative; display: block; width: 100%; height: auto; }
@media (min-width: 641px) {
  :root:has(.site-header.scrolled) { --header-h: 84px; }
  .site-header.scrolled .logo { transform: scale(.8); }
}

.main-nav { flex: 1; display: flex; justify-content: flex-end; }
.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-list > li > a, .nav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  font-size: .76rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-light);
}
.nav-list > li > a::after, .nav-trigger::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .35s;
}
.nav-list > li > a:hover::after, .nav-list > li > a[aria-current="page"]::after,
.nav-trigger:hover::after, .has-mega.open .nav-trigger::after { transform: scaleX(1); transform-origin: left; }
.nav-trigger svg { width: 12px; height: 12px; transition: transform .3s; }
.has-mega.open .nav-trigger svg { transform: rotate(180deg); }

.hdr-right { display: flex; align-items: center; gap: 22px; }
/* Selector de idioma ES / EN (V1.06): pastilla simple de 2 opciones.
   Activo: dorado #D8AE6C con texto blanco. Inactivo: blanco visible. */
.lang { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(238,240,245,.3); border-radius: 30px;
  font-size: .74rem; font-weight: 700; letter-spacing: 1px; }
.lang a { padding: 6px 12px; border-radius: 30px; color: rgba(238,240,245,.88); transition: color .3s, background .3s; }
.lang a:hover { color: #fff; background: rgba(238,240,245,.1); }
.lang a.is-active { color: #fff; background: #D8AE6C; }
.lang span { display: none; }   /* la "/" ya no hace falta */
.header-cta { padding: 13px 26px; }
.nav-list > li > a, .nav-trigger, .header-cta { white-space: nowrap; }   /* textos del menú siempre en una línea */
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .3s, background .3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
.menu-open .nav-toggle span { background: transparent; }
.menu-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.menu-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   2. MEGA MENÚ  (se despliega bajo "Servicios")
   -------------------------------------------------------------------------
   ┌──────────────────────────────┬─────────────┬──────────────┐
   │ Encabezado + línea           │ RECURSOS    │  Tarjeta     │
   │ Áreas (3 columnas)           │ COMUNIDAD   │  destacada   │
   ├──────────────────────────────┴─────────────┴──────────────┤
   │ Banner: logo │ separador │ frase de marca                  │
   └────────────────────────────────────────────────────────────┘
   Se adapta según el ANCHO DEL PANEL (container queries, más abajo).
   Prefijo de clases: mm-
   ========================================================================= */
.mm {
  --mm-panel: #ffffff; --mm-soft: #f3f0e8; --mm-title: #18203a; --mm-text: #5b6072; --mm-label: #8a6c3f;
  --mm-line: rgba(24,32,58,.12); --mm-accent: #1c2a4a;
  --mm-g1: #0e1524; --mm-g2: #283d68; --mm-g3: #8a6c3f; --mm-night: #0e1524; --mm-radius: 22px;
  position: absolute; left: 16px; right: 16px; top: calc(var(--header-h) - 6px);
  max-width: 1640px; margin: 0 auto;
  container-type: inline-size; container-name: mmx;
  background: var(--mm-panel); color: var(--mm-text); border-radius: var(--mm-radius);
  box-shadow: 0 30px 80px rgba(8,12,24,.35); overflow: hidden auto;
  max-height: calc(100vh - var(--header-h) - 16px);   /* si no cabe en pantalla, se puede desplazar dentro */
  overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.has-mega.open .mm { opacity: 1; visibility: visible; transform: none; }
.mm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px 330px; }
.mm-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-label); }

/* A) Encabezado + áreas */
.mm-services { padding: 34px 34px 30px; container-type: inline-size; container-name: mms; }
.mm-head { margin-bottom: 18px; }
.mm-head .mm-label { padding-bottom: 14px; }
.mm-head-line { height: 1px; background: var(--mm-line); transform-origin: left; }
.mm-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 4px 12px; }
.mm-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; transition: background .25s; }
.mm-item:hover, .mm-item:focus-visible { background: var(--mm-soft); }
.mm-ic { width: 34px; height: 34px; flex-shrink: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.mm-item:hover .mm-ic { transform: translateY(-2px) rotate(-7deg) scale(1.1); }
.mm-item b { display: block; font-size: 15px; font-weight: 600; color: var(--mm-title); line-height: 1.3; transition: color .25s; }
.mm-item:hover b { color: var(--gold); }
.mm-item small { display: block; font-size: 14px; line-height: 1.5; color: var(--mm-text); margin-top: 3px; }

/* B) Recursos + comunidad */
.mm-res { padding: 34px 30px 30px; border-left: 1px solid var(--mm-line); }
.mm-res .mm-label { margin-bottom: 14px; }
.mm-res-list { display: grid; gap: 4px; }
.mm-res-link { display: flex; gap: 14px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; transition: background .25s; }
.mm-res-link:hover { background: var(--mm-soft); }
.mm-res-link svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; stroke: var(--mm-title); fill: none; stroke-width: 1.6; transition: stroke .25s; }
.mm-res-link:hover svg { stroke: var(--gold); }
.mm-res-link b { display: block; font-size: 14.5px; font-weight: 600; color: var(--mm-title); transition: color .25s; }
.mm-res-link:hover b { color: var(--gold); }
.mm-res-link small { display: block; font-size: 13.5px; line-height: 1.45; }
.mm-community { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mm-line); }
.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mm-chips a { padding: 7px 14px; border: 1px solid var(--mm-line); border-radius: 30px; font-size: 13px; font-weight: 600; color: var(--mm-title); transition: background .25s, color .25s, border-color .25s; }
.mm-chips a:hover { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; }

/* C) Tarjeta destacada */
.mm-card {
  position: relative; display: flex; flex-direction: column; padding: 28px; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 15% 10%, rgba(201,154,82,.45), transparent 45%),
              radial-gradient(circle at 90% 85%, rgba(40,61,104,.9), transparent 55%), var(--mm-night);
}
.mm-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #e8d5b5; }
.mm-card-top svg { width: 18px; height: 18px; }
.mm-tiles { position: relative; height: 170px; margin: 18px 0 12px; }
/* Para usar una imagen propia en vez de los tiles: borra los 4 .mm-tile del HTML
   y pon <img src="img/mega-destacada.jpg" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:16px"> */
.mm-tile { position: absolute; width: 74px; height: 74px; border-radius: 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.mm-tile svg { width: 38px; height: 38px; }
.mm-tile.glass { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); }
.mm-tile:nth-child(1) { left: 6%;  top: 8%; }
.mm-tile:nth-child(2) { left: 40%; top: 0;  }
.mm-tile:nth-child(3) { left: 70%; top: 22%; }
.mm-tile:nth-child(4) { left: 26%; top: 52%; }
.mm-card h4 { font-family: var(--font-display); font-weight: 500; font-size: 1.8rem; line-height: 1.15; }
.mm-card p { font-size: 14px; color: #c5cbda; margin: 8px 0 18px; }
.mm-card .mm-card-btn { margin-top: auto; display: block; text-align: center; padding: 13px; border-radius: 12px; background: #fff; color: var(--mm-title); font-weight: 700; font-size: 14px; transition: background .25s, color .25s; }
.mm-card .mm-card-btn:hover { background: var(--gold-grad); color: var(--gold-text); }

/* D) Banner inferior */
.mm-banner {
  position: relative; grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; padding: 20px 34px; overflow: hidden;
  background: linear-gradient(100deg, var(--mm-g1), var(--mm-g2) 55%, var(--mm-g3)); color: #fff;
}
.mm-banner::after { content: ""; position: absolute; right: -60px; top: -70px; width: 320px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mm-banner-logo { position: relative; width: 150px; aspect-ratio: 312 / 71; flex-shrink: 0; }
.mm-banner-logo img { position: relative; display: block; width: 100%; height: auto; }
.mm-banner-logo .ph { position: absolute; inset: 0; gap: 0; } .mm-banner-logo .ph-label { font-size: .6rem; } .mm-banner-logo .ph-size { font-size: .72rem; }
.mm-banner-sep { width: 1px; height: 30px; background: rgba(255,255,255,.35); }
.mm-banner p { position: relative; font-size: 15px; color: #e9ecf3; }
.mm-banner .mm-shine { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); }

/* E) Animaciones del mega menú (se repiten cada vez que se abre: clase .is-in) */
.js .mm .mm-item { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease, background .25s; transition-delay: calc((var(--r) + var(--c)) * 60ms); }
.js .mm .mm-head-line { transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.js .mm .mm-res { opacity: 0; transform: translateX(24px); transition: opacity .6s ease .15s, transform .6s ease .15s; }
.js .mm .mm-card h4, .js .mm .mm-card p { opacity: 0; transform: translateY(14px); transition: opacity .6s ease .3s, transform .6s ease .3s; }
.js .mm .mm-tile { opacity: 0; transform: scale(.6); }
.js .mm .mm-banner > *:not(.mm-shine) { opacity: 0; transform: translateX(-20px); transition: opacity .6s ease .35s, transform .6s ease .35s; }
.js .mm.is-in .mm-item, .js .mm.is-in .mm-res, .js .mm.is-in .mm-card h4, .js .mm.is-in .mm-card p, .js .mm.is-in .mm-banner > * { opacity: 1; transform: none; }
.js .mm.is-in .mm-head-line { transform: scaleX(1); }
.js .mm.is-in .mm-tile { animation: mm-pop .6s cubic-bezier(.34,1.56,.64,1) forwards, mm-float 5s ease-in-out .6s infinite; }
.js .mm.is-in .mm-tile:nth-child(2) { animation-delay: .1s, .7s; animation-duration: .6s, 5.6s; }
.js .mm.is-in .mm-tile:nth-child(3) { animation-delay: .2s, .8s; animation-duration: .6s, 4.6s; }
.js .mm.is-in .mm-tile:nth-child(4) { animation-delay: .3s, .9s; animation-duration: .6s, 5.2s; }
.js .mm.is-in .mm-shine { animation: mm-shine 1.4s ease-in-out .5s 1 both; }
@keyframes mm-pop   { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes mm-float { 0%,100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-9px); } }
@keyframes mm-shine { from { left: -40%; } to { left: 130%; } }

/* F) Responsive del mega menú según el ancho del PANEL */
@container mmx (max-width: 1379px) {
  .mm-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .mm-services { grid-column: 1; grid-row: 1; }
  .mm-res { grid-column: 1; grid-row: 2; border-left: none; border-top: 1px solid var(--mm-line); display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .mm-res > .mm-label { grid-column: 1 / -1; }
  .mm-res-list { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .mm-community { grid-column: 1 / -1; }
  .mm-card { grid-column: 2; grid-row: 1 / span 2; }
}
@container mmx (max-width: 999px) {
  .mm-grid { grid-template-columns: 1fr; }
  .mm-services, .mm-res, .mm-card { grid-column: 1; grid-row: auto; }
  .mm-card { display: grid; grid-template-columns: 1fr 220px; gap: 0 24px; }
  .mm-card-top, .mm-card h4, .mm-card p, .mm-card .mm-card-btn { grid-column: 1; }
  .mm-tiles { grid-column: 2; grid-row: 1 / span 4; height: auto; min-height: 170px; margin: 0; }
}
@container mmx (max-width: 639px) {
  .mm-services, .mm-res { padding: 24px 18px; }
  .mm-res, .mm-res-list { grid-template-columns: 1fr; }
  .mm-card { display: flex; padding: 24px 20px; }
  .mm-tiles { height: 150px; margin: 14px 0 6px; }
  .mm-tile { width: 62px; height: 62px; } .mm-tile svg { width: 32px; height: 32px; }
  .mm-banner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
  .mm-banner-sep { display: none; }
}
@container mms (max-width: 819px) { .mm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); } }
@container mms (max-width: 459px) { .mm-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } }

/* =========================================================================
   3. HERO CON SLIDER (inicio) — 2 imágenes 1920 × 1080
   ========================================================================= */
.hero { position: relative; height: 100vh; min-height: 700px; overflow: hidden; background: var(--ink); color: var(--text-light); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 1.4s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide-bg { position: absolute; inset: 0; transform: scale(1.12); transition: transform 8s ease-out; }
.slide-bg > .ph { position: absolute; inset: 0; }
/* Video del slide 1 (video/estudio.mp4), encima de la imagen hero-1.jpg */
.hero-video { z-index: 1; pointer-events: none; }
.slide.is-active .slide-bg { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,21,36,.9) 0%, rgba(14,21,36,.55) 50%, rgba(14,21,36,.2) 100%), linear-gradient(0deg, rgba(14,21,36,.75), transparent 45%); }
.slide-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.slide-content .inner { max-width: 700px; padding-top: 50px; }
.slide-content .inner > * { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.slide.is-active .inner > * { opacity: 1; transform: none; }
.slide.is-active .inner > *:nth-child(2) { transition-delay: .3s; }
.slide.is-active .inner > *:nth-child(3) { transition-delay: .45s; }
.slide.is-active .inner > *:nth-child(4) { transition-delay: .6s; }
.hero h1 { font-family: var(--font-display); font-weight: 700;   /* 700 = el peso máximo de Cormorant Garamond */
  font-size: clamp(3rem, 6.6vw, 5.8rem); line-height: 1.04; color: var(--ivory); margin-bottom: 24px; }
.hero p { color: var(--soft-blue); font-size: 1.125rem; max-width: 500px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-controls { position: absolute; z-index: 5; left: 0; right: 0; bottom: 44px; }
.hero-controls .container { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.hero-count { font-size: .85rem; letter-spacing: 3px; color: var(--muted-light); }
.hero-count b { color: var(--text-light); font-weight: 600; }
.hero-progress { width: 140px; height: 1px; background: var(--line-light); overflow: hidden; }
.hero-progress span { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.hero-progress.run span { animation: progress var(--slide-dur) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(238,240,245,.35); display: grid; place-items: center; color: var(--text-light); transition: background .3s, border-color .3s, color .3s, opacity .3s; }
.round-btn:hover { background: var(--gold-grad); border-color: transparent; color: var(--gold-text); }
.round-btn:disabled { opacity: .35; pointer-events: none; }
.round-btn svg { width: 18px; height: 18px; }
/* Texturas para que el zoom se note en la imagen provisional */
.slide-bg > .ph, .vma-bg > .ph { background-image: radial-gradient(ellipse at 30% 35%, rgba(255,255,255,.55), transparent 55%), repeating-linear-gradient(135deg, rgba(28,42,74,.07) 0 2px, transparent 2px 26px); }

/* =========================================================================
   4. CIFRAS  (V1.03: números serif grandes, "+" dorado, línea corta,
   separadores dorados con rombo y decoración de arcos + columna clásica)
   Cambia cada número en data-target (index.html).
   ========================================================================= */
.stats { position: relative; overflow: hidden; color: var(--text-light); padding: 100px 0;
  background: radial-gradient(ellipse at 50% -20%, #1a2742 0%, var(--ink) 65%); }
.stats-arc { position: absolute; border-radius: 50%; border: 1px solid rgba(201,154,82,.6); pointer-events: none; }
.stats-arc.a1 { width: 440px; height: 440px; left: -250px; top: -250px; }
.stats-arc.a2 { width: 480px; height: 480px; right: -260px; bottom: -330px; }
.stats-arc.a3 { width: 1100px; height: 420px; left: -420px; bottom: -300px; border-color: rgba(166,174,194,.08); }
.stats-pillar { position: absolute; right: 1%; top: 50%; height: 130%; width: auto; transform: translateY(-50%); fill: none; stroke: #7f90b8; stroke-width: 1.4; opacity: .14; pointer-events: none; }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; }   /* cada columna toma el ancho de su cifra; el espacio sobrante se reparte parejo */
.stat { position: relative; padding: 10px 0 10px clamp(28px, 3.4vw, 64px); }
.stat:first-child { padding-left: 0; }
/* Separador vertical dorado con rombo al centro */
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--gold) 18%, var(--gold) 82%, transparent); opacity: .75; }
.stat + .stat::after { content: ""; position: absolute; left: -3.5px; top: 50%; width: 8px; height: 8px; background: var(--gold); transform: translateY(-50%) rotate(45deg); }
.stat-num { display: flex; align-items: flex-start; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.2rem, 5vw, 5rem); line-height: 1; color: var(--ivory); }
.stat-num sup { font-family: var(--font-display); font-weight: 500; font-size: .55em; line-height: 1; color: var(--gold); margin-left: 4px; position: relative; top: .06em; }
.stat-rule { display: block; width: 40px; height: 2px; background: var(--gold); margin: 24px 0 14px; }
.stat p { color: var(--soft-blue); font-size: 1.03rem; }

/* =========================================================================
   5. BLOQUE "VAMOS MÁS ALLÁ" — 4 paneles que cambian la imagen de fondo
   -------------------------------------------------------------------------
   - Cada panel tiene SU imagen (1920 × 640). Al pasar el mouse (o tocar en
     móvil) el panel se tiñe de índigo, muestra su bajada y el fondo
     completo cambia a su imagen con un fundido.
   - Cambia solo cada 5 s mientras nadie lo toca (VMA_TIME en main.js).
   ========================================================================= */
.vma { position: relative; height: clamp(540px, 34vw, 680px); overflow: hidden; background: var(--ink); color: #fff; }
.vma-bg { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1s ease, transform 6s ease-out; }
.vma-bg > .ph { position: absolute; inset: 0; }
.vma-bg.is-active { opacity: 1; transform: scale(1); }
.vma::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(14,21,36,.75), rgba(14,21,36,.25) 55%, rgba(14,21,36,.35)); pointer-events: none; }
.vma-title { position: absolute; z-index: 3; top: 15%; left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x))); pointer-events: none; }
.vma-title h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 5.6vw, 5rem); line-height: 1; color: var(--ivory); }
.vma-title p { font-size: 1.15rem; margin-top: 8px; color: #e9ecf3; }
.vma-cols { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; }
.vma-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(18px, 2vw, 34px) clamp(36px, 4vw, 70px); border-left: 1px solid rgba(255,255,255,.45); transition: background .5s ease; }
.vma-col:first-child { border-left: none; }
.vma-col.is-active { background: rgba(28,42,74,.78); }
.vma-num { position: absolute; top: 28px; left: clamp(18px, 2vw, 34px); font-size: .8rem; font-weight: 700; letter-spacing: 3px; color: var(--gold); opacity: 0; transition: opacity .4s; }
.vma-col.is-active .vma-num { opacity: 1; }
.vma-col h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 2.1vw, 2.15rem); line-height: 1.1; color: var(--ivory); }
.vma-col p { font-size: 1rem; font-weight: 400; color: #e3e9f6; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, margin .5s ease; }
.vma-col.is-active p { max-height: 120px; opacity: 1; margin-top: 12px; }
.vma-col .arr { width: 22px; height: 22px; margin-top: 22px; transition: transform .35s, color .35s; }
.vma-col:hover .arr, .vma-col.is-active .arr { transform: translateX(6px); color: var(--gold); }

/* =========================================================================
   6. NOSOTROS
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; }
.about-media { position: relative; aspect-ratio: 9 / 11; }
.about-media > .media { position: absolute; inset: 0; border-radius: 4px 120px 4px 4px; }
.about-badge { position: absolute; z-index: 2; left: -40px; bottom: 50px; background: var(--indigo); color: #fff; padding: 26px 30px; border-radius: 4px; box-shadow: 0 24px 50px rgba(14,21,36,.3); }
/* V1.03: número grande + "+" mediano dorado, alineados arriba */
.about-badge b { display: flex; align-items: flex-start; font-family: var(--font-ui); font-weight: 600; font-size: 3.6rem; line-height: 1; letter-spacing: -1.5px; color: var(--ivory); margin-bottom: 10px; }
.about-badge b sup { font-family: var(--font-ui); font-weight: 500; font-size: .5em; line-height: 1; color: var(--gold); margin-left: 4px; position: relative; top: .1em; }
.about-badge .badge-txt { display: block; font-size: .9rem; color: #d6dbe7; }
/* V1.08: lista de valores — línea superior marcada, número grande Montserrat,
   3 columnas (número · título · texto). El número se vuelve dorado con el mouse. */
.values { margin-top: 44px; display: grid; gap: 0; border-top: 2px solid var(--text-dark); }
.value { display: grid; grid-template-columns: 74px minmax(0,1fr) minmax(0,1.35fr); gap: 0 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line-dark); }
.value > div { display: contents; }

.value i { font-style: normal; font-family: var(--font-ui); font-weight: 500; font-size: 2.1rem; line-height: 1; letter-spacing: -.5px; color: #9aa1b3; transition: color .3s; }
.value:hover i { color: var(--gold); }
.value h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1.05; color: var(--text-dark); }
.value p { font-size: .98rem; line-height: 1.6; color: #565d70; }

/* =========================================================================
   7. CARRUSEL "ÁREAS DE PRÁCTICA"
   Bloque índigo redondeado que nace del borde izquierdo. Las tarjetas se
   pueden arrastrar (mouse o dedo), usar flechas o el teclado.
   Cada tarjeta: imagen 600 × 800.
   ========================================================================= */
.areas { padding: 0 0 120px; }   /* V1.09: sin espacio superior → el hueco con "Nosotros" queda en 120px, igual que entre las demás secciones */
.areas-block {
  position: relative; background: var(--indigo); color: #fff; overflow: hidden;
  margin-right: clamp(16px, 9vw, 320px); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 90px 0 90px;
}
.areas-head { display: grid; grid-template-columns: 70px 1fr auto; gap: 30px; align-items: end; padding-left: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x) - 70px)); padding-right: 60px; }
.areas-label { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.areas-label span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .82rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.areas-label svg { width: 40px; height: 40px; stroke: #fff; fill: none; stroke-width: 1.2; }
.areas-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--title-size); line-height: var(--title-lh); letter-spacing: var(--title-ls); max-width: 760px; color: var(--ivory); }   /* misma medida que .title */
.btn-outline { display: inline-block; margin-top: 26px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 30px; font-size: .74rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; transition: background .3s, color .3s; }
.btn-outline:hover { background: #fff; color: var(--indigo); }
.areas-ctrl { display: flex; align-items: center; gap: 22px; padding-bottom: 6px; }
.bars { display: flex; gap: 8px; }
.bars button { width: 46px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); transition: background .3s, width .3s; }
.bars button.is-active { background: #fff; width: 58px; }
.areas-track {
  display: flex; gap: 18px; margin-top: 70px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  --track-start: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
  padding-left: var(--track-start); scroll-padding-left: var(--track-start); padding-right: 60px; scrollbar-width: none; cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.areas-track::-webkit-scrollbar { display: none; }
.areas-track.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.area-card { position: relative; flex: 0 0 clamp(230px, 18vw, 290px); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; scroll-snap-align: start; user-select: none; -webkit-user-drag: none; }
.area-card .ph-size { font-size: 1.05rem; }
.area-card img { pointer-events: none; transition: transform .8s ease; }
.area-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,21,36,.85) 0%, rgba(14,21,36,.15) 45%, rgba(14,21,36,.35) 100%); transition: background .4s; }
.area-card:hover img { transform: scale(1.06); }
.area-card h3 { position: absolute; z-index: 2; top: 24px; left: 22px; right: 22px; font-size: .88rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; line-height: 1.35; }
.area-go { position: absolute; z-index: 2; left: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-grad); color: var(--gold-text); display: grid; place-items: center; transition: transform .35s; }
.area-go svg { width: 16px; height: 16px; }
.area-card:hover .area-go { transform: rotate(45deg) scale(1.08); }

/* =========================================================================
   8. PROCESO — "Un proceso claro, de principio a fin"  (REDISEÑO V1.04)
   -------------------------------------------------------------------------
   Orden igual que antes (alineado a la izquierda): etiqueta → título → texto.
   Debajo, 4 tarjetas con borde derecho curvo dorado, ícono en círculo con
   brillo, número "01 —", título serif y descripción. Flecha › entre tarjetas.
   Tipografía: etiqueta Montserrat 600 13px · título Cormorant 400 58–64px ·
   texto Lato 400 17–18px · números Cormorant 600 28–30px ·
   títulos de etapa Cormorant 500 30–32px · descripciones Lato 400 16–17px.
   ========================================================================= */
.process { position: relative; overflow: hidden; color: var(--ivory);
  background: radial-gradient(ellipse at 12% 0%, #18264a 0%, transparent 55%), radial-gradient(ellipse at 95% 100%, #15223f 0%, transparent 50%), var(--ink); }
/* V1.11: títulos sobre fondo oscuro con el MISMO estilo que el resto (600); solo cambia el color */
.process .title, .contact .title { color: var(--ivory); }
.process-lead { font-size: clamp(1.08rem, 1.25vw, 1.12rem); line-height: 1.6; color: var(--soft-blue); max-width: 620px; margin-top: 22px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px; margin-top: 100px; }
.step {
  position: relative; padding: 74px 34px 38px 30px;
  background: linear-gradient(160deg, rgba(40,61,104,.38), rgba(14,21,36,.25));
  border: 1px solid rgba(175,195,232,.12); border-right: 1.5px solid rgba(201,154,82,.8);
  border-radius: 20px 38px 38px 20px / 20px 46% 46% 20px;   /* borde derecho con curva suave, como en la referencia */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease, box-shadow .4s ease, border-color .4s ease; transition-delay: var(--d);
}
.steps.is-visible .step { opacity: 1; transform: none; }
.steps.is-visible .step:hover { transition-delay: 0s; transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 50px rgba(0,0,0,.35); border-right-color: var(--gold); }
/* Ícono en círculo dorado con brillo (íconos en el HTML: #i-search, #i-doc, #i-gavel, #i-hands) */
.step-ic {
  position: absolute; top: -40px; left: 22px; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--gold);
  background: radial-gradient(circle at 50% 35%, #26395f 0%, var(--ink) 72%);
  box-shadow: 0 0 0 6px var(--ink), 0 0 28px rgba(201,154,82,.35);
  transition: box-shadow .4s ease, transform .4s ease;
}
.step:hover .step-ic { box-shadow: 0 0 0 6px var(--ink), 0 0 44px rgba(201,154,82,.6); transform: scale(1.05); }
.step-ic svg { width: 36px; height: 36px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Número "01 —" */
.step-n { position: absolute; top: 16px; left: 122px; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; line-height: 1; color: var(--gold); }
.step-n i { width: 28px; height: 1.5px; background: var(--gold); }
.step h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 2.1vw, 2rem); line-height: 1.15; color: var(--ivory); margin-bottom: 12px; }
.step p { font-size: .98rem; line-height: 1.65; color: var(--soft-blue); }
/* Flecha › entre tarjetas */
.step:not(:last-child)::after {
  content: ""; position: absolute; right: -30px; top: 50%; width: 11px; height: 11px;
  border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); transform: translateY(-50%) rotate(45deg);
}
.process .stats-arc.a1 { width: 520px; height: 520px; left: -300px; top: -320px; }
.process .stats-arc.a2 { width: 520px; height: 520px; right: -300px; bottom: -360px; }

/* =========================================================================
   9. EXPERTOS EN CADA CASO (V1.07: reemplaza "Reconocimientos")
   -------------------------------------------------------------------------
   Tarjetas con foto (600 × 800). Abajo, un panel de vidrio índigo
   semitransparente con desenfoque: el texto se lee sobre cualquier foto.
   Al pasar el mouse, la foto hace zoom y el panel muestra detalle y contacto.
   Transparencia del panel: cambia el 0.62 de .member-info.
   ========================================================================= */
.team-sec { background: var(--paper-2); }
.team-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.team-head .lead { margin-top: 0; }
.members { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.member { position: relative; aspect-ratio: 3 / 4.3; border-radius: 18px; overflow: hidden; background: var(--ink); outline-offset: 4px; }
.member .media { position: absolute; inset: 0; }
.member .ph { justify-content: flex-start; padding-top: 22%; }   /* la medida queda visible sobre el panel */
.member .media img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.member:hover .media img, .member:focus-within .media img { transform: scale(1.07); }
/* Degradado inferior suave + panel de vidrio */
.member::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14,21,36,.55) 100%); pointer-events: none; }
.member-info {
  position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px;
  padding: 20px 16px 16px; text-align: center; color: var(--ivory);
  background: rgba(14,21,36,.62); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  transition: background .4s ease;
}
.member:hover .member-info, .member:focus-within .member-info { background: rgba(14,21,36,.8); }
.member-info h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 1.5vw, 1.55rem); line-height: 1.15; }
.member-rule { display: block; width: 34px; height: 1.5px; margin: 10px auto; background: var(--gold); }
.member-role { display: block; font-family: var(--font-ui); font-size: .68rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #D8AE6C; }
.member-area { display: block; font-size: .86rem; color: var(--soft-blue); margin-top: 4px; }
/* Detalle y contacto: aparecen al pasar el mouse */
.member-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
.member:hover .member-more, .member:focus-within .member-more { max-height: 140px; opacity: 1; margin-top: 10px; }
.member-note { font-size: .84rem; line-height: 1.5; color: #dfe6f4; }
.member-contact { display: block; margin-top: 8px; font-size: .78rem; line-height: 1.55; color: var(--soft-blue); overflow-wrap: anywhere; }
.member-links { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.member-links a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); color: #fff; transition: background .3s, border-color .3s, transform .3s; }
.member-links a:hover { background: var(--gold-grad); border-color: transparent; transform: translateY(-2px); }
.member-links svg { width: 14px; height: 14px; fill: currentColor; }
.member-links svg.stroke { fill: none; stroke: currentColor; stroke-width: 1.7; }

/* =========================================================================
   10. ALERTAS LEGALES  (imágenes 800 × 520)
   ========================================================================= */
.alerts-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 54px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; color: var(--indigo); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s; }
.link-arrow:hover svg { transform: translateX(5px); }
.alerts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.alert { background: var(--white); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--line-dark); transition: transform .4s, box-shadow .4s; }
.alert:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(14,21,36,.12); }
.alert .media { aspect-ratio: 8 / 5.2; }
.alert .media img { transition: transform .8s; }
.alert:hover .media img { transform: scale(1.05); }
.alert-body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.alert-meta { display: flex; gap: 12px; align-items: center; font-size: .74rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-dark); }
.alert-meta span:first-child { color: var(--gold); }
.alert h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.65rem; line-height: 1.18; margin: 12px 0 10px; }
.alert p { color: var(--muted-dark); font-size: .93rem; margin-bottom: 22px; }
.alert .link-arrow { margin-top: auto; }

/* =========================================================================
   11. CONTACTO + FORMULARIO (fondo índigo)
   ========================================================================= */
.contact { background: var(--indigo); color: var(--text-light); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.contact-info .lead { color: var(--soft-blue); }
.contact-info dl { display: grid; gap: 20px; margin-top: 40px; }
.contact-info dt { font-size: .72rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.contact-info dd { font-size: 1.05rem; }
.contact-info dd a:hover { color: var(--gold); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: rgba(255,255,255,.04); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 44px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-light); }
.field input, .field select, .field textarea { font: inherit; color: var(--text-light); background: transparent; border: none; border-bottom: 1px solid rgba(238,240,245,.25); padding: 10px 0; transition: border-color .3s; }
.field select option { color: var(--text-dark); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field textarea { resize: vertical; min-height: 90px; }
.form .btn { justify-self: start; }
.form .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.form-msg { grid-column: 1 / -1; color: #9fdcb0; font-size: .9rem; min-height: 1.2em; }
.form-msg.error { color: #f0a493; }
.form-legal { grid-column: 1 / -1; font-size: .72rem; color: var(--muted-light); }
.form-legal a { text-decoration: underline; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   12. PIE DE PÁGINA (tarjeta completa con muesca)
   -------------------------------------------------------------------------
   V1.02: misma tarjeta; se mejoró la tipografía y el orden:
     logo → "ESTUDIO JURÍDICO" grande con degradado → texto → redes
     4 columnas con títulos en negrita y enlaces con » (sin línea en la 1ª)
   ========================================================================= */
.site-footer { --footer-gap: 12px; background: var(--paper); padding: 30px var(--footer-gap) var(--footer-gap); }
.footer-card { position: relative; width: 100%; background: var(--ink); color: var(--text-light); border-radius: 32px; padding: 96px clamp(28px, 5vw, 96px) 36px; }
.footer-card::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 220px; height: 36px; background: var(--paper); border-radius: 0 0 34px 34px; }
.footer-main { display: grid; grid-template-columns: minmax(360px, 500px) 1fr; gap: clamp(60px, 6vw, 120px); align-items: start; }

/* Logo del pie: img/logo-gojo-footer.png (312 × 71, blanco) */
.footer-logo { position: relative; display: block; width: 312px; aspect-ratio: 312 / 71; max-width: 100%; }
.footer-logo .ph { position: absolute; inset: 0; gap: 2px; border-radius: 2px; }
.footer-logo img { position: relative; display: block; width: 100%; height: auto; }
/* "ESTUDIO JURÍDICO": texto grande con degradado (cambia los 2 colores aquí) */
.footer-claim {
  --textgradient_color1: #FFFFFF;
  --textgradient_color2: #a07448;   /* V1.12: de blanco a bronce */
  font-family: var(--font-ui);     /* Montserrat (V1.04). Para la serif de la marca: var(--font-display) */
  font-size: clamp(44px, 4.6vw, 70px); font-weight: 500; text-transform: uppercase;
  line-height: 1.06em;             /* 1.06 (no 1): evita que la tilde de la Í choque con la línea de arriba */
  letter-spacing: 0em; margin: 34px 0 22px;
  background: linear-gradient(90deg, var(--textgradient_color1) 0%, var(--textgradient_color2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-brand p { font-size: 1rem; line-height: 1.7; color: #c9cfdc; max-width: 460px; }
.footer-social { display: flex; gap: 10px; margin-top: 30px; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-light); transition: background .3s, border-color .3s, color .3s, transform .3s; }
.footer-social a:hover { background: var(--gold-grad); border-color: transparent; color: var(--gold-text); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* Columnas */
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1.6fr 1.1fr; padding-top: 8px; }
.footer-col { padding: 6px 24px 6px 30px; border-left: 1px solid var(--line-light); }
.footer-col:first-child { border-left: none; padding-left: 0; }   /* la 1ª columna sin línea */
.footer-col h4 { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 24px; }
.footer-col li { margin-bottom: 14px; }
/* Cada enlace: flecha » + texto (el texto va en <span> para que no se parta raro) */
.footer-col a { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; font-weight: 500; color: #d3d8e4; transition: color .3s; }
.footer-col a::before { content: "»"; flex-shrink: 0; color: var(--gold); font-weight: 700; font-size: 1.05rem; line-height: 1; transition: transform .3s; }
.footer-col a span { white-space: nowrap; }
.footer-col a:hover { color: #fff; }
.footer-col a:hover::before { transform: translateX(4px); }
.footer-col li > span { font-size: .95rem; font-weight: 500; color: var(--muted-light); }
/* V1.07: columnas Contacto y Horario con íconos en vez de » */
.footer-col.has-icons a::before { content: none; }
.footer-col.has-icons a, .footer-col .fi-row { display: flex; align-items: center; gap: 12px; }
.fi { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Línea final */
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px; margin-top: 80px; padding: 26px 64px 0; border-top: 1px solid var(--line-light); font-size: .8rem; color: var(--muted-light); }
.footer-bottom b { color: var(--text-light); font-weight: 600; }
.footer-bottom { align-items: center; }
.footer-bottom .sep { margin: 0 8px; color: rgba(238,240,245,.35); }
.footer-bottom .footer-social { margin-top: 0; }
.footer-bottom a { color: var(--gold); font-weight: 600; }
.footer-bottom a:hover { text-decoration: underline; }

/* =========================================================================
   13. WHATSAPP (izquierda) Y "VOLVER ARRIBA" (derecha)
   ========================================================================= */
.wa-float { position: fixed; left: 24px; bottom: 24px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .3s; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-ring 2.4s ease-out infinite; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes wa-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
/* VOLVER ARRIBA (V1.16)
   - Fondo: degradado índigo → dorado → bronce que se desplaza en ciclo
     (--totop-1/2/3 = colores · --totop-speed = duración del ciclo).
   - Anillo marfil que se llena según lo que llevas de scroll.
   - Flecha gruesa (stroke-width) que sube un poco al pasar el mouse. */
.to-top {
  --totop-1: #1c2a4a; --totop-2: #D8AE6C; --totop-3: #9e7247; --totop-speed: 4s;
  position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(65deg, var(--totop-1), var(--totop-2), var(--totop-3), var(--totop-1));
  background-size: 300% 300%; animation: totop-grad var(--totop-speed) ease infinite;
  box-shadow: 0 6px 18px rgba(14,21,36,.35);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .4s, visibility .4s, transform .4s, box-shadow .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { --totop-speed: 1.6s; box-shadow: 0 8px 24px rgba(160,116,72,.45); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.to-top .arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.to-top:hover .arrow { transform: translateY(-3px); }
.to-top .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .ring circle { fill: none; stroke-width: 3; }
.to-top .ring .track { stroke: rgba(255,255,255,.18); }
.to-top .ring .bar { stroke: var(--ivory); stroke-dasharray: 145; stroke-dashoffset: 145; transition: stroke-dashoffset .15s linear; }
@keyframes totop-grad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .to-top { animation: none; } }

/* =========================================================================
   14. PÁGINA INTERIOR — ficha de área de práctica
   ========================================================================= */
.page-hero { position: relative; min-height: 620px; display: flex; align-items: flex-end; color: #fff; background: var(--ink); overflow: hidden; }
.page-hero .media { position: absolute; inset: 0; }
.page-hero .media > * { animation: hero-zoom 14s ease-out both; }
@keyframes hero-zoom { from { transform: scale(1.15); } to { transform: scale(1); } }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,21,36,.92), rgba(14,21,36,.5) 60%, rgba(14,21,36,.3)), linear-gradient(0deg, rgba(14,21,36,.8), transparent 50%); }
.page-hero .container { position: relative; z-index: 2; padding-top: 160px; padding-bottom: 70px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted-light); margin-bottom: 26px; }
.crumbs a:hover { color: var(--gold); }
.crumbs span[aria-current] { color: #fff; }
.page-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 6.4vw, 5.6rem); line-height: 1.02; color: var(--ivory); }
.page-hero p.lead { color: var(--soft-blue); max-width: 620px; }
.page-hero .hero-actions { margin-top: 34px; }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 50px; border-top: 1px solid var(--line-light); }
.fact { padding: 22px 40px 0 0; margin-right: 40px; border-right: 1px solid var(--line-light); }
.fact:last-child { border-right: none; }
.fact small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); }
.fact b { font-weight: 600; }

/* Sub-navegación fija que marca la sección actual */
.subnav { position: sticky; top: var(--header-h); z-index: 50; background: rgba(244,241,234,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-dark); }
.subnav ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { position: relative; display: block; padding: 18px 16px; font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-dark); white-space: nowrap; transition: color .3s; }
.subnav a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .35s; }
.subnav a:hover, .subnav a.is-current { color: var(--indigo); }
.subnav a.is-current::after { transform: scaleX(1); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: start; }
.detail-grid > aside { align-self: stretch; }   /* necesario para que la tarjeta lateral quede fija al bajar */
.detail-main > section { padding: 90px 0 0; }
.detail-main > section:first-child { padding-top: 80px; }
.detail-text p { color: var(--muted-dark); margin-top: 18px; }
.detail-figure { position: relative; aspect-ratio: 3 / 2; border-radius: 18px; margin-top: 40px; }
.quote { margin-top: 40px; padding: 30px 34px; border-left: 3px solid var(--gold); background: var(--white); border-radius: 0 14px 14px 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; font-style: italic; line-height: 1.35; }
.quote cite { display: block; margin-top: 14px; font-family: var(--font-body); font-style: normal; font-size: .85rem; color: var(--muted-dark); }

.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.svc { display: flex; gap: 18px; padding: 24px; background: var(--white); border: 1px solid var(--line-dark); border-radius: 16px; transition: border-color .3s, transform .3s, box-shadow .3s; }
.svc:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,21,36,.08); }
.svc svg { width: 38px; height: 38px; flex-shrink: 0; }
.svc h3 { font-size: .98rem; font-weight: 600; margin-bottom: 6px; }
.svc p { color: var(--muted-dark); font-size: .9rem; }

.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.case { padding: 30px 26px; border-radius: 16px; background: var(--indigo); color: #fff; display: flex; flex-direction: column; gap: 14px; transition: transform .3s; }
.case:hover { transform: translateY(-4px); }
.case b { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 2.3vw, 2.6rem); line-height: 1; color: var(--gold); white-space: nowrap; }
.case span { font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-light); }
.case p { font-size: 1rem; color: var(--soft-blue); }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.lawyer { position: relative; }
.lawyer .media { aspect-ratio: 4 / 5; border-radius: 16px; }
.lawyer .media img { transition: transform .8s; }
.lawyer:hover .media img { transform: scale(1.05); }
.lawyer-links { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: flex; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.lawyer:hover .lawyer-links, .lawyer:focus-within .lawyer-links { opacity: 1; transform: none; }
.lawyer-links a { width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--indigo); display: grid; place-items: center; transition: background .3s, color .3s; }
.lawyer-links a:hover { background: var(--gold-grad); color: var(--gold-text); }
.lawyer-links svg { width: 16px; height: 16px; }
.lawyer h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; line-height: 1.2; margin-top: 16px; }
.lawyer p { font-size: .85rem; color: var(--muted-dark); }

/* PREGUNTAS FRECUENTES (V1.12): tarjetas blancas con relleno, pensadas
   para lectura cómoda (contraste alto, letra 16–17px, área de clic amplia).
   El ícono +/− se dibuja con 2 líneas CSS → siempre queda centrado. */
.faq { margin-top: 34px; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line-dark); border-radius: 14px; box-shadow: 0 1px 2px rgba(14,21,36,.04); transition: border-color .3s, box-shadow .3s; }
.faq details:hover { border-color: rgba(201,154,82,.55); }
.faq details[open] { border-color: var(--gold); box-shadow: 0 14px 34px rgba(14,21,36,.08); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; font-family: var(--font-ui); font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--text-dark); cursor: pointer; list-style: none; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: -3px; }
.faq-ic { position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-dark); transition: background .3s, border-color .3s, transform .35s; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--gold); transform: translate(-50%, -50%); transition: transform .35s, background .3s; }
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] .faq-ic { background: var(--indigo); border-color: var(--indigo); }
.faq details[open] .faq-ic::before, .faq details[open] .faq-ic::after { background: #fff; }
.faq details[open] .faq-ic::after { transform: translate(-50%, -50%) rotate(0deg); }   /* + se convierte en − */
.faq-a { padding: 0 26px 24px; }
.faq-a p { margin: 0; padding-top: 16px; border-top: 1px solid var(--line-dark); font-size: 1.02rem; line-height: 1.75; color: #3f4658; animation: faq-in .4s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Tarjeta lateral fija */
.aside-card { position: sticky; top: calc(var(--header-h) + 90px); margin-top: 80px; background: var(--ink); color: var(--text-light); border-radius: 22px; padding: 32px; overflow: hidden; }
.aside-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(201,154,82,.35), transparent 70%); }
.aside-card h3 { position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; line-height: 1.15; color: var(--ivory); }
.aside-person { display: flex; gap: 14px; align-items: center; margin: 24px 0; padding: 18px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.aside-person .media { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.aside-person .ph-size { font-size: .62rem; } .aside-person .ph-label { display: none; }
.aside-person b { display: block; }
.aside-person small { color: var(--muted-light); }
.aside-list { display: grid; gap: 10px; margin-bottom: 26px; font-size: .92rem; }
.aside-list a { display: flex; gap: 10px; align-items: center; color: var(--muted-light); transition: color .3s; overflow-wrap: anywhere; }
.aside-list a:hover { color: var(--gold); }
.aside-list svg { width: 16px; height: 16px; flex-shrink: 0; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.aside-card .btn { width: 100%; justify-content: center; }

/* CUÁNDO NOS NECESITAS (V1.12) */
.sit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.sit { position: relative; padding: 28px 26px 26px; background: var(--white); border: 1px solid var(--line-dark); border-radius: 16px; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.sit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-grad); transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.sit:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,21,36,.08); border-color: transparent; }
.sit:hover::before { transform: scaleY(1); }
.sit-n { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 1.5rem; line-height: 1; color: #9aa1b3; margin-bottom: 16px; transition: color .3s; }
.sit:hover .sit-n { color: var(--gold); }
.sit h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; line-height: 1.15; margin-bottom: 8px; }
.sit p { color: #565d70; font-size: .98rem; }
.cases-note { margin-top: 14px; font-size: .8rem; color: var(--muted-dark); }
.members-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.other-areas { padding: 100px 0 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips a { padding: 11px 20px; border: 1px solid var(--line-dark); border-radius: 40px; font-weight: 600; font-size: .9rem; transition: background .3s, color .3s, border-color .3s; }
.chips a:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* LLAMADA FINAL ANCHA (V1.12): mismo ancho que el footer, texto a la
   izquierda e imagen a la derecha que se funde con el fondo índigo.
   Imagen: img/cta-reunion.jpg (900 × 720). */
.cta-wide { padding: 90px 12px 0; }
.cta-card { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; min-height: 480px; background: var(--indigo); color: var(--ivory); border-radius: 32px; overflow: hidden; }
.cta-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 70px clamp(28px, 6vw, 110px); }
.cta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.cta-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid rgba(242,240,242,.22); border-radius: 30px; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .5px; color: #e9e4d6; background: rgba(255,255,255,.04); }
.cta-pills svg { width: 14px; height: 14px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cta-body h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--title-size); line-height: var(--title-lh); letter-spacing: var(--title-ls); color: var(--ivory); max-width: 640px; }
.cta-body h2 em { color: var(--gold); font-weight: 500; }
.cta-body p { margin-top: 18px; max-width: 520px; font-size: 1.08rem; line-height: 1.6; color: var(--soft-blue); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.cta-note { display: block; margin-top: 16px; font-size: .85rem; color: var(--soft-blue); }
.cta-note b { color: var(--ivory); }
.cta-media { position: relative; }
.cta-media > .ph { position: absolute; inset: 0; }
.cta-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--indigo) 0%, rgba(28,42,74,.55) 30%, rgba(28,42,74,0) 65%); pointer-events: none; }
.cta-card::before { content: ""; position: absolute; z-index: 1; left: -120px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(201,154,82,.3); pointer-events: none; }
.cta-band { margin: 80px 0 0; }
.cta-band .inner { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 60px clamp(28px, 5vw, 70px); background: var(--indigo); color: #fff; border-radius: var(--radius); }
.cta-band .inner::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(201,154,82,.35); }
.cta-band h2 { position: relative; font-family: var(--font-display); font-weight: 600; font-size: var(--title-size); line-height: var(--title-lh); letter-spacing: var(--title-ls); color: var(--ivory); }
.cta-band h2 em { color: var(--gold); font-weight: 500; }

/* =========================================================================
   F. RESPONSIVE
   ========================================================================= */
@media (max-width: 1500px) {
  .logo { width: 270px; }
}
@media (max-width: 1360px) and (min-width: 1181px) {
  /* Pantallas medianas: logo y separaciones algo menores para que el menú quepa en una línea */
  .logo { width: 220px; }
  .hdr { gap: 18px; }
  .hdr-right { gap: 14px; }
  .header-cta { padding: 13px 20px; }
}
@media (max-width: 1500px) {
  .footer-main { grid-template-columns: 1fr; gap: 64px; }
  .footer-brand { max-width: 620px; }
}
@media (max-width: 1180px) {
  /* Menú hamburguesa: el menú y el mega menú pasan a un panel desplegable */
  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .main-nav { position: fixed; inset: var(--header-h) 0 0 0; display: block; background: var(--ink); overflow-y: auto; padding: 16px 16px 120px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .3s, visibility .3s; }
  .menu-open .main-nav { opacity: 1; visibility: visible; transform: none; }
  /* sin desenfoque al abrir: el desenfoque haría que el panel quedara atrapado dentro de la cabecera */
  .site-header.menu-open { backdrop-filter: none; background: var(--ink); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line-light); }
  .nav-list > li > a, .nav-trigger { width: 100%; justify-content: space-between; padding: 18px 8px; font-size: .9rem; }
  .nav-list > li > a::after, .nav-trigger::after { display: none; }
  .mm { position: static; display: none; margin: 0 0 16px; opacity: 1; visibility: visible; transform: none; box-shadow: none; max-height: none; }
  .has-mega.open .mm { display: block; }
  .detail-grid { grid-template-columns: 1fr; gap: 0; }
  .aside-card { position: relative; top: 0; margin-top: 70px; }
  .about-grid { gap: 60px; }
}
@media (max-width: 1180px) {
  .members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cta-card { grid-template-columns: 1fr; }
  .cta-media { min-height: 260px; order: -1; }
  .cta-media::after { background: linear-gradient(0deg, var(--indigo) 0%, rgba(28,42,74,0) 70%); }
  .members-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-head { grid-template-columns: 1fr; gap: 20px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 46px; }
  .footer-col:nth-child(odd) { border-left: none; padding-left: 0; }   /* sin línea al inicio de cada fila */
  .footer-col a span { white-space: normal; overflow-wrap: anywhere; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; row-gap: 50px; }
  .stat:nth-child(3) { padding-left: 0; }
  .stat:nth-child(3)::before, .stat:nth-child(3)::after { display: none; }
  .stats-pillar { opacity: .08; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 560px; }
  .about-badge { left: 20px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 90px; }
  .step:nth-child(2n)::after { display: none; }
  .alerts-grid, .cases { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .areas-head { grid-template-columns: 50px 1fr; padding-right: 30px; }
  .areas-ctrl { grid-column: 2; }
  /* Bloque de 4 paneles: pasan a filas apiladas */
  .vma { height: auto; }
  .vma-title { position: relative; top: 0; left: 0; padding: 70px var(--pad-x) 40px; }
  .vma-cols { grid-template-columns: 1fr; height: auto; }
  .vma-col { border-left: none; border-top: 1px solid rgba(255,255,255,.35); padding: 26px var(--pad-x); min-height: 96px; }
  .vma-num { top: 26px; left: auto; right: var(--pad-x); }
  .vma-col .arr { position: absolute; right: var(--pad-x); bottom: 26px; margin: 0; }
  .cta-band .inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .value { grid-template-columns: 56px 1fr; }
  .value p { grid-column: 2; margin-top: 8px; }
  .value i { font-size: 1.7rem; }
}
@media (max-width: 640px) {
  :root { --pad-x: 22px; --header-h: 76px; }
  /* Equipo en móvil: carrusel deslizable con el dedo */
  .members { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .members::-webkit-scrollbar { display: none; }
  .member { scroll-snap-align: start; }
  .member-more { max-height: 140px; opacity: 1; margin-top: 10px; }   /* en móvil el detalle siempre visible */
  .footer-bottom > span { line-height: 1.8; }
  .sit-grid { grid-template-columns: 1fr; }
  .members-3 { grid-template-columns: none; }
  .cta-wide { padding: 60px 8px 0; }
  .cta-card { border-radius: 24px; }
  .cta-body { padding: 44px 22px; }
  .faq summary { padding: 18px 18px; font-size: .98rem; }
  .faq-a { padding: 0 18px 20px; }
  .section, .areas { padding: 80px 0; }
  .logo { width: 190px; }
  .lang a { padding: 5px 10px; }
  .hdr-right { gap: 10px; }
  .hero-progress { display: none; }
  .hero-controls .container { justify-content: flex-end; }
  .stats-grid, .steps, .alerts-grid, .cases, .svc-grid { grid-template-columns: 1fr; }
  .steps { row-gap: 80px; margin-top: 80px; }
  .step { border-radius: 20px 30px 30px 20px / 20px 46% 46% 20px; }
  .step:not(:last-child)::after, .step:nth-child(2n)::after { display: block; right: auto; left: 50%; top: auto; bottom: -46px; transform: rotate(135deg); }   /* flecha hacia abajo */
  .stat { padding-left: 0; }
  .stat::before, .stat::after { display: none; }
  .stats-pillar { display: none; }
  .alerts-head { flex-direction: column; align-items: flex-start; }
  .form { grid-template-columns: 1fr; padding: 28px 22px; }
  .areas-block { margin-right: 10px; padding: 64px 0; }
  .areas-head { grid-template-columns: 1fr; padding: 0 22px; }
  .areas-label { flex-direction: row; } .areas-label span { writing-mode: initial; transform: none; }
  .areas-ctrl { grid-column: 1; }
  .bars button { width: 26px; } .bars button.is-active { width: 36px; }
  .areas-track { --track-start: 22px; margin-top: 44px; }
  .team { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lawyer-links { opacity: 1; transform: none; }
  .fact { padding-right: 20px; margin-right: 20px; }
  .site-footer { --footer-gap: 8px; padding-top: 20px; }
  .footer-card { border-radius: 24px; padding: 70px 22px 84px; }
  .footer-card::before { width: 140px; height: 26px; border-radius: 0 0 24px 24px; }
  .footer-cols { grid-template-columns: 1fr; row-gap: 38px; }
  .footer-col { border-left: none; padding-left: 0; }
  .footer-bottom { flex-direction: column; margin-top: 50px; padding: 24px 0 0; }
  .wa-float { left: 16px; bottom: 16px; width: 52px; height: 52px; }
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation: none !important; scroll-behavior: auto !important; }
  .step { opacity: 1 !important; transform: none !important; }
  .js .mm .mm-item, .js .mm .mm-res, .js .mm .mm-tile, .js .mm .mm-card h4, .js .mm .mm-card p, .js .mm .mm-banner > * { opacity: 1 !important; transform: none !important; }
}