/* Alquiladora La Gran Carpa — demo de infoweb.mx
   Paleta: seto (verde de jardín), atardecer, champaña, mantel. Bodoni Moda + Jost + IBM Plex Mono. */
:root {
  --seto: #1E3B2F;
  --seto-2: #2C5341;
  --seto-3: #3E6B54;
  --champana: #C8A15A;
  --champana-cl: #E7CF8E;
  --oro-tx: #7A5B1F;
  --ocaso: #E8956F;
  --rubor: #F6DCCB;
  --mantel: #FBF8F2;
  --lino: #F1EBDF;
  --tinta: #1C211E;
  --gris: #585D57;
  --linea: #E2D9C7;
  --alerta: #B3412E;
  --ok: #2E7D5B;
  --wa: #0F7A6E;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --cuerpo: 'Jost', 'Avenir Next', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --barra: 120px;
  --r: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + .5rem); }
body { margin: 0; background: var(--mantel); color: var(--tinta); font: 400 1rem/1.5 var(--cuerpo); padding-bottom: 7.5rem; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #8E6E2C; outline-offset: 2px; }
.barra :focus-visible, .escenario-col :focus-visible, .cta-infoweb :focus-visible, .pagos-res :focus-visible { outline-color: var(--champana); }
h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--tinta); color: #fff; padding: .6rem 1rem; z-index: 99; }
.saltar:focus { left: 8px; }
.nota { color: var(--gris); font-size: .88rem; margin: .4rem 0; }
.enlace { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; }
.ceja { font: 500 .78rem/1.3 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-tx); margin: 0 0 .4rem; }

/* ── Botones ── */
.boton { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1.5px solid var(--seto); background: var(--seto); color: var(--mantel);
  border-radius: 999px; padding: .62rem 1.15rem; font-weight: 500; text-decoration: none; line-height: 1.2; transition: background .15s, transform .1s; }
.boton:hover { background: var(--seto-2); }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-oro { background: var(--champana); border-color: var(--champana); color: var(--tinta); }
.boton-oro:hover { background: var(--champana-cl); }
.boton-borde { background: transparent; color: var(--seto); }
.boton-borde:hover { background: var(--lino); }
.boton-mini { padding: .32rem .85rem; font-size: .84rem; }
.boton-grande { padding: .85rem 1.4rem; font-size: 1.04rem; width: 100%; }
.boton-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.boton-wa:hover { background: #0B6359; }
.boton-wa svg { width: 1.25rem; height: 1.25rem; }
.icono { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgba(251,248,242,.25); background: transparent; color: var(--mantel); display: inline-grid; place-items: center; }
.icono svg { width: 1.2rem; height: 1.2rem; }
.icono .tache { display: none; }
.icono.mudo .tache { display: inline; }
.icono.mudo .ondas { display: none; }
.icono-txt { width: auto; padding: 0 .8rem; gap: .4rem; display: inline-flex; align-items: center; }
.icono-txt span { font-size: .84rem; }

/* ── Cabecera ── */
.barra { position: sticky; top: 0; z-index: 30; background: var(--seto); color: var(--mantel); box-shadow: 0 1px 0 rgba(200,161,90,.35); }
.demo-banner { background: #2b2620; color: #f2ece1; text-align: center; font-size: .82rem; line-height: 1.4; padding: .38rem .9rem; letter-spacing: .01em; }
@media (min-width: 640px) { .demo-banner { font-size: .9rem; } }
.barra-in { max-width: 1320px; margin: 0 auto; padding: .5rem 1rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marca acc" "switch switch"; gap: .45rem .75rem; align-items: center; }
.marca { grid-area: marca; display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; min-width: 0; }
.marca-ico { width: 2.3rem; height: auto; flex: none; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca-txt strong { font: italic 600 1.28rem/1.05 var(--display); letter-spacing: .01em; }
.marca-txt small { font-size: .72rem; color: rgba(251,248,242,.75); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acc { grid-area: acc; display: flex; gap: .4rem; }
.vista-switch { grid-area: switch; display: grid; grid-template-columns: 1fr 1fr; background: rgba(0,0,0,.22); border-radius: 999px; padding: 3px; border: 1px solid rgba(200,161,90,.35); }
.vista-switch button { min-height: 2.6rem; border: 0; background: transparent; color: rgba(251,248,242,.85); border-radius: 999px; padding: .42rem .6rem; font-weight: 500; font-size: .92rem; }
.vista-switch button[aria-selected="true"] { background: var(--champana); color: var(--tinta); }
@media (max-width: 420px) { .icono-txt span { display: none; } .icono-txt { width: 2.4rem; padding: 0; justify-content: center; } }
@media (min-width: 900px) {
  .barra-in { grid-template-columns: auto 1fr auto; grid-template-areas: "marca switch acc"; }
  .vista-switch { justify-self: center; width: 25rem; }
}

/* ── Escenario del cliente ── */
.escenario-col { padding-top: .75rem !important; background: radial-gradient(120% 70% at 92% 0%, rgba(232,149,111,.38), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(200,161,90,.16), transparent 60%), var(--seto); color: var(--mantel); padding: 1rem 1rem 1.2rem; }
.escenario-cab h1 { font: 500 1.34rem/1.1 var(--display); letter-spacing: -.01em; }
.escenario-cab h1 em { font-style: italic; color: var(--champana-cl); }
.escenario-sub { margin: .15rem 0 .55rem; font-size: .8rem; color: rgba(251,248,242,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plano { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(200,161,90,.55); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); background: #3E6340; }
.plano svg { display: block; width: 100%; aspect-ratio: 1000 / 700; touch-action: none; user-select: none; -webkit-user-select: none; }
.plano::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 80% at 88% -10%, rgba(255,176,120,.32), transparent 55%), linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.25)); }
.plano-pie { background: linear-gradient(transparent, rgba(0,0,0,.45)); position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .7rem; font-size: .76rem; color: #FBF8F2; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.plano-pie .enlace { font-size: .76rem; color: #F0DCA6; padding: .45rem .2rem; margin: -.45rem 0; }
.plano.con-fuera .plano-pie span { color: #FFD3C4; font-weight: 600; }

.mesa { transition: transform .55s cubic-bezier(.2,.8,.2,1); cursor: grab; }
.mesa.arrastrando { transition: none; cursor: grabbing; }
.mesa-in { transform-box: fill-box; transform-origin: center; }
.mesa.nueva .mesa-in { animation: aparece .5s cubic-bezier(.3,1.5,.5,1) backwards; }
.mesa.cambia .mesa-in { animation: pulso .4s ease-out; }
.mesa.fuera .mesa-in { filter: drop-shadow(0 0 5px #FF6B4A) drop-shadow(0 0 2px #FF6B4A); }
@keyframes aparece { from { transform: scale(0); opacity: 0; } }
@keyframes pulso { 40% { transform: scale(1.12); } }
.arbol, .lounge, .calentador { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.muro { transition: x .5s, y .5s, width .5s, height .5s; }
.capa-pista { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.pista-in { animation: aparece .5s backwards; transform-box: fill-box; transform-origin: center; }
.loseta { animation: parpadeo 1.6s ease-in-out infinite alternate, enciende .5s ease-out backwards; }
.loseta:nth-child(3n) { animation-name: parpadeoRosa, enciende; }
@keyframes parpadeo { to { fill: #FFE3A0; } }
@keyframes parpadeoRosa { to { fill: #F7B9A3; } }
@keyframes enciende { from { opacity: 0; } }
.foco { animation: titila 2.4s ease-in-out infinite alternate; }
@keyframes titila { from { opacity: .45; } to { opacity: 1; } }
.capa-carpa, .capa-luces { pointer-events: none; }
.carpa-in { opacity: .26; transform-box: fill-box; transform-origin: center; }
.capa-carpa.desplegar .carpa-in { animation: despliega 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes despliega { 0% { transform: scale(.08, 0); opacity: .96; } 45% { transform: scale(1, 1); opacity: .96; } 70% { opacity: .9; } 100% { opacity: .26; } }
.rotulo { font: italic 600 20px var(--display); fill: #FBF8F2; }

.invitados { margin-top: .6rem; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "et num total" "rango rango rango" "dato dato dato"; align-items: end; gap: 0 .6rem; }
.invitados-et { grid-area: et; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--champana-cl); align-self: center; }
.invitados-num { grid-area: num; font: italic 600 2.4rem/1 var(--display); color: var(--champana-cl); font-variant-numeric: lining-nums; }
.invitados-total { grid-area: total; text-align: right; display: flex; flex-direction: column; line-height: 1.15; }
.invitados-total span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(251,248,242,.7); }
.invitados-total strong { font: 500 1.35rem/1.1 var(--mono); }
.invitados-total small { font-size: .78rem; color: rgba(251,248,242,.78); }
.invitados-dato { grid-area: dato; margin: .1rem 0 0; font-size: .84rem; color: rgba(251,248,242,.85); }
#rng-invitados { grid-area: rango; width: 100%; margin: .25rem 0 .1rem; -webkit-appearance: none; appearance: none; height: 2.4rem; background: transparent; --p: 20%; }
#rng-invitados::-webkit-slider-runnable-track { height: .55rem; border-radius: 999px; background: linear-gradient(90deg, var(--champana) var(--p), rgba(251,248,242,.22) var(--p)); }
#rng-invitados::-moz-range-track { height: .55rem; border-radius: 999px; background: rgba(251,248,242,.22); }
#rng-invitados::-moz-range-progress { height: .55rem; border-radius: 999px; background: var(--champana); }
#rng-invitados::-webkit-slider-thumb { -webkit-appearance: none; width: 2rem; height: 2rem; margin-top: -.73rem; border-radius: 50%; background: var(--mantel); border: 4px solid var(--champana); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
#rng-invitados::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--mantel); border: 4px solid var(--champana); }

.estilos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .6rem; }
.estilo { border: 1.5px solid rgba(200,161,90,.35); background: rgba(0,0,0,.18); border-radius: 12px; padding: 0 0 .35rem; color: var(--mantel); overflow: hidden; text-align: center; transition: border-color .15s, transform .15s; }
.estilo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; opacity: .72; transition: opacity .2s; }
.estilo span { display: block; font-size: .74rem; line-height: 1.15; padding: .3rem .2rem 0; }
.estilo.on { border-color: var(--champana); box-shadow: 0 0 0 2px var(--champana) inset; transform: translateY(-2px); }
.estilo.on img { opacity: 1; }
.estilo.on span { color: var(--champana-cl); font-weight: 600; }

/* ── Panel de controles ── */
.panel-col { padding: 1rem; display: grid; gap: 1rem; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 1rem; }
.tarjeta h2 { font: 600 1.32rem/1.15 var(--display); margin-bottom: .7rem; }
.campos { display: grid; gap: .7rem; }
.campo { display: grid; gap: .25rem; font-size: .86rem; }
.campo > span { color: var(--gris); }
.campo select, .campo input { border: 1px solid var(--linea); border-radius: 10px; padding: .6rem .7rem; background: var(--mantel); width: 100%; min-height: 2.75rem; }
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--lino); border-radius: 10px; padding: 3px; }
.segmentos button { min-height: 2.75rem; border: 0; background: transparent; border-radius: 8px; padding: .55rem .2rem; }
.segmentos button[aria-checked="true"] { background: var(--seto); color: var(--mantel); }
@media (min-width: 560px) { .campos { grid-template-columns: 1fr 1fr; } .campo-lugar { grid-column: 1 / -1; } }

.tarjeta-experto { background: linear-gradient(180deg, #FFFDF8, #FBF4E6); border-color: #E6D3AA; }
.experto-cab { display: grid; gap: .6rem; margin-bottom: .6rem; }
.experto-cab h2 { margin: 0; font-size: 1.2rem; }
.consejos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.consejo { display: grid; grid-template-columns: 1.6rem 1fr; gap: .25rem .55rem; align-items: start; padding: .6rem .7rem; border-radius: 10px; background: #fff; border: 1px solid var(--linea); }
.consejo p { margin: 0; font-size: .92rem; line-height: 1.4; }
.consejo .boton { grid-column: 2; justify-self: start; }
.consejo-ico { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--lino); color: var(--oro-tx); }
.consejo-ok .consejo-ico { background: #DDEFE5; color: #266C4E; }
.consejo-falta { border-color: #EBB9A8; background: #FFF6F2; }
.consejo-falta .consejo-ico { background: var(--alerta); color: #fff; }

.cats { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
.cats button { min-height: 2.6rem; border: 1px solid var(--linea); background: var(--mantel); border-radius: 999px; padding: .38rem .75rem; font-size: .86rem; display: inline-flex; gap: .35rem; align-items: center; }
.cats button[aria-selected="true"] { background: var(--seto); border-color: var(--seto); color: var(--mantel); }
.cats b { font: 500 .72rem var(--mono); background: var(--champana); color: var(--tinta); border-radius: 999px; min-width: 1.2rem; padding: 0 .3rem; }
.cats b:empty { display: none; }
.catalogo { display: grid; gap: .5rem; }
.art { display: grid; grid-template-columns: 4.5rem 1fr; grid-template-areas: "foto txt" "foto ctl"; gap: .2rem .7rem; padding: .55rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--mantel); align-items: center; }
.art > img, .art-ico { grid-area: foto; width: 4.5rem; height: 4.5rem; border-radius: 9px; object-fit: cover; background: #EFE8DC; align-self: start; }
.art-ico { display: grid; place-items: center; }
.art-ico svg { width: 2.6rem; }
.art-txt { grid-area: txt; min-width: 0; }
.art h3 { font: 600 .98rem/1.2 var(--cuerpo); }
.art-txt > p { margin: .1rem 0 0; font-size: .8rem; color: var(--gris); }
.art-precio { color: var(--tinta) !important; }
.art-libres { color: var(--ok); font-weight: 500; }
.art.sin-piezas { border-color: var(--alerta); background: #FFF6F2; }
.art.sin-piezas .art-libres { color: var(--alerta); }
.art.en-evento { border-color: var(--champana); box-shadow: 0 0 0 1px var(--champana) inset; }
.paso { grid-area: ctl; display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--linea); border-radius: 999px; background: #fff; }
.paso button { width: 2.5rem; height: 2.5rem; border: 0; background: transparent; font-size: 1.25rem; border-radius: 999px; }
.paso button:hover { background: var(--lino); }
.paso input { width: 3.6rem; border: 0; text-align: center; font: 500 1rem var(--mono); background: transparent; -moz-appearance: textfield; }
.paso input::-webkit-inner-spin-button { -webkit-appearance: none; }
.niveles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.niveles button { border: 1px solid var(--linea); background: #fff; border-radius: 8px; padding: .3rem .55rem; font-size: .8rem; }
.niveles button span { font-family: var(--mono); color: var(--gris); }
.niveles button[aria-pressed="true"] { background: var(--seto); color: var(--mantel); border-color: var(--seto); }
.niveles button[aria-pressed="true"] span { color: var(--champana-cl); }
.art-toggle { grid-area: ctl; justify-self: start; border: 1.5px solid var(--seto); background: transparent; border-radius: 999px; padding: .35rem .9rem; font-size: .86rem; color: var(--seto); }
.art-toggle::before { content: "Agregar"; }
.art-toggle[aria-pressed="true"] { background: var(--seto); color: var(--mantel); }
.art-toggle[aria-pressed="true"]::before { content: "Quitar"; }

.tarjeta-resumen h3 { font: 500 .76rem var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-tx); margin: .8rem 0 .3rem; }
.lineas { list-style: none; margin: 0; padding: 0; }
.lineas li { display: flex; justify-content: space-between; gap: .8rem; padding: .32rem 0; border-bottom: 1px dotted var(--linea); font-size: .9rem; }
.lineas small { display: block; color: var(--gris); font-family: var(--mono); font-size: .74rem; }
.lineas b { font: 500 .92rem var(--mono); white-space: nowrap; }
.totales { margin: .9rem 0; display: grid; gap: .25rem; }
.totales div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.totales dt { color: var(--gris); }
.totales dd { margin: 0; font-family: var(--mono); }
.totales .t-total { border-top: 2px solid var(--champana); padding-top: .5rem; margin-bottom: .2rem; }
.totales .t-total dt { color: var(--tinta); font: 600 1.1rem var(--display); }
.totales .t-total dd { font-size: 1.35rem; font-weight: 500; }

/* Guía */
.guia { position: relative; margin: .6rem 0 0; background: var(--mantel); color: var(--tinta); border: 2px solid var(--champana); border-radius: 12px; padding: .7rem .85rem; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); animation: guiaEntra .4s ease-out; }
.guia::before { content: ""; position: absolute; top: -9px; left: 2rem; width: 14px; height: 14px; background: var(--mantel); border-left: 2px solid var(--champana); border-top: 2px solid var(--champana); transform: rotate(45deg); }
.guia p { margin: .1rem 0 .2rem; font-size: .88rem; line-height: 1.35; }
.guia-paso { font: 500 .72rem var(--mono); color: var(--oro-tx); margin-right: .35rem; }
.guia .enlace { margin-left: .35rem; font-size: .8rem; color: var(--gris); padding: .5rem .2rem; margin-block: -.5rem; }
.guia { padding: .5rem .75rem; }
.tarjeta-resumen .guia { margin: 0 0 .8rem; }
.tarjeta-resumen .guia::before { top: auto; bottom: -9px; transform: rotate(225deg); }
@keyframes guiaEntra { from { opacity: 0; transform: translateY(6px); } }

/* Galería */
.galeria { padding: 2.2rem 0 1rem; }
.galeria-cab { padding: 0 1rem; max-width: 46rem; }
.galeria-cab h2 { font: 500 1.9rem/1.1 var(--display); }
.galeria-cab p:last-child { color: var(--gris); }
.galeria-tira { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem 1rem 1rem; }
.galeria-tira figure { margin: 0; scroll-snap-align: start; }
.galeria-tira img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; height: auto; }
.galeria-tira figcaption { font-size: .82rem; color: var(--gris); margin-top: .3rem; }
@media (min-width: 760px) { .galeria-tira { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } .galeria-tira figure:first-child { grid-column: span 2; grid-row: span 2; } .galeria-tira figure:first-child img { aspect-ratio: auto; height: calc(100% - 1.6rem); } }
@media (min-width: 1100px) { .galeria-tira { grid-template-columns: repeat(4, 1fr); } .galeria, .galeria-cab { max-width: 1320px; margin: 0 auto; } }

/* ── Vista del negocio ── */
.negocio-cab { position: relative; background: var(--seto); color: var(--mantel); }
.negocio-cab img { width: 100%; height: 11rem; object-fit: cover; opacity: .55; }
.negocio-cab-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; background: linear-gradient(0deg, rgba(20,40,31,.92), rgba(20,40,31,0)); }
.negocio-cab-txt .ceja { color: var(--champana-cl); }
.negocio-cab h1 { font: 500 1.6rem/1.1 var(--display); }
.negocio-cab h1 em { color: var(--champana-cl); }
.subtabs { position: sticky; top: var(--barra); z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--mantel); border-bottom: 1px solid var(--linea); }
.subtabs button { border: 0; background: transparent; padding: .8rem .2rem; font-size: .88rem; font-weight: 500; border-bottom: 3px solid transparent; color: var(--gris); }
.subtabs button[aria-selected="true"] { color: var(--seto); border-bottom-color: var(--champana); }
.sub { padding: 1rem; max-width: 1100px; margin: 0 auto; }
.chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: .14rem .5rem; border-radius: 999px; white-space: nowrap; color: #fff; }
.chip-cotizado, .p-cotizado { background: #66716A; }
.chip-apartado, .p-apartado { background: #9A600F; }
.chip-confirmado, .p-confirmado { background: #2E7D5B; }
.chip-entregado, .p-entregado { background: #3D6FB5; }
.chip-recogido, .p-recogido { background: #6E5F84; }

.cal-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.cal-cab h2 { font: 600 1.5rem var(--display); text-transform: capitalize; }
.cal-cab .icono { color: var(--seto); border-color: var(--linea); font-size: 1.4rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .76rem; color: var(--gris); margin-bottom: .6rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .3rem; }
.punto { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.sat-m { width: .9rem; height: .7rem; border-radius: 3px; display: inline-block; background: repeating-linear-gradient(135deg, #F2BFA9 0 3px, #FBE4D8 3px 6px); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: .72rem; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; padding: .2rem 0; }
.cal-dia { min-height: 3.6rem; border: 1px solid var(--linea); background: #fff; border-radius: 8px; padding: .2rem; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; position: relative; overflow: hidden; }
.cal-dia.pasado { opacity: .6; }
.cal-dia.hoy { border-color: var(--seto); box-shadow: 0 0 0 1px var(--seto) inset; }
.cal-dia.sel { outline: 3px solid var(--champana); outline-offset: -1px; }
.cal-dia.sat1 { background: #FCF0DB; }
.cal-dia.sat2 { background: repeating-linear-gradient(135deg, #F7CDBB 0 6px, #FCE6DB 6px 12px); border-color: #E2A58C; }
.cal-n { font: 500 .8rem var(--mono); }
.cal-ev { display: block; height: 6px; border-radius: 3px; font-size: 0; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-sat { position: absolute; top: .2rem; right: .25rem; font: 500 .6rem var(--mono); color: var(--alerta); }
@media (min-width: 760px) {
  .cal-dia { min-height: 6rem; padding: .35rem; }
  .cal-ev { height: auto; font-size: .7rem; line-height: 1.25; padding: .08rem .3rem; }
  .cal-sat { font-size: .68rem; }
}
.cal-lista { margin-top: 1.1rem; }
.cal-lista h3 { font: 600 1.15rem var(--display); margin-bottom: .4rem; }
.ev-card { border: 1px solid var(--linea); border-radius: 12px; background: #fff; margin-bottom: .5rem; overflow: hidden; }
.ev-card.sel { border-color: var(--champana); }
.ev-card.ev-mio { border-style: dashed; border-color: var(--champana); }
.ev-card-btn { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 3.6rem 1fr auto; grid-template-areas: "f n chip" "f n total"; gap: .1rem .6rem; padding: .7rem; text-align: left; align-items: center; }
.ev-fecha { grid-area: f; font: 500 .78rem/1.2 var(--mono); color: var(--oro-tx); text-transform: uppercase; }
.ev-nom { grid-area: n; min-width: 0; }
.ev-nom strong { display: block; font-weight: 600; }
.ev-nom small { display: block; color: var(--gris); font-size: .8rem; }
.ev-card-btn .chip { grid-area: chip; justify-self: end; }
.ev-total { grid-area: total; justify-self: end; font: 500 .84rem var(--mono); }
.ev-det { display: grid; gap: .8rem; padding: 0 .7rem .8rem; }
.ev-det img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.ev-folio { font: 500 .78rem var(--mono); color: var(--gris); margin: 0 0 .5rem; }
.estados { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.estados button { min-height: 2.6rem; border: 1px solid var(--linea); background: var(--mantel); border-radius: 999px; padding: .3rem .65rem; font-size: .8rem; color: var(--gris); }
.estados .hecho button { background: #E5EFE8; color: #276B4E; border-color: #BFD9C8; }
.estados .actual button { background: var(--seto); color: var(--mantel); border-color: var(--seto); font-weight: 600; }
.ev-cuentas { font-size: .84rem; color: var(--gris); margin: 0 0 .6rem; }
.ev-acc { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 760px) { .ev-det { grid-template-columns: 300px 1fr; } }

.ex-cab { display: grid; gap: .4rem; }
.ex-cab .campo { max-width: 16rem; }
.tira { margin: 1rem 0; }
.tira-tit { font-size: .82rem; color: var(--gris); margin: 0 0 .4rem; }
.tira-grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 4px; max-width: 26rem; }
.tira-d { aspect-ratio: 1; border: 0; border-radius: 4px; background: #ECE6D8; padding: 0; }
.tira-d.n1 { background: #D9E8DC; } .tira-d.n2 { background: #9CC3A8; } .tira-d.n3 { background: #E3A74E; } .tira-d.n4 { background: #C4543A; }
.tira-d.sel { outline: 3px solid var(--seto); outline-offset: 1px; }
.tira-d.pasado { opacity: .35; cursor: default; }
.tira-ley { display: flex; gap: .8rem; font-size: .72rem; color: var(--gris); margin-top: .3rem; max-width: 26rem; }
.tira-esc { margin-left: auto; display: inline-flex; gap: 3px; align-items: center; }
.tira-esc i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.tira-esc .n1 { background: #D9E8DC; } .tira-esc .n2 { background: #9CC3A8; } .tira-esc .n3 { background: #E3A74E; } .tira-esc .n4 { background: #C4543A; }
.medidores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.medidor { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: .7rem; display: grid; gap: .2rem; }
.medidor span { font-size: .78rem; color: var(--gris); }
.medidor strong { font: 500 1.05rem var(--mono); }
.medidor i { display: block; height: .45rem; border-radius: 999px; background: linear-gradient(90deg, var(--seto-3) var(--v), #ECE6D8 var(--v)); }
.medidor.alto strong { color: var(--alerta); }
.medidor.alto i { background: linear-gradient(90deg, var(--alerta) var(--v), #ECE6D8 var(--v)); }
.ex-evs { margin-top: .8rem; }
.ex-cat { font: 500 .76rem var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-tx); margin: 1.1rem 0 .4rem; }
.ex-tabla { display: grid; gap: .35rem; }
.ex-fila { display: grid; grid-template-columns: 1fr 7.5rem; grid-template-areas: "nom num" "barra barra"; gap: .2rem .6rem; font-size: .88rem; padding: .4rem .55rem; background: #fff; border-radius: 8px; border: 1px solid var(--linea); }
.ex-nom { grid-area: nom; }
.ex-num { grid-area: num; text-align: right; color: var(--gris); font-size: .82rem; }
.ex-num strong { font: 500 .95rem var(--mono); color: var(--tinta); }
.ex-barra { grid-area: barra; height: .4rem; background: #ECE6D8; border-radius: 999px; overflow: hidden; }
.ex-barra i { display: block; height: 100%; background: var(--seto-3); border-radius: 999px; }
.ex-fila.alto .ex-barra i { background: #D58A2E; }
.ex-fila.agotado { border-color: #EBB9A8; background: #FFF6F2; }
.ex-fila.agotado .ex-barra i { background: var(--alerta); }
.ex-fila.agotado .ex-num strong { color: var(--alerta); }
@media (min-width: 760px) { .ex-fila { grid-template-columns: 16rem 1fr 9rem; grid-template-areas: "nom barra num"; align-items: center; } }

.carga-cab { display: grid; gap: .5rem; }
.carga-modo { margin: 0; font-size: .9rem; }
.carga-escena { position: sticky; top: calc(var(--barra) + 2.9rem); z-index: 5; box-shadow: 0 10px 20px -16px rgba(0,0,0,.5); margin: .8rem 0 .4rem; background: linear-gradient(180deg, #F4E3CF 0%, #FBF8F2 70%); border: 1px solid var(--linea); border-radius: var(--r); padding: .8rem .6rem .6rem; overflow: hidden; }
.camion { width: 100%; max-width: 560px; max-height: 9.5rem; display: block; margin: 0 auto; overflow: visible; }
.camion-marca { font: 600 13px var(--cuerpo); letter-spacing: .22em; fill: var(--seto); opacity: .55; }
.caja-n { font: 700 15px var(--cuerpo); fill: #fff; }
.caja.entra { animation: cae .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes cae { from { transform: translate(-60px, -50px) scale(.4); opacity: 0; } }
.humo circle { fill: #9A8F80; opacity: 0; }
.carga-escena.arranca .camion-todo { animation: salir 2.4s cubic-bezier(.4,0,.7,.5) forwards; }
.carga-escena.arranca .rueda { animation: gira .45s linear infinite; }
.carga-escena.arranca .humo circle { animation: humo .9s ease-out infinite; }
.carga-escena.arranca .humo circle:nth-child(2) { animation-delay: .3s; }
.carga-escena.arranca .humo circle:nth-child(3) { animation-delay: .6s; }
.carga-escena.regresa .camion-todo { animation: llegar 1.1s cubic-bezier(.2,.8,.3,1); }
@keyframes salir { 0% { transform: translateX(0); } 6% { transform: translateX(-5px); } 100% { transform: translateX(560px); } }
@keyframes llegar { from { transform: translateX(-480px); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes humo { 0% { opacity: .85; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-30px, -14px) scale(1.6); } }
.carga-prog { text-align: center; font-weight: 600; margin: .3rem 0 .25rem; font-size: .92rem; }
.carga-barra { height: .5rem; background: #ECE6D8; border-radius: 999px; overflow: hidden; max-width: 560px; margin: 0 auto; }
.carga-barra i { display: block; height: 100%; background: var(--champana); transition: width .3s; }
.carga-lista { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .4rem; }
.carga-fila { border: 1px solid var(--linea); background: #fff; border-radius: 12px; padding: .5rem .6rem; }
.carga-fila label { display: grid; grid-template-columns: 1.6rem 3.25rem 1fr; gap: .6rem; align-items: center; cursor: pointer; }
.carga-fila input[type="checkbox"] { width: 1.75rem; height: 1.75rem; accent-color: var(--seto); }
.carga-fila img { width: 3.25rem; height: 3.25rem; border-radius: 8px; object-fit: cover; }
.carga-fila strong { display: block; font-weight: 600; font-size: .94rem; }
.carga-fila small { color: var(--gris); font-size: .8rem; }
.carga-fila.hecho { background: #F1F7F2; border-color: #BFD9C8; }
.carga-fila.con-falta { background: #FFF1EC; border-color: var(--alerta); }
.carga-fila.con-falta small { color: var(--alerta); font-weight: 600; }
.carga-faltas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .45rem 0 0 2.2rem; font-size: .82rem; color: var(--gris); }
.paso-mini button { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; }
.paso-mini output { min-width: 1.8rem; text-align: center; font-family: var(--mono); }
.carga-acc { margin-top: .4rem; }
.carga-resumen { margin-top: .6rem; padding: .8rem; border-radius: 12px; background: var(--lino); }
.carga-resumen p { margin: 0 0 .5rem; }

.pagos-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pagos-res div { background: var(--seto); color: var(--mantel); border-radius: 12px; padding: .7rem; display: grid; }
.pagos-res span { font-size: .74rem; color: rgba(251,248,242,.8); }
.pagos-res strong { font: 500 1rem var(--mono); }
.pagos-lista { display: grid; gap: .6rem; margin-top: .6rem; }
.pago { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: .7rem; }
.pago.sel { border-color: var(--champana); box-shadow: 0 0 0 1px var(--champana) inset; }
.pago header { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-bottom: .4rem; }
.pago header strong { flex: 1 1 10rem; }
.pago-total { font: 500 .9rem var(--mono); }
.pago ul { list-style: none; margin: 0; padding: 0; }
.pago li { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; padding: .35rem 0; border-top: 1px dotted var(--linea); font-size: .88rem; }
.pago li b { font: 500 .88rem var(--mono); }
.pago li em { font-style: normal; font-size: .8rem; color: var(--gris); }
.pago li em.ok { color: var(--ok); font-weight: 600; }
.pago li em.mal { color: var(--alerta); font-weight: 600; }
.pago li .boton-borde { margin-left: .3rem; }
@media (min-width: 760px) { .pagos-res strong { font-size: 1.3rem; } }

/* ── Llamado a InfoWeb y pie ── */
.cta-infoweb { background: var(--seto); color: var(--mantel); text-align: center; padding: 2.4rem 1rem; margin-top: 1.5rem; }
.cta-infoweb h2 { font: 500 1.6rem/1.15 var(--display); max-width: 30rem; margin: 0 auto .6rem; }
.cta-infoweb > p { max-width: 32rem; margin: 0 auto 1rem; color: rgba(251,248,242,.85); }
.cta-infoweb .boton { width: auto; }
.cta-tel { font-size: .9rem; }
.cta-tel a { color: var(--champana-cl); }
.pie { text-align: center; padding: 1.2rem 1rem 1.4rem; font-size: .85rem; color: var(--gris); }
.pie p { margin: 0 0 .35rem; }
.pie a { color: var(--seto); }
.pie .credito { margin-top: .6rem; color: #4E534D; }

/* ── Fijos (barra de total y botón de InfoWeb) ── */
.fijos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none; padding: 0 .6rem calc(.6rem + env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: .4rem; }
.fijos > * { pointer-events: auto; }
.pildora-infoweb { max-width: 17rem; font-size: .74rem; line-height: 1.25; text-decoration: none; color: var(--tinta); background: rgba(251,248,242,.96); border: 1px solid var(--champana); border-radius: 12px; padding: .4rem .65rem; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); }
.pildora-infoweb strong { color: var(--wa); }
.barra-total { justify-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: var(--tinta); color: var(--mantel); border-radius: 14px; padding: .55rem .6rem .55rem 1rem; box-shadow: 0 10px 28px -10px rgba(0,0,0,.6); }
.barra-total strong { font: 500 1.15rem var(--mono); display: block; line-height: 1.1; }
.barra-total small { font-size: .76rem; color: rgba(251,248,242,.75); }
body.vista-negocio .barra-total { display: none; }
.fijos { gap: 0; }
body.vista-negocio .fijos { gap: .4rem; }
body.vista-cliente .pildora-infoweb { justify-self: stretch; max-width: none; text-align: center; background: #343B36; color: #EFE8DC; border: 0; border-radius: 14px 14px 0 0; padding: .35rem .8rem .5rem; margin-bottom: -.2rem; box-shadow: none; font-size: .72rem; }
body.vista-cliente .pildora-infoweb strong { color: var(--champana-cl); }
body.vista-negocio { padding-bottom: 4rem; }

/* ── Cotización ── */
.cotizacion { width: min(46rem, calc(100% - 1.2rem)); max-height: 92vh; border: 0; border-radius: 16px; padding: 0; background: var(--mantel); color: var(--tinta); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.cotizacion::backdrop { background: rgba(14,24,19,.7); }
.cot-in { padding: 1.1rem; }
.cot-cab { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--champana); padding-bottom: .7rem; }
.cot-marca { font: italic 600 1.4rem/1.1 var(--display); margin: 0; }
.cot-sub { margin: .2rem 0 0; font-size: .78rem; color: var(--gris); }
.cot-folio { text-align: right; display: grid; }
.cot-folio span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--oro-tx); }
.cot-folio strong { font: 500 1.1rem var(--mono); }
.cot-folio small { font-size: .74rem; color: var(--gris); }
.cot-evento { display: grid; gap: .7rem; margin: .9rem 0; }
.cot-evento img { border-radius: 10px; aspect-ratio: 16 / 7; object-fit: cover; width: 100%; height: auto; }
.cot-evento dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; }
.cot-evento dt { font-size: .72rem; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.cot-evento dd { margin: 0; font-weight: 600; font-size: .92rem; }
.cot-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.cot-tabla th { text-align: left; font-weight: 500; color: var(--gris); border-bottom: 1px solid var(--linea); padding: .35rem .2rem; font-size: .76rem; }
.cot-tabla td { border-bottom: 1px dotted var(--linea); padding: .35rem .2rem; vertical-align: top; }
.cot-tabla td:nth-child(n+2), .cot-tabla th:nth-child(n+2) { text-align: right; font-family: var(--mono); white-space: nowrap; }
.cot-tabla td:nth-child(3), .cot-tabla th:nth-child(3) { display: none; }
@media (min-width: 560px) { .cot-tabla td:nth-child(3), .cot-tabla th:nth-child(3) { display: table-cell; } .cot-evento dl { grid-template-columns: repeat(3, 1fr); } }
.cot-totales { margin: .8rem 0 0; display: grid; gap: .25rem; }
.cot-totales div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.cot-totales dt { color: var(--gris); }
.cot-totales dd { margin: 0; font-family: var(--mono); }
.cot-totales .t-total { border-top: 2px solid var(--champana); padding-top: .4rem; }
.cot-totales .t-total dt { color: var(--tinta); font: 600 1.05rem var(--display); }
.cot-totales .t-total dd { font-size: 1.25rem; }
.cot-nota { font-size: .78rem; color: var(--gris); margin: .9rem 0 0; }
.cot-acc { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding: .7rem 1.1rem 1rem; background: linear-gradient(180deg, rgba(251,248,242,0), var(--mantel) 25%); }
.cot-acc .boton { width: 100%; }
@media (min-width: 560px) { .cot-acc { grid-template-columns: repeat(4, auto); justify-content: end; } }

/* ── Efectos ── */
.brindis { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(20,40,31,.82), rgba(20,40,31,0) 70%); }
.brindis svg { width: 13rem; overflow: visible; }
.brindis p { font: italic 600 1.6rem var(--display); color: var(--champana-cl); margin: .3rem 0 0; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.brindis.on { animation: brindisVer 2.6s ease both; }
.brindis .copa { transform-box: fill-box; transform-origin: 50% 100%; }
.brindis.on .copa-izq { animation: copaIzq 1s cubic-bezier(.3,1.3,.5,1) both; }
.brindis.on .copa-der { animation: copaDer 1s cubic-bezier(.3,1.3,.5,1) both; }
.brindis .chispas { opacity: 0; }
.brindis.on .chispas { animation: chispa .6s .5s ease-out both; }
@keyframes brindisVer { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes copaIzq { from { transform: translateX(-40px) rotate(-30deg); } 60% { transform: translateX(4px) rotate(8deg); } to { transform: rotate(5deg); } }
@keyframes copaDer { from { transform: translateX(40px) rotate(30deg); } 60% { transform: translateX(-4px) rotate(-8deg); } to { transform: rotate(-5deg); } }
@keyframes chispa { from { opacity: 0; transform: scale(.5); } 50% { opacity: 1; } to { opacity: 0; transform: scale(1.3); } }
.confeti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; display: none; }
.confeti.on { display: block; }
.aviso-flotante { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: 30rem; bottom: 8.6rem; z-index: 80; background: var(--tinta); color: var(--mantel); padding: .7rem 1rem; border-radius: 12px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; transform: translateY(8px); border-left: 4px solid var(--champana); }
.aviso-flotante.on { opacity: 1; transform: none; }
body.vista-negocio .aviso-flotante { bottom: 5.5rem; }
body.vista-negocio main { padding-bottom: 5.5rem; }
@media (max-width: 420px) { .marca-txt small { display: none; } .barra-in { padding: .4rem .8rem; gap: .35rem .6rem; } }

/* ── Escritorio ── */
@media (min-width: 1000px) {
  body { padding-bottom: 4.5rem; }
  body.vista-cliente .pildora-infoweb { justify-self: end; max-width: 17rem; text-align: left; border-radius: 12px; background: rgba(251,248,242,.96); color: var(--tinta); border: 1px solid var(--champana); padding: .4rem .65rem; margin: 0; box-shadow: 0 6px 16px -8px rgba(0,0,0,.4); font-size: .74rem; }
  body.vista-cliente .pildora-infoweb strong { color: var(--wa); }
  .plano svg { aspect-ratio: auto; height: clamp(300px, calc(100vh - var(--barra) - 430px), 640px); }
  .escenario-cab h1 { font-size: 1.9rem; }
  .escenario { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: 1440px; margin: 0 auto; align-items: start; }
  .escenario-col { position: sticky; top: var(--barra); max-height: calc(100vh - var(--barra)); overflow-y: auto; padding: 1.2rem 1.4rem; border-radius: 0 0 var(--r) 0; scrollbar-width: thin; }
  .escenario-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .escenario-cab h1 { font-size: 2rem; }
  .escenario-sub { text-align: right; max-width: 22rem; }
  .panel-col { padding: 1.2rem 1.4rem; }
  .invitados-num { font-size: 3.2rem; }
  .barra-total { display: none; }
  .aviso-flotante { bottom: 4.5rem; }
  .experto-cab { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 1000px) and (max-height: 860px) {
  .estilos img { aspect-ratio: 16 / 7; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Impresión de la cotización ── */
@media print {
  body.imprimiendo > *:not(.cotizacion) { display: none !important; }
  body.imprimiendo { padding: 0; background: #fff; }
  .cotizacion { position: static; box-shadow: none; max-height: none; width: 100%; }
  .cot-acc { display: none; }
}

/* Mientras el total del escenario está a la vista, la barra inferior solo deja la franja de InfoWeb */
.barra-total { transition: transform .25s, opacity .25s; }
body.total-visible .barra-total { display: none; }
body.total-visible.vista-cliente .pildora-infoweb { border-radius: 14px; margin-bottom: 0; }