/*
Theme Name: Doce Pasos
Theme URI: https://docepasos.org
Author: Doce Pasos
Author URI: https://docepasos.org
Description: Theme para comunidades de recuperación de 12 pasos, enfocado en privacidad y software libre. Basado en Twenty Twenty-Four.
Version: 0.0.2
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: docepasos
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks

Doce Pasos WordPress Theme, (C) 2025
Doce Pasos is distributed under the terms of the GNU GPL.
*/

/*
 * Variables CSS principales
 */
:root {
	--wp--preset--color--primary: #2c5282;
	--wp--preset--color--secondary: #48bb78;
	--wp--preset--color--accent: #ed8936;
	--wp--preset--color--neutral: #4a5568;
	--wp--preset--color--light: #f7fafc;
	--wp--preset--color--dark: #1a202c;
	--wp--preset--color--white: #ffffff;
}

/*
 * Reset básico
 */
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1.6;
	color: var(--wp--preset--color--dark);
	background-color: var(--wp--preset--color--white);
}

/*
 * Tipografía
 */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/*
 * Links
 */
a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--wp--preset--color--secondary);
	text-decoration: underline;
}

/*
 * Botones
 */
.wp-block-button__link,
.wp-element-button {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: 0.75rem 1.5rem;
	border-radius: 0.375rem;
	border: none;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
	display: inline-block;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/*
 * Citas
 */
blockquote,
.wp-block-quote {
	border-left: 4px solid var(--wp--preset--color--secondary);
	padding: 1.5rem 2rem;
	margin: 2rem 0;
	background-color: var(--wp--preset--color--light);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--wp--preset--color--neutral);
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/*
 * Secciones de servicios
 */
.service-card {
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--light);
	border-radius: 0.5rem;
	padding: 2rem;
	margin-bottom: 2rem;
	transition: all 0.3s ease;
}

.service-card:hover {
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);
}

.service-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

/*
 * Comparativas
 */
.comparison-table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
	padding: 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--light);
}

.comparison-table th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.comparison-table tr:hover {
	background-color: var(--wp--preset--color--light);
}

.check-icon {
	color: var(--wp--preset--color--secondary);
	font-weight: bold;
}

.cross-icon {
	color: var(--wp--preset--color--accent);
	font-weight: bold;
}

/*
 * Header
 */
.site-header {
	background-color: var(--wp--preset--color--white);
	border-bottom: 2px solid var(--wp--preset--color--light);
	padding: 1rem 0;
}

.site-title {
	font-size: 2rem;
	font-weight: 700;
	margin: 0;
	color: var(--wp--preset--color--primary);
}

/*
 * Footer
 */
.site-footer {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--light);
	padding: 3rem 0 1rem;
	margin-top: 4rem;
}

.site-footer a {
	color: var(--wp--preset--color--light);
}

.site-footer a:hover {
	color: var(--wp--preset--color--secondary);
}

/*
 * Containers
 */
.content-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.hero-section {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%);
	color: var(--wp--preset--color--white);
	padding: 4rem 2rem;
	text-align: center;
	margin-bottom: 3rem;
}

.hero-section h1 {
	color: var(--wp--preset--color--white);
	font-size: 3rem;
	margin-bottom: 1rem;
}

/*
 * Corner Ribbon BETA
 */
.corner-ribbon {
	position: fixed;
	top: 30px;
	left: -50px;
	z-index: 9999;
	width: 200px;
	background: linear-gradient(135deg, #ed8936 0%, #c05621 100%);
	color: white;
	text-align: center;
	line-height: 1.3;
	padding: 8px 0;
	transform: rotate(-45deg);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.corner-ribbon-title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 2px;
}

.corner-ribbon-version {
	font-size: 9px;
	font-weight: 400;
	opacity: 0.9;
}

/* Ocultar ribbon en pantalles petites */
@media (max-width: 768px) {
	.corner-ribbon {
		display: none;
	}
}

/*
 * Utilidades
 */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.p-2 { padding: 2rem; }

/*
 * Responsive
 */
@media (max-width: 768px) {
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	
	.hero-section h1 {
		font-size: 2rem;
	}
	
	.service-card {
		padding: 1.5rem;
	}
}