/*
Theme Name: Manrique de Torres
Theme URI: https://madridpodologo.com
Author: José Manuel Manrique de Torres
Author URI: https://madridpodologo.com
Description: Tema personalizado para Podología Manrique de Torres, optimizado para SEO local en Madrid Río / Marqués de Vadillo.
Version: 1.3
Text Domain: manrique-theme
*/

/* Estilo base del cuerpo */
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #0f172a; /* parecido a slate-900 */
    background-color: #e9f4f3; /* brand-light */
}

/* Modelo de lectura para todo el contenido de páginas/entradas */
.prose {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.7;
    color: #111827; /* slate-900 */
}

/* Separación entre párrafos */
.prose p {
    margin-bottom: 1.1rem;
}

/* Encabezados dentro del contenido */
.prose h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    color: #0f172a;
}

.prose h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
    color: #111827;
}

/* Listas ordenadas y no ordenadas */
.prose ul,
.prose ol {
    padding-left: 1.25rem;
    margin-bottom: 1.1rem;
}

.prose li {
    margin-bottom: 0.35rem;
}

/* Negritas dentro del contenido */
.prose strong {
    font-weight: 600;
}

/* Enlaces dentro del contenido: más visibles y agradables */
.prose a {
    color: #189190; /* brand-secondary */
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.prose a:hover {
    text-decoration-thickness: 2px;
}

/* Asegurar algo de espacio en la parte inferior de las páginas de contenido */
main .prose:last-child {
    padding-bottom: 1rem;
}

/* Estilo global para enlaces (sin interferir con los botones personalizados) */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* BOTÓN PRINCIPAL "PEDIR CITA ONLINE" */
.btn-cita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.9rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-image: linear-gradient(90deg, #189190, #13b39f);
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
    white-space: nowrap;
}

.btn-cita:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    filter: brightness(1.05);
}

.btn-cita:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    filter: brightness(0.97);
}

.btn-cita:focus-visible {
    outline: 2px solid #189190;
    outline-offset: 2px;
}

/* BOTÓN WHATSAPP (hero)
   → botón similar al de cita, pero con un verde/agua más suave que combine con la web */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.7rem;
    border-radius: 9999px;
    border: 2px solid #4FD1C5;   /* verde/agua suave */
    background-color: #4FD1C5;    /* más suave que el verde WhatsApp puro */
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    gap: 0.4rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    white-space: nowrap;
}

.btn-whatsapp::before {
    content: "";
    font-family: "Font Awesome 5 Brands", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
}

/* Si no tuvieses Font Awesome, al menos deja espacio para el texto */
.btn-whatsapp span {
    display: inline-block;
}

.btn-whatsapp:hover {
    background-color: #3BB2A6;  /* tono un poco más oscuro en hover */
    border-color: #3BB2A6;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.btn-whatsapp:active {
    transform: translateY(0);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.16);
}

/* Corregir espacios en el footer en móviles */
footer {
    font-size: 0.9rem;
}