:root {
    --tinta: #22262b;
    --suave: #5f6a72;
    --linea: #e4e7e6;
    --crema: #f7f5f1;
    --verde: #3f6b60;
    --verde-claro: #eaf1ee;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 17px/1.65 ui-serif, Georgia, "Times New Roman", serif;
    color: var(--tinta);
    background: #fff;
}

h1, h2, h3, .marca, nav, .boton {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--verde); }

.cabecera {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.1rem 2rem;
    border-bottom: 1px solid var(--linea);
    flex-wrap: wrap;
}
.marca { font-weight: 600; letter-spacing: .01em; }
.cabecera nav { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; font-size: .92rem; }
.cabecera nav a { text-decoration: none; color: var(--suave); }
.cabecera nav a:hover { color: var(--tinta); }
.cabecera nav a.cta {
    padding: .45rem .9rem;
    color: #fff;
    background: var(--verde);
    border-radius: 999px;
}

.portada { background: var(--crema); padding: 5rem 2rem; }
.portada .contenido { max-width: 700px; margin: 0 auto; text-align: center; }
.portada h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.2; margin: 0 0 1rem; }
.entrada { font-size: 1.12rem; color: var(--suave); margin: 0 0 2rem; }

.boton {
    display: inline-block;
    padding: .8rem 1.6rem;
    font-size: .98rem;
    color: #fff;
    background: var(--verde);
    border-radius: 999px;
    text-decoration: none;
}
.boton:hover { filter: brightness(1.1); }
.boton--claro { color: var(--verde); background: var(--verde-claro); }

.seccion { max-width: 820px; margin: 0 auto; padding: 4rem 2rem; }
.seccion--alt { max-width: none; background: var(--crema); }
.seccion--alt > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.seccion h2 { font-size: 1.5rem; margin: 0 0 1.8rem; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; }
.rejilla h3 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--verde); }
.rejilla p { margin: 0; color: var(--suave); font-size: .98rem; }

.pasos { padding-left: 1.2rem; }
.pasos li { margin-bottom: .9rem; }
.costo {
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 10px;
    text-align: center;
}

.texto { color: var(--suave); }

.pie {
    padding: 2.5rem 2rem;
    text-align: center;
    border-top: 1px solid var(--linea);
    color: var(--suave);
    font-size: .92rem;
}
.pie .chico { max-width: 560px; margin: .8rem auto 0; font-size: .84rem; }

.credencial {
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linea);
    font-size: .92rem;
}
.datos-consultorio {
    margin-top: 1.8rem;
    font-size: .95rem;
    line-height: 1.9;
}