/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:#F2F4F7;color:#1A1A2E;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}

/* ── Card Page ────────────────────────────────────────────── */
.cardpage{max-width:430px;margin:0 auto;background:#F2F4F7;min-height:100vh;}

/* ── Overlays ─────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190;opacity:0;pointer-events:none;transition:opacity .25s;}
.overlay.show{opacity:1;pointer-events:auto;}

/* ── Drawer ───────────────────────────────────────────────── */
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;background:#fff;z-index:200;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:4px 0 30px rgba(0,0,0,.15);}
.drawer.open{transform:translateX(0);}
.dh{padding:40px 16px 20px;display:flex;align-items:center;gap:12px;}
.dav{width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.5);flex-shrink:0;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;}
.dav img{width:100%;height:100%;object-fit:cover;}
.dname{color:#fff;font-weight:700;font-size:14px;}
.dtitle{color:rgba(255,255,255,.75);font-size:12px;margin-top:1px;}
.dco{color:rgba(255,255,255,.5);font-size:11px;margin-top:1px;}
.dmenu{flex:1;overflow-y:auto;padding:8px 0;}
.di{width:100%;padding:13px 20px;border:none;background:none;display:flex;align-items:center;gap:14px;cursor:pointer;font-family:inherit;font-size:14px;color:#333;font-weight:500;transition:background .15s;}
.di:hover{background:#f8f8f8;}
.dico{font-size:18px;width:24px;text-align:center;}
.darr{margin-left:auto;color:#bbb;font-size:14px;}
.dfooter{padding:14px 20px;border-top:1px solid #f0f0f0;font-size:11px;color:#aaa;text-align:center;}

/* ── Panels ───────────────────────────────────────────────── */
.panel{position:fixed;bottom:0;left:50%;transform:translate(-50%,100%);width:100%;max-width:430px;background:#fff;z-index:200;border-radius:20px 20px 0 0;max-height:85vh;overflow-y:auto;transition:transform .28s cubic-bezier(.4,0,.2,1);}
.panel.open{transform:translate(-50%,0);}
.phandle{width:40px;height:4px;background:#e0e0e0;border-radius:2px;margin:10px auto 0;}
.phead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;position:sticky;top:0;background:#fff;z-index:1;}
.phead h3{font-size:15px;font-weight:700;}
.phead button{background:#f5f5f5;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:13px;color:#666;display:flex;align-items:center;justify-content:center;}
.pbody{padding:16px 20px 32px;}
.pintro{font-size:13px;color:#666;margin-bottom:16px;line-height:1.6;}

/* ── Contact Panel ────────────────────────────────────────── */
.crow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f5f5f5;}
.crow:last-child{border-bottom:none;}
.cico{font-size:20px;}
.cinfo{flex:1;}
.clbl{font-size:11px;color:#999;}
.cval{font-size:13px;font-weight:600;color:#1a1a1a;}
.cbtn{border:1px solid;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;background:transparent;cursor:pointer;white-space:nowrap;font-family:inherit;}

/* ── Company Panel ────────────────────────────────────────── */
.cologo{height:44px;margin-bottom:14px;}
.coname{font-weight:700;font-size:17px;color:#1a1a1a;}
.conif{font-size:12px;color:#999;margin:4px 0 12px;}
.codesc{font-size:13px;color:#555;line-height:1.7;margin-bottom:16px;}
.locbox{background:#f8f8f8;border-radius:12px;padding:16px;}
.loclbl{font-size:11px;color:#999;margin-bottom:4px;}
.locval{font-size:14px;color:#1a1a1a;font-weight:500;margin-bottom:14px;}
.locbtns{display:flex;gap:8px;}
.mapbtn{flex:1;padding:9px;border-radius:8px;font-size:13px;font-weight:600;text-align:center;color:#fff;}

/* ── Social Panel ─────────────────────────────────────────── */
.srow{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid;border-radius:12px;margin-bottom:10px;}
.sdot{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.sname{font-weight:600;font-size:13px;color:#1a1a1a;}
.shandle{font-size:12px;color:#888;}

/* ── Video ────────────────────────────────────────────────── */
.vitem{margin-bottom:16px;}
.vtitle{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:8px;}
.vwrap{border-radius:10px;overflow:hidden;background:#000;}

/* ── Publicaciones ────────────────────────────────────────── */
.pubitem{display:block;background:#f8f8f8;border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid #eee;}
.pubtitle{font-weight:700;font-size:14px;color:#1a1a1a;}
.pubdesc{font-size:12px;color:#666;margin-top:3px;}

/* ── Share Panel ──────────────────────────────────────────── */
.sharegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
.sharebtn{padding:12px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:10px;cursor:pointer;font-weight:600;font-size:13px;color:#1a1a1a;text-align:center;font-family:inherit;}
.qrbox{text-align:center;background:#f8f8f8;border-radius:12px;padding:16px;}
.qrlbl{font-size:12px;color:#999;margin-bottom:10px;}
.qrwrap{display:inline-block;background:#fff;padding:10px;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:8px;}
.qrurl{font-size:10px;color:#aaa;word-break:break-all;}

/* ── Save Panel ───────────────────────────────────────────── */
.savepreview{display:flex;align-items:center;gap:14px;padding:14px;background:#f8f8f8;border-radius:12px;margin-bottom:16px;}
.saveav{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;overflow:hidden;flex-shrink:0;}
.saveav img{width:100%;height:100%;object-fit:cover;}
.savename{font-weight:700;font-size:14px;}
.savepos{font-size:12px;color:#888;}
.savebtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:14px;border-radius:12px;color:#fff;font-weight:700;font-size:14px;}

/* ── Home Screen Panel ────────────────────────────────────── */
.oscard{background:#f8f8f8;border-radius:12px;padding:16px;margin-bottom:14px;}
.ostitle{font-weight:700;font-size:14px;margin-bottom:10px;}
.osstep{display:flex;gap:10px;margin-bottom:8px;align-items:flex-start;font-size:13px;color:#555;line-height:1.5;}
.osnum{width:20px;height:20px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}

/* ── QR Panel ─────────────────────────────────────────────── */
.qrbig{display:inline-block;background:#fff;padding:14px;border-radius:16px;border:1px solid #e0e0e0;box-shadow:0 4px 20px rgba(0,0,0,.08);margin-bottom:14px;}
.qrbigname{font-size:15px;font-weight:700;color:#1a1a1a;}
.qrbigpos{font-size:12px;color:#888;margin-top:3px;}

/* ── Top Bar ──────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;position:sticky;top:0;z-index:50;gap:8px;}

/* Hamburger — compacto, solo ícono + mini label */
.hamburger{
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
  border-radius:10px;
  flex-shrink:0;
  color:#fff;
  transition:background .2s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.hamburger:hover{ background:rgba(255,255,255,.18); }
.hamburger:active{ background:rgba(255,255,255,.28); transform:scale(.92); }
.ham-icon{ width:22px; height:22px; display:block; opacity:.95; }
/* ham-label removed — solo ícono */
.tbco{color:rgba(255,255,255,.9);font-weight:700;font-size:13px;letter-spacing:.3px;}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{padding:20px 0 0;display:flex;flex-direction:column;align-items:center;position:relative;}
.herobar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--ac),transparent);}
.avwrap{position:relative;margin-bottom:-42px;}
.av{width:100px;height:100px;border-radius:50%;border:4px solid;overflow:hidden;}
.av img{width:100%;height:100%;object-fit:cover;}
.avinit{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700;font-family:'Instrument Serif',serif;}
.yearbadge{position:absolute;bottom:4px;right:-10px;border-radius:20px;padding:2px 8px;font-size:10px;font-weight:700;color:#fff;border:2px solid #fff;}

/* ── Card Body ────────────────────────────────────────────── */
.cbody{background:#fff;border-radius:0 0 24px 24px;padding:54px 20px 24px;margin-bottom:12px;box-shadow:0 2px 20px rgba(0,0,0,.06);text-align:center;}
.pname{font-size:22px;font-weight:700;font-family:'Instrument Serif',serif;color:#1a1a1a;}
.ptitle{font-size:14px;font-weight:600;margin-top:3px;}
.pdept{font-size:12px;color:#888;margin-top:2px;}
.pco{font-size:13px;color:#555;margin-top:3px;margin-bottom:18px;}

/* ── Action Row ───────────────────────────────────────────── */
.actionrow{display:flex;gap:10px;justify-content:center;margin-bottom:20px;}
.actionbtn{padding:9px 24px;border-radius:20px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.actionbtn.outline{background:#f5f5f5;border:1px solid #e0e0e0;color:#1a1a1a;}
.actionbtn.filled{border:none;color:#fff;}

/* ── Quick Grid ───────────────────────────────────────────── */
.quickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
.qbtn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;border:1px solid;border-radius:12px;cursor:pointer;background:transparent;font-family:inherit;transition:transform .15s;}
.qbtn:active{transform:scale(.96);}
.qbtn span{font-size:20px;}
.qbtn small{font-size:10px;font-weight:600;}

/* ── CTA Buttons ──────────────────────────────────────────── */
.ctabtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;color:#fff;font-weight:700;font-size:14px;margin-bottom:8px;}

/* ── Desc Box ─────────────────────────────────────────────── */
.codescbox{text-align:left;padding:14px 0;border-top:1px solid #f5f5f5;margin-top:8px;}
.codesc{font-size:13px;color:#555;line-height:1.7;}

/* ── Social Icons Row ─────────────────────────────────────── */
.sirow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:16px 0;border-top:1px solid #f5f5f5;}
.sic{width:42px;height:42px;border-radius:50%;border:1px solid;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:transform .15s;}
.sic:active{transform:scale(.9);}

/* ── Services Block ───────────────────────────────────────── */
.svcsblock{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #f0f0f0;margin-bottom:12px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.svcnav{display:flex;border-bottom:1px solid #f0f0f0;}
.svctab{flex:1;padding:12px 4px;border:none;background:none;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;color:#888;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;}
.svctab.active{color:var(--cc);border-bottom-color:var(--cc);}
.svcpanel{display:none;padding:12px 16px 16px;}
.svcpanel.active{display:block;}
/* Servicio CON imagen — layout vertical */
.svccard{display:flex;flex-direction:column;padding:0 0 16px;border-bottom:1px solid #f0f0f0;}
.svccard:last-child{border-bottom:none;padding-bottom:4px;}

/* Imagen */
.svcimg-wrap{width:100%;height:160px;overflow:hidden;border-radius:10px;margin-bottom:10px;background:#f0f0f0;flex-shrink:0;}
.svcimg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;}
.svcimg-wrap:hover .svcimg{transform:scale(1.05);}

/* Fila ícono + nombre cuando hay imagen */
.svctop{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.svci-sm{font-size:18px;flex-shrink:0;}

/* Ícono grande cuando NO hay imagen (layout horizontal) */
.svci{font-size:26px;flex-shrink:0;width:36px;text-align:center;margin-top:2px;}

/* Cuando NO hay imagen, volvemos a horizontal */
.svccard.no-img{flex-direction:row;align-items:flex-start;gap:12px;padding:12px 0;}
.svccard.no-img:last-child{border-bottom:none;}

.svcinfo{flex:1;}
.svcname{font-weight:700;font-size:13px;color:#1a1a1a;margin-bottom:3px;}
.svcdesc{font-size:12px;color:#666;line-height:1.5;margin-bottom:6px;}
.svcprice{display:inline-block;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--ac) 15%,transparent);color:color-mix(in srgb,var(--ac) 70%,#5a4010);}

/* ── Content Tabs ─────────────────────────────────────────── */
.ctabs{background:#fff;border-radius:16px;overflow:hidden;border:1px solid #f0f0f0;margin-bottom:12px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.ctabnav{display:flex;border-bottom:1px solid #f0f0f0;}
.ctab{flex:1;padding:13px;border:none;background:none;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;color:#888;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;}
.ctab.active{color:var(--cc);border-bottom-color:var(--cc);}
.tbc{display:none;padding:16px;}
.tbc.active{display:block;}

/* ── Home Screen + Footer ─────────────────────────────────── */
.hsbtn{width:100%;padding:14px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);border-radius:12px;cursor:pointer;font-size:13px;font-weight:600;color:#555;margin-top:14px;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;}
.cdfooter{text-align:center;font-size:11px;color:#aaa;margin-top:16px;padding-bottom:4px;}

/* ── Logo en topbar ───────────────────────────────────────── */
/* PNG con transparencia — sin fondo ni borde, se mezcla con el color de la cabecera */
.topbar-logo {
  height: 40px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
}

/* ── Logo en drawer ───────────────────────────────────────── */
.drawer-logo-wrap {
  width: auto;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.drawer-logo {
  max-height: 44px;
  max-width: 120px;
  object-fit: contain;
  background: none;
}

/* ── Service image ────────────────────────────────────────── */
.svcimg-wrap { width:100%; height:160px; overflow:hidden; border-radius:10px; margin-bottom:10px; background:#f0f0f0; }
.svcimg { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.svcimg-wrap:hover .svcimg { transform:scale(1.04); }
.svci-sm { font-size:18px; flex-shrink:0; }
.svctop { display:flex; align-items:center; gap:8px; margin-bottom:4px; }