/* WITEDUCA — hoja de estilos del sitio.
   Sistema de diseño de W-IT: azul #1B3A50, verde #54BA00 / #3E8A00, Segoe UI. */

:root {
  --navy: #1B3A50;
  --navy-deep: #14293A;
  --green: #54BA00;
  --green-dark: #3E8A00;
  --green-soft: #F0F9E4;
  --green-mid: #A8D97C;
  --blue-soft: #EEF4F8;
  --ink: #242424;
  --muted: #616161;
  --muted-2: #9E9E9E;
  --line: #E0E0E0;
  --line-soft: #EBEBEB;
  --bg-soft: #FAFAFA;
  --error: #C4314B;
  --error-bg: #FDF3F4;
  --error-line: #F3C9CE;
  --error-ink: #8E2239;
  --max: 1160px;
  --pad: 48px;
  --ease: cubic-bezier(0.33, 0, 0.67, 1);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.10), 0 0 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 16px rgba(0,0,0,.10), 0 0 2px rgba(0,0,0,.06);
}
@media (max-width: 900px) { :root { --pad: 24px; } }
@media (max-width: 600px) { :root { --pad: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
/* El [hidden] del navegador pierde ante cualquier clase que fije display.
   Con esto, poner el atributo hidden siempre oculta de verdad. La unica
   excepcion, el panel del menu sin JavaScript, se declara con !important. */
[hidden] { display: none !important; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { color: var(--green); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--navy); text-wrap: balance; }
.h-display { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; }
.h-page { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1.1; }
.h-section { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.01em; }
.h-line { font-size: clamp(24px, 3vw, 34px); }
.h-card { font-size: 20px; }
.lead { margin: 0; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--muted); max-width: 54ch; text-wrap: pretty; }
.text { margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.text-sm { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.eyebrow--green { color: var(--green); }
.rule { height: 4px; width: 64px; background: var(--green); border-radius: 2px; }
.accent { color: var(--green); }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 56px; }

.on-dark h1, .on-dark h2, .on-dark h3 { color: #FFFFFF; }
.on-dark .lead, .on-dark .text, .on-dark .text-sm { color: rgba(255,255,255,0.78); }
.on-dark .eyebrow { color: rgba(255,255,255,0.6); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; }
.section { padding: 110px var(--pad); }
.section--tight { padding: 90px var(--pad); }
.section--soft { background: var(--bg-soft); border-top: 1px solid var(--line-soft); }
.section--navy { background: var(--navy); position: relative; overflow: hidden; }
.section--navy > .wrap { position: relative; }
.dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
@media (max-width: 900px) { .section, .section--tight { padding: 72px var(--pad); } }
@media (max-width: 600px) { .section, .section--tight { padding: 56px var(--pad); } }

.grid { display: grid; gap: 24px; }
.grid--split { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.grid--split-wide { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); }
@media (max-width: 900px) {
  .grid--split, .grid--split-wide, .grid--2 { grid-template-columns: 1fr; gap: 32px; }
}

.row-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn { display: inline-block; padding: 15px 34px; border-radius: 8px; font-size: 17px; font-weight: 600; line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms, transform 200ms; }
.btn--sm { padding: 12px 28px; font-size: 15px; }
.btn--green { background: var(--green); color: #FFFFFF; box-shadow: var(--shadow-sm); }
.btn--green:hover { background: var(--green-dark); color: #FFFFFF; transform: translateY(-2px); }
.on-dark .btn--green:hover { background: #FFFFFF; color: var(--navy); }
.btn--navy { background: var(--navy); color: #FFFFFF; }
.btn--navy:hover { background: var(--green-dark); color: #FFFFFF; }
.btn--outline { background: #FFFFFF; color: var(--navy); border-color: var(--line); }
.btn--outline:hover { color: var(--navy); border-color: var(--navy); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.35); }
.btn--ghost:hover { color: #FFFFFF; border-color: var(--green); }
.link-more { font-size: 16px; font-weight: 600; color: var(--green-dark); }
@media (max-width: 600px) { .btn { width: 100%; text-align: center; } .btn--sm { width: auto; } }

/* ---------- Navegación ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad); background: rgba(255,255,255,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); }
.nav__brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-right: auto; }
.nav__logo { height: 52px; width: auto; }
.nav__tag { padding-left: 16px; border-left: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.nav__partner { height: 76px; width: auto; margin-left: 12px; }
.nav__flags { display: inline-flex; align-items: center; gap: 5px; opacity: 0.75; }
.nav__flags img { width: 16px; height: 11px; border-radius: 2px; display: block; }
.nav__links { display: flex; align-items: center; gap: 28px; font-size: 15px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.nav__links a { color: var(--navy); }
.nav__links a:hover { color: var(--green-dark); }
.nav__links a[aria-current="page"] { color: var(--green-dark); font-weight: 600; }
.nav__cta, .nav__links a.nav__cta { display: inline-block; padding: 9px 22px; background: var(--navy); color: #FFFFFF; border-radius: 8px; font-weight: 600; transition: background 200ms; }
.nav__links a.nav__cta { margin-left: 18px; }
.nav__cta:hover, .nav__links a.nav__cta:hover { background: var(--green-dark); color: #FFFFFF; }
.nav__links a.nav__cta[aria-current="page"] { background: var(--green-dark); color: #FFFFFF; }
.nav__group { position: relative; }
.nav__btn { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: inherit; font-size: inherit; color: var(--navy); cursor: pointer; }
.nav__btn::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease); }
.nav__btn:hover { color: var(--green-dark); }
.nav__btn[aria-expanded="true"] { color: var(--green-dark); }
.nav__btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.nav__group--current > .nav__btn { color: var(--green-dark); font-weight: 600; }
.nav__panel { position: absolute; top: calc(100% + 18px); left: -14px; z-index: 10; min-width: 262px; padding: 10px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); }
.nav__panel-t { margin: 4px 14px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.nav__panel ul { margin: 0; padding: 0; list-style: none; }
.nav__panel a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--navy); white-space: nowrap; }
.nav__panel a:hover { background: var(--bg-soft); color: var(--green-dark); }
.nav__panel a[aria-current="page"] { background: var(--green-soft); color: var(--green-dark); font-weight: 600; }
/* Sin JavaScript los paneles quedarian inalcanzables y con ellos 6 destinos del
   sitio. Misma convencion que .reveal: si no hay clase .js, todo se muestra.
   Queda como una tira tipo mapa del sitio, no bonita pero completa y navegable. */
html:not(.js) .nav__links { flex-wrap: wrap; align-items: flex-start; }
html:not(.js) .nav__panel[hidden] { display: block !important; position: static; min-width: 0; padding: 6px 0 0; background: none; border: 0; box-shadow: none; }
html:not(.js) .nav__panel a { padding: 5px 0; white-space: nowrap; }
html:not(.js) .nav__btn { cursor: default; }
html:not(.js) .nav__btn::after { display: none; }

.nav__toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__toggle span { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 200ms, opacity 200ms; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1150px) { .nav__partner { display: none; } }
@media (max-width: 1200px) { .nav__links { gap: 18px; font-size: 14px; } }
@media (max-width: 900px) {
  .nav__toggle { display: flex; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--pad) 20px; background: #FFFFFF; border-bottom: 1px solid var(--line-soft); box-shadow: 0 16px 32px rgba(0,0,0,.10); }
  .nav.is-open .nav__links { display: flex; }
  .nav__links li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav__links li:last-child a { border-bottom: 0; }
  .nav__links a.nav__cta { margin-top: 14px; margin-left: 0; text-align: center; padding: 13px 22px; }
  .nav__group { position: static; }
  .nav__btn { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; }
  .nav__group--current > .nav__btn { font-weight: 600; }
  .nav__links .nav__panel { position: static; top: auto; left: auto; min-width: 0; margin: 0; padding: 4px 0 10px 16px; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .nav__links .nav__panel-t { margin: 8px 0 4px; padding-bottom: 8px; }
  .nav__links .nav__panel a { padding: 11px 0; border-bottom: 0; font-size: 15px; white-space: normal; }
  .nav__links .nav__panel a[aria-current="page"] { background: none; }
}
@media (max-width: 600px) { .nav__logo { height: 42px; } .nav__tag { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 150px var(--pad) 90px; background: linear-gradient(155deg, var(--blue-soft) 0%, #FFFFFF 45%, var(--green-soft) 100%); overflow: hidden; }
.hero--navy { background: var(--navy); padding: 180px var(--pad) 110px; }
.hero--plain { padding: 170px var(--pad) 70px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--muted); background: #FFFFFF; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pill--dark { border-color: rgba(255,255,255,0.3); color: #FFFFFF; background: transparent; letter-spacing: 0.06em; text-transform: uppercase; }
.blob { position: absolute; border-radius: 50%; pointer-events: none; }
.blob--a { top: -180px; right: -120px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(84,186,0,0.20), transparent 65%); animation: wit-float-a 14s ease-in-out infinite; }
.blob--b { bottom: -220px; left: -140px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(27,58,80,0.14), transparent 65%); animation: wit-float-b 18s ease-in-out infinite; }
.blob--c { top: -160px; right: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(84,186,0,0.18), transparent 65%); animation: wit-float-b 16s ease-in-out infinite; }
.blob--d { top: -160px; left: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(84,186,0,0.16), transparent 65%); animation: wit-float-a 16s ease-in-out infinite; }
@media (max-width: 900px) {
  .hero { padding: 120px var(--pad) 64px; }
  .hero--navy { padding: 130px var(--pad) 72px; }
  .hero--plain { padding: 120px var(--pad) 48px; }
}

/* Hero de la home: dos puertas y una tira de clientes como prueba */
.hero__doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; }
.hero__doors .card { padding: 30px 30px 28px; }
.hero__doors .card__more { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero__doors .card__more a { color: var(--green-dark); }
.hero__doors .card__more a:hover { color: var(--green); }
.hero__proof { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 44px; }
.hero__proof-logos { position: relative; overflow: hidden; flex: 1 1 100%; min-width: 0; }
.hero__proof-logos::before, .hero__proof-logos::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 1; pointer-events: none; }
.hero__proof-logos::before { left: 0; background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0)); }
.hero__proof-logos::after { right: 0; background: linear-gradient(270deg, var(--green-soft), rgba(255,255,255,0)); }
.hero__proof-track { display: flex; align-items: center; gap: 22px 34px; width: max-content; padding: 4px 0; animation: wit-marquee 48s linear infinite; }
.hero__proof-track:hover { animation-play-state: paused; }
.hero__proof-logos img { height: 28px; width: auto; max-width: 150px; object-fit: contain; flex-shrink: 0; filter: grayscale(1); opacity: 0.72; transition: filter 200ms, opacity 200ms; }
.hero__proof-logos img:hover { filter: none; opacity: 1; }
@media (max-width: 900px) {
  .hero__doors { grid-template-columns: 1fr; }
  .hero__proof { margin-top: 36px; }
  .hero__proof-logos img { height: 24px; max-width: 128px; }
  .hero__proof-track { gap: 18px 26px; animation-duration: 36s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__proof-logos::before, .hero__proof-logos::after { display: none; }
  .hero__proof-track { animation: none; width: auto; flex-wrap: wrap; }
  .hero__proof-track--dup { display: none; }
}

/* Marquee */
.marquee { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--bg-soft); overflow: hidden; padding: 18px 0; }
.marquee__track { display: flex; gap: 64px; width: max-content; animation: wit-marquee 32s linear infinite; font-size: 15px; font-weight: 600; color: var(--navy); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.marquee__track span { display: inline-flex; gap: 64px; }
.marquee__track i { color: var(--green); font-style: normal; }

/* ---------- Tarjetas ---------- */
.card { display: block; padding: 36px 32px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 12px; transition: transform 200ms, box-shadow 200ms; color: inherit; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit; }
.card--white { background: #FFFFFF; border-color: var(--line); }
.card--navy { background: var(--navy); border-color: var(--navy); }
.card.card--navy h3 { color: #FFFFFF; }
.card.card--navy p { color: rgba(255,255,255,0.78); }
.card--glass { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); padding: 30px 28px; }
.card--glass:hover { background: rgba(255,255,255,0.10); transform: none; box-shadow: none; }
.card.card--glass h3 { color: #FFFFFF; font-size: 18px; }
.card.card--glass p { color: rgba(255,255,255,0.82); font-size: 14px; line-height: 1.6; margin: 10px 0 0; }
.card--flat:hover { transform: none; box-shadow: none; }
.card .num { font-size: 14px; font-weight: 600; color: var(--green); letter-spacing: 0.08em; }
.card h3 { margin-top: 14px; }
.card p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.card .card__more { margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--green); }
.card .eyebrow { margin: 0; font-size: 13px; }
.card .eyebrow--green { color: var(--green); }
.card--tight { padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; }
.card--tight h3 { margin: 0; font-size: 19px; }
.card--tight p { margin: 0; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card__head-inline { display: flex; align-items: center; gap: 10px; }
.card__dur { font-size: 13px; color: var(--muted); white-space: nowrap; }
.card__aud { font-size: 14px !important; color: var(--green-dark) !important; font-weight: 600; }
.card__meta { margin: 8px 0 0 !important; font-size: 13px !important; font-weight: 600; color: var(--green-dark) !important; letter-spacing: 0.04em; text-transform: uppercase; }

.panel { padding: 44px 40px; border-radius: 12px; }
.panel--green { background: var(--green-soft); }
.panel--blue { background: var(--blue-soft); }
.panel h3 { font-size: 21px; }
.panel--green h3 { color: var(--green-dark); }
.panel p { margin: 22px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink); }
@media (max-width: 600px) { .panel { padding: 32px 24px; } .card { padding: 28px 24px; } }

.ticks { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.ticks div { display: flex; gap: 12px; }
.ticks span:first-child { color: var(--green); font-weight: 700; }

/* Lista numerada de métricas */
.metrics { display: flex; flex-direction: column; }
.metrics > div { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
.metrics > div:last-child { border-bottom: 0; }
.metrics .num { font-size: 15px; font-weight: 600; color: var(--green); min-width: 32px; }
.metrics strong { font-size: 16px; color: var(--navy); }
.metrics p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Trayectoria */
.stat { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: start; }
.stat__big { margin: 0; font-size: clamp(64px, 7vw, 96px); font-weight: 600; color: var(--green); line-height: 1; }
.stat__label { margin: 8px 0 0; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.stat__quote { margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.6; color: var(--navy); font-weight: 600; text-wrap: pretty; }
@media (max-width: 900px) { .stat { grid-template-columns: 1fr; gap: 28px; } }

/* Badges Microsoft */
.badges { display: flex; justify-content: center; align-items: center; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.badges img { height: 130px; width: auto; border-radius: 10px; box-shadow: var(--shadow-sm); }
@media (max-width: 600px) { .badges img { height: 100px; } }

/* Gradiente Copilot */
.copilot-word { background: linear-gradient(90deg, #2AA8E0, #7CC142, #E8A33D, #E85D75, #B15EDF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Roadmap (Adopción) ---------- */
.roadmap { position: relative; margin-top: 64px; }
.roadmap__line, .roadmap__progress { position: absolute; top: 27px; left: 10%; height: 2px; }
.roadmap__line { right: 10%; background: var(--line); }
.roadmap__progress { width: 0; background: linear-gradient(90deg, var(--green), var(--green-dark)); transition: width 300ms var(--ease); }
.roadmap__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; padding: 0; width: 100%; }
.step__num { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; background: #FFFFFF; color: var(--muted); border: 2px solid var(--line); transition: all 250ms var(--ease); }
.step__meta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.step__phase { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); transition: color 250ms; }
.step__title { font-size: 15px; font-weight: 600; color: var(--navy); text-align: center; line-height: 1.35; max-width: 20ch; }
.step.is-done .step__num { background: var(--green-soft); color: var(--green-dark); border-color: var(--green); }
.step.is-active .step__num { background: var(--green); color: #FFFFFF; border-color: var(--green); box-shadow: 0 6px 14px rgba(84,186,0,0.35); transform: scale(1.12); }
.step.is-active .step__phase { color: var(--green-dark); }
.roadmap__detail { margin-top: 44px; padding: 40px 44px; background: #FFFFFF; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,.06); min-height: 150px; }
.roadmap__detail .eyebrow { color: var(--green); }
.roadmap__detail h3 { margin-top: 12px; font-size: 24px; }
.roadmap__detail p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 78ch; }
.roadmap__detail .key { margin-top: 12px; font-size: 15px; color: var(--green-dark); font-weight: 600; }
@media (max-width: 900px) {
  .roadmap__line, .roadmap__progress { display: none; }
  .roadmap__steps { grid-template-columns: 1fr; gap: 8px; }
  .step { flex-direction: row; text-align: left; gap: 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-soft); background: #FFFFFF; }
  .step__num { width: 44px; height: 44px; flex-shrink: 0; }
  .step.is-active .step__num { transform: none; }
  .step__title { text-align: left; max-width: none; }
  .step__meta { align-items: flex-start; gap: 4px; }
  .roadmap__detail { padding: 28px 24px; }
}

/* ---------- Nivelación (timeline 4 pasos) ---------- */
.timeline { position: relative; margin-top: 72px; }
.timeline__line { position: absolute; top: 23px; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--line), var(--green) 60%, var(--green-dark)); }
.timeline__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tstep { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tstep__num { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--navy); }
.tstep:nth-child(2) .tstep__num { border-color: var(--green-mid); }
.tstep:nth-child(3) .tstep__num { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.tstep:nth-child(4) .tstep__num { background: var(--green); border-color: var(--green-dark); color: #FFFFFF; box-shadow: 0 4px 8px rgba(84,186,0,0.35); }
.tstep__phase { margin: 18px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.tstep strong { margin-top: 8px; font-size: 17px; color: var(--navy); }
.tstep p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 26ch; }
@media (max-width: 900px) {
  .timeline__line { display: none; }
  .timeline__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 600px) { .timeline__grid { grid-template-columns: 1fr; } .tstep { align-items: flex-start; text-align: left; } .tstep p { max-width: none; } }

/* ---------- Agentes (carrusel) ---------- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 200ms; }
.chip:hover { border-color: var(--green); }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #FFFFFF; }
.arrows { display: flex; gap: 10px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #FFFFFF; font-size: 18px; cursor: pointer; transition: all 200ms; }
.arrow:hover { background: var(--green); border-color: var(--green); }
.track { display: flex; gap: 20px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.agent { flex: 0 0 320px; scroll-snap-align: start; padding: 30px 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; display: flex; flex-direction: column; gap: 14px; transition: background 200ms, transform 200ms; }
.agent:hover { background: rgba(255,255,255,0.11); transform: translateY(-3px); }
.agent[hidden] { display: none; }
.agent__top { display: flex; align-items: center; justify-content: space-between; }
.agent__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(84,186,0,0.18); color: var(--green); }
.agent__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.agent h3 { font-size: 18px; color: #FFFFFF; }
.agent__lema { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--green); line-height: 1.4; }
.agent__desc { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); flex: 1; }
.agent__ideal { margin: 0; font-size: 13px; color: rgba(255,255,255,0.5); }
.agent__ideal strong { color: rgba(255,255,255,0.7); }
@media (max-width: 600px) { .agent { flex-basis: 84%; } }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--green); font-weight: 600; flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 40px 24px 0; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---------- Recursos ---------- */
.res-link { display: block; padding: 24px; background: var(--bg-soft); border: 1px solid var(--line-soft); border-radius: 12px; transition: transform 200ms, box-shadow 200ms; color: inherit; }
.res-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.res-link strong { font-size: 16px; color: var(--navy); }
.res-link p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cta-band { margin-top: 64px; padding: 44px 40px; background: var(--green-soft); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-size: 22px; }
.cta-band p { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
@media (max-width: 600px) { .cta-band { padding: 32px 24px; } }

/* ---------- Contacto ---------- */
.contact { position: relative; min-height: 100vh; padding: 170px var(--pad) 90px; overflow: hidden; }
.contact__grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.contact__ways { margin-top: 40px; display: flex; flex-direction: column; gap: 18px; }
.contact__way { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; color: var(--navy); }
.contact__way:hover { color: var(--green-dark); }
.contact__way span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 18px; flex-shrink: 0; }
.contact__way--muted { font-weight: 400; color: var(--muted); }
.contact__way--muted span { background: var(--blue-soft); color: var(--navy); font-size: 16px; font-weight: 600; }
.form-card { padding: 44px 40px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,.06), 0 0 2px rgba(0,0,0,.06); }
.form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* En una fila de dos campos, la etiqueta con "(opcional)" puede envolver a dos
   lineas y descuadrar los inputs. space-between deja la etiqueta arriba y el
   control abajo, asi que los dos inputs quedan alineados. */
.form__row .field { justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; font-family: inherit; color: var(--ink); background: #FFFFFF; outline: none; width: 100%; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(84,186,0,0.15); }
.field small { font-weight: 400; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__error { padding: 14px 16px; background: var(--error-bg); border: 1px solid var(--error-line); border-left: 3px solid var(--error); border-radius: 8px; font-size: 14px; line-height: 1.55; color: var(--error-ink); }
.form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 15px; background: var(--green); color: #FFFFFF; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 200ms; width: 100%; }
/* Estado de envio: el aro girando es la senal de que algo esta pasando. El
   texto cambia a "Enviando..." igual, asi que quien tenga el movimiento
   reducido tambien recibe la confirmacion. */
.form__submit.is-enviando { cursor: progress; }
.form__submit.is-enviando::before { content: ""; flex-shrink: 0; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #FFFFFF; border-radius: 50%; animation: wit-girar 700ms linear infinite; }
@keyframes wit-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .form__submit.is-enviando::before { display: none; } }
.form__submit:hover { background: var(--green-dark); }
.form__submit[disabled] { cursor: not-allowed; opacity: 0.7; }
.form__submit[disabled].is-enviando { opacity: 1; background: var(--green-dark); }
.form__note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.form__legal { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); text-align: center; }
.form__ok { text-align: center; padding: 60px 20px; }
.form__ok .check { width: 64px; height: 64px; border-radius: 50%; font-size: 30px; margin: 0 auto; }
.form__ok h2 { margin-top: 24px; font-size: 24px; }
.form__ok p { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .contact { padding: 120px var(--pad) 64px; min-height: 0; } .contact__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { .form-card { padding: 28px 20px; } .form__row { grid-template-columns: 1fr; } }

/* ---------- Modal del formulario ---------- */
/* El segundo de los dos formularios del sitio. Se abre desde cualquier boton con
   data-form="<interes>" y ese interes queda precargado en el select. */
/* .modal fija display:flex y le gana al display:none del atributo hidden, igual
   que pasa con .card y con .agent. Sin esta regla el modal queda visible
   siempre y tapa el sitio completo. */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.modal__fondo { position: fixed; inset: 0; background: rgba(20,41,58,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal__caja { position: relative; width: 100%; max-width: 620px; margin: auto; padding: 40px 40px 34px; background: #FFFFFF; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.28); }
.modal__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: #FFFFFF; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 200ms, color 200ms; }
.modal__x:hover { border-color: var(--navy); color: var(--navy); }
.modal__t { margin: 8px 0 0; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.01em; padding-right: 44px; }
.modal__sub { margin: 10px 0 26px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.modal [data-modal-sobre]:empty { display: none; }
.modal .form__ok { padding: 26px 10px 10px; text-align: center; }
.modal .form__ok .btn { margin-top: 26px; }
body.modal-abierto { overflow: hidden; }
@media (max-width: 600px) {
  .modal { padding: 0; }
  .modal__caja { max-width: none; min-height: 100%; margin: 0; padding: 30px 20px 26px; border-radius: 0; }
}

/* ---------- Footer ---------- */
.footer { background: var(--navy-deep); padding: 56px var(--pad); color: rgba(255,255,255,0.65); }
.footer__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer__logo { height: 42px; width: auto; }
.footer__tag { margin: 14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.footer__claim { margin: 8px 0 0; font-size: 14px; }
.footer__links { display: flex; gap: 40px 48px; font-size: 14px; flex-wrap: wrap; }
.footer__col-t { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.footer__links ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { color: rgba(255,255,255,0.75); }
.footer__links a:hover { color: var(--green); }
.footer__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13px; }
@media (max-width: 600px) { .footer__links { gap: 28px 32px; } }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: grid; place-items: center; padding: 140px var(--pad) 80px; text-align: center; }

/* ---------- Animaciones ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: translateY(0); }
.fade-up { animation: wit-fade-up 700ms var(--ease) both; }
.fade-up--1 { animation-delay: 100ms; } .fade-up--2 { animation-delay: 200ms; } .fade-up--3 { animation-delay: 300ms; } .fade-up--4 { animation-delay: 400ms; }
@keyframes wit-float-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.08); } }
@keyframes wit-float-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,25px) scale(0.94); } }
@keyframes wit-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wit-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Certificaciones (línea Claude de Anthropic) ---------- */
/* Logos de producto de terceros (Claude, Anthropic, Copilot). El alto se fija
   en cada uso; el ancho sale de los atributos width/height del <img>. */
.brandmark { display: block; width: auto; }

.lvl { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; background: var(--blue-soft); color: var(--navy); white-space: nowrap; }
.lvl--pro { background: var(--green-soft); color: var(--green-dark); }
.exam { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.exam__price { font-size: 20px; font-weight: 600; color: var(--navy); }
.exam__note { margin: 0 !important; font-size: 13px !important; color: var(--muted-2) !important; }

.tbl { margin-top: 44px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.tbl table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.tbl caption { padding: 0 0 14px; font-size: 14px; color: var(--muted); text-align: left; }
.tbl th, .tbl td { padding: 18px 20px; text-align: left; vertical-align: top; line-height: 1.55; border-bottom: 1px solid var(--line-soft); }
.tbl thead th { background: var(--bg-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl tbody th { font-weight: 600; color: var(--navy); }
.tbl tbody td { color: var(--muted); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }

/* ---------- Consultores / relatores (agenda de horas) ---------- */
/* Variante clara de los chips: los originales estan pintados para fondo navy. */
.chip--light { border-color: var(--line); background: #FFFFFF; color: var(--navy); }
.chip--light:hover { border-color: var(--green); }
.chip--light[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #FFFFFF; }

/* .card fija display:block y le gana al display:none del atributo hidden, igual
   que pasa con .agent en el carrusel de Oferta. */
.card[hidden] { display: none; }

.who__top { display: flex; align-items: center; gap: 14px; }
.who__av { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--blue-soft); color: var(--navy); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; }
.who__name { margin: 0; font-size: 17px; font-weight: 600; color: var(--navy); }
.who__role { margin: 4px 0 0 !important; font-size: 13px !important; line-height: 1.45; color: var(--muted) !important; }
.who__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

.rate { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.rate__val { font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.rate__unit { font-size: 14px; color: var(--muted); }
.rate__pend { margin: 8px 0 0 !important; font-size: 12px !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2) !important; }

.card--stack { display: flex; flex-direction: column; }
.card--stack .rate, .card--stack .exam { margin-top: auto; }
/* Para tarjetas cuyo ultimo elemento es el CTA. Va aparte de .card--stack
   porque ahi el que absorbe el espacio libre es .rate: si los dos llevaran
   margin-top auto, flex reparte el espacio entre ambos y el boton se separa
   del precio. */
.card--btn-abajo { display: flex; flex-direction: column; }
.card--btn-abajo > .btn:last-child { margin-top: auto; }

.filter { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.filter__count { font-size: 14px; color: var(--muted); }

/* ---------- Franja "Cursos abiertos" (segundo camino en la home) ---------- */
.band { padding: 30px var(--pad); background: var(--green-soft); border-bottom: 1px solid var(--line-soft); }
.band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.band h2 { margin-top: 8px; font-size: clamp(19px, 2vw, 22px); font-weight: 600; color: var(--navy); max-width: 40ch; }
.band h2 em { font-style: normal; color: var(--green-dark); }
.band p:not(.eyebrow) { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 60ch; }
.band .btn { flex-shrink: 0; }
@media (max-width: 600px) { .band .btn { width: auto; } }

/* ---------- Carrusel de logos de clientes ---------- */
.logos { position: relative; overflow: hidden; margin-top: 36px; }
.logos::before, .logos::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.logos::before { left: 0; background: linear-gradient(90deg, var(--bg-soft), rgba(250,250,250,0)); }
.logos::after { right: 0; background: linear-gradient(270deg, var(--bg-soft), rgba(250,250,250,0)); }
.logos--on-white::before { background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0)); }
.logos--on-white::after { background: linear-gradient(270deg, #FFFFFF, rgba(255,255,255,0)); }
.logos__track { display: flex; align-items: center; gap: 64px; width: max-content; padding: 8px 0; animation: wit-marquee 70s linear infinite; }
.logos__track:hover { animation-play-state: paused; }
.logos__track img { height: 44px; width: auto; max-width: 180px; object-fit: contain; flex-shrink: 0; }
.logos__track img[alt="Teletón"], .logos__track img[alt="Easy"], .logos__track img[alt="SENCE"], .logos__track img[alt="Audax Italiano"], .logos__track img[alt="Grupo EMIN"], .logos__track img[alt="Ministerio de Justicia y Derechos Humanos"], .logos__track img[alt="Ministerio de Vivienda y Urbanismo"], .logos__track img[alt="Cermaq"] { height: 52px; }
@media (max-width: 600px) { .logos__track { gap: 40px; animation-duration: 55s; } .logos__track img { height: 36px; max-width: 140px; } }
@media (prefers-reduced-motion: reduce) {
  .logos::before, .logos::after { display: none; }
  .logos__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
  .logos__track--dup { display: none; }
}

/* ---------- Foto de las oficinas (Contacto) ---------- */
.office { margin: 40px 0 0; max-width: 420px; }
.office img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-md); }
.office figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.office figcaption strong { color: var(--navy); font-weight: 600; }
@media (max-width: 900px) { .office { max-width: 340px; margin-top: 32px; } }

/* ---------- Galería de eventos ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px; margin-top: 48px; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-soft); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-size: 13px; line-height: 1.4; color: #FFFFFF; background: linear-gradient(180deg, rgba(20,41,58,0), rgba(20,41,58,0.75)); opacity: 0; transition: opacity 300ms; }
.gallery figure:hover figcaption, .gallery figure:focus-within figcaption { opacity: 1; }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 10px; } .gallery .wide { grid-column: span 2; } }
@media (max-width: 600px) { .gallery { grid-auto-rows: 150px; } .gallery .tall { grid-row: span 2; } .gallery figcaption { opacity: 1; padding: 20px 10px 8px; font-size: 12px; } }

/* Franja de fotos en la home */
.photostrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 56px; }
.photostrip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .photostrip { grid-template-columns: repeat(2, 1fr); } }