/*
Theme Name: Comunicación Efectiva
Description: Tema propio de Comunicación Efectiva, sin dependencias de pago. Replica el diseño del sitio anterior usando bloques nativos de WordPress.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: comunicacion-efectiva
*/

/* Base */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
	margin: 0;
	background: #fff url("../img/back_full2-min.jpg") no-repeat 0 0;
	-webkit-font-smoothing: antialiased;
}
.pagina-comunicacion { background-image: url("../img/back_services_com2.jpg"); }
.pagina-comunicacion-y-educacion-2 { background-image: url("../img/back_services_education2-1.jpg"); }
.pagina-diseno-y-comunicacion { background-image: url("../img/back_services_design2.jpg"); }
.pagina-comunicacion-digital-2 { background-image: url("../img/back_services_digital2.jpg"); }
img, video { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ce-saltar:focus { position: fixed; top: 8px; left: 8px; z-index: 300; width: auto; height: auto; clip-path: none; padding: 8px 14px; background: #fff; color: #333; }
.ce-contenedor { width: min(1100px, 100% - 40px); margin-inline: auto; }

/* Encabezado */
.ce-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; transition: box-shadow .2s; }
.admin-bar .ce-header { top: 32px; }
.ce-header-espacio { height: 104px; }
.ce-header.es-fijo { box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.ce-header__fila { display: flex; align-items: flex-start; justify-content: space-between; min-height: 104px; }
.ce-header.es-fijo .ce-header__fila { min-height: 72px; }
.ce-logo { display: block; line-height: 0; }
.ce-logo img { display: block; width: 221px; height: auto; transition: width .2s; }
.ce-header.es-fijo .ce-logo img { width: 161px; }
.ce-menu ul { display: flex; gap: 31px; margin: 0; padding: 0; list-style: none; }
.ce-menu a {
	display: block;
	padding: 28px 0 10px;
	border-top: 3px solid transparent;
	color: #333;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}
.ce-header.es-fijo .ce-menu a { padding-top: 22px; }
.ce-menu a:hover, .ce-menu a:focus-visible, .ce-menu .current-menu-item > a, .home .ce-menu li:first-child > a { color: #ff8c00; }
.ce-menu .current-menu-item > a, .home .ce-menu li:first-child > a { border-top-color: #ff8c00; }
.ce-menu__boton { display: none; width: 44px; height: 44px; margin-top: 14px; padding: 10px; border: 0; background: none; cursor: pointer; }
.ce-menu__boton span { display: block; height: 2px; margin: 5px 0; background: #333; }

/* Secciones */
.ce-seccion { position: relative; overflow: hidden; box-sizing: border-box; background-repeat: no-repeat; }
main { display: flow-root; }
.ce-solo-celular { display: none; }
.ce-servicios__iconos > *, .ce-clientes__logos > *, .ce-linea__botones > *, .ce-beneficios__lista > * { margin-block-start: 0; }

/* Inicio: portada */
@media (min-width: 783px) { .ce-hero { background-image: none !important; } }
.ce-hero { min-height: 604px; display: flex; align-items: flex-start; padding-top: 95px; box-sizing: border-box; }
.ce-hero .ce-hero__video { position: absolute; inset: 0; margin: 0; z-index: 0; }
.ce-hero__video video { width: 100%; height: 100%; object-fit: cover; }
.ce-hero__texto { position: relative; z-index: 1; width: min(1100px, 100% - 40px); margin-inline: auto; }
.ce-hero__titulo { margin: 0; color: #ff6600; font-size: 60px; font-weight: 700; line-height: 1.1; }
.ce-hero__subtitulo { margin: 0; color: #ff6600; font-size: 100px; font-weight: 300; line-height: 1; }
.ce-hero .ce-hero__parrafo { margin: 0; color: #333; font-size: 14px; line-height: 1.5; }

/* Inicio: quiénes somos */
.ce-quienes__capa { padding: 6px 25% 12px; background-repeat: no-repeat; background-position: left top !important; }
.ce-quienes > .ce-quienes__capa { max-width: none; }
.ce-quienes { min-height: max(677px, 49.6vw); box-sizing: border-box; padding: 80px 0 0; text-align: center; color: #fff; background-size: cover; background-position: center bottom !important; }
.ce-quienes :is(h2, h3, p) { color: #fff; }
.ce-quienes > * { max-width: 780px; margin-inline: auto; }
.ce-quienes > h3 { max-width: 1000px; }
.ce-quienes h2 { font-size: 36px; font-weight: 600; margin-block: 0 26px; }
.ce-quienes h3 { font-size: 25px; font-weight: 300; margin-block: 0 26px; }
.ce-quienes h3 + p { margin-top: 0; }
.ce-quienes p { font-size: 14px; line-height: 1.55; margin-block: 0 22px; }

/* Inicio: servicios */
.ce-servicios { min-height: max(708px, 51.8vw); box-sizing: border-box; padding: 120px 20px; text-align: center; background-size: cover; background-position: center; }
.ce-servicios > * { max-width: 1100px; margin-inline: auto; }
.ce-servicios h2 { margin-block: 0 8px; color: #657680; font-size: 36px; font-weight: 600; }
.ce-servicios h3 { margin-block: 0 22px; color: #85929a; font-size: 25px; font-weight: 300; }
.ce-servicios > p { color: #333; font-size: 14px; line-height: 1.55; }
.ce-servicios__iconos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.ce-servicios__iconos figure { margin: 0 0 14px; }
.ce-servicios__iconos img { width: 170px; }
.ce-servicios__iconos h4 { margin: 0; color: #657680; font-size: 18px; font-weight: 400; }

/* Inicio: líneas de servicio */
.ce-linea { min-height: max(704px, 51.5vw); box-sizing: border-box; display: flex; align-items: center; padding: 60px 20px; background-size: cover; background-position: center !important; }
.ce-linea__adentro { width: 100%; max-width: 1100px; margin-inline: auto; }
.ce-linea__texto { width: 49%; }
.ce-linea--derecha .ce-linea__texto { margin-left: 51%; }
.ce-linea h2 { margin: 0 0 22px; color: #333; font-size: 36px; font-weight: 600; }
.ce-linea h3 { margin: 0 0 6px; color: #657680; font-size: 25px; font-weight: 300; }
.ce-linea h3 + h2 { margin-top: 0; }
.ce-linea p { color: #333; font-size: 14px; line-height: 1.55; }
.ce-linea__botones { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-top: 34px; }
.ce-boton-icono { width: 116px; text-align: center; }
.ce-boton-icono figure { margin: 0 0 16px; }
.ce-boton-icono img { width: 70px; }

/* Botones */
.wp-block-button__link.wp-element-button {
	padding: 12px 14px;
	border-radius: 25px;
	background: #3ea88a;
	color: #fff;
	font-size: 13px;
	line-height: 1.25;
	text-decoration: none;
	transition: background .2s;
}
.wp-block-button__link.wp-element-button:hover, .wp-block-button__link.wp-element-button:focus-visible { background: #85c4b6; color: #fff; }
.ce-boton-icono .wp-block-buttons { justify-content: center; }

/* Inicio: clientes */
.ce-clientes { padding: 70px 20px; background: #f2f2f2; text-align: center; }
.ce-clientes h2 { margin: 0 0 31px; color: #808080; font-size: 36px; font-weight: 600; }
.ce-clientes__logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; max-width: 1100px; margin-inline: auto; }
.ce-clientes__logos figure { margin: 0; }
.ce-clientes__logos img { width: 100%; }

/* Páginas de servicio */
@media (min-width: 783px) { .ce-detalle { background-image: none !important; } }
.ce-detalle { min-height: 691px; box-sizing: border-box; display: flex; align-items: center; padding: 60px 20px 30px; background-size: cover; background-position: center top; }
.ce-detalle .wp-block-columns { width: 100%; align-items: center !important; gap: 30px; max-width: 980px; margin: 0 auto; }
.ce-detalle figure img { max-width: min(560px, 100%); }
.ce-detalle .wp-block-column:first-child { flex: 0 0 38%; }
.ce-detalle h2 { margin: 0 0 22px; color: #333; font-size: 36px; font-weight: 600; }
.ce-detalle p { color: #333; font-size: 14px; line-height: 1.55; }
.ce-detalle figure { margin: 0; text-align: center; }
.ce-beneficios { padding: 70px 20px 70px; text-align: center; }
.ce-beneficios h3 { margin: 0 0 30px; color: #657680; font-size: 25px; font-weight: 300; }
.ce-beneficios__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; max-width: 1140px; margin-inline: auto; }
.ce-beneficio { width: 199px; }
.ce-beneficio figure { margin: 0 0 16px; }
.ce-beneficio img { width: 183px; border-radius: 12px; }
.ce-beneficio p { margin: 0; color: #333; font-size: 14px; line-height: 1.45; }

/* Alto de cada sección en computador, igual al del sitio anterior para que el fondo de la página calce con el contenido. */
@media (min-width: 783px) {
	.pagina-comunicacion main > .ce-seccion:nth-child(1) { min-height: 693px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(2) { min-height: 467px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(3) { min-height: 691px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(4) { min-height: 447px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(5) { min-height: 723px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(6) { min-height: 446px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(7) { min-height: 717px; }
	.pagina-comunicacion main > .ce-seccion:nth-child(8) { min-height: 489px; }
	.pagina-comunicacion-y-educacion-2 main > .ce-seccion:nth-child(1) { min-height: 697px; }
	.pagina-comunicacion-y-educacion-2 main > .ce-seccion:nth-child(2) { min-height: 467px; }
	.pagina-comunicacion-y-educacion-2 main > .ce-seccion:nth-child(3) { min-height: 723px; }
	.pagina-comunicacion-y-educacion-2 main > .ce-seccion:nth-child(4) { min-height: 467px; }
	.pagina-comunicacion-y-educacion-2 main > .ce-seccion:nth-child(5) { min-height: 722px; }
	.pagina-comunicacion-y-educacion-2 main > .ce-seccion:nth-child(6) { min-height: 510px; }
	.pagina-diseno-y-comunicacion main > .ce-seccion:nth-child(1) { min-height: 723px; }
	.pagina-diseno-y-comunicacion main > .ce-seccion:nth-child(2) { min-height: 723px; }
	.pagina-diseno-y-comunicacion main > .ce-seccion:nth-child(3) { min-height: 488px; }
	.pagina-comunicacion-digital-2 main > .ce-seccion:nth-child(1) { min-height: 723px; }
	.pagina-comunicacion-digital-2 main > .ce-seccion:nth-child(2) { min-height: 593px; }
	.pagina-comunicacion-digital-2 main > .ce-seccion:nth-child(3) { min-height: 723px; }
	.pagina-comunicacion-digital-2 main > .ce-seccion:nth-child(4) { min-height: 468px; }
	.pagina-comunicacion-digital-2 main > .ce-seccion:nth-child(5) { min-height: 723px; }
	.pagina-comunicacion-digital-2 main > .ce-seccion:nth-child(6) { min-height: 467px; }
}

/* Barra de título de páginas internas */
.ce-titulo-barra { background: #f6f6f6; border-block: 1px solid #d2d3d4; }
.ce-titulo-barra__fila { display: flex; align-items: center; justify-content: space-between; min-height: 87px; }
.ce-titulo-barra h1 { margin: 0; color: #333; font-size: 18px; font-weight: 400; }
.ce-migas { color: #333; font-size: 12px; }
.ce-migas a { color: inherit; text-decoration: none; }
.ce-migas a:hover { color: #ff8c00; }

/* Blog: acordeón */
.ce-blog { padding: 12px 20px 100px; background: #fff; }
.ce-blog > * { max-width: 1100px; margin-inline: auto; }
.ce-blog .wp-block-details { margin-block: 0; padding: 12px 0; border-bottom: 1px solid #e0dede; color: #333; font-size: 14px; line-height: 1.55; }
.ce-blog .wp-block-details summary { display: flex; align-items: center; gap: 14px; color: #333; font-size: 18px; font-weight: 300; cursor: pointer; list-style: none; }
.ce-blog .wp-block-details summary::-webkit-details-marker { display: none; }
.ce-blog .wp-block-details summary::before {
	content: "+";
	flex: none;
	width: 22px;
	height: 22px;
	background: #333;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	text-align: center;
}
.ce-blog .wp-block-details[open] summary::before { content: "\2212"; background: #3ea88a; }
.ce-blog .wp-block-details summary:hover { color: #3ea88a; }
.ce-blog .wp-block-details .wp-block-columns { margin-top: 16px; }
.ce-blog .wp-block-details .wp-block-column:last-child { text-align: center; }

/* Pie de página */
.ce-pie { background: #363839; border-top: 12px solid #e9eaee; padding-block: 43px 40px; color: #8c8989; font-size: 13px; line-height: 1.6; }
.ce-pie__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: center; text-align: center; }
.ce-pie img { width: 186px; height: auto; }
.ce-pie a { color: inherit; text-decoration: none; }
.ce-pie a:hover { color: #fff; }
.ce-pie__titulo { margin: 0 0 12px; color: #ddd; font-size: 13px; font-weight: 400; text-transform: uppercase; }
.ce-redes { display: flex; justify-content: center; gap: 18px; }
.ce-redes a { color: #bebdbd; }
.ce-redes svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.ce-derechos { background: #282a2b; border-top: 1px solid #4b4c4d; padding-block: 18px 16px; color: #fff; font-size: 12px; text-align: center; }

/* Botón de WhatsApp */
.ce-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	color: #fff;
	transition: transform .2s;
}
.ce-whatsapp:hover, .ce-whatsapp:focus-visible { transform: scale(1.08); }
.ce-whatsapp svg { width: 34px; height: 34px; fill: currentColor; }

/* Animación de entrada, sustituye a las de Avada */
@media (prefers-reduced-motion: no-preference) {
	.ce-js .ce-animar { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
	.ce-js .ce-animar.es-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Tableta y celular */
@media (max-width: 1050px) {
	.ce-header__fila { align-items: center; }
	.ce-menu__boton { display: block; margin-top: 0; }
	.ce-menu ul { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 12px 20px; background: #fff; box-shadow: 0 6px 10px rgba(0, 0, 0, .12); }
	.ce-menu.esta-abierto ul { display: flex; }
	.ce-menu a, .ce-header.es-fijo .ce-menu a { padding: 13px 0; border-top: 0; }
}
@media (max-width: 782px) {
	html { scroll-padding-top: 76px; }
	.admin-bar .ce-header { top: 0; }
	.ce-header-espacio { height: 66px; }
	.ce-header__fila, .ce-header.es-fijo .ce-header__fila { min-height: 66px; }
	.ce-logo img, .ce-header.es-fijo .ce-logo img { width: 134px; }
	.ce-solo-celular { display: block; }
	.ce-solo-escritorio { display: none; }

	.ce-hero { min-height: 673px; padding-top: 40px; text-align: center; background-size: cover; background-position: center bottom !important; }
	.ce-hero__titulo { font-size: clamp(38px, 8.2vw, 60px); }
	.ce-hero__subtitulo { font-size: clamp(76px, 17.5vw, 100px); }
	.ce-hero .ce-hero__parrafo { max-width: 345px; margin: 8px auto 0; }
	.ce-hero__parrafo br { display: none; }

	.ce-quienes { padding: 60px 0 0; }
	.ce-quienes > :not(.ce-quienes__capa) { padding-inline: 40px; }
	.ce-quienes__capa { padding: 30px 20% 340px; text-align: left; }

	.ce-servicios { min-height: 0; padding: 50px 40px 20px; }
	.ce-servicios__iconos { grid-template-columns: 1fr; }
	.ce-servicios__iconos h4 { font-size: 16px; }

	.ce-linea { min-height: 0; padding: 40px 30px; background-image: none !important; }
	.ce-linea__texto, .ce-linea--derecha .ce-linea__texto { width: auto; margin-left: 0; }
	.ce-linea figure.ce-solo-celular { margin: 0 -30px 26px; }
	.ce-linea__botones { flex-direction: column; align-items: center; }
	.ce-boton-icono { width: 100%; }

	.ce-clientes__logos { grid-template-columns: 1fr; max-width: 230px; }

	.ce-detalle { min-height: 0; margin: 40px 30px 0; padding: 60px 50px; }
	.ce-detalle :is(h2, p) { color: #fff; }
	.ce-detalle .wp-block-column:first-child { flex-basis: auto; }
	.ce-beneficios { padding: 50px 30px 30px; }
	.ce-beneficio { width: 100%; }
	.ce-beneficio img { width: 183px; }

	.ce-blog { padding: 12px 20px 50px; }
	.ce-pie__fila { grid-template-columns: 1fr; }
	.ce-whatsapp { right: 14px; bottom: 14px; width: 54px; height: 54px; }
}