/* ============================================================
   2JC CIRCULAR — style.css DEFINITIVO v2
   Desktop ≥769px : position:fixed por tab, sin scroll.
   Móvil   ≤768px : position:static, scroll libre.
   Soluciones     : fondo azul oscuro + tarjetas blancas.
   iOS safe-area  : integrada en wa-float y footer.
   Touch targets  : ≥44px en burger, pills y botones.
   ============================================================ */

/* ─── VARIABLES ─────────────────────────────────────────── */
:root {
  --nav:  68px;
  --dark: #020958;
  --grn:  #00993e;
  --gold: #d4af37;
  --sand: #f8f9fa;
  --gray: #e8e3d0;
  --text: #1a1a16;
  --muted:#5a5a52;
  --ff:   'Playfair Display', serif;
  --fs:   'DM Sans', sans-serif;
  --r:    11px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body { font-family:var(--fs); color:var(--text); background:var(--sand); line-height:1.6; }

/* ─── HEADER ─────────────────────────────────────────────── */
.main-header {
  position:fixed; top:0; left:0; width:100%; height:var(--nav);
  z-index:1000;
  background:transparent;
  transition:background .35s, box-shadow .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.main-header.solid {
  background:rgba(255,255,255,.97);
  box-shadow:0 2px 20px rgba(0,0,0,.06);
  border-bottom-color:var(--gray);
}
@media (min-width:769px) {
  .main-header.solid {
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}

.h-inner {
  max-width:1400px; margin:0 auto; padding:0 4%;
  height:100%; display:flex; align-items:center;
  justify-content:space-between; gap:.8rem;
}
.logo { text-decoration:none; flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.logo-img {
  height:40px; width:auto; display:block;
  filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4));
  transition:filter .3s;
}
.main-header.solid .logo-img { filter:none; }

.desk-nav { display:flex; gap:1.1rem; align-items:center; }
.nav-a {
  color:#fff; text-decoration:none;
  font-size:.79rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  transition:color .2s; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
}
.main-header.solid .nav-a { color:var(--dark); text-shadow:none; }
.nav-a:hover { color:var(--grn); }
.main-header.solid .nav-a:hover { color:var(--grn); }
.nav-a.active { color:var(--grn) !important; text-shadow:none; }

/* Botones globales */
.btn {
  padding:.68rem 1.45rem; border-radius:100px;
  font-weight:600; font-size:.9rem;
  font-family:var(--fs); cursor:pointer; border:none;
  text-decoration:none; display:inline-block;
  transition:background .28s, transform .2s;
  -webkit-tap-highlight-color:transparent;
  text-align:center;
}
.btn-g { background:var(--grn); color:#fff; box-shadow:0 3px 12px rgba(0,153,62,.22); }
.btn-g:hover { background:var(--dark); }
.btn-w { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.38); color:#fff; }
.btn-w:hover { background:var(--grn); border-color:var(--grn); }
.btn-w.full, .btn-g.full { width:100%; }

/* Banderas idioma */
.lang-sw {
  display:flex; align-items:center; gap:.5rem;
  margin-left:.8rem; padding-left:.9rem;
  border-left:1px solid rgba(255,255,255,.28);
}
.main-header.solid .lang-sw { border-left-color:var(--gray); }
.lang-btn {
  background:none; border:none; padding:2px; cursor:pointer; line-height:0;
  opacity:.45; transition:opacity .2s, transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.lang-btn.on, .lang-btn:hover { opacity:1; transform:scale(1.08); }
.flag-ico {
  width:25px; height:17px; display:block; border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
}

/* Burger */
.burger {
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.burger span {
  width:24px; height:2px; background:#fff;
  border-radius:2px; display:block; transition:.28s;
}
.main-header.solid .burger span { background:var(--dark); }

/* ─── MENÚ MÓVIL ──────────────────────────────────────────── */
.mob-menu {
  position:fixed; inset:0; z-index:999;
  background:rgba(248,249,250,.99);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; pointer-events:none;
  transition:opacity .32s ease;
}
.mob-menu.on { opacity:1; pointer-events:auto; }
.mob-links {
  min-height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:1.5rem; text-align:center; padding:5rem 1.5rem;
}
.mob-a {
  font-family:var(--ff); font-size:1.85rem; font-weight:600;
  color:var(--dark); text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s;
}
.mob-a:active { color:var(--grn); }
/* CTA principal del menú móvil — botón verde visible */
.mob-a.g {
  background:    var(--grn);
  color:         #fff !important;
  padding:       .75rem 2.5rem;
  border-radius: 100px;
  margin-top:    .5rem;
}
.mob-lang {
  display:flex; gap:1.6rem; justify-content:center;
  margin-top:1.4rem; padding-top:1.6rem; border-top:1px solid var(--gray);
}
.mob-lang .lang-btn { opacity:.5; }
.mob-lang .lang-btn.on { opacity:1; }
.mob-lang .flag-ico { width:46px; height:31px; border-radius:5px; box-shadow:0 1px 6px rgba(0,0,0,.18); }

/* ─── ARQUITECTURA CORE: position:fixed por tab ─────────── */
@media (min-width:769px) {
  .page-tab {
    position:fixed; inset:0;
    display:none; flex-direction:column;
    overflow:visible; padding-top:var(--nav);
    background:var(--sand);
    animation:tabIn .3s ease;
  }
  .page-tab.active { display:flex; z-index:1; }
  #tab-inicio { padding-top:0; }
  .footer { display:none; }
}
@keyframes tabIn { from { opacity:0; } to { opacity:1; } }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  flex:1; position:relative;
  display:flex; align-items:center;
  padding:var(--nav) 4% 2rem;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center; z-index:0;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(2,9,88,.9) 0%,rgba(10,15,28,.62) 100%);
  z-index:1;
}
.hero-inner {
  width:100%; max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.05fr; gap:2.5rem;
  align-items:center; z-index:2; position:relative;
}
.badge {
  display:inline-block; margin-bottom:.95rem;
  padding:.35rem .9rem; border-radius:100px;
  color:var(--gold); background:rgba(212,175,55,.1);
  border:1px solid rgba(212,175,55,.38);
  font-size:clamp(.6rem,.7vw,.75rem); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.h1 {
  font-family:var(--ff); color:#fff; font-weight:700;
  font-size:clamp(1.55rem,2.6vw,3.2rem);
  line-height:1.15; margin-bottom:.85rem;
}
.h1 em { color:var(--grn); font-style:normal; }
.sub {
  color:rgba(255,255,255,.82); line-height:1.62;
  font-size:clamp(.82rem,.92vw,1rem);
  max-width:92%; margin-bottom:.4rem;
}
.slogan {
  font-size:clamp(.58rem,.66vw,.72rem); letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.36);
  margin-bottom:1.3rem;
}
.hero-claim {
  margin-top:.75rem;
  font-size:clamp(.62rem,.72vw,.78rem);
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:600;
}

/* Grid 2×2 de casos en el hero */
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:.82rem; }
.case-card {
  position:relative; border-radius:var(--r); overflow:visible;
  cursor:pointer; background:#162040;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:border-color .3s, box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
  height:clamp(130px, 16vh, 200px);
}
@media (hover:hover) and (pointer:fine) {
  .case-card:hover {
    transform:translateY(-3px);
    border-color:var(--grn);
    box-shadow:0 16px 38px rgba(0,0,0,.48);
    z-index:20;
  }
  .case-card:hover .case-img { transform:scale(1.05); opacity:1; }
}
.case-card:active { border-color:var(--grn); }

.card-inner { position:absolute; inset:0; border-radius:var(--r); overflow:hidden; }
.case-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .45s, opacity .3s; opacity:.82;
}
.card-inner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.93) 0%,rgba(0,0,0,.08) 100%);
}
.card-info { position:absolute; bottom:.9rem; left:.9rem; right:.9rem; z-index:2; pointer-events:none; }
.card-tag {
  background:var(--grn); color:#fff; display:inline-block;
  padding:.16rem .46rem; border-radius:3px;
  font-size:clamp(.5rem,.52vw,.6rem); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.card-name {
  color:#fff; font-family:var(--ff);
  font-size:clamp(.78rem,.88vw,.98rem);
  margin-top:.28rem; font-weight:600; line-height:1.2;
}

/* ─── TOOLTIPS ─────────────────────────────────────────── */
.tt-wrap { position:relative; }
.tt-wrap:focus-visible { outline:2px solid var(--grn); outline-offset:3px; border-radius:var(--r); }
.tt-box {
  position:absolute;
  bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(8px);
  background:#fff; color:var(--text);
  padding:1.1rem; border-radius:var(--r);
  width:min(310px, 88vw);
  box-shadow:0 14px 42px rgba(0,0,0,.14);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s, transform .18s, visibility 0s linear .18s;
  z-index:200; text-align:left; border:1px solid var(--gray);
}
.tt-box::after {
  content:''; position:absolute; top:100%; left:50%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff;
}
@media (hover:hover) and (pointer:fine) {
  .tt-wrap:hover .tt-box {
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0); pointer-events:auto;
    transition:opacity .18s, transform .18s, visibility 0s;
  }
  .tt-wrap:hover .tt-box.r { transform:translateX(-80%) translateY(0); }
}
.tt-box.r { left:auto; right:0; transform:translateX(0) translateY(8px); }
.tt-box.r::after { left:auto; right:24px; transform:none; }
@media (hover:hover) and (pointer:fine) {
  .tt-wrap:hover .tt-box.r { transform:translateX(0) translateY(0); }
}

/* Tooltips hero por cuadrante */
.hero-grid .case-card:nth-child(1) .tt-box,
.hero-grid .case-card:nth-child(2) .tt-box { bottom:auto; top:calc(100% + 10px); }
.hero-grid .case-card:nth-child(1) .tt-box::after,
.hero-grid .case-card:nth-child(2) .tt-box::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#fff; }
.hero-grid .case-card:nth-child(odd) .tt-box  { left:0; right:auto; transform:translateX(0) translateY(8px); }
.hero-grid .case-card:nth-child(odd) .tt-box::after  { left:24px; right:auto; transform:none; }
.hero-grid .case-card:nth-child(even) .tt-box { left:auto; right:0; transform:translateX(0) translateY(8px); }
.hero-grid .case-card:nth-child(even) .tt-box::after { left:auto; right:24px; transform:none; }
@media (hover:hover) and (pointer:fine) {
  .hero-grid .case-card:hover .tt-box { transform:translateX(0) translateY(0); }
}

.tt-box img { width:100%; height:88px; object-fit:cover; border-radius:6px; margin-bottom:.75rem; }
.tt-box h4  { font-family:var(--ff); font-size:1rem; color:var(--dark); margin-bottom:.4rem; font-weight:600; }
.tt-box ul  { padding-left:1rem; font-size:.8rem; color:var(--muted); }
.tt-box ul li { margin-bottom:.26rem; }
.tt-box p   { font-size:.8rem; color:var(--muted); line-height:1.52; }
@media (max-width:768px) { .tt-box { display:none !important; } }

/* ─── MODAL / LIGHTBOX ───────────────────────────────────── */
.modal-bd {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.62);
  display:flex; align-items:center; justify-content:center; padding:.8rem;
  opacity:0; pointer-events:none;
  transition:opacity .26s; touch-action:none;
}
.modal-bd.on { opacity:1; pointer-events:auto; }
.modal {
  position:relative; background:#fff; border-radius:16px;
  width:min(520px, 94vw); max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:scale(.96);
  transition:opacity .26s, transform .26s;
  box-shadow:0 22px 55px rgba(0,0,0,.3);
  pointer-events:none;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.modal-bd.on .modal { opacity:1; transform:scale(1); pointer-events:auto; }
.modal-x {
  position:absolute; top:12px; right:12px; z-index:5;
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:rgba(0,0,0,.5); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  color:#fff; transition:background .2s;
}
.modal-x:hover { background:rgba(0,0,0,.8); }
.modal-x svg { width:16px; height:16px; display:block; }
.modal-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
.modal-img    { width:100%; height:clamp(220px, 42vh, 380px); object-fit:cover; display:block; }
.modal-body   { padding:1.2rem 1.5rem 1.9rem; }
.modal-tag    { background:var(--grn); color:#fff; padding:.2rem .65rem; border-radius:3px; font-size:.64rem; text-transform:uppercase; font-weight:700; display:inline-block; margin-bottom:.7rem; letter-spacing:.04em; }
.modal-title  { font-family:var(--ff); font-size:1.4rem; color:var(--dark); margin-bottom:.8rem; font-weight:600; line-height:1.2; padding-right:2.2rem; }
.modal-text   { font-size:.92rem; color:var(--muted); line-height:1.62; }
.modal-text ul { padding-left:1.1rem; }
.modal-text ul li { margin-bottom:.4rem; }

/* ─── QUIÉNES SOMOS ──────────────────────────────────────── */
.about-wrap {
  flex:1; min-height:0;
  display:flex; align-items:center; padding:0 4%;
}
.about-inner {
  width:100%; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center;
}
.page-title {
  font-family:var(--ff); color:var(--dark); font-weight:700;
  line-height:1.15; letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.2vw,2.5rem); margin-bottom:.55rem;
}
.page-title em { color:var(--grn); font-style:italic; }
.prefix { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gold); font-weight:700; margin-bottom:.35rem; }
.lead   { font-size:clamp(.82rem,.9vw,.95rem); color:var(--muted); margin-bottom:.85rem; line-height:1.65; }
.lead.center { text-align:center; }
.hbox {
  margin-top:.9rem; padding:1rem 1.2rem; background:#fff;
  border-radius:var(--r); border-left:4px solid var(--grn);
  box-shadow:0 5px 16px rgba(0,0,0,.04);
}
.hbox h4 { font-size:.92rem; color:var(--dark); font-weight:600; margin-bottom:.35rem; }
.hbox p  { font-size:.86rem; color:var(--muted); margin:0; }
.editorial-img {
  width:100%; height:clamp(200px, 42vh, 380px);
  object-fit:cover; border-radius:var(--r); box-shadow:0 10px 28px rgba(0,0,0,.09);
}

/* ─── SOLUCIONES ─────────────────────────────────────────── */
.sol-wrap {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:0 4%;
  background: var(--dark);          /* fondo azul oscuro */
  gap:clamp(.5rem, 1.5vh, 1rem);
}
.sol-head { flex-shrink:0; text-align:center; }
.sol-wrap .page-title { color: #fff; }  /* título en blanco sobre azul */
.sol-claim {
  margin-top:.45rem;
  font-size:clamp(.72rem,.85vw,.92rem);
  color: rgba(255,255,255,.5);      /* texto de apoyo suave */
  font-weight: 400;
  letter-spacing:.02em;
}

.svc-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:clamp(140px, 18vh, 215px);   /* más grandes que antes */
  gap:clamp(.45rem, .9vh, .95rem);
}

/* Tarjetas blancas sobre fondo azul: contraste máximo (21:1) */
.svc-card {
  background: #fff;
  border: 1.5px solid transparent;
  border-radius:var(--r);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(.6rem, 1.5vh, 1.1rem) .75rem;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition:border-color .25s, box-shadow .25s, transform .25s;
  position:relative; overflow:visible;
}
@media (hover:hover) and (pointer:fine) {
  .svc-card:hover {
    border-color: var(--grn);
    box-shadow: 0 12px 32px rgba(0,0,0,.32);
    transform: translateY(-4px);
    z-index:10;
  }
  .svc-card:hover .svc-icon { background: rgba(0,153,62,.22); }
}
.svc-card:active { border-color:var(--grn); background:#f3fbf6; }

/* Icono: círculo verde suave como acento visual */
.svc-icon {
  background:    rgba(0,153,62,.12);
  border-radius: 50%;
  width:  46px;
  height: 46px;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto .65rem;
  font-size: 1.5rem;
  line-height: 1;
}
.svc-name {
  font-family:var(--ff);
  font-size:clamp(.82rem,.92vw,1rem);
  color:var(--dark);        /* texto azul oscuro sobre tarjeta blanca */
  font-weight:600;
  line-height:1.25;
}

/* Posición tooltips svc-cards por cuadrante */
.svc-grid .svc-card:nth-child(-n+4) .tt-box {
  bottom:auto; top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-8px);
}
@media (hover:hover) and (pointer:fine) {
  .svc-grid .svc-card:nth-child(-n+4):hover .tt-box { transform:translateX(-50%) translateY(0); }
}
.svc-grid .svc-card:nth-child(-n+4) .tt-box::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#fff; }
.svc-card .tt-box { width:min(270px, 82vw); }
.svc-grid .svc-card:nth-child(4n+1) .tt-box { left:0; transform:translateX(0) translateY(-8px); }
.svc-grid .svc-card:nth-child(4n+1) .tt-box::after { left:24px; right:auto; transform:none; }
.svc-grid .svc-card:nth-child(4n)   .tt-box { left:auto; right:0; transform:translateX(0) translateY(-8px); }
.svc-grid .svc-card:nth-child(4n)   .tt-box::after { left:auto; right:24px; transform:none; }
@media (hover:hover) and (pointer:fine) {
  .svc-grid .svc-card:nth-child(4n+1):hover .tt-box,
  .svc-grid .svc-card:nth-child(4n):hover   .tt-box { transform:translateX(0) translateY(0); }
}

/* ─── AYUDAS / SUBVENCIONES ──────────────────────────────── */
.grants-wrap {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:0 4%;
  gap:clamp(.5rem, 1.5vh, 1rem);
}
.grants-head { flex-shrink:0; text-align:center; position:relative; z-index:5; }
.pills-wrap {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(.35rem, .65vh, .68rem);
  max-width:1000px; margin:0 auto;
}
.pill {
  position:relative;
  padding:clamp(.45rem,.75vh,.68rem) clamp(.82rem,1.2vw,1.3rem);
  background:#fff; border:1.5px solid var(--gray); border-radius:100px;
  font-weight:600; font-size:clamp(.72rem,.8vw,.88rem); color:var(--text);
  cursor:pointer; font-family:var(--fs);
  user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background .22s, color .22s, border-color .22s;
}
@media (hover:hover) and (pointer:fine) {
  .pill:hover { background:var(--dark); color:#fff; border-color:var(--dark); transform:translateY(-1px); z-index:10; }
}
.pill .tt-box {
  font-weight:400; width:min(285px, 85vw);
  bottom:auto; top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-8px);
}
@media (hover:hover) and (pointer:fine) {
  .pill:hover .tt-box { transform:translateX(-50%) translateY(0); }
}
.pill .tt-box::after { top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#fff; }

/* ─── ÁREA CLIENTES ──────────────────────────────────────── */
.clients-wrap {
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:0 4%; background:#fff;
}
.login-card {
  background:#fff;
  padding:clamp(1.5rem,3.5vh,2.8rem) clamp(1.2rem,2.5vw,2.2rem);
  border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.07);
  max-width:420px; width:100%; border:1.5px solid var(--gray);
}
.form-field {
  width:100%; padding:.88rem 1rem; border:1.5px solid var(--gray);
  background:var(--sand); border-radius:8px; font-family:inherit;
  font-size:1rem; margin-bottom:.88rem; outline:none;
  transition:border-color .22s, background .22s;
  -webkit-appearance:none;
}
.form-field:focus { border-color:var(--grn); background:#fff; box-shadow:0 0 0 3px rgba(0,153,62,.09); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.82rem; }

/* ─── CONTACTO ───────────────────────────────────────────── */
.contact-wrap {
  flex:1; min-height:0;
  display:flex; align-items:center; padding:0 4%;
}
.contact-inner {
  max-width:1260px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
}
.contact-img  { width:100%; height:clamp(200px,40vh,360px); object-fit:cover; border-radius:var(--r); box-shadow:0 10px 28px rgba(0,0,0,.09); }
.form-col     { background:#fff; padding:clamp(1.2rem,2.8vh,2.2rem) clamp(1rem,2.2vw,2rem); border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.06); }
.contact-meta { display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; align-items:center; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--gray); }
.cmeta        { font-size:.85rem; color:var(--muted); text-decoration:none; font-weight:600; transition:color .2s; -webkit-tap-highlight-color:transparent; }
.cmeta:hover  { color:var(--grn); }
.cmeta.wa     { background:var(--grn); color:#fff; padding:.42rem .95rem; border-radius:100px; }
.cmeta.wa:hover { background:var(--dark); color:#fff; }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer { background:#fff; border-top:1px solid var(--gray); padding:1rem 4%; }
.foot-inner {
  max-width:1400px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.9rem;
}
.foot-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--grn); }
.logos      { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.logos img  { height:28px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.55; transition:.3s; }
.logos img:hover { filter:grayscale(0); opacity:1; }
.fbd  { font-size:.72rem; font-weight:700; color:var(--muted); background:var(--gray); padding:.22rem .55rem; border-radius:3px; }
.copy { font-size:.76rem; color:var(--muted); }

/* ─── HELPERS ────────────────────────────────────────────── */
.center   { text-align:center; }
.mx-auto  { margin-left:auto; margin-right:auto; }

/* ─── TABLET (769–1100px) ────────────────────────────────── */
@media (max-width:1100px) {
  .desk-nav, .nav-cta { display:none; }
  /* Burger con touch target ≥44px */
  .burger {
    display:flex;
    min-width:44px; min-height:44px;
    justify-content:center; align-items:center;
    padding:10px;
  }
  .hero-inner   { grid-template-columns:1fr; gap:2rem; }
  .hero-text-area { text-align:center; }
  .about-inner  { grid-template-columns:1fr; gap:2rem; }
  .about-inner .img-col { order:-1; }
  .contact-inner { grid-template-columns:1fr; gap:2rem; }
  .foot-inner   { flex-direction:column; text-align:center; }
  .logos        { justify-content:center; }
}
@media (min-width:769px) and (max-width:1100px) {
  /* Recuperar CTA "Solicitar Estudio" visible en tablet */
  .nav-cta { display:inline-block !important; font-size:.78rem; padding:.52rem 1rem; white-space:nowrap; }
  /* Soluciones: 2 columnas en tablet */
  .svc-grid { grid-template-columns:repeat(2, 1fr); grid-auto-rows:clamp(120px, 15vh, 175px); }
  /* Hero: aligerar verticalmente en tablets ≤900px alto */
  .hero       { padding-top: calc(var(--nav) + .5rem); padding-bottom: 1rem; }
  .hero-inner { gap: 1.2rem; }
  .h1         { margin-bottom: .6rem; }
  .sub        { margin-bottom: .3rem; }
  .hero-claim { display: none; }
  .case-card  { height: clamp(100px, 13vh, 150px); }
}
/* Tablet landscape / pantalla baja: cards en 1 fila de 4 */
@media (min-width:769px) and (max-width:1100px) and (max-height:750px) {
  .hero-grid { grid-template-columns: repeat(4, 1fr); }
  .case-card { height: clamp(80px, 11vh, 115px); }
  .slogan    { display: none; }
}

/* ─── MÓVIL (≤768px) ─────────────────────────────────────── */
@media (max-width:768px) {

  :root { --nav:58px; }

  .page-tab {
    position:static !important;
    display:none; height:auto; overflow:visible;
    padding-top:var(--nav); padding-bottom:2.5rem;
    animation:none;
  }
  .page-tab.active { display:block; }

  /* Inicio: fondo oscuro = hero se funde sin corte hasta footer */
  #tab-inicio     { padding-top:0; background:var(--dark); padding-bottom:0; }
  /* Soluciones: fondo oscuro consistente con sol-wrap */
  #tab-soluciones { background:var(--dark); padding-bottom:0; }

  /* ── Hero ── */
  .hero {
    flex:none; height:auto;
    padding: calc(var(--nav) + 2.8rem) 4% 2.5rem;  /* aire extra bajo nav */
  }
  .hero-inner     { grid-template-columns:1fr; gap:1.8rem; }
  .hero-text-area { text-align:center; }
  .hero-claim     { text-align:center; display:none; }  /* ocultar en móvil */
  .slogan         { display:none; }
  .h1             { margin-bottom:.65rem; }
  .sub            { margin-bottom:.9rem; font-size:.86rem; }
  /* Botón hero: touch target ≥44px */
  .hero-text-area .btn-w {
    width:100%; min-height:44px;
    display:flex; align-items:center; justify-content:center;
  }

  /* ── Case cards hero ── */
  .hero-grid { gap:.68rem; }
  .case-card { height:150px; }
  .card-info { bottom:.85rem; left:.85rem; right:.85rem; }
  .card-tag  { font-size:.65rem; }   /* era ~8px, ahora legible */
  .card-name { font-size:.88rem; }

  /* ── Soluciones ── */
  .sol-wrap  {
    flex:none; height:auto; padding:1.8rem 4%; gap:1rem;
    background:var(--dark); justify-content:flex-start;
  }
  .svc-grid  { grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto; }
  .svc-card  { min-height:120px; padding:1.3rem .9rem; }
  .svc-icon  { width:40px; height:40px; font-size:1.35rem; }
  /* Indicador táctil "+" en esquina: aclara que la tarjeta es interactiva */
  .svc-card::after {
    content:'+'; position:absolute; top:.5rem; right:.6rem;
    width:18px; height:18px;
    background:var(--grn); color:#fff;
    border-radius:50%; font-size:.7rem; font-weight:700;
    line-height:18px; text-align:center; pointer-events:none;
  }

  /* ── Subvenciones ── */
  .grants-wrap { flex:none; height:auto; padding:1.8rem 4%; gap:1rem; justify-content:flex-start; }
  .pills-wrap  { gap:.52rem; }
  /* Pills: touch target ≥44px */
  .pill {
    font-size:.82rem;
    min-height:44px;
    display:inline-flex; align-items:center;
    padding:.72rem 1rem;
  }
  .pill:active { background:var(--dark); color:#fff; border-color:var(--dark); }

  /* ── Nosotros ── */
  .about-wrap  { flex:none; height:auto; padding:1.8rem 4%; }
  .about-inner { grid-template-columns:1fr; gap:1.8rem; margin:0; }
  .about-inner .img-col { order:-1; }
  .editorial-img { height:220px; }

  /* ── Contacto ── */
  .contact-wrap  { flex:none; height:auto; padding:1.8rem 4%; align-items:flex-start; }
  .contact-inner { grid-template-columns:1fr; gap:1.8rem; }
  .contact-img   { height:220px; }
  .form-row      { grid-template-columns:1fr; gap:0; }
  .form-col, .login-card { padding:1.6rem 1.3rem; }

  /* ── Clientes ── */
  .clients-wrap { flex:none; height:auto; padding:3rem 4%; }

  /* ── Footer ── */
  .foot-inner { flex-direction:column; text-align:center; }
  .logos      { justify-content:center; }
  /* Safe area iOS en footer */
  .footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

  /* ── Modal ── */
  .modal       { width:94vw; max-height:86vh; }
  .modal-img   { height:clamp(200px, 38vh, 300px); }
  .modal-body  { padding:1.1rem 1.3rem 1.7rem; }
  .modal-title { font-size:1.25rem; }
  .modal-x     { width:42px; height:42px; top:10px; right:10px; }
}

/* ─── PEQUEÑO (≤480px) ───────────────────────────────────── */
@media (max-width:480px) {
  .hero       { padding: calc(var(--nav) + 2.2rem) 4% 2rem; }
  .hero-inner { gap: 1.2rem; }
  .hero-grid  { gap:.55rem; }
  .case-card  { height:125px; }
  .h1         { font-size:1.55rem; line-height:1.2; }
  .sub        { font-size:.82rem; }
  .page-title { font-size:1.5rem; }
}

/* ─── WHATSAPP FLOTANTE ──────────────────────────────────── */
.wa-float {
  position:fixed;
  /* Safe area iOS: gesture bar no tapa el botón */
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right:1.5rem;
  z-index:8000;
  display:flex; align-items:center; gap:.55rem;
  background:#25D366; color:#fff; text-decoration:none;
  border-radius:100px;
  padding:.6rem .9rem .6rem .65rem;
  box-shadow:0 4px 18px rgba(37,211,102,.4);
  font-family:var(--fs); font-size:.82rem; font-weight:700; letter-spacing:.01em;
  transition:background .25s, transform .22s, box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.wa-float:hover {
  background:#1ebe5d;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(37,211,102,.5);
}
.wa-float svg { width:28px; height:28px; flex-shrink:0; display:block; }
.wa-float-label { white-space:nowrap; }

/* Móvil: solo icono, más limpio */
@media (max-width:480px) {
  .wa-float {
    bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
    padding:.7rem; border-radius:50%;
  }
  .wa-float-label { display:none; }
  .wa-float svg   { width:30px; height:30px; }
}

/* ═══════════════════════════════════════════════════════════════
   REFINAMIENTOS CLIENTE — añadir al FINAL de style.css
   ═══════════════════════════════════════════════════════════════ */

/* 1 ── Nav activo: blanco en hero, verde en header sólido ─── */
.nav-a.active {
  color: rgba(255,255,255,.95) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
}
.main-header.solid .nav-a.active {
  color: var(--grn) !important;
  text-shadow: none;
}

/* 2 ── "sostenible": verde más brillante sobre fondo oscuro ── */
.h1 em { color: #2ddb6f; }

/* 3 ── Hero: subtítulo y slogan más grandes y con más aire ── */
.sub        { font-size: clamp(.9rem, 1vw, 1.12rem); margin-bottom: .75rem; }
.slogan     { margin-bottom: 1.8rem; color: rgba(255,255,255,.52); letter-spacing: .13em; }
.hero-claim { margin-top: 1.1rem; font-size: clamp(.68rem, .76vw, .84rem); }

/* 4 ── Subvenciones: header más grande y más separado ──────── */
.grants-wrap             { gap: clamp(.9rem, 2.2vh, 1.6rem); }
.grants-head .page-title { font-size: clamp(1.7rem, 2.5vw, 2.9rem); margin-bottom: .7rem; }
.grants-head .lead       { font-size: clamp(.9rem, .96vw, 1.04rem); margin-top: .4rem; }

/* 5 ── Soluciones: separar header de tarjetas, texto más grande */
.sol-wrap { gap: clamp(1.2rem, 2.8vh, 2.2rem); }
.svc-name { font-size: clamp(.92rem, 1vw, 1.1rem); }

/* 6 ── Case cards: fotos más claras y con más contraste ──── */
.case-img { opacity: .95; filter: brightness(1.15) contrast(1.04); }
.card-inner::after {
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.04) 100%);
}

/* ══════════════════════════════════════════════════
   PARCHE FINAL — añadir al final de style.css
   (después del bloque de refinamientos que ya tienes)
   ══════════════════════════════════════════════════ */

/* Sol-claim más visible: de .5 a .78 de opacidad */
.sol-claim { color: rgba(255,255,255,.78) !important; }

/* Fotos case cards: más luminosas, menos overlay oscuro */
.case-img {
  opacity: 1;
  filter: brightness(1.22) contrast(1.06) saturate(1.1);
}
.card-inner::after {
  background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.02) 100%);
}



/* card-tag: wrap a 2 líneas en móvil en lugar de ellipsis */
@media (max-width: 768px) {
  .card-tag {
    white-space: normal;
    line-height: 1.3;
    max-height:  calc(0.65rem * 1.3 * 2); /* ≈ 2 líneas exactas */
    overflow:    hidden;
  }
}

@media (max-width: 768px) {
  .card-tag {
    padding: .32rem .5rem;
    max-height: none;
  }
}