/* ============================================================
   Sitioideal — Diseño «Huellitas» (veterinarias, estéticas caninas, mascotas) · paso 7.h
   Va encima de sitio.css. Alegre y redondo: fondo crema con un toque del color
   del negocio, títulos en Baloo 2 y texto en Nunito, huellitas que cruzan la
   portada, la foto en una forma redonda con placa de collar, los precios en
   placas y la galería «Nuestros pacientes». Los títulos usan el color principal
   oscurecido para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/huellitas/
   ============================================================ */

.diseno-huellitas {
    --hu-titulos: "Baloo 2", "Nunito", system-ui, sans-serif;
    --hu-letra: "Nunito", "Segoe UI", system-ui, sans-serif;
    --hu-fondo: color-mix(in srgb, var(--c-primario) 5%, #FFFAF0);
    --hu-alterna: color-mix(in srgb, var(--c-acento) 12%, #FFF6E6);
    --hu-suave: color-mix(in srgb, var(--c-primario) 12%, #fff);
    --hu-acento-suave: color-mix(in srgb, var(--c-acento) 30%, #fff);
    --hu-titulo: color-mix(in srgb, var(--c-primario) 75%, #1F1A14);
    --hu-texto: color-mix(in srgb, var(--c-texto) 85%, #1F1A14);
    --hu-sombra: 0 18px 36px -24px color-mix(in srgb, var(--c-primario) 45%, #2A1E10);

    /* Superficies (sitio.css) */
    --s-fondo: var(--hu-fondo);
    --s-alterna: var(--hu-alterna);
    --s-tarjeta: #fff;
    --s-tarjeta-alterna: #fff;
    --s-texto: var(--hu-texto);
    --s-titulo: var(--hu-titulo);
    --s-linea: color-mix(in srgb, var(--c-primario) 14%, transparent);
    --s-linea-fuerte: color-mix(in srgb, var(--c-primario) 24%, transparent);

    background: var(--hu-fondo);
    font-family: var(--hu-letra);
    font-weight: 500;
}

@supports (color: oklch(from red l c h)) {
    .diseno-huellitas {
        --hu-titulo: oklch(from var(--c-primario) min(l, .44) c h);
        --hu-texto: oklch(from var(--c-texto) min(l, .32) c h);
    }
}

.diseno-huellitas h1,
.diseno-huellitas h2,
.diseno-huellitas h3,
.diseno-huellitas h4,
.diseno-huellitas .logo__nombre,
.diseno-huellitas .boton,
.diseno-huellitas .menu a {
    font-family: var(--hu-titulos);
    font-stretch: normal;
}

/* ---------- Encabezado ---------- */
.diseno-huellitas .encabezado { border-bottom: 4px dotted var(--hu-acento-suave); }
.diseno-huellitas .logo__nombre { color: var(--hu-titulo); font-weight: 800; }
.diseno-huellitas .menu a { font-size: 1.02rem; font-weight: 700; }
.diseno-huellitas .menu a:hover { color: var(--hu-titulo); }

/* ---------- Botones ---------- */
.diseno-huellitas .boton { padding: 13px 24px; border-radius: 18px; font-size: 1.08rem; font-weight: 700; }
.diseno-huellitas .boton--principal {
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 5px 0 color-mix(in srgb, var(--c-primario) 70%, #000);
}
.diseno-huellitas .boton--principal:hover { transform: translateY(1px); box-shadow: 0 4px 0 color-mix(in srgb, var(--c-primario) 70%, #000); }
.diseno-huellitas .boton--secundario { border: 2px solid var(--s-linea-fuerte); background: #fff; color: var(--hu-titulo); }
.diseno-huellitas .boton--secundario:hover { border-color: var(--hu-titulo); }

/* ---------- Portada ---------- */
.hu-portada {
    position: relative;
    padding-block: clamp(44px, 6vw, 88px);
    overflow: hidden;
    background:
        radial-gradient(35% 50% at 85% 25%, var(--hu-acento-suave), transparent 70%),
        radial-gradient(30% 40% at 5% 95%, var(--hu-suave), transparent 70%),
        var(--hu-fondo);
}

.hu-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 44px;
    align-items: center;
}

@media (min-width: 900px) {
    .hu-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; }
}

.hu-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 16px 6px 10px;
    border-radius: 999px;
    background: var(--hu-acento-suave);
    color: var(--hu-titulo);
    font-family: var(--hu-titulos);
    font-weight: 700;
}
.hu-etiqueta .icono { width: 20px; height: 20px; fill: currentColor; stroke-width: 1; }

.hu-portada__nombre {
    margin: 0 0 14px;
    color: var(--hu-titulo);
    font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
}

.hu-portada__eslogan {
    max-width: 36ch;
    margin: 0 0 28px;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
}

.hu-portada__estado { margin-top: 24px; }

/* La foto redonda con su placa */
.hu-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 460px);
}

.hu-foto {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: 10px solid #fff;
    border-radius: 46% 54% 44% 56% / 52% 46% 54% 48%;
    background: var(--hu-suave);
    box-shadow: var(--hu-sombra);
}

.hu-foto picture,
.hu-foto picture img { width: 100%; height: 100%; }
.hu-foto picture img { object-fit: cover; }

.hu-foto--logo { display: grid; place-items: center; background: #fff; }
.hu-foto__logo { width: 62%; height: auto; }
.hu-foto__inicial { color: var(--hu-titulo); font-family: var(--hu-titulos); font-size: 8rem; font-weight: 800; line-height: 1; }

/* La placa del collar */
.hu-placa {
    position: absolute;
    right: 4%;
    bottom: 2%;
    display: grid;
    place-content: center;
    width: 104px;
    height: 104px;
    border: 6px solid color-mix(in srgb, var(--c-acento) 55%, #C9A227);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFF6D8, color-mix(in srgb, var(--c-acento) 40%, #F2C94C));
    color: #3B2A0A;
    font-family: var(--hu-titulos);
    line-height: 1;
    text-align: center;
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .45);
    transform: rotate(-10deg);
}
.hu-placa::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    width: 16px;
    height: 24px;
    border: 4px solid #9AA0A6;
    border-radius: 10px;
    transform: translateX(-50%);
}
.hu-placa small { font-size: .8rem; font-weight: 700; }
.hu-placa strong { font-size: 1.6rem; font-weight: 800; }
.hu-placa .icono { width: 44px; height: 44px; fill: currentColor; stroke-width: 1; }

/* El caminito de huellitas */
.hu-camino { position: absolute; inset: 0; pointer-events: none; }

.hu-huella {
    position: absolute;
    width: 30px;
    height: 30px;
    color: var(--hu-titulo);
    opacity: 0;
    animation: hu-pisar 8s ease-in-out infinite;
}
.hu-huella .icono { width: 100%; height: 100%; fill: currentColor; stroke-width: 1; }

.hu-huella--1 { left: 2%; bottom: 8%; transform: rotate(70deg); animation-delay: 0s; }
.hu-huella--2 { left: 7%; bottom: 15%; transform: rotate(60deg); animation-delay: .4s; }
.hu-huella--3 { left: 12%; bottom: 7%; transform: rotate(70deg); animation-delay: .8s; }
.hu-huella--4 { left: 17%; bottom: 14%; transform: rotate(60deg); animation-delay: 1.2s; }
.hu-huella--5 { left: 22%; bottom: 6%; transform: rotate(70deg); animation-delay: 1.6s; }
.hu-huella--6 { left: 27%; bottom: 13%; transform: rotate(60deg); animation-delay: 2s; }
.hu-huella--7 { left: 32%; bottom: 5%; transform: rotate(70deg); animation-delay: 2.4s; }
.hu-huella--8 { left: 37%; bottom: 12%; transform: rotate(60deg); animation-delay: 2.8s; }

@keyframes hu-pisar {
    0% { opacity: 0; }
    8%, 55% { opacity: .16; }
    75%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hu-huella { opacity: .12; animation: none; }
}

@media (max-width: 599.98px) {
    .hu-portada__visual { width: min(100%, 320px); }
    .hu-placa { width: 84px; height: 84px; }
    .hu-placa strong { font-size: 1.3rem; }
    .hu-huella { width: 22px; height: 22px; }
}

/* ---------- Secciones ---------- */
.diseno-huellitas .seccion h2 {
    color: var(--hu-titulo);
    font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
    font-weight: 800;
    line-height: 1.1;
}

.hu-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hu-cabeza h2 { margin: 0; }
.hu-cabeza__huella {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--hu-acento-suave);
    color: var(--hu-titulo);
    transform: rotate(-15deg);
}
.hu-cabeza__huella .icono { width: 28px; height: 28px; fill: currentColor; stroke-width: 1; }

/* ---------- Servicios ---------- */
.diseno-huellitas .catalogo__indice a { border: 2px solid var(--s-linea-fuerte); background: #fff; color: var(--hu-titulo); font-family: var(--hu-titulos); }
.diseno-huellitas .catalogo__indice a:hover { background: var(--hu-acento-suave); }

.hu-grupo + .hu-grupo { margin-top: 46px; }
.hu-grupo__nombre { margin: 0 0 4px; color: var(--hu-titulo); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); font-weight: 800; }
.hu-grupo__descripcion { margin: 0 0 6px; opacity: .8; }

.hu-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 24px;
    margin-top: 16px;
}

.hu-tarjeta {
    display: flex;
    flex-direction: column;
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--hu-sombra);
}

.hu-tarjeta__foto { position: relative; }
.hu-tarjeta__foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px 26px 0 0; }

/* El precio colgando en una placa. 7.z.24: redonda si cabe; con un precio o una nota largos crece
   (a lo más 170 px de ancho, la nota en renglones) como cápsula, en vez de encimar los textos */
.hu-placa-precio {
    position: absolute;
    right: 14px;
    bottom: -26px;
    display: grid;
    place-content: center;
    min-width: 78px;
    max-width: min(170px, calc(100% - 28px));
    min-height: 78px;
    padding: 6px 10px;
    border: 4px solid #fff;
    border-radius: 39px;
    background: color-mix(in srgb, var(--c-acento) 45%, #FFD76A);
    color: #33240A;
    font-family: var(--hu-titulos);
    line-height: 1.05;
    text-align: center;
    box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .5);
    transform: rotate(8deg);
}
.hu-placa-precio strong { font-size: 1.12rem; font-weight: 800; }
.hu-placa-precio small { font-size: .7rem; font-weight: 700; }

.hu-tarjeta__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 20px 22px;
}

.hu-favorito {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #FFF1CC;
    color: #7A4B00;
    font-size: .8rem;
    font-weight: 800;
}
.hu-favorito .icono { width: 14px; height: 14px; fill: currentColor; }

.hu-tarjeta__nombre { margin: 0; padding-right: 76px; color: var(--hu-titulo); font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.hu-tarjeta__descripcion { margin: 0; font-size: .97rem; opacity: .82; }
.hu-tarjeta .hu-agendar { margin-top: auto; }

.hu-agendar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 14px;
    background: var(--hu-suave);
    color: var(--hu-titulo);
    font-family: var(--hu-titulos);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.hu-agendar .icono { width: 17px; height: 17px; }
.hu-agendar:hover { background: var(--c-primario); color: var(--c-sobre-primario); }

.hu-lista {
    margin: 18px 0 0;
    padding: 4px 20px;
    border: 2px dashed var(--s-linea-fuerte);
    border-radius: 26px;
    background: #fff;
    list-style: none;
}

.hu-renglon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--s-linea);
}
.hu-renglon:last-child { border-bottom: 0; }

.hu-renglon__huella { flex: none; color: color-mix(in srgb, var(--c-acento) 60%, var(--hu-titulo)); }
.hu-renglon__huella .icono { width: 24px; height: 24px; fill: currentColor; stroke-width: 1; }

.hu-renglon__texto { flex: 1 1 220px; min-width: 0; }
.hu-renglon__nombre { margin: 0; color: var(--hu-titulo); font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.hu-renglon__descripcion { margin: 2px 0 0; font-size: .95rem; opacity: .8; }

.hu-renglon__lado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hu-renglon__precio { display: flex; flex-direction: column; margin: 0; line-height: 1.2; text-align: right; }
.hu-renglon__precio strong { color: var(--hu-titulo); font-family: var(--hu-titulos); font-size: 1.15rem; font-weight: 800; }
.hu-renglon__precio small { font-size: .82rem; opacity: .75; }

/* ---------- Galería: «Nuestros pacientes» ---------- */
.hu-pacientes { gap: 18px; }

.hu-paciente {
    position: relative;
    padding: 8px 8px 8px;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--hu-sombra);
    transform: rotate(-1.5deg);
}
.hu-pacientes li:nth-child(2n) .hu-paciente { transform: rotate(1.5deg); }
.hu-paciente img { border-radius: 16px; }

.hu-paciente__sello {
    position: absolute;
    top: -10px;
    right: -8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-acento) 45%, #FFD76A);
    color: #33240A;
    transform: rotate(18deg);
}
.hu-paciente__sello .icono { width: 22px; height: 22px; fill: currentColor; stroke-width: 1; }

.hu-paciente__pie {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 24px 12px 10px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}

/* ---------- Lo demás: redondo ---------- */
.diseno-huellitas .promocion,
.diseno-huellitas .testimonio,
.diseno-huellitas .pregunta,
.diseno-huellitas .contacto__item,
.diseno-huellitas .sucursal,
.diseno-huellitas .especial__punto,
.diseno-huellitas .persona,
.diseno-huellitas .destacado-tarjeta { border-radius: 26px; box-shadow: var(--hu-sombra); }
.diseno-huellitas .destacado-tarjeta__nombre,
.diseno-huellitas .promocion__titulo,
.diseno-huellitas .persona__nombre,
.diseno-huellitas .especial__titulo,
.diseno-huellitas .equipo__titulo { font-family: var(--hu-titulos); font-weight: 800; }
.diseno-huellitas .testimonio__iniciales,
.diseno-huellitas .contacto__icono,
.diseno-huellitas .especial__marca,
.diseno-huellitas .persona__foto--iniciales { background: var(--hu-acento-suave); color: var(--hu-titulo); }
.diseno-huellitas .contacto__icono { border-radius: 50%; }
.diseno-huellitas .persona__foto { border: 4px solid var(--hu-acento-suave); }
.diseno-huellitas .persona__cedula { font-weight: 700; opacity: .85; }
.diseno-huellitas .pregunta__signo { background: var(--hu-acento-suave); }
.diseno-huellitas .nosotros__foto img { border-radius: 30px; }
.diseno-huellitas .nosotros__desde { background: var(--hu-acento-suave); }
.diseno-huellitas .galeria__ver-mas,
.diseno-huellitas .boton-chico { border-radius: 14px; }
.diseno-huellitas .mapa { border-radius: 26px; }
.diseno-huellitas .horario__hoy th,
.diseno-huellitas .horario__hoy td { background: var(--hu-acento-suave); }
.diseno-huellitas .horario__etiqueta { background: var(--c-primario); color: var(--c-sobre-primario); }

/* ---------- Barra del celular ---------- */
.diseno-huellitas .barra-acciones { background: #fff; }
.diseno-huellitas .barra-acciones__boton--principal { border-radius: 16px; font-family: var(--hu-titulos); }

/* ---------- Imagen generada con IA (7.j) ---------- */
/* Galería: la nota queda dentro del marco blanco y el pie sube para dejarla ver */
.hu-paciente > .marca-ia--foto { bottom: 16px; }
.hu-paciente:has(> .marca-ia) .hu-paciente__pie { padding-bottom: 36px; }
/* Tarjetas: arriba a la izquierda, lejos de la placa del precio (abajo a la derecha) */
.hu-tarjeta__foto > .marca-ia--foto { top: 12px; bottom: auto; left: 12px; transform: none; }
/* Portada: abajo a la derecha va la medalla «Desde»; la nota va arriba al centro, un poco abajo para no cortarse */
.hu-foto > .marca-ia--foto { top: 9%; bottom: auto; }