/* ═══════════════════════════════════════════════════════════════════════════
   CDHQ – Estilos compartidos del sitio público
   Paleta institucional: aqua #0e85a5 · verde esperanza #00ac00
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cdhq-aqua: #0e85a5;
    --cdhq-aqua-dark: #0e5c75;
    --cdhq-green: #00ac00;
}

* { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
body { background: #ffffff; color: #1e293b; overflow-x: hidden; }

/* ─── Texturas de sección ─────────────────────────────────────────────────── */
.dot-grid {
    background-image: radial-gradient(rgba(14,133,165,0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}
.blueprint-grid {
    background-image:
        linear-gradient(rgba(14,133,165,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,133,165,0.07) 1px, transparent 1px);
    background-size: 34px 34px;
}
.hero-blob { animation: floatBlob 11s ease-in-out infinite; }
.hero-blob-delay { animation-duration: 14s; animation-delay: -4s; }
.hero-blob-delay2 { animation-duration: 9s; animation-delay: -2s; }
@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(18px, -26px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-blob { animation: none; } }

/* ─── Header / navegación ─────────────────────────────────────────────────── */
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: linear-gradient(90deg, var(--cdhq-aqua), var(--cdhq-green));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s ease;
}
.nav-link:hover { color: var(--cdhq-aqua); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--cdhq-aqua); font-weight: 600; }
.nav-link.is-active::after { transform: scaleX(1); }

.mobile-nav-link {
    display: block; padding: 0.65rem 0.5rem; border-radius: 0.6rem;
    color: #475569; font-weight: 500; transition: background 0.2s ease, color 0.2s ease;
}
.mobile-nav-link:hover { background: #f0fbfd; color: var(--cdhq-aqua); }
.mobile-nav-link.is-active { background: #f0fbfd; color: var(--cdhq-aqua); font-weight: 600; }

/* ─── Encabezado de página interna ────────────────────────────────────────── */
.page-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(165deg,#ffffff 0%,#f2fbfd 50%,#edfaf1 100%);
}

/* ─── WhatsApp flotante ───────────────────────────────────────────────────── */
.whatsapp-float {
    position: fixed; bottom: 20px; right: 20px; z-index: 50;
    transition: transform 0.2s ease;
}
@media (min-width: 640px) { .whatsapp-float { bottom: 28px; right: 28px; } }
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-pulse {
    position: absolute; inset: 0; border-radius: 9999px;
    background: rgba(0, 172, 0, 0.45);
    animation: whatsappPulse 2.2s ease-out infinite;
}
@keyframes whatsappPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-pulse { animation: none; display: none; } }

/* ─── Botón magnético con brillo ──────────────────────────────────────────── */
.magnetic-wrap { position: relative; display: inline-flex; margin: -14px; padding: 14px; }
.magnetic-btn {
    --magnetic-x: 0px; --magnetic-y: 0px; --glow-x: 50%; --glow-y: 50%; --glow-opacity: 0;
    position: relative; isolation: isolate; overflow: hidden;
    transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
    transition: transform 0.26s cubic-bezier(.22,1,.36,1), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.2s ease;
    will-change: transform;
}
.magnetic-btn:active { transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0) scale(0.96); }
.magnetic-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow-color) 45%, transparent);
}
.magnetic-btn .glow-layer {
    position: absolute; inset: 0; z-index: 0; border-radius: inherit;
    opacity: var(--glow-opacity); transition: opacity 0.3s ease; pointer-events: none;
    background: radial-gradient(circle at var(--glow-x) var(--glow-y),
        color-mix(in srgb, var(--glow-color) 65%, transparent) 0%,
        color-mix(in srgb, var(--glow-color) 25%, transparent) 32%,
        transparent 65%);
}
.magnetic-btn .btn-label {
    position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem;
    transform: translate(calc(var(--magnetic-x) * 0.18), calc(var(--magnetic-y) * 0.18));
    transition: transform 0.2s ease-out;
}
.magnetic-btn.magnetic-solid { box-shadow: 0 14px 32px -16px rgba(14,133,165,0.65); }
.magnetic-btn.magnetic-solid:hover { box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--glow-color) 60%, transparent); }
.magnetic-btn.magnetic-outline:hover {
    border-color: color-mix(in srgb, var(--glow-color) 60%, transparent);
    box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--glow-color) 55%, transparent);
}
.magnetic-ripple {
    position: absolute; z-index: 1; border-radius: 9999px; pointer-events: none;
    background: color-mix(in srgb, var(--glow-color) 45%, transparent);
    animation: magneticRipple 0.65s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes magneticRipple {
    from { opacity: 0.85; transform: scale(0); }
    to { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .magnetic-btn { transform: none !important; transition-duration: 0.12s; }
    .magnetic-btn .btn-label { transform: none !important; }
    .magnetic-ripple { display: none; }
}

/* ─── Tarjetas con spotlight (aqua → verde) ───────────────────────────────── */
.glow-card {
    --mx: 50%; --my: 50%; --hue: 192;
    position: relative;
    isolation: isolate;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.glow-card::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    padding: 1.5px;
    background: radial-gradient(220px 220px at var(--mx) var(--my),
        hsl(var(--hue) 88% 42%) 0%, hsl(var(--hue) 88% 45% / 0.28) 35%, transparent 68%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2;
}
.glow-card::after {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(260px 260px at var(--mx) var(--my), hsl(var(--hue) 85% 50% / 0.09), transparent 70%);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
    .glow-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(14,133,165,0.45); }
    .glow-card:hover::before, .glow-card:hover::after { opacity: 1; }
}

/* ─── Acordeón ────────────────────────────────────────────────────────────── */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.acc-panel > div { overflow: hidden; }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-item.open { border-color: rgba(14,133,165,0.35); box-shadow: 0 18px 36px -28px rgba(14,133,165,0.6); }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-chevron { transition: transform 0.3s ease; }
.acc-trigger:focus-visible { outline: 2px solid var(--cdhq-aqua); outline-offset: -2px; border-radius: 1rem; }
@media (prefers-reduced-motion: reduce) { .acc-panel, .acc-chevron { transition: none; } }

/* ─── Testimonios / carrusel ──────────────────────────────────────────────── */
.testimonial-card {
    background: white; border-radius: 1.5rem; position: relative; overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--cdhq-aqua), var(--cdhq-green));
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -20px rgba(14,133,165,0.3); }
.carousel-container { overflow: hidden; position: relative; }
.carousel-track { display: flex; transition: transform 0.5s ease-in-out; }
.carousel-slide { flex: 0 0 100%; padding: 0.5rem 0.75rem; }
@media (min-width: 768px) { .carousel-slide { flex: 0 0 50%; } }
@media (min-width: 1024px) { .carousel-slide { flex: 0 0 33.333%; } }
.carousel-button {
    background: white; border-radius: 9999px; width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(14,133,165,0.22); transition: all 0.2s;
}
.carousel-button:hover { background: #f0fbfd; transform: scale(1.06); }
.dot { width: 10px; height: 10px; border-radius: 50%; background-color: #cbd5e1; cursor: pointer; transition: all 0.2s; }
.dot.active { background-color: var(--cdhq-aqua); width: 24px; border-radius: 20px; }

/* ─── Línea de tiempo / pasos ─────────────────────────────────────────────── */
.step-item { position: relative; padding-left: 3.5rem; }
.step-item::before {
    content: '';
    position: absolute; left: 1.25rem; top: 2.75rem; bottom: -1.75rem;
    width: 2px; background: linear-gradient(180deg, rgba(14,133,165,0.35), rgba(0,172,0,0.2));
}
.step-item:last-child::before { display: none; }
.step-number {
    position: absolute; left: 0; top: 0;
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--cdhq-aqua), var(--cdhq-green));
    box-shadow: 0 10px 22px -12px rgba(14,133,165,0.9);
}

/* ─── Contenido legal / texto largo ───────────────────────────────────────── */
.legal-body h2 { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin-top: 2.25rem; margin-bottom: 0.75rem; }
.legal-body h3 { font-size: 1rem; font-weight: 600; color: #334155; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.legal-body p { color: #475569; line-height: 1.75; margin-bottom: 0.9rem; }
.legal-body ul { list-style: disc; padding-left: 1.5rem; color: #475569; line-height: 1.75; margin-bottom: 0.9rem; }
.legal-body li { margin-bottom: 0.35rem; }
.legal-body strong { color: #1e293b; }