/* ===== fonts.css ===== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/f6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/f7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/f6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/f7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/f6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/f7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/f13.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/f14.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/f13.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/f14.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/f13.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/f14.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/f15.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/f16.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/f15.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/f16.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/f15.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/f16.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:'Rye';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rye.woff2) format('woff2');}

/* ===== motivos.css ===== */
/* MOTIVOS oceánicos/porteños de Mil Tambores 2026 — como variables CSS (data-URI)
   Uso típico (banda decorativa sin tocar HTML):
   body[data-theme=X] .seccion::after{content:'';display:block;height:54px;background:<color>;
     -webkit-mask-image:var(--mt-ola);-webkit-mask-repeat:repeat-x;-webkit-mask-size:auto 100%;
     mask-image:var(--mt-ola);mask-repeat:repeat-x;mask-size:auto 100%}
   Disponibles: --mt-ola --mt-ola-crestas --mt-cerros --mt-banderines (bandas repetibles)
                --mt-velero --mt-tambor --mt-sol --mt-pez (iconos)  */
:root{
  --mt-ola:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2060%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M0%2C34%20C30%2C16%2060%2C16%2090%2C30%20C120%2C44%20150%2C46%20180%2C32%20C205%2C20%20225%2C20%20240%2C30%20L240%2C60%20L0%2C60%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-ola-crestas:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2048%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M0%2C28%20A20%2C20%200%200%201%2040%2C28%20A20%2C20%200%200%201%2080%2C28%20A20%2C20%200%200%201%20120%2C28%20A20%2C20%200%200%201%20160%2C28%20A20%2C20%200%200%201%20200%2C28%20A20%2C20%200%200%201%20240%2C28%20L240%2C48%20L0%2C48%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-cerros:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%2086%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M0%2C86%20L0%2C60%20C30%2C38%2070%2C30%20110%2C44%20C150%2C57%20185%2C26%20230%2C30%20C275%2C34%20300%2C58%20345%2C50%20C390%2C42%20420%2C20%20480%2C40%20L480%2C86%20Z%22%2F%3E%3Cpath%20d%3D%22M60%2C46%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M95%2C42%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M150%2C40%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M205%2C26%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M250%2C32%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M310%2C42%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M370%2C28%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3Cpath%20d%3D%22M430%2C28%20l7%2C-6%20l7%2C6%20v9%20h-14%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-banderines:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2048%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M0%2C8%20C60%2C22%20180%2C22%20240%2C8%20L240%2C11%20C180%2C25%2060%2C25%200%2C11%20Z%22%2F%3E%3Cpath%20d%3D%22M12%2C14%20L34%2C15%20L23%2C40%20Z%22%2F%3E%3Cpath%20d%3D%22M46%2C18%20L68%2C19%20L57%2C44%20Z%22%2F%3E%3Cpath%20d%3D%22M80%2C20%20L102%2C21%20L91%2C46%20Z%22%2F%3E%3Cpath%20d%3D%22M114%2C20%20L136%2C21%20L125%2C46%20Z%22%2F%3E%3Cpath%20d%3D%22M148%2C18%20L170%2C19%20L159%2C44%20Z%22%2F%3E%3Cpath%20d%3D%22M182%2C15%20L204%2C16%20L193%2C41%20Z%22%2F%3E%3Cpath%20d%3D%22M216%2C12%20L238%2C13%20L227%2C38%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-velero:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Crect%20x%3D%2248%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2258%22%2F%3E%3Cpath%20d%3D%22M46%2C14%20L46%2C60%20L14%2C60%20Z%22%2F%3E%3Cpath%20d%3D%22M54%2C10%20L54%2C60%20L88%2C60%20Z%22%2F%3E%3Cpath%20d%3D%22M8%2C68%20L92%2C68%20L78%2C86%20L22%2C86%20Z%22%2F%3E%3Cpath%20d%3D%22M44%2C4%20L60%2C8%20L44%2C12%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-tambor:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M16%2C30%20C16%2C22%2031%2C16%2050%2C16%20C69%2C16%2084%2C22%2084%2C30%20L84%2C74%20C84%2C82%2069%2C88%2050%2C88%20C31%2C88%2016%2C82%2016%2C74%20Z%20M50%2C24%20C35%2C24%2024%2C27%2024%2C30%20C24%2C33%2035%2C36%2050%2C36%20C65%2C36%2076%2C33%2076%2C30%20C76%2C27%2065%2C24%2050%2C24%20Z%22%2F%3E%3Cpath%20d%3D%22M22%2C42%20L36%2C60%20L26%2C60%20Z%22%2F%3E%3Cpath%20d%3D%22M40%2C40%20L54%2C62%20L42%2C62%20Z%22%2F%3E%3Cpath%20d%3D%22M58%2C40%20L72%2C60%20L60%2C60%20Z%22%2F%3E%3Cpath%20d%3D%22M76%2C42%20L78%2C58%20L70%2C56%20Z%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%22-2%22%20width%3D%225%22%20height%3D%2236%22%20rx%3D%222.5%22%20transform%3D%22rotate%28-38%2016%2016%29%22%2F%3E%3Crect%20x%3D%2281%22%20y%3D%22-2%22%20width%3D%225%22%20height%3D%2236%22%20rx%3D%222.5%22%20transform%3D%22rotate%2838%2084%2016%29%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%225%22%2F%3E%3Ccircle%20cx%3D%2291%22%20cy%3D%229%22%20r%3D%225%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-sol:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2226%22%2F%3E%3Cpath%20d%3D%22M94.0%2C60.0%20L113.61166633610878%2C66.46445919360164%20L113.61166633610878%2C53.53554080639835%20Z%22%2F%3E%3Cpath%20d%3D%22M89.44486372867092%2C77.0%20L103.19683538948438%2C92.40421905144129%20L109.66129458308603%2C81.2074472846675%20Z%22%2F%3E%3Cpath%20d%3D%22M77.0%2C89.44486372867091%20L81.20744728466751%2C109.66129458308602%20L92.40421905144129%2C103.19683538948436%20Z%22%2F%3E%3Cpath%20d%3D%22M60.0%2C94.0%20L53.53554080639835%2C113.61166633610878%20L66.46445919360166%2C113.61166633610878%20Z%22%2F%3E%3Cpath%20d%3D%22M43.00000000000001%2C89.44486372867092%20L27.595780948558726%2C103.19683538948439%20L38.79255271533252%2C109.66129458308603%20Z%22%2F%3E%3Cpath%20d%3D%22M30.555136271329083%2C77.0%20L10.338705416913974%2C81.2074472846675%20L16.803164610515623%2C92.40421905144129%20Z%22%2F%3E%3Cpath%20d%3D%22M26.0%2C60.00000000000001%20L6.388333663891224%2C53.53554080639836%20L6.388333663891224%2C66.46445919360166%20Z%22%2F%3E%3Cpath%20d%3D%22M30.55513627132908%2C43.00000000000001%20L16.803164610515616%2C27.595780948558726%20L10.338705416913967%2C38.79255271533252%20Z%22%2F%3E%3Cpath%20d%3D%22M42.999999999999986%2C30.555136271329097%20L38.79255271533249%2C10.338705416913989%20L27.595780948558698%2C16.803164610515637%20Z%22%2F%3E%3Cpath%20d%3D%22M59.99999999999999%2C26.0%20L66.46445919360164%2C6.388333663891224%20L53.53554080639834%2C6.388333663891224%20Z%22%2F%3E%3Cpath%20d%3D%22M77.0%2C30.555136271329086%20L92.40421905144129%2C16.80316461051563%20L81.2074472846675%2C10.338705416913974%20Z%22%2F%3E%3Cpath%20d%3D%22M89.4448637286709%2C42.999999999999986%20L109.661294583086%2C38.792552715332484%20L103.19683538948436%2C27.59578094855869%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-pez:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%2060%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M10%2C30%20C30%2C8%2062%2C6%2084%2C22%20L104%2C8%20L98%2C30%20L104%2C52%20L84%2C38%20C62%2C54%2030%2C52%2010%2C30%20Z%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2226%22%20r%3D%224%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-gaviota:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2050%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M60%2C33%20C45%2C18%2030%2C14%206%2C25%20C29%2C29%2043%2C29%2057%2C35%20Z%27%2F%3E%3Cpath%20d%3D%27M60%2C33%20C75%2C18%2090%2C14%20114%2C25%20C91%2C29%2077%2C29%2063%2C35%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-luna:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M64%2C10%20A42%2C42%200%201%200%2064%2C90%20A31%2C31%200%201%201%2064%2C10%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-casa:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M50%2C16%20L86%2C47%20L77%2C47%20L77%2C84%20L58%2C84%20L58%2C60%20L42%2C60%20L42%2C84%20L23%2C84%20L23%2C47%20L14%2C47%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-libro:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M48%2C30%20C38%2C24%2022%2C23%2012%2C27%20L12%2C72%20C24%2C68%2038%2C69%2048%2C75%20Z%27%2F%3E%3Cpath%20d%3D%27M52%2C30%20C62%2C24%2078%2C23%2088%2C27%20L88%2C72%20C76%2C68%2062%2C69%2052%2C75%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-bolsa:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M28%2C40%20L72%2C40%20L78%2C86%20L22%2C86%20Z%27%2F%3E%3Cpath%20d%3D%27M38%2C44%20L38%2C34%20C38%2C20%2062%2C20%2062%2C34%20L62%2C44%20L54%2C44%20L54%2C34%20C54%2C30%2046%2C30%2046%2C34%20L46%2C44%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-sobre:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12%2C30%20L88%2C30%20L88%2C74%20L12%2C74%20Z%20M17%2C35%20L83%2C35%20L50%2C57%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-faro:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M50%2C6%20L57%2C16%20L43%2C16%20Z%20M44%2C18%20L56%2C18%20L56%2C27%20L44%2C27%20Z%20M40%2C30%20L60%2C30%20L67%2C88%20L33%2C88%20Z%20M35%2C50%20L65%2C50%20L66%2C59%20L34%2C59%20Z%20M34%2C67%20L66%2C67%20L67%2C77%20L33%2C77%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-concha:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M50%2C80%20C24%2C80%2014%2C56%2014%2C40%20C14%2C40%2022%2C30%2028%2C40%20C30%2C30%2040%2C26%2044%2C38%20C46%2C28%2054%2C28%2056%2C38%20C60%2C26%2070%2C30%2072%2C40%20C78%2C30%2086%2C40%2086%2C40%20C86%2C56%2076%2C80%2050%2C80%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --mt-caracola:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Cpath%20d%3D%27M52%2C86%20C26%2C86%2016%2C64%2022%2C44%20C27%2C27%2045%2C18%2064%2C22%20C80%2C25%2088%2C40%2080%2C53%20C73%2C64%2058%2C66%2049%2C57%20C42%2C50%2044%2C40%2052%2C37%20C59%2C35%2065%2C41%2062%2C48%20C72%2C44%2070%2C30%2056%2C28%20C40%2C26%2028%2C40%2031%2C56%20C34%2C72%2050%2C80%2068%2C76%20C58%2C84%2054%2C86%2052%2C86%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* ===== base.css ===== */
/* ===========================================================
   BASE.CSS — estructura y layout del home (prototipo 2026)
   Theme-agnóstico: todo el color/tipografía sale de variables
   que define cada tema (theme-*.css, scope body[data-theme]).
   =========================================================== */



*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
  /* cabecera */
  --topbar-h:36px; --nav-h:74px;          /* (antes 110px mágico) */
  /* escala de espaciado (base 4px) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:48px; --space-9:64px; --space-10:96px;
  /* ritmo de sección, canalón y densidad de tarjeta */
  --section-y:clamp(48px,8vw,110px);      /* respiración vertical de .sec */
  --gutter:24px;                          /* margen lateral de contenido */
  --card-pad:clamp(22px,2.4vw,30px);      /* densidad cómoda de tarjeta */
  --card-pad-compact:clamp(16px,1.8vw,20px); /* densidad compacta (prod/party) */
  /* escala tipográfica por rol (mismos clamps que ya estaban en uso) */
  --fs-hero:clamp(44px,9vw,128px);        /* statement del hero */
  --fs-h1:clamp(38px,7vw,84px);           /* h1 de página */
  --fs-h2:clamp(30px,4.6vw,52px);         /* título de sección */
  --fs-h3:clamp(22px,2.6vw,30px);         /* título de tarjeta */
  --fs-strip:clamp(26px,3.6vw,42px);      /* título de strip */
  --fs-lead:clamp(16px,2.1vw,20px);       /* bajada/lead */
  --fs-body:17px; --fs-small:14px; --fs-caps:13px;
  /* anchos de medida */
  --w-wide:1340px; --w-content:1100px; --w-prose:720px; --w-narrow:560px;
  /* tracking de versalitas (overlines) */
  --track-caps:.14em;
}
body{
  margin:0; padding-top:var(--nav-h,74px);
  background:var(--bg,#fff); color:var(--ink,#16131f);
  font-family:var(--font-body, system-ui, sans-serif);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
/* a11y · WCAG 1.4.1: enlaces dentro de texto corrido se distinguen por subrayado, no solo por color */
.prose a:not(.btn), .contact-aside a, .col-text p a:not(.btn){
  text-decoration:underline; text-underline-offset:.16em; text-decoration-thickness:.07em;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent);
}
.prose a:hover, .contact-aside a:hover, .col-text p a:hover{text-decoration-color:currentColor}
/* a11y · foco de respaldo (cada tema afina --focus-ring sobre su superficie; :where = 0 especificidad) */
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--focus-ring,#1B6E8C); outline-offset:var(--focus-offset,2px);
}
.container{max-width:var(--w-wide); margin:0 auto; padding:0 var(--gutter)}
.display{
  font-family:var(--font-display, var(--font-body));
  font-weight:var(--display-weight,800);
  text-transform:var(--display-transform,none);
  letter-spacing:var(--display-tracking,normal);
  line-height:.98; margin:0;
}
.btn{
  display:inline-block; cursor:pointer;
  background:var(--btn-bg,#5444ff); color:var(--btn-on,#fff);
  font-family:var(--font-body); font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:var(--radius-pill,999px);
  border:var(--btn-border,none); transition:transform .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-light{background:var(--surface,#fff); color:var(--brand,#5444ff)}

/* ---------- Theme switcher (flota, no afecta layout) ---------- */
.switcher{
  position:fixed; z-index:999; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:rgba(15,14,22,.92); color:#fff; padding:8px 10px; border-radius:999px;
  box-shadow:0 12px 40px rgba(0,0,0,.4); font-family:system-ui,sans-serif; font-size:13px; max-width:94vw;
}
.switcher b{padding:0 8px; opacity:.7; font-weight:600}
.switcher button{
  cursor:pointer; border:0; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700;
  background:#2a2740; color:#cfd0e6; transition:.15s;
}
.switcher button:hover{background:#3a3658; color:#fff}
.switcher button.active{background:#fff; color:#16131f}

/* ---------- Toggle día/noche (producción, solo el home lo monta) ---------- */
.mode-toggle{
  position:fixed; z-index:90; right:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px 9px 11px; border:0; border-radius:var(--radius-pill,999px); cursor:pointer;
  background:var(--surface,#fff); color:var(--ink,#16131f);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  font-family:var(--font-body,system-ui,sans-serif); font-weight:700; font-size:13px;
  transition:transform .18s ease, box-shadow .2s ease;
}
.mode-toggle:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.28)}
.mode-toggle svg{width:18px; height:18px; flex:none}
.mode-toggle__sun{display:none}
body[data-theme="pacifico"] .mode-toggle__sun{display:block}
body[data-theme="pacifico"] .mode-toggle__moon{display:none}

/* ---------- Header / navegación (fija) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:99; height:74px;
  background:var(--header-bg,#fff); color:var(--header-ink,#16131f);
  border-bottom:var(--header-border,1px solid rgba(0,0,0,.08));
  backdrop-filter:saturate(1.2) blur(6px);
}
.nav-inner{max-width:var(--w-wide); margin:0 auto; height:100%; padding:0 var(--gutter); display:flex; align-items:center; gap:20px}
.nav .brand img{height:42px; width:auto}
.nav .menu{display:flex; gap:22px; margin-left:8px; font-weight:600; font-size:15px}
.nav .menu a{position:relative; padding:4px 0}
.nav .menu a:hover{color:var(--brand)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.nav .social img{height:22px; width:22px; object-fit:contain}
.nav .icon{font-size:19px; opacity:.85}
.btn-form{padding:9px 16px; font-size:13px}

/* ---------- HERO (sección 1) ---------- */
.hero{position:relative; min-height:88vh; min-height:88svh; overflow:visible; background:var(--hero-bg,var(--brand,#5444ff)); display:flex; align-items:center}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.hero-overlay{position:absolute; inset:0; z-index:2; background:var(--hero-overlay, transparent)}
/* composición estilo 2025: logo centrado arriba, BARCO central plantado
   sobre la costura (la multitud le pasa por delante), fechas a la izquierda */
/* z-index 7 > costura (6): el BARCO navega DELANTE de la franja de multitud */
.hero-content{position:relative; z-index:7; max-width:var(--w-wide); margin:0 auto; padding:14px 24px 0; width:100%; min-height:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0}
.hero-brand{display:contents}
.hero-logo{width:min(360px,52vw); height:auto; filter:var(--hero-logo-filter,drop-shadow(0 8px 30px rgba(0,0,0,.35)))}
/* fechas vectoriales flotando a la izquierda (como 2025) */
.hero-fechas{position:absolute; left:clamp(20px,8vw,130px); top:40%; width:min(185px,15vw);
  filter:var(--hero-logo-filter,drop-shadow(0 6px 22px rgba(0,0,0,.30)))}
/* BARCO del carnaval: centrado, navegando sobre la franja de multitud
   (baja sobre la costura; ella lo recorta por delante = profundidad) */
.hero-barco{width:min(640px,54vw); height:auto; margin-top:clamp(2px,1vw,14px);
  transform:translateY(clamp(30px,5vw,78px));
  filter:drop-shadow(0 20px 44px rgba(0,0,0,.40))}
/* (sin uso en el home actual; conservado para otros usos del altar) */
.hero-ilus{width:min(620px,56vw); height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
@media (max-width:860px){
  .hero-content{text-align:center}
  .hero-fechas{position:static; width:min(190px,46vw); margin:10px 0 2px}
  .hero-logo{width:min(340px,70vw)}
  .hero-barco{width:min(460px,88vw); transform:translateY(clamp(24px,7vw,52px))}
}
/* COSTURA: franja-ilustración del carnaval, COMPLETA e INTEGRADA —
   altura CERO en el flujo: el hero y la sección siguiente se tocan
   detrás de ella (sin fondo blanco) y la franja cabalga la juntura,
   mitad sobre el hero y mitad sobre el video (como en 2025). */
.costura{height:0; line-height:0; background:transparent; position:relative; z-index:6; pointer-events:none; margin:0}
.costura img{position:absolute; left:0; top:0; width:100%; height:auto; transform:translateY(-70%);
  filter:var(--costura-filter,drop-shadow(0 10px 24px rgba(0,0,0,.28)))}
/* variante EN FLUJO para páginas interiores (no se superpone al contenido) */
.costura-flow{height:auto}
.costura-flow img{position:static; transform:none}

/* ---------- SEC 2 (Por la unidad / video body) ---------- */
.sec-body{position:relative; min-height:86vh; min-height:86svh; overflow:hidden; display:flex; align-items:center; background:var(--sec2-bg,#111)}
.sec-body-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.sec-body-overlay{position:absolute; inset:0; z-index:2; background:var(--sec2-overlay, rgba(0,0,0,.4))}
.sec-body-content{position:relative; z-index:3; max-width:var(--w-content); margin:0 auto; padding:clamp(150px,19vw,250px) var(--gutter) 90px; text-align:center; color:var(--sec2-ink,#fff); display:flex; flex-direction:column; align-items:center; gap:22px}
.sec-title{font-size:var(--fs-hero); color:var(--sec2-ink,#fff)}
.sec-graphic{width:min(360px,70vw); height:auto}
.sec-body-content p{font-size:clamp(16px,2.2vw,21px); max-width:640px; margin:0; opacity:.95}

/* ---------- Secciones genéricas ---------- */
.sec{padding:var(--section-y) 0; background:var(--bg)}
.sec-head-img{display:block; margin:0 auto clamp(24px,5vw,48px); width:min(420px,72vw)}
.cols{max-width:var(--w-wide); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:1fr 2fr; gap:34px; align-items:center}
.card{background:var(--surface,#fff); border:var(--card-border,none); border-radius:var(--radius-card,18px); padding:var(--card-pad); box-shadow:var(--card-shadow,0 14px 40px rgba(0,0,0,.08))}
.col-text .title-img{width:min(260px,60%); margin-bottom:14px}
.col-title{font-family:var(--font-display); font-weight:var(--display-weight,900); text-transform:var(--display-transform,none); letter-spacing:var(--display-tracking,normal); font-size:clamp(26px,3.4vw,40px); line-height:1; color:var(--ink); margin:0 0 14px}
.col-text p{color:var(--muted,inherit); margin:0 0 18px}

/* galería */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.gallery img{aspect-ratio:3/4; object-fit:cover; width:100%; border-radius:var(--radius-card,14px); box-shadow:var(--card-shadow,0 8px 24px rgba(0,0,0,.12))}
.gallery img:first-child{grid-row:span 2; aspect-ratio:auto; height:100%}

/* fiestas (3 cards) */
.fiestas-title{width:min(360px,70vw); margin:0 auto clamp(20px,4vw,40px)}
.cards-3, .cols-3{max-width:var(--w-wide); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.party{overflow:hidden; border-radius:var(--radius-card,18px); background:var(--surface,#fff); border:var(--card-border,none); box-shadow:var(--card-shadow,0 14px 40px rgba(0,0,0,.1))}
.party img{aspect-ratio:4/3; object-fit:cover; width:100%}
.party-body{padding:18px 20px 24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.party-body h3{font-size:clamp(20px,2.4vw,28px); color:var(--ink)}

/* tienda + pulsera (3 col) */
.cols-3{align-items:stretch}
.cols-3 .col{border-radius:var(--radius-card,18px); padding:var(--card-pad); display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start}
.tienda-cta{background:var(--brand,#5444ff); color:var(--on-brand,#fff)}
.tienda-cta .mini{width:130px}
.tienda-cta p{font-size:18px; margin:0}
.apoyanos-lockup{display:block; width:min(230px,90%); height:auto; margin:0 0 4px}
.tienda-cats{padding:0 !important; gap:14px !important; background:transparent}
.cat-cards{display:flex; flex-direction:column; gap:14px; width:100%}
.cat{position:relative; height:120px; border-radius:var(--radius-card,16px); overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; box-shadow:var(--card-shadow,0 10px 30px rgba(0,0,0,.15))}
.cat::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%, rgba(0,0,0,.6))}
.cat span{position:relative; z-index:2; color:#fff; font-family:var(--font-display); font-weight:var(--display-weight,800); text-transform:var(--display-transform,none); font-size:24px; padding:16px 20px}
.pulsera{background:var(--pink,#ff8ff0); color:var(--on-pink,#16131f)}
.pulsera img{border-radius:12px; width:100%; aspect-ratio:4/3; object-fit:cover}
.pulsera h3{font-size:24px}
.pulsera p{margin:0}

/* ---------- Footer ---------- */
.footer{background:var(--footer-bg,#16131f); color:var(--footer-ink,#fff); padding:54px 0 64px}
.footer .container{display:flex; flex-direction:column; gap:30px; align-items:center; text-align:center}
.foot-social{display:flex; gap:14px; align-items:center}
.foot-social img{height:34px; width:auto}
.foot-logos{display:flex; flex-wrap:wrap; gap:22px 30px; justify-content:center; align-items:center; max-width:980px}
.foot-logos img{height:52px; width:auto; object-fit:contain; filter:var(--footer-logo-filter,none); opacity:.95}
.foot-credit{display:flex; gap:10px; align-items:center; opacity:.7; font-size:13px}
.foot-credit img{height:26px}

/* ---------- Responsive (móvil) ---------- */
@media (max-width:860px){
  .nav .menu{display:none}
  .cols{grid-template-columns:1fr; gap:24px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery img:first-child{grid-row:auto; aspect-ratio:3/4}
  .cards-3, .cols-3{grid-template-columns:1fr}
  .hero-content{padding:40px 24px}
  .foot-logos img{height:40px}
}
@media (max-width:560px){
  .nav-right .btn-form{display:none}
  .gallery{grid-template-columns:1fr 1fr}
}

/* ---------- Programa 2026: tarjetas de los 3 días ---------- */
.dias{max-width:var(--w-wide); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.dia{background:var(--surface,#fff); border:var(--card-border,none); border-radius:var(--radius-card,18px); box-shadow:var(--card-shadow,0 14px 40px rgba(0,0,0,.1)); padding:var(--card-pad); display:flex; flex-direction:column; gap:var(--space-3)}
.dia .fecha{font-family:var(--font-body); font-weight:800; font-size:var(--fs-caps); letter-spacing:var(--track-caps); text-transform:uppercase; color:var(--accent,#18B6C9)}
.dia h3{font-size:var(--fs-h3); color:var(--ink); margin:0}
.dia ul{margin:0; padding-left:18px; color:var(--muted,inherit); font-size:15px; display:flex; flex-direction:column; gap:8px}
.dia li b{color:var(--ink)}
.sec-titulo{ text-align:center; font-size:var(--fs-h2); color:var(--ink); margin:0 0 var(--space-2)}
.sec-baja{text-align:center; color:var(--muted,inherit); max-width:var(--w-prose); margin:0 auto clamp(26px,4vw,44px); padding:0 var(--gutter)}

/* ---------- Páginas interiores ---------- */
.page-hero{background:var(--hero-bg,var(--brand)); color:var(--hero-ink,#fff); padding:clamp(48px,8vw,90px) 0 clamp(36px,6vw,64px); position:relative; overflow:hidden}
.page-hero .container{position:relative; z-index:2}
.page-hero h1{font-size:var(--fs-h1); color:var(--hero-ink,#fff)}
.page-hero .lead{max-width:var(--w-prose); font-size:var(--fs-lead); opacity:.95; margin:14px 0 0}
.breadcrumb{font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-bottom:10px; font-weight:700}
.prose{max-width:var(--w-prose); margin:0 auto; padding:0 var(--gutter); font-size:var(--fs-body)}
.prose p{margin:0 0 1.2em}
.prose .destacado{font-family:var(--font-display); font-weight:var(--display-weight,800); text-transform:var(--display-transform,none); font-size:clamp(22px,3vw,30px); line-height:1.15; color:var(--brand); margin:1.4em 0}

/* grilla de afiches / galería histórica */
.afiches{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:var(--w-content); margin:34px auto 0; padding:0 var(--gutter)}
.afiches img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-card,12px); border:var(--card-border,none); box-shadow:var(--card-shadow,0 10px 26px rgba(0,0,0,.14))}

/* ---------- Tiendita: grilla de productos ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:0 auto clamp(24px,4vw,40px); padding:0 var(--gutter)}
.chip-cat{font-family:var(--font-body); font-weight:700; font-size:14px; padding:9px 18px; border-radius:var(--radius-pill,999px); background:var(--surface,#fff); color:var(--ink); border:var(--card-border,1px solid rgba(0,0,0,.12)); box-shadow:var(--card-shadow,none); cursor:pointer}
.chip-cat.active{background:var(--btn-bg); color:var(--btn-on); border-color:transparent}
.productos{max-width:var(--w-wide); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.prod{background:var(--surface,#fff); border:var(--card-border,none); border-radius:var(--radius-card,16px); box-shadow:var(--card-shadow,0 12px 34px rgba(0,0,0,.09)); overflow:hidden; display:flex; flex-direction:column}
.prod img{aspect-ratio:1/1; object-fit:cover; width:100%; background:#fff}
.prod-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1}
.prod-body h3{margin:0; font-size:17px; color:var(--ink); font-family:var(--font-body); font-weight:800}
.prod .precio{font-family:var(--font-display); font-weight:var(--display-weight,800); font-size:21px; color:var(--brand)}
.prod .btn{margin-top:auto; align-self:flex-start; padding:10px 18px; font-size:13.5px}

/* ---------- Turismo: packs ---------- */
.packs{max-width:var(--w-wide); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pack{background:var(--surface,#fff); border:var(--card-border,none); border-radius:var(--radius-card,18px); box-shadow:var(--card-shadow,0 14px 40px rgba(0,0,0,.1)); overflow:hidden; display:flex; flex-direction:column}
.pack img{aspect-ratio:16/10; object-fit:cover}
.pack-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.pack-body h3{margin:0; font-size:24px; color:var(--ink)}
.pack-body ul{margin:0; padding-left:18px; color:var(--muted,inherit); font-size:14.5px; display:flex; flex-direction:column; gap:6px}
.pack .btn{margin-top:auto; align-self:flex-start}

/* ---------- Contacto: formulario ---------- */
.form-card{max-width:var(--w-prose); margin:0 auto; background:var(--surface,#fff); border:var(--card-border,none); border-radius:var(--radius-card,18px); box-shadow:var(--card-shadow,0 16px 44px rgba(0,0,0,.1)); padding:var(--card-pad)}
.form-card label{display:block; font-weight:700; font-size:14px; margin:16px 0 6px; color:var(--ink)}
.form-card input,.form-card textarea,.form-card select{width:100%; padding:12px 14px; font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--bg); border:var(--card-border,1.5px solid rgba(0,0,0,.18)); border-radius:calc(var(--radius-card,14px)*.6); outline:none}
.form-card input:focus,.form-card textarea:focus{border-color:var(--accent,var(--brand))}
.contact-aside{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px; font-size:15px}
.contact-aside a{font-weight:700; color:var(--brand)}

/* ---------- Strips (banda turismo / contacto en el home) ---------- */
.strip{background:var(--brand); color:var(--on-brand,#fff)}
.strip .container{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:clamp(30px,5vw,52px); padding-bottom:clamp(30px,5vw,52px); flex-wrap:wrap}
.strip h2{font-size:var(--fs-strip); margin:0; color:inherit}
.strip p{margin:6px 0 0; opacity:.92; max-width:var(--w-narrow)}

@media (max-width:860px){
  .dias,.packs{grid-template-columns:1fr}
  .productos{grid-template-columns:repeat(2,1fr)}
  .afiches{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .productos{grid-template-columns:1fr 1fr}
}

/* a11y · respeta la preferencia de menos movimiento (videos se pausan vía JS) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* modo captura full-page (?shot): neutraliza vh para screenshots */
body.shot .hero{min-height:760px}
body.shot .sec-body{min-height:720px}


/* ---------- Footer categorizado (Organiza y produce · Colaboran · Comunicaciones · Alianzas) ---------- */
.foot-cats{max-width:var(--w-content,1100px); margin:0 auto 6px; padding:0 var(--gutter,24px); display:flex; flex-direction:column; gap:clamp(22px,3.2vw,38px)}
.foot-cat{display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.5vw,16px)}
.foot-cat-label{margin:0; font-family:var(--font-body,system-ui,sans-serif); font-weight:800; font-size:clamp(11.5px,1.2vw,13.5px); letter-spacing:.18em; text-transform:uppercase; color:var(--footer-ink,#C9C2E4); opacity:.85}
.foot-cat-logos{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(12px,1.8vw,22px)}
.foot-cat-logos img{height:clamp(42px,5.2vw,66px); width:auto; max-width:200px; object-fit:contain; background:#fff; border-radius:10px; padding:7px 11px}
@media (max-width:560px){ .foot-cat-logos img{height:clamp(38px,11vw,52px)} }

/* Organiza y produce (1ª categoría · Centro Cultural Playa Ancha) = logo protagonista, más grande */
.foot-cat:first-child .foot-cat-logos img{height:clamp(78px,8.5vw,116px); max-width:240px}

/* ===== pacifico-core.css ===== */
/* ===========================================================
   PACIFICO-CORE.CSS — decoración compartida del HOME Pacífico
   (motivos acuarela v2.9 + juego del footer v3.1), byte-idéntica
   entre 'pacifico' (día) y 'pacifico-carnaval' (canon).
   Scope: body.pc (solo el home; interiores 'pacifico-noche' tienen
   su propia decoración y NO llevan esta clase).
   Cargar DESPUÉS de base.css y ANTES de los theme-*.css.
   =========================================================== */

/* ===================================================================
   v2.9 · MOTIVOS ACUARELA CON PRESENCIA (PNG transparentes nuevos)
   Ilustración "con confianza": visible (op .55–.8), no marca de agua,
   pero sin tapar jamás texto ni cards. Técnica común: pseudo-elemento
   absoluto + pointer-events:none + z-index:-1 dentro de una sección con
   isolation:isolate → el motivo pinta SOBRE el fondo de la sección pero
   DEBAJO de todo el contenido (si roza una card, la card lo recorta;
   nunca al revés).
   Mapa de costa a costa (alternando lado, de arriba a abajo):
     hero ............. sol amarillo · DERECHA (v2.5)
     sec-body ......... olas line-art · IZQUIERDA (v2.5)
     programa-2026 .... pez wm IZQ · GAVIOTA acuarela DERECHA del título
     programa/galería . BOTE varado · esquina inferior IZQUIERDA
                        (encalla sobre las olas line-art ya existentes)
     fiestas .......... SOL-LUNA · DERECHA del título (diálogo día/noche)
     tienda ........... CARACOLA sup-IZQ · CONCHA inf-DER (tesoros de playa)
     strip turismo .... velero · DERECHA (v2.8)
     strip contacto ... FARO asomando · IZQUIERDA
     footer ........... olas line-art · IZQUIERDA (v2.6)
   =================================================================== */

/* 1 · Sol boho radiante a la derecha del título "Programa 2026".
       Anclado al h2 (no a la sección) para que acompañe siempre al título;
       el ::after del h2 ya es el subrayado de espuma, el ::before está libre. */
body.pc .sec-programa-2026 .sec-titulo{position:relative}
body.pc .sec-programa-2026 .sec-titulo::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:clamp(16px,6vw,116px); top:clamp(-38px,-2.8vw,-20px);
  width:clamp(120px,13vw,168px); aspect-ratio:1/1;
  background:url(../img/sol-amarillo.webp) center/contain no-repeat;
  opacity:.8;
}

/* 2 · Sol y luna abrazados junto al título de FIESTAS: el carnaval de día
       y la fiesta de noche conversando al costado derecho del rótulo */
body.pc .sec-fiestas{isolation:isolate}
body.pc .sec-fiestas::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:clamp(20px,4.5vw,88px); top:clamp(54px,6.5vw,100px);
  width:clamp(160px,17vw,215px); aspect-ratio:520/534;
  background:url(../img/sol-luna.webp) center/contain no-repeat;
  opacity:.72;
}

/* 3 · Tienda: tesoros de playa en esquinas opuestas — caracola arriba a la
       izquierda, concha abajo a la derecha, ligeramente giradas como
       recién dejadas por la marea */
body.pc .sec-tienda::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:clamp(14px,3vw,54px); top:clamp(14px,3vw,46px);
  width:clamp(92px,9.5vw,126px); aspect-ratio:218/202;
  background:url(../img/caracola.png) center/contain no-repeat;
  opacity:.78; transform:rotate(-12deg);
}
body.pc .sec-tienda::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:clamp(24px,4vw,80px); bottom:clamp(34px,4.5vw,72px);
  width:clamp(90px,9vw,118px); aspect-ratio:1/1;
  background:url(../img/concha.webp) center/contain no-repeat;
  opacity:.78; transform:rotate(10deg);
}

/* 4 · Bote varado en la esquina inferior izquierda de la galería,
       encallado justo sobre las olas line-art navy del ::before (v2.6):
       composición bote-sobre-olas bajo la card de texto */
body.pc .sec-programa::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:clamp(30px,6vw,110px); bottom:clamp(14px,2.4vw,34px);
  width:clamp(200px,23vw,280px); aspect-ratio:460/283;
  background:url(../img/bote.webp) center/contain no-repeat;
  opacity:.78;
}

/* 5 · Faro rojo asomando por el costado izquierdo del strip contacto,
       con la base hundida bajo el borde (overflow lo recorta) */
body.pc .strip-contacto{overflow:hidden}
body.pc .strip-contacto::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:clamp(12px,2.6vw,46px); bottom:-28px;
  width:clamp(64px,6.5vw,84px); aspect-ratio:300/1244;
  background:url(../img/faro-motivo.webp) top center/contain no-repeat;
  opacity:.5;
}

/* 6 · Móvil <860px: los laterales se encogen ~40% y se pegan al borde;
       bote y faro se ocultan (chocarían con galería y texto centrados) */
@media (max-width:860px){
  body.pc .sec-programa-2026 .sec-titulo::before{
    width:84px; right:8px; top:-56px; opacity:.55;
  }
  body.pc .sec-fiestas::after{
    width:112px; right:8px; top:48px; opacity:.75;
  }
  body.pc .sec-tienda::before{width:64px; left:10px; top:12px}
  body.pc .sec-tienda::after{width:62px; right:10px; bottom:10px}
  body.pc .sec-programa::after,
  body.pc .strip-contacto::before{display:none}
}

/* ===================================================================
   v3.1 · EL JUEGO DEL FOOTER, EN TODO EL LANDING
   El footer enamoró con dos capas: (a) banda de olas con FUNDIDO
   (sep-olas-oscuras muriendo en el abismo) y (b) marca de agua de
   olas line-art detrás del contenido. Este bloque replica esa lógica
   sin tocar nada anterior: los 4 pseudos de fiestas/tienda/prog-2026
   y los 2 de cada strip están OCUPADOS (v2.6/v2.9), así que las capas
   nuevas se cuelgan de los hijos directos (.container/.cols-3/.cards-3/
   .dias, ninguno posicionado salvo el container del strip turismo) →
   position:absolute anclado a la sección (ya isolated) + z-index:-1 +
   pointer-events:none: pintan sobre el fondo/grano, bajo cards y texto.
   Toda banda lleva mask de fundido lineal: nunca un rectángulo duro.
   MAPA v3.1 (de arriba a abajo):
     programa-2026 ... pie: banda sep-olas-CLARAS subiendo en fundido
                       hacia la ola océano existente (orilla de playa)
     fiestas ......... olas-vector fantasma al pie, bajo las cards
     tienda .......... techo: banda sep-olas-CLARAS fundida en la
                       juntura blanca fiestas→tienda
     strip turismo ... mini-footer: banda sep-olas-OSCURAS hundiéndose
                       al pie + line-art BLANCO rompiendo a la IZQ
                       (el velero v2.8 ya ocupa la derecha)
     strip contacto .. line-art entintado NAVY (filter de marca, como
                       .sec-programa::before) rompiendo a la DERECHA
                       (el faro v2.9 ya ocupa la izquierda); la banda
                       oscura no se duplica: el footer ya la trae
   =================================================================== */

/* ---- 1 · Programa 2026: la marea llega a la orilla de las cards ----
   Banda claras anclada al pie de la sección (z-1 bajo cards y bajo la
   ola océano del ::after, que pinta encima por ser z:auto posicionado);
   fundido: nace transparente en la arena y gana cuerpo hacia la ola. */
body.pc .sec-programa-2026 .dias::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  height:clamp(120px,15vw,200px);
  background:url(../img/sep-olas-claras.webp) center bottom / cover no-repeat;
  opacity:.65;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, #000 88%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 45%, #000 88%);
}

/* ---- 2 · Fiestas: marejada vectorial fantasma bajo los tickets ----
   olas-vector a opacidad whisper (.08: el blanco de la sección hace de
   velo) creciendo hacia el pie; las party-cards opacas la recortan. */
body.pc .sec-fiestas .cards-3::before{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:-1; pointer-events:none;
  height:min(72%,520px);
  background:url(../img/olas-vector.webp) center bottom / cover no-repeat;
  opacity:.08;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 62%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 62%);
}

/* ---- 3 · Tienda: banda claras en la juntura fiestas→tienda ----
   Ambas secciones se tocan en BLANCO puro: la banda nace y muere
   transparente, dejando flotar las olas acuarela entre las dos. */
body.pc .sec-tienda .cols-3::before{
  content:""; position:absolute; left:0; right:0; top:0; z-index:-1; pointer-events:none;
  height:clamp(110px,13vw,180px);
  background:url(../img/sep-olas-claras.webp) center top / cover no-repeat;
  opacity:.7;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 62%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 32%, #000 62%, transparent 100%);
}

/* ---- 4 · Strip turismo = mini-footer océano ----
   isolation para que los z-1 nuevos pinten sobre el degradado del strip
   (las mordidas arena ::before/::after siguen encima: z:auto posicionado). */
body.pc .strip-turismo{isolation:isolate}
/* 4a · banda oscura full-bleed hundiéndose al pie (eco del footer):
   ::before del container (posicionado inline) para pintar BAJO el
   line-art (tree order) — sale del container con left:50%+100vw. */
body.pc .strip-turismo .container::before{
  content:""; position:absolute; left:50%; bottom:0; z-index:-1; pointer-events:none;
  width:100vw; transform:translateX(-50%);
  height:clamp(64px,9vw,120px);
  background:url(../img/sep-olas-oscuras.webp) center / cover no-repeat;
  opacity:.45;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 82%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 82%);
}
/* 4b · line-art blanco rompiendo abajo-IZQUIERDA (velero a la derecha),
   fundido hacia arriba para despejar la zona del titular */
body.pc .strip-turismo .container::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -44px bottom -34px / 760px auto no-repeat;
  opacity:.13;
  -webkit-mask-image:linear-gradient(180deg, transparent 6%, rgba(0,0,0,.6) 42%, #000 80%);
  mask-image:linear-gradient(180deg, transparent 6%, rgba(0,0,0,.6) 42%, #000 80%);
}

/* ---- 5 · Strip contacto: line-art a la DERECHA, entintado navy ----
   Fondo arena (v2.6) → el PNG blanco se entinta con el filter-chain de
   marca (mismo de .sec-programa::before); op .09 sobre claro ≈ los
   .11-.13 del blanco sobre oscuro. El container no está posicionado:
   el pseudo ancla directo a la sección (relative+isolated+overflow). */
body.pc .strip-contacto .container::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/olas-lineart.webp) right -56px bottom -30px / clamp(520px,52vw,760px) auto no-repeat;
  filter:var(--marca-filter);
  opacity:.09;
  -webkit-mask-image:linear-gradient(180deg, transparent 4%, #000 58%);
  mask-image:linear-gradient(180deg, transparent 4%, #000 58%);
}

/* ---- 6 · Móvil: el juego se aligera, no se apaga ----
   bandas más bajas, line-art más pequeño; el vector de fiestas se va
   (en columna 1 estiraría el cover y pesa 300KB que ahí no lucen). */
@media (max-width:860px){
  body.pc .sec-programa-2026 .dias::after{height:96px; opacity:.55}
  body.pc .sec-fiestas .cards-3::before{display:none}
  body.pc .sec-tienda .cols-3::before{height:84px; opacity:.6}
  body.pc .strip-turismo .container::before{height:56px; opacity:.4}
  body.pc .strip-turismo .container::after{
    background-size:440px auto; opacity:.09;
    -webkit-mask-image:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6) 60%, #000 88%);
    mask-image:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6) 60%, #000 88%);
  }
  body.pc .strip-contacto .container::before{background-size:440px auto; opacity:.07}
}

/* ===== nav-oceanica.css ===== */
/* ===========================================================
   CHROME UNIFICADO (se carga DESPUÉS de los temas):
   1. Franja verde de voluntarios (como la web 2025).
   2. Barra de navegación estilo "Bahía Neón" en tonos
      oceánicos/celestes — igual en las 4 direcciones.
   =========================================================== */

/* ---------- Franja verde superior ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:101; height:36px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:#2BF286; color:#06281A;
  font-family:Inter,system-ui,sans-serif; font-weight:700; font-size:13.5px;
}
.topbar-btn{
  background:#10100f; color:#fff; font-weight:700; font-size:12.5px;
  padding:5px 14px; border-radius:999px; line-height:1;
}
.topbar-btn:hover{background:#27332c}

/* ---------- Nav oceánica (glass nocturno + celeste) ---------- */
.nav{
  top:var(--topbar-h,36px);
  background:linear-gradient(180deg, rgba(6,24,40,.96), rgba(9,33,52,.90)) !important;
  color:#EAF6FF !important;
  border-bottom:1px solid rgba(56,209,255,.30) !important;
  box-shadow:0 12px 32px rgba(2,12,22,.35) !important;
  backdrop-filter:saturate(1.25) blur(9px);
}
body{padding-top:calc(var(--topbar-h,36px) + var(--nav-h,74px))}
.nav .menu a{color:#D7EEFB}
.nav .menu a:hover{color:#38D1FF !important}
.nav .menu a::after{background:linear-gradient(90deg,#38D1FF,#7FF0D4) !important}
.nav .brand img{filter:none !important; height:44px}
.nav .social img{filter:brightness(0) invert(1); opacity:.85}
.nav .social img:hover{opacity:1}
.nav .icon{color:#D7EEFB}

/* ===========================================================
   Navegación móvil — hamburguesa + drawer accesible (≤860px)
   Inyectada por assets/nav.js (botón + backdrop). Hit-areas ≥44px.
   =========================================================== */
.nav-toggle{
  display:none; margin-left:6px; width:44px; height:44px; padding:0; border:0;
  background:transparent; color:inherit; cursor:pointer; border-radius:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle:hover{background:rgba(56,209,255,.12)}
.nav-toggle span{display:block; width:22px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, opacity .2s ease}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-backdrop{
  position:fixed; left:0; right:0; bottom:0; z-index:118;
  top:calc(var(--topbar-h,36px) + var(--nav-h,74px));
  background:rgba(3,14,26,.55); opacity:0; pointer-events:none; transition:opacity .28s ease;
}
body.nav-open .nav-backdrop{opacity:1; pointer-events:auto}

@media (max-width:860px){
  .nav .nav-inner{position:relative}
  /* El drawer (.nav .menu) es position:fixed hijo de .nav, que tiene backdrop-filter + z-index:99
     → queda ATRAPADO en el contexto de apilamiento de .nav (nivel global 99). El .nav-backdrop
     se agrega al <body> con z-index:118 (contexto raíz) → pintaría ENCIMA del menú e intercepta los
     clics de los enlaces (la X, en la barra, queda por encima del borde superior del backdrop, por eso
     sí funciona). Subimos .nav por encima del backdrop para que el drawer reciba los clics. */
  .nav{z-index:130}
  .nav .icon, .nav .social{display:none}   /* emojis 👤🛒 y social (van en el footer): fuera en móvil */
  .nav-toggle{display:inline-flex; position:absolute; right:14px; top:50%; transform:translateY(-50%)}
  /* .menu deja de ocultarse (base.css) y se vuelve panel deslizante */
  .nav .menu{
    display:flex !important; position:fixed; right:0; z-index:120;
    top:calc(var(--topbar-h,36px) + var(--nav-h,74px));
    height:calc(100dvh - (var(--topbar-h,36px) + var(--nav-h,74px)));
    width:min(80vw,330px); flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:14px 22px 28px;
    background:linear-gradient(180deg, rgba(6,24,40,.99), rgba(9,33,52,.99));
    border-left:1px solid rgba(56,209,255,.30); box-shadow:-20px 0 50px rgba(2,12,22,.5);
    transform:translateX(100%); transition:transform .28s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav .menu{transform:translateX(0)}
  .nav .menu a{display:flex; align-items:center; min-height:52px; padding:6px 2px; font-size:17px;
    border-bottom:1px solid rgba(56,209,255,.14)}
  /* iconos propios del menú (familia de motivos --mt-), solo en el drawer móvil */
  .nav .menu a::before{content:""; width:22px; height:22px; margin-right:13px; flex:none;
    background:currentColor; opacity:.9;
    -webkit-mask:var(--icon,var(--mt-tambor)) center/contain no-repeat; mask:var(--icon,var(--mt-tambor)) center/contain no-repeat}
  /* PRODUCCIÓN (WP): clases estables del walker — independientes de permalinks/dominio */
  .nav .menu a.mi-inicio{--icon:var(--mt-casa)}
  .nav .menu a.mi-historia{--icon:var(--mt-libro)}
  .nav .menu a.mi-programacion-2026{--icon:var(--mt-sol)}
  .nav .menu a.mi-fiestas{--icon:var(--mt-tambor)}
  .nav .menu a.mi-tienda{--icon:var(--mt-bolsa)}
  .nav .menu a.mi-turismo{--icon:var(--mt-velero)}
  .nav .menu a.mi-contacto{--icon:var(--mt-sobre)}
  /* PROTOTIPO standalone (hrefs .html) */
  .nav .menu a[href="home.html"]{--icon:var(--mt-casa)}
  .nav .menu a[href="historia.html"]{--icon:var(--mt-libro)}
  .nav .menu a[href="programacion-2026.html"]{--icon:var(--mt-sol)}
  .nav .menu a[href="fiestas.html"]{--icon:var(--mt-tambor)}
  .nav .menu a[href="tiendita.html"]{--icon:var(--mt-bolsa)}
  .nav .menu a[href="turismo.html"]{--icon:var(--mt-velero)}
  .nav .menu a[href="contacto.html"]{--icon:var(--mt-sobre)}
  body.nav-open{overflow:hidden}            /* bloquea el scroll de fondo */
}

@media (max-width:560px){
  .topbar{font-size:12px; gap:8px; padding:0 10px}
}

/* ===== carrusel.css ===== */
/* ===========================================================
   CARRUSEL.CSS — componente de carrusel reutilizable (MT 2026)
   Slider horizontal de fotos del carnaval, accesible y theme-agnóstico.
   Todo el color/sombra/radio sale de variables que define cada tema
   (--brand, --accent, --surface, --ink, --bg, --muted, --card-shadow,
   --radius-card), de modo que funciona idéntico en "pacifico-noche"
   (noche) y "pacifico" (día) vía el toggle existente.

   Estructura HTML esperada:
     <div class="mt-carrusel" data-carrusel data-autoplay="6000"
          aria-roledescription="carousel" aria-label="…" aria-live="polite">
       <div class="mt-carrusel__viewport">
         <ul class="mt-carrusel__track">
           <li class="mt-carrusel__slide" role="group"
               aria-roledescription="slide" aria-label="1 de 4">
             <figure class="mt-carrusel__fig">
               <img …>
               <figcaption class="mt-carrusel__cap">…</figcaption>
             </figure>
           </li> …
         </ul>
       </div>
       <button class="mt-carrusel__btn mt-carrusel__btn--prev" …>…</button>
       <button class="mt-carrusel__btn mt-carrusel__btn--next" …>…</button>
       <div class="mt-carrusel__dots" role="tablist">…</div>
     </div>

   Clases prefijadas con `mt-carrusel` → cero colisión con base/temas/nav.
   =========================================================== */

.mt-carrusel{
  position:relative;
  max-width:var(--w-content, 1100px);
  margin:0 auto;
  padding:0 var(--gutter, 24px);
  /* tokens locales con fallback a los del tema activo */
  --mtc-radius:var(--radius-card, 18px);
  --mtc-shadow:var(--card-shadow, 0 16px 40px rgba(0,0,0,.12));
  --mtc-ratio:16 / 9;
}

/* viewport: recorta y redondea; las diapositivas se deslizan dentro */
.mt-carrusel__viewport{
  overflow:hidden;
  border-radius:var(--mtc-radius);
  box-shadow:var(--mtc-shadow);
  border:var(--card-border, none);
  background:var(--surface, #fff);
}

/* pista flex que se traslada con transform (animación barata, sin reflow) */
.mt-carrusel__track{
  list-style:none; margin:0; padding:0;
  display:flex;
  transition:transform .5s cubic-bezier(.5,.05,.2,1);
  will-change:transform;
}

/* cada slide ocupa el 100% del viewport */
.mt-carrusel__slide{
  flex:0 0 100%;
  min-width:0;
  position:relative;
}

.mt-carrusel__fig{margin:0; position:relative}
.mt-carrusel__fig img{
  display:block; width:100%;
  aspect-ratio:var(--mtc-ratio);
  object-fit:cover;
  background:var(--bg, #0B2740);
}

/* leyenda flotante sobre un velo inferior (legible en ambos modos) */
.mt-carrusel__cap{
  position:absolute; left:0; right:0; bottom:0;
  margin:0; padding:clamp(28px,5vw,46px) clamp(16px,3vw,28px) clamp(14px,2.2vw,20px);
  color:#fff; font-size:clamp(13px,1.8vw,15.5px); line-height:1.35;
  font-family:var(--font-body, system-ui, sans-serif);
  background:linear-gradient(180deg, rgba(6,20,34,0) 0%, rgba(6,20,34,.72) 70%, rgba(6,20,34,.86) 100%);
  text-shadow:0 1px 6px rgba(2,12,24,.8);
  pointer-events:none;
}

/* ---------- Botones prev/next ---------- */
.mt-carrusel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(40px,5vw,52px); height:clamp(40px,5vw,52px);
  border:0; border-radius:999px; cursor:pointer;
  background:var(--surface, #fff); color:var(--brand, #1B6E8C);
  box-shadow:0 8px 22px rgba(3,14,26,.34), 0 2px 6px rgba(3,14,26,.24);
  transition:transform .16s ease, filter .16s ease, box-shadow .2s ease;
}
.mt-carrusel__btn svg{width:46%; height:46%; pointer-events:none}
.mt-carrusel__btn--prev{left:calc(var(--gutter, 24px) + clamp(8px,1.5vw,16px))}
.mt-carrusel__btn--next{right:calc(var(--gutter, 24px) + clamp(8px,1.5vw,16px))}
.mt-carrusel__btn:hover{transform:translateY(-50%) scale(1.07); filter:brightness(1.04)}
.mt-carrusel__btn:active{transform:translateY(-50%) scale(.97)}
.mt-carrusel__btn[disabled]{opacity:.45; cursor:default; box-shadow:none}

/* ---------- Dots ---------- */
.mt-carrusel__dots{
  display:flex; justify-content:center; gap:9px;
  margin-top:clamp(14px,2vw,18px);
}
.mt-carrusel__dot{
  width:11px; height:11px; padding:0; border:0; cursor:pointer;
  border-radius:999px;
  background:color-mix(in srgb, var(--ink, #16131f) 28%, transparent);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mt-carrusel__dot:hover{background:color-mix(in srgb, var(--brand, #1B6E8C) 60%, transparent)}
.mt-carrusel__dot[aria-selected="true"]{
  background:var(--accent, var(--brand, #1B6E8C));
  transform:scale(1.18);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, #1B6E8C) 26%, transparent);
}

/* ---------- Estado base SIN JS / sin clase activa ----------
   Si el JS no corre, el viewport hace scroll horizontal nativo
   (cada slide a scroll-snap) — sigue siendo usable y accesible. */
.mt-carrusel:not(.is-ready) .mt-carrusel__viewport{
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.mt-carrusel:not(.is-ready) .mt-carrusel__slide{scroll-snap-align:center}
.mt-carrusel:not(.is-ready) .mt-carrusel__btn,
.mt-carrusel:not(.is-ready) .mt-carrusel__dots{display:none}

/* ---------- Variante FULL-WIDTH (carruseles de fotos a todo el ancho, como el sitio 2025) ---------- */
.mt-carrusel--full{max-width:none; padding:0; --mtc-radius:0; --mtc-ratio:5 / 2}
.mt-carrusel--full .mt-carrusel__viewport{box-shadow:none; border:0; border-radius:0}
.mt-carrusel--full .mt-carrusel__btn--prev{left:clamp(10px,2vw,30px)}
.mt-carrusel--full .mt-carrusel__btn--next{right:clamp(10px,2vw,30px)}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .mt-carrusel--full{--mtc-ratio:3 / 2}
}
@media (max-width:560px){
  .mt-carrusel{--mtc-ratio:4 / 5}      /* más vertical en móvil = foto protagonista */
  .mt-carrusel--full{--mtc-ratio:4 / 5}
}

/* ---------- Movimiento reducido ----------
   Sin transición de deslizamiento; el JS además desactiva el autoplay. */
@media (prefers-reduced-motion: reduce){
  .mt-carrusel__track{transition:none}
}

/* ===== theme-pacifico.css ===== */
/* ===================================================================
   TEMA · PUERTO PACÍFICO ("pacifico")
   Guía de viaje premium del Pacífico Sur + carnaval porteño.
   Claro, aireado, editorial: display Outfit 900 sobre arena cálida.
   Paleta: Arena #FAF6ED · Abismo #0B2740 · Océano #1B6E8C
           Espuma #2EC4B6 · Coral #FF6F59 · Sol #FFC53D
   Firma: olas océano/turquesa entre secciones · gaviotas en page-hero
          · cerros con casitas en turquesa sobre el footer · soles
          como bullets de fecha · una sola luz (sombras azuladas)
          · olas line-art japonesas (trazo blanco) rompiendo abajo a la
            izquierda en sec-body y footer.
   Video hero: fondo-oceano.mp4 — tinta azul brillante con espuma blanca.
   =================================================================== */
body[data-theme="pacifico"]{
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --display-weight:900; --display-transform:none; --display-tracking:-.015em;

  --bg:#FAF6ED; --ink:#0B2740; --muted:#4D6079; --surface:#FFFFFF;
  --marca-filter:brightness(0) saturate(100%) invert(13%) sepia(42%) saturate(1500%) hue-rotate(178deg) brightness(94%) contrast(96%); /* entinta el SVG blanco de marca a abismo */
  --cream:#FAF6ED;
  --brand:#1B6E8C; --on-brand:#FFFFFF;
  --accent:#1B6E8C; --accent2:#FFC53D;
  --btn-bg:#FF6F59; --btn-on:#33110B; --btn-border:none;

  --hero-bg:#0B2740; --hero-ink:#FFFFFF;
  /* Video nuevo: tinta azul océano BRILLANTE con espuma blanca.
     El degradado superior se aligera (el video ya es luminoso) y el trabajo
     de legibilidad lo hace un velo radial abismo más firme tras la marca
     blanca (izquierda-baja), más la franja navy inferior que sigue anclando
     la multitud/costura. */
  --hero-overlay:
    radial-gradient(860px 580px at 22% 60%, rgba(6,28,48,.46), rgba(6,28,48,.16) 52%, transparent 72%),
    linear-gradient(180deg, rgba(11,39,64,.14) 0%, rgba(11,39,64,.04) 32%,
                    rgba(11,39,64,.16) 58%, rgba(11,39,64,.62) 100%);
  /* doble sombra: halo corto que recorta el blanco contra la espuma del video
     + caída larga que da profundidad */
  --hero-logo-filter:drop-shadow(0 2px 9px rgba(3,16,30,.50)) drop-shadow(0 12px 36px rgba(3,16,30,.60));
  --seam-blend:normal; --seam-opacity:1;
  --costura-filter:drop-shadow(0 14px 32px rgba(6,28,48,.36));

  --sec2-bg:#0B2740; --sec2-ink:#EFF7F9;
  /* el video océano luminoso pide algo más de tinta a media altura para
     que el bloque de texto claro conserve contraste sin apagar el azul */
  --sec2-overlay:linear-gradient(180deg, rgba(11,39,64,.62) 0%, rgba(11,39,64,.42) 46%, rgba(11,39,64,.60) 100%);

  --pink:#2EC4B6; --on-pink:#063A34;
  --footer-bg:#0B2740; --footer-ink:#C9D6E4;
  --footer-logo-filter:none;

  --header-bg:rgba(250,246,237,.92); --header-ink:#0B2740;
  --header-border:1px solid rgba(11,39,64,.08);

  --radius-card:20px; --radius-pill:999px;
  --card-border:1px solid rgba(11,39,64,.08);
  --card-shadow:0 16px 40px rgba(11,39,64,.08);
}

/* ---------- Detalles globales: selección, foco accesible ---------- */
body[data-theme="pacifico"] ::selection{background:#FFC53D; color:#0B2740}
body[data-theme="pacifico"] a:focus-visible,
body[data-theme="pacifico"] button:focus-visible,
body[data-theme="pacifico"] input:focus-visible,
body[data-theme="pacifico"] textarea:focus-visible,
body[data-theme="pacifico"] select:focus-visible{
  outline:3px solid #1B6E8C; outline-offset:2px; /* Océano sólido = 5.33:1 sobre arena (antes .55 = 2.31:1, fallaba WCAG 3:1) */
}

/* ---------- HEADER: arena translúcido, logo blanco entintado a abismo ---------- */
body[data-theme="pacifico"] .nav{box-shadow:0 8px 30px rgba(11,39,64,.06)}
body[data-theme="pacifico"] .nav .brand img{
  /* el SVG de marca es blanco puro: se entinta a azul abismo para el header claro */
  filter:var(--marca-filter);
}
body[data-theme="pacifico"] .nav .menu a{transition:color .18s ease}
body[data-theme="pacifico"] .nav .menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2.5px; border-radius:99px;
  background:linear-gradient(90deg,#FF6F59,#FFC53D);
  transform:scaleX(0); transform-origin:left center; transition:transform .22s ease;
}
body[data-theme="pacifico"] .nav .menu a:hover::after{transform:scaleX(1)}
body[data-theme="pacifico"] .btn-form{box-shadow:0 6px 16px rgba(255,111,89,.28)}

/* ---------- BOTONES: pill coral con sombra coral suave ---------- */
body[data-theme="pacifico"] .btn{
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(255,111,89,.30);
  transition:transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
body[data-theme="pacifico"] .btn:hover{box-shadow:0 16px 34px rgba(255,111,89,.40)}
body[data-theme="pacifico"] .btn:active{transform:translateY(0); box-shadow:0 5px 14px rgba(255,111,89,.30)}
body[data-theme="pacifico"] .btn-light{box-shadow:0 10px 26px rgba(11,39,64,.16)}
body[data-theme="pacifico"] .btn-light:hover{box-shadow:0 16px 34px rgba(11,39,64,.22)}

/* ---------- Títulos de sección: cresta de espuma como subrayado ---------- */
body[data-theme="pacifico"] .sec-titulo::after{
  content:""; display:block; width:112px; height:10px; margin:16px auto 0;
  background:linear-gradient(90deg,#1B6E8C,#2EC4B6);
  -webkit-mask-image:var(--mt-ola-crestas); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola-crestas); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}

/* ---------- SEC-BODY (video océano): ola de arena cierra la sección ---------- */
body[data-theme="pacifico"] .sec-body::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:3; pointer-events:none;
  height:clamp(26px,4vw,46px); background:#FAF6ED;
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
/* olas line-art (trazo blanco) sobre el velo navy y bajo el texto:
   se cuelgan del ::after del overlay (z2) para quedar SIEMPRE entre el
   velo y el contenido (z3); densas abajo-izquierda, lejos del bloque
   de texto centrado, asomando tras la ola de arena que cierra */
body[data-theme="pacifico"] .sec-body-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left bottom / 980px auto no-repeat;
  opacity:.18;
}

/* ---------- PROGRAMA 2026: arena→blanco + ola océano/turquesa al pie ---------- */
body[data-theme="pacifico"] .sec-programa-2026{
  position:relative;
  background:linear-gradient(180deg,#FAF6ED 0%,#FFFFFF 100%);
  padding-bottom:clamp(104px,13vw,160px);
}
body[data-theme="pacifico"] .sec-programa-2026::after{
  content:""; position:absolute; left:0; right:0; bottom:0; pointer-events:none;
  height:clamp(30px,4.5vw,48px);
  background:linear-gradient(90deg,#1B6E8C 0%,#2EC4B6 45%,#1B6E8C 100%);
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
body[data-theme="pacifico"] .dia{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
body[data-theme="pacifico"] .dia:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 54px rgba(11,39,64,.13);
  border-color:rgba(46,196,182,.45);
}
/* sol pequeñito como bullet de la fecha */
body[data-theme="pacifico"] .dia .fecha::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  background:#FFC53D;
  -webkit-mask-image:var(--mt-sol); -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:var(--mt-sol); mask-repeat:no-repeat; mask-size:100% 100%;
}

/* ---------- PROGRAMA + GALERÍA: blanco→arena ---------- */
body[data-theme="pacifico"] .sec-programa{background:linear-gradient(180deg,#FFFFFF 0%,#FAF6ED 100%)}
body[data-theme="pacifico"] .gallery img{transition:transform .3s ease, box-shadow .3s ease}
body[data-theme="pacifico"] .gallery img:hover{transform:translateY(-4px); box-shadow:0 22px 48px rgba(11,39,64,.16)}

/* ---------- FIESTAS: banderines corales colgando de la costura superior ---------- */
body[data-theme="pacifico"] .sec-fiestas{
  position:relative;
  background:linear-gradient(180deg,#FAF6ED 0%,#FFFFFF 100%);
}
body[data-theme="pacifico"] .sec-fiestas::before{
  content:""; position:absolute; top:-1px; left:0; right:0; pointer-events:none;
  height:clamp(34px,4.5vw,48px); background:#FF6F59;
  -webkit-mask-image:var(--mt-banderines); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left top;
  mask-image:var(--mt-banderines); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left top;
}
body[data-theme="pacifico"] .party{transition:transform .25s ease, box-shadow .25s ease}
body[data-theme="pacifico"] .party:hover{transform:translateY(-5px); box-shadow:0 28px 58px rgba(11,39,64,.15)}
body[data-theme="pacifico"] .party img{transition:transform .5s ease}
body[data-theme="pacifico"] .party:hover img{transform:scale(1.045)}

/* ---------- TIENDA: blanco→arena, CTA abismo→océano, pulsera espuma ---------- */
body[data-theme="pacifico"] .sec-tienda{background:linear-gradient(180deg,#FFFFFF 0%,#FAF6ED 100%)}
body[data-theme="pacifico"] .tienda-cta{
  background:linear-gradient(160deg,#0B2740 0%,#15607B 100%);
  box-shadow:var(--card-shadow);
}
body[data-theme="pacifico"] .pulsera{
  background:linear-gradient(165deg,#D9F7F2 0%,#7FE0D5 55%,#2EC4B6 100%);
  border:1px solid rgba(11,39,64,.08);
  box-shadow:var(--card-shadow);
}
body[data-theme="pacifico"] .cat{transition:transform .25s ease, box-shadow .25s ease}
body[data-theme="pacifico"] .cat:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(11,39,64,.20)}

/* ---------- STRIPS: océano profundo; turismo con mordidas de ola arena ---------- */
body[data-theme="pacifico"] .strip{background:linear-gradient(150deg,#14536C 0%,#1B6E8C 55%,#1E7E97 100%)}
body[data-theme="pacifico"] .strip-turismo{position:relative; overflow:hidden}
body[data-theme="pacifico"] .strip-turismo .container{
  padding-top:clamp(58px,8vw,84px); padding-bottom:clamp(58px,8vw,84px);
}
body[data-theme="pacifico"] .strip-turismo::before{
  content:""; position:absolute; top:-1px; left:0; right:0; pointer-events:none;
  height:clamp(20px,3vw,36px); background:#FAF6ED; transform:scaleY(-1);
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
body[data-theme="pacifico"] .strip-turismo::after{
  content:""; position:absolute; bottom:-1px; left:0; right:0; pointer-events:none;
  height:clamp(20px,3vw,36px); background:#FAF6ED;
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
/* strip contacto: tambor océano como emblema sobre el título */
body[data-theme="pacifico"] .strip-contacto .sec-titulo::before{
  content:""; display:block; width:56px; height:56px; margin:0 auto 14px;
  background:#FF6F59;
  -webkit-mask-image:var(--mt-tambor); -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:var(--mt-tambor); mask-repeat:no-repeat; mask-size:100% 100%;
}

/* ---------- PAGE-HERO interior: abismo→océano, espuma y gaviotas ---------- */
body[data-theme="pacifico"] .page-hero{
  background:
    radial-gradient(900px 460px at 88% -20%, rgba(46,196,182,.28), transparent 62%),
    radial-gradient(700px 420px at -10% 110%, rgba(255,111,89,.18), transparent 60%),
    linear-gradient(165deg,#0B2740 0%,#0E3A55 52%,#15607B 100%);
}
body[data-theme="pacifico"] .page-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:1; pointer-events:none;
  /* separador = la MISMA ola suave de la noche (--mt-ola), en tono claro día (antes festoneado --mt-ola-crestas, menos pro) */
  height:clamp(26px,4vw,46px); background:#FAF6ED;
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
/* gaviotas de referencia (gaviota-blanca + bandada) RETIRADAS del header DÍA (pedido cliente):
   el recurso gráfico de cada interior es el inline por página (oso · gaviota-lila · personajes · barco · figura) */
body[data-theme="pacifico"] .page-hero::after{content:none}
body[data-theme="pacifico"] .page-hero .breadcrumb{color:#FFC53D; opacity:1; letter-spacing:.16em}

/* ---------- Tiendita / Turismo / Historia: cards y chips pulidos ---------- */
body[data-theme="pacifico"] .chip-cat{
  box-shadow:0 4px 14px rgba(11,39,64,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
body[data-theme="pacifico"] .chip-cat:hover{
  transform:translateY(-2px); border-color:rgba(46,196,182,.6);
  box-shadow:0 8px 20px rgba(11,39,64,.10);
}
body[data-theme="pacifico"] .chip-cat.active{box-shadow:0 8px 20px rgba(255,111,89,.35)}
body[data-theme="pacifico"] .prod,
body[data-theme="pacifico"] .pack{transition:transform .25s ease, box-shadow .25s ease}
body[data-theme="pacifico"] .prod:hover,
body[data-theme="pacifico"] .pack:hover{transform:translateY(-4px); box-shadow:0 26px 54px rgba(11,39,64,.13)}
body[data-theme="pacifico"] .afiches img{transition:transform .3s ease, box-shadow .3s ease}
body[data-theme="pacifico"] .afiches img:hover{transform:translateY(-4px) scale(1.015); box-shadow:0 24px 48px rgba(11,39,64,.18)}

/* ---------- Formulario contacto ---------- */
body[data-theme="pacifico"] .form-card input,
body[data-theme="pacifico"] .form-card textarea,
body[data-theme="pacifico"] .form-card select{
  border:1.5px solid rgba(11,39,64,.16); background:#FCFAF4;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[data-theme="pacifico"] .form-card input:focus,
body[data-theme="pacifico"] .form-card textarea:focus,
body[data-theme="pacifico"] .form-card select:focus{
  border-color:#1B6E8C; box-shadow:0 0 0 4px rgba(46,196,182,.18);
}

/* ---------- FOOTER: marejada de olas en capas (insumo) fundiendo al abismo ---------- */
body[data-theme="pacifico"] .footer{position:relative; padding:0 0 72px}
body[data-theme="pacifico"] .footer::before{
  content:""; display:block; pointer-events:none;
  height:clamp(110px,14vw,190px); margin-bottom:clamp(34px,5vw,54px);
  background:
    /* fundido suave hacia el footer (antes saltaba a navy .90 brusco) */
    linear-gradient(180deg, rgba(11,39,64,0) 8%, rgba(11,39,64,.52) 80%, #0B2740 100%),
    url(../img/sep-olas-oscuras.webp) center / cover no-repeat;
  -webkit-mask-image:var(--mt-ola), linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x, no-repeat;
  -webkit-mask-size:auto 24px, 100% calc(100% - 23px);
  -webkit-mask-position:left top, 0 23px;
  mask-image:var(--mt-ola), linear-gradient(#000,#000);
  mask-repeat:repeat-x, no-repeat;
  mask-size:auto 24px, 100% calc(100% - 23px);
  mask-position:left top, 0 23px;
}
/* olas line-art blancas, casi marca de agua, rompiendo en la esquina
   inferior-izquierda del abismo (eco de las olas del sec-body) */
body[data-theme="pacifico"] .footer::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left bottom / 820px auto no-repeat;
  opacity:.11;
}
body[data-theme="pacifico"] .footer .container{position:relative; z-index:1}
/* los iconos sociales del footer son negros: se pasan a blanco sobre el abismo */
body[data-theme="pacifico"] .foot-social img{filter:brightness(0) invert(1); opacity:.92}
body[data-theme="pacifico"] .foot-social img:hover{opacity:1}
body[data-theme="pacifico"] .foot-logos img{background:#fff; border-radius:10px; padding:6px 9px}
body[data-theme="pacifico"] .foot-credit{opacity:.65}
body[data-theme="pacifico"] .foot-credit img{filter:brightness(0) invert(1)}

/* ---------- Responsive: decoración más liviana en móvil ---------- */
@media (max-width:860px){
  body[data-theme="pacifico"] .sec-programa-2026{padding-bottom:clamp(88px,16vw,120px)}
  body[data-theme="pacifico"] .strip-turismo .container{padding-top:64px; padding-bottom:64px}
  body[data-theme="pacifico"] .sec-body-overlay::after{background-size:640px auto; opacity:.15}
  body[data-theme="pacifico"] .footer::after{background-size:540px auto}
  /* (sin gaviotas en el header día → ya no hay ::after que reposicionar en móvil) */
}
@media (max-width:560px){
  body[data-theme="pacifico"] .sec-titulo::after{width:92px; height:9px; margin-top:12px}
  body[data-theme="pacifico"] .strip-contacto .sec-titulo::before{width:46px; height:46px}
}
/* ---------- v2.5 · Enriquecimiento del hero (insumos Profundización) ---------- */
/* olas line-art rolando al pie del hero, bajo el velo (sutiles) */
body[data-theme="pacifico"] .hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -50px bottom -40px / 980px auto no-repeat;
  opacity:.16;
}
/* calidez de sol tras la marca + gaviotas lejanas (sobre el velo, bajo el contenido) */
body[data-theme="pacifico"] .hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    url(../img/sol-amarillo.webp) right clamp(8px,2.5vw,46px) top clamp(14px,3vw,44px) / clamp(160px,17vw,270px) auto no-repeat,
    radial-gradient(620px 460px at 50% 40%, rgba(255,197,61,.16), rgba(255,111,89,.06) 55%, transparent 72%),
    radial-gradient(420px 380px at 84% 22%, rgba(255,197,61,.22), transparent 70%);
}
@media (max-width:860px){
  body[data-theme="pacifico"] .hero::before{background-size:640px auto; opacity:.12}
}

/* ===================================================================
   v2.6 · TEXTURA EN SECCIONES CLARAS (solo CSS, cero peso nuevo)
   La mitad inferior (arena/blanco) se sentía plana: se añade
   1) grano de papel/arena casi imperceptible (dos retículas de puntos
      navy desfasadas, alpha ≤.03) detrás de los degradados existentes;
   2) 4 apariciones de motivos mask en tinta navy/espuma a opacidad
      .07–.12, siempre en z-index:-1 con isolation para que NUNCA
      tapen texto ni cards;
   3) olas line-art (PNG ya cacheado del hero/footer) entintadas a
      navy con el mismo filter de la marca, como marca de agua.
   Texto: el grano altera el fondo < 1% de luminancia → AA intacto.
   =================================================================== */

/* ---- 1 · Grano papel/arena sobre los degradados de cada sección ---- */
/* arena→blanco */
body[data-theme="pacifico"] .sec-programa-2026,
body[data-theme="pacifico"] .sec-fiestas{
  background-image:
    radial-gradient(rgba(11,39,64,.030) 1px, transparent 1.15px),
    radial-gradient(rgba(11,39,64,.022) 1px, transparent 1.15px),
    linear-gradient(180deg,#FAF6ED 0%,#FFFFFF 100%);
  background-size:19px 19px, 29px 29px, 100% 100%;
  background-position:0 0, 10px 14px, 0 0;
  background-repeat:repeat, repeat, no-repeat;
}
/* blanco→arena */
body[data-theme="pacifico"] .sec-programa,
body[data-theme="pacifico"] .sec-tienda{
  background-image:
    radial-gradient(rgba(11,39,64,.030) 1px, transparent 1.15px),
    radial-gradient(rgba(11,39,64,.022) 1px, transparent 1.15px),
    linear-gradient(180deg,#FFFFFF 0%,#FAF6ED 100%);
  background-size:19px 19px, 29px 29px, 100% 100%;
  background-position:0 0, 10px 14px, 0 0;
  background-repeat:repeat, repeat, no-repeat;
}
/* contacto: arena plana + grano + calidez de sol muy tenue tras el título */
body[data-theme="pacifico"] .strip-contacto{
  background-image:
    radial-gradient(rgba(11,39,64,.030) 1px, transparent 1.15px),
    radial-gradient(rgba(11,39,64,.022) 1px, transparent 1.15px),
    radial-gradient(760px 340px at 50% 28%, rgba(255,197,61,.08), transparent 70%),
    linear-gradient(180deg,#FAF6ED 0%,#FAF6ED 100%);
  background-size:19px 19px, 29px 29px, 100% 100%, 100% 100%;
  background-position:0 0, 10px 14px, 0 0, 0 0;
  background-repeat:repeat, repeat, no-repeat, no-repeat;
}

/* ---- 2 · Motivos mask en tinta navy/espuma (esquinas, z-index:-1) ---- */
/* Programa 2026: pez nadando a la izquierda del título, tinta abismo casi
   marca de agua. (Reescrito en v2.9: los clamp() truncados del bloque
   original dejaban paréntesis sin cerrar y el parser CSS descartaba TODO
   el archivo desde aquí hasta el final — nada de v2.6 tardío ni v2.8
   llegó a renderizar. Las "gaviotas a la derecha" pasan a ser la gaviota
   acuarela del bloque v2.9.) */
body[data-theme="pacifico"] .sec-programa-2026{isolation:isolate}
/* gaviotas-bandada a la izquierda del título REMOVIDAS (se veían cortadas y grises) */
body[data-theme="pacifico"] .sec-programa-2026::before{content:none;
}
/* Tienda: el velero-mask de la esquina se retiró en v2.9 — el velero
   protagonista vive en el strip turismo justo debajo; las esquinas de la
   tienda las ocupan ahora caracola y concha acuarela (bloque v2.9). */
body[data-theme="pacifico"] .sec-tienda{position:relative; isolation:isolate}
/* Contacto: cenefa de crestas espuma recorriendo el borde superior */
body[data-theme="pacifico"] .strip-contacto{position:relative; isolation:isolate}
body[data-theme="pacifico"] .strip-contacto::after{
  content:""; position:absolute; left:0; right:0; top:clamp(16px,2.6vw,28px); z-index:-1; pointer-events:none;
  height:12px;
  background:linear-gradient(90deg,#1B6E8C,#2EC4B6 50%,#1B6E8C);
  opacity:.12;
  -webkit-mask-image:var(--mt-ola-crestas); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola-crestas); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}

/* ---- 3 · Olas line-art entintadas a navy como marca de agua ---- */
/* Programa+galería: rompen en la esquina inferior izquierda, detrás de
   la card (mismo PNG cacheado del hero; filter = el de la marca navy) */
body[data-theme="pacifico"] .sec-programa{position:relative; isolation:isolate}
body[data-theme="pacifico"] .sec-programa::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -40px bottom -36px / 860px auto no-repeat;
  filter:var(--marca-filter);
  opacity:.07;
}

/* ---- Móvil: decoración más liviana (el grano es barato y se queda) ---- */
@media (max-width:860px){
  body[data-theme="pacifico"] .sec-programa-2026::before{display:none}
  body[data-theme="pacifico"] .sec-programa::before{background-size:520px auto; opacity:.05}
  body[data-theme="pacifico"] .strip-contacto::after{height:9px; top:12px}
}

/* ---------- v2.8 · velero del strip turismo: VISIBLE (no tras el botón) ---------- */
body[data-theme="pacifico"] .strip-velero{
  position:absolute; right:clamp(140px,16vw,250px); bottom:8px;
  height:calc(100% - 18px); width:auto;
  opacity:.55; pointer-events:none; filter:brightness(2.2) saturate(.5);
}
@media (max-width:860px){
  body[data-theme="pacifico"] .strip-velero{display:none}
}



/* ===================================================================
   DESCENSO OCEÁNICO CONTINUO — MODO DÍA ("pacifico")  ·  PRIMER BORRADOR
   Override que se enlaza DESPUÉS de theme-pacifico.css.

   Porta la arquitectura del canon noche (.oceanflow lleva el degradado +
   la textura; las secciones van transparentes y FLOTAN encima) pero en
   PALETA CLARA: la inmersión NUNCA se oscurece (restricción del cliente:
   "manteniendo tono día, sin oscurecer"). El único ancla oscura es el
   footer navy ya existente; el descenso baja a un tono océano CLARO-MEDIO
   (#A9CAD6 ≈ celeste apagado) que se encuentra limpio con ese footer.

   Paleta: Arena #FAF6ED · blanco #FFF · Océano #1B6E8C · Espuma #2EC4B6
           Celeste #38D1FF · Coral #FF6F59 · Sol #FFC53D · Abismo #0B2740

   Paradas del descenso (todas CLARAS, luminancia alta de arriba a abajo):
       superficie  #EAF1F4 ─┐ Programa 2026 (pálido espuma de mar)
                   #E2EBEF ─┤ galería       (apenas más fresco)
                   #D4E2E8 ─┤ Fiestas        (entra un soplo de agua)
                   #C2D8E1 ─┤ Tienda          (celeste/espuma suave)
       luz-media   #A9CAD6 ─┘ → strips → contacto → (footer navy = ancla)
   Todas las capas de textura atadas a --tex (0.6) → un solo dial.
   Cero raster nuevo: reutiliza olas-lineart.webp (ya cacheado).
   =================================================================== */

/* ---------------------------------------------------------------------
   0 · EL WRAPPER lleva el degradado continuo CLARO. isolation:izolate
   crea contexto de apilado propio para que las capas de textura (z:0)
   queden SIEMPRE bajo las secciones (z:1) sin tocar el resto del DOM.
   El degradado se mantiene claro de punta a punta: pálido espuma →
   celeste/espuma medio → océano claro-medio. NUNCA cae al abismo.
   Los radiales soft-light solo aportan profundidad lumínica (claros
   arriba, una sombra océano MUY tenue abajo-derecha) sin oscurecer.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oceanflow{
  position:relative; isolation:isolate;
  --tex:0.6;   /* intensidad global (subtle .6 · medio 1 · marcado 1.4) */
  background:
    radial-gradient(120% 42% at 50% 4%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(95% 34% at 14% 26%, rgba(46,196,182,.10), transparent 58%),
    radial-gradient(150% 90% at 84% 88%, rgba(27,110,140,.12), transparent 92%),
    linear-gradient(180deg,
      #EAF1F4 0%, #E6EDF1 9%, #E2EBEF 20%, #D4E2E8 40%,
      #C2D8E1 62%, #B5D0DB 82%, #A9CAD6 100%);
  background-blend-mode:soft-light, soft-light, soft-light, normal;
}

/* ---------------------------------------------------------------------
   1 · LAS SECCIONES FLOTAN: transparentes, sin su fondo discreto propio.
   Esto neutraliza de un golpe los degradados arena/blanco Y el grano
   navy por-sección de theme-pacifico.css (van en background-image de las
   propias .sec-*), recuperando la continuidad.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oceanflow > .sec,
body[data-theme="pacifico"] .oceanflow > .strip{
  background:transparent !important; background-image:none !important;
  position:relative; z-index:1;
}

/* ---------------------------------------------------------------------
   2 · DESACTIVAR las decoraciones discretas que CORTAN la continuidad.
   Todo scope a [data-theme="pacifico"]; KEEP banderines y tambor.
   --------------------------------------------------------------------- */
/* ola océano al pie de Programa 2026: era el "empieza el mar y recae" */
body[data-theme="pacifico"] .sec-programa-2026::after{content:none}
/* olas arena del strip-turismo (crestas duras arriba y abajo): la isla
   se disuelve por degradado suave (ver bloque 4), sin bandas duras */
body[data-theme="pacifico"] .strip-turismo::before,
body[data-theme="pacifico"] .strip-turismo::after{content:none}
/* cenefa de crestas espuma del contacto (franja de color que cortaría
   el agua continua) — el contacto cose por color con el degradado */
body[data-theme="pacifico"] .strip-contacto::after{content:none}
/* marca de agua line-art navy de la galería: se reexpresa centralizada
   en .ot-net::before del descenso; aquí estorbaría duplicada */
body[data-theme="pacifico"] .sec-programa::before{content:none}
/* nota: .sec-fiestas::before (banderines) y
   .strip-contacto .sec-titulo::before (tambor) NO se tocan → permanecen */

/* ---------------------------------------------------------------------
   3 · CONTACTO transparente flota; su título oscuro sigue legible sobre
   el tono claro-medio. (El strip-contacto es .sec, ya cubierto por el
   bloque 1, pero su background-image de grano+sol se anula ahí también.)
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   4 · "VIVE EL CARNAVAL" — ISLA-ACENTO. No va transparente: conserva su
   banda océano/celeste (versión DÍA, clara y luminosa, espuma→océano),
   y sus bordes superior e inferior se DISUELVEN por degradado suave en
   el descenso (NADA de crestas duras — lección del canon noche).
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oceanflow > .strip-turismo{
  position:relative; overflow:hidden;
  /* isla clara: espuma alta → océano medio, luminosa de día */
  background:linear-gradient(150deg,#2EC4B6 0%,#3FB8C9 40%,#1E86A6 74%,#1B6E8C 100%) !important;
}
/* DISOLUCIÓN superior: el tono del agua de arriba (#C2D8E1, donde acaba
   Tienda) baja sobre la cresta espuma de la isla → entra sin costura */
body[data-theme="pacifico"] .strip-turismo::before{
  content:""; position:absolute; top:0; left:0; right:0; z-index:0; pointer-events:none;
  height:clamp(56px,8vw,104px);
  background:linear-gradient(180deg, #C2D8E1 0%, rgba(178,208,219,.55) 46%, transparent 100%);
}
/* DISOLUCIÓN inferior: la isla muere en el tono del agua de abajo
   (#A9CAD6, donde sigue el contacto) → sale sin costura */
body[data-theme="pacifico"] .strip-turismo::after{
  content:""; position:absolute; bottom:0; left:0; right:0; z-index:0; pointer-events:none;
  height:clamp(56px,8vw,104px);
  background:linear-gradient(180deg, transparent 0%, rgba(169,202,214,.55) 54%, #A9CAD6 100%);
}
/* el contenido de la isla queda por encima de las dos disoluciones */
body[data-theme="pacifico"] .strip-turismo .container{position:relative; z-index:1}

/* ===================================================================
   TEXTURA SOBRE CLARO — el reto. En fondo claro, las capas blancas en
   `screen` son invisibles: aquí la textura se reexpresa con TINTES
   FRÍOS (océano/navy) en blend `soft-light`/`multiply` a baja opacidad,
   para leerse como las SOMBRAS-hueco entre la luz del agua, SIN bajar la
   luminancia general. Todo CSS/SVG inline, atado a --tex, z:0, bajo las
   secciones (z:1).
   =================================================================== */

/* ---------------------------------------------------------------------
   5 · SUPERFICIE — godrays cálidos MUY tenues + cáusticas frías reales.
   Reemplaza el papel de .oceanflow::before del canon, pero invertido:
   en vez de hebras de luz BLANCA (invisibles sobre claro), las cáusticas
   son filamentos NAVY/OCÉANO via feTurbulence umbralizado, en `multiply`
   a baja opacidad → leen como las grietas de sombra entre el destello del
   agua. Brillan arriba y mueren a media agua (mask que termina ~52%, bien
   por encima de cualquier juntura → sin banda).
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oceanflow::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* godrays: un velo de sol cálido apenas insinuado (NO oscurece) */
    conic-gradient(from 179deg at 26% -10%, transparent 0deg, rgba(255,255,255,.30) 2.6deg, transparent 5.4deg),
    conic-gradient(from 181deg at 50% -12%, transparent 0deg, rgba(255,250,235,.34) 3.6deg, transparent 7.2deg),
    conic-gradient(from 178deg at 72% -8%, transparent 0deg, rgba(255,255,255,.24) 2.2deg, transparent 4.8deg),
    /* cáusticas FRÍAS: turbulencia anisotrópica umbralizada a hebras navy */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='1280'><defs><filter id='cau' x='-10%25' y='-10%25' width='120%25' height='120%25'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.026' numOctaves='4' seed='11' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 0.105  0 0 0 0 0.431  0 0 0 0 0.549  1.4 0 0 0 -0.86'/></filter></defs><rect width='760' height='1280' filter='url(%23cau)'/></svg>");
  background-size:auto, auto, auto, 760px 1280px;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-position:center top, center top, center top, center top;
  /* godrays en screen (suben luz), cáusticas en multiply (bajan sombra-hueco) */
  mix-blend-mode:multiply; opacity:calc(var(--tex,0.6) * .7);
  /* la luz/cáustica muere alto (≈52%): mid-zona quieta, sin banda */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 38%,transparent 52%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 38%,transparent 52%);
}

/* ---------------------------------------------------------------------
   6 · COLUMNA — "nieve marina" FRÍA y muy sutil. Sobre claro, las motas
   blancas se pierden; aquí son motas NAVY/OCÉANO tenues (puntos de sombra
   suspendidos, no destellos), en `soft-light`. Nace a media agua y crece
   levemente hacia el fondo, donde el agua es un poco más oscura y las
   sostiene. Tamaños/opacidades irregulares para matar el patrón.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oceanflow::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='520'><g fill='%231B6E8C'><circle cx='38' cy='61' r='1.5' opacity='.40'/><circle cx='173' cy='29' r='1.0' opacity='.3'/><circle cx='291' cy='97' r='1.7' opacity='.36'/><circle cx='414' cy='52' r='1.0' opacity='.26'/><circle cx='106' cy='178' r='1.3' opacity='.34'/><circle cx='247' cy='214' r='1.0' opacity='.3'/><circle cx='372' cy='162' r='1.6' opacity='.36'/><circle cx='58' cy='301' r='1.1' opacity='.3'/><circle cx='205' cy='344' r='1.5' opacity='.36'/><circle cx='338' cy='312' r='1.0' opacity='.26'/><circle cx='447' cy='276' r='1.3' opacity='.32'/><circle cx='131' cy='431' r='1.0' opacity='.3'/><circle cx='276' cy='466' r='1.7' opacity='.36'/><circle cx='402' cy='418' r='1.0' opacity='.3'/></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='320'><g fill='%230B2740'><circle cx='22' cy='37' r='0.7' opacity='.26'/><circle cx='91' cy='18' r='0.6' opacity='.2'/><circle cx='148' cy='63' r='0.8' opacity='.24'/><circle cx='213' cy='34' r='0.6' opacity='.18'/><circle cx='271' cy='71' r='0.7' opacity='.24'/><circle cx='49' cy='121' r='0.6' opacity='.2'/><circle cx='117' cy='148' r='0.8' opacity='.24'/><circle cx='189' cy='117' r='0.6' opacity='.18'/><circle cx='256' cy='151' r='0.7' opacity='.22'/><circle cx='31' cy='214' r='0.7' opacity='.24'/><circle cx='102' cy='246' r='0.6' opacity='.18'/><circle cx='171' cy='221' r='0.8' opacity='.24'/><circle cx='239' cy='258' r='0.6' opacity='.18'/><circle cx='66' cy='299' r='0.7' opacity='.22'/><circle cx='148' cy='288' r='0.6' opacity='.18'/><circle cx='223' cy='306' r='0.7' opacity='.24'/></g></svg>");
  background-repeat:repeat, repeat;
  background-size:440px 480px, 280px 300px;
  mix-blend-mode:soft-light; opacity:calc(var(--tex,0.6) * .5);
  /* quieta arriba, presente media-baja, NO crea bump en ninguna juntura */
  -webkit-mask-image:linear-gradient(180deg,transparent 12%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.32) 70%,rgba(0,0,0,.5) 92%,rgba(0,0,0,.4) 100%);
          mask-image:linear-gradient(180deg,transparent 12%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.32) 70%,rgba(0,0,0,.5) 92%,rgba(0,0,0,.4) 100%);
}

/* ---------------------------------------------------------------------
   .oflow-tex — wrapper de posicionamiento (sin fondo propio). Sus dos
   pseudos llevan la FIRMA vectorial (line-art navy) a la profundidad.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oflow-tex{position:absolute; inset:0; z-index:0; pointer-events:none}

/* ---------------------------------------------------------------------
   7 · PROFUNDIDAD — marca de agua olas-lineart.webp ENTINTADA NAVY
   (--marca-filter), eco directo del footer::after del modo día. Rompe en
   la esquina inferior izquierda; se revela con la profundidad por máscara
   suave (sin borde duro). Cose la continuidad con el footer real.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .oflow-tex::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -30px bottom -20px / 900px auto no-repeat;
  filter:var(--marca-filter);
  opacity:calc(var(--tex,0.6) * .18);   /* ≈ .108 con --tex 0.6 → como footer .11 */
  -webkit-mask-image:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.4) 80%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.4) 80%,#000 100%);
}

/* ---------------------------------------------------------------------
   8 · CÁUSTICAS DE DETALLE — segunda red de luz orgánica, más fina y a
   otra escala que el bloque 5 → paralaje de luz. feTurbulence umbralizado
   en hebras finas, entintadas OCÉANO, en `soft-light` a baja opacidad
   para leerse como ondulación del agua (no como líneas). Muere a media
   agua (cross-fade con la firma navy que nace abajo).
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .ot-net{
  position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='900'><defs><filter id='cf' x='-8%25' y='-8%25' width='116%25' height='116%25'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.034' numOctaves='3' seed='23' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 0.105  0 0 0 0 0.431  0 0 0 0 0.549  1.7 0 0 0 -1.06'/></filter></defs><rect width='620' height='900' filter='url(%23cf)'/></svg>") repeat;
  background-size:620px 900px;
  mix-blend-mode:soft-light; opacity:calc(var(--tex,0.6) * .85);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0%,#000 10%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.18) 42%,transparent 54%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0%,#000 10%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.18) 42%,transparent 54%);
}

/* ---------------------------------------------------------------------
   9 · SUPERFICIE CLARA — firma vectorial line-art ENTINTADA NAVY arriba
   a la derecha (eco de sec-programa::before del día y de la marca del
   footer): la cima pálida del descenso no queda vacía. Solo tercio
   superior, muy tenue.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .ot-net::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) right -60px top -30px / 760px auto no-repeat;
  filter:var(--marca-filter);
  opacity:calc(var(--tex,0.6) * .13);    /* ≈ .078 — marca de agua navy */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 18%,transparent 34%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 18%,transparent 34%);
}

/* ---------------------------------------------------------------------
   10 · GRANO continuo navy (anti-banding + "diente" de papel) en TODO el
   descenso. feColorMatrix entinta el ruido a navy; `multiply` a baja
   opacidad → grano oscuro tenue que NO aclara ni oscurece de forma
   perceptible (<1% luminancia). Tile sin costura (stitchTiles).
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .ot-grain{
  position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='gr'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.043  0 0 0 0 0.153  0 0 0 0 0.251  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23gr)'/></svg>") repeat;
  background-size:200px 200px;
  mix-blend-mode:multiply; opacity:calc(var(--tex,0.6) * .28);
}

/* ---------------------------------------------------------------------
   11 · AURORAS radiales tenues — profundidad lumínica fría en las
   esquinas bajas (océano arriba-derecha + espuma abajo-izquierda),
   `soft-light`. Crecen hacia el fondo para coser el descenso con el
   footer navy. Montadas en .ot-grain::before (no tocan el bg de
   .oceanflow). Cool, no oscurece.
   --------------------------------------------------------------------- */
body[data-theme="pacifico"] .ot-grain::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 86% 72%, rgba(27,110,140,.20), transparent 68%),
    radial-gradient(54% 56% at 8% 96%, rgba(46,196,182,.18), transparent 72%),
    radial-gradient(70% 30% at 50% 100%, rgba(27,110,140,.22), transparent 70%);
  mix-blend-mode:soft-light; opacity:calc(var(--tex,0.6) * 1.0);
  -webkit-mask-image:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5) 82%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5) 82%,#000 100%);
}

/* ---------------------------------------------------------------------
   12 · Móvil: aligera las turbulencias (tiles mayores → menos coste) y
   simplifica la nieve a una sola densidad. Grano y auroras se quedan.
   --------------------------------------------------------------------- */
@media (max-width:860px){
  body[data-theme="pacifico"] .oceanflow::before{
    background-size:auto, auto, auto, 900px 1500px;
    opacity:calc(var(--tex,0.6) * .6);
  }
  body[data-theme="pacifico"] .oceanflow::after{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='320'><g fill='%231B6E8C'><circle cx='22' cy='37' r='0.9' opacity='.32'/><circle cx='91' cy='18' r='0.7' opacity='.24'/><circle cx='148' cy='63' r='1.0' opacity='.28'/><circle cx='213' cy='34' r='0.7' opacity='.22'/><circle cx='271' cy='71' r='0.9' opacity='.28'/><circle cx='49' cy='121' r='0.7' opacity='.24'/><circle cx='117' cy='148' r='1.0' opacity='.28'/><circle cx='189' cy='117' r='0.7' opacity='.22'/><circle cx='256' cy='151' r='0.9' opacity='.26'/><circle cx='31' cy='214' r='0.9' opacity='.28'/><circle cx='102' cy='246' r='0.7' opacity='.22'/><circle cx='171' cy='221' r='1.0' opacity='.28'/><circle cx='239' cy='258' r='0.7' opacity='.22'/><circle cx='66' cy='299' r='0.9' opacity='.26'/></g></svg>");
    background-size:280px 300px;
  }
  body[data-theme="pacifico"] .ot-net{
    background-size:760px 1100px;
    opacity:calc(var(--tex,0.6) * .75);
  }
  body[data-theme="pacifico"] .oflow-tex::after{background-size:640px auto}
  body[data-theme="pacifico"] .ot-net::before{background-size:560px auto}
}


/* ===================================================================
   TIENDA ENRIQUECIDA — paridad con el canon (oso + lockup + banderines)
   El lockup apoyanos.png vive en el HTML (base.css lo dimensiona).
   =================================================================== */
body[data-theme="pacifico"] .sec-tienda .cols-3{position:relative; padding-top:clamp(40px,4.8vw,60px)}
/* SEPARADOR · banderines coral→espuma colgando del tope, con área de seguridad (padding-top) */
body[data-theme="pacifico"] .sec-tienda .cols-3::before{
  content:""; position:absolute; top:clamp(-54px,-3.7vw,-34px); left:0; right:0; z-index:2; pointer-events:none;
  height:clamp(34px,4.5vw,50px);
  background:linear-gradient(90deg,#FF6F59 0%,#2EC4B6 50%,#FF6F59 100%);
  -webkit-mask-image:var(--mt-banderines); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left top;
  mask-image:var(--mt-banderines); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left top;
}
/* OSO mascota asomando desde abajo-derecha (sombra cool para el fondo claro) */
body[data-theme="pacifico"] .sec-tienda .cols-3::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  right:clamp(-42px,-2.8vw,-14px); bottom:clamp(-54px,-3.8vw,-30px);
  width:clamp(120px,13.5vw,174px); aspect-ratio:440/608;
  background:url(../img/oso-mt.webp) center bottom/contain no-repeat;
  filter:drop-shadow(0 16px 28px rgba(11,39,64,.42));
}
@media (max-width:860px){
  body[data-theme="pacifico"] .sec-tienda .cols-3::after{width:96px; right:6px; bottom:-30px}
}

/* ===== theme-pacifico-carnaval.css ===== */
/* ===================================================================
   TEMA · PACÍFICO CARNAVAL ("pacifico-carnaval") — 5ª dirección
   Puerto Pacífico cuando cae la noche de carnaval: la misma guía de
   viaje editorial (Outfit 900, arena cálida, coral, sol) pero el cielo
   del hero es el MÁRMOL FLUIDO violeta/magenta/azul de Noche de
   Carnaval (fondo-marmol.mp4 — el HTML lo intercambia por JS).
   Paleta BASE (Pacífico): Arena #FAF6ED · Abismo #0B2740
           Océano #1B6E8C · Espuma #2EC4B6 · Coral #FF6F59 · Sol #FFC53D
   Paleta NOCHE (acento):  Índigo #1A1040 · Violeta #3D2B7D
           Púrpura #6A2C91 · Magenta #FF4FA3 (MUY dosificado:
           hovers, cenefa, selección)
   Firma: los mismos motivos de Pacífico (olas, gaviotas, soles,
          velero, faro); las zonas OSCURAS (strips, page-hero,
          tienda-cta, footer, sec-body) respiran atmósfera Noche de
          Carnaval con tonos Pacífico: auroras celeste/espuma sobre
          cama violeta + cielo de confetti-estrellas, magenta solo
          chispa; el page-hero nocturno cambia gaviotas blancas por
          sol-luna + gaviota lila acuarela; sombras con tinte índigo;
          las secciones claras siguen ARENA y los botones CORAL.
   Hero actual: logo blanco centrado arriba · barco-mt.webp multicolor
          plantado sobre la costura · fechas a la izquierda · sol
          amarillo arriba a la derecha (sol dorado sobre cielo violeta:
          se queda).
   =================================================================== */
body[data-theme="pacifico-carnaval"]{
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --display-weight:900; --display-transform:none; --display-tracking:-.015em;

  --bg:#FAF6ED; --ink:#0B2740; --muted:#4D6079; --surface:#FFFFFF;
  --marca-filter:brightness(0) saturate(100%) invert(13%) sepia(42%) saturate(1500%) hue-rotate(178deg) brightness(94%) contrast(96%); /* entinta el SVG blanco de marca a abismo */
  --cream:#FAF6ED;
  --brand:#1B6E8C; --on-brand:#FFFFFF;
  --accent:#1B6E8C; --accent2:#FFC53D;
  --btn-bg:#FF6F59; --btn-on:#33110B; --btn-border:none;

  /* hero índigo noche: nada de flash claro mientras carga el video */
  --hero-bg:#1A1040; --hero-ink:#FFFFFF;
  /* Video MÁRMOL violeta/magenta/azul (no el océano claro): el video ya
     trae la paleta — no se tiñe más de violeta, se ASIENTA. Cuatro capas:
     1) viñeta radial índigo que despeja el centro para el barco
        multicolor y oscurece bordes; 2) columna oscura a la IZQUIERDA
        que sostiene las fechas blancas; 3) scrim vertical: techo firme
        para el logo blanco centrado + franja inferior que ancla la
        multitud/costura; 4) pizca azul-petróleo plana que calma la
        columna magenta del mármol (ADN robado a Noche de Carnaval). */
  --hero-overlay:
    radial-gradient(135% 100% at 50% 40%, rgba(13,8,34,0) 40%, rgba(13,8,34,.50) 100%),
    linear-gradient(90deg, rgba(13,8,34,.42) 0%, rgba(13,8,34,.18) 34%, rgba(13,8,34,0) 60%),
    linear-gradient(180deg, rgba(16,9,44,.48) 0%, rgba(16,9,44,.14) 28%, rgba(16,9,44,.06) 55%, rgba(26,16,64,.58) 86%, rgba(26,16,64,.76) 100%),
    linear-gradient(0deg, rgba(8,18,32,.14), rgba(8,18,32,.14));
  /* doble sombra índigo: halo corto que recorta el logo blanco contra
     las vetas claras del mármol + caída larga que da profundidad */
  --hero-logo-filter:drop-shadow(0 3px 10px rgba(10,5,30,.60)) drop-shadow(0 16px 44px rgba(10,5,30,.46));
  --seam-blend:normal; --seam-opacity:1;
  --costura-filter:drop-shadow(0 14px 32px rgba(16,9,44,.46)) saturate(1.04);

  /* sec-body (video real de multitud): fundido violeta-índigo en vez
     de navy puro + respiro de aurora celeste/espuma en las esquinas
     (atmósfera Noche de Carnaval, tonos Pacífico) */
  --sec2-bg:#191346; --sec2-ink:#F2EFFA;
  --sec2-overlay:
    radial-gradient(56% 70% at 88% -10%, rgba(56,209,255,.15) 0%, transparent 62%),
    radial-gradient(44% 56% at 4% 108%, rgba(46,196,182,.13) 0%, transparent 64%),
    linear-gradient(180deg, rgba(26,16,64,.62) 0%, rgba(61,43,125,.34) 46%, rgba(20,12,52,.64) 100%);

  --pink:#2EC4B6; --on-pink:#063A34;
  --footer-bg:#140D33; --footer-ink:#C9C2E4;
  --footer-logo-filter:none;

  --header-bg:rgba(250,246,237,.92); --header-ink:#0B2740;
  --header-border:1px solid rgba(26,16,64,.10);

  --radius-card:20px; --radius-pill:999px;
  --card-border:1px solid rgba(38,25,77,.10);
  --card-shadow:0 16px 40px rgba(30,18,70,.10);

  scrollbar-color:#3D2B7D #FAF6ED;
}

/* ---------- Detalles globales: selección magenta (dosis), foco espuma ---------- */
body[data-theme="pacifico-carnaval"] ::selection{background:#FF4FA3; color:#1A1040}
body[data-theme="pacifico-carnaval"] a:focus-visible,
body[data-theme="pacifico-carnaval"] button:focus-visible,
body[data-theme="pacifico-carnaval"] input:focus-visible,
body[data-theme="pacifico-carnaval"] textarea:focus-visible,
body[data-theme="pacifico-carnaval"] select:focus-visible{
  outline:3px solid #2EC4B6; outline-offset:2px; /* Espuma sólida (antes .70 alpha): foco visible sobre superficies oscuras del canon noche */
}

/* ---------- HEADER: arena translúcido, logo blanco entintado a abismo ---------- */
body[data-theme="pacifico-carnaval"] .nav{box-shadow:0 8px 30px rgba(26,16,64,.07)}
body[data-theme="pacifico-carnaval"] .nav .brand img{
  /* el SVG de marca es blanco puro: se entinta a azul abismo para el header claro */
  filter:var(--marca-filter);
}
body[data-theme="pacifico-carnaval"] .nav .menu a{transition:color .18s ease}
body[data-theme="pacifico-carnaval"] .nav .menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2.5px; border-radius:99px;
  /* subrayado coral→magenta: la chispa nocturna vive en el hover */
  background:linear-gradient(90deg,#FF6F59,#FF4FA3);
  transform:scaleX(0); transform-origin:left center; transition:transform .22s ease;
}
body[data-theme="pacifico-carnaval"] .nav .menu a:hover::after{transform:scaleX(1)}
body[data-theme="pacifico-carnaval"] .btn-form{box-shadow:0 6px 16px rgba(255,111,89,.28)}

/* ---------- BOTONES: pill coral con sombra coral suave (intactos) ---------- */
body[data-theme="pacifico-carnaval"] .btn{
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(255,111,89,.30);
  transition:transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
body[data-theme="pacifico-carnaval"] .btn:hover{box-shadow:0 16px 34px rgba(255,111,89,.40)}
body[data-theme="pacifico-carnaval"] .btn:active{transform:translateY(0); box-shadow:0 5px 14px rgba(255,111,89,.30)}
body[data-theme="pacifico-carnaval"] .btn-light{box-shadow:0 10px 26px rgba(30,18,70,.18)}
body[data-theme="pacifico-carnaval"] .btn-light:hover{box-shadow:0 16px 34px rgba(30,18,70,.24)}

/* ---------- Títulos de sección: cresta de espuma anocheciendo ---------- */
body[data-theme="pacifico-carnaval"] .sec-titulo::after{
  content:""; display:block; width:112px; height:10px; margin:16px auto 0;
  /* púrpura→océano→espuma: el atardecer entrando a la ola */
  background:linear-gradient(90deg,#6A2C91,#1B6E8C 55%,#2EC4B6);
  -webkit-mask-image:var(--mt-ola-crestas); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola-crestas); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}

/* ---------- HERO: base índigo bajo el video (cero flash claro) ---------- */
body[data-theme="pacifico-carnaval"] .hero{
  background:radial-gradient(110% 80% at 78% 110%, rgba(45,225,194,.10), transparent 55%), #1A1040;
}

/* ---------- SEC-BODY (video multitud): ola de arena cierra la sección ---------- */
body[data-theme="pacifico-carnaval"] .sec-body::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:3; pointer-events:none;
  /* emerge a la SUPERFICIE fría (no arena cálida): mismo tono que Programa-2026 */
  height:clamp(26px,4vw,46px); background:#EAF1F4;
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
/* olas line-art (trazo blanco) sobre el velo violeta-índigo y bajo el
   texto: se cuelgan del ::after del overlay (z2) para quedar SIEMPRE
   entre el velo y el contenido (z3); densas abajo-izquierda, lejos del
   bloque de texto centrado, asomando tras la ola de arena que cierra */
body[data-theme="pacifico-carnaval"] .sec-body-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left bottom / 980px auto no-repeat;
  opacity:.18;
}

/* ---------- PROGRAMA 2026: arena→blanco + ola violeta→océano al pie ---------- */
body[data-theme="pacifico-carnaval"] .sec-programa-2026{
  position:relative;
  background:linear-gradient(180deg,#FAF6ED 0%,#FFFFFF 100%);
  padding-bottom:clamp(104px,13vw,160px);
}
/* ola océano REMOVIDA del pie de Programa: no debe "empezar el mar" para luego
   recaer en arena. El separador hermoso se REUTILIZA donde el mar empieza (Fiestas). */
body[data-theme="pacifico-carnaval"] .sec-programa-2026::after{content:none}
body[data-theme="pacifico-carnaval"] .dia{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
body[data-theme="pacifico-carnaval"] .dia:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 54px rgba(30,18,70,.14);
  border-color:rgba(106,44,145,.40);
}
/* sol pequeñito como bullet de la fecha (el sol se queda, día y noche) */
body[data-theme="pacifico-carnaval"] .dia .fecha::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  background:#FFC53D;
  -webkit-mask-image:var(--mt-sol); -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:var(--mt-sol); mask-repeat:no-repeat; mask-size:100% 100%;
}

/* ---------- PROGRAMA + GALERÍA: blanco→arena ---------- */
body[data-theme="pacifico-carnaval"] .sec-programa{background:linear-gradient(180deg,#FFFFFF 0%,#FAF6ED 100%)}
body[data-theme="pacifico-carnaval"] .gallery img{transition:transform .3s ease, box-shadow .3s ease}
body[data-theme="pacifico-carnaval"] .gallery img:hover{transform:translateY(-4px); box-shadow:0 22px 48px rgba(30,18,70,.18)}

/* ---------- FIESTAS: banderines coral→magenta colgando de la costura ---------- */
body[data-theme="pacifico-carnaval"] .sec-fiestas{
  position:relative;
  background:linear-gradient(180deg,#FAF6ED 0%,#FFFFFF 100%);
}
body[data-theme="pacifico-carnaval"] .sec-fiestas::before{
  content:""; position:absolute; top:-1px; left:0; right:0; z-index:2; pointer-events:none;
  height:clamp(34px,4.5vw,50px);
  /* BANDERINES coral→magenta colgando de la costura superior de Fiestas (restaurados
     a pedido del cliente): la chispa festiva del carnaval sobre el descenso oceánico */
  background:linear-gradient(90deg,#FF6F59 0%,#FF4FA3 50%,#FF6F59 100%);
  -webkit-mask-image:var(--mt-banderines); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left top;
  mask-image:var(--mt-banderines); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left top;
}
body[data-theme="pacifico-carnaval"] .party{transition:transform .25s ease, box-shadow .25s ease}
body[data-theme="pacifico-carnaval"] .party:hover{transform:translateY(-5px); box-shadow:0 28px 58px rgba(30,18,70,.16)}
body[data-theme="pacifico-carnaval"] .party img{transition:transform .5s ease}
body[data-theme="pacifico-carnaval"] .party:hover img{transform:scale(1.045)}

/* ---------- TIENDA: blanco→arena, CTA índigo→violeta→océano, pulsera espuma ---------- */
body[data-theme="pacifico-carnaval"] .sec-tienda{background:linear-gradient(180deg,#FFFFFF 0%,#FAF6ED 100%)}
body[data-theme="pacifico-carnaval"] .tienda-cta{
  /* aurora magenta apenas insinuada arriba-izquierda (ADN Noche de
     Carnaval) + contraluz espuma abajo-derecha sobre el degradado
     índigo→violeta→océano */
  background:
    radial-gradient(60% 55% at 16% 10%, rgba(255,79,163,.16) 0%, transparent 70%),
    radial-gradient(56% 58% at 92% 96%, rgba(46,196,182,.18) 0%, transparent 70%),
    linear-gradient(160deg,#1A1040 0%,#3D2B7D 55%,#15607B 100%);
  box-shadow:var(--card-shadow);
}
body[data-theme="pacifico-carnaval"] .pulsera{
  background:linear-gradient(165deg,#D9F7F2 0%,#7FE0D5 55%,#2EC4B6 100%);
  border:1px solid rgba(38,25,77,.10);
  box-shadow:var(--card-shadow);
}
body[data-theme="pacifico-carnaval"] .cat{transition:transform .25s ease, box-shadow .25s ease}
body[data-theme="pacifico-carnaval"] .cat:hover{transform:translateY(-3px); box-shadow:0 20px 44px rgba(30,18,70,.22)}
/* OSO del carnaval — mascota de la Tiendita (traído de la página interna): asoma
   desde abajo-derecha del bloque de tarjetas, emergiendo del descenso oscuro */
body[data-theme="pacifico-carnaval"] .sec-tienda .cols-3{position:relative; padding-top:clamp(40px,4.8vw,60px)}
/* SEPARADOR de la Tienda · banderines coral→espuma colgando del tope (elegidos por
   el cliente). El padding-top de .cols-3 abre el ÁREA DE SEGURIDAD entre los
   banderines y las tarjetas (como el margen del strip "Vive el carnaval"); las puntas
   cuelgan en ese aire, sin tocar el contenido. */
body[data-theme="pacifico-carnaval"] .sec-tienda .cols-3::before{
  content:""; position:absolute; top:clamp(-54px,-3.7vw,-34px); left:0; right:0; z-index:2; pointer-events:none;
  height:clamp(34px,4.5vw,50px);
  background:linear-gradient(90deg,#FF6F59 0%,#2EC4B6 50%,#FF6F59 100%);
  -webkit-mask-image:var(--mt-banderines); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left top;
  mask-image:var(--mt-banderines); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left top;
}
body[data-theme="pacifico-carnaval"] .sec-tienda .cols-3::after{
  content:""; position:absolute; z-index:3; pointer-events:none;
  right:clamp(-42px,-2.8vw,-14px); bottom:clamp(-54px,-3.8vw,-30px);
  width:clamp(120px,13.5vw,174px); aspect-ratio:440/608;
  background:url(../img/oso-mt.webp) center bottom/contain no-repeat;
  filter:drop-shadow(0 18px 30px rgba(10,5,30,.5));
}
@media (max-width:860px){
  body[data-theme="pacifico-carnaval"] .sec-tienda .cols-3::after{width:96px; right:6px; bottom:-30px}
}

/* ---------- STRIPS: anochecer sobre el océano; turismo con mordidas arena ---------- */
body[data-theme="pacifico-carnaval"] .strip{
  /* violeta noche entrando por arriba-izquierda y muriendo en océano;
     encima, atmósfera Noche de Carnaval en tonos Pacífico: aurora
     celeste arriba-der + espuma al pie + cielo de confetti-estrellas;
     el beso magenta sigue casi subliminal en la esquina */
  background-image:
    radial-gradient(circle, rgba(255,197,61,.20) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(217,247,242,.18) 1px, transparent 1.6px),
    radial-gradient(640px 320px at 8% -10%, rgba(255,79,163,.13), transparent 60%),
    radial-gradient(720px 380px at 92% -16%, rgba(56,209,255,.20), transparent 64%),
    radial-gradient(560px 320px at 50% 118%, rgba(46,196,182,.16), transparent 66%),
    linear-gradient(150deg,#3D2B7D 0%,#235180 38%,#1B6E8C 72%,#1E7E97 100%);
  background-size:92px 92px, 66px 66px, auto, auto, auto, auto;
  background-position:0 0, 32px 44px, 0 0, 0 0, 0 0, 0 0;
  background-repeat:repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
body[data-theme="pacifico-carnaval"] .strip-turismo{position:relative; overflow:hidden}
body[data-theme="pacifico-carnaval"] .strip-turismo .container{
  padding-top:clamp(58px,8vw,84px); padding-bottom:clamp(58px,8vw,84px);
}
body[data-theme="pacifico-carnaval"] .strip-turismo::before{
  content:""; position:absolute; top:-1px; left:0; right:0; pointer-events:none;
  /* ola OSCURA: cose la Tienda con el strip al MISMO tono de profundidad (sin corte) */
  height:clamp(20px,3vw,36px); background:#15314E; transform:scaleY(-1);
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
/* línea inferior del strip-turismo REMOVIDA: "se veía extraña, sobraba" — el
   strip ya cose por color con el contacto nocturno, sin necesidad de ola */
body[data-theme="pacifico-carnaval"] .strip-turismo::after{content:none}
/* (la banda de olas claras del core en la juntura fiestas→tienda fue reemplazada
   por los BANDERINES del separador de la Tienda — ver sección TIENDA arriba; por eso
   ya NO se hace content:none aquí, o los banderines de noche desaparecerían) */
/* strip contacto: tambor coral como emblema sobre el título */
body[data-theme="pacifico-carnaval"] .strip-contacto .sec-titulo::before{
  content:""; display:block; width:56px; height:56px; margin:0 auto 14px;
  background:#FF6F59;
  -webkit-mask-image:var(--mt-tambor); -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:var(--mt-tambor); mask-repeat:no-repeat; mask-size:100% 100%;
}

/* ---------- PAGE-HERO interior: cielo de noche de carnaval en tonos
   Pacífico — auroras espuma/celeste/púrpura + confetti-estrellas ---------- */
body[data-theme="pacifico-carnaval"] .page-hero{
  background-image:
    radial-gradient(circle, rgba(255,197,61,.22) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(217,247,242,.20) 1px, transparent 1.6px),
    radial-gradient(900px 460px at 88% -20%, rgba(46,196,182,.24), transparent 62%),
    radial-gradient(760px 420px at 70% -6%, rgba(56,209,255,.16), transparent 64%),
    radial-gradient(700px 420px at -10% 110%, rgba(255,79,163,.12), transparent 60%),
    radial-gradient(620px 380px at 68% 4%, rgba(106,44,145,.38), transparent 66%),
    linear-gradient(165deg,#1A1040 0%,#3D2B7D 52%,#15607B 100%);
  background-size:96px 96px, 70px 70px, auto, auto, auto, auto, auto;
  background-position:0 0, 34px 46px, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat:repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
body[data-theme="pacifico-carnaval"] .page-hero::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:1; pointer-events:none;
  height:clamp(16px,2.6vw,30px); background:#FAF6ED;
  -webkit-mask-image:var(--mt-ola-crestas); -webkit-mask-repeat:repeat-x; -webkit-mask-size:auto 100%; -webkit-mask-position:left bottom;
  mask-image:var(--mt-ola-crestas); mask-repeat:repeat-x; mask-size:auto 100%; mask-position:left bottom;
}
/* motivos nocturnos a la derecha (las gaviotas blancas recortadas se
   veían pegadas sobre el cielo índigo): sol-y-luna abrazados con su
   halo de estrellas como protagonista + gaviota lila acuarela
   planeando debajo — el ave de Pacífico, pero pintada de noche */
body[data-theme="pacifico-carnaval"] .page-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    url(../img/sol-luna.webp) right 7% top 12% / clamp(140px,16vw,220px) auto no-repeat,
    url(../img/gaviota-lila.png) right 25% top 40% / clamp(120px,13vw,185px) auto no-repeat;
  opacity:.85;
}
body[data-theme="pacifico-carnaval"] .page-hero .breadcrumb{color:#FFC53D; opacity:1; letter-spacing:.16em}

/* ---------- Tiendita / Turismo / Historia: cards y chips pulidos ---------- */
body[data-theme="pacifico-carnaval"] .chip-cat{
  box-shadow:0 4px 14px rgba(30,18,70,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
body[data-theme="pacifico-carnaval"] .chip-cat:hover{
  /* hover magenta: otra de las dosis contadas */
  transform:translateY(-2px); border-color:rgba(255,79,163,.55);
  box-shadow:0 8px 20px rgba(30,18,70,.11);
}
body[data-theme="pacifico-carnaval"] .chip-cat.active{box-shadow:0 8px 20px rgba(255,111,89,.35)}
body[data-theme="pacifico-carnaval"] .prod,
body[data-theme="pacifico-carnaval"] .pack{transition:transform .25s ease, box-shadow .25s ease}
body[data-theme="pacifico-carnaval"] .prod:hover,
body[data-theme="pacifico-carnaval"] .pack:hover{transform:translateY(-4px); box-shadow:0 26px 54px rgba(30,18,70,.14)}
body[data-theme="pacifico-carnaval"] .afiches img{transition:transform .3s ease, box-shadow .3s ease}
body[data-theme="pacifico-carnaval"] .afiches img:hover{transform:translateY(-4px) scale(1.015); box-shadow:0 24px 48px rgba(30,18,70,.20)}

/* ---------- Formulario contacto ---------- */
body[data-theme="pacifico-carnaval"] .form-card input,
body[data-theme="pacifico-carnaval"] .form-card textarea,
body[data-theme="pacifico-carnaval"] .form-card select{
  border:1.5px solid rgba(38,25,77,.18); background:#FCFAF4;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[data-theme="pacifico-carnaval"] .form-card input:focus,
body[data-theme="pacifico-carnaval"] .form-card textarea:focus,
body[data-theme="pacifico-carnaval"] .form-card select:focus{
  border-color:#1B6E8C; box-shadow:0 0 0 4px rgba(46,196,182,.18);
}

/* ---------- FOOTER: marejada de olas en capas fundiendo al índigo noche ---------- */
body[data-theme="pacifico-carnaval"] .footer{
  position:relative; padding:0 0 72px;
  /* respiración final de aurora sobre el índigo: océano arriba-der +
     cama violeta abajo-izq, casi subliminal */
  background:
    radial-gradient(54% 62% at 88% 4%, rgba(27,110,140,.30) 0%, transparent 66%),
    radial-gradient(42% 54% at 6% 100%, rgba(61,43,125,.36) 0%, transparent 70%),
    #140D33;
}
body[data-theme="pacifico-carnaval"] .footer::before{
  content:""; display:block; pointer-events:none;
  height:clamp(110px,14vw,190px); margin-bottom:clamp(34px,5vw,54px);
  background:
    /* fundido suave (antes saltaba a azul .90 brusco): casi solo el motivo de la ola */
    linear-gradient(180deg, rgba(20,13,51,0) 12%, rgba(20,13,51,.40) 80%, #140D33 100%),
    url(../img/sep-olas-oscuras.webp) center / cover no-repeat;
  -webkit-mask-image:var(--mt-ola), linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x, no-repeat;
  -webkit-mask-size:auto 24px, 100% calc(100% - 23px);
  -webkit-mask-position:left top, 0 23px;
  mask-image:var(--mt-ola), linear-gradient(#000,#000);
  mask-repeat:repeat-x, no-repeat;
  mask-size:auto 24px, 100% calc(100% - 23px);
  mask-position:left top, 0 23px;
}
/* olas line-art blancas, casi marca de agua, rompiendo en la esquina
   inferior-izquierda del índigo (eco de las olas del sec-body) */
body[data-theme="pacifico-carnaval"] .footer::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left bottom / 820px auto no-repeat;
  opacity:.11;
}
body[data-theme="pacifico-carnaval"] .footer .container{position:relative; z-index:1}
/* los iconos sociales del footer son negros: se pasan a blanco sobre la noche */
body[data-theme="pacifico-carnaval"] .foot-social img{filter:brightness(0) invert(1); opacity:.92}
body[data-theme="pacifico-carnaval"] .foot-social img:hover{opacity:1}
body[data-theme="pacifico-carnaval"] .foot-logos img{background:#fff; border-radius:10px; padding:6px 9px}
body[data-theme="pacifico-carnaval"] .foot-credit{opacity:.65}
body[data-theme="pacifico-carnaval"] .foot-credit img{filter:brightness(0) invert(1)}

/* ---------- Responsive: decoración más liviana en móvil ---------- */
@media (max-width:860px){
  body[data-theme="pacifico-carnaval"] .sec-programa-2026{padding-bottom:clamp(88px,16vw,120px)}
  body[data-theme="pacifico-carnaval"] .strip-turismo .container{padding-top:64px; padding-bottom:64px}
  body[data-theme="pacifico-carnaval"] .sec-body-overlay::after{background-size:640px auto; opacity:.15}
  body[data-theme="pacifico-carnaval"] .footer::after{background-size:540px auto}
  /* móvil: el lead ocupa todo el ancho — sol-luna chico en la esquina
     superior derecha y la gaviota lila baja a la esquina inferior,
     donde el texto no llega (eran background, no mask) */
  body[data-theme="pacifico-carnaval"] .page-hero::after{
    background-position:right 6px top 6px, right 4% bottom 8%;
    background-size:100px auto, 74px auto;
    opacity:.7;
  }
}
@media (max-width:560px){
  body[data-theme="pacifico-carnaval"] .sec-titulo::after{width:92px; height:9px; margin-top:12px}
  body[data-theme="pacifico-carnaval"] .strip-contacto .sec-titulo::before{width:46px; height:46px}
}
/* ---------- Enriquecimiento del hero (insumos Profundización) ---------- */
/* olas line-art rolando al pie del hero, bajo el velo — MÁS sutiles que
   en Pacífico día: el mármol ya trae movimiento, no se compite con él */
body[data-theme="pacifico-carnaval"] .hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -50px bottom -40px / 980px auto no-repeat;
  opacity:.12;
}
/* el sol dorado sobre el cielo violeta (SE QUEDA: contraste precioso)
   + calidez ámbar tras la marca y junto al sol, sobre el velo y bajo
   el contenido */
body[data-theme="pacifico-carnaval"] .hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    url(../img/sol-amarillo.webp) right clamp(8px,2.5vw,46px) top clamp(14px,3vw,44px) / clamp(160px,17vw,270px) auto no-repeat,
    radial-gradient(620px 460px at 50% 40%, rgba(255,197,61,.14), rgba(255,111,89,.06) 55%, transparent 72%),
    radial-gradient(420px 380px at 84% 22%, rgba(255,197,61,.22), transparent 70%);
}
@media (max-width:860px){
  body[data-theme="pacifico-carnaval"] .hero::before{background-size:640px auto; opacity:.09}
}

/* ===================================================================
   TEXTURA EN SECCIONES CLARAS (solo CSS, cero peso nuevo)
   Heredada de Pacífico v2.6 con el grano virado a ÍNDIGO: dos retículas
   de puntos violeta-noche desfasadas (alpha ≤.03) detrás de los
   degradados arena/blanco; los motivos mask siguen en z-index:-1 con
   isolation para que NUNCA tapen texto ni cards. El grano altera el
   fondo < 1% de luminancia → AA intacto.
   =================================================================== */

/* ---- 1 · Grano papel/arena (puntos índigo) sobre cada sección ---- */
/* arena→blanco */
body[data-theme="pacifico-carnaval"] .sec-programa-2026,
body[data-theme="pacifico-carnaval"] .sec-fiestas{
  background-image:
    radial-gradient(rgba(42,28,88,.030) 1px, transparent 1.15px),
    radial-gradient(rgba(42,28,88,.022) 1px, transparent 1.15px),
    linear-gradient(180deg,#FAF6ED 0%,#FFFFFF 100%);
  background-size:19px 19px, 29px 29px, 100% 100%;
  background-position:0 0, 10px 14px, 0 0;
  background-repeat:repeat, repeat, no-repeat;
}
/* blanco→arena */
body[data-theme="pacifico-carnaval"] .sec-programa,
body[data-theme="pacifico-carnaval"] .sec-tienda{
  background-image:
    radial-gradient(rgba(42,28,88,.030) 1px, transparent 1.15px),
    radial-gradient(rgba(42,28,88,.022) 1px, transparent 1.15px),
    linear-gradient(180deg,#FFFFFF 0%,#FAF6ED 100%);
  background-size:19px 19px, 29px 29px, 100% 100%;
  background-position:0 0, 10px 14px, 0 0;
  background-repeat:repeat, repeat, no-repeat;
}

/* ===================================================================
   DESCENSO OCEÁNICO CONTINUO (canon) — feedback del cliente:
   el landing es UN solo degradado que se sumerge, SIN cálido y SIN
   costuras. Cada sección EMPIEZA con el tono de la anterior (mismas
   paradas de color en la juntura) y el tono oceánico nunca retrocede.
   Grano índigo continuo de la misma densidad. Tarjetas claras (flotan).
       superficie  #EAF1F4 ─┐ Programa 2026
                   #DCE7EB ─┤ galería
                   #C4D6DD ─┤ Fiestas (entra el agua)
                   #6E92A5 ─┤ Tienda
   profundidad     #15314E ─┘ → strips → contacto → footer (abismo)
   =================================================================== */
body[data-theme="pacifico-carnaval"] .sec-programa-2026{
  background-image:
    radial-gradient(rgba(42,28,88,.026) 1px, transparent 1.15px),
    linear-gradient(180deg,#EAF1F4 0%,#DCE7EB 100%);
  background-size:24px 24px, 100% 100%; background-position:0 0,0 0; background-repeat:repeat,no-repeat;
}
body[data-theme="pacifico-carnaval"] .sec-programa{
  background-image:
    radial-gradient(rgba(42,28,88,.024) 1px, transparent 1.15px),
    linear-gradient(180deg,#DCE7EB 0%,#C4D6DD 100%);
  background-size:24px 24px, 100% 100%; background-position:0 0,0 0; background-repeat:repeat,no-repeat;
}
body[data-theme="pacifico-carnaval"] .sec-fiestas{
  background-image:
    radial-gradient(rgba(42,28,88,.018) 1px, transparent 1.15px),
    linear-gradient(180deg,#C4D6DD 0%,#9DBAC7 40%,#6E92A5 100%);
  background-size:24px 24px, 100% 100%; background-position:0 0,0 0; background-repeat:repeat,no-repeat;
}
body[data-theme="pacifico-carnaval"] .sec-tienda{
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.15px),
    linear-gradient(180deg,#6E92A5 0%,#34597A 46%,#15314E 100%);
  background-size:24px 24px, 100% 100%; background-position:0 0,0 0; background-repeat:repeat,no-repeat;
}
/* motivos de costa terracota a marca de agua en la profundidad */
body[data-theme="pacifico-carnaval"] .sec-tienda::before,
body[data-theme="pacifico-carnaval"] .sec-tienda::after{opacity:.24}
/* contacto: cierra el abismo cosiendo con el footer (mismo tono, sin ruptura) */
body[data-theme="pacifico-carnaval"] .strip-contacto{
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.15px),
    linear-gradient(180deg,#15314E 0%,#161F3C 100%);
  background-size:24px 24px, 100% 100%; background-position:0 0,0 0; background-repeat:repeat,no-repeat;
}
body[data-theme="pacifico-carnaval"] .strip-contacto .sec-titulo{color:#F0F7FC}

/* --- Continuidad: FUERA las costuras (bandas/olas/texturas) del descenso --- */
/* marea CLARA del core (pie de Programa + techo de Tienda): era el corte "volvió
   a blanco" — el degradado continuo la reemplaza */
body[data-theme="pacifico-carnaval"] .sec-programa-2026 .dias::after{content:none}
/* (.sec-tienda .cols-3::before ya NO se anula: ahora son los banderines del separador) */
/* ola del "empezó el mar" en Fiestas: el agua ya entra por el propio degradado,
   sin comenzar de golpe (no se debe notar la costura) */
/* banderines de Fiestas RESTAURADOS (ya no content:none) — ver sección FIESTAS arriba */
/* fantasma olas-vector del core (pacifico-core: .sec-fiestas .cards-3::before, op .08) FUERA
   en el canon: sobre la ARENA del día era un velo, pero sobre el DESCENSO azul leía como una
   LÍNEA clara llena de ancho bajo las cards (la "franja disímil" Fiestas→Tienda) */
body[data-theme="pacifico-carnaval"] .sec-fiestas .cards-3::before{content:none}
/* texturas sobrantes del strip turismo (bandas sep-olas + line-art del core) */
body[data-theme="pacifico-carnaval"] .strip-turismo .container::before,
body[data-theme="pacifico-carnaval"] .strip-turismo .container::after{content:none}

/* ===================================================================
   TEXTURA DEL DESCENSO (.oceanflow) — capas continuas de profundidad:
   luz/cáusticas en la superficie, bruma por profundidad, nieve marina
   en la columna, y fauna en silueta (peces→ballena→kelp) revelándose al
   bucear. El degradado del descenso VIVE en el wrapper; las secciones van
   transparentes y flotan encima (z-index:1). Todo CSS+SVG inline, fundido
   por máscara vertical → continuo, sin costuras. Liviano (cero raster).
   =================================================================== */
body[data-theme="pacifico-carnaval"] .oceanflow{
  position:relative; isolation:isolate;
  --tex:0.65;   /* intensidad global de la textura (subtle .65 · medio 1 · marcado 1.5) */
  background:
    radial-gradient(120% 40% at 50% 6%, rgba(234,241,244,.30), transparent 60%),
    radial-gradient(90% 30% at 16% 30%, rgba(110,146,165,.16), transparent 55%),
    radial-gradient(150% 95% at 82% 86%, rgba(21,49,78,.15), transparent 92%), /* profundidad a la derecha llevada al ABISMO (antes 52% → creaba una banda en mitad del descenso) */
    linear-gradient(180deg,#EAF1F4 0%,#DCE7EB 9%,#C4D6DD 20%,#6E92A5 38%,#15314E 62%,#161F3C 82%,#140D33 100%);
  background-blend-mode:soft-light, soft-light, soft-light, normal;
}
/* las secciones del descenso: transparentes, flotan sobre la textura */
body[data-theme="pacifico-carnaval"] .oceanflow > .sec,
body[data-theme="pacifico-carnaval"] .oceanflow > .strip{
  background:transparent !important; background-image:none !important;
  position:relative; z-index:1;
}
/* "Vive el carnaval" RECUPERA su banda violeta→océano como ISLA-acento del descenso */
body[data-theme="pacifico-carnaval"] .oceanflow > .strip-turismo{
  background:linear-gradient(150deg,#3D2B7D 0%,#235180 38%,#1B6E8C 72%,#1E7E97 100%) !important;
}
/* ola inferior que cose la isla con el contacto (la superior ya existe, hacia la Tienda) */
body[data-theme="pacifico-carnaval"] .strip-turismo::after{
  content:""; position:absolute; bottom:-1px; left:0; right:0; pointer-events:none;
  /* la isla "Vive el carnaval" se DISUELVE en el abismo: fundido suave hacia el
     tono del contacto (#15314E), sin la cresta de ola dura que se leía como
     una franja de color abrupta (feedback cliente) */
  height:clamp(64px,9vw,128px);
  background:linear-gradient(180deg, transparent 0%, rgba(21,49,78,.5) 56%, #15314E 100%);
}
/* ===== SISTEMA DE TEXTURA DEL DESCENSO — Dirección C (integrada 2026-06-13) =====
   "Híbrido: cáusticas arriba → grabado porteño en la profundidad". Reemplaza el
   sistema plano (red sinusoidal + nieve equiespaciada + grano). Vara = el footer:
   el abismo del descenso YA adopta el lenguaje del footer (olas-lineart + banda
   sep-olas) antes de llegar a él. Todo CSS/SVG inline, cero raster nuevo, opacidades
   atadas a --tex (0.65). Cross-fade empujado a la profundidad para no crear banda en
   mitad del descenso (Fiestas→Tienda). ===================================== */
/* ---------------------------------------------------------------------
   1 · SUPERFICIE — godrays direccionales + cáusticas reales en filamentos
   Reemplaza .oceanflow::before del canon. feTurbulence con baseFrequency
   muy anisotrópica (casi horizontal) + feColorMatrix de alto contraste
   → la nube se rompe en hebras de luz, no en bruma. Enmascarado al
   tercio superior; cross-fade: la luz ya está muriendo a media agua.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .oceanflow::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* godrays: haces cónicos finos desde sobre la superficie */
    conic-gradient(from 179deg at 24% -10%, transparent 0deg, rgba(255,255,255,.11) 2.4deg, transparent 5.2deg),
    conic-gradient(from 181deg at 47% -12%, transparent 0deg, rgba(223,247,255,.14) 3.4deg, transparent 7deg),
    conic-gradient(from 178.5deg at 69% -8%, transparent 0deg, rgba(255,255,255,.09) 2.2deg, transparent 4.8deg),
    conic-gradient(from 180.5deg at 88% -11%, transparent 0deg, rgba(210,238,247,.10) 3deg, transparent 6.4deg),
    /* cáusticas reales: turbulencia anisotrópica umbralizada a hebras */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='1280'><defs><filter id='cau' x='-10%25' y='-10%25' width='120%25' height='120%25'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.026' numOctaves='4' seed='11' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.4 0 0 0 -0.86'/></filter></defs><rect width='760' height='1280' filter='url(%23cau)'/></svg>");
  background-size:auto, auto, auto, auto, 760px 1280px;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position:center top, center top, center top, center top, center top;
  mix-blend-mode:screen; opacity:calc(var(--tex,0.65) * 1.25);
  /* mid-zona QUIETA: la luz muere alto (≈50%), bien por encima de la juntura Fiestas→Tienda */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 38%,transparent 50%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.18) 38%,transparent 50%);
}

/* ---------------------------------------------------------------------
   4 · COLUMNA — nieve marina con PARALAJE (dos densidades a distinta
   escala) + leve deriva de partículas grandes. Reemplaza .oceanflow::after
   del canon. Nace a media agua, crece hacia el fondo. SVG con puntos de
   tamaño/opacidad irregulares (no equiespaciados) para matar el patrón.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .oceanflow::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* capa cercana: partículas mayores, esparcidas */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='520'><g fill='%23ffffff'><circle cx='38' cy='61' r='1.6' opacity='.55'/><circle cx='173' cy='29' r='1.1' opacity='.4'/><circle cx='291' cy='97' r='1.9' opacity='.5'/><circle cx='414' cy='52' r='1.0' opacity='.35'/><circle cx='106' cy='178' r='1.4' opacity='.48'/><circle cx='247' cy='214' r='1.1' opacity='.42'/><circle cx='372' cy='162' r='1.7' opacity='.5'/><circle cx='58' cy='301' r='1.2' opacity='.4'/><circle cx='205' cy='344' r='1.6' opacity='.5'/><circle cx='338' cy='312' r='1.0' opacity='.35'/><circle cx='447' cy='276' r='1.4' opacity='.45'/><circle cx='131' cy='431' r='1.1' opacity='.4'/><circle cx='276' cy='466' r='1.8' opacity='.5'/><circle cx='402' cy='418' r='1.1' opacity='.4'/></g></svg>"),
    /* capa lejana: motas finas, más densas, otra escala → paralaje */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='320'><g fill='%23dff7ff'><circle cx='22' cy='37' r='0.7' opacity='.45'/><circle cx='91' cy='18' r='0.6' opacity='.35'/><circle cx='148' cy='63' r='0.8' opacity='.4'/><circle cx='213' cy='34' r='0.6' opacity='.3'/><circle cx='271' cy='71' r='0.7' opacity='.4'/><circle cx='49' cy='121' r='0.6' opacity='.35'/><circle cx='117' cy='148' r='0.8' opacity='.4'/><circle cx='189' cy='117' r='0.6' opacity='.3'/><circle cx='256' cy='151' r='0.7' opacity='.38'/><circle cx='31' cy='214' r='0.7' opacity='.4'/><circle cx='102' cy='246' r='0.6' opacity='.32'/><circle cx='171' cy='221' r='0.8' opacity='.4'/><circle cx='239' cy='258' r='0.6' opacity='.3'/><circle cx='66' cy='299' r='0.7' opacity='.38'/><circle cx='148' cy='288' r='0.6' opacity='.32'/><circle cx='223' cy='306' r='0.7' opacity='.4'/></g></svg>");
  background-repeat:repeat, repeat;
  background-size:440px 480px, 280px 300px;
  mix-blend-mode:screen; opacity:calc(var(--tex,0.65) * .72);
  /* nieve QUIETA en la mid-zona (≤.22 hasta 66%, para no aclarar la juntura Fiestas→Tienda)
     y CRECE en el abismo (plancton sobre lo oscuro): el brillo de la nieve ya no fabrica banda */
  -webkit-mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.22) 66%,rgba(0,0,0,.6) 86%,rgba(0,0,0,.72) 96%,rgba(0,0,0,.5) 100%);
          mask-image:linear-gradient(180deg,transparent 10%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.22) 66%,rgba(0,0,0,.6) 86%,rgba(0,0,0,.72) 96%,rgba(0,0,0,.5) 100%);
}

/* ---------------------------------------------------------------------
   .oflow-tex — wrapper de posicionamiento (sin background propio).
   Sus dos pseudos cargan el LENGUAJE DEL FOOTER en la mitad inferior.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .oflow-tex{position:absolute; inset:0; z-index:0; pointer-events:none}

/* ---------------------------------------------------------------------
   6 · ABISMO — insinuación de banda de olas (sep-olas-oscuras.webp), el
   MISMO motivo orgánico del footer::before. Tintado/oscurecido y fundido
   a #140D33; aparece sólo con la profundidad (máscara que crece hacia
   abajo, suave, jamás un borde duro). Esto trae el "orgánico real" del
   footer al descenso.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .oflow-tex::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* fundido vertical hacia el abismo, encima del motivo */
    linear-gradient(180deg, rgba(20,13,51,0) 60%, rgba(20,13,51,.42) 86%, rgba(20,13,51,.78) 100%),
    url(../img/sep-olas-oscuras.webp) center bottom / 130% auto repeat-x;
  /* oscurece y desatura el webp para fundirlo en el índigo (no compite) */
  filter:brightness(.34) saturate(.62) contrast(1.04);
  mix-blend-mode:normal; opacity:calc(var(--tex,0.65) * .9);
  /* nace en la PROFUNDIDAD (no a media agua) y crece hacia el fondo: el cross-fade
     con la luz queda abajo, sin banda de transición en mitad del descenso */
  -webkit-mask-image:linear-gradient(180deg,transparent 64%,rgba(0,0,0,.3) 82%,rgba(0,0,0,.72) 93%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 64%,rgba(0,0,0,.3) 82%,rgba(0,0,0,.72) 93%,#000 100%);
}

/* ---------------------------------------------------------------------
   5 · ABISMO — MARCA DE AGUA olas-lineart.webp, el MISMO recurso del
   footer::after (op .11). Revelándose con la profundidad; rompe en la
   esquina inferior izquierda (eco directo del footer). Firma vectorial
   blanca, casi subliminal, que cose la continuidad con el footer real.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .oflow-tex::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -30px bottom -20px / 900px auto no-repeat;
  opacity:calc(var(--tex,0.65) * .18);   /* ≈ .117 con --tex 0.65 → como footer .11 */
  -webkit-mask-image:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.4) 82%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.4) 82%,#000 100%);
}

/* ---------------------------------------------------------------------
   2 · DETALLE — segunda capa de cáusticas (red de luz orgánica), más fina
   y a distinta escala que .oceanflow::before → paralaje de luz. Reemplaza
   la "red" sinusoidal plana del canon. feTurbulence umbralizado en hebras
   finas; soft-light para leerse como brillo del agua, no como líneas.
   Muere a media agua (cross-fade con el grabado que nace).
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .ot-net{
  position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='900'><defs><filter id='cf' x='-8%25' y='-8%25' width='116%25' height='116%25'><feTurbulence type='fractalNoise' baseFrequency='0.006 0.034' numOctaves='3' seed='23' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.7 0 0 0 -1.06'/></filter></defs><rect width='620' height='900' filter='url(%23cf)'/></svg>") repeat;
  background-size:620px 900px;
  mix-blend-mode:soft-light; opacity:calc(var(--tex,0.65) * 1.1);
  /* 2ª capa de cáusticas también muere alto (≈54%): mid-zona limpia, sin bump de luz */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0%,#000 10%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.18) 42%,transparent 54%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.7) 0%,#000 10%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.18) 42%,transparent 54%);
}
/* ---------------------------------------------------------------------
   3 · SUPERFICIE CLARA — firma vectorial ENTINTADA NAVY. La superficie
   #EAF1F4 es tan clara que las capas blancas en screen/soft-light casi no
   se leen; aquí va un acento OSCURO contrastante: olas-lineart.webp con
   --marca-filter (exactamente como sec-programa::before y la marca del
   footer), para que la cima del descenso NO quede vacía. Sólo en el
   tercio superior, muy tenue.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .ot-net::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) right -60px top -30px / 760px auto no-repeat;
  filter:var(--marca-filter);
  opacity:calc(var(--tex,0.65) * .14);    /* ≈ .09 — marca de agua navy */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 18%,transparent 34%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 18%,transparent 34%);
}

/* ---------------------------------------------------------------------
   8 · GRANO continuo en TODO el descenso (anti-banding + "tooth").
   Reemplaza .ot-grain del canon. Tile sin costura (stitchTiles), overlay.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .ot-grain{
  position:absolute; inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='gr'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='200' height='200' filter='url(%23gr)'/></svg>") repeat;
  background-size:200px 200px;
  mix-blend-mode:overlay; opacity:calc(var(--tex,0.65) * .5);
}
/* ---------------------------------------------------------------------
   7 · AURORAS radiales tenues — eco directo del radial-gradient del
   footer (océano arriba-derecha + cama violeta abajo-izquierda). Se
   montan en .ot-grain::before para no tocar el background de .oceanflow.
   Crecen hacia el fondo (cosen el abismo con el footer). soft-light.
   --------------------------------------------------------------------- */
body[data-theme="pacifico-carnaval"] .ot-grain::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 86% 70%, rgba(27,110,140,.22), transparent 68%),
    radial-gradient(54% 56% at 8% 96%, rgba(61,43,125,.26), transparent 72%),
    radial-gradient(70% 30% at 50% 100%, rgba(20,13,51,.30), transparent 70%);
  mix-blend-mode:soft-light; opacity:calc(var(--tex,0.65) * 1.0);
  -webkit-mask-image:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.5) 82%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 66%,rgba(0,0,0,.5) 82%,#000 100%);
}

/* ---------------------------------------------------------------------
   Móvil: aligera las capas más pesadas (turbulencias y banda orgánica).
   El grano y las auroras son baratos y se quedan. Las cáusticas usan
   tiles más grandes (menos repeticiones que rasterizar) y el paralaje de
   nieve se simplifica a una sola densidad.
   --------------------------------------------------------------------- */
@media (max-width:860px){
  /* cáusticas de superficie: tile mayor → menos coste de composición */
  body[data-theme="pacifico-carnaval"] .oceanflow::before{
    background-size:auto, auto, auto, auto, 900px 1500px;
    opacity:calc(var(--tex,0.65) * 1.05);
  }
  /* nieve: una sola capa (oculta la cercana, mantiene la fina) */
  body[data-theme="pacifico-carnaval"] .oceanflow::after{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='320'><g fill='%23dff7ff'><circle cx='22' cy='37' r='0.7' opacity='.45'/><circle cx='91' cy='18' r='0.6' opacity='.35'/><circle cx='148' cy='63' r='0.8' opacity='.4'/><circle cx='213' cy='34' r='0.6' opacity='.3'/><circle cx='271' cy='71' r='0.7' opacity='.4'/><circle cx='49' cy='121' r='0.6' opacity='.35'/><circle cx='117' cy='148' r='0.8' opacity='.4'/><circle cx='189' cy='117' r='0.6' opacity='.3'/><circle cx='256' cy='151' r='0.7' opacity='.38'/><circle cx='31' cy='214' r='0.7' opacity='.4'/><circle cx='102' cy='246' r='0.6' opacity='.32'/><circle cx='171' cy='221' r='0.8' opacity='.4'/><circle cx='239' cy='258' r='0.6' opacity='.3'/><circle cx='66' cy='299' r='0.7' opacity='.38'/></g></svg>");
    background-size:280px 300px;
  }
  /* segunda capa de cáusticas: tile mayor, un poco más tenue */
  body[data-theme="pacifico-carnaval"] .ot-net{
    background-size:760px 1100px;
    opacity:calc(var(--tex,0.65) * .95);
  }
  /* banda orgánica del abismo: más liviana y compacta en móvil */
  body[data-theme="pacifico-carnaval"] .oflow-tex::before{
    background-size:auto, 160% auto;
    opacity:calc(var(--tex,0.65) * .8);
  }
  /* marca de agua line-art: un punto más chica */
  body[data-theme="pacifico-carnaval"] .oflow-tex::after{background-size:640px auto}
  body[data-theme="pacifico-carnaval"] .ot-net::before{background-size:560px auto}
}

body[data-theme="pacifico-carnaval"] .strip-contacto .sec-baja{color:#A6C2D6}

/* ---- 2 · Motivos mask en tinta navy/espuma (esquinas, z-index:-1) ---- */
/* Programa 2026: bandada de gaviotas a la izquierda del título, tinta
   abismo casi marca de agua */
body[data-theme="pacifico-carnaval"] .sec-programa-2026{isolation:isolate}
/* gaviotas-bandada a la izquierda del título REMOVIDAS (se veían cortadas y grises;
   el sol boho a la derecha basta) */
body[data-theme="pacifico-carnaval"] .sec-programa-2026::before{content:none}
/* Tienda: las esquinas las ocupan caracola y concha acuarela (bloque
   de motivos acuarela, más abajo) */
body[data-theme="pacifico-carnaval"] .sec-tienda{position:relative; isolation:isolate}
/* Contacto: cenefa de crestas recorriendo el borde superior — aquí vive
   otra dosis contada de magenta, fundida entre púrpura y espuma */
body[data-theme="pacifico-carnaval"] .strip-contacto{position:relative; isolation:isolate}
/* cenefa magenta del contacto RETIRADA (feedback cliente: "franja de color que
   cambia abruptamente"); el contacto cose por color con el abismo y el footer */
body[data-theme="pacifico-carnaval"] .strip-contacto::after{content:none}

/* ---- 3 · Olas line-art entintadas a navy como marca de agua ---- */
/* Programa+galería: rompen en la esquina inferior izquierda, detrás de
   la card (mismo PNG cacheado del hero; filter = el de la marca navy) */
body[data-theme="pacifico-carnaval"] .sec-programa{position:relative; isolation:isolate}
body[data-theme="pacifico-carnaval"] .sec-programa::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/olas-lineart.webp) left -40px bottom -36px / 860px auto no-repeat;
  filter:var(--marca-filter);
  opacity:.07;
}

/* ---- Móvil: decoración más liviana (el grano es barato y se queda) ---- */
@media (max-width:860px){
  body[data-theme="pacifico-carnaval"] .sec-programa-2026::before{display:none}
  body[data-theme="pacifico-carnaval"] .sec-programa::before{background-size:520px auto; opacity:.05}
  body[data-theme="pacifico-carnaval"] .strip-contacto::after{height:9px; top:12px}
}

/* ---------- velero del strip turismo: VISIBLE (no tras el botón) ---------- */
body[data-theme="pacifico-carnaval"] .strip-velero{
  position:absolute; right:clamp(140px,16vw,250px); bottom:8px;
  height:calc(100% - 18px); width:auto;
  opacity:.55; pointer-events:none; filter:brightness(2.2) saturate(.5);
}
@media (max-width:860px){
  body[data-theme="pacifico-carnaval"] .strip-velero{display:none}
}


/* ===== theme-pacifico-noche.css ===== */
/* ===================================================================
   TEMA · "PACÍFICO NOCHE"  —  key: pacifico-noche  (DEFINITIVO interiores)
   La estructura y el estilo de "Noche de Carnaval" (theme-fiesta.css)
   recoloreados por completo a la paleta de "Puerto Pacífico":
   Abismo #0B2740 · Océano #1B6E8C · Espuma #2EC4B6 · Coral #FF6F59
   Sol #FFC53D · Celeste #38D1FF — noche en la bahía, no en el cerro.
   Tipo: Fraunces 900 (display) · Outfit (texto) · Rye (acentos cortos).
   Firma: aurora oceánica en page-hero/strips · UN blob difuso por
   sección (coral impares / espuma pares) · confetti sutil sol+espuma
   · banderines sol (fiestas) · sol en .sec-titulo · ola de transición
   (programa 2026) · olas line-art blancas (sec-body + strips)
   · gaviotas blancas en el page-hero.
   FOOTER: trasplante 1:1 del de Puerto Pacífico — abismo #0B2740 con
   banda de cerros turquesa (océano→espuma) EN FLUJO y olas line-art
   de marca de agua (no la versión fiesta de cerros colgantes).
   =================================================================== */

/* ---------------- 1 · VARIABLES (contrato completo) ---------------- */
body[data-theme="pacifico-noche"]{
  /* tipografía */
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Outfit", system-ui, sans-serif;
  --display-weight:900; --display-transform:none; --display-tracking:-.01em;

  /* paleta noche oceánica */
  --bg:#0B2740; --ink:#F0F7FC; --muted:#A6C2D6; --surface:#11395C;
  --brand:#38D1FF; --on-brand:#0B2740;
  --accent:#2EC4B6; --accent2:#FFC53D;
  --pink:#FF6F59; --on-pink:#33110B;
  --cream:#11395C;

  /* botones: degradado coral→sol (atardecer del Pacífico), tinta
     teja oscura #33110B (AA sobre ambas paradas) */
  --btn-bg:linear-gradient(120deg,#FF6F59 0%, #FFC53D 100%);
  --btn-on:#33110B; --btn-border:none;

  /* hero (video): velo tinta abismo casi neutro, columna oscura a la
     IZQUIERDA que sostiene logo y fechas blancos, y scrim inferior
     que ancla la franja de multitud donde se planta el altar */
  --hero-bg:#0B2740; --hero-ink:#F0F7FC;
  --hero-overlay:
    radial-gradient(135% 100% at 50% 38%, rgba(4,15,27,0) 38%, rgba(4,15,27,.48) 100%),
    linear-gradient(90deg, rgba(4,15,27,.42) 0%, rgba(4,15,27,.20) 34%, rgba(4,15,27,0) 60%),
    linear-gradient(180deg, rgba(4,15,27,.52) 0%, rgba(4,15,27,.14) 26%, rgba(4,15,27,.06) 55%, rgba(4,15,27,.56) 86%, rgba(4,15,27,.72) 100%),
    linear-gradient(0deg, rgba(6,26,38,.16), rgba(6,26,38,.16));
  --hero-logo-filter:drop-shadow(0 3px 10px rgba(2,12,24,.62)) drop-shadow(0 18px 46px rgba(2,12,24,.42));

  /* costura: la ilustración multicolor brilla, anclada con sombra
     tinta-abismo sobre el navy de las secciones */
  --seam:#0E3050;
  --costura-filter:drop-shadow(0 14px 30px rgba(2,12,24,.55)) saturate(1.05);

  /* sección video "Ciudad Oceánica" */
  --sec2-bg:#081F33; --sec2-ink:#F0F7FC;
  --sec2-overlay:
    radial-gradient(120% 95% at 50% 50%, rgba(5,17,30,0) 32%, rgba(5,17,30,.55) 100%),
    linear-gradient(180deg, rgba(11,39,64,.66) 0%, rgba(14,48,80,.26) 40%, rgba(14,48,80,.26) 62%, rgba(11,39,64,.76) 100%);

  /* footer (Puerto Pacífico 1:1) / header */
  --footer-bg:#0B2740; --footer-ink:#C9D6E4; --footer-logo-filter:none;
  --header-bg:rgba(8,29,49,.82); --header-ink:#F0F7FC;
  --header-border:1px solid rgba(56,209,255,.22);

  /* geometría y sombras: una sola luz, cenital, sombras de abismo */
  --radius-card:20px; --radius-pill:999px;
  --card-border:1px solid rgba(56,209,255,.28);
  --card-shadow:0 18px 44px rgba(3,14,26,.50), 0 6px 16px rgba(3,14,26,.35);

  scrollbar-color:#2F7CA3 #0B2740;
}

/* ---------------- 2 · Global: selección y foco ---------------- */
body[data-theme="pacifico-noche"] ::selection{background:#FF6F59; color:#0B2740}
body[data-theme="pacifico-noche"] :is(a,button,input,select,textarea):focus-visible{
  outline:2px solid #2EC4B6; outline-offset:3px; border-radius:4px;
}

/* ---------------- 3 · Header fijo ---------------- */
body[data-theme="pacifico-noche"] .nav{backdrop-filter:saturate(1.25) blur(12px)}
body[data-theme="pacifico-noche"] .nav .menu a{transition:color .18s ease}
body[data-theme="pacifico-noche"] .nav .menu a:hover{color:#FF8F7A}
body[data-theme="pacifico-noche"] .nav .menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  border-radius:2px; background:linear-gradient(90deg,#FF6F59,#FFC53D);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
body[data-theme="pacifico-noche"] .nav .menu a:hover::after{transform:scaleX(1)}
body[data-theme="pacifico-noche"] .nav .icon{opacity:.92}

/* ---------------- 4 · Botones ---------------- */
body[data-theme="pacifico-noche"] .btn{
  font-weight:800; letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(255,111,89,.28), 0 4px 12px rgba(3,14,26,.45);
  transition:transform .15s ease, filter .15s ease, box-shadow .22s ease;
}
body[data-theme="pacifico-noche"] .btn:hover{
  filter:brightness(1.10) saturate(1.06);
  box-shadow:0 16px 38px rgba(255,111,89,.44), 0 6px 16px rgba(3,14,26,.45);
}
body[data-theme="pacifico-noche"] .btn-form{
  background:linear-gradient(120deg,#2EC4B6 0%, #38D1FF 100%);
  box-shadow:0 8px 22px rgba(46,196,182,.26), 0 3px 10px rgba(3,14,26,.4);
}
body[data-theme="pacifico-noche"] .btn-light{
  background:rgba(240,247,252,.10); color:#F0F7FC;
  border:1px solid rgba(240,247,252,.38); box-shadow:none;
}
body[data-theme="pacifico-noche"] .btn-light:hover{
  background:rgba(240,247,252,.20); filter:none;
  box-shadow:0 10px 26px rgba(3,14,26,.4);
}

/* ---------------- 5 · Hero (video + logo blanco) ---------------- */
body[data-theme="pacifico-noche"] .hero{
  background:radial-gradient(110% 80% at 78% 110%, rgba(46,196,182,.14), transparent 55%), #0B2740;
}

/* ---------------- 6 · Sección video "Ciudad Oceánica" ---------------- */
body[data-theme="pacifico-noche"] .sec-title{
  text-shadow:0 4px 26px rgba(2,12,24,.70), 0 2px 60px rgba(255,111,89,.28);
}
body[data-theme="pacifico-noche"] .sec-body-content p{color:#F0F7FC; opacity:.95}
/* olas line-art blancas naciendo de la esquina inferior-izquierda:
   sobre el overlay y SIEMPRE bajo el contenido — espuma gráfica */
body[data-theme="pacifico-noche"] .sec-body::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url(../img/olas-lineart.webp);
  background-repeat:no-repeat; background-position:left bottom;
  background-size:1040px auto;
  opacity:.16;
}

/* =====================================================================
   7 · SECCIONES: blob único, alternancia navy + confetti sutil
   z-index interno: blob ::before = 0 · bandas/confetti ::after = 1 ·
   contenido = 2 (nunca se pisa la lectura).
   ===================================================================== */
body[data-theme="pacifico-noche"] .sec{position:relative; overflow:hidden}
body[data-theme="pacifico-noche"] .sec > *{position:relative; z-index:2}

/* UN blob radial difuso por sección (impares: coral arriba-izq.) */
body[data-theme="pacifico-noche"] .sec::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 42% at 12% 6%, rgba(255,111,89,.34) 0%, transparent 70%);
  filter:blur(64px); opacity:.45;
}
/* pares: fondo navy alterno + blob espuma abajo-derecha */
body[data-theme="pacifico-noche"] .sec:nth-of-type(even){background:var(--seam)}
body[data-theme="pacifico-noche"] .sec:nth-of-type(even)::before{
  background:radial-gradient(44% 40% at 90% 92%, rgba(46,196,182,.26) 0%, transparent 70%);
  opacity:.45;
}
/* confetti sutil (2 colores, 2px) solo en secciones alternas */
body[data-theme="pacifico-noche"] .sec:nth-of-type(even):not(.sec-fiestas):not(.sec-programa-2026)::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(circle, #FFC53D 1.1px, transparent 1.7px),
    radial-gradient(circle, #2EC4B6 1.1px, transparent 1.7px);
  background-size:64px 64px, 64px 64px;
  background-position:0 0, 32px 32px;
  opacity:.07;
}

/* sol girado: acento del título de sección (motivo --mt-sol) */
body[data-theme="pacifico-noche"] .sec-titulo::after{
  content:""; display:inline-block; width:.55em; height:.55em;
  margin-left:.22em; background:var(--accent2);
  -webkit-mask-image:var(--mt-sol); -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:var(--mt-sol); mask-repeat:no-repeat; mask-size:100% 100%;
  transform:rotate(20deg) translateY(.04em);
}

/* ---------------- 8 · Programa 2026: días + ola de transición ---------------- */
/* ola (motivo --mt-ola) que cose esta sección con la siguiente */
body[data-theme="pacifico-noche"] .sec-programa-2026::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  height:clamp(34px,5vw,58px); background:var(--seam); pointer-events:none;
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%; -webkit-mask-position:bottom left;
  mask-image:var(--mt-ola); mask-repeat:repeat-x;
  mask-size:auto 100%; mask-position:bottom left;
}
/* tamborcito espuma antes de la fecha (motivo --mt-tambor) */
body[data-theme="pacifico-noche"] .dia .fecha{
  font-family:"Rye", var(--font-body); font-weight:400; font-size:13.5px; letter-spacing:.10em;
}
body[data-theme="pacifico-noche"] .dia .fecha::before{
  content:""; display:inline-block; width:16px; height:16px; margin-right:8px;
  background:var(--accent); vertical-align:-3px;
  -webkit-mask-image:var(--mt-tambor); -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%;
  mask-image:var(--mt-tambor); mask-repeat:no-repeat; mask-size:100% 100%;
}

/* ---------------- 9 · Cards: superficie nocturna, hover con gusto ---------------- */
body[data-theme="pacifico-noche"] .card,
body[data-theme="pacifico-noche"] .party,
body[data-theme="pacifico-noche"] .dia,
body[data-theme="pacifico-noche"] .prod,
body[data-theme="pacifico-noche"] .pack,
body[data-theme="pacifico-noche"] .form-card{
  background:linear-gradient(170deg,#154A70 0%, #11395C 60%);
}
body[data-theme="pacifico-noche"] .party,
body[data-theme="pacifico-noche"] .prod,
body[data-theme="pacifico-noche"] .pack,
body[data-theme="pacifico-noche"] .dia{
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
body[data-theme="pacifico-noche"] .party:hover,
body[data-theme="pacifico-noche"] .prod:hover,
body[data-theme="pacifico-noche"] .pack:hover,
body[data-theme="pacifico-noche"] .dia:hover{
  transform:translateY(-4px);
  border-color:rgba(255,111,89,.45);
  box-shadow:0 24px 54px rgba(3,14,26,.60), 0 10px 28px rgba(255,111,89,.20);
}
body[data-theme="pacifico-noche"] .col-text p,
body[data-theme="pacifico-noche"] .card p{color:var(--muted)}

/* galería: realce saturado al pasar */
body[data-theme="pacifico-noche"] .gallery img{
  box-shadow:0 14px 34px rgba(3,14,26,.55);
  transition:transform .25s ease, filter .25s ease;
}
body[data-theme="pacifico-noche"] .gallery img:hover{transform:scale(1.02); filter:saturate(1.12)}

/* ---------------- 10 · Fiestas: banderines sol (motivo --mt-banderines) ---------------- */
body[data-theme="pacifico-noche"] .sec-fiestas::after{
  content:""; position:absolute; top:-1px; left:0; right:0; z-index:1;
  height:clamp(30px,4vw,44px); background:var(--accent2); opacity:.92; pointer-events:none;
  -webkit-mask-image:var(--mt-banderines); -webkit-mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%; -webkit-mask-position:top left;
  mask-image:var(--mt-banderines); mask-repeat:repeat-x;
  mask-size:auto 100%; mask-position:top left;
}
body[data-theme="pacifico-noche"] .party-body h3{color:var(--ink)}

/* ---------------- 11 · Tienda + pulsera ---------------- */
body[data-theme="pacifico-noche"] .tienda-cta{
  background:
    radial-gradient(60% 55% at 16% 10%, rgba(255,111,89,.38) 0%, transparent 70%),
    linear-gradient(165deg,#16517A 0%, #11395C 70%);
  color:#F0F7FC;
  border:1px solid rgba(255,111,89,.32);
  box-shadow:0 18px 44px rgba(3,14,26,.55), 0 8px 24px rgba(255,111,89,.14);
  border-radius:var(--radius-card);
}
body[data-theme="pacifico-noche"] .tienda-cta p{color:#F0F7FC}
body[data-theme="pacifico-noche"] .tienda-cta .btn-light{
  background:#F0F7FC; color:#15607B; border:none;
  box-shadow:0 10px 26px rgba(3,14,26,.45);
}
body[data-theme="pacifico-noche"] .tienda-cta .btn-light:hover{background:#fff; color:#FF6F59}

body[data-theme="pacifico-noche"] .cat{
  box-shadow:0 12px 30px rgba(3,14,26,.50), inset 0 0 0 1px rgba(56,209,255,.28);
  transition:transform .2s ease, box-shadow .22s ease;
}
body[data-theme="pacifico-noche"] .cat::after{
  background:linear-gradient(180deg, rgba(4,18,32,0) 30%, rgba(4,18,32,.80) 100%);
}
body[data-theme="pacifico-noche"] .cat:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(3,14,26,.6), inset 0 0 0 2px rgba(255,111,89,.55);
}
body[data-theme="pacifico-noche"] .cat span{text-shadow:0 2px 10px rgba(3,14,26,.8)}

body[data-theme="pacifico-noche"] .pulsera{
  background:linear-gradient(160deg,#FF9078 0%, #FF6F59 55%, #F2563F 100%);
  box-shadow:0 18px 44px rgba(3,14,26,.5), 0 10px 30px rgba(255,111,89,.30);
  border-radius:var(--radius-card);
}
body[data-theme="pacifico-noche"] .pulsera h3,
body[data-theme="pacifico-noche"] .pulsera p{color:var(--on-pink)}
body[data-theme="pacifico-noche"] .pulsera img{box-shadow:0 12px 28px rgba(3,14,26,.40)}
body[data-theme="pacifico-noche"] .pulsera .btn{
  background:#0B2740; color:#F0F7FC;
  box-shadow:0 10px 26px rgba(3,14,26,.45);
}
body[data-theme="pacifico-noche"] .pulsera .btn:hover{
  filter:none; box-shadow:0 14px 34px rgba(3,14,26,.6), 0 0 0 2px rgba(240,247,252,.35);
}

/* ---------------- 12 · Strips: tinte aurora oceánica + cresta de olas ---------------- */
body[data-theme="pacifico-noche"] .strip{
  position:relative; overflow:hidden;
  color:#F0F7FC;
  background:
    linear-gradient(160deg, rgba(255,111,89,.30) 0%, rgba(255,111,89,0) 40%),
    linear-gradient(20deg, rgba(46,196,182,.14) 0%, transparent 38%),
    #14536C;
}
/* banda baja de olas line-art (solo asoma la cresta inferior del PNG) */
body[data-theme="pacifico-noche"] .strip::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url(../img/olas-lineart.webp);
  background-repeat:repeat-x; background-position:bottom left;
  background-size:760px auto;
  opacity:.12;
}
body[data-theme="pacifico-noche"] .strip .container{position:relative; z-index:1}
body[data-theme="pacifico-noche"] .strip h2{color:#F0F7FC}
body[data-theme="pacifico-noche"] .strip p{color:#D7E8F2}

/* ---------------- 13 · Páginas interiores ---------------- */
body[data-theme="pacifico-noche"] .page-hero{
  background:
    linear-gradient(160deg, rgba(255,111,89,.26) 0%, rgba(255,111,89,0) 40%),
    linear-gradient(205deg, rgba(56,209,255,.18) 0%, transparent 45%),
    #0E3050;
}
body[data-theme="pacifico-noche"] .page-hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(40% 52% at 86% 80%, rgba(46,196,182,.28) 0%, transparent 70%);
  filter:blur(60px); opacity:.45;
}
/* ola al pie del page-hero: cose el hero interior con el cuerpo */
body[data-theme="pacifico-noche"] .page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; z-index:1;
  height:clamp(26px,4vw,46px); background:var(--bg); pointer-events:none;
  -webkit-mask-image:var(--mt-ola); -webkit-mask-repeat:repeat-x;
  -webkit-mask-size:auto 100%; -webkit-mask-position:bottom left;
  mask-image:var(--mt-ola); mask-repeat:repeat-x;
  mask-size:auto 100%; mask-position:bottom left;
}
/* gaviotas blancas a la derecha (imágenes reales de gaviotas), lejos del h1;
   van en el ::after del container (z-index:-1) para quedar bajo el
   texto pero sobre el fondo aurora del hero */
/* gaviotas de referencia RETIRADAS también del header noche pacifico-noche (consistencia con día y canon) */
body[data-theme="pacifico-noche"] .page-hero .container::after{content:none}
body[data-theme="pacifico-noche"] .page-hero h1{text-shadow:0 4px 24px rgba(3,14,26,.5)}
body[data-theme="pacifico-noche"] .page-hero .lead{color:#D7E8F2}
body[data-theme="pacifico-noche"] .breadcrumb{
  font-family:"Rye", var(--font-body); font-weight:400;
  color:var(--accent2); letter-spacing:.16em; opacity:1;
}

body[data-theme="pacifico-noche"] .prose .destacado{
  color:#FF8F7A;
  background:linear-gradient(105deg,#FF8F7A 0%, #FFD06B 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* afiches y fotos claras sobre el abismo: marco frío + sombra honda */
body[data-theme="pacifico-noche"] .afiches img{
  background:#fff;
  box-shadow:0 14px 34px rgba(3,14,26,.55);
  transition:transform .22s ease, box-shadow .25s ease;
}
body[data-theme="pacifico-noche"] .afiches img:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(3,14,26,.6), 0 8px 22px rgba(255,111,89,.20);
}

/* tiendita: chips y precios de feria nocturna */
body[data-theme="pacifico-noche"] .chip-cat{transition:border-color .18s ease, transform .18s ease, color .18s ease}
body[data-theme="pacifico-noche"] .chip-cat:hover{border-color:rgba(255,111,89,.55); color:#fff; transform:translateY(-1px)}
body[data-theme="pacifico-noche"] .prod .precio{
  font-family:"Rye", var(--font-display); font-weight:400; color:var(--accent2);
}

/* contacto: formulario nocturno con foco espuma */
body[data-theme="pacifico-noche"] .form-card input,
body[data-theme="pacifico-noche"] .form-card textarea,
body[data-theme="pacifico-noche"] .form-card select{
  background:#0C2C47; border:1px solid rgba(56,209,255,.30); color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body[data-theme="pacifico-noche"] .form-card input::placeholder,
body[data-theme="pacifico-noche"] .form-card textarea::placeholder{color:rgba(166,194,214,.55)}
body[data-theme="pacifico-noche"] .form-card input:focus,
body[data-theme="pacifico-noche"] .form-card textarea:focus,
body[data-theme="pacifico-noche"] .form-card select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,196,182,.18);
}
body[data-theme="pacifico-noche"] .contact-aside a{color:var(--accent)}
body[data-theme="pacifico-noche"] .contact-aside a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------------- 14 · FOOTER: Puerto Pacífico trasplantado 1:1 ----------------
   Cerros con casitas en turquesa (océano→espuma) EN FLUJO sobre el
   abismo + olas line-art blancas de marca de agua abajo-izquierda.
   (Sin colchón en la última sección: aquí los cerros no cuelgan.) */
body[data-theme="pacifico-noche"] .footer{position:relative; padding:0 0 72px}
body[data-theme="pacifico-noche"] .footer::before{
  content:""; display:block; pointer-events:none;
  height:clamp(110px,14vw,190px); margin-bottom:clamp(34px,5vw,54px);
  background:
    linear-gradient(180deg, rgba(11,39,64,0) 30%, rgba(11,39,64,.90) 90%, #0B2740 100%),
    url(../img/sep-olas-oscuras.webp) center / cover no-repeat;
  -webkit-mask-image:var(--mt-ola), linear-gradient(#000,#000);
  -webkit-mask-repeat:repeat-x, no-repeat;
  -webkit-mask-size:auto 24px, 100% calc(100% - 23px);
  -webkit-mask-position:left top, 0 23px;
  mask-image:var(--mt-ola), linear-gradient(#000,#000);
  mask-repeat:repeat-x, no-repeat;
  mask-size:auto 24px, 100% calc(100% - 23px);
  mask-position:left top, 0 23px;
}
/* olas line-art blancas, casi marca de agua, rompiendo en la esquina
   inferior-izquierda del abismo (eco de las olas del sec-body) */
body[data-theme="pacifico-noche"] .footer::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../img/olas-lineart.webp) left bottom / 820px auto no-repeat;
  opacity:.11;
}
body[data-theme="pacifico-noche"] .footer .container{position:relative; z-index:1}
/* los iconos sociales del footer son negros: se pasan a blanco sobre el abismo */
body[data-theme="pacifico-noche"] .foot-social img{filter:brightness(0) invert(1); opacity:.92}
body[data-theme="pacifico-noche"] .foot-social img:hover{opacity:1}
body[data-theme="pacifico-noche"] .foot-logos img{background:#fff; border-radius:10px; padding:6px 9px}
body[data-theme="pacifico-noche"] .foot-credit{opacity:.65}
body[data-theme="pacifico-noche"] .foot-credit img{filter:brightness(0) invert(1)}

/* ---------------- 15 · Responsive fino ---------------- */
@media (max-width:860px){
  body[data-theme="pacifico-noche"] .footer::after{background-size:540px auto}
  body[data-theme="pacifico-noche"] .page-hero .container::after{
    -webkit-mask-position:right 2% top 12%, right 28% top 62%;
    mask-position:right 2% top 12%, right 28% top 62%;
  }
}
@media (max-width:560px){
  body[data-theme="pacifico-noche"] .sec-fiestas::after{height:26px}
  body[data-theme="pacifico-noche"] .sec-programa-2026::after,
  body[data-theme="pacifico-noche"] .page-hero::after{height:26px}
  body[data-theme="pacifico-noche"] .sec-body::after{background-size:680px auto; opacity:.13}
  body[data-theme="pacifico-noche"] .strip::before{background-size:560px auto}
}

/* ===== woo-skin.css ===== */
/* ===== Tiendita · reskin de WooCommerce a los tokens del rediseño 2026 =====
   Se carga dentro del bundle (mt-2026.css). Todo va scopeado a body.woocommerce / .tienda-hero
   para no afectar al resto del sitio. NO reescribe la estructura de Woo: solo color/tipografía/forma. */

/* --- Page-hero de la tienda (inyectado por includes/woo.php) --- */
.tienda-hero{ position:relative; overflow:hidden; padding:clamp(28px,6vw,64px) 0 clamp(18px,4vw,38px); text-align:center }
.tienda-hero .container{ position:relative; z-index:2; max-width:var(--w-content,1100px); margin:0 auto; padding:0 var(--gutter,24px) }
.tienda-hero h1{ font-family:var(--font-display,inherit); font-size:clamp(34px,6vw,62px); margin:0 0 .15em; color:inherit }
.tienda-hero .sec-baja{ max-width:60ch; margin:0 auto 1.1em; opacity:.85 }
.cat-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.cat-chips .cat-chip{ display:inline-block; padding:.5em 1.1em; border-radius:999px; font-family:var(--font-body,system-ui,sans-serif); font-weight:700; font-size:14px; text-decoration:none; background:color-mix(in srgb, currentColor 10%, transparent); color:inherit; border:1px solid color-mix(in srgb, currentColor 22%, transparent); transition:transform .15s ease, background .2s ease, color .2s ease }
.cat-chips .cat-chip:hover{ transform:translateY(-2px); background:var(--btn-bg,#FF6F59); color:var(--btn-on,#fff); border-color:transparent }
.tienda-oso{ position:absolute; right:clamp(-10px,2vw,40px); bottom:-6px; width:min(150px,22vw); height:auto; z-index:1; opacity:.92; pointer-events:none }
@media (max-width:700px){ .tienda-oso{ display:none } }

/* --- Contenedor del shop/categoría --- */
/* OJO: WooCommerce pone .woocommerce y .woocommerce-page en el <body>. NO estilizar esas clases a nivel
   contenedor (rompe el padding-top del nav, mete max-width al body → márgenes blancos + footer comprimido).
   El ancho del contenido va en el wrapper interno #primary (que NO incluye el page-hero full-width). */
.woo-shop #primary, .woo-shop .woocommerce-notices-wrapper{ max-width:var(--w-wide,1340px); margin:0 auto; padding:8px var(--gutter,24px) 64px }
.woo-shop{ font-family:var(--font-body,system-ui,sans-serif) }

/* --- Bloque "Próximamente" reutilizable (tienda / packs / fiestas en preparación) --- */
.mt-soon{ position:relative; max-width:var(--w-content,760px); margin:0 auto; padding:clamp(38px,6vw,66px) clamp(24px,5vw,56px); text-align:center; background:var(--surface,#fff); color:var(--ink,#16131f); border-radius:var(--radius-card,22px); box-shadow:var(--card-shadow,0 18px 50px rgba(3,14,26,.3)); border:var(--card-border,none); overflow:hidden }
.mt-soon::before{ content:""; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--brand,#1B6E8C), var(--accent,#FF4FA3), var(--btn-bg,#FF6F59)) }
.mt-soon__icon{ width:clamp(46px,9vw,62px); height:clamp(46px,9vw,62px); margin:2px auto 12px; display:block; background:var(--btn-bg,#FF6F59); -webkit-mask:var(--mt-tambor) center/contain no-repeat; mask:var(--mt-tambor) center/contain no-repeat }
.mt-soon__eyebrow{ display:inline-block; font-family:var(--font-body,system-ui,sans-serif); font-weight:800; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand,#1B6E8C); opacity:.9 }
.mt-soon__title{ font-size:clamp(30px,8vw,64px); line-height:1.03; margin:.12em 0 .28em; color:inherit; overflow-wrap:break-word }
.mt-soon__text{ max-width:54ch; margin:0 auto 1.5em; font-size:clamp(16px,2vw,18px); opacity:.82 }

/* --- Contacto: correo destacado (clic = copiar al portapapeles) --- */
.mail-cta{ text-align:center }
.mail-cta__label{ display:block; font-family:var(--font-body,system-ui,sans-serif); font-weight:800; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand,#1B6E8C); opacity:.85; margin-bottom:12px }
.mail-cta__mail{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; padding:clamp(20px,4vw,30px) clamp(16px,4vw,34px); border:0; cursor:pointer; border-radius:var(--radius-card,18px); background:var(--surface,#fff); box-shadow:var(--card-shadow,0 14px 40px rgba(0,0,0,.12)); transition:transform .15s ease, box-shadow .2s ease, outline-color .2s ease; outline:2px solid transparent; outline-offset:3px }
.mail-cta__mail:hover{ transform:translateY(-2px); box-shadow:0 22px 52px rgba(3,14,26,.4) }
.mail-cta__mail:active{ transform:translateY(0) }
.mail-cta__mail.is-copied{ outline-color:var(--btn-bg,#FF6F59) }
.mail-cta__addr{ font-family:var(--font-display,inherit); font-weight:800; font-size:clamp(16px,4vw,24px); color:var(--ink,#16131f); line-height:1.15; word-break:break-word }
.mail-cta__hint{ font-family:var(--font-body,system-ui,sans-serif); font-size:13.5px; font-weight:700; letter-spacing:.02em; color:var(--btn-bg,#FF6F59) }
.mail-cta__alt{ margin:16px 0 0; font-size:14px; opacity:.8 }
.mail-cta__alt a{ font-weight:700; color:var(--brand,#1B6E8C); text-decoration:underline; text-underline-offset:3px }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering{ opacity:.8; font-size:14px }
.woocommerce-products-header__title.page-title, .woocommerce h1.page-title{ display:none } /* el hero ya da el título */

/* --- Grilla de productos --- */
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px); margin:0; padding:0; list-style:none }
@media (max-width:1100px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:760px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) } }
.woocommerce ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; display:flex; flex-direction:column; background:var(--surface,#fff); border-radius:var(--radius-card,18px); overflow:hidden; box-shadow:var(--card-shadow,0 14px 40px rgba(0,0,0,.12)); border:var(--card-border,none); transition:transform .2s ease, box-shadow .25s ease }
.woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 24px 54px rgba(3,14,26,.45) }
.woocommerce ul.products li.product a img{ margin:0; border-radius:0; aspect-ratio:1/1; object-fit:cover; width:100% }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--font-body,system-ui,sans-serif); font-weight:800; font-size:16px; color:var(--ink,#16131f); padding:14px 16px 2px; line-height:1.25 }
.woocommerce ul.products li.product .price{ padding:0 16px 12px; color:var(--brand,#1B6E8C); font-weight:800; font-size:18px }
.woocommerce ul.products li.product .price del{ opacity:.5; font-weight:500; margin-right:.4em }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{ margin:auto 16px 16px; text-align:center; background:var(--btn-bg,#FF6F59); color:var(--btn-on,#fff); border-radius:999px; padding:.7em 1.2em; font-weight:700; text-decoration:none; border:0; cursor:pointer; transition:filter .15s ease, transform .15s ease }
.woocommerce ul.products li.product .button:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.woocommerce span.onsale{ background:var(--accent,#FF4FA3); color:#fff; border-radius:999px; border:0 }

/* --- Single product (sin rediseñar layout: solo botones/precio a tokens) --- */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button{ background:var(--btn-bg,#FF6F59); color:var(--btn-on,#fff); border-radius:999px; font-weight:700; border:0 }
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover{ filter:brightness(1.06) }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--brand,#1B6E8C); font-weight:800 }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error{ border-top-color:var(--btn-bg,#FF6F59) }

/* --- Paginación --- */
.woocommerce nav.woocommerce-pagination ul{ border:0; gap:6px; display:flex; justify-content:center }
.woocommerce nav.woocommerce-pagination ul li{ border:0 }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ border-radius:8px; background:color-mix(in srgb, currentColor 8%, transparent) }