/*
Theme Name: ConectaERP
Theme URI: https://conectaerp.es
Author: ConectaERP
Description: Tema a medida para ConectaERP - integraciones de ERP con tiendas online.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: conectaerp
*/

:root{
  --ink:#141a20;
  --ink-soft:#2c3945;
  --paper:#f5f3ed;
  --paper-dim:#eae7de;
  --line:#d8d4c6;
  --amber:#d9a441;
  --amber-dim:#f0d6a2;
  --green:#3f7a5c;
  --green-soft:#e4efe8;
  --red:#b3261e;
  --red-soft:#fbe9e7;
  --white:#fffef9;
  --radius:3px;
  font-size:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  line-height:1.15;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--ink); color:var(--paper);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.05rem;
  letter-spacing:-0.01em; display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--paper);
}
.brand .dot{width:8px;height:8px;border-radius:50%; background:var(--amber); display:inline-block;}
.nav-links{display:flex; gap:26px; font-size:0.9rem; align-items:center;}
.nav-links a{text-decoration:none; color:rgba(245,243,237,0.75); transition:color .15s ease;}
.nav-links a:hover{color:var(--paper);}
.nav-links .current{color:var(--amber-dim);}
.nav-cta{
  background:var(--amber); color:var(--ink); font-weight:600; font-size:0.88rem;
  padding:9px 16px; border-radius:var(--radius); text-decoration:none; white-space:nowrap;
}
@media (max-width:860px){ .nav-links{display:none;} }

/* ---------- hero ---------- */
.hero{background:var(--ink); color:var(--paper); padding:76px 0 64px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.kicker{
  font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--amber-dim);
  margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.kicker .bar{width:26px;height:1px;background:var(--amber-dim); display:inline-block;}
.hero h1{font-size:2.5rem; color:var(--white); max-width:17ch;}
.hero p.lede{margin-top:20px; font-size:1.08rem; color:rgba(245,243,237,0.82); max-width:46ch;}
.hero-ctas{margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn-primary{
  background:var(--amber); color:var(--ink); font-weight:600; padding:14px 22px;
  border-radius:var(--radius); text-decoration:none; font-size:0.98rem; border:none; cursor:pointer;
  display:inline-block;
}
.btn-ghost{
  color:var(--paper); text-decoration:none; font-size:0.95rem;
  border-bottom:1px solid rgba(245,243,237,0.4); padding-bottom:2px;
}
.hero-note{margin-top:26px; font-size:0.85rem; color:rgba(245,243,237,0.55);}

/* ---------- diagram ---------- */
.diagram{background:rgba(245,243,237,0.04); border:1px solid rgba(245,243,237,0.14); border-radius:6px; padding:26px 22px;}
.diagram-row{display:flex; align-items:center; gap:14px;}
.diagram-box{background:var(--paper); color:var(--ink); border-radius:4px; padding:14px 16px; font-size:0.88rem; font-weight:600; text-align:center; flex:0 0 auto; width:118px;}
.diagram-stores{display:flex; flex-direction:column; gap:10px;}
.diagram-store{background:rgba(245,243,237,0.9); color:var(--ink); border-radius:4px; padding:9px 12px; font-size:0.8rem; font-weight:600; text-align:center; width:118px;}
.track{position:relative; flex:1 1 auto; height:96px;}
.track-line{position:absolute; top:50%; left:0; right:0; height:1px; background:rgba(245,243,237,0.22);}
.chip{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; background:var(--amber); color:var(--ink);
  padding:4px 9px; border-radius:999px; white-space:nowrap; animation:travel 5.5s linear infinite;
}
.chip.c2{animation-delay:1.3s; background:var(--green); color:var(--white);}
.chip.c3{animation-delay:2.6s;}
.chip.c4{animation-delay:3.9s; background:var(--green); color:var(--white);}
@keyframes travel{
  0%{left:2%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{left:98%; opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .chip{animation:none; left:50%; opacity:1;} }
@media (max-width:520px){
  .diagram-row{flex-direction:column;}
  .track{width:100%; height:64px;}
  .diagram-stores{flex-direction:row; flex-wrap:wrap; justify-content:center;}
}

/* ---------- sections ---------- */
section{padding:76px 0; border-bottom:1px solid var(--line);}
.eyebrow-label{font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--ink-soft); margin-bottom:10px;}
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:1.85rem;}
.section-head p{margin-top:14px; color:var(--ink-soft); font-size:1.03rem;}

/* ---------- hub: ERP selector ---------- */
.erp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .erp-grid{grid-template-columns:1fr;} }
.erp-card{
  border:1px solid var(--line); border-radius:4px; padding:28px 24px; background:var(--white);
  text-decoration:none; color:var(--ink); display:block; transition:border-color .15s ease, transform .15s ease;
}
.erp-card:hover{border-color:var(--ink);}
.erp-card .erp-tag{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--green); display:block; margin-top:6px;}
.erp-card h3{font-size:1.25rem; margin-top:14px;}
.erp-card p{margin-top:10px; color:var(--ink-soft); font-size:0.92rem;}
.erp-card .erp-go{margin-top:18px; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--ink);}
.erp-card .erp-from{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--ink-soft);
  display:block; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
}
.erp-card .erp-from b{color:var(--ink); font-size:0.95rem;}

/* ---------- positioning / comparison ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:4px; overflow:hidden;}
@media (max-width:760px){ .compare{grid-template-columns:1fr;} }
.compare-col{padding:28px 26px;}
.compare-col.bad{background:var(--paper-dim);}
.compare-col.good{background:var(--white); border-left:1px solid var(--line);}
@media (max-width:760px){ .compare-col.good{border-left:none; border-top:1px solid var(--line);} }
.compare-col h3{font-size:1.05rem; margin-bottom:16px;}
.compare-col ul{margin:0; padding-left:0; list-style:none;}
.compare-col li{padding:9px 0; border-top:1px dashed var(--line); font-size:0.95rem; color:var(--ink-soft);}
.compare-col li:first-of-type{border-top:none;}
.compare-col.good li{color:var(--ink);}

/* ---------- sync table ---------- */
.sync-table{width:100%; border-collapse:collapse;}
.sync-table th{
  text-align:left; font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:0.8rem;
  color:var(--ink-soft); padding:0 16px 12px; border-bottom:1px solid var(--ink);
}
.sync-table td{padding:16px; border-bottom:1px solid var(--line); vertical-align:top; font-size:0.95rem;}
.sync-table td:first-child{font-weight:600; white-space:nowrap;}
.sync-table tr:last-child td{border-bottom:none;}
.sync-table td .desc{color:var(--ink-soft); font-size:0.92rem;}

/* ---------- platforms ---------- */
.platforms{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .platforms{grid-template-columns:1fr;} }
.platform-card{border:1px solid var(--line); border-radius:4px; padding:26px 24px; background:var(--white);}
.platform-card h3{font-size:1.15rem;}
.platform-card .tag{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--green); margin-top:6px; display:block;}
.platform-card ul{margin:18px 0 0; padding-left:18px; font-size:0.92rem; color:var(--ink-soft);}
.platform-card li{margin-bottom:7px;}

/* ---------- pricing (focal section) ---------- */
#precios{background:var(--ink); color:var(--paper);}
#precios .section-head p{color:rgba(245,243,237,0.72);}
#precios .eyebrow-label{color:var(--amber-dim);}
.price-table{border:1px solid rgba(245,243,237,0.18); border-radius:4px; overflow:hidden;}
.price-row{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; border-bottom:1px solid rgba(245,243,237,0.14);}
.price-row:last-child{border-bottom:none;}
.price-row.head{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:rgba(245,243,237,0.55); background:rgba(245,243,237,0.03);}
.price-row > div{padding:20px 22px; border-left:1px solid rgba(245,243,237,0.1);}
.price-row > div:first-child{border-left:none;}
.price-row.head > div{padding:12px 22px;}
@media (max-width:760px){
  .price-row{grid-template-columns:1fr;}
  .price-row > div{border-left:none; border-top:1px solid rgba(245,243,237,0.1);}
  .price-row > div:first-child{border-top:none;}
  .price-row.head{display:none;}
}
.platform-name{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.1rem; display:flex; align-items:center;}
.price-num{font-family:'IBM Plex Mono', monospace; font-size:1.35rem; font-weight:600; color:var(--amber);}
.price-sub{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:rgba(245,243,237,0.5); display:block; margin-top:4px; font-weight:400;}
.price-includes{font-size:0.9rem; color:rgba(245,243,237,0.78);}
.price-fine{margin-top:24px; font-size:0.92rem; color:rgba(245,243,237,0.65); max-width:70ch;}
.price-cta{margin-top:28px;}

/* ---------- steps ---------- */
.steps{counter-reset:step; display:grid; gap:0;}
.step{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line);}
.step:first-child{border-top:none;}
.step-num{font-family:'IBM Plex Mono', monospace; font-size:0.95rem; color:var(--ink-soft); padding-top:2px;}
.step h3{font-size:1.08rem;}
.step p{margin-top:8px; color:var(--ink-soft); font-size:0.95rem;}

/* ---------- trust ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px;}
@media (max-width:760px){ .trust-grid{grid-template-columns:1fr;} }
.trust-item h3{font-size:1.02rem; display:flex; align-items:baseline; gap:10px;}
.trust-item h3::before{content:""; width:6px;height:6px; background:var(--amber); border-radius:50%; flex:0 0 auto; margin-bottom:2px;}
.trust-item p{margin-top:8px; color:var(--ink-soft); font-size:0.94rem; padding-left:16px;}

/* ---------- faq ---------- */
details{border-top:1px solid var(--line); padding:18px 0;}
details:last-child{border-bottom:1px solid var(--line);}
summary{cursor:pointer; font-weight:600; font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; font-family:'IBM Plex Mono', monospace; font-size:1.2rem; color:var(--ink-soft); flex:0 0 auto;}
details[open] summary::after{content:"\2013";}
details p{margin:14px 0 0; color:var(--ink-soft); font-size:0.95rem; max-width:70ch;}

/* ---------- contact / footer ---------- */
#contacto{border-bottom:none;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.85rem; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:3px;
  font-family:'IBM Plex Sans', sans-serif; font-size:0.95rem; background:var(--white); color:var(--ink);
}
.field textarea{resize:vertical; min-height:90px;}
.contact-direct{font-size:0.98rem;}
.contact-direct .mono{display:block; margin-top:6px; font-size:1.05rem;}
footer{background:var(--ink); color:rgba(245,243,237,0.6); padding:36px 0; font-size:0.85rem;}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.footer-links{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid rgba(245,243,237,0.1);}
.footer-links a{text-decoration:none; color:rgba(245,243,237,0.55);}
.footer-links a:hover{color:var(--amber-dim);}
.footer-links .label{color:rgba(245,243,237,0.35); font-family:'IBM Plex Mono', monospace; font-size:0.78rem;}

/* ============================================================
   Bloques de venta: dolor, tiempo real, pago único, a medida
   ============================================================ */

/* ---------- ritmo de fondos ---------- */
#dolor{background:var(--paper-dim);}
#a-medida{background:var(--paper-dim);}
#pago-unico{background:var(--white);}
#detalles{background:var(--paper-dim);}
#precio{background:var(--ink); color:var(--paper);}
#precio .section-head p{color:rgba(245,243,237,0.72);}
#precio .eyebrow-label{color:var(--amber-dim);}

/* ---------- hero: lista de argumentos ---------- */
.hero-points{
  margin:28px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
.hero-points li{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  color:rgba(245,243,237,0.85);
  border:1px solid rgba(245,243,237,0.22); border-radius:999px;
  padding:5px 12px;
}
.hero-points li::before{content:"\2713\00a0"; color:var(--amber);}
.diagram-caption{
  margin:18px 0 0; font-size:0.74rem; line-height:1.5;
  color:rgba(245,243,237,0.55); text-align:center;
}

/* ---------- migas de pan ---------- */
.crumbs{background:var(--ink); border-bottom:1px solid rgba(245,243,237,0.1); padding:10px 0;}
.crumbs .wrap{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:rgba(245,243,237,0.4);
}
.crumbs a{color:rgba(245,243,237,0.7); text-decoration:none;}
.crumbs a:hover{color:var(--amber-dim);}
.crumbs .current{color:var(--amber-dim);}

/* ---------- bloque de dolor ---------- */
.pain-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 40px;}
@media (max-width:760px){ .pain-grid{grid-template-columns:1fr;} }
.pain-item{position:relative; padding-left:44px;}
.pain-num{
  position:absolute; left:0; top:1px; font-size:0.8rem; color:var(--amber);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:2px 6px; background:var(--white);
}
.pain-item h3{font-size:1.06rem;}
.pain-item p{margin:9px 0 0; color:var(--ink-soft); font-size:0.95rem;}

.cost-box{
  margin-top:44px; display:grid; grid-template-columns:270px 1fr;
  border:1px solid var(--ink); border-radius:4px; overflow:hidden; background:var(--white);
}
@media (max-width:760px){ .cost-box{grid-template-columns:1fr;} }
.cost-fig{
  background:var(--ink); color:var(--paper); padding:28px 26px;
  display:flex; flex-direction:column; justify-content:center;
}
.cost-label{font-size:0.74rem; color:rgba(245,243,237,0.5); display:block;}
.cost-big{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:2.3rem;
  color:var(--amber); line-height:1.1; margin-top:8px; display:block;
}
.cost-unit{font-size:1rem; color:rgba(245,243,237,0.55); font-weight:500;}
.cost-sub{font-size:0.75rem; color:rgba(245,243,237,0.5); display:block; margin-top:10px;}
.cost-text{padding:28px 30px;}
.cost-text p{margin:0; font-size:0.98rem; color:var(--ink-soft);}
.cost-text strong{color:var(--ink);}
.cost-note{
  margin-top:14px; font-size:0.88rem; color:var(--ink-soft);
  border-top:1px dashed var(--line); padding-top:14px;
}

/* ---------- bloque de tiempo real ---------- */
.rt-table{width:100%; border-collapse:collapse; margin-bottom:40px;}
.rt-table th{
  text-align:left; font-family:'IBM Plex Mono', monospace; font-weight:500;
  font-size:0.78rem; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:0.04em; padding:0 16px 12px; border-bottom:1px solid var(--ink);
}
.rt-table td{padding:14px 16px; border-bottom:1px solid var(--line); font-size:0.95rem;}
.rt-table tr:last-child td{border-bottom:none;}
.rt-when{color:var(--green); font-weight:500;}

.rt-compare{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
@media (max-width:760px){ .rt-compare{grid-template-columns:1fr;} }
.rt-col{padding:24px 22px; border-left:1px solid var(--line);}
.rt-col:first-child{border-left:none;}
@media (max-width:760px){
  .rt-col{border-left:none; border-top:1px solid var(--line);}
  .rt-col:first-child{border-top:none;}
}
.rt-col.bad{background:var(--paper-dim);}
.rt-col.mid{background:var(--paper);}
.rt-col.good{background:var(--ink); color:var(--paper);}
.rt-tag{font-size:0.72rem; color:var(--ink-soft); display:block; margin-bottom:12px;}
.rt-col.good .rt-tag{color:var(--amber-dim);}
.rt-headline{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.08rem;
  margin:0 0 10px; line-height:1.2;
}
.rt-col.good .rt-headline{color:var(--amber); font-size:1.5rem;}
.rt-col p:last-child{margin:0; font-size:0.9rem; color:var(--ink-soft);}
.rt-col.good p:last-child{color:rgba(245,243,237,0.75);}

/* ---------- coste total: pago único frente a suscripción ---------- */
.tco{border:1px solid var(--ink); border-radius:4px; overflow:hidden; background:var(--white);}
.tco-head, .tco-row{display:grid; grid-template-columns:1.4fr 1fr 1fr;}
.tco-head{
  background:var(--ink); color:rgba(245,243,237,0.6); font-size:0.76rem;
  text-transform:uppercase; letter-spacing:0.04em;
}
.tco-head > div{padding:12px 18px;}
.tco-row{border-top:1px solid var(--line);}
.tco-row > div{padding:18px; border-left:1px solid var(--line); font-size:0.93rem;}
.tco-row > div:first-child{border-left:none;}
@media (max-width:820px){
  .tco-head{display:none;}
  .tco-row{grid-template-columns:1fr;}
  .tco-row > div{border-left:none; padding:10px 18px;}
  .tco-row > div:first-child{padding-top:18px;}
  .tco-row > div:last-child{padding-bottom:18px;}
}
.tco-name{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1rem;}
.tco-total{font-family:'IBM Plex Mono', monospace; font-size:1.2rem; font-weight:600;}
.tco-note{color:var(--ink-soft); font-size:0.88rem;}
.tco-row.mine{background:var(--ink); color:var(--paper);}
.tco-row.mine > div{border-left-color:rgba(245,243,237,0.14);}
.tco-row.mine .tco-total{color:var(--amber); font-size:1.4rem;}
.tco-row.mine .tco-note{color:rgba(245,243,237,0.72);}

.tco-why{margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:26px 40px;}
@media (max-width:760px){ .tco-why{grid-template-columns:1fr;} }
.tco-why-item h3{font-size:1.02rem; display:flex; align-items:baseline; gap:10px;}
.tco-why-item h3::before{
  content:""; width:6px; height:6px; background:var(--green);
  border-radius:50%; flex:0 0 auto;
}
.tco-why-item p{margin-top:8px; color:var(--ink-soft); font-size:0.93rem; padding-left:16px;}
#pago-unico .price-fine{color:var(--ink-soft); margin-top:32px;}

/* ---------- bloque a medida ---------- */
.medida-list{
  margin-top:40px; border:1px solid var(--line); border-radius:4px;
  padding:26px 28px; background:var(--white);
}
.medida-list h3{font-size:1.02rem; margin-bottom:16px;}
.medida-list ul{margin:0; padding-left:18px; columns:2; column-gap:40px;}
@media (max-width:760px){ .medida-list ul{columns:1;} }
.medida-list li{margin-bottom:9px; font-size:0.93rem; color:var(--ink-soft); break-inside:avoid;}

/* ---------- detalles técnicos y requisitos ---------- */
.detail-list{margin:0 0 40px; padding:0; list-style:none;}
.detail-list li{
  padding:16px 0 16px 30px; border-top:1px solid var(--line);
  font-size:0.96rem; color:var(--ink-soft); position:relative;
}
.detail-list li:last-child{border-bottom:1px solid var(--line);}
.detail-list li::before{
  content:"\2192"; position:absolute; left:0; top:16px;
  font-family:'IBM Plex Mono', monospace; color:var(--amber);
}

.req-grid{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--white);
}
@media (max-width:820px){ .req-grid{grid-template-columns:1fr;} }
.req-col{padding:26px 26px 22px;}
.req-col.limits{background:var(--paper-dim); border-left:1px solid var(--line);}
@media (max-width:820px){ .req-col.limits{border-left:none; border-top:1px solid var(--line);} }
.req-col h3{font-size:1.02rem; margin-bottom:14px;}
.req-col ul{margin:0; padding-left:18px;}
.req-col li{margin-bottom:10px; font-size:0.93rem; color:var(--ink-soft);}
.req-api{
  margin:16px 0 0; padding-top:14px; border-top:1px dashed var(--line);
  font-size:0.8rem; color:var(--ink-soft); line-height:1.5;
}

.perfil-text{max-width:70ch; font-size:1.05rem; color:var(--ink-soft); margin:0;}

/* ---------- tabla de sincronización: columna de latencia ---------- */
.sync-table td.lat{white-space:nowrap; color:var(--green); font-size:0.85rem;}
.table-note{margin-top:24px; font-size:0.93rem; color:var(--ink-soft); max-width:70ch;}
.table-note a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;}

/* ---------- matriz de conectores ---------- */
.matriz{border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--white);}
.matriz + .matriz-titulo{margin-top:44px;}
.matriz-titulo{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:0.8rem;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft);
  margin:0 0 14px;
}
.erp-grid + .matriz-titulo{margin-top:44px;}
.matriz-row{display:grid; grid-template-columns:1.2fr repeat(3,1fr); border-top:1px solid var(--line);}
.matriz.cols-4 .matriz-row{grid-template-columns:1.2fr repeat(4,1fr);}
.matriz.cols-5 .matriz-row{grid-template-columns:1.2fr repeat(5,1fr);}
.matriz-movil{display:none;}
.matriz-row:first-child{border-top:none;}
.matriz-row.head{
  background:var(--ink); color:rgba(245,243,237,0.6);
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem;
  text-transform:uppercase; letter-spacing:0.04em;
}
.matriz-row.head > div{padding:12px 18px; border-left-color:rgba(245,243,237,0.14);}
.matriz-row > div{border-left:1px solid var(--line);}
.matriz-row > div:first-child{border-left:none;}
.matriz-erp{
  padding:18px; display:flex; flex-direction:column; justify-content:center;
  background:var(--paper-dim);
}
.matriz-erp a{
  font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:1.05rem; text-decoration:none;
}
.matriz-erp a:hover{color:var(--green);}
.matriz-erp span{font-size:0.72rem; color:var(--ink-soft); margin-top:4px;}
.matriz-cell{
  display:flex; flex-direction:column; gap:2px; padding:18px;
  text-decoration:none; height:100%; transition:background .15s ease;
}
a.matriz-cell:hover{background:var(--amber-dim);}
.matriz-price{font-family:'IBM Plex Mono', monospace; font-size:1.15rem; font-weight:600; color:var(--ink);}
.matriz-sub{font-size:0.7rem; color:var(--ink-soft);}
.matriz-go{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--green); margin-top:10px;}
.matriz-cell.empty{color:var(--ink-soft); font-size:0.8rem; justify-content:center;}
@media (max-width:980px){
  .matriz-row.head{display:none;}
  .matriz-row,
  .matriz.cols-4 .matriz-row,
  .matriz.cols-5 .matriz-row{grid-template-columns:1fr;}
  .matriz-row > div{border-left:none; border-top:1px solid var(--line);}
  .matriz-row > div:first-child{border-top:none;}
  .matriz-movil{display:block; font-size:0.72rem; color:var(--ink-soft); margin-bottom:4px;}
  .matriz-cell.empty{flex-direction:column; align-items:flex-start;}
}

/* ---------- enlaces a otras combinaciones ---------- */
.otras-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
@media (max-width:760px){ .otras-grid{grid-template-columns:1fr;} }
.otras-grid h3{font-size:1.02rem; margin-bottom:14px;}
.link-list{margin:0; padding:0; list-style:none;}
.link-list li{border-top:1px solid var(--line);}
.link-list li:last-child{border-bottom:1px solid var(--line);}
.link-list a{display:block; padding:13px 0; font-size:0.95rem; text-decoration:none; color:var(--ink-soft);}
.link-list a:hover{color:var(--ink);}
.link-list a::after{content:"\00a0\2192"; color:var(--amber);}

/* ---------- precios: enlace en el nombre de plataforma ---------- */
.platform-name a{text-decoration:none; border-bottom:1px solid rgba(245,243,237,0.3);}
.platform-name a:hover{border-bottom-color:var(--amber);}

/* ---------- contacto ---------- */
.contact-list{margin:24px 0 0; padding:0; list-style:none;}
.contact-list li{padding:9px 0; border-top:1px dashed var(--line); font-size:0.9rem; color:var(--ink-soft);}
.contact-list li::before{content:"\2713\00a0"; color:var(--green);}
.form-ok{margin-top:14px; color:var(--green); font-size:0.9rem;}
.form-ko{margin-top:14px; color:var(--red); font-size:0.9rem;}

/* ============================================================
   Pasada esquemática: tarjetas, chips, pasos
   ============================================================ */

.section-head.center{max-width:720px; margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center h2{font-size:2rem;}
.table-note.center{margin-left:auto; margin-right:auto; text-align:center; max-width:60ch;}

/* ---------- ritmo de fondos ---------- */
#solucion{background:var(--white);}
#tiempo-real{background:var(--paper-dim);}
#a-medida{background:var(--white);}
#pago-unico{background:var(--paper-dim);}
#perfil{background:var(--white);}

/* ---------- hero más corto ---------- */
.hero p.lede{font-size:1.28rem; line-height:1.45; max-width:32ch;}
.hero p.lede b{color:var(--amber); font-weight:600;}
.hero-note{margin-top:18px;}
.hero-points li{font-size:0.75rem;}

/* ---------- tarjetas dolor / solución ---------- */
.p-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){ .p-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .p-cards{grid-template-columns:1fr;} }
.p-card{
  border:1px solid var(--line); border-radius:6px; padding:26px 22px;
  background:var(--white); display:flex; flex-direction:column; text-align:center;
  align-items:center;
}
.p-icon{
  width:46px; height:46px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; margin-bottom:16px;
}
.p-icon svg{width:22px; height:22px;}
.p-card.bad .p-icon{background:var(--red-soft); color:var(--red);}
.p-card.good .p-icon{background:var(--green-soft); color:var(--green);}
.p-card h3{font-size:1.1rem;}
.p-card p{margin:10px 0 0; font-size:0.9rem; color:var(--ink-soft); line-height:1.5;}
.p-stat{
  margin-top:auto; padding-top:16px; font-size:0.75rem;
  letter-spacing:0.02em;
}
.p-card.bad .p-stat{color:var(--red);}
.p-card.good .p-stat{color:var(--green);}
#dolor .p-cards{margin-bottom:0;}
#dolor .cost-box{margin-top:32px;}

/* ---------- comparativa de latencia, ahora a golpe de cifra ---------- */
.rt-compare{text-align:center;}
.rt-col{padding:30px 22px;}
.rt-headline{font-size:2rem !important; margin-bottom:6px;}
.rt-col.bad .rt-headline{color:var(--red);}
.rt-col.mid .rt-headline{color:var(--ink-soft);}
.rt-col.good .rt-headline{color:var(--amber); font-size:2.3rem !important;}
.rt-table{margin:40px 0 0;}

/* ---------- coste total ---------- */
.tco-ahorro{
  margin:22px 0 40px; text-align:center; font-size:1.05rem; color:var(--ink-soft);
}
.tco-ahorro b{color:var(--green); font-size:1.15rem;}
.fine{margin-top:32px; font-size:0.78rem; color:var(--ink-soft); text-align:center;}

/* ---------- chips ---------- */
.chips-block{margin-top:36px; text-align:center;}
.chips-label{font-size:0.78rem; color:var(--ink-soft); margin:0 0 16px;}
.chips{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.chip-item{
  border:1px solid var(--line); background:var(--white); border-radius:999px;
  padding:8px 16px; font-size:0.86rem; color:var(--ink-soft);
}

/* ---------- proceso en tres pasos ---------- */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .pasos{grid-template-columns:1fr;} }
.paso{
  border:1px solid var(--line); border-radius:6px; padding:28px 24px;
  background:var(--white); position:relative;
}
.paso-num{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--ink); color:var(--amber); font-size:0.85rem; margin-bottom:16px;
}
.paso h3{font-size:1.12rem;}
.paso-tiempo{display:block; font-size:0.76rem; color:var(--green); margin-top:5px;}
.paso p{margin:12px 0 0; font-size:0.9rem; color:var(--ink-soft);}

/* ---------- perfil ---------- */
.perfil-box{
  max-width:780px; margin:0 auto; text-align:center;
  border-left:2px solid var(--amber); padding:4px 0 4px 26px; text-align:left;
}
.perfil-box .eyebrow-label{display:block; margin-bottom:8px;}
.perfil-text{font-size:1.05rem; color:var(--ink-soft); margin:0;}

/* ---------- faq más estrecha ---------- */
.faq-wrap{max-width:780px; margin:0 auto;}
summary{font-size:1rem;}

/* ---------- tarjetas de ERP sin párrafo ---------- */
.erp-card h3{margin-top:10px;}
.erp-card .erp-go{margin-top:14px;}

/* Con 4 ERPs y 4 canales, la rejilla se ajusta sola en vez de romperse. */
.erp-grid{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));}
@media (max-width:820px){ .erp-grid{grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));} }
@media (max-width:520px){ .erp-grid{grid-template-columns:1fr;} }

/* Chip de "+N más" en el diagrama del hero. */
.diagram-store.mas{
  background:transparent; color:rgba(245,243,237,0.5);
  border:1px dashed rgba(245,243,237,0.25); font-size:0.72rem; font-weight:400;
}

/* ---------- contacto ---------- */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.contact-alt{font-size:0.78rem; color:var(--ink-soft); margin:0 0 16px;}
.contact-pasos{margin:0; padding:0; list-style:none; counter-reset:cpaso;}
.contact-pasos li{
  counter-increment:cpaso; position:relative; padding:14px 0 14px 38px;
  border-top:1px solid var(--line); font-size:0.95rem; color:var(--ink-soft);
}
.contact-pasos li:last-child{border-bottom:1px solid var(--line);}
.contact-pasos li::before{
  content:counter(cpaso); position:absolute; left:0; top:13px;
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--amber);
  font-family:'IBM Plex Mono', monospace; font-size:0.74rem;
  display:flex; align-items:center; justify-content:center;
}
.contact-mail{margin:22px 0 0; font-size:0.9rem; color:var(--ink-soft);}
.contact-mail a{font-family:'IBM Plex Mono', monospace; color:var(--ink);}
.contact-mail a:hover{color:var(--green);}


/* ============================================================
   Páginas legales y consentimiento
   ============================================================ */

/* ---------- casilla de consentimiento ---------- */
.consentimiento{
  display:flex; align-items:flex-start; gap:10px;
  margin:4px 0 20px; padding:14px 16px;
  background:var(--white); border:1px solid var(--line); border-radius:4px;
}
.consentimiento input[type="checkbox"]{
  width:17px; height:17px; margin:2px 0 0; flex:0 0 auto;
  accent-color:var(--green); cursor:pointer;
}
.consentimiento label{
  font-size:0.86rem; color:var(--ink-soft); line-height:1.5; cursor:pointer;
}
.consentimiento a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.consentimiento a:hover{color:var(--green);}

/* ---------- cabecera de página legal ---------- */
.legal-hero{
  background:var(--ink); color:var(--paper);
  padding:56px 0 44px; border-bottom:none;
}
.legal-hero h1{font-size:2.1rem; color:var(--white); margin-top:6px;}
.legal-fecha{margin:16px 0 0; font-size:0.78rem; color:rgba(245,243,237,0.5);}

/* ---------- cuerpo legal ---------- */
section.legal{background:var(--paper); padding-top:56px;}
section.legal .wrap{max-width:780px;}
section.legal h2{
  font-size:1.2rem; margin:40px 0 12px;
  padding-top:24px; border-top:1px solid var(--line);
}
section.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:none;}
section.legal p{margin:0 0 14px; font-size:0.97rem; color:var(--ink-soft); line-height:1.65;}
section.legal a{color:var(--ink);}
section.legal strong{color:var(--ink);}

.legal-tabla{width:100%; border-collapse:collapse; margin:0 0 20px;}
.legal-tabla th{
  text-align:left; vertical-align:top; white-space:nowrap;
  width:200px; padding:11px 16px 11px 0;
  border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-weight:500;
  font-size:0.8rem; color:var(--ink-soft);
}
.legal-tabla td{
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:0.95rem; color:var(--ink);
}
@media (max-width:560px){
  .legal-tabla th, .legal-tabla td{display:block; width:auto; border-bottom:none; padding:4px 0;}
  .legal-tabla td{border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:8px;}
}

.legal-aviso{
  background:var(--red-soft); border-left:3px solid var(--red);
  padding:14px 18px; margin:0 0 32px !important; color:var(--ink) !important;
}
.legal-pie{
  margin-top:44px !important; padding-top:20px;
  border-top:1px solid var(--line); font-size:0.88rem !important;
}

/* ---------- pie: bloque legal ----------
   La clase es footer-legal, no legal a secas: con "legal" heredaba
   section.legal (fondo claro, texto oscuro) y el bloque salia como un
   recuadro blanco ilegible dentro del pie oscuro. */
.footer-links.footer-legal{
  margin-top:10px; padding-top:10px;
  border-top:none; align-items:center;
}
.footer-links.footer-legal .sin-cookies{
  color:rgba(245,243,237,0.35); font-size:0.75rem; margin-left:auto;
}
@media (max-width:560px){ .footer-links.footer-legal .sin-cookies{margin-left:0;} }