/*
Theme Name: Cepas
Theme URI: https://gestoriacepas.com
Description: Tema hijo de Betheme para Gestoria Cepas.
Author: Gestoria Cepas
Template: betheme
Version: 1.1.0
Text Domain: cepas
*/

/* ---------------------------------------------------------------
   Tipografia: Google Fonts se carga desde functions.php.
   Poppins para titulares y logotipo (geometrica, redondeada, como
   el rotulo CEPAS). Inter para el texto (legible, profesional).
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Variables de marca. Estimadas del banner CEPAS (logo + Allianz).
   Cambiar aqui afecta a todo el sitio. Ajustar en cuanto tengamos
   el archivo de logo original con los codigos exactos.
   --------------------------------------------------------------- */
:root {
	--cepas-azul: #1b3b5f;         /* isotipo "G" */
	--cepas-azul-oscuro: #122a44;
	--cepas-azul-claro: #3f6690;
	--cepas-carbon: #4d4d4f;       /* rotulo "CEPAS" */
	--cepas-gris-texto: #6e6f71;   /* linea "Gestoria Administrativa y Seguros" */
	--cepas-texto: #2b2f33;
	--cepas-suave: #f5f7f9;
	--cepas-borde: #e1e6ea;
	--cepas-blanco: #ffffff;

	--cepas-fuente-titulos: "Poppins", "Century Gothic", sans-serif;
	--cepas-fuente-texto: "Inter", -apple-system, "Segoe UI", sans-serif;

	--cepas-radio: 10px;
	--cepas-sombra: 0 8px 24px rgba(18, 42, 68, 0.08);
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */
body {
	font-family: var(--cepas-fuente-texto);
	color: var(--cepas-texto);
}

h1, h2, h3, h4, h5, h6,
.cepas-logo-text {
	font-family: var(--cepas-fuente-titulos);
	color: var(--cepas-carbon);
	font-weight: 700;
}

a { color: var(--cepas-azul); }
a:hover { color: var(--cepas-azul-claro); }

/* ---------------------------------------------------------------
   Betheme pone texto blanco por defecto dentro de ".hover_color"
   (be.css: ".hover_color, .hover_color a, ... h6 a { color:#fff }"),
   pensado para tarjetas con fondo oscuro. Las tarjetas "Por que
   elegir Cepas" de Inicio usan esa clase con fondo BLANCO, asi que
   el titulo (h5, ya oscuro por la regla h1-h6 de mas abajo) se veia
   bien pero el parrafo de descripcion heredaba el blanco y quedaba
   invisible. Se fuerza el color de texto normal en los parrafos.
   --------------------------------------------------------------- */
.hover_color p { color: var(--cepas-gris-texto) !important; }

.cepas-eyebrow {
	display: inline-block;
	font-family: var(--cepas-fuente-texto);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cepas-azul);
	margin-bottom: 0.75rem;
}

/* ---------------------------------------------------------------
   Botones
   --------------------------------------------------------------- */
.cepas-btn,
.wp-block-button.cepas-btn-primario .wp-block-button__link {
	display: inline-block;
	background: var(--cepas-azul);
	color: var(--cepas-blanco) !important;
	font-family: var(--cepas-fuente-titulos);
	font-weight: 600;
	padding: 0.9em 1.8em;
	border-radius: var(--cepas-radio);
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
.cepas-btn:hover,
.wp-block-button.cepas-btn-primario .wp-block-button__link:hover {
	background: var(--cepas-azul-claro);
	transform: translateY(-1px);
}

.wp-block-button.cepas-btn-secundario .wp-block-button__link {
	display: inline-block;
	background: transparent;
	color: var(--cepas-azul) !important;
	font-family: var(--cepas-fuente-titulos);
	font-weight: 600;
	padding: 0.85em 1.7em;
	border: 2px solid var(--cepas-azul);
	border-radius: var(--cepas-radio);
	text-decoration: none;
	transition: all 0.2s ease;
}
.wp-block-button.cepas-btn-secundario .wp-block-button__link:hover {
	background: var(--cepas-azul);
	color: var(--cepas-blanco) !important;
}

/* ---------------------------------------------------------------
   Secciones generales
   --------------------------------------------------------------- */
.cepas-seccion { padding: 5rem 0; }
.cepas-seccion-suave { background: var(--cepas-suave); }
.cepas-seccion-oscura {
	background: var(--cepas-azul-oscuro);
	color: rgba(255, 255, 255, 0.85);
}
.cepas-seccion-oscura h1,
.cepas-seccion-oscura h2,
.cepas-seccion-oscura h3 { color: var(--cepas-blanco); }

/* ---------------------------------------------------------------
   En la portada nuestro propio hero hace de cabecera: se oculta la
   barra de titulo "Inicio / Home" que pone Betheme por defecto.
   --------------------------------------------------------------- */
body.home #Subheader { display: none; }

/* ---------------------------------------------------------------
   Cabecera. Betheme reserva 250px pensados para una cabecera
   transparente superpuesta sobre una imagen; sin esa opcion
   configurada en su panel el menu queda sin fondo ni contraste.
   Se fuerza una cabecera solida y estatica, sencilla y legible.
   --------------------------------------------------------------- */
#Header,
#Top_bar {
	min-height: 0 !important;
	background: var(--cepas-blanco) !important;
	position: relative !important;
}
#Top_bar { border-bottom: 1px solid var(--cepas-borde); }
#Top_bar #menu > ul > li > a { color: var(--cepas-carbon) !important; }
#Top_bar #menu > ul > li > a:hover,
#Top_bar #menu > ul > li.current-menu-item > a { color: var(--cepas-azul) !important; }
.secondary_menu_wrapper { display: none; }

/* ---------------------------------------------------------------
   Cabecera de tamano fijo: Betheme muestra la cabecera grande
   (logo a 120px) al cargar la pagina y la encoge al hacer scroll
   (clase .is-sticky, logo mas pequeno) — ese cambio de tamano se
   veia como un salto/parpadeo. Se fuerza el tamano SIEMPRE igual,
   este o no la clase .is-sticky presente: el "logo-sticky" es el
   mismo archivo que "logo-main" (no hay logo sticky distinto
   configurado en Theme Options), asi que basta con fijar un solo
   tamano de contenedor e imagen para los dos casos. El
   comportamiento de fijar la barra arriba al hacer scroll
   (position:fixed + sombra) lo sigue gestionando Betheme igual que
   antes; solo el tamano deja de cambiar.

   El centrado vertical del logo se hace con box-sizing:border-box +
   height + line-height iguales en ".logo"/"#logo" (mismo truco que ya
   funcionaba antes de duplicar el tamano del logo). NO se usa flexbox
   en ".top_bar_left" (el contenedor que agrupa logo + menu): se probo
   y cambiaba tambien como se distribuyen horizontalmente el logo y el
   menu entre si (la agrupacion del menu junto al boton "Agende su
   cita" se abria/descuadraba) — Pedro lo detecto y pidio volver a la
   distribucion original. El centrado vertical se hace solo dentro de
   cada elemento (logo, enlaces del menu), sin tocar el contenedor que
   los reparte horizontalmente.
   --------------------------------------------------------------- */
#Top_bar { height: 90px !important; }
#Top_bar .logo,
#Top_bar #logo,
#Top_bar .custom-logo-link,
#Top_bar.is-sticky .logo,
#Top_bar.is-sticky #logo,
#Top_bar.is-sticky .custom-logo-link {
	box-sizing: border-box !important;
	height: 90px !important;
	line-height: 90px !important;
	padding: 0 !important;
}
/* Betheme sigue fijando su propia altura a "#logo" en modo sticky desde
   un <style> suyo que carga despues de este archivo (gana la pugna de
   especificidad/orden aunque el selector sea identico). En vez de
   perseguir esa regla, se centra con flexbox en dos niveles — SOLO en
   estos elementos hoja (ninguno es antecesor compartido con
   ".menu_wrapper", asi que no afecta a como se reparte el menu):
     - ".logo" centra a "#logo" dentro de si mismo (sin esto, "#logo"
       quedaba pegado arriba porque ".logo" es block, no centra hijos
       por defecto).
     - "#logo" centra a la imagen dentro de si mismo: si la imagen
       (70px) no cabe en la caja que Betheme le deje (50-60px), el
       desbordamiento queda repartido igual arriba y abajo en vez de
       empujar la imagen hacia un lado. */
#Top_bar .logo,
#Top_bar #logo,
#Top_bar .custom-logo-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#Top_bar img.logo-main,
#Top_bar img.logo-sticky,
#Top_bar img.logo-mobile {
	/* Betheme fija un "height" en linea por JS segun data-height: hay
	   que forzar "height" (no solo max-height) para ganarle. */
	height: 70px !important;
	max-height: 70px !important;
	width: auto !important;
}
#Top_bar .menu > li > a,
#Top_bar.is-sticky .menu > li > a:not(.zzz):not(.zzz):not(.zzz):not(.zzz) {
	/* 25px arriba/abajo (en vez de 10px) para centrar el mismo bloque
	   de texto (40px: 5+30+5) dentro de la barra de 90px, ahora que el
	   logo es mas grande. 25+5+30+5+25 = 90.

	   Esto pisa DOS reglas propias de Betheme con !important para el
	   estilo de menu "highlight" (el que se eligio para el hover, ver
	   mas arriba) en modo sticky — la mas fuerte es
	   ".menu-highlight:not(.header-fixed):not(.header-simple)
	   #Top_bar.is-sticky .menu > li > a" (1 ID + 5 clases). Para ganar
	   sin depender de clases reales (que podrian cambiar si se vuelve
	   a tocar el estilo del menu) se rellena la especificidad con
	   ":not(.zzz)" repetido — cada uno suma una clase a la
	   especificidad sin afectar a que elementos coincide (".zzz" no
	   existe en ningun elemento real). */
	margin: 25px 0 !important;
	padding: 5px 0 !important;
}
#Top_bar .menu > li > a span,
#Top_bar.is-sticky .menu > li > a:not(.zzz):not(.zzz):not(.zzz):not(.zzz) span { line-height: 30px !important; }
#Top_bar .top_bar_row_second { display: none !important; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.cepas-hero {
	background: linear-gradient(135deg, var(--cepas-azul-oscuro) 0%, var(--cepas-azul) 100%);
	padding: 6rem 0;
	color: var(--cepas-blanco);
}
.cepas-hero h1 { color: var(--cepas-blanco); font-size: clamp(2rem, 4vw, 3rem); }
.cepas-hero p { color: rgba(255, 255, 255, 0.85); font-size: 1.15rem; }
.cepas-hero .cepas-btn-secundario .wp-block-button__link {
	color: var(--cepas-blanco) !important;
	border-color: rgba(255, 255, 255, 0.6);
}
.cepas-hero .cepas-btn-secundario .wp-block-button__link:hover {
	background: var(--cepas-blanco);
	color: var(--cepas-azul) !important;
	border-color: var(--cepas-blanco);
}

/* ---------------------------------------------------------------
   Tarjetas de servicio
   --------------------------------------------------------------- */
.cepas-tarjeta {
	background: var(--cepas-blanco);
	border: 1px solid var(--cepas-borde);
	border-radius: var(--cepas-radio);
	padding: 2.2rem 1.8rem;
	height: 100%;
	box-shadow: var(--cepas-sombra);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cepas-tarjeta:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(18, 42, 68, 0.14);
}
.cepas-tarjeta .cepas-icono {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: rgba(27, 59, 95, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.2rem;
	font-size: 1.5rem;
}
.cepas-tarjeta h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.cepas-tarjeta p { color: var(--cepas-gris-texto); font-size: 0.95rem; }

/* ---------------------------------------------------------------
   Cifras / confianza
   --------------------------------------------------------------- */
.cepas-cifra {
	text-align: center;
}
.cepas-cifra .numero {
	font-family: var(--cepas-fuente-titulos);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--cepas-azul);
	display: block;
	line-height: 1.1;
}
.cepas-cifra .etiqueta {
	color: var(--cepas-gris-texto);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------
   Franja de socios (Allianz, etc.)
   --------------------------------------------------------------- */
.cepas-franja-socios {
	background: var(--cepas-blanco);
	border-top: 1px solid var(--cepas-borde);
	border-bottom: 1px solid var(--cepas-borde);
	padding: 2rem 0;
}
.cepas-franja-socios img { max-height: 40px; width: auto; opacity: 0.85; }

/* ---------------------------------------------------------------
   Llamada a la accion (pide cita)
   --------------------------------------------------------------- */
.cepas-cta {
	background: var(--cepas-azul);
	color: var(--cepas-blanco);
	border-radius: var(--cepas-radio);
	padding: 3rem;
	text-align: center;
}
.cepas-cta h2 { color: var(--cepas-blanco); }
.cepas-cta .wp-block-button .wp-block-button__link {
	background: var(--cepas-blanco);
	color: var(--cepas-azul) !important;
}
.cepas-cta .wp-block-button .wp-block-button__link:hover {
	background: var(--cepas-suave);
}

/* ---------------------------------------------------------------
   Reserva de citas (Google Calendar embebido)
   --------------------------------------------------------------- */
.cepas-calendario-cita {
	border: 1px solid var(--cepas-borde);
	border-radius: var(--cepas-radio);
	overflow: hidden;
	box-shadow: var(--cepas-sombra);
}
.cepas-calendario-cita iframe {
	display: block;
	width: 100%;
	min-height: 700px;
	border: 0;
}

/* ---------------------------------------------------------------
   Preguntas frecuentes
   --------------------------------------------------------------- */
.cepas-faq details {
	border-bottom: 1px solid var(--cepas-borde);
	padding: 1.2rem 0;
}
.cepas-faq summary {
	font-family: var(--cepas-fuente-titulos);
	font-weight: 600;
	cursor: pointer;
	color: var(--cepas-carbon);
}
.cepas-faq details[open] summary { color: var(--cepas-azul); }
.cepas-faq p { margin-top: 0.8rem; color: var(--cepas-gris-texto); }

@media (max-width: 768px) {
	.cepas-seccion { padding: 3rem 0; }
	.cepas-hero { padding: 4rem 0; }
	.cepas-cta { padding: 2rem 1.2rem; }
}