:root {
  --ink: #060606;
  --paper: #ffffff;
  --mist: #f3f7fa;
  --blue: #2671ac;
  --blue-bright: #3095e3;
  --blue-soft: #d9ecfa;
  --line: rgba(6, 6, 6, .12);
  --muted: #56616b;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(5, 25, 45, .12);
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .7rem 1rem; background: #fff; color: #000; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.container { width: min(var(--max), calc(100% - 3rem)); margin-inline: auto; }
.brand { color: inherit; font-weight: 900; letter-spacing: -.01em; }
.brand-ia { color: #2671ac; }
.brand.on-dark { color: #fff; }
.brand.on-dark .brand-ia,
.site-header .brand-ia,
.site-footer .brand-ia,
.page-hero .brand-ia,
.section-dark .brand-ia,
.section-blue .brand-ia,
.cta-band .brand-ia { color: #3095e3; }
.eyebrow { margin: 0 0 1rem; color: var(--blue); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.on-dark .eyebrow, .eyebrow.on-dark { color: #7fc4f5; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: clamp(2.7rem, 7vw, 5.8rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 900; }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
p { margin: 0; }
.lede { max-width: 780px; font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.55; }
.muted { color: var(--muted); }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section-head { display: grid; gap: 1rem; max-width: 820px; margin-bottom: 2.5rem; }
.section-dark { color: #fff; background: #080b0e; }
.section-blue { color: #fff; background: linear-gradient(135deg, #123d61, #2671ac 60%, #3095e3); }
.section-mist { background: var(--mist); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: var(--blue); }
.btn-primary:hover { background: #1e5e91; }
.btn-light { color: #07131d; background: #fff; }
.btn-ghost { color: inherit; border-color: currentColor; background: transparent; }
.text-link { color: var(--blue); font-weight: 800; text-underline-offset: 4px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: #fff;
  background: rgba(6, 6, 6, .88);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
}
.site-header .inner { min-height: 76px; display: flex; align-items: center; gap: 2rem; }
.site-logo { display: inline-flex; align-items: center; gap: .72rem; color: #fff; font-size: 1.35rem; text-decoration: none; }
.site-logo img { width: 42px; height: 42px; object-fit: contain; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { color: #fff; font-size: .92rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #83c9fa; }
.menu-toggle { display: none; margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 1.7rem; }
/* Desplegable «Cómo trabajo» */
.has-drop { position: relative; }
.drop-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 0; border: 0; background: none; color: #fff; font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.drop-btn:hover, .drop-btn[data-current], .has-drop.open .drop-btn { color: #83c9fa; }
.drop-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.has-drop.open .drop-caret { transform: translateY(1px) rotate(-135deg); }
.site-nav .drop { position: absolute; top: calc(100% + .6rem); left: 50%; display: block; min-width: 220px; padding: .5rem; border-radius: 12px; background: rgba(10,14,20,.96); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px rgba(0,0,0,.35); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.site-nav .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }
.has-drop.open .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.site-nav .drop a { display: block; padding: .65rem .9rem; border-radius: 8px; white-space: nowrap; }
.site-nav .drop a:hover, .site-nav .drop a:focus-visible { background: rgba(48,149,227,.14); }
@media (hover: hover) and (min-width: 901px) {
  .has-drop:hover .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .has-drop:hover .drop-caret { transform: translateY(1px) rotate(-135deg); }
}

.page-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #050708;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(3,7,10,.95) 8%, rgba(3,7,10,.77) 48%, rgba(3,7,10,.35)), url('../img/fondo-hero-tableta.webp');
  background-position: center;
  background-size: cover;
  opacity: .95;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -200px;
  top: 80px;
  border: 1px solid rgba(48,149,227,.34);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(48,149,227,.06), 0 0 0 180px rgba(48,149,227,.035);
}
.page-hero .container { position: relative; z-index: 2; padding-top: 7.5rem; padding-bottom: 5rem; }
.page-hero .hero-copy { display: grid; gap: 1.4rem; max-width: 880px; }
.page-hero .lede { color: rgba(255,255,255,.82); }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.page-hero.compact { min-height: 520px; }
.page-hero.compact h1 { font-size: clamp(2.7rem, 6vw, 4.8rem); }
.breadcrumbs { color: rgba(255,255,255,.65); font-size: .88rem; }
.breadcrumbs a { color: #fff; text-underline-offset: 3px; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.card {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 30px rgba(6, 6, 6, .05);
  overflow: hidden;
}
.card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 120px; height: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); }
.card p { color: var(--muted); }
.card .icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; color: #fff; background: linear-gradient(135deg, #123d61, var(--blue-bright)); font-weight: 900; }
.card .text-link { margin-top: auto; }
.card.dark { color: #fff; border-color: rgba(255,255,255,.12); background: #11171c; }
.card.dark p { color: rgba(255,255,255,.68); }

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.split-copy { display: grid; gap: 1.25rem; }
.media-frame { position: relative; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); }
.media-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-frame::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.25); border-radius: inherit; pointer-events: none; }
.check-list { display: grid; gap: .85rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.8rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-bright); font-weight: 900; }
.plain-list { margin: .4rem 0 0; padding-left: 1.2rem; }
.plain-list li + li { margin-top: .55rem; }

.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.process-step { padding: 1.4rem; border-top: 1px solid rgba(255,255,255,.22); }
.process-step span { display: block; margin-bottom: 1rem; color: #7fc4f5; font-size: 1.4rem; font-weight: 900; }
.process-step p { margin-top: .75rem; color: rgba(255,255,255,.7); }

.cta-band { position: relative; overflow: hidden; text-align: center; color: #fff; background: #080b0e; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: url('../img/fondo-cta-calendario.webp') center/cover; opacity: .12; }
.cta-band .container { position: relative; display: grid; justify-items: center; gap: 1.2rem; }
.cta-band p { max-width: 700px; color: rgba(255,255,255,.75); font-size: 1.1rem; }

.service-detail .intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; }
.service-detail .aside { align-self: start; padding: 1.5rem; border-radius: var(--radius); background: var(--mist); }
.service-detail .aside h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.service-detail .prose { display: grid; gap: 1.25rem; }
.service-detail .prose h2 { margin-top: 1.2rem; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.service-detail .prose h3 { margin-top: .8rem; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.contact-card { display: grid; gap: 1rem; min-height: 230px; padding: 1.8rem; border-radius: var(--radius); color: #fff; text-decoration: none; background: linear-gradient(140deg, #0c1217, #183d5a); }
.contact-card:nth-child(2) { background: linear-gradient(140deg, #174c73, #2671ac); }
.contact-card:hover { transform: translateY(-3px); }
.contact-card .contact-kicker { color: #96d2fb; font-weight: 800; }
.contact-note { margin-top: 2rem; padding: 1.2rem 1.4rem; border-left: 4px solid var(--blue); background: var(--mist); }

.article-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.article-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 36px rgba(6,6,6,.06); }
.article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-card .body { display: grid; gap: .8rem; padding: 1.5rem; }
.article-card p { color: var(--muted); }
.article { max-width: 820px; margin-inline: auto; }
.article h2 { margin: 3.2rem 0 1rem; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.article h3 { margin: 2rem 0 .7rem; }
.article p, .article li { color: #29333b; font-size: 1.07rem; }
.article p + p { margin-top: 1rem; }
.article li + li { margin-top: .55rem; }
.article .callout { margin: 2rem 0; padding: 1.4rem; border-radius: 18px; background: var(--mist); }

.site-footer { color: rgba(255,255,255,.7); background: #050708; }
.site-footer .top { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 2rem; padding: 4rem 0 2.5rem; }
.site-footer h2 { margin-bottom: .9rem; color: #fff; font-size: 1rem; letter-spacing: 0; }
.site-footer ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .bottom { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.footer-brand { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1rem; color: #fff; font-size: 1.4rem; text-decoration: none; }
.footer-brand img { width: 42px; height: 42px; }

.legal { max-width: 900px; margin-inline: auto; }
.legal h2 { margin: 2.5rem 0 .9rem; font-size: 1.7rem; }
.legal p + p { margin-top: 1rem; }
.legal ul { padding-left: 1.2rem; }
.wa-float { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #1fa855; box-shadow: 0 10px 30px rgba(0,0,0,.22); text-decoration: none; font-size: 1.25rem; font-weight: 900; }

/* Conóceme: muestra editorial 2026-09-19 */
.about-hero::before {
  background-image:
    radial-gradient(980px 560px at 76% 40%, rgba(48,149,227,.22), transparent 64%),
    radial-gradient(700px 420px at 4% 96%, rgba(38,113,172,.20), transparent 70%),
    linear-gradient(118deg, #04141f 0%, #0a2941 48%, #10395c 100%);
  opacity: 1;
}
.about-hero .hero-copy { max-width: 920px; }
.about-hero .btn-ghost { color: #fff; }
.about-intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2.5rem, 7vw, 7rem); }
.about-portrait { position: relative; }
.about-portrait > img { width: 100%; min-height: 480px; object-fit: cover; object-position: 50% 28%; border-radius: 32px; box-shadow: var(--shadow); }
.about-place { position: absolute; right: -2rem; bottom: 2rem; max-width: 245px; display: grid; gap: .15rem; padding: 1.1rem 1.25rem; color: #fff; background: linear-gradient(135deg, #123d61, #2671ac); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; box-shadow: 0 16px 40px rgba(6,28,48,.28); }
.about-place strong { font-size: 1.05rem; }
.about-place span { color: rgba(255,255,255,.78); font-size: .9rem; }
.about-story { display: grid; gap: 1.25rem; }
.about-highlight { padding: 1.2rem 1.3rem; border-left: 4px solid var(--blue); background: var(--mist); font-size: 1.08rem; font-weight: 800; }
.journey-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.journey-grid::before { content: ""; position: absolute; top: 22px; left: 2rem; right: 2rem; height: 1px; background: linear-gradient(90deg, var(--blue), rgba(38,113,172,.18)); }
.journey-step { position: relative; display: grid; align-content: start; gap: .85rem; padding: 4.2rem 1.1rem 1.5rem 0; }
.journey-step::before { content: ""; position: absolute; top: 14px; left: 0; width: 17px; height: 17px; border: 5px solid var(--mist); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.journey-step.is-current::before { background: var(--blue-bright); box-shadow: 0 0 0 7px rgba(48,149,227,.14); }
.journey-year { color: var(--blue); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.journey-step p { color: var(--muted); font-size: .96rem; }
.about-projects { display: grid; gap: 1rem; }
.project-card { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 1.5rem; padding: 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 8px 28px rgba(6,6,6,.045); }
.project-card > div { display: grid; gap: .4rem; }
.project-card p { color: var(--muted); }
.project-number { color: var(--blue); font-size: 2rem; font-weight: 900; letter-spacing: -.06em; border-right: 1px solid var(--line); }
.about-method-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.about-method .lede { color: rgba(255,255,255,.72); }
.principles-list { display: grid; }
.principles-list article { display: grid; grid-template-columns: 48px 1fr; gap: 1.1rem; padding: 1.45rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.principles-list article:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.principles-list article > span { color: #7fc4f5; font-weight: 900; }
.principles-list article div { display: grid; gap: .45rem; }
.principles-list p { color: rgba(255,255,255,.64); }
.training-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 7rem); padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, #fff, #eef6fb); box-shadow: var(--shadow); }
.training-copy { display: grid; gap: 1.4rem; align-content: start; }
.training-copy > p { color: var(--muted); font-size: 1.08rem; }
.training-tags { display: flex; flex-wrap: wrap; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.training-tags li { padding: .55rem .85rem; color: #123d61; border: 1px solid rgba(38,113,172,.2); border-radius: 999px; background: rgba(255,255,255,.8); font-size: .88rem; font-weight: 800; }
.about-cta h2 { max-width: 760px; }

@media (max-width: 900px) {
  .site-nav { position: fixed; inset: 76px 0 auto; display: none; padding: 1.2rem 1.5rem 1.7rem; background: rgba(6,6,6,.97); }
  .site-nav.open { display: block; }
  .site-nav ul { align-items: stretch; flex-direction: column; }
  .site-nav .btn { width: 100%; }
  .menu-toggle { display: block; }
  .has-drop .drop-btn, .has-drop .drop-extra { display: none; }
  .site-nav .drop { position: static; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav .drop::before { content: none; }
  .site-nav .drop a { padding: 0; border-radius: 0; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .service-detail .intro-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
  .site-footer .top > :first-child { grid-column: 1 / -1; }
  .about-intro-grid, .about-method-grid, .training-panel { grid-template-columns: 1fr; }
  .about-portrait { width: min(100%, 680px); }
  .journey-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .journey-grid::before { display: none; }
  .journey-step { padding: 3rem 1.2rem 1.4rem; border-top: 1px solid rgba(38,113,172,.2); }
  .journey-step::before { top: -9px; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 2rem, var(--max)); }
  .site-header .inner { min-height: 68px; }
  .site-logo { font-size: 1.15rem; }
  .site-logo img { width: 36px; height: 36px; }
  .page-hero { min-height: 610px; }
  .page-hero.compact { min-height: 500px; }
  .page-hero .container { padding-top: 7rem; }
  .card-grid, .process, .contact-grid, .article-list { grid-template-columns: 1fr; }
  .card { min-height: 240px; }
  .site-footer .top { grid-template-columns: 1fr; }
  .site-footer .top > :first-child { grid-column: auto; }
  .site-footer .bottom { flex-direction: column; }
  .about-portrait > img { min-height: 390px; }
  .about-place { right: .8rem; bottom: .8rem; left: .8rem; max-width: none; }
  .journey-grid { grid-template-columns: 1fr; gap: .8rem; }
  .project-card { grid-template-columns: 52px 1fr; gap: 1rem; padding: 1.2rem; }
  .project-number { font-size: 1.45rem; }
  .training-panel { padding: 1.5rem; border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Conóceme: comparativa de maquetas 2026-09-20 (provisional) */
.about-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.about-hero-grid .hero-copy { max-width: none; }
.about-hero-portrait { margin: 0; justify-self: end; width: min(100%, 360px); }
.page-hero.about-hero .about-hero-grid h1 { font-size: clamp(2.3rem, 3.9vw, 3.45rem); line-height: 1.06; }
.about-hero-grid .lede { max-width: 30rem; }
.about-hero-portrait { position: relative; }
.about-hero-portrait::after { content: ""; position: absolute; inset: 0; aspect-ratio: 3 / 4; z-index: 2; pointer-events: none; border-radius: 30px; background: linear-gradient(180deg, transparent 56%, rgba(4,20,35,.46) 100%); }
.about-hero-portrait::before { content: ""; position: absolute; inset: -12% -9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(48,149,227,.38), transparent 74%); z-index: 0; }
.about-hero-portrait > img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 26%; border-radius: 30px; border: 1px solid rgba(255,255,255,.30); box-shadow: 0 30px 72px rgba(0,0,0,.52), 0 0 0 7px rgba(48,149,227,.12); }

.zona-band { position: relative; overflow: hidden; color: #fff; background: #061c30; }
.zona-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(6,28,48,.95) 6%, rgba(6,28,48,.8) 46%, rgba(14,46,74,.5)), url('../img/penon-panoramica.jpg'); background-position: center; background-size: cover; }
.zona-band > .container { position: relative; z-index: 2; }
.zona-band .about-story { max-width: 640px; }
.zona-band h2 { color: #fff; }
.zona-band p { color: rgba(255,255,255,.86); }
.zona-band .about-highlight { color: #fff; background: rgba(255,255,255,.10); border-left-color: var(--blue-bright); }
.zona-place { display: inline-grid; gap: .15rem; justify-self: start; padding: .95rem 1.2rem; border-radius: 16px; background: linear-gradient(135deg, #123d61, #2671ac); border: 1px solid rgba(255,255,255,.22); }
.zona-place strong { font-size: 1.05rem; color: #fff; }
.zona-place span { color: rgba(255,255,255,.78); font-size: .9rem; }

.zona-figure { position: relative; margin: 0; }
.zona-marco { position: relative; }
.zona-marco > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 32px; box-shadow: var(--shadow); display: block; }

@media (max-width: 900px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-portrait { justify-self: start; }
  .about-hero-portrait > img { width: min(58%, 230px); }
}

@media (max-width: 900px) {
  .zona-band::before { background-image: linear-gradient(180deg, rgba(6,28,48,.93) 12%, rgba(6,28,48,.68) 58%, rgba(14,46,74,.46)), url('../img/penon-panoramica.jpg'); background-position: center 35%; }
}

.foto-credito { margin: .75rem .25rem 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.foto-credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foto-credito a:hover { color: var(--blue); }

/* Conóceme: cierre de la trayectoria y listado de formación (2026-09-20) */
.journey-cierre { max-width: 780px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; padding: 1.6rem 1.8rem; background: var(--paper); border-left: 4px solid var(--blue); border-radius: 18px; box-shadow: var(--shadow); }
.journey-cierre h3 { margin: 0 0 .75rem; font-size: 1.22rem; }
.journey-cierre p { margin: 0 0 .85rem; color: var(--muted); }
.journey-cierre p:last-child { margin-bottom: 0; }

.training-list { margin: 1.3rem 0 0; padding: 0; list-style: none; display: grid; gap: .95rem; }
.training-list li { display: grid; gap: .15rem; padding-left: 1rem; border-left: 3px solid var(--blue-soft); }
.training-list strong { font-size: 1rem; line-height: 1.35; }
.training-list span { color: var(--muted); font-size: .88rem; }
.training-list li:first-child { border-left-color: var(--blue); }

/* ===== Conóceme — maquetación de tres secciones (revisión 2026-09-21) ===== */

/* Sección 1: retrato, La Línea y trayectoria en una sola composición */
.page-hero.about-hero { min-height: 0; }
/* Fondo propio de esta página: mantiene la profundidad azul en la mitad superior
   y oscurece la inferior derecha, donde el párrafo con «DamIASolve» necesita que
   el azul de marca #3095e3 conserve contraste AA sobre fondo oscuro.
   Se usa una clase propia para no alterar las maquetas conoceme-opcion-a/b. */
.about-hero-v2::before {
  background-image:
    radial-gradient(900px 520px at 78% 16%, rgba(48,149,227,.22), transparent 62%),
    radial-gradient(620px 420px at 0% 96%, rgba(38,113,172,.16), transparent 70%),
    linear-gradient(118deg, #04141f 0%, #07202f 50%, #0a2740 100%);
  opacity: 1;
}
.page-hero.about-hero .container { padding-top: clamp(7rem, 11vw, 8.5rem); padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2.5rem;
  row-gap: clamp(2.2rem, 4.5vw, 3.4rem);
  align-items: center;
}
.about-lead { grid-column: 1 / 8; grid-row: 1; display: grid; gap: 1.15rem; }
.about-retrato { grid-column: 8 / 13; grid-row: 1; }
.about-zona { grid-column: 1 / 6; grid-row: 2; }
.about-relato { grid-column: 6 / 13; grid-row: 2; }

.page-hero.about-hero .about-lead h1 { font-size: clamp(2.15rem, 3.6vw, 3.2rem); line-height: 1.07; }
.about-lead .lede { max-width: 34rem; color: rgba(255,255,255,.86); }

/* Retrato: el tratamiento original de la página —rectángulo de esquinas
   redondeadas, filo claro, resplandor azul detrás y un degradado que lo funde
   con el fondo por abajo— al tamaño reducido que pidió Damián. */
.about-retrato {
  position: relative;
  margin: 0;
  justify-self: start;
  width: min(100%, 232px);
}
.about-retrato::before {
  content: "";
  position: absolute;
  inset: -11% -8%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(48,149,227,.34), transparent 74%);
}
.about-retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 28px;
  background: linear-gradient(180deg, transparent 62%, rgba(4,20,35,.42) 100%);
}
.about-retrato > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 24%;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 28px 64px rgba(0,0,0,.50), 0 0 0 6px rgba(48,149,227,.12);
}

.about-zona { margin: 0; }
.about-zona > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 46%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 22px 52px rgba(0,0,0,.42);
  display: block;
}

.about-relato { display: grid; gap: 1.05rem; }
.about-relato p { max-width: 40rem; color: rgba(255,255,255,.82); font-size: 1.03rem; line-height: 1.75; }

.foto-credito.on-dark { color: rgba(255,255,255,.74); }
.foto-credito.on-dark a:hover { color: #7fc4f5; }

/* Sección 2: logros y formación */
.about-practica .section-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.4rem); }

.logros-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.logro {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.15rem;
  min-height: 0;
  padding: 1.5rem 1.6rem 1.5rem 1.7rem;
  border-radius: 20px;
}
.logro::before { inset: 0 auto auto 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--blue), var(--blue-bright)); }
.logro .icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; }
.logro .icon svg { display: block; }
.logro p { margin: 0; align-self: center; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }

.formacion-panel {
  display: grid;
  grid-template-columns: minmax(0, .3fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4.5vw, 3rem);
  padding: clamp(1.7rem, 3.5vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #eef6fb);
  box-shadow: var(--shadow);
}
.formacion-panel h3 { margin: 0; align-self: start; color: var(--blue); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }
.formacion-texto { display: grid; gap: 1rem; }
.formacion-panel p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

/* Sección 3: CTA sin imagen remota, con el símbolo local como marca de agua */
.about-cta { padding-block: clamp(4rem, 8vw, 6.5rem); }
.about-cta::before {
  background:
    radial-gradient(620px 380px at 12% 8%, rgba(48,149,227,.26), transparent 64%),
    linear-gradient(120deg, #04141f 0%, #0a2941 54%, #123f64 100%);
  opacity: 1;
}
.about-cta::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42%, 400px);
  aspect-ratio: 1;
  background: url('../img/simbolo-damiasolve.png') center / contain no-repeat;
  opacity: .11;
  pointer-events: none;
}
.about-cta .container { position: relative; z-index: 2; max-width: 880px; gap: 1.05rem; }
.about-cta h2 { max-width: 36ch; font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
.about-cta p { max-width: 58ch; color: rgba(255,255,255,.84); font-size: 1.05rem; }
.about-cta .btn { margin-top: .8rem; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; row-gap: clamp(1.8rem, 5vw, 2.4rem); }
  .about-lead, .about-retrato, .about-zona, .about-relato { grid-column: 1 / -1; grid-row: auto; }
  .about-lead { order: 1; }
  .about-retrato { order: 2; justify-self: center; width: min(100%, 208px); }
  .about-relato { order: 3; }
  .about-zona { order: 4; }
  .about-zona > img { aspect-ratio: 16 / 9; border-radius: 20px; }
  .formacion-panel { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 620px) {
  .page-hero.about-hero .container { padding-top: 6.5rem; padding-bottom: 3.2rem; }
  .logros-grid { grid-template-columns: 1fr; }
  .logro { padding: 1.3rem 1.3rem 1.3rem 1.45rem; }
  .about-retrato { width: min(100%, 190px); }
  .about-zona > img { aspect-ratio: 4 / 3; }
  .about-cta::after { width: 74%; opacity: .085; right: -18%; }
  .about-cta h2 { max-width: none; }
}

/* Tarjetas de ejemplos: 4 en móvil y tableta; las marcadas .card-extra solo en ordenador (2026-09-25) */
@media (max-width: 900px) {
  .card-grid .card.card-extra { display: none; }
}

/* ============================================================
   Movimiento — kit para páginas con <body data-motion> (2026-09-25)
   Se activa solo si JS añade .motion-ready a <html> y el usuario
   no ha pedido reducir el movimiento.
   ============================================================ */

/* Cabecera en dos columnas: texto + demostración animada */
.page-hero .hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.page-hero .hero-split .hero-copy { max-width: 640px; }
.page-hero.compact .hero-split h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); }

/* Entrada de la cabecera al cargar */
.motion-ready [data-motion] .page-hero .hero-copy > * { opacity: 0; transform: translateY(22px); animation: mvUp .8s cubic-bezier(.2,.7,.2,1) forwards; }
.motion-ready [data-motion] .page-hero .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.motion-ready [data-motion] .page-hero .hero-copy > *:nth-child(3) { animation-delay: .18s; }
.motion-ready [data-motion] .page-hero .hero-copy > *:nth-child(4) { animation-delay: .28s; }
.motion-ready [data-motion] .page-hero .demo-phone { opacity: 0; animation: mvPhone 1s .3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes mvUp { to { opacity: 1; transform: none; } }
@keyframes mvPhone { from { opacity: 0; transform: translateY(40px) rotate(3deg); } to { opacity: 1; transform: none; } }

/* Aparición al hacer scroll */
[data-motion] main { overflow-x: clip; }
.motion-ready [data-rv] { opacity: 0; transform: translateY(30px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.motion-ready [data-rv="left"] { transform: translateX(-40px); }
.motion-ready [data-rv="right"] { transform: translateX(40px); }
.motion-ready [data-rv].is-in { opacity: 1; transform: none; }

/* Tarjetas vivas */
[data-motion] .card::before { transition: width .6s ease .2s; }
.motion-ready [data-motion] .card[data-rv]:not(.is-in)::before { width: 0; }
[data-motion] .card .icon { transition: transform .35s ease; }
@media (hover: hover) and (min-width: 901px) {
  .motion-ready [data-motion] .card[data-rv].is-in { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, opacity .75s ease; transition-delay: 0s; }
  [data-motion] .card:hover { transform: translateY(-8px); border-color: rgba(48,149,227,.45); box-shadow: 0 22px 50px rgba(5,25,45,.14); }
  [data-motion] .card:hover::before { width: 100%; }
  [data-motion] .card:hover .icon { transform: rotate(-8deg) scale(1.08); }
}

/* Fotos con zoom lento */
[data-motion] .media-frame img { transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.motion-ready [data-motion] .media-frame[data-rv]:not(.is-in) img { transform: scale(1.12); }
@media (hover: hover) { [data-motion] .media-frame:hover img { transform: scale(1.04); } }

/* Lista con marcas que aparecen */
.motion-ready [data-motion] .check-list li::before { transform: scale(0); transition: transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--d, 0) * 90ms + .25s); }
.motion-ready [data-motion] .check-list li.is-in::before { transform: scale(1); }

/* Banda azul con degradado en movimiento */
[data-motion] .section-blue { background-size: 220% 220%; animation: mvGrad 14s ease-in-out infinite alternate; }
@keyframes mvGrad { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* Banda final: fondo que se desplaza y brillo en el botón */
[data-motion] .cta-band::before { animation: mvPan 26s linear infinite alternate; }
@keyframes mvPan { from { transform: scale(1.1) translateX(-2%); } to { transform: scale(1.1) translateX(2%); } }
[data-motion] .cta-band .btn-primary { position: relative; overflow: hidden; }
[data-motion] .cta-band .btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); animation: mvShine 4.5s ease-in-out 1.5s infinite; }
@keyframes mvShine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Conóceme: entrada de la cabecera y detalles propios (2026-09-25) */
.motion-ready [data-motion] .about-grid > * { opacity: 0; animation: mvUp .9s cubic-bezier(.2,.7,.2,1) forwards; transform: translateY(22px); }
.motion-ready [data-motion] .about-grid > .about-lead { animation-delay: .05s; }
.motion-ready [data-motion] .about-grid > .about-retrato { animation-name: mvPop; animation-delay: .25s; transform: scale(.92); }
.motion-ready [data-motion] .about-grid > .about-relato { animation-delay: .4s; }
.motion-ready [data-motion] .about-grid > .about-zona { animation-delay: .55s; }
@keyframes mvPop { to { opacity: 1; transform: none; } }
[data-motion] .about-retrato::before { animation: mvGlow 5s ease-in-out infinite alternate; }
@keyframes mvGlow { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
[data-motion] .logro:hover::before { width: 4px; }
.motion-ready [data-motion] .logro[data-rv]:not(.is-in)::before { width: 4px; height: 0; }
[data-motion] .logro::before { transition: height .7s ease .25s; }

/* ---------- Móvil de demostración ---------- */
.demo-phone { position: relative; justify-self: center; width: 300px; max-width: 100%; }
.demo-phone .phone { position: relative; height: 540px; padding: 12px; border-radius: 42px; background: linear-gradient(160deg, #1d2730, #07090b); box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14); animation: mvFloat 6s ease-in-out infinite; }
@keyframes mvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.demo-phone .screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 31px; background: #efe9e1; color: #111; font-size: .86rem; line-height: 1.35; }
.demo-phone .notch { position: absolute; top: 8px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #07090b; z-index: 3; }
.demo-phone .bar { display: flex; align-items: center; gap: .6rem; padding: 2.1rem .9rem .7rem; color: #fff; background: #0f5b4e; }
.demo-phone .avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-bright)); font-size: .72rem; font-weight: 900; }
.demo-phone .bar strong { display: block; font-size: .9rem; }
.demo-phone .bar small { color: rgba(255,255,255,.75); font-size: .72rem; }
.demo-phone .chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: .8rem .75rem 1rem; }
.demo-phone .msg { max-width: 84%; padding: .5rem .7rem .55rem; border-radius: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.demo-phone .msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.demo-phone .msg.out { align-self: flex-end; background: #d6f3c9; border-top-right-radius: 4px; }
.demo-phone .msg small { display: block; margin-top: .25rem; color: #3f6b4c; font-size: .66rem; font-weight: 700; letter-spacing: .02em; }
.demo-phone .typing { align-self: flex-end; display: none; gap: 4px; padding: .6rem .75rem; border-radius: 14px; background: #d6f3c9; }
.demo-phone .typing.on { display: inline-flex; }
.demo-phone .typing i { width: 6px; height: 6px; border-radius: 50%; background: #3f6b4c; animation: mvDot 1s infinite; }
.demo-phone .typing i:nth-child(2) { animation-delay: .15s; }
.demo-phone .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mvDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.demo-phone [data-step] { transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1), max-height .45s ease, margin .45s ease, padding .45s ease; }
.demo-phone .msg[data-step]:not(.on) { opacity: 0; transform: translateY(12px) scale(.96); max-height: 0; padding-block: 0; margin-top: -.45rem; overflow: hidden; }
.demo-phone .msg[data-step].on { max-height: 160px; }
.demo-phone .toast { position: absolute; left: -38px; right: 18px; z-index: 4; display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border-radius: 16px; color: #0d1b27; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.35); font-size: .82rem; line-height: 1.3; }
.demo-phone .toast b { display: block; font-size: .86rem; }
.demo-phone .toast .t-ico { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #123d61, var(--blue-bright)); font-weight: 900; }
.demo-phone .toast[data-step]:not(.on) { opacity: 0; transform: translateX(-24px) scale(.95); }
.demo-phone .toast.bottom { bottom: 42px; }
.demo-phone .toast.under { bottom: -34px; }

/* Variante agenda */
.demo-phone .screen.cal { background: #f4f7fa; }
.demo-phone .cal-head { padding: 2.2rem 1rem .9rem; color: #fff; background: linear-gradient(135deg, #123d61, var(--blue)); }
.demo-phone .cal-head small { color: rgba(255,255,255,.75); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.demo-phone .cal-head strong { display: block; font-size: 1.2rem; }
.demo-phone .days { display: flex; gap: .35rem; margin-top: .7rem; }
.demo-phone .days span { flex: 1; padding: .3rem 0; border-radius: 9px; text-align: center; font-size: .72rem; background: rgba(255,255,255,.12); }
.demo-phone .days span.sel { color: var(--blue); background: #fff; font-weight: 900; }
.demo-phone .slots { display: grid; gap: .5rem; padding: .9rem; }
.demo-phone .slot { display: grid; grid-template-columns: 46px 1fr; align-items: center; min-height: 46px; padding: .5rem .7rem; border-radius: 12px; background: #fff; border: 1px dashed #c9d6e2; font-size: .8rem; transition: background .35s ease, border-color .35s ease; }
.demo-phone .slot time { color: var(--muted); font-weight: 800; }
.demo-phone .slot .free, .demo-phone .slot .busy { grid-area: 1 / 2; transition: opacity .35s ease, transform .35s ease; }
.demo-phone .slot .free { color: #6f7c88; }
.demo-phone .slot .busy { opacity: 0; transform: translateY(6px); font-weight: 800; color: #123d61; }
.demo-phone .slot.on { border-style: solid; border-color: transparent; background: var(--blue-soft); }
.demo-phone .slot.on .free { opacity: 0; transform: translateY(-6px); }
.demo-phone .slot.on .busy { opacity: 1; transform: none; }
.demo-phone .slot.fixed { border-style: solid; border-color: transparent; background: #e9eef3; }
.demo-phone .toast.top { top: 120px; }

/* ---------- Escaparate de tarjetas (sección .showcase) ---------- */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.showcase { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #060a0f; }
.showcase::before, .showcase::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.showcase::before { width: 520px; height: 520px; left: -140px; top: -120px; background: rgba(38,113,172,.45); animation: mvBlobA 16s ease-in-out infinite alternate; }
.showcase::after { width: 460px; height: 460px; right: -120px; bottom: -140px; background: rgba(48,149,227,.30); animation: mvBlobB 19s ease-in-out infinite alternate; }
@keyframes mvBlobA { to { transform: translate(180px, 120px) scale(1.15); } }
@keyframes mvBlobB { to { transform: translate(-160px, -90px) scale(1.1); } }
.showcase .container { position: relative; }
.showcase .container::before { content: ""; position: absolute; inset: -4rem -3rem; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); pointer-events: none; }
.showcase .eyebrow { color: #7fc4f5; }
.showcase .lede.muted { color: rgba(255,255,255,.74); }
.showcase .text-link { color: #7fc4f5; }
.showcase .text-link:hover { color: #fff; }

.showcase .card { min-height: 250px; color: #fff; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); box-shadow: 0 20px 50px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.showcase .card > * { position: relative; z-index: 1; }
.showcase .card p { color: rgba(255,255,255,.72); }
.showcase .card h3 { font-size: 1.25rem; }
/* Borde de luz que gira */
.showcase .card::before, .motion-ready [data-motion] .showcase .card[data-rv]:not(.is-in)::before { width: auto !important; height: auto !important; inset: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--ang), transparent 0 62%, rgba(48,149,227,.9) 80%, #9fd4fa 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .4s ease; animation: mvSpin 3.8s linear infinite; }
@keyframes mvSpin { to { --ang: 360deg; } }
/* Foco de luz que sigue al cursor */
.showcase .card::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(48,149,227,.24), transparent 65%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
/* Número grande de fondo */
.showcase .card-num { position: absolute; z-index: 0; top: .2rem; right: 1rem; font-size: 5.2rem; font-weight: 900; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); pointer-events: none; transition: -webkit-text-stroke-color .4s ease, transform .5s ease; }
/* Icono luminoso */
.showcase .card .icon { position: relative; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, #1b4e77, var(--blue-bright)); box-shadow: 0 10px 30px rgba(48,149,227,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.showcase .card .icon svg { width: 27px; height: 27px; }
.showcase .card .icon::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1px solid rgba(48,149,227,.55); opacity: 0; transform: scale(.85); }

.showcase .card:hover::before, .showcase .card.is-active::before { opacity: 1; }
.showcase .card:hover .card-num, .showcase .card.is-active .card-num { -webkit-text-stroke-color: rgba(127,196,245,.45); transform: translateY(4px); }
.showcase .card:hover .icon::after, .showcase .card.is-active .icon::after { animation: mvRing 1.8s ease-out infinite; }
@keyframes mvRing { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }

@media (hover: hover) and (min-width: 901px) {
  .showcase .card:hover::after { opacity: 1; }
  [data-motion] .showcase .card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); border-color: rgba(127,196,245,.35); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 40px rgba(48,149,227,.18); }
  [data-motion] .showcase .card:hover .icon { transform: translateZ(0) rotate(-8deg) scale(1.08); }
}

/* ---------- Deslizador en móvil: carrusel con flechas ---------- */
.slider-ctrl { display: none; }
@media (max-width: 620px) {
  [data-motion] .card-grid { display: flex; gap: .8rem; margin-inline: -1rem; padding: .8rem 1rem 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  [data-motion] .card-grid::-webkit-scrollbar { display: none; }
  [data-motion] .card-grid .card { flex: 0 0 80%; min-height: 250px; scroll-snap-align: center; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s ease, border-color .45s ease; }
  [data-motion] .card-grid .card.is-in:not(.is-active) { transform: scale(.9); opacity: .5; }
  [data-motion] .showcase .card-grid .card.is-active { border-color: rgba(127,196,245,.35); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 36px rgba(48,149,227,.22); }
  [data-motion] .slider-ctrl { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .3rem; }
  [data-motion] .slider-arrow { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; color: var(--blue); border: 1.5px solid rgba(38,113,172,.35); background: #fff; box-shadow: 0 6px 18px rgba(5,25,45,.12); transition: opacity .25s ease, transform .2s ease, background .25s ease; }
  [data-motion] .slider-arrow svg { width: 22px; height: 22px; }
  [data-motion] .slider-arrow:active { transform: scale(.92); }
  [data-motion] .slider-arrow:disabled { opacity: .3; cursor: default; }
  [data-motion] .slider-arrow.nudge:not(:disabled) { animation: mvArrow 1.4s ease-in-out 3; }
  [data-motion] .showcase .slider-arrow { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); box-shadow: none; }
  [data-motion] .slider-dots { display: flex; align-items: center; gap: .45rem; }
  [data-motion] .slider-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: #b6c8d8; transition: width .3s ease, background .3s ease; }
  [data-motion] .showcase .slider-dots button { background: rgba(255,255,255,.3); }
  [data-motion] .slider-dots button[aria-current="true"] { width: 26px; background: var(--blue-bright); }
}
@keyframes mvArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

@media (max-width: 900px) {
  .page-hero .hero-split { grid-template-columns: 1fr; }
  .page-hero .hero-split .hero-copy { max-width: none; }
}
@media (max-width: 620px) {
  .demo-phone { width: 272px; }
  .demo-phone .phone { height: 470px; }
  .demo-phone .toast { left: -14px; right: -14px; }
  .page-hero .hero-split { gap: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion] .demo-phone [data-step] { opacity: 1 !important; transform: none !important; max-height: none !important; }
  [data-motion] .demo-phone .toast { display: none; }
  [data-motion] .demo-phone .slot .busy { opacity: 1; transform: none; }
  [data-motion] .demo-phone .slot .free { opacity: 0; }
}

/* ===== «Cómo trabajo» en Servicios: sección clara y recorrido con opciones (2026-09-25) ===== */
.method-light { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, var(--mist) 100%); }
.method-flowline { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, #000 56%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, transparent 40%, #000 56%, #000 100%); }
.method-flowline path, .method-flowline circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.method-flowline .fl-main { stroke: var(--blue); stroke-width: 4; }
.method-flowline .fl-soft { stroke: var(--blue-bright); stroke-width: 2; stroke-dasharray: 2 12; }
.method-flowline .fl-branch { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 10 10; }
.method-flowline .fl-node { fill: #fff; stroke: var(--blue); stroke-width: 4; }
.method-flowline .fl-end { fill: var(--blue-bright); stroke: none; }
.method-flowline .fl-tip { stroke: var(--blue); stroke-width: 4; }
.method-light .container { position: relative; }
.method-flow { --gap: 56px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: var(--gap); align-items: center; }
.mf-step, .mf-opt { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 14px 40px rgba(5, 25, 45, .08); }
.mf-step { padding: 1.6rem 1.5rem 1.5rem; }
.mf-step h3, .mf-opt h3 { margin: 0; font-size: 1.2rem; }
.mf-step p, .mf-opt p { margin: .6rem 0 0; color: var(--muted); }
.mf-num { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 50%; color: #fff; font-weight: 900; background: linear-gradient(135deg, #1b4e77, var(--blue-bright)); box-shadow: 0 8px 22px rgba(48, 149, 227, .35); }
/* Recorrido principal: línea continua entre pasos */
.mf-step::after { content: ""; position: absolute; top: calc(50% - 1px); right: calc(var(--gap) * -1); width: var(--gap); height: 2px; background: var(--blue); transform-origin: left center; }
.mf-step::before { content: ""; position: absolute; top: calc(50% - 5px); right: calc(var(--gap) * -1 - 1px); width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid var(--blue); border-right: 0; }
/* Opciones: bifurcación discontinua */
.mf-options { position: relative; padding-left: 30px; }
.mf-label { position: absolute; left: 30px; bottom: 100%; margin: 0 0 .8rem; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mf-options ul { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 16px; position: relative; }
.mf-options ul::before { content: ""; position: absolute; left: -30px; top: calc(25% - 4px); bottom: calc(25% - 4px); border-left: 2px dashed rgba(38, 113, 172, .55); }
.mf-opt { padding: 1.1rem 1.3rem; background: rgba(255, 255, 255, .9); border: 1.5px dashed rgba(38, 113, 172, .45); box-shadow: none; }
.mf-opt::before { content: ""; position: absolute; top: 50%; left: -30px; width: 30px; border-top: 2px dashed rgba(38, 113, 172, .55); }
.mf-opt h3 span { color: var(--blue); font-weight: 700; }
/* Móvil y tableta: recorrido vertical */
@media (max-width: 860px) {
  .method-flow { --gap: 40px; grid-template-columns: 1fr; align-items: stretch; }
  .mf-step::after { top: auto; bottom: calc(var(--gap) * -1); right: auto; left: 44px; width: 2px; height: var(--gap); transform-origin: center top; }
  .mf-step::before { top: auto; bottom: calc(var(--gap) * -1 - 1px); right: auto; left: 39px; border: 6px solid transparent; border-top: 8px solid var(--blue); border-bottom: 0; }
  .mf-options { padding-left: 0; }
  .mf-label { position: static; padding-left: 64px; }
  .mf-options ul { padding-left: 64px; grid-auto-rows: auto; }
  .mf-options ul::before { display: none; }
  .mf-opt::after { content: ""; position: absolute; left: -22px; top: -18px; bottom: -18px; border-left: 2px dashed rgba(38, 113, 172, .55); }
  .mf-opt:first-child::after { top: -2.9rem; }
  .mf-opt:last-child::after { bottom: auto; height: calc(50% + 18px); }
  .mf-opt::before { left: -20px; width: 20px; }
  .method-flowline { opacity: .12; }
}

/* Secuencia de los recorridos .method-flow dirigida por site.js (2026-09-26, generalizada)
   Clases por elemento: .is-lit (tarjeta iluminada), .is-drawn (flecha dibujada hasta la siguiente),
   .is-open y .is-lit en .mf-options (bifurcación y opciones). Sirve para Servicios (2 pasos + opciones)
   y para recorridos en línea (.mf-linear). Sin JS o con movimiento reducido: completo y quieto. */
.mf-step, .mf-opt { transition: border-color .35s ease, box-shadow .35s ease, background-color .35s ease; }
.mf-num { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s ease; }
.mf-step:last-child::after, .mf-step:last-child::before { content: none; }
.method-flow.mf-js .mf-step::after { transform: scale(0, 1); transition: transform .5s cubic-bezier(.5, 0, .3, 1); }
.method-flow.mf-js .mf-step::before { opacity: 0; transform: translateX(calc(var(--gap) * -1)); transition: transform .5s cubic-bezier(.5, 0, .3, 1), opacity .12s linear; }
.method-flow.mf-js .mf-options ul::before { transform: scale(1, 0); transition: transform .4s ease-out; }
.method-flow.mf-js .mf-opt::before { transform: scale(0, 1); transform-origin: left center; transition: transform .4s ease-out; }
.method-flow.mf-js .mf-opt::after { transform: scale(1, 0); transform-origin: center top; transition: transform .4s ease-out; }
.method-flow.mf-js .mf-step.is-drawn::after,
.method-flow.mf-js .mf-options.is-open ul::before, .method-flow.mf-js .mf-options.is-open .mf-opt::before, .method-flow.mf-js .mf-options.is-open .mf-opt::after { transform: none; }
.method-flow.mf-js .mf-step.is-drawn::before { opacity: 1; transform: none; }
/* Tarjeta iluminada */
.method-flow .mf-step.is-lit { border-color: var(--blue-bright); background-color: #f2f8fe; box-shadow: 0 0 0 4px rgba(48, 149, 227, .2), 0 22px 50px rgba(38, 113, 172, .24); }
.method-flow .mf-step.is-lit .mf-num { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(48, 149, 227, .16), 0 10px 26px rgba(48, 149, 227, .45); }
.method-flow .mf-options.is-lit .mf-opt { border-style: solid; border-color: var(--blue-bright); background-color: #f2f8fe; box-shadow: 0 0 0 4px rgba(48, 149, 227, .18), 0 18px 42px rgba(38, 113, 172, .2); }
/* Reinicio instantáneo antes de repetir */
.method-flow.mf-reset *, .method-flow.mf-reset *::before, .method-flow.mf-reset *::after, .method-flow.mf-reset > li { transition: none !important; }
/* Recorrido en línea (sin bifurcación), p. ej. 4 pasos en las páginas de servicio */
.method-flow.mf-linear { --gap: 44px; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.method-flow.mf-linear .mf-step { padding: 1.4rem 1.25rem 1.3rem; }
/* Variante de 3 pasos (método común de portada y Servicios, 2026-10-11) */
@media (min-width: 861px) { .method-flow.mf-linear.mf-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) and (min-width: 861px) { .method-flow.mf-linear { --gap: 32px; } .method-flow.mf-linear .mf-step { padding: 1.2rem 1rem; } }
@media (max-width: 860px) {
  .method-flow.mf-js .mf-step::after { transform: scale(1, 0); }
  .method-flow.mf-js .mf-step::before { transform: translateY(calc(var(--gap) * -1)); }
  .method-flow.mf-js .mf-step.is-drawn::after { transform: none; }
  .method-flow.mf-linear { --gap: 40px; grid-template-columns: 1fr; }
}

/* Franja de cierre en azul corporativo con relieve (variante .cta-brand, de momento solo en Servicios) (2026-09-25)
   Degradado azul, resplandor a la izquierda, símbolo de DamIASolve tenue a la derecha, texto y botón blancos. */
.cta-band.cta-brand { isolation: isolate; background: linear-gradient(135deg, #1b4e77 0%, #215f96 55%, #2466a0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -60px 90px rgba(10, 32, 52, .28); }
/* Dos luces difuminadas y trama de puntos, al estilo de «En qué puedo ayudarte» */
.cta-band.cta-brand::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(22% 70% at 0% 40%, rgba(76, 170, 245, .5), transparent 70%), radial-gradient(28% 60% at 96% 100%, rgba(159, 212, 250, .3), transparent 70%); filter: blur(24px); }
.cta-band.cta-brand .container::before { content: ""; position: absolute; inset: -4rem -3rem; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%); pointer-events: none; }
.cta-band.cta-brand::before { z-index: -1; inset: 0; background: url('../img/simbolo-damiasolve.png') no-repeat center center / auto 210%; filter: brightness(0) invert(1); opacity: .04; animation: none !important; }
.cta-band.cta-brand p { color: #fff; }
.cta-band.cta-brand .btn-primary { color: #123d61; background: #fff; box-shadow: 0 12px 30px rgba(6, 20, 35, .28); }
.cta-band.cta-brand .btn-primary:hover { color: #123d61; background: #eaf4fc; }
[data-motion] .cta-band.cta-brand .btn-primary::after { animation-duration: 2.4s; animation-delay: .6s; animation-name: mvShineSlow; background: linear-gradient(110deg, transparent 22%, rgba(48, 149, 227, .55) 40%, rgba(159, 212, 250, .95) 50%, rgba(48, 149, 227, .55) 60%, transparent 78%); }
@media (max-width: 620px) { .cta-band.cta-brand::before { background-size: auto 160%; } }

/* Cierre moderno: panel de cristal con borde de luz y flecha en el botón (2026-09-25) */
.cta-band.cta-brand .cta-panel { position: relative; width: min(100%, 900px); display: grid; justify-items: center; gap: 1.3rem; padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.3rem, 5vw, 4rem); border-radius: 32px; background: linear-gradient(160deg, #2a6399 0%, #1d4f7c 55%, #174366 100%); box-shadow: 0 30px 80px rgba(6, 24, 40, .38), inset 0 1px 0 rgba(255, 255, 255, .22); }
.cta-band.cta-brand .cta-panel::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(135deg, rgba(159, 212, 250, .95), rgba(48, 149, 227, .15) 32%, rgba(255, 255, 255, .06) 60%, rgba(76, 170, 245, .85)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.cta-band.cta-brand .cta-panel > * { position: relative; }
.cta-band.cta-brand .cta-panel p { margin: 0; }
.cta-band.cta-brand .btn-primary { display: inline-flex; align-items: center; gap: .6rem; }
.btn-arrow { flex: none; transition: transform .3s ease; }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translateX(4px); }

/* Panel del cierre: sobresale al pasar el ratón (2026-09-26) */
.cta-band.cta-brand .cta-panel { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.cta-band.cta-brand .cta-panel::before { transition: opacity .35s ease, filter .35s ease; }
.cta-band.cta-brand .cta-panel:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 44px 100px rgba(6, 24, 40, .5), 0 0 0 1px rgba(159, 212, 250, .25), 0 0 60px rgba(48, 149, 227, .35), inset 0 1px 0 rgba(255, 255, 255, .3); }
.cta-band.cta-brand .cta-panel:hover::before { filter: brightness(1.35) saturate(1.2); }
@media (prefers-reduced-motion: reduce) { .cta-band.cta-brand .cta-panel:hover { transform: none; } }

/* El botón del cierre crece al pasar el ratón por el panel, como si quisiera salirse (2026-09-26) */
.cta-band.cta-brand .cta-panel .btn-primary { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s ease, background-color .25s ease; }
.cta-band.cta-brand .cta-panel:hover .btn-primary { transform: translateY(-6px) scale(1.14); box-shadow: 0 22px 44px rgba(6, 20, 35, .42), 0 0 0 6px rgba(159, 212, 250, .22); }
@media (prefers-reduced-motion: reduce) { .cta-band.cta-brand .cta-panel:hover .btn-primary { transform: none; } }

/* Sección de texto en fondo oscuro con luces (showcase) en las páginas de servicio (2026-09-26) */
.showcase .prose p { color: rgba(255, 255, 255, .8); }
.showcase .check-list li { color: rgba(255, 255, 255, .9); }
.showcase .check-list li::before { color: #7fc4f5; }
.service-detail .showcase .aside { position: relative; color: #fff; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.service-detail .showcase .aside p { color: rgba(255, 255, 255, .8); }

/* Cabecera igual que la de la portada: foto al 22 %, velo negro-azul y círculos concéntricos (2026-09-26)
   Cada página pone su foto con una clase hi-<página> (reglas al final). */
.page-hero.hero-home { background: #060606; }
.page-hero.hero-home::before { background-image: url('../img/fondo-hero-tableta.webp'); background-position: center; background-size: cover; opacity: .22; transform: scale(1.45); transform-origin: 51.8% 51.7%; }
.page-hero.hero-home::after { inset: 0; width: auto; height: auto; top: 0; right: 0; border: 0; border-radius: 0; box-shadow: none; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%233095E3' stroke-opacity='.16'%3E%3Ccircle cx='320' cy='320' r='318' stroke-width='1'/%3E%3Ccircle cx='320' cy='320' r='236' stroke-width='1'/%3E%3Ccircle cx='320' cy='320' r='154' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='2' r='5' fill='%233095E3' fill-opacity='.16' stroke='none'/%3E%3C/svg%3E") no-repeat right -170px center / 640px 640px,
    radial-gradient(ellipse 55% 65% at 88% 45%, rgba(38, 113, 172, .20) 0%, transparent 70%),
    linear-gradient(135deg, rgba(6, 6, 6, .88) 0%, rgba(27, 78, 119, .58) 50%, rgba(6, 6, 6, .78) 100%); }
@media (max-width: 860px) {
  .page-hero.hero-home::after { background-position: right -190px top 38%, 0 0, 0 0; background-size: 380px 380px, auto, auto; }
}

/* Fotos de sección en las páginas de servicio (Pexels, 2026-09-26) */
.intro-side { display: grid; gap: 1.2rem; align-self: start; }
.section-photo { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: 0 20px 50px rgba(5, 25, 45, .18); }
.section-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.showcase .section-photo { box-shadow: 0 20px 50px rgba(0, 0, 0, .4); outline: 1px solid rgba(255, 255, 255, .12); outline-offset: -1px; }
/* Foto de fondo con velo en una sección oscura (Servicios) */
.showcase .section-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .14; filter: grayscale(.3); pointer-events: none; }

.service-detail .media-frame img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.service-detail .media-frame img[src*="automatizacion-seccion"] { object-position: 50% 62%; }

/* Foto de cabecera de cada página de servicio (2026-09-26) */
.page-hero.hero-home.hi-servicios::before { background-image: url('../img/servicios-cabecera.webp'); transform: none; }
.page-hero.hero-home.hi-servicio-mejora-procesos::before { background-image: url('../img/servicio-mejora-procesos-cabecera.webp'); transform: none; }
.page-hero.hero-home.hi-servicio-digitalizacion::before { background-image: url('../img/servicio-digitalizacion-cabecera.webp'); transform: none; }
.page-hero.hero-home.hi-servicio-automatizacion::before { background-image: url('../img/servicio-automatizacion-cabecera.webp'); transform: none; }
.page-hero.hero-home.hi-servicio-inteligencia-artificial::before { background-image: url('../img/servicio-inteligencia-artificial-cabecera-4.webp'); transform: none; opacity: .6; }
.page-hero.hero-home.hi-servicio-soluciones-medida::before { background-image: url('../img/servicio-soluciones-medida-cabecera.webp'); transform: none; }
.page-hero.hero-home.hi-mensajes-centralizados::before { background-image: url('../img/fondo-mensajes-cabecera.webp'); transform: none; }
.page-hero.hero-home.hi-servicio-formacion-ia::before { background-image: url('../img/servicio-formacion-ia-cabecera.webp'); transform: none; }

/* Palabra destacada del titular en azul corporativo, como en la portada (2026-09-26)
   #3095e3 sobre fondo oscuro (cabeceras); #2671ac si el titular está sobre fondo claro. */
h1 .hl { color: #3095e3; }
.section:not(.section-dark):not(.showcase):not(.cta-band) h1 .hl { color: #2671ac; }

/* «La idea central» (tarjeta lateral en sección oscura): sobresale al pasar el ratón (2026-09-26) */
.service-detail .showcase .aside { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.service-detail .showcase .aside:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(127, 196, 245, .55); box-shadow: 0 34px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(127, 196, 245, .25), 0 0 50px rgba(48, 149, 227, .3); }
@media (prefers-reduced-motion: reduce) { .service-detail .showcase .aside:hover { transform: none; } }

/* Sección clara con línea de flujo y contenido en dos columnas (split), p. ej. Digitalización (2026-09-26) */
.method-light.split-light .split { position: relative; }
.method-light.split-light .method-flowline { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 60%); }
@media (max-width: 860px) { .method-light.split-light .method-flowline { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 50%, #000 65%); mask-image: linear-gradient(180deg, transparent 0%, transparent 50%, #000 65%); } }
.method-light .feature-card { min-height: 0; position: relative; padding: clamp(1.6rem, 3vw, 2.2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(5, 25, 45, .12); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease; }
.method-light .feature-card .icon { margin-bottom: 1.1rem; }
.method-light .feature-card h3 { margin: 0 0 .6rem; font-size: 1.35rem; color: var(--ink); }
.method-light .feature-card p { margin: 0; color: var(--muted); }
.method-light .feature-card:hover { transform: translateY(-8px) scale(1.02); border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(48, 149, 227, .16), 0 30px 70px rgba(38, 113, 172, .25); }
@media (prefers-reduced-motion: reduce) { .method-light .feature-card:hover { transform: none; } }

/* Brillo del botón de cierre más pausado y más frecuente en Servicios y páginas de servicio (2026-09-26):
   cruza en ~1,4 s y se repite cada 2,4 s (antes ~0,75 s cada 3-4,5 s). */
@keyframes mvShineSlow { 0%, 20% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }
body[data-page="services"][data-motion] .cta-band .btn-primary::after { animation-name: mvShineSlow; animation-duration: 2.4s; animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) { [data-motion] .cta-band .btn-primary::after { animation: none; } }

/* Automatización (2026-09-28): tarjetas bajo la introducción en la misma sección oscura; foto vertical encuadrada arriba */
.showcase .container + .container { margin-top: clamp(3rem, 6vw, 4.5rem); }
.section-photo.photo-top img { object-position: 50% 28%; }

/* Cabecera igual que la portada (2026-09-28): transparente arriba, oscura al desplazarse,
   enlaces en el centro y botón a la derecha. Medidas copiadas de .nav de index.html. */
.site-header { padding: 0 1.5rem; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .4s ease, box-shadow .4s ease; }
.site-header.scrolled { background: rgba(6, 6, 6, .88); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.site-header .container { width: min(1152px, 100% - 3rem); }
.site-header .inner { min-height: 96px; justify-content: space-between; gap: 1.5rem; }
.site-logo { gap: .6rem; font-size: 1.45rem; }
.site-logo img { width: 44px; height: 44px; }
.site-logo .brand { font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.site-nav { margin-left: 0; }
.site-nav ul { gap: 2.5rem; }
.site-nav a, .site-nav .drop-btn { color: rgba(255, 255, 255, .82); font-size: .88rem; font-weight: 500; transition: color .3s ease; }
.site-nav a:hover, .site-nav .drop-btn:hover, .site-nav .has-drop.open .drop-btn, .site-nav a[aria-current="page"], .site-nav .drop-btn[data-current] { color: #3095e3; }
.site-nav .drop a:hover, .site-nav .drop a:focus-visible { color: #fff; }
.header-cta .btn { min-height: 0; gap: .5rem; padding: .65rem 1.5rem; border: 0; font-size: .85rem; font-weight: 600; line-height: 1.6; border-radius: 50px; white-space: nowrap; }
.header-cta .btn-primary { background: #3095e3; box-shadow: 0 8px 32px rgba(48, 149, 227, .28); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
.header-cta .btn-primary:hover { background: #2671ac; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(48, 149, 227, .38); }
.nav-cta-mob { display: none; }
@media (min-width: 901px) and (max-width: 1100px) {
  .site-nav ul { gap: 1.6rem; }
  .header-cta .btn { padding: .6rem 1.1rem; }
}
@media (max-width: 900px) {
  .header-cta { display: none; }
  .nav-cta-mob { display: block; }
  .site-header .inner { justify-content: flex-start; }
  .site-nav { inset: 96px 0 auto; background: #060606; }
  .site-nav a { color: #fff; font-size: .92rem; font-weight: 700; }
  .site-header:has(.site-nav.open) { background: #060606; }
}
@media (max-width: 768px) {
  .site-header .container { width: min(1152px, 100% - 2rem); }
  .site-header .inner { min-height: 88px; }
  .site-nav { inset: 88px 0 auto; }
  .site-logo { font-size: 1.3rem; }
  .site-logo img { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
  .site-logo { font-size: 1.2rem; }
  .site-logo img { width: 34px; height: 34px; }
}

/* Automatización (2026-09-28): jerarquía dentro de la sección oscura. La idea principal manda;
   los ejemplos van debajo, separados por una línea y con un título un escalón más pequeño. */
.showcase.has-examples .prose h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.showcase.has-examples .container.examples { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid rgba(255, 255, 255, .14); }
.showcase.has-examples .examples .section-head { gap: .2rem; margin-bottom: 2rem; }
.showcase.has-examples .examples .section-head h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

/* Mensajes y pedidos (2026-09-28): lista dentro de la tarjeta clara y aside con enlace en la sección oscura */
.method-light .feature-card .check-list { margin: 0; }
.method-light .feature-card .check-list li { color: var(--ink); }
.showcase .aside .text-link { display: inline-block; margin-top: .4rem; }
.showcase.has-examples .examples .section-head .lede { margin-top: .6rem; }

/* Páginas de ejemplo (2026-09-28): Mensajes y pedidos. Misma identidad, estructura centrada en el ejemplo. */
.page-hero .hero-kicker { margin: 1.1rem 0 .7rem; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; }
.compare-col { padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--radius); }
.compare-col h3 { margin: 0 0 1.2rem; font-size: 1.3rem; }
.compare-col ul { margin: 0; }
.compare-col li + li { margin-top: .7rem; }
.compare-tag { display: inline-block; margin: 0 0 1rem; padding: .3rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.compare-col.is-before { border: 1px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .025); }
.compare-col.is-before .compare-tag { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
.compare-col.is-before h3 { color: rgba(255, 255, 255, .85); }
.compare-col.is-after { border: 1px solid rgba(48, 149, 227, .55); background: linear-gradient(160deg, rgba(48, 149, 227, .16), rgba(38, 113, 172, .05)); box-shadow: 0 20px 50px rgba(0, 0, 0, .35), 0 0 40px rgba(48, 149, 227, .15); }
.compare-col.is-after .compare-tag { color: #fff; background: #2671ac; }
.compare-arrow { display: grid; place-items: center; color: #7fc4f5; }
.compare-arrow svg { width: 34px; height: 34px; }
.x-list { list-style: none; padding: 0; }
.x-list li { position: relative; padding-left: 1.8rem; color: rgba(255, 255, 255, .7); }
.x-list li::before { content: "✕"; position: absolute; left: 0; color: rgba(255, 255, 255, .45); font-weight: 900; }
.flow-note { max-width: 760px; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.4rem 1.6rem; border-left: 4px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(255, 255, 255, .85); }
.flow-note h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.flow-note .check-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; margin: 0; }
.limits-split { align-items: start; }
.limits-links { display: grid; gap: .6rem; margin-top: 1.4rem; }
.note-card { padding: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 20px 50px rgba(5, 25, 45, .1); }
.note-card h3 { margin: 0 0 .7rem; font-size: 1.35rem; }
.note-card .muted { margin: 0 0 1.2rem; color: var(--muted); }
.note-card .check-list { margin: 0; }
.note-card .check-list li + li { margin-top: .5rem; }
@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); }
  .flow-note .check-list { grid-template-columns: 1fr; }
}

/* ===== Mensajes y pedidos: secciones con los colores invertidos (2026-09-28) =====
   Oscuras → claras y claras → oscuras. El cierre azul (cta-brand) no cambia. */
/* Barra superior oscura desde el principio, porque la cabecera es clara */
.hero-is-light .site-header { background: rgba(6, 6, 6, .88); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }

/* 1. Cabecera clara (misma foto, muy tenue) */
.page-hero.hero-home.hero-light { color: var(--ink); background: #f3f7fb; }
.page-hero.hero-home.hero-light::before { opacity: .10; filter: grayscale(.4); }
.page-hero.hero-home.hero-light::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%232671AC' stroke-opacity='.22'%3E%3Ccircle cx='320' cy='320' r='318'/%3E%3Ccircle cx='320' cy='320' r='236'/%3E%3Ccircle cx='320' cy='320' r='154' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right -160px top 45% / 640px 640px,
  radial-gradient(ellipse 55% 65% at 88% 45%, rgba(48, 149, 227, .16) 0%, transparent 70%),
  linear-gradient(135deg, rgba(243, 247, 251, .92) 0%, rgba(223, 238, 250, .75) 50%, rgba(243, 247, 251, .9) 100%); }
.page-hero.hero-light h1 { color: var(--ink); }
.page-hero.hero-light h1 .hl { color: #2671ac; }
.page-hero.hero-light .lede { color: #3b4a58; }
.page-hero.hero-light .breadcrumbs { color: #5b6b7a; }
.page-hero.hero-light .breadcrumbs a { color: var(--ink); }
.page-hero.hero-light .hero-kicker { color: #2671ac; }
.page-hero.hero-light .demo-phone .phone { box-shadow: 0 40px 90px rgba(27, 78, 119, .35), inset 0 0 0 1px rgba(255, 255, 255, .14); }

/* 2 y 4. Bloques que eran oscuros → claros */
.showcase.is-light { color: var(--ink); background: linear-gradient(180deg, #ffffff 0%, var(--mist) 100%); }
.showcase.is-light::before { background: rgba(48, 149, 227, .14); }
.showcase.is-light::after { background: rgba(38, 113, 172, .10); }
.showcase.is-light .container::before { background-image: radial-gradient(rgba(38, 113, 172, .12) 1px, transparent 1px); }
.showcase.is-light .eyebrow { color: #2671ac; }
.showcase.is-light .lede.muted { color: var(--muted); }
.showcase.is-light .text-link { color: #2671ac; }
.showcase.is-light .card { color: var(--ink); border-color: var(--line); background: #fff; box-shadow: 0 18px 44px rgba(5, 25, 45, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.showcase.is-light .card p { color: var(--muted); }
.showcase.is-light .card-num { -webkit-text-stroke-color: rgba(38, 113, 172, .3); }
.showcase.is-light .card:hover .card-num, .showcase.is-light .card.is-active .card-num { -webkit-text-stroke-color: rgba(38, 113, 172, .4); }
.showcase.is-light .card::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(48, 149, 227, .12), transparent 65%); }
.showcase.is-light .compare-col.is-before { border-color: rgba(5, 25, 45, .2); background: #f6f8fa; }
.showcase.is-light .compare-col.is-before .compare-tag { color: #5b6b7a; background: rgba(5, 25, 45, .07); }
.showcase.is-light .compare-col.is-before h3 { color: #3b4a58; }
.showcase.is-light .x-list li { color: #5b6b7a; }
.showcase.is-light .x-list li::before { color: #9aa8b5; }
.showcase.is-light .compare-col.is-after { border-color: rgba(48, 149, 227, .5); background: linear-gradient(160deg, #eaf4fd, #ffffff); box-shadow: 0 20px 50px rgba(27, 78, 119, .14); }
.showcase.is-light .compare-col.is-after h3 { color: var(--ink); }
.showcase.is-light .check-list li { color: var(--ink); }
.showcase.is-light .check-list li::before { color: #2671ac; }
.showcase.is-light .compare-arrow { color: #2671ac; }
@media (max-width: 860px) {
  [data-motion] .showcase.is-light .slider-arrow { color: var(--blue); border-color: rgba(38, 113, 172, .35); background: #fff; }
  [data-motion] .showcase.is-light .slider-dots button { background: #b6c8d8; }
  [data-motion] .showcase.is-light .slider-dots button[aria-current="true"] { background: var(--blue-bright); }
}

/* 3. Bloque que era claro (línea de flujo) → oscuro */
.method-light.is-dark { color: #fff; background: radial-gradient(700px circle at 15% 0%, rgba(38, 113, 172, .35), transparent 60%), #060a0f; }
.method-light.is-dark .method-flowline { opacity: .3; }
.method-light.is-dark .method-flowline .fl-main, .method-light.is-dark .method-flowline .fl-branch, .method-light.is-dark .method-flowline .fl-tip { stroke: #3095e3; }
.method-light.is-dark .method-flowline .fl-node { fill: #060a0f; stroke: #3095e3; }
.method-light.is-dark .eyebrow { color: #7fc4f5; }
.method-light.is-dark .mf-step { color: #fff; border-color: rgba(255, 255, 255, .12); background-color: rgba(255, 255, 255, .05); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.method-light.is-dark .mf-step p { color: rgba(255, 255, 255, .72); }
.method-light.is-dark .mf-step::after { background: #3095e3; }
.method-light.is-dark .mf-step::before { border-left-color: #3095e3; }
.method-light.is-dark .method-flow .mf-step.is-lit { border-color: #3095e3; background-color: rgba(48, 149, 227, .14); box-shadow: 0 0 0 4px rgba(48, 149, 227, .2), 0 22px 50px rgba(0, 0, 0, .4); }
.method-light.is-dark .flow-note { color: #fff; border-left-color: #3095e3; background: rgba(255, 255, 255, .06); }
.method-light.is-dark .flow-note .check-list li { color: rgba(255, 255, 255, .9); }
.method-light.is-dark .flow-note .check-list li::before { color: #7fc4f5; }
@media (max-width: 860px) {
  .method-light.is-dark .mf-step::before { border-left-color: transparent; border-top-color: #3095e3; }
}

/* 5. Bloque que era gris claro → oscuro */
.section-dark-alt { color: #fff; background: radial-gradient(640px circle at 90% 10%, rgba(38, 113, 172, .3), transparent 60%), #0a1118; }
.section-dark-alt .eyebrow { color: #7fc4f5; }
.section-dark-alt h2 { color: #fff; }
.section-dark-alt .lede.muted { color: rgba(255, 255, 255, .75); }
.section-dark-alt .text-link { color: #7fc4f5; }
.section-dark-alt .note-card { color: #fff; border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.section-dark-alt .note-card .muted { color: rgba(255, 255, 255, .7); }
.section-dark-alt .note-card .check-list li { color: rgba(255, 255, 255, .9); }
.section-dark-alt .note-card .check-list li::before { color: #7fc4f5; }

/* Mensajes y pedidos: imágenes de fondo con velo (2026-09-28). «Cómo funciona» y el cierre no cambian. */
.page-hero.hero-home.hero-light::before { opacity: .55; filter: none; }
.page-hero.hero-home.hero-light::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='none' stroke='%232671AC' stroke-opacity='.22'%3E%3Ccircle cx='320' cy='320' r='318'/%3E%3Ccircle cx='320' cy='320' r='236'/%3E%3Ccircle cx='320' cy='320' r='154' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right -160px top 45% / 640px 640px,
  linear-gradient(90deg, rgba(243, 247, 251, .96) 0%, rgba(243, 247, 251, .9) 42%, rgba(230, 241, 251, .55) 70%, rgba(230, 241, 251, .35) 100%); }
@media (max-width: 900px) {
  .page-hero.hero-home.hero-light::after { background: linear-gradient(180deg, rgba(243, 247, 251, .93) 0%, rgba(243, 247, 251, .88) 60%, rgba(230, 241, 251, .6) 100%); }
}
.showcase.is-light.bgp-antes { background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(238, 245, 251, .86) 100%), url('../img/fondo-mensajes-problema.webp') center 40% / cover no-repeat; }
.showcase.is-light.bgp-resolver { background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(238, 245, 251, .9) 100%), url('../img/fondo-mensajes-negocio.webp') center / cover no-repeat; }
.section-dark-alt.bgp-criterio { background: radial-gradient(640px circle at 90% 10%, rgba(38, 113, 172, .3), transparent 60%), linear-gradient(135deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 55%, rgba(12, 30, 46, .88) 100%), url('../img/fondo-mensajes-criterio.webp') center / cover no-repeat; }
.section-dark-alt.bgp-criterio .note-card { background: rgba(10, 17, 24, .72); }

/* Agenda y recordatorios: misma plantilla de ejemplo que Mensajes y pedidos, con sus fondos (2026-09-28) */
.page-hero.hero-home.hi-agenda-recordatorios::before { background-image: url('../img/fondo-agenda-cabecera.webp'); transform: none; }
.showcase.is-light.bgp-agenda-antes { background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(238, 245, 251, .86) 100%), url('../img/fondo-agenda-antes.webp') center 35% / cover no-repeat; }
.showcase.is-light.bgp-agenda-resolver { background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(238, 245, 251, .9) 100%), url('../img/fondo-agenda-incluir.webp') center / cover no-repeat; }
.section-dark-alt.bgp-agenda-criterio { background: radial-gradient(640px circle at 90% 10%, rgba(38, 113, 172, .3), transparent 60%), linear-gradient(135deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 55%, rgba(12, 30, 46, .88) 100%), url('../img/fondo-agenda-criterio.webp') center / cover no-repeat; }
.section-dark-alt.bgp-agenda-criterio .note-card { background: rgba(10, 17, 24, .72); }
.limits-split .split-copy .lede + .lede { margin-top: 1rem; }

/* Mensajes y pedidos: tarjetas de «Cómo funciona» opacas en lugar de translúcidas (2026-09-28) */
.method-light.is-dark.steps-solid .mf-step { background-color: #121c26; border-color: rgba(255, 255, 255, .14); }
.method-light.is-dark.steps-solid .method-flow .mf-step.is-lit { background-color: #15314a; }

/* Botón de contacto al final de cada sección (servicios y páginas de ejemplo, 2026-09-28) */
.section-cta { display: flex; margin-top: clamp(2rem, 4vw, 3rem); }
.showcase .container.section-cta::before { content: none; }
.section-cta .btn { gap: .6rem; }
@media (max-width: 620px) { .section-cta .btn { width: 100%; } }
.section-blue .section-cta .btn-primary { color: #123d61; background: #fff; box-shadow: 0 12px 30px rgba(6, 20, 35, .28); }
.section-blue .section-cta .btn-primary:hover { color: #123d61; background: #eaf4fc; }

/* Botones del contenido igual que los de la portada (2026-09-28): mismo tamaño, azul brillante y resplandor.
   Los botones blancos del cierre azul y de las secciones azules conservan su color, con el nuevo tamaño. */
main .btn { min-height: 0; padding: .9rem 2rem; font-size: .95rem; line-height: 1.6; border-radius: 50px; }
main .btn-primary { background: #3095e3; box-shadow: 0 8px 32px rgba(48, 149, 227, .28); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
main .btn-primary:hover { background: #2671ac; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(48, 149, 227, .38); }

/* Datos y documentos: tercera página de ejemplo, con la plantilla aprobada. */
.page-hero.hero-home.hi-datos-documentos::before { background-image: url('../img/servicio-digitalizacion-cabecera.webp'); transform: none; }
.showcase.is-light.bgp-datos-antes { background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(238, 245, 251, .86) 100%), url('../img/servicio-mejora-procesos-seccion.webp') center / cover no-repeat; }
.showcase.is-light.bgp-datos-resolver { background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(238, 245, 251, .9) 100%), url('../img/servicio-soluciones-medida-seccion.webp') center / cover no-repeat; }
.section-dark-alt.bgp-datos-criterio { background: radial-gradient(640px circle at 90% 10%, rgba(38, 113, 172, .3), transparent 60%), linear-gradient(135deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 55%, rgba(12, 30, 46, .88) 100%), url('../img/servicio-digitalizacion-seccion.webp') center / cover no-repeat; }
.section-dark-alt.bgp-datos-criterio .note-card { background: rgba(10, 17, 24, .72); }
.hi-datos-documentos .slot { grid-template-columns: 62px 1fr; }
.hi-datos-documentos .slot > span:first-child { color: #617182; font-weight: 800; }

/* ---------- IA: cuadro «Puede ayudarte / Con revisión tuya / Con precaución» (2026-10-05) ---------- */
.tl-head{max-width:720px;margin:clamp(2.5rem,5vw,4rem) auto clamp(1.5rem,3vw,2.2rem);text-align:center}
.tl-head h2{color:#fff}.tl-head p{color:rgba(255,255,255,.8);margin:.4rem 0 0}
.tl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.tl-col{--c:#8fd19e;border:1px solid rgba(255,255,255,.16);border-top:4px solid var(--c);border-radius:20px;background:rgba(255,255,255,.07);backdrop-filter:blur(6px);padding:1.4rem 1.4rem 1.5rem}
.tl-col.rev{--c:#f2c94c}.tl-col.no{--c:#f08a8a}
.tl-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.tl-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--c);color:#0b2236;font-weight:900;font-size:1.1rem}
.tl-col h3{margin:0;color:#fff;font-size:1.15rem}
.tl-sub{margin:0 0 .9rem;color:rgba(255,255,255,.7);font-size:.92rem}
.tl-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tl-col li{padding-left:1rem;border-left:2px solid var(--c);color:rgba(255,255,255,.88);font-size:.97rem}
.tl-col.card{min-height:0}
@media(max-width:900px){.tl-grid{grid-template-columns:1fr}}

/* ---------- Mejora de procesos: «Una tarea, antes y después» + etiquetas interactivas (2026-10-05) ---------- */
.ba-head{max-width:720px;margin:clamp(2.5rem,5vw,4rem) auto clamp(1.5rem,3vw,2.2rem);text-align:center}
.ba-head h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2rem)}
.ba-head p{color:rgba(255,255,255,.8);margin:.4rem 0 0}
.ba-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.1rem;align-items:start}
.ba-col{--c:#f08a8a;border:1px solid rgba(255,255,255,.16);border-top:4px solid var(--c);border-radius:20px;background:rgba(255,255,255,.07);backdrop-filter:blur(6px);padding:1.4rem 1.4rem 1.5rem}
.ba-col.after{--c:#8fd19e}
.ba-top{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:1rem}
.ba-col h3{margin:0;color:#fff;font-size:1.15rem}
.ba-count{padding:.2rem .65rem;border-radius:999px;background:var(--c);color:#0b2236;font-weight:800;font-size:.8rem}
.ba-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:.55rem}
.ba-steps li{counter-increment:s;position:relative;display:flex;gap:.8rem;align-items:center;padding:.55rem .8rem;border-radius:12px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);font-size:.96rem;transition:background .25s,box-shadow .25s,color .25s}
.ba-steps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#0b2236;font-weight:900;font-size:.8rem}
.ba-steps li.hl{color:#fff;background:rgba(240,138,138,.22);box-shadow:0 0 0 1.5px #f08a8a,0 6px 20px rgba(240,138,138,.3)}
.ba-col:not(.after) .ba-steps li:nth-child(even){margin-left:1.2rem}
.ba-col.after .ba-steps li{padding:.9rem 1rem;font-size:1.02rem}
.ba-rev{text-align:center;margin-top:clamp(2rem,4vw,2.8rem)}
.ba-label,.ba-idea-tag{margin:0 0 .5rem;color:#7fc4f5;font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800;letter-spacing:-.01em;text-transform:none;line-height:1.15}
.ba-hint{margin:0 0 1rem;color:rgba(255,255,255,.72);font-size:.9rem}
.ba-chips{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:1100px}
.ba-chips button{font:inherit;font-size:.92rem;color:rgba(255,255,255,.9);padding:.4rem .85rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,color .25s,transform .25s}
.ba-chips button:hover,.ba-chips button:focus-visible,.ba-chips button[aria-pressed="true"]{color:#fff;border-color:#3095e3;background:rgba(48,149,227,.32);box-shadow:0 0 0 3px rgba(48,149,227,.18),0 8px 26px rgba(48,149,227,.45);transform:translateY(-3px)}
.ba-idea{position:relative;overflow:hidden;max-width:860px;margin:clamp(1.8rem,4vw,2.6rem) auto 0;padding:1.5rem clamp(1.2rem,4vw,2.4rem);border:1px solid rgba(127,196,245,.35);border-radius:22px;text-align:center;background:linear-gradient(135deg,rgba(48,149,227,.28),rgba(27,78,119,.22));box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 40px rgba(48,149,227,.16)}
.ba-idea::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at 50% 0%,rgba(127,196,245,.22),transparent 70%);pointer-events:none}
.ba-idea-tag,.ba-idea p{position:relative}
.ba-idea p{margin:0;color:rgba(255,255,255,.88);font-size:clamp(1.05rem,1.9vw,1.25rem);font-weight:400;line-height:1.45}
@media(prefers-reduced-motion:reduce){.ba-chips button,.ba-steps li{transition:none}.ba-chips button:hover,.ba-chips button[aria-pressed="true"]{transform:none}}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr}}
@media(max-width:620px){.ba-col{padding:1.1rem 1rem 1.2rem}.ba-col:not(.after) .ba-steps li:nth-child(even){margin-left:0}.ba-steps{gap:.4rem}.ba-steps li{padding:.4rem .6rem;font-size:.9rem}.ba-col.after .ba-steps li{padding:.6rem .7rem;font-size:.95rem}}
/* Mejora de procesos: la solución de «Después» se ilumina en verde al elegir una etiqueta (2026-10-05) */
.ba-col.after .ba-steps li.hl{color:#fff;background:rgba(143,209,158,.2);box-shadow:0 0 0 1.5px #8fd19e,0 6px 20px rgba(143,209,158,.3)}
/* Mejora de procesos: ayuda según el dispositivo y panel de resultado en móvil (2026-10-05) */
.ba-hint .hint-touch{display:none}
@media (hover:none),(max-width:620px){.ba-hint .hint-hover{display:none}.ba-hint .hint-touch{display:inline}}
.ba-result{display:none}
@media (max-width:620px){
  .ba-result.is-open{display:grid;gap:.6rem;max-width:520px;margin:1.1rem auto 0;text-align:left}
  .ba-result .res{padding:.8rem 1rem;border-radius:14px;border:1px solid var(--c);background:rgba(255,255,255,.06)}
  .ba-result .res.antes{--c:#f08a8a;background:rgba(240,138,138,.14)}
  .ba-result .res.despues{--c:#8fd19e;background:rgba(143,209,158,.14);animation:baFade .4s ease both}
  .ba-result .res b{display:block;margin-bottom:.25rem;color:var(--c);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
  .ba-result .res p{margin:0 0 .2rem;color:#fff;font-size:.96rem;line-height:1.4}
  .ba-result .res p:last-child{margin:0}
}
@keyframes baFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ba-result .res.despues{animation:none}}

/* ---------- Digitalización: diagrama «Situaciones habituales → Un sitio claro» y escalera «de menos a más» (2026-10-05) ---------- */
.dg-head{max-width:720px;margin:clamp(2.5rem,5vw,4rem) auto clamp(1.5rem,3vw,2.2rem);text-align:center}
.dg-head h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2rem)}.dg-head p{color:rgba(255,255,255,.8);margin:.4rem 0 0;font-size:.95rem}
.dg-head .hint-touch{display:none}
@media (hover:none),(max-width:620px){.dg-head .hint-hover{display:none}.dg-head .hint-touch{display:inline}}
.dg{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) 90px minmax(0,1fr);align-items:center;max-width:1040px;margin:0 auto}
.dg-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.dg-src,.dg-hub,.dg-bus{position:relative;z-index:1}
.dg-lines .base{fill:none;stroke:rgba(255,255,255,.32);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dg-lines .act{fill:none;stroke:#3095e3;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(48,149,227,.95))}
.dg-lines .head{fill:#d6edff;filter:drop-shadow(0 0 8px rgba(48,149,227,1))}
.dg-src{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.dg-src li{position:relative}
.dg-src button{width:100%;text-align:left;font:inherit;font-size:.98rem;color:rgba(255,255,255,.9);padding:.75rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:#0d1822;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,color .25s}
.dg-src li.on button,.dg-src button:hover,.dg-src button:focus-visible{color:#fff;border-color:#3095e3;background:#12304b;box-shadow:0 0 0 3px rgba(48,149,227,.18),0 8px 26px rgba(48,149,227,.4)}
.dg-hub{border:1px solid rgba(127,196,245,.45);border-radius:22px;padding:1.5rem 1.4rem;text-align:center;background:linear-gradient(135deg,#17446b,#10304d);box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 40px rgba(48,149,227,.16);transition:box-shadow .3s,border-color .3s}
.dg.arrive .dg-hub{border-color:#7fc4f5;box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 70px rgba(48,149,227,.6)}
.dg-hub h3{margin:0 0 .3rem;color:#7fc4f5;font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800;line-height:1.15}
.dg-hub p{margin:0 0 1rem;color:rgba(255,255,255,.88)}
.dg-verbs{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;list-style:none;margin:0;padding:0}
.dg-verbs li{padding:.3rem .8rem;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:.9rem;font-weight:700;transition:background .3s,box-shadow .3s,transform .3s}
.dg-verbs li.on{background:#3095e3;box-shadow:0 0 0 3px rgba(48,149,227,.25),0 0 22px rgba(48,149,227,.9);transform:translateY(-2px)}
.mf-caption{margin:0 0 1.4rem;color:#2671ac;font-weight:800;font-size:1.05rem}
.dg-idea{margin-top:clamp(2rem,4vw,2.8rem)}
@media(prefers-reduced-motion:reduce){.dg-src button,.dg-verbs li{transition:none}}
@media(max-width:820px){.dg{grid-template-columns:1fr;row-gap:46px}.dg-bus{display:none}.dg-src{padding-right:32px}}

/* ---------- Soluciones a medida: catálogo con fotos, ejemplo siempre visible y mini-interfaz animada (2026-10-05) ---------- */
.mq-intro{max-width:760px;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.mq-intro h2{color:#fff}.mq-intro .lede{color:rgba(255,255,255,.82)}
.mq-hint{margin:.7rem 0 0;color:#7fc4f5;font-weight:700;font-size:.95rem}
.mq-hint .hint-touch{display:none}
@media (hover:none),(max-width:620px){.mq-hint .hint-hover{display:none}.mq-hint .hint-touch{display:inline}}
.mq-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.mq-card{grid-column:span 2;position:relative;display:flex;flex-direction:column;overflow:hidden}
.mq-card:nth-child(4){grid-column:2 / span 2}.mq-card:nth-child(5){grid-column:4 / span 2}
.showcase .mq-card.card{padding:0;min-height:0}
.showcase .mq-card.card > .mq-play{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:none;border:0;border-radius:20px;cursor:pointer}
.showcase .mq-card.card > .mq-art{flex:none}
.mq-play:focus-visible{outline:3px solid #3095e3;outline-offset:3px}
/* Borde y brillo de mq-card unificados en assets/glass-cards.css. */
.mq-art{height:160px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(48,149,227,.3),rgba(10,24,40,.2));border-bottom:1px solid rgba(255,255,255,.12)}
.mq-body{padding:1.1rem 1.3rem 1.4rem}
.mq-body h3{margin:0 0 .5rem;color:#fff;font-size:1.1rem}
.mq-swap{display:grid}
.mq-swap > *{grid-area:1 / 1;margin:0;transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.mq-short{color:rgba(255,255,255,.78);font-size:.96rem}
.mq-tip{align-self:start;padding:.6rem .8rem;border:1px solid #3095e3;border-radius:12px;background:rgba(48,149,227,.22);color:#fff;font-size:.92rem;line-height:1.35;opacity:0;transform:translateY(10px) scale(.96)}
.mq-tip span{display:block;margin-bottom:.15rem;color:#7fc4f5;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mq-card:hover .mq-short,.mq-card.is-on .mq-short{opacity:0}
.mq-card:hover .mq-tip,.mq-card.is-on .mq-tip{opacity:1;transform:none}
/* ---- mini interfaces con texto simulado ---- */
.ui{position:relative;width:80%;max-width:270px;background:#f7fbff;border-radius:10px;padding:.5rem .65rem .6rem;box-shadow:0 10px 24px rgba(0,0,0,.35);color:#1b4e77;font:600 10px/1.3 Roboto,sans-serif}
.ui-bar{margin:-.5rem -.65rem .45rem;padding:.3rem .65rem;border-radius:10px 10px 0 0;background:#2671ac;color:#fff;font-size:9.5px;letter-spacing:.04em}
.ui label{display:block;margin:.3rem 0 .1rem;color:#5b7c96;font-size:9px;font-weight:700}
.ui .fld{height:20px;padding:0 .4rem;border:1.5px solid #b9d4ea;border-radius:5px;background:#fff;display:flex;align-items:center;overflow:hidden}
.ty{display:inline-block;overflow:hidden;white-space:nowrap;width:0;font:500 10px/1 ui-monospace,Consolas,monospace;color:#1b4e77}
@keyframes ty{to{width:var(--n)}}
/* formulario */
.ui.f .btnx{position:relative;margin-top:.5rem;height:20px;border-radius:999px;background:#2671ac;color:#fff;text-align:center;line-height:20px;font-size:9.5px;font-weight:800;animation:none}
.ui.f .btnx span{position:absolute;inset:0;transition:none}.ui.f .btnx .s2{opacity:0}
.mq-card:hover .f .t1,.mq-card.is-on .f .t1{animation:ty .9s steps(15) forwards}
.mq-card:hover .f .t2,.mq-card.is-on .f .t2{animation:ty 1s steps(17) 1s forwards}
.mq-card:hover .f .btnx,.mq-card.is-on .f .btnx{animation:mqGreen .3s ease-out 2.2s forwards}
.mq-card:hover .f .btnx .s1,.mq-card.is-on .f .btnx .s1{animation:mqOut .1s 2.2s forwards}
.mq-card:hover .f .btnx .s2,.mq-card.is-on .f .btnx .s2{animation:mqIn .1s 2.25s forwards}
@keyframes mqGreen{to{background:#2ea86b}}@keyframes mqOut{to{opacity:0}}@keyframes mqIn{to{opacity:1}}
/* panel */
.ui.p{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.55rem .55rem .6rem;background:transparent;box-shadow:none}
.ptile{position:relative;padding:.4rem .45rem .55rem;border-radius:9px;background:#f7fbff;box-shadow:0 8px 18px rgba(0,0,0,.3);overflow:hidden}
.ptile small{display:block;color:#5b7c96;font-size:8.5px;font-weight:700}
.ptile .num{position:relative;display:block;height:20px;font-size:17px;font-weight:900;line-height:20px;color:#1b4e77}
.ptile .num b{position:absolute;left:0;top:0}.ptile .num .nb{opacity:0}
.ptile i{position:absolute;left:.45rem;bottom:.35rem;height:4px;width:25%;border-radius:2px;background:#2671ac}
.ptile.t2 i{background:#f2c94c}.ptile.t3 i{background:#8fd19e}
.mq-card:hover .ptile .na,.mq-card.is-on .ptile .na{animation:mqOut .2s .8s forwards}
.mq-card:hover .ptile .nb,.mq-card.is-on .ptile .nb{animation:mqIn .2s .8s forwards}
.mq-card:hover .ptile.t1 i,.mq-card.is-on .ptile.t1 i{animation:mqW 1s ease-out .6s forwards;--w:30%}
.mq-card:hover .ptile.t3 i,.mq-card.is-on .ptile.t3 i{animation:mqW 1s ease-out .6s forwards;--w:85%}
@keyframes mqW{to{width:var(--w)}}
/* aplicación interna */
.ui.a{padding:.5rem .65rem}
.ar{display:flex;align-items:center;gap:.45rem;padding:.28rem 0;border-bottom:1px solid #e3eef7}.ar:last-child{border-bottom:0}
.cb{position:relative;flex:none;width:12px;height:12px;border:1.5px solid #8fb3d0;border-radius:3px;background:#fff}
.cb::after{content:"✓";position:absolute;inset:-3px 0 0 0;color:#fff;font-size:10px;line-height:15px;text-align:center;opacity:0}
.ar .tx{color:#1b4e77;font-size:10px}
.mq-card:hover .ar:nth-child(1) .cb,.mq-card.is-on .ar:nth-child(1) .cb{animation:mqChk .2s ease-out .3s forwards}
.mq-card:hover .ar:nth-child(2) .cb,.mq-card.is-on .ar:nth-child(2) .cb{animation:mqChk .2s ease-out 1s forwards}
.mq-card:hover .ar:nth-child(3) .cb,.mq-card.is-on .ar:nth-child(3) .cb{animation:mqChk .2s ease-out 1.7s forwards}
.mq-card:hover .ar:nth-child(1) .tx,.mq-card.is-on .ar:nth-child(1) .tx{animation:mqDim .2s .3s forwards}
.mq-card:hover .ar:nth-child(2) .tx,.mq-card.is-on .ar:nth-child(2) .tx{animation:mqDim .2s 1s forwards}
.mq-card:hover .ar:nth-child(3) .tx,.mq-card.is-on .ar:nth-child(3) .tx{animation:mqDim .2s 1.7s forwards}
@keyframes mqChk{to{background:#2ea86b;border-color:#2ea86b}}
.mq-card:hover .cb::after,.mq-card.is-on .cb::after{animation:mqIn .2s forwards;animation-delay:inherit}
@keyframes mqDim{to{color:#97aec0;text-decoration:line-through}}
/* conexión */
.ui.k{display:flex;align-items:center;gap:.4rem;width:86%;max-width:290px;background:transparent;box-shadow:none;padding:0}
.kn{flex:none;width:76px;padding:.4rem .45rem;border-radius:9px;background:#f7fbff;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.kn small{display:block;color:#5b7c96;font-size:8.5px;font-weight:700}.kn b{display:block;color:#1b4e77;font-size:10.5px}
.kn.kr b{opacity:0}
.kl{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,#3095e3 0 6px,transparent 6px 11px)}
.kl s{position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#bfe3ff;box-shadow:0 0 12px 3px rgba(48,149,227,.95);opacity:0;text-decoration:none}
.mq-card:hover .kl s,.mq-card.is-on .kl s{animation:mqTravel 1.2s ease-in-out forwards}
.mq-card:hover .kn.kr,.mq-card.is-on .kn.kr{animation:mqGlow .5s ease-out 1.15s forwards}
.mq-card:hover .kn.kr b,.mq-card.is-on .kn.kr b{animation:mqIn .3s 1.2s forwards}
@keyframes mqTravel{0%{left:0;opacity:1}100%{left:calc(100% - 11px);opacity:1}}
@keyframes mqGlow{to{box-shadow:0 0 0 2px #3095e3,0 0 22px rgba(48,149,227,.9)}}
/* documento */
.ui.d .dl{margin:.12rem 0;overflow:hidden}
.ui.d .dl span{display:inline-block;overflow:hidden;white-space:nowrap;width:0;font:500 9.5px/1.4 ui-monospace,Consolas,monospace;color:#1b4e77;vertical-align:top}
.ui.d .dl.tt span{font-weight:800}
.ui.d .ready{position:absolute;right:8px;bottom:6px;padding:.1rem .5rem;border-radius:999px;background:#2ea86b;color:#fff;font-size:9px;font-weight:800;opacity:0;transform:scale(.6)}
.mq-card:hover .d .l1 span,.mq-card.is-on .d .l1 span{animation:ty .8s steps(21) forwards;--n:22ch}
.mq-card:hover .d .l2 span,.mq-card.is-on .d .l2 span{animation:ty .8s steps(25) .8s forwards;--n:26ch}
.mq-card:hover .d .l3 span,.mq-card.is-on .d .l3 span{animation:ty .6s steps(14) 1.6s forwards;--n:16ch}
.mq-card:hover .d .ready,.mq-card.is-on .d .ready{animation:mqPop .3s ease-out 2.3s forwards}
@keyframes mqPop{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ty,.ui.d .dl span{width:var(--n)}
  .ui.d .ready{opacity:1;transform:none}
  .mq-card:hover *,.mq-card.is-on *{animation:none !important}
  .mq-swap > *{transition:none}
}

/* ---- fotos reales con la mini-interfaz animada encima ---- */
.showcase .mq-card.card > .mq-art{position:relative;overflow:hidden;background:#0d1822}
.mq-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mq-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,28,.3),rgba(6,16,28,.7));opacity:0;transition:opacity .4s;pointer-events:none}
.mq-card:hover .mq-photo,.mq-card.is-on .mq-photo{transform:scale(1.08)}
.mq-card:hover .mq-art::after,.mq-card.is-on .mq-art::after{opacity:1}
.mq-art .ui{position:relative;z-index:2;opacity:0;transform:translateY(10px) scale(.94);transition:opacity .35s ease,transform .35s ease}
.mq-card:hover .mq-art .ui,.mq-card.is-on .mq-art .ui{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mq-photo,.mq-art::after,.mq-art .ui{transition:none}.mq-card:hover .mq-photo,.mq-card.is-on .mq-photo{transform:none}}

/* ---- v4: ejemplo siempre visible, interfaz pequeña en la esquina, sin huecos ---- */
.mq-swap{display:block}
.mq-swap > *{grid-area:auto;transition:background .3s,border-color .3s,box-shadow .3s}
.mq-card:hover .mq-short,.mq-card.is-on .mq-short{opacity:1}
.mq-tip{position:static;opacity:1;transform:none;margin:.7rem 0 0;padding:.55rem .75rem;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.88);font-size:.9rem;line-height:1.35}
.mq-card:hover .mq-tip,.mq-card.is-on .mq-tip{border-color:#3095e3;background:rgba(48,149,227,.24);box-shadow:0 0 18px rgba(48,149,227,.25)}
.mq-body{flex:1;padding-bottom:1.2rem}
.mq-art .ui{position:absolute;right:10px;bottom:10px;z-index:2;width:78%;max-width:270px;transform-origin:bottom right;transform:translateY(8px) scale(.5)}
.mq-card:hover .mq-art .ui,.mq-card.is-on .mq-art .ui{transform:scale(.64)}
.mq-art .ui.p,.mq-art .ui.k{padding:.45rem;border-radius:12px;background:rgba(6,16,28,.7);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.mq-card:hover .mq-art::after,.mq-card.is-on .mq-art::after{opacity:.55}
@media(prefers-reduced-motion:reduce){.mq-art .ui{transform:scale(.64)}}
.mq-note{max-width:760px;margin:1.6rem auto 0;text-align:center;color:rgba(255,255,255,.62);font-size:.88rem}
.mq-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:clamp(2.5rem,5vw,4rem)}
.mq-split .section-photo{margin:0}
@media(max-width:900px){.mq-grid{grid-template-columns:1fr 1fr}.mq-card,.mq-card:nth-child(4),.mq-card:nth-child(5){grid-column:auto}.mq-card:nth-child(5){grid-column:1 / -1}.mq-split{grid-template-columns:1fr}}
@media(max-width:560px){.mq-grid{grid-template-columns:1fr}.mq-card:nth-child(5){grid-column:auto}}

/* ---------- Formación en IA: formatos con personas, «Para quién» y píldoras de contenido (2026-10-05) ---------- */
.fm-head{max-width:720px;margin:clamp(2.5rem,5vw,4rem) auto clamp(1.5rem,3vw,2.2rem);text-align:center}
.fm-head h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2rem)}.fm-head p{color:rgba(255,255,255,.8);margin:.4rem 0 0}
.fm-people{display:flex;align-items:flex-end;justify-content:center;gap:.4rem;height:58px;margin:.2rem 0 .9rem}
.fm-people i{position:relative;display:block;width:22px;height:34px;border-radius:11px 11px 4px 4px;background:rgba(255,255,255,.28);transition:background .3s,transform .3s,box-shadow .3s}
.fm-people i::before{content:"";position:absolute;left:50%;top:-14px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:inherit}
.fm-people i.me{background:#3095e3;box-shadow:0 0 14px rgba(48,149,227,.7)}
.fm-people .board{width:64px;height:40px;border-radius:6px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);margin-right:.5rem}
.fm-people .board::before{display:none}
.fm-people .board::after{content:"";position:absolute;left:8px;right:12px;top:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.55);box-shadow:0 9px 0 rgba(255,255,255,.4),0 18px 0 rgba(255,255,255,.28)}
.showcase .card:hover .fm-people i:not(.board),.fm-people.on i:not(.board){background:#3095e3;transform:translateY(-4px)}
.showcase .card:hover .fm-people i:nth-child(2){transition-delay:.08s}.showcase .card:hover .fm-people i:nth-child(3){transition-delay:.16s}.showcase .card:hover .fm-people i:nth-child(4){transition-delay:.24s}
.fm-who{margin-top:clamp(2rem,4vw,2.8rem)}
@media(prefers-reduced-motion:reduce){.fm-people i,.fm-topics li{transition:none}}
/* Formación en IA: tarjetas de formatos en cristal azulado (2026-10-05) */
.showcase .fm-cards .card{border:1px solid rgba(160,214,250,.5);background:linear-gradient(160deg,rgba(48,149,227,.52),rgba(31,98,160,.38) 55%,rgba(21,66,108,.46));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 34px rgba(48,149,227,.14),inset 0 1px 0 rgba(255,255,255,.28)}
.showcase .fm-cards .card p{color:rgba(255,255,255,.86)}
.showcase .fm-cards .card .card-num{-webkit-text-stroke-color:rgba(255,255,255,.26)}
.showcase .fm-cards .card .fm-people i:not(.me){background:rgba(255,255,255,.7)}
.showcase .fm-cards .card .fm-people .board{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55)}
.showcase .fm-cards .card:hover,.showcase .fm-cards .card.is-active{border-color:rgba(127,196,245,.7);box-shadow:0 26px 60px rgba(0,0,0,.4),0 0 44px rgba(48,149,227,.34),inset 0 1px 0 rgba(255,255,255,.4)}
/* Formación en IA: los muñecos se vuelven azules uno tras otro al pasar el cursor por la tarjeta (2026-10-05) */
.showcase .fm-cards .card .fm-people i{transition:background .35s ease,transform .35s ease,box-shadow .35s ease}
.showcase .fm-cards .card:hover .fm-people i:not(.board),.showcase .fm-cards .card.is-active .fm-people i:not(.board){background:#3095e3;transform:translateY(-4px);box-shadow:0 0 14px rgba(48,149,227,.8)}
.showcase .fm-cards .card:hover .fm-people i:nth-child(2),.showcase .fm-cards .card.is-active .fm-people i:nth-child(2){transition-delay:.15s}
.showcase .fm-cards .card:hover .fm-people i:nth-child(3),.showcase .fm-cards .card.is-active .fm-people i:nth-child(3){transition-delay:.3s}
.showcase .fm-cards .card:hover .fm-people i:nth-child(4),.showcase .fm-cards .card.is-active .fm-people i:nth-child(4){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){.showcase .fm-cards .card .fm-people i{transition:none !important}}
/* Formación en IA: el perfil de las letras 1:1 / EQ / TA se ilumina al pasar el cursor, pulsar o tocar la tarjeta (2026-10-05) */
.showcase .fm-cards .card .card-num{transition:-webkit-text-stroke-color .3s ease,filter .3s ease,transform .3s ease}
.showcase .fm-cards .card:hover .card-num,.showcase .fm-cards .card:active .card-num,.showcase .fm-cards .card.is-active .card-num,.showcase .fm-cards .card.is-lit .card-num{-webkit-text-stroke:1.6px #bfe3ff;-webkit-text-stroke-color:#bfe3ff;filter:drop-shadow(0 0 5px rgba(127,196,245,.95)) drop-shadow(0 0 14px rgba(48,149,227,.8));transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){.showcase .fm-cards .card .card-num{transition:none}}
/* Formación en IA: mapa método-temas, los temas se iluminan con su paso y al revés (2026-10-05) */
/* Formación en IA: demostrador «De una tarea a una primera solución» y banner doble (2026-10-05) */
.fm-demo-wrap{margin-top:clamp(2.2rem,4vw,3rem)}
.fm-demo-hint{margin:.5rem 0 0;color:#7fc4f5;font-weight:700;font-size:.95rem}
.fm-demo-hint .hint-touch{display:none}
@media (hover:none),(max-width:620px){.fm-demo-hint .hint-hover{display:none}.fm-demo-hint .hint-touch{display:inline}}
.fm-tasks{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 auto 1.6rem;padding:0;max-width:900px}
.fm-tasks button{all:unset;box-sizing:border-box;cursor:pointer;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.9);font:600 .94rem/1.2 Roboto,sans-serif;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.fm-tasks button:hover,.fm-tasks button:focus-visible{border-color:#3095e3;background:rgba(48,149,227,.3);transform:translateY(-2px)}
.fm-tasks button:focus-visible{outline:3px solid #7fc4f5;outline-offset:2px}
.fm-tasks button[aria-pressed="true"]{color:#fff;border-color:#7fc4f5;background:#2671ac;box-shadow:0 0 0 3px rgba(48,149,227,.25),0 8px 24px rgba(48,149,227,.45)}
@keyframes fmIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fmFade{from{opacity:0}to{opacity:1}}
/* Formación en IA: «Qué trabajamos» con panel explicativo en la sección oscura (2026-10-05) */
.fm-topic{display:flex;gap:1.1rem;align-items:flex-start;max-width:760px;margin:0 auto;padding:1.4rem clamp(1.1rem,3vw,1.8rem);border:1px solid rgba(127,196,245,.45);border-radius:20px;background:linear-gradient(135deg,rgba(48,149,227,.34),rgba(27,78,119,.26));box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 36px rgba(48,149,227,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.fm-topic-num{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1b4e77,#3095e3);color:#fff;font-weight:900;box-shadow:0 0 18px rgba(48,149,227,.6)}
.fm-topic-t{margin:0 0 .4rem;color:#7fc4f5;font-size:clamp(1.2rem,2.3vw,1.5rem);font-weight:800;line-height:1.2}
.fm-topic-p{margin:0;color:rgba(255,255,255,.92);font-size:clamp(1rem,1.7vw,1.1rem);line-height:1.5}
.fm-topic.swap{animation:fmFade .35s ease both}
@media(prefers-reduced-motion:reduce){.fm-topic.swap{animation:none}}
/* Formación en IA: temas por ratón o dedo (2026-10-05) */
.fm-tasks{touch-action:pan-y}
.fm-topic{min-height:8.4rem;align-items:flex-start}
@media(max-width:620px){.fm-topic{min-height:11.5rem}}
/* Formación en IA: «Lo que te llevas» bajo los pasos del método, en la sección clara (2026-10-05) */
.fm-takeaway-l{max-width:860px;margin:clamp(2rem,4vw,2.8rem) auto 0;padding:1.5rem clamp(1.2rem,4vw,2.4rem);border:1px solid rgba(127,196,245,.5);border-radius:22px;text-align:center;background:linear-gradient(135deg,#17446b,#10304d);box-shadow:0 18px 44px rgba(5,25,45,.28)}
.fm-takeaway-l h3{margin:0 0 .5rem;color:#7fc4f5;font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:800;line-height:1.15}
.fm-takeaway-l p{margin:0;color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.45}
.fm-who{margin-top:clamp(2.2rem,4vw,3rem)}
/* Formación en IA: en móvil, los temas forman una tira horizontal con flechas; el tema centrado se activa solo (2026-10-05) */
.fm-strip{position:relative}
.fm-nav{display:none}
@media (max-width:620px){
  .fm-strip{margin:0 -1rem 1rem}
  .fm-strip .fm-tasks{flex-wrap:nowrap;justify-content:flex-start;gap:.7rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0;padding:.5rem 3.2rem;max-width:none;scrollbar-width:none;touch-action:pan-x pan-y}
  .fm-strip .fm-tasks::-webkit-scrollbar{display:none}
  .fm-strip .fm-tasks li{flex:0 0 74%;scroll-snap-align:center}
  .fm-strip .fm-tasks button{display:block;width:100%;text-align:center;padding:.8rem 1rem;border-radius:18px;line-height:1.3}
  .fm-nav{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-19px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(10,24,40,.82);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .25s ease}
  .fm-prev{left:6px}.fm-next{right:6px}
  .fm-nav:disabled{opacity:.25;cursor:default}
  .fm-nav.nudge:not(:disabled){animation:fmNudge 1.2s ease-in-out 3}
}
@keyframes fmNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.fm-nav.nudge{animation:none}}

/* ---------- Ejemplos con vídeo en Servicios: «¿Se parece a tu caso?» (2026-10-12) ---------- */
.cases { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cases-head { gap: .4rem; margin-bottom: 1.8rem; }
.cases-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.showcase .case-card { padding: 0; gap: 0; min-height: 0; }
.case-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b1520; }
.case-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(.85) brightness(.82); transform: scale(1.02); transition: filter .5s ease, transform 1.2s ease; }
.case-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,20,35,0) 45%, rgba(5,20,35,.75)); pointer-events: none; }
.case-tag { position: absolute; z-index: 2; left: .9rem; bottom: .8rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(38,113,172,.85); border: 1px solid rgba(160,214,250,.55); }
.case-play { position: absolute; z-index: 2; top: .8rem; right: .8rem; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .3s ease; }
.case-play::before { content: ""; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.case-card.is-playing .case-media video { filter: none; transform: scale(1.06); }
.case-card.is-playing .case-play { opacity: 0; }
.case-body { display: flex; flex-direction: column; gap: .7rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.case-body h3 { font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .case-play { display: none; } .case-media video { filter: none; transform: none; transition: none; } }

/* Agenda y recordatorios: Lucía sigue el hilo del vídeo de Servicios (2026-10-15). Fotos de Kampus Production (Pexels).
   Tarjeta con su foto en la cabecera y fondos con velo más claro en el lado donde está ella. */
.hero-visual { position: relative; justify-self: center; }
.story-photo { position: absolute; z-index: 5; top: 168px; right: -110px; width: 210px; margin: 0; border-radius: 16px; overflow: hidden; background: #0b1520; border: 3px solid #fff; box-shadow: 0 24px 50px rgba(27, 78, 119, .32); transform: rotate(3deg); }
.story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.story-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,20,35,0) 50%, rgba(5,20,35,.65)); pointer-events: none; }
.story-photo .case-tag { left: .6rem; bottom: .55rem; font-size: .74rem; }
.motion-ready [data-motion] .page-hero .story-photo { opacity: 0; animation: mvPhone 1s .6s cubic-bezier(.2,.7,.2,1) forwards; }
/* Entre 901 y 1199 px no hay hueco a los lados del móvil: la foto va encima, en el flujo, sin invadir el texto */
@media (min-width: 901px) and (max-width: 1199px) { .story-photo { position: relative; top: auto; right: auto; width: 260px; margin: 0 auto 1.4rem; } .hero-visual .demo-phone { margin-inline: auto; } }
@media (max-width: 900px) {
  .hero-visual { width: 100%; max-width: 340px; }
  .story-photo { position: relative; top: auto; right: auto; width: 100%; margin: 0 auto 1.6rem; transform: none; }
  .hero-visual .demo-phone { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .story-photo { transform: none; } }
.showcase.is-light.bgp-agenda-antes { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .93) 45%, rgba(238, 245, 251, .5) 100%), url('../img/fondo-agenda-lucia-problema.webp') right 30% / cover no-repeat; }
.method-light.is-dark.bgp-agenda-recepcion { background: linear-gradient(90deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 40%, rgba(12, 30, 46, .55) 100%), url('../img/fondo-agenda-lucia-recepcion.webp') center 35% / cover no-repeat; }
.showcase.is-light.bgp-agenda-resolver { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .93) 45%, rgba(238, 245, 251, .55) 100%), url('../img/fondo-agenda-movil-calendario.webp') right center / cover no-repeat; }
.section-dark-alt.bgp-agenda-criterio { background: linear-gradient(90deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 40%, rgba(12, 30, 46, .55) 100%), url('../img/fondo-agenda-lucia-criterio.webp') center 25% / cover no-repeat; }
@media (max-width: 900px) {
  .showcase.is-light.bgp-agenda-antes { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 245, 251, .9)), url('../img/fondo-agenda-lucia-problema.webp') 75% 30% / cover no-repeat; }
  .showcase.is-light.bgp-agenda-resolver { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 245, 251, .9)), url('../img/fondo-agenda-movil-calendario.webp') center / cover no-repeat; }
  .method-light.is-dark.bgp-agenda-recepcion { background: linear-gradient(180deg, rgba(10, 17, 24, .9), rgba(12, 30, 46, .84)), url('../img/fondo-agenda-lucia-recepcion.webp') 60% 35% / cover no-repeat; }
  .section-dark-alt.bgp-agenda-criterio { background: linear-gradient(180deg, rgba(10, 17, 24, .9), rgba(12, 30, 46, .84)), url('../img/fondo-agenda-lucia-criterio.webp') 55% 25% / cover no-repeat; }
}

/* Mensajes y pedidos (Carmen, Amina Filkins) y Datos y documentos (Raúl, RDNE Stock project): mismo hilo que Agenda (2026-10-15) */
.story-carmen .showcase.is-light.bgp-antes { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .93) 45%, rgba(238, 245, 251, .5) 100%), url('../img/fondo-mensajes-carmen-problema.webp') right 35% / cover no-repeat; }
.story-carmen .method-light.is-dark { background: linear-gradient(90deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 40%, rgba(12, 30, 46, .55) 100%), url('../img/fondo-mensajes-carmen-escribe.webp') center 30% / cover no-repeat; }
.story-carmen .showcase.is-light.bgp-resolver { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .93) 45%, rgba(238, 245, 251, .5) 100%), url('../img/fondo-mensajes-movil-manos.webp') center / cover no-repeat; }
.story-carmen .section-dark-alt.bgp-criterio { background: linear-gradient(90deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 40%, rgba(12, 30, 46, .55) 100%), url('../img/fondo-mensajes-carmen-criterio.webp') center 35% / cover no-repeat; }
@media (max-width: 900px) {
  .story-carmen .showcase.is-light.bgp-antes { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 245, 251, .9)), url('../img/fondo-mensajes-carmen-problema.webp') right 35% / cover no-repeat; }
  .story-carmen .method-light.is-dark { background: linear-gradient(180deg, rgba(10, 17, 24, .9), rgba(12, 30, 46, .84)), url('../img/fondo-mensajes-carmen-escribe.webp') center 30% / cover no-repeat; }
  .story-carmen .showcase.is-light.bgp-resolver { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 245, 251, .9)), url('../img/fondo-mensajes-movil-manos.webp') center / cover no-repeat; }
  .story-carmen .section-dark-alt.bgp-criterio { background: linear-gradient(180deg, rgba(10, 17, 24, .9), rgba(12, 30, 46, .84)), url('../img/fondo-mensajes-carmen-criterio.webp') center 35% / cover no-repeat; }
}
.story-raul .showcase.is-light.bgp-datos-antes { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .93) 45%, rgba(238, 245, 251, .5) 100%), url('../img/fondo-datos-raul-problema.webp') right 30% / cover no-repeat; }
.story-raul .method-light.is-dark { background: linear-gradient(90deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 40%, rgba(12, 30, 46, .55) 100%), url('../img/fondo-datos-raul-termina.webp') center 30% / cover no-repeat; }
.story-raul .showcase.is-light.bgp-datos-resolver { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .93) 45%, rgba(238, 245, 251, .5) 100%), url('../img/fondo-datos-parte-manos.webp') center / cover no-repeat; }
.story-raul .section-dark-alt.bgp-datos-criterio { background: linear-gradient(90deg, rgba(10, 17, 24, .95) 0%, rgba(10, 17, 24, .9) 40%, rgba(12, 30, 46, .55) 100%), url('../img/fondo-datos-raul-criterio.webp') right 30% / cover no-repeat; }
@media (max-width: 900px) {
  .story-raul .showcase.is-light.bgp-datos-antes { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 245, 251, .9)), url('../img/fondo-datos-raul-problema.webp') right 30% / cover no-repeat; }
  .story-raul .method-light.is-dark { background: linear-gradient(180deg, rgba(10, 17, 24, .9), rgba(12, 30, 46, .84)), url('../img/fondo-datos-raul-termina.webp') center 30% / cover no-repeat; }
  .story-raul .showcase.is-light.bgp-datos-resolver { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(238, 245, 251, .9)), url('../img/fondo-datos-parte-manos.webp') center / cover no-repeat; }
  .story-raul .section-dark-alt.bgp-datos-criterio { background: linear-gradient(180deg, rgba(10, 17, 24, .9), rgba(12, 30, 46, .84)), url('../img/fondo-datos-raul-criterio.webp') right 30% / cover no-repeat; }
}

/* Contraste sobre los fondos con foto (revisión del árbitro, 2026-10-15) */
:is(.story-lucia, .story-carmen, .story-raul) .showcase.is-light .eyebrow { color: #1b4e77; }

/* Pautas de Vercel (2026-10-16): las anclas no quedan bajo el menú fijo y los títulos reparten mejor sus líneas */
html { scroll-padding-top: 104px; }
h1, h2, h3 { text-wrap: balance; }


/* Conóceme con toque cristal (aprobado por Damián 2026-10-23): paneles y tarjetas de cristal,
   fondos ilustrados de Codex difuminados (cabecera y cierre) y símbolo original en cristal mediante máscara. */
.about-page .about-lead, .about-page .about-relato { position: relative; isolation: isolate; }
.about-page .about-lead::before, .about-page .about-relato::before { content: ""; position: absolute; inset: -1.25rem; z-index: -1; border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(7,32,52,.34); border: 1px solid rgba(189,228,255,.13); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(189,228,255,.18), 0 18px 50px rgba(0,0,0,.16); pointer-events: none; }
.about-page .about-retrato > img { border-color: rgba(192,229,255,.6); box-shadow: 0 28px 64px rgba(0,0,0,.45), 0 0 0 6px rgba(180,222,250,.09), 0 0 40px rgba(48,149,227,.22); }
.about-page .about-zona > img { border-color: rgba(192,229,255,.5); box-shadow: 0 22px 52px rgba(0,0,0,.38), 0 0 30px rgba(48,149,227,.14); }
.about-page .logro, .about-page .formacion-panel { border-color: rgba(255,255,255,.9); background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%), linear-gradient(145deg, rgba(255,255,255,.92), rgba(232,243,251,.78)); box-shadow: 0 16px 40px rgba(27,78,119,.10), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(38,113,172,.06); }
.about-page .about-cta::after { background: linear-gradient(125deg, rgba(237,248,255,.85), rgba(48,149,227,.2) 34%, rgba(166,220,255,.8) 60%, rgba(38,113,172,.35)); -webkit-mask: url('../img/simbolo-damiasolve.png') center / contain no-repeat; mask: url('../img/simbolo-damiasolve.png') center / contain no-repeat; filter: drop-shadow(0 0 16px rgba(48,149,227,.55)); opacity: .4; z-index: 1; }
.about-page .about-hero-v2::before { background-image: linear-gradient(90deg, rgba(3,7,10,.82) 0%, rgba(3,7,10,.62) 55%, rgba(3,7,10,.5) 100%), url('../img/fondo-conoceme-cabecera-cristal.webp'); background-size: cover; background-position: right center; opacity: 1; filter: blur(4px); transform: scale(1.04); }
.about-page .page-hero.about-hero::after { display: none; }
.about-page .about-relato::before { background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(5,22,38,.6); }
.about-page .about-cta::before { background: radial-gradient(ellipse 48% 62% at 50% 52%, rgba(4,16,28,.5), rgba(4,16,28,0) 100%), linear-gradient(90deg, rgba(3,7,10,.82) 0%, rgba(3,7,10,.62) 55%, rgba(3,7,10,.5) 100%), url('../img/fondo-conoceme-cierre-cristal.webp') center / cover no-repeat; opacity: 1; filter: blur(4px); transform: scale(1.04); }
@media (max-width: 900px) { .about-page .about-lead, .about-page .about-relato { padding: .5rem; } .about-page .about-lead::before, .about-page .about-relato::before { inset: -.55rem; border-radius: 18px; } .about-page .about-cta::after { opacity: .15; } }


/* Ideas útiles con el formato de Servicios (2026-10-24): índice en escaparate oscuro con tarjetas
   de cristal azul y cierre corporativo; artículo con cabecera oscura y lectura en sección clara. */
.showcase .article-list { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; }
.showcase .article-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); color: #fff; border: 1px solid var(--glass-card-border, rgba(160,214,250,.5)); background: var(--glass-card-background, rgba(31,98,160,.4)); box-shadow: var(--glass-card-shadow, 0 20px 50px rgba(0,0,0,.35)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.showcase .article-card img { height: 100%; aspect-ratio: auto; min-height: 260px; }
.showcase .article-card .body { align-content: center; padding: clamp(1.4rem, 3vw, 2.2rem); }
.showcase .article-card p { color: rgba(255,255,255,.86); }
.showcase .article-card .eyebrow { color: #bfe3ff; }
.showcase .article-card .text-link { color: #fff; }
.showcase .article-list > .card { min-height: 0; }
.showcase .article-list > .card .text-link { color: #fff; }
@media (max-width: 900px) {
  .showcase .article-list { grid-template-columns: 1fr; }
  .showcase .article-card { grid-template-columns: 1fr; }
  .showcase .article-card img { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
.method-light .article .callout-cta { position: relative; overflow: hidden; isolation: isolate; margin: 2.6rem 0 0; padding: clamp(1.6rem, 4vw, 2.4rem); color: #fff; border-radius: 24px; background: linear-gradient(135deg, #1b4e77 0%, #215f96 55%, #2466a0 100%); box-shadow: 0 24px 60px rgba(6,24,40,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.method-light .article .callout-cta p { color: #fff; }
.method-light .article .callout-cta h3 { margin-top: 0; }
.method-light .article .callout:not(.callout-cta) { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); box-shadow: 0 10px 30px rgba(6,6,6,.05); }
.method-light .article .callout-cta .btn-primary { color: #123d61; background: #fff; box-shadow: 0 12px 30px rgba(6,20,35,.28); }
.method-light .article .callout-cta .btn-primary:hover { color: #123d61; background: #eaf4fc; }
.method-light .article { width: min(820px, calc(100% - 3rem)); }
@media (max-width: 620px) { .method-light .article { width: calc(100% - 2rem); } }
.method-light .article > .eyebrow { color: var(--blue); font-size: .82rem; }

/* Botones principales: azul #2671ac con acabado cristal quieto (2026-10-24). El destello en movimiento sigue solo en el cierre. */
.btn-primary { position: relative; isolation: isolate; }
.btn-primary::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 2px; height: 36%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
main .btn-primary, .header-cta .btn-primary, .site-nav .nav-cta-mob .btn-primary { color: #fff; background-color: #2671ac; border-color: rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 6px rgba(10, 40, 70, .28), 0 8px 24px rgba(38, 113, 172, .32); }
main .btn-primary:hover, .header-cta .btn-primary:hover, .site-nav .nav-cta-mob .btn-primary:hover { background-color: #1e5e91; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(10, 40, 70, .3), 0 12px 32px rgba(38, 113, 172, .45), 0 0 0 4px rgba(159, 212, 250, .18); }
.cta-band.cta-brand .btn-primary, .section-blue .section-cta .btn-primary, .method-light .article .callout-cta .btn-primary { border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(18, 61, 97, .12), 0 12px 30px rgba(6, 20, 35, .28); }
.header-cta .btn-primary { border: 1px solid rgba(255, 255, 255, .22); }
.about-cta .btn-primary::after { display: none; }

/* Conóceme: tarjetas de logros en deslizador en móvil (2026-10-24) */
@media (max-width: 620px) {
  [data-motion] .logros-grid.card-grid { grid-template-columns: none; }
  [data-motion] .logros-grid.card-grid .card { flex-basis: 82%; min-height: 0; }
}

/* Formación en IA: el título de cada formato va en la esquina superior derecha, en blanco grande, y brilla como las antiguas siglas (2026-10-24) */
.showcase .fm-cards .card { position: relative; }
.showcase .fm-cards .card h3 { position: absolute; top: 1.55rem; right: 1.4rem; max-width: 58%; margin: 0; text-align: right; font-size: 1.75rem; font-weight: 900; line-height: 1.15; letter-spacing: -.02em; color: #fff; transition: color .3s ease, text-shadow .3s ease, transform .3s ease; }
.showcase .fm-cards .card:is(:hover, :focus-within, :active, .is-active, .is-lit) h3 { color: #e6f4ff; text-shadow: 0 0 5px rgba(127,196,245,.95), 0 0 14px rgba(48,149,227,.8); transform: translateY(4px); }
@media (prefers-reduced-motion: reduce) { .showcase .fm-cards .card h3 { transition: none; } .showcase .fm-cards .card:is(:hover, :focus-within, :active, .is-active, .is-lit) h3 { transform: none; } }