/* ============================================================
   Estudio Flint Abogados — hoja de estilos principal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-950:#081527;
  --navy-900:#0c2038;
  --navy-800:#123159;
  --navy-700:#1a3f70;
  --gold-600:#a9793f;
  --gold-500:#bd9257;
  --gold-400:#d1ac74;
  --gold-100:#f3e8d6;
  --cream-50:#f8f6f1;
  --cream-100:#f1ede3;
  --white:#ffffff;
  --ink-900:#1b2430;
  --ink-700:#38414d;
  --ink-600:#5b6472;
  --ink-400:#8993a1;
  --border:#e3dccd;
  --border-dark:#233752;
  --shadow-sm:0 1px 3px rgba(8,21,39,.08);
  --shadow-md:0 8px 24px rgba(8,21,39,.10);
  --shadow-lg:0 20px 50px rgba(8,21,39,.16);
  --radius:10px;
  --container:1180px;
  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink-900);
  background:var(--cream-50);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-serif);
  color:var(--navy-950);
  line-height:1.2;
  margin:0 0 .5em;
  font-weight:600;
}
p{ margin:0 0 1em; }
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.bg-cream{ background:var(--cream-100); }
.bg-navy{ background:var(--navy-950); color:var(--cream-50); }
.bg-navy h2, .bg-navy h3{ color:var(--white); }
.bg-navy .muted{ color:var(--cream-100); opacity:.82; }

/* --- Etiquetas / eyebrow --- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-600);
  margin-bottom:14px;
}
.bg-navy .eyebrow{ color:var(--gold-400); }
/* Eyebrow del hero de Inicio: mismo tipo serif que el titular, en blanco */
.hero-photo .eyebrow{
  font-family:var(--font-serif);
  color:var(--white);
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:.02em;
  text-transform:none;
  margin-bottom:36px;
}

/* --- Botones --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:6px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
  white-space:nowrap;
}
.btn-gold{ background:var(--gold-500); color:var(--navy-950); }
.btn-gold:hover{ background:var(--gold-400); transform:translateY(-1px); }
.btn-outline{ border-color:rgba(255,255,255,.4); color:var(--white); }
.btn-outline:hover{ border-color:var(--gold-400); color:var(--gold-400); }
.btn-navy{ background:var(--navy-950); color:var(--white); }
.btn-navy:hover{ background:var(--navy-800); }
.btn-ghost{ border-color:var(--border-dark); color:var(--navy-950); }
.btn-ghost:hover{ border-color:var(--gold-500); color:var(--gold-600); }
.btn-sm{ padding:10px 18px; font-size:.85rem; }

/* ============================================================
   HEADER
   ============================================================ */
#site-header{ position:sticky; top:0; z-index:100; }
.topbar{
  background:var(--navy-950);
  border-bottom:1px solid var(--border-dark);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  max-width:var(--container);
  margin:0 auto;
  min-height:96px;
  padding-top:8px;
  padding-bottom:8px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-left:-22px; }
.brand img{ height:76px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a.nav-link{
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 16px;
  font-size:.92rem;
  font-weight:500;
  color:var(--cream-50);
  border-radius:6px;
  transition:color .2s ease, background .2s ease;
}
.main-nav a.nav-link:hover,
.main-nav li.active > a.nav-link{ color:var(--gold-400); }
.nav-item{ position:relative; }
.nav-caret{ width:9px; height:9px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.7; }

.dropdown{
  position:absolute;
  top:100%; left:0;
  min-width:250px;
  background:var(--white);
  border-radius:8px;
  box-shadow:var(--shadow-lg);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item:hover .dropdown,
.nav-item.open .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{
  display:block;
  padding:10px 14px;
  border-radius:6px;
  font-size:.88rem;
  color:var(--ink-700);
  font-weight:500;
}
.dropdown a:hover{ background:var(--cream-100); color:var(--navy-950); }

.header-actions{ display:flex; align-items:center; gap:18px; }
.header-actions .tel{ color:var(--cream-50); font-size:.85rem; }
.header-actions .tel strong{ display:block; color:var(--white); font-size:.95rem; }
/* "Agendar una cita" del header: corrido hacia el borde derecho */
@media (min-width:1240px){
  .header-actions .btn-gold{
    margin-left:22px;
    margin-right:calc((100vw - var(--container)) / -2 + 24px);
  }
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.hamburger span{ width:24px; height:2px; background:var(--white); display:block; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(189,146,87,.16), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color:var(--white);
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:-6%; top:-18%;
  width:620px; height:620px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(189,146,87,.14) 49%, rgba(189,146,87,.14) 51%, transparent 52%),
    linear-gradient(135deg, transparent 58%, rgba(255,255,255,.05) 59%, rgba(255,255,255,.05) 61%, transparent 62%);
  transform:rotate(12deg);
  pointer-events:none;
}

/* Hero de Inicio: fotos reales del estudio que rotan de fondo */
.hero-photo{
  padding-top:0;
  min-height:82vh;
  background:linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}
.hero-photo::after{ display:none; }
/* Capa de oscurecido sobre las fotos para mantener legible el texto */
.hero-photo::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(100deg, rgb(8,21,39) 0%, rgb(8,21,39) 30%, rgba(8,21,39,.80) 40%, rgba(8,21,39,.45) 66%, rgba(8,21,39,.16) 100%);
  pointer-events:none;
}
.hero-slideshow{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-position:right 45%;
  background-size:auto 162%;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
}
.hero-slide.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}
/* Botón pausa/play del carrusel del hero */
.slideshow-toggle{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:3;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(8,21,39,.5);
  color:var(--white);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.slideshow-toggle:hover{ background:rgba(8,21,39,.78); border-color:var(--gold-400); }
.slideshow-toggle svg{ width:18px; height:18px; fill:currentColor; }
.slideshow-toggle .icon-play{ display:none; }
.slideshow-toggle.is-paused .icon-pause{ display:none; }
.slideshow-toggle.is-paused .icon-play{ display:block; }
.hero-inner{
  position:relative;
  z-index:2;
  padding:120px 0 76px;
}
/* Logo dentro del hero de Inicio (reemplaza al del header en la portada) */
.hero-photo .hero-inner{ padding-top:110px; }
.hero-logo{ display:block; width:fit-content; max-width:100%; margin-bottom:16px; }
.hero-logo img{ height:200px; max-width:100%; width:auto; display:block; }
/* .hero-logo es solo un placeholder que reserva el espacio: no se ve */
.hero-photo .hero-logo{ visibility:hidden; }
/* El logo visible es este elemento fijo, que JS encoge/ancla con el scroll */
.hero-logo-float{
  position:fixed;
  top:0;
  left:0;
  z-index:180;
  display:block;
  transform-origin:top left;
  will-change:transform;
  opacity:0;
  transition:opacity .25s ease;
}
.hero-logo-float.is-ready{ opacity:1; }
.hero-logo-float img{ height:200px; width:auto; display:block; }
/* En la portada, el logo vive en el hero: se oculta el del header pero
   se mantiene su espacio para que el menú y los botones queden en la
   misma posición que en el resto de páginas. */
body[data-page="inicio"] .brand{ visibility:hidden; }
.hero-page{ padding:0; }
.hero.hero-page .hero-inner{ padding:52px 0 48px; }
.hero.hero-page h1{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); }
.hero h1{ color:var(--white); font-size:clamp(2.1rem, 4.2vw, 3.4rem); max-width:820px; }
.hero-photo h1{ font-family:var(--font-sans); font-weight:400; color:var(--ink-400); font-size:19px; max-width:560px; }
.hero .lead{ font-size:1.1rem; color:var(--cream-100); max-width:640px; opacity:.9; }
.breadcrumb{ font-size:.85rem; color:var(--gold-400); margin-bottom:18px; }
.breadcrumb a{ color:var(--cream-100); }
.breadcrumb a:hover{ color:var(--gold-400); }
.hero-actions{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* ============================================================
   GRIDS / CARDS
   ============================================================ */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card a.more{ font-size:.83rem; font-weight:600; color:var(--gold-600); display:inline-flex; align-items:center; gap:6px; margin-top:14px; }
.card a.more:hover{ color:var(--gold-500); }

/* Bloque "El grupo" (Flint Group) */
.fg-cards{ gap:44px; }
.fg-card{ display:flex; flex-direction:column; }
.fg-card p.muted{ flex:1; }
.fg-card h3{ font-size:1.1rem; }
.fg-logo{ display:flex; align-items:center; justify-content:center; }
.fg-logo img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }
.fg-card a.more{
  font-size:.85rem; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
}

/* Variante con tarjetas (Nosotros) */
.card.fg-card{ overflow:hidden; }
.card.fg-card .fg-logo{
  height:190px;
  margin:-30px -30px 26px;
  padding:26px 30px;
  background:var(--navy-950);
}
.card.fg-card .fg-logo img[src$="flint-consulting-group.png"]{ max-height:none; height:210px; }
.card.fg-card a.more{ color:var(--gold-600); }
.card.fg-card a.more:hover{ color:var(--gold-500); }

/* Variante sin tarjetas, sobre fondo navy (Inicio) */
.bg-navy .fg-card h3{ color:var(--white); }
.bg-navy .fg-card p.muted{ color:var(--cream-100); opacity:.82; }
.bg-navy .fg-logo{
  height:180px;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.bg-navy .fg-logo img[src$="flint-consulting-group.png"]{ max-height:none; height:210px; }
.bg-navy .fg-card a.more{ color:var(--gold-400); }
.bg-navy .fg-card a.more:hover{ color:var(--gold-100); }

.practice-card{ position:relative; }
.practice-card .icon{
  width:52px; height:52px;
  border-radius:10px;
  background:var(--navy-950);
  color:var(--gold-400);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.practice-card .icon svg{ width:26px; height:26px; }
.practice-card h3{ font-size:1.12rem; margin-bottom:.4em; }
.practice-card p{ color:var(--ink-600); font-size:.93rem; margin-bottom:0; }
.practice-card a.more{ font-size:.83rem; font-weight:600; color:var(--gold-600); display:inline-flex; align-items:center; gap:6px; margin-top:14px; }

/* Equipo */
.team-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.team-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.team-card .photo{
  aspect-ratio:1/1;
  background:var(--cream-100);
  overflow:hidden;
}
.team-card .photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.team-card .body{ padding:20px 22px 24px; }
.team-card .role{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:6px;
}
.team-card h3{ font-size:1.08rem; margin-bottom:8px; }
.team-card p{ font-size:.87rem; color:var(--ink-600); margin-bottom:14px; }
.team-card a.more{ font-size:.83rem; font-weight:600; color:var(--navy-950); display:inline-flex; align-items:center; gap:6px; }
.team-card a.more:hover{ color:var(--gold-600); }

.avatar-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--navy-900),var(--navy-800));
  color:var(--gold-400);
  font-family:var(--font-serif);
  font-size:2.4rem;
}

/* Valores / iconos simples */
.value-item{ display:flex; gap:16px; align-items:flex-start; }
.value-item .icon{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--gold-100); color:var(--gold-600);
  display:flex; align-items:center; justify-content:center;
}
.value-item .icon svg{ width:22px; height:22px; }
.value-item h4{ font-size:1.02rem; margin-bottom:.3em; }
.value-item p{ font-size:.92rem; color:var(--ink-600); margin-bottom:0; }
.value-list--lg .value-item h4{ font-size:1.2rem; }
.value-list--lg .value-item p{ font-size:1.02rem; }
/* Columna de valores del Inicio, sangrada respecto al texto en escritorio */
.home-values{ padding-left:128px; }

/* Bio (fichas individuales) */
.bio-layout{ display:grid; grid-template-columns:300px 1fr; gap:48px; align-items:start; }
.bio-photo{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  aspect-ratio:4/5;
  background:var(--cream-100);
}
.bio-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.bio-contact-card{
  margin-top:22px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
}
.bio-contact-card h4{ font-size:.95rem; margin-bottom:12px; }
.bio-contact-card a{ display:block; font-size:.9rem; color:var(--ink-700); margin-bottom:8px; overflow-wrap:anywhere; }
.bio-contact-card a:hover{ color:var(--gold-600); }
.bio-block h3{ font-size:1.15rem; margin:1.6em 0 .5em; }
.bio-block h3:first-child{ margin-top:0; }
.bio-block p{ color:var(--ink-700); }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 0; }
.tag-list li{
  background:var(--cream-100); border:1px solid var(--border);
  padding:6px 12px; border-radius:20px; font-size:.8rem; color:var(--ink-700);
}

/* Listado servicios detallado (ancla) */
.service-block{ padding:36px 0; border-bottom:1px solid var(--border); }
.service-block:last-child{ border-bottom:none; }
.service-block h3{ font-size:1.25rem; }
.service-block p{ color:var(--ink-700); }

/* Tabla / red internacional */
.country-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px;
}
.country-card h3{ font-size:1rem; display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.country-card .contact{ font-size:.88rem; color:var(--ink-700); margin-bottom:10px; }
.country-card .contact strong{ display:block; color:var(--navy-950); font-size:.9rem; }
.country-card .contact a{ color:var(--gold-600); }
.country-card .contact a:hover{ text-decoration:underline; }

/* CTA banda */
.cta-band{
  background:linear-gradient(135deg,var(--navy-950),var(--navy-800));
  color:var(--white);
  border-radius:16px;
  padding:56px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap:wrap;
}
.cta-band h2{ color:var(--white); margin-bottom:.2em; font-size:1.7rem; }
.cta-band p{ color:var(--cream-100); opacity:.85; margin-bottom:0; }

/* Formulario contacto */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-grid .full{ grid-column:1 / -1; }
label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--ink-700); }
input,textarea,select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:6px;
  font-family:var(--font-sans);
  font-size:.95rem;
  background:var(--white);
  color:var(--ink-900);
}
input:focus,textarea:focus,select:focus{ outline:2px solid var(--gold-400); border-color:var(--gold-400); }
textarea{ resize:vertical; min-height:130px; }
input[type="checkbox"],input[type="radio"]{ width:auto; padding:0; margin:0; accent-color:var(--gold-600); }
.radio-group{ display:flex; gap:26px; flex-wrap:wrap; }
.opt{ display:flex; align-items:center; gap:8px; }
.opt label{ margin:0; font-weight:400; font-size:.92rem; color:var(--ink-900); }
.form-note{ font-size:.85rem; color:var(--ink-600); background:var(--cream-100); border:1px solid var(--border); border-radius:6px; padding:12px 14px; }
.form-consent{ font-size:.9rem; color:var(--ink-700); margin:0; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error{ margin:10px 0 0; font-size:.9rem; color:#b3261e; }
.reclamo-ok{ max-width:800px; background:var(--cream-100); border:1px solid var(--border); border-left:4px solid var(--gold-600); border-radius:8px; padding:26px 28px; }
.reclamo-ok h2{ margin:0 0 .4em; font-size:1.2rem; }
.reclamo-ok p{ margin:.3em 0; color:var(--ink-700); }
.reclamo-ok strong{ font-family:var(--font-sans); letter-spacing:.02em; color:var(--ink-900); }

/* Páginas legales (política de privacidad, etc.) */
.legal-doc{ max-width:800px; }
.legal-doc h2{ font-size:1.15rem; margin:2em 0 .5em; }
.legal-doc h2:first-of-type{ margin-top:.5em; }
.legal-doc p, .legal-doc li{ color:var(--ink-700); }
.legal-doc ul{ list-style:disc; padding-left:22px; margin:0 0 1em; }
.legal-doc li{ margin-bottom:.4em; }
.legal-doc .updated{ font-size:.9rem; color:var(--ink-600); }

.contact-info-card{
  background:var(--navy-950); color:var(--white);
  border-radius:var(--radius); padding:34px;
}
.contact-info-card h3{ color:var(--white); font-size:1.1rem; }
.contact-info-card .row{ display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
.contact-info-card .row .icon{ flex:none; width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--gold-400); }
.contact-info-card .row .icon svg{ width:18px; height:18px; }
.contact-info-card .row span{ font-size:.9rem; color:var(--cream-100); opacity:.9; }
.contact-info-card .row strong{ display:block; color:var(--white); font-size:.95rem; margin-bottom:2px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; flex:none;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream-100); transition:border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color:var(--gold-400); color:var(--gold-400); }
.footer-social svg{ width:16px; height:16px; }

.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; }

/* ============================================================
   CARRUSEL DE OFICINAS (Nosotros)
   ============================================================ */
.office-carousels{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.office-carousel{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--navy-900);
}
@media (max-width:980px){ .office-carousels{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .office-carousels{ grid-template-columns:1fr; } }
.office-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.2s ease-in-out;
}
.office-slide.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .office-slide{ transition:none; }
}

/* ============================================================
   BANDA DE ALIANZAS (home)
   ============================================================ */
.alianzas h2{ margin-bottom:34px; }
.alianzas-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(32px, 6vw, 72px);
}
.alianzas-logos img{ width:auto; }
.alianzas-logos a{
  display:inline-flex;
  align-items:center;
  gap:14px;
  opacity:.7;
  filter:grayscale(1);
  transition:opacity .2s ease, filter .2s ease;
}
.alianzas-logos a:hover{ opacity:1; filter:grayscale(0); }
.lni-icon{ height:52px; }
.lni-word{ height:50px; }
.alianzas-logos img[src$="avocom.png"]{ height:140px; transform:translateY(-38px); }
.alianzas-logos img[src$="BNI.png"]{ height:46px; }
.alianzas-logos img[src$="gnf-worldwide.png"]{ height:70px; }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer{ background:var(--navy-950); color:var(--cream-100); }
.ft{
  display:grid;
  grid-template-columns:1.8fr 1fr 1.4fr 1.3fr;
  gap:40px;
  padding:48px 24px 44px;
}
.ft-col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.ft-logo{ height:120px; width:auto; margin-bottom:14px; }
.ft-tagline{ margin:0; font-size:.9rem; line-height:1.6; opacity:.68; max-width:300px; }
.ft-title{
  font-family:var(--font-serif);
  font-size:calc(.74rem + 3px); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:6px;
}
.ft-col a,
.ft-col span:not(.ft-title){ font-size:.9rem; color:var(--cream-100); opacity:.8; overflow-wrap:anywhere; }
.ft-col a{ transition:color .18s ease, opacity .18s ease; }
.ft-col a:hover{ opacity:1; color:var(--gold-400); }
.ft-brand a,
.ft-brand a:hover{ opacity:1; }
.ft-libro{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.ft-libro img{ height:16px; width:auto; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-w-sm{ max-width:640px; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.muted{ color:var(--ink-600); }
.small{ font-size:.85rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px){
  .main-nav{ display:none; }
  .header-actions .tel{ display:none; }
  .hamburger{ display:flex; }
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .hero-logo img{ height:150px; }
  .bio-layout{ grid-template-columns:1fr; gap:32px; }
  .bio-layout > div:first-child{ max-width:340px; margin-inline:auto; }
  .bio-photo{ max-width:100%; }
  .home-values{ padding-left:0; }
  .ft{ grid-template-columns:1fr 1fr; gap:32px; }
  .ft-logo{ height:96px; }
  .cta-band{ padding:44px; }
}

@media (max-width: 640px){
  section{ padding:54px 0; }
  .container{ padding:0 20px; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .section-head{ margin-bottom:30px; }

  .topbar-inner{ min-height:66px; }
  .brand img{ height:50px; }
  .brand{ margin-left:-10px; }
  .header-actions{ gap:10px; }
  .header-actions .btn-gold{ padding:9px 14px; font-size:.8rem; }

  .hero-logo img{ height:104px; }
  .hero-logo{ margin-bottom:12px; }
  .hero-logo-float img{ height:120px; }
  .hero-photo{ min-height:74vh; }
  .hero-photo .hero-inner{ padding-top:84px; }
  /* En móvil las fotos del hero se recortan a "cover": el encuadre de escritorio
     (background-size:auto 1XX%) deja ver solo una franja muy ampliada. */
  .hero-slide{ background-size:cover !important; background-position:center !important; }
  .hero-photo h1{ max-width:100%; }
  /* Heros de páginas internas: además del gutter del contenedor, un respiro extra
     a los lados para que el titular no quede pegado al borde. */
  .hero.hero-page .hero-inner{ padding:40px 24px 38px; }
  .hero .lead{ font-size:1rem; }
  .hero-actions{ gap:12px; margin-top:24px; flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; justify-content:center; }

  .grid{ gap:22px; }
  .card{ padding:22px; }
  .card.fg-card .fg-logo{ margin:-22px -22px 22px; padding:20px 22px; }

  /* Equipo: los grupos con varias personas van a 2 columnas para no
     convertir la página en un scroll interminable de fotos gigantes. */
  #asociados .grid, #staff .grid{ grid-template-columns:1fr 1fr; gap:14px; }
  #asociados .team-card .body, #staff .team-card .body{ padding:14px 14px 16px; }
  #asociados .team-card h3, #staff .team-card h3{ font-size:.95rem; }
  #asociados .team-card p, #staff .team-card p{ font-size:.8rem; }
  #asociados .team-card .role, #staff .team-card .role{ font-size:.62rem; }

  .cta-band{ padding:28px 22px; flex-direction:column; align-items:flex-start; gap:20px; }
  .cta-band h2{ font-size:1.35rem; }
  .cta-band .btn{ width:100%; justify-content:center; }

  .form-grid{ grid-template-columns:1fr; gap:14px; }
  input,textarea,select{ font-size:16px; }        /* evita el zoom automático al enfocar en iOS */

  .contact-info-card{ padding:24px; }
  .contact-info-card .row{ margin-bottom:16px; }

  .bio-layout > div:first-child{ max-width:none; }   /* foto y contacto a lo ancho, alineados con la biografía */
  .bio-block h3{ font-size:1.08rem; margin:1.4em 0 .4em; }
  .service-block{ padding:28px 0; }
  .service-block h3{ font-size:1.12rem; }
  .legal-doc h2{ font-size:1.05rem; }
  .reclamo-ok{ padding:20px 22px; }
  .map-frame iframe{ height:270px; }

  .alianzas-logos{ gap:20px 34px; }
  .alianzas-logos img[src$="avocom.png"]{ height:92px; transform:none; }
  .lni-icon{ height:40px; }
  .lni-word{ height:38px; }
  .alianzas-logos img[src$="BNI.png"]{ height:36px; }
  .alianzas-logos img[src$="gnf-worldwide.png"]{ height:52px; }

  /* Footer compacto: marca arriba, luego Firma + Legal en una fila,
     y Contacto a lo ancho (el correo y la dirección necesitan sitio). */
  .ft{
    grid-template-columns:1fr 1fr;
    gap:26px 22px;
    padding:36px 20px 32px;
  }
  .ft-brand{ grid-column:1 / -1; grid-row:1; }
  .ft-firma{ grid-column:1; grid-row:2; }
  .ft-legal{ grid-column:2; grid-row:2; }
  .ft-contacto{ grid-column:1 / -1; grid-row:3; }
  .ft-col{ gap:13px; }
  .ft-logo{ height:78px; margin-bottom:10px; }
  .ft-tagline{ max-width:none; }
  /* En media columna, el enlace de Libro de Reclamaciones puede partirse
     y el aviso pasa debajo del texto en vez de a su derecha. */
  .ft-legal .ft-libro{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; white-space:normal; }

  .mobile-nav-top img{ height:60px; }
}

/* Menu movil */
.mobile-nav{
  position:fixed; inset:0;
  background:var(--navy-950);
  z-index:200;
  padding:24px;
  display:none;
  overflow-y:auto;
}
.mobile-nav.open{ display:block; }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.mobile-nav-top img{ height:80px; }
.mobile-nav-close{ background:none; border:none; color:var(--white); font-size:1.8rem; line-height:1; cursor:pointer; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav > ul > li{ border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-nav a.nav-link{ display:flex; justify-content:space-between; align-items:center; padding:16px 4px; color:var(--white); font-size:1.05rem; font-weight:500; }
.mobile-nav .dropdown{
  position:static; box-shadow:none; background:none; opacity:1; visibility:visible; transform:none;
  display:none; padding:0 0 12px 14px;
}
.mobile-nav .nav-item.open .dropdown{ display:block; }
.mobile-nav .dropdown a{ color:var(--cream-100); opacity:.85; padding:10px 4px; }
.mobile-nav-cta{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.mobile-nav-cta .btn{ justify-content:center; }