/* operativa.network — sistema visual compartido */

:root{
  --ink:#0C0E0D;
  --sangre:#C1121F;
  --papel:#F2EFE8;
  --clinico:#2D5A41;
  --oro:#C5A84C;
  --ink-soft:rgba(12,14,13,0.62);
  --ink-faint:rgba(12,14,13,0.38);
  --paper-line:rgba(12,14,13,0.12);
  --on-ink:rgba(242,239,232,0.86);
  --on-ink-faint:rgba(242,239,232,0.42);
  --on-ink-line:rgba(242,239,232,0.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Figtree',sans-serif; background:var(--papel); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;}
::selection{background:var(--sangre); color:var(--papel);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:400; line-height:1.08; letter-spacing:-0.01em;}
em{font-style:italic; color:var(--sangre);}

.wrap{max-width:1180px; margin:0 auto; padding:0 2rem;}
section{padding:7rem 0;}
@media(max-width:768px){ section{padding:4.5rem 0;} .wrap{padding:0 1.25rem;} }

.eyebrow{font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sangre); display:flex; align-items:center; gap:0.6rem;}
.eyebrow::before{content:''; width:14px; height:2px; background:var(--sangre); display:inline-block;}
.eyebrow.oro{color:var(--oro);}
.eyebrow.oro::before{background:var(--oro);}

.sym{display:inline-grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:3px; flex-shrink:0;}
.sym span{display:block;}
.sym .s1{background:var(--ink);}
.sym .s2{background:var(--sangre);}
.sym .s3{background:var(--clinico);}
.sym .s4{background:var(--oro);}

/* NAV */
nav{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(242,239,232,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--paper-line);}
.nav-inner{max-width:1180px; margin:0 auto; padding:1.1rem 2rem; display:flex; align-items:center; justify-content:space-between; position:relative;}
.nav-logo a{display:flex; align-items:center; gap:0.7rem;}
.nav-logo .sym{width:26px; height:26px;}
.nav-logo .sym span{width:11px; height:11px;}
.nav-name{font-family:'Fraunces',serif; font-size:1.18rem;}
.nav-name .dot{color:var(--sangre);}
.nav-name small{font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--ink-faint); letter-spacing:0.04em; margin-left:0.15rem;}
.nav-links{display:flex; gap:2.2rem; align-items:center;}
.nav-links a{font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); transition:color 0.15s;}
.nav-links a:hover{color:var(--sangre);}
.nav-links a[aria-current="page"]{color:var(--sangre);}
.nav-cta{background:var(--ink); color:var(--papel) !important; padding:0.65rem 1.3rem; font-size:0.66rem !important;}
.nav-cta:hover{background:var(--sangre) !important;}

.nav-toggle{display:none; background:none; border:none; padding:0.5rem; cursor:pointer;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:transform 0.2s, opacity 0.2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:760px){
  .nav-inner{padding:1rem 1.25rem;}
  .nav-name{white-space:nowrap;}
  .nav-toggle{display:block;}
  .nav-links{position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--papel); border-bottom:1px solid var(--paper-line); padding:0.5rem 1.25rem 1.4rem; align-items:stretch; transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.2s, opacity 0.2s;}
  .nav-links a{font-size:0.78rem; padding:0.95rem 0; border-bottom:1px solid var(--paper-line); text-align:left;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-cta{margin-top:0.8rem; text-align:center; font-size:0.72rem !important; padding:0.95rem !important;}
  .nav-open .nav-links{transform:translateY(0); opacity:1; pointer-events:auto;}
}

/* Buttons */
.btn-primary{background:var(--ink); color:var(--papel); padding:1rem 1.9rem; font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; transition:background 0.15s; display:inline-flex; align-items:center; gap:0.6rem; cursor:pointer; border:none;}
.btn-primary:hover{background:var(--sangre);}
.btn-primary.sangre{background:var(--sangre);}
.btn-primary.sangre:hover{background:#a00e18;}
.btn-ghost{font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--ink-faint); padding-bottom:2px; transition:border-color 0.15s, color 0.15s;}
.btn-ghost:hover{color:var(--sangre); border-color:var(--sangre);}

/* HERO (home) */
.hero{padding-top:11rem; padding-bottom:6rem; position:relative; overflow:hidden;}
.hero-bg{position:absolute; top:0; right:-8%; width:46%; height:100%; opacity:0.05; background-image:linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px); background-size:38px 38px; pointer-events:none;}
.hero-inner{position:relative; z-index:1; max-width:800px;}
.hero h1{font-size:clamp(2.6rem, 5.6vw, 4.4rem); margin-top:1.4rem; margin-bottom:1.6rem;}
.hero-sub{font-size:1.18rem; color:var(--ink-soft); max-width:580px; margin-bottom:2.6rem; line-height:1.6;}
.hero-actions{display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:3.4rem;}
.hero-flow{display:flex; align-items:center; flex-wrap:wrap; font-family:'DM Mono',monospace; font-size:0.72rem; letter-spacing:0.04em; color:var(--ink-faint); border-top:1px solid var(--paper-line); padding-top:1.6rem;}
.hero-flow .step{padding:0.3rem 0; white-space:nowrap;}
.hero-flow .step.active{color:var(--sangre); font-weight:500;}
.hero-flow .arrow{margin:0 0.7rem;}

/* Inner-page top (sistema, servicios, para-quien, contacto) */
.page-top{padding-top:9rem; padding-bottom:5rem;}
.page-top h1{font-size:clamp(2.4rem,5vw,3.6rem); margin:1.4rem 0 1.4rem; max-width:780px;}
.page-top .lead{color:var(--ink-soft); max-width:640px; font-size:1.12rem; line-height:1.6;}
@media(max-width:768px){ .page-top{padding-top:7rem;} }

/* Home summary block */
.home-sum{padding:6rem 0 4rem;}
.home-sum h2{font-size:clamp(2rem,4vw,2.8rem); max-width:680px; margin:1.2rem 0 1rem;}
.home-sum .lead{color:var(--ink-soft); max-width:600px; margin-bottom:2.2rem; font-size:1.05rem; line-height:1.6;}
.home-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:4rem;}
.home-card{border:1px solid var(--paper-line); background:#fff; padding:2rem 2rem 1.8rem; display:flex; flex-direction:column;}
.home-card .ey{font-family:'DM Mono',monospace; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem;}
.home-card h3{font-size:1.4rem; margin-bottom:0.7rem;}
.home-card p{color:var(--ink-soft); font-size:0.95rem; line-height:1.5; margin-bottom:1.6rem; flex:1;}
.home-card .lnk{font-family:'DM Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sangre); align-self:flex-start; border-bottom:1px solid var(--sangre); padding-bottom:2px;}
.home-card .lnk:hover{color:var(--ink); border-color:var(--ink);}
@media(max-width:860px){ .home-cards{grid-template-columns:1fr; gap:1rem; margin-top:2.4rem;} }

/* Flow rail (sistema.html) */
.flow-rail{display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); margin-top:1.5rem;}
.flow-stage{padding:2.4rem 1.4rem 2rem; border-right:1px solid var(--paper-line);}
.flow-stage:last-child{border-right:none;}
.flow-stage .tag{font-family:'DM Mono',monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1rem; display:block;}
.flow-stage h3{font-size:1.15rem; margin-bottom:0.6rem;}
.flow-stage p{font-size:0.88rem; color:var(--ink-soft); line-height:1.5;}
.flow-stage.risk{background:rgba(193,18,31,0.04);}
.flow-stage.risk .tag{color:var(--sangre);}
@media(max-width:900px){ .flow-rail{grid-template-columns:1fr 1fr;} .flow-stage{border-bottom:1px solid var(--paper-line);} .flow-stage:nth-child(2n){border-right:none;} .flow-stage:nth-last-child(-n+2){border-bottom:none;} }
@media(max-width:560px){ .flow-rail{grid-template-columns:1fr;} .flow-stage{border-right:none;} }

/* Trust band (sistema "cómo trabajamos") */
.trust{padding:4.5rem 0;}
.trust-inner{display:flex; align-items:center; gap:2rem; flex-wrap:wrap; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); padding:3rem 0;}
.trust h2{font-size:1.7rem; max-width:480px; margin:0.8rem 0 0.6rem;}
.trust p{color:var(--ink-soft); font-size:1rem; max-width:540px; line-height:1.6;}

/* Sectors band (para-quien.html) */
.sectors-band{background:var(--clinico); color:var(--papel); padding:5rem 0;}
.sectors-band .eyebrow{color:var(--oro);}
.sectors-band .eyebrow::before{background:var(--oro);}
.sectors-band h2{color:var(--papel); font-size:clamp(1.9rem,3.6vw,2.6rem); margin:1.2rem 0 1rem; max-width:640px;}
.sectors-band .lead{color:rgba(242,239,232,0.72); max-width:560px; margin-bottom:3rem; font-size:1.05rem; line-height:1.6;}
.sector-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(242,239,232,0.16); border:1px solid rgba(242,239,232,0.16);}
.sector-item{background:var(--clinico); padding:2rem 1.6rem;}
.sector-item h3{font-size:1.15rem; color:var(--papel); margin-bottom:0.5rem;}
.sector-item p{font-size:0.9rem; color:rgba(242,239,232,0.7); line-height:1.45;}
@media(max-width:768px){ .sector-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:480px){ .sector-grid{grid-template-columns:1fr;} }

/* Services cards */
.svc-cards{display:grid; grid-template-columns:1fr 1.15fr; gap:1.5rem; margin-top:1rem; margin-bottom:1.5rem;}
.svc-card{border:1px solid var(--paper-line); background:#fff; padding:2.4rem; display:flex; flex-direction:column; position:relative;}
.svc-card.featured{background:var(--ink); color:var(--papel); border-color:var(--ink);}
.svc-badge{position:absolute; top:0; right:2.4rem; background:var(--sangre); color:var(--papel); font-family:'DM Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.4rem 0.8rem; transform:translateY(-50%);}
.svc-name{font-family:'DM Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:0.8rem;}
.svc-card.featured .svc-name{color:var(--on-ink-faint);}
.svc-card h3{font-size:1.7rem; margin-bottom:0.4rem;}
.svc-price{font-family:'DM Mono',monospace; font-size:1.5rem; margin-bottom:0.3rem;}
.svc-price small{font-size:0.7rem; color:var(--ink-faint); font-weight:400;}
.svc-card.featured .svc-price small{color:var(--on-ink-faint);}
.svc-commit{font-size:0.7rem; color:var(--ink-faint); margin-bottom:1.6rem; font-family:'DM Mono',monospace; letter-spacing:0.08em; text-transform:uppercase;}
.svc-card.featured .svc-commit{color:var(--on-ink-faint);}
.svc-list{list-style:none; display:flex; flex-direction:column; gap:0.7rem; margin-bottom:auto; padding-bottom:1.6rem;}
.svc-list li{font-size:0.92rem; display:flex; gap:0.6rem; align-items:flex-start; line-height:1.4;}
.svc-list li::before{content:'—'; color:var(--sangre); flex-shrink:0;}
.svc-card.featured .svc-list li::before{color:var(--oro);}
.svc-foot{font-size:0.82rem; color:var(--ink-soft); border-top:1px solid var(--paper-line); padding-top:1.2rem;}
.svc-card.featured .svc-foot{color:var(--on-ink-faint); border-color:var(--on-ink-line);}
@media(max-width:860px){ .svc-cards{grid-template-columns:1fr;} }

.svc-entry{border:1px solid var(--paper-line); padding:1.6rem 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; background:#fff;}
.svc-entry-left{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;}
.svc-entry h3{font-size:1.25rem;}
.svc-entry .meta{font-family:'DM Mono',monospace; font-size:0.78rem; color:var(--ink-faint); letter-spacing:0.04em;}

/* About (contacto.html) */
.about{display:grid; grid-template-columns:0.85fr 1.15fr; grid-template-areas:"card copy"; gap:4rem; align-items:start; padding-top:1rem;}
.about-card{grid-area:card; border:1px solid var(--paper-line); padding:2.4rem; background:#fff;}
.about-copy{grid-area:copy;}
.about-avatar{width:54px; height:54px; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem;}
.about-avatar span{font-family:'Fraunces',serif; color:var(--papel); font-size:1.4rem;}
.about-card h2{font-size:1.3rem; margin-bottom:0.2rem;}
.about-card .role{font-family:'DM Mono',monospace; font-size:0.68rem; color:var(--sangre); letter-spacing:0.08em; margin-bottom:1.2rem; display:block; text-transform:uppercase;}
.about-card p{font-size:0.95rem; color:var(--ink-soft); line-height:1.6;}
.about-copy h1, .about-copy h2{font-size:clamp(2rem,4.5vw,2.9rem); margin:1.2rem 0 1.4rem;}
.about-copy p{color:var(--ink-soft); font-size:1.05rem; line-height:1.7; margin-bottom:1.2rem;}
.about-copy .btn-primary{margin-top:1.5rem;}
@media(max-width:860px){ .about{grid-template-columns:1fr; grid-template-areas:"copy" "card"; gap:2.4rem;} }

/* CTA final */
.cta-final{background:var(--ink); color:var(--papel); text-align:center; padding:7rem 0;}
.cta-final .sym{margin:0 auto 1.8rem; width:42px; height:42px;}
.cta-final .sym span{width:18px; height:18px;}
.cta-final h2{font-size:clamp(2rem,5vw,3.2rem); color:var(--papel); max-width:640px; margin:0 auto 1.2rem;}
.cta-final p{color:var(--on-ink-faint); font-size:1.05rem; max-width:520px; margin:0 auto 2.6rem; line-height:1.6;}
.cta-final .btn-primary{background:var(--sangre); margin:0 auto;}
.cta-final .btn-primary:hover{background:#a00e18;}

/* Footer */
footer{background:var(--ink); padding:3rem 0 2rem; color:var(--on-ink-faint); border-top:3px solid var(--sangre);}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2rem; padding-bottom:2.4rem; border-bottom:1px solid var(--on-ink-line); margin-bottom:1.6rem;}
.foot-logo{display:flex; align-items:center; gap:0.7rem;}
.foot-logo .sym{width:24px; height:24px;}
.foot-logo .sym span{width:10px; height:10px;}
.foot-logo .nav-name{color:var(--papel);}
.foot-logo .nav-name small{color:var(--on-ink-faint);}
.foot-tag{font-size:0.9rem; max-width:320px; margin-top:0.9rem; line-height:1.55; color:var(--on-ink-faint);}
.foot-cols{display:flex; gap:3.5rem; flex-wrap:wrap;}
.foot-col h3{font-family:'DM Mono',monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--oro); margin-bottom:1rem; font-weight:400;}
.foot-col a, .foot-col p{display:block; font-size:0.88rem; margin-bottom:0.55rem; color:var(--on-ink-faint); font-family:'Figtree',sans-serif;}
.foot-col a:hover{color:var(--papel);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-family:'DM Mono',monospace; font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-ink-faint);}

/* A11y */
.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;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--sangre); color:#fff; padding:1rem; z-index:200;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible{outline:2px solid var(--sangre); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto !important; transition:none !important; animation:none !important;} }

/* ── Mobile fino: 375–480px ─────────────────────────────── */
@media(max-width:520px){
  /* Hero: reducir padding y tamaño h1 */
  .hero{padding-top:7.5rem; padding-bottom:3.5rem;}
  .hero h1{font-size:2.15rem;}
  .hero-sub{font-size:1rem;}

  /* Hero-flow: ocultar flechas para que los pasos no queden partidos */
  .hero-flow .arrow{display:none;}
  .hero-flow .step{padding:0.2rem 0.6rem 0.2rem 0;}
  .hero-flow .step::after{content:'·'; margin-left:0.5rem; color:var(--ink-faint); opacity:0.5;}
  .hero-flow .step:last-child::after{display:none;}

  /* Footer: apilar columnas */
  .foot-cols{flex-direction:column; gap:2rem;}

  /* CTA final: reducir padding */
  .cta-final{padding:5rem 0;}
}

/* Flow-rail a 1 columna: corregir border del último stage */
@media(max-width:560px){
  .flow-stage:nth-last-child(-n+2){border-bottom:1px solid var(--paper-line);}
  .flow-stage:last-child{border-bottom:none;}
}

/* ── Dispositivos táctiles: evitar hover pegado, dar feedback al tocar ─ */
@media (hover: none){
  /* Anular cambios de color que en touch se quedan "activados" tras el tap */
  .nav-links a:hover{color:var(--ink-soft);}
  .btn-primary:hover{background:var(--ink);}
  .btn-primary.sangre:hover{background:var(--sangre);}
  .home-card .lnk:hover{color:var(--sangre); border-color:var(--sangre);}
  .btn-ghost:hover{color:var(--ink-soft); border-color:var(--ink-faint);}
  .foot-col a:hover{color:var(--on-ink-faint);}
  /* Feedback inmediato al presionar (sustituye al hover) */
  .btn-primary:active{opacity:0.85;}
  .btn-ghost:active, .nav-links a:active, .home-card .lnk:active{opacity:0.6;}
}

/* Tap-highlight discreto en toda la interfaz táctil */
a, button{-webkit-tap-highlight-color:rgba(193,18,31,0.12);}

/* ── Portafolio de demos (index.html) ──────────────────────── */
.demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.4rem;}
.demo-card{border:1px solid var(--paper-line);background:#fff;display:flex;flex-direction:column;transition:border-color 0.15s;border-top:2px solid var(--sangre);}
.demo-card:hover{border-color:var(--ink);border-top-color:var(--sangre);}
.demo-body{padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1;}
.demo-tag{font-family:'DM Mono',monospace;font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.6rem;}
.demo-card h3{font-size:1.1rem;margin-bottom:0.4rem;}
.demo-card p{font-size:0.86rem;color:var(--ink-soft);line-height:1.45;margin-bottom:1rem;flex:1;}
.demo-link{font-family:'DM Mono',monospace;font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--sangre);border-bottom:1px solid var(--sangre);padding-bottom:2px;align-self:flex-start;}
.demo-card:hover .demo-link{color:var(--ink);border-color:var(--ink);}
@media(max-width:900px){ .demo-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:560px){ .demo-grid{grid-template-columns:1fr;} }

/* ── Bloques de la tarjeta Presencia (compartidos servicios/propuesta) ─ */
.pkg-para-quien{font-size:0.88rem;color:var(--ink-soft);line-height:1.55;margin-bottom:1rem;}
.pkg-para-quien strong{color:var(--ink);font-weight:500;}
.pkg-noes{background:rgba(193,18,31,0.05);border-left:3px solid var(--sangre);padding:0.9rem 1rem;font-size:0.84rem;line-height:1.55;color:var(--ink-soft);margin-bottom:1rem;}
.pkg-noes strong{display:block;font-family:'DM Mono',monospace;font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--sangre);margin-bottom:0.4rem;font-weight:500;}
.pkg-hook{font-family:'Fraunces',serif;font-style:italic;font-size:1.02rem;color:var(--ink);line-height:1.4;margin-top:1.2rem;border-top:1px solid var(--paper-line);padding-top:1.1rem;}