/* =================================================================================================
   LA WEB DE LA CLÍNICA (16-09-2026, punto K3)

   La hoja de estilo de la página pública que cada clínica pone en su puerta y en Google. Es una sola
   hoja, sin librerías: esta web la abre gente desde la calle, muchas veces con datos y un móvil viejo,
   y cada kilobyte es alguien que se va antes de ver el teléfono.

   El color de la clínica entra por --marca y manda en toda la página. Lo demás está pensado para
   leerse: líneas de texto que no pasan de 70 caracteres, contraste alto y nada que parpadee.
   ================================================================================================= */

:root {
    --marca: #29457d;
    --tinta: #1c2331;
    --texto: #47536b;
    --suave: #8b96ab;
    --linea: #e6e9f0;
    --fondo: #ffffff;
    --crema: #f7f8fb;
    --letra: "Figtree", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --titular: 1.15;
}

*, *::before, *::after { box-sizing: border-box; }

body.web {
    margin: 0;
    font-family: var(--letra);
    color: var(--texto);
    background: var(--fondo);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.web img { max-width: 100%; display: block; }
body.web a { color: var(--marca); }

.wCaja { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.wEstrecho { max-width: 760px; }

h1, h2, h3 { color: var(--tinta); line-height: var(--titular); margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 36px); }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.wAnte {
    display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--marca); margin-bottom: 10px;
}

/* ---------------------------------------------------------------- barra de arriba */
.wBarra {
    background: var(--tinta); color: #cfd6e4; font-size: 13.5px;
}
.wBarra .wCaja { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; padding-block: 9px; }
.wBarra a { color: #cfd6e4; text-decoration: none; }
.wBarra a:hover { color: #fff; }
.wBarra .wRedes { margin-left: auto; display: flex; gap: 14px; }

/* ---------------------------------------------------------------- cabecera */
.wCabecera { border-bottom: 1px solid var(--linea); background: #fff; position: sticky; top: 0; z-index: 40; }
.wCabecera .wCaja { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.wLogo img { height: 46px; width: auto; }
.wLogo { font-weight: 800; color: var(--tinta); text-decoration: none; font-size: 19px; }

.wMenu { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.wMenu a {
    color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14.5px;
    padding: 6px 0; border-bottom: 2px solid transparent;
}
.wMenu a:hover, .wMenu a.activa { color: var(--marca); border-bottom-color: var(--marca); }

.wBoton {
    display: inline-block; background: var(--marca); color: #fff !important; text-decoration: none;
    padding: 12px 22px; border-radius: 8px; font-weight: 700; font-size: 15px; border: 0; cursor: pointer;
    transition: filter .15s;
}
.wBoton:hover { filter: brightness(1.12); }
.wBotonLinea { background: transparent; color: var(--marca) !important; border: 2px solid currentColor; }

/* El menú en el móvil: una casilla escondida y nada de JavaScript. Menos cosas que fallen. */
.wHamburguesa { display: none; margin-left: auto; font-size: 26px; cursor: pointer; color: var(--tinta); }
#wMenuAbierto { display: none; }

/* ---------------------------------------------------------------- portada */
.wPortada { position: relative; color: #fff; }
.wPortada .wFoto { width: 100%; height: clamp(340px, 56vh, 560px); object-fit: cover; }
.wPortada .wSobre {
    position: absolute; inset: 0; display: flex; align-items: center;
    background: linear-gradient(90deg, rgba(16,22,34,.82) 0%, rgba(16,22,34,.55) 55%, rgba(16,22,34,.25) 100%);
}
.wPortada h1 { color: #fff; max-width: 17ch; }
.wPortada p { color: #e7ecf5; font-size: clamp(16px, 2vw, 19px); max-width: 52ch; margin-bottom: 22px; }
.wPortadaCorta .wFoto { height: clamp(200px, 30vh, 300px); }
.wPortadaCorta h1 { max-width: none; }

/* ---------------------------------------------------------------- secciones */
.wSeccion { padding: clamp(48px, 7vw, 86px) 0; }
.wSeccion.wGris { background: var(--crema); }
.wCentrado { text-align: center; }
.wCentrado .wAnte { text-align: center; }
.wCentrado h2 { margin-left: auto; margin-right: auto; max-width: 20ch; }
.wCentrado > p { max-width: 62ch; margin-left: auto; margin-right: auto; }

.wDos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.wDos img { border-radius: 14px; }
.wFirma { margin-top: 18px; max-width: 190px; opacity: .85; }

.wRejilla { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.wRejilla.wCuatro { grid-template-columns: repeat(4, 1fr); }
.wTarjeta {
    background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 26px 24px;
    transition: box-shadow .18s, transform .18s;
}
.wTarjeta:hover { box-shadow: 0 10px 30px rgba(28,35,49,.08); transform: translateY(-2px); }
.wTarjeta h3 { margin-bottom: 8px; }
.wTarjeta p { font-size: 15px; }

.wNumero {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 10px; background: color-mix(in srgb, var(--marca) 12%, #fff);
    color: var(--marca); font-weight: 800; margin-bottom: 14px;
}

.wPersona { text-align: center; }
.wPersona img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.wPersona h3 { margin-bottom: 2px; }
.wPersona .wCargo { color: var(--marca); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.wPersona p { font-size: 14.5px; margin-top: 8px; }

.wHorario { display: grid; gap: 6px; }
.wHorario div { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--linea); padding-bottom: 6px; }

/* Un trozo de código pegado por la clínica (cita online, formulario, mapa). Se le da sitio y se le
   obliga a caber: lo que pegan suele traer anchos fijos que rompen el móvil. */
.wEmpotrado { margin-top: 8px; }
.wEmpotrado iframe, .wEmpotrado embed, .wEmpotrado object {
    max-width: 100%; width: 100%; min-height: 460px; border: 0; border-radius: 12px;
}
.wEmpotrado img { max-width: 100%; }

/* ---------------------------------------------------------------- llamada final */
.wLlamada { background: var(--marca); color: #fff; text-align: center; padding: clamp(44px, 6vw, 72px) 0; }
.wLlamada h2 { color: #fff; }
.wLlamada p { color: rgba(255,255,255,.88); max-width: 54ch; margin: 0 auto 22px; }
.wLlamada .wBoton { background: #fff; color: var(--marca) !important; }

/* ---------------------------------------------------------------- pie */
.wPie { background: var(--tinta); color: #aab4c7; padding: clamp(40px, 5vw, 64px) 0 26px; font-size: 14.5px; }
.wPie h3 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.wPie a { color: #aab4c7; text-decoration: none; }
.wPie a:hover { color: #fff; }
.wPieRejilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.wPieRejilla ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wPieFinal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 18px; font-size: 13px; color: var(--suave); }

/* ---------------------------------------------------------------- móvil */
@media (max-width: 860px) {
    .wDos, .wRejilla, .wRejilla.wCuatro, .wPieRejilla { grid-template-columns: 1fr; }
    .wDos > div:last-child { order: -1; }
    .wBarra .wCaja { font-size: 13px; }
    .wBarra .wRedes { margin-left: 0; }

    .wHamburguesa { display: block; }
    .wMenu {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; border-bottom: 1px solid var(--linea);
        flex-direction: column; gap: 0; padding: 8px 22px 18px;
    }
    .wMenu a { padding: 12px 0; border-bottom: 1px solid var(--linea); }
    #wMenuAbierto:checked ~ .wMenu { display: flex; }
    .wCabecera .wCaja { position: relative; flex-wrap: wrap; }

    /* El botón de pedir cita SIGUE VISIBLE en el móvil, sólo más pequeño. Esconderlo detrás del menú
       sería quitar de en medio lo único que esta web tiene que conseguir, y en el móvil es donde
       entra la mayoría de la gente. */
    .wCabecera .wBoton { padding: 9px 14px; font-size: 14px; order: 3; }
    .wHamburguesa { order: 4; margin-left: 14px; }
    .wLogo img { height: 38px; }
}

@media print {
    .wBarra, .wMenu, .wHamburguesa, .wLlamada { display: none; }
}

/* ---------------------------------------------------------------- páginas legales
   Sin foto de portada y con la línea de texto corta: esto no se enseña, se lee. */
.wPortadaLegal { background: var(--marca); color: #fff; padding: clamp(36px, 5vw, 64px) 0; }
.wPortadaLegal h1 { color: #fff; font-size: clamp(26px, 4vw, 40px); margin: 0; }

.wLegal p { margin-bottom: 14px; }
.wLegal { font-size: 15.5px; }

.wLegales { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 12px; }