/* ---------- Design tokens ---------- */
  :root{
    --teal:        #2B6568;
    --teal-deep:   #1A4548;
    --teal-ink:    #0E2425;
    --mint:        #C9DDD9;
    --mint-soft:   #E4EEEC;
    --yellow:      #FFF200;
    --yellow-soft: #FFFAB8;
    --cream:       #F4EFE4;
    --cream-warm:  #EDE6D6;
    --paper:       #FBF8F1;
    --ink:         #0E1B1C;
    --ink-2:       #2A3637;
    --muted:       #6B7676;
    --line:        rgba(14,27,28,.10);
    --line-on-teal:rgba(255,255,255,.16);

    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
    --serif:   "Instrument Serif", "Times New Roman", Georgia, serif;

    --radius-s: 10px;
    --radius-m: 18px;
    --radius-l: 28px;
    --radius-xl: 40px;

    --ease: cubic-bezier(.2,.7,.2,1);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); }
  html{ scroll-behavior:smooth; }
  body{
    font-family: var(--display);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01","cv11";
    letter-spacing: -0.01em;
    line-height: 1.45;
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

  /* ---------- Layout ---------- */
  .wrap{ width:min(1240px, 92vw); margin-inline:auto; }
  section{ position:relative; }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:14px; left:0; right:0; z-index:50;
    display:flex; justify-content:center; pointer-events:none;
  }
  .nav-inner{
    pointer-events:auto;
    display:flex; align-items:center; gap:28px;
    padding:10px 12px 10px 20px;
    background: rgba(251,248,241,0.72);
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow: 0 10px 40px -22px rgba(14,27,28,.25);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:600; letter-spacing:-0.02em; font-size:17px;
  }
  .brand-dot{
    width:22px; height:22px; border-radius:50%;
    background: var(--teal);
    position:relative;
    box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--teal);
  }
  .brand-dot::after{
    content:""; position:absolute; inset:6px 6px auto auto;
    width:6px; height:6px; border-radius:50%; background:var(--yellow);
  }
  .nav ul{
    list-style:none; padding:0; margin:0;
    display:flex; gap:6px;
    font-size:14px; color:var(--ink-2);
  }
  .nav ul a{
    display:block; padding:8px 12px; border-radius:999px;
    transition: background .35s var(--ease), color .35s var(--ease);
  }
  .nav ul a:hover{ background: var(--mint-soft); color:var(--teal-deep); }
  .nav .cta{
    background:var(--ink); color:var(--paper);
    padding:10px 18px; border-radius:999px;
    font-size:14px; font-weight:500;
    display:inline-flex; align-items:center; gap:8px;
    transition: transform .4s var(--ease), background .4s var(--ease);
  }
  .nav .cta:hover{ background:var(--teal-deep); transform:translateY(-1px); }
  .nav .cta svg{ width:14px; height:14px; }

  /* Hamburger button (mobile only) */
  .nav-burger{
    display: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: transparent; border: 1px solid var(--line);
    color: var(--ink);
    align-items: center; justify-content: center;
    transition: background .35s var(--ease), border-color .35s var(--ease);
  }
  .nav-burger:hover{ background: var(--mint-soft); }
  .nav-burger .bars{
    position: relative; width: 16px; height: 12px;
  }
  .nav-burger .bars span{
    position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px;
    background: var(--ink); transition: transform .35s var(--ease), opacity .25s var(--ease), top .35s var(--ease);
  }
  .nav-burger .bars span:nth-child(1){ top: 0; }
  .nav-burger .bars span:nth-child(2){ top: 5px; }
  .nav-burger .bars span:nth-child(3){ top: 10px; }
  .nav-burger[aria-expanded="true"] .bars span:nth-child(1){ top: 5px; transform: rotate(45deg); }
  .nav-burger[aria-expanded="true"] .bars span:nth-child(2){ opacity: 0; }
  .nav-burger[aria-expanded="true"] .bars span:nth-child(3){ top: 5px; transform: rotate(-45deg); }

  /* Mobile menu panel */
  .nav-mobile{
    position: fixed; left: 50%; transform: translateX(-50%) translateY(-12px);
    top: 78px;
    width: min(360px, 92vw);
    background: rgba(251,248,241,.95);
    backdrop-filter: saturate(140%) blur(20px);
    -webkit-backdrop-filter: saturate(140%) blur(20px);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 30px 60px -20px rgba(14,27,28,.25);
    z-index: 49;
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease), transform .4s var(--ease);
  }
  .nav-mobile.open{
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-mobile ul{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .nav-mobile a{
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-radius: 14px;
    font-size: 16px; color: var(--ink); font-weight: 500;
    transition: background .35s var(--ease), color .35s var(--ease);
  }
  .nav-mobile a:hover, .nav-mobile a:focus{ background: var(--mint-soft); color: var(--teal-deep); }
  .nav-mobile a::after{
    content: "→"; opacity: 0; transform: translateX(-4px);
    transition: opacity .3s var(--ease), transform .3s var(--ease); color: var(--teal);
  }
  .nav-mobile a:hover::after{ opacity: 1; transform: translateX(0); }
  .nav-mobile .sep{
    height: 1px; background: var(--line); margin: 8px 4px;
  }
  .nav-mobile .cta-mobile{
    display: flex; justify-content: center; gap: 10px;
    background: var(--ink); color: var(--paper);
    padding: 14px 18px; border-radius: 999px;
    font-size: 15px; font-weight: 500;
  }
  .nav-mobile .cta-mobile:hover{ background: var(--teal-deep); color: #fff; }
  .nav-mobile .cta-mobile::after{ content: none; }

  /* Backdrop when menu open */
  .nav-backdrop{
    position: fixed; inset: 0; z-index: 48;
    background: rgba(14,27,28,.18);
    opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease);
  }
  .nav-backdrop.open{ opacity: 1; pointer-events: auto; }

  @media (max-width: 880px){
    .nav-inner{ gap: 12px; padding: 8px 8px 8px 18px; }
    .nav ul{ display:none; }
    .nav .cta{ display: none; }
    .nav-burger{ display: inline-flex; }
  }
  @media (min-width: 881px){
    .nav-mobile, .nav-backdrop{ display: none !important; }
  }

  /* ---------- Hero ---------- */
  .hero{
    padding: 140px 0 80px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(900px 600px at 88% -10%, rgba(255,242,0,.55), transparent 60%),
      radial-gradient(700px 500px at -5% 30%, rgba(201,221,217,.6), transparent 60%),
      var(--paper);
  }
  .hero .grid{
    display:grid; grid-template-columns: 1.25fr .9fr; gap:60px; align-items:end;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--teal-deep);
    padding:8px 14px; border:1px solid var(--line);
    border-radius:999px; background:rgba(255,255,255,.6);
    backdrop-filter: blur(6px);
  }
  .eyebrow .pulse{
    width:8px; height:8px; border-radius:50%; background:var(--teal);
    box-shadow:0 0 0 0 rgba(43,101,104,.6);
    animation: pulse 2.4s infinite var(--ease);
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(43,101,104,.55);}
    70%{ box-shadow:0 0 0 14px rgba(43,101,104,0);}
    100%{ box-shadow:0 0 0 0 rgba(43,101,104,0);}
  }

  h1.display{
    margin: 22px 0 18px;
    font-size: clamp(48px, 7.2vw, 108px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    font-weight: 600;
    color: var(--teal-ink);
  }
  h1.display .serif{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  h1.display .mark{
    position:relative; display:inline-block; padding:0 .08em;
    color:var(--teal-ink);
  }
  h1.display .mark::before{
    content:""; position:absolute; inset: 18% -.04em 8% -.04em;
    background:var(--yellow); z-index:-1;
    border-radius:6px;
    transform: skewX(-6deg);
  }
  .hero p.lead{
    font-size: clamp(17px, 1.35vw, 21px);
    color: var(--ink-2);
    max-width: 56ch;
    margin: 0 0 32px;
  }
  .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px;
    border-radius:999px;
    font-size:15px; font-weight:500;
    transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
  }
  .btn-primary{ background:var(--teal); color:#fff; box-shadow: 0 12px 30px -16px rgba(43,101,104,.7); }
  .btn-primary:hover{ background:var(--teal-deep); transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--teal-ink); border:1px solid var(--line); }
  .btn-ghost:hover{ background:#fff; }
  .btn svg{ width:16px; height:16px; transition: transform .4s var(--ease); }
  .btn:hover svg{ transform: translateX(3px); }

  /* Hero card cluster */
  .hero-card-cluster{ position:relative; height: 680px; }
  .card{
    position:absolute;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-l);
    box-shadow: 0 30px 60px -28px rgba(14,27,28,.25);
    padding:22px;
    transition: transform .8s var(--ease);
  }
  .card-a{
    inset: 0 0 auto auto;
    width: clamp(340px, 92%, 460px);
    padding: 0;
    overflow: hidden;
    transform: rotate(-2deg);
    text-decoration: none;
    color: var(--teal-ink);
    display: block;
    z-index: 5;
    box-shadow: 0 40px 80px -30px rgba(14,27,28,.5);
  }
  .card-a:hover{ box-shadow: 0 50px 90px -28px rgba(14,27,28,.55); transform: rotate(-2deg) translateY(-4px); }
  .card-a .feat-thumb{
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--teal-deep);
  }
  .card-a .feat-thumb img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .8s var(--ease);
  }
  .card-a:hover .feat-thumb img{ transform: scale(1.05); }
  .card-a .feat-tag{
    position: absolute; top: 16px; left: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--yellow); color: var(--teal-ink);
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  }
  .card-a .feat-tag .pulse{ width: 7px; height: 7px; border-radius: 50%; background: var(--teal-deep); }
  .card-a .feat-body{ padding: 22px 24px 24px; }
  .card-a .feat-label{ font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .card-a .feat-name{
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 40px; letter-spacing: -0.02em; margin: 6px 0 10px; line-height: 1.02;
    color: var(--teal-deep);
  }
  .card-a .feat-desc{ margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .card-a .feat-link{
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--teal);
  }
  .card-a .feat-link svg{ width: 16px; height: 16px; transition: transform .4s var(--ease); }
  .card-a:hover .feat-link svg{ transform: translateX(3px); }

  .card-b{
    inset: auto auto 0 0;
    width: 230px;
    transform: rotate(4deg);
    z-index: 2;
  }
  .card-b .stack{ display:flex; align-items:center; gap:-8px; }
  .avatar{
    width:42px; height:42px; border-radius:50%;
    box-shadow: 0 0 0 3px #fff;
    background-size: cover; background-position: center top;
    background-color: #2B6568;
  }
  .avatar + .avatar{ margin-left:-12px; }
  /* Rubén en primer plano, el resto detrás en cascada */
  .card-b .stack .avatar:nth-child(1){ z-index:4; }
  .card-b .stack .avatar:nth-child(2){ z-index:3; }
  .card-b .stack .avatar:nth-child(3){ z-index:2; }
  .card-b .stack .avatar:nth-child(4){ z-index:1; }
  .av-r{ background-image: url('../team/ruben.jpg'); }
  .av-e{ background-image: url('../team/emil.png'); }
  .av-l{ background-image: url('../team/leonardo.png'); }
  .av-d{ background-image: url('../team/diego.webp'); }
  .card-b h4{ margin: 14px 0 4px; font-size:18px; letter-spacing:-0.02em; font-weight:600; }
  .card-b p{ margin:0; color:var(--muted); font-size:13px; }

  .card-c{
    inset: auto 0 0 auto;
    width: 230px;
    background: var(--cream-warm);
    z-index: 1;
    transform: rotate(-1.5deg);
  }
  .card-c .num{
    font-family:var(--serif); font-style:italic; font-size:64px; letter-spacing:-0.04em;
    color:var(--teal-deep); line-height:.9;
  }
  .card-c .num sup{ font-size:24px; vertical-align: super; color:var(--ink-2); margin-left:4px;}
  .card-c p{ margin: 8px 0 0; font-size:13px; color:var(--ink-2); }

  .marquee-wrap{
    margin-top: 70px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
    background: rgba(255,255,255,.45);
    overflow:hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee{
    display:flex; gap:60px; width:max-content;
    animation: scroll 36s linear infinite;
    color: var(--ink-2); font-size:14px;
    align-items:center;
  }
  .marquee span{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
  .marquee .dot{ width:6px; height:6px; border-radius:50%; background: var(--teal); }
  @keyframes scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
  }

  /* ---------- Section heads ---------- */
  .sec{ padding: 120px 0; }
  .sec-head{
    display:grid; grid-template-columns: .4fr 1fr; gap:60px; align-items:end;
    margin-bottom: 56px;
  }
  .sec-tag{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color: var(--teal-deep);
  }
  .sec-tag::before{
    content:""; width: 28px; height:1px; background: var(--teal);
  }
  h2.sec-title{
    margin: 14px 0 0;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.02; letter-spacing:-0.035em;
    font-weight:600; color: var(--teal-ink); max-width: 18ch;
  }
  h2.sec-title em{ font-family:var(--serif); font-style:italic; font-weight:400; color: var(--teal); }
  .sec-desc{
    color: var(--ink-2); font-size: 18px; max-width: 52ch;
  }

  /* ---------- Servicios ---------- */
  .services{
    display:grid; grid-template-columns: repeat(12, 1fr); gap: 18px;
  }
  .svc{
    grid-column: span 4;
    background:#fff;
    border:1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 28px;
    position:relative; overflow:hidden;
    min-height: 320px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
  }
  .svc:hover{ transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(14,27,28,.35); }
  .svc.feat{ grid-column: span 6; background: var(--teal); color:#fff; border-color: transparent; min-height: 360px; }
  .svc.feat .svc-num, .svc.feat .svc-meta{ color: rgba(255,255,255,.7); }
  .svc.feat .svc-title{ color:#fff; }
  .svc.feat .svc-desc{ color: rgba(255,255,255,.82); }
  .svc.alt{ grid-column: span 6; background: var(--cream-warm); }

  .svc-num{
    font-size:12px; letter-spacing:.18em; color:var(--muted);
  }
  .svc-title{
    margin: 22px 0 10px;
    font-size: 30px; letter-spacing:-0.025em; font-weight:600;
    color: var(--teal-ink); line-height:1.04;
  }
  .svc-title em{ font-family:var(--serif); font-style:italic; font-weight:400; }
  .svc-desc{ margin:0; font-size:15px; color: var(--ink-2); }
  .svc-meta{
    margin-top:24px; display:flex; gap:8px; flex-wrap:wrap; font-size:12px;
  }
  .chip{
    padding: 6px 12px; border-radius:999px;
    background: var(--mint-soft); color: var(--teal-deep);
    border:1px solid transparent;
  }
  .svc.feat .chip{ background: rgba(255,255,255,.12); color:#fff; }
  .svc .glyph{
    position:absolute; right:-20px; bottom:-20px; width:160px; height:160px;
    opacity:.08; color: var(--teal-ink);
    transition: transform .8s var(--ease), opacity .5s var(--ease);
  }
  .svc.feat .glyph{ color:var(--yellow); opacity:.5; }
  .svc:hover .glyph{ transform: rotate(8deg) scale(1.05); }

  /* ---------- Para quién ---------- */
  .for{
    background: var(--cream-warm);
    border-radius: var(--radius-xl);
    padding: 80px;
    position:relative; overflow:hidden;
  }
  .for-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 40px;
  }
  /* Give the longer services heading room without changing other sections. */
  @media (min-width: 981px){
    #para-quien .for{ padding: 56px 64px; }
    #para-quien .sec-head{
      grid-template-columns: 1.25fr 1fr;
      gap: 40px;
      align-items: center;
    }
    #para-quien .sec-desc{ margin: 0; }
    #para-quien .for-grid{ margin-top: 32px; }
  }
  .for-card{
    background:#fff;
    border-radius: var(--radius-m);
    padding: 28px;
    border:1px solid var(--line);
    transition: transform .4s var(--ease);
  }
  .for-card:hover{ transform: translateY(-3px); }
  .for-card .icon{
    width:46px; height:46px; border-radius:14px;
    background: var(--mint-soft); color: var(--teal-deep);
    display:grid; place-items:center; margin-bottom: 18px;
  }
  .for-card.h .icon{ background: var(--yellow); color: var(--teal-ink); }
  .for-card h4{ margin: 0 0 8px; font-size:20px; letter-spacing:-0.02em; font-weight:600; }
  .for-card p{ margin:0; color: var(--ink-2); font-size:15px; }

  .for .splotch{
    position:absolute; pointer-events:none;
    width:380px; height:380px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(255,242,0,.7), transparent 70%);
    right:-100px; top:-120px; filter: blur(10px);
  }

  /* ---------- Valores / Equipo ---------- */
  .values{
    background: var(--teal-ink);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 90px 80px;
    position:relative; overflow:hidden;
  }
  .values h2.sec-title{ color:#fff; }
  .values h2.sec-title em{ color: var(--yellow); }
  .values .sec-tag{ color: var(--mint); }
  .values .sec-tag::before{ background: var(--mint); }
  .values .sec-desc{ color: rgba(255,255,255,.78); }

  .values-split{
    display:block; margin-top:56px;
  }

  /* 01-04 como proceso horizontal */
  .vals-list{
    list-style:none; padding:0; margin:0 0 56px;
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  }
  .vals-list li{
    display:block;
    padding: 26px 28px 4px 0;
    border-top: 1px solid var(--line-on-teal);
    position: relative;
  }
  .vals-list li::before{
    content:""; position:absolute; top:-1px; left:0;
    width: 34px; height: 2px; background: var(--yellow);
  }
  .vals-list li:last-child{ padding-right: 0; }
  .vals-list .vnum{
    display:block; margin-bottom: 18px;
    font-family:var(--serif); font-style:italic; font-size:44px; line-height:1;
    color: var(--yellow); letter-spacing:-0.02em;
  }
  .vals-list h4{ margin:0 0 8px; font-size:19px; font-weight:500; letter-spacing:-0.02em; }
  .vals-list p{ margin:0; color: rgba(255,255,255,.72); font-size:14px; line-height:1.55; max-width: none; }

  .team{
    background: rgba(255,255,255,.04);
    border:1px solid var(--line-on-teal);
    border-radius: var(--radius-l);
    padding: 36px;
  }
  .team h3{
    margin: 0 0 22px; font-size: 22px; font-weight: 500; letter-spacing:-0.02em;
    display:flex; align-items:center; justify-content:space-between;
  }
  .team h3 span{ font-size:12px; color: var(--mint); letter-spacing:.14em; text-transform:uppercase; }
  .team-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
  .member{
    display:grid; grid-template-columns: 64px 1fr auto; gap:18px;
    padding: 22px 0; border-top: 1px solid var(--line-on-teal); align-items:center;
  }
  .member:first-of-type{ border-top: 0; }
  .team-grid .member:nth-child(2){ border-top: 0; }
  .member .av{
    width:64px; height:64px; border-radius:50%;
    background-size: cover; background-position: center top;
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 8px 18px -8px rgba(0,0,0,.6);
    position:relative; overflow:hidden;
  }
  .member .av::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18));
  }
  .av-ruben{ background-image: url('../team/ruben.jpg'); }
  .av-emil{ background-image: url('../team/emil.png'); background-position: center 20%; }
  .av-leo{ background-image: url('../team/leonardo.png'); background-position: center 25%; }
  .av-diego{ background-image: url('../team/diego.webp'); background-position: 50% 32%; background-size: 275%; }
  /* Solo en Nosotros: círculo más grande, sin modificar el zoom de la foto. */
  .member.member-diego{ grid-template-columns: 76px minmax(0, 1fr) auto; }
  .member.member-diego .av-diego{ width:76px; height:76px; }
  .member h5{ margin:0 0 4px; font-size:17px; font-weight:600; letter-spacing:-0.015em; }
  .member p{ margin:0; font-size: 13px; color: rgba(255,255,255,.7); max-width: 32ch; line-height: 1.45; }
  .member .role-tag{
    font-size:11px; padding:5px 10px; border-radius:999px;
    background: rgba(255,255,255,.08); color: var(--mint);
    white-space:nowrap;
  }

  /* ---------- Clientes ---------- */
  .work-grid{
    display:grid; grid-template-columns: repeat(12,1fr); gap:18px;
  }
  .work{
    border-radius: var(--radius-l); overflow:hidden;
    position:relative;
    background:#fff; border:1px solid var(--line);
    position:relative; cursor:pointer;
    transition: transform .5s var(--ease);
  }
  .work:hover{ transform: translateY(-4px); }
  .work .thumb{
    aspect-ratio: 4/3; position:relative; overflow:hidden;
  }
  .work-1 .thumb{ background: linear-gradient(135deg, #2B6568 0%, #1A4548 100%); }
  .work-2 .thumb{ background: linear-gradient(135deg, #F4EFE4 0%, #E0D3B0 100%); }
  .work-3 .thumb{ background: linear-gradient(135deg, #FFF200 0%, #F4C300 100%); }
  .work-4 .thumb{ background: linear-gradient(135deg, #C9DDD9 0%, #5fb0b3 100%); }
  .work-5 .thumb{ background: linear-gradient(135deg, #E8704C 0%, #b5482a 100%); }

  .work.span-7{ grid-column: span 7; }
  .work.span-5{ grid-column: span 5; }
  .work.span-4{ grid-column: span 4; }
  .work.span-8{ grid-column: span 8; }
  .work.span-6{ grid-column: span 6; }

  /* image inside thumb */
  .work .thumb img{
    width:100%; height:100%; object-fit: cover; object-position: center top;
    transition: transform 1s var(--ease);
  }
  .work:hover .thumb img{ transform: scale(1.04); }
  .work .badge{
    position:absolute; top: 14px; left: 14px;
    background: rgba(14,27,28,.7); backdrop-filter: blur(6px);
    color: #fff; font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
    padding: 6px 12px; border-radius: 999px;
  }

  /* fake browser inside thumb (legacy) */
  .browser{
    position:absolute; inset: 14% 10% auto 10%; bottom:0;
    background:#fff; border-radius: 14px 14px 0 0;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.3);
    overflow:hidden;
  }
  .browser .bar{
    display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line);
  }
  .browser .bar i{ width:9px; height:9px; border-radius:50%; background:#E2E2E2; }
  .browser .bar i:nth-child(1){ background:#FF5F57; }
  .browser .bar i:nth-child(2){ background:#FEBC2E; }
  .browser .bar i:nth-child(3){ background:#28C840; }
  .browser .body{ padding: 18px; }
  .browser .body .line{ height:6px; border-radius:3px; background: #ECE7DA; margin-bottom:8px; }
  .browser .body .line.s{ width:40%; }
  .browser .body .line.m{ width:62%; }
  .browser .body .line.l{ width:80%; }
  .browser .body .chunk{
    height:54px; border-radius:8px; background:#F5F1E8; margin-top:14px;
    background-image: linear-gradient(135deg, var(--mint) 0%, transparent 60%);
  }

  .work .meta{
    padding: 22px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
  }
  .work .meta h5{ margin:0 0 4px; font-size:18px; letter-spacing:-0.02em; font-weight:600; }
  .work .meta p{ margin:0; color: var(--muted); font-size: 13px; }
  .work .meta .go{
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--line); display:grid; place-items:center;
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  }
  .work:hover .meta .go{ background:var(--teal); color:#fff; border-color:var(--teal); }
  .work-cover{
    position:absolute; inset:0; z-index:2;
    text-indent:-9999px; overflow:hidden;
    border-radius: var(--radius-l);
  }
  .work-cover:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

  /* ---------- Carousel (Casos) ---------- */
  .carousel{
    position: relative;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(calc(50vw - 620px), 4vw);
  }
  .carousel-track{
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .carousel-track::-webkit-scrollbar{ display: none; }
  .carousel-track > .work{
    flex: 0 0 calc((100% - 36px) / 3);
    scroll-snap-align: start;
    min-width: 0;
  }
  .carousel-track > .work.wide{
    flex: 0 0 calc((100% - 36px) / 3 * 2 + 18px);
  }
  .carousel-track > .work .thumb{ aspect-ratio: 4/3; }
  .carousel-track > .work.wide .thumb{ aspect-ratio: 16/9; }

  .carousel-nav{
    display:flex; justify-content:space-between; align-items:center;
    margin-top: 22px; gap: 16px;
  }
  .carousel-arrows{ display:flex; gap: 10px; }
  .carousel-arrows button{
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    display:grid; place-items:center; color: var(--teal-ink);
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
  }
  .carousel-arrows button:hover{ background: var(--teal); color: #fff; border-color: var(--teal); }
  .carousel-arrows button:disabled{ opacity: .35; cursor: not-allowed; }
  .carousel-arrows button:not(:disabled):active{ transform: scale(.95); }
  .carousel-arrows svg{ width:18px; height:18px; }

  .carousel-dots{
    display:flex; gap: 8px; align-items:center;
  }
  .carousel-dots button{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--line); border: 0; padding: 0;
    transition: background .35s var(--ease), width .35s var(--ease);
  }
  .carousel-dots button.active{ background: var(--teal); width: 28px; border-radius: 4px; }

  @media (max-width: 1080px){
    .carousel-track > .work,
    .carousel-track > .work.wide{
      flex: 0 0 calc((100% - 18px) / 2);
    }
  }
  @media (max-width: 720px){
    .carousel{ padding-inline: 4vw; }
    .carousel-track{ gap: 14px; }
    .carousel-track > .work,
    .carousel-track > .work.wide{
      flex: 0 0 88%;
    }
    .carousel-track > .work .thumb,
    .carousel-track > .work.wide .thumb{ aspect-ratio: 4/3; }
    .carousel-nav{ flex-direction: column-reverse; gap: 18px; }
  }

  /* ---------- Testimonios (carousel) ---------- */
  .carousel-track > .tcard{
    flex: 0 0 calc((100% - 36px) / 3);
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 24px 24px 20px;
  }
  .tcard .qmark{
    font-family: var(--serif); font-style: italic;
    font-size: 46px; line-height: .5; color: var(--teal);
    height: 20px; margin-bottom: 6px;
  }
  .tcard blockquote{
    margin: 0 0 12px;
    font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
    text-wrap: pretty;
  }
  .tcard blockquote.clamp{
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tcard .more{
    align-self: flex-start;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--teal);
    margin-bottom: 16px;
    transition: color .25s var(--ease);
  }
  .tcard .more:hover{ color: var(--teal-deep); }
  .tcard .more[hidden]{ display: none; }
  .tcard-feat{ border-color: rgba(43,101,104,.45); box-shadow: 0 1px 0 var(--teal) inset; }
  .tcard-feat .who .av{ background: var(--teal-deep); }
  .tcard .who{
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;
    padding-top: 16px; border-top: 1px solid var(--line);
  }
  .tcard .who .av{
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--teal); color: var(--cream);
    display: grid; place-items: center;
    font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  }
  .tcard .who .name{ margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .tcard .who .role{ margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.35; }

  /* Compact header for testimonios */
  #testimonios{ padding: 56px 0 64px; }
  #testimonios .sec-head{
    display: block; text-align: center;
    max-width: 680px; margin: 0 auto 30px;
  }
  #testimonios .sec-head .sec-tag{ justify-content: center; }
  #testimonios h2.sec-title{
    font-size: clamp(25px, 2.8vw, 36px);
    letter-spacing: -0.03em; max-width: none;
    margin: 12px 0 12px; line-height: 1.08;
  }
  #testimonios .sec-desc{ font-size: 15.5px; max-width: 52ch; margin: 0 auto; }
  #testimonios .carousel-nav{ margin-top: 18px; }
  @media (max-width: 1080px){
    .carousel-track > .tcard{
      flex: 0 0 calc((100% - 18px) / 2);
    }
  }
  @media (max-width: 720px){
    .carousel-track > .tcard{
      flex: 0 0 88%;
    }
    .tcard{ padding: 28px 24px 26px; }
  }

  /* ---------- Han confiado (text only) ---------- */
  .logos{
    background: var(--cream);
    border-radius: var(--radius-xl);
    padding: 80px 60px;
  }
  .logos .intro{
    display:grid; grid-template-columns: .55fr 1fr; gap: 50px;
    align-items: end;
    margin-bottom: 56px;
  }
  .logos .intro h3{
    margin: 14px 0 0;
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.02; letter-spacing: -0.035em;
    font-weight: 600; color: var(--teal-ink);
    max-width: 14ch;
  }
  .logos .intro h3 em{
    font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--teal);
  }
  .logos .intro p{
    margin: 0; color: var(--ink-2); font-size: 17px;
    max-width: 48ch;
  }

  .sectors{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .sector{
    padding: 32px 28px 32px 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    padding-left: 28px;
    position: relative;
  }
  .sector:nth-child(3n){ border-right: 0; padding-right: 0; }
  .sector:nth-child(3n+1){ padding-left: 0; }
  .sector .label{
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal); margin-bottom: 14px;
  }
  .sector .label::before{
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow);
    box-shadow: 0 0 0 3px rgba(255, 242, 0, .25);
  }
  .sector h4{
    margin: 0 0 18px; font-family: var(--serif); font-style: italic;
    font-size: 28px; line-height: 1.05; letter-spacing: -0.02em;
    color: var(--teal-ink); font-weight: 400;
  }
  .sector ul{
    list-style: none; padding: 0; margin: 0;
  }
  .sector ul li{
    font-size: 15px; color: var(--ink-2);
    padding: 6px 0;
    transition: color .3s var(--ease), transform .3s var(--ease);
  }
  .sector ul li:hover{ color: var(--teal-deep); transform: translateX(3px); }
  .sector ul li b{ font-weight: 600; color: var(--teal-ink); }
  .sector-link{
    color: inherit; text-decoration: none;
    display:inline-flex; align-items:center; gap:6px;
    transition: color .3s var(--ease);
  }
  .sector-link::after{
    content:"↗"; font-size:.85em; color: var(--teal); opacity:0;
    transition: opacity .3s var(--ease);
  }
  .sector-link:hover{ color: var(--teal-deep); }
  .sector-link:hover::after{ opacity:1; }

  @media (max-width: 900px){
    .logos{ padding: 50px 28px; }
    .logos .intro{ grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
    .sectors{ grid-template-columns: 1fr; }
    .sector{
      padding: 24px 0; border-right: 0; padding-left: 0;
    }
    .sector:nth-child(3n){ padding-right: 0; }
    .sector:nth-child(3n+1){ padding-left: 0; }
  }

  /* ---------- Testimonio ---------- */
  .quote{
    margin-top: 80px;
    display:grid; grid-template-columns: .5fr 1fr; gap: 60px; align-items:center;
  }
  .quote blockquote{
    margin:0; font-family: var(--serif); font-style:italic;
    font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing:-0.02em;
    color: var(--teal-ink);
  }
  .quote .who{
    display:flex; align-items:center; gap:14px; margin-top:18px;
  }
  .quote .who .ph{
    width:48px; height:48px; border-radius:50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#fff;
    display:grid; place-items:center; font-weight:600;
  }
  .quote .who p{ margin:0; font-family: var(--display); font-style:normal; font-size:14px; color:var(--ink-2); }
  .quote .who p b{ display:block; color:var(--ink); font-weight:600; }

  /* ---------- Contacto ---------- */
  .contact{
    background: var(--teal);
    color:#fff;
    border-radius: var(--radius-xl);
    padding: 90px 80px;
    position:relative; overflow:hidden;
  }
  .contact .sec-tag{ color: var(--yellow); }
  .contact .sec-tag::before{ background: var(--yellow); }
  .contact h2.sec-title{ color:#fff; }
  .contact h2.sec-title em{ color: var(--yellow); }
  .contact .sec-desc{ color: rgba(255,255,255,.82); }

  .contact-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:60px;
    margin-top: 60px;
  }
  .form{
    display:grid; gap:14px;
  }
  .field{
    display:grid; gap:6px;
  }
  .field label{
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color: rgba(255,255,255,.65);
  }
  .field input, .field textarea, .field select{
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    color:#fff; font: inherit;
    padding: 14px 16px; border-radius: 14px;
    outline:none; transition: border-color .3s var(--ease), background .3s var(--ease);
  }
  .field textarea{ min-height: 110px; resize:vertical; }
  .field input::placeholder, .field textarea::placeholder{ color: rgba(255,255,255,.4); }
  .field input:focus, .field textarea:focus, .field select:focus{
    border-color: var(--yellow); background: rgba(255,255,255,.1);
  }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
  .form .btn-primary{
    background: var(--yellow); color: var(--teal-ink); margin-top: 8px;
    justify-self:start;
  }
  .form .btn-primary:hover{ background:#fff; }
  .form .btn-primary[disabled]{ opacity:.6; cursor: progress; }

  .form-status{
    margin-top: 14px; font-size: 14px; min-height: 22px;
    opacity: 0; transform: translateY(4px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .form-status.visible{ opacity: 1; transform: translateY(0); }
  .form-status.success{ color: var(--yellow); }
  .form-status.error{ color: #FFC0B8; }

  .contact-side{
    border-left: 1px solid var(--line-on-teal);
    padding-left: 60px;
  }
  .contact-side h4{
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 32px; letter-spacing:-0.02em; color: var(--yellow);
    margin: 0 0 24px;
  }
  .ch-item{
    padding: 22px 0; border-top: 1px solid var(--line-on-teal);
    display:flex; gap:16px; align-items:flex-start;
  }
  .ch-item:last-of-type{ border-bottom: 1px solid var(--line-on-teal); }
  .ch-item svg{ width:22px; height:22px; color: var(--mint); flex:0 0 auto; margin-top:2px; }
  .ch-item h5{ margin:0 0 4px; font-size:15px; font-weight:500; }
  .ch-item p{ margin:0; color: rgba(255,255,255,.7); font-size:14px; }
  .ch-item a{ color:#fff; }
  .ch-item a:hover{ color: var(--yellow); }

  /* ---------- Footer ---------- */
  footer{
    padding: 60px 0 40px; color: var(--ink-2);
  }
  .foot{
    display:flex; justify-content:space-between; align-items:center; gap:24px;
    flex-wrap:wrap;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    font-size: 13px;
  }
  .foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:18px; }
  .foot li{ white-space:nowrap; }
  .foot a:hover{ color: var(--teal-deep); }

  @media (max-width: 600px){
    footer{ padding: 40px 0 32px; }
    .foot{
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      text-align: left;
    }
    .foot ul{ gap: 14px 22px; }
  }

  /* ---------- Product: Pack Salud ---------- */
  .pack-hero{
    display:grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items:end;
    margin-bottom: 50px;
  }
  .pack-badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 14px; border-radius:999px;
    background: var(--teal); color:#fff;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  }
  .pack-badge .pulse{ width:6px; height:6px; border-radius:50%; background: var(--yellow); }

  .features-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line);
    border:1px solid var(--line);
    border-radius: var(--radius-l);
    overflow:hidden;
  }
  .feat{
    background: #fff; padding: 30px;
    transition: background .4s var(--ease);
  }
  .feat:hover{ background: var(--mint-soft); }
  .feat .num{
    font-family: var(--serif); font-style: italic; font-size: 32px;
    color: var(--teal); letter-spacing:-0.02em; line-height:1;
  }
  .feat h4{
    margin: 18px 0 8px; font-size: 19px; letter-spacing:-0.02em; font-weight:600;
    color: var(--teal-ink);
  }
  .feat p{ margin:0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }

  /* ---------- Planes ---------- */
  .plans-head{
    display:flex; justify-content:space-between; align-items:end; gap:30px;
    margin: 90px 0 40px;
  }
  .plans-head h3{
    margin:0; font-size: clamp(32px, 3.6vw, 48px); letter-spacing:-0.03em; font-weight:600;
    color: var(--teal-ink);
  }
  .plans-head h3 em{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--teal); }
  .plans-head p{ margin:0; color: var(--ink-2); font-size: 15px; max-width: 32ch; }

  .plans{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    align-items: stretch;
  }
  .plan{
    background: #fff; border:1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 32px;
    display:flex; flex-direction:column;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    position:relative;
  }
  .plan:hover{ transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(14,27,28,.35); }
  .plan.featured{
    background: var(--teal); color: #fff; border-color: transparent;
    transform: translateY(-8px);
    box-shadow: 0 40px 70px -30px rgba(43,101,104,.5);
  }
  .plan.featured:hover{ transform: translateY(-12px); }
  .plan .tag{
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color: var(--muted);
  }
  .plan.featured .tag{ color: var(--yellow); }
  .plan .ribbon{
    position:absolute; top:-12px; left:50%; transform: translateX(-50%);
    background: var(--yellow); color: var(--teal-ink);
    font-size:11px; letter-spacing:.12em; text-transform: uppercase;
    padding: 6px 14px; border-radius:999px; font-weight:600;
  }
  .plan h4{
    margin: 6px 0 18px; font-size: 20px; font-weight: 600; letter-spacing:-0.02em;
  }
  .plan .price{
    display:flex; align-items:baseline; gap:6px;
    font-family: var(--display); font-weight: 600; letter-spacing:-0.04em;
    font-size: 44px; line-height:1; color: var(--teal-ink);
  }
  .plan.featured .price{ color: #fff; }
  .plan .price .clp{ font-size:14px; font-weight:500; letter-spacing:0; opacity:.6; }
  .plan .launch{
    margin-top: 8px; font-size: 13px; color: var(--muted);
    font-style: italic;
  }
  .plan.featured .launch{ color: rgba(255,255,255,.7); }
  .plan ul{
    list-style:none; padding:0; margin: 24px 0 18px; font-size: 14px;
    border-top: 1px solid var(--line);
  }
  .plan.featured ul{ border-color: rgba(255,255,255,.18); }
  .plan ul li{
    padding: 11px 0; border-bottom: 1px solid var(--line);
    display:flex; gap:10px; align-items:flex-start;
    color: var(--ink-2);
  }
  .plan.featured ul li{ border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
  .plan ul.collapsed li.xtra{ display: none; }
  .plan-more{
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600;
    color: var(--teal); padding: 0; margin: 0 0 24px;
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
  }
  .plan-more:hover{ color: var(--teal-deep); }
  .plan.featured .plan-more{ color: var(--yellow); }
  .plan-more .pm-chev{ transition: transform .3s var(--ease); }
  .plan-more[aria-expanded="true"] .pm-chev{ transform: rotate(180deg); }
  .plan ul li::before{
    content:""; width:16px; height:16px; flex:0 0 16px; margin-top:2px;
    border-radius:50%;
    background: var(--mint-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B6568' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;
  }
  .plan.featured ul li::before{
    background: var(--yellow) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2425' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;
  }
  .plan .plan-cta{
    margin-top: auto;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 13px 18px; border-radius: 999px;
    background: var(--teal-ink); color:#fff; font-size:14px; font-weight:500;
    transition: background .4s var(--ease), color .4s var(--ease);
  }
  .plan .plan-cta:hover{ background: var(--teal-deep); }
  .plan.featured .plan-cta{ background: var(--yellow); color: var(--teal-ink); }
  .plan.featured .plan-cta:hover{ background: #fff; }
  .plans-foot{
    margin-top: 18px; font-size: 13px; color: var(--muted); text-align:center;
    font-style: italic;
  }

  /* ---------- Addons + Mantención ---------- */
  .extras{
    margin-top: 80px;
    display:flex; flex-direction: column; gap: 22px;
  }
  .extras-block{
    background: var(--cream-warm);
    border-radius: var(--radius-l);
    padding: 36px;
  }
  /* Mantención: dos columnas de planes */
  .maint-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-top: 4px;
  }
  /* Extras colapsable */
  .extras-collapsible{ padding-top: 28px; padding-bottom: 28px; background:#fff; border:1px solid var(--line); }
  .extras-toggle{
    appearance:none; -webkit-appearance:none; cursor:pointer;
    width:100%; background:transparent; border:0; padding: 8px 0;
    display:flex; align-items:center; justify-content:space-between; gap: 12px;
    font: inherit; color: var(--teal-ink); text-align:left;
  }
  .extras-toggle h4{ margin:0; }
  .extras-toggle .chev{
    flex:none; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--line); display:grid; place-items:center;
    color: var(--teal-deep); transition: transform .35s var(--ease), background .25s var(--ease);
  }
  .extras-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); background: var(--cream-warm); }
  .extras-panel{
    overflow:hidden; max-height:0; opacity:.0;
    transition: max-height .45s var(--ease), opacity .35s var(--ease), margin-top .35s var(--ease);
  }
  .extras-toggle[aria-expanded="true"] + .extras-panel{
    max-height: 800px; opacity:1; margin-top: 10px;
  }
  .extras-hint{ font-size:13px; color: var(--muted); font-weight:500; }
  .extras-block.dark{
    background: var(--teal-ink); color: #fff;
  }
  .extras-block h4{
    margin: 0 0 6px; font-size: 22px; letter-spacing:-0.02em; font-weight:600;
    color: var(--teal-ink);
  }
  .extras-block.dark h4{ color: #fff; }
  .extras-block .sub{
    margin: 0 0 22px; font-size: 13px; color: var(--muted);
  }
  .extras-block.dark .sub{ color: rgba(255,255,255,.65); }

  .addon{
    display:flex; justify-content:space-between; align-items:center; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--line);
    font-size: 14px;
  }
  .addon:last-child{ border-bottom: 1px solid var(--line); }
  .addon .name{ color: var(--ink-2); }
  .addon .price{ color: var(--teal-deep); font-weight: 600; white-space:nowrap; font-variant-numeric: tabular-nums; }

  .maint{
    background: var(--cream-warm);
    border:1px solid var(--line);
    border-radius: 14px; padding: 20px 22px;
    margin-bottom: 14px;
  }
    border-radius: var(--radius-m);
    padding: 22px;
    margin-bottom: 12px;
  }
  .maint:last-child{ margin-bottom:0; }
  .maint-grid .maint{ margin-bottom:0; }
  .maint.hl{ background: var(--teal); border-color: transparent; }
  .maint header{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom: 14px;
  }
  .maint header h5{
    margin:0; font-size: 16px; font-weight: 600; letter-spacing:-0.01em;
    color: var(--teal-ink);
  }
  .maint.hl header h5{ color:#fff; }
  .maint header .pr{
    font-weight:600; font-size: 18px; letter-spacing:-0.02em;
    color: var(--teal-deep); font-variant-numeric: tabular-nums;
  }
  .maint.hl header .pr{ color: var(--yellow); }
  .maint ul{ list-style:none; padding:0; margin:0; font-size:13px; color: var(--ink-2); }
  .maint.hl ul{ color: rgba(255,255,255,.82); }
  .maint ul li{ padding: 4px 0; display:flex; gap:8px; }
  .maint ul li::before{ content:"\2713"; color: var(--teal); }
  .maint.hl ul li::before{ color: var(--yellow); }

  /* ---------- Método 7 días ---------- */
  .method{
    margin-top: 100px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    padding: 50px;
  }
  .method-head{
    display:flex; justify-content:space-between; align-items:end; gap:40px;
    margin-bottom: 40px;
  }
  .method-head h3{
    margin:0; font-size: clamp(28px, 3vw, 40px); letter-spacing:-0.025em; font-weight:600;
    color: var(--teal-ink); max-width: 18ch;
  }
  .method-head h3 em{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--teal); }
  .method-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    position:relative;
  }
  .step{
    padding: 24px 24px 24px 0;
    border-left: 1px solid var(--line);
    padding-left: 24px;
    position:relative;
  }
  .step:first-child{ border-left: 0; padding-left: 0; }
  .step .step-num{
    width: 36px; height: 36px; border-radius:50%;
    background: var(--mint-soft); color: var(--teal-deep);
    display:grid; place-items:center; font-weight:600; font-size: 13px;
    margin-bottom: 16px;
  }
  .step h5{ margin: 0 0 6px; font-size: 16px; letter-spacing:-0.015em; font-weight:600; color: var(--teal-ink); }
  .step p{ margin:0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

  /* ---------- Custom (Desarrollo a medida) ---------- */
  .custom{
    background: linear-gradient(140deg, #1A4548 0%, #0E2425 100%);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 70px 60px;
    position:relative; overflow:hidden;
  }
  .custom::after{
    content:""; position:absolute; right:-100px; top:-100px;
    width: 360px; height: 360px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(255,242,0,.18), transparent 70%);
    pointer-events:none;
  }
  .custom-grid{
    display:grid; grid-template-columns: 1fr .9fr; gap: 60px; align-items:center;
    position:relative; z-index:1;
  }
  .custom .sec-tag{ color: var(--yellow); }
  .custom .sec-tag::before{ background: var(--yellow); }
  .custom h3{
    margin: 14px 0 16px; font-size: clamp(32px, 4vw, 48px);
    letter-spacing:-0.03em; font-weight:600; line-height: 1.04;
  }
  .custom h3 em{ font-family: var(--serif); font-style: italic; font-weight:400; color: var(--yellow); }
  .custom p{ margin:0 0 22px; color: rgba(255,255,255,.78); font-size: 16px; max-width: 50ch; }
  .custom .btn-ghost{
    background: transparent; color: #fff;
    border:1px solid rgba(255,255,255,.3);
  }
  .custom .btn-ghost:hover{ background: rgba(255,255,255,.08); }

  .custom-tags{
    display:flex; flex-wrap:wrap; gap: 8px;
    list-style:none; padding:0; margin: 0;
  }
  .custom-tags li{
    padding: 10px 16px; border-radius:999px;
    background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
    font-size: 13px; color: rgba(255,255,255,.86);
  }
  .custom-tags li.hl{ background: var(--yellow); color: var(--teal-ink); border-color: transparent; font-weight:500; }

  /* ---------- Reveal ---------- */
  .reveal{ opacity:0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal.in{ opacity:1; transform: translateY(0); }
  .reveal.d2{ transition-delay: .08s; }
  .reveal.d3{ transition-delay: .16s; }
  .reveal.d4{ transition-delay: .24s; }
  .reveal.d5{ transition-delay: .32s; }

  /* ---------- WhatsApp floating widget ---------- */
  .wa-fab{
    position: fixed; right: 24px; bottom: 24px; z-index: 200;
    display:flex; align-items:center; gap: 0;
    height: 60px; padding: 0; width: 60px;
    border-radius: 999px; background: #25D366;
    color: #fff; text-decoration: none;
    box-shadow: 0 10px 28px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.18);
    overflow: hidden;
    transition: width .4s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
  }
  .wa-fab:hover{ width: 214px; box-shadow: 0 14px 34px rgba(37,211,102,.5), 0 2px 10px rgba(0,0,0,.2); }
  .wa-fab:active{ transform: scale(.96); }
  .wa-fab .wa-ico{
    flex: none; width: 60px; height: 60px;
    display:grid; place-items:center;
  }
  .wa-fab .wa-ico svg{ width: 30px; height: 30px; }
  .wa-fab .wa-label{
    white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    padding-right: 22px; opacity: 0; transition: opacity .25s var(--ease) .05s;
  }
  .wa-fab:hover .wa-label{ opacity: 1; }
  .wa-fab .wa-ping{
    position: absolute; inset: 0; border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(37,211,102,.55);
    animation: wa-ping 2.6s infinite var(--ease); pointer-events: none;
  }
  @keyframes wa-ping{
    0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
  @media (max-width: 880px){
    .wa-fab{ right: 16px; bottom: 16px; }
    .wa-fab:hover{ width: 60px; }
    .wa-fab .wa-label{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .wa-ping{ animation: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .pack-hero{ grid-template-columns: 1fr; gap: 30px; }
    .features-grid{ grid-template-columns: 1fr 1fr; }
    .plans{ grid-template-columns: 1fr; }
    .plan.featured{ transform: none; }
    .extras{ grid-template-columns: 1fr; }
    .maint-grid{ grid-template-columns: 1fr; }
    .extras-block{ padding: 28px; }
    .method{ padding: 28px; }
    .method-grid{ grid-template-columns: 1fr; }
    .step{ border-left: 0; padding-left:0; border-top: 1px solid var(--line); padding-top: 22px; }
    .step:first-child{ border-top: 0; padding-top: 0; }
    .plans-head{ flex-direction:column; align-items:flex-start; gap:14px; }
    .method-head{ flex-direction:column; align-items:flex-start; gap:14px; }
    .custom{ padding: 40px 28px; }
    .custom-grid{ grid-template-columns: 1fr; gap: 30px; }
    .hero{ padding: 120px 0 60px; }
    .hero .grid{ grid-template-columns: 1fr; gap: 40px; }
    /* Cluster: stack cards in normal flow so they never collide below desktop */
    .hero-card-cluster{ height: auto; display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
    .hero-card-cluster .card{ position: static; inset: auto; transform: none; }
    .hero-card-cluster .card-a{ width: 100%; max-width: 460px; }
    .hero-card-cluster .card-b,
    .hero-card-cluster .card-c{ width: 100%; max-width: 320px; }
    .sec-head{ grid-template-columns: 1fr; gap: 24px; }
    .services{ grid-template-columns: 1fr; }
    .svc, .svc.feat, .svc.alt{ grid-column: span 1; min-height: 0; }
    .for{ padding: 50px 28px; }
    .for-grid{ grid-template-columns: 1fr; }
    .values{ padding: 50px 28px; }
    .values-split{ grid-template-columns: 1fr; gap: 40px; }
    .team{ position:static; }
    .vals-list{ grid-template-columns: 1fr 1fr; }
    .vals-list li{ padding-right: 22px; }
    .team-grid{ grid-template-columns: 1fr; gap: 0; }
    .team-grid .member:nth-child(2){ border-top: 1px solid var(--line-on-teal); }
    .work-grid{ grid-template-columns: 1fr; }
    .work.span-7, .work.span-5, .work.span-4, .work.span-8, .work.span-6{ grid-column: span 1; }
    .logo-row{ grid-template-columns: repeat(3,1fr); }
    .quote{ grid-template-columns: 1fr; gap: 24px; }
    .contact{ padding: 50px 28px; }
    .contact-grid{ grid-template-columns: 1fr; gap: 40px; }
    .contact-side{ padding-left: 0; border-left:0; border-top: 1px solid var(--line-on-teal); padding-top: 30px; }
    .field-row{ grid-template-columns: 1fr; }
  }

  @media (max-width: 560px){
    .card-a .feat-name{ font-size: 34px; }
    .vals-list{ grid-template-columns: 1fr; }

    .team{ padding: 24px 20px; }
    .member{
      grid-template-columns: 56px 1fr;
      gap: 8px 14px;
      align-items: start;
    }
    .member .av{ width: 56px; height: 56px; }
    .member > div{ grid-column: 2; }
    .member p{ max-width: none; }
    .member .role-tag{
      grid-column: 2;
      justify-self: start;
      white-space: normal;
      margin-top: 2px;
    }
  }

/* Pestañas de planes en Inicio; se mantienen los estilos de las tarjetas existentes. */
.plan-tabs{
  display:flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:6px;
  margin:0 0 34px;
  background:var(--cream-warm);
  border:1px solid var(--line);
  border-radius:999px;
  scroll-margin-top:110px;
}
.plan-tab{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:14px 24px;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--teal-ink);
  background:transparent;
  transition:background .25s ease,color .25s ease;
}
.plan-tab.active,.plan-tab[aria-selected="true"]{background:var(--teal);color:#fff;}
.plan-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.plan-tabpanel[hidden]{display:none!important;}
@media (max-width:560px){
  .plan-tabs{width:100%;border-radius:20px;}
  .plan-tab{flex:1;min-width:0;white-space:normal;text-align:center;padding:12px 10px;line-height:1.3;}
}


/* Formulario de contacto y brief guiado, integrados en Conversemos */
.contact-mode-tabs{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin:36px 0 0;padding:6px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08)}
.contact-mode-tab{padding:13px 21px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:14px;cursor:pointer;transition:background .2s ease,color .2s ease}
.contact-mode-tab.active{background:var(--yellow);color:var(--teal-ink);font-weight:600}
.contact-mode-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.contact-mode-panel[hidden]{display:none!important}
.contact-mode-panel .contact-grid{margin-top:30px}
#contacto{scroll-margin-top:90px}
.contact-brief-embed{margin-top:26px;padding:clamp(22px,4vw,46px);background:var(--paper);color:var(--ink);border-radius:var(--radius-l);max-width:100%}
.contact-brief-embed .contact-brief-header{margin-bottom:28px}
.contact-brief-embed .contact-brief-header .eyebrow{color:var(--teal-deep)}
.contact-brief-embed .contact-brief-header h3{margin:12px 0 8px;color:var(--teal-ink);font-size:clamp(30px,4vw,48px);letter-spacing:-.035em;line-height:1.1}
.contact-brief-embed .contact-brief-header h3 em{font-family:var(--serif);font-weight:400}
.contact-brief-embed .contact-brief-header p{color:var(--ink-2);line-height:1.6;margin:0}
.contact .contact-brief-embed .sec-tag{color:var(--teal-deep)}
.contact .contact-brief-embed .sec-tag::before{background:var(--teal)}
.contact .contact-brief-embed .brief-panel .field label{color:var(--ink-2);letter-spacing:0;text-transform:none}
.contact .contact-brief-embed .brief-panel .field input:not([type="radio"]):not([type="checkbox"]),
.contact .contact-brief-embed .brief-panel .field textarea{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--ink);padding:12px 14px}
.contact .contact-brief-embed .brief-panel .field input:focus,
.contact .contact-brief-embed .brief-panel .field textarea:focus{border-color:var(--teal);background:var(--paper)}
.contact .contact-brief-embed .brief-panel .field input::placeholder,
.contact .contact-brief-embed .brief-panel .field textarea::placeholder{color:#778080}
.contact-brief-embed .brief-editor{scroll-margin-top:95px}
.contact-brief-embed .brief-actions .btn-ghost{color:var(--teal-ink)}
.contact-brief-embed .brief-success{color:var(--ink)}
.contact-brief-embed .preview-column{top:95px}
@media(max-width:760px){
  .contact-mode-tabs{width:100%;border-radius:19px}
  .contact-mode-tab{flex:1;padding:12px 10px;white-space:normal;line-height:1.3}
  .contact-brief-embed .preview-column{position:static}
  .contact-brief-embed .step-toolbar{background:var(--paper)}
}

/* Dos planes Pymes, conservando las tres opciones de Empresas. */
@media (min-width:981px){
  .plans-pymes{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1050px;margin:0 auto;}
}