/* Cali Sorpresas — sistema visual y componentes */
:root {
  --background: #fff0f3;
  --surface: #ffffff;
  --accent: #ad1457;
  --pink: #f8b7ce;
  --ink: #38232d;
  --muted: #705b65;
  --whatsapp: #25d366;
  --border: #efd4df;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--background); color: var(--ink); font: 16px/1.65 'Plus Jakarta Sans', sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--accent); line-height: 1.2; }
h2 { font-size: clamp(30px, 3vw, 44px); margin: 12px 0 20px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -80px; left: 16px; padding: 12px; background: white; z-index: 30; }
.skip-link:focus { top: 16px; }
.top { background: var(--accent); color: white; text-align: center; padding: 8px 16px; font-size: 13px; }
header { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; background: white; padding-top: 16px; }
.brand { color: var(--accent); }
header .brand img { width: 130px; height: 130px; object-fit: contain; }
header .brand > span:not(.cali-logo) { display: none; }
header .brand .cali-logo { display: block; }
header > .button { position: absolute; right: 5%; top: 55px; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; width: 100%; padding: 17px; background: var(--pink); font-weight: 600; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 10px; padding: 13px 22px; background: var(--accent); color: white; font-weight: 700; line-height: 1.4; }
.button:hover { filter: brightness(.94); }
.button[href*="wa.me"], .whatsapp-button { background: var(--whatsapp); color: #073b1c; }
.whatsapp-button img { width: 22px; height: 22px; }
.small { padding: 10px 17px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.textlink { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.footnote { color: var(--muted); font-size: 13px; }
/* Banner */
.homecarousel { overflow: hidden; margin-top: 10px; background: #fbe4ec; }
.bannerstage { max-width: 1440px; margin: auto; }
.bannerslide { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 510px; }
.bannerphoto { height: 510px; }
.bannerphoto img { width: 100%; height: 100%; object-fit: contain; }
.bannercopy { padding: 32px 9%; }
.bannercopy h1 { font-size: clamp(36px, 4vw, 59px); margin: 18px 0; }
.bannercopy h1 em { display: block; font-style: italic; }
.bannercopy p { max-width: 440px; }
.bannername { display: block; margin: 20px 0 14px; color: var(--accent); }
.banneractions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.banneractions a { font-size: 14px; font-weight: 700; }
.bannercontrols { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 10px; background: #f8cddd; }
.bannercontrols button { border: 0; background: transparent; color: var(--accent); font-size: 28px; min-height: 44px; min-width: 44px; }
.bannerdots { display: flex; gap: 2px; }
.bannerdots button { position: relative; font-size: 0; }
.bannerdots button::after { content: ''; display: block; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: #bb7793; }
.bannerdots button[aria-pressed="true"]::after { background: var(--accent); transform: scale(1.3); }
#bannerpause { font-size: 12px; min-width: 70px; }
/* Colecciones */
.collections, .catalog, .steps { max-width: 1160px; margin: auto; padding: 58px 28px; }
.sectionheading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px; }
.sectionheading p { max-width: 320px; color: var(--muted); }
.collectiongrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.collection { padding: 0; background: white; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-align: left; color: var(--ink); }
.collection > img { width: 100%; aspect-ratio: 4/5; height: auto; object-fit: contain; }
.collection > span { display: block; padding: 16px; }
.collection small, .collection strong, .collection b { display: block; }
.collection small { font-size: 10px; color: var(--muted); }
.collection strong { font-family: 'Playfair Display', Georgia, serif; color: var(--accent); font-size: 20px; margin: 7px 0; }
.collection b { font-size: 12px; font-weight: 500; }
/* Catálogo: dos columnas en tablet y escritorio */
.filters, .subfilters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filters button, .subfilters button, .gallerytabs button { border: 1px solid var(--border); background: white; border-radius: 24px; padding: 10px 16px; color: var(--ink); }
.filters .active, .subfilters .active, .gallerytabs .active { background: var(--accent); border-color: var(--accent); color: white; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px #ad145708; }
.photo { display: block; width: 100%; border: 0; padding: 0; background: #fff; }
.card .photo > img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center; }
.content { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.tag { color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.card h3 { font-size: 27px; margin: 10px 0 12px; }
.summary { display: block; color: var(--muted); margin: 0 0 24px; font-size: 14px; }
.cardbottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.view { background: transparent; border: 0; padding: 10px 0; color: var(--accent); text-decoration: underline; font-weight: 600; }
.cardbottom .button { font-size: 13px; padding: 12px 16px; }
/* Pedido y contacto */
.steps { border-top: 1px solid var(--border); }
.stepgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stepgrid b { color: var(--accent); font-size: 26px; }
.stepgrid h3 { font-size: 22px; }
.stepgrid p { color: var(--muted); font-size: 14px; }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 26px; padding: 48px max(28px, calc((100% - 1104px)/2)); background: #f8cddd; }
.contact h2 { margin-bottom: 10px; }
footer { background: #442431; color: white; padding: 35px 5% 100px; }
footer .brand { color: white; font-size: 26px; font-family: 'Playfair Display', Georgia, serif; }
footer .brand small { display: block; font: 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: 3px; }
footer a { margin-right: 20px; text-decoration: underline; }
/* Redes y acceso fijo a WhatsApp */
.socialrail { position: fixed; right: 18px; top: 46%; display: grid; gap: 10px; z-index: 9; }
.socialrail a { display: grid; place-items: center; width: 44px; height: 44px; background: white; border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 4px 15px #38232d18; }
.socialrail img { width: 26px; height: 26px; }
.socialrail b, .socialrail .social-wa { display: none; }
.whatsapp-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 62px; height: 62px; border-radius: 50%; background: var(--whatsapp); display: grid; place-items: center; box-shadow: 0 6px 22px #073b1c30; z-index: 12; border: 3px solid white; }
.whatsapp-float img { width: 38px; height: 38px; }
/* Ficha detallada */
dialog { width: min(1040px, 94vw); max-height: 90vh; padding: 30px; border: 0; border-radius: 20px; color: var(--ink); }
dialog::backdrop { background: #27101c99; }
.close { position: absolute; top: 10px; right: 12px; border: 0; width: 44px; height: 44px; font-size: 27px; background: white; color: var(--accent); border-radius: 50%; z-index: 1; }
.detailbody { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; }
.detailgallery > img { width: 100%; height: auto; object-fit: contain; }
.gallerytabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; }
.gallerytabs button { font-size: 12px; }
.detailtext h2 { font-size: 32px; margin-top: 14px; }
.detailtext h3 { font-size: 20px; }
.detailtext ul { padding-left: 20px; font-size: 14px; }
.downloadsheet { display: block; margin-top: 18px; color: var(--accent); font-size: 13px; text-decoration: underline; }
@media (max-width: 960px) {
  .collectiongrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bannercopy { padding: 24px 6%; }
  .cardbottom { align-items: stretch; flex-direction: column; }
  .socialrail { right: 8px; }
}
@media (max-width: 640px) {
  /* Móvil: una única columna, sin reglas que la reviertan. */
  .grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  header .brand img { width: 105px; height: 105px; }
  header > .button { top: 42px; right: 16px; font-size: 11px; padding: 9px 12px; }
  nav { gap: 18px; font-size: 12px; padding: 14px; }
  .bannerslide { grid-template-columns: 1fr; min-height: 0; }
  .bannerphoto { height: 310px; }
  .bannercopy { text-align: center; padding: 22px 24px 30px; }
  .bannercopy h1 { font-size: 35px; }
  .bannercopy p { font-size: 14px; }
  .banneractions { justify-content: center; }
  .collections, .catalog, .steps { padding: 40px 22px; }
  .sectionheading, .contact { align-items: flex-start; flex-direction: column; }
  .collectiongrid { gap: 12px; }
  .collection > span { padding: 12px; }
  .collection strong { font-size: 17px; }
  .stepgrid { grid-template-columns: 1fr; gap: 14px; }
  .detailbody { grid-template-columns: 1fr; }
  dialog { padding: 45px 20px 24px; }
  .socialrail { top: auto; bottom: 94px; }
  .whatsapp-float { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* Ajustes finales de presentación y navegación */
.bannercopy h2 { font-size: clamp(36px,4vw,59px); margin:18px 0; }
.bannercopy h2 em { display:block; font-style:italic; }
.bannerphoto { background:#f9e7eb; padding:18px; }
.bannerphoto img { border-radius:16px; }
.banneractions .button { font-size:13px; }
.card .photo > img { aspect-ratio:4/5; object-fit:cover; }
.faq { max-width:1160px; margin:auto; padding:45px 28px; }
.faq details { padding:18px 20px; border:1px solid var(--border); border-radius:12px; margin:12px 0; background:white; }
.faq summary { cursor:pointer; font-weight:600; color:var(--accent); }
.faq p { color:var(--muted); font-size:14px; }
.socialrail { position:static; display:flex; justify-content:center; padding:20px; background:#442431; }
.socialrail a { box-shadow:none; }
.close { position:sticky; top:0; margin-left:auto; display:block; }
@media(max-width:640px) {
  header > .button { position:static; margin-bottom:12px; order:1; }
  header nav { order:2; }
  .bannerphoto { height:300px; }
  .bannercopy h2 { font-size:35px; }
  .faq { padding:35px 22px; }
}

header.compact-header{padding:0;gap:0}header.compact-header nav{margin:0}

.category-links{display:flex;flex-wrap:wrap;gap:12px}.category-links a{padding:14px 22px;background:white;border:1px solid #efd4df;border-radius:50px;color:#ad1457;font-weight:700;text-decoration:none}.category-links a:hover{background:#fce0ea}.catalog-help{color:#705b65;margin:0 0 25px}.category-stack{display:grid;gap:36px}.category-banner{background:white;border:1px solid #f0d9e3;border-radius:24px;overflow:hidden;box-shadow:0 12px 35px #ad14570a;scroll-margin-top:24px}.category-heading{padding:20px 28px;background:#fff0f3;display:flex;justify-content:space-between;align-items:center;gap:16px}.category-heading h3{font-family:'Playfair Display',serif;color:#ad1457;font-size:25px;margin:0}.category-heading>span{color:#705b65;font-size:13px}.category-product{display:grid;grid-template-columns:1fr 1fr;align-items:center}.category-photo{padding:20px;touch-action:pan-y}.category-photo>img{width:100%;height:420px;object-fit:contain;border-radius:16px;background:#fff9fb;display:block}.category-copy{padding:32px}.category-copy h4{font-family:'Playfair Display',serif;color:#ad1457;font-size:34px;line-height:1.2;margin:12px 0 24px}.includes-label{font-weight:700;margin-bottom:8px}.category-description{line-height:1.8;color:#705b65;margin-bottom:26px}.category-copy .view{display:block;margin-top:18px;background:none;border:0;color:#ad1457;text-decoration:underline;cursor:pointer;padding:8px 0}.category-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px;border-top:1px solid #f4e2e9}.category-controls button{width:48px;height:48px;border-radius:50%;background:#ad1457;border:0;color:white;font-size:25px;cursor:pointer}.category-counter{font-weight:700;color:#705b65;min-width:85px;text-align:center}.category-controls button:hover{background:#850f43}.category-banner :is(button,a):focus-visible{outline:3px solid #ad1457;outline-offset:4px}
@media(max-width:700px){.category-product{grid-template-columns:1fr}.category-photo{padding:16px 16px 0}.category-photo>img{height:320px}.category-copy{padding:24px}.category-copy h4{font-size:29px;margin-bottom:18px}.category-heading{padding:18px 20px}.category-heading h3{font-size:23px}.category-links{gap:8px}.category-links a{padding:12px 16px;font-size:13px}.category-copy .whatsapp-button{width:100%;justify-content:center}}

.illustrated-sheet{margin-top:18px;border-top:1px solid #efd4df;padding-top:16px}.illustrated-sheet summary{color:#ad1457;font-weight:700;cursor:pointer;padding:10px 0}.illustrated-sheet img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;border-radius:12px;margin:14px 0}.illustrated-sheet a{display:block;color:#ad1457;font-size:13px;line-height:1.5;margin:10px 0}.detailgallery #galleryimage{object-fit:contain}

/* Product photo and illustrated sheet remain visible together. */
.category-product{grid-template-columns:1fr}.category-image-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 28px 0;align-items:start}.category-image-pair .category-photo{padding:0;min-width:0}.pair-label{display:block;color:#ad1457;font-size:14px;font-weight:700;padding:0 0 12px}.category-image-pair .category-photo>img{height:auto;aspect-ratio:1122/1402;object-fit:contain;width:100%;background:#fff9fb}.category-image-pair .illustrated-sheet{border:0;padding:0;margin:0;min-width:0}.category-image-pair .illustrated-sheet>div{display:flex;flex-direction:column}.category-image-pair .illustrated-sheet img{order:0;margin:0;aspect-ratio:1122/1402;object-fit:contain;background:#fff9fb}.category-image-pair .illustrated-sheet a{order:1;margin:12px 0 0}.category-copy{padding:24px 28px 28px}.category-copy h4{margin-bottom:14px}.category-description{max-width:800px;margin-bottom:20px}
@media(max-width:700px){.category-image-pair{grid-template-columns:1fr;gap:22px;padding:20px 20px 0}.category-image-pair .category-photo>img{max-height:420px}.category-image-pair .illustrated-sheet img{height:auto;aspect-ratio:auto}.category-copy{padding:24px 20px}.pair-label{font-size:13px}}

/* Each collection has its own gently animated background. */
#categoria-desayunos{--collection-base:#ffe7ef;--collection-light:#fff5f8;--collection-tint:#f9bfd3;--collection-accent:#bd3269}
#categoria-meriendas{--collection-base:#ffebd9;--collection-light:#fff8ef;--collection-tint:#ffd2ac;--collection-accent:#a65424}
#categoria-flores{--collection-base:#ede4ff;--collection-light:#faf6ff;--collection-tint:#d9c5f2;--collection-accent:#8258a3}
#categoria-anchetas{--collection-base:#dff4e7;--collection-light:#f3fcf5;--collection-tint:#b9e3c9;--collection-accent:#377b59}
.category-banner .category-heading{background:var(--collection-base)}
.category-image-pair{position:relative;isolation:isolate;overflow:hidden;padding:30px 28px 24px;background:linear-gradient(120deg,var(--collection-light),var(--collection-base),var(--collection-tint),var(--collection-light));background-size:250% 250%;animation:collectionGradient 14s ease-in-out infinite}
.category-image-pair>.category-photo,.category-image-pair>.illustrated-sheet{position:relative;z-index:1;padding:16px;background:#ffffffb8;border:1px solid #ffffffd9;border-radius:20px;box-shadow:0 8px 22px #4131410a}
.category-image-pair .pair-label{color:var(--collection-accent)}
.category-image-pair .category-photo>img,.category-image-pair .illustrated-sheet img{background:#fff;border-radius:12px}
.category-sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.category-sparkles span{position:absolute;left:3%;top:65%;font-size:34px;color:var(--collection-accent);opacity:.22;animation:collectionFloat 8s ease-in-out infinite}
.category-sparkles span:nth-child(2){left:48%;top:22%;animation-delay:-2s;font-size:26px}
.category-sparkles span:nth-child(3){left:94%;top:72%;animation-delay:-4s}
.category-sparkles span:nth-child(4){left:47%;top:78%;animation-delay:-6s;font-size:24px}
.category-sparkles span:nth-child(5){left:89%;top:5%;animation-delay:-1s;font-size:28px}
.category-sparkles span:nth-child(6){left:12%;top:2%;animation-delay:-3s;font-size:26px}
@keyframes collectionGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes collectionFloat{0%,100%{transform:translateY(10px) rotate(-8deg);opacity:.16}50%{transform:translateY(-22px) rotate(8deg);opacity:.38}}
@media(max-width:700px){.category-image-pair{padding:22px 16px;gap:20px}.category-image-pair>.category-photo,.category-image-pair>.illustrated-sheet{padding:12px}.category-sparkles span:nth-child(2),.category-sparkles span:nth-child(4){left:90%}}
@media(prefers-reduced-motion:reduce){.category-image-pair,.category-sparkles span{animation:none}.category-sparkles{display:none}}

/* Smaller image frames reveal the animated collection backgrounds. */
.category-image-pair{grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:70px;padding:42px 54px 38px}
.category-image-pair>.category-photo,.category-image-pair>.illustrated-sheet{width:100%;max-width:340px;padding:12px;background:#ffffffa6}
.category-image-pair .category-photo>img,.category-image-pair .illustrated-sheet img{width:100%;height:auto;max-height:none;aspect-ratio:1122/1402;object-fit:contain}
.category-sparkles span{font-size:40px;opacity:.35}.category-sparkles span:nth-child(2){left:48%;top:18%;font-size:32px}.category-sparkles span:nth-child(4){left:48%;top:78%;font-size:30px}
@media(max-width:900px) and (min-width:701px){.category-image-pair{grid-template-columns:repeat(2,minmax(0,300px));gap:38px;padding:34px 32px}}
@media(max-width:700px){.category-image-pair{grid-template-columns:minmax(0,280px);gap:28px;padding:32px 34px}.category-image-pair>.category-photo,.category-image-pair>.illustrated-sheet{max-width:280px;padding:10px}.category-image-pair .pair-label{font-size:12px}.category-sparkles span:nth-child(2),.category-sparkles span:nth-child(4){left:89%}.category-sparkles span{font-size:30px}}

/* Jump straight to a product while keeping the image pair visible. */
.category-product{grid-template-columns:minmax(0,1fr) 270px;align-items:start}.category-image-pair{grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,280px));gap:42px;padding:36px 30px}.category-picker{grid-column:2;grid-row:1;align-self:center;padding:24px}.category-picker label{display:block;font-weight:700;color:#ad1457;line-height:1.5;margin-bottom:12px}.category-picker select{display:block;width:100%;padding:13px 10px;font:inherit;font-size:14px;color:#643b4b;background:#fff6fa;border:1px solid #d999b4;border-radius:12px;cursor:pointer}.category-picker select:focus-visible{outline:3px solid #ad1457;outline-offset:3px}.category-picker p{font-size:13px;color:#705b65;line-height:1.7;margin-top:14px}.category-copy{grid-column:1/-1}
@media(max-width:1000px){.category-product{grid-template-columns:minmax(0,1fr) 230px}.category-image-pair{gap:28px;padding:30px 24px}.category-picker{padding:18px}}
@media(max-width:800px){.category-product{grid-template-columns:1fr}.category-image-pair{grid-column:1;grid-row:1}.category-picker{grid-column:1;grid-row:2;padding:20px 28px 0;align-self:auto}.category-copy{grid-row:3}.category-picker select{max-width:480px}.category-picker p{margin-bottom:0}}
@media(max-width:700px){.category-image-pair{grid-template-columns:minmax(0,280px);padding:32px 34px;gap:28px}.category-picker{padding:20px 20px 0}}

/* Explicit reference value and current web price. */
.product-pricing{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:14px 0 22px;font-variant-numeric:tabular-nums}.reference-label{font-size:12px;font-weight:600;color:#705b65}.reference-price{font-size:16px;color:#705b65;text-decoration:line-through;text-decoration-thickness:1.5px}.current-price{font-size:clamp(30px,4vw,40px);font-weight:800;line-height:1.2;color:#ad1457}.web-price-label{font-size:14px;font-weight:700;color:#ad1457;background:#fff0f3;border-radius:8px;padding:6px 10px;margin-top:3px}.detailtext .product-pricing{margin-bottom:24px}