/* Delivery Exaltación - Estilos globales */

:root{
	--bg: #ffffff;
	--text: #111827;
	--muted: #6b7280;
	--border: #e5e7eb;
	--soft: #f9fafb;
	--accent: #ED1552;
	--accentHover: #d61348;
	--radius: 8px;
	--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	background:var(--bg);
	color:var(--text);
	line-height:1.6;
	-webkit-font-smoothing: antialiased;
}
a{color:inherit; transition: color 0.2s}
.container{width:100%; max-width:960px; margin:0 auto; padding:0 20px}
.skip{
	position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
	left:20px; top:20px; width:auto; height:auto; padding:12px 16px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); z-index:50;
}

/* Header */
header{position:sticky; top:0; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); z-index:40}
.nav{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:16px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; color:var(--text)}
.brand img{width:32px; height:32px; object-fit:contain}
.brand strong{font-size:16px; letter-spacing:-0.02em}
.navActions{display:flex; align-items:center; gap:12px}
.badge{
	font-size:13px; color:var(--muted); border:1px solid var(--border);
	background:var(--soft); padding:4px 12px; border-radius:999px;
	white-space:nowrap; font-weight:500;
	display:none;
}
@media (min-width: 640px){
	.badge{display:inline-flex}
}

/* Buttons */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	gap:8px;
	border-radius:var(--radius);
	padding:10px 20px;
	text-decoration:none;
	font-weight:600;
	font-size:15px;
	border:1px solid transparent;
	transition: all 0.2s ease;
	cursor: pointer;
}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accentHover); border-color:var(--accentHover)}
.btn-secondary{background:#fff; border-color:var(--border); color:var(--text)}
.btn-secondary:hover{background:var(--soft); border-color:#d1d5db}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Layout */
.section{padding:60px 0}
.section--tight{padding:40px 0}
.kicker{color:var(--accent); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 10px}
h1{font-size:32px; line-height:1.1; margin:0 0 14px; letter-spacing:-0.03em; font-weight:800; color:var(--text)}
h2{font-size:24px; line-height:1.2; margin:0 0 12px; letter-spacing:-0.02em; font-weight:700; color:var(--text)}
.lead{color:var(--muted); margin:0 0 20px; font-size:17px; line-height:1.5}
.grid{display:grid; gap:24px}
.card{
	border:1px solid var(--border);
	border-radius:var(--radius);
	background:#fff;
	padding:24px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.card--soft{background:var(--soft); border-color:transparent}
.card h3{margin:0 0 8px; font-size:18px; font-weight:600; color:var(--text)}
.card p{margin:0; color:var(--muted); font-size:15px; line-height:1.6}
.list{margin:0; padding-left:20px; color:var(--muted)}
.list li{margin:8px 0; padding-left:4px}
.hr{border:0; border-top:1px solid var(--border); margin:0}

/* Hero */
.hero{padding:40px 0 30px}
.heroWrap{display:grid; gap:24px}
.heroAside{
	display:flex; gap:10px; overflow-x:auto; padding:12px;
	background:#fff; border:1px solid var(--border); border-radius:var(--radius);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.heroAside img{
	height:280px; width:auto; border-radius:6px;
	box-shadow:0 4px 12px rgba(0,0,0,0.1); flex-shrink:0;
}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap}

/* Pricing */
.price{
	display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
	margin:8px 0 16px;
}
.price .value{font-size:42px; font-weight:800; letter-spacing:-0.03em; color:var(--text)}
.price .per{color:var(--muted); font-weight:500; font-size:16px}
.note{color:var(--muted); font-size:14px; margin:0}
.tag{
	display:inline-flex; align-items:center;
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
	padding:4px 10px;
	border-radius:999px;
	background:rgba(237, 21, 82, 0.1);
	color:var(--accent);
}

/* Form */
form{display:grid; gap:20px}
.field{display:grid; gap:8px}
label{font-weight:600; font-size:14px; color:var(--text)}
input{
	width:100%;
	padding:12px 16px;
	border:1px solid var(--border);
	border-radius:var(--radius);
	font-size:16px;
	background:#fff;
	transition: border-color 0.2s, box-shadow 0.2s;
	color:var(--text);
}
input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(237, 21, 82, 0.15)}
.help{color:var(--muted); font-size:13px; margin:0}
.errorText{color:#dc2626; font-size:13px; margin:0; font-weight:500}
input.invalid{border-color:#dc2626; background:#fef2f2}
input.invalid:focus{box-shadow:0 0 0 3px rgba(220, 38, 38, 0.15)}

.alert{
	border-radius:var(--radius);
	padding:16px;
	border:1px solid transparent;
	margin-bottom:24px;
}
.alert--ok{border-color:#bbf7d0; background:#f0fdf4; color:#166534}
.alert--err{border-color:#fecaca; background:#fef2f2; color:#991b1b}
.alert p{margin:0; font-weight:600; font-size:15px}

/* Footer */
footer{padding:40px 0; color:var(--muted); font-size:13px; border-top:1px solid var(--border)}

/* Desktop */
@media (min-width: 860px){
	.section{padding:80px 0}
	.hero{padding:60px 0 40px}
	h1{font-size:52px}
	h2{font-size:28px}
	.kicker{font-size:13px}
	.lead{font-size:19px}
	.heroWrap{grid-template-columns: 1fr 1fr; align-items:center; gap:40px}
	.heroAside{padding:16px; gap:12px}
	.heroAside img{height:340px}
	.desktop-only{display:block !important}
	.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
	.grid.cols-2{grid-template-columns: repeat(2, 1fr)}
}