/* ══════════════════════════════════════════════════════════════
   AMC Veterinaria – Servicios  |  Frontend CSS
   ══════════════════════════════════════════════════════════════ */

/* ── Custom properties ─────────────────────────────────────── */
.amc-wrap {
    --amc-teal:      #0D7D6B;
    --amc-teal-dk:   #095c4e;
    --amc-teal-lt:   #e8f5f2;
    --amc-teal-mid:  #c3e8e1;
    --amc-white:     #ffffff;
    --amc-gray-50:   #f8fafb;
    --amc-gray-100:  #f0f4f5;
    --amc-gray-200:  #e2eaeb;
    --amc-gray-400:  #9ab3b1;
    --amc-gray-600:  #4a6b68;
    --amc-gray-800:  #1e3634;
    --amc-wa:        #0D7D6B;
    --amc-wa-dk:     #095c4e;
    --amc-radius:    16px;
    --amc-radius-sm: 10px;
    --amc-shadow:    0 4px 24px rgba(13,125,107,.10);
    --amc-shadow-lg: 0 12px 48px rgba(13,125,107,.18);
    --amc-trans:     .25s cubic-bezier(.4,0,.2,1);
    color: var(--amc-gray-800);
}

/* ── Grid ──────────────────────────────────────────────────── */
.amc-grid {
    display: grid;
    gap: 24px;
    padding: 0;
    list-style: none;
}
.amc-cols-3 { grid-template-columns: repeat(3, 1fr); }
.amc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.amc-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .amc-cols-3, .amc-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .amc-cols-3, .amc-cols-4, .amc-cols-2 { grid-template-columns: 1fr; }
    .amc-grid { gap: 16px; }
}

/* ── Card ──────────────────────────────────────────────────── */
.amc-card {
    background: var(--amc-white);
    border-radius: var(--amc-radius);
    /* SIN overflow:hidden — permite que el icon-badge sobresalga */
    box-shadow: var(--amc-shadow);
    display: flex;
    flex-direction: column;
    transition: transform var(--amc-trans), box-shadow var(--amc-trans);
    position: relative;
}
.amc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--amc-shadow-lg);
}

/* image wrapper — overflow:hidden solo aquí para recortar la foto */
.amc-card__img-wrap {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: var(--amc-teal-lt);
    border-radius: var(--amc-radius) var(--amc-radius) 0 0;
}
.amc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.amc-card:hover .amc-card__img { transform: scale(1.06); }

/* numero badge */
.amc-card__num {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--amc-teal) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}

/* icon badge — forzar color teal contra Elementor */
.amc-card__icon-badge {
    position: absolute;
    bottom: -20px;
    left: 18px;
    width: 44px;
    height: 44px;
    background: #ffffff !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(13,125,107,.25);
    border: 2px solid #c3e8e1;
    z-index: 2;
}
/* forzar color del SVG dentro del badge sin importar herencia Elementor */
.amc-card__icon-badge svg,
.amc-card__icon-badge svg * {
    stroke: #0D7D6B !important;
    color: #0D7D6B !important;
    fill: none !important;
}
/* excepción: ícono WhatsApp usa fill */
.amc-card__icon-badge svg[data-fill] {
    fill: #0D7D6B !important;
    stroke: none !important;
}

/* body */
.amc-card__body {
    padding: 32px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.amc-card__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--amc-gray-800);
    margin: 0 0 8px;
    line-height: 1.3;
}
.amc-card__desc {
    font-size: 13.5px;
    color: var(--amc-gray-600);
    line-height: 1.6;
    margin: 0 0 18px;
    flex: 1;
}

/* CTA button */
.amc-card__cta {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 9px 18px;
    border-radius: 50px;
    transition: background var(--amc-trans), color var(--amc-trans), transform .18s;
    align-self: flex-start;
    cursor: pointer;
    border: none;
    outline: none;
    box-sizing: border-box;
}
.amc-cta--modal {
    color: #0D7D6B !important;
    background: #e8f5f2 !important;
    border: 1.5px solid #c3e8e1 !important;
}
.amc-cta--modal:hover {
    background: #0D7D6B !important;
    color: #fff !important;
    transform: translateX(3px);
}
.amc-cta--wa {
    background: #0D7D6B !important;
    color: #fff !important;
}
.amc-cta--wa:hover {
    background: #095c4e !important;
    color: #fff !important;
    transform: translateY(-2px);
}
.amc-card__cta svg { flex-shrink: 0; }
/* ícono WA dentro del botón */
.amc-cta--wa svg,
.amc-cta--wa svg * { fill: #fff !important; stroke: none !important; }
/* flecha dentro del botón modal */
.amc-cta--modal svg,
.amc-cta--modal svg * { stroke: currentColor !important; fill: none !important; }
.amc-cta--modal:hover svg,
.amc-cta--modal:hover svg * { stroke: #fff !important; }

/* ── Modal — fuera del flujo del card ─────────────────────── */
/* Los modales se renderizan FUERA del .amc-grid,
   por eso no hay problema de overflow. Pero Elementor
   puede aplicar estilos globales; los sobreescribimos. */
.amc-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 0 !important;
}
.amc-modal[hidden] { display: none !important; }

.amc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,40,35,.60);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.amc-modal__box {
    position: relative;
    background: #ffffff !important;
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(13,125,107,.25);
    padding: 32px;
    animation: amc-slide-up .3s cubic-bezier(.4,0,.2,1);
    color: #1e3634;
}

@keyframes amc-slide-up {
    from { opacity: 0; transform: translateY(28px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Botón cerrar — forzado contra Elementor ─────────────── */
.amc-modal__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f0f4f5 !important;
    background-color: #f0f4f5 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: background .2s, color .2s !important;
    z-index: 10;
    line-height: 1 !important;
    min-height: unset !important;
    min-width: unset !important;
}
.amc-modal__close:hover {
    background: #0D7D6B !important;
    background-color: #0D7D6B !important;
}
/* forzar color de la X svg */
.amc-modal__close svg line {
    stroke: #4a6b68 !important;
}
.amc-modal__close:hover svg line {
    stroke: #ffffff !important;
}

/* modal header */
.amc-modal__header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-right: 44px;
}
.amc-modal__icon {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    background: #e8f5f2;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #c3e8e1;
}
.amc-modal__icon svg,
.amc-modal__icon svg * {
    stroke: #0D7D6B !important;
    fill: none !important;
}
.amc-modal__num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #0D7D6B;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.amc-modal__title {
    font-size: 20px;
    font-weight: 800;
    color: #1e3634;
    margin: 0 0 6px;
    line-height: 1.25;
}
.amc-modal__desc {
    font-size: 13.5px;
    color: #4a6b68;
    margin: 0;
    line-height: 1.55;
}

/* subservices list */
.amc-modal__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.amc-modal__item {
    display: flex;
    gap: 12px;
    background: #f8fafb;
    border: 1px solid #e2eaeb;
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color .25s, background .25s;
    list-style: none !important;
}
.amc-modal__item:hover {
    border-color: #c3e8e1;
    background: #e8f5f2;
}
.amc-modal__check {
    flex-shrink: 0;
    margin-top: 1px;
}
.amc-modal__check svg,
.amc-modal__check svg * {
    stroke: #0D7D6B !important;
    fill: none !important;
}
.amc-modal__item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e3634;
    margin-bottom: 3px;
}
.amc-modal__item p {
    font-size: 12.5px;
    color: #4a6b68;
    margin: 0;
    line-height: 1.5;
}

/* modal WhatsApp button */
.amc-modal__wa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    width: 100%;
    padding: 14px;
    background: #0D7D6B !important;
    background-color: #0D7D6B !important;
    color: #fff !important;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .25s, transform .18s;
    box-sizing: border-box;
}
.amc-modal__wa:hover {
    background: #095c4e !important;
    background-color: #095c4e !important;
    color: #fff !important;
    transform: translateY(-2px);
}
.amc-modal__wa svg { fill: #fff !important; flex-shrink: 0; }

/* scrollbar modal */
.amc-modal__box::-webkit-scrollbar { width: 5px; }
.amc-modal__box::-webkit-scrollbar-track { background: transparent; }
.amc-modal__box::-webkit-scrollbar-thumb { background: #c3e8e1; border-radius: 3px; }

/* ── Accesibilidad ─────────────────────────────────────────── */
.amc-card__cta:focus-visible,
.amc-modal__close:focus-visible,
.amc-modal__wa:focus-visible {
    outline: 3px solid #0D7D6B !important;
    outline-offset: 3px;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .amc-card,
    .amc-card__img,
    .amc-card__cta,
    .amc-modal__box { transition: none !important; animation: none !important; }
}