/* Shared viewport gutters and a consistent, legible closing section. */
:root{--page-gutter:32px;--page-content:1760px}
@media(max-width:1000px){:root{--page-gutter:22px}}
@media(max-width:600px){:root{--page-gutter:16px}}
body .wrap,#materiales .materials-wrap,#crea-tu-etiqueta .approved-start{width:min(var(--page-content),calc(100% - var(--page-gutter)*2));margin-inline:auto}
#crea-tu-etiqueta{padding-block:36px}
#crea-tu-etiqueta .approved-start{padding:clamp(20px,2.5vw,36px)}
#crea-tu-etiqueta .start-top{min-height:420px}
#crea-tu-etiqueta .start-copy h2{font-size:clamp(42px,4.2vw,62px)}
#crea-tu-etiqueta .start-copy>p:not(.eyebrow){max-width:360px;font-size:17px;line-height:1.5}
#crea-tu-etiqueta .start-photo-frame{width:100%;height:100%;left:0;aspect-ratio:auto}
#crea-tu-etiqueta .inspire-strip{grid-template-columns:1fr;gap:20px;padding-top:24px}
#crea-tu-etiqueta .inspire-strip>div:first-child{display:flex;align-items:center;gap:24px;padding:0}
#crea-tu-etiqueta .inspire-strip p{max-width:420px;font-size:14px;margin:0}
#crea-tu-etiqueta .inspire-thumbs{gap:12px}
#crea-tu-etiqueta .inspire-thumbs>a{height:auto;aspect-ratio:1}
#crea-tu-etiqueta .inspire-thumbs img{position:static;width:100%;height:100%;object-fit:contain!important;filter:none;transform:none}
#crea-tu-etiqueta .ready-bar{margin-top:24px}
@media(max-width:1000px){
 #crea-tu-etiqueta .start-top{min-height:350px}
 #crea-tu-etiqueta .start-copy h2{font-size:42px}
 #crea-tu-etiqueta .start-copy>p:not(.eyebrow){font-size:15px;max-width:280px}
 #crea-tu-etiqueta .inspire-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
 #crea-tu-etiqueta{padding-block:24px}
 #crea-tu-etiqueta .approved-start{padding:20px 16px}
 #crea-tu-etiqueta .start-top{min-height:0}
 #crea-tu-etiqueta .start-copy h2{font-size:clamp(34px,10vw,42px);text-wrap:wrap}
 #crea-tu-etiqueta .start-copy>p:not(.eyebrow){font-size:14px}
 #crea-tu-etiqueta .start-photo-frame{width:100%;height:100%;left:0}
 #crea-tu-etiqueta .inspire-strip{margin-inline:0;gap:16px}
 #crea-tu-etiqueta .inspire-strip>div:first-child{display:block}
 #crea-tu-etiqueta .inspire-strip p{margin-top:8px;font-size:13px}
 #crea-tu-etiqueta .inspire-thumbs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
body .approved-footer.wrap{width:100%;max-width:none;margin:0;background:#0044ea;color:#fff;padding:52px max(var(--page-gutter),calc((100% - var(--page-content))/2)) 28px}
.approved-footer .footer-main{grid-template-columns:minmax(200px,1.4fr) repeat(3,minmax(0,1fr)) minmax(190px,1.15fr);gap:clamp(18px,2.4vw,38px)}
.approved-footer :is(p,h2,strong,nav a,.footer-story,.footer-bottom,.site-status){color:#fff}
.approved-footer .plika-wordmark{background-color:#fff}
.approved-footer .footer-talk .button{background:#fff;color:#0044ea;border:1px solid #fff;box-shadow:none}
.approved-footer .footer-talk .button svg{color:inherit}
.approved-footer .footer-bottom{border-color:#ffffff55}
.approved-footer nav a{min-height:32px;line-height:1.5}
.approved-footer a:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:3px}
.approved-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.approved-footer .footer-talk .button:hover{background:#edf3ff}
.approved-footer .footer-talk .button:focus-visible{outline-offset:5px}
@media(max-width:1100px){
 .approved-footer .footer-main{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
 .approved-footer .footer-brand{grid-column:1/-1;grid-row:auto;max-width:460px}
 .approved-footer .footer-talk{grid-column:1/-1;max-width:460px}
}
@media(max-width:600px){
 body .approved-footer.wrap{padding-top:36px}
 .approved-footer .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
 .approved-footer .footer-brand,.approved-footer .footer-talk{grid-column:1/-1}
 .approved-footer .footer-main nav a{min-height:36px;font-size:13px}
 .approved-footer .footer-bottom{align-items:flex-start;line-height:1.5}
 .approved-footer .site-status{line-height:1.6}
}
/* Broad desktop layouts use the screen, with equal outer gutters. */
body[data-page=home] .header-inner{width:min(var(--page-content),calc(100% - var(--page-gutter)*2))}
body .approved-advisor{max-width:none;grid-template-columns:minmax(260px,24%) minmax(0,1fr);gap:clamp(24px,3vw,52px)}
.approved-advisor .advisor-intro{padding-right:0;min-width:0}
.approved-advisor .advisor-panel{min-width:0}
.approved-advisor .guide-question legend{align-items:center}
.approved-advisor .guide-question legend small{margin-left:auto;text-align:right}
@media(min-width:1041px){
 body .header .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;padding-inline:0}
 body .header #main-nav{justify-self:center;justify-content:center;margin:0;gap:6px}
 body .header .header-action-group{justify-self:end;margin-left:0;gap:14px}
 body .header .brand{justify-self:start}
 body .header .menu-toggle{display:none}
}
@media(min-width:1041px) and (max-width:1200px){
 body .header #main-nav{gap:0}
 body .header #main-nav a{padding-inline:9px;font-size:13px}
 body .header .header-action-group{gap:10px}
 body .header .header-action-group>.button{font-size:13px;padding-inline:14px}
}
@media(max-width:1040px){body .approved-advisor{grid-template-columns:minmax(0,1fr);gap:24px}}
@media(max-width:600px){
 .approved-advisor .guide-question legend{flex-wrap:wrap;gap:8px}
 .approved-advisor .guide-question legend small{flex-basis:100%;text-align:left;margin-left:35px}
}
/* Center the existing capped heading blocks, not just the text inside them. */
#ideas .approved-heading,#materiales .approved-heading{width:100%;margin-inline:auto}
/* Mission is a blue card: retain white text above shared brand heading rules. */
#mision .cx-section-label,#mision #mission-title{color:#fff}
/* Share the page width across the two remaining desktop compositions. */
body[data-page=home] #ideas.approved-worlds{width:min(var(--page-content),calc(100% - var(--page-gutter)*2));margin-inline:auto}
@media(min-width:901px){
 #como-pedir .process-canvas{width:min(var(--page-content),calc(100% - var(--page-gutter)*2))}
}
/* Blue brand header, including the expanded mobile navigation. */
body #site-header{background:#0044ea;color:#fff}
body #site-header .header-inner{padding-inline:0}
body #site-header .brand{width:132px}
body #site-header .plika-wordmark{aspect-ratio:5/2;background-color:#fff}
body #site-header .nav a,body #site-header .header-search,body #site-header .cart-link{color:#fff}
body #site-header .button{background:#fff;color:#0044ea}
body #site-header .button:hover{background:#edf2ff;color:#0038c4}
body #site-header [data-cart-count]{background:#fff;color:#0044ea}
body #site-header .nav a:hover,body #site-header .nav a[aria-current=page]{background:#ffffff24;color:#fff}
body #site-header :focus-visible{outline-color:#fff}
body #site-header .menu-toggle{background:transparent;color:#fff;border:1px solid #ffffff80}
@media(max-width:1040px){
 body #site-header .brand{width:116px}
 body #site-header #main-nav{background:#0044ea;border-color:#ffffff40}
 body #site-header #main-nav .nav-intro{color:#fff}
 body #site-header #main-nav a{background:#ffffff12;color:#fff}
 body #site-header #main-nav a:hover,body #site-header #main-nav a[aria-current=page]{background:#ffffff26}
 body #site-header #main-nav a .nav-icon{background:#ffffff20;color:#fff}
}
@media(max-width:600px){
 body #site-header .brand{width:100px}
 body #site-header .header-inner{gap:8px}
}
@media(max-width:380px){body #site-header .brand{width:92px}}
body #site-header #main-nav .nav-arrow{color:#fff}

/* Give the brand story the same clear action treatment as the creator. */
body .approved-footer .footer-story.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:100%;min-height:44px;padding:12px 18px;background:#fff;color:#0044ea;border:1px solid #fff;border-radius:999px;font-size:14px;font-weight:700;line-height:1.3;text-align:center;text-decoration:none}
body .approved-footer .footer-story.button svg{width:20px;height:20px;color:#0044ea;stroke-width:2}
body .approved-footer .footer-story.button:hover{background:#edf3ff;color:#0038c4;text-decoration:none}
/* Align the desktop header with the approved hero's text inset. */
@media(min-width:1041px){
 body[data-page=home] #site-header .header-inner{width:calc(100% - max(calc((100vw - 1680px)/2),4.12vw)*2);margin-left:max(calc((100vw - 1680px)/2),4.12vw);margin-right:auto}
}
/* Final header spacing and stronger footer section labels. */
body #site-header .brand{width:124px}
@media(min-width:1201px){body #site-header #main-nav{gap:clamp(14px,2vw,38px)}}
@media(min-width:1041px) and (max-width:1200px){body #site-header #main-nav{gap:10px}}
@media(min-width:901px) and (max-width:1040px){
 body[data-page=home] #site-header .header-inner{width:calc(100% - max(calc((100vw - 1680px)/2),4.12vw)*2);margin-left:max(calc((100vw - 1680px)/2),4.12vw);margin-right:auto}
}
@media(max-width:1040px){body #site-header .brand{width:110px}}
@media(max-width:900px){body[data-page=home] #site-header .header-inner{width:calc(100% - 48px);margin-inline:auto}}
@media(max-width:600px){
 body #site-header .brand{width:94px}
 body[data-page=home] #site-header .header-inner{width:calc(100% - 36px)}
}
@media(max-width:380px){body #site-header .brand{width:88px}}
body .approved-footer .footer-main h2{font-weight:700;color:#fff}
/* Step icons keep a fixed axis regardless of each label's length. */
@media(min-width:801px){
 #creator-shell:not([data-editor-active=true]) .creator-rail.stepper button{display:grid;grid-template-columns:39px minmax(0,1fr) auto;justify-content:start!important;text-align:left!important}
 #creator-shell:not([data-editor-active=true]) .creator-rail.stepper .step-name{text-align:left}
}
@media(max-width:800px){
 #creator-shell .creator-rail.stepper{align-items:stretch}
 #creator-shell .creator-rail.stepper button{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:31px minmax(28px,auto);justify-items:center;align-items:start!important;align-content:start;justify-content:center!important}
 #creator-shell .creator-rail.stepper .step-name{align-self:start;text-align:center}
}
@media(max-width:600px){#creator-shell .creator-rail.stepper button{grid-template-rows:27px minmax(25px,auto)}}

/* Default product copy scales with the label, never splitting PRODUCTO. */
body .label-art .art-name.art-name-default{font-size:min(12cqw,48px);word-break:normal;overflow-wrap:normal;hyphens:none}
/* Substrates remain visible beneath the untouched sample artwork. */
body .label-art.material-transparente{background:transparent}
body .label-art.material-holografico{background:linear-gradient(125deg,#d0f1f0,#b7bdfa 15%,#f5c9ea 30%,#f1eab6 44%,#abdfd5 58%,#b7c2f0 72%,#efc9ed 86%,#eae9c7)}
body .art-material-sample:is(.material-transparente,.material-holografico) .print-layer{background:transparent;color:#172b45;mix-blend-mode:normal}
body .art-material-sample:is(.material-transparente,.material-holografico) .template-mark{background:#253a5555}
body .label-art.material-bopp-mate .material-reflection{background:linear-gradient(120deg,#ffffff12,transparent 45%,#ffffff08);box-shadow:inset 0 0 0 1px #ffffff18}
body .label-art.material-mate .material-reflection{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888888' filter='url(%23grain)' opacity='.24' d='M0 0h120v120H0z'/%3E%3C/svg%3E");background-size:100px 100px;opacity:.45;mix-blend-mode:soft-light}
/* Round the label itself, clipping the artwork and finish together. */
body .label-art{border-radius:4%;overflow:hidden}

body .brand-hero figure{background:transparent;padding:0;transform:none}
body .brand-hero figure>img{border-radius:0;object-fit:contain}
body .brand-hero #brand-title em{font-weight:700}