/* ============================================================
   WJ Insurance — brand details layered over the Elementor build.
   Elementor's own controls carry layout, colour and type. This file
   only covers the few things its widget controls cannot express:
   the eyebrow rule, the hairline card grid, the portrait bleed,
   the section watermark, and the contact list markup.
   ============================================================ */

:root {
  --wj-navy: #003049;
  --wj-red: #D73220;
  --wj-deep-red: #780000;
  --wj-cream: #FDF0D5;
  --wj-soft-white: #FAF9F6;
  --wj-charcoal: #1A1A1A;
  --wj-light-blue: #669EBC;
  --wj-rule: rgba(0, 48, 73, 0.13);
  
}

/* Montserrat is the documented stand-in for Avenir Next Arabic. Widgets carry it via
   their own typography controls; this covers everything else on the page. */
body, .elementor-widget-text-editor, .elementor-button, input, select, textarea {
  font-family: 'Avenir Next Arabic', 'Montserrat', 'Century Gothic', -apple-system, 'Segoe UI', sans-serif;
}
body { background: var(--wj-soft-white); color: var(--wj-charcoal); position: relative; }

/* ---------- Eyebrow: label preceded by the red rule ---------- */
.wj-eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wj-eyebrow .elementor-heading-title::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--wj-red);
  flex: none;
}
#wj-hero__content .wj-eyebrow .elementor-heading-title { justify-content: center; }

/* Hero rules live in the editorial block near the end of this file. */

/* ---------- Service cards: one hairline grid, not five boxes ---------- */
#wj-cards {
  background: var(--wj-rule);
  border: 1px solid var(--wj-rule);
  border-radius: 5px;
  overflow: hidden;
}
#wj-cards > .e-con,
#wj-cards > .elementor-element {
  flex: 1 1 0;
  min-width: 0;
  border-top: 3px solid transparent;
  transition: border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#wj-cards > .e-con:hover,
#wj-cards > .elementor-element:hover {
  border-top-color: var(--wj-red);
  background: rgba(0, 48, 73, 0.03);
}
.wj-card__icon { margin-bottom: 1rem; transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
#wj-cards > *:hover .wj-card__icon { transform: translateY(-3px); }
.wj-card__name { margin-bottom: 0.5rem; }
.wj-card__def p { margin: 0; }
.wj-card__cta .elementor-button {
  border-bottom: 1.5px solid rgba(215, 50, 32, 0.45);
  border-radius: 0;
}
.wj-card__cta .elementor-button:hover { border-bottom-color: currentColor; }

/* ---------- Problem band ---------- */
.wj-problem__statement .elementor-heading-title { max-width: 34ch; }

/* Las filas del proceso se rehacen como tarjetas más abajo. */

/* ---------- Measure ---------- */
.wj-measure p { max-width: 52ch; margin: 0; }

/* ---------- Watermark ---------- */
#servicios,
#proceso,
#nosotros,
#contacto { position: relative; isolation: isolate; overflow: hidden; }

#servicios::before,
#proceso::before,
#nosotros::before,
#contacto::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: min(100%, 46rem);
  width: min(42vw, 30rem);
  background-repeat: no-repeat;
  background-size: auto 100%;
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}
/* Two supplied crops: each bleeds off its own outer edge, so the foliage always
   grows inward from the page margin. */
/* left:auto is load-bearing. Elementor styles .e-con::before for its background
   overlay with left:0, so setting only right:0 left BOTH offsets at zero — and
   in LTR the left offset wins, which threw the right-hand marks over to the
   left edge. The left-hand pair happened to look correct only because it agreed
   with Elementor's value. */
#proceso::before,
#contacto::before {
  left: auto;
  right: 0;
  background-image: url("/wp-content/uploads/wj-brand/images/bg-mark-right.webp");
  background-position: right center;
}
#servicios::before,
#nosotros::before {
  left: 0;
  right: auto;
  background-image: url("/wp-content/uploads/wj-brand/images/bg-mark-left.webp");
  background-position: left center;
}
@media (max-width: 1100px) {
    #servicios::before,
  #proceso::before,
  #nosotros::before,
  #contacto::before { width: min(48vw, 22rem); height: min(100%, 34rem); }
}
@media (max-width: 600px) {
    #servicios::before,
  #proceso::before,
  #nosotros::before,
  #contacto::before { display: none; }
}

/* ---------- Header ---------- */
/* RETIRADA · competia con el bloque final de cabecera.
   Decia: position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; */
/* Nav is a native inline icon-list; these rules only remove Elementor's icon
   column and restore the underline-from-centre interaction. */
.wj-nav .elementor-icon-list-items { margin: 0; padding: 0; }
.wj-nav .elementor-icon-list-item { padding: 0; }
.wj-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--wj-navy);
  text-decoration: none;
  transition: color 220ms ease;
}
.wj-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--wj-red);
  transform: scaleX(0);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wj-nav a:hover { color: var(--wj-red); }
.wj-nav a:hover::after { transform: scaleX(1); }

/* ---------- Contact details ----------
   Now built from native heading + icon-list widgets. Elementor's icon-list ships
   its own icon column and list resets; these rules strip that back so the block
   reads exactly as the hand-built <dl> did. */
/* The six children alternate label, content, label, content… so a two-column
   grid with default auto-flow reproduces the original <dl> exactly: label on the
   left, value on the right, without needing a wrapper per pair. */
/* A boxed Elementor container wraps its children in .e-con-inner, so the grid
   has to be applied there — on the outer element it would only ever see that
   single wrapper as its one grid item. */
#wj-booking__details > .e-con-inner,
#wj-booking__details:not(:has(> .e-con-inner)) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 1.5rem !important;
  align-items: baseline;
}
.wj-nap__label .elementor-heading-title { margin: 0; }
.wj-nap__address p { margin: 0; }

.elementor-widget-icon-list .elementor-icon-list-icon { display: none; }
.elementor-widget-icon-list .elementor-icon-list-item { padding: 0; }
.elementor-widget-icon-list .elementor-icon-list-text { padding: 0; }

/* Day on the left, time flushed right: the icon-list carries one string per row,
   so the split is done on the gap rather than with two spans. */
.wj-hours .elementor-icon-list-items { max-width: 22rem; }
.wj-hours .elementor-icon-list-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--wj-charcoal);
}
.wj-hours .elementor-icon-list-text { display: block; width: 100%; }

.wj-contact-list .elementor-icon-list-item { padding-block: 3px; }
.wj-contact-list a {
  color: var(--wj-charcoal);
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 26, 0.35);
  text-underline-offset: 2px;
}
.wj-contact-list a:hover { color: var(--wj-red); text-decoration-color: var(--wj-red); }

/* ---------- Footer ---------- */
#wj-footer { color: var(--wj-soft-white); }
.wj-footer__logo { margin-bottom: 1rem; }
#wj-footer__cols > .e-con { flex: 1 1 0; min-width: 0; }
/* Columns supply their own 1rem head-to-list spacing, so the container gap is
   flattened to keep the footer at the height it had before. */
#wj-footer__col, #wj-footer__col-1, #wj-footer__col-2 { gap: 1rem !important; }
.wj-footer__head .elementor-heading-title { margin: 0; }
.wj-footer__list .elementor-icon-list-item { padding: 0; }
.wj-footer__list .elementor-icon-list-text,
.wj-footer__list a {
  display: inline-block;
  padding: 5px 0;
  color: rgba(250, 249, 246, 0.88);
  text-decoration: none;
  transition: color 220ms ease, transform 220ms ease;
}
.wj-footer__list a:hover { color: var(--wj-light-blue); transform: translateX(3px); }
/* Pending-content markers keep the italic, lower-contrast treatment they had. */
#wj-footer__col-2 .elementor-icon-list-text {
  color: rgba(250, 249, 246, 0.55);
  font-style: italic;
  font-size: 0.82rem;
}
#wj-footer__bottom {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 249, 246, 0.18);
}
#wj-footer__bottom > .e-con-inner { flex-direction: row; justify-content: space-between; gap: 1rem; }
#wj-footer__top > .e-con-inner { gap: 2.5rem; }
.wj-footer__fine p { margin: 0; }

/* ---------- Buttons: lift on hover, settle on press ---------- */
.wj-btn .elementor-button {
  transition: transform 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.wj-btn .elementor-button:hover { transform: translateY(-2px); }
.wj-btn .elementor-button:active { transform: translateY(0); }
.wj-btn--primary .elementor-button:hover { box-shadow: 0 8px 20px -8px rgba(0, 48, 73, 0.4); }
.wj-btn--ghost .elementor-button:hover { border-color: var(--wj-navy) !important; background: rgba(0, 48, 73, 0.03); }

/* ---------- Focus ---------- */
:focus-visible { outline: 3px solid var(--wj-red); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #wj-cards { flex-wrap: wrap; }
  #wj-cards > * { flex: 1 1 30% !important; }
}
@media (max-width: 860px) {
  .wj-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  /* The nav is no longer hidden here — the hamburger panel owns it below 1100px. */
  #wj-cards > * { flex: 1 1 45% !important; }
}
@media (max-width: 520px) {
  #wj-cards > * { flex: 1 1 100% !important; }
  .wj-footer__cols { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Elementor gives every container a default 10px block padding. On the footer's
   nested containers that stacked up into ~55px of drift against the original
   hand-built footer, so it is zeroed where the design supplies its own spacing. */
#wj-footer__top,
#wj-footer__cols,
[id^="wj-footer__col"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#wj-footer__bottom { padding-bottom: 0 !important; }

/* ============================================================
   EDITORIAL HERO
   One photograph of Wanda and Javier carries the section. The copy sits in the
   negative space the photographer left on the left-hand side.

   The photo is a real <img> (Elementor image widget), not a CSS background, so
   it keeps its alt text and stays swappable from the media library. It is then
   pinned to the hero and cropped with object-fit, which gives background-like
   framing without giving up accessibility. object-position sits at 68% so both
   faces and Wanda's hair survive the crop while the left stays clear.
   ============================================================ */
#hero-wj {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Base height, tied to width so the box always stays wider than the
     photograph own 1.5 ratio. Below 1.5 the crop eats the sides, and the side
     it eats is the empty left the copy needs. The desktop override below
     raises it; nothing removes it, so no width can fall through uncovered. */
  min-height: clamp(480px, 62vw, 700px);
  justify-content: center;
  padding: 0 !important;
  isolation: isolate;
}

.hero-wj__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}
.hero-wj__photo .elementor-widget-container,
.hero-wj__photo figure,
.hero-wj__photo a { height: 100%; }
.hero-wj__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vertical framing is the fragile axis. Javier's head starts 6.3% down the
     frame, so the share of the crop taken off the top must stay under
     6.3 / (1 - 1.5 / heroRatio). At a 2:1 hero that ceiling is 25%, at 3:1 it is
     12.6% — which is why a centred crop decapitated him on wide, short screens.
     22% is safe to roughly 2.35:1; the steps below cover anything wider. */
  object-position: 68% 10%;
  display: block;
}

/* The legibility layer. Soft-white fading to nothing well before the subjects,
   so it reads as light in the room rather than as a gradient laid over a photo. */
#hero-wj::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The replacement photograph clears at 41.8% of its width, so the veil can
     hold over the copy (which ends near 38%) and be gone before the subjects
     rather than fading across them. */
  background: linear-gradient(
    90deg,
    rgba(250, 249, 246, 0.94) 0%,
    rgba(250, 249, 246, 0.88) 24%,
    rgba(250, 249, 246, 0.42) 36%,
    rgba(250, 249, 246, 0.00) 46%
  );
}

#hero-wj__content {
  position: relative;
  z-index: 2;
  width: min(100%, 620px);
  margin-right: auto;
  padding: 0 clamp(28px, 5vw, 88px) !important;
  align-items: flex-start;
  text-align: left;
}
/* The hero is a full-width container, so the content column is offset from the
   page edge rather than from a boxed wrapper. */
/* Desktop: the 45vw floor keeps the box from getting wide-and-short enough to
   crop into the faces. */
@media (min-width: 1200px) {
  #hero-wj { min-height: max(clamp(760px, 88vh, 920px), min(45vw, 1040px)); }
}
@media (min-width: 1441px) {
  #hero-wj__content { margin-left: calc((100vw - 1440px) / 2); }
}

.hero-wj__eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.hero-wj__eyebrow .elementor-heading-title::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--wj-red);
  flex: none;
}

.hero-wj__title .elementor-heading-title {
  margin: 0;
  max-width: 680px;
  font-size: clamp(54px, 5.1vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero-wj__title span { display: block; }
.hero-wj__title-accent { color: var(--wj-red); }

.hero-wj__description { margin-top: 28px; }
.hero-wj__description p {
  margin: 0;
  max-width: 560px;
  color: rgba(0, 48, 73, 0.82);
  font-size: clamp(18px, 1.25vw, 21px);
  line-height: 1.6;
  font-weight: 400;
}

#hero-wj__actions {
  margin-top: 34px;
  padding: 0 !important;
  /* Full width of the copy column, not shrink-to-fit: sized to content the row
     was 288px on a 342px column, which starved the longer label. */
  width: 100%;
  max-width: 100%;
  /* The copy column aligns its children to the start, which left this row
     sized to its content instead of to the column. */
  align-self: stretch;
  /* The pair always shares one line. Rather than let a long label push the
     second button onto its own row, the two split the available width equally
     and the type scales with the viewport, so they cannot overflow by
     construction — the row width, not the label length, sets the size. */
  flex-wrap: nowrap;
  gap: clamp(8px, 1.4vw, 14px);
}
.hero-wj__button { flex: 1 1 0; min-width: 0; }
.hero-wj__button .elementor-button {
  width: 100%;
  min-height: 54px;
  padding: 0 clamp(8px, 2vw, 28px);
  /* Labels stay on one line. "Recibe orientación" was breaking in two on the
     narrower breakpoints, which made the button look like a paragraph. */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: inherit;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 250ms ease, background-color 250ms ease, border-color 250ms ease;
}
.hero-wj__button--primary .elementor-button {
  background: var(--wj-red);
  color: #fff;
  border: 1px solid var(--wj-red);
}
.hero-wj__button--primary .elementor-button:hover {
  background: var(--wj-deep-red);
  border-color: var(--wj-deep-red);
  transform: translateY(-2px);
}
.hero-wj__button--secondary .elementor-button {
  background: rgba(250, 249, 246, 0.72);
  color: var(--wj-navy);
  border: 1px solid rgba(0, 48, 73, 0.32);
}
.hero-wj__button--secondary .elementor-button:hover {
  border-color: var(--wj-navy);
  transform: translateY(-2px);
}

/* Header sits over the photograph rather than as a bar above it. Absolute
   positioning rather than a negative margin, so the overlap no longer depends on
   a hard-coded header height — adding the hamburger changed that height and the
   -75px would have drifted out of sync. */
/* RETIRADA · competia con el bloque final de cabecera.
   Decia: background: transparent !important; position: absolute; top: 0; left: 0; right: 0; margin-bottom: 0; z-index: 30; */
/* Elementor gives every container 10px of block padding; zeroed here so the bar
   keeps the height the design intends. */
#wj-header__panel { padding-block: 0 !important; }

/* Above the hamburger breakpoint the wrapper steps out of the layout entirely,
   so the nav and the CTA become direct children of the header again and
   space-between lays them out as before: logo left, nav centred, CTA right.
   Wrapping them had made the panel one flex item, which bunched both to the
   left and left the right half of the bar empty. */
@media (min-width: 1101px) {
  #wj-header__panel { display: contents; }
  /* display:contents promotes the panel children into the header, so the bar
     now has four flex items instead of three and space-between spread them
     across the whole width. These two auto margins absorb the free space on
     either side of the nav pair, so "Seguros" and the remaining links read as
     one centred cluster with the logo left and the CTA right, as before. */
  #wj-seguros { margin-left: auto; }
  #wj-header .wj-nav { margin-right: auto; }
  /* Match the gap between "Seguros" and the rest to the spacing inside the nav
     itself (2rem), so it reads as one menu rather than a detached item. The
     auto margins above own the outer distribution, so narrowing this gap does
     not pull the logo or the CTA in. */
  #wj-header { column-gap: 2rem; }
}

/* Suppressing transitions while the viewport is being dragged. Crossing the
   breakpoint swaps the panel between an inline row and a hidden dropdown, and
   the transition animated that swap — which read as the menu flashing open for
   a few frames. Behaviour on click is untouched. */
.wj-resizing #wj-header__panel,
.wj-resizing #wj-header__panel * { transition: none !important; }
.wj-nav-toggle { margin: 0; }
/* RETIRADA · duplicaba el estado «pegada» con otro alfa (0.92 frente a
   0.96). El bloque final lo gobierna con la variable --wj-cab-fondo. */
/* Room between the last nav item and the CTA so they can never crowd. */
#wj-header > .e-con-inner { column-gap: clamp(16px, 3vw, 48px); }
@media (max-width: 1100px) {
  #wj-header { column-gap: clamp(16px, 3vw, 48px); }
}
.wj-nav { flex: 0 1 auto; min-width: 0; }

/* ---------- Hero: tablet ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Below a 1.5 hero ratio, cover crops the SIDES, and the side it discards is
     the empty left the copy needs — which is why the text ended up over Wanda
     and the wash had to cover her to stay legible. Tying height to width keeps
     the ratio above the photograph own 1.5 so the full frame stays visible. */
  .hero-wj__photo img { object-position: 50% 12%; }
  /* The photograph clears at 27.8% of its width, so the column is pulled back to
     roughly that and the type steps down to fit it. */
  #hero-wj__content { width: min(100%, 44%); }
  .hero-wj__title .elementor-heading-title { font-size: clamp(34px, 4.4vw, 50px); }
  .hero-wj__description p { font-size: clamp(15px, 1.6vw, 17px); }
  /* Keep the two CTAs on one line at this width; stacking them was what pushed
     the copy tall enough to ride up under the header. */
  /* The header is overlaid on the hero again, so its height is reserved before
     the copy is centred; without it the eyebrow rides up under the logo. */
  #hero-wj { padding-top: 104px !important; }
  /* The 44% column minus its gutters leaves ~122px per button at 768px — too
     little for the longer label at any legible size. The button row alone is
     allowed past the column edge (the copy above it is not), which reads fine:
     a solid and a bordered button over the photograph are still legible, and
     the pair stays on one line. */
  #hero-wj__actions { width: max(100%, 340px); }
  .hero-wj__button .elementor-button { min-height: 50px; padding: 0 14px; }
}

/* ---------- Hero: mobile ----------
   Text over faces is the failure mode here, so the composition changes rather
   than shrinks: copy first, photograph beneath it as a real block. */
@media (max-width: 767px) {
  #hero-wj {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 96px 0 0 !important;
  }
  #hero-wj::after { display: none; }
  .hero-wj__photo {
    position: relative;
    inset: auto;
    order: 2;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch;
    margin-top: 40px;
  }
  /* Elementor sizes image widgets from their own width control; the container
     also constrains children, so both are released here. */
  .hero-wj__photo .elementor-widget-container,
  .hero-wj__photo figure,
  .hero-wj__photo img { width: 100% !important; max-width: none !important; }
  .hero-wj__photo img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-position: 65% center;
  }
  #hero-wj__content {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 0 24px !important;
  }
  .hero-wj__title .elementor-heading-title { font-size: clamp(42px, 12vw, 58px); }
  #hero-wj__actions { flex-wrap: nowrap; }
  .hero-wj__button .elementor-button { letter-spacing: 0; }
}

/* ---------- Hero: load-in ----------
   Opacity and transform only, staggered, once. Nothing animates the photograph. */
@media (prefers-reduced-motion: no-preference) {
  .hero-wj__eyebrow,
  .hero-wj__title,
  .hero-wj__description,
  #hero-wj__actions {
    animation: hero-wj-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .hero-wj__title { animation-delay: 80ms; }
  .hero-wj__description { animation-delay: 160ms; }
  #hero-wj__actions { animation-delay: 240ms; }
}
@keyframes hero-wj-rise {
  from { opacity: 0; transform: translateY(12px); }
}

/* ============================================================
   HEADER — hamburger below 1100px
   Above the breakpoint the panel is an ordinary row. Below it the same
   container becomes a dropdown, so the nav and the CTA stay the same two
   Elementor widgets in both states and remain editable in the panel.
   ============================================================ */
.wj-nav-toggle { display: none; }

@media (max-width: 1100px) {
  /* The five links plus the CTA stop fitting on one line around here: the row
     was wrapping "Contacto" onto a second line and breaking the button label. */
  .wj-nav-toggle { display: block; }
  .wj-nav-toggle .elementor-button {
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-m, 5px);
  }
  /* Label kept for assistive tech, bars drawn instead. Three bars from one
     element via three tiny gradients — no extra markup needed. */
  .wj-nav-toggle .elementor-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .wj-nav-toggle .elementor-button {
    background-image:
      linear-gradient(var(--wj-navy), var(--wj-navy)),
      linear-gradient(var(--wj-navy), var(--wj-navy)),
      linear-gradient(var(--wj-navy), var(--wj-navy));
    background-size: 22px 2px;
    background-position: center 16px, center 22px, center 28px;
    background-repeat: no-repeat;
    transition: background-position 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .wj-nav-toggle .elementor-button:hover { background-color: rgba(0, 48, 73, 0.05); }

  /* Open: bars collapse to the middle and the cross takes over. */
  #wj-header.is-nav-open .wj-nav-toggle .elementor-button {
    background-position: center 22px, center 22px, center 22px;
  }
  #wj-header.is-nav-open .wj-nav-toggle .elementor-button::before,
  #wj-header.is-nav-open .wj-nav-toggle .elementor-button::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 22px;
    width: 22px;
    height: 2px;
    background: var(--wj-red);
  }
  #wj-header.is-nav-open .wj-nav-toggle .elementor-button::before { transform: rotate(45deg); }
  #wj-header.is-nav-open .wj-nav-toggle .elementor-button::after { transform: rotate(-45deg); }
  #wj-header.is-nav-open .wj-nav-toggle .elementor-button { background-image: none; }

  #wj-header__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 8px clamp(24px, 5vw, 48px) 24px !important;
    background: rgba(250, 249, 246, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--wj-rule);
    box-shadow: 0 16px 32px -18px rgba(0, 48, 73, 0.28);
    /* Opacity and transform rather than max-height: compositor-only, and it
       sidesteps animating into a content-dependent height. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 220ms;
  }
  #wj-header.is-nav-open #wj-header__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }
  /* Stack the links and give each a full-width row to tap. */
  #wj-header__panel .wj-nav,
  #wj-header__panel .wj-nav .elementor-icon-list-items { width: 100%; }
  #wj-header__panel .wj-nav .elementor-icon-list-items {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  #wj-header__panel .wj-nav .elementor-icon-list-item { width: 100%; }
  #wj-header__panel .wj-nav a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--wj-rule);
  }
  #wj-header__panel .wj-nav a::after { display: none; }
  #wj-header__panel .wj-nav .elementor-icon-list-item:last-child a { border-bottom: none; }
  /* The CTA moves inside the panel and spans it. */
  #wj-header__panel .wj-btn--primary { width: 100%; margin-top: 12px; }
  #wj-header__panel .wj-btn--primary .elementor-button { width: 100%; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  #wj-header__panel { transition: none; }
}

/* Very narrow phones (≤359px, essentially the old 320px handsets). Keeping the
   two CTAs on one line there needs the last few pixels back: tighter gutters,
   minimal button padding and a slightly smaller label. Below this the pair would
   have to stack, so the numbers are tuned to avoid that. */
@media (max-width: 359px) {
  #hero-wj__content { padding: 0 18px !important; }
  #hero-wj__actions { gap: 8px; }
  .hero-wj__button .elementor-button { padding: 0 8px; min-height: 50px; }
}

/* ============================================================
   HEADER — "Seguros" dropdown
   Trigger and entries are both plain Elementor widgets, so the labels and
   destinations stay editable in the panel. Only the open/close behaviour and
   the panel's position live here.
   ============================================================ */
#wj-seguros {
  position: relative;
  width: auto !important;
  flex-direction: column !important;
  align-items: stretch;
}

/* Trigger styled to match the sibling nav links, underline included. */
.wj-seguros__trigger .elementor-button {
  position: relative;
  padding: 6px 0;
  min-height: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: nowrap;
  transition: color 220ms ease;
}
.wj-seguros__trigger .elementor-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wj-red);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#wj-seguros:hover .wj-seguros__trigger .elementor-button,
#wj-seguros.is-open .wj-seguros__trigger .elementor-button { color: var(--wj-red); }
#wj-seguros:hover .wj-seguros__trigger .elementor-button::after,
#wj-seguros.is-open .wj-seguros__trigger .elementor-button::after { transform: scaleX(1); }

@media (min-width: 1101px) {
  /* Desktop: a panel hanging under the trigger. Opacity and transform only,
     and the wrapper keeps pointer events off while closed so it cannot
     intercept clicks on the hero beneath it. */
  .wj-seguros__list {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -6px);
    /* Elementor sizes the widget to its container, and the container is only as
       wide as the word "Seguros" — which squeezed every entry onto three lines.
       The panel is sized to its own content instead. */
    width: max-content !important;
    min-width: 15rem !important;
    max-width: 18rem;
    margin-top: 10px;
    padding: 10px 4px;
    background: rgba(250, 249, 246, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--wj-rule);
    border-radius: var(--radius-m, 5px);
    box-shadow: 0 18px 36px -20px rgba(0, 48, 73, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition:
      opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 200ms;
  }
  #wj-seguros:hover .wj-seguros__list,
  #wj-seguros:focus-within .wj-seguros__list,
  #wj-seguros.is-open .wj-seguros__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
  /* A hover bridge across the 10px gap, so the pointer can travel from the
     trigger to the panel without the panel closing under it. */
  #wj-seguros::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
  }
}

.wj-seguros__list .elementor-icon-list-item { padding: 0; }
.wj-seguros__list .elementor-icon-list-items { width: 100%; }
.wj-seguros__list .elementor-icon-list-text { white-space: nowrap; }
.wj-seguros__list a {
  display: block;
  padding: 9px 14px;
  color: var(--wj-navy);
  text-decoration: none;
  border-radius: 3px;
  transition: background 180ms ease, color 180ms ease;
}
.wj-seguros__list a:hover,
.wj-seguros__list a:focus-visible {
  background: rgba(0, 48, 73, 0.05);
  color: var(--wj-red);
}

@media (max-width: 1100px) {
  /* Inside the hamburger panel the list expands inline rather than floating. */
  #wj-seguros { width: 100% !important; }
  .wj-seguros__trigger .elementor-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 0;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--wj-rule);
  }
  .wj-seguros__trigger .elementor-button::after { display: none; }
  /* Chevron, rotated when open. */
  .wj-seguros__trigger .elementor-button-text::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  #wj-seguros.is-open .wj-seguros__trigger .elementor-button-text::after {
    transform: translateY(2px) rotate(-135deg);
  }
  .wj-seguros__list {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .wj-seguros__list > * { min-height: 0; }
  #wj-seguros.is-open .wj-seguros__list { grid-template-rows: 1fr; }
  .wj-seguros__list a {
    padding: 11px 0 11px 14px;
    font-size: 0.92rem;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wj-seguros__list { transition: none; }
}

/* ============================================================
   SERVICE DETAIL PANELS
   One panel per line, opened by that card's "Quiero más información".
   The coverage list runs in CSS columns rather than a single stack: twelve
   entries become four rows instead of twelve, so the section grows by a
   predictable band instead of pushing the rest of the page far down.
   ============================================================ */
#wj-detalles {
  overflow: hidden;
  max-height: 0;
  transition: max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}



.wj-detalle {
  display: none;
  margin-top: 14px;
  background: var(--wj-soft-white);
  border: 1px solid var(--wj-rule);
  border-top: 3px solid var(--wj-red);
  border-radius: var(--radius-m, 5px);
}
.wj-detalle.is-active { display: block; }

.wj-detalle__titulo .elementor-heading-title { margin: 0 0 6px; }
.wj-detalle__blurb p { margin: 0 0 16px; max-width: 68ch; }

/* The coverage list: multi-column so the panel stays short. */
.wj-detalle__lista .elementor-icon-list-items {
  columns: 3;
  column-gap: 32px;
  margin: 0;
  padding: 0;
}
.wj-detalle__lista .elementor-icon-list-item {
  break-inside: avoid;
  padding: 0;
  display: block;
}
.wj-detalle__lista a {
  display: block;
  padding: 6px 0 6px 16px;
  position: relative;
  color: var(--wj-navy);
  text-decoration: none;
  transition: color 180ms ease;
}
/* The arrow the brief used, drawn rather than typed, so it is not read aloud. */
.wj-detalle__lista a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid var(--wj-red);
  border-bottom: 1.5px solid var(--wj-red);
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}
.wj-detalle__lista a:hover,
.wj-detalle__lista a:focus-visible { color: var(--wj-red); }
.wj-detalle__lista a:hover::before { transform: rotate(-45deg) translate(2px, 2px); }

/* The card whose panel is open keeps its accent rule lit. */
#wj-cards > .e-con.is-abierta { border-top-color: var(--wj-red); background: rgba(0, 48, 73, 0.03); }

@media (max-width: 1100px) {
  .wj-detalle__lista .elementor-icon-list-items { columns: 2; }
}
@media (max-width: 620px) {
  .wj-detalle__lista .elementor-icon-list-items { columns: 1; }
  .wj-detalle { padding: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #wj-detalles { transition: none; }
}

/* --- WJ pie de panel --- */
.wj-detalle__pie {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 12px 16px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(0, 48, 73, 0.13);
}
.wj-detalle__pie .wj-detalle__pista { flex: 1 1 240px; margin: 0; }
.wj-detalle__pie .wj-detalle__pista p { margin: 0; }
.wj-detalle__pie .wj-detalle__cta { flex: 0 0 auto; }
.wj-detalle__cta .elementor-button { min-height: 48px; }
/* Las coberturas ahora son enlaces: se marcan como tales sin volverse ruidosas. */
.wj-detalle__lista .elementor-icon-list-item > a { text-decoration: none; }
.wj-detalle__lista .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: #D73220; text-decoration: underline;
}
.wj-detalle__lista .elementor-icon-list-item > a:focus-visible {
  outline: 2px solid #D73220; outline-offset: 2px; border-radius: 4px;
}
@media (max-width: 620px) {
  .wj-detalle__pie { flex-direction: column; align-items: stretch; }
  .wj-detalle__pie .wj-detalle__cta .elementor-button { width: 100%; }
}

/* === Servicios: cabecera y llamada centradas === */
/* La sección ya estaba centrada en la página; lo que iba alineado a la
   izquierda era el texto. Solo se toca la cabecera de Servicios: las de
   Proceso y Nosotros usan el mismo patrón y no se han pedido. */
#servicios #wj-section__head {
	text-align: center;
}
/* El eyebrow es un flex con su raya roja en ::before, así que centrarlo
   necesita justify-content, no text-align. */
#servicios .wj-eyebrow .elementor-heading-title {
	justify-content: center;
}
/* El icono, el título y la descripción de cada tarjeta ya estaban centrados;
   el enlace era lo único que quedaba a la izquierda. */
#wj-cards .wj-card__cta {
	text-align: center;
}

/* === Sección Problema: dos bandas === */
/* Los contenedores de Elementor se gobiernan por variables propias
   (--flex-direction, --width). Se fijan esas en vez de sobrescribir display y
   width, para no pelear con su sistema ni romperse en la próxima versión. */

#problema {
	padding: 0 !important;
	background: var(--wj-cream);
	overflow: hidden;
}

/* ---------- Banda 1: cabecera a dos columnas ---------- */
#wj-prob__b1 {
	--flex-direction: row;
	--align-items: flex-start;
	--gap: 0 clamp(28px, 5vw, 72px);
	max-width: 1184px;
	margin: 0 auto;
	padding: clamp(56px, 7vw, 96px) 20px clamp(48px, 6vw, 80px);
	position: relative;
	isolation: isolate;
}
#wj-prob__b1-izq { --width: 58%; }
#wj-prob__b1-der {
	--width: 38%;
	/* La divisoria vive en la columna derecha para no depender de la altura
	   del titular, que pasa de una a tres líneas según el ancho. */
	border-left: 1px solid rgba(120, 0, 0, 0.28);
	padding-left: clamp(24px, 3vw, 44px);
	padding-top: 0.5rem;
}

.wj-prob__eyebrow { margin-bottom: 1.1rem; }
.wj-prob__titulo .elementor-heading-title { letter-spacing: -0.015em; }

/* Raya corta bajo el titular, como en la maqueta. */
.wj-prob__titulo::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin-top: clamp(20px, 2.4vw, 32px);
	background: var(--wj-deep-red);
}

.wj-prob__apoyo p:last-child { margin-bottom: 0; }

/* ---------- Banda 2: foto + panel ---------- */
#wj-prob__b2 {
	--flex-direction: row;
	--align-items: stretch;
	--gap: 0px 0px;
	width: 100%;
	background: var(--wj-cream);
	min-height: clamp(360px, 42vw, 560px);
}

#wj-prob__foto {
	--width: 52%;
	/* Sin esto el panel, que crece, la comprime por debajo de su medida. */
	--flex-shrink: 0;
	position: relative;
	/* Tono de reserva mientras no haya foto: el hueco se ve como hueco. */
	background: rgba(0, 48, 73, 0.06);
}
/* La imagen llena su mitad sea cual sea su proporción original. */
.wj-prob__img,
.wj-prob__img .elementor-widget-container,
.wj-prob__img figure,
.wj-prob__img a { height: 100%; display: block; margin: 0; }
.wj-prob__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Desplazado a la derecha y algo hacia arriba: el panel curvo se monta sobre
	   el lado derecho de la foto, y con el encuadre centrado el abuelo quedaba a
	   24px del borde. Así el grupo se aparta del panel y las caras, que están en
	   la mitad superior, sobreviven al recorte vertical de las pantallas anchas. */
	object-position: 72% 42%;
	display: block;
}

#wj-prob__panel {
	--width: auto;
	--flex-grow: 1;
	--justify-content: center;
	background: var(--wj-soft-white);
	padding: clamp(40px, 5vw, 76px) clamp(24px, 5vw, 84px);

	/* La curva. Un radio elíptico grande en el lado izquierdo reproduce el
	   borde orgánico de la maqueta, y el margen negativo lo monta sobre la
	   foto. Con radio y no con clip-path: si un navegador no lo aplicara,
	   queda un panel recto y legible en vez de un recorte roto. */
	margin-left: clamp(-120px, -7vw, -40px);
	border-radius: clamp(60px, 9vw, 140px) 0 0 clamp(60px, 9vw, 140px) / 50% 0 0 50%;
	position: relative;
	z-index: 1;
}

.wj-prob__eyebrow--teal { margin-bottom: 0.9rem; }
.wj-prob__titulo2 { margin-bottom: 1rem; }
.wj-prob__titulo2 .elementor-heading-title { letter-spacing: -0.01em; }
.wj-prob__texto p:last-child { margin-bottom: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	#wj-prob__b2 { min-height: 0; }
	#wj-prob__foto { --width: 46%; }
	#wj-prob__panel {
		margin-left: clamp(-72px, -5vw, -32px);
		border-radius: clamp(44px, 7vw, 88px) 0 0 clamp(44px, 7vw, 88px) / 50% 0 0 50%;
	}
}

/* ---------- Móvil: las bandas se apilan ---------- */
@media (max-width: 820px) {
	#wj-prob__b1 { --flex-direction: column; --gap: clamp(24px, 5vw, 36px) 0; }
	#wj-prob__b1-izq { --width: 100%; }
	#wj-prob__b1-der {
		--width: 100%;
		/* Apilado, una línea vertical no separa nada: pasa a horizontal. */
		border-left: 0;
		border-top: 1px solid rgba(120, 0, 0, 0.28);
		padding-left: 0;
		padding-top: clamp(20px, 4vw, 28px);
	}
	#wj-prob__b2 { --flex-direction: column; }
	#wj-prob__foto { --width: 100%; aspect-ratio: 3 / 2; }
	#wj-prob__panel {
		--width: 100%;
		/* La curva pasa arriba: es donde ahora se tocan foto y panel. */
		margin-left: 0;
		margin-top: clamp(-56px, -9vw, -28px);
		border-radius: clamp(40px, 9vw, 72px) clamp(40px, 9vw, 72px) 0 0 / clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px) 0 0;
	}
}

/* Por encima de la retícula, la banda 1 se alinea exactamente con el resto
   de las secciones; por debajo conserva su aire lateral. */
@media (min-width: 1224px) {
	#wj-prob__b1 { padding-left: 0; padding-right: 0; }
}

/* === Tarjetas: llamadas a la acción alineadas === */
/* Las tarjetas ya miden todas lo mismo, pero el enlace quedaba a distinta
   altura según cuántas líneas ocuparan el título y la descripción. Empujarlo
   al fondo con margin-top:auto los deja a todos al nivel del más bajo, sin
   tocar el texto ni forzar alturas fijas que se romperían al traducir o al
   cambiar una descripción. */
#wj-cards .wj-card__cta {
	margin-top: auto;
}

/* === Servicios: subtítulo === */
/* Reutiliza .wj-measure (medida de lectura de 52ch). Aquí solo hace falta
   centrarlo, porque esta cabecera va centrada y la de Nosotros no. */
#servicios .wj-section__sub {
	margin-top: 0.9rem;
}
#servicios .wj-section__sub p {
	margin-left: auto;
	margin-right: auto;
	color: rgba(0, 48, 73, 0.78);
}

/* === Panel de detalle dentro de la cuadrícula (móvil) === */
/* Por debajo de 520px el JavaScript mueve #wj-detalles dentro de #wj-cards,
   detrás de la tarjeta abierta. Ahí pasa a ser un hijo más de la cuadrícula y
   heredaría las reglas de tarjeta: el borde superior de 3px, el fondo al pasar
   el ratón y el desplazamiento del icono. Se le quitan. */
#wj-cards > #wj-detalles {
	flex: 1 1 100% !important;
	width: 100%;
	border-top: 0 !important;
	background: transparent !important;
	transition: max-height 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#wj-cards > #wj-detalles:hover {
	background: transparent !important;
	border-top-color: transparent !important;
}
/* El margen superior lo daba la separación con la cuadrícula; aquí lo aporta
   el propio hueco de 1px entre elementos. */
#wj-cards > #wj-detalles .wj-detalle {
	margin-top: 0;
}

/* === Problema: enlace de la banda 2 === */
/* Enlace de texto, no botón: esta sección es de confianza, no de conversión,
   y un botón sólido competiría con el CTA principal de la página.
   La flecha va en ::after para que el texto editable en Elementor quede
   limpio y para que un lector de pantalla no lea el símbolo. */
.wj-prob__cta {
	margin-top: 1.4rem;
}
.wj-prob__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: #1F6B63;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
}
.wj-prob__cta .elementor-button-text::after {
	content: "→";
	display: inline-block;
	margin-left: 0.5rem;
	transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wj-prob__cta .elementor-button:hover,
.wj-prob__cta .elementor-button:focus-visible {
	background: none;
	color: var(--wj-deep-red);
}
.wj-prob__cta .elementor-button:hover .elementor-button-text::after {
	transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
	.wj-prob__cta .elementor-button-text::after { transition: none; }
	.wj-prob__cta .elementor-button:hover .elementor-button-text::after { transform: none; }
}

/* === Etapas de vida sobre la fotografía === */
/* La capa de indicadores calca la caja de la imagen; el JavaScript coloca cada
   punto en porcentaje dentro de ella. */
.wj-etapas__capa {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

.wj-etapa-punto {
	position: absolute;
	transform: translate(-50%, -50%);
	/* 44px de área tocable aunque el círculo visible sea de 26. */
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
	pointer-events: auto;
	/* El que se está señalando pasa por delante de sus vecinos. */
	z-index: 1;
}
.wj-etapa-punto:hover,
.wj-etapa-punto:focus,
.wj-etapa-punto:focus-visible,
.wj-etapa-punto:active,
.wj-etapa-punto.is-active {
	background: none !important;
	box-shadow: none !important;
	z-index: 3;
}
.wj-etapa-punto__mas {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	/* Rojo de marca, sin variantes: es el único acento saturado de WJ. */
	background: var(--wj-red);
	transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Un punto, sin signo dentro. El anillo blanco lo despega de la fotografía
   sin necesidad de sombra. */
.wj-etapa-punto__mas {
	border: 1.5px solid #fff;
}


.wj-etapa-punto:hover .wj-etapa-punto__mas,
.wj-etapa-punto:focus-visible .wj-etapa-punto__mas,
.wj-etapa-punto.is-active .wj-etapa-punto__mas {
	/* Solo crece el círculo. Nada de halos ni recuadros alrededor. */
	transform: scale(1.35);
}
/* El foco de teclado se marca en el propio círculo, para no dibujar una caja. */
.wj-etapa-punto:focus-visible .wj-etapa-punto__mas {
	outline: 2px solid var(--wj-navy);
	outline-offset: 3px;
}
/* Abierto: el punto se oscurece al rojo profundo de marca. */
.wj-etapa-punto.is-active .wj-etapa-punto__mas { background: var(--wj-deep-red); }

/* Pista al pasar el ratón. Solo con puntero fino: en táctil no hay hover y
   ocuparía sitio sin que nadie pueda verla. */
.wj-etapa-punto__pista {
	position: absolute;
	bottom: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 5px 10px;
	border-radius: 4px;
	background: var(--wj-navy);
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.wj-etapa-punto:hover .wj-etapa-punto__pista,
	.wj-etapa-punto:focus-visible .wj-etapa-punto__pista {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}
@media (hover: none) {
	.wj-etapa-punto__pista { display: none; }
}

/* ---------- Tarjetas ---------- */
#wj-etapas { position: relative; }
/* Los contenedores de Elementor no conservan las clases propias: se
   seleccionan por id, que sí sobrevive. */
#wj-etapas > [id^="wj-etapa-"] { display: none; position: relative; }
#wj-etapas > [id^="wj-etapa-"].is-active {
	display: block;
	animation: wj-entra 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Entra desde abajo y aparece: da sensación de que la tarjeta llega, no de
   que el contenido salta de golpe. */
@keyframes wj-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
/* Los hijos entran escalonados: se lee como una secuencia, no como un bloque. */
#wj-etapas > [id^="wj-etapa-"].is-active > * {
	animation: wj-entra 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#wj-etapas > [id^="wj-etapa-"].is-active > *:nth-child(2) { animation-delay: 45ms; }
#wj-etapas > [id^="wj-etapa-"].is-active > *:nth-child(3) { animation-delay: 90ms; }
#wj-etapas > [id^="wj-etapa-"].is-active > *:nth-child(4) { animation-delay: 135ms; }
#wj-etapas > [id^="wj-etapa-"].is-active > *:nth-child(5) { animation-delay: 180ms; }
#wj-etapas > [id^="wj-etapa-"].is-active > *:nth-child(6) { animation-delay: 225ms; }

.wj-etapa__cerrar {
	position: absolute;
	/* Dentro de la caja: fuera quedaba flotando en el hueco y el clic no
	   siempre llegaba. */
	top: 0;
	right: 0;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wj-navy);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 180ms ease;
}
.wj-etapa__cerrar:hover, .wj-etapa__cerrar:focus-visible { opacity: 1; }

.wj-etapa__eyebrow { margin-bottom: 0.6rem; }
.wj-etapa__titulo { margin-bottom: 0.7rem; padding-right: 34px; }
.wj-etapa__titulo .elementor-heading-title:focus { outline: none; }
.wj-etapa__texto { margin-bottom: 1.1rem; }
.wj-etapa__texto p { margin: 0; max-width: 52ch; }

/* Máximo cuatro protecciones: si crecen, esto deja de ser una pista y pasa a
   ser un catálogo. */
.wj-etapa__lista { margin-bottom: 1.3rem; }
.wj-etapa__lista .elementor-icon-list-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 22px;
}
.wj-etapa__lista .elementor-icon-list-item {
	position: relative;
	padding-left: 16px;
	line-height: 1.4;
}
.wj-etapa__lista .elementor-icon-list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wj-red);
}

.wj-etapa__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	background: var(--wj-red);
	border-radius: 6px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wj-etapa__cta .elementor-button:hover,
.wj-etapa__cta .elementor-button:focus-visible { background: var(--wj-deep-red); }

/* Lo que se ve cuando no hay etapa abierta. */
.wj-oculto { display: none !important; }

/* ---------- Selector de pantallas estrechas ---------- */
.wj-etapas__selector { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
.wj-etapas__chip {
	min-height: 40px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--wj-rule);
	border-radius: 999px;
	color: var(--wj-navy);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.wj-etapas__chip:hover { border-color: var(--wj-red); }
.wj-etapas__chip.is-active {
	background: var(--wj-red);
	border-color: var(--wj-red);
	color: #fff;
}

@media (max-width: 820px) {
	/* En táctil los indicadores sobre una foto pequeña son difíciles de acertar:
	   la lista de etapas pasa a ser el control principal. */
	.wj-etapas__capa { display: none; }
	.wj-etapas__selector { display: flex; }
	.wj-etapa__lista .elementor-icon-list-items { grid-template-columns: 1fr; }
	.wj-etapa__titulo .elementor-heading-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.wj-etapa-punto__mas,
	.wj-etapa-punto__mas::before,
	.wj-etapa-punto__mas::after,
	.wj-etapa-punto__pista,
	.wj-etapa__cta .elementor-button { transition: none; }
	#wj-etapas > [id^="wj-etapa-"].is-active,
	#wj-etapas > [id^="wj-etapa-"].is-active > * { animation: none; }
}

/* El enlace de la banda 2 apunta hacia abajo: lleva a la sección siguiente,
   no a una de más arriba. */
.wj-prob__cta .elementor-button-text::after { content: "↓"; }
.wj-prob__cta .elementor-button:hover .elementor-button-text::after { transform: translateY(3px); }

/* === Etapas: anchos medios y estrechos ===
   Los puntos sobre la foto solo se pueden acertar cuando la foto es grande.
   Por debajo de 1024 la banda se apila y el selector pasa a ser el único
   control; antes esto ocurría a 820 y entre medias quedaba una foto estrecha
   con los indicadores amontonados encima. */
@media (max-width: 1024px) {
	#wj-prob__b2   { --flex-direction: column; min-height: 0; }
	#wj-prob__foto { --width: 100%; --flex-shrink: 1; aspect-ratio: 3 / 2; }
	#wj-prob__panel {
		--width: 100%;
		margin-left: 0;
		margin-top: clamp(-56px, -9vw, -28px);
		border-radius: clamp(40px, 9vw, 72px) clamp(40px, 9vw, 72px) 0 0 / clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px) 0 0;
		padding: clamp(36px, 5vw, 56px) clamp(22px, 5vw, 48px) clamp(40px, 7vw, 60px);
	}

	.wj-etapas__capa     { display: none; }
	/* Sin puntos sobre la foto, la lista de etapas quedaba ocupando sitio
	   antes de que nadie la pidiera. Ahora la abre el enlace de la banda. */
	.wj-etapas__selector { display: none; }
	#wj-prob__panel.etapas-a-la-vista .wj-etapas__selector { display: flex; }

	/* Apilado no hay ancho para dos columnas de coberturas. */
	.wj-etapa__lista .elementor-icon-list-items { grid-template-columns: 1fr; gap: 12px 0; }
	.wj-etapa__titulo .elementor-heading-title  { font-size: 22px; }
}

/* El selector es ahora un bloque con entidad propia, no una fila suelta
   pegada a la tarjeta: se separa con su propia regla. */
.wj-etapas__selector {
	gap: 10px;
	margin-bottom: clamp(20px, 4vw, 28px);
	padding-bottom: clamp(18px, 3.5vw, 24px);
	border-bottom: 1px solid var(--wj-rule);
}
.wj-etapas__chip { flex: 0 0 auto; }

@media (max-width: 1024px) {
	.wj-etapa__eyebrow { margin-bottom: 0.5rem; }
	.wj-etapa__titulo  { margin-bottom: 0.85rem; padding-right: 40px; }
	.wj-etapa__texto   { margin-bottom: 1.35rem; }
	.wj-etapa__lista   { margin-bottom: 1.6rem; }
	/* A todo el ancho: apilado, un botón corto deja el bloque descolgado. */
	.wj-etapa__cta .elementor-button {
		width: 100%;
		justify-content: center;
		min-height: 50px;
		text-align: center;
	}
	.wj-etapa__cerrar { top: -4px; right: -4px; }
}

@media (max-width: 480px) {
	/* Con muy poco ancho las etiquetas cortas siguen cabiendo de dos en dos. */
	.wj-etapas__selector { gap: 8px; }
	.wj-etapas__chip { font-size: 13px; padding: 8px 12px; }
	.wj-etapa__cta .elementor-button { font-size: 14px; padding: 0 14px; }
}

/* === Etapas: ritmo interior de la tarjeta ===
   Elementor anula el margen inferior de los widgets y deja la separación en
   manos del gap del contenedor, que aquí es 0. Por eso título, párrafo, lista
   y botón salían pegados: el ritmo se fija con el gap, no con márgenes. */
#wj-etapas > [id^="wj-etapa-"].is-active {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
/* El antetítulo pertenece al titular: va más cerca de él que del resto. */
#wj-etapas > [id^="wj-etapa-"].is-active > .wj-etapa__eyebrow { margin-bottom: -6px; }
/* La llamada a la acción cierra el bloque: un respiro extra la separa de la
   lista de coberturas. */
#wj-etapas > [id^="wj-etapa-"].is-active > .wj-etapa__cta { margin-top: 6px; }

@media (max-width: 1024px) {
	#wj-etapas > [id^="wj-etapa-"].is-active { gap: 16px; }
	#wj-etapas > [id^="wj-etapa-"].is-active > .wj-etapa__cta { margin-top: 8px; }
}

/* ===================== Proceso: cuatro tarjetas ===================== */
/* Antes era una lista de bandas horizontales. Pasa a ser una retícula de
   tarjetas: cada paso se lee como una unidad y puede ampliarse sin empujar
   al resto de la página. */
#wj-rows {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Cada tarjeta crece solo lo que necesita: al desplegar una, las otras
	   tres no heredan su altura. */
	align-items: start;
	gap: 20px;
	border-top: 0;
}

#wj-rows > .e-con,
#wj-rows > .elementor-element,
#cr-val__lista > .e-con,
#cr-val__lista > .elementor-element {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Elementor anula los márgenes de sus widgets y deja la separación en el
	   gap del contenedor: el ritmo interior se fija aquí. */
	gap: 12px;
	padding: 26px 22px 22px;
	background: var(--wj-soft-white);
	border: 1px solid var(--wj-rule);
	border-radius: 14px;
	transition: border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            box-shadow 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#wj-rows > *:hover,
#wj-rows > *:focus-within,
#cr-val__lista > *:hover,
#cr-val__lista > *:focus-within {
	border-color: rgba(215, 50, 32, 0.45);
	box-shadow: 0 10px 26px rgba(0, 48, 73, 0.08);
	transform: translateY(-3px);
}
#wj-rows > .esta-abierto {
	border-color: var(--wj-red);
	box-shadow: 0 12px 30px rgba(0, 48, 73, 0.10);
}

/* El número ordena la secuencia; no compite con el título. */
.wj-row__num .elementor-heading-title {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(120, 0, 0, 0.55);
}

.wj-row__icono { line-height: 0; }
.wj-row__icono img {
	width: 44px;
	height: 44px;
	display: block;
}

.wj-row__label .elementor-heading-title {
	font-family: Montserrat, sans-serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wj-navy);
}
.wj-row__desc p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

/* ---------- La parte que se amplía ---------- */
/* De 0fr a 1fr: la caja mide lo que mida el texto sin tener que calcular
   alturas en JavaScript. Donde no se pueda interpolar, abre de golpe, que
   sigue siendo correcto. */
.wj-row__panel {
	display: grid;
	grid-template-rows: 0fr;
	width: 100%;
	transition: grid-template-rows 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wj-row__panel-int { overflow: hidden; }
.esta-abierto .wj-row__panel { grid-template-rows: 1fr; }

.wj-row__largo p {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--wj-rule);
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(26, 26, 26, 0.86);
}

/* ---------- El botón de ampliar ---------- */
.wj-row__mas {
	/* Empujado al pie de la tarjeta para que los cuatro enlaces queden a la
	   misma altura mientras están cerradas. */
	margin-top: auto;
	padding: 2px 0;
	background: none;
	border: 0;
	/* El mismo subrayado que los enlaces de las tarjetas de servicios: es el
	   patrón que el sitio ya usa para «ver más». */
	border-bottom: 1.5px solid rgba(215, 50, 32, 0.45);
	border-radius: 0;
	color: var(--wj-red);
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 200ms ease, color 200ms ease;
}
.wj-row__mas:hover,
.wj-row__mas:focus-visible { border-bottom-color: currentColor; }
.esta-abierto .wj-row__mas { color: var(--wj-deep-red); border-bottom-color: currentColor; }

/* ---------- Entradilla de la cabecera ---------- */
.wj-proceso__intro p {
	margin: 0.9rem 0 0;
	max-width: 60ch;
}

/* ---------- Pie: el monograma parte la regla ---------- */
#wj-proceso__pie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: clamp(36px, 5vw, 56px);
	text-align: center;
}
/* La regla se dibuja a los lados del monograma en vez de por detrás: así no
   hace falta tapar el fondo con un recuadro. */
.wj-proceso__marca {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 28px);
	width: 100%;
	margin-bottom: 6px;
}
.wj-proceso__marca::before,
.wj-proceso__marca::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--wj-rule);
}
.wj-proceso__marca img {
	width: auto;
	height: 34px;
	display: block;
}
.wj-proceso__cierre .elementor-heading-title,
.wj-proceso__lema .elementor-heading-title { max-width: 46ch; margin: 0 auto; }
.wj-proceso__lema .elementor-heading-title { color: rgba(0, 48, 73, 0.72); }

/* ---------- Anchos intermedios y estrechos ---------- */
@media (max-width: 1100px) {
	#wj-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	#wj-rows { grid-template-columns: 1fr; gap: 14px; }
	#wj-rows > .e-con,
	#wj-rows > .elementor-element { padding: 22px 18px 18px; }
	/* Apilado, la tarjeta no necesita levantarse al pasar el dedo. */
	#wj-rows > *:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#wj-rows > .e-con,
	#wj-rows > .elementor-element,
	.wj-row__panel,
	.wj-row__mas { transition: none; }
	#wj-rows > *:hover { transform: none; }
}

/* El cierre va en dos o tres líneas cortas: sin interlineado propio se
   amontonan. */
.wj-proceso__cierre .elementor-heading-title { line-height: 1.35; }
.wj-proceso__lema .elementor-heading-title { line-height: 1.4; }

/* === Proceso: todo centrado === */
#proceso #wj-section__head-1 { text-align: center; }
/* El antetítulo es un flex con su raya roja en ::before, así que centrarlo
   pide justify-content, no text-align. */
#proceso .wj-eyebrow .elementor-heading-title { justify-content: center; }
.wj-proceso__intro p { margin-left: auto; margin-right: auto; }

#wj-rows > .e-con,
#wj-rows > .elementor-element,
#cr-val__lista > .e-con,
#cr-val__lista > .elementor-element {
	align-items: center;
	text-align: center;
}
.wj-row__desc p,
.wj-row__largo p { margin-left: auto; margin-right: auto; }

/* La flecha del enlace de la banda 2 se vuelve hacia arriba cuando lo que
   hace es recoger la lista de etapas en vez de bajar de sección. */
.wj-prob__cta a[aria-expanded="true"] .elementor-button-text::after { content: "↑"; }

/* === Proceso: que se lea como un recorrido, no como cuatro fichas sueltas ===
   Dos cosas lo consiguen: el número deja de ser una etiqueta y pasa a ser una
   marca de paso, y entre tarjeta y tarjeta se dibuja el tramo de camino que
   las une. El tramo vive en el hueco de la retícula, así que no desplaza nada. */

.wj-row__num { position: relative; z-index: 1; }
.wj-row__num .elementor-heading-title {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	margin: 0 auto;
	border: 1.5px solid rgba(120, 0, 0, 0.35);
	border-radius: 50%;
	background: var(--wj-soft-white);
	color: var(--wj-deep-red);
	font-size: 12px;
	/* Dentro de un círculo, el espaciado ancho descentraba el número. */
	letter-spacing: 0.04em;
	transition: background 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
	            color 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* El paso en el que estás se marca en el recorrido. */
#wj-rows > *:hover .wj-row__num .elementor-heading-title,
#wj-rows > *:focus-within .wj-row__num .elementor-heading-title,
#wj-rows > .esta-abierto .wj-row__num .elementor-heading-title {
	background: var(--wj-red);
	border-color: var(--wj-red);
	color: #fff;
}

/* El tramo de camino: una línea desde el borde de la tarjeta hasta la
   siguiente, a la altura de la marca (26 px de relleno + medio círculo). */
#wj-rows > .e-con::before,
#wj-rows > .elementor-element::before {
	content: "";
	position: absolute;
	top: 44px;
	left: 100%;
	width: 20px;
	height: 1.5px;
	background: rgba(120, 0, 0, 0.22);
	pointer-events: none;
}
/* Y su punta, para que el recorrido tenga sentido de avance. */
#wj-rows > .e-con::after,
#wj-rows > .elementor-element::after {
	content: "";
	position: absolute;
	top: 44px;
	left: calc(100% + 13px);
	width: 5px;
	height: 5px;
	margin-top: -3px;
	border-top: 1.5px solid rgba(120, 0, 0, 0.38);
	border-right: 1.5px solid rgba(120, 0, 0, 0.38);
	transform: rotate(45deg);
	pointer-events: none;
}
/* El último paso no lleva a ningún sitio. */
#wj-rows > *:last-child::before,
#wj-rows > *:last-child::after { content: none; }

@media (max-width: 1100px) {
	/* A dos columnas, la tarjeta par cierra la fila: su tramo apuntaría al
	   margen. */
	#wj-rows > *:nth-child(2n)::before,
	#wj-rows > *:nth-child(2n)::after { content: none; }
}

@media (max-width: 620px) {
	/* Apilado, el recorrido baja en vertical. */
	#wj-rows > .e-con::before,
	#wj-rows > .elementor-element::before,
	#wj-rows > *:nth-child(2n)::before {
		content: "";
		top: 100%;
		left: 50%;
		width: 1.5px;
		height: 14px;
		margin-left: -0.75px;
	}
	#wj-rows > .e-con::after,
	#wj-rows > .elementor-element::after,
	#wj-rows > *:nth-child(2n)::after {
		content: "";
		top: calc(100% + 7px);
		left: 50%;
		margin: -3px 0 0 -3px;
		transform: rotate(135deg);
	}
	#wj-rows > *:last-child::before,
	#wj-rows > *:last-child::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wj-row__num .elementor-heading-title { transition: none; }
}

/* === «Acompañar»: los sucesos que piden revisar el plan === */
/* Siete entradas de dos partes se leen mal centradas: la lista se alinea a la
   izquierda aunque el resto de la tarjeta vaya centrado. */
.wj-row__eventos ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	text-align: left;
}
.wj-row__eventos li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 16px;
	line-height: 1.5;
}
.wj-row__eventos li:last-child { margin-bottom: 0; }
.wj-row__eventos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wj-red);
}
/* El suceso encabeza; debajo, qué conviene mirar. */
.wj-row__eventos strong {
	display: block;
	color: var(--wj-navy);
	font-weight: 700;
}

/* === «Proteger»: los tres subpasos === */
/* Numerados con contador, no con la numeración del navegador, para que la
   marca repita en pequeño el círculo de los pasos de la sección. */
.wj-row__pasos ol {
	list-style: none;
	counter-reset: wj-subpaso;
	margin: 12px 0 0;
	padding: 0;
	text-align: left;
}
.wj-row__pasos li {
	counter-increment: wj-subpaso;
	position: relative;
	margin: 0 0 12px;
	padding-left: 28px;
	line-height: 1.5;
}
.wj-row__pasos li:last-child { margin-bottom: 0; }
.wj-row__pasos li::before {
	content: counter(wj-subpaso);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 19px;
	height: 19px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(120, 0, 0, 0.35);
	border-radius: 50%;
	color: var(--wj-deep-red);
	font-family: Montserrat, sans-serif;
	font-size: 10px;
	font-weight: 700;
}
.wj-row__pasos strong {
	display: block;
	color: var(--wj-navy);
	font-weight: 700;
}

/* ===================== Nosotros ===================== */
/* Tres bandas: texto junto a la foto, las dos personas con el lema, y los
   valores. Los huecos de imagen quedan reservados y vacíos hasta que lleguen
   las fotos: se rellenan sin rehacer la retícula. */

#nosotros { overflow: hidden; }

/* ---------- Banda 1: texto + foto ---------- */
#wj-nos__top {
	--flex-direction: row;
	--align-items: center;
	--gap: 0px clamp(32px, 5vw, 72px);
	width: 100%;
}
#wj-nos__izq { --width: 52%; --flex-shrink: 1; }

/* La foto sangra hasta el borde derecho de la pantalla, como en la maqueta.
   El margen negativo la saca del ancho de la retícula sin tocar el resto. */
#wj-nos__foto {
	/* La caja se ensancha hasta el borde de la pantalla y el margen negativo
	   devuelve ese exceso a la retícula: la columna de texto no se entera.
	   Un margen negativo por sí solo no estira una caja de ancho fijo. */
	--width: calc(48% + (100vw - 100%) / 2);
	--flex-shrink: 0;
	margin-right: calc(50% - 50vw);
	aspect-ratio: 3 / 2;
	border-radius: 10px 0 0 10px;
	/* Reserva visible: se ve que ahí va una imagen, no que falta algo. */
	background: rgba(0, 48, 73, 0.06);
}

.wj-nos__titulo { margin: 0.7rem 0 1.1rem; }
.wj-nos__titulo .elementor-heading-title { line-height: 1.1; letter-spacing: -0.02em; }
/* La segunda línea, en rojo: el mismo recurso que el titular del hero. */
.wj-nos__acento { color: var(--wj-deep-red); }

.wj-nos__intro p { margin: 0; max-width: 52ch; }

/* Las dos cifras, separadas por una línea vertical. */
#wj-nos__cifras {
	--flex-direction: row;
	--align-items: stretch;
	--gap: 0px clamp(24px, 3vw, 40px);
	margin-top: clamp(24px, 3.5vw, 40px);
}
#wj-nos__cifra-2 { padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--wj-rule); }
.wj-nos__n .elementor-heading-title { line-height: 1; letter-spacing: -0.02em; }
.wj-nos__et { margin-top: 6px; }

/* ---------- Banda 2: personas y lema ---------- */
#wj-nos__medio {
	--flex-direction: row;
	--align-items: stretch;
	--gap: 0px clamp(20px, 2.5vw, 32px);
	width: 100%;
	margin-top: clamp(40px, 5vw, 68px);
}
#wj-nos__p1, #wj-nos__p2 {
	--flex-direction: row;
	--align-items: center;
	--width: 30%;
	--gap: 0px 18px;
	padding: 20px;
	background: var(--wj-soft-white);
	border: 1px solid var(--wj-rule);
	border-radius: 12px;
}
#wj-nos__p1__foto, #wj-nos__p2__foto {
	--width: 96px;
	--flex-shrink: 0;
	aspect-ratio: 1;
	border-radius: 10px;
	background: rgba(0, 48, 73, 0.08);
}
#wj-nos__p1__texto, #wj-nos__p2__texto { --width: auto; --flex-grow: 1; }
.wj-nos__nombre .elementor-heading-title { line-height: 1.1; }
.wj-nos__papel { margin: 4px 0 10px; }
.wj-nos__bio p { margin: 0; }

/* El lema no es una tarjeta: es la voz de WJ, y va abierta. */
#wj-nos__lema {
	--width: 34%;
	--justify-content: center;
	padding-left: clamp(20px, 2.5vw, 32px);
	border-left: 1px solid var(--wj-rule);
}
.wj-nos__lema-t .elementor-heading-title { line-height: 1.2; }
/* Raya roja corta entre el lema y su explicación. */
.wj-nos__lema-t::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin-top: 14px;
	background: var(--wj-red);
}
.wj-nos__lema-p { margin-top: 14px; }
.wj-nos__lema-p p { margin: 0; }

/* ---------- Banda 3: los valores ---------- */
#wj-nos__valores {
	--flex-direction: row;
	--align-items: stretch;
	--gap: 0px 0px;
	width: 100%;
	margin-top: clamp(36px, 4.5vw, 56px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--wj-rule);
}
#wj-nos__valores > .e-con,
#wj-nos__valores > .elementor-element {
	/* Se reparten a partes iguales sean los que sean: con --width: 20%
	   un sexto valor desbordaba la fila. */
	--width: auto;
	--flex-grow: 1;
	--flex-basis: 0;
	--align-items: center;
	--justify-content: center;
	--gap: 10px 0;
	padding: 4px clamp(8px, 1.5vw, 16px);
	text-align: center;
}
/* Separadores entre valores, no alrededor. */
#wj-nos__valores > *:not(:first-child) { border-left: 1px solid var(--wj-rule); }
#wj-nos__valores > * > * {
	--width: 34px;
	--flex-shrink: 0;
	aspect-ratio: 1;
	border-radius: 8px;
	background: rgba(215, 50, 32, 0.10);
}
.wj-nos__valor-t .elementor-heading-title { line-height: 1.3; }

/* ---------- Pie ---------- */
#wj-nos__pie {
	--flex-direction: row;
	--align-items: center;
	--justify-content: space-between;
	--gap: 0px 24px;
	width: 100%;
	margin-top: clamp(32px, 4vw, 48px);
}
.wj-nos__cta .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 28px;
	background: transparent;
	border: 1.5px solid var(--wj-red);
	border-radius: 999px;
	color: var(--wj-deep-red);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	transition: background 200ms ease, color 200ms ease;
}
.wj-nos__cta .elementor-button-text::after { content: "›"; margin-left: 10px; font-size: 18px; }
.wj-nos__cta .elementor-button:hover,
.wj-nos__cta .elementor-button:focus-visible { background: var(--wj-red); color: #fff; }

/* La firma es un remate, no un mensaje: se lee si se busca. */
.wj-nos__firma .elementor-heading-title {
	line-height: 1.35;
	text-align: right;
	font-style: italic;
	color: rgba(0, 48, 73, 0.30);
}

/* ---------- Anchos intermedios ---------- */
@media (max-width: 1024px) {
	#wj-nos__top { --flex-direction: column; --align-items: stretch; --gap: clamp(28px, 4vw, 40px) 0; }
	#wj-nos__izq { --width: 100%; }
	#wj-nos__foto { --width: 100%; margin-right: 0; border-radius: 10px; }

	#wj-nos__medio { --flex-direction: column; --gap: 18px 0; }
	#wj-nos__p1, #wj-nos__p2, #wj-nos__lema { --width: 100%; }
	#wj-nos__lema { padding-left: 0; padding-top: 8px; border-left: 0; }
}

@media (max-width: 720px) {
	/* Cinco valores en fila no caben; pasan a dos columnas y los separadores
	   verticales dejan de tener sentido. */
	#wj-nos__valores { --flex-wrap: wrap; --gap: 22px 0; }
	#wj-nos__valores > .e-con,
	#wj-nos__valores > .elementor-element { --width: 50%; --flex-basis: auto; --flex-grow: 0; }
	#wj-nos__valores > *:not(:first-child) { border-left: 0; }

	#wj-nos__pie { --flex-direction: column; --align-items: stretch; --gap: 20px 0; }
	.wj-nos__cta .elementor-button { width: 100%; justify-content: center; }
	.wj-nos__firma .elementor-heading-title { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.wj-nos__cta .elementor-button { transition: none; }
}

/* --- Nosotros: correcciones de ancho estrecho --- */
/* Elementor pone flex-wrap: wrap por defecto en móvil, y las dos cifras se
   partían en dos filas conservando la línea vertical de la segunda, que ahí ya
   no separaba nada. Van siempre en la misma fila: son un par, no una lista. */
#wj-nos__cifras { --flex-wrap: nowrap; }
#wj-nos__cifra-1, #wj-nos__cifra-2 { --flex-shrink: 1; }

/* El titular tenía un tamaño fijo y en móvil ocupaba cuatro líneas. Los
   tamaños de Elementor van en un selector de la misma especificidad que el de
   clase, así que aquí hace falta el id de la sección para ganar sin recurrir
   a !important. */
#nosotros .wj-nos__titulo .elementor-heading-title { font-size: clamp(29px, 5.6vw, 46px); }
#nosotros .wj-nos__n .elementor-heading-title { font-size: clamp(34px, 4.6vw, 44px); }
#nosotros .wj-nos__lema-t .elementor-heading-title { font-size: clamp(21px, 2.6vw, 25px); }
#nosotros .wj-nos__nombre .elementor-heading-title { font-size: clamp(22px, 2.6vw, 26px); }

/* El antetítulo de esta sección se escribió sin las señas de los demás:
   versalita, Montserrat y su espaciado. */
#nosotros .wj-eyebrow .elementor-heading-title {
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

@media (max-width: 420px) {
	#wj-nos__cifras { --gap: 0px 18px; }
	#wj-nos__cifra-2 { padding-left: 18px; }
}

/* En móvil la foto se pone encima del texto en vez de al lado. Ya ocurría por
   el flex-wrap que Elementor aplica ahí por defecto; se deja escrito para que
   no dependa de ese comportamiento. */
@media (max-width: 520px) {
	#wj-nos__p1, #wj-nos__p2 { --flex-direction: column; --align-items: flex-start; --gap: 14px 0; }
	#wj-nos__p1__foto, #wj-nos__p2__foto { --width: 84px; }
}

/* --- Nosotros: separaciones reales --- */
/* Elementor escribe `gap` directamente desde los ajustes del contenedor, así
   que fijar `--gap` no cambia nada: la variable queda puesta pero sin efecto.
   Todas las separaciones de esta sección se declaran aquí como `gap`, con el
   id por delante para ganar a la regla de clase que genera Elementor. */

#nosotros #wj-nos__top    { gap: 0 clamp(32px, 5vw, 72px); }
#nosotros #wj-nos__medio  { gap: 0 clamp(20px, 2.5vw, 32px); }
#nosotros #wj-nos__cifras { gap: 0 clamp(24px, 3vw, 40px); }
#nosotros #wj-nos__pie    { gap: 0 24px; }

/* Columna de texto de la banda superior. */
#nosotros #wj-nos__izq { gap: 12px; }
#nosotros .wj-nos__titulo { margin: 0.2rem 0 0; }

/* Tarjeta de persona: la foto respira del texto, y dentro del texto el rótulo
   se pega al nombre mientras la biografía se separa. */
#nosotros #wj-nos__p1, #nosotros #wj-nos__p2 { gap: 0 18px; }
#nosotros #wj-nos__p1__texto,
#nosotros #wj-nos__p2__texto { gap: 6px; }
#nosotros .wj-nos__papel { margin: 0; }
#nosotros .wj-nos__bio { margin-top: 6px; }

/* Valores: sin separación horizontal, porque el separador es la línea. */
#nosotros #wj-nos__valores { gap: 0; }
#nosotros #wj-nos__valores > .e-con,
#nosotros #wj-nos__valores > .elementor-element { gap: 10px 0; }

@media (max-width: 1024px) {
	#nosotros #wj-nos__top   { gap: clamp(28px, 4vw, 40px) 0; }
	#nosotros #wj-nos__medio { gap: 18px 0; }
}
@media (max-width: 720px) {
	#nosotros #wj-nos__valores { gap: 22px 0; }
	#nosotros #wj-nos__pie     { gap: 20px 0; }
}
@media (max-width: 520px) {
	#nosotros #wj-nos__p1, #nosotros #wj-nos__p2 { gap: 14px 0; }
}

/* --- Costura entre «Proceso» y «Nosotros» --- */
/* Las dos secciones llevan 120 px de relleno arriba y abajo, así que en su
   encuentro se sumaban 240, más el aire propio del pie del proceso. Se recorta
   solo aquí: el resto de las secciones conserva su respiración. */
#proceso  > .e-con-inner { padding-bottom: clamp(28px, 3.4vw, 48px); }
#nosotros > .e-con-inner { padding-top: clamp(28px, 3.4vw, 48px); }

/* --- Nosotros: comportamiento de las imágenes cuando lleguen --- */
/* Se deja escrito por adelantado para que colocar cada foto en su hueco sea lo
   único que haya que hacer: llenan su caja recortando por el centro, sin
   deformarse y sin cambiar la retícula. */
#wj-nos__foto .elementor-widget-image,
#wj-nos__foto .elementor-widget-container,
#wj-nos__foto figure,
#wj-nos__p1__foto .elementor-widget-image,
#wj-nos__p1__foto .elementor-widget-container,
#wj-nos__p1__foto figure,
#wj-nos__p2__foto .elementor-widget-image,
#wj-nos__p2__foto .elementor-widget-container,
#wj-nos__p2__foto figure { height: 100%; margin: 0; display: block; }

#wj-nos__foto img,
#wj-nos__p1__foto img,
#wj-nos__p2__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}
/* En los retratos el encuadre sube: la cara está en el tercio superior. */
#wj-nos__p1__foto img,
#wj-nos__p2__foto img { object-position: 50% 30%; }

#wj-nos__valores > * > * img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Las esquinas redondeadas se aplican recortando en el propio hueco. Heredarlas
   en la imagen no funciona: `inherit` toma el valor del padre directo, que es
   la figura que envuelve Elementor, y esa no tiene radio. */
#wj-nos__foto,
#wj-nos__p1__foto,
#wj-nos__p2__foto { overflow: hidden; }

/* --- Valores: emblemas, no glifos --- */
/* Cada icono es un escudo con una hoja y un símbolo dentro. A 34 px eso se
   convierte en una mancha: la caja crece y pierde el fondo de reserva, que ya
   no hace falta. */
#nosotros #wj-nos__valores > * > * {
	--width: 48px;
	--flex-shrink: 0;
	aspect-ratio: 1;
	background: none;
	border-radius: 0;
}
@media (max-width: 720px) {
	#nosotros #wj-nos__valores > * > * { --width: 44px; }
}

/* --- Rótulo de la banda de valores --- */
/* La línea de separación pasa al rótulo: así el orden se lee regla, título y
   luego los cinco valores, en vez de quedar el título fuera de su banda. */
#nosotros .wj-nos__valores-t {
	margin-top: clamp(36px, 4.5vw, 56px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--wj-rule);
	text-align: center;
}
#nosotros #wj-nos__valores {
	margin-top: clamp(18px, 2.2vw, 26px);
	padding-top: 0;
	border-top: 0;
}

/* =========================== Conócenos ===========================
   Ritmo alternado: cada sección resuelve su composición de una forma
   distinta —asimetría, línea de tiempo, retrato a sangre, banda oscura,
   lista tipográfica— para que la página se lea como un relato y no como
   una pila de tarjetas.
   Los contenedores de Elementor se gobiernan por variables propias
   (--flex-direction, --width) y su gap se declara directo, no por --gap. */

#cn-hero, #cn-historia, #cn-trayectoria, #cn-wanda, #cn-javier,
#cn-generaciones, #cn-razon, #cn-filosofia, #cn-hoy, #cn-valores,
#cn-diferencia, #cn-cierre { overflow: hidden; }

.cn-h2 .elementor-heading-title { line-height: 1.14; letter-spacing: -0.015em; }
.cn-p p { margin: 0 0 1rem; max-width: 56ch; }
.cn-p p:last-child { margin-bottom: 0; }
.cn-acento { color: var(--wj-deep-red); }

/* Todas las cabeceras de sección respiran igual. */
[id$="__cab"] { gap: 10px; margin-bottom: clamp(28px, 3.5vw, 44px); }

/* ---------- 01 · Hero ---------- */
#cn-hero {
	--flex-direction: row;
	--align-items: center;
	gap: 0 clamp(32px, 5vw, 72px);
}
#cn-hero__txt { --width: 50%; gap: 16px; }
/* La fotografía sangra al borde derecho: la caja se ensancha y el margen
   negativo devuelve el exceso a la retícula. */
#cn-hero__foto {
	--width: calc(50% + (100vw - 100%) / 2);
	--flex-shrink: 0;
	margin-right: calc(50% - 50vw);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 12px 0 0 12px;
	background: rgba(0, 48, 73, 0.06);
}
.cn-foto .elementor-widget-container, .cn-foto figure { height: 100%; margin: 0; }
.cn-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cn-hero .cn-hero__t .elementor-heading-title { font-size: clamp(31px, 4.4vw, 50px); }
.cn-hero__cta { margin-top: 10px; }
.cn-hero__cta .elementor-button {
	display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px;
	background: var(--wj-red); border-radius: 6px; color: #fff;
	font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 700;
	transition: background 220ms cubic-bezier(0.22,0.61,0.36,1);
}
.cn-hero__cta .elementor-button-text::after { content: " ↓"; }
.cn-hero__cta .elementor-button:hover { background: var(--wj-deep-red); }

/* ---------- 02 · Historia: dos columnas asimétricas ---------- */
#cn-hist__cuerpo { --flex-direction: row; gap: 0 clamp(28px, 4vw, 56px); }
#cn-hist__col1 { --width: 46%; }
#cn-hist__col2 { --width: 54%; }
#cn-historia .cn-h2 .elementor-heading-title { font-size: clamp(27px, 3.6vw, 40px); max-width: 20ch; }

/* La frase que sostiene el relato: aislada, con regla arriba. */
#cn-hist__cita, #cn-gen__suma {
	margin-top: clamp(32px, 4vw, 52px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--wj-rule);
}
.cn-cita .elementor-heading-title {
	font-size: clamp(19px, 2.3vw, 27px);
	line-height: 1.4;
	max-width: 40ch;
	font-style: italic;
}

/* ---------- 03 · Trayectoria ---------- */
/* Línea continua con los hitos colgando: en ancho va horizontal y en
   estrecho baja en vertical sin perder el hilo. */
#cn-tray__linea {
	--flex-direction: row;
	--align-items: stretch;
	gap: 0;
	position: relative;
}
[id^="cn-hito-"] {
	--width: 14.28%;
	gap: 8px;
	padding: 26px 14px 0;
	position: relative;
}
[id^="cn-hito-"]::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: var(--wj-rule);
}
/* El punto que marca el hito sobre la línea. */
[id^="cn-hito-"]::after {
	content: "";
	position: absolute;
	top: -4px; left: 14px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--wj-red);
	border: 2px solid var(--wj-soft-white);
}
/* El último hito es el presente: se marca en rojo profundo. */
[id^="cn-hito-"]:last-child::after { background: var(--wj-deep-red); transform: scale(1.25); }
.cn-hito__f .elementor-heading-title { font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.cn-hito__t .elementor-heading-title { line-height: 1.2; font-size: clamp(16px, 1.5vw, 21px); }
.cn-hito__d p { margin: 0; }

/* ---------- 04–05 · Retratos ---------- */
#cn-wanda, #cn-javier { --flex-direction: row; --align-items: center; gap: 0 clamp(32px, 5vw, 72px); }
#cn-wanda__foto, #cn-javier__foto {
	--width: 42%; --flex-shrink: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(0, 48, 73, 0.06);
}
.cn-retrato .elementor-widget-container, .cn-retrato figure { height: 100%; margin: 0; }
.cn-retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
#cn-wanda__txt, #cn-javier__txt { --width: auto; --flex-grow: 1; gap: 12px; }
#cn-wanda, #cn-javier .cn-h2 .elementor-heading-title { font-size: clamp(25px, 3.2vw, 36px); }

/* ---------- 06 · Dos generaciones ---------- */
#cn-gen__par { --flex-direction: row; gap: 0 clamp(24px, 3vw, 48px); }
#cn-gen-w, #cn-gen-j { --width: 50%; gap: 14px; padding-top: 20px; border-top: 3px solid var(--wj-red); }
#cn-gen-j { border-top-color: var(--wj-navy); }
.cn-gen__l ul { list-style: none; margin: 0; padding: 0; }
.cn-gen__l li {
	position: relative;
	padding: 9px 0 9px 0;
	border-bottom: 1px solid var(--wj-rule);
	color: var(--wj-navy);
}
.cn-gen__l li:last-child { border-bottom: 0; }

/* ---------- 07 · Banda oscura ---------- */
/* Un solo respiro oscuro en toda la página: marca el centro del relato. */
#cn-razon {
	background: var(--wj-navy);
	padding: clamp(56px, 8vw, 104px) 0;
	margin: clamp(40px, 5vw, 72px) 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
#cn-razon__txt {
	max-width: 1184px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 32px);
	gap: 14px;
}
#cn-razon .wj-eyebrow .elementor-heading-title::before { background: var(--wj-red); }
.cn-h2--claro .elementor-heading-title { font-size: clamp(27px, 3.6vw, 40px); }
.cn-p--claro p { max-width: 60ch; }

/* ---------- 08 · Filosofía ---------- */
#cn-filo__fila { --flex-direction: row; --align-items: stretch; gap: 0 clamp(20px, 2.5vw, 32px); }
[id^="cn-paso-"] { --width: 25%; gap: 8px; padding-top: 20px; border-top: 1px solid var(--wj-rule); }
.cn-paso__n .elementor-heading-title { font-family: Montserrat, sans-serif; font-size: 11px; letter-spacing: 0.14em; }
.cn-paso__d p { margin: 0; }

/* ---------- 09 · Hoy y mañana ---------- */
#cn-hoy__par { --flex-direction: row; gap: 0; }
#cn-hoy-a, #cn-hoy-b { --width: 50%; gap: 10px; padding: clamp(26px, 3vw, 40px); }
#cn-hoy-a { background: var(--wj-soft-white); border-radius: 14px 0 0 14px; }
#cn-hoy-b { background: rgba(0, 48, 73, 0.045); border-radius: 0 14px 14px 0; }

/* ---------- 10 · Valores ---------- */
/* Lista tipográfica: el valor grande a la izquierda, su porqué a la derecha.
   Cinco tarjetas iguales dirían menos. */
#cn-val__lista { gap: 0; }
[id^="cn-valor-"] {
	--flex-direction: row;
	--align-items: baseline;
	gap: 0 clamp(24px, 4vw, 56px);
	padding: clamp(20px, 2.4vw, 28px) 0;
	border-top: 1px solid var(--wj-rule);
}
[id^="cn-valor-"]:last-child { border-bottom: 1px solid var(--wj-rule); }
.cn-valor__t { --width: 30%; --flex-shrink: 0; }
.cn-valor__t .elementor-heading-title { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; }
.cn-valor__d { --width: auto; --flex-grow: 1; }
.cn-valor__d p { margin: 0; max-width: 62ch; }

/* ---------- 11 · Diferencias ---------- */
#cn-dif__reticula {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}
[id^="cn-dif-"] { gap: 6px; padding-top: 16px; border-top: 2px solid rgba(120, 0, 0, 0.28); }
.cn-dif__d p { margin: 0; }

/* ---------- 12 · Cierre ---------- */
#cn-cierre__txt { --align-items: center; gap: 14px; text-align: center; }
#cn-cierre .wj-eyebrow .elementor-heading-title { justify-content: center; }
#cn-cierre .cn-h2 .elementor-heading-title { font-size: clamp(26px, 3.4vw, 38px); }
#cn-cierre__btns { --flex-direction: row; --justify-content: center; gap: 0 14px; margin-top: 8px; }
.cn-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 26px; border-radius: 6px;
	font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 700;
	transition: background 220ms ease, color 220ms ease;
}
.cn-btn--full .elementor-button { background: var(--wj-red); color: #fff; }
.cn-btn--full .elementor-button:hover { background: var(--wj-deep-red); }
.cn-btn--linea .elementor-button { background: transparent; border: 1.5px solid var(--wj-navy); color: var(--wj-navy); }
.cn-btn--linea .elementor-button:hover { background: var(--wj-navy); color: #fff; }

/* ---------- Aparición al desplazar ---------- */
/* Sutil y con red de seguridad: si algo fallara, el contenido se ve igual. */
.cn-revelar { opacity: 0; transform: translateY(16px); }
.cn-revelar.cn-visible {
	opacity: 1; transform: none;
	transition: opacity 620ms cubic-bezier(0.22,0.61,0.36,1), transform 620ms cubic-bezier(0.22,0.61,0.36,1);
}

/* ---------- Anchos intermedios ---------- */
@media (max-width: 1024px) {
	#cn-hero { --flex-direction: column; --align-items: stretch; gap: clamp(28px, 4vw, 40px) 0; }
	#cn-hero__txt { --width: 100%; }
	#cn-hero__foto { --width: 100%; margin-right: 0; border-radius: 12px; }

	#cn-hist__cuerpo { --flex-direction: column; gap: 18px 0; }
	#cn-hist__col1, #cn-hist__col2 { --width: 100%; }

	#cn-wanda, #cn-javier, #cn-javier { --flex-direction: column; --align-items: stretch; gap: 24px 0; }
	/* Apilado, el retrato va siempre arriba aunque en pantalla ancha alterne. */
	#cn-javier { --flex-direction: column-reverse; }
	#cn-wanda__foto, #cn-javier__foto { --width: 100%; aspect-ratio: 3 / 2; }

	#cn-filo__fila { --flex-wrap: wrap; gap: 22px clamp(20px, 2.5vw, 32px); }
	[id^="cn-paso-"] { --width: 46%; }

	#cn-dif__reticula { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	/* La línea de tiempo baja en vertical: el hilo pasa al lado izquierdo. */
	#cn-tray__linea { --flex-direction: column; gap: 0; }
	[id^="cn-hito-"] { --width: 100%; padding: 0 0 26px 26px; }
	[id^="cn-hito-"]:last-child { padding-bottom: 0; }
	[id^="cn-hito-"]::before { top: 6px; bottom: 0; left: 4px; right: auto; width: 2px; height: auto; }
	[id^="cn-hito-"]:last-child::before { display: none; }
	[id^="cn-hito-"]::after { top: 4px; left: 0; }

	#cn-gen__par { --flex-direction: column; gap: 26px 0; }
	#cn-gen-w, #cn-gen-j { --width: 100%; }

	[id^="cn-paso-"] { --width: 100%; }

	#cn-hoy__par { --flex-direction: column; gap: 0; }
	#cn-hoy-a, #cn-hoy-b { --width: 100%; }
	#cn-hoy-a { border-radius: 14px 14px 0 0; }
	#cn-hoy-b { border-radius: 0 0 14px 14px; }

	[id^="cn-valor-"] { --flex-direction: column; --align-items: stretch; gap: 6px 0; }
	.cn-valor__t { --width: 100%; }

	#cn-dif__reticula { grid-template-columns: 1fr; }

	#cn-cierre__btns { --flex-direction: column; gap: 12px 0; }
	.cn-btn .elementor-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cn-revelar, .cn-revelar.cn-visible { opacity: 1; transform: none; transition: none; }
	.cn-hero__cta .elementor-button, .cn-btn .elementor-button { transition: none; }
}

/* --- Conócenos: aire de sección --- */
/* Las secciones de la portada llevan su relleno puesto a mano en Elementor.
   Las nuevas se crearon sin él, así que se declara aquí una sola vez para
   todas: mismo ritmo vertical que el resto del sitio. */
#cn-hero > .e-con-inner,
#cn-historia > .e-con-inner,
#cn-trayectoria > .e-con-inner,
#cn-wanda > .e-con-inner,
#cn-javier > .e-con-inner,
#cn-generaciones > .e-con-inner,
#cn-filosofia > .e-con-inner,
#cn-hoy > .e-con-inner,
#cn-valores > .e-con-inner,
#cn-diferencia > .e-con-inner,
#cn-cierre > .e-con-inner {
	max-width: 1184px;
	margin-inline: auto;
	padding: clamp(48px, 6.5vw, 92px) clamp(20px, 4vw, 32px);
}
/* El hero abre la página: menos arriba, para que el titular no caiga tan bajo. */
#cn-hero > .e-con-inner { padding-top: clamp(28px, 3.5vw, 48px); }
/* La banda oscura ya trae su propio relleno y va a sangre. */
#cn-razon > .e-con-inner { max-width: none; padding: 0; }


/* =========================== Reseñas ===========================
   Ampliable desde Elementor: duplicar una tarjeta dentro de la lista basta.

   Ninguna regla cuelga del id de la tarjeta. Antes el estilo estaba en
   #wj-res__caja, y duplicarla habría creado dos elementos con el mismo id
   —HTML inválido— y la copia habría salido sin formato. Ahora las tarjetas
   se estilan por su posición dentro de #wj-res__lista, así que la copia
   hereda el aspecto sola.

   Con una reseña la caja se centra y se limita a una medida cómoda de
   lectura. A partir de dos pasa a retícula. */

#resenas > .e-con-inner { padding: clamp(48px, 6.5vw, 92px) clamp(20px, 4vw, 32px); }
#wj-res__cab { gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); }
.wj-res__h2 .elementor-heading-title { font-size: clamp(25px, 3.2vw, 36px); line-height: 1.15; max-width: 22ch; }

#wj-res__lista { gap: clamp(18px, 2.2vw, 26px); }

/* La tarjeta: cualquier hijo directo de la lista. */
#wj-res__lista > .e-con,
#wj-res__lista > .elementor-element {
	gap: 14px;
	padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 44px);
	background: var(--wj-soft-white);
	border: 1px solid var(--wj-rule);
	border-radius: 14px;
	/* Barra roja a la izquierda: marca que la voz viene de fuera. */
	border-left: 3px solid var(--wj-red);
}

/* Una sola reseña: medida de lectura. En cuanto hay una segunda, retícula.
   :has permite contarlas sin JavaScript; donde no exista, se queda en una
   columna, que sigue siendo correcto. */
#wj-res__lista > * { max-width: 74ch; }
#wj-res__lista:has(> :nth-child(2)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}
#wj-res__lista:has(> :nth-child(2)) > * { max-width: none; }

.wj-res__estrellas .elementor-heading-title { letter-spacing: 3px; line-height: 1; }
.wj-res__nota { display: inline-block; margin-left: 10px; letter-spacing: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; color: rgba(0, 48, 73, 0.62); vertical-align: middle; }

.wj-res__frase .elementor-heading-title {
	font-size: clamp(22px, 2.9vw, 34px);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.wj-res__frase blockquote { margin: 0; }   /* blockquote trae margen del navegador */

.wj-res__texto p { margin: 0; }

/* La firma es el último contenedor de la tarjeta: se reconoce por su sitio,
   no por un id que la copia repetiría. */
#wj-res__lista > * > .e-con:last-child,
#wj-res__lista > * > .elementor-element:last-child {
	gap: 3px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--wj-rule);
}
.wj-res__donde .elementor-heading-title { font-family: Montserrat, sans-serif; letter-spacing: 0.04em; }

@media (max-width: 860px) {
	/* Dos columnas de cita se leen mal por debajo de este ancho. */
	#wj-res__lista:has(> :nth-child(2)) { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	#wj-res__lista > .e-con,
	#wj-res__lista > .elementor-element { padding: 24px 20px; }
}

/* =========================== Preguntas frecuentes ===========================
   Lista vertical: la pregunta es el control y la respuesta se despliega.

   El plegado cuelga de .esta-plegable, que pone el JavaScript. Mientras esa
   clase no exista, las respuestas se ven todas: si el script falla o tarda,
   la sección se queda en una lista legible en lugar de en una fila de
   títulos mudos. Ocultar antes de garantizar la vuelta no es una opción.

   Se estilan por posición dentro de la lista, no por identificador, para que
   añadir una pregunta sea duplicar el bloque en Elementor. */

#preguntas > .e-con-inner { padding: clamp(48px, 6.5vw, 92px) clamp(20px, 4vw, 32px); }
#wj-faq__cab { gap: 10px; margin-bottom: clamp(24px, 3vw, 36px); }
.wj-faq__h2 .elementor-heading-title { font-size: clamp(25px, 3.2vw, 36px); line-height: 1.15; max-width: 24ch; }

/* Centrado: la cabecera va centrada y la lista se centra como bloque.

   El texto de cada pregunta se queda alineado a la izquierda, no centrado:
   una pregunta centrada con el signo pegado al borde derecho se lee torcida,
   y con dos líneas las cinco filas empiezan cada una en un sitio distinto. */
#preguntas #wj-faq__cab { text-align: center; }
/* El antetítulo es un flex con su raya roja en ::before: centrarlo pide
   justify-content, no text-align. */
#preguntas .wj-eyebrow .elementor-heading-title { justify-content: center; }
#preguntas .wj-faq__h2 .elementor-heading-title { margin-left: auto; margin-right: auto; }

#wj-faq__lista {
	display: block;
	max-width: 74ch;
	margin-left: auto;
	margin-right: auto;
}

#wj-faq__lista > .e-con,
#wj-faq__lista > .elementor-element {
	gap: 0;
	border-top: 1px solid var(--wj-rule);
}
#wj-faq__lista > *:last-child { border-bottom: 1px solid var(--wj-rule); }

/* La pregunta ocupa toda la fila: el área de toque es la línea entera, no
   solo el signo de la derecha. */
.wj-faq__p { width: 100%; }
.wj-faq__p .elementor-heading-title { margin: 0; }

.wj-faq__btn {
	display: flex;
	max-width: 100%;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 18px 2px;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
/* min-width: 0 es imprescindible: un elemento flex no encoge por debajo
   del ancho de su contenido, y sin esto el texto empujaba el signo «+»
   fuera de la pantalla en móvil. */
.wj-faq__txt {
	flex: 1 1 auto;
	min-width: 0;
	/* El texto heredaba white-space: nowrap y se montaba encima del signo
	   en vez de partirse. Se fuerza aquí, no se confía en la herencia. */
	white-space: normal;
	overflow-wrap: anywhere;
}
/* La pregunta NO cambia de color al pasar el ratón.

   Antes pasaba de azul a rojo y volvía al salir. Sin transición el cambio era
   seco, y con cinco preguntas seguidas el texto parecía encenderse y apagarse
   al recorrer la lista con el ratón.

   La respuesta al pasar por encima se da en el signo, que es el control: se
   oscurece al rojo profundo y crece un punto. El texto se queda quieto. */
.wj-faq__btn .wj-faq__txt { transition: color 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }

.wj-faq__mas::before,
.wj-faq__mas::after { transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), background 200ms ease; }
.wj-faq__btn:hover .wj-faq__mas::before,
.wj-faq__btn:hover .wj-faq__mas::after,
.wj-faq__btn:focus-visible .wj-faq__mas::before,
.wj-faq__btn:focus-visible .wj-faq__mas::after { background: var(--wj-deep-red); }

/* El signo se dibuja con dos barras: al abrir, la vertical se tumba sobre la
   horizontal y queda un menos. */
.wj-faq__mas {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 5px;
}
.wj-faq__mas::before,
.wj-faq__mas::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: var(--wj-red);
	transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wj-faq__mas::after { transform: rotate(90deg); }
.esta-abierta .wj-faq__mas::after { transform: rotate(0deg); }
.esta-abierta .wj-faq__mas::before,
.esta-abierta .wj-faq__mas::after { background: var(--wj-deep-red); }

/* De 0fr a 1fr: la caja mide lo que mida la respuesta, sin calcular alturas
   en JavaScript. Donde no se pueda interpolar, abre de golpe. */
.esta-plegable .wj-faq__caja {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.esta-plegable .wj-faq__caja-int { overflow: hidden; }
.esta-plegable .esta-abierta .wj-faq__caja { grid-template-rows: 1fr; }

.wj-faq__r p { margin: 0; padding-bottom: 20px; max-width: 62ch; }
.wj-faq__r a { color: var(--wj-red); text-decoration: underline; text-underline-offset: 2px; }
.wj-faq__r a:hover { color: var(--wj-deep-red); }

@media (max-width: 620px) {
	.wj-faq__btn { padding: 16px 0; gap: 14px; }
	.wj-faq__r p { padding-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.esta-plegable .wj-faq__caja,
	.wj-faq__mas::before,
	.wj-faq__mas::after { transition: none; }
}

/* =========================== Selección y toque ===========================
   Nada definía ::selection, así que el resaltado lo ponía el sistema
   operativo: en Windows sale del color de acento, y con acento violeta el
   texto seleccionado aparecía en un vino que no es de la marca.

   Se fija al rojo de WJ. Y en los controles se desactiva la selección: al
   pulsar un botón no se debe seleccionar su etiqueta. En el texto de verdad
   sí se puede seleccionar y copiar —teléfonos, dirección, respuestas—, que
   es lo que la gente necesita. */

::selection {
	background: var(--wj-red, #D73220);
	color: #FFFFFF;
}
::-moz-selection {
	background: var(--wj-red, #D73220);
	color: #FFFFFF;
}

/* El destello al tocar en móvil también sale del color del sistema. */
a, button, [role="button"], .elementor-button {
	-webkit-tap-highlight-color: rgba(215, 50, 32, 0.14);
}

/* Un control no es texto: pulsarlo no debe seleccionar su etiqueta. */
.wj-faq__btn,
.wj-row__mas,
.wj-etapas__chip,
.wj-etapa-punto,
.wj-etapa__cerrar,
.wj-nav-toggle a,
.wj-nav-toggle button,
.elementor-button {
	-webkit-user-select: none;
	user-select: none;
}

/* =========================== Foco =========================== 
   Elementor dibuja el anillo de foco en negro con halo blanco:

     button:focus-visible { outline: black solid 2px; box-shadow: white 0 0 0 4px; }

   La regla roja del sitio existía pero perdía por especificidad —«:focus-visible»
   contra «button:focus-visible»—, así que lo que se veía era el negro. Aquí se
   repite la misma lista de selectores para empatar, y al ir después, gana.

   El anillo NO se quita: es lo único que le dice a quien navega con teclado
   dónde está. Solo cambia de color. El halo se conserva en rojo tenue para que
   siga viéndose sobre el crema y sobre las bandas azules. */

[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wj-red, #D73220);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(215, 50, 32, 0.20);
	border-radius: 3px;
}

/* Pulsar con el ratón no debe dejar el anillo puesto. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.elementor-button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

/* =========================== Blindaje de controles ===========================
   Ninguna regla del sitio pintaba fondo en estos controles, y aun así aparecía
   un relleno magenta al pulsarlos. Ese color venía de fuera de la página: del
   color de acento del sistema, por la vía del resaltado o del modo de contraste
   alto, que hace que el navegador ignore los colores del autor.

   Aquí se declara explícitamente lo que deben ser en cada estado, y se le pide
   al navegador que respete la paleta también en modo de contraste forzado. No
   se elimina ninguna señal: el foco sigue viéndose, solo que en rojo de WJ. */

.wj-faq__btn,
.wj-faq__btn:hover,
.wj-faq__btn:focus,
.wj-faq__btn:focus-visible,
.wj-faq__btn:active {
	background: transparent;
	background-color: transparent;
}

/* El texto del control conserva su color al pulsarlo y al seleccionarlo. */
.wj-faq__btn::selection,
.wj-faq__btn *::selection { background: transparent; color: inherit; }

/* En contraste forzado el navegador sustituye la paleta por la del sistema.
   Con esto se le indica que respete la del sitio en estos controles, y el
   anillo de foco se mantiene usando el color de resaltado del propio sistema,
   que es el que esa persona ha elegido ver. */
@media (forced-colors: active) {
	.wj-faq__btn,
	.wj-faq__btn:hover,
	.wj-faq__btn:active {
		forced-color-adjust: none;
		background: Canvas;
		color: CanvasText;
	}
	.wj-faq__mas::before,
	.wj-faq__mas::after { background: Highlight; }
	[tabindex]:not([tabindex="-1"]):focus-visible,
	a:focus-visible, button:focus-visible {
		outline: 2px solid Highlight;
		box-shadow: none;
	}
}

/* =========================== Cintas de Credenciales ===========================
   Dos tiras que giran solas: certificaciones arriba, aseguradoras abajo, en
   sentidos opuestos para que se lean como dos cosas distintas y no como una
   sola tira larga.

   Mientras una cinta no tenga imágenes, ni ella ni su rótulo se muestran. Una
   cinta vacía en una sección sobre credenciales resta credibilidad. */

#wj-cred__cintas { gap: 10px; margin-top: clamp(28px, 4vw, 44px); }

.wj-cred__rot { margin-top: 14px; }
.wj-cred__rot:first-child { margin-top: 0; }

/* Vacías: fuera la cinta y también el rótulo que la anuncia.
   Se hace por posición dentro del bloque (rótulo 1 + cinta 1, rótulo 2 + cinta
   2) y no con un :has dentro de otro :has, que no es válido: un selector
   inválido no falla a la vista, simplemente se descarta, y el rótulo se
   quedaría anunciando una cinta que no está. */
body:not(.elementor-editor-active) #wj-cred__cintas:not(:has(img)) { display: none; }
body:not(.elementor-editor-active) #wj-cred__cintas:not(:has(#wj-cred__cert img)) > :nth-child(-n+2),
body:not(.elementor-editor-active) #wj-cred__cintas:not(:has(#wj-cred__part img)) > :nth-child(n+3) { display: none; }

/* Dentro del editor las cintas vacías sí se ven: si se ocultaran, no habría
   dónde soltar los logotipos. Se marcan con su nombre para no confundirlas
   con un hueco sobrante. */
body.elementor-editor-active #wj-cred__cert:not(:has(img)),
body.elementor-editor-active #wj-cred__part:not(:has(img)) {
	min-height: 64px;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: 4px;
}
body.elementor-editor-active #wj-cred__cert:not(:has(img))::before,
body.elementor-editor-active #wj-cred__part:not(:has(img))::before {
	content: "Suelta aquí los logotipos — vacía no se ve en la web";
	align-self: center;
	padding: 0 14px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
	letter-spacing: 0.4px;
}

#wj-cred__cert,
#wj-cred__part {
	--flex-direction: row;
	--flex-wrap: nowrap;
	width: 100%;
	overflow: hidden;
	/* Los extremos se desvanecen: la tira entra y sale en vez de cortarse
	   a golpe contra el borde de la sección. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wj-cinta__pista {
	display: flex;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
	flex: 0 0 auto;
	padding-right: clamp(32px, 5vw, 64px);
}

/* El giro solo arranca cuando el JavaScript ha duplicado la tira. Sin eso, la
   cinta se queda quieta y los logotipos se ven igual. */
.esta-girando .wj-cinta__pista {
	animation: wj-cinta var(--wj-cinta-duracion, 30s) linear infinite;
}
#wj-cred__part.esta-girando .wj-cinta__pista { animation-direction: reverse; }

@keyframes wj-cinta {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-100%, 0, 0); }
}

/* Al pasar el ratón se detiene: si alguien quiere leer un logotipo, debe poder. */
#wj-cred__cert:hover .wj-cinta__pista,
#wj-cred__part:hover .wj-cinta__pista { animation-play-state: paused; }

/* Los logotipos, a una altura común y en blanco sobre la banda azul. */
#wj-cred__cert .elementor-widget-image,
#wj-cred__part .elementor-widget-image { flex: 0 0 auto; line-height: 0; }
#wj-cred__cert img,
#wj-cred__part img {
	height: clamp(26px, 3vw, 38px);
	width: auto;
	display: block;
	opacity: 0.75;
	transition: opacity 220ms ease;
}
#wj-cred__cert:hover img,
#wj-cred__part:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	/* Nada gira. La tira se queda quieta y se puede desplazar con el dedo o
	   con la rueda: una animación infinita es justo lo que esta preferencia
	   pide evitar. */
	.esta-girando .wj-cinta__pista { animation: none; }
	#wj-cred__cert,
	#wj-cred__part { overflow-x: auto; }
	#wj-cred__cert img,
	#wj-cred__part img { transition: none; opacity: 1; }
}

/* =========================== Nosotros: centrado en tablet ===========================
   A partir de 1024 px la banda superior deja de ser texto-junto-a-foto y pasa a
   texto-sobre-foto. El texto conservaba su alineación a la izquierda y su ancho
   de lectura de 52 caracteres, así que en una tableta de 834 px quedaban 270 px
   de aire muerto a la derecha y la columna parecía descolgada de la fotografía,
   que sí ocupa todo el ancho.

   No baja de 600 px: en un teléfono el párrafo ya llena la línea, no hay hueco
   que corregir, y centrar cuatro líneas de texto corrido solo las hace más
   difíciles de leer. */
@media (min-width: 601px) and (max-width: 1024px) {
	#nosotros #wj-nos__izq { text-align: center; }
	#nosotros #wj-nos__izq .wj-eyebrow .elementor-heading-title { justify-content: center; }
	#nosotros .wj-nos__intro p { margin-inline: auto; }
	/* Las dos cifras se centran como pareja; la línea vertical sigue cayendo
	   entre ellas, que es lo que separa. Cada una viene con --width: 100%, así
	   que entre las dos llenaban la fila y no quedaba nada que centrar: aquí
	   miden lo que ocupan. */
	#nosotros #wj-nos__cifras { justify-content: center; }
	#nosotros #wj-nos__cifras > .e-con,
	#nosotros #wj-nos__cifras > .elementor-element { --width: auto; }
}

/* =========================== Cabecera en páginas sin hero ===========================
   La cabecera está en `position: absolute` para flotar sobre la fotografía del
   hero de la portada: ahí el solape es la composición. En cualquier otra página
   no reserva su altura, así que la primera sección arranca en y=0 y el
   contenido queda debajo de la barra.

   La condición se ata a la existencia del hero, no al nombre de la página: una
   página nueva no tiene que acordarse de nada, y si algún día otra página usa
   el mismo hero, recupera el solape sola.

   `sticky` en vez de `static` para que la barra siga acompañando al scroll. Y
   con fondo propio: flotando sobre una foto la transparencia funciona, pero
   sobre texto que se desplaza por debajo, no. */
/* RETIRADA · body:not(:has(#hero-wj)) #wj-header
   El :has(#hero-wj) cuenta como identificador dentro del :not(), asi que
   esta regla tenia especificidad de DOS identificadores y ganaba a todo lo
   escrito despues. Ademas dependia del soporte de :has(). Su trabajo lo
   hace ahora la clase wj-con-hero que pone wj-cabecera.php. */

/* =========================== Páginas legales dentro del sitio ===========================
   El shortcode legal trae su propia cabecera con el logo y un «Volver al
   inicio»: se escribió para una página sin nada alrededor. Ahora que la página
   lleva la cabecera de WJ, esa segunda cabecera duplica el logo y la salida.
   Se oculta solo cuando está dentro de la página (#wj-pagina), así que si el
   shortcode se usa suelto en cualquier otro sitio conserva la suya. */
#wj-pagina .wj-legal-page__head { display: none; }
#wj-pagina .wj-legal-page { padding-top: clamp(28px, 4vw, 48px); }

/* =========================== Trabaja con nosotros ===========================
   /carreras/ — se apoya entera en el sistema que ya existe: los mismos tokens,
   Montserrat y Montserrat, el antetítulo con su raya roja, el mismo ritmo de sección.
   Nada de esto define colores ni tipografías nuevas.

   Hilo de continuidad: el marcador de cada paso va del azul de la trayectoria
   al rojo de la generación que entra. Es el concepto generacional de WJ hecho
   color, no una ilustración: se percibe al bajar sin llamar la atención.

   Las medidas son fluidas (clamp) en lugar de tener un juego de valores por
   pantalla, así que el teléfono es el estado base y las consultas de abajo solo
   aparecen donde la composición cambia de verdad. */

#cr-hero, #cr-quienes, #cr-pilares, #cr-valores,
#cr-buscamos, #cr-generaciones, #cr-oportunidades, #cr-solicitud { overflow: hidden; }

/* ---------- Ritmo de sección ----------
   Las secciones se quedaron con los 10 px que Elementor pone por defecto: la
   clase «wj-section» que llevaban en el constructor no llega al HTML, porque
   Elementor descarta las clases propias de los contenedores. Así que el ritmo
   se declara aquí por identificador, que sí sobrevive.

   Las medidas son las de Conócenos, no unas nuevas: es la otra página interior
   del sitio y las dos deben respirar igual. De paso aparece el margen lateral
   que faltaba —el contenido llegaba a 10 px del borde en un teléfono—. */
#cr-hero > .e-con-inner,
#cr-quienes > .e-con-inner,
#cr-pilares > .e-con-inner,
#cr-valores > .e-con-inner,
#cr-buscamos > .e-con-inner,
#cr-generaciones > .e-con-inner,
#cr-oportunidades > .e-con-inner,
#cr-solicitud > .e-con-inner {
	max-width: 1184px;
	margin-inline: auto;
	padding: clamp(48px, 6.5vw, 92px) clamp(20px, 4vw, 32px);
}

/* El hero arranca pegado a la cabecera: no necesita el respiro de arriba. */
#cr-hero > .e-con-inner { padding-top: clamp(28px, 3.5vw, 48px); }

/* Una banda de contraste, no más. La portada resuelve nueve secciones con dos
   —el crema de «Problema» y el navy de «Credenciales»—; ocho seguidas del mismo
   color se leen como una sola tirada. El crema va detrás de los valores, que
   son el centro del argumento de esta página.

   Sobre el crema la tarjeta pasa a blanco. En blanco roto la diferencia con el
   fondo es de 1,07:1 —invisible— y la tarjeta quedaría definida solo por su
   filete; en blanco sí se lee como una superficie encima de la banda. Es el
   mismo blanco que ya usan los campos del formulario, no un color nuevo. */
#cr-valores { background: var(--wj-cream); }
#cr-val__lista > .e-con,
#cr-val__lista > .elementor-element { background: #FFFFFE; }

/* Costura entre «Oportunidades» y «Tu información»: son un mismo momento —lo
   que hay abierto y cómo escribir—, y el estado vacío ya remite al formulario.
   Con el relleno completo de las dos quedaban 184 px entre el botón y el campo
   al que lleva. El mismo recorte que se hizo entre «Proceso» y «Nosotros». */
#cr-oportunidades > .e-con-inner { padding-bottom: clamp(24px, 3vw, 38px); }
#cr-solicitud > .e-con-inner { padding-top: clamp(24px, 3vw, 38px); }

.cr-h2 .elementor-heading-title { line-height: 1.14; letter-spacing: -0.015em; max-width: 22ch; }
.cr-h2--dos .elementor-heading-title { max-width: none; }
#cr-hero .cr-h2 .elementor-heading-title { max-width: none; }
.cr-p p, .cr-intro p { margin: 0 0 1rem; max-width: 58ch; }
#cr-qui__cuerpo { text-align: center; }
.cr-p p { margin-inline: auto; }
.cr-p p:last-child, .cr-intro p:last-child { margin-bottom: 0; }

/* Cabeceras de sección: todas respiran igual y todas van centradas, el mismo
   tratamiento que la sección «Proceso» de la portada. */
#cr-qui__cab, #cr-pil__cab, #cr-val__cab,
#cr-bus__cab, #cr-gen__cab, #cr-opo__cab, #cr-sol__cab {
	gap: 12px;
	margin-bottom: clamp(28px, 3.5vw, 46px);
	max-width: 68ch;
	margin-inline: auto;
	text-align: center;
}
/* El antetítulo es un flex con su raya roja en ::before, así que centrarlo pide
   justify-content, no text-align. */
#cr-quienes .wj-eyebrow .elementor-heading-title,
#cr-pilares .wj-eyebrow .elementor-heading-title,
#cr-valores .wj-eyebrow .elementor-heading-title,
#cr-buscamos .wj-eyebrow .elementor-heading-title,
#cr-generaciones .wj-eyebrow .elementor-heading-title,
#cr-oportunidades .wj-eyebrow .elementor-heading-title,
#cr-solicitud .wj-eyebrow .elementor-heading-title { justify-content: center; }

.cr-h2 .elementor-heading-title { margin-inline: auto; }
.cr-intro p { margin-inline: auto; }

.cr-rotulo .elementor-heading-title {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

/* ---------- Botones ---------- */
.cr-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 6px;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.cr-btn--solido .elementor-button { background: var(--wj-red); color: #fff; border: 1.5px solid var(--wj-red); }
.cr-btn--solido .elementor-button:hover,
.cr-btn--solido .elementor-button:focus-visible { background: var(--wj-deep-red); border-color: var(--wj-deep-red); }
.cr-btn--linea .elementor-button { background: transparent; color: var(--wj-navy); border: 1.5px solid var(--wj-rule); }
.cr-btn--linea .elementor-button:hover,
.cr-btn--linea .elementor-button:focus-visible { border-color: var(--wj-navy); }

.cr-enlace .elementor-button {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wj-deep-red);
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
}
.cr-enlace .elementor-button-text::after { content: " →"; transition: transform 200ms ease; display: inline-block; }
.cr-enlace .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); }

/* ---------- 01 · Hero ---------- */
/* La fotografía sangra al borde derecho: la caja se ensancha y el margen
   negativo devuelve el exceso a la retícula, igual que en Conócenos. */
#cr-hero { --flex-direction: column; gap: clamp(28px, 4vw, 44px) 0; }
#cr-hero__txt { gap: 14px; }
#cr-hero .cr-hero__t .elementor-heading-title {
	font-size: clamp(31px, 5.2vw, 52px);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
/* La segunda línea en rojo, el mismo recurso que los titulares de la portada
   y de Conócenos. Va en un <span> dentro del titular: `br + *` no vale, porque
   lo que sigue a un <br> es un nodo de texto y no un elemento. */
.cr-acento { color: var(--wj-deep-red); }
#cr-hero__p p { max-width: 52ch; }
#cr-hero__btns { --flex-direction: row; --flex-wrap: wrap; gap: 12px; margin-top: 8px; }
#cr-hero__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 12px;
	background: rgba(0, 48, 73, 0.06);
}
.cr-foto .elementor-widget-container, .cr-foto figure { height: 100%; margin: 0; }
.cr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 02 · Dónde estarías entrando ---------- */
#cr-qui__cuerpo { --flex-direction: column; gap: 18px 0; }
#cr-qui__cifras {
	--flex-direction: row;
	--flex-wrap: nowrap;
	gap: 0 clamp(18px, 3vw, 40px);
	margin-top: clamp(28px, 3.5vw, 44px);
	padding-top: clamp(22px, 3vw, 32px);
	border-top: 1px solid var(--wj-rule);
}
#cr-qui__cifras > .e-con { --width: auto; --flex-grow: 1; --flex-basis: 0; gap: 4px; min-width: 0; }
#cr-qui__cifras > .e-con:not(:first-child) { padding-left: clamp(18px, 3vw, 40px); border-left: 1px solid var(--wj-rule); }
.cr-cifra__n .elementor-heading-title { font-size: clamp(30px, 4.4vw, 44px); line-height: 1; letter-spacing: -0.02em; }
.cr-cifra__et .elementor-heading-title { line-height: 1.3; }
#cr-qui__pie { margin-top: clamp(24px, 3vw, 34px); --align-items: center; }

/* ---------- 03 · Cómo trabajamos ---------- */
/* Sin estilos propios: la sección usa «#wj-rows» y las clases «.wj-row__*»,
   los mismos que el proceso de la portada. Al ser otra página no hay choque de
   identificadores, así que hereda entera la tarjeta, el número en su círculo,
   el recorrido entre pasos y el desplegable «Ver más» —que monta el mu-plugin
   wj-proceso.php— sin duplicar una sola regla. */

/* ---------- 04 · Los valores ---------- */
/* En horizontal: cinco columnas que se reparten solas. Con auto-fit no hace
   falta un punto de ruptura por cada ancho —van a cuatro, tres, dos o una
   según quepan— y añadir o quitar un valor no obliga a tocar nada. */
#cr-val__lista {
	/* Flex envolvente y centrado, no una retícula de cinco columnas.

	   A cinco por fila cada tarjeta medía 219 px de ancho por 421 de alto: en
	   ese hueco el texto cae a unos veinte caracteres por línea y la tarjeta se
	   vuelve una columna de palabras. Con un ancho base de lectura entran tres
	   arriba y dos abajo, y el sobrante se centra solo —sin tener que decidir
	   por adelantado cuántas caben en cada pantalla. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: clamp(16px, 1.8vw, 22px);
	border: 0;
}
#cr-val__lista > .e-con,
#cr-val__lista > .elementor-element { flex: 0 1 320px; max-width: 100%; }
/* En una pantalla estrecha la tarjeta deja de tener ancho fijo: a 320 px dentro
   de 355 quedaban dos franjas de aire a los lados que no separaban nada. */
@media (max-width: 430px) {
	#cr-val__lista > .e-con,
	#cr-val__lista > .elementor-element { flex-basis: 100%; }
}

/* Los cinco en una sola fila.

   A partir de 1080 px la fila deja de envolverse y las cinco tarjetas se
   reparten el ancho a partes iguales. Cada una queda estrecha y alta, que es
   justo lo que se pidió; para que el texto no se estrangule ahí dentro, el
   relleno lateral cede y el cuerpo baja un punto. El máximo de medida se quita:
   a este ancho no ata nada y solo estorbaría. */
@media (min-width: 1080px) {
	#cr-val__lista { flex-wrap: nowrap; gap: 16px; }
	#cr-val__lista > .e-con,
	#cr-val__lista > .elementor-element {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 16px;
		padding-right: 16px;
	}
	#cr-val__lista .cr-valor__p p {
		max-width: none;
		font-size: 15px;
		line-height: 1.55;
	}
	#cr-val__lista .cr-valor__t .elementor-heading-title { font-size: 19px; }
}
/* La caja, el borde, el radio y el realce al pasar por encima NO se definen
   aquí: esta lista está añadida a los selectores del bloque «Proceso: cuatro
   tarjetas», así que es literalmente la misma tarjeta. Lo único propio es que
   no se pliega —no hay «Ver más»— porque el texto de un valor es corto y
   esconderlo no ahorra nada.

   Cuidado con reponer padding o border aquí: este bloque va después en la hoja
   y anularía la tarjeta heredada. */
#cr-val__lista > .e-con,
#cr-val__lista > .elementor-element {
	--flex-direction: column;
	--align-items: center;
	gap: 12px;
}
[id^="cr-valor-"][id$="__ico"] { --width: 52px; --flex-shrink: 0; aspect-ratio: 1; }
.cr-valor__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
[id^="cr-valor-"][id$="__txt"] { --width: 100%; gap: 8px; min-width: 0; }
.cr-valor__t .elementor-heading-title { line-height: 1.2; }
.cr-valor__p p { max-width: 38ch; margin-inline: auto; color: rgba(26, 26, 26, 0.84); }

/* ---------- 05 · Qué buscamos ---------- */
/* Lista con viñeta, en dos columnas.

   El bloque va centrado en la página, pero las frases se alinean a la
   izquierda: una viñeta solo funciona si todas las líneas arrancan del mismo
   sitio, y con el texto centrado la marca queda flotando lejos de su frase.

   Sin filetes entre elementos: con la viñeta delante ya se distingue dónde
   empieza cada una, y las rayas en dos columnas dibujaban una cuadrícula que
   no significaba nada. */
#cr-bus__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(14px, 1.8vw, 20px) clamp(28px, 4vw, 56px);
	max-width: 900px;
	margin-inline: auto;
	text-align: left;
}
#cr-bus__lista > .e-con,
#cr-bus__lista > .elementor-element {
	position: relative;
	padding: 0 0 0 24px;
	border: 0;
	text-align: left;
}
/* La viñeta: un disco rojo alineado con la primera línea, no con la caja. */
#cr-bus__lista > .e-con::before,
#cr-bus__lista > .elementor-element::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wj-red);
}
.cr-busca__p p {
	max-width: none;
	margin: 0;
	font-size: clamp(16px, 1.8vw, 17px);
	line-height: 1.55;
	color: var(--wj-navy);
}

#cr-bus__pie {
	margin-top: clamp(28px, 3.4vw, 40px);
	padding-top: clamp(22px, 2.6vw, 30px);
	border-top: 2px solid var(--wj-red);
	max-width: 900px;
	margin-inline: auto;
}
.cr-cierre-linea p {
	font-weight: 600;
	color: var(--wj-deep-red);
	max-width: 46ch;
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 720px) {
	#cr-bus__lista { grid-template-columns: 1fr 1fr; }
}

/* ---------- 06 · Crecer entre dos generaciones ---------- */
#cr-gen__personas { --flex-direction: column; gap: 16px; max-width: 900px; margin-inline: auto; }
#cr-gen-w, #cr-gen-j {
	--flex-direction: row;
	--align-items: center;
	gap: 18px;
	padding: 20px;
	background: var(--wj-soft-white);
	border: 1px solid var(--wj-rule);
	border-radius: 12px;
}
[id^="cr-gen-"][id$="__foto"] {
	--width: 92px;
	--flex-shrink: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(0, 48, 73, 0.08);
}
.cr-retrato .elementor-widget-container, .cr-retrato figure { height: 100%; margin: 0; }
/* El encuadre sube: en los dos retratos la cara está en el tercio superior. */
.cr-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
[id^="cr-gen-"][id$="__txt"] { --width: auto; --flex-grow: 1; gap: 4px; min-width: 0; }
.cr-persona__t .elementor-heading-title { line-height: 1.2; }
.cr-persona__p p { color: rgba(26, 26, 26, 0.80); }

/* «Lo que puedes encontrar aquí»: cinco tarjetas numeradas, 3 + 2 centradas en
   escritorio. Antes eran cinco columnas de texto centrado con una huérfana en
   segunda fila; ahora cada punto tiene su propia pieza y el texto va alineado a
   la izquierda, que con 16 px y 34 caracteres por línea se leía a trompicones. */
#cr-gen__enc {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
	margin-top: clamp(30px, 3.6vw, 46px);
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--wj-rule);
	counter-reset: cr-enc;
}
#cr-gen__enc > .elementor-widget-heading { grid-column: 1 / -1; text-align: center; margin-bottom: 6px; }
#cr-gen__enc > .e-con {
	--width: 100%; /* Elementor da 50% a los hijos de un contenedor; en rejilla eso era media celda. */
	width: 100%;
	grid-column: span 2;
	counter-increment: cr-enc;
	position: relative;
	min-width: 0;
	padding: clamp(20px, 2.2vw, 26px);
	background: #fff;
	border: 1px solid var(--wj-rule);
	border-radius: 12px;
	text-align: left;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
#cr-gen__enc > #cr-enc-3 { grid-column: 2 / span 2; }
#cr-gen__enc > #cr-enc-4 { grid-column: 4 / span 2; }
#cr-gen__enc > .e-con:hover {
	border-color: rgba(0, 48, 73, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(0, 48, 73, 0.35);
}
#cr-gen__enc > .e-con::before {
	content: "0" counter(cr-enc);
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0 0 12px;
	padding-bottom: 8px;
	background: none;
	border-bottom: 2px solid var(--wj-navy);
	font-family: Montserrat, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	line-height: 1;
	color: var(--wj-deep-red);
}
.cr-enc__p p { max-width: none; margin-inline: 0; }
@media (max-width: 900px) {
	#cr-gen__enc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#cr-gen__enc > .e-con { grid-column: span 1; }
	#cr-gen__enc > #cr-enc-3 { grid-column: auto / span 1; }
	#cr-gen__enc > #cr-enc-4 { grid-column: auto / span 2; }
}
@media (max-width: 560px) {
	#cr-gen__enc { grid-template-columns: minmax(0, 1fr); }
	#cr-gen__enc > #cr-enc-4 { grid-column: auto / span 1; }
}
@media (prefers-reduced-motion: reduce) {
	#cr-gen__enc > .e-con, #cr-gen__enc > .e-con:hover { transition: none; transform: none; }
}

/* Credenciales: sello del Comisionado de Seguros como marca de agua grabada
   sobre la banda navy. Versión monocroma con transparencia, en
   uploads/wj-brand/; ruta relativa a la raíz para que sirva igual en
   producción. ::after y no ::before, que Elementor reserva para su overlay. */
#credenciales { position: relative; overflow: hidden; isolation: isolate; }
#credenciales::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	right: -4%;
	top: 50%;
	width: clamp(360px, 40vw, 600px);
	aspect-ratio: 1 / 1;
	transform: translateY(-50%);
	background: url("/wp-content/uploads/wj-brand/sello-ocs-marca-agua.png") center / contain no-repeat;
	opacity: 0.11;
}
#credenciales > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
	#credenciales::after {
		right: 50%;
		transform: translate(50%, -50%);
		width: min(82vw, 420px);
		opacity: 0.08;
	}
}

/* ---------- 07 · Oportunidades ---------- */
/* Estado vacío. No cierra la puerta: una página que termina en «no hay nada»
   desaprovecha a quien acaba de leerla entera. */
.wj-car-vacio {
	max-width: 720px;
	margin-inline: auto;
	padding: clamp(28px, 4vw, 44px);
	background: var(--wj-soft-white);
	border: 1px solid var(--wj-rule);
	border-left: 3px solid var(--wj-red);
	border-radius: 0 12px 12px 0;
}
.wj-car-vacio__t {
	margin: 0 0 10px;
	font-family: Montserrat, sans-serif;
	font-size: clamp(20px, 2.6vw, 25px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wj-navy);
}
.wj-car-vacio__p { margin: 0 0 22px; max-width: 56ch; font-size: 16px; line-height: 1.62; color: var(--wj-charcoal); }
.wj-car-vacio__a {
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	padding: 0 24px;
	background: var(--wj-red);
	border-radius: 6px;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background 200ms ease;
}
.wj-car-vacio__a:hover, .wj-car-vacio__a:focus-visible { background: var(--wj-deep-red); color: #fff; }

/* Listado de oportunidades: el mismo plegado que las preguntas frecuentes, para
   que la página no estrene un componente que el sitio ya tiene resuelto. */
.wj-car-lista { margin: 0 auto; padding: 0; list-style: none; max-width: 820px; }
.wj-car-puesto { border-top: 1px solid var(--wj-rule); }
.wj-car-puesto:last-child { border-bottom: 1px solid var(--wj-rule); }
.wj-car-puesto__h { margin: 0; }
.wj-car-puesto__btn {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 2px;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.wj-car-puesto__txt { flex: 1 1 auto; min-width: 0; }
.wj-car-puesto__t {
	display: block;
	font-family: Montserrat, sans-serif;
	font-size: clamp(18px, 2.2vw, 21px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wj-navy);
}
.wj-car-puesto__m {
	display: block;
	margin-top: 5px;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(0, 48, 73, 0.55);
}
/* El signo se dibuja con dos barras: al abrir, la vertical se tumba. */
.wj-car-puesto__mas { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 7px; }
.wj-car-puesto__mas::before, .wj-car-puesto__mas::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: var(--wj-red);
	transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wj-car-puesto__mas::after { transform: rotate(90deg); }
.wj-car-puesto__btn[aria-expanded="true"] .wj-car-puesto__mas::after { transform: rotate(0deg); }
.wj-car-puesto__int { padding: 0 0 24px; max-width: 62ch; }
.wj-car-puesto__r { margin: 0 0 18px; font-size: 16px; line-height: 1.62; }
.wj-car-puesto__bloque { margin-bottom: 18px; }
.wj-car-puesto__bloque h4 {
	margin: 0 0 8px;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: rgba(0, 48, 73, 0.62);
}
.wj-car-puesto__bloque ul { margin: 0; padding-left: 20px; }
.wj-car-puesto__bloque li { margin-bottom: 6px; font-size: 15.5px; line-height: 1.6; }
.wj-car-puesto__cta {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 22px;
	background: transparent;
	border: 1.5px solid var(--wj-red);
	border-radius: 999px;
	color: var(--wj-deep-red);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 200ms ease, color 200ms ease;
}
.wj-car-puesto__cta:hover, .wj-car-puesto__cta:focus-visible { background: var(--wj-red); color: #fff; }

/* ---------- 08 · Formulario ---------- */
/* El formulario se centra como el resto de la página, pero sus campos
   siguen alineados a la izquierda: centrar etiquetas y cajas de texto hace
   más difícil rellenarlo. */
.wj-car-form { max-width: 760px; margin-inline: auto; }
.wj-car-form__rejilla { display: grid; grid-template-columns: 1fr; gap: 18px; }
.wj-car-campo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wj-car-campo--ancho { grid-column: 1 / -1; }

.wj-car-form label {
	font-family: Montserrat, sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wj-navy);
}
.wj-car-opt { font-weight: 400; color: rgba(0, 48, 73, 0.55); }

.wj-car-form input[type="text"],
.wj-car-form input[type="email"],
.wj-car-form input[type="tel"],
.wj-car-form input[type="url"],
.wj-car-form select,
.wj-car-form textarea {
	width: 100%;
	/* 44 px es el mínimo cómodo con el dedo; en móvil menos obliga a apuntar. */
	min-height: 48px;
	padding: 12px 14px;
	background: #FFFFFE;
	border: 1px solid var(--wj-rule);
	border-radius: 8px;
	color: var(--wj-charcoal);
	font-family: Montserrat, sans-serif;
	/* 16 px evita que Safari en iPhone haga zoom al enfocar el campo. */
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}
.wj-car-form textarea { min-height: 128px; resize: vertical; }
.wj-car-form select { appearance: none; -webkit-appearance: none; padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--wj-navy) 50%), linear-gradient(135deg, var(--wj-navy) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.wj-car-form :is(input, select, textarea):focus-visible {
	border-color: var(--wj-red);
	box-shadow: 0 0 0 3px rgba(215, 50, 32, 0.16);
	outline: none;
}
.wj-car-form [aria-invalid="true"] { border-color: var(--wj-deep-red); }

.wj-car-form input[type="file"] {
	width: 100%;
	padding: 12px;
	background: #FFFFFE;
	border: 1px dashed var(--wj-rule);
	border-radius: 8px;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
}
.wj-car-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	min-height: 36px;
	padding: 0 16px;
	background: var(--wj-navy);
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.wj-car-archivo { font-size: 13.5px; color: rgba(0, 48, 73, 0.62); }

.wj-car-error { font-size: 13.5px; line-height: 1.45; color: var(--wj-deep-red); }
.wj-car-error:empty { display: none; }

.wj-car-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	margin: 22px 0 0;
	align-items: start;
}
/* 24 px es el mínimo que pide WCAG 2.5.8 para un objetivo táctil. La
   etiqueta de al lado también activa la casilla, pero el cuadro por sí
   solo tiene que poder pulsarse. */
.wj-car-consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--wj-red); }
.wj-car-consent label { font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--wj-charcoal); }
.wj-car-consent .wj-car-error { grid-column: 2; }
.wj-car-consent a { color: var(--wj-deep-red); text-decoration: underline; text-underline-offset: 2px; }

/* Campo trampa: fuera de la vista sin usar display:none, que algunos bots
   detectan, y fuera del recorrido del teclado. */
.wj-car-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.wj-car-form__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.wj-car-enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	background: var(--wj-red);
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 200ms ease;
}
.wj-car-enviar:hover:not(:disabled), .wj-car-enviar:focus-visible:not(:disabled) { background: var(--wj-deep-red); }
.wj-car-enviar:disabled { opacity: 0.6; cursor: progress; }

.wj-car-estado { margin: 0; font-size: 15px; line-height: 1.5; max-width: 46ch; }
.wj-car-estado:empty { display: none; }
.wj-car-estado.esta-bien { color: var(--wj-navy); font-weight: 600; }
.wj-car-estado.esta-mal { color: var(--wj-deep-red); }

/* ---------- Anchos medios ---------- */
@media (min-width: 620px) {
	.wj-car-form__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	#cr-hero { --flex-direction: row; --align-items: center; gap: 0 clamp(32px, 5vw, 72px); }
	#cr-hero__txt { --width: 50%; width: 50%; }
	/* La caja se ensancha hasta el borde de la pantalla y el margen negativo se
	   lleva ese exceso, así que la caja de márgenes vuelve a medir la mitad y la
	   columna de texto no se entera.

	   El ancho va escrito, no solo en --width: la regla base de más arriba fija
	   width:100% con el id por delante y le gana a la variable que escribe
	   Elementor. Sin esto la foto ocupa la fila entera y el texto se queda en
	   una palabra por línea. */
	#cr-hero__foto {
		--width: calc(50% + (100vw - 100%) / 2);
		width: calc(50% + (100vw - 100%) / 2);
		--flex-shrink: 0;
		flex-shrink: 0;
		margin-right: calc(50% - 50vw);
		border-radius: 12px 0 0 12px;
	}

	#cr-qui__cuerpo { --flex-direction: row; gap: 0 clamp(28px, 4vw, 56px); }
	#cr-qui__col1 { --width: 46%; }
	#cr-qui__col2 { --width: 54%; }

	#cr-gen__personas { --flex-direction: row; gap: clamp(18px, 2.5vw, 26px); }
	#cr-gen-w, #cr-gen-j { --width: 50%; min-width: 0; }

	#cr-gen__enc > .e-con { --width: 50%; }
	#cr-gen__enc { --flex-direction: row; --flex-wrap: wrap; }
	#cr-gen__enc > .elementor-widget-heading { --width: 100%; }
}

@media (max-width: 520px) {
	#cr-hero__btns > .elementor-widget { --width: 100%; }
	.cr-btn .elementor-button { width: 100%; }
	#cr-gen-w, #cr-gen-j { --flex-direction: column; --align-items: flex-start; gap: 14px; }
	[id^="cr-gen-"][id$="__foto"] { --width: 84px; }
	#cr-qui__cifras { --flex-wrap: wrap; gap: 20px clamp(16px, 4vw, 24px); }
	#cr-qui__cifras > .e-con { --flex-basis: 40%; }
	.wj-car-form__pie { flex-direction: column; align-items: stretch; }
	.wj-car-enviar { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cr-btn .elementor-button,
	.cr-enlace .elementor-button-text::after,
	.wj-car-puesto__mas::before,
	.wj-car-puesto__mas::after,
	.wj-car-vacio__a,
	.wj-car-puesto__cta,
	.wj-car-enviar,
	.wj-car-form :is(input, select, textarea) { transition: none; }
}

/* =========================== Menú de Seguros: el panel se quedaba corto ===========================
   «Negocios y Beneficios para Empleados» se salía 44 px por el borde derecho
   de la caja blanca.

   La causa no era el texto: era el tope. Elementor escribe `max-width: 100%`
   en el widget, y ese 100 % se mide contra #wj-seguros, que solo tiene el
   ancho de la palabra «Seguros» —48 px—. Con semejante tope, el
   `width: max-content` del panel no podía crecer y se quedaba clavado en su
   `min-width` de 240 px, mientras el elemento más largo medía 266 px sin
   partirse. La caja no crecía con su contenido.

   Se libera el tope y se le pone uno propio, que además nunca deja que el
   panel se salga de la pantalla. */
@media (min-width: 1101px) {
	.wj-seguros__list {
		max-width: min(24rem, calc(100vw - 2rem)) !important;
	}
	/* El ancho del panel lo fija su contenido, así que la lista de dentro no
	   puede pedir el 100 % del padre: eso es una referencia circular y deja el
	   cálculo a merced del orden en que el navegador resuelva cada caja. */
	.wj-seguros__list .elementor-icon-list-items { width: auto; }
}

/* En el menú plegable del móvil el texto sí se parte: ahí el ancho lo manda la
   pantalla, y una línea que no cabe se sale igual que aquí. */
@media (max-width: 1100px) {
	.wj-seguros__list .elementor-icon-list-text { white-space: normal; }
}

/* === WJ · PIE RECOGIDO === */
/* ============================================================
   PIE
   Ocupaba 595 px con una informacion que cabe en bastante menos.
   Se recoge sin quitar nada de lo que dice: la unica duplicacion
   real, los dos enlaces legales repetidos en la barra de abajo,
   se elimina de la barra y se queda en su columna.
   ============================================================ */

/* La marca y el eslogan se alinean entre si. El widget de imagen de
   Elementor centra por defecto, asi que el logo quedaba a media caja
   mientras el eslogan empezaba a la izquierda: no estaban torcidos
   respecto al pie, estaban torcidos el uno respecto al otro. */
#wj-footer .wj-footer__logo,
#wj-footer .wj-footer__logo .elementor-widget-container,
#wj-footer .wj-footer__logo figure { text-align: left; }
#wj-footer .wj-footer__logo img { width: 168px; height: auto; }
#wj-footer .wj-footer__logo { margin-bottom: 0.5rem; }
#wj-footer .wj-footer__tagline .elementor-heading-title {
  font-size: 16px;
  line-height: 1.4;
}

/* Proporcion. La marca se llevaba la mitad del pie y las tres listas
   se estrujaban en la otra mitad; el ajuste de Elementor no llegaba a
   aplicarse y quedaban al 50/50. */
/* Ojo con el nodo: Elementor solo crea .e-con-inner en los contenedores
   «boxed». #wj-footer__top y #wj-footer__bottom son «full», asi que las
   reglas que apuntaban a su .e-con-inner no estaban aplicando a nada
   —ni las que ya habia—. Se apunta al contenedor. */
#wj-footer #wj-footer__top { gap: 2rem; align-items: flex-start; }
#wj-footer .wj-footer__brand { flex: 0 1 26%; width: auto; }
#wj-footer #wj-footer__cols { flex: 1 1 auto; width: auto; flex-wrap: wrap; }
#wj-footer #wj-footer__cols > .e-con-inner { display: flex; gap: 2rem; width: 100%; }
#wj-footer #wj-footer__cols > .e-con-inner > .e-con { flex: 1 1 150px; min-width: 0; }

/* Un filete arriba separa el pie del contenido sin gastar altura, y el
   aire vertical baja donde sobraba. */
/* Elementor pone el relleno del contenedor en .e-con-inner, no en el
   elemento: los 72 px de arriba y 32 de abajo vivian ahi, y ponerlos a
   cero en #wj-footer no los tocaba. De ahi salen 104 px de los que
   sobraban. */
#wj-footer > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#wj-footer { padding-top: 34px !important; padding-bottom: 20px !important; }
#wj-footer__top {
  border-top: 1px solid rgba(250, 249, 246, 0.16);
  padding-top: 30px !important;
}
#wj-footer #wj-footer__col,
#wj-footer #wj-footer__col-1,
#wj-footer #wj-footer__col-2 { gap: 0.6rem !important; }
#wj-footer .wj-footer__head .elementor-heading-title {
  font-size: 10.5px;
  letter-spacing: 1.4px;
}
/* Cada enlace ocupaba 37 px de alto para 13,5 px de letra: la
   interlinea global de 27 px se estaba aplicando a una lista, donde no
   pinta nada. Seis enlaces pasan de 231 px a poco mas de 140. */
#wj-footer .wj-footer__list .elementor-icon-list-text,
#wj-footer .wj-footer__list a {
  padding: 2px 0;
  font-size: 13.5px;
  line-height: 1.5;
}
#wj-footer__bottom { margin-top: 1.15rem; padding-top: 0.9rem; }
#wj-footer .wj-footer__fine p { font-size: 11.5px; line-height: 1.6; }

/* La columna legal llevaba el tratamiento de «contenido pendiente»
   —cursiva, mas pequena, medio apagada— de cuando era un marcador.
   Ahora son dos enlaces de verdad y se leen como los demas. */
#wj-footer #wj-footer__col-2 .elementor-icon-list-text {
  color: rgba(250, 249, 246, 0.88);
  font-style: normal;
  font-size: 13.5px;
}

/* Estrecho. Las reglas que habia usaban grid-template-columns sobre un
   contenedor flex, asi que no hacian nada: el pie no se reorganizaba. */
@media (max-width: 860px) {
  #wj-footer #wj-footer__top { flex-direction: column; gap: 1.75rem; }
  #wj-footer .wj-footer__brand { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  #wj-footer #wj-footer__cols > .e-con-inner {
    flex-wrap: wrap;
    gap: 1.5rem;
  }
  #wj-footer #wj-footer__cols > .e-con-inner > .e-con { flex: 1 1 100%; }
  #wj-footer #wj-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* === WJ · MAGENTA Y CABECERA === */
/* ============================================================
   H-04 · El magenta del tema
   ------------------------------------------------------------
   reset.css de hello-elementor trae:

       a      { color: rgb(204, 51, 102) }
       button { border: 1px solid rgb(204,51,102); color: … }

   #CC3366 no existe en la paleta de WJ. Nunca se sobrescribio el
   color de enlace por defecto, asi que todo lo que el diseno no
   pinta explicitamente sale rosa. En la portada eran 14 elementos,
   y los seis puntos de etapa —«Comenzando», «Tu futuro»,
   «Familia»— quedaban en 2,79:1 sobre su fondo: por debajo del
   4,5:1 que exige el nivel AA.

   Se corrige en la raiz, no componente a componente: ya habia
   aparecido dos veces antes, en las tarjetas del selector y en el
   hover de los botones.
   ============================================================ */

a {
  color: var(--wj-deep-red, #780000);
}
/* Los enlaces que el diseno ya pinta no se tocan: llevan su propio
   color con mas especificidad. Esta regla solo alcanza a los que no
   tenian ninguno, que son justo los que salian magenta. */

button,
[type="button"],
[type="submit"] {
  border-color: currentColor;
  color: inherit;
}
button:hover, button:focus,
[type="button"]:hover, [type="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus {
  background-color: transparent;
  color: inherit;
}

/* Los puntos de etapa de la portada, que eran el caso visible. */
#wj-prob__foto .wj-etapa-punto {
  color: var(--wj-navy, #003049);
}

/* ============================================================
   CABECERA · se subia al hacer scroll
   ------------------------------------------------------------
   Habia tres reglas peleando por el mismo elemento:

     linea  140  #wj-header { position: sticky; z-index: 40 }
     linea  479  #wj-header { position: absolute; background: transparent !important }
     linea 3069  body:not(:has(#hero-wj)) #wj-header { position: sticky }

   La 479 anula a la 140 —misma especificidad, va despues—, asi que
   por defecto la cabecera es absolute en TODO el sitio, y una
   cabecera absolute se va con la pagina al hacer scroll. Eso es
   exactamente «se sube».

   Lo unico que la devolvia a sticky era la 3069, y dependia entera
   de que el navegador soporte :has(). Donde no —Firefox anterior al
   121, Chrome anterior al 105, Safari anterior al 15.4— la regla se
   descarta completa y vuelve a mandar la 479.

   Aqui se decide por una clase en el <body>, que la pone PHP y
   entiende cualquier navegador. Y se limpian los restos que la
   cabecera arrastraba de cuando era absolute: left, right y un
   z-index de 30 heredado.
   ============================================================ */

/* ------------------------------------------------------------
   La cabecera
   ------------------------------------------------------------
   Requisitos, los dos a la vez:

     · La fotografia del hero tiene que verse DETRAS de la cabecera,
       no empujada hacia abajo.
     · Y la cabecera tiene que acompanar al scroll y seguir siendo
       legible cuando el contenido pasa por debajo.

   Solucion: sticky siempre + hero subido con margen negativo + un
   fondo que aparece al bajar (clase `is-stuck`, que ya estaba escrita
   en este archivo y a la que nunca nadie le puso el JavaScript;
   ahora se la pone wj-cabecera.php).

   OJO CON COMO SE ESCRIBE EL FONDO. Antes habia dos declaraciones de
   `background` peleandose —una transparente y otra opaca, las dos con
   !important y distinta especificidad— y el resultado no era fiable.
   Aqui hay UNA SOLA declaracion de background en todo el bloque, y lo
   que cambia es una variable. Una variable no tiene el problema de las
   abreviadas ni de !important: la fija la regla mas especifica y ya.
   ------------------------------------------------------------ */

#wj-header {
  --wj-cab-fondo: rgba(250, 249, 246, 0.96);
  --wj-cab-borde: var(--wj-rule, rgba(0, 48, 73, 0.13));

  position: sticky !important;
  top: 0;
  left: auto;
  right: auto;
  /* Por encima de todo el contenido: el recorte que se veia al hacer
     scroll era la cabecera perdiendo la pelea de apilado. */
  z-index: 100 !important;
  /* Propiedad LARGA, no la abreviada. Una `background: var(...)` deja
     todas sus sublongitudes en «sustitucion pendiente» y el color
     acababa resolviendose al valor inicial, que es transparente.
     `background-color` con var() se resuelve sin ese rodeo. */
  background-color: var(--wj-cab-fondo) !important;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--wj-cab-borde) !important;
  /* Sin backdrop-filter a proposito: crea un contexto de apilado propio
     y es causa habitual de que un sticky se dibuje a medias. */
  transition: background-color 220ms ease, border-color 220ms ease;
}

/* --- Portada --- */

/* El hero sube 75 px y recupera esos 75 px por dentro: la fotografia
   ocupa tambien la franja de la cabecera y el texto no se mueve. */
body.wj-con-hero #hero-wj {
  margin-top: -75px !important;
  padding-top: 75px !important;
}

/* Arriba del todo, transparente: se ve la foto detras. */
body.wj-con-hero #wj-header {
  --wj-cab-fondo: transparent;
  --wj-cab-borde: transparent;
}

/* Al bajar, recupera el fondo. Solo cambia la variable. */
body.wj-con-hero #wj-header.is-stuck {
  --wj-cab-fondo: rgba(250, 249, 246, 0.96);
  --wj-cab-borde: var(--wj-rule, rgba(0, 48, 73, 0.13));
  box-shadow: 0 1px 12px rgba(0, 48, 73, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  #wj-header { transition: none; }
}

#wj-header.is-nav-open { z-index: 60 !important; }