/* Espiral Creative: client portal look, matched to espiralcreative.com (same palette and fonts).
   Loaded after Blesta's theme CSS from app/views/client/bootstrap/structure.pdt. Only overrides looks. */

@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ec-ink: #141210;
  --ec-ink-soft: #3a352f;
  --ec-cream: #f7f3ec;
  --ec-cream-deep: #efe8db;
  --ec-paper: #fffdf9;
  --ec-clay: #c2532e;
  --ec-clay-dark: #a23f1f;
  --ec-clay-soft: #e9c4b3;
  --ec-jade: #0f5d54;
  --ec-whatsapp: #177a45;
  --ec-whatsapp-dark: #0f5e36;
  --ec-display: 'Fraunces Variable', ui-serif, Georgia, serif;
  --ec-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Base ---- */
body {
  background: var(--ec-cream) !important;
  color: var(--ec-ink);
  font-family: var(--ec-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .title h3, .card-header h3, .card-header h4 {
  font-family: var(--ec-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ec-ink);
}
a, a:hover { color: var(--ec-clay-dark); }
a:hover { text-decoration-color: currentColor; }
.text-muted { color: #6b645b !important; }
::selection { background: var(--ec-clay); color: var(--ec-paper); }
:focus-visible { outline: 3px solid var(--ec-clay); outline-offset: 2px; }

/* ---- Header: wordmark + WhatsApp, same as the landing page ---- */
.header {
  background: var(--ec-cream) !important;
  border-bottom: 1px solid var(--ec-cream-deep);
}
.header .container-md { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .9rem; }
.header .logo { margin: 0 !important; padding: 0 !important; }
.header .logo a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.header .logo img:not(.ec-wordmark-icon) { display: none; }
.ec-wordmark-icon { width: 36px; height: 36px; display: block; }
.ec-wordmark { font-family: var(--ec-display); font-size: 1.3rem; font-weight: 600; color: var(--ec-ink); letter-spacing: -0.01em; }
.ec-wordmark span { color: var(--ec-clay); }
.ec-header-actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.ec-header-actions .top-nav { float: none !important; margin: 0 !important; }
.header .top-nav ul { margin: 0; }
.header .top-nav a { color: var(--ec-ink-soft) !important; }
.ec-btn-whatsapp {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--ec-whatsapp); color: #fff !important;
  border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .9rem;
  text-decoration: none !important; white-space: nowrap;
}
.ec-btn-whatsapp:hover { background: var(--ec-whatsapp-dark); color: #fff !important; }
.ec-btn-whatsapp svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (max-width: 575px) { .ec-btn-whatsapp .ec-label { display: none; } .ec-btn-whatsapp { padding: .55rem; } }

/* ---- Main navigation: light bar instead of the dark one ---- */
.nav-content nav.navbar {
  background: var(--ec-paper) !important;
  border-bottom: 1px solid var(--ec-cream-deep);
  box-shadow: none;
}
.nav-content nav.navbar .navbar-nav > li > a,
.nav-content nav.navbar .navbar-nav .nav-link { color: var(--ec-ink-soft) !important; font-weight: 500; }
.nav-content nav.navbar .navbar-nav > li > a:hover,
.nav-content nav.navbar .navbar-nav > .active > a,
.nav-content nav.navbar .navbar-nav > .open > a { color: var(--ec-ink) !important; }
.nav-content nav.navbar .navbar-nav > .active > a { box-shadow: inset 0 -2px 0 var(--ec-clay); }
.nav-content .navbar-toggler { border-color: rgba(20, 18, 16, .2); }
.nav-content .navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20,18,16,.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 767px) {
  nav.navbar .navbar-nav .show .dropdown-menu > a { color: var(--ec-ink-soft) !important; }
  nav.navbar .navbar-nav .show .dropdown-menu > a:hover { color: var(--ec-ink) !important; }
}
.dropdown-menu { border-color: var(--ec-cream-deep); border-radius: .75rem; box-shadow: 0 10px 30px rgba(20, 18, 16, .08); }
.dropdown-item:active { background: var(--ec-cream-deep); color: var(--ec-ink); }

/* ---- Page title band ---- */
.title { background: var(--ec-cream) !important; border-bottom: 0; }
.title h3 { font-size: 2rem; color: var(--ec-ink) !important; }

/* ---- Cards (Blesta widgets, order steps, portal boxes) ---- */
.card {
  background: var(--ec-paper);
  border: 1px solid var(--ec-cream-deep);
  border-radius: 1rem;
  overflow: hidden;
}
.card-blesta > .card-header,
.card > .card-header {
  background: var(--ec-paper) !important;
  color: var(--ec-ink) !important;
  border-bottom: 1px solid var(--ec-cream-deep);
  font-family: var(--ec-display);
  font-weight: 600;
  font-size: 1.15rem;
}
.card-blesta > .card-header a, .card-blesta > .card-header .btn-link { color: var(--ec-ink-soft) !important; }
.card-steps { background: var(--ec-paper); }
.card-steps a, .card-steps a strong { color: var(--ec-ink-soft); }
.card-steps a.active, .card-steps a.active strong { color: var(--ec-clay); }
.card-steps .fa-chevron-right, .card-steps .fa-chevron-down { color: var(--ec-cream-deep); }
.portal-box .card { transition: border-color .2s; }
.portal-box .card:hover { border-color: var(--ec-clay-soft); }
.portal-box i, .portal-box .bi, .portal-box .fas { color: var(--ec-clay) !important; opacity: .85; }
.well, .whois .well { background: var(--ec-cream) !important; border-color: var(--ec-cream-deep) !important; border-radius: .9rem; }
.whois { background-image: none !important; }
.table { color: var(--ec-ink); }
.table thead th { border-bottom-color: var(--ec-cream-deep); font-weight: 600; }
.table td, .table th { border-top-color: var(--ec-cream-deep); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(239, 232, 219, .35); }

/* ---- Buttons: clay for the main action, outline for the rest ---- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary, .btn-success, .btn-info {
  background: var(--ec-clay) !important; border-color: var(--ec-clay) !important; color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
.btn-primary:focus, .btn-success:focus, .btn-info:focus {
  background: var(--ec-clay-dark) !important; border-color: var(--ec-clay-dark) !important; color: #fff !important;
}
.btn-light, .btn-default, .btn-secondary, .btn-outline-secondary {
  background: var(--ec-paper) !important; border: 1px solid rgba(20, 18, 16, .18) !important; color: var(--ec-ink) !important;
}
.btn-light:hover, .btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover { border-color: rgba(20, 18, 16, .4) !important; }
.btn-danger { border-radius: 999px; }
.btn-group > .btn:not(:first-child), .btn-group > .btn:not(:last-child) { border-radius: 999px; }
.btn-group { gap: .4rem; }
.badge-success, .badge-info, .badge-primary { background: var(--ec-jade); }
.pagination .page-item.active .page-link { background: var(--ec-ink) !important; border-color: var(--ec-ink) !important; }
.page-link { color: var(--ec-ink); }

/* ---- Forms ---- */
.form-control, .custom-select {
  border-color: rgba(20, 18, 16, .18);
  border-radius: .7rem;
  background-color: var(--ec-paper);
  color: var(--ec-ink);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--ec-clay);
  box-shadow: 0 0 0 .2rem rgba(194, 83, 46, .15);
}
.custom-control-input:checked ~ .custom-control-label::before { background: var(--ec-clay); border-color: var(--ec-clay); }
input[type=checkbox], input[type=radio] { accent-color: var(--ec-clay); }

/* ---- Alerts: same meaning, softer look ---- */
.alert { border-radius: .9rem; border-width: 1px; }
.alert-info { background: #eef4f2; border-color: #cfe1dc; color: #134a43; }
.alert-success { background: #eaf4ee; border-color: #cbe4d4; color: #0f5e36; }

/* ---- Footer: help channels + legal links, like the landing page ---- */
.row.footer hr { display: none; }
.ec-footer {
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--ec-cream-deep);
  color: var(--ec-ink-soft);
  font-size: .9rem;
  text-align: center;
}
.ec-footer .ec-help { font-size: 1rem; color: var(--ec-ink); margin-bottom: .6rem; }
.ec-footer .ec-help a { font-weight: 600; }
.ec-footer .ec-legal a { color: var(--ec-ink-soft); }
.ec-footer .ec-powered { margin-top: 1.2rem; font-size: .75rem; color: #8a8278; }
.ec-footer .ec-powered a { color: #8a8278; }

/* ---- Portal home + order steps polish ---- */
.ec-intro {
  background: var(--ec-paper);
  border: 1px solid var(--ec-cream-deep);
  border-radius: 1rem;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.ec-intro h4 { font-size: 1.6rem; margin-bottom: .5rem; }
.portal-box a, .portal-box a:hover { text-decoration: none; }
.portal-box .card { height: calc(100% - 1.5rem); margin-bottom: 1.5rem; }
.portal-box .card-body { text-align: left; padding: 1.5rem; }
.portal-box h4 { font-size: 1.25rem; color: var(--ec-ink); margin-bottom: .4rem; }
.portal-box p { color: var(--ec-ink-soft); margin-bottom: 0; }
.card-steps, .card-steps .card-body, .card-steps > div { background: var(--ec-paper) !important; }
.card-steps .text-success, .card-steps .fa-check-circle, .card-steps .fa-arrow-circle-right,
.card-steps .fa-chevron-circle-right, .card-steps .fa-caret-circle-right { color: var(--ec-clay) !important; }
.whois, .whois .row, .card-body.whois { background: transparent !important; }
.card-steps a.active:before { color: var(--ec-clay) !important; }
.portal-box, .portal-box .card .card-body { text-align: left !important; }
.portal-box .card, .portal-box .card:hover { background-color: var(--ec-paper) !important; }

/* Plan pages (hosting, email, design): choosing a plan is the main action. The sidebar's "Continuar al pago"
   stays secondary here, so nobody checks out with only the domain by accident (found in the 2026-09-24 test purchase). */
.plugin-orderclient-main-packages button.btn-light:has(.fa-shopping-cart) {
  background: var(--ec-clay) !important; border-color: var(--ec-clay) !important; color: #fff !important;
}
.plugin-orderclient-main-packages button.btn-light:has(.fa-shopping-cart):hover {
  background: var(--ec-clay-dark) !important; border-color: var(--ec-clay-dark) !important;
}
.plugin-orderclient-main-packages a.btn-success[href*="/order/cart/"] {
  background: var(--ec-paper) !important; border: 1px solid rgba(20, 18, 16, .25) !important; color: var(--ec-ink) !important;
}