/* Comportamientos base */
html { scroll-behavior: smooth; }

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

header{ background: white; }

h1{ font-size: 30px; }

.w-10 {
    width: 40px;
}

.h-10 {
    height: 36px;
}

/* Variables */
:root{
  --brand:#0f172a;
  --brand-soft:rgba(15,23,42,.08);
  --brand-ring:rgba(15,23,42,.15);
  --glass:rgba(255,255,255,.7);
}
.dark{
  --brand:#e2e8f0;
  --brand-soft:rgba(226,232,240,.10);
  --brand-ring:rgba(226,232,240,.18);
  --glass:rgba(15,23,42,.6);
}

/* Accesibilidad util */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1rem;border-radius:.75rem;font-weight:600;transition:.2s; cursor:pointer}
.btn:focus{outline:2px solid transparent;box-shadow:0 0 0 4px var(--brand-ring)}
.btn-primary{background:#000;color:#fff}
.dark .btn-primary{background:#fff;color:#000}
.btn-outline{border:1px solid #e5e7eb}
.dark .btn-outline{border-color:#334155}
.btn-outline:hover{background:var(--brand-soft)}
.btn-ghost{background:transparent;border:1px solid transparent}
.btn-ghost:hover{background:var(--brand-soft)}

/* Links nav */
.navlink{position:relative}
.navlink::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:#000;transition:.2s}
.dark .navlink::after{background:#fff}
.navlink:hover::after{width:100%}

/* Hero con gradiente sutil */
.hero{
  background: radial-gradient(1200px 500px at 50% -50%, #e5e7eb, transparent),
              radial-gradient(800px 400px at 100% 0%, #e2e8f0, transparent);
}
.dark .hero{
  background: radial-gradient(1200px 500px at 50% -50%, #0b1220, transparent),
              radial-gradient(800px 400px at 100% 0%, #0f172a, transparent);
}

/* KPIs */
.kpi{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:var(--glass);padding:.75rem;border-radius:.75rem;border:1px solid #e5e7eb}
.dark .kpi{border-color:#334155}
.kpi-n{font-weight:800;font-size:1.15rem}

/* Cards y estética */
.card{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.dark .card{background:#0b1220;border-color:#1f2937}
.card-title{font-weight:700;margin-bottom:.35rem}
.icon{font-size:1.4rem;margin-bottom:.4rem}

/* Precios */
.price-card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.dark .price-card{background:#0b1220;border-color:#1f2937}
.price-title{font-weight:800;margin-bottom:.35rem}
.price{font-size:1.8rem;font-weight:800;margin:.25rem 0 10px}
.price-list{margin:10px 0 16px;padding-left:18px}
.price-list li{margin:.25rem 0}
.featured{outline:2px solid #000}
.dark .featured{outline-color:#fff}
.badge{
  position:absolute;top:10px;right:10px;background:#111;color:#fff;font-size:.7rem;
  padding:.25rem .5rem;border-radius:999px;font-weight:700
}
.dark .badge{background:#fff;color:#000}

/* Works */
.work img{width:100%;height:auto;display:block}

/* FAQ */
.faq{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px}
.dark .faq{background:#0b1220;border-color:#1f2937}
.faq>summary{cursor:pointer;font-weight:600;list-style:none}
.faq>summary::-webkit-details-marker{display:none}

/* Inputs */
.input{
  width:100%;border:1px solid #e5e7eb;padding:12px;border-radius:10px;outline:none;background:#fff;color:#111
}
.dark .input{background:#0b1220;color:#e2e8f0;border-color:#1f2937}
.input:focus{border-color:#0f172a;box-shadow:0 0 0 3px var(--brand-ring)}

/* WhatsApp FAB */
.wa-fab{
  position:fixed;
  right:16px;
  bottom:16px;
  background:#0E860E;
  color:#fff;
  font-weight:700;
  padding:12px 14px;
  border-radius:9999px;
  box-shadow:0 10px 15px 
  rgba(0,0,0,.1);
  z-index:60;
}
.wa-fab:hover{filter:brightness(.95)}

/* Back to top */
.to-top{
  position:fixed;right:16px;bottom:80px;background:#111;color:#fff;border:0;border-radius:10px;
  padding:10px 12px;font-weight:800;z-index:50;box-shadow:0 8px 14px rgba(0,0,0,.15); cursor:pointer
}
.dark .to-top{background:#fff;color:#000}

/* Mobile nav capa visual (no visibilidad) */
.mobile-nav{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-top:1px solid #e5e7eb}
.dark .mobile-nav{background:rgba(2,6,23,.9);border-color:#1f2937}
.mobile-link{display:block;padding:10px 0;border-bottom:1px dashed #e5e7eb}
.dark .mobile-link{border-color:#1f2937}

/* Cookie bar */
.cookie{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;z-index:70
}
.dark .cookie{background:#0b1220;border-color:#1f2937}

/* Forzar que el banner se oculte cuando tenga .hidden */
.cookie.hidden { display: none !important; }


/* Animaciones aparecer */
.fade-in{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.fade-in.delay-1{transition-delay:.08s}
.fade-in.delay-2{transition-delay:.16s}
.fade-in.delay-3{transition-delay:.24s}
.appear{opacity:1;transform:none}

/* ---------- Modal de Privacidad ---------- */
.privacy-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
  opacity:0; pointer-events:none; transition:.2s;
}
.privacy-modal{
  position:fixed; inset:0; display:grid; place-items:center; z-index:91;
  opacity:0; pointer-events:none; transition:.2s;
}
.privacy-box{
  width:min(900px,90vw); max-height:80vh; overflow:auto;
  background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.dark .privacy-box{ background:#0b1220; color:#e2e8f0; border-color:#1f2937 }
.privacy-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #e5e7eb;
}
.dark .privacy-head{ border-color:#1f2937 }
.privacy-content{ padding:16px }
.privacy-overlay.show, .privacy-modal.show{ opacity:1; pointer-events:auto }


#menuBtn{
  display: none;
}
/* Bloqueo de scroll cuando hay modal */
.body-lock {
  overflow: hidden;
  touch-action: none;              /* mejora en iOS */
}

@media (max-width: 800px){
  #menuBtn{
  display: block;
}
}

@media (max-width: 700px){
  .privacy-box{
    width: 650px;
  }
}
@media (max-width: 650px){
  .privacy-box{
    width: 600px;
  }
}
@media (max-width: 600px){
  .privacy-box{
    width: 550px;
  }
}
@media (max-width: 550px){
  .privacy-box{
    width: 500px;
  }
}
@media (max-width: 500px){
  .privacy-box{
    width: 450px;
  }
}
@media (max-width: 450px){
  .privacy-box{
    width: 400px;
  }
}
@media (max-width: 400px){
  .privacy-box{
    width: 350px;
  }
}
@media (max-width: 350px){
  .privacy-box{
    width: 300px;
  }
}
@media (max-width: 300px){
  .privacy-box{
    width: 250px;
  }
}

/* ===== ERYOS · servicios.css (FINAL) =====
   Scope local a la página de servicios con .svc-page
   Cargar después de index.css
*/

/* --------- Base / Respiración --------- */
.svc-page {
  line-height: 1.65;
}

.svc-page .section-title {
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  letter-spacing: -0.01em;
}

/* Hero interno más agradable */
.svc-page .svc-hero {
  background:
    radial-gradient(1100px 480px at 50% -40%, #e8ebf0 10%, transparent 60%),
    radial-gradient(800px 400px at 100% 0%, #eef2f7 8%, transparent 50%);
  border-bottom: 1px solid #e5e7eb;
}
.dark .svc-page .svc-hero {
  background:
    radial-gradient(1100px 480px at 50% -40%, #0b1220 10%, transparent 60%),
    radial-gradient(800px 400px at 100% 0%, #0f172a 8%, transparent 50%);
  border-color: #1f2937;
}

.svc-page .breadcrumbs {
  font-size: .92rem;
  opacity: .9;
  padding: 5px;
}
.svc-page .breadcrumbs a {
  text-decoration: underline;
}

/* Índice interno en chips */
.svc-page .svc-index{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:.75rem 0 0; padding:0; list-style:none;
}
.svc-page .svc-index a{
  display:inline-block; border:1px solid #e5e7eb; padding:.45rem .7rem; border-radius:999px;
  font-weight:600; background:#fff;
}
.dark .svc-page .svc-index a{ border-color:#1f2937; background:#0b1220 }
.svc-page .svc-index a:hover{ background:rgba(0,0,0,.04) }
.dark .svc-page .svc-index a:hover{ background:rgba(255,255,255,.06) }

/* --------- “Qué hacemos” como cuadrados ---------
   Seleccionamos la sección por su aria-labelledby (sin tocar HTML)
*/
.svc-page section[aria-labelledby="servicios-lista"]{
  display:flex;
  flex-wrap:wrap;
  gap: 20px;
  align-items:stretch;
  margin-top: 1rem;
}

/* Cada .svc-block es un “cuadrado” flexible */
.svc-page section[aria-labelledby="servicios-lista"] .svc-block{
  /* 3 columnas desktop */
  flex: 1 1 calc(33.333% - 20px);
  display:flex;                /* Para empujar contenido hacia abajo */
  flex-direction: column;
  min-height: 250px;           /* Alto mínimo homogéneo */
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .22s ease, box-shadow .22s ease;
}
.dark .svc-page section[aria-labelledby="servicios-lista"] .svc-block{
  background:#0b1220; border-color:#1f2937;
}
.svc-page section[aria-labelledby="servicios-lista"] .svc-block:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* 2 columnas en tablets */
@media (max-width: 1024px){
  .svc-page section[aria-labelledby="servicios-lista"] .svc-block{
    flex: 1 1 calc(50% - 20px);
    min-height: 320px;
  }
}
/* 1 columna en móviles */
@media (max-width: 640px){
  .svc-page section[aria-labelledby="servicios-lista"] .svc-block{
    flex: 1 1 100%;
    min-height: auto;
  }
}

.servicios-lista{
  display: block;
}

.servicios-lista-div{
  display: flex;
  flex-wrap: wrap;
}
.servicios-lista-div article{
  margin: 20px
}
/* Cabecera de cada card */
.svc-page .svc-block-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.4rem;
}
.svc-page .svc-badge{
  display:inline-block; font-size:.72rem; font-weight:800; padding:.22rem .5rem; border-radius:999px;
  background:#111; color:#fff; letter-spacing:.02em;
}
.dark .svc-page .svc-badge{ background:#fff; color:#000 }

/* Texto de introducción de la card */
.svc-page .svc-block > p{
  opacity:.95;
}

/* Zona inferior de la card (lista + CTA) anclada abajo */
.svc-page .svc-cols{
  margin-top: auto;            /* Empuja esta zona al fondo del card */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}
@media (max-width: 720px){
  .svc-page .svc-cols{ grid-template-columns: 1fr; }
}
.svc-page .svc-list{ margin: 0; padding-left: 18px; }
.svc-page .svc-list li{ margin:.25rem 0 }

/* Botones de la card */
.svc-page .svc-cta{
  display:flex; align-self:end;flex-direction: column;
}

/* --------- Sectores / Proceso --------- */
.svc-page [aria-labelledby="sectores"] .card,
.svc-page [aria-labelledby="proceso"] .card{
  padding: 16px;
}

/* --------- Tabla comparativa (legibilidad) --------- */
.svc-page .svc-table-wrap{ overflow-x:auto; border-radius:12px; margin-top:.9rem; border:1px solid #e5e7eb }
.dark .svc-page .svc-table-wrap{ border-color:#1f2937 }
.svc-page .svc-table{ width:100%; border-collapse:collapse; font-size:.97rem; background:#fff }
.dark .svc-page .svc-table{ background:#0b1220 }
.svc-page .svc-table caption{ text-align:left; font-weight:800; padding:.6rem .8rem }
.svc-page .svc-table th,
.svc-page .svc-table td{ padding:.7rem .8rem; border-top:1px solid #e5e7eb }
.dark .svc-page .svc-table th,
.dark .svc-page .svc-table td{ border-color:#1f2937 }
.svc-page .svc-table thead th{
  background:#f8fafc; font-weight:800; border-top:0; text-align:left;
}
.dark .svc-page .svc-table thead th{ background:#0b1220 }
.svc-page .svc-table tbody tr:nth-child(even){
  background:#fafafa;
}
.dark .svc-page .svc-table tbody tr:nth-child(even){
  background:#0c1321;
}

/* --------- FAQ --------- */
.svc-page .faq{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px;
}
.dark .svc-page .faq{ background:#0b1220; border-color:#1f2937 }
.svc-page .faq > summary{
  cursor:pointer; font-weight:700; list-style:none;
}
.svc-page .faq > summary::-webkit-details-marker{ display:none }

/* --------- CTA sticky (móvil) --------- */
.svc-page .svc-sticky{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:16px; z-index:60; display:flex; gap:.5rem; padding:.5rem;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px);
  border:1px solid #e5e7eb; border-radius:999px; box-shadow:0 10px 20px rgba(0,0,0,.12);
  transition: opacity .2s ease, transform .2s ease;
}
.dark .svc-page .svc-sticky{ background:rgba(2,6,23,.9); border-color:#1f2937 }
.svc-page .svc-sticky.hide{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(12px) }
@media (min-width: 900px){
  .svc-page .svc-sticky{ display:none }
}

/* --------- Ajustes finos / tipografía --------- */
.svc-page p{ max-width: 72ch }
.svc-page .page-hero p{ max-width: 80ch }
.svc-page .card-title{ font-weight:800 }

/* Espaciados verticales más generosos */
.svc-page main > section{ margin-top: 3rem }
@media (max-width: 640px){
  .svc-page main > section{ margin-top: 2rem }
}

/* --------- Modo reducido de movimiento --------- */
@media (prefers-reduced-motion: no-preference){
  .svc-page section[aria-labelledby="servicios-lista"] .svc-block{
    will-change: transform, box-shadow;
  }
}
.px-6{
  padding-bottom: 1.5rem
}
.gap-3{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content:center;
}

.kpi{
  min-width: 200px;
}
.proceso-boton{
  margin: 20px;
}

.buttons{
  margin-top: 25px;
}

.btn-sec{
  margin-top: 10px;
}