/* ============================================================
   TouringXX · Páginas internas (etapa 07.3)
   Vocabulario propio de las páginas de servicio, institucionales,
   conversión, insights, caso de estudio, legales y utilidad.
   Solo consume tokens.css. No depende de home.css.
   ============================================================ */

/* ---------- Anclas bajo header sticky ---------- */
:target{scroll-margin-top:calc(var(--header-h) + 16px)}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- Migas ---------- */
.crumb{border-bottom:1px solid var(--line);background:var(--surface)}
.crumb__inner{max-width:var(--container);margin:0 auto;padding:11px var(--container-pad);display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:400 10.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--green-600)}
.crumb__sep{color:var(--line-2)}
.crumb [aria-current]{color:var(--ink)}

/* ---------- Hero de página ---------- */
.phero{position:relative;border-bottom:1px solid var(--line);background:var(--paper);overflow:hidden}
.phero__inner{max-width:var(--container);margin:0 auto;padding:60px var(--container-pad) 54px;display:grid;grid-template-columns:1.45fr .85fr;gap:48px;align-items:start}
.phero--solo .phero__inner{grid-template-columns:minmax(0,860px);padding-bottom:48px}
.phero__title{font:800 clamp(30px,4.4vw,50px)/1.03 var(--sans);letter-spacing:-.033em;color:var(--ink);margin:14px 0 0;max-width:19em}
.phero__lead{margin:20px 0 0;font:400 clamp(15px,1.35vw,17px)/1.62 var(--sans);color:var(--ink-2);max-width:40em}
.phero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.phero__meta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.phero__aside{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:22px}
.phero__aside-t{font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.phero__aside-p{font:400 13px/1.6 var(--sans);color:var(--ink-2)}
.phero__aside-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:12px 0 0}
.phero__aside-list li{font:400 12.5px/1.45 var(--sans);color:var(--ink-2);padding-left:14px;position:relative}
.phero__aside-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:1px;background:var(--green-500)}

/* ---------- Bloque en síntesis ---------- */
.glance{border-left:2px solid var(--green-500);padding:2px 0 2px 18px;max-width:62em}
.glance__l{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-600);margin-bottom:9px}
.glance__t{font:400 14.5px/1.68 var(--sans);color:var(--ink-2)}

/* ---------- Rejillas ---------- */
.g2,.g3,.g4{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-wide{gap:24px}

/* ---------- Tarjetas ---------- */
.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:22px;display:flex;flex-direction:column;gap:9px}
.card--dark{background:var(--dark-2);border-color:var(--line-dark-2)}
.card--inset{background:var(--inset);border-color:var(--line-2)}
.card__n{font:600 9.5px/1 var(--mono);letter-spacing:.12em;color:var(--green-600)}
.card__t{font:700 15.5px/1.28 var(--sans);color:var(--ink);letter-spacing:-.01em}
.card__d{font:400 13px/1.6 var(--sans);color:var(--ink-2)}
.card--dark .card__t{color:var(--on-dark)}
.card--dark .card__d{color:var(--on-dark-3)}
.card--dark .card__n{color:var(--green-300)}
.card__list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.card__list li{font:400 12.5px/1.5 var(--sans);color:var(--ink-2);padding-left:13px;position:relative}
.card__list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--green-500)}
a.card{transition:border-color var(--t-fast)}
a.card:hover{border-color:var(--green-500)}
a.card:hover .card__t{color:var(--green-600)}

/* ---------- Señales ---------- */
.signals{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.signals li{font:400 14px/1.55 var(--sans);color:var(--ink-2);padding:14px 0 14px 26px;border-bottom:1px solid var(--line);position:relative}
.signals li::before{content:"";position:absolute;left:0;top:21px;width:11px;height:11px;border:1.5px solid var(--green-500);border-radius:2px}

/* ---------- Pasos / proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-2);border-radius:var(--radius-4);overflow:hidden;background:var(--surface)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps--5{grid-template-columns:repeat(5,1fr)}
.step{padding:22px 20px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.step:last-child{border-right:0}
.step__n{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--green-600)}
.step__t{font:700 15px/1.25 var(--sans);color:var(--ink)}
.step__d{font:400 12.5px/1.58 var(--sans);color:var(--ink-2)}
.step__deliver{margin-top:auto;padding-top:12px;font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--petrol)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip__n{font:600 9.5px/1 var(--mono);color:var(--ink-3);padding-left:2px}
button.chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
button.chip[aria-current="true"] .chip__n{color:var(--on-dark-3)}
button.chip[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Filas etiqueta + texto ---------- */
.rows{border-top:1px solid var(--line-2)}
.row{display:grid;grid-template-columns:.42fr 1fr;gap:24px;padding:17px 0;border-bottom:1px solid var(--line)}
.row__k{font:600 11px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.row__v{font:400 13.5px/1.6 var(--sans);color:var(--ink-2)}

/* ---------- Tabla ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--radius-4);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font:400 13px/1.5 var(--sans);color:var(--ink-2);vertical-align:top}
.tbl th{font:600 9.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--inset)}
.tbl tbody th{font:600 13px/1.5 var(--sans);letter-spacing:normal;text-transform:none;color:var(--ink);background:transparent}
.tbl tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;padding:18px 0;font:600 15px/1.4 var(--sans);color:var(--ink)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--green-600)}
.faq__ico{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--line-2);border-radius:var(--radius-1);position:relative;margin-top:2px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq__ico::before{width:9px;height:1.5px}
.faq__ico::after{width:1.5px;height:9px;transition:opacity var(--t-fast)}
.faq__i[open] .faq__ico::after{opacity:0}
.faq__a{padding:0 46px 20px 0;font:400 13.5px/1.68 var(--sans);color:var(--ink-2);max-width:62em}

/* ---------- Nota de honestidad ---------- */
.note{background:var(--inset);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.note__l{flex:0 0 auto;font:600 9px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-600)}
.note__t{font:400 13px/1.62 var(--sans);color:var(--ink-2);max-width:60em}

/* ---------- Relacionados ---------- */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel__i{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-3);padding:18px;display:flex;flex-direction:column;gap:7px}
.rel__i:hover{border-color:var(--green-500)}
.rel__t{font:600 14px/1.3 var(--sans);color:var(--ink);display:flex;align-items:center;gap:8px}
.rel__i:hover .rel__t{color:var(--green-600)}
.rel__w{font:400 12.5px/1.55 var(--sans);color:var(--ink-2)}
.rel__arrow{color:var(--green-600);font:400 13px/1 var(--mono)}

/* ---------- Panel CTA ---------- */
.cta{background:var(--dark);border-radius:var(--radius-5);padding:40px;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}
.cta__t{font:800 clamp(23px,2.7vw,31px)/1.1 var(--sans);letter-spacing:-.028em;color:var(--on-dark);max-width:20em}
.cta__p{margin:14px 0 0;font:400 14px/1.62 var(--sans);color:var(--on-dark-3);max-width:38em}
.cta__actions{display:flex;flex-direction:column;gap:11px}
.cta__note{font:400 10.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--on-dark-3);margin:4px 0 0}

/* ---------- Prosa (artículos, legales, caso de estudio) ---------- */
.prose{max-width:44em}
.prose>*+*{margin-top:20px}
.prose p{font:400 16px/1.75 var(--serif);color:var(--ink)}
.prose h2{font:700 clamp(21px,2.4vw,27px)/1.18 var(--sans);letter-spacing:-.02em;color:var(--ink);margin-top:44px}
.prose h3{font:700 17px/1.25 var(--sans);color:var(--ink);margin-top:30px}
.prose ul,.prose ol{list-style:none;display:flex;flex-direction:column;gap:11px}
.prose li{font:400 15px/1.7 var(--serif);color:var(--ink-2);padding-left:20px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:1px;background:var(--green-500)}
.prose ol{counter-reset:pl}
.prose ol li{counter-increment:pl}
.prose ol li::before{content:counter(pl);background:none;top:0;width:auto;font:600 11px/1.7 var(--mono);color:var(--green-600)}
.prose blockquote{margin:0;padding:4px 0 4px 22px;border-left:2px solid var(--green-500)}
.prose blockquote p{font:400 18px/1.6 var(--serif);font-style:italic;color:var(--ink)}
.prose strong{font-weight:600}
.prose a{border-bottom:1px solid var(--green-200)}
.prose .small{font-family:var(--sans)}

.artlayout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:start}
.aside{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:22px}
.toc{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:18px}
.toc__t{font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.toc__list{list-style:none;display:flex;flex-direction:column;gap:9px}
.toc__list a{font:400 12.5px/1.4 var(--sans);color:var(--ink-2)}
.toc__list a:hover{color:var(--green-600)}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 11px/1.5 var(--mono);letter-spacing:.05em;color:var(--ink-3)}
.meta__dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}

/* ---------- Listado de artículos ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:0;display:flex;flex-direction:column;overflow:hidden}
.post:hover{border-color:var(--green-500)}
.post__body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.post__cat{font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--green-600)}
.post__t{font:700 16px/1.28 var(--sans);color:var(--ink);letter-spacing:-.012em}
.post:hover .post__t{color:var(--green-600)}
.post__e{font:400 13px/1.6 var(--sans);color:var(--ink-2)}
.post__m{margin-top:auto;padding-top:10px;font:400 10px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.post--lead{grid-column:span 2}
.post--row{display:grid;grid-template-columns:120px 1fr;gap:0}

.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line-2);padding-top:20px;margin-top:34px;font:500 12.5px/1.4 var(--sans)}
.pager span{color:var(--ink-3);font-family:var(--mono);font-size:11px}

/* ---------- Testimonios ---------- */
.quote{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:26px;display:flex;flex-direction:column;gap:16px}
.quote__q{font:400 16px/1.62 var(--serif);color:var(--ink)}
.quote__b{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.quote__ini{width:34px;height:34px;border-radius:50%;background:var(--inset);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--mono);color:var(--green-600)}
.quote__a{font:600 13px/1.3 var(--sans);color:var(--ink)}
.quote__r{font:400 11px/1.4 var(--mono);color:var(--ink-3)}
.quote__tag{font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--petrol)}

/* ---------- Formularios en página ---------- */
.formlayout{display:grid;grid-template-columns:minmax(0,1.35fr) .8fr;gap:52px;align-items:start}
.formcard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:30px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fset legend{font:600 12px/1.3 var(--sans);color:var(--ink);padding:0;margin-bottom:2px}
.opt{display:flex;align-items:flex-start;gap:10px;font:400 13px/1.45 var(--sans);color:var(--ink-2);min-height:30px}
.opt input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--green-500);flex:0 0 auto}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.progress{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.progress__b{flex:1;height:2px;background:var(--line-2);position:relative}
.progress__f{position:absolute;left:0;top:0;bottom:0;background:var(--green-500)}

/* ---------- Precios ---------- */
.price{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-4);padding:24px;display:flex;flex-direction:column;gap:12px}
.price--hl{border-color:var(--green-500);box-shadow:0 12px 30px -24px rgba(31,74,48,.5)}
.price__t{font:700 17px/1.2 var(--sans);color:var(--ink)}
.price__v{font:600 12px/1.4 var(--mono);color:var(--green-600)}
.price__d{font:400 13px/1.6 var(--sans);color:var(--ink-2)}

/* ---------- Utilidad ---------- */
.util{min-height:52vh;display:flex;align-items:center}
.util__n{font:800 clamp(64px,12vw,132px)/.9 var(--sans);letter-spacing:-.05em;color:var(--line-2)}
.searchbar{display:flex;gap:10px;max-width:520px;margin-top:24px}
.searchbar input{flex:1}

/* ---------- Divisores de sección ---------- */
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.sechead__l{max-width:52em}
.sechead__t{font:700 clamp(23px,3vw,31px)/1.1 var(--sans);letter-spacing:-.024em;color:var(--ink)}
.sechead__p{margin:12px 0 0;font:400 14.5px/1.62 var(--sans);color:var(--ink-2);max-width:46em}
.sec-dark .sechead__t{color:var(--on-dark)}
.sec-dark .sechead__p{color:var(--on-dark-3)}
.sec-dark .kicker{color:var(--green-300)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .phero__inner{grid-template-columns:1fr;gap:32px;padding:48px var(--container-pad) 42px}
  .artlayout{grid-template-columns:1fr;gap:34px}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .toc{flex:1 1 260px}
  .steps,.steps--5,.steps--3{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--line)}
  .step:nth-child(2n){border-right:0}
  .g4{grid-template-columns:1fr 1fr}
  .rel,.posts{grid-template-columns:1fr 1fr}
  .post--lead{grid-column:span 2}
  .cta{grid-template-columns:1fr;padding:32px}
  .formlayout{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  .g2,.g3,.g4,.rel,.posts,.signals,.optgrid,.fieldrow{grid-template-columns:1fr}
  .post--lead{grid-column:auto}
  .steps,.steps--5,.steps--3{grid-template-columns:1fr}
  .step{border-right:0}
  .row{grid-template-columns:1fr;gap:6px}
  .signals li{padding-top:12px;padding-bottom:12px}
  .cta{padding:26px}
  .formcard{padding:20px}
  .prose p,.prose li{font-size:15.5px}
  .faq__a{padding-right:0}
  .post--row{grid-template-columns:1fr}
}