/* ==========================================================================
   MARCO — cabecera y pie del diseno B. Mismo sistema de contenedor que la Home,
   porque el marcado del prototipo depende de `.pfc`/`.pf` y de sus tramos.
   Se carga en TODAS las paginas: el marco esta en todas.
   ========================================================================== */
.pigymarco{ container-type:inline-size; container-name:pf; width:100%; }
/* ===== RESPONSIVE SYSTEM — the only thing CSS owns. All visual styling is inline. ===== */
  .pfc{container-type:inline-size;container-name:pf}
  .pf{--pad:16px; --gut:12px; --sec:44px;
      --h1:30px; --h2:22px; --h3:17px; --body:14px; --small:12px;
      --hero-min:0px}
  .r-desk{display:none!important}
  .r-desk-f{display:none!important}
  .r-tab{display:none!important}
  .g-cat{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:0 0 6px}
  .g-cat::-webkit-scrollbar{display:none}
  .g-cat > *{flex:0 0 74%;scroll-snap-align:start}
  @container pf (min-width:600px){ .g-cat > *{flex:0 0 43%} }
  .up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .up-grid > *:nth-child(n+7){display:none}
  @container pf (min-width:1024px){
    .up-grid{grid-template-columns:repeat(4,1fr)}
    .up-grid > *:nth-child(n+7){display:block}
  }
  .g-prod{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .g-prod h3{min-height:2.7em;flex:1}
  .g-prod h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .g-prod > *{height:100%}
  .pf-wordmark{width:132px}
  /* BANNER DE CAMPAÑA · navy premium. Móvil: texto, CTA y dos agendas debajo. */
  .camp{position:relative;max-width:1400px;margin:0 auto;background:#1A2A6E;border-radius:28px;
    overflow:hidden;padding:24px 22px 0;display:flex;flex-direction:column;gap:14px}
  .camp-h{font-size:clamp(27px,6vw,34px)}
  .camp-txt{font-size:14px;max-width:44ch}
  .camp-stage{position:relative;height:152px;margin:0 -22px}
  .camp-glow{position:absolute;left:50%;top:-24%;transform:translateX(-50%);width:84%;aspect-ratio:1/1;z-index:0;
    background:radial-gradient(circle at 50% 45%,rgba(125,230,231,.34) 0%,rgba(125,230,231,.12) 46%,rgba(125,230,231,0) 70%)}
  .camp-art{position:absolute;inset:0;z-index:2}
  .camp-art img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
  .camp figure{margin:0;position:absolute;border-radius:14px 4px 4px 14px;overflow:hidden;background:#fff}
  .camp figure img{width:100%;height:100%;object-fit:cover;display:block}
  .camp-a{left:50%;bottom:0;width:104px;height:139px;transform:translateX(-64%);z-index:3;
    box-shadow:0 20px 38px -14px rgba(0,0,0,.5)}
  .camp-b{left:50%;bottom:12px;width:88px;height:117px;transform:translateX(14%) rotate(4deg);z-index:2;
    box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
  .camp-c{display:none}
  .camp img.camp-char{position:absolute;left:5%;bottom:-4px;width:72px;height:auto;object-fit:contain;z-index:4}
  .camp-heart{position:absolute;left:16%;top:12%;width:20px;height:20px;z-index:4;opacity:.95}
  .camp-spark{position:absolute;right:14%;top:20%;width:18px;height:18px;z-index:4;opacity:.95}

  @container pf (min-width:768px) and (max-width:1023px){
    .camp{flex-direction:row;align-items:center;gap:0;padding:0 0 0 26px}
    .camp-copy{flex:0 0 47%;padding:22px 0}
    .camp-h{font-size:26px}
    .camp-txt{font-size:13.5px;max-width:38ch}
    .camp-stage{flex:1;min-width:0;align-self:stretch;height:auto;margin:0}
    .camp-a{left:12%;bottom:0;width:34%;height:78%;transform:none}
    .camp-b{left:44%;bottom:12%;width:29%;height:60%;transform:rotate(3deg)}
    .camp img.camp-char{left:0;bottom:0;width:17%}
  }
  @container pf (min-width:768px){
    .camp{padding:30px 30px 0}
    .camp-stage{height:240px;margin:0 -30px}
    .camp-a{width:152px;height:203px}
    .camp-b{width:126px;height:168px}
    .camp img.camp-char{width:104px}
  }
  /* Escritorio: escena horizontal, tres agendas con escala distinta. */
  @container pf (min-width:1024px){
    .camp{flex-direction:row;align-items:center;gap:0;padding:0 0 0 clamp(34px,3.4vw,52px);
      border-radius:32px;min-height:308px}
    .camp-copy{flex:0 0 44%;padding:24px 0}
    .camp-h{font-size:clamp(34px,2.7vw,40px)}
    .camp-txt{font-size:15px;max-width:40ch}
    .camp-stage{flex:1;min-width:0;align-self:stretch;height:auto;margin:0}
    .camp-glow{left:52%;top:-14%;width:78%}
    .camp-a{left:14%;bottom:0;width:31%;height:82%;transform:none;z-index:3;
      transition:transform .2s;box-shadow:0 30px 60px -18px rgba(0,0,0,.55)}
    .camp-a:hover{transform:translateY(-3px)}
    .camp-b{left:41%;bottom:14%;width:26%;height:62%;transform:rotate(3deg);z-index:2}
    .camp-c{display:block;left:63%;bottom:26%;width:21%;height:48%;transform:rotate(-4deg);z-index:1;
      box-shadow:0 14px 28px -14px rgba(0,0,0,.4)}
    .camp img.camp-char{left:0;bottom:0;width:15%}
    .camp-heart{left:11%;top:16%;width:22px;height:22px}
    .camp-spark{right:20%;top:24%;width:20px;height:20px}
    .camp-cta:hover .camp-arrow{transform:translateX(3px)}
  }

  /* NAVY · una protagonista y tres secundarias, no una fila uniforme. */
  .navy-stage{position:relative;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .navy-stage > a{aspect-ratio:1/1}
  .navy-lead{grid-column:1/-1;aspect-ratio:4/3!important}
  .gf-shape{width:56px;height:56px;border-radius:99px}
  #newsletter-email:focus-visible,#newsletter-consent:focus-visible,form button[type="submit"]:focus-visible{
    outline:3px solid #FF5C8A;outline-offset:2px}
  .sr-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .conf-band{display:flex;flex-direction:column;gap:18px}
  .conf-sig{display:flex;flex-direction:column;gap:12px}
  .conf-track{min-width:0}
  @container pf (min-width:600px){ .conf-sig{flex-direction:row;gap:26px} }
  @container pf (min-width:1024px){
    .conf-band{flex-direction:row;align-items:center;justify-content:space-between;gap:30px;padding:18px 24px}
    .conf-sig{flex:0 0 auto;gap:30px}
    .conf-track{flex:1;max-width:460px}
  }
  .trust-band{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;padding:14px 0;
    border-top:1px solid #EDE3D6;border-bottom:1px solid #EDE3D6}
  .trust-band::-webkit-scrollbar{display:none}
  @container pf (min-width:1024px){ .trust-band{justify-content:space-between;overflow-x:visible;gap:16px} }
  /* HISTORIA · escena de marca con photobook y fotos que rompen el eje. */
  .emo-stage{position:relative;display:flex;justify-content:center;align-items:flex-end}
  img.emo-chars{position:relative;z-index:2;width:100%;max-width:420px;height:auto;display:block}
  @container pf (min-width:1024px){
    img.emo-chars{max-width:546px;width:100%}
  }

  /* NEWSLETTER · escena postal. Móvil: sobre y personajes en flujo, sin absolutos frágiles. */
  .news-scene{position:relative;display:flex;justify-content:center;align-items:flex-end;
    min-height:214px;padding-top:16px}
  .news-blob{position:absolute;right:50%;bottom:0;transform:translateX(50%);width:78%;aspect-ratio:1/.86;z-index:0;
    pointer-events:none;background:radial-gradient(58% 60% at 50% 55%,#DFF7F8 0%,#EAF8FA 54%,rgba(234,248,250,0) 74%);
    border-radius:56% 44% 50% 50%/48% 52% 48% 52%}
  .news-scene img.news-chars{position:relative;z-index:4;width:100%;max-width:250px;height:auto;
    object-fit:contain;display:block;margin-bottom:clamp(-30px,-2.4vw,-20px)}

  @container pf (min-width:768px){
    .news-scene{min-height:250px}
    .news-scene img.news-chars{max-width:280px}
  }
  @container pf (min-width:1024px){
    .news-scene{min-height:262px;align-items:flex-end;justify-content:flex-end;padding-top:12px}
    .news-blob{right:-4%;transform:none;width:82%}
    .news-scene img.news-chars{max-width:none;width:78%}
  }


  .nav-row{overflow-x:auto;scrollbar-width:none}
  .nav-row::-webkit-scrollbar{display:none}
  .gf-wide .gf-shape{width:64px;height:64px;border-radius:56% 44% 52% 48%/48% 52% 48% 52%}
  @container pf (min-width:1024px){
    .g-occ{grid-template-columns:repeat(4,minmax(0,1fr))!important}
    .gf-wide{grid-column:span 2}
    .gf-wide .gf-shape{width:84px;height:84px}
  }
  .navy-d{grid-column:1/-1;aspect-ratio:16/7!important}
  .navy-star,.navy-heart,.navy-line{display:none}
  @container pf (min-width:768px){
    .navy-stage{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,132px);gap:14px}
    .navy-lead{grid-column:1/3;grid-row:1/4;aspect-ratio:auto!important}
    .navy-b{grid-column:3;grid-row:1}
    .navy-c{grid-column:3;grid-row:2}
    .navy-d{grid-column:3;grid-row:3;aspect-ratio:auto!important}
    .navy-stage > a:not(.navy-lead){aspect-ratio:auto!important}
  }
  @container pf (min-width:1024px){
    .navy-stage{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:250px 190px;gap:16px}
    .navy-lead{grid-column:1/8;grid-row:1/3;aspect-ratio:auto!important}
    .navy-b{grid-column:8/13;grid-row:1;aspect-ratio:auto!important}
    .navy-c{grid-column:8/11;grid-row:2;aspect-ratio:auto!important}
    .navy-d{grid-column:11/13;grid-row:2;aspect-ratio:auto!important}
    .navy-star{display:block;position:absolute;left:-18px;top:-14px;width:22px;height:22px;opacity:.9}
    .navy-heart{display:block;position:absolute;right:-14px;bottom:18%;width:20px;height:20px;opacity:.9}
    .navy-line{display:block;position:absolute;left:44%;bottom:-26px;width:24%;height:36px;opacity:.8}
  }

  /* ESCENA DE REGALO. Móvil: protagonista + un objeto delante, personajes discretos. */
  .scene{position:relative;padding:2px 0 22px}
  .scene figure{margin:0}
  .scene img{display:block;width:100%;height:100%;object-fit:cover}
  .scene-hero{position:relative;width:62%;margin-left:auto;border-radius:24px;overflow:hidden;background:#fff;
    box-shadow:0 22px 44px -18px rgba(26,42,110,.34);aspect-ratio:3/4;z-index:2}
  .scene-hero figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:99px;
    background:rgba(255,255,255,.94);font-size:11.5px;font-weight:800;color:#0A1F66;letter-spacing:.01em}
  .scene-back{display:none}
  .scene-front{position:absolute;left:0;bottom:36px;width:34%;border-radius:18px;overflow:hidden;
    background:#fff;aspect-ratio:1/1;box-shadow:0 16px 32px -16px rgba(26,42,110,.32);z-index:3}
  .scene img.scene-chars{position:absolute;left:1%;bottom:-4px;width:37%;height:auto;object-fit:contain;z-index:4}

  @container pf (min-width:768px){
    .scene{padding:10px 0 40px}
    .scene-hero{width:66%}
    .scene-front{width:34%;bottom:64px}
    .scene img.scene-chars{width:38%}
  }

  /* Escritorio: asimetría real — protagonista, objeto detrás, objeto delante,
     personajes interactuando y microelementos dirigiendo la mirada. */
  @container pf (min-width:1024px){
    .scene{padding:0}
    .scene-hero{position:relative;width:58%;margin-left:8%;aspect-ratio:4/5;border-radius:26px;z-index:3;
      transform:rotate(-1.2deg);box-shadow:0 30px 60px -22px rgba(26,42,110,.4)}
    .scene-hero figcaption{left:14px;bottom:14px;font-size:12.5px;padding:7px 14px}
    .scene-back{display:none;position:absolute;right:2%;top:6%;width:42%;aspect-ratio:4/5;z-index:2;
      border-radius:22px;overflow:hidden;background:#fff;transform:rotate(2deg);
      box-shadow:0 22px 44px -20px rgba(26,42,110,.32)}
    .scene-front{left:2%;bottom:14%;width:31%;aspect-ratio:1/1;border-radius:20px;z-index:4;
      transform:rotate(-2deg);box-shadow:0 20px 40px -18px rgba(26,42,110,.34)}
    .scene img.scene-chars{left:17%;bottom:-22px;width:40%;z-index:5}
  }

  .g-occ{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-step{display:grid;gap:var(--gut);grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-rev{display:grid;gap:var(--gut);grid-template-columns:repeat(1,minmax(0,1fr))}
  .g-blog{display:grid;gap:var(--gut);grid-template-columns:repeat(1,minmax(0,1fr))}
  .g-trust{display:grid;gap:22px;grid-template-columns:repeat(1,minmax(0,1fr))}
  .g-hero{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
  .g-pers{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
  .g-emo{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
  .g-news{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
  .g-foot{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
  .swipe{display:flex;gap:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
  .swipe > *{scroll-snap-align:start;flex:0 0 74%;max-width:280px}

  @container pf (min-width:600px){
    .pf{--pad:24px;--gut:16px;--sec:46px;--h1:38px;--h2:26px;--h3:18px;--body:15px}
    .g-prod{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
    .g-occ{grid-template-columns:repeat(3,minmax(0,1fr))}
    .g-step{grid-template-columns:repeat(4,minmax(0,1fr))}
    .g-rev{grid-template-columns:repeat(2,minmax(0,1fr))}
    .g-blog{grid-template-columns:repeat(3,minmax(0,1fr))}
    .g-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
    .swipe > *{flex:0 0 42%}
  }
  @container pf (min-width:768px){
    .pf{--pad:32px;--sec:52px;--h1:42px;--h2:29px;--hero-min:0px}
    .r-tab{display:block!important}
    .g-hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center}
    .hero-col{height:470px}
    .g-pers{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .g-emo{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
    .g-news{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;gap:30px}
    .g-foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px}
  }
  @container pf (min-width:768px) and (max-width:1023px){
    .g-hero{grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:18px;align-items:center}
    .g-hero > *:first-child > h1{font-size:38px}
    .scene{padding:0}
  }
  @container pf (min-width:860px){
    .g-prod{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @container pf (min-width:1024px){
    .pf{--pad:40px;--gut:22px;--sec:54px;--h1:50px;--h2:38px;--h3:21px;--body:16.5px;--small:13px;--hero-min:0px}
    .r-desk{display:block!important}
    .r-desk-f{display:flex!important}
    .r-mob{display:none!important}
    .pf-wordmark{width:174px}
    .hero-col{height:660px}
    .g-cat{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr));
      overflow:visible;scroll-snap-type:none;padding:0}
    .g-cat > *{flex:auto;border:0!important;box-shadow:none!important}
    .g-cat img{aspect-ratio:4/3!important}
    .g-prod{grid-template-columns:repeat(4,minmax(0,1fr))}
    .g-occ{grid-template-columns:repeat(6,minmax(0,1fr))}
    .g-rev{grid-template-columns:repeat(3,minmax(0,1fr))}
    .g-trust{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
    .swipe{display:grid;gap:var(--gut);grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}
    .swipe > *{max-width:none;flex:none}
  }
  @container pf (min-width:1280px){
    .pf{--pad:48px;--h1:52px;--h2:40px}
  }
  @container pf (min-width:1600px){ .pf{--pad:56px;--sec:68px} }

  @keyframes pfBenefit{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-100%)}66%,92%{transform:translateY(-200%)}100%{transform:translateY(-300%)}}
  @keyframes pfPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
  @keyframes pfFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
  @keyframes pfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes pfSlide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  @keyframes pfRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
  .pf-benefit-track{animation:pfBenefit 12s cubic-bezier(.6,0,.4,1) infinite}
  .pf-pop{animation:pfPop .4s ease}
  .pf-float{animation:pfFloat 6s ease-in-out infinite}
  .pf-in{animation:pfIn .28s ease both}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important}}

/* El marco va a sangre, como en el diseno: Storefront lo encerraba en
   `.col-full` (max-width 1064) y el pie se quedaba en el tramo estrecho. */
.pigymarco{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw; }
.site-header .col-full:has(> .pigymarco),
.site-footer .col-full:has(> .pigymarco){ padding:0; max-width:none; }


/* --------------------------------------------------------------------------
   CSS PROPIO DEL PIE. «PigyfanteFooter.dc.html» trae su hoja aparte, con sus
   propias clases y sus propios tramos. Sin ella el pie caia a la version
   apilada: una columna, acordeon abierto y logos en fila vertical.
   -------------------------------------------------------------------------- */
/* Footer global. Único lugar donde vive el footer: Home y Tienda lo importan,
     así no pueden volver a desincronizarse. Responsive por container query,
     igual que el resto del sistema. */
  .pf-fgrid{display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
  .pf-fcol ul{display:none}
  .pf-fcol[data-open="1"] ul{display:flex}
  .pf-brand{width:104px}
  .pf-bwrap{padding-bottom:18px}
  .pf-band{display:flex;flex-direction:column;align-items:stretch;gap:14px}
  @container pf (min-width:900px){
    .pf-brand{width:146px}
    .pf-bwrap{padding-bottom:28px}
  }
  .pf-grp{display:flex;flex-direction:column;align-items:stretch;min-width:0}
  .pf-marks{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x proximity;padding-bottom:4px;max-width:100%}
  .pf-marks::-webkit-scrollbar{display:none}
  .pf-marks > *{flex:none;scroll-snap-align:start}
  .pf-sep{display:none}
  .pf-ship{display:flex;align-items:center;gap:22px}
  .pf-copy{text-align:center;margin:0 auto}
  @container pf (min-width:900px){
    .pf-fgrid{grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:32px}
    .pf-fcol{border:0 !important}
    .pf-fcol ul{display:flex}
    .pf-fcol button{pointer-events:none;padding:0 0 12px !important}
    .pf-fcol button svg{display:none}
  }
  @container pf (min-width:1100px){
    .pf-marks{flex-wrap:wrap;overflow-x:visible}
    .pf-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:start;gap:34px}
    .pf-grp{align-items:flex-start}
    .pf-marks{justify-content:flex-start}
    .pf-ship{align-items:flex-start;gap:34px}
    .pf-sep{display:block;width:1.5px;align-self:stretch;background:#1E3585;flex:none}
    .pf-copy{text-align:left;margin:0}
  }

/* --------------------------------------------------------------------------
   RESET ACOTADO. Al portar el CSS se quitaron los reset globales del prototipo
   —`ul{list-style:none}` entre ellos— porque en WordPress habrian reescrito el
   sitio entero. Consecuencia: dentro del marco reaparecian las vinetas y los
   margenes por omision del navegador. Se reponen SOLO dentro del marco.
   -------------------------------------------------------------------------- */
.pigymarco ul,
.pigymarco ol{ margin:0; padding:0; list-style:none; }
.pigymarco li{ list-style:none; }
.pigymarco a{ text-decoration:none; }
.pigymarco p{ margin:0; }
.pigymarco h1,.pigymarco h2,.pigymarco h3,.pigymarco h4{ margin:0; }
.pigymarco button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* Cabeceras de columna del pie: en movil son botones de acordeon y llevan fondo;
   en escritorio el acordeon no existe y ese fondo se veia como una barra gris
   sobre texto de bajo contraste. */
@container pf (min-width:768px){
  .pigymarco .foot-col > button,
  .pigymarco .foot-col > .foot-head{ background:none !important; border:0 !important; padding-left:0 !important; }
}