/* Una columna de 880px; el catálogo usa códigos SKU porque el oficio es ecommerce. */
:root{
  --bg:#F5F7FA; --surface:#FFFFFF; --ink:#14213A; --muted:#556078; --line:#DCE1E9;
  --accent:#0B7A5B; --accent-ink:#FFFFFF; --accent-soft:#E3F3EE;
  --ph-bg:#FFF1C9; --ph-ink:#6B4A00;
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1523; --surface:#151F33; --ink:#E7ECF4; --muted:#9AA6BC; --line:#26324B;
    --accent:#3FD0A0; --accent-ink:#06261C; --accent-soft:#12302B;
    --ph-bg:#3A2F10; --ph-ink:#F3D98A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1523; --surface:#151F33; --ink:#E7ECF4; --muted:#9AA6BC; --line:#26324B;
  --accent:#3FD0A0; --accent-ink:#06261C; --accent-soft:#12302B;
  --ph-bg:#3A2F10; --ph-ink:#F3D98A; color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  padding-block:28px 56px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:60px}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; margin:0; text-wrap:balance}
h1{font-size:clamp(2rem, 6vw, 3.3rem); font-weight:700; letter-spacing:-0.02em}
h2{font-size:clamp(1.4rem, 3.6vw, 1.85rem); font-weight:700; letter-spacing:-0.01em}
h3{font-size:1.12rem; font-weight:600}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}
.eyebrow{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.muted{color:var(--muted)}
.ph{background:var(--ph-bg); color:var(--ph-ink); padding:0 .3em; border-radius:3px; border-bottom:1px dashed var(--ph-ink)}

.top{display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap}
.top strong{font-family:var(--font-display); font-size:1.1rem}
.status{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); border:1px solid var(--line); background:var(--surface); padding:5px 12px; border-radius:999px}
.status i{width:8px; height:8px; border-radius:50%; background:var(--accent); display:block}

.hero{display:flex; flex-direction:column; gap:22px}
.hero .lead{font-size:1.2rem; max-width:60ch; color:var(--muted)}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-block; font:600 1rem var(--font-body); text-decoration:none; padding:12px 20px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer}
.btn.alt{background:transparent; color:var(--accent)}
.note{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:14px 16px; max-width:60ch}

.sec{display:flex; flex-direction:column; gap:20px}
.sec > p.intro{max-width:62ch; color:var(--muted)}

.path{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px}
.path > div{border-top:3px solid var(--accent); background:var(--surface); padding:14px 14px 16px; border-radius:0 0 8px 8px; min-width:0; display:flex; flex-direction:column; gap:6px}
.path code{font-family:var(--font-mono); font-size:.78rem; color:var(--muted)}

.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0}
.card .sku{font-family:var(--font-mono); font-size:.78rem; color:var(--muted); letter-spacing:.04em}
.card .desc{color:var(--muted); font-size:.98rem; flex:1}
.price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--line)}
.price b{font-family:var(--font-display); font-size:1.25rem}
.tag{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; background:var(--accent-soft); color:var(--accent); padding:3px 8px; border-radius:4px}

.offer{background:var(--accent-soft); border:1px solid var(--accent); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.offer h3{color:var(--ink)}

.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:420px; font-size:.92rem}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}

.empty{border:1.5px dashed var(--line); border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:12px; background:var(--surface)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{font-size:.9rem; border:1px solid var(--line); border-radius:999px; padding:4px 12px; color:var(--muted)}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; counter-reset:s}
.steps li{counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:6px; min-width:0}
.steps li::before{content:counter(s); font-family:var(--font-mono); font-size:.85rem; color:var(--accent-ink); background:var(--accent); width:26px; height:26px; border-radius:50%; display:grid; place-items:center}

.contact dl{display:grid; grid-template-columns:max-content 1fr; gap:10px 18px; margin:0; align-items:center}
.contact dt{font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.contact dd{margin:0; min-width:0; overflow-wrap:anywhere; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.copy{font:600 .85rem var(--font-body); background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:6px; padding:3px 10px; cursor:pointer}
footer{font-size:.85rem; color:var(--muted)}
@media (prefers-reduced-motion: no-preference){ .btn{transition:transform .12s ease} .btn:hover{transform:translateY(-1px)} }

.price s{color:var(--muted); font-size:.95rem}
.price s:empty{display:none}
.wa-float{position:fixed; right:max(16px, env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow:0 2px 10px rgba(0,0,0,.25)}
.wa-float:not([hidden]){display:inline-flex; align-items:center; gap:8px}
.wa-ico{width:20px; height:20px; flex:none}
.wa-float[hidden]{display:none}
body{margin:0}

/* Estructura de capítulos: número + etiqueta sobre cada título, menú fijo y bandas alternadas. */
.sec{scroll-margin-top:64px}
.sec-head{display:flex; flex-direction:column; gap:6px}
.kicker{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px}
.kicker span{color:var(--muted)}
.kicker span::after{content:""; display:inline-block; width:22px; height:1px; background:var(--line); vertical-align:middle; margin-left:10px}

.nav{position:sticky; top:0; z-index:5; margin-top:-48px; margin-inline:-16px; padding:10px 16px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  background:color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:none; text-decoration:none; color:var(--muted); font-size:.9rem; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid transparent}
.nav a.on{color:var(--accent); background:var(--accent-soft); border-color:var(--accent)}

.band{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px}
.band .path > div, .band .steps li{background:var(--bg)}

@media (max-width:640px){
  .wrap{gap:44px}
  .nav{margin-top:-32px}
  .hero{gap:18px}
  .hero .lead{font-size:1.08rem}
  .actions .btn{flex:1 1 auto; text-align:center}
  .sec{gap:16px}

  /* Bandas de borde a borde para separar capítulos visualmente. */
  .band{margin-inline:-16px; border-radius:0; border-inline:0; padding:32px 16px}

  /* El recorrido de compra como línea de tiempo conectada. */
  .path{grid-template-columns:1fr; gap:0}
  .band .path > div{background:transparent; border:0; border-radius:0; padding:0 0 18px 34px; position:relative; gap:2px}
  .path > div:last-child{padding-bottom:0}
  .path > div::before{content:""; position:absolute; left:4px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
  .path > div::after{content:""; position:absolute; left:9px; top:22px; bottom:2px; width:2px; background:var(--line)}
  .path > div:last-child::after{display:none}
  .path .muted{font-size:.95rem}

  /* Servicios: lista de precios compacta para comparar los seis de un vistazo. */
  .menu{display:flex; flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:10px}
  .menu > .card{display:grid; grid-template-columns:1fr auto; grid-template-areas:"sku price" "title price" "desc desc";
    gap:2px 14px; background:transparent; border:0; border-radius:0; border-bottom:1px solid var(--line); padding:14px 16px}
  .menu > .card:last-child{border-bottom:0}
  .menu .sku{grid-area:sku; font-size:.7rem}
  .menu h3{grid-area:title; font-size:1.02rem}
  .menu .desc{grid-area:desc; font-size:.88rem; line-height:1.4; margin-top:4px}
  .menu .price{grid-area:price; flex-direction:column; align-items:flex-end; justify-content:center; gap:0; padding:0; border:0; text-align:right; line-height:1.2}
  .menu .price > .muted{font-size:.75rem}
  .menu .price s{font-size:.8rem}
  .menu .price b{font-size:1.2rem; color:var(--accent); white-space:nowrap}
  .menu .price .tag{display:none}

  /* La tabla de muestra sigue siendo tabla, ajustada para que entre sin scroll horizontal. */
  table{min-width:0; font-size:.84rem; line-height:1.4}
  th,td{padding:8px 6px}
  th:first-child,td:first-child{padding-left:0}
  th:last-child,td:last-child{padding-right:0}
  td:first-child{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}

  /* Proceso en cuadrícula de 2x2. */
  .steps{grid-template-columns:1fr 1fr; gap:10px}
  .steps li{padding:14px 12px}
  .steps li .muted{font-size:.9rem; line-height:1.45}

  .contact dl{grid-template-columns:1fr; gap:2px}
  .contact dd{margin-bottom:10px}
  footer{padding-bottom:56px}
}

/* Servicios: la auditoría abre el recorrido y el resto se lee como "después" */
.card.first{grid-column:1 / -1; border-left:3px solid var(--accent)}
.sku .start{color:var(--accent); font-weight:500}
.after{grid-column:1 / -1; margin:4px 0 0; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px}
.after::after{content:""; flex:1; height:1px; background:var(--line)}
@media (max-width:640px){
  .menu > .card.first{border-left:3px solid var(--accent)}
  .menu > .after{padding:12px 16px; margin:0; border-bottom:1px solid var(--line); background:var(--bg)}
}

.about{display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:start}
.about-txt{align-self:center; display:flex; flex-direction:column; gap:12px}
.about-foto{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:8px; display:block}
@media (max-width:640px){ .about{grid-template-columns:1fr} .about-foto{max-width:220px} }

/* Logo de la marca arriba de todo */
.top strong{font-size:inherit}
.brand{display:inline-flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem, 6vw, 2.5rem); letter-spacing:-.03em; line-height:1}
.brand-ico{width:1.15em; height:1.15em; color:var(--accent); flex:none}
.brand b{color:var(--accent); font-weight:800}

/* Contacto: primero la acción, después los datos */
.contact-card{align-items:flex-start; gap:14px}
.btn.big{display:inline-flex; align-items:center; gap:10px; font-size:1.1rem; padding:15px 24px}
.btn.big .wa-ico{width:1.3em; height:1.3em}
.contact-num{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0}
.contact-num b{font-family:var(--font-mono); font-weight:500; letter-spacing:.01em}
.contact-who{margin:0; padding-top:12px; border-top:1px solid var(--line); width:100%; color:var(--muted); font-size:.95rem}

/* Muestra de auditoría: 5 columnas en pantalla grande, tarjetas apiladas en celular */
table.audit{min-width:760px; font-size:.9rem; line-height:1.45}
table.audit th,table.audit td{padding:10px 10px}
table.audit td:first-child{font-family:var(--font-body); font-size:.9rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink)}
@media (max-width:760px){
  table.audit{min-width:0; display:block}
  table.audit thead{display:none}
  table.audit tbody{display:flex; flex-direction:column; gap:14px}
  table.audit tr{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; padding:4px 14px 8px; background:var(--bg)}
  table.audit td{display:block; padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem; line-height:1.45}
  table.audit td:last-child{border-bottom:0}
  table.audit td:first-child{font-family:var(--font-display); font-size:1.05rem; color:var(--accent); padding-top:12px}
  table.audit td:not(:first-child)::before{content:attr(data-label); display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
}

/* Menú: se nota que desliza (flechas que se pegan a los bordes) */
.nav::before,.nav::after{flex:none; position:sticky; display:none; align-items:center; justify-content:center; width:38px; margin:-10px 0; font-size:1.7rem; line-height:1; font-weight:700; color:var(--accent); pointer-events:none}
.nav::after{content:"›"; right:-16px; margin-left:-38px; background:linear-gradient(90deg, transparent, var(--bg) 60%)}
.nav::before{content:"‹"; left:-16px; margin-right:-38px; z-index:1; background:linear-gradient(270deg, transparent, var(--bg) 60%)}
.nav.more::after{display:flex}
.nav.more-left::before{display:flex}

/* Muestra de auditoría en celular: carrusel horizontal en vez de lista larga */
.dots{display:none}
@media (max-width:760px){
  .audit-wrap{overflow:visible}
  table.audit tbody{flex-direction:row; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-inline:-18px; padding-inline:18px; scroll-padding-inline:18px; -webkit-overflow-scrolling:touch}
  table.audit tbody::-webkit-scrollbar{display:none}
  table.audit tr{flex:0 0 84%; scroll-snap-align:start}
  .dots{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px}
  .dots-hint{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
  .dots-row{display:flex; gap:8px}
  .dot{width:10px; height:10px; padding:0; border-radius:50%; border:1px solid var(--accent); background:transparent; cursor:pointer}
  .dot.on{background:var(--accent)}
}

/* Menos texto por celda: letra un poco más grande y más aire, porque ahora se lee de un vistazo */
table.audit td{font-size:.95rem}
@media (max-width:760px){ table.audit td{font-size:1rem} table.audit tr{flex-basis:80%} }

/* Flechas que marcan el orden de lectura: encontré → comprobé → importa → hay que hacer */
@media (min-width:761px){
  table.audit th,table.audit td{position:relative}
  table.audit th:nth-child(n+2):nth-child(-n+4)::after,
  table.audit td:nth-child(n+2):nth-child(-n+4)::after{content:"→"; content:"→" / ""; position:absolute; right:-10px; top:9px; width:20px; text-align:center; z-index:1; color:var(--accent); font-weight:700; font-size:1.05rem; line-height:1.45; background:var(--surface); font-family:var(--font-body)}
  table.audit th:nth-child(n+2):nth-child(-n+4)::after{top:8px; font-size:.95rem}
}
@media (max-width:760px){
  table.audit td:nth-child(n+2):nth-child(-n+4){position:relative}
  table.audit td:nth-child(n+2):nth-child(-n+4)::after{content:"↓"; content:"↓" / ""; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%); width:22px; height:20px; display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--accent); font-weight:700; font-size:1rem; font-family:var(--font-body); z-index:1}
}
@media (min-width:761px){
  table.audit th:nth-child(n+3),table.audit td:nth-child(n+3){padding-left:26px}
  table.audit th:nth-child(n+2):nth-child(-n+4)::after,
  table.audit td:nth-child(n+2):nth-child(-n+4)::after{right:-8px; background:transparent}
}