/* Inkieta · estilos comunes a todas las páginas
   Marca: kit de marca y carta de estilo (octubre 2026). Proporción B: cereza ~50 %, Nantucket ~35 %, amarillo ~15 %.
   Nada torcido: sin rotaciones en botones, etiquetas ni tarjetas. */

:root {
  --cereza: #5C0720; --cereza-hover: #4A061A;
  --amarillo: #FCEFA0; --amarillo-suave: #FEF7D0;
  --nantucket: #B7D1EA; --nantucket-suave: #E2EDF7;
  --font-titulares: "Urbanist", Arial, sans-serif;
  --font-texto: "Hanken Grotesk", Arial, sans-serif;
  --h1: clamp(2.3rem, 1rem + 4vw, 4.8rem);
  --h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --h3: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  --t1: clamp(1.1rem, 1rem + .45vw, 1.3rem);
  --t3: 1rem; --t4: .8125rem;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --space: clamp(72px, 9vw, 136px);
}

/* Temas de sección: los componentes solo usan estas variables */
.theme-suave, .theme-nantucket, .theme-cereza { background: var(--bg); color: var(--fg); }
.theme-suave { --bg: var(--nantucket-suave); --fg: var(--cereza); --head: var(--cereza); --muted: var(--cereza); --accent: var(--cereza); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); --line: var(--nantucket); --card: var(--nantucket); --card-fg: var(--cereza); }
.theme-nantucket { --bg: var(--nantucket); --fg: var(--cereza); --head: var(--cereza); --muted: var(--cereza); --accent: var(--cereza); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); --line: var(--cereza); --card: var(--nantucket-suave); --card-fg: var(--cereza); }
.theme-cereza { --bg: var(--cereza); --fg: var(--nantucket-suave); --head: var(--nantucket-suave); --muted: var(--nantucket); --accent: var(--amarillo); --btn-bg: var(--amarillo); --btn-fg: var(--cereza); --line: var(--nantucket); --card: var(--cereza-hover); --card-fg: var(--nantucket-suave); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--font-texto); background: var(--nantucket-suave); color: var(--cereza); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-titulares); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--head, inherit); }
p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: normal; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--amarillo); color: var(--cereza); padding: 10px 16px; border-radius: 99px; }
:focus-visible { outline: 3px solid var(--accent, var(--cereza)); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
main > section { position: relative; overflow: clip; padding-block: var(--space); }

/* ---------- Piezas comunes ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 24px; border: 2px solid var(--btn-bg); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: 700 1rem/1.2 var(--font-titulares); text-decoration: none; cursor: pointer; transition: transform .2s; }
.btn:hover { transform: translateX(3px); }
.btn .ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--btn-fg); color: var(--btn-bg); flex: none; }
.btn .ico svg { width: 16px; height: 16px; }
.btn-ghost { background: transparent; color: var(--fg); border-color: currentColor; padding: 14px 24px; }
.btn-sm { padding: 5px 5px 5px 18px; font-size: .9rem; }
.btn-sm .ico { width: 30px; height: 30px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem var(--font-titulares); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.link-arrow svg { width: 14px; height: 14px; transition: translate .2s; }
.link-arrow:hover svg { translate: 4px 0; }
.kicker { display: inline-block; margin-bottom: 18px; padding: 6px 16px; border: 2px solid currentColor; border-radius: 99px; font: 500 var(--t3) var(--font-texto); color: var(--muted); }
.pill { display: inline-block; width: fit-content; padding: 8px 18px; border-radius: 99px; background: var(--amarillo); color: var(--cereza); font: 700 .95rem var(--font-titulares); }
.dots li { position: relative; padding-left: 20px; margin-top: 8px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.micro { font-size: var(--t3); color: var(--muted); }
.todo { padding: 22px 26px; border: 2px dashed currentColor; border-radius: 22px; font-size: var(--t3); opacity: .75; }

.sec-head { position: relative; margin-bottom: clamp(44px, 5vw, 80px); }
.sec-head h2 { font-size: clamp(2.1rem, .9rem + 4vw, 4.6rem); line-height: .96; letter-spacing: -.045em; max-width: 18ch; }
.sec-head .lead { margin-top: 22px; margin-left: clamp(0px, 22vw, 340px); font-size: var(--t1); max-width: 54ch; }
.sec-end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 56px; margin-left: clamp(0px, 14vw, 220px); }
.sec-end p { font: 700 var(--h3) var(--font-titulares); max-width: 36ch; }

/* La onda y el fragmento «nki» */
.deco-wave { position: absolute; left: -10%; width: 120%; height: 48px; pointer-events: none; color: var(--accent); }
.deco-wave svg { width: 100%; height: 100%; overflow: visible; }
.deco-wave path { animation: flow 9s linear infinite; }
@keyframes flow { to { transform: translateX(-200px); } }
.deco-nki { position: absolute; pointer-events: none; }
.deco-nki svg { display: block; width: 100%; height: auto; }

/* Iconos de línea */
.icon { width: 30px; height: 30px; color: var(--accent); }
.icon use { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cabecera ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--nantucket-suave); color: var(--cereza); border-bottom: 1px solid var(--nantucket); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--cereza); }
.brand svg { width: 124px; height: 38px; flex: none; }
.slogan { font: 500 .75rem/1.3 var(--font-texto); }
.nav { display: flex; align-items: center; gap: 26px; }
.nav > ul { display: flex; align-items: center; gap: 22px; }
.nav > ul > li > a { text-decoration: none; font-size: var(--t3); }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Desplegables (servicios e idiomas) */
.drop { position: relative; }
.drop summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: var(--t3); }
.drop summary::-webkit-details-marker { display: none; }
.drop summary svg { width: 11px; height: 8px; transition: rotate .2s; }
.drop[open] summary svg { rotate: 180deg; }
.drop .menu { position: absolute; top: calc(100% + 14px); z-index: 60; padding: 8px; border-radius: 18px; background: var(--cereza); color: var(--nantucket-suave); }
.drop .menu a, .drop .menu span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 12px; text-decoration: none; }
.drop .menu a:hover { background: var(--cereza-hover); text-decoration: none; }
.drop .menu a[aria-current] { background: var(--amarillo); color: var(--cereza); }
.services-menu .menu { left: -14px; min-width: 330px; }
.services-menu .menu li:first-child a { color: var(--amarillo); font-weight: 500; }
.services-menu .menu li:first-child a[aria-current] { color: var(--cereza); }
.lang-menu summary { padding: 8px 14px; border: 2px solid var(--nantucket); border-radius: 99px; font-weight: 500; }
.lang-menu summary:hover { border-color: var(--cereza); }
.lang-menu .menu { right: 0; min-width: 190px; }
.lang-menu span[aria-disabled] { opacity: .6; cursor: default; }
.lang-menu small { font-size: var(--t4); color: var(--nantucket); }
.menu-btn { display: none; background: none; border: 2px solid currentColor; color: inherit; border-radius: 99px; padding: 8px 18px; font: 600 .9rem var(--font-texto); }

/* ---------- Pie ---------- */
.footer { background: var(--cereza); color: var(--nantucket-suave); padding-block: 80px 32px; border-top: 1px solid var(--cereza-hover); }
.footer .cols { display: grid; grid-template-columns: 1.6fr 1.4fr 1fr 1.2fr; gap: 40px; }
.footer h4 { font-size: 1rem; color: var(--amarillo); margin-bottom: 14px; }
.footer li { margin-top: 6px; font-size: var(--t3); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .brand { color: var(--amarillo); }
.footer .brand svg { width: 150px; height: 46px; }
.footer .slogan { display: block; margin-top: 16px; font-size: var(--t3); color: var(--nantucket); }
.footer .promise { margin-top: 14px; font: 700 1.1rem/1.3 var(--font-titulares); max-width: 22ch; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--nantucket); font-size: var(--t4); color: var(--nantucket); }
.legal ul { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Portadas (hero) ---------- */
.hero { padding-block: clamp(48px, 6vw, 96px) clamp(110px, 10vw, 160px) !important; }
.hero > .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero h1 { font-size: var(--h1); line-height: .98; letter-spacing: -.04em; }
.hero h1 em { background: linear-gradient(transparent 60%, var(--amarillo) 60%); padding: 0 4px; }
.theme-cereza.hero h1 em { background: none; color: var(--amarillo); padding: 0; }
.hero .sub { margin-top: 26px; font-size: var(--t1); max-width: 48ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .micro { margin-top: 16px; max-width: 46ch; }
.hero-photo { position: relative; isolation: isolate; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 999px 999px 32px 32px; background: var(--nantucket); }
.hero-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 999px 999px 32px 32px; background: var(--cereza); z-index: -1; }
.hero .deco-wave { bottom: 34px; color: var(--accent); }
.deco-tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.deco-tags span { position: absolute; padding: 12px 24px; border-radius: 99px; font: 700 clamp(.95rem, .8rem + .5vw, 1.25rem) var(--font-titulares); white-space: nowrap; animation: drift 6s ease-in-out infinite; }
.deco-tags span:nth-child(1) { right: max(2%, calc((100vw - var(--wrap)) / 2 - 20px)); top: 14%; background: var(--amarillo); color: var(--cereza); }
.deco-tags span:nth-child(2) { right: max(4%, calc((100vw - var(--wrap)) / 2 + 10px)); bottom: 22%; background: var(--nantucket); color: var(--cereza); animation-delay: -3s; }
@keyframes drift { 50% { translate: 0 -10px; } }

/* Portada de página interior: texto a la izquierda, «nki» gigante recortado a la derecha */
.page-hero > .wrap { grid-template-columns: 1fr; }
.page-hero .hero-text { max-width: 900px; }
.page-hero .deco-nki { right: -8vw; top: 50%; translate: 0 -50%; width: 46vw; max-width: 720px; color: var(--cereza-hover); }
.theme-suave.page-hero .deco-nki { color: var(--nantucket); }
.quote { display: inline-block; margin-bottom: 26px; padding: 12px 22px; border-radius: 22px; background: var(--amarillo); color: var(--cereza); font: 700 var(--h3)/1.3 var(--font-titulares); max-width: 40ch; }

/* Franja de confianza: cuatro bloques, la parte clave en amarillo */
.trustband { padding-block: clamp(36px, 4vw, 56px) !important; }
.trustband ul { display: grid; grid-template-columns: .8fr .8fr 1fr 1.6fr; font: 700 clamp(1.1rem, .9rem + .7vw, 1.6rem)/1.15 var(--font-titulares); letter-spacing: -.01em; }
.trustband li { padding: 6px clamp(16px, 2.4vw, 36px); border-left: 2px solid var(--nantucket); }
.trustband li:first-child { padding-left: 0; border-left: 0; }
.trustband b { color: var(--amarillo); font-weight: 800; }
.trustband b.n { font-size: 2.1em; letter-spacing: -.04em; margin-right: 6px; vertical-align: -.1em; }
.trustband ul { align-items: center; }

/* ---------- Rejillas de tarjetas ---------- */
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card { padding: 26px 28px; border-radius: 26px; background: var(--card); color: var(--card-fg); }
.card h3 { font-size: var(--h3); margin-bottom: 8px; color: inherit; }
.card .icon { margin-bottom: 14px; }
.card-line { background: transparent; border: 2px solid var(--line); color: var(--fg); }

/* Mi visión: dos párrafos y seis tarjetas */
.vision { display: grid; grid-template-columns: .85fr 1.6fr; gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.vision .text > * + * { margin-top: 18px; }
.vision .text { font-size: var(--t1); }
.vision .intro { font: 800 var(--h3) var(--font-titulares); }
.vision .card { padding: 22px; font-size: var(--t3); }
.vision .card h3 { font-size: 1.1rem; }
.world { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px clamp(32px, 5vw, 72px); align-items: end; }
.world-title { font: 800 clamp(2rem, 1rem + 3.4vw, 4rem)/.98 var(--font-titulares); letter-spacing: -.04em; }
.world-text { font-size: var(--t1); max-width: 46ch; display: grid; justify-items: start; gap: 24px; }
.worlds { grid-column: 1 / -1; width: calc(100% + 2 * var(--gutter)); margin: 24px calc(-1 * var(--gutter)) 0; height: auto; overflow: visible; }

/* Momentos: siete tarjetas iguales, cada una lleva a su página */
.moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.moment-card { display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 30px; border-radius: 28px; background: var(--cereza-hover); color: var(--nantucket-suave); text-decoration: none; transition: background .25s, color .25s; }
.moment-card h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); line-height: 1.1; color: inherit; }
.moment-card p { color: var(--nantucket); transition: color .25s; }
.moment-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.moment-card .tags li { padding: 4px 12px; border-radius: 99px; background: var(--nantucket-suave); color: var(--cereza); font-size: var(--t4); }
.moment-card .go { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 .95rem var(--font-titulares); }
.moment-card .go .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--amarillo); color: var(--cereza); flex: none; }
.moment-card .go svg { width: 16px; height: 16px; transition: translate .2s; }
.moment-card:hover { background: var(--nantucket-suave); color: var(--cereza); }
.moment-card:hover p { color: var(--cereza); }
.moment-card:hover .go .ico { background: var(--cereza); color: var(--amarillo); }
.moment-card:hover .go svg { translate: 3px 0; }

/* Qué hago: el ciclo en forma de pajarita */
.cycle-wrap { display: grid; gap: 14px; }
.cycle-band { padding: 18px 26px; border-radius: 22px; background: var(--cereza); color: var(--nantucket-suave); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.cycle-band b { font: 800 1.05rem var(--font-titulares); color: var(--amarillo); }
.cycle { display: grid; grid-template-columns: 1fr .42fr 1fr; align-items: center; min-height: clamp(220px, 22vw, 320px); }
.cycle li { display: grid; align-content: center; gap: 6px; height: 100%; padding: 24px clamp(20px, 3vw, 48px); }
.cycle h3 { font-size: var(--h2); }
.cy-1 { background: var(--nantucket-suave); clip-path: polygon(0 0, 100% 34%, 100% 66%, 0 100%); }
.cy-2 { height: 34% !important; min-height: 92px; background: var(--amarillo); text-align: center; justify-items: center; padding-inline: 12px !important; }
.cy-2 h3 { font-size: var(--h3); }
.cy-3 { background: var(--cereza); color: var(--nantucket-suave); --head: var(--amarillo); clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 66%); text-align: right; justify-items: end; }
.cy-3 p { max-width: 30ch; }
.cycle-base { padding: 18px 26px; border-radius: 22px; border: 2px solid var(--cereza); font: 800 1.05rem var(--font-titulares); }
.cycle-close { margin-top: 28px; margin-left: auto; max-width: 40ch; font: 700 var(--h3)/1.3 var(--font-titulares); }
.cycle-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; }

/* Quién soy */
.about { display: grid; grid-template-columns: .8fr 1.3fr; gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.about-photo { position: sticky; top: 110px; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 32px 32px 999px 999px; background: var(--nantucket); }
.about-text > * + * { margin-top: 18px; }
.about-text .lead-p { font-size: var(--t1); }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
.figures li { padding: 24px; border-radius: 22px; background: var(--nantucket); color: var(--cereza); }
.figures b { display: block; font: 800 clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem)/1 var(--font-titulares); letter-spacing: -.04em; }
.figures span { display: block; margin-top: 10px; font-size: var(--t3); }
.why-ink { position: relative; overflow: hidden; margin-top: 40px; padding: clamp(28px, 4vw, 56px); padding-right: clamp(28px, 34%, 420px); border-radius: 32px; background: var(--cereza); color: var(--nantucket-suave); font-size: var(--t1); }
.why-ink h3 { font-size: var(--h2); color: var(--amarillo); margin-bottom: 18px; }
.why-ink p + p { margin-top: 14px; }
.why-ink .wink { font-style: italic; color: var(--nantucket); }
.why-ink .deco-nki { right: -6%; bottom: -18%; width: 40%; color: var(--amarillo); }
.closing { margin-top: 40px; font: 800 var(--h2)/1.15 var(--font-titulares); max-width: 28ch; }
.about-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }

/* Por qué yo: título a la izquierda, lista compacta a la derecha */
.why { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.why .sec-head { margin-bottom: 0; }
.why-list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-list li::before { content: ""; grid-row: 1 / 3; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; background: var(--amarillo); }
.why-list h3 { font-size: 1.15rem; }
.why-list p { font-size: var(--t3); color: var(--nantucket); }
.why-line { margin-top: 56px; margin-left: auto; font: 800 var(--h2)/1.15 var(--font-titulares); color: var(--amarillo); max-width: 30ch; }

/* Pasos unidos por una línea, sin números grandes */
.path { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
.path::before { content: ""; position: absolute; left: 11px; right: 11px; top: 11px; height: 4px; border-radius: 4px; background: var(--accent); }
.path li { position: relative; padding-top: 44px; }
.path li::before { content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--amarillo); border: 5px solid var(--cereza); }
.theme-cereza .path li::before { border-color: var(--amarillo); background: var(--cereza); }
.path h3 { font-size: var(--h3); margin-bottom: 8px; }
.path p { font-size: var(--t3); }
.path-note { margin-top: 36px; max-width: 64ch; font-size: var(--t1); }

/* Formas de trabajar */
.subhead { margin: clamp(64px, 7vw, 104px) 0 28px; font-size: var(--h2); max-width: 28ch; }
.offers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.offer { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border-radius: 26px; background: var(--card); color: var(--card-fg); font-size: var(--t3); }
.offer h3 { font-size: var(--h3); }
.offer .commit { margin-top: auto; padding-top: 14px; border-top: 2px dashed currentColor; font: 700 var(--t4) var(--font-texto); letter-spacing: .02em; }
.offer.rec { outline: 3px solid var(--accent); outline-offset: -3px; }
.offer .pill { font-size: .8rem; padding: 5px 12px; }

/* Preguntas frecuentes */
.faq { max-width: 880px; margin-left: auto; }
.faq details { border-top: 2px solid var(--line); }
.faq details:last-child { border-bottom: 2px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 22px 44px 22px 0; font: 700 var(--h3)/1.25 var(--font-titulares); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 70ch; }

/* Cierre con llamada a la acción */
.cta-final .deco-nki { left: -10vw; bottom: -14vw; width: 60vw; color: var(--cereza-hover); }
.cta-final .wrap { display: grid; justify-items: start; gap: 24px; }
.cta-final h2 { font-size: clamp(2.4rem, 1rem + 5vw, 5.6rem); line-height: .94; letter-spacing: -.05em; max-width: 14ch; margin-left: clamp(0px, 18vw, 300px); }
.cta-final .body { margin-left: clamp(0px, 18vw, 300px); max-width: 52ch; font-size: var(--t1); }
.cta-final .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-left: clamp(0px, 18vw, 300px); }

/* Páginas de momento */
.symptoms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.symptoms li { padding: 26px; border-radius: 26px; background: var(--card); color: var(--card-fg); font: 700 1.1rem/1.3 var(--font-titulares); }
.symptoms li::before { content: ""; display: block; width: 14px; height: 14px; margin-bottom: 18px; border-radius: 50%; background: var(--cereza); }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.service { padding: 28px; border-radius: 26px; background: var(--card); color: var(--card-fg); }
.service h3 { font-size: var(--h3); margin-bottom: 8px; }
.service details { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--nantucket-suave); font-size: var(--t3); }
.service summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font: 700 .95rem var(--font-titulares); }
.service summary::-webkit-details-marker { display: none; }
.service summary::after { content: "+"; font-size: 1.2rem; line-height: 1; transition: rotate .2s; }
.service details[open] summary::after { rotate: 45deg; }
.service details ul { margin-top: 8px; }
.proof { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.proof blockquote { font: 800 var(--h2)/1.2 var(--font-titulares); }
.proof .who { margin-top: 18px; font-size: var(--t3); }
.fit { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; }
.fit .rec-text { font: 800 var(--h2)/1.2 var(--font-titulares); }
.others { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.others a { padding: 8px 16px; border-radius: 99px; border: 2px solid var(--line); text-decoration: none; font-size: var(--t3); }
.others a:hover { background: var(--card); }

/* Servicios: enfoque y canales */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.phases li { padding: 24px; border-radius: 22px; background: var(--card); color: var(--card-fg); }
.phases h3 { font-size: var(--h3); margin-bottom: 6px; }
.segments { margin-top: 32px; padding: clamp(28px, 4vw, 48px); border-radius: 32px; background: var(--cereza); color: var(--nantucket-suave); font-size: var(--t1); }
.segments strong { color: var(--amarillo); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.chips li { padding: 8px 18px; border-radius: 99px; background: var(--nantucket-suave); color: var(--cereza); font: 700 1rem var(--font-titulares); }
.channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.channels li { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 22px; background: var(--card); color: var(--card-fg); font: 700 1.05rem/1.3 var(--font-titulares); }
.channels .icon { flex: none; width: 36px; height: 36px; color: var(--cereza); }
.big-p { font-size: var(--t1); max-width: 60ch; }

/* Contacto */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--nantucket); color: var(--cereza); --line: var(--cereza); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); }
.field { display: grid; gap: 6px; }
.field.full, .form-foot { grid-column: 1 / -1; }
.field label { font-size: var(--t3); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--nantucket-suave); color: var(--cereza); font: inherit; }
.field textarea { min-height: 130px; resize: vertical; }
.form-foot { display: grid; gap: 14px; justify-items: start; }
.form-msg:empty { display: none; }
.form-msg { padding: 14px 18px; border-radius: 14px; background: var(--amarillo); color: var(--cereza); }
.side > * + * { margin-top: 28px; }
.side h2 { font-size: var(--h3); margin-bottom: 12px; }
.steps-mini li { padding: 14px 0; border-top: 2px solid var(--line); font-size: var(--t3); }
.steps-mini b { display: block; font: 800 1.05rem var(--font-titulares); }

/* ---------- Móvil ---------- */
@media (max-width: 1080px) {
  .menu-btn { display: block; }
  .top .slogan { display: none; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 70px); overflow: auto; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px var(--gutter) 32px; background: var(--nantucket-suave); border-bottom: 1px solid var(--nantucket); }
  .top.open .nav { display: flex; }
  .nav > ul { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav > ul > li > a, .services-menu summary { font-size: 1.2rem; }
  .drop .menu { position: static; margin-top: 10px; }
  .services-menu .menu { min-width: 0; }
}
@media (max-width: 900px) {
  .hero > .wrap, .vision, .world, .about, .why, .proof, .fit, .contact-grid, .form { grid-template-columns: 1fr; }
  .g3, .g4, .offers, .path, .symptoms, .phases, .channels, .figures { grid-template-columns: 1fr 1fr; }
  .path { grid-auto-flow: row; }
  .path::before { display: none; }
  .cycle { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .cycle li, .cy-2 { clip-path: none; height: auto !important; border-radius: 22px; text-align: left; justify-items: start; padding: 22px !important; }
  .hero-photo, .about-photo { max-width: 420px; }
  .deco-tags span:nth-child(1) { display: none; }
  .sec-head .lead, .sec-end, .cta-final h2, .cta-final .body, .cta-final .ctas { margin-left: 0; }
  .why-ink { padding-right: clamp(28px, 4vw, 56px); padding-bottom: 140px; }
  .why-ink .deco-nki { width: 46%; bottom: -10%; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .page-hero .deco-nki { opacity: .5; }
}
@media (max-width: 900px) { .trustband ul { grid-template-columns: 1fr 1fr; gap: 18px 0; } .trustband li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) {
  .g2, .g3, .g4, .offers, .path, .symptoms, .phases, .channels, .figures, .footer .cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
.services-menu summary[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Reorganización 28-10-2026 */
.crumbs { margin-bottom: 22px; font-size: var(--t3); color: var(--muted); }
.crumbs a { color: var(--fg); text-underline-offset: 4px; }
.crumbs span { margin-inline: 6px; opacity: .6; }
#herramientas .chips li { background: var(--nantucket-suave); }
/* Mi enfoque: curva clásica del ciclo de vida del producto */
.plc { position: relative; margin: 0; }
.plc svg { display: block; width: 100%; height: clamp(180px, 22vw, 300px); border-bottom: 3px solid var(--cereza); }
.plc-tag { position: absolute; right: 0; top: -6px; padding: 6px 14px; border-radius: 99px; background: var(--amarillo); color: var(--cereza); font: 700 .9rem var(--font-titulares); }
.plc-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.plc-steps li { padding: 18px 18px 0 0; }
.plc-steps h3 { font-size: var(--h3); margin-bottom: 4px; }
.plc-steps p { font-size: var(--t3); }
@media (max-width: 560px) { .plc-steps { grid-template-columns: 1fr 1fr; gap: 8px; } .plc-tag { font-size: .75rem; } }
/* Mi método: pasos con icono que aparecen al hacer scroll */
.path-icons::before { top: 31px; left: 32px; right: 32px; }
.path-icons li { padding-top: 0; }
.path-icons li::before { content: none; }
.step-ico { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: var(--amarillo); border: 3px solid var(--cereza); }
.theme-cereza .step-ico { border-color: var(--amarillo); }
.step-ico .icon { width: 28px; height: 28px; color: var(--cereza); }
.reveal .path-icons::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
.reveal .path-icons li { opacity: 0; translate: 0 28px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .22s + .1s); }
.reveal .path-icons .step-ico { scale: .4; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i) * .22s + .1s); }
.reveal .path-icons.in::before { transform: scaleX(1); }
.reveal .path-icons.in li { opacity: 1; translate: 0 0; }
.reveal .path-icons.in .step-ico { scale: 1; }
/* Preguntas frecuentes */
.faq-group { display: grid; grid-template-columns: 1fr 2.2fr; gap: 12px 48px; align-items: start; padding-block: 40px; border-top: 2px solid var(--cereza); scroll-margin-top: 90px; }
.faq-group:first-child { border-top: 0; padding-top: 0; }
.faq-group h2 { font-size: var(--h3); position: sticky; top: 100px; }
.faq-group .faq { max-width: none; margin: 0; }
.faq-group .link-arrow { grid-column: 2; justify-self: start; }
.page-hero .others { margin-top: 28px; }
@media (max-width: 900px) { .faq-group { grid-template-columns: 1fr; } .faq-group h2 { position: static; } .faq-group .link-arrow { grid-column: 1; } }
/* Cabecera con cuatro enlaces: nada se parte en dos líneas */
.nav { gap: 20px; }
.nav > ul { gap: 18px; }
.nav a, .nav summary, .btn-sm { white-space: nowrap; }
.top .slogan { white-space: nowrap; }
@media (max-width: 1400px) { .top .slogan { display: none; } }
/* Servicios: explorador de los 7 momentos (pestañas + ficha corta) */
.mx { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
.mx-tabs { display: none; }
.mx.js .mx-tabs { display: grid; gap: 8px; position: sticky; top: 100px; }
.mx-tabs button { padding: 16px 20px; border: 2px solid var(--nantucket); border-radius: 18px; background: none; color: var(--nantucket-suave); font: 700 1.05rem/1.25 var(--font-titulares); text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mx-tabs button:hover { background: var(--cereza-hover); }
.mx-tabs button[aria-selected="true"] { background: var(--amarillo); border-color: var(--amarillo); color: var(--cereza); }
.mx:not(.js) { grid-template-columns: 1fr; }
.mx-panels { display: grid; gap: 24px; }
.mx-panel { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px 40px; padding: clamp(26px, 3.5vw, 44px); border-radius: 30px; background: var(--cereza-hover); scroll-margin-top: 100px; }
.mx-panel[hidden] { display: none; }
.mx.js .mx-panel { animation: mx-in .35s ease; }
@keyframes mx-in { from { opacity: 0; translate: 0 10px; } }
.mx-intro h3 { font-size: var(--h2); color: var(--amarillo); margin-bottom: 18px; }
.mx-intro .quote { margin-bottom: 18px; font-size: 1.1rem; }
.mx-sub { color: var(--nantucket-suave); }
.mx-label { font: 600 var(--t4) var(--font-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--nantucket); }
.mx-body > .mx-label { display: block; margin-bottom: 10px; }
.mx-services { display: grid; gap: 8px; }
.mx-services > li { border-radius: 16px; background: var(--nantucket-suave); color: var(--cereza); }
.mx-services summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.mx-services summary::-webkit-details-marker { display: none; }
.mx-services summary::after { content: "+"; grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 1.3rem var(--font-titulares); transition: rotate .2s; }
.mx-services details[open] summary::after { rotate: 45deg; }
.mx-services summary b { font: 800 1.05rem var(--font-titulares); }
.mx-services summary span { font-size: var(--t3); }
.mx-services .dots { padding: 0 18px 16px; font-size: var(--t3); --accent: var(--cereza); }
.mx-fit { margin-top: 20px; color: var(--nantucket-suave); font-weight: 500; }
.mx-fit .mx-label { display: block; margin-bottom: 4px; }
.mx-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
@media (max-width: 900px) {
  .mx, .mx-panel { grid-template-columns: 1fr; }
  .mx.js .mx-tabs { position: static; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .mx-tabs button { flex: none; padding: 10px 16px; font-size: .95rem; }
}
/* Buscador de preguntas frecuentes */
.faq-search { position: relative; max-width: 620px; margin-top: 32px; }
.faq-search .icon { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; color: var(--cereza); pointer-events: none; }
.faq-search input { width: 100%; padding: 18px 22px 18px 56px; border: 2px solid var(--cereza); border-radius: 99px; background: var(--nantucket-suave); color: var(--cereza); font: 500 1.05rem var(--font-texto); }
.faq-search input::placeholder { color: var(--cereza); opacity: .6; }
.faq-group[hidden], .faq details[hidden] { display: none; }
.faq-empty { padding: 28px 0; font: 700 var(--h3) var(--font-titulares); }
/* Sobre mí: cifras en pequeño */
.figs-mini { display: grid; grid-template-columns: 1fr 2fr; gap: 20px 40px; align-items: center; padding-bottom: 8px; }
.figs-mini h2 { font-size: var(--h3); margin-bottom: 6px; }
.figs-mini > div p { font-size: var(--t3); }
.figs-mini ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.figs-mini li { padding: 4px 16px; border-left: 2px solid var(--nantucket); }
.figs-mini b { display: block; font: 800 1.6rem/1.1 var(--font-titulares); letter-spacing: -.02em; }
.figs-mini span { display: block; margin-top: 4px; font-size: var(--t4); line-height: 1.4; }
@media (max-width: 900px) { .figs-mini { grid-template-columns: 1fr; } .figs-mini ul { grid-template-columns: 1fr 1fr; gap: 14px 0; } }
/* Mi visión: titular y texto en paralelo, tarjetas a todo el ancho que aparecen al hacer scroll */
.vision-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.vision-head .sec-head { margin-bottom: 0; }
.vision-lead { font-size: var(--t1); max-width: 46ch; }
.vision-q { margin-bottom: 18px; font: 800 var(--h3) var(--font-titulares); }
.vision-cards { gap: 16px; }
.vision-cards .card { padding: 28px; }
.vision-cards .card h3 { font-size: var(--h3); }
.reveal .reveal-cards > li { opacity: 0; translate: 0 32px; transition: opacity .6s ease, translate .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .12s); }
.reveal .reveal-cards.in > li { opacity: 1; translate: 0 0; }
@media (max-width: 900px) { .vision-head { grid-template-columns: 1fr; } }
/* Mi visión: título fijo a la izquierda y tarjetas que se apilan al hacer scroll (como elespacio) */
.stack-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.stack-side { position: sticky; top: 120px; }
.stack-side .sec-head { margin-bottom: 28px; }
.stack-side .sec-head h2 { font-size: clamp(2rem, 1rem + 3vw, 3.8rem); }
.stack-side .vision-q { margin: 32px 0 0; }
.stack { display: grid; gap: 40px; padding-bottom: 40px; }
.stack li { position: sticky; top: calc(110px + var(--i) * 18px); display: flex; flex-direction: column; min-height: clamp(280px, 30vw, 380px); padding: clamp(28px, 3vw, 44px); border-radius: 28px; background: var(--nantucket-suave); color: var(--cereza); }
.stack li:nth-child(3n+2) { background: var(--cereza); color: var(--nantucket-suave); }
.stack li:nth-child(3n+2) .icon { color: var(--amarillo); }
.stack li:nth-child(3n) { background: var(--amarillo); color: var(--cereza); }
.stack .icon { width: 40px; height: 40px; margin-bottom: auto; color: var(--cereza); }
.stack h3 { margin: 48px 0 12px; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; color: inherit; }
.stack p { font-size: var(--t1); max-width: 34ch; }
@media (max-width: 900px) {
  .stack-layout { grid-template-columns: 1fr; }
  .stack-side { position: static; }
  .stack li { top: calc(90px + var(--i) * 12px); min-height: 240px; }
}
/* Servicios: lista limpia + ventana (dialog) */
/* Los 7 momentos en una sola pantalla: cuadrícula compacta */
.mx-section { padding-block: clamp(56px, 6vw, 88px) !important; }
.mx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 28px; }
.mx-head h1, .mx-head h2 { font-size: clamp(2rem, 1rem + 3vw, 3.4rem); letter-spacing: -.04em; }
.mx-head p { color: var(--nantucket); }
.mx-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mx-row { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: clamp(170px, 19vh, 220px); padding: 22px 22px 70px; border-radius: 24px; background: var(--cereza-hover); color: var(--nantucket-suave); text-decoration: none; transition: background .25s, color .25s, translate .25s; }
.mx-row-name { font: 800 clamp(1.15rem, .95rem + .6vw, 1.45rem)/1.1 var(--font-titulares); letter-spacing: -.02em; }
.mx-row-line { font-size: var(--t3); line-height: 1.45; color: var(--nantucket); transition: color .25s; }
.mx-plus { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--amarillo); transition: background .25s; }
.mx-plus::before, .mx-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; translate: -50% -50%; background: var(--amarillo); transition: background .25s; }
.mx-plus::after { rotate: 90deg; }
.mx-go::before { width: 14px; rotate: 0deg; }
.mx-go::after { width: 8px; height: 8px; background: none !important; border: solid var(--amarillo); border-width: 2px 2px 0 0; rotate: 45deg; translate: -20% -50%; }
.mx-row:hover { background: var(--nantucket-suave); color: var(--cereza); translate: 0 -4px; }
.mx-row:hover .mx-row-line { color: var(--cereza); }
.mx-row:hover .mx-plus { background: var(--cereza); border-color: var(--cereza); }
.mx-row:hover .mx-plus::before, .mx-row:hover .mx-plus:not(.mx-go)::after { background: var(--amarillo); }
.mx-row:hover .mx-go::after { border-color: var(--amarillo); }
@media (max-width: 1000px) { .mx-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mx-row { min-height: 150px; padding: 16px 16px 60px; } .mx-row-line { font-size: var(--t4); } }
.mx-dialog { width: min(1080px, 92vw); max-height: 88vh; padding: 0; border: 0; border-radius: 30px; background: var(--cereza); color: var(--nantucket-suave); overflow: auto; --accent: var(--amarillo); --btn-bg: var(--amarillo); --btn-fg: var(--cereza); --fg: var(--nantucket-suave); }
.mx-dialog::backdrop { background: rgba(92, 7, 32, .55); }
.mx-dialog[open] { animation: dlg-in .35s cubic-bezier(.2, .8, .2, 1); }
.mx-dialog[open]::backdrop { animation: bd-in .3s ease; }
@keyframes dlg-in { from { opacity: 0; translate: 0 24px; scale: .97; } }
@keyframes bd-in { from { opacity: 0; } }
.mx-dialog .mx-panel { background: none; padding: clamp(32px, 4vw, 56px); padding-top: clamp(56px, 5vw, 64px); }
.mx-close { position: absolute; right: 18px; top: 18px; width: 48px; height: 48px; border: 2px solid var(--amarillo); border-radius: 50%; background: none; cursor: pointer; z-index: 1; }
.mx-close::before, .mx-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; translate: -50% -50%; rotate: 45deg; background: var(--amarillo); }
.mx-close::after { rotate: -45deg; }
.mx-close:hover { background: var(--amarillo); }
.mx-close:hover::before, .mx-close:hover::after { background: var(--cereza); }
body:has(.mx-dialog[open]) { overflow: hidden; }
@media (max-width: 900px) {
  .mx-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* Pie fino */
.footer-slim { padding-block: 40px 24px; }
.fs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.footer-slim .brand svg { width: 110px; height: 34px; }
.footer-slim nav ul, .fs-contact { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-slim li { margin: 0; font-size: var(--t3); }
.fs-contact a { color: var(--amarillo); }
.footer-slim .legal { margin-top: 24px; padding-top: 16px; }
.mx-dialog:focus, .mx-dialog:focus-visible { outline: none; }
.mx-first { padding-top: clamp(40px, 4vw, 64px) !important; }
.mx-first .mx-head { align-items: end; }
.mx-first .kicker { margin-bottom: 12px; }
/* Servicios en el menú: el texto lleva a la página; la flecha (o pasar el ratón) abre los 7 momentos */
.has-menu { position: relative; display: flex; align-items: center; gap: 2px; }
.has-menu > a { text-decoration: none; font-size: var(--t3); }
.sub-toggle { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.sub-toggle svg { width: 11px; height: 8px; transition: rotate .2s; }
.has-menu .menu { display: none; position: absolute; left: -14px; top: 100%; z-index: 60; min-width: 330px; margin-top: 14px; padding: 8px; border-radius: 18px; background: var(--cereza); color: var(--nantucket-suave); }
.has-menu .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-menu .menu a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: var(--t3); }
.has-menu .menu a:hover { background: var(--cereza-hover); }
.has-menu .menu li:first-child a { color: var(--amarillo); font-weight: 500; }
.has-menu .menu a[aria-current] { background: var(--amarillo); color: var(--cereza); }
.has-menu.open .menu { display: block; }
.has-menu.open .sub-toggle svg { rotate: 180deg; }
@media (hover: hover) and (min-width: 1081px) {
  .has-menu:hover .menu { display: block; }
  .has-menu:hover .sub-toggle svg { rotate: 180deg; }
}
@media (max-width: 1080px) {
  .has-menu { flex-wrap: wrap; }
  .has-menu > a { font-size: 1.2rem; }
  .has-menu .menu { position: static; flex-basis: 100%; min-width: 0; margin-top: 10px; }
}
/* Páginas de momento: más cortas y concentradas */
.moment-hero { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px) !important; }
.moment-hero h1 { font-size: clamp(2.1rem, 1rem + 3.4vw, 4rem); }
.moment-sec { padding-block: clamp(56px, 6vw, 88px) !important; }
.moment-h2 { margin-bottom: 24px; font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem); letter-spacing: -.04em; }
.moment-h2-sub { margin-top: clamp(48px, 6vw, 72px); margin-bottom: 32px; }
.symptoms li { padding: 22px; font-size: 1.05rem; }
.symptoms li::before { margin-bottom: 14px; }
.services { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
.service { padding: 24px; }
.service h3 { margin-bottom: 4px; }
.service-line { font-weight: 500; margin-bottom: 10px; }
.service .dots { font-size: var(--t3); }
.service .dots li { margin-top: 6px; }
.reveal .reveal-cards > * { opacity: 0; translate: 0 32px; transition: opacity .6s ease, translate .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .12s); }
.reveal .reveal-cards.in > * { opacity: 1; translate: 0 0; }
/* Ventana de cada servicio: todo a la vista, sin más clics */
.mx-dialog { width: min(1180px, 94vw); }
.mx-dialog .mx-panel { grid-template-columns: .85fr 1.4fr; align-items: start; }
.mx-dialog .mx-intro { position: sticky; top: 0; }
.mx-dialog .mx-ctas { margin-top: 28px; }
.mx-body .mx-label { display: block; margin: 0 0 10px; }
.mx-services { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 28px; }
.mx-services > li { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.mx-services > li > b { font: 800 1.05rem var(--font-titulares); }
.mx-services > li > span { font-size: var(--t3); font-weight: 500; margin-bottom: 4px; }
.mx-services .dots { padding: 0; font-size: var(--t4); }
.mx-services .dots li { margin-top: 4px; }
.mx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: st; }
.mx-steps li { counter-increment: st; padding-top: 12px; border-top: 3px solid var(--amarillo); font-size: var(--t4); color: var(--nantucket); }
.mx-steps b { display: block; margin-bottom: 2px; font: 800 1rem var(--font-titulares); color: var(--nantucket-suave); }
.mx-steps b::before { content: counter(st) "  "; color: var(--amarillo); }
@media (max-width: 900px) { .mx-dialog .mx-intro { position: static; } .mx-steps { grid-template-columns: 1fr 1fr; } }
/* Cierre con CTA, más compacto */
.cta-final { padding-block: clamp(56px, 6vw, 88px) !important; }
.cta-final .wrap { gap: 18px; }
.cta-final h2 { font-size: clamp(2rem, 1rem + 3vw, 3.6rem); max-width: 20ch; }
.cta-final .body { font-size: 1.05rem; }
.cta-final .deco-nki { width: 38vw; bottom: -9vw; left: -6vw; }
/* «Sin compromiso…» siempre debajo del botón, en pequeño */
.cta-final .ctas { flex-direction: column; align-items: flex-start; gap: 10px; }
.cta-final .micro, .form-foot .micro { font-size: var(--t4); }
/* ===== Cómo trabajo como historia: capítulos compactos que se revelan al bajar ===== */
.story-hero { padding-block: clamp(56px, 7vw, 104px) clamp(96px, 9vw, 136px) !important; }
.story-hero h1 { max-width: 16ch; font-size: clamp(2.4rem, 1rem + 4.6vw, 5.4rem); line-height: .95; letter-spacing: -.045em; }
.story-hero .sub { margin-top: 22px; max-width: 46ch; font-size: var(--t1); }
.story-hero .deco-wave { bottom: 30px; color: var(--cereza); }
.story-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; counter-reset: c; }
.story-index li { counter-increment: c; }
.story-index a { display: inline-flex; gap: 8px; padding: 8px 16px; border: 2px solid var(--cereza); border-radius: 99px; text-decoration: none; font-size: var(--t3); }
.story-index a::before { content: "0" counter(c); font-weight: 600; }
.story-index a:hover { background: var(--cereza); color: var(--amarillo); }
.story { padding-block: clamp(64px, 7vw, 104px) !important; scroll-margin-top: 70px; }
.story h2 { max-width: 22ch; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem); letter-spacing: -.04em; }
.chapter { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 600 var(--t3) var(--font-texto); color: var(--muted); }
.chapter span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--amarillo); color: var(--cereza); font: 800 .95rem var(--font-titulares); }
.story-lead { margin: 14px 0 32px; max-width: 54ch; font-size: 1.1rem; }
.story-end { margin-top: 28px; font: 700 1.1rem/1.35 var(--font-titulares); max-width: 44ch; }
.story .path, .story .offers { margin-top: 32px; }
.cycle-sm .cycle { min-height: clamp(170px, 16vw, 230px); }
.cycle-sm .cycle h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.cycle-sm .cy-2 h3 { font-size: 1.1rem; }
.cycle-sm .cycle-band, .cycle-sm .cycle-base { padding: 12px 22px; font-size: .95rem; }
.story .plc svg { height: clamp(150px, 16vw, 220px); }
.story .segments { margin-top: 28px; padding: 26px 30px; font-size: 1.05rem; }

/* Revelado genérico: data-r (subir), data-r="left" / "right" (entrar de lado), "pop" (crecer), "draw" (dibujarse) */
.reveal [data-r] { opacity: 0; translate: 0 36px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .8, .2, 1), scale .7s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--d, 0) * .12s); }
.reveal [data-r="left"] { translate: -60px 0; }
.reveal [data-r="right"] { translate: 60px 0; }
.reveal [data-r="pop"] { translate: 0 0; scale: .5; }
.reveal [data-r="draw"] { opacity: 1; translate: 0 0; }
.reveal [data-r="draw"] svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s cubic-bezier(.6, 0, .2, 1) .3s; }
.reveal [data-r="draw"] .plc-tag { opacity: 0; scale: .6; transition: opacity .4s ease 1.9s, scale .5s cubic-bezier(.3, 1.6, .5, 1) 1.9s; }
.reveal [data-r].in { opacity: 1; translate: 0 0; scale: 1; }
.reveal [data-r="draw"].in svg { clip-path: inset(0 0 0 0); }
.reveal [data-r="draw"].in .plc-tag { opacity: 1; scale: 1; }

/* Ventanas de Servicios: el contenido entra como diapositivas */
.mx-dialog[open] .mx-intro > * { animation: slide-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.mx-dialog[open] .mx-intro > :nth-child(2) { animation-delay: .08s; }
.mx-dialog[open] .mx-intro > :nth-child(3) { animation-delay: .16s; }
.mx-dialog[open] .mx-intro > :nth-child(4) { animation-delay: .24s; }
.mx-dialog[open] .mx-body > .mx-label { animation: slide-in .5s ease both .15s; }
.mx-dialog[open] .mx-services > li, .mx-dialog[open] .mx-steps > li { animation: slide-card .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i, 0) * .09s); }
@keyframes slide-in { from { opacity: 0; translate: -24px 0; } }
@keyframes slide-card { from { opacity: 0; translate: 48px 0; scale: .96; } }
@media (prefers-reduced-motion: reduce) { .reveal [data-r] { opacity: 1; translate: 0 0; scale: 1; clip-path: none; } }
/* Enlace a preguntas frecuentes al final de «Cómo me contratas»: en una línea, alineado con las tarjetas */
.story-end:has(.link-arrow) { max-width: none; margin-top: 32px; }
.story-end .link-arrow { white-space: nowrap; font-size: 1rem; }
@media (max-width: 560px) { .story-end .link-arrow { white-space: normal; } }
/* Sobre mí · Mi trayectoria: línea de tiempo */
.journey { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.journey-side { position: sticky; top: 120px; }
.journey-side h2 { margin-bottom: 20px; font-size: clamp(2rem, 1rem + 3vw, 3.6rem); letter-spacing: -.04em; }
.journey-side p { font-size: 1.05rem; color: var(--nantucket-suave); }
.timeline { position: relative; display: grid; gap: 28px; padding-left: 36px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--amarillo); }
.timeline > li { position: relative; }
.timeline > li::before { content: ""; position: absolute; left: -36px; top: 4px; width: 21px; height: 21px; border-radius: 50%; background: var(--cereza); border: 4px solid var(--amarillo); }
.tl-place { display: block; margin-bottom: 8px; font: 600 var(--t4) var(--font-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.tl-card { padding: 24px 26px; border-radius: 24px; background: var(--nantucket-suave); color: var(--cereza); }
.tl-card h3 { font-size: var(--h3); margin-bottom: 4px; }
.tl-card .where { margin-bottom: 10px; font-size: var(--t3); }
.tl-card p:last-child { font-size: var(--t3); }

/* Sobre mí · Visión global: fichas de cifras */
.bento-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px 48px; align-items: end; margin-bottom: 32px; }
.bento-head h2 { font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem); letter-spacing: -.04em; }
.bento { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; margin-bottom: 40px; }
.bento > li { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 190px; padding: 26px; border-radius: 26px; }
.bento b { font: 800 clamp(2.4rem, 1.4rem + 3vw, 4.4rem)/.95 var(--font-titulares); letter-spacing: -.05em; }
.bento > li > span { font-size: var(--t3); }
.bento > li > small { font: 600 var(--t4) var(--font-texto); letter-spacing: .12em; opacity: .85; }
.bento .b1 { grid-row: 1 / 3; background: var(--cereza); color: var(--nantucket-suave); }
.bento .b1 b { font-size: clamp(5rem, 3rem + 7vw, 9rem); color: var(--amarillo); }
.bento .b2 { background: var(--amarillo); color: var(--cereza); }
.bento .b3 { background: var(--nantucket); color: var(--cereza); }
.bento .b4 { grid-column: 2 / 4; background: var(--cereza-hover); color: var(--nantucket-suave); }
.bento .b4 b { color: var(--amarillo); }
@media (max-width: 900px) {
  .journey, .bento-head { grid-template-columns: 1fr; }
  .journey-side { position: static; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .b1 { grid-row: auto; grid-column: 1 / -1; min-height: 0; }
  .bento .b4 { grid-column: 1 / -1; }
}
/* Sobre mí · trayectoria con fichas orgánicas que se apilan */
.stack-organic li { min-height: clamp(260px, 26vw, 330px); justify-content: flex-end; border-radius: 40px 150px 40px 150px; padding: clamp(30px, 3.4vw, 48px); }
.stack-organic li:nth-child(1) { background: var(--nantucket-suave); color: var(--cereza); }
.stack-organic li:nth-child(2) { background: var(--amarillo); color: var(--cereza); }
.stack-organic li:nth-child(3) { background: var(--nantucket); color: var(--cereza); }
.stack-organic .tl-place { margin-bottom: auto; color: var(--cereza); }
.stack-organic h3 { margin: 28px 0 6px; }
.stack-organic .where { margin-bottom: 10px; font-size: var(--t3); }
.stack-organic p:last-child { font-size: var(--t3); max-width: 44ch; }
.journey-side p { color: var(--nantucket-suave); }

/* Sobre mí · cifras */
.bento .b1 b { font-size: clamp(7rem, 4rem + 10vw, 13rem); line-height: .85; }
.bento .b1 small { color: var(--nantucket); opacity: 1; letter-spacing: .02em; font-weight: 500; font-size: var(--t3); }
.bento .b2 small { opacity: .8; letter-spacing: .01em; font-weight: 500; line-height: 1.5; }
.b4-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; counter-reset: b4; }
.b4-steps li { counter-increment: b4; padding: 6px 14px; border-radius: 99px; border: 2px solid var(--amarillo); font: 700 .9rem var(--font-titulares); color: var(--nantucket-suave); }
.b4-steps li::before { content: counter(b4) " · "; color: var(--amarillo); }

/* Cómo trabajo · ciclo interactivo */
.cycle-x { margin: 0; display: grid; gap: 12px; }
.cycle-x .cycle { min-height: clamp(180px, 17vw, 240px); }
.cycle-x .cycle li { padding: 0; }
.cycle-x .cycle button { display: grid; align-content: center; gap: 6px; width: 100%; height: 100%; padding: 22px clamp(20px, 3vw, 44px); border: 0; background: none; color: inherit; font: inherit; text-align: inherit; justify-items: inherit; cursor: pointer; }
.cycle-x .cycle h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); transition: color .2s; }
.cycle-x .cy-2 h3 { font-size: 1.1rem; }
.cycle-x .cycle li { transition: filter .25s, background .25s; }
.cycle-x .cy-1:has([aria-selected="true"]) { background: var(--amarillo); }
.cycle-x .cy-2:has([aria-selected="true"]) { background: var(--cereza); color: var(--amarillo); --head: var(--amarillo); }
.cycle-x .cy-3:has([aria-selected="true"]) { background: var(--cereza-hover); }
.cycle-x .cycle button:focus-visible { outline-offset: -6px; }
.cycle-loop { position: relative; margin-top: -4px; }
.cycle-loop svg { display: block; width: 100%; height: 56px; }
.cycle-loop span { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; padding: 4px 14px; border-radius: 99px; background: var(--nantucket); font: 700 .9rem var(--font-titulares); white-space: nowrap; }
.cycle-detail { padding: 22px 26px; border-radius: 22px; background: var(--nantucket-suave); }
.cycle-detail > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 24px; animation: slide-in .4s ease; }
.cd-goal { font: 800 1.15rem var(--font-titulares); }
.cycle-detail .chips { margin: 0; }
.cycle-detail .chips li { background: var(--nantucket); font-size: .9rem; padding: 6px 14px; }
.cycle-credit { margin-top: 4px; font-size: var(--t4); font-style: italic; opacity: .85; }
.cycle-x .cycle-band, .cycle-x .cycle-base { padding: 12px 22px; font-size: .95rem; }
.adapt { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px clamp(28px, 4vw, 56px); align-items: end; margin-top: clamp(56px, 6vw, 88px); }
.adapt h3 { margin-bottom: 18px; font-size: var(--h3); }
.adapt .plc svg { height: clamp(140px, 13vw, 190px); }
.adapt .plc-steps h3 { font-size: 1rem; margin: 0; }
.adapt .plc-steps p { font-size: var(--t4); }
.adapt .segments { margin: 0; padding: 26px; font-size: 1rem; }
@media (max-width: 900px) {
  .cycle-x .cycle { grid-template-columns: 1fr; }
  .cycle-x .cycle li { clip-path: none !important; border-radius: 20px; }
  .cycle-x .cycle button { text-align: left; justify-items: start; }
  .cycle-loop { display: none; }
  .cycle-detail > div { grid-template-columns: 1fr; }
  .adapt { grid-template-columns: 1fr; }
}
.cycle-detail > div[hidden] { display: none; }
.bento > li > b span { font: inherit; }
/* Canales: todas las fichas iguales, título corto + detalle */
.channels { grid-auto-rows: 1fr; }
.channels li { align-items: center; min-height: 96px; font: inherit; }
.channels li > span { display: grid; gap: 2px; }
.channels b { font: 800 1.1rem/1.2 var(--font-titulares); }
.channels small { font-size: var(--t3); line-height: 1.35; }
/* Franja de confianza: cinta fina que se desliza */
.trustband { padding-block: 0 !important; border-block: 1px solid var(--cereza-hover); }
.ticker { display: flex; overflow: hidden; }
.ticker ul { display: flex !important; flex: none; align-items: center; gap: 0 !important; padding-block: 16px; animation: ticker 38s linear infinite; font: 700 clamp(1rem, .9rem + .4vw, 1.25rem) var(--font-titulares) !important; grid-template-columns: none !important; }
.ticker li { display: block; padding: 0 28px !important; border: 0 !important; white-space: nowrap; }
.ticker li::after { content: ""; display: inline-block; vertical-align: middle; width: 9px; height: 9px; margin-left: 52px; border-radius: 50%; background: var(--amarillo); }
.ticker b.n { font-size: 1.9em !important; line-height: 1; vertical-align: -.08em; margin-right: 8px !important; }
.ticker:hover ul { animation-play-state: paused; }
@keyframes ticker { to { translate: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ticker ul { animation: none; } .ticker ul[aria-hidden] { display: none !important; } }
/* Ventanas de Servicios: flechas para pasar al anterior / siguiente */
.mx-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: 0 clamp(32px, 4vw, 56px); padding: 20px 0 clamp(24px, 3vw, 36px); border-top: 1px solid var(--nantucket); }
.mx-arrow { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--nantucket-suave); font: 700 1rem/1.2 var(--font-titulares); }
.mx-arrow small { display: block; margin-bottom: 2px; font: 600 var(--t4) var(--font-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--nantucket); }
.mx-next { justify-content: flex-end; text-align: right; }
.mx-arrow-ico { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--amarillo); transition: translate .2s; }
.mx-arrow-ico::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: solid var(--cereza); border-width: 2.5px 2.5px 0 0; translate: -65% -50%; rotate: 45deg; }
.mx-prev .mx-arrow-ico::before { rotate: -135deg; translate: -35% -50%; }
.mx-prev:hover .mx-arrow-ico { translate: -4px 0; }
.mx-next:hover .mx-arrow-ico { translate: 4px 0; }
.mx-count { font: 600 var(--t3) var(--font-texto); color: var(--nantucket); }
.mx-dialog.from-next[open] { animation: dlg-next .4s cubic-bezier(.2, .8, .2, 1); }
.mx-dialog.from-prev[open] { animation: dlg-prev .4s cubic-bezier(.2, .8, .2, 1); }
.mx-dialog.from-next[open]::backdrop, .mx-dialog.from-prev[open]::backdrop { animation: none; }
@keyframes dlg-next { from { opacity: 0; translate: 80px 0; } }
@keyframes dlg-prev { from { opacity: 0; translate: -80px 0; } }
@media (max-width: 700px) { .mx-arrow > span:not(.mx-arrow-ico) { display: none; } .mx-nav { grid-template-columns: auto 1fr auto; } .mx-count { text-align: center; } }
/* Final de página compacto */
.cta-final { padding-block: clamp(44px, 4.5vw, 64px) !important; }
.cta-final h2 { font-size: clamp(1.8rem, 1rem + 2.4vw, 3rem); }
.cta-final .deco-nki { width: 28vw; bottom: -7vw; }
.footer-slim { padding-block: 28px 18px; }
.footer-slim .legal { margin-top: 16px; padding-top: 12px; }
.fs-contact { gap: 6px 28px; }
.fs-contact a { color: var(--nantucket-suave); font-weight: 500; }
.fs-contact a:hover { color: var(--amarillo); }
/* Ciclo interactivo: mismo sistema de color para las tres etapas, y un + que invita a tocar */
.cycle-x .cy-1, .cycle-x .cy-2, .cycle-x .cy-3 { background: var(--nantucket-suave); color: var(--cereza); --head: var(--cereza); }
.cycle-x .cycle li:hover { background: var(--amarillo); }
.cycle-x .cy-1:has([aria-selected="true"]), .cycle-x .cy-2:has([aria-selected="true"]), .cycle-x .cy-3:has([aria-selected="true"]) { background: var(--cereza); color: var(--nantucket-suave); --head: var(--amarillo); }
.cycle-x .cy-2 { box-shadow: none; outline: 3px solid var(--nantucket); outline-offset: -3px; }
.cycle-x .cycle button { position: relative; }
.cy-plus { position: relative; display: inline-block; width: 34px; height: 34px; margin-top: 6px; border-radius: 50%; border: 2px solid currentColor; transition: rotate .3s, background .2s; }
.cy-plus::before, .cy-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; translate: -50% -50%; background: currentColor; }
.cy-plus::after { rotate: 90deg; }
[aria-selected="true"] .cy-plus { rotate: 45deg; background: var(--amarillo); border-color: var(--amarillo); color: var(--cereza); }
.cycle-x .cy-2 .cy-plus { width: 28px; height: 28px; }
.cycle-x.auto [aria-selected="false"] .cy-plus { animation: plus-pulse 1.3s ease-in-out infinite; }
@keyframes plus-pulse { 50% { scale: 1.18; } }
.cycle-detail { border: 3px solid var(--cereza); }
/* Nada de amarillo sobre fondos claros */
.cycle-x .cycle li:hover { background: var(--nantucket); }
.cycle-x .cycle li:has([aria-selected="true"]):hover { background: var(--cereza); }
.story .plc-tag, .adapt .plc-tag { background: var(--cereza); color: var(--amarillo); }
.chapter span { background: var(--cereza); color: var(--amarillo); }
.theme-cereza .chapter span { background: var(--amarillo); color: var(--cereza); }
.theme-suave .pill, .theme-nantucket .pill { background: var(--cereza); color: var(--amarillo); }
.theme-suave .step-ico, .theme-nantucket .step-ico { background: var(--cereza); border-color: var(--cereza); }
.theme-suave .step-ico .icon, .theme-nantucket .step-ico .icon { color: var(--amarillo); }
.stack li:nth-child(3n) { background: var(--nantucket-suave); color: var(--cereza); }
.stack li:nth-child(3n) .icon { color: var(--cereza); }
.bento .b2 { background: var(--nantucket); color: var(--cereza); }
.bento .b3 { background: var(--cereza); color: var(--nantucket-suave); }
.bento .b3 b { color: var(--amarillo); }
/* ===== Formas inquietas ===== */
.shape { position: absolute; pointer-events: none; }
main > section > .wrap { z-index: 1; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-26px); } 55% { transform: translateY(-26px); } }
.sh-bounce { transform-box: fill-box; animation: bounce 2.2s cubic-bezier(.5, 0, .5, 1) infinite; }

/* El punto que salta, junto a la foto */
.sh-jump { left: -86px; top: -10px; width: 150px; color: var(--amarillo); z-index: 2; }
.theme-suave .sh-jump { color: var(--cereza); }

/* El «nki» gigante, recortado por el borde */
.sh-nki { right: -10vw; bottom: -12vw; width: 52vw; max-width: 820px; color: var(--cereza-hover); }
.sh-nki svg { display: block; width: 100%; height: auto; }

/* El hilo: se dibuja al aparecer */
.about-photo { isolation: isolate; }
.sh-hilo { inset: -12% -22% -6% -14%; width: 136%; height: 118%; color: var(--cereza); z-index: -1; }
.sh-hilo path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.reveal [data-r="line"] { opacity: 1; translate: 0 0; }
.reveal [data-r="line"] path { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.6, 0, .3, 1) .2s; }
.reveal [data-r="line"].in path { stroke-dashoffset: 0; }
.contact-sec .sh-hilo { inset: auto; right: -4vw; top: 40px; width: 38vw; height: 260px; color: var(--nantucket); z-index: 0; }

/* La escalera de íes */
.sh-stairs { right: var(--gutter); top: 0; width: clamp(120px, 14vw, 210px); color: var(--cereza); }
.sh-stairs .sh-dots { fill: var(--cereza); }
.sh-stairs .sh-dots .sh-bounce { fill: var(--cereza); }
.theme-cereza .sh-stairs { color: var(--nantucket); }
.theme-cereza .sh-stairs .sh-dots, .theme-cereza .sh-stairs .sh-dots .sh-bounce { fill: var(--amarillo); }

/* El interrogante */
.sh-q { right: max(3vw, calc((100vw - var(--wrap)) / 2 - 40px)); top: 50%; translate: 0 -50%; height: 78%; color: var(--amarillo); }
.mx-first .sh-q { top: 40px; translate: 0 0; height: 200px; right: max(3vw, calc((100vw - var(--wrap)) / 2)); opacity: .9; }
.mx-first .mx-head { padding-right: 160px; }
.faq-hero { padding-block: clamp(48px, 6vw, 88px) !important; }
.faq-hero .faq-search input { border-color: var(--amarillo); }

/* Preguntas frecuentes en colores */
.faq-colors .faq-group { margin-bottom: 14px; padding: clamp(24px, 3vw, 40px); border: 0; border-radius: 30px; }
.faq-colors .faq-group:nth-child(3n+1) { background: var(--cereza); color: var(--nantucket-suave); --line: var(--nantucket); --accent: var(--amarillo); --head: var(--amarillo); }
.faq-colors .faq-group:nth-child(3n+2) { background: var(--nantucket-suave); color: var(--cereza); --line: var(--nantucket); --head: var(--cereza); }
.faq-colors .faq-group:nth-child(3n) { background: var(--amarillo); color: var(--cereza); --line: var(--cereza); --head: var(--cereza); }
.faq-colors .faq-group h2 { color: var(--head); top: 100px; }
.faq-colors .faq-group .link-arrow { color: inherit; }

@media (max-width: 900px) {
  .sh-jump { left: auto; right: -10px; top: -30px; width: 110px; }
  .sh-stairs, .contact-sec .sh-hilo { display: none; }
  .sh-q { height: 46%; opacity: .5; }
  .mx-first .sh-q { display: none; }
  .mx-first .mx-head { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .sh-bounce { animation: none; } }
.about-photo .sh-hilo { inset: auto; left: -28%; bottom: -16%; width: 95%; height: 55%; }
/* ===== Accesibilidad ===== */
/* Lo que se mueve sin parar se detiene solo (WCAG 2.2.2) */
.sh-bounce { animation-iteration-count: 3; }
.cycle-x.auto [aria-selected="false"] .cy-plus { animation-iteration-count: 4; }
.trustband { position: relative; }
.ticker-pause { position: absolute; right: 12px; top: 50%; translate: 0 -50%; padding: 4px 12px; border: 1px solid var(--nantucket); border-radius: 99px; background: var(--cereza); color: var(--nantucket-suave); font: 500 var(--t4) var(--font-texto); cursor: pointer; opacity: .85; }
.ticker-pause:hover, .ticker-pause:focus-visible { opacity: 1; }
.ticker-pause[aria-pressed="true"]::before { content: "▶ "; }
.trustband.paused .ticker ul, .trustband:focus-within .ticker ul { animation-play-state: paused; }
/* Desplegable de Servicios también con teclado */
.has-menu:focus-within .menu { display: block; }
/* Campos con error */
.field [aria-invalid="true"] { border-width: 3px; border-color: var(--cereza); background: var(--amarillo-suave); }
/* Foco siempre visible sobre los fondos claros */
.theme-suave :focus-visible, .theme-nantucket :focus-visible, .top :focus-visible { outline-color: var(--cereza); }

/* ==========================================================
   Móvil (28-10-2026): navegación sencilla y páginas más cortas
   ========================================================== */
.nav > .lang-pills, .m-cta, .swipe-dots { display: none; }
.mb-ico { display: none; }

/* Menú a pantalla completa (tablet y móvil) */
@media (max-width: 1080px) {
  .menu-btn { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px 8px 14px; }
  .mb-ico { display: block; position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background .2s; }
  .mb-ico::before, .mb-ico::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
  .mb-ico::before { transform: translateY(-6px); }
  .mb-ico::after { transform: translateY(6px); }
  .top.open .mb-ico { background: transparent; }
  .top.open .mb-ico::before { transform: rotate(45deg); }
  .top.open .mb-ico::after { transform: rotate(-45deg); }
  .top.open .menu-btn { background: var(--cereza); color: var(--amarillo); border-color: var(--cereza); }
  html.menu-open { overflow: hidden; }

  .nav { position: fixed; top: var(--hdr, 64px); bottom: 0; left: 0; right: 0; max-height: none; gap: 0; padding: 8px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border: 0; overflow-y: auto; overscroll-behavior: contain; }
  .top.open .nav { display: flex; animation: menu-in .3s cubic-bezier(.2, .8, .2, 1); }
  .nav > ul { width: 100%; gap: 0; }
  .nav > ul > li { width: 100%; border-bottom: 1px solid var(--nantucket); }
  .nav > ul > li > a, .has-menu > a { display: block; flex: 1; padding: 16px 0; font: 800 1.65rem/1.1 var(--font-titulares); letter-spacing: -.02em; text-decoration: none; }
  .nav a[aria-current="page"] { text-decoration: none; }
  .nav > ul > li > a[aria-current="page"]::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 12px; border-radius: 50%; background: var(--cereza); vertical-align: .2em; }
  .sub-toggle { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--nantucket); }
  .sub-toggle svg { width: 14px; height: 10px; }
  .has-menu .menu { margin: 0 0 14px; padding: 0; background: none; color: var(--cereza); border-radius: 0; }
  .has-menu .menu::before { content: none; }
  .has-menu .menu a { position: relative; padding: 9px 0 9px 22px; font-size: 1.05rem; }
  .has-menu .menu a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; border-radius: 50%; background: var(--nantucket); }
  .has-menu .menu li:first-child a { color: var(--cereza); font-weight: 600; }
  .has-menu .menu a:hover, .has-menu .menu a[aria-current] { background: none; color: var(--cereza); text-decoration: underline; text-underline-offset: 5px; }
  .has-menu .menu a[aria-current]::before { background: var(--cereza); }
  .lang-menu { display: none; }
  .nav > .lang-pills { display: flex; flex-direction: row; width: auto; gap: 8px; order: 2; margin: 24px 0 0; }
  .nav > .lang-pills > li { width: auto; border: 0; }
  .nav > .lang-pills > li > a { display: grid; place-items: center; min-width: 52px; min-height: 44px; padding: 0 12px; border: 2px solid var(--nantucket); border-radius: 99px; font: 700 .95rem var(--font-titulares); text-decoration: none; }
  .nav > .lang-pills > li > a[aria-current] { background: var(--cereza); border-color: var(--cereza); color: var(--amarillo); }
  .lang-pills a { display: grid; place-items: center; min-width: 52px; min-height: 44px; padding: 0 12px; border: 2px solid var(--nantucket); border-radius: 99px; font: 700 .95rem var(--font-titulares); text-decoration: none; }
  .lang-pills abbr { text-decoration: none; }
  .lang-pills a[aria-current] { background: var(--cereza); border-color: var(--cereza); color: var(--amarillo); }
  .nav > .btn { order: 3; width: 100%; justify-content: space-between; margin-top: auto; padding: 8px 8px 8px 24px; font-size: 1.05rem; }
  .nav > .btn .ico { width: 44px; height: 44px; }
  .nav > ul + .btn { margin-top: 28px; }
}
@keyframes menu-in { from { opacity: 0; translate: 0 -12px; } }

/* Móvil */
@media (max-width: 760px) {
  :root { --space: 64px; }
  .top .brand svg { height: 30px; width: auto; }

  /* Botón de reserva fijo abajo */
  .m-cta { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; translate: 0 140%; transition: translate .35s cubic-bezier(.2, .8, .2, 1); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); }
  .m-cta.show { translate: 0 0; }
  .m-cta .btn { width: 100%; justify-content: space-between; border-color: var(--amarillo); }
  html.menu-open .m-cta { translate: 0 140%; }

  /* Portada: botones a lo ancho, foto más pequeña y a un lado */
  .hero .ctas .btn { width: 100%; justify-content: space-between; }
  .hero .ctas .btn-ghost { justify-content: center; }
  .hero-photo, .about-photo { max-width: 250px; margin-left: auto; margin-right: 12px; }
  .about-photo { position: static; }

  /* Fichas que se deslizan de lado en lugar de apilarse */
  .stack { display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .stack::-webkit-scrollbar { display: none; }
  .stack li { position: static; flex: 0 0 84%; min-height: 230px; padding: 26px; scroll-snap-align: start; }
  .stack h3 { margin-top: 28px; font-size: 1.45rem; }
  .stack p { font-size: var(--t3); }
  .stack-organic li { border-radius: 28px 64px 28px 64px; min-height: 0; }
  .stack-organic h3 { margin-top: 16px; }
  .swipe-dots { display: flex; gap: 8px; margin-top: 14px; }
  .swipe-dots i { width: 8px; height: 8px; border-radius: 99px; background: currentColor; opacity: .3; transition: width .25s, opacity .25s; }
  .swipe-dots i.on { width: 24px; opacity: 1; }
  .reveal .stack li[data-r] { opacity: 1; translate: 0 0; }

  /* Los 7 momentos de la portada: lista compacta */
  .moments { gap: 8px; }
  .moment-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; min-height: 0; padding: 18px 16px 18px 20px; border-radius: 20px; }
  .moment-card h3 { grid-column: 1; font-size: 1.15rem; }
  .moment-card p { grid-column: 1; font-size: .9rem; line-height: 1.4; }
  .moment-card .go { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 0; }
  .moment-card .go .ico { width: 40px; height: 40px; }

  /* Servicios: una columna, cada momento en una fila corta */
  .mx-list { grid-template-columns: 1fr; gap: 8px; }
  .mx-row { min-height: 0; gap: 4px; padding: 16px 70px 16px 20px; border-radius: 20px; }
  .mx-row-name { font-size: 1.15rem; }
  .mx-row-line { font-size: .9rem; }
  .mx-plus { top: 50%; bottom: auto; translate: 0 -50%; }
  .mx-row:hover { translate: 0 0; }

  /* Pasos: icono a la izquierda y texto al lado, unidos por una línea */
  .path-icons { gap: 0; }
  .path-icons::before { display: block; left: 27px; right: auto; top: 28px; bottom: 28px; width: 3px; height: auto; }
  .reveal .path-icons::before { transform: scaleY(0); transform-origin: top; }
  .reveal .path-icons.in::before { transform: scaleY(1); }
  .path-icons li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding-bottom: 22px; }
  .path-icons .step-ico { grid-row: 1 / span 2; position: relative; width: 56px; height: 56px; margin: 0; }
  .path-icons h3 { margin: 4px 0 4px; font-size: 1.15rem; }
  .path-icons p { font-size: .95rem; }

  /* Ciclo de Cómo trabajo: etapas más bajas */
  .cycle-x .cycle { gap: 8px; min-height: 0; }
  .cycle-x .cycle li { height: auto !important; }
  .about-photo .sh-hilo { display: none; }
  .why-ink { padding-bottom: 96px; }
  .cycle-x .cycle button { grid-template-columns: 1fr auto; align-items: center; padding: 16px 20px; }
  .cycle-x .cycle li { padding: 0 !important; }
  .cycle-x .cycle button p { grid-column: 1; color: inherit; opacity: .85; font-size: .95rem; }
  .cy-plus { grid-column: 2; grid-row: 1 / span 3; margin: 0; }

  /* Franja de cifras: el botón de pausa no tapa el texto */
  .trustband .ticker { padding-right: 46px; }
  .ticker-pause { right: 8px; width: 34px; height: 34px; padding: 0; font-size: 0; }
  .ticker-pause::before { content: "❚❚"; font-size: .7rem; letter-spacing: -1px; }
  .ticker-pause[aria-pressed="true"]::before { content: "▶"; }

  /* Ventanas de servicios: botones a lo ancho */
  .mx-dialog .mx-ctas .btn { width: 100%; justify-content: space-between; }
  .cta-final .ctas .btn { width: 100%; justify-content: space-between; }

  /* Pie: enlaces con más aire para el dedo */
  .footer-slim nav a, .footer-slim .legal a { display: inline-block; padding-block: 6px; }
}
@media (prefers-reduced-motion: reduce) { .m-cta { transition: none; } }

/* Móvil (28-10-2026, 2): ventanas de servicios a una columna y foto una sola vez en el inicio */
@media (max-width: 900px) {
  .mx-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .mx-dialog .mx-panel { grid-template-columns: 1fr; gap: 28px; padding: 72px var(--gutter) 28px; }
  .mx-dialog .mx-intro h3 { padding-right: 56px; }
  .mx-services { grid-template-columns: 1fr; }
  .mx-close { position: fixed; right: 14px; top: 14px; background: var(--cereza); }
  .mx-nav { position: sticky; bottom: 0; margin: 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--cereza); }
}
@media (max-width: 760px) {
  .mx-dialog .mx-ctas .btn { width: 100%; justify-content: space-between; }
  /* Inicio: sin foto grande arriba; en Quién soy, una foto pequeña y redonda */
  main:has(#quien-soy) .hero .hero-photo { display: none; }
  main:has(#quien-soy) .hero { padding-bottom: 96px !important; }
  #quien-soy .about-photo { width: 120px; max-width: 120px; margin: 0 0 4px; }
  #quien-soy .about-photo img { aspect-ratio: 1; border-radius: 50%; }
  #quien-soy .about-photo::before, #quien-soy .about-photo::after, #quien-soy .about-photo > :not(img) { display: none; }
}

/* ==========================================================
   Feedback 29-10-2026
   ========================================================== */
/* Etiqueta de categoría de cada servicio (Estrategia desde 0, Producto…) */
.mc-cat { display: inline-block; align-self: flex-start; justify-self: start; width: max-content; padding: 3px 12px; border: 1.5px solid var(--amarillo); border-radius: 99px; color: var(--amarillo); font: 700 .72rem/1.4 var(--font-titulares); letter-spacing: .08em; text-transform: uppercase; }
.moment-card:hover .mc-cat, .mx-row:hover .mc-cat { border-color: var(--cereza); color: var(--cereza); }
.moment-hero .mc-cat { margin-bottom: 14px; }
.mx-intro .mc-cat { margin-bottom: 10px; }
.mx-row .mc-cat { margin-bottom: 2px; }

/* Inicio · ¿En qué punto está tu negocio? */
.moments { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.moment-card { min-height: 0; gap: 10px; padding: 24px; border-radius: 24px; }
.moment-card h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.moment-card p { font-size: .92rem; line-height: 1.5; }
.moment-card .go { padding-top: 6px; font-size: .9rem; }
.moment-card .go .ico { width: 38px; height: 38px; }
@media (max-width: 1080px) { .moments { grid-template-columns: repeat(2, 1fr); } }

/* Inicio · ¿Te suena alguna? */
.vision-q-sub { margin-top: 8px; font-size: var(--t1); }
.stack-col { min-width: 0; }
.vision-end { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; padding: 26px 28px; border-radius: 28px; background: var(--cereza); color: var(--nantucket-suave); --btn-bg: var(--amarillo); --btn-fg: var(--cereza); }
.vision-end p { flex: 1 1 260px; font: 800 1.35rem/1.2 var(--font-titulares); color: var(--amarillo); }

/* Inicio · Cada empresa es un mundo, en una franja compacta */
#diagnostico { padding-block: clamp(48px, 5vw, 72px); }
.world-slim { grid-template-columns: 1fr 1.2fr .9fr; align-items: center; gap: 20px clamp(24px, 4vw, 56px); }
.world-slim .world-title { font-size: clamp(1.8rem, 1rem + 2.2vw, 2.8rem); }
.world-slim .world-text { font-size: var(--t3); gap: 18px; }
.world-slim .worlds { grid-column: auto; width: 100%; margin: 0; }
@media (max-width: 900px) { .world-slim { grid-template-columns: 1fr; } .world-slim .worlds { max-width: 420px; } }

/* Inicio · Cómo trabajo: 6 pasos y botón de reserva */
#como-empezamos .sec-end { margin-left: 0; margin-top: 40px; }
@media (min-width: 901px) { #como-empezamos .path-icons { gap: 20px; } #como-empezamos .path h3 { font-size: 1.15rem; } }

/* Sobre mí · Mi trayectoria: historia + fichas de empresa con pestañas */
.journey-story { display: grid; gap: 16px; font-size: 1.05rem; color: var(--nantucket-suave); }
.journey-side { position: static; }
.jobs { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(240px, .8fr) 2fr; gap: 16px; align-items: start; }
.jobs-tabs { display: grid; gap: 10px; }
.jobs-tabs button { display: grid; gap: 2px; width: 100%; padding: 18px 22px; border: 2px solid var(--nantucket); border-radius: 22px; background: none; color: var(--nantucket-suave); font: inherit; text-align: left; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.jobs-tabs small { font: 700 var(--t4) var(--font-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--nantucket); }
.jobs-tabs b { font: 800 1.2rem/1.2 var(--font-titulares); }
.jobs-tabs span { font-size: var(--t4); color: var(--nantucket); }
.jobs-tabs button:hover { border-color: var(--amarillo); }
.jobs-tabs [aria-selected="true"] { background: var(--nantucket-suave); border-color: var(--nantucket-suave); color: var(--cereza); }
.jobs-tabs [aria-selected="true"] small, .jobs-tabs [aria-selected="true"] span { color: var(--cereza); }
.jobs-tabs button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.job-panel { padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--nantucket-suave); color: var(--cereza); --accent: var(--cereza); animation: slide-in .4s ease; }
.job-panel[hidden] { display: none; }
.job-head { margin-bottom: 10px; font: 800 1.3rem var(--font-titulares); }
.job-head small { display: block; font: 700 var(--t4) var(--font-texto); letter-spacing: .12em; text-transform: uppercase; }
.job-panel .dots { columns: 2 260px; column-gap: 36px; font-size: var(--t3); line-height: 1.45; }
.job-panel .dots li { break-inside: avoid; margin: 0 0 10px; }
.job-panel .dots li::before { top: .5em; }
@media (max-width: 900px) {
  .jobs { grid-template-columns: 1fr; }
  .jobs-tabs { display: flex; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
  .jobs-tabs::-webkit-scrollbar { display: none; }
  .jobs-tabs li { flex: 0 0 auto; }
  .jobs-tabs button { padding: 12px 18px; }
  .jobs-tabs span { display: none; }
  .jobs-tabs b { font-size: 1rem; white-space: nowrap; }
}

/* Móvil: tarjetas de servicios con etiqueta */
@media (max-width: 760px) {
  .moments { grid-template-columns: 1fr; }
  .moment-card { grid-template-rows: auto auto auto; }
  .moment-card .mc-cat { grid-column: 1; }
  .moment-card .go { grid-row: 1 / span 3; font-size: 0; padding: 0; }
  .moment-card p { font-size: .85rem; }
  .vision-end { padding: 22px; }
  .vision-end .btn { width: 100%; justify-content: space-between; }
  #como-empezamos .sec-end .btn { width: 100%; justify-content: space-between; }
}
#como-empezamos .sh-stairs { top: auto; bottom: -8px; width: clamp(100px, 10vw, 150px); }
/* Desplegable de Servicios: etiqueta pequeña encima de cada frase (solo en ordenador) */
.has-menu .menu a:has(.menu-cat) { padding-block: 8px; line-height: 1.25; }
.menu-cat { display: block; margin-bottom: 2px; font: 700 .68rem/1.3 var(--font-titulares); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.has-menu .menu a[aria-current] .menu-cat { color: var(--cereza); }
@media (max-width: 1080px) { .menu-cat { display: none; } }

/* ==========================================================
   Feedback 29-10-2026 (2): fichas, metodología, etapas y color
   ========================================================== */
/* Entradilla bajo el título, alineada con él */
.sec-head .lead { margin-left: 0; }

/* Más matices de color: tarjetas que alternan oscuro, azul claro y un toque de amarillo */
.stack li:nth-child(3n) { background: var(--amarillo-suave); color: var(--cereza); }

/* Qué incluye (fichas y página de cada servicio) */
.inc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.inc > li { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 18px; background: var(--nantucket-suave); color: var(--cereza); }
.inc b { font: 800 1rem/1.25 var(--font-titulares); }
.inc span { font-size: .88rem; line-height: 1.45; }
.inc-exp { margin-top: 14px; font-size: .9rem; font-style: italic; }
.inc-exp b { font-style: normal; color: var(--amarillo); }
.theme-suave .inc-exp b, .theme-nantucket .inc-exp b { color: var(--cereza); }
.inc-page { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inc-page > li { padding: 24px; border-radius: 24px; background: var(--cereza); color: var(--nantucket-suave); }
.inc-page > li:nth-child(3n+2) { background: var(--nantucket); color: var(--cereza); }
.inc-page b { font-size: 1.15rem; }
.inc-page span { font-size: var(--t3); }
.inc-page + .inc-exp { font-size: var(--t3); }

/* Mi metodología en una línea */
.method-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: ms; }
.method-strip li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 12px 16px; border: 2px solid currentColor; border-radius: 18px; }
.method-strip li:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 50%; translate: 0 -50%; font-weight: 700; z-index: 1; }
.ms-n { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--amarillo); color: var(--cereza); font: 800 .95rem var(--font-titulares); }
.method-strip b { font: 800 1.05rem var(--font-titulares); }
.method-strip span:not(.ms-n) { font-size: .85rem; opacity: .9; }
.theme-suave .ms-n, .theme-nantucket .ms-n { background: var(--cereza); color: var(--amarillo); }
.ms-link { margin-top: 12px; font-size: .9rem; }
.mx-dialog .ms-link { color: var(--nantucket-suave); }

/* Mi metodología completa: tres fases */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mt-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 34px); border-radius: 28px; background: var(--cereza); color: var(--nantucket-suave); }
.mt-card:nth-child(2) { background: var(--nantucket); color: var(--cereza); }
.mt-card:nth-child(3) { background: var(--amarillo); color: var(--cereza); }
.mt-top { display: flex; align-items: center; justify-content: space-between; }
.mt-n { font: 800 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--font-titulares); letter-spacing: -.04em; }
.mt-card:nth-child(1) .mt-n, .mt-card:nth-child(1) .icon { color: var(--amarillo); }
.mt-card .icon { width: 34px; height: 34px; }
.mt-card h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); color: inherit; }
.mt-card p { font-size: var(--t3); line-height: 1.55; }
.mt-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.mt-steps li { padding: 5px 12px; border: 1.5px solid currentColor; border-radius: 99px; font: 700 .8rem var(--font-titulares); }
#como-empezamos .sec-head h2 { max-width: 22ch; }

/* Fichas de servicio: todo en una pantalla, flechas a los lados */
@media (min-width: 901px) {
  .mx-dialog { width: min(1120px, calc(100vw - 200px)); max-height: 94vh; overflow: auto; }
  .mx-dialog .mx-panel { grid-template-columns: .8fr 1.5fr; gap: 20px 40px; padding: 40px 44px 10px; }
  .mx-dialog .mx-intro { position: static; }
  .mx-dialog .mx-intro h3 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); margin-bottom: 12px; }
  .mx-dialog .mx-intro .quote { margin-bottom: 12px; }
  .mx-dialog .mx-sub { font-size: .95rem; }
  .mx-dialog .mx-ctas { margin-top: 18px; }
  .mx-method { padding: 4px 0 30px; }
  .mx-method .mx-label { margin-bottom: 10px; }
  .mx-nav { display: block; margin: 0; padding: 0; border: 0; }
  .mx-arrow { position: fixed; top: 50%; translate: 0 -50%; z-index: 2; }
  .mx-prev { left: max(16px, calc((100vw - min(1120px, calc(100vw - 200px))) / 2 - 76px)); }
  .mx-next { right: max(16px, calc((100vw - min(1120px, calc(100vw - 200px))) / 2 - 76px)); }
  .mx-arrow > span:not(.mx-arrow-ico) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mx-arrow-ico { width: 56px; height: 56px; }
  .mx-prev:hover .mx-arrow-ico, .mx-next:hover .mx-arrow-ico { translate: 0 0; scale: 1.08; }
  .mx-count { position: absolute; top: 30px; right: 84px; }
}
.mx-method { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid var(--cereza-hover); }
.mx-method .mx-label, .mx-body .mx-label { display: block; }
@media (max-width: 900px) {
  .mx-method { padding: 8px 0 8px; }
  .inc, .method-strip { grid-template-columns: 1fr; }
  .method-strip li:not(:last-child)::after { content: "↓"; right: auto; left: 28px; top: auto; bottom: -14px; translate: 0 0; }
  .inc-page, .method { grid-template-columns: 1fr; }
}

/* Cómo trabajo · Qué hago en cada etapa: la curva se dibuja con el scroll */
.stages { position: relative; margin: 28px 0 0; --p: 1; --pu: 1; }
.stages-curve { display: block; width: 100%; height: clamp(120px, 18vh, 200px); overflow: visible; }
.sc-fill { fill: var(--nantucket-suave); }
.sc-grid { fill: none; stroke: var(--cereza); stroke-width: 2; stroke-dasharray: 4 10; vector-effect: non-scaling-stroke; opacity: .5; }
.sc-line, .sc-up { fill: none; stroke: var(--cereza); stroke-width: 6; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p)); vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sc-up { stroke-width: 4; stroke-dashoffset: calc(1 - var(--pu)); }
.stages-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.st { transition: opacity .5s ease, translate .5s cubic-bezier(.2, .8, .2, 1); }
.st-name { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 800 1.25rem var(--font-titulares); }
.st-name span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cereza); color: var(--amarillo); font-size: .9rem; }
.st ul { display: grid; gap: 8px; }
.st a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--cereza); color: var(--nantucket-suave); text-decoration: none; font: 700 .98rem/1.25 var(--font-titulares); transition: background .2s, translate .2s; }
.st a small { font: 700 .66rem/1.3 var(--font-titulares); letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.st-2 a, .st-4 a { background: var(--nantucket-suave); color: var(--cereza); }
.st-2 a small, .st-4 a small { color: var(--cereza); }
.st a:hover { translate: 0 -3px; background: var(--amarillo); color: var(--cereza); }
.st a:hover small { color: var(--cereza); }
.stages-band { margin-top: 18px; padding: 14px 22px; border-radius: 18px; border: 2px solid var(--cereza); font-size: .98rem; transition: opacity .5s; }
.stages .cycle-credit { margin-top: 8px; }
/* Con scroll animado (solo ordenador, sin «reducir movimiento»): sección alta y escena fija */
.stages-sec.scene { padding-block: 0 !important; height: 280vh; }
.stages-sec.scene .stages-pin { position: sticky; top: 64px; min-height: calc(100vh - 64px); display: flex; align-items: center; padding-block: 32px; }
.stages-sec.scene .stages-pin > .wrap { width: 100%; }
.stages-sec.scene .st:not(.on) { opacity: .15; translate: 0 16px; }
.stages-sec.scene .stages:not(.done) .stages-band { opacity: 0; }
@media (max-width: 900px) {
  .stages-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .stages-list { grid-template-columns: 1fr; } }
#como-empezamos .sec-head h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); }

/* ==========================================================
   Feedback 29-10-2026 (3): un color fijo por servicio
   ========================================================== */
/* Un color sólido distinto por servicio (29-10, 5). Tres tonos nuevos mezclados de la marca: melocotón, salvia y malva */
:root { --melocoton: #F6CDB8; --salvia: #C9E3C9; --malva: #D9C3D6; }
[data-svc] { --s-fg: var(--cereza); --s-line: transparent; --s-ico: var(--cereza); --s-ico-fg: var(--amarillo); }
[data-svc="empezar"] { --s-bg: var(--amarillo); }
[data-svc="producto"] { --s-bg: var(--nantucket); }
[data-svc="nuevos-mercados"] { --s-bg: var(--melocoton); }
[data-svc="conversion"] { --s-bg: var(--salvia); }
[data-svc="fidelizacion"] { --s-bg: var(--malva); }
[data-svc="ia-automatizacion"] { --s-bg: var(--amarillo-suave); }
[data-svc="reinventar"] { --s-bg: var(--nantucket-suave); }
.moment-card[data-svc], .mx-row[data-svc], .st a[data-svc] { background: var(--s-bg); color: var(--s-fg); outline: 2px solid var(--s-line); outline-offset: -2px; }
.moment-card[data-svc] p, .mx-row[data-svc] .mx-row-line { color: inherit; opacity: .85; }
.moment-card[data-svc] .mc-cat, .mx-row[data-svc] .mc-cat { border-color: currentColor; color: inherit; }
.st a[data-svc] small { color: inherit; opacity: .8; }
.moment-card[data-svc] .go .ico { background: var(--s-ico); color: var(--s-ico-fg); }
.mx-row[data-svc] .mx-plus { border-color: currentColor; }
.mx-row[data-svc] .mx-plus::before, .mx-row[data-svc] .mx-plus::after { background: currentColor; }
.moment-card[data-svc]:hover, .mx-row[data-svc]:hover, .st a[data-svc]:hover { background: var(--s-bg); color: var(--s-fg); translate: 0 -4px; }
.moment-card[data-svc]:hover p, .mx-row[data-svc]:hover .mx-row-line { color: inherit; }
.mx-row[data-svc]:hover .mx-plus { background: transparent; }
.st a[data-svc]:hover small { color: inherit; }

/* Cómo trabajo · el gráfico de etapas sobre fondo granate */
.theme-cereza .sc-fill { fill: var(--cereza-hover); }
.theme-cereza .sc-grid { stroke: var(--nantucket); }
.theme-cereza .sc-line, .theme-cereza .sc-up { stroke: var(--amarillo); }
.theme-cereza .st-name span { background: var(--amarillo); color: var(--cereza); }
.theme-cereza .stages-band { border-color: var(--nantucket); }
.theme-cereza .stages-band b { color: var(--amarillo); }
.theme-nantucket .mt-card:nth-child(2) { background: var(--nantucket-suave); }

/* Inicio · Quién soy, en una franja corta que lleva a Sobre mí */
.quien-slim { padding-block: clamp(40px, 4.5vw, 64px) !important; }
.quien { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px clamp(24px, 3vw, 44px); }
.quien-photo { width: clamp(96px, 9vw, 132px); aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 50%; background: var(--cereza); border: 4px solid var(--cereza); }
.quien-text h2 { margin-top: 10px; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); line-height: 1.12; max-width: 30ch; }
@media (max-width: 760px) {
  .quien { grid-template-columns: auto 1fr; }
  .quien .btn { grid-column: 1 / -1; width: 100%; justify-content: space-between; }
  .quien-photo { width: 84px; }
}
.theme-suave.cta-final .deco-nki { color: var(--nantucket); }

/* Más azul y menos blanco (29-10, 4) */
.theme-nantucket .bento .b2 { background: var(--amarillo-suave); }
.theme-cereza .quien-photo { border-color: var(--amarillo); background: var(--amarillo); }
.theme-nantucket .inc-page > li:nth-child(3n+2) { background: var(--nantucket-suave); }
/* Visión global: título y texto juntos, alineados a la izquierda */
.bento-head { grid-template-columns: 1fr; gap: 14px; max-width: 760px; }
.bento-head p { font-size: var(--t1); }

/* Servicios: al pasar el ratón salen puntitos inquietos (el punto de la i) */
.spark { position: fixed; z-index: 90; width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2); border-radius: 50%; background: var(--c); pointer-events: none; animation: spark .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.spark.star { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes spark { to { opacity: 0; translate: var(--dx) var(--dy); scale: .3; } }
.theme-nantucket .sh-jump { color: var(--cereza); }
.theme-cereza.story-hero .deco-wave { color: var(--amarillo); }
.theme-cereza .story-index a { border-color: var(--nantucket); color: var(--nantucket-suave); }
.theme-cereza .story-index a:hover { background: var(--amarillo); border-color: var(--amarillo); color: var(--cereza); }
.theme-cereza.story-hero h1 { color: var(--nantucket-suave); }
.theme-nantucket.contact-sec .sh-hilo { color: var(--cereza); }
.mx-line { margin-top: 12px; font-size: var(--t1); color: var(--nantucket-suave); max-width: 60ch; }

/* ==========================================================
   Feedback 29-10-2026 (6)
   ========================================================== */
/* Sin cursivas en toda la web */
body, body * { font-style: normal !important; }

/* Pasos numerados (Inicio y Cómo trabajo) */
.path-icons { counter-reset: step; }
.path-icons li { counter-increment: step; }
.path-icons h3::before { content: counter(step) ". "; }
.path-note { margin-top: 28px; max-width: 70ch; font-size: var(--t3); }

/* Sobre mí · el texto se va encendiendo palabra a palabra al hacer scroll */
[data-words] .w { opacity: .22; transition: opacity .25s linear; }
[data-words] .w.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { [data-words] .w { opacity: 1; } }

/* Sobre mí · las fichas entran de lado, una tras otra */
.job-panel { animation: job-in .4s ease; }
@keyframes job-in { from { opacity: 0; translate: 0 12px; } }

/* ==========================================================
   Feedback 29-10-2026 (7): ficha de servicio en dos columnas con su color
   ========================================================== */
.btn-alt { --btn-bg: var(--nantucket); --btn-fg: var(--cereza); }
.mx-dialog.mx-t1 .mx-panel { grid-template-columns: .85fr 1.15fr; gap: 0; padding: 0; align-items: stretch; }
.mx-t1 .mx-intro { display: grid; gap: 14px; align-content: start; padding: 44px 40px 40px 44px; background: var(--s-bg); color: var(--cereza); }
.mx-t1 .mx-intro h3 { margin: 0; color: var(--cereza); }
.mx-t1 .mx-intro .mc-cat { border-color: var(--cereza); color: var(--cereza); margin: 0; }
.mx-t1 .mx-intro .quote { justify-self: start; margin: 0; padding: 10px 16px; border-radius: 14px; background: var(--cereza); color: var(--amarillo); font: 700 1.02rem/1.35 var(--font-titulares); }
.mx-t1 .mx-sub { color: var(--cereza); }
.mx-t1 .mx-body { padding: 44px 48px 36px 40px; }
.inc-list { counter-reset: inc; margin-top: 4px; }
.inc-list > li { counter-increment: inc; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--cereza-hover); }
.inc-list > li::before { content: counter(inc, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 2px; font: 800 .9rem var(--font-titulares); color: var(--amarillo); }
.inc-list b { font: 800 1.02rem/1.3 var(--font-titulares); color: var(--nantucket-suave); }
.inc-list span { font-size: .88rem; color: var(--nantucket); }
.mx-t1 .mx-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mx-t1 .mx-count { color: var(--nantucket); }
.inc-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 900px) {
  .mx-dialog.mx-t1 .mx-panel { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .mx-t1 .mx-intro { padding: 72px var(--gutter) 28px; }
  .mx-t1 .mx-body { padding: 24px var(--gutter) 24px; }
  .mx-t1 .mx-ctas .btn { width: 100%; justify-content: space-between; }
}

/* Feedback 29-10-2026 (8) */
/* Ficha de servicio abierta: fondo oscuro y desenfocado para que no se mezclen los rojos */
.mx-dialog::backdrop { background: rgba(24, 2, 8, .93); backdrop-filter: blur(4px); }
/* Las señales de «¿Te suena alguna?» llevan a Servicios: toda la tarjeta es el enlace */
.stack li { cursor: pointer; transition: translate .25s; }
.stack li:hover { translate: 0 -4px; }
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.stack li:has(.card-link:focus-visible) { outline: 3px solid var(--cereza); outline-offset: 3px; }
.stack li::after { content: "→"; position: absolute; right: 26px; bottom: 22px; font: 800 1.3rem var(--font-titulares); opacity: .55; transition: translate .25s, opacity .25s; }
.stack li:hover::after { opacity: 1; translate: 4px 0; }
@media (max-width: 760px) { .stack li { position: relative; } }
/* Visión global: menos granate seguido; las cuatro fichas forman un bloque */
.theme-nantucket .bento .b3 { background: var(--nantucket-suave); color: var(--cereza); }
.theme-nantucket .bento .b3 b { color: var(--cereza); }
/* Tarjeta «¿No lo tienes claro?» (inicio y Servicios): oscura, con borde amarillo discontinuo */
.moment-card.mc-diag, .mx-row.mx-row-diag { background: var(--cereza-hover); color: var(--nantucket-suave); outline: 2px dashed var(--amarillo); outline-offset: -8px; }
.mc-diag .mc-cat, .mx-row-diag .mc-cat { border-color: var(--amarillo); color: var(--amarillo); }
.mc-diag p, .mx-row-diag .mx-row-line { color: var(--nantucket); }
.mc-diag .go .ico { background: var(--amarillo); color: var(--cereza); }
.moment-card.mc-diag:hover, .mx-row.mx-row-diag:hover { background: var(--cereza-hover); color: var(--nantucket-suave); translate: 0 -4px; }
/* Feedback 29-10-2026 (9) */
.hero .sub-2 { margin-top: 12px; font-weight: 500; }
.spark { animation-duration: .95s; }
.moment-card[data-svc]:hover, .mx-row[data-svc]:hover { translate: 0 -6px; scale: 1.02; }
.moment-card, .mx-row { transition: translate .25s, scale .25s, background .25s; }
/* Inicio · Quién soy como bocadillo (29-10) */
.quien-bubble { grid-template-columns: auto 1fr; justify-items: start; gap: 34px; }
.quien-ph { position: relative; }
.quien-bubble .quien-photo { width: clamp(130px, 13vw, 180px); transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.quien-bubble:hover .quien-photo { scale: 1.06; }
.quien-dot { position: absolute; right: 2px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--amarillo); animation: quien-hop 1.6s ease-in-out 3; }
@keyframes quien-hop { 50% { translate: 0 -12px; } }
.bubble { position: relative; display: grid; gap: 8px; justify-items: start; padding: 26px 30px; border-radius: 28px; background: var(--amarillo); color: var(--cereza); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); transform-origin: left center; }
.bubble::before { content: ""; position: absolute; left: -15px; top: 50%; translate: 0 -50%; border: 16px solid transparent; border-right-color: var(--amarillo); border-left: 0; }
.bubble h2 { margin: 0; color: var(--cereza); font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.2rem); }
.bubble p { font-weight: 500; }
.bubble .btn { margin-top: 8px; }
.quien-bubble:hover .bubble { scale: 1.03; }
@media (max-width: 760px) {
  .quien-bubble { grid-template-columns: 1fr; gap: 22px; }
  .bubble::before { left: 40px; top: -15px; translate: 0 0; border: 16px solid transparent; border-bottom-color: var(--amarillo); border-top: 0; }
  .bubble .btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .quien-dot { animation: none; } }
#canales h2 { margin-bottom: 28px; }
.theme-nantucket.cta-final .deco-nki { color: var(--nantucket-suave); }

/* ==========================================================
   Portadas distintas (29-10, pareja 1 con foto en las dos)
   ========================================================== */
/* Inicio: titular muy grande, foto pequeña y redonda, «nki» gigante detrás */
.hero-type > .wrap { grid-template-columns: 1fr auto; align-items: center; }
.hero-type h1 { font-size: clamp(2.8rem, 1rem + 5.2vw, 6rem); max-width: 13ch; }
.hero-type .deco-nki { position: absolute; right: -6vw; bottom: -8vw; width: 52vw; max-width: 860px; color: var(--nantucket-suave); z-index: 0; }
.hero-type > .wrap { position: relative; z-index: 1; }
.hero-round { position: relative; width: clamp(180px, 18vw, 260px); margin-right: clamp(0px, 3vw, 40px); }
.hero-round img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 50%; border: 6px solid var(--cereza); background: var(--cereza); }
.hero-round .sh-jump { left: -70px; top: -24px; width: 120px; color: var(--cereza); }
@media (max-width: 900px) {
  .hero-type > .wrap { grid-template-columns: 1fr; }
  .hero-round { order: -1; width: 120px; margin: 0 0 8px; }
  .hero-round .sh-jump { display: none; }
}
@media (max-width: 760px) { main:has(#quien-soy) .hero .hero-round { display: block; } }

/* Sobre mí: la foto ocupa media portada, a sangre, sobre granate */
.about-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(640px, 82vh); padding: 0 !important; }
.about-hero-photo { margin: 0; }
.about-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.about-hero-text { display: grid; align-content: center; justify-items: start; gap: 18px; padding: clamp(40px, 6vw, 96px) clamp(24px, 6vw, 96px); }
.about-hero-text h1 { color: var(--amarillo); font-size: clamp(2.8rem, 1rem + 4.6vw, 5.4rem); line-height: .95; letter-spacing: -.045em; }
.about-hero-text .sub { font-size: var(--t1); max-width: 44ch; }
.about-hero-text .sub b { color: var(--amarillo); }
.about-hero-text .kicker { border-color: var(--nantucket); color: var(--nantucket-suave); }
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-photo img { height: 380px; }
}

/* Mi trayectoria ahora sobre azul (para no juntar dos granates) */
#trayectoria.theme-nantucket .journey-story, #trayectoria.theme-nantucket .journey-side p { color: var(--cereza); }
#trayectoria.theme-nantucket .jobs-tabs button { border-color: var(--cereza); color: var(--cereza); }
#trayectoria.theme-nantucket .jobs-tabs small, #trayectoria.theme-nantucket .jobs-tabs span { color: var(--cereza); }
#trayectoria.theme-nantucket .jobs-tabs button:hover { border-color: var(--cereza); background: var(--nantucket-suave); }
#trayectoria.theme-nantucket .jobs-tabs [aria-selected="true"] { background: var(--cereza); border-color: var(--cereza); color: var(--nantucket-suave); }
#trayectoria.theme-nantucket .jobs-tabs [aria-selected="true"] small, #trayectoria.theme-nantucket .jobs-tabs [aria-selected="true"] span { color: var(--nantucket); }
#trayectoria.theme-nantucket .jobs-tabs button:focus-visible { outline-color: var(--cereza); }
/* Sobre mí: portada más baja, la foto ocupa solo media pantalla (29-10) */
.about-hero { grid-template-columns: 2fr 3fr; min-height: min(52vh, 480px); height: auto; }
.about-hero-text { padding-block: clamp(28px, 4vw, 56px); }
.about-hero-text h1 { font-size: clamp(2.4rem, 1rem + 3.6vw, 4.4rem); }
@media (max-width: 760px) {
  .about-hero { grid-template-columns: 1fr; height: auto; }
  .about-hero-photo img { height: 260px; }
}

/* ==========================================================
   Sobre mí · 10 proyectos destacados en fichas que se pasan con la mano (29-10)
   ========================================================== */
.hl { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px clamp(30px, 5vw, 80px); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.hl-title { font: 800 clamp(1.8rem, 1rem + 2.2vw, 2.8rem)/1.05 var(--font-titulares); letter-spacing: -.03em; color: var(--cereza); }
.hl-hint { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 700 .95rem var(--font-titulares); }
.hl-hint span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cereza); color: var(--amarillo); animation: hl-nudge 1.6s ease-in-out infinite; }
@keyframes hl-nudge { 50% { translate: 6px 0; } }
.hl-count { margin-top: 18px; font: 800 1rem var(--font-titulares); }
.hl-count b { font-size: 2.4rem; letter-spacing: -.03em; }
.hl-main { display: grid; justify-items: center; gap: 20px; }
/* Sin JS: las fichas en rejilla, todo legible */
.hl-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; width: 100%; }
.hl-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 300px; padding: 26px 26px 24px; border: 2px solid var(--cereza); border-radius: 26px; background: var(--bg); color: var(--cereza); overflow: hidden; }
.hl-card.dark { color: var(--nantucket-suave); border-color: var(--amarillo); }
.hl-co { padding-right: 40px; font: 800 .9rem/1.25 var(--font-titulares); }
.hl-co small { display: block; font: 700 .64rem var(--font-titulares); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.hl-n { position: absolute; right: 24px; top: 24px; font: 800 .85rem var(--font-titulares); opacity: .6; }
.hl-big { margin-top: auto; font: 800 clamp(2.4rem, 1.6rem + 2vw, 3.6rem)/.95 var(--font-titulares); letter-spacing: -.04em; overflow-wrap: anywhere; }
.hl-card.dark .hl-big { color: var(--amarillo); }
.hl-card h4 { margin: 0; font: 800 1.3rem/1.15 var(--font-titulares); letter-spacing: -.01em; color: inherit; }
.hl-txt { font-size: .95rem; line-height: 1.45; }
/* Con JS: un montón de fichas, se ve que hay muchas detrás */
.hl-deck.is-deck { display: block; position: relative; width: min(420px, 86%); height: 400px; margin: 0 90px 80px 0; touch-action: pan-y; user-select: none; }
.is-deck .hl-card { position: absolute; inset: 0; min-height: 0; cursor: grab; transition: translate .45s cubic-bezier(.2, .8, .2, 1), scale .45s, opacity .45s; }
.is-deck .hl-card.gone-l { translate: -150% 0 !important; opacity: 0; }
.is-deck .hl-card.gone-r { translate: 150% 0 !important; opacity: 0; }
.is-deck .hl-card.hidden { opacity: 0; pointer-events: none; }
.hl-ctrl { display: none; align-items: center; gap: 14px; }
.is-ready .hl-ctrl { display: flex; }
.hl-ctrl button { width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--cereza); color: var(--amarillo); font: 800 1.35rem var(--font-titulares); cursor: pointer; }
.hl-ctrl button:focus-visible { outline: 3px solid var(--cereza); outline-offset: 3px; }
.hl-bar { width: 150px; height: 6px; border-radius: 99px; background: rgba(92, 7, 32, .2); overflow: hidden; }
.hl-bar i { display: block; height: 100%; width: 10%; border-radius: 99px; background: var(--cereza); transition: width .3s; }
/* Ver toda mi trayectoria: despliega las pestañas por empresa */
.all-jobs { margin-top: 36px; }
.all-jobs summary { display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 22px; border-radius: 99px; background: var(--cereza); color: var(--amarillo); font: 700 1rem var(--font-titulares); cursor: pointer; list-style: none; }
.all-jobs summary::-webkit-details-marker { display: none; }
.all-jobs summary .ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--amarillo); color: var(--cereza); transition: rotate .25s; }
.all-jobs summary .ico svg { width: 16px; height: 16px; }
.all-jobs[open] summary .ico { rotate: 90deg; }
.all-jobs .jobs { margin-top: 24px; }
@media (max-width: 900px) {
  .hl { grid-template-columns: 1fr; }
  .hl-deck.is-deck { width: min(340px, 82%); height: 400px; margin: 0 60px 70px 0; }
}
@media (prefers-reduced-motion: reduce) { .hl-hint span { animation: none; } .is-deck .hl-card { transition: none; } }
/* «¿En qué punto está tu negocio?» en una sola línea */
#momentos .sec-head h2 { max-width: none; white-space: nowrap; font-size: clamp(1.6rem, .6rem + 3.4vw, 3.6rem); }
@media (max-width: 560px) { #momentos .sec-head h2 { white-space: normal; } }

/* Menos espacio entre bloques y hasta el título (30-10) */
:root { --space: clamp(48px, 5.5vw, 84px); }
.sec-head { margin-bottom: clamp(26px, 3vw, 44px); }
.story .chapter { margin-bottom: 10px; }
@media (max-width: 760px) { :root { --space: 44px; } }

/* 30-10-2026 · Sobre mí: los proyectos, en mosaico que aparece ficha a ficha (sustituye al montón que se pasaba con la mano) */
.hl { display: block; margin-top: clamp(48px, 6vw, 80px); }
.hl-title { margin-bottom: clamp(20px, 2.4vw, 32px); }
.hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hl-grid .hl-card { min-height: clamp(250px, 22vw, 300px); transition: translate .3s cubic-bezier(.2, .8, .2, 1), opacity .7s ease, scale .7s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--d, 0) * .12s); }
.hl-grid .hl-card.wide { grid-column: span 2; }
.hl-grid .hl-card.wide .hl-big { font-size: clamp(3rem, 2rem + 3.4vw, 5.4rem); }
.hl-grid .hl-card.in:hover { translate: 0 -6px; transition-delay: 0s; }
.hl-grid .hl-card.in:hover .hl-big { scale: 1.06; }
.hl-big { transform-origin: left bottom; transition: scale .3s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 1080px) { .hl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .hl-grid { display: flex; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .hl-grid::-webkit-scrollbar { display: none; }
  .hl-grid .hl-card, .hl-grid .hl-card.wide { flex: 0 0 80%; min-height: 280px; scroll-snap-align: start; }
  .reveal .hl-grid .hl-card[data-r] { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .hl-grid .hl-card, .hl-big { transition: none; } }

/* 30-10-2026 · Servicios: solo el título; menú sin etiqueta y con «¿No lo tienes claro?» */
.mx-row { justify-content: flex-start; }
.mx-row-name { font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height: 1.08; }
.has-menu .menu .menu-diag { margin-top: 6px; padding-top: 6px; border-top: 1px dashed currentColor; }
.has-menu .menu .menu-diag a { font-weight: 700; }

/* 30-10-2026 · Contacto: campos obligatorios y gracias */
.req { margin-left: 3px; font-weight: 700; }
.form-thanks { align-self: start; padding: clamp(28px, 3.4vw, 48px); border-radius: 28px; background: var(--cereza); color: var(--nantucket-suave); }
.form-thanks h2 { margin-bottom: 14px; font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); color: var(--amarillo); }
.form-thanks p { font-size: 1.1rem; max-width: 44ch; }
.form-thanks:focus { outline: none; }
.form[hidden], .form-thanks[hidden] { display: none; }

/* 30-10-2026 · Páginas legales */
.legal-sec { padding-top: clamp(48px, 6vw, 96px); }
.legal-doc { max-width: 72ch; }
.legal-doc h2 { margin: 36px 0 10px; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); letter-spacing: -.02em; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { margin-bottom: 12px; font-size: 1.05rem; line-height: 1.6; }
.legal-doc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-data { display: grid; gap: 6px; margin: 4px 0 12px; padding: 18px 22px; border: 2px solid var(--cereza); border-radius: 18px; background: var(--nantucket-suave); }
.legal-date { margin-top: 36px; font-size: var(--t4) !important; }
.todo { padding: 0 6px; border: 1.5px dashed var(--cereza); border-radius: 6px; }
.footer .legal a[aria-current] { text-decoration: underline; }
.form-foot .micro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 30-10-2026 · Servicios: frase resumen en cada ficha y etiquetas de lo que incluye en la ventana */
.mx-row .mx-row-line { margin-top: 2px; }
.mx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.mx-tags li { padding: 5px 12px; border: 1.5px solid currentColor; border-radius: 99px; font: 600 .82rem/1.3 var(--font-texto); }
@media (max-width: 760px) { .mx-tags li { font-size: .75rem; padding: 4px 10px; } }

/* 30-10-2026 · Contacto: reservar en el calendario arriba; el formulario, para escribir */
.contact-book { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: -8px 0 clamp(28px, 3vw, 44px); }
.contact-book .micro { margin: 0; color: var(--cereza); }
.form-intro h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); letter-spacing: -.02em; }
.form-intro p { font-size: var(--t3); }

/* 30-10-2026 · Contacto: dos caminos, reservar la llamada (calendario de Google dentro de la página) o escribir */
.cc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; max-width: 860px; }
.cc-tabs button { display: grid; gap: 4px; padding: 18px 22px; border: 2px solid var(--cereza); border-radius: 22px; background: var(--nantucket-suave); color: var(--cereza); font: inherit; text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.cc-tabs b { font: 800 clamp(1.1rem, .95rem + .6vw, 1.4rem)/1.15 var(--font-titulares); }
.cc-tabs span { font-size: var(--t4); }
.cc-tabs [aria-selected="true"] { background: var(--cereza); color: var(--nantucket-suave); }
.cc-tabs [aria-selected="true"] b { color: var(--amarillo); }
.cc-tabs button:focus-visible { outline: 3px solid var(--cereza); outline-offset: 3px; }
.cc-panels [role="tabpanel"][hidden] { display: none; }
.cc-book .micro { margin-top: 12px; color: var(--cereza); }
.cc-book .micro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .cc-tabs { gap: 8px; } .cc-tabs button { padding: 14px; border-radius: 18px; } }
.cc .contact-grid { grid-template-columns: 1fr; }
.cc .side .steps-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .cc .side .steps-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cc .side .steps-mini { grid-template-columns: 1fr; } }
.cc #escribir { max-width: 860px; }


/* 30-10-2026 · Contacto: reservar = botón que abre Google Calendar en otra pestaña; aviso de datos junto al formulario */
.cc-book { display: grid; justify-items: start; gap: 16px; max-width: 860px; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: var(--nantucket-suave); color: var(--cereza); }
.cc-book > p:first-child { font-size: 1.1rem; max-width: 52ch; }
.cc-book .micro { margin: 0; }
.form-legal { line-height: 1.5; }
.form-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 30-10-2026 · Móvil como una app: barra de navegación fija abajo (Inicio, Servicios, Reservar, Sobre mí, Menú) */
.tabbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .top .menu-btn { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--cereza); border-top: 1px solid var(--cereza-hover); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 4px 2px; border: 0; background: none; color: var(--nantucket); font: 600 .7rem/1.1 var(--font-texto); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tabbar .icon { width: 24px; height: 24px; color: inherit; }
  .tabbar a[aria-current="page"] { color: var(--amarillo); }
  .tabbar a[aria-current="page"] span:last-child { text-decoration: underline; text-underline-offset: 3px; }
  .tabbar .tb-book { color: var(--amarillo); }
  .tb-dot { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -24px; border: 3px solid var(--cereza); border-radius: 50%; background: var(--amarillo); }
  .tb-dot .icon { color: var(--cereza); }
  .tb-menu .mb-ico { display: block; position: relative; width: 20px; height: 2px; margin: 11px 0; background: currentColor; border-radius: 2px; }
  .tb-menu .mb-ico::before, .tb-menu .mb-ico::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
  .tb-menu .mb-ico::before { transform: translateY(-6px); }
  .tb-menu .mb-ico::after { transform: translateY(6px); }
  html.menu-open .tb-menu { color: var(--amarillo); }
  html.menu-open .tb-menu .mb-ico { background: transparent; }
  html.menu-open .tb-menu .mb-ico::before { transform: rotate(45deg); }
  html.menu-open .tb-menu .mb-ico::after { transform: rotate(-45deg); }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--amarillo); outline-offset: -2px; border-radius: 12px; }
  .nav { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .m-cta { display: none !important; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .tb-menu .mb-ico::before, .tb-menu .mb-ico::after { transition: none; } }
@media (max-width: 760px) {
  .jobs-tabs { display: grid; grid-template-columns: 1fr; margin-inline: 0; padding: 0; overflow: visible; }
  .jobs-tabs button { padding: 12px 16px; }
}

/* 30-10-2026 · Inicio, Mi visión: «¿Te suena alguna?» grande y destacado, señalando las fichas */
.vision-ask { position: relative; margin-top: 32px; padding: 26px 84px 28px 28px; border-radius: 28px; background: var(--cereza); color: var(--nantucket-suave); }
.vision-ask-sub { margin: 0 0 6px; font-size: var(--t1); color: var(--nantucket); }
.vision-ask .vision-q, .stack-side .vision-ask .vision-q { margin: 0; font: 800 clamp(2rem, 1.2rem + 2.4vw, 3.2rem)/1.02 var(--font-titulares); letter-spacing: -.035em; color: var(--amarillo); }
.vision-ask-arrow { position: absolute; right: 22px; bottom: 26px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--amarillo); color: var(--cereza); animation: ask-nudge 1.6s ease-in-out infinite; }
.vision-ask-arrow svg { width: 20px; height: 20px; }
@keyframes ask-nudge { 50% { translate: 6px 0; } }
@media (max-width: 900px) {
  .vision-ask-arrow { rotate: 90deg; }
  @keyframes ask-nudge { 50% { translate: 0 6px; } }
}
@media (prefers-reduced-motion: reduce) { .vision-ask-arrow { animation: none; } }
/* 30-10-2026 · sin recuadro (parecía un botón): solo texto grande */
.vision-ask { margin-top: 36px; padding: 0; border-radius: 0; background: none; color: var(--cereza); }
.vision-ask-sub { color: var(--cereza); opacity: .8; }
.vision-ask .vision-q, .stack-side .vision-ask .vision-q { color: var(--cereza); font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem); }
/* 30-10-2026 · Servicios: la ficha de diagnóstico, como en el inicio (etiqueta, texto y «Empieza tu diagnóstico») */
.mx-row-diag .mx-go-label { position: absolute; left: 22px; bottom: 30px; font: 700 .95rem var(--font-titulares); color: var(--amarillo); }
.mx-row-diag .mc-cat { align-self: flex-start; }
@media (max-width: 760px) { .mx-row-diag { padding-bottom: 60px; } .mx-row-diag .mx-go-label { left: 20px; bottom: 22px; } }

/* 30-10-2026 · Sobre mí: Mi visión y mis valores */
.values-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(28px, 3vw, 44px); }
.values-head h2 { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem); letter-spacing: -.04em; color: var(--amarillo); }
.values-head p { font-size: var(--t1); color: var(--nantucket); max-width: 52ch; }
.values { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: val; }
.values li { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 26px; border-radius: 26px; background: var(--nantucket-suave); color: var(--cereza); counter-increment: val; position: relative; }
.values li:nth-child(4), .values li:nth-child(5) { grid-column: span 3; }
.values li:nth-child(2) { background: var(--amarillo); }
.values li:nth-child(4) { background: var(--nantucket); }
.values li::before { content: "0" counter(val); position: absolute; top: 24px; right: 26px; font: 800 .95rem var(--font-titulares); opacity: .55; }
.values .icon { width: 34px; height: 34px; margin-bottom: auto; color: var(--cereza); }
.values h3 { margin-top: 26px; font: 800 clamp(1.3rem, 1rem + .9vw, 1.7rem)/1.1 var(--font-titulares); letter-spacing: -.02em; color: inherit; }
.values p { font-size: var(--t3); line-height: 1.55; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr 1fr; } .values li, .values li:nth-child(4), .values li:nth-child(5) { grid-column: auto; } .values li:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } .values li { min-height: 0; } .values h3 { margin-top: 18px; } }
.values-head .kicker { justify-self: start; }
/* 30-10-2026 · Proyectos: textos grandes largos (p. ej. «Localización de contenido») un poco más pequeños */
.hl-big.hl-long { font-size: clamp(1.9rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1; }

/* 30-10-2026 · Segundo botón «Escríbeme» al lado de «Reserva tu llamada gratuita» */
.cta-final .ctas { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-final .ctas .micro { flex-basis: 100%; margin-top: 4px; }
.btn-write { padding: 14px 26px; }
@media (max-width: 760px) {
  .cta-final .ctas, .about-hero .ctas, .moment-hero .ctas { flex-direction: column; align-items: stretch; }
  .btn-write { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .cta-final .ctas .micro { flex-basis: auto; margin-top: 2px; }
  .cta-final .ctas .btn-write { justify-content: center; }
}

/* 30-10-2026 · Cabecera: «Escríbeme» (sobre) al lado de «Reserva tu llamada gratuita» */
.nav .btn-mail { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 2px solid var(--cereza); color: var(--cereza); background: transparent; }
.nav .btn-mail .icon { width: 18px; height: 18px; color: currentColor; }
.nav .btn-mail:hover { background: var(--cereza); color: var(--amarillo); }
@media (min-width: 1081px) and (max-width: 1280px) { .nav .btn-mail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .nav .btn-mail { padding: 8px 12px; } }
@media (max-width: 1080px) { .nav > .btn-mail { order: 3; width: 100%; justify-content: center; margin-top: 12px; min-height: 52px; font-size: 1.05rem; } .nav > ul + .btn-mail { margin-top: 28px; } .nav > .btn-mail + .btn { margin-top: 10px; } }
/* La cabecera no cabía con el texto: en ordenador, «Escríbeme» es solo el sobre (el texto queda para lectores de pantalla) */
@media (min-width: 1081px) { .nav .btn-mail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav .btn-mail { padding: 8px 12px; } }
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav { gap: 12px; }
  .nav > ul { gap: 14px; }
  .nav > ul > li > a { font-size: .9rem; }
  .nav .btn-sm { padding-left: 14px; font-size: .85rem; }
  .top .brand svg { height: 30px; width: auto; }
}
/* «Contáctame» con texto también en ordenador; el eslogan de la cabecera solo en pantallas muy anchas para que todo quepa */
@media (min-width: 1081px) { .nav .btn-mail span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .nav .btn-mail { padding: 8px 16px 8px 14px; } }
@media (max-width: 1680px) { .top .slogan { display: none; } }
@media (min-width: 1081px) and (max-width: 1320px) {
  .nav { gap: 10px; }
  .nav > ul { gap: 12px; }
  .nav > ul > li > a { font-size: .86rem; }
  .nav .btn-sm { font-size: .82rem; padding-left: 12px; }
  .nav .btn-mail { padding: 7px 12px; }
  .nav .btn-mail .icon { display: none; }
}

/* 30-10-2026 (tarde) · Ajustes de Nuria */
/* Cabecera: «Contáctame» con color (Nantucket) para que no parezca un hueco */
.nav .btn-mail { background: var(--nantucket); border-color: var(--nantucket); color: var(--cereza); }
.nav .btn-mail:hover { background: var(--cereza); border-color: var(--cereza); color: var(--amarillo); }
/* Botones de reserva y «Contáctame» separados (Sobre mí y páginas de servicio) */
.about-hero .ctas, .moment-hero .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  /* Móvil: eslogan al lado del logo, en la franja de arriba */
  .top .brand { display: flex; align-items: center; gap: 12px; }
  .top .slogan { display: block !important; max-width: 190px; font-size: .66rem; line-height: 1.3; white-space: normal; color: var(--cereza); }
  /* «¿Te suena alguna?»: fila que se desliza de lado (Nuria la prefiere). Antes las fichas bajaban 110 px por el «top» del escritorio y se cortaban */
  #vision .stack li { top: auto; min-height: 250px; }
  #vision .stack-layout { gap: 24px; }
  /* El cierre de «¿Te suena alguna?», sin recuadro */
  .vision-end { padding: 4px 0 0; background: none; color: var(--cereza); --btn-bg: var(--cereza); --btn-fg: var(--amarillo); }
  .vision-end p { color: var(--cereza); font-size: 1.2rem; }
  /* Sobre mí y servicios: los dos botones, del mismo ancho */
  .about-hero .ctas .btn, .moment-hero .ctas .btn { width: 100%; justify-content: space-between; }
  .about-hero .ctas .btn-write, .moment-hero .ctas .btn-write { justify-content: center; }
}
/* Eslogan siempre visible, al lado del logo (Nuria, 30-10). Para que quepa todo en los 4 idiomas, la cabecera se compacta en pantallas medianas */
@media (min-width: 761px) {
  .top .brand { display: flex; flex-direction: row; align-items: center; gap: 12px; }
  .top .slogan { display: block !important; font-size: .62rem; line-height: 1.3; white-space: nowrap; }
}
@media (min-width: 1081px) and (max-width: 1600px) {
  .nav { gap: 10px; }
  .nav > ul { gap: 14px; }
  .nav > ul > li > a { font-size: .88rem; }
  .nav .btn-sm { font-size: .84rem; }
  .nav > .btn-sm:not(.btn-mail) .ico { display: none; }
  .nav > .btn-sm:not(.btn-mail) { padding: 8px 16px; }
  .nav .btn-mail { padding: 7px 12px; }
  .nav .btn-mail .icon { display: none; }
  .lang-menu summary { padding-inline: 10px; }
}
@media (min-width: 1081px) and (max-width: 1320px) {
  .top .brand svg { height: 28px; width: auto; }
  .top .slogan { font-size: .58rem; }
  .nav > ul { gap: 11px; }
  .nav > ul > li > a { font-size: .82rem; }
  .nav .btn-sm { font-size: .78rem; }
  .nav > .btn-sm:not(.btn-mail) { padding: 8px 12px; }
}
@media (min-width: 1081px) and (max-width: 1180px) {
  html[lang="fr"] .nav > ul { gap: 9px; }
  html[lang="fr"] .nav > ul > li > a { font-size: .78rem; }
  html[lang="fr"] .nav { gap: 8px; }
}

/* 30-10-2026 · Inicio: cierre con el eslogan grande, como una cita, y el logo detrás en transparencia */
.slogan-sec { position: relative; overflow: clip; padding-block: clamp(80px, 11vw, 170px); text-align: center; }
.slogan-bg { position: absolute; inset: 50% auto auto 50%; width: min(1400px, 120vw); translate: -50% -50%; color: var(--cereza); opacity: .08; pointer-events: none; }
.slogan-bg svg { display: block; width: 100%; height: auto; }
.slogan-quote { position: relative; margin: 0 auto; max-width: 1000px; }
.slogan-quote p { display: grid; gap: .15em; font: 800 clamp(2rem, 1rem + 4vw, 4.6rem)/1.05 var(--font-titulares); letter-spacing: -.04em; color: var(--cereza); }
.slogan-quote span:first-child::before { content: "«"; }
.slogan-quote span:last-child::after { content: "»"; }

/* Página de gracias */
.thanks-page { min-height: 70vh; display: grid; align-items: center; padding-block: clamp(70px, 9vw, 130px); }
.thanks-page h1 { margin: 14px 0 16px; font-size: clamp(2.4rem, 1.2rem + 4vw, 4.6rem); color: var(--amarillo); }
.thanks-page .sub { max-width: 52ch; font-size: var(--t1); color: var(--nantucket-suave); }
.thanks-sign { margin-top: 24px; font: 800 1.6rem var(--font-titulares); color: var(--nantucket); }
.thanks-logo { display: flex; align-items: center; gap: 16px; margin: 28px 0 32px; color: var(--amarillo); }
.thanks-logo svg { width: clamp(180px, 22vw, 280px); height: auto; }
.thanks-logo .slogan { font-size: .85rem; color: var(--nantucket); }
.thanks-page .sub + .sub { margin-top: 12px; }
.thanks-page .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.thanks-claim { margin-top: 22px; font: 800 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.2 var(--font-titulares); color: var(--amarillo); }

/* 30-10-2026 · Sobre mí: Mi visión y mis valores (textos de Nuria), tras «¿Por qué Inkieta?» */
.vv-head { display: grid; grid-template-columns: .5fr 1.5fr; gap: 16px clamp(24px, 4vw, 64px); align-items: start; margin-bottom: clamp(28px, 3vw, 44px); }
.vv-statement { font: 800 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.25 var(--font-titulares); letter-spacing: -.02em; color: var(--cereza); }
.vv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: clamp(48px, 6vw, 80px); counter-reset: pil; }
.vv-pillars li { padding: 26px; border-radius: 26px; background: var(--nantucket-suave); color: var(--cereza); counter-increment: pil; }
.vv-pillars h3 { margin-bottom: 10px; font: 800 1.35rem/1.15 var(--font-titulares); color: var(--cereza); }
.vv-pillars h3::before { content: "0" counter(pil) "  "; color: var(--cereza); opacity: .5; font-size: .9rem; white-space: pre; }
.vv-pillars p { font-size: var(--t3); line-height: 1.6; }
.vv-values-title { margin-bottom: clamp(20px, 2.4vw, 32px); }
.values6 li, .values6 li:nth-child(4), .values6 li:nth-child(5) { grid-column: span 2; background: var(--cereza); color: var(--nantucket-suave); }
.values6 li:nth-child(2n) { background: var(--cereza-hover); }
.values6 .icon { color: var(--amarillo); }
.values6 h3 { color: var(--amarillo); }
.values6 p { color: var(--nantucket-suave); }
@media (max-width: 900px) { .vv-head, .vv-pillars { grid-template-columns: 1fr; } .values6 li, .values6 li:nth-child(4), .values6 li:nth-child(5) { grid-column: auto; } .values6 li:nth-child(5) { grid-column: auto; } }
/* Visión y valores más ligeros: sin recuadros en la visión y «Leer más» en cada tarjeta */
.vv-pillars { gap: clamp(20px, 3vw, 44px); }
.vv-pillars li { padding: 18px 0 0; border-radius: 0; background: none; border-top: 2px solid var(--cereza); }
.vv-pillars p, .values6 p { font-size: var(--t3); line-height: 1.55; }
.values6 li { min-height: 0; }
.values6 h3 { margin-top: 18px; }
.vv-more summary { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 .9rem var(--font-titulares); cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 4px; }
.vv-more summary::-webkit-details-marker { display: none; }
.vv-more summary::after { content: "+"; font-size: 1.1rem; text-decoration: none; }
.vv-more[open] summary::after { content: "–"; }
.vv-more[open] summary { margin-bottom: 8px; }
.vv-pillars .vv-more summary { color: var(--cereza); }
.values6 .vv-more summary { color: var(--amarillo); }
.vv-more summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* 30-10-2026 · Menú «Sobre mí» desplegable: los apartados no quedan tapados por la cabecera fija */
#trayectoria, #por-que-inkieta, #valores, #metodo, #etapas, #canales { scroll-margin-top: 90px; }
#about-menu { min-width: 240px; }
@media (min-width: 1081px) and (max-width: 1200px) {
  .nav > ul { gap: 9px; }
  .nav .sub-toggle { width: 22px; padding: 0; }
  .top .slogan { font-size: .54rem; }
  .top .brand { gap: 8px; }
}

/* 30-10-2026 · Sobre mí: «Mi visión» y «Mis valores», dos secciones; la visión como cita; onda como transición */
.vision-big { font-size: clamp(2.4rem, 1.2rem + 4vw, 4.6rem); letter-spacing: -.045em; line-height: 1; margin-bottom: clamp(22px, 2.6vw, 36px); }
.vision-sec .vision-big { color: var(--cereza); }
.vision-quote { position: relative; max-width: 980px; margin: 0 0 clamp(36px, 4.5vw, 64px); padding-left: clamp(24px, 3vw, 44px); border-left: 6px solid var(--cereza); }
.vision-quote p { font: 800 clamp(1.4rem, 1rem + 1.5vw, 2.3rem)/1.25 var(--font-titulares); letter-spacing: -.02em; color: var(--cereza); }
.vision-quote p::before { content: "«"; }
.vision-quote p::after { content: "»"; }
.vision-sec .vv-pillars { margin-bottom: 0; }
.vision-sec .vv-pillars p { font-size: var(--t3); line-height: 1.6; }
.values-sec2 { position: relative; padding-top: clamp(90px, 10vw, 140px); }
.values-sec2 .deco-wave { position: absolute; top: 18px; left: 0; right: 0; height: 40px; color: var(--amarillo); }
.values-sec2 .deco-wave svg { width: 100%; height: 100%; }
.values-sec2 .vision-big { color: var(--amarillo); }
.values-sec2 .values6 li { background: var(--nantucket-suave); color: var(--cereza); }
.values-sec2 .values6 li:nth-child(2n) { background: var(--nantucket); }
.values-sec2 .values6 .icon, .values-sec2 .values6 h3 { color: var(--cereza); }
.values-sec2 .values6 p { color: var(--cereza); }
.values-sec2 .values6 .vv-more summary { color: var(--cereza); }
#vision { scroll-margin-top: 90px; }
@media (max-width: 760px) { .vision-quote { padding-left: 18px; border-left-width: 4px; } }

/* 30-10-2026 · Hero: la frase de debajo de los CTA, más pequeña y en una sola línea (Nuria) */
.hero .ctas + .micro { max-width: none; font-size: var(--t4); }
@media (min-width: 761px) { .hero .ctas + .micro { white-space: nowrap; } }

/* 30-10-2026 · Protección de datos del formulario: plegada, se abre al pulsar (Nuria) */
.form-legal summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.form-legal summary::-webkit-details-marker { display: none; }
.form-legal summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.form-legal[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.form-legal p { margin: 8px 0 0; }

/* 30-10-2026 · Sobre mí: «Experta en…» en su propia línea, para que el texto de debajo no se corte raro (Nuria) */
.about-hero .sub b { display: block; margin-bottom: 6px; }
.about-hero .sub { text-wrap: pretty; }

/* 30-10-2026 · Valores: texto entero en la ficha y el nombre arriba, justo debajo del icono (Nuria) */
.values6 li { justify-content: flex-start; }
.values6 li > * { margin-bottom: 0; }
.values6 .icon { margin-bottom: 0 !important; }
.values6 h3 { margin-top: 14px !important; }