:root{
    --tinta:#5A2D82;
    --tinta-d:#3B1B57;
    --tinta-soft:rgba(90,45,130,.10);
    --negro:#171418;
    --papel:#F5F2EC;
    --papel-2:#EAE5DC;
    --blanco:#FFFFFF;
    --texto:#1E1A22;
    --muted:#5F5866;
    --linea:rgba(23,20,24,.13);
    --linea-soft:rgba(23,20,24,.07);
    --maxw:1120px;
    --r:4px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --papel:#141118; --papel-2:#1C1822; --blanco:#1C1822;
      --texto:#EDE9F0; --muted:#A79FB0;
      --linea:rgba(237,233,240,.16); --linea-soft:rgba(237,233,240,.08);
      --tinta:#A87FD0; --tinta-d:#7B54A8; --tinta-soft:rgba(168,127,208,.13);
      --negro:#EDE9F0;
    }
  }
  :root[data-theme="dark"]{
    --papel:#141118; --papel-2:#1C1822; --blanco:#1C1822;
    --texto:#EDE9F0; --muted:#A79FB0;
    --linea:rgba(237,233,240,.16); --linea-soft:rgba(237,233,240,.08);
    --tinta:#A87FD0; --tinta-d:#7B54A8; --tinta-soft:rgba(168,127,208,.13);
    --negro:#EDE9F0;
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--papel); color:var(--texto);
    font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a{color:var(--tinta); text-underline-offset:2px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--tinta); outline-offset:3px}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

  /* ---------- LOGO ---------- */
  .calca{position:relative; flex-shrink:0}
  .calca-cuerpo{
    position:absolute; inset:0; background:#5A2D82;
    clip-path:polygon(0 0,100% 0,100% 66%,66% 100%,0 100%);
    display:flex; align-items:center; justify-content:center;
  }
  .calca-dobles{
    position:absolute; right:0; bottom:0; width:34%; height:34%;
    background:#3B1B57; clip-path:polygon(100% 0,100% 100%,0 100%);
  }
  .calca-s{font-family:"Archivo Black",Arial,sans-serif; color:#F5F2EC; line-height:.78; transform:translate(-6%,-4%)}
  .wordmark{font-family:"Archivo Black",Arial,sans-serif; letter-spacing:-.025em; line-height:.9; color:var(--negro)}

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50; background:var(--papel);
    border-bottom:1px solid var(--linea-soft);
  }
  .bar{display:flex; align-items:center; gap:18px; padding:14px 0}
  .marca{display:flex; align-items:center; gap:11px; text-decoration:none}
  nav{margin-left:auto; display:flex; align-items:center; gap:26px}
  nav a{
    color:var(--texto); text-decoration:none; font-weight:500; font-size:15px;
  }
  nav a:hover{color:var(--tinta)}
  .btn{
    display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer;
    font-family:inherit; font-weight:600; font-size:15px; text-decoration:none;
    padding:11px 20px; border-radius:999px; transition:transform .12s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn-wa{background:var(--tinta); color:#FFF}
  .btn-ghost{background:transparent; color:var(--texto); border:1.5px solid var(--linea)}
  .btn-lg{padding:15px 26px; font-size:16px}
  @media(max-width:860px){ nav .oculta-movil{display:none} }

  /* ---------- HERO ---------- */
  .hero{padding:76px 0 64px}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
  .kicker{
    font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--tinta); margin-bottom:16px;
  }
  h1{
    font-family:"Archivo Black",Arial,sans-serif; font-weight:400;
    font-size:clamp(35px,5.4vw,58px); line-height:1.02; letter-spacing:-.03em;
    margin:0 0 20px; text-wrap:balance; color:var(--negro);
  }
  .lead{font-size:20px; color:var(--muted); margin:0 0 30px; max-width:44ch}
  .cta-fila{display:flex; flex-wrap:wrap; gap:12px}
  .micro{font-size:14px; color:var(--muted); margin-top:18px}

  /* ---------- PLACEHOLDER FOTO ---------- */
  .foto{
    background:var(--papel-2); border:1.5px dashed var(--tinta);
    border-radius:var(--r); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; text-align:center;
    padding:22px; color:var(--tinta);
  }
  .foto b{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
  .foto span{font-size:13px; color:var(--muted); max-width:26ch; line-height:1.4}


  /* ---------- FOTOS ---------- */
  .hero-foto{width:100%; height:auto; display:block; border-radius:var(--r); aspect-ratio:16/10; object-fit:cover; background:var(--papel-2)}
  .galeria{columns:4; column-gap:12px}
  .galeria figure{margin:0 0 12px; border-radius:var(--r); overflow:hidden; background:var(--papel-2); break-inside:avoid; display:block}
  .galeria img{width:100%; height:auto; display:block; transition:transform .35s ease}
  .galeria figure:hover img{transform:scale(1.03)}
  .mini{width:100%; display:block; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover; background:var(--papel-2)}
  .pie-foto{font-size:12px; letter-spacing:.05em; color:var(--muted); margin-top:7px; display:block}
  @media(max-width:900px){ .galeria{columns:2} }
  @media(max-width:560px){ .galeria{columns:1} }

  /* ---------- SECCIONES ---------- */
  section{padding:64px 0; border-top:1px solid var(--linea-soft)}
  .cabecera{max-width:60ch; margin-bottom:36px}
  h2{
    font-family:"Archivo Black",Arial,sans-serif; font-weight:400;
    font-size:clamp(27px,3.6vw,38px); line-height:1.08; letter-spacing:-.028em;
    margin:0 0 12px; text-wrap:balance; color:var(--negro);
  }
  .cabecera p{margin:0; color:var(--muted); font-size:18px}

  .rejilla{display:grid; gap:14px}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(5,minmax(0,1fr))}

  .card{
    background:var(--blanco); border:1px solid var(--linea-soft); border-radius:var(--r);
    padding:24px; display:flex; flex-direction:column; gap:9px;
  }
  .card h3{font-size:18px; font-weight:700; margin:0; color:var(--negro)}
  .card p{margin:0; font-size:15px; color:var(--muted); line-height:1.5}
  .card .ico{color:var(--tinta); margin-bottom:2px}

  .vert{
    background:var(--blanco); border:1px solid var(--linea-soft); border-radius:var(--r);
    padding:20px 18px; text-align:center;
  }
  .vert h3{font-size:16px; font-weight:700; margin:0 0 5px; color:var(--negro)}
  .vert p{margin:0; font-size:13px; color:var(--muted); line-height:1.45}

  /* ---------- PROCESO ---------- */
  .pasos{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; counter-reset:p}
  .paso{position:relative; padding-top:38px}
  .paso::before{
    counter-increment:p; content:counter(p);
    position:absolute; top:0; left:0; width:28px; height:28px; border-radius:50%;
    background:var(--tinta); color:#FFF; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .paso h3{font-size:16px; font-weight:700; margin:0 0 5px; color:var(--negro)}
  .paso p{margin:0; font-size:14px; color:var(--muted); line-height:1.45}

  /* ---------- RED ---------- */
  .red{background:var(--tinta-soft); border-radius:var(--r); padding:34px}
  .red-grid{display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center}
  .cifra{font-family:"Archivo Black",Arial,sans-serif; font-size:62px; line-height:.9; color:var(--tinta)}

  /* ---------- CONTACTO ---------- */
  .contacto{background:var(--negro); color:var(--papel); border-radius:var(--r); padding:44px}
  .contacto h2{color:var(--papel)}
  .contacto .cabecera p{color:rgba(245,242,236,.72)}
  .cont-grid{display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start}
  .campo{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
  .campo label{font-size:13px; font-weight:600; letter-spacing:.04em; color:rgba(245,242,236,.8)}
  .campo input,.campo textarea,.campo select{
    font-family:inherit; font-size:16px; padding:12px 14px; border-radius:var(--r);
    border:1px solid rgba(245,242,236,.22); background:rgba(245,242,236,.06); color:var(--papel);
  }
  .campo input::placeholder,.campo textarea::placeholder{color:rgba(245,242,236,.4)}
  .directo{display:flex; flex-direction:column; gap:16px}
  .dato{display:flex; gap:13px; align-items:flex-start}
  .dato b{display:block; font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:rgba(245,242,236,.55); font-weight:700; margin-bottom:3px}
  .dato a{color:var(--papel); text-decoration:none; font-size:18px; font-weight:600}
  .dato a:hover{text-decoration:underline}

  footer{padding:38px 0; border-top:1px solid var(--linea-soft); color:var(--muted); font-size:14px}
  .pie{display:flex; flex-wrap:wrap; gap:18px; align-items:center}
  .pie a{color:var(--muted)}

  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:36px}
    .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
    .g5,.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cont-grid,.red-grid{grid-template-columns:1fr; gap:26px}
  }
  @media(max-width:560px){
    .g3,.g2,.g5,.pasos{grid-template-columns:1fr}
    .hero{padding:48px 0 40px}
    section{padding:48px 0}
    .contacto,.red{padding:26px 20px}
  }
  @media (prefers-reduced-motion: reduce){ *{transition:none !important} html{scroll-behavior:auto} }

  /* ---------- PAGINAS DE SERVICIO ---------- */
  .miga{font-size:13px; color:var(--muted); padding:16px 0 0}
  .miga a{color:var(--muted); text-decoration:none}
  .miga a:hover{color:var(--tinta); text-decoration:underline}
  .miga span{margin:0 6px; opacity:.5}

  .svc-hero{padding:26px 0 52px}
  .svc-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center}
  .svc-hero h1{font-size:clamp(31px,4.6vw,50px)}
  .svc-intro{font-size:19px; color:var(--muted); margin:0 0 14px}
  .svc-intro strong{color:var(--texto)}

  .cta-caja{background:var(--tinta-soft); border-left:3px solid var(--tinta); padding:22px 24px; border-radius:var(--r); margin:26px 0}
  .cta-caja p{margin:0 0 14px; font-weight:600; font-size:17px}
  .cta-tel{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:17px; color:var(--tinta); text-decoration:none}
  .cta-tel:hover{text-decoration:underline}

  .lista-check{list-style:none; padding:0; margin:0; display:grid; gap:11px}
  .lista-check li{display:flex; gap:11px; align-items:flex-start; font-size:16px}
  .lista-check svg{flex-shrink:0; margin-top:4px; color:var(--tinta)}

  .faq{display:grid; gap:10px; max-width:78ch}
  .faq details{background:var(--blanco); border:1px solid var(--linea-soft); border-radius:var(--r); padding:0}
  .faq summary{cursor:pointer; padding:17px 20px; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+"; color:var(--tinta); font-size:22px; font-weight:400; line-height:1; flex-shrink:0}
  .faq details[open] summary::after{content:"3"}
  .faq details p{margin:0; padding:0 20px 18px; color:var(--muted); font-size:16px; line-height:1.55}

  .otros{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
  .otro{display:block; background:var(--blanco); border:1px solid var(--linea-soft); border-radius:var(--r); padding:18px; text-decoration:none; color:var(--texto); transition:border-color .15s ease}
  .otro:hover{border-color:var(--tinta)}
  .otro b{display:block; font-size:16px; margin-bottom:4px}
  .otro span{font-size:13px; color:var(--muted); line-height:1.4}

  .barra-movil{display:none}
  @media(max-width:760px){
    .svc-hero-grid{grid-template-columns:1fr; gap:30px}
    .otros{grid-template-columns:1fr}
    .barra-movil{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; gap:8px; padding:10px 12px;
      background:var(--papel); border-top:1px solid var(--linea); box-shadow:0 -3px 14px rgba(0,0,0,.08);
    }
    .barra-movil .btn{flex:1; justify-content:center; padding:13px 10px}
    body{padding-bottom:70px}
  }