/* Anatomy Center — arquetipo C · Clínico sereno */
*{box-sizing:border-box;margin:0}
html{overflow-x:hidden}

:root{
  --bg:#FBFAF7;
  --surface:#FFFFFF;
  --texto:#2E3A3D;
  --texto-suave:#5A6B70;
  --acento:#175E63;
  --acento-2:#9FB8B6;
  --borde:#E4E1D9;
}

body{
  background:var(--bg);
  color:var(--texto);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:1rem;
  line-height:1.75;
  padding-bottom:64px;
}
@media (min-width:720px){ body{ padding-bottom:0; } }

.wrap{ max-width:620px; margin:0 auto; padding:0 20px; }

h1,h2{ color:var(--acento); font-weight:400; }
h1{ font-size:clamp(1.9rem,5.5vw,2.6rem); font-weight:300; letter-spacing:-0.01em; line-height:1.25; }
h2{ font-size:clamp(1.35rem,3.5vw,1.7rem); line-height:1.3; margin-bottom:16px; }
h3{ font-size:clamp(1.05rem,2.5vw,1.15rem); font-weight:600; line-height:1.4; color:var(--texto); }
p{ line-height:1.75; }

.label{
  display:block; font-size:.8125rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--texto-suave); margin-bottom:8px;
}

a{ color:var(--acento); }
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--acento); outline-offset:2px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; min-width:44px; padding:12px 24px; border-radius:2px;
  font-weight:600; font-size:.9375rem; text-decoration:none; line-height:1;
}
.btn-primary{ background:var(--acento); color:#fff; border:1px solid var(--acento); }
.btn-secondary{ background:transparent; color:var(--acento); border:1px solid var(--acento); }

.ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }

section{ padding:64px 0; }
@media (min-width:720px){ section{ padding:96px 0; } }

/* separador entre secciones: línea fina + eco del trazo */
.divider{ border:0; border-top:1px solid var(--borde); margin:0; }
.divider-wrap{ position:relative; }
.divider-echo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:32px; height:12px; background:var(--bg);
}

/* ---- hero ---- */
.hero{ position:relative; padding-top:56px; }
.hero .subtitulo{ margin-top:16px; color:var(--texto-suave); max-width:46ch; }

.anat-trace{
  display:block; width:43px; height:160px; margin:40px auto 0; transform:rotate(90deg);
}
@media (min-width:720px){
  .anat-trace{
    position:absolute; top:0; right:8px; margin:0;
    width:75px; height:280px; transform:none; opacity:.9;
  }
}
@media (min-width:900px){
  /* -90px respecto a la columna de 620px = calc(50% - 400px) respecto al hero full-width */
  .anat-trace{ right:calc(50% - 400px); opacity:1; }
}

/* ---- franja de confianza ---- */
.trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;
  font-size:.9375rem; color:var(--texto-suave);
}
.trust .estado{ display:inline-flex; align-items:center; gap:8px; color:var(--texto); font-weight:600; }
.trust .dot{ width:8px; height:8px; border-radius:50%; background:var(--acento); display:inline-block; }

/* ---- listas de una columna (servicios / razones) ---- */
.lista-simple{ list-style:none; }
.lista-simple li{ padding:24px 0; border-top:1px solid var(--borde); }
.lista-simple li:first-child{ border-top:none; padding-top:0; }
.lista-simple h3{ margin-bottom:8px; }
.lista-simple p{ color:var(--texto-suave); }

.razones{ display:flex; flex-direction:column; gap:32px; }
.razones h3{ margin-bottom:8px; }
.razones p{ color:var(--texto-suave); }

/* ---- reseñas ---- */
blockquote{
  background:var(--surface); border:1px solid var(--borde); border-radius:2px;
  padding:24px; margin:0 0 24px 0;
}
blockquote:last-of-type{ margin-bottom:0; }
blockquote p{ color:var(--texto); }
blockquote cite{
  display:block; margin-top:16px; font-style:normal; font-size:.8125rem; color:var(--texto-suave);
}

/* ---- horarios ---- */
table{ width:100%; border-collapse:collapse; margin-top:24px; }
th,td{ padding:10px 0; text-align:left; border-bottom:1px solid var(--borde); font-weight:400; font-size:.9375rem; }
th{ color:var(--texto-suave); font-weight:500; }
td:last-child, th:last-child{ text-align:right; }

/* ---- CTA final ---- */
.cta-final{ background:var(--acento); color:#fff; }
.cta-final .wrap{ text-align:left; }
.cta-final h2{ color:#fff; }
.cta-final p{ color:#dfeceb; margin-top:12px; }
.cta-final .btn-primary{ background:#fff; color:var(--acento); border-color:#fff; }
.cta-final .btn-secondary{ color:#fff; border-color:#fff; }

/* ---- footer ---- */
footer{ padding:48px 0 96px; font-size:.875rem; color:var(--texto-suave); }
@media (min-width:720px){ footer{ padding:48px 0; } }
footer a{ color:var(--texto-suave); text-decoration:underline; }

/* ---- barra fija inferior (móvil) ---- */
.bar-fija{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; gap:1px; background:var(--borde);
  box-sizing:border-box;
}
.bar-fija a{
  flex:1; height:56px; display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-weight:600; font-size:.9375rem;
}
.bar-fija .wa{ background:var(--acento); color:#fff; }
.bar-fija .call{ background:var(--surface); color:var(--acento); }
@media (min-width:720px){ .bar-fija{ display:none; } }