/*
Theme Name:     GQ Child Theme
Theme URI:      https://guadronquijano.com
Description:    Núcleo modular para proyectos de Guadrón Quijano S.A.S. de C.V.
Author:         Guadrón Quijano S.A.S. de C.V.
Author URI:     https://guadronquijano.com
Template:       Divi
Version:        1.0.0
Text Domain:    gqchild
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Tags:           lightweight, modular, optimized, clean
*/


/* ==========================================================================
   ALAS DORADAS — SISTEMA DE DISEÑO
   Color, tipografía y botones. Todo componente usa el prefijo .ad-
   para no depender de los estilos de Divi.
   ========================================================================== */
 
 
/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
 
:root {
	/* Paleta autorizada (Brandbook 24 ENE 24) — el cian no se usa en web */
	--ad-amarillo:   #fdc42d; /* Pantone 123 C */
	--ad-naranja:    #ff9e18; /* Pantone 1375 C */
	--ad-negro:      #222222; /* Pantone Neutral Black C */
	--ad-azul:       #0072b1; /* Pantone 307 C */
	--ad-blanco:     #ffffff;
	--ad-gris-claro: #cfceca; /* Pantone 420 C */
	--ad-gris-topo:  #8d807a; /* Pantone 409 C */
 
	/* Roles */
	--ad-fondo:                         var(--ad-blanco);
	--ad-fondo-alterno:                 rgba(207, 206, 202, 0.3); /* gris-claro al 30% */
	--ad-overlay:                       rgba(34, 34, 34, 0.72);   /* negro al 72% */
	--ad-texto:                         var(--ad-negro);
	--ad-texto-secundario:              var(--ad-gris-topo);      /* solo 24px+ */
	--ad-texto-sobre-oscuro:            var(--ad-blanco);
	--ad-texto-sobre-oscuro-secundario: var(--ad-gris-claro);
	--ad-acento:                        var(--ad-amarillo);       /* títulos y enlaces sobre oscuro */
	--ad-enlace:                        var(--ad-azul);
	--ad-linea:                         var(--ad-gris-claro);
	--ad-borde-campo:                   var(--ad-gris-topo);
 
	/* Botones
	   Sobre claro: opción 1 (negro). Para la opción 2 cambiar a
	   --ad-boton-claro: var(--ad-amarillo); --ad-boton-claro-texto: var(--ad-negro);
	   --ad-boton-claro-hover: var(--ad-negro); --ad-boton-claro-hover-texto: var(--ad-blanco); */
	--ad-boton-claro:             var(--ad-negro);
	--ad-boton-claro-texto:       var(--ad-blanco);
	--ad-boton-claro-hover:       var(--ad-amarillo);
	--ad-boton-claro-hover-texto: var(--ad-negro);
	--ad-boton-oscuro:             var(--ad-amarillo);
	--ad-boton-oscuro-texto:       var(--ad-negro);
	--ad-boton-oscuro-hover:       var(--ad-blanco);
	--ad-boton-oscuro-hover-texto: var(--ad-negro);
	--ad-boton-flecha:             var(--ad-naranja);
 
	/* Tipografía — base 16px, Minor Third (1.2) en escritorio */
	--ad-font: "Poppins", Arial, sans-serif;
	--ad-t-h1:    2.488rem;
	--ad-t-h2:    2.074rem;
	--ad-t-h3:    1.728rem;
	--ad-t-h4:    1.2rem;
	--ad-t-body:  1rem;
	--ad-t-small: 0.833rem;
	--ad-t-micro: 0.694rem;
 
	--ad-lh-titulo: 1.2;
	--ad-lh-h4:     1.3;
	--ad-lh-texto:  1.5;
 
	--ad-tracking-titulo:  -0.01em;
	--ad-tracking-control:  0.02em;
	--ad-tracking-rotulo:   1px;
 
	/* Formas y espaciado */
	--ad-radio: 2px;
	--ad-seccion-y: 32px;
	--ad-seccion-x: 24px;
	--ad-transicion: 0.2s ease;
}
 
/* Móvil — Major Second (1.125) para los pasos sobre la base */
@media (max-width: 767px) {
	:root {
		--ad-t-h1: 1.802rem;
		--ad-t-h2: 1.602rem;
		--ad-t-h3: 1.424rem;
		--ad-t-h4: 1.125rem;
	}
}
 
 
/* --------------------------------------------------------------------------
   2. BASE (dentro de las secciones del sistema)
   -------------------------------------------------------------------------- */
 
.ad-sec {
	font-family: var(--ad-font);
	font-size: var(--ad-t-body);
	line-height: var(--ad-lh-texto);
	font-weight: 400;
	color: var(--ad-texto);
	background: var(--ad-fondo);
	padding: var(--ad-seccion-y) var(--ad-seccion-x);
}
 
.ad-sec--alterno { background: var(--ad-fondo-alterno); }
.ad-sec--oscuro  { background: var(--ad-negro); color: var(--ad-texto-sobre-oscuro); }
 
.ad-sec h1, .ad-sec h2, .ad-sec h3, .ad-sec h4, .ad-sec p {
	font-family: var(--ad-font);
	margin: 0;
	padding: 0;
	color: inherit;
}
 
.ad-sec p + p { margin-top: 1em; }
 
.ad-sec a { color: var(--ad-enlace); text-decoration: underline; transition: color var(--ad-transicion); }
.ad-sec--oscuro a { color: var(--ad-acento); text-decoration: none; }
 
.ad-sec :focus-visible { outline: 2px solid var(--ad-negro); outline-offset: 2px; }
.ad-sec--oscuro :focus-visible,
.ad-hero :focus-visible,
.ad-acc :focus-visible { outline-color: var(--ad-amarillo); }
 
 
/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
 
.ad-h1 { font-size: var(--ad-t-h1); line-height: var(--ad-lh-titulo); font-weight: 500; letter-spacing: var(--ad-tracking-titulo); }
.ad-h2 { font-size: var(--ad-t-h2); line-height: var(--ad-lh-titulo); font-weight: 500; letter-spacing: var(--ad-tracking-titulo); }
.ad-h3 { font-size: var(--ad-t-h3); line-height: var(--ad-lh-titulo); font-weight: 400; }
.ad-h4 { font-size: var(--ad-t-h4); line-height: var(--ad-lh-h4);     font-weight: 500; }
.ad-body  { font-size: var(--ad-t-body);  line-height: var(--ad-lh-texto); font-weight: 400; }
.ad-small { font-size: var(--ad-t-small); line-height: var(--ad-lh-texto); font-weight: 500; letter-spacing: var(--ad-tracking-control); }
.ad-micro { font-size: var(--ad-t-micro); line-height: var(--ad-lh-texto); font-weight: 500; letter-spacing: var(--ad-tracking-rotulo); text-transform: uppercase; }
 
/* Antetítulo: small en mayúsculas */
.ad-antetitulo { font-size: var(--ad-t-small); line-height: var(--ad-lh-texto); font-weight: 500; letter-spacing: var(--ad-tracking-rotulo); text-transform: uppercase; }
 
.ad-resalte { color: var(--ad-acento); }           /* segunda frase en títulos sobre oscuro */
.ad-texto-secundario { color: var(--ad-texto-secundario); }
.ad-cita::before { content: "\201C"; }
.ad-cita::after  { content: "\201D"; }
 
.ad-sec .ad-titulo-seccion { margin-bottom: 24px; }
 
 
/* --------------------------------------------------------------------------
   4. BOTONES
   -------------------------------------------------------------------------- */
 
.ad-btn,
.ad-sec a.ad-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ad-font);
	font-size: var(--ad-t-small);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var(--ad-tracking-control);
	padding: 12px 22px;
	border: 2px solid transparent;
	border-radius: var(--ad-radio);
	text-decoration: none;
	cursor: pointer;
	background: var(--ad-boton-claro);
	color: var(--ad-boton-claro-texto);
	transition: background-color var(--ad-transicion), color var(--ad-transicion), border-color var(--ad-transicion);
}
 
.ad-btn:hover,
.ad-sec a.ad-btn:hover {
	background: var(--ad-boton-claro-hover);
	color: var(--ad-boton-claro-hover-texto);
}
 
.ad-btn__flecha { font-weight: 400; color: var(--ad-boton-flecha); transition: color var(--ad-transicion), transform var(--ad-transicion); }
.ad-btn:hover .ad-btn__flecha { color: currentColor; transform: translateX(3px); }
 
/* Sobre oscuro (hero, portafolio, footer) */
.ad-btn--oscuro,
.ad-sec a.ad-btn--oscuro {
	background: var(--ad-boton-oscuro);
	color: var(--ad-boton-oscuro-texto);
}
.ad-btn--oscuro:hover,
.ad-sec a.ad-btn--oscuro:hover {
	background: var(--ad-boton-oscuro-hover);
	color: var(--ad-boton-oscuro-hover-texto);
}
.ad-btn--oscuro .ad-btn__flecha { color: currentColor; }
 
/* Contorno */
.ad-btn--contorno,
.ad-sec a.ad-btn--contorno {
	background: transparent;
	color: var(--ad-negro);
	border-color: var(--ad-negro);
}
.ad-btn--contorno:hover,
.ad-sec a.ad-btn--contorno:hover {
	background: var(--ad-negro);
	color: var(--ad-blanco);
}
 
.ad-btn--contorno-oscuro,
.ad-sec a.ad-btn--contorno-oscuro {
	background: transparent;
	color: var(--ad-blanco);
	border-color: var(--ad-blanco);
}
.ad-btn--contorno-oscuro:hover,
.ad-sec a.ad-btn--contorno-oscuro:hover {
	background: var(--ad-blanco);
	color: var(--ad-negro);
}
 
 
/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
 
.ad-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 560px;
	padding: 96px var(--ad-seccion-x);
	text-align: center;
	background-color: var(--ad-negro);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	font-family: var(--ad-font);
}
 
.ad-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ad-overlay);
}
 
.ad-hero__contenido { position: relative; max-width: 720px; }
.ad-hero__antetitulo { color: var(--ad-texto-sobre-oscuro); margin-bottom: 10px; }
.ad-hero__titulo { color: var(--ad-texto-sobre-oscuro); margin-bottom: 12px; }
.ad-hero__texto { color: var(--ad-texto-sobre-oscuro-secundario); margin-bottom: 24px; }
 
@media (max-width: 767px) {
	.ad-hero { min-height: 440px; padding: 72px var(--ad-seccion-x); }
}
 
 
/* --------------------------------------------------------------------------
   6. CARACTERÍSTICAS
   -------------------------------------------------------------------------- */
 
.ad-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px 32px;
}
 
.ad-feature { display: flex; gap: 15px; align-items: flex-start; }
 
.ad-feature__icono { flex: 0 0 32px; width: 32px; height: 32px; }
.ad-feature__icono svg {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: var(--ad-naranja);
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
 
.ad-feature__titulo { margin-bottom: 6px; }
 
 
/* --------------------------------------------------------------------------
   7. PORTAFOLIO (acordeón de imágenes)
   -------------------------------------------------------------------------- */
 
.ad-acc { display: flex; min-height: 420px; font-family: var(--ad-font); }
 
.ad-acc__item {
	position: relative;
	flex: 1;
	display: flex;
	align-items: flex-end;
	background-color: var(--ad-negro);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: flex var(--ad-transicion);
}
 
.ad-acc__item + .ad-acc__item { border-left: 1px solid var(--ad-negro); }
 
.ad-acc__item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ad-overlay);
}
 
/* Abierto: el primero por defecto; con el cursor encima, el ítem en hover */
.ad-acc__item:first-child { flex: 2.2; }
.ad-acc:hover .ad-acc__item { flex: 1; }
.ad-acc:hover .ad-acc__item:hover { flex: 2.2; }
 
.ad-acc__cuerpo { position: relative; z-index: 1; padding: 24px; }
.ad-acc__titulo { color: var(--ad-acento); }
.ad-acc__texto { color: var(--ad-texto-sobre-oscuro); max-width: 320px; margin: 8px 0 20px; }
 
/* Texto y botón solo en el ítem abierto */
.ad-acc__detalle { display: none; }
.ad-acc__item:first-child .ad-acc__detalle { display: block; }
.ad-acc:hover .ad-acc__item .ad-acc__detalle { display: none; }
.ad-acc:hover .ad-acc__item:hover .ad-acc__detalle { display: block; }
 
@media (max-width: 767px) {
	.ad-acc { flex-direction: column; min-height: 0; }
	.ad-acc__item,
	.ad-acc__item:first-child,
	.ad-acc:hover .ad-acc__item,
	.ad-acc:hover .ad-acc__item:hover { flex: none; min-height: 240px; }
	.ad-acc__item + .ad-acc__item { border-left: 0; border-top: 1px solid var(--ad-negro); }
	.ad-acc__item .ad-acc__detalle,
	.ad-acc:hover .ad-acc__item .ad-acc__detalle { display: block; }
}
 
 
/* --------------------------------------------------------------------------
   8. TEXTO Y ETIQUETAS
   -------------------------------------------------------------------------- */
 
.ad-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
 
.ad-etiqueta {
	display: inline-block;
	font-size: var(--ad-t-small);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var(--ad-tracking-control);
	padding: 4px 10px;
	color: var(--ad-negro);
	border: 1px solid var(--ad-negro);
	border-radius: var(--ad-radio);
}
 
.ad-divisor { border: 0; border-top: 1px solid var(--ad-linea); margin: 16px 0; }
 
 
/* --------------------------------------------------------------------------
   9. BANDA DE CONTACTO Y CAMPOS
   -------------------------------------------------------------------------- */
 
.ad-banda {
	background: var(--ad-naranja);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	align-items: start;
}
 
.ad-banda__intro { color: var(--ad-texto); max-width: 420px; }
 
.ad-form { background: var(--ad-fondo); padding: 24px; display: grid; gap: 12px; }
.ad-form__titulo { color: var(--ad-texto); }
 
.ad-label {
	display: block;
	font-size: var(--ad-t-small);
	font-weight: 500;
	color: var(--ad-texto);
	margin-bottom: 4px;
}
 
.ad-campo {
	width: 100%;
	font-family: var(--ad-font);
	font-size: var(--ad-t-body);
	line-height: var(--ad-lh-texto);
	color: var(--ad-texto);
	background: var(--ad-fondo);
	border: 1px solid var(--ad-borde-campo);
	border-radius: var(--ad-radio);
	padding: 8px 12px;
	box-sizing: border-box;
}
 
.ad-campo:focus { outline: 2px solid var(--ad-negro); outline-offset: 1px; }
textarea.ad-campo { min-height: 96px; resize: vertical; }
 
 
/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
 
.ad-footer {
	background: var(--ad-negro);
	color: var(--ad-texto-sobre-oscuro);
	font-family: var(--ad-font);
	padding: var(--ad-seccion-y) var(--ad-seccion-x) 0;
}
 
.ad-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	padding-bottom: 28px;
}
 
.ad-footer__titulo { color: var(--ad-texto-sobre-oscuro); margin-bottom: 12px; }
.ad-footer__texto { color: var(--ad-texto-sobre-oscuro-secundario); max-width: 360px; margin-bottom: 12px; }
 
.ad-footer a:not(.ad-btn) { color: var(--ad-acento); text-decoration: none; }
.ad-footer a:not(.ad-btn):hover { text-decoration: underline; }
 
.ad-footer__suscripcion { display: flex; gap: 8px; margin-top: 8px; }
.ad-footer__suscripcion .ad-campo { flex: 1; }
 
.ad-footer__barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 0;
	border-top: 1px solid var(--ad-gris-topo);
	font-size: var(--ad-t-small);
	color: var(--ad-texto-sobre-oscuro-secundario);
}
 
.ad-redes { display: flex; gap: 10px; }
 
.ad-footer .ad-redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--ad-texto-sobre-oscuro-secundario);
	border-radius: var(--ad-radio);
	color: var(--ad-texto-sobre-oscuro-secundario);
	transition: color var(--ad-transicion), border-color var(--ad-transicion);
}
 
.ad-footer .ad-redes a:hover { color: var(--ad-amarillo); border-color: var(--ad-amarillo); text-decoration: none; }
.ad-redes svg { width: 14px; height: 14px; fill: currentColor; }