/* serv.css — solo lo único de Servicios. Variables/botones/cartel → global.css */

body { background:var(--gris); }
.contenedorImg { max-width:1100px; margin:0 auto; padding:64px 24px 80px; }

.header-tag,.section-tag-inline { display:inline-block; background:rgba(12,186,225,.18); color:var(--cyan); border:1px solid rgba(12,186,225,.40); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; padding:4px 14px; border-radius:var(--radius-pill); margin-bottom:14px; font-family:'DM Sans',sans-serif; }
.section-tag-inline { display:block; border:none; background:none; padding:0; border-radius:0; }

.service { background:#fff; border:1.5px solid transparent; box-shadow:var(--sombra); border-radius:var(--radius-lg); display:flex; align-items:stretch; margin-bottom:28px; overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s; }
.service:hover { transform:translateY(-5px); box-shadow:var(--sombra-hover); border-color:var(--cyan); }
.service img { width:340px; min-width:340px; height:260px; object-fit:cover; flex-shrink:0; display:block; }
.service > div { flex:1; padding:36px 32px; display:flex; flex-direction:column; justify-content:center; }
.service > div::before { content:'Servicio'; display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--cyan); margin-bottom:10px; font-family:'DM Sans',sans-serif; }
.service h2 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(1.4rem,2.5vw,1.9rem); font-weight:800; color:var(--azul); margin-bottom:14px; line-height:1.15; }
.service p  { color:var(--muted); font-size:.95rem; line-height:1.7; margin:0; }
.service ul { list-style:none; padding:0; margin:12px 0 0; }
.service li { position:relative; padding-left:20px; margin-bottom:8px; color:var(--muted); font-size:.9rem; line-height:1.5; }
.service li::before { content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--cyan); }
.service:nth-child(even) { flex-direction:row-reverse; }

.service[style*="flex-direction:column"],.service[style*="flex-direction: column"] { flex-direction:column !important; background:var(--gris) !important; box-shadow:none !important; border:none !important; border-radius:0 !important; padding:0 !important; margin:56px -24px !important; width:calc(100% + 48px) !important; transform:none !important; }
.service[style*="flex-direction:column"] > div,.service[style*="flex-direction: column"] > div { max-width:1100px; margin:0 auto; padding:64px 24px !important; width:100%; }
.service[style*="flex-direction:column"] > div::before,.service[style*="flex-direction: column"] > div::before { display:none; }
.service[style*="flex-direction:column"] h2,.service[style*="flex-direction: column"] h2 { font-family:'Barlow Condensed',sans-serif !important; font-size:clamp(1.6rem,3vw,2.2rem) !important; font-weight:800 !important; color:var(--azul) !important; text-align:center; margin-bottom:12px !important; }
.service[style*="flex-direction:column"] > div > p,.service[style*="flex-direction: column"] > div > p { text-align:center; color:var(--muted) !important; font-size:1rem !important; max-width:680px; margin:0 auto 40px !important; line-height:1.7; }

.proceso-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:100%; margin:0 auto; }
.proceso-card { background:#fff; border-radius:var(--radius-lg); padding:28px 20px 24px; box-shadow:var(--sombra); border:1.5px solid transparent; transition:transform .25s,box-shadow .25s,border-color .25s; position:relative; }
.proceso-card:hover { transform:translateY(-5px); box-shadow:var(--sombra-hover); border-color:var(--cyan); }
.proceso-numero { width:44px; height:44px; background:var(--cyan); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:800; margin:0 0 16px; box-shadow:0 4px 14px rgba(12,186,225,.35); }
.proceso-card h3 { font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; color:var(--azul); margin-bottom:10px; line-height:1.25; }
.proceso-card p  { color:var(--muted); font-size:.85rem; line-height:1.6; margin:0 0 8px; }
.proceso-card ul { list-style:none; padding:0; margin:8px 0 0; }
.proceso-card ul li { position:relative; padding-left:16px; margin-bottom:6px; color:var(--muted); font-size:.82rem; }
.proceso-card ul li::before { content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--cyan); }

.cta-wsp-wrapper { text-align:center; margin:48px 0 8px; }
.btn-wsp { display:inline-flex; align-items:center; gap:10px; background:#25d366; color:#fff; border-radius:var(--radius-pill); padding:13px 36px; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1rem; text-decoration:none; transition:all .2s; box-shadow:0 4px 18px rgba(37,211,102,.30); }
.btn-wsp:hover { background:#128c7e; color:#fff; transform:translateY(-2px); }
.btn-wsp i { font-size:1.2rem; }

.gallery { margin-top:64px; padding-top:64px; border-top:.5px solid #e8edf3; }
.gallery h2 { font-family:'Barlow Condensed',sans-serif; font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--azul); text-align:center; margin-bottom:36px; }
.gallery h2::before { content:'Portfolio'; display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--cyan); margin-bottom:10px; font-family:'DM Sans',sans-serif; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.gallery-grid img { width:100%; height:240px; object-fit:cover; border-radius:var(--radius-lg); border:1.5px solid transparent; transition:transform .3s,border-color .3s,box-shadow .3s; display:block; }
.gallery-grid img:hover { transform:scale(1.03); border-color:var(--cyan); box-shadow:var(--sombra-hover); }

@media (max-width:1024px) { .proceso-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px) {
    .service { flex-direction:column !important; }
    .service img { width:100%; min-width:unset; height:220px; }
    .service:nth-child(even) { flex-direction:column !important; }
    .proceso-grid { grid-template-columns:repeat(2,1fr); }
    .service[style*="flex-direction:column"],.service[style*="flex-direction: column"] { margin:40px -20px !important; width:calc(100% + 40px) !important; }
}
@media (max-width:480px) { .proceso-grid { grid-template-columns:1fr; } }