/* ============================================================
   servicios.css — vitrina, página de servicio, experiencia,
   proyectos y preguntas frecuentes
   ------------------------------------------------------------
   Componentes: components/services_grid.php, service_page.php,
   experience_band.php, projects_grid.php, faq_list.php y pillars.php
   (versión plana). Tokens: base.css (bloque «Solumed»).
   Mobile primero: una columna a 390 px; la grilla crece en min-width.
   Tarjetas: superficie blanca, radio --r-lg y sombra suave; sin bordes.
   ============================================================ */

/* ==========================================================
   Viñeta con check (reemplaza al punto en listas técnicas)
   ========================================================== */
.list-check { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.list-check > li { position: relative; padding-left: 1.9rem; margin: 0 0 .65rem; line-height: 1.5; }
.list-check > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--r-pill);
    background: var(--sm-primario-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230a7a8c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.4l3 3 6-6.6'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ==========================================================
   Vitrina de servicios
   ----------------------------------------------------------
   1 columna · ≥600: 2 · ≥1000: 3. Toda la tarjeta es el enlace: el <a> del
   nombre se estira con ::after. En /servicios cada categoría lista además
   sus servicios (.svc-card__children), que quedan por encima de ese enlace.
   Hover/foco: sube 4 px, crece la sombra y la flecha avanza.
   El servicio de urgencia va en petróleo con la etiqueta «Urgencias»:
   es el único bloque de contraste fuerte de la grilla.
   ========================================================== */
.svc-section--niebla { background: var(--sm-niebla); }
.svc-section--papel  { background: var(--sm-papel); }
.pillars + .svc-section { padding-top: var(--sm-section-sm); }

.svc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.svc-grid__item { display: flex; min-width: 0; }

.svc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-2);
    color: var(--sm-texto);
    text-decoration: none;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.svc-section--papel .svc-card { background: var(--sm-niebla); box-shadow: none; }
.svc-card:hover,
.svc-card:focus-within { transform: translateY(-4px); box-shadow: var(--sh-3); }
.svc-card__link { color: inherit; text-decoration: none; }
.svc-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc-card__link:focus-visible { outline: none; }
.svc-card__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 3px; }

.svc-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--sp-4);
    border-radius: var(--r-md);
    background: var(--sm-primario-50);
    color: var(--sm-primario);
}
.svc-section--papel .svc-card__icon { background: #fff; }
.svc-card__icon .icon { width: 28px; height: 28px; }

.svc-card__tag {
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    padding: .3rem .7rem;
    border-radius: var(--r-pill);
    background: var(--sm-cian);
    color: var(--sm-profundo);
    font: 700 var(--fs-label)/1.2 var(--sm-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.svc-card__name {
    margin: 0 0 var(--sp-2);
    font: 700 var(--fs-h3)/var(--lh-snug) var(--sm-display);
    letter-spacing: var(--tr-title);
    color: var(--sm-tinta);
    text-wrap: balance;
}
.svc-card__text { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.55; color: var(--sm-gris-texto); }
.svc-card__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 28px;
    margin-top: auto;
    font: 600 var(--fs-sm)/1.2 var(--sm-display);
    color: var(--sm-primario);
}
.svc-card__more .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--dur-2) var(--ease-out); }
.svc-card:hover .svc-card__more .icon,
.svc-card:focus-within .svc-card__more .icon { transform: translateX(4px); }

/* Servicios de la categoría dentro de su tarjeta (/servicios): cada uno enlaza
   a su página. Filas de 44 px para el dedo. */
.svc-card__children {
    position: relative;
    z-index: 1;
    display: grid;
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) 0 0;
    list-style: none;
    border-top: 1px solid var(--sm-linea);
}
.svc-card__children a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 44px;
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--sm-tinta);
    text-decoration: none;
}
.svc-card__children .icon { width: 16px; height: 16px; stroke-width: 2; color: var(--sm-primario); opacity: .55; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.svc-card__children a:hover { color: var(--sm-primario); }
.svc-card__children a:hover .icon { opacity: 1; transform: translateX(3px); }
.svc-card--list .svc-card__text { margin-bottom: var(--sp-4); }

.svc-card--urgent,
.svc-section--papel .svc-card--urgent { background: var(--sm-oscuro); color: var(--sm-blanco-86); box-shadow: var(--sh-2); }
.svc-card--urgent { --focus: #fff; }
.svc-card--urgent .svc-card__icon,
.svc-section--papel .svc-card--urgent .svc-card__icon { background: rgba(255, 255, 255, .1); color: var(--sm-cian); }
.svc-card--urgent .svc-card__name { color: #fff; }
.svc-card--urgent .svc-card__text { color: var(--sm-blanco-72); }
.svc-card--urgent .svc-card__more { color: var(--sm-cian); }
.svc-card--urgent .svc-card__children { border-top-color: var(--sm-linea-clara); }
.svc-card--urgent .svc-card__children a { color: #fff; }
.svc-card--urgent .svc-card__children a:hover,
.svc-card--urgent .svc-card__children .icon { color: var(--sm-cian); }

/* Compacta («Otros servicios»): ícono y nombre en una fila, sin resumen. */
.svc-grid--compact .svc-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
}
.svc-grid--compact .svc-card__icon { width: 44px; height: 44px; margin: 0; }
.svc-grid--compact .svc-card__icon .icon { width: 24px; height: 24px; }
.svc-grid--compact .svc-card__name { flex: 1 1 8rem; margin: 0; font-size: 1.0625rem; }
.svc-grid--compact .svc-card__tag { position: static; order: 3; }
.svc-grid--compact .svc-card__more { display: none; }

.svc-section__more { margin: var(--sp-6) 0 0; }
/* Dos grillas seguidas sobre el mismo fondo («Más servicios de…» y «Otras áreas»). */
.svc-section--papel + .svc-section--papel { padding-top: 0; }

@media (min-width: 600px) {
    .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
    .svc-card { padding: var(--sp-6); }
    .svc-card__tag { top: var(--sp-6); right: var(--sp-6); }
}
@media (min-width: 1000px) {
    .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Íconos de servicio en el menú (ocupan el lugar de la miniatura). */
.site-navbar__thumb,
.site-drawer__thumb { display: grid; place-items: center; }
.site-navbar__thumb { background: var(--sm-primario-50); box-shadow: none; color: var(--sm-primario); }
.site-navbar__thumb .icon { width: 22px; height: 22px; }
.site-drawer__thumb { background: rgba(255, 255, 255, .08); box-shadow: none; color: var(--sm-cian); }
.site-drawer__thumb .icon { width: 22px; height: 22px; }

/* ==========================================================
   Motivos: versión plana (página de servicio)
   ----------------------------------------------------------
   La tarjeta del home va montada sobre el hero; aquí es una sección
   normal con encabezado, sobre niebla.
   ========================================================== */
.pillars--flat { padding: var(--sm-section) 0; }
.pillars--flat .pillars__card { margin-top: 0; border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.js-reveal .pillars--flat .pillars__card { animation: none; }
.js-reveal .pillars--flat .pillar__icon { animation-delay: calc(200ms + var(--i, 0) * var(--stagger)); }

/* ==========================================================
   Hero de página: sin foto y con acciones
   ----------------------------------------------------------
   Sin foto queda el petróleo con una trama técnica de líneas finas
   y un halo turquesa, para que la cabecera no sea un bloque plano.
   ========================================================== */
.page-hero--plain {
    background:
        radial-gradient(60rem 28rem at 88% -10%, rgba(79, 213, 227, .2), transparent 60%),
        linear-gradient(135deg, var(--sm-profundo), var(--sm-oscuro));
}
.page-hero--plain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--sm-linea-clara) 1px, transparent 1px),
        linear-gradient(90deg, var(--sm-linea-clara) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
    opacity: .6;
    pointer-events: none;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.page-hero__actions .btn .icon { width: 20px; height: 20px; }
@media (max-width: 520px) {
    .page-hero__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================
   Página de servicio
   ----------------------------------------------------------
   Intro: texto a la izquierda y tarjeta lateral («Para quién es» +
   acciones) a la derecha; en móvil la tarjeta va debajo del texto.
   «Qué incluye»: tarjetas con check, 1 · 2 · 3 columnas.
   ========================================================== */
.svc-intro { background: var(--sm-papel); }
.svc-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.svc-intro__body { max-width: var(--sm-measure); }
.svc-intro__body p { margin: 0 0 1.1rem; font-size: 1.0625rem; line-height: var(--lh-body); color: var(--sm-texto); }
.svc-intro__body .svc-intro__lead {
    margin-bottom: 1.5rem;
    font: 600 var(--fs-lead)/1.45 var(--sm-display);
    color: var(--sm-tinta);
    text-wrap: pretty;
}

.svc-aside {
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--sm-niebla);
}
.svc-aside__title {
    margin: 0 0 var(--sp-4);
    font: 700 var(--fs-label)/1.3 var(--sm-display);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--sm-primario);
}
.svc-aside__list { margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--sm-texto); }
.svc-aside__actions { display: grid; gap: var(--sp-3); }
.svc-aside__actions .btn { width: 100%; justify-content: center; text-align: center; }
.svc-aside--urgent { background: var(--sm-oscuro); color: var(--sm-blanco-86); --focus: #fff; }
.svc-aside--urgent .svc-aside__title { color: var(--sm-cian); }
.svc-aside--urgent .svc-aside__list { color: var(--sm-blanco-86); }
.svc-aside--urgent .list-check > li::before { background-color: rgba(255, 255, 255, .92); }
.svc-aside--urgent .btn { background: var(--sm-cian); border-color: var(--sm-cian); color: var(--sm-profundo); }
.svc-aside--urgent .btn:hover { background: #fff; border-color: #fff; color: var(--sm-profundo); }
.svc-aside--urgent .btn--outline { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.svc-aside--urgent .btn--outline:hover { background: #fff; border-color: #fff; color: var(--sm-profundo); }

@media (min-width: 900px) {
    .svc-intro__grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--sp-8); }
    .svc-aside { position: sticky; top: calc(var(--sh-h-compact) + var(--sp-5)); padding: var(--sp-6); }
}

.svc-includes { background: var(--sm-niebla); }
.svc-includes + .pillars--flat { padding-top: 0; }
/* En una categoría, la grilla de sus servicios (niebla) va seguida de los motivos. */
.svc-section--niebla + .pillars--flat { padding-top: 0; }
.include-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.include-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--sp-4);
    align-content: start;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-1);
}
.include-card__check {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    background: var(--sm-primario-50);
    color: var(--sm-primario);
}
.include-card__check .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.include-card__title { margin: .3rem 0 .25rem; font: 700 1.0625rem/1.3 var(--sm-display); color: var(--sm-tinta); }
.include-card__text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--sm-gris-texto); }
@media (min-width: 640px)  { .include-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 1040px) { .include-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================
   Experiencia (franja petróleo)
   ----------------------------------------------------------
   Intro a la izquierda y lista de respaldos a la derecha. Es el bloque
   oscuro del home entre «Quiénes somos» y las preguntas.
   ========================================================== */
.xp {
    position: relative;
    padding: var(--sm-section) 0;
    background:
        radial-gradient(50rem 26rem at 100% 0%, rgba(79, 213, 227, .14), transparent 62%),
        var(--sm-profundo);
    color: var(--sm-blanco-86);
    --focus: #fff;
}
.xp__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.xp__text { margin-bottom: 0; }
.xp__cta { margin: var(--sp-5) 0 0; }
.xp__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.xp__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .06);
}
.xp__check {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: rgba(79, 213, 227, .16);
    color: var(--sm-cian);
}
.xp__check .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.xp__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.xp__name { font: 700 1.0625rem/1.3 var(--sm-display); color: #fff; }
.xp__detail { font-size: var(--fs-sm); line-height: 1.45; color: var(--sm-blanco-72); }
@media (min-width: 640px) {
    .xp__inner--list .xp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}
@media (min-width: 960px) {
    .xp__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); }
    .xp__inner--list { grid-template-columns: minmax(0, 1fr); }
    .xp__inner--list .xp__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xp__inner--list .xp__item { grid-template-columns: minmax(0, 1fr); align-items: start; padding: var(--sp-5); }
}
/* Dentro del cuerpo de una página (marcadores [[experiencia]], [[servicios]],
   [[proyectos]]) la sección se separa de la bajada que la precede. */
.page > :is(.xp, .svc-section, .projects) { margin-top: var(--sp-8); }

/* ==========================================================
   Proyectos
   ========================================================== */
.projects { background: var(--sm-papel); }
.project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.project-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--sm-niebla);
}
.project-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.project-card__body { padding: var(--sp-5); }
.project-card__tag {
    margin: 0 0 var(--sp-2);
    font: 700 var(--fs-label)/1.3 var(--sm-display);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--sm-primario);
}
.project-card__title { margin: 0 0 var(--sp-2); font: 700 var(--fs-h3)/var(--lh-snug) var(--sm-display); color: var(--sm-tinta); }
.project-card__client { display: flex; align-items: center; gap: .4rem; margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--sm-gris-texto); }
.project-card__client .icon { width: 16px; height: 16px; color: var(--sm-primario); }
.project-card__text { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--sm-texto); }
@media (min-width: 600px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================
   Preguntas frecuentes
   ----------------------------------------------------------
   Título a la izquierda y acordeón a la derecha desde 900 px.
   Cada pregunta es una tarjeta blanca; objetivo táctil ≥ 56 px.
   ========================================================== */
.faq-section { background: var(--sm-niebla); }
.svc-includes ~ .faq-section,
.service-page .faq-section { background: var(--sm-papel); }
.faq-section__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.faq-section .faq-list { max-width: none; margin: 0; display: grid; gap: var(--sp-3); }
.faq-section .faq-item {
    margin: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: #fff;
    box-shadow: var(--sh-1);
}
.service-page .faq-section .faq-item { background: var(--sm-niebla); box-shadow: none; }
.faq-section .faq-item__question {
    min-height: 56px;
    padding: var(--sp-4) var(--sp-5);
    font: 600 1.0625rem/1.4 var(--sm-display);
    color: var(--sm-tinta);
}
.faq-section .faq-item__answer {
    padding: 0 var(--sp-5) var(--sp-5);
    font-size: 1rem;
    line-height: var(--lh-body);
    color: var(--sm-texto);
}
@media (min-width: 900px) {
    .faq-section__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sp-8); align-items: start; }
    .faq-section__head { position: sticky; top: calc(var(--sh-h-compact) + var(--sp-5)); }
}

/* ==========================================================
   Contacto: botón de WhatsApp de la tarjeta de datos
   ========================================================== */
.contact-info__wa .icon { width: 20px; height: 20px; }

/* Menú de servicios: ancho suficiente para que cada nombre quede en una línea. */
.site-navbar__submenu--services { min-width: 320px; }
.site-navbar__submenu--services .site-navbar__subtext { white-space: nowrap; }