:root{
    --bordo:#4A1410; --bordo-2:#6B1D17; --bordo-3:#3E110D;
    --hueso:#F5F2EC; --hueso-2:#EEEAE1; --grafito:#1C1A19;
    --gris:#6E6A64; --gris-2:#8A857D; --linea:#E4DFD6; --blanco:#FFFFFF;
    --serif:'Fraunces',Georgia,serif;
    --label:'Josefin Sans','Century Gothic',sans-serif;
    --body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
    --maxw:1160px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--grafito);background:var(--blanco);line-height:1.7;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  svg{display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{font-family:var(--label);font-size:12px;letter-spacing:3.5px;text-transform:uppercase;color:var(--bordo);font-weight:600}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.2px;color:var(--grafito)}
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:14px 26px;border-radius:3px;transition:.2s;cursor:pointer;border:1px solid transparent}
  .btn-primary{background:var(--bordo);color:#fff}
  .btn-primary:hover{background:var(--bordo-2)}
  .btn-ghost{border-color:var(--grafito);color:var(--grafito)}
  .btn-ghost:hover{background:var(--grafito);color:#fff}
  .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

  /* icon base */
  .ic{stroke:var(--bordo);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- NAV ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px;cursor:pointer}
  .brand-txt b{display:block;font-family:var(--label);font-size:17px;letter-spacing:3px;font-weight:700;line-height:1}
  .brand-txt span{display:block;font-family:var(--label);font-size:8.5px;letter-spacing:3px;color:var(--bordo);margin-top:3px;font-weight:600}
  .nav-links{display:flex;gap:26px;align-items:center}
  .nav-links a{font-size:14px;color:var(--gris);transition:.2s;font-weight:500;cursor:pointer;padding-bottom:3px;border-bottom:2px solid transparent}
  .nav-links a:hover{color:var(--bordo)}
  .nav-links a.active{color:var(--bordo);border-bottom-color:var(--bordo)}
  .nav-cta{font-family:var(--label);font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:600;background:var(--bordo);color:#fff!important;padding:10px 18px;border-radius:3px;border-bottom:0!important}
  .nav-cta:hover{background:var(--bordo-2)}
  .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
  .burger span{width:24px;height:2px;background:var(--grafito);display:block}
  .mobile-menu{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--linea);padding:12px 28px 20px}
  .mobile-menu a{padding:11px 0;font-size:15px;color:var(--grafito);border-bottom:1px solid var(--linea);cursor:pointer}
  .mobile-menu.open{display:flex}

  /* ---------- PAGES ---------- */
  .page{display:none}
  .page.active{display:block;animation:fade .4s ease}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  section{padding:84px 0}
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  .sec-head{max-width:640px;margin-bottom:52px}
  .sec-head .eyebrow{margin-bottom:16px}
  .sec-head h2{font-size:clamp(29px,3.6vw,40px);line-height:1.12}
  .sec-head h2 b{font-weight:600;font-style:italic;color:var(--bordo)}
  .sec-head p{color:var(--gris);font-size:16px;margin-top:16px}
  .page-hero{background:var(--hueso);padding:60px 0 52px;border-bottom:1px solid var(--linea)}
  .page-hero .eyebrow{margin-bottom:14px}
  .page-hero h1{font-size:clamp(32px,4.4vw,48px);line-height:1.06}
  .page-hero h1 b{font-weight:600;font-style:italic;color:var(--bordo)}
  .page-hero p{color:var(--gris);font-size:17px;margin-top:16px;max-width:580px}

  /* ---------- HOME HERO ---------- */
  .hero{display:grid;grid-template-columns:1.45fr 1fr;min-height:500px}
  .hero-l{padding:80px 0;display:flex;flex-direction:column;justify-content:center;max-width:600px;margin-left:auto;padding-right:56px}
  .hero-l .eyebrow{margin-bottom:22px}
  .hero h1{font-size:clamp(38px,5vw,58px);line-height:1.02}
  .hero h1 b{font-weight:500;font-style:italic;color:var(--bordo)}
  .hero .rule{width:56px;height:3px;background:var(--bordo);margin:26px 0}
  .hero p{font-size:17px;color:var(--gris);max-width:420px;margin-bottom:32px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .hero-r{background:var(--bordo);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .hero-r::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,var(--bordo-3),var(--bordo) 55%,var(--bordo-2))}
  .hero-r .wm{position:absolute;right:-40px;bottom:-30px;width:280px;opacity:.08;z-index:1}
  .hero-r .main{width:140px;position:relative;z-index:2}

  /* ---------- STATS BAR ---------- */
  .stats{background:var(--grafito);color:#fff}
  .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:30px;padding-bottom:30px}
  .stat b{font-family:var(--serif);font-size:30px;color:#fff;display:block;line-height:1.05}
  .stat span{font-size:12.5px;color:#B8B2A8;letter-spacing:.3px}

  /* ---------- HOME: vistazo áreas ---------- */
  .home-areas{background:var(--hueso)}
  .ha-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
  .ha-card{background:#fff;border:1px solid var(--linea);border-radius:10px;padding:30px 26px;transition:.25s;cursor:pointer}
  .ha-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(74,20,16,.08);border-color:#D8CFC2}
  .ha-ic{width:44px;height:44px;border-radius:9px;background:var(--hueso);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .ha-ic svg{width:23px;height:23px}
  .ha-card h3{font-size:20px;margin-bottom:8px}
  .ha-card p{font-size:14px;color:var(--gris);line-height:1.6;margin-bottom:14px}
  .ha-more{font-family:var(--label);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bordo);font-weight:600;display:inline-flex;align-items:center;gap:6px}
  .ha-more svg{width:13px;height:13px;stroke:var(--bordo);fill:none;stroke-width:2}
  .home-areas .foot{text-align:center;margin-top:40px}

  /* ---------- HOME: CTA banda ---------- */
  .home-cta{background:var(--bordo);color:#fff;text-align:center}
  .home-cta h2{color:#fff;font-size:clamp(26px,3.2vw,34px);margin-bottom:14px}
  .home-cta h2 b{font-style:italic;color:#E8C9A0;font-weight:500}
  .home-cta p{color:rgba(245,242,236,.8);font-size:16px;max-width:480px;margin:0 auto 28px}
  .home-cta .btn-light{background:#fff;color:var(--bordo)}
  .home-cta .btn-light:hover{background:var(--hueso)}

  /* ---------- PRUEBA SOCIAL ---------- */
  .proof{border-top:1px solid var(--linea);background:#fff}
  .proof .wrap{padding-top:34px;padding-bottom:34px}
  .proof-lbl{text-align:center;font-family:var(--label);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gris-2);margin-bottom:22px}
  .proof-row{display:flex;justify-content:center;gap:44px;flex-wrap:wrap;align-items:center}
  .proof-item{display:flex;align-items:center;gap:11px;color:var(--gris);font-size:14px}
  .proof-item svg{width:22px;height:22px;stroke:var(--bordo);fill:none;stroke-width:1.5}

  /* ---------- NOSOTROS ---------- */
  .nos-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .nos-txt p{color:#453F39;margin-bottom:18px;font-size:16px}
  .nos-values{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden}
  .nos-val{background:var(--hueso);padding:26px 24px}
  .nos-val .vic{width:34px;height:34px;margin-bottom:12px}
  .nos-val .vic svg{width:34px;height:34px}
  .nos-val h4{font-family:var(--label);font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;font-weight:600}
  .nos-val p{font-size:13.5px;color:var(--gris);margin:0;line-height:1.55}

  /* ---------- AREAS overview ---------- */
  .areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--linea);border:1px solid var(--linea);border-radius:10px;overflow:hidden}
  .area{background:#fff;padding:32px 28px;transition:.25s;cursor:pointer}
  .area:hover{background:var(--hueso)}
  .area .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
  .area .num{font-family:var(--label);font-size:13px;font-weight:700;color:var(--bordo);letter-spacing:1px}
  .area .aic svg{width:26px;height:26px}
  .area h3{font-size:20px;margin-bottom:10px}
  .area p{font-size:14px;color:var(--gris);line-height:1.6;margin-bottom:16px}
  .area ul{list-style:none}
  .area li{font-size:13px;color:#524C46;padding:5px 0;border-top:1px solid var(--linea);position:relative;padding-left:16px}
  .area li::before{content:"—";position:absolute;left:0;color:var(--bordo)}
  .area .go{font-family:var(--label);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bordo);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-top:16px}
  .area .go svg{width:13px;height:13px;stroke:var(--bordo);fill:none;stroke-width:2}

  /* ---------- AREA DETAIL ---------- */
  .adet{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
  .adet-main h3{font-size:24px;margin:26px 0 12px}
  .adet-main p{color:#453F39;font-size:16px;margin-bottom:14px}
  .adet-main ul{list-style:none;margin:8px 0 8px}
  .adet-main li{padding:10px 0 10px 28px;border-bottom:1px solid var(--linea);position:relative;font-size:15px;color:#3A352F}
  .adet-main li::before{content:"";position:absolute;left:0;top:16px;width:14px;height:2px;background:var(--bordo)}
  .adet-side{background:var(--hueso);border-radius:10px;padding:30px;position:sticky;top:92px}
  .adet-side .sic{width:40px;height:40px;margin-bottom:14px}
  .adet-side h4{font-family:var(--serif);font-size:19px;margin-bottom:10px}
  .adet-side p{font-size:14px;color:var(--gris);margin-bottom:20px}
  .adet-side .btn{width:100%;justify-content:center}
  .back{display:inline-flex;align-items:center;gap:7px;font-family:var(--label);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris);font-weight:600;cursor:pointer;margin-bottom:8px}
  .back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
  .back:hover{color:var(--bordo)}

  /* ---------- EQUIPO ---------- */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .member{background:#fff;border:1px solid var(--linea);border-radius:10px;overflow:hidden;transition:.25s}
  .member:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(74,20,16,.07)}
  .member .ph{height:150px;background:linear-gradient(140deg,var(--bordo-3),var(--bordo-2));display:flex;align-items:center;justify-content:center;position:relative}
  .member .ph svg{width:50px;opacity:.92}
  .member .body{padding:22px 24px}
  .member h4{font-family:var(--serif);font-size:19px;margin-bottom:3px}
  .member .role{font-family:var(--label);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bordo);font-weight:600;margin-bottom:12px}
  .member p{font-size:13.5px;color:var(--gris);line-height:1.6}
  .team-note{margin-top:24px;padding:18px 22px;background:var(--hueso);border-radius:8px;font-size:13.5px;color:var(--gris);text-align:center}

  /* ---------- TRABAJA ---------- */
  .trab-wrap{background:var(--bordo);color:#fff;border-radius:12px;padding:52px 44px;position:relative;overflow:hidden}
  .trab-wrap .wm{position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:280px;opacity:.06;z-index:0}
  .trab-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
  .trab-wrap .eyebrow{color:#E8C9A0}
  .trab-wrap h2{color:#fff;font-size:clamp(26px,3.2vw,34px);line-height:1.12;margin:14px 0 18px}
  .trab-wrap h2 b{font-style:italic;color:#E8C9A0;font-weight:500}
  .trab-wrap .lead{color:rgba(245,242,236,.82);font-size:16px;margin-bottom:26px}
  .btn-light{background:#fff;color:var(--bordo)}
  .btn-light:hover{background:var(--hueso)}
  .trab-list{display:flex;flex-direction:column;gap:14px}
  .trab-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:18px 22px}
  .trab-item h4{font-family:var(--label);color:#fff;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px}
  .trab-item p{color:rgba(245,242,236,.7);font-size:13px;margin:0;line-height:1.55}

  /* ---------- CONTACTO ---------- */
  .cont-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}
  .cont-info h3{font-size:21px;margin-bottom:20px}
  .cont-row{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--linea)}
  .cont-row .cic{flex-shrink:0;margin-top:1px}
  .cont-row .cic svg{width:20px;height:20px}
  .cont-row .lbl{font-family:var(--label);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris-2);font-weight:600}
  .cont-row .val{font-size:15px;color:var(--grafito)}
  .form{background:var(--hueso);border-radius:10px;padding:34px}
  .form h3{font-size:20px;margin-bottom:22px}
  .field{margin-bottom:18px}
  .field label{display:block;font-family:var(--label);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gris);font-weight:600;margin-bottom:7px}
  .field input,.field select,.field textarea{width:100%;border:1px solid var(--linea);background:#fff;border-radius:5px;padding:12px 14px;font-family:var(--body);font-size:15px;color:var(--grafito);transition:.2s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bordo);box-shadow:0 0 0 3px rgba(74,20,16,.08)}
  .field textarea{resize:vertical;min-height:90px}
  .form .btn{width:100%;justify-content:center;border:0;margin-top:4px}
  .form-note{font-size:12px;color:var(--gris-2);margin-top:14px;text-align:center}

  /* ---------- FOOTER ---------- */
  footer{background:var(--grafito);color:#fff;padding:52px 0 28px}
  .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-brand p{color:#B8B2A8;font-size:14px;margin-top:16px;max-width:280px}
  .foot-col h5{font-family:var(--label);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:600}
  .foot-col a{display:block;color:#B8B2A8;font-size:14px;padding:5px 0;transition:.2s;cursor:pointer}
  .foot-col a:hover{color:#fff}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px}
  .foot-bottom p{color:#8A857D;font-size:12.5px}

  @media(max-width:900px){
    .nav-links{display:none}.burger{display:flex}
    .hero{grid-template-columns:1fr}.hero-l{padding:52px 0;padding-right:0;max-width:none}
    .hero-r{min-height:220px;order:-1}.hero-r .main{width:104px}
    .stats .wrap{grid-template-columns:1fr 1fr}
    .nos-grid,.cont-grid,.trab-grid,.adet{grid-template-columns:1fr;gap:32px}
    .ha-grid,.areas-grid{grid-template-columns:1fr}
    .team-grid{grid-template-columns:1fr 1fr}
    .foot-top{grid-template-columns:1fr 1fr}
    .trab-wrap{padding:40px 28px}
    .adet-side{position:static}
    .proof-row{gap:24px}
  }
  @media(max-width:560px){
    .team-grid,.nos-values,.foot-top{grid-template-columns:1fr}
    .stats .wrap{grid-template-columns:1fr 1fr;gap:16px 20px}
  }
/* ---------- selector de canal de contacto (WhatsApp / Email) ---------- */
.chan-tabs{display:flex;gap:8px;margin-bottom:20px}
.chan-tab{flex:1;text-align:center;padding:12px;border:1px solid var(--linea);background:#fff;border-radius:6px;cursor:pointer;font-family:var(--label);font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--gris);transition:.2s;display:flex;align-items:center;justify-content:center;gap:7px}
.chan-tab svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.chan-tab.on{border-color:var(--bordo);background:var(--bordo);color:#fff}
.chan-pane{display:none}
.chan-pane.on{display:block}
.wa-note{font-size:13px;color:var(--gris);margin-bottom:16px;line-height:1.6}
.btn-wa{background:#25923a;color:#fff;width:100%;justify-content:center;border:0}
.btn-wa:hover{background:#1f7d31}

/* ---------- ajustes para logo PNG (reemplazo de SVG) ---------- */
.hero-r img.main{width:140px !important;height:auto !important}
.hero-r img.wm{width:280px !important;height:auto !important;opacity:.08}
.trab-wrap img.wm{width:280px !important;height:auto !important;opacity:.06}
.member .ph img{width:50px !important;height:auto !important;opacity:.92}
.brand img{height:37px !important;width:auto !important}
@media(max-width:900px){ .hero-r img.main{width:104px !important} }

/* ---------- tarjetas de área como enlaces ---------- */
a.ha-card{text-decoration:none;color:inherit;display:block}
a.ha-card h3{color:var(--grafito)}
a.area{text-decoration:none;color:inherit;display:block}

/* pie con solo el copyright: centrado */
.foot-bottom{justify-content:center}

/* ---------- más aire lateral en móvil ---------- */
@media(max-width:900px){
  .wrap{padding:0 22px}
  /* el hero en móvil debe conservar márgenes laterales (no pegarse al borde) */
  .hero-l.wrap{padding-left:22px !important;padding-right:22px !important}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .hero-l.wrap{padding-left:20px !important;padding-right:20px !important}
}