/*
Theme Name:  ServidorWebChile
Description: Theme hijo de Twenty Twenty-Five para servidorwebchile.com — CFC Informática SpA
Template:    twentytwentyfive
Author:      CFC Informática SpA
Author URI:  https://cfcinformatic.cl
Version:     1.0.0
License:     GPL-2.0+
Text Domain: servidorwebchile
*/

/* ─── TIPOGRAFÍA Y BASE ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
	--swc-navy:   #0F1B2D;
	--swc-yellow: #FBBF24;
	--swc-yellow-hover: #F59E0B;
	--swc-sky:    #0EA5E9;
	--swc-slate:  #475569;
	--swc-light:  #F8FAFC;
	--swc-border: #E2E8F0;
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--swc-navy);
	background: #fff;
}

h1, h2, h3, h4, h5, h6,
.wp-block-site-title,
.wp-block-navigation a {
	font-family: 'Syne', sans-serif;
}

/* ─── HEADER / NAV ───────────────────────────────────────────────────────── */
.wp-block-template-part.header {
	background: var(--swc-navy);
}

header .wp-block-navigation a {
	color: rgba(255,255,255,.7) !important;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: color .2s;
}

header .wp-block-navigation a:hover {
	color: var(--swc-yellow) !important;
}

header .wp-block-site-title a {
	color: #fff !important;
	font-family: 'Syne', sans-serif;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
}

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.swc-hero {
	background: var(--swc-navy);
	padding: 80px 32px;
	text-align: center;
}

.swc-hero-badge {
	display: inline-block;
	background: rgba(251,191,36,.15);
	border: 1px solid rgba(251,191,36,.3);
	color: var(--swc-yellow);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 20px;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.swc-hero h1 {
	font-family: 'Syne', sans-serif;
	font-size: clamp(36px, 5vw, 58px);
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	letter-spacing: -1.5px;
	max-width: 700px;
	margin: 0 auto 20px;
}

.swc-hero h1 em {
	color: var(--swc-yellow);
	font-style: normal;
}

.swc-hero-sub {
	color: rgba(255,255,255,.6);
	font-size: 17px;
	max-width: 480px;
	margin: 0 auto 40px;
}

.swc-hero-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

/* ─── BOTONES ─────────────────────────────────────────────────────────────── */
.swc-btn-primary,
.wp-block-button.is-style-swc-primary .wp-block-button__link {
	background: var(--swc-yellow) !important;
	color: var(--swc-navy) !important;
	font-family: 'Syne', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 14px 28px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	border: none !important;
	transition: background .2s, transform .1s !important;
}
.swc-btn-primary:hover,
.wp-block-button.is-style-swc-primary .wp-block-button__link:hover {
	background: var(--swc-yellow-hover) !important;
	transform: translateY(-1px);
}

.swc-btn-outline,
.wp-block-button.is-style-swc-outline .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	font-family: 'Syne', sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	padding: 13px 27px !important;
	border-radius: 8px !important;
	border: 1.5px solid rgba(255,255,255,.3) !important;
	text-decoration: none !important;
	transition: border-color .2s !important;
}
.swc-btn-outline:hover,
.wp-block-button.is-style-swc-outline .wp-block-button__link:hover {
	border-color: rgba(255,255,255,.7) !important;
}

/* ─── STRIP DE URGENCIA ───────────────────────────────────────────────────── */
.swc-urgency-strip {
	background: var(--swc-yellow);
	padding: 14px 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}
.swc-urgency-strip p {
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--swc-navy);
	margin: 0;
}
.swc-urgency-strip a {
	background: var(--swc-navy);
	color: var(--swc-yellow);
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 5px;
	text-decoration: none;
	white-space: nowrap;
}

/* ─── STATS ──────────────────────────────────────────────────────────────── */
.swc-hero-stats {
	display: flex;
	gap: 40px;
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 32px;
	justify-content: center;
	flex-wrap: wrap;
}
.swc-stat-n {
	font-family: 'Syne', sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: var(--swc-yellow);
}
.swc-stat-l {
	font-size: 12px;
	color: rgba(255,255,255,.5);
	margin-top: 2px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* ─── SECCIONES ──────────────────────────────────────────────────────────── */
.swc-section-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--swc-sky);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.swc-section-title {
	font-family: 'Syne', sans-serif;
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 800;
	color: var(--swc-navy);
	letter-spacing: -.8px;
	line-height: 1.15;
	margin-bottom: 16px;
}

/* ─── FEATURES GRID ──────────────────────────────────────────────────────── */
.swc-features-section {
	background: var(--swc-light);
	padding: 72px 32px;
}

.swc-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-top: 48px;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.swc-feat {
	background: #fff;
	border: 1px solid var(--swc-border);
	border-radius: 12px;
	padding: 28px 24px;
}

.swc-feat-icon {
	width: 44px;
	height: 44px;
	background: #EFF6FF;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.swc-feat h3 {
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--swc-navy);
	margin-bottom: 8px;
}

.swc-feat p {
	font-size: 14px;
	color: #64748B;
	line-height: 1.6;
}

/* ─── PLANES ──────────────────────────────────────────────────────────────── */
.swc-plans-section {
	background: var(--swc-navy);
	padding: 80px 32px;
}

.swc-plans-section .swc-section-label { color: var(--swc-yellow); }
.swc-plans-section .swc-section-title { color: #fff; }
.swc-plans-section .swc-section-body  { color: rgba(255,255,255,.55); }

.swc-plans-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	max-width: 1000px;
	margin: 48px auto 0;
}

.swc-plan {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 32px 28px;
}

.swc-plan.featured {
	background: var(--swc-yellow);
	border-color: var(--swc-yellow);
}

.swc-plan-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255,255,255,.5);
	margin-bottom: 12px;
}
.swc-plan.featured .swc-plan-tag { color: rgba(15,27,45,.6); }

.swc-plan-price {
	font-family: 'Syne', sans-serif;
	font-size: 36px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -1px;
}
.swc-plan.featured .swc-plan-price { color: var(--swc-navy); }

.swc-plan-period {
	font-size: 13px;
	color: rgba(255,255,255,.4);
	margin-bottom: 24px;
}
.swc-plan.featured .swc-plan-period { color: rgba(15,27,45,.5); }

.swc-plan-list {
	list-style: none;
	padding: 0;
	margin-bottom: 28px;
}

.swc-plan-list li {
	font-size: 14px;
	color: rgba(255,255,255,.75);
	padding: 8px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid rgba(255,255,255,.07);
}
.swc-plan-list li:last-child { border-bottom: none; }
.swc-plan.featured .swc-plan-list li {
	color: rgba(15,27,45,.8);
	border-bottom-color: rgba(15,27,45,.1);
}

.swc-plan-list li::before {
	content: '✓';
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(14,165,233,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--swc-sky);
	flex-shrink: 0;
	line-height: 18px;
	text-align: center;
}
.swc-plan.featured .swc-plan-list li::before {
	background: rgba(15,27,45,.15);
	color: var(--swc-navy);
}

.swc-plan-btn {
	display: block;
	text-align: center;
	padding: 13px;
	border-radius: 8px;
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	background: rgba(255,255,255,.1);
	color: #fff;
	transition: background .2s;
}
.swc-plan.featured .swc-plan-btn {
	background: var(--swc-navy);
	color: var(--swc-yellow);
}
.swc-plan-btn:hover { background: rgba(255,255,255,.2); }
.swc-plan.featured .swc-plan-btn:hover { background: #1a2d45; }

/* ─── NOSOTROS ────────────────────────────────────────────────────────────── */
.swc-about-cards {
	background: #F1F5F9;
	border-radius: 16px;
	padding: 32px;
}

.swc-about-card {
	display: flex;
	gap: 16px;
	padding: 16px;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 12px;
	border: 1px solid var(--swc-border);
	align-items: flex-start;
}
.swc-about-card:last-child { margin-bottom: 0; }

.swc-about-card-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--swc-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.swc-about-card h4 {
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--swc-navy);
	margin-bottom: 2px;
}
.swc-about-card p {
	font-size: 13px;
	color: #64748B;
	margin: 0;
}

/* ─── CTA BANNER ─────────────────────────────────────────────────────────── */
.swc-cta-banner {
	background: var(--swc-sky);
	padding: 56px 32px;
	text-align: center;
}
.swc-cta-banner h2 {
	font-family: 'Syne', sans-serif;
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.5px;
	margin-bottom: 10px;
}
.swc-cta-banner p {
	color: rgba(255,255,255,.85);
	font-size: 16px;
	margin-bottom: 28px;
}
.swc-cta-banner a {
	background: #fff;
	color: var(--swc-sky);
	font-family: 'Syne', sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 14px 28px;
	border-radius: 8px;
	text-decoration: none;
	transition: opacity .2s;
}
.swc-cta-banner a:hover { opacity: .9; }

/* ─── DISPONIBILIDAD ──────────────────────────────────────────────────────── */
.swc-availability {
	margin: 16px 0;
}
.swc-availability-bar {
	background: rgba(255,255,255,.15);
	border-radius: 99px;
	height: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}
.swc-availability-fill {
	background: var(--swc-yellow);
	height: 100%;
	border-radius: 99px;
}
.swc-availability-text {
	font-size: 13px;
	color: rgba(255,255,255,.6);
}
.swc-availability-text strong { color: var(--swc-yellow); }

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
.wp-block-template-part.footer {
	background: #080F1A;
}

footer .wp-block-site-title a,
footer p,
footer .wp-block-navigation a {
	color: rgba(255,255,255,.4) !important;
	font-size: 12px;
}

footer .wp-block-site-title a {
	font-family: 'Syne', sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: #fff !important;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.swc-hero { padding: 56px 20px; }
	.swc-hero-stats { gap: 24px; }
	.swc-urgency-strip { flex-direction: column; text-align: center; }
	.swc-features-section,
	.swc-plans-section { padding: 48px 20px; }
	.swc-plans-grid { grid-template-columns: 1fr; }
}