/*
Theme Name: IC Challenge
Theme URI: https://reto.intimidadconsciente.es
Author: Farah
Description: Mini-site one page bilingüe (ES/EN) basado en Underscores (_s), creado para el reto técnico de Studio60. Marca: Intimidad Consciente / Despertando Pasiones Ardientes.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.5
Text Domain: ic-challenge
*/

/* =========================================================
   1. Reset básico
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* =========================================================
   2. Design tokens — marca Intimidad Consciente
   ========================================================= */
:root {
	--ic-color-bg: #080808;
	--ic-color-bg-alt: #111111;
	--ic-color-text: #f5f5f5;
	--ic-color-text-muted: #b8b8b8;
	--ic-color-accent: #cc0000;
	--ic-font-heading: 'Oswald', sans-serif;
	--ic-font-display: 'Playfair Display', serif;
	--ic-font-body: 'Lato', sans-serif;
	--ic-container-width: 1140px;
	--ic-gap: 1.5rem;
}

/* =========================================================
   3. Tipografía base
   ========================================================= */
body {
	font-family: var(--ic-font-body);
	background-color: var(--ic-color-bg);
	color: var(--ic-color-text);
	line-height: 1.6;
}
h1, h2, h3 {
	font-family: var(--ic-font-heading);
	line-height: 1.2;
	margin: 0 0 1rem;
}
.ic-hero h1 {
	font-family: var(--ic-font-display);
	font-size: clamp(2rem, 5vw, 3.5rem);
}

/* =========================================================
   4. Layout base
   ========================================================= */
.ic-container {
	max-width: var(--ic-container-width);
	margin: 0 auto;
	padding: 0 var(--ic-gap);
}
.ic-section {
	padding: 4rem 0;
}
.ic-grid {
	display: grid;
	gap: var(--ic-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.ic-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   5. Header / navegación
   ========================================================= */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ic-gap);
	padding: 1.5rem var(--ic-gap);
	border-bottom: 1px solid var(--ic-color-bg-alt);
}
.site-title {
	font-family: var(--ic-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 1.25rem;
}
.main-navigation ul {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.main-navigation a:hover {
	color: var(--ic-color-accent);
}
.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--ic-color-accent);
	color: var(--ic-color-text);
	padding: 0.5rem 1rem;
	cursor: pointer;
}
.lang-switcher ul {
	display: flex;
	gap: 0.5rem;
	text-transform: uppercase;
	font-size: 0.85rem;
}
@media (max-width: 767px) {
	.menu-toggle { display: inline-block; }
	.main-navigation ul { display: none; flex-direction: column; width: 100%; }
	.main-navigation.toggled ul { display: flex; }
}

/* =========================================================
   6. Botones
   ========================================================= */
.ic-btn {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	background-color: var(--ic-color-accent);
	color: #fff;
	font-family: var(--ic-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 2px;
	border: none;
	cursor: pointer;
}
.ic-btn:hover {
	opacity: 0.9;
}

/* =========================================================
   7. Footer
   ========================================================= */
.site-footer {
	padding: 2rem var(--ic-gap);
	border-top: 1px solid var(--ic-color-bg-alt);
	text-align: center;
	color: var(--ic-color-text-muted);
}
.footer-links ul {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 0.5rem;
}

/* =========================================================
   8. Placeholders de desarrollo
   (se eliminan al completar los Puntos 3-5)
   ========================================================= */
.ic-placeholder {
	border: 1px dashed var(--ic-color-accent);
	padding: 1rem;
	color: var(--ic-color-text-muted);
	font-style: italic;
}

/* =========================================================
   9. Cards (Servicios / Proyectos) — Punto 4
   ========================================================= */
.ic-card {
	background-color: var(--ic-color-bg-alt);
	padding: 2rem;
	border-radius: 4px;
}
.ic-card__icono img,
.ic-card__imagen img {
	margin-bottom: 1rem;
	border-radius: 4px;
}
.ic-card__titulo {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}
.ic-card__texto p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   10. Refinamiento de layout — Punto 5
   ========================================================= */

/* Hero a pantalla completa */
.ic-hero {
	min-height: 70vh;
	display: flex;
	align-items: center;
}
.ic-hero__imagen {
	margin-top: 2rem;
	max-width: 320px;
}

/* Sobre nosotros: texto + foto en 2 columnas */
.ic-sobre__contenido {
	display: grid;
	gap: var(--ic-gap);
	align-items: center;
}
@media (min-width: 768px) {
	.ic-sobre__contenido {
		grid-template-columns: 2fr 1fr;
	}
}
.ic-sobre__foto img {
	border-radius: 4px;
}

/* Cards: borde sutil para distinguirlas del fondo */
.ic-card {
	border: 1px solid rgba(255, 255, 255, 0.06);
}