/* ==========================================================================
   Instalaciones y Servicios García — Sistema visual
   Azul marino · Blanco · Azul corporativo — tono sobrio, sin efectos
   ========================================================================== */

:root{
  /* Gris pizarra neutro: los "navy" ya no son azules, sólo oscuros. */
  --navy-900:#161c22;
  --navy-800:#212a33;
  --navy-700:#2c3742;
  --navy-600:#3b4854;
  --blue-500:#1b4f8a;
  --blue-400:#2a6bb3;
  --blue-300:#7ba3c9;
  --cyan-400:#8fb8db;
  --white:#ffffff;
  --gray-50:#f5f6f7;
  --gray-100:#e9ebee;
  --gray-200:#dcdfe3;
  --gray-400:#98a0a9;
  --gray-600:#5b646d;
  --gray-800:#232a31;
  --wa:#25d366;

  --font-head:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --radius:6px;
  --radius-lg:8px;
  --shadow-sm:0 1px 3px rgba(10,27,51,.06);
  --shadow:0 3px 12px rgba(10,27,51,.08);
  --shadow-lg:0 8px 26px rgba(10,27,51,.12);
  --container:1200px;
  --header-h:82px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--gray-800);
  background:var(--white);line-height:1.65;font-size:16.5px;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--blue-500);text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy-800);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800}
h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.2em}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}
.section{padding:clamp(56px,7vw,104px) 0}
.section--tight{padding:clamp(48px,6vw,84px) 0}
.section--gray{background:var(--gray-50)}
.section--navy{background:var(--navy-800);color:#cfdcec}
.section--navy h2,.section--navy h3{color:#fff}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--gray-600);max-width:70ch}
.center .lead{margin-inline:auto}

/* --- Eyebrow / títulos de sección --- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);
  margin-bottom:.9rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue-500);border-radius:2px}
.section--navy .eyebrow{color:var(--cyan-400)}
.section--navy .eyebrow::before{background:var(--cyan-400)}
.section-head{max-width:760px;margin-bottom:clamp(30px,4vw,52px)}
.section-head.center{margin-inline:auto}

/* --- Botones --- */
.btn{
  --bg:var(--blue-500);--fg:#fff;--bd:var(--blue-500);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-head);font-weight:700;font-size:.97rem;
  padding:.86rem 1.5rem;border-radius:999px;border:2px solid var(--bd);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,92,255,.30)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ghost{--bg:transparent;--fg:var(--navy-800);--bd:var(--gray-200)}
.btn--ghost:hover{--bd:var(--navy-800);box-shadow:var(--shadow)}
.btn--light{--bg:#fff;--fg:var(--navy-800);--bd:#fff}
.btn--light:hover{box-shadow:0 12px 26px rgba(0,0,0,.25)}
.btn--outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.45)}
.btn--outline-light:hover{--bd:#fff;background:rgba(255,255,255,.08)}
.btn--wa{--bg:var(--wa);--bd:var(--wa)}
.btn--wa:hover{box-shadow:0 12px 26px rgba(37,211,102,.35)}
.btn--sm{padding:.62rem 1.1rem;font-size:.88rem}
.btn--lg{padding:1.02rem 1.9rem;font-size:1.03rem}

/* --- Header --- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.header.is-stuck{height:68px;box-shadow:0 6px 24px rgba(10,27,51,.09);border-bottom-color:var(--gray-100)}
.header__inner{display:flex;align-items:center;gap:1.5rem;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}

.logo{display:flex;align-items:center;gap:.7rem;flex:none}
.logo__img{
  display:block;width:auto;height:40px;max-width:100%;
  transition:height .3s var(--ease),transform .3s var(--ease);
}
.logo:hover .logo__img{transform:scale(1.02)}
.header.is-stuck .logo__img{height:34px}
@media(max-width:1180px){.logo__img{height:34px}}
/* El logotipo es un PNG sobre fondo blanco: en el pie (navy) va sobre una
   pastilla clara para que se lea correctamente. */
.logo--footer{background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.logo--footer .logo__img{height:40px}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{
  font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--navy-800);
  padding:.55rem .8rem;border-radius:9px;position:relative;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:2px;
  background:var(--blue-500);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--blue-500)}

.header__cta{display:flex;align-items:center;gap:.6rem;flex:none}
.header__phone{
  display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;
  color:var(--navy-800);font-size:.95rem;padding:.4rem .2rem;
}
.header__phone svg{width:17px;height:17px;color:var(--blue-500)}
.header__phone:hover{color:var(--blue-500)}

/* Botón de menú: tres barras de anchos distintos que se convierten en una X */
.burger{
  display:none;width:48px;height:48px;padding:0;cursor:pointer;
  border:0;border-radius:14px;background:var(--navy-800);
  place-items:center;align-content:center;justify-items:end;
  box-shadow:0 6px 18px rgba(10,27,51,.22);
  transition:background .3s var(--ease),transform .2s var(--ease),box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
.burger:active{transform:scale(.94)}
.burger span{
  display:block;height:2px;background:#fff;border-radius:2px;margin-right:14px;
  transition:width .3s var(--ease),transform .35s var(--ease),opacity .2s var(--ease),margin .35s var(--ease);
}
.burger span:nth-child(1){width:20px}
.burger span:nth-child(2){width:14px;margin-top:5px}
.burger span:nth-child(3){width:17px;margin-top:5px}
.burger:hover span:nth-child(2),
.burger:hover span:nth-child(3){width:20px}
.burger[aria-expanded="true"]{background:var(--blue-500);box-shadow:0 6px 18px rgba(10,92,255,.35)}
.burger[aria-expanded="true"] span{width:20px;margin-right:14px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Drawer móvil */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--navy-800);
  padding:calc(var(--header-h) + 24px) 26px 120px;
  display:flex;flex-direction:column;gap:.2rem;
  transform:translateX(100%);transition:transform .38s var(--ease);
  overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer a{
  color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.5rem;
  padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.10);
}
.drawer .drawer__actions{display:flex;flex-direction:column;gap:.7rem;margin-top:1.8rem}
.drawer .btn{width:100%}

/* --- Hero --- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;padding:calc(var(--header-h) + 60px) 0 clamp(70px,9vw,120px);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 15% 20%, rgba(5,15,31,.94) 0%, rgba(5,15,31,.80) 42%, rgba(5,15,31,.55) 70%, rgba(5,15,31,.72) 100%),
    linear-gradient(100deg, rgba(10,92,255,.34) 0%, rgba(10,27,51,0) 60%);
}
.hero__grid{
  position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 70% 40%,#000,transparent 78%);
}
.hero__inner{max-width:800px;color:#fff}
.hero h1{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:normal;color:var(--cyan-400)}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:.45rem 1rem .45rem .55rem;border-radius:999px;backdrop-filter:blur(6px);
  font-size:.85rem;font-weight:600;color:#e8f1ff;
}
.hero__badge b{
  background:var(--blue-500);color:#fff;border-radius:999px;padding:.18rem .6rem;font-size:.78rem;font-family:var(--font-head)
}
.hero__text{font-size:clamp(1.02rem,1.6vw,1.2rem);color:#d6e2f2;max-width:63ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.6rem}
.hero__mini{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem}
.hero__mini div{display:flex;align-items:center;gap:.6rem;color:#cfdcec;font-size:.93rem}
.hero__mini svg{width:20px;height:20px;color:var(--cyan-400);flex:none}

/* --- Barra de confianza --- */
.trust{background:var(--white);position:relative;margin-top:-58px;z-index:5}
.trust__card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;
}
.trust__item{padding:26px 20px;text-align:center;border-right:1px solid var(--gray-100)}
.trust__item:last-child{border-right:0}
.trust__icon{width:42px;height:42px;margin:0 auto .6rem;display:grid;place-items:center;border-radius:12px;background:rgba(10,92,255,.09);color:var(--blue-500)}
.trust__icon svg{width:22px;height:22px}
.trust__item strong{display:block;font-family:var(--font-head);font-size:1.02rem;color:var(--navy-800);margin-bottom:.15rem}
.trust__item span{font-size:.86rem;color:var(--gray-600)}

/* --- Grid utilidades ---
   min-width:0 en los hijos: sin esto, un texto largo sin espacios (un correo
   electrónico, por ejemplo) ensancha la columna y desborda la pantalla. */
.grid{display:grid;gap:26px}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid--split{grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:center}
.grid--split>*{min-width:0}

/* Correos, direcciones y enlaces largos: que partan en vez de desbordar */
.linklist li,.linklist a,.infocard address,.footer a,.svc-body p,.crumbs{overflow-wrap:anywhere}

/* --- Tarjetas de familia de servicio --- */
.famcard{
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.famcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.famcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-700)}
.famcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.famcard:hover .famcard__media img{transform:scale(1.07)}
.famcard__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,31,0) 40%,rgba(5,15,31,.72))}
.famcard__tag{
  position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;
  font-family:var(--font-head);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;
}
.famcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.famcard__body p{color:var(--gray-600);font-size:.95rem}
.famcard__list{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.famcard__list a{
  font-size:.83rem;font-weight:600;color:var(--navy-700);background:var(--gray-50);
  border:1px solid var(--gray-100);padding:.32rem .68rem;border-radius:999px;transition:.22s;
}
.famcard__list a:hover{background:var(--blue-500);border-color:var(--blue-500);color:#fff}
.famcard__more{margin-top:auto;font-family:var(--font-head);font-weight:700;color:var(--blue-500);font-size:.93rem;display:inline-flex;align-items:center;gap:.4rem}
.famcard__more svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.famcard:hover .famcard__more svg{transform:translateX(4px)}

/* --- Ficha de servicio: tarjeta con fotografía, antetítulo y "+ Info" --- */
.svccard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--gray-100);
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.svccard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.svccard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--gray-100);flex:none}
.svccard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.svccard:hover .svccard__media img{transform:scale(1.06)}
.svccard__ico{
  position:absolute;right:12px;bottom:12px;z-index:2;
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--blue-500);backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(5,15,31,.22);transition:transform .35s var(--ease);
}
.svccard:hover .svccard__ico{transform:scale(1.08) rotate(-5deg)}
.svccard__ico svg{width:21px;height:21px}
.svccard__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.svccard__kicker{
  font-size:.78rem;font-weight:600;color:var(--gray-600);
  letter-spacing:.02em;margin-bottom:.15rem;
}
.svccard h3{font-size:1.08rem;margin-bottom:.4rem}
.svccard p{color:var(--gray-600);font-size:.9rem;margin-bottom:1rem}
.svccard .famcard__more{margin-top:auto}
.svccard:hover .famcard__more svg{transform:translateX(4px)}

.pagehead__ico{
  width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.20);color:var(--cyan-400);
}
.pagehead__ico svg{width:30px;height:30px}

/* --- Tarjeta servicio simple --- */
.scard{
  display:flex;gap:.9rem;align-items:flex-start;padding:18px 18px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--gray-100);transition:.3s var(--ease);
}
.scard:hover{border-color:var(--blue-300);box-shadow:var(--shadow);transform:translateY(-3px)}
.scard__ico{width:38px;height:38px;flex:none;border-radius:10px;background:rgba(10,92,255,.09);color:var(--blue-500);display:grid;place-items:center}
.scard__ico svg{width:20px;height:20px}
.scard b{display:block;font-family:var(--font-head);color:var(--navy-800);font-size:.99rem}
.scard span{font-size:.85rem;color:var(--gray-600)}

/* --- Proceso ---
   El número va en un recuadro y la línea que lleva al paso siguiente se
   desvanece y termina en un punto, en vez de cortarse a media columna. */
.steps{
  --step-accent:var(--blue-500);--step-bg:rgba(10,92,255,.08);--step-bd:rgba(10,92,255,.26);
  counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,40px);position:relative;
}
.section--navy .steps{--step-accent:var(--cyan-400);--step-bg:rgba(53,196,255,.10);--step-bd:rgba(53,196,255,.30)}
.step{position:relative;padding-top:70px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;width:52px;height:52px;
  display:grid;place-items:center;border-radius:15px;
  font-family:var(--font-head);font-weight:800;font-size:1.12rem;line-height:1;
  color:var(--step-accent);letter-spacing:.02em;
  background:var(--step-bg);border:1.5px solid var(--step-bd);
  transition:transform .35s var(--ease),background .35s;
}
.step:hover::before{transform:translateY(-3px)}
.step::after{
  content:"";position:absolute;top:22px;left:68px;right:calc(12px - clamp(24px,3vw,40px));
  height:8px;color:var(--step-accent);opacity:.55;
  background:
    radial-gradient(circle 3.5px at calc(100% - 4px) 50%,currentColor 96%,transparent 100%) no-repeat 0 0/100% 100%,
    linear-gradient(90deg,currentColor,transparent) no-repeat 0 50%/calc(100% - 14px) 2px;
}
.step:last-child::after{display:none}
.step h3{font-size:1.08rem;margin-bottom:.35rem}
.section--navy .step h3{color:#fff}
.step p{font-size:.95rem;color:var(--gray-600);margin:0}
.section--navy .step p{color:#a9bdd6}

/* --- Contadores --- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:26px 14px;border-radius:var(--radius);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.stat b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,4vw,2.9rem);color:#fff;line-height:1}
.stat span{font-size:.88rem;color:#a9bdd6;letter-spacing:.02em}

/* --- Ficha de proyecto real --- */
.pcard{
  background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-700)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__badge{
  position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(10,92,255,.92);
  padding:.32rem .78rem;border-radius:999px;
}
.pcard__body{padding:22px}
.pcard__body h3{font-size:1.15rem;margin-bottom:.4rem}
.pcard__body p{color:var(--gray-600);font-size:.95rem;margin:0}

/* --- Antes / Después --- */
.ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--navy-700);user-select:none;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{clip-path:inset(0 0 0 50%)}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.35);pointer-events:none}
.ba__handle::after{
  content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5cff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E");
  background-size:22px;background-repeat:no-repeat;background-position:center;
}
.ba__label{position:absolute;top:14px;z-index:3;font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(5,15,31,.62);padding:.3rem .7rem;border-radius:999px;backdrop-filter:blur(4px)}
.ba__label--l{left:14px}
.ba__label--r{right:14px}
.project__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 .4rem}
.chip{font-size:.76rem;font-weight:700;font-family:var(--font-head);letter-spacing:.03em;color:var(--blue-500);background:rgba(10,92,255,.08);padding:.28rem .7rem;border-radius:999px}
.chip--gray{color:var(--gray-600);background:var(--gray-100)}

/* --- Galería --- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--navy-700)}
.gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 2;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.08)}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;padding:14px;color:#fff;font-size:.85rem;font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(5,15,31,.85));
}

/* --- Testimonios --- */
.quote{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.quote__stars{color:#ffb020;letter-spacing:.12em;font-size:.95rem;margin-bottom:.7rem}
.quote p{font-size:.98rem;color:var(--gray-800)}
.quote footer{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;font-size:.88rem;color:var(--gray-600)}
.quote__av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--navy-700),var(--blue-500));color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:.9rem}

/* --- Franja CTA --- */
.ctaband{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--navy-800),var(--navy-600) 55%,var(--blue-500));
  color:#fff;padding:clamp(34px,5vw,58px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
}
.ctaband::after{
  content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(53,196,255,.35),transparent 65%);
}
.ctaband h2{color:#fff;margin-bottom:.35rem;position:relative}
.ctaband p{color:#cfe0f7;margin:0;position:relative;max-width:56ch}
.ctaband__actions{display:flex;flex-wrap:wrap;gap:.7rem;position:relative}

/* --- FAQ --- */
.faq{border-top:1px solid var(--gray-200)}
.faq details{border-bottom:1px solid var(--gray-200)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--font-head);font-weight:700;color:var(--navy-800);font-size:1.03rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:24px;width:14px;height:14px;
  border-right:2px solid var(--blue-500);border-bottom:2px solid var(--blue-500);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 40px 20px 0;color:var(--gray-600);margin:0}

/* --- Formulario --- */
.formcard{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:clamp(24px,3.4vw,40px)}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--navy-800);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;padding:.82rem 1rem;border:1.5px solid var(--gray-200);border-radius:11px;
  font-family:var(--font-body);font-size:.97rem;color:var(--gray-800);background:#fff;transition:.22s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(10,92,255,.12)}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.83rem;color:var(--gray-600);margin-bottom:18px}
.check input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--blue-500)}
.form-note{font-size:.8rem;color:var(--gray-400);margin-top:.9rem}
.form-msg{display:none;padding:14px 16px;border-radius:11px;font-size:.9rem;margin-top:14px}
.form-msg.ok{display:block;background:rgba(37,211,102,.10);color:#12703c;border:1px solid rgba(37,211,102,.35)}
.form-msg.err{display:block;background:rgba(220,38,38,.08);color:#a4161a;border:1px solid rgba(220,38,38,.3)}

/* --- Info contacto --- */
.infocard{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);height:100%}
.infocard h3{font-size:1.05rem;margin-bottom:.5rem}
.infocard address{font-style:normal;color:var(--gray-600);font-size:.94rem}
.infocard .tagline{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-500);margin-bottom:.5rem}
.linklist{list-style:none;padding:0;margin:0}
.linklist li{display:flex;gap:.7rem;align-items:center;padding:.45rem 0;font-size:.95rem;color:var(--gray-800)}
.linklist svg{width:18px;height:18px;color:var(--blue-500);flex:none}
.map{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--gray-100);min-height:360px}
.map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}

/* --- Zonas --- */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.zone h3{font-size:1.05rem;color:var(--blue-500)}
.zone ul{list-style:none;padding:0;margin:0;columns:2;column-gap:18px}
.zone li{font-size:.9rem;color:var(--gray-600);padding:.16rem 0;break-inside:avoid}
.section--navy .zone li{color:#a9bdd6}

/* --- Cabecera interior --- */
.pagehead{position:relative;padding:calc(var(--header-h) + 66px) 0 60px;background:var(--navy-800);color:#fff;overflow:hidden}
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:1;opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 80% at 80% 30%,#000,transparent 75%);
  mask-image:radial-gradient(60% 80% at 80% 30%,#000,transparent 75%);
}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover;opacity:.28}
.pagehead__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,27,51,.95),rgba(10,27,51,.72))}
.pagehead .container{position:relative;z-index:2}
.pagehead h1{color:#fff;max-width:20ch}
.pagehead p{color:#cfdcec;max-width:62ch;font-size:1.06rem;margin-bottom:0}
.crumbs{font-size:.83rem;color:#8fa7c4;margin-bottom:1rem}
.crumbs a{color:#cfdcec}
.crumbs a:hover{color:#fff}

/* --- Página de servicio --- */
.svc-layout{display:grid;grid-template-columns:1fr 360px;gap:clamp(30px,4vw,58px);align-items:start}
.svc-body h2{margin-top:2rem}
.svc-body h2:first-child{margin-top:0}
.checklist{list-style:none;padding:0;margin:0 0 1.4rem}
.checklist li{position:relative;padding-left:2rem;margin-bottom:.65rem;color:var(--gray-600)}
.checklist li::before{
  content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;
  background:rgba(10,92,255,.10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a5cff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}
.aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px}
.aside__box{background:var(--navy-800);color:#cfdcec;border-radius:var(--radius-lg);padding:26px}
.aside__box h3{color:#fff;font-size:1.15rem}
.aside__box p{font-size:.93rem}
.aside__box .btn{width:100%;margin-bottom:.55rem}
.aside__links{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:22px}
.aside__links h4{font-family:var(--font-head);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-400);margin-bottom:.8rem}
.aside__links ul{list-style:none;padding:0;margin:0}
.aside__links li{border-bottom:1px solid var(--gray-100)}
.aside__links li:last-child{border-bottom:0}
.aside__links a{display:block;padding:.6rem 0;font-size:.93rem;font-weight:600;color:var(--navy-800);transition:.2s}
.aside__links a:hover{color:var(--blue-500);padding-left:.3rem}

/* --- Footer --- */
.footer{background:var(--navy-900);color:#8fa7c4;padding:clamp(50px,6vw,76px) 0 0;font-size:.92rem}
.footer h4{color:#fff;font-family:var(--font-head);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
.footer a{color:#8fa7c4}
.footer a:hover{color:#fff}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{padding:.24rem 0}
.footer .logo__name{color:#fff}
.footer__about p{margin-top:1rem;max-width:36ch;font-size:.9rem}
.footer__bottom{
  margin-top:44px;border-top:1px solid rgba(255,255,255,.09);padding:20px 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.83rem;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.1rem}

/* --- Botón flotante WhatsApp --- */
.fab{
  position:fixed;right:22px;bottom:26px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform .3s var(--ease);
}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px;height:30px;color:#fff}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* --- Barra móvil fija --- */
.mobilebar{display:none;position:fixed;inset:auto 0 0 0;z-index:95;background:#fff;border-top:1px solid var(--gray-200);box-shadow:0 -6px 22px rgba(10,27,51,.10)}
.mobilebar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:14px 8px;
  font-family:var(--font-head);font-weight:700;font-size:.93rem;color:var(--navy-800);
}
.mobilebar a+a{border-left:1px solid var(--gray-200);color:#0f8a3f}
.mobilebar svg{width:19px;height:19px}

/* --- Animaciones al hacer scroll --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* --- Responsive --- */
@media (max-width:1100px){
  .nav{display:none}
  .header__phone{display:none}
  .burger{display:grid}
  .trust__card{grid-template-columns:repeat(3,1fr)}
  .trust__item:nth-child(3){border-right:0}
  .svc-layout{grid-template-columns:1fr}
  .aside{position:static}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .grid-3,.grid-4,.stats,.steps,.zones{grid-template-columns:repeat(2,1fr)}
  .grid--split{grid-template-columns:1fr}
  .step::after{display:none}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:span 2;grid-row:auto}
}
@media (max-width:680px){
  body{padding-bottom:60px}
  .mobilebar{display:flex}
  /* En móvil las acciones viven en la barra inferior fija */
  .header__cta .btn{display:none}
  .header__inner{gap:1rem}
  .logo__name{font-size:1rem}
  .logo__mark{width:40px;height:40px;border-radius:11px}
  .container{padding-inline:18px}
  .fab{display:none}

  .grid-2,.grid-3,.grid-4,.stats,.zones,.field--row{grid-template-columns:1fr}

  /* Proceso: en vertical, el número a la izquierda de cada paso */
  .steps{grid-template-columns:1fr;gap:26px}
  .step{padding-top:0;padding-left:66px;min-height:52px}
  .step::before{width:46px;height:46px;border-radius:13px;font-size:1rem}

  .trust{margin-top:-24px}
  .trust__card{grid-template-columns:repeat(2,1fr)}
  .trust__item{border-right:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);padding:22px 14px}
  .trust__item:nth-child(2n){border-right:0}
  .trust__item:last-child{grid-column:1 / -1;border-bottom:0}

  .hero{min-height:auto;padding-bottom:70px}
  .hero__actions .btn{flex:1 1 100%}
  .hero__mini{gap:.7rem}
  .hero__mini div{flex:1 1 100%}

  .zone ul{columns:1}
  .footer__grid{grid-template-columns:1fr;gap:28px}
  .footer__bottom{flex-direction:column;gap:14px}
  .ctaband{flex-direction:column;align-items:stretch}
  .ctaband__actions .btn{width:100%}

  /* Evita el zoom automático de iOS al enfocar un campo */
  .field input,.field select,.field textarea{font-size:16px}
  /* Los rótulos largos de botón se parten en lugar de desbordar */
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn--lg{font-size:.97rem;padding:.9rem 1.2rem}
  .map,.map iframe{min-height:250px}
  .formcard{padding:22px 18px}
  .infocard{padding:20px 18px}
  .pagehead{padding-top:calc(var(--header-h) + 44px);padding-bottom:44px}
  .svccard{padding:22px 20px 20px}
  .gallery{gap:10px}
  .quote{padding:22px}
}

/* Pantallas muy estrechas */
@media (max-width:360px){
  .trust__card{grid-template-columns:1fr}
  .trust__item{border-right:0}
  .gallery{grid-template-columns:1fr}
  .gallery figure:nth-child(1),.gallery figure:nth-child(6){grid-column:auto}
  .mobilebar a{font-size:.88rem;gap:.35rem}
  .drawer a{font-size:1.3rem}
}


/* --- Menú desplegable de servicios (por familias) --- */
.nav__item{position:relative;display:flex;align-items:center}
.nav__item>a{display:inline-flex;align-items:center;gap:.3rem}
.nav__caret{width:13px;height:13px;transition:transform .25s var(--ease)}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)}
.nav__panel{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  min-width:260px;background:#fff;border:1px solid var(--gray-100);
  border-radius:16px;box-shadow:0 18px 44px rgba(10,27,51,.16);
  padding:10px;opacity:0;visibility:hidden;transition:.25s var(--ease);z-index:120;
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:translate(-50%,4px)}
.nav__panel a{
  display:block;padding:.5rem .7rem;border-radius:10px;font-size:.92rem;
  font-family:var(--font-head);font-weight:600;color:var(--navy-800);
}
.nav__panel a::after{display:none}
.nav__panel a:hover{background:var(--gray-50);color:var(--blue-500)}
.nav__panel .nav__all{margin-top:4px;border-top:1px solid var(--gray-100);color:var(--blue-500)}
@media(max-width:1080px){.nav__panel{display:none}}

/* Subenlaces de familia dentro del menú móvil */
.drawer .drawer__sub{
  font-size:1.05rem;opacity:.72;padding-left:1.1rem;
  border-left:2px solid rgba(255,255,255,.22);
}
.drawer .drawer__sub:hover{opacity:1}

/* Lista de disciplinas bajo el titular de portada */
.hero__kicker{
  font-family:var(--font-head);font-weight:700;font-size:1.02rem;
  color:var(--cyan-400);margin:0 0 1rem;letter-spacing:.01em;line-height:1.5;
}

/* Aviso breve bajo el encabezado de una sección */
.nota{
  margin:.9rem auto 0;max-width:640px;font-size:.92rem;color:var(--gray-600);
  background:var(--gray-50);border:1px solid var(--gray-100);
  border-radius:12px;padding:.7rem 1rem;
}
.section-head.center .nota{text-align:center}


/* ==========================================================================
   Tono sobrio — el cliente pidió una web "más seria y sencilla"
   (referencia: airnou.com). Esta capa aplana lo que quedaba llamativo:
   cápsulas, degradados, elevaciones y animaciones de entrada.
   ========================================================================== */

/* Botones rectangulares, sin cápsula ni sombra de color */
.btn{border-radius:4px;box-shadow:none;letter-spacing:0}
.btn:hover{transform:none;box-shadow:none}

/* Tarjetas: borde fino, sin levitar al pasar por encima */
.famcard,.svccard,.pcard,.infocard,.formcard,.trust__card,.aside__box,.aside__links,.quote,.map{
  border-radius:6px;box-shadow:none;
}
.famcard:hover,.svccard:hover,.pcard:hover{
  transform:none;box-shadow:var(--shadow-sm);border-color:var(--gray-200);
}
.famcard__media img,.svccard__media img,.pcard__media img{transition:none}
.famcard:hover .famcard__media img,
.svccard:hover .svccard__media img,
.pcard:hover .pcard__media img{transform:none}
.svccard::before{display:none}
.svccard__ico{border-radius:4px;box-shadow:none;background:rgba(255,255,255,.94)}
.svccard:hover .svccard__ico{transform:none}
.famcard__list a{border-radius:3px}

/* Sin degradados en iconos ni etiquetas */
.trust__icon,.pagehead__ico{border-radius:4px;background:var(--gray-50);color:var(--blue-500)}
.hero__badge{border-radius:4px}
.pcard__badge,.famcard__tag{border-radius:3px}

/* El contenido está desde el principio: nada aparece al hacer scroll */
.reveal,.reveal.is-in{opacity:1;transform:none;transition:none}

/* Menú desplegable más plano */
.nav__panel{border-radius:6px;box-shadow:var(--shadow)}
.nav__panel a{border-radius:4px}

/* Botón flotante de WhatsApp discreto */
.fab{border-radius:6px;box-shadow:var(--shadow)}


/* ==========================================================================
   Paleta sencilla (referencia: airnou.com)
   Base blanca y gris claro, un solo azul de acento y las cabeceras de página
   en claro en lugar del bloque azul marino.
   ========================================================================== */

/* Cabecera de las páginas interiores: gris muy claro y texto oscuro */
.pagehead{
  background:var(--gray-50);color:var(--gray-800);
  border-bottom:1px solid var(--gray-100);
  padding:calc(var(--header-h) + 48px) 0 44px;
}
.pagehead__media{opacity:.13}
.pagehead__media img{opacity:1}
.pagehead__media::after{
  background:linear-gradient(90deg,rgba(245,246,247,.94),rgba(245,246,247,.7));
}
.pagehead h1{color:var(--navy-800)}
.pagehead p{color:var(--gray-600)}
.crumbs{color:var(--gray-400)}
.crumbs a{color:var(--gray-600)}
.crumbs a:hover{color:var(--blue-500)}
.pagehead__ico{background:#fff;border:1px solid var(--gray-200);color:var(--blue-500)}

/* Los bloques oscuros que quedan (pie, franja de contacto) usan el gris
   pizarra, no un azul: menos color en toda la página. */
.section--navy .eyebrow{color:var(--blue-300)}
.section--navy .eyebrow::before{background:var(--blue-300)}
.section--navy{color:#c9ced4}
.section--navy .step p,.section--navy .zone li{color:#aab1b9}

/* Sombras y bordes: una sola línea fina, sin halos de color */
.header.is-stuck{box-shadow:0 1px 0 var(--gray-200)}
.hero__badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}


/* ==========================================================================
   Más sencilla todavía: cabeceras planas y menos adornos
   ========================================================================== */

/* Cabecera de página: gris plano, sin fotografía de fondo */
.pagehead__media{display:none}
.pagehead__ico{display:none}
.pagehead{padding:calc(var(--header-h) + 40px) 0 36px}

/* El antetítulo pierde la rayita y se queda en texto */
.eyebrow::before{display:none}
.eyebrow{gap:0}

/* Las tarjetas de servicio no llevan icono sobre la fotografía */
.svccard__ico{display:none}

/* Hero sin la trama decorativa encima de la fotografía */
.hero__grid{display:none}


/* ==========================================================================
   Animaciones al estilo de la referencia (airnou.com)
   Las mismas curvas y direcciones que usa: entrada corta con un punto de
   rebote, y el panel que sube sobre la fotografía al pasar por encima.
   ========================================================================== */

@keyframes jgdr-btt{from{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none}}
@keyframes jgdr-ltr{from{opacity:0;transform:translateX(-10%)}to{opacity:1;transform:none}}
@keyframes jgdr-rtl{from{opacity:0;transform:translateX(10%)}to{opacity:1;transform:none}}

.reveal{opacity:0;transform:none;transition:none;animation:none}
.reveal.is-in{
  opacity:1;
  animation:.7s cubic-bezier(.175,.885,.32,1.275) both jgdr-btt;
}

/* Escalonado de las tarjetas dentro de una misma fila */
.reveal[data-d="1"].is-in{animation-delay:.09s}
.reveal[data-d="2"].is-in{animation-delay:.18s}
.reveal[data-d="3"].is-in{animation-delay:.27s}
.reveal[data-d="4"].is-in{animation-delay:.36s}

/* Los bloques a dos columnas entran uno desde cada lado, como en la referencia */
.grid--split>.reveal.is-in:first-child{animation-name:jgdr-ltr}
.grid--split>.reveal.is-in:last-child{animation-name:jgdr-rtl}

/* Quien prefiera no ver movimiento, no lo ve */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;animation:none}
}

/* --- Panel que sube sobre la fotografía (vc_gitem-animate-slideTop) --- */
.pcard__media::before{
  content:"";position:absolute;inset:-100% 0 auto 0;height:100%;z-index:2;
  background:rgba(27,79,138,.82);transition:top .55s var(--ease),inset .55s var(--ease);
}
.pcard:hover .pcard__media::before{inset:0 0 auto 0}
.pcard__badge{z-index:3}

/* La fotografía vuelve a acercarse un poco, como hace la referencia */
.famcard__media img,.svccard__media img,.pcard__media img{transition:transform .7s var(--ease)}
.famcard:hover .famcard__media img,
.svccard:hover .svccard__media img,
.pcard:hover .pcard__media img{transform:scale(1.05)}


/* ==========================================================================
   Estética de la referencia (airnou.com), con el contenido de JGDR
   Versales pesadas, rayita corta bajo el título, número grande en color y
   botones rectangulares con el rótulo en versales.
   ========================================================================== */

/* --- Títulos de sección: versales y rayita corta debajo --- */
.section-head h2{
  text-transform:uppercase;font-weight:800;letter-spacing:.005em;
}
.section-head h2::after{
  content:"";display:block;width:58px;height:3px;background:var(--blue-500);
  margin:1rem 0 0;
}
.section-head.center h2::after{margin-inline:auto}
.section--navy .section-head h2::after{background:var(--cyan-400)}

/* --- Botones con el rótulo en versales --- */
.btn{text-transform:uppercase;letter-spacing:.06em;font-size:.9rem}
.btn--lg{font-size:.97rem}
.btn--sm{font-size:.8rem}
.btn--ghost{--bg:transparent;--fg:var(--blue-500);--bd:var(--blue-500);border-width:2px}
.btn--ghost:hover{--bg:var(--blue-500);--fg:#fff;--bd:var(--blue-500)}

/* --- Tarjetas de familia con el número grande, como los bloques numerados --- */
.famcard{border:0;background:#fff}
.famcard:hover{box-shadow:none;transform:none}
.famcard__media{aspect-ratio:16/11;border-radius:0}
.famcard__media::after{display:none}
.famcard__body{padding:30px 4px 8px}
.famcard__num{
  display:block;font-family:var(--font-head);font-weight:800;
  font-size:2.9rem;line-height:1;color:var(--blue-500);margin-bottom:.5rem;
}
.famcard__body h3{
  text-transform:uppercase;font-weight:800;font-size:1.28rem;
  letter-spacing:.01em;margin-bottom:.7rem;
}
.famcard__body p{font-size:.97rem}
.famcard__list{margin-bottom:1.5rem}

/* --- Zonas: tres bloques planos, el central relleno --- */
.zones{gap:0}
.zone{background:var(--gray-50);padding:38px 34px;border:0}
.zone h3{
  text-transform:uppercase;font-weight:800;font-size:1.18rem;letter-spacing:.05em;
  margin-bottom:0;color:var(--navy-800);
}
.zone h3::after{
  content:"";display:block;width:44px;height:3px;background:var(--blue-500);
  margin:.9rem 0 1.2rem;
}
.zone--destacada{background:var(--blue-500)}
.zone--destacada h3{color:#fff}
.zone--destacada h3::after{background:rgba(255,255,255,.65)}
.zone--destacada li{color:#e4ecf4}
.zone--destacada li::before{background:rgba(255,255,255,.5)}

/* --- El titular de portada, con más peso --- */
.hero h1{text-transform:uppercase;font-weight:800}
.hero__kicker{text-transform:uppercase;letter-spacing:.06em;font-size:.92rem}


/* ==========================================================================
   Portada: el texto del hero entra escalonado
   Ocurre al cargar, una sola vez. Misma curva que el resto del sitio.
   ========================================================================== */

@keyframes jgdr-hero-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
/* La parte destacada del titular se descubre de izquierda a derecha */
@keyframes jgdr-hero-wipe{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 -.2em 0 0)}
}

.hero__inner>*{
  opacity:0;
  animation:.8s cubic-bezier(.175,.885,.32,1.275) both jgdr-hero-up;
}
.hero__inner>*:nth-child(1){animation-delay:.15s}
.hero__inner>*:nth-child(2){animation-delay:.30s}
.hero__inner>*:nth-child(3){animation-delay:.45s}
.hero__inner>*:nth-child(4){animation-delay:.60s}
.hero__inner>*:nth-child(5){animation-delay:.75s}
.hero__inner>*:nth-child(6){animation-delay:.90s}

.hero h1 em{
  animation:.7s cubic-bezier(.22,.61,.36,1) .55s both jgdr-hero-wipe;
}

/* Los tres apoyos de abajo entran uno detrás de otro */
.hero__mini>div{
  opacity:0;
  animation:.7s cubic-bezier(.175,.885,.32,1.275) both jgdr-hero-up;
}
.hero__mini>div:nth-child(1){animation-delay:1.00s}
.hero__mini>div:nth-child(2){animation-delay:1.12s}
.hero__mini>div:nth-child(3){animation-delay:1.24s}

@media (prefers-reduced-motion:reduce){
  .hero__inner>*,.hero__mini>div,.hero h1 em{opacity:1;animation:none;clip-path:none}
}

/* ==========================================================================
   Maqueta de la portada (la que pasó el cliente)
   Cabecera con el menú centrado y el teléfono a la derecha, hero con
   distintivo y franja de motivos, tarjetas de servicio con icono y banda
   de sectores.
   ========================================================================== */

/* --- Cabecera --- */
.header{height:auto;padding:10px 0}
.header.is-stuck{height:auto;padding:6px 0}
.header__inner{gap:1.2rem}
.logo__img{height:56px}
.header.is-stuck .logo__img{height:44px}
.nav{margin-inline:auto;gap:.3rem}
.nav>a,.nav__item>a{
  text-transform:uppercase;letter-spacing:.07em;font-size:.82rem;font-weight:700;
}
.header__cta{
  display:grid;grid-template-columns:auto auto;align-items:center;
  column-gap:.7rem;row-gap:.1rem;padding-left:1.4rem;
  border-left:1px solid var(--gray-200);
}
.header__tel{display:inline-flex;align-items:center;gap:.5rem;color:var(--navy-800)}
.header__tel-ico{
  width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--blue-500);color:#fff;
}
.header__tel-ico svg{width:15px;height:15px}
.header__tel-num{font-family:var(--font-head);font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.header__tel:hover .header__tel-num{color:var(--blue-500)}
.header__wa{width:28px;height:28px;color:var(--wa)}
.header__wa svg{width:28px;height:28px}
.header__claim{
  grid-column:1 / -1;font-size:.78rem;color:var(--gray-600);
  text-align:center;margin-top:-.1rem;
}
.burger{display:none}

/* --- Hero --- */
.hero{padding-bottom:0;align-items:stretch}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,32,54,.95) 0%,rgba(16,32,54,.86) 38%,rgba(16,32,54,.35) 100%);
}
.hero__inner{max-width:620px;padding:clamp(38px,6vw,70px) 0 46px}
.hero__badge{
  display:inline-flex;align-items:center;gap:.85rem;background:none;border:0;padding:0;
  font-size:.86rem;line-height:1.25;text-transform:uppercase;letter-spacing:.06em;color:#dbe4ef;
}
.hero__badge b{
  background:var(--blue-500);color:#fff;border-radius:6px;
  padding:.55rem .9rem;font-family:var(--font-head);font-weight:800;font-size:1.05rem;
  letter-spacing:0;text-transform:none;
}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.03;margin:1.3rem 0 1rem}
.hero h1 em{color:var(--blue-300)}
.hero__claim{
  font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(1.2rem,2.4vw,1.65rem);line-height:1.25;margin:0 0 1rem;
}
.hero__kicker{
  font-family:var(--font-head);font-weight:700;color:#fff;text-transform:none;
  letter-spacing:0;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.45;margin:0 0 1.2rem;
}
.hero__text{color:#c8d4e3;font-size:1rem;max-width:52ch;margin-bottom:1.9rem}
.hero__actions{flex-direction:column;align-items:flex-start;gap:.75rem}
.hero__actions .btn{min-width:300px;justify-content:flex-start;gap:.7rem}
.hero__actions .btn svg{width:18px;height:18px}
.hero__actions .btn svg:last-child{margin-left:auto}
.btn--cta{--bg:#d8232a;--fg:#fff;--bd:#d8232a}
.btn--cta:hover{--bg:#b81c22;--bd:#b81c22}

/* Franja de motivos, dentro del propio hero */
.hero__motivos{
  margin-top:auto;border-top:1px solid rgba(255,255,255,.16);
  background:rgba(8,18,32,.42);padding:18px 0;
}
.hero__motivos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.motivo{display:flex;align-items:center;gap:.8rem;color:#fff}
.motivo svg{width:30px;height:30px;flex:none;color:#fff;opacity:.9}
.motivo span{font-size:.84rem;line-height:1.3;text-transform:uppercase;letter-spacing:.05em}
.motivo b{font-weight:700}

/* --- Tarjetas de servicio de la maqueta --- */
.mcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gray-100);border-radius:8px;overflow:hidden;
}
.mcard__media{aspect-ratio:16/11;overflow:hidden;background:var(--gray-100)}
.mcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mcard:hover .mcard__media img{transform:scale(1.05)}
.mcard__body{
  padding:22px 20px 24px;display:flex;flex-direction:column;align-items:center;
  text-align:center;flex:1;background:var(--gray-50);
}
.mcard__ico{color:var(--blue-500);margin-bottom:.7rem}
.mcard__ico svg{width:30px;height:30px}
.mcard h3{
  font-size:1rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--navy-800);margin-bottom:.45rem;
}
.mcard p{color:var(--gray-600);font-size:.92rem;margin-bottom:1.2rem}
.mcard .btn{margin-top:auto}

/* --- Banda de sectores --- */
.sectores{position:relative;padding:clamp(48px,7vw,78px) 0;color:#fff;overflow:hidden}
.sectores__bg{position:absolute;inset:0;z-index:-2}
.sectores__bg img{width:100%;height:100%;object-fit:cover}
.sectores__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,32,54,.93),rgba(16,32,54,.62));
}
.sectores__inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.sectores h2{
  color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);margin:0;text-transform:none;
}
.sectores h2::after{
  content:"";display:block;width:70px;height:3px;background:var(--blue-300);margin-top:1.1rem;
}
.sectores__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sector{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.sector svg{width:38px;height:38px;color:#fff}
.sector span{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}

@media(max-width:1080px){
  .nav{display:none}
  /* Sin el reclamo, la rejilla dejaba el botón del menú en una segunda fila:
     en pantallas medianas los tres elementos van en línea. */
  .header__cta{display:flex;align-items:center;gap:.8rem;border-left:0;padding-left:0}
  .header__claim{display:none}
  /* El botón del menú es una rejilla: con inline-flex las tres rayas se
     colocaban en fila y parecían puntos. */
  .burger{display:grid}
}
@media(max-width:900px){
  .hero__motivos-grid{grid-template-columns:repeat(2,1fr)}
  .sectores__inner{grid-template-columns:1fr;gap:28px}
}
@media(max-width:680px){
  /* En el móvil no cabe el logotipo entero junto al teléfono: se deja el
     logotipo y el icono de llamar, que la barra inferior ya ofrece llamar
     y WhatsApp. */
  .logo__img{height:32px}
  .header__tel-num,.header__wa{display:none}
  .hero__actions .btn{min-width:0;width:100%}
  .sectores__grid{grid-template-columns:repeat(2,1fr);gap:22px}
}

/* ==========================================================================
   Hero a dos columnas, como en la maqueta: texto a la izquierda y la
   fotografía de la furgoneta rotulada a la derecha.
   ========================================================================== */
.hero{display:block;padding:0;background:var(--navy-900);min-height:0}
.hero__split{
  display:grid;grid-template-columns:1fr 1.08fr;align-items:stretch;
  min-height:min(68vh,620px);
}
.hero__col{
  display:flex;align-items:center;
  padding:calc(var(--header-h) + clamp(20px,2.5vw,34px)) clamp(24px,3.5vw,48px) clamp(34px,5vw,64px)
          max(22px,calc((100vw - var(--container)) / 2 + 22px));
}
.hero__inner{max-width:560px;width:100%;padding:0}
.hero__foto{position:relative;overflow:hidden;background:transparent}
/* La fotografía no acaba en un corte: se funde con el azul del hero por los
   cuatro lados mediante una máscara degradada. */
.hero__foto img{
  width:100%;height:100%;object-fit:cover;object-position:42% center;
  -webkit-mask-image:radial-gradient(118% 132% at 64% 50%,#000 38%,rgba(0,0,0,.72) 64%,transparent 94%);
  mask-image:radial-gradient(118% 132% at 64% 50%,#000 38%,rgba(0,0,0,.72) 64%,transparent 94%);
}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,32,54,.75),rgba(16,32,54,0) 34%);
}
.hero__motivos{margin-top:0;background:rgba(8,18,32,.55)}

@media(max-width:900px){
  .hero__split{grid-template-columns:1fr;min-height:0}
  .hero__col{padding:calc(var(--header-h) + 26px) 22px 34px}
  .hero__foto{height:260px;order:2}
  .hero__foto img{
    -webkit-mask-image:radial-gradient(130% 150% at 55% 45%,#000 34%,rgba(0,0,0,.7) 62%,transparent 92%);
    mask-image:radial-gradient(130% 150% at 55% 45%,#000 34%,rgba(0,0,0,.7) 62%,transparent 92%);
  }
  .hero__foto::after{background:linear-gradient(180deg,rgba(16,32,54,.6),rgba(16,32,54,0) 45%)}
}

/* ==========================================================================
   Hero: la fotografía ocupa el fondo y el titular se superpone a ella
   ========================================================================== */
.hero__split{display:block;position:relative;min-height:min(72vh,640px)}
.hero__foto{position:absolute;top:0;right:0;bottom:0;left:30%;z-index:0}
.hero__foto img{object-position:46% center}
.hero__col{
  position:relative;z-index:2;max-width:var(--container);margin-inline:auto;
  padding:calc(var(--header-h) + clamp(22px,3vw,40px)) 22px clamp(36px,5vw,64px);
  display:flex;align-items:center;min-height:inherit;
}
.hero__inner{max-width:640px}
/* Un velo por debajo del texto para que se lea sobre la fotografía */
.hero__col::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(16,32,54,.94) 0%,rgba(16,32,54,.88) 34%,rgba(16,32,54,.45) 62%,rgba(16,32,54,0) 86%);
  pointer-events:none;
}
.hero__foto::after{display:none}

@media(max-width:900px){
  .hero__split{min-height:0}
  .hero__foto{position:relative;left:auto;height:250px;order:2}
  .hero__col{padding:calc(var(--header-h) + 26px) 22px 34px;min-height:0}
  .hero__col::before{background:linear-gradient(180deg,rgba(16,32,54,.95),rgba(16,32,54,.9))}
}

/* ==========================================================================
   Pie de página: Empresa y Contacto, con icono en cada dato
   ========================================================================== */
.footer__grid{grid-template-columns:1.5fr 1fr 1.4fr}
.footer__col h4{
  text-transform:uppercase;letter-spacing:.12em;font-size:.86rem;
  color:#fff;margin-bottom:1.1rem;
}
.footer__nav{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;font-size:1rem}
.footer__nav li{padding:0}
.footer__datos{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.95rem;font-size:1rem}
.footer__datos li{padding:0}
.footer__datos li{display:flex;align-items:center;gap:.75rem}
.footer__datos svg{width:19px;height:19px;flex:none;color:var(--blue-300)}
.footer__sede{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1.15rem 0;border-top:1px solid rgba(255,255,255,.12);
}
.footer__sede:first-of-type{border-top:0;padding-top:0}
.footer__sede svg{width:19px;height:19px;flex:none;color:var(--blue-300);margin-top:.15rem}
.footer__sede address{font-style:normal;font-size:.98rem;line-height:1.55;color:#b9c6d6}
.footer__sede b{display:block;color:#fff;font-weight:700}

@media(max-width:900px){
  .footer__grid{grid-template-columns:1fr;gap:30px}
}

/* ==========================================================================
   Franja de contacto del final de la portada (como en la maqueta)
   ========================================================================== */
.franja{background:#fff;border-top:1px solid var(--gray-100);padding:26px 0}
.franja__grid{
  display:grid;grid-template-columns:1fr 1.2fr 1fr auto;
  align-items:center;gap:0;
}
.franja__item{
  display:flex;align-items:center;gap:.85rem;
  padding:0 26px;border-right:1px solid var(--gray-100);
  font-size:.92rem;color:var(--gray-600);line-height:1.4;
}
.franja__item:first-child{padding-left:0}
.franja__item svg{width:26px;height:26px;flex:none;color:var(--blue-500)}
.franja__tel{
  font-family:var(--font-head);font-weight:800;font-size:1.22rem;
  color:var(--navy-800);letter-spacing:-.01em;
}
.franja__tel:hover{color:var(--blue-500)}
.franja__wa{display:inline-block;width:20px;height:20px;color:var(--wa);vertical-align:-3px;margin-left:.4rem}
.franja__wa svg{width:20px;height:20px;color:var(--wa)}
.franja__item small{font-size:.86rem;color:var(--gray-600)}
.franja__firma{padding-left:26px}
.franja__firma img{height:60px;width:auto;mix-blend-mode:multiply}

@media(max-width:1080px){
  .franja__grid{grid-template-columns:1fr 1fr;gap:20px 0}
  .franja__item:nth-child(2n){border-right:0}
  .franja__item:nth-child(-n+2){padding-left:0}
  .franja__firma{grid-column:1 / -1;padding-left:0}
}
@media(max-width:680px){
  .franja__grid{grid-template-columns:1fr}
  .franja__item{border-right:0;padding:0}
  .franja__firma{padding-left:0}
}

/* ==========================================================================
   Segunda maqueta: hero partido en diagonal y cinco tarjetas de servicio
   ========================================================================== */

/* --- Hero --- */
.hero{position:relative;display:block;padding:0;background:#0d2038;overflow:hidden}
.hero__fotos{position:absolute;inset:0;z-index:0}
.hero__vivienda,.hero__industria{position:absolute;top:0;bottom:0;overflow:hidden}
.hero__vivienda img,.hero__industria img{width:100%;height:100%;object-fit:cover;display:block}
/* Las dos fotografías comparten exactamente la misma diagonal, expresada en
   porcentaje del ancho de la ventana: arriba al 74 %, abajo al 66 %. Así no
   queda ninguna cuña oscura entre ellas, y la raya blanca se dibuja sobre esa
   misma diagonal en lugar de girar una barra a ojo. */
.hero__vivienda{left:0;right:26%;clip-path:polygon(0 0,100% 0,89.2% 100%,0 100%)}
.hero__industria{left:66%;right:0;clip-path:polygon(23.5% 0,100% 0,100% 100%,0 100%)}
.hero__industria img{object-position:center}
.hero__fotos::after{
  content:"";position:absolute;inset:0;z-index:3;background:#fff;
  clip-path:polygon(74% 0,75.5% 0,67.5% 100%,66% 100%);
}

.hero .container{position:relative;z-index:2}
.hero__inner{
  max-width:640px;
  padding:calc(var(--header-h) + clamp(18px,2.4vw,30px)) 0 clamp(26px,3.4vw,44px);
}
.hero__badge{
  display:inline-flex;align-items:center;gap:.9rem;background:none;border:0;padding:0;margin:0 0 1rem;
  font-size:.84rem;line-height:1.25;text-transform:uppercase;letter-spacing:.07em;color:#cfdcec;
}
.hero__badge b{
  border:2px solid var(--blue-400);border-radius:8px;background:rgba(13,32,56,.5);
  padding:.5rem .95rem;font-family:var(--font-head);font-weight:800;font-size:1.02rem;
  letter-spacing:0;text-transform:none;color:#fff;
}
.hero h1{
  color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.02;
  text-transform:uppercase;font-weight:800;margin:0 0 .9rem;letter-spacing:-.01em;
}
.hero h1 em{font-style:normal;color:#2f9bff}
.hero__claim{
  font-family:var(--font-head);font-weight:700;color:#fff;
  font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.25;margin:0 0 .9rem;
}
.hero__kicker{
  font-family:var(--font-body);font-weight:400;color:#dbe4ef;text-transform:none;
  letter-spacing:0;font-size:clamp(.97rem,1.5vw,1.08rem);line-height:1.5;margin:0 0 1.3rem;
}
.hero__motivos{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0 0 1.5rem;
  background:none;border:0;padding:0;
}
.hero__motivos .motivo{
  display:flex;align-items:center;gap:.6rem;color:#fff;
  padding:0 1.05rem;border-right:1px solid rgba(255,255,255,.22);
}
.hero__motivos .motivo:first-child{padding-left:0}
.hero__motivos .motivo:last-child{border-right:0;padding-right:0}
.hero__motivos .motivo svg{width:26px;height:26px;flex:none;opacity:.95}
.hero__motivos .motivo span{font-size:.76rem;line-height:1.3;text-transform:uppercase;letter-spacing:.04em}
.hero__actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:.9rem}
.hero__actions .btn{min-width:250px;justify-content:flex-start;gap:.7rem}
.hero__actions .btn svg{width:18px;height:18px}
.hero__actions .btn svg:last-child{margin-left:auto}
.btn--outline-light{--bg:rgba(13,32,56,.55);--fg:#fff;--bd:rgba(255,255,255,.45)}

/* --- Cinco tarjetas de servicio --- */
.tcards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tcard{
  display:flex;flex-direction:column;background:var(--gray-50);
  border:1px solid var(--gray-100);border-radius:8px;padding:16px 16px 14px;
}
.tcard__top{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem}
.tcard__ico{color:var(--blue-500);flex:none}
.tcard__ico svg{width:26px;height:26px}
.tcard h3{
  font-size:.84rem;text-transform:uppercase;letter-spacing:.03em;
  color:var(--navy-800);margin:0 0 .3rem;line-height:1.25;
}
.tcard__top p{color:var(--gray-600);font-size:.85rem;margin:0;line-height:1.4}
.tcard__media{border-radius:6px;overflow:hidden;aspect-ratio:16/9;background:var(--gray-100)}
.tcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tcard:hover .tcard__media img{transform:scale(1.05)}
.tcard__more{
  margin-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--blue-500);
}
.tcard__more svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.tcard:hover .tcard__more svg{transform:translateX(4px)}

/* --- Franja de contacto --- */
.franja__grid{grid-template-columns:1fr 1.15fr .8fr auto}
.franja__firma img{height:26px;mix-blend-mode:multiply}

@media(max-width:1100px){
  .tcards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .hero__vivienda{clip-path:none}
  .hero__industria{display:none}
  .hero__inner{max-width:none;padding:calc(var(--header-h) + 26px) 0 34px}
  .hero__motivos{gap:.55rem 1rem;margin-bottom:1.7rem}
  .hero__motivos .motivo{padding:0;border-right:0;flex:1 1 44%;gap:.5rem}
  .hero__motivos .motivo svg{width:22px;height:22px}
  .hero__motivos .motivo span{font-size:.71rem}
  .hero__actions .btn{min-width:0;flex:1 1 100%}
  .tcards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .tcards{grid-template-columns:1fr}
}

/* ==========================================================================
   Fotografías nítidas y rótulos manuscritos como texto
   Las de la maqueta salían a 350 px de alto y se ampliaban casi al doble.
   ========================================================================== */

/* El velo oscuro sobre la mitad de la vivienda, que antes venía en la imagen */
.hero__vivienda::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(13,32,56,.96) 0%,rgba(13,32,56,.9) 36%,rgba(13,32,56,.5) 66%,rgba(13,32,56,.2) 100%);
}
.hero__industria::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,32,56,.35),rgba(13,32,56,.15));
}

/* Rótulos manuscritos */
.hero__rotulo{
  position:absolute;z-index:2;
  font-family:'Caveat',cursive;font-weight:700;color:#fff;
  font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.1;text-align:center;
  text-shadow:0 2px 14px rgba(5,16,30,.55);
}
.hero__rotulo::after{
  content:"";display:block;height:3px;border-radius:3px;
  background:#5cb4ff;margin:.35rem auto 0;width:78%;
}
.hero__vivienda .hero__rotulo{top:14%;right:9%;max-width:220px}
.hero__rotulo--empresa{top:34%;left:50%;transform:translateX(-50%);max-width:230px}

/* Firma de la franja final */
.franja__firma{
  font-family:'Caveat',cursive;font-weight:600;
  font-size:1.22rem;color:var(--navy-800);margin:0;line-height:1.2;
  text-align:right;padding-left:26px;
}

@media(max-width:900px){
  /* En vertical no hay dos mitades: se ve sólo la vivienda, sin la raya
     diagonal ni los rótulos, que se cruzaban con el texto. */
  .hero__fotos::after{display:none}
  .hero__rotulo{display:none}
  /* Con el titular partido en tres líneas, el interlineado de escritorio
     (1.02) se quedaba corto y la última línea se salía de la caja. */
  .hero h1{font-size:clamp(1.75rem,7.4vw,2.5rem);line-height:1.14}
  .hero__claim{font-size:1.12rem}
  .hero__vivienda::after{
    background:linear-gradient(180deg,rgba(13,32,56,.93) 0%,rgba(13,32,56,.9) 55%,rgba(13,32,56,.94) 100%);
  }
  .franja__firma{text-align:left;padding-left:0}
}

/* La franja de contacto se redefinió más abajo que sus medias queries, así que
   en el móvil seguía saliendo a cuatro columnas. Se vuelven a declarar aquí. */
@media(max-width:1080px){
  .franja__grid{grid-template-columns:1fr 1fr;gap:18px 0}
  .franja__firma{grid-column:1 / -1;padding-left:0;text-align:left}
}
@media(max-width:680px){
  .franja{padding:22px 0}
  .franja__grid{grid-template-columns:1fr;gap:14px}
  .franja__item{border-right:0;padding:0}
}

/* El menú desplegado se salía de la pantalla en móviles cortos y había que
   desplazarlo para llegar al último botón: se aprieta un poco. */
@media(max-width:1080px){
  .drawer{padding-bottom:96px;gap:0}
  .drawer a{font-size:1.3rem;padding:.58rem 0}
  .drawer .drawer__sub{font-size:1rem;padding:.42rem 0 .42rem 1.1rem}
  .drawer .drawer__actions{margin-top:1.2rem;gap:.6rem}
}

/* Las direcciones enlazan con la ficha de la empresa en Google Maps */
.infocard address a,.footer__sede address a{color:inherit;display:block}
.infocard address a:hover,.footer__sede address a:hover{color:var(--blue-500)}
.footer__sede address a:hover b{color:var(--blue-300)}

/* La cabecera de la maqueta fijó el logotipo en 56 px y esa regla, al ir más
   abajo en la hoja, ganaba a la del móvil: el logotipo salía a 302 px de ancho
   y empujaba el botón del menú fuera de la pantalla. Se vuelve a acotar. */
@media(max-width:680px){
  .logo__img,.header.is-stuck .logo__img{height:30px}
  .header__tel-num,.header__wa,.header__claim{display:none}
  .header__inner{gap:.6rem}
}
@media(max-width:400px){
  .logo__img,.header.is-stuck .logo__img{height:26px}
}

/* En el móvil, los enlaces sueltos eran demasiado bajos para el dedo: se les
   da altura suficiente sin cambiar cómo se ven. */
@media(max-width:900px){
  .tcard__more,.franja__tel,.footer__nav a,.footer__datos a,.footer__legal a,.famcard__more,
  .crumbs a,.aside__links a,.famcard__list a,.linklist a{
    min-height:40px;display:inline-flex;align-items:center;
  }
  .famcard__list a{min-height:36px}
  .footer__nav li,.footer__datos li{padding:.1rem 0}
  .franja__item{min-height:40px}
}

/* ==========================================================================
   Área de cobertura (como la maqueta): fondo azul claro con la silueta de la
   ciudad, tres tarjetas blancas y la banda de la furgoneta.
   ========================================================================== */
.cobertura{
  position:relative;overflow:hidden;
  padding:clamp(48px,6vw,78px) 0 clamp(40px,5vw,64px);
  background:linear-gradient(180deg,#eef4fb 0%,#f7fafd 55%,#ffffff 100%);
}
/* Silueta de ciudad y chinchetas, muy tenues */
.cobertura__fondo{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-repeat:no-repeat,no-repeat;
  background-position:left bottom,right 6% top 12%;
  background-size:min(760px,62%) auto,min(240px,26%) auto;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 150' fill='%23b9d2ea'%3E%3Cpath d='M0 150V96h22v-18h16v18h20V70h16v26h22v-40h10l8-14 8 14h10v40h20V86h18v-20h10v20h18v30h26V74h16v42h22V60h8l6-12 6 12h8v56h24V92h18v24h26V78h16v38h22V100h20v16h26V86h18v30h24V66h14v50h24V96h20v20h28V80h16v36h22v-26h18v26h24v34z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='%234f8fc4'%3E%3Cpath d='M40 10a11 11 0 0 0-11 11c0 8 11 21 11 21s11-13 11-21a11 11 0 0 0-11-11zm0 15a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3Cpath d='M150 0a11 11 0 0 0-11 11c0 8 11 21 11 21s11-13 11-21A11 11 0 0 0 150 0zm0 15a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3Cpath d='M112 62a11 11 0 0 0-11 11c0 8 11 21 11 21s11-13 11-21a11 11 0 0 0-11-11zm0 15a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E");
}
.cobertura .container{position:relative;z-index:1}

.cobertura__head{text-align:center;margin-bottom:clamp(28px,3.5vw,44px)}
.cobertura__eyebrow{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--font-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--blue-500);
  margin-bottom:.9rem;
}
.cobertura__eyebrow::before,.cobertura__eyebrow::after{
  content:"";width:34px;height:1px;background:var(--blue-300);
}
.cobertura__head h2{
  text-transform:uppercase;font-weight:800;color:var(--navy-800);
  font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.15;margin:0 0 .8rem;
}
.cobertura__head h2::after{display:none}
.cobertura__head p{color:var(--gray-600);font-size:1.02rem;margin:0;max-width:62ch;margin-inline:auto}

.cobertura__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.zcard{
  background:#fff;border:1px solid #e4edf6;border-radius:14px;
  padding:26px 24px 22px;box-shadow:0 6px 22px rgba(27,79,138,.07);
}
.zcard__head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.zcard__ico{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#e8f1fa;color:var(--blue-500);
}
.zcard__ico svg{width:26px;height:26px}
.zcard h3{
  font-size:1.04rem;text-transform:uppercase;letter-spacing:.02em;
  color:var(--navy-800);margin:0;line-height:1.2;
}
.zcard h3::after{
  content:"";display:block;width:42px;height:2px;background:var(--blue-500);
  margin-top:.5rem;
}
.zcard__lista{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.zcard__lista li{display:flex;align-items:center;gap:.6rem;padding:.26rem 0;font-size:.94rem;color:var(--gray-600)}
.zcard__lista svg{width:14px;height:14px;flex:none;color:var(--blue-400)}

.cobertura__nota{
  display:flex;align-items:center;gap:1.1rem;
  margin:clamp(24px,3vw,34px) 0 0;padding:18px 24px;
  background:#e8f1fa;border-radius:12px;color:var(--gray-600);font-size:.97rem;
}
.cobertura__nota svg{width:34px;height:34px;flex:none;color:var(--blue-500)}
.cobertura__nota>span{border-left:1px solid #c6dbee;padding-left:1.1rem}

@media(max-width:900px){
  .cobertura__grid{grid-template-columns:1fr;gap:16px}
  .cobertura__fondo{opacity:.35;background-size:110% auto,38% auto}
  .cobertura__nota{flex-direction:column;align-items:flex-start;gap:.7rem;text-align:left}
  .cobertura__nota>span{border-left:0;padding-left:0}
}

/* ===========================================================================
   FIRMA DE LA EMPRESA
   La línea con la que el cliente cierra el texto de quiénes somos.
   =========================================================================== */
.firma{
  margin-top:1.6rem;
  padding-top:1.1rem;
  border-top:1px solid #e4edf6;
  color:var(--navy-800);
  font-size:1.02rem;
}
.firma strong{ color:var(--blue-500); letter-spacing:.01em; }

/* ===========================================================================
   OBRAS CON FOTOGRAFÍA PROPIA
   Las fotos vienen del móvil del cliente, en vertical y en horizontal
   mezcladas. La galería va en columnas y respeta la proporción de cada una:
   recortarlas todas a un cuadrado obligaría a cortar cabezas y techos.
   =========================================================================== */
.obra{
  border-top:1px solid var(--gray-100);
  padding-top:clamp(28px,3.4vw,46px);
  margin-top:clamp(28px,3.4vw,46px);
}
.obra:first-of-type{border-top:0;padding-top:0;margin-top:0}

.obra__cap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.3rem 1rem;
  margin-bottom:.9rem;
}
.obra__cap h3{font-size:clamp(1.3rem,2vw,1.75rem);margin:0}
.obra__lloc{
  color:var(--gray-600);
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.obra__lloc::before{
  content:"";
  width:20px;height:1px;
  background:var(--blue-300);
  flex:none;
}

.obra__text{color:var(--gray-600);max-width:72ch;margin-bottom:1.2rem}
.obra__text b{color:var(--navy-900)}

.obra__tags{
  list-style:none;
  padding:0;
  margin:0 0 1.7rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.obra__tags li{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.015em;
  color:var(--blue-500);
  background:#eef4fb;
  border:1px solid #dce8f5;
  border-radius:999px;
  padding:.34rem .85rem;
}

.obra__fotos{columns:3;column-gap:14px}
.obra__fotos figure{
  break-inside:avoid;
  margin:0 0 14px;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--gray-100);
}
.obra__fotos img{width:100%;height:auto;display:block;transition:transform .7s var(--ease)}
.obra__fotos figure:hover img{transform:scale(1.05)}
.obra__fotos figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:12px 14px;
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  background:linear-gradient(180deg,transparent,rgba(5,15,31,.85));
}

@media(max-width:900px){.obra__fotos{columns:2}}
@media(max-width:560px){.obra__fotos{columns:1}}


/* ===========================================================================
   LOS DOS BOTONES DEL FORMULARIO
   Mismo peso visual los dos: son dos caminos igual de buenos, no uno
   principal y otro de repuesto. En móvil se apilan, que uno al lado del otro
   no caben sin partir el texto.
   =========================================================================== */
.form-acciones{
  display:grid;
  /* minmax(0,1fr) i no 1fr: amb 1fr la columna no baixa del contingut i el
     botó de WhatsApp, que té el text més llarg, es quedava més ample que el
     del correu. Així els dos surten exactament iguals. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin-top:.2rem;
}
.form-acciones .btn{width:100%;padding-inline:.85rem;font-size:.97rem}

@media(max-width:560px){
  .form-acciones{grid-template-columns:1fr}
}

/* ===========================================================================
   MAPAS DETRÁS DE UN CLIC
   La ficha ocupa el mismo hueco que ocupaba el iframe, para que al pulsar no
   salte la página. El fondo es una trama dibujada en CSS: ni una petición a
   ningún servidor ajeno hasta que el visitante pide el mapa.
   =========================================================================== */
.mapa-previo{
  position:relative;
  height:100%;
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:.55rem;
  padding:clamp(24px,3vw,38px);
  background:
    linear-gradient(0deg, rgba(27,79,138,.05), rgba(27,79,138,.05)),
    repeating-linear-gradient(0deg, #e8eef6 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, #e8eef6 0 1px, transparent 1px 34px),
    #f7fafd;
}
.mapa-previo__pin{
  width:34px;height:34px;
  display:grid;place-items:center;
  color:var(--blue-500);
  margin-bottom:.2rem;
}
.mapa-previo__pin svg{width:100%;height:100%}
.mapa-previo h3{font-size:1.1rem;margin:0}
.mapa-previo__dir{color:var(--gray-600);font-size:.92rem;max-width:34ch;margin:0}
.mapa-previo__boton{margin-top:.6rem}
.mapa-previo__fuera{
  font-size:.88rem;
  color:var(--blue-500);
  font-weight:600;
}
.mapa-previo__aviso{
  margin-top:auto;
  padding-top:1rem;
  color:var(--gray-400);
  font-size:.78rem;
  max-width:36ch;
}

@media(max-width:700px){
  .mapa-previo{min-height:250px}
}

/* ===========================================================================
   AVISO DE COOKIES
   Los dos botones miden lo mismo y pesan lo mismo a propósito: rechazar tiene
   que costar lo mismo que aceptar. Un aviso donde el "no" está escondido o es
   más pequeño que el "sí" es justo lo que sanciona la Agencia.
   =========================================================================== */
.cookies{
  position:fixed;
  left:clamp(12px,2vw,24px);
  right:clamp(12px,2vw,24px);
  bottom:clamp(12px,2vw,24px);
  z-index:70;
  max-width:720px;
  margin-inline:auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.4rem;
  padding:18px 22px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 50px rgba(5,15,31,.22);
  /* L anim entra sola en inserir l element: no depèn de cap classe que
     algú hagi d afegir després, ni de requestAnimationFrame. */
  animation:cookies-entra .35s var(--ease) both;
  transition:transform .3s var(--ease);
}
@keyframes cookies-entra{
  from{transform:translateY(130%)}
  to{transform:none}
}
.cookies.es-fora{transform:translateY(130%)}

.cookies__texto{
  flex:1 1 300px;
  margin:0;
  font-size:.86rem;
  line-height:1.55;
  color:var(--gray-600);
}
.cookies__texto b{color:var(--navy-900)}
.cookies__texto a{color:var(--blue-500);font-weight:600}

.cookies__botones{
  display:flex;
  gap:.6rem;
  flex:0 0 auto;
}
.cookies__botones .btn{min-width:120px}

@media(max-width:560px){
  .cookies{padding:16px}
  .cookies__botones{width:100%}
  .cookies__botones .btn{flex:1;min-width:0}
}

@media (prefers-reduced-motion: reduce){
  .cookies{animation:none;transition:none}
}


/* ---------------------------------------------------------------------------
   INFORMACIÓN BÁSICA DE PROTECCIÓN DE DATOS

   La tabla de primera capa, debajo del formulario de presupuesto.

   Apilada, con el término como etiqueta encima del valor. Dos columnas era lo
   natural para un dl, pero la columna del formulario mide 491px incluso en una
   pantalla de 1440: los valores son frases enteras y se quedaban en 324px, en
   tiras altas y estrechas. Apilado tienen el ancho entero.

   El texto va en --gray-600 y no en --gray-400: sobre blanco, el claro da
   2,4:1 y no se lee. Una información legal ilegible no informa de nada, y la
   norma exige justamente que sea inteligible y de fácil acceso.
   ------------------------------------------------------------------------ */
.rgpd{margin-top:1.5rem;padding:1.15rem 1.25rem;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--gray-50)}
.rgpd__titulo{margin:0 0 .9rem;font-family:var(--font-head);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-800)}
.rgpd dl{margin:0;font-size:.83rem;line-height:1.55}
.rgpd dt{margin-top:.85rem;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-800)}
.rgpd dt:first-of-type{margin-top:0}
.rgpd dd{margin:.15rem 0 0;color:var(--gray-600)}
.rgpd a{color:var(--blue-500);text-decoration:underline}


/* El parany para bots: fuera de pantalla, no en display:none. Algunos bots
   descartan lo explícitamente oculto, y la gracia es que lo rellenen. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}