/* Shared compact layouts. Loaded after page styles to resolve legacy fixed panels. */
html{background-color:#070509;min-height:100%}
body{min-height:100svh}
/* Persistent current-page indicator, including hover and keyboard focus. */
body .site-header .nav-links a[aria-current="page"]{
  background:#c597ff26!important;
  color:#f3d8ef!important;
  box-shadow:inset 0 0 0 1px #c597ff55;
  font-weight:750;
}
body .site-header .brand[aria-current="page"]{
  border-radius:10px;
  background:#c597ff18;
  box-shadow:0 0 0 5px #c597ff18;
}
:root{
  --logo-purple:#5c61a8;
  --logo-pink:#96569d;
  --title-gradient:linear-gradient(90deg,var(--logo-purple),var(--logo-pink));
}
/* Shared logo gradient for coloured title accents. */
.about-hero h1 span,
.contact-intro h1 span,
.home-page .services-heading h2 span,
.home-page .final-bloom-sign strong,
.home-page #shape .story-copy h2 span,
.home-page #hero .hero-letter,
.home-page #hero .hero-dot,
body .footer-hero h2 span,
.home-page .footer-hero h2 span,
.lab-page .lab-hero h1 span,
.lab-page .configurator-feature h2 span,
body .viewer-copy h1 span,
body .sales-cta h2 span{
  background:var(--title-gradient)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
}
/* Keep glyphs and accents inside their paint boxes at every viewport size.
   Important overrides the legacy heading rules, including the hero's inline flex. */
body :is(h1,h2,h3){
  min-width:0;
  line-height:1.15!important;
  overflow:visible;
  overflow-wrap:anywhere;
}
body :is(h1,h2,h3):not(.motion-title):not(.hero-wordmark){
  padding-block:.08em;
}
body :is(.story-copy,.footer-hero,.services-heading,.lab-hero,.lab-project-content,.contact-intro,.viewer-copy){min-width:0}
.home-page #hero .hero-wordmark{line-height:1.15!important}
.home-page .hero-wordmark .hero-letter,
.home-page .hero-wordmark .hero-dot{
  line-height:1.15;
  padding:.06em .035em;
  margin:-.06em -.035em;
}
/* Preview headings also live inside narrow, clipped decorative screens. */
.home-page .services-heading h2{max-width:100%;overflow:visible}
.home-page .services-heading h2 span{
  display:inline-block;
  max-width:100%;
  line-height:1.2;
  padding:.1em .06em;
  vertical-align:bottom;
}
body .preview-title{min-width:0;line-height:1.12;overflow-wrap:anywhere;padding-block:.08em}
/* Gradient text needs its own padded paint box, not just heading padding. */
.lab-page .lab-hero>div{min-width:0}
.lab-page .lab-hero h1 span{
  display:inline-block;
  max-width:100%;
  line-height:1.15;
  padding:.1em .06em;
  vertical-align:bottom;
}
body .site-footer .footer-hero h2{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}
body .site-footer .footer-hero h2 span{
  display:inline-block;
  max-width:100%;
  line-height:1.15;
  padding:.1em .06em;
  vertical-align:bottom;
}

/* Bring the first card into view as the desktop hero fade finishes. */
@media(min-width:1025px){
  .home-page #hero{min-height:145svh!important;padding-bottom:0!important}
}
@media(max-width:1100px){
  html{scroll-padding-top:140px}
  body .site-header{top:8px;width:calc(100% - 20px);height:auto;min-height:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:20px}
  body .site-header .brand{min-width:0;gap:7px}
  body .site-header .brand-copy strong{font-size:10px;letter-spacing:.1em}
  body .site-header .brand-copy small{display:none}
  body .site-header .header-cta{font-size:8px;letter-spacing:.03em;padding:11px 12px;min-height:40px;gap:8px}
  body .site-header .nav-links{display:flex;order:3;width:100%;justify-content:space-between;gap:0;padding:2px;border-radius:12px}
  body .site-header .nav-links a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px;font-size:11px;letter-spacing:0;white-space:nowrap}
  body .site-header .nav-links a[aria-current="page"]{background:#c597ff1f;color:#f3d8ef!important}
  .lab-page .lab-main,.about-main,.contact-main{padding-top:155px}
  .lab-page .lab-hero{grid-template-columns:1fr;gap:28px;min-height:0;padding:30px 24px}
  .lab-page .lab-hero h1{font-size:clamp(48px,10vw,90px);overflow-wrap:normal}
  .lab-page .lab-hero-copy{justify-self:start;max-width:100%}
  .lab-strip{flex-wrap:wrap}
  .lab-grid{margin-top:28px}
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .site-footer .footer-brand-block{grid-column:1 / -1}
  .site-footer .footer-col{min-width:0;overflow-wrap:anywhere}
  main.configurator{padding-top:145px;grid-template-columns:minmax(0,1fr)}
  .configurator .viewer-sticky{position:relative;top:auto}
}
@media(max-width:1024px){
  /* Override the desktop 88svh minimum on tall tablets. */
  .home-page #contact.site-footer{min-height:0;height:auto}
  /* Mobile bloom sits in the free space to the right of the footer CTA.
     main.js reads these values on resize; offsets are in CSS pixels. */
  .home-page .flower-anchor{
    --flower-scale:.33;
    --flower-offset-y:0;
    --flower-beside-cta:1;
    position:absolute;
    inset:auto;
    width:2px;
    height:2px;
    margin:0;
  }
  /* Clip horizontal overflow without creating a scroll container for sticky. */
  body.home-page{overflow-x:clip}
  /* The next section enters around the end of the hero fade (~60vh of scroll). */
  .home-page #hero{display:block;min-height:155svh!important;height:auto;padding:0 16px!important;overflow:visible}
  .home-page .hero-copy-centered{position:sticky;inset:auto;top:0;transform:none;width:100%;min-height:100svh;height:100svh;margin:0 auto;padding:16px 0!important;gap:clamp(12px,3svh,24px);justify-content:center;align-items:center}
  .home-page .hero-wordmark{width:100%!important;font-size:clamp(48px,min(19vw,13svh),140px)!important;line-height:.95!important;gap:.12em!important}
  .home-page #hero .lead{width:100%;max-width:520px;font-size:clamp(16px,3.6vw,21px);line-height:1.6;margin:24px auto 0}
  .home-page #hero .lead br{display:none}
  .home-page .scroll-cue{position:relative;inset:auto;margin:clamp(8px,2svh,20px) auto 0}
  .home-page #shape,.home-page #respond,.home-page #art{height:auto;min-height:0;padding:28px 16px!important;display:block}
  .home-page #shape .story-card,.home-page #respond .story-card,.home-page #art .story-card{position:relative;top:auto;width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:28px 22px;border-radius:24px!important;display:flex;flex-direction:column;gap:24px;overflow:hidden;transform:none!important}
  .home-page #shape .story-copy,.home-page #respond .story-copy,.home-page #art .story-copy{position:relative;inset:auto!important;order:0;width:100%;padding:0!important;gap:20px;justify-content:flex-start;opacity:1}
  .home-page #shape .story-copy h2,.home-page #art .story-copy h2{font-size:clamp(28px,6.5vw,44px);line-height:1.12;max-width:100%;margin:0;letter-spacing:-.045em}
  .home-page #shape .kinetic-form{position:relative;inset:auto!important;order:1;width:100%;height:auto;min-height:0;display:grid;place-items:center;margin:0;opacity:1}
  .home-page #shape .bloom-gem{width:clamp(160px,45vw,240px);margin:0 auto 12px}
  .home-page .story-card{backdrop-filter:none;background-color:#160e20}
  .home-page .story-card::before,.home-page .story-card::after{opacity:.4}
  .home-page #respond .motion-title{font-size:9.3cqw;line-height:1.1;padding:1.15em 0;max-width:100%}
  .home-page #respond .story-foot>p{max-width:100%;font-size:15px;line-height:1.65}
  .home-page #respond .soap-bubble{position:relative;inset:auto;transform:none;order:1;width:min(70%,260px);margin:-15px auto 0;flex-shrink:0}
  .home-page .services-section{height:auto;min-height:0;padding:40px 16px}
  .home-page .services-heading{gap:16px;margin-bottom:24px}
  .home-page .services-heading h2{font-size:clamp(32px,7vw,48px)}
  .home-page .services-heading>p{max-width:100%;font-size:15px}
  .home-page .service-panel,.home-page .service-panel:nth-child(even){margin-top:0;min-height:260px;padding:26px;border-radius:24px}
  .home-page #art .kinetic-projects{position:relative;inset:auto!important;order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;height:auto;perspective:none;transform:none;opacity:1}
  .home-page #art .project-screen{position:relative;inset:auto;width:100%;height:clamp(215px,42vw,320px);transform:none!important;translate:none;rotate:none;will-change:auto;padding:12px;opacity:1!important;border-radius:16px}
  .home-page #art .story-card{padding:26px 0}
  .home-page #art .preview-title{font-size:clamp(25px,5vw,38px)}
  .home-page #art .burger-title,.home-page #art .project-creative .preview-title{font-size:clamp(31px,6vw,46px)}
  .home-page #art .preview-top{font-size:7px;white-space:normal}
  .home-page #art .preview-top>span{display:none}
  .home-page #art .preview-bottom{font-size:8px;line-height:1.4}
  .home-page #art .preview-swatches>span{display:none}
  body .site-footer{width:calc(100% - 32px);margin:28px 16px 16px;padding:32px 22px;border-radius:24px;min-height:0}
  body .site-footer .footer-hero h2{font-size:clamp(32px,8vw,60px);line-height:1}
  body .site-footer .footer-lead{font-size:15px;line-height:1.65}
  body .site-footer .footer-cta{font-size:14px;padding:15px 18px;max-width:100%}
  .home-page .final-bloom-sign{position:relative;inset:auto;transform:none;margin:0 0 30px;text-align:left}
  .home-page .final-bloom-sign strong{font-size:clamp(26px,7vw,48px)}
  body .site-footer .footer-grid{margin-top:35px}
  body .site-footer .footer-bottom{margin-top:30px;gap:16px;flex-wrap:wrap}
}
@media(max-width:700px){
  .lab-page .lab-main{width:calc(100% - 32px)}
  .lab-page .lab-project{padding:24px 20px;border-radius:24px;min-height:0}
  .lab-page .lab-project .lab-project-content{min-height:340px;gap:30px}
  .lab-page .lab-project h2{font-size:clamp(34px,8.5vw,58px);line-height:.98;max-width:100%;overflow-wrap:normal}
  .lab-project-bottom p{font-size:14px;line-height:1.65}
  .lab-page .configurator-feature .lab-project-content{min-height:0;gap:22px}
  .lab-page .configurator-feature .configurator-feature-copy{max-width:100%;margin:0 0 285px}
  .lab-page .configurator-feature .product-stage{top:205px;height:260px;right:4%;width:92%}
  .lab-page .configurator-feature .configurator-bottom{margin-top:0}
  .lab-page .configurator-feature .configurator-bottom p{max-width:100%}
  .lab-page .configurator-feature h2{font-size:clamp(32px,8.5vw,54px)}
  .configurator-switcher{gap:6px;flex-wrap:wrap}
  .about-main,.contact-main{width:calc(100% - 32px);padding-top:150px;padding-bottom:45px}
  .about-hero h1{font-size:clamp(32px,8vw,52px)}
  .about-story,.about-team-grid,.contact-main,.contact-fields{grid-template-columns:minmax(0,1fr)}
  .about-person,.contact-form{padding:24px 20px}
  .contact-field input,.contact-field textarea{font-size:16px}
  .contact-intro h1{font-size:clamp(40px,10vw,65px)}
  .about-footer,.contact-footer{width:calc(100% - 32px);flex-wrap:wrap}
  main.configurator{width:calc(100% - 24px);gap:20px}
  .configurator .viewer-copy{padding:15px 6px 25px}
  .configurator .viewer-copy h1{font-size:clamp(44px,12vw,70px)}
  .configurator .viewer{height:420px;min-height:0;border-radius:22px}
  .configurator .panel{min-width:0;padding:20px 16px;position:relative;top:auto;max-height:none}
  .configurator .panel-scroll{max-height:none;overflow:visible}
  .configurator .camera-controls{display:flex;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px)}
  .configurator .camera-btn{font-size:10px;padding:9px 10px}
  .configurator .viewer-meta{gap:8px}
}
@media(max-width:560px){
  .home-page .flower-anchor{
    --flower-scale:.28;
  }
}
@media(max-width:380px){
  body .site-header{padding:8px}
  body .site-header .nav-links a{font-size:10px;padding:6px 4px}
  .home-page #shape .story-card,.home-page #respond .story-card{padding:24px 18px}
  .home-page #shape .story-copy h2{font-size:27px}
  .home-page #art .kinetic-projects{gap:10px}
  .home-page #art .project-screen{padding:10px}
  .site-footer .footer-grid{grid-template-columns:1fr}
}

/* Tablet and compact laptop layouts. Shared by all seven pages. */
body .site-header .nav-links{min-width:0}
body .site-header .nav-links a{flex-shrink:0}
.contact-form,.about-person,.footer-col{min-width:0}
.contact-email,.footer-col a{overflow-wrap:anywhere}
@media(min-width:1101px) and (max-width:1280px){
  body .site-header{width:calc(100% - 32px);gap:12px;padding-inline:14px;grid-template-columns:auto minmax(0,1fr) auto}
  body .site-header .brand-copy small{display:none}
  body .site-header .nav-links{justify-self:center;gap:0}
  body .site-header .nav-links a{padding:10px 9px;letter-spacing:0}
  body .site-header .header-cta{font-size:9px;letter-spacing:0;padding:12px}
  .lab-page .lab-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;padding:40px 30px}
  .lab-page .lab-hero h1{font-size:clamp(58px,7vw,96px)}
}
@media(max-width:1100px){
  body .site-header .nav-links{flex-wrap:wrap;justify-content:center}
  body .site-header .nav-links a{flex:1 0 auto;min-height:40px}
  main.configurator{padding-top:155px!important}
  main.configurator .panel{position:relative;top:auto;max-height:none;min-width:0}
  main.configurator .panel-scroll{max-height:none;overflow:visible}
  main.configurator .viewer{height:clamp(360px,60svh,620px);min-height:0!important}
  main.configurator .camera-controls{top:auto;bottom:48px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center}
  main.configurator .viewer-hint{width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.5}
  .contact-main{grid-template-columns:minmax(0,1fr);gap:32px}
  .about-invitation{flex-direction:column;align-items:flex-start}
}
@media(min-width:701px) and (max-width:1100px){
  .lab-page .configurator-feature .lab-project-content{min-height:0;gap:24px}
  .lab-page .configurator-feature .configurator-feature-copy{max-width:100%;margin:0 0 300px}
  .lab-page .configurator-feature .product-stage{top:190px;right:10%;width:80%;height:280px}
  .lab-page .configurator-feature .configurator-bottom p{max-width:100%}
  .lab-page .configurator-feature h2{font-size:clamp(38px,5vw,56px)}
  .configurator-switcher{flex-wrap:wrap}
}
@media(min-width:821px) and (max-width:1024px){
  .home-page #hero{min-height:130svh!important}
  .home-page .services-sticky{position:relative;padding:0}
  .home-page .services-heading{flex-direction:column;align-items:flex-start}
  .home-page .services-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .service-panel{transform:none!important}
  .home-page #hero .hero-wordmark{flex-direction:column;align-items:center}
}
@media(min-width:1025px) and (max-height:800px){
  .home-page .services-section{height:auto;padding-block:60px}
  .home-page .services-sticky{position:relative;padding:0}
  .home-page .services-deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .service-panel{margin-top:0!important;transform:none!important}
  .home-page .hero-copy-centered{top:8svh;min-height:84svh}
  .home-page .hero-wordmark{font-size:clamp(64px,8.5vw,120px)!important}
  .home-page .hero-copy-centered .lead{margin-top:12px;font-size:16px}
  .home-page .hero-copy-centered .scroll-cue{margin-top:16px}
  main.configurator .viewer-sticky{position:relative;top:auto}
  main.configurator .viewer{min-height:0!important;height:clamp(340px,62svh,540px)}
}
@media(max-width:700px){
  .about-story,.about-team-grid{min-width:0}
  main.configurator .explore-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:600px) and (max-width:1024px){
  .home-page #hero .hero-copy-centered{height:auto;min-height:100svh;padding-top:145px!important;padding-bottom:24px!important;gap:8px}
  .home-page #hero .hero-wordmark{flex-direction:row;font-size:clamp(30px,7vw,64px)!important;margin-block:0!important}
  .home-page #hero .lead{font-size:14px;margin-top:8px}
  .home-page #hero .scroll-cue{margin-top:8px}
}

/* ==========================================================================\n   BLOOM MODE - MOBILE PERFORMANCE V1\n   Mantiene la composicion, pero elimina superficies especialmente caras de\n   recomponer durante el scroll en telefonos. La clase la activa main.js.\n   ========================================================================== */
html.mobile-perf .home-page .backdrop-glow{
  animation:none!important;
  will-change:auto!important;
}
html.mobile-perf .home-page .site-header{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(5,4,7,.94)!important;
}
html.mobile-perf .home-page .story-card,
html.mobile-perf .home-page .service-panel{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.mobile-perf .home-page .hero-wordmark{
  filter:none!important;
}
html.mobile-perf .home-page #petal-bg{
  image-rendering:auto;
}