/* Spanish content uses the same reviewed component families and tokens as the
 * launch homepages. These rules cover its different content lengths and reduced
 * navigation; copy, media and market-specific form routing stay in Spanish. */
html[lang="es"] .nav-notice {
  padding: 10px 24px 0;
  background: #f6faf8;
  color: var(--ou-navy);
  text-align: center;
  font: 400 13px/1.5 var(--ou-font-sans);
}
html[lang="es"] .nav-notice p { margin: 0; font: inherit !important; color: inherit; }
html[lang="es"] .nav-notice a { color: var(--ou-navy); text-decoration: underline; text-underline-offset: 3px; }
/* Only two items sit here, so the auto margin split the free space and left
   them stranded mid-bar. Sit them next to the logo like every other locale. */
html[lang="es"] .nav-links { margin-left: 0; margin-right: auto; }
html[lang="es"] .nav .nav-login { color: var(--ou-navy); font-size: 14px; white-space: nowrap; }
html[lang="es"] .nav-drawer-foot .nav-login { display: none; }
html[lang="es"] .footer-v2 .footer-grid { grid-template-columns: 1.2fr 1fr 1fr !important; align-items: center; gap: 40px; }
html[lang="es"] .footer-v2 .footer-col > img { width: 151px; filter: brightness(0) invert(1); }
html[lang="es"] .footer-social-copy { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 20px 0 12px; font-size: 14px; }
html[lang="es"] .footer-v2 .google-badge { display: inline-flex; flex-wrap: nowrap; gap: 8px; padding: 10px 14px; white-space: nowrap; color: var(--ou-navy); }
html[lang="es"] .footer-v2 .google-badge img { flex: none; object-fit: contain; }
html[lang="es"] .footer-v2 .google-badge img:nth-child(2) { width: 80px; }
html[lang="es"] .footer-v2 .footer-store { display: flex; flex-wrap: wrap; gap: 12px; }
html[lang="es"] .footer-v2 .footer-store a { padding: 0; }
html[lang="es"] .footer-v2 .footer-store img { width: 140px; height: auto; max-width: 100%; }
html[lang="es"] .footer-legal ul { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
html[lang="es"] .footer-v2 .footer-bottom-inner { align-items: start; }

/* The ES homepage is a content-preserving composition, not an EN translation.
 * The source's eight sections remain in their original order. */
.es-home { color: var(--ou-navy); font-family: var(--ou-font-sans); }
.es-home *, .es-home *::before, .es-home *::after { box-sizing: border-box; }
.es-home p { opacity: 1; }
.es-home .container { width: min(100%, 1248px); max-width: 1248px; padding-inline: 40px; margin-inline: auto; }
.es-home .lp3-sec { padding: clamp(56px, 6vw, 88px) 0; }
.es-home .lp3-sec--white { background: #fff; }
.es-home .lp3-sec--slate { background: #f7faf9; }
.es-home .lp3-sec--slate:has(.lp3-experts) { background: #fff; }
.es-home .lp3-sechead { max-width: 800px; margin: 0 auto 40px; }
.es-home .lp3-sechead--center { text-align: center; }
.es-home :is(.lp3-h2, .b-tabbed-img-desc-link h2) {
  font: 900 clamp(28px, 2.7vw, 42px)/1.18 var(--ou-font-serif);
  letter-spacing: -.02em; color: var(--ou-navy); text-wrap: balance;
  margin: 0 0 20px;
}
.es-home .lp3-lead { font-size: 18px; line-height: 1.65; color: var(--ou-slate); }
.es-home .lp3-lead p { margin: 0; color: var(--ou-slate) !important; }
.es-home .btn { font-family: var(--ou-font-sans); max-width: 100%; text-decoration: none; }
.es-home .btn-primary { color: #fff !important; background: var(--ou-blue-500) !important; }
.es-home .btn-primary:hover { background: var(--ou-blue-600) !important; }
.es-home .btn-outline { color: var(--ou-navy); border: 1.5px solid rgba(21,35,97,.22); background: #fff; }
.es-home .btn-outline:hover { background: #f3f6fa; border-color: var(--ou-navy); }
.es-home .hero { background: #f6faf8; padding: 64px 0 72px; }
.es-home .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; }
.es-home :is(.hero-text, .hero-media) { min-width: 0; }
.es-home .hero h1 {
  margin: 0; font: 900 clamp(34px, 3.3vw, 50px)/1.13 var(--ou-font-serif);
  letter-spacing: -.025em; color: var(--ou-navy); text-wrap: balance;
}
.es-home .hero-sub { margin-top: 24px; font-size: 18px; line-height: 1.65; color: var(--ou-slate); }
.es-home .hero-sub p { margin: 0; color: var(--ou-slate) !important; }
.es-home .hero-points { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 24px 0 0; }
.es-home .hero-point { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ou-navy); }
.es-home .hero-point .c-icon { width: 20px; height: 20px; color: var(--ou-green-500); }
.es-home .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.es-home .hero-photo { border-radius: 24px; overflow: hidden; }
.es-home .hero-photo :is(picture,img) { display: block; width: 100%; height: auto; }
.es-home .hero-trust { display: flex; justify-content: center; margin-top: 20px; }
.es-home .hero-trust .c-review-link { padding: 0; background: none; border: 0; color: var(--ou-navy); font-size: 13px; flex-wrap: nowrap; }
.es-home .hero-trust .c-review-link__stars { flex: none; }
.es-home .hero-trust .c-review-link__text { white-space: nowrap; }
.es-home .logobar { padding: 40px 0 56px; background: #fff; }
.es-home .logobar-title { margin: 0 0 28px; text-align: center; font-size: 16px; font-weight: 500; color: var(--ou-slate); }
.es-home .logobar-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 44px; }
.es-home .logo-item { display: flex; align-items: center; justify-content: center; min-width: 92px; height: 40px; }
.es-home .logo-item img { height: auto; max-height: 28px; max-width: 140px; width: auto; object-fit: contain; }
.es-home .pdeck-stack { transform: none; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.es-home .pdeck-card { min-width: 0; margin: 0; }
.es-home .pdeck-media { overflow: hidden; border-radius: 20px; background: #f7faf9; }
.es-home .pdeck-media :is(picture,img) { display: block; width: 100%; height: auto; }
.es-home .pdeck-media img { object-fit: contain; }
.es-home .pdeck-caption { padding-top: 24px; }
.es-home .pdeck-caption h3 { margin: 0 0 12px; color: var(--ou-navy); font: 700 23px/1.3 var(--ou-font-serif); }
.es-home .pdeck-caption p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ou-slate) !important; }
.es-home .b-tabbed-img-desc-link .s-tabbed-img-desc-link__nav { flex-wrap: wrap; gap: 10px; margin: 24px auto 28px; }
.es-home .b-tabbed-img-desc-link .s-tabbed-img-desc-link__btn { margin: 0; }
.es-home .b-tabbed-img-desc-link .s-tabbed-img-desc-link__content-text { max-width: 760px; margin: auto; font-size: 18px; line-height: 1.65; }
.es-home .b-tabbed-img-desc-link .s-tabbed-img-desc-link__content-media { max-width: 980px; margin: 32px auto 0; }
.es-home .b-tabbed-img-desc-link .s-tabbed-img-desc-link__content-media :is(picture,img) { max-width: 100%; height: auto; }
.es-home .hrimpact { background: var(--ou-grad-navy); color: #fff; }
.es-home .hrimpact .lp3-h2 { color: #fff; }
.es-home .lp3-impact__stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; text-align: center; }
.es-home .lp3-impact__statN { display: block; color: var(--ou-blue-500); font: 700 clamp(46px,5vw,66px)/1.1 var(--ou-font-serif); }
.es-home .lp3-impact__statL { margin: 18px auto 0; max-width: 290px; color: var(--ou-on-navy-body); font-size: 16px; line-height: 1.6; }
.es-home .lp3-impact__actions { display: flex; justify-content: center; margin-top: 40px; }
.es-home .lp3-quotes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.es-home .lp3-quote { display: flex; flex-direction: column; margin: 0; padding: 32px; border: 1px solid rgba(21,35,97,.1); border-radius: 24px; background: #f7faf9; }
.es-home .lp3-quote__text { margin: 0 0 24px; font: 500 19px/1.6 var(--ou-font-sans); color: var(--ou-navy); }
.es-home .lp3-quote__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.es-home .lp3-quote__who picture { flex: none; }
.es-home .lp3-quote__who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.es-home .cs-who-text { display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 1.4; }
.es-home .cs-who-text > span { color: var(--ou-slate); }
.es-home .lp3-quote__score { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(21,35,97,.1); font-size: 14px; line-height: 1.6; }
.es-home .quote-cta-desktop { margin-top: 24px; }
.es-home .quote-cta-mobile { display: none; }
/* Nine experts in a three-column grid stacked into a 1300px slab. Put them on
   one snapping rail instead, so the section reads as a row of cards like the
   rest of the page. The card basis sets how many are in view per breakpoint;
   the fractional count on small screens leaves a peek that says "scroll me". */
.es-home .lp3-experts {
  --experts-gap: 28px;
  --experts-per-view: 4;
  display: flex;
  gap: var(--experts-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(21,35,97,.25) transparent;
}
.es-home .lp3-experts > .c-team-card {
  flex: 0 0 calc((100% - (var(--experts-per-view) - 1) * var(--experts-gap)) / var(--experts-per-view));
  scroll-snap-align: start;
}
.es-home .lp3-expert { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(21,35,97,.09); }
.es-home .lp3-expert > img { width: 100%; aspect-ratio: 1.25; height: auto; object-fit: cover; object-position: center 20%; background: #f6faf8; }
.es-home .lp3-expert__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.es-home .lp3-expert__name { font-size: 17px; line-height: 1.4; font-weight: 700; }
.es-home .lp3-expert__role { font-size: 14px; color: var(--ou-slate); }
.es-home .lp3-expert__flags { display: flex; gap: 8px; }
.es-home .lp3-expert__flags :is(span,svg) { display: inline-block; width: 22px; height: 16px; margin: 0; }
.es-home .demo { padding: 64px 0; }
.es-home .demo-list li p { margin: 0; }
.es-home .demo-form .field-row { margin: 0; padding: 0; border: 0; min-width: 0; grid-template-columns: minmax(0,1fr) !important; }
.es-home .demo-form .field-row:first-of-type { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.es-home .demo-form .c-subscription-form__button { display: flex; justify-content: start; margin: 0; }
.es-home .demo .demo-logos--page { display: flex; justify-content: start; flex-wrap: wrap; gap: 20px; }
.es-home .demo .demo-logowall { display: block !important; }
.es-home .demo .logo-badge { flex: 0 0 80px; width: 80px; height: 80px !important; overflow: visible; padding: 0; }
.es-home .demo .logo-badge img { width: 80px !important; max-width: 80px !important; height: 80px !important; max-height: 80px !important; object-fit: contain; }
@media (min-width: 1061px) {
  html[lang="es"] body:has(.es-home) { background-color: #f6faf8 !important; }
  .es-home .hero { margin-top: -98px; padding-top: 162px; }
}
@media (max-width: 1060px) {
  html[lang="es"] .nav-links { margin-left: 0; }
  html[lang="es"] .nav .nav-actions > .nav-login { display: none; }
  html[lang="es"] .nav-drawer-foot .nav-login { display: inline-flex; }
  html[lang="es"] .nav-links > .nav-plain { display: flex !important; width: 100%; padding: 16px 0; border-bottom: 1px solid rgba(21,35,97,.1); }
  .es-home .hero-grid { gap: 32px; }
  .es-home .hero h1 { font-size: clamp(32px,4vw,44px); }
}
@media (max-width: 900px) {
  .es-home .hero-grid { grid-template-columns: minmax(0,1fr); }
  .es-home .hero-text { max-width: 680px; margin: auto; text-align: center; }
  .es-home :is(.hero-points,.hero-cta) { justify-content: center; }
  .es-home .hero-media { width: min(100%,640px); margin: 0 auto; }
  .es-home .pdeck-stack { gap: 20px; }
  .es-home .pdeck-caption h3 { font-size: 20px; }
  .es-home .lp3-experts { --experts-gap: 16px; --experts-per-view: 4; }
  .es-home .lp3-expert__body { padding: 14px; }
  .es-home .lp3-expert__name { font-size: 15px; }
  html[lang="es"] .footer-v2 .footer-grid { grid-template-columns: 1fr 1fr !important; }
  html[lang="es"] .footer-v2 .footer-store { grid-column: 1/-1; }
}
@media (max-width: 600px) {
  html[lang="es"] .nav-notice { padding: 10px 18px; font-size: 12px; }
  html[lang="es"] .footer-v2 .footer-grid { grid-template-columns: minmax(0,1fr) !important; gap: 28px; }
  .es-home .container { padding-inline: 24px; }
  .es-home .hero { padding: 36px 0 48px; }
  .es-home .hero h1 { font-size: 34px; }
  .es-home .hero-sub { font-size: 17px; }
  .es-home .hero-points { gap: 10px 16px; }
  .es-home .hero-point { font-size: 13px; }
  .es-home .hero-trust .c-review-link { gap: 0; font-size: 12px; }
  .es-home .hero-trust .c-review-link > img { width: 50px; height: auto; }
  .es-home .hero-trust .c-review-link__stars img { width: 80px; height: auto; }
  .es-home .logobar-grid { gap: 20px; }
  .es-home .logo-item { width: calc((100% - 20px)/2); }
  .es-home .logo-item img { max-width: 115px; }
  .es-home :is(.pdeck-stack,.lp3-impact__stats,.lp3-quotes) { grid-template-columns: minmax(0,1fr); }
  .es-home .pdeck-stack { gap: 36px; }
  .es-home .pdeck-media { width: min(100%,380px); margin: auto; }
  .es-home .pdeck-caption { padding-top: 20px; }
  .es-home .pdeck-caption h3 { font-size: 24px; }
  .es-home .lp3-sechead { margin-bottom: 28px; }
  .es-home .lp3-lead { font-size: 16px; }
  .es-home .lp3-quote { padding: 24px; }
  .es-home .lp3-quote__text { font-size: 17px; }
  .es-home .quote-cta-desktop { display: none; }
  .es-home .quote-cta-mobile { display: flex; justify-content: center; margin-top: 28px; }
  .es-home .lp3-experts { --experts-gap: 14px; --experts-per-view: 2.2; }
  .es-home .lp3-expert > img { aspect-ratio: 1; }
  .es-home .lp3-expert__body { padding: 12px; gap: 6px; }
  .es-home .lp3-expert__name { font-size: 14px; }
  .es-home .lp3-expert__role { font-size: 12px; }
  .es-home .demo-form .field-row:first-of-type { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 360px) {
  .es-home .container { padding-inline: 20px; }
  .es-home .hero h1 { font-size: 30px; }
  .es-home .hero-cta .btn { width: 100%; }
  .es-home .lp3-experts { --experts-gap: 10px; --experts-per-view: 1.6; }
  .es-home .lp3-expert__body { padding: 10px; }
  .es-home .lp3-expert__name { font-size: 13px; }
}

/* The current Spanish navigation is in flow, so demo pages no longer reserve
 * the old absolute header's 160px gap. */
html[lang="es"] main > .demo.demo--page:first-child { padding-top: 56px !important; }
.es-home .demo .logo-badge picture { display: block; width: 80px; height: 80px; }
.es-home .demo .logo-badge { border-radius: 0 !important; overflow: visible !important; background: none !important; }
@media (max-width: 900px) {
  html[lang="es"] main > .demo.demo--page:first-child { padding-top: 32px !important; }
}

/* Profile portraits use the current bounded media card instead of the legacy
 * rotated image. The fixed aspect ratio also preserves layout if Blob media is
 * unavailable in a local preview or an image fails to load. */
html[lang="es"] .s-block-expert-bio__photo {
  position: relative;
  aspect-ratio: 326 / 244;
  max-width: 480px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 20px;
}
html[lang="es"] .s-block-expert-bio__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  rotate: none;
}

/* The captured Spanish demo form right-aligns its submit. The reviewed demo in
   every other locale starts it at the left edge of the form column. */
html[lang="es"] .demo.demo--page .demo-form--legacy .c-subscription-form__button {
  justify-content: flex-start;
}

/* Controls for the experts rail (injected by design-review-components.js only
   when the rail actually overflows). */
.lp3-experts__controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.lp3-experts__arrow {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--ou-navy);
  border: 1px solid rgba(21,35,97,.14);
  box-shadow: 0 1px 2px rgba(21,35,97,.06);
  transition: background-color .16s ease, border-color .16s ease, opacity .16s ease;
}
.lp3-experts__arrow svg { width: 18px; height: 18px; }
.lp3-experts__arrow:hover:not(:disabled) { background: var(--ou-skin); border-color: rgba(21,35,97,.28); }
.lp3-experts__arrow:disabled { opacity: .35; cursor: default; }

/* The Spanish homepage demo pairs its rows by position, so the merged
   email + job title row needs the same two-column treatment the name row gets.
   (The Spanish demo page already keys off this marker in v7-reskin.css.) */
.es-home .demo-form .field-row:has(> .c-subscription-form__field.md\:w-1\/2) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 767px) {
  .es-home .demo-form .field-row:has(> .c-subscription-form__field.md\:w-1\/2) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* Footer: one row, everything on the same centre line. Logo and socials share a
   line, the Google chip sits centred, the store badges line up at one height. */
@media (min-width: 1061px) {
  html[lang="es"] .footer-v2 .footer-grid {
    display: flex !important; align-items: center; justify-content: space-between; gap: 40px;
  }
  html[lang="es"] .footer-v2 .footer-col:first-child { display: flex; align-items: center; gap: 28px; }
  html[lang="es"] .footer-v2 .footer-col:first-child > img { width: 140px; margin: 0; }
  html[lang="es"] .footer-v2 .footer-social { display: flex; align-items: center; gap: 16px; margin: 0; }
  html[lang="es"] .footer-v2 .footer-social a { padding: 0; line-height: 0; }
  html[lang="es"] .footer-v2 .footer-store { flex-wrap: nowrap; align-items: center; gap: 12px; }
  html[lang="es"] .footer-v2 .footer-store img { width: auto; height: 44px; }
  html[lang="es"] .footer-v2 .google-badge { margin: 0; }
}


/* Experts rail cards are the team-page card, measured from /es/team/: the
   homepage sheet does not carry the theme's team-card rules, so they are set here. */
.es-home .lp3-experts > .c-team-card { display: flex; flex-direction: column; overflow: hidden; }
.es-home .lp3-experts .c-team-card__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.es-home .lp3-experts .c-team-card__body { padding: 20px; }
.es-home .lp3-experts .c-team-card__link { display: flex; justify-content: space-between; }
.es-home .lp3-experts .c-team-card__bio__box { display: block; color: var(--ou-navy); font-size: 18px; line-height: 36px; font-weight: 600; }
.es-home .lp3-experts .c-card-team__first-name, .es-home .lp3-experts .c-card-team__last-name { display: block; }
.es-home .lp3-experts .c-team-card__flags-box { display: flex; padding-top: 8px; }
/* the Spanish fragment flags carry the older c-card-team__flag class */
.es-home .lp3-experts :is(.c-team-card__flag, .c-card-team__flag) { display: block; width: 20px; height: 20px; border-radius: 50%; margin-left: -5px; overflow: hidden; }
.es-home .lp3-experts :is(.c-team-card__flag, .c-card-team__flag) svg { display: block; width: 20px; height: 20px; }
.es-home .lp3-experts .c-team-card__info { display: block; color: var(--ou-navy); font-size: 18px; line-height: 32px; font-weight: 300; }
/* Footer row a touch higher, the way the other locales sit under the demo band. */
html[lang="es"] body[data-brand] .footer { padding-top: 44px; }
/* Demo page headline: the shared 12ch cap wrapped the Spanish H1 onto six lines. */
.es-lang .demo.demo--full-width .demo-info h1 { font-size: clamp(30px, 2.7vw, 40px) !important; line-height: 1.12 !important; max-width: 18ch; }
.es-lang .demo.demo--page.demo--full-width > .demo-grid { grid-template-columns: 1.1fr 1fr; }

/* Badge row keeps its distance from the divider below it. */
html[lang="es"] .footer-v2 .footer-grid { margin-bottom: 44px; }

/* v7 homepage, Spanish only: none of the featured clients has a Spanish case
   study, so the "read the case study" links stay off until there is one. */
html[lang="es"] .cs-case-study { display: none; }