@font-face{font-family:"Urbanist";font-style:normal;font-weight:200 600;font-display:swap;src:url(/assets/fonts/urbanist-latin.woff2) format("woff2")}
@font-face{font-family:"Urbanist";font-style:italic;font-weight:300 400;font-display:swap;src:url(/assets/fonts/urbanist-latin-italic.woff2) format("woff2")}
/* Editorial de despacho: folio blanco roto, tinta azul marino, portadas 16:9 en color de clave alta (predominio del blanco) con grano
   de película, Urbanist ligera a gran escala y botones en el amarillo pastel de los documentos. */
:root{
  --paper:#F8F7F3;     /* folio */
  --paper-2:#EFEDE6;   /* bandas */
  --ink:#000656;       /* azul marino de marca */
  --ink-2:#3B3F68;
  --muted:#7C7F93;
  --rule:#DEDBD3;
  --amber:#FFB000;     /* acento del logotipo, solo en filetes */
  --pill:#F4DA96;      /* amarillo de las pastillas de los documentos */
  --pill-hover:#EFCD78;
  --display:"Urbanist","Helvetica Neue",Arial,sans-serif;
  --text:"Urbanist","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --maxw:1240px;
  --head:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--pill);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- cabecera ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper)}
.top-in{max-width:var(--maxw);margin:0 auto;height:var(--head);padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{position:relative;display:block;flex:none;text-decoration:none}
.brand .set{position:absolute;left:0;top:0}
.gl{position:absolute;display:block;background-repeat:no-repeat;transition:opacity .16s ease,transform .22s cubic-bezier(.2,.7,.2,1),filter .22s ease}
.gl.off{opacity:0;transform:translateY(14%);filter:blur(1.5px)}
.gl.hid{opacity:0}
@media (prefers-reduced-motion:reduce){.gl{transition:none}}
.nav{display:flex;align-items:center;gap:clamp(26px,3.2vw,48px);font-size:15px;font-weight:500}
.nav a{text-decoration:none;position:relative;padding:6px 0;white-space:nowrap}
.nav>a:not(.cta)::after,.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .35s ease}
.nav>a:not(.cta):hover::after,.nav>a[aria-current="page"]:not(.cta)::after{right:0}
.drop{position:relative}
.drop>button{all:unset;cursor:pointer;padding:6px 0;display:flex;gap:8px;align-items:center;white-space:nowrap}
.drop>button::after{content:"";width:5px;height:5px;border-right:1.3px solid currentColor;border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.drop .menu{position:absolute;top:calc(100% + 10px);left:-22px;min-width:270px;background:var(--paper);border-radius:4px;padding:14px 22px;display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.drop .menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.drop:hover .menu,.drop:focus-within .menu{opacity:1;visibility:visible;transform:none}
.drop .menu a{padding:9px 0;display:flex;justify-content:space-between;gap:18px;text-decoration:none}
.drop .menu small{color:var(--muted);font-weight:400;font-size:13px}
.burger{all:unset;display:none;cursor:pointer;width:34px;height:34px;position:relative}
.burger span{position:absolute;left:5px;right:5px;height:1.5px;background:var(--ink);transition:transform .3s}
.burger span:nth-child(1){top:12px}.burger span:nth-child(2){top:20px}
.open .burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.open .burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1040px){
  .burger{display:block}
  .nav{position:fixed;inset:var(--head) 0 auto 0;flex-direction:column;align-items:flex-start;gap:6px;padding:18px var(--gutter) 30px;background:var(--paper);display:none;font-size:20px}
  .open .nav{display:flex}
  .drop .menu{position:static;opacity:1;visibility:visible;transform:none;padding:0 0 6px 14px;min-width:0;font-size:16px;background:transparent}
  .drop>button::after{display:none}
}

/* ---------- botones: pastilla amarilla, proporción de los documentos ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 24px;border-radius:999px;background:var(--pill);color:var(--ink)!important;text-decoration:none;font:600 12.5px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border:0;cursor:pointer;transition:background .25s}
.nav a.cta{padding:0 22px 0 calc(22px + .12em)}
.cta{padding:0 22px 0 calc(22px + .12em)}
.cta:hover{background:var(--pill-hover)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- maquetación ---------- */
.page{animation:enter .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes enter{from{transform:translateY(8px);opacity:.85}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,128px)}
.section:not(.band)+.section:not(.band){border-top:1px solid var(--rule)}
.band{background:var(--paper-2)}
.eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:12px;margin:0}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--amber)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,96px)}
h2{font-size:clamp(32px,4.4vw,62px)}
h3{font-size:clamp(22px,2.1vw,28px);font-weight:400;letter-spacing:-.01em;line-height:1.2}
h1 em,h2 em,h3 em{font-style:italic;font-weight:300}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink-2);max-width:38ch}
.prose{max-width:62ch}
.prose p{margin:0 0 1.1em}.prose p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.col-4{grid-column:span 4;min-width:0}.col-5{grid-column:span 5;min-width:0}.col-6{grid-column:span 6;min-width:0}.col-7{grid-column:span 7;min-width:0}.col-8{grid-column:span 8;min-width:0}
@media (max-width:860px){.grid-2>*{grid-column:1/-1!important}}
.ph{position:relative;overflow:hidden;background:var(--paper-2)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
a:hover .ph img{transform:scale(1.04)}

/* ---------- portada 16:9 a sangre ---------- */
.cover{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--paper)}
.cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,rgba(248,247,243,.86) 30%,rgba(248,247,243,.35) 52%,rgba(248,247,243,0) 68%);pointer-events:none}
.cover .in{position:absolute;inset:0;z-index:1;display:flex;align-items:center}
.cover .in>.wrap{width:100%}
.cover .tx{max-width:min(52%,640px)}
.cover h1{font-size:clamp(38px,4.4vw,66px)}
.cover.narrow .tx{max-width:min(38%,520px)}
.cover h2{font-size:clamp(34px,4vw,58px)}
.cover h1{margin-top:22px}
.cover .lead{margin-top:24px}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
@media (max-width:900px){
  .cover{aspect-ratio:auto;overflow:visible}
  .cover>img{position:relative;aspect-ratio:16/9;height:auto}
  .cover::after{display:none}
  .cover .in{position:relative;display:block;padding-block:34px 8px}
  .cover .tx{max-width:none}
}

/* manifiesto */
.manifesto{font-family:var(--display);font-weight:300;font-size:clamp(27px,3.4vw,48px);line-height:1.18;letter-spacing:-.015em;max-width:26ch;text-wrap:balance;margin:0}
.manifesto em{font-style:italic;color:var(--ink-2)}
.manifesto .amp{color:var(--amber);font-style:normal}

/* tarjetas de servicios y sectores: mismas proporciones y altura */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);margin-top:56px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px);margin-top:56px}
@media (max-width:1000px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.cards3{grid-template-columns:1fr}}
@media (max-width:560px){.cards4{grid-template-columns:1fr}}
.tile{text-decoration:none;display:grid;gap:14px;align-content:start}
.tile .ph{aspect-ratio:4/5}
.tile .k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tile h3{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.tile h3 span{font-size:18px;color:var(--amber);transition:transform .35s}
.tile:hover h3 span{transform:translateX(6px)}
.tile p{margin:0;color:var(--ink-2);font-size:16px}

/* proceso */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;border-top:1px solid var(--rule)}
.steps li{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.steps .n{font-family:var(--display);font-weight:200;font-size:38px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps h3{font-size:24px}
.steps p{margin:0;color:var(--ink-2)}
@media (max-width:760px){.steps li{grid-template-columns:56px 1fr}.steps li p{grid-column:2}}

/* bloque firma */
.quote{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.quote .ph{grid-column:span 6;aspect-ratio:16/9}
.quote .tx{grid-column:span 6;min-width:0}
@media (max-width:860px){.quote>*{grid-column:1/-1!important}}

/* listas y bloques */
.roles{columns:2;column-gap:40px;padding:0;margin:22px 0 0;list-style:none}
.roles li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
@media (max-width:560px){.roles{columns:1}}
.tag{display:inline-flex;align-items:center;height:30px;padding:0 18px;border-radius:999px;background:var(--pill);color:var(--ink);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:44px}
@media (max-width:860px){.promise{grid-template-columns:1fr}}
.promise div{border-top:2px solid var(--ink);padding-top:18px}
.promise h3{font-size:22px;margin-bottom:10px}
.promise p{margin:0;color:var(--ink-2);font-size:16px}
.model{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border-top:1px solid var(--rule)}
@media (max-width:860px){.model{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.model{grid-template-columns:1fr}}
.model div{padding:26px 22px 30px 0;border-bottom:1px solid var(--rule)}
.model .n{font-size:12px;letter-spacing:.18em;color:var(--muted);font-weight:600}
.model h3{margin:12px 0 10px}
.model p{margin:0;color:var(--ink-2);font-size:16px}
.bar{height:3px;background:var(--rule);margin-top:20px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.doc{background:#fff;padding:28px 30px;border-radius:4px;font-size:15px}
.doc .row{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:10px 0;gap:16px}
.doc .row span:last-child{color:var(--muted)}
.doc .dots{display:flex;gap:6px}
.doc .dots i{width:10px;height:10px;border-radius:50%;border:1.3px solid var(--ink)}
.doc .dots i.on{background:var(--ink)}
.faq{margin-top:40px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:20px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:28px;font-weight:200;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;max-width:66ch;color:var(--ink-2)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);margin-top:50px}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.values h3{font-size:clamp(28px,3vw,40px);font-weight:200}
.values h3 em{color:var(--amber);font-style:normal}
.values p{color:var(--ink-2);margin:14px 0 0}

/* formularios */
form{display:grid;gap:18px}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0;width:100%}
.field textarea{min-height:110px;resize:vertical;border:0;background:var(--paper);padding:12px;border-radius:4px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--amber)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.two{grid-template-columns:1fr}}
.file{background:var(--paper);border-radius:4px;padding:16px 18px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.check input{margin-top:4px;accent-color:var(--ink)}
.ok{background:var(--paper);border-left:3px solid var(--amber);padding:16px 18px;font-size:15px;margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card{padding:24px;display:grid;gap:8px;background:var(--paper);border-radius:4px}
.card .k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.card .v{font-size:19px;word-break:break-word}
.card button{all:unset;cursor:pointer;font-size:13px;text-decoration:underline;color:var(--ink-2);justify-self:start}
.booking{padding:clamp(22px,3vw,36px);display:grid;gap:18px;background:#fff;border-radius:4px;}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.slots button{all:unset;cursor:pointer;text-align:center;background:var(--paper);border-radius:4px;padding:10px;font-size:15px;transition:all .2s}
.slots button:hover,.slots button.sel{background:var(--pill)}
.legal h2{font-size:26px;font-weight:400;margin:38px 0 12px}
.legal p,.legal li{color:var(--ink-2)}
.todo{background:var(--pill);padding:0 4px}

/* pie en blanco roto */
footer{background:var(--paper);color:var(--ink);padding-block:clamp(64px,8vw,104px) 30px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media (max-width:860px){.f-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.f-top{grid-template-columns:1fr}}
.f-top h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin:0 0 14px;color:var(--muted)}
.f-top ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.f-claim{font-family:var(--display);font-weight:300;font-size:24px;line-height:1.25;margin:26px 0 0;max-width:18ch;color:var(--ink-2)}
.f-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule);margin-top:56px;padding-top:20px;font-size:13px;color:var(--muted)}