/* Estudio Dental Getxo — demo de prospección · 27/09/2026
   Los seis colores salen de cuantizar SUS fotos de la clínica (scripts/piezas.py).
   No hay ni un color elegido a ojo. */

:root{
  --papel:#F7F4F0;          /* del gris de pared #CFCBC5, aclarado a papel */
  --papel-2:#EDE7E0;
  --frio:#DDE2E4;           /* la luz fría de sus ventanas, #DBE0E2 */
  --tinta:#241E14;          /* su marrón oscuro #3F3527, oscurecido para leer */
  --tinta-2:#57503F;
  --madera:#7B4831;         /* la madera de sus muebles, medida */
  --madera-2:#A07158;
  --arena:#C6AC98;
  --linea:rgba(36,30,20,.16);
  --linea-2:rgba(36,30,20,.07);
  --serif:"Bitter",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}

/* ---------- banda de demo ---------- */
.banda{
  background:var(--tinta);color:var(--papel);
  font-size:13px;line-height:1.5;padding:10px 20px;text-align:center;
}
.banda strong{color:var(--arena)}

/* ---------- cabecera ---------- */
.cab{
  background:rgba(247,244,240,.94);
  border-bottom:1px solid var(--linea-2);
}
/* Pegajosa solo cuando cabe en una linea. En un movil de 375 px la cabecera se
   parte en tres filas y se comeria 150 px de pantalla en cada scroll. */
@media (min-width:760px){
  .cab{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.2) blur(8px)}
}
.cab__in{display:flex;align-items:center;gap:14px 16px;min-height:62px;flex-wrap:wrap;padding:10px 0}
@media (min-width:760px){.cab__in{padding:0}}
.marca{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.01em;
  text-decoration:none;line-height:1.2}
.marca span{display:block;font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2)}
.cab nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.cab nav a{font-size:14px;text-decoration:none;color:var(--tinta-2);
  padding:10px 2px;display:inline-block;min-height:26px;line-height:1.5}
.cab nav a:hover,.cab nav a:focus-visible{color:var(--madera)}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:12px 22px;border-radius:2px;border:1px solid var(--madera);
  background:var(--madera);color:#FFF9F4;text-decoration:none;
  font-weight:600;font-size:15px;letter-spacing:.01em;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.btn:hover,.btn:focus-visible{background:#623621;border-color:#623621}
.btn--fino{background:transparent;color:var(--tinta);border-color:var(--linea)}
.btn--fino:hover,.btn--fino:focus-visible{background:var(--papel-2);border-color:var(--tinta);color:var(--tinta)}
.btn--ancho{width:100%}

/* ---------- portada ---------- */
.hero{padding:56px 0 20px}
.hero__eti{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--madera);
  font-weight:600;margin-bottom:18px}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,6.4vw,54px);
  line-height:1.1;letter-spacing:-.015em;max-width:15ch}
.hero__sub{margin-top:20px;font-size:clamp(17px,2.2vw,20px);color:var(--tinta-2);max-width:48ch}
.hero__acc{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero__foto{margin-top:40px;border-radius:3px;overflow:hidden;background:var(--papel-2)}

/* estado: abierto / cerrado */
.estado{
  display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--tinta-2);
  border:1px solid var(--linea);border-radius:999px;padding:7px 15px;background:var(--papel);
}
.estado b{color:var(--tinta);font-weight:600}
.punto{width:8px;height:8px;border-radius:50%;background:var(--tinta-2);flex:0 0 auto}
.estado[data-abierto="si"] .punto{background:#2E6B43}
.estado[data-abierto="no"] .punto{background:var(--madera-2)}

/* ---------- secciones ---------- */
section{padding:60px 0}
.seccion--frio{background:var(--frio)}
.seccion--papel2{background:var(--papel-2)}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,4vw,36px);
  line-height:1.16;letter-spacing:-.01em;max-width:20ch}
h3{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.3}
.eti{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--madera);
  font-weight:600;margin-bottom:14px}
.entradilla{margin-top:16px;color:var(--tinta-2);max-width:56ch}
p+p{margin-top:14px}

/* ---------- rejillas ---------- */
.rej{display:grid;gap:22px;margin-top:34px}
.rej--2{grid-template-columns:1fr}
.rej--3{grid-template-columns:1fr}
@media (min-width:640px){
  .rej--2{grid-template-columns:1fr 1fr}
  .rej--3{grid-template-columns:1fr 1fr}
}
@media (min-width:920px){
  .rej--3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- equipo ---------- */
.persona{border-top:2px solid var(--tinta);padding-top:14px}
.persona h3{margin-bottom:4px}
.persona p{font-size:15px;color:var(--tinta-2)}
.persona .rol{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--madera);
  font-weight:600;margin-top:8px}

/* ---------- tratamientos ---------- */
.trat{border-top:1px solid var(--linea);padding:18px 0;display:grid;gap:6px}
@media (min-width:720px){
  .trat{grid-template-columns:1fr 1.4fr auto;align-items:baseline;gap:20px}
}
.trat h3{font-size:18px}
.trat p{font-size:15px;color:var(--tinta-2)}
.trat .quien{font-size:13px;color:var(--madera);font-weight:600;white-space:nowrap}

/* ---------- ficha lateral ---------- */
.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:3px;padding:24px}
.ficha dl{display:grid;gap:14px;margin-top:6px}
.ficha dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--madera);font-weight:600}
.ficha dd{font-size:16px;margin-top:2px}
.ficha a{color:var(--tinta);text-decoration-color:var(--linea);text-underline-offset:3px;
  display:inline-block;padding:4px 0;min-height:26px;line-height:1.5}
.ficha a:hover{text-decoration-color:var(--madera)}

/* ---------- cita ---------- */
.paso{border-top:1px solid var(--linea);padding-top:22px;margin-top:26px}
.paso:first-of-type{border-top:0;padding-top:0;margin-top:0}
.paso__n{font-family:var(--serif);font-size:13px;color:var(--madera);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.paso h2{margin-bottom:14px;font-size:19px;font-weight:600;max-width:none}
.ops{display:flex;flex-wrap:wrap;gap:9px}
.op{
  display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;
  border:1px solid var(--linea);border-radius:2px;background:var(--papel);
  font-size:15px;font-family:inherit;color:var(--tinta);cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.op:hover{border-color:var(--madera-2)}
.op[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.op:focus-visible{outline:2px solid var(--madera);outline-offset:2px}

.resumen{
  margin-top:34px;background:var(--tinta);color:var(--papel);border-radius:3px;padding:24px;
}
.resumen .eti{color:var(--arena)}
.resumen__txt{
  font-family:var(--serif);font-size:clamp(17px,2.6vw,21px);line-height:1.5;
  border-left:3px solid var(--arena);padding-left:16px;margin:4px 0 20px;
}
.resumen__quien{font-size:15px;color:var(--arena);margin-bottom:20px}
.resumen .acc{display:flex;gap:10px;flex-wrap:wrap}
.resumen .btn{background:var(--arena);border-color:var(--arena);color:var(--tinta)}
.resumen .btn:hover,.resumen .btn:focus-visible{background:#D8C2B0;border-color:#D8C2B0}
.resumen .btn--fino{background:transparent;color:var(--papel);border-color:rgba(247,244,240,.4)}
.resumen .btn--fino:hover{background:rgba(247,244,240,.1);color:var(--papel)}

.sin-js{border:1px solid var(--linea);border-radius:3px;padding:20px;background:var(--papel-2)}

/* ---------- cita: fallo ---------- */
.aviso-campo{font-size:14px;color:var(--madera);margin-top:10px}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:var(--papel);padding:46px 0 40px;margin-top:20px}
.pie a{color:var(--arena)}
.pie h2{color:var(--papel);font-size:clamp(20px,3vw,26px)}
.pie__cols{display:grid;gap:26px;margin-top:26px}
@media (min-width:720px){.pie__cols{grid-template-columns:1.2fr 1fr 1fr}}
.pie__cols h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--arena);
  font-family:var(--sans);font-weight:600;margin-bottom:10px}
.pie__cols p,.pie__cols li{font-size:15px;color:rgba(247,244,240,.86)}
.pie ul{list-style:none}
.pie li+li{margin-top:5px}
.pie li a,.pie p a{display:inline-block;padding:3px 0;min-height:26px;line-height:1.55}
.legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(247,244,240,.18);
  font-size:13px;color:rgba(247,244,240,.72);line-height:1.6}
.legal strong{color:var(--arena)}
.legal p+p{margin-top:9px}
.legal a{display:inline-block;padding:3px 0;min-height:26px}

/* ---------- apariciones, con red de seguridad ---------- */
.rev{opacity:0;transform:translateY(14px)}
.listo .rev{transition:opacity .6s ease,transform .6s ease}
.listo .rev.visto,.sin-motion .rev,.nojs .rev{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- foco visible en todo ---------- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--madera);outline-offset:3px;border-radius:2px;
}

/* ---------- saltar al contenido ---------- */
.saltar{position:absolute;left:-9999px}
.saltar:focus{position:static;display:inline-block;margin:8px 20px;padding:10px 16px;
  background:var(--tinta);color:var(--papel);text-decoration:none}