/* =========================================================
   The Greatest Day — Global stylesheet (single source of truth)
   This file is auto-generated by consolidating inline <style> blocks
   and existing assets/theme.css + assets/app.css
   Generated: 2026-02-20
========================================================= */

/* =========================================================
   The Greatest Day — Theme Hybrid (old look + new components)
   - Keeps the elegant palette from theme.css.old
   - Adds the newer helpers (tgd-badge, tgd-buttons, alerts)
   - Scoped to body.tgd-theme so it won't affect Home
   Generated: 2026-02-19
========================================================= */

/* The Greatest Day - Theme (matching Home palette)
   Generated: 2026-02-19
*/
:root{
  --lilac:#a592ae;
  --sage:#a9b8a3;
  --evergreen:#596855;
  --chiffon:#e0ddd4;

  --ink: rgba(34,27,22,.92);
  --muted: rgba(34,27,22,.68);

  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow: 0 18px 60px rgba(34,27,22,.14);
  --shadow-soft: 0 10px 40px rgba(34,27,22,.10);
}

html,body{height:100%;}
body.tgd-theme{
  color: var(--ink);
  background: linear-gradient(180deg, var(--chiffon), #f6f3ee 55%, var(--chiffon));
}

/* The Greatest Day - Theme (matching Home palette)
   Generated: 2026-02-19
*/
  --lilac:#a592ae;
  --sage:#a9b8a3;
  --evergreen:#596855;
  --chiffon:#e0ddd4;

  --ink: rgba(34,27,22,.92);
  --muted: rgba(34,27,22,.68);

  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow: 0 18px 60px rgba(34,27,22,.14);
  --shadow-soft: 0 10px 40px rgba(34,27,22,.10);
}


/* Soft glass topbar */
body.tgd-theme .tgd-nav {
  backdrop-filter: blur(10px);
  background: rgba(224,221,212,.72) !important;
  border-bottom: 1px solid rgba(34,27,22,.08);
}

/* Surfaces */
body.tgd-theme .tgd-surface {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(34,27,22,.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
body.tgd-theme .tgd-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(34,27,22,.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(34,27,22,.08);
}
body.tgd-theme .tgd-pill {
  border: 1px solid rgba(34,27,22,.10);
  background: rgba(255,255,255,.75);
  padding: .5rem .75rem;
  border-radius: 999px;
}

/* Typography */
body.tgd-theme .tgd-title {
  letter-spacing: -.02em;
}

/* Bootstrap overrides (keeps your palette consistent) */
body.tgd-theme .btn-primary {
  --bs-btn-bg: var(--evergreen);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-hover-bg: #4d5c4a;
  --bs-btn-hover-border-color: rgba(0,0,0,0);
  --bs-btn-active-bg: #435242;
  --bs-btn-active-border-color: rgba(0,0,0,0);
  --bs_btn-font-color: F4F4F4;
  --bs-btn-disabled-bg: var(--evergreen);
  --bs-btn-disabled-border-color: rgba(0,0,0,0);
}
body.tgd-theme .btn-outline-primary {
  --bs-btn-color: var(--evergreen);
  --bs-btn-border-color: rgba(89,104,85,.45);
  --bs-btn-hover-bg: rgba(89,104,85,.12);
  --bs-btn-hover-border-color: rgba(89,104,85,.55);
  --bs-btn-active-bg: rgba(89,104,85,.18);
  --bs-btn-active-border-color: rgba(89,104,85,.55);
}
body.tgd-theme .btn-secondary {
  --bs-btn-bg: rgba(165,146,174,.55);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-hover-bg: rgba(165,146,174,.68);
  --bs-btn-hover-border-color: rgba(0,0,0,0);
  --bs-btn-active-bg: rgba(165,146,174,.78);
  --bs-btn-active-border-color: rgba(0,0,0,0);
}

/* Inputs */
body.tgd-theme .form-control, body.tgd-theme .form-select {
  border-radius: 14px;
  border-color: rgba(34,27,22,.12);
}
body.tgd-theme .form-control:focus, body.tgd-theme .form-select:focus {
  border-color: rgba(165,146,174,.65);
  box-shadow: 0 0 0 .25rem rgba(165,146,174,.18);
}

/* Tables */
body.tgd-theme .table {
  --bs-table-bg: transparent;
}
body.tgd-theme .table thead th {
  color: rgba(34,27,22,.72);
}
body.tgd-theme .badge.bg-primary { background: rgba(89,104,85,.92) !important; }
body.tgd-theme .badge.bg-secondary { background: rgba(165,146,174,.85) !important; }

/* Links */
body.tgd-theme a { color: #4f5c4d; }
body.tgd-theme a:hover { color: #3f4b3d; }

/* Small helpers */
body.tgd-theme .tgd-muted { color: var(--muted); }

/* ---------- Newer helpers (safe additions) ---------- */
body.tgd-theme .tgd-badge{
  display:inline-flex;
  gap:.35rem;
  align-items:center;
  font-size: .82rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(34,27,22,.10);
  background: rgba(255,255,255,.70);
}

body.tgd-theme .btn.tgd-btn{
  border-radius: 999px;
  padding: .55rem 1rem;
  border: 1px solid rgba(34,27,22,.14);
}
body.tgd-theme .btn.tgd-primary{
  background: var(--evergreen);
  border-color: rgba(34,27,22,.10);
  color: #fff;
}
body.tgd-theme .btn.tgd-primary:hover{ filter: brightness(.96); color:#fff; }

body.tgd-theme .btn.tgd-soft{
  background: rgba(165,146,174,.12);
  border-color: rgba(34,27,22,.12);
  color: var(--ink);
}
body.tgd-theme .btn.tgd-soft:hover{ background: rgba(165,146,174,.18); color: var(--ink); }

body.tgd-theme .tgd-link-muted{ color: var(--muted); text-decoration:none; }
body.tgd-theme .tgd-link-muted:hover{ text-decoration:underline; }

body.tgd-theme .alert{
  border-radius: var(--radius-lg);
  border-color: rgba(34,27,22,.10);
}

/* =========================================================
   App UI helpers (previously assets/app.css)
========================================================= */

/*
  The Greatest Day – App UI Theme
  - Keeps Bootstrap 5.3 as base
  - Adds consistent typography, spacing, and a modern soft look
*/

@font-face{
  font-family: "Questrial";
  src: url("/assets/fonts/Questrial.ttf") format("truetype");
  font-display: swap;
}

:root{
  --tgd-bg: #0b0b12;
  --tgd-surface: rgba(255,255,255,0.92);
  --tgd-surface-2: rgba(255,255,255,0.78);
  --tgd-border: rgba(0,0,0,0.10);
  --tgd-muted: rgba(15, 18, 33, 0.65);
  --tgd-ink: #0f1221;

  --tgd-accent: #c9a227; /* dorado suave */
  --tgd-accent-2: #b57cff; /* morado suave */
  --tgd-accent-3: #62d2ff; /* azul suave */

  --tgd-radius: 18px;
  --tgd-shadow: 0 10px 30px rgba(0,0,0,0.14);
  --tgd-shadow-soft: 0 6px 18px rgba(0,0,0,0.10);
}

html, body{ height:100%; }

.tgd-body{
  font-family: "Questrial", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--tgd-ink);
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(181,124,255,0.32), transparent 60%),
    radial-gradient(900px 500px at 90% 15%, rgba(98,210,255,0.28), transparent 60%),
    radial-gradient(900px 600px at 50% 95%, rgba(201,162,39,0.18), transparent 55%),
    linear-gradient(180deg, #0b0b12 0%, #0d0c17 60%, #0b0b12 100%);
}

.tgd-card{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--tgd-radius);
  background: var(--tgd-surface);
  box-shadow: var(--tgd-shadow);
  backdrop-filter: blur(10px);
}

.tgd-auth-brand{ color: rgba(255,255,255,0.92); }
.tgd-auth-logo{ height: 56px; width:auto; opacity: 0.95; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
.tgd-auth-title{ font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .6rem; }
.tgd-auth-subtitle{ font-size: .95rem; opacity: .82; margin-top: .2rem; }
.tgd-auth-footer{ color: rgba(255,255,255,0.86); }
.tgd-auth-footer a{ color: rgba(255,255,255,0.92); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.5); }
.tgd-auth-footer a:hover{ opacity: .9; }

/* Inputs */
.tgd-input{
  border-radius: 14px !important;
  padding: .70rem .85rem;
  border: 1px solid rgba(15,18,33,0.12);
  background: rgba(255,255,255,0.92);
}
.tgd-input:focus{
  border-color: rgba(181,124,255,0.55);
  box-shadow: 0 0 0 .18rem rgba(181,124,255,0.18);
}

.tgd-btn-primary{
  border-radius: 14px;
  padding: .70rem .95rem;
  border: 0;
  background: linear-gradient(135deg, rgba(181,124,255,1) 0%, rgba(98,210,255,1) 55%, rgba(201,162,39,1) 110%);
  color: #0b0b12;
  font-weight: 700;
  box-shadow: var(--tgd-shadow-soft);
}
.tgd-btn-primary:hover{ filter: brightness(1.02); transform: translateY(-1px); }

.tgd-btn-ghost{
  border-radius: 14px;
  padding: .70rem .95rem;
  border: 1px solid rgba(15,18,33,0.15);
  background: rgba(255,255,255,0.70);
}

/* Panel chrome */
.tgd-topbar{
  background: rgba(12, 12, 22, 0.72);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.tgd-brand{ color: rgba(255,255,255,0.92); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .95rem; }
.tgd-logo{ height: 28px; width:auto; }

.tgd-icon-btn{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: .38rem .55rem;
}
.tgd-icon-btn .navbar-toggler-icon{ filter: invert(1); }

.tgd-userchip{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding: .42rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
}
.tgd-userchip__dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tgd-accent-2), var(--tgd-accent-3));
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}
.tgd-userchip__email{ font-size: .85rem; line-height: 1.1; }
.tgd-userchip__role{ font-size: .75rem; opacity: .85; line-height: 1.1; }

.tgd-sidebar{
  background: rgba(255,255,255,0.92);
  border-right: 1px solid rgba(0,0,0,0.08);
}
.tgd-navbtn{
  text-align:left;
  border-radius: 14px;
  padding: .70rem .85rem;
  border: 1px solid rgba(15,18,33,0.10);
  background: rgba(255,255,255,0.80);
}
.tgd-navbtn:hover{ background: rgba(181,124,255,0.10); border-color: rgba(181,124,255,0.25); }

.tgd-main{ min-height: calc(100vh - 58px); }

/* Tables / cards inside panel */
.card{ border-radius: var(--tgd-radius); border: 1px solid rgba(0,0,0,0.08); }
.card.shadow-sm{ box-shadow: var(--tgd-shadow-soft) !important; }

.badge{ border-radius: 999px; }

.pill{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,0.85);
  padding:.55rem .75rem;
  border-radius:999px;
}

/* =========================================================
   Global base + Bootstrap palette overrides
========================================================= */

/* --- Global base (applies everywhere, including Home) --- */
html,body{height:100%;}
body{
  color: var(--ink);
  background: linear-gradient(180deg, var(--chiffon), #f6f3ee 55%, var(--chiffon));
}

/* --- Bootstrap brand overrides (global) --- */
.btn-primary{
  --bs-btn-bg: var(--evergreen);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-hover-bg: #4d5c4a;
  --bs-btn-hover-border-color: rgba(0,0,0,0);
  --bs-btn-active-bg: #435242;
  --bs-btn-active-border-color: rgba(0,0,0,0);
  --bs-btn-disabled-bg: var(--evergreen);
  --bs-btn-disabled-border-color: rgba(0,0,0,0);
}
.btn-outline-primary{
  --bs-btn-color: var(--evergreen);
  --bs-btn-border-color: rgba(89,104,85,.45);
  --bs-btn-hover-bg: rgba(89,104,85,.12);
  --bs-btn-hover-border-color: rgba(89,104,85,.55);
  --bs-btn-active-bg: rgba(89,104,85,.18);
  --bs-btn-active-border-color: rgba(89,104,85,.55);
}
.btn-secondary{
  --bs-btn-bg: rgba(165,146,174,.55);
  --bs-btn-border-color: rgba(0,0,0,0);
  --bs-btn-hover-bg: rgba(165,146,174,.68);
  --bs-btn-hover-border-color: rgba(0,0,0,0);
  --bs-btn-active-bg: rgba(165,146,174,.78);
  --bs-btn-active-border-color: rgba(0,0,0,0);
}

/* =========================================================
   Inline styles extracted from: create.php
========================================================= */

.step { display:none; }
    .step.active { display:block; }
    .pill-preview{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      padding: .75rem 1rem;
      border-radius: 999px;
      background: rgba(165,146,174,.12);
      border: 1px solid rgba(34,27,22,.10);
      overflow-wrap: anywhere;
    }
    .preview-card{
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(34,27,22,.08);
    }

/* =========================================================
   Inline styles extracted from: index.php
========================================================= */

.nav-glass{
      backdrop-filter: blur(10px);
      background: rgba(224,221,212,.72);
      border-bottom: 1px solid rgba(34,27,22,.08);
    }

    .brand-badge{
      width:60px; height:60px;
      border-radius:14px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(34,27,22,.08);
      display:flex; align-items:center; justify-content:center;
      font-weight:700; letter-spacing:.5px;
    }

    .brand-logo{
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 6px;
    }


    .hero-wrap{
      padding: 48px 0 18px;
    }

    .hero-card{
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      overflow:hidden;
      border: 1px solid rgba(34,27,22,.08);
      background:
      radial-gradient(80% 60% at 20% 20%, rgba(165,146,174,.18), transparent 60%),
      radial-gradient(70% 60% at 80% 70%, rgba(169,184,163,.18), transparent 60%),
      rgba(255,255,255,.92);
    }

    .hero-media{
      border-radius: var(--radius-lg);
      min-height: 360px;
      background:
      radial-gradient(80% 80% at 20% 30%, rgba(165,146,174,.20), transparent 60%),
      radial-gradient(90% 90% at 70% 70%, rgba(89,104,85,.16), transparent 60%),
      linear-gradient(90deg, rgba(224,221,212,.25), rgba(224,221,212,.70)),
      url("../assets/hero-home.jpg") center/cover no-repeat;
      border: 1px solid rgba(34,27,22,.08);
    }

    .pill-link{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      padding: .75rem 1rem;
      border-radius: 999px;
      background: rgba(165,146,174,.12);
      border: 1px solid rgba(34,27,22,.10);
      overflow-wrap: anywhere;
      display: inline-block;
    }

    .feature-card{
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(34,27,22,.08);
      background: rgba(255,255,255,.92);
      height: 100%;
    }

    .plan{
      border-radius: var(--radius-xl);
      border: 1px solid rgba(34,27,22,.08);
      box-shadow: var(--shadow-soft);
      background: rgba(255,255,255,.92);
      height: 100%;
    }

    .plan.popular{
      outline: 2px solid rgba(165,146,174,.45);
      box-shadow: var(--shadow);
    }

    .badge-soft{
      background: rgba(165,146,174,.18);
      border: 1px solid rgba(34,27,22,.10);
      color: var(--ink);
      font-weight: 600;
    }

    .btn-primary{
      background: rgba(89,104,85,.92);
      border-color: rgba(89,104,85,.92);
    }
    .btn-primary:hover{
      background: rgba(89,104,85,1);
      border-color: rgba(89,104,85,1);
    }

    .btn-soft{
      background: rgba(165,146,174,.18);
      border: 1px solid rgba(34,27,22,.10);
    }
    .btn-soft:hover{
      background: rgba(165,146,174,.26);
    }

    .muted{ color: var(--muted); }

    footer{
      padding: 36px 0 46px;
      color: var(--muted);
      font-size: 13px;
      text-align:center;
    }

    .section{
      padding: 28px 0;
    }

    .section-title{
      font-weight: 700;
      letter-spacing: .3px;
    }
    
    /* Phone Frame */
    
    /* ===== Phone frames ===== */
    .phone-frame{
      width: 320px;
      height: 650px;
      padding: 14px;
      position: relative;
      box-shadow: 0 18px 60px rgba(34,27,22,.22);
      border: 1px solid rgba(255,255,255,.08);
    }

/* iPhone look */
.phone-frame.ios{
  border-radius: 44px;
  background: #111;
}
.phone-frame.ios .phone-notch{
  display:block;
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 26px;
  border-radius: 0 0 18px 18px;
  background: #111;
  z-index: 3;
}

/* Android look */
.phone-frame.android{
  border-radius: 28px;
  background: #101010;
}
.phone-frame.android .phone-notch{
  display:none;
}
.phone-frame.android::before{
  content:"";
  position:absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2a2a2a; /* “cámara” */
  z-index: 3;
}

.phone-screen{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 34px;
  background: #fff;
  overflow: hidden;
}
.phone-frame.android .phone-screen{ border-radius: 18px; }

/* Dark-mode feel en el marco */
.phone-frame.dark{
  background: #0c0c0c !important;
}

/* Contenedor relativo para poner la capa encima */
.tgd-phone-embed{
  position: relative;
}

/* Esta capa bloquea tap/click, pero deja scroll/swipe */
.tgd-phone-scrollguard{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;

  /* clave: permitir pan-y (scroll vertical) pero no taps */
  touch-action: pan-y;

  /* deja pasar el scroll del mouse/trackpad */
  pointer-events: auto;
}

/* El iframe sigue debajo */
.tgd-phone-embed .phone-frame{
  position: relative;
  z-index: 1;
}

/* =========================================================
   Inline styles extracted from: panel.php
========================================================= */

.pill { border:1px solid rgba(0,0,0,.1); background:#fff; padding:.5rem .75rem; border-radius:999px; }

/* =========================================================
   Inline styles extracted from: preview.php
========================================================= */

.hero{
      border-radius:24px; overflow:hidden; border:1px solid rgba(0,0,0,.08);
      background: rgba(255,255,255,.88);
    }
    .hero-img{ width:100%; height:320px; object-fit:cover; display:block; }
    .watermark{
      position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
      font-size:64px; opacity:.08; pointer-events:none; transform:rotate(-20deg); z-index:9999;
    }

/* =========================================================
   Inline styles extracted from: templates/classic/template.php
========================================================= */

*{box-sizing:border-box}
.wrap{width:min(980px, calc(100% - 40px)); margin:0 auto; padding:46px 0}
    .hero{
      border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
      background:var(--card); border:1px solid rgba(34,27,22,.08);
      display:grid; grid-template-columns: 1.1fr .9fr;
    }
    .media{min-height:420px; background:
      radial-gradient(80% 80% at 20% 30%, rgba(165,146,174,.22), transparent 60%),
      radial-gradient(90% 90% at 70% 70%, rgba(89,104,85,.18), transparent 60%),
      linear-gradient(90deg, rgba(224,221,212,.20), rgba(224,221,212,.65)),
      url("<?= $hero ?>") center/cover no-repeat;
    }
    .content{padding:34px 26px; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98))}
    .kicker{letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--muted)}
    h1{margin:10px 0 12px;font-size:44px;letter-spacing:1px;line-height:1.05;font-weight:600}
    .meta{color:var(--muted);font-size:15px}
    .pill{display:inline-flex;gap:10px;align-items:center;text-decoration:none;margin-top:16px;
      padding:12px 16px;border-radius:999px;border:1px solid rgba(34,27,22,.10);
      background:rgba(165,146,174,.18); color:var(--ink);
    }
    .grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:18px}
    .card{background:rgba(255,255,255,.9); border:1px solid rgba(34,27,22,.08); border-radius:18px; padding:16px}
    .card h2{margin:0 0 8px;font-size:18px}
    @media(max-width:920px){ .hero{grid-template-columns:1fr} .media{min-height:360px} h1{font-size:38px} .grid{grid-template-columns:1fr} }
    
    body.dark{
  background: #141210;
  color: rgba(255,255,255,.92);
}
body.dark .hero,
body.dark .card,
body.dark .content{
  background: rgba(20,18,16,.92) !important;
  border-color: rgba(255,255,255,.10) !important;
}
body.dark .meta{ color: rgba(255,255,255,.70) !important; }
body.dark .pill{ background: rgba(165,146,174,.22) !important; }


/* =========================================================
   Home Premium Pass — 2026-02-20
========================================================= */
.tgd-nav-premium .container{ max-width: 1120px; }

.tgd-hero-premium{
  padding-top: 6px;
}

.tgd-hero-shell{
  border-radius: 34px;
  border: 1px solid rgba(34,27,22,.08);
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(165,146,174,.18), transparent 60%),
    radial-gradient(80% 70% at 85% 70%, rgba(169,184,163,.18), transparent 60%),
    rgba(255,255,255,.80);
  box-shadow: 0 18px 80px rgba(34,27,22,.12);
  padding: 22px;
}

@media (min-width: 992px){
  .tgd-hero-shell{ padding: 34px; }
}

.tgd-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid rgba(34,27,22,.10);
  background: rgba(255,255,255,.70);
  border-radius: 999px;
  padding: .35rem .65rem;
}

.tgd-hero-title{
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  font-size: clamp(2.0rem, 3.6vw, 3.1rem);
}

.tgd-accent{
  background: linear-gradient(90deg, rgba(165,146,174,.65), rgba(169,184,163,.55));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tgd-hero-sub{
  color: rgba(34,27,22,.78);
  font-size: 1.08rem;
  line-height: 1.6;
}

.tgd-hero-micro{
  border-top: 1px dashed rgba(34,27,22,.14);
  padding-top: 14px;
}

.tgd-micro-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tgd-micro-pill{
  border: 1px solid rgba(34,27,22,.10);
  background: rgba(255,255,255,.70);
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(34,27,22,.82);
}

.tgd-phone-stage{
  position: relative;
}

.tgd-phone-premium{
  box-shadow: 0 22px 90px rgba(34,27,22,.26);
  transform: translateY(0);
}

.tgd-phone-stage .tgd-phone-premium{
  max-width: 340px; /* prueba 340-380 */
  width: 100%;
}

.tgd-phone-caption{ opacity: .9; }

.tgd-mini{ border-radius: 18px; }

.tgd-hover-lift{
  transition: transform .18s ease, box-shadow .18s ease;
}
.tgd-hover-lift:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 70px rgba(34,27,22,.14);
}

/* Pricing */
.tgd-price-card .badge-soft{ font-weight: 700; }
.tgd-price{
  display:flex;
  align-items:baseline;
  gap: 10px;
}
.tgd-price__amount{
  font-weight: 900;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.02em;
}
.tgd-price__note{ font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

.tgd-collab-price{
  border: 1px solid rgba(34,27,22,.10);
  background: rgba(169,184,163,.16);
  border-radius: 14px;
  padding: 10px 12px;
}

/* Collaborators */
.tgd-collab-points{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Make primary buttons feel more premium */
.btn-primary.btn-lg{
  border-radius: 999px;
  padding: .85rem 1.2rem;
}
.btn-outline-dark.btn-lg,
.btn-soft.btn-lg{
  border-radius: 999px;
  padding: .85rem 1.2rem;
}