/* ============================================================
   Sitioideal — Diseño «Sereno» (salud)
   Va encima de sitio.css cuando el negocio eligió este diseño (módulo Plantilla).
   Tranquilo y de confianza: letra redonda y clara (Figtree), mucho aire,
   portada con el texto en una tarjeta blanca sobre la foto, tarjetas suaves
   sin bordes y el botón principal en el color principal del negocio.
   El orden pone primero Nosotros (y el equipo). Colores del negocio (--c-*).
   ============================================================ */

.diseno-sereno {
    --sereno-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -18px rgba(16, 24, 40, .28);
    --sereno-suave: color-mix(in srgb, var(--c-primario) 7%, #FFFFFF);
    font-family: "Figtree", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Figtree no tiene ancho variable: los títulos dejan el "font-stretch" de Archivo */
.diseno-sereno h1,
.diseno-sereno h2,
.diseno-sereno h3,
.diseno-sereno h4,
.diseno-sereno .logo__nombre,
.diseno-sereno .persona__foto--iniciales { font-stretch: normal; letter-spacing: -.01em; }

/* ---------- Encabezado: blanco, con sombra suave en vez de raya ---------- */
.diseno-sereno .encabezado {
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06), 0 6px 18px -12px rgba(16, 24, 40, .25);
}

.diseno-sereno .menu a { font-weight: 500; }

/* ---------- Botones ---------- */
.diseno-sereno .boton { border-radius: 14px; font-weight: 600; }

.diseno-sereno .boton--principal {
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .6);
}

.diseno-sereno .boton-chico { border-radius: 10px; }

/* ---------- Portada: la foto a lo ancho y el texto en una tarjeta blanca ---------- */
.diseno-sereno .portada { align-items: center; }

.diseno-sereno .portada h1 { font-weight: 800; }

.diseno-sereno .portada--con-foto { --c-sobre-portada: var(--c-texto); }
.diseno-sereno .portada--con-foto::after { background: linear-gradient(to right, rgba(16, 24, 40, .28), rgba(16, 24, 40, 0) 70%); }

.diseno-sereno .portada--con-foto .portada__contenido {
    width: min(560px, 100% - 40px);
    margin: 48px auto 48px max(20px, calc((100vw - 1120px) / 2));
    padding: 36px 36px 32px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    color: var(--c-texto);
    box-shadow: 0 30px 60px -30px rgba(16, 24, 40, .55);
}

.diseno-sereno .portada--con-foto h1,
.diseno-sereno .portada--con-foto .portada__eslogan { text-shadow: none; }

.diseno-sereno .portada--con-foto h1 { color: var(--c-primario); font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
.diseno-sereno .portada--con-foto .portada__giro { color: var(--c-primario); opacity: 1; }
.diseno-sereno .portada--con-foto .portada__eslogan { font-size: 1.15rem; }

.diseno-sereno .portada--con-foto .boton--secundario { background: #FFFFFF; color: var(--c-primario); }

/* "Abierto ahora" dentro de la tarjeta blanca */
.diseno-sereno .portada--con-foto .estado-ahora {
    background: var(--sereno-suave);
    color: var(--c-texto);
    backdrop-filter: none;
}
.diseno-sereno .portada--con-foto .estado-ahora--abierto .estado-ahora__punto { background: #1E9E4A; }
.diseno-sereno .portada--con-foto .estado-ahora--pronto .estado-ahora__punto { background: #D98200; }
.diseno-sereno .portada--con-foto .estado-ahora--cerrado .estado-ahora__punto { background: #C0392B; }

@media (max-width: 700px) {
    /* En celular: la foto arriba y la tarjeta encima de su orilla de abajo */
    .diseno-sereno .portada--con-foto {
        display: block;
        min-height: 0;
        padding-top: 52vw;
        background: var(--c-fondo);
    }

    .diseno-sereno .portada--con-foto .portada__foto {
        position: absolute;
        inset: 0 0 auto 0;
        height: 64vw;
    }

    .diseno-sereno .portada--con-foto::after { display: none; }

    .diseno-sereno .portada--con-foto .portada__contenido {
        width: auto;
        margin: 0 14px 28px;
        padding: 26px 22px 24px;
    }
}

/* ---------- Secciones: mucho aire; títulos tranquilos ---------- */
.diseno-sereno .seccion { padding-block: 84px; }

.diseno-sereno .seccion h2 {
    font-weight: 700;
    color: var(--c-texto);
}

/* Una rayita del color principal antes del título */
.diseno-sereno .seccion h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 4px;
    background: var(--c-primario);
}

/* ---------- Tarjetas suaves, sin bordes ---------- */
.diseno-sereno .servicio,
.diseno-sereno .promocion,
.diseno-sereno .persona,
.diseno-sereno .especial__punto,
.diseno-sereno .testimonio,
.diseno-sereno .pregunta,
.diseno-sereno .sucursal,
.diseno-sereno .contacto__item,
.diseno-sereno .red {
    border-color: transparent;
    border-radius: 20px;
    box-shadow: var(--sereno-sombra);
}

.diseno-sereno .servicio__nombre,
.diseno-sereno .persona__nombre,
.diseno-sereno .especial__nombre { font-weight: 700; }

.diseno-sereno .servicio__precio { color: var(--c-texto); }
.diseno-sereno .servicio__precio strong { color: var(--c-primario); }

/* El equipo, protagonista: fotos grandes y cédula a la vista */
@media (min-width: 640px) {
    .diseno-sereno .persona__foto { width: 144px; height: 144px; }
    .diseno-sereno .persona { padding: 30px 24px; }
}

.diseno-sereno .persona__foto { box-shadow: 0 0 0 5px var(--sereno-suave); }

.diseno-sereno .persona__cedula {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--sereno-suave);
    opacity: 1;
}

.diseno-sereno .especial__marca { background: var(--sereno-suave); color: var(--c-primario); }

/* Horario y preguntas: limpios */
.diseno-sereno .horario__tabla th,
.diseno-sereno .horario__tabla td { border-bottom-color: rgba(16, 24, 40, .07); }

.diseno-sereno .galeria__foto { border-radius: 16px; }
.diseno-sereno .nosotros__foto img { border-radius: 24px; }

/* ---------- Encabezado con muchas secciones: el nombre en un renglón y el menú en dos si hace falta ---------- */
.diseno-sereno .logo { flex: none; }
.diseno-sereno .logo__nombre { white-space: nowrap; }
.diseno-sereno .menu { flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; padding-block: 8px; }

/* ---------- Imagen generada con IA (7.j) ---------- */
/* En el celular la tarjeta tapa la parte de abajo de la foto: la nota va arriba a la derecha */
@media (max-width: 700px) {
    .diseno-sereno .portada > .marca-ia--esquina { top: 12px; right: 12px; bottom: auto; left: auto; }
}