/* ============================================================
   Ingerkuhl España — stylesheet
   Palette: teal #15475C · sage #C3D7D1 · ink #0e2630
   Fonts:   Anton (display) · Open Sans (body)
   ============================================================ */

:root {
  --teal: #15475c;
  --teal-dark: #0e3444;
  --teal-deep: #0a2833;
  --sage: #c3d7d1;
  --ink: #12242d;
  --text: #384349;
  --muted: #637176; /* contraste AA sobre blanco (5.06:1) y sobre --bg-soft (4.69:1) */
  --white: #ffffff;
  --bg-soft: #f4f7f6;
  --radius: 14px;
  --shadow: 0 18px 40px rgba(10, 40, 51, 0.14);
  --maxw: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grad-brand: linear-gradient(135deg, var(--teal) 0%, #2f7d74 52%, var(--sage) 100%);
  /* Logo accent colours */
  --brand-blue: #1f7fc2;
  --brand-green: #0fa08c;
  --brand-red: #c22030;
  --grad-logo: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-green) 50%, var(--brand-red) 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--text);
  line-height: 1.65;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: "Anton", "Open Sans", sans-serif; font-weight: 400; line-height: 1.05; letter-spacing: 0.01em; color: var(--ink); text-transform: uppercase;
  /* Palabras largas ("internacionales") no caben a 320 px mientras la
     tipografía todavía no ha cargado, y sacaban scroll lateral */
  overflow-wrap: break-word; }

section { padding: 92px 0; }

.center { text-align: center; }

.section-sub {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
}
.section-sub.center { margin-bottom: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(21, 71, 92, 0.35); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: var(--white); transform: translateY(-3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 39, 51, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(195, 215, 209, 0.12);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 10px 30px rgba(6, 22, 30, 0.4); background: rgba(9, 32, 42, 0.98); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand-logo { height: 40px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  color: #dfe9e7;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--sage);
  transition: width 0.25s var(--ease);
}
.main-nav a:hover { color: var(--white); }
.main-nav a:hover::after { width: 100%; }
.lang-badge {
  color: var(--teal-deep);
  background: var(--sage);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 4px 11px;
  border-radius: 6px;
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 2px; background: var(--sage); transition: transform 0.3s, opacity 0.3s; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  color: var(--white);
  background: radial-gradient(120% 90% at 80% 30%, #12455a 0%, #0a2833 55%, #071e28 100%);
  overflow: hidden;
  padding-top: 5vh; /* override the global `section { padding: 92px 0 }` */
}

/* Constantly spinning globe */
.hero-globe {
  position: absolute;
  z-index: 0;
  top: 46%;
  right: -8%;
  /* Capped by viewport HEIGHT too, so the whole circle always fits above the
     transition and never gets cut off at the bottom. */
  width: min(900px, 62vw, 82vh);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 90px 20px rgba(9, 30, 40, 0.55), inset 0 0 60px rgba(6, 22, 30, 0.6);
}
.hero-globe img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178%;
  height: 178%;
  object-fit: cover;
  transform-origin: center;
  animation: globe-spin 90s linear infinite;
}
@keyframes globe-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(8, 33, 43, 0.95) 0%, rgba(10, 40, 51, 0.82) 45%, rgba(10, 40, 51, 0.28) 100%);
}

/* Intro logo (home only): large on load, shrinks toward the top bar on scroll */
.hero-logo {
  width: min(300px, 60vw);
  margin-bottom: 14px;
  transform-origin: left top;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-logo img { width: 100%; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45)); }

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 830px;
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(24px, 23vw, 340px);
  padding-top: clamp(1px, 0.3vh, 10px);
  padding-bottom: 28px;
}
/* Header logo starts hidden on the home page; JS fades it in as you scroll */
.is-home .site-header .brand-logo { opacity: 0; transition: opacity 0.3s ease; }
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sage);
  margin-bottom: 14px;
}
.hero-title {
  color: var(--white);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  margin-bottom: 14px;
}
.hero-text { font-size: 1.05rem; max-width: 440px; color: #e6efed; margin-bottom: 22px; }

/* ---------- Services ---------- */
.services { background: var(--bg-soft); }
.services .section-sub { font-size: 1.15rem; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); max-width: 640px; margin: 0 auto 54px; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.service-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease);
}
.service-card:hover { transform: translateY(-8px); }
.service-media { aspect-ratio: 16 / 9; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.service-card:hover .service-media img { transform: scale(1.06); }
.service-body { padding: 30px 30px 34px; }
.service-body h3 { font-size: 1.5rem; margin-bottom: 12px; color: var(--teal); }
.service-body p { margin-bottom: 18px; }
.link-more { color: var(--teal); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; display: inline-flex; gap: 8px; }
.link-more span { transition: transform 0.25s var(--ease); }
.link-more:hover span { transform: translateX(5px); }

/* ---------- Refrigerants band ---------- */
.refrigerants { background: var(--teal); color: var(--white); text-align: center; }
.refrigerants h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.refrigerants-lead { max-width: 620px; margin: 0 auto 44px; color: #dcebe8; font-size: 1.08rem; }
.refrigerant-chips { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(195, 215, 209, 0.35);
  border-radius: var(--radius);
  padding: 26px 40px;
  min-width: 200px;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.chip:hover {
  transform: translateY(-6px);
  background:
    linear-gradient(rgba(195, 215, 209, 0.16), rgba(195, 215, 209, 0.16)) padding-box,
    var(--grad-brand) border-box;
}
.chip-formula { display: block; font-family: "Anton", sans-serif; font-size: 2.4rem; color: var(--sage); line-height: 1; }
.chip-name { display: block; margin-top: 8px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; }

/* ---------- Advantages ---------- */
.advantages { background: var(--bg-soft); }
.advantages h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 56px; }
.advantage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 64px; }
.advantage-item {
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(10, 40, 51, 0.08);
  transition: transform 0.3s var(--ease);
}
.advantage-item:hover { transform: translateY(-6px); }
.advantage-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--sage); color: var(--teal);
  font-size: 1.7rem; margin-bottom: 18px;
}
.advantage-item h3 { font-size: 1.3rem; color: var(--teal); margin-bottom: 10px; }

.stats { display: flex; justify-content: center; gap: 90px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-num { font-family: "Anton", sans-serif; font-size: clamp(3rem, 7vw, 5rem); color: var(--teal); line-height: 1; display: block; }
.stat-label { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--muted); font-size: 0.9rem; }

/* ---------- Contact ---------- */
.contact { background: var(--teal-deep); color: var(--white); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-info h2 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 10px 0 14px; }
.contact-tagline { color: var(--sage); font-weight: 600; margin-bottom: 28px; }
.contact-list { list-style: none; }
.contact-list li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(195, 215, 209, 0.16); flex-wrap: wrap; }
.ci-label { min-width: 130px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; color: var(--sage); }
.contact-list a:hover { color: var(--sage); text-decoration: underline; }
.contact-247 { margin-top: 24px; font-family: "Anton", sans-serif; letter-spacing: 0.06em; color: var(--sage); font-size: 1.15rem; }

.contact-form { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(195, 215, 209, 0.16); border-radius: var(--radius); padding: 34px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: #d6e4e1; }
.field input, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 9px;
  border: 1px solid rgba(195, 215, 209, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border 0.2s, background 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: #9fb2af; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sage); background: rgba(255, 255, 255, 0.1); }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.field-check { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 22px; }
.field-check input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--sage); }
.field-check label { margin: 0; font-size: 0.83rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.field-check a { color: var(--sage); text-decoration: underline; }
.form-status { margin-top: 14px; font-size: 0.9rem; min-height: 1.2em; color: var(--sage); }

/* Direct contacts: spans both columns of the contact grid */
.people-block { grid-column: 1 / -1; margin-bottom: 22px; }
.people-block .section-sub { margin-bottom: 24px; }
.people-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* ---------- Tarjetas de visita (página de contacto) ---------- */
.person-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(195, 215, 209, 0.18);
  border-radius: var(--radius);
  background: none;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  line-height: 0;
  position: relative;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.person-card img { display: block; width: 100%; height: auto; }
.person-card:hover,
.person-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--sage);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
/* Etiqueta que aparece al pasar por encima */
.person-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 12px 12px;
  background: linear-gradient(180deg, rgba(10, 40, 51, 0) 0%, rgba(8, 33, 43, 0.92) 100%);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.person-card:hover .person-cta,
.person-card:focus-visible .person-cta { opacity: 1; transform: none; }

/* ---------- Tarjeta ampliada ---------- */
.card-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 24, 31, 0.9);
}
.card-modal.open { display: flex; }
.card-modal-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--teal-deep);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.card-modal-panel > img { display: block; width: 100%; height: auto; }
.card-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 24, 31, 0.66);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.card-modal-close:hover { background: rgba(6, 24, 31, 0.9); }

.card-modal-info { padding: 22px 26px 4px; }
.cm-nombre { margin: 0; color: var(--white); font-size: 1.25rem; font-weight: 700; }
.cm-puesto {
  margin: 4px 0 0;
  color: var(--sage);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* El desplegable con las acciones */
.card-modal-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 20px 26px 26px;
}
.cm-action {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border: 1px solid rgba(195, 215, 209, 0.28);
  border-radius: var(--radius);
  color: var(--white);
  text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.cm-action:hover,
.cm-action:focus-visible { background: rgba(195, 215, 209, 0.12); border-color: var(--sage); }
.cm-action > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cm-action strong { font-size: 0.95rem; }
.cm-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--teal-deep);
  font-size: 1.15rem;
}
.cm-dato { color: rgba(255, 255, 255, 0.68); font-size: 0.82rem; word-break: break-word; }

@media (max-width: 560px) {
  .card-modal { padding: 12px; }
  .card-modal-actions { grid-template-columns: 1fr; padding: 16px 18px 20px; }
  .card-modal-info { padding: 18px 18px 2px; }
}

/* ---------- Footer ---------- */
.site-footer { background: #081f29; color: #b9c9c6; text-align: center; padding: 54px 0; }
.footer-logo { height: 80px; width: auto; margin: 0 auto 18px; }
.footer-tag { color: var(--sage); font-weight: 600; margin-bottom: 10px; }
.footer-copy { font-size: 0.85rem; color: #7d918d; }

/* ============================================================
   Inner pages (subpages)
   ============================================================ */

/* ---------- Page banner ---------- */
.page-banner {
  position: relative;
  background: var(--teal-deep) url("assets/mundo.jpg") center / cover no-repeat;
  color: var(--white);
  padding: 96px 0 64px;
  text-align: center;
  overflow: hidden;
  /* Slow, subtle zoom for a touch of life without distraction */
  animation: banner-drift 24s ease-in-out infinite alternate;
}
@keyframes banner-drift {
  from { background-size: 108%; }
  to   { background-size: 120%; }
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* End fully opaque in teal-deep so the banner's bottom edge is a solid colour
     that the diagonal divider below can match exactly. */
  background: linear-gradient(180deg, rgba(8, 33, 43, 0.88) 0%, rgba(10, 40, 51, 0.9) 68%, rgba(10, 40, 51, 1) 100%);
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.6rem); }
.breadcrumb { margin-top: 14px; font-size: 0.85rem; letter-spacing: 0.06em; color: #cddedb; text-transform: uppercase; }
.breadcrumb a { display: inline-block; padding: 3px 0; color: var(--sage); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { opacity: 0.55; margin: 0 8px; }

/* ---------- Split (image + text rows) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.split + .split { margin-top: 80px; }
.split.reverse .split-media { order: 2; }
.split-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 16 / 10; object-fit: cover; }
.split-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 10px 0 16px; color: var(--teal); }
.split-text p { margin-bottom: 14px; }
.tech-tag {
  display: inline-block;
  margin-top: 8px;
  background: var(--sage);
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.section-head p { margin-top: 14px; color: var(--muted); }
.section-head .btn { margin-top: 26px; }
.bg-soft { background: var(--bg-soft); }

/* ---------- Service mini-cards (image + title bar) ---------- */
.mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.mini-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  transition: transform 0.3s var(--ease);
}
.mini-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s var(--ease); }
.mini-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,40,51,0) 35%, rgba(8,33,43,0.92) 100%); z-index: 1; }
.mini-card h3 { position: relative; z-index: 2; color: var(--white); font-size: 1.15rem; padding: 22px 20px; line-height: 1.15; }
.mini-card:hover { transform: translateY(-6px); }
.mini-card:hover img { transform: scale(1.07); }

/* Three-up row of small boxes (home services, projects) */
.mini-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; }
.mini-grid--3 .mini-card { aspect-ratio: 4 / 3; }
.mini-grid--3 .mini-card h3 { font-size: 1.05rem; padding: 18px 18px; }
.showcase-cta { text-align: center; margin-top: 42px; }
/* Marks a card whose photos are stand-ins, not from that job */
.test-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(194, 32, 48, 0.94);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.pm-testnote {
  margin-top: 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--brand-red);
  background: rgba(194, 32, 48, 0.07);
  color: var(--brand-red);
  font-size: 0.86rem;
  font-weight: 600;
}
.pm-testnote[hidden] { display: none; }

.services-group { margin-bottom: 64px; }
.services-group:last-child { margin-bottom: 0; }
.group-title { text-align: center; margin-bottom: 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--teal); }
.group-sub { text-align: center; color: var(--muted); margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; font-weight: 700; }

/* ---------- Contact page ---------- */
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); line-height: 0; }
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; filter: grayscale(0.1); }

/* Localización: una tarjeta por sede, mapas de igual altura */
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: stretch; }
.loc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.loc-head { padding: 22px 26px 18px; }
.loc-name { font-family: "Anton", sans-serif; letter-spacing: 0.04em; font-size: 1.25rem; color: var(--teal); text-transform: uppercase; }
.loc-addr { color: var(--muted); font-size: 0.94rem; margin-top: 4px; }
.loc-photo-wrap { max-width: 560px; margin: 34px auto 0; text-align: center; }
.loc-photo-wrap img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.loc-photo-wrap figcaption { margin-top: 14px; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.04em; }
.loc-map { position: relative; flex: 1; min-height: 300px; line-height: 0; }
.loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.1); }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Directional reveal variants (add alongside .reveal) */
.reveal-left  { transform: translateX(-46px); }
.reveal-right { transform: translateX(46px); }
.reveal-scale { transform: scale(0.9); }

/* Staggered reveal inside grids/rows */
.service-grid > .reveal:nth-child(2)  { transition-delay: 0.12s; }
.service-grid > .reveal:nth-child(3)  { transition-delay: 0.24s; }
.advantage-grid > .reveal:nth-child(2) { transition-delay: 0.12s; }
.advantage-grid > .reveal:nth-child(3) { transition-delay: 0.24s; }
.mini-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.mini-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.mini-grid > .reveal:nth-child(4) { transition-delay: 0.24s; }
.refrigerant-chips .chip:nth-child(2) { transition-delay: 0.1s; }
.refrigerant-chips .chip:nth-child(3) { transition-delay: 0.2s; }

/* ---------- Entrance animations on load ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-eyebrow,
.hero-title,
.hero-text,
.hero-inner .btn { animation: rise-in 0.8s var(--ease) both; }
.hero-eyebrow { animation-delay: 0.05s; }
.hero-title   { animation-delay: 0.15s; }
.hero-text    { animation-delay: 0.28s; }
.hero-inner .btn { animation-delay: 0.4s; }

.page-banner h1 { animation: rise-in 0.7s var(--ease) both; }
.page-banner .breadcrumb { animation: rise-in 0.7s var(--ease) 0.15s both; }

/* ---------- Continuous, subtle "alive" motion ---------- */
@keyframes icon-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes chip-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(195, 215, 209, 0); }
  50%      { box-shadow: 0 16px 34px rgba(6, 22, 30, 0.4); }
}

/* Advantage icons bob (staggered), and react on hover */
.advantage-icon { animation: icon-bob 4.5s ease-in-out infinite; transition: transform 0.3s var(--ease), background 0.3s; }
.advantage-item:nth-child(2) .advantage-icon { animation-delay: 0.6s; }
.advantage-item:nth-child(3) .advantage-icon { animation-delay: 1.2s; }
.advantage-item:hover .advantage-icon { transform: scale(1.12) rotate(-6deg); background: var(--teal); color: var(--white); }

/* Refrigerant chips softly breathe (staggered) */
.chip { animation: chip-breathe 5s ease-in-out infinite; }
.chip:nth-child(2) { animation-delay: 1.6s; }
.chip:nth-child(3) { animation-delay: 3.2s; }

/* Mini-card title lifts a touch on hover */
.mini-card h3 { transition: transform 0.3s var(--ease); }
.mini-card:hover h3 { transform: translateY(-5px); }

/* Contact form fields lift slightly on focus */
.field input, .field textarea { transition: border 0.2s, background 0.2s, transform 0.2s var(--ease); }
.field input:focus, .field textarea:focus { transform: translateY(-2px); }

/* ---------- Hero scroll cue (home) ---------- */
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 23vw, 340px);
  bottom: 34px;
  width: 26px;
  height: 44px;
  border: 2px solid rgba(195, 215, 209, 0.6);
  border-radius: 14px;
  pointer-events: none;
}
.scroll-cue::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--sage);
  animation: cue-scroll 1.8s ease-in-out infinite;
}
@keyframes cue-scroll {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------- Gradient card treatments ---------- */
/* Sections get a soft gradient so the gaps between cards read as a color transition */
/* Vertical (180deg) gradients so each section's BOTTOM edge is a single, known
   colour that the next section's transition can match exactly (no seams).
   Shared light-bottom colour = #e9f1ee. */
.services   { background: linear-gradient(180deg, #f2f6f5 0%, #e9f1ee 100%); }
.advantages { background: linear-gradient(180deg, #eef4f2 0%, #f4f8f7 45%, #e9f1ee 100%); }
.bg-soft    { background: linear-gradient(180deg, #f4f7f6 0%, #e9f1ee 100%); }

/* White cards: gradient border (padding-box white + border-box brand gradient) */
.service-card,
.advantage-item {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad-brand) border-box;
}
.service-card:hover,
.advantage-item:hover {
  box-shadow: 0 22px 48px rgba(21, 71, 92, 0.28), 0 0 22px rgba(47, 125, 116, 0.22);
}

/* Image mini-cards: gradient frame that glows on hover */
.mini-card {
  border: 2px solid transparent;
  background: var(--grad-brand) border-box;
}
.mini-card:hover {
  box-shadow: 0 22px 48px rgba(6, 22, 30, 0.45), 0 0 24px rgba(47, 125, 116, 0.35);
}

/* Refrigerant chips: gradient border over the translucent fill */
.chip {
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) padding-box,
    var(--grad-brand) border-box;
}

/* ---------- Section-to-section transitions ----------
   Mixed methods so it never feels repetitive:
   · FADE     — long, very progressive gradient (services→refrigerants, advantages→contact)
   · WAVE     — organic SVG curve (hero→services), fits the natural theme
   · DIAGONAL — clean angled cut (refrigerants→advantages, banner→page, contact→map) */

.services,
.refrigerants,
.advantages,
.contact,
.page-banner + section,
.contact + .bg-soft { position: relative; }

/* Keep each section's content above its transition layer */
.services > .container,
.refrigerants > .container,
.advantages > .container,
.contact > .container,
.page-banner + section > .container,
.contact + .bg-soft > .container { position: relative; z-index: 1; }

.services::before,
.refrigerants::before,
.advantages::before,
.contact::before,
.page-banner + section::before,
.contact + .bg-soft::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

/* ===== Method 1 — long, progressive FADES ===== */
.refrigerants,
.is-home .contact { padding-top: 310px; }
.refrigerants::before,
.is-home .contact::before { height: 280px; }
/* from a LIGHT neighbour (services / areas / advantages) */
.refrigerants::before {
  background: linear-gradient(180deg,
    rgba(233, 241, 238, 1) 0%,
    rgba(233, 241, 238, 0.96) 9%,
    rgba(233, 241, 238, 0.87) 20%,
    rgba(233, 241, 238, 0.72) 32%,
    rgba(233, 241, 238, 0.54) 45%,
    rgba(233, 241, 238, 0.37) 58%,
    rgba(233, 241, 238, 0.22) 70%,
    rgba(233, 241, 238, 0.11) 81%,
    rgba(233, 241, 238, 0.04) 91%,
    rgba(233, 241, 238, 0) 100%);
}
.is-home .contact::before {
  background: linear-gradient(180deg,
    rgba(233, 241, 238, 1) 0%,
    rgba(233, 241, 238, 0.96) 9%,
    rgba(233, 241, 238, 0.87) 20%,
    rgba(233, 241, 238, 0.72) 32%,
    rgba(233, 241, 238, 0.54) 45%,
    rgba(233, 241, 238, 0.37) 58%,
    rgba(233, 241, 238, 0.22) 70%,
    rgba(233, 241, 238, 0.11) 81%,
    rgba(233, 241, 238, 0.04) 91%,
    rgba(233, 241, 238, 0) 100%);
}

/* ===== Method 2 — organic WAVE (hero → services) ===== */
.services { padding-top: 172px; }
.services::before {
  height: 132px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 132' preserveAspectRatio='none'%3E%3Cpath fill='%23082530' d='M0,0H1440V50C1220,128 980,20 700,60C470,92 210,72 0,110Z'/%3E%3C/svg%3E")
    top center / 100% 100% no-repeat;
}

/* ===== Method 3 — clean DIAGONAL cuts ===== */
.advantages,
.page-banner + section,
.contact + .bg-soft { padding-top: 178px; }
/* from the TEAL refrigerants band into the light advantages section */
.advantages::before {
  height: 116px;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% 44%, 0 100%);
}
/* from a DARK neighbour (banner / contact) into a light section */
.page-banner + section::before,
.contact + .bg-soft::before {
  height: 104px;
  background: var(--teal-deep); /* matches banner bottom and contact-deep */
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  section { padding: 68px 0; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--teal-deep);
    padding: 10px 24px 24px;
    transform: translateY(-140%);
    transition: transform 0.35s var(--ease);
    border-bottom: 1px solid rgba(195, 215, 209, 0.14);
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { width: 100%; padding: 15px 0; border-bottom: 1px solid rgba(195, 215, 209, 0.1); }
  .lang-badge { margin-top: 14px; align-self: flex-start; }
  .service-grid,
  .advantage-grid,
  .contact-inner,
  .split { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
  .loc-map { min-height: 280px; }
  .stats { gap: 48px; }
  .split { gap: 32px; }
  .split.reverse .split-media { order: 0; }
  .split + .split { margin-top: 54px; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
  /* Section transitions: smaller on mobile, keeping each method */
  .refrigerants,
  .is-home .contact { padding-top: 220px; }
  .refrigerants::before,
  .is-home .contact::before { height: 196px; }
  .services { padding-top: 140px; }
  .services::before { height: 100px; }
  .advantages,
  .page-banner + section,
  .contact + .bg-soft { padding-top: 150px; }
  .advantages::before { height: 90px; }
  .page-banner + section::before,
  .contact + .bg-soft::before { height: 82px; }
  /* Hero on mobile: globe recedes behind the content, intro logo smaller */
  .hero-globe { right: 50%; top: 26%; transform: translate(50%, -50%); width: 120vw; opacity: 0.5; }
  .hero-logo { width: min(300px, 66vw); margin-bottom: 22px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-globe img,
  .advantage-icon,
  .chip,
  .scroll-cue::before { animation: none; }
  .hero-eyebrow, .hero-title, .hero-text, .hero-inner .btn,
  .page-banner h1, .page-banner .breadcrumb { animation: none; }
  .scroll-cue { display: none; }
  .page-banner { animation: none; background-size: cover; }
}

/* ============================================================
   Nav dropdown (Servicios)
   ============================================================ */
.nav-item { position: relative; }
.nav-item.has-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 6px; }
.caret { font-size: 0.68em; transition: transform 0.25s var(--ease); }
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 214px;
  background: rgba(9, 32, 42, 0.98);
  border: 1px solid rgba(195, 215, 209, 0.16);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(6, 22, 30, 0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 120;
}
/* invisible bridge so the menu doesn't close in the gap */
.dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  padding: 11px 14px;
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.92rem;
  color: #dfe9e7;
  white-space: nowrap;
}
.dropdown a::after { display: none; }
.dropdown a:hover { background: rgba(195, 215, 209, 0.12); color: var(--white); }
.dropdown a.active { color: var(--sage); }

/* ============================================================
   Service category (subcategory) pages — coherent but distinct
   ============================================================ */
/* Distinct banner: solid teal gradient + sage accent (no world image) */
.service-cat .page-banner {
  background: linear-gradient(120deg, #0a2833 0%, #123f52 55%, #16506a 100%);
  animation: none;
  border-bottom: 3px solid var(--sage);
}
.service-cat .page-banner::before { background: rgba(9, 32, 42, 0.25); }

/* Sibling sub-navigation under the banner */
.service-subnav {
  background: var(--teal-deep);
  border-bottom: 1px solid rgba(195, 215, 209, 0.12);
  padding: 16px 0;
}
.service-subnav .container { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.service-subnav a {
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #cfe0dc;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) padding-box,
    var(--grad-brand) border-box;
  transition: transform 0.25s var(--ease), color 0.25s, background 0.25s;
}
.service-subnav a:hover { transform: translateY(-2px); color: var(--white); }
.service-subnav a.active { color: var(--teal-deep); background: var(--sage); }

/* Diagonal transition from the sub-nav (teal-deep) into the light section */
.service-subnav + section {
  position: relative;
  padding-top: 172px;
  /* bottom edge = #e9f1ee so the next band's transition matches exactly */
  background: linear-gradient(180deg, #ffffff 0%, #e9f1ee 100%);
}
.service-subnav + section > .container { position: relative; z-index: 1; }
.service-subnav + section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 104px;
  z-index: 0;
  pointer-events: none;
  background: var(--teal-deep);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

/* Intro */
.cat-intro { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.cat-intro h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 12px 0 14px; }
.cat-intro p { color: var(--muted); }

/* Placeholder blocks (alternating) */
.cat-blocks { display: flex; flex-direction: column; gap: 52px; }
.cat-block { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.cat-block:nth-child(even) .cat-media { order: 2; }
.cat-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 2px dashed rgba(21, 71, 92, 0.28);
  background:
    repeating-linear-gradient(45deg, rgba(21, 71, 92, 0.035) 0 12px, rgba(21, 71, 92, 0) 12px 24px),
    linear-gradient(135deg, #eef4f2, #e0eae7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: var(--muted);
}
.cat-media .ph-icon { font-size: 2.2rem; opacity: 0.45; }
.cat-media span { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }
.cat-eyebrow { color: var(--teal); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; }
.cat-text h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  color: var(--teal);
  margin: 10px 0 14px;
  padding-left: 16px;
  border-left: 4px solid var(--sage);
}
.cat-text p { margin-bottom: 16px; color: var(--text); }
.ph-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--sage);
  padding: 6px 14px;
  border-radius: 999px;
}

/* "Últimas obras" placeholder feed */
.works-note { margin: 6px 0 20px; color: var(--muted); }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 2px dashed rgba(21, 71, 92, 0.28);
  background: linear-gradient(135deg, #eef4f2, #e0eae7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

@media (max-width: 860px) {
  /* Dropdown expands inline on mobile */
  .nav-item { width: 100%; }
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0 0 6px 16px;
    min-width: 0;
  }
  .dropdown a { padding: 12px 0; border-bottom: 1px solid rgba(195, 215, 209, 0.1); }
  .caret { display: none; }

  .cat-block,
  .works-grid { grid-template-columns: 1fr; }
  .cat-block:nth-child(even) .cat-media { order: 0; }
  .service-subnav + section { padding-top: 150px; }
  .service-subnav + section::before { height: 82px; }
}

/* ============================================================
   Social — follow cards + Instagram feed slot
   ============================================================ */
.social { background: #e9f1ee; } /* matches advantages' bottom and contact's fade top exactly */
.social-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 46px;
}
.social-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.social-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(21, 71, 92, 0.24); }
.social-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: #fff; flex-shrink: 0;
}
.social-icon svg { width: 28px; height: 28px; fill: currentColor; }
.social-icon.linkedin { background: #0a66c2; }
.social-icon.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-meta { line-height: 1.3; }
.social-meta strong { display: block; font-family: "Anton", sans-serif; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: var(--teal); font-size: 1.15rem; }
.social-handle { color: var(--muted); font-size: 0.9rem; }
.social-card .go { margin-left: auto; color: var(--teal); font-weight: 700; font-size: 1.4rem; transition: transform 0.25s var(--ease); }
.social-card:hover .go { transform: translateX(4px); }

/* Instagram feed slot (drop a LightWidget/Behold embed here to go live) */
.ig-feed { max-width: 900px; margin: 0 auto; }
.feed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feed-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  display: grid; place-items: center;
  color: #fff;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  opacity: 0.9;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.feed-tile svg { width: 34px; height: 34px; fill: #fff; opacity: 0.9; }
.feed-tile:hover { transform: scale(1.04); opacity: 1; }
.feed-note { text-align: center; margin-top: 20px; color: var(--muted); font-size: 0.92rem; }
.feed-note a { color: var(--teal); font-weight: 700; }

/* Footer social icons */
.footer-social { display: flex; gap: 14px; justify-content: center; margin: 18px 0 6px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(195, 215, 209, 0.1);
  color: var(--sage);
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s;
}
.footer-social a:hover { background: var(--sage); color: var(--teal-deep); transform: translateY(-3px); }
.footer-social svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 860px) {
  .social-cards { grid-template-columns: 1fr; }
  .feed-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Un display: en una clase gana al [hidden] del navegador; esto lo evita en todo el sitio */
[hidden] { display: none !important; }

/* Instagram post embeds (official embed.js) */
.ig-embeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 1040px;
  margin: 0 auto;
}
.ig-embeds .instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 860px) {
  .ig-embeds { grid-template-columns: 1fr; max-width: 420px; }
}

/* Real photos inside category media / works tiles */
.cat-media:has(img) { border: 0; background: none; padding: 0; overflow: hidden; box-shadow: var(--shadow); }
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.cat-media:has(img):hover img { transform: scale(1.05); }
.work-ph:has(img) { border: 0; background: none; overflow: hidden; padding: 0; }
.work-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.work-ph:has(img):hover img { transform: scale(1.05); }

/* ============================================================
   Showcase carousel + blurred cross-fading banner backdrop
   ============================================================ */
.showcase { background: #e9f1ee; }
.carousel {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.carousel-track { display: flex; transition: transform 0.6s var(--ease); }
.slide { position: relative; min-width: 100%; margin: 0; }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 46px 26px 20px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, transparent, rgba(8, 33, 43, 0.85));
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(9, 32, 42, 0.5);
  color: #fff;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.25s, transform 0.25s;
  z-index: 2;
}
.carousel-btn:hover { background: var(--teal); }
.carousel-btn.prev { left: 14px; }
.carousel-btn.next { right: 14px; }
.carousel-dots {
  position: absolute;
  bottom: 15px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.carousel-dots button {
  width: 9px; height: 9px;
  border-radius: 50%; border: 0; padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.carousel-dots button.active { background: #fff; transform: scale(1.3); }

/* Blurred, cross-fading photos behind the category-page title */
.banner-fade { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.banner-fade img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(4px);
  transform: scale(1.1);
  opacity: 0;
  animation: banner-cross 42s linear infinite;
}
/* 6 photos, one every 7s, with overlapping fades (no gaps, constant rhythm) */
.banner-fade img:first-child   { animation-delay: -4s; } /* start already visible */
.banner-fade img:nth-child(2)  { animation-delay: 3s; }
.banner-fade img:nth-child(3)  { animation-delay: 10s; }
.banner-fade img:nth-child(4)  { animation-delay: 17s; }
.banner-fade img:nth-child(5)  { animation-delay: 24s; }
.banner-fade img:nth-child(6)  { animation-delay: 31s; }
@keyframes banner-cross {
  0%     { opacity: 0; }
  4%     { opacity: 1; }
  16.67% { opacity: 1; }
  20.67% { opacity: 0; }
  100%   { opacity: 0; }
}
/* Hero backdrop: JS-driven crossfade through ALL photos (behind the globe) */
.hero .banner-fade { z-index: 0; opacity: 0.5; }
.hero .banner-fade img { animation: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero .banner-fade img.show { opacity: 1; }

/* Overlay only on banners that carry blurred photos (Servicios pages):
   light at the top so the photos read behind the title, but fully opaque
   teal-deep at the bottom so the section transition still matches. */
.page-banner:has(.banner-fade)::before {
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(8, 33, 43, 0.5) 0%,
    rgba(10, 40, 51, 0.6) 52%,
    rgba(10, 40, 51, 0.9) 80%,
    rgba(10, 40, 51, 1) 100%);
}

@media (max-width: 860px) {
  .slide img { aspect-ratio: 4 / 3; }
  .carousel-btn { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-fade img { animation: none; }
  .banner-fade img:first-child { opacity: 1; }
  .carousel-track { transition: none; }
}

/* ============================================================
   Lightbox (click a photo to enlarge)
   ============================================================ */
.slide img,
.cat-media img,
.work-ph img,
.split-media img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 18, 24, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease);
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background 0.25s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }

/* ============================================================
   Proyectos — grid of boxes + detail panel
   ============================================================ */
.project-grid:empty { display: none; }
.project-card { cursor: pointer; }
.project-card:focus-visible { outline: 3px solid var(--sage); outline-offset: 4px; }

.project-empty {
  max-width: 620px;
  margin: 0 auto;
  padding: 34px 28px;
  text-align: center;
  color: var(--muted);
  border: 1.5px dashed rgba(21, 71, 92, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 18, 24, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease);
}
.project-modal.open { opacity: 1; visibility: visible; }
.project-modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: 88vh;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.project-modal.open .project-modal-panel { transform: none; }
.pm-media { background: var(--teal-deep); position: relative; }
/* Tall photos get cropped from the middle instead of stretching the panel */
.pm-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  min-height: 340px;
  cursor: zoom-in;
}
.pm-media img[src=""] { display: none; }
/* Brand mark on the project photo */
.pm-media::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 104px;
  height: 58px;
  background: rgba(255, 255, 255, 0.92) url("assets/logo-color.png") center / 78% auto no-repeat;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(10, 40, 51, 0.28);
  pointer-events: none;
}
.pm-body { padding: 38px 38px 42px; }
.pm-body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--teal); margin-top: 10px; }
.pm-specs { margin-top: 26px; }
.pm-spec { padding: 14px 0; border-top: 1px solid rgba(21, 71, 92, 0.14); }
.pm-spec dt {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 4px;
}
.pm-spec dd { color: var(--ink); font-weight: 600; }
.project-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 40, 51, 0.55);
  color: #fff;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  transition: background 0.25s;
}
.project-modal-close:hover { background: var(--teal); }

@media (max-width: 760px) {
  .project-modal-panel { grid-template-columns: 1fr; }
  .pm-media img { min-height: 240px; max-height: 42vh; }
  .pm-media::after { width: 84px; height: 47px; right: 10px; bottom: 10px; }
  .pm-body { padding: 26px 24px 32px; }
}

/* ============================================================
   Brand accents (logo blue · green · red)
   ============================================================ */
/* Thin logo-coloured line at the very top of the header and footer */
.site-header::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-logo);
  z-index: 3;
}
.site-footer { position: relative; }

/* Green→red underline under centred section headings */
.section-head h2::after,
.refrigerants h2::after,
.cat-intro h2::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-red));
}

/* Small green + red dots flanking centred eyebrows */
.section-sub.center::before,
.section-sub.center::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.section-sub.center::before { background: var(--brand-green); margin-right: 12px; }
.section-sub.center::after  { background: var(--brand-red);   margin-left: 12px; }

/* Refrigerant chips: a coloured top accent per gas (cool → warm) */
.refrigerant-chips .chip { position: relative; }
.refrigerant-chips .chip::before {
  content: "";
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
}
.refrigerant-chips .chip:nth-child(1)::before { background: var(--brand-blue); }
.refrigerant-chips .chip:nth-child(2)::before { background: var(--brand-green); }
.refrigerant-chips .chip:nth-child(3)::before { background: var(--brand-red); }
/* The home "services" intro is a full sentence, not an eyebrow: no dots */
.services .section-sub::before,
.services .section-sub::after { content: none; }

/* ============================================================
   Soft brand glows (blurred green/red accents)
   ============================================================ */
/* Header: faint green glow from the left, red from the right */
.header-inner { position: relative; z-index: 1; }
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(65% 150% at -6% 50%, rgba(15, 160, 140, 0.22), transparent 60%),
    radial-gradient(65% 150% at 106% 50%, rgba(194, 32, 48, 0.2), transparent 60%);
}

/* Section transitions: soft blurred colour auras bleeding down from the seam
   (green on the left, red on the right) — only on the dark colour bands. */
.refrigerants::after,
.contact::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 100% at 20% 0%, rgba(15, 160, 140, 0.28), transparent 70%),
    radial-gradient(46% 100% at 80% 0%, rgba(194, 32, 48, 0.24), transparent 70%);
  filter: blur(14px);
}

/* ---------- Service gallery (fotos del servicio) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 0 56px;
}
.gallery-grid figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.5s var(--ease);
}
.gallery-grid figure:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Project modal: thumbnails gallery (right, white area) ---------- */
.pm-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.pm-thumbs[hidden] { display: none; }
.pm-thumb {
  width: 74px; height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(21, 71, 92, 0.16);
  padding: 0;
  cursor: pointer;
  background: none;
  transition: border-color 0.2s, transform 0.2s;
}
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-thumb:hover { transform: translateY(-2px); }
.pm-thumb.active { border-color: var(--teal); }

/* ---------- Full-size photo viewer ---------- */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(4, 12, 16, 0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease);
  cursor: zoom-out;
}
.photo-viewer.open { opacity: 1; visibility: visible; }
.photo-viewer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.photo-viewer-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.photo-viewer-close:hover { background: var(--teal); }
@media (max-width: 860px) {
  .photo-viewer { padding: 16px; }
  .photo-viewer-close { top: 12px; right: 14px; }
}

/* ---------- Distintivo dentro de un apartado de sector ----------
   No lleva texto a propósito: es una etiqueta, no una sección. Por eso se
   maqueta como una chapa que se ajusta a su contenido, en vez de como una
   fila a dos columnas donde el hueco parecería un párrafo que falta. */
.subsector {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 18px;
  margin: 26px 0 30px 56px;
  padding: 12px 26px 12px 12px;
  border: 1px solid rgba(21, 71, 92, 0.14);
  border-left: 3px solid var(--sage);
  border-radius: 999px;
  background: rgba(195, 215, 209, 0.22);
}
.subsector-media {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 6px 16px rgba(10, 40, 51, 0.18);
}
/* La foto es una panorámica muy apaisada: se desplaza el encuadre a la
   izquierda y se amplía para que las barricas llenen el círculo. */
.subsector-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% center;
  transform: scale(1.5);
  display: block;
}
.subsector-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 2px;
}
.subsector-text h3 {
  font-family: "Anton", sans-serif;
  letter-spacing: 0.02em;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--teal);
}
.subsector-text p { margin-top: 8px; color: var(--text); }
.subsector-text .tech-tag { margin-top: 14px; }
@media (max-width: 860px) {
  .subsector { margin: 22px 0 34px; gap: 14px; padding-right: 22px; }
  .subsector-media { width: 62px; height: 62px; }
  .subsector-text h3 { font-size: 1.15rem; }
}
@media (max-width: 420px) {
  /* En pantallas muy estrechas la chapa ocupa todo el ancho */
  .subsector { width: 100%; border-radius: var(--radius); }
}

/* ---------- Accesibilidad: enlace de salto y foco visible ---------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--teal);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* One consistent focus ring across the whole site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Enlaces legales del pie ---------- */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  margin: 4px 0 14px;
}
.footer-legal a,
.footer-legal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  border: 0;
  background: none;
  padding: 4px 0;
  font-family: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-legal-btn:hover,
.footer-legal-btn:focus-visible { color: var(--sage); border-bottom-color: var(--sage); }

/* ---------- Páginas legales ---------- */
.legal-body { max-width: 820px; margin: 0 auto; }
.legal-body h2 {
  margin: 44px 0 14px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--teal);
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 { margin: 30px 0 10px; font-size: 1.05rem; color: var(--ink); }
.legal-body p { margin-bottom: 16px; line-height: 1.75; }
.legal-body ul { margin: 0 0 20px 22px; }
.legal-body li { margin-bottom: 9px; line-height: 1.7; }
.legal-body a { color: var(--teal); text-decoration: underline; }
.legal-body a:hover { color: var(--brand-green); }
.legal-body code {
  background: var(--bg-soft);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.9em;
}
.legal-updated {
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(21, 71, 92, 0.14);
  color: var(--muted);
  font-size: 0.88rem;
}

/* Identification data: label + value, stacked on narrow screens */
.legal-data { list-style: none; margin-left: 0; }
.legal-data li {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 4px 18px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(21, 71, 92, 0.1);
}
.legal-data li span:first-child { font-weight: 700; color: var(--ink); }

/* Anything still to be filled in before going live */
.legal-todo {
  display: inline-block;
  background: rgba(194, 32, 48, 0.1);
  color: var(--brand-red);
  font-weight: 700;
  font-size: 0.84rem;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Wide tables scroll on their own instead of pushing the page sideways */
.legal-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 26px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid rgba(21, 71, 92, 0.14);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
  min-width: 130px;
}
.legal-table th { background: var(--bg-soft); color: var(--ink); font-weight: 700; }

/* ---------- Aviso de cookies ---------- */
.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  display: none;
  gap: 18px 26px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--teal-deep);
  color: var(--white);
  box-shadow: 0 20px 50px rgba(10, 40, 51, 0.4);
}
.cookie-bar.open { display: flex; }
.cookie-bar p { margin: 0; font-size: 0.92rem; line-height: 1.6; flex: 1 1 320px; }
.cookie-bar a { color: var(--sage); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions button {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--sage);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.cookie-accept { background: var(--sage); color: var(--teal-deep); }
.cookie-accept:hover { background: var(--white); }
.cookie-reject { background: transparent; color: var(--sage); }
.cookie-reject:hover { background: rgba(195, 215, 209, 0.14); }

/* Stand-in shown where third-party content sits until it is accepted */
.embed-block {
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: 30px 24px;
  border: 1px dashed rgba(21, 71, 92, 0.3);
  border-radius: var(--radius);
  background: var(--bg-soft);
  text-align: center;
}
.embed-block p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.6; max-width: 44ch; }
/* Inside a map card the stand-in has to fill the box, which sets line-height: 0 */
.loc-map .embed-block { position: absolute; inset: 0; line-height: 1.6; }
.embed-block button {
  padding: 11px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--teal);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.embed-block button:hover { background: var(--teal-dark); }

/* ---------- Respeta "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 640px) {
  .legal-data li { grid-template-columns: 1fr; gap: 2px; }
  .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .cookie-actions { width: 100%; }
  .cookie-actions button { flex: 1; }
}

/* ---------- Texto justificado ----------
   El texto de cuerpo de todo el sitio se alinea por los dos lados, con
   guionado automático para que no se abran huecos entre palabras. La última
   línea queda corta, que es el comportamiento normal de justify.
   Los bloques centrados a propósito (.section-head, .cat-intro,
   .refrigerants, .advantage-item) se quedan fuera: justificarlos les
   quitaría el centrado. */
.cat-text p,
.split-text p,
.subsector-text p,
.legal-body p,
.legal-body li,
.hero-text {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* ---------- Tarjetas sueltas en la última fila: centradas ----------
   La rejilla pasa a 6 columnas y cada tarjeta ocupa 2, así que mide igual
   que con 3 columnas pero deja colocar las que sobran en el centro. */
@media (min-width: 861px) {
  .project-grid { grid-template-columns: repeat(6, 1fr); }
  .project-grid > .project-card { grid-column: span 2; }
  /* Sobra una: al centro */
  .project-grid > .project-card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  /* Sobran dos: repartidas a los lados del centro */
  .project-grid > .project-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}

@media (max-width: 860px) {
  .project-grid { grid-template-columns: repeat(4, 1fr); }
  .project-grid > .project-card { grid-column: span 2; }
  /* Con dos columnas sólo puede sobrar una */
  .project-grid > .project-card:last-child:nth-child(2n + 1) { grid-column: 2 / span 2; }
}

/* ---------- Socios de AEFYT (pie) ----------
   Sin caja alrededor: el texto va suelto a la izquierda y la baldosa sólo
   envuelve al logotipo, que es azul marino sobre transparente y sobre el pie
   oscuro no se leería. Más pequeña que el logo de Ingerkühl (80 px). */
.footer-assoc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 22px auto 16px;
  text-decoration: none;
}
.footer-assoc span {
  display: flex;
  flex-direction: column;
  text-align: center;
  line-height: 1.3;
  color: var(--sage);
  font-size: 0.86rem;
  font-weight: 600;
}
.footer-assoc .assoc-linea { display: block; white-space: nowrap; }
.footer-assoc strong { color: var(--white); font-size: 1rem; }
.footer-assoc span > small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.footer-assoc img {
  width: 58px;
  height: 58px;
  display: block;
  object-fit: contain;
  padding: 5px;
  border-radius: 10px;
  background: var(--white);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.footer-assoc:hover img,
.footer-assoc:focus-visible img {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
}
.footer-assoc:hover strong,
.footer-assoc:focus-visible strong { color: var(--sage); }

@media (max-width: 480px) {
  .footer-assoc { gap: 9px; }
  .footer-assoc img { width: 50px; height: 50px; padding: 4px; }
  .footer-assoc span > small { display: none; }
}

/* ---------- Pasar fotos en la ficha de proyecto ---------- */
.pm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 24, 31, 0.55);
  color: var(--white);
  font-size: 1.9rem;
  line-height: 1;
  padding-bottom: 4px;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.pm-nav:hover { background: var(--teal); }
.pm-nav:active { transform: translateY(-50%) scale(0.94); }
.pm-prev { left: 12px; }
.pm-next { right: 12px; }
.pm-nav[hidden] { display: none; }

.pm-contador {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(6, 24, 31, 0.55);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pm-contador[hidden] { display: none; }

/* Las mismas flechas en la foto a pantalla completa */
.pv-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 2.1rem;
  line-height: 1;
  padding-bottom: 5px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.pv-nav:hover { background: var(--teal); }
.pv-prev { left: 20px; }
.pv-next { right: 20px; }
.pv-nav[hidden] { display: none; }

.pv-contador {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.pv-contador[hidden] { display: none; }

@media (max-width: 640px) {
  .pm-nav { width: 38px; height: 38px; font-size: 1.6rem; }
  .pm-prev { left: 8px; }
  .pm-next { right: 8px; }
  .pv-nav { width: 44px; height: 44px; font-size: 1.8rem; }
  .pv-prev { left: 8px; }
  .pv-next { right: 8px; }
}