/* =========================================================
   ORES — CSS LIMPIO (ÚNICO)
   - Header fijo + botón MENÚ bien ubicado
   - Drawer lateral (overlay + panel)
   - Hero full width sin “blanco” lateral
   - Secciones, cards, galería, CTA, footer, reveal
   ========================================================= */

/* ===== Variables ===== */
:root{
  --violet:#7A5B66;
  --gold:#D4A61D;
  --petroleo:#0e2336;

  --text:#1c1c1e;
  --muted:#5d6167;
  --bg:#ffffff;
  --bg-soft:#faf7f6;

  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --shadow-soft:0 10px 25px rgba(0,0,0,.06);

  --wrap:1100px;
  --gutter:18px;

  --header-h:72px;
}

/* ===== Reset / Base ===== */
*{ box-sizing:border-box; }
html, body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;     /* evita el “blanco” lateral */
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{ color:inherit; }

/* ===== Container ===== */
.container{
  width:min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
}

/* =========================================================
   HEADER
   ========================================================= */
#mainHeader, header.main-header{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  height:var(--header-h);
  z-index:9999;
  background:transparent;
  transition: background .2s ease, box-shadow .2s ease, backdrop-filter .2s ease;
}
#mainHeader.is-scrolled, header.main-header.is-scrolled{
  background: rgba(10,18,28,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

#mainHeader .nav-container,
header.main-header .nav-container{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

#mainHeader .nav-inner,
header.main-header .nav-inner{
  width:min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Si tu HTML NO tiene .nav-inner, esto te lo salva igual */
#mainHeader .nav-container,
header.main-header .nav-container{
  padding:0 var(--gutter);
}

/* Logo header */
.logo-header, .logo-ores, .brand-mark{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-header img, .logo-ores{
  height:42px;
  width:auto;
  display:block;
}

/* Nav (desktop) */
.main-nav{
  display:flex;
  align-items:center;
  gap:10px;
}
.main-nav a{
  text-decoration:none;
  font-weight:600;
  color: #fff;                 /* header transparente sobre hero */
  padding:8px 12px;
  border-radius:999px;
  transition: background .15s ease, color .15s ease;
  opacity:.95;
}
#mainHeader.is-scrolled .main-nav a,
header.main-header.is-scrolled .main-nav a{
  color:#fff;
}
.main-nav a:hover,
.main-nav a.active{
  background: rgba(255,255,255,.12);
}

/* Botón MENÚ (derecha, NO pegado al borde) */
#menuBtn, .menu-btn, .menu-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.18);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.4px;
  z-index:10000;
}
#menuBtn i, .menu-btn i, .menu-toggle i{ font-size:14px; }

/* =========================================================
   HERO (full, centrado, sin cortes)
   ========================================================= */
.hero{
  min-height:100vh;
  width:100%;
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: 90px;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;

  /* Fondo ORES suave (podés cambiarlo) */
  background:
    radial-gradient(1200px 700px at 30% 35%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(90deg,
      rgba(122, 91, 102, 0.22) 0%,
      rgba(216, 178, 110, 0.34) 55%,
      rgba(122, 91, 102, 0.22) 100%
    );
  background-size: 400% 400%;
  animation: moveGradient 10s ease-in-out infinite alternate;
}

@keyframes moveGradient{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* Logo hero */
.hero .hero-logo,
.hero .logo-hero,
.hero img.hero-logo{
  width:min(680px, 86vw);
  height:auto;
  display:block;
  margin:0 auto 18px;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
  background: rgba(255,255,255,.35);
  border: 1.6px solid rgba(122, 91, 102, 0.35);
  border-radius: 14px;
  padding: 18px 34px;
}

.hero-title{
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight:900;
  color: var(--violet);
  margin:0 0 10px;
}
.hero-sub{
  max-width:760px;
  margin:0 auto;
  color:#3e3f43;
  line-height:1.65;
  font-size:1.02rem;
}

/* =========================================================
   SECCIONES
   ========================================================= */
.section{ padding: 70px 0; }
.section.light{ background: var(--bg-soft); }

.section h2{
  font-size: 2rem;
  color: var(--violet);
  margin: 0 0 18px;
}
.section p{ color: var(--muted); line-height:1.75; }

/* Grid texto */
.text-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

/* =========================================================
   CARDS / BLOQUES
   ========================================================= */
.data-blocks{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat-card{
  background:#fff;
  border:1px solid rgba(122,91,102,.12);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.stat-label{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9a7c87;
  margin-bottom:8px;
}
.stat-number{
  font-size:2.35rem;
  font-weight:900;
  color:var(--violet);
  margin: 0 0 8px;
}
.stat-text{
  margin:0;
  color:#5e666e;
  font-size:.92rem;
  line-height:1.45;
}

/* =========================================================
   PROYECTOS (cards)
   ========================================================= */
.projects-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 18px;
}
.project-card{
  background:#fff;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.project-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.project-text{ padding: 16px 18px 18px; }
.project-text h3{
  margin:0 0 8px;
  color:#5a3d4e;
  font-weight:800;
  font-size:1.08rem;
}
.project-text p{
  margin:0;
  color:#3a3a3c;
  line-height:1.6;
  font-size:.95rem;
}

/* =========================================================
   GALERÍA (3 imágenes iguales)
   ========================================================= */
.territory-gallery{
  background:#f2eae6;
  padding: 62px 0 70px;
  text-align:center;
}
.territory-gallery .gallery-title{
  font-size:1.6rem;
  font-weight:800;
  color:var(--violet);
  margin:0 0 24px;
}
.territory-row{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.territory-img{
  width:100%;
  max-width:330px;
  aspect-ratio: 4 / 3;
  object-fit:cover;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  background:#e5d9d4;
  transition: transform .18s ease;
}
.territory-img:hover{ transform: translateY(-4px); }

/* =========================================================
   CTA
   ========================================================= */
.cta{
  background:#fff;
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 54px 0;
  text-align:center;
}
.cta-content{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  text-decoration:none;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight:800;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-2px); }

.btn.violet{
  background: var(--violet);
  color:#fff;
}
.btn.violet:hover{ background:#694b55; }

.btn.gold{
  border: 2px solid var(--gold);
  color: var(--violet);
  background:transparent;
}
.btn.gold:hover{
  background: var(--gold);
  color:#fff;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 26px 0;
  text-align:center;
  color:#666;
  font-size:.92rem;
}
.footer a{ color: var(--violet); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

/* =========================================================
   REDES
   ========================================================= */
.redes-ores{
  text-align:center;
  margin: 34px 0 10px;
}
.redes-ores h3{
  font-size:1.2rem;
  color:var(--violet);
  margin:0 0 10px;
  font-weight:800;
}
.iconos-redes a{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#f3eceb;
  color:var(--violet);
  text-decoration:none;
  margin:0 10px;
  font-size:22px;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.iconos-redes a:hover{
  transform: translateY(-3px);
  color:#fff;
  background: linear-gradient(135deg, var(--violet), #D8B26E);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible{
  opacity:1;
  transform: translateY(0);
}

/* =========================================================
   DRAWER (overlay + panel)
   Usa IDs: #menuBackdrop y #menuDrawer
   ========================================================= */
#menuBackdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 10050;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
#menuBackdrop.open{
  opacity:1;
  pointer-events:auto;
}

#menuDrawer{
  position:fixed;
  top:0;
  right:0;
  width: min(380px, 92vw);
  height:100vh;
  background: rgba(18,22,30,.96);
  color:#fff;
  z-index: 10060;
  transform: translateX(110%);
  transition: transform .18s ease;
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}
#menuDrawer.open{ transform: translateX(0); }

#menuDrawer .menu-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#menuDrawer .menu-close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:0;
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
#menuDrawer .menu-close i{ font-size:18px; }

#menuDrawer .menu-links{
  padding: 12px 12px;
  display:grid;
  gap:8px;
}
#menuDrawer .menu-links a{
  display:block;
  text-decoration:none;
  color:#fff;
  padding: 12px 12px;
  border-radius: 12px;
  font-weight:800;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
#menuDrawer .menu-links a:hover{
  background: rgba(255,255,255,.10);
}
#menuDrawer .menu-links a.active{
  background: rgba(200,155,61,.18);
  border-color: rgba(200,155,61,.35);
}

.no-scroll{ overflow:hidden; }

/* =========================================================
   Responsive: en mobile ocultá el nav y dejá MENÚ
   ========================================================= */
@media (max-width: 820px){
  .main-nav{ display:none; }
  .hero .hero-logo{ padding: 14px 20px; }
}

/* =========================================================
   PATCH — Fix header logo (solo al scroll) + hero logo sin marco
   + animación barrido + flecha abajo + drawer prolijo
   ========================================================= */

/* ---------- Header: logo chico NO visible al inicio ---------- */
#headerLogo{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
#headerLogo.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Opcional: que el header transparente NO “ensucie” al inicio */
#mainHeader{
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* ---------- HERO: logo SIN marco + barrido derecha→izquierda ---------- */
/* Esto pisa tu bloque que le estaba metiendo fondo/borde/padding */
.hero .logo-hero{
  width: min(680px, 86vw);
  height: auto;
  display: block;
  margin: 0 auto;

  /* fuera marco */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;

  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
  animation: heroSweep .9s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes heroSweep{
  0%{
    opacity: 0;
    transform: translateX(120px);
    clip-path: inset(0 0 0 100%); /* barrido */
  }
  100%{
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- Flecha abajo (tipo V) ---------- */
.hero-arrow{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  text-decoration: none;
  color: rgba(14,35,54,.85);
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(14,35,54,.18);
  backdrop-filter: blur(8px);

  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  animation: arrowBounce 1.2s ease-in-out infinite;
}
.hero-arrow i{
  font-size: 22px;
  transform: translateY(1px);
}
@keyframes arrowBounce{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(8px); }
}

/* ---------- Drawer: que NO “explote” + redes visibles ---------- */
#menuDrawer{
  overflow: hidden; /* evita cosas raras */
}

.menu-drawer-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.menu-drawer-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.menu-drawer-title{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.menu-drawer-title strong{
  font-size: 0.98rem;
  letter-spacing: .04em;
}
.menu-drawer-title span{
  font-size: .78rem;
  opacity: .75;
}

.menu-drawer-social{
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-drawer-social .soc{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.menu-drawer-social .soc:hover{
  transform: translateY(-2px);
  background: rgba(212,166,29,.18);
  border-color: rgba(212,166,29,.35);
}

/* Acomoda el header del drawer para que entren redes + close */
#menuDrawer .menu-drawer-head{
  align-items: flex-start;
}
#menuDrawer .menu-close{
  margin-left: 6px;
}

/* Footer del drawer (ya lo tenés en HTML, lo estilizamos) */
.menu-drawer-foot{
  margin-top: auto;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 6px;
}
.menu-mail{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
}
.menu-mail:hover{
  text-decoration: underline;
}
.menu-drawer-foot small{
  opacity: .75;
}


/* =========================================================
   HERO — Fondo fijo (sin movimiento) + imagen tipo UNVM
   ========================================================= */

/* Quita animación y deja imagen + degradé fijo */
.hero{
  position: relative;
  min-height: 100vh;
  width: 100%;
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: 90px;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;

  /* ✅ Imagen de fondo (cambiá la ruta/nombre al tuyo) */
  background-image:
    /* Overlay degradado ORES (fijo) */
    linear-gradient(90deg,
      rgba(209, 15, 174, 0.62) 0%,
      rgba(73, 72, 52, 0.71) 45%,
      rgba(212, 166, 29, 0.28) 100%
    ),
    
    /* Foto de FONDO */
    url("../assets/images/fondo.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* ✅ importante: NO se mueve */
  background-attachment: scroll;

  /* ❌ mata el movimiento anterior */
  animation: none !important;
}

/* Si todavía tenés @keyframes moveGradient en el CSS, no molesta,
   pero la animación queda anulada por el animation:none. */

/* Opcional: oscurecer un toque más para que el logo lea mejor */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 520px at 50% 45%,
    rgba(255,255,255,.08),
    rgba(0,0,0,.18)
  );
  pointer-events:none;
}

/* Asegura que el contenido quede arriba del overlay */
.logo-hero-wrap, .hero-arrow{
  position: relative;
  z-index: 2;
}

/* =========================================================
   COMPLEMENTO CSS — (lo que faltaba)
   Pegalo al FINAL de CSS/style.css
   ========================================================= */

/* Evita que anclas queden tapadas por el header fijo */
#quienes, #hacemos, #proyectos{
  scroll-margin-top: 90px;
}

/* Marca visible del logo header solo al scrollear (si usás el patch) */
#headerLogo{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
#headerLogo.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================
   QUIÉNES SOMOS (grid)
   ========================= */
.qs-container h1{
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: var(--violet);
  font-weight: 900;
}
.qs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 10px;
}
.qs-text p{
  margin: 0 0 12px;
  line-height: 1.75;
  color: var(--muted);
}

/* =========================
   QUÉ HACEMOS (cards + tooltip)
   ========================= */
.image-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.hacemos-card{
  position: relative;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(122,91,102,.10);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
}
.hacemos-card:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.hacemos-card img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.hacemos-card h3{
  margin: 0;
  padding: 14px 14px 16px;
  font-size: 1.02rem;
  font-weight: 900;
  color: #5a3d4e;
}

/* Tooltip simple */
.hacemos-card::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 62px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(14,35,54,.92);
  color: #fff;
  font-size: .86rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.hacemos-card:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   UBICACIÓN
   ========================= */
.ubicacion-ores{
  padding: 70px 0;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.05);
}
.ubicacion-box{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  align-items: start;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(122,91,102,.10);
  padding: 18px 18px 16px;
}
.ubi-icon{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(212,166,29,.18);
  border: 1px solid rgba(212,166,29,.30);
  font-size: 22px;
}
.ubi-textos h3{
  margin: 2px 0 8px;
  color: var(--violet);
  font-weight: 900;
}
.ubi-textos p{
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.6;
}
.ubi-textos a{
  display: inline-block;
  margin-top: 6px;
  text-decoration: none;
  font-weight: 900;
  color: var(--violet);
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid rgba(212,166,29,.65);
  background: rgba(255,255,255,.6);
  transition: transform .15s ease, background .15s ease;
}
.ubi-textos a:hover{
  transform: translateY(-2px);
  background: rgba(212,166,29,.18);
}

/* =========================
   Flecha HERO (si no la tenías aún)
   ========================= */
.hero-arrow{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  text-decoration: none;
  color: rgba(14,35,54,.92);
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(14,35,54,.18);
  backdrop-filter: blur(8px);

  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  animation: arrowBounce 1.2s ease-in-out infinite;
  z-index: 5;
}
.hero-arrow i{ font-size: 22px; }
@keyframes arrowBounce{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(8px); }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .qs-grid{ grid-template-columns: 1fr; }
  .image-row{ grid-template-columns: 1fr; }
  .hacemos-card img{ height: 210px; }
  .ubicacion-box{ grid-template-columns: 1fr; }
  .ubi-icon{ width: 56px; height: 56px; }
}

/* =========================
   UBICACIÓN — centrado limpio
   ========================= */

.ubicacion-ores{
  padding: 70px 0;
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,.05);
}

.ubicacion-box{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(122,91,102,.10);
  padding: 26px 28px 24px;
}

/* ícono centrado */
.ubi-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(212,166,29,.18);
  border: 1px solid rgba(212,166,29,.30);
  font-size: 24px;
  margin-bottom: 4px;
}

/* textos */
.ubi-textos{
  text-align: center;
}

.ubi-textos h3{
  margin: 0 0 10px;
  color: var(--violet);
  font-weight: 900;
  font-size: 1.15rem;
}

.ubi-textos p{
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.6;
}

/* botón */
.ubi-textos a{
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  font-weight: 900;
  color: var(--violet);
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid rgba(212,166,29,.65);
  background: rgba(255,255,255,.8);
  transition: transform .15s ease, background .15s ease;
}

.ubi-textos a:hover{
  transform: translateY(-2px);
  background: rgba(212,166,29,.18);
}


/* ======================================================
   CTA FINAL · OBservar (NÚCLEO) / Novedades (secundario)
   ====================================================== */

.cta-observar{
  background: radial-gradient(1200px 500px at 20% 30%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, #31506b 0%, #7a5b66 100%);
  padding: 4.2rem 1.5rem;
}

.cta-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.85fr; /* OBservar manda */
  gap: 2.2rem;
  align-items: stretch;
}

/* CAJA BASE */
.cta-box{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 2.6rem 2.2rem;
  border-radius: 22px;
  text-decoration: none;
  text-align: center;

  min-height: 240px;
  box-shadow: 0 22px 48px rgba(0,0,0,.35);

  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease;
}

.cta-logo{
  width: 160px;
  margin-bottom: 1rem;
}

/* Texto */
.cta-title{
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cta-sub{
  margin-top: .45rem;
  font-size: .95rem;
  line-height: 1.25;
  max-width: 320px;
}

.cta-cta{
  margin-top: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.cta-cta.small{
  font-weight: 600;
}

/* ------------------------------
   OBservar = NÚCLEO (más sistema)
   ------------------------------ */
.cta-observar-box{
  background: radial-gradient(900px 420px at 30% 25%, rgba(200,155,61,.12), rgba(11,18,32,0) 55%),
              linear-gradient(180deg, #0b1220 0%, #070c16 100%);
  border: 2px solid rgba(200,155,61,.65);
  outline: 1px solid rgba(255,255,255,.06);
}

.cta-observar-box .cta-title{ color: #c89b3d; }
.cta-observar-box .cta-sub{ color: #d8d8d8; }
.cta-observar-box .cta-cta{ color: #c89b3d; }

.cta-observar-box::after{
  content:"";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(200,155,61,.22); /* gesto de “sistema” */
  pointer-events: none;
}

/* Sello NÚCLEO */
.cta-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #0b1220;
  background: #c89b3d;
  box-shadow: 0 10px 22px rgba(200,155,61,.35);
}

/* Hover núcleo: brillo dorado controlado */
.cta-observar-box:hover{
  transform: translateY(-10px);
  box-shadow: 0 34px 78px rgba(200,155,61,.45);
  filter: brightness(1.03);
  border-color: rgba(200,155,61,.95);
}

/* ------------------------------
   Novedades = secundario (sobrio)
   ------------------------------ */
.cta-novedades-box{
  background: linear-gradient(180deg, rgba(122,91,102,.92) 0%, rgba(122,91,102,.78) 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.26);
}

.cta-novedades-box i{
  font-size: 2rem;
  margin-bottom: .75rem;
  color: rgba(255,255,255,.92);
}

.cta-novedades-box .cta-title{ color: rgba(255,255,255,.95); font-size: 1.2rem; }
.cta-novedades-box .cta-sub{ color: rgba(241,230,234,.92); font-size: .92rem; }
.cta-novedades-box .cta-cta{ color: rgba(255,255,255,.9); }

/* Hover secundario: menos brillo, no compite */
.cta-novedades-box:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 58px rgba(0,0,0,.30);
  border-color: rgba(255,255,255,.32);
}

/* ------------------------------
   Responsive
   ------------------------------ */
@media (max-width: 860px){
  .cta-grid{ grid-template-columns: 1fr; }
  .cta-logo{ width: 150px; }
}

/* =========================================================
   SECCIONES · Alternancia clara (blanco / gris tenue / blanco)
   + separación marcada entre bloques
   ========================================================= */

:root{
  --sec-white: #ffffff;
  --sec-soft: #f3f4f6;  /* gris tenue, visible pero elegante */
  --sec-line: rgba(15, 23, 42, 0.08); /* línea sutil de corte */
}

/* Base común de sección: padding + “corte” superior suave */
.section{
  padding: clamp(56px, 6vw, 92px) 0;
  position: relative;
}

/* Línea superior sutil para marcar separación (excepto primera si querés) */
.section::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:1px;
  background: var(--sec-line);
}

/* 1) QUIÉNES SOMOS · blanco */
#quienes.section{
  background: var(--sec-white);
}
#quienes.section::before{
  display: none; /* opcional: la primera sección “no corta” */
}

/* 2) QUÉ HACEMOS · gris tenue */
#hacemos.section{
  background: var(--sec-soft);
}

/* 3) PROYECTOS · blanco */
#proyectos.section{
  background: var(--sec-white);
}

/* Extra: contenedores con buen aire */
#quienes .container,
#hacemos .container,
#proyectos .container{
  position: relative;
}

/* Si querés que el “gris” se note aún más por profundidad (muy fino) */
#hacemos.section{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(15,23,42,0.06);
}

/* Títulos: un pelín más marcados para lectura “de bloque” */
.section h1, .section h2{
  margin-top: 0;
  margin-bottom: 18px;
}

/* Separación entre secciones en anchors (por header sticky) */
#quienes, #hacemos, #proyectos{
  scroll-margin-top: 90px;
}

/* =========================================================
   ASISTENCIA TÉCNICA Y CONSULTORÍA · sección gris + 3 cards
   ========================================================= */

#asistencia.section{
  background: var(--sec-soft, #f3f4f6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -1px 0 rgba(15,23,42,0.06);
}

/* grilla 3 columnas (baja a 2 y 1 en responsive) */
.assist-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.assist-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15,23,42,0.06);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.assist-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15,23,42,0.10);
}

.assist-card img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.assist-text{
  padding: 14px 16px 16px;
}

.assist-text h3{
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.assist-text p{
  margin: 0;
  color: rgba(15,23,42,0.78);
  line-height: 1.5;
  font-size: .98rem;
}

/* Responsive */
@media (max-width: 980px){
  .assist-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .assist-grid{ grid-template-columns: 1fr; }
  .assist-card img{ height: 180px; }
}

/* =========================================================
   BOTÓN "VER +" · debajo del contenido, alineado a la derecha
   ========================================================= */

.section-more{
  margin-top: 22px;            /* separación del último cuadro */
  margin-left: auto;           /* lo empuja a la derecha */
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  text-decoration: none;
  user-select: none;

  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(15,23,42,0.14);
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
  backdrop-filter: blur(8px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Texto */
.section-more__text{
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--vino, #7a5b66);
  font-size: .95rem;
}

/* Círculo + */
.section-more__plus{
  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: linear-gradient(135deg,
    rgba(122,91,102,0.95),
    rgba(49,80,107,0.95)
  );
}

.section-more__plus i{
  color: #fff;
  font-size: .85rem;
}

/* Hover */
.section-more:hover{
  transform: translateY(-2px);
  border-color: rgba(200,155,61,0.35);
  box-shadow: 0 14px 34px rgba(15,23,42,0.12);
}

/* =========================================================
   FOOTER DE SECCIÓN · alinea acciones a la derecha
   ========================================================= */

.section-footer{
  display: flex;
  justify-content: flex-end; /* BOTON a la derecha */
  margin-top: 3px;
}

.section-more{
  background: rgba(122, 91, 102, 0.08); /* vino muy suave */
  border: 1px solid rgba(122, 91, 102, 0.35);
}

.section-more__text{
  color: var(--vino, #7a5b66);
}

.section-more{
  background: linear-gradient(
    135deg,
    rgba(122, 91, 102, 0.14),
    rgba(49, 80, 107, 0.10)
  );
  border: 1px solid rgba(122, 91, 102, 0.45);
}

.section-more{
  background: transparent;
  border: 1px solid rgba(122, 91, 102, 0.35);
}

.footer-year-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.footer-year-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-year-logo{
  height:24px;
  opacity:0.85;
}

.footer-year-text{
  font-weight:600;
  letter-spacing:0.22em;
  opacity:0.65;
}

.footer-year-social a{
  margin-left:12px;
  color:inherit;
  opacity:0.45;
  font-size:0.9rem;
  transition:opacity .2s ease;
}

.footer-year-social a:hover{
  opacity:0.75;
}

.footer-year-bar{
  padding:30px 0;
}