/* Carta digital · estilos compartidos (carta y panel) */
:root{
  --tinta:#1f1b16; --tinta-2:#3a332b; --gris:#6f655a; --linea:#e4d8c4;
  --papel:#f6efe3; --papel-2:#efe4d1; --crema:#fffaf2;
  --aji:#c2410c; --aji-2:#9a330a; --aji-suave:#fbe3d6; --limon:#4d7c0f; --limon-suave:#e7f2d5;
  --sombra:0 1px 2px rgba(31,27,22,.06),0 8px 24px -12px rgba(31,27,22,.25);
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --seguro-abajo:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.5 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;margin:0;line-height:1.08;letter-spacing:-.3px;text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
button,a,label,.chip{touch-action:manipulation}
button,.chip,.boton{-webkit-user-select:none;user-select:none}
input,select,textarea{font:inherit;font-size:16px;color:var(--tinta)}
.envoltura{max-width:720px;margin:0 auto;padding:0 16px}

/* botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:13px 18px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:transform 160ms var(--ease-out),background-color 160ms ease,box-shadow 200ms ease,opacity 160ms ease}
.boton:active{transform:scale(.97)}
.boton svg{width:20px;height:20px;flex:none}
.boton.primario{background:var(--aji);color:#fff}
.boton.oscuro{background:var(--tinta);color:var(--crema)}
.boton.claro{background:var(--crema);color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.boton.whatsapp{background:#1f8f4e;color:#fff}
.boton[disabled]{opacity:.45;pointer-events:none}
.boton.ancho{width:100%}

/* campos */
.campo{margin-bottom:14px}
.campo>label,.etiqueta-campo{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:12px 13px;border:1.5px solid var(--linea);border-radius:10px;background:var(--crema);transition:border-color 160ms ease,box-shadow 160ms ease}
.campo textarea{min-height:76px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--tinta-2);box-shadow:0 0 0 3px rgba(31,27,22,.08)}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* selector segmentado */
.segmentos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--papel-2);border-radius:12px;padding:4px;gap:4px}
.segmentos label{position:relative;cursor:pointer}
.segmentos input{position:absolute;opacity:0;pointer-events:none}
.segmentos span{display:block;text-align:center;padding:9px 6px;border-radius:9px;font-weight:700;font-size:14px;color:var(--gris);transition:background-color 200ms ease,color 200ms ease,box-shadow 200ms ease}
.segmentos input:checked+span{background:var(--crema);color:var(--tinta);box-shadow:0 1px 3px rgba(31,27,22,.12)}
.segmentos input:focus-visible+span{outline:2px solid var(--aji);outline-offset:1px}

/* hoja inferior (bottom sheet) */
dialog.hoja{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:640px;max-height:min(92dvh,900px);padding:0;border:0;border-radius:22px 22px 0 0;
  background:var(--crema);color:var(--tinta);box-shadow:0 -10px 40px rgba(0,0,0,.18);overflow:hidden;display:flex;flex-direction:column}
dialog.hoja:not([open]){display:none}
dialog.hoja::backdrop{background:rgba(20,16,12,.45);opacity:0;transition:opacity 260ms ease}
dialog.hoja.abierta::backdrop{opacity:1}
dialog.hoja{transform:translateY(100%);transition:transform 320ms var(--ease-drawer)}
dialog.hoja.abierta{transform:none}
.hoja .agarre{flex:none;padding:10px 0 4px;display:grid;place-items:center;cursor:grab;touch-action:none}
.hoja .agarre i{width:40px;height:5px;border-radius:9px;background:var(--linea)}
.hoja .cabeza{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 18px 12px}
.hoja .cabeza h2{font-size:24px}
.hoja .cuerpo{flex:1;overflow:auto;overscroll-behavior:contain;padding:4px 18px 18px}
.hoja .pie{flex:none;padding:12px 18px calc(14px + var(--seguro-abajo));border-top:1px solid var(--linea);background:var(--crema)}
.cerrar{width:38px;height:38px;border-radius:50%;border:0;background:var(--papel-2);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out)}
.cerrar:active{transform:scale(.92)}
.cerrar svg{width:18px;height:18px;stroke:var(--tinta);stroke-width:2.2;fill:none;stroke-linecap:round}

/* aviso flotante (toast) */
.aviso{position:fixed;left:50%;bottom:calc(24px + var(--seguro-abajo));z-index:90;background:var(--tinta);color:var(--crema);padding:11px 16px;border-radius:12px;font-weight:600;font-size:14.5px;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:transform 260ms var(--ease-out),opacity 200ms ease;max-width:calc(100vw - 32px)}
.aviso.ver{transform:translate(-50%,0);opacity:1}

@media (hover:hover) and (pointer:fine){
  .boton.primario:hover{background:var(--aji-2)}
  .boton.oscuro:hover{background:var(--tinta-2)}
  .boton.claro:hover{box-shadow:inset 0 0 0 1.5px var(--tinta-2)}
  .boton.whatsapp:hover{background:#18763f}
  .cerrar:hover{background:var(--linea)}
}
@media (prefers-reduced-motion:reduce){
  dialog.hoja{transition:none}
  .boton:active,.cerrar:active{transform:none}
  .aviso{transition:opacity 200ms ease;transform:translate(-50%,0)}
}