:root {
    /* Paleta estilo "Ginecología y Obstetricia de México" */
    --gom-dark: #003957;
    /* fondo azul petróleo */
    --gom-primary: #045770;
    /* azul institucional */
    --gom-secondary: #506D80;
    /* azul grisáceo */
    --gom-light: #9CADB6;
    /* gris claro editorial */
    --gom-white: #EFF1F3;
    /* blanco limpio */

    /* Sistema */
    --bg-soft: #EFF1F3;
    /* antes lila suave, ahora blanco editorial */
    --accent: #045770;
    /* antes purple */
    --text: #0E1A22;
    /* texto oscuro legible */
    --text-soft: #506D80;
    /* texto secundario */
    --border: rgba(4, 87, 112, 0.18);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Open Sans", Arial, sans-serif;
    color: var(--text);
    background: var(--gom-white);
}

.hero {
    background: linear-gradient(180deg, var(--gom-dark), var(--gom-primary));
    padding: 48px 0;
    color: var(--gom-white);
}

.container {
    width: min(1100px, 90%);
    margin: 0 auto;
}

.h1 {
    color: var(--gom-white);
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: 0.2px;
}

.select {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(239, 241, 243, 0.96);
    color: var(--text);
    outline: none;
}

.select:focus {
    border-color: rgba(4, 87, 112, 0.55);
    box-shadow: 0 0 0 4px rgba(4, 87, 112, 0.14);
}

.card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    margin-top: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(0, 57, 87, 0.08);
}

.case {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(4, 87, 112, 0.14);
}

.case:last-child {
    border-bottom: none;
}

.btn {
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid rgba(4, 87, 112, 0.25);
    text-decoration: none;
    color: var(--gom-dark);
    background: var(--gom-white);
    font-weight: 600;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover {
    background: rgba(4, 87, 112, 0.08);
    box-shadow: 0 10px 22px rgba(0, 57, 87, 0.10);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0px);
    box-shadow: none;
}

/* Quita tu override final (antes forzaba blanco sí o sí)
   Si lo necesitas, deja esto como está. */
body {
    background: var(--gom-white) !important;
}