*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brandbook Keene's (Estudio Pantera 2023), suavizado hacia pastel */
    --purple:       #655CC9;   /* Keenes Soul Purple, tal cual */
    --purple-dark:  #3E3888;
    --purple-light: #ECEAFA;
    --red:          #FF8080;   /* Positive Red #FF5C5C */
    --orange:       #FFA97F;   /* Caramel Orange #FF8C54 */
    --yellow:       #FFEE9A;   /* Tropical Yellow #FFEB76 */
    --green:        #7FE3B8;   /* Healthy Green #36DE95 */
    --blue:         #93D9F6;   /* Cream Blue #57CBF5 */
    --cacao:        #9A6450;   /* Sweet Cacao #824B36 */
    --ink:          #25213F;
    --white:        #FFFFFF;
    --cream:        #FBF8F3;
    --gray:         #F3F3F1;
    --muted:        #6E6A80;
    --line:         rgba(37, 33, 63, 0.12);
    --shadow:       0 20px 48px rgba(101, 92, 201, 0.14);
    --display:      'Titan One', sans-serif;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Jost', sans-serif;
    color: var(--ink);
    background: var(--white);
    overflow-x: clip;
    font-size: 1rem;
    line-height: 1.55;
}
img { display: block; max-width: 100%; }

.display {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.08;
}
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 3rem; }
.kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 0.9rem;
}
.wrap .kicker { color: var(--purple); font-size: 0.78rem; line-height: 1.5; max-width: none; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: inherit;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13); }
.btn-primary { background: var(--purple); color: var(--white); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.link-arrow {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.link-arrow:hover { color: var(--purple); }

/* ── NAV ── */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 68px;
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.07);
}
.nav-logo { display: block; height: 46px; aspect-ratio: 1081 / 641; background: var(--purple); -webkit-mask: url('images/logo-black.png') center / contain no-repeat; mask: url('images/logo-black.png') center / contain no-repeat; }
nav ul { list-style: none; display: flex; gap: 2.2rem; align-items: center; }
nav ul a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.92rem; transition: color 0.2s; }
nav ul a:hover { color: var(--purple); }
nav ul a.nav-cta {
    background: var(--purple);
    color: var(--white);
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    transition: transform 0.2s;
}
nav ul a.nav-cta:hover { color: var(--white); transform: rotate(-3deg); }
.hamburger { display: none; background: none; border: none; cursor: pointer; font-family: var(--display); font-size: 1.15rem; color: var(--ink); }

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 101;
    flex-direction: column;
    justify-content: center;
    padding: 0 1.5rem;
    gap: 0.6rem;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--ink);
    text-decoration: none;
}
.mobile-menu a:hover { color: var(--purple); }
.close-btn {
    position: absolute;
    top: 1rem; right: 1.5rem;
    background: none; border: none;
    font-family: var(--display);
    font-size: 1.15rem;
    color: var(--ink);
    cursor: pointer;
}

/* ── HERO ── */
.hero {
    background: var(--cream);
    color: var(--ink);
    padding: 120px 0 4rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.hero-type { position: relative; z-index: 2; padding: 0 3rem; max-width: 52%; }
.hero-type { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; }
.hero-type .line { display: block; white-space: nowrap; line-height: 0.96; }
.hero-type .l1 { font-size: min(17vw, 29vh); }
.hero-type .l2 { font-size: min(11vw, 19vh); margin-top: 0.06em; }
.hero-type .l3 { font-size: min(14.5vw, 25vh); margin-top: 0.04em; }
.hero-type .l3 { color: var(--purple); }
.hero-photo {
    position: absolute;
    top: 68px; right: 0; bottom: 0;
    width: 50%;
    overflow: hidden;
}
.hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right, var(--cream) 0%, rgba(251, 248, 243, 0) 22%),
        linear-gradient(to top, var(--cream) 0%, rgba(251, 248, 243, 0) 18%);
}
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-slide:nth-child(1) { background-image: url('images/flavors/03-senorita-klp.webp'); }
.hero-slide:nth-child(2) { background-image: url('images/flavors/08-ito-salaito.webp'); }
.hero-slide:nth-child(3) { background-image: url('images/flavors/06-osadia.webp'); }
.hero-slide:nth-child(4) { background-image: url('images/flavors/11-citric-rush.webp'); }
.hero-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2.5rem;
    padding: 0 3rem;
    max-width: 52%;
    position: relative;
    z-index: 2;
}
.hero-status { list-style: none; display: grid; gap: 0.55rem; }
.hero-status a { display: flex; align-items: center; gap: 0.8rem; color: var(--ink); text-decoration: none; }
.hero-status i { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--red); }
.hero-status .is-open i { background: var(--green); animation: pulse 2s ease-in-out infinite; }
.hero-status strong { width: 8.2em; font-size: 1.15rem; line-height: 1; transition: color 0.2s; }
.hero-status span { color: var(--muted); font-size: 0.95rem; }
.hero-status a:hover strong { color: var(--purple); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(127, 227, 184, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(127, 227, 184, 0); } }
.hero-actions { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }

/* ── SABORES (vitrina) ── */
#sabores { position: relative; background: var(--purple-light); padding: 9rem 0 6rem; }
.melt {
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 110px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27720%27%20height%3D%27110%27%20viewBox%3D%270%200%20720%20110%27%3E%3Cpath%20fill%3D%27%23FDF8F2%27%20d%3D%27M0%2C0%20H720%20V20%20H0%20Z%20M9%2C20%20Q18%2C20%2018%2C31%20V61%20A13%2C13%200%200%200%2044%2C61%20V31%20Q44%2C20%2053%2C20%20Z%20M61%2C20%20Q70%2C20%2070%2C31%20V32%20A8%2C8%200%200%200%2086%2C32%20V31%20Q86%2C20%2095%2C20%20Z%20M103%2C20%20Q112%2C20%20112%2C31%20V87%20A17%2C17%200%200%200%20146%2C87%20V31%20Q146%2C20%20155%2C20%20Z%20M167%2C20%20Q176%2C20%20176%2C31%20V48%20A10%2C10%200%200%200%20196%2C48%20V31%20Q196%2C20%20205%2C20%20Z%20M217%2C20%20Q226%2C20%20226%2C31%20V74%20A14%2C14%200%200%200%20254%2C74%20V31%20Q254%2C20%20263%2C20%20Z%20M275%2C20%20Q284%2C20%20284%2C31%20V29%20A7%2C7%200%200%200%20298%2C29%20V31%20Q298%2C20%20307%2C20%20Z%20M313%2C20%20Q322%2C20%20322%2C31%20V54%20A12%2C12%200%200%200%20346%2C54%20V31%20Q346%2C20%20355%2C20%20Z%20M371%2C20%20Q380%2C20%20380%2C31%20V39%20A9%2C9%200%200%200%20398%2C39%20V31%20Q398%2C20%20407%2C20%20Z%20M415%2C20%20Q424%2C20%20424%2C31%20V80%20A18%2C18%200%200%200%20460%2C80%20V31%20Q460%2C20%20469%2C20%20Z%20M485%2C20%20Q494%2C20%20494%2C31%20V34%20A8%2C8%200%200%200%20510%2C34%20V31%20Q510%2C20%20519%2C20%20Z%20M527%2C20%20Q536%2C20%20536%2C31%20V67%20A13%2C13%200%200%200%20562%2C67%20V31%20Q562%2C20%20571%2C20%20Z%20M583%2C20%20Q592%2C20%20592%2C31%20V42%20A10%2C10%200%200%200%20612%2C42%20V31%20Q612%2C20%20621%2C20%20Z%20M631%2C20%20Q640%2C20%20640%2C31%20V79%20A15%2C15%200%200%200%20670%2C79%20V31%20Q670%2C20%20679%2C20%20Z%20M685%2C20%20Q694%2C20%20694%2C31%20V28%20A6%2C6%200%200%200%20706%2C28%20V31%20Q706%2C20%20715%2C20%20Z%27%2F%3E%3C%2Fsvg%3E") repeat-x left top / 720px 110px;
    pointer-events: none;
}
.vitrina-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.vitrina-title { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.vitrina-intro { max-width: 470px; }
.vitrina-intro p { color: var(--muted); font-size: 1.02rem; margin-bottom: 1rem; }
.menu-filter { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.menu-filter button {
    padding: 0.5rem 1.3rem;
    border-radius: 50px;
    border: 2px solid var(--ink);
    background: transparent;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.menu-filter button:hover,
.menu-filter button.active { background: var(--purple); border-color: var(--purple); color: var(--white); }

.vitrina {
    position: relative;
    background: var(--white);
    border-radius: 32px 32px 0 0;
    padding: 3rem 2rem 2rem;
    box-shadow: var(--shadow);
}
.vitrina::before {
    content: '';
    position: absolute;
    top: 14px; left: 56px; right: 56px;
    height: 5px;
    border-radius: 5px;
    background: var(--purple-light);
}
.tubs { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.4rem 1rem; }
.tub { position: relative; padding-top: 1.6rem; transition: opacity 0.3s, filter 0.3s; }
.tub-well {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cream);
    box-shadow: inset 0 0 0 1px var(--line);
}
.tub-well img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.tub:hover .tub-well img { transform: scale(1.08); }

/* Descripción: al tocar la foto se difumina y aparece el texto */
.tub-well { position: relative; }
.tub-well.has-desc { cursor: pointer; }
.tub-well.has-desc:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.tub-desc {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.9rem 2.4rem;
    text-align: center;
    color: var(--white);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.35;
    background: rgba(37, 33, 63, 0.45);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    overflow: hidden;
}
.tub-well.is-open .tub-desc { opacity: 1; }
.tub-more {
    position: absolute;
    right: 0.55rem; bottom: 0.55rem;
    z-index: 2;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    box-shadow: 0 3px 10px rgba(37, 33, 63, 0.2);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.25s;
}
.tub-well.is-open .tub-more { transform: rotate(45deg); }
.flag {
    position: absolute;
    top: 0; left: -4px;
    z-index: 2;
    max-width: calc(100% + 4px);
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 0.3rem 0.6rem;
    font-family: var(--display);
    font-size: 0.9rem;
    line-height: 1.1;
    transform-origin: bottom left;
    transition: transform 0.25s;
}
.flag::after {
    content: '';
    position: absolute;
    left: 12px; top: 100%;
    width: 2px; height: 1.7rem;
    background: rgba(37, 33, 63, 0.45);
}
.flag.vegano { background: var(--green); }
.flag.sorbet { background: var(--blue); }
.tubs.tubs-4 { grid-template-columns: repeat(4, 1fr); }
.tubs.tubs-6 { grid-template-columns: repeat(6, 1fr); }
.tub[data-type="crema"]  { --tint: #FFF1B3; --tint-2: #FFF8D9; }
.tub[data-type="vegano"] { --tint: #C4F2DD; --tint-2: #E2F9EE; }
.tub[data-type="sorbet"] { --tint: #CBEDFB; --tint-2: #E6F6FD; }
.tub-well.no-photo {
    background: repeating-radial-gradient(circle at 50% 120%, var(--tint) 0 18px, var(--tint-2) 18px 34px);
    transition: transform 0.4s;
}
.tub:hover .tub-well.no-photo { transform: scale(1.03); }
#del-mes { background: var(--cream); padding: 7rem 0; }
.tub:hover .flag { transform: rotate(-6deg); }
.tub.is-dim { opacity: 0.25; filter: grayscale(1); }
.tub-custom .tub-well {
    background: var(--cream);
    box-shadow: inset 0 0 0 2px var(--purple-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    text-align: center;
}
.tub-custom strong { font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; }
.tub-custom a { color: var(--purple); font-weight: 600; font-size: 0.85rem; }
.tub-custom .flag { background: var(--yellow); }
.swipe-hint { display: none; margin-top: 0.8rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: right; }
.counter { height: 22px; background: var(--purple); border-radius: 0 0 14px 14px; }

/* ── NOSOTROS ── */
#nosotros { background: var(--white); padding: 7rem 0; }
.about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; align-items: center; margin-bottom: 5rem; }
.about-title { font-size: clamp(2.4rem, 4.4vw, 3.8rem); margin-bottom: 1.6rem; }
.about-title span { color: var(--purple); }
.about-story > p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; max-width: 540px; margin-bottom: 1rem; }

.facts {
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 1.1rem 1.3rem 1.3rem;
    transition: transform 0.3s;
}
.facts:hover { transform: rotate(1.5deg); }
.facts h3 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.facts-serving { font-size: 0.92rem; color: var(--muted); padding: 0.4rem 0 0.7rem; border-bottom: 10px solid var(--ink); }
.facts table { width: 100%; border-collapse: collapse; }
.facts td { padding: 0.55rem 0; border-bottom: 1px solid var(--ink); font-weight: 600; }
.facts td:last-child { text-align: right; font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.facts tr:last-child td { border-bottom: 5px solid var(--ink); }
.facts-contains { padding-top: 0.8rem; font-size: 0.95rem; }

.reals { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.reals li { background: var(--cream); border-radius: 20px; padding: 1.5rem 1.4rem; transition: transform 0.25s; }
.reals li:hover { transform: rotate(-1.5deg); }
.reals span { font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.reals strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 2.8vw, 2.5rem); line-height: 1.1; margin: 0.2rem 0 0.6rem; }
.reals li:nth-child(1) { background: #FF9C9C; }
.reals li:nth-child(2) { background: #FFF1AF; }
.reals li:nth-child(3) { background: #9EEAC9; }
.reals li:nth-child(4) { background: #ADE2F8; }
.reals span, .reals p { color: rgba(37, 33, 63, 0.75); }
.reals p { font-size: 0.9rem; line-height: 1.6; }

/* ── EQUIPO ── */
#equipo { background: var(--cream); padding: 7rem 0; }
.team-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 3.5rem; }
.team-head h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.team-head h2 span { color: var(--purple); }
.team-head p { max-width: 360px; color: var(--muted); font-size: 1.02rem; }
.crew-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem 1.6rem; }
.crew img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
    background: var(--purple-light);
}
.nametag {
    position: relative;
    margin: -2.2rem 14px 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    text-align: center;
    transition: transform 0.25s;
}
.crew:hover .nametag { transform: rotate(-4deg); }
.crew:nth-child(even):hover .nametag { transform: rotate(4deg); }
.nametag-top {
    display: block;
    padding: 0.3rem 0.5rem;
    background: var(--purple);
    color: var(--white);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.crew:nth-child(4n+2) .nametag-top { background: var(--green); color: var(--ink); }
.crew:nth-child(4n+3) .nametag-top { background: var(--yellow); color: var(--ink); }
.crew:nth-child(4n)   .nametag-top { background: var(--red); color: var(--ink); }
.nametag strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.45rem; padding: 0.45rem 0.5rem 0.1rem; }
.nametag-role { display: block; font-size: 0.8rem; padding: 0 0.5rem 0.7rem; color: var(--muted); }

/* ── CATERING ── */
#carrito { background: var(--purple); color: var(--white); padding: 7rem 0; }
.cat-head { margin-bottom: 2rem; }
.cat-head .kicker { color: var(--yellow); }
.cat-head h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.cat-head p { max-width: 480px; color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; margin-top: 1rem; }
.cat-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }

.cat-photo { position: relative; }
.cat-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 58%; border-radius: 24px; }
.cat-sticker {
    position: absolute;
    left: -1.2rem; top: -1.2rem;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: 1.05rem;
    line-height: 1.1;
    transition: transform 0.3s;
}
.cat-photo:hover .cat-sticker { transform: rotate(-10deg); }

.slip-wrap { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.22)); }
.slip {
    background: var(--white);
    color: var(--ink);
    padding: 1.8rem 2rem 3rem;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
            mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
}
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--line); margin-bottom: 1.4rem; }
.slip-head h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.slip-head span { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.slip fieldset { border: none; margin-bottom: 1.4rem; }
.slip-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip input:checked + span { background: var(--purple); border-color: var(--purple); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.slip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.4rem; }
.slip select, .slip input[type="date"], .slip textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--line);
    padding: 0.4rem 0;
    border-radius: 0;
}
.slip textarea { resize: none; height: 3.2rem; }
.slip select:focus, .slip input:focus, .slip textarea:focus { outline: none; border-bottom-color: var(--purple); }
.slip-foot { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 2px dashed var(--line); }
.slip-foot p { font-size: 0.85rem; color: var(--muted); max-width: 260px; }
.btn-wa { background: #25D366; color: var(--white); }
.btn-wa:hover { background: #1fb957; }
.slip .btn:hover { transform: none; }

/* ── SUCURSALES ── */
#sucursales { background: var(--gray); padding: 7rem 0; }
#sucursales > .wrap > h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); margin-bottom: 3rem; }
.shops { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.shop { --stripe: var(--red); display: flex; flex-direction: column; filter: drop-shadow(0 18px 30px rgba(101, 92, 201, 0.12)); }
.shop + .shop { --stripe: var(--purple); }

.awning {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0 0;
    background: repeating-linear-gradient(90deg, var(--stripe) 0 44px, var(--white) 44px 88px);
    z-index: 1;
}
.awning::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 22px;
    background:
        radial-gradient(circle at 22px 0, var(--stripe) 21px, transparent 22px) 0 0 / 88px 22px repeat-x,
        radial-gradient(circle at 66px 0, var(--white) 21px, transparent 22px) 0 0 / 88px 22px repeat-x;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}
.awning-plate {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 0.4rem 1.1rem;
}
.plate-logo { display: block; height: 46px; aspect-ratio: 1081 / 641; background: var(--stripe); -webkit-mask: url('images/logo-black.png') center / contain no-repeat; mask: url('images/logo-black.png') center / contain no-repeat; }

.shop-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 0 0 24px 24px;
    padding: 3.2rem 2rem 2rem;
}
.shop-body .branch-actions { margin-top: auto; }
.shop-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.8rem; }
.shop h3 { font-size: clamp(2rem, 3vw, 2.8rem); color: var(--ink); }
.shop address { font-style: normal; color: var(--muted); font-size: 0.98rem; margin-bottom: 1.4rem; }

.open-sign {
    position: relative;
    flex-shrink: 0;
    margin-top: -1.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    text-align: center;
    transform-origin: top center;
    transition: transform 0.3s;
}
.open-sign::before {
    content: '';
    position: absolute;
    left: 50%; bottom: 100%;
    width: 44px; height: 16px;
    transform: translateX(-50%);
    border: 2px solid rgba(37, 33, 63, 0.5);
    border-bottom: none;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.shop:hover .open-sign { transform: rotate(-6deg); }
.open-sign strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.open-sign span { display: block; font-size: 0.74rem; font-weight: 600; margin-top: 0.15rem; }
.open-sign.is-open { background: var(--green); }
.open-sign.is-closed { background: var(--red); }

.hours { width: 100%; border-collapse: collapse; margin-bottom: 1.8rem; }
.hours td { padding: 0.6rem 0.7rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.hours tr:last-child td { border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.hours tr.is-today td { background: #FFF8D9; font-weight: 700; }
.hours tr.is-today td:first-child::after { content: 'Hoy'; margin-left: 0.5rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 0.15rem 0.5rem; border-radius: 50px; vertical-align: 2px; }
.hours .closed { color: #C24848; }
.branch-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.branch-actions .btn { padding: 0.7rem 1.4rem; font-size: 0.88rem; border-color: var(--ink); }
.branch-actions .btn:hover { background: var(--ink); color: var(--white); }

/* ── FOOTER ── */
footer { background: var(--purple-dark); color: var(--white); padding: 6rem 0 2rem; }
.foot-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 3rem; }
.foot-head h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.foot-head h2 span { color: var(--yellow); }
.foot-head p { max-width: 360px; color: rgba(255, 255, 255, 0.7); font-size: 1.02rem; }

.stickers { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-bottom: 4.5rem; }
.sticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 160px; height: 160px;
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.25s;
}
.stickers li:nth-child(odd) .sticker:hover { transform: rotate(-8deg); }
.stickers li:nth-child(even) .sticker:hover { transform: rotate(8deg); }
.sticker strong { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.1; }
.sticker span { font-size: 0.74rem; font-weight: 600; margin-top: 0.3rem; }
.s-wa { background: var(--green); }
.s-ig { background: var(--yellow); }
.s-tt { background: var(--ink); color: var(--white); }
.s-fb { background: var(--blue); }
.s-mail { width: auto; height: auto; border-radius: 50px; padding: 1.2rem 2rem; background: var(--white); }
.s-mail strong { font-size: 1.2rem; }

.collab {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    background: var(--cream);
    color: var(--ink);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    padding: 2.6rem;
    margin-bottom: 5rem;
}
.collab-tag {
    display: inline-block;
    background: var(--yellow);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    margin-bottom: 1.2rem;
}
.collab h1 { font-size: clamp(2.1rem, 3.4vw, 3rem); line-height: 1.1; margin-bottom: 1.2rem; }
.collab h1 span { color: var(--purple); }
.collab-intro { color: var(--muted); font-size: 1.02rem; max-width: 440px; margin-bottom: 1.8rem; }
.collab-steps { list-style: none; display: grid; gap: 0.6rem; }
.collab-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.6rem; align-items: center; background: var(--white); border-radius: 14px; padding: 0.7rem 1rem; }
.collab-steps b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--purple); }
.collab-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; align-content: start; }
.collab-form label { display: block; }
.collab-form .full { grid-column: 1 / -1; }
.collab-form .slip-label { margin-bottom: 0.4rem; }
.collab-form input, .collab-form select, .collab-form textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--line);
    border-radius: 0;
    padding: 0.4rem 0;
}
.collab-form textarea { resize: none; height: 3.2rem; }
.collab-form input::placeholder, .collab-form textarea::placeholder { color: rgba(37, 33, 63, 0.4); }
.collab-form input:focus, .collab-form select:focus, .collab-form textarea:focus { outline: none; border-bottom-color: var(--purple); }
.collab-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.collab-submit p { font-size: 0.85rem; color: var(--muted); max-width: 280px; }
.collab .btn { background: var(--purple); color: var(--white); }
.collab .btn:hover { transform: none; background: var(--purple-dark); }

.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2rem 2rem;
    flex-wrap: wrap;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
}
.foot-logo { height: 32px; filter: brightness(0) invert(1); }
.foot-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-weight: 500; }
.foot-nav a:hover { color: var(--orange); }
.foot-copy { color: rgba(255, 255, 255, 0.45); }
.foot-copy em { font-style: normal; color: var(--orange); }
@media (max-width: 960px) {
    .collab { grid-template-columns: 1fr; padding: 1.8rem 1.25rem; gap: 2rem; }
    .collab-form { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .stickers { gap: 1rem; justify-content: center; }
    .sticker { width: 136px; height: 136px; }
    .sticker strong { font-size: 1.1rem; }
    .s-mail { width: auto; height: auto; }
}

.wa-float {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 98;
    background: #25D366;
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.85rem 1.4rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    text-decoration: none;
    transition: transform 0.2s, opacity 0.3s, visibility 0.3s;
}
.wa-float:hover { transform: scale(1.06) rotate(-4deg); }
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .tubs { grid-template-columns: repeat(4, 1fr); }
    .tubs.tubs-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
    .wrap { padding: 0 1.25rem; }
    nav { padding: 0 1.25rem; height: 60px; }
    nav ul { display: none; }
    .hamburger { display: block; }
    .hero { padding: 96px 0 3rem; min-height: auto; }
    .hero-type, .hero-foot { padding: 0 1.25rem; max-width: none; }
    .hero-type .l1 { font-size: 23vw; }
    .hero-type .l2 { font-size: 15vw; }
    .hero-type .l3 { font-size: 19.5vw; }
    .hero-photo { position: relative; top: auto; width: 100%; height: 72vw; margin-top: 1.5rem; }
    .hero-photo::after {
        background:
            linear-gradient(to bottom, var(--cream) 0%, rgba(251, 248, 243, 0) 25%),
            linear-gradient(to top, var(--cream) 0%, rgba(251, 248, 243, 0) 25%);
    }
    .hero-foot { margin-top: 1.5rem; }
    .hero-status strong { width: auto; }
    .hero-status a { flex-wrap: wrap; row-gap: 0.1rem; }
    .hero-status span { flex-basis: 100%; padding-left: calc(12px + 0.8rem); }
    #sabores, #del-mes, #nosotros, #equipo, #carrito, #sucursales { padding: 4.5rem 0; }
    #sabores { padding-top: 7.5rem; }
    .melt { height: 88px; background-size: 576px 88px; }
    .vitrina { padding: 2.8rem 1rem 1.6rem; border-radius: 24px 24px 0 0; }
    .vitrina::before { left: 32px; right: 32px; }
    .tubs, .tubs.tubs-4, .tubs.tubs-6 { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 0.9rem; }
    .flag { font-size: 1rem; }
    .cat-body { grid-template-columns: 1fr; gap: 3rem; }
    .cat-photo img { aspect-ratio: 4 / 3; }
    .cat-sticker { left: -0.6rem; top: -1.2rem; width: 110px; height: 110px; font-size: 0.95rem; }
    .slip { padding: 1.5rem 1.25rem 2.8rem; }
    .slip-row { grid-template-columns: 1fr; }
    .about { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3.5rem; }
    .reals { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .crew-grid { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1rem; }
    .nametag { margin: -1.8rem 8px 0; }
    .nametag strong { font-size: 1.25rem; }
    .shops { grid-template-columns: 1fr; gap: 3rem; }
    .shop-body { padding: 3rem 1.25rem 1.6rem; }
    .shop-top { flex-direction: column-reverse; }
    .open-sign { margin: -1rem 0 0.4rem; }
}
/* Celulares: aquí van los ajustes que deben ganarle al bloque de 960px */
@media (max-width: 600px) {
    /* Hero: título centrado y horarios/botones antes de la foto, para que no queden bajo la barra del navegador */
    .hero { padding-top: 88px; padding-bottom: 2rem; }
    .hero-type { text-align: center; }
    .hero-foot { order: 1; align-items: center; margin-top: 1.4rem; gap: 1.4rem; }
    .hero-actions { justify-content: center; }
    .hero-status a { justify-content: center; text-align: center; }
    .hero-status span { padding-left: 0; }
    .hero-photo { order: 2; height: 62vw; margin-top: 1.8rem; }

    .reals { grid-template-columns: 1fr; gap: 0.8rem; }
    .reals li { padding: 1.1rem 1.3rem; }
    .reals strong { font-size: 1.9rem; margin: 0.1rem 0 0.3rem; }

    #sabores, #del-mes, #nosotros, #equipo, #carrito, #sucursales { padding: 3.5rem 0; }
    #sabores { padding-top: 6.5rem; }

    /* Filtros en una sola fila */
    .menu-filter { flex-wrap: nowrap; gap: 0.4rem; }
    .menu-filter button { padding: 0.45rem 0.85rem; font-size: 0.8rem; white-space: nowrap; }

    /* Vitrinas y equipo: carrusel que se desliza de lado en vez de filas infinitas */
    .tubs, .tubs.tubs-4, .tubs.tubs-6, .crew-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .tubs::-webkit-scrollbar, .crew-grid::-webkit-scrollbar { display: none; }
    .tubs { gap: 0.9rem; margin: 0 -1rem; padding: 0 1rem 0.8rem; scroll-padding: 0 1rem; }
    .tub { flex: 0 0 62%; scroll-snap-align: start; }
    .tub-well { aspect-ratio: 4 / 5; }
    .flag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vitrina { padding: 2.4rem 1rem 1.2rem; }
    .swipe-hint { display: block; }

    .crew-grid { gap: 0.9rem; margin: 0 -1.25rem; padding: 0 1.25rem 1.6rem; scroll-padding: 0 1.25rem; }
    .crew { flex: 0 0 44%; scroll-snap-align: start; }

    /* Sucursales: la tabla no debe ensanchar la tarjeta */
    .shops { grid-template-columns: minmax(0, 1fr); }
    .hours td { padding: 0.55rem 0.5rem; font-size: 0.88rem; }
    .branch-actions .btn { padding: 0.6rem 1rem; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── PÁGINA COLABORACIONES ── */
.collab-page { background: var(--purple-dark); color: var(--white); padding: 120px 0 5rem; min-height: calc(100vh - 90px); }
.back-link { display: inline-block; color: rgba(255, 255, 255, 0.8); font-weight: 600; text-decoration: none; margin-bottom: 2rem; }
.back-link:hover { color: var(--orange); }
.collab-page .collab { margin-bottom: 0; }
.footer-slim { padding: 0 0 2rem; }

/* ── UNA PANTALLA POR SECCIÓN (escritorio) ── */
@media (min-width: 961px) {
    html { scroll-snap-type: y proximity; }
    .hero, #sabores, #del-mes, #nosotros, #equipo, #carrito, #sucursales, #contacto {
        min-height: 100vh;
        min-height: 100svh;
        scroll-snap-align: start;
    }
    #sabores, #del-mes, #nosotros, #equipo, #carrito, #sucursales, #contacto {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #sabores > .wrap, #del-mes > .wrap, #nosotros > .wrap, #equipo > .wrap, #carrito > .wrap, #sucursales > .wrap, #contacto > .wrap { width: 100%; }

    .hero { padding: calc(68px + 4vh) 0 5vh; }
    .hero-type .l1 { font-size: min(19vw, 28vh); }
    .hero-type .l2 { font-size: min(12.5vw, 18vh); }
    .hero-type .l3 { font-size: min(16.5vw, 23vh); }
    .hero-foot { margin-top: 4vh; max-width: none; flex-direction: row; justify-content: space-between; align-items: flex-end; }

    #sabores { padding: calc(110px + 1vh) 0 3vh; min-height: calc(100svh - 68px); scroll-margin-top: 68px; }
    .vitrina-title { font-size: min(3.8rem, 6.5vh); }
    .vitrina-head { margin-bottom: 3vh; }
    .vitrina { padding: calc(1.6rem + 1.5vh) 2rem 2vh; }
    .tubs { gap: 3vh 1rem; }
    .tub-well { aspect-ratio: auto; height: 21vh; }

    #del-mes, #nosotros, #equipo, #carrito, #sucursales { padding: calc(68px + 4vh) 0 4vh; }

    .about { margin-bottom: 5vh; }
    .about-title { font-size: min(3.8rem, 6.5vh); }
    .facts h3 { font-size: min(2.5rem, 4vh); }
    .facts td { padding: min(0.55rem, 0.9vh) 0; }
    .reals strong { font-size: min(2.5rem, 4.2vh); }

    #equipo > .wrap { max-width: 1680px; }
    .team-head { margin-bottom: 4vh; }
    .team-head h2 { font-size: min(3.8rem, 6.5vh); }
    .crew-grid { grid-template-columns: repeat(8, 1fr); gap: 1.4rem 1.2rem; }
    .crew img { aspect-ratio: 3 / 4; }
    .nametag { margin: -1.8rem 8px 0; }
    .nametag-top { font-size: 0.6rem; letter-spacing: 0.12em; }
    .nametag strong { font-size: 1.2rem; }
    .nametag-role { font-size: 0.72rem; }

    .cat-head { margin-bottom: 3vh; }
    .cat-head h2 { font-size: min(3.8rem, 6.5vh); }
    .cat-photo img { aspect-ratio: auto; height: 40vh; }
    .cat-sticker { width: 118px; height: 118px; font-size: 0.98rem; left: -1.4rem; top: -1.4rem; }
    .slip { padding: 1.4rem 1.8rem 2.6rem; }
    .slip-head { margin-bottom: 1rem; padding-bottom: 0.8rem; }
    .slip fieldset, .slip-row { margin-bottom: 1rem; }
    .slip-foot { margin-top: 1.2rem; padding-top: 1rem; }

    #sucursales > .wrap > h2 { font-size: min(3.8rem, 6.5vh); margin-bottom: 4vh; }
    .awning { height: min(80px, 8vh); }
    .plate-logo { height: min(46px, 5.4vh); }
    .shop-body { padding: 3rem 2rem 1.6rem; }
    .hours td { padding: min(0.6rem, 1vh) 0.7rem; }

    #contacto { padding: calc(68px + 5vh) 0 2rem; }
    .foot-head { margin-bottom: 4vh; }
    .stickers { margin-bottom: 7vh; }
}
@media (min-width: 961px) and (max-width: 1100px) {
    .crew-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 961px) and (max-height: 820px) {
    .cat-photo img { height: 34vh; object-position: 50% 38%; }
    #del-mes, #nosotros, #equipo, #carrito, #sucursales { padding: calc(68px + 2vh) 0 2vh; }
    #sabores { padding: calc(88px + 1vh) 0 2vh; }
    .hero-type .l1 { font-size: min(17vw, 24vh); }
    .hero-type .l2 { font-size: min(11vw, 15.5vh); }
    .hero-type .l3 { font-size: min(14.5vw, 20vh); }
    .melt { height: 88px; background-size: 576px 88px; }
    .vitrina-head { margin-bottom: 2vh; }
    .tub-well { height: 13.5vh; }
    .tub-desc { font-size: 0.7rem; line-height: 1.22; padding: 0.35rem 0.5rem 1.5rem; }
    .tub-more { width: 22px; height: 22px; font-size: 1rem; right: 0.4rem; bottom: 0.4rem; }
    .vitrina-title { font-size: 5.5vh; }
    .vitrina-intro p { margin-bottom: 0.6rem; }
    .tubs { gap: 2.4vh 0.9rem; }
    #contacto { padding-top: calc(68px + 3vh); }
    .kicker { margin-bottom: 0.6rem; }
    .about-story > p { font-size: 0.98rem; line-height: 1.65; margin-bottom: 0.6rem; }
    .facts { padding: 0.8rem 1.1rem 1rem; }
    .facts-serving { padding: 0.3rem 0 0.5rem; border-bottom-width: 7px; }
    .facts td { font-size: 0.9rem; padding: 0.35rem 0; }
    .facts-contains { font-size: 0.88rem; padding-top: 0.5rem; }
    .about { margin-bottom: 3vh; }
    .reals li { padding: 0.8rem 1rem; }
    .reals strong { font-size: min(2.5rem, 3.6vh); margin-bottom: 0.3rem; }
    .reals p { font-size: 0.85rem; }
    .shop-body { padding: 2.6rem 1.6rem 1.2rem; }
    .shop address { margin-bottom: 1rem; }
    .hours td { font-size: 0.9rem; }
    .sticker { width: 136px; height: 136px; }
    .slip-label { margin-bottom: 0.4rem; }
    .chip span { padding: 0.4rem 0.9rem; }
}

/* Pantallas táctiles: el navegador deja el :hover "pegado" después de tocar,
   así que aquí los movimientos de hover no se aplican */
@media (hover: none) {
    .btn:hover, nav ul a.nav-cta:hover, .tub:hover .tub-well img, .tub:hover .tub-well.no-photo,
    .tub:hover .flag, .facts:hover, .reals li:hover, .crew:hover .nametag,
    .crew:nth-child(even):hover .nametag, .cat-photo:hover .cat-sticker, .shop:hover .open-sign,
    .stickers li:nth-child(odd) .sticker:hover, .stickers li:nth-child(even) .sticker:hover,
    .wa-float:hover { transform: none; }
}