/*!
Theme Name: club bancario
Theme URI: http://underscores.me/
Author: weblogica
Author URI: http://weblogica.mx
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: membresias
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

club bancario is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# Membresias Landing
	- Colors & Variables
	- Layout
	- Header & Navigation
	- Hero Section
	- Sections & Cards
	- Plans
	- Calculator
	- FAQ
	- CTA & Footer
	- Responsive
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/* ========== MEMBRESIAS LANDING STYLES ========== */

:root {
	--blue: #09284d;
	--blue-dark: #003c91;
	--blue-soft: #eaf3ff;
	--green: #39aee8;
	--green-dark: #1688c2;
	--text: #637086;
	--muted: #667085;
	--white: #ffffff;
	--gray: #f6f8fb;
	--border: #e6eaf0;
	--shadow: 0 20px 45px rgba(0, 35, 90, 0.12);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	/* font-family: "Poppins", sans-serif; */
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif !important;
	color: var(--text);
	background: var(--white);
	line-height: 1.6;
}
    
a {
	text-decoration: none;
	color: inherit;
}

.container {
	width: min(1180px, 92%);
	margin: auto;
}

.topbar {
	 color: #09284d;
	font-size: 14px;
	padding: 10px 0;
	text-align: center;
}

header {
	color: #536178;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.nav {
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.logo {
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.5px;
}

.logo span {
	color: #b8ffca;
}

.menu {
	display: flex;
	gap: 24px;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	list-style: none;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	padding: 14px 24px;
	font-weight: 700;
	cursor: pointer;
	transition: 0.25s ease;
	font-family: inherit;
}

.btn-green {
	background: var(--green);
	color: #09284d;
	
}
.text-center{
	text-align: center;
}
.w-100{
	width: 100%;
}
.btn-green:hover {
	background: var(--green-dark);
	transform: translateY(-2px);
}
#planes{
	background: linear-gradient(135deg, #061f3f, #0a315f);
    
}
#planes .section-head h1, #planes .section-head h2, #planes .section-head h3, #planes .section-head h4, #planes .section-head h5, #planes .section-head h6{
	color: #fff;
}
.plan .btn-green{
    background: #09284d;
    color: #fff;
}
.plan.featured .btn-green{
    background: var(--green);
    color: #09284d;
}
.btn-white {
	background: white;
	color: var(--blue);
}
section{
	background-color: var(--white);
}
.text-uppercase{
	text-transform: uppercase;
}
.hero {
	color: white;
	padding: 90px 0 70px;
	overflow: hidden;
	background-size: cover;
	position: relative;
	min-height: 600px;
	height: 90vh;
}
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	inset: 0;
	background: linear-gradient(90deg, rgba(5, 25, 51, .96) 0%, rgba(5, 25, 51, .84) 44%, rgba(5, 25, 51, .22) 100%);
	z-index: 1;
}
.hero .container {
	position: relative;
	z-index: 2;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}
.hero h1{
	color: #fff;
	font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -.055em;
    margin: 0;
}
.hero .post-content h1:last-of-type{
	margin-bottom: 20px;
}	
.badge {
	display: inline-flex;
	color: #79cdf3;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
}
h1,h2,h3,h4,h5,h6,strong {
color:#10213c;
}
h1 {
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1.02;
	letter-spacing: -2px;
	margin-bottom: 22px;
}
h2 {
	font-size: clamp(2.1rem, 4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    margin: 0;
}
.hero p {
	font-size: 18px;
	opacity: 0.94;
	max-width: 620px;
	margin-bottom: 30px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 32px;
}

.post-content ul{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
}

.post-content ul li {
	padding: 9px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

.hero-card {
	position: relative;
	background: white;
	color: var(--text);
	border-radius: 34px;
	padding: 26px;
	box-shadow: var(--shadow);
}

.promo-card {
	background: var(--blue-soft);
	border-radius: 26px;
	padding: 26px;
	min-height: 430px;
	display: grid;
	align-content: center;
	gap: 18px;
	position: relative;
	overflow: hidden;
}

.promo-card::before,
.promo-card::after {
	content: "";
	position: absolute;
	border-radius: 999px;
	opacity: 0.9;
}

.promo-card::before {
	width: 230px;
	height: 230px;
	background: var(--green);
	right: -80px;
	top: -60px;
}

.promo-card::after {
	width: 170px;
	height: 170px;
	background: var(--blue);
	left: -70px;
	bottom: -55px;
}

.promo-inner {
	position: relative;
	z-index: 1;
	background: white;
	border-radius: 24px;
	padding: 28px;
	box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08);
}

.promo-inner h2 {
	font-size: 34px;
	line-height: 1.08;
	margin-bottom: 12px;
	letter-spacing: -1px;
}

.promo-inner strong {
	color: var(--green-dark);
}

section {
	padding: 86px 0;
}

.section-head {
	color:#ced9e6;
	width: 100%;
	max-width: 760px;
	margin: 0 auto 36px auto;
}

.eyebrow {
	color: var(--green-dark);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	margin-bottom: 10px;
}

h2 {
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.12;
	letter-spacing: -1.2px;
	margin-bottom: 14px;
}

.section-head p {
	color: #ced9e6;
	font-size: 17px;
}

.cards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.card {
	background: white;
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 24px 18px;
	box-shadow: 0 14px 35px rgba(16,33,60,.06);
}
   
   
.card p:first-child {
	width: 46px;
	height: 46px;
	border-radius: 16px;
	background: var(--blue-soft);
	display: grid;
	place-items: center;
	font-size: 24px;
	margin-bottom: 14px;
}

.card h3 {
	color: #000;
	font-size: 20px;
	margin-bottom: 8px;
}

.card,
.card li {
	color: var(--muted);
	font-size: 15px;
}

.gray {
	background: var(--gray);
}

.list-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.pill {
	background: white;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
}

.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.plan {
	background: white;
	border: 1px solid var(--border);
	border-radius: 28px;
	padding: 26px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
}

.plan.featured {
	border: 2px solid var(--green);
	transform: translateY(-8px);
}

.facility-grid{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.facility {
    min-height: 245px;
    border-radius: 24px;
    padding: 26px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    position: relative;
}
.facility:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 25%, rgba(4, 22, 45, .88) 100%);
}
.content{
	position: relative;
	z-index: 1;
}
.tag {
	display: inline-block;
	background: var(--green);
	color: white;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	margin-bottom: 14px;
}

.plan h3 {
	font-size: 24px;
	line-height: 1.1;
	margin-bottom: 8px;
}

.plan .ideal {
	color: var(--muted);
	min-height: 48px;
	margin-bottom: 18px;
}

.price {
	display: grid;
	gap: 8px;
	margin: 18px 0;
}

.price strong {
	display: block;
	font-size: 26px;
}

.price span {
	color: var(--muted);
	font-size: 13px;
}

.calculator {
	background: linear-gradient(135deg, var(--blue), var(--blue-dark));
	color: white;
	border-radius: 34px;
	padding: 34px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
	box-shadow: var(--shadow);
}

.calc-box {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 26px;
	padding: 24px;
}
.class-grid{
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.class-card {
    border: 1px solid #e6ebf2;
    border-radius: 20px;
    padding: 24px;
    background: #fff;
    text-align: center;
	justify-content: center;
}
.class-card p:nth-of-type(1) {
width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #e8f6fd;
    color: #1688c2;
    font-size: 1.35rem;
    margin: auto auto 16px auto;
    text-align: center;

}
label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
}

select,
input {
	width: 100%;
	border: none;
	border-radius: 14px;
	padding: 15px;
	font-family: inherit;
	margin-bottom: 18px;
	outline: none;
	font-size: 15px;
}

.summary {
	background: white;
	color: var(--text);
	border-radius: 26px;
	padding: 26px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--border);
	padding: 12px 0;
	gap: 18px;
}

.summary-row span:first-child {
	color: var(--muted);
}

.total {
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding-top: 18px;
	margin-top: 6px;
}

.total strong {
	font-size: 34px;
	color: var(--green-dark);
}

.faq {
	display: grid;
	gap: 14px;
}

details {
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 18px 20px;
	background: white;
}

summary {
	cursor: pointer;
	font-weight: 800;
}

details p {
	margin-top: 12px;
	color: var(--muted);
}

.cta {
background: linear-gradient(90deg, #39aee8, #79cdf3);
    color: #08284d;
	color: white;
	text-align: center;
	padding: 80px 0;
}

.cta h2 {
	color: white;
	max-width: 740px;
	margin: 0 auto 16px;
}

.cta p {
	max-width: 680px;
	margin: 0 auto 28px;
	opacity: 0.9;
}

footer {
	background: #081626;
	color: rgba(255, 255, 255, 0.75);
	padding: 26px 0;
	text-align: center;
	font-size: 14px;
}

@media (max-width: 980px) {
	.menu {
		display: none;
	}

	.hero-grid,
	.calculator {
		grid-template-columns: 1fr;
	}

	.cards,
	.plans,
	.list-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.cards,
	.plans,
	.list-grid {
		grid-template-columns: 1fr;
	}

	.hero {
		padding-top: 58px;
	}

	.hero-actions .btn {
		width: 100%;
	}

	.promo-card {
		min-height: auto;
	}

	section {
		padding: 62px 0;
	}
}