:root{
  --bg:#173f27;
  --bg2:#0e2e1b;
  --paper:#f6efe6;
  --ink:#24150d;
  --muted:#8a7568;
  --accent:#d5a126;
  --accent2:#b51f18;
  --text:#fff8e7;
  --soft:#e2d3b2;
  --card:#245235;
  --line:rgba(255,255,255,.11);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-width:0;min-height:100svh;color:var(--text);
  font-family:"DM Sans",system-ui,sans-serif;
  background:
    radial-gradient(circle at 78% 23%,rgba(213,161,38,.18),transparent 28%),
    linear-gradient(145deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,var(--bg2)) 56%,var(--bg2) 100%);
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.ambient{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.23}
.ambient-a{width:280px;height:280px;background:var(--accent);right:-120px;top:14%}
.ambient-b{width:230px;height:230px;background:var(--accent2);left:-110px;bottom:6%}

/* Mobile first: una sola columna siempre en teléfonos/tablets táctiles. */
.shell{
  width:100%;max-width:1380px;margin:0 auto;padding:0 clamp(16px,5vw,64px);
  display:grid;grid-template-rows:auto 1fr auto;min-width:0;
}
.top{
  min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);position:relative;z-index:3;min-width:0;
}
.wordmark{min-width:0;font-size:clamp(9px,2.8vw,12px);font-weight:800;letter-spacing:.14em;display:flex;align-items:center;gap:9px}
.wordmark span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ember{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--accent);box-shadow:0 0 22px rgba(213,161,38,.72)}
.mini-menu{flex:0 0 auto;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.04);backdrop-filter:blur(12px)}

.hero{
  width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);
  gap:24px;align-items:center;padding:24px 0 34px;
}
.hero-copy{position:relative;z-index:2;min-width:0;width:100%}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;color:color-mix(in srgb,var(--accent) 70%,white);margin:0 0 14px}
h1{font-family:"Playfair Display",serif;font-size:clamp(42px,13vw,72px);line-height:.91;letter-spacing:-.05em;margin:0;max-width:12ch;overflow-wrap:anywhere}
h1 em{font-style:italic;color:color-mix(in srgb,var(--accent) 48%,white);font-weight:600}
.lead{font-size:clamp(15px,4.2vw,18px);line-height:1.6;color:color-mix(in srgb,var(--text) 68%,transparent);max-width:590px;margin:20px 0 20px}

.address-card{
  display:flex;align-items:center;gap:13px;width:100%;max-width:560px;min-width:0;
  background:color-mix(in srgb,var(--card) 76%,transparent);border:1px solid var(--line);
  border-radius:17px;padding:14px;backdrop-filter:blur(15px);
}
.address-card>div:last-child{min-width:0}
.pin{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;background:rgba(213,161,38,.14);color:#f0c65a;font-size:21px}
.address-card small,.address-card strong,.address-card span{display:block}
.address-card small{font-size:8px;letter-spacing:.16em;color:#b9a89d;font-weight:800}
.address-card strong{font-family:"Playfair Display",serif;font-size:clamp(16px,4.8vw,20px);line-height:1.15;margin-top:3px;overflow-wrap:anywhere}
.address-card span{font-size:12px;line-height:1.4;color:var(--soft);margin-top:3px}

.actions{width:100%;max-width:620px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:16px}
.action{
  width:100%;min-width:0;min-height:66px;border-radius:17px;border:1px solid var(--line);
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:11px 13px;background:rgba(255,255,255,.045);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.action.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;box-shadow:0 18px 48px rgba(181,31,24,.22)}
.action.whatsapp{background:rgba(48,168,98,.08)}
.action .icon{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:20px}
.action small,.action b{display:block;min-width:0}
.action small{font-size:8px;letter-spacing:.14em;opacity:.56;font-weight:800}
.action b{font-size:14px;line-height:1.25;margin-top:3px;overflow-wrap:anywhere}
.action i{font-style:normal;opacity:.55}
.hint{font-size:11px;line-height:1.5;color:color-mix(in srgb,var(--soft) 72%,transparent);margin:13px 2px 0}

.hero-art{order:-1;position:relative;width:100%;min-width:0;display:grid;place-items:center;padding:6px 0 2px}
.brand-emblem{
  width:clamp(210px,76vw,390px);aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;
  background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.13);
}
.brand-emblem::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 8px rgba(255,255,255,.08);pointer-events:none}
.brand-emblem img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;background:#fff}

footer{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:7px;border-top:1px solid var(--line);padding:16px 0;color:#8b7b72;font-size:9px;line-height:1.4;letter-spacing:.06em}

/* Teléfonos muy angostos */
@media(max-width:360px){
  .shell{padding-inline:14px}
  .top{min-height:62px}
  .mini-menu{padding:9px 11px;font-size:11px}
  .brand-emblem{width:min(74vw,270px)}
  h1{font-size:clamp(38px,12.5vw,52px)}
}

/* Móviles grandes / tablets: aprovecha espacio sin volver a diseño de escritorio. */
@media(min-width:600px){
  .hero{padding-top:34px;gap:30px}
  .brand-emblem{width:min(58vw,440px)}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:clamp(58px,9vw,84px)}
}

/* Desktop real: dos columnas solo cuando hay puntero fino/hover, evitando layout desktop en móviles. */
@media(min-width:960px) and (hover:hover) and (pointer:fine){
  .shell{grid-template-rows:84px 1fr auto}
  .hero{grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:clamp(34px,5vw,80px);padding:5vh 0 4vh}
  .hero-art{order:0;min-height:min(66vh,700px);padding:0}
  .brand-emblem{width:min(40vw,540px)}
  h1{font-size:clamp(58px,7vw,100px);max-width:780px}
  .lead{font-size:clamp(15px,1.25vw,19px);margin:28px 0 24px}
  .actions{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}
  .action:hover{transform:translateY(-2px);background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2)}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}