/* =========================================================
     CORE – INDEX (V4 Strategic Index + Product System)
     - Sin humo. Sin saturación visual.
     - Ritmo V3: alterna plain / band / cards sin “todo lo mismo”.
     ========================================================= */

  :root{
    --max: 1080px;
    --radius-lg: 18px;
    --radius-xl: 26px;

    /* Base clara */
    --bg: #e9eef3;

    /* Texto */
    --fg: rgba(10,18,28,.92);
    --fg-2: rgba(10,18,28,.74);
    --fg-3: rgba(10,18,28,.58);

    /* Líneas */
    --line: rgba(10,18,28,.10);
    --line-2: rgba(10,18,28,.15);

    /* Panels (glass claro) */
    --panel: rgba(255,255,255,.62);
    --panel2: rgba(255,255,255,.78);

    /* Acentos */
    --core-teal: #2f9fb2;

    /* Sombras */
    --shadow: 0 14px 40px rgba(10,18,28,.10);
    --shadow-strong: 0 30px 90px rgba(10,18,28,.20);
  }

  *{ box-sizing: border-box; }
  html, body{ height:100%; }
  a{ color: inherit; text-decoration: none; }
  img{ max-width:100%; display:block; }
  button{ font: inherit; }

  body{
    margin:0;
    font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--fg);
    background: var(--bg);
    overflow-x:hidden;
    position: relative;
    isolation: isolate;
  }

  /* Fondo suave */
  body::before{
    content:"";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events:none;
    background:
      radial-gradient(1100px 520px at 18% 12%, rgba(47,159,178,.14), transparent 64%),
      radial-gradient(1000px 520px at 80% 10%, rgba(120,140,160,.09), transparent 64%),
      radial-gradient(1000px 520px at 70% 92%, rgba(47,159,178,.08), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(235,242,248,.74) 55%, rgba(255,255,255,.86) 100%);
    filter: blur(.35px);
    transform: translateZ(0);
  }

  /* Imagen hero sutil (opcional) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .14;

  background:
    radial-gradient(900px 520px at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)),
    url("../img/logo-core.png");

  background-size:
    auto,
    auto,
    400px;

  background-position:
    center,
    center,
    center;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  filter: blur(3px) saturate(0.9);
  transform: translateZ(0);
}

  .noise{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events:none;
    opacity: .040;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    transform: translateZ(0);
  }

  .container{
    width: min(var(--max), calc(100% - 60px));
    margin: 0 auto;
  }

  /* =========================================================
     TOPBAR
     ========================================================= */
  .topbar{
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255,255,255,.52);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateZ(0);
  }
  .topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    padding: 12px 0;
  }
  .brand{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 240px;
  }
  .brand-logo{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.65);
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px rgba(10,18,28,.08);
    overflow:hidden;
    display:grid;
    place-items:center;
  }
  .brand-logo img{
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(10,18,28,.10));
  }
  .brand-name{
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }
  .brand-name strong{
    font-family: "Poppins", sans-serif;
    letter-spacing: .4px;
    font-size: 14px;
    color: var(--fg);
  }
  .brand-name span{
    font-size: 12px;
    color: var(--fg-2);
  }
  .nav{
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content:flex-end;
  }
  .nav a{
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--fg-2);
    font-size: 13px;
    border: 1px solid transparent;
    transition: .2s ease;
    white-space: nowrap;
  }
  .nav a:hover{
    background: rgba(255,255,255,.70);
    border-color: var(--line);
    color: var(--fg);
  }

  /* =========================================================
     BUTTONS
     ========================================================= */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.62);
    color: var(--fg);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor:pointer;
    transition: .2s ease;
    user-select:none;
  }
  .btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.78);
    border-color: var(--line-2);
  }
  .btn.primary{
    border-color: rgba(47,159,178,.35);
    background: linear-gradient(180deg, rgba(47,159,178,.22), rgba(255,255,255,.78));
    box-shadow: 0 14px 42px rgba(47,159,178,.14);
  }
  .btn.primary:hover{
    border-color: rgba(47,159,178,.55);
    box-shadow: 0 18px 54px rgba(47,159,178,.18);
  }
  .btn.small{ padding: 9px 12px; border-radius: 11px; font-size: 12px; }
  .btn.linklike{
    background: transparent;
    border-color: transparent;
    color: var(--fg-2);
    padding-inline: 6px;
  }
  .btn.linklike:hover{
    background: rgba(255,255,255,.65);
    border-color: var(--line);
    color: var(--fg);
    transform: none;
  }

  /* =========================================================
     HERO (PLAIN)
     ========================================================= */
  .hero{ padding: 84px 0 44px; }

  .kicker{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.70);
    color: var(--fg-2);
    font-size: 12px;
  }
  .kdot{
    width: 9px; height: 9px; border-radius: 99px;
    background: rgba(47,159,178,.95);
    box-shadow: 0 0 0 6px rgba(47,159,178,.14);
  }

h1{
      margin: 16px 0 10px;
      font-family:"Poppins", sans-serif;
      font-size: clamp(26px, 3vw, 38px);
      line-height:1.14;
      letter-spacing: .1px;
      color: var(--fg);
      max-width: 30ch;
      font-weight: 600;
    }

  .sub{
    margin: 0 0 26px;
    color: var(--fg-2);
    font-size: 15px;
    line-height: 1.75;
    max-width: 88ch;
  }

  .hero-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 0;
  }

  /* =========================================================
     SECTIONS / CARDS
     ========================================================= */
  section{ padding: 64px 0; position: relative; }
  section{ 
    min-height: 75vh; 
    vertical-align: center;
  }
  .section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 16px;
    margin-bottom: 20px;
  }
  .section-title h2{
    margin:0;
    font-family:"Poppins", sans-serif;
    font-size: clamp(18px, 2.2vw, 26px);
    letter-spacing:.2px;
    color: var(--fg);
  }
  .section-title p{
    margin: 6px 0 0;
    color: var(--fg-2);
    max-width: 82ch;
    line-height:1.7;
    font-size: 14px;
  }

  .plain-lead{
    font-family:"Poppins", sans-serif;
    font-size: clamp(22px, 2.8vw, 34px);
    line-height: 1.15;
    letter-spacing: .1px;
    margin: 0;
  /*  max-width: 34ch;*/
  }
  .plain-copy{
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--fg-2);
    max-width: 78ch;
  }
  .plain-copy p{ margin: 0 0 14px; }
  .plain-copy p:last-child{ margin-bottom: 0; }

  .grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
  .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }

  .card{
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 10px 28px rgba(10,18,28,.08);
    overflow:hidden;
    position:relative;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
/*  .card:hover{
    transform: translateY(-2px);
    background: var(--panel2);
    border-color: var(--line-2);
  } */
  .card.pad{ padding: 16px; }

  .tagrow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .tag{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.70);
    font-size: 12px;
    color: var(--fg-2);
    white-space: nowrap;
  }
  .tag b{ color: var(--fg); font-weight: 600; font-family:"Poppins", sans-serif; font-size: 12px; letter-spacing:.2px; }
  .cta-mini{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    color: var(--fg-2);
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: .18s ease;
    white-space: nowrap;
  }
/*  .card:hover .cta-mini{
    border-color: var(--line);
    background: rgba(255,255,255,.70);
    color: var(--fg);
  }*/

  .card h3{
    margin: 0 0 8px;
    font-family:"Poppins", sans-serif;
    font-size: 15px;
    letter-spacing:.2px;
    color: var(--fg);
  }
  .card p{
    margin:0;
    color: var(--fg-2);
    line-height:1.7;
    font-size: 13.5px;
  }

  /* Workflow (4 pasos) */
  .workflow{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
  }
  .step{
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--panel);
    padding: 14px;
    position: relative;
    overflow:hidden;
    min-height: 132px;
    box-shadow: 0 10px 28px rgba(10,18,28,.08);
  }
  .step::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(900px 260px at 25% 0%, rgba(47,159,178,.10), transparent 55%);
    pointer-events:none;
  }
  .step .n{
    font-family:"Poppins", sans-serif;
    font-weight: 700;
    letter-spacing:.4px;
    font-size: 12px;
    color: var(--fg-3);
    display:inline-flex;
    gap: 8px;
    align-items:center;
  }
  .step .n i{
    width: 18px; height: 18px; border-radius: 6px;
    background: rgba(47,159,178,.12);
    border: 1px solid rgba(47,159,178,.26);
    display:inline-grid;
    place-items:center;
    color: var(--core-teal);
    font-style: normal;
    font-weight: 800;
    font-size: 12px;
  }
  .step h4{
    margin: 10px 0 6px;
    font-family:"Poppins", sans-serif;
    font-size: 14px;
    letter-spacing:.2px;
  }
  .step p{
    margin: 0;
    color: var(--fg-2);
    font-size: 13.3px;
    line-height:1.55;
  }

  /* Contact */
  .contact{
    display:flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }
  .contact .box{
    flex: 1 1 420px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--line);
    background: rgba(255,255,255,.70);
    box-shadow: var(--shadow);
    padding: 16px;
  }
  .contact .box h3{
    margin: 0 0 8px;
    font-family:"Poppins", sans-serif;
    font-size: 15px;
    letter-spacing:.2px;
  }
  .contact .box p{
    margin: 0;
    color: var(--fg-2);
    line-height: 1.7;
    font-size: 13.5px;
  }
  .contact .box .actions{
    margin-top: 14px;
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Footer */
  footer{
    padding: 34px 0 46px;
    color: var(--fg-2);
    font-size: 13px;
  }
  .foot{
    border-top: 1px solid rgba(10,18,28,.08);
    padding-top: 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .foot small{ color: var(--fg-3); }

  /* Responsive */
  @media (max-width: 980px){
    .workflow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid-3{ grid-template-columns: 1fr; }
    .brand{ min-width: auto; }
  }
  @media (max-width: 520px){
    .nav{ display:none; }
    .workflow{ grid-template-columns: 1fr; }
  }


/* CTA box (1 importante) */
.cta{
  border-radius: 26px;
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(47,159,178,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 10%, rgba(120,140,160,.10), transparent 60%),
    var(--panel);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items:center;
}
.cta h3{
  margin:0 0 6px;
  font-family:"Poppins", sans-serif;
  font-size: 18px;
  letter-spacing:.2px;
  color: var(--fg);
}
.cta p{
  margin:0;
  color: var(--fg-2);
  line-height: 1.7;
  font-size: 13.5px;
}
.cta-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
  </style>

<style>
  .card{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(10,18,28,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.6));
  backdrop-filter: blur(6px);
  box-shadow:
    0 8px 24px rgba(10,18,28,.08),
    inset 0 1px 0 rgba(255,255,255,.4);
  overflow: hidden;
  transition: all .25s ease;
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, transparent, #2f9fb2, transparent);
  opacity:.6;
}

/*.card:hover{
  transform: translateY(-4px);
  box-shadow:
    0 20px 50px rgba(10,18,28,.12),
    inset 0 1px 0 rgba(255,255,255,.5);
  border-color: rgba(47,159,178,.25);
}*/

.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(47,159,178,.08), transparent 40%);
  opacity:0;
  transition:.3s;
  pointer-events:none;
}

.card:hover::after{
  opacity:1;
}


/*Lang Switch*/
.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  overflow: hidden;
  font-size: 12px;
}

.lang-switch a {
  padding: 6px 10px;
  text-decoration: none;
  color: #555;
  transition: all 0.2s ease;
}

.lang-switch a:hover {
  background: rgba(0,0,0,0.05);
}

.lang-switch a.active {
  background: #111;
  color: #fff;
}
.section-soft {
  background: rgba(255,255,255,.55);
}

.section-clear {
  background: transparent;
}