:root{
    --charcoal:#14161a;
    --charcoal-2:#1b1e23;
    --charcoal-3:#22262c;
    --stone:#eae6dc;
    --stone-2:#ddd6c6;
    --stone-3:#d0c8b4;
    --bronze:#a9835a;
    --bronze-light:#c7a273;
    --bronze-dark:#8a6a47;
    --ink:#eeece5;
    --ink-dim:#a9a89f;
    --text-dark:#20221f;
    --text-dim:#5c5b52;
    --line-light:rgba(238,236,229,0.14);
    --line-dark:rgba(20,22,26,0.12);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --radius: 2px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top: 84px;}
  body{
    font-family:'Outfit', -apple-system, sans-serif;
    background:var(--charcoal);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  #servicios, #elegirnos, .cta-strip{
    position:relative;
    background-image:
      radial-gradient(560px 320px at 92% 0%, rgba(169,131,90,0.07), transparent 70%),
      radial-gradient(480px 300px at 4% 100%, rgba(169,131,90,0.04), transparent 70%);
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:1240px; margin:0 auto; padding-left:32px; padding-right:32px;}
  @media (max-width:640px){ .wrap{padding-left:20px; padding-right:20px;} }

  h1,h2,h3,h4{font-family:'Newsreader', Georgia, serif; font-weight:500; line-height:1.08; letter-spacing:-0.01em;}
  .eyebrow{
    font-family:'Outfit', sans-serif;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.04em;
    color:var(--bronze-light);
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 28px;
    font-family:'Outfit', sans-serif;
    font-size:14.5px;
    font-weight:500;
    letter-spacing:0.01em;
    border-radius:var(--radius);
    border:1px solid transparent;
    cursor:pointer;
    transition:transform 160ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
    white-space:nowrap;
  }
  .btn:active{ transform:scale(0.97); }
  .btn-solid{ background:var(--bronze); color:var(--charcoal); }
  @media (hover:hover) and (pointer:fine){
    .btn-solid:hover{ background:var(--bronze-light); }
  }
  .btn-outline{ background:transparent; border-color:var(--line-light); color:var(--ink); }
  @media (hover:hover) and (pointer:fine){
    .btn-outline:hover{ border-color:var(--bronze-light); color:var(--bronze-light); }
  }
  .btn-outline-dark{ background:transparent; border-color:var(--line-dark); color:var(--text-dark); }
  @media (hover:hover) and (pointer:fine){
    .btn-outline-dark:hover{ border-color:var(--bronze-dark); color:var(--bronze-dark); }
  }
  .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible{
    outline:2px solid var(--bronze-light);
    outline-offset:3px;
  }

  /* ---------- NAVBAR ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding-top:env(safe-area-inset-top, 0px);
    background:rgba(20,22,26,0.72);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line-light);
    transition:background-color 220ms var(--ease-out);
  }
  .nav-inner{
    height:72px;
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
  }
  .nav-logo img{ height:30px; width:auto; }
  .nav-links{ display:flex; align-items:center; gap:36px; }
  .nav-links a{
    font-size:14px; font-weight:400; color:var(--ink-dim);
    transition:color 160ms var(--ease-out);
    position:relative;
    padding:4px 0;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--bronze-light);
    transition:right 220ms var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    .nav-links a:hover{ color:var(--ink); }
    .nav-links a:hover::after{ right:0; }
  }
  .nav-cta{ display:flex; align-items:center; gap:16px; }
  .nav-toggle{ display:none; background:none; border:none; color:var(--ink); cursor:pointer; padding:8px; }
  @media (max-width:900px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
    .nav-cta .btn-solid{ padding:11px 18px; font-size:13px; }
  }

  .mobile-menu{
    position:fixed; inset:72px 0 0 0; z-index:90;
    background:var(--charcoal-2);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
    padding:12px 0;
  }
  .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .mobile-menu a{
    display:block; padding:18px 32px; font-size:19px; font-family:'Newsreader',serif;
    border-bottom:1px solid var(--line-light);
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100dvh;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding-top: max(96px, calc(96px + env(safe-area-inset-top, 0px)));
    padding-bottom:88px;
    isolation:isolate;
  }
  .hero-bg{
    position:absolute; inset:0; z-index:-2;
    background-image:url('bg-hero.png');
    background-size:cover; background-position:center 62%;
  }
  .hero-bg::after{
    content:'';
    position:absolute; inset:0;
    background:
      linear-gradient(0deg, rgba(15,16,19,0.94) 4%, rgba(15,16,19,0.72) 42%, rgba(15,16,19,0.42) 68%, rgba(15,16,19,0.55) 100%),
      linear-gradient(100deg, rgba(15,16,19,0.55) 0%, rgba(15,16,19,0.08) 60%);
  }
  .hero .wrap{ width:100%; text-align:left; }
  .hero-content{ max-width:720px; margin-right:auto; text-align:left; }
  .hero .eyebrow{ display:block; margin-bottom:22px; }
  .hero h1{
    font-size:clamp(2.15rem, 4.1vw, 3.4rem);
    color:var(--ink);
    max-width:19ch;
    text-align:left;
  }
  .hero p.sub{
    margin-top:24px;
    font-size:17px;
    line-height:1.55;
    color:var(--ink-dim);
    max-width:46ch;
    text-align:left;
  }
  .hero-actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-start; }
  .hero-fade{
    opacity:0; transform:translateY(14px);
    animation:heroIn 900ms var(--ease-out) forwards;
  }
  .hero-fade.d1{ animation-delay:80ms; }
  .hero-fade.d2{ animation-delay:200ms; }
  .hero-fade.d3{ animation-delay:340ms; }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion:reduce){
    .hero-fade{ opacity:1; transform:none; animation:none; }
  }

  /* ---------- SECTION SHELL ---------- */
  section{ padding:112px 0; }
  @media (max-width:640px){ section{ padding:76px 0; } }
  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head .eyebrow{ display:block; margin-bottom:16px; }
  .section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); color:var(--ink); }
  .light-section .section-head h2{ color:var(--text-dark); }
  .light-section{
    background-color:var(--stone);
    background-image:
      radial-gradient(600px 340px at 96% 0%, rgba(138,106,71,0.07), transparent 70%),
      radial-gradient(480px 300px at 0% 100%, rgba(138,106,71,0.05), transparent 70%);
    color:var(--text-dark);
  }
  .light-section .eyebrow{ color:var(--bronze-dark); }

  /* ---------- SERVICIOS (bento asimetrico) ---------- */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:1px;
    background:var(--line-light);
    border:1px solid var(--line-light);
  }
  .service-card{
    background:var(--charcoal);
    padding:44px 38px;
    display:flex; flex-direction:column;
    grid-column:span 3;
  }
  .service-card.wide{ grid-column:span 4; }
  .service-card.narrow{ grid-column:span 2; }
  @media (max-width:900px){
    .service-card, .service-card.wide, .service-card.narrow{ grid-column:span 6; }
  }
  .service-icon{ width:34px; height:34px; color:var(--bronze-light); margin-bottom:28px; }
  .service-card h3{ font-size:1.5rem; color:var(--ink); margin-bottom:18px; }
  .service-card ul{ margin-top:auto; padding-top:14px; }
  .service-card li{
    font-size:14.5px; color:var(--ink-dim); line-height:1.5;
    padding:9px 0 9px 20px;
    border-top:1px solid var(--line-light);
    position:relative;
  }
  .service-card li:first-child{ border-top:1px solid var(--line-light); }
  .service-card li::before{
    content:''; position:absolute; left:0; top:17px; width:8px; height:1px; background:var(--bronze-light);
  }

  /* ---------- NOSOTROS (tipografico, sin fotos) ---------- */
  .team-list{ border-top:1px solid var(--line-dark); max-width:640px; margin:0 auto; }
  .team-row{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:34px 0;
    border-bottom:1px solid var(--line-dark);
  }
  .team-row:nth-child(odd){ align-items:flex-start; text-align:left; }
  .team-row:nth-child(even){ align-items:flex-end; text-align:right; }
  .team-row .tname{
    font-family:'Newsreader', serif;
    font-style:italic;
    font-size:clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight:500;
    color:var(--text-dark);
  }
  .team-row:nth-child(even) .tname{ color:var(--bronze-dark); }
  .team-meta{
    display:flex; flex-direction:column; gap:6px;
  }
  .team-row .tspec{
    font-size:13px; letter-spacing:0.03em; color:var(--text-dim);
    white-space:nowrap;
  }
  .team-row .temail{
    font-size:12.5px; color:var(--bronze-dark);
    white-space:nowrap;
    border-bottom:1px solid transparent;
    transition:border-color 160ms var(--ease-out), color 160ms var(--ease-out);
  }
  @media (hover:hover) and (pointer:fine){
    .team-row .temail:hover{ border-color:var(--bronze-dark); color:var(--text-dark); }
  }
  @media (max-width:640px){
    .team-row{ padding:24px 0; gap:8px; }
  }

  /* ---------- POR QUE ELEGIRNOS ---------- */
  .why-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px 64px;
  }
  .why-item{
    display:flex; gap:22px;
    padding:36px 0;
    border-top:1px solid var(--line-light);
  }
  @media (max-width:760px){ .why-grid{ grid-template-columns:1fr; gap:0; } }
  .why-icon{ width:26px; height:26px; flex-shrink:0; color:var(--bronze-light); margin-top:4px; }
  .why-item h3{ font-size:1.15rem; color:var(--ink); font-weight:500; margin-bottom:8px; }
  .why-item p{ font-size:14.5px; color:var(--ink-dim); line-height:1.6; max-width:38ch; }

  /* ---------- FAQ ---------- */
  .faq-list{ border-top:1px solid var(--line-dark); max-width:820px; }
  .faq-item{ border-bottom:1px solid var(--line-dark); }
  .faq-q{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:26px 2px;
    font-family:'Newsreader', serif; font-size:1.15rem; color:var(--text-dark);
  }
  .faq-q .plus{
    position:relative; width:18px; height:18px; flex-shrink:0;
  }
  .faq-q .plus::before, .faq-q .plus::after{
    content:''; position:absolute; background:var(--bronze-dark);
    top:50%; left:50%; transform:translate(-50%,-50%);
  }
  .faq-q .plus::before{ width:18px; height:1.5px; }
  .faq-q .plus::after{ width:1.5px; height:18px; transition:transform 220ms var(--ease-in-out); }
  .faq-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
  .faq-a{
    max-height:0; overflow:hidden;
    transition:max-height 260ms var(--ease-in-out);
  }
  .faq-a p{ padding:0 2px 28px; font-size:14.5px; line-height:1.65; color:var(--text-dim); max-width:62ch; }

  /* ---------- CTA STRIP ---------- */
  .cta-strip{
    background-color:var(--charcoal-3);
    border-top:1px solid var(--line-light);
    border-bottom:1px solid var(--line-light);
    padding:80px 0;
    text-align:center;
  }
  .cta-strip h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--ink); max-width:20ch; margin:0 auto 30px; }
  .cta-strip .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--charcoal-2); padding-top:88px; }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr 1fr;
    gap:40px;
    padding-bottom:64px;
    border-bottom:1px solid var(--line-light);
  }
  @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-grid img{ height:26px; margin-bottom:18px; opacity:0.94; }
  .footer-grid p.tag{ font-size:13.5px; color:var(--ink-dim); max-width:26ch; line-height:1.6; }
  .footer-col h4{
    font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:500; letter-spacing:0.04em;
    color:var(--bronze-light); margin-bottom:20px;
  }
  .footer-col a, .footer-col span{ display:block; font-size:14px; color:var(--ink-dim); padding:6px 0; }
  .footer-col a{ transition:color 160ms var(--ease-out); }
  @media (hover:hover) and (pointer:fine){ .footer-col a:hover{ color:var(--ink); } }
  .footer-bottom{
    display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:14px;
    padding:26px 0;
    font-size:12.5px; color:var(--ink-dim);
  }
  .footer-bottom .col-left{ text-align:left; }
  .footer-bottom .col-center{ text-align:center; }
  .footer-bottom .col-right{ text-align:right; }
  .footer-bottom a{ transition:color 160ms var(--ease-out); }
  @media (hover:hover) and (pointer:fine){ .footer-bottom a:hover{ color:var(--bronze-light); } }
  @media (max-width:640px){
    .footer-bottom{ grid-template-columns:1fr; text-align:center; gap:10px; }
    .footer-bottom .col-left, .footer-bottom .col-center, .footer-bottom .col-right{ text-align:center; }
  }

  /* ---------- WHATSAPP FLOAT ---------- */
  .wa-float{
    position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:80;
    width:56px; height:56px; border-radius:50%;
    background:#25D366; color:#0b1a10;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.32);
    transition:transform 160ms var(--ease-out);
  }
  .wa-float:active{ transform:scale(0.94); }
  @media (hover:hover) and (pointer:fine){
    .wa-float:hover{ transform:scale(1.06); }
  }
  .wa-float svg{ width:28px; height:28px; }

  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }