/* ============================================
   Vértice Dental — hoja de estilo compartida
   Paquete Profesional · demo
   ============================================ */

:root{
  /* color */
  --tinta:#0B1214; --tinta-2:#162327; --gris:#5A6A6F; --gris-2:#8E9EA3;
  --linea:#E5EBEC; --papel:#FBFCFC; --hueso:#F2F6F6; --blanco:#fff;
  --azul:#0F6F82; --azul-osc:#08404D; --azul-luz:#7FD4E3;
  /* espacio: escala modular, ninguna medida inventada */
  --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:52px; --s6:84px; --s7:136px; --s8:200px;
  /* sombras multicapa, casi imperceptibles */
  --sombra:0 1px 1px rgba(11,18,20,.03), 0 4px 8px rgba(11,18,20,.035), 0 12px 28px rgba(11,18,20,.04);
  --sombra-alta:0 2px 4px rgba(11,18,20,.04), 0 10px 22px rgba(11,18,20,.06), 0 28px 64px rgba(11,18,20,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--tinta);background:var(--blanco);
  font-size:17px;line-height:1.7;font-variant-numeric:tabular-nums;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:2px solid var(--azul);outline-offset:4px}

/* --- rejilla real de 12 columnas --- */
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s4)}
.g12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s4)}
section{padding:var(--s7) 0}
.hueso{background:var(--hueso)}
.oscuro{background:var(--tinta);color:#fff}
.oscuro h2,.oscuro h3{color:#fff}

/* --- tipografía: tracking óptico, a mayor cuerpo más cerrado --- */
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:700}
h1{font-size:clamp(44px,6.6vw,92px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
h2{font-size:clamp(32px,4.4vw,60px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.2;letter-spacing:-.02em}
h4{font-size:16px;letter-spacing:-.01em}
p{max-width:60ch}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--gris);max-width:56ch}
.mono{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul);display:block;margin-bottom:var(--s3)}
.oscuro .eyebrow{color:var(--azul-luz)}

/* --- botones: un primario sólido, un secundario tipográfico --- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--tinta);color:#fff;
  padding:16px 30px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--azul);transform:translateY(101%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn-txt{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .25s}
.btn-txt:hover{opacity:.55}
.oscuro .btn{background:#fff;color:var(--tinta)}
.oscuro .btn::before{background:var(--azul-luz)}

/* --- franja fina + encabezado --- */
.franja{background:var(--tinta);color:var(--gris-2);height:32px;display:flex;align-items:center}
.franja .wrap{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--s4)}
.franja a:hover{color:#fff}
.franja .der{display:flex;gap:var(--s4)}

header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);transition:box-shadow .35s}
header.mini{box-shadow:var(--sombra)}
.head{display:flex;align-items:center;justify-content:space-between;height:88px;transition:height .35s}
header.mini .head{height:66px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:21px;letter-spacing:-.035em;text-transform:uppercase}
.logo svg{width:27px;height:27px;flex:none}
nav ul{display:flex;gap:var(--s5);list-style:none;font-size:15px}
nav a{position:relative;padding:6px 0;transition:color .25s}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--azul);transition:width .3s}
nav a:hover{color:var(--azul)}
nav a:hover::after,nav a.act::after{width:100%}
nav a.act{color:var(--azul)}
.menu-btn{display:none;background:none;border:0;font-size:25px;cursor:pointer;color:var(--tinta)}

/* --- portada editorial: usa el vacío de la rejilla --- */
.portada{padding:var(--s7) 0 0}
.portada .titulo{grid-column:1/8}
.portada h1 em{font-style:normal;-webkit-text-stroke:1.5px var(--tinta);color:transparent}
.portada .lead{margin-top:var(--s4)}
.portada .acciones{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s5);flex-wrap:wrap}
.portada .marco{grid-column:9/13;align-self:end;border-left:1px solid var(--linea);padding-left:var(--s4)}
.portada .marco dt{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris-2)}
.portada .marco dd{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.02em;
  margin:2px 0 var(--s3);line-height:1.25}
.portada .foto{grid-column:1/13;margin-top:var(--s6);position:relative;overflow:hidden}
.portada .foto img{width:100%;height:clamp(320px,52vh,560px);object-fit:cover}

/* --- cifras --- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea)}
.cifra{padding:var(--s5) var(--s4) var(--s5) 0;border-right:1px solid var(--linea)}
.cifra:last-child{border-right:0}
.cifra b{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,4.4vw,60px);font-weight:700;
  letter-spacing:-.045em;line-height:.9;display:block}
.cifra span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-2);display:block;margin-top:var(--s2)}

/* --- tarjetas de servicio: hover propio (la imagen respira) --- */
.serv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4);margin-top:var(--s6)}
.serv{grid-column:span 4;display:block;border-top:1px solid var(--tinta);padding-top:var(--s3)}
.serv .marco{overflow:hidden;margin-bottom:var(--s3)}
.serv img{width:100%;height:230px;object-fit:cover;transition:transform 1s cubic-bezier(.2,.6,.2,1)}
.serv:hover img{transform:scale(1.05)}
.serv .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--gris-2);display:block;margin-bottom:var(--s2)}
.serv p{font-size:15.5px;color:var(--gris);margin-top:var(--s2)}
.serv .mas{display:inline-block;margin-top:var(--s3);font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}

/* --- dos columnas asimétricas --- */
.split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s5);align-items:center}
.split .txt{grid-column:1/6}
.split .img{grid-column:7/13}
.split.inv .txt{grid-column:8/13}
.split.inv .img{grid-column:1/7}
.split .img img{width:100%;height:clamp(300px,48vh,540px);object-fit:cover}

/* --- lista de comprobación --- */
.lista{list-style:none;margin-top:var(--s4)}
.lista li{padding-left:30px;position:relative;margin-bottom:var(--s2);color:var(--gris)}
.lista li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:1px;background:var(--azul)}

/* --- proceso: línea que se llena --- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s6)}
.paso{position:relative;padding-top:var(--s4)}
.paso::before{content:"";position:absolute;top:0;left:0;right:var(--s4);height:2px;background:var(--linea)}
.paso::after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--azul);transition:width 1.1s cubic-bezier(.2,.6,.2,1)}
.paso.vis::after{width:calc(100% - var(--s4))}
.paso .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--azul);display:block;margin-bottom:var(--s2)}
.paso p{font-size:15.5px;color:var(--gris);margin-top:var(--s2)}

/* --- tabla de precios --- */
.tabla{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.tabla th{text-align:left;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-2);font-weight:400;padding:0 var(--s3) var(--s3) 0;border-bottom:1px solid var(--tinta)}
.tabla td{padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tr{transition:background .25s}
.tabla tbody tr:hover{background:var(--hueso)}
.tabla .precio{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.tabla .desc{color:var(--gris);font-size:15px}

/* --- galería --- */
.galeria{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s2);margin-top:var(--s6)}
.gal{position:relative;overflow:hidden;grid-column:span 4;height:280px}
.gal.alta{grid-column:span 4;height:576px}
.gal.ancha{grid-column:span 8;height:280px}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1),filter .5s}
.gal:hover img{transform:scale(1.04);filter:brightness(.86)}
.gal figcaption{position:absolute;left:var(--s3);bottom:var(--s3);color:#fff;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);
  transition:opacity .4s,transform .4s;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.gal:hover figcaption{opacity:1;transform:none}

/* --- testimonios --- */
.testis{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s4);margin-top:var(--s6)}
.testi{grid-column:span 4;border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s3)}
.testi blockquote{font-family:'Space Grotesk',sans-serif;font-size:19px;line-height:1.35;letter-spacing:-.02em}
.testi cite{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-2);font-style:normal;display:block;margin-top:var(--s3)}

/* --- formulario --- */
.formulario{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s5);row-gap:var(--s5)}
.formulario .datos{grid-column:1/5}
.formulario form{grid-column:6/13}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.campo{display:flex;flex-direction:column;gap:7px}
.campo.ancho{grid-column:1/3}
label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
input,select,textarea{font-family:inherit;font-size:16px;padding:14px 15px;border:1px solid var(--linea);
  background:var(--blanco);color:var(--tinta);transition:border-color .25s,box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(15,111,130,.09)}
textarea{resize:vertical;min-height:130px}
.dato{margin-bottom:var(--s4)}
.dato b{display:block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-2);margin-bottom:var(--s1);font-weight:400}
.mapa{border:0;width:100%;height:320px;margin-top:var(--s5)}
.nota{font-size:13.5px;color:var(--gris-2);margin-top:var(--s3);max-width:52ch}

/* --- pie --- */
footer{background:var(--tinta);color:var(--gris-2);padding:var(--s6) 0 var(--s4);font-size:15px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:var(--s5)}
footer .logo{color:#fff;margin-bottom:var(--s3)}
footer h4{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--s3);font-weight:400}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{transition:color .25s}
footer a:hover{color:#fff}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--s5);padding-top:var(--s4);
  font-size:13px;display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.demo-tag{background:#FFF3CD;color:#6B5200;text-align:center;font-size:12.5px;padding:7px 16px}

/* --- entrada: una sola vez, nunca en bucle --- */
.js .rev{opacity:0;transform:translateY(20px)}
.rev{transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rev.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rev{opacity:1;transform:none}}

/* ============ móvil: rejilla propia de 4 columnas ============ */
@media(max-width:1000px){
  :root{--s7:76px;--s6:52px;--s5:36px}
  body{font-size:16.5px}
  h1{font-size:clamp(38px,10vw,58px);letter-spacing:-.03em}
  h2{font-size:clamp(28px,7.4vw,40px);letter-spacing:-.03em}
  .wrap{padding:0 var(--s3)}
  .g12,.split,.serv-grid,.galeria,.testis,.formulario{grid-template-columns:repeat(4,1fr)}
  .portada .titulo,.portada .foto,.split .txt,.split .img,.split.inv .txt,.split.inv .img,
  .serv,.formulario .datos,.formulario form{grid-column:1/5}
  .portada .marco{grid-column:1/5;border-left:0;border-top:1px solid var(--linea);
    padding-left:0;padding-top:var(--s4);margin-top:var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
  .portada .marco dd{margin-bottom:0}
  .split .img{margin-top:var(--s5)}
  .split.inv .img{margin-top:0;margin-bottom:var(--s5);grid-row:1}
  .cifras{grid-template-columns:1fr 1fr}
  .cifra{border-right:0;padding:var(--s4) 0;border-bottom:1px solid var(--linea)}
  .cifra:nth-child(odd){border-right:1px solid var(--linea);padding-right:var(--s3)}
  .cifra:nth-child(even){padding-left:var(--s3)}
  .pasos{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s3)}
  .gal,.gal.alta,.gal.ancha{grid-column:span 4;height:240px}
  .gal figcaption{opacity:1;transform:none}
  .testi{grid-column:span 4}
  .campos{grid-template-columns:1fr}
  .campo.ancho{grid-column:1/2}
  footer .cols{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .franja .der span{display:none}
  nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--linea);display:none}
  nav.abierto{display:block}
  nav ul{flex-direction:column;gap:0;padding:0 var(--s3) var(--s2)}
  nav li{border-top:1px solid var(--linea)}
  nav a{display:block;padding:16px 0}
  .menu-btn{display:block}
  .head .btn{display:none}
  .tabla th:nth-child(2),.tabla td:nth-child(2){display:none}
}
@media(max-width:560px){
  footer .cols{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
}