html { scroll-behavior: smooth; background: #FBF9F4; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #FBF9F4; color: #1C201B;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }

  .grain::before{
    content:""; position:fixed; inset:-50%; pointer-events:none; z-index:60; opacity:.035; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* ===== SAGE GRADIENTS ===== */
  .text-sage-grad{
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 50%, #54703F 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .bg-sage-grad{
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 55%, #54703F 100%);
  }

  .rule{ height:1px; background: linear-gradient(90deg, transparent, rgba(120,150,108,.4), transparent); }

  .halo{
    background: radial-gradient(60% 60% at 50% 50%, rgba(175,199,162,.5) 0%, rgba(175,199,162,.14) 40%, rgba(175,199,162,0) 75%);
    filter: blur(10px);
  }

  /* ===== PRELOADER ===== */
  #preloader{
    position:fixed; inset:0; z-index:100;
    background: radial-gradient(60% 60% at 50% 45%, #FFFFFF 0%, #F1EFE3 80%);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .pre-halo{
    position:absolute; width:720px; height:720px; left:50%; top:50%;
    transform: translate(-50%, -55%);
    background: radial-gradient(closest-side, rgba(175,199,162,.55), rgba(175,199,162,0) 70%);
    filter: blur(30px); animation: preBreath 4s ease-in-out infinite; pointer-events:none;
  }
  @keyframes preBreath{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
  .pre-mark{
    font-family:'Fraunces', serif; font-weight: 300; letter-spacing:.02em;
    font-size: clamp(48px, 8vw, 100px);
    color: transparent;
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 45%, #54703F 100%);
    -webkit-background-clip:text; background-clip:text;
    opacity:0; transform: translateY(10px) scale(.96);
  }
  .pre-arc .stroke{ stroke-dasharray:1200; stroke-dashoffset:1200; }

  .flow path{
    fill:none; stroke:#78966C; stroke-width:1; stroke-linecap:round;
    stroke-dasharray: 4 8; opacity:.7;
    animation: flowMove 12s linear infinite;
  }
  .flow path:nth-child(2){ animation-duration:16s; opacity:.5; }
  .flow path:nth-child(3){ animation-duration:20s; opacity:.35; }
  @keyframes flowMove{ to { stroke-dashoffset: -300; } }

  /* ===== BUTTONS ===== */
  .btn-sage{
    position:relative; display:inline-flex; align-items:center; gap:.75rem; padding:1rem 1.75rem;
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 55%, #54703F 100%);
    color:#FFFFFF; font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:11px;
    border-radius:999px; overflow:hidden; transition: transform .4s, box-shadow .4s;
    box-shadow: 0 12px 28px -12px rgba(84,112,63,.5), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .btn-sage:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(84,112,63,.6); }
  .btn-sage::after{
    content:""; position:absolute; inset:0; transform:translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    transition: transform .9s ease;
  }
  .btn-sage:hover::after{ transform: translateX(100%); }
  .btn-sage-label{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.25; }
  .btn-sage-sub{ font-size:8px; opacity:.85; letter-spacing:.24em; margin-top:2px; text-align:center; }
  .btn-ghost{
    display:inline-flex; align-items:center; gap:.75rem; padding:1rem 1.75rem;
    color:#1C201B; font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:11px;
    border-radius:999px; border:1px solid rgba(28,32,27,.15); background:transparent;
    transition: background .4s, border-color .4s, color .4s;
  }
  .btn-ghost:hover{ background:#FFFFFF; border-color:rgba(120,150,108,.4); color:#54703F; }

  /* ===== WHATSAPP FLUTUANTE ===== */
  .wa{
    position:fixed; bottom:32px; right:32px; z-index:90;
    width:60px; height:60px; border-radius:50%; background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 28px rgba(37,211,102,.5);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    cursor:pointer;
  }
  .wa:hover{ transform:scale(1.15); box-shadow:0 10px 42px rgba(37,211,102,.6); }
  .wa::before{
    content:''; position:absolute; inset:0; border-radius:50%; background:#25D366;
    animation: waPulse 2.6s ease-in-out infinite;
  }
  @keyframes waPulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }
  @media (max-width:768px){ .wa{ width:52px; height:52px; bottom:18px; right:18px; } }

  /* ===== CHIP ===== */
  .chip{
    display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem; border-radius:999px;
    background: #FFFFFF; border:1px solid rgba(120,150,108,.35);
    font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#54703F;
    box-shadow: 0 6px 22px -12px rgba(84,112,63,.35);
  }
  .chip-dot{ width:6px; height:6px; border-radius:50%; background:#78966C; box-shadow:0 0 12px rgba(120,150,108,.9); }

  /* ===== NAV ===== */
  .brand-name{ color:#FFFFFF; transition: color .4s; }
  .brand-sub{ color:rgba(255,255,255,.7); transition: color .4s; }
  #nav.nav-scrolled .brand-name{ color:#1C201B; }
  #nav.nav-scrolled .brand-sub{ color:#6E7864; }
  .logo-mark{ filter: brightness(0) invert(1); transition: filter .4s; }
  #nav.nav-scrolled .logo-mark{ filter:none; }

  .eyebrow{
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight:500;
    letter-spacing: .34em; text-transform: uppercase; color:#54703F;
  }
  .h-display{
    font-family: 'Fraunces', serif; font-weight:300; font-variation-settings: "opsz" 144, "SOFT" 60;
    letter-spacing: -.015em; line-height:1.02;
  }
  .h-display em{ font-style:italic; font-weight:300;
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 45%, #54703F 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .scroll-cue{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); }
  .scroll-cue .bar{
    width:1px; height:56px; background: linear-gradient(180deg, transparent, #78966C, transparent);
    animation: cue 2.4s ease-in-out infinite;
  }
  @keyframes cue{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:#F1EFE3; }
  ::-webkit-scrollbar-thumb{ background: linear-gradient(180deg,#78966C,#54703F); border-radius:99px; border:2px solid #FBF9F4; }

  .rv{ opacity:0; transform: translateY(24px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
  .rv.in{ opacity:1; transform:none; }
  .rv-d1{ transition-delay:.1s; } .rv-d2{ transition-delay:.2s; }
  .rv-d3{ transition-delay:.3s; } .rv-d4{ transition-delay:.4s; }
  .rv-d5{ transition-delay:.5s; }

  .marquee{ display:flex; gap:5rem; animation: marq 42s linear infinite; }
  @keyframes marq { to { transform: translateX(-50%); } }

  /* ===== CARE CARDS (áreas de cuidado) ===== */
  .care{
    position:relative; display:flex; flex-direction:column;
    background:#FFFFFF; border:1px solid #DEE4D2; border-radius: 22px; overflow:hidden;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .5s;
  }
  .care:hover{
    transform: translateY(-6px);
    border-color: rgba(120,150,108,.5);
    box-shadow: 0 30px 60px -25px rgba(84,112,63,.3), 0 0 0 1px rgba(120,150,108,.12);
  }
  .care-media{
    position:relative; aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 55%, #54703F 100%);
    overflow:hidden;
  }
  .care-media::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(120% 120% at 15% 0%, rgba(255,255,255,.25), transparent 55%);
  }
  .care-media svg{ position:relative; z-index:1; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .care:hover .care-media svg{ transform: scale(1.12); }
  .care-body{ padding: 1.6rem 1.75rem 1.9rem; }
  .proc-kicker{
    display:inline-block; font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#54703F; font-weight:600;
  }
  .care-link{
    display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    background: linear-gradient(135deg,#78966C,#54703F);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    transition: gap .4s;
  }
  .care:hover .care-link{ gap:.85rem; }

  /* ===== COVERFLOW 3D (áreas de cuidado) ===== */
  .cf3d-wrap{ position:relative; }
  .cf3d-frame{
    cursor:grab; overflow:hidden; padding: 40px 0; outline:none; touch-action: pan-y;
    perspective: calc(var(--cf-card) * 3);
  }
  .cf3d-frame:active{ cursor:grabbing; }
  .cf3d-stage{ position:relative; height: var(--cf-card); transform-style: preserve-3d; }
  .cf3d-card{
    position:absolute; left:50%; top:0; width: var(--cf-card); aspect-ratio: 1/1;
    overflow:hidden; border-radius:20px; will-change: transform;
    background: #E3E9D9;
    box-shadow: 0 30px 60px -25px rgba(84,112,63,.45);
    cursor:pointer;
  }
  .cf3d-card::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background: linear-gradient(180deg, rgba(20,24,18,0) 55%, rgba(20,24,18,.55) 100%),
                linear-gradient(135deg, rgba(84,112,63,.22), transparent 55%);
  }
  .cf3d-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .cf3d-card:hover .cf3d-media{ transform: scale(1.08); }
  .cf-nav{
    position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%);
    z-index:200; width:40px; height:40px; border-radius:50%;
    background:#FFFFFF; border:1px solid #DEE4D2; color:#33452B;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 30px -12px rgba(84,112,63,.35); transition: background .3s, border-color .3s;
  }
  .cf-nav:hover{ background:#F1EFE3; border-color:rgba(120,150,108,.5); }
  .cf-nav-prev{ left:0; }
  .cf-nav-next{ right:0; }
  .cf3d-dots span{
    width:6px; height:6px; border-radius:50%; background:#CBD6BC; cursor:pointer; transition: background .3s, transform .3s;
  }
  .cf3d-dots span.active{ background:#54703F; transform: scale(1.3); }

  /* ===== METHOD PIN BOARD ===== */
  .pin-card{
    position: relative; width: 100%;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), z-index 0s;
  }
  .pin-card:hover{ transform: scale(1.05) !important; z-index: 30; }
  .pin-card-inner{
    background:#FFFFFF; padding:.5rem; border-radius:22px;
    box-shadow: 0 20px 45px -20px rgba(51,69,43,.35);
    border:1px solid #DEE4D2;
  }
  .pin-card-body{
    background: #F1EFE3; border:1px solid #DEE4D2; border-radius:15px;
    padding: 1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column;
  }
  .pin-icon{ display:flex; justify-content:center; margin-bottom:1rem; }
  .pin-number{
    font-family:'Fraunces', serif; font-style:italic; font-weight:300; font-size:2.2rem; line-height:1;
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 45%, #54703F 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:.75rem;
  }
  .method-path{
    fill:none; stroke:#78966C; stroke-width:2; stroke-linecap:round;
    stroke-dasharray: 8 6; opacity:.5;
    animation: flowMove 4s linear infinite;
  }
  @media (max-width: 767px){ .pin-card:hover{ transform:none !important; } }

  /* ===== EMBLEM (Método section) ===== */
  .pm-emblem{ width: 170px; height: 170px; position: relative; display:flex; align-items:center; justify-content:center; }
  .pm-emblem .ring{
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(120,150,108,0), rgba(120,150,108,.7), rgba(120,150,108,0), rgba(120,150,108,.5), rgba(120,150,108,0));
    -webkit-mask: radial-gradient(circle at center, transparent 64%, #000 65%, #000 67%, transparent 68%);
            mask: radial-gradient(circle at center, transparent 64%, #000 65%, #000 67%, transparent 68%);
    animation: spin 14s linear infinite;
  }
  .pm-emblem .ring.ring-2{
    -webkit-mask: radial-gradient(circle at center, transparent 76%, #000 77%, #000 78%, transparent 79%);
            mask: radial-gradient(circle at center, transparent 76%, #000 77%, #000 78%, transparent 79%);
    animation: spin 22s linear reverse infinite; opacity: .5;
  }
  .pm-emblem .mono{
    font-family:'Fraunces', serif; font-weight:300; font-size:40px;
    background: linear-gradient(135deg,#AFC7A2 0%, #78966C 45%, #54703F 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: pmFloat 6s ease-in-out infinite;
  }
  @keyframes pmFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  /* ===== PORTRAIT ===== */
  .portrait-card{
    background: linear-gradient(180deg,#FFFFFF,#F1EFE3);
    box-shadow: 0 30px 60px -30px rgba(84,112,63,.3), inset 0 1px 0 rgba(255,255,255,.9);
    border:1px solid #DEE4D2;
  }
  .hero-portrait{
    filter: contrast(1.02) brightness(.99);
    transform-origin: 50% 25%;
    animation: pKenBurns 22s ease-in-out infinite alternate;
  }
  @keyframes pKenBurns{ 0%{ transform: scale(1.00); } 100%{ transform: scale(1.06); } }
  .hero-blend{
    -webkit-mask-image: radial-gradient(78% 70% at 50% 40%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
            mask-image: radial-gradient(78% 70% at 50% 40%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
  }

  .map-plate{
    background:
      radial-gradient(120% 60% at 10% 10%, rgba(175,199,162,.35), transparent 60%),
      linear-gradient(180deg,#FFFFFF,#F1EFE3);
    border:1px solid #DEE4D2;
  }

  :focus-visible{ outline: 2px solid #78966C; outline-offset: 3px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce){
    .flow path, .pm-emblem .ring, .marquee, .grain::before,
    .pm-emblem .mono, .scroll-cue .bar, .pre-halo, .hero-portrait{ animation: none !important; }
    .rv{ opacity:1; transform:none; }
    html{ scroll-behavior:auto; }
  }

  body.loaded #preloader{ pointer-events:none; }