/* ============================================================
   PILAR.CSS — Plantilla de página pilar (hub de servicios)
   Clínica Ibiza theme
   Solo incluye clases específicas del pilar.
   Reutiliza: hero-servicio*, hero-badge*, trust-bar*, section*,
              qa-list*, team-*, gr-*, ubicacion-*, cta-final*, btn*
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO PILAR — acciones (reemplaza hero-cta-block)
   ------------------------------------------------------------ */
.hero-pilar-actions {
    display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
    margin: 8px auto 0;
}
.hero-pilar-actions .btn {
    padding: 14px 28px; font-size: 14px;
}
.hero-servicio--photo .hero-pilar-actions .btn-accent {
    background: var(--hoja, #5BB8C4); color: var(--navy, #0C1B2A);
}
.hero-servicio--photo .hero-pilar-actions .btn-accent:hover {
    background: #4DA8B4; box-shadow: 0 8px 24px rgba(91,184,196,0.35);
}
.hero-servicio--photo .hero-pilar-actions .btn-outline {
    color: #fff; border-color: rgba(255,255,255,0.4);
}
.hero-servicio--photo .hero-pilar-actions .btn-outline:hover {
    background: rgba(255,255,255,0.1); border-color: #fff;
}

/* ------------------------------------------------------------
   2. GRID SERVICIOS HIJOS — corazón del pilar
   Reutiliza .service-card de servicio.css pero en grid de 3
   ------------------------------------------------------------ */
.services-grid-big {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.services-grid-big .service-card,
.pillars-related .service-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius, 16px); overflow: hidden;
    display: flex; flex-direction: column;
    transition: var(--transition);
    text-decoration: none; color: inherit;
    padding: 0;
}
.services-grid-big .service-card:hover,
.pillars-related .service-card:hover {
    border-color: var(--hoja, #5BB8C4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(91,184,196,0.14);
}
.services-grid-big .service-card__img-wrap,
.pillars-related .service-card__img-wrap {
    aspect-ratio: 4/3; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #dde6eb 0%, #c8d6db 100%);
}
/* Variantes de gradiente pastel — rotación por índice */
.service-card__img-wrap--v0 { background: linear-gradient(135deg, #e8d5e2 0%, #d4b5cb 100%) !important; }
.service-card__img-wrap--v1 { background: linear-gradient(135deg, #d5e3ed 0%, #b5cedd 100%) !important; }
.service-card__img-wrap--v2 { background: linear-gradient(135deg, #d9e8d5 0%, #bbceb5 100%) !important; }
.service-card__img-wrap--v3 { background: linear-gradient(135deg, #ddd5ed 0%, #c5b5dd 100%) !important; }
.service-card__img-wrap--v4 { background: linear-gradient(135deg, #dde6eb 0%, #c8d6db 100%) !important; }
.service-card__img-wrap--v5 { background: linear-gradient(135deg, #e2e0d5 0%, #cbc8b5 100%) !important; }

.services-grid-big .service-card__img,
.pillars-related .service-card__img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    aspect-ratio: auto;
}
.services-grid-big .service-card:hover .service-card__img,
.pillars-related .service-card:hover .service-card__img {
    transform: scale(1.05);
}
.services-grid-big .service-card__tag,
.pillars-related .service-card__tag {
    position: absolute; top: 14px; left: 14px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 5px 10px; border-radius: 50px;
    font-size: 10px; font-weight: 700; color: var(--accent);
    letter-spacing: 1px; text-transform: uppercase;
    z-index: 2;
}
/* Icono placeholder (cuando no hay featured image) */
.service-card__icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.service-card__icon svg {
    width: 64px; height: 64px;
    color: rgba(255,255,255,0.85);
    stroke-width: 1.3;
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.service-card:hover .service-card__icon svg {
    transform: scale(1.06);
}
.services-grid-big .service-card__body,
.pillars-related .service-card__body {
    padding: 22px 24px 24px; flex: 1;
    display: flex; flex-direction: column;
}
.services-grid-big .service-card__title,
.pillars-related .service-card__title {
    font-size: 19px; font-weight: 800; color: var(--text-primary);
    margin-bottom: 8px; letter-spacing: -0.2px; line-height: 1.25;
}
.services-grid-big .service-card__desc,
.pillars-related .service-card__desc {
    font-size: 14px; line-height: 1.55; color: var(--text-secondary);
    margin-bottom: 18px; flex: 1;
}
.services-grid-big .service-card__link,
.pillars-related .service-card__link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--accent);
    margin-top: auto;
}
.services-grid-big .service-card__link svg,
.pillars-related .service-card__link svg {
    width: 14px; height: 14px; transition: transform .2s;
}
.services-grid-big .service-card:hover .service-card__link svg,
.pillars-related .service-card:hover .service-card__link svg {
    transform: translateX(4px);
}

.services-more {
    text-align: center; margin-top: 40px;
}

/* ------------------------------------------------------------
   3. CONCERNS — pills "¿Qué quieres mejorar?"
   ------------------------------------------------------------ */
.pilar-concerns-section {
    background: linear-gradient(180deg, #F0F7FF 0%, #fff 100%);
    border-top: none !important;
}
.pilar-concerns-section + .section { border-top: none; }

.concerns {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    max-width: 960px; margin: 0 auto;
}
.concerns a, .concerns span.concerns__item {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--border);
    padding: 12px 22px; border-radius: 50px;
    font-size: 14px; font-weight: 500; color: var(--accent);
    transition: var(--transition); text-decoration: none;
}
.concerns a:hover {
    background: var(--accent); color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(29,50,80,0.18);
}
.concerns svg {
    width: 16px; height: 16px; flex-shrink: 0;
}
.concerns a, .concerns span.concerns__item { gap: 10px; }

/* ------------------------------------------------------------
   4. ENTRY CONTENT — centrado en pilar (sin sidebar)
   ------------------------------------------------------------ */
.pilar-editorial .entry-content {
    max-width: 820px; margin: 0 auto;
}

/* ------------------------------------------------------------
   PILAR TABS — a ancho completo (sin sidebar)
   ------------------------------------------------------------ */
.pilar-tabs-wrap {
    max-width: 900px; margin: 0 auto;
}
.pilar-tabs-wrap .content-tabs {
    margin-bottom: 28px;
}
.pilar-tabs-wrap .content-panel {
    display: none;
}
.pilar-tabs-wrap .content-panel.active {
    display: block;
}
.pilar-tabs-wrap .content-panel .entry-content {
    max-width: none;
}

/* ------------------------------------------------------------
   5. OTROS PILARES — grid 3 cols si ≤3 tarjetas; carrusel si ≥4
   ------------------------------------------------------------ */
.pillars-related--grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* Carrusel: track con scroll-snap horizontal, flechas a los lados */
.pillars-related--carousel {
    position: relative;
    display: flex; align-items: center; gap: 12px;
}
.pillars-related--carousel .pillars-related__track {
    display: flex; gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 auto;
    padding: 4px 4px 12px;
}
.pillars-related--carousel .pillars-related__track::-webkit-scrollbar { display: none; }
.pillars-related--carousel .service-card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
}
.pillars-related__btn {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid #1D3250;
    background: #fff;
    color: #1D3250;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease, opacity .2s ease, transform .2s ease;
    box-shadow: 0 2px 8px rgba(29,50,80,0.08);
}
.pillars-related__btn:hover:not(:disabled) {
    background: #1D3250; color: #fff; transform: translateY(-1px);
}
.pillars-related__btn:disabled {
    opacity: .35; cursor: default;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    .services-grid-big { grid-template-columns: repeat(2, 1fr); }
    .pillars-related--grid { grid-template-columns: repeat(2, 1fr); }
    .pillars-related--carousel .service-card { flex-basis: calc((100% - 24px) / 2); }
    .concerns { gap: 8px; }
    .concerns a, .concerns span.concerns__item { padding: 10px 16px; font-size: 13px; }
}
@media (max-width: 600px) {
    .services-grid-big { grid-template-columns: 1fr; }
    .pillars-related--grid { grid-template-columns: 1fr; }
    .pillars-related--carousel .service-card { flex-basis: 85%; }
    .pillars-related__btn { display: none; } /* En móvil sólo swipe nativo */
    .pillars-related--carousel { gap: 0; }
    .hero-pilar-actions { flex-direction: column; width: 100%; }
    .hero-pilar-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   ACORDEÓN CONTENIDO (mismo estilo que page-transicion)
   ============================================================ */
.acordeon-contenido {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 28px;
}
.acordeon-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(29,50,80,0.05);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.acordeon-item.is-open {
    box-shadow: 0 8px 28px rgba(29,50,80,0.10);
}
.acordeon-item__header {
    width: 100%;
    background: transparent;
    border: none;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background-color .25s ease, border-color .25s ease;
}
.acordeon-item.is-open .acordeon-item__header {
    background: var(--bg-light, #EFF7FA);
    border-bottom: 1px solid rgba(29,50,80,0.08);
}
.acordeon-item__header:focus-visible {
    outline: 2px solid var(--hoja, #5BB8C4);
    outline-offset: -2px;
}
.acordeon-item__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent, #1D3250);
    margin: 0;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.acordeon-item,
.acordeon-item *,
.acordeon-item__inner,
.acordeon-item__inner * {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.acordeon-item__chevron {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 50%;
    background: var(--bg-light, #EFF7FA);
    color: var(--accent, #1D3250);
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
    flex-shrink: 0;
}
.acordeon-item.is-open .acordeon-item__chevron {
    transform: rotate(180deg);
    background: var(--accent, #1D3250);
    color: #fff;
}
.acordeon-item__body {
    padding: 20px 26px 24px;
}
.acordeon-item__inner > :first-child { margin-top: 0; }
.acordeon-item__inner > :last-child { margin-bottom: 0; }
.acordeon-item__inner p,
.acordeon-item__inner ul,
.acordeon-item__inner ol,
.acordeon-item__inner li,
.acordeon-item__inner blockquote {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: var(--text-secondary, #5F7A8A) !important;
    font-weight: 400 !important;
}
.acordeon-item__inner ul li,
.acordeon-item__inner ol li {
    color: var(--text-secondary, #5F7A8A) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.acordeon-item__inner h2,
.acordeon-item__inner h3,
.acordeon-item__inner h4 {
    color: var(--accent, #1D3250) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.35 !important;
}
.acordeon-item__inner h2 { font-size: 16px !important; margin: 24px 0 10px !important; padding-top: 0 !important; }
.acordeon-item__inner h2:first-child { margin-top: 0 !important; }
.acordeon-item__inner h3 { font-size: 16px !important; margin: 20px 0 8px !important; }
.acordeon-item__inner h4 { font-size: 15px !important; margin: 16px 0 6px !important; }

@media (max-width: 600px) {
    .acordeon-item__header { padding: 18px 20px; }
    .acordeon-item__title { font-size: 14.5px; }
    .acordeon-item__body { padding: 16px 20px 20px; }
}