/* ============================================================================
   LEO MISSAEL — SOBRE MÍ
   Consolidated page stylesheet.
   This file intentionally contains the page-specific architecture only.
   Global typography, color tokens, title system, header/footer and Home rules
   remain in design-system.css + home.css.
   ============================================================================ */

/* --------------------------------------------------------------------------
   01 — PAGE / HERO SUPPORT
   -------------------------------------------------------------------------- */
.sobre-page{
  width:100%;
  overflow:clip;
}

.sobre-hero{
  width:var(--home-rail);
  margin:0 auto;
  padding:clamp(112px,8.5vw,128px) 0 clamp(52px,5vw,72px);
}
.sobre-hero__copy{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.sobre-kicker{
  margin:0 0 24px;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
}
.sobre-hero h1{
  margin:0;
  font-size:clamp(44px,7.2vw,108px);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:800;
}
.sobre-hero__subtitle{
  max-width:760px;
  margin:22px auto 0;
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.18;
  letter-spacing:-.025em;
}

/* --------------------------------------------------------------------------
   02 — ME PRESENTO
   Same visual language as Home's blue "HOLA!" panel:
   shared rail, shared H2 scale, 20px body copy and generous vertical air.
   -------------------------------------------------------------------------- */
.sobre-intro{
  --sobre-section-gap:clamp(24px,2.7vw,34px);
  --sobre-photo-pad-x:clamp(56px,6.6vw,80px);
  --sobre-photo-pad-y:calc(var(--sobre-photo-pad-x) / 2);
  width:var(--home-rail);
  height:auto;
  min-height:auto;
  margin:0 auto var(--ref-gap,72px);
  padding:30px var(--sobre-photo-pad-x);
  background:var(--lm-blue);
  color:var(--lm-white);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(48px,6.2vw,86px);
  align-items:center;
}
.sobre-intro__copy{
  max-width:560px;
  justify-self:start;
  align-self:center;
}
.sobre-intro__label{
  position:relative;
  width:max-content;
  margin:0 0 28px;
  padding-bottom:8px;
  color:var(--lm-white);
  font-size:clamp(38px,4.1vw,62px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:900;
  text-transform:uppercase;
}
/* The rule follows the Home panel: it bleeds to the card's left edge,
   but sits clearly below the title rather than crossing the letters. */
.sobre-intro__label::after{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(56px,6.6vw,80px));
  bottom:-2px;
  width:calc(100% + clamp(56px,6.6vw,80px));
  height:3px;
  background:var(--lm-white);
}
.sobre-intro__copy p{
  margin:0 0 16px;
  max-width:560px;
  font-size:var(--lm-body);
  line-height:1.28;
  letter-spacing:0;
  font-weight:400;
  color:var(--lm-white);
}
.sobre-intro__copy p + p{margin-top:0}
.sobre-intro__copy p:last-child{margin-bottom:0}
.sobre-intro__portrait{
  width:100%;
  height:auto;
  max-width:620px;
  justify-self:end;
  align-self:center;
  margin:0;
  aspect-ratio:1.16 / 1;
  overflow:hidden;
  background:var(--lm-white);
  position:relative;
}
.sobre-intro__portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .5s ease;
}
.sobre-intro__portrait img.is-active{opacity:1}

/* --------------------------------------------------------------------------
   03 — MI IDENTIDAD
   Home's canonical title + right-hand intro pattern. The animated mosaic is
   preserved; only its container/scale/centering are controlled here.
   -------------------------------------------------------------------------- */
.about-facts{
  width:var(--home-rail);
  margin:0 auto;
  padding:0 0 clamp(23px,2.5vw,31px);
}
.about-facts__head.home-section-head{
  width:100%;
  margin:0 auto clamp(17px,1.7vw,22px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,440px);
  column-gap:clamp(40px,5.5vw,80px);
  align-items:start;
}
.about-facts__head .home-section-title{
  text-transform:uppercase;
}
.about-facts__head .home-section-intro{
  width:100%;
  max-width:440px;
}
.about-facts-mosaic{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-facts-mosaic .hero__mosaic{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.about-facts-mosaic .mosaic-svg{
  width:min(100%,820px);
  max-width:820px;
  height:auto;
  display:block;
  margin:0 auto;
  overflow:visible;
}
.hero__mosaic{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
  padding:2.5vh 2.5vw;
}
.mosaic-svg{
  width:100%;
  max-width:820px;
  height:auto;
  overflow:visible;
}

/* Preserve the existing animated pieces exactly. */
.piece-scale{
  transform-box:view-box;
  transform-origin:446.9px 649.8px;
  animation-name:pulse;
  animation-duration:9s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
@keyframes pulse{
  0%{transform:scale(.92)}
  50%{transform:scale(1)}
  100%{transform:scale(1.1)}
}
.piece-fade{
  animation-name:fade;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes fade{
  0%{opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{opacity:0}
}
.piece-hover{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:block;
  outline:none;
  cursor:pointer;
}
.piece:hover .piece-scale,
.piece:focus-within .piece-scale,
.piece:hover .piece-fade,
.piece:focus-within .piece-fade{
  animation-play-state:paused;
}
.piece:hover .piece-hover,
.piece:focus-within .piece-hover{
  transform:scale(1.07);
}
.piece-outline{fill:none;stroke:none}
.piece.is-active .piece-scale,
.piece.is-active .piece-fade{animation-play-state:paused}
.piece.is-active .piece-hover{transform:scale(1.07)}
.piece-badge__circle{fill:var(--lm-cream);stroke:var(--lm-blue);stroke-width:3px}
.piece-badge__text{fill:var(--lm-blue);font-size:22px;font-weight:800;font-family:Arial,sans-serif}
.piece-badge{display:none!important}
.monogram-shield{fill:var(--lm-cream)}
.monogram{fill:var(--lm-blue)}

.callout-layer{position:fixed;inset:0;pointer-events:none;z-index:50}
.callout{
  position:absolute;
  pointer-events:auto;
  max-width:300px;
  background:var(--lm-blue);
  color:var(--lm-cream);
  border-radius:0;
  padding:16px 18px;
  box-shadow:0 12px 30px rgba(30,32,80,.35);
  transform:translateY(6px) scale(.96);
  opacity:0;
  transition:transform .22s ease,opacity .22s ease;
}
.callout.is-visible{transform:translateY(0) scale(1);opacity:1}
.callout h3{margin:0 0 6px;font-size:15px;font-weight:800}
.callout p{margin:0;font-size:15px;line-height:1.45;font-weight:500;opacity:.92}
.callout__close{
  position:absolute;top:8px;right:10px;background:none;border:none;
  color:var(--lm-cream);font-size:16px;line-height:1;cursor:pointer;opacity:.75;outline:none;
}
.callout__close:hover{opacity:1}

/* --------------------------------------------------------------------------
   04 — QUÉ ME RESPALDA
   The heading is OUTSIDE the blue carousel, using Home's canonical title
   pattern. The carousel itself remains a separate, unchanged component.
   -------------------------------------------------------------------------- */
.sobre-support{
  --sobre-photo-pad-x:clamp(56px,6.6vw,80px);
  --sobre-photo-pad-y:calc(var(--sobre-photo-pad-x) / 2);
  width:var(--home-rail);
  margin:0 auto;
  padding:0 0 clamp(42px,5vw,70px);
}
.sobre-support__head.home-section-head{
  width:100%;
  margin:0 auto clamp(34px,3.2vw,48px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,440px);
  column-gap:clamp(40px,5.5vw,80px);
  align-items:start;
}
.sobre-support__head .home-section-title{
  text-transform:uppercase;
}
.sobre-support__head .home-section-intro{
  width:100%;
  max-width:440px;
  justify-self:end;
  text-align:right;
}
.sobre-support__head .home-section-title::after{
  left:calc(-1 * ((100vw - var(--home-section-rail))/2));
  width:calc(100% + ((100vw - var(--home-section-rail))/2));
}
.sobre-carousel{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--lm-blue);
  color:var(--lm-white);
}
.sobre-carousel__track{
  display:flex;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.sobre-slide{
  flex:0 0 100%;
  min-width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  gap:clamp(28px,5vw,72px);
  align-items:stretch;
  padding:var(--sobre-photo-pad-y) var(--sobre-photo-pad-x);
}
.sobre-slide__media{
  margin:0;
  width:100%;
  aspect-ratio:1.45 / 1;
  overflow:hidden;
  background:var(--lm-white);
}
.sobre-slide__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.sobre-slide__copy{
  align-self:center;
  max-width:500px;
}
.sobre-slide__copy h3{
  margin:0 0 12px;
  font-size:clamp(30px,3.2vw,48px);
  line-height:.98;
  letter-spacing:-.04em;
  font-weight:800;
}
.sobre-slide__copy p{
  margin:0;
  font-size:var(--lm-body);
  line-height:1.28;
  letter-spacing:0;
  font-weight:400;
}

/* Controls belong to the layout, never on top of the reading area. */
.sobre-carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--sobre-photo-pad-x) 24px;}
.sobre-carousel__dots{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.sobre-carousel__dot{appearance:none;display:grid;place-items:center;width:24px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.sobre-carousel__dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--lm-white);opacity:.45;transition:background .25s,opacity .25s}
.sobre-carousel__dot.is-active::after{background:var(--lm-orange);opacity:1}
.sobre-carousel__arrows{display:flex;align-items:center;gap:8px;flex:none}
.sobre-carousel__arrow,.sobre-carousel__pause{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--lm-white);background:transparent;color:var(--lm-white);cursor:pointer;font-size:17px;transition:background-color .25s,color .25s,border-color .25s}
.sobre-carousel__arrow:hover,.sobre-carousel__arrow:focus-visible,.sobre-carousel__pause:hover,.sobre-carousel__pause:focus-visible{background:var(--lm-orange);color:var(--lm-blue);border-color:var(--lm-orange)}
.sobre-carousel__arrow svg{width:19px;height:19px;display:block}
@media(max-width:820px){
  .sobre-intro{
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
    gap:28px;
    padding:24px 24px 28px;
    margin-bottom:52px;
  }
  .sobre-intro__portrait{
    order:-1;
    height:auto;
    max-width:none;
    aspect-ratio:1.35 / 1;
  }
  .sobre-intro__copy{
    max-width:none;
  }
  .sobre-intro__label{
    font-size:42px;
  }
  .sobre-intro__label::after{
    left:0;
    width:100%;
  }
  .about-facts{
    width:var(--home-rail);
    padding-bottom:24px;
  }
  .about-facts__head.home-section-head,
  .sobre-support__head.home-section-head{
    width:100%;
    display:block;
    margin-bottom:20px;
  }
  .about-facts__head .home-section-intro{
    width:auto;
    max-width:420px;
    margin-top:16px;
    text-align:left;
  }
  .about-facts-mosaic .mosaic-svg{
    width:min(100%,620px);
    max-width:620px;
  }
  .sobre-support{
    width:var(--home-rail);
    padding-bottom:42px;
  }
  .sobre-support__head .home-section-title{
    font-size:42px;
  }
  .sobre-support__head .home-section-title::after{
    left:0;
    width:100%;
  } 
  .sobre-slide{
    grid-template-columns:1fr;
    gap:24px;
    padding:24px 20px;
  }
  .sobre-slide__media{
    aspect-ratio:1.35 / 1;
  }
  .sobre-slide__copy{
    max-width:none;
    text-align:left;
  }
  .sobre-slide__copy p{
    font-size:16px;
    line-height:1.5;
  }
}

@media(max-width:560px){
  .sobre-intro__copy p{
    font-size:16px;
    line-height:1.5;
  }
  .about-facts__head .home-section-title,
  .sobre-support__head .home-section-title{
    font-size:42px;
  }
  .about-facts-mosaic .mosaic-svg{
    width:min(100%,520px);
    max-width:520px;
  }
}

@media(max-width:420px){
  .sobre-intro{
    padding-left:20px;
    padding-right:20px;
  }
  .sobre-intro__label{
    font-size:38px;
  }
  .sobre-slide{
    min-inline-size:0;
  }
  .sobre-slide__media,
  .sobre-slide__media img{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .sobre-intro__portrait img,
  .sobre-carousel__track{
    transition:none;
  }
  .piece-scale,
  .piece-fade{
    animation:none!important;
  }
}




/* Shared reading rhythm on compact screens. */
@media(max-width:820px){
 .sobre-carousel__controls{padding:0 20px 24px;flex-wrap:wrap}
 .sobre-carousel__arrows{margin-left:auto}
 .sobre-support__head .home-section-intro{margin-top:16px;text-align:left;justify-self:start}
 .sobre-intro__label{font-size:clamp(34px,10.7vw,42px)}
}
.piece:focus-within .piece-outline{stroke:var(--lm-orange);stroke-width:4px}
.callout{width:min(280px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px 44px 24px 24px;box-shadow:none;border:1px solid var(--lm-orange)}
.callout__close{top:0;right:0;width:40px;height:40px;font-size:24px;opacity:1}
.callout__close:focus-visible{outline:2px solid var(--lm-orange);outline-offset:-4px}

.sobre-carousel__pause[hidden]{display:none}

/* V6 — mirrored blue panels share their inset, column gap and photo frame. */
.sobre-page{
 --about-panel-x:clamp(56px,6.6vw,80px);
 --about-panel-y:30px;
 --about-panel-gap:clamp(48px,6.2vw,86px);
 --about-photo-ratio:1.16;
}
.sobre-page .sobre-intro,.sobre-page .sobre-slide{
 padding:var(--about-panel-y) var(--about-panel-x);
 gap:var(--about-panel-gap);
 grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.sobre-page .sobre-intro__portrait,.sobre-page .sobre-slide__media{
 width:100%;max-width:none;aspect-ratio:var(--about-photo-ratio);
}
.sobre-page .sobre-slide{align-items:start}
.sobre-page .sobre-slide__copy{align-self:center}
/* V8 — dots over artwork, two arrows at the opposite lower corner. */
.sobre-page .sobre-carousel__controls{
 position:absolute;z-index:2;top:var(--about-panel-y);left:var(--about-panel-x);
 width:calc(100% - 2 * var(--about-panel-x));padding:0;
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:var(--about-panel-gap);align-items:end;pointer-events:none;
}
.sobre-page .sobre-carousel__dots{
 position:static;transform:none;width:100%;aspect-ratio:var(--about-photo-ratio);
 display:flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;
 padding:0 0 12px;background:transparent;pointer-events:none;
}
.sobre-page .sobre-carousel__dot{pointer-events:auto}
.sobre-page .sobre-carousel__dot::after{box-shadow:0 0 0 1px var(--lm-blue);opacity:.85}
.sobre-page .sobre-carousel__dot.is-active::after{opacity:1}
.sobre-page .sobre-carousel__arrows{
 position:static;justify-self:end;align-self:end;margin:0;gap:8px;pointer-events:auto;
}
.sobre-page .sobre-carousel__arrow{background:transparent;border-color:var(--lm-white)}
.sobre-page .sobre-carousel__arrow:hover,.sobre-page .sobre-carousel__arrow:focus-visible{
 background:var(--lm-orange);color:var(--lm-blue);border-color:var(--lm-orange);
}
.sobre-page .sobre-slide__copy{padding-bottom:68px}
@media(max-width:820px){
 .sobre-page{--about-panel-x:24px;--about-panel-y:24px;--about-panel-gap:28px;--about-photo-ratio:1.35}
 .sobre-page .sobre-intro,.sobre-page .sobre-slide{grid-template-columns:1fr}
 .sobre-page .sobre-carousel__controls{
  bottom:var(--about-panel-y);display:block;
 }
 .sobre-page .sobre-carousel__dots{position:absolute;top:0;left:0}
 .sobre-page .sobre-carousel__arrows{position:absolute;right:0;bottom:0}
}
@media(max-width:420px){.sobre-page{--about-panel-x:20px}}
/* Seven existing personal thoughts, directly readable with no interaction. */
.about-notes{width:var(--home-rail);margin:0 auto var(--ref-gap);color:var(--lm-blue)}
.about-notes>.home-section-title{margin-bottom:clamp(28px,4vw,48px)}
.about-notes__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--lm-blue)}
.about-notes__list li{
 display:grid;grid-template-columns:clamp(40px,6vw,84px) minmax(0,1fr);
 column-gap:clamp(16px,3vw,40px);align-items:baseline;
 padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--lm-blue);
}
.about-notes__number{font-size:15px;font-weight:700;letter-spacing:.05em}
.about-notes__list p{max-width:960px;margin:0;font-size:clamp(21px,2.6vw,36px);line-height:1.22;font-weight:500;letter-spacing:-.02em}

/* V10 — one numbered thought, stable height for all eleven original texts. */
.about-notes__list{display:grid;overflow:hidden;border-bottom:1px solid var(--lm-blue)}
.about-notes__list li{grid-area:1 / 1;visibility:hidden;pointer-events:none;border-bottom:0;align-self:center}
.about-notes__list li.is-active{visibility:visible;pointer-events:auto}
.about-notes__controls{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}
.about-notes__controls[hidden]{display:none}
.about-notes__count{margin-right:12px;font-size:15px;letter-spacing:.05em}
.about-notes__controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--lm-blue);border-radius:0;background:transparent;color:var(--lm-blue);font:inherit;font-size:24px;cursor:pointer}
.about-notes__controls button:hover,.about-notes__controls button:focus-visible{background:var(--lm-orange)}