@charset "UTF-8";
/* ===========================================================
   V2 · Línea de cartel
   Se carga después de style.css y home.css y solo cambia la piel:
   fondo papel, tinta negra, tipografía grotesca grande y apretada,
   mucho aire y esquinas casi rectas. Las piezas (comandas, carta,
   manual, gráficos) son las mismas de la V1.
   =========================================================== */

:root {
  --paper: #E8E3DA;
  --cream: #E8E3DA;
  --cream-2: #DFD9CE;
  --cream-3: #D2CBBE;
  --card: #F4F1EB;
  --ink: #111111;
  --ink-2: #57534C;
  --line: #CBC4B7;
  --head: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 0 rgba(17,17,17,.05), 0 14px 30px rgba(17,17,17,.06);
}

body { background: var(--paper); font-size: 16.5px; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.045em; }
.grain::before, .glow { display: none !important; }

/* ---------- Cabecera: papel y tinta ---------- */
.site-header { background: rgba(232,227,218,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.brand { color: var(--ink); font-weight: 800; letter-spacing: -.055em; }
.brand span { color: var(--ink); }
.site-header .btn-primary { background: var(--ink); color: var(--paper); }
.site-header .btn-primary::before { background: var(--acento-2); }
.site-header .btn-primary:hover { color: var(--paper); }
.nav-toggle { color: var(--ink); border-color: var(--line); }
@media (min-width: 721px) {
  .nav-links a { color: var(--ink); }
  .nav-links a:hover, .nav-links a.active { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
/* sobre el vídeo o el hero oscuro, hasta que se hace scroll */
.site-header.over:not(.scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.site-header.over:not(.scrolled) .brand, .site-header.over:not(.scrolled) .brand span { color: #F4F1EB; }
.site-header.over:not(.scrolled) .nav-toggle { color: #F4F1EB; border-color: rgba(255,255,255,.3); }
.site-header.over:not(.scrolled) .btn-primary { background: #F4F1EB; color: var(--ink); }
@media (min-width: 721px) {
  .site-header.over:not(.scrolled) .nav-links a:not(.btn) { color: #F4F1EB; }
}
.site-header.over.scrolled { background: rgba(232,227,218,.94); border-bottom-color: var(--line); }

/* ---------- Botones: rectángulo negro, texto papel ---------- */
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary::before { background: var(--acento-2); }
.btn-ghost { border-color: rgba(17,17,17,.35); }

/* =========================== HERO: CARTEL ===========================
   Un cartel en la calle, como un tótem de estación: marco de acero,
   papel y tipografía. Detrás, el vídeo del pase. */
.cartel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; min-height: 100vh; min-height: 100svh;
  margin-top: -74px; padding: 112px 0 64px; background: var(--acento-2);
}
.cartel .hx-video::before { opacity: .55; }
.cartel .hx-video video.activo { opacity: 1; }
.cartel .hx-video::after { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.08) 26%, rgba(0,0,0,.08) 70%, rgba(0,0,0,.4) 100%); }
.cartel-wrap { width: 100%; }
.cartel-marco {
  width: min(540px, 100%); margin: 0 auto; padding: 12px;
  background: linear-gradient(118deg, #EDEDEA 0%, #A7A8A4 22%, #DCDCD8 46%, #9A9B97 70%, #D5D5D1 100%);
  box-shadow: 0 40px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.5);
}
.cartel-panel {
  display: flex; flex-direction: column; min-height: min(72vh, 660px); padding: 30px 30px 26px;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.cartel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.cartel-marca { display: grid; grid-template-columns: repeat(2, 15px); gap: 4px; flex: none; }
.cartel-marca i { width: 15px; height: 15px; background: var(--ink); }
.cartel-marca i:nth-child(4) { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.cartel-dias { list-style: none; margin: 0; padding: 0; font-size: .74rem; line-height: 1.4; text-align: left; }
.cartel-dias li { margin: 0; }
.cartel-h1 { margin: auto 0 0; color: var(--ink); letter-spacing: 0; }
.cartel-wm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; font: 800 clamp(3.6rem, 2.2rem + 4.6vw, 6rem)/.86 var(--head); letter-spacing: -.06em; }
.cartel-wm small { font: 700 .72rem/1 var(--body); letter-spacing: .01em; text-transform: uppercase; }
.cartel-sub { display: block; margin-top: 10px; font: 500 clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem)/1.08 var(--head); letter-spacing: -.035em; }
.cartel-cta { align-self: flex-start; margin-top: 22px; color: var(--ink); font-size: .95rem; text-decoration: none; }
.cartel-cta span { display: inline-block; transition: transform .3s ease; }
.cartel-cta:hover { text-decoration: none; color: var(--ink); }
.cartel-cta:hover span { transform: translateX(5px); }
.cartel-pie { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: .78rem; color: rgba(244,241,235,.75); }

/* ---------- Manifiesto: el titular de la V1, en grande y sobre papel ---------- */
.manifiesto { position: relative; overflow: hidden; padding: 110px 0 18px; background: var(--paper); }
.manif-top { display: flex; justify-content: space-between; gap: 24px; font-size: .78rem; color: var(--ink-2); margin-bottom: 40px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.manif-h { max-width: 15ch; margin: 0; font-size: clamp(2.8rem, 1.2rem + 5vw, 6.2rem); line-height: .92; letter-spacing: -.06em; color: var(--ink); }
.manif-h em { font-style: normal; color: var(--ink-2); }
.manif-pie { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-top: 36px; }
.manif-pie .lead { margin: 0; max-width: 58ch; color: var(--ink-2); }
.manif-pie .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.manifiesto .hx-note { color: var(--ink-2); }
.manifiesto .hx-note a { color: var(--ink); }
.manifiesto .wheel-stage { margin-top: 30px; }
.manifiesto .ring-hint { color: var(--ink-2); text-align: center; }

@media (max-width: 980px) {
  .manif-pie { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cartel { padding: 96px 0 48px; }
  .cartel-panel { min-height: 68vh; padding: 22px 20px 20px; }
  .cartel-dias { font-size: .68rem; }
  .manifiesto { padding-top: 70px; }
  .manif-top { flex-direction: column; gap: 4px; }
}

/* ---------- Énfasis de los titulares: tinta sobre papel, papel sobre negro ---------- */
[data-split] em .w > span { color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); }
.page-hero [data-split] em .w > span, .bg-dark [data-split] em .w > span, .hx [data-split] em .w > span { color: #F4F1EB; background-image: linear-gradient(#F4F1EB, #F4F1EB); }
.manif-h em { color: var(--ink); }

/* ---------- Cabecera de las páginas interiores: también cartel ---------- */
.page-hero { background: var(--paper); color: var(--ink); padding: 156px 0 72px; border-bottom: 1px solid var(--ink); }
.page-hero h1 { color: var(--ink); font-size: clamp(3rem, 1.3rem + 5vw, 6.4rem); line-height: .92; letter-spacing: -.06em; max-width: 14ch; }
.page-hero h1 em { color: var(--ink); }
.page-hero [data-split] em .w > span { color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); }
.page-hero .lead { color: var(--ink-2); }
.page-hero strong { color: var(--ink); }
.page-hero .kicker { color: var(--ink-2); }
.page-hero .kicker b { color: var(--ink); }
.page-hero .kicker .sep { background: var(--ink); }
.page-hero .live, .page-hero .live::after { background: var(--ink); }
.page-hero .btn-primary { background: var(--ink); color: var(--paper); }
.page-hero .btn-primary::before { background: var(--acento-2); }
.page-hero .btn-primary:hover { color: var(--paper); }
.page-hero .btn-ghost { color: var(--ink); border-color: rgba(17,17,17,.35); }
.page-hero .btn-ghost::before { background: var(--ink); }
.page-hero .btn-ghost:hover { color: var(--paper); border-color: var(--ink); }
/* con hero claro, la cabecera va en tinta desde el principio */
body:has(.page-hero) .site-header.over:not(.scrolled) .brand,
body:has(.page-hero) .site-header.over:not(.scrolled) .brand span { color: var(--ink); }
body:has(.page-hero) .site-header.over:not(.scrolled) .nav-toggle { color: var(--ink); border-color: var(--line); }
body:has(.page-hero) .site-header.over:not(.scrolled) .btn-primary { background: var(--ink); color: var(--paper); }
@media (min-width: 721px) {
  body:has(.page-hero) .site-header.over:not(.scrolled) .nav-links a:not(.btn) { color: var(--ink); }
}

/* el cartel no lleva subrayado de rotulador */
.cartel-h1 span, .cartel-h1 small { background: none; padding: 0; }
/* sin rotulador en los titulares: el énfasis lo dan el tamaño y el peso */
h1 span, h2 span { background: none; padding: 0; }

/* =========================== PORTADA CORTA ===========================
   Cinco bloques: cartel, servicios, método, comandas y contacto. */

/* ---------- Servicios: seis puntos, una línea cada uno ---------- */
.sv-sec { padding: 110px 0 100px; }
.sv-top { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding-bottom: 22px; margin-bottom: 0; border-bottom: 1px solid var(--ink); }
.sv-top h2 { margin: 0; max-width: 16ch; font-size: clamp(2.4rem, 1.1rem + 4vw, 5rem); line-height: .94; letter-spacing: -.06em; }
.sv-top h2 em { font-style: normal; color: var(--ink-2); }
.sv-top [data-split] em .w > span { color: var(--ink-2); background-image: none; }
.sv-top p { margin: 0; font-size: .95rem; color: var(--ink-2); text-align: right; }
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.sv {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 250px;
  padding: 26px 28px 28px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink);
  transition: background .35s ease, color .35s ease;
}
.sv:nth-child(3n) { border-right: 0; }
.sv:hover { text-decoration: none; background: var(--ink); color: var(--paper); }
.sv-n { font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.sv h3 { margin: 18px 0 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1; letter-spacing: -.045em; color: inherit; }
.sv p { margin: 0; max-width: 30ch; font-size: .98rem; line-height: 1.45; color: inherit; opacity: .78; }
.sv-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.sv-tags i { font-style: normal; font-size: .74rem; padding: 4px 9px; border: 1px solid currentColor; border-radius: 99px; opacity: .8; }
.sv-go { position: absolute; top: 24px; right: 26px; font-size: 1.3rem; transition: transform .35s ease; }
.sv:hover .sv-go { transform: translateX(5px); }

/* ---------- Método en cuatro letras ---------- */
.pase-corto { padding: 90px 0 100px; background: var(--acento-2); color: #F4F1EB; }
.pc-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(244,241,235,.35); font-size: .9rem; }
.pc-top a { color: #F4F1EB; text-decoration: underline; text-underline-offset: 5px; }
.pase-letras { display: grid; grid-template-columns: repeat(4, 1fr); }
.pase-l { padding: 26px 26px 0 0; border-right: 1px solid rgba(244,241,235,.2); margin-right: 26px; }
.pase-l:last-child { border-right: 0; margin-right: 0; }
.pase-l b { display: block; font: 800 clamp(5rem, 3rem + 7vw, 10rem)/.82 var(--head); letter-spacing: -.06em; color: #F4F1EB; }
.pase-l h3 { margin: 18px 0 6px; font-size: 1.3rem; color: #F4F1EB; }
.pase-l p { margin: 0; font-size: .95rem; color: #ACA9A4; max-width: 24ch; }

/* comandas: papel sobre papel, con aire */
.pase-sec { padding: 100px 0 90px; }

@media (max-width: 980px) {
  .sv-grid { grid-template-columns: repeat(2, 1fr); }
  .sv:nth-child(3n) { border-right: 1px solid var(--ink); }
  .sv:nth-child(2n) { border-right: 0; }
  .pase-letras { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .pase-l:nth-child(2n) { border-right: 0; margin-right: 0; }
  .sv-top { grid-template-columns: 1fr; }
  .sv-top p { text-align: left; }
}
@media (max-width: 640px) {
  .sv-sec { padding: 70px 0 60px; }
  .sv-grid { grid-template-columns: 1fr; }
  .sv, .sv:nth-child(3n) { min-height: 0; padding: 22px 0 24px; border-right: 0; }
  .sv:hover { background: transparent; color: var(--ink); }
  .sv h3 { margin-top: 10px; }
  .sv-go { right: 0; }
  .pase-corto { padding: 64px 0 70px; }
  .pase-l { padding-right: 14px; margin-right: 14px; }
  .pase-l b { font-size: 4.6rem; }
  .pase-l h3 { font-size: 1.1rem; }
  .pc-top { flex-direction: column; gap: 6px; }
  .pase-sec { padding: 60px 0 50px; }
}

/* ---------- Quiénes somos: socios, filosofía y empresas ---------- */
.ns-sec { padding: 110px 0 100px; border-top: 1px solid var(--ink); }
.ns-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 30px; margin-top: 34px; align-items: start; }
.ns-socio { margin: 0; }
.ns-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.ns-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.ns-socio:hover .ns-foto img { filter: none; transform: scale(1.03); }
.ns-pendiente { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--ink-2); }
.ns-pendiente span { font-size: .8rem; color: var(--ink-2); }
.ns-socio figcaption { padding-top: 14px; }
.ns-socio b { display: block; font: 700 1.35rem/1.1 var(--head); letter-spacing: -.04em; color: var(--ink); }
.ns-socio figcaption span { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ns-socio p { margin: 10px 0 0; font-size: .94rem; line-height: 1.5; color: var(--ink-2); }
.ns-k { display: block; padding-bottom: 12px; font-size: .78rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); }
.ns-filo ol { list-style: none; margin: 0; padding: 0; counter-reset: filo; }
.ns-filo li { counter-increment: filo; margin: 0; padding: 18px 0 18px 40px; position: relative; border-bottom: 1px solid var(--line); font-size: .96rem; line-height: 1.45; color: var(--ink-2); }
.ns-filo li::before { content: '0' counter(filo); position: absolute; left: 0; top: 20px; font-size: .74rem; font-weight: 600; color: var(--ink); }
.ns-filo li b { display: block; margin-bottom: 4px; font: 700 clamp(1.3rem, 1rem + .9vw, 1.7rem)/1.05 var(--head); letter-spacing: -.04em; color: var(--ink); }
.ns-marcas { margin-top: 80px; }
.ns-marcas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.ns-marcas li { margin: 0; padding: 30px 20px 30px 0; border-right: 1px solid var(--line); font: 700 clamp(1.4rem, .9rem + 1.6vw, 2.4rem)/1 var(--head); letter-spacing: -.045em; color: var(--ink-2); transition: color .3s ease; }
.ns-marcas li + li { padding-left: 20px; }
.ns-marcas li:last-child { border-right: 0; }
.ns-marcas li:hover { color: var(--ink); }
.ns-marcas li img { display: block; max-width: 100%; max-height: 54px; filter: grayscale(1); }

@media (max-width: 980px) {
  .ns-grid { grid-template-columns: 1fr 1fr; }
  .ns-filo { grid-column: 1 / -1; }
  .ns-marcas ul { grid-template-columns: 1fr 1fr; }
  .ns-marcas li:nth-child(2n) { border-right: 0; }
  .ns-marcas li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ns-marcas li:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 640px) {
  .ns-sec { padding: 70px 0 60px; }
  .ns-grid { gap: 18px; }
  .ns-socio b { font-size: 1.1rem; }
  .ns-socio p { font-size: .86rem; }
  .ns-marcas { margin-top: 50px; }
  .ns-marcas li { padding: 20px 12px 20px 0; }
  .ns-marcas li + li { padding-left: 12px; }
}

/* logos de clientes: tinta sobre papel, todos a la misma altura óptica */
.ns-marcas li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 170px; }
.ns-marcas li img { filter: none; opacity: .88; transition: opacity .3s ease, transform .4s ease; }
.ns-marcas li:hover img { opacity: 1; transform: scale(1.04); }
.ns-marcas .lg-w { width: auto; max-width: 78%; max-height: 62px; }
.ns-marcas .lg-c { width: auto; height: 104px; max-height: none; }
.ns-destacado span { padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--paper); font: 600 .7rem/1.2 var(--body); letter-spacing: .02em; text-align: center; }
.ns-nota { margin: 14px 0 0; font-size: .82rem; color: var(--ink-2); }
@media (max-width: 640px) {
  .ns-marcas li { min-height: 130px; }
  .ns-marcas .lg-w { max-height: 44px; }
  .ns-marcas .lg-c { height: 80px; }
  .ns-destacado span { font-size: .62rem; }
}

/* =========================== AUDITORÍA: cada bloque, una función =========================== */
/* cinta: banda de tinta con las palabras del oficio */
.marquee { background: var(--ink); color: var(--paper); padding: 20px 0; }
.marquee-track span { font-weight: 600; letter-spacing: -.035em; font-size: clamp(1.1rem, .85rem + .9vw, 1.6rem); }
.marquee-track span::after { width: 7px; height: 7px; border-radius: 0; opacity: .6; }

/* método: en qué orden y qué te llevas */
.pase-t { display: inline-block; margin-bottom: 16px; padding: 3px 10px; border: 1px solid rgba(244,241,235,.4); border-radius: 99px; font-size: .74rem; color: #F4F1EB; }
.pase-l p { color: #C9C5BD; }

/* comandas: con su título, sobre papel */
.pc-top.pc-claro { margin-bottom: 44px; border-bottom-color: var(--ink); color: var(--ink); }
.pc-top.pc-claro a { color: var(--ink); }

/* logos: cinta que se desliza (se pausa al pasar el ratón) */
.lg-cinta { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ns-marcas .lg-track { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: cinta 38s linear infinite; }
.lg-cinta:hover .lg-track { animation-play-state: paused; }
.ns-marcas .lg-track li { flex: none; width: 280px; min-height: 160px; padding: 0 34px; border: 0; }
.ns-marcas .lg-track li + li { padding-left: 34px; }
@media (max-width: 640px) {
  .ns-marcas .lg-track li { width: 190px; min-height: 120px; padding: 0 20px; }
  .ns-marcas .lg-track li + li { padding-left: 20px; }
  .pase-t { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-marcas .lg-track { animation: none; }
}

/* =========================== PÁGINAS INTERIORES CORTAS =========================== */
.page-hero { padding: 132px 0 54px; }
body:has(.page-hero) main > section:not(.page-hero):not(#metodo):not(.pide) { padding-top: 84px; padding-bottom: 84px; }
.pide { padding-top: 70px; padding-bottom: 70px; }

/* «Sigue mirando»: una línea de enlaces */
.sigue-corto { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.sigue-corto .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 34px; padding-top: 26px; padding-bottom: 26px; }
.sigue-corto span { font-size: .78rem; font-weight: 600; color: var(--ink-2); margin-right: 6px; }
.sigue-corto a { font: 700 clamp(1.2rem, .9rem + 1vw, 1.7rem)/1.1 var(--head); letter-spacing: -.04em; color: var(--ink); text-decoration: none; }
.sigue-corto a::after { content: ' →'; display: inline-block; transition: transform .3s ease; }
.sigue-corto a:hover { text-decoration: none; color: var(--ink); }
.sigue-corto a:hover::after { transform: translateX(4px); }

/* listas de solo títulos */
.fc-list.solo li { padding: 11px 0; }
.mn-incluye.solo { gap: 0; }
.mn-incluye.solo li { padding: 12px 0; border-top: 1px solid var(--line); }
.mn-incluye.solo li:last-child { border-bottom: 1px solid var(--line); }
.tech-points.solo b { margin: 0; }
.mk-incluye.solo { margin-top: 26px; }
.deliv.solo { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.deliv.solo > div { grid-template-columns: 1fr; padding: 22px 20px 22px 0; border-radius: 0; }
.deliv.solo b { font: 700 1.15rem/1.15 var(--head); letter-spacing: -.035em; color: var(--ink); }

@media (max-width: 980px) {
  .deliv.solo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .page-hero { padding: 110px 0 40px; }
  body:has(.page-hero) main > section:not(.page-hero):not(#metodo):not(.pide) { padding-top: 60px; padding-bottom: 60px; }
  .deliv.solo { grid-template-columns: 1fr; }
  .sigue-corto .wrap { gap: 8px 20px; }
}
.bg-lime h2 span { background: none; padding: 0; }
.sigue-corto a::after { content: '→'; margin-left: .3em; }

/* =========================== PÁGINAS DE SERVICIO =========================== */
/* qué hacemos */
.qh-sec { padding-top: 70px !important; }
.qh { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.qh li { margin: 0; padding: 24px 26px 28px 0; border-bottom: 1px solid var(--line); }
.qh li:nth-child(3n+2), .qh li:nth-child(3n) { padding-left: 26px; border-left: 1px solid var(--line); }
.qh-n { font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.qh h3 { margin: 14px 0 8px; font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); line-height: 1.05; letter-spacing: -.045em; }
.qh p { margin: 0; max-width: 34ch; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }

/* cómo lo hacemos + te llevas */
.cm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: paso; }
.cm li { position: relative; margin: 0; padding: 22px 22px 0 0; }
.cm li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left; }
.cm li + li { padding-left: 0; }
.cm-t { display: inline-block; padding: 3px 9px; border: 1px solid var(--ink); border-radius: 99px; font-size: .72rem; font-weight: 600; }
.cm h3 { margin: 14px 0 6px; font-size: 1.2rem; letter-spacing: -.035em; }
.cm p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); max-width: 28ch; }
.llevas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 46px; padding: 20px 24px; background: var(--ink); color: var(--paper); }
.llevas > span { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.llevas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.llevas li { margin: 0; padding: 6px 12px; border: 1px solid rgba(244,241,235,.4); border-radius: 99px; font-size: .88rem; }

/* análisis: bloque de viabilidad junto al mapa */
.viab .ns-k { margin-bottom: 18px; }
.viab h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.05; letter-spacing: -.045em; margin: 0 0 12px; }
.viab p { color: var(--ink-2); margin: 0 0 22px; }

/* concepto: ficha con sello */
.fcn-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
.fcn { position: relative; padding: 26px 30px 28px; background: #FFFEF9; box-shadow: var(--shadow); rotate: -.6deg; }
.fcn header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 600 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.fcn dl { margin: 0; }
.fcn dl > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px dashed #BDB8AC; }
.fcn dt { font: 600 .7rem/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.fcn dd { margin: 0; font-size: .96rem; line-height: 1.4; color: var(--ink); }
.fcn-sello {
  position: absolute; right: 22px; bottom: 26px; padding: 10px 14px; border: 3px solid var(--acento); border-radius: 6px;
  font: 700 .82rem/1.05 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; text-align: center;
  color: var(--acento); rotate: -12deg; opacity: .85; mix-blend-mode: multiply;
}
.js .fcn .fcn-sello { scale: 2.4; opacity: 0; transition: scale .45s cubic-bezier(.2,.9,.3,1.3) .9s, opacity .2s ease .9s; }
.js .fcn.in .fcn-sello { scale: 1; opacity: .85; }
.fcn-txt h2 { margin: 16px 0 14px; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: .98; letter-spacing: -.055em; max-width: 14ch; }
.fcn-txt p { color: var(--ink-2); max-width: 44ch; }
.fcn-link { display: inline-block; margin: 6px 0 18px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }

/* fotografía y vídeo: hoja de contactos */
.hc-sec { background: var(--acento-2); color: #F4F1EB; }
.hc-sec .pc-top { border-bottom-color: rgba(244,241,235,.35); margin-bottom: 30px; }
.hc {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 26px 18px;
  background: var(--acento-2); position: relative;
  /* perforaciones de la tira, arriba y abajo */
  background-image: radial-gradient(circle, var(--acento-2) 3px, transparent 3.5px), radial-gradient(circle, var(--acento-2) 3px, transparent 3.5px);
  background-size: 22px 14px, 22px 14px; background-position: 0 4px, 0 calc(100% - 4px); background-repeat: repeat-x;
}
.hc-f { margin: 0; }
.hc-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #222; }
.hc-img img, .hc-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-img video { opacity: 0; transition: opacity 1s ease; }
.hc-img video.on { opacity: 1; }
.hc-f.vid .hc-img::after { content: '▶'; position: absolute; top: 10px; right: 10px; font-size: .66rem; color: #F4F1EB; background: rgba(0,0,0,.5); padding: 3px 6px; }
.hc-f figcaption { display: flex; gap: 10px; padding-top: 8px; font: 500 .72rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #ACA9A4; }
.hc-f figcaption b { color: #F4F1EB; }
.hc-f.marcada .hc-img { outline: 3px solid #D9573F; outline-offset: 4px; border-radius: 2px; }
.hc-nota { position: relative; margin: 26px 0 0; font-size: .8rem; color: #ACA9A4; max-width: 70ch; }
.hc-mano { display: block; margin-bottom: 8px; font: 700 1.35rem/1 'Caveat', cursive; color: #E2775F; rotate: -2deg; }

@media (max-width: 980px) {
  .qh { grid-template-columns: 1fr 1fr; }
  .qh li:nth-child(3n+2), .qh li:nth-child(3n) { padding-left: 0; border-left: 0; }
  .qh li:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--line); }
  .cm { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .fcn-split { grid-template-columns: 1fr; gap: 40px; }
  .hc { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .qh { grid-template-columns: 1fr; }
  .qh li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .qh li { padding: 18px 0 20px; }
  .cm { grid-template-columns: 1fr; }
  .fcn { padding: 20px 18px 24px; rotate: 0deg; }
  .fcn dl > div { grid-template-columns: 1fr; gap: 2px; }
  .fcn-sello { position: static; display: inline-block; margin-top: 16px; }
  .llevas { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .js .fcn .fcn-sello { scale: 1; opacity: .85; transition: none; } }
.fcn { padding-bottom: 104px; }
.fcn-sello { bottom: 24px; }
.sigue-corto .wrap { gap: 8px 26px; }
.sigue-corto a { font-size: clamp(1.02rem, .85rem + .55vw, 1.32rem); }
@media (max-width: 640px) { .fcn { padding-bottom: 24px; } }

/* =========================== OCHO SERVICIOS, COCINA Y NORMATIVA =========================== */
.sv-grid.sv-8 { grid-template-columns: repeat(4, 1fr); }
.sv-8 .sv { min-height: 240px; padding: 24px 22px 26px; }
.sv-8 .sv:nth-child(3n) { border-right: 1px solid var(--ink); }
.sv-8 .sv:nth-child(4n) { border-right: 0; }
.sv-8 .sv h3 { font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); }
.sv-8 .sv p { font-size: .92rem; }

/* cocina: ficha técnica de receta */
.ftr-top { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px dashed #BDB8AC; }
.ftr-foto { aspect-ratio: 1 / 1; overflow: hidden; }
.ftr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ftr-nombre { display: block; font: 700 1.35rem/1.1 var(--head); letter-spacing: -.035em; color: var(--ink); }
.ftr-meta { margin: 6px 0 8px; font: 500 .74rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.ftr-alerg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ftr-alerg i { font-style: normal; font-size: .7rem; font-weight: 600; padding: 3px 8px; border: 1px solid var(--acento); color: var(--acento); border-radius: 99px; }
.ftr-tabla { width: 100%; border-collapse: collapse; margin: 6px 0 0; font: 500 .78rem/1.35 'IBM Plex Mono', ui-monospace, monospace; }
.ftr-tabla th { text-align: left; padding: 10px 6px 6px 0; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
.ftr-tabla td { padding: 7px 6px 7px 0; border-bottom: 1px dashed #D2CCC0; color: var(--ink); }
.ftr-tabla th:last-child, .ftr-tabla td:last-child { text-align: right; padding-right: 0; }
.ftr-tot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 2px solid var(--ink); font-size: .8rem; color: var(--ink-2); }
.ftr-tot b { color: var(--ink); font-family: var(--head); font-size: 1.05rem; margin-left: 4px; }
.ftr-pasos { margin: 14px 0 0; padding-left: 20px; font-size: .86rem; line-height: 1.45; color: var(--ink); }
.ftr-pasos li { margin: 0 0 4px; padding-right: 110px; }

/* normativa: carpeta de cumplimiento */
.cp { padding: 26px 30px 24px; background: #FFFEF9; box-shadow: var(--shadow); border-left: 10px solid var(--ink); }
.cp header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font: 600 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.cp-score { display: flex; align-items: baseline; gap: 12px; padding: 16px 0 6px; }
.cp-score b { font: 800 2.4rem/1 var(--head); letter-spacing: -.05em; color: var(--ink); }
.cp-score span { font-size: .82rem; color: var(--ink-2); }
.cp-g { padding-top: 12px; }
.cp-g > b { display: block; padding-bottom: 6px; font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cp-g ul { list-style: none; margin: 0; padding: 0; }
.cp-g li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; margin: 0; padding: 8px 0; border-bottom: 1px dashed #D2CCC0; font-size: .92rem; color: var(--ink); }
.cp-g li small { font: 500 .74rem/1.2 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.cp-g li i { width: 16px; height: 16px; border: 1.5px solid var(--ink); display: grid; place-items: center; }
.cp-ok i { background: var(--ink); }
.cp-ok i::after { content: ''; width: 7px; height: 4px; margin-top: -2px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); rotate: -45deg; }
.cp-pend i, .cp-aviso i { border-color: var(--acento); }
.cp-pend small, .cp-aviso small { color: var(--acento); font-weight: 600; }
.cp-aviso i::after { content: '!'; font: 700 .7rem/1 var(--body); color: var(--acento); }
.cp-pend i::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.cm-nota { margin: 18px 0 0; max-width: 80ch; font-size: .84rem; color: var(--ink-2); }

@media (max-width: 1180px) { .sv-grid.sv-8 { grid-template-columns: repeat(2, 1fr); } .sv-8 .sv:nth-child(n) { border-right: 1px solid var(--ink); } .sv-8 .sv:nth-child(2n) { border-right: 0; } }
@media (max-width: 640px) {
  .sv-grid.sv-8 { grid-template-columns: 1fr; }
  .sv-8 .sv:nth-child(n) { border-right: 0; padding: 22px 0 24px; min-height: 0; }
  .ftr-top { grid-template-columns: 80px 1fr; }
  .ftr-pasos li { padding-right: 0; }
  .ftr-tabla { font-size: .7rem; }
  .cp { padding: 20px 16px; border-left-width: 6px; }
  .cp-g li { grid-template-columns: 18px 1fr; }
  .cp-g li small { grid-column: 2; }
}

/* =========================== REPASO GENERAL =========================== */
/* paso suave entre páginas (navegadores que lo admiten) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* aviso de web de trabajo: una línea fina de tinta, no una banda amarilla */
.placeholder-banner { background: var(--ink); border: 0; color: #CFCAC0; font-size: .72rem; padding: 6px 0; font-weight: 400; }
.placeholder-banner a { color: inherit; }

/* menú: desplegable de servicios */
.nav-dd { position: relative; }
.nav-dd-btn::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; transition: rotate .25s ease; }
.nav-dd-menu a b { font: 600 .7rem/1 var(--body); color: var(--ink-2); margin-right: 10px; }
@media (min-width: 721px) {
  .nav-dd-menu {
    position: absolute; top: 100%; left: -16px; z-index: 80; display: grid; min-width: 320px; margin-top: 14px; padding: 8px;
    background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 24px 50px rgba(17,17,17,.18);
    opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .2s ease, translate .2s ease, visibility .2s;
  }
  .nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; translate: 0 0; }
  .nav-dd:hover .nav-dd-btn::after { rotate: 225deg; margin-bottom: -1px; }
  .site-header .nav-dd-menu a, .site-header.over:not(.scrolled) .nav-dd-menu a:not(.btn) { display: flex; align-items: baseline; padding: 10px 12px; color: var(--ink); font-size: .92rem; text-decoration: none; }
  .nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--ink); color: var(--paper) !important; }
  .nav-dd-menu a:hover b, .nav-dd-menu a.active b { color: var(--paper); }
  .nav-dd-menu .dd-extra { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 12px !important; color: var(--ink-2) !important; }
  .nav-dd-menu .dd-extra b { margin: 0 0 0 6px; font-size: .92rem; color: var(--ink); }
}
@media (max-width: 720px) {
  .nav-dd { width: 100%; }
  .nav-dd-btn::after { display: none; }
  .nav-dd-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 4px 0 8px 12px; border-bottom: 1px solid var(--forest-line); }
  .nav-links .nav-dd-menu a { padding: 8px 0; border-bottom: 0; font-size: .86rem; }
  .nav-dd-menu a b { color: #8E8A82; }
  .nav-dd-menu .dd-extra { grid-column: 1 / -1; }
  .nav-dd-menu .dd-extra b { color: inherit; margin-left: 4px; }
}

/* «siguiente servicio»: cartel grande al final de cada servicio */
.siguiente { display: block; background: var(--ink); color: var(--paper); text-decoration: none; transition: background .35s ease; }
.siguiente .wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 30px; padding-top: 56px; padding-bottom: 56px; }
.siguiente small { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; color: #ACA9A4; }
.siguiente b { font: 800 clamp(2.4rem, 1.2rem + 4.2vw, 5.4rem)/.92 var(--head); letter-spacing: -.06em; }
.siguiente b i { font-style: normal; font-size: .32em; vertical-align: top; margin-right: 14px; letter-spacing: 0; color: #ACA9A4; }
.siguiente em { font-style: normal; font: 300 clamp(2.4rem, 1.2rem + 4vw, 5rem)/1 var(--head); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.siguiente:hover { text-decoration: none; color: var(--paper); background: #262624; }
.siguiente:hover em { transform: translateX(14px); }
.siguiente + .sigue-corto { border-top: 0; }

/* páginas legales */
.legal { padding-top: 60px !important; }
.legal h2 { margin: 38px 0 10px; font-size: 1.5rem; letter-spacing: -.04em; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal-aviso { padding: 12px 16px; border: 1px dashed var(--acento); color: var(--acento) !important; font-size: .88rem; }
mark.pend { background: rgba(178,60,36,.12); color: #8F2E1A; padding: 0 4px; border-radius: 3px; }

/* herramientas: preguntas y explicaciones plegadas */
.tool-sec ~ section .faq { margin-top: 22px; }

/* portada en móvil: servicios de dos en dos, más compactos */
@media (max-width: 640px) {
  .sv-grid.sv-8 { grid-template-columns: 1fr 1fr; }
  .sv-8 .sv:nth-child(n) { padding: 16px 12px 18px 0; min-height: 0; border-right: 1px solid var(--ink); }
  .sv-8 .sv:nth-child(2n) { border-right: 0; padding-left: 12px; padding-right: 0; }
  .sv-8 .sv h3 { margin-top: 6px; font-size: 1.12rem; }
  .sv-8 .sv p { font-size: .8rem; line-height: 1.4; }
  .sv-8 .sv-tags { display: none; }
  .sv-8 .sv-go { top: 14px; right: 0; font-size: 1rem; }
  .sv-8 .sv:nth-child(2n) .sv-go { right: 0; }
  .siguiente .wrap { padding-top: 40px; padding-bottom: 40px; }
}

/* =========================== TECNOLOGÍA: PROGRAMA DE CONTROL Y 9 SERVICIOS =========================== */
.app { background: var(--acento-2); color: #F4F1EB; padding: 20px; border-radius: 22px; box-shadow: 0 40px 80px rgba(17,17,17,.25), inset 0 0 0 2px #2C2F31; }
.app-top { display: flex; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; font-size: .82rem; }
.app-top b { font: 700 1.05rem/1 var(--head); letter-spacing: -.03em; }
.app-top span { color: #ACA9A4; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }
.app-tabs button { appearance: none; border: 1px solid rgba(244,241,235,.25); background: transparent; color: #CFCAC0; border-radius: 99px; padding: 7px 12px; font: 600 .76rem/1 var(--body); cursor: pointer; transition: background .25s ease, color .25s ease; }
.app-tabs button:hover { color: #F4F1EB; border-color: rgba(244,241,235,.5); }
.app-tabs button.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.app-prog { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; background: color-mix(in srgb, var(--acento-2) 88%, #fff); border-radius: 12px; font-size: .78rem; color: #ACA9A4; }
.app-prog i { height: 6px; background: #333230; border-radius: 99px; overflow: hidden; }
.app-prog b { display: block; height: 100%; width: 0; background: var(--paper); border-radius: 99px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.app-prog span:last-child { font: 700 .9rem/1 var(--head); color: #F4F1EB; }
.app-list { list-style: none; margin: 0; padding: 0; }
.app-list li { margin: 0; }
.app-it { appearance: none; width: 100%; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 12px 10px; border: 0; border-bottom: 1px solid #2A2928; background: transparent; color: #F4F1EB; font: 500 .92rem/1.3 var(--body); text-align: left; cursor: pointer; border-radius: 8px; transition: background .2s ease; }
.app-it:hover { background: color-mix(in srgb, var(--acento-2) 88%, #fff); }
.app-it i { width: 20px; height: 20px; border: 1.5px solid #6F6C66; border-radius: 6px; display: grid; place-items: center; transition: background .25s ease, border-color .25s ease; }
.app-it.hecho i { background: var(--paper); border-color: var(--paper); }
.app-it.hecho i::after { content: ''; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); rotate: -45deg; }
.app-it.hecho span { color: #8E8A82; text-decoration: line-through; text-decoration-color: #5E5B56; }
.app-it small { font: 500 .72rem/1.2 'IBM Plex Mono', ui-monospace, monospace; color: #ACA9A4; text-align: right; }
.app-it:not(.hecho) small { color: #E2775F; }
.app-pie { margin: 12px 4px 0; font-size: .72rem; color: #8E8A82; }

/* portada: 9 servicios en 3 × 3 */
.sv-grid.sv-9 { grid-template-columns: repeat(3, 1fr); }
.sv-9 .sv:nth-child(n) { border-right: 1px solid var(--ink); }
.sv-9 .sv:nth-child(3n) { border-right: 0; }
@media (max-width: 980px) {
  .sv-grid.sv-9 { grid-template-columns: 1fr 1fr; }
  .sv-9 .sv:nth-child(n) { border-right: 1px solid var(--ink); }
  .sv-9 .sv:nth-child(2n) { border-right: 0; }
}
@media (max-width: 640px) {
  .sv-9 .sv:nth-child(n) { padding: 16px 12px 18px 0; min-height: 0; }
  .sv-9 .sv:nth-child(2n) { padding-left: 12px; padding-right: 0; }
  .sv-9 .sv h3 { margin-top: 6px; font-size: 1.12rem; }
  .sv-9 .sv p { font-size: .8rem; line-height: 1.4; }
  .sv-9 .sv-tags { display: none; }
  .sv-9 .sv-go { top: 14px; right: 0; font-size: 1rem; }
  .app { padding: 14px; border-radius: 16px; }
  .app-it { grid-template-columns: 20px 1fr; }
  .app-it small { grid-column: 2; text-align: left; }
}

/* tecnología: dashboard de ventas y KPIs */
#kpis { padding-top: 70px !important; padding-bottom: 20px !important; }
.kpd { padding: 24px 26px 20px; background: #FFFEF9; border: 1px solid var(--line); box-shadow: var(--shadow); }
.kpd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.kpd .fc-k { color: var(--ink-2); }
.kpd-t { display: block; margin-top: 6px; font: 700 1.2rem/1.1 var(--head); letter-spacing: -.035em; color: var(--ink); }
.kpd-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-2); }
.kpd-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(46,125,84,.15); }
.kpd-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.kp { padding: 18px 16px 16px 0; border-bottom: 1px solid var(--line); }
.kp + .kp { padding-left: 16px; border-left: 1px solid var(--line); }
.kp span { display: block; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.kp b { display: block; margin: 8px 0 6px; font: 800 clamp(1.5rem, 1rem + 1.2vw, 2.2rem)/1 var(--head); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kp small { font-size: .74rem; font-weight: 600; }
.kp small em { font-style: normal; font-weight: 400; color: var(--ink-2); }
.kp-up small { color: var(--good); }
.kp-down small { color: var(--acento); }
.kpd-spark { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; padding-top: 16px; }
.kpd-spark > span { font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.kpd-bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.kpd-bars i { flex: 1; height: var(--h); background: var(--ink); opacity: .85; transform-origin: bottom; }
.kpd-bars i:last-child { background: var(--good); opacity: 1; }
.js .kpd .kpd-bars i { transform: scaleY(0); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.js .kpd.in .kpd-bars i { transform: none; }
.kpd-bars i:nth-child(n) { transition-delay: calc(var(--i, 0) * 1ms); }
@media (max-width: 980px) { .kpd-grid { grid-template-columns: repeat(3, 1fr); } .kp:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 640px) {
  .kpd { padding: 18px 14px 16px; }
  .kpd-grid { grid-template-columns: 1fr 1fr; }
  .kp:nth-child(n) { padding-left: 12px; border-left: 1px solid var(--line); }
  .kp:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kpd-spark { grid-template-columns: 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .js .kpd .kpd-bars i { transform: none; transition: none; } }

/* =====================================================================
   ANOTACIONES: de letra a mano (Caveat) a anotación de imprenta en rojo
   Se queda la letra a mano solo en la rúbrica del expediente y en la
   dirección «Mediterránea» del manual de marca, que es una muestra de letra.
   ===================================================================== */
.pg-hand, .pg-hint, .sg-nota, .pd-foto figcaption, .pd-marida a em, .md-nota, .vn-nota, .mn-nota, .ex-mk span,
.of-hand, .of-desc em, .cal-hand, .hc-mano {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-weight: 600 !important; font-style: normal;
  font-size: .7rem !important; line-height: 1.35 !important; letter-spacing: .05em; text-transform: uppercase; rotate: 0deg !important;
}
.mk::after { font: 600 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; rotate: 0deg; }
.notes li, .wf-note, .ficha .verdict, .zt .verdict, .expediente .verdict {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-weight: 500 !important; font-size: .84rem !important; line-height: 1.45 !important; rotate: 0deg !important;
}
.pg-hand::before, .cal-hand::before, .hc-mano::before, .sg-nota::before, .md-nota::before, .vn-nota::before { content: '→ '; }
.hc-mano { color: #E2775F; margin-bottom: 10px; }

/* =====================================================================
   CARTA DEL MÉTODO · de carta clásica (cuero, oro, serifa) a carta de autor
   Misma carta y mismo paso de hoja; papel liso, tinta y tipografía de cartel.
   ===================================================================== */
@media (min-width: 981px) {
  .carta-funda { background: #0E0E0E !important; box-shadow: 0 30px 60px rgba(0,0,0,.4); border-radius: 2px; }
  .carta-funda::before, .carta-funda i { display: none !important; }
}
.ps-steps article.ps-step { background: #F4F1EB !important; color: var(--ink); border-radius: 2px; box-shadow: 0 24px 50px rgba(0,0,0,.3); }
.ps-steps article.ps-step::before { display: none; }
.pg-adorno { display: none !important; }

.ps-steps .pg-head { justify-items: start; text-align: left; margin-bottom: 14px; }
.ps-steps .pg-kick { width: 100%; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); font: 500 .64rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; color: var(--ink-2); }
.ps-steps .ps-step h3.pg-area { margin: 12px 0 0; font-family: var(--head); font-weight: 800; font-size: clamp(2rem, 1.3rem + 1.6vw, 2.7rem); letter-spacing: -.05em; line-height: .95; color: var(--ink); }
.ps-steps .pg-area em { display: inline-block; font-size: 1.7em; line-height: .8; margin-right: .04em; color: var(--ink); vertical-align: -.08em; }
.ps-steps .pg-hand { margin-top: 8px; color: var(--acento); }

.pl-n, .md-curso p, .pd-marida a span, .ps-step .vn-tabla td:first-child b { font-family: var(--body) !important; font-weight: 600 !important; letter-spacing: -.01em; color: var(--ink) !important; }
.pl-d, .md-curso em, .ps-step .vn-tabla td:first-child em { font-family: var(--body) !important; font-style: normal !important; color: var(--ink-2) !important; }
.pg-platos li { border-bottom: 1px solid var(--line) !important; }
.pl-dots { visibility: hidden; }
.pl-sem { color: var(--ink-2); text-transform: uppercase; }
.pg-cuerpo h4, .pd-marida b, .pg-llevar b, .md-k, .sg-k, .vn-k, .ps-step .vn-tabla th { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-weight: 600 !important; letter-spacing: .08em !important; color: var(--ink) !important; }
.pg-cuerpo h4::before, .pg-cuerpo h4::after { background: var(--line) !important; }
.pg-llevar { font-family: var(--body) !important; font-style: normal !important; color: var(--ink-2) !important; text-align: left; }
.pd-pie, .pg-queda li, .md-curso, .ps-step .vn-tabla td { border-color: var(--line) !important; border-style: solid !important; }
.pd-marida a { border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; }

.pd-plato { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }

.md-caja, .pg-sugerencia { outline: 0 !important; border: 1px solid var(--ink) !important; background: transparent !important; }
.md-t { font-family: var(--head) !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: -.04em !important; color: var(--ink) !important; }
.md-precio { border-top-color: var(--ink) !important; }
.pg-sugerencia p, .vn-sumiller p { font-family: var(--body) !important; font-style: normal !important; font-weight: 600; color: var(--ink) !important; }
.vn-sumiller { border-left-color: var(--ink) !important; background: transparent !important; }
.pg-queda li::before { background-color: var(--ink) !important; }
.ps-steps .pg-foot { color: var(--ink-2); }

.ps-steps article.pg-portada { background: var(--acento-2) !important; color: #F4F1EB; }
.ps-steps article.pg-portada::before { display: none; }
.tapa { align-items: stretch; justify-content: space-between; gap: 0; padding: 40px 44px 44px; text-align: left; }
.tapa-arriba { display: flex; justify-content: space-between; align-items: flex-start; }
.tapa .cartel-marca i { background: #F4F1EB; }
.tapa .cartel-marca i:nth-child(4) { background: transparent; box-shadow: inset 0 0 0 2px #F4F1EB; }
.tapa-k { font: 500 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; color: #ACA9A4; }
.tapa-abajo { display: grid; gap: 12px; margin-bottom: 30px; }
.tapa-t { font-family: var(--head) !important; font-weight: 800 !important; font-size: clamp(5rem, 3rem + 6vw, 9rem) !important; line-height: .82 !important; letter-spacing: -.065em !important; margin: 0 !important;
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #F4F1EB !important; filter: none !important; }
.tapa-s { font-family: var(--body) !important; font-style: normal !important; font-size: .95rem !important; color: #CFCAC0 !important; }
.tapa-pie { left: 44px; right: auto; bottom: 40px; font: 500 .62rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; color: #8E8A82; }
.ps-steps .pg-portada .pg-hint { color: #CFCAC0; right: 44px; bottom: 40px; }
.pg-hint::after { content: none !important; }
/* ajuste para que las cuatro hojas sigan cabiendo enteras */
.ps-steps .ps-step h3.pg-area { margin-top: 8px; font-size: clamp(1.6rem, 1.05rem + 1.2vw, 2.2rem); }
.ps-steps .pg-area em { font-size: 1.45em; }
.ps-steps .pg-head { margin-bottom: 6px; gap: 0; }
.ps-steps .pg-kick { padding-bottom: 6px; }
.ps-steps .pg-hand { margin-top: 6px; }
.md-t { font-size: 1.25rem !important; }
.md-curso p { font-size: .95rem !important; }
@media (min-width: 981px) and (max-height: 860px) {
  .ps-steps .ps-step h3.pg-area { font-size: 1.55rem; margin-top: 6px; }
  .ps-steps .pg-area em { font-size: 1.35em; }
  .md-t { font-size: 1.1rem !important; }
}
@media (min-width: 981px) and (max-width: 1200px) and (max-height: 800px) { .ps-steps .pg-v2 .md-nota { display: none; } }

/* menú: la flecha del desplegable no hereda el subrayado antiguo (estaba abajo a la izquierda) */
.nav-links a:not(.btn)::after { display: none; }
.nav-links .nav-dd-btn::after { display: inline-block; position: static; inset: auto; height: 6px; width: 6px; transform: none; background: none; border-radius: 0; }

.nav-links a.nav-dd-btn:not(.btn)::after { content: ''; display: inline-block; position: static; inset: auto; width: 6px; height: 6px; margin: 0 0 3px 7px; transform: none; background: none; border-radius: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; }
@media (max-width: 720px) { .nav-links a.nav-dd-btn:not(.btn)::after { display: none; } }

/* =========================== AJUSTES 19/10 =========================== */
/* menú: sin flecha en «Servicios» (se confundía con una raya suelta); el desplegable se abre igual */
.nav-links a.nav-dd-btn:not(.btn)::after, .nav-dd-btn::after { display: none !important; }

/* formularios: las casillas de una misma fila quedan a la misma altura,
   tengan o no la línea de ayuda bajo la etiqueta */
.field { display: flex; flex-direction: column; }
.field > .input-wrap, .field > input, .field > select, .field > textarea { margin-top: auto; }

/* expediente y fichas: el titular del veredicto en letra de cartel, sin subrayado */
.expediente .verdict strong, .ficha .verdict strong, .zt .verdict strong {
  display: block; margin-bottom: 6px; font-family: var(--head); font-weight: 800; font-size: 1.45rem; line-height: 1.05;
  letter-spacing: -.035em; text-decoration: none;
}
/* escala de riesgo: «tu previsión» debajo de la barra y las cifras más abajo, sin pisarse */
.ex-escala { margin-bottom: 34px; }
.ex-esc-l { margin-top: -8px; }
.ex-mk span { font-size: .62rem !important; }

/* =====================================================================
   CARTA DEL MÉTODO · DIVIDIDA 40/60 (escritorio)
   Izquierda: la foto de cada área con su letra gigante, que cambia al pasar
   la hoja. Derecha: la hoja, más ancha que antes y con aire.
   ===================================================================== */
@media (min-width: 981px) {
  .ps-pin { grid-template-columns: 2fr 3fr; gap: 40px; }
  .ps-visual { border-radius: 2px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
  .ps-l b { left: 30px; bottom: 62px; color: #F4F1EB; font-size: clamp(8rem, 4rem + 8vw, 13rem); letter-spacing: -.07em; }
  .ps-l span { left: 34px; bottom: 28px; font-size: 1.3rem; color: #F4F1EB; }
  .ps-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-size: .68rem; letter-spacing: .1em; color: #ACA9A4; }
  .ps-label b { color: #F4F1EB; font-weight: 600; }
  .ps-nav li { font-size: .78rem; }
  .ps-nav i { height: 2px; border-radius: 0; }

  .ps-steps .ps-step { padding: 40px 52px 28px; }
  .ps-steps .pg-txt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .ps-steps .pg-txt .pg-foot { margin-top: auto; }
  /* la letra grande ya está en la foto: el nombre del área va sin capitular */
  .ps-steps .pg-area em { display: inline; font-size: 1em; vertical-align: baseline; margin: 0; }
  .ps-steps .ps-step h3.pg-area { font-size: clamp(2.2rem, 1.4rem + 1.5vw, 2.9rem); margin-top: 16px; }
  /* platos con aire */
  .ps-steps .pg-platos li { padding: 10px 0 11px; }
  .ps-steps .pl-n { font-size: 1rem; }
  .ps-steps .pl-sem { font-size: .7rem; }
  /* hoja 1: sin la foto pequeña ni las descripciones (la foto ya está a la izquierda) */
  .ps-steps .pg-v1 .pd-foto { display: none; }
  .ps-steps .pg-v1 .pd-cuerpo { flex: 0 0 auto; display: block; }
  .ps-steps .pg-v1 .pd-lista .pl-d { display: none; }
  .ps-steps .pd-pie { margin-top: 18px; padding-top: 16px; }
  /* hoja 2: menú del día a lo ancho de la hoja */
  .ps-steps .md-caja { max-width: none; margin: 4px 0 0; padding: 18px 24px 16px; text-align: left; }
  .ps-steps .md-curso { padding: 9px 0; }
  .ps-steps .pg-v2 .pg-llevar { margin-top: 16px; }
  /* hojas 3 y 4 */
  .ps-steps .pg-cuerpo { gap: 30px; }
  .ps-steps .vn-tabla td { padding: 10px 4px !important; }
  /* portada */
  .tapa { padding: 44px 48px 50px; }
  .tapa-pie { left: 48px; bottom: 44px; }
  .ps-steps .pg-portada .pg-hint { right: 48px; bottom: 44px; }
}
@media (min-width: 981px) and (max-height: 860px) {
  .ps-steps .ps-step { padding: 28px 44px 20px; }
  .ps-steps .pg-platos li { padding: 7px 0 8px; }
  .ps-steps .ps-step h3.pg-area { font-size: 2.05rem; margin-top: 10px; }
  .ps-steps .md-curso { padding: 6px 0; }
  .ps-steps .vn-tabla td { padding: 7px 4px !important; }
  .ps-l b { bottom: 54px; font-size: clamp(7rem, 3.5rem + 7vw, 11rem); }
}
@media (min-width: 981px) and (max-height: 740px) {
  .ps-steps .ps-step { padding: 22px 38px 16px; }
  .ps-steps .pg-platos li { padding: 5px 0 6px; }
  .ps-steps .ps-step h3.pg-area { font-size: 1.75rem; margin-top: 6px; }
  .ps-steps .pg-v3 .pl-d { display: none; }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .ps-pin { gap: 28px; }
  .ps-steps .ps-step { padding-left: 34px; padding-right: 34px; }
  .ps-l b { left: 22px; font-size: clamp(6rem, 3rem + 7vw, 9rem); }
  .ps-l span { left: 26px; }
}

/* =========================== HERRAMIENTAS: CIERRE CON TUS CIFRAS =========================== */
.res-cta { margin-top: 26px; padding: 22px 24px 20px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.res-k { display: block; margin-bottom: 8px; font: 600 .68rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.res-msg { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.5; color: var(--ink); max-width: 60ch; }
.res-msg b { font-family: var(--head); font-weight: 800; letter-spacing: -.02em; }
.res-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.res-btns .btn { padding: 13px 18px; font-size: .9rem; }
.res-pdf { font-family: var(--body); }
.res-nota { margin: 10px 0 0; font-size: .74rem; color: var(--ink-2); }
.res-rev { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.res-rev summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ink); list-style: none; }
.res-rev summary::-webkit-details-marker { display: none; }
.res-rev summary::after { content: ' +'; }
.res-rev[open] summary::after { content: ' −'; }
.res-form { margin-top: 14px; }
.res-form .check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: .82rem; color: var(--ink-2); }
.res-form .check input { margin-top: 3px; }
.print-cab { display: none; }

/* informe en PDF: solo la herramienta y su resultado, en una hoja limpia */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  .placeholder-banner, .site-header, .site-footer, .wa-float, .page-hero, main > section:not(.tool-sec), .res-cta, .tool-sec ~ *, .btn, .row-actions { display: none !important; }
  .tool-sec { padding: 0 !important; }
  .print-cab { display: flex !important; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1.5px solid #111; font: 500 9pt/1.3 'IBM Plex Mono', monospace; color: #111; }
  .print-cab b { font: 800 14pt/1 'Inter Tight', sans-serif; letter-spacing: -.04em; }
  .print-cab span:last-child { color: #57534C; }
  [data-reveal], .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .tool, .ficha-wrap, .exp-wrap, .z-wrap, .expediente, .ficha, .zt, .board { break-inside: avoid; box-shadow: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 640px) { .res-cta { padding: 18px 16px; } .res-btns .btn { width: 100%; justify-content: center; } }

/* =========================== PORTADA: DOS CAMINOS =========================== */
.caminos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.camino { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 340px; padding: 56px max(24px, calc((100vw - 1180px) / 2 + 20px)) 48px; padding-right: 56px;
  background: var(--paper); color: var(--ink); text-decoration: none; transition: background .35s ease; }
.camino + .camino { padding-left: 56px; padding-right: max(24px, calc((100vw - 1180px) / 2 + 20px)); }
.camino:hover { text-decoration: none; color: var(--ink); background: #DFD9CE; }
.camino-osc { background: var(--ink); color: #F4F1EB; }
.camino-osc:hover { background: #262624; color: #F4F1EB; }
.camino-k { font: 600 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .7; }
.camino-t { font: 800 clamp(2.6rem, 1.4rem + 3.6vw, 4.8rem)/.92 var(--head); letter-spacing: -.06em; }
.camino p { margin: 0; max-width: 44ch; font-size: 1.02rem; line-height: 1.5; color: inherit; opacity: .8; }
.camino-go { margin-top: auto; padding-top: 18px; font-weight: 600; }
.camino-go i { display: inline-block; font-style: normal; transition: transform .35s ease; }
.camino:hover .camino-go i { transform: translateX(6px); }
@media (max-width: 760px) {
  .caminos { grid-template-columns: 1fr; }
  .camino, .camino + .camino { min-height: 0; padding: 40px 20px 36px; }
}

/* =========================== GUÍAS, PREGUNTAS Y PLANTILLA =========================== */
.g-meta { margin: 14px 0 0; font: 500 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.guia { padding-top: 56px !important; }
.g-migas { margin-bottom: 28px; font: 500 .7rem/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.g-migas a { color: var(--ink-2); }
.g-art { font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); }
.g-art h2 { margin: 46px 0 12px; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -.045em; color: var(--ink); }
.g-art h2:first-child { margin-top: 0; }
.g-art p { margin: 0 0 14px; }
.g-art b, .g-art strong { color: var(--ink); }
.g-art ul, .g-art ol { margin: 0 0 16px; padding-left: 22px; }
.g-art li { margin: 0 0 8px; }
.g-formula { padding: 16px 18px; border: 1px solid var(--ink); background: var(--card); font: 600 .92rem/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink); }
.g-nota { font: 600 .74rem/1.45 'IBM Plex Mono', ui-monospace, monospace !important; letter-spacing: .04em; text-transform: uppercase; color: var(--acento) !important; }
.g-tabla { width: 100%; margin: 6px 0 18px; border-collapse: collapse; font-size: .96rem; }
.g-tabla td { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.g-tabla td:not(:first-child) { text-align: right; font: 600 .9rem/1.3 'IBM Plex Mono', ui-monospace, monospace; padding-left: 14px; white-space: nowrap; }
.g-tabla .g-total td { border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); font-weight: 700; }
.g-partidas li b { display: inline; }
.g-cta { margin: 44px 0 0; padding: 26px 28px; background: var(--ink); color: #F4F1EB; }
.g-cta .ns-k { color: #ACA9A4; border-bottom-color: rgba(244,241,235,.3); margin-bottom: 14px; }
.g-cta b { display: block; margin-bottom: 8px; font: 800 1.5rem/1.1 var(--head); letter-spacing: -.04em; color: #F4F1EB; }
.g-cta p { margin: 0 0 18px; color: #CFCAC0; font-size: .98rem; }
.g-cta .btn-primary { background: #F4F1EB; color: var(--ink); }
.g-cta .btn-primary::before { background: #fff; }
.g-cta .btn-primary:hover { color: var(--ink); }

.g-lista-sec { padding-top: 60px !important; }
.g-lista { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.g-tarjeta { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 26px 28px 30px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); transition: background .3s ease, padding .3s ease; }
.g-tarjeta:nth-child(odd) { border-right: 1px solid var(--ink); }
.g-tarjeta:nth-child(even) { padding-left: 28px; }
.g-tarjeta .ns-k { border: 0; padding: 0; color: var(--ink-2); }
.g-tarjeta b { font: 800 clamp(1.5rem, 1rem + 1.2vw, 2.1rem)/1.02 var(--head); letter-spacing: -.045em; max-width: 18ch; }
.g-tarjeta p { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: .96rem; }
.g-tarjeta:hover { text-decoration: none; color: var(--ink); background: #DFD9CE; }

.plantilla-sec { padding-top: 80px !important; padding-bottom: 80px !important; }
.plantilla { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.pl-txt h2 { margin: 16px 0 12px; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: .98; letter-spacing: -.055em; max-width: 14ch; }
.pl-txt p { color: var(--ink-2); max-width: 50ch; }
.pl-txt ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-txt li { margin: 0; padding: 5px 12px; border: 1px solid var(--ink); border-radius: 99px; font-size: .84rem; color: var(--ink); }
.pl-form { padding: 26px 26px 22px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--ink); }
.pl-form .check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: .82rem; color: var(--ink-2); }
.pl-form .check input { margin-top: 3px; }
.pl-form .btn { width: 100%; justify-content: center; }
.faq-sec { padding-top: 56px !important; }

@media (max-width: 860px) {
  .g-lista { grid-template-columns: 1fr; }
  .g-tarjeta:nth-child(odd) { border-right: 0; }
  .g-tarjeta:nth-child(even) { padding-left: 0; }
  .plantilla { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .g-art { font-size: 1rem; }
  .g-cta { padding: 22px 18px; }
  .g-tarjeta { min-height: 0; padding: 22px 0 24px; }
}

/* selector de idioma */
.nav-links a.lang { padding: 4px 9px; border: 1px solid currentColor; border-radius: 99px; font: 600 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-decoration: none !important; opacity: .85; }
.nav-links a.lang:hover { opacity: 1; }
@media (max-width: 720px) { .nav-links a.lang { border: 0; padding: 12px 0; border-bottom: 1px solid var(--forest-line); border-radius: 0; } }

/* =========================== CARTEL: TRES CAMINOS CLICABLES =========================== */
.cartel-rutas { display: grid; width: min(300px, 58%); }
.cartel-top { margin-bottom: 28px; }
.rutas-k { padding-bottom: 6px; font: 500 .6rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ruta {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 8px 6px 8px 0; border-top: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  transition: background .25s ease, color .25s ease, padding .25s ease;
}
.ruta:last-child { border-bottom: 1px solid var(--ink); }
.ruta-k { grid-column: 1; font: 500 .6rem/1.2 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ruta-t { grid-column: 1; font: 700 .9rem/1.2 var(--head); letter-spacing: -.02em; }
.ruta i {
  grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; width: 26px; height: 26px;
  background: var(--ink); color: var(--paper); font-style: normal; font-size: .85rem; line-height: 1; transition: background .25s ease, color .25s ease, transform .25s ease;
  animation: empuje 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s + 1.6s);
}
@keyframes empuje { 0%, 72%, 100% { transform: none; } 80% { transform: translateX(4px); } 88% { transform: none; } }
.ruta:hover, .ruta:focus-visible { text-decoration: none; background: var(--ink); color: var(--paper); padding-left: 10px; }
.ruta:hover .ruta-k, .ruta:focus-visible .ruta-k { color: #CFCAC0; }
.ruta:hover i, .ruta:focus-visible i { background: var(--paper); color: var(--ink); animation: none; transform: translateX(3px); }
/* el botón final del cartel, como un botón de verdad */
.cartel-cta {
  display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: .95rem; transition: background .25s ease;
}
.cartel-cta:hover { color: var(--paper); background: var(--acento-2); }
@media (max-width: 640px) {
  .cartel-top { flex-direction: column; gap: 18px; }
  .cartel-rutas { width: 100%; }
  .ruta { padding: 10px 6px 10px 0; min-height: 48px; }
  .ruta-t { font-size: .95rem; }
  .cartel-cta { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ruta i { animation: none; } }

/* =========================== FRANJAS DE CONTACTO =========================== */
.sv-cta, .cm-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: 34px; padding: 22px 26px; border: 1px solid var(--ink); background: var(--card); }
.sv-cta p, .cm-cta p { margin: 0; max-width: 56ch; font-size: 1.02rem; color: var(--ink-2); }
.sv-cta p b, .cm-cta p b { color: var(--ink); font-family: var(--head); font-weight: 800; letter-spacing: -.02em; }
.sv-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-cta-btns .btn { padding: 13px 18px; font-size: .9rem; }
@media (max-width: 640px) {
  .sv-cta, .cm-cta { padding: 18px 16px; }
  .sv-cta-btns, .sv-cta-btns .btn { width: 100%; justify-content: center; }
}

/* =========================== MARCA: MAQUETA DE LA WEB DEL RESTAURANTE =========================== */
.lw-sec { padding-top: 96px; padding-bottom: 96px; }
.lw {
  --lw-v: #7A2E1F; --lw-c: #F3EAD8; --lw-o: #C8A15A; --lw-t: #2A2420;
  display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 48px; align-items: center;
}
.lw-escena { position: relative; padding: 0 96px 56px 0; }
.lw-pc { margin: 0; border: 1px solid var(--ink); background: #fff; box-shadow: 0 30px 70px rgba(17,17,17,.16); overflow: hidden; }
.lw-barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.lw-barra > i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.lw-url { position: relative; flex: 0 1 300px; margin-left: 12px; padding: 5px 12px; border-radius: 99px; background: #fff; font: 500 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.lw-pag { background: var(--lw-c); color: var(--lw-t); font-size: 11px; line-height: 1.35; }
.lw-cab { display: flex; align-items: center; gap: 20px; padding: 12px 20px; border-bottom: 1px solid rgba(42,36,32,.15); }
.lw-logo { font: 600 1.3em/1 'Fraunces', Georgia, serif; letter-spacing: -.01em; color: var(--lw-v); white-space: nowrap; }
.lw-logo em { font-style: italic; color: var(--lw-o); }
.lw-menu { display: flex; gap: 16px; margin-left: auto; }
.lw-btn { position: relative; display: inline-block; padding: 7px 13px; background: var(--lw-v); color: var(--lw-c); font-weight: 600; white-space: nowrap; }
.lw-btn-o { background: var(--lw-o); color: var(--lw-t); }
.lw-hero { position: relative; height: 230px; overflow: hidden; background: var(--lw-t); }
.lw-hero img, .lw-mv-hero img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.lw-hero-t { position: absolute; left: 24px; bottom: 22px; display: grid; gap: 10px; justify-items: start; color: var(--lw-c); }
.lw-hero-t small { font: 500 .85em/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--lw-o); }
.lw-hero-t b { font: 600 2.9em/.98 'Fraunces', Georgia, serif; letter-spacing: -.02em; }
.lw-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.lw-col { position: relative; padding: 16px 20px 18px; border-right: 1px solid rgba(42,36,32,.15); }
.lw-col:last-child { border-right: 0; }
.lw-h { display: block; margin-bottom: 8px; font: 600 1.3em/1 'Fraunces', Georgia, serif; color: var(--lw-v); }
.lw-fila { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; white-space: nowrap; }
.lw-fila i { flex: 1; min-width: 8px; border-bottom: 1px dotted rgba(42,36,32,.4); }
.lw-fila em { font-style: normal; font-weight: 600; }
.lw-mas { display: block; margin-top: 8px; font-weight: 600; color: var(--lw-v); }
.lw-mapa {
  position: relative; display: block; height: 54px; margin-bottom: 7px; background-color: #E3D6BC;
  background-image: linear-gradient(90deg, transparent 46%, #FBF6EC 46%, #FBF6EC 51%, transparent 51%),
                    linear-gradient(0deg, transparent 40%, #FBF6EC 40%, #FBF6EC 47%, transparent 47%),
                    linear-gradient(32deg, transparent 62%, #FBF6EC 62%, #FBF6EC 65%, transparent 65%);
}
.lw-pin { position: absolute; left: 48.5%; top: 43%; width: 13px; height: 13px; border-radius: 50% 50% 50% 0; background: var(--lw-v); transform: translate(-50%, -100%) rotate(-45deg); }

/* el móvil, por delante del ordenador */
.lw-movil { position: absolute; right: 0; bottom: 0; width: 196px; margin: 0; padding: 8px; border-radius: 30px; background: #16181A; box-shadow: 0 30px 60px rgba(17,17,17,.3), inset 0 0 0 2px #2C2F31; }
.lw-mv { position: relative; height: 380px; border-radius: 22px; overflow: hidden; background: var(--lw-c); color: var(--lw-t); font-size: 10px; line-height: 1.35; }
.lw-mv-url { position: relative; z-index: 2; padding: 9px 10px 7px; background: var(--card); text-align: center; font: 500 .85em/1 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.lw-mv-scroll { animation: lw-baja 9s ease-in-out infinite; }
@keyframes lw-baja { 0%, 18% { transform: none; } 45%, 70% { transform: translateY(-140px); } 92%, 100% { transform: none; } }
.lw-mv-cab { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; }
.lw-burger { display: grid; gap: 3px; }
.lw-burger i { display: block; width: 14px; height: 2px; background: var(--lw-t); }
.lw-mv-hero { position: relative; height: 150px; overflow: hidden; background: var(--lw-t); }
.lw-mv-hero b { position: absolute; left: 12px; bottom: 12px; font: 600 1.9em/.98 'Fraunces', Georgia, serif; color: var(--lw-c); }
.lw-mv-acc { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; }
.lw-mv-acc span { padding: 7px 0; border: 1px solid var(--lw-t); text-align: center; font-weight: 600; }
.lw-mv-sec { position: relative; padding: 4px 12px 10px; }
.lw-mv-sec .lw-h { font-size: 1.4em; }
.lw-mv-fija { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; padding: 11px 0; background: var(--lw-v); color: var(--lw-c); text-align: center; font-weight: 700; font-size: 1.1em; }
.lw-mv-fija::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 2px solid rgba(243,234,216,.9); opacity: 0; animation: lw-toque 3s ease-out infinite;
}
@keyframes lw-toque { 0%, 55% { transform: scale(.4); opacity: 0; } 65% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* números rojos sobre la maqueta y su explicación */
.lw-m {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--acento); color: #fff; font: 600 .68rem/1 'IBM Plex Mono', ui-monospace, monospace; font-style: normal;
  box-shadow: 0 0 0 3px rgba(178,60,36,.2);
}
.lw-escena .lw-m { position: absolute; z-index: 3; }
.lw-url .lw-m { right: -28px; top: 50%; margin-top: -10px; }
.lw-cab .lw-btn .lw-m { right: -9px; top: -9px; }
.lw-mv-fija .lw-m { right: 6px; top: -10px; }
.lw-col .lw-m { right: 10px; top: 12px; }
.lw-mv-sec .lw-m { right: 10px; top: 2px; }
.lw-mv-url .lw-m { right: 8px; top: 50%; margin-top: -10px; }
.lw-mv-acc .lw-m { right: 4px; top: 2px; }
.lw-movil .lw-m { display: none; }
.lw-notas { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--ink); }
.lw-notas li { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lw-notas .lw-m { grid-row: 1 / 3; }
.lw-notas b { font: 700 1rem/1.25 var(--head); letter-spacing: -.02em; color: var(--ink); }
.lw-notas span { margin-top: 4px; font: 500 .74rem/1.45 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.lw-sec .fc-note { margin-top: 26px; }

@media (max-width: 1100px) {
  .lw { grid-template-columns: 1fr; gap: 36px; }
  .lw-notas { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
@media (max-width: 720px) {
  .lw-sec { padding-top: 64px; padding-bottom: 64px; }
  .lw-escena { display: flex; justify-content: center; padding: 0; }
  .lw-pc { display: none; }
  .lw-movil { position: relative; width: 236px; }
  .lw-mv { height: 450px; }
  .lw-movil .lw-m { display: inline-grid; }
  .lw-notas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .lw-mv-scroll, .lw-mv-fija::after { animation: none; } }

/* =========================== OPERACIÓN Y EQUIPO: APP DE RRHH =========================== */
/* en el equipo, marcar no es tachar: quien ha fichado o lo firmado se queda legible */
.app-rrhh .app-it.hecho span { color: #F4F1EB; text-decoration: none; }
.app-rrhh .app-it small { white-space: nowrap; }

/* =========================== NUEVE PIEZAS EN DOS COLUMNAS: LA ÚLTIMA, A TODO EL ANCHO =========================== */
/* en tableta y móvil 9 no se reparte en 2: la novena ocupa la fila entera y la cuadrícula queda cerrada */
@media (max-width: 980px) {
  .sv-9 .sv:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .qh li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================== AUDITORÍA 2 · CARTEL: FRASE DE CONFIANZA =========================== */
.cartel-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.cartel-acc .cartel-cta { margin-top: 0; }
.cartel-micro { font: 500 .66rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rutas-k, .ruta-k { font-size: .64rem; }
@media (max-width: 640px) {
  .cartel-acc { flex-direction: column; align-items: stretch; }
  .cartel-micro { text-align: center; }
}

/* =========================== PORTADA: CALCULADORAS GRATIS =========================== */
.gratis-sec { padding: 96px 0; }
.gratis { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.gratis-t h2 { margin: 16px 0 14px; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); line-height: .98; letter-spacing: -.055em; max-width: 13ch; }
.gratis-t h2 span { color: var(--ink-2); }
.gratis-t p { max-width: 40ch; color: var(--ink-2); }
.gratis-pie { margin-top: 18px; font: 500 .74rem/1.6 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .03em; }
.gratis-pie a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gratis-l { display: grid; }
.gr {
  display: grid; grid-template-columns: 1fr auto; column-gap: 18px; align-items: center;
  padding: 16px 8px 16px 0; border-top: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  transition: background .25s ease, color .25s ease, padding .25s ease;
}
.gr:last-child { border-bottom: 1px solid var(--ink); }
.gr-k { grid-column: 1; font: 500 .66rem/1.2 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.gr b { grid-column: 1; margin-top: 4px; font: 700 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.15 var(--head); letter-spacing: -.03em; }
.gr small { grid-column: 1; margin-top: 4px; font-size: .86rem; color: var(--ink-2); }
.gr i {
  grid-column: 2; grid-row: 1 / 4; display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--ink); color: var(--paper); font-style: normal; transition: background .25s ease, color .25s ease, transform .25s ease;
}
.gr:hover, .gr:focus-visible { text-decoration: none; background: var(--ink); color: var(--paper); padding-left: 14px; }
.gr:hover .gr-k, .gr:hover small, .gr:focus-visible .gr-k, .gr:focus-visible small { color: #CFCAC0; }
.gr:hover i, .gr:focus-visible i { background: var(--paper); color: var(--ink); transform: translateX(3px); }
@media (max-width: 980px) { .gratis { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 640px) { .gratis-sec { padding: 64px 0; } .gr { padding: 14px 6px 14px 0; } }

/* =========================== CONTACTO: QUÉ PASA DESPUÉS =========================== */
.cto-pasos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 46ch; }
.cto-pasos li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 0; }
.cto-pasos b { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(244,241,235,.5); font: 600 .74rem/1 'IBM Plex Mono', ui-monospace, monospace; color: #F4F1EB; }
.cto-pasos span { font-size: .92rem; line-height: 1.45; color: rgba(244,241,235,.72); }
.cto-pasos strong { display: block; color: #F4F1EB; font-weight: 600; }

/* =========================== SERVICIOS: LO QUE NOS PREGUNTAN =========================== */
.sv-faq { padding: 80px 0 90px; }
.svf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.svf-top h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing: -.05em; }
.svf-top a { flex: none; font: 500 .74rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; color: var(--ink); }
.sv-faq .faq summary:hover { color: var(--ink-2); }
@media (max-width: 640px) { .sv-faq { padding: 56px 0 64px; } .svf-top { flex-direction: column; gap: 6px; } }

/* =========================== 404 =========================== */
.cartel-rutas.e404 { width: min(560px, 100%); }
.e404 .ruta { padding: 14px 8px 14px 0; }
.e404 .ruta-t { font-size: 1.15rem; }
.e404 .ruta i { width: 32px; height: 32px; }
.tool-guia { margin: 24px 0 0; font-size: .95rem; color: var(--ink-2); }
.tool-guia a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =========================== OPERACIÓN: TIEMPOS Y CUELLOS DE BOTELLA =========================== */
.tsv { padding: 28px 30px 24px; background: var(--card); border: 1px solid var(--ink); }
.tsv-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 44px; }
.tsv-t { display: block; margin-top: 6px; font: 700 1.3rem/1.1 var(--head); letter-spacing: -.03em; color: var(--ink); }
.tsv-res { text-align: right; }
.tsv-res b { display: block; font: 800 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--head); letter-spacing: -.05em; color: var(--acento); transition: color .3s ease; }
.tsv.ok .tsv-res b { color: var(--good); }
.tsv-res span { font: 500 .74rem/1.3 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.tsv-barra {
  position: relative; display: flex; height: 54px; border-bottom: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), rgba(17,17,17,.09) calc(100% / 6 - 1px) calc(100% / 6));
}
.tsv-seg {
  position: relative; flex: none; width: calc(var(--m) * 100% / 30); display: grid; place-items: center;
  background: #A8A29A; color: var(--ink); border-right: 2px solid var(--card);
  font: 600 .78rem/1 'IBM Plex Mono', ui-monospace, monospace;
  transition: width .6s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
.tsv-seg b { overflow: hidden; }
.tsv-seg[data-seg="cocina"] { background: var(--ink); color: var(--paper); }
.tsv-seg[data-seg="pase"] { background: #57534C; color: var(--paper); }
.tsv-seg[data-seg="mesa"] { background: #CBC4B7; }
.tsv-seg.atasco { background: var(--acento); color: #fff; }
.tsv-seg.atasco::before {
  content: 'aquí se atasca ↓'; position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap;
  font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--acento);
}
.js .tsv:not(.in) .tsv-seg { width: 0; }
.tsv-obj { position: absolute; z-index: 2; top: -6px; bottom: -6px; left: calc(var(--m) * 100% / 30); border-left: 2px dashed var(--ink); }
.tsv-obj i {
  position: absolute; top: calc(100% + 6px); left: 0; transform: translateX(-50%); white-space: nowrap;
  font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.tsv-ley { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; color: var(--ink-2); }
.tsv-ley li { display: flex; align-items: center; gap: 8px; margin: 0; }
.tsv-ley i { width: 12px; height: 12px; background: #A8A29A; }
.tsv-ley [data-ley="cocina"] i { background: var(--ink); }
.tsv-ley [data-ley="pase"] i { background: #57534C; }
.tsv-ley [data-ley="mesa"] i { background: #CBC4B7; }
.tsv-ley b { color: var(--ink); font-weight: 600; }
.tsv-k { margin: 30px 0 12px; font: 600 .7rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tsv-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tsv-op {
  appearance: none; display: grid; grid-template-columns: 34px 1fr; align-content: start; column-gap: 12px; row-gap: 4px;
  padding: 16px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background .25s ease, color .25s ease;
}
.tsv-l { grid-row: 1 / 4; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ink); font: 700 1rem/1 var(--head); }
.tsv-op b { font: 700 1.02rem/1.2 var(--head); letter-spacing: -.02em; }
.tsv-op > span:not(.tsv-l) { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.tsv-op small { font: 500 .7rem/1.4 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.tsv-op small em { font-style: normal; font-weight: 600; color: var(--acento); }
.tsv-op:hover { background: rgba(17,17,17,.05); }
.tsv-op[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tsv-op[aria-pressed="true"] .tsv-l { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tsv-op[aria-pressed="true"] > span:not(.tsv-l), .tsv-op[aria-pressed="true"] small { color: #CFCAC0; }
.tsv-op[aria-pressed="true"] small em { color: #F0A08C; }
#tiempos .fc-note { margin-top: 18px; }
@media (max-width: 900px) { .tsv-ops { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tsv { padding: 20px 16px; }
  .tsv-top { flex-direction: column; align-items: flex-start; }
  .tsv-res { text-align: left; }
  .tsv-barra { height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .tsv-seg { transition: none; } }

/* =========================== MÉTODO: DIEZ SEMANAS, CUATRO LETRAS =========================== */
.mx-sec { padding: 90px 0 100px; }
.mesa-linea { --izq: 270px; }
.mx-regla {
  display: grid; grid-template-columns: var(--izq) 1fr; align-items: end; padding-bottom: 8px;
  font: 500 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.mx-semanas { display: grid; grid-template-columns: repeat(10, 1fr); }
.mx-semanas span { padding-left: 6px; border-left: 1px solid var(--line); }
.mx-filas { position: relative; border-bottom: 1px solid var(--ink); }
.mx-fila {
  appearance: none; position: relative; display: grid; grid-template-columns: var(--izq) 1fr; align-items: center;
  width: 100%; min-height: 72px; padding: 0; border: 0; border-top: 1px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.mx-et { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 12px 16px 12px 0; transition: padding .3s ease; }
.mx-et i {
  grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink);
  font: 800 1.4rem/1 var(--head); font-style: normal; transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.mx-et b { font: 700 1.15rem/1.1 var(--head); letter-spacing: -.03em; }
.mx-et small { font: 500 .66rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); transition: color .3s ease; }
.mx-pista { position: relative; align-self: stretch; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); }
.mx-barra {
  position: absolute; top: 50%; left: calc((var(--a) - 1) * 10%); width: calc((var(--b) - var(--a) + 1) * 10%);
  height: 30px; margin-top: -15px; display: flex; align-items: center; padding: 0 10px; overflow: hidden;
  background: #CBC4B7; color: var(--ink); transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s + .15s), background .3s ease, color .3s ease;
}
.mx-barra em { font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mx-sigue {
  position: absolute; top: calc(50% - 1px); left: calc((var(--a) - 1) * 10%); right: 0; padding: 7px 0 0 8px;
  border-top: 2px dotted var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 .62rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  transition: opacity .5s ease 1.1s, color .3s ease, border-color .3s ease;
}
.js .mesa-linea:not(.in) .mx-barra { transform: scaleX(0); }
.js .mesa-linea:not(.in) .mx-sigue { opacity: 0; }
.mx-fila:hover { background: rgba(17,17,17,.04); }
.mx-fila:hover .mx-barra { background: #A8A29A; }
.mx-fila:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.mx-fila.on { background: var(--ink); color: var(--paper); }
.mx-fila.on .mx-et { padding-left: 14px; }
.mx-fila.on .mx-et i { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.mx-fila.on .mx-et small { color: #CFCAC0; }
.mx-fila.on .mx-pista { background: repeating-linear-gradient(90deg, rgba(244,241,235,.16) 0 1px, transparent 1px 10%); }
.mx-fila.on .mx-barra { background: var(--paper); color: var(--ink); }
.mx-fila.on .mx-sigue { border-color: rgba(244,241,235,.6); color: #CFCAC0; }
.mx-cabezal {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--izq) + (100% - var(--izq)) * (var(--a) - 1) / 10);
  border-left: 2px solid var(--acento); pointer-events: none; transition: left .6s cubic-bezier(.2,.8,.2,1);
}
.mx-cabezal i {
  position: absolute; top: calc(100% + 8px); left: -2px; white-space: nowrap; font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace;
  font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--acento);
}

/* el detalle de la letra elegida */
.mx-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; align-items: start; margin-top: 52px; }
.js .mx-panel { display: none; }
.js .mx-panel.on { display: grid; animation: mx-entra .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mx-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mx-foto { position: sticky; top: 96px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.mx-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js .mx-panel.on .mx-foto img { animation: mx-zoom 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes mx-zoom { from { transform: scale(1.08); } to { transform: none; } }
.mx-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,0) 45%, rgba(17,17,17,.6)); }
.mx-paso {
  position: absolute; z-index: 1; top: 16px; left: 16px; padding: 6px 10px; background: var(--paper); color: var(--ink);
  font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase;
}
.mx-letra { position: absolute; z-index: 1; left: 18px; bottom: 8px; font: 800 clamp(7rem, 4rem + 8vw, 13rem)/.8 var(--head); letter-spacing: -.06em; color: var(--paper); }
.js .mx-panel.on .mx-letra { animation: mx-sube .8s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes mx-sube { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.mx-k { font: 600 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mx-h { margin: 10px 0 8px; font: 800 clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem)/.95 var(--head); letter-spacing: -.055em; color: var(--ink); }
.mx-sub { margin: 0 0 22px; font: 600 .74rem/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--acento); }
.mx-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.mx-lista li { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: baseline; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.js .mx-panel.on .mx-lista li { animation: mx-entra .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .05s + .12s); }
.mx-pn { font: 600 1rem/1.3 var(--head); letter-spacing: -.02em; color: var(--ink); }
.mx-pd { border-bottom: 1px dotted rgba(17,17,17,.35); transform: translateY(-4px); }
.mx-ps { font: 600 .68rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.mx-lista em { grid-column: 1 / -1; margin-top: 3px; font-style: normal; font-size: .86rem; color: var(--ink-2); }
.mx-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.mx-mk { display: block; margin-bottom: 8px; font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.mx-sug { padding: 16px 18px; border: 1px solid var(--acento); }
.mx-sug .mx-mk { color: var(--acento); }
.mx-sug p { margin: 0; font: 700 1.05rem/1.3 var(--head); letter-spacing: -.02em; color: var(--ink); }
.mx-sug small { display: block; margin-top: 8px; font: 500 .7rem/1.3 'IBM Plex Mono', ui-monospace, monospace; color: var(--acento); }
.mx-sug small::before { content: '→ '; }
.mx-sug-img { float: right; width: 64px; height: 64px; margin: 0 0 8px 12px; border-radius: 50%; overflow: hidden; }
.mx-sug-img img { width: 100%; height: 100%; object-fit: cover; }
.mx-llevas { padding: 16px 18px; background: var(--ink); color: var(--paper); }
.mx-llevas .mx-mk { color: #CFCAC0; }
.mx-llevas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mx-llevas li { margin: 0; padding: 5px 10px; border: 1px solid rgba(244,241,235,.4); border-radius: 99px; font-size: .82rem; }
.mx-mas { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 22px; }
.mx-serv a { display: inline-block; margin: 0 16px 6px 0; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mx-marida a { display: inline-grid; margin: 0 18px 6px 0; color: var(--ink); text-decoration: none; }
.mx-marida b { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mx-marida small { font: 500 .66rem/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.mx-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ink); }
.mx-ir {
  appearance: none; padding: 11px 16px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 600 .9rem/1 var(--body); text-decoration: none; cursor: pointer; transition: background .25s ease, color .25s ease;
}
.mx-ir:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.mx-sig { background: var(--ink); color: var(--paper); }
.mx-sig:hover { background: var(--acento-2); color: var(--paper); }
.mx-pie { margin: 44px 0 0; font: 500 .74rem/1.5 'IBM Plex Mono', ui-monospace, monospace; color: var(--ink-2); }
.mx-pie a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* portada: cada letra lleva a su parte del método */
a.pase-l { position: relative; display: block; color: inherit; text-decoration: none; }
a.pase-l > i {
  position: absolute; top: 26px; right: 26px; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid rgba(244,241,235,.35); color: #F4F1EB; font-style: normal; transition: background .25s ease, color .25s ease, transform .25s ease;
}
a.pase-l:last-child > i { right: 0; }
a.pase-l:hover { text-decoration: none; }
a.pase-l:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
a.pase-l:hover > i { background: #F4F1EB; color: var(--ink); transform: translateX(3px); }

@media (max-width: 1100px) { .mesa-linea { --izq: 220px; } .mx-lado { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .mx-panel, .js .mx-panel.on { grid-template-columns: 1fr; gap: 24px; }
  .mx-foto { position: relative; top: auto; aspect-ratio: 16 / 9; }
  .mx-letra { font-size: clamp(5rem, 3rem + 10vw, 8rem); }
}
@media (max-width: 640px) {
  .mx-sec { padding: 64px 0 72px; }
  .mesa-linea { --izq: 0px; }
  .mx-regla { grid-template-columns: 1fr; }
  .mx-regla-k, .mx-cabezal { display: none; }
  .mx-fila { grid-template-columns: 1fr; min-height: 0; padding: 10px 0 12px; }
  .mx-et { grid-template-columns: 34px 1fr; column-gap: 10px; padding: 0 0 8px; }
  .mx-et i { width: 34px; height: 34px; font-size: 1.1rem; }
  .mx-fila.on .mx-et { padding-left: 10px; }
  .mx-pista { height: 26px; }
  .mx-barra { height: 22px; margin-top: -11px; padding: 0 6px; }
  .mx-barra em { font-size: .58rem; }
  .mx-panel { margin-top: 28px; }
  .mx-nav .mx-ir { flex: 1; text-align: center; }
  a.pase-l > i { top: 18px; right: 14px; width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-barra, .mx-cabezal, .mx-sigue { transition: none; }
  .js .mx-panel.on, .js .mx-panel.on .mx-foto img, .js .mx-panel.on .mx-letra, .js .mx-panel.on .mx-lista li { animation: none; }
}

/* =========================== MÉTODO: BARRA FINA FIJA MIENTRAS SE LEE EL DETALLE =========================== */
.mx-pin { position: sticky; z-index: 20; top: var(--hdr, 72px); height: 0; }
.mx-mini {
  position: absolute; top: 0; left: 0; right: 0; height: 56px;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper), 0 1px 0 100vmax var(--ink); clip-path: inset(0 -100vmax -1px -100vmax);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.mx-pin.ver .mx-mini { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
.mx-mini-k { font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.mx-mini-b { display: flex; gap: 6px; }
.mxm {
  appearance: none; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px 0 0;
  border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: 700 .86rem/1 var(--head); letter-spacing: -.02em; cursor: pointer; transition: background .25s ease, color .25s ease;
}
.mxm i { display: grid; place-items: center; width: 34px; height: 34px; border-right: 1px solid var(--ink); font: 800 1rem/1 var(--head); font-style: normal; transition: border-color .25s ease; }
.mxm:hover { background: rgba(17,17,17,.06); }
.mxm:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.mxm.on { background: var(--ink); color: var(--paper); }
.mxm.on i { border-right-color: rgba(244,241,235,.3); }
.mx-mini-regla { position: relative; height: 14px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%); }
.mx-mini-barra {
  position: absolute; top: 0; bottom: 0; left: calc((var(--a, 1) - 1) * 10%); width: calc((var(--b, 4) - var(--a, 1) + 1) * 10%);
  background: var(--ink); transition: left .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1);
}
.mx-mini-sigue { position: absolute; top: calc(50% - 1px); left: calc(var(--b, 4) * 10%); right: 0; border-top: 2px dotted var(--ink-2); opacity: 0; transition: opacity .3s ease, left .5s cubic-bezier(.2,.8,.2,1); }
.mx-mini.sigue .mx-mini-sigue { opacity: 1; }
.mx-mini-sem { font: 600 .66rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
/* la foto fija del detalle, por debajo de la barra fina y sin pasarse de la pantalla */
.mx-foto { top: calc(var(--hdr, 72px) + 76px); max-height: calc(100vh - var(--hdr, 72px) - 100px); }
@media (max-width: 1100px) {
  .mx-mini-k { display: none; }
  .mx-mini { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mxm { padding: 0; }
  .mxm span { display: none; }
  .mxm i { border-right: 0; }
}
@media (max-width: 900px) { .mx-foto { top: auto; max-height: none; } }
@media (max-width: 640px) {
  .mx-mini { grid-template-columns: auto minmax(0, 1fr); gap: 12px; height: 52px; }
  .mx-mini-sem { display: none; }
}
/* el hueco sobre el detalle deja sitio a la barra fina (56 px) cuando todavía no se ha quedado pegada */
.mx-panel { margin-top: 68px; }
@media (max-width: 640px) { .mx-panel { margin-top: 64px; } }
@media (prefers-reduced-motion: reduce) { .mx-mini, .mx-pin.ver .mx-mini, .mx-mini-barra, .mx-mini-sigue { transition: none; } }

/* =========================== MÉTODO: SUGERENCIA DE LA CASA COMO CITA, «TE LLEVAS» EN BARRA =========================== */
.mx-cita { position: relative; margin: 0 0 26px; padding: 2px 0 2px 20px; border-left: 2px solid var(--acento); }
.mx-cita .mx-mk { color: var(--ink-2); }
.mx-cita p { margin: 0; max-width: 32ch; font: 700 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.2 var(--head); letter-spacing: -.03em; color: var(--ink); }
.mx-cita small { display: block; margin-top: 10px; font: 500 .72rem/1.3 'IBM Plex Mono', ui-monospace, monospace; color: var(--acento); }
.mx-cita small::before { content: '→ '; }
.mx-cita .mx-sug-img { width: 72px; height: 72px; margin: 0 0 8px 16px; }
.js .mx-panel.on .mx-cita { animation: mx-entra .55s cubic-bezier(.2,.8,.2,1) .08s both; }
.mx-te { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .js .mx-panel.on .mx-cita { animation: none; } }

/* =========================== MÉTODO: ENCABEZADO ÚNICO CON DOS CAMINOS =========================== */
.mx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 56px; align-items: end; }
.mx-hero > .kicker { grid-column: 1 / -1; }
.mx-hero > h1, .mx-hero > .lead { grid-column: 1; }
.mx-hero > .mx-rutas { grid-column: 2; grid-row: 2 / 4; align-self: end; width: 100%; margin-bottom: 6px; }
.mx-rutas .ruta-t { font-size: 1rem; }
.mx-sec { padding-top: 56px; }
/* «Pide tu precio» en la barra fina, solo en pantallas anchas (en las demás está el botón flotante) */
.mx-mini { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
.mx-mini-cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: var(--ink); color: var(--paper);
  font: 600 .86rem/1 var(--body); white-space: nowrap; text-decoration: none; transition: background .25s ease;
}
.mx-mini-cta:hover { background: var(--acento-2); color: var(--paper); text-decoration: none; }
@media (max-width: 1100px) { .mx-mini { grid-template-columns: auto minmax(0, 1fr) auto auto; } }
@media (max-width: 900px) {
  .mx-hero { grid-template-columns: 1fr; }
  .mx-hero > .mx-rutas { grid-column: 1; grid-row: auto; margin-top: 26px; max-width: 420px; }
  .mx-mini-cta { display: none; }
  .mx-mini { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  .mx-hero > .mx-rutas { max-width: none; }
  .mx-mini { grid-template-columns: auto minmax(0, 1fr); }
}

/* logos: seis marcas en la cinta, a la misma velocidad que con cuatro; Inverlochy lleva letra fina y necesita más ancho */
.ns-marcas .lg-track { animation-duration: 57s; }
.ns-marcas .lg-x { width: auto; max-width: 100%; max-height: 80px; }
@media (max-width: 640px) { .ns-marcas .lg-x { max-height: 60px; } }

/* logos: catorce marcas (dos tandas: 3.920 px cubren cualquier pantalla), a la misma velocidad de siempre */
.ns-marcas .lg-track { animation-duration: 66s; }
.ns-marcas .lg-b { width: auto; max-width: 100%; max-height: 40px; }
@media (max-width: 640px) { .ns-marcas .lg-b { max-height: 28px; } }

/* =========================== V3 · INPULL: azul como tercer color (60 % papel, 30 % tinta, 10 % azul) =========================== */
:root { --acento: #024047; --acento-2: #01292E; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* logo lineal */
.brand { display: inline-flex; align-items: center; color: var(--acento); }
.brand .logo { display: block; width: auto; height: 19px; }
.site-footer .brand { color: #F4F1EB; }
.site-footer .brand .logo { height: 22px; }

/* cartel: monograma, logo grande y palabra que se escribe sola */
.cartel-marca.cartel-mono { display: block; width: 46px; color: var(--acento); }
.cartel-mono .mono { display: block; width: 100%; height: auto; }
.cartel-mono .mono g { stroke-width: 10; }
.cartel-wm .logo-xl { align-self: center; width: auto; height: clamp(42px, 1.4rem + 4vw, 82px); color: var(--acento); }
.cartel-wm .logo-xl g { stroke-width: 7; }
.tw, .cartel-h1 .tw { display: inline-block; padding: 0 .14em; background: var(--acento); color: #F4F1EB; }
.tw::after { content: ''; display: inline-block; width: 2px; height: .85em; margin-left: 3px; vertical-align: -.06em; background: #F4F1EB; animation: tw-cursor 1s steps(1) infinite; }
@keyframes tw-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw::after { display: none; } }

/* el azul, en las llamadas a la acción y en lo activo */
.btn-primary, .site-header .btn-primary { background: var(--acento); border-color: var(--acento); color: #F4F1EB; }
.btn-primary:hover, .site-header .btn-primary:hover { background: var(--acento-2); color: #F4F1EB; }
.cartel-cta, .mx-mini-cta, .mx-sig { background: var(--acento); }
.cartel-cta:hover, .mx-mini-cta:hover, .mx-sig:hover { background: var(--acento-2); }
.ruta i { background: var(--acento); }
.ruta:hover, .ruta:focus-visible { background: var(--acento); }
.ruta:hover i, .ruta:focus-visible i { color: var(--acento); }
.mx-fila.on, .mxm.on { background: var(--acento); border-color: var(--acento); }
.mx-fila.on .mx-et i { color: var(--acento); }
/* el rojo se queda solo para lo que avisa de un problema */
.tsv-seg.atasco { background: #B23C24; }
.tsv-seg.atasco::before, .tsv-res b, .tsv-op small em { color: #B23C24; }
.tsv.ok .tsv-res b { color: var(--good); }
.cp-pend i, .cp-aviso i { border-color: #B23C24; }
.cp-pend small, .cp-aviso small, .cp-aviso i::after, .kp-down small { color: #B23C24; }
.cp-pend i::after { background: #B23C24; }
.ftr-alerg i { border-color: #B23C24; color: #B23C24; }
.legal-aviso { border-color: #B23C24; color: #B23C24 !important; }

/* portada: los servicios son las cuatro áreas del método */
.ms-sec { padding: 90px 0 70px; }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.ms-c { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px 26px; border-right: 1px solid var(--line); transition: background .3s ease; }
.ms-c:last-child { border-right: 0; }
.ms-c:hover { background: var(--card); }
.ms-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px; color: var(--ink); text-decoration: none; }
.ms-cab:hover { text-decoration: none; color: var(--ink); }
.ms-l { font: 800 clamp(4rem, 2.6rem + 4vw, 6.2rem)/.8 var(--head); letter-spacing: -.06em; color: var(--acento); }
.ms-n { padding-bottom: 4px; font: 700 1.25rem/1.1 var(--head); letter-spacing: -.03em; }
.ms-cab i { display: grid; place-items: center; width: 32px; height: 32px; background: var(--ink); color: var(--paper); font-style: normal; transition: background .25s ease, transform .25s ease; }
.ms-cab:hover i { background: var(--acento); transform: translateX(3px); }
.ms-c > p { margin: 0; color: var(--ink-2); }
.ms-inc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ms-inc li { margin: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: .8rem; }
.ms-pag { margin-top: auto; padding-top: 6px; font: 500 .7rem/1.6 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.ms-pag a { color: var(--ink); }
@media (max-width: 1100px) {
  .ms-grid { grid-template-columns: 1fr 1fr; }
  .ms-c:nth-child(2n) { border-right: 0; }
  .ms-c:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .ms-sec { padding: 64px 0 50px; }
  .ms-grid { grid-template-columns: 1fr; }
  .ms-c { padding: 20px 0 22px; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* quiénes somos: cifras y logos quietos en rejilla (idea de talentchef.com) */
.cifras-n { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0 46px; border-top: 1px solid var(--ink); }
.cifras-n div { display: grid; gap: 6px; padding-top: 20px; }
.cifras-n b { font: 800 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--head); letter-spacing: -.05em; color: var(--acento); }
.cifras-n span { font: 500 .72rem/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.lg-cinta { -webkit-mask: none; mask: none; }
.ns-marcas .lg-track { width: 100%; flex-wrap: wrap; justify-content: center; animation: none !important; }
.ns-marcas .lg-track li[aria-hidden="true"] { display: none; }
.ns-marcas .lg-track li, .ns-marcas .lg-track li + li { flex: 0 0 calc(100% / 7); width: auto; min-height: 130px; padding: 0 14px; }
@media (max-width: 980px) { .ns-marcas .lg-track li, .ns-marcas .lg-track li + li { flex-basis: 25%; } }
@media (max-width: 640px) {
  .cifras-n { grid-template-columns: 1fr; }
  .ns-marcas .lg-track li, .ns-marcas .lg-track li + li { flex-basis: calc(100% / 3); min-height: 96px; padding: 0 8px; }
}

/* método: sin semanas, las cuatro letras como pestañas */
.mx-filas { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 0; }
.mx-fila { grid-template-columns: 1fr; min-height: 0; padding: 18px 16px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-right: 1px solid var(--line); }
.mx-fila:last-child { border-right: 0; }
.mx-et { padding: 0; }
.mx-fila.on .mx-et { padding-left: 0; }
.mx-et small { font: 400 .82rem/1.35 var(--body); letter-spacing: 0; text-transform: none; }
.mx-mini { grid-template-columns: auto auto 1fr; }
.mx-mini-cta { justify-self: end; }
@media (max-width: 1100px) { .mx-mini { grid-template-columns: auto 1fr; } }
@media (max-width: 900px) {
  .mx-filas { grid-template-columns: 1fr 1fr; }
  .mx-fila:nth-child(2n) { border-right: 0; }
  .mx-mini { grid-template-columns: auto; }
}
@media (max-width: 640px) { .mx-fila, .mx-fila.on { padding: 14px 10px; } .mx-fila.on .mx-et { padding-left: 0; } }
body:has(.page-hero) .site-header.over:not(.scrolled) .btn-primary { background: var(--acento); color: #F4F1EB; }

/* =========================== V3 · COLOR (60/30/10, como en las referencias) ===========================
   60 % papel crema, 30 % azul petróleo de la marca (fondos oscuros, logo, tinta de marca),
   10 % azafrán: un acento cálido e inesperado, complementario del azul, solo en lo que se pulsa y lo que destaca.
   El azafrán va siempre de fondo con texto azul encima (contraste 6:1), nunca como texto sobre crema. */
:root { --acento: #024047; --acento-2: #01292E; --chispa: #F2A43A; --chispa-2: #E08F22; --forest-900: #024047; }
.bg-dark, .bg-navy { background: #024047; background-image: radial-gradient(85% 70% at 75% 0%, #0B5560 0%, #024047 62%); }
.site-footer { background: #01292E; }
.wa-float { background: var(--acento); }

.btn-primary, .site-header .btn-primary, body:has(.page-hero) .site-header.over:not(.scrolled) .btn-primary,
.bg-dark .cto-dir .btn-primary, .cartel-cta, .mx-mini-cta, .mx-sig { background: var(--chispa); border-color: var(--chispa); color: var(--acento); }
.btn-primary:hover, .site-header .btn-primary:hover, .cartel-cta:hover, .mx-mini-cta:hover, .mx-sig:hover,
.bg-dark .cto-dir .btn-primary:hover { background: var(--chispa-2); color: var(--acento); }
.site-header.over:not(.scrolled) .btn-primary { background: var(--chispa); color: var(--acento); }
.ruta:hover i, .ruta:focus-visible i { background: var(--chispa); color: var(--acento); }

/* =========================== CARTEL ORDENADO =========================== */
.cartel-top { align-items: flex-start; }
.cartel-k { max-width: 18ch; font: 600 .7rem/1.5 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.cartel-h1 { display: grid; gap: 14px; }
.cartel-wm { display: block; }
.cartel-wm .logo-xl { display: block; height: clamp(40px, 1.2rem + 4vw, 78px); }
.cartel-sub { display: block; margin-top: 0; }
.cartel-sub .tw, .cartel-h1 .tw {
  display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: .02em .16em .06em;
  background: var(--chispa); color: var(--acento); white-space: nowrap;
}
.tw::after { background: var(--acento); }
@media (max-width: 640px) { .cartel-sub .tw, .cartel-h1 .tw { font-size: .86em; } .cartel-k { max-width: none; } }

/* =========================== MESA COMO LISTA (con iconos) =========================== */
.ms-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ms-lista li { margin: 0; border-bottom: 1px solid var(--ink); }
.ms-f {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.25fr) 40px; align-items: center; gap: 28px;
  padding: 26px 18px 26px 6px; color: var(--ink); text-decoration: none; transition: background .3s ease, color .3s ease, padding .3s ease;
}
.ms-ico { width: 48px; height: 48px; color: var(--acento); transition: color .3s ease, transform .3s ease; }
.ms-txt b { display: block; font: 700 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.05 var(--head); letter-spacing: -.035em; }
.ms-l { color: var(--acento); transition: color .3s ease; }
.ms-txt em { display: block; margin-top: 6px; font-style: normal; color: var(--ink-2); transition: color .3s ease; }
.ms-inc { font: 500 .74rem/1.7 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); transition: color .3s ease; }
.ms-f > i { display: grid; place-items: center; width: 40px; height: 40px; background: var(--acento); color: #F4F1EB; font-style: normal; transition: background .3s ease, color .3s ease, transform .3s ease; }
.ms-f:hover, .ms-f:focus-visible { background: var(--acento); color: #F4F1EB; padding-left: 18px; text-decoration: none; }
.ms-f:hover .ms-ico, .ms-f:hover .ms-l, .ms-f:focus-visible .ms-ico, .ms-f:focus-visible .ms-l { color: var(--chispa); }
.ms-f:hover .ms-txt em, .ms-f:hover .ms-inc { color: #CFE0DE; }
.ms-f:hover > i { background: var(--chispa); color: var(--acento); transform: translateX(4px); }
@media (max-width: 900px) {
  .ms-f { grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 8px 18px; }
  .ms-inc { grid-column: 2 / 3; grid-row: 2; }
  .ms-f > i { grid-column: 3; grid-row: 1; }
}
@media (max-width: 640px) {
  .ms-f { grid-template-columns: 40px minmax(0, 1fr) 34px; padding: 20px 4px; gap: 6px 14px; }
  .ms-ico { width: 38px; height: 38px; }
  .ms-inc { grid-column: 1 / -1; }
  .ms-f > i { width: 34px; height: 34px; }
}

/* =========================== CIFRAS Y LOGOS: BANDA AZUL ORDENADA =========================== */
.ns-marcas { margin-top: 56px; padding: 44px 44px 36px; background: var(--acento); color: #F4F1EB; }
.ns-marcas .ns-k { display: block; margin-bottom: 18px; color: var(--chispa); }
.cifras-n { margin: 0 0 40px; border-top: 0; grid-template-columns: repeat(3, 1fr); }
.cifras-n div { padding: 0 24px; border-left: 1px solid rgba(244,241,235,.22); }
.cifras-n div:first-child { padding-left: 0; border-left: 0; }
.cifras-n b { color: var(--chispa); }
.cifras-n span { color: #CFE0DE; }
.ns-marcas .lg-cinta { border-top: 1px solid rgba(244,241,235,.22); }
.ns-marcas .lg-track li, .ns-marcas .lg-track li + li { border-bottom: 1px solid rgba(244,241,235,.12); }
.ns-marcas li img { filter: brightness(0) invert(1); opacity: .86; }
.ns-marcas li:hover img { opacity: 1; }
.ns-marcas .ns-nota { color: #CFE0DE; }
@media (max-width: 640px) {
  .ns-marcas { margin: 40px -16px 0; padding: 32px 16px 26px; }
  .cifras-n { grid-template-columns: 1fr; gap: 18px; }
  .cifras-n div { padding: 0; border-left: 0; }
}

/* =========================== V3 · ajustes tras revisar (cartel compacto, letra MESA) =========================== */
.cartel-panel { min-height: 0; }
.cartel-top { margin-bottom: 0; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.cartel-h1 { margin-top: 34px; }
.cartel-k { max-width: 24ch; }
.ms-txt .ms-l { font: inherit; letter-spacing: inherit; line-height: inherit; }
.ms-txt b { color: var(--ink); }
.ms-f:hover .ms-txt b, .ms-f:focus-visible .ms-txt b { color: #F4F1EB; }
@media (max-width: 640px) {
  .ns-marcas .cifras-n { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ns-marcas .cifras-n div { padding: 0 10px; border-left: 1px solid rgba(244,241,235,.22); }
  .ns-marcas .cifras-n div:first-child { padding-left: 0; border-left: 0; }
  .ns-marcas .cifras-n span { font-size: .6rem; }
}

/* =========================== V3 · revisión: logo con la letra del original, iconos nuevos =========================== */
:root { --in: var(--acento); }               /* color del «IN» del logo y de los detalles de los iconos (pendiente de elegir) */
.logo .lg-pull, .cartel-wm .logo-xl g.lg-pull { stroke-width: 9; }
.logo .lg-in { fill: var(--in); }
.site-footer .logo .lg-in, .bg-dark .logo .lg-in { fill: currentColor; }
.ms-ico { overflow: visible; }
.ms-ico .ac { stroke: var(--in); }
.ms-ico * { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ms-f:hover .ms-ico *, .ms-f:focus-visible .ms-ico * { animation: ms-dibuja .9s cubic-bezier(.6,0,.2,1) both; }
.ms-f:hover .ms-ico .ac, .ms-f:focus-visible .ms-ico .ac { stroke: var(--chispa); animation-delay: .25s; }
@keyframes ms-dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ms-f:hover .ms-ico * { animation: none; } }

/* =========================== V3 · terracota, Jost y hero editorial partido =========================== */
:root {
  --chispa: #C9563A; --chispa-2: #AE4328; --chispa-claro: #E58466;   /* claro: para usarlo sobre el azul */
  --in: var(--chispa);
  --head: 'Jost', 'Inter Tight', 'Inter', system-ui, sans-serif;
}
/* el terracota lleva texto blanco encima (contraste 4,8:1) */
.btn-primary, .site-header .btn-primary, body:has(.page-hero) .site-header.over:not(.scrolled) .btn-primary,
.site-header.over:not(.scrolled) .btn-primary, .bg-dark .cto-dir .btn-primary, .cartel-cta, .mx-mini-cta, .mx-sig { color: #fff; }
.btn-primary:hover, .site-header .btn-primary:hover, .cartel-cta:hover, .mx-mini-cta:hover, .mx-sig:hover, .bg-dark .cto-dir .btn-primary:hover { color: #fff; }
.ruta:hover i, .ruta:focus-visible i { color: #fff; }
.cartel-sub .tw, .cartel-h1 .tw { color: #fff; }
.tw::after { background: #fff; }
.ms-f:hover > i { color: #fff; }
.ms-f:hover .ms-ico, .ms-f:hover .ms-l, .ms-f:focus-visible .ms-ico, .ms-f:focus-visible .ms-l { color: var(--chispa-claro); }
.ms-f:hover .ms-ico .ac, .ms-f:focus-visible .ms-ico .ac { stroke: var(--chispa-claro); }
.ns-marcas .ns-k, .cifras-n b { color: var(--chispa-claro); }
.site-footer .logo .lg-in, .bg-dark .logo .lg-in { fill: var(--chispa-claro); }

/* Jost: geométrica como el logo; pide menos apretado que Inter Tight */
h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; }
.cartel-sub, .ms-txt b, .mx-h, .mx-et b, .ruta-t, .ns-marcas .cifras-n b, .shead h2 { letter-spacing: -.01em; }
.cifras-n b { font-weight: 600; }

/* ---------- hero A: texto sobre crema a la izquierda, vídeo a la derecha ---------- */
.cartel.hero-a { display: block; min-height: 0; margin-top: 0; padding: 0; background: var(--paper); overflow: hidden; isolation: auto; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); min-height: clamp(560px, calc(100svh - 106px), 820px); }
.hero-txt {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(40px, 6vh, 72px) clamp(28px, 4vw, 64px) 36px max(28px, calc((100vw - 1200px) / 2 + 28px));
}
.hero-pila { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin: auto 0; }
.hero-a .cartel-k { max-width: none; color: var(--ink-2); }
.hero-a .cartel-k::before { content: ''; display: inline-block; width: 28px; height: 1px; margin: 0 10px 3px 0; vertical-align: middle; background: var(--chispa); }
.hero-a .cartel-h1 { margin: 0; gap: 18px; }
.hero-a .cartel-wm .logo-xl { height: clamp(46px, 1.4rem + 3.6vw, 88px); color: var(--acento); }
.hero-a .cartel-sub { font: 500 clamp(1.7rem, 1.1rem + 1.6vw, 2.6rem)/1.08 var(--head); color: var(--ink); }
.hero-lead { max-width: 46ch; margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.hero-a .cartel-acc { margin-top: 6px; }
/* caminos: una fila de tres, finos */
.hero-a .cartel-rutas { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.hero-a .rutas-k { grid-column: 1 / -1; padding: 12px 0 4px; }
.hero-a .ruta { padding: 10px 14px 12px 0; border-top: 0; border-bottom: 0; border-right: 1px solid var(--line); }
.hero-a .ruta + .ruta { padding-left: 14px; }
.hero-a .ruta:last-child { border-right: 0; }
.hero-a .ruta i { width: 22px; height: 22px; font-size: .75rem; background: transparent; color: var(--chispa); border: 1px solid currentColor; }
.hero-a .ruta:hover, .hero-a .ruta:focus-visible { background: transparent; color: var(--ink); padding-left: 0; }
.hero-a .ruta + .ruta:hover, .hero-a .ruta + .ruta:focus-visible { padding-left: 14px; }
.hero-a .ruta:hover .ruta-k { color: var(--ink-2); }
.hero-a .ruta:hover .ruta-t { color: var(--chispa); }
.hero-a .ruta:hover i, .hero-a .ruta:focus-visible i { background: var(--chispa); border-color: var(--chispa); color: #fff; }
/* columna de vídeo */
.hero-media { position: relative; isolation: isolate; overflow: hidden; background: var(--acento-2); }
.hero-media .hx-video { z-index: 0; }
.hero-media .hx-video::before { opacity: 1; }
.hero-media .hx-video video.activo { opacity: 1; }
.hero-media .hx-video::after { background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%); }
.hero-cap {
  position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2;
  font: 500 .68rem/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #F4F1EB;
}
@media (max-width: 1100px) { .hero-a .cartel-rutas { grid-template-columns: 1fr; } .hero-a .ruta, .hero-a .ruta + .ruta { padding: 10px 0; border-right: 0; border-top: 1px solid var(--line); } }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-txt { padding: 36px 20px 28px; gap: 32px; }
  .hero-media { order: -1; aspect-ratio: 16 / 10; }
  .hero-a .ruta + .ruta:hover { padding-left: 0; }
}
@media (max-width: 640px) {
  .hero-media { aspect-ratio: 4 / 3; }
  .hero-cap { left: 16px; right: 16px; bottom: 14px; font-size: .6rem; }
  .hero-a .cartel-acc { align-self: stretch; }
}
/* títulos grandes con Jost: peso 600 y subrayado animado en terracota */
.page-hero h1 { font-weight: 600; letter-spacing: -.025em; }
[data-split] em .w > span, .page-hero [data-split] em .w > span { background-image: linear-gradient(var(--chispa), var(--chispa)); }
.bg-dark [data-split] em .w > span { background-image: linear-gradient(var(--chispa-claro), var(--chispa-claro)); }

/* =========================== V3 · hero B: foto grande al fondo, texto en blanco abajo, caminos a la derecha =========================== */
.cartel.hero-b {
  display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; margin-top: -74px;
  padding: 140px 0 clamp(36px, 7vh, 72px); background: #1E1C1A; color: #F4F1EB; overflow: hidden; isolation: isolate;
}
.hero-b .hx-video { z-index: -1; }
.hero-b .hx-video::before { opacity: 1; }
.hero-b .hx-video video.activo { opacity: 1; }
.hero-b .hx-video::after {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%),
              linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
}
.hero-b-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .62fr); align-items: end; gap: 48px; }
.hero-b .hero-pila { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-b .cartel-k { max-width: none; color: rgba(244,241,235,.85); }
.hero-b .cartel-k::before { content: ''; display: inline-block; width: 28px; height: 1px; margin: 0 10px 3px 0; vertical-align: middle; background: var(--chispa-claro); }
.hero-b .cartel-h1 { display: grid; gap: 16px; margin: 0; color: #F4F1EB; }
.hero-b .cartel-wm .logo-xl { height: clamp(52px, 1.6rem + 5vw, 116px); color: #F4F1EB; }
.hero-b .logo .lg-in { fill: var(--chispa-claro); }
.hero-b .cartel-sub { font: 500 clamp(1.6rem, 1rem + 1.8vw, 2.7rem)/1.08 var(--head); letter-spacing: -.01em; color: #F4F1EB; }
.hero-b .hero-lead { max-width: 50ch; margin: 0; color: rgba(244,241,235,.82); font-size: 1.02rem; line-height: 1.6; }
.hero-b .cartel-acc { margin-top: 6px; }
.hero-b .cartel-micro { color: rgba(244,241,235,.7); }
/* caminos: lista fina en blanco */
.hero-b .cartel-rutas { width: 100%; border-top: 1px solid rgba(244,241,235,.55); }
.hero-b .rutas-k { padding: 12px 0 6px; color: rgba(244,241,235,.75); }
.hero-b .ruta { padding: 11px 0; border-top: 1px solid rgba(244,241,235,.2); border-bottom: 0; color: #F4F1EB; }
.hero-b .ruta:last-child { border-bottom: 1px solid rgba(244,241,235,.2); }
.hero-b .ruta-k { color: rgba(244,241,235,.65); }
.hero-b .ruta i { width: 24px; height: 24px; font-size: .78rem; background: transparent; color: var(--chispa-claro); border: 1px solid currentColor; }
.hero-b .ruta:hover, .hero-b .ruta:focus-visible { background: transparent; color: #fff; padding-left: 6px; }
.hero-b .ruta:hover .ruta-k { color: rgba(244,241,235,.8); }
.hero-b .ruta:hover i, .hero-b .ruta:focus-visible i { background: var(--chispa); border-color: var(--chispa); color: #fff; }
/* cabecera encima de la foto: «PULL» en crema, «IN» en terracota claro */
.site-header.over:not(.scrolled) .logo .lg-in { fill: var(--chispa-claro); }
@media (max-width: 900px) {
  .hero-b-in { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .cartel.hero-b { padding: 120px 0 28px; }
  .hero-b .hx-video::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.8) 70%); }
  .hero-b .cartel-acc { align-self: stretch; }
}
/* hero B: que el botón quepa en la primera pantalla (la franja de aviso de arriba ocupa 32px) */
.cartel.hero-b { min-height: calc(100svh - 32px); padding-bottom: clamp(28px, 5vh, 56px); }
.hero-b .cartel-wm .logo-xl { height: clamp(48px, 1.4rem + 4.2vw, 100px); }
.hero-b .hero-pila { gap: 16px; }
.hero-b .cartel-rutas { margin-bottom: 64px; }
@media (max-width: 900px) { .hero-b .cartel-rutas { margin-bottom: 0; } }
/* hero B: entra al cargar (no espera al scroll, porque está abajo de la primera pantalla) */
.hero-b .hero-pila > *, .hero-b .cartel-rutas { animation: hb-sube 1s cubic-bezier(.2,.8,.2,1) both; }
.hero-b .hero-pila > :nth-child(1) { animation-delay: .15s; }
.hero-b .hero-pila > :nth-child(2) { animation-delay: .25s; }
.hero-b .hero-pila > :nth-child(3) { animation-delay: .38s; }
.hero-b .hero-pila > :nth-child(4) { animation-delay: .5s; }
.hero-b .cartel-rutas { animation-delay: .65s; }
@keyframes hb-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-b .hero-pila > *, .hero-b .cartel-rutas { animation: none; } }

/* =========================== V3 · mejora general =========================== */
/* paleta: nada de negro puro; la tinta es un azul petróleo muy oscuro */
:root { --ink: #0E2A2E; --ink-2: #4D5B5A; --line: #CDC6B9; }
body { font-size: 16px; }
.cartel-cta:hover { background: var(--chispa-2); }

/* escala más contenida en toda la web */
.page-hero h1 { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1; }
.manif-h { font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4.4rem); line-height: 1; }
.sv-top h2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; }
.sv-top h2 em { color: var(--acento); }
.shead h2, .gratis-t h2, .fcn-txt h2, .pl-txt h2 { font-size: clamp(1.8rem, 1.1rem + 1.8vw, 2.7rem); line-height: 1.05; letter-spacing: -.015em; }
.gratis-t h2 span { color: var(--acento); }
.ns-filo li b { font-weight: 600; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.01em; }
.ms-sec { padding: 76px 0 60px; }
.gratis-sec { padding: 80px 0; }
.ns-sec { padding: 88px 0 80px; }

/* hero: flechas rellenas en terracota, que se vean */
.hero-b .ruta i { background: var(--chispa); border-color: var(--chispa); color: #fff; }
.hero-b .ruta:hover i, .hero-b .ruta:focus-visible i { background: #fff; border-color: #fff; color: var(--chispa); }

/* lista MESA: foto + nombre + lista de lo que incluye */
.ms-f { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.15fr) 40px; gap: 32px; padding: 22px 18px 22px 0; }
.ms-foto { display: block; width: 112px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.ms-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.ms-txt b { font-weight: 600; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.8rem); }
.ms-l { color: var(--chispa); }
ul.ms-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin: 0; padding: 0; list-style: none;
  font: 400 .9rem/1.35 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
ul.ms-inc li { position: relative; margin: 0; padding-left: 14px; }
ul.ms-inc li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--chispa); }
.ms-f > i { background: var(--acento); }
/* al pasar el ratón: fondo crema algo más oscuro, nada de bloque azul */
.ms-f:hover, .ms-f:focus-visible { background: #DFD8CC; color: var(--ink); padding-left: 14px; }
.ms-f:hover .ms-l, .ms-f:focus-visible .ms-l { color: var(--chispa); }
.ms-f:hover .ms-txt em, .ms-f:hover .ms-inc, .ms-f:focus-visible .ms-txt em, .ms-f:focus-visible .ms-inc { color: var(--ink-2); }
.ms-f:hover .ms-txt b, .ms-f:focus-visible .ms-txt b { color: var(--ink); }
.ms-f:hover .ms-foto img { transform: scale(1.08); filter: none; }
.ms-f:hover > i, .ms-f:focus-visible > i { background: var(--chispa); color: #fff; }
@media (max-width: 900px) {
  .ms-f { grid-template-columns: 88px minmax(0, 1fr) 40px; gap: 14px 20px; }
  .ms-foto { width: 88px; }
  ul.ms-inc { grid-column: 2 / 3; grid-row: 2; }
}
@media (max-width: 640px) {
  .ms-f { grid-template-columns: 72px minmax(0, 1fr) 34px; padding: 18px 4px; gap: 10px 14px; }
  .ms-foto { width: 72px; }
  ul.ms-inc { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; font-size: .84rem; }
}

/* banda de vídeo */
.vb { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(380px, 62vh, 620px); overflow: hidden; background: #0E2A2E url("../img/cocina-noche.webp") center / cover no-repeat; color: #F4F1EB; }
.vb-v { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vb::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2,64,71,0) 30%, rgba(2,30,34,.82) 100%); }
.vb-t { padding-top: 48px; padding-bottom: clamp(36px, 6vh, 64px); }
.vb-k { display: block; margin-bottom: 14px; font: 500 .68rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--chispa-claro); }
.vb-frase { max-width: 22ch; margin: 0; font: 500 clamp(1.8rem, 1.1rem + 2.2vw, 3.2rem)/1.08 var(--head); letter-spacing: -.01em; }
.vb-frase span { color: var(--chispa-claro); }

/* calculadoras gratis: foto, y colores de la paleta en vez de negro */
.gratis-foto { margin: 28px 0 0; max-width: 360px; aspect-ratio: 4 / 3; overflow: hidden; }
.gratis-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gr { border-top-color: var(--ink); }
.gr i { background: var(--acento); color: #fff; }
.gr:hover, .gr:focus-visible { background: var(--acento); color: #F4F1EB; }
.gr:hover .gr-k, .gr:hover small, .gr:focus-visible .gr-k, .gr:focus-visible small { color: #CFE0DE; }
.gr:hover i, .gr:focus-visible i { background: var(--chispa); color: #fff; }
@media (max-width: 900px) { .gratis-foto { display: none; } }
ul.ms-inc li { padding: 0 0 0 14px; border: 0; border-radius: 0; font-size: inherit; }
.sv-top [data-split] em .w > span { color: var(--acento); }

/* =========================== V3 · equipo de tres, banda con foto, logo de Nazario =========================== */
.ns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ns-socio b { font-weight: 600; letter-spacing: -.01em; }
.ns-filo { grid-column: 1 / -1; margin-top: 18px; }
.ns-filo ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.ns-filo li { border-bottom: 0; border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .ns-grid { grid-template-columns: 1fr 1fr; } .ns-filo ol { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ns-grid { grid-template-columns: 1fr; } .ns-foto { aspect-ratio: 4 / 4.2; } }

.vb-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%;
  transform: scale(1.02); transition: transform 9s linear; }
.vb.in .vb-img, .vb:has(.vb-t.in) .vb-img { transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) { .vb-img { transition: none; } }

.ns-marcas img[src*="nazario-cano"] { max-width: 92%; max-height: 104px; opacity: 1; }
@media (max-width: 640px) { .ns-marcas img[src*="nazario-cano"] { max-height: 76px; } }

/* =========================== V3 · más vida =========================== */
/* 4 · la ⅂ del logo como marca de las etiquetas: se dibuja al aparecer */
.num-tag, .vb-k, .cita-k { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.num-tag::before, .vb-k::before, .cita-k::before {
  content: ''; flex: none; width: 14px; height: 12px; border-top: 2px solid var(--chispa); border-right: 2px solid var(--chispa);
  clip-path: inset(0 100% 100% 0); transition: clip-path .9s cubic-bezier(.6,0,.2,1) .15s;
}
.in .num-tag::before, .num-tag.in::before, .in.vb-t .vb-k::before, .vb-t.in .vb-k::before, .cita-in.in .cita-k::before { clip-path: inset(0 0 0 0); }
.vb-k::before { border-color: var(--chispa-claro); }
.vb-k { color: var(--chispa-claro); }
.bg-dark .num-tag { color: #F4F1EB; }
.bg-dark .num-tag::before { border-color: var(--chispa-claro); }
.hero-b .cartel-k::before { width: 14px; height: 12px; margin: 0 10px 0 0; vertical-align: -1px; background: none; border-top: 2px solid var(--chispa-claro); border-right: 2px solid var(--chispa-claro); }
@media (prefers-reduced-motion: reduce) { .num-tag::before, .vb-k::before, .cita-k::before { clip-path: none; transition: none; } }

/* 1 · parallax en la foto de las calculadoras */
.gratis-foto { position: relative; }
.gratis-foto img { position: absolute; left: 0; top: -10%; height: 120%; will-change: transform; }

/* 1 · foto que sigue al ratón en la lista MESA */
.ms-prev { position: fixed; left: 0; top: 0; z-index: 60; width: 300px; aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none;
  opacity: 0; clip-path: inset(50% 0 50% 0); transition: opacity .25s ease, clip-path .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 24px 60px rgba(14,42,46,.28); }
.ms-prev.on { opacity: 1; clip-path: inset(0 0 0 0); }
.ms-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 3 · calculadoras sobre terracota suave */
.gratis-sec { background: #EBD9CD; }
.gr:hover, .gr:focus-visible { background: var(--acento); }

/* 2 · galería en mosaico que se desplaza sola */
.gal { padding: 72px 0 84px; overflow: hidden; }
.gal-track { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; list-style: none; animation: gal-corre 70s linear infinite; }
.gal:hover .gal-track { animation-play-state: paused; }
.gal-track li { flex: none; height: 300px; margin: 0; overflow: hidden; background: var(--line); }
.gal-track li:nth-child(even) { margin-top: 42px; height: 258px; }
.gal-track li:nth-child(3n) { height: 340px; margin-top: -20px; }
.gal-track img { display: block; width: auto; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.gal-track li:hover img { transform: scale(1.05); filter: none; }
@keyframes gal-corre { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .gal { padding: 48px 0 56px; } .gal-track li { height: 200px; } .gal-track li:nth-child(even) { height: 170px; margin-top: 26px; } .gal-track li:nth-child(3n) { height: 220px; margin-top: -12px; } }
@media (prefers-reduced-motion: reduce) { .gal { overflow-x: auto; } .gal-track { animation: none; } .gal-track li[aria-hidden="true"] { display: none; } }

/* 2 + 3 + 4 · cita grande sobre terracota, con el ⅂N que se dibuja */
.cita { padding: clamp(72px, 10vw, 128px) 0; background: var(--chispa); color: #FFF7F0; overflow: hidden; }
.cita-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cita-marca { width: clamp(110px, 14vw, 200px); height: auto; color: #FFF7F0; }
.cita-marca path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1); }
.cita-marca path + path { transition-delay: .5s; }
.cita-in.in .cita-marca path { stroke-dashoffset: 0; }
.cita-k { color: #FFE3D6; font: 600 .74rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.cita-k::before { border-color: #FFF7F0; }
.cita-t { max-width: 18ch; margin: 16px 0 0; font: 500 clamp(2rem, 1.1rem + 3vw, 4rem)/1.04 var(--head); letter-spacing: -.015em; }
.cita-t span { color: var(--ink); }
.cita-s { max-width: 52ch; margin: 18px 0 0; color: #FFE9DE; font-size: 1.02rem; }
@media (max-width: 640px) { .cita-in { grid-template-columns: 1fr; } .cita-marca { width: 90px; } }
@media (prefers-reduced-motion: reduce) { .cita-marca path { stroke-dashoffset: 0; transition: none; } }

/* =========================== V3 · logos en dos filas contrarias, ⅂N de la cita enrasado =========================== */
.ms-prev { display: none !important; }
.ns-marcas .lg-cinta { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ns-marcas .lg-cinta + .lg-cinta { border-top: 0; }
.ns-marcas .lg-track { width: max-content; flex-wrap: nowrap; justify-content: flex-start; animation: lg-izq 46s linear infinite !important; }
.ns-marcas .lg-2 .lg-track { animation-name: lg-der !important; }
.ns-marcas .lg-cinta:hover .lg-track { animation-play-state: paused !important; }
.ns-marcas .lg-track li[aria-hidden="true"] { display: flex; }
.ns-marcas .lg-track li, .ns-marcas .lg-track li + li {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 210px; min-height: 128px; padding: 0 24px;
  border-bottom: 1px solid rgba(244,241,235,.12);
}
.ns-marcas img[src*="nazario-cano"] { max-width: 100%; max-height: 72px; }
@keyframes lg-izq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lg-der { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) {
  .ns-marcas .lg-track li, .ns-marcas .lg-track li + li { width: 150px; min-height: 96px; padding: 0 14px; }
  .ns-marcas img[src*="nazario-cano"] { max-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-marcas .lg-track { width: 100%; flex-wrap: wrap; justify-content: center; animation: none !important; }
  .ns-marcas .lg-track li[aria-hidden="true"] { display: none; }
}

/* ⅂N de la cita: misma geometría que el logo; se descubre de izquierda a derecha */
.cita-marca { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.6,0,.2,1) .1s; }
.cita-in.in .cita-marca { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .cita-marca { clip-path: none; transition: none; } }

/* =========================== V3 · todo sale de variables (para poder cambiar de paleta) =========================== */
:root { --oscuro-luz: #0B5560; --on-chispa: #FFFFFF; --tinte: #EBD9CD; --hover-fila: #DFD8CC; --sobre-oscuro: #CFE0DE; --in: var(--chispa); }
.bg-dark, .bg-navy { background: var(--acento); background-image: radial-gradient(85% 70% at 75% 0%, var(--oscuro-luz) 0%, var(--acento) 62%); }
.site-footer { background: var(--acento-2); }
.wa-float { background: var(--acento); }
.gratis-sec { background: var(--tinte); }
.ms-f:hover, .ms-f:focus-visible { background: var(--hover-fila); }
.cifras-n span, .ns-marcas .ns-nota, .gr:hover .gr-k, .gr:hover small, .gr:focus-visible .gr-k, .gr:focus-visible small { color: var(--sobre-oscuro); }
.vb { background-color: var(--acento); }
.vb::after { background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--acento-2) 84%, transparent) 100%); }
/* texto encima del color de acento */
.btn-primary, .site-header .btn-primary, .site-header.over:not(.scrolled) .btn-primary, body:has(.page-hero) .site-header.over:not(.scrolled) .btn-primary,
.bg-dark .cto-dir .btn-primary, .cartel-cta, .mx-mini-cta, .mx-sig,
.btn-primary:hover, .site-header .btn-primary:hover, .cartel-cta:hover, .mx-mini-cta:hover, .mx-sig:hover,
.ruta:hover i, .ruta:focus-visible i, .cartel-sub .tw, .cartel-h1 .tw, .ms-f:hover > i, .ms-f:focus-visible > i,
.gr:hover i, .gr:focus-visible i, .hero-b .ruta i, .hero-a .ruta:hover i { color: var(--on-chispa); }
.tw::after { background: var(--on-chispa); }
.hero-b .ruta:hover i, .hero-b .ruta:focus-visible i { background: #fff; border-color: #fff; color: var(--acento); }
.cita { background: var(--chispa); color: var(--on-chispa); }
.cita-marca { color: var(--on-chispa); }
.cita-k, .cita-s { color: var(--on-chispa); opacity: .86; }
.cita-t span { color: var(--acento); }
.cita-k::before { background: var(--on-chispa); }

/* la ⅂ de las etiquetas: la misma letra del logo (49 × 100, trazo 9), no un cuadrado */
.num-tag::before, .vb-k::before, .cita-k::before, .hero-b .cartel-k::before {
  width: 7px; height: 14px; margin: 0; border: 0; background: var(--chispa);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 100'%3E%3Cpath d='M0 0H49V100H40V9H0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 100'%3E%3Cpath d='M0 0H49V100H40V9H0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vb-k::before, .bg-dark .num-tag::before, .hero-b .cartel-k::before { background: var(--chispa-claro); }
.hero-b .cartel-k::before { display: inline-block; margin-right: 10px; vertical-align: -2px; }

/* =========================== V3 · cuatro ideas =========================== */
/* ⅂ del logo como máscara (49 × 100, trazo 9) */
:root { --forma-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49 100'%3E%3Cpath d='M0 0H49V100H40V9H0Z'/%3E%3C/svg%3E"); --corte: 52px; }

/* 1 · MESA apilada: tarjetas grandes con foto que se apilan al bajar */
.ms-apila { border-top: 0; padding-bottom: 12px; counter-reset: mesa; }
.ms-apila > li { position: sticky; top: calc(92px + var(--i, 0) * 18px); margin: 0 0 26px; border-bottom: 0; counter-increment: mesa; }
.ms-apila .ms-f {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  gap: 0; min-height: clamp(380px, 52vh, 470px); padding: 0; background: var(--paper); border: 1px solid var(--ink);
  box-shadow: 0 -14px 40px color-mix(in srgb, var(--ink) 10%, transparent); transition: box-shadow .4s ease;
}
.ms-apila > li:nth-child(even) .ms-f { background: var(--hover-fila); }
.ms-apila .ms-f:hover, .ms-apila .ms-f:focus-visible { padding-left: 0; background: var(--paper); box-shadow: 0 -14px 50px color-mix(in srgb, var(--ink) 18%, transparent); }
.ms-apila > li:nth-child(even) .ms-f:hover { background: var(--hover-fila); }
.ms-apila .ms-foto { grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%; aspect-ratio: auto; }
.ms-apila .ms-txt { grid-column: 2; padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0; }
.ms-apila .ms-txt::before { content: '0' counter(mesa) ' / 04'; display: block; margin-bottom: 18px; font: 500 .7rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; color: var(--ink-2); }
.ms-apila .ms-txt b { font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); line-height: 1; }
.ms-apila .ms-txt em { margin-top: 12px; font-size: 1.05rem; }
.ms-apila ul.ms-inc { grid-column: 2; align-self: start; margin-top: 26px; padding: 22px clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); margin-left: clamp(28px, 4vw, 48px); margin-right: clamp(28px, 4vw, 48px); padding-left: 0; padding-right: 0; }
.ms-apila .ms-f > i { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; width: 48px; height: 48px; margin: 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0; }
@media (max-width: 900px) {
  .ms-apila > li { position: relative; top: auto; }
  .ms-apila .ms-f { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .ms-apila .ms-foto { grid-row: auto; aspect-ratio: 16 / 9; }
  .ms-apila .ms-txt, .ms-apila ul.ms-inc, .ms-apila .ms-f > i { grid-column: 1; grid-row: auto; }
  .ms-apila .ms-txt { padding: 24px 22px 0; }
  .ms-apila ul.ms-inc { margin: 18px 22px 0; padding-top: 16px; }
  .ms-apila .ms-f > i { margin: 16px 22px 22px 0; width: 40px; height: 40px; }
}

/* 2 · fotos con la esquina recortada en ⅂ y la ⅂ del logo dentro */
.ns-foto, .gratis-foto, .ms-apila .ms-foto {
  clip-path: polygon(0 0, calc(100% - var(--corte)) 0, calc(100% - var(--corte)) var(--corte), 100% var(--corte), 100% 100%, 0 100%);
}
.ns-socio { position: relative; }
.ns-socio::before, .ms-apila .ms-f::before {
  content: ''; position: absolute; z-index: 2; width: 12px; height: 24px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat;
}
.ns-socio::before { top: 14px; right: 20px; }
.ms-apila .ms-f::before { top: 14px; left: calc(50% - 32px); }
@media (max-width: 900px) { .ms-apila .ms-f::before { left: auto; right: 20px; } }

/* 3 · pie con el logo gigante */
.pie-logo { margin-top: 44px; padding-top: 40px; border-top: 1px solid color-mix(in srgb, #F4F1EB 14%, transparent); }
.pie-logo .logo-pie { display: block; width: 100%; height: auto; color: #F4F1EB; }
.pie-logo .logo-pie .lg-in { fill: var(--chispa-claro); }
.pie-logo { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.6,0,.2,1); }
.pie-logo.in { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .pie-logo { clip-path: none; transition: none; } }

/* 4 · botones con relleno que barre */
.btn-primary, .cartel-cta, .mx-mini-cta, .mx-sig {
  background-image: linear-gradient(var(--acento), var(--acento)) !important; background-repeat: no-repeat !important;
  background-position: left center !important; background-size: 0% 100% !important;
  transition: background-size .45s cubic-bezier(.6,0,.2,1), color .3s ease, border-color .3s ease !important;
}
.btn-primary:hover, .cartel-cta:hover, .mx-mini-cta:hover, .mx-sig:hover,
.btn-primary:focus-visible, .cartel-cta:focus-visible, .mx-mini-cta:focus-visible, .mx-sig:focus-visible {
  background-color: var(--chispa) !important; background-size: 100% 100% !important; border-color: var(--acento) !important; color: #fff !important;
}
.hero-b .cartel-cta:hover, .site-header.over:not(.scrolled) .btn-primary:hover { background-image: linear-gradient(#fff, #fff) !important; color: var(--acento) !important; border-color: #fff !important; }

/* 4 · textura de papel muy suave sobre toda la página */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }
/* el recorte va en el SVG, no en el bloque observado (si no, el observador nunca lo ve entrar) */
.pie-logo { clip-path: none !important; }
.pie-logo .logo-pie { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.6,0,.2,1) .1s; }
.pie-logo.in .logo-pie { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .pie-logo .logo-pie { clip-path: none; transition: none; } }

/* =========================== V3 · sin comandas: bloque de contacto y tarjetas limpias =========================== */
.pide { background: var(--tinte); color: var(--ink); }
.pide h2, .pide h3 { color: var(--ink); }
.pide h2 span { background: none; color: var(--acento); }
.pide .lead, .pide p { color: var(--ink-2); }
.pide-ct {
  position: relative; justify-self: end; width: 100%; max-width: 420px; padding: 28px 28px 22px; background: var(--paper);
  border: 1px solid var(--ink); clip-path: polygon(0 0, calc(100% - var(--corte)) 0, calc(100% - var(--corte)) var(--corte), 100% var(--corte), 100% 100%, 0 100%);
}
.pide-ct::before { content: ''; position: absolute; top: 14px; right: 20px; width: 12px; height: 24px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }
.pide-ct-k { display: block; margin-bottom: 8px; font: 600 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.1 var(--head); color: var(--ink); }
.pide-ct .pide-b { padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pide-ct .pide-b:last-of-type { border-bottom: 0; }
.pide-ct .pide-b svg { color: var(--chispa); }
.pide-ct .pide-b small { color: var(--ink-2); }
.pide-ct .pide-b:hover { background: var(--hover-fila); }
.pide-ct .pide-b.wa b::after { background: var(--chispa); color: var(--on-chispa); }
.pide-ct-pie { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 500 .68rem/1.4 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) !important; }
@media (max-width: 900px) { .pide-ct { justify-self: start; max-width: none; } }

/* tickets (cuenta atrás de Marca) y recibo (Diagnóstico): tarjetas limpias, sin papel dentado */
.rail { display: none; }
.tk { rotate: 0deg; filter: none; }
.tk::before { display: none; }
.tk-paper, .rc-paper { -webkit-mask: none; mask: none; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); font-family: var(--body); }
.tk-paper { padding: 22px 20px; height: 100%; }
.tk-paper header, .rc-paper header { border-bottom: 1px solid var(--line); color: var(--ink-2); font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.tk-paper header span:first-child { color: var(--chispa); font-weight: 600; }
.tk-big { color: var(--acento); font-family: var(--head); }
.tk-d { border-bottom: 0; color: var(--ink-2); font-size: .86rem; }
.receipt .rc-paper { padding: 26px 24px; }
/* los botones principales de las páginas interiores, en el color de acento (no negro) */
.page-hero .btn-primary { background-color: var(--chispa); border-color: var(--chispa); color: var(--on-chispa); }
.page-hero .btn-primary::before { display: none; }
.receipt { rotate: 0deg; filter: none; }

/* =========================== V3 · MESA en acordeón horizontal =========================== */
.ms-acor { display: flex; gap: 10px; height: clamp(440px, 64vh, 580px); margin: 0; padding: 0; list-style: none; border: 0; counter-reset: mesa; }
.ms-acor > li { position: relative; flex: 1 1 0; min-width: 0; margin: 0; border: 0; overflow: hidden; counter-increment: mesa;
  transition: flex .75s cubic-bezier(.6,0,.2,1); }
.ms-acor > li.on { flex: 3.3 1 0; }
.ms-acor .ms-f {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
  padding: 26px; background: var(--acento-2); color: #F4F1EB; text-decoration: none; box-shadow: none; border: 0; min-height: 0;
}
.ms-acor .ms-f:hover, .ms-acor .ms-f:focus-visible { padding: 26px; background: var(--acento-2); color: #F4F1EB; }
.ms-acor .ms-foto { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; clip-path: none; }
.ms-acor .ms-foto img { filter: saturate(.85) brightness(.82); transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease; }
.ms-acor > li.on .ms-foto img { transform: scale(1); filter: saturate(1) brightness(.9); }
.ms-acor .ms-f::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acento-2) 30%, transparent) 0%, transparent 35%, color-mix(in srgb, var(--acento-2) 92%, transparent) 100%); }
.ms-acor .ms-f > * { position: relative; z-index: 2; }
.ms-acor .ms-f::before { content: '0' counter(mesa); position: absolute; top: 22px; left: 26px; z-index: 2; width: auto; height: auto; background: none; -webkit-mask: none; mask: none;
  font: 500 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; color: #F4F1EB; opacity: .85; }
/* nombre: la letra siempre; el resto de la palabra solo abierta */
.ms-acor .ms-txt b { display: flex; align-items: baseline; font: 600 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--head); letter-spacing: -.01em; color: #F4F1EB; white-space: nowrap; }
.ms-acor .ms-l { color: var(--chispa-claro); }
.ms-acor .ms-f:hover .ms-l { color: var(--chispa-claro); }
.ms-acor .ms-r { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .7s cubic-bezier(.6,0,.2,1), opacity .4s ease; }
.ms-acor > li.on .ms-r { max-width: 12em; opacity: 1; transition-delay: .15s, .3s; }
.ms-acor .ms-txt em, .ms-acor ul.ms-inc { width: min(400px, calc(100vw - 80px)); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s ease, opacity .4s ease, margin .6s ease; }
.ms-acor > li.on .ms-txt em { max-height: 80px; opacity: 1; margin-top: 10px; transition-delay: .2s; }
.ms-acor .ms-txt em, .ms-acor .ms-f:hover .ms-txt em { color: #E9E4DA; font-size: 1.02rem; }
.ms-acor ul.ms-inc { margin: 0; padding: 0; border: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); color: #E9E4DA; }
.ms-acor .ms-f:hover ul.ms-inc { color: #E9E4DA; }
.ms-acor > li.on ul.ms-inc { max-height: 160px; opacity: 1; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, #F4F1EB 25%, transparent); transition-delay: .3s; }
.ms-acor ul.ms-inc li::before { background: var(--chispa-claro); }
.ms-acor .ms-f > i { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; margin: 0; background: var(--chispa); color: var(--on-chispa); opacity: 0; transform: translateX(-8px); transition: opacity .4s ease, transform .4s ease; }
.ms-acor > li.on .ms-f > i { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .ms-acor { flex-direction: column; height: auto; gap: 8px; }
  .ms-acor > li { flex: none; height: 96px; transition: height .6s cubic-bezier(.6,0,.2,1); }
  .ms-acor > li.on { flex: none; height: 400px; }
  .ms-acor .ms-f, .ms-acor .ms-f:hover { padding: 20px; }
  .ms-acor .ms-f::before { top: 16px; left: 20px; }
  .ms-acor .ms-txt b { font-size: 2.2rem; }
  .ms-acor ul.ms-inc { grid-template-columns: 1fr 1fr; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) { .ms-acor > li, .ms-acor .ms-r, .ms-acor .ms-txt em, .ms-acor ul.ms-inc, .ms-acor .ms-foto img { transition: none; } }
.ms-acor .ms-f > .ms-foto { position: absolute; inset: 0; z-index: 0; }
.ms-acor .ms-f { align-items: flex-start; }
/* foto de calculadoras: la esquina en ⅂ se dibuja encima (la foto se mueve con parallax y el recorte no puede ir en ella) */
.gratis-foto { clip-path: none; }
.gratis-foto::before { content: ''; position: absolute; top: 0; right: 0; z-index: 2; width: var(--corte); height: var(--corte); background: var(--tinte); }
.gratis-foto::after { content: ''; position: absolute; top: 14px; right: 20px; z-index: 3; width: 12px; height: 24px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }
/* acordeón: al pasar el ratón el texto sigue claro (lo pisaba la regla de la lista antigua) */
.ms-acor .ms-f:hover .ms-txt b, .ms-acor .ms-f:focus-visible .ms-txt b { color: #F4F1EB; }
.ms-acor .ms-f:hover .ms-txt em, .ms-acor .ms-f:focus-visible .ms-txt em, .ms-acor .ms-f:hover ul.ms-inc, .ms-acor .ms-f:focus-visible ul.ms-inc { color: #E9E4DA; }
.ms-acor .ms-f:hover .ms-l, .ms-acor .ms-f:focus-visible .ms-l { color: var(--chispa-claro); }

/* =========================== V3 · MESA vuelve a la lista (mejorada): las cuatro áreas a la vista =========================== */
.ms-filas { border-top: 1px solid var(--ink); }
.ms-filas > li { border-bottom: 1px solid var(--ink); }
.ms-filas .ms-f { grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1.1fr) 44px; gap: 36px; padding: 18px 16px 18px 0; }
.ms-filas .ms-foto { width: 168px; aspect-ratio: 4 / 3; }
.ms-filas .ms-txt b { font-size: clamp(1.6rem, 1.15rem + 1.1vw, 2.2rem); line-height: 1.05; }
.ms-filas .ms-l { color: var(--chispa); }
.ms-filas .ms-txt em { margin-top: 8px; }
.ms-filas .ms-f > i { width: 44px; height: 44px; background: transparent; color: var(--acento); border: 1px solid var(--acento); transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.ms-filas .ms-f:hover > i, .ms-filas .ms-f:focus-visible > i { background: var(--chispa); border-color: var(--chispa); color: var(--on-chispa); transform: translateX(4px); }
.ms-filas .ms-f:hover .ms-foto img, .ms-filas .ms-f:focus-visible .ms-foto img { transform: scale(1.07); filter: none; }
@media (max-width: 900px) {
  .ms-filas .ms-f { grid-template-columns: 112px minmax(0, 1fr) 40px; gap: 14px 20px; }
  .ms-filas .ms-foto { width: 112px; }
  .ms-filas .ms-f > i { width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .ms-filas .ms-f { grid-template-columns: 84px minmax(0, 1fr) 36px; padding: 16px 4px; gap: 10px 14px; }
  .ms-filas .ms-foto { width: 84px; }
  .ms-filas .ms-f > i { width: 36px; height: 36px; }
}

/* =========================== V3 · animación de entrada del logo =========================== */
.intro { display: none; }
.con-intro .intro {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--acento);
  transition: transform .85s cubic-bezier(.76,0,.24,1);
}
.con-intro body { overflow: hidden; }
.intro-logo { width: min(560px, 74vw); height: auto; overflow: visible; transition: transform .85s cubic-bezier(.76,0,.24,1), opacity .5s ease; }
.intro .i-in > * { fill: var(--chispa-claro); transform-box: fill-box; }
.intro .i-barra { transform-origin: left center; animation: i-ancho .38s cubic-bezier(.6,0,.2,1) .15s both; }
.intro .i-palo { transform-origin: center top; animation: i-alto .42s cubic-bezier(.6,0,.2,1) .4s both; }
.intro .i-diag { animation: i-diag .45s cubic-bezier(.6,0,.2,1) .7s both; }
.intro .i-palo2 { transform-origin: center bottom; animation: i-alto .38s cubic-bezier(.6,0,.2,1) 1s both; }
.intro .i-pull path { stroke: #F4F1EB; stroke-dasharray: 1; stroke-dashoffset: 1; animation: i-traza .55s cubic-bezier(.6,0,.2,1) both; }
.intro .i-pull path:nth-child(1) { animation-delay: .95s; }
.intro .i-pull path:nth-child(2) { animation-delay: 1.07s; }
.intro .i-pull path:nth-child(3) { animation-delay: 1.19s; }
.intro .i-pull path:nth-child(4) { animation-delay: 1.31s; }
@keyframes i-ancho { from { transform: scaleX(0); } to { transform: none; } }
@keyframes i-alto { from { transform: scaleY(0); } to { transform: none; } }
@keyframes i-diag { from { clip-path: polygon(0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 300% 0, 0 300%); } }
@keyframes i-traza { to { stroke-dashoffset: 0; } }
/* salida: la cortina sube y el logo se va un poco antes */
.intro-fin .intro { transform: translateY(-100%); }
.intro-fin .intro-logo { transform: translateY(-40px); opacity: 0; }
/* el hero espera a que suba la cortina */
.con-intro .hero-b .hero-pila > :nth-child(1) { animation-delay: 2.05s; }
.con-intro .hero-b .hero-pila > :nth-child(2) { animation-delay: 2.15s; }
.con-intro .hero-b .hero-pila > :nth-child(3) { animation-delay: 2.28s; }
.con-intro .hero-b .hero-pila > :nth-child(4) { animation-delay: 2.4s; }
.con-intro .hero-b .cartel-rutas { animation-delay: 2.55s; }

/* =========================== V3 · MESA en rejilla 2 × 2 compacta =========================== */
.ms-sec { padding: 64px 0 56px; }
.ms-sec .shead { margin-bottom: 28px; }
.ms-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.ms-rejilla > li { border-bottom: 1px solid var(--ink); border-right: 1px solid var(--line); }
.ms-rejilla .ms-f {
  position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 22px;
  height: 100%; padding: 22px 64px 22px 22px; align-items: start;
}
.ms-rejilla .ms-f:hover, .ms-rejilla .ms-f:focus-visible { padding-left: 22px; }
.ms-rejilla .ms-foto { grid-column: 1; grid-row: 1 / 3; width: 128px; aspect-ratio: 1; }
.ms-rejilla .ms-txt { grid-column: 2; }
.ms-rejilla .ms-txt b { font-size: clamp(1.35rem, 1.1rem + .6vw, 1.7rem); line-height: 1.05; }
.ms-rejilla .ms-txt em { margin-top: 4px; font-size: .95rem; }
.ms-rejilla ul.ms-inc { grid-column: 2; display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 12px; font-size: .84rem; }
.ms-rejilla ul.ms-inc li { padding: 0; }
.ms-rejilla ul.ms-inc li::before { display: none; }
.ms-rejilla ul.ms-inc li + li::before { content: '·'; display: inline; position: static; width: auto; height: auto; margin: 0 8px; background: none; color: var(--chispa); }
.ms-rejilla .ms-f > i { position: absolute; top: 22px; right: 18px; width: 36px; height: 36px; background: transparent; color: var(--acento); border: 1px solid var(--acento); }
.ms-rejilla .ms-f:hover > i, .ms-rejilla .ms-f:focus-visible > i { background: var(--chispa); border-color: var(--chispa); color: var(--on-chispa); transform: translateX(3px); }
.ms-rejilla .ms-f:hover .ms-foto img { transform: scale(1.07); filter: none; }
@media (max-width: 900px) {
  .ms-rejilla { grid-template-columns: 1fr; }
  .ms-rejilla .ms-f { grid-template-columns: 96px minmax(0, 1fr); padding: 18px 56px 18px 16px; }
  .ms-rejilla .ms-foto { width: 96px; }
}
@media (max-width: 520px) {
  .ms-rejilla .ms-f { grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; padding: 16px 48px 16px 12px; }
  .ms-rejilla .ms-foto { width: 72px; grid-row: 1; }
  .ms-rejilla ul.ms-inc { grid-column: 1 / -1; }
  .ms-rejilla .ms-f > i { top: 16px; right: 10px; width: 32px; height: 32px; }
}
.ms-rejilla ul.ms-inc li + li::before { content: none; }
.ms-rejilla ul.ms-inc li:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--chispa); }

/* =========================== V3 · MESA como recorrido M → E → S → A =========================== */
.rc { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.rc::before { content: ''; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: var(--chispa);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.6,0,.2,1) .2s; }
.rc.in::before { transform: none; }
.rc-paso { position: relative; display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.rc-paso:hover { text-decoration: none; color: var(--ink); }
.rc-nodo { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--acento); color: #F4F1EB; font: 600 1.3rem/1 var(--head); box-shadow: 0 0 0 7px var(--paper);
  transform: scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .3s ease, background .3s ease; transition-delay: calc(.35s + var(--i) * .3s); }
.rc.in .rc-nodo { transform: none; opacity: 1; }
.rc-paso:hover .rc-nodo, .rc-paso:focus-visible .rc-nodo { background: var(--chispa); color: var(--on-chispa); transition-delay: 0s; }
.rc-foto { position: relative; display: block; margin-top: 10px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line);
  clip-path: polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 38px, 100% 38px, 100% 100%, 0 100%); }
.rc-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.rc-paso:hover .rc-foto img { transform: scale(1.06); }
.rc-n { margin-top: 4px; font: 600 1.35rem/1.1 var(--head); color: var(--ink); }
.rc-n::after { content: ' →'; color: var(--chispa); opacity: 0; transition: opacity .3s ease, margin .3s ease; }
.rc-paso:hover .rc-n::after { opacity: 1; margin-left: 4px; }
.rc-f { color: var(--ink-2); font-size: .94rem; line-height: 1.45; }
.rc-s { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.rc-s li { margin: 0; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); font-size: .8rem; color: var(--ink); transition: border-color .3s ease; }
.rc-paso:hover .rc-s li { border-color: var(--chispa); }
@media (max-width: 900px) {
  .rc { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .rc::before { display: none; }
}
@media (max-width: 560px) {
  .rc { grid-template-columns: 1fr; gap: 0; }
  .rc::before { display: block; left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; transform: scaleY(0); transform-origin: top center; }
  .rc.in::before { transform: none; }
  .rc-paso { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding-bottom: 28px; }
  .rc-paso > :not(.rc-nodo) { grid-column: 2; }
  .rc-nodo { grid-row: 1 / span 5; }
  .rc-foto { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .rc::before, .rc-nodo { transform: none !important; opacity: 1 !important; transition: none; } }
/* recorrido: la ⅂ del logo dentro de la esquina recortada de cada foto */
.rc-paso::after { content: ''; position: absolute; top: 75px; right: 14px; z-index: 2; width: 10px; height: 20px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }
@media (max-width: 560px) { .rc-paso::after { top: 9px; } }

/* =========================== V3 · páginas interiores con el estilo de la portada =========================== */
/* cabecera con foto a la derecha y la esquina en ⅂ */
.page-hero .wrap.ph-con-foto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.ph-con-foto > :not(.ph-foto) { grid-column: 1; }
.ph-foto { position: relative; grid-column: 2; grid-row: 1 / span 4; align-self: stretch; min-height: 360px; margin: 0; overflow: hidden; background: var(--line); }
.ph-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-foto::before { content: ''; position: absolute; top: 0; right: 0; z-index: 2; width: var(--corte); height: var(--corte); background: var(--paper); }
.ph-foto::after { content: ''; position: absolute; top: 14px; right: 20px; z-index: 3; width: 12px; height: 24px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }
.ph-con-foto h1 { max-width: 13ch; }
@media (max-width: 900px) {
  .page-hero .wrap.ph-con-foto { grid-template-columns: 1fr; }
  .ph-foto { grid-column: 1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; margin-top: 28px; }
}

/* etiqueta de cabecera: la ⅂ del logo en lugar del punto que late */
.kicker .live, .page-hero .live { width: 8px; height: 16px; border-radius: 0; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }
.kicker .live::after, .page-hero .live::after { display: none; }
@media (max-width: 640px) { .kicker .live { display: inline-block; } }

/* pasos: sin cápsula, en el color de acento */
.cm-t { padding: 0; border: 0; border-radius: 0; font: 600 .72rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--chispa); }

/* fichas de ejemplo: tarjeta limpia, recta, sin papel ni sello torcido */
.fcn { rotate: 0deg; background: var(--paper); border: 1px solid var(--ink); box-shadow: none; }
.fcn dl > div { border-bottom: 1px solid var(--line); }
.fcn-sello { rotate: 0deg !important; transform: none !important; border-color: var(--chispa) !important; color: var(--chispa) !important; }
/* recorrido MESA: lo que incluye cada área, en lista con la ⅂ del logo (no etiquetas) */
.rc-s { display: block; margin-top: 6px; border-top: 1px solid var(--line); }
.rc-s li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: .86rem; }
.rc-s li::before { content: ''; flex: none; width: 6px; height: 12px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }
.rc-paso:hover .rc-s li { border-color: var(--line); }
.rc-s li { padding: 4px 0; }
.rc-foto { aspect-ratio: 16 / 9; }
.ms-sec { padding-top: 56px; }
/* recorrido MESA: cada parte a la misma altura en las cuatro columnas (nombre, frase y lista alineados) */
.rc-f { min-height: 2.9em; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 561px) {
    .rc-paso { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 8px; align-content: start; }
    .rc-f { min-height: 0; }
    .rc-s { align-self: start; }
  }
}

/* =====================================================================
   V3 · HERRAMIENTAS AL ESTILO NUEVO (11/11/2026)
   Fuera el papel de ticket, el dentado, los sellos torcidos, la letra a mano y la de máquina en los paneles.
   Todo pasa a tarjeta limpia con la paleta: Jost en cifras y títulos, Inter en el texto, mono solo en etiquetas pequeñas.
   ===================================================================== */
/* paneles de resultado: tarjeta recta, borde fino, barra de marca arriba y la ⅂ en la esquina */
.expediente, .ficha, .zt-paper, .mc-ticket, .wt-in.tkt, .board {
  position: relative; rotate: 0deg !important; border-radius: 0 !important; background: var(--paper) !important; background-image: none !important;
  border: 1px solid var(--ink) !important; border-top: 4px solid var(--acento) !important; box-shadow: none !important;
  -webkit-mask: none !important; mask: none !important; font-family: var(--body) !important; color: var(--ink);
}
.expediente::after, .ficha::after, .zt-paper::after, .board::after { content: ''; position: absolute; top: 12px; right: 14px; width: 9px; height: 18px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; pointer-events: none; }
.zt, .exp-wrap, .ficha-wrap, .z-wrap { rotate: 0deg !important; filter: none !important; }
.ficha { padding-top: 26px !important; }
.ficha-clip { display: none !important; }
.zt-paper { padding: 26px 24px 22px !important; }
.js .zt .zt-paper { clip-path: none !important; transition: none !important; }

/* cifras en Jost, textos en Inter */
.ficha .value, .zt .value, .expediente .value, .ex-c b, .fh-meta dd, .ficha-coste b, .zt-line b, .zt-total b, .mc-line b, .mc-total b, .ex-big b {
  font-family: var(--head) !important; font-weight: 600 !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums;
}
.ficha-ing, .zt-line, .zt-desglose, .mc-line { font-family: var(--body) !important; }
.ficha-ing { font-size: .86rem; }
.zt-head, .zt-foot, .zt-sec, .fh-top, .ex-k, .ex-sub, .ex-c > span, .fh-meta dt, .ficha-sub, .ex-n, .mc-ticket header { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.zt-total b, .ex-big b { color: var(--acento) !important; }
.ficha-coste { border-radius: 0 !important; background: var(--acento) !important; }
.ficha-coste b { color: #F4F1EB !important; }

/* sin líneas punteadas de ticket */
.zt-head, .zt-big, .zt-desglose .result-row, .ficha-ing li, .ex-c, .ex-grid, .fh-meta, .fh-meta div, .ex-firma, .ficha-firma span, .mc-ticket header, .wt-in.tkt .tkh { border-style: solid !important; border-color: var(--line) !important; }
.zt-line span::after, .mc-line span::after { border-bottom: 1px solid var(--line) !important; translate: 0 -4px; }
.zt-sec::before, .zt-sec::after { border-top: 1px solid var(--line) !important; }
.ficha-ing li::before { color: var(--chispa) !important; }
.zt .bar, .zt .bar > i { background-image: none !important; border-radius: 0; }
.zt .bar { background: var(--line) !important; }
.zt .bar > i { background: var(--acento) !important; }
.zt .bar > i.is-bad { background: #B23C24 !important; }
.zt .bar > i.is-good { background: var(--acento) !important; }

/* sellos («AJUSTADO», «APROBADA»…): etiqueta recta, no estampado torcido */
.sello { rotate: 0deg !important; border-width: 1px !important; border-radius: 99px !important; padding: 4px 12px !important; font-size: .68rem !important; letter-spacing: .12em !important; mix-blend-mode: normal !important; background: var(--paper); top: 18px !important; right: 34px !important; }
.sello.golpe { animation: none !important; }

/* veredictos: texto normal con su color de estado */
.verdict, .ficha .verdict, .zt .verdict, .expediente .verdict {
  font-family: var(--body) !important; font-weight: 400 !important; font-size: .93rem !important; line-height: 1.5 !important; rotate: 0deg !important;
  padding: 14px 16px !important; border-radius: 0 !important; border: 0 !important; border-left: 3px solid currentColor !important; background: var(--hover-fila) !important;
}
.verdict strong, .ficha .verdict strong, .zt .verdict strong, .expediente .verdict strong { font-family: var(--head); font-weight: 600; font-size: 1.1rem !important; text-decoration: none !important; }
.verdict.good, .ficha .verdict.good, .zt .verdict.good { color: var(--acento) !important; }
.verdict.warn, .ficha .verdict.warn, .zt .verdict.warn { color: var(--chispa-2) !important; }
.verdict.bad, .ficha .verdict.bad, .zt .verdict.bad { color: #B23C24 !important; }

/* expediente de viabilidad: firma con el logo en vez de rúbrica a mano; escala con la paleta */
.ex-rubrica { font: 600 .95rem/1 var(--head) !important; letter-spacing: .22em !important; text-transform: uppercase; color: var(--acento) !important; rotate: 0deg !important; translate: none !important; }
.ex-escala { background: linear-gradient(90deg, var(--acento) 0 45%, var(--chispa-claro) 45% 65%, var(--chispa) 65% 80%, #B23C24 80% 100%) !important; border-radius: 0 !important; }
.ex-mk span { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; }
.expediente .value.is-good { color: var(--acento) !important; }
.expediente .value.is-warn { color: var(--chispa-2) !important; }

/* ingeniería de menú: notas en texto normal y clasificación con la paleta */
.notes li { font-family: var(--body) !important; font-weight: 400 !important; font-size: .9rem !important; color: var(--ink) !important; }
.notes li::before { background: var(--chispa) !important; border-color: var(--chispa) !important; color: var(--on-chispa) !important; font-family: var(--head) !important; }
.mk::after { color: var(--chispa) !important; }
.mx-dot.estrella, .im-q.estrella { --c: var(--acento); }
.mx-dot.estrella { background: var(--acento) !important; }
.mx-dot.caballo, .im-q.caballo { --c: var(--chispa-claro); }
.mx-dot.caballo { background: var(--chispa-claro) !important; }
.mx-dot.puzzle, .im-q.puzzle { --c: var(--chispa); }
.mx-dot.puzzle { background: var(--chispa) !important; }
.mx-dot.perro, .im-q.perro { --c: #B23C24; }
.tag-estrella { background: var(--acento) !important; color: #F4F1EB !important; }
.tag-caballo { background: var(--tinte) !important; color: var(--ink) !important; }
.tag-puzzle { background: color-mix(in srgb, var(--chispa) 22%, var(--paper)) !important; color: var(--ink) !important; }
.tag-perro { background: color-mix(in srgb, #B23C24 16%, var(--paper)) !important; color: #8E2D1A !important; }
.board { border-radius: 0 !important; }

/* formularios de las herramientas: campos rectos como el resto de la web */
.tool .panel, .tool-sec .panel { border-radius: 0 !important; border: 1px solid var(--line) !important; box-shadow: none !important; background: var(--paper) !important; }
.tool input, .tool select, .tool-sec input, .tool-sec select { border-radius: 0 !important; }
/* herramientas · ajuste: líneas finas de verdad (sin cajas dobles) y tablas más limpias */
.zt-head, .ficha-ing li, .zt-desglose .result-row, .mc-ticket header, .wt-in.tkt .tkh { border-width: 0 0 1px !important; }
.zt-big, .ex-firma, .ficha-firma span { border-width: 1px 0 0 !important; }
.ex-grid { border-width: 1px 0 0 1px !important; }
.ex-c { border-width: 0 1px 1px 0 !important; }
/* datos del plato: tres cifras sin cajas, separadas por una línea */
.fh-meta { border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.fh-meta div { border-width: 0 0 0 1px !important; padding: 10px 14px !important; }
.fh-meta div:first-child { border-left: 0 !important; padding-left: 0 !important; }
.fh-meta dd { font-size: 1.05rem !important; }
/* ingredientes: filas limpias, número terracota, importe alineado */
.ficha-ing li { padding: 8px 0 !important; gap: 12px !important; font-size: .9rem; }
.ficha-ing li::before { min-width: 1.6em; font: 600 .74rem/1 'IBM Plex Mono', ui-monospace, monospace; }
.ficha-ing li b { font-family: var(--head); }
.ficha-ing li i { color: var(--chispa-2) !important; }
/* el sello ocupa el sitio del número que quitamos, alineado con la cabecera */
.ficha .sello { top: 22px !important; right: 34px !important; }
.expediente .sello { top: 22px !important; right: 34px !important; }
.sello.aprobada { color: var(--acento) !important; }
.sello.ajustar { color: var(--chispa-2) !important; }
.sello.revisar { color: #B23C24 !important; }
.expediente .sello { top: 54px !important; right: 24px !important; }
/* tarjeta de contacto: la esquina en ⅂ se dibuja encima (con recorte, la ⅂ quedaba fuera y no se veía) */
.pide-ct { clip-path: none !important; }
.pide-ct::before { top: -1px !important; right: -1px !important; width: calc(var(--corte) + 1px) !important; height: calc(var(--corte) + 1px) !important;
  background: var(--tinte) !important; -webkit-mask: none !important; mask: none !important;
  border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); z-index: 2; }
.pide-ct::after { content: ''; position: absolute; top: 14px; right: 20px; z-index: 3; width: 12px; height: 24px; background: var(--chispa);
  -webkit-mask: var(--forma-l) center / contain no-repeat; mask: var(--forma-l) center / contain no-repeat; }

/* =========================== V3 · menú «Servicios» al estilo nuevo =========================== */
@media (min-width: 721px) {
  .nav-dd-menu { min-width: 390px; padding: 10px; border: 0; border-top: 3px solid var(--acento); background: var(--paper);
    box-shadow: 0 24px 50px color-mix(in srgb, var(--ink) 18%, transparent); }
  .site-header .nav-dd-menu a, .site-header.over:not(.scrolled) .nav-dd-menu a:not(.btn) { align-items: center; gap: 14px; padding: 10px 12px; color: var(--ink); }
  .nav-dd-menu a > b { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: var(--acento); color: #F4F1EB; font: 600 1rem/1 var(--head); transition: background .25s ease; }
  .nav-dd-menu a > span { display: flex; flex-direction: column; gap: 2px; font: 600 1rem/1.15 var(--head); }
  .nav-dd-menu a > span small { font: 400 .78rem/1.3 var(--body); color: var(--ink-2); }
  .nav-dd-menu a:hover, .nav-dd-menu a.active { background: var(--hover-fila); color: var(--ink) !important; }
  .nav-dd-menu a:hover > b, .nav-dd-menu a.active > b { background: var(--chispa); color: var(--on-chispa); }
  .nav-dd-menu .dd-extra { justify-content: space-between; margin-top: 8px; padding: 12px !important; border-top: 1px solid var(--line); color: var(--ink-2) !important; }
  .nav-dd-menu .dd-extra b { margin: 0 0 0 5px; font: 600 .95rem/1 var(--head); color: var(--ink); }
  .nav-dd-menu .dd-extra::after { content: '→'; margin-left: auto; color: var(--chispa); transition: transform .25s ease; }
  .nav-dd-menu .dd-extra:hover::after { transform: translateX(4px); }
}
@media (max-width: 720px) {
  .nav-dd-menu a > span small { display: none; }
  .nav-dd-menu a > b { color: var(--chispa-claro); }
}
@media (min-width: 721px) {
  .nav-dd-menu .dd-extra > b, .nav-dd-menu .dd-extra:hover > b { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: var(--ink); }
}
@media (min-width: 721px) {
  .site-header .nav-dd-menu a.dd-extra { justify-content: flex-start; gap: 0; }
  .nav-dd-menu .dd-extra::after { margin-left: auto; padding-left: 12px; }
}

/* =========================== V3 · menús de Herramientas y Guías =========================== */
.nav-dd-menu a > b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dd-guias .nav-dd-menu a > b { font-size: .8rem; letter-spacing: .02em; }
@media (min-width: 721px) {
  .dd-herr .nav-dd-menu, .dd-guias .nav-dd-menu { left: auto; right: -16px; }
  .nav-dd-menu.dd-2col { grid-template-columns: 1fr 1fr; min-width: 600px; column-gap: 6px; }
  .nav-dd-menu.dd-2col .dd-extra { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav-dd-menu a > b svg { width: 14px; height: 14px; }
  .nav-dd-menu.dd-2col { grid-template-columns: 1fr 1fr; }
}

/* =========================== V3 · PALETA DEFINITIVA: petróleo + naranja quemado (60/30/10) ===========================
   60 % crema #F3EEE3 · 30 % azul petróleo #0E3D47 · 10 % naranja quemado #D9541E (complementario del petróleo). */
:root {
  --acento: #0E3D47; --acento-2: #08272E; --oscuro-luz: #175663; --forest-900: #0E3D47;
  --chispa: #D9541E; --chispa-2: #BF4413; --chispa-claro: #F2804F; --on-chispa: #FFFFFF; --in: var(--chispa);
  --paper: #F3EEE3; --ink: #0B2A30; --ink-2: #4E5B5C; --line: #D9D1C2;
  --tinte: #F4DCCD; --hover-fila: #EAE3D6; --sobre-oscuro: #CFE0DE;
}

/* botones sobre fondo oscuro (cabecera encima del vídeo, hero, bandas azules): al pasar el ratón barren en crema
   y la letra pasa a petróleo; el barrido azul solo se usa sobre fondo claro */
.site-header.over:not(.scrolled) .btn-primary:hover, .site-header.over:not(.scrolled) .btn-primary:focus-visible,
.hero-b .btn-primary:hover, .hero-b .cartel-cta:hover, .hero-b .cartel-cta:focus-visible,
.bg-dark .btn-primary:hover, .bg-dark .btn-primary:focus-visible, .vb .btn-primary:hover, .site-footer .btn-primary:hover {
  background-image: linear-gradient(#F3EEE3, #F3EEE3) !important; color: var(--acento) !important; border-color: #F3EEE3 !important;
}
/* fondo alterno: un crema algo más tostado (dentro del 60 % neutro), no un tinte del naranja */
:root { --tinte: #E9E1D2; --lime: #EAE3D6; --lime-tint: #F3EEE3; --lime-ink: #4E5B5C; }
/* el barrido antiguo (capa ::before oscura que subía) tapaba el nuevo: fuera en los botones principales */
.btn-primary::before { display: none !important; }
.btn-ghost::before { background: var(--acento) !important; }
.bg-dark .btn-ghost::before, .hero-b .btn-ghost::before, .site-header.over:not(.scrolled) .btn-ghost::before { background: #F3EEE3 !important; }
.bg-dark .btn-ghost:hover, .hero-b .btn-ghost:hover { color: var(--acento) !important; border-color: #F3EEE3 !important; }

/* =========================== V3 · efectos 2 a 5 =========================== */
/* 3 · transición entre páginas: sustituye a la transición del navegador */
@view-transition { navigation: none; }
.pt-out, html.pt-in::after {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 100'%3E%3Cg fill='%23F2804F'%3E%3Crect width='49' height='9'/%3E%3Crect x='40' width='9' height='100'/%3E%3Cpolygon points='40,0 51.8,0 125,100 113.2,100'/%3E%3Crect x='116' width='9' height='100'/%3E%3C/g%3E%3C/svg%3E") center / 84px no-repeat;
}
.pt-out { transform: translateY(100%); transition: transform .45s cubic-bezier(.76,0,.24,1); }
.pt-out.on { transform: none; }
html.pt-in::after { content: ''; transition: transform .7s cubic-bezier(.76,0,.24,1) .08s; }
html.pt-in.pt-sale::after { transform: translateY(-100%); }

/* 2 · la galería oscurece el fondo al llegar */
.gal { transition: background-color .9s ease; }
.gal.oscuro { background-color: var(--acento); }

/* 5 · el vídeo del hero se acerca al bajar */
.hero-b .hx-video { transform-origin: 50% 40%; will-change: transform; }

/* 4 · cuadro de mando flotante (ejemplo) */
.gratis-t { position: relative; }
.kpi-flota {
  position: relative; z-index: 2; width: 300px; max-width: 92%; margin: -90px 0 0 150px;
  padding: 16px 18px 14px; background: var(--paper); border: 1px solid var(--ink); border-top: 3px solid var(--acento);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--ink) 20%, transparent);
}
.kf-k { display: flex; align-items: center; gap: 8px; font: 600 .64rem/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.kf-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--chispa); box-shadow: 0 0 0 0 color-mix(in srgb, var(--chispa) 60%, transparent); animation: kf-vivo 1.8s ease-out infinite; }
@keyframes kf-vivo { to { box-shadow: 0 0 0 8px transparent; } }
.kf-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 10px; border-top: 1px solid var(--line); }
.kf-g div { padding: 10px 8px 0 0; }
.kf-g div + div { padding-left: 10px; border-left: 1px solid var(--line); }
.kf-g small { display: block; font-size: .7rem; color: var(--ink-2); }
.kf-g b { display: block; margin-top: 2px; font: 600 1.15rem/1.1 var(--head); color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kf-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
.kf-bars i, .kf-crece i { flex: 1; height: var(--h); background: var(--acento); transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.35s + var(--i, 0) * .06s); }
.kf-bars i:last-child { background: var(--chispa); }
.in .kf-bars i, .kpi-flota.in .kf-bars i, .in .kf-crece i { transform: none; }
.kf-nota { display: block; margin-top: 8px; font-size: .64rem; color: var(--ink-2); }
@media (max-width: 900px) { .kpi-flota { margin: 18px 0 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .kf-bars i, .kf-crece i { transform: none; transition: none; } .kf-k i { animation: none; } }

/* =====================================================================
   V3 · PULIDO DE DISEÑO (sin animaciones): tipografía, ritmo, equipo y detalles de uso
   ===================================================================== */
/* 1 · una sola escala de títulos de sección en toda la web */
.shead h2, .sv-top h2, .gratis-t h2, .fcn-txt h2, .pl-txt h2, #contacto h2, .pide h2, .bg-dark h2 {
  font-size: clamp(2rem, 1.3rem + 1.9vw, 3rem) !important; line-height: 1.04 !important; letter-spacing: -.015em !important; font-weight: 600 !important;
}
.shead h2 span, .gratis-t h2 span, .sv-top h2 em, .pide h2 span { color: var(--chispa) !important; }
.sv-top [data-split] em .w > span { color: var(--chispa) !important; background-image: none !important; }
.bg-dark h2 span { color: var(--chispa-claro) !important; background: none !important; }

/* 2 · texto más legible: un gris con más contraste y una medida cómoda */
:root { --ink-2: #445354; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.shead p, .lead, .hero-lead, .gratis-t p { max-width: 54ch; }

/* 3 · ritmo: el mismo aire arriba y abajo en todas las secciones de la portada */
.ms-sec, .gratis-sec, .ns-sec { padding-top: clamp(64px, 8vw, 104px) !important; padding-bottom: clamp(64px, 8vw, 104px) !important; }
.gal { padding: clamp(56px, 7vw, 88px) 0 !important; }

/* 4 · equipo: fotos menos altas y nombre más presente */
.ns-foto { aspect-ratio: 1 / 1.05 !important; }
.ns-socio figcaption { padding-top: 16px; border-top: 3px solid var(--acento); margin-top: -3px; position: relative; }
.ns-socio b { font-size: 1.3rem !important; }
.ns-socio figcaption span { color: var(--chispa) !important; letter-spacing: .1em; }
.ns-socio p { max-width: 40ch; }

/* 5 · detalles de uso: foco visible al navegar con teclado, selección, barra de desplazamiento */
:focus-visible { outline: 2px solid var(--chispa); outline-offset: 3px; }
.bg-dark :focus-visible, .hero-b :focus-visible, .site-footer :focus-visible { outline-color: var(--chispa-claro); }
::selection { background: var(--chispa); color: #fff; }
html { scrollbar-color: var(--acento) var(--paper); scrollbar-width: thin; }

/* 6 · cabecera al bajar: más fina y con un velo crema translúcido */
.site-header.scrolled, .site-header:not(.over) { background: color-mix(in srgb, var(--paper) 88%, transparent) !important; backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line) !important; }
.site-header.scrolled .nav { min-height: 62px; }

/* 7 · enlaces de texto: subrayado en el color de acento */
main p a:not(.btn), .faq a, .gratis-pie a { text-decoration-color: var(--chispa); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* botón principal sobre fondo azul (formulario de contacto): también en naranja */
.bg-dark .btn-primary, .bg-navy .btn-primary { background-color: var(--chispa) !important; border-color: var(--chispa) !important; color: #fff !important; }
/* sin la franja de «web de trabajo», el hero vuelve a ocupar toda la pantalla */
.cartel.hero-b { min-height: 100vh; min-height: 100svh; }