/* ==========================================================================
   LUGARES DE PAGO Y CONSULTAS (includes/puntos-atencion.php)
   Escritorio: 3 columnas (Puquio ocupa 2 filas a la izquierda).
   Tablet: 2 columnas (Puquio arriba a todo el ancho). Móvil: 1 columna.
   Prefijo "eps-atencion" para no afectar estilos globales.
   La animación de entrada usa el [data-reveal] común (css/estilos_servicios.css).
   ========================================================================== */

.eps-atencion,
.eps-atencion *,
.eps-atencion *::before,
.eps-atencion *::after {
    box-sizing: border-box;
}

.eps-atencion {
    --eps-navy: #002855;   /* Azul institucional de títulos */
    --eps-blue: #0072ce;   /* Azul primario institucional */
    --eps-muted: #48658d;  /* Gris azulado para textos */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 6vw, 88px) 24px;
    background: #f6fbff url('../img/PUNTOS_ATENCION/ondas.svg') center / cover no-repeat;
    color: var(--eps-navy);
}

.eps-atencion__inner {
    max-width: 1480px;
    margin: auto;
}

/* --- Encabezado (alineado a la izquierda, sin botón "Encuentra tu punto...") --- */
.eps-atencion__header {
    margin-bottom: 30px;
}

.eps-atencion__eyebrow {
    display: flex;
    align-items: center;
    gap: 17px;
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--eps-blue);
}

.eps-atencion__eyebrow span {
    width: 60px;
    height: 2px;
    background: var(--eps-blue);
}

.eps-atencion h2 {
    margin: 0 0 12px;
    font-size: clamp(30px, 3.6vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: var(--eps-navy);
}

.eps-atencion h2 span {
    color: var(--eps-blue);
}

.eps-atencion__description {
    margin: 0;
    max-width: 890px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.6;
    color: var(--eps-muted);
}

/* --- Grid aprobado --- */
.eps-atencion__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, auto); /* Cada fila mide lo que su contenido: sin franjas vacías */
    gap: 14px;
}

/* --- Tarjetas con foto --- */
.eps-atencion__location {
    position: relative;
    min-width: 0;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 18px;
    color: #ffffff;
    background: var(--eps-card-bg);
    box-shadow: 0 10px 28px rgba(13, 74, 133, 0.13);
    --eps-card-bg: #0a2f5e;
}

/* La foto cubre toda la tarjeta; el degradado azul va solo abajo, donde
   está el texto, para que la imagen se aprecie completa */
.eps-atencion__location::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(10, 47, 94, 0.88) 0%, rgba(10, 47, 94, 0.5) 16%, rgba(10, 47, 94, 0) 30%),
        var(--location-img) center / cover no-repeat;
    transform-origin: center;
    transition: transform 0.5s ease;
}

/* Tarjetas pequeñas: sus fotos son franjas horizontales (368x124), así que la
   zona de foto toma esa misma proporción para mostrarlas completas, sin zoom.
   El degradado va solo en el borde inferior de la foto, donde empieza el texto. */
.eps-atencion__location:not(.eps-atencion__location--main)::before {
    inset: 0 0 auto;
    aspect-ratio: 368 / 185; /* Más alta: la info ocupa poco espacio */
    background:
        linear-gradient(180deg, rgba(10, 47, 94, 0) 0%, rgba(10, 47, 94, 0) 58%, rgba(10, 47, 94, 0.6) 80%, var(--eps-card-bg) 100%),
        var(--location-img) center / cover no-repeat;
    transform-origin: top;
}

.eps-atencion__location:hover::before {
    transform: scale(1.035);
}

.eps-atencion__location--main {
    grid-row: span 2;
}

/* Información compacta: ocupa lo mínimo para que se aprecie el frontis */
.eps-atencion__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Tarjetas pequeñas: el alto lo define su contenido (foto + info compacta) */
.eps-atencion__location:not(.eps-atencion__location--main) {
    min-height: 0;
}

/* Tarjetas pequeñas en 2 filas: foto arriba (mínimo ancho x 155/368) y texto
   abajo. Si la fila es más alta (p. ej. por Mesa de Partes), la foto crece y
   ocupa ese espacio en vez de dejar una franja azul vacía.
   La etiqueta se monta sobre el borde inferior de la foto. */
.eps-atencion__location:not(.eps-atencion__location--main) {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: stretch;        /* La foto llena toda su fila */
    container-type: inline-size; /* 100cqw = ancho de la tarjeta */
}

.eps-atencion__location:not(.eps-atencion__location--main)::before {
    position: relative;
    inset: auto;
    aspect-ratio: auto;
    min-height: calc(100cqw * 225 / 368); /* Foto alta: etiqueta y nombre van sobre su parte baja */
    background-position: center 15%, center 15%; /* El letrero del local queda arriba, despejado */
}

/* Tarjetas pequeñas: misma organización que la Sede Principal, en una sola
   columna: etiqueta, nombre, dirección, teléfono, servicios y botón.
   La etiqueta y el nombre se montan sobre la parte baja de la foto (como en
   Puquio), así la franja azul solo lleva los datos y queda chica. */
.eps-atencion__location:not(.eps-atencion__location--main) .eps-atencion__content {
    gap: 5px;
    margin-top: -62px;
    padding: 0 18px 16px;
}

/* Sombra en etiqueta y nombre para leerse sobre la foto */
.eps-atencion__location:not(.eps-atencion__location--main) .eps-atencion__content > h3 {
    margin: 0 0 3px;
    text-shadow: 0 2px 10px rgba(0, 24, 56, 0.75), 0 1px 3px rgba(0, 24, 56, 0.6);
}

/* En la sede principal el bloque no altera la columna de siempre */
.eps-atencion__location--main .eps-atencion__info {
    display: contents;
}

/* Dirección y teléfono uno debajo del otro */
.eps-atencion__location:not(.eps-atencion__location--main) .eps-atencion__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eps-atencion__location:not(.eps-atencion__location--main) .eps-atencion__detail {
    font-size: 12px;
}

/* Servicios en una línea y el botón debajo, como en Puquio */
.eps-atencion__location:not(.eps-atencion__location--main) .eps-atencion__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    margin-top: 2px;
}

.eps-atencion__location:not(.eps-atencion__location--main) .eps-atencion__services {
    margin: 0;
}

.eps-atencion__location--main .eps-atencion__content {
    padding: clamp(18px, 2.2vw, 28px);
    /* Con un degradado más ligero, la sombra despega el texto de la fachada clara */
    text-shadow: 0 2px 14px rgba(0, 24, 56, 0.6), 0 1px 3px rgba(0, 24, 56, 0.45);
}

/* Botones y etiquetas tienen su propio fondo: sin sombra para que no se vea borroso */
.eps-atencion__location--main .eps-atencion__button,
.eps-atencion__location--main .eps-atencion__tag {
    text-shadow: none;
}

.eps-atencion__tag {
    padding: 5px 9px;
    border-radius: 100px;
    background: #e2f2ff;
    color: #0a4c92;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.eps-atencion__location--main .eps-atencion__tag {
    background: var(--eps-blue);
    color: #ffffff;
}

.eps-atencion__location h3 {
    margin: 2px 0 0;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.12;
    color: #ffffff;
}

.eps-atencion__location--main h3 {
    font-size: clamp(26px, 2.6vw, 36px);
}

.eps-atencion__detail {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.35;
}

.eps-atencion__detail svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    fill: currentColor;
}

.eps-atencion__detail a {
    color: inherit;
    text-decoration: none;
}

.eps-atencion__detail a:hover {
    text-decoration: underline;
}

/* Servicios en una sola línea de texto: "Pagos · Consultas · Orientación" */
.eps-atencion__services {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.eps-atencion__service {
    font-size: 11.5px;
    font-weight: 600;
    color: #cfe6ff;
}

.eps-atencion__service + .eps-atencion__service::before {
    content: "·";
    margin: 0 6px;
}

/* --- Botones --- */
/* El botón se ajusta a su texto (no ocupa todo el ancho de la tarjeta) */
.eps-atencion__button {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: auto;
    min-height: 34px;
    padding: 8px 15px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.eps-atencion__button[href]:hover {
    transform: translateY(-2px);
}

.eps-atencion__button--light {
    background: #ffffff;
    color: #07519f;
}

.eps-atencion__button svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: currentColor;
}

/* Servicios + botón. En la sede principal se apilan como antes;
   en las tarjetas pequeñas van en la misma fila (botón a la derecha) */
.eps-atencion__location--main .eps-atencion__actions {
    display: contents;
}

.eps-atencion__actions {
    display: flex;
    flex-wrap: wrap; /* Si no hay espacio, el botón baja en vez de desbordar */
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    width: 100%;
}

.eps-atencion__actions .eps-atencion__services {
    margin: 0;
}

/* Todas las tarjetas muestran "Ver ubicación" (mismo botón que Puquio);
   el texto corto queda disponible por si se necesita a futuro */
.eps-atencion__button-short {
    display: none;
}

/* Sin URL de Maps confirmada: se ve, pero no simula un enlace */
.eps-atencion__button--disabled {
    border: 1px solid rgba(255, 255, 255, 0.27);
    background: rgba(255, 255, 255, 0.17);
    color: #ecf5ff;
    cursor: default;
}

/* --- Mesa de Partes: tarjeta destacada en azul vivo para que resalte
   tanto como las tarjetas con foto --- */
.eps-atencion__mesa {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 2vw, 28px);
    border: 1px solid #5fb4ff;
    border-radius: 18px;
    background: linear-gradient(135deg, #1a8cff 0%, #0b63e5 55%, #0747b8 100%);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(0, 86, 200, 0.28);
}

.eps-atencion__mesa:hover {
    box-shadow: 0 18px 38px rgba(0, 86, 200, 0.36);
}

/* Ondas claras decorativas sobre el azul */
.eps-atencion__mesa::before,
.eps-atencion__mesa::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -15%;
    width: 130%;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(-8deg);
    pointer-events: none;
}

.eps-atencion__mesa::before { top: -70px; }
.eps-atencion__mesa::after { bottom: -78px; background: rgba(255, 255, 255, 0.08); }

.eps-atencion__mesa-art {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.eps-atencion__mesa-art svg {
    width: 44px;
    height: 44px;
}

.eps-atencion__mesa-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #bfe6ff;
}

.eps-atencion__mesa h3 {
    margin: 7px 0;
    font-size: clamp(22px, 1.9vw, 28px);
    line-height: 1.1;
    color: #ffffff;
}

.eps-atencion__mesa p {
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #e3f1ff;
}

.eps-atencion__mesa .eps-atencion__mesa-email {
    overflow-wrap: anywhere;
    font-weight: 700;
    color: #ffffff;
}

/* Botón blanco sobre el azul para que destaque */
.eps-atencion__button--blue {
    margin-top: 8px;
    background: #ffffff;
    color: #0747b8;
    box-shadow: 0 6px 16px rgba(0, 40, 110, 0.25);
}

.eps-atencion__button--blue:hover {
    background: #e8f4ff;
}

.eps-atencion__defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* --- Responsividad --- */
@media (max-width: 1100px) {
    .eps-atencion__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .eps-atencion__location--main {
        grid-row: auto;
        grid-column: span 2;
        min-height: 470px;
    }
}

@media (max-width: 620px) {
    .eps-atencion {
        padding: 48px 16px;
    }
    .eps-atencion__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .eps-atencion__location {
        min-height: 340px;
    }
    .eps-atencion__location--main {
        grid-column: auto;
        min-height: 480px;
    }
    .eps-atencion__mesa {
        min-height: 0;
    }
    .eps-atencion__content,
    .eps-atencion__location--main .eps-atencion__content {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 18px;
    }
    .eps-atencion__location h3 {
        font-size: 21px;
    }
    .eps-atencion__location--main h3 {
        font-size: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eps-atencion__location::before,
    .eps-atencion__button {
        transition: none;
    }
}