/* ===================== VIAZZO — Páginas internas (Bebidas / Comestibles) ===================== Se carga DESPUÉS de styles.css: reutiliza sus tokens (--paper, --navy-*, --crimson, --font-d/b, --r, --shadow*, --ease-*) y sus átomos (.btn, .tag, .eyebrow, .swoosh-mini, .faq-item, .cta-final, footer, wa-float). Acá solo van los componentes propios de las páginas de rubro: breadcrumb, hero de página, band-reparto, crosslinks, sticky-cta y los componentes "firma" de cada página (explorador, planilla, builder, etc). Cada página fija su acento con `style="--c:var(--c-bebidas)"` (o comestibles) en . */ /* ---------- Breadcrumb ---------- */ .breadcrumb{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft); padding:1rem 0 0} .breadcrumb a{color:var(--ink-soft)} .breadcrumb a:hover{color:var(--navy-700)} .breadcrumb .sep{opacity:.5} .breadcrumb .here{color:var(--navy-900); font-weight:800} /* ===================== PAGE-HERO (variante del hero de Home) ===================== */ .page-hero{position:relative; padding-block:clamp(1.6rem,4vh,2.6rem) clamp(3rem,6vh,4.5rem); overflow:clip; background: radial-gradient(90% 80% at 8% -14%, color-mix(in srgb, var(--c) 20%, var(--navy-100)) 0%, transparent 58%), radial-gradient(70% 60% at 108% 105%, #FDF0F0 0%, transparent 55%), linear-gradient(180deg,#FFFFFF 0%, var(--paper) 100%)} .page-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(rgba(26,59,139,.09) 1.2px, transparent 1.3px); background-size:26px 26px; -webkit-mask-image:radial-gradient(80% 70% at 30% 30%, #000, transparent 75%); mask-image:radial-gradient(80% 70% at 30% 30%, #000, transparent 75%)} .page-hero .hero-arc-1{left:-190px; right:auto; border-color:color-mix(in srgb, var(--c) 30%, transparent); border-left-color:transparent; border-bottom-color:transparent; rotate:-35deg} .page-hero .hero-arc-2{left:-250px; right:auto; border-color:rgba(26,59,139,.14); border-left-color:transparent; border-bottom-color:transparent; rotate:-35deg} .page-hero-grid{position:relative; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center; width:100%; padding-top:1.4rem} .page-hero .eyebrow{color:var(--c)} .page-hero h1 em{color:var(--c)} .page-hero .lead{font-size:clamp(1.02rem,1.3vw,1.14rem); color:var(--ink-soft); max-width:48ch} .page-hero .lead strong{color:var(--navy-900)} .page-hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem} .page-hero-cta .btn-outline{border-color:var(--c); color:var(--c)} .page-hero-cta .btn-outline:hover{background:color-mix(in srgb, var(--c) 10%, transparent)} .page-hero .hero-proof{margin-top:1.6rem} .page-hero .hero-proof li::before{ background-color:color-mix(in srgb, var(--c) 14%, #fff); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='%23C82020' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:center; background-size:70%; background-repeat:no-repeat; border-radius:50%} .page-hero .hero-stamp{filter:drop-shadow(0 12px 24px color-mix(in srgb, var(--c) 45%, transparent))} .page-hero .hero-stamp circle:first-child{fill:var(--c)} @keyframes rise-l{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}} .page-hero-copy > *{animation:rise-l .8s var(--ease-out) both} .page-hero-copy > :nth-child(1){animation-delay:.05s} .page-hero-copy > :nth-child(2){animation-delay:.12s} .page-hero-copy > :nth-child(3){animation-delay:.22s} .page-hero-copy > :nth-child(4){animation-delay:.32s} .page-hero-copy > :nth-child(5){animation-delay:.42s} /* ---------- Hero tríptico (Bebidas) ---------- */ .hero-tryptic{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:14px; animation:card-in 1s .22s var(--ease-out) both} .hero-tryptic-main{grid-row:1/3; position:relative; margin:0; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); border:6px solid #fff; rotate:-1.6deg; transition:rotate .5s var(--ease-out), transform .5s var(--ease-out)} .hero-tryptic-sub{position:relative; margin:0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); border:5px solid #fff; rotate:1.4deg; transition:rotate .5s var(--ease-out), transform .5s var(--ease-out)} .hero-tryptic-sub:nth-child(3){rotate:-1.1deg} .hero-tryptic img{width:100%; height:100%; object-fit:cover; display:block} .hero-tryptic-main img{aspect-ratio:4/5} .hero-tryptic-sub img{aspect-ratio:1/1} .hero-tryptic:hover .hero-tryptic-main, .hero-tryptic:hover .hero-tryptic-sub{rotate:0deg; transform:translateY(-3px)} .hero-tryptic .tag-float{position:absolute; left:14px; bottom:14px; z-index:2} .hero-tryptic .hero-stamp{top:-30px; right:-14px; width:clamp(84px,9vw,108px)} /* ---------- Hero planilla (Comestibles) ---------- */ .hero-sheet-wrap{position:relative; z-index:1; animation:card-in 1s .22s var(--ease-out) both} .price-sheet{position:relative; max-width:420px; margin-inline:auto; background:#fff; border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--line); padding:1.6rem 1.6rem 1.4rem; rotate:-1.2deg; transition:rotate .5s var(--ease-out)} .hero-sheet-wrap:hover .price-sheet{rotate:0deg} .price-sheet::before{content:""; position:absolute; left:16px; right:16px; top:-7px; height:14px; background-image:radial-gradient(circle at 50% 100%, transparent 6px, #fff 7px); background-size:20px 14px; background-repeat:repeat-x} .price-sheet-head{display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px dashed var(--line); padding-bottom:.7rem; margin-bottom:.7rem} .price-sheet-head b{font-family:var(--font-d); font-weight:700; font-style:italic; font-size:1.1rem; color:var(--navy-900)} .price-sheet-head span{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-mid)} .price-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.88rem; font-weight:600; color:var(--ink)} .price-row + .price-row{border-top:1px dashed var(--line)} .price-bar{width:64px; height:11px; border-radius:6px; flex:none; background:repeating-linear-gradient(90deg, var(--paper-2) 0 6px, var(--line) 6px 8px)} .price-sheet-foot{margin-top:.8rem; padding-top:.7rem; border-top:2px dashed var(--line); display:flex; align-items:center; gap:.6rem} .price-sheet-foot .tag{font-size:.72rem} .sheet-photo{position:absolute; width:38%; aspect-ratio:1/1; right:-8%; bottom:-12%; border-radius:18px; overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow-sm); rotate:4deg; z-index:-1} .sheet-photo img{width:100%; height:100%; object-fit:cover; display:block} /* Esquina inferior-derecha (junto a "Actualizada"), no la superior: ahí arriba choca con el encabezado "VIAZZO" de la planilla. */ .hero-sheet-wrap .hero-stamp{top:auto; bottom:-26px; left:auto; right:-20px; width:clamp(84px,9vw,108px); rotate:8deg} @media (max-width:920px){ .page-hero-grid{grid-template-columns:1fr} .page-hero{padding-top:1rem} .hero-tryptic, .hero-sheet-wrap{order:-1; max-width:520px; margin-inline:auto} .sheet-photo{right:2%} } @media (max-width:560px){ .hero-tryptic{grid-template-columns:1.2fr 1fr} } /* ===================== DATA-STRIP (ticket de datos) ===================== */ .data-strip{background:color-mix(in srgb, var(--c) 7%, #fff); border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .data-strip-row{display:flex; flex-wrap:wrap} .data-strip-cell{flex:1 1 240px; padding:clamp(1.4rem,3vw,2rem) clamp(1rem,3vw,1.8rem); position:relative; text-align:center} .data-strip-cell + .data-strip-cell::before{content:""; position:absolute; left:0; top:18%; bottom:18%; border-left:2px dashed var(--line)} .data-strip-cell b{display:block; font-family:var(--font-d); font-style:italic; font-weight:600; font-size:clamp(1.05rem,2vw,1.35rem); color:var(--navy-900); margin-bottom:.25rem; letter-spacing:-.01em} .data-strip-cell span{font-size:.82rem; color:var(--ink-soft); font-weight:600} @media (max-width:700px){ .data-strip-cell{flex:1 1 100%} .data-strip-cell + .data-strip-cell::before{display:none; border-top:2px dashed var(--line); top:0; left:16%; right:16%; bottom:auto} } /* ===================== EXPLORADOR DE SURTIDO (Bebidas · firma) ===================== */ .surtido{padding:clamp(3.5rem,7vw,6rem) 0} .surtido-head{max-width:64ch; margin:0 auto clamp(1.8rem,3.5vw,2.4rem); text-align:center} .surtido-head h2 em{color:var(--c)} .filter-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:clamp(1.8rem,3.5vw,2.6rem)} .filter-btn{font-family:var(--font-b); font-weight:700; font-size:.86rem; padding:.55rem 1.15rem; border-radius:100px; border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease} .filter-btn:hover{border-color:var(--c)} .filter-btn[aria-selected="true"]{background:var(--c); border-color:var(--c); color:#fff} .chip-grid{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center} .chip{display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:100px; padding:.5rem 1rem .5rem .7rem; font-size:.86rem; font-weight:700; color:var(--ink); transition:opacity .35s var(--ease-out), filter .35s var(--ease-out), transform .3s var(--ease-spring)} .chip::before{content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--dot, var(--c))} .chip[data-hot="1"]::after{content:"🔥"; font-size:.8em; margin-left:.1rem} .chip.is-off{opacity:.28; filter:grayscale(1)} @media (max-width:640px){ /* En mobile el espacio importa más que la lectura "atenuada": se ocultan. */ .chip.is-off{display:none} } /* ===================== SHELF-CARD (bandas editoriales de Bebidas) ===================== */ .shelf-index{display:flex; flex-direction:column; gap:clamp(2.2rem,4.5vw,3.6rem)} .shelf-card{position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-sm); overflow:hidden} .shelf-card::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--c)} .shelf-card.is-alt::before{background:var(--crimson)} .shelf-card.is-alt .shelf-tab{background:var(--crimson)} .shelf-card.is-alt:nth-child(even){direction:rtl} .shelf-card.is-alt:nth-child(even) > *{direction:ltr} .shelf-tab{position:absolute; left:0; top:0; background:var(--c); color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .9rem .35rem 1.1rem; border-radius:0 0 12px 0} .shelf-mosaic{position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:color-mix(in srgb, var(--c) 10%, var(--paper-2)); display:grid; place-items:center} .shelf-mosaic svg{width:56%; height:56%; color:var(--c); opacity:.9} .shelf-card.is-alt .shelf-mosaic{background:color-mix(in srgb, var(--crimson) 10%, var(--paper-2))} .shelf-card.is-alt .shelf-mosaic svg{color:var(--crimson)} .shelf-text h2{font-size:clamp(1.5rem,2.8vw,2.1rem); margin:1.2rem 0 .7rem} .shelf-copy{color:var(--ink-soft); font-size:1rem; line-height:1.65; max-width:54ch; margin:0 0 1rem} .shelf-copy strong{color:var(--navy-900); font-weight:700} .shelf-bullets{display:grid; grid-template-columns:1fr 1fr; gap:.4rem .9rem; list-style:none; margin:0 0 .3rem; padding:0} .shelf-bullets li{position:relative; padding-left:1.2rem; font-size:.9rem; font-weight:600; color:var(--ink-soft)} .shelf-bullets li::before{content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--c)} .shelf-card.is-alt .shelf-bullets li::before{background:var(--crimson)} .shelf-note{display:block; margin-top:.8rem; font-size:.84rem; color:var(--blue-mid); font-style:italic} @media (max-width:760px){ .shelf-card, .shelf-card.is-alt:nth-child(even){grid-template-columns:1fr; direction:ltr} .shelf-bullets{grid-template-columns:1fr} } /* ===================== SPEC-TABLE ===================== */ .spec-wrap{padding:clamp(3rem,6vw,5rem) 0} .spec-wrap .rubros-head{margin-bottom:clamp(1.6rem,3vw,2.2rem)} .spec-wrap h2 em{color:var(--c)} .spec-scroll{overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff; -webkit-mask-image:linear-gradient(90deg,#000 96%, transparent); mask-image:linear-gradient(90deg,#000 96%, transparent)} .spec-table{width:100%; border-collapse:collapse; min-width:560px; font-size:.92rem} .spec-table caption{caption-side:top; text-align:left; padding:1rem 1.2rem 0; font-size:.8rem; color:var(--ink-soft)} .spec-table th{text-align:left; font-family:var(--font-b); font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--blue-mid); padding:1rem 1.2rem; border-bottom:2px solid var(--line)} .spec-table td{padding:.9rem 1.2rem; border-bottom:1px solid var(--paper-2); color:var(--ink)} .spec-table tbody tr:last-child td{border-bottom:0} .spec-table tbody tr:hover{background:color-mix(in srgb, var(--c) 5%, transparent)} .spec-table td:first-child{font-weight:700; color:var(--navy-900)} /* ===================== ZONA DE REPARTO (chips, no calendario inventado) ===================== */ .zone-section{padding:clamp(3rem,6vw,5rem) 0} .zone-card{position:relative; background:var(--navy-950); color:#fff; border-radius:24px; padding:clamp(2rem,4.5vw,3.2rem); overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center} .zone-card::before{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background:radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%)} .zone-card-copy{position:relative} .zone-card .eyebrow{color:color-mix(in srgb, var(--c) 55%, #fff)} .zone-card .eyebrow .swoosh-mini{filter:brightness(0) invert(1)} .zone-card h2{color:#fff; font-size:clamp(1.5rem,2.8vw,2.1rem)} .zone-card h2 em{color:color-mix(in srgb, var(--c) 60%, #fff)} .zone-card p{color:rgba(255,255,255,.78); max-width:52ch} .zone-chips{position:relative; display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem} .zone-chip{display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:.86rem; padding:.5rem 1rem; border-radius:100px} .zone-chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c); flex:none} .zone-card-cta{position:relative; text-align:center} @media (max-width:760px){ .zone-card{grid-template-columns:1fr; text-align:left} .zone-card-cta{text-align:left} } /* ===================== PRICE-LIST MODULE (Comestibles · firma #1) ===================== */ .price-list-module{position:relative; overflow:hidden; color:#fff; background: radial-gradient(90% 120% at 100% -10%, var(--navy-700), transparent 60%), linear-gradient(170deg, var(--navy-900), var(--navy-950)); padding:clamp(3rem,6vw,5rem) 0} .plm-swoosh{position:absolute; inset:0; width:100%; height:100%; opacity:.4; pointer-events:none} .plm-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,3.6rem); align-items:center} .plm-copy .eyebrow{color:#FF9C9C} .plm-copy .eyebrow .swoosh-mini{filter:brightness(0) invert(1)} .plm-copy h2{color:#fff; font-size:clamp(1.7rem,3.2vw,2.5rem)} .plm-copy h2 em{color:var(--butter,#FF9C9C)} .plm-copy p{color:rgba(255,255,255,.82); max-width:50ch} .plm-bullets{list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.5rem} .plm-bullets li{position:relative; padding-left:1.5rem; font-weight:600; color:rgba(255,255,255,.9); font-size:.94rem} .plm-bullets li::before{content:""; position:absolute; left:0; top:.3em; width:1em; height:1em; border-radius:50%; background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat} .plm-form{position:relative; background:#fff; border-radius:20px; padding:clamp(1.4rem,2.6vw,1.9rem); box-shadow:0 30px 70px -30px rgba(0,0,0,.5)} .plm-form h3{font-family:var(--font-b); font-weight:800; font-size:.95rem; color:var(--navy-900); margin:0 0 1rem; text-transform:uppercase; letter-spacing:.06em} .field{display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem} .field label{font-size:.78rem; font-weight:700; color:var(--ink-soft)} .field input, .field select{font-family:var(--font-b); font-size:.95rem; padding:.7rem .85rem; border-radius:10px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink)} .field input:focus, .field select:focus{outline:2px solid var(--navy-500); outline-offset:1px; border-color:var(--navy-500)} .plm-form .btn{width:100%; justify-content:center; margin-top:.3rem} .plm-note{font-size:.74rem; color:var(--ink-soft); text-align:center; margin:.7rem 0 0} @media (max-width:920px){ .plm-grid{grid-template-columns:1fr} } /* Variante reducida del módulo, para el CTA final de Comestibles (sin repetir el form) */ .price-list-module.plm-mini{padding:clamp(3rem,6vw,4.5rem) 0} .plm-mini .plm-grid{grid-template-columns:1fr; text-align:center} .plm-mini .plm-copy{max-width:60ch; margin-inline:auto} .plm-mini .plm-copy p{margin-inline:auto} .plm-mini .plm-bullets{align-items:center} .plm-mini .plm-bullets li{padding-left:0} .plm-mini .plm-bullets li::before{display:none} .plm-mini .plm-cta{margin-top:1.3rem; display:flex; flex-direction:column; align-items:center; gap:.6rem} .plm-mini .cta-contact{color:rgba(255,255,255,.7); font-size:.9rem; margin:0} /* ===================== ÍNDICE DE GÓNDOLA (Comestibles · firma #2) ===================== */ .gondola{padding:clamp(3.5rem,7vw,6rem) 0} .gondola-head{max-width:64ch; margin:0 auto clamp(1.8rem,3.5vw,2.4rem); text-align:center} .gondola-head h2 em{color:var(--c)} .gondola-index{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff} .g-cat{display:grid; grid-template-columns:220px 1fr; gap:1.2rem; align-items:start; padding:clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.5vw,1.8rem); position:relative} .g-cat:nth-child(even){background:var(--paper-2)} .g-cat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c)} .g-cat-head{display:flex; align-items:center; justify-content:space-between; gap:.8rem; background:none; border:0; padding:0; margin:0; width:100%; text-align:left; font:inherit; color:inherit; cursor:default} .g-num{font-family:var(--font-d); font-style:italic; font-weight:600; color:var(--c); opacity:.55; margin-right:.4rem} .g-cat h3{margin:0; font-family:var(--font-d); font-size:1.15rem; color:var(--navy-900); line-height:1.2} .g-chips{display:flex; flex-wrap:wrap; gap:.45rem} .g-chips .chip{padding:.4rem .8rem .4rem .6rem; font-size:.82rem} /* El toggle (+/−) es puramente decorativo salvo que JS active el colapsable en mobile (clase .js-collapsible, agregada por comestibles.js). Sin JS, todo el índice queda expandido y legible — nunca se oculta contenido por defecto. */ .g-toggle{display:none} .js-collapsible .g-cat-head{cursor:pointer} .js-collapsible .g-toggle{display:inline-flex; width:26px; height:26px; border-radius:50%; background:var(--c); color:#fff; align-items:center; justify-content:center; font-weight:700; flex:none; font-size:1rem; line-height:1} .js-collapsible .g-toggle::before{content:"−"} .js-collapsible .g-cat.is-collapsed .g-toggle::before{content:"+"} .js-collapsible .g-cat.is-collapsed .g-chips{display:none} @media (max-width:760px){ .g-cat{grid-template-columns:1fr; gap:.6rem} } /* ===================== BUILDER "Armá tu góndola" ===================== */ .builder-section{padding:clamp(3rem,6vw,5rem) 0; background: linear-gradient(180deg, var(--paper) 0%, #fff 12% 88%, var(--paper) 100%)} .builder{border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--shadow); padding:clamp(1.8rem,3.5vw,2.6rem); display:grid; gap:1.6rem} .builder-head h2 em{color:var(--c)} .builder-head p{color:var(--ink-soft); max-width:60ch} .builder-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem} .builder-col{display:flex; flex-direction:column; gap:.6rem} .builder-col h4{margin:0 0 .2rem; font-family:var(--font-b); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--blue-mid)} .check{display:flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:600; color:var(--ink); cursor:pointer; user-select:none} .check input{position:absolute; opacity:0; width:1px; height:1px} .check-box{width:20px; height:20px; border-radius:6px; border:1.6px solid var(--line); flex:none; display:grid; place-items:center; transition:background .2s ease, border-color .2s ease} .check-box svg{width:12px; height:12px; opacity:0; transition:opacity .15s ease} .check input:checked + .check-box{background:var(--c); border-color:var(--c)} .check input:checked + .check-box svg{opacity:1} .check input:focus-visible + .check-box{outline:3px solid var(--navy-500); outline-offset:2px} .builder-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:2px dashed var(--line); padding-top:1.3rem} .builder-count{font-weight:700; color:var(--ink-soft); font-size:.92rem} .builder-count b{color:var(--navy-900); font-family:var(--font-d); font-style:italic; font-size:1.2rem} @media (max-width:760px){ .builder-cols{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .builder-cols{grid-template-columns:1fr} } /* ===================== STEPS (cómo comprar) ===================== */ .steps-wrap{padding:clamp(3rem,6vw,5rem) 0} .biz-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:clamp(2rem,4vw,3rem)} .biz-chip{display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:100px; padding:.5rem 1rem; font-size:.86rem; font-weight:700; color:var(--navy-900); box-shadow:var(--shadow-sm)} .biz-chip svg{width:16px; height:16px; color:var(--c)} .steps{display:flex; align-items:center; justify-content:center; gap:0; max-width:900px; margin:0 auto} .step{flex:1; text-align:center; padding-inline:1rem; position:relative} .step-num{width:44px; height:44px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font-family:var(--font-d); font-weight:700; font-size:1.1rem; margin:0 auto .9rem} .step h3{font-size:1.05rem; margin:0 0 .3rem} .step p{color:var(--ink-soft); font-size:.88rem; margin:0} .step-line{position:absolute; top:22px; left:calc(50% + 34px); right:calc(-50% + 34px); height:2px; background-image:repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 16px)} .step:last-child .step-line{display:none} @media (max-width:700px){ .steps{flex-direction:column; gap:1.6rem} .step-line{display:none} } /* ---------- Nota no perecederos ---------- */ .perishable-note{display:flex; gap:.7rem; align-items:flex-start; max-width:760px; margin:2rem auto 0; background:var(--crimson-soft); border-left:3px solid var(--crimson); border-radius:0 12px 12px 0; padding:.9rem 1.1rem; font-size:.88rem; color:var(--ink)} .perishable-note svg{width:18px; height:18px; color:var(--crimson); flex:none; margin-top:.1rem} /* ===================== BAND-REPARTO (compartida) ===================== */ .band-reparto{background:var(--navy-950); color:#fff} .band-reparto-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; padding-block:clamp(1.6rem,3vw,2.2rem)} .band-reparto-copy{display:flex; align-items:center; gap:1rem} .band-ico{width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.08); flex:none; display:grid; place-items:center; color:var(--c)} .band-ico svg{width:26px; height:26px} .band-reparto-copy h3{color:#fff; margin:0 0 .2rem; font-size:1.05rem; font-family:var(--font-b); font-weight:800} .band-reparto-copy p{color:rgba(255,255,255,.7); margin:0; font-size:.9rem} .band-reparto .btn-outline{border-color:rgba(255,255,255,.4); color:#fff} .band-reparto .btn-outline:hover{background:rgba(255,255,255,.1)} /* ===================== FAQ variantes internas ===================== */ .faq-solo .faq-grid{grid-template-columns:1fr; max-width:760px; margin-inline:auto} .faq-solo .faq-item{padding-left:2.6rem} /* El número vive DENTRO de

(no como hermano suelto):

oculta cualquier hijo que no sea el summary mientras está cerrado, así que un span antes del summary desaparecía por completo hasta abrir la pregunta. */ .faq-solo .faq-item summary .f-num{position:absolute; left:-1.6rem; top:1.05rem; font-family:var(--font-d); font-style:italic; font-weight:600; color:var(--c); opacity:.55; font-size:.95rem} .faq-featured .faq-grid > .faq-item:first-child{grid-column:1/-1; border-color:var(--c); background:color-mix(in srgb, var(--c) 5%, #fff)} .faq-featured .faq-grid > .faq-item:first-child summary{font-size:1.1rem} /* ===================== CROSSLINKS ===================== */ .crosslinks{padding:clamp(2.5rem,5vw,4rem) 0} .crosslinks-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem} .crosslink{display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.3rem; box-shadow:var(--shadow-sm); text-decoration:none; transition:transform .3s var(--ease-spring), box-shadow .3s ease, border-color .3s ease} .crosslink:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--cl,var(--navy-700)) 50%, transparent)} .crosslink-ico{width:44px; height:44px; border-radius:50%; background:var(--navy-100); color:var(--navy-700); display:grid; place-items:center; flex:none; font-weight:700; overflow:hidden} .crosslink-ico img{width:100%; height:100%; object-fit:cover} .crosslink span{display:block} .crosslink .cl-label{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)} .crosslink .cl-title{font-family:var(--font-d); font-weight:600; font-size:1.15rem; color:var(--navy-900)} @media (max-width:640px){ .crosslinks-grid{grid-template-columns:1fr} } /* ===================== STICKY-CTA (mobile, páginas internas) ===================== */ .sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; gap:.7rem; align-items:center; justify-content:space-between; padding:.65rem .9rem; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -12px 30px -18px rgba(13,31,92,.35); transform:translateY(100%); transition:transform .3s var(--ease-out)} .sticky-cta.is-visible{transform:translateY(0)} .sticky-cta-info{font-size:.78rem; color:var(--ink-soft); font-weight:600; min-width:0} .sticky-cta-info b{display:block; color:var(--navy-900); font-family:var(--font-d); font-size:.95rem} .sticky-cta .btn{flex:none} @media (max-width:760px){ .sticky-cta{display:flex} body.has-sticky-cta{padding-bottom:64px} /* En mobile, mientras la sticky-cta está visible, el flotante de WhatsApp queda de más (se superponen) — se oculta solo acá. En desktop la sticky-cta ni se muestra, así que el flotante siempre queda a la vista. */ body.has-sticky-cta .wa-float{display:none} } @media (prefers-reduced-motion:reduce){ .page-hero-copy > *, .hero-tryptic, .hero-sheet-wrap{animation:none} .sticky-cta{transition:none} }