@font-face {
  font-family: JemaDisplay;
  src: url('jema-assets/BebasNeue-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url('jema-assets/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f0efed;
  --ink: #22313e;
  --muted: #4d5c68;
  --accent: #f86629;
  --accent-ink: #b44112;
  --body: Montserrat, Arial, sans-serif;
  --display: JemaDisplay, Impact, sans-serif;
  --glass-shadow: 0 18px 44px #45566c12, 0 2px 6px #5364780a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  position: relative;
  isolation: isolate;
  min-width: 280px;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
.portal-atmosphere {
  --drift-duration: 18s;
  --drift-delay: -4s;
  --glimmer-duration: 8s;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.portal-atmosphere::before {
  content: '';
  position: absolute;
  inset: -3%;
  background: url('jema-assets/liquid-glass-background.webp') center top / cover no-repeat;
  transform: scale(1.025);
  animation: glass-drift var(--drift-duration) ease-in-out var(--drift-delay) infinite alternate;
}
.portal-atmosphere::after {
  content: '';
  position: absolute;
  inset: -3%;
  opacity: .24;
  background:
    radial-gradient(circle at 12% 38%, #fff8e3bf 0, #ffffff52 9px, transparent 32px),
    radial-gradient(circle at 86% 26%, #fff8decc 0, #ffffff54 7px, transparent 28px),
    radial-gradient(circle at 92% 74%, #fff8e8b8 0, #ffffff40 10px, transparent 35px),
    radial-gradient(circle at 23% 85%, #fffaf2bf 0, transparent 22px);
  animation: glass-glimmer var(--glimmer-duration) ease-in-out -3s infinite alternate;
}
.portal-atmosphere.is-paused::before,
.portal-atmosphere.is-paused::after { animation-play-state: paused; }
@keyframes glass-drift {
  from { transform: translate3d(-1.7%, -.9%, 0) scale(1.025); }
  to { transform: translate3d(1.7%, 1.2%, 0) scale(1.055); }
}
@keyframes glass-glimmer {
  from { opacity: .15; transform: translate3d(-5px, 4px, 0); }
  to { opacity: .85; transform: translate3d(15px, -15px, 0); }
}
a { color: inherit; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, p { margin: 0; }
a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 5px; }
::selection { background: #f8c6aa; color: #26333e; }
.wrap { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 14px; background: #fff; }
.skip-link:focus { top: 16px; }

.portal-main { padding-top: clamp(42px, 8.5svh, 96px); }
.portal-intro { text-align: center; margin-bottom: 30px; }
.eyebrow {
  display: inline-block;
  margin-bottom: 13px;
  padding: 5px 15px;
  border: 1px solid #ef9b6970;
  border-radius: 100px;
  background: #fff6edc9;
  box-shadow: inset 0 1px 1px #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #994016;
}
.portal-intro h1 { font: 400 clamp(2.9rem, 4.6vw, 4rem)/1.04 var(--display); letter-spacing: .005em; overflow-wrap: anywhere; }
.portal-intro h1 span { color: #d34e18; }
.intro-copy { margin-top: 12px; font-size: 1rem; line-height: 1.65; color: var(--muted); }
.intro-copy span { display: inline-block; }

/* Portadas panorámicas completas, junto a las superficies de vidrio. */
.sector-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; perspective: 1400px; }
.sector {
  --tint: 244, 112, 56;
  --sector-ink: #a13512;
  --sector-color: #d94f1b;
  --sector-deep: #b83b0c;
  --glass-x: 50%;
  --glass-y: 25%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(var(--tint), .55);
  border-radius: 34px;
  background: linear-gradient(150deg, #ffffff52, rgba(var(--tint), .09) 56%, #ffffff38);
  box-shadow: 0 9px 28px rgba(var(--tint), .19), 0 2px 7px #354c6610, inset 0 0 0 3px #ffffffdf, inset 0 0 18px rgba(var(--tint), .22);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s;
  animation: glass-arrive .75s cubic-bezier(.2,.7,.3,1) backwards;
}
.sector-corporate { --tint: 25, 131, 228; --sector-ink: #125c95; --sector-color: #1478c4; --sector-deep: #075d9f; animation-delay: .09s; }
.sector-creative { --tint: 135, 81, 224; --sector-ink: #6938a6; --sector-color: #814bce; --sector-deep: #6137a8; animation-delay: .18s; }
.sector::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: 3;
  border: 1px solid #ffffffeb;
  border-radius: 28px;
  box-shadow: 0 0 9px #ffffffa8, inset 0 1px 5px #ffffffac;
  pointer-events: none;
}
.sector::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(290px circle at var(--glass-x) var(--glass-y), #ffffffad, transparent 72%);
  transition: opacity .4s;
}
.sector-image { position: relative; width: 100%; aspect-ratio: 16 / 9; flex: none; overflow: hidden; border-radius: 24px; background: #d6dee4; }
.sector-image::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid #ffffff66; pointer-events: none; }
.sector-image img { width: 100%; height: 100%; object-fit: contain; }
.sector-top { position: relative; z-index: 3; display: flex; align-items: flex-start; padding: 14px 10px 0; }
.sector-tag {
  display: inline-block;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid rgba(var(--tint), .36);
  border-radius: 100px;
  background: #f8fafdde;
  box-shadow: 0 3px 12px #2835470d, inset 0 1px 1px #fff;
  font-size: .875rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--sector-ink);
}
.sector-glass {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  margin-top: 12px;
  border: 1px solid #fffffff2;
  border-radius: 26px;
  background: linear-gradient(145deg, #fffffff5, #f9fafbf2);
  box-shadow: 0 5px 18px #344c6512, inset 0 1px 4px #fff, inset 0 -2px 4px #ffffffed;
}
.sector-content { flex: 1; min-width: 0; padding: 22px 22px 18px; }
.sector h2 { min-height: 1.94em; font: 400 clamp(2.4rem, 3.2vw, 3.15rem)/.97 var(--display); letter-spacing: .004em; color: var(--sector-ink); overflow-wrap: anywhere; }
.sector-social h2 span, .sector-creative h2 span { display: block; }
.sector-creative h2 { font-size: clamp(2.2rem, 2.9vw, 2.85rem); }
.sector-description { margin-top: 13px; font-size: 1rem; line-height: 1.6; color: #384c5b; }
.sector-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-inline: 22px; padding: 12px 0 16px; border-top: 1px solid #66798b1c; font-size: .875rem; font-weight: 600; line-height: 1.45; }
.sector-action > span:first-child { min-width: 0; color: var(--sector-ink); }
.sector-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid #ffffffed;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--sector-color), var(--sector-deep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(var(--tint), .3), inset 0 1px 2px #ffffff91;
  transition: background .3s, transform .3s;
}
.sector-arrow svg { width: 18px; height: 18px; }
.sector:focus-visible { outline-offset: 5px; }
.sector:focus-visible .sector-arrow { background: var(--sector-deep); }

.portal-under { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 27px; padding-inline: 6px; }
.portal-under p { max-width: 670px; font-size: .875rem; line-height: 1.65; color: var(--muted); }
.portal-under strong { color: var(--ink); font-weight: 600; }
.direct-help { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 9px 17px; border: 1px solid #fffffff0; border-radius: 100px; background: #ffffff8f; box-shadow: 0 5px 18px #45566c12, inset 0 1px 3px #fff; font-size: .875rem; font-weight: 600; }
.direct-help:hover { background: #fff; }
.portal-footer { margin-top: 24px; padding: 0 0 48px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 6px 0; border-top: 1px solid #70829621; font-size: .75rem; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.footer-links a { font-size: .875rem; padding-block: 5px; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 19px;
  border: 1px solid #ffffffed;
  border-radius: 100px;
  background: linear-gradient(140deg, #168556, #0c6b43);
  color: #fff;
  box-shadow: 0 8px 26px #17684336, inset 0 1px 2px #ffffffac;
  font-size: .875rem;
  font-weight: 600;
  transition: transform .3s, box-shadow .3s;
}
.whatsapp-float svg { width: 23px; height: 23px; }
.whatsapp-float:hover { box-shadow: 0 8px 26px #33594a30; }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sector-tag { background: #f8fafddb; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .sector-glass {
    background:
      linear-gradient(120deg, #ffffff30 0%, transparent 26%, #ffffff29 46%, transparent 63%),
      linear-gradient(180deg, #ffffffc9 0%, #ffffff85 36%, #ffffff4d 64%, #ffffffb0 100%);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
    backdrop-filter: blur(20px) saturate(1.18);
  }
  .direct-help { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
@media (hover: hover) and (pointer: fine) {
  .sector:hover { transform: translateY(-5px); border-color: rgba(var(--tint), .8); box-shadow: 0 18px 38px rgba(var(--tint), .25), 0 3px 9px #354c661c, inset 0 0 0 3px #fffffff2, inset 0 0 20px rgba(var(--tint), .24); }
  .sector:hover::after { opacity: .72; }
  .sector:hover .sector-arrow { transform: translate(1px, -1px); background: var(--sector-deep); }
  .whatsapp-float:hover { transform: translateY(-2px); }
}
@keyframes glass-arrive { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 48px); }
  .sector-grid { gap: 18px; }
  .sector { padding: 10px; border-radius: 29px; }
  .sector::before { border-radius: 23px; }
  .sector-image { border-radius: 21px; }
  .sector-tag { font-size: .875rem; padding: 5px 10px; }
  .sector-glass { border-radius: 22px; }
  .sector-content { padding: 21px 19px 17px; }
  .sector h2 { font-size: 2.8rem; }
  .sector-creative h2 { font-size: 2.55rem; }
  .sector-action { margin-inline: 19px; gap: 9px; }
  .sector-arrow { width: 38px; height: 38px; }
  .portal-under p { max-width: 510px; }
}
@media (max-width: 960px) {
  .portal-atmosphere { --drift-duration: 22s; --drift-delay: -5s; --glimmer-duration: 10s; }
  .portal-atmosphere::before { background-position: 68% top; }
  .wrap { width: min(760px, calc(100% - 36px)); }
  .portal-main { padding-top: 40px; }
  .portal-intro { margin-bottom: 26px; }
  .portal-intro h1 { font-size: clamp(2.9rem, 7vw, 4rem); }
  .intro-copy { max-width: 560px; margin-inline: auto; }
  .sector-grid { grid-template-columns: 1fr; gap: 19px; }
  .sector { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 16px; padding: 10px; border-radius: 29px; }
  .sector-image { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .sector-top { grid-column: 2; grid-row: 1; padding: 4px 6px 0; }
  .sector-glass { grid-column: 2; grid-row: 2; width: 100%; margin-top: 10px; border-radius: 22px; }
  .sector-content { padding: 20px 23px 15px; }
  .sector h2 { min-height: 0; font-size: 2.75rem; line-height: 1; }
  .sector-social h2 span { display: inline; }
  .sector-social h2 span + span::before { content: ' '; }
  .sector-creative h2 { font-size: 2.5rem; }
  .sector-description { margin-top: 11px; max-width: 380px; font-size: 1rem; }
  .sector-action { margin-inline: 23px; padding: 12px 0 14px; }
  .sector-arrow { width: 38px; height: 38px; }
  .portal-under { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .portal-under p { max-width: 580px; }
  .portal-footer { margin-top: 22px; padding-bottom: 88px; }
  .footer-inner { align-items: center; flex-direction: column; gap: 12px; padding-top: 19px; }
  .whatsapp-float { right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sector-glass { background: linear-gradient(145deg, #ffffffca, #ffffffb8 54%, #ffffffde); }
  }
}
@media (max-width: 540px) {
  .wrap { width: calc(100% - 28px); }
  .portal-main { padding-top: 32px; }
  .portal-intro { margin-bottom: 23px; }
  .portal-intro h1 { font-size: clamp(2.55rem, 10vw, 3.25rem); }
  .eyebrow { letter-spacing: .07em; margin-bottom: 10px; padding: 4px 11px; }
  .intro-copy { max-width: 335px; margin-top: 9px; }
  .sector-grid { gap: 16px; }
  .sector { display: flex; border-radius: 27px; padding: 9px; }
  .sector::before { border-radius: 21px; }
  .sector-top { padding: 12px 8px 0; }
  .sector-glass { border-radius: 21px; }
  .sector-content { padding: 18px 17px 14px; }
  .sector h2 { font-size: 2.45rem; }
  .sector-social h2 span { display: block; }
  .sector-social h2 span + span::before { content: none; }
  .sector-creative h2 { font-size: 2.25rem; }
  .sector-description { margin-top: 10px; line-height: 1.55; }
  .sector-action { margin-inline: 17px; gap: 8px; padding: 11px 0 12px; }
  .sector-arrow { width: 35px; height: 35px; }
  .sector-arrow svg { width: 16px; height: 16px; }
  .portal-under { margin-top: 22px; }
  .footer-links { justify-content: center; gap: 10px 20px; }
  .whatsapp-float { min-height: 49px; padding: 11px 16px; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 22px); }
  .sector-content { padding-inline: 15px; }
  .sector h2 { font-size: 2.25rem; }
  .sector-creative h2 { font-size: 2.1rem; }
  .sector-action { margin-inline: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .portal-atmosphere::before { transform: none; }
  .portal-atmosphere::after { display: none; }
  .sector:hover, .whatsapp-float:hover, .sector:hover .sector-arrow { transform: none; }
  .sector:hover::after { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .sector-glass, .sector-tag, .direct-help, .eyebrow { background: #f9fbfc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .whatsapp-float { background: #11764b; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .portal-atmosphere { display: none; }
  .sector, .sector-glass, .sector-arrow, .whatsapp-float, .direct-help { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .sector-image, .sector::before, .sector::after { display: none; }
  .sector h2, .sector-description, .portal-intro h1 span { color: CanvasText; }
}