/* ==========================================================================
   FG Consultix — Componentes dinámicos
   Se carga después de main.css. Flujos con flechas, acordeones de proceso,
   calculadora de tarifas, equipo y barras comparativas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLUJO HORIZONTAL CON FLECHAS
   -------------------------------------------------------------------------- */
.flow {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  list-style: none; padding: 0; margin: 0;
  counter-reset: flowstep;
}
.flow > li {
  position: relative; counter-increment: flowstep; margin: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.15rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.flow > li:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--navy-300); }
.flow > li::before {
  content: counter(flowstep); display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; margin-bottom: .7rem;
  background: var(--grad-marca); color: #fff;
  font-family: var(--font-title); font-weight: 800; font-size: .7rem;
}
.flow > li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2;
  right: calc(var(--sp-3) * -1 - 1px); top: 50%; transform: translateY(-50%);
  width: calc(var(--sp-3) + 2px); height: 11px;
  background: var(--navy-300);
  -webkit-mask: var(--arrow-mask) no-repeat center / contain;
  mask: var(--arrow-mask) no-repeat center / contain;
}
:root {
  --arrow-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 4h17V0l7 5-7 5V6H0z'/%3E%3C/svg%3E");
}
.flow h3, .flow h4 { font-size: .9375rem; margin-bottom: .35rem; }
.flow p { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.flow__meta {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal-600); margin-bottom: .25rem;
}
.flow--dark > li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.flow--dark h3, .flow--dark h4 { color: #fff; }
.flow--dark p { color: var(--text-invert-muted); }
.flow--dark > li:not(:last-child)::after { background: var(--teal-400); }

@media (max-width: 760px) {
  .flow > li:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: calc(var(--sp-3) * -1 - 1px);
    transform: translateX(-50%) rotate(90deg);
  }
}

/* --------------------------------------------------------------------------
   2. ACORDEÓN DE PROCESO
   -------------------------------------------------------------------------- */
.proceso { display: grid; gap: .5rem; margin-top: var(--sp-4); }
.proceso details {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--navy-050);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.proceso details[open] { background: #fff; border-color: var(--navy-300); }
.proceso summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .7rem .9rem; font-size: var(--fs-sm); font-weight: 600; color: var(--navy-900);
}
.proceso summary::-webkit-details-marker { display: none; }
.proceso summary::before {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--navy-700); border-bottom: 2px solid var(--navy-700);
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.proceso details[open] summary::before { transform: rotate(45deg); }
.proceso summary .n {
  margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--teal-600);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.proceso__body { padding: 0 .9rem .9rem 2.1rem; }
.proceso__body p, .proceso__body li { font-size: var(--fs-xs); color: var(--text-muted); }
.proceso__body ol, .proceso__body ul { margin: 0; padding-left: 1.1rem; }
.proceso__body li { margin-bottom: .35rem; }

/* --------------------------------------------------------------------------
   3. CALCULADORA DE TARIFAS
   -------------------------------------------------------------------------- */
.calc {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-lg);
}
@media (min-width: 940px) { .calc { grid-template-columns: 1.08fr .92fr; } }

.calc__controls { padding: clamp(1.35rem, 3vw, 2rem); }
.calc__out {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--navy-900); color: var(--text-invert);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden; isolation: isolate;
}
.calc__out::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(430px 280px at 88% 0%, rgba(63,195,198,.25), transparent 66%);
}

.calc__group { margin-bottom: var(--sp-5); }
.calc__group:last-child { margin-bottom: 0; }
.calc__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-sm); font-weight: 650; color: var(--navy-900); margin-bottom: .55rem;
}
.calc__val {
  font-family: var(--font-title); font-weight: 800; font-size: 1.05rem;
  color: var(--navy-700); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc__hint {
  display: block; font-size: var(--fs-xs); color: var(--text-muted);
  font-weight: 400; margin-top: .4rem; line-height: 1.5;
}

/* Segmentos tipo pestaña */
.seg {
  display: flex; border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 3px; background: var(--gray-100); flex-wrap: wrap; position: relative;
}
/* El radio va OCULTO PERO EN SU SITIO, no sacado del flujo.
   Estaba con position:absolute y sin coordenadas. Dentro de un contenedor
   flex, eso deja a los tres radios amontonados en la esquina del bloque, lejos
   de la etiqueta que les corresponde: al pulsar «Solo listings» el foco saltaba
   a un punto 85 px más arriba y el navegador desplazaba la página hasta allí.
   Eso es lo que se sentía como «le doy y me lleva a otro sitio».
   Dejándolo en el flujo, cada radio queda pegado a su propia etiqueta. */
.seg input {
  position: static;
  width: 1px; height: 1px; flex: none;
  margin: 0; padding: 0; border: 0;
  opacity: 0; clip-path: inset(50%); overflow: hidden;
}
/* El destello gris del navegador al tocar tapaba el propio botón */
.seg label { -webkit-tap-highlight-color: transparent; }
.seg label {
  flex: 1 1 auto; text-align: center; cursor: pointer;
  padding: .58rem .7rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 650; color: var(--text-muted);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap; user-select: none;
}
.seg input:checked + label { background: #fff; color: var(--navy-700); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + label { outline: 3px solid var(--teal-600); outline-offset: 2px; }

/* En pantallas estrechas las tres opciones no caben en una línea: se partían
   en dos filas y la tercera quedaba sola ocupando todo el ancho, con pinta de
   estar rota. Debajo de 620 px se apilan las tres, cada una de su tamaño. */
@media (max-width: 620px) {
  .seg { flex-direction: column; border-radius: var(--radius); }
  .seg label { flex: none; width: 100%; padding: .7rem; border-radius: calc(var(--radius) - 4px); }
}

/* Deslizadores */
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0;
  background: var(--gray-200); border-radius: 3px; outline: none; cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy-700); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15,42,68,.35); cursor: grab;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--navy-700); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(15,42,68,.35); cursor: grab;
}
.calc input[type="range"]:focus-visible { outline: 3px solid var(--teal-600); outline-offset: 4px; }
.calc__scale {
  display: flex; justify-content: space-between; font-size: .625rem;
  color: var(--gray-400); margin-top: .35rem; font-variant-numeric: tabular-nums;
}

/* Componentes activables */
.calc__comp { display: grid; gap: .2rem; }
.calc__comp label {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .5rem .6rem; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); color: var(--text-muted);
  transition: background .16s var(--ease);
}
.calc__comp label:hover { background: var(--navy-050); }
.calc__comp input { width: 17px; height: 17px; accent-color: var(--navy-700); flex: none; margin: 0; }
.calc__comp .t { line-height: 1.35; }
.calc__comp input:checked + .t { color: var(--navy-900); font-weight: 550; }
.calc__comp .w {
  margin-left: auto; font-variant-numeric: tabular-nums; font-size: .6875rem;
  color: var(--gray-400); white-space: nowrap;
}

/* Salida */
.calc__tier {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  background: rgba(63,195,198,.14); border: 1px solid rgba(63,195,198,.3); color: var(--teal-400);
  font-size: var(--fs-xs); font-weight: 700; padding: .4rem .8rem; border-radius: var(--radius-pill);
}
.calc__price {
  font-family: var(--font-title); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); color: #fff;
  font-variant-numeric: tabular-nums; margin: .6rem 0 .2rem;
}
.calc__price small {
  font-family: var(--font-body); font-size: .27em; font-weight: 500;
  color: var(--text-invert-muted); letter-spacing: 0;
}
.calc__sub { font-size: var(--fs-xs); color: var(--text-invert-muted); }
.calc__rows {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid rgba(255,255,255,.14); font-size: var(--fs-sm);
}
.calc__row {
  display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0;
  color: var(--text-invert-muted); border-bottom: 1px dashed rgba(255,255,255,.08);
}
.calc__row:last-child { border-bottom: 0; }
.calc__row b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.calc__flag {
  display: none; margin-top: var(--sp-4); padding: .8rem 1rem; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); line-height: 1.5;
  background: rgba(232,163,61,.14); border: 1px solid rgba(232,163,61,.32); color: #F5D5A0;
}
.calc__flag.is-on { display: block; }
.calc__note {
  margin-top: auto; padding-top: var(--sp-5); font-size: var(--fs-xs);
  color: var(--text-invert-muted); line-height: 1.55;
}
.calc__cta { margin-top: var(--sp-5); }

/* Sin JS la calculadora no puede funcionar: se avisa y se enseña la tabla */
.calc__nojs {
  padding: 1rem 1.15rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: var(--fs-sm); color: var(--text-invert);
}
.js .calc__nojs { display: none; }
html:not(.js) .calc__dyn { display: none; }

/* --------------------------------------------------------------------------
   4. EQUIPO
   -------------------------------------------------------------------------- */
.team {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.member { text-align: center; }
.member__photo {
  width: 132px; height: 132px; margin: 0 auto var(--sp-4); border-radius: 50%;
  object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-lg);
  background: var(--navy-100); display: block;
}
.member__photo--ph {
  display: grid; place-items: center; background: var(--grad-marca-suave);
  font-family: var(--font-title); font-weight: 800; font-size: 2.1rem;
  color: var(--navy-700); border: 3px dashed var(--navy-300); box-shadow: none;
}
.member h3 { font-size: var(--fs-h4); margin-bottom: .2rem; }
.member__role {
  font-size: var(--fs-xs); font-weight: 650; color: var(--teal-600);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .75rem;
}
.member p { font-size: var(--fs-sm); color: var(--text-muted); }
.member__tags { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: .9rem; }
.member__tags .badge { font-size: .6875rem; padding: .3rem .6rem; }

/* --------------------------------------------------------------------------
   5. BARRAS COMPARATIVAS
   -------------------------------------------------------------------------- */
.bars { display: grid; gap: 1rem; margin: var(--sp-5) 0; }
.bar__top { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-xs); margin-bottom: .35rem; }
.bar__top span { color: var(--text-muted); }
.bar__top b { font-variant-numeric: tabular-nums; color: var(--navy-900); white-space: nowrap; }
.bar__track { height: 10px; background: var(--gray-100); border-radius: 5px; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 5px; background: var(--grad-marca); width: var(--w, 0%); }
.bar__fill--muted { background: var(--gray-400); }
.js .bar__fill { width: 0; transition: width 1.1s var(--ease); }
.js .is-visible .bar__fill { width: var(--w, 0%); }

/* --------------------------------------------------------------------------
   6. CINTA DE DATOS
   -------------------------------------------------------------------------- */
.ticker {
  display: flex; flex-wrap: wrap; gap: .55rem 1.6rem;
  align-items: center; justify-content: center;
  font-size: var(--fs-xs); color: var(--text-muted); list-style: none; padding: 0; margin: 0;
}
.ticker li { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.ticker li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-400); flex: none; }
.ticker--dark { color: var(--text-invert-muted); }

/* --------------------------------------------------------------------------
   7. TARJETA DE PLAN CON PRECIO DINÁMICO
   -------------------------------------------------------------------------- */
.plan__from {
  font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 650; display: block; margin-bottom: .1rem;
}
.plan__meta {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--sp-3) 0 var(--sp-4);
}

/* --------------------------------------------------------------------------
   8. OFERTA DE LANZAMIENTO
   -------------------------------------------------------------------------- */
.oferta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-900); color: var(--text-invert);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.25rem);
  display: grid; gap: var(--sp-4); align-items: center;
}
@media (min-width: 820px) { .oferta { grid-template-columns: 1fr auto; } }
.oferta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(600px 260px at 15% 0%, rgba(63,195,198,.28), transparent 65%);
}
.oferta__tag {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--grad-marca); color: #fff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  padding: .4rem .85rem; border-radius: var(--radius-pill);
  margin-bottom: .85rem;
}
.oferta__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.oferta h2, .oferta h3 { color: #fff; margin-bottom: .5rem; font-size: var(--fs-h3); }
.oferta p { color: var(--text-invert-muted); font-size: var(--fs-sm); margin: 0; }
/* Va escrito como «.oferta .oferta__plazas» a propósito: «.oferta p» pesa más
   que una sola clase y le estaba imponiendo el tamaño y el color del texto
   normal, así que la cifra salía del tamaño de un párrafo y en gris. */
.oferta .oferta__plazas {
  display: flex; align-items: center; gap: .55rem; justify-content: center;
  font-family: var(--font-title); font-weight: 800; color: var(--ambar);
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem); line-height: 1;
  margin-bottom: 1rem;
}
/* El rótulo va a dos líneas, alineado a la izquierda del número, para que no
   quede una palabra diminuta colgando de la cifra. */
.oferta .oferta__plazas small {
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  line-height: 1.15; text-align: left; color: #fff; letter-spacing: 0;
}
.oferta__aside { text-align: center; min-width: max-content; }
.oferta--claro {
  background: var(--grad-marca-suave); color: var(--text);
  border: 1px solid rgba(32,95,166,.18);
}
.oferta--claro::before { display: none; }
.oferta--claro h2, .oferta--claro h3 { color: var(--navy-900); }
.oferta--claro p { color: var(--text-muted); }
.oferta--claro .oferta__plazas { color: var(--navy-700); }
.oferta--claro .oferta__plazas small { color: var(--text-muted); }

/* Precio anterior tachado */
.precio-antes {
  display: block; font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  color: var(--gray-400); text-decoration: line-through; margin-bottom: .1rem;
  letter-spacing: 0;
}
.calc__antes {
  display: block; font-size: 1rem; font-weight: 500; color: var(--text-invert-muted);
  text-decoration: line-through; margin-bottom: .1rem; font-family: var(--font-body);
}
.calc__ahorro {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  background: rgba(46,158,91,.18); border: 1px solid rgba(46,158,91,.35); color: #7BE0A6;
  font-size: var(--fs-xs); font-weight: 700; padding: .35rem .75rem; border-radius: var(--radius-pill);
}

/* Cinta superior de la página */
.barra-oferta {
  background: var(--grad-marca); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; text-align: center;
  padding: .6rem 1rem; line-height: 1.4;
}
.barra-oferta a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.barra-oferta strong { color: #fff; font-weight: 800; }

/* ===========================================================================
   .galeria — imágenes de trabajo con su explicación debajo
   ---------------------------------------------------------------------------
   Cada figura enseña una imagen de ficha y cuenta qué duda resuelve. En móvil
   van en columna: la explicación pesa tanto como la imagen y no se apila mal.
   =========================================================================== */
.galeria {
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1fr;
  margin: var(--sp-6) 0;
}
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(2, 1fr); } }

.galeria figure {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.galeria img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--gray-100);
}
.galeria figcaption {
  padding: var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.galeria figcaption strong { color: var(--navy-900); }

/* Nota al pie de una tabla o de un bloque de precios */
.nota { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); }

/* Precio de la oferta: el tachado y el nuevo, uno al lado del otro */
.oferta__precio {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.oferta__precio strong {
  font-family: var(--font-title); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem); line-height: 1;
  color: var(--ambar);
}

/* ===========================================================================
   Rejillas de cuatro elementos
   ---------------------------------------------------------------------------
   Con auto-fit, cuatro tarjetas se parten en 3 + 1 en cuanto la pantalla no da
   para cuatro columnas, y queda una huérfana abajo. Se fuerza 2 × 2 en el
   tramo intermedio: o cuatro en fila, o dos y dos, nunca tres y una.
   =========================================================================== */
@media (min-width: 560px) and (max-width: 1099px) {
  .flow       { grid-template-columns: repeat(2, 1fr); }
  .pricing    { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip  { grid-template-columns: repeat(2, 1fr); }
  .team       { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .flow      { grid-template-columns: repeat(4, 1fr); }
  .pricing   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .kpi-strip { grid-template-columns: repeat(4, 1fr); }
}

/* Variante clara del bloque de oferta, para cuando va justo encima de una
   sección oscura: dos bloques navy pegados se leen como uno solo. */
.oferta--claro {
  background: var(--ambar-050);
  color: var(--text);
  border: 1px solid var(--ambar-200);
}
.oferta--claro::before { display: none; }
.oferta--claro h2, .oferta--claro h3 { color: var(--navy-900); }
.oferta--claro p { color: var(--text-muted); }
.oferta--claro .oferta__tag { background: var(--ambar); color: var(--navy-900); }
.oferta--claro .oferta__tag::before { background: var(--navy-900); }

/* Dentro de la columna de texto el ancho es la mitad de la página: cuatro
   columnas ahí salen como cuatro tiras verticales ilegibles. Siempre 2 × 2. */
.prose .flow { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .prose .flow { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
   CARRUSEL DE IMÁGENES
   ---------------------------------------------------------------------------
   Funciona sin JavaScript: es una tira con desplazamiento horizontal y anclaje,
   así que con el dedo o con el trackpad se pasa igual. Las flechas y el
   contador los añade carrusel.js, y solo aparecen si el JS ha cargado — un
   botón que no hace nada es peor que no tener botón.
   =========================================================================== */
.carrusel { position: relative; }

.carrusel__pista {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-300) transparent;
}
@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
}
.carrusel__pista::-webkit-scrollbar { height: 6px; }
.carrusel__pista::-webkit-scrollbar-thumb { background: var(--navy-300); border-radius: var(--radius-pill); }

/* El anclaje va al inicio, no al centro. Con «center» los puntos de anclaje
   caen a media tarjeta, y como el salto de las flechas es de una tarjeta
   exacta, el navegador devolvía el carrusel a la primera imagen: las flechas
   parecían no funcionar. Con «start» el punto de anclaje y el salto coinciden. */
.carrusel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
}
.carrusel__slide img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.carrusel__slide figcaption {
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5;
  margin-top: .8rem;
}
.carrusel__slide figcaption strong { color: var(--navy-900); }

/* Varias a la vez, para las tiras sin texto donde lo que importa es el conjunto */
.carrusel--mosaico .carrusel__slide { flex: 0 0 78%; }
@media (min-width: 560px)  { .carrusel--mosaico .carrusel__slide { flex: 0 0 46%; } }
@media (min-width: 900px)  { .carrusel--mosaico .carrusel__slide { flex: 0 0 31%; } }

/* La de historia se queda en una por pantalla hasta que hay sitio para dos */
@media (min-width: 760px) { .carrusel--historia .carrusel__slide { flex: 0 0 48%; } }

/* --- Controles (los pone el JS) --- */
.carrusel__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.carrusel__nav { display: flex; gap: .5rem; }
.carrusel__flecha {
  width: 42px; height: 42px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--navy-300); border-radius: 50%;
  background: #fff; color: var(--navy-800); cursor: pointer;
  font: inherit; line-height: 1;
  transition: background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}
.carrusel__flecha:hover:not(:disabled) { background: var(--ambar); border-color: var(--ambar); color: var(--navy-900); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }
.carrusel__flecha svg { width: 18px; height: 18px; }
.carrusel__cuenta {
  font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* En impresión no hay scroll: se enseñan todas, una detrás de otra */
@media print {
  .carrusel__pista { display: block; overflow: visible; }
  .carrusel__slide { margin-bottom: 1rem; }
  .carrusel__barra { display: none; }
}

/* =============================================================================
   CALCULADORA DE ACOS DE EQUILIBRIO — /metodo.html#equilibrio
   Dos columnas: los datos a la izquierda, la cascada y el resultado a la
   derecha sobre navy, para que el número final sea lo que se ve primero.
   ============================================================================= */
.eq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.eq > * { min-width: 0; }
@media (max-width: 860px) { .eq { grid-template-columns: minmax(0, 1fr); } }

.eq__in {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  display: grid;
  gap: 1rem;
}
.eq__legend {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
}
.eq__in .field input { font-variant-numeric: tabular-nums; }

.eq__out {
  background: var(--navy-900);
  color: var(--text-invert-muted);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-lg);
}
.eq__label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin: 0 0 .9rem;
}
.eq__casc { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.eq__casc li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border-dark);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.eq__casc li em { font-style: normal; color: var(--text-invert-muted); opacity: .75; }
.eq__casc li b { color: var(--white); white-space: nowrap; }
.eq__casc .eq__total {
  border-bottom: 0;
  border-top: 1px solid var(--border-dark);
  margin-top: .35rem;
  padding-top: .8rem;
  font-weight: 600;
  color: var(--white);
}

.eq__big { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 420px) { .eq__big { grid-template-columns: minmax(0, 1fr); } }
.eq__big > div {
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}
.eq__big b {
  display: block;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--teal-400);
  font-variant-numeric: tabular-nums;
}
.eq__big span {
  display: block;
  font-size: var(--fs-xs);
  margin-top: .35rem;
}

.eq__nota { font-size: var(--fs-xs); margin: 1rem 0 0; }
.eq__nota b { color: var(--white); }

.eq__veredicto {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  font-size: var(--fs-sm);
  border-left: 4px solid var(--estado-pausado);
}
.eq__veredicto--bueno      { border-left-color: var(--estado-activo); }
.eq__veredicto--observacion{ border-left-color: var(--estado-observacion); }
.eq__veredicto--malo       { border-left-color: var(--estado-revertido); }

/* -----------------------------------------------------------------------------
   Cabecera en el tramo justo (1021-1240 px)
   Con siete elementos de menú más el botón, a 1024 px la barra se salía por la
   derecha. Aquí se aprieta lo justo: se quita el descriptivo de la marca y se
   recorta el aire de los enlaces. Por debajo de 1021 px ya entra el menú móvil.
   -------------------------------------------------------------------------- */
@media (min-width: 1021px) and (max-width: 1240px) {
  .nav__brand-tag { display: none; }
  .nav__link { padding: .5rem .5rem; }
  .nav__menu { gap: .1rem; }
  .nav__actions .btn { padding: .5rem .75rem; }
}

/* Tabla estrecha: para las de dos columnas que van dentro de una tarjeta, donde
   el mínimo de 560 px de .table-wrap no cabe y desbordaba. */
.table-wrap--slim table { min-width: 0; }

/* -----------------------------------------------------------------------------
   Banner de página interior más bajo
   Antes ocupaba casi una pantalla y empujaba el contenido fuera de la vista.
   Se recorta el alto y se limita el ancho del texto para que la línea no se
   estire. En móvil se recorta menos, porque ahí el titular ocupa más líneas.
   -------------------------------------------------------------------------- */
.hero--inner { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.25rem); }
.hero--inner h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); margin-bottom: .6rem; }
.hero--inner > .container > p { max-width: 62ch; margin-bottom: 0; font-size: var(--fs-sm); }
.hero--inner .breadcrumb { margin-bottom: .5rem; }
.hero--inner .eyebrow { margin-bottom: .4rem; }
@media (max-width: 600px) {
  .hero--inner { padding-block: 1.5rem 1.35rem; }
  .hero--inner h1 { font-size: clamp(1.5rem, 1.1rem + 2.6vw, 2rem); }
}

/* -----------------------------------------------------------------------------
   MARQUESINA DE TRABAJOS
   Fichas reales que se desplazan solas. La pista lleva las imágenes duplicadas y
   se mueve un −50 %: al llegar al final, la copia está exactamente donde estaba
   la original, así que el salto no se ve. Se para al pasar el ratón o al enfocar
   con el teclado, y con «reducir movimiento» no se mueve y se puede arrastrar.
   -------------------------------------------------------------------------- */
.marquesina {
  overflow: hidden;
  position: relative;
  padding: .25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquesina__pista {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquesina 52s linear infinite;
}
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
.marquesina__item {
  width: clamp(170px, 21vw, 250px);
  aspect-ratio: 1;
  flex: none;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-050);
  border: 1px solid var(--border);
}
.marquesina__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.marquesina__item:hover img { transform: scale(1.04); }
.marquesina__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .45rem .65rem .5rem;
  background: linear-gradient(transparent, rgba(15, 42, 68, .82));
  color: #fff; font-size: var(--fs-xs); font-weight: 600; line-height: 1.25;
}
@keyframes marquesina { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquesina__pista { animation: none; }
  .marquesina { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* -----------------------------------------------------------------------------
   Tarjetas de herramientas gratuitas (portada)
   -------------------------------------------------------------------------- */
.herramienta { display: flex; flex-direction: column; height: 100%; }
.herramienta__tag {
  align-self: flex-start;
  font-family: var(--font-title); font-weight: 800; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-600); background: var(--teal-100);
  padding: .25rem .5rem; border-radius: var(--radius-sm); margin-bottom: .75rem;
}
.herramienta .card__more { margin-top: auto; padding-top: .75rem; }

/* -----------------------------------------------------------------------------
   Distintivo de precio cero
   Se enseña el precio en vez de escribir «gratis»: comunica lo mismo, se lee
   antes y no suena a reclamo. Va en el menú de herramientas y en la portada.
   -------------------------------------------------------------------------- */
.cero {
  display: inline-flex; align-items: center;
  font-style: normal;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-600);
  background: var(--teal-100);
  border: 1px solid var(--teal-200);
  border-radius: var(--radius-pill);
  padding: .1rem .4rem;
  margin-left: .35rem;
  vertical-align: middle;
  white-space: nowrap;
}
.nav__sub a .cero { margin-left: .3rem; }
.herramienta__tag .cero { margin-left: .4rem; background: #fff; }

/* El desplegable de herramientas necesita algo más de ancho para que el título y
   el distintivo de precio quepan en la misma línea. */
.nav__sub { min-width: 330px; }
.nav__sub a { display: flex; flex-wrap: wrap; align-items: baseline; }
.nav__sub a span { flex-basis: 100%; }

/* -----------------------------------------------------------------------------
   Tarjetas clicables en pantallas táctiles
   Que se note que la tarjeta entera es un enlace, para que nadie la pulse sin
   querer creyendo que ahí no había nada. En el móvil se marca el borde y la
   línea de acción, que es donde el dedo va a ir.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .card--link, .card:has(> h3 > .stretch-link), .card:has(.stretch-link) {
    border-color: var(--navy-100);
    box-shadow: inset 0 -3px 0 var(--ambar-200);
  }
  .card--link:active, .card:has(.stretch-link):active {
    background: var(--navy-050);
  }
  /* El área de toque no baja de 44 px, que es el mínimo cómodo */
  .card__more { min-height: 44px; align-items: center; }
}

/* -----------------------------------------------------------------------------
   AJUSTES PARA PANTALLA TÁCTIL
   Auditoría del 07-09-2026 a 375 px. Lo que se corrige y por qué:

   · El deslizador de la calculadora medía 6 px de alto. El círculo se ve, pero
     la zona que responde al dedo era esa franja. Se le da 44 px de alto útil sin
     cambiar su aspecto: la barra se pinta con un degradado centrado.
   · El botón de «Habla con nuestros expertos» del menú móvil medía 36 px. Es el
     botón principal de la web y debe llegar a 44.
   · Las migas de pan medían 16 px de alto. Se les da aire vertical.
   · Un par de rótulos bajaban de 11 px y en un móvil no se leen.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .calc input[type="range"] {
    height: 44px;
    background: linear-gradient(var(--gray-200), var(--gray-200)) center / 100% 6px no-repeat;
  }
  .btn--sm { padding: .85rem 1.1rem; min-height: 44px; }
  .breadcrumb li { padding-block: .35rem; }
  .breadcrumb a { display: inline-block; padding-block: .25rem; }
  .nav__brand-tag { font-size: .75rem; }
  .flow__meta, .herramienta__tag, .badge, .member__tags .badge { font-size: .75rem; }
  .calc__price small { font-size: .8rem; }
  .calc__scale { font-size: .75rem; }
  /* El logotipo es el enlace al inicio: que llegue a los 44 px de alto */
  .nav__brand { min-height: 44px; }
  /* Los enlaces dentro de una celda de tabla necesitan aire para el dedo */
  th a, td a { display: inline-block; padding-block: .55rem; }
}