/* Cioccolato da Vetrina · formato «Vetrina di pasticceria» (Fabri, 12/11): toldo a rayas, vidriera, cartelitos de precio,
   bandejas, estantes, recibo. Paleta: cacao, crema, frambuesa, pistacho, dorado. Playfair Display + Manrope. */
:root { --crema:#F6EEE3; --panna:#FFFBF4; --cacao:#3A2219; --cacao2:#2E1A12; --lamp:#9E3B4E; --pist:#6F8F4E; --pist2:#E3EBD5; --oro:#B98B4E; --oro2:#E9C98B; --grigio:#6B5548; --linea:#E2D2C0 }
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: Manrope, system-ui, sans-serif; background: var(--crema); color: var(--cacao2); line-height: 1.5; -webkit-font-smoothing: antialiased }
img { display: block; max-width: 100% }
a { color: inherit }
.envol { max-width: 1080px; margin: 0 auto; padding: 0 18px }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.08; color: var(--cacao2) }
h2 { font-size: clamp(27px, 4.4vw, 42px); font-weight: 800 }
h3 { font-size: 19px; font-weight: 800 }
.sopra { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pist); margin-bottom: 8px }
section { padding: 56px 0 }
.lead { font-size: 17px; color: var(--grigio); max-width: 640px; margin-top: 12px }

/* botones */
.cta { display: block; background: var(--cacao); color: #F6E7C9; text-align: center; font-weight: 800; font-size: 17px; padding: 16px 20px; border-radius: 10px; border: 2px solid var(--oro); box-shadow: inset 0 0 0 3px var(--cacao), inset 0 0 0 4px var(--oro); text-decoration: none; transition: transform .15s ease, background .15s ease }
.cta:hover { background: #4a2c20; transform: translateY(-1px) }
.cta:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px }
.micro { text-align: center; font-size: 12.5px; color: var(--grigio); margin-top: 9px }

/* toldo */
.tenda { height: 34px; background: repeating-linear-gradient(90deg, var(--cacao) 0 26px, var(--crema) 26px 52px); position: relative; z-index: 3 }
.tenda:after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: radial-gradient(circle at 13px 0, var(--cacao) 12px, transparent 13px) 0 0/52px 12px, radial-gradient(circle at 39px 0, var(--crema) 12px, transparent 13px) 0 0/52px 12px }

/* inicio */
.inicio { padding: 0; position: relative }
.vetrina { position: relative; height: 430px; overflow: hidden }
.vetrina img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40% }
.vetrina:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246,238,227,0) 45%, var(--crema) 97%) }
.insegna { position: absolute; left: 18px; top: 24px; z-index: 2; font-family: 'Playfair Display'; font-style: italic; font-weight: 600; color: var(--oro2); font-size: 16px; letter-spacing: .06em; text-shadow: 0 1px 6px rgba(0,0,0,.55); border-bottom: 1px solid rgba(233,201,139,.6); padding-bottom: 3px }
.inicio-testo { position: relative; z-index: 2; margin-top: -120px; padding: 0 18px 30px; max-width: 560px }
.inicio h1 { font-size: clamp(31px, 5vw, 50px); font-weight: 800 }
.inicio h1 em, .cierre h2 em { color: var(--lamp); font-style: italic; font-weight: 600 }
.inicio .sub { font-size: 16px; color: #4A3328; margin-top: 10px }
.riga-prezzo { display: flex; align-items: center; gap: 14px; margin: 16px 0 }
.cartellino { position: relative; background: var(--panna); border: 1.5px solid var(--cacao); border-radius: 6px; padding: 8px 14px 8px 24px; transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(58,34,25,.18); display: inline-block }
.cartellino:before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--cacao); transform: translateY(-50%) }
.cartellino small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pist); font-weight: 800 }
.cartellino s { font-size: 13px; color: #8B7466; margin-left: 6px }
.cartellino b { display: block; font-family: 'Playfair Display'; font-size: 31px; line-height: 1; color: var(--lamp) }
.tapas { display: flex; margin-left: auto; padding-right: 8px }
.tapas img { width: 60px; height: auto; border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,.25); margin-left: -26px; border: 2px solid #fff }
.tapas img:nth-child(1) { transform: rotate(-8deg) } .tapas img:nth-child(3) { transform: rotate(8deg) }

/* números tipo ticket */
.scontrino-numeri { padding: 16px 0; background: var(--cacao2); color: #F6E7C9; text-align: center }
.scontrino-numeri p { font-size: 15px } .scontrino-numeri b { font-family: 'Playfair Display'; font-size: 22px; color: var(--oro2) } .scontrino-numeri i { opacity: .5; margin: 0 6px; font-style: normal }

/* dolores: bigliettini appuntati */
.biglietti { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px }
.biglietto { background: var(--panna); padding: 20px 18px 18px; border-radius: 4px; box-shadow: 0 6px 16px rgba(58,34,25,.10); position: relative; font-size: 16px; font-weight: 600 }
.biglietto:before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--lamp); box-shadow: 0 2px 3px rgba(0,0,0,.25); transform: translateX(-50%) }
.biglietto:nth-child(odd) { transform: rotate(-1.2deg) } .biglietto:nth-child(even) { transform: rotate(1deg) }
.chiusa { margin-top: 26px; font-family: 'Playfair Display'; font-style: italic; font-size: 20px; color: var(--lamp); max-width: 640px }

/* método: bandejas */
.metodo { background: var(--panna) }
.vassoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 26px }
.vassoio { background: var(--crema); border-radius: 14px; overflow: hidden; border: 1px solid var(--linea) }
.vassoio img { width: 100%; aspect-ratio: 1; object-fit: cover }
.vassoio figcaption { display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start; font-size: 15px }
.vassoio figcaption b { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pist); color: #fff; display: grid; place-items: center; font-family: 'Playfair Display'; font-size: 17px }
.vassoio:nth-child(2) figcaption b { background: var(--lamp) }
.vassoio strong { display: block; font-family: 'Playfair Display'; font-size: 19px }
.nota-metodo { margin-top: 20px; background: var(--cacao); color: #F6E7C9; padding: 16px 18px; border-radius: 10px; font-size: 15px }

/* gustos: estante con cartelitos */
.mensola { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding-bottom: 14px; border-bottom: 10px solid #E9DCCB; box-shadow: 0 8px 0 -4px #d6c4ae }
.mensola figure { position: relative }
.mensola img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px }
.mensola figcaption { position: absolute; left: 6px; bottom: 6px; right: 6px; background: var(--panna); border: 1px solid var(--cacao); border-radius: 4px; font-size: 11.5px; font-weight: 700; padding: 4px 6px; line-height: 1.25 }
.e-altre { margin-top: 18px; font-size: 15px; color: var(--grigio); text-align: center }

/* qué cambia: cartelitos */
.cambia { background: var(--panna) }
.cartellini { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px }
.cart { border: 1.5px solid var(--cacao); border-radius: 10px; padding: 18px; background: var(--crema); position: relative }
.cart:before { content: ""; position: absolute; top: -6px; left: 22px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--cacao); background: var(--panna) }
.cart h3 { color: var(--lamp); margin-bottom: 6px }
.cart p { font-size: 15px; color: #4A3328 }

/* tomos: estante */
.scaffale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; margin-top: 24px }
.scaffale figure { display: flex; flex-direction: column; gap: 8px }
.scaffale img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 14px rgba(58,34,25,.22) }
.scaffale figcaption { font-size: 13px; color: var(--grigio); line-height: 1.35 }
.scaffale figcaption b { display: block; color: var(--cacao2); font-size: 14px }

/* por dentro */
.dentro { background: var(--cacao2); color: #F6E7C9 }
.dentro h2 { color: #fff } .dentro .lead { color: #E3D3C2 } .dentro .sopra { color: var(--oro2) }
.hojas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px }
.hojas img { width: 100%; height: auto; border-radius: 4px; cursor: zoom-in; box-shadow: 0 8px 18px rgba(0,0,0,.35) }

/* bonos */
.bonus-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 24px }
.b { display: flex; gap: 14px; background: var(--panna); border-radius: 10px; padding: 14px; align-items: center }
.b img { width: 72px; height: auto; border-radius: 3px; box-shadow: 0 4px 8px rgba(0,0,0,.18); flex: none }
.b h3 { font-size: 17px } .b p { font-size: 14px; color: var(--grigio); margin: 2px 0 6px }
.vale { display: inline-block; background: var(--pist2); color: var(--pist); font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 20px; letter-spacing: .04em }
.vale s { color: var(--grigio); font-weight: 600; margin-right: 4px }

/* oferta: recibo */
.offerta { background: var(--cacao); padding: 64px 0 }
.ricevuta { max-width: 470px; margin: 0 auto; background: var(--panna); padding: 26px 22px 28px; position: relative; box-shadow: 0 18px 40px rgba(0,0,0,.35);
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0/18px 100% repeat-x; }
.ric-testa { text-align: center; font-family: 'Playfair Display'; font-size: 24px; font-weight: 800; border-bottom: 1.5px dashed #bba48c; padding-bottom: 12px }
.ric-testa small { font-family: Manrope; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grigio); font-weight: 700 }
.ricevuta ul { list-style: none; margin: 12px 0 }
.ricevuta li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; border-bottom: 1px dotted #d8c7b2 }
.ricevuta li b { font-weight: 700; white-space: nowrap }
.ric-tot, .ric-oggi { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px }
.ric-tot s { font-size: 18px; color: var(--grigio) }
.ric-oggi span { font-weight: 800; font-size: 16px } .ric-oggi b { font-family: 'Playfair Display'; font-size: 46px; color: var(--lamp); line-height: 1 }
.ric-risp { text-align: right; color: var(--pist); font-weight: 800; font-size: 14px; margin-bottom: 16px }

/* garantía */
.garanzia .envol { display: flex; gap: 22px; align-items: center; max-width: 760px }
.sigillo { flex: none; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b8505f, var(--lamp)); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 5px var(--crema), 0 0 0 7px var(--oro) }
.sigillo b { font-family: 'Playfair Display'; font-size: 44px; line-height: .9 } .sigillo small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800 }
.garanzia p { font-size: 15.5px; color: #4A3328; margin-top: 8px }

/* FAQ */
.faq { background: var(--panna) }
.faq .envol { max-width: 760px }
details { border-bottom: 1px solid var(--linea); padding: 16px 0 }
summary { font-weight: 800; font-size: 16.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px }
summary::-webkit-details-marker { display: none }
summary:after { content: "+"; color: var(--lamp); font-size: 22px; line-height: 1 }
details[open] summary:after { content: "–" }
details p { margin-top: 8px; color: #4A3328; font-size: 15px }

/* cierre */
.cierre { text-align: center }
.cierre .envol { max-width: 560px }
.cierre .sub { color: var(--grigio); margin: 8px 0 18px; font-size: 16px }
.cartellino.grande { margin-bottom: 20px } .cartellino.grande b { font-size: 40px }

footer { background: var(--cacao2); color: #CDBBA8; font-size: 13px; padding: 26px 0 96px; text-align: center }
footer p + p { margin-top: 6px } footer a { color: var(--oro2) }

/* barra fija (celular) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(246,238,227,.96); box-shadow: 0 -4px 14px rgba(0,0,0,.12); transform: translateY(110%); transition: transform .25s ease; z-index: 20 }
.barra.on { transform: none }
.barra .cta { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px }
.barra .cta b { font-family: 'Playfair Display'; font-size: 22px; color: var(--oro2) }

/* zoom de páginas */
.zoom-caja { position: fixed; inset: 0; background: rgba(20,12,8,.94); z-index: 50; display: grid; place-items: center; touch-action: none; overflow: hidden }
.zoom-caja[hidden] { display: none }
.zoom-caja img { max-width: 94vw; max-height: 88vh; transform-origin: center; user-select: none; -webkit-user-drag: none }
.zoom-cerrar { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--cacao); font-size: 26px; cursor: pointer; z-index: 2 }
.zoom-ayuda { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #d6c6b6; font-size: 13px }

/* compu */
@media (min-width: 861px) {
  .inicio { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; max-width: 1200px; margin: 0 auto }
  .vetrina { order: 2; height: auto; min-height: 640px }
  .vetrina:after { background: linear-gradient(90deg, var(--crema) 0%, rgba(246,238,227,0) 28%) }
  .inicio-testo { margin: 0; align-self: center; padding: 40px 30px 40px 40px }
  .mensola { grid-template-columns: repeat(5, 1fr) } .mensola figure:nth-child(n+6) { display: none }
  .scaffale { grid-template-columns: repeat(6, 1fr) }
  .hojas { grid-template-columns: repeat(6, 1fr) }
  .barra { display: none }
  .insegna { top: auto; bottom: 26px; left: auto; right: 26px; font-size: 18px }
}
@media (max-width: 380px) { .inicio h1 { font-size: 28px } .tapas img { width: 50px } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }
.vassoio img, .mensola img { height: auto }
/* fila del precio más llena (Fabri, 12/11: «queda media vacía») */
.riga-prezzo { gap: 10px; margin: 18px 0 16px; align-items: center }
.cartellino { padding: 10px 16px 10px 26px }
.cartellino b { font-size: 38px }
.mockup { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px }
.mockup .tapas { margin: 0; padding: 0 0 0 30px; justify-content: center }
.mockup .tapas img { width: 64px; margin-left: -30px }
.mockup .tapas img:nth-child(1) { transform: rotate(-10deg) translateY(4px) }
.mockup .tapas img:nth-child(2) { transform: rotate(-3deg) }
.mockup .tapas img:nth-child(3) { transform: rotate(4deg) }
.mockup .tapas img:nth-child(4) { transform: rotate(11deg) translateY(5px) }
.incluye { font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--grigio) }
.incluye b { color: var(--cacao2) }
@media (max-width: 380px) { .mockup .tapas img { width: 54px; margin-left: -26px } .cartellino b { font-size: 32px } }
@media (min-width: 861px) { .mockup .tapas img { width: 82px; margin-left: -34px } .incluye { font-size: 14px } }
/* botón visible sin bajar en celulares de ~680 px de alto (Fabri, 12/11; LD-28) */
@media (max-width: 860px) {
  .tenda { height: 24px } .tenda:after { bottom: -10px; height: 10px; background-size: 52px 10px }
  .vetrina { height: 340px } .insegna { top: 16px; font-size: 14px }
  .inicio-testo { margin-top: -112px; padding-bottom: 22px }
  .inicio h1 { font-size: 28px }
  .inicio .sub { font-size: 14.5px; margin-top: 6px; line-height: 1.4 }
  .riga-prezzo { margin: 10px 0 12px }
  .cartellino { padding: 7px 14px 7px 24px } .cartellino b { font-size: 33px }
  .mockup { gap: 4px } .mockup .tapas img { width: 54px; margin-left: -26px }
  .incluye { font-size: 11.5px }
  .inicio .cta { padding: 14px 18px }
}
@media (max-width: 380px) { .inicio h1 { font-size: 26px } .vetrina { height: 320px } }
/* el inicio ocupa exactamente la pantalla del celular: la franja marrón empieza justo abajo (Fabri, 12/11) */
@media (max-width: 860px) {
  .inicio { display: flex; flex-direction: column; min-height: calc(100vh - 24px); min-height: calc(100svh - 24px) }
  .vetrina { flex: 1 0 340px; height: auto }
}
@media (max-width: 380px) { .vetrina { flex-basis: 320px } }
/* cartelito del precio v2 (Fabri, 12/11: «más estético»): etiqueta de pastelería en cacao con borde dorado, agujero e hilo */
.cartellino, .cartellino.grande { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: linear-gradient(160deg, #4a2c20 0%, var(--cacao) 55%, #2a170f 100%); color: #F6E7C9; border: 0; border-radius: 4px 12px 12px 4px;
  padding: 12px 18px 12px 34px; transform: rotate(-4deg); box-shadow: 0 10px 22px -8px rgba(46,26,18,.55);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%) }
.cartellino:after { content: ""; position: absolute; inset: 5px 5px 5px 20px; border: 1px solid rgba(233,201,139,.55); border-radius: 2px 8px 8px 2px; pointer-events: none }
.cartellino:before { left: 13px; top: 50%; width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--crema); box-shadow: inset 0 1px 2px rgba(0,0,0,.45); transform: translateY(-50%) }
.cartellino .filo { position: absolute; left: -46px; top: calc(50% - 22px); width: 64px; height: 26px; border: 1.5px solid var(--oro); border-color: var(--oro) transparent transparent var(--oro); border-radius: 50% 0 0 0; transform: rotate(-18deg); display: none }
.cartellino small { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oro2); font-weight: 800; position: relative; z-index: 1 }
.cartellino s { font-size: 14px; color: rgba(246,231,201,.6); margin: 0; text-decoration-color: var(--lamp); text-decoration-thickness: 2px; position: relative; z-index: 1 }
.cartellino b { display: flex; align-items: flex-start; font-family: 'Playfair Display'; font-weight: 800; font-size: 44px; line-height: .95; color: #fff; position: relative; z-index: 1 }
.cartellino b i { font-style: normal; font-size: .5em; margin: 4px 0 0 3px; color: var(--oro2) }
.cartellino.grande { margin-bottom: 22px } .cartellino.grande b { font-size: 54px }
@media (max-width: 860px) { .cartellino { padding: 10px 16px 10px 32px } .cartellino b { font-size: 40px } }
@media (max-width: 380px) { .cartellino b { font-size: 34px } }