/* ===== Shared design system for service landing pages & case studies ===== */
:root{--pg-red:#E02020;--pg-bg:#0b0b0c;--pg-panel:#111;--pg-panel-2:#161617;--pg-border:#1e1e1e;--pg-text:#f4f4f5;--pg-muted:#8c8c8c}

/* Nav — reuses the original .div-block-10 / .cf-navigation-2-link markup, only "Servicios" gets a dropdown */
.cf-navigation-2-link:hover{color:#E02020!important}

.pg-svc-drop{position:relative;display:inline-flex}
.pg-svc-trigger{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.pg-svc-trigger::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.pg-svc-drop.open .pg-svc-trigger::after{transform:rotate(225deg);margin-top:2px}
.pg-svc-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:590}
.pg-svc-drop.open .pg-svc-backdrop{display:block}
.pg-svc-menu{display:none;z-index:600}
.pg-svc-drop.open .pg-svc-menu{display:block}
.pg-svc-close{display:none}
.pg-svc-menu-inner{background:linear-gradient(160deg,#141414,#0d0d0d);border:1px solid #222;border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.6);position:relative}
.pg-svc-menu-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E02020;margin-bottom:12px;padding:0 6px}
.pg-svc-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pg-svc-menu a{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:12px;text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s}
.pg-svc-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:rgba(224,32,32,.12);border:1px solid rgba(224,32,32,.3);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#E02020}
.pg-svc-menu a strong{display:block;color:#fff;font-size:14px;font-weight:700;margin-bottom:2px}
.pg-svc-menu a span span{display:block;color:#888;font-size:12px;font-weight:400;line-height:1.4}
.pg-svc-menu a:hover{background:rgba(224,32,32,.08);border-color:rgba(224,32,32,.3)}

/* Desktop: menu drops right below the trigger */
@media(min-width:640px){
  .pg-svc-backdrop{display:none!important}
  .pg-svc-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;min-width:420px}
  .pg-svc-menu::before{content:'';position:absolute;top:0;left:0;right:0;height:16px}
  .pg-svc-drop.open .pg-svc-menu,.pg-svc-drop:hover .pg-svc-menu{display:block}
  .pg-svc-drop:hover .pg-svc-trigger::after{transform:rotate(225deg);margin-top:2px}
}

/* Mobile: menu opens as a centered modal card with a close button */
@media(max-width:639px){
  .pg-svc-menu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100vw - 48px);max-width:360px}
  .pg-svc-menu-grid{grid-template-columns:1fr}
  .pg-svc-close{display:flex;position:absolute;top:10px;right:10px;width:30px;height:30px;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:none;border-radius:50%;color:#fff;font-size:14px;cursor:pointer}
}

/* Breadcrumb / eyebrow */
.pg-eyebrow{display:inline-block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#888;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:18px}

/* Hero */
.pg-hero{padding:64px 20px 40px;text-align:center;max-width:900px;margin:0 auto}
.pg-hero h1{font-size:clamp(30px,5.5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:#fff;margin:0 0 20px}
.pg-hero h1 .red{color:var(--pg-red)}
.pg-hero p.lead{font-size:17px;color:#aaa;line-height:1.6;max-width:640px;margin:0 auto 30px}
@media(min-width:768px){.pg-hero p.lead{font-size:19px}}
.pg-hero-ctas{display:flex;flex-direction:column;align-items:center;gap:14px}
.pg-check-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px}
.pg-check-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#ccc}
.pg-check-item svg{flex:0 0 auto}

/* Generic section */
.pg-section{max-width:1100px;margin:0 auto;padding:70px 20px}
.pg-section.tight{padding-top:0}
.pg-section-head{text-align:center;max-width:640px;margin:0 auto 40px}
.pg-section-head h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#fff;margin:0 0 12px}
.pg-section-head p{font-size:16px;color:#8f8f8f;line-height:1.65;margin:0}
.pg-section-head h2 .red{color:var(--pg-red)}

/* Alternating full-bleed band, breaks up the flat repeated-card rhythm */
.pg-band{background:linear-gradient(180deg,#0e0e0f,#0b0b0c);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:6px 0}
.pg-band .pg-section{padding-top:64px;padding-bottom:64px}

/* Card grid (services included / benefits) */
.pg-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.pg-grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.pg-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.pg-card{background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:16px;padding:24px;position:relative;overflow:hidden}
.pg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--pg-red),transparent);opacity:0;transition:opacity .3s}
.pg-card:hover::before{opacity:1}
.pg-card .ic{width:42px;height:42px;border-radius:11px;background:rgba(224,32,32,.12);border:1px solid rgba(224,32,32,.25);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.pg-card h3{font-size:17px;font-weight:700;color:#fff;margin:0 0 8px}
.pg-card p{font-size:15px;color:#8f8f8f;line-height:1.65;margin:0}

/* Process steps — vertical timeline instead of a plain numbered list */
.pg-steps{position:relative;display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto}
.pg-steps::before{content:'';position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(224,32,32,.5),rgba(255,255,255,.08))}
.pg-step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:20px;padding:0 0 34px}
.pg-step:last-child{padding-bottom:0}
.pg-step-n{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:#141414;border:1px solid rgba(224,32,32,.4);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--pg-red);font-size:15px}
.pg-step h3{font-size:16px;font-weight:700;color:#fff;margin:6px 0 6px}
.pg-step p{font-size:15px;color:#8f8f8f;line-height:1.65;margin:0}

/* Checklist */
.pg-fl{display:flex;flex-direction:column;gap:9px}
.pg-fi{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:#ccc;line-height:1.5}
.pg-fic{flex-shrink:0;width:15px;height:15px;margin-top:2px;display:inline-block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23E02020' opacity='.15'/%3E%3Cpath d='M5 8l2 2 4-4' stroke='%23E02020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}

/* Highlighted "core" box (legacy, kept for compatibility) */
.pg-core{background:rgba(224,32,32,.06);border:1px solid rgba(224,32,32,.18);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.pg-core span{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-red);margin-bottom:6px;display:block}
.pg-core p{font-size:14px;color:#ccc;line-height:1.6;margin:0}

/* "Núcleo del servicio" intro panel — one visual block instead of two stacked boxes */
.pg-intro{max-width:980px;margin:0 auto 20px;border-radius:24px;padding:34px 28px;background:radial-gradient(circle at 12% 15%,rgba(224,32,32,.18),transparent 55%),linear-gradient(160deg,#141414,#0d0d0d);border:1px solid rgba(224,32,32,.22);position:relative;overflow:hidden}
.pg-intro::after{content:'"';position:absolute;top:-70px;right:16px;font-size:220px;font-weight:800;color:rgba(224,32,32,.07);font-family:Georgia,serif;line-height:1;pointer-events:none}
.pg-intro-badge{display:inline-block;background:var(--pg-red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:20px}
.pg-intro-grid{display:grid;grid-template-columns:1fr;gap:18px;position:relative;z-index:1}
@media(min-width:768px){.pg-intro-grid{grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}}
.pg-intro-statement{font-size:22px;font-weight:800;color:#fff;line-height:1.35;margin:0}
@media(min-width:768px){.pg-intro-statement{font-size:25px}}
.pg-intro-text{font-size:15px;color:#9a9a9a;line-height:1.7;margin:0}
@media(min-width:768px){.pg-intro-text{font-size:16px;padding-left:26px;border-left:1px solid rgba(255,255,255,.12)}}

/* CTA band */
.pg-cta-band{max-width:900px;margin:20px auto 90px;padding:40px 28px;background:linear-gradient(160deg,#141414,#0d0d0d);border:1px solid rgba(224,32,32,.2);border-radius:22px;text-align:center}
.pg-cta-band h2{font-size:clamp(22px,3vw,30px);font-weight:800;color:#fff;margin:0 0 12px}
.pg-cta-band p{font-size:14px;color:#999;margin:0 0 22px}
@media(min-width:900px){.pg-cta-band{margin-top:60px;margin-bottom:130px}}

/* Cross-links to other services — slim row instead of another card grid */
.pg-related{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08)}
.pg-related a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 6px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);color:#eee;transition:opacity .15s}
.pg-related a:hover{opacity:.7}
.pg-related a .t{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700}
.pg-related a .t .ic{font-size:18px}
.pg-related a .d{font-size:14px;color:#8f8f8f;display:none}
.pg-related a .arrow{color:var(--pg-red);font-weight:700;flex:0 0 auto}
@media(min-width:640px){.pg-related a .d{display:block}}

/* Button (self-contained, matches site's pill CTA) */
.pg-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#000;font-weight:700;font-size:14px;padding:15px 26px;border-radius:999px;text-decoration:none;transition:transform .15s}
.pg-btn:hover{transform:scale(1.03)}

/* FAQ accordion (reused pattern) */
.pg-faq-item{background:#111;border:1px solid #1e1e1e;border-radius:14px;margin-bottom:10px;overflow:hidden}
.pg-faq-item.open{border-color:rgba(224,32,32,.35)}
.pg-faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;cursor:pointer;font-size:15px;font-weight:600;color:#f0f0f0}
.pg-faq-plus{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);position:relative;transition:transform .25s,background .25s}
.pg-faq-plus::before,.pg-faq-plus::after{content:'';position:absolute;background:#fff;top:50%;left:50%;transform:translate(-50%,-50%)}
.pg-faq-plus::before{width:10px;height:1.6px}
.pg-faq-plus::after{width:1.6px;height:10px;transition:opacity .2s}
.pg-faq-item.open .pg-faq-plus{background:var(--pg-red);transform:rotate(180deg)}
.pg-faq-item.open .pg-faq-plus::after{opacity:0}
.pg-faq-a-wrap{max-height:0;overflow:hidden;transition:max-height .3s ease}
.pg-faq-a{padding:0 20px 18px;font-size:15px;line-height:1.7;color:#9a9a9a}

/* Case studies grid */
.pg-cs-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.pg-cs-filter{background:#111;border:1px solid #1e1e1e;color:#aaa;font-size:12px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .15s}
.pg-cs-filter.active,.pg-cs-filter:hover{background:var(--pg-red);border-color:var(--pg-red);color:#fff}
.pg-cs-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.pg-cs-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.pg-cs-grid{grid-template-columns:repeat(3,1fr)}}
.pg-cs-card{background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:18px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.pg-cs-card:hover{border-color:rgba(224,32,32,.35);transform:translateY(-2px)}
.pg-cs-card img{width:100%;height:190px;object-fit:cover;display:block;background:#000}
.pg-cs-card .b{padding:18px 20px 22px}
.pg-cs-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pg-cs-tag{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ddd;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:3px 8px;border-radius:5px}
.pg-cs-card h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 4px;line-height:1.3}
.pg-cs-card .metric{color:var(--pg-red);font-weight:800}
.pg-cs-card p{font-size:13px;color:#888;margin:0}

/* Section divider spacing helpers */
.pg-mt-lg{margin-top:80px}
.pg-mb-lg{margin-bottom:80px}

body.pg-body{background:#0b0b0c}