/* Dulcinea: rotisería de barrio y salón de eventos en Tres Arroyos.
   Colores del logo (rojo, azul y dorado), papel crema y mantel cuadrillé. */
:root {
  --rojo: #b3202c;
  --rojo2: #8e1520;
  --azul: #1f3c88;
  --azul2: #172d66;
  --oro: #e3b23c;
  --crema: #fbf5ea;
  --crema2: #f3e8d4;
  --tinta: #2a211b;
  --gris: #6d6157;
  --linea: #e4d6bf;
  --verde: #1faa53;
  --r: 18px;
  --sombra: 0 14px 34px -16px rgba(60, 30, 10, 0.35);
  --sombra-sm: 0 6px 16px -8px rgba(60, 30, 10, 0.35);
  --titulo: "Fraunces", Georgia, serif;
  --texto: "DM Sans", system-ui, sans-serif;
  --mantel: repeating-linear-gradient(0deg, rgba(179, 32, 44, 0.5) 0 14px, transparent 14px 28px), repeating-linear-gradient(90deg, rgba(179, 32, 44, 0.5) 0 14px, transparent 14px 28px), #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.6 var(--texto); color: var(--tinta); background: var(--crema); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
.dl-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px;
  font: 700 16px/1 var(--texto); text-decoration: none; color: #fff; background: var(--rojo); border: 0; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(179, 32, 44, 0.7); transition: transform 0.15s, background 0.2s;
}
.dl-btn:hover { transform: translateY(-2px); background: var(--rojo2); }
.dl-btn:active { transform: translateY(1px); }
.dl-btn-azul { background: var(--azul); box-shadow: 0 8px 18px -8px rgba(31, 60, 136, 0.7); }
.dl-btn-azul:hover { background: var(--azul2); }
.dl-btn-blanco { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--linea); }
.dl-btn-blanco:hover { background: #fff; }
.dl-btn svg { width: 22px; height: 22px; }

/* Encabezado */
.dl-top { position: sticky; top: 0; z-index: 40; background: rgba(251, 245, 234, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.dl-top .dl-wrap { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.dl-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.dl-logo svg { width: 148px; height: auto; }
.dl-nav { display: none; gap: 26px; }
.dl-nav a { font-weight: 600; font-size: 15px; text-decoration: none; }
.dl-nav a:hover { color: var(--rojo); }
.dl-cartbtn { position: relative; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--rojo); border: 0; border-radius: 50%; }
.dl-cartbtn svg { width: 24px; height: 24px; }
.dl-count { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--oro); color: var(--tinta); font: 800 13px/24px var(--texto); text-align: center; }
@media (min-width: 900px) { .dl-nav { display: flex; } .dl-logo svg { width: 176px; } }

/* Portada */
.dl-hero { position: relative; padding: 26px 0 40px; }
.dl-hero-grid { display: grid; gap: 22px; align-items: center; }
.dl-sello { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; font: 700 12.5px/1.2 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); background: #fff; border: 1.5px solid var(--azul); border-radius: 999px; }
.dl-sello i { width: 7px; height: 7px; border-radius: 50%; background: var(--oro); }
.dl-hero h1 { margin: 0; font: 800 clamp(44px, 11.5vw, 86px)/0.98 var(--titulo); letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.dl-hero h1 em { display: block; font-style: italic; font-weight: 600; color: var(--rojo); }
.dl-lead { margin: 18px 0 22px; font-size: 18px; max-width: 36ch; color: #4a3d33; }
.dl-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-rating { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-weight: 600; font-size: 15px; text-decoration: none; }
.dl-rating b { color: var(--oro); letter-spacing: 2px; font-size: 18px; }
.dl-hero-foto { position: relative; }
.dl-hero-foto .dl-foto { position: relative; aspect-ratio: 4 / 3.2; border-radius: 28px 28px 28px 120px; overflow: hidden; box-shadow: var(--sombra); }
.dl-hero-foto .dl-foto img { width: 100%; height: 100%; object-fit: cover; }
.dl-hero-foto::before { content: ""; position: absolute; inset: auto -10px -14px auto; width: 46%; height: 46%; border-radius: 22px; background: var(--mantel); opacity: 0.9; z-index: -1; transform: rotate(4deg); }
.dl-abierto { position: absolute; left: -6px; bottom: 18px; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: #fff; border-radius: 16px; box-shadow: var(--sombra); font-size: 14px; }
.dl-abierto b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.dl-abierto b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gris); }
.dl-abierto.si b::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(31, 170, 83, 0.2); }
.dl-abierto span { color: var(--gris); }
.dl-cita { position: absolute; right: -4px; top: 16px; max-width: 210px; padding: 12px 14px; background: var(--azul); color: #fff; border-radius: 16px 16px 4px 16px; box-shadow: var(--sombra); font: italic 600 17px/1.25 var(--titulo); }
.dl-cita small { display: block; margin-top: 4px; font: 500 11.5px/1.2 var(--texto); font-style: normal; color: #c9d3f0; }
@media (min-width: 900px) {
  .dl-hero { padding: 46px 0 64px; }
  .dl-hero-grid { grid-template-columns: 1fr 1.05fr; gap: 50px; }
  .dl-abierto { left: -28px; }
  .dl-cita { right: -20px; }
}

/* Cinta */
.dl-ticker { overflow: hidden; background: var(--azul); color: #fff; }
.dl-ticker-in { display: flex; width: max-content; animation: dl-tick 36s linear infinite; }
.dl-ticker span { padding: 13px 16px; font: 600 italic 20px/1 var(--titulo); white-space: nowrap; }
.dl-ticker span.p { color: var(--oro); font-style: normal; }
@keyframes dl-tick { to { transform: translateX(-50%); } }

/* Secciones */
.dl-sec { padding: 70px 0; }
.dl-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 13px/1.3 var(--texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rojo); }
.dl-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.dl-h2 { margin: 0 0 12px; font: 800 clamp(36px, 8vw, 60px)/1 var(--titulo); letter-spacing: -0.02em; }
.dl-h2 em { font-style: italic; font-weight: 600; color: var(--rojo); }
.dl-sub { margin: 0 0 26px; max-width: 60ch; font-size: 17px; color: #4a3d33; }

/* Carta */
.dl-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; font-size: 14.5px; background: #fff7dd; border: 1.5px dashed var(--oro); border-radius: 12px; }
.dl-tabs { position: sticky; top: 66px; z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; margin: 0 -16px 20px; background: rgba(251, 245, 234, 0.96); border-bottom: 1px solid var(--linea); scrollbar-width: none; }
.dl-tabs::-webkit-scrollbar { display: none; }
.dl-tabs a { flex: none; padding: 8px 15px; font-weight: 700; font-size: 14.5px; text-decoration: none; background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; }
.dl-tabs a.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.dl-cat { scroll-margin-top: 140px; margin-bottom: 44px; }
.dl-cat-title { margin: 0 0 14px; font: 800 32px/1.05 var(--titulo); }
.dl-cat-title small { display: block; margin-top: 4px; font: 500 14.5px/1.3 var(--texto); color: var(--gris); }
.dl-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-bottom: 14px; }
.dl-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--r); box-shadow: var(--sombra-sm); overflow: hidden; }
.dl-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.dl-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.dl-card:hover .dl-card-img img { transform: scale(1.05); }
.dl-tag { position: absolute; top: 12px; left: 12px; padding: 5px 11px; font: 700 12.5px/1.2 var(--texto); color: var(--tinta); background: var(--oro); border-radius: 999px; }
.dl-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.dl-card h3, .dl-row h3 { margin: 0; font: 700 19px/1.2 var(--titulo); }
.dl-desc { margin: 0; font-size: 14.5px; line-height: 1.45; color: #5c4f45; }
.dl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.dl-price { font: 800 24px/1 var(--titulo); color: var(--azul); }
.dl-add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; font: 700 15px/1 var(--texto); background: var(--rojo); color: #fff; border: 0; border-radius: 999px; transition: transform 0.1s, background 0.2s; }
.dl-add:active { transform: scale(0.95); }
.dl-add.done { background: var(--verde); }
.dl-add i { font-style: normal; font-size: 20px; line-height: 1; }
.dl-add-sm { width: 44px; justify-content: center; padding: 0; }
.dl-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-vars button { display: inline-flex; flex-direction: column; align-items: center; min-height: 42px; padding: 5px 11px; font: 600 13px/1.15 var(--texto); background: var(--crema); border: 1.5px solid var(--linea); border-radius: 10px; }
.dl-vars button small { font-weight: 500; font-size: 11.5px; color: var(--gris); }
.dl-vars button[aria-checked="true"] { background: #fff; border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.dl-rows { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.dl-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 12px; padding: 14px 16px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-sm); }
.dl-row .dl-vars { grid-column: 1 / -1; }
.dl-row .dl-price { font-size: 21px; }
.dl-nota-carta { margin: 6px 0 0; font-size: 13.5px; color: var(--gris); }

/* Tarta 3D */
.dl-girala { position: relative; overflow: hidden; color: #fff; background: var(--rojo); background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.5px, transparent 1.6px); background-size: 18px 18px; }
.dl-girala .dl-eyebrow { color: var(--oro); }
.dl-girala .dl-h2 em { color: var(--oro); }
.dl-girala .dl-sub { color: #f6dfe1; }
.dl-girala-grid { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .dl-girala-grid { grid-template-columns: 0.9fr 1.1fr; } }
.dl-girala .dl-btn { background: #fff; color: var(--rojo); }
.dl-gustos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.dl-gustos li { padding: 6px 12px; font-weight: 600; font-size: 14px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 999px; }
.dl-tt-stage { position: relative; height: min(92vw, 470px); display: grid; place-items: center; perspective: 1100px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.dl-tt-stage:active { cursor: grabbing; }
.dl-tt-plato { position: absolute; width: min(86vw, 440px); aspect-ratio: 1; border-radius: 50%; background: var(--mantel); opacity: 0.18; transform: rotateX(58deg); }
.dl-tt { position: relative; width: min(70vw, 360px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(0deg); will-change: transform; }
.dl-tt > i { position: absolute; inset: 0; border-radius: 50%; background: #c98b45; }
.dl-tt > i:nth-child(odd) { background: #b97a37; }
.dl-tt .dl-tt-top { position: absolute; inset: 0; border-radius: 50%; background: url(/assets/img/tarta-top.webp) center / cover; transform: translateZ(22px); }
.dl-tt .dl-tt-base { background: #8a5a26; transform: translateZ(-2px); box-shadow: 0 0 70px rgba(227, 178, 60, 0.35); }
.dl-tt-sombra { position: absolute; bottom: 12%; width: 58%; height: 30px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.45), transparent 70%); filter: blur(5px); }
.dl-tt-hint { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 14px; font-weight: 700; font-size: 14px; color: var(--rojo); background: #fff; border-radius: 999px; white-space: nowrap; transition: opacity 0.4s; }

/* Eventos */
.dl-eventos { background: var(--azul); color: #fff; }
.dl-eventos .dl-eyebrow { color: var(--oro); }
.dl-eventos .dl-h2 em { color: var(--oro); }
.dl-eventos .dl-sub { color: #d5ddf3; }
.dl-ev-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .dl-ev-grid { grid-template-columns: 1.05fr 0.95fr; gap: 44px; } }
.dl-ev-foto { position: relative; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); }
.dl-ev-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dl-ev-foto figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--tinta); background: rgba(255, 255, 255, 0.92); border-radius: 999px; }
.dl-ev-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; padding: 0; list-style: none; }
.dl-ev-tipos li { padding: 7px 13px; font-weight: 600; font-size: 14.5px; background: rgba(255, 255, 255, 0.1); border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 999px; }
.dl-ev-lista { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 10px; }
.dl-ev-lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.dl-ev-lista li::before { content: "✦"; color: var(--oro); }
.dl-ev-form { padding: 22px 20px; color: var(--tinta); background: #fff; border-radius: 22px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6); }
.dl-ev-form h3 { margin: 0 0 4px; font: 800 26px/1.1 var(--titulo); }
.dl-ev-form > p { margin: 0 0 16px; font-size: 14.5px; color: var(--gris); }
.dl-ev-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Opiniones */
.dl-opi { background: var(--crema2); }
.dl-opi-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.dl-nota { display: flex; align-items: center; gap: 14px; }
.dl-nota b { font: 800 64px/1 var(--titulo); color: var(--azul); }
.dl-nota span { font-size: 14.5px; color: var(--gris); }
.dl-nota span i { display: block; font-style: normal; color: var(--oro); font-size: 20px; letter-spacing: 3px; }
.dl-dichos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dl-dicho { position: relative; margin: 0; padding: 22px 20px 18px; background: #fff; border-radius: var(--r); box-shadow: var(--sombra-sm); }
.dl-dicho::before { content: "“"; position: absolute; top: -8px; left: 14px; font: 800 70px/1 var(--titulo); color: var(--rojo); opacity: 0.25; }
.dl-dicho p { margin: 0; font: italic 600 19px/1.3 var(--titulo); }
.dl-dicho cite { display: block; margin-top: 10px; font: 500 13px/1.2 var(--texto); font-style: normal; color: var(--gris); }
.dl-more { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--azul); }

/* Cómo pedir */
.dl-pasos { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .dl-pasos { grid-template-columns: repeat(3, 1fr); } }
.dl-pasos li { position: relative; padding: 26px 20px 22px; background: #fff; border-radius: var(--r); box-shadow: var(--sombra-sm); }
.dl-pasos b { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; font: 800 22px/1 var(--titulo); color: #fff; background: var(--rojo); border-radius: 50%; }
.dl-pasos li:nth-child(2) b { background: var(--azul); }
.dl-pasos li:nth-child(3) b { background: var(--oro); color: var(--tinta); }
.dl-pasos h3 { margin: 0 0 6px; font: 700 22px/1.15 var(--titulo); }
.dl-pasos p { margin: 0; font-size: 15px; color: #5c4f45; }

/* Dónde estamos */
.dl-info { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 54px; }
.dl-chip { padding: 18px 20px; background: #fff; border-radius: var(--r); box-shadow: var(--sombra-sm); }
.dl-chip > span { display: block; margin-bottom: 8px; font: 700 12.5px/1 var(--texto); letter-spacing: 0.1em; text-transform: uppercase; color: var(--rojo); }
.dl-chip p { margin: 0; font-size: 15.5px; }
.dl-chip small { color: var(--gris); }
.dl-horas { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dl-horas td { padding: 3px 0; vertical-align: top; }
.dl-horas td:last-child { text-align: right; font-weight: 700; }
.dl-horas tr.hoy td { color: var(--rojo); }
.dl-horas tr.cerrado td:last-child { color: var(--gris); font-weight: 500; }
.dl-mapa { display: block; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.dl-mapa iframe { display: block; width: 100%; height: 180px; border: 0; }
.dl-faq { display: grid; gap: 10px; }
.dl-faq details { background: #fff; border-radius: 14px; box-shadow: var(--sombra-sm); }
.dl-faq summary { padding: 16px 48px 16px 18px; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.dl-faq summary::-webkit-details-marker { display: none; }
.dl-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 26px/1 var(--titulo); color: var(--rojo); }
.dl-faq details[open] summary::after { content: "–"; }
.dl-faq details p { margin: 0; padding: 0 18px 18px; color: #4a3d33; }

/* Final */
.dl-end { position: relative; padding: 76px 0 84px; text-align: center; background: var(--mantel); }
.dl-end .dl-wrap { position: relative; max-width: 620px; padding: 34px 22px; background: var(--crema); border-radius: 26px; box-shadow: var(--sombra); }
.dl-end h2 { margin: 0 0 10px; font: 800 clamp(36px, 9vw, 56px)/1 var(--titulo); }
.dl-end h2 em { font-style: italic; color: var(--rojo); }
.dl-end p { margin: 0 auto 22px; max-width: 40ch; font-size: 17px; color: #4a3d33; }
.dl-end .dl-ctas { justify-content: center; }
.dl-foot { padding: 26px 16px 100px; text-align: center; font-size: 14px; background: var(--azul2); color: #d5ddf3; }
.dl-foot a { color: #fff; }

/* Barra del pedido y panel */
.dl-bar { position: fixed; z-index: 45; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(520px, calc(100% - 28px)); min-height: 58px; padding: 8px 10px 8px 14px; background: var(--azul); color: #fff; border: 0; border-radius: 18px; box-shadow: 0 14px 30px -10px rgba(23, 45, 102, 0.7); }
.dl-bar[hidden] { display: none; }
.dl-bar-n { min-width: 30px; height: 30px; display: grid; place-items: center; font-weight: 800; color: var(--tinta); background: var(--oro); border-radius: 50%; }
.dl-bar-t { margin-right: auto; font-weight: 700; font-size: 16px; }
.dl-bar-total { padding: 9px 13px; font: 800 18px/1 var(--titulo); color: var(--azul); background: #fff; border-radius: 12px; }
.dl-drawer { position: fixed; inset: 0; z-index: 60; }
.dl-drawer[hidden] { display: none; }
.dl-drawer-bg { position: absolute; inset: 0; background: rgba(42, 33, 27, 0.55); }
.dl-panel-ped { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--crema); }
.dl-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: #fff; background: var(--rojo); }
.dl-panel-head h2 { margin: 0; font: 800 26px/1 var(--titulo); }
.dl-x { width: 44px; height: 44px; font-size: 18px; color: var(--rojo); background: #fff; border: 0; border-radius: 50%; }
.dl-panel-body { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.dl-items { display: grid; gap: 10px; margin-bottom: 14px; }
.dl-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 8px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-sm); }
.dl-item img, .dl-noimg { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.dl-noimg { display: grid; place-items: center; font-size: 26px; background: var(--crema2); }
.dl-item h4 { margin: 0; font-size: 14.5px; line-height: 1.25; }
.dl-item small { display: block; color: var(--gris); }
.dl-item b { font-size: 15px; }
.dl-qty { display: flex; align-items: center; gap: 4px; }
.dl-qty button { width: 34px; height: 34px; font-size: 18px; font-weight: 800; color: var(--azul); background: var(--crema); border: 1.5px solid var(--linea); border-radius: 10px; }
.dl-qty span { min-width: 22px; text-align: center; font-weight: 800; }
.dl-empty { margin: 20px 0; text-align: center; font-weight: 600; }
.dl-drawer.dl-has .dl-empty { display: none; }
.dl-drawer:not(.dl-has) .dl-form { display: none; }
.dl-sum { padding: 12px 14px; margin-bottom: 14px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-sm); }
.dl-sum div { display: flex; justify-content: space-between; padding: 2px 0; }
.dl-sum-total { margin-top: 6px; padding-top: 8px !important; border-top: 1.5px dashed var(--linea); font-size: 17px; }
.dl-sum-total b { font: 800 22px/1 var(--titulo); color: var(--azul); }
.dl-field { display: block; margin-bottom: 12px; }
.dl-field span { display: block; margin-bottom: 4px; font-weight: 700; font-size: 14px; }
.dl-field input, .dl-field textarea, .dl-field select { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--tinta); background: #fff; border: 1.5px solid var(--linea); border-radius: 12px; }
.dl-field input:focus, .dl-field textarea:focus, .dl-field select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(31, 60, 136, 0.15); }
.dl-field.err input, .dl-field.err select { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(179, 32, 44, 0.18); }
.dl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.dl-seg legend { margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.dl-seg label { position: relative; }
.dl-seg input { position: absolute; opacity: 0; }
.dl-seg span { display: grid; place-items: center; min-height: 48px; padding: 6px; text-align: center; font-weight: 700; font-size: 14.5px; background: #fff; border: 1.5px solid var(--linea); border-radius: 12px; }
.dl-seg input:checked + span { color: var(--azul); border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: #eef2fb; }
.dl-seg input:focus-visible + span { outline: 3px solid var(--oro); }
.dl-note { margin: 0 0 12px; font-size: 13.5px; color: var(--gris); }
.dl-center { text-align: center; }
.dl-send { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin-top: 4px; font: 700 17px/1 var(--texto); color: #fff; background: var(--verde); border: 0; border-radius: 14px; box-shadow: 0 10px 20px -10px rgba(31, 170, 83, 0.8); }
.dl-send svg { width: 24px; height: 24px; }
.dl-toast { position: fixed; z-index: 70; left: 50%; top: 82px; transform: translate(-50%, -20px); padding: 10px 18px; font-weight: 700; color: #fff; background: var(--tinta); border-radius: 999px; box-shadow: var(--sombra); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.dl-toast.on { opacity: 1; transform: translate(-50%, 0); }
.dl-wa { position: fixed; z-index: 44; right: 16px; bottom: 16px; width: 60px; height: 60px; display: grid; place-items: center; color: #fff; background: var(--verde); border-radius: 50%; box-shadow: 0 10px 24px -8px rgba(31, 170, 83, 0.8); transition: transform 0.2s, opacity 0.2s; }
.dl-wa svg { width: 32px; height: 32px; }
.dl-wa.off { opacity: 0; transform: scale(0.6); pointer-events: none; }
.dl-crumb { position: fixed; z-index: 80; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; }
.dl-bump { animation: dl-bump 0.4s; }
@keyframes dl-bump { 40% { transform: scale(1.35); } }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dl-ticker-in { animation: none; } * { transition: none !important; } }
.dl-demo { margin-top: 10px; padding: 8px 10px; text-align: center; background: #fff7dd; border: 1.5px dashed var(--oro); border-radius: 10px; color: var(--tinta); }