/* Sum Sum — estilo "hoja de venta": turquesa, azul marino y rosa */
@font-face{ font-family:'Kaushan'; src:url('../fonts/kaushan-script.woff2') format('woff2'); font-display:swap; }
@font-face{ font-family:'OswaldSS'; src:url('../fonts/oswald-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'OswaldSS'; src:url('../fonts/oswald-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
:root{ --teal:#18aeb7; --teal2:#79cdd0; --navy:#152348; --navy2:#0e264b; --pink:#dd4ca1; --red:#e12631; --white:#fff; }

body{ background:var(--teal) url('../../images/tex-teal.jpg'); color:#fff; }
body, input, textarea, select{ color:#fff; }
#page-wrapper{ background:transparent; }
h1,h2,h3,h4{ color:#fff; }
h2,h3{ font-weight:800; }
a{ color:#fff; }
.script{ font-family:'Kaushan',cursive; font-weight:400 !important; text-transform:none !important; }
.num{ font-family:'OswaldSS','Gotham',sans-serif; font-weight:700; }

/* Marco blanco redondeado, como en la hoja */
body:before{ content:""; position:fixed; inset:14px; border:2px solid rgba(255,255,255,.6); border-radius:28px; pointer-events:none; z-index:60; }
@media (max-width:560px){ body:before{ inset:6px; border-radius:18px; } }

/* Barra superior */
.topbar{ background:var(--navy); color:#fff; text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.8em 1em; }
.topbar a{ color:var(--pink); border-bottom:1px solid var(--pink); }

/* Cabecera */
#header-wrapper{ background:transparent !important; }
#nav > ul > li > a{ color:#fff !important; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
#nav > ul > li.current > a, #nav > ul > li:hover > a{ background:var(--navy) !important; color:#fff !important; }
#nav .dropotron, .dropotron{ background:var(--navy) !important; color:#fff; }
.dropotron a{ color:#fff !important; }
.dropotron li:hover > a, .dropotron li.active > a{ background:var(--pink) !important; }

/* Botones */
.button{ border-radius:999px !important; text-transform:uppercase; letter-spacing:.06em; font-weight:800 !important; }
.button.sun{ background:var(--pink) !important; color:#fff !important; box-shadow:0 4px 0 var(--navy) !important; }
.button.sun:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--navy) !important; }
.button.alt{ background:transparent !important; color:#fff !important; box-shadow:inset 0 0 0 3px #fff !important; }
.button{ background:var(--pink); color:#fff; }

/* Hero */
.hero{ padding:2.5rem 0 0; text-align:center; }
.hero .wrap{ max-width:60rem; margin:0 auto; padding:0 2rem; }
.hero .eyebrow, .pp-copy .eyebrow{ display:inline-block; background:var(--navy); color:#fff; font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:.5em 1.1em; border-radius:999px; margin-bottom:1.2rem; }
.hero h2{ font-size:clamp(2.8rem,7vw,5.6rem); line-height:.95; font-weight:900; text-transform:uppercase; margin:0 0 1rem; }
.hero h2 em{ font-style:normal; color:#fff; background:linear-gradient(transparent 62%,var(--pink) 62%); }
.hero p.lead{ font-size:1.2rem; line-height:1.6; max-width:34rem; margin:0 auto 1.8rem; }
.hero .ctas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.hero .ctas .button{ display:inline-block; width:auto; margin:0; }

/* Banda azul marino */
.band{ background:var(--navy); text-align:center; padding:1rem 0 4rem; }
.band .wrap{ max-width:70rem; margin:0 auto; padding:0 2rem; }
.band .tag{ font-size:clamp(2.6rem,7vw,5rem); color:#fff; margin:1rem 0 2.5rem; line-height:1.1; }
.icons{ display:grid; grid-template-columns:repeat(4,1fr); }
.icon-col{ padding:.5rem 1.2rem; border-left:2px dashed rgba(255,255,255,.35); }
.icon-col:first-child{ border-left:0; }
.icon-col svg{ width:4.6rem; height:4.6rem; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1rem; }
.icon-col b{ display:block; text-transform:uppercase; font-size:.9rem; letter-spacing:.04em; }
.icon-col span{ display:block; text-transform:uppercase; font-size:.7rem; letter-spacing:.14em; opacity:.8; margin-top:.2rem; }
.natural{ margin-top:3.5rem; display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
.natural svg{ width:5rem; height:5rem; fill:#fff; }
.natural .big{ font-size:clamp(2.6rem,6vw,4.4rem); font-weight:900; text-transform:uppercase; line-height:1; text-align:left; }
.natural .big small{ display:block; font-size:.26em; line-height:1.3; letter-spacing:.04em; font-weight:800; }

/* Secciones */
.section{ padding:5rem 0; }
.section .wrap{ max-width:75rem; margin:0 auto; padding:0 2rem; }
.section.dark{ background:var(--navy); }
.section h2.big{ font-size:clamp(2rem,4.5vw,3.4rem); text-transform:uppercase; font-weight:900; line-height:1; margin-bottom:.6rem; }
.section .sub{ font-size:1.1rem; max-width:36rem; margin-bottom:2.5rem; opacity:.92; }

/* Cifras */
.stats .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stats .n{ font-family:'OswaldSS','Gotham',sans-serif; font-weight:700; font-size:clamp(3.4rem,7vw,5.6rem); line-height:1; }
.stats .n small{ font-size:.5em; }
.stats .l{ font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-top:.5rem; }

/* Tarjetas */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{ border-radius:1.6rem; padding:1.6rem; display:flex; flex-direction:column; min-height:30rem; color:var(--navy); transition:transform .2s; text-decoration:none !important; border-bottom:0 !important; }
.card:hover{ transform:translateY(-6px) rotate(-1deg); }
.card h3{ color:var(--navy); font-size:1.7rem; text-transform:uppercase; font-weight:900; margin:0 0 .3rem; }
.card p{ font-size:.92rem; line-height:1.5; margin:0 0 1rem; color:var(--navy); }
.card img{ margin-top:auto; height:17rem; width:100%; object-fit:contain; filter:drop-shadow(0 14px 14px rgba(21,35,72,.3)); transition:transform .25s; }
.card:hover img{ transform:scale(1.05) rotate(2deg); }
.card .more{ margin-top:1rem; font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); }
.k1{ background:#8fd6d4 } .k2{ background:#ff9a8f } .k3{ background:#a9bff0 } .k4{ background:#c4b1ee } .k5{ background:#f7d3bd } .k6{ background:#ffd56a }

/* Tabla con marco rosa (como la lista de la hoja) */
.ptable{ background:var(--navy2); border:4px solid var(--pink); border-radius:1.8rem; padding:.2rem 1.6rem; max-width:62rem; margin:0 auto; }
.prow{ display:grid; grid-template-columns:1fr 14rem 9rem; align-items:center; border-bottom:3px solid var(--pink); padding:.9rem 0; color:#fff; text-decoration:none !important; }
.prow:last-child{ border-bottom:0; }
.prow > *{ padding:0 1.2rem; }
.prow > *:not(:first-child){ border-left:3px dashed var(--pink); }
.prow .nm{ font-weight:800; text-transform:uppercase; font-size:.95rem; line-height:1.35; }
.prow .nm small{ display:block; font-weight:600; opacity:.85; letter-spacing:.03em; }
.prow .sz{ font-family:'OswaldSS','Gotham',sans-serif; font-weight:700; font-size:1.9rem; text-align:center; }
.prow .go{ font-weight:800; text-transform:uppercase; font-size:.8rem; letter-spacing:.1em; text-align:center; color:var(--pink); }
a.prow:hover{ background:rgba(221,76,161,.12); }

/* Selector */
.chips{ display:flex; flex-wrap:wrap; gap:.8rem; }
.chip{ border:3px solid #fff; border-radius:999px; padding:.7em 1.4em; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.85rem; color:#fff; background:transparent; text-decoration:none !important; box-shadow:none !important; }
.chip:hover{ background:#fff; color:var(--navy); }

/* Pasos */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; counter-reset:s; }
.step{ position:relative; padding-top:4.5rem; }
.step:before{ counter-increment:s; content:counter(s); position:absolute; top:0; left:0; width:3.4rem; height:3.4rem; border-radius:50%; background:var(--pink); color:#fff; font-family:'OswaldSS','Gotham',sans-serif; font-weight:700; font-size:1.7rem; display:flex; align-items:center; justify-content:center; }
.step h3{ text-transform:uppercase; font-size:1.3rem; margin-bottom:.4rem; }

/* Banda final */
.cta-band{ background:var(--navy); color:#fff; text-align:center; padding:5rem 2rem; }
.cta-band h2{ font-size:clamp(2rem,5vw,4rem); font-weight:900; margin-bottom:1.5rem; }
.cta-band .script{ display:block; font-size:clamp(2.4rem,6vw,4.4rem); margin-bottom:1.2rem; line-height:1.1; }

/* Páginas interiores */
#main-wrapper{ background:var(--navy) !important; }
#main-wrapper, #main-wrapper p, #main-wrapper li, #main-wrapper h2, #main-wrapper h3, #main-wrapper a{ color:#fff; }
#main-wrapper ul.style2 li{ border-color:rgba(255,255,255,.2) !important; }
#main-wrapper .button{ color:#fff; }
#main-wrapper input, #main-wrapper textarea{ background:rgba(255,255,255,.08) !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important; }
#main-wrapper ::placeholder{ color:rgba(255,255,255,.65); }
#footer-wrapper{ background:var(--navy2) !important; margin-top:0 !important; padding-top:3rem; }
#footer, #footer h3, #footer p, #footer a, #footer li, #copyright, #copyright a{ color:#e6f4f6 !important; }
#footer h3{ color:var(--pink) !important; text-transform:uppercase; letter-spacing:.1em; }
#footer ul.style2 li{ border-color:rgba(255,255,255,.15) !important; }
#footer .icon, #footer .contact ul li a{ background:var(--pink) !important; color:#fff !important; }
#footer .icon:before{ color:#fff !important; }

/* Lista de gamas (interior) */
a.prod, .prod{ display:flex; align-items:center; gap:1.5rem; border-radius:1.4rem; padding:1.4rem 1.6rem; margin:0 0 1.2rem; text-decoration:none !important; border-bottom:0 !important; transition:transform .2s; }
a.prod:hover{ transform:translateX(6px); }
.prod img{ width:7.5rem; flex:none; filter:drop-shadow(0 8px 8px rgba(21,35,72,.3)); }
.prod h3, .prod p, .prod .more{ color:var(--navy) !important; }
.prod h3{ text-transform:uppercase; font-weight:900; margin:0 0 .3rem; }
.prod p{ margin:0 0 .4rem; line-height:1.5; }
.prod .fmt{ font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.prod .more{ display:inline-block; margin-top:.2rem; font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }

/* Ficha de producto */
.pp-hero{ padding:3rem 0 4rem; }
.pp-hero, .pp-hero h1, .pp-hero p, .pp-hero a:not(.button){ color:var(--navy); }
.pp-hero .wrap{ max-width:75rem; margin:0 auto; padding:0 2rem; display:flex; align-items:center; gap:3rem; }
.pp-img{ flex:0 0 38%; text-align:center; }
.pp-img img{ max-height:34rem; width:auto; max-width:100%; filter:drop-shadow(0 22px 20px rgba(21,35,72,.4)); }
.pp-copy{ flex:1; }
.pp-copy .crumb{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }
.pp-copy h1{ font-size:clamp(2.6rem,6vw,5rem); font-weight:900; text-transform:uppercase; line-height:.95; margin-bottom:1rem; }
.pp-copy .lead{ font-size:1.15rem; line-height:1.6; max-width:34rem; margin-bottom:1.4rem; }
.pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.pill{ background:var(--navy); color:#fff; font-weight:800; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; padding:.55em 1.1em; border-radius:999px; }
.pp-copy .ctas{ display:flex; flex-wrap:wrap; gap:1rem; }
.pp-copy .ctas .button{ display:inline-block; width:auto; margin:0; }
.pp-copy .ctas .button.alt{ color:var(--navy) !important; box-shadow:inset 0 0 0 3px var(--navy) !important; }
.bens{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:2rem; }
.ben{ border-top:4px solid var(--pink); padding-top:1rem; }
.ben h4{ text-transform:uppercase; font-weight:900; font-size:1rem; margin-bottom:.4rem; }
.ben p{ font-size:.95rem; line-height:1.55; }
.specs{ display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; margin-top:2rem; }
.specs h3{ text-transform:uppercase; font-weight:900; font-size:1.1rem; margin-bottom:.8rem; }
.specs p{ line-height:1.7; }
.tbl{ width:100%; border-collapse:collapse; }
.tbl th, .tbl td{ text-align:left; padding:.65rem .2rem; border-bottom:2px dashed rgba(221,76,161,.7); font-size:.95rem; color:#fff; background:none; }
.tbl th{ font-weight:600; } .tbl td{ font-weight:800; text-align:right; font-family:'OswaldSS','Gotham',sans-serif; font-size:1.1rem; }
.note{ font-size:.8rem; opacity:.75; margin-top:2rem; }
.minis{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:2rem; }
.mini{ border-radius:1.2rem; padding:1rem; text-align:center; color:var(--navy) !important; font-weight:900; text-transform:uppercase; font-size:.85rem; text-decoration:none !important; border-bottom:0 !important; transition:transform .2s; }
.mini:hover{ transform:translateY(-4px); }
.mini img{ height:9rem; width:auto; margin:0 auto .6rem; display:block; filter:drop-shadow(0 8px 8px rgba(21,35,72,.3)); }

@media (max-width:980px){
	.icons{ grid-template-columns:repeat(2,1fr); row-gap:1.5rem; } .icon-col:nth-child(3){ border-left:0; }
	.stats .grid4{ grid-template-columns:repeat(2,1fr); } .cards{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:1fr; }
	.pp-hero .wrap{ flex-direction:column; } .bens{ grid-template-columns:repeat(2,1fr); } .specs{ grid-template-columns:1fr; } .minis{ grid-template-columns:repeat(3,1fr); }
	.prow{ grid-template-columns:1fr 9rem; } .prow .go{ display:none; }
}
@media (max-width:560px){
	.cards{ grid-template-columns:1fr; } .section{ padding:3.5rem 0; } .bens{ grid-template-columns:1fr; } .minis{ grid-template-columns:repeat(2,1fr); }
	.prow{ grid-template-columns:1fr; } .prow > *:not(:first-child){ border-left:0; text-align:left; } .prow .sz{ text-align:left; font-size:1.5rem; }
}

/* Ajustes de la capa nueva */
.hero, .band, .section, .cta-band, .pp-hero, .fan-wrap{ margin:0 !important; }
.icon-col, .icon-col b, .icon-col span{ color:#fff !important; }
.icon-col span{ opacity:.8; }
.natural, .natural .big, .natural .big small{ color:#fff !important; }
.band .tag{ color:#fff !important; }
.prow .nm, .prow .nm small, .prow .sz{ color:#fff !important; }
.prow .go{ color:var(--pink) !important; }
.stats .n, .stats .l{ color:#fff; }

/* Titular a pincel y botones más discretos */
.hero h2.script{ font-size:clamp(3.8rem,11vw,8rem); line-height:1; margin:.4rem 0 1.2rem; text-transform:none; letter-spacing:0; }
.hero{ padding-top:3.5rem; }
.hero .button, .cta-band .button, .pp-copy .button{ font-size:.85rem !important; line-height:2.9em !important; height:2.9em !important; padding:0 1.8em !important; }
.hero .button:before, .cta-band .button:before, .pp-copy .button:before{ margin-right:.6em; font-size:1em; }
.hero h2.script{ font-size:clamp(2.8rem,8.5vw,6.4rem); white-space:nowrap; margin:.2rem 0 1.8rem; }
@media (max-width:560px){ .hero h2.script{ white-space:normal; } }

/* Sin marco; sacos en fila limpia; pastillas de formato */
body:before{ display:none !important; }
.fmts .pill{ background:var(--pink); }
@media (max-width:980px){ }
@media (max-width:560px){ }
@media (max-width:980px){ }
@media (max-width:560px){ }
@media (max-width:980px){ .topbar{ display:none; } }

/* ===== Sacos: fila sobre la repisa + animación ===== */
.hero{ padding-bottom:0; }
.hero h2.script{ font-size:clamp(2.8rem,7vw,6rem); white-space:normal; margin:.2rem 0 1.2rem; }
@media (min-width:760px){ .hero h2.script{ white-space:nowrap; } }
.hero h2.script span{ display:inline-block; animation:write 1.7s cubic-bezier(.65,0,.35,1) .2s both; }
.hero p.lead{ animation:fadeup .9s ease .9s both; margin-bottom:0; }
.fan-wrap{ margin-top:1.5rem !important; position:relative; background:linear-gradient(to bottom, transparent 0 calc(100% - 1.4rem), var(--navy) calc(100% - 1.4rem) 100%); }
.fan{ max-width:78rem; margin:0 auto; display:flex; justify-content:center; align-items:flex-end; gap:1.2vw; height:calc(min(21rem,22vw) + 1.4rem); padding:0 1rem; }
.fan .sk{ position:relative; height:min(21rem,22vw); flex:none; margin-bottom:-1.4rem; animation:rise 1s cubic-bezier(.2,.9,.3,1.15) calc(1s + var(--i) * .13s) both; }
.fan .sk:after{ content:""; position:absolute; left:8%; right:8%; bottom:-.2rem; height:1.1rem; background:radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%); z-index:-1; filter:blur(3px); }
.fan .sk img{ height:100%; width:auto; display:block; filter:drop-shadow(0 10px 10px rgba(10,20,50,.35)); transform-origin:50% 100%; animation:bob 5.5s ease-in-out calc(2.2s + var(--i) * .5s) infinite; transition:transform .3s; }
.fan .sk:hover img{ animation-play-state:paused; transform:translateY(-14px) rotate(-3deg) scale(1.05); }
.fan .sk:nth-child(odd) img{ --tilt:-1.2deg; } .fan .sk:nth-child(even) img{ --tilt:1.2deg; }
@keyframes rise{ from{ transform:translateY(130%); opacity:0; } 60%{ opacity:1; } to{ transform:none; opacity:1; } }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(var(--tilt,0deg)); } 50%{ transform:translateY(-.7rem) rotate(calc(var(--tilt,0deg) * -1)); } }
@keyframes write{ from{ clip-path:inset(-25% 100% -25% 0); opacity:.2; } to{ clip-path:inset(-25% -5% -25% 0); opacity:1; } }
@keyframes fadeup{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){ .fan .sk:nth-child(1), .fan .sk:nth-child(6){ display:none; } .fan{ height:calc(36vw + 1.4rem); gap:2vw; } .fan .sk{ height:36vw; } }

/* Aparición al hacer scroll */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); }
.rv.in{ opacity:1; transform:none; }
.card.rv.in:hover{ transform:translateY(-6px) rotate(-1deg); transition-delay:0s; }
.icon-col svg{ transition:transform .4s; } .icon-col:hover svg{ transform:translateY(-6px) rotate(-6deg); }
@media (prefers-reduced-motion:reduce){ .hero h2.script span, .hero p.lead, .fan .sk, .fan .sk img{ animation:none !important; } .rv{ opacity:1; transform:none; transition:none; } }
.hero{ padding-top:0 !important; }
.hero h2.script{ margin:0 0 .6rem; font-size:clamp(2.8rem,6.2vw,5.4rem); }
.hero p.lead{ font-size:1.1rem; }
.fan-wrap{ margin-top:1rem !important; }
.fan{ height:calc(min(19rem,20vw) + 1.4rem); } .fan .sk{ height:min(19rem,20vw); }
@media (max-width:560px){ .fan{ height:calc(36vw + 1.4rem); } .fan .sk{ height:36vw; } }

/* perro de fondo fundido con el turquesa */
.hero{ position:relative; overflow:hidden; }
.hero .hero-dog{ position:absolute; right:-2%; top:0; height:100%; width:auto; max-width:75%; object-fit:cover; object-position:left top; mix-blend-mode:screen; opacity:.85; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 62% 45%,#000 45%,transparent 100%); mask-image:radial-gradient(ellipse 70% 75% at 62% 45%,#000 45%,transparent 100%); animation:fadeup 1.4s ease .3s both; }
.hero .wrap, .hero .fan-wrap{ position:relative; z-index:1; }
@media (max-width:760px){ .hero .hero-dog{ opacity:.55; max-width:100%; right:-20%; } }
.hero .hero-dog{ top:-3%; height:80%; right:1%; opacity:.9; }
@media (max-width:760px){ .hero .hero-dog{ height:62%; max-width:none; right:-18%; top:auto; bottom:12%; opacity:.4; } }
.k7{ background:#b9e3a6 }
.cards .card:last-child:nth-child(3n+1){ grid-column:2; }
@media (max-width:560px){ .fan .sk:nth-child(2), .fan .sk:nth-child(7){ display:none; } }
.hero .hero-dog{ top:-6%; height:108%; right:-4%; max-width:85%; }
@media (max-width:760px){ .hero .hero-dog{ height:80%; right:-22%; bottom:8%; top:auto; opacity:.4; } }
.hero .hero-dog{ right:7%; }
@media (max-width:560px){ .fan .sk:nth-child(2){ display:block; } .fan .sk:nth-child(6){ display:none; } .fan .sk:nth-child(1){ display:none; } }
@media (max-width:760px){ .hero .hero-dog{ right:-22%; } }
@media (max-width:560px){ .fan .sk:nth-child(1), .fan .sk:nth-child(2), .fan .sk:nth-child(7){ display:none; } .fan .sk:nth-child(6){ display:block; } }
.fan .sk img{ border-radius:0; }

/* ===== v3: fondos alternos, minúsculas, selector, fichas comerciales ===== */
:root{ --cream:#fff5e9; }
.section.cream{ background:var(--cream); color:var(--navy); }
.section.cream h2, .section.cream h3, .section.cream p, .section.cream .sub{ color:var(--navy); }
.section.teal{ background:transparent; color:#fff; }
.section.teal h2, .section.teal h3, .section.teal p{ color:#fff; }
/* menos mayúsculas */
.section h2.big, .card h3, .prod h3, .pp-copy h1, .ben h4, .specs h3, .step h3, .natural .big, .stats .l, .icon-col b, .prow .nm, .mini, .pill{ text-transform:none !important; letter-spacing:0 !important; }
.section h2.big{ font-weight:800; }
.pp-copy h1{ font-size:clamp(2.4rem,5.2vw,4.2rem); line-height:1; }
.pill{ font-size:.85rem; }
/* H1 de portada */
.hero .hero-h1{ font-size:.9rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0; opacity:.95; }
/* banda de iconos con imágenes */
.band{ padding:2.2rem 0 2.6rem; }
.icon-col img{ height:4.4rem; width:auto; display:block; margin:0 auto 1rem; transition:transform .4s; }
.icon-col:hover img{ transform:translateY(-6px) rotate(-5deg); }
.icon-col b{ font-size:1rem; font-weight:800; }
.seals{ margin-top:2.2rem; display:flex; align-items:center; justify-content:center; gap:2.5rem; flex-wrap:wrap; }
.seals .s-nat{ height:5.2rem; width:auto; } .seals .s-q{ height:5.6rem; width:auto; }
/* estadísticas sobre crema */
.stats .n{ color:var(--navy) !important; } .stats .n small{ color:var(--pink); }
.stats .l{ color:var(--navy) !important; font-size:.95rem; font-weight:700; line-height:1.35; }
.statnote{ max-width:46rem; margin:2.2rem auto 0; font-size:.95rem; line-height:1.55; text-align:center; }
/* selector */
.finder{ display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem; align-items:flex-start; margin-bottom:1.2rem; }
.fgroup h3{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .5rem; opacity:.9; }
.opts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.opt{ appearance:none; border:2px solid #fff; background:transparent; color:#fff; border-radius:999px; padding:.55em 1.1em; font:700 .95rem 'Gotham',sans-serif; cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.opt:hover{ background:rgba(255,255,255,.2); }
.opt[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; transform:scale(1.04); }
.reset{ appearance:none; border:0; background:none; color:#fff; text-decoration:underline; font:700 .9rem 'Gotham',sans-serif; cursor:pointer; align-self:flex-end; }
.fcount{ font-weight:700; margin:0 0 1rem; min-height:1.4em; }
.fempty{ font-weight:700; padding:1.5rem 0; }
.fnote{ margin-top:2rem; font-size:.9rem; opacity:.9; max-width:40rem; }
.card[hidden]{ display:none !important; }
.card{ transition:opacity .3s, transform .3s; }
.cards .card:last-child:nth-child(3n+1){ grid-column:auto; }
/* ficha comercial */
.pp-img{ position:relative; }
.pp-seal{ position:absolute; right:-1rem; bottom:1.5rem; width:7.5rem !important; height:auto !important; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3)); transform:rotate(-6deg); }
.b3s{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2rem; }
.b3{ background:#fff; border-radius:1.4rem; padding:1.8rem 1.6rem; box-shadow:0 8px 20px rgba(21,35,72,.08); }
.b3 .num{ display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--pink); color:#fff; font-weight:900; margin-bottom:.9rem; }
.b3 h3{ font-size:1.25rem; font-weight:800; margin:0 0 .5rem; color:var(--navy) !important; }
.b3 p{ font-size:1rem; line-height:1.55; margin:0; }
.hls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.4rem; margin-top:1.6rem; }
.hl{ text-align:center; border:3px dashed rgba(255,255,255,.7); border-radius:1.4rem; padding:1.4rem 1rem; }
.hl b{ display:block; font-family:'OswaldSS','Gotham',sans-serif; font-size:3.6rem; line-height:1; } .hl b small{ font-size:.5em; }
.hl span{ display:block; margin-top:.4rem; font-weight:700; }
.fmtgrid{ display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; }
.fmtgrid h3{ font-size:1.2rem; font-weight:800; margin:0 0 .8rem; }
.fmtgrid .diff{ margin-top:1.6rem; font-size:1.05rem; line-height:1.55; background:#fff; border-left:5px solid var(--pink); padding:1rem 1.2rem; border-radius:0 1rem 1rem 0; }
.cream .tbl th, .cream .tbl td{ color:var(--navy); border-color:rgba(21,35,72,.15); }
.tbl.feed th{ text-align:left; } .tbl.feed td, .tbl.feed th{ padding:.55rem .6rem; }
.tscroll{ overflow-x:auto; }
.tbl.cmp{ min-width:42rem; } .tbl.cmp th, .tbl.cmp td{ padding:.7rem .8rem; text-align:left; vertical-align:top; }
.tbl.cmp th a{ color:#fff; font-weight:800; }
.tbl.cmp tr.me{ background:rgba(21,35,72,.35); }
@media (max-width:980px){ .b3s{ grid-template-columns:1fr; } .fmtgrid{ grid-template-columns:1fr; gap:2rem; } .pp-seal{ right:0; } }
/* móvil: menos animación */
@media (max-width:560px){ .fan .sk img{ animation:none !important; } .hero .hero-dog{ animation:none !important; } .icon-col img{ height:3.4rem; } }
.hl b{ color:#fff; }
.hero .hero-dog{ top:-14%; height:140%; right:-6%; max-width:none; opacity:.92;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 56% 50%,#000 50%,transparent 100%); mask-image:radial-gradient(ellipse 62% 62% at 56% 50%,#000 50%,transparent 100%); }
@media (max-width:760px){ .hero .hero-dog{ height:85%; right:-35%; top:auto; bottom:6%; opacity:.4; } }
.hero .hero-dog{ right:3%; top:-10%; }
.hero .hero-dog{ opacity:1; -webkit-mask-image:radial-gradient(ellipse 72% 72% at 56% 50%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 72% 72% at 56% 50%,#000 55%,transparent 100%); }
.legal .wrap{ max-width:50rem !important; }
.legal h1.big{ font-size:clamp(2rem,4.5vw,3rem); font-weight:800; margin-bottom:1.5rem; }
.legal h2{ font-size:1.25rem; font-weight:800; margin:2rem 0 .6rem; color:var(--navy); }
.legal p, .legal li{ font-size:1rem; line-height:1.65; color:var(--navy); }
.legal ul{ padding-left:1.2rem; list-style:disc; margin-bottom:1rem; }
.legal a{ color:var(--pink); text-decoration:underline; }
#copyright .menu li{ display:inline; } #copyright{ line-height:2; }
.legal h1.big{ color:var(--navy) !important; } .legal li{ color:var(--navy) !important; }
.faq .wrap{ max-width:50rem !important; }
.faq h1.big, .faq h2.big{ color:var(--navy) !important; font-size:clamp(2rem,4.5vw,3rem); font-weight:800; }
.qa{ background:#fff; border-radius:1rem; margin-bottom:.8rem; box-shadow:0 4px 12px rgba(21,35,72,.07); }
.qa summary{ cursor:pointer; list-style:none; padding:1.1rem 3rem 1.1rem 1.3rem; font-weight:800; color:var(--navy); position:relative; line-height:1.4; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:after{ content:"+"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%); width:1.8rem; height:1.8rem; line-height:1.7rem; text-align:center; border-radius:50%; background:var(--pink); color:#fff; font-size:1.2rem; transition:transform .2s; }
.qa[open] summary:after{ content:"–"; }
.qa p{ padding:0 1.3rem 1.2rem; margin:0; color:var(--navy); line-height:1.65; }
.faqend{ margin-top:1.5rem; color:var(--navy); } .faqend a{ color:var(--pink); text-decoration:underline; }
@media (min-width:981px){ .minis{ grid-template-columns:repeat(6,1fr); } }
.faq h2.big{ margin-bottom:1.4rem; }
/* ingredientes y quiénes somos */
.hl{ position:relative; padding-top:1rem; }
.hlimg{ height:5.5rem; width:auto; max-width:8rem; object-fit:contain; display:block; margin:0 auto .4rem; filter:drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.also{ margin:2.2rem 0 .8rem; font-weight:800; }
.alsoimgs,.slc{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.alsoimgs figure,.slc figure{ margin:0; text-align:center; width:6.5rem; }
.alsoimgs img,.slc img{ height:4.4rem; width:auto; max-width:6rem; object-fit:contain; display:block; margin:0 auto .3rem; }
.slc figure{ width:8rem; } .slc img{ height:6rem; max-width:7.5rem; }
.alsoimgs figcaption,.slc figcaption{ font-size:.85rem; font-weight:700; }
.slc figcaption{ color:var(--navy); }
.ingg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:1.4rem; margin-top:1rem; }
.ingc{ text-align:center; background:#fff; border-radius:1.2rem; padding:1.2rem .8rem; box-shadow:0 6px 16px rgba(21,35,72,.07); }
.ingc img{ height:6rem; width:auto; max-width:100%; object-fit:contain; display:block; margin:0 auto .6rem; transition:transform .3s; } .ingc:hover img{ transform:scale(1.08) rotate(-3deg); }
.ingc b{ display:block; color:var(--navy); font-size:1.05rem; }
.ingc span{ display:block; margin-top:.3rem; font-size:.8rem; line-height:1.4; color:var(--navy); }
.ingc a{ color:var(--pink); text-decoration:underline; }
.about .narrow{ max-width:46rem !important; } .about h1.big{ color:var(--navy) !important; font-size:clamp(2.2rem,5vw,3.6rem); font-weight:800; }
.lead2{ font-size:1.3rem; line-height:1.55; } .about p{ color:var(--navy); line-height:1.7; }
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:1.5rem; }
.pil{ text-align:center; } .pil img{ height:5rem; width:auto; margin-bottom:.8rem; } .pil h3{ font-size:1.15rem; font-weight:800; margin:0 0 .4rem; } .pil p{ font-size:.95rem; line-height:1.5; }
.fnote2{ margin-top:1.5rem; font-size:.9rem; color:var(--navy); }
.kmrow{ display:flex; align-items:center; gap:3rem; flex-wrap:wrap; } .kmrow img{ width:13rem; height:auto; filter:drop-shadow(0 8px 10px rgba(0,0,0,.25)); } .kmrow>div{ flex:1; min-width:16rem; } .kmrow p{ font-size:1.1rem; line-height:1.6; margin-bottom:1.4rem; }
.sealrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:1.5rem; text-align:center; align-items:end; }
.sealrow img{ height:8rem; width:auto; max-width:100%; object-fit:contain; background:var(--navy); border-radius:1.2rem; padding:1.2rem 1.6rem; } .sealrow p{ margin-top:.8rem; color:var(--navy); font-weight:700; }
@media (max-width:980px){ .ingg{ grid-template-columns:repeat(3,1fr); } .pillars{ grid-template-columns:repeat(2,1fr); } .sealrow{ grid-template-columns:1fr; } }
@media (max-width:560px){ .ingg{ grid-template-columns:repeat(2,1fr); } .pillars{ grid-template-columns:1fr; } .kmrow{ gap:1.5rem; } }
.about h1.big{ margin-bottom:1.2rem; }
@media (max-width:980px){ .ingg{ grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); } }
.hls{ grid-template-columns:repeat(auto-fit,minmax(11rem,15rem)); }
.hl{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:13rem; }
.pp-seal{ width:6.5rem !important; right:-3rem; bottom:.5rem; }
@media (max-width:980px){ .pp-seal{ right:-.5rem; } }
/* perro de fondo: desde el menú hasta los sacos */
#page-wrapper{ position:relative; overflow-x:hidden; }
.dogbg{ position:absolute; top:51px; right:1%; height:min(920px,72vw); width:auto; max-width:none; z-index:0; pointer-events:none; mix-blend-mode:screen; opacity:1;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 56% 48%,#000 52%,transparent 100%); mask-image:radial-gradient(ellipse 70% 70% at 56% 48%,#000 52%,transparent 100%); animation:fadeup 1.4s ease .3s both; }
#header-wrapper{ position:relative; z-index:3; }
.hero{ position:relative; z-index:1; overflow:visible; }
.hero .hero-dog{ display:none !important; }
@media (max-width:760px){ .dogbg{ top:60px; height:640px; right:-40%; opacity:.45; } }
@media (prefers-reduced-motion:reduce){ .dogbg{ animation:none; } }
.hero{ clip-path:inset(-400px -50vw 0 -50vw); }
.hero .dogbg{ top:-11.4rem; right:0; height:calc(100% + 11.4rem); width:auto; max-width:none; }
.hero .wrap, .hero .fan-wrap{ position:relative; z-index:1; }
@media (max-width:980px){ .hero .dogbg{ top:-4rem; height:calc(100% + 4rem); } }
@media (max-width:760px){ .hero .dogbg{ right:-30%; opacity:.45; top:-3rem; height:calc(100% + 3rem); } }
.hero{ clip-path:none; z-index:auto; }