/*
 * inicio.css
 * Portada con la misma línea minimalista de Cosso: tipografía grande y
 * atrevida (Sora en mayúsculas con tracking), mucho espacio en
 * blanco, un solo color de acento por sección. Controla: hero, categorías
 * destacadas, productos destacados, propuesta de valor y CTA final.
 */

/* ─── HERO / SLIDER — ancho completo real, franja de texto abajo ───
   Nota: se llama "saes-home-hero" (no "saes-hero") para no chocar con la
   clase .saes-hero que ya usa plugin-saes-electronica-core. */
.saes-home-hero {
	position: relative;
	background: var(--color-secundario);
	width: 100%;
}

.saes-home-hero__slides {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}
.saes-home-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.saes-home-hero__slide--activo {
	opacity: 1;
	position: relative;
}
.saes-home-hero__foto {
	display: block;
	width: 100%;
	height: 100%;
}
.saes-home-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Flechas y puntos — ocultos por defecto vía [hidden], main.js los muestra
   solo si hay más de un slide */
.saes-home-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: var(--radio-full);
	background: rgba(10, 15, 20, .35);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.saes-home-hero__nav:hover { background: rgba(10, 15, 20, .55); }
.saes-home-hero__nav--prev { left: var(--espacio-sm); }
.saes-home-hero__nav--next { right: var(--espacio-sm); }

.saes-home-hero__dots {
	position: absolute;
	bottom: var(--espacio-sm);
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: .5rem;
}
.saes-home-hero__dots button {
	width: 9px;
	height: 9px;
	border-radius: var(--radio-full);
	background: rgba(255,255,255,.5);
	border: none;
	padding: 0;
	cursor: pointer;
}
.saes-home-hero__dots button.saes-activo { background: #fff; }

.saes-home-hero__franja {
	background: linear-gradient(135deg, var(--color-secundario) 0%, var(--color-primario) 100%);
	position: relative;
}
.saes-home-hero__franja::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 15%, rgba(30, 136, 199, .4), transparent 55%);
}

/*
 * Variante sin foto (TODO en front-page.php): mientras no exista una imagen
 * real de instalación/producto de SAES ELECTRONICA, el hero es solo el
 * degradado técnico de abajo, con más aire vertical y una retícula sutil de
 * puntos (referencia visual a planos/diagramas de instalación) para que no
 * se vea como una sección vacía.
 */
.saes-home-hero--sin-foto .saes-home-hero__franja {
	padding-block: var(--espacio-2xl);
	background-image:
		radial-gradient(circle at 85% 15%, rgba(30, 136, 199, .4), transparent 55%),
		radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px),
		linear-gradient(135deg, var(--color-secundario) 0%, var(--color-primario) 100%);
	background-size: auto, 26px 26px, auto;
}
.saes-home-hero--sin-foto .saes-home-hero__franja::before { content: none; }
.saes-home-hero__contenido {
	position: relative;
	z-index: 2;
	max-width: 720px;
	padding-block: var(--espacio-xl);
}
.saes-home-hero__kicker {
	display: inline-block;
	color: var(--color-dorado);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: .8rem;
	margin-bottom: var(--espacio-md);
}
.saes-home-hero__titulo {
	color: #fff;
	font-family: var(--fuente-titulos);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: 1.02;
	font-size: clamp(2.4rem, 7vw + 1rem, 5rem);
	margin-bottom: var(--espacio-md);
}
.saes-home-hero__desc {
	color: #D6E3EE;
	font-size: 1.1rem;
	margin-bottom: var(--espacio-lg);
	max-width: 480px;
}
.saes-home-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-sm);
}
.saes-home-hero__acciones .boton {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .85rem;
	padding: 1.1rem 2rem;
}
.saes-home-hero__boton-claro {
	color: #fff;
	border-color: rgba(255,255,255,.5);
}
.saes-home-hero__boton-claro:hover {
	background: #fff;
	color: var(--color-secundario);
	border-color: #fff;
}

/* ─── SECCIÓN GENÉRICA ─── */
.saes-seccion-titulo {
	font-size: clamp(1.6rem, 3vw + 1rem, 2.5rem);
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin-bottom: 0;
}
.saes-seccion-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--espacio-xs);
	margin-bottom: var(--espacio-md);
	padding-bottom: var(--espacio-sm);
	border-bottom: 1px solid var(--color-borde);
}
.saes-seccion-header .boton-texto {
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .06em;
	font-weight: 700;
}

.saes-seccion-kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-primario);
	margin-bottom: .5rem;
}

/* ─── NUESTRA FILOSOFÍA (contenido real de marca, del catálogo oficial) ─── */
.saes-filosofia { padding-block: var(--espacio-2xl); }
.saes-filosofia__texto { max-width: 720px; margin-inline: auto; text-align: center; }
.saes-filosofia__texto h2 {
	font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem);
	text-transform: uppercase;
	letter-spacing: -.01em;
	line-height: 1.15;
}
.saes-filosofia__texto > p {
	color: var(--color-texto-suave);
	font-size: 1.05rem;
	margin-bottom: var(--espacio-md);
}
.saes-filosofia__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-sm);
	text-align: left;
}
.saes-filosofia__lista li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--color-texto-suave);
	font-size: .95rem;
}
.saes-filosofia__lista li::before {
	content: '✓';
	position: absolute;
	left: 0; top: 0;
	color: var(--color-primario);
	font-weight: 700;
}
.saes-filosofia__lista strong { color: var(--color-secundario); }

/* ─── QUIÉNES SOMOS ─── */
.saes-nosotros { padding-block: var(--espacio-2xl); background: var(--color-fondo-alterno); }
.saes-nosotros__header { text-align: center; margin-bottom: var(--espacio-lg); }
.saes-nosotros__header .saes-seccion-titulo { display: block; }

.saes-nosotros__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-lg);
	align-items: center;
	margin-bottom: var(--espacio-2xl);
}
/* Variante sin video institucional (Global Nails tenía un video real de
   marca en YouTube; SAES ELECTRONICA no tiene uno todavía, ver TODO en
   front-page.php) — se queda en una sola columna en vez de 2. */
.saes-nosotros__grid--sin-video { max-width: 760px; margin-inline: auto; }
.saes-nosotros__historia h3 {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: var(--espacio-sm);
}
.saes-nosotros__historia p {
	color: var(--color-texto-suave);
	margin-bottom: var(--espacio-sm);
}
.saes-nosotros__historia .boton-texto {
	font-weight: 700;
	text-transform: uppercase;
	font-size: .8rem;
	letter-spacing: .04em;
}

.saes-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radio-lg);
	overflow: hidden;
	box-shadow: var(--sombra-tarjeta);
}
.saes-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.saes-equipo { text-align: center; }
.saes-equipo h3 {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: .5rem;
}
.saes-equipo__intro {
	color: var(--color-texto-suave);
	max-width: 560px;
	margin: 0 auto var(--espacio-lg);
}
.saes-equipo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--espacio-md);
}
.saes-equipo__miembro img {
	width: 96px;
	height: 96px;
	border-radius: var(--radio-full);
	object-fit: cover;
	margin: 0 auto var(--espacio-xs);
	box-shadow: var(--sombra-sutil);
}
.saes-equipo__nombre {
	font-weight: 700;
	color: var(--color-secundario);
	margin: 0;
	font-size: .95rem;
}
.saes-equipo__cargo {
	color: var(--color-texto-suave);
	font-size: .8rem;
	margin: 0;
}

/* ─── CATEGORÍAS DESTACADAS (grid asimétrico, inspirado en Mazia) ─── */
.saes-categorias { padding-block: var(--espacio-2xl); }
.saes-categorias .saes-seccion-titulo { text-align: center; border: none; margin-bottom: var(--espacio-md); padding: 0; display: block; }

.saes-categorias__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-sm);
}

.saes-categoria {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.saes-categoria img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.saes-categoria:hover img { transform: scale(1.06); }
.saes-categoria::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(10,15,20,.7) 0%, transparent 55%);
}
.saes-categoria__nombre {
	position: absolute;
	left: var(--espacio-md);
	bottom: var(--espacio-md);
	color: #fff;
	font-family: var(--fuente-titulos);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 1.15rem;
	z-index: 2;
}
.saes-categoria--grande { grid-column: span 1; }

/* ─── PRODUCTOS DESTACADOS ─── */
.saes-destacados { padding-block: var(--espacio-2xl); }

.saes-destacados__grid.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--espacio-md) var(--espacio-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ─── PROPUESTA DE VALOR ─── */
.saes-valores { padding-block: var(--espacio-2xl); background: var(--color-fondo-alterno); }
.saes-valores__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--espacio-lg);
	text-align: center;
}
.saes-valor__icono { font-size: 2rem; display: block; margin-bottom: var(--espacio-sm); }
.saes-valor h3 {
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .5rem;
}
.saes-valor p { color: var(--color-texto-suave); font-size: .9rem; margin: 0; }

/* ─── CTA FINAL ─── */
.saes-cta-final { background: var(--color-acento); padding-block: var(--espacio-xl); margin-top: var(--espacio-2xl); }
.saes-cta-final__inner { text-align: center; color: #fff; max-width: 560px; margin-inline: auto; }
.saes-cta-final__inner h2 {
	color: #fff;
	font-size: clamp(1.5rem, 3vw + 1rem, 2.2rem);
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.saes-cta-final__inner p { color: rgba(255,255,255,.9); margin-bottom: var(--espacio-md); }
.saes-cta-final .boton-primario {
	background: #fff !important;
	color: var(--color-acento) !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .85rem;
}
.saes-cta-final .boton-primario:hover { background: var(--color-fondo-alterno) !important; }

@media (min-width: 768px) {
	.saes-categorias__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
	.saes-categoria--grande { grid-column: span 2; grid-row: span 2; }
	.saes-destacados__grid.products { grid-template-columns: repeat(4, 1fr); }
	.saes-valores__grid { grid-template-columns: repeat(4, 1fr); }
	.saes-equipo__grid { grid-template-columns: repeat(3, 1fr); max-width: 640px; margin-inline: auto; }
}

@media (min-width: 1024px) {
	.saes-nosotros__grid { grid-template-columns: 1fr 1fr; }
	.saes-nosotros__grid.saes-nosotros__grid--sin-video { grid-template-columns: 1fr; }
	.saes-filosofia__texto { text-align: left; }
	.saes-filosofia__lista { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Testimonios: tarjetas de texto desde el CPT saes_testimonio (Escritorio
   → Testimonios) — reemplaza el carrusel de embeds de Instagram real de
   Global Nails, que no aplica aquí sin cuenta/posts reales de SAES. ─── */
.saes-testimonios { padding-block: var(--espacio-2xl); background: var(--color-fondo-alterno); }
.saes-testimonios .saes-seccion-header { padding-inline: var(--contenedor-padding); }

.saes-testimonios__fila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espacio-sm);
	padding: var(--espacio-md) var(--contenedor-padding) var(--espacio-xs);
}

.saes-testimonio-tarjeta--texto {
	flex: 1 1 260px;
	background: #fff;
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-md);
	box-shadow: var(--sombra-sutil);
	padding: var(--espacio-md);
}
.saes-testimonio-tarjeta--texto .saes-testi-stars {
	color: var(--color-dorado);
	letter-spacing: .15em;
	margin-bottom: .5rem;
}
.saes-testimonio-tarjeta--texto p {
	color: var(--color-texto);
	font-size: .9rem;
	line-height: 1.6;
	margin-bottom: var(--espacio-sm);
}
.saes-testimonio-tarjeta--texto strong {
	display: block;
	font-size: .85rem;
	color: var(--color-secundario);
}
.saes-testimonio-tarjeta--texto span {
	font-size: .78rem;
	color: var(--color-texto-suave);
}