:root{
    --cream:#FBF9F3;
    --cream-2:#F4F0E6;
    --sage:#6E8577;
    --sage-dark:#4A5F52;
    --teal-deep:#1C4842;
    --teal-mid:#2B685F;
    --green-leaf:#5E9F5C;
    --green-light:#9AC98F;
    --blush:#E7AA9D;
    --ink:#1F2A24;
    --ink-soft:#54615A;
    --line:#DDD6C4;

    --serif: 'Fraunces', serif;
    --sans: 'Inter', sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth; overflow-x:hidden; background:#FBF9F3;}

  /* Custom scrollbar so it matches the palette instead of showing as a plain gray/white bar (Chrome shows it by default, unlike Safari) */
  html{scrollbar-width:thin; scrollbar-color:var(--sage) var(--cream);}
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--cream);}
  ::-webkit-scrollbar-thumb{background:var(--sage); border-radius:100px; border:2px solid var(--cream);}
  ::-webkit-scrollbar-thumb:hover{background:var(--teal-mid);}

  body{
    background:var(--cream);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.6;
    overflow-x:hidden;
  }

  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block;max-width:100%;}

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    font-family:var(--sans);
    font-weight:600;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal-mid);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:'';
    width:22px;
    height:1px;
    background:var(--green-leaf);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:var(--serif);
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--ink);
  }

  .placeholder-note{
    font-size:0.78rem;
    font-style:italic;
    color:var(--ink-soft);
    opacity:0.75;
  }

  /* ---------- ORGANIC BLOBS (brand motif) ---------- */
  .blob{
    position:absolute;
    z-index:0;
    pointer-events:none;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(251,249,243,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    max-width:1440px;
    margin:0 auto;
    padding:18px 20px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--serif);
    font-size:1.28rem;
    font-weight:600;
    color:var(--teal-deep);
  }
  .brand img{width:34px;height:34px;object-fit:contain;}
  .nav-links{
    display:flex;
    justify-content:center;
    gap:34px;
    font-size:0.92rem;
    font-weight:500;
  }
  .nav-links a{
    color:var(--ink-soft);
    transition:color 0.2s ease;
    position:relative;
  }
  .nav-links a:hover{color:var(--teal-deep);}
  .nav-cta{
    background:var(--teal-deep);
    color:var(--cream);
    padding:10px 22px;
    border-radius:100px;
    font-size:0.88rem;
    font-weight:600;
    transition:background 0.2s ease, transform 0.2s ease;
  }
  .nav-cta:hover{background:var(--teal-mid); transform:translateY(-1px);}
  .nav-right{display:flex; align-items:center; gap:16px; justify-self:end;}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:0.25s;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:96px 0 80px;
    overflow:hidden;
  }
  .hero .blob-tl{
    top:-140px; left:-160px;
    width:420px; height:420px;
    background:var(--sage);
    border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
    opacity:0.9;
  }
  .hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:48px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.3rem, 4.2vw, 3.4rem);
    line-height:1.14;
    margin:18px 0 22px;
    max-width:15ch;
  }
  .hero p.lead{
    font-size:1.08rem;
    color:var(--ink-soft);
    max-width:46ch;
    margin-bottom:34px;
  }
  .cta-row{display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 28px;
    border-radius:100px;
    font-weight:600;
    font-size:0.94rem;
    transition:all 0.22s ease;
    border:1.5px solid transparent;
  }
  .btn-primary{
    background:var(--teal-deep);
    color:var(--cream);
  }
  .btn-primary:hover{background:var(--teal-mid); transform:translateY(-2px);}
  .btn-ghost{
    border-color:var(--teal-deep);
    color:var(--teal-deep);
  }
  .btn-ghost:hover{background:var(--teal-deep); color:var(--cream);}

  .hero-visual{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
  }
  .hero-visual img{width:100%; max-width:340px; height:auto;}

  section{position:relative; z-index:1;}

  /* ---------- MISSION ---------- */
  .mission{padding:100px 0 90px;}
  .mission-grid{
    display:flex;
    justify-content:center;
    text-align:center;
  }
  .mission-grid > div{max-width:640px;}
  .mission .eyebrow{justify-content:center;}
  .mission .eyebrow::before{display:none;}
  .mission h2{font-size:clamp(1.7rem,2.6vw,2.3rem); margin:14px auto 20px; max-width:16ch;}
  .mission p{color:var(--ink-soft); font-size:1.02rem; max-width:48ch; margin:0 auto;}

  /* ---------- SYMBOLS ---------- */
  .symbols{
    padding:90px 0 100px;
    background:var(--cream-2);
    position:relative;
    overflow:hidden;
  }
  .symbols::before, .symbols::after{
    content:'';
    position:absolute;
    background:var(--sage);
    opacity:0.14;
    border-radius:45% 55% 60% 40% / 50% 45% 55% 50%;
  }
  .symbols::before{width:340px;height:340px; top:-100px; right:-120px;}
  .symbols::after{width:260px;height:260px; bottom:-90px; left:-100px;}

  .symbols-head{text-align:center; max-width:640px; margin:0 auto 56px;}
  .symbols-head .eyebrow{justify-content:center;}
  .symbols-head .eyebrow::before{display:none;}
  .symbols-head h2{font-size:clamp(1.7rem,2.8vw,2.4rem); margin-top:14px;}

  .symbol-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    position:relative;
    z-index:2;
  }
  .symbol-card{
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:14px;
    padding:36px 28px;
    text-align:center;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .symbol-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px -20px rgba(28,72,66,0.28);
  }
  .symbol-card .icon{
    width:64px;height:64px;
    margin:0 auto 20px;
    display:flex;align-items:center;justify-content:center;
  }
  .symbol-card .icon img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
  }
  .symbol-card h3{font-size:1.15rem; margin-bottom:12px;}
  .symbol-card p{font-size:0.92rem; color:var(--ink-soft);}

  /* ---------- SERVICES ---------- */
  .services{padding:100px 0 90px;}
  .services-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }
  .services-head h2{font-size:clamp(1.7rem,2.6vw,2.3rem); margin-top:14px; max-width:16ch;}
  .services-head .placeholder-note{max-width:30ch; text-align:right;}

  .service-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .service-card{
    padding:32px 26px;
    border-radius:14px;
    background:var(--teal-deep);
    color:var(--cream);
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  .service-card:nth-child(2){background:var(--teal-mid);}
  .service-card:nth-child(3){background:var(--sage-dark);}
  .service-card .num{
    font-family:var(--serif);
    font-size:0.85rem;
    opacity:0.7;
    letter-spacing:0.05em;
  }
  .service-card h3{
    color:var(--cream);
    font-size:1.3rem;
    margin:14px 0 10px;
  }
  .service-card p{
    font-size:0.9rem;
    opacity:0.85;
  }

  /* ---------- DIRECTORIO ---------- */
  .directorio{
    padding:100px 0 96px;
    background:var(--cream-2);
  }
  .directorio-head{text-align:center; max-width:640px; margin:0 auto 40px;}
  .directorio-head .eyebrow{justify-content:center;}
  .directorio-head .eyebrow::before{display:none;}
  .directorio-head h2{font-size:clamp(1.7rem,2.8vw,2.4rem); margin:14px 0 16px;}
  .directorio-intro{color:var(--ink-soft); font-size:1.02rem; margin-bottom:10px;}

  .directorio-filtros{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:22px;
  }
  .directorio-filtros label{display:flex; flex-direction:column; gap:6px; min-width:220px;}
  .directorio-filtros span{
    font-size:0.74rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--teal-mid);
  }
  .directorio-filtros select{
    font-family:var(--sans);
    font-size:0.95rem;
    color:var(--ink);
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:100px;
    padding:11px 18px;
    cursor:pointer;
    transition:border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .directorio-filtros select:hover{border-color:var(--sage);}
  .directorio-filtros select:focus-visible{
    outline:none;
    border-color:var(--teal-mid);
    box-shadow:0 0 0 3px rgba(43,104,95,0.18);
  }

  .directorio-contador{
    text-align:center;
    font-size:0.85rem;
    color:var(--ink-soft);
    margin-bottom:28px;
  }
  .directorio-lista{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .directorio-vacio{text-align:center; color:var(--ink-soft); padding:24px 0;}

  .pro-card{
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:14px;
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .pro-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px -22px rgba(28,72,66,0.3);
  }
  .pro-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px;}
  .pro-esp{
    font-size:0.74rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--teal-mid);
  }
  .pro-tag{
    font-size:0.68rem;
    font-weight:600;
    color:var(--ink-soft);
    background:var(--cream-2);
    border:1px dashed var(--line);
    border-radius:100px;
    padding:2px 10px;
  }
  .pro-card h3{font-size:1.15rem;}
  .pro-detalle{font-size:0.92rem; color:var(--ink);}
  .pro-lugar{font-size:0.88rem; color:var(--ink-soft);}
  .pro-contacto{
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .pro-contacto a{font-size:0.88rem; font-weight:500; color:var(--teal-mid); transition:color 0.2s ease;}
  .pro-contacto a:hover{color:var(--teal-deep); text-decoration:underline;}

  /* ---------- FOOTER ---------- */
  footer{
    padding:72px 0 40px;
    position:relative;
    overflow:hidden;
  }
  footer::before{
    content:'';
    position:absolute;
    width:320px;height:320px;
    background:var(--sage);
    opacity:0.16;
    border-radius:40% 60% 55% 45% / 55% 45% 55% 45%;
    bottom:-140px; right:-100px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:40px;
    position:relative;
    z-index:2;
  }
  .footer-brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--serif);
    font-size:1.2rem;
    font-weight:600;
    color:var(--teal-deep);
    margin-bottom:14px;
  }
  .footer-brand img{width:30px;height:30px;object-fit:contain;}
  footer p.desc{color:var(--ink-soft); font-size:0.92rem; max-width:32ch;}
  .footer-col h4{
    font-family:var(--sans);
    font-size:0.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    margin-bottom:16px;
    color:var(--ink);
  }
  .footer-col li{margin-bottom:10px;}
  .footer-col a{color:var(--ink-soft); font-size:0.92rem; transition:color 0.2s;}
  .footer-col a:hover{color:var(--teal-deep);}
  .footer-bottom{
    margin-top:60px;
    padding-top:24px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:0.82rem;
    color:var(--ink-soft);
    position:relative;
    z-index:2;
  }

  /* ---------- reveal animation ---------- */
  .reveal{
    opacity:1;
    transform:none;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .btn, .symbol-card, .nav-cta{transition:none;}
  }

  /* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
    nav{max-width:100%;}
    .hero .blob-tl{width:300px; height:300px; top:-170px; left:-170px;}
    .hero h1{max-width:18ch;}
  }

  /* ---------- PANTALLAS GRANDES ---------- */
  @media (min-width: 1600px){
    html{font-size:112.5%;}
    .wrap{max-width:1320px;}
  }
  @media (min-width: 2200px){
    html{font-size:125%;}
    .wrap{max-width:1500px;}
  }

  /* ---------- MENÚ MÓVIL ---------- */
  @media (max-width: 900px){
    .nav-links{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; align-items:center; gap:18px;
      padding:22px 24px; background:var(--cream);
      border-bottom:1px solid var(--line);
    }
    .nav-links.open{display:flex;}
    .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-toggle.open span:nth-child(2){opacity:0;}
    .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  }

  /* ---------- TABLET ---------- */
  @media (max-width: 900px){
    .nav-toggle{display:block;}
    .hero{padding:64px 0 56px;}
    .hero-grid{grid-template-columns:1fr; text-align:center; gap:32px;}
    .hero .eyebrow{justify-content:center;}
    .hero .eyebrow::before{display:none;}
    .hero h1{margin-left:auto; margin-right:auto; max-width:20ch;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .cta-row{justify-content:center;}
    .hero-visual{order:-1; margin-bottom:8px;}
    .hero-visual img{max-width:200px;}
    .mission{padding:64px 0 56px;}
    .symbols{padding:64px 0 72px;}
    .symbol-cards{grid-template-columns:repeat(2,1fr); gap:20px;}
    .symbol-cards > .symbol-card:last-child:nth-child(odd){grid-column:1 / -1; max-width:340px; margin:0 auto; width:100%;}
    .services{padding:64px 0 56px;}
    .service-cards{grid-template-columns:repeat(2,1fr); gap:18px;}
    .service-cards > .service-card:last-child:nth-child(odd){grid-column:1 / -1; max-width:340px; margin:0 auto; width:100%;}
    .services-head{flex-direction:column; align-items:flex-start; gap:8px;}
    .services-head .placeholder-note{text-align:left;}
    footer{padding:56px 0 32px;}
    .directorio{padding:64px 0 72px;}
    .directorio-lista{grid-template-columns:repeat(2,1fr); gap:18px;}
    .directorio-lista > .pro-card:last-child:nth-child(odd){grid-column:1 / -1; max-width:340px; margin:0 auto; width:100%;}
    .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px;}
  }

  /* ---------- MOBILE ---------- */
  @media (max-width: 600px){
    .wrap{padding:0 20px;}
    nav{padding:14px 16px; gap:12px;}
    .brand{font-size:1.05rem; gap:8px;}
    .brand img{width:28px;height:28px;}
    .nav-cta{padding:9px 16px; font-size:0.82rem;}
    .nav-right{gap:10px;}

    .hero{padding:48px 0 40px;}
    .hero .eyebrow{font-size:0.7rem; justify-content:center; line-height:1.6; padding:2px 0;}
    .hero .eyebrow::before{display:none;}
    header{background:rgba(251,249,243,0.97); backdrop-filter:none;}
    .hero h1{font-size:clamp(1.9rem,8vw,2.4rem); margin:14px auto 16px; max-width:22ch;}
    .hero p.lead{font-size:0.98rem; margin-left:auto; margin-right:auto; margin-bottom:26px;}
    .cta-row{flex-direction:column; align-items:stretch;}
    .btn{justify-content:center; padding:14px 22px;}
    .hero-visual img{max-width:150px;}
    .blob.blob-tl{width:260px;height:260px; top:-110px; left:-120px;}

    .mission{padding:48px 0 40px;}
    .mission h2{font-size:1.5rem; max-width:none;}
    .mission p{font-size:0.96rem;}

    .symbols{padding:48px 0 56px;}
    .symbols-head h2{font-size:1.5rem;}
    .symbol-cards{grid-template-columns:1fr; gap:18px;}
    .symbol-card{padding:28px 22px;}

    .services{padding:48px 0 40px;}
    .services-head h2{font-size:1.5rem;}
    .service-cards{grid-template-columns:1fr; gap:16px;}
    .service-card{min-height:auto; padding:26px 22px;}


    footer{padding:48px 0 28px;}
    .directorio{padding:48px 0 56px;}
    .directorio-head h2{font-size:1.5rem;}
    .directorio-filtros{flex-direction:column; gap:14px;}
    .directorio-filtros label{min-width:0; width:100%;}
    .directorio-filtros select{font-size:16px;}
    .directorio-lista{grid-template-columns:1fr; gap:16px;}
    .directorio-lista > .pro-card:last-child:nth-child(odd){max-width:none;}
    .footer-grid{grid-template-columns:1fr; gap:28px;}
    .footer-bottom{flex-direction:column; align-items:flex-start; gap:6px;}
  }

  @media (max-width: 380px){
    .hero h1{font-size:1.7rem;}
    .nav-cta{padding:8px 13px; font-size:0.76rem;}
  }