@charset "UTF-8";
/* ============================================================
   servicios.css -- v1.1.0
   Pagina /servicios/. Namespace: --sv-*
   ASCII puro (el server sirve text/css sin charset header).

   Catalogo de ejecucion del Protocolo DOC -- TEAL (Plataforma/Metodo/
   accion), no azul (Comunidad, que es Doc a Doc y Doc a Todos).

   REGLA DE COLOR: --sv-teal para fills/bordes/iconos; --sv-teal-ink para
   TEXTO chico sobre fondo claro (#00BFA5 da 2.33:1, no pasa WCAG AA;
   #00806E da 4.87:1 sobre blanco).
   ============================================================ */

:root{
  --sv-bg:#FFFFFF;
  --sv-bg-soft:#F8F9FC;
  --sv-ink:#0D1117;
  --sv-ink-soft:rgba(13,17,23,.72);
  --sv-ink-muted:rgba(13,17,23,.62);
  --sv-line:rgba(13,17,23,.12);
  --sv-teal:#00BFA5;
  --sv-teal-ink:#00806E;
  --sv-void:#040609;
  --sv-display:"Bricolage Grotesque", Georgia, serif;
  --sv-body:"Figtree", system-ui, -apple-system, sans-serif;
  --sv-max:1280px;
  --sv-gutter:clamp(20px, 5vw, 80px);
}

.sv{ background:var(--sv-bg); color:var(--sv-ink); font-family:var(--sv-body); line-height:1.65 }
.sv *{ box-sizing:border-box }
.sv-shell{ max-width:var(--sv-max); margin:0 auto; padding:0 var(--sv-gutter) }
.sv :focus-visible{ outline:2px solid var(--sv-teal); outline-offset:3px; border-radius:4px }

/* -- Hero --------------------------------------------------------- */
.sv-hero{ padding:clamp(48px,9vh,96px) 0 clamp(40px,6vh,64px); background:var(--sv-bg-soft) }
.sv-eyebrow{ margin:0 0 12px; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--sv-teal-ink) }
.sv-title{
  font-family:var(--sv-display); font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 16px; max-width:20ch;
}
.sv-lead{ font-size:1.05rem; line-height:1.65; color:var(--sv-ink-soft); max-width:62ch; margin:0 }

/* -- Grid de categorias ---------------------------------------------- */
.sv-section{ padding:clamp(48px,8vh,88px) 0 }
.sv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.sv-card{
  border:1px solid var(--sv-line); border-radius:12px;
  background:var(--sv-bg); transition:border-color .2s ease, box-shadow .2s ease;
  /* Columna para que la cabecera pueda estirarse y empujar su pie al fondo:
     sin esto, en una fila con bajadas de distinto largo la linea divisoria de
     "N intervenciones" queda a distinta altura en cada card. */
  display:flex; flex-direction:column;
}
.sv-card:hover{ border-color:var(--sv-teal); box-shadow:0 10px 24px -18px rgba(0,191,165,.4) }
.sv-card[open]{ border-color:var(--sv-teal); box-shadow:0 14px 32px -22px rgba(0,191,165,.5) }

/* La categoria abierta ocupa el ancho completo del grid: el detalle son dos
   bloques de lista y en una columna de 1/3 quedaban ilegibles. Es CSS puro
   -- no hace falta JS para reacomodar el grid. */
.sv-card[open]{ grid-column:1 / -1 }

/* -- Cabecera clickeable (summary) ------------------------------------- */
.sv-card-head{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:26px; cursor:pointer; list-style:none;
  border-radius:12px;
}
.sv-card-head::-webkit-details-marker{ display:none }
.sv-card-icon{ color:var(--sv-teal-ink); display:inline-flex; margin-bottom:16px }
.sv-card-title{ font-family:var(--sv-display); font-size:1.08rem; font-weight:600; margin:0 0 10px }
.sv-card-desc{ font-size:.92rem; color:var(--sv-ink-muted); margin:0; line-height:1.6 }

/* Pie de la cabecera: cuantas intervenciones hay adentro + chevron. El
   contador sale de count() sobre el array, nunca hardcodeado. */
.sv-card-more{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--sv-line);
  min-height:24px;
}
/* El auto de arriba pega el pie al fondo; este piso garantiza que igual haya
   aire entre la bajada y la linea cuando la card es la mas alta de su fila. */
.sv-card-desc{ margin-bottom:16px }
.sv-card-more-t{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sv-teal-ink);
}
.sv-card-chev{
  width:18px; height:18px; flex:0 0 18px; color:var(--sv-teal-ink);
  transition:transform .25s ease;
}
.sv-card[open] .sv-card-chev{ transform:rotate(180deg) }

/* -- Detalle ----------------------------------------------------------- */
.sv-card-body{
  padding:0 26px 26px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  animation:sv-open .28s ease both;
}
.sv-card-block-t{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sv-ink-muted); margin:0;
}
.sv-card-list--indica li::before{ background:var(--sv-ink-muted) }
@keyframes sv-open{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* -- Entrada al viewport ------------------------------------------------
   El estado oculto SOLO existe si el JS pudo correr: .sv-anim lo pone
   servicios.js apenas arranca. Sin JS (o si falla), .sv-reveal no hace nada y
   la pagina se ve entera -- nunca queda contenido invisible por un script que
   no cargo. */
.sv-anim .sv-reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease }
.sv-anim .sv-reveal.is-in{ opacity:1; transform:none }
/* Items literales del docx dentro de cada categoria. Separados de la bajada
   por una linea: la bajada es voz de marca, la lista es el documento. */
.sv-card-list{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-direction:column; gap:9px;
}
.sv-card-list li{
  position:relative; padding-left:16px;
  font-size:.87rem; line-height:1.5; color:var(--sv-ink);
}
.sv-card-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:5px; height:5px; border-radius:50%; background:var(--sv-teal);
}
.sv-foot{
  margin:28px 0 0; max-width:70ch;
  font-size:.9rem; line-height:1.65; color:var(--sv-ink-muted);
}

/* -- Cierre ------------------------------------------------------------ */
.sv-cta{ padding:clamp(56px,9vh,100px) 0; background:var(--sv-void) }
.sv-cta-inner{ max-width:640px; text-align:center; margin:0 auto }
.sv-cta-bridge{ font-family:var(--sv-display); font-size:clamp(1.4rem,3vw,1.9rem); color:#fff; margin:0 0 14px; font-weight:500 }
.sv-cta-lead{ font-size:.95rem; color:rgba(255,255,255,.65); margin:0 0 32px; line-height:1.6 }
.sv-cta-btn{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:14px 30px; border-radius:999px; background:var(--sv-teal); color:#04120F;
  font-family:var(--sv-body); font-weight:700; font-size:.95rem; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.sv-cta-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -16px rgba(0,191,165,.6) }
.sv-cta-btn svg{ width:16px; height:16px }

@media (max-width: 980px){
  .sv-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 760px){
  /* Dos columnas de listas no entran: el detalle pasa a una sola. */
  .sv-card-body{ grid-template-columns:1fr; gap:22px }
}
@media (max-width: 620px){
  .sv-grid{ grid-template-columns:1fr }
  .sv-card-head{ padding:22px }
  .sv-card-body{ padding:0 22px 22px }
}

@media (prefers-reduced-motion: reduce){
  .sv-card, .sv-cta-btn, .sv-card-chev, .sv-anim .sv-reveal{ transition:none }
  .sv-cta-btn:hover{ transform:none }
  .sv-card-body{ animation:none }
  .sv-anim .sv-reveal{ opacity:1; transform:none }
}