/* =========================================================
   Cyverse · Landings (3 homes) — CSS unificado y responsive
   ========================================================= */

/* -------------------- Base / Reset liviano -------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; width:100%; max-width:100%; overflow-x:hidden; }
body{
  margin:0; background:#fff; color:#0f172a;
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
img,svg,video,canvas,iframe{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
section,header,footer{ overflow-x:clip; }
:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }

/* -------------------- Design tokens -------------------- */
:root{
  --text:#0f172a;
  --muted:#64748b;

  --brand:#3B82F6;    /* se sobreescribe por tema */
  --brand-600:#2563EB;

  --bg-section:#ffffff;
  --bg-soft:#f8f9fb;

  --container:1120px;
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.06);

  --h1: clamp(40px, 9.5vw, 96px);
  --h2: clamp(28px, 3.5vw, 40px);
  --h3: clamp(16px, 2.2vw, 18px);
  --p:  clamp(15px, 1.6vw, 17px);

  /* Vertical rhythm (más compacto) */
  --sectionY: clamp(48px, 6vw, 80px);
  --sectionY-compact: clamp(32px, 4.5vw, 56px);
}

/* Temas por landing */
body.landing-general{ --brand:#3B82F6; --brand-600:#2563EB; }
body.landing-agro   { --brand:#18b368; --brand-600:#149257; }
body.landing-tic    { --brand:#1E40AF; --brand-600:#1E3A8A; }

/* -------------------- Layout helpers -------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:16px; }
.section{ padding:clamp(48px,6vw,72px) 0; }
.grid{ display:grid; gap:18px; }
@media (min-width:768px){
  .grid.cols-2{ grid-template-columns:repeat(2,1fr); }
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
}

/* -------------------- Tipografía -------------------- */
h1,h2,h3{ margin:0 0 10px; line-height:1.12; letter-spacing:-.01em; color:var(--text); }
h1{ font-size:var(--h1); letter-spacing:-.02em; font-weight:900; }
h2{ font-size:var(--h2); font-weight:900; }
h3{ font-size:var(--h3); font-weight:700; }
p{ margin:0; font-size:var(--p); color:var(--text); }
.muted{ color:#475569; }

/* -------------------- Botones -------------------- */
.btn{
  display:inline-block; padding:14px 18px; border-radius:12px;
  font-weight:700; line-height:1; border:1.5px solid transparent; cursor:pointer;
  transition:background .2s, color .2s, transform .2s, box-shadow .2s;
  box-shadow:var(--shadow); white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-600); transform:translateY(-1px); }
.btn-outline{ background:#fff; color:var(--brand); border-color:var(--brand); }
.btn-outline:hover{ background:var(--brand); color:#fff; transform:translateY(-1px); }
@media (max-width:640px){ .btn{ width:100%; text-align:center; } }

.btn-secondary {
  background-color: #269e76; /* color secundario */
  color: #fff;
  border: none;
}

.btn-secondary:hover {
  background-color: #334155;
}

.btn {
  margin-bottom: 20px; /* podés ajustar el valor, 8–16px queda bien */
}


/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg,#0A1B3D 0%,#102E5C 50%,#1E3A8A 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);

  height: 64px; 
}

.navbar .container {
  display: flex;
  align-items: center;   /* 🔑 esto alinea logo + links + botón */
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  height: 100%;
}

.logo img {
  height: 110px;  /* tamaño del logo */
  width: auto;
}

nav {
  display: flex;
  align-items: center;   /* 🔑 asegura que los links y CTA estén centrados */
  margin-left: auto;
}

.nav-links {
  display: none;
  gap: 6px;
}

.nav-links a {
  color: #fff;
  font-weight: 500;
  padding: 10px 12px;
  transition: opacity .2s, text-decoration-color .2s;
}

.nav-links a:hover {
  text-decoration: underline;
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
}

@media (max-width: 420px) {
  .logo img { height: 32px; }
}

/* CTA en navbar */
.navbar .btn,
.navbar .nav-cta {
  display: flex;              /* que sea flex */
  align-items: center;        /* centra vertical el texto */
  justify-content: center;    /* centra horizontal */
  height: 40px;               /* subile un poco para que “llene” más */
  margin: 0;                  /* quita márgenes raros */
  line-height: 1;             /* evita que el texto lo suba */
  padding: 0 18px;            /* ancho cómodo */
  align-self: center;         /* 🔑 fuerza a que se alinee al centro de la barra */
}

@media (max-width: 480px) {
  .navbar .btn,
  .navbar .nav-cta {
    height: 36px;
    padding: 0 14px;
    font-size: 0.9rem; /* letra un poco más chica */
  }
}

/* Ocultar CTA en móvil */
@media (max-width: 640px) {
  .navbar .nav-cta {
    display: none !important;
  }
}


/* =========================================================
   HERO (una columna)
   ========================================================= */
.hero{ background:#f5f8fc; }
.hero__container{ max-width:1120px; margin:0 auto; padding: clamp(72px,12vw,128px) 16px clamp(56px,8vw,96px); }
.hero h1{ max-width:18ch; }
.hero p{
  margin:0 0 32px; max-width:780px; color:#4a5a6a;
  line-height:1.6; font-size:clamp(18px,2.4vw,22px);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:480px){
  .hero h1{ max-width:100%; }
  .hero p{ max-width:100%; }
  .hero__actions{ width:100%; }
}

/* =========================================================
   BLOQUE: Valor (dolor + solución)
   ========================================================= */
#bloque-valor{ background:#fff; padding-block:var(--sectionY); }
#bloque-valor .section-head{ text-align:center; margin-bottom:28px; }
.section-head p{
  max-width:70ch; margin:0 auto; color:#374151;
  font-size:clamp(16px,2.2vw,18px); line-height:1.55;
}
.value__grid{ display:grid; gap:24px; }
@media (min-width:900px){ .value__grid{ grid-template-columns:1fr 1fr; } }
.value-card{
  background:#f8f9fa; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:22px; box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.value-card__title{ font-size:1.2rem; margin-bottom:8px; font-weight:700; }
.value-card__list li{ position:relative; padding-left:26px; margin:10px 0 0; color:#0f172a; }
.value-card__list li::before{
  content:"✔"; color:var(--brand); position:absolute; left:0; top:0;
}
.value-aside{ grid-column:1 / -1; text-align:center; }
.value-aside .btn{ border-radius:10px; }

/* =========================================================
   BLOQUE 3 — Social proof (Resultados y confianza)
   ========================================================= */
#bloque-social{
  padding:56px 0; background:#f8f9fa; text-align:center; border-top:1px solid rgba(0,0,0,.06);
}
#bloque-social .section-head{ margin-bottom:28px; }
#bloque-social .metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:24px; align-items:start; justify-items:center;
  margin:28px 0 6px;
}
@media (max-width:768px){
  #bloque-social .metrics{ grid-template-columns:1fr; gap:20px; }
}
.metric{
  width:100%; max-width:320px; min-height:170px;
  padding:16px 14px; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.metric__icon{ width:36px; height:36px; display:grid; place-items:center; margin:0 0 8px; }
.metric__icon svg{ width:22px; height:22px; fill:var(--brand); }
.metric__value{
  font-size:2.1rem; font-weight:800; letter-spacing:-.02em; color:var(--brand);
  margin-bottom:4px; line-height:1;
}
.metric__label{ font-size:.96rem; color:#4b5563; max-width:22ch; }

.metric__subtext {
  display:block;
  font-size:0.85rem;  /* un poco más grande */
  color:#475569;
  margin-top:6px;     /* más aire */
  line-height:1.4;    /* más legible */
  text-align:center;
  max-width:28ch;     /* controla el ancho de línea */
}


.metric__desc {
  font-size: 0.85rem;
  color: #475569;   /* gris suave */
  margin-top: 4px;
  line-height: 1.3;
}

/* =========================================================
   BLOQUE 4 — Proceso
   ========================================================= */
.process .process__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

@media (max-width: 992px){
  .process .process__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .process .process__grid{ grid-template-columns:1fr; }
}

.process .step-card{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px 16px 14px;
}

.process .step-card__head{
  display:flex;
  align-items:center;
  gap:10px;
}

.process .step-card .n{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:999px;
  font-size:0.9rem;font-weight:600;
  color:#1d4ed8;background:#e0ecff; /* azul suave */
  flex:0 0 24px;
}

.process .step-card .t{
  font-weight:700;
  color:#0f172a;
  line-height:1.1;
  flex:1 1 auto;
}

.process .step-card .badge{
  font-size:0.75rem;
  padding:2px 8px;
  border-radius:999px;
  background:#eef2f7;
  color:#334155;
  flex:0 0 auto;
}

.process .step-card .desc{
  margin:10px 0 0;
  font-size:0.95rem;
  color:#475569;
  line-height:1.35;
}

/* Si tenías alturas fijas en .step, eliminarlas */




/* =========================================================
   BLOQUE: Servicios (cards)
   ========================================================= */
#bloque-servicios{ background:#fff; padding-block:var(--sectionY); }
#bloque-servicios .section-head{ text-align:center; margin-bottom:clamp(28px,4vw,44px); }
.services__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:990px){ .services__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .services__grid{ grid-template-columns:1fr; } }
.svc-card{
  display:flex; flex-direction:column; gap:10px;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:20px;
  color:inherit; text-decoration:none; box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.svc-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); border-color:rgba(37,99,235,.2); }
.svc-card__icon{ width:40px; height:40px; display:grid; place-items:center; background:transparent; }
.svc-card__icon svg{ width:22px; height:22px; fill:var(--brand); transition:transform .15s, fill .15s; }
.svc-card:hover .svc-card__icon svg{ transform:translateY(-1px); fill:var(--brand-600); }
.svc-card__title{ font-weight:700; font-size:1.05rem; line-height:1.2; margin:2px 0 4px; }
.svc-card__desc{ font-size:.96rem; color:#334155; }
.services__cta{ margin-top:clamp(28px,4vw,44px); }

/* =========================================================
   BLOQUE: Enlaces a sectores
   ========================================================= */
.extra-links-sectores .sectores-grid{ display:grid; gap:24px; grid-template-columns:1fr 1fr; }
@media (max-width:768px){ .extra-links-sectores .sectores-grid{ grid-template-columns:1fr; } }
.extra-links-sectores .sector-card{
  background:#fff; border:1.5px solid #e5e7eb; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.06); padding:18px 22px; text-align:center;
  display:flex; flex-direction:column; justify-content:space-between;
}
.extra-links-sectores .sector-card p{ margin:0 0 12px; min-height:3.2em; }
.sector-btn{ display:inline-block; padding:10px 14px; border-radius:10px; font-weight:800; color:#fff; }
.sector-btn--agro{ background:#22a06b; box-shadow:0 4px 10px rgba(34,160,107,.25); }
.sector-btn--energia{ background:#2563eb; box-shadow:0 4px 10px rgba(37,99,235,.25); }

/* =========================================================
   BLOQUE: Entregables (visual grande + copy)
   ========================================================= */
#bloque-entregables{ background:#f8f9fa; border-top:1px solid rgba(0,0,0,.06); padding-block:var(--sectionY); }
#bloque-entregables > .container{ max-width:1480px; padding-inline:20px; }
.deliverables__grid{
  display:grid; gap:40px; align-items:center;
  grid-template-columns:minmax(760px,1000px) minmax(420px,560px);
}
.deliverables__visual{ justify-self:center; width:100%; max-width:1040px; }
.deliverables__visual svg,.deliverables__visual img{
  width:100%; height:auto; border-radius:14px; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 18px rgba(0,0,0,.06); background:#fff;
}
.deliverables__copy h2{ margin:0 0 12px; font-size:var(--h2); }
.deliverables__list{ display:grid; gap:10px; color:var(--text); }
.deliverables__list li{ display:flex; gap:8px; align-items:flex-start; }
.deliverables__list li::before{ content:"✓"; color:var(--brand); font-weight:800; margin-top:2px; }
@media (max-width:1100px){
  .deliverables__grid{ grid-template-columns:1fr; gap:24px; }
  .deliverables__visual{ max-width:820px; }
}

/* =========================================================
   BLOQUE: Proceso (píldoras)
   ========================================================= */
#bloque-proceso{ background:#fff; padding-block:var(--sectionY); }
.process__steps{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(180px,1fr)); }
@media (max-width:900px){ .process__steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .process__steps{ grid-template-columns:1fr; } }
.process__steps .step{
  position:relative; display:flex; align-items:center; gap:10px;
  background:#f8f9fa; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:14px 16px; font-weight:600;
}
.process__steps .n{
  width:26px; height:26px; display:grid; place-items:center; border-radius:999px;
  background:#eef5ff; color:#0a67e7; font-weight:800; border:1px solid rgba(10,103,231,.2);
}
.process__steps .t{ line-height:1.25; }
.process__steps .step::after{
  content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%);
  width:14px; height:2px; background:rgba(10,103,231,.25); border-radius:2px;
}
.process__steps .step:last-child::after{ display:none; }
@media (max-width:1024px){ .process__steps .step::after{ display:none; } }

/* =========================================================
   CTA intermedio (más compacto)
   ========================================================= */
#bloque-cta-mid{ background:transparent; margin-block: clamp(20px,3.5vw,40px); }
.cta-mid__wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  border:1px solid rgba(0,0,0,.06); border-radius:14px; box-shadow:0 8px 26px rgba(0,0,0,.07);
  padding:18px 20px;
}
.cta-mid__copy{ margin:0; color:#0f172a; line-height:1.45; font-size:1.04rem; }
.cta-mid__copy strong{ font-weight:800; }
.cta-mid__btn{ position:relative; }
.cta-mid__btn::after{ content:"›"; margin-left:8px; font-size:20px; }
@media (max-width:900px){
  .cta-mid__wrap{ flex-direction:column; align-items:flex-start; }
  .cta-mid__btn{ width:100%; text-align:center; }
}

/* Espaciado fino entre Proceso → CTA → FAQ (desktop) */
@media (min-width:1024px){
  #bloque-proceso + #bloque-cta-mid{ margin-top: clamp(16px,3vw,28px); }
  #bloque-cta-mid + #bloque-faq{ padding-top: clamp(24px,3.5vw,40px); }
}

/* =========================================================
   FAQ
   ========================================================= */
#bloque-faq{ background:transparent; position:relative; z-index:1; padding-block:var(--sectionY); }
.faq__list{ display:grid; gap:10px; }
.faq__item{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.05); overflow:hidden;
}
.faq__item > summary{
  list-style:none; cursor:pointer; padding:14px 48px 14px 18px; font-weight:700;
  display:flex; align-items:center; gap:10px; position:relative; user-select:none;
}
.faq__item > summary::-webkit-details-marker{ display:none; }
.faq__item > summary::after{
  content:"▾"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:16px; color:#64748b; transition:transform .2s;
}
.faq__item[open] > summary::after{ transform:translateY(-50%) rotate(-180deg); }
.faq__content{ padding:0 18px 16px; color:#111827; line-height:1.6; border-top:1px solid rgba(0,0,0,.06); }

/* =========================================================
   CTA final
   ========================================================= */
#bloque-cta-final.cta-final--compact{
  background:linear-gradient(180deg,#f6f9ff 0%, #f3f6fb 100%);
  border-top:1px solid rgba(0,0,0,.06);
  padding-block: var(--sectionY-compact);
  margin-top: var(--sectionY-compact);
}
.cta-final__wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cta-final__copy h2{ margin:0 0 6px; line-height:1.2; font-size:1.8rem; }
.cta-final__copy p{ margin:0; color:#374151; }
.cta-final__actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
@media (max-width:900px){
  .cta-final__wrap{ flex-direction:column; align-items:flex-start; }
  #bloque-cta-final .btn{ width:100%; text-align:center; }
}

/* =========================================================
   Footer mini
   ========================================================= */
.footer-mini{
  background:#0b0f16; color:#e5e7eb; border-top:1px solid rgba(255,255,255,.06);
}
.footer-mini__grid{
  display:grid; grid-template-columns:auto 1fr 1fr; align-items:center;
  column-gap:24px; row-gap:12px; padding:16px 0;
}
.footer-mini__brand{ display:flex; align-items:center; gap:14px; }
.footer-mini__logo{ height:100px; width:auto; max-width:320px; object-fit:contain; }
.footer-mini__brand-text{ display:flex; flex-direction:column; gap:4px; }
.footer-mini__brand-text strong{ font-size:1.05rem; }
.footer-mini__tag{ color:#b6c2d6; font-size:.95rem; }
.footer-mini__connect ul{ display:flex; gap:14px; align-items:center; }
.footer-mini__connect a{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#cfe0ff; }
.footer-mini__connect a:hover{ text-decoration:underline; }
.footer-mini__connect svg{ width:18px; height:18px; color:#93c5fd; }
.footer-mini__legal{ justify-self:end; }
.footer-mini__legal ul{ display:flex; gap:14px; }
.footer-mini__copy{ margin:0; color:#9aa5b1; font-size:.95rem; }
@media (max-width:900px){
  .footer-mini__grid{ grid-template-columns:1fr; align-items:flex-start; }
  .footer-mini__legal{ justify-self:start; }
}
@media (max-width:520px){ .footer-mini__logo{ height:72px; max-width:260px; } }

.footer-mini__brand-link {
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:inherit;
}
.footer-mini__brand-link:hover { opacity:.9; }


/* =========================================================
   Robustez extra (texto largo y grillas)
   ========================================================= */
.container,.services__grid,.value__grid,#bloque-social .metrics{ min-width:0; }
.hero p,.section-head p,.svc-card__desc,.footer-mini__copy,.value-card__list li,.metric__label{
  overflow-wrap:anywhere; word-break:break-word;
}

/* ===== Servicios — layout compacto (no se estira) ===== */
.services--compact .svc{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; border:1px solid rgba(0,0,0,.06); border-radius:14px;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
  text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.services--compact .svc:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border-color:rgba(37,99,235,.20);
}

.services--compact .svc__icon{
  flex:0 0 40px; width:40px; height:40px; display:grid; place-items:center;
  font-size:24px; line-height:1; background:transparent; border-radius:8px;
}
@media (min-width:900px){ .services--compact .svc__icon{ font-size:26px; } }

.services--compact .svc__body{ min-width:0; } /* evita estirado por textos largos */
.services--compact .svc__title{ margin:2px 0 4px; font-weight:800; font-size:1.02rem; line-height:1.2; }
.services--compact .svc__desc{
  font-size:.95rem; color:#334155; margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; /* evita cards altas */
}

/* Grilla existente, sin cambios; sólo ajusto gaps leves */
.services__grid.services--compact{ gap:18px; }
@media (max-width:990px){ .services__grid.services--compact{ gap:16px; } }
@media (max-width:640px){
  .services--compact .svc{ flex-direction:row; } /* mantiene icono izquierda en mobile; si querés stack, usa column */
}


/* Verde primario (ya existe en tu btn-primary) */

/* Verde secundario */
.btn-secondary {
  background-color: #01125a;  /* verde claro */
  border: 1px solid #01125a;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #01125a;  /* hover más oscuro */
  border-color: #01125a;
}


/* === Ocultar CTA de navbar en móvil === */
@media (max-width: 768px) {
  .navbar > .container > a.btn {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .navbar .nav-cta {
    display: none !important;
  }
}