/* =========================================================
   WATTCASA — sistema visual
   Mobile-first. Sin frameworks. Custom properties para todo
   lo que se pueda necesitar ajustar desde un solo sitio.
   ========================================================= */

:root {
	/* Color */
	--wc-green: #16A34A;
	--wc-green-dark: #166534;
	--wc-green-deep: #0F3D24;
	--wc-amber: #F59E0B;
	--wc-text: #111827;
	--wc-text-soft: #4B5563;
	--wc-bg: #FFFFFF;
	--wc-bg-soft: #F7F9F8;
	--wc-border: #E5E7EB;

	/* Tipografía */
	--wc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Escala de espaciado (base 8px) */
	--wc-space-1: 0.5rem;
	--wc-space-2: 0.75rem;
	--wc-space-3: 1rem;
	--wc-space-4: 1.5rem;
	--wc-space-5: 2rem;
	--wc-space-6: 3rem;
	--wc-space-7: 4.5rem;
	--wc-space-8: 6rem;

	/* Layout */
	--wc-container: 1180px;
	--wc-radius-s: 8px;
	--wc-radius-m: 14px;
	--wc-radius-l: 20px;
	--wc-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -12px rgba(17, 24, 39, 0.10);
}

/* Reset ligero */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	font-family: var(--wc-font);
	color: var(--wc-text);
	background: var(--wc-bg);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

.wc-skip-link {
	position: absolute; left: -999px; top: 0; z-index: 200;
	background: var(--wc-green-deep); color: #fff; padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--wc-radius-s) 0;
}
.wc-skip-link:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--wc-green);
	outline-offset: 2px;
}

.wc-container {
	max-width: var(--wc-container);
	margin-inline: auto;
	padding-inline: var(--wc-space-3);
}

@media (min-width: 640px) {
	.wc-container { padding-inline: var(--wc-space-5); }
}

/* Tipografía de secciones */
.wc-section { padding-block: var(--wc-space-7); }
.wc-section--soft { background: var(--wc-bg-soft); }

.wc-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--wc-space-3); margin-bottom: var(--wc-space-4);
}

.wc-section__title {
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 var(--wc-space-4);
}

.wc-link {
	color: var(--wc-green-dark);
	font-weight: 600;
	white-space: nowrap;
}
.wc-link:hover { color: var(--wc-green); }

/* Botones */
.wc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0.85rem 1.5rem;
	border-radius: var(--wc-radius-s);
	font-weight: 600;
	font-size: 0.95rem;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	border: 1px solid transparent;
}
.wc-btn--primary {
	background: var(--wc-green);
	color: #fff;
}
.wc-btn--primary:hover { background: var(--wc-green-dark); }
.wc-btn--secondary {
	background: transparent;
	color: var(--wc-green-dark);
	border-color: var(--wc-border);
}
.wc-btn--secondary:hover { border-color: var(--wc-green); background: var(--wc-bg-soft); }

/* =========================================================
   HEADER
   ========================================================= */
.wc-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--wc-border);
}

.wc-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 64px;
}

.wc-logo {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em;
	color: var(--wc-text);
}
.wc-logo__mark {
	display: inline-flex; color: var(--wc-green);
}
.wc-logo__text span { color: var(--wc-green); }
.wc-logo__text--footer { color: #fff; font-size: 1.3rem; }
.wc-logo__text--footer span { color: #6EE7A0; }

.wc-nav__list {
	display: none;
}

@media (min-width: 900px) {
	.wc-nav__list {
		display: flex;
		gap: var(--wc-space-4);
	}
	.wc-nav__list a {
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--wc-text-soft);
		padding-block: 0.4rem;
		border-bottom: 2px solid transparent;
	}
	.wc-nav__list a:hover {
		color: var(--wc-text);
		border-bottom-color: var(--wc-green);
	}
}

.wc-header__actions { display: flex; align-items: center; gap: var(--wc-space-1); }

.wc-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: transparent; border: none; border-radius: var(--wc-radius-s);
	color: var(--wc-text);
}
.wc-icon-btn:hover { background: var(--wc-bg-soft); }

.wc-menu-toggle { display: inline-flex; flex-direction: column; gap: 4px; }
@media (min-width: 900px) { .wc-menu-toggle { display: none; } }

.wc-menu-toggle__bar {
	width: 18px; height: 2px; background: var(--wc-text); border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.wc-menu-toggle[aria-expanded="true"] .wc-menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wc-menu-toggle[aria-expanded="true"] .wc-menu-toggle__bar:nth-child(2) { opacity: 0; }
.wc-menu-toggle[aria-expanded="true"] .wc-menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menú móvil: en mobile, wc-nav se convierte en panel desplegable */
@media (max-width: 899.98px) {
	.wc-nav {
		position: fixed; inset: 64px 0 0 0;
		background: #fff;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		border-top: 1px solid var(--wc-border);
	}
	.wc-nav.is-open { transform: translateX(0); }
	.wc-nav__list {
		display: flex; flex-direction: column;
		padding: var(--wc-space-4) var(--wc-space-3);
	}
	.wc-nav__list a {
		display: block;
		padding: var(--wc-space-3) 0;
		font-size: 1.05rem; font-weight: 600;
		border-bottom: 1px solid var(--wc-border);
		color: var(--wc-text);
	}
}

.wc-search-box { display: none; border-top: 1px solid var(--wc-border); background: var(--wc-bg-soft); }
.wc-search-box.is-open { display: block; }
.wc-search-form {
	display: flex; gap: 0.5rem;
	max-width: var(--wc-container); margin: 0 auto; padding: var(--wc-space-3);
}
.wc-search-form input {
	flex: 1; padding: 0.65rem 0.9rem; border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius-s); font-size: 1rem; font-family: inherit;
}
.wc-search-form button {
	padding: 0.65rem 1.1rem; background: var(--wc-green); color: #fff;
	border: none; border-radius: var(--wc-radius-s); font-weight: 600;
}

/* =========================================================
   HERO
   ========================================================= */
.wc-hero {
	padding-block: var(--wc-space-7) var(--wc-space-6);
	background: linear-gradient(180deg, var(--wc-bg-soft) 0%, #fff 100%);
	overflow: hidden;
}

.wc-hero__inner {
	display: grid;
	gap: var(--wc-space-6);
	align-items: center;
}

@media (min-width: 960px) {
	.wc-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

.wc-hero__title {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 800;
	margin: 0 0 var(--wc-space-3);
	color: var(--wc-text);
}

.wc-hero__subtitle {
	font-size: 1.125rem;
	color: var(--wc-text-soft);
	max-width: 46ch;
	margin: 0 0 var(--wc-space-5);
}

.wc-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--wc-space-2); }

.wc-hero__visual { position: relative; }

.wc-hero__spark {
	width: 100%; height: auto;
	display: block;
}

.wc-hero__spark-line {
	stroke-dasharray: 520;
	stroke-dashoffset: 520;
	animation: wc-draw 1.4s 0.2s ease forwards;
}
@keyframes wc-draw { to { stroke-dashoffset: 0; } }

.wc-hero__badge {
	position: absolute; left: var(--wc-space-3); bottom: var(--wc-space-3);
	background: #fff; border: 1px solid var(--wc-border); box-shadow: var(--wc-shadow);
	border-radius: var(--wc-radius-m);
	padding: 0.75rem 1rem;
	display: flex; flex-direction: column; gap: 2px;
	max-width: 220px;
}
.wc-hero__badge-value { font-weight: 800; font-size: 1.1rem; color: var(--wc-green-dark); }
.wc-hero__badge-label { font-size: 0.8rem; color: var(--wc-text-soft); }

/* =========================================================
   CATEGORÍAS
   ========================================================= */
.wc-categories__grid {
	display: grid; gap: var(--wc-space-3);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .wc-categories__grid { grid-template-columns: repeat(3, 1fr); } }

.wc-category-card {
	display: flex; flex-direction: column; gap: 0.35rem;
	padding: var(--wc-space-4);
	background: var(--wc-bg-soft);
	border: 1px solid transparent;
	border-radius: var(--wc-radius-m);
	transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.wc-category-card:hover {
	border-color: var(--wc-green);
	background: #fff;
	transform: translateY(-2px);
}
.wc-category-card__icon { font-size: 1.6rem; }
.wc-category-card__title { font-weight: 700; }
.wc-category-card__desc { font-size: 0.875rem; color: var(--wc-text-soft); }

/* =========================================================
   TARJETAS DE ARTÍCULO (destacados / últimos)
   ========================================================= */
.wc-card-grid {
	display: grid; gap: var(--wc-space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .wc-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .wc-card-grid { grid-template-columns: repeat(3, 1fr); } }
.wc-card-grid--six { }

.wc-article-card {
	display: flex; flex-direction: column;
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius-m);
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.wc-article-card:hover { box-shadow: var(--wc-shadow); transform: translateY(-2px); }

.wc-article-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--wc-bg-soft); }
.wc-article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wc-article-card__media-placeholder {
	width: 100%; height: 100%;
	background: linear-gradient(135deg, #EAF6EE, #F7F9F8);
}

.wc-badge {
	position: absolute; top: 0.65rem; left: 0.65rem;
	background: var(--wc-green-deep); color: #fff;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
	padding: 0.3rem 0.6rem; border-radius: 999px;
}

.wc-article-card__body { padding: var(--wc-space-3) var(--wc-space-3) var(--wc-space-4); flex: 1; display: flex; flex-direction: column; }
.wc-article-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.4rem; }
.wc-article-card__excerpt { font-size: 0.9rem; color: var(--wc-text-soft); margin: 0 0 0.75rem; flex: 1; }
.wc-article-card__date { font-size: 0.78rem; color: #9CA3AF; }

/* =========================================================
   CALCULADORAS
   ========================================================= */
.wc-calculators__grid {
	display: grid; gap: var(--wc-space-3);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .wc-calculators__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .wc-calculators__grid { grid-template-columns: repeat(3, 1fr); } }

.wc-calc-card {
	position: relative;
	display: flex; flex-direction: column; gap: 0.35rem;
	padding: var(--wc-space-4);
	border: 1px solid var(--wc-border);
	border-radius: var(--wc-radius-m);
	background: #fff;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.wc-calc-card:hover { border-color: var(--wc-green); transform: translateY(-2px); }
.wc-calc-card__icon { font-size: 1.5rem; }
.wc-calc-card__title { font-weight: 700; }
.wc-calc-card__desc { font-size: 0.875rem; color: var(--wc-text-soft); }
.wc-calc-card--soon { opacity: 0.72; }
.wc-calc-card__tag {
	position: absolute; top: 0.75rem; right: 0.75rem;
	font-size: 0.7rem; font-weight: 700; color: var(--wc-amber);
	background: #FFF7E6; padding: 0.2rem 0.5rem; border-radius: 999px;
}

/* =========================================================
   EDITORIAL
   ========================================================= */
.wc-editorial { background: var(--wc-bg-soft); }
.wc-editorial__inner { max-width: 760px; }
.wc-editorial__text { font-size: 1.05rem; color: var(--wc-text-soft); }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.wc-newsletter { background: var(--wc-green-deep); color: #fff; }
.wc-newsletter__inner {
	display: grid; gap: var(--wc-space-4);
	align-items: center;
}
@media (min-width: 780px) { .wc-newsletter__inner { grid-template-columns: 1fr auto; } }

.wc-newsletter__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.35rem; }
.wc-newsletter__text { margin: 0; color: rgba(255,255,255,0.8); font-size: 0.95rem; }

.wc-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.wc-newsletter__form input {
	flex: 1; min-width: 220px;
	padding: 0.8rem 1rem; border-radius: var(--wc-radius-s);
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08); color: #fff;
	font-family: inherit; font-size: 0.95rem;
}
.wc-newsletter__form input::placeholder { color: rgba(255,255,255,0.6); }
.wc-newsletter__form .wc-btn--primary { background: #fff; color: var(--wc-green-deep); }
.wc-newsletter__form .wc-btn--primary:hover { background: var(--wc-bg-soft); }

/* =========================================================
   FOOTER
   ========================================================= */
.wc-footer { background: #0B2A1A; color: rgba(255,255,255,0.78); padding-top: var(--wc-space-7); }
.wc-footer__inner {
	display: grid; gap: var(--wc-space-5);
	grid-template-columns: 1fr;
	padding-bottom: var(--wc-space-6);
}
@media (min-width: 780px) {
	.wc-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.wc-footer__tagline { font-size: 0.9rem; margin-top: 0.5rem; color: rgba(255,255,255,0.6); max-width: 32ch; }
.wc-footer__col h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); margin: 0 0 var(--wc-space-2); }
.wc-footer__col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.wc-footer__col a:hover { color: #fff; }
.wc-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-block: var(--wc-space-3);
	font-size: 0.8rem; color: rgba(255,255,255,0.5);
}


/* =========================================================
   V3 — HOME EDITORIAL
   ========================================================= */
.wc-trust-strip{border-bottom:1px solid var(--wc-border);background:#fff}
.wc-trust-strip__grid{display:grid;grid-template-columns:1fr;padding-block:1rem}
.wc-trust-item{display:flex;align-items:baseline;gap:.55rem;padding:.55rem 0}
.wc-trust-item strong{color:var(--wc-green-dark);font-size:.92rem}
.wc-trust-item span{color:var(--wc-text-soft);font-size:.82rem}
@media(min-width:760px){.wc-trust-strip__grid{grid-template-columns:repeat(3,1fr)}.wc-trust-item{justify-content:center;border-right:1px solid var(--wc-border)}.wc-trust-item:last-child{border-right:0}}

.wc-section__eyebrow{font-size:.75rem;line-height:1;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-green-dark);margin-bottom:.9rem}
.wc-section__head--intro{display:grid;gap:1rem;align-items:end;margin-bottom:var(--wc-space-4)}
.wc-section__head--intro p{margin:0;color:var(--wc-text-soft);max-width:52ch}
@media(min-width:800px){.wc-section__head--intro{grid-template-columns:1.15fr .85fr}}

.wc-start{background:#fff}
.wc-start__grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:760px){.wc-start__grid{grid-template-columns:repeat(3,1fr)}}
.wc-start-card{display:flex;flex-direction:column;min-height:255px;padding:1.5rem;border:1px solid var(--wc-border);border-radius:var(--wc-radius-m);background:linear-gradient(180deg,#fff 0%,var(--wc-bg-soft) 100%);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.wc-start-card:hover{transform:translateY(-3px);border-color:#B7DCC4;box-shadow:var(--wc-shadow)}
.wc-start-card__num{font-size:.76rem;font-weight:800;letter-spacing:.08em;color:var(--wc-green);margin-bottom:2rem}
.wc-start-card h3{font-size:1.18rem;margin:0 0 .65rem;color:var(--wc-text)}
.wc-start-card p{font-size:.92rem;color:var(--wc-text-soft);margin:0 0 1.25rem}
.wc-start-card__link{margin-top:auto;font-size:.86rem;font-weight:700;color:var(--wc-green-dark)}

.wc-editorial__layout{display:grid;gap:2.25rem;align-items:start}
@media(min-width:860px){.wc-editorial__layout{grid-template-columns:1.05fr .95fr}}
.wc-editorial__points{display:grid;gap:.75rem}
.wc-editorial__points>div{display:flex;gap:.85rem;padding:1rem 1.1rem;background:#fff;border:1px solid var(--wc-border);border-radius:var(--wc-radius-m)}
.wc-editorial__points span{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:50%;background:#EAF6EE;color:var(--wc-green-dark);font-weight:800}
.wc-editorial__points p{margin:0;color:var(--wc-text-soft);font-size:.88rem}.wc-editorial__points strong{color:var(--wc-text)}

.wc-newsletter__kicker{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8BE3A9;margin-bottom:.55rem}
.wc-newsletter__soon{display:inline-flex;align-items:center;justify-content:center;padding:.78rem 1rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font-size:.84rem;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.06)}

/* V3 mobile polish */
@media(max-width:639px){
 .wc-hero{padding-block:3rem 2.5rem}
 .wc-hero__title{font-size:clamp(2.25rem,11vw,3.15rem)}
 .wc-hero__subtitle{font-size:1.05rem}
 .wc-hero__ctas{display:grid;grid-template-columns:1fr}
 .wc-hero__ctas .wc-btn{width:100%}
 .wc-categories__grid{grid-template-columns:1fr}
 .wc-category-card{padding:1.2rem}
 .wc-section{padding-block:3.4rem}
}